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

package/alpha/README.md

@@ -0,0 +1,28 @@
+# Entrypoint: alpha
+
+This directory is here to redirect any imports from `@kaizen/components/alpha` to the correct distribution of compiled code to allow for treeshaking of alpha components.
+
+More details: [https://github.com/theKashey/multiple-entry-points-example](https://github.com/theKashey/multiple-entry-points-example)
+
+## Contribution
+
+All "alpha" components are to be added to the `src/__alpha__` directory.
+
+### What is an "alpha" component?
+
+These components are in development phase and not yet ready for use. Imports from this entry point should not be used in production.
+
+eg. `SingleSelect` will be built in `alpha`, you can test it and try it out here, but it won't be ready for consumers to adopt until it moved to `next` or root import.
+
+```
+// How to test an alpha component
+import { SingleSelect } from "@kaizen/components/alpha"
+
+// Consumers can only adopt it when it moves to next or the root
+import { SingleSelect } from "@kaizen/components/next"
+import { SingleSelect } from "@kaizen/components"
+```
+
+Eventually, all alpha components are moved to either `next` or root import.
+
+More details [Kaizen tech vision & strategy](https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/4630021426/2.+Create+a+predictable+release+and+deprecation+cycle#Solutions)

package/alpha/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/alpha.cjs",
+  "module": "../dist/esm/alpha.mjs",
+  "types": "../dist/types/__alpha__/index.d.ts"
+}

package/dist/cjs/alpha.cjs

@@ -1,4 +1,5 @@
 'use strict';
 
 var SingleSelect = require('./src/__alpha__/SingleSelect/SingleSelect.cjs');
+exports.Item = SingleSelect.Item;
 exports.SingleSelect = SingleSelect.SingleSelect;

package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs

@@ -4,7 +4,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var react = require('@headlessui/react');
 var classnames = require('classnames');
-var FocusLock = require('react-focus-lock');
+var reactFocusOn = require('react-focus-on');
 var useIsClientReady = require('../../utils/useIsClientReady/useIsClientReady.cjs');
 var console = require('../util/console.cjs');
 var ModalContext = require('./context/ModalContext.cjs');
@@ -16,7 +16,6 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var FocusLock__default = /*#__PURE__*/_interopDefault(FocusLock);
 var GenericModal = function (_a) {
   var propsId = _a.id,
     children = _a.children,
@@ -33,87 +32,60 @@ var GenericModal = function (_a) {
   var labelledByID = React.useId();
   var describedByID = React.useId();
   var isClientReady = useIsClientReady.useIsClientReady();
-  var _c = React.useState(null),
-    scrollLayer = _c[0],
-    setScrollLayer = _c[1];
-  var _d = React.useState(null),
-    modalLayer = _d[0],
-    setModalLayer = _d[1];
+  var scrollLayerRef = React.useRef(null);
+  var modalLayerRef = React.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)) {
+      console.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)) {
-      console.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 = [GenericModal_module.unscrollable];
-    if (hasScrollbar) {
-      scrollStyles.push(GenericModal_module.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 = React.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 = React.useCallback(function () {
-    if (!isClientReady) return;
-    document.documentElement.classList.remove(GenericModal_module.unscrollable, GenericModal_module.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*/
-  React.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
@@ -123,7 +95,6 @@ var GenericModal = function (_a) {
   return ReactDOM.createPortal(React__default.default.createElement(react.Transition, {
     appear: true,
     show: isOpen,
-    beforeEnter: onBeforeEnterHandler,
     afterEnter: onAfterEnterHandler,
     afterLeave: onAfterLeaveHandler,
     "data-generic-modal-transition-wrapper": true,
@@ -131,9 +102,10 @@ var GenericModal = function (_a) {
     leave: GenericModal_module.animatingLeave,
     as: "div",
     className: classnames__default.default(GenericModal_module.transitionLayer, className)
-  }, React__default.default.createElement(FocusLock__default.default, {
-    disabled: focusLockDisabled,
+  }, React__default.default.createElement(reactFocusOn.FocusOn, {
+    focusLock: focusLockDisabled,
     returnFocus: true,
+    onEscapeKey: onEscapeKeyHandler,
     // Disabling false positive
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: false
@@ -141,11 +113,9 @@ var GenericModal = function (_a) {
     className: GenericModal_module.backdropLayer
   }), React__default.default.createElement("div", {
     className: GenericModal_module.scrollLayer,
-    ref: function (scrollLayerRef) {
-      setScrollLayer(scrollLayerRef);
-    },
-    onClick: outsideModalClickHandler,
-    "data-testid": "".concat(id, "-scrollLayer")
+    ref: scrollLayerRef,
+    "data-testid": "".concat(id, "-scrollLayer"),
+    onClick: outsideModalClickHandler
   }, React__default.default.createElement(ModalContext.ModalContext.Provider, {
     value: {
       labelledByID: labelledByID,
@@ -156,9 +126,7 @@ var GenericModal = function (_a) {
     className: GenericModal_module.modalLayer,
     "aria-labelledby": labelledByID,
     "aria-describedby": describedByID,
-    ref: function (modalLayerRef) {
-      return setModalLayer(modalLayerRef);
-    },
+    ref: modalLayerRef,
     "data-testid": id
   }, children))))), document.body);
 };

package/dist/cjs/src/Modal/GenericModal/GenericModal.module.scss.cjs

@@ -6,8 +6,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"
 };
 module.exports = styles;

package/dist/cjs/src/Notification/InlineNotification/InlineNotification.cjs

@@ -27,7 +27,7 @@ var InlineNotification = React.forwardRef(function (_a, ref) {
     otherProps = tslib.__rest(_a, ["isSubtle", "hideCloseIcon", "persistent", "classNameOverride"]);
   return React__default.default.createElement(GenericNotification.GenericNotification, tslib.__assign({
     style: "inline",
-    persistent: persistent !== null && persistent !== void 0 ? persistent : hideCloseIcon,
+    persistent: persistent || hideCloseIcon,
     classNameOverride: classnames__default.default(classNameOverride, [isSubtle && GenericNotification_module.subtle]),
     ref: ref
   }, otherProps));

package/dist/cjs/src/__alpha__/SingleSelect/SingleSelect.cjs

@@ -2,84 +2,45 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var select = require('@react-stately/select');
-var reactAriaComponents = require('react-aria-components');
-var SingleSelectContext = require('./context/SingleSelectContext.cjs');
-var List = require('./subcomponents/List/List.cjs');
-var ListSection = require('./subcomponents/ListSection/ListSection.cjs');
-var ListItem = require('./subcomponents/ListItem/ListItem.cjs');
-var Trigger = require('./subcomponents/Trigger/Trigger.cjs');
-var Popover = require('./subcomponents/Popover/Popover.cjs');
+var collections = require('@react-stately/collections');
+require('react-aria');
+require('classnames');
+require('../../Radio/Radio/Radio.cjs');
+require('../../Radio/RadioField/RadioField.cjs');
+require('../../Radio/RadioGroup/RadioGroup.cjs');
+require('../../Divider/Divider.cjs');
+require('../../Text/Text.cjs');
+require('./context/SingleSelectContext.cjs');
+require('@cultureamp/i18n-react-intl');
+require('../../VisuallyHidden/VisuallyHidden.cjs');
+require('@react-aria/i18n');
+var Select = require('./subcomponents/Select/Select.cjs');
+var ComboBox = require('./subcomponents/ComboBox/ComboBox.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-const SingleSelect = /*#__PURE__*/function () {
-  const SingleSelect = function (_a) {
-    var items = _a.items,
-      onSelectionChange = _a.onSelectionChange,
-      children = _a.children,
-      restProps = tslib.__rest(_a, ["items", "onSelectionChange", "children"]);
-    var buttonRef = React__default.default.useRef(null);
-    var popoverRef = React__default.default.useRef(null);
-    var racPopoverRef = React__default.default.useRef(null);
-    var uniqueId = React.useId();
-    var anchorName = "--trigger-".concat(uniqueId);
-    var state = select.useSelectState({
-      items: items
-    });
-    var handleOnSelectionChange = React__default.default.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 = React.useMemo(function () {
-      if (!React.isValidElement(children)) return null;
-      var selectedKeys = state.selectedKey ? new Set([state.selectedKey]) : new Set();
-      return React.cloneElement(children, {
-        selectionMode: 'single',
-        selectedKeys: selectedKeys,
-        onSelectionChange: handleOnSelectionChange,
-        autoFocus: 'first'
-      });
-    }, [children, handleOnSelectionChange, state.selectedKey]);
-    return React__default.default.createElement(SingleSelectContext.SingleSelectContext.Provider, {
-      value: {
-        isOpen: state.isOpen,
-        setOpen: state.setOpen,
-        selectedKey: state.selectedKey,
-        items: items,
-        anchorName: anchorName
-      }
-    }, React__default.default.createElement(reactAriaComponents.Select
-    // TODO: allow user to pass in label
-    , tslib.__assign({
-      "aria-label": 'single-select',
-      onSelectionChange: function (key) {
-        return handleOnSelectionChange(key != null ? new Set([key]) : new Set());
-      },
-      placeholder: ""
-    }, restProps), React__default.default.createElement(Trigger.Trigger, {
-      buttonRef: buttonRef
-    }), state.isOpen && React__default.default.createElement(Popover.Popover, {
-      buttonRef: buttonRef,
-      popoverRef: popoverRef,
-      racPopoverRef: racPopoverRef
-    }, injectedChildren)));
-  };
-  SingleSelect.displayName = 'SingleSelect';
-  SingleSelect.List = List.List;
-  SingleSelect.ListItem = ListItem.ListItem;
-  SingleSelect.ListSection = ListSection.ListSection;
-  return SingleSelect;
-}();
+var SingleSelect = function (props) {
+  var isComboBox = props.isComboBox,
+    children = props.children,
+    rest = tslib.__rest(props, ["isComboBox", "children"]);
+  if (isComboBox) {
+    return React__default.default.createElement(ComboBox.ComboBox, tslib.__assign({}, rest), children);
+  }
+  return React__default.default.createElement(Select.Select, tslib.__assign({}, rest), children);
+};
+var Item = React__default.default.forwardRef(function (props, ref) {
+  // @ts-expect-error: StatelyItem doesn't know about our internal item props
+  return React__default.default.createElement(collections.Item, tslib.__assign({}, props, {
+    ref: ref
+  }));
+});
+// @ts-expect-error: doesn't know that the Item can have this static property
+Item.getCollectionNode = collections.Item.getCollectionNode;
+Item.displayName = 'SingleSelectItem';
+SingleSelect.Item = Item;
+SingleSelect.Section = collections.Section;
+exports.Item = Item;
 exports.SingleSelect = SingleSelect;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ComboBox/ComboBox.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var combobox = require('@react-stately/combobox');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
+var FieldMessage = require('../../../../FieldMessage/FieldMessage.cjs');
+var Label = require('../../../../Label/Label.cjs');
+var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var ComboBoxTrigger = require('../ComboBoxTrigger/ComboBoxTrigger.cjs');
+var List = require('../List/List.cjs');
+var Popover = require('../Popover/Popover.cjs');
+var ComboBox_module = require('./ComboBox.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+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 = reactAria.useFilter({
+    sensitivity: 'base'
+  }).contains;
+  var state = combobox.useComboBoxState(tslib.__assign(tslib.__assign({}, props), {
+    items: items,
+    defaultFilter: contains,
+    children: children,
+    menuTrigger: 'focus'
+  }));
+  var inputRef = React.useRef(null);
+  var popoverRef = React.useRef(null);
+  var listBoxRef = React.useRef(null);
+  var buttonRef = React.useRef(null);
+  var clearButtonRef = React.useRef(null);
+  var triggerWrapperRef = React.useRef(null);
+  var _e = reactAria.useComboBox(tslib.__assign(tslib.__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 = React.useId();
+  var anchorName = "--trigger-".concat(uniqueId);
+  return React__default.default.createElement(SingleSelectContext.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
+    }
+  }, React__default.default.createElement("div", {
+    className: labelPosition === 'top' ? ComboBox_module.topLabel : ComboBox_module.sideLabel
+  }, !labelHidden && React__default.default.createElement("div", {
+    className: classnames__default.default(ComboBox_module.label, (_a = {}, _a[ComboBox_module.labelTop] = labelPosition === 'top', _a))
+  }, React__default.default.createElement(Label.Label, tslib.__assign({}, labelProps), label)), React__default.default.createElement("div", {
+    className: ComboBox_module.comboBoxTrigger
+  }, React__default.default.createElement(ComboBoxTrigger.ComboBoxTrigger, {
+    inputProps: inputProps,
+    inputRef: inputRef,
+    buttonRef: buttonRef,
+    buttonProps: buttonProps,
+    clearButtonRef: clearButtonRef,
+    triggerWrapperRef: triggerWrapperRef
+  })), description && React__default.default.createElement("div", {
+    className: ComboBox_module.description
+  }, React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({
+    message: description
+  }, descriptionProps)))), React__default.default.createElement(Popover.Popover, {
+    state: state,
+    triggerRef: triggerWrapperRef,
+    popoverRef: popoverRef,
+    clearButtonRef: clearButtonRef
+  }, React__default.default.createElement(List.List, {
+    listBoxOptions: listBoxProps,
+    state: state,
+    listBoxRef: listBoxRef
+  })));
+};
+exports.ComboBox = ComboBox;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ComboBox/ComboBox.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+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"
+};
+module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.cjs

@@ -0,0 +1,112 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
+var Icon = require('../../../../Icon/Icon.cjs');
+var VisuallyHidden = require('../../../../VisuallyHidden/VisuallyHidden.cjs');
+var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var ComboBoxTrigger_module = require('./ComboBoxTrigger.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var ClearButton = function (_a) {
+  var _b;
+  var clearButtonRef = _a.clearButtonRef,
+    inputRef = _a.inputRef;
+  var _c = SingleSelectContext.useSingleSelectContext(),
+    state = _c.state,
+    isComboBox = _c.isComboBox,
+    fieldLabel = _c.fieldLabel;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var clearButtonAlt = formatMessage({
+    id: 'singleSelect.clearButtonAlt',
+    defaultMessage: 'Clear {field} selection',
+    description: 'Alt text for the clear selection button'
+  }, {
+    field: fieldLabel
+  });
+  var buttonProps = reactAria.useButton({
+    onPress: function () {
+      var _a;
+      if (isComboBox) {
+        state.setSelectedKey(null);
+      }
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, clearButtonRef).buttonProps;
+  return React__default.default.createElement("button", tslib.__assign({}, buttonProps, {
+    ref: clearButtonRef,
+    type: "button",
+    className: classnames__default.default(ComboBoxTrigger_module.clearButton, (_b = {}, _b[ComboBoxTrigger_module.hidden] = !state.selectedKey, _b)),
+    tabIndex: 0
+  }), React__default.default.createElement(Icon.Icon, {
+    name: "cancel",
+    isPresentational: true,
+    isFilled: true
+  }), React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, clearButtonAlt));
+};
+var ChevronButton = function (props) {
+  var _a = SingleSelectContext.useSingleSelectContext(),
+    state = _a.state,
+    fieldLabel = _a.fieldLabel;
+  var formatMessage = i18nReactIntl.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 = reactAria.useButton(tslib.__assign(tslib.__assign({}, props), {
+    'aria-label': String(chevronButton),
+    'aria-labelledby': undefined
+  }), props.buttonRef).buttonProps;
+  return React__default.default.createElement("button", tslib.__assign({
+    type: "button"
+  }, buttonProps, {
+    ref: props.buttonRef,
+    className: ComboBoxTrigger_module.chevronButton,
+    tabIndex: -1
+  }), React__default.default.createElement(Icon.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 = SingleSelectContext.useSingleSelectContext(),
+    anchorName = _d.anchorName,
+    isDisabled = _d.isDisabled,
+    isReadOnly = _d.isReadOnly,
+    secondary = _d.secondary,
+    size = _d.size;
+  return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
+    style: {
+      '--anchor-name': anchorName
+    },
+    ref: triggerWrapperRef,
+    className: classnames__default.default(ComboBoxTrigger_module.trigger, (_b = {}, _b[ComboBoxTrigger_module.disabled] = isDisabled, _b[ComboBoxTrigger_module.readOnly] = isReadOnly, _b[ComboBoxTrigger_module.secondary] = secondary, _b[ComboBoxTrigger_module.small] = size === 'small', _b[ComboBoxTrigger_module.large] = size === 'large', _b))
+  }, React__default.default.createElement("input", tslib.__assign({}, inputProps, {
+    ref: inputRef,
+    className: classnames__default.default(ComboBoxTrigger_module.input, (_c = {}, _c[ComboBoxTrigger_module.smallText] = size === 'small', _c))
+  })), !isDisabled && !isReadOnly && React__default.default.createElement(ClearButton, {
+    clearButtonRef: clearButtonRef,
+    inputRef: inputRef
+  }), !isReadOnly && React__default.default.createElement(ChevronButton, tslib.__assign({}, buttonProps, {
+    buttonRef: buttonRef
+  }))));
+};
+exports.ComboBoxTrigger = ComboBoxTrigger;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/ComboBoxTrigger/ComboBoxTrigger.module.css.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+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"
+};
+module.exports = styles;