@coinbase/cds-web 8.25.1 → 8.26.0

package/dts/alpha/select-chip/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SelectChip';
+export * from './SelectChipControl';
+//# sourceMappingURL=index.d.ts.map

package/dts/alpha/select-chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/dts/chips/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,eAAO,MAAM,IAAI,sMA4HhB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,eAAO,MAAM,IAAI,sMAgIhB,CAAC"}

package/dts/chips/SelectChip.d.ts

@@ -3,6 +3,10 @@ import type { SelectBaseProps } from '../controls/Select';
 import type { DropdownProps } from '../dropdown';
 import type { ChipProps } from './ChipProps';
 export declare const SELECT_CHIP_DEFAULT_TEST_ID = 'select-chip';
+/**
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
+ */
 export type SelectChipProps = {
   /** Indicates that the control is being used to manipulate data elsewhere */
   active?: boolean;
@@ -13,6 +17,10 @@ export type SelectChipProps = {
 } & Omit<ChipProps, 'inverted' | 'children' | 'onBlur' | 'noScaleOnPress' | 'content'> &
   Pick<SelectBaseProps, 'onChange' | 'valueLabel' | 'placeholder' | 'value'> &
   Omit<DropdownProps, 'onChange' | 'children'>;
+/**
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
+ */
 export declare const SelectChip: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<Omit<SelectChipProps, 'ref'> & React.RefAttributes<unknown>>
 >;

package/dts/chips/SelectChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../src/chips/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,2BAA2B,gBAAgB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,GAAG,SAAS,CAAC,GACpF,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,GAC1E,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAE/C,eAAO,MAAM,UAAU,yHAoFtB,CAAC"}
+{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../src/chips/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,eAAO,MAAM,2BAA2B,gBAAgB,CAAC;AAEzD;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,GAAG,SAAS,CAAC,GACpF,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,OAAO,CAAC,GAC1E,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,UAAU,yHAoFtB,CAAC"}

package/dts/controls/SearchInput.d.ts

@@ -86,8 +86,8 @@ export declare const SearchInput: React.MemoExoticComponent<
       | 'accessibilityLabelledBy'
       | 'accessibilityHint'
       | 'enableColorSurge'
-      | 'testIDMap'
       | 'helperTextErrorIconAccessibilityLabel'
+      | 'testIDMap'
     > & {
       /**
        * Callback is fired when a user hits enter on the keyboard. Can obtain the query

package/esm/alpha/select/DefaultSelectControl.js

@@ -17,9 +17,11 @@ import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { Pressable } from '../../system/Pressable';
 import { Text } from '../../typography/Text';
 import { findClosestNonDisabledNodeIndex } from '../../utils/findClosestNonDisabledNodeIndex';
-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 = 32;
 const COMPACT_HEIGHT = 40;
 const DEFAULT_HEIGHT = 56;
@@ -62,6 +64,42 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
   const shouldShowCompactLabel = compact && label;
   const isMultiSelect = type === 'multi';
   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 value = groupOption.value;
+            // Only set if not already present (first wins)
+            if (!map.has(value)) {
+              map.set(value, groupOption);
+            } else if (isDev) {
+              console.warn("[Select] Duplicate option value detected: \"".concat(value, "\". ") + "The first occurrence will be used for display. " + "Found duplicate in group \"".concat(option.label, "\" at index ").concat(groupOptionIndex, ". ") + "First occurrence was at option index ".concat(optionIndex, "."));
+            }
+          }
+        });
+      } else {
+        // It's a single option
+        const singleOption = option;
+        if (singleOption.value !== null) {
+          const value = singleOption.value;
+          if (!map.has(value)) {
+            map.set(value, singleOption);
+          } else if (isDev) {
+            var _ref2, _existingOption$label;
+            const existingOption = map.get(value);
+            console.warn("[Select] Duplicate option value detected: \"".concat(value, "\". ") + "The first occurrence will be used for display. " + "Found duplicate at option index ".concat(optionIndex, ". ") + "First occurrence label: \"".concat((_ref2 = (_existingOption$label = existingOption === null || existingOption === void 0 ? void 0 : existingOption.label) !== null && _existingOption$label !== void 0 ? _existingOption$label : existingOption === null || existingOption === void 0 ? void 0 : existingOption.value) !== null && _ref2 !== void 0 ? _ref2 : 'unknown', "\"."));
+          }
+        }
+      }
+    });
+    return map;
+  }, [options]);
   const controlPressableRef = useRef(null);
   const valueNodeContainerRef = useRef(null);
   const handleUnselectValue = useCallback((event, index) => {
@@ -110,15 +148,15 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     })
   }) : label, [label, labelVariant, disabled, setOpen, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? 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, index) => {
-          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 !== void 0 ? _option$value : '';
           return /*#__PURE__*/_jsx(InputChip, {
             compact: true,
@@ -129,7 +167,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
             invertColorScheme: false,
             maxWidth: 200,
             onClick: event => handleUnselectValue(event, index),
-            children: (_ref2 = (_ref3 = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.description) !== null && _ref3 !== void 0 ? _ref3 : option.value) !== null && _ref2 !== void 0 ? _ref2 : ''
+            children: (_ref3 = (_ref4 = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.description) !== null && _ref4 !== void 0 ? _ref4 : option.value) !== null && _ref3 !== void 0 ? _ref3 : ''
           }, option.value);
         }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(InputChip, {
           compact: true,
@@ -140,8 +178,8 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         })]
       });
     }
