@snack-uikit/list 0.1.1-preview-57c837e3.0

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { NextListItemProps } from '../types';
+export declare function NextListItem({ items: itemsProp, placement, id, search, scroll, scrollRef, disabled, ...option }: NextListItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,66 @@
+var __rest = (this && this.__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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { ChevronRightSVG } from '@snack-uikit/icons';
+import { withCollapsedItems } from '../../../utils';
+import { ParentListContext, useParentListContext } from '../../Lists/contexts';
+import { ListPrivate } from '../../Lists/ListPrivate';
+import { BaseItem } from '../BaseItem';
+import { useGroupItemSelection } from '../hooks';
+import { useKeyboardNavigation } from './hooks';
+const FALLBACK_PLACEMENTS = [
+    'right',
+    'right-start',
+    'right-end',
+    'left',
+    'left-start',
+    'left-end',
+];
+export function NextListItem(_a) {
+    var { items: itemsProp, placement = 'right-start', id, search, scroll, scrollRef, disabled } = _a, option = __rest(_a, ["items", "placement", "id", "search", "scroll", "scrollRef", "disabled"]);
+    const listRef = useRef(null);
+    const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
+    const { items, itemRefs, ids, expandedIds } = useMemo(() => withCollapsedItems({
+        items: itemsProp,
+        openCollapsedItems,
+    }), [itemsProp, openCollapsedItems]);
+    const { parentOpenNestedIndex, parentIds, triggerRef, parentResetNestedIndex, parentResetActiveFocusIndex } = useParentListContext();
+    const { open, setOpen, handleListKeyDown, activeFocusIndex, openNestedIndex, resetNestedIndex, resetActiveFocusIndex, } = useKeyboardNavigation({ ids, expandedIds, itemRefs, id });
+    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
+    const handleOpenChange = useCallback((open) => {
+        if (!open) {
+            resetActiveFocusIndex();
+            resetNestedIndex();
+            setOpenCollapsedItems([]);
+        }
+        setOpen(open);
+    }, [resetActiveFocusIndex, resetNestedIndex, setOpen]);
+    const handleOutsideClick = useCallback(() => {
+        parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
+        parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
+        return true;
+    }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
+    return (_jsx("li", { style: { listStyleType: 'none' }, children: _jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ParentListContext.Provider, { value: {
+                    parentIds: ids,
+                    parentActiveFocusIndex: activeFocusIndex,
+                    parentExpandedIds: expandedIds,
+                    parentItemRefs: itemRefs,
+                    parentOpenNestedIndex: openNestedIndex,
+                    triggerRef,
+                    parentRef: listRef,
+                    parentResetNestedIndex: resetNestedIndex,
+                    parentResetActiveFocusIndex: resetActiveFocusIndex,
+                    toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
+                }, children: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, search: search, scroll: scroll, scrollRef: scrollRef }) }), trigger: 'hover', open: (open || parentIds[parentOpenNestedIndex] === id) && !disabled, onOpenChange: handleOpenChange, placement: placement, children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }) }));
+}

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

