@snack-uikit/list 0.1.3 → 0.2.1-preview-a0815a00.0

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

@@ -1,18 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 export const SelectionContext = createContext({
     value: undefined,
     onChange: undefined,
-    selection: undefined,
+    mode: undefined,
 });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSelectionMultipleProps(props) {
-    return 'selection' in props && props['selection'] === 'multiple';
+    return 'mode' in props && props['mode'] === 'multiple';
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSelectionSingleProps(props) {
-    return 'selection' in props && props['selection'] === 'single';
+    return 'mode' in props && props['mode'] === 'single';
 }
 function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
     const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, cb => {
@@ -24,7 +35,14 @@ function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onC
         }
         return undefined;
     }), [setValue]);
-    return (_jsx(SelectionContext.Provider, { value: { value, onChange, selection: 'single', isSelectionSingle: true, isSelectionMultiple: false, setValue }, children: children }));
+    return (_jsx(SelectionContext.Provider, { value: {
+            value,
+            onChange,
+            mode: 'single',
+            isSelectionSingle: true,
+            isSelectionMultiple: false,
+            setValue,
+        }, children: children }));
 }
 function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
     const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, cb => {
@@ -39,23 +57,26 @@ function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: o
         }
         return undefined;
     }), [setValue]);
-    return (_jsx(SelectionContext.Provider, { value: { value, onChange, selection: 'multiple', isSelectionSingle: false, isSelectionMultiple: true, setValue }, children: children }));
+    return (_jsx(SelectionContext.Provider, { value: {
+            value,
+            onChange,
+            mode: 'multiple',
+            isSelectionSingle: false,
+            isSelectionMultiple: true,
+            setValue,
+        }, children: children }));
 }
-export function SelectionProvider(props) {
+export function SelectionProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
     if (isSelectionSingleProps(props)) {
-        return _jsx(SelectionSingleProvider, Object.assign({}, props));
+        return _jsx(SelectionSingleProvider, Object.assign({}, props, { children: children }));
     }
     if (isSelectionMultipleProps(props)) {
-        return _jsx(SelectionMultipleProvider, Object.assign({}, props));
+        return _jsx(SelectionMultipleProvider, Object.assign({}, props, { children: children }));
     }
-    return _jsx(SelectionContext.Provider, { value: {}, children: props.children });
+    return _jsx(SelectionContext.Provider, { value: {}, children: children });
 }
 export const useSelectionContext = () => useContext(SelectionContext);
