@snack-uikit/list 0.18.0 → 0.18.1-preview-ba12ca94.0

package/dist/cjs/components/Items/AccordionItem/AccordionItem.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccordionItem = AccordionItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@snack-uikit/icons");
+const helperComponents_1 = require("../../../helperComponents");
+const contexts_1 = require("../../Lists/contexts");
+const BaseItem_1 = require("../BaseItem");
+const hooks_1 = require("../hooks");
+function AccordionItem(_a) {
+  var {
+      id,
+      disabled,
+      allChildIds,
+      items
+    } = _a,
+    option = __rest(_a, ["id", "disabled", "allChildIds", "items"]);
+  const {
+    level = 1
+  } = (0, contexts_1.useCollapseLevelContext)();
+  const {
+    openCollapseItems = [],
+    toggleOpenCollapseItem
+  } = (0, contexts_1.useCollapseContext)();
+  const {
+    indeterminate,
+    checked,
+    handleOnSelect
+  } = (0, hooks_1.useGroupItemSelection)({
+    items,
+    id,
+    disabled,
+    allChildIds
+  });
+  const isOpen = Boolean(openCollapseItems.includes(id !== null && id !== void 0 ? id : ''));
+  const handleKeyDown = (0, react_1.useCallback)(() => {
+    toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
+  }, [id, toggleOpenCollapseItem]);
+  const itemsJSX = (0, hooks_1.useRenderItems)(items);
+  const handleItemClick = e => {
+    var _a;
+    toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
+    (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, e);
+  };
+  return (0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockPrivate, {
+    header: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, Object.assign({}, option, {
+      id: id,
+      disabled: disabled,
+      expandIcon: isOpen ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {}),
+      onClick: handleItemClick,
+      isParentNode: true,
+      onOpenNestedList: handleKeyDown,
+      checked: checked,
+      indeterminate: indeterminate,
+      onSelect: !disabled ? handleOnSelect : undefined
+    })),
+    expanded: isOpen,
+    "data-test-id": `list__accordion-item-${id}`,
+    children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseLevelContext.Provider, {
+      value: {
+        level: level + 1
+      },
+      children: itemsJSX
+    })
+  });
+}

package/dist/cjs/components/Items/AccordionItem/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./AccordionItem"), exports);

