@kaizen/components 2.0.0 → 2.0.2

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 };

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

@@ -1,18 +1,68 @@
-import { __rest, __assign } from 'tslib';
+import { __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { ListBoxItem } from 'react-aria-components';
+import { useOption } from 'react-aria';
+import { Icon } from '../../../../Icon/Icon.mjs';
+import { Radio } from '../../../../Radio/Radio/Radio.mjs';
+import '../../../../Radio/RadioField/RadioField.mjs';
+import '../../../../Radio/RadioGroup/RadioGroup.mjs';
 import styles from './ListItem.module.css.mjs';
-const ListItem = /*#__PURE__*/function () {
-  const ListItem = function (_a) {
-    var children = _a.children,
-      className = _a.className,
-      props = __rest(_a, ["children", "className"]);
-    return /*#__PURE__*/React.createElement(ListBoxItem, __assign({
-      className: classnames(styles.listItem, className)
-    }, props), children);
+var ListItem = function (_a) {
+  var _b;
+  var item = _a.item,
+    state = _a.state,
+    _c = _a.selectedIcon,
+    selectedIcon = _c === void 0 ? 'check' : _c,
+    _d = _a.selectedPosition,
+    selectedPosition = _d === void 0 ? 'end' : _d,
+    className = _a.className;
+  var ref = React.useRef(null);
+  var _e = useOption({
+      key: item.key
+    }, state, ref),
+    optionProps = _e.optionProps,
+    isSelected = _e.isSelected,
+    isDisabled = _e.isDisabled,
+    isFocused = _e.isFocused;
+  var isStart = selectedPosition === 'start';
+  var isEnd = selectedPosition === 'end';
+  var isCheck = selectedIcon === 'check';
+  var isRadio = selectedIcon === 'radio';
+  var renderSelectionIcon = function () {
+    if (isCheck) {
+      if (isSelected) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: styles.selectedIconWrapper
+        }, /*#__PURE__*/React.createElement(Icon, {
+          name: "check",
+          isPresentational: true,
+          className: styles.iconChecked
+        }));
+      }
+      return isStart ? /*#__PURE__*/React.createElement("div", {
+        className: styles.emptySpacer
+      }) : null;
+    }
+    if (isRadio) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.selectedIconWrapper
+      }, /*#__PURE__*/React.createElement(Radio, {
+        id: item.textValue,
+        name: item.textValue,
+        selectedStatus: isSelected
+      }));
+    }
+    return null;
   };
-  ListItem.displayName = 'SingleSelect.ListItem';
-  return ListItem;
-}();
+  return /*#__PURE__*/React.createElement("li", __assign({
+    key: item.key
+  }, optionProps, {
+    ref: ref,
+    className: classnames(styles.listItem, (_b = {}, _b[styles.focused] = isFocused, _b[styles.disabled] = isDisabled, _b[styles.selected] = isSelected, _b[styles.selectedStartPosition] = isStart, _b))
+  }), isStart && renderSelectionIcon(), typeof item.rendered === 'string' ? (/*#__PURE__*/React.createElement("span", {
+    className: classnames(styles.itemText, className)
+  }, item.rendered)) : (/*#__PURE__*/React.createElement("span", {
+    className: classnames(styles.itemContent, className)
+  }, item.rendered)), isEnd && renderSelectionIcon());
+};
 export { ListItem };

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

@@ -1,4 +1,13 @@
 var styles = {
-  "listItem": "ListItem-module_listItem__xGr6A"
+  "listItem": "ListItem-module_listItem__xGr6A",
+  "focused": "ListItem-module_focused__au3J5",
+  "selected": "ListItem-module_selected__IV3-p",
+  "disabled": "ListItem-module_disabled__A2QFo",
+  "iconChecked": "ListItem-module_iconChecked__co4xD",
+  "itemContent": "ListItem-module_itemContent__x4h7q",
+  "itemText": "ListItem-module_itemText__O4Ddg",
+  "selectedStartPosition": "ListItem-module_selectedStartPosition__2N3bw",
+  "selectedIconWrapper": "ListItem-module_selectedIconWrapper__w-ECd",
+  "emptySpacer": "ListItem-module_emptySpacer__qeRpQ"
 };
 export { styles as default };

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

