@kaizen/components 0.0.0-canary-v2-20250901045936 → 0.0.0-canary-debug-tab-20251015223744

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;

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

@@ -2,8 +2,9 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var classnames = require('classnames');
-var reactAriaComponents = require('react-aria-components');
+var reactAria = require('react-aria');
+var ListItem = require('../ListItem/ListItem.cjs');
+var ListSection = require('../ListSection/ListSection.cjs');
 var List_module = require('./List.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -11,14 +12,38 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var List = function (_a) {
-  var children = _a.children,
-    className = _a.className,
-    props = tslib.__rest(_a, ["children", "className"]);
-  return React__default.default.createElement(reactAriaComponents.ListBox, tslib.__assign({
-    className: classnames__default.default(List_module.list, className)
-  }, props), children);
+  var state = _a.state,
+    listBoxOptions = _a.listBoxOptions,
+    listBoxRef = _a.listBoxRef;
+  var listBoxProps = reactAria.useListBox(tslib.__assign(tslib.__assign({}, listBoxOptions), {
+    autoFocus: 'first'
+  }), state, listBoxRef).listBoxProps;
+  var renderNode = function (node) {
+    if (node.type === 'section') {
+      return node.rendered ? React__default.default.createElement(ListSection.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 React__default.default.createElement(ListItem.ListItem, {
+        key: String(node.key),
+        item: node,
+        state: state,
+        selectedIcon: selectedIcon,
+        selectedPosition: selectedPosition,
+        className: className
+      });
+    }
+  };
+  return React__default.default.createElement("ul", tslib.__assign({}, listBoxProps, {
+    ref: listBoxRef,
+    className: List_module.list
+  }), Array.from(state.collection).map(renderNode));
 };
-List.displayName = 'SingleSelect.List';
 exports.List = List;

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

@@ -3,7 +3,11 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var reactAriaComponents = require('react-aria-components');
+var reactAria = require('react-aria');
+var Icon = require('../../../../Icon/Icon.cjs');
+var Radio = require('../../../../Radio/Radio/Radio.cjs');
+require('../../../../Radio/RadioField/RadioField.cjs');
+require('../../../../Radio/RadioGroup/RadioGroup.cjs');
 var ListItem_module = require('./ListItem.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -13,12 +17,61 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var ListItem = function (_a) {
-  var children = _a.children,
-    className = _a.className,
-    props = tslib.__rest(_a, ["children", "className"]);
-  return React__default.default.createElement(reactAriaComponents.ListBoxItem, tslib.__assign({
-    className: classnames__default.default(ListItem_module.listItem, className)
-  }, props), children);
+  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__default.default.useRef(null);
+  var _e = reactAria.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 React__default.default.createElement("div", {
+          className: ListItem_module.selectedIconWrapper
+        }, React__default.default.createElement(Icon.Icon, {
+          name: "check",
+          isPresentational: true,
+          className: ListItem_module.iconChecked
+        }));
+      }
+      return isStart ? React__default.default.createElement("div", {
+        className: ListItem_module.emptySpacer
+      }) : null;
+    }
+    if (isRadio) {
+      return React__default.default.createElement("div", {
+        className: ListItem_module.selectedIconWrapper
+      }, React__default.default.createElement(Radio.Radio, {
+        id: item.textValue,
+        name: item.textValue,
+        selectedStatus: isSelected
+      }));
+    }
+    return null;
+  };
+  return React__default.default.createElement("li", tslib.__assign({
+    key: item.key
+  }, optionProps, {
+    ref: ref,
+    className: classnames__default.default(ListItem_module.listItem, (_b = {}, _b[ListItem_module.focused] = isFocused, _b[ListItem_module.disabled] = isDisabled, _b[ListItem_module.selected] = isSelected, _b[ListItem_module.selectedStartPosition] = isStart, _b))
+  }), isStart && renderSelectionIcon(), typeof item.rendered === 'string' ? React__default.default.createElement("span", {
+    className: classnames__default.default(ListItem_module.itemText, className)
+  }, item.rendered) : React__default.default.createElement("span", {
+    className: classnames__default.default(ListItem_module.itemContent, className)
+  }, item.rendered), isEnd && renderSelectionIcon());
 };
-ListItem.displayName = 'SingleSelect.ListItem';
 exports.ListItem = ListItem;

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

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

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

