@snack-uikit/list 0.18.0 → 0.18.1-preview-71543426.0

package/dist/cjs/components/Lists/Droplist/DropList.js

@@ -0,0 +1,264 @@
+"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.Droplist = Droplist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const utils_1 = require("@snack-uikit/utils");
+const Items_1 = require("../../Items");
+const contexts_1 = require("../contexts");
+const hooks_1 = require("../hooks");
+const ListPrivate_1 = require("../ListPrivate");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const DEFAULT_FALLBACK_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
+function Droplist(_a) {
+  var {
+      items: itemsProp,
+      search,
+      pinBottom: pinBottomProp = [],
+      pinTop: pinTopProp = [],
+      footerActiveElementsRefs,
+      children,
+      trigger,
+      placement,
+      widthStrategy,
+      triggerElemRef: triggerElemRefProp,
+      open: openProp,
+      onOpenChange,
+      collapse = {},
+      triggerClassName,
+      selection,
+      contentRender,
+      size = 's',
+      marker = true,
+      closeDroplistOnItemClick = false,
+      className,
+      listRef: listRefProp,
+      untouchableScrollbars = false
+    } = _a,
+    props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef", "untouchableScrollbars"]);
+  const hasSearch = (0, react_1.useMemo)(() => Boolean(search), [search]);
+  const [openCollapseItems = [], setOpenCollapsedItems] = (0, utils_1.useValueControl)(collapse);
+  const toggleOpenCollapseItem = (0, react_1.useCallback)(id => setOpenCollapsedItems(items => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
+  const [open = false, setOpen] = (0, utils_1.useValueControl)({
+    value: openProp,
+    defaultValue: false,
+    onChange: onOpenChange
+  });
+  const {
+    searchItem,
+    footerItems
+  } = (0, Items_1.useCreateBaseItems)({
+    footerActiveElementsRefs
+  });
+  /**
+   * Объект с пропсами всех вложенных айтемов; ключ id
+   */
+  const _b = (0, react_1.useMemo)(() => {
+      const pinTop = (0, Items_1.kindFlattenItems)({
+        items: pinTopProp,
+        prefix: '~pinTop',
+        parentId: '~main'
+      });
+      const items = (0, Items_1.kindFlattenItems)({
+        items: itemsProp,
+        prefix: '~main',
+        parentId: '~main'
+      });
+      const pinBottom = (0, Items_1.kindFlattenItems)({
+        items: pinBottomProp,
+        prefix: '~pinBottom',
+        parentId: '~main'
+      });
+      const flattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.flattenItems), pinBottom.flattenItems), items.flattenItems);
+      const focusFlattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.focusFlattenItems), pinBottom.focusFlattenItems), items.focusFlattenItems);
+      [...footerItems, searchItem].forEach(item => {
+        flattenItems[item.id] = item;
+        focusFlattenItems[item.id] = Object.assign(Object.assign({}, item), {
+          originalId: item.id,
+          items: [],
+          key: item.id,
+          allChildIds: []
+        });
+      });
+      return {
+        items,
+        pinTop,
+        pinBottom,
+        flattenItems,
+        focusFlattenItems
+      };
+    }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]),
+    {
+      flattenItems,
+      focusFlattenItems
+    } = _b,
+    memorizedItems = __rest(_b, ["flattenItems", "focusFlattenItems"]);
+  const {
+    ids,
+    expandedIds
+  } = (0, react_1.useMemo)(() => {
+    const {
+      pinTop,
+      items,
+      pinBottom
+    } = memorizedItems;
+    let ids = [];
+    let expandedIds = [];
+    if (hasSearch) {
+      ids.push(searchItem.id);
+    }
+    [pinTop, items, pinBottom].forEach(_ref => {
+      let {
+        focusFlattenItems,
+        focusCloseChildIds
+      } = _ref;
+      const activeItems = (0, Items_1.extractActiveItems)({
+        focusFlattenItems,
+        focusCloseChildIds,
+        openCollapseItems,
+        isSelectionMultiple: (selection === null || selection === void 0 ? void 0 : selection.mode) === 'multiple'
+      });
+      ids = ids.concat(activeItems.ids);
+      expandedIds = expandedIds.concat(activeItems.expandedIds);
+    });
+    footerItems.forEach(footerItem => {
+      ids.push(footerItem.id);
+    });
+    return {
+      ids,
+      expandedIds
+    };
+  }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, selection === null || selection === void 0 ? void 0 : selection.mode]);
+  const triggerElemRef = (0, react_1.useRef)(null);
+  const listRef = (0, react_1.useRef)(null);
+  const {
+    handleListKeyDownFactory,
+    resetActiveItemId,
+    activeItemId,
+    forceUpdateActiveItemId
+  } = (0, hooks_1.useNewKeyboardNavigation)({
+    mainRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef,
+    focusFlattenItems
+  });
+  const handleListKeyDown = (0, react_1.useCallback)(e => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
+  const handleOpenChange = (0, react_1.useCallback)(open => {
+    resetActiveItemId();
+    setOpen(open);
+  }, [resetActiveItemId, setOpen]);
+  const onKeyDown = (0, react_1.useCallback)((e, cb) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setOpen(true);
+      setTimeout(() => {
+        var _a;
+        resetActiveItemId();
+        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 0);
+    }
+    if (e.key === 'ArrowUp') {
+      setOpen(false);
+    }
+    cb === null || cb === void 0 ? void 0 : cb(e);
+  }, [resetActiveItemId, setOpen]);
+  const isValid = (0, react_1.useMemo)(() => (0, react_1.isValidElement)(children), [children]);
+  const triggerElem = (0, react_1.useMemo)(() => {
+    if ((0, react_1.isValidElement)(children)) {
+      const props = typeof children.props === 'object' ? children.props : {};
+      return (0, react_1.cloneElement)(children, Object.assign(Object.assign({}, props), {
+        onKeyDown: e => {
+          var _a;
+          onKeyDown(e, (_a = children.props) === null || _a === void 0 ? void 0 : _a.onKeyDown);
+        }
+      }));
+    }
+    if (typeof children === 'function') {
+      return children({
+        onKeyDown
+      });
+    }
+    return children;
+  }, [onKeyDown, children]);
+  return (0, jsx_runtime_1.jsx)(contexts_1.NewListContextProvider, {
+    flattenItems: flattenItems,
+    focusFlattenItems: focusFlattenItems,
+    contentRender: contentRender,
+    size: size,
+    marker: marker,
+    children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, Object.assign({}, selection, {
+      children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
+        value: {
+          openCollapseItems,
+          toggleOpenCollapseItem
+        },
+        children: (0, jsx_runtime_1.jsx)(contexts_1.FocusListContext.Provider, {
+          value: {
+            activeItemId,
+            handleListKeyDownFactory,
+            forceUpdateActiveItemId
+          },
+          children: (0, jsx_runtime_1.jsx)(contexts_1.OpenListContext.Provider, {
+            value: {
+              closeDroplistOnItemClick,
+              closeDroplist: () => {
+                var _a;
+                setOpen(false);
+                resetActiveItemId();
+                (_a = (triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef).current) === null || _a === void 0 ? void 0 : _a.focus();
+              }
+            },
+            children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+              content: (0, jsx_runtime_1.jsx)("div", {
+                className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className),
+                children: (0, jsx_runtime_1.jsx)(ListPrivate_1.ListPrivate, Object.assign({}, props, {
+                  items: memorizedItems.items.focusCloseChildIds,
+                  pinTop: memorizedItems.pinTop.focusCloseChildIds,
+                  pinBottom: memorizedItems.pinBottom.focusCloseChildIds,
+                  onKeyDown: handleListKeyDown,
+                  searchItem: searchItem,
+                  tabIndex: 0,
+                  ref: (0, merge_refs_1.default)(listRef, listRefProp),
+                  search: search,
+                  onFocus: e => {
+                    e.stopPropagation();
+                    forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
+                  },
+                  limitedScrollHeight: true,
+                  untouchableScrollbars: untouchableScrollbars
+                }))
+              }),
+              outsideClick: true,
+              triggerClassName: triggerClassName,
+              fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
+              trigger: trigger,
+              placement: placement,
+              widthStrategy: widthStrategy,
+              triggerRef: !triggerElemRefProp ? triggerElemRef : isValid && triggerElemRefProp || undefined,
+              open: open,
+              onOpenChange: handleOpenChange,
+              children: triggerElem
+            })
+          })
+        })
+      })
+    }))
+  });
+}

