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

package/dist/cjs/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,74 @@
+"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.ItemContent = ItemContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const contexts_1 = require("../../components/Lists/contexts");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const DEFAULT_TRUNCATE = {
+  option: 1,
+  description: 2,
+  variant: 'end'
+};
+function ItemContent(_a) {
+  var {
+      truncate: truncateProp,
+      caption,
+      description,
+      option,
+      className,
+      disabled
+    } = _a,
+    rest = __rest(_a, ["truncate", "caption", "description", "option", "className", "disabled"]);
+  const {
+    size = 's'
+  } = (0, contexts_1.useNewListContext)();
+  const truncate = (0, react_1.useMemo)(() => Object.assign(Object.assign({}, DEFAULT_TRUNCATE), truncateProp), [truncateProp]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.content, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size !== null && size !== void 0 ? size : 's',
+    "data-disabled": disabled || undefined,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.headline,
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.label,
+        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          variant: truncate.variant,
+          text: String(option),
+          maxLines: truncate.option,
+          "data-test-id": 'list__base-item-option'
+        })
+      }), caption && (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.caption,
+        children: caption
+      })]
+    }), description && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.description,
+      children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: description,
+        maxLines: truncate.description,
+        "data-test-id": 'list__base-item-description'
+      })
+    })]
+  }));
+}

package/dist/cjs/helperComponents/ItemContent/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("./ItemContent"), exports);

package/dist/cjs/helperComponents/ListEmptyState/ListEmptyState.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListEmptyState = ListEmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const info_block_1 = require("@snack-uikit/info-block");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ListEmptyState(_ref) {
+  let {
+    dataError,
+    dataFiltered,
+    hasNoItems,
+    emptyStates,
+    loading
+  } = _ref;
+  if (loading) {
+    return null;
+  }
+  if (dataError) {
+    return (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.listEmptyStateWrapper,
+      children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.errorDataState, {
+        size: 'm',
+        align: 'vertical'
+      }))
+    });
+  }
+  if (dataFiltered && hasNoItems) {
+    return (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.listEmptyStateWrapper,
+      children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.noResultsState, {
+        size: 'm',
+        align: 'vertical',
+        "data-test-id": 'list__no-results'
+      }))
+    });
+  }
+  if (!dataFiltered && hasNoItems) {
+    return (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.listEmptyStateWrapper,
+      children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.noDataState, {
+        size: 'm',
+        align: 'vertical',
+        "data-test-id": 'list__no-data'
+      }))
+    });
+  }
+  return null;
+}

package/dist/cjs/helperComponents/ListEmptyState/hooks.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEmptyState = useEmptyState;
+const react_1 = require("react");
+const icons_1 = require("@snack-uikit/icons");
+const locale_1 = require("@snack-uikit/locale");
+function useEmptyState(_ref) {
+  let {
+    noDataState: noDataStateProp,
+    noResultsState: noResultsStateProp,
+    errorDataState: errorDataStateProp
+  } = _ref;
+  const {
+    t
+  } = (0, locale_1.useLocale)('List');
+  return (0, react_1.useMemo)(() => {
+    const noDataState = Object.assign({
+      icon: {
+        icon: icons_1.SearchSVG,
+        appearance: 'neutral',
+        decor: true
+      },
+      description: t('noData.description')
+    }, noDataStateProp);
+    const noResultsState = Object.assign({
+      description: t('noResults.description')
+    }, noResultsStateProp);
+    const errorDataState = Object.assign({
+      icon: {
+        icon: icons_1.CrossSVG,
+        appearance: 'neutral',
+        decor: true
+      },
+      description: t('errorData.description')
+    }, errorDataStateProp);
+    return {
+      noDataState,
+      noResultsState,
+      errorDataState
+    };
+  }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
+}

package/dist/cjs/helperComponents/ListEmptyState/index.js

@@ -0,0 +1,33 @@
+"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
+});
+exports.useEmptyState = void 0;
+__exportStar(require("./ListEmptyState"), exports);
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useEmptyState", {
+  enumerable: true,
+  get: function () {
+    return hooks_1.useEmptyState;
+  }
+});

