@sberbusiness/triplex-next 1.40.0 → 1.41.1

package/components/SelectExtendedField/SelectExtendedField.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useState, useRef, useLayoutEffect, useCallback, useEffect } from "react";
+import React__default, { useState, useRef, useCallback, useEffect } from "react";
+import { c as clsx } from "../../chunks/vendor-CtuAQuEN.js";
 import { isKey, EVENT_KEY_CODES } from "../../utils/keyboard.js";
 import { KeyDownListener } from "../KeyDownListener/KeyDownListener.js";
-import { c as clsx } from "../../chunks/vendor-CtuAQuEN.js";
+import "../KeyDownListener/ComposedKeyDownListener.js";
 import { SelectExtendedFieldTarget } from "./components/SelectExtendedFieldTarget.js";
 import { SelectExtendedFieldDropdown } from "./components/SelectExtendedFieldDropdown.js";
-const selectExtendedField = "selectExtendedField__4cc3214a";
+const selectExtendedField = "selectExtendedField__e45b4d6d";
 const styles = {
   selectExtendedField
 };
@@ -15,44 +16,25 @@ const SelectExtendedField = Object.assign(
     const [opened, setOpened] = useState(false);
     const targetRef = useRef(null);
     const dropdownRef = useRef(null);
-    const onOpenRef = useRef(onOpen);
-    const onCloseRef = useRef(onClose);
-    const isMountedRef = useRef(false);
-    useLayoutEffect(() => {
-      onOpenRef.current = onOpen;
-      onCloseRef.current = onClose;
-    });
-    const setRef = (instance) => {
-      targetRef.current = instance;
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref) {
-        ref.current = instance;
-      }
-    };
-    const handleSetOpened = useCallback((newOpened) => {
-      setOpened(newOpened);
-    }, []);
-    const listenMouseDown = useCallback(
-      (event) => {
-        var _a, _b;
-        if (opened) {
-          if (!((_a = targetRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = dropdownRef.current) == null ? void 0 : _b.contains(event.target))) {
-            setOpened(false);
-          }
+    const prevOpenedRef = useRef(opened);
+    const callbacksRef = useRef({ onOpen, onClose });
+    const setTargetRef = useCallback(
+      (instance) => {
+        targetRef.current = instance;
+        if (typeof ref === "function") {
+          ref(instance);
+        } else if (ref) {
+          ref.current = instance;
         }
       },
-      [opened]
+      [ref]
     );
     const closeDropdown = useCallback(() => {
-      if (opened) {
-        setOpened(false);
-      }
-    }, [opened]);
+      setOpened(false);
+    }, []);
     const handleKeyDown = useCallback(
       (event) => {
-        const key = event.code || event.keyCode;
-        if (closeOnTab && isKey(key, "TAB")) {
+        if (closeOnTab && isKey(event.code || event.keyCode, "TAB")) {
           closeDropdown();
         }
         onKeyDown == null ? void 0 : onKeyDown(event);
@@ -60,21 +42,34 @@ const SelectExtendedField = Object.assign(
       [closeOnTab, closeDropdown, onKeyDown]
     );
     useEffect(() => {
-      document.addEventListener("mousedown", listenMouseDown);
+      if (!opened) {
+        return;
+      }
+      const handleDocumentMouseDown = (event) => {
+        var _a, _b;
+        const eventTarget = event.target;
+        if (!((_a = targetRef.current) == null ? void 0 : _a.contains(eventTarget)) && !((_b = dropdownRef.current) == null ? void 0 : _b.contains(eventTarget))) {
+          setOpened(false);
+        }
+      };
+      document.addEventListener("mousedown", handleDocumentMouseDown);
       return () => {
-        document.removeEventListener("mousedown", listenMouseDown);
+        document.removeEventListener("mousedown", handleDocumentMouseDown);
       };
-    }, [listenMouseDown]);
+    }, [opened]);
+    useEffect(() => {
+      callbacksRef.current = { onOpen, onClose };
+    });
     useEffect(() => {
-      var _a, _b;
-      if (!isMountedRef.current) {
-        isMountedRef.current = true;
+      var _a, _b, _c, _d;
+      if (prevOpenedRef.current === opened) {
         return;
       }
+      prevOpenedRef.current = opened;
       if (opened) {
-        (_a = onOpenRef.current) == null ? void 0 : _a.call(onOpenRef);
+        (_b = (_a = callbacksRef.current).onOpen) == null ? void 0 : _b.call(_a);
       } else {
-        (_b = onCloseRef.current) == null ? void 0 : _b.call(onCloseRef);
+        (_d = (_c = callbacksRef.current).onClose) == null ? void 0 : _d.call(_c);
       }
     }, [opened]);
     return /* @__PURE__ */ jsx(KeyDownListener, { onMatch: closeDropdown, eventKeyCode: EVENT_KEY_CODES.ESCAPE, children: /* @__PURE__ */ jsxs(
@@ -82,14 +77,14 @@ const SelectExtendedField = Object.assign(
       {
         className: clsx(styles.selectExtendedField, className),
         onKeyDown: handleKeyDown,
-        ref: setRef,
+        ref: setTargetRef,
         ...htmlDivAttributes,
         children: [
-          renderTarget({ opened, setOpened: handleSetOpened }),
+          renderTarget({ opened, setOpened }),
           children({
             dropdownRef,
             opened,
-            setOpened: handleSetOpened,
+            setOpened,
             targetRef
           })
         ]

package/components/SelectExtendedField/SelectExtendedField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectExtendedField.js","sources":["../../../src/components/SelectExtendedField/SelectExtendedField.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useLayoutEffect, useCallback } from \"react\";\nimport { isKey, EVENT_KEY_CODES } from \"../../utils/keyboard\";\nimport { KeyDownListener } from \"../KeyDownListener\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/SelectExtendedField.module.less\";\nimport { SelectExtendedFieldTarget } from \"./components/SelectExtendedFieldTarget\";\nimport { SelectExtendedFieldDropdown } from \"./components/SelectExtendedFieldDropdown\";\nimport { IDropdownListItemProps } from \"../Dropdown\";\n\n/* Свойства опции списка. */\nexport interface ISelectExtendedFieldDefaultOption extends Omit<\n    IDropdownListItemProps,\n    \"active\" | \"onSelect\" | \"selected\" | \"keyCodesForSelection\" | \"className\" | \"key\"\n> {\n    /* Значение опции. */\n    value: string;\n    /* Название опции. */\n    label: React.ReactNode;\n}\n\n/* Свойства, передаваемые из Select в функцию рендера target - renderTarget. */\nexport interface ISelectExtendedFieldTargetProvideProps {\n    /* Флаг открытости выпадающего списка. */\n    opened: boolean;\n    /* Функция открытия/закрытия Select. */\n    setOpened: (opened: boolean) => void;\n}\n\n/* Свойства, передаваемые из Select в функцию рендера dropdown - children. */\nexport interface ISelectExtendedFieldDropdownProvideProps {\n    /* Флаг открытости выпадающего списка. */\n    opened: boolean;\n    /* Функция открытия/закрытия Select. */\n    setOpened: (opened: boolean) => void;\n    targetRef: React.RefObject<HTMLDivElement>;\n    dropdownRef: React.RefObject<HTMLDivElement>;\n}\n\n/* Свойства компонента SelectExtendedField. */\nexport interface ISelectExtendedFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Рендер-функция поля выбора. */\n    renderTarget: (props: ISelectExtendedFieldTargetProvideProps) => React.ReactNode;\n    /** Рендер-функция выпадающего блока. */\n    children: (props: ISelectExtendedFieldDropdownProvideProps) => React.ReactNode;\n    /** Функция, срабатывающая при закрытии выпадающего блока. */\n    onClose?: () => void;\n    /** Функция, срабатывающая при открытии выпадающего блока. */\n    onOpen?: () => void;\n    /** Закрытие выпадающего блока при нажатии клавиши Tab. */\n    closeOnTab?: boolean;\n}\n\n/* Базовый компонент Select. На его основе могут строиться Selects с любыми value, options и target. */\nexport const SelectExtendedField = Object.assign(\n    React.forwardRef<HTMLDivElement, ISelectExtendedFieldProps>((props, ref) => {\n        const { className, onKeyDown, children, renderTarget, closeOnTab, onClose, onOpen, ...htmlDivAttributes } =\n            props;\n\n        const [opened, setOpened] = useState(false);\n        const targetRef = useRef<HTMLDivElement | null>(null);\n        const dropdownRef = useRef<HTMLDivElement>(null);\n        // Stable event handler pattern: колбэки хранятся в рефах, чтобы эффект\n        // не перезапускался при смене ссылок на функции между рендерами.\n        const onOpenRef = useRef(onOpen);\n        const onCloseRef = useRef(onClose);\n        // Флаг для пропуска первого срабатывания эффекта при маунте.\n        const isMountedRef = useRef(false);\n\n        // useLayoutEffect без зависимостей синхронизирует рефы после каждого коммита,\n        // гарантируя актуальность колбэков до запуска useEffect.\n        useLayoutEffect(() => {\n            onOpenRef.current = onOpen;\n            onCloseRef.current = onClose;\n        });\n\n        const setRef = (instance: HTMLDivElement | null) => {\n            targetRef.current = instance;\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        const handleSetOpened = useCallback((newOpened: boolean) => {\n            setOpened(newOpened);\n        }, []);\n\n        const listenMouseDown = useCallback(\n            (event: Event) => {\n                if (opened) {\n                    if (\n                        !targetRef.current?.contains(event.target as Node) &&\n                        !dropdownRef.current?.contains(event.target as Node)\n                    ) {\n                        setOpened(false);\n                    }\n                }\n            },\n            [opened],\n        );\n\n        const closeDropdown = useCallback(() => {\n            if (opened) {\n                setOpened(false);\n            }\n        }, [opened]);\n\n        const handleKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLDivElement>) => {\n                const key = event.code || event.keyCode;\n\n                if (closeOnTab && isKey(key, \"TAB\")) {\n                    closeDropdown();\n                }\n\n                onKeyDown?.(event);\n            },\n            [closeOnTab, closeDropdown, onKeyDown],\n        );\n\n        useEffect(() => {\n            document.addEventListener(\"mousedown\", listenMouseDown);\n            return () => {\n                document.removeEventListener(\"mousedown\", listenMouseDown);\n            };\n        }, [listenMouseDown]);\n\n        // Вызываем onOpen/onClose только при реальных переходах opened,\n        // пропуская первое срабатывание при маунте (opened = false по умолчанию).\n        useEffect(() => {\n            if (!isMountedRef.current) {\n                isMountedRef.current = true;\n                return;\n            }\n\n            if (opened) {\n                onOpenRef.current?.();\n            } else {\n                onCloseRef.current?.();\n            }\n        }, [opened]);\n\n        return (\n            <KeyDownListener onMatch={closeDropdown} eventKeyCode={EVENT_KEY_CODES.ESCAPE}>\n                <div\n                    className={clsx(styles.selectExtendedField, className)}\n                    onKeyDown={handleKeyDown}\n                    ref={setRef}\n                    {...htmlDivAttributes}\n                >\n                    {renderTarget({ opened, setOpened: handleSetOpened })}\n                    {children({\n                        dropdownRef,\n                        opened,\n                        setOpened: handleSetOpened,\n                        targetRef,\n                    })}\n                </div>\n            </KeyDownListener>\n        );\n    }),\n    {\n        Target: SelectExtendedFieldTarget,\n        Dropdown: SelectExtendedFieldDropdown,\n    },\n);\n\nSelectExtendedField.displayName = \"SelectExtendedField\";\n"],"names":["React"],"mappings":";;;;;;;;;;;AAqDO,MAAM,sBAAsB,OAAO;AAAA,EACtCA,eAAM,WAAsD,CAAC,OAAO,QAAQ;AACxE,UAAM,EAAE,WAAW,WAAW,UAAU,cAAc,YAAY,SAAS,QAAQ,GAAG,kBAAA,IAClF;AAEJ,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,UAAM,YAAY,OAA8B,IAAI;AACpD,UAAM,cAAc,OAAuB,IAAI;AAG/C,UAAM,YAAY,OAAO,MAAM;AAC/B,UAAM,aAAa,OAAO,OAAO;AAEjC,UAAM,eAAe,OAAO,KAAK;AAIjC,oBAAgB,MAAM;AAClB,gBAAU,UAAU;AACpB,iBAAW,UAAU;AAAA,IACzB,CAAC;AAED,UAAM,SAAS,CAAC,aAAoC;AAChD,gBAAU,UAAU;AACpB,UAAI,OAAO,QAAQ,YAAY;AAC3B,YAAI,QAAQ;AAAA,MAChB,WAAW,KAAK;AACZ,YAAI,UAAU;AAAA,MAClB;AAAA,IACJ;AAEA,UAAM,kBAAkB,YAAY,CAAC,cAAuB;AACxD,gBAAU,SAAS;AAAA,IACvB,GAAG,CAAA,CAAE;AAEL,UAAM,kBAAkB;AAAA,MACpB,CAAC,UAAiB;;AACd,YAAI,QAAQ;AACR,cACI,GAAC,eAAU,YAAV,mBAAmB,SAAS,MAAM,YACnC,GAAC,iBAAY,YAAZ,mBAAqB,SAAS,MAAM,UACvC;AACE,sBAAU,KAAK;AAAA,UACnB;AAAA,QACJ;AAAA,MACJ;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGX,UAAM,gBAAgB,YAAY,MAAM;AACpC,UAAI,QAAQ;AACR,kBAAU,KAAK;AAAA,MACnB;AAAA,IACJ,GAAG,CAAC,MAAM,CAAC;AAEX,UAAM,gBAAgB;AAAA,MAClB,CAAC,UAA+C;AAC5C,cAAM,MAAM,MAAM,QAAQ,MAAM;AAEhC,YAAI,cAAc,MAAM,KAAK,KAAK,GAAG;AACjC,wBAAA;AAAA,QACJ;AAEA,+CAAY;AAAA,MAChB;AAAA,MACA,CAAC,YAAY,eAAe,SAAS;AAAA,IAAA;AAGzC,cAAU,MAAM;AACZ,eAAS,iBAAiB,aAAa,eAAe;AACtD,aAAO,MAAM;AACT,iBAAS,oBAAoB,aAAa,eAAe;AAAA,MAC7D;AAAA,IACJ,GAAG,CAAC,eAAe,CAAC;AAIpB,cAAU,MAAM;;AACZ,UAAI,CAAC,aAAa,SAAS;AACvB,qBAAa,UAAU;AACvB;AAAA,MACJ;AAEA,UAAI,QAAQ;AACR,wBAAU,YAAV;AAAA,MACJ,OAAO;AACH,yBAAW,YAAX;AAAA,MACJ;AAAA,IACJ,GAAG,CAAC,MAAM,CAAC;AAEX,+BACK,iBAAA,EAAgB,SAAS,eAAe,cAAc,gBAAgB,QACnE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,qBAAqB,SAAS;AAAA,QACrD,WAAW;AAAA,QACX,KAAK;AAAA,QACJ,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAa,EAAE,QAAQ,WAAW,gBAAA,CAAiB;AAAA,UACnD,SAAS;AAAA,YACN;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX;AAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER,CAAC;AAAA,EACD;AAAA,IACI,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAElB;AAEA,oBAAoB,cAAc;"}
+{"version":3,"file":"SelectExtendedField.js","sources":["../../../src/components/SelectExtendedField/SelectExtendedField.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { isKey, EVENT_KEY_CODES } from \"../../utils/keyboard\";\nimport { KeyDownListener } from \"../KeyDownListener\";\nimport { IDropdownListItemProps } from \"../Dropdown\";\nimport { SelectExtendedFieldTarget } from \"./components/SelectExtendedFieldTarget\";\nimport { SelectExtendedFieldDropdown } from \"./components/SelectExtendedFieldDropdown\";\nimport styles from \"./styles/SelectExtendedField.module.less\";\n\n/** Свойства опции списка. */\nexport interface ISelectExtendedFieldDefaultOption extends Omit<\n    IDropdownListItemProps,\n    \"active\" | \"onSelect\" | \"selected\" | \"keyCodesForSelection\" | \"className\" | \"key\"\n> {\n    /** Значение опции. */\n    value: string;\n    /** Название опции. */\n    label: React.ReactNode;\n}\n\n/** Свойства, передаваемые из SelectExtendedField в функцию рендера target - renderTarget. */\nexport interface ISelectExtendedFieldTargetProvideProps {\n    /** Флаг открытости выпадающего блока. */\n    opened: boolean;\n    /** Функция открытия/закрытия выпадающего блока. */\n    setOpened: (opened: boolean) => void;\n}\n\n/** Свойства, передаваемые из SelectExtendedField в функцию рендера dropdown - children. */\nexport interface ISelectExtendedFieldDropdownProvideProps {\n    /** Флаг открытости выпадающего блока. */\n    opened: boolean;\n    /** Функция открытия/закрытия выпадающего блока. */\n    setOpened: (opened: boolean) => void;\n    /** Ссылка на поле выбора. По ней выпадающий блок считает своё положение. */\n    targetRef: React.RefObject<HTMLDivElement>;\n    /** Ссылка на выпадающий блок. Нужна, чтобы клик внутри него не закрывал список. */\n    dropdownRef: React.RefObject<HTMLDivElement>;\n}\n\n/** Свойства компонента SelectExtendedField. */\nexport interface ISelectExtendedFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Рендер-функция поля выбора. */\n    renderTarget: (props: ISelectExtendedFieldTargetProvideProps) => React.ReactNode;\n    /** Рендер-функция выпадающего блока. */\n    children: (props: ISelectExtendedFieldDropdownProvideProps) => React.ReactNode;\n    /** Функция, срабатывающая при закрытии выпадающего блока. На первом рендере не вызывается. */\n    onClose?: () => void;\n    /** Функция, срабатывающая при открытии выпадающего блока. На первом рендере не вызывается. */\n    onOpen?: () => void;\n    /** Закрытие выпадающего блока при нажатии клавиши Tab. По умолчанию false. */\n    closeOnTab?: boolean;\n}\n\n/**\n * Базовый компонент Select. На его основе строятся Select'ы с любыми value, options и target.\n *\n * Владеет только состоянием открытости: разметку поля выбора отдаёт в renderTarget,\n * разметку выпадающего блока — в children. Закрывает список по Escape, по клику вне\n * поля и выпадающего блока, а при closeOnTab — ещё и по Tab.\n */\nexport const SelectExtendedField = Object.assign(\n    React.forwardRef<HTMLDivElement, ISelectExtendedFieldProps>((props, ref) => {\n        const { className, onKeyDown, children, renderTarget, closeOnTab, onClose, onOpen, ...htmlDivAttributes } =\n            props;\n\n        const [opened, setOpened] = useState(false);\n        const targetRef = useRef<HTMLDivElement | null>(null);\n        const dropdownRef = useRef<HTMLDivElement>(null);\n        // Предыдущее состояние открытости. Сравнение со значением, а не флаг \"смонтирован\",\n        // делает эффект идемпотентным: повторный маунт в StrictMode не вызывает колбэки.\n        const prevOpenedRef = useRef(opened);\n        // Актуальные колбэки хранятся в ref, чтобы эффект зависел только от opened\n        // и не вызывал onOpen/onClose при смене идентичности колбэков между рендерами.\n        const callbacksRef = useRef({ onOpen, onClose });\n\n        const setTargetRef = useCallback(\n            (instance: HTMLDivElement | null) => {\n                targetRef.current = instance;\n\n                if (typeof ref === \"function\") {\n                    ref(instance);\n                } else if (ref) {\n                    ref.current = instance;\n                }\n            },\n            [ref],\n        );\n\n        const closeDropdown = useCallback(() => {\n            setOpened(false);\n        }, []);\n\n        const handleKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLDivElement>) => {\n                if (closeOnTab && isKey(event.code || event.keyCode, \"TAB\")) {\n                    closeDropdown();\n                }\n\n                onKeyDown?.(event);\n            },\n            [closeOnTab, closeDropdown, onKeyDown],\n        );\n\n        // Пока список открыт, клик вне поля и вне выпадающего блока закрывает его.\n        useEffect(() => {\n            if (!opened) {\n                return;\n            }\n\n            const handleDocumentMouseDown = (event: MouseEvent) => {\n                const eventTarget = event.target as Node;\n\n                if (!targetRef.current?.contains(eventTarget) && !dropdownRef.current?.contains(eventTarget)) {\n                    setOpened(false);\n                }\n            };\n\n            document.addEventListener(\"mousedown\", handleDocumentMouseDown);\n\n            return () => {\n                document.removeEventListener(\"mousedown\", handleDocumentMouseDown);\n            };\n        }, [opened]);\n\n        useEffect(() => {\n            callbacksRef.current = { onOpen, onClose };\n        });\n\n        useEffect(() => {\n            // Колбэки вызываются только на смену состояния, но не на первом рендере.\n            if (prevOpenedRef.current === opened) {\n                return;\n            }\n\n            prevOpenedRef.current = opened;\n\n            if (opened) {\n                callbacksRef.current.onOpen?.();\n            } else {\n                callbacksRef.current.onClose?.();\n            }\n        }, [opened]);\n\n        return (\n            <KeyDownListener onMatch={closeDropdown} eventKeyCode={EVENT_KEY_CODES.ESCAPE}>\n                <div\n                    className={clsx(styles.selectExtendedField, className)}\n                    onKeyDown={handleKeyDown}\n                    ref={setTargetRef}\n                    {...htmlDivAttributes}\n                >\n                    {renderTarget({ opened, setOpened })}\n                    {children({\n                        dropdownRef,\n                        opened,\n                        setOpened,\n                        targetRef,\n                    })}\n                </div>\n            </KeyDownListener>\n        );\n    }),\n    {\n        Target: SelectExtendedFieldTarget,\n        Dropdown: SelectExtendedFieldDropdown,\n    },\n);\n\nSelectExtendedField.displayName = \"SelectExtendedField\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;AA6DO,MAAM,sBAAsB,OAAO;AAAA,EACtCA,eAAM,WAAsD,CAAC,OAAO,QAAQ;AACxE,UAAM,EAAE,WAAW,WAAW,UAAU,cAAc,YAAY,SAAS,QAAQ,GAAG,kBAAA,IAClF;AAEJ,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,UAAM,YAAY,OAA8B,IAAI;AACpD,UAAM,cAAc,OAAuB,IAAI;AAG/C,UAAM,gBAAgB,OAAO,MAAM;AAGnC,UAAM,eAAe,OAAO,EAAE,QAAQ,SAAS;AAE/C,UAAM,eAAe;AAAA,MACjB,CAAC,aAAoC;AACjC,kBAAU,UAAU;AAEpB,YAAI,OAAO,QAAQ,YAAY;AAC3B,cAAI,QAAQ;AAAA,QAChB,WAAW,KAAK;AACZ,cAAI,UAAU;AAAA,QAClB;AAAA,MACJ;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGR,UAAM,gBAAgB,YAAY,MAAM;AACpC,gBAAU,KAAK;AAAA,IACnB,GAAG,CAAA,CAAE;AAEL,UAAM,gBAAgB;AAAA,MAClB,CAAC,UAA+C;AAC5C,YAAI,cAAc,MAAM,MAAM,QAAQ,MAAM,SAAS,KAAK,GAAG;AACzD,wBAAA;AAAA,QACJ;AAEA,+CAAY;AAAA,MAChB;AAAA,MACA,CAAC,YAAY,eAAe,SAAS;AAAA,IAAA;AAIzC,cAAU,MAAM;AACZ,UAAI,CAAC,QAAQ;AACT;AAAA,MACJ;AAEA,YAAM,0BAA0B,CAAC,UAAsB;;AACnD,cAAM,cAAc,MAAM;AAE1B,YAAI,GAAC,eAAU,YAAV,mBAAmB,SAAS,iBAAgB,GAAC,iBAAY,YAAZ,mBAAqB,SAAS,eAAc;AAC1F,oBAAU,KAAK;AAAA,QACnB;AAAA,MACJ;AAEA,eAAS,iBAAiB,aAAa,uBAAuB;AAE9D,aAAO,MAAM;AACT,iBAAS,oBAAoB,aAAa,uBAAuB;AAAA,MACrE;AAAA,IACJ,GAAG,CAAC,MAAM,CAAC;AAEX,cAAU,MAAM;AACZ,mBAAa,UAAU,EAAE,QAAQ,QAAA;AAAA,IACrC,CAAC;AAED,cAAU,MAAM;;AAEZ,UAAI,cAAc,YAAY,QAAQ;AAClC;AAAA,MACJ;AAEA,oBAAc,UAAU;AAExB,UAAI,QAAQ;AACR,iCAAa,SAAQ,WAArB;AAAA,MACJ,OAAO;AACH,iCAAa,SAAQ,YAArB;AAAA,MACJ;AAAA,IACJ,GAAG,CAAC,MAAM,CAAC;AAEX,+BACK,iBAAA,EAAgB,SAAS,eAAe,cAAc,gBAAgB,QACnE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,qBAAqB,SAAS;AAAA,QACrD,WAAW;AAAA,QACX,KAAK;AAAA,QACJ,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAa,EAAE,QAAQ,WAAW;AAAA,UAClC,SAAS;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER,CAAC;AAAA,EACD;AAAA,IACI,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAElB;AAEA,oBAAoB,cAAc;"}

package/components/SelectExtendedField/components/SelectExtendedFieldDropdown.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-BqOoPFSx.js";
+import "../../../chunks/DropdownListItem-BVgGltGX.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -21,6 +21,7 @@ const SelectExtendedFieldDropdown = ({
   targetRef,
   ...rest
 }) => /* @__PURE__ */ jsx(Dropdown, { ...rest, ref: forwardedRef, targetRef, children });
+SelectExtendedFieldDropdown.displayName = "SelectExtendedFieldDropdown";
 SelectExtendedFieldDropdown.List = DropdownList;
 export {
   SelectExtendedFieldDropdown

package/components/SelectExtendedField/components/SelectExtendedFieldDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectExtendedFieldDropdown.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Dropdown, IDropdownProps } from \"../../Dropdown\";\nimport { DropdownList } from \"../../Dropdown/desktop/DropdownList\";\n\n/* Свойства SelectExtendedFieldDropdown. */\nexport interface ISelectExtendedFieldDropdownProps extends Omit<IDropdownProps, \"forwardedRef\"> {\n    /* Ссылка на контейнер Dropdown. */\n    forwardedRef: React.RefObject<HTMLDivElement>;\n    /* Дочерние элементы. */\n    children?: React.ReactNode;\n    /* Открыт. */\n    opened: boolean;\n    /* Ссылка на управляющий элемент. */\n    targetRef: React.RefObject<HTMLElement>;\n}\n\nexport interface ISelectExtendedFieldDropdownFC extends React.FC<ISelectExtendedFieldDropdownProps> {\n    List: typeof DropdownList;\n}\n\nexport const SelectExtendedFieldDropdown: ISelectExtendedFieldDropdownFC = ({\n    forwardedRef,\n    children,\n    targetRef,\n    ...rest\n}) => (\n    <Dropdown {...rest} ref={forwardedRef} targetRef={targetRef}>\n        {children}\n    </Dropdown>\n);\n\nSelectExtendedFieldDropdown.List = DropdownList;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoBO,MAAM,8BAA8D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,0BACK,UAAA,EAAU,GAAG,MAAM,KAAK,cAAc,WAClC,SAAA,CACL;AAGJ,4BAA4B,OAAO;"}
+{"version":3,"file":"SelectExtendedFieldDropdown.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Dropdown, IDropdownProps } from \"../../Dropdown\";\nimport { DropdownList } from \"../../Dropdown/desktop/DropdownList\";\n\n/** Свойства компонента SelectExtendedFieldDropdown. */\nexport interface ISelectExtendedFieldDropdownProps extends Omit<IDropdownProps, \"forwardedRef\"> {\n    /** Ссылка на контейнер выпадающего блока. Компонент не forwardRef — ссылка передаётся этим свойством. */\n    forwardedRef: React.RefObject<HTMLDivElement>;\n    /** Содержимое выпадающего блока. */\n    children?: React.ReactNode;\n    /** Состояние открытости выпадающего блока. */\n    opened: boolean;\n    /** Ссылка на поле выбора. По ней выпадающий блок считает своё положение. */\n    targetRef: React.RefObject<HTMLElement>;\n}\n\n/** Тип компонента SelectExtendedFieldDropdown со статическим свойством List. */\nexport interface ISelectExtendedFieldDropdownFC extends React.FC<ISelectExtendedFieldDropdownProps> {\n    /** Список опций выпадающего блока. */\n    List: typeof DropdownList;\n}\n\n/** Выпадающий блок SelectExtendedField. Обёртка над Dropdown, принимающая ссылку через forwardedRef. */\nexport const SelectExtendedFieldDropdown: ISelectExtendedFieldDropdownFC = ({\n    forwardedRef,\n    children,\n    targetRef,\n    ...rest\n}) => (\n    <Dropdown {...rest} ref={forwardedRef} targetRef={targetRef}>\n        {children}\n    </Dropdown>\n);\n\nSelectExtendedFieldDropdown.displayName = \"SelectExtendedFieldDropdown\";\nSelectExtendedFieldDropdown.List = DropdownList;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBO,MAAM,8BAA8D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,0BACK,UAAA,EAAU,GAAG,MAAM,KAAK,cAAc,WAClC,SAAA,CACL;AAGJ,4BAA4B,cAAc;AAC1C,4BAA4B,OAAO;"}

package/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createElement } from "react";
 import { SelectExtendedField } from "../SelectExtendedField.js";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-BqOoPFSx.js";
+import "../../../chunks/DropdownListItem-BVgGltGX.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../../Dropdown/mobile/DropdownMobileBody.js";
 import { DropdownMobileClose } from "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -38,6 +37,20 @@ const SelectExtendedFieldDropdownDefault = ({
   targetRef,
   value
 }) => {
+  const getOptionProps = (option) => {
+    const { label, ...restOption } = option;
+    return {
+      ...restOption,
+      className: dropdownListItemClassName,
+      id: option.id,
+      selected: option.id === (value == null ? void 0 : value.id),
+      onSelect: () => {
+        onChange(option);
+        setOpened(false);
+      },
+      children: label
+    };
+  };
   return /* @__PURE__ */ jsx(
     SelectExtendedField.Dropdown,
     {
@@ -51,47 +64,14 @@ const SelectExtendedFieldDropdownDefault = ({
       mobileViewProps: {
         children: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(DropdownMobileHeader, { controlButtons: /* @__PURE__ */ jsx(DropdownMobileClose, { onClick: () => setOpened(false) }), children: /* @__PURE__ */ jsx(Text, { tag: "div", size: ETextSize.B3, children: mobileTitle }) }),
-          /* @__PURE__ */ jsx(DropdownMobileBody, { children: /* @__PURE__ */ jsx(DropdownMobileList, { children: options.map((option) => {
-            const { label, ...restOption } = option;
-            return /* @__PURE__ */ createElement(
-              DropdownMobileListItem,
-              {
-                ...restOption,
-                className: dropdownListItemClassName,
-                id: option.id,
-                key: option.id,
-                selected: option.id === (value == null ? void 0 : value.id),
-                onSelect: () => {
-                  onChange(option);
-                  setOpened(false);
-                }
-              },
-              label
-            );
-          }) }) })
+          /* @__PURE__ */ jsx(DropdownMobileBody, { children: /* @__PURE__ */ jsx(DropdownMobileList, { children: options.map((option) => /* @__PURE__ */ jsx(DropdownMobileListItem, { ...getOptionProps(option) }, option.id)) }) })
         ] })
       },
-      children: /* @__PURE__ */ jsx(SelectExtendedField.Dropdown.List, { id: listId, dropdownOpened: opened, size, children: options.map((option) => {
-        const { label, ...restOption } = option;
-        return /* @__PURE__ */ createElement(
-          SelectExtendedField.Dropdown.List.Item,
-          {
-            ...restOption,
-            className: dropdownListItemClassName,
-            id: option.id,
-            key: option.id,
-            selected: option.id === (value == null ? void 0 : value.id),
-            onSelect: () => {
-              onChange(option);
-              setOpened(false);
-            }
-          },
-          label
-        );
-      }) })
+      children: /* @__PURE__ */ jsx(SelectExtendedField.Dropdown.List, { id: listId, dropdownOpened: opened, size, children: options.map((option) => /* @__PURE__ */ jsx(SelectExtendedField.Dropdown.List.Item, { ...getOptionProps(option) }, option.id)) })
     }
   );
 };
