Function Select

packages/ui-components/src/Common/Select/index.tsx:55–197

({
  values = [],
  value,
  placeholder,
  label,
  inline,
  onChange,
  className,
  dropdownClassName,
  ariaLabel,
  loading = false,
  disabled = false,
  fallbackClass = '',
}: SelectProps<T>)

};

const Select = <T extends string>({
  values = [],
  value,
  placeholder,
  label,
  inline,
  onChange,
  className,
  dropdownClassName,
  ariaLabel,
  loading = false,
  disabled = false,
  fallbackClass = '',
}: SelectProps<T>): ReactNode => {
  const id = useId();

  const mappedValues = useMemo(() => mapValues(values), [values]) as Array<
    SelectGroup<T>
  >;

  // We render the actual item slotted to fix/prevent the issue
  // of the tirgger flashing on the initial render
  const currentItem = useMemo(
    () =>
      mappedValues
        .flatMap(({ items }) => items)
        .find(item => item.value === value),
    [mappedValues, value]
  );

  const memoizedMappedValues = useMemo(() => {
    return mappedValues.map(({ label, items }, key) => (
      <SelectPrimitive.Group key={label?.toString() ?? key}>
        {label && (
          <SelectPrimitive.Label
            className={classNames(styles.item, styles.label)}
          >
            {label}
          </SelectPrimitive.Label>
        )}

        {items.map(({ value, label, iconImage, badge, disabled }) => (
          <SelectPrimitive.Item
            key={value}
            value={value}
            disabled={disabled}
            className={classNames(styles.item, styles.text)}
          >
            <SelectPrimitive.ItemText>
              {iconImage}
              <span>{label}</span>
              {badge && (
                <Badge size="small" kind={badge.kind} className={styles.badge}>
                  {badge.label}
                </Badge>
              )}
            </SelectPrimitive.ItemText>
          </SelectPrimitive.Item>