@snack-uikit/list 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.2.0 (2024-02-02)
+
+
+### Features
+
+* **FF-4075:** add ref, onKeyDown props into list; add className, inactive props into items ([3ee860c](https://github.com/cloud-ru-tech/snack-uikit/commit/3ee860c5257be999ecf3a77d261d74240e7713f2))
+
+
+### BREAKING CHANGES
+
+
+* **FF-4075:** hide all selection props into 1 prop; add collapse contolled state; list fill container ([e1f8e66](https://github.com/cloud-ru-tech/snack-uikit/commit/e1f8e663a43a1261916513237f3b96b6c1146a67))
+
+
+
+
 ## 0.1.3 (2024-02-01)
 
 ### Only dependencies have been changed

package/README.md

@@ -28,18 +28,17 @@
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | auto | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
 | trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
 | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
+| className | `string` | - | CSS-класс |
 | pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
 | pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| footer | `ReactNode` | - | Кастомизируемый элемент, помещаемый внизу списка |
-| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка |
+| footer | `ReactElement` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | search | `SearchState` | - | Настройки поисковой строки |
 | loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
 | noData | `string` | - | Текст для состояния "Отсутсвие данных" |
 | noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
-| value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
-| defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
-| onChange | `((value: any) => void) \| ((value: any) => void)` | - | Controlled обработчик измения состояния |
-| selection | "single" \| "multiple" | - | Режим выбора |
+| collapse | `CollapseState` | {} | Настройки раскрытия элементов |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
 | size | "s" \| "m" \| "l" | - | Размер списка |
 | marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |
@@ -52,16 +51,17 @@
 | items* | `ItemProps[]` | - | Основные элементы списка |
 | pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
 | pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| footer | `ReactNode` | - | Кастомизируемый элемент, помещаемый внизу списка |
-| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка |
+| footer | `ReactElement` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
 | search | `SearchState` | - | Настройки поисковой строки |
 | loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
 | noData | `string` | - | Текст для состояния "Отсутсвие данных" |
 | noResults | `string` | - | Текст для состояния "Отсутсвие результата" при поиске |
-| value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
-| defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
-| onChange | `((value: any) => void) \| ((value: any) => void)` | - | Controlled обработчик измения состояния |
-| selection | "single" \| "multiple" | - | Режим выбора |
+| tabIndex | `number` | - | Tab Index |
+| collapse | `CollapseState` | {} | Настройки раскрытия элементов |
+| className | `string` | - | CSS-класс |
+| onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - |  |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
 | size | "s" \| "m" \| "l" | - | Размер списка |
 | marker | `boolean` | - | Отображать ли маркер у выбранного жлемента списка |
 | scroll | `boolean` | - | Включить ли скролл для основной части списка |

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

@@ -1,8 +1,8 @@
-import { BaseItemPrivateProps, BaseItemProps, SwitchProps } from '../types';
-type AllBaseItemProps = BaseItemProps & BaseItemPrivateProps & SwitchProps & {
+import { BaseItemPrivateProps, BaseItemProps } from '../types';
+type AllBaseItemProps = BaseItemProps & BaseItemPrivateProps & {
     indeterminate?: boolean;
     onSelect?(): void;
     isParentNode?: boolean;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, ...rest }: AllBaseItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, ...rest }: AllBaseItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -19,20 +19,23 @@ import commonStyles from '../styles.module.css';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
-    var { beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode"]);
+    var { beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive"]);
     const { option, caption, description } = content || {};
+    const interactive = !inactive;
     const { parentResetActiveFocusIndex } = useParentListContext();
     const { size, marker } = useListContext();
     const { level = 0 } = useCollapseContext();
-    const { value, onChange, selection, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
+    const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     const isChecked = isSelectionSingle ? value === id : value === null || value === void 0 ? void 0 : value.includes(id);
     const handleChange = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange(id !== null && id !== void 0 ? id : '');
     };
     const handleItemClick = (e) => {
-        parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
-        if (!isParentNode) {
-            handleChange();
+        if (interactive) {
+            parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
+            if (!isParentNode) {
+                handleChange();
+            }
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
@@ -65,5 +68,5 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    return (_jsx("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, children: _jsxs("button", { ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, tabIndex: -1, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": selection || undefined, "data-open": open || undefined, disabled: disabled, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { text: option, maxLines: 1 }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), afterContent, switchProp && _jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' }), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
+    return (_jsx("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, children: _jsxs("button", { ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem, className), "data-size": size, onClick: handleItemClick, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-inactive": inactive || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, disabled: disabled, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { text: option, maxLines: 1 }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
 }

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

@@ -170,6 +170,9 @@
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
 }
+.droplistItem[data-non-pointer]{
+  cursor:inherit;
+}
 .droplistItem:disabled .option,
 .droplistItem:disabled .description,
 .droplistItem:disabled .caption,

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

@@ -62,5 +62,5 @@ export function NextListItem(_a) {
                     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 })) }) }));
+                }, children: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, search: search, scroll: scroll, scrollRef: scrollRef, limitedScrollHeight: true }) }), 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/styles.module.css