@@ -1,19 +1,45 @@
-import { __rest, __assign } from 'tslib';
+import { __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { ListBoxSection, Header } from 'react-aria-components';
+import { useListBoxSection } from 'react-aria';
+import { Divider } from '../../../../Divider/Divider.mjs';
+import { ListItem } from '../ListItem/ListItem.mjs';
 import styles from './ListSection.module.css.mjs';
-const ListSection = /*#__PURE__*/function () {
-  const ListSection = function (_a) {
-    var name = _a.name,
-      className = _a.className,
-      children = _a.children,
-      props = __rest(_a, ["name", "className", "children"]);
-    return /*#__PURE__*/React.createElement(ListBoxSection, __assign({}, props), /*#__PURE__*/React.createElement(Header, {
-      className: classnames(styles.listSectionHeader, className)
-    }, name), children);
-  };
-  ListSection.displayName = 'SingleSelect.ListSection';
-  return ListSection;
-}();
+var ListSection = function (_a) {
+  var _b;
+  var section = _a.section,
+    state = _a.state;
+  var _c = useListBoxSection({
+      'heading': section.rendered,
+      'aria-label': section['aria-label']
+    }),
+    headingProps = _c.headingProps,
+    itemProps = _c.itemProps,
+    groupProps = _c.groupProps;
+  var firstSectionHeader = section.key === state.collection.getFirstKey();
+  return /*#__PURE__*/React.createElement(React.Fragment, {
+    key: section.key
+  }, !firstSectionHeader && /*#__PURE__*/React.createElement("li", {
+    role: "presentation",
+    "aria-hidden": true
+  }), !firstSectionHeader && /*#__PURE__*/React.createElement(Divider, {
+    variant: "content"
+  }), /*#__PURE__*/React.createElement("li", __assign({}, itemProps, {
+    className: classnames(styles.sectionWrapper, (_b = {}, _b[styles.firstSectionHeader] = firstSectionHeader, _b))
+  }), section.rendered && (/*#__PURE__*/React.createElement("span", __assign({}, headingProps, {
+    role: "presentation",
+    "aria-hidden": true,
+    className: styles.listSectionHeader
+  }), section.rendered)), /*#__PURE__*/React.createElement("ul", __assign({
+    key: "".concat(section.key, "-group-contents")
+  }, groupProps, {
+    className: styles.listSectionGroup
+  }), Array.from(section.childNodes).map(function (node) {
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: node.key,
+      item: node,
+      state: state
+    });
+  }))));
+};
 export { ListSection };

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

@@ -1,4 +1,7 @@
 var styles = {
-  "listSectionHeader": "ListSection-module_listSectionHeader__bptHg"
+  "sectionWrapper": "ListSection-module_sectionWrapper__gxh41",
+  "firstSectionHeader": "ListSection-module_firstSectionHeader__zPUIZ",
+  "listSectionHeader": "ListSection-module_listSectionHeader__bptHg",
+  "listSectionGroup": "ListSection-module_listSectionGroup__PoUPf"
 };
 export { styles as default };

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

@@ -1,49 +1,75 @@
-import React, { useMemo, useLayoutEffect } from 'react';
-import { Popover as Popover$1 } from 'react-aria-components';
+import { __rest, __assign } from 'tslib';
+import React, { useLayoutEffect } from 'react';
+import classnames from 'classnames';
+import { usePopover, Overlay, DismissButton } from 'react-aria';
 import { useSingleSelectContext } from '../../context/SingleSelectContext.mjs';
+import { useSupportsAnchorPositioning } from './utils/useSupportsAnchorPositioning.mjs';
 import { usePositioningStyles } from './utils/usePositioningStyles.mjs';
 import styles from './Popover.module.css.mjs';
