@snack-uikit/list 0.2.2-preview-0cc330d4.0 → 0.3.1-preview-744f94d0.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.3.0 (2024-02-07)
+
+
+### Features
+
+* **FF-4241:** add itemWrapRender ([4efb798](https://github.com/cloud-ru-tech/snack-uikit/commit/4efb79897b8ef129e89bf62a9332b93d79648bbf))
+
+
+
+
+
 ## 0.2.1 (2024-02-05)
 
 ### Only dependencies have been changed

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

@@ -37,5 +37,5 @@ export function AccordionItem(_a) {
         toggleOpenCollapsedItems === null || toggleOpenCollapsedItems === void 0 ? void 0 : toggleOpenCollapsedItems(id !== null && id !== void 0 ? id : '');
         (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, e);
     };
-    return (_jsx("li", { style: { listStyleType: 'none' }, children: _jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onKeyDown: handleKeyDown, indeterminate: isIndeterminate && !checked, onSelect: !disabled ? handleOnSelect : undefined })), expanded: open, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }) }));
+    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onKeyDown: handleKeyDown, indeterminate: isIndeterminate && !checked, onSelect: !disabled ? handleOnSelect : undefined })), expanded: open, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
 }

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

@@ -23,7 +23,7 @@ export function BaseItem(_a) {
     const { option, caption, description } = content || {};
     const interactive = !inactive;
     const { parentResetActiveFocusIndex } = useParentListContext();
-    const { size, marker } = useListContext();
+    const { size, marker, parent } = useListContext();
     const { level = 0 } = useCollapseContext();
     const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     const isChecked = isSelectionSingle ? value === id : value === null || value === void 0 ? void 0 : value.includes(id);
@@ -68,7 +68,7 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    const item = (_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 })] }) }));
+    const item = (_jsxs("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, 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, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', 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 })] }));
     if (!itemWrapRender) {
         return item;
     }

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

@@ -72,6 +72,7 @@
 }
 
 .content{
+  overflow:hidden;
   flex-grow:1;
   flex-shrink:1;
   box-sizing:border-box;
@@ -170,16 +171,26 @@
   letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
   paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
 }
+.droplistItem[data-parent=list]{
+  width:100%;
+}
+.droplistItem[data-parent=droplist]{
+  width:-moz-max-content;
+  width:max-content;
+}
 .droplistItem[data-non-pointer]{
   cursor:inherit;
 }
-.droplistItem:disabled .option,
+.droplistItem[aria-disabled] .option,
+.droplistItem[aria-disabled] .description,
+.droplistItem[aria-disabled] .caption,
+.droplistItem[aria-disabled] .expandableIcon, .droplistItem:disabled .option,
 .droplistItem:disabled .description,
 .droplistItem:disabled .caption,
 .droplistItem:disabled .expandableIcon{
   color:var(--sys-neutral-text-disabled, #9e9e9e);
 }
-.droplistItem:disabled .beforeContent{
+.droplistItem[aria-disabled] .beforeContent, .droplistItem:disabled .beforeContent{
   opacity:var(--opacity-a064, 0.64);
 }
 .droplistItem[data-has-checked][data-variant=single]::after, .droplistItem[data-checked][data-variant=single]::after{

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

@@ -51,16 +51,16 @@ export function NextListItem(_a) {
         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, 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 })) }) }));