@@ -50,16 +50,6 @@
   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;
@@ -71,4 +61,14 @@
 .listItem:disabled::after{
   cursor:not-allowed;
   background-color:transparent;
+}
+.listItem:not([data-inactive])[data-open]::after, .listItem:not([data-inactive])[data-focused]::after, .listItem:not([data-inactive]):hover::after, .listItem:not([data-inactive]):focus-visible::after{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-neutral-accent-default, #757575);
+}
+.listItem:not([data-inactive])[data-focused], .listItem:not([data-inactive]):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);
 }

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

@@ -12,32 +12,57 @@ export type BaseItemPrivateProps = {
     open?: boolean;
 };
 export type BaseItemProps = WithSupportProps<{
+    /**
+     * Слот до основного контента
+     * @type ReactElement
+     */
     beforeContent?: ReactNode;
+    /**
+     * Слот после основного контента
+     * @type ReactElement
+     */
     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 = {
+    className?: string;
+    /**
+     * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
+     * <br>
+     * Так же элемент пропадает из навигации с клавиатуры, и не может быть выбран (selection)
+     */
+    inactive?: boolean;
+    /**
+     * Флаг отображения состояния выбранного элемента через switch
+     */
     switch?: boolean;
-};
-export type ItemProps = (BaseItemProps & SwitchProps) | AccordionItemProps | NextListItemProps | GroupItemProps;
-export type AccordionItemProps = BaseItemProps & {
+}>;
+type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
+export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
     items: ItemProps[];
     type: 'collapse';
 };
