@snack-uikit/list 0.11.5 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.13.0 (2024-05-13)
+
+
+### Bug Fixes
+
+* **FF-0000:** fix keyboard control; add listRef props ([bda03fe](https://github.com/cloud-ru-tech/snack-uikit/commit/bda03fee548908bdc07e1455cf5aa1a3c5b766f9))
+
+
+### Features
+
+* **FF-0000:** add closeDroplistOnItemClick prop ([fabd3a4](https://github.com/cloud-ru-tech/snack-uikit/commit/fabd3a4fe5443a985269228f082f9cfb0f4c0182))
+
+
+
+
+
+# 0.12.0 (2024-05-08)
+
+
+### Features
+
+* **PDS-135:** add hidden flag for items ([489d07f](https://github.com/cloud-ru-tech/snack-uikit/commit/489d07f7b47142b6230f740e1c0c690f23a94512))
+
+
+
+
+
 ## 0.11.5 (2024-05-08)
 
 ### Only dependencies have been changed

package/README.md

@@ -58,6 +58,8 @@
 | items* | `Item[]` | - | Основные элементы списка |
 | children* | `ReactNode \| ({onKeyDown}) => ReactNode * Рендер функция принимает аргументы `onKeyDown` - хендлер ввода, для поддержки управления с клавиатуры` | - | Триггер для дроплиста |
 | triggerElemRef | `RefObject<HTMLElement>` | - | Ссылка на элемент-триггер для дроплиста |
+| listRef | `RefObject<HTMLElement>` | - | Ссылка на элемент выпадающего списка |
+| closeDroplistOnItemClick | `boolean` | - | Закрывать выпадающий список после клика на базовый айтем.  Работает в режимах selection: 'none' \| 'single' |
 | triggerClassName | `string` | - | CSS-класс триггера |
 | open | `boolean` | - | Управляет состоянием показан/не показан. |
 | onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |

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

@@ -14,7 +14,7 @@ import cn from 'classnames';
 import { Checkbox, Switch } from '@snack-uikit/toggles';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { ItemContent } from '../../../helperComponents';
-import { useCollapseLevelContext, useFocusListContext, useNewListContext, useSelectionContext, } from '../../Lists/contexts';
+import { useCollapseLevelContext, useFocusListContext, useNewListContext, useOpenListContext, useSelectionContext, } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
 import { isContentItem } from '../utils';
 import { CHECKBOX_SIZE_MAP } from './constants';
@@ -26,6 +26,7 @@ export function BaseItem(_a) {
     const { size = 's', marker, contentRender } = useNewListContext();
     const { level = 0 } = useCollapseLevelContext();
     const { forceUpdateActiveItemId } = useFocusListContext();
+    const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
     const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     const isChecked = isSelectionSingle ? value === id : checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : '');
     const handleChange = () => {
@@ -42,25 +43,6 @@ export function BaseItem(_a) {
         onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
         forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
     };
-    const handleItemKeyDown = (e) => {
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-        if (e.key === 'ArrowRight' && onOpenNestedList) {
-            onOpenNestedList(e);
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        if (e.code === 'Space' || e.key === 'Enter') {
-            if (isSelectionMultiple && isParentNode && onSelect) {
-                onSelect();
-            }
-            !isParentNode && handleChange();
-            // TODO: should pass an event here?
-            !isParentNode && (onClick === null || onClick === void 0 ? void 0 : onClick(e));
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
     const handleItemFocus = (e) => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
         e.stopPropagation();
@@ -76,6 +58,28 @@ export function BaseItem(_a) {
     const handleItemClick = (e) => {
         if (!disabled) {
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            if (!isSelectionMultiple && closeDroplistOnItemClick) {
+                closeDroplist();
+            }
+        }
+    };
+    const handleItemKeyDown = (e) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        if (e.key === 'ArrowRight' && onOpenNestedList) {
+            onOpenNestedList(e);
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (e.code === 'Space' || e.key === 'Enter' || e.key === ' ') {
+            if (isSelectionMultiple && isParentNode && onSelect) {
+                onSelect();
+            }
+            !isParentNode && handleChange();
+            // TODO: should pass an event here?
+            !isParentNode && (handleItemClick === null || handleItemClick === void 0 ? void 0 : handleItemClick(e));
+            e.stopPropagation();
+            e.preventDefault();
         }
     };
     const handleCheckboxClick = (e) => {

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

@@ -35,6 +35,8 @@ export type BaseItem = WithSupportProps<{
     id?: ItemId;
     /** Флаг неактивности элемента */
     disabled?: boolean;
+    /** Флаг присутствия элемента */
+    hidden?: boolean;
     itemRef?: RefObject<HTMLElement>;
     className?: string;
     /**
@@ -70,6 +72,7 @@ type CommonGroupItem = {
         variant?: TruncateStringProps['variant'];
     };
     mode?: 'primary' | 'secondary';
+    hidden?: boolean;
     divider?: boolean;
 };
 export type GroupItem = CommonGroupItem & {

package/dist/components/Items/utils.js

@@ -59,9 +59,10 @@ export function kindFlattenItems({ items, prefix, parentId }) {
         const autoChildIds = [];
         const { items } = item, rest = __rest(item, ["items"]);
         const childActiveParent = isGroupItem(item) ? parentId !== null && parentId !== void 0 ? parentId : '~main' : autoId;
-        for (let idx = 0; idx < items.length; idx++) {
+        const filteredItems = items.filter(item => !item.hidden);
+        for (let idx = 0; idx < filteredItems.length; idx++) {
             const { id, children, autoId, focusChildren } = flatten({
-                item: items[idx],
+                item: filteredItems[idx],
                 idx,
                 prefix: itemId,
                 parentId: childActiveParent,
@@ -90,8 +91,9 @@ export function kindFlattenItems({ items, prefix, parentId }) {
     const closeChildIds = [];
     const autoChildIds = [];
     let allChildIds = [];
-    for (let idx = 0; idx < items.length; idx++) {
-        const { id, children, autoId } = flatten({ item: items[idx], idx, prefix, parentId });
+    const filteredItems = items.filter(item => !item.hidden);
+    for (let idx = 0; idx < filteredItems.length; idx++) {
+        const { id, children, autoId } = flatten({ item: filteredItems[idx], idx, prefix, parentId });
         autoChildIds.push(autoId);
         closeChildIds.push(id);
         allChildIds.push(id);

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

@@ -1,2 +1,2 @@
 import { DroplistProps } from '../types';
-export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, className, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;
+export declare function Droplist({ items: itemsProp, search, pinBottom: pinBottomProp, pinTop: pinTopProp, footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse, triggerClassName, selection, contentRender, size, marker, closeDroplistOnItemClick, className, listRef: listRefProp, ...props }: DroplistProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,13 +16,13 @@ import { cloneElement, isValidElement, useCallback, useMemo, useRef } from 'reac
 import { Dropdown } from '@snack-uikit/dropdown';
 import { useValueControl } from '@snack-uikit/utils';
 import { extractActiveItems, kindFlattenItems, useCreateBaseItems } from '../../Items';
-import { CollapseContext, FocusListContext, NewListContextProvider, SelectionProvider } from '../contexts';
+import { CollapseContext, FocusListContext, NewListContextProvider, OpenListContext, SelectionProvider, } from '../contexts';
 import { useNewKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.css';
 const DEFAULT_FALLBACK_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
 export function Droplist(_a) {
-    var { items: itemsProp, search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {}, triggerClassName, selection, contentRender, size = 's', marker = true, className } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "className"]);
+    var { items: itemsProp, search, pinBottom: pinBottomProp = [], pinTop: pinTopProp = [], footerActiveElementsRefs, children, trigger, placement, widthStrategy, triggerElemRef: triggerElemRefProp, open: openProp, onOpenChange, collapse = {}, triggerClassName, selection, contentRender, size = 's', marker = true, closeDroplistOnItemClick = false, className, listRef: listRefProp } = _a, props = __rest(_a, ["items", "search", "pinBottom", "pinTop", "footerActiveElementsRefs", "children", "trigger", "placement", "widthStrategy", "triggerElemRef", "open", "onOpenChange", "collapse", "triggerClassName", "selection", "contentRender", "size", "marker", "closeDroplistOnItemClick", "className", "listRef"]);
     const hasSearch = useMemo(() => Boolean(search), [search]);
     const [openCollapseItems = [], setOpenCollapsedItems] = useValueControl(collapse);
     const toggleOpenCollapseItem = useCallback((id) => setOpenCollapsedItems((items) => (items === null || items === void 0 ? void 0 : items.includes(id)) ? items.filter(item => item !== id) : (items !== null && items !== void 0 ? items : []).concat([id])), [setOpenCollapsedItems]);
@@ -75,14 +75,14 @@ export function Droplist(_a) {
     const triggerElemRef = useRef(null);
     const listRef = useRef(null);
     const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } = useNewKeyboardNavigation({
-        mainRef: triggerElemRef,
+        mainRef: triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef,
         focusFlattenItems,
     });
     const handleListKeyDown = useCallback((e) => handleListKeyDownFactory(ids, expandedIds)(e), [handleListKeyDownFactory, ids, expandedIds]);
-    const handleOpenChange = (open) => {
+    const handleOpenChange = useCallback((open) => {
         resetActiveItemId();
         setOpen(open);
-    };
+    }, [resetActiveItemId, setOpen]);
     const onKeyDown = useCallback((e, cb) => {
         if (e.key === 'ArrowDown') {
             e.preventDefault();
@@ -98,6 +98,7 @@ export function Droplist(_a) {
         }
         cb === null || cb === void 0 ? void 0 : cb(e);
     }, [resetActiveItemId, setOpen]);
+    const isValid = useMemo(() => isValidElement(children), [children]);
     const triggerElem = useMemo(() => {
         if (isValidElement(children)) {
             const props = typeof children.props === 'object' ? children.props : {};
@@ -118,11 +119,16 @@ export function Droplist(_a) {
                         activeItemId,
                         handleListKeyDownFactory,
                         forceUpdateActiveItemId,
-                    }, children: _jsx(Dropdown, { content: _jsx("div", { className: cn(styles.wrapper, className), children: _jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, onKeyDown: handleListKeyDown, searchItem: searchItem, tabIndex: 0, ref: listRef, search: search, onFocus: e => {
-                                    e.stopPropagation();
-                                    forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
-                                }, limitedScrollHeight: true })) }), triggerClassName: triggerClassName, fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS, trigger: trigger, placement: placement, widthStrategy: widthStrategy, 
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-expect-error
-                        triggerRef: triggerElemRefProp ? mergeRefs(triggerElemRef, triggerElemRefProp) : triggerElemRef, open: open, onOpenChange: handleOpenChange, children: triggerElem }) }) }) })) }));
+                    }, children: _jsx(OpenListContext.Provider, { value: {
+                            closeDroplistOnItemClick,
+                            closeDroplist: () => {
+                                var _a;
+                                setOpen(false);
+                                resetActiveItemId();
+                                (_a = (triggerElemRefProp !== null && triggerElemRefProp !== void 0 ? triggerElemRefProp : triggerElemRef).current) === null || _a === void 0 ? void 0 : _a.focus();
+                            },
+                        }, children: _jsx(Dropdown, { content: _jsx("div", { className: cn(styles.wrapper, className), children: _jsx(ListPrivate, Object.assign({}, props, { items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, onKeyDown: handleListKeyDown, searchItem: searchItem, tabIndex: 0, ref: mergeRefs(listRef, listRefProp), search: search, onFocus: e => {
+                                        e.stopPropagation();
+                                        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
+                                    }, limitedScrollHeight: true })) }), outsideClick: true, triggerClassName: triggerClassName, fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS, trigger: trigger, placement: placement, widthStrategy: widthStrategy, triggerRef: !triggerElemRefProp ? triggerElemRef : (isValid && triggerElemRefProp) || undefined, open: open, onOpenChange: handleOpenChange, children: triggerElem }) }) }) }) })) }));
 }

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type OpenListContextType = {
+    closeDroplistOnItemClick?: boolean;
+    closeDroplist(): void;
+};
+export declare const OpenListContext: import("react").Context<OpenListContextType>;
+export declare const useOpenListContext: () => OpenListContextType;

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

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const OpenListContext = createContext({
+    closeDroplist: () => { },
+    closeDroplistOnItemClick: false,
+});
+export const useOpenListContext = () => useContext(OpenListContext);

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

@@ -3,3 +3,4 @@ export * from './CollapseProvider';
 export * from './NewListProvider';
 export * from './SelectionProvider';
 export * from './FocusListProvider';
+export * from './OpenListProvider';

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

@@ -3,3 +3,4 @@ export * from './CollapseProvider';
 export * from './NewListProvider';
 export * from './SelectionProvider';
 export * from './FocusListProvider';
+export * from './OpenListProvider';

package/dist/components/Lists/hooks.js

@@ -38,9 +38,8 @@ export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }
                         setActiveItemId(undefined);
                         (_e = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _e === void 0 ? void 0 : _e.focus();
                     }
-                    return;
                 }
-                if (activeItemIdRef.current !== undefined) {
+                else if (activeItemIdRef.current !== undefined) {
                     const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
                     const nextId = Math.max(activeIndex - 1, 0);
                     const itemId = ids[nextId];

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

@@ -44,6 +44,16 @@ export type ListProps = WithSupportProps<{
 export type DroplistProps = {
     /** Ссылка на элемент-триггер для дроплиста */
     triggerElemRef?: RefObject<HTMLElement>;
+    /** Ссылка на элемент выпадающего списка */
+    listRef?: RefObject<HTMLElement>;
+    /**
+     * Закрывать выпадающий список после клика на базовый айтем.
+     *
+     * Работает в режимах selection: 'none' | 'single'
+     *
+     * @default false
+     */
+    closeDroplistOnItemClick?: boolean;
     /** Триггер для дроплиста
      * @type ReactNode | ({onKeyDown}) => ReactNode
      *

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.11.5",
+  "version": "0.13.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -49,5 +49,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "59bd2ac46a341357d543ada864a34e09745b3e42"
+  "gitHead": "d36fe553ce72b92deafee581e70090458827f8ac"
 }

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

@@ -9,6 +9,7 @@ import {
   useCollapseLevelContext,
   useFocusListContext,
   useNewListContext,
+  useOpenListContext,
   useSelectionContext,
 } from '../../Lists/contexts';
 import commonStyles from '../styles.module.scss';
@@ -56,6 +57,7 @@ export function BaseItem({
   const { size = 's', marker, contentRender } = useNewListContext();
   const { level = 0 } = useCollapseLevelContext();
   const { forceUpdateActiveItemId } = useFocusListContext();
+  const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
   const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
   const isChecked = isSelectionSingle ? value === id : checkedProp ?? value?.includes(id ?? '');
@@ -78,6 +80,29 @@ export function BaseItem({
     forceUpdateActiveItemId?.('~drop-focus');
   };
 
+  const handleItemFocus = (e: FocusEvent<HTMLElement>) => {
+    onFocus?.(e);
+    e.stopPropagation();
+  };
+
+  const handleCheckboxChange = () => {
+    if (isParentNode && onSelect) {
+      onSelect();
+    } else {
+      handleChange();
+    }
+  };
+
+  const handleItemClick = (e: MouseEvent<HTMLElement>) => {
+    if (!disabled) {
+      onClick?.(e);
+
+      if (!isSelectionMultiple && closeDroplistOnItemClick) {
+        closeDroplist();
+      }
+    }
+  };
+
   const handleItemKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     onKeyDown?.(e);
 
@@ -90,39 +115,20 @@ export function BaseItem({
       return;
     }
 
-    if (e.code === 'Space' || e.key === 'Enter') {
+    if (e.code === 'Space' || e.key === 'Enter' || e.key === ' ') {
       if (isSelectionMultiple && isParentNode && onSelect) {
         onSelect();
       }
 
       !isParentNode && handleChange();
       // TODO: should pass an event here?
-      !isParentNode && onClick?.(e as unknown as MouseEvent<HTMLElement>);
+      !isParentNode && handleItemClick?.(e as unknown as MouseEvent<HTMLElement>);
 
       e.stopPropagation();
       e.preventDefault();
     }
   };
 
-  const handleItemFocus = (e: FocusEvent<HTMLElement>) => {
-    onFocus?.(e);
-    e.stopPropagation();
-  };
-
-  const handleCheckboxChange = () => {
-    if (isParentNode && onSelect) {
-      onSelect();
-    } else {
-      handleChange();
-    }
-  };
-
-  const handleItemClick = (e: MouseEvent<HTMLElement>) => {
-    if (!disabled) {
-      onClick?.(e);
-    }
-  };
-
   const handleCheckboxClick = (e: MouseEvent) => {
     e.stopPropagation();
   };

package/src/components/Items/types.ts

@@ -42,6 +42,8 @@ export type BaseItem = WithSupportProps<{
   id?: ItemId;
   /** Флаг неактивности элемента */
   disabled?: boolean;
+  /** Флаг присутствия элемента */
+  hidden?: boolean;
 
   itemRef?: RefObject<HTMLElement>;
 
@@ -90,6 +92,7 @@ type CommonGroupItem = {
     variant?: TruncateStringProps['variant'];
   };
   mode?: 'primary' | 'secondary';
+  hidden?: boolean;
   divider?: boolean;
 };
 

package/src/components/Items/utils.ts

@@ -94,9 +94,11 @@ export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsPr
     const { items, ...rest } = item;
     const childActiveParent = isGroupItem(item) ? parentId ?? '~main' : autoId;
 
-    for (let idx = 0; idx < items.length; idx++) {
+    const filteredItems = items.filter(item => !item.hidden);
+
+    for (let idx = 0; idx < filteredItems.length; idx++) {
       const { id, children, autoId, focusChildren } = flatten({
-        item: items[idx],
+        item: filteredItems[idx],
         idx,
         prefix: itemId,
         parentId: childActiveParent,
@@ -137,8 +139,10 @@ export function kindFlattenItems({ items, prefix, parentId }: KindFlattenItemsPr
   const autoChildIds: ItemId[] = [];
   let allChildIds: ItemId[] = [];
 
-  for (let idx = 0; idx < items.length; idx++) {
-    const { id, children, autoId } = flatten({ item: items[idx], idx, prefix, parentId });
+  const filteredItems = items.filter(item => !item.hidden);
+
+  for (let idx = 0; idx < filteredItems.length; idx++) {
+    const { id, children, autoId } = flatten({ item: filteredItems[idx], idx, prefix, parentId });
 
     autoChildIds.push(autoId);
     closeChildIds.push(id);

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

@@ -6,7 +6,13 @@ import { Dropdown, DropdownProps } from '@snack-uikit/dropdown';
 import { useValueControl } from '@snack-uikit/utils';
 
 import { extractActiveItems, ItemId, kindFlattenItems, useCreateBaseItems } from '../../Items';
-import { CollapseContext, FocusListContext, NewListContextProvider, SelectionProvider } from '../contexts';
+import {
+  CollapseContext,
+  FocusListContext,
+  NewListContextProvider,
+  OpenListContext,
+  SelectionProvider,
+} from '../contexts';
 import { useNewKeyboardNavigation } from '../hooks';
 import { ListPrivate } from '../ListPrivate';
 import styles from '../styles.module.scss';
@@ -33,7 +39,9 @@ export function Droplist({
   contentRender,
   size = 's',
   marker = true,
+  closeDroplistOnItemClick = false,
   className,
+  listRef: listRefProp,
   ...props
 }: DroplistProps) {
   const hasSearch = useMemo(() => Boolean(search), [search]);
@@ -114,7 +122,7 @@ export function Droplist({
 
   const { handleListKeyDownFactory, resetActiveItemId, activeItemId, forceUpdateActiveItemId } =
     useNewKeyboardNavigation({
-      mainRef: triggerElemRef,
+      mainRef: triggerElemRefProp ?? triggerElemRef,
       focusFlattenItems,
     });
 
@@ -123,11 +131,14 @@ export function Droplist({
     [handleListKeyDownFactory, ids, expandedIds],
   );
 
-  const handleOpenChange = (open: boolean) => {
-    resetActiveItemId();
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      resetActiveItemId();
 
-    setOpen(open);
-  };
+      setOpen(open);
+    },
+    [resetActiveItemId, setOpen],
+  );
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLElement>, cb?: (e: KeyboardEvent<HTMLElement>) => void) => {
@@ -150,6 +161,8 @@ export function Droplist({
     [resetActiveItemId, setOpen],
   );
 
+  const isValid = useMemo(() => isValidElement(children), [children]);
+
   const triggerElem: ReactNode = useMemo(() => {
     if (isValidElement(children)) {
       const props = typeof children.props === 'object' ? children.props : {};
@@ -191,41 +204,51 @@ export function Droplist({
               forceUpdateActiveItemId,
             }}
           >
-            <Dropdown
-              content={
-                <div className={cn(styles.wrapper, className)}>
-                  <ListPrivate
-                    {...props}
-                    items={memorizedItems.items.focusCloseChildIds}
-                    pinTop={memorizedItems.pinTop.focusCloseChildIds}
-                    pinBottom={memorizedItems.pinBottom.focusCloseChildIds}
-                    onKeyDown={handleListKeyDown}
-                    searchItem={searchItem}
-                    tabIndex={0}
-                    ref={listRef}
-                    search={search}
-                    onFocus={e => {
-                      e.stopPropagation();
-
-                      forceUpdateActiveItemId?.(ids[0]);
-                    }}
-                    limitedScrollHeight
-                  />
-                </div>
-              }
-              triggerClassName={triggerClassName}
-              fallbackPlacements={DEFAULT_FALLBACK_PLACEMENTS}
-              trigger={trigger}
-              placement={placement}
-              widthStrategy={widthStrategy}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-expect-error
-              triggerRef={triggerElemRefProp ? mergeRefs(triggerElemRef, triggerElemRefProp) : triggerElemRef}
-              open={open}
-              onOpenChange={handleOpenChange}
+            <OpenListContext.Provider
+              value={{
+                closeDroplistOnItemClick,
+                closeDroplist: () => {
+                  setOpen(false);
+                  resetActiveItemId();
+                  (triggerElemRefProp ?? triggerElemRef).current?.focus();
+                },
+              }}
             >
-              {triggerElem}
-            </Dropdown>
+              <Dropdown
+                content={
+                  <div className={cn(styles.wrapper, className)}>
+                    <ListPrivate
+                      {...props}
+                      items={memorizedItems.items.focusCloseChildIds}
+                      pinTop={memorizedItems.pinTop.focusCloseChildIds}
+                      pinBottom={memorizedItems.pinBottom.focusCloseChildIds}
+                      onKeyDown={handleListKeyDown}
+                      searchItem={searchItem}
+                      tabIndex={0}
+                      ref={mergeRefs(listRef, listRefProp)}
+                      search={search}
+                      onFocus={e => {
+                        e.stopPropagation();
+
+                        forceUpdateActiveItemId?.(ids[0]);
+                      }}
+                      limitedScrollHeight
+                    />
+                  </div>
+                }
+                outsideClick
+                triggerClassName={triggerClassName}
+                fallbackPlacements={DEFAULT_FALLBACK_PLACEMENTS}
+                trigger={trigger}
+                placement={placement}
+                widthStrategy={widthStrategy}
+                triggerRef={!triggerElemRefProp ? triggerElemRef : (isValid && triggerElemRefProp) || undefined}
+                open={open}
+                onOpenChange={handleOpenChange}
+              >
+                {triggerElem}
+              </Dropdown>
+            </OpenListContext.Provider>
           </FocusListContext.Provider>
         </CollapseContext.Provider>
       </SelectionProvider>

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export type OpenListContextType = {
+  closeDroplistOnItemClick?: boolean;
+  closeDroplist(): void;
+};
+
+export const OpenListContext = createContext<OpenListContextType>({
+  closeDroplist: () => {},
+  closeDroplistOnItemClick: false,
+});
+
+export const useOpenListContext = () => useContext(OpenListContext);

package/src/components/Lists/contexts/index.ts

@@ -3,3 +3,4 @@ export * from './CollapseProvider';
 export * from './NewListProvider';
 export * from './SelectionProvider';
 export * from './FocusListProvider';
+export * from './OpenListProvider';

package/src/components/Lists/hooks.ts

@@ -59,10 +59,7 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
               setActiveItemId(undefined);
               mainRef?.current?.focus();
             }
-            return;
-          }
-
-          if (activeItemIdRef.current !== undefined) {
+          } else if (activeItemIdRef.current !== undefined) {
             const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
             const nextId = Math.max(activeIndex - 1, 0);
             const itemId = ids[nextId];

package/src/components/Lists/types.ts

@@ -56,6 +56,16 @@ export type ListProps = WithSupportProps<
 export type DroplistProps = {
   /** Ссылка на элемент-триггер для дроплиста */
   triggerElemRef?: RefObject<HTMLElement>;
+  /** Ссылка на элемент выпадающего списка */
+  listRef?: RefObject<HTMLElement>;
+  /**
+   * Закрывать выпадающий список после клика на базовый айтем.
+   *
+   * Работает в режимах selection: 'none' | 'single'
+   *
+   * @default false
+   */
+  closeDroplistOnItemClick?: boolean;
 
   /** Триггер для дроплиста
    * @type ReactNode | ({onKeyDown}) => ReactNode