package/dist/cjs/components/Items/BaseItem/BaseItem.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseItem = BaseItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const toggles_1 = require("@snack-uikit/toggles");
+const utils_1 = require("@snack-uikit/utils");
+const helperComponents_1 = require("../../../helperComponents");
+const contexts_1 = require("../../Lists/contexts");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const utils_2 = require("../utils");
+const constants_1 = require("./constants");
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+function BaseItem(_a) {
+  var _b;
+  var {
+      beforeContent,
+      afterContent,
+      content,
+      onClick,
+      onMouseDown,
+      id,
+      expandIcon,
+      disabled,
+      open,
+      itemRef,
+      switch: switchProp,
+      onKeyDown,
+      onFocus,
+      indeterminate,
+      checked: checkedProp,
+      onSelect,
+      onOpenNestedList,
+      isParentNode,
+      className,
+      inactive,
+      itemWrapRender
+    } = _a,
+    rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
+  const interactive = !inactive;
+  const {
+    size = 's',
+    marker,
+    contentRender
+  } = (0, contexts_1.useNewListContext)();
+  const {
+    level = 0
+  } = (0, contexts_1.useCollapseLevelContext)();
+  const {
+    closeDroplist,
+    closeDroplistOnItemClick
+  } = (0, contexts_1.useOpenListContext)();
+  const {
+    value,
+    onChange,
+    mode,
+    isSelectionSingle,
+    isSelectionMultiple
+  } = (0, contexts_1.useSelectionContext)();
+  const isChecked = isSelectionSingle ? checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === id : checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : '');
+  const handleChange = () => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(id);
+  };
+  const handleItemMouseDown = e => {
+    if (disabled) return;
+    onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+  };
+  const handleItemFocus = e => {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    e.stopPropagation();
+  };
+  const handleCheckboxChange = () => {
+    if (isParentNode && onSelect) {
+      onSelect();
+    } else {
+      handleChange();
+    }
+  };
+  const handleItemClick = e => {
+    if (!disabled) {
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+      if (interactive) {
+        if (!isParentNode) {
+          handleChange();
+        }
+      }
+      if (!isSelectionMultiple && closeDroplistOnItemClick) {
+        closeDroplist();
+      }
+    }
+  };
+  const handleItemKeyDown = e => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    if (e.key === 'ArrowRight' && onOpenNestedList) {
+      onOpenNestedList(e);
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    if (e.code === 'Space' || e.key === 'Enter' || e.key === ' ') {
+      if (isSelectionMultiple && isParentNode && onSelect) {
+        onSelect();
+      }
+      !isParentNode && handleChange();
+      // TODO: should pass an event here?
+      !isParentNode && (handleItemClick === null || handleItemClick === void 0 ? void 0 : handleItemClick(e));
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  const handleCheckboxClick = e => {
+    if (isParentNode) {
+      e.stopPropagation();
+    }
+  };
+  const props = (0, utils_1.extractSupportProps)(rest);
+  const itemJSX = (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, styles_module_scss_2.default.innerWrapper, className),
+    "data-inactive": inactive || undefined,
+    "data-disabled": disabled || undefined,
+    "data-variant": mode || undefined,
+    "data-checked": isParentNode && (indeterminate || isChecked) || isChecked && !switchProp || undefined,
+    children: (0, jsx_runtime_1.jsxs)("li", {
+      "data-type": 'outside',
+      role: 'menuitem',
+      "data-test-id": props['data-test-id'] || 'list__base-item_' + id,
+      "data-checked": isParentNode && (indeterminate || isChecked) || isChecked && !switchProp || undefined,
+      ref: itemRef,
+      className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.droplistItem),
+      "data-size": size,
+      onClick: handleItemClick,
+      onMouseDown: handleItemMouseDown,
+      tabIndex: -1,
+      "data-non-pointer": inactive && !onClick,
+      "data-variant": mode || undefined,
+      "data-open": open || undefined,
+      onKeyDown: handleItemKeyDown,
+      onFocus: handleItemFocus,
+      style: {
+        '--level': level
+      },
+      children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_2.default.markerContainer,
+        "data-test-id": 'list__base-item-marker'
+      }), !switchProp && isSelectionMultiple && interactive && (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_2.default.checkbox,
+        children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {
+          size: constants_1.CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'],
+          disabled: disabled,
+          tabIndex: -1,
+          onChange: isParentNode ? handleCheckboxChange : undefined,
+          checked: isChecked,
+          "data-test-id": 'list__base-item-checkbox',
+          onClick: handleCheckboxClick,
+          indeterminate: indeterminate
+        })
+      }), beforeContent && (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_2.default.beforeContent,
+        children: beforeContent
+      }), content && (0, utils_2.isContentItem)(content) ? (_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({
+        id,
+        content,
+        disabled
+      })) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(helperComponents_1.ItemContent, Object.assign({
+        disabled: disabled
+      }, content)) : (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_2.default.content,
+        children: [" ", content, " "]
+      }), afterContent, switchProp && interactive && (0, jsx_runtime_1.jsx)(toggles_1.Switch, {
+        disabled: disabled,
+        checked: isChecked,
+        "data-test-id": 'list__base-item-switch'
+      }), !switchProp && expandIcon && (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_2.default.expandableIcon,
+        children: expandIcon
+      })]
+    })
+  });
+  if (!itemWrapRender) {
+    return itemJSX;
+  }
+  return itemWrapRender(itemJSX);
+}

package/dist/cjs/components/Items/BaseItem/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHECKBOX_SIZE_MAP = void 0;
+exports.CHECKBOX_SIZE_MAP = {
+  s: 's',
+  m: 's',
+  l: 'm'
+};

package/dist/cjs/components/Items/BaseItem/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./BaseItem"), exports);

package/dist/cjs/components/Items/GroupItem/GroupItem.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupItem = GroupItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const helperComponents_1 = require("../../../helperComponents");
+const hooks_1 = require("../hooks");
+function GroupItem(_ref) {
+  let {
+    label,
+    truncate,
+    divider,
+    items,
+    mode
+  } = _ref;
+  const itemsJSX = (0, hooks_1.useRenderItems)(items);
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {
+      label: label,
+      truncate: truncate,
+      divider: divider,
+      mode: mode
+    }), itemsJSX]
+  });
+}

package/dist/cjs/components/Items/GroupItem/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./GroupItem"), exports);

package/dist/cjs/components/Items/GroupSelectItem/GroupSelectItem.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupSelectItem = GroupSelectItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const helperComponents_1 = require("../../../helperComponents");
+const hooks_1 = require("../hooks");
+function GroupSelectItem(_ref) {
+  let {
+    label,
+    truncate,
+    divider,
+    items,
+    mode,
+    id,
+    itemRef,
+    allChildIds
+  } = _ref;
+  const {
+    indeterminate,
+    checked,
+    handleOnSelect
+  } = (0, hooks_1.useGroupItemSelection)({
+    items,
+    id,
+    disabled: false,
+    allChildIds
+  });
+  const itemsJSX = (0, hooks_1.useRenderItems)(items);
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {
+      label: label,
+      truncate: truncate,
+      divider: divider,
+      mode: mode,
+      selectButton: {
+        indeterminate,
+        checked,
+        itemRef,
+        onClick: handleOnSelect
+      }
+    }), itemsJSX]
+  });
+}

package/dist/cjs/components/Items/GroupSelectItem/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./GroupSelectItem"), exports);