-export type NextListItemProps = BaseItemProps & {
+export type NextListItemProps = BaseItemsWithoutNonGroupProps & {
     items: ItemProps[];
     type: 'next-list';
     placement?: 'right-start' | 'left-start' | 'left' | 'right' | 'left-end' | 'right-end';
     search?: SearchState;
 } & ScrollProps;
-export type GroupItemProps = SeparatorProps & {
+export type GroupItemProps = Omit<SeparatorProps, 'size'> & {
     items: ItemProps[];
     id?: string | number;
 };
+export {};

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

@@ -1,2 +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;
+export declare function Droplist({ items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useMemo, useRef, useState } from 'react';
+import { cloneElement, isValidElement, useCallback, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
@@ -19,10 +19,16 @@ import { extractSelectionProps, ParentListContext, SelectionProvider } from '../
 import { useKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
 export function Droplist(_a) {
-    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange"]);
+    var _b;
+    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {} } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const memorizedItems = useMemo(() => addItemsIds((pinBottom !== null && pinBottom !== void 0 ? pinBottom : []).concat(itemsProp).concat(pinTop !== null && pinTop !== void 0 ? pinTop : [])), [itemsProp, pinBottom, pinTop]);
-    const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
+    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange
+        ? cb => {
+            var _a;
+            (_a = collapse.onChange) === null || _a === void 0 ? void 0 : _a.call(collapse, cb(collapse.value));
+        }
+        : undefined);
     const { search: searchItem, footerRefs } = useItemsWithIds({
         search: hasSearch,
         footerActiveElementsRefs,
@@ -88,8 +94,8 @@ export function Droplist(_a) {
                 parentRef: listRef,
                 parentResetNestedIndex: resetNestedIndex,
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
-                toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
-            }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({ onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search }, slicedItems, props)), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
+                toggleOpenCollapsedItems: id => setOpenCollapsedItems((items = []) => items.includes(id) ? items.filter(item => item !== id) : items === null || items === void 0 ? void 0 : items.concat([id])),
+            }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({ onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search, limitedScrollHeight: true }, slicedItems, props)), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
                 ? {}
                 : {
                     triggerRef: triggerElemRef,

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { KeyboardEvent } from 'react';
 export declare const List: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
@@ -11,4 +11,12 @@ export declare const List: import("react").ForwardRefExoticComponent<{
     loading?: boolean | undefined;
     noData?: string | undefined;
     noResults?: string | undefined;
-} & Pick<import("../contexts").SelectionProviderProps, "value" | "defaultValue" | "selection" | "onChange"> & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("react").RefAttributes<HTMLElement>>;
+    tabIndex?: number | undefined;
+    collapse?: {
+        value?: (string | number)[] | undefined;
+        onChange?(value: (string | number)[]): void;
+        defaultValue?: (string | number)[] | undefined;
+    } | undefined;
+    className?: string | undefined;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Lists/List/List.js

@@ -10,7 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef, useState } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 import { HiddenTabButton } from '../../../helperComponents';
 import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
 import { addItemsIds, getSlicedItems, useItemsWithIds } from '../../Items';
@@ -18,11 +21,17 @@ import { extractSelectionProps, ParentListContext, SelectionProvider, useParentL
 import { useKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.css';
-export const List = forwardRef((_a) => {
-    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs"]);
+export const List = forwardRef((_a, ref) => {
+    var _b;
+    var { items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, onKeyDown, tabIndex = 0, className, collapse = {} } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "onKeyDown", "tabIndex", "className", "collapse"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const memorizedItems = useMemo(() => addItemsIds((pinTop !== null && pinTop !== void 0 ? pinTop : []).concat(itemsProp).concat(pinBottom !== null && pinBottom !== void 0 ? pinBottom : [])), [itemsProp, pinBottom, pinTop]);
-    const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
+    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp(collapse.value, (_b = collapse.defaultValue) !== null && _b !== void 0 ? _b : [], collapse.onChange
+        ? cb => {
+            var _a;
+            (_a = collapse.onChange) === null || _a === void 0 ? void 0 : _a.call(collapse, cb(collapse.value));
+        }
+        : undefined);
     const { search: searchItem, footerRefs } = useItemsWithIds({
         search: hasSearch,
         footerActiveElementsRefs,
@@ -52,6 +61,16 @@ export const List = forwardRef((_a) => {
         itemRefs,
     });
     const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
+    const mergedHandlerKeyDown = (e) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        handleListKeyDown === null || handleListKeyDown === void 0 ? void 0 : handleListKeyDown(e);
+    };
+    const handleOnFocus = (e) => {
+        if (e.relatedTarget === null ||
+            (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))) {
+            resetActiveFocusIndex();
+        }
+    };
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -67,11 +86,6 @@ export const List = forwardRef((_a) => {
                 parentResetNestedIndex: resetNestedIndex,
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
                 openCollapsedItems,
-                toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
-            }, children: _jsxs("div", { className: styles.wrapper, "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: listRef, onFocus: e => {
-                            if (e.relatedTarget === null ||
-                                (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))) {
-                                resetActiveFocusIndex();
-                            }
-                        }, onKeyDown: handleListKeyDown, tabIndex: 0, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef })] }) }) })));
+                toggleOpenCollapsedItems: id => setOpenCollapsedItems((items = []) => items.includes(id) ? items.filter(item => item !== id) : items === null || items === void 0 ? void 0 : items.concat([id])),
+            }, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, Object.assign({}, props, slicedItems, { ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: tabIndex, search: search, nested: false })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) })));
 });

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

@@ -11,12 +11,20 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
     loading?: boolean | undefined;
     noData?: string | undefined;
     noResults?: string | undefined;