@@ -0,0 +1,19 @@
+import { KeyboardEvent, RefObject } from 'react';
+type UseKeyboardNavigationProps = {
+    ids: Array<number | string>;
+    expandedIds: Array<number | string>;
+    itemRefs?: RefObject<HTMLButtonElement>[];
+    id?: string | number;
+};
+export declare function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }: UseKeyboardNavigationProps): {
+    activeFocusIndex: number;
+    setActiveFocusIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    openNestedIndex: number;
+    setOpenNestedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    resetNestedIndex: () => void;
+    resetActiveFocusIndex: () => void;
+    handleListKeyDown: (e: KeyboardEvent<HTMLUListElement>) => void;
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};

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

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useParentListContext } from '../../Lists/contexts';
+export function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }) {
+    const { triggerRef, parentResetNestedIndex, parentIds, parentItemRefs, parentOpenNestedIndex } = useParentListContext();
+    const [activeFocusIndex, setActiveFocusIndex] = useState(-1);
+    const [openNestedIndex, setOpenNestedIndex] = useState(-1);
+    const [open, setOpen] = useState(false);
+    const handleListKeyDown = (e) => {
+        var _a, _b;
+        switch (e.key) {
+            case 'ArrowDown': {
+                setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            case 'ArrowUp': {
+                setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowRight': {
+                e.stopPropagation();
+                e.preventDefault();
+                if (expandedIds.includes(ids[activeFocusIndex])) {
+                    setOpenNestedIndex(activeFocusIndex);
+                }
+                return;
+            }
+            case 'ArrowLeft': {
+                (_a = parentItemRefs === null || parentItemRefs === void 0 ? void 0 : parentItemRefs[parentOpenNestedIndex].current) === null || _a === void 0 ? void 0 : _a.focus();
+                parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
+                setActiveFocusIndex(-1);
+                setOpenNestedIndex(-1);
+                setOpen(false);
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            case 'Tab': {
+                (_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
+                setActiveFocusIndex(-1);
+                setOpen(false);
+                e.preventDefault();
+                return;
+            }
+            default: {
+                break;
+            }
+        }
+    };
+    useEffect(() => {
+        var _a, _b;
+        (_b = (_a = itemRefs === null || itemRefs === void 0 ? void 0 : itemRefs[activeFocusIndex]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [activeFocusIndex, itemRefs]);
+    useEffect(() => {
+        if (parentIds[parentOpenNestedIndex] === id && openNestedIndex === -1) {
+            setOpen(true);
+            setActiveFocusIndex(activeIndex => (activeIndex === -1 ? 0 : activeIndex));
+        }
+    }, [id, openNestedIndex, parentIds, parentOpenNestedIndex]);
+    const resetNestedIndex = () => {
+        setActiveFocusIndex(openNestedIndex);
+        setOpenNestedIndex(-1);
+    };
+    const resetActiveFocusIndex = useCallback(() => setActiveFocusIndex(-1), []);
+    return {
+        activeFocusIndex,
+        setActiveFocusIndex,
+        openNestedIndex,
+        setOpenNestedIndex,
+        resetNestedIndex,
+        resetActiveFocusIndex,
+        handleListKeyDown,
+        open,
+        setOpen,
+    };
+}

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

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

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

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

package/dist/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/components/Items/PinGroupItem/PinGroupItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import styles from './styles.module.css';
+export function PinTopGroupItem({ children }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { className: cn(styles.pinTopItem), "data-test-id": 'list__pin-top-group-item', children: children }));
+}
+export function PinBottomGroupItem({ children }) {
+    if (!children) {
+        return null;
+    }
+    return (_jsx("div", { className: cn(styles.pinBottomItem), "data-test-id": 'list__pin-bottom-group-item', children: children }));
+}

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

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

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

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

package/dist/components/Items/PinGroupItem/styles.module.css

@@ -0,0 +1,31 @@
+.pinTopItem{
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  border-bottom:var(--border-width-droplist-pin-content, 1px);
+  display:flex;
+  flex-direction:column;
+  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-style:solid;
+  border-top:0;
+  border-right:0;
+  border-left:0;
+}
+.pinTopItem li,
+.pinTopItem ul{
+  list-style-type:none;
+}
+
+.pinBottomItem{
+  padding-top:var(--radius-drop-list-container, 8px);
+  border-top:var(--border-width-droplist-pin-content, 1px);
+  display:flex;
+  flex-direction:column;
+  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-style:solid;
+  border-right:0;
+  border-bottom:0;
+  border-left:0;
+}
+.pinBottomItem li,
+.pinBottomItem ul{
+  list-style-type:none;
+}

package/dist/components/Items/SearchItem/SearchItem.d.ts

@@ -0,0 +1,5 @@
+import { SearchState } from '../../../types';
+export type SearchItemProps = {
+    search?: SearchState;
+};
+export declare function SearchItem({ search }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Items/SearchItem/SearchItem.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { SearchPrivate } from '@snack-uikit/search-private';
+import { useListContext, useParentListContext } from '../../Lists/contexts';
+import commonStyles from '../styles.module.css';
+import styles from './styles.module.css';
+export function SearchItem({ search }) {
+    const { parentItemRefs, parentSetActiveFocusIndex } = useParentListContext();
+    const { size } = useListContext();
+    const handleKeyDown = (e) => {
+        if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+            e.preventDefault();
+        }
+        if (['ArrowRight'].includes(e.key)) {
+            e.stopPropagation();
+        }
+    };
+    const handleFocus = (e) => {
+        if (e.target === parentItemRefs[0].current) {
+            parentSetActiveFocusIndex === null || parentSetActiveFocusIndex === void 0 ? void 0 : parentSetActiveFocusIndex(0);
+        }
+        e.stopPropagation();
+    };
+    if (!Boolean(search)) {
+        return null;
+    }
+    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: parentItemRefs[0] })) }));
+}