package/dist/cjs/components/Items/NextListItem/NextListItem.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NextListItem = NextListItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const icons_1 = require("@snack-uikit/icons");
+const contexts_1 = require("../../Lists/contexts");
+const ListPrivate_1 = require("../../Lists/ListPrivate");
+const BaseItem_1 = require("../BaseItem");
+const hooks_1 = require("../hooks");
+const utils_1 = require("../utils");
+const constants_1 = require("./constants");
+function NextListItem(_a) {
+  var {
+      items,
+      placement = 'right-start',
+      id,
+      scroll,
+      scrollRef,
+      disabled,
+      onSublistOpenChanged,
+      allChildIds,
+      loading = false,
+      focusId = id,
+      untouchableScrollbars = false
+    } = _a,
+    option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId", "untouchableScrollbars"]);
+  const {
+    flattenItems,
+    focusFlattenItems
+  } = (0, contexts_1.useNewListContext)();
+  const {
+    isSelectionMultiple
+  } = (0, contexts_1.useSelectionContext)();
+  const {
+    openCollapseItems = []
+  } = (0, contexts_1.useCollapseContext)();
+  const item = flattenItems[id];
+  const {
+    ids,
+    expandedIds
+  } = (0, react_1.useMemo)(() => {
+    const {
+      ids,
+      expandedIds
+    } = (0, utils_1.extractActiveItems)({
+      focusCloseChildIds: items,
+      focusFlattenItems,
+      openCollapseItems,
+      isSelectionMultiple
+    });
+    return {
+      ids,
+      expandedIds: expandedIds.concat([id])
+    };
+  }, [focusFlattenItems, id, isSelectionMultiple, items, openCollapseItems]);
+  const {
+    handleListKeyDownFactory,
+    activeItemId,
+    forceUpdateActiveItemId
+  } = (0, contexts_1.useFocusListContext)();
+  const [open, setOpen] = (0, react_1.useState)();
+  const handleListKeyDown = (0, react_1.useCallback)(e => {
+    handleListKeyDownFactory(ids, expandedIds)(e);
+    if (e.key === 'ArrowLeft') {
+      forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(focusId);
+      setOpen(false);
+      e.stopPropagation();
+      return;
+    }
+  }, [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId]);
+  const {
+    indeterminate,
+    checked,
+    handleOnSelect
+  } = (0, hooks_1.useGroupItemSelection)({
+    items: (0, utils_1.isNextListItem)(item) ? item.items : [],
+    id,
+    disabled,
+    allChildIds
+  });
+  const handleOutsideClick = (0, react_1.useCallback)(() => {
+    forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
+    setOpen(false);
+    return true;
+  }, [forceUpdateActiveItemId]);
+  const isOpen = (0, react_1.useMemo)(() => Boolean(!disabled && activeItemId && focusFlattenItems[focusId].allChildIds.includes(activeItemId)), [activeItemId, disabled, focusFlattenItems, focusId]);
+  (0, react_1.useEffect)(() => {
+    setOpen(open => open && isOpen);
+  }, [id, isOpen]);
+  const listRef = (0, react_1.useRef)(null);
+  return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+    outsideClick: handleOutsideClick,
+    fallbackPlacements: constants_1.FALLBACK_PLACEMENTS,
+    content: (0, jsx_runtime_1.jsx)(ListPrivate_1.ListPrivate, {
+      onKeyDown: handleListKeyDown,
+      items: items,
+      nested: true,
+      scroll: scroll,
+      tabIndex: 0,
+      ref: listRef,
+      onFocus: e => {
+        e.stopPropagation();
+        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
+      },
+      scrollRef: scrollRef,
+      limitedScrollHeight: true,
+      untouchableScrollbars: untouchableScrollbars,
+      loading: loading
+    }),
+    trigger: 'hover',
+    open: isOpen || open,
+    onOpenChange: value => {
+      setOpen(value);
+      onSublistOpenChanged === null || onSublistOpenChanged === void 0 ? void 0 : onSublistOpenChanged(value, id);
+    },
+    placement: placement,
+    widthStrategy: 'auto',
+    children: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, Object.assign({}, option, {
+      disabled: disabled,
+      open: open,
+      expandIcon: (0, jsx_runtime_1.jsx)(icons_1.ChevronRightSVG, {}),
+      id: id,
+      isParentNode: true,
+      indeterminate: indeterminate,
+      checked: checked,
+      onOpenNestedList: () => {
+        setOpen(true);
+        setTimeout(() => {
+          var _a;
+          (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+      },
+      onSelect: handleOnSelect
+    }))
+  });
+}

package/dist/cjs/components/Items/NextListItem/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FALLBACK_PLACEMENTS = void 0;
+exports.FALLBACK_PLACEMENTS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'bottom', 'top'];

package/dist/cjs/components/Items/NextListItem/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./NextListItem"), exports);