+    return (_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, 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/NextListItem/hooks.d.ts

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

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

@@ -25,18 +25,18 @@ export type BaseItemProps = WithSupportProps<{
     /** Основной контент айтема */
     content: ItemContentProps;
     /** Колбек обработки клика */
-    onClick?(e: MouseEvent<HTMLButtonElement>): void;
+    onClick?(e: MouseEvent<HTMLElement>): void;
     /** Колбек обработки нажатия клавиши */
-    onKeyDown?(e: KeyboardEvent<HTMLButtonElement>): void;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     /** Колбек обработки фокуса */
-    onFocus?(e: FocusEvent<HTMLButtonElement>): void;
+    onFocus?(e: FocusEvent<HTMLElement>): void;
     /** Колбек обработки блюра */
-    onBlur?(e: FocusEvent<HTMLButtonElement>): void;
+    onBlur?(e: FocusEvent<HTMLElement>): void;
     /** Уникальный идентификатор */
     id?: string | number;
     /** Флаг неактивности элемента */
     disabled?: boolean;
-    itemRef?: RefObject<HTMLButtonElement>;
+    itemRef?: RefObject<HTMLElement>;
     className?: string;
     /**
      * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)

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

@@ -95,7 +95,7 @@ export function Droplist(_a) {
                 parentResetNestedIndex: resetNestedIndex,
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
                 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
+            }, children: _jsx(Dropdown, Object.assign({ content: _jsx(ListPrivate, Object.assign({}, slicedItems, props, { onKeyDown: handleListKeyDown, tabIndex: 0, ref: listRef, search: search, limitedScrollHeight: true, parent: 'droplist' })), trigger: trigger, placement: placement, widthStrategy: widthStrategy }, (triggerElemRefProp
                 ? {}
                 : {
                     triggerRef: triggerElemRef,

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

@@ -87,5 +87,5 @@ export const List = forwardRef((_a, ref) => {
                 parentResetActiveFocusIndex: resetActiveFocusIndex,
                 openCollapsedItems,
                 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 })] }) }) })));
+            }, 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, parent: 'list' })), _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) })));
 });

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

@@ -19,7 +19,7 @@ export declare const ListPrivate: import("react").ForwardRefExoticComponent<{
     } | undefined;
     className?: string | undefined;
     onKeyDown?(e: import("react").KeyboardEvent<HTMLElement>): void;
-} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & {
+} & import("../contexts").SelectionState & import("../contexts").ListContextType & import("../../../types").ScrollProps & import("../contexts").ListContextPrivateType & {
     nested?: boolean | undefined;
     active?: boolean | undefined;
     tabIndex?: number | undefined;

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

@@ -22,7 +22,7 @@ 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, 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"]);
+    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, parent = 'list' } = _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", "parent"]);
     const itemsJSX = useRenderItems(items);
     const itemsPinTopJSX = useRenderItems(pinTop !== null && pinTop !== void 0 ? pinTop : []);
     const itemsPinBottomJSX = useRenderItems(pinBottom !== null && pinBottom !== void 0 ? pinBottom : []);
@@ -35,7 +35,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
                         [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 }));
+        return (_jsx(ListContextProvider, { size: size, marker: marker, parent: parent, children: listJSX }));
     }
     return (_jsx("li", { style: { listStyleType: 'none' }, role: 'menuitem', children: listJSX }));
 });

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

@@ -38,9 +38,6 @@
 .footer{
   display:flex;
   flex-direction:column;
-  gap:var(--dimension-050m, 4px);
-  align-items:center;
-  justify-content:center;
   box-sizing:border-box;
   padding:var(--dimension-050m, 4px);
 }

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

@@ -5,10 +5,13 @@ export type ListContextType = {
     /** Отображать ли маркер у выбранного жлемента списка */
     marker?: boolean;
 };
+export type ListContextPrivateType = {
+    parent?: 'list' | 'droplist';
+};
 type Child = {
     children: ReactNode;
 };
-export declare const ListContext: import("react").Context<ListContextType>;
-export declare const useListContext: () => ListContextType;
-export declare function ListContextProvider({ children, ...props }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
+export declare const ListContext: import("react").Context<ListContextType & ListContextPrivateType>;
+export declare const useListContext: () => ListContextType & ListContextPrivateType;
+export declare function ListContextProvider({ children, ...props }: ListContextType & Child & ListContextPrivateType): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Lists/contexts/ListProvider.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 export const ListContext = createContext({});
 export const useListContext = () => useContext(ListContext);
-function extractListProps({ size, marker }) {
-    return { size, marker };
+function extractListProps({ size, marker, parent }) {
+    return { size, marker, parent };
 }
 export function ListContextProvider(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);

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

@@ -5,7 +5,7 @@ export type ParentListContextType = {
     parentResetActiveFocusIndex?(): void;
     parentIds: Array<string | number>;
     parentExpandedIds: Array<string | number>;
-    parentItemRefs: Array<RefObject<HTMLButtonElement>>;
+    parentItemRefs: Array<RefObject<HTMLElement>>;
     parentOpenNestedIndex: number;
     parentResetNestedIndex?(): void;
     openCollapsedItems?: Array<string | number>;

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

@@ -4,7 +4,7 @@ export type UseKeyboardNavigationProps<T extends HTMLElement> = {
     expandedIds: Array<number | string>;
     parentRef?: RefObject<T>;
     btnRef?: RefObject<HTMLButtonElement>;
-    itemRefs?: RefObject<HTMLButtonElement>[];
+    itemRefs?: RefObject<HTMLElement>[];
 };
 export declare function useKeyboardNavigation<T extends HTMLElement>({ ids, itemRefs, expandedIds, parentRef, btnRef, }: UseKeyboardNavigationProps<T>): {
     activeFocusIndex: number;

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

@@ -3,7 +3,7 @@ import { DropdownProps } from '@snack-uikit/dropdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ScrollProps, SearchState } from '../../types';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionState } from './contexts';
+import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
 type CollapseState = {
     value?: (string | number)[];
     onChange?(value: (string | number)[]): void;
@@ -45,7 +45,7 @@ export type DroplistProps = {
     /** Триггер для дроплиста */
     children?: ReactNode;
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
-export type ListPrivateProps = ListProps & {
+export type ListPrivateProps = ListProps & ListContextPrivateType & {
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;

package/dist/utils.d.ts

@@ -6,11 +6,11 @@ type WithCollapsedItemsProps = {
 };
 export declare function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps): {
     items: ItemProps[];
-    itemRefs: RefObject<HTMLButtonElement>[];
+    itemRefs: RefObject<HTMLElement>[];
     ids: (string | number)[];
     expandedIds: (string | number)[];
 };
-export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLButtonElement>[];
+export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[];
 export declare function extractItemIds(items: ItemProps[]): Array<string | number>;
 export declare function extractChildIds({ items }: {
     items: ItemProps[];

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.2.2-preview-0cc330d4.0",
+  "version": "0.3.1-preview-744f94d0.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -45,5 +45,5 @@
     "merge-refs": "1.2.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "1793fab65c6cfb47e3a67e457f5a1d7156ccd452"
+  "gitHead": "66388dea37bc61fd867e4231d413486aa687bc48"
 }

package/src/components/Items/AccordionItem/AccordionItem.tsx

@@ -16,7 +16,7 @@ export function AccordionItem({ items: itemsProp, id, disabled, ...option }: Acc
 
   const { isChecked: open, handleClick: handleChange } = useToggleGroup({ value: String(id) });
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     if (e.key === 'ArrowRight') {
       handleChange();
       toggleOpenCollapsedItems?.(id ?? '');
@@ -28,33 +28,31 @@ export function AccordionItem({ items: itemsProp, id, disabled, ...option }: Acc
 
   const itemsJSX = useRenderItems(itemsProp);
 
-  const handleItemClick = (e: MouseEvent<HTMLButtonElement>) => {
+  const handleItemClick = (e: MouseEvent<HTMLElement>) => {
     handleChange();
     toggleOpenCollapsedItems?.(id ?? '');
     option.onClick?.(e);
   };
 
   return (
-    <li style={{ listStyleType: 'none' }}>
-      <CollapseBlockPrivate
-        header={
-          <BaseItem
-            {...option}
-            id={id}
-            disabled={disabled}
-            expandIcon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
-            onClick={handleItemClick}
-            isParentNode
-            onKeyDown={handleKeyDown}
-            indeterminate={isIndeterminate && !checked}
-            onSelect={!disabled ? handleOnSelect : undefined}
-          />
-        }
-        expanded={open}
-        data-test-id={`list__accordion-item-${id}`}
-      >
-        <CollapseContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseContext.Provider>
-      </CollapseBlockPrivate>
-    </li>
+    <CollapseBlockPrivate
+      header={
+        <BaseItem
+          {...option}
+          id={id}
+          disabled={disabled}
+          expandIcon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          onClick={handleItemClick}
+          isParentNode
+          onKeyDown={handleKeyDown}
+          indeterminate={isIndeterminate && !checked}
+          onSelect={!disabled ? handleOnSelect : undefined}
+        />
+      }
+      expanded={open}
+      data-test-id={`list__accordion-item-${id}`}
+    >
+      <CollapseContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseContext.Provider>
+    </CollapseBlockPrivate>
   );
 }

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import { FocusEvent, KeyboardEvent, MouseEvent, RefObject } from 'react';
 
 import { Checkbox, Switch } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
@@ -39,7 +39,7 @@ export function BaseItem({
   const interactive = !inactive;
 
   const { parentResetActiveFocusIndex } = useParentListContext();
-  const { size, marker } = useListContext();
+  const { size, marker, parent } = useListContext();
   const { level = 0 } = useCollapseContext();
   const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
@@ -49,7 +49,7 @@ export function BaseItem({
     onChange?.(id ?? '');
   };
 
-  const handleItemClick = (e: MouseEvent<HTMLButtonElement>) => {
+  const handleItemClick = (e: MouseEvent<HTMLElement>) => {
     if (interactive) {
       parentResetActiveFocusIndex?.();
 
@@ -61,7 +61,7 @@ export function BaseItem({
     onClick?.(e);
   };
 
-  const handleItemKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+  const handleItemKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     onKeyDown?.(e);
 
     if (e.code === 'Space' || e.key === 'Enter') {
@@ -71,14 +71,14 @@ export function BaseItem({
 
       !isParentNode && handleChange();
       // TODO: should pass an event here?
-      !isParentNode && onClick?.(e as unknown as MouseEvent<HTMLButtonElement>);
+      !isParentNode && onClick?.(e as unknown as MouseEvent<HTMLElement>);
 
       e.stopPropagation();
       e.preventDefault();
     }
   };
 
-  const handleItemFocus = (e: FocusEvent<HTMLButtonElement>) => {
+  const handleItemFocus = (e: FocusEvent<HTMLElement>) => {
     onFocus?.(e);
     e.stopPropagation();
   };
@@ -98,65 +98,66 @@ export function BaseItem({
   const props = extractSupportProps(rest);
 
   const item = (
-    <li role={'menuitem'} data-test-id={props['data-test-id'] || 'list__base-item_' + id}>
-      <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 }}
-      >
-        {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
-          <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
-        )}
-        {!switchProp && isSelectionMultiple && interactive && (
-          <div className={styles.checkbox}>
-            <Checkbox
-              size={CHECKBOX_SIZE_MAP[size ?? 's']}
-              disabled={disabled}
-              tabIndex={-1}
-              onChange={handleCheckboxChange}
-              checked={isChecked}
-              data-test-id='list__base-item-checkbox'
-              onClick={handleCheckboxClick}
-              indeterminate={indeterminate}
-            />
-          </div>
-        )}
-
-        {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
+    <li
+      role={'menuitem'}
+      data-test-id={props['data-test-id'] || 'list__base-item_' + id}
+      ref={itemRef as unknown as RefObject<HTMLLIElement>}
+      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}
+      aria-disabled={disabled || undefined}
+      data-parent={parent || 'list'}
+      onKeyDown={handleItemKeyDown}
+      onFocus={handleItemFocus}
+      style={{ '--level': level }}
+    >
+      {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
+        <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
+      )}
+      {!switchProp && isSelectionMultiple && interactive && (
+        <div className={styles.checkbox}>
+          <Checkbox
+            size={CHECKBOX_SIZE_MAP[size ?? 's']}
+            disabled={disabled}
+            tabIndex={-1}
+            onChange={handleCheckboxChange}
+            checked={isChecked}
+            data-test-id='list__base-item-checkbox'
+            onClick={handleCheckboxClick}
+            indeterminate={indeterminate}
+          />
+        </div>
+      )}
 
-        <div className={styles.content}>
-          <div className={styles.headline}>
-            <span className={styles.option}>
-              <TruncateString text={option} maxLines={1} />
-            </span>
-            {caption && <span className={styles.caption}>{caption}</span>}
-          </div>
+      {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
 
-          {description && (
-            <div className={styles.description}>
-              <TruncateString text={description} maxLines={2} />
-            </div>
-          )}
+      <div className={styles.content}>
+        <div className={styles.headline}>
+          <span className={styles.option}>
+            <TruncateString text={option} maxLines={1} />
+          </span>
+          {caption && <span className={styles.caption}>{caption}</span>}
         </div>
 
-        {afterContent}
-
-        {switchProp && interactive && (
-          <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
+        {description && (
+          <div className={styles.description}>
+            <TruncateString text={description} maxLines={2} />
+          </div>
         )}
-        {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
-      </button>
+      </div>
+
+      {afterContent}
+
+      {switchProp && interactive && (
+        <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
+      )}
+      {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
     </li>
   );
 

package/src/components/Items/BaseItem/styles.module.scss

@@ -104,6 +104,7 @@ $typography: (
 }
 
 .content {
+  overflow: hidden;
   flex-grow: 1;
   flex-shrink: 1;
   box-sizing: border-box;
@@ -134,10 +135,19 @@ $typography: (
     }
   }
 
+  &[data-parent='list'] {
+    width: 100%;
+  }
+
+  &[data-parent='droplist'] {
+    width: max-content;
+  }
+
   &[data-non-pointer] {
     cursor: inherit;
   }
 
+  &[aria-disabled],
   &:disabled {
     .option,
     .description,

package/src/components/Items/NextListItem/NextListItem.tsx

@@ -78,55 +78,53 @@ export function NextListItem({
   }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
 
   return (
-    <li style={{ listStyleType: 'none' }}>
-      <Dropdown
-        outsideClick={handleOutsideClick}
-        fallbackPlacements={FALLBACK_PLACEMENTS}
-        content={
-          <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]),
-                ),
-            }}
-          >
-            <ListPrivate
-              onKeyDown={handleListKeyDown}
-              items={items}
-              nested
-              search={search}
-              scroll={scroll}
-              scrollRef={scrollRef}
-              limitedScrollHeight
-            />
-          </ParentListContext.Provider>
-        }
-        trigger='hover'
-        open={(open || parentIds[parentOpenNestedIndex] === id) && !disabled}
-        onOpenChange={handleOpenChange}
-        placement={placement}
-      >
-        <BaseItem
-          {...option}
-          disabled={disabled}
-          open={open}
-          expandIcon={<ChevronRightSVG />}
-          id={id}
-          isParentNode
-          indeterminate={isIndeterminate && !checked}
-          onSelect={handleOnSelect}
-        />
-      </Dropdown>
-    </li>
+    <Dropdown
+      outsideClick={handleOutsideClick}
+      fallbackPlacements={FALLBACK_PLACEMENTS}
+      content={
+        <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]),
+              ),
+          }}
+        >
+          <ListPrivate
+            onKeyDown={handleListKeyDown}
+            items={items}
+            nested
+            search={search}
+            scroll={scroll}
+            scrollRef={scrollRef}
+            limitedScrollHeight
+          />
+        </ParentListContext.Provider>
+      }
+      trigger='hover'
+      open={(open || parentIds[parentOpenNestedIndex] === id) && !disabled}
+      onOpenChange={handleOpenChange}
+      placement={placement}
+    >
+      <BaseItem
+        {...option}
+        disabled={disabled}
+        open={open}
+        expandIcon={<ChevronRightSVG />}
+        id={id}
+        isParentNode
+        indeterminate={isIndeterminate && !checked}
+        onSelect={handleOnSelect}
+      />
+    </Dropdown>
   );
 }

package/src/components/Items/NextListItem/hooks.ts

@@ -5,7 +5,7 @@ import { useParentListContext } from '../../Lists/contexts';
 type UseKeyboardNavigationProps = {
   ids: Array<number | string>;
   expandedIds: Array<number | string>;
-  itemRefs?: RefObject<HTMLButtonElement>[];
+  itemRefs?: RefObject<HTMLElement>[];
   id?: string | number;
 };
 
@@ -17,7 +17,7 @@ export function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }: UseKey
   const [openNestedIndex, setOpenNestedIndex] = useState<number>(-1);
   const [open, setOpen] = useState<boolean>(false);
 
-  const handleListKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+  const handleListKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     switch (e.key) {
       case 'ArrowDown': {
         setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));

package/src/components/Items/types.ts

@@ -31,13 +31,13 @@ export type BaseItemProps = WithSupportProps<{
   content: ItemContentProps;
 
   /** Колбек обработки клика */
-  onClick?(e: MouseEvent<HTMLButtonElement>): void;
+  onClick?(e: MouseEvent<HTMLElement>): void;
   /** Колбек обработки нажатия клавиши */
-  onKeyDown?(e: KeyboardEvent<HTMLButtonElement>): void;
+  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
   /** Колбек обработки фокуса */
-  onFocus?(e: FocusEvent<HTMLButtonElement>): void;
+  onFocus?(e: FocusEvent<HTMLElement>): void;
   /** Колбек обработки блюра */
-  onBlur?(e: FocusEvent<HTMLButtonElement>): void;
+  onBlur?(e: FocusEvent<HTMLElement>): void;
 
   /** Уникальный идентификатор */
   id?: string | number;
@@ -45,7 +45,7 @@ export type BaseItemProps = WithSupportProps<{
   /** Флаг неактивности элемента */
   disabled?: boolean;
 
-  itemRef?: RefObject<HTMLButtonElement>;
+  itemRef?: RefObject<HTMLElement>;
   className?: string;
 
   /**

package/src/components/Items/utils.ts

@@ -60,10 +60,10 @@ export function addItemsIds(itemsProp: ItemProps[], prefix?: string | number): I
         ...item,
         id: itemId,
         items: addItemsIds(item.items, itemId),
-        itemRef: item.itemRef || createRef<HTMLButtonElement>(),
+        itemRef: item.itemRef || createRef<HTMLElement>(),
       };
     }
 
-    return { ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLButtonElement>() };
+    return { ...item, id: itemId, itemRef: item.itemRef || createRef<HTMLElement>() };
   });
 }

package/src/components/Lists/Droplist/DropList.tsx

@@ -147,13 +147,14 @@ export function Droplist({
         <Dropdown
           content={
             <ListPrivate
+              {...slicedItems}
+              {...props}
               onKeyDown={handleListKeyDown}
               tabIndex={0}
               ref={listRef}
               search={search}
               limitedScrollHeight
-              {...slicedItems}
-              {...props}
+              parent='droplist'
             />
           }
           trigger={trigger}

package/src/components/Lists/List/List.tsx

@@ -71,7 +71,7 @@ export const List = forwardRef<HTMLElement, ListProps>(
       [items, hasSearch, pinTop, pinBottom, footerRefs],
     );
 
-    const listRef = useRef<HTMLUListElement>(null);
+    const listRef = useRef<HTMLElement>(null);
     const btnRef = useRef<HTMLButtonElement>(null);
 
     const { triggerRef } = useParentListContext();
@@ -93,7 +93,7 @@ export const List = forwardRef<HTMLElement, ListProps>(
 
     const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
 
-    const mergedHandlerKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+    const mergedHandlerKeyDown = (e: KeyboardEvent<HTMLElement>) => {
       onKeyDown?.(e);
       handleListKeyDown?.(e);
     };
@@ -141,6 +141,7 @@ export const List = forwardRef<HTMLElement, ListProps>(
               tabIndex={tabIndex}
               search={search}
               nested={false}
+              parent='list'
             />
 
             <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -36,6 +36,7 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
       marker,
       limitedScrollHeight,
       className,
+      parent = 'list',
       ...props
     },
     ref,
@@ -135,7 +136,7 @@ export const ListPrivate = forwardRef<HTMLElement, ListPrivateProps>(
 
     if (!nested) {
       return (
-        <ListContextProvider size={size} marker={marker}>
+        <ListContextProvider size={size} marker={marker} parent={parent}>
           {listJSX}
         </ListContextProvider>
       );

package/src/components/Lists/ListPrivate/styles.module.scss

@@ -39,10 +39,6 @@ $loader-height: (
 .footer {
   display: flex;
   flex-direction: column;
-  gap: $dimension-050m;
-  align-items: center;
-  justify-content: center;
-
   box-sizing: border-box;
   padding: $dimension-050m;
 }

package/src/components/Lists/contexts/ListProvider.tsx

@@ -7,18 +7,22 @@ export type ListContextType = {
   marker?: boolean;
 };
 
+export type ListContextPrivateType = {
+  parent?: 'list' | 'droplist';
+};
+
 type Child = {
   children: ReactNode;
 };
 
-export const ListContext = createContext<ListContextType>({});
+export const ListContext = createContext<ListContextType & ListContextPrivateType>({});
 
 export const useListContext = () => useContext(ListContext);
 
-function extractListProps<T extends ListContextType>({ size, marker }: T) {
-  return { size, marker };
+function extractListProps<T extends ListContextType & ListContextPrivateType>({ size, marker, parent }: T) {
+  return { size, marker, parent };
 }
 
-export function ListContextProvider({ children, ...props }: ListContextType & Child) {
+export function ListContextProvider({ children, ...props }: ListContextType & Child & ListContextPrivateType) {
   return <ListContext.Provider value={extractListProps(props)}>{children}</ListContext.Provider>;
 }

package/src/components/Lists/contexts/ParentListProvider.tsx

@@ -7,7 +7,7 @@ export type ParentListContextType = {
 
   parentIds: Array<string | number>;
   parentExpandedIds: Array<string | number>;
-  parentItemRefs: Array<RefObject<HTMLButtonElement>>;
+  parentItemRefs: Array<RefObject<HTMLElement>>;
 
   parentOpenNestedIndex: number;
   parentResetNestedIndex?(): void;

package/src/components/Lists/hooks.ts

@@ -5,7 +5,7 @@ export type UseKeyboardNavigationProps<T extends HTMLElement> = {
   expandedIds: Array<number | string>;
   parentRef?: RefObject<T>;
   btnRef?: RefObject<HTMLButtonElement>;
-  itemRefs?: RefObject<HTMLButtonElement>[];
+  itemRefs?: RefObject<HTMLElement>[];
 };
 
 export function useKeyboardNavigation<T extends HTMLElement>({

package/src/components/Lists/types.ts

@@ -5,7 +5,7 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { ScrollProps, SearchState } from '../../types';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionState } from './contexts';
+import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
 
 type CollapseState = {
   value?: (string | number)[];
@@ -56,12 +56,13 @@ export type DroplistProps = {
 } & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> &
   Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 
-export type ListPrivateProps = ListProps & {
-  nested?: boolean;
-  active?: boolean;
-  tabIndex?: number;
-  onFocus?(e: FocusEvent<HTMLElement>): void;
-  onBlur?(e: FocusEvent<HTMLElement>): void;
-  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-  limitedScrollHeight?: boolean;
-};
+export type ListPrivateProps = ListProps &
+  ListContextPrivateType & {
+    nested?: boolean;
+    active?: boolean;
+    tabIndex?: number;
+    onFocus?(e: FocusEvent<HTMLElement>): void;
+    onBlur?(e: FocusEvent<HTMLElement>): void;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    limitedScrollHeight?: boolean;
+  };

package/src/utils.ts

@@ -14,7 +14,7 @@ type WithCollapsedItemsProps = {
 };
 
 export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps) {
-  let itemRefs: RefObject<HTMLButtonElement>[] = [];
+  let itemRefs: RefObject<HTMLElement>[] = [];
   let newItems: ItemProps[] = [];
   let ids: Array<string | number> = [];
   let expandedIds: Array<string | number> = [];
@@ -68,13 +68,13 @@ export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedI
   return { items, itemRefs, ids, expandedIds };
 }
 
-export function extractItemRefs(items: ItemProps[]): RefObject<HTMLButtonElement>[] {
-  return items.reduce((prev: RefObject<HTMLButtonElement>[], item: ItemProps) => {
+export function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[] {
+  return items.reduce((prev: RefObject<HTMLElement>[], item: ItemProps) => {
     if (isGroupItemProps(item)) {
       return prev.concat(extractItemRefs(item.items));
     }
     return item.itemRef ? prev.concat([item.itemRef]) : prev;
-  }, [] as RefObject<HTMLButtonElement>[]);
+  }, [] as RefObject<HTMLElement>[]);
 }
 
 export function extractItemIds(items: ItemProps[]): Array<string | number> {