+SelectExtendedFieldDropdownDefault.displayName = "SelectExtendedFieldDropdownDefault";
 export {
   SelectExtendedFieldDropdownDefault
 };

package/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectExtendedFieldDropdownDefault.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    ISelectExtendedFieldDefaultOption,\n    ISelectExtendedFieldDropdownProvideProps,\n    SelectExtendedField,\n} from \"../SelectExtendedField\";\nimport {\n    DropdownMobileBody,\n    DropdownMobileClose,\n    DropdownMobileHeader,\n    DropdownMobileList,\n    DropdownMobileListItem,\n    IDropdownProps,\n} from \"../../Dropdown\";\nimport { Text, ETextSize } from \"../../Typography\";\n\nexport interface ISelectExtendedFieldDropdownDefaultProps\n    extends ISelectExtendedFieldDropdownProvideProps, Pick<IDropdownProps, \"size\" | \"width\"> {\n    /* ClassName для модификации SelectExtendedField.Dropdown.List.Item. */\n    dropdownListItemClassName?: string;\n    /* Свойства, передающиеся в Dropdown. */\n    dropdownProps?: Omit<\n        IDropdownProps,\n        \"children\" | \"opened\" | \"setOpened\" | \"targetRef\" | \"size\" | \"mobileViewProps\"\n    >;\n    /* Состояние загрузки. В этот момент Dropdown закрыт, Target отображает loader. */\n    loading?: boolean;\n    /* Id SelectExtendedField.Dropdown.List. Нужен для связи с Target. */\n    listId?: string;\n    /* Название Select отображающееся в мобильном режиме. */\n    mobileTitle?: React.ReactNode;\n    /* Список опций. */\n    options: ISelectExtendedFieldDefaultOption[];\n    /* Обработчик изменения значения. */\n    onChange: (option: ISelectExtendedFieldDefaultOption) => void;\n    /* Текущее выбранное значение. */\n    value?: ISelectExtendedFieldDefaultOption;\n}\n\n/**\n * Дефолтный рендер Dropdown для SelectExtendedField.\n * Вынесено в отдельный компонент для переиспользования внутри компонентов Triplex.\n */\nexport const SelectExtendedFieldDropdownDefault: React.FC<ISelectExtendedFieldDropdownDefaultProps> = ({\n    dropdownRef,\n    dropdownListItemClassName,\n    dropdownProps,\n    width,\n    loading,\n    listId,\n    mobileTitle,\n    onChange,\n    opened,\n    size,\n    options,\n    setOpened,\n    targetRef,\n    value,\n}) => {\n    return (\n        <SelectExtendedField.Dropdown\n            opened={opened && !loading}\n            forwardedRef={dropdownRef}\n            width={width}\n            setOpened={setOpened}\n            targetRef={targetRef}\n            size={size}\n            {...dropdownProps}\n            mobileViewProps={{\n                children: (\n                    <>\n                        <DropdownMobileHeader controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}>\n                            <Text tag=\"div\" size={ETextSize.B3}>\n                                {mobileTitle}\n                            </Text>\n                        </DropdownMobileHeader>\n                        <DropdownMobileBody>\n                            <DropdownMobileList>\n                                {options.map((option) => {\n                                    const { label, ...restOption } = option;\n\n                                    return (\n                                        <DropdownMobileListItem\n                                            {...restOption}\n                                            className={dropdownListItemClassName}\n                                            id={option.id}\n                                            key={option.id}\n                                            selected={option.id === value?.id}\n                                            onSelect={() => {\n                                                onChange(option);\n                                                setOpened(false);\n                                            }}\n                                        >\n                                            {label}\n                                        </DropdownMobileListItem>\n                                    );\n                                })}\n                            </DropdownMobileList>\n                        </DropdownMobileBody>\n                    </>\n                ),\n            }}\n        >\n            <SelectExtendedField.Dropdown.List id={listId} dropdownOpened={opened} size={size}>\n                {options.map((option) => {\n                    const { label, ...restOption } = option;\n\n                    return (\n                        <SelectExtendedField.Dropdown.List.Item\n                            {...restOption}\n                            className={dropdownListItemClassName}\n                            id={option.id}\n                            key={option.id}\n                            selected={option.id === value?.id}\n                            onSelect={() => {\n                                onChange(option);\n                                setOpened(false);\n                            }}\n                        >\n                            {label}\n                        </SelectExtendedField.Dropdown.List.Item>\n                    );\n                })}\n            </SelectExtendedField.Dropdown.List>\n        </SelectExtendedField.Dropdown>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CO,MAAM,qCAAyF,CAAC;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,SACI;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACG,QAAQ,UAAU,CAAC;AAAA,MACnB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,iBAAiB;AAAA,QACb,UACI,qBAAA,UAAA,EACI,UAAA;AAAA,UAAA,oBAAC,wBAAqB,gBAAgB,oBAAC,uBAAoB,SAAS,MAAM,UAAU,KAAK,GAAG,GACxF,UAAA,oBAAC,QAAK,KAAI,OAAM,MAAM,UAAU,IAC3B,uBACL,EAAA,CACJ;AAAA,8BACC,oBAAA,EACG,UAAA,oBAAC,sBACI,UAAA,QAAQ,IAAI,CAAC,WAAW;AACrB,kBAAM,EAAE,OAAO,GAAG,WAAA,IAAe;AAEjC,mBACI;AAAA,cAAC;AAAA,cAAA;AAAA,gBACI,GAAG;AAAA,gBACJ,WAAW;AAAA,gBACX,IAAI,OAAO;AAAA,gBACX,KAAK,OAAO;AAAA,gBACZ,UAAU,OAAO,QAAO,+BAAO;AAAA,gBAC/B,UAAU,MAAM;AACZ,2BAAS,MAAM;AACf,4BAAU,KAAK;AAAA,gBACnB;AAAA,cAAA;AAAA,cAEC;AAAA,YAAA;AAAA,UAGb,CAAC,GACL,EAAA,CACJ;AAAA,QAAA,EAAA,CACJ;AAAA,MAAA;AAAA,MAIR,UAAA,oBAAC,oBAAoB,SAAS,MAA7B,EAAkC,IAAI,QAAQ,gBAAgB,QAAQ,MAClE,UAAA,QAAQ,IAAI,CAAC,WAAW;AACrB,cAAM,EAAE,OAAO,GAAG,WAAA,IAAe;AAEjC,eACI;AAAA,UAAC,oBAAoB,SAAS,KAAK;AAAA,UAAlC;AAAA,YACI,GAAG;AAAA,YACJ,WAAW;AAAA,YACX,IAAI,OAAO;AAAA,YACX,KAAK,OAAO;AAAA,YACZ,UAAU,OAAO,QAAO,+BAAO;AAAA,YAC/B,UAAU,MAAM;AACZ,uBAAS,MAAM;AACf,wBAAU,KAAK;AAAA,YACnB;AAAA,UAAA;AAAA,UAEC;AAAA,QAAA;AAAA,MAGb,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"SelectExtendedFieldDropdownDefault.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    ISelectExtendedFieldDefaultOption,\n    ISelectExtendedFieldDropdownProvideProps,\n    SelectExtendedField,\n} from \"../SelectExtendedField\";\nimport {\n    DropdownMobileBody,\n    DropdownMobileClose,\n    DropdownMobileHeader,\n    DropdownMobileList,\n    DropdownMobileListItem,\n    IDropdownProps,\n} from \"../../Dropdown\";\nimport { Text, ETextSize } from \"../../Typography\";\n\n/** Свойства компонента SelectExtendedFieldDropdownDefault. */\nexport interface ISelectExtendedFieldDropdownDefaultProps\n    extends ISelectExtendedFieldDropdownProvideProps, Pick<IDropdownProps, \"size\" | \"width\"> {\n    /** ClassName для модификации SelectExtendedField.Dropdown.List.Item. */\n    dropdownListItemClassName?: string;\n    /** Свойства, передающиеся в Dropdown. */\n    dropdownProps?: Omit<\n        IDropdownProps,\n        \"children\" | \"opened\" | \"setOpened\" | \"targetRef\" | \"size\" | \"mobileViewProps\"\n    >;\n    /** Состояние загрузки. В этот момент Dropdown закрыт, Target отображает лоадер. По умолчанию false. */\n    loading?: boolean;\n    /** Id SelectExtendedField.Dropdown.List. Нужен для связи с Target. */\n    listId?: string;\n    /** Название Select, отображающееся в мобильном режиме. */\n    mobileTitle?: React.ReactNode;\n    /** Список опций. */\n    options: ISelectExtendedFieldDefaultOption[];\n    /** Обработчик изменения значения. Вызывается с выбранной опцией. */\n    onChange: (option: ISelectExtendedFieldDefaultOption) => void;\n    /** Текущее выбранное значение. Опция сопоставляется по полю id. */\n    value?: ISelectExtendedFieldDefaultOption;\n}\n\n/**\n * Дефолтный рендер Dropdown для SelectExtendedField.\n * Вынесено в отдельный компонент для переиспользования внутри компонентов Triplex.\n */\nexport const SelectExtendedFieldDropdownDefault: React.FC<ISelectExtendedFieldDropdownDefaultProps> = ({\n    dropdownRef,\n    dropdownListItemClassName,\n    dropdownProps,\n    width,\n    loading,\n    listId,\n    mobileTitle,\n    onChange,\n    opened,\n    size,\n    options,\n    setOpened,\n    targetRef,\n    value,\n}) => {\n    // Десктопный и мобильный списки различаются только компонентом элемента. Свойства опции\n    // считаются здесь один раз, чтобы поведение выбора не разъехалось между режимами.\n    // Компонент элемента в хелпер не выносится: у десктопного и мобильного разные типы props,\n    // а общий тип пришлось бы ослаблять до React.ElementType.\n    const getOptionProps = (option: ISelectExtendedFieldDefaultOption) => {\n        const { label, ...restOption } = option;\n\n        return {\n            ...restOption,\n            className: dropdownListItemClassName,\n            id: option.id,\n            selected: option.id === value?.id,\n            onSelect: () => {\n                onChange(option);\n                setOpened(false);\n            },\n            children: label,\n        };\n    };\n\n    return (\n        <SelectExtendedField.Dropdown\n            opened={opened && !loading}\n            forwardedRef={dropdownRef}\n            width={width}\n            setOpened={setOpened}\n            targetRef={targetRef}\n            size={size}\n            {...dropdownProps}\n            mobileViewProps={{\n                children: (\n                    <>\n                        <DropdownMobileHeader controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}>\n                            <Text tag=\"div\" size={ETextSize.B3}>\n                                {mobileTitle}\n                            </Text>\n                        </DropdownMobileHeader>\n                        <DropdownMobileBody>\n                            <DropdownMobileList>\n                                {options.map((option) => (\n                                    <DropdownMobileListItem key={option.id} {...getOptionProps(option)} />\n                                ))}\n                            </DropdownMobileList>\n                        </DropdownMobileBody>\n                    </>\n                ),\n            }}\n        >\n            <SelectExtendedField.Dropdown.List id={listId} dropdownOpened={opened} size={size}>\n                {options.map((option) => (\n                    <SelectExtendedField.Dropdown.List.Item key={option.id} {...getOptionProps(option)} />\n                ))}\n            </SelectExtendedField.Dropdown.List>\n        </SelectExtendedField.Dropdown>\n    );\n};\n\nSelectExtendedFieldDropdownDefault.displayName = \"SelectExtendedFieldDropdownDefault\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4CO,MAAM,qCAAyF,CAAC;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AAKF,QAAM,iBAAiB,CAAC,WAA8C;AAClE,UAAM,EAAE,OAAO,GAAG,WAAA,IAAe;AAEjC,WAAO;AAAA,MACH,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI,OAAO;AAAA,MACX,UAAU,OAAO,QAAO,+BAAO;AAAA,MAC/B,UAAU,MAAM;AACZ,iBAAS,MAAM;AACf,kBAAU,KAAK;AAAA,MACnB;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EAElB;AAEA,SACI;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACG,QAAQ,UAAU,CAAC;AAAA,MACnB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,iBAAiB;AAAA,QACb,UACI,qBAAA,UAAA,EACI,UAAA;AAAA,UAAA,oBAAC,wBAAqB,gBAAgB,oBAAC,uBAAoB,SAAS,MAAM,UAAU,KAAK,GAAG,GACxF,UAAA,oBAAC,QAAK,KAAI,OAAM,MAAM,UAAU,IAC3B,uBACL,EAAA,CACJ;AAAA,8BACC,oBAAA,EACG,UAAA,oBAAC,sBACI,UAAA,QAAQ,IAAI,CAAC,WACV,oBAAC,wBAAA,EAAwC,GAAG,eAAe,MAAM,EAAA,GAApC,OAAO,EAAgC,CACvE,GACL,EAAA,CACJ;AAAA,QAAA,EAAA,CACJ;AAAA,MAAA;AAAA,MAIR,UAAA,oBAAC,oBAAoB,SAAS,MAA7B,EAAkC,IAAI,QAAQ,gBAAgB,QAAQ,MAClE,UAAA,QAAQ,IAAI,CAAC,WACV,oBAAC,oBAAoB,SAAS,KAAK,MAAlC,EAAwD,GAAG,eAAe,MAAM,EAAA,GAApC,OAAO,EAAgC,CACvF,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEA,mCAAmC,cAAc;"}