package/dist/components/Items/SearchItem/index.d.ts

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

package/dist/components/Items/SearchItem/index.js

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

package/dist/components/Items/SearchItem/styles.module.css

@@ -0,0 +1,11 @@
+.searchItem{
+  width:100%;
+}
+.searchItem:focus-within, .searchItem:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  max-width:100%;
+  outline-color:var(--sys-primary-decor-activated, #c5b2f1);
+}

package/dist/components/Items/hooks.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import { ItemProps } from './types';
+export declare function useRenderItems(items: ItemProps[]): import("react/jsx-runtime").JSX.Element[];
+type UseItemsWithIdsProps = {
+    search?: boolean;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+};
+export declare function useItemsWithIds({ search, footerActiveElementsRefs }: UseItemsWithIdsProps): {
+    search: ItemProps[];
+    footerRefs: ItemProps[];
+};
+type UseGroupItemSelectionProps = {
+    items: ItemProps[];
+    id?: string | number;
+    disabled?: boolean;
+};
+export declare function useGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps): {
+    checked: boolean | undefined;
+    isIndeterminate: boolean;
+    handleOnSelect: () => void;
+};
+export {};

package/dist/components/Items/hooks.js

@@ -0,0 +1,61 @@
+import { createElement as _createElement } from "react";
+import { createRef, useEffect, useMemo } from 'react';
+import { extractChildIds } from '../../utils';
+import { useSelectionContext } from '../Lists/contexts';
+import { AccordionItem } from './AccordionItem';
+import { BaseItem } from './BaseItem';
+import { GroupItem } from './GroupItem';
+import { NextListItem } from './NextListItem';
+import { addItemsIds, isAccordionItemProps, isGroupItemProps, isNextListItemProps } from './utils';
+export function useRenderItems(items) {
+    return useMemo(() => items.map((item, idx) => {
+        if (isGroupItemProps(item)) {
+            return _createElement(GroupItem, Object.assign({}, item, { key: item.id }));
+        }
+        if (isAccordionItemProps(item)) {
+            return _createElement(AccordionItem, Object.assign({}, item, { key: idx }));
+        }
+        if (isNextListItemProps(item)) {
+            return _createElement(NextListItem, Object.assign({}, item, { key: item.id }));
+        }
+        return _createElement(BaseItem, Object.assign({}, item, { key: item.id }));
+    }), [items]);
+}
+export function useItemsWithIds({ search, footerActiveElementsRefs }) {
+    return useMemo(() => ({
+        search: addItemsIds(search ? [{ itemRef: createRef() }] : [], 'search'),
+        footerRefs: addItemsIds(footerActiveElementsRefs
+            ? footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map(ref => ({ itemRef: ref }))
+            : [], 'footer'),
+    }), [footerActiveElementsRefs, search]);
+}
+export function useGroupItemSelection({ id, items, disabled }) {
+    const { value, setValue, isSelectionMultiple } = useSelectionContext();
+    const childIds = useMemo(() => extractChildIds({ items }), [items]);
+    const isIndeterminate = isSelectionMultiple
+        ? childIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : childIds.includes(value !== null && value !== void 0 ? value : '');
+    const checked = isSelectionMultiple ? childIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
+    useEffect(() => {
+        if (isSelectionMultiple) {
+            if (checked && !(value === null || value === void 0 ? void 0 : value.includes(id))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([id !== null && id !== void 0 ? id : '']));
+            }
+            if (!checked && (value === null || value === void 0 ? void 0 : value.includes(id))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id));
+            }
+        }
+    }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+    const handleOnSelect = () => {
+        if (checked) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !childIds.includes(itemId)));
+            return;
+        }
+        if (isIndeterminate) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...childIds, id])));
+            return;
+        }
+        setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([...childIds, id !== null && id !== void 0 ? id : '']));
+    };
+    return { checked, isIndeterminate, handleOnSelect };
+}

