@cdx-ui/components 0.3.2 → 0.3.4

package/src/components/Select/index.tsx

@@ -1,10 +1,25 @@
-import { cloneElement, forwardRef, isValidElement, useMemo, type ReactNode } from 'react';
-import { Text, type TextProps, View, type ViewProps } from 'react-native';
-import { KeyboardArrowDown, KeyboardArrowUp } from '@cdx-ui/icons';
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
+import { Platform, Text, type TextInput, type TextProps, View, type ViewProps } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { Check, KeyboardArrowDown, KeyboardArrowUp, Search } from '@cdx-ui/icons';
 import {
   SelectContent as SelectContentPrimitive,
+  SelectEmpty as SelectEmptyPrimitive,
   SelectItem as SelectItemPrimitive,
+  SelectListbox as SelectListboxPrimitive,
   SelectRoot as SelectRootPrimitive,
+  SelectProvider,
+  SelectSearch as SelectSearchPrimitive,
+  SelectSheetContent as SelectSheetContentPrimitive,
   SelectTrigger as SelectTriggerPrimitive,
   Slot,
   dataAttributes,
@@ -12,35 +27,75 @@ import {
   useSelectContext,
   useSelectItemContext,
   type ISelectContentProps,
+  type ISelectEmptyProps,
   type ISelectItemLabelProps,
   type ISelectItemProps,
   type ISelectProps,
+  type ISelectSearchProps,
   type ISelectTriggerProps,
   type ISelectValueProps,
+  type SelectItemData,
+  type SelectValueRenderProps,
 } from '@cdx-ui/primitives';
-import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import {
+  cn,
+  FormControlContext,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+  type FormControlContextValue,
+} from '@cdx-ui/utils';
+import { BottomSheet } from '../BottomSheet';
+import { checkboxIconVariants, checkboxIndicatorVariants } from '../Checkbox/styles';
 import { Icon, IconProps } from '../Icon';
+import { Input, type InputProps } from '../Input';
 import { Menu } from '../Menu';
-import { menuItemVariants } from '../Menu/styles';
+import { menuItemControlVariants, menuItemVariants } from '../Menu/styles';
+import { PickerBottomSheetSurface, PickerSheetTextInput } from '../picker/surfaces';
 import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type SelectVariantProps,
+  selectBottomSheetListboxVariants,
+  selectBottomSheetVariants,
+  selectEmptyTextVariants,
+  selectEmptyVariants,
   selectIconVariants,
+  selectItemVariants,
+  selectSearchListboxVariants,
+  selectSearchVariants,
   selectTriggerVariants,
   selectValueVariants,
 } from './styles';
 
+export type {
+  SelectFilter,
+  SelectItemData,
+  SelectType,
+  SelectValueRenderProps,
+} from '@cdx-ui/primitives';
+
 const SCOPE = 'SELECT';
 
 const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps;
 
+const IS_WEB = Platform.OS === 'web';
+
+/** `true` inside the native `Select.BottomSheet`, where `Select.Search` uses the sheet's input. */
+const SelectSheetContext = createContext(false);
+
 // =============================================================================
 // STYLED ROOT
 // =============================================================================
 
