@kaizen/components 2.0.0 → 2.0.2

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

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;