@coinbase/cds-mobile 8.25.0 → 8.26.0

package/esm/alpha/select/DefaultSelectControl.js

@@ -13,9 +13,11 @@ import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { Text } from '../../typography/Text';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isSelectOptionGroup } from './Select';
+
 // The height is smaller for the inside label variant since the label takes
 // up space above the input.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LABEL_VARIANT_INSIDE_HEIGHT = 24;
 const COMPACT_HEIGHT = 40;
 const DEFAULT_HEIGHT = 56;
@@ -56,6 +58,42 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
   const shouldShowCompactLabel = compact && label && !isMultiSelect;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
 
+  // Map of options to their values
+  // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
+  const optionsMap = useMemo(() => {
+    const map = new Map();
+    const isDev = process.env.NODE_ENV !== 'production';
+    options.forEach((option, optionIndex) => {
+      if (isSelectOptionGroup(option)) {
+        option.options.forEach((groupOption, groupOptionIndex) => {
+          if (groupOption.value !== null) {
+            const optionValue = groupOption.value;
+            // Only set if not already present (first wins)
+            if (!map.has(optionValue)) {
+              map.set(optionValue, groupOption);
+            } else if (isDev) {
+              console.warn("[Select] Duplicate option value detected: \"" + optionValue + "\". " + "The first occurrence will be used for display. " + ("Found duplicate in group \"" + option.label + "\" at index " + groupOptionIndex + ". ") + ("First occurrence was at option index " + optionIndex + "."));
+            }
+          }
+        });
+      } else {
+        const singleOption = option;
+        if (singleOption.value !== null) {
+          const optionValue = singleOption.value;
+          // Only set if not already present (first wins)
+          if (!map.has(optionValue)) {
+            map.set(optionValue, singleOption);
+          } else if (isDev) {
+            var _ref2, _existingOption$label;
+            const existingOption = map.get(optionValue);
+            console.warn("[Select] Duplicate option value detected: \"" + optionValue + "\". " + "The first occurrence will be used for display. " + ("Found duplicate at option index " + optionIndex + ". ") + ("First occurrence label: \"" + ((_ref2 = (_existingOption$label = existingOption == null ? void 0 : existingOption.label) != null ? _existingOption$label : existingOption == null ? void 0 : existingOption.value) != null ? _ref2 : 'unknown') + "\"."));
+          }
+        }
+      }
+    });
+    return map;
+  }, [options]);
+
   // Prop value doesn't have default value because it affects the color of the
   // animated caret
   const focusedVariant = useInputVariant(!!open, variant != null ? variant : 'foregroundMuted');
@@ -83,15 +121,15 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     })
   }) : label, [disabled, label, labelVariant, setOpen, shouldShowCompactLabel, styles == null ? void 0 : styles.controlLabelNode]);
   const valueNode = useMemo(() => {
-    var _ref4, _ref5, _option$label2;
+    var _ref5, _ref6, _option$label2;
     if (hasValue && isMultiSelect) {
       const valuesToShow = value.length <= maxSelectedOptionsToShow ? value : value.slice(0, maxSelectedOptionsToShow);
-      const optionsToShow = valuesToShow.map(value => options.find(option => option.value === value)).filter(Boolean);
+      const optionsToShow = valuesToShow.map(value => optionsMap.get(value)).filter(option => option !== undefined);
       return /*#__PURE__*/_jsxs(HStack, {
         flexWrap: "wrap",
         gap: 1,
         children: [optionsToShow.map(option => {
-          var _option$value, _ref2, _ref3, _option$label;
+          var _option$value, _ref3, _ref4, _option$label;
           const accessibilityLabel = typeof option.label === 'string' ? option.label : typeof option.description === 'string' ? option.description : (_option$value = option.value) != null ? _option$value : '';
           return /*#__PURE__*/_jsx(InputChip, {
             compact: true,
@@ -104,7 +142,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
               event == null || event.stopPropagation();
               onChange == null || onChange(option.value);
             },
-            children: (_ref2 = (_ref3 = (_option$label = option.label) != null ? _option$label : option.description) != null ? _ref3 : option.value) != null ? _ref2 : ''
+            children: (_ref3 = (_ref4 = (_option$label = option.label) != null ? _option$label : option.description) != null ? _ref4 : option.value) != null ? _ref3 : ''
           }, option.value);
         }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(InputChip, {
           compact: true,
@@ -115,8 +153,8 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         })]
       });
     }
-    const option = options.find(option => option.value === value);
-    const label = (_ref4 = (_ref5 = (_option$label2 = option == null ? void 0 : option.label) != null ? _option$label2 : option == null ? void 0 : option.description) != null ? _ref5 : option == null ? void 0 : option.value) != null ? _ref4 : placeholder;
+    const option = !isMultiSelect ? optionsMap.get(value) : undefined;
+    const label = (_ref5 = (_ref6 = (_option$label2 = option == null ? void 0 : option.label) != null ? _option$label2 : option == null ? void 0 : option.description) != null ? _ref6 : option == null ? void 0 : option.value) != null ? _ref5 : placeholder;
     const content = hasValue ? label : placeholder;
     return typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
       color: hasValue ? 'fg' : 'fgMuted',
@@ -125,7 +163,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       textAlign: shouldShowCompactLabel ? 'right' : 'left',
       children: content
     }) : content;
