@sberbusiness/triplex-next 0.39.0 → 0.40.0

package/components/Dropdown/desktop/DropdownDesktop.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { EDropdownDirection, EDropdownAlignment, EDropdownWidth } from "./enums.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { useToken } from "../../ThemeProvider/useToken.js";
 import { isKey } from "../../../utils/keyboard.js";
-const dropdownDesktop = "dropdownDesktop__24dc6a5d";
-const sm = "sm__dcb0ddff";
-const md = "md__d60308a5";
-const lg = "lg__878186ec";
-const dropdownDesktopOverflowHidden = "dropdownDesktopOverflowHidden__571e1f26";
+const dropdownDesktop = "dropdownDesktop__9d4d0210";
+const sm = "sm__638f1290";
+const md = "md__d107cb92";
+const lg = "lg__ec7fe50f";
+const dropdownDesktopOverflowHidden = "dropdownDesktopOverflowHidden__37408048";
 const styles = {
   dropdownDesktop,
   sm,
@@ -20,6 +20,7 @@ const styles = {
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const overflowHiddenClassName = styles.dropdownDesktopOverflowHidden;
+const TARGET_OFFSET = 4;
 const DropdownDesktop = React.forwardRef((props, ref) => {
   const {
     children,
@@ -38,15 +39,12 @@ const DropdownDesktop = React.forwardRef((props, ref) => {
   const dropdownRef = useRef(null);
   const { scopeClassName } = useToken();
   const classNames = clsx(styles.dropdownDesktop, sizeToClassNameMap[size], scopeClassName, className);
-  const wheelHandler = useCallback(
-    (event) => {
-      var _a;
-      if (!((_a = dropdownRef.current) == null ? void 0 : _a.contains(event.target))) {
-        event.preventDefault();
-      }
-    },
-    [dropdownRef]
-  );
+  const wheelHandler = useCallback((event) => {
+    var _a;
+    if (!((_a = dropdownRef.current) == null ? void 0 : _a.contains(event.target))) {
+      event.preventDefault();
+    }
+  }, []);
   const keyDownHandler = useCallback((event) => {
     if (event.target === document.body) {
       const key = event.code || event.keyCode;
@@ -56,7 +54,6 @@ const DropdownDesktop = React.forwardRef((props, ref) => {
     }
   }, []);
   const toggleScrollEventListener = useCallback(
-    /** Запрет скролла всей страницы. */
     (add) => {
       if (add) {
         document.addEventListener("wheel", wheelHandler, { passive: false });
@@ -85,19 +82,18 @@ const DropdownDesktop = React.forwardRef((props, ref) => {
   );
   const calculatePositionVertical = useCallback(
     (css, dropdownRect, targetRect) => {
-      const offset = 4;
       if (direction === EDropdownDirection.AUTO) {
-        if (targetRect.bottom + offset + dropdownRect.height < document.documentElement.clientHeight) {
-          css.top = targetRect.bottom + offset;
-        } else if (targetRect.top - offset - dropdownRect.height > 0) {
-          css.bottom = document.documentElement.clientHeight - targetRect.top + offset;
+        if (targetRect.bottom + TARGET_OFFSET + dropdownRect.height < document.documentElement.clientHeight) {
+          css.top = targetRect.bottom + TARGET_OFFSET;
+        } else if (targetRect.top - TARGET_OFFSET - dropdownRect.height > 0) {
+          css.bottom = document.documentElement.clientHeight - targetRect.top + TARGET_OFFSET;
         } else {
-          css.top = targetRect.bottom + offset;
+          css.top = targetRect.bottom + TARGET_OFFSET;
         }
       } else if (direction === EDropdownDirection.BOTTOM) {
-        css.top = targetRect.bottom + offset;
+        css.top = targetRect.bottom + TARGET_OFFSET;
       } else if (direction === EDropdownDirection.TOP) {
-        css.bottom = document.documentElement.clientHeight - targetRect.top + offset;
+        css.bottom = document.documentElement.clientHeight - targetRect.top + TARGET_OFFSET;
       }
     },
     [direction]
@@ -168,7 +164,7 @@ const DropdownDesktop = React.forwardRef((props, ref) => {
       className: classNames,
       style: { ...styleState, ...styleProp },
       ...rest,
-      "data-tx": "0.39.0",
+      "data-tx": "0.40.0",
       ref: setRef,
       children
     }

package/components/Dropdown/desktop/DropdownDesktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownDesktop.js","sources":["../../../../src/components/Dropdown/desktop/DropdownDesktop.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { EDropdownAlignment, EDropdownDirection, EDropdownWidth } from \"./enums\";\nimport { EComponentSize } from \"../../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { useToken } from \"../../ThemeProvider/useToken\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport styles from \"../styles/DropdownDesktop.module.less\";\n\n/** Свойства компонента DropdownDesktop. */\nexport interface IDropdownDesktopProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Открыт. */\n    opened: boolean;\n    /** Устанавливает флаг opened. */\n    setOpened: (opened: boolean) => void;\n    /** Ссылка на управляющий элемент. */\n    targetRef: React.RefObject<HTMLElement>;\n    /** Размер дропдауна. */\n    size?: EComponentSize;\n    /** Направление выпадающего меню. */\n    direction?: EDropdownDirection;\n    /** Выравнивание списка относительно управляющего элемента. */\n    alignment?: EDropdownAlignment;\n    /** Вариант расчёта ширины выпадающего списка. */\n    width?: EDropdownWidth;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nconst overflowHiddenClassName = styles.dropdownDesktopOverflowHidden;\n\n/** Выпадающее меню. */\nexport const DropdownDesktop = React.forwardRef<HTMLDivElement, IDropdownDesktopProps>((props, ref) => {\n    const {\n        children,\n        className,\n        style: styleProp,\n        size = EComponentSize.MD,\n        direction = EDropdownDirection.AUTO,\n        alignment = EDropdownAlignment.LEFT,\n        width = EDropdownWidth.CONTENT,\n        opened,\n        targetRef,\n        setOpened,\n        ...rest\n    } = props;\n    const [styleState, setStyleState] = useState<React.CSSProperties>({ opacity: 0 });\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const { scopeClassName } = useToken();\n    const classNames = clsx(styles.dropdownDesktop, sizeToClassNameMap[size], scopeClassName, className);\n\n    /** Блокировка скролла вне дропдауна. */\n    const wheelHandler = useCallback(\n        (event: WheelEvent) => {\n            if (!dropdownRef.current?.contains(event.target as Node)) {\n                event.preventDefault();\n            }\n        },\n        [dropdownRef],\n    );\n\n    const keyDownHandler = useCallback((event: KeyboardEvent) => {\n        if (event.target === document.body) {\n            const key = event.code || event.keyCode;\n\n            if (\n                isKey(key, \"SPACE\") ||\n                isKey(key, \"PAGE_UP\") ||\n                isKey(key, \"PAGE_DOWN\") ||\n                isKey(key, \"END\") ||\n                isKey(key, \"HOME\") ||\n                isKey(key, \"ARROW_LEFT\") ||\n                isKey(key, \"ARROW_UP\") ||\n                isKey(key, \"ARROW_RIGHT\") ||\n                isKey(key, \"ARROW_DOWN\")\n            ) {\n                event.preventDefault();\n            }\n        }\n    }, []);\n\n    /** Управление скроллом внешней области.  */\n    const toggleScrollEventListener = useCallback(\n        /** Запрет скролла всей страницы. */\n        (add: boolean) => {\n            if (add) {\n                document.addEventListener(\"wheel\", wheelHandler, { passive: false });\n                document.addEventListener(\"keydown\", keyDownHandler);\n            } else {\n                document.removeEventListener(\"wheel\", wheelHandler);\n                document.removeEventListener(\"keydown\", keyDownHandler);\n            }\n        },\n        [wheelHandler, keyDownHandler],\n    );\n\n    /** Расчёт положения по горизонтали. */\n    const calculatePositionHorizontal = useCallback(\n        (css: React.CSSProperties, targetRect: DOMRect, expectedWidth: number) => {\n            const clientWidth = document.documentElement.clientWidth;\n\n            const leftPos = targetRect.left;\n            const rightPos = targetRect.right - expectedWidth;\n\n            if (alignment === EDropdownAlignment.LEFT) {\n                const fitsRightSide = leftPos + expectedWidth <= clientWidth;\n                css.left = fitsRightSide ? leftPos : Math.max(0, rightPos);\n            } else {\n                const fitsLeftSide = rightPos >= 0;\n                css.left = fitsLeftSide ? rightPos : Math.max(0, Math.min(leftPos, clientWidth - expectedWidth));\n            }\n        },\n        [alignment],\n    );\n\n    /** Расчёт положения по вертикали. */\n    const calculatePositionVertical = useCallback(\n        (css: React.CSSProperties, dropdownRect: DOMRect, targetRect: DOMRect) => {\n            // Отступ между target и dropdown.\n            const offset = 4;\n\n            if (direction === EDropdownDirection.AUTO) {\n                if (targetRect.bottom + offset + dropdownRect.height < document.documentElement.clientHeight) {\n                    // Если влезает снизу.\n                    css.top = targetRect.bottom + offset;\n                } else if (targetRect.top - offset - dropdownRect.height > 0) {\n                    // Если не влезает снизу, но влезает сверху.\n                    css.bottom = document.documentElement.clientHeight - targetRect.top + offset;\n                } else {\n                    // Если не влезает снизу и сверху.\n                    css.top = targetRect.bottom + offset;\n                }\n            } else if (direction === EDropdownDirection.BOTTOM) {\n                css.top = targetRect.bottom + offset;\n            } else if (direction === EDropdownDirection.TOP) {\n                css.bottom = document.documentElement.clientHeight - targetRect.top + offset;\n            }\n        },\n        [direction],\n    );\n\n    /** Установка положения меню. */\n    const setPosition = useCallback(() => {\n        if (dropdownRef.current === null || targetRef.current === null) return;\n\n        const dropdownRect = dropdownRef.current.getBoundingClientRect();\n        const targetRect = targetRef.current.getBoundingClientRect();\n        const css: React.CSSProperties = {};\n        let expectedWidth = dropdownRect.width;\n\n        if (width === EDropdownWidth.TARGET) {\n            expectedWidth = targetRect.width;\n            css.width = targetRect.width;\n        } else if (width === EDropdownWidth.MIN_TARGET) {\n            expectedWidth = Math.max(dropdownRect.width, targetRect.width);\n            css.minWidth = targetRect.width;\n        }\n\n        calculatePositionVertical(css, dropdownRect, targetRect);\n        calculatePositionHorizontal(css, targetRect, expectedWidth);\n\n        setStyleState(css);\n    }, [targetRef, width, calculatePositionVertical, calculatePositionHorizontal]);\n\n    useEffect(() => {\n        if (opened) {\n            // eslint-disable-next-line react-hooks/set-state-in-effect\n            setPosition();\n        } else {\n            setStyleState({ opacity: 0 });\n        }\n    }, [opened, setPosition]);\n\n    useEffect(() => {\n        if (!opened || dropdownRef.current === null || targetRef.current === null) return;\n\n        const observer = new ResizeObserver(setPosition);\n\n        observer.observe(dropdownRef.current);\n        observer.observe(targetRef.current);\n        return () => observer.disconnect();\n    }, [opened, targetRef, setPosition]);\n\n    /** Планирует перерасчет позиции дропдауна в следующем кадре. */\n    const updatePosition = useCallback(() => {\n        setTimeout(setPosition);\n    }, [setPosition]);\n\n    useEffect(() => {\n        if (opened) {\n            document.addEventListener(\"scroll\", updatePosition, true);\n            window.addEventListener(\"resize\", updatePosition);\n            toggleScrollEventListener(true);\n            document.body.classList.add(overflowHiddenClassName);\n            updatePosition();\n\n            return () => {\n                document.removeEventListener(\"scroll\", updatePosition, true);\n                window.removeEventListener(\"resize\", updatePosition);\n                toggleScrollEventListener(false);\n                document.body.classList.remove(overflowHiddenClassName);\n            };\n        }\n    }, [opened, updatePosition, toggleScrollEventListener]);\n\n    /** Функция для хранения ссылки. */\n    const setRef = (instance: HTMLDivElement | null) => {\n        dropdownRef.current = instance;\n        if (typeof ref === \"function\") {\n            ref(instance);\n        } else if (ref) {\n            ref.current = instance;\n        }\n    };\n\n    if (!opened) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames}\n            style={{ ...styleState, ...styleProp }}\n            {...rest}\n            data-tx={process.env.npm_package_version}\n            ref={setRef}\n        >\n            {children}\n        </div>\n    );\n});\n\nDropdownDesktop.displayName = \"DropdownDesktop\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownDesktop.js","sources":["../../../../src/components/Dropdown/desktop/DropdownDesktop.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { EDropdownAlignment, EDropdownDirection, EDropdownWidth } from \"./enums\";\nimport { EComponentSize } from \"../../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { useToken } from \"../../ThemeProvider/useToken\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport styles from \"../styles/DropdownDesktop.module.less\";\n\n/** Свойства компонента DropdownDesktop. */\nexport interface IDropdownDesktopProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Открыт. */\n    opened: boolean;\n    /** Устанавливает флаг opened. */\n    setOpened: (opened: boolean) => void;\n    /** Ссылка на управляющий элемент. */\n    targetRef: React.RefObject<HTMLElement>;\n    /** Размер дропдауна. */\n    size?: EComponentSize;\n    /** Направление выпадающего меню. */\n    direction?: EDropdownDirection;\n    /** Выравнивание списка относительно управляющего элемента. */\n    alignment?: EDropdownAlignment;\n    /** Вариант расчёта ширины выпадающего списка. */\n    width?: EDropdownWidth;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nconst overflowHiddenClassName = styles.dropdownDesktopOverflowHidden;\n\n/** Отступ между управляющим элементом и выпадающим меню, px. */\nconst TARGET_OFFSET = 4;\n\n/**\n * Десктопная версия выпадающего меню.\n * Позиционируется фиксированно относительно targetRef, пересчитывает положение при скролле,\n * ресайзе окна и изменении размеров меню или управляющего элемента. Пока меню открыто,\n * скролл страницы вне меню заблокирован. В закрытом состоянии ничего не рендерит.\n */\nexport const DropdownDesktop = React.forwardRef<HTMLDivElement, IDropdownDesktopProps>((props, ref) => {\n    const {\n        children,\n        className,\n        style: styleProp,\n        size = EComponentSize.MD,\n        direction = EDropdownDirection.AUTO,\n        alignment = EDropdownAlignment.LEFT,\n        width = EDropdownWidth.CONTENT,\n        opened,\n        targetRef,\n        setOpened,\n        ...rest\n    } = props;\n    const [styleState, setStyleState] = useState<React.CSSProperties>({ opacity: 0 });\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const { scopeClassName } = useToken();\n    const classNames = clsx(styles.dropdownDesktop, sizeToClassNameMap[size], scopeClassName, className);\n\n    /** Блокировка скролла вне дропдауна. */\n    const wheelHandler = useCallback((event: WheelEvent) => {\n        if (!dropdownRef.current?.contains(event.target as Node)) {\n            event.preventDefault();\n        }\n    }, []);\n\n    const keyDownHandler = useCallback((event: KeyboardEvent) => {\n        if (event.target === document.body) {\n            const key = event.code || event.keyCode;\n\n            if (\n                isKey(key, \"SPACE\") ||\n                isKey(key, \"PAGE_UP\") ||\n                isKey(key, \"PAGE_DOWN\") ||\n                isKey(key, \"END\") ||\n                isKey(key, \"HOME\") ||\n                isKey(key, \"ARROW_LEFT\") ||\n                isKey(key, \"ARROW_UP\") ||\n                isKey(key, \"ARROW_RIGHT\") ||\n                isKey(key, \"ARROW_DOWN\")\n            ) {\n                event.preventDefault();\n            }\n        }\n    }, []);\n\n    /** Управление подпиской на события, блокирующие скролл страницы вне дропдауна. */\n    const toggleScrollEventListener = useCallback(\n        (add: boolean) => {\n            if (add) {\n                document.addEventListener(\"wheel\", wheelHandler, { passive: false });\n                document.addEventListener(\"keydown\", keyDownHandler);\n            } else {\n                document.removeEventListener(\"wheel\", wheelHandler);\n                document.removeEventListener(\"keydown\", keyDownHandler);\n            }\n        },\n        [wheelHandler, keyDownHandler],\n    );\n\n    /** Расчёт положения по горизонтали. */\n    const calculatePositionHorizontal = useCallback(\n        (css: React.CSSProperties, targetRect: DOMRect, expectedWidth: number) => {\n            const clientWidth = document.documentElement.clientWidth;\n\n            const leftPos = targetRect.left;\n            const rightPos = targetRect.right - expectedWidth;\n\n            if (alignment === EDropdownAlignment.LEFT) {\n                const fitsRightSide = leftPos + expectedWidth <= clientWidth;\n                css.left = fitsRightSide ? leftPos : Math.max(0, rightPos);\n            } else {\n                const fitsLeftSide = rightPos >= 0;\n                css.left = fitsLeftSide ? rightPos : Math.max(0, Math.min(leftPos, clientWidth - expectedWidth));\n            }\n        },\n        [alignment],\n    );\n\n    /** Расчёт положения по вертикали. */\n    const calculatePositionVertical = useCallback(\n        (css: React.CSSProperties, dropdownRect: DOMRect, targetRect: DOMRect) => {\n            if (direction === EDropdownDirection.AUTO) {\n                if (targetRect.bottom + TARGET_OFFSET + dropdownRect.height < document.documentElement.clientHeight) {\n                    // Если влезает снизу.\n                    css.top = targetRect.bottom + TARGET_OFFSET;\n                } else if (targetRect.top - TARGET_OFFSET - dropdownRect.height > 0) {\n                    // Если не влезает снизу, но влезает сверху.\n                    css.bottom = document.documentElement.clientHeight - targetRect.top + TARGET_OFFSET;\n                } else {\n                    // Если не влезает снизу и сверху.\n                    css.top = targetRect.bottom + TARGET_OFFSET;\n                }\n            } else if (direction === EDropdownDirection.BOTTOM) {\n                css.top = targetRect.bottom + TARGET_OFFSET;\n            } else if (direction === EDropdownDirection.TOP) {\n                css.bottom = document.documentElement.clientHeight - targetRect.top + TARGET_OFFSET;\n            }\n        },\n        [direction],\n    );\n\n    /** Установка положения меню. */\n    const setPosition = useCallback(() => {\n        if (dropdownRef.current === null || targetRef.current === null) return;\n\n        const dropdownRect = dropdownRef.current.getBoundingClientRect();\n        const targetRect = targetRef.current.getBoundingClientRect();\n        const css: React.CSSProperties = {};\n        let expectedWidth = dropdownRect.width;\n\n        if (width === EDropdownWidth.TARGET) {\n            expectedWidth = targetRect.width;\n            css.width = targetRect.width;\n        } else if (width === EDropdownWidth.MIN_TARGET) {\n            expectedWidth = Math.max(dropdownRect.width, targetRect.width);\n            css.minWidth = targetRect.width;\n        }\n\n        calculatePositionVertical(css, dropdownRect, targetRect);\n        calculatePositionHorizontal(css, targetRect, expectedWidth);\n\n        setStyleState(css);\n    }, [targetRef, width, calculatePositionVertical, calculatePositionHorizontal]);\n\n    useEffect(() => {\n        if (opened) {\n            // Положение можно посчитать только после того, как меню отрендерено и его размеры измеримы.\n            setPosition();\n        } else {\n            setStyleState({ opacity: 0 });\n        }\n    }, [opened, setPosition]);\n\n    useEffect(() => {\n        if (!opened || dropdownRef.current === null || targetRef.current === null) return;\n\n        const observer = new ResizeObserver(setPosition);\n\n        observer.observe(dropdownRef.current);\n        observer.observe(targetRef.current);\n        return () => observer.disconnect();\n    }, [opened, targetRef, setPosition]);\n\n    /** Планирует перерасчет позиции дропдауна в следующем кадре. */\n    const updatePosition = useCallback(() => {\n        setTimeout(setPosition);\n    }, [setPosition]);\n\n    useEffect(() => {\n        if (opened) {\n            document.addEventListener(\"scroll\", updatePosition, true);\n            window.addEventListener(\"resize\", updatePosition);\n            toggleScrollEventListener(true);\n            document.body.classList.add(overflowHiddenClassName);\n            updatePosition();\n\n            return () => {\n                document.removeEventListener(\"scroll\", updatePosition, true);\n                window.removeEventListener(\"resize\", updatePosition);\n                toggleScrollEventListener(false);\n                document.body.classList.remove(overflowHiddenClassName);\n            };\n        }\n    }, [opened, updatePosition, toggleScrollEventListener]);\n\n    const setRef = (instance: HTMLDivElement | null) => {\n        dropdownRef.current = instance;\n        if (typeof ref === \"function\") {\n            ref(instance);\n        } else if (ref) {\n            ref.current = instance;\n        }\n    };\n\n    if (!opened) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classNames}\n            style={{ ...styleState, ...styleProp }}\n            {...rest}\n            data-tx={process.env.npm_package_version}\n            ref={setRef}\n        >\n            {children}\n        </div>\n    );\n});\n\nDropdownDesktop.displayName = \"DropdownDesktop\";\n"],"names":[],"mappings":"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"}

package/components/Dropdown/desktop/DropdownList.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useContext, useRef, useState, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles, D as DropdownListItem } from "../../../chunks/DropdownListItem-COR0eOzM.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles, D as DropdownListItem } from "../../../chunks/DropdownListItem-V6Oe5CEm.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
 import { DropdownListContext } from "../DropdownListContext.js";
 import { LoaderSmall } from "../../Loader/LoaderSmall/LoaderSmall.js";
@@ -9,7 +9,9 @@ import { ELoaderSmallTheme } from "../../Loader/LoaderSmall/enum.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
+import { getSelectedListItemIndex, scrollListToTop, scrollListToItem } from "./utils.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const LOADER_ITEM_ID = "dropdown-desktop-list-loader-item";
 const DropdownList = (props) => {
   const {
     children,
@@ -21,65 +23,36 @@ const DropdownList = (props) => {
     ...htmlDivAttributes
   } = props;
   const classNames = clsx(styles.dropdownDesktopList, sizeToClassNameMap[size], className);
-  const { activeDescendant, setActiveDescendant } = useContext(DropdownListContext);
-  const containerRef = listRef || React.createRef();
+  const { setActiveDescendant } = useContext(DropdownListContext);
+  const innerContainerRef = useRef(null);
+  const containerRef = listRef || innerContainerRef;
   const listItemsRef = useRef([]);
-  const [activeListItemIndex, setActiveListItemIndex] = useState(void 0);
+  const selectedListItemIndex = getSelectedListItemIndex(children);
+  const activeListItemIndexOnOpen = selectedListItemIndex ?? 0;
+  const [activeListItemIndex, setActiveListItemIndex] = useState(
+    dropdownOpened ? activeListItemIndexOnOpen : void 0
+  );
+  const [prevDropdownOpened, setPrevDropdownOpened] = useState(dropdownOpened);
+  if (dropdownOpened !== prevDropdownOpened) {
+    setPrevDropdownOpened(dropdownOpened);
+    setActiveListItemIndex(dropdownOpened ? activeListItemIndexOnOpen : void 0);
+  }
   const childrenCount = React.Children.count(children);
-  const scrollContainerToItem = (itemIndex) => {
-    const parent = containerRef == null ? void 0 : containerRef.current;
-    const activeItem = listItemsRef.current[itemIndex];
-    if (parent && activeItem) {
-      const { top: parentTop, bottom: parentBottom } = parent.getBoundingClientRect();
-      const { top: itemTop, bottom: itemBottom } = activeItem.getBoundingClientRect();
-      const offset = 4;
-      if (parentTop > itemTop) {
-        parent.scrollTop = parent.scrollTop - parentTop + itemTop - offset;
-      } else if (itemBottom > parentBottom) {
-        parent.scrollTop = parent.scrollTop + itemBottom - parentBottom + offset;
-      }
-    }
-  };
-  const scrollContainerToTop = () => {
-    const container = containerRef == null ? void 0 : containerRef.current;
-    if (container) {
-      container.scrollTop = 0;
-    }
-  };
   useEffect(() => {
     if (!dropdownOpened) {
       return;
     }
     const handleKeyDown = (event) => {
-      const { keyCode } = event;
-      const childrenLength = childrenCount;
-      const currentIndex = activeListItemIndex;
       let nextActiveListItemIndex;
-      if (keyCode === EVENT_KEY_CODES.ARROW_DOWN) {
-        if (currentIndex !== void 0) {
-          if (currentIndex < childrenLength - 1) {
-            nextActiveListItemIndex = currentIndex + 1;
-          } else {
-            nextActiveListItemIndex = 0;
-          }
-        } else {
-          nextActiveListItemIndex = 0;
-        }
+      if (event.keyCode === EVENT_KEY_CODES.ARROW_DOWN) {
+        nextActiveListItemIndex = activeListItemIndex === void 0 || activeListItemIndex >= childrenCount - 1 ? 0 : activeListItemIndex + 1;
         event.preventDefault();
-      } else if (keyCode === EVENT_KEY_CODES.ARROW_UP) {
-        if (currentIndex !== void 0) {
-          if (currentIndex > 0) {
-            nextActiveListItemIndex = currentIndex - 1;
-          } else {
-            nextActiveListItemIndex = childrenLength - 1;
-          }
-        } else {
-          nextActiveListItemIndex = childrenLength - 1;
-        }
+      } else if (event.keyCode === EVENT_KEY_CODES.ARROW_UP) {
+        nextActiveListItemIndex = activeListItemIndex === void 0 || activeListItemIndex <= 0 ? childrenCount - 1 : activeListItemIndex - 1;
         event.preventDefault();
       }
-      if (nextActiveListItemIndex !== void 0 && currentIndex !== nextActiveListItemIndex) {
-        scrollContainerToItem(nextActiveListItemIndex);
+      if (nextActiveListItemIndex !== void 0 && activeListItemIndex !== nextActiveListItemIndex) {
+        scrollListToItem(containerRef.current, listItemsRef.current[nextActiveListItemIndex]);
         setActiveListItemIndex(nextActiveListItemIndex);
       }
     };
@@ -87,22 +60,15 @@ const DropdownList = (props) => {
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [dropdownOpened, activeListItemIndex, childrenCount]);
+  }, [dropdownOpened, activeListItemIndex, childrenCount, containerRef]);
   useEffect(() => {
     if (!dropdownOpened) {
       return;
     }
-    let isSelectedItemExist = false;
-    React.Children.forEach(children, (child, index) => {
-      if (React.isValidElement(child) && child.props.selected) {
-        isSelectedItemExist = true;
-        scrollContainerToItem(index);
-        setActiveListItemIndex(index);
-      }
-    });
-    if (!isSelectedItemExist) {
-      setActiveListItemIndex(0);
-      scrollContainerToTop();
+    if (selectedListItemIndex === void 0) {
+      scrollListToTop(containerRef.current);
+    } else {
+      scrollListToItem(containerRef.current, listItemsRef.current[selectedListItemIndex]);
     }
   }, [dropdownOpened]);
   useEffect(() => {
@@ -111,17 +77,16 @@ const DropdownList = (props) => {
       setActiveDescendant((_a = listItemsRef.current[activeListItemIndex]) == null ? void 0 : _a.id);
       return;
     }
-    if (!dropdownOpened && activeDescendant !== void 0) {
-      setActiveDescendant();
+    if (!dropdownOpened) {
+      setActiveDescendant(void 0);
     }
-  }, [dropdownOpened, activeListItemIndex, activeDescendant, setActiveDescendant]);
-  useEffect(() => {
-    return () => {
-      if (activeDescendant !== void 0) {
-        setActiveDescendant();
-      }
-    };
-  }, [activeDescendant, setActiveDescendant]);
+  }, [dropdownOpened, activeListItemIndex, setActiveDescendant]);
+  useEffect(
+    () => () => {
+      setActiveDescendant(void 0);
+    },
+    [setActiveDescendant]
+  );
   const renderedChildren = React.Children.map(children, (child, index) => {
     if (!React.isValidElement(child)) {
       return child;
@@ -144,7 +109,7 @@ const DropdownList = (props) => {
       }
     });
   });
-  const renderLoaderItem = () => /* @__PURE__ */ jsx(DropdownListItem, { id: "dropdown-desktop-list-loader-item", children: /* @__PURE__ */ jsx(LoaderSmall, { className: styles.dropdownDesktopListLoader, theme: ELoaderSmallTheme.BRAND, size }) });
+  const renderLoaderItem = () => /* @__PURE__ */ jsx(DropdownListItem, { id: LOADER_ITEM_ID, children: /* @__PURE__ */ jsx(LoaderSmall, { className: styles.dropdownDesktopListLoader, theme: ELoaderSmallTheme.BRAND, size }) });
   return /* @__PURE__ */ jsxs("div", { className: classNames, role: "listbox", ...htmlDivAttributes, ref: containerRef, children: [
     renderedChildren,
     loading && renderLoaderItem()

package/components/Dropdown/desktop/DropdownList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownList.js","sources":["../../../../src/components/Dropdown/desktop/DropdownList.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n    DropdownListItem,\n    IDropdownListItemProps,\n} from \"@sberbusiness/triplex-next/components/Dropdown/desktop/DropdownListItem\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { DropdownListContext } from \"@sberbusiness/triplex-next/components/Dropdown/DropdownListContext\";\nimport { LoaderSmall, ELoaderSmallTheme } from \"@sberbusiness/triplex-next/components/Loader\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport styles from \"../styles/DropdownDesktopList.module.less\";\n\n/** Свойства компонента DropdownList. */\nexport interface IDropdownListProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Dropdown открыт. */\n    dropdownOpened: boolean;\n    /** Объект для создания ссылки на html-элемент \"список\". */\n    listRef?: React.RefObject<HTMLDivElement>;\n    /** Состояние загрузки. */\n    loading?: boolean;\n    /** Размер списка. */\n    size?: EComponentSize;\n}\n\n/** Индекс текущего выделенного элемента списка при навигации с клавиатуры. */\ntype TActiveListItemIndex = number | undefined;\n\n/** Композиция компонента DropdownList. */\nexport interface IDropdownListComponent extends React.FC<IDropdownListProps> {\n    Item: typeof DropdownListItem;\n}\n\n// Соответствие размера имени класса.\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/**\n * Компонент DropdownList.\n * Используется для обрамления вложенного списка и добавляет спику возможность навигации с клавиатуры.\n * В качестве children принимает только DropdownDesktopList.Item.\n */\nexport const DropdownList: IDropdownListComponent = (props) => {\n    const {\n        children,\n        className,\n        dropdownOpened,\n        listRef,\n        loading,\n        size = EComponentSize.MD,\n        ...htmlDivAttributes\n    } = props;\n    const classNames = clsx(styles.dropdownDesktopList, sizeToClassNameMap[size], className);\n\n    const { activeDescendant, setActiveDescendant } = useContext(DropdownListContext);\n\n    // Ref контейнера списка.\n    const containerRef = listRef || React.createRef<HTMLDivElement>();\n    // Массив DOM-элементов списка.\n    const listItemsRef = useRef<Array<HTMLDivElement | null>>([]);\n    const [activeListItemIndex, setActiveListItemIndex] = useState<TActiveListItemIndex>(undefined);\n\n    const childrenCount = React.Children.count(children);\n\n    const scrollContainerToItem = (itemIndex: number) => {\n        const parent = containerRef?.current;\n        const activeItem = listItemsRef.current[itemIndex];\n\n        if (parent && activeItem) {\n            const { top: parentTop, bottom: parentBottom } = parent.getBoundingClientRect();\n            const { top: itemTop, bottom: itemBottom } = activeItem.getBoundingClientRect();\n            const offset = 4;\n\n            if (parentTop > itemTop) {\n                parent.scrollTop = parent.scrollTop - parentTop + itemTop - offset;\n            } else if (itemBottom > parentBottom) {\n                parent.scrollTop = parent.scrollTop + itemBottom - parentBottom + offset;\n            }\n        }\n    };\n\n    const scrollContainerToTop = () => {\n        const container = containerRef?.current;\n        if (container) {\n            container.scrollTop = 0;\n        }\n    };\n\n    // Подписка на keydown когда открыт, с актуальным индексом.\n    useEffect(() => {\n        if (!dropdownOpened) {\n            return;\n        }\n\n        const handleKeyDown = (event: KeyboardEvent) => {\n            const { keyCode } = event;\n            const childrenLength = childrenCount;\n            const currentIndex = activeListItemIndex;\n            let nextActiveListItemIndex: number | undefined;\n\n            if (keyCode === EVENT_KEY_CODES.ARROW_DOWN) {\n                if (currentIndex !== undefined) {\n                    if (currentIndex < childrenLength - 1) {\n                        nextActiveListItemIndex = currentIndex + 1;\n                    } else {\n                        nextActiveListItemIndex = 0;\n                    }\n                } else {\n                    nextActiveListItemIndex = 0;\n                }\n                event.preventDefault();\n            } else if (keyCode === EVENT_KEY_CODES.ARROW_UP) {\n                if (currentIndex !== undefined) {\n                    if (currentIndex > 0) {\n                        nextActiveListItemIndex = currentIndex - 1;\n                    } else {\n                        nextActiveListItemIndex = childrenLength - 1;\n                    }\n                } else {\n                    nextActiveListItemIndex = childrenLength - 1;\n                }\n                event.preventDefault();\n            }\n\n            if (nextActiveListItemIndex !== undefined && currentIndex !== nextActiveListItemIndex) {\n                scrollContainerToItem(nextActiveListItemIndex);\n                setActiveListItemIndex(nextActiveListItemIndex);\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [dropdownOpened, activeListItemIndex, childrenCount]);\n\n    // Установка активного элемента и скролла при открытии.\n    useEffect(() => {\n        if (!dropdownOpened) {\n            return;\n        }\n        let isSelectedItemExist = false;\n        React.Children.forEach(children, (child, index) => {\n            if (React.isValidElement<IDropdownListItemProps>(child) && child.props.selected) {\n                isSelectedItemExist = true;\n                scrollContainerToItem(index);\n                setActiveListItemIndex(index);\n            }\n        });\n        if (!isSelectedItemExist) {\n            setActiveListItemIndex(0);\n            scrollContainerToTop();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [dropdownOpened]);\n\n    // Синхронизация activeDescendant при изменении activeListItemIndex\n    useEffect(() => {\n        if (dropdownOpened && activeListItemIndex !== undefined) {\n            setActiveDescendant(listItemsRef.current[activeListItemIndex]?.id);\n            return;\n        }\n        if (!dropdownOpened && activeDescendant !== undefined) {\n            setActiveDescendant();\n        }\n    }, [dropdownOpened, activeListItemIndex, activeDescendant, setActiveDescendant]);\n\n    useEffect(() => {\n        return () => {\n            if (activeDescendant !== undefined) {\n                setActiveDescendant();\n            }\n        };\n    }, [activeDescendant, setActiveDescendant]);\n\n    const renderedChildren = React.Children.map(children, (child, index) => {\n        if (!React.isValidElement<IDropdownListItemProps & React.RefAttributes<HTMLDivElement>>(child)) {\n            return child;\n        }\n\n        return React.cloneElement(child, {\n            active: activeListItemIndex === index,\n            onMouseOver: (event: React.MouseEvent<HTMLDivElement>) => {\n                setActiveListItemIndex(index);\n                child.props.onMouseOver?.(event);\n            },\n            onMouseOut: (event: React.MouseEvent<HTMLDivElement>) => {\n                setActiveListItemIndex(undefined);\n                child.props.onMouseOut?.(event);\n            },\n            size: size,\n            ref: (node: HTMLDivElement | null) => {\n                listItemsRef.current[index] = node;\n            },\n        });\n    });\n\n    const renderLoaderItem = () => (\n        <DropdownListItem id=\"dropdown-desktop-list-loader-item\">\n            <LoaderSmall className={styles.dropdownDesktopListLoader} theme={ELoaderSmallTheme.BRAND} size={size} />\n        </DropdownListItem>\n    );\n\n    return (\n        <div className={classNames} role=\"listbox\" {...htmlDivAttributes} ref={containerRef}>\n            {renderedChildren}\n            {loading && renderLoaderItem()}\n        </div>\n    );\n};\n\nDropdownList.Item = DropdownListItem;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownList.js","sources":["../../../../src/components/Dropdown/desktop/DropdownList.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n    DropdownListItem,\n    IDropdownListItemProps,\n} from \"@sberbusiness/triplex-next/components/Dropdown/desktop/DropdownListItem\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { DropdownListContext } from \"@sberbusiness/triplex-next/components/Dropdown/DropdownListContext\";\nimport { LoaderSmall, ELoaderSmallTheme } from \"@sberbusiness/triplex-next/components/Loader\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { getSelectedListItemIndex, scrollListToItem, scrollListToTop } from \"./utils\";\nimport styles from \"../styles/DropdownDesktopList.module.less\";\n\n/** Свойства компонента DropdownList. */\nexport interface IDropdownListProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Dropdown открыт. При открытии список подписывается на клавиатурную навигацию. */\n    dropdownOpened: boolean;\n    /** Объект для создания ссылки на html-элемент \"список\". */\n    listRef?: React.RefObject<HTMLDivElement>;\n    /** Состояние загрузки. Дополняет список элементом с лоадером. */\n    loading?: boolean;\n    /** Размер списка. Пробрасывается в элементы списка. */\n    size?: EComponentSize;\n}\n\n/** Индекс текущего выделенного элемента списка при навигации с клавиатуры. */\ntype TActiveListItemIndex = number | undefined;\n\n/** Композиция компонента DropdownList. */\nexport interface IDropdownListComponent extends React.FC<IDropdownListProps> {\n    /** Элемент выпадающего списка. */\n    Item: typeof DropdownListItem;\n}\n\n// Соответствие размера имени класса.\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Идентификатор служебного элемента списка с лоадером. */\nconst LOADER_ITEM_ID = \"dropdown-desktop-list-loader-item\";\n\n/**\n * Компонент DropdownList.\n * Используется для обрамления вложенного списка и добавляет списку возможность навигации с клавиатуры.\n * В качестве children принимает только DropdownList.Item.\n */\nexport const DropdownList: IDropdownListComponent = (props) => {\n    const {\n        children,\n        className,\n        dropdownOpened,\n        listRef,\n        loading,\n        size = EComponentSize.MD,\n        ...htmlDivAttributes\n    } = props;\n    const classNames = clsx(styles.dropdownDesktopList, sizeToClassNameMap[size], className);\n\n    const { setActiveDescendant } = useContext(DropdownListContext);\n\n    // Ref контейнера списка. Используется внутренний ref, если listRef не передан снаружи.\n    const innerContainerRef = useRef<HTMLDivElement>(null);\n    const containerRef = listRef || innerContainerRef;\n    // Массив DOM-элементов списка.\n    const listItemsRef = useRef<Array<HTMLDivElement | null>>([]);\n\n    // Индекс элемента, который становится активным при открытии: выбранный элемент либо первый.\n    const selectedListItemIndex = getSelectedListItemIndex(children);\n    const activeListItemIndexOnOpen = selectedListItemIndex ?? 0;\n\n    const [activeListItemIndex, setActiveListItemIndex] = useState<TActiveListItemIndex>(\n        dropdownOpened ? activeListItemIndexOnOpen : undefined,\n    );\n    const [prevDropdownOpened, setPrevDropdownOpened] = useState(dropdownOpened);\n\n    // Сброс активного элемента при смене открытости — корректировка state в ответ на изменение props.\n    // Сброс симметричен: на закрытии активный элемент снимается вместе с activeDescendant,\n    // иначе список, оставленный смонтированным в закрытом виде, сохранял бы подсветку.\n    if (dropdownOpened !== prevDropdownOpened) {\n        setPrevDropdownOpened(dropdownOpened);\n        setActiveListItemIndex(dropdownOpened ? activeListItemIndexOnOpen : undefined);\n    }\n\n    const childrenCount = React.Children.count(children);\n\n    // Подписка на keydown когда открыт, с актуальным индексом.\n    useEffect(() => {\n        if (!dropdownOpened) {\n            return;\n        }\n\n        const handleKeyDown = (event: KeyboardEvent) => {\n            let nextActiveListItemIndex: number | undefined;\n\n            if (event.keyCode === EVENT_KEY_CODES.ARROW_DOWN) {\n                nextActiveListItemIndex =\n                    activeListItemIndex === undefined || activeListItemIndex >= childrenCount - 1\n                        ? 0\n                        : activeListItemIndex + 1;\n                event.preventDefault();\n            } else if (event.keyCode === EVENT_KEY_CODES.ARROW_UP) {\n                nextActiveListItemIndex =\n                    activeListItemIndex === undefined || activeListItemIndex <= 0\n                        ? childrenCount - 1\n                        : activeListItemIndex - 1;\n                event.preventDefault();\n            }\n\n            if (nextActiveListItemIndex !== undefined && activeListItemIndex !== nextActiveListItemIndex) {\n                scrollListToItem(containerRef.current, listItemsRef.current[nextActiveListItemIndex]);\n                setActiveListItemIndex(nextActiveListItemIndex);\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, [dropdownOpened, activeListItemIndex, childrenCount, containerRef]);\n\n    // Прокрутка списка к активному элементу при открытии.\n    useEffect(() => {\n        if (!dropdownOpened) {\n            return;\n        }\n\n        if (selectedListItemIndex === undefined) {\n            scrollListToTop(containerRef.current);\n        } else {\n            scrollListToItem(containerRef.current, listItemsRef.current[selectedListItemIndex]);\n        }\n        // Прокрутка выполняется один раз на открытие, по состоянию списка на момент открытия.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [dropdownOpened]);\n\n    // Синхронизация activeDescendant при изменении activeListItemIndex.\n    useEffect(() => {\n        if (dropdownOpened && activeListItemIndex !== undefined) {\n            setActiveDescendant(listItemsRef.current[activeListItemIndex]?.id);\n            return;\n        }\n\n        if (!dropdownOpened) {\n            setActiveDescendant(undefined);\n        }\n    }, [dropdownOpened, activeListItemIndex, setActiveDescendant]);\n\n    // Сброс activeDescendant при размонтировании списка.\n    useEffect(\n        () => () => {\n            setActiveDescendant(undefined);\n        },\n        [setActiveDescendant],\n    );\n\n    const renderedChildren = React.Children.map(children, (child, index) => {\n        if (!React.isValidElement<IDropdownListItemProps & React.RefAttributes<HTMLDivElement>>(child)) {\n            return child;\n        }\n\n        return React.cloneElement(child, {\n            active: activeListItemIndex === index,\n            onMouseOver: (event: React.MouseEvent<HTMLDivElement>) => {\n                setActiveListItemIndex(index);\n                child.props.onMouseOver?.(event);\n            },\n            onMouseOut: (event: React.MouseEvent<HTMLDivElement>) => {\n                setActiveListItemIndex(undefined);\n                child.props.onMouseOut?.(event);\n            },\n            size: size,\n            ref: (node: HTMLDivElement | null) => {\n                listItemsRef.current[index] = node;\n            },\n        });\n    });\n\n    const renderLoaderItem = () => (\n        <DropdownListItem id={LOADER_ITEM_ID}>\n            <LoaderSmall className={styles.dropdownDesktopListLoader} theme={ELoaderSmallTheme.BRAND} size={size} />\n        </DropdownListItem>\n    );\n\n    return (\n        <div className={classNames} role=\"listbox\" {...htmlDivAttributes} ref={containerRef}>\n            {renderedChildren}\n            {loading && renderLoaderItem()}\n        </div>\n    );\n};\n\nDropdownList.Item = DropdownListItem;\n"],"names":[],"mappings":"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"}

package/components/Dropdown/desktop/DropdownListItem.js

@@ -1,10 +1,10 @@
 import "react/jsx-runtime";
 import "react";
-import "../../../chunks/vendor-DKrjZZwJ.js";
+import "../../../chunks/vendor-BtZO8a0z.js";
 import "../../../enums/EComponentSize.js";
 import "../../../utils/keyboard.js";
 import "../../Badge/Badge.js";
-import { D } from "../../../chunks/DropdownListItem-COR0eOzM.js";
+import { D } from "../../../chunks/DropdownListItem-V6Oe5CEm.js";
 export {
   D as DropdownListItem
 };

package/components/Dropdown/desktop/index.js

@@ -1,6 +1,6 @@
 import { DropdownDesktop } from "./DropdownDesktop.js";
 import { DropdownList } from "./DropdownList.js";
-import { D } from "../../../chunks/DropdownListItem-COR0eOzM.js";
+import { D } from "../../../chunks/DropdownListItem-V6Oe5CEm.js";
 import { EDropdownAlignment, EDropdownDirection, EDropdownWidth } from "./enums.js";
 export {
   DropdownDesktop,

package/components/Dropdown/desktop/utils.js

@@ -0,0 +1,34 @@
+import React from "react";
+const SCROLL_OFFSET = 4;
+const getSelectedListItemIndex = (children) => {
+  let selectedIndex;
+  React.Children.forEach(children, (child, index) => {
+    if (React.isValidElement(child) && child.props.selected) {
+      selectedIndex = index;
+    }
+  });
+  return selectedIndex;
+};
+const scrollListToTop = (container) => {
+  if (container) {
+    container.scrollTop = 0;
+  }
+};
+const scrollListToItem = (container, item) => {
+  if (!container || !item) {
+    return;
+  }
+  const { top: containerTop, bottom: containerBottom } = container.getBoundingClientRect();
+  const { top: itemTop, bottom: itemBottom } = item.getBoundingClientRect();
+  if (containerTop > itemTop) {
+    container.scrollTop = container.scrollTop - containerTop + itemTop - SCROLL_OFFSET;
+  } else if (itemBottom > containerBottom) {
+    container.scrollTop = container.scrollTop + itemBottom - containerBottom + SCROLL_OFFSET;
+  }
+};
+export {
+  getSelectedListItemIndex,
+  scrollListToItem,
+  scrollListToTop
+};
+//# sourceMappingURL=utils.js.map

package/components/Dropdown/desktop/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Dropdown/desktop/utils.ts"],"sourcesContent":["import React from \"react\";\nimport { IDropdownListItemProps } from \"./DropdownListItem\";\n\n/** Отступ между краем списка и элементом при автоматической прокрутке, px. */\nconst SCROLL_OFFSET = 4;\n\n/**\n * Возвращает индекс выбранного (selected) элемента списка.\n * Если выбранных элементов несколько, возвращается индекс последнего из них.\n * Если выбранных элементов нет, возвращается undefined.\n */\nexport const getSelectedListItemIndex = (children: React.ReactNode): number | undefined => {\n    let selectedIndex: number | undefined;\n\n    React.Children.forEach(children, (child, index) => {\n        if (React.isValidElement<IDropdownListItemProps>(child) && child.props.selected) {\n            selectedIndex = index;\n        }\n    });\n\n    return selectedIndex;\n};\n\n/** Прокручивает контейнер списка к началу. */\nexport const scrollListToTop = (container: HTMLElement | null): void => {\n    if (container) {\n        container.scrollTop = 0;\n    }\n};\n\n/**\n * Прокручивает контейнер списка так, чтобы элемент целиком попал в видимую область.\n * Если элемент уже видим полностью, прокрутка не выполняется.\n */\nexport const scrollListToItem = (container: HTMLElement | null, item: HTMLElement | null): void => {\n    if (!container || !item) {\n        return;\n    }\n\n    const { top: containerTop, bottom: containerBottom } = container.getBoundingClientRect();\n    const { top: itemTop, bottom: itemBottom } = item.getBoundingClientRect();\n\n    if (containerTop > itemTop) {\n        container.scrollTop = container.scrollTop - containerTop + itemTop - SCROLL_OFFSET;\n    } else if (itemBottom > containerBottom) {\n        container.scrollTop = container.scrollTop + itemBottom - containerBottom + SCROLL_OFFSET;\n    }\n};\n"],"names":[],"mappings":";AAIA,MAAM,gBAAgB;AAOf,MAAM,2BAA2B,CAAC,aAAkD;AACvF,MAAI;AAEJ,QAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AAC/C,QAAI,MAAM,eAAuC,KAAK,KAAK,MAAM,MAAM,UAAU;AAC7E,sBAAgB;AAAA,IACpB;AAAA,EACJ,CAAC;AAED,SAAO;AACX;AAGO,MAAM,kBAAkB,CAAC,cAAwC;AACpE,MAAI,WAAW;AACX,cAAU,YAAY;AAAA,EAC1B;AACJ;AAMO,MAAM,mBAAmB,CAAC,WAA+B,SAAmC;AAC/F,MAAI,CAAC,aAAa,CAAC,MAAM;AACrB;AAAA,EACJ;AAEA,QAAM,EAAE,KAAK,cAAc,QAAQ,gBAAA,IAAoB,UAAU,sBAAA;AACjE,QAAM,EAAE,KAAK,SAAS,QAAQ,WAAA,IAAe,KAAK,sBAAA;AAElD,MAAI,eAAe,SAAS;AACxB,cAAU,YAAY,UAAU,YAAY,eAAe,UAAU;AAAA,EACzE,WAAW,aAAa,iBAAiB;AACrC,cAAU,YAAY,UAAU,YAAY,aAAa,kBAAkB;AAAA,EAC/E;AACJ;"}

package/components/Dropdown/index.js

@@ -1,7 +1,7 @@
 import { DropdownListContext } from "./DropdownListContext.js";
 import { DropdownDesktop } from "./desktop/DropdownDesktop.js";
 import { DropdownList } from "./desktop/DropdownList.js";
-import { D } from "../../chunks/DropdownListItem-COR0eOzM.js";
+import { D } from "../../chunks/DropdownListItem-V6Oe5CEm.js";
 import { EDropdownAlignment, EDropdownDirection, EDropdownWidth } from "./desktop/enums.js";
 import { DropdownMobile } from "./mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "./mobile/DropdownMobileBody.js";

package/components/Dropdown/mobile/DropdownMobile.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { OverlayBase, EOverlayDirection } from "../../Overlay/OverlayBase.js";
 import { DropdownMobileInner } from "./DropdownMobileInner.js";
-import { s as styles } from "../../../chunks/DropdownMobile.module-DUiUSr13.js";
+import { s as styles } from "../../../chunks/DropdownMobile.module-dTA2fTAB.js";
 const dropdownMobileBodyOverflowClassName = styles.dropdownMobileBodyOverflow;
 const DropdownMobile = React.forwardRef(
   ({ children, opened, setOpened, ...htmlAttributes }, ref) => {
@@ -20,7 +20,7 @@ const DropdownMobile = React.forwardRef(
         ...props,
         ...htmlAttributes,
         ref,
-        "data-tx": "0.39.0",
+        "data-tx": "0.40.0",
         children
       }
     ) });

package/components/Dropdown/mobile/DropdownMobileBody.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/DropdownMobile.module-DUiUSr13.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/DropdownMobile.module-dTA2fTAB.js";
 const DropdownMobileBody = React.forwardRef(
   ({ children, className, ...htmlAttributes }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.dropdownMobileContent, className), ref, ...htmlAttributes, children })
 );

package/components/Dropdown/mobile/DropdownMobileClose.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { ButtonIcon } from "../../Button/ButtonIcon.js";
 import { CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/DropdownMobile.module-DUiUSr13.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/DropdownMobile.module-dTA2fTAB.js";
 const DropdownMobileClose = React.forwardRef(
   ({ className, ...buttonIconProps }, ref) => /* @__PURE__ */ jsx(ButtonIcon, { className: clsx(styles.dropdownMobileClose, className), ref, ...buttonIconProps, children: /* @__PURE__ */ jsx(CrossStrokeSrvIcon16, { paletteIndex: 5 }) })
 );

package/components/Dropdown/mobile/DropdownMobileFooter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/DropdownMobile.module-DUiUSr13.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/DropdownMobile.module-dTA2fTAB.js";
 const DropdownMobileFooter = React.forwardRef(
   ({ children, className, ...htmlAttributes }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.dropdownMobileFooter, className), ref, ...htmlAttributes, children })
 );

package/components/Dropdown/mobile/DropdownMobileHeader.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/DropdownMobile.module-DUiUSr13.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/DropdownMobile.module-dTA2fTAB.js";
 const DropdownMobileHeader = React.forwardRef(
   ({ children, className, controlButtons, ...htmlAttributes }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.dropdownMobileHeader, className), ref, ...htmlAttributes, children: [
     /* @__PURE__ */ jsx("div", { className: styles.dropdownMobileHeaderContent, children }),

package/components/Dropdown/mobile/DropdownMobileInner.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { useToken } from "../../ThemeProvider/useToken.js";
-import { s as styles } from "../../../chunks/DropdownMobile.module-DUiUSr13.js";
+import { s as styles } from "../../../chunks/DropdownMobile.module-dTA2fTAB.js";
 const DropdownMobileInner = React.forwardRef(
   ({
     children,
@@ -19,10 +19,12 @@ const DropdownMobileInner = React.forwardRef(
     const [openedState, setOpenedState] = useState(false);
     const { scopeClassName } = useToken();
     useEffect(() => {
-      setTimeout(() => setOpeningState(openingProps));
+      const timeoutId = setTimeout(() => setOpeningState(openingProps));
+      return () => clearTimeout(timeoutId);
     }, [openingProps]);
     useEffect(() => {
-      setTimeout(() => setOpenedState(openedProps));
+      const timeoutId = setTimeout(() => setOpenedState(openedProps));
+      return () => clearTimeout(timeoutId);
     }, [openedProps]);
     const classNamesWrapper = clsx(styles.dropdownMobileWrapper, scopeClassName, className);
     const classNamesBackDrop = clsx(styles.dropdownMobileBackdrop, {

package/components/Dropdown/mobile/DropdownMobileInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMobileInner.js","sources":["../../../../src/components/Dropdown/mobile/DropdownMobileInner.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { IOverlayChildrenProvideProps } from \"@sberbusiness/triplex-next/components/Overlay/OverlayBase\";\nimport { useToken } from \"../../ThemeProvider/useToken\";\nimport styles from \"../styles/DropdownMobile.module.less\";\n\n/** Свойства компонента DropdownMobileInner. */\nexport interface IDropdownMobileInnerProps extends IOverlayChildrenProvideProps, React.HTMLAttributes<HTMLDivElement> {}\n\n/** Контент мобильного Dropdown. */\nexport const DropdownMobileInner = React.forwardRef<HTMLDivElement, IDropdownMobileInnerProps>(\n    (\n        {\n            children,\n            className,\n            opened: openedProps,\n            opening: openingProps,\n            closing,\n            setOpened,\n            setClosing,\n            setOpening,\n            ...htmlAttributes\n        },\n        ref,\n    ) => {\n        // OpeningState после рендера становится равен openingProps. Чтобы появилась анимация открытия, сначала нужно отрендерить элемент в закрытом виде.\n        const [openingState, setOpeningState] = useState(false);\n        const [openedState, setOpenedState] = useState(false);\n        const { scopeClassName } = useToken();\n\n        useEffect(() => {\n            setTimeout(() => setOpeningState(openingProps));\n        }, [openingProps]);\n\n        useEffect(() => {\n            setTimeout(() => setOpenedState(openedProps));\n        }, [openedProps]);\n\n        const classNamesWrapper = clsx(styles.dropdownMobileWrapper, scopeClassName, className);\n\n        const classNamesBackDrop = clsx(styles.dropdownMobileBackdrop, {\n            [styles.closing]: closing,\n            [styles.opened]: openedState,\n            [styles.opening]: openingState,\n        });\n\n        const classNamesContent = clsx(styles.dropdownMobile, {\n            [styles.closing]: closing,\n            [styles.opened]: openedState,\n            [styles.opening]: openingState,\n        });\n\n        const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n            const { target, currentTarget } = event;\n\n            if (target === currentTarget) {\n                if (closing) {\n                    setClosing(false);\n                } else if (openingProps) {\n                    setOpening(false);\n                }\n            }\n        };\n\n        /** Функция закрытия DropdownMobile. */\n        const closeDropdown = () => {\n            if (openedProps) {\n                setOpened(false);\n            }\n        };\n\n        if (!openingProps && !openedProps && !closing) {\n            return null;\n        }\n\n        return (\n            <div className={classNamesWrapper}>\n                <div\n                    className={classNamesBackDrop}\n                    onTransitionEnd={handleTransitionEnd}\n                    onTouchStart={closeDropdown}\n                    onMouseDown={closeDropdown}\n                />\n                <div className={classNamesContent} ref={ref} {...htmlAttributes}>\n                    {children}\n                </div>\n            </div>\n        );\n    },\n);\n\nDropdownMobileInner.displayName = \"DropdownMobileInner\";\n"],"names":[],"mappings":";;;;;AAUO,MAAM,sBAAsB,MAAM;AAAA,EACrC,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AAED,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,UAAM,EAAE,eAAA,IAAmB,SAAA;AAE3B,cAAU,MAAM;AACZ,iBAAW,MAAM,gBAAgB,YAAY,CAAC;AAAA,IAClD,GAAG,CAAC,YAAY,CAAC;AAEjB,cAAU,MAAM;AACZ,iBAAW,MAAM,eAAe,WAAW,CAAC;AAAA,IAChD,GAAG,CAAC,WAAW,CAAC;AAEhB,UAAM,oBAAoB,KAAK,OAAO,uBAAuB,gBAAgB,SAAS;AAEtF,UAAM,qBAAqB,KAAK,OAAO,wBAAwB;AAAA,MAC3D,CAAC,OAAO,OAAO,GAAG;AAAA,MAClB,CAAC,OAAO,MAAM,GAAG;AAAA,MACjB,CAAC,OAAO,OAAO,GAAG;AAAA,IAAA,CACrB;AAED,UAAM,oBAAoB,KAAK,OAAO,gBAAgB;AAAA,MAClD,CAAC,OAAO,OAAO,GAAG;AAAA,MAClB,CAAC,OAAO,MAAM,GAAG;AAAA,MACjB,CAAC,OAAO,OAAO,GAAG;AAAA,IAAA,CACrB;AAED,UAAM,sBAAsB,CAAC,UAAiD;AAC1E,YAAM,EAAE,QAAQ,cAAA,IAAkB;AAElC,UAAI,WAAW,eAAe;AAC1B,YAAI,SAAS;AACT,qBAAW,KAAK;AAAA,QACpB,WAAW,cAAc;AACrB,qBAAW,KAAK;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAGA,UAAM,gBAAgB,MAAM;AACxB,UAAI,aAAa;AACb,kBAAU,KAAK;AAAA,MACnB;AAAA,IACJ;AAEA,QAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,SAAS;AAC3C,aAAO;AAAA,IACX;AAEA,WACI,qBAAC,OAAA,EAAI,WAAW,mBACZ,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW;AAAA,UACX,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,aAAa;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEhB,OAAA,EAAI,WAAW,mBAAmB,KAAW,GAAG,gBAC5C,SAAA,CACL;AAAA,IAAA,GACJ;AAAA,EAER;AACJ;AAEA,oBAAoB,cAAc;"}
+{"version":3,"file":"DropdownMobileInner.js","sources":["../../../../src/components/Dropdown/mobile/DropdownMobileInner.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { IOverlayChildrenProvideProps } from \"@sberbusiness/triplex-next/components/Overlay/OverlayBase\";\nimport { useToken } from \"../../ThemeProvider/useToken\";\nimport styles from \"../styles/DropdownMobile.module.less\";\n\n/** Свойства компонента DropdownMobileInner. */\nexport interface IDropdownMobileInnerProps extends IOverlayChildrenProvideProps, React.HTMLAttributes<HTMLDivElement> {}\n\n/** Контент мобильного Dropdown. */\nexport const DropdownMobileInner = React.forwardRef<HTMLDivElement, IDropdownMobileInnerProps>(\n    (\n        {\n            children,\n            className,\n            opened: openedProps,\n            opening: openingProps,\n            closing,\n            setOpened,\n            setClosing,\n            setOpening,\n            ...htmlAttributes\n        },\n        ref,\n    ) => {\n        // OpeningState после рендера становится равен openingProps. Чтобы появилась анимация открытия, сначала нужно отрендерить элемент в закрытом виде.\n        const [openingState, setOpeningState] = useState(false);\n        const [openedState, setOpenedState] = useState(false);\n        const { scopeClassName } = useToken();\n\n        useEffect(() => {\n            const timeoutId = setTimeout(() => setOpeningState(openingProps));\n\n            return () => clearTimeout(timeoutId);\n        }, [openingProps]);\n\n        useEffect(() => {\n            const timeoutId = setTimeout(() => setOpenedState(openedProps));\n\n            return () => clearTimeout(timeoutId);\n        }, [openedProps]);\n\n        const classNamesWrapper = clsx(styles.dropdownMobileWrapper, scopeClassName, className);\n\n        const classNamesBackDrop = clsx(styles.dropdownMobileBackdrop, {\n            [styles.closing]: closing,\n            [styles.opened]: openedState,\n            [styles.opening]: openingState,\n        });\n\n        const classNamesContent = clsx(styles.dropdownMobile, {\n            [styles.closing]: closing,\n            [styles.opened]: openedState,\n            [styles.opening]: openingState,\n        });\n\n        const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n            const { target, currentTarget } = event;\n\n            if (target === currentTarget) {\n                if (closing) {\n                    setClosing(false);\n                } else if (openingProps) {\n                    setOpening(false);\n                }\n            }\n        };\n\n        /** Функция закрытия DropdownMobile. */\n        const closeDropdown = () => {\n            if (openedProps) {\n                setOpened(false);\n            }\n        };\n\n        if (!openingProps && !openedProps && !closing) {\n            return null;\n        }\n\n        return (\n            <div className={classNamesWrapper}>\n                <div\n                    className={classNamesBackDrop}\n                    onTransitionEnd={handleTransitionEnd}\n                    onTouchStart={closeDropdown}\n                    onMouseDown={closeDropdown}\n                />\n                <div className={classNamesContent} ref={ref} {...htmlAttributes}>\n                    {children}\n                </div>\n            </div>\n        );\n    },\n);\n\nDropdownMobileInner.displayName = \"DropdownMobileInner\";\n"],"names":[],"mappings":";;;;;AAUO,MAAM,sBAAsB,MAAM;AAAA,EACrC,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AAED,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,UAAM,EAAE,eAAA,IAAmB,SAAA;AAE3B,cAAU,MAAM;AACZ,YAAM,YAAY,WAAW,MAAM,gBAAgB,YAAY,CAAC;AAEhE,aAAO,MAAM,aAAa,SAAS;AAAA,IACvC,GAAG,CAAC,YAAY,CAAC;AAEjB,cAAU,MAAM;AACZ,YAAM,YAAY,WAAW,MAAM,eAAe,WAAW,CAAC;AAE9D,aAAO,MAAM,aAAa,SAAS;AAAA,IACvC,GAAG,CAAC,WAAW,CAAC;AAEhB,UAAM,oBAAoB,KAAK,OAAO,uBAAuB,gBAAgB,SAAS;AAEtF,UAAM,qBAAqB,KAAK,OAAO,wBAAwB;AAAA,MAC3D,CAAC,OAAO,OAAO,GAAG;AAAA,MAClB,CAAC,OAAO,MAAM,GAAG;AAAA,MACjB,CAAC,OAAO,OAAO,GAAG;AAAA,IAAA,CACrB;AAED,UAAM,oBAAoB,KAAK,OAAO,gBAAgB;AAAA,MAClD,CAAC,OAAO,OAAO,GAAG;AAAA,MAClB,CAAC,OAAO,MAAM,GAAG;AAAA,MACjB,CAAC,OAAO,OAAO,GAAG;AAAA,IAAA,CACrB;AAED,UAAM,sBAAsB,CAAC,UAAiD;AAC1E,YAAM,EAAE,QAAQ,cAAA,IAAkB;AAElC,UAAI,WAAW,eAAe;AAC1B,YAAI,SAAS;AACT,qBAAW,KAAK;AAAA,QACpB,WAAW,cAAc;AACrB,qBAAW,KAAK;AAAA,QACpB;AAAA,MACJ;AAAA,IACJ;AAGA,UAAM,gBAAgB,MAAM;AACxB,UAAI,aAAa;AACb,kBAAU,KAAK;AAAA,MACnB;AAAA,IACJ;AAEA,QAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,SAAS;AAC3C,aAAO;AAAA,IACX;AAEA,WACI,qBAAC,OAAA,EAAI,WAAW,mBACZ,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW;AAAA,UACX,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,aAAa;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEhB,OAAA,EAAI,WAAW,mBAAmB,KAAW,GAAG,gBAC5C,SAAA,CACL;AAAA,IAAA,GACJ;AAAA,EAER;AACJ;AAEA,oBAAoB,cAAc;"}

package/components/Dropdown/mobile/DropdownMobileInput.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-const dropdownMobileInput = "dropdownMobileInput__0cdf712b";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+const dropdownMobileInput = "dropdownMobileInput__e57ad2c3";
 const styles = {
   dropdownMobileInput
 };

package/components/Dropdown/mobile/DropdownMobileList.js

@@ -1,17 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState } from "react";
-import { u as uniqueId, c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
 import { LoaderSmall } from "../../Loader/LoaderSmall/LoaderSmall.js";
 import { ELoaderSmallTheme } from "../../Loader/LoaderSmall/enum.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { DropdownMobileListItem } from "./DropdownMobileListItem.js";
-import { s as styles } from "../../../chunks/DropdownMobile.module-DUiUSr13.js";
+import { s as styles } from "../../../chunks/DropdownMobile.module-dTA2fTAB.js";
+import { u as uniqueId } from "../../../chunks/vendor-BtZO8a0z.js";
 const DropdownMobileList = React.forwardRef(
   ({ children, className, loading, ...htmlAttributes }, ref) => {
     const [loaderId] = useState(() => uniqueId());
     const renderLoaderItem = () => /* @__PURE__ */ jsx(DropdownMobileListItem, { id: loaderId, className: styles.dropdownMobileListLoader, children: /* @__PURE__ */ jsx(LoaderSmall, { theme: ELoaderSmallTheme.BRAND, size: EComponentSize.MD }) });
-    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.dropdownMobileList, className), role: "listbox", ...htmlAttributes, ref, children: [
+    return /* @__PURE__ */ jsxs("div", { className, role: "listbox", ...htmlAttributes, ref, children: [
       children,
       loading && renderLoaderItem()
     ] });