-export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps {
-  className?: string;
-}
+/**
+ * `type` narrows `value` / `defaultValue` / `onValueChange` to `string` (single, the default)
+ * or `string[]` (multiple).
+ */
+export type SelectProps = ViewProps &
+  SelectVariantProps &
+  ISelectProps & {
+    className?: string;
+  };
 
 const SelectRoot = forwardRef<View, SelectProps>(
   ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
@@ -147,19 +202,32 @@ SelectTrigger.displayName = 'Select.Trigger';
 // STYLED VALUE (styled-only)
 // =============================================================================
 
-export interface SelectValueProps extends TextProps, ISelectValueProps {
+export interface SelectValueProps extends Omit<TextProps, 'children'>, ISelectValueProps {
   asChild?: boolean;
   className?: string;
 }
 
+/**
+ * `Intl.ListFormat` is not available on Hermes, so labels are joined with a fixed separator
+ * to keep the summary identical on iOS, Android, and web.
+ */
+const SELECTED_TEXT_SEPARATOR = ', ';
+
 const SelectValue = forwardRef<Text, SelectValueProps>(
   ({ asChild, className, style, placeholder, children, ...props }, ref) => {
     const { size } = useSelectStyleContext();
-    const { value, items, invalid } = useSelectContext();
+    const { type, items, selectedValues, invalid } = useSelectContext();
+
+    const selectedItems = useMemo<SelectItemData[]>(
+      () => items.filter((item) => selectedValues.includes(item.value)),
+      [items, selectedValues],
+    );
+    const isPlaceholder = !selectedValues.some((selected) => selected !== '');
+    const selectedText = selectedItems.map((item) => item.label).join(SELECTED_TEXT_SEPARATOR);
 
-    const hasValue = value !== undefined && value !== '';
-    const showPlaceholder = !hasValue;
-    const displayText = hasValue ? items.find((item) => item.value === value)?.label : placeholder;
+    const renderState: SelectValueRenderProps = { isPlaceholder, selectedItems, selectedText };
+    const customDisplay = typeof children === 'function' ? children(renderState) : children;
+    const displayText = isPlaceholder ? placeholder : selectedText;
 
     const computedClassName = cn(selectValueVariants({ size }), className);
     const Comp = asChild ? Slot : Text;
@@ -169,17 +237,18 @@ const SelectValue = forwardRef<Text, SelectValueProps>(
         ref={ref}
         className={computedClassName}
         style={style}
+        numberOfLines={type === 'multiple' ? 1 : undefined}
         {...props}
         {...mergeDataAttributes(
           props,
           dataAttributes({
             slot: 'select-value',
-            placeholder: showPlaceholder,
+            placeholder: isPlaceholder,
             invalid,
           }),
         )}
       >
-        {children ?? displayText}
+        {customDisplay ?? displayText}
       </Comp>
     );
   },
@@ -231,6 +300,114 @@ const SelectIcon = ({ asChild, className, style, as, position, ...props }: Selec
 
 SelectIcon.displayName = 'Select.Icon';
 
+// =============================================================================
+// STYLED SEARCH — composes Input inside the popup
+// =============================================================================
+
+export interface SelectSearchProps extends ISelectSearchProps {
+  /**
+   * Merge the search wiring onto the single child text input instead of rendering the default
+   * `Input` with a search icon.
+   */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the search container's own styles. */
+  className?: string;
+  /**
+   * `Input` variant of the default search field. Ignored when `asChild` is set.
+   * @default 'subtle'
+   */
+  variant?: InputProps['variant'];
+  /** The text input to render when `asChild` is set. Otherwise not rendered. */
+  children?: ReactNode;
+}
+
+/**
+ * The search input sits inside the select's `Field` in the React tree but is not the field's
+ * control, so it must not pick up the field's id, label, validation, or label-press focus.
+ */
+const ISOLATED_FIELD: Partial<FormControlContextValue> = {};
+
+const SelectSearch = forwardRef<TextInput, SelectSearchProps>(
+  ({ asChild, className, style, variant = 'subtle', children, ...props }, ref) => {
+    const { size } = useSelectStyleContext();
+    const inSheet = useContext(SelectSheetContext);
+    const slotData = dataAttributes({ slot: 'select-search' });
+
+    if (asChild) {
+      return (
+        <FormControlContext.Provider value={ISOLATED_FIELD}>
+          <SelectSearchPrimitive
+            ref={ref}
+            asChild
+            className={className}
+            style={style}
+            {...props}
+            {...mergeDataAttributes(props, slotData)}
+          >
+            {children}
+          </SelectSearchPrimitive>
+        </FormControlContext.Provider>
+      );
+    }
+
+    return (
+      <FormControlContext.Provider value={ISOLATED_FIELD}>
+        <View className={cn(selectSearchVariants(), className)} style={style} {...slotData}>
+          <Input variant={variant} size={size ?? 'default'}>
+            <Input.Icon as={Search} />
+            <SelectSearchPrimitive ref={ref} asChild {...props}>
+              {inSheet ? (
+                <Input.Field asChild>
+                  <PickerSheetTextInput />
+                </Input.Field>
+              ) : (
+                <Input.Field />
+              )}
+            </SelectSearchPrimitive>
+          </Input>
+        </View>
+      </FormControlContext.Provider>
+    );
+  },
+);
+
+SelectSearch.displayName = 'Select.Search';
+
+// =============================================================================
+// STYLED EMPTY — shown when no option matches the search
+// =============================================================================
+
+export interface SelectEmptyProps extends ISelectEmptyProps {
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the empty state's own styles. */
+  className?: string;
+}
+
+const SelectEmpty = forwardRef<View, SelectEmptyProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { size } = useSelectStyleContext();
+
+    return (
+      <SelectEmptyPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={cn(selectEmptyVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-empty' }))}
+      >
+        {!asChild && typeof children === 'string' ? (
+          <Text className={selectEmptyTextVariants({ size })}>{children}</Text>
+        ) : (
+          children
+        )}
+      </SelectEmptyPrimitive>
+    );
+  },
+);
+
+SelectEmpty.displayName = 'Select.Empty';
+
 // =============================================================================
 // STYLED CONTENT — composes Menu surface (listbox semantics stay on primitive)
 // =============================================================================
@@ -240,8 +417,30 @@ export interface SelectContentProps extends ViewProps, ISelectContentProps {
   className?: string;
 }
 
+const isSlot = (child: ReactNode, slot: unknown) => isValidElement(child) && child.type === slot;
+
+/**
+ * Sorts direct children into regions: `Select.Search` above a scrollable listbox of the
+ * remaining children, and `Select.Empty` below it. `Select.Search` and `Select.Empty` must be
+ * direct children: a `memo()`, HOC, or custom wrapper is not recognized and renders among the
+ * options. A second `Select.Search` or `Select.Empty` is dropped.
+ */
+function partitionPopupChildren(children: ReactNode) {
+  const childArray = Children.toArray(children);
+  return {
+    search: childArray.find((child) => isSlot(child, SelectSearch)),
+    empty: childArray.find((child) => isSlot(child, SelectEmpty)),
+    options: childArray.filter(
+      (child) => !isSlot(child, SelectSearch) && !isSlot(child, SelectEmpty),
+    ),
+  };
+}
+
+/** Without `asChild`, direct children are sorted into regions (see `partitionPopupChildren`). */
 const SelectContent = forwardRef<View, SelectContentProps>(
   ({ asChild, className, style, children, ...props }, ref) => {
+    const slotData = mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }));
+
     if (asChild) {
       return (
         <SelectContentPrimitive
@@ -250,24 +449,33 @@ const SelectContent = forwardRef<View, SelectContentProps>(
           className={className}
           style={style}
           {...props}
-          {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
+          {...slotData}
         >
           {children}
         </SelectContentPrimitive>
       );
     }
 
+    const { search, empty, options } = partitionPopupChildren(children);
+
     return (
-      <SelectContentPrimitive
-        ref={ref}
-        asChild
-        style={style}
-        {...props}
-        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
-      >
-        <Menu.Content asSurface scrollable className={className}>
-          {children}
-        </Menu.Content>
+      <SelectContentPrimitive ref={ref} asChild style={style} {...props} {...slotData}>
+        {search ? (
+          <Menu.Content asSurface className={className}>
+            {search}
+            <SelectListboxPrimitive asChild>
+              <Menu.Content asSurface scrollable className={selectSearchListboxVariants()}>
+                {options}
+              </Menu.Content>
+            </SelectListboxPrimitive>
+            {empty}
+          </Menu.Content>
+        ) : (
+          <Menu.Content asSurface scrollable className={className}>
+            {options}
+            {empty}
+          </Menu.Content>
+        )}
       </SelectContentPrimitive>
     );
   },
@@ -275,6 +483,168 @@ const SelectContent = forwardRef<View, SelectContentProps>(
 
 SelectContent.displayName = 'Select.Content';
 
+// =============================================================================
+// STYLED BOTTOM SHEET — native surface in place of Select.Content
+// =============================================================================
+
+export interface SelectBottomSheetProps extends ViewProps {
+  /** Render the consumer's child as the sheet body, skipping the region split. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the sheet body's own styles. */
+  className?: string;
+  /**
+   * Accessible name of the visually hidden dismiss button on web, where the surface is the
+   * `Select.Content` dropdown.
+   * @default 'Dismiss'
+   */
+  dismissAccessibilityLabel?: string;
+  /** `Select.Search`, `Select.Item` elements, and `Select.Empty`, as in `Select.Content`. */
+  children?: ReactNode;
+}
+
+const SAFE_AREA_FALLBACK = { bottom: 0 };
+
+const SelectNativeBottomSheet = forwardRef<View, SelectBottomSheetProps>(
+  (
+    {
+      asChild,
+      className,
+      children,
+      dismissAccessibilityLabel: _dismissAccessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const ctx = useSelectContext();
+    const insets = useContext(SafeAreaInsetsContext) ?? SAFE_AREA_FALLBACK;
+    const slotData = mergeDataAttributes(props, dataAttributes({ slot: 'select-bottom-sheet' }));
+
+    const { search, empty, options } = partitionPopupChildren(children);
+
+    // The sheet renders in the BottomSheet.Provider portal, outside this tree, so the select
+    // context is provided again inside it.
+    return (
+      <PickerBottomSheetSurface
+        open={ctx.open && !ctx.native}
+        setOpen={ctx.setOpen}
+        fill
+        // gorhom makes the sheet one accessibility element by default, which hides the rows
+        // from VoiceOver.
+        accessible={false}
+        keyboardBehavior="extend"
+        keyboardBlurBehavior="restore"
+      >
+        <SelectProvider value={ctx}>
+          <SelectSheetContext.Provider value>
+            {asChild ? (
+              <SelectSheetContentPrimitive ref={ref} asChild {...props} {...slotData}>
+                {children}
+              </SelectSheetContentPrimitive>
+            ) : (
+              <SelectSheetContentPrimitive
+                ref={ref}
+                className={cn(selectBottomSheetVariants(), className)}
+                {...props}
+                {...slotData}
+              >
+                {search}
+                <BottomSheet.ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  keyboardDismissMode="on-drag"
+                  automaticallyAdjustKeyboardInsets
+                  contentContainerStyle={{ paddingBottom: insets.bottom }}
+                >
+                  <SelectListboxPrimitive className={selectBottomSheetListboxVariants()}>
+                    {options}
+                  </SelectListboxPrimitive>
+                  {empty}
+                </BottomSheet.ScrollView>
+              </SelectSheetContentPrimitive>
+            )}
+          </SelectSheetContext.Provider>
+        </SelectProvider>
+      </PickerBottomSheetSurface>
+    );
+  },
+);
+
+/**
+ * Presents the options in a bottom sheet on iOS and Android, in place of `Select.Content`. The
+ * sheet keeps `Select.Search` and the results above the soft keyboard, and closes on swipe
+ * down, backdrop press, Android back, and the VoiceOver escape gesture without changing the
+ * value. On web it renders the `Select.Content` dropdown. Requires `BottomSheet.Provider`.
+ */
+const SelectBottomSheet = forwardRef<View, SelectBottomSheetProps>((props, ref) =>
+  IS_WEB ? (
+    <SelectContent ref={ref} {...props} />
+  ) : (
+    <SelectNativeBottomSheet ref={ref} {...props} />
+  ),
+);
+
+SelectBottomSheet.displayName = 'Select.BottomSheet';
+
+// =============================================================================
+// STYLED ITEM CONTROL — Menu checkbox chrome driven by item selection
+// =============================================================================
+
+export interface SelectItemControlProps extends ViewProps {
+  /** Render the consumer's child element in place of the default checkbox glyph. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the control's own styles. */
+  className?: string;
+  /** The element to render when `asChild` is set. Otherwise not rendered. */
+  children?: ReactNode;
+}
+
+const SelectItemControl = ({
+  asChild,
+  className,
+  style,
+  children,
+  ...props
+}: SelectItemControlProps) => {
+  const { checked } = useSelectItemContext();
+  const fieldState = checked ? 'checked' : 'idle';
+
+  const hiddenProps = {
+    className: cn(menuItemControlVariants(), 'pointer-events-none', className),
+    style,
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: 'no-hide-descendants' as const,
+    'aria-hidden': true,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({ slot: 'select-item-control', checked })),
+  };
+
+  if (asChild) {
+    return <Slot {...hiddenProps}>{children}</Slot>;
+  }
+
+  return (
+    <View {...hiddenProps}>
+      <View className={checkboxIndicatorVariants()} {...dataAttributes({ checked, fieldState })}>
+        {checked ? (
+          <Icon
+            as={Check}
+            className={checkboxIconVariants()}
+            accessibilityElementsHidden
+            aria-hidden
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+SelectItemControl.displayName = 'Select.ItemControl';
+
+const hasItemControl = (children: ReactNode): boolean =>
+  Children.toArray(children).some(
+    (child) => isValidElement(child) && child.type === SelectItemControl,
+  );
+
 // =============================================================================
 // STYLED ITEM — composes Menu item visuals (option semantics stay on primitive)
 // =============================================================================
@@ -284,6 +654,7 @@ export interface SelectItemProps extends ISelectItemProps {
   /**
    * Replaces the default selected-item checkmark. The replacement is rendered
    * only while the item is selected. Pass `null` to suppress the indicator.
+   * The default checkmark is omitted when the item contains a `Select.ItemControl`.
    */
   indicator?: ReactNode;
   className?: string;
@@ -293,17 +664,20 @@ export interface SelectItemProps extends ISelectItemProps {
 const SelectItem = forwardRef<View, SelectItemProps>(
   ({ asChild, indicator, className, children, style, value: itemValue, ...props }, ref) => {
     const { size } = useSelectStyleContext();
-    const { value: selectedValue } = useSelectContext();
-    const checked = selectedValue === itemValue;
+    const { isSelected } = useSelectContext();
+    const checked = isSelected(itemValue);
 
     const computedClassName = cn(
       menuItemVariants(),
+      selectItemVariants(),
       size === 'small' ? 'px-2.5 py-1.5' : undefined,
       className,
     );
     const selectedIndicator =
       indicator === undefined ? (
-        <Menu.ItemIndicator isChecked={checked} />
+        hasItemControl(children) ? null : (
+          <Menu.ItemIndicator isChecked={checked} />
+        )
       ) : checked ? (
         indicator
       ) : null;
@@ -385,8 +759,12 @@ type SelectCompoundComponent = typeof SelectRoot & {
   Value: typeof SelectValue;
   Icon: typeof SelectIcon;
   Content: typeof SelectContent;
+  BottomSheet: typeof SelectBottomSheet;
+  Search: typeof SelectSearch;
+  Empty: typeof SelectEmpty;
   Item: typeof SelectItem;
   ItemLabel: typeof SelectItemLabel;
+  ItemControl: typeof SelectItemControl;
 };
 
 export const Select = Object.assign(SelectRoot, {
@@ -394,6 +772,10 @@ export const Select = Object.assign(SelectRoot, {
   Value: SelectValue,
   Icon: SelectIcon,
   Content: SelectContent,
+  BottomSheet: SelectBottomSheet,
+  Search: SelectSearch,
+  Empty: SelectEmpty,
   Item: SelectItem,
   ItemLabel: SelectItemLabel,
+  ItemControl: SelectItemControl,
 }) as SelectCompoundComponent;

package/src/components/Select/styles.ts

@@ -119,4 +119,40 @@ export const selectIconVariants = cva(
   },
 );
 
+// ── Item ────────────────────────────────────────────────────
+
+// Web keyboard navigation keeps DOM focus on the popup or the search input (virtual focus), so the
+// highlighted option is painted from `data-highlighted` instead of a focus ring.
+export const selectItemVariants = cva(['web:data-[highlighted=true]:bg-surface-action-tint-hover']);
+
+// ── Search ──────────────────────────────────────────────────
+
+export const selectSearchVariants = cva(['mb-1']);
+
+export const selectSearchListboxVariants = cva([
+  'rounded-none border-0 bg-transparent p-0 shadow-none',
+]);
+
+// ── Bottom sheet (native) ───────────────────────────────────
+
+export const selectBottomSheetVariants = cva(['flex-1 px-3']);
+
+export const selectBottomSheetListboxVariants = cva(['py-1']);
+
+// ── Empty ───────────────────────────────────────────────────
+
+export const selectEmptyVariants = cva(['px-3 py-2']);
+
+export const selectEmptyTextVariants = cva(['text-start text-content-secondary'], {
+  variants: {
+    size: {
+      default: 'text-[0.875rem]',
+      small: 'text-[0.75rem]',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
 export type SelectVariantProps = VariantProps<typeof selectTriggerVariants>;

package/src/components/index.ts

@@ -34,6 +34,8 @@ export * from './Field';
 export * from './Form';
 export * from './FullScreenDialog';
 export * from './Image';
+export * from './Insight';
+export * from './InsightStack';
 export * from './InsuranceDisclosure';
 export * from './Input';
 export * from './OtpInput';