-  }, [hasValue, isMultiSelect, options, placeholder, shouldShowCompactLabel, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, onChange]);
+  }, [hasValue, isMultiSelect, optionsMap, placeholder, shouldShowCompactLabel, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, onChange]);
   const inputNode = useMemo(() => /*#__PURE__*/_jsx(TouchableOpacity, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -1,5 +1,5 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "accessibilityRoles"],
-  _excluded2 = ["Component", "media", "accessory", "end"];
+const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityRoles"],
+  _excluded2 = ["Component", "media", "accessory", "end", "disabled"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useCallback, useMemo } from 'react';
@@ -12,7 +12,8 @@ import { Tray } from '../../overlays/tray/Tray';
 import { DefaultSelectAllOption } from './DefaultSelectAllOption';
 import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdownContents';
 import { DefaultSelectOption } from './DefaultSelectOption';
-import { defaultAccessibilityRoles } from './Select';
+import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
+import { defaultAccessibilityRoles, isSelectOptionGroup } from './Select';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -37,6 +38,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       SelectOptionComponent = DefaultSelectOption,
       SelectAllOptionComponent = DefaultSelectAllOption,
       SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
+      SelectOptionGroupComponent = DefaultSelectOptionGroup,
       accessibilityRoles = defaultAccessibilityRoles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -48,20 +50,65 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
     optionDescription: styles == null ? void 0 : styles.optionDescription,
     selectAllDivider: styles == null ? void 0 : styles.selectAllDivider
   }), [styles == null ? void 0 : styles.optionCell, styles == null ? void 0 : styles.optionContent, styles == null ? void 0 : styles.optionLabel, styles == null ? void 0 : styles.optionDescription, styles == null ? void 0 : styles.selectAllDivider]);
+  const optionGroupStyles = useMemo(() => ({
+    optionGroup: styles == null ? void 0 : styles.optionGroup,
+    option: styles == null ? void 0 : styles.option,
+    optionBlendStyles: styles == null ? void 0 : styles.optionBlendStyles,
+    optionCell: styles == null ? void 0 : styles.optionCell,
+    optionContent: styles == null ? void 0 : styles.optionContent,
+    optionLabel: styles == null ? void 0 : styles.optionLabel,
+    optionDescription: styles == null ? void 0 : styles.optionDescription,
+    selectAllDivider: styles == null ? void 0 : styles.selectAllDivider
+  }), [styles == null ? void 0 : styles.optionGroup, styles == null ? void 0 : styles.option, styles == null ? void 0 : styles.optionBlendStyles, styles == null ? void 0 : styles.optionCell, styles == null ? void 0 : styles.optionContent, styles == null ? void 0 : styles.optionLabel, styles == null ? void 0 : styles.optionDescription, styles == null ? void 0 : styles.selectAllDivider]);
   const emptyDropdownContentsStyles = useMemo(() => ({
     emptyContentsContainer: styles == null ? void 0 : styles.emptyContentsContainer,
     emptyContentsText: styles == null ? void 0 : styles.emptyContentsText
   }), [styles == null ? void 0 : styles.emptyContentsContainer, styles == null ? void 0 : styles.emptyContentsText]);