package/components/SelectExtendedField/components/SelectExtendedFieldTarget.js

@@ -1,11 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useRef } from "react";
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { CaretdownStrokeSrvIcon24, CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-import { LoaderSmall } from "../../Loader/LoaderSmall/LoaderSmall.js";
-import { ELoaderSmallTheme } from "../../Loader/LoaderSmall/enum.js";
-import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { EFormFieldStatus } from "../../FormField/enums.js";
 import { FormFieldClear } from "../../FormField/components/FormFieldClear.js";
 import "../../FormField/components/FormFieldCounter.js";
@@ -18,14 +16,16 @@ import { FormFieldPrefix } from "../../FormField/components/FormFieldPrefix.js";
 import { FormFieldTarget } from "../../FormField/components/FormFieldTarget.js";
 import "../../FormField/components/FormFieldTextarea.js";
 import { FormField } from "../../FormField/FormField.js";
-import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { IconWrapper } from "../../IconWrapper/IconWrapper.js";
-const selectExtendedFieldTarget = "selectExtendedFieldTarget__414fbc40";
-const caretIcon = "caretIcon__658b8c99";
-const selectOpened = "selectOpened__2ae9686a";
-const disabled = "disabled__67a59994";
-const target = "target__a4813e40";
-const caretWrapper = "caretWrapper__cc9cb187";
+import { LoaderSmall } from "../../Loader/LoaderSmall/LoaderSmall.js";
+import { ELoaderSmallTheme } from "../../Loader/LoaderSmall/enum.js";
+import "../../Loader/LoaderMiddle/LoaderMiddle.js";
+const selectExtendedFieldTarget = "selectExtendedFieldTarget__92a73756";
+const caretIcon = "caretIcon__5f090ff9";
+const selectOpened = "selectOpened__48b937c1";
+const disabled = "disabled__306b11af";
+const target = "target__3d88c7b3";
+const caretWrapper = "caretWrapper__208c6f41";
 const styles = {
   selectExtendedFieldTarget,
   caretIcon,
@@ -34,20 +34,25 @@ const styles = {
   target,
   caretWrapper
 };
-const sizeToCaretIconMap = {
+const SIZE_TO_CARET_ICON_MAP = {
   [EComponentSize.SM]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon16, { paletteIndex: 5, className: styles.caretIcon }),
   [EComponentSize.MD]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon20, { paletteIndex: 5, className: styles.caretIcon }),
   [EComponentSize.LG]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon24, { paletteIndex: 5, className: styles.caretIcon })
 };
