@snack-uikit/list 0.2.2-preview-006b34c3.0 → 0.3.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

@@ -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, 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

@@ -173,13 +173,16 @@
 .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/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/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-006b34c3.0",
+  "version": "0.3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -45,5 +45,5 @@
     "merge-refs": "1.2.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "8506192aa12bfb6f5359915a8601e942561d1b5a"
+  "gitHead": "88a44a8f4c6490f3004f7feac3d50d17ff03f31c"
 }

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';
@@ -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,65 @@ 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}
+      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

@@ -138,6 +138,7 @@ $typography: (
     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/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);
     };

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/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> {