@@ -3,7 +3,9 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var reactAriaComponents = require('react-aria-components');
+var reactAria = require('react-aria');
+var Divider = require('../../../../Divider/Divider.cjs');
+var ListItem = require('../ListItem/ListItem.cjs');
 var ListSection_module = require('./ListSection.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -13,13 +15,40 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var ListSection = function (_a) {
-  var name = _a.name,
-    className = _a.className,
-    children = _a.children,
-    props = tslib.__rest(_a, ["name", "className", "children"]);
-  return React__default.default.createElement(reactAriaComponents.ListBoxSection, tslib.__assign({}, props), React__default.default.createElement(reactAriaComponents.Header, {
-    className: classnames__default.default(ListSection_module.listSectionHeader, className)
-  }, name), children);
+  var _b;
+  var section = _a.section,
+    state = _a.state;
+  var _c = reactAria.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 React__default.default.createElement(React__default.default.Fragment, {
+    key: section.key
+  }, !firstSectionHeader && React__default.default.createElement("li", {
+    role: "presentation",
+    "aria-hidden": true
+  }), !firstSectionHeader && React__default.default.createElement(Divider.Divider, {
+    variant: "content"
+  }), React__default.default.createElement("li", tslib.__assign({}, itemProps, {
+    className: classnames__default.default(ListSection_module.sectionWrapper, (_b = {}, _b[ListSection_module.firstSectionHeader] = firstSectionHeader, _b))
+  }), section.rendered && React__default.default.createElement("span", tslib.__assign({}, headingProps, {
+    role: "presentation",
+    "aria-hidden": true,
+    className: ListSection_module.listSectionHeader
+  }), section.rendered), React__default.default.createElement("ul", tslib.__assign({
+    key: "".concat(section.key, "-group-contents")
+  }, groupProps, {
+    className: ListSection_module.listSectionGroup
+  }), Array.from(section.childNodes).map(function (node) {
+    return React__default.default.createElement(ListItem.ListItem, {
+      key: node.key,
+      item: node,
+      state: state
+    });
+  }))));
 };
-ListSection.displayName = 'SingleSelect.ListSection';
 exports.ListSection = ListSection;

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

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

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

@@ -1,8 +1,11 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
-var reactAriaComponents = require('react-aria-components');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
 var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var useSupportsAnchorPositioning = require('./utils/useSupportsAnchorPositioning.cjs');
 var usePositioningStyles = require('./utils/usePositioningStyles.cjs');
 var Popover_module = require('./Popover.module.css.cjs');
 function _interopDefault(e) {
@@ -11,44 +14,71 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var Popover = function (_a) {
-  var buttonRef = _a.buttonRef,
+  var _b;
+  var _c;
+  var state = _a.state,
     popoverRef = _a.popoverRef,
-    racPopoverRef = _a.racPopoverRef,
-    children = _a.children;
-  var _b = SingleSelectContext.useSingleSelectContext(),
-    isOpen = _b.isOpen,
-    setOpen = _b.setOpen,
-    anchorName = _b.anchorName;
-  var _c = usePositioningStyles.usePositioningStyles(buttonRef, popoverRef, anchorName),
-    popoverStyle = _c.popoverStyle,
-    isPositioned = _c.isPositioned;
-  var shouldShowPopover = React.useMemo(function () {
-    return isOpen && isPositioned;
-  }, [isOpen, isPositioned]);
+    children = _a.children,
+    clearButtonRef = _a.clearButtonRef,
+    restProps = tslib.__rest(_a, ["state", "popoverRef", "children", "clearButtonRef"]);
+  var anchorName = SingleSelectContext.useSingleSelectContext().anchorName;
+  var manualPopoverRef = React__default.default.useRef(null);
+  var popoverProps = reactAria.usePopover(tslib.__assign(tslib.__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.useSupportsAnchorPositioning();
+  var _d = usePositioningStyles.usePositioningStyles(restProps.triggerRef, manualPopoverRef, anchorName),
+    popoverStyle = _d.popoverStyle,
+    isPositioned = _d.isPositioned,
+    updatePosition = _d.updatePosition;
   React.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) {
+    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();
-    } else {
+    }
+    return function () {
+      if (popover === null || popover === void 0 ? void 0 : popover.hidePopover) {
+        popover.hidePopover();
+      }
+    };
+  }, [state.isOpen, supportsAnchorPositioning, updatePosition, isPositioned]);
+  React.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();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldShowPopover]);
-  return React__default.default.createElement(reactAriaComponents.Popover, {
-    shouldUpdatePosition: false,
-    trigger: "manual",
-    isOpen: isOpen,
-    onOpenChange: setOpen,
-    ref: racPopoverRef
-  }, React__default.default.createElement("div", {
+  }, [state.isOpen, supportsAnchorPositioning]);
+  var manualPopover = React__default.default.createElement("div", {
     // @ts-expect-error - popover attribute is not included in current ts version, ignore type error
     popover: "manual",
-    ref: popoverRef,
+    ref: manualPopoverRef,
     className: Popover_module.popover,
     style: popoverStyle
-  }, children));
+  }, children);
+  return React__default.default.createElement(React__default.default.Fragment, null, state.isOpen && React__default.default.createElement(reactAria.Overlay, null, React__default.default.createElement("div", tslib.__assign({
+    id: "popover-id"
+  }, popoverProps, {
+    ref: popoverRef,
+    style: tslib.__assign(tslib.__assign({}, popoverProps.style), !supportsAnchorPositioning && {
+      width: (_c = restProps.triggerRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width
+    }),
+    className: classnames__default.default(Popover_module.popover, (_b = {}, _b[Popover_module.offsetSpacing] = !supportsAnchorPositioning, _b))
+  }), React__default.default.createElement(reactAria.DismissButton, {
+    onDismiss: state.close
+  }), supportsAnchorPositioning ? manualPopover : children, React__default.default.createElement(reactAria.DismissButton, {
+    onDismiss: state.close
+  }))));
 };