-} & Pick<import("../contexts").SelectionProviderProps, "value" | "defaultValue" | "selection" | "onChange"> & import("../contexts").ListContextType & import("../../../types").ScrollProps & {
+    tabIndex?: number | undefined;
+    collapse?: {
+        value?: (string | number)[] | undefined;
+        onChange?(value: (string | number)[]): void;
+        defaultValue?: (string | number)[] | undefined;
+    } | undefined;
+    className?: string | undefined;
+    onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
+} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & {
     nested?: boolean | undefined;
     active?: boolean | undefined;
     tabIndex?: number | undefined;
     onFocus?(e: import("react").FocusEvent<HTMLElement, Element>): void;
     onBlur?(e: import("react").FocusEvent<HTMLElement, Element>): void;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
-    collapse?: "single" | "multiple" | undefined;
+    limitedScrollHeight?: boolean | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
 import { forwardRef, useMemo } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
@@ -22,18 +22,18 @@ import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
 export const ListPrivate = forwardRef((_a, ref) => {
     var _b, _c;
-    var { items, pinTop, pinBottom, collapse = 'multiple', onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, noData = 'No data', noResults = 'No results', size = 's', marker } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "collapse", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "noData", "noResults", "size", "marker"]);
+    var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, scrollRef, scrollContainerRef, footer, loading, noData = 'No data', noResults = 'No results', size = 's', marker, limitedScrollHeight, className } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "scrollRef", "scrollContainerRef", "footer", "loading", "noData", "noResults", "size", "marker", "limitedScrollHeight", "className"]);
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop !== null && pinTop !== void 0 ? pinTop : []);
     const itemsPinBottomJSX = useRenderItems(pinBottom !== null && pinBottom !== void 0 ? pinBottom : []);
     const hasNoItems = items.length + ((_b = pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) !== null && _b !== void 0 ? _b : 0) + ((_c = pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) !== null && _c !== void 0 ? _c : 0) === 0;
     const loadingJSX = useMemo(() => loading && (_jsx("div", { role: 'spinbutton', tabIndex: -1, className: styles.loader, "data-size": size, "data-no-items": hasNoItems || undefined, "data-test-id": 'list__loader', children: _jsx(Spinner, { size: size === 'l' ? 's' : 'xs' }) })), [hasNoItems, loading, size]);
