@kaizen/components 0.0.0-canary-v2-20250901045936 → 0.0.0-canary-alpha-release-20250918043833

package/dist/esm/src/Modal/GenericModal/GenericModal.mjs

@@ -1,8 +1,8 @@
-import React, { useId, useState, useCallback, useEffect } from 'react';
+import React, { useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { Transition } from '@headlessui/react';
 import classnames from 'classnames';
-import FocusLock from 'react-focus-lock';
+import { FocusOn } from 'react-focus-on';
 import { useIsClientReady } from '../../utils/useIsClientReady/useIsClientReady.mjs';
 import { warn } from '../util/console.mjs';
 import { ModalContext } from './context/ModalContext.mjs';
@@ -24,87 +24,60 @@ const GenericModal = /*#__PURE__*/function () {
     var labelledByID = useId();
     var describedByID = useId();
     var isClientReady = useIsClientReady();
-    var _c = useState(null),
-      scrollLayer = _c[0],
-      setScrollLayer = _c[1];
-    var _d = useState(null),
-      modalLayer = _d[0],
-      setModalLayer = _d[1];
+    var scrollLayerRef = useRef(null);
+    var modalLayerRef = useRef(null);
     var scrollModalToTop = function () {
       // If we have a really long modal, the autofocus could land on an element down below
       // causing the modal to scroll down and skipping over the content near the modal's top.
       // Ensure that when the modal opens, we are at the top of its content.
       requestAnimationFrame(function () {
-        if (!scrollLayer) return;
-        scrollLayer.scrollTop = 0;
+        var scrollElement = scrollLayerRef.current;
+        // This little verbose of a check but this ensures that the element is attached to the DOM as it animates in. This additional check aims to avoid race conditions
+        if (!(scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.isConnected)) return;
+        scrollElement.scrollTop = 0;
       });
     };
-    var outsideModalClickHandler = function (event) {
-      if (event.target === scrollLayer || event.target === modalLayer) {
-        onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
+    var a11yWarn = function () {
+      if (!isClientReady) return;
+      // Ensure that consumers have provided an element that labels the modal
+      // to meet ARIA accessibility guidelines.
+      if (!document.getElementById(labelledByID)) {
+        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
       }
     };
     var focusOnAccessibleLabel = function () {
       if (!isClientReady) return;
+      var modalElement = modalLayerRef.current;
+      if (!(modalElement === null || modalElement === void 0 ? void 0 : modalElement.isConnected)) return;
       // Check if focus already exists within the modal
-      if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
+      if (modalElement.contains(document.activeElement)) {
         return;
       }
       var labelElement = document.getElementById(labelledByID);
-      labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
-    };
-    var a11yWarn = function () {
-      if (!isClientReady) return;
-      // Ensure that consumers have provided an element that labels the modal
-      // to meet ARIA accessibility guidelines.
-      if (!document.getElementById(labelledByID)) {
-        warn("When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.");
+      if (labelElement === null || labelElement === void 0 ? void 0 : labelElement.isConnected) {
+        labelElement.focus();
       }
     };
-    var preventBodyScroll = function () {
-      var _a;
-      if (!isClientReady) return;
-      var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
-      var scrollStyles = [styles.unscrollable];
-      if (hasScrollbar) {
-        scrollStyles.push(styles.pseudoScrollbar);
+    var onEscapeKeyHandler = function (e) {
+      if (e instanceof KeyboardEvent) {
+        onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(e);
       }
-      (_a = document.documentElement.classList).add.apply(_a, scrollStyles);
     };
     var onAfterEnterHandler = function () {
       scrollModalToTop();
-      if (modalLayer) {
+      var modalElement = modalLayerRef.current;
+      if (modalElement) {
         onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
         focusOnAccessibleLabel();
         a11yWarn();
       }
     };
-    var escapeKeyHandler = useCallback(function (event) {
-      if (event.key === 'Escape') {
-        onEscapeKeyup === null || onEscapeKeyup === void 0 ? void 0 : onEscapeKeyup(event);
-      }
-    }, [onEscapeKeyup]);
-    var onBeforeEnterHandler = function () {
-      preventBodyScroll();
-      if (onEscapeKeyup && isClientReady) {
-        document.addEventListener('keyup', escapeKeyHandler);
+    var outsideModalClickHandler = function (e) {
+      if (e.target === scrollLayerRef.current || e.target === modalLayerRef.current) {
+        onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(e);
       }
     };
-    var cleanUpAfterClose = useCallback(function () {
-      if (!isClientReady) return;
-      document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
-      if (onEscapeKeyup) {
-        document.removeEventListener('keyup', escapeKeyHandler);
-      }
-    }, [escapeKeyHandler, onEscapeKeyup, isClientReady]);
-    /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-    useEffect(function () {
-      return function () {
-        return cleanUpAfterClose();
-      };
-    }, [cleanUpAfterClose]);
     var onAfterLeaveHandler = function () {
-      cleanUpAfterClose();
       propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
     };
     // Don't render portal during SSR
@@ -114,7 +87,6 @@ const GenericModal = /*#__PURE__*/function () {
     return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Transition, {
       appear: true,
       show: isOpen,
-      beforeEnter: onBeforeEnterHandler,
       afterEnter: onAfterEnterHandler,
       afterLeave: onAfterLeaveHandler,
       "data-generic-modal-transition-wrapper": true,
@@ -122,9 +94,10 @@ const GenericModal = /*#__PURE__*/function () {
       leave: styles.animatingLeave,
       as: "div",
       className: classnames(styles.transitionLayer, className)
-    }, /*#__PURE__*/React.createElement(FocusLock, {
-      disabled: focusLockDisabled,
+    }, /*#__PURE__*/React.createElement(FocusOn, {
+      focusLock: focusLockDisabled,
       returnFocus: true,
+      onEscapeKey: onEscapeKeyHandler,
       // Disabling false positive
       // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus: false
@@ -132,11 +105,9 @@ const GenericModal = /*#__PURE__*/function () {
       className: styles.backdropLayer
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.scrollLayer,
-      ref: function (scrollLayerRef) {
-        setScrollLayer(scrollLayerRef);
-      },
-      onClick: outsideModalClickHandler,
-      "data-testid": "".concat(id, "-scrollLayer")
+      ref: scrollLayerRef,
+      "data-testid": "".concat(id, "-scrollLayer"),
+      onClick: outsideModalClickHandler
     }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
       value: {
         labelledByID: labelledByID,
@@ -147,9 +118,7 @@ const GenericModal = /*#__PURE__*/function () {
       className: styles.modalLayer,
       "aria-labelledby": labelledByID,
       "aria-describedby": describedByID,
-      ref: function (modalLayerRef) {
-        return setModalLayer(modalLayerRef);
-      },
+      ref: modalLayerRef,
       "data-testid": id
     }, children))))), document.body);
   };

package/dist/esm/src/Modal/GenericModal/GenericModal.module.scss.mjs

@@ -4,8 +4,6 @@ var styles = {
   "modalLayer": "GenericModal-module_modalLayer__WfD1U",
   "transitionLayer": "GenericModal-module_transitionLayer__zTH-C",
   "animatingEnter": "GenericModal-module_animatingEnter__P3wuk",
-  "animatingLeave": "GenericModal-module_animatingLeave__rNkKX",
-  "unscrollable": "GenericModal-module_unscrollable__HjRaW",
-  "pseudoScrollbar": "GenericModal-module_pseudoScrollbar__BhRqh"
+  "animatingLeave": "GenericModal-module_animatingLeave__rNkKX"
 };
 export { styles as default };

package/dist/esm/src/Notification/InlineNotification/InlineNotification.mjs

@@ -19,7 +19,7 @@ const InlineNotification = /*#__PURE__*/function () {
       otherProps = __rest(_a, ["isSubtle", "hideCloseIcon", "persistent", "classNameOverride"]);
     return /*#__PURE__*/React.createElement(GenericNotification, __assign({
       style: "inline",
-      persistent: persistent !== null && persistent !== void 0 ? persistent : hideCloseIcon,
+      persistent: persistent || hideCloseIcon,
       classNameOverride: classnames(classNameOverride, [isSubtle && styles.subtle]),
       ref: ref
     }, otherProps));

package/dist/esm/src/__alpha__/SingleSelect/SingleSelect.mjs

@@ -1,77 +1,43 @@
-import { __rest, __assign } from 'tslib';
-import React, { useId, useMemo, isValidElement, cloneElement } from 'react';
-import { useSelectState } from '@react-stately/select';
-import { Select } from 'react-aria-components';
-import { SingleSelectContext } from './context/SingleSelectContext.mjs';
-import { List } from './subcomponents/List/List.mjs';
-import { ListSection } from './subcomponents/ListSection/ListSection.mjs';
-import { ListItem } from './subcomponents/ListItem/ListItem.mjs';
-import { Trigger } from './subcomponents/Trigger/Trigger.mjs';
-import { Popover } from './subcomponents/Popover/Popover.mjs';
+import { __assign, __rest } from 'tslib';
+import React from 'react';
+import { Item as Item$1, Section } from '@react-stately/collections';
+import 'react-aria';
+import 'classnames';
+import '../../Radio/Radio/Radio.mjs';
+import '../../Radio/RadioField/RadioField.mjs';
+import '../../Radio/RadioGroup/RadioGroup.mjs';
+import '../../Divider/Divider.mjs';
+import '../../Text/Text.mjs';
+import './context/SingleSelectContext.mjs';
+import '@cultureamp/i18n-react-intl';
+import '../../VisuallyHidden/VisuallyHidden.mjs';
+import '@react-aria/i18n';
+import { Select } from './subcomponents/Select/Select.mjs';
+import { ComboBox } from './subcomponents/ComboBox/ComboBox.mjs';
 const SingleSelect = /*#__PURE__*/function () {
-  const SingleSelect = function (_a) {
-    var items = _a.items,
-      onSelectionChange = _a.onSelectionChange,
-      children = _a.children,
-      restProps = __rest(_a, ["items", "onSelectionChange", "children"]);
-    var buttonRef = React.useRef(null);
-    var popoverRef = React.useRef(null);
-    var racPopoverRef = React.useRef(null);
-    var uniqueId = useId();
-    var anchorName = "--trigger-".concat(uniqueId);
-    var state = useSelectState({
-      items: items
-    });
-    var handleOnSelectionChange = React.useCallback(function (keys) {
-      var key = null;
-      if (keys instanceof Set && keys.size > 0) {
-        key = Array.from(keys)[0];
-      }
-      state.setSelectedKey(key);
-      if (onSelectionChange) {
-        onSelectionChange(key);
-      }
-    }, [state, onSelectionChange]);
-    // Cloning children here to allow users to pass in a custom ListItem or ListSection
-    // and still have the SingleSelect handle selection state
-    var injectedChildren = useMemo(function () {
-      if (! /*#__PURE__*/isValidElement(children)) return null;
-      var selectedKeys = state.selectedKey ? new Set([state.selectedKey]) : new Set();
-      return /*#__PURE__*/cloneElement(children, {
-        selectionMode: 'single',
-        selectedKeys: selectedKeys,
-        onSelectionChange: handleOnSelectionChange,
-        autoFocus: 'first'
-      });
-    }, [children, handleOnSelectionChange, state.selectedKey]);
-    return /*#__PURE__*/React.createElement(SingleSelectContext.Provider, {
-      value: {
-        isOpen: state.isOpen,
-        setOpen: state.setOpen,
-        selectedKey: state.selectedKey,
-        items: items,
-        anchorName: anchorName
-      }
-    }, /*#__PURE__*/React.createElement(Select
-    // TODO: allow user to pass in label
-    , __assign({
-      "aria-label": 'single-select',
-      onSelectionChange: function (key) {
-        return handleOnSelectionChange(key != null ? new Set([key]) : new Set());
-      },
-      placeholder: ""
-    }, restProps), /*#__PURE__*/React.createElement(Trigger, {
-      buttonRef: buttonRef
-    }), state.isOpen && (/*#__PURE__*/React.createElement(Popover, {
-      buttonRef: buttonRef,
-      popoverRef: popoverRef,
-      racPopoverRef: racPopoverRef
-    }, injectedChildren))));
+  const SingleSelect = function (props) {
+    var isComboBox = props.isComboBox,
+      children = props.children,
+      rest = __rest(props, ["isComboBox", "children"]);
+    if (isComboBox) {
+      return /*#__PURE__*/React.createElement(ComboBox, __assign({}, rest), children);
+    }
+    return /*#__PURE__*/React.createElement(Select, __assign({}, rest), children);
   };
-  SingleSelect.displayName = 'SingleSelect';
-  SingleSelect.List = List;
-  SingleSelect.ListItem = ListItem;
-  SingleSelect.ListSection = ListSection;
+  SingleSelect.Item = Item;
+  SingleSelect.Section = Section;
   return SingleSelect;
 }();
-export { SingleSelect };
+const Item = /*#__PURE__*/function () {
+  const Item = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    // @ts-expect-error: StatelyItem doesn't know about our internal item props
+    return /*#__PURE__*/React.createElement(Item$1, __assign({}, props, {
+      ref: ref
+    }));
+  });
+  // @ts-expect-error: doesn't know that the Item can have this static property
+  Item.getCollectionNode = Item$1.getCollectionNode;
+  Item.displayName = 'SingleSelectItem';
+  return Item;
+}();
+export { Item, SingleSelect };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/ComboBox/ComboBox.mjs

@@ -0,0 +1,96 @@
+import { __assign } from 'tslib';
+import React, { useRef, useId } from 'react';
+import { useComboBoxState } from '@react-stately/combobox';
+import classnames from 'classnames';
+import { useFilter, useComboBox } from 'react-aria';
+import { FieldMessage } from '../../../../FieldMessage/FieldMessage.mjs';
+import { Label } from '../../../../Label/Label.mjs';
+import { SingleSelectContext } from '../../context/SingleSelectContext.mjs';
+import { ComboBoxTrigger } from '../ComboBoxTrigger/ComboBoxTrigger.mjs';
+import { List } from '../List/List.mjs';
+import { Popover } from '../Popover/Popover.mjs';
+import styles from './ComboBox.module.css.mjs';
+var ComboBox = function (props) {
+  var _a;
+  var items = props.items,
+    children = props.children,
+    label = props.label,
+    description = props.description,
+    labelHidden = props.labelHidden,
+    _b = props.labelPosition,
+    labelPosition = _b === void 0 ? 'top' : _b,
+    isReadOnly = props.isReadOnly,
+    isDisabled = props.isDisabled,
+    _c = props.size,
+    size = _c === void 0 ? 'medium' : _c,
+    _d = props.variant,
+    variant = _d === void 0 ? 'primary' : _d;
+  var contains = useFilter({
+    sensitivity: 'base'
+  }).contains;
+  var state = useComboBoxState(__assign(__assign({}, props), {
+    items: items,
+    defaultFilter: contains,
+    children: children,
+    menuTrigger: 'focus'
+  }));
+  var inputRef = useRef(null);
+  var popoverRef = useRef(null);
+  var listBoxRef = useRef(null);
+  var buttonRef = useRef(null);
+  var clearButtonRef = useRef(null);
+  var triggerWrapperRef = useRef(null);
+  var _e = useComboBox(__assign(__assign({}, props), {
+      'aria-label': labelHidden ? label : undefined,
+      inputRef: inputRef,
+      buttonRef: buttonRef,
+      popoverRef: popoverRef,
+      listBoxRef: listBoxRef
+    }), state),
+    labelProps = _e.labelProps,
+    descriptionProps = _e.descriptionProps,
+    inputProps = _e.inputProps,
+    listBoxProps = _e.listBoxProps,
+    buttonProps = _e.buttonProps;
+  var uniqueId = useId();
+  var anchorName = "--trigger-".concat(uniqueId);
+  return /*#__PURE__*/React.createElement(SingleSelectContext.Provider, {
+    value: {
+      anchorName: anchorName,
+      state: state,
+      isComboBox: true,
+      isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+      isReadOnly: isReadOnly !== null && isReadOnly !== void 0 ? isReadOnly : false,
+      secondary: variant === 'secondary',
+      size: size,
+      fieldLabel: label
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: labelPosition === 'top' ? styles.topLabel : styles.sideLabel
+  }, !labelHidden && (/*#__PURE__*/React.createElement("div", {
+    className: classnames(styles.label, (_a = {}, _a[styles.labelTop] = labelPosition === 'top', _a))
+  }, /*#__PURE__*/React.createElement(Label, __assign({}, labelProps), label))), /*#__PURE__*/React.createElement("div", {
+    className: styles.comboBoxTrigger
+  }, /*#__PURE__*/React.createElement(ComboBoxTrigger, {
+    inputProps: inputProps,
+    inputRef: inputRef,
+    buttonRef: buttonRef,
+    buttonProps: buttonProps,
+    clearButtonRef: clearButtonRef,
+    triggerWrapperRef: triggerWrapperRef
+  })), description && (/*#__PURE__*/React.createElement("div", {
+    className: styles.description
+  }, /*#__PURE__*/React.createElement(FieldMessage, __assign({
+    message: description
+  }, descriptionProps))))), /*#__PURE__*/React.createElement(Popover, {
+    state: state,
+    triggerRef: triggerWrapperRef,
+    popoverRef: popoverRef,
+    clearButtonRef: clearButtonRef
+  }, /*#__PURE__*/React.createElement(List, {
+    listBoxOptions: listBoxProps,
+    state: state,
+    listBoxRef: listBoxRef
+  })));
+};
+export { ComboBox };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/ComboBox/ComboBox.module.css.mjs

@@ -0,0 +1,9 @@
+var styles = {
+  "topLabel": "ComboBox-module_topLabel__a2t80",
+  "sideLabel": "ComboBox-module_sideLabel__B-jX4",
+  "label": "ComboBox-module_label__eTnD9",
+  "labelTop": "ComboBox-module_labelTop__h6r-z",
+  "comboBoxTrigger": "ComboBox-module_comboBoxTrigger__yvqGb",
+  "description": "ComboBox-module_description__MDKJ7"
+};
+export { styles as default };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.mjs

@@ -0,0 +1,103 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
+import classnames from 'classnames';
+import { useButton } from 'react-aria';
+import { Icon } from '../../../../Icon/Icon.mjs';
+import { VisuallyHidden } from '../../../../VisuallyHidden/VisuallyHidden.mjs';
+import { useSingleSelectContext } from '../../context/SingleSelectContext.mjs';
+import styles from './ComboBoxTrigger.module.css.mjs';
+var ClearButton = function (_a) {
+  var _b;
+  var clearButtonRef = _a.clearButtonRef,
+    inputRef = _a.inputRef;
+  var _c = useSingleSelectContext(),
+    state = _c.state,
+    isComboBox = _c.isComboBox,
+    fieldLabel = _c.fieldLabel;
+  var formatMessage = useIntl().formatMessage;
+  var clearButtonAlt = formatMessage({
+    id: 'singleSelect.clearButtonAlt',
+    defaultMessage: 'Clear {field} selection',
+    description: 'Alt text for the clear selection button'
+  }, {
+    field: fieldLabel
+  });
+  var buttonProps = useButton({
+    onPress: function () {
+      var _a;
+      if (isComboBox) {
+        state.setSelectedKey(null);
+      }
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, clearButtonRef).buttonProps;
+  return /*#__PURE__*/React.createElement("button", __assign({}, buttonProps, {
+    ref: clearButtonRef,
+    type: "button",
+    className: classnames(styles.clearButton, (_b = {}, _b[styles.hidden] = !state.selectedKey, _b)),
+    tabIndex: 0
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel",
+    isPresentational: true,
+    isFilled: true
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, clearButtonAlt));
+};
+var ChevronButton = function (props) {
+  var _a = useSingleSelectContext(),
+    state = _a.state,
+    fieldLabel = _a.fieldLabel;
+  var formatMessage = useIntl().formatMessage;
+  var chevronButton = formatMessage({
+    id: 'singleSelect.chevronButton',
+    defaultMessage: 'Show suggestions for {field}',
+    description: 'Aria label text for the SingleSelect button to open and close suggestions list'
+  }, {
+    field: fieldLabel
+  });
+  var buttonProps = useButton(__assign(__assign({}, props), {
+    'aria-label': String(chevronButton),
+    'aria-labelledby': undefined
+  }), props.buttonRef).buttonProps;
+  return /*#__PURE__*/React.createElement("button", __assign({
+    type: "button"
+  }, buttonProps, {
+    ref: props.buttonRef,
+    className: styles.chevronButton,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement(Icon, {
+    isPresentational: true,
+    name: state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+  }));
+};
+var ComboBoxTrigger = function (_a) {
+  var _b, _c;
+  var inputProps = _a.inputProps,
+    inputRef = _a.inputRef,
+    buttonProps = _a.buttonProps,
+    buttonRef = _a.buttonRef,
+    triggerWrapperRef = _a.triggerWrapperRef,
+    clearButtonRef = _a.clearButtonRef;
+  var _d = useSingleSelectContext(),
+    anchorName = _d.anchorName,
+    isDisabled = _d.isDisabled,
+    isReadOnly = _d.isReadOnly,
+    secondary = _d.secondary,
+    size = _d.size;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      '--anchor-name': anchorName
+    },
+    ref: triggerWrapperRef,
+    className: classnames(styles.trigger, (_b = {}, _b[styles.disabled] = isDisabled, _b[styles.readOnly] = isReadOnly, _b[styles.secondary] = secondary, _b[styles.small] = size === 'small', _b[styles.large] = size === 'large', _b))
+  }, /*#__PURE__*/React.createElement("input", __assign({}, inputProps, {
+    ref: inputRef,
+    className: classnames(styles.input, (_c = {}, _c[styles.smallText] = size === 'small', _c))
+  })), !isDisabled && !isReadOnly && (/*#__PURE__*/React.createElement(ClearButton, {
+    clearButtonRef: clearButtonRef,
+    inputRef: inputRef
+  })), !isReadOnly && /*#__PURE__*/React.createElement(ChevronButton, __assign({}, buttonProps, {
+    buttonRef: buttonRef
+  }))));
+};
+export { ComboBoxTrigger };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.module.css.mjs

@@ -0,0 +1,14 @@
+var styles = {
+  "trigger": "ComboBoxTrigger-module_trigger__p6pcn",
+  "smallText": "ComboBoxTrigger-module_smallText__Vj2Ya",
+  "secondary": "ComboBoxTrigger-module_secondary__TvNTK",
+  "disabled": "ComboBoxTrigger-module_disabled__BkFJy",
+  "readOnly": "ComboBoxTrigger-module_readOnly__g6-fB",
+  "input": "ComboBoxTrigger-module_input__TkoLg",
+  "small": "ComboBoxTrigger-module_small__-225Z",
+  "large": "ComboBoxTrigger-module_large__kj1vw",
+  "clearButton": "ComboBoxTrigger-module_clearButton__PlsuZ",
+  "chevronButton": "ComboBoxTrigger-module_chevronButton__rzv2v",
+  "hidden": "ComboBoxTrigger-module_hidden__zC13w"
+};
+export { styles as default };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/List/List.mjs

@@ -1,18 +1,41 @@
-import { __rest, __assign } from 'tslib';
+import { __assign } from 'tslib';
 import React from 'react';
-import classnames from 'classnames';
-import { ListBox } from 'react-aria-components';
+import { useListBox } from 'react-aria';
+import { ListItem } from '../ListItem/ListItem.mjs';
+import { ListSection } from '../ListSection/ListSection.mjs';
 import styles from './List.module.css.mjs';
-const List = /*#__PURE__*/function () {
-  const List = function (_a) {
-    var children = _a.children,
-      className = _a.className,
-      props = __rest(_a, ["children", "className"]);
-    return /*#__PURE__*/React.createElement(ListBox, __assign({
-      className: classnames(styles.list, className)
-    }, props), children);
+var List = function (_a) {
+  var state = _a.state,
+    listBoxOptions = _a.listBoxOptions,
+    listBoxRef = _a.listBoxRef;
+  var listBoxProps = useListBox(__assign(__assign({}, listBoxOptions), {
+    autoFocus: 'first'
+  }), state, listBoxRef).listBoxProps;
+  var renderNode = function (node) {
+    if (node.type === 'section') {
+      return node.rendered ? (/*#__PURE__*/React.createElement(ListSection, {
+        key: String(node.key),
+        section: node,
+        state: state
+      })) : null;
+    } else {
+      var _a = node.props,
+        selectedIcon = _a.selectedIcon,
+        selectedPosition = _a.selectedPosition,
+        className = _a.className;
+      return /*#__PURE__*/React.createElement(ListItem, {
+        key: String(node.key),
+        item: node,
+        state: state,
+        selectedIcon: selectedIcon,
+        selectedPosition: selectedPosition,
+        className: className
+      });
+    }
   };
-  List.displayName = 'SingleSelect.List';
-  return List;
-}();
+  return /*#__PURE__*/React.createElement("ul", __assign({}, listBoxProps, {
+    ref: listBoxRef,
+    className: styles.list
+  }), Array.from(state.collection).map(renderNode));
+};
 export { List };