@mihcm/ui 0.14.1

package/src/Select.tsx

@@ -0,0 +1,710 @@
+'use client';
+
+/**
+ * Select (web variant — React DOM).
+ *
+ * Custom composable select dropdown. No native `<select>` or external deps.
+ *
+ * Usage:
+ *   <Select value={val} onValueChange={setVal}>
+ *     <SelectTrigger placeholder="Pick a fruit" />
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *
+ * Controlled-only: pass `value` / `onValueChange`.
+ * Keyboard: ArrowDown/Up to navigate, Enter to select, Escape to close.
+ * WCAG 2.1 AA: role="listbox", role="option", aria-expanded, aria-selected.
+ *
+ * Wiki: docs/components/Select.md
+ */
+import {
+  forwardRef,
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import ReactSelectBase, {
+  type ClassNamesConfig,
+  type GroupBase,
+  type Props as BaseReactSelectProps,
+  type SelectComponentsConfig,
+} from 'react-select';
+import ReactAsyncSelectBase, { type AsyncProps } from 'react-select/async';
+import ReactCreatableSelectBase, { type CreatableProps } from 'react-select/creatable';
+import ReactAsyncCreatableSelectBase, {
+  type AsyncCreatableProps,
+} from 'react-select/async-creatable';
+import makeAnimated from 'react-select/animated';
+import { cn } from './internal/cn.js';
+
+interface ReactSelectDefaultableProps<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+> {
+  className?: string | undefined;
+  classNamePrefix?: string | null | undefined;
+  classNames?: ClassNamesConfig<Option, IsMulti, Group> | undefined;
+  unstyled?: boolean | undefined;
+}
+
+export interface DefaultReactSelectOption {
+  value: string;
+  label: string;
+  isDisabled?: boolean;
+}
+
+export type ReactSelectProps<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+> = BaseReactSelectProps<Option, IsMulti, Group>;
+
+export type ReactAsyncSelectProps<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+> = AsyncProps<Option, IsMulti, Group>;
+
+export type ReactCreatableSelectProps<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+> = CreatableProps<Option, IsMulti, Group>;
+
+export type ReactAsyncCreatableSelectProps<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+> = AsyncCreatableProps<Option, IsMulti, Group>;
+
+export function getReactSelectAnimatedComponents<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(): SelectComponentsConfig<Option, IsMulti, Group> {
+  return makeAnimated() as unknown as SelectComponentsConfig<Option, IsMulti, Group>;
+}
+
+export const reactSelectAnimatedComponents: SelectComponentsConfig<
+  DefaultReactSelectOption,
+  false,
+  GroupBase<DefaultReactSelectOption>
+> =
+  getReactSelectAnimatedComponents<DefaultReactSelectOption>();
+
+const reactSelectClassNames = {
+  clearIndicator: ({ isFocused }) => cn(
+    'rounded-md p-1 text-muted-foreground transition-colors',
+    'hover:bg-muted hover:text-foreground',
+    isFocused && 'text-foreground',
+  ),
+  control: ({ isDisabled, isFocused }) => cn(
+    'min-h-10 rounded-lg border bg-card px-2.5 text-body-sm shadow-mi-input transition-colors',
+    'hover:border-primary/60',
+    isFocused ? 'border-primary ring-2 ring-ring/20' : 'border-border',
+    isDisabled && 'cursor-not-allowed bg-muted opacity-50',
+  ),
+  dropdownIndicator: ({ isFocused }) => cn(
+    'rounded-md p-1 text-muted-foreground transition-colors',
+    'hover:bg-muted hover:text-foreground',
+    isFocused && 'text-foreground',
+  ),
+  group: () => 'py-1',
+  groupHeading: () => 'px-2 py-1 text-xs font-semibold text-muted-foreground',
+  indicatorsContainer: () => 'gap-1',
+  indicatorSeparator: () => 'mx-1 my-2 w-px self-stretch bg-border',
+  input: () => 'text-foreground',
+  loadingIndicator: () => 'text-muted-foreground',
+  loadingMessage: () => 'px-3 py-6 text-center text-body-sm text-muted-foreground',
+  menu: () => 'z-50 mt-1 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-mi-input',
+  menuList: () => 'max-h-72 overflow-y-auto p-1',
+  multiValue: () => 'm-0.5 inline-flex items-center gap-1 rounded-md bg-muted text-foreground',
+  multiValueLabel: () => 'px-2 py-0.5 text-xs font-medium',
+  multiValueRemove: () => cn(
+    'rounded-r-md px-1 text-muted-foreground transition-colors',
+    'hover:bg-destructive hover:text-destructive-foreground',
+  ),
+  noOptionsMessage: () => 'px-3 py-6 text-center text-body-sm text-muted-foreground',
+  option: ({ isDisabled, isFocused, isSelected }) => cn(
+    'cursor-pointer rounded-md px-2 py-1.5 text-body-sm outline-none transition-colors',
+    isFocused && 'bg-muted',
+    isSelected && 'bg-primary text-primary-foreground',
+    isDisabled && 'pointer-events-none cursor-not-allowed opacity-50',
+  ),
+  placeholder: () => 'text-muted-foreground',
+  singleValue: () => 'text-foreground',
+  valueContainer: () => 'gap-1 py-1.5',
+} satisfies ClassNamesConfig<unknown, boolean, GroupBase<unknown>>;
+
+function withReactSelectDefaults<
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+  Props extends ReactSelectDefaultableProps<Option, IsMulti, Group>,
+>(props: Props): Props {
+  const {
+    className,
+    classNamePrefix = 'mihcm-select',
+    classNames,
+    unstyled = true,
+    ...rest
+  } = props;
+  const defaultClassNames = reactSelectClassNames as unknown as ClassNamesConfig<
+    Option,
+    IsMulti,
+    Group
+  >;
+
+  return {
+    ...rest,
+    className: cn('w-full min-w-0', className),
+    classNamePrefix,
+    classNames: {
+      ...defaultClassNames,
+      ...classNames,
+    },
+    unstyled,
+  } as Props;
+}
+
+/* ── React Select powered exports ──────────────────────────────────── */
+
+export function ReactSelect<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: ReactSelectProps<Option, IsMulti, Group>) {
+  return (
+    <ReactSelectBase
+      {...withReactSelectDefaults<Option, IsMulti, Group, ReactSelectProps<Option, IsMulti, Group>>(
+        props,
+      )}
+    />
+  );
+}
+
+export function ReactAsyncSelect<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: ReactAsyncSelectProps<Option, IsMulti, Group>) {
+  return (
+    <ReactAsyncSelectBase
+      {...withReactSelectDefaults<
+        Option,
+        IsMulti,
+        Group,
+        ReactAsyncSelectProps<Option, IsMulti, Group>
+      >(props)}
+    />
+  );
+}
+
+export function ReactCreatableSelect<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: ReactCreatableSelectProps<Option, IsMulti, Group>) {
+  return (
+    <ReactCreatableSelectBase
+      {...withReactSelectDefaults<
+        Option,
+        IsMulti,
+        Group,
+        ReactCreatableSelectProps<Option, IsMulti, Group>
+      >(props)}
+    />
+  );
+}
+
+export function ReactAsyncCreatableSelect<
+  Option = DefaultReactSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: ReactAsyncCreatableSelectProps<Option, IsMulti, Group>) {
+  return (
+    <ReactAsyncCreatableSelectBase
+      {...withReactSelectDefaults<
+        Option,
+        IsMulti,
+        Group,
+        ReactAsyncCreatableSelectProps<Option, IsMulti, Group>
+      >(props)}
+    />
+  );
+}
+
+/* ── Context ───────────────────────────────────────────────────────── */
+
+interface SelectContextValue {
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disabled: boolean;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  setTriggerRef: (el: HTMLButtonElement | null) => void;
+  /** Label text of the currently selected item (set by SelectItem). */
+  selectedLabel: { value: string; label: string } | undefined;
+  setSelectedLabel: (selected: { value: string; label: string } | undefined) => void;
+  getLabelForValue: (value: string | undefined) => string | undefined;
+}
+
+const SelectContext = createContext<SelectContextValue | null>(null);
+
+function useSelectContext() {
+  const ctx = useContext(SelectContext);
+  if (!ctx) throw new Error('Select sub-components must be used within <Select>.');
+  return ctx;
+}
+
+function getTextLabel(children: ReactNode): string | undefined {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children);
+  }
+
+  return undefined;
+}
+
+function findSelectItemLabel(children: ReactNode, value: string | undefined): string | undefined {
+  if (!value) return undefined;
+
+  let match: string | undefined;
+
+  Children.forEach(children, (child) => {
+    if (match || !isValidElement(child)) return;
+
+    const props = child.props as {
+      value?: unknown;
+      children?: ReactNode;
+    };
+
+    if (props.value === value) {
+      match = getTextLabel(props.children);
+      return;
+    }
+
+    match = findSelectItemLabel(props.children, value);
+  });
+
+  return match;
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface SelectProps {
+  value?: string | undefined;
+  onValueChange?: ((value: string) => void) | undefined;
+  open?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  disabled?: boolean | undefined;
+  children: ReactNode;
+}
+
+export function Select({
+  value,
+  onValueChange,
+  open: controlledOpen,
+  onOpenChange,
+  disabled,
+  children,
+}: SelectProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (disabled && next) return;
+      onOpenChange?.(next);
+      setInternalOpen(next);
+    },
+    [disabled, onOpenChange],
+  );
+
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const setTriggerRef = useCallback((el: HTMLButtonElement | null) => {
+    triggerRef.current = el;
+  }, []);
+  const [selectedLabel, setSelectedLabel] = useState<{ value: string; label: string } | undefined>();
+
+  const handleValueChange = useCallback(
+    (v: string) => {
+      onValueChange?.(v);
+      setOpen(false);
+    },
+    [onValueChange, setOpen],
+  );
+
+  const getLabelForValue = useCallback(
+    (nextValue: string | undefined) => findSelectItemLabel(children, nextValue),
+    [children],
+  );
+
+  return (
+    <SelectContext.Provider
+      value={{
+        value,
+        onValueChange: handleValueChange,
+        open,
+        setOpen,
+        disabled: !!disabled,
+        triggerRef,
+        setTriggerRef,
+        selectedLabel,
+        setSelectedLabel,
+        getLabelForValue,
+      }}
+    >
+      <div className="relative inline-block">{children}</div>
+    </SelectContext.Provider>
+  );
+}
+
+/* ── Trigger ───────────────────────────────────────────────────────── */
+
+export const selectTriggerVariants = cva(
+  'inline-flex w-full items-center justify-between gap-2 rounded-lg border bg-card text-foreground shadow-mi-input ' +
+    'transition-colors duration-150 ' +
+    'focus-visible:outline-none focus-visible:border-primary ' +
+    'disabled:pointer-events-none disabled:opacity-50 ' +
+    'select-none whitespace-nowrap',
+  {
+    variants: {
+      variant: {
+        default: 'border-border',
+        destructive:
+          'border-destructive text-destructive focus-visible:border-destructive',
+      },
+      size: {
+        sm: 'h-9 px-3 text-body-sm',
+        md: 'h-10 px-3.5 text-body-sm',
+        lg: 'h-12 px-4 text-body-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
+export interface SelectTriggerProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'children'>,
+    VariantProps<typeof selectTriggerVariants> {
+  placeholder?: string | undefined;
+  disabled?: boolean | undefined;
+}
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  function SelectTrigger({ className, variant, size, placeholder, disabled, id, ...props }, ref) {
+    const ctx = useSelectContext();
+    const isDisabled = disabled ?? ctx.disabled;
+    const listboxId = id ? `${id}-listbox` : undefined;
+
+    const handleClick = useCallback(() => {
+      ctx.setOpen(!ctx.open);
+    }, [ctx]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (!ctx.open) ctx.setOpen(true);
+        }
+      },
+      [ctx],
+    );
+
+    // Merge refs
+    const setRef = useCallback(
+      (el: HTMLButtonElement | null) => {
+        ctx.setTriggerRef(el);
+        if (typeof ref === 'function') ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el;
+      },
+      [ctx, ref],
+    );
+
+    const selectedLabel = ctx.selectedLabel;
+    const hasValue = ctx.value !== undefined && ctx.value !== '';
+    const displayText =
+      hasValue && selectedLabel && selectedLabel.value === ctx.value
+        ? selectedLabel.label
+        : hasValue
+          ? ctx.getLabelForValue(ctx.value) ?? ctx.value
+          : undefined;
+
+    return (
+      <button
+        ref={setRef}
+        type="button"
+        id={id}
+        role="combobox"
+        aria-expanded={ctx.open}
+        aria-haspopup="listbox"
+        aria-controls={ctx.open ? listboxId : undefined}
+        disabled={isDisabled}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        className={cn(selectTriggerVariants({ variant, size }), className)}
+        {...props}
+      >
+        <span className={cn('truncate', !displayText && 'text-muted-foreground')}>
+          {displayText ?? placeholder ?? 'Select…'}
+        </span>
+        {/* Chevron-down icon */}
+        <svg
+          aria-hidden
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          className={cn(
+            'h-4 w-4 shrink-0 opacity-50 transition-transform duration-200',
+            ctx.open && 'rotate-180',
+          )}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6l4 4 4-4" />
+        </svg>
+      </button>
+    );
+  },
+);
+
+/* ── Content ───────────────────────────────────────────────────────── */
+
+export interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  function SelectContent({ className, children, ...props }, ref) {
+    const ctx = useSelectContext();
+    const contentRef = useRef<HTMLDivElement | null>(null);
+    const focusedIndexRef = useRef(-1);
+
+    // Close on click outside
+    useEffect(() => {
+      if (!ctx.open) return;
+      function handleClickOutside(e: MouseEvent) {
+        const target = e.target as Node;
+        if (
+          contentRef.current &&
+          !contentRef.current.contains(target) &&
+          ctx.triggerRef.current &&
+          !ctx.triggerRef.current.contains(target)
+        ) {
+          ctx.setOpen(false);
+        }
+      }
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [ctx]);
+
+    // Keyboard navigation within the list
+    useEffect(() => {
+      if (!ctx.open) return;
+      function handleKeyDown(e: KeyboardEvent) {
+        const options = contentRef.current?.querySelectorAll<HTMLElement>('[role="option"]');
+        if (!options?.length) return;
+
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          ctx.setOpen(false);
+          ctx.triggerRef.current?.focus();
+          return;
+        }
+
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          focusedIndexRef.current = Math.min(focusedIndexRef.current + 1, options.length - 1);
+          options[focusedIndexRef.current]?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          focusedIndexRef.current = Math.max(focusedIndexRef.current - 1, 0);
+          options[focusedIndexRef.current]?.focus();
+        }
+      }
+      document.addEventListener('keydown', handleKeyDown);
+      return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [ctx]);
+
+    // Focus first option (or selected) on open
+    useEffect(() => {
+      if (!ctx.open || !contentRef.current) return;
+      focusedIndexRef.current = -1;
+      const selected = contentRef.current.querySelector<HTMLElement>('[aria-selected="true"]');
+      if (selected) {
+        selected.focus();
+      } else {
+        const first = contentRef.current.querySelector<HTMLElement>('[role="option"]');
+        first?.focus();
+      }
+    }, [ctx.open]);
+
+    // Merge refs
+    const setRef = useCallback(
+      (el: HTMLDivElement | null) => {
+        contentRef.current = el;
+        if (typeof ref === 'function') ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      },
+      [ref],
+    );
+
+    if (!ctx.open) return null;
+
+    return (
+      <div
+        ref={setRef}
+        id={ctx.triggerRef.current?.id ? `${ctx.triggerRef.current.id}-listbox` : undefined}
+        role="listbox"
+        aria-labelledby={ctx.triggerRef.current?.id || undefined}
+        className={cn(
+          'absolute left-0 top-full z-50 mt-1 w-full min-w-[8rem] overflow-hidden rounded-lg',
+          'border border-border bg-card text-card-foreground shadow-mi-input',
+          'animate-dropdown-in',
+          className,
+        )}
+        {...props}
+      >
+        <div className="max-h-60 overflow-y-auto p-1">{children}</div>
+      </div>
+    );
+  },
+);
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+export interface SelectItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  function SelectItem({ className, value, disabled, children, ...props }, ref) {
+    const ctx = useSelectContext();
+    const { onValueChange, selectedLabel, setSelectedLabel, triggerRef } = ctx;
+    const isSelected = ctx.value === value;
+
+    // Register label of selected item
+    useEffect(() => {
+      if (
+        isSelected &&
+        typeof children === 'string' &&
+        (selectedLabel?.value !== value || selectedLabel.label !== children)
+      ) {
+        setSelectedLabel({ value, label: children });
+      }
+    }, [isSelected, children, selectedLabel?.label, selectedLabel?.value, setSelectedLabel, value]);
+
+    const handleSelect = useCallback(() => {
+      if (disabled) return;
+      if (typeof children === 'string') {
+        setSelectedLabel({ value, label: children });
+      }
+      onValueChange(value);
+      triggerRef.current?.focus();
+    }, [children, disabled, onValueChange, setSelectedLabel, triggerRef, value]);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleSelect();
+        }
+      },
+      [handleSelect],
+    );
+
+    return (
+      <div
+        ref={ref}
+        role="option"
+        aria-selected={isSelected}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? undefined : -1}
+        onClick={handleSelect}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'relative flex cursor-pointer items-center rounded-md px-2 py-1.5 text-body-sm outline-none',
+          'transition-colors duration-150',
+          'hover:bg-muted focus:bg-muted',
+          isSelected && 'font-medium',
+          disabled && 'pointer-events-none opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        {/* Check icon */}
+        <span className="mr-2 inline-flex h-4 w-4 shrink-0 items-center justify-center">
+          {isSelected && (
+            <svg
+              aria-hidden
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              className="h-4 w-4"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l3 3 7-7" />
+            </svg>
+          )}
+        </span>
+        <span className="truncate">{children}</span>
+      </div>
+    );
+  },
+);
+
+/* ── Group ─────────────────────────────────────────────────────────── */
+
+export interface SelectGroupProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
+  function SelectGroup({ className, ...props }, ref) {
+    return <div ref={ref} role="group" className={cn('py-1', className)} {...props} />;
+  },
+);
+
+/* ── Label ─────────────────────────────────────────────────────────── */
+
+export interface SelectLabelProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(
+  function SelectLabel({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('px-2 py-1.5 text-xs font-semibold text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Separator ─────────────────────────────────────────────────────── */
+
+export interface SelectSeparatorProps extends HTMLAttributes<HTMLHRElement> {}
+
+export const SelectSeparator = forwardRef<HTMLHRElement, SelectSeparatorProps>(
+  function SelectSeparator({ className, ...props }, ref) {
+    return (
+      <hr
+        ref={ref}
+        className={cn('-mx-1 my-1 border-t border-border', className)}
+        {...props}
+      />
+    );
+  },
+);