-    const option = options.find(option => option.value === value);
-    const label = (_ref4 = (_ref5 = (_option$label2 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option === null || option === void 0 ? void 0 : option.description) !== null && _ref5 !== void 0 ? _ref5 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref4 !== void 0 ? _ref4 : placeholder;
+    const option = !isMultiSelect ? optionsMap.get(value) : undefined;
+    const label = (_ref5 = (_ref6 = (_option$label2 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option === null || option === void 0 ? void 0 : option.description) !== null && _ref6 !== void 0 ? _ref6 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref5 !== void 0 ? _ref5 : placeholder;
     const content = hasValue ? label : placeholder;
     return typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
       as: "p",
@@ -151,7 +189,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       overflow: "truncate",
       children: content
     }) : content;
-  }, [hasValue, isMultiSelect, options, placeholder, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, handleUnselectValue]);
+  }, [hasValue, isMultiSelect, optionsMap, placeholder, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, handleUnselectValue]);
   const inputNode = useMemo(() =>
   /*#__PURE__*/
   // We don't offer control over setting the role since this must always be a button

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -1,5 +1,5 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "className", "classNames", "compact", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "accessibilityLabel", "accessibilityRoles"],
-  _excluded2 = ["Component", "media", "accessory", "end"];
+const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "className", "classNames", "compact", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityLabel", "accessibilityRoles"],
+  _excluded2 = ["Component", "media", "accessory", "end", "disabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -19,7 +19,8 @@ import { FocusTrap } from '../../overlays/FocusTrap';
 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 initialStyle = {
   opacity: 0,
@@ -55,6 +56,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       SelectOptionComponent = DefaultSelectOption,
       SelectAllOptionComponent = DefaultSelectAllOption,
       SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
+      SelectOptionGroupComponent = DefaultSelectOptionGroup,
       accessibilityLabel = 'Select dropdown',
       accessibilityRoles = defaultAccessibilityRoles
     } = _ref,
@@ -89,16 +91,71 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
     emptyContentsContainer: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer,
     emptyContentsText: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText
   }), [classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText]);