-const Popover = /*#__PURE__*/function () {
-  const Popover = function (_a) {
-    var buttonRef = _a.buttonRef,
-      popoverRef = _a.popoverRef,
-      racPopoverRef = _a.racPopoverRef,
-      children = _a.children;
-    var _b = useSingleSelectContext(),
-      isOpen = _b.isOpen,
-      setOpen = _b.setOpen,
-      anchorName = _b.anchorName;
-    var _c = usePositioningStyles(buttonRef, popoverRef, anchorName),
-      popoverStyle = _c.popoverStyle,
-      isPositioned = _c.isPositioned;
-    var shouldShowPopover = useMemo(function () {
-      return isOpen && isPositioned;
-    }, [isOpen, isPositioned]);
-    useLayoutEffect(function () {
-      var popover = popoverRef.current;
-      if (!(popover === null || popover === void 0 ? void 0 : popover.showPopover) || !(popover === null || popover === void 0 ? void 0 : popover.hidePopover)) return;
-      if (shouldShowPopover) {
-        popover.showPopover();
-      } else {
+var Popover = function (_a) {
+  var _b;
+  var _c;
+  var state = _a.state,
+    popoverRef = _a.popoverRef,
+    children = _a.children,
+    clearButtonRef = _a.clearButtonRef,
+    restProps = __rest(_a, ["state", "popoverRef", "children", "clearButtonRef"]);
+  var anchorName = useSingleSelectContext().anchorName;
+  var manualPopoverRef = React.useRef(null);
+  var popoverProps = usePopover(__assign(__assign({}, restProps), {
+    popoverRef: popoverRef,
+    shouldCloseOnInteractOutside: function (element) {
+      var _a;
+      if ((_a = clearButtonRef === null || clearButtonRef === void 0 ? void 0 : clearButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(element)) {
+        return false;
+      }
+      return true;
+    }
+  }), state).popoverProps;
+  var supportsAnchorPositioning = useSupportsAnchorPositioning();
+  var _d = usePositioningStyles(restProps.triggerRef, manualPopoverRef, anchorName),
+    popoverStyle = _d.popoverStyle,
+    isPositioned = _d.isPositioned,
+    updatePosition = _d.updatePosition;
+  useLayoutEffect(function () {
+    if (!supportsAnchorPositioning || !state.isOpen) return;
+    updatePosition();
+    var popover = manualPopoverRef === null || manualPopoverRef === void 0 ? void 0 : manualPopoverRef.current;
+    if (popover === null || popover === void 0 ? void 0 : popover.showPopover) {
+      popover.showPopover();
+    }
+    return function () {
+      if (popover === null || popover === void 0 ? void 0 : popover.hidePopover) {
         popover.hidePopover();
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [shouldShowPopover]);
-    return /*#__PURE__*/React.createElement(Popover$1, {
-      shouldUpdatePosition: false,
-      trigger: "manual",
-      isOpen: isOpen,
-      onOpenChange: setOpen,
-      ref: racPopoverRef
-    }, /*#__PURE__*/React.createElement("div", {
-      // @ts-expect-error - popover attribute is not included in current ts version, ignore type error
-      popover: "manual",
-      ref: popoverRef,
-      className: styles.popover,
-      style: popoverStyle
-    }, children));
-  };
-  Popover.displayName = 'SingleSelect.Popover';
-  return Popover;
-}();
+    };
+  }, [state.isOpen, supportsAnchorPositioning, updatePosition, isPositioned]);
+  useLayoutEffect(function () {
+    if (!supportsAnchorPositioning || state.isOpen) return;
+    var popover = manualPopoverRef === null || manualPopoverRef === void 0 ? void 0 : manualPopoverRef.current;
+    if (popover === null || popover === void 0 ? void 0 : popover.hidePopover) {
+      popover.hidePopover();
+    }
+  }, [state.isOpen, supportsAnchorPositioning]);
+  var manualPopover = /*#__PURE__*/React.createElement("div", {
+    // @ts-expect-error - popover attribute is not included in current ts version, ignore type error
+    popover: "manual",
+    ref: manualPopoverRef,
+    className: styles.popover,
+    style: popoverStyle
+  }, children);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.isOpen && (/*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement("div", __assign({
+    id: "popover-id"
+  }, popoverProps, {
+    ref: popoverRef,
+    style: __assign(__assign({}, popoverProps.style), !supportsAnchorPositioning && {
+      width: (_c = restProps.triggerRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width
+    }),
+    className: classnames(styles.popover, (_b = {}, _b[styles.offsetSpacing] = !supportsAnchorPositioning, _b))
+  }), /*#__PURE__*/React.createElement(DismissButton, {
+    onDismiss: state.close
+  }), supportsAnchorPositioning ? manualPopover : children, /*#__PURE__*/React.createElement(DismissButton, {
+    onDismiss: state.close
+  })))));
+};
 export { Popover };

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

@@ -1,4 +1,5 @@
 var styles = {
-  "popover": "Popover-module_popover__BjY2S"
+  "popover": "Popover-module_popover__BjY2S",
+  "offsetSpacing": "Popover-module_offsetSpacing__NdPBV"
 };
 export { styles as default };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePopoverPositioning.mjs

@@ -86,7 +86,8 @@ function usePopoverPositioning(_a) {
     };
   }, [updatePosition, triggerRef]);
   return __assign(__assign({}, position), {
-    isPositioned: isPositioned
+    isPositioned: isPositioned,
+    updatePosition: updatePosition
   });
 }
 export { usePopoverPositioning };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePositioningStyles.mjs