-    const content = useMemo(() => (_jsxs(_Fragment, { children: [itemsJSX, loadingJSX, hasNoItems && !(search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-data', children: noData })), hasNoItems && (search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-results', children: noResults }))] })), [hasNoItems, itemsJSX, loading, loadingJSX, noData, noResults, search === null || search === void 0 ? void 0 : search.value]);
-    const listJSX = (_jsx("ul", Object.assign({ className: commonStyles.listContainer, ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: !nested ? onFocus : undefined, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: _jsxs(ToggleGroup, { selectionMode: collapse, children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, { search: search }), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
-                        [commonStyles.scrollContainerS]: scroll && size === 's',
-                        [commonStyles.scrollContainerM]: scroll && size === 'm',
-                        [commonStyles.scrollContainerL]: scroll && size === 'l',
-                    }), barHideStrategy: 'never', size: 's', ref: scrollContainerRef, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), (Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 || footer) && (_jsxs(PinBottomGroupItem, { children: [Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && itemsPinBottomJSX, footer && _jsx("div", { className: styles.footer, children: footer })] }))] }) })));
+    const content = useMemo(() => (_jsxs("div", { className: styles.content, children: [itemsJSX, loadingJSX, hasNoItems && !(search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-data', children: noData })), hasNoItems && (search === null || search === void 0 ? void 0 : search.value) && !loading && (_jsx("div", { className: commonStyles.infoBlock, "data-test-id": 'list__no-results', children: noResults }))] })), [hasNoItems, itemsJSX, loading, loadingJSX, noData, noResults, search === null || search === void 0 ? void 0 : search.value]);
+    const listJSX = (_jsx("ul", Object.assign({ className: cn(commonStyles.listContainer, className), ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, onFocus: !nested ? onFocus : undefined, onBlur: onBlur, "data-active": active || undefined, role: 'menu' }, extractSupportProps(props), { children: _jsxs(ToggleGroup, { selectionMode: 'multiple', children: [(Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 || search) && (_jsxs(PinTopGroupItem, { children: [search && _jsx(SearchItem, { search: search }), Number(pinTop === null || pinTop === void 0 ? void 0 : pinTop.length) > 0 && itemsPinTopJSX] })), scroll ? (_jsxs(Scroll, { className: cn({
+                        [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
+                        [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
+                        [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
+                    }), barHideStrategy: 'leave', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), (Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 || footer) && (_jsxs(PinBottomGroupItem, { children: [Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && itemsPinBottomJSX, footer && _jsx("div", { className: styles.footer, children: footer })] }))] }) })));
     if (!nested) {
         return (_jsx(ListContextProvider, { size: size, marker: marker, children: listJSX }));
     }

package/dist/components/Lists/ListPrivate/styles.module.css

@@ -43,4 +43,8 @@
   justify-content:center;
   box-sizing:border-box;
   padding:var(--dimension-050m, 4px);
+}
+
+.content{
+  flex-grow:1;
 }

package/dist/components/Lists/contexts/SelectionProvider.d.ts

@@ -1,37 +1,41 @@
 import { ReactNode } from 'react';
 type SelectionSingleValueType = string | number | undefined;
-export type SelectionSingleProps = {
+type SelectionSingleState = {
     /** Начальное состояние */
     defaultValue?: SelectionSingleValueType;
     /** Controlled состояние */
     value?: SelectionSingleValueType;
     /** Controlled обработчик измения состояния */
     onChange?(value: any): void;
-    setValue?(value: any): void;
     /** Режим выбора */
-    selection: 'single';
+    mode: 'single';
+};
+export type SelectionSingleProps = {
+    setValue?(value: any): void;
     /** Режим выбора single */
     isSelectionSingle: true;
     /** Режим выбора multi */
     isSelectionMultiple: false;
-};
-export type SelectionMultipleProps = {
+} & SelectionSingleState;
+type SelectionMultipleState = {
     /** Начальное состояние */
     defaultValue?: SelectionSingleValueType[];
     /** Controlled состояние */
     value?: SelectionSingleValueType[];
     /** Controlled обработчик измения состояния */
     onChange?(value: any): void;
-    setValue?(value: any): void;
     /** Режим выбора */
-    selection: 'multiple';
+    mode: 'multiple';
+};
+export type SelectionMultipleProps = {
+    setValue?(value: any): void;
     /** Режим выбора single */
     isSelectionSingle: false;
     /** Режим выбора multi */
     isSelectionMultiple: true;
-};
+} & SelectionMultipleState;
 type SelectionNoneProps = {
-    selection?: undefined;
+    mode?: undefined;
     value?: undefined;
     onChange?: undefined;
     setValue?: undefined;
@@ -39,15 +43,18 @@ type SelectionNoneProps = {
     isSelectionSingle?: undefined;
     isSelectionMultiple?: undefined;
 };
-export type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
+type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
 type SelectionContextType = Omit<SelectionNoneProps, 'defaultValue'> | Omit<SelectionSingleProps, 'defaultValue'> | Omit<SelectionMultipleProps, 'defaultValue'>;
+export type SelectionState = {
+    selection?: SelectionSingleState | SelectionMultipleState;
+};
 export declare const SelectionContext: import("react").Context<SelectionContextType>;
 export declare function isSelectionMultipleProps(props: any): props is SelectionMultipleProps;
 export declare function isSelectionSingleProps(props: any): props is SelectionSingleProps;
 type Child = {
     children: ReactNode;
 };
-export declare function SelectionProvider(props: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
+export declare function SelectionProvider({ children, ...props }: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
 export declare const useSelectionContext: () => SelectionContextType;
-export declare function extractSelectionProps<T extends SelectionProviderProps>({ selection, value, defaultValue, onChange, }: T): SelectionProviderProps;
+export declare function extractSelectionProps<T extends SelectionState>({ selection }: T): SelectionProviderProps;
 export {};