package/dist/cjs/helperComponents/Separator/Separator.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Separator = Separator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("@snack-uikit/button");
+const divider_1 = require("@snack-uikit/divider");
+const locale_1 = require("@snack-uikit/locale");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const contexts_1 = require("../../components/Lists/contexts");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Separator(_ref) {
+  let {
+    label,
+    truncate,
+    divider,
+    mode = 'secondary',
+    selectButton
+  } = _ref;
+  const {
+    size = 's'
+  } = (0, contexts_1.useNewListContext)();
+  const {
+    t
+  } = (0, locale_1.useLocale)('List');
+  const selectButtonJSX = (0, react_1.useMemo)(() => {
+    if (!selectButton) {
+      return null;
+    }
+    const {
+      onClick,
+      checked,
+      itemRef
+    } = selectButton;
+    return (0, jsx_runtime_1.jsx)("span", {
+      className: styles_module_scss_1.default.selectButton,
+      "data-size": size,
+      "data-weight": divider && mode || undefined,
+      children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+        size: constants_1.SELECT_BUTTON_SIZE_MAP[size],
+        tabIndex: 0,
+        onClick: e => {
+          onClick === null || onClick === void 0 ? void 0 : onClick(e);
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        onFocus: e => {
+          e.stopPropagation();
+        },
+        ref: itemRef,
+        label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')
+      })
+    });
+  }, [divider, mode, selectButton, size, t]);
+  if (label) {
+    return (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.separatorWithLabel,
+      "data-size": size,
+      children: [(0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.label,
+        "data-mode": mode,
+        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant,
+          text: label,
+          maxLines: 1
+        })
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        style: {
+          flex: 1
+        },
+        children: [selectButtonJSX, divider && (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+          weight: mode === 'primary' ? 'regular' : 'light',
+          className: styles_module_scss_1.default.divider
+        })]
+      })]
+    });
+  }
+  if (divider) {
+    return (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.separatorWithoutLabel,
+      "data-size": size,
+      children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+        weight: 'regular'
+      })
+    });
+  }
+  return null;
+}

package/dist/cjs/helperComponents/Separator/constants.js

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

package/dist/cjs/helperComponents/Separator/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("./Separator"), exports);

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,29 @@
+"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("./CollapseBlockPrivate"), exports);
+__exportStar(require("./Separator"), exports);
+__exportStar(require("./HiddenTabButton"), exports);
+__exportStar(require("./ListEmptyState"), exports);
+__exportStar(require("./ItemContent"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,34 @@
+"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
+});
+exports.kindFlattenItems = void 0;
+__exportStar(require("./components"), exports);
+var Items_1 = require("./components/Items");
+Object.defineProperty(exports, "kindFlattenItems", {
+  enumerable: true,
+  get: function () {
+    return Items_1.kindFlattenItems;
+  }
+});
+__exportStar(require("./helperComponents/ItemContent"), exports);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/esm/components/Items/AccordionItem/AccordionItem.d.ts

@@ -0,0 +1,4 @@
+import { CommonFlattenProps, FlattenAccordionItem } from '../types';
+type AccordionItemProps = Omit<FlattenAccordionItem, 'type>'> & CommonFlattenProps;
+export declare function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from './AccordionItem';

package/dist/esm/components/Items/BaseItem/BaseItem.d.ts

@@ -0,0 +1,12 @@
+import { KeyboardEvent, ReactNode } from 'react';
+import { FlattenBaseItem } from '../types';
+type AllBaseItemProps = FlattenBaseItem & {
+    expandIcon?: ReactNode;
+    open?: boolean;
+    indeterminate?: boolean;
+    onSelect?(): void;
+    isParentNode?: boolean;
+    onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
+};
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/esm/components/Items/BaseItem/constants.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from '@snack-uikit/toggles';
+export declare const CHECKBOX_SIZE_MAP: Record<string, CheckboxProps['size']>;

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

@@ -0,0 +1 @@
+export * from './BaseItem';

package/dist/esm/components/Items/BaseItem/styles.module.css