-Popover.displayName = 'SingleSelect.Popover';
 exports.Popover = Popover;

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var styles = {
-  "popover": "Popover-module_popover__BjY2S"
+  "popover": "Popover-module_popover__BjY2S",
+  "offsetSpacing": "Popover-module_offsetSpacing__NdPBV"
 };
 module.exports = styles;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePopoverPositioning.cjs

@@ -88,7 +88,8 @@ function usePopoverPositioning(_a) {
     };
   }, [updatePosition, triggerRef]);
   return tslib.__assign(tslib.__assign({}, position), {
-    isPositioned: isPositioned
+    isPositioned: isPositioned,
+    updatePosition: updatePosition
   });
 }
 exports.usePopoverPositioning = usePopoverPositioning;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Popover/utils/usePositioningStyles.cjs

@@ -46,7 +46,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 = React.useMemo(function () {
     return {
       top: top,
@@ -63,7 +64,8 @@ var usePositioningStyles = function (buttonRef, popoverRef, anchorName) {
   }, [hasAnchorSupport, anchorName, positionData]);
   return {
     popoverStyle: popoverStyle,
-    isPositioned: isPositioned
+    isPositioned: isPositioned,
+    updatePosition: updatePosition
   };
 };
 exports.usePositioningStyles = usePositioningStyles;

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

@@ -0,0 +1,87 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var select = require('@react-stately/select');
+var classnames = require('classnames');
+var reactAria = require('react-aria');
+var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
+var List = require('../List/List.cjs');
+var Popover = require('../Popover/Popover.cjs');
+var SelectTrigger = require('../SelectTrigger/SelectTrigger.cjs');
+var Select_module = require('./Select.module.css.cjs');
+var Label = require('../../../../Label/Label.cjs');
+var FieldMessage = require('../../../../FieldMessage/FieldMessage.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+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 = select.useSelectState(tslib.__assign(tslib.__assign({}, props), {
+    items: props.items,
+    children: props.children
+  }));
+  var popoverRef = React.useRef(null);
+  var listBoxRef = React.useRef(null);
+  var triggerRef = React.useRef(null);
+  var _e = reactAria.useSelect(tslib.__assign(tslib.__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 = React.useId();
+  var anchorName = "--trigger-".concat(uniqueId);
+  return React__default.default.createElement(SingleSelectContext.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
+    }
+  }, React__default.default.createElement("div", {
+    className: labelPosition === 'top' ? Select_module.topLabel : Select_module.sideLabel
+  }, !labelHidden && React__default.default.createElement("div", {
+    className: classnames__default.default(Select_module.label, (_a = {}, _a[Select_module.labelTop] = labelPosition === 'top', _a))
+  }, React__default.default.createElement(Label.Label, tslib.__assign({}, labelProps), label)), React__default.default.createElement("div", {
+    className: Select_module.selectTrigger
+  }, React__default.default.createElement(SelectTrigger.SelectTrigger, {
+    triggerProps: triggerProps,
+    valueProps: valueProps,
+    buttonRef: triggerRef
+  })), description && React__default.default.createElement("div", {
+    className: Select_module.description
+  }, React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({
+    message: description
+  }, descriptionProps)))), React__default.default.createElement(Popover.Popover, {
+    state: state,
+    triggerRef: triggerRef,
+    popoverRef: popoverRef
+  }, React__default.default.createElement(List.List, {
+    listBoxOptions: menuProps,
+    state: state,
+    listBoxRef: listBoxRef
+  })));
+};
+exports.Select = Select;

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

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