+
+  // Flatten options for Select All logic, excluding disabled options and options from disabled groups
+  const flatOptionsForSelectAll = useMemo(() => {
+    if (disabled) return [];
+    const result = [];
+    options.forEach(option => {
+      if (isSelectOptionGroup(option)) {
+        // It's a group, add its enabled options if the group itself is not disabled
+        if (!option.disabled) {
+          option.options.forEach(groupOption => {
+            if (!groupOption.disabled) {
+              result.push(groupOption);
+            }
+          });
+        }
+      } else {
+        // It's a single option, add if not disabled
+        if (!option.disabled) {
+          result.push(option);
+        }
+      }
+    });
+    return result;
+  }, [options, disabled]);
   const isMultiSelect = type === 'multi';
   const isSomeOptionsSelected = isMultiSelect ? value.length > 0 : false;
-  const isAllOptionsSelected = isMultiSelect ? value.length === options.filter(o => o.value !== null).length : false;
+  // Only count non-disabled options when determining if all are selected
+  const enabledOptionsCount = flatOptionsForSelectAll.filter(o => o.value !== null).length;
+  const isAllOptionsSelected = isMultiSelect ? enabledOptionsCount > 0 && value.length === enabledOptionsCount : false;
   const toggleSelectAll = useCallback(() => {
-    if (isAllOptionsSelected) onChange(null);else onChange(options.map(o => o.value).filter(o => o !== null && !(value != null && value.includes(o))));
-  }, [isAllOptionsSelected, onChange, options, value]);
+    if (isAllOptionsSelected) onChange(null);else onChange(flatOptionsForSelectAll.map(_ref2 => {
+      let {
+        value
+      } = _ref2;
+      return value;
+    }).filter(optionValue => optionValue !== null && !(value != null && value.includes(optionValue))));
+  }, [isAllOptionsSelected, onChange, flatOptionsForSelectAll, value]);
   const handleClearAll = useCallback(event => {
     event.stopPropagation();
     onChange(null);
   }, [onChange]);