package/dist/cjs/components/Lists/Droplist/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("./DropList"), exports);

package/dist/cjs/components/Lists/List/List.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.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const helperComponents_1 = require("../../../helperComponents");
+const Items_1 = require("../../Items");
+const contexts_1 = require("../contexts");
+const hooks_1 = require("../hooks");
+const ListPrivate_1 = require("../ListPrivate");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+exports.List = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      items: itemsProp = [],
+      search,
+      pinBottom: pinBottomProp = [],
+      pinTop: pinTopProp = [],
+      footerActiveElementsRefs,
+      onKeyDown,
+      tabIndex = 0,
+      className,
+      collapse = {},
+      selection,
+      contentRender,
+      size = 's',
+      marker = true
+    } = _a,
+    props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse", "selection", "contentRender", "size", "marker"]);
+  const hasSearch = (0, react_1.useMemo)(() => Boolean(search), [search]);
+  const [openCollapseItems = [], setOpenCollapsedItems] = (0, utils_1.useValueControl)(collapse);
+  const toggleOpenCollapseItem = (0, react_1.useCallback)(id => setOpenCollapsedItems(items => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
+  const {
+    searchItem,
+    footerItems
+  } = (0, Items_1.useCreateBaseItems)({
+    footerActiveElementsRefs
+  });
+  /**
+   * Объект с пропсами всех вложенных айтемов; ключ id
+   */
+  const _b = (0, react_1.useMemo)(() => {
+      const pinTop = (0, Items_1.kindFlattenItems)({
+        items: pinTopProp,
+        prefix: '~pinTop',
+        parentId: '~main'
+      });
+      const items = (0, Items_1.kindFlattenItems)({
+        items: itemsProp,
+        prefix: '~main',
+        parentId: '~main'
+      });
+      const pinBottom = (0, Items_1.kindFlattenItems)({
+        items: pinBottomProp,
+        prefix: '~pinBottom',
+        parentId: '~main'
+      });
+      const flattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.flattenItems), pinBottom.flattenItems), items.flattenItems);
+      const focusFlattenItems = Object.assign(Object.assign(Object.assign({}, pinTop.focusFlattenItems), pinBottom.focusFlattenItems), items.focusFlattenItems);
+      [...footerItems, searchItem].forEach(item => {
+        flattenItems[item.id] = item;
+        focusFlattenItems[item.id] = Object.assign(Object.assign({}, item), {
+          originalId: item.id,
+          items: [],
+          key: item.id,
+          allChildIds: []
+        });
+      });
+      return {
+        items,
+        pinTop,
+        pinBottom,
+        flattenItems,
+        focusFlattenItems
+      };
+    }, [itemsProp, pinTopProp, pinBottomProp, searchItem, footerItems]),
+    {
+      flattenItems,
+      focusFlattenItems
+    } = _b,
+    memorizedItems = __rest(_b, ["flattenItems", "focusFlattenItems"]);
+  const {
+    ids,
+    expandedIds
+  } = (0, react_1.useMemo)(() => {
+    const {
+      pinTop,
+      items,
+      pinBottom
+    } = memorizedItems;
+    let ids = [];
+    let expandedIds = [];
+    if (hasSearch) {
+      ids.push(searchItem.id);
+    }
+    [pinTop, items, pinBottom].forEach(_ref => {
+      let {
+        focusFlattenItems,
+        focusCloseChildIds
+      } = _ref;
+      const activeItems = (0, Items_1.extractActiveItems)({
+        focusFlattenItems,
+        focusCloseChildIds,
+        openCollapseItems,
+        isSelectionMultiple: (selection === null || selection === void 0 ? void 0 : selection.mode) === 'multiple'
+      });
+      ids = ids.concat(activeItems.ids);
+      expandedIds = expandedIds.concat(activeItems.expandedIds);
+    });
+    footerItems.forEach(footerItem => {
+      ids.push(footerItem.id);
+    });
+    return {
+      ids,
+      expandedIds
+    };
+  }, [footerItems, hasSearch, memorizedItems, openCollapseItems, searchItem.id, selection === null || selection === void 0 ? void 0 : selection.mode]);
+  const listRef = (0, react_1.useRef)(null);
+  const btnRef = (0, react_1.useRef)(null);
+  const {
+    handleListKeyDownFactory,
+    activeItemId,
+    resetActiveItemId,
+    forceUpdateActiveItemId
+  } = (0, hooks_1.useNewKeyboardNavigation)({
+    mainRef: listRef,
+    btnRef,
+    focusFlattenItems
+  });
+  const handleListKeyDown = (0, react_1.useCallback)(e => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
+  const isActive = (0, utils_1.isBrowser)() && listRef.current === document.activeElement && activeItemId === undefined;
+  const mergedHandlerKeyDown = e => {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    handleListKeyDown === null || handleListKeyDown === void 0 ? void 0 : handleListKeyDown(e);
+  };
+  const handleOnFocus = () => {
+    resetActiveItemId();
+  };
+  return (0, jsx_runtime_1.jsx)(contexts_1.NewListContextProvider, {
+    flattenItems: flattenItems,
+    focusFlattenItems: focusFlattenItems,
+    contentRender: contentRender,
+    size: size,
+    marker: marker,
+    children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, Object.assign({}, selection, {
+      children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
+        value: {
+          openCollapseItems,
+          toggleOpenCollapseItem
+        },
+        children: (0, jsx_runtime_1.jsx)(contexts_1.FocusListContext.Provider, {
+          value: {
+            activeItemId,
+            handleListKeyDownFactory,
+            forceUpdateActiveItemId
+          },
+          children: (0, jsx_runtime_1.jsxs)("div", {
+            className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className),
+            "data-active": isActive || undefined,
+            children: [(0, jsx_runtime_1.jsx)(ListPrivate_1.ListPrivate, Object.assign({}, props, {
+              items: memorizedItems.items.focusCloseChildIds,
+              pinTop: memorizedItems.pinTop.focusCloseChildIds,
+              pinBottom: memorizedItems.pinBottom.focusCloseChildIds,
+              searchItem: searchItem,
+              ref: (0, merge_refs_1.default)(ref, listRef),
+              onFocus: handleOnFocus,
+              onKeyDown: mergedHandlerKeyDown,
+              tabIndex: tabIndex,
+              search: search,
+              nested: false
+            })), (0, jsx_runtime_1.jsx)(helperComponents_1.HiddenTabButton, {
+              ref: btnRef,
+              listRef: listRef,
+              tabIndex: tabIndex
+            })]
+          })
+        })
+      })
+    }))
+  });
+});