@@ -0,0 +1,112 @@
+.checkbox{
+  display:inline-flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--dimension-3m, 24px);
+  height:var(--dimension-3m, 24px);
+}
+
+.beforeContent{
+  display:inline-flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.beforeContent svg{
+  max-width:100%;
+  max-height:100%;
+}
+
+.expandableIcon{
+  display:flex;
+  align-items:center;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  fill:currentColor;
+}
+
+.markerContainer{
+  padding-top:var(--space-drop-list-item-marker-container-vertical-padding, 4px);
+  padding-bottom:var(--space-drop-list-item-marker-container-vertical-padding, 4px);
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  height:100%;
+}
+.markerContainer:before{
+  width:var(--size-drop-list-item-marker, 4px);
+  border-bottom-right-radius:var(--radius-drop-list-marker, 4px);
+  border-top-right-radius:var(--radius-drop-list-marker, 4px);
+  content:"";
+  display:block;
+  height:100%;
+}
+
+.droplistItem{
+  width:100%;
+}
+.droplistItem[data-size=s]{
+  padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-s-container-horizontal-padding, 8px));
+}
+.droplistItem[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.droplistItem[data-size=m]{
+  padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-m-container-horizontal-padding, 10px));
+}
+.droplistItem[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.droplistItem[data-size=l]{
+  padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-l-container-horizontal-padding, 12px));
+}
+.droplistItem[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.droplistItem[data-non-pointer]{
+  cursor:inherit;
+}
+
+.innerWrapper[data-disabled] .expandableIcon{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.innerWrapper[data-disabled] .beforeContent{
+  opacity:var(--opacity-a064, 0.64);
+}
+.innerWrapper[data-disabled] .droplistItem{
+  cursor:not-allowed;
+}
+.innerWrapper[data-has-checked][data-variant=single]::before, .innerWrapper[data-checked][data-variant=single]::before{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.innerWrapper[data-has-checked][data-variant=single]:hover::before, .innerWrapper[data-checked][data-variant=single]:hover::before{
+  opacity:var(--opacity-a016, 0.16);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.innerWrapper[data-has-checked] .markerContainer:before, .innerWrapper[data-checked] .markerContainer:before{
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.innerWrapper[data-has-checked] .droplistItem:focus-visible[data-variant=single], .innerWrapper[data-checked] .droplistItem:focus-visible[data-variant=single]{
+  outline-color:var(--sys-primary-accent-default, #794ed3);
+}
+.innerWrapper[data-has-checked][data-disabled] .markerContainer:before, .innerWrapper[data-checked][data-disabled] .markerContainer:before{
+  background-color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}

package/dist/esm/components/Items/GroupItem/GroupItem.d.ts

@@ -0,0 +1,6 @@
+import { FlattenGroupListItem, ItemId } from '../types';
+type GroupItemProps = Omit<FlattenGroupListItem, 'type'> & {
+    items: ItemId[];
+};
+export declare function GroupItem({ label, truncate, divider, items, mode }: GroupItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from './GroupItem';

package/dist/esm/components/Items/GroupSelectItem/GroupSelectItem.d.ts

@@ -0,0 +1,4 @@
+import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
+type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
+export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from './GroupSelectItem';

package/dist/esm/components/Items/NextListItem/NextListItem.d.ts

@@ -0,0 +1,6 @@
+import { CommonFlattenProps, FlattenNextListItem, ItemId } from '../types';
+type NextListItemProps = Omit<FlattenNextListItem, 'type'> & CommonFlattenProps & {
+    focusId?: ItemId;
+};
+export declare function NextListItem({ items, placement, id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading, focusId, untouchableScrollbars, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Items/NextListItem/constants.d.ts

@@ -0,0 +1,2 @@
+import { DropdownProps } from '@snack-uikit/dropdown';
+export declare const FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'];

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

@@ -0,0 +1 @@
+export * from './NextListItem';

package/dist/esm/components/Items/PinGroupItem/PinGroupItem.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare function PinTopGroupItem({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function PinBottomGroupItem({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/Items/PinGroupItem/index.js

@@ -0,0 +1 @@
+export * from './PinGroupItem';