@sberbusiness/triplex-next 0.44.0 → 0.46.0

package/components/Suggest/SuggestMobileDropdownContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestMobileDropdownContent.js","sources":["../../../src/components/Suggest/SuggestMobileDropdownContent.tsx"],"sourcesContent":["import React, { useRef, useCallback } from \"react\";\nimport { ISuggestOption } from \"./types\";\nimport { useSuggestContext } from \"./SuggestContext\";\nimport {\n    DropdownMobileHeader,\n    DropdownMobileInput,\n    DropdownMobileLoader,\n    DropdownMobileClose,\n    DropdownMobileBody,\n    DropdownMobileList,\n    DropdownMobileListItem,\n} from \"../Dropdown\";\nimport { Text, EFontType, ETextSize } from \"@sberbusiness/triplex-next/components/Typography\";\nimport styles from \"./styles/SuggestDropdown.module.less\";\n\nexport const SuggestMobileDropdownContent = <T extends ISuggestOption>() => {\n    const {\n        value,\n        options,\n        inputValue,\n        placeholder,\n        noOptionsText,\n        loading,\n        clearInputOnFocus,\n        dropdownListLoading,\n        onSelect,\n        onFilter,\n        onScrollEnd,\n        closeDropdown,\n    } = useSuggestContext<T>();\n    const listRef = useRef(null);\n\n    const handleDropdownScroll = useCallback<React.UIEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (onScrollEnd === undefined) {\n                return;\n            }\n\n            const { scrollHeight, scrollTop, clientHeight } = event.currentTarget;\n\n            if (scrollHeight - scrollTop - clientHeight < 1) {\n                onScrollEnd();\n            }\n        },\n        [onScrollEnd],\n    );\n\n    const handleMobileDropdownClose = useCallback(() => closeDropdown(), [closeDropdown]);\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            onFilter(event.target.value);\n        },\n        [onFilter],\n    );\n\n    const handleInputFocus = useCallback(() => {\n        if (inputValue.length !== 0 && clearInputOnFocus === true) {\n            onFilter(\"\");\n        }\n    }, [inputValue.length, clearInputOnFocus, onFilter]);\n\n    return (\n        <>\n            <DropdownMobileHeader\n                controlButtons={\n                    <>\n                        {loading && <DropdownMobileLoader />}\n                        <DropdownMobileClose onClick={handleMobileDropdownClose} />\n                    </>\n                }\n            >\n                <DropdownMobileInput\n                    value={inputValue}\n                    placeholder={placeholder}\n                    autoFocus={true}\n                    onFocus={handleInputFocus}\n                    onChange={handleInputChange}\n                />\n            </DropdownMobileHeader>\n\n            <DropdownMobileBody className={styles.suggestDropdownMobileBody} onScroll={handleDropdownScroll}>\n                {options.length === 0 ? (\n                    <Text\n                        className={styles.suggestDropdownMobileNoOptionsText}\n                        type={EFontType.PRIMARY}\n                        size={ETextSize.B2}\n                        tag=\"div\"\n                    >\n                        {noOptionsText}\n                    </Text>\n                ) : (\n                    <DropdownMobileList loading={dropdownListLoading} ref={listRef}>\n                        {options.map((option) => (\n                            <DropdownMobileListItem\n                                key={option.id}\n                                id={option.id}\n                                selected={option.id === value?.id}\n                                showNotificationIcon={option.showNotificationIcon}\n                                onSelect={() => {\n                                    onSelect(option);\n                                }}\n                            >\n                                {option.content || option.label}\n                            </DropdownMobileListItem>\n                        ))}\n                    </DropdownMobileList>\n                )}\n            </DropdownMobileBody>\n        </>\n    );\n};\n\nSuggestMobileDropdownContent.displayName = \"SuggestMobileDropdownContent\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,+BAA+B,MAAgC;AACxE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACA,kBAAA;AACJ,QAAM,UAAU,OAAO,IAAI;AAE3B,QAAM,uBAAuB;AAAA,IACzB,CAAC,UAAU;AACP,UAAI,gBAAgB,QAAW;AAC3B;AAAA,MACJ;AAEA,YAAM,EAAE,cAAc,WAAW,aAAA,IAAiB,MAAM;AAExD,UAAI,eAAe,YAAY,eAAe,GAAG;AAC7C,oBAAA;AAAA,MACJ;AAAA,IACJ;AAAA,IACA,CAAC,WAAW;AAAA,EAAA;AAGhB,QAAM,4BAA4B,YAAY,MAAM,iBAAiB,CAAC,aAAa,CAAC;AAEpF,QAAM,oBAAoB;AAAA,IACtB,CAAC,UAA+C;AAC5C,eAAS,MAAM,OAAO,KAAK;AAAA,IAC/B;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGb,QAAM,mBAAmB,YAAY,MAAM;AACvC,QAAI,WAAW,WAAW,KAAK,sBAAsB,MAAM;AACvD,eAAS,EAAE;AAAA,IACf;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,mBAAmB,QAAQ,CAAC;AAEnD,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBACI,qBAAA,UAAA,EACK,UAAA;AAAA,UAAA,+BAAY,sBAAA,EAAqB;AAAA,UAClC,oBAAC,qBAAA,EAAoB,SAAS,0BAAA,CAA2B;AAAA,QAAA,GAC7D;AAAA,QAGJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,YACP;AAAA,YACA,WAAW;AAAA,YACX,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,IAGJ,oBAAC,sBAAmB,WAAW,OAAO,2BAA2B,UAAU,sBACtE,UAAA,QAAQ,WAAW,IAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB,MAAM,UAAU;AAAA,QAChB,MAAM,UAAU;AAAA,QAChB,KAAI;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,IAGL,oBAAC,oBAAA,EAAmB,SAAS,qBAAqB,KAAK,SAClD,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,IAAI,OAAO;AAAA,QACX,UAAU,OAAO,QAAO,+BAAO;AAAA,QAC/B,sBAAsB,OAAO;AAAA,QAC7B,UAAU,MAAM;AACZ,mBAAS,MAAM;AAAA,QACnB;AAAA,QAEC,UAAA,OAAO,WAAW,OAAO;AAAA,MAAA;AAAA,MARrB,OAAO;AAAA,IAAA,CAUnB,GACL,EAAA,CAER;AAAA,EAAA,GACJ;AAER;AAEA,6BAA6B,cAAc;"}
+{"version":3,"file":"SuggestMobileDropdownContent.js","sources":["../../../src/components/Suggest/SuggestMobileDropdownContent.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ISuggestOption } from \"./types\";\nimport { useSuggestContext } from \"./SuggestContext\";\nimport {\n    DropdownMobileHeader,\n    DropdownMobileInput,\n    DropdownMobileLoader,\n    DropdownMobileClose,\n    DropdownMobileBody,\n    DropdownMobileList,\n    DropdownMobileListItem,\n} from \"../Dropdown\";\nimport { Text, EFontType, ETextSize } from \"@sberbusiness/triplex-next/components/Typography\";\nimport styles from \"./styles/SuggestDropdown.module.less\";\n\n/**\n * Наполнение полноэкранного мобильного Dropdown внутри Suggest.\n * Данные и обработчики берёт из SuggestContext, поэтому рендерится только внутри Suggest.\n */\nexport const SuggestMobileDropdownContent = <T extends ISuggestOption>() => {\n    const {\n        value,\n        options,\n        inputValue,\n        placeholder,\n        noOptionsText,\n        loading,\n        clearInputOnFocus,\n        dropdownListLoading,\n        onSelect,\n        onFilter,\n        onScrollEnd,\n        closeDropdown,\n    } = useSuggestContext<T>();\n\n    const handleDropdownScroll = useCallback<React.UIEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (onScrollEnd === undefined) {\n                return;\n            }\n\n            const { scrollHeight, scrollTop, clientHeight } = event.currentTarget;\n\n            if (scrollHeight - scrollTop - clientHeight < 1) {\n                onScrollEnd();\n            }\n        },\n        [onScrollEnd],\n    );\n\n    const handleMobileDropdownClose = useCallback(() => closeDropdown(), [closeDropdown]);\n\n    const handleInputChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            onFilter(event.target.value);\n        },\n        [onFilter],\n    );\n\n    const handleInputFocus = useCallback(() => {\n        if (inputValue.length !== 0 && clearInputOnFocus) {\n            onFilter(\"\");\n        }\n    }, [inputValue.length, clearInputOnFocus, onFilter]);\n\n    return (\n        <>\n            <DropdownMobileHeader\n                controlButtons={\n                    <>\n                        {loading && <DropdownMobileLoader />}\n                        <DropdownMobileClose onClick={handleMobileDropdownClose} />\n                    </>\n                }\n            >\n                <DropdownMobileInput\n                    value={inputValue}\n                    placeholder={placeholder}\n                    autoFocus={true}\n                    onFocus={handleInputFocus}\n                    onChange={handleInputChange}\n                />\n            </DropdownMobileHeader>\n\n            <DropdownMobileBody className={styles.suggestDropdownMobileBody} onScroll={handleDropdownScroll}>\n                {options.length === 0 ? (\n                    <Text\n                        className={styles.suggestDropdownMobileNoOptionsText}\n                        type={EFontType.PRIMARY}\n                        size={ETextSize.B2}\n                        tag=\"div\"\n                    >\n                        {noOptionsText}\n                    </Text>\n                ) : (\n                    <DropdownMobileList loading={dropdownListLoading}>\n                        {options.map((option) => (\n                            <DropdownMobileListItem\n                                key={option.id}\n                                id={option.id}\n                                selected={option.id === value?.id}\n                                showNotificationIcon={option.showNotificationIcon}\n                                onSelect={() => {\n                                    onSelect(option);\n                                }}\n                            >\n                                {option.content || option.label}\n                            </DropdownMobileListItem>\n                        ))}\n                    </DropdownMobileList>\n                )}\n            </DropdownMobileBody>\n        </>\n    );\n};\n\nSuggestMobileDropdownContent.displayName = \"SuggestMobileDropdownContent\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,+BAA+B,MAAgC;AACxE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACA,kBAAA;AAEJ,QAAM,uBAAuB;AAAA,IACzB,CAAC,UAAU;AACP,UAAI,gBAAgB,QAAW;AAC3B;AAAA,MACJ;AAEA,YAAM,EAAE,cAAc,WAAW,aAAA,IAAiB,MAAM;AAExD,UAAI,eAAe,YAAY,eAAe,GAAG;AAC7C,oBAAA;AAAA,MACJ;AAAA,IACJ;AAAA,IACA,CAAC,WAAW;AAAA,EAAA;AAGhB,QAAM,4BAA4B,YAAY,MAAM,iBAAiB,CAAC,aAAa,CAAC;AAEpF,QAAM,oBAAoB;AAAA,IACtB,CAAC,UAA+C;AAC5C,eAAS,MAAM,OAAO,KAAK;AAAA,IAC/B;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGb,QAAM,mBAAmB,YAAY,MAAM;AACvC,QAAI,WAAW,WAAW,KAAK,mBAAmB;AAC9C,eAAS,EAAE;AAAA,IACf;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,mBAAmB,QAAQ,CAAC;AAEnD,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBACI,qBAAA,UAAA,EACK,UAAA;AAAA,UAAA,+BAAY,sBAAA,EAAqB;AAAA,UAClC,oBAAC,qBAAA,EAAoB,SAAS,0BAAA,CAA2B;AAAA,QAAA,GAC7D;AAAA,QAGJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,YACP;AAAA,YACA,WAAW;AAAA,YACX,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,IAGJ,oBAAC,sBAAmB,WAAW,OAAO,2BAA2B,UAAU,sBACtE,UAAA,QAAQ,WAAW,IAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB,MAAM,UAAU;AAAA,QAChB,MAAM,UAAU;AAAA,QAChB,KAAI;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,wBAGJ,oBAAA,EAAmB,SAAS,qBACxB,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,IAAI,OAAO;AAAA,QACX,UAAU,OAAO,QAAO,+BAAO;AAAA,QAC/B,sBAAsB,OAAO;AAAA,QAC7B,UAAU,MAAM;AACZ,mBAAS,MAAM;AAAA,QACnB;AAAA,QAEC,UAAA,OAAO,WAAW,OAAO;AAAA,MAAA;AAAA,MARrB,OAAO;AAAA,IAAA,CAUnB,GACL,EAAA,CAER;AAAA,EAAA,GACJ;AAER;AAEA,6BAA6B,cAAc;"}

package/components/Suggest/useSuggest.js

@@ -1,28 +1,28 @@
 import { useState, useRef, useLayoutEffect, useCallback, useMemo } from "react";
-import { u as uniqueId } from "../../chunks/vendor-DqGxntec.js";
+import { u as uniqueId } from "../../chunks/vendor-BxhAzfnS.js";
 import { isKey } from "../../utils/keyboard.js";
+const getOptionLabel = (option) => (option == null ? void 0 : option.label) ?? "";
 const useSuggest = ({
   value,
   onSelect,
   onFilter,
   onKeyDown
 }) => {
-  const [inputValue, setInputValue] = useState((value == null ? void 0 : value.label) || "");
+  const [inputValue, setInputValue] = useState(() => getOptionLabel(value));
   const [activeDescendant, setActiveDescendant] = useState();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [prevValue, setPrevValue] = useState(value);
   const [dropdownListId] = useState(() => `dropdown-list-${uniqueId()}`);
   if (value !== prevValue) {
     setPrevValue(value);
-    setInputValue((value == null ? void 0 : value.label) || "");
+    setInputValue(getOptionLabel(value));
   }
   const latestValueRef = useRef(value);
   useLayoutEffect(() => {
     latestValueRef.current = value;
   });
   const closeDropdown = useCallback((newInputValue) => {
-    var _a;
-    setInputValue(newInputValue ?? (((_a = latestValueRef.current) == null ? void 0 : _a.label) || ""));
+    setInputValue(newInputValue ?? getOptionLabel(latestValueRef.current));
     setActiveDescendant(void 0);
     setDropdownOpen(false);
   }, []);

package/components/Suggest/useSuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSuggest.js","sources":["../../../src/components/Suggest/useSuggest.ts"],"sourcesContent":["import React, { useState, useRef, useLayoutEffect, useCallback, useMemo } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport { ISuggestOption, ISuggestProps } from \"./types\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils\";\n\nexport const useSuggest = <T extends ISuggestOption = ISuggestOption>({\n    value,\n    onSelect,\n    onFilter,\n    onKeyDown,\n}: Pick<ISuggestProps<T>, \"value\" | \"onSelect\" | \"onFilter\" | \"onKeyDown\">) => {\n    const [inputValue, setInputValue] = useState(value?.label || \"\");\n    const [activeDescendant, setActiveDescendant] = useState<string>();\n    const [dropdownOpen, setDropdownOpen] = useState(false);\n    const [prevValue, setPrevValue] = useState(value);\n    const [dropdownListId] = useState(() => `dropdown-list-${uniqueId()}`);\n\n    // Синхронизация стейта при изменении внешнего пропса\n    if (value !== prevValue) {\n        setPrevValue(value);\n        setInputValue(value?.label || \"\");\n    }\n\n    const latestValueRef = useRef(value);\n    // Обновляем ref после каждого рендера, чтобы closeDropdown всегда имел доступ к актуальному value.\n    useLayoutEffect(() => {\n        latestValueRef.current = value;\n    });\n\n    const closeDropdown = useCallback((newInputValue?: string) => {\n        setInputValue(newInputValue ?? (latestValueRef.current?.label || \"\"));\n        setActiveDescendant(undefined);\n        setDropdownOpen(false);\n    }, []);\n\n    const handleSelect = useCallback(\n        (selectedValue: T | undefined) => {\n            closeDropdown(selectedValue?.label);\n            onSelect(selectedValue);\n        },\n        [closeDropdown, onSelect],\n    );\n\n    const handleFilter = useCallback(\n        (newValue: string) => {\n            setInputValue(newValue);\n            onFilter(newValue);\n        },\n        [onFilter],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (dropdownOpen && isKey(event.key, \"ESCAPE\")) {\n                event.stopPropagation();\n                closeDropdown();\n            }\n            onKeyDown?.(event);\n        },\n        [dropdownOpen, closeDropdown, onKeyDown],\n    );\n\n    return useMemo(\n        () => ({\n            inputValue,\n            activeDescendant,\n            dropdownOpen,\n            dropdownListId,\n            setInputValue,\n            setDropdownOpen,\n            setActiveDescendant,\n            closeDropdown,\n            onSelect: handleSelect,\n            onFilter: handleFilter,\n            onKeyDown: handleKeyDown,\n        }),\n        [\n            inputValue,\n            activeDescendant,\n            dropdownOpen,\n            dropdownListId,\n            closeDropdown,\n            handleSelect,\n            handleFilter,\n            handleKeyDown,\n        ],\n    );\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,aAAa,CAA4C;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAA+E;AAC3E,QAAM,CAAC,YAAY,aAAa,IAAI,UAAS,+BAAO,UAAS,EAAE;AAC/D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAA;AAChD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,cAAc,IAAI,SAAS,MAAM,iBAAiB,SAAA,CAAU,EAAE;AAGrE,MAAI,UAAU,WAAW;AACrB,iBAAa,KAAK;AAClB,mBAAc,+BAAO,UAAS,EAAE;AAAA,EACpC;AAEA,QAAM,iBAAiB,OAAO,KAAK;AAEnC,kBAAgB,MAAM;AAClB,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,gBAAgB,YAAY,CAAC,kBAA2B;;AAC1D,kBAAc,oBAAkB,oBAAe,YAAf,mBAAwB,UAAS,GAAG;AACpE,wBAAoB,MAAS;AAC7B,oBAAgB,KAAK;AAAA,EACzB,GAAG,CAAA,CAAE;AAEL,QAAM,eAAe;AAAA,IACjB,CAAC,kBAAiC;AAC9B,oBAAc,+CAAe,KAAK;AAClC,eAAS,aAAa;AAAA,IAC1B;AAAA,IACA,CAAC,eAAe,QAAQ;AAAA,EAAA;AAG5B,QAAM,eAAe;AAAA,IACjB,CAAC,aAAqB;AAClB,oBAAc,QAAQ;AACtB,eAAS,QAAQ;AAAA,IACrB;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGb,QAAM,gBAAgB;AAAA,IAClB,CAAC,UAA+C;AAC5C,UAAI,gBAAgB,MAAM,MAAM,KAAK,QAAQ,GAAG;AAC5C,cAAM,gBAAA;AACN,sBAAA;AAAA,MACJ;AACA,6CAAY;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,eAAe,SAAS;AAAA,EAAA;AAG3C,SAAO;AAAA,IACH,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,IAAA;AAAA,IAEf;AAAA,MACI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACJ;AAER;"}
+{"version":3,"file":"useSuggest.js","sources":["../../../src/components/Suggest/useSuggest.ts"],"sourcesContent":["import React, { useState, useRef, useLayoutEffect, useCallback, useMemo } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport { ISuggestOption, ISuggestProps } from \"./types\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils\";\n\n/** Текст, отображаемый в поле ввода для выбранной опции. */\nconst getOptionLabel = (option: ISuggestOption | undefined) => option?.label ?? \"\";\n\n/**\n * Состояние Suggest: значение поля ввода, видимость выпадающего списка и обработчики выбора,\n * фильтрации и клавиатуры. Результат раздаётся потомкам через SuggestContext.\n */\nexport const useSuggest = <T extends ISuggestOption = ISuggestOption>({\n    value,\n    onSelect,\n    onFilter,\n    onKeyDown,\n}: Pick<ISuggestProps<T>, \"value\" | \"onSelect\" | \"onFilter\" | \"onKeyDown\">) => {\n    const [inputValue, setInputValue] = useState(() => getOptionLabel(value));\n    const [activeDescendant, setActiveDescendant] = useState<string>();\n    const [dropdownOpen, setDropdownOpen] = useState(false);\n    const [prevValue, setPrevValue] = useState(value);\n    const [dropdownListId] = useState(() => `dropdown-list-${uniqueId()}`);\n\n    // Синхронизация стейта при изменении внешнего пропса.\n    if (value !== prevValue) {\n        setPrevValue(value);\n        setInputValue(getOptionLabel(value));\n    }\n\n    const latestValueRef = useRef(value);\n    // Обновляем ref после каждого рендера, чтобы closeDropdown всегда имел доступ к актуальному value.\n    useLayoutEffect(() => {\n        latestValueRef.current = value;\n    });\n\n    const closeDropdown = useCallback((newInputValue?: string) => {\n        setInputValue(newInputValue ?? getOptionLabel(latestValueRef.current));\n        setActiveDescendant(undefined);\n        setDropdownOpen(false);\n    }, []);\n\n    const handleSelect = useCallback(\n        (selectedValue: T | undefined) => {\n            // Явно передаём label выбранной опции. Для undefined аргумент остаётся undefined,\n            // и closeDropdown вернёт в поле label текущего value.\n            closeDropdown(selectedValue?.label);\n            onSelect(selectedValue);\n        },\n        [closeDropdown, onSelect],\n    );\n\n    const handleFilter = useCallback(\n        (newValue: string) => {\n            setInputValue(newValue);\n            onFilter(newValue);\n        },\n        [onFilter],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (dropdownOpen && isKey(event.key, \"ESCAPE\")) {\n                event.stopPropagation();\n                closeDropdown();\n            }\n            onKeyDown?.(event);\n        },\n        [dropdownOpen, closeDropdown, onKeyDown],\n    );\n\n    return useMemo(\n        () => ({\n            inputValue,\n            activeDescendant,\n            dropdownOpen,\n            dropdownListId,\n            setInputValue,\n            setDropdownOpen,\n            setActiveDescendant,\n            closeDropdown,\n            onSelect: handleSelect,\n            onFilter: handleFilter,\n            onKeyDown: handleKeyDown,\n        }),\n        [\n            inputValue,\n            activeDescendant,\n            dropdownOpen,\n            dropdownListId,\n            closeDropdown,\n            handleSelect,\n            handleFilter,\n            handleKeyDown,\n        ],\n    );\n};\n"],"names":[],"mappings":";;;AAMA,MAAM,iBAAiB,CAAC,YAAuC,iCAAQ,UAAS;AAMzE,MAAM,aAAa,CAA4C;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAA+E;AAC3E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,MAAM,eAAe,KAAK,CAAC;AACxE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAA;AAChD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,cAAc,IAAI,SAAS,MAAM,iBAAiB,SAAA,CAAU,EAAE;AAGrE,MAAI,UAAU,WAAW;AACrB,iBAAa,KAAK;AAClB,kBAAc,eAAe,KAAK,CAAC;AAAA,EACvC;AAEA,QAAM,iBAAiB,OAAO,KAAK;AAEnC,kBAAgB,MAAM;AAClB,mBAAe,UAAU;AAAA,EAC7B,CAAC;AAED,QAAM,gBAAgB,YAAY,CAAC,kBAA2B;AAC1D,kBAAc,iBAAiB,eAAe,eAAe,OAAO,CAAC;AACrE,wBAAoB,MAAS;AAC7B,oBAAgB,KAAK;AAAA,EACzB,GAAG,CAAA,CAAE;AAEL,QAAM,eAAe;AAAA,IACjB,CAAC,kBAAiC;AAG9B,oBAAc,+CAAe,KAAK;AAClC,eAAS,aAAa;AAAA,IAC1B;AAAA,IACA,CAAC,eAAe,QAAQ;AAAA,EAAA;AAG5B,QAAM,eAAe;AAAA,IACjB,CAAC,aAAqB;AAClB,oBAAc,QAAQ;AACtB,eAAS,QAAQ;AAAA,IACrB;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGb,QAAM,gBAAgB;AAAA,IAClB,CAAC,UAA+C;AAC5C,UAAI,gBAAgB,MAAM,MAAM,KAAK,QAAQ,GAAG;AAC5C,cAAM,gBAAA;AACN,sBAAA;AAAA,MACJ;AACA,6CAAY;AAAA,IAChB;AAAA,IACA,CAAC,cAAc,eAAe,SAAS;AAAA,EAAA;AAG3C,SAAO;AAAA,IACH,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,IAAA;AAAA,IAEf;AAAA,MACI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACJ;AAER;"}

package/components/SuggestField/SuggestField.js

@@ -2,7 +2,7 @@ import "./desktop/SuggestFieldDesktopDropdown.js";
 import { SuggestFieldDesktop } from "./desktop/SuggestFieldDesktop.js";
 import { SuggestFieldMobile } from "./mobile/SuggestFieldMobile.js";
 import "./mobile/SuggestFieldMobileDropdown.js";
-import "../../chunks/SuggestFieldMobileDropdownHint-CPzq_LZ_.js";
+import "../../chunks/SuggestFieldMobileDropdownHint-Dzg3TUpS.js";
 import { jsx } from "react/jsx-runtime";
 import { MobileView } from "../MobileView/MobileView.js";
 import "../FormField/components/FormFieldClear.js";

package/components/SuggestField/desktop/SuggestFieldDesktop.js

@@ -23,7 +23,7 @@ import "../../Loader/LoaderMiddle/LoaderMiddle.js";
 import { DropdownListContext } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-BZdW_kQc.js";
+import "../../../chunks/DropdownListItem-DOJlU4CS.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -35,7 +35,7 @@ import "../../Dropdown/mobile/DropdownMobileList.js";
 import "../../Dropdown/mobile/DropdownMobileListItem.js";
 import "../../Dropdown/Dropdown.js";
 import { DataTestId } from "../../../consts/DataTestId.js";
-import { u as uniqueId } from "../../../chunks/vendor-DqGxntec.js";
+import { u as uniqueId } from "../../../chunks/vendor-BxhAzfnS.js";
 import { isKey } from "../../../utils/keyboard.js";
 const SuggestFieldDesktop = ({
   value,
@@ -219,7 +219,6 @@ const SuggestFieldDesktop = ({
               "aria-controls": dropdownListId,
               "aria-activedescendant": activeDescendant,
               "aria-expanded": dropdownActuallyOpen,
-              disabled: status === EFormFieldStatus.DISABLED,
               onFocus: handleInputFocus,
               onBlur: handleInputBlur,
               onKeyDown: handleInputKeyDown,

package/components/SuggestField/desktop/SuggestFieldDesktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestFieldDesktop.js","sources":["../../../../src/components/SuggestField/desktop/SuggestFieldDesktop.tsx"],"sourcesContent":["import React, { useState, useRef, useLayoutEffect, useEffect, useCallback } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport { ISuggestFieldDesktopProps } from \"./types\";\nimport { ISuggestFieldOption } from \"../types\";\nimport { EComponentSize } from \"../../../enums\";\nimport { Tooltip, ETooltipSize } from \"../../Tooltip\";\nimport { TextFieldBase } from \"../../TextField/TextFieldBase\";\nimport { FormFieldInput, FormFieldClear, EFormFieldStatus } from \"../../FormField\";\nimport { LoaderSmall, ELoaderSmallTheme } from \"../../Loader\";\nimport { DropdownListContext } from \"../../Dropdown\";\nimport { DataTestId } from \"../../../consts/DataTestId\";\nimport { SuggestFieldDesktopDropdown } from \"./SuggestFieldDesktopDropdown\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils\";\n\n/**\n * Выпадающий список с возможностью поиска по введённому значению, позволяет задать кастомные компоненты для отображения всех\n * элементов управления.\n *\n * @template T - тип опции, должен расширять ISuggestFieldOption\n */\nexport const SuggestFieldDesktop = <T extends ISuggestFieldOption = ISuggestFieldOption>({\n    value,\n    options,\n    size = EComponentSize.LG,\n    status,\n    placeholder,\n    \"data-test-id\": dataTestId,\n    tooltipHint,\n    loading,\n    tooltipOpen,\n    dropdownListLoading,\n    clearInputOnFocus,\n    onFilter,\n    onClear,\n    onSelect,\n    onScrollEnd,\n    prefix,\n    postfix,\n    renderInput,\n    renderDropdown,\n    renderDropdownList,\n    renderDropdownListItem,\n    inputProps,\n    ...restProps\n}: ISuggestFieldDesktopProps<T>) => {\n    const [inputValue, setInputValue] = useState(value?.label || \"\");\n    const [inputFocused, setInputFocused] = useState(false);\n    const [dropdownOpen, setDropdownOpen] = useState(false);\n    // Флаг для предотвращения автоматического открытия Dropdown сразу после выбора значения.\n    const [ignoreAutoOpen, setIgnoreAutoOpen] = useState(false);\n    const [dropdownListId] = useState(() => uniqueId());\n    const [activeDescendant, setActiveDescendant] = useState<string>();\n\n    const [prevValue, setPrevValue] = useState(value);\n    if (value?.id !== prevValue?.id) {\n        setPrevValue(value);\n        setInputValue(value?.label || \"\");\n    }\n\n    const suggestRef = useRef<HTMLDivElement>(null);\n\n    const onScrollEndRef = useRef(onScrollEnd);\n    useLayoutEffect(() => {\n        onScrollEndRef.current = onScrollEnd;\n    }, [onScrollEnd]);\n\n    const handleInputFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n        (event) => {\n            setInputFocused(true);\n\n            if (clearInputOnFocus && inputValue.length !== 0) {\n                setInputValue(\"\");\n                onFilter(\"\");\n            }\n\n            inputProps.onFocus?.(event);\n        },\n        [clearInputOnFocus, inputValue, onFilter, inputProps],\n    );\n\n    const closeDropdown = useCallback((nextIgnoreAutoOpen: boolean) => {\n        setIgnoreAutoOpen(nextIgnoreAutoOpen);\n        setActiveDescendant(undefined);\n        setDropdownOpen(false);\n    }, []);\n\n    const handleInputBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n        (event) => {\n            setInputFocused(false);\n            closeDropdown(false);\n\n            if (inputValue.length !== 0) {\n                setInputValue(value?.label || \"\");\n            } else if (value !== undefined) {\n                onSelect(undefined);\n            }\n\n            inputProps.onBlur?.(event);\n        },\n        [closeDropdown, inputValue, value, onSelect, inputProps],\n    );\n\n    const handleInputKeyDown = useCallback<React.KeyboardEventHandler<HTMLInputElement>>(\n        (event) => {\n            if (isKey(event.key, \"ESCAPE\")) {\n                if (dropdownOpen) {\n                    event.stopPropagation();\n                    closeDropdown(true);\n                }\n            }\n\n            inputProps.onKeyDown?.(event);\n        },\n        [dropdownOpen, closeDropdown, inputProps],\n    );\n\n    const handleInputMouseDown = useCallback<React.MouseEventHandler<HTMLInputElement>>(\n        (event) => {\n            if (!dropdownOpen) {\n                setIgnoreAutoOpen(false);\n                setDropdownOpen(true);\n            }\n\n            inputProps.onMouseDown?.(event);\n        },\n        [dropdownOpen, inputProps],\n    );\n\n    const handleInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n        (event) => {\n            setIgnoreAutoOpen(false);\n            setActiveDescendant(undefined);\n            setInputValue(event.target.value);\n            onFilter(event.target.value);\n            inputProps.onChange?.(event);\n        },\n        [onFilter, inputProps],\n    );\n\n    const handleClear = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n        (event) => {\n            if (value !== undefined) {\n                onSelect(undefined);\n            }\n\n            if (inputValue.length !== 0) {\n                onFilter(\"\");\n                setInputValue(\"\");\n            }\n\n            onClear?.(event);\n        },\n        [value, onSelect, inputValue.length, onFilter, onClear],\n    );\n\n    const handleDropdownOpen = useCallback<typeof setDropdownOpen>(\n        (nextDropdownOpen) => {\n            if (nextDropdownOpen) {\n                setDropdownOpen(nextDropdownOpen);\n            } else {\n                closeDropdown(false);\n            }\n        },\n        [closeDropdown],\n    );\n\n    const handleSelect = useCallback<typeof onSelect>(\n        (nextValue) => {\n            closeDropdown(true);\n            setInputValue(nextValue?.label || \"\");\n            onSelect(nextValue);\n        },\n        [closeDropdown, onSelect],\n    );\n\n    useEffect(() => {\n        if (inputFocused) {\n            if (dropdownOpen) {\n                if (options.length === 0) {\n                    closeDropdown(false);\n                }\n            } else {\n                if (options.length !== 0 && !ignoreAutoOpen) {\n                    setDropdownOpen(true);\n                }\n            }\n        }\n    }, [inputFocused, dropdownOpen, options.length, closeDropdown, ignoreAutoOpen]);\n\n    const renderSuggestField = () => {\n        const Input = renderInput === undefined ? FormFieldInput : renderInput;\n        const Dropdown = renderDropdown === undefined ? SuggestFieldDesktopDropdown : renderDropdown;\n        // Фактическое состояние открытия выпадающего списка.\n        const dropdownActuallyOpen = dropdownOpen && options.length !== 0;\n\n        return (\n            <TextFieldBase\n                data-test-id={dataTestId}\n                status={status}\n                size={size}\n                prefix={prefix}\n                postfix={\n                    <React.Fragment>\n                        {onClear !== undefined && <FormFieldClear onClick={handleClear} />}\n                        {loading && <LoaderSmall theme={ELoaderSmallTheme.BRAND} size={size} />}\n                        {postfix}\n                    </React.Fragment>\n                }\n                {...restProps}\n                ref={suggestRef}\n            >\n                <Input\n                    value={inputValue}\n                    placeholder={placeholder}\n                    data-test-id={dataTestId && `${dataTestId}${DataTestId.Suggest.input}`}\n                    {...inputProps}\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-controls={dropdownListId}\n                    aria-activedescendant={activeDescendant}\n                    aria-expanded={dropdownActuallyOpen}\n                    disabled={status === EFormFieldStatus.DISABLED}\n                    onFocus={handleInputFocus}\n                    onBlur={handleInputBlur}\n                    onKeyDown={handleInputKeyDown}\n                    onMouseDown={handleInputMouseDown}\n                    onChange={handleInputChange}\n                />\n                <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                    <Dropdown\n                        value={value}\n                        options={options}\n                        size={size}\n                        dataTestId={dataTestId}\n                        listId={dropdownListId}\n                        opened={dropdownActuallyOpen}\n                        listLoading={dropdownListLoading}\n                        targetRef={suggestRef}\n                        setOpened={handleDropdownOpen}\n                        onSelect={handleSelect}\n                        onScrollEnd={onScrollEnd}\n                        renderList={renderDropdownList}\n                        renderListItem={renderDropdownListItem}\n                    />\n                </DropdownListContext.Provider>\n            </TextFieldBase>\n        );\n    };\n\n    return (\n        <Tooltip\n            size={ETooltipSize.SM}\n            isOpen={!!(tooltipOpen && inputFocused) && status !== EFormFieldStatus.DISABLED}\n            toggle={() => {}}\n            targetRef={suggestRef}\n            disableAdaptiveMode\n        >\n            <Tooltip.Body data-test-id={dataTestId && `${dataTestId}${DataTestId.Suggest.tooltip}`}>\n                {tooltipHint}\n            </Tooltip.Body>\n            <Tooltip.Target>{renderSuggestField()}</Tooltip.Target>\n        </Tooltip>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SuggestFieldDesktop.js","sources":["../../../../src/components/SuggestField/desktop/SuggestFieldDesktop.tsx"],"sourcesContent":["import React, { useState, useRef, useLayoutEffect, useEffect, useCallback } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport { ISuggestFieldDesktopProps } from \"./types\";\nimport { ISuggestFieldOption } from \"../types\";\nimport { EComponentSize } from \"../../../enums\";\nimport { Tooltip, ETooltipSize } from \"../../Tooltip\";\nimport { TextFieldBase } from \"../../TextField/TextFieldBase\";\nimport { FormFieldInput, FormFieldClear, EFormFieldStatus } from \"../../FormField\";\nimport { LoaderSmall, ELoaderSmallTheme } from \"../../Loader\";\nimport { DropdownListContext } from \"../../Dropdown\";\nimport { DataTestId } from \"../../../consts/DataTestId\";\nimport { SuggestFieldDesktopDropdown } from \"./SuggestFieldDesktopDropdown\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils\";\n\n/**\n * Выпадающий список с возможностью поиска по введённому значению, позволяет задать кастомные компоненты для отображения всех\n * элементов управления.\n *\n * @template T - тип опции, должен расширять ISuggestFieldOption\n */\nexport const SuggestFieldDesktop = <T extends ISuggestFieldOption = ISuggestFieldOption>({\n    value,\n    options,\n    size = EComponentSize.LG,\n    status,\n    placeholder,\n    \"data-test-id\": dataTestId,\n    tooltipHint,\n    loading,\n    tooltipOpen,\n    dropdownListLoading,\n    clearInputOnFocus,\n    onFilter,\n    onClear,\n    onSelect,\n    onScrollEnd,\n    prefix,\n    postfix,\n    renderInput,\n    renderDropdown,\n    renderDropdownList,\n    renderDropdownListItem,\n    inputProps,\n    ...restProps\n}: ISuggestFieldDesktopProps<T>) => {\n    const [inputValue, setInputValue] = useState(value?.label || \"\");\n    const [inputFocused, setInputFocused] = useState(false);\n    const [dropdownOpen, setDropdownOpen] = useState(false);\n    // Флаг для предотвращения автоматического открытия Dropdown сразу после выбора значения.\n    const [ignoreAutoOpen, setIgnoreAutoOpen] = useState(false);\n    const [dropdownListId] = useState(() => uniqueId());\n    const [activeDescendant, setActiveDescendant] = useState<string>();\n\n    const [prevValue, setPrevValue] = useState(value);\n    if (value?.id !== prevValue?.id) {\n        setPrevValue(value);\n        setInputValue(value?.label || \"\");\n    }\n\n    const suggestRef = useRef<HTMLDivElement>(null);\n\n    const onScrollEndRef = useRef(onScrollEnd);\n    useLayoutEffect(() => {\n        onScrollEndRef.current = onScrollEnd;\n    }, [onScrollEnd]);\n\n    const handleInputFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n        (event) => {\n            setInputFocused(true);\n\n            if (clearInputOnFocus && inputValue.length !== 0) {\n                setInputValue(\"\");\n                onFilter(\"\");\n            }\n\n            inputProps.onFocus?.(event);\n        },\n        [clearInputOnFocus, inputValue, onFilter, inputProps],\n    );\n\n    const closeDropdown = useCallback((nextIgnoreAutoOpen: boolean) => {\n        setIgnoreAutoOpen(nextIgnoreAutoOpen);\n        setActiveDescendant(undefined);\n        setDropdownOpen(false);\n    }, []);\n\n    const handleInputBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n        (event) => {\n            setInputFocused(false);\n            closeDropdown(false);\n\n            if (inputValue.length !== 0) {\n                setInputValue(value?.label || \"\");\n            } else if (value !== undefined) {\n                onSelect(undefined);\n            }\n\n            inputProps.onBlur?.(event);\n        },\n        [closeDropdown, inputValue, value, onSelect, inputProps],\n    );\n\n    const handleInputKeyDown = useCallback<React.KeyboardEventHandler<HTMLInputElement>>(\n        (event) => {\n            if (isKey(event.key, \"ESCAPE\")) {\n                if (dropdownOpen) {\n                    event.stopPropagation();\n                    closeDropdown(true);\n                }\n            }\n\n            inputProps.onKeyDown?.(event);\n        },\n        [dropdownOpen, closeDropdown, inputProps],\n    );\n\n    const handleInputMouseDown = useCallback<React.MouseEventHandler<HTMLInputElement>>(\n        (event) => {\n            if (!dropdownOpen) {\n                setIgnoreAutoOpen(false);\n                setDropdownOpen(true);\n            }\n\n            inputProps.onMouseDown?.(event);\n        },\n        [dropdownOpen, inputProps],\n    );\n\n    const handleInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n        (event) => {\n            setIgnoreAutoOpen(false);\n            setActiveDescendant(undefined);\n            setInputValue(event.target.value);\n            onFilter(event.target.value);\n            inputProps.onChange?.(event);\n        },\n        [onFilter, inputProps],\n    );\n\n    const handleClear = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n        (event) => {\n            if (value !== undefined) {\n                onSelect(undefined);\n            }\n\n            if (inputValue.length !== 0) {\n                onFilter(\"\");\n                setInputValue(\"\");\n            }\n\n            onClear?.(event);\n        },\n        [value, onSelect, inputValue.length, onFilter, onClear],\n    );\n\n    const handleDropdownOpen = useCallback<typeof setDropdownOpen>(\n        (nextDropdownOpen) => {\n            if (nextDropdownOpen) {\n                setDropdownOpen(nextDropdownOpen);\n            } else {\n                closeDropdown(false);\n            }\n        },\n        [closeDropdown],\n    );\n\n    const handleSelect = useCallback<typeof onSelect>(\n        (nextValue) => {\n            closeDropdown(true);\n            setInputValue(nextValue?.label || \"\");\n            onSelect(nextValue);\n        },\n        [closeDropdown, onSelect],\n    );\n\n    useEffect(() => {\n        if (inputFocused) {\n            if (dropdownOpen) {\n                if (options.length === 0) {\n                    closeDropdown(false);\n                }\n            } else {\n                if (options.length !== 0 && !ignoreAutoOpen) {\n                    setDropdownOpen(true);\n                }\n            }\n        }\n    }, [inputFocused, dropdownOpen, options.length, closeDropdown, ignoreAutoOpen]);\n\n    const renderSuggestField = () => {\n        const Input = renderInput === undefined ? FormFieldInput : renderInput;\n        const Dropdown = renderDropdown === undefined ? SuggestFieldDesktopDropdown : renderDropdown;\n        // Фактическое состояние открытия выпадающего списка.\n        const dropdownActuallyOpen = dropdownOpen && options.length !== 0;\n\n        return (\n            <TextFieldBase\n                data-test-id={dataTestId}\n                status={status}\n                size={size}\n                prefix={prefix}\n                postfix={\n                    <React.Fragment>\n                        {onClear !== undefined && <FormFieldClear onClick={handleClear} />}\n                        {loading && <LoaderSmall theme={ELoaderSmallTheme.BRAND} size={size} />}\n                        {postfix}\n                    </React.Fragment>\n                }\n                {...restProps}\n                ref={suggestRef}\n            >\n                <Input\n                    value={inputValue}\n                    placeholder={placeholder}\n                    data-test-id={dataTestId && `${dataTestId}${DataTestId.Suggest.input}`}\n                    {...inputProps}\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-controls={dropdownListId}\n                    aria-activedescendant={activeDescendant}\n                    aria-expanded={dropdownActuallyOpen}\n                    onFocus={handleInputFocus}\n                    onBlur={handleInputBlur}\n                    onKeyDown={handleInputKeyDown}\n                    onMouseDown={handleInputMouseDown}\n                    onChange={handleInputChange}\n                />\n                <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                    <Dropdown\n                        value={value}\n                        options={options}\n                        size={size}\n                        dataTestId={dataTestId}\n                        listId={dropdownListId}\n                        opened={dropdownActuallyOpen}\n                        listLoading={dropdownListLoading}\n                        targetRef={suggestRef}\n                        setOpened={handleDropdownOpen}\n                        onSelect={handleSelect}\n                        onScrollEnd={onScrollEnd}\n                        renderList={renderDropdownList}\n                        renderListItem={renderDropdownListItem}\n                    />\n                </DropdownListContext.Provider>\n            </TextFieldBase>\n        );\n    };\n\n    return (\n        <Tooltip\n            size={ETooltipSize.SM}\n            isOpen={!!(tooltipOpen && inputFocused) && status !== EFormFieldStatus.DISABLED}\n            toggle={() => {}}\n            targetRef={suggestRef}\n            disableAdaptiveMode\n        >\n            <Tooltip.Body data-test-id={dataTestId && `${dataTestId}${DataTestId.Suggest.tooltip}`}>\n                {tooltipHint}\n            </Tooltip.Body>\n            <Tooltip.Target>{renderSuggestField()}</Tooltip.Target>\n        </Tooltip>\n    );\n};\n"],"names":[],"mappings":"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"}

package/components/SuggestField/desktop/SuggestFieldDesktopDropdown.js

@@ -4,7 +4,7 @@ import { Portal } from "../../Portal/Portal.js";
 import "../../Dropdown/DropdownListContext.js";
 import { DropdownDesktop } from "../../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
-import { D as DropdownListItem } from "../../../chunks/DropdownListItem-BZdW_kQc.js";
+import { D as DropdownListItem } from "../../../chunks/DropdownListItem-DOJlU4CS.js";
 import { EDropdownWidth } from "../../Dropdown/desktop/enums.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";

package/components/SuggestField/index.js

@@ -2,7 +2,7 @@ import { SuggestFieldDesktopDropdown } from "./desktop/SuggestFieldDesktopDropdo
 import { SuggestFieldDesktop } from "./desktop/SuggestFieldDesktop.js";
 import { SuggestFieldMobile } from "./mobile/SuggestFieldMobile.js";
 import { SuggestFieldMobileDropdown } from "./mobile/SuggestFieldMobileDropdown.js";
-import { S } from "../../chunks/SuggestFieldMobileDropdownHint-CPzq_LZ_.js";
+import { S } from "../../chunks/SuggestFieldMobileDropdownHint-Dzg3TUpS.js";
 import { SuggestField } from "./SuggestField.js";
 export {
   SuggestField,

package/components/SuggestField/mobile/SuggestFieldMobile.js

@@ -18,7 +18,7 @@ import "../../FormField/FormField.js";
 import { LoaderSmall } from "../../Loader/LoaderSmall/LoaderSmall.js";
 import { ELoaderSmallTheme } from "../../Loader/LoaderSmall/enum.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-import "../../../chunks/SuggestFieldMobileDropdownHint-CPzq_LZ_.js";
+import "../../../chunks/SuggestFieldMobileDropdownHint-Dzg3TUpS.js";
 const SuggestFieldMobile = ({
   value,
   options,

package/components/SuggestField/mobile/SuggestFieldMobileDropdown.js

@@ -3,7 +3,7 @@ import React, { useState, useRef, useCallback } from "react";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-BZdW_kQc.js";
+import "../../../chunks/DropdownListItem-DOJlU4CS.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../../Dropdown/mobile/DropdownMobileBody.js";
 import { DropdownMobileClose } from "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -15,7 +15,7 @@ import { DropdownMobileList } from "../../Dropdown/mobile/DropdownMobileList.js"
 import { DropdownMobileListItem } from "../../Dropdown/mobile/DropdownMobileListItem.js";
 import { DropdownMobileLoader } from "../../Dropdown/mobile/DropdownMobileLoader.js";
 import { Dropdown } from "../../Dropdown/Dropdown.js";
-import { s as styles, S as SuggestFieldMobileDropdownHint } from "../../../chunks/SuggestFieldMobileDropdownHint-CPzq_LZ_.js";
+import { s as styles, S as SuggestFieldMobileDropdownHint } from "../../../chunks/SuggestFieldMobileDropdownHint-Dzg3TUpS.js";
 const SuggestFieldMobileDropdownBase = ({
   value,
   options,

package/components/SuggestField/mobile/SuggestFieldMobileDropdownHint.js

@@ -4,7 +4,7 @@ import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import "../../Typography/Text.js";
 import "../../Typography/Title.js";
-import { S } from "../../../chunks/SuggestFieldMobileDropdownHint-CPzq_LZ_.js";
+import { S } from "../../../chunks/SuggestFieldMobileDropdownHint-Dzg3TUpS.js";
 export {
   S as SuggestFieldMobileDropdownHint
 };

package/components/SuggestField/mobile/index.js

@@ -1,6 +1,6 @@
 import { SuggestFieldMobile } from "./SuggestFieldMobile.js";
 import { SuggestFieldMobileDropdown } from "./SuggestFieldMobileDropdown.js";
-import { S } from "../../../chunks/SuggestFieldMobileDropdownHint-CPzq_LZ_.js";
+import { S } from "../../../chunks/SuggestFieldMobileDropdownHint-Dzg3TUpS.js";
 export {
   SuggestFieldMobile,
   SuggestFieldMobileDropdown,

package/components/SwipeableArea/SwipeableArea.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-const swipeableArea = "swipeableArea__d17cf568";
-const content = "content__fda4814a";
-const disableScroll = "disableScroll__4cdaee20";
-const disablePointerEvents = "disablePointerEvents__3a08eaef";
-const swipeAnimationFinish = "swipeAnimationFinish__a8959c88";
-const leftContent = "leftContent__7abfed15";
-const rightContent = "rightContent__b7c19d88";
+import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from "react";
+import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { getElementWidth, getSwipeableAreaOpacity, resolveSwipeEnd, ESwipeDirection, resolveSwipeMove } from "./utils.js";
+const swipeableArea = "swipeableArea__79af4a44";
+const content = "content__413a96f6";
+const disableScroll = "disableScroll__52c9fad8";
+const disablePointerEvents = "disablePointerEvents__e745964b";
+const swipeAnimationFinish = "swipeAnimationFinish__54b00c36";
+const leftContent = "leftContent__3897b07b";
+const rightContent = "rightContent__6cccc968";
 const styles = {
   swipeableArea,
   content,
@@ -17,7 +18,6 @@ const styles = {
   leftContent,
   rightContent
 };
-const SWIPE_MIN_DISTANCE = 24;
 const SWIPE_ANIMATION_CLASSNAME = styles.swipeAnimationFinish;
 const DISABLE_SCROLL_CLASSNAME = styles.disableScroll;
 const DISABLE_POINTER_EVENTS_CLASSNAME = styles.disablePointerEvents;
@@ -32,44 +32,27 @@ const SwipeableArea = React.forwardRef(
     const contentTranslateXOnStartRef = useRef(0);
     const startCoordinates = useRef(START_COORDINATES_INITIAL);
     const containerRef = useRef(null);
+    const hasLeftSwipeableArea = leftSwipeableArea !== void 0;
+    const hasRightSwipeableArea = rightSwipeableArea !== void 0;
     const handleSwipe = () => {
       setAnimating(true);
-      const deltaContentTranslateX = contentTranslateXOnStartRef.current - contentTranslateX;
-      if (contentTranslateXOnStartRef.current === 0) {
-        if (deltaContentTranslateX > 0) {
-          if (deltaContentTranslateX > SWIPE_MIN_DISTANCE) {
-            setContentTranslateX(-rightSwipeableAreaRef.current.getBoundingClientRect().width);
-            onSwipeLeft == null ? void 0 : onSwipeLeft();
-          } else {
-            setContentTranslateX(0);
-          }
-        } else {
-          if (Math.abs(deltaContentTranslateX) > SWIPE_MIN_DISTANCE) {
-            setContentTranslateX(leftSwipeableAreaRef.current.getBoundingClientRect().width);
-            onSwipeRight == null ? void 0 : onSwipeRight();
-          } else {
-            setContentTranslateX(0);
-          }
-        }
-      } else if (contentTranslateXOnStartRef.current > 0) {
-        if (deltaContentTranslateX > 0) {
-          setContentTranslateX(
-            deltaContentTranslateX > SWIPE_MIN_DISTANCE ? 0 : leftSwipeableAreaRef.current.getBoundingClientRect().width
-          );
-        }
-      } else if (contentTranslateXOnStartRef.current < 0) {
-        if (deltaContentTranslateX < 0) {
-          setContentTranslateX(
-            Math.abs(deltaContentTranslateX) > SWIPE_MIN_DISTANCE ? 0 : -rightSwipeableAreaRef.current.getBoundingClientRect().width
-          );
-        }
+      const { translateX, direction } = resolveSwipeEnd({
+        translateX: contentTranslateX,
+        translateXOnStart: contentTranslateXOnStartRef.current,
+        leftAreaWidth: getElementWidth(leftSwipeableAreaRef.current),
+        rightAreaWidth: getElementWidth(rightSwipeableAreaRef.current)
+      });
+      setContentTranslateX(translateX);
+      if (direction === ESwipeDirection.LEFT) {
+        onSwipeLeft == null ? void 0 : onSwipeLeft();
+      } else if (direction === ESwipeDirection.RIGHT) {
+        onSwipeRight == null ? void 0 : onSwipeRight();
       }
     };
-    const handleDocumentTouchEnd = () => {
+    const handleDocumentTouchEnd = useCallback(() => {
       startCoordinates.current = START_COORDINATES_INITIAL;
       setDragType(void 0);
-      document.removeEventListener("touchend", handleDocumentTouchEnd);
-    };
+    }, []);
     useEffect(() => {
       if (!dragType && contentTranslateX !== contentTranslateXOnStartRef.current) {
         handleSwipe();
@@ -78,68 +61,38 @@ const SwipeableArea = React.forwardRef(
     const handleTouchStart = (event) => {
       startCoordinates.current = { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY };
       contentTranslateXOnStartRef.current = contentTranslateX;
-      document.addEventListener("touchend", handleDocumentTouchEnd);
+      document.addEventListener("touchend", handleDocumentTouchEnd, { once: true });
     };
     const handleTouchMove = (event) => {
-      if (event.touches.length != 1) {
+      if (event.touches.length !== 1) {
         return;
       }
       const deltaX = event.touches[0].clientX - startCoordinates.current.clientX;
       const deltaY = event.touches[0].clientY - startCoordinates.current.clientY;
       if (!dragType) {
-        if (Math.abs(deltaY) > Math.abs(deltaX)) {
-          setDragType(
-            "vertical"
-            /* vertical */
-          );
-        } else {
-          setDragType(
-            "horizontal"
-            /* horizontal */
-          );
-        }
+        setDragType(
+          Math.abs(deltaY) > Math.abs(deltaX) ? "vertical" : "horizontal"
+          /* horizontal */
+        );
         return;
       }
       if (dragType === "vertical") {
         return;
       }
-      const contentTranslateXNext = contentTranslateXOnStartRef.current + deltaX;
-      if (contentTranslateXOnStartRef.current === 0) {
-        if (deltaX > 0 && leftSwipeableArea) {
-          setContentTranslateX(
-            Math.min(contentTranslateXNext, leftSwipeableAreaRef.current.getBoundingClientRect().width)
-          );
-        } else if (deltaX < 0 && rightSwipeableArea) {
-          setContentTranslateX(
-            Math.max(contentTranslateXNext, -rightSwipeableAreaRef.current.getBoundingClientRect().width)
-          );
-        }
-      } else if (contentTranslateXOnStartRef.current > 0) {
-        if (deltaX < 0) {
-          setContentTranslateX(Math.max(0, contentTranslateXNext));
-        }
-      } else if (contentTranslateXOnStartRef.current < 0) {
-        if (deltaX > 0) {
-          setContentTranslateX(Math.min(0, contentTranslateXNext));
-        }
-      }
+      setContentTranslateX(
+        resolveSwipeMove({
+          translateX: contentTranslateX,
+          translateXOnStart: contentTranslateXOnStartRef.current,
+          deltaX,
+          leftAreaWidth: hasLeftSwipeableArea ? getElementWidth(leftSwipeableAreaRef.current) : null,
+          rightAreaWidth: hasRightSwipeableArea ? getElementWidth(rightSwipeableAreaRef.current) : null
+        })
+      );
     };
     const handleTransitionEnd = () => setAnimating(false);
-    const getOpacityRightContent = () => {
-      if (rightSwipeableAreaRef.current) {
-        return Math.abs(contentTranslateX) / rightSwipeableAreaRef.current.getBoundingClientRect().width;
-      }
-      return 1;
-    };
-    const getOpacityLeftContent = () => {
-      if (leftSwipeableAreaRef.current) {
-        return Math.abs(contentTranslateX) / leftSwipeableAreaRef.current.getBoundingClientRect().width;
-      }
-      return 1;
-    };
     useEffect(() => {
       const handleDocumentTouchStart = (event) => {
-        if (event.touches.length != 1) {
+        if (event.touches.length !== 1) {
           return;
         }
         if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -149,68 +102,72 @@ const SwipeableArea = React.forwardRef(
         }
       };
       document.addEventListener("touchstart", handleDocumentTouchStart);
-      return () => document.removeEventListener("touchstart", handleDocumentTouchStart);
-    }, []);
-    const openLeftSwipeableArea = () => {
-      if (leftSwipeableAreaRef.current) {
-        setAnimating(true);
-        setContentTranslateX(leftSwipeableAreaRef.current.getBoundingClientRect().width);
-      }
-    };
-    const openRightSwipeableArea = () => {
-      if (rightSwipeableAreaRef.current) {
-        setAnimating(true);
-        setContentTranslateX(-rightSwipeableAreaRef.current.getBoundingClientRect().width);
-      }
-    };
-    const closeSwipeableArea = () => {
-      if (rightSwipeableAreaRef.current || leftSwipeableAreaRef.current) {
-        setAnimating(true);
-        setContentTranslateX(0);
-      }
-    };
+      return () => {
+        document.removeEventListener("touchstart", handleDocumentTouchStart);
+        document.removeEventListener("touchend", handleDocumentTouchEnd);
+      };
+    }, [handleDocumentTouchEnd]);
     useImperativeHandle(
       ref,
       () => ({
         closeSwipe: () => {
-          closeSwipeableArea();
+          if (leftSwipeableAreaRef.current || rightSwipeableAreaRef.current) {
+            setAnimating(true);
+            setContentTranslateX(0);
+          }
         },
         swipeLeft: () => {
-          openRightSwipeableArea();
+          if (rightSwipeableAreaRef.current) {
+            setAnimating(true);
+            setContentTranslateX(-getElementWidth(rightSwipeableAreaRef.current));
+          }
         },
         swipeRight: () => {
-          openLeftSwipeableArea();
+          if (leftSwipeableAreaRef.current) {
+            setAnimating(true);
+            setContentTranslateX(getElementWidth(leftSwipeableAreaRef.current));
+          }
         }
       }),
-      [closeSwipeableArea, openRightSwipeableArea, openLeftSwipeableArea]
+      []
     );
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: clsx(styles.swipeableArea, className),
         ...rest,
-        "data-tx": "0.44.0",
+        "data-tx": "0.46.0",
         ref: containerRef,
         children: [
-          typeof leftSwipeableArea !== "undefined" ? /* @__PURE__ */ jsx(
+          hasLeftSwipeableArea ? /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(styles.leftContent, {
                 [SWIPE_ANIMATION_CLASSNAME]: animating
               }),
               ref: leftSwipeableAreaRef,
-              style: { opacity: getOpacityLeftContent() },
+              style: {
+                opacity: getSwipeableAreaOpacity(
+                  contentTranslateX,
+                  getElementWidth(leftSwipeableAreaRef.current)
+                )
+              },
               children: leftSwipeableArea
             }
           ) : null,
-          typeof rightSwipeableArea !== "undefined" ? /* @__PURE__ */ jsx(
+          hasRightSwipeableArea ? /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(styles.rightContent, {
                 [SWIPE_ANIMATION_CLASSNAME]: animating
               }),
               ref: rightSwipeableAreaRef,
-              style: { opacity: getOpacityRightContent() },
+              style: {
+                opacity: getSwipeableAreaOpacity(
+                  contentTranslateX,
+                  getElementWidth(rightSwipeableAreaRef.current)
+                )
+              },
               children: rightSwipeableArea
             }
           ) : null,