package/dist/components/Items/index.d.ts

@@ -0,0 +1,9 @@
+export * from './BaseItem';
+export * from './NextListItem';
+export * from './AccordionItem';
+export * from './GroupItem';
+export * from './SearchItem';
+export * from './hooks';
+export * from './types';
+export * from './utils';
+export * from './PinGroupItem';

package/dist/components/Items/index.js

@@ -0,0 +1,9 @@
+export * from './BaseItem';
+export * from './NextListItem';
+export * from './AccordionItem';
+export * from './GroupItem';
+export * from './SearchItem';
+export * from './hooks';
+export * from './types';
+export * from './utils';
+export * from './PinGroupItem';

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

@@ -0,0 +1,74 @@
+.listItem{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:100%;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-main, #333333);
+  text-align:start;
+  -webkit-appearance:unset;
+     -moz-appearance:unset;
+          appearance:unset;
+  background-color:transparent;
+  border:none;
+  outline:none;
+}
+.listItem[data-size=s]{
+  padding-top:var(--space-drop-list-item-s-container-vertical-padding, 4px);
+  padding-bottom:var(--space-drop-list-item-s-container-vertical-padding, 4px);
+  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+  gap:var(--space-drop-list-item-s-container-gap, 8px);
+}
+.listItem[data-size=m]{
+  padding-top:var(--space-drop-list-item-m-container-vertical-padding, 8px);
+  padding-bottom:var(--space-drop-list-item-m-container-vertical-padding, 8px);
+  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  gap:var(--space-drop-list-item-m-container-gap, 8px);
+}
+.listItem[data-size=l]{
+  padding-top:var(--space-drop-list-item-l-container-vertical-padding, 12px);
+  padding-bottom:var(--space-drop-list-item-l-container-vertical-padding, 12px);
+  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  gap:var(--space-drop-list-item-l-container-gap, 8px);
+}
+.listItem::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:transparent;
+}
+.listItem[data-open]::after, .listItem[data-focused]::after, .listItem:hover::after, .listItem:focus-visible::after{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-neutral-accent-default, #757575);
+}
+.listItem[data-focused], .listItem:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+}
+.listItem:disabled{
+  cursor:not-allowed;
+  background-color:transparent;
+  outline:none;
+}
+.listItem:disabled::before{
+  display:none;
+}
+.listItem:disabled::after{
+  cursor:not-allowed;
+  background-color:transparent;
+}

package/dist/components/Items/types.d.ts

@@ -0,0 +1,43 @@
+import { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { SeparatorProps } from '../../helperComponents';
+import { ScrollProps, SearchState } from '../../types';
+export type ItemContentProps = {
+    option: string;
+    caption?: string;
+    description?: string;
+};
+export type BaseItemPrivateProps = {
+    expandIcon?: ReactNode;
+    open?: boolean;
+};
+export type BaseItemProps = WithSupportProps<{
+    beforeContent?: ReactNode;
+    afterContent?: ReactNode;
+    content: ItemContentProps;
+    onClick?(e: MouseEvent<HTMLButtonElement>): void;
+    onKeyDown?(e: KeyboardEvent<HTMLButtonElement>): void;
+    onFocus?(e: FocusEvent<HTMLButtonElement>): void;
+    onBlur?(e: FocusEvent<HTMLButtonElement>): void;
+    id?: string | number;
+    disabled?: boolean;
+    itemRef?: RefObject<HTMLButtonElement>;
+}>;
+export type SwitchProps = {
+    switch?: boolean;
+};
+export type ItemProps = (BaseItemProps & SwitchProps) | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type AccordionItemProps = BaseItemProps & {
+    items: ItemProps[];
+    type: 'collapse';
+};
+export type NextListItemProps = BaseItemProps & {
+    items: ItemProps[];
+    type: 'next-list';
+    placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
+    search?: SearchState;
+} & ScrollProps;
+export type GroupItemProps = SeparatorProps & {
+    items: ItemProps[];
+    id?: string | number;
+};

package/dist/components/Items/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Items/utils.d.ts

@@ -0,0 +1,17 @@
+import { AccordionItemProps, BaseItemProps, GroupItemProps, ItemProps, NextListItemProps } from './types';
+export declare function isBaseItemProps(item: any): item is BaseItemProps;
+export declare function isAccordionItemProps(item: any): item is AccordionItemProps;
+export declare function isNextListItemProps(item: any): item is NextListItemProps;
+export declare function isGroupItemProps(item: any): item is GroupItemProps;
+export declare function getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs, }: {
+    items: ItemProps[];
+    hasSearch: boolean;
+    footerRefs: ItemProps[];
+    pinTop?: ItemProps[];
+    pinBottom?: ItemProps[];
+}): {
+    pinTop: ItemProps[];
+    items: ItemProps[];
+    pinBottom: ItemProps[];
+};
+export declare function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): ItemProps[];

package/dist/components/Items/utils.js

@@ -0,0 +1,42 @@
+import { createRef } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isBaseItemProps(item) {
+    return 'content' in item;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isAccordionItemProps(item) {
+    return 'items' in item && item['type'] === 'collapse';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNextListItemProps(item) {
+    return 'items' in item && item['type'] === 'next-list';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isGroupItemProps(item) {
+    return 'items' in item && item['type'] === undefined;
+}
+export function getSlicedItems({ items, hasSearch, pinTop, pinBottom, footerRefs, }) {
+    var _a, _b, _c;
+    const searchShift = hasSearch ? 1 : 0;
+    const pinTopNumber = (_a = pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) !== null && _a !== void 0 ? _a : 0;
+    const pinBottomNumber = (_b = pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) !== null && _b !== void 0 ? _b : 0;
+    const footerElementsNumber = (_c = footerRefs === null || footerRefs === void 0 ? void 0 : footerRefs.length) !== null && _c !== void 0 ? _c : 0;
+    return {
+        pinTop: items.slice(searchShift, pinTopNumber + searchShift),
+        items: items.slice(pinTopNumber + searchShift, items.length - pinBottomNumber - footerElementsNumber),
+        pinBottom: items.slice(items.length - pinBottomNumber - footerElementsNumber, items.length - footerElementsNumber),
+    };
+}
+export function addItemsIds(itemsProp, prefix) {
+    return itemsProp.map((item, idx) => {
+        var _a;
+        const itemId = (_a = item.id) !== null && _a !== void 0 ? _a : (prefix !== undefined ? [prefix, idx].join('-') : String(idx));
+        if (isGroupItemProps(item)) {
+            return Object.assign(Object.assign({}, item), { id: itemId, items: addItemsIds(item.items, itemId) });
+        }
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+            return Object.assign(Object.assign({}, item), { id: itemId, items: addItemsIds(item.items, itemId), itemRef: item.itemRef || createRef() });
+        }
+        return Object.assign(Object.assign({}, item), { id: itemId, itemRef: item.itemRef || createRef() });
+    });
+}

package/dist/components/Lists/Droplist/DropList.d.ts

@@ -0,0 +1,2 @@
+import { DroplistProps } from '../types';
+export declare function Droplist({ items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;