-export function extractSelectionProps({ selection, value, defaultValue, onChange, }) {
-    return {
-        selection,
-        value,
-        defaultValue,
-        onChange,
-    };
+export function extractSelectionProps({ selection }) {
+    return Object.assign({}, (selection !== null && selection !== void 0 ? selection : {}));
 }

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

@@ -1,4 +1,7 @@
 .listContainer{
+  display:flex;
+  flex-direction:column;
+  height:100%;
   margin:0;
   padding:0;
 }
@@ -26,6 +29,7 @@
   overflow:hidden;
   display:block;
   box-sizing:border-box;
+  height:100%;
   padding:var(--dimension-025m, 2px);
 }
 .wrapper:has(.listContainer:focus-visible){

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

@@ -3,7 +3,12 @@ import { DropdownProps } from '@snack-uikit/dropdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ScrollProps, SearchState } from '../../types';
 import { ItemProps } from '../Items';
-import { ListContextType, SelectionProviderProps } from './contexts';
+import { ListContextType, SelectionState } from './contexts';
+type CollapseState = {
+    value?: (string | number)[];
+    onChange?(value: (string | number)[]): void;
+    defaultValue?: (string | number)[];
+};
 export type ListProps = WithSupportProps<{
     /** Основные элементы списка */
     items: ItemProps[];
@@ -11,9 +16,12 @@ export type ListProps = WithSupportProps<{
     pinTop?: ItemProps[];
     /** Элементы списка, закрепленные снизу */
     pinBottom?: ItemProps[];
-    /** Кастомизируемый элемент, помещаемый внизу списка */
+    /**
+     * Кастомизируемый элемент в конце списка
+     * @type ReactElement
+     */
     footer?: ReactNode;
-    /** Список ссылок на костомные элементы, помещенные в специальную секцию внизу списка  */
+    /** Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка  */
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
     /** Настройки поисковой строки */
     search?: SearchState;
@@ -23,13 +31,20 @@ export type ListProps = WithSupportProps<{
     noData?: string;
     /** Текст для состояния "Отсутсвие результата" при поиске */
     noResults?: string;
-} & Pick<SelectionProviderProps, 'value' | 'defaultValue' | 'onChange' | 'selection'> & ListContextType & ScrollProps>;
+    /** Tab Index */
+    tabIndex?: number;
+    /** Настройки раскрытия элементов */
+    collapse?: CollapseState;
+    /** CSS-класс */
+    className?: string;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+} & SelectionState & ListContextType & ScrollProps>;
 export type DroplistProps = {
     /** Ссылка на элемент-триггер для дроплиста */
     triggerElemRef?: RefObject<HTMLElement>;
     /** Триггер для дроплиста */
     children?: ReactNode;
-} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & ListProps;
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
 export type ListPrivateProps = ListProps & {
     nested?: boolean;
     active?: boolean;
@@ -37,5 +52,6 @@ export type ListPrivateProps = ListProps & {
     onFocus?(e: FocusEvent<HTMLElement>): void;
     onBlur?(e: FocusEvent<HTMLElement>): void;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
-    collapse?: 'single' | 'multiple';
+    limitedScrollHeight?: boolean;
 };
+export {};

package/dist/helperComponents/HiddenTabButton/HiddenTabButton.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from 'react';
 type HiddenTabButtonProps = {
     listRef: RefObject<HTMLElement>;
+    tabIndex?: number;
 };
 export declare const HiddenTabButton: import("react").ForwardRefExoticComponent<HiddenTabButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/helperComponents/HiddenTabButton/HiddenTabButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
 import styles from './styles.module.css';
-export const HiddenTabButton = forwardRef(({ listRef }, ref) => {
+export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
     const handleFocus = useCallback((e) => {
         var _a;
         if (e.relatedTarget !== listRef.current) {
@@ -13,5 +13,5 @@ export const HiddenTabButton = forwardRef(({ listRef }, ref) => {
     const handleKeyDown = useCallback((e) => {
         e.stopPropagation();
     }, []);
-    return _jsx("button", { "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn });
+    return (_jsx("button", { "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
 });

package/dist/utils.js

@@ -6,7 +6,8 @@ export function withCollapsedItems({ items, openCollapsedItems }) {
     let expandedIds = [];
     items.forEach(item => {
         var _a;
-        if ((isBaseItemProps(item) || isNextListItemProps(item) || isAccordionItemProps(item)) && !item.disabled) {
+        if (((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
+            !item.disabled) {
             newItems = newItems.concat([item]);
             ids = ids.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']);
             if (item.itemRef) {
@@ -55,7 +56,10 @@ export function extractItemIds(items) {
 }
 export function extractChildIds({ items }) {
     return items
-        .filter(item => isAccordionItemProps(item) || isNextListItemProps(item) || isGroupItemProps(item) || !item.disabled)
+        .filter(item => isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.disabled && !item.inactive))
         .reduce((prev, item) => {
         var _a;
         if (isAccordionItemProps(item) || isNextListItemProps(item)) {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.1.3",
+  "version": "0.2.1-preview-a0815a00.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,7 +42,8 @@
     "@snack-uikit/truncate-string": "0.4.6",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.5.1",
+    "merge-refs": "1.2.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "0726752996aeaf01f58b892fef581c38c1528ea1"
+  "gitHead": "bccfe5b8df0866bff03fc00d5f5480988da8512b"
 }

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

@@ -7,13 +7,12 @@ import { extractSupportProps } from '@snack-uikit/utils';
 
 import { useCollapseContext, useListContext, useParentListContext, useSelectionContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.scss';
-import { BaseItemPrivateProps, BaseItemProps, SwitchProps } from '../types';
+import { BaseItemPrivateProps, BaseItemProps } from '../types';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
 type AllBaseItemProps = BaseItemProps &
-  BaseItemPrivateProps &
-  SwitchProps & { indeterminate?: boolean; onSelect?(): void; isParentNode?: boolean };
+  BaseItemPrivateProps & { indeterminate?: boolean; onSelect?(): void; isParentNode?: boolean };
 
 export function BaseItem({
   beforeContent,
@@ -31,14 +30,18 @@ export function BaseItem({
   indeterminate,
   onSelect,
   isParentNode,
+  className,
+  inactive,
+  itemWrapRender,
   ...rest
 }: AllBaseItemProps) {
   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?.includes(id);
 
@@ -47,10 +50,12 @@ export function BaseItem({
   };
 
   const handleItemClick = (e: MouseEvent<HTMLButtonElement>) => {
-    parentResetActiveFocusIndex?.();
+    if (interactive) {
+      parentResetActiveFocusIndex?.();
 
-    if (!isParentNode) {
-      handleChange();
+      if (!isParentNode) {
+        handleChange();
+      }
     }
 
     onClick?.(e);
@@ -92,26 +97,28 @@ export function BaseItem({
 
   const props = extractSupportProps(rest);
 
-  return (
+  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={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={selection || undefined}
+        data-variant={mode || undefined}
         data-open={open || undefined}
         disabled={disabled}
         onKeyDown={handleItemKeyDown}
         onFocus={handleItemFocus}
         style={{ '--level': level }}
       >
-        {!switchProp && isSelectionSingle && marker && !isParentNode && (
+        {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
           <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
         )}
-        {!switchProp && isSelectionMultiple && (
+        {!switchProp && isSelectionMultiple && interactive && (
           <div className={styles.checkbox}>
             <Checkbox
               size={CHECKBOX_SIZE_MAP[size ?? 's']}
@@ -145,9 +152,17 @@ export function BaseItem({
 
         {afterContent}
 
-        {switchProp && <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />}
+        {switchProp && interactive && (
+          <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
+        )}
         {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
       </button>
     </li>
   );
+
+  if (!itemWrapRender) {
+    return item;
+  }
+
+  return itemWrapRender(item);
 }

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

@@ -134,6 +134,10 @@ $typography: (
     }
   }
 
+  &[data-non-pointer] {
+    cursor: inherit;
+  }
+
   &:disabled {
     .option,
     .description,

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

@@ -107,6 +107,7 @@ export function NextListItem({
               search={search}
               scroll={scroll}
               scrollRef={scrollRef}
+              limitedScrollHeight
             />
           </ParentListContext.Provider>
         }

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

@@ -46,21 +46,6 @@ $sizes: 's', 'm', 'l';
     background-color: transparent;
   }
 
-  &[data-open],
-  &[data-focused],
-  &:hover,
-  &:focus-visible {
-    &::after {
-      opacity: $opacity-a008;
-      background-color: $sys-neutral-accent-default;
-    }
-  }
-
-  &[data-focused],
-  &:focus-visible {
-    @include outline-inside-var($container-focused-s);
-  }
-
   &:disabled {
     cursor: not-allowed;
     background-color: transparent;
@@ -75,4 +60,21 @@ $sizes: 's', 'm', 'l';
       background-color: transparent;
     }
   }
+
+  &:not([data-inactive]) {
+    &[data-open],
+    &[data-focused],
+    &:hover,
+    &:focus-visible {
+      &::after {
+        opacity: $opacity-a008;
+        background-color: $sys-neutral-accent-default;
+      }
+    }
+
+    &[data-focused],
+    &:focus-visible {
+      @include outline-inside-var($container-focused-s);
+    }
+  }
 }

package/src/components/Items/types.ts

@@ -17,45 +17,69 @@ export type BaseItemPrivateProps = {
 };
 
 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>;
-}>;
+  className?: string;
 
-export type SwitchProps = {
+  /**
+   * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
+   * <br>
+   * Так же элемент пропадает из навигации с клавиатуры, и не может быть выбран (selection)
+   */
+  inactive?: boolean;
+  /**
+   * Флаг отображения состояния выбранного элемента через switch
+   */
   switch?: boolean;
-};
+
+  itemWrapRender?(item: ReactNode): ReactNode;
+}>;
+
+type BaseItemsWithoutNonGroupProps = Omit<BaseItemProps, 'switch' | 'inactive'>;
 
 // eslint-disable-next-line no-use-before-define
-export type ItemProps = (BaseItemProps & SwitchProps) | AccordionItemProps | NextListItemProps | GroupItemProps;
+export type ItemProps = BaseItemProps | AccordionItemProps | NextListItemProps | GroupItemProps;
 
-export type AccordionItemProps = BaseItemProps & {
+export type AccordionItemProps = BaseItemsWithoutNonGroupProps & {
   items: ItemProps[];
-  // TODO: add later
-  // mode?: 'single' | 'multiple';
   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;
 };

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

@@ -1,4 +1,4 @@
-import { cloneElement, isValidElement, KeyboardEvent, useCallback, useMemo, useRef, useState } from 'react';
+import { cloneElement, isValidElement, KeyboardEvent, useCallback, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Dropdown } from '@snack-uikit/dropdown';
@@ -23,6 +23,7 @@ export function Droplist({
   triggerElemRef: triggerElemRefProp,
   open: openProp,
   onOpenChange,
+  collapse = {},
   ...props
 }: DroplistProps) {
   const hasSearch = useMemo(() => Boolean(search), [search]);
@@ -32,8 +33,15 @@ export function Droplist({
     [itemsProp, pinBottom, pinTop],
   );
 
-  const [openCollapsedItems, setOpenCollapsedItems] = useState<Array<number | string>>([]);
-
+  const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp<Array<number | string>>(
+    collapse.value,
+    collapse.defaultValue ?? [],
+    collapse.onChange
+      ? cb => {
+          collapse.onChange?.(cb(collapse.value));
+        }
+      : undefined,
+  );
   const { search: searchItem, footerRefs } = useItemsWithIds({
     search: hasSearch,
     footerActiveElementsRefs,
@@ -131,8 +139,8 @@ export function Droplist({
           parentResetNestedIndex: resetNestedIndex,
           parentResetActiveFocusIndex: resetActiveFocusIndex,
           toggleOpenCollapsedItems: id =>
-            setOpenCollapsedItems(items =>
-              items.includes(id) ? items.filter(item => item !== id) : items.concat([id]),
+            setOpenCollapsedItems((items: Array<string | number> | undefined = []) =>
+              items.includes(id) ? items.filter(item => item !== id) : items?.concat([id]),
             ),
         }}
       >
@@ -143,6 +151,7 @@ export function Droplist({
               tabIndex={0}
               ref={listRef}
               search={search}
+              limitedScrollHeight
               {...slicedItems}
               {...props}
             />

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

@@ -1,4 +1,7 @@
-import { forwardRef, useMemo, useRef, useState } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, KeyboardEvent, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
 
 import { HiddenTabButton } from '../../../helperComponents';
 import { extractItemIds, extractItemRefs, withCollapsedItems } from '../../../utils';
@@ -10,7 +13,21 @@ import styles from '../styles.module.scss';
 import { ListProps } from '../types';
 
 export const List = forwardRef<HTMLElement, ListProps>(
-  ({ items: itemsProp, search, pinBottom, pinTop, footerActiveElementsRefs, ...props }) => {
+  (
+    {
+      items: itemsProp,
+      search,
+      pinBottom,
+      pinTop,
+      footerActiveElementsRefs,
+      onKeyDown,
+      tabIndex = 0,
+      className,
+      collapse = {},
+      ...props
+    },
+    ref,
+  ) => {
     const hasSearch = useMemo(() => Boolean(search), [search]);
 
     const memorizedItems = useMemo(
@@ -18,7 +35,15 @@ export const List = forwardRef<HTMLElement, ListProps>(
       [itemsProp, pinBottom, pinTop],
     );
 
-    const [openCollapsedItems, setOpenCollapsedItems] = useState<Array<number | string>>([]);
+    const [openCollapsedItems, setOpenCollapsedItems] = useUncontrolledProp<Array<number | string>>(
+      collapse.value,
+      collapse.defaultValue ?? [],
+      collapse.onChange
+        ? cb => {
+            collapse.onChange?.(cb(collapse.value));
+          }
+        : undefined,
+    );
 
     const { search: searchItem, footerRefs } = useItemsWithIds({
       search: hasSearch,
@@ -68,6 +93,20 @@ export const List = forwardRef<HTMLElement, ListProps>(
 
     const isActive = listRef.current === document.activeElement && activeFocusIndex === -1 && openNestedIndex === -1;
 
+    const mergedHandlerKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+      onKeyDown?.(e);
+      handleListKeyDown?.(e);
+    };
+
+    const handleOnFocus = (e: FocusEvent<HTMLElement>) => {
+      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
@@ -87,31 +126,24 @@ export const List = forwardRef<HTMLElement, ListProps>(
             parentResetActiveFocusIndex: resetActiveFocusIndex,
             openCollapsedItems,
             toggleOpenCollapsedItems: id =>
-              setOpenCollapsedItems(items =>
-                items.includes(id) ? items.filter(item => item !== id) : items.concat([id]),
+              setOpenCollapsedItems((items: Array<string | number> | undefined = []) =>
+                items.includes(id) ? items.filter(item => item !== id) : items?.concat([id]),
               ),
           }}
         >
-          <div className={styles.wrapper} data-active={isActive || undefined}>
+          <div className={cn(styles.wrapper, className)} data-active={isActive || undefined}>
             <ListPrivate
               {...props}
               {...slicedItems}
-              ref={listRef}
-              onFocus={e => {
-                if (
-                  e.relatedTarget === null ||
-                  (e.relatedTarget && itemRefs.every(({ current }) => current !== e.relatedTarget))
-                ) {
-                  resetActiveFocusIndex();
-                }
-              }}
-              onKeyDown={handleListKeyDown}
-              tabIndex={0}
+              ref={mergeRefs(ref, listRef)}
+              onFocus={handleOnFocus}
+              onKeyDown={mergedHandlerKeyDown}
+              tabIndex={tabIndex}
               search={search}
               nested={false}
             />
 
-            <HiddenTabButton ref={btnRef} listRef={listRef} />
+            <HiddenTabButton ref={btnRef} listRef={listRef} tabIndex={tabIndex} />
           </div>
         </ParentListContext.Provider>
       </SelectionProvider>