package/dist/cjs/components/Lists/List/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("./List"), exports);

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js

@@ -0,0 +1,142 @@
+"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.ListPrivate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const loaders_1 = require("@snack-uikit/loaders");
+const scroll_1 = require("@snack-uikit/scroll");
+const utils_1 = require("@snack-uikit/utils");
+const helperComponents_1 = require("../../../helperComponents");
+const Items_1 = require("../../Items");
+const contexts_1 = require("../contexts");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      items,
+      pinTop,
+      pinBottom,
+      onKeyDown,
+      onBlur,
+      onFocus,
+      tabIndex,
+      active,
+      scroll,
+      nested,
+      search,
+      searchItem,
+      scrollRef,
+      scrollContainerRef,
+      onScroll,
+      footer,
+      loading,
+      limitedScrollHeight,
+      untouchableScrollbars,
+      className,
+      noDataState,
+      noResultsState,
+      errorDataState,
+      dataError,
+      dataFiltered
+    } = _a,
+    props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered"]);
+  const {
+    size = 's'
+  } = (0, contexts_1.useNewListContext)();
+  const itemsJSX = (0, Items_1.useRenderItems)(items);
+  const itemsPinTopJSX = (0, Items_1.useRenderItems)(pinTop);
+  const itemsPinBottomJSX = (0, Items_1.useRenderItems)(pinBottom);
+  const emptyStates = (0, helperComponents_1.useEmptyState)({
+    noDataState,
+    noResultsState,
+    errorDataState
+  });
+  const hasNoItems = items.length === 0;
+  const loadingJSX = (0, react_1.useMemo)(() => loading && (0, jsx_runtime_1.jsx)("div", {
+    role: 'spinbutton',
+    tabIndex: -1,
+    className: styles_module_scss_2.default.loader,
+    "data-size": size,
+    "data-no-items": hasNoItems || undefined,
+    "data-test-id": 'list__loader',
+    children: (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {
+      size: size === 'l' ? 's' : 'xs'
+    })
+  }), [hasNoItems, loading, size]);
+  const content = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
+    className: styles_module_scss_2.default.content,
+    children: [itemsJSX, loadingJSX, (0, jsx_runtime_1.jsx)(helperComponents_1.ListEmptyState, {
+      loading: loading,
+      dataError: dataError,
+      emptyStates: emptyStates,
+      hasNoItems: hasNoItems,
+      dataFiltered: dataFiltered !== null && dataFiltered !== void 0 ? dataFiltered : Boolean(search === null || search === void 0 ? void 0 : search.value)
+    })]
+  }), [dataError, dataFiltered, emptyStates, hasNoItems, itemsJSX, loading, loadingJSX, search === null || search === void 0 ? void 0 : search.value]);
+  const listJSX = (0, jsx_runtime_1.jsxs)("ul", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.listContainer, className),
+    ref: ref,
+    onKeyDown: onKeyDown,
+    tabIndex: tabIndex,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    "data-active": active || undefined,
+    role: 'menu'
+  }, (0, utils_1.extractSupportProps)(props), {
+    children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (0, jsx_runtime_1.jsxs)(Items_1.PinTopGroupItem, {
+      children: [search && (0, jsx_runtime_1.jsx)(Items_1.SearchItem, Object.assign({
+        search: search
+      }, searchItem)), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX]
+    }), scroll ? (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
+      className: (0, classnames_1.default)({
+        [styles_module_scss_1.default.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
+        [styles_module_scss_1.default.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
+        [styles_module_scss_1.default.scrollContainerL]: scroll && limitedScrollHeight && size === 'l'
+      }),
+      barHideStrategy: 'never',
+      size: size === 's' ? 's' : 'm',
+      ref: scrollContainerRef,
+      untouchableScrollbars: untouchableScrollbars,
+      onScroll: onScroll,
+      children: [content, (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_2.default.scrollStub,
+        ref: scrollRef
+      })]
+    }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+      children: content
+    }), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && (0, jsx_runtime_1.jsx)(Items_1.PinBottomGroupItem, {
+      children: itemsPinBottomJSX
+    }), footer && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_2.default.footer,
+      onFocus: e => e.stopPropagation(),
+      children: footer
+    })]
+  }));
+  if (!nested) {
+    return listJSX;
+  }
+  return (0, jsx_runtime_1.jsx)("li", {
+    style: {
+      listStyleType: 'none'
+    },
+    role: 'menuitem',
+    children: listJSX
+  });
+});

package/dist/cjs/components/Lists/ListPrivate/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("./ListPrivate"), exports);