@mihcm/ui 0.14.1 → 0.15.0

package/src/Select/item.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+/**
+ * SelectItem — single option row with check indicator and keyboard support.
+ * Registers its label with the Select context so the trigger can display the
+ * selected option's visible label without re-deriving from `children`.
+ */
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { cn } from '../internal/cn.js';
+import { useSelectContext } from './context.js';
+
+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;
+
+    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: 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}
+      >
+        <span className="mr-2 inline-flex h-4 w-4 shrink-0 items-center justify-center">
+          {isSelected && (
+            <svg
+              aria-hidden="true"
+              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>
+    );
+  },
+);

package/src/Select/parts.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+/**
+ * Small Select sub-parts: SelectGroup, SelectLabel, SelectSeparator.
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../internal/cn.js';
+
+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} />;
+  },
+);
+
+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}
+      />
+    );
+  },
+);
+
+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}
+      />
+    );
+  },
+);

package/src/Select/react-select.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+/**
+ * React Select-powered exports for `@mihcm/ui/Select`. Provides searchable,
+ * async, multi, creatable, grouped, and async-creatable selects with MiHCM
+ * field-surface tokens preserved through `classNames`.
+ */
+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;
+}
+
+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)}
+    />
+  );
+}

package/src/Select/root.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+/**
+ * Select root — owns open/close state, value, and the selected-label cache
+ * that downstream SelectTrigger reads to render the active option's label.
+ */
+import { useCallback, useRef, useState, type ReactNode } from 'react';
+import { SelectContext, findSelectItemLabel } from './context.js';
+
+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>
+  );
+}

package/src/Select/trigger.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+/**
+ * SelectTrigger — combobox button with chevron, displays the selected label.
+ */
+import {
+  forwardRef,
+  useCallback,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MutableRefObject,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../internal/cn.js';
+import { useSelectContext } from './context.js';
+
+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: KeyboardEvent) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (!ctx.open) ctx.setOpen(true);
+        }
+      },
+      [ctx],
+    );
+
+    const setRef = useCallback(
+      (el: HTMLButtonElement | null) => {
+        ctx.setTriggerRef(el);
+        if (typeof ref === 'function') ref(el);
+        else if (ref) (ref as 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>
+        <svg
+          aria-hidden="true"
+          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>
+    );
+  },
+);