-const sizeToLoaderSizeMap = {
+const SIZE_TO_LOADER_MAP = {
   [EComponentSize.SM]: /* @__PURE__ */ jsx(LoaderSmall, { size: EComponentSize.SM, theme: ELoaderSmallTheme.BRAND }),
   [EComponentSize.MD]: /* @__PURE__ */ jsx(LoaderSmall, { size: EComponentSize.MD, theme: ELoaderSmallTheme.BRAND }),
   [EComponentSize.LG]: /* @__PURE__ */ jsx(LoaderSmall, { size: EComponentSize.LG, theme: ELoaderSmallTheme.BRAND })
 };
+const OPEN_DROPDOWN_KEY_CODES = [
+  EVENT_KEY_CODES.SPACE,
+  EVENT_KEY_CODES.ENTER,
+  EVENT_KEY_CODES.ARROW_DOWN,
+  EVENT_KEY_CODES.ARROW_UP
+];
 const SelectExtendedFieldTarget = React__default.forwardRef(
   (props, ref) => {
     const {
-      children,
       className,
       label,
       placeholder,
@@ -61,53 +66,37 @@ const SelectExtendedFieldTarget = React__default.forwardRef(
       loading,
       size = EComponentSize.MD,
       status,
+      // children и tabIndex намеренно не доходят до FormField: разметка поля фиксирована,
+      // а tabIndex выставляет сам FormFieldTarget (-1 в состоянии DISABLED, иначе 0).
+      children,
       tabIndex,
       fieldLabel,
       ...rest
     } = props;
-    const targetRef = useRef(null);
-    const classNames = clsx(
-      styles.selectExtendedFieldTarget,
-      {
-        [styles.selectOpened]: opened,
-        [styles.loading]: loading,
-        [styles.disabled]: status === EFormFieldStatus.DISABLED
-      },
-      className
-    );
+    const disabled2 = status === EFormFieldStatus.DISABLED;
+    const interactionBlocked = Boolean(loading) || disabled2;
     const handleClick = (event) => {
-      if (loading || status === EFormFieldStatus.DISABLED) {
+      if (interactionBlocked) {
         return;
       }
       setOpened(!opened);
       onClick == null ? void 0 : onClick(event);
     };
+    const handleClearClick = (event) => {
+      event.stopPropagation();
+      onClear == null ? void 0 : onClear();
+    };
     const handleKeyDown = (event) => {
-      if (loading || status === EFormFieldStatus.DISABLED) {
+      if (interactionBlocked) {
         return;
       }
-      if (!opened) {
-        if ([
-          EVENT_KEY_CODES.SPACE,
-          EVENT_KEY_CODES.ENTER,
-          EVENT_KEY_CODES.ARROW_DOWN,
-          EVENT_KEY_CODES.ARROW_UP
-        ].includes(event.keyCode)) {
-          event.preventDefault();
-          event.stopPropagation();
-          setOpened(!opened);
-        }
+      if (!opened && OPEN_DROPDOWN_KEY_CODES.includes(event.keyCode)) {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpened(true);
       }
       onKeyDown == null ? void 0 : onKeyDown(event);
     };
-    const setRef = (instance) => {
-      targetRef.current = instance;
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref) {
-        ref.current = instance;
-      }
-    };
     return /* @__PURE__ */ jsxs(
       FormField,
       {
@@ -115,40 +104,33 @@ const SelectExtendedFieldTarget = React__default.forwardRef(
         onKeyDown: handleKeyDown,
         status,
         size,
-        className: classNames,
+        className: clsx(
+          styles.selectExtendedFieldTarget,
+          { [styles.selectOpened]: opened, [styles.disabled]: disabled2 },
+          className
+        ),
         "aria-expanded": opened,
         "aria-haspopup": "listbox",
-        "data-tx": "1.40.0",
+        "data-tx": "1.41.1",
         active: opened,
         ...rest,
         children: [
           prefix ? /* @__PURE__ */ jsx(FormFieldPrefix, { children: prefix }) : null,
           /* @__PURE__ */ jsx(FormFieldLabel, { children: fieldLabel }),
-          /* @__PURE__ */ jsx(
-            FormFieldTarget,
-            {
-              ref: setRef,
-              className: clsx(styles.target, {
-                [styles.placeholder]: !!placeholder && !label,
-                [styles.label]: !!label
-              }),
-              placeholder,
-              children: label
-            }
-          ),
+          /* @__PURE__ */ jsx(FormFieldTarget, { ref, className: styles.target, placeholder, children: label }),
           /* @__PURE__ */ jsxs(FormFieldPostfix, { children: [
-            onClear && /* @__PURE__ */ jsx(FormFieldClear, { onClick: onClear }),
-            loading ? sizeToLoaderSizeMap[size] : /* @__PURE__ */ jsx(
+            onClear && /* @__PURE__ */ jsx(FormFieldClear, { onClick: handleClearClick }),
+            loading ? SIZE_TO_LOADER_MAP[size] : /* @__PURE__ */ jsx(
               IconWrapper,
               {
                 className: styles.caretWrapper,
                 active: opened,
-                disabled: status === EFormFieldStatus.DISABLED,
+                disabled: disabled2,
                 displayContents: true,
-                children: sizeToCaretIconMap[size]
+                children: SIZE_TO_CARET_ICON_MAP[size]
               }
             ),
-            postfix ? postfix : null
+            postfix
           ] })
         ]
       }

package/components/SelectExtendedField/components/SelectExtendedFieldTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectExtendedFieldTarget.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldTarget.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { CaretdownStrokeSrvIcon16, CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { LoaderSmall, ELoaderSmallTheme } from \"../../Loader\";\nimport clsx from \"clsx\";\nimport {\n    EFormFieldStatus,\n    FormField,\n    FormFieldClear,\n    FormFieldLabel,\n    FormFieldPostfix,\n    FormFieldPrefix,\n    IFormFieldProps,\n} from \"../../FormField\";\nimport { FormFieldTarget } from \"../../FormField/components/FormFieldTarget\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { IconWrapper } from \"../../IconWrapper\";\nimport styles from \"../styles/SelectExtendedFieldTarget.module.less\";\n\n/* Свойства SelectExtendedFieldTarget. */\nexport interface ISelectExtendedFieldTargetProps extends Omit<IFormFieldProps, \"prefix\" | \"postfix\"> {\n    /**  Текст или компонент, отображающий выбранное значение. */\n    label?: React.ReactNode;\n    /** Текст или компонент, отображающий выбранное значение для Target. */\n    fieldLabel: React.ReactNode;\n    /** Состояние загрузки. */\n    loading?: boolean;\n    /** Состояние открытости выпадающего списка. */\n    opened: boolean;\n    /** Текст или компонент, отображающий выбранное placeholder. */\n    placeholder?: React.ReactNode;\n    /** Префикс поля ввода. */\n    prefix?: React.ReactNode;\n    /** Постфикс поля ввода. */\n    postfix?: React.ReactNode;\n    /** Функция открытия/закрытия выпадающего списка. */\n    setOpened: (opened: boolean) => void;\n    /** Функция очистки значения. */\n    onClear?: () => void;\n}\n\nconst sizeToCaretIconMap = {\n    [EComponentSize.SM]: <CaretdownStrokeSrvIcon16 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.MD]: <CaretdownStrokeSrvIcon20 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.LG]: <CaretdownStrokeSrvIcon24 paletteIndex={5} className={styles.caretIcon} />,\n};\n\nconst sizeToLoaderSizeMap = {\n    [EComponentSize.SM]: <LoaderSmall size={EComponentSize.SM} theme={ELoaderSmallTheme.BRAND} />,\n    [EComponentSize.MD]: <LoaderSmall size={EComponentSize.MD} theme={ELoaderSmallTheme.BRAND} />,\n    [EComponentSize.LG]: <LoaderSmall size={EComponentSize.LG} theme={ELoaderSmallTheme.BRAND} />,\n};\n\n/**\n * Компонент SelectTarget.\n * Видимая часть Select, при нажатии на которую открывается выпадающий список.\n */\nexport const SelectExtendedFieldTarget = React.forwardRef<HTMLDivElement, ISelectExtendedFieldTargetProps>(\n    (props, ref) => {\n        const {\n            children,\n            className,\n            label,\n            placeholder,\n            onKeyDown,\n            onClick,\n            onClear,\n            opened,\n            postfix,\n            prefix,\n            setOpened,\n            loading,\n            size = EComponentSize.MD,\n            status,\n            tabIndex,\n            fieldLabel,\n            ...rest\n        } = props;\n        const targetRef = useRef<HTMLDivElement | null>(null);\n        const classNames = clsx(\n            styles.selectExtendedFieldTarget,\n            {\n                [styles.selectOpened]: opened,\n                [styles.loading]: loading,\n                [styles.disabled]: status === EFormFieldStatus.DISABLED,\n            },\n            className,\n        );\n        /* Обработчик клика. */\n        const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n            if (loading || status === EFormFieldStatus.DISABLED) {\n                return; // Не реагируем на клики в состоянии загрузки\n            }\n            setOpened(!opened);\n            onClick?.(event);\n        };\n\n        /* Обработчик нажатия клавиши. */\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (loading || status === EFormFieldStatus.DISABLED) {\n                return; // Не реагируем на клавиши в состоянии загрузки или disabled\n            }\n\n            if (!opened) {\n                // При нажатии Enter, Space, ArrowUp или ArrowDown открывается выпадающий список.\n                if (\n                    [\n                        EVENT_KEY_CODES.SPACE,\n                        EVENT_KEY_CODES.ENTER,\n                        EVENT_KEY_CODES.ARROW_DOWN,\n                        EVENT_KEY_CODES.ARROW_UP,\n                    ].includes(event.keyCode)\n                ) {\n                    event.preventDefault();\n                    // Предотвращение срабатывания keydown при открытии Dropdown в document.addEventListener('keydown'...) в src/desktop/components/Dropdown/components/DropdownListItem.tsx.\n                    event.stopPropagation();\n                    setOpened(!opened);\n                }\n            }\n\n            onKeyDown?.(event);\n        };\n\n        /* Функция для хранения ссылки. */\n        const setRef = (instance: HTMLDivElement | null) => {\n            targetRef.current = instance;\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        return (\n            <FormField\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                status={status}\n                size={size}\n                className={classNames}\n                aria-expanded={opened}\n                aria-haspopup=\"listbox\"\n                data-tx={process.env.npm_package_version}\n                active={opened}\n                {...rest}\n            >\n                {prefix ? <FormFieldPrefix>{prefix}</FormFieldPrefix> : null}\n\n                <FormFieldLabel>{fieldLabel}</FormFieldLabel>\n                <FormFieldTarget\n                    ref={setRef}\n                    className={clsx(styles.target, {\n                        [styles.placeholder]: !!placeholder && !label,\n                        [styles.label]: !!label,\n                    })}\n                    placeholder={placeholder}\n                >\n                    {label}\n                </FormFieldTarget>\n\n                <FormFieldPostfix>\n                    {onClear && <FormFieldClear onClick={onClear} />}\n                    {loading ? (\n                        sizeToLoaderSizeMap[size]\n                    ) : (\n                        <IconWrapper\n                            className={styles.caretWrapper}\n                            active={opened}\n                            disabled={status === EFormFieldStatus.DISABLED}\n                            displayContents\n                        >\n                            {sizeToCaretIconMap[size]}\n                        </IconWrapper>\n                    )}\n                    {postfix ? postfix : null}\n                </FormFieldPostfix>\n            </FormField>\n        );\n    },\n);\n\nSelectExtendedFieldTarget.displayName = \"SelectExtendedFieldTarget\";\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SelectExtendedFieldTarget.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldTarget.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { CaretdownStrokeSrvIcon16, CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport {\n    EFormFieldStatus,\n    FormField,\n    FormFieldClear,\n    FormFieldLabel,\n    FormFieldPostfix,\n    FormFieldPrefix,\n    IFormFieldProps,\n} from \"../../FormField\";\nimport { FormFieldTarget } from \"../../FormField/components/FormFieldTarget\";\nimport { IconWrapper } from \"../../IconWrapper\";\nimport { LoaderSmall, ELoaderSmallTheme } from \"../../Loader\";\nimport styles from \"../styles/SelectExtendedFieldTarget.module.less\";\n\n/** Свойства компонента SelectExtendedFieldTarget. */\nexport interface ISelectExtendedFieldTargetProps extends Omit<IFormFieldProps, \"prefix\" | \"postfix\"> {\n    /** Текст или компонент, отображающий выбранное значение. */\n    label?: React.ReactNode;\n    /** Текст или компонент заголовка поля. */\n    fieldLabel: React.ReactNode;\n    /** Состояние загрузки. Вместо каретки отображается лоадер, поле не реагирует на клик и клавиатуру. По умолчанию false. */\n    loading?: boolean;\n    /** Состояние открытости выпадающего блока. */\n    opened: boolean;\n    /** Текст или компонент, отображаемый вместо значения, пока значение не выбрано. */\n    placeholder?: React.ReactNode;\n    /** Префикс поля. */\n    prefix?: React.ReactNode;\n    /** Постфикс поля. Отображается после каретки. */\n    postfix?: React.ReactNode;\n    /** Функция открытия/закрытия выпадающего блока. */\n    setOpened: (opened: boolean) => void;\n    /** Функция очистки значения. Если передана, в поле отображается кнопка очистки. */\n    onClear?: () => void;\n}\n\n/** Соответствие размера поля иконке каретки. */\nconst SIZE_TO_CARET_ICON_MAP = {\n    [EComponentSize.SM]: <CaretdownStrokeSrvIcon16 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.MD]: <CaretdownStrokeSrvIcon20 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.LG]: <CaretdownStrokeSrvIcon24 paletteIndex={5} className={styles.caretIcon} />,\n};\n\n/** Соответствие размера поля лоадеру состояния загрузки. */\nconst SIZE_TO_LOADER_MAP = {\n    [EComponentSize.SM]: <LoaderSmall size={EComponentSize.SM} theme={ELoaderSmallTheme.BRAND} />,\n    [EComponentSize.MD]: <LoaderSmall size={EComponentSize.MD} theme={ELoaderSmallTheme.BRAND} />,\n    [EComponentSize.LG]: <LoaderSmall size={EComponentSize.LG} theme={ELoaderSmallTheme.BRAND} />,\n};\n\n/** Коды клавиш, открывающих выпадающий блок. */\nconst OPEN_DROPDOWN_KEY_CODES = [\n    EVENT_KEY_CODES.SPACE,\n    EVENT_KEY_CODES.ENTER,\n    EVENT_KEY_CODES.ARROW_DOWN,\n    EVENT_KEY_CODES.ARROW_UP,\n];\n\n/**\n * Поле выбора SelectExtendedField.\n * Видимая часть Select, при нажатии на которую открывается выпадающий блок.\n */\nexport const SelectExtendedFieldTarget = React.forwardRef<HTMLDivElement, ISelectExtendedFieldTargetProps>(\n    (props, ref) => {\n        const {\n            className,\n            label,\n            placeholder,\n            onKeyDown,\n            onClick,\n            onClear,\n            opened,\n            postfix,\n            prefix,\n            setOpened,\n            loading,\n            size = EComponentSize.MD,\n            status,\n            // children и tabIndex намеренно не доходят до FormField: разметка поля фиксирована,\n            // а tabIndex выставляет сам FormFieldTarget (-1 в состоянии DISABLED, иначе 0).\n            children,\n            tabIndex,\n            fieldLabel,\n            ...rest\n        } = props;\n        const disabled = status === EFormFieldStatus.DISABLED;\n        // В состоянии загрузки и в заблокированном поле выпадающий блок не открывается.\n        const interactionBlocked = Boolean(loading) || disabled;\n\n        const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n            if (interactionBlocked) {\n                return;\n            }\n\n            setOpened(!opened);\n            onClick?.(event);\n        };\n\n        const handleClearClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            // Кнопка очистки лежит внутри поля, у которого клик переключает выпадающий блок.\n            // Без остановки всплытия очистка значения заодно раскрывала бы список.\n            // Так же сделано в Chip.Select и Chip.DatePicker.\n            event.stopPropagation();\n            onClear?.();\n        };\n\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (interactionBlocked) {\n                return;\n            }\n\n            if (!opened && OPEN_DROPDOWN_KEY_CODES.includes(event.keyCode)) {\n                event.preventDefault();\n                // Предотвращение срабатывания keydown при открытии Dropdown в\n                // document.addEventListener(\"keydown\", ...) в DropdownListItem.\n                event.stopPropagation();\n                setOpened(true);\n            }\n\n            onKeyDown?.(event);\n        };\n\n        return (\n            <FormField\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                status={status}\n                size={size}\n                className={clsx(\n                    styles.selectExtendedFieldTarget,\n                    { [styles.selectOpened]: opened, [styles.disabled]: disabled },\n                    className,\n                )}\n                aria-expanded={opened}\n                aria-haspopup=\"listbox\"\n                data-tx={process.env.npm_package_version}\n                active={opened}\n                {...rest}\n            >\n                {prefix ? <FormFieldPrefix>{prefix}</FormFieldPrefix> : null}\n\n                <FormFieldLabel>{fieldLabel}</FormFieldLabel>\n                <FormFieldTarget ref={ref} className={styles.target} placeholder={placeholder}>\n                    {label}\n                </FormFieldTarget>\n\n                <FormFieldPostfix>\n                    {onClear && <FormFieldClear onClick={handleClearClick} />}\n                    {loading ? (\n                        SIZE_TO_LOADER_MAP[size]\n                    ) : (\n                        <IconWrapper\n                            className={styles.caretWrapper}\n                            active={opened}\n                            disabled={disabled}\n                            displayContents\n                        >\n                            {SIZE_TO_CARET_ICON_MAP[size]}\n                        </IconWrapper>\n                    )}\n                    {postfix}\n                </FormFieldPostfix>\n            </FormField>\n        );\n    },\n);\n\nSelectExtendedFieldTarget.displayName = \"SelectExtendedFieldTarget\";\n"],"names":["React","disabled"],"mappings":"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"}

package/components/SelectField/SelectField.js

@@ -7,7 +7,7 @@ import { SelectExtendedFieldDropdownDefault } from "../SelectExtendedField/compo
 import { DropdownListContext } from "../Dropdown/DropdownListContext.js";
 import "../Dropdown/desktop/DropdownDesktop.js";
 import "../Dropdown/desktop/DropdownList.js";
-import "../../chunks/DropdownListItem-BqOoPFSx.js";
+import "../../chunks/DropdownListItem-BVgGltGX.js";
 import { EDropdownWidth } from "../Dropdown/desktop/enums.js";
 import "../Dropdown/mobile/DropdownMobile.js";
 import "../Dropdown/mobile/DropdownMobileBody.js";

package/components/Skeleton/Skeleton.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../chunks/vendor-CtuAQuEN.js";
 import { ESkeletonType } from "./enums.js";
-const skeleton = "skeleton__47b3b259";
-const light = "light__04818d7d";
-const dark = "dark__29709362";
+const skeleton = "skeleton__e8cd4a61";
+const light = "light__85924a5f";
+const dark = "dark__76e65481";
 const styles = {
   skeleton,
   light,
@@ -17,7 +17,7 @@ const Skeleton = ({ className, type = ESkeletonType.DARK, ...htmlDivAttributes }
       [styles.light]: type === ESkeletonType.LIGHT
     }),
     ...htmlDivAttributes,
-    "data-tx": "1.40.0"
+    "data-tx": "1.41.1"
   }
 );
 export {