+  const handleOptionPress = useCallback(newValue => {
+    onChange(newValue);
+    if (!isMultiSelect) setOpen(false);
+  }, [onChange, isMultiSelect, setOpen]);
   const indeterminate = !isAllOptionsSelected && isSomeOptionsSelected ? true : false;
   const SelectAllOption = useMemo(() => /*#__PURE__*/_jsx(SelectAllOptionComponent, {
     accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
@@ -83,10 +130,11 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       children: clearAllLabel
     }),
     indeterminate: indeterminate,
-    label: selectAllLabel + " (" + options.filter(o => o.value !== null).length + ")",
+    label: selectAllLabel + " (" + flatOptionsForSelectAll.filter(o => o.value !== null).length + ")",
     media: media != null ? media : /*#__PURE__*/_jsx(Checkbox, {
       checked: isAllOptionsSelected,
       indeterminate: indeterminate,
+      onPress: toggleSelectAll,
       tabIndex: -1
     }),
     onPress: toggleSelectAll,
@@ -95,7 +143,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
     styles: optionStyles,
     type: type,
     value: 'select-all'
-  }, "select-all"), [SelectAllOptionComponent, accessibilityRoles == null ? void 0 : accessibilityRoles.option, accessory, styles == null ? void 0 : styles.optionBlendStyles, styles == null ? void 0 : styles.option, compact, end, handleClearAll, clearAllLabel, disabled, indeterminate, selectAllLabel, options, media, isAllOptionsSelected, toggleSelectAll, optionStyles, type]);
+  }, "select-all"), [SelectAllOptionComponent, accessibilityRoles == null ? void 0 : accessibilityRoles.option, accessory, styles == null ? void 0 : styles.optionBlendStyles, styles == null ? void 0 : styles.option, compact, disabled, end, handleClearAll, clearAllLabel, indeterminate, selectAllLabel, flatOptionsForSelectAll, media, isAllOptionsSelected, toggleSelectAll, optionStyles, type]);
   if (!open) return null;
   return /*#__PURE__*/_jsx(Tray, {
     ref: ref,
@@ -109,51 +157,72 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       children: /*#__PURE__*/_jsx(ScrollView, {
         showsVerticalScrollIndicator: true,
         children: /*#__PURE__*/_jsxs(VStack, {
-          children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(_ref2 => {
-            var _ref3;
-            let {
-                Component,
+          children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(optionOrGroup => {
+            var _optionProps$value, _optionProps$value2, _ref3;
+            // Check if it's a group (has 'options' property and 'label')
+            if (isSelectOptionGroup(optionOrGroup)) {
+              var _group$disabled;
+              const group = optionOrGroup;
+              return /*#__PURE__*/_jsx(SelectOptionGroupComponent, {
+                SelectOptionComponent: SelectOptionComponent,
+                accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
+                accessory: accessory,
+                compact: compact,
+                disabled: (_group$disabled = group.disabled) != null ? _group$disabled : disabled,
+                end: end,
+                label: group.label,
+                media: media,
+                onChange: onChange,
+                options: group.options,
+                setOpen: setOpen,
+                styles: optionGroupStyles,
+                type: type,
+                value: value
+              }, "group-" + group.label);
+            }
+            const option = optionOrGroup;
+            const {
+                Component: optionComponent,
                 media: optionMedia,
                 accessory: optionAccessory,
-                end: optionEnd
-              } = _ref2,
-              option = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-            const RenderedSelectOption = Component != null ? Component : SelectOptionComponent;
-            const selected = option.value !== null && isMultiSelect ? value.includes(option.value) : value === option.value;
+                end: optionEnd,
+                disabled: optionDisabled
+              } = option,
+              optionProps = _objectWithoutPropertiesLoose(option, _excluded2);
+            const RenderedComponent = optionComponent != null ? optionComponent : SelectOptionComponent;
+            const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
             /** onPress handlers are passed so that when the media is pressed,
              * the onChange handler is called. Since the <RenderedSelectOption>
              * has an accessibilityRole, the inner media won't be detected by a screen reader
              * so this behavior matches web
              * */
             const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
+              "aria-hidden": true,
               checked: selected,
-              onPress: () => {
-                onChange(option.value);
-              }
+              onChange: () => handleOptionPress(optionProps.value),
+              tabIndex: -1,
+              value: (_optionProps$value = optionProps.value) == null ? void 0 : _optionProps$value.toString()
             }) : /*#__PURE__*/_jsx(Radio, {
+              "aria-hidden": true,
               checked: selected,
-              onPress: () => {
-                onChange(option.value);
-                setOpen(false);
-              }
+              onChange: () => handleOptionPress(optionProps.value),
+              tabIndex: -1,
+              value: (_optionProps$value2 = optionProps.value) == null ? void 0 : _optionProps$value2.toString()
             });
-            return /*#__PURE__*/_jsx(RenderedSelectOption, _extends({
+            return /*#__PURE__*/_jsx(RenderedComponent, _extends({
               accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
               accessory: optionAccessory != null ? optionAccessory : accessory,
               blendStyles: styles == null ? void 0 : styles.optionBlendStyles,
               compact: compact,
-              disabled: option.disabled || disabled,
+              disabled: optionDisabled || disabled,
               end: optionEnd != null ? optionEnd : end,
               media: (_ref3 = optionMedia != null ? optionMedia : media) != null ? _ref3 : defaultMedia,
-              onPress: newValue => {
-                onChange(newValue);
-                if (!isMultiSelect) setOpen(false);
-              },
+              onPress: handleOptionPress,
               selected: selected,
               style: styles == null ? void 0 : styles.option,
               styles: optionStyles,
               type: type
-            }, option), option.value);
+            }, optionProps), optionProps.value);
           }) : /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
             label: emptyOptionsLabel,
             styles: emptyDropdownContentsStyles

package/esm/alpha/select/DefaultSelectOption.js

@@ -21,7 +21,7 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
       styles,
       type,
       accessibilityRole,
-      background = type === 'single' && selected && value !== null ? 'bgAlternate' : 'bg'
+      background = 'transparent'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const labelNode = useMemo(() => typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {

package/esm/alpha/select/DefaultSelectOptionGroup.js

@@ -0,0 +1,90 @@
+const _excluded = ["Component", "media", "accessory", "end", "disabled"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useCallback, useMemo } from 'react';
+import { Checkbox } from '../../controls/Checkbox';
+import { Radio } from '../../controls/Radio';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultSelectOptionGroupComponent = /*#__PURE__*/memo(_ref => {
+  let {
+    label,
+    options,
+    SelectOptionComponent,
+    value,
+    onChange,
+    setOpen,
+    type,
+    accessibilityRole,
+    accessory,
+    media,
+    end,
+    disabled,
+    compact,
+    styles
+  } = _ref;
+  const optionStyles = useMemo(() => ({
+    optionCell: styles == null ? void 0 : styles.optionCell,
+    optionContent: styles == null ? void 0 : styles.optionContent,
+    optionLabel: styles == null ? void 0 : styles.optionLabel,
+    optionDescription: styles == null ? void 0 : styles.optionDescription,
+    selectAllDivider: styles == null ? void 0 : styles.selectAllDivider
+  }), [styles == null ? void 0 : styles.optionCell, styles == null ? void 0 : styles.optionContent, styles == null ? void 0 : styles.optionLabel, styles == null ? void 0 : styles.optionDescription, styles == null ? void 0 : styles.selectAllDivider]);
+  const isMultiSelect = type === 'multi';
+  const handleOptionPress = useCallback(newValue => {
+    onChange(newValue);
+    if (!isMultiSelect) setOpen(false);
+  }, [onChange, isMultiSelect, setOpen]);
+  if (options.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(VStack, {
+    role: "group",
+    style: styles == null ? void 0 : styles.optionGroup,
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: "fgMuted",
+      font: "caption",
+      paddingX: 2,
+      paddingY: 2,
+      children: label
+    }), options.map(option => {
+      var _ref2;
+      const {
+          Component: optionComponent,
+          media: optionMedia,
+          accessory: optionAccessory,
+          end: optionEnd,
+          disabled: optionDisabled
+        } = option,
+        optionProps = _objectWithoutPropertiesLoose(option, _excluded);
+      const RenderedComponent = optionComponent != null ? optionComponent : SelectOptionComponent;
+      const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
+      const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
+        checked: selected,
+        onChange: () => handleOptionPress(optionProps.value),
+        tabIndex: -1
+      }) : /*#__PURE__*/_jsx(Radio, {
+        checked: selected,
+        onChange: () => handleOptionPress(optionProps.value),
+        tabIndex: -1
+      });
+      return /*#__PURE__*/_jsx(RenderedComponent, _extends({
+        accessibilityRole: accessibilityRole,
+        accessory: optionAccessory != null ? optionAccessory : accessory,
+        blendStyles: styles == null ? void 0 : styles.optionBlendStyles,
+        compact: compact,
+        disabled: optionDisabled || disabled,
+        end: optionEnd != null ? optionEnd : end,
+        media: (_ref2 = optionMedia != null ? optionMedia : media) != null ? _ref2 : defaultMedia,
+        onPress: handleOptionPress,
+        selected: selected,
+        style: styles == null ? void 0 : styles.option,
+        styles: optionStyles,
+        type: type
+      }, optionProps), optionProps.value);
+    })]
+  });
+});
+DefaultSelectOptionGroupComponent.displayName = 'DefaultSelectOptionGroup';
+export const DefaultSelectOptionGroup = DefaultSelectOptionGroupComponent;

package/esm/alpha/select/Select.js

@@ -1,4 +1,4 @@
-const _excluded = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "disableClickOutsideClose", "placeholder", "helperText", "compact", "label", "labelVariant", "accessibilityLabel", "accessibilityHint", "accessibilityRoles", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "style", "styles", "testID"];
+const _excluded = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "disableClickOutsideClose", "placeholder", "helperText", "compact", "label", "labelVariant", "accessibilityLabel", "accessibilityHint", "accessibilityRoles", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "style", "styles", "testID"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
@@ -7,35 +7,16 @@ import { DefaultSelectControl } from './DefaultSelectControl';
 import { DefaultSelectDropdown } from './DefaultSelectDropdown';
 import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdownContents';
 import { DefaultSelectOption } from './DefaultSelectOption';
+import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
+import { isSelectOptionGroup } from './types';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const defaultAccessibilityRoles = {
   option: 'menuitem'
 };
 
-/**
- * Configuration for a single option in the Select component
- */
-
-/**
- * Props for individual option components within the Select dropdown
- */
-
-/**
- * Custom UI to render for an option in the Select component options array
- */
-
-/**
- * Props for the select control component (the clickable input that opens the dropdown)
- */
-
-/**
- * Props for the dropdown component that contains the list of options
- */
-
-/**
- * Props for the Select component
- */
+// Re-export all types for backward compatibility
 
+export { isSelectOptionGroup };
 const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -72,6 +53,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       SelectDropdownComponent = DefaultSelectDropdown,
       SelectControlComponent = DefaultSelectControl,
       SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
+      SelectOptionGroupComponent = DefaultSelectOptionGroup,
       style,
       styles,
       testID
@@ -102,8 +84,9 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     optionDescription: styles == null ? void 0 : styles.optionDescription,
     selectAllDivider: styles == null ? void 0 : styles.selectAllDivider,
     emptyContentsContainer: styles == null ? void 0 : styles.emptyContentsContainer,
-    emptyContentsText: styles == null ? void 0 : styles.emptyContentsText
-  }), [styles == null ? void 0 : styles.dropdown, styles == null ? void 0 : styles.option, styles == null ? void 0 : styles.optionBlendStyles, styles == null ? void 0 : styles.optionCell, styles == null ? void 0 : styles.optionContent, styles == null ? void 0 : styles.optionLabel, styles == null ? void 0 : styles.optionDescription, styles == null ? void 0 : styles.selectAllDivider, styles == null ? void 0 : styles.emptyContentsContainer, styles == null ? void 0 : styles.emptyContentsText]);
+    emptyContentsText: styles == null ? void 0 : styles.emptyContentsText,
+    optionGroup: styles == null ? void 0 : styles.optionGroup
+  }), [styles == null ? void 0 : styles.dropdown, styles == null ? void 0 : styles.option, styles == null ? void 0 : styles.optionBlendStyles, styles == null ? void 0 : styles.optionCell, styles == null ? void 0 : styles.optionContent, styles == null ? void 0 : styles.optionLabel, styles == null ? void 0 : styles.optionDescription, styles == null ? void 0 : styles.selectAllDivider, styles == null ? void 0 : styles.emptyContentsContainer, styles == null ? void 0 : styles.emptyContentsText, styles == null ? void 0 : styles.optionGroup]);
   const containerRef = useRef(null);
   useImperativeHandle(ref, () => Object.assign(containerRef.current, {
     open,
@@ -145,6 +128,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       SelectAllOptionComponent: SelectAllOptionComponent,
       SelectEmptyDropdownContentsComponent: SelectEmptyDropdownContentsComponent,
       SelectOptionComponent: SelectOptionComponent,
+      SelectOptionGroupComponent: SelectOptionGroupComponent,
       accessibilityRoles: accessibilityRoles,
       accessory: accessory,
       clearAllLabel: clearAllLabel,

package/esm/alpha/select/index.js

@@ -3,4 +3,6 @@ export * from './DefaultSelectControl';
 export * from './DefaultSelectDropdown';
 export * from './DefaultSelectEmptyDropdownContents';
 export * from './DefaultSelectOption';
-export * from './Select';
+export * from './DefaultSelectOptionGroup';
+export * from './Select';
+export * from './types';

package/esm/alpha/select/types.js

@@ -0,0 +1,50 @@
+/**
+ * Configuration for a single option in the Select component
+ */
+
+/**
+ * Props for individual option components within the Select dropdown
+ */
+
+/**
+ * Custom UI to render for an option in the Select component options array
+ */
+
+/**
+ * Configuration for a group of options in the Select component
+ */
+
+/**
+ * Props for the option group component in the Select dropdown
+ */
+
+/**
+ * Custom UI to render for an option group in the Select component options array
+ */
+
+/**
+ * Array of options for the Select component. Can be individual options or groups with `label` and `options`
+ */
+
+/**
+ * Type guard to check if an option is a group
+ */
+export function isSelectOptionGroup(option) {
+  return 'options' in option && Array.isArray(option.options) && 'label' in option;
+}
+
+/**
+ * Props for the select control component (the clickable input that opens the dropdown)
+ */
+
+/**
+ * Props for the dropdown component that contains the list of options
+ */
+
+/**
+ * Props for the Select component
+ */
+
+/**
+ * Type for the Select component function signature
+ */

package/esm/alpha/select-chip/SelectChip.js

@@ -0,0 +1,31 @@
+const _excluded = ["invertColorScheme", "numberOfLines"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback } from 'react';
+import { Select } from '../select/Select';
+import { SelectChipControl } from './SelectChipControl';
+
+/**
+ * Chip-styled Select control built on top of the Alpha Select.
+ * Supports both single and multi selection via Select's `type` prop.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      invertColorScheme,
+      numberOfLines
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const SelectChipControlComponent = useCallback(props => {
+    return /*#__PURE__*/_jsx(SelectChipControl, _extends({
+      invertColorScheme: invertColorScheme,
+      numberOfLines: numberOfLines
+    }, props));
+  }, [invertColorScheme, numberOfLines]);
+  return /*#__PURE__*/_jsx(Select, _extends({
+    ref: ref,
+    SelectControlComponent: SelectChipControlComponent
+  }, props));
+}));
+SelectChipComponent.displayName = 'SelectChip';
+export const SelectChip = SelectChipComponent;