+  const optionGroupStyles = useMemo(() => ({
+    optionGroup: styles === null || styles === void 0 ? void 0 : styles.optionGroup,
+    option: styles === null || styles === void 0 ? void 0 : styles.option,
+    optionBlendStyles: styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles,
+    optionCell: styles === null || styles === void 0 ? void 0 : styles.optionCell,
+    optionContent: styles === null || styles === void 0 ? void 0 : styles.optionContent,
+    optionLabel: styles === null || styles === void 0 ? void 0 : styles.optionLabel,
+    optionDescription: styles === null || styles === void 0 ? void 0 : styles.optionDescription,
+    selectAllDivider: styles === null || styles === void 0 ? void 0 : styles.selectAllDivider
+  }), [styles === null || styles === void 0 ? void 0 : styles.optionGroup, styles === null || styles === void 0 ? void 0 : styles.option, styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles, styles === null || styles === void 0 ? void 0 : styles.optionCell, styles === null || styles === void 0 ? void 0 : styles.optionContent, styles === null || styles === void 0 ? void 0 : styles.optionLabel, styles === null || styles === void 0 ? void 0 : styles.optionDescription, styles === null || styles === void 0 ? void 0 : styles.selectAllDivider]);
+  const optionGroupClassNames = useMemo(() => ({
+    optionGroup: classNames === null || classNames === void 0 ? void 0 : classNames.optionGroup,
+    option: classNames === null || classNames === void 0 ? void 0 : classNames.option,
+    optionCell: classNames === null || classNames === void 0 ? void 0 : classNames.optionCell,
+    optionContent: classNames === null || classNames === void 0 ? void 0 : classNames.optionContent,
+    optionLabel: classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel,
+    optionDescription: classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription,
+    selectAllDivider: classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.optionGroup, classNames === null || classNames === void 0 ? void 0 : classNames.option, classNames === null || classNames === void 0 ? void 0 : classNames.optionCell, classNames === null || classNames === void 0 ? void 0 : classNames.optionContent, classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel, classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription, classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider]);
+
+  // Flatten options to handle nested groups for select all logic
+  // Only include non-disabled options (exclude options from disabled groups and individually disabled options)
+  const flatOptionsForSelectAll = useMemo(() => {
+    // If the entire dropdown is disabled, no options should be selectable
+    if (disabled) return [];
+    const result = [];
+    options.forEach(option => {
+      if (isSelectOptionGroup(option)) {
+        var _option$disabled;
+        // It's a group, check if the group is disabled
+        const isGroupDisabled = (_option$disabled = option.disabled) !== null && _option$disabled !== void 0 ? _option$disabled : false;
+        if (!isGroupDisabled) {
+          // Only add options from non-disabled groups, and filter out individually disabled options
+          result.push(...option.options.filter(groupOption => !groupOption.disabled));
+        }
+      } else {
+        // It's a single option, only 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 !== void 0 && 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 !== void 0 && value.includes(optionValue))));
+  }, [isAllOptionsSelected, onChange, flatOptionsForSelectAll, value]);
   const handleClearAll = useCallback(event => {
     event.stopPropagation();
     onChange(null);
   }, [onChange]);
+  const handleOptionClick = useCallback(newValue => {
+    onChange(newValue);
+    if (!isMultiSelect) setOpen(false);
+  }, [onChange, isMultiSelect, setOpen]);
   const handleEscPress = useCallback(() => setOpen(false), [setOpen]);
   useEffect(() => {
     if (!controlRef.current) return;
@@ -109,43 +166,8 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
     return () => resizeObserver.disconnect();
   }, [controlRef]);
   const indeterminate = !isAllOptionsSelected && isSomeOptionsSelected ? true : false;
-  const SelectAllOption = useMemo(() => /*#__PURE__*/_jsx(SelectAllOptionComponent, {
-    accessibilityRole: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option,
-    accessory: accessory,
-    blendStyles: styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles,
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.option,
-    classNames: optionClassNames,
-    compact: compact,
-    disabled: disabled,
-    end: end !== null && end !== void 0 ? end : /*#__PURE__*/_jsx(Button, {
-      compact: true,
-      transparent: true,
-      onClick: handleClearAll,
-      role: "option",
-      style: {
-        margin: 'var(--space-0_5)'
-      },
-      width: "fit-content",
-      children: clearAllLabel
-    }),
-    indeterminate: indeterminate,
-    label: "".concat(selectAllLabel, " (").concat(options.filter(o => o.value !== null).length, ")"),
-    media: media !== null && media !== void 0 ? media : /*#__PURE__*/_jsx(Checkbox, {
-      readOnly: true,
-      checked: isAllOptionsSelected,
-      iconStyle: {
-        opacity: 1
-      },
-      indeterminate: indeterminate,
-      tabIndex: -1
-    }),
-    onClick: toggleSelectAll,
-    selected: isAllOptionsSelected || isSomeOptionsSelected,
-    style: styles === null || styles === void 0 ? void 0 : styles.option,
-    styles: optionStyles,
-    type: type,
-    value: 'select-all'
-  }, "select-all"), [SelectAllOptionComponent, accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option, accessory, styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles, styles === null || styles === void 0 ? void 0 : styles.option, classNames === null || classNames === void 0 ? void 0 : classNames.option, optionClassNames, compact, disabled, end, handleClearAll, clearAllLabel, indeterminate, selectAllLabel, options, media, isAllOptionsSelected, toggleSelectAll, isSomeOptionsSelected, optionStyles, type]);
+  const shouldShowSelectAll = !hideSelectAll && isMultiSelect && options.length > 0;
+  const hasOptions = options.length > 0;
   return /*#__PURE__*/_jsx(AnimatePresence, {
     children: open && /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
       ref: ref,
@@ -174,17 +196,76 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
             flexDirection: "column",
             maxHeight: 252,
             overflow: "auto",
-            children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(_ref2 => {
+            children: [shouldShowSelectAll && /*#__PURE__*/_jsx(SelectAllOptionComponent, {
+              accessibilityRole: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option,
+              accessory: accessory,
+              className: classNames === null || classNames === void 0 ? void 0 : classNames.option,
+              classNames: optionClassNames,
+              compact: compact,
+              disabled: disabled,
+              end: end !== null && end !== void 0 ? end : /*#__PURE__*/_jsx(Button, {
+                compact: true,
+                transparent: true,
+                onClick: handleClearAll,
+                role: "option",
+                style: {
+                  margin: 'var(--space-0_5)'
+                },
+                width: "fit-content",
+                children: clearAllLabel
+              }),
+              indeterminate: indeterminate,
+              label: "".concat(selectAllLabel, " (").concat(flatOptionsForSelectAll.filter(o => o.value !== null).length, ")"),
+              media: media !== null && media !== void 0 ? media : /*#__PURE__*/_jsx(Checkbox, {
+                readOnly: true,
+                checked: isAllOptionsSelected,
+                iconStyle: {
+                  opacity: 1
+                },
+                indeterminate: indeterminate,
+                tabIndex: -1
+              }),
+              onClick: toggleSelectAll,
+              selected: isAllOptionsSelected || isSomeOptionsSelected,
+              style: styles === null || styles === void 0 ? void 0 : styles.option,
+              styles: optionStyles,
+              type: type,
+              value: 'select-all'
+            }, "select-all"), options.map(optionOrGroup => {
               var _ref3;
-              let {
-                  Component,
+              // 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 || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option,
+                  accessory: accessory,
+                  classNames: optionGroupClassNames,
+                  compact: compact,
+                  disabled: (_group$disabled = group.disabled) !== null && _group$disabled !== void 0 ? _group$disabled : disabled,
+                  end: end,
+                  label: group.label,
+                  media: media,
+                  onChange: onChange,
+                  options: group.options,
+                  setOpen: setOpen,
+                  styles: optionGroupStyles,
+                  type: type,
+                  value: value
+                }, "group-".concat(group.label));
+              }
+              const option = optionOrGroup;
+              const {
+                  Component: optionComponent,
                   media: optionMedia,
                   accessory: optionAccessory,
-                  end: optionEnd
-                } = _ref2,
-                option = _objectWithoutProperties(_ref2, _excluded2);
-              const RenderedSelectOption = Component !== null && Component !== void 0 ? Component : SelectOptionComponent;
-              const selected = option.value !== null && isMultiSelect ? value.includes(option.value) : value === option.value;
+                  end: optionEnd,
+                  disabled: optionDisabled
+                } = option,
+                optionProps = _objectWithoutProperties(option, _excluded2);
+              const RenderedComponent = optionComponent !== null && optionComponent !== void 0 ? optionComponent : SelectOptionComponent;
+              const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
               const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
                 "aria-hidden": true,
                 readOnly: true,
@@ -202,26 +283,22 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
                 },
                 tabIndex: -1
               });
-              return /*#__PURE__*/_jsx(RenderedSelectOption, _objectSpread({
+              return /*#__PURE__*/_jsx(RenderedComponent, _objectSpread({
                 accessibilityRole: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option,
                 accessory: optionAccessory !== null && optionAccessory !== void 0 ? optionAccessory : accessory,
-                blendStyles: styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles,
                 className: classNames === null || classNames === void 0 ? void 0 : classNames.option,
                 classNames: optionClassNames,
                 compact: compact,
-                disabled: option.disabled || disabled,
+                disabled: optionDisabled || disabled,
                 end: optionEnd !== null && optionEnd !== void 0 ? optionEnd : end,
                 media: (_ref3 = optionMedia !== null && optionMedia !== void 0 ? optionMedia : media) !== null && _ref3 !== void 0 ? _ref3 : defaultMedia,
-                onClick: newValue => {
-                  onChange(newValue);
-                  if (!isMultiSelect) setOpen(false);
-                },
+                onClick: handleOptionClick,
                 selected: selected,
                 style: styles === null || styles === void 0 ? void 0 : styles.option,
                 styles: optionStyles,
                 type: type
-              }, option), option.value);
-            }) : /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
+              }, optionProps), optionProps.value);
+            }), !hasOptions && /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
               classNames: emptyDropdownContentsClassNames,
               label: emptyOptionsLabel,
               styles: emptyDropdownContentsStyles

package/esm/alpha/select/DefaultSelectOptionGroup.js

@@ -0,0 +1,118 @@
+const _excluded = ["Component", "media", "accessory", "end", "disabled"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, useId, useMemo } from 'react';
+import { Checkbox } from '../../controls/Checkbox';
+import { Radio } from '../../controls/Radio';
+import { VStack } from '../../layout';
+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,
+    classNames
+  } = _ref;
+  const labelId = useId();
+  const optionStyles = useMemo(() => ({
+    optionCell: styles === null || styles === void 0 ? void 0 : styles.optionCell,
+    optionContent: styles === null || styles === void 0 ? void 0 : styles.optionContent,
+    optionLabel: styles === null || styles === void 0 ? void 0 : styles.optionLabel,
+    optionDescription: styles === null || styles === void 0 ? void 0 : styles.optionDescription,
+    selectAllDivider: styles === null || styles === void 0 ? void 0 : styles.selectAllDivider
+  }), [styles === null || styles === void 0 ? void 0 : styles.optionCell, styles === null || styles === void 0 ? void 0 : styles.optionContent, styles === null || styles === void 0 ? void 0 : styles.optionLabel, styles === null || styles === void 0 ? void 0 : styles.optionDescription, styles === null || styles === void 0 ? void 0 : styles.selectAllDivider]);
+  const optionClassNames = useMemo(() => ({
+    optionCell: classNames === null || classNames === void 0 ? void 0 : classNames.optionCell,
+    optionContent: classNames === null || classNames === void 0 ? void 0 : classNames.optionContent,
+    optionLabel: classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel,
+    optionDescription: classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription,
+    selectAllDivider: classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.optionCell, classNames === null || classNames === void 0 ? void 0 : classNames.optionContent, classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel, classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription, classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider]);
+  const isMultiSelect = type === 'multi';
+  const handleOptionClick = useCallback(newValue => {
+    onChange(newValue);
+    if (!isMultiSelect) setOpen(false);
+  }, [onChange, isMultiSelect, setOpen]);
+  if (options.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(VStack, {
+    "aria-disabled": disabled,
+    "aria-labelledby": labelId,
+    background: "bg",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.optionGroup,
+    role: "group",
+    style: styles === null || styles === void 0 ? void 0 : styles.optionGroup,
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: "fgMuted",
+      font: "caption",
+      id: labelId,
+      paddingX: 2,
+      paddingY: 2,
+      children: label
+    }), options.map(option => {
+      var _ref2;
+      const {
+          Component: optionComponent,
+          media: optionMedia,
+          accessory: optionAccessory,
+          end: optionEnd,
+          disabled: optionDisabled
+        } = option,
+        optionProps = _objectWithoutProperties(option, _excluded);
+      const RenderedComponent = optionComponent !== null && optionComponent !== void 0 ? optionComponent : SelectOptionComponent;
+      const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
+      const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
+        "aria-hidden": true,
+        readOnly: true,
+        checked: selected,
+        iconStyle: {
+          opacity: 1
+        },
+        tabIndex: -1
+      }) : /*#__PURE__*/_jsx(Radio, {
+        "aria-hidden": true,
+        readOnly: true,
+        checked: selected,
+        iconStyle: {
+          opacity: 1
+        },
+        tabIndex: -1
+      });
+      return /*#__PURE__*/_jsx(RenderedComponent, _objectSpread({
+        accessibilityRole: accessibilityRole,
+        accessory: optionAccessory !== null && optionAccessory !== void 0 ? optionAccessory : accessory,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.option,
+        classNames: optionClassNames,
+        compact: compact,
+        disabled: optionDisabled || disabled,
+        end: optionEnd !== null && optionEnd !== void 0 ? optionEnd : end,
+        media: (_ref2 = optionMedia !== null && optionMedia !== void 0 ? optionMedia : media) !== null && _ref2 !== void 0 ? _ref2 : defaultMedia,
+        onClick: handleOptionClick,
+        selected: selected,
+        style: styles === null || styles === void 0 ? void 0 : styles.option,
+        styles: optionStyles,
+        type: type
+      }, optionProps), optionProps.value);
+    })]
+  });
+});
+DefaultSelectOptionGroupComponent.displayName = 'DefaultSelectOptionGroup';
+export const DefaultSelectOptionGroup = DefaultSelectOptionGroupComponent;