@@ -44,7 +44,8 @@ var usePositioningStyles = function (buttonRef, popoverRef, anchorName) {
     bottom = _a.bottom,
     insetInlineStart = _a.insetInlineStart,
     maxHeight = _a.maxHeight,
-    isPositioned = _a.isPositioned;
+    isPositioned = _a.isPositioned,
+    updatePosition = _a.updatePosition;
   var positionData = useMemo(function () {
     return {
       top: top,
@@ -61,7 +62,8 @@ var usePositioningStyles = function (buttonRef, popoverRef, anchorName) {
   }, [hasAnchorSupport, anchorName, positionData]);
   return {
     popoverStyle: popoverStyle,
-    isPositioned: isPositioned
+    isPositioned: isPositioned,
+    updatePosition: updatePosition
   };
 };
 export { usePositioningStyles };

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

@@ -0,0 +1,78 @@
+import { __assign } from 'tslib';
+import React, { useRef, useId } from 'react';
+import { useSelectState } from '@react-stately/select';
+import classnames from 'classnames';
+import { useSelect } from 'react-aria';
+import { SingleSelectContext } from '../../context/SingleSelectContext.mjs';
+import { List } from '../List/List.mjs';
+import { Popover } from '../Popover/Popover.mjs';
+import { SelectTrigger } from '../SelectTrigger/SelectTrigger.mjs';
+import styles from './Select.module.css.mjs';
+import { Label } from '../../../../Label/Label.mjs';
+import { FieldMessage } from '../../../../FieldMessage/FieldMessage.mjs';
+var Select = function (props) {
+  var _a;
+  var label = props.label,
+    description = props.description,
+    labelHidden = props.labelHidden,
+    _b = props.labelPosition,
+    labelPosition = _b === void 0 ? 'top' : _b,
+    isDisabled = props.isDisabled,
+    isReadOnly = props.isReadOnly,
+    _c = props.size,
+    size = _c === void 0 ? 'medium' : _c,
+    _d = props.variant,
+    variant = _d === void 0 ? 'primary' : _d;
+  var state = useSelectState(__assign(__assign({}, props), {
+    items: props.items,
+    children: props.children
+  }));
+  var popoverRef = useRef(null);
+  var listBoxRef = useRef(null);
+  var triggerRef = useRef(null);
+  var _e = useSelect(__assign(__assign({}, props), {
+      'aria-label': labelHidden ? label : undefined
+    }), state, triggerRef),
+    labelProps = _e.labelProps,
+    descriptionProps = _e.descriptionProps,
+    menuProps = _e.menuProps,
+    triggerProps = _e.triggerProps,
+    valueProps = _e.valueProps;
+  var uniqueId = useId();
+  var anchorName = "--trigger-".concat(uniqueId);
+  return /*#__PURE__*/React.createElement(SingleSelectContext.Provider, {
+    value: {
+      anchorName: anchorName,
+      state: state,
+      isComboBox: false,
+      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.selectTrigger
+  }, /*#__PURE__*/React.createElement(SelectTrigger, {
+    triggerProps: triggerProps,
+    valueProps: valueProps,
+    buttonRef: triggerRef
+  })), description && (/*#__PURE__*/React.createElement("div", {
+    className: styles.description
+  }, /*#__PURE__*/React.createElement(FieldMessage, __assign({
+    message: description
+  }, descriptionProps))))), /*#__PURE__*/React.createElement(Popover, {
+    state: state,
+    triggerRef: triggerRef,
+    popoverRef: popoverRef
+  }, /*#__PURE__*/React.createElement(List, {
+    listBoxOptions: menuProps,
+    state: state,
+    listBoxRef: listBoxRef
+  })));
+};
+export { Select };

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

@@ -0,0 +1,9 @@
+var styles = {
+  "topLabel": "Select-module_topLabel__tuilO",
+  "sideLabel": "Select-module_sideLabel__om-vC",
+  "label": "Select-module_label__X4jf-",
+  "labelTop": "Select-module_labelTop__vE3N2",
+  "selectTrigger": "Select-module_selectTrigger__ibr4f",
+  "description": "Select-module_description__hOocq"
+};
+export { styles as default };

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

@@ -0,0 +1,43 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { useButton } from 'react-aria';
+import { Icon } from '../../../../Icon/Icon.mjs';
+import { Text } from '../../../../Text/Text.mjs';
+import { useSingleSelectContext } from '../../context/SingleSelectContext.mjs';
+import styles from './SelectTrigger.module.css.mjs';
+var ChevronButton = function () {
+  var state = useSingleSelectContext().state;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.chevronButton
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isPresentational: true,
+    name: state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+  }));
+};
+var SelectTrigger = function (_a) {
+  var _b;
+  var triggerProps = _a.triggerProps,
+    valueProps = _a.valueProps,
+    buttonRef = _a.buttonRef;
+  var _c = useSingleSelectContext(),
+    state = _c.state,
+    anchorName = _c.anchorName,
+    isDisabled = _c.isDisabled,
+    isReadOnly = _c.isReadOnly,
+    secondary = _c.secondary,
+    size = _c.size;
+  var buttonProps = useButton(triggerProps, buttonRef).buttonProps;
+  return /*#__PURE__*/React.createElement("button", __assign({}, buttonProps, {
+    type: "button",
+    style: {
+      '--anchor-name': anchorName
+    },
+    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)),
+    ref: buttonRef
+  }), /*#__PURE__*/React.createElement(Text, {
+    variant: size === 'small' ? 'small' : 'body',
+    classNameOverride: isDisabled ? styles.disabledText : undefined
+  }, /*#__PURE__*/React.createElement("span", __assign({}, valueProps), state.selectedItem ? state.selectedItem.textValue : '')), !isReadOnly && /*#__PURE__*/React.createElement(ChevronButton, null));
+};
+export { SelectTrigger };

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

@@ -0,0 +1,11 @@
+var styles = {
+  "trigger": "SelectTrigger-module_trigger__fIe03",
+  "disabled": "SelectTrigger-module_disabled__zfAoe",
+  "secondary": "SelectTrigger-module_secondary__eOquY",
+  "readOnly": "SelectTrigger-module_readOnly__q-Epr",
+  "disabledText": "SelectTrigger-module_disabledText__acP59",
+  "small": "SelectTrigger-module_small__jE-NG",
+  "large": "SelectTrigger-module_large__r93d8",
+  "chevronButton": "SelectTrigger-module_chevronButton__611jw"
+};
+export { styles as default };