@snack-uikit/list 0.11.1-preview-5d3667ec.0 → 0.11.1

package/dist/components/Lists/hooks.js

@@ -1,73 +1,106 @@
-import { useEffect, useState } from 'react';
-export function useKeyboardNavigation({ ids, itemRefs, expandedIds, parentRef, btnRef, }) {
-    const [activeFocusIndex, setActiveFocusIndex] = useState(-1);
-    const [openNestedIndex, setOpenNestedIndex] = useState(-1);
-    const handleListKeyDown = (e) => {
-        var _a, _b, _c, _d;
+import { useCallback, useRef, useState } from 'react';
+export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }) {
+    const [activeItemId, setActiveItemId] = useState();
+    const activeItemIdRef = useRef();
+    const handleListKeyDownFactory = useCallback((ids, expandedIds) => (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         switch (e.key) {
             case 'ArrowDown': {
-                setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
-                // TODO: go to loader from last item
-                // if (activeFocusIndex === ids.length - 2) {
-                //   return;
-                // }
+                if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.min(activeIndex + 1, ids.length - 1);
+                    const itemId = ids[nextId];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item.type !== 'group') {
+                        (_b = (_a = item.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                }
+                else {
+                    const itemId = ids[0];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item.type !== 'group') {
+                        (_d = (_c = item.itemRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    }
+                }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'ArrowUp': {
-                if (activeFocusIndex === 0) {
-                    (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    setActiveFocusIndex(-1);
+                if (ids[0] === activeItemIdRef.current) {
+                    const item = focusFlattenItems[ids[0]];
+                    if (item.parentId === '~main') {
+                        activeItemIdRef.current = undefined;
+                        setActiveItemId(undefined);
+                        (_e = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                    }
                     return;
                 }
-                setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+                if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.max(activeIndex - 1, 0);
+                    const itemId = ids[nextId];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item.type !== 'group') {
+                        (_g = (_f = item.itemRef) === null || _f === void 0 ? void 0 : _f.current) === null || _g === void 0 ? void 0 : _g.focus();
+                    }
+                }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'ArrowRight': {
-                if (expandedIds.includes(ids[activeFocusIndex])) {
-                    setOpenNestedIndex(activeFocusIndex);
+                if (activeItemIdRef.current !== undefined && expandedIds.includes(activeItemIdRef.current)) {
+                    const item = focusFlattenItems[activeItemIdRef.current];
+                    const newItemId = item.items[0];
+                    const newItem = focusFlattenItems[newItemId];
+                    activeItemIdRef.current = newItemId;
+                    setActiveItemId(newItemId);
+                    setTimeout(() => { var _a, _b; return (_b = (_a = newItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); }, 0);
                 }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'Tab': {
-                if (parentRef && activeFocusIndex !== -1) {
+                if (activeItemIdRef.current !== undefined) {
                     e.preventDefault();
-                    (_b = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    e.stopPropagation();
+                    activeItemIdRef.current = undefined;
+                    setActiveItemId(undefined);
+                    (_h = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _h === void 0 ? void 0 : _h.focus();
                 }
-                else if (activeFocusIndex === -1) {
-                    btnRef && !e.shiftKey ? (_c = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _c === void 0 ? void 0 : _c.focus() : (_d = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                else {
+                    btnRef && !e.shiftKey ? (_j = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _j === void 0 ? void 0 : _j.focus() : (_k = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _k === void 0 ? void 0 : _k.focus();
                 }
-                setOpenNestedIndex(-1);
-                setActiveFocusIndex(-1);
                 return;
             }
             default: {
                 return;
             }
         }
-    };
-    const resetNestedIndex = () => {
-        setActiveFocusIndex(openNestedIndex);
-        setOpenNestedIndex(-1);
-    };
-    const resetActiveFocusIndex = () => {
-        setActiveFocusIndex(-1);
-    };
-    useEffect(() => {
+    }, [focusFlattenItems, mainRef, btnRef]);
+    const resetActiveItemId = useCallback(() => {
+        setActiveItemId(undefined);
+        activeItemIdRef.current = undefined;
+    }, []);
+    const forceUpdateActiveItemId = useCallback((itemId) => {
         var _a, _b;
-        activeFocusIndex !== -1 && openNestedIndex === -1 && ((_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, openNestedIndex]);
+        setActiveItemId(itemId);
+        activeItemIdRef.current = itemId;
+        const item = focusFlattenItems[itemId];
+        (_b = (_a = item === null || item === void 0 ? void 0 : item.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [focusFlattenItems]);
     return {
-        activeFocusIndex,
-        setActiveFocusIndex,
-        openNestedIndex,
-        resetNestedIndex,
-        resetActiveFocusIndex,
-        handleListKeyDown,
+        resetActiveItemId,
+        activeItemId,
+        forceUpdateActiveItemId,
+        handleListKeyDownFactory,
     };
 }

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

@@ -1,4 +1,5 @@
 export * from './Droplist';
 export * from './List';
 export type { ListProps, DroplistProps } from './types';
-export type { SelectionSingleState, SelectionMultipleState, SelectionSingleProps, SelectionMultipleProps, isSelectionSingleProps, isSelectionMultipleProps, SelectionSingleValueType, } from './contexts';
+export type { SelectionSingleState, SelectionMultipleState, SelectionSingleProps, SelectionMultipleProps, SelectionSingleValueType, } from './contexts';
+export { useSelectionContext, useCollapseContext, isSelectionSingleProps, isSelectionMultipleProps } from './contexts';

package/dist/components/Lists/index.js

@@ -1,2 +1,3 @@
 export * from './Droplist';
 export * from './List';
+export { useSelectionContext, useCollapseContext, isSelectionSingleProps, isSelectionMultipleProps } from './contexts';

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

@@ -3,13 +3,8 @@ import { DropdownProps } from '@snack-uikit/dropdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps } from '../../helperComponents';
 import { ScrollProps, SearchState } from '../../types';
-import { ItemProps } from '../Items';
-import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
-type CollapseState = {
-    value?: (string | number)[];
-    onChange?(value: (string | number)[]): void;
-    defaultValue?: (string | number)[];
-};
+import { FlattenBaseItem, Item, ItemId } from '../Items';
+import { CollapseState, PublicListContextType, SelectionState } from './contexts';
 export type EmptyState = {
     dataFiltered?: boolean;
     dataError?: boolean;
@@ -22,11 +17,11 @@ export type EmptyState = {
 };
 export type ListProps = WithSupportProps<{
     /** Основные элементы списка */
-    items: ItemProps[];
+    items: Item[];
     /** Элементы списка, закрепленные сверху */
-    pinTop?: ItemProps[];
+    pinTop?: Item[];
     /** Элементы списка, закрепленные снизу */
-    pinBottom?: ItemProps[];
+    pinBottom?: Item[];
     /**
      * Кастомизируемый элемент в конце списка
      * @type ReactNode;
@@ -45,7 +40,7 @@ export type ListProps = WithSupportProps<{
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
-} & SelectionState & ListContextType & ScrollProps & EmptyState>;
+} & SelectionState & PublicListContextType & ScrollProps & EmptyState>;
 export type DroplistProps = {
     /** Ссылка на элемент-триггер для дроплиста */
     triggerElemRef?: RefObject<HTMLElement>;
@@ -57,8 +52,8 @@ export type DroplistProps = {
     children: ReactNode | ((params: {
         onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     }) => ReactNode);
-} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
-export type ListPrivateProps = ListProps & ListContextPrivateType & {
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
+export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'> & {
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
@@ -66,5 +61,8 @@ export type ListPrivateProps = ListProps & ListContextPrivateType & {
     onBlur?(e: FocusEvent<HTMLElement>): void;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
+    searchItem?: FlattenBaseItem;
+    pinTop?: ItemId[];
+    items: ItemId[];
+    pinBottom?: ItemId[];
 };
-export {};

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from './Lists';
-export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps, GroupSelectItemProps, ItemId, } from './Items';
+export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, isGroupSelectItem, } from './Items';
 export { useGroupItemSelection } from './Items/hooks';

package/dist/components/index.js

@@ -1,3 +1,3 @@
 export * from './Lists';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, isGroupSelectItem, } from './Items';
 export { useGroupItemSelection } from './Items/hooks';

package/dist/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,15 @@
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string;
+    description?: string;
+    truncate?: {
+        option?: number;
+        description?: number;
+        variant?: TruncateStringProps['variant'];
+    };
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ truncate, caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,23 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { useNewListContext } from '../../components/Lists/contexts';
+import styles from './styles.module.css';
+export function ItemContent(_a) {
+    var _b, _c;
+    var { truncate, caption, description, option, className, disabled } = _a, rest = __rest(_a, ["truncate", "caption", "description", "option", "className", "disabled"]);
+    const { size = 's' } = useNewListContext();
+    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": size !== null && size !== void 0 ? size : 's', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.label, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: String(option), maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.option) !== null && _b !== void 0 ? _b : 1, "data-test-id": 'list__base-item-option' }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: (_c = truncate === null || truncate === void 0 ? void 0 : truncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] })));
+}

package/dist/helperComponents/ItemContent/index.d.ts

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

package/dist/helperComponents/ItemContent/index.js

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

package/dist/helperComponents/ItemContent/styles.module.css

@@ -0,0 +1,117 @@
+.headline{
+  display:flex;
+  align-items:center;
+}
+
+.label{
+  overflow:hidden;
+  flex:1;
+  color:var(--sys-neutral-text-main, #33333b);
+}
+
+.caption{
+  overflow:hidden;
+  color:var(--sys-neutral-text-light, #868892);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656771);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=s] .label{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=m] .label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=m] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=l] .label{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
+.content[data-size=l] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=l] .description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-disabled] .label,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sys-neutral-text-disabled, #b3b6bf);
+}

package/dist/helperComponents/ListEmptyState/ListEmptyState.d.ts

@@ -9,6 +9,6 @@ export type ListEmptyState = {
     loading?: boolean;
     dataError?: boolean;
     dataFiltered?: boolean;
-    itemsLength: number;
+    hasNoItems: boolean;
 };
-export declare function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;
+export declare function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }: ListEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/ListEmptyState/ListEmptyState.js

@@ -1,9 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
-export function ListEmptyState({ dataError, dataFiltered, itemsLength, emptyStates, loading }) {
-    if (itemsLength || loading) {
+export function ListEmptyState({ dataError, dataFiltered, hasNoItems, emptyStates, loading }) {
+    if (loading) {
         return null;
     }
-    return (_jsxs("div", { className: styles.listEmptyStateWrapper, children: [dataError && _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })), !dataError && dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' }))), !dataError && !dataFiltered && (_jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })))] }));
+    if (dataError) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 's', align: 'vertical' })) }));
+    }
+    if (dataFiltered && hasNoItems) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 's', align: 'vertical', "data-test-id": 'list__no-results' })) }));
+    }
+    if (!dataFiltered && hasNoItems) {
+        return (_jsx("div", { className: styles.listEmptyStateWrapper, children: _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 's', align: 'vertical', "data-test-id": 'list__no-data' })) }));
+    }
+    return null;
 }

package/dist/helperComponents/Separator/Separator.d.ts

@@ -1,3 +1,4 @@
+import { ForwardedRef, MouseEvent } from 'react';
 import { TruncateStringProps } from '@snack-uikit/truncate-string';
 export type SeparatorProps = {
     label?: string;
@@ -6,6 +7,11 @@ export type SeparatorProps = {
     };
     mode?: 'primary' | 'secondary';
     divider?: boolean;
-    size?: 's' | 'm' | 'l';
+    selectButton?: {
+        onClick?(e: MouseEvent<HTMLElement>): void;
+        indeterminate?: boolean;
+        checked?: boolean;
+        itemRef?: ForwardedRef<HTMLElement>;
+    };
 };
-export declare function Separator({ label, truncate, divider, mode, size }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/Separator/Separator.js

@@ -1,10 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
 import { Divider } from '@snack-uikit/divider';
+import { useLocale } from '@snack-uikit/locale';
 import { TruncateString } from '@snack-uikit/truncate-string';
+import { useNewListContext } from '../../components/Lists/contexts';
+import { SELECT_BUTTON_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
-export function Separator({ label, truncate, divider, mode = 'secondary', size = 's' }) {
+export function Separator({ label, truncate, divider, mode = 'secondary', selectButton }) {
+    const { size = 's' } = useNewListContext();
+    const { t } = useLocale('List');
+    const selectButtonJSX = useMemo(() => {
+        if (!selectButton) {
+            return null;
+        }
+        const { onClick, checked, itemRef } = selectButton;
+        return (_jsx("span", { className: styles.selectButton, "data-size": size, "data-weight": (divider && mode) || undefined, children: _jsx(ButtonFunction, { size: 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 (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: label, maxLines: 1 }) }), divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] }));
+        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: label, maxLines: 1 }) }), _jsxs("div", { style: { flex: 1 }, children: [selectButtonJSX, divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] })] }));
     }
     if (divider) {
         return (_jsx("div", { className: styles.separatorWithoutLabel, "data-size": size, children: _jsx(Divider, { weight: 'regular' }) }));

package/dist/helperComponents/Separator/constants.d.ts

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

package/dist/helperComponents/Separator/constants.js

@@ -0,0 +1,5 @@
+export const SELECT_BUTTON_SIZE_MAP = {
+    s: 'xs',
+    m: 's',
+    l: 'm',
+};

package/dist/helperComponents/Separator/styles.module.css

@@ -1,5 +1,4 @@
 .separatorWithLabel{
-  overflow:hidden;
   display:flex;
   gap:var(--dimension-1m, 8px);
   align-items:flex-end;
@@ -119,4 +118,24 @@ hr.divider{
   flex:1;
   width:auto;
   min-width:0;
+}
+
+.selectButton{
+  display:flex;
+  justify-content:flex-end;
+}
+.selectButton[data-weight=primary]{
+  --divider-height:1px;
+}
+.selectButton[data-weight=secondary]{
+  --divider-height:0.5px;
+}
+.selectButton[data-size=s]{
+  transform:translateY(calc((var(--size-button-xs, 24px) - var(--sans-label-s-line-height, 14px)) / 2 - var(--divider-height, 0)));
+}
+.selectButton[data-size=m]{
+  transform:translateY(calc((var(--size-button-s, 32px) - var(--sans-label-m-line-height, 16px)) / 2 - var(--divider-height, 0)));
+}
+.selectButton[data-size=l]{
+  transform:translateY(calc((var(--size-button-m, 40px) - var(--sans-label-l-line-height, 20px)) / 2 - var(--divider-height, 0)));
 }

package/dist/helperComponents/index.d.ts

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/helperComponents/index.js

@@ -2,3 +2,4 @@ export * from './CollapseBlockPrivate';
 export * from './Separator';
 export * from './HiddenTabButton';
 export * from './ListEmptyState';
+export * from './ItemContent';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
 export type { SearchState } from './types';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './components/Items';
+export * from './helperComponents/ItemContent';

package/dist/index.js

@@ -1,3 +1,3 @@
 export * from './components';
-export { useFuzzySearch } from './hooks';
-export { extractChildIds, flattenItems } from './utils';
+export { kindFlattenItems } from './components/Items';
+export * from './helperComponents/ItemContent';

package/dist/types.d.ts

@@ -1,9 +1,9 @@
 import { RefObject } from 'react';
 export type SearchState = {
     placeholder?: string;
+    loading?: boolean;
     value?: string;
     onChange(value: string): void;
-    loading?: boolean;
 };
 export type ScrollProps = {
     /** Включить ли скролл для основной части списка */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.11.1-preview-5d3667ec.0",
+  "version": "0.11.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,27 +32,22 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/divider": "3.0.2",
-    "@snack-uikit/dropdown": "0.2.1",
+    "@snack-uikit/button": "0.17.1",
+    "@snack-uikit/divider": "3.0.3",
+    "@snack-uikit/dropdown": "0.2.2",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/info-block": "0.3.3",
-    "@snack-uikit/loaders": "0.5.1",
-    "@snack-uikit/locale": "0.6.1-preview-5d3667ec.0",
-    "@snack-uikit/scroll": "0.5.2",
-    "@snack-uikit/search-private": "0.1.5",
-    "@snack-uikit/toggles": "0.9.7",
-    "@snack-uikit/truncate-string": "0.4.12",
-    "@snack-uikit/utils": "3.2.0",
+    "@snack-uikit/info-block": "0.3.4",
+    "@snack-uikit/loaders": "0.5.2",
+    "@snack-uikit/scroll": "0.5.3",
+    "@snack-uikit/search-private": "0.2.0",
+    "@snack-uikit/toggles": "0.9.8",
+    "@snack-uikit/truncate-string": "0.4.13",
+    "@snack-uikit/utils": "3.3.0",
     "classnames": "2.5.1",
-    "fuzzy-search": "3.2.1",
-    "merge-refs": "1.2.2",
-    "uncontrollable": "8.0.4"
-  },
-  "devDependencies": {
-    "@types/fuzzy-search": "2.1.5"
+    "merge-refs": "1.2.2"
   },
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "311bf31807d9b8cc975e80caf14ec35108256337"
+  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
 }