@hh.ru/magritte-ui-select 5.2.9 → 5.3.0

package/Select.js

@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-drop';
 import '@hh.ru/magritte-ui-icon/icon';
-import './SelectActivator-7f53c708.js';
+import './SelectActivator-125a6b32.js';
 import 'classnames';
 import '@hh.ru/magritte-ui-counter';
 import '@hh.ru/magritte-ui-form-helper';
@@ -42,7 +42,7 @@ const Select = ({ multiple, showClearButton, showCloseButtonInNavigationBar = fa
     const optionListSearchText = useRef([]);
     const valueSelectArray = getValue(valueSelect);
     const [selectedOptions, setSelectedOptions] = useState(() => valueSelectArray ? options.filter(({ value }) => valueSelectArray.includes(value)) : []);
-    const { optionsListRef, activatorRef, onActivatorClick, onClearSelectionClick, onOptionsListClose, showOptions } = useSelectOptionsList(!!searchable);
+    const { optionsListRef, activatorRef, toggleOptions, onClearSelectionClick, onOptionsListClose, showOptions } = useSelectOptionsList(!!searchable);
     const { values, onChange, clearSelectedValues, setLastValues } = useSelectState(!!multiple, valueSelect || []);
     useEffect(() => {
         const nextSelectedOptions = options.filter(({ value }) => valueSelectArray.includes(value));
@@ -68,7 +68,7 @@ const Select = ({ multiple, showClearButton, showCloseButtonInNavigationBar = fa
         },
         maxHeight,
         bottomSheetHeight,
-        onActivatorClick,
+        toggleOptions,
         values,
         multiple,
         selectedOptions,

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/Select.tsx"],"sourcesContent":["import { ReactElement, useState, useEffect, useRef, useCallback } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SelectForDesktopDevice } from '@hh.ru/magritte-ui-select/SelectForDesktopDevice';\nimport { SelectForMobileDevice } from '@hh.ru/magritte-ui-select/SelectForMobileDevice';\nimport type { SelectProps, SelectOption } from '@hh.ru/magritte-ui-select/types';\nimport { useSelectOptionsList } from '@hh.ru/magritte-ui-select/useSelectOptionsList';\nimport { useSelectState } from '@hh.ru/magritte-ui-select/useSelectState';\n\nconst getValue = (values?: string | string[]): string[] => {\n    if (values === undefined) {\n        return [];\n    }\n    return typeof values === 'string' ? [values] : values;\n};\n\nconst Select = <ShowClearButtonType extends boolean, MultipleType extends boolean, T>({\n    multiple,\n    showClearButton,\n    showCloseButtonInNavigationBar = false,\n    onChange: onChangeHandler,\n    value: valueSelect,\n    renderItem,\n    renderItemForDesktop,\n    options,\n    maxHeight = 460,\n    widthEqualToActivator = true,\n    maxWidth,\n    bottomSheetHeight = 'full-screen',\n    dropHost,\n    maxSelectedOptions,\n    searchable,\n    onBottomSheetOpen,\n    onBottomSheetClose,\n    onDropClose,\n    onDropOpen,\n    ...props\n}: SelectProps<ShowClearButtonType, MultipleType, T>): ReactElement => {\n    const { isMobile } = useBreakpoint();\n    const [commitChanges, setCommitChanges] = useState<number | undefined>();\n    const previousCommitChanges = useRef(commitChanges);\n    const [searchValue, setSearchValue] = useState('');\n    const [optionList, setOptionList] = useState(options);\n    const optionListSearchText = useRef<{ search: string; value: string }[]>([]);\n\n    const valueSelectArray = getValue(valueSelect);\n    const [selectedOptions, setSelectedOptions] = useState<SelectOption<T>[]>(() =>\n        valueSelectArray ? options.filter(({ value }) => valueSelectArray.includes(value)) : []\n    );\n\n    const { optionsListRef, activatorRef, onActivatorClick, onClearSelectionClick, onOptionsListClose, showOptions } =\n        useSelectOptionsList(!!searchable);\n\n    const { values, onChange, clearSelectedValues, setLastValues } = useSelectState<MultipleType>(\n        !!multiple,\n        valueSelect || []\n    );\n\n    useEffect(() => {\n        const nextSelectedOptions = options.filter(({ value }) => valueSelectArray.includes(value));\n        const isEqualsSelect = nextSelectedOptions.every((item) => {\n            return selectedOptions.includes(item);\n        });\n\n        if (!isEqualsSelect) {\n            setSelectedOptions(options.filter(({ value }) => valueSelectArray.includes(value)));\n        }\n    }, [options, valueSelectArray, selectedOptions]);\n\n    const optionListProps = {\n        ...props,\n        searchable,\n        onChange,\n        maxWidth,\n        widthEqualToActivator,\n        visible: showOptions,\n        setLastValues,\n        clearSelectedValues: () => {\n            clearSelectedValues();\n            setCommitChanges(performance.now());\n            onClearSelectionClick();\n        },\n        maxHeight,\n        bottomSheetHeight,\n        onActivatorClick,\n        values,\n        multiple,\n        selectedOptions,\n        onOptionsListClose,\n        searchValue,\n        setSearchValue,\n        optionsListRef,\n        activatorRef,\n        options: optionList,\n        optionsCount: options.length,\n        setCommitChanges,\n        showClearButton,\n        isLimitExceeded:\n            maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions,\n    };\n\n    useEffect(() => {\n        if (optionListSearchText.current.length === 0 && showOptions && optionsListRef.current) {\n            const options = optionsListRef.current.querySelectorAll<HTMLDivElement>('[data-magritte-option]');\n            optionListSearchText.current = [...options].map((optionElement) => {\n                return {\n                    search: optionElement.innerText ?? optionElement.textContent,\n                    value: optionElement.dataset.magritteOption as string,\n                };\n            });\n        }\n        if (!showOptions) {\n            setSearchValue('');\n        }\n    }, [optionsListRef, showOptions]);\n\n    useEffect(() => {\n        if (searchValue === '') {\n            setOptionList(options);\n        } else {\n            const optionToVisible = optionListSearchText.current\n                .filter(({ search }) => {\n                    const result = match(searchValue, search);\n                    return result;\n                })\n                .map(({ value }) => value);\n            const nextOptions = options.filter(({ value }) => optionToVisible.includes(value));\n\n            setOptionList(nextOptions);\n        }\n    }, [searchValue, options]);\n\n    const onChangeSelect = useCallback(() => onChangeHandler(values), [values, onChangeHandler]);\n\n    // обработка выбора значения селекта\n    useEffect(() => {\n        // если изменения не было, то ничего не делаем\n        if (previousCommitChanges.current === commitChanges) {\n            return;\n        }\n\n        if (!multiple) {\n            onOptionsListClose();\n        }\n\n        onChangeSelect();\n    }, [isMobile, onChangeSelect, commitChanges, multiple, onOptionsListClose]);\n\n    useEffect(() => {\n        if (previousCommitChanges.current !== commitChanges) {\n            const nextSelectedOptions = options.filter(({ value }) =>\n                Array.isArray(values) ? values.includes(value) : values === value\n            );\n            setSelectedOptions(nextSelectedOptions);\n            previousCommitChanges.current = commitChanges;\n        }\n    }, [options, values, commitChanges]);\n\n    if (isMobile) {\n        return (\n            <SelectForMobileDevice\n                {...optionListProps}\n                showCloseButtonInNavigationBar={showCloseButtonInNavigationBar}\n                renderItem={renderItem}\n                onBottomSheetClose={onBottomSheetClose}\n                onBottomSheetOpen={onBottomSheetOpen}\n            />\n        );\n    }\n\n    return (\n        <SelectForDesktopDevice\n            {...optionListProps}\n            renderItemForDesktop={renderItemForDesktop}\n            dropHost={dropHost}\n            onDropClose={onDropClose}\n            onDropOpen={onDropOpen}\n        />\n    );\n};\n\nSelect.displayName = 'Select';\n\nexport { Select };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,QAAQ,GAAG,CAAC,MAA0B,KAAc;IACtD,IAAI,MAAM,KAAK,SAAS,EAAE;AACtB,QAAA,OAAO,EAAE,CAAC;AACb,KAAA;AACD,IAAA,OAAO,OAAO,MAAM,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAC1D,CAAC,CAAC;AAEI,MAAA,MAAM,GAAG,CAAuE,EAClF,QAAQ,EACR,eAAe,EACf,8BAA8B,GAAG,KAAK,EACtC,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,WAAW,EAClB,UAAU,EACV,oBAAoB,EACpB,OAAO,EACP,SAAS,GAAG,GAAG,EACf,qBAAqB,GAAG,IAAI,EAC5B,QAAQ,EACR,iBAAiB,GAAG,aAAa,EACjC,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACwC,KAAkB;AAClE,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAC;AACzE,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtD,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAsC,EAAE,CAAC,CAAC;AAE7E,IAAA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAC/C,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAoB,MACtE,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAC1F,CAAC;IAEF,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,WAAW,EAAE,GAC5G,oBAAoB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAEvC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,cAAc,CAC3E,CAAC,CAAC,QAAQ,EACV,WAAW,IAAI,EAAE,CACpB,CAAC;IAEF,SAAS,CAAC,MAAK;QACX,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5F,MAAM,cAAc,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC,IAAI,KAAI;AACtD,YAAA,OAAO,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1C,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,EAAE;YACjB,kBAAkB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACvF,SAAA;KACJ,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;AAEjD,IAAA,MAAM,eAAe,GAAG;AACpB,QAAA,GAAG,KAAK;QACR,UAAU;QACV,QAAQ;QACR,QAAQ;QACR,qBAAqB;AACrB,QAAA,OAAO,EAAE,WAAW;QACpB,aAAa;QACb,mBAAmB,EAAE,MAAK;AACtB,YAAA,mBAAmB,EAAE,CAAC;AACtB,YAAA,gBAAgB,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;AACpC,YAAA,qBAAqB,EAAE,CAAC;SAC3B;QACD,SAAS;QACT,iBAAiB;QACjB,gBAAgB;QAChB,MAAM;QACN,QAAQ;QACR,eAAe;QACf,kBAAkB;QAClB,WAAW;QACX,cAAc;QACd,cAAc;QACd,YAAY;AACZ,QAAA,OAAO,EAAE,UAAU;QACnB,YAAY,EAAE,OAAO,CAAC,MAAM;QAC5B,gBAAgB;QAChB,eAAe;AACf,QAAA,eAAe,EACX,kBAAkB,KAAK,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,IAAI,kBAAkB;KACvG,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,oBAAoB,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,WAAW,IAAI,cAAc,CAAC,OAAO,EAAE;YACpF,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAiB,wBAAwB,CAAC,CAAC;AAClG,YAAA,oBAAoB,CAAC,OAAO,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,KAAI;gBAC9D,OAAO;AACH,oBAAA,MAAM,EAAE,aAAa,CAAC,SAAS,IAAI,aAAa,CAAC,WAAW;AAC5D,oBAAA,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,cAAwB;iBACxD,CAAC;AACN,aAAC,CAAC,CAAC;AACN,SAAA;QACD,IAAI,CAAC,WAAW,EAAE;YACd,cAAc,CAAC,EAAE,CAAC,CAAC;AACtB,SAAA;AACL,KAAC,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAElC,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,KAAK,EAAE,EAAE;YACpB,aAAa,CAAC,OAAO,CAAC,CAAC;AAC1B,SAAA;AAAM,aAAA;AACH,YAAA,MAAM,eAAe,GAAG,oBAAoB,CAAC,OAAO;AAC/C,iBAAA,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,KAAI;gBACnB,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAC1C,gBAAA,OAAO,MAAM,CAAC;AAClB,aAAC,CAAC;iBACD,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC;YAC/B,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YAEnF,aAAa,CAAC,WAAW,CAAC,CAAC;AAC9B,SAAA;AACL,KAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAE3B,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;;IAG7F,SAAS,CAAC,MAAK;;AAEX,QAAA,IAAI,qBAAqB,CAAC,OAAO,KAAK,aAAa,EAAE;YACjD,OAAO;AACV,SAAA;QAED,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,kBAAkB,EAAE,CAAC;AACxB,SAAA;AAED,QAAA,cAAc,EAAE,CAAC;AACrB,KAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE5E,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,qBAAqB,CAAC,OAAO,KAAK,aAAa,EAAE;AACjD,YAAA,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KACjD,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,MAAM,KAAK,KAAK,CACpE,CAAC;YACF,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;AACxC,YAAA,qBAAqB,CAAC,OAAO,GAAG,aAAa,CAAC;AACjD,SAAA;KACJ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;AAErC,IAAA,IAAI,QAAQ,EAAE;QACV,QACIA,IAAC,qBAAqB,EAAA,EAAA,GACd,eAAe,EACnB,8BAA8B,EAAE,8BAA8B,EAC9D,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,EACtC,CAAA,EACJ;AACL,KAAA;IAED,QACIA,IAAC,sBAAsB,EAAA,EAAA,GACf,eAAe,EACnB,oBAAoB,EAAE,oBAAoB,EAC1C,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACxB,CAAA,EACJ;AACN,EAAE;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Select.js","sources":["../src/Select.tsx"],"sourcesContent":["import { ReactElement, useState, useEffect, useRef, useCallback } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SelectForDesktopDevice } from '@hh.ru/magritte-ui-select/SelectForDesktopDevice';\nimport { SelectForMobileDevice } from '@hh.ru/magritte-ui-select/SelectForMobileDevice';\nimport type { SelectProps, SelectOption } from '@hh.ru/magritte-ui-select/types';\nimport { useSelectOptionsList } from '@hh.ru/magritte-ui-select/useSelectOptionsList';\nimport { useSelectState } from '@hh.ru/magritte-ui-select/useSelectState';\n\nconst getValue = (values?: string | string[]): string[] => {\n    if (values === undefined) {\n        return [];\n    }\n    return typeof values === 'string' ? [values] : values;\n};\n\nconst Select = <ShowClearButtonType extends boolean, MultipleType extends boolean, T>({\n    multiple,\n    showClearButton,\n    showCloseButtonInNavigationBar = false,\n    onChange: onChangeHandler,\n    value: valueSelect,\n    renderItem,\n    renderItemForDesktop,\n    options,\n    maxHeight = 460,\n    widthEqualToActivator = true,\n    maxWidth,\n    bottomSheetHeight = 'full-screen',\n    dropHost,\n    maxSelectedOptions,\n    searchable,\n    onBottomSheetOpen,\n    onBottomSheetClose,\n    onDropClose,\n    onDropOpen,\n    ...props\n}: SelectProps<ShowClearButtonType, MultipleType, T>): ReactElement => {\n    const { isMobile } = useBreakpoint();\n    const [commitChanges, setCommitChanges] = useState<number | undefined>();\n    const previousCommitChanges = useRef(commitChanges);\n    const [searchValue, setSearchValue] = useState('');\n    const [optionList, setOptionList] = useState(options);\n    const optionListSearchText = useRef<{ search: string; value: string }[]>([]);\n\n    const valueSelectArray = getValue(valueSelect);\n    const [selectedOptions, setSelectedOptions] = useState<SelectOption<T>[]>(() =>\n        valueSelectArray ? options.filter(({ value }) => valueSelectArray.includes(value)) : []\n    );\n\n    const { optionsListRef, activatorRef, toggleOptions, onClearSelectionClick, onOptionsListClose, showOptions } =\n        useSelectOptionsList(!!searchable);\n\n    const { values, onChange, clearSelectedValues, setLastValues } = useSelectState<MultipleType>(\n        !!multiple,\n        valueSelect || []\n    );\n\n    useEffect(() => {\n        const nextSelectedOptions = options.filter(({ value }) => valueSelectArray.includes(value));\n        const isEqualsSelect = nextSelectedOptions.every((item) => {\n            return selectedOptions.includes(item);\n        });\n\n        if (!isEqualsSelect) {\n            setSelectedOptions(options.filter(({ value }) => valueSelectArray.includes(value)));\n        }\n    }, [options, valueSelectArray, selectedOptions]);\n\n    const optionListProps = {\n        ...props,\n        searchable,\n        onChange,\n        maxWidth,\n        widthEqualToActivator,\n        visible: showOptions,\n        setLastValues,\n        clearSelectedValues: () => {\n            clearSelectedValues();\n            setCommitChanges(performance.now());\n            onClearSelectionClick();\n        },\n        maxHeight,\n        bottomSheetHeight,\n        toggleOptions,\n        values,\n        multiple,\n        selectedOptions,\n        onOptionsListClose,\n        searchValue,\n        setSearchValue,\n        optionsListRef,\n        activatorRef,\n        options: optionList,\n        optionsCount: options.length,\n        setCommitChanges,\n        showClearButton,\n        isLimitExceeded:\n            maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions,\n    };\n\n    useEffect(() => {\n        if (optionListSearchText.current.length === 0 && showOptions && optionsListRef.current) {\n            const options = optionsListRef.current.querySelectorAll<HTMLDivElement>('[data-magritte-option]');\n            optionListSearchText.current = [...options].map((optionElement) => {\n                return {\n                    search: optionElement.innerText ?? optionElement.textContent,\n                    value: optionElement.dataset.magritteOption as string,\n                };\n            });\n        }\n        if (!showOptions) {\n            setSearchValue('');\n        }\n    }, [optionsListRef, showOptions]);\n\n    useEffect(() => {\n        if (searchValue === '') {\n            setOptionList(options);\n        } else {\n            const optionToVisible = optionListSearchText.current\n                .filter(({ search }) => {\n                    const result = match(searchValue, search);\n                    return result;\n                })\n                .map(({ value }) => value);\n            const nextOptions = options.filter(({ value }) => optionToVisible.includes(value));\n\n            setOptionList(nextOptions);\n        }\n    }, [searchValue, options]);\n\n    const onChangeSelect = useCallback(() => onChangeHandler(values), [values, onChangeHandler]);\n\n    // обработка выбора значения селекта\n    useEffect(() => {\n        // если изменения не было, то ничего не делаем\n        if (previousCommitChanges.current === commitChanges) {\n            return;\n        }\n\n        if (!multiple) {\n            onOptionsListClose();\n        }\n\n        onChangeSelect();\n    }, [isMobile, onChangeSelect, commitChanges, multiple, onOptionsListClose]);\n\n    useEffect(() => {\n        if (previousCommitChanges.current !== commitChanges) {\n            const nextSelectedOptions = options.filter(({ value }) =>\n                Array.isArray(values) ? values.includes(value) : values === value\n            );\n            setSelectedOptions(nextSelectedOptions);\n            previousCommitChanges.current = commitChanges;\n        }\n    }, [options, values, commitChanges]);\n\n    if (isMobile) {\n        return (\n            <SelectForMobileDevice\n                {...optionListProps}\n                showCloseButtonInNavigationBar={showCloseButtonInNavigationBar}\n                renderItem={renderItem}\n                onBottomSheetClose={onBottomSheetClose}\n                onBottomSheetOpen={onBottomSheetOpen}\n            />\n        );\n    }\n\n    return (\n        <SelectForDesktopDevice\n            {...optionListProps}\n            renderItemForDesktop={renderItemForDesktop}\n            dropHost={dropHost}\n            onDropClose={onDropClose}\n            onDropOpen={onDropOpen}\n        />\n    );\n};\n\nSelect.displayName = 'Select';\n\nexport { Select };\n"],"names":["_jsx"],"mappings":"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"}

package/SelectActivator-125a6b32.js

@@ -0,0 +1,110 @@
+import './index.css';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { forwardRef, useRef, Fragment, useCallback, useLayoutEffect } from 'react';
+import classnames from 'classnames';
+import { keyboardMatch, keyboardKeys, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { Counter } from '@hh.ru/magritte-ui-counter';
+import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
+import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';
+import { Text } from '@hh.ru/magritte-ui-typography';
+
+var styles = {"select-activator":"magritte-select-activator___9XXwA_5-3-0","selectActivator":"magritte-select-activator___9XXwA_5-3-0","select-activator-label":"magritte-select-activator-label___Mc49R_5-3-0","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-3-0","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-3-0","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-3-0","select-activator-value":"magritte-select-activator-value___wDbVR_5-3-0","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-3-0","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-3-0","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-3-0","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-3-0","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-3-0","select-activator-item":"magritte-select-activator-item___JsY4v_5-3-0","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-3-0","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-3-0","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-3-0","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-3-0","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-3-0","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-3-0","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-3-0","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-3-0","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-3-0","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-3-0","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-3-0","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-3-0","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-3-0","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-3-0","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-3-0","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-3-0","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-3-0","select-options":"magritte-select-options___y2KYZ_5-3-0","selectOptions":"magritte-select-options___y2KYZ_5-3-0","select-options-xs":"magritte-select-options-xs___BiiPo_5-3-0","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-3-0","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-3-0"};
+
+// Когда активатор находится в фокусе, обрабатываем клавиатурную навигацию один раз и передаем фокус в дроп,
+// внутри дропа ей будет заниматься useKeyboardNavigation
+const focusOptionsList = (event, drop, direction) => {
+    if (drop) {
+        const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');
+        if (nextFocusableElement !== null) {
+            event.preventDefault();
+            nextFocusableElement.focus();
+        }
+    }
+};
+const SelectActivator = forwardRef(({ placeholder, size = 'medium', elevatePlaceholder = false, disabled = false, multiple, invalid = false, searchable = false, selectedOptions, toggleOptions, onFocus, onBlur, searchValue, setSearchValue, description, errorMessage, visible, dropRef, forcedState, setForcedState, }, ref) => {
+    const activatorRef = useRef(null);
+    const activatorRefCallback = useMultipleRefs(ref, activatorRef);
+    const counter = multiple ? selectedOptions?.length ?? 0 : 0;
+    const inputRef = useRef(null);
+    const prevVisibleRef = useRef(visible);
+    const value = selectedOptions?.map(({ label, value }, index) => (jsxs(Fragment, { children: [label, index === selectedOptions.length - 1 ? '' : ', '] }, value)));
+    const hintContent = (jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid && !visible }, "hint"));
+    const handleKeyDown = useCallback((event) => {
+        if (visible && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
+            setForcedState?.('focus');
+            toggleOptions(false);
+            return;
+        }
+        if (visible && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {
+            focusOptionsList(event, dropRef?.current, 'up');
+            return;
+        }
+        if (visible && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {
+            focusOptionsList(event, dropRef?.current, 'down');
+            return;
+        }
+        if (!visible && !keyboardMatch(event.nativeEvent, keyboardKeys.Tab)) {
+            toggleOptions(true);
+        }
+    }, [dropRef, setForcedState, toggleOptions, visible]);
+    useLayoutEffect(() => {
+        if (forcedState === 'focus') {
+            if (inputRef.current !== null) {
+                inputRef.current.focus();
+            }
+            else {
+                activatorRef.current?.focus();
+                setForcedState?.(null);
+            }
+        }
+        if (forcedState === 'focusAndSelect') {
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+        // список опций закрылся по клику вне него
+        if (!forcedState && !visible && prevVisibleRef.current) {
+            onBlur?.();
+        }
+        prevVisibleRef.current = visible;
+    }, [forcedState, setForcedState, visible, onBlur]);
+    if (searchable && (visible || forcedState === 'focus' || forcedState === 'focusAndSelect')) {
+        const sizeProp = size === 'large' ? { size: 'large' } : { size: 'medium' };
+        return (jsxs(Fragment$1, { children: [jsx(BaseInput, { ...sizeProp, wrapperRef: ref, onKeyDown: handleKeyDown, ref: inputRef, value: searchValue, onChange: setSearchValue, onBlur: () => setForcedState?.(null), "data-qa": "magritte-select-activator-input", placeholder: selectedOptions.length > 0 ? value : placeholder, counter: counter === 0 ? undefined : counter, autoComplete: "off" }), hintContent] }));
+    }
+    const showValue = selectedOptions.length > 0;
+    const showPlaceholder = !!(placeholder && !showValue);
+    const isLargeSize = size === 'large';
+    const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);
+    return (jsxs(Fragment$1, { children: [jsxs("div", { ref: activatorRefCallback, "data-qa": "magritte-select-activator", className: classnames(styles.selectActivator, {
+                    [styles.selectActivatorSizeLarge]: isLargeSize,
+                    [styles.selectActivatorWithLabel]: showLabel,
+                    [styles.selectActivatorHasCounter]: counter > 0,
+                    [styles.selectActivatorDisabled]: disabled,
+                    [styles.selectActivatorInvalid]: invalid,
+                }), onClick: () => {
+                    if (!disabled && !visible) {
+                        toggleOptions(true);
+                    }
+                }, onFocus: () => {
+                    if (!disabled && !visible && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {
+                        onFocus?.();
+                        toggleOptions(true);
+                        setForcedState?.('focus');
+                    }
+                }, onBlur: () => {
+                    if (!disabled && !visible) {
+                        onBlur?.();
+                    }
+                }, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxs("div", { className: styles.selectActivatorLabelRoot, children: [showPlaceholder && (jsx("div", { className: styles.selectActivatorPlaceholder, children: jsx(Text, { typography: "label-2-regular", children: jsx("div", { className: styles.selectActivatorEllipsis, children: placeholder }) }) })), showLabel && (jsx("div", { className: styles.selectActivatorLabel, children: jsx(Text, { typography: "label-4-regular", children: jsx("div", { className: styles.selectActivatorEllipsis, children: placeholder }) }) })), showValue && (jsx("div", { className: styles.selectActivatorValue, children: jsx(Text, { typography: "label-2-regular", children: jsx("div", { className: styles.selectActivatorEllipsis, children: value }) }) }))] }), jsxs("div", { className: styles.selectActivatorItem, children: [counter > 0 && jsx(Counter, { label: counter }), jsx("div", { className: classnames(styles.selectActivatorChevron, {
+                                    [styles.selectActivatorChevronUp]: visible,
+                                }), children: jsx(ChevronDownOutlinedSize24, {}) })] })] }), hintContent] }));
+});
+SelectActivator.displayName = 'SelectActivator';
+const renderSelectActivator = (props) => {
+    return jsx(SelectActivator, { ...props });
+};
+
+export { SelectActivator as S, renderSelectActivator as r, styles as s };
+//# sourceMappingURL=SelectActivator-125a6b32.js.map

package/SelectActivator-125a6b32.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectActivator-125a6b32.js","sources":["../src/SelectActivator.tsx"],"sourcesContent":["import {\n    ForwardedRef,\n    Fragment,\n    KeyboardEventHandler,\n    ReactNode,\n    SyntheticEvent,\n    forwardRef,\n    useCallback,\n    useLayoutEffect,\n    useRef,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { type SelectActivatorProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './styles.less';\n\n// Когда активатор находится в фокусе, обрабатываем клавиатурную навигацию один раз и передаем фокус в дроп,\n// внутри дропа ей будет заниматься useKeyboardNavigation\nconst focusOptionsList = (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: 'up' | 'down') => {\n    if (drop) {\n        const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n        if (nextFocusableElement !== null) {\n            event.preventDefault();\n            nextFocusableElement.focus();\n        }\n    }\n};\n\nconst SelectActivator = forwardRef(\n    <T,>(\n        {\n            placeholder,\n            size = 'medium',\n            elevatePlaceholder = false,\n            disabled = false,\n            multiple,\n            invalid = false,\n            searchable = false,\n            selectedOptions,\n            toggleOptions,\n            onFocus,\n            onBlur,\n            searchValue,\n            setSearchValue,\n            description,\n            errorMessage,\n            visible,\n            dropRef,\n            forcedState,\n            setForcedState,\n        }: SelectActivatorProps<T>,\n        ref: ForwardedRef<HTMLElement>\n    ) => {\n        const activatorRef = useRef<HTMLDivElement>(null);\n        const activatorRefCallback = useMultipleRefs(ref, activatorRef);\n        const counter = multiple ? selectedOptions?.length ?? 0 : 0;\n        const inputRef = useRef<HTMLInputElement>(null);\n        const prevVisibleRef = useRef(visible);\n\n        const value = selectedOptions?.map(({ label, value }, index) => (\n            <Fragment key={value}>\n                {label}\n                {index === selectedOptions.length - 1 ? '' : ', '}\n            </Fragment>\n        ));\n\n        const hintContent = (\n            <FormHelper\n                key=\"hint\"\n                description={description}\n                errorMessage={errorMessage}\n                disabled={disabled}\n                invalid={invalid && !visible}\n            />\n        );\n\n        const handleKeyDown = useCallback<KeyboardEventHandler>(\n            (event) => {\n                if (visible && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n                    setForcedState?.('focus');\n                    toggleOptions(false);\n                    return;\n                }\n\n                if (visible && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n                    focusOptionsList(event, dropRef?.current, 'up');\n                    return;\n                }\n\n                if (visible && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n                    focusOptionsList(event, dropRef?.current, 'down');\n                    return;\n                }\n\n                if (!visible && !keyboardMatch(event.nativeEvent, keyboardKeys.Tab)) {\n                    toggleOptions(true);\n                }\n            },\n            [dropRef, setForcedState, toggleOptions, visible]\n        );\n\n        useLayoutEffect(() => {\n            if (forcedState === 'focus') {\n                if (inputRef.current !== null) {\n                    inputRef.current.focus();\n                } else {\n                    activatorRef.current?.focus();\n                    setForcedState?.(null);\n                }\n            }\n\n            if (forcedState === 'focusAndSelect') {\n                inputRef.current?.focus();\n                inputRef.current?.select();\n            }\n\n            // список опций закрылся по клику вне него\n            if (!forcedState && !visible && prevVisibleRef.current) {\n                onBlur?.();\n            }\n\n            prevVisibleRef.current = visible;\n        }, [forcedState, setForcedState, visible, onBlur]);\n\n        if (searchable && (visible || forcedState === 'focus' || forcedState === 'focusAndSelect')) {\n            const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n\n            return (\n                <>\n                    <BaseInput\n                        {...sizeProp}\n                        wrapperRef={ref as ForwardedRef<HTMLDivElement> | undefined}\n                        onKeyDown={handleKeyDown}\n                        ref={inputRef}\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        onBlur={() => setForcedState?.(null)}\n                        data-qa=\"magritte-select-activator-input\"\n                        placeholder={selectedOptions.length > 0 ? value : placeholder}\n                        counter={counter === 0 ? undefined : counter}\n                        autoComplete=\"off\"\n                    />\n                    {hintContent}\n                </>\n            );\n        }\n\n        const showValue = selectedOptions.length > 0;\n        const showPlaceholder = !!(placeholder && !showValue);\n        const isLargeSize = size === 'large';\n        const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);\n\n        return (\n            <>\n                <div\n                    ref={activatorRefCallback}\n                    data-qa=\"magritte-select-activator\"\n                    className={classnames(styles.selectActivator, {\n                        [styles.selectActivatorSizeLarge]: isLargeSize,\n                        [styles.selectActivatorWithLabel]: showLabel,\n                        [styles.selectActivatorHasCounter]: counter > 0,\n                        [styles.selectActivatorDisabled]: disabled,\n                        [styles.selectActivatorInvalid]: invalid,\n                    })}\n                    onClick={() => {\n                        if (!disabled && !visible) {\n                            toggleOptions(true);\n                        }\n                    }}\n                    onFocus={() => {\n                        if (!disabled && !visible && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n                            onFocus?.();\n                            toggleOptions(true);\n                            setForcedState?.('focus');\n                        }\n                    }}\n                    onBlur={() => {\n                        if (!disabled && !visible) {\n                            onBlur?.();\n                        }\n                    }}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={disabled ? -1 : 0}\n                >\n                    <div className={styles.selectActivatorLabelRoot}>\n                        {showPlaceholder && (\n                            <div className={styles.selectActivatorPlaceholder}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showLabel && (\n                            <div className={styles.selectActivatorLabel}>\n                                <Text typography=\"label-4-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showValue && (\n                            <div className={styles.selectActivatorValue}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{value}</div>\n                                </Text>\n                            </div>\n                        )}\n                    </div>\n                    <div className={styles.selectActivatorItem}>\n                        {counter > 0 && <Counter label={counter} />}\n                        <div\n                            className={classnames(styles.selectActivatorChevron, {\n                                [styles.selectActivatorChevronUp]: visible,\n                            })}\n                        >\n                            <ChevronDownOutlinedSize24 />\n                        </div>\n                    </div>\n                </div>\n                {hintContent}\n            </>\n        );\n    }\n);\n\nSelectActivator.displayName = 'SelectActivator';\n\nconst renderSelectActivator = <T,>(props: SelectActivatorProps<T>): ReactNode => {\n    return <SelectActivator {...props} />;\n};\n\nexport { SelectActivator, renderSelectActivator };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/SelectActivator.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { type SelectActivatorProps } from './types';
 declare const SelectActivator: import("react").ForwardRefExoticComponent<SelectActivatorProps<unknown> & import("react").RefAttributes<HTMLElement>>;
 declare const renderSelectActivator: <T>(props: SelectActivatorProps<T>) => ReactNode;

package/SelectActivator.js

@@ -3,10 +3,11 @@ import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-counter';
 import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-input/BaseInput';
 import '@hh.ru/magritte-ui-typography';
-export { S as SelectActivator, r as renderSelectActivator } from './SelectActivator-7f53c708.js';
+export { S as SelectActivator, r as renderSelectActivator } from './SelectActivator-125a6b32.js';
 //# sourceMappingURL=SelectActivator.js.map

package/SelectActivator.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectActivator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"SelectActivator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/SelectForDesktopDevice.d.ts

@@ -1,8 +1,8 @@
-import { type ReactElement, RefObject } from 'react';
+import { ReactElement, RefObject } from 'react';
 import type { InternalSelectProps, RenderItem } from './types';
 export declare const SelectForDesktopDevice: {
-    <T, MultipleType extends boolean>({ name, options, disabled, multiple, onChange, onActivatorClick, maxHeight, values, visible, onOptionsListClose, selectedOptions, renderItemForDesktop, clearSelectedValues, setCommitChanges, searchValue, showClearButton, trls, optionsListRef, size, elevatePlaceholder, widthEqualToActivator, maxWidth, dropHost, isLimitExceeded, activatorRef, onDropOpen, onDropClose, ...activatorProps }: Omit<import("./types").SelectProps<boolean, boolean, T>, "onChange" | "value" | "renderItemForDesktop" | "renderItem"> & {
-        onActivatorClick: (visible: boolean) => void;
+    <T, MultipleType extends boolean>({ name, options, disabled, multiple, onChange, toggleOptions, maxHeight, values, visible, onOptionsListClose, selectedOptions, renderItemForDesktop, clearSelectedValues, setCommitChanges, searchValue, showClearButton, trls, optionsListRef, size, elevatePlaceholder, widthEqualToActivator, maxWidth, dropHost, isLimitExceeded, activatorRef, onDropOpen, onDropClose, ...activatorProps }: Omit<import("./types").SelectProps<boolean, boolean, T>, "onChange" | "value" | "renderItemForDesktop" | "renderItem"> & {
+        toggleOptions: (visible: boolean) => void;
         selectedOptions: import("@hh.ru/magritte-ui-select/types").SelectOption<T>[];
         values: [MultipleType] extends [true] ? string[] : string;
         visible: boolean;

package/SelectForDesktopDevice.js

@@ -1,13 +1,13 @@
 import './index.css';
-import { useRef, createElement } from 'react';
+import { useRef, useState, createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { Card } from '@hh.ru/magritte-ui-card';
 import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
 import { Drop } from '@hh.ru/magritte-ui-drop';
 import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
-import { S as SelectActivator, s as styles } from './SelectActivator-7f53c708.js';
+import { S as SelectActivator, s as styles } from './SelectActivator-125a6b32.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
 import 'classnames';
@@ -18,30 +18,27 @@ import '@hh.ru/magritte-ui-typography';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import '@hh.ru/magritte-ui-checkbox-radio';
 
-const SelectForDesktopDevice = ({ name, options, disabled, multiple = false, onChange, onActivatorClick, maxHeight, values, visible, onOptionsListClose, selectedOptions, renderItemForDesktop, clearSelectedValues, setCommitChanges, searchValue, showClearButton, trls, optionsListRef, size, elevatePlaceholder, widthEqualToActivator, maxWidth, dropHost, isLimitExceeded, activatorRef, onDropOpen, onDropClose, ...activatorProps }) => {
-    const wrapperRef = useRef(null);
+const SelectForDesktopDevice = ({ name, options, disabled, multiple = false, onChange, toggleOptions, maxHeight, values, visible, onOptionsListClose, selectedOptions, renderItemForDesktop, clearSelectedValues, setCommitChanges, searchValue, showClearButton, trls, optionsListRef, size, elevatePlaceholder, widthEqualToActivator, maxWidth, dropHost, isLimitExceeded, activatorRef, onDropOpen, onDropClose, ...activatorProps }) => {
+    const closedByKeyboardRef = useRef(false);
     const dropRef = useRef(null);
-    const optionsMultiRef = useMultipleRefs(optionsListRef, dropRef);
-    const searchRef = useRef(null);
-    const rawOptions = options.filter(({ type }) => type !== 'delimiter');
-    const firstOption = rawOptions?.[0];
-    const lastOption = rawOptions?.[rawOptions.length - 1];
+    const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef);
     const sizeProp = size === 'large' ? { size: 'large', elevatePlaceholder } : { size: 'medium' };
-    return (jsxs("div", { ref: wrapperRef, tabIndex: -1, children: [jsx(SelectActivator, { ...sizeProp, ...activatorProps, disabled: disabled, selectedOptions: selectedOptions, onClick: onActivatorClick, searchValue: searchValue, ref: activatorRef, multiple: multiple, visible: visible, dropRef: dropRef, searchRef: searchRef }), jsx(Drop, { ref: optionsMultiRef, maxWidth: maxWidth, visible: options.length > 0 && visible, direction: "bottom", alignment: "left", activatorRef: activatorRef, role: activatorProps.searchable ? 'status' : 'listbox', space: 400, widthEqualToActivator: widthEqualToActivator, host: dropHost, arrowNavigation: true, forcePosition: true, closeByClickOutside: false, onClose: () => {
-                    wrapperRef.current?.focus();
+    // стейт фокуса активатора, в которой его нужно привести после взаимодействия пользователя со списком опций
+    // его нужно отличать от обычного фокуса, инициированным пользователем, поэтому не используем activatorRef.focus()
+    const [forcedState, setForcedState] = useState(null);
+    return (jsxs("div", { tabIndex: -1, children: [jsx(SelectActivator, { ...sizeProp, ...activatorProps, disabled: disabled, selectedOptions: selectedOptions, toggleOptions: toggleOptions, searchValue: searchValue, ref: activatorRef, multiple: multiple, visible: visible, dropRef: dropRef, forcedState: forcedState, setForcedState: setForcedState }), jsx(Drop, { autoFocusWhenOpened: false, ref: optionsListRefCallback, maxWidth: maxWidth, visible: options.length > 0 && visible, direction: "bottom", alignment: "left", activatorRef: activatorRef, role: activatorProps.searchable ? 'status' : 'listbox', space: 400, widthEqualToActivator: widthEqualToActivator, host: dropHost, keyboardNavigationMode: "list", forcePosition: true, closeByClickOutside: false, onClose: () => {
+                    setForcedState('focus');
                     onOptionsListClose();
-                }, onKeyDown: ({ nativeEvent }) => {
-                    const activeElement = document.activeElement;
-                    const searchInput = searchRef.current;
-                    if (searchInput !== null &&
-                        keyboardMatch(nativeEvent, keyboardKeys.ArrowUp) &&
-                        activeElement?.dataset.magritteOptionFirstActiveElement) {
-                        searchInput.focus();
+                }, onKeyDownCapture: (event) => {
+                    if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
+                        closedByKeyboardRef.current = true;
                     }
-                }, onAfterExit: onDropClose, onAppear: onDropOpen, children: jsx("div", { style: { maxHeight: `${maxHeight}px` }, children: jsxs("div", { "data-qa": "magritte-select-option-list", className: styles.selectOptions, children: [showClearButton && (jsx(Card, { actionCard: true, showBorder: true, borderRadius: 12, padding: 16, stretched: true, hoverStyle: "neutral", onClick: () => {
+                }, onAfterExit: onDropClose, onAppear: onDropOpen, children: jsx("div", { style: { maxHeight: `${maxHeight}px` }, children: jsxs("div", { "data-qa": "magritte-select-option-list", className: styles.selectOptions, children: [showClearButton && (jsx(Card, { actionCard: true, showBorder: true, borderRadius: 12, padding: 16, stretched: true, hoverStyle: "neutral", onClick: (event) => {
+                                    if (event.type === 'keydown') {
+                                        setForcedState('focus');
+                                    }
                                     clearSelectedValues();
-                                    wrapperRef.current?.focus();
-                                }, "data-qa": "magritte-select-clear-action", "data-magritte-option-first-active-element": "true", children: jsx(Cell, { left: jsx(CrossOutlinedSize24, { initial: "secondary" }), children: jsx(CellText, { children: trls?.clearButton }) }) })), options?.map((option) => {
+                                }, "data-qa": "magritte-select-clear-action", children: jsx(Cell, { left: jsx(CrossOutlinedSize24, { initial: "secondary" }), children: jsx(CellText, { children: trls?.clearButton }) }) })), options?.map((option) => {
                                 const checked = getChecked(option.value, values, multiple);
                                 const props = {
                                     ...option,
@@ -49,18 +46,22 @@ const SelectForDesktopDevice = ({ name, options, disabled, multiple = false, onC
                                     onChange: (value, needToPut) => {
                                         onChange(value, needToPut);
                                         setCommitChanges(performance.now());
-                                        if (searchRef.current && searchValue) {
-                                            searchRef.current?.focus();
-                                            searchRef.current?.select();
+                                        if (!multiple && closedByKeyboardRef.current) {
+                                            setForcedState('focus');
+                                            return;
                                         }
-                                        // return focus after select item
-                                        !multiple && wrapperRef.current?.focus();
+                                        if (multiple && searchValue) {
+                                            setForcedState('focusAndSelect');
+                                            return;
+                                        }
+                                        closedByKeyboardRef.current = false;
+                                        setForcedState(null);
                                     },
                                     checked,
                                     multiple,
                                     isLimitExceeded,
                                 };
-                                return (createElement(SelectOption, { ...props, isFirstActiveElement: !showClearButton && firstOption?.value === option.value, isLastActiveElement: lastOption?.value === option.value, key: option.value, onOptionsListClose: onOptionsListClose, render: renderItemForDesktop }));
+                                return (createElement(SelectOption, { ...props, key: option.value, onOptionsListClose: onOptionsListClose, render: renderItemForDesktop }));
                             })] }) }) })] }));
 };
 SelectForDesktopDevice.displayName = 'SelectForDesktopDevice';

package/SelectForDesktopDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectForDesktopDevice.js","sources":["../src/SelectForDesktopDevice.tsx"],"sourcesContent":["import { type ReactElement, useRef, RefObject } from 'react';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SelectActivator } from '@hh.ru/magritte-ui-select/SelectActivator';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport type { InternalSelectProps, RenderItem } from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './styles.less';\n\nexport const SelectForDesktopDevice = <T, MultipleType extends boolean>({\n    name,\n    options,\n    disabled,\n    multiple = false,\n    onChange,\n    onActivatorClick,\n    maxHeight,\n    values,\n    visible,\n    onOptionsListClose,\n    selectedOptions,\n    renderItemForDesktop,\n    clearSelectedValues,\n    setCommitChanges,\n    searchValue,\n    showClearButton,\n    trls,\n    optionsListRef,\n    size,\n    elevatePlaceholder,\n    widthEqualToActivator,\n    maxWidth,\n    dropHost,\n    isLimitExceeded,\n    activatorRef,\n    onDropOpen,\n    onDropClose,\n    ...activatorProps\n}: InternalSelectProps<T, MultipleType> & {\n    renderItemForDesktop?: RenderItem<T>;\n    dropHost?: RefObject<HTMLElement>;\n}): ReactElement => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const dropRef = useRef<HTMLDivElement>(null);\n    const optionsMultiRef = useMultipleRefs(optionsListRef, dropRef);\n    const searchRef = useRef<HTMLInputElement>(null);\n    const rawOptions = options.filter(({ type }) => type !== 'delimiter');\n    const firstOption = rawOptions?.[0];\n    const lastOption = rawOptions?.[rawOptions.length - 1];\n    const sizeProp =\n        size === 'large' ? ({ size: 'large', elevatePlaceholder } as const) : ({ size: 'medium' } as const);\n\n    return (\n        <div ref={wrapperRef} tabIndex={-1}>\n            <SelectActivator\n                {...sizeProp}\n                {...activatorProps}\n                disabled={disabled}\n                selectedOptions={selectedOptions}\n                onClick={onActivatorClick}\n                searchValue={searchValue}\n                ref={activatorRef}\n                multiple={multiple}\n                visible={visible}\n                dropRef={dropRef}\n                searchRef={searchRef}\n            />\n            <Drop\n                ref={optionsMultiRef}\n                maxWidth={maxWidth}\n                visible={options.length > 0 && visible}\n                direction=\"bottom\"\n                alignment=\"left\"\n                activatorRef={activatorRef}\n                role={activatorProps.searchable ? 'status' : 'listbox'}\n                space={400}\n                widthEqualToActivator={widthEqualToActivator}\n                host={dropHost}\n                arrowNavigation\n                forcePosition\n                closeByClickOutside={false}\n                onClose={() => {\n                    wrapperRef.current?.focus();\n                    onOptionsListClose();\n                }}\n                onKeyDown={({ nativeEvent }: { nativeEvent: KeyboardEvent }) => {\n                    const activeElement = document.activeElement as HTMLElement;\n                    const searchInput = searchRef.current;\n\n                    if (\n                        searchInput !== null &&\n                        keyboardMatch(nativeEvent, keyboardKeys.ArrowUp) &&\n                        activeElement?.dataset.magritteOptionFirstActiveElement\n                    ) {\n                        searchInput.focus();\n                    }\n                }}\n                onAfterExit={onDropClose}\n                onAppear={onDropOpen}\n            >\n                <div style={{ maxHeight: `${maxHeight}px` }}>\n                    <div data-qa=\"magritte-select-option-list\" className={styles.selectOptions}>\n                        {showClearButton && (\n                            <Card\n                                actionCard\n                                showBorder\n                                borderRadius={12}\n                                padding={16}\n                                stretched\n                                hoverStyle=\"neutral\"\n                                onClick={() => {\n                                    clearSelectedValues();\n                                    wrapperRef.current?.focus();\n                                }}\n                                data-qa=\"magritte-select-clear-action\"\n                                data-magritte-option-first-active-element=\"true\"\n                            >\n                                <Cell left={<CrossOutlinedSize24 initial=\"secondary\" />}>\n                                    <CellText>{trls?.clearButton}</CellText>\n                                </Cell>\n                            </Card>\n                        )}\n                        {options?.map((option) => {\n                            const checked = getChecked(option.value, values, multiple);\n                            const props = {\n                                ...option,\n                                name,\n                                onChange: (value: string, needToPut: boolean) => {\n                                    onChange(value, needToPut);\n                                    setCommitChanges(performance.now());\n                                    if (searchRef.current && searchValue) {\n                                        searchRef.current?.focus();\n                                        searchRef.current?.select();\n                                    }\n                                    // return focus after select item\n                                    !multiple && wrapperRef.current?.focus();\n                                },\n                                checked,\n                                multiple,\n                                isLimitExceeded,\n                            };\n                            return (\n                                <SelectOption\n                                    {...props}\n                                    isFirstActiveElement={!showClearButton && firstOption?.value === option.value}\n                                    isLastActiveElement={lastOption?.value === option.value}\n                                    key={option.value}\n                                    onOptionsListClose={onOptionsListClose}\n                                    render={renderItemForDesktop}\n                                />\n                            );\n                        })}\n                    </div>\n                </div>\n            </Drop>\n        </div>\n    );\n};\n\nSelectForDesktopDevice.displayName = 'SelectForDesktopDevice';\n"],"names":["_jsxs","_jsx","_createElement"],"mappings":"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"}
+{"version":3,"file":"SelectForDesktopDevice.js","sources":["../src/SelectForDesktopDevice.tsx"],"sourcesContent":["import { KeyboardEvent, ReactElement, RefObject, useRef, useState } from 'react';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SelectActivator } from '@hh.ru/magritte-ui-select/SelectActivator';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport type { InternalSelectProps, RenderItem } from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './styles.less';\n\nexport const SelectForDesktopDevice = <T, MultipleType extends boolean>({\n    name,\n    options,\n    disabled,\n    multiple = false,\n    onChange,\n    toggleOptions,\n    maxHeight,\n    values,\n    visible,\n    onOptionsListClose,\n    selectedOptions,\n    renderItemForDesktop,\n    clearSelectedValues,\n    setCommitChanges,\n    searchValue,\n    showClearButton,\n    trls,\n    optionsListRef,\n    size,\n    elevatePlaceholder,\n    widthEqualToActivator,\n    maxWidth,\n    dropHost,\n    isLimitExceeded,\n    activatorRef,\n    onDropOpen,\n    onDropClose,\n    ...activatorProps\n}: InternalSelectProps<T, MultipleType> & {\n    renderItemForDesktop?: RenderItem<T>;\n    dropHost?: RefObject<HTMLElement>;\n}): ReactElement => {\n    const closedByKeyboardRef = useRef(false);\n    const dropRef = useRef<HTMLDivElement>(null);\n    const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef);\n    const sizeProp =\n        size === 'large' ? ({ size: 'large', elevatePlaceholder } as const) : ({ size: 'medium' } as const);\n    // стейт фокуса активатора, в которой его нужно привести после взаимодействия пользователя со списком опций\n    // его нужно отличать от обычного фокуса, инициированным пользователем, поэтому не используем activatorRef.focus()\n    const [forcedState, setForcedState] = useState<'focus' | 'focusAndSelect' | null>(null);\n\n    return (\n        <div tabIndex={-1}>\n            <SelectActivator\n                {...sizeProp}\n                {...activatorProps}\n                disabled={disabled}\n                selectedOptions={selectedOptions}\n                toggleOptions={toggleOptions}\n                searchValue={searchValue}\n                ref={activatorRef}\n                multiple={multiple}\n                visible={visible}\n                dropRef={dropRef}\n                forcedState={forcedState}\n                setForcedState={setForcedState}\n            />\n            <Drop\n                autoFocusWhenOpened={false}\n                ref={optionsListRefCallback}\n                maxWidth={maxWidth}\n                visible={options.length > 0 && visible}\n                direction=\"bottom\"\n                alignment=\"left\"\n                activatorRef={activatorRef}\n                role={activatorProps.searchable ? 'status' : 'listbox'}\n                space={400}\n                widthEqualToActivator={widthEqualToActivator}\n                host={dropHost}\n                keyboardNavigationMode=\"list\"\n                forcePosition\n                closeByClickOutside={false}\n                onClose={() => {\n                    setForcedState('focus');\n                    onOptionsListClose();\n                }}\n                onKeyDownCapture={(event: KeyboardEvent) => {\n                    if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                        closedByKeyboardRef.current = true;\n                    }\n                }}\n                onAfterExit={onDropClose}\n                onAppear={onDropOpen}\n            >\n                <div style={{ maxHeight: `${maxHeight}px` }}>\n                    <div data-qa=\"magritte-select-option-list\" className={styles.selectOptions}>\n                        {showClearButton && (\n                            <Card\n                                actionCard\n                                showBorder\n                                borderRadius={12}\n                                padding={16}\n                                stretched\n                                hoverStyle=\"neutral\"\n                                onClick={(event) => {\n                                    if (event.type === 'keydown') {\n                                        setForcedState('focus');\n                                    }\n                                    clearSelectedValues();\n                                }}\n                                data-qa=\"magritte-select-clear-action\"\n                            >\n                                <Cell left={<CrossOutlinedSize24 initial=\"secondary\" />}>\n                                    <CellText>{trls?.clearButton}</CellText>\n                                </Cell>\n                            </Card>\n                        )}\n                        {options?.map((option) => {\n                            const checked = getChecked(option.value, values, multiple);\n                            const props = {\n                                ...option,\n                                name,\n                                onChange: (value: string, needToPut: boolean) => {\n                                    onChange(value, needToPut);\n                                    setCommitChanges(performance.now());\n\n                                    if (!multiple && closedByKeyboardRef.current) {\n                                        setForcedState('focus');\n                                        return;\n                                    }\n\n                                    if (multiple && searchValue) {\n                                        setForcedState('focusAndSelect');\n                                        return;\n                                    }\n\n                                    closedByKeyboardRef.current = false;\n                                    setForcedState(null);\n                                },\n                                checked,\n                                multiple,\n                                isLimitExceeded,\n                            };\n                            return (\n                                <SelectOption\n                                    {...props}\n                                    key={option.value}\n                                    onOptionsListClose={onOptionsListClose}\n                                    render={renderItemForDesktop}\n                                />\n                            );\n                        })}\n                    </div>\n                </div>\n            </Drop>\n        </div>\n    );\n};\n\nSelectForDesktopDevice.displayName = 'SelectForDesktopDevice';\n"],"names":["_jsxs","_jsx","_createElement"],"mappings":"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"}

package/SelectForMobileDevice.d.ts

@@ -1,8 +1,8 @@
 import { type ReactElement, RefObject } from 'react';
 import type { InternalSelectProps, RenderItem, OnChangeAction } from './types';
 export declare const SelectForMobileDevice: {
-    <T, MultipleType extends boolean>({ name, options, disabled, multiple, onChange, onActivatorClick, renderItem, renderActivator, values, visible, onOptionsListClose, selectedOptions, searchable, clearSelectedValues, setCommitChanges, trls, bottomSheetHeight, optionsListRef, activatorRef, searchValue, showClearButton, showCloseButtonInNavigationBar, setSearchValue, size, elevatePlaceholder, setLastValues, placeholder, applyChangesButton: _applyChangesButton, clearButton: _clearButton, isLimitExceeded, onBottomSheetClose, onBottomSheetOpen, ...activatorProps }: Omit<import("./types").SelectProps<boolean, boolean, T>, "onChange" | "value" | "renderItemForDesktop" | "renderItem"> & {
-        onActivatorClick: (visible: boolean) => void;
+    <T, MultipleType extends boolean>({ name, options, disabled, multiple, onChange, toggleOptions, renderItem, renderActivator, values, visible, onOptionsListClose, selectedOptions, searchable, clearSelectedValues, setCommitChanges, trls, bottomSheetHeight, optionsListRef, activatorRef, searchValue, showClearButton, showCloseButtonInNavigationBar, setSearchValue, size, elevatePlaceholder, setLastValues, placeholder, applyChangesButton: _applyChangesButton, clearButton: _clearButton, isLimitExceeded, onBottomSheetClose, onBottomSheetOpen, ...activatorProps }: Omit<import("./types").SelectProps<boolean, boolean, T>, "onChange" | "value" | "renderItemForDesktop" | "renderItem"> & {
+        toggleOptions: (visible: boolean) => void;
         selectedOptions: import("@hh.ru/magritte-ui-select/types").SelectOption<T>[];
         values: [MultipleType] extends [true] ? string[] : string;
         visible: boolean;

package/SelectForMobileDevice.js

@@ -5,11 +5,12 @@ import { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet'
 import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { SearchInput } from '@hh.ru/magritte-ui-input';
 import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
-import { s as styles, r as renderSelectActivator } from './SelectActivator-7f53c708.js';
+import { s as styles, r as renderSelectActivator } from './SelectActivator-125a6b32.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-counter';
 import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-input/BaseInput';
@@ -19,7 +20,7 @@ import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import '@hh.ru/magritte-ui-checkbox-radio';
 
-const SelectForMobileDevice = ({ name, options, disabled, multiple = false, onChange, onActivatorClick, renderItem, renderActivator = renderSelectActivator, values, visible, onOptionsListClose, selectedOptions, searchable, clearSelectedValues, setCommitChanges, trls, bottomSheetHeight, optionsListRef, activatorRef, searchValue, showClearButton, showCloseButtonInNavigationBar, setSearchValue, size, elevatePlaceholder, setLastValues, placeholder, applyChangesButton: _applyChangesButton, clearButton: _clearButton, isLimitExceeded, onBottomSheetClose, onBottomSheetOpen, ...activatorProps }) => {
+const SelectForMobileDevice = ({ name, options, disabled, multiple = false, onChange, toggleOptions, renderItem, renderActivator = renderSelectActivator, values, visible, onOptionsListClose, selectedOptions, searchable, clearSelectedValues, setCommitChanges, trls, bottomSheetHeight, optionsListRef, activatorRef, searchValue, showClearButton, showCloseButtonInNavigationBar, setSearchValue, size, elevatePlaceholder, setLastValues, placeholder, applyChangesButton: _applyChangesButton, clearButton: _clearButton, isLimitExceeded, onBottomSheetClose, onBottomSheetOpen, ...activatorProps }) => {
     const sizeProp = size === 'large' ? { size: 'large', elevatePlaceholder } : { size: 'medium' };
     const clearButton = showClearButton &&
         _clearButton &&
@@ -46,7 +47,7 @@ const SelectForMobileDevice = ({ name, options, disabled, multiple = false, onCh
     return (jsxs("div", { ref: activatorRef, children: [renderActivator({
                 ...sizeProp,
                 ...activatorProps,
-                onClick: onActivatorClick,
+                toggleOptions,
                 selectedOptions,
                 multiple,
                 searchValue,

package/SelectForMobileDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectForMobileDevice.js","sources":["../src/SelectForMobileDevice.tsx"],"sourcesContent":["import { type ReactElement, useCallback, cloneElement, RefObject } from 'react';\n\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { renderSelectActivator } from '@hh.ru/magritte-ui-select/SelectActivator';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport type { InternalSelectProps, RenderItem, OnChangeAction } from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './styles.less';\n\nexport const SelectForMobileDevice = <T, MultipleType extends boolean>({\n    name,\n    options,\n    disabled,\n    multiple = false,\n    onChange,\n    onActivatorClick,\n    renderItem,\n    renderActivator = renderSelectActivator,\n    values,\n    visible,\n    onOptionsListClose,\n    selectedOptions,\n    searchable,\n    clearSelectedValues,\n    setCommitChanges,\n    trls,\n    bottomSheetHeight,\n    optionsListRef,\n    activatorRef,\n    searchValue,\n    showClearButton,\n    showCloseButtonInNavigationBar,\n    setSearchValue,\n    size,\n    elevatePlaceholder,\n    setLastValues,\n    placeholder,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    isLimitExceeded,\n    onBottomSheetClose,\n    onBottomSheetOpen,\n    ...activatorProps\n}: InternalSelectProps<T, MultipleType> & {\n    showCloseButtonInNavigationBar: boolean;\n    renderItem?: RenderItem<T>;\n}): ReactElement => {\n    const sizeProp =\n        size === 'large' ? ({ size: 'large', elevatePlaceholder } as const) : ({ size: 'medium' } as const);\n\n    const clearButton =\n        showClearButton &&\n        _clearButton &&\n        cloneElement(_clearButton, {\n            'data-qa': 'magritte-select-clear-action-on-xs',\n            onClick: clearSelectedValues,\n        });\n\n    const applyButton =\n        multiple &&\n        _applyChangesButton &&\n        cloneElement(_applyChangesButton, {\n            'data-qa': 'magritte-select-apply-on-xs',\n            onClick: () => {\n                setCommitChanges(performance.now());\n                onOptionsListClose();\n            },\n        });\n\n    const handleChange: OnChangeAction = useCallback(\n        (...args) => {\n            if (!multiple) {\n                setCommitChanges(performance.now());\n                onOptionsListClose();\n            }\n            onChange(...args);\n        },\n        [onChange, setCommitChanges, onOptionsListClose, multiple]\n    );\n\n    return (\n        <div ref={activatorRef as RefObject<HTMLDivElement>}>\n            {renderActivator({\n                ...sizeProp,\n                ...activatorProps,\n                onClick: onActivatorClick,\n                selectedOptions,\n                multiple,\n                searchValue,\n                setSearchValue,\n                visible,\n                disabled,\n                placeholder,\n            })}\n            <BottomSheet\n                allowScrollWhileFocused\n                onAppear={onBottomSheetOpen}\n                onAfterExit={onBottomSheetClose}\n                keyboardOverlaysContent={false}\n                visible={visible}\n                onClose={() => {\n                    onOptionsListClose();\n                    setLastValues();\n                }}\n                ref={optionsListRef as React.RefObject<HTMLDivElement>}\n                height={searchable ? 'full-screen' : bottomSheetHeight}\n                header={\n                    <NavigationBar\n                        title={placeholder}\n                        right={\n                            showCloseButtonInNavigationBar\n                                ? [\n                                      {\n                                          key: 'close',\n                                          icon: CrossOutlinedSize24,\n                                          onClick: onOptionsListClose,\n                                          'data-qa': 'bottom-sheet-navigation-close',\n                                      },\n                                  ]\n                                : undefined\n                        }\n                        options={\n                            searchable && (\n                                <SearchInput\n                                    clearable\n                                    value={searchValue}\n                                    onChange={setSearchValue}\n                                    data-qa=\"bottom-sheet-navigation-input\"\n                                    autoComplete=\"off\"\n                                />\n                            )\n                        }\n                    />\n                }\n                footer={\n                    multiple || showClearButton ? (\n                        <BottomSheetFooter>\n                            {clearButton}\n                            {applyButton}\n                        </BottomSheetFooter>\n                    ) : null\n                }\n            >\n                <div\n                    data-qa=\"magritte-select-option-list-on-xs\"\n                    className={`${styles.selectOptions} ${styles['select-options-xs']}`}\n                >\n                    {options?.map((option) => {\n                        const checked = getChecked(option.value, values, multiple);\n                        const props = {\n                            ...option,\n                            name,\n                            onChange: handleChange,\n                            checked,\n                            multiple,\n                            isXS: true,\n                            isLimitExceeded,\n                        };\n                        return (\n                            <SelectOption\n                                key={option.value}\n                                {...props}\n                                onOptionsListClose={onOptionsListClose}\n                                render={renderItem}\n                            />\n                        );\n                    })}\n                </div>\n            </BottomSheet>\n        </div>\n    );\n};\n\nSelectForMobileDevice.displayName = 'SelectForMobileDevice';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaa,MAAA,qBAAqB,GAAG,CAAkC,EACnE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,eAAe,GAAG,qBAAqB,EACvC,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,IAAI,EACJ,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,8BAA8B,EAC9B,cAAc,EACd,IAAI,EACJ,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,kBAAkB,EAAE,mBAAmB,EACvC,WAAW,EAAE,YAAY,EACzB,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,GAAG,cAAc,EAIpB,KAAkB;IACf,MAAM,QAAQ,GACV,IAAI,KAAK,OAAO,GAAI,EAAE,IAAI,EAAE,OAAO,EAAE,kBAAkB,EAAY,GAAI,EAAE,IAAI,EAAE,QAAQ,EAAY,CAAC;IAExG,MAAM,WAAW,GACb,eAAe;QACf,YAAY;QACZ,YAAY,CAAC,YAAY,EAAE;AACvB,YAAA,SAAS,EAAE,oCAAoC;AAC/C,YAAA,OAAO,EAAE,mBAAmB;AAC/B,SAAA,CAAC,CAAC;IAEP,MAAM,WAAW,GACb,QAAQ;QACR,mBAAmB;QACnB,YAAY,CAAC,mBAAmB,EAAE;AAC9B,YAAA,SAAS,EAAE,6BAA6B;YACxC,OAAO,EAAE,MAAK;AACV,gBAAA,gBAAgB,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;AACpC,gBAAA,kBAAkB,EAAE,CAAC;aACxB;AACJ,SAAA,CAAC,CAAC;IAEP,MAAM,YAAY,GAAmB,WAAW,CAC5C,CAAC,GAAG,IAAI,KAAI;QACR,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,gBAAgB,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;AACpC,YAAA,kBAAkB,EAAE,CAAC;AACxB,SAAA;AACD,QAAA,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;KACrB,EACD,CAAC,QAAQ,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,QAAQ,CAAC,CAC7D,CAAC;AAEF,IAAA,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,YAAyC,EAAA,QAAA,EAAA,CAC9C,eAAe,CAAC;AACb,gBAAA,GAAG,QAAQ;AACX,gBAAA,GAAG,cAAc;AACjB,gBAAA,OAAO,EAAE,gBAAgB;gBACzB,eAAe;gBACf,QAAQ;gBACR,WAAW;gBACX,cAAc;gBACd,OAAO;gBACP,QAAQ;gBACR,WAAW;aACd,CAAC,EACFC,GAAC,CAAA,WAAW,EACR,EAAA,uBAAuB,QACvB,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EAAE,kBAAkB,EAC/B,uBAAuB,EAAE,KAAK,EAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAK;AACV,oBAAA,kBAAkB,EAAE,CAAC;AACrB,oBAAA,aAAa,EAAE,CAAC;AACpB,iBAAC,EACD,GAAG,EAAE,cAAiD,EACtD,MAAM,EAAE,UAAU,GAAG,aAAa,GAAG,iBAAiB,EACtD,MAAM,EACFA,GAAA,CAAC,aAAa,EAAA,EACV,KAAK,EAAE,WAAW,EAClB,KAAK,EACD,8BAA8B;AAC1B,0BAAE;AACI,4BAAA;AACI,gCAAA,GAAG,EAAE,OAAO;AACZ,gCAAA,IAAI,EAAE,mBAAmB;AACzB,gCAAA,OAAO,EAAE,kBAAkB;AAC3B,gCAAA,SAAS,EAAE,+BAA+B;AAC7C,6BAAA;AACJ,yBAAA;AACH,0BAAE,SAAS,EAEnB,OAAO,EACH,UAAU,KACNA,GAAA,CAAC,WAAW,EACR,EAAA,SAAS,EACT,IAAA,EAAA,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EAChB,SAAA,EAAA,+BAA+B,EACvC,YAAY,EAAC,KAAK,EAAA,CACpB,CACL,EAAA,CAEP,EAEN,MAAM,EACF,QAAQ,IAAI,eAAe,IACvBD,KAAC,iBAAiB,EAAA,EAAA,QAAA,EAAA,CACb,WAAW,EACX,WAAW,CACI,EAAA,CAAA,IACpB,IAAI,EAAA,QAAA,EAGZC,GACY,CAAA,KAAA,EAAA,EAAA,SAAA,EAAA,mCAAmC,EAC3C,SAAS,EAAE,CAAG,EAAA,MAAM,CAAC,aAAa,CAAA,CAAA,EAAI,MAAM,CAAC,mBAAmB,CAAC,CAAA,CAAE,EAElE,QAAA,EAAA,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,KAAI;AACrB,wBAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAC3D,wBAAA,MAAM,KAAK,GAAG;AACV,4BAAA,GAAG,MAAM;4BACT,IAAI;AACJ,4BAAA,QAAQ,EAAE,YAAY;4BACtB,OAAO;4BACP,QAAQ;AACR,4BAAA,IAAI,EAAE,IAAI;4BACV,eAAe;yBAClB,CAAC;AACF,wBAAA,QACIA,GAAC,CAAA,YAAY,OAEL,KAAK,EACT,kBAAkB,EAAE,kBAAkB,EACtC,MAAM,EAAE,UAAU,EAHb,EAAA,MAAM,CAAC,KAAK,CAInB,EACJ;AACN,qBAAC,CAAC,EAAA,CACA,EACI,CAAA,CAAA,EAAA,CACZ,EACR;AACN,EAAE;AAEF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
+{"version":3,"file":"SelectForMobileDevice.js","sources":["../src/SelectForMobileDevice.tsx"],"sourcesContent":["import { type ReactElement, useCallback, cloneElement, RefObject } from 'react';\n\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { renderSelectActivator } from '@hh.ru/magritte-ui-select/SelectActivator';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport type { InternalSelectProps, RenderItem, OnChangeAction } from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './styles.less';\n\nexport const SelectForMobileDevice = <T, MultipleType extends boolean>({\n    name,\n    options,\n    disabled,\n    multiple = false,\n    onChange,\n    toggleOptions,\n    renderItem,\n    renderActivator = renderSelectActivator,\n    values,\n    visible,\n    onOptionsListClose,\n    selectedOptions,\n    searchable,\n    clearSelectedValues,\n    setCommitChanges,\n    trls,\n    bottomSheetHeight,\n    optionsListRef,\n    activatorRef,\n    searchValue,\n    showClearButton,\n    showCloseButtonInNavigationBar,\n    setSearchValue,\n    size,\n    elevatePlaceholder,\n    setLastValues,\n    placeholder,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    isLimitExceeded,\n    onBottomSheetClose,\n    onBottomSheetOpen,\n    ...activatorProps\n}: InternalSelectProps<T, MultipleType> & {\n    showCloseButtonInNavigationBar: boolean;\n    renderItem?: RenderItem<T>;\n}): ReactElement => {\n    const sizeProp =\n        size === 'large' ? ({ size: 'large', elevatePlaceholder } as const) : ({ size: 'medium' } as const);\n\n    const clearButton =\n        showClearButton &&\n        _clearButton &&\n        cloneElement(_clearButton, {\n            'data-qa': 'magritte-select-clear-action-on-xs',\n            onClick: clearSelectedValues,\n        });\n\n    const applyButton =\n        multiple &&\n        _applyChangesButton &&\n        cloneElement(_applyChangesButton, {\n            'data-qa': 'magritte-select-apply-on-xs',\n            onClick: () => {\n                setCommitChanges(performance.now());\n                onOptionsListClose();\n            },\n        });\n\n    const handleChange: OnChangeAction = useCallback(\n        (...args) => {\n            if (!multiple) {\n                setCommitChanges(performance.now());\n                onOptionsListClose();\n            }\n            onChange(...args);\n        },\n        [onChange, setCommitChanges, onOptionsListClose, multiple]\n    );\n\n    return (\n        <div ref={activatorRef as RefObject<HTMLDivElement>}>\n            {renderActivator({\n                ...sizeProp,\n                ...activatorProps,\n                toggleOptions,\n                selectedOptions,\n                multiple,\n                searchValue,\n                setSearchValue,\n                visible,\n                disabled,\n                placeholder,\n            })}\n            <BottomSheet\n                allowScrollWhileFocused\n                onAppear={onBottomSheetOpen}\n                onAfterExit={onBottomSheetClose}\n                keyboardOverlaysContent={false}\n                visible={visible}\n                onClose={() => {\n                    onOptionsListClose();\n                    setLastValues();\n                }}\n                ref={optionsListRef as React.RefObject<HTMLDivElement>}\n                height={searchable ? 'full-screen' : bottomSheetHeight}\n                header={\n                    <NavigationBar\n                        title={placeholder}\n                        right={\n                            showCloseButtonInNavigationBar\n                                ? [\n                                      {\n                                          key: 'close',\n                                          icon: CrossOutlinedSize24,\n                                          onClick: onOptionsListClose,\n                                          'data-qa': 'bottom-sheet-navigation-close',\n                                      },\n                                  ]\n                                : undefined\n                        }\n                        options={\n                            searchable && (\n                                <SearchInput\n                                    clearable\n                                    value={searchValue}\n                                    onChange={setSearchValue}\n                                    data-qa=\"bottom-sheet-navigation-input\"\n                                    autoComplete=\"off\"\n                                />\n                            )\n                        }\n                    />\n                }\n                footer={\n                    multiple || showClearButton ? (\n                        <BottomSheetFooter>\n                            {clearButton}\n                            {applyButton}\n                        </BottomSheetFooter>\n                    ) : null\n                }\n            >\n                <div\n                    data-qa=\"magritte-select-option-list-on-xs\"\n                    className={`${styles.selectOptions} ${styles['select-options-xs']}`}\n                >\n                    {options?.map((option) => {\n                        const checked = getChecked(option.value, values, multiple);\n                        const props = {\n                            ...option,\n                            name,\n                            onChange: handleChange,\n                            checked,\n                            multiple,\n                            isXS: true,\n                            isLimitExceeded,\n                        };\n                        return (\n                            <SelectOption\n                                key={option.value}\n                                {...props}\n                                onOptionsListClose={onOptionsListClose}\n                                render={renderItem}\n                            />\n                        );\n                    })}\n                </div>\n            </BottomSheet>\n        </div>\n    );\n};\n\nSelectForMobileDevice.displayName = 'SelectForMobileDevice';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/SelectOption.d.ts

@@ -4,5 +4,5 @@ declare const SelectOptionBase: {
     <T>({ label, type, input, isXS }: SelectOptionProps<T>): ReactElement;
     displayName: string;
 };
-declare const SelectOption: <T>({ checked, multiple, name, value, disabled, onChange, render, type, isFirstActiveElement, isLastActiveElement, isLimitExceeded, onOptionsListClose, ...props }: SelectOptionWrapperProps<T>) => ReactElement;
+declare const SelectOption: <T>({ checked, multiple, name, value, disabled, onChange, render, type, isLimitExceeded, onOptionsListClose, ...props }: SelectOptionWrapperProps<T>) => ReactElement;
 export { SelectOptionBase, SelectOption };

package/SelectOption.js

@@ -18,7 +18,7 @@ const SelectOptionBase = ({ label, type, input, isXS = false }) => {
     return (jsx(Cell, { Element: "div", align: "top", ...cellProps, children: jsx(CellText, { maxLines: 1, children: label }) }));
 };
 SelectOptionBase.displayName = 'SelectOptionBase';
-const SelectOption = ({ checked, multiple, name, value, disabled, onChange, render = SelectOptionBase, type, isFirstActiveElement, isLastActiveElement, isLimitExceeded, onOptionsListClose, ...props }) => {
+const SelectOption = ({ checked, multiple, name, value, disabled, onChange, render = SelectOptionBase, type, isLimitExceeded, onOptionsListClose, ...props }) => {
     const renderProps = { ...props, checked, multiple, name, value, onChange, render, type, onOptionsListClose };
     const [focusVisible, setFocusVisible] = useState(false);
     const lockFocusVisibleAfterClickRef = useRef(false);
@@ -30,10 +30,10 @@ const SelectOption = ({ checked, multiple, name, value, disabled, onChange, rend
         } })) : (jsx(Radio, { "data-focus-visible-skip": "true", tabIndex: -1, name: name, value: value, checked: checked, onChange: (event) => {
             onChange(value, event.target.checked);
         } }));
-    const firstActiveElementProp = isFirstActiveElement ? { 'data-magritte-option-first-active-element': 'true' } : {};
-    const lastActiveElementProps = isLastActiveElement ? { 'data-magritte-option-last-active-element': 'true' } : {};
-    return (jsx(CheckableCardElement, { ...firstActiveElementProp, ...lastActiveElementProps, Element: "label", padding: 16, borderRadius: 12, flexible: false, checked: checked, "data-magritte-option": value, focusVisible: focusVisible, "data-qa": `magritte-select-option-${value}`, disabled: disabled || (isLimitExceeded && !checked), toneHover: true, onClick: () => {
-            !multiple && onOptionsListClose();
+    return (jsx(CheckableCardElement, { Element: "label", padding: 16, borderRadius: 12, flexible: false, checked: checked, "data-magritte-option": value, focusVisible: focusVisible, "data-qa": `magritte-select-option-${value}`, disabled: disabled || (isLimitExceeded && !checked), toneHover: true, onClick: (event) => {
+            if (event.target.matches('input') && !multiple) {
+                onOptionsListClose();
+            }
         }, onMouseDown: () => {
             lockFocusVisibleAfterClickRef.current = true;
         }, onKeyDown: (event) => {

package/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../src/SelectOption.tsx"],"sourcesContent":["import { type ReactElement, useState, useRef } from 'react';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';\nimport type { SelectOptionProps, SelectOptionWrapperProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nconst SelectOptionBase = <T,>({ label, type, input, isXS = false }: SelectOptionProps<T>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <Card paddingTop={8} paddingLeft={16} paddingRight={16}>\n                <CellText maxLines={1} style=\"secondary\">\n                    {label}\n                </CellText>\n            </Card>\n        );\n    }\n\n    const cellProps = {\n        [isXS ? 'right' : 'left']: input,\n    };\n\n    return (\n        <Cell Element=\"div\" align=\"top\" {...cellProps}>\n            <CellText maxLines={1}>{label}</CellText>\n        </Cell>\n    );\n};\n\nSelectOptionBase.displayName = 'SelectOptionBase';\n\nconst SelectOption = <T,>({\n    checked,\n    multiple,\n    name,\n    value,\n    disabled,\n    onChange,\n    render = SelectOptionBase,\n    type,\n    isFirstActiveElement,\n    isLastActiveElement,\n    isLimitExceeded,\n    onOptionsListClose,\n    ...props\n}: SelectOptionWrapperProps<T>): ReactElement => {\n    const renderProps = { ...props, checked, multiple, name, value, onChange, render, type, onOptionsListClose };\n    const [focusVisible, setFocusVisible] = useState(false);\n    const lockFocusVisibleAfterClickRef = useRef(false);\n\n    if (type === 'delimiter') {\n        return <Text typography=\"label-3-regular\">{render(renderProps)}</Text>;\n    }\n    const input = multiple ? (\n        <Checkbox\n            data-focus-visible-skip=\"true\"\n            tabIndex={-1}\n            name={name}\n            value={value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    ) : (\n        <Radio\n            data-focus-visible-skip=\"true\"\n            tabIndex={-1}\n            name={name}\n            value={value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    );\n\n    const firstActiveElementProp = isFirstActiveElement ? { 'data-magritte-option-first-active-element': 'true' } : {};\n    const lastActiveElementProps = isLastActiveElement ? { 'data-magritte-option-last-active-element': 'true' } : {};\n\n    return (\n        <CheckableCardElement\n            {...firstActiveElementProp}\n            {...lastActiveElementProps}\n            Element=\"label\"\n            padding={16}\n            borderRadius={12}\n            flexible={false}\n            checked={checked}\n            data-magritte-option={value}\n            focusVisible={focusVisible}\n            data-qa={`magritte-select-option-${value}`}\n            disabled={disabled || (isLimitExceeded && !checked)}\n            toneHover\n            onClick={() => {\n                !multiple && onOptionsListClose();\n            }}\n            onMouseDown={() => {\n                lockFocusVisibleAfterClickRef.current = true;\n            }}\n            onKeyDown={(event) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    onChange(value, !checked);\n                    /* Нужно чтобы отменять автоскролл */\n                    event.preventDefault();\n                    setFocusVisible(true);\n                }\n            }}\n            onFocus={(event) => {\n                if (!event.target.dataset.focusVisibleSkip) {\n                    return;\n                }\n\n                if (lockFocusVisibleAfterClickRef.current) {\n                    lockFocusVisibleAfterClickRef.current = false;\n                    return;\n                }\n\n                setFocusVisible(true);\n            }}\n            onBlur={() => {\n                if (focusVisible) {\n                    setFocusVisible(false);\n                }\n            }}\n        >\n            {render({ ...renderProps, input })}\n        </CheckableCardElement>\n    );\n};\n\nexport { SelectOptionBase, SelectOption };\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"SelectOption.js","sources":["../src/SelectOption.tsx"],"sourcesContent":["import { type ReactElement, useState, useRef } from 'react';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';\nimport type { SelectOptionProps, SelectOptionWrapperProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nconst SelectOptionBase = <T,>({ label, type, input, isXS = false }: SelectOptionProps<T>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <Card paddingTop={8} paddingLeft={16} paddingRight={16}>\n                <CellText maxLines={1} style=\"secondary\">\n                    {label}\n                </CellText>\n            </Card>\n        );\n    }\n\n    const cellProps = {\n        [isXS ? 'right' : 'left']: input,\n    };\n\n    return (\n        <Cell Element=\"div\" align=\"top\" {...cellProps}>\n            <CellText maxLines={1}>{label}</CellText>\n        </Cell>\n    );\n};\n\nSelectOptionBase.displayName = 'SelectOptionBase';\n\nconst SelectOption = <T,>({\n    checked,\n    multiple,\n    name,\n    value,\n    disabled,\n    onChange,\n    render = SelectOptionBase,\n    type,\n    isLimitExceeded,\n    onOptionsListClose,\n    ...props\n}: SelectOptionWrapperProps<T>): ReactElement => {\n    const renderProps = { ...props, checked, multiple, name, value, onChange, render, type, onOptionsListClose };\n    const [focusVisible, setFocusVisible] = useState(false);\n    const lockFocusVisibleAfterClickRef = useRef(false);\n\n    if (type === 'delimiter') {\n        return <Text typography=\"label-3-regular\">{render(renderProps)}</Text>;\n    }\n    const input = multiple ? (\n        <Checkbox\n            data-focus-visible-skip=\"true\"\n            tabIndex={-1}\n            name={name}\n            value={value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    ) : (\n        <Radio\n            data-focus-visible-skip=\"true\"\n            tabIndex={-1}\n            name={name}\n            value={value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    );\n\n    return (\n        <CheckableCardElement\n            Element=\"label\"\n            padding={16}\n            borderRadius={12}\n            flexible={false}\n            checked={checked}\n            data-magritte-option={value}\n            focusVisible={focusVisible}\n            data-qa={`magritte-select-option-${value}`}\n            disabled={disabled || (isLimitExceeded && !checked)}\n            toneHover\n            onClick={(event) => {\n                if ((event.target as HTMLElement).matches('input') && !multiple) {\n                    onOptionsListClose();\n                }\n            }}\n            onMouseDown={() => {\n                lockFocusVisibleAfterClickRef.current = true;\n            }}\n            onKeyDown={(event) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    onChange(value, !checked);\n                    /* Нужно чтобы отменять автоскролл */\n                    event.preventDefault();\n                    setFocusVisible(true);\n                }\n            }}\n            onFocus={(event) => {\n                if (!event.target.dataset.focusVisibleSkip) {\n                    return;\n                }\n\n                if (lockFocusVisibleAfterClickRef.current) {\n                    lockFocusVisibleAfterClickRef.current = false;\n                    return;\n                }\n\n                setFocusVisible(true);\n            }}\n            onBlur={() => {\n                if (focusVisible) {\n                    setFocusVisible(false);\n                }\n            }}\n        >\n            {render({ ...renderProps, input })}\n        </CheckableCardElement>\n    );\n};\n\nexport { SelectOptionBase, SelectOption };\n"],"names":["_jsx"],"mappings":"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"}

package/UncontrolledSelect.js

@@ -11,7 +11,7 @@ import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-drop';
 import '@hh.ru/magritte-ui-icon/icon';
-import './SelectActivator-7f53c708.js';
+import './SelectActivator-125a6b32.js';
 import 'classnames';
 import '@hh.ru/magritte-ui-counter';
 import '@hh.ru/magritte-ui-form-helper';

package/index.css

@@ -76,7 +76,7 @@
   --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#474747;
   --magritte-color-component-input-icon-content-v18-1-2:#ABABAB;
 }
-.magritte-select-activator___9XXwA_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0{
   display:flex;
   flex:1 0 0;
   align-items:center;
@@ -91,152 +91,156 @@
   user-select:none;
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9:focus{
+.magritte-select-activator___9XXwA_5-3-0:focus{
   background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
   box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9:focus .magritte-select-activator-label___Mc49R_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0:focus .magritte-select-activator-label___Mc49R_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9:focus .magritte-select-activator-placeholder___7ODSn_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0:focus .magritte-select-activator-placeholder___7ODSn_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9:focus .magritte-select-activator-value___wDbVR_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0:focus .magritte-select-activator-value___wDbVR_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9:focus .magritte-select-activator-chevron___DHIUH_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0:focus .magritte-select-activator-chevron___DHIUH_5-3-0{
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9.focus-visible{
+.magritte-select-activator___9XXwA_5-3-0.focus-visible{
   outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2) solid 4px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-9:hover{
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0){
+    cursor:pointer;
+  }
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus){
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
-    cursor:pointer;
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-label___Mc49R_5-2-9{
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-label___Mc49R_5-3-0{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-placeholder___7ODSn_5-2-9{
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-placeholder___7ODSn_5-3-0{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-value___wDbVR_5-2-9{
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-value___wDbVR_5-3-0{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-chevron___DHIUH_5-2-9{
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-chevron___DHIUH_5-3-0{
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-9:hover{
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0){
+    cursor:pointer;
+  }
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus){
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
-    cursor:pointer;
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-label___Mc49R_5-2-9{
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-label___Mc49R_5-3-0{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-placeholder___7ODSn_5-2-9{
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-placeholder___7ODSn_5-3-0{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-value___wDbVR_5-2-9{
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-value___wDbVR_5-3-0{
     --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-9:hover .magritte-select-activator-chevron___DHIUH_5-2-9{
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-3-0:hover:not(.magritte-select-activator-disabled___mYKi2_5-3-0):not(:focus) .magritte-select-activator-chevron___DHIUH_5-3-0{
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
   }
 }
-.magritte-select-activator___9XXwA_5-2-9.magritte-select-activator-disabled___mYKi2_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0.magritte-select-activator-disabled___mYKi2_5-3-0{
   cursor:not-allowed;
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9.magritte-select-activator-disabled___mYKi2_5-2-9 .magritte-select-activator-item___JsY4v_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0.magritte-select-activator-disabled___mYKi2_5-3-0 .magritte-select-activator-item___JsY4v_5-3-0{
   --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v18-1-2);
   --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9.magritte-select-activator-disabled___mYKi2_5-2-9 .magritte-select-activator-label___Mc49R_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0.magritte-select-activator-disabled___mYKi2_5-3-0 .magritte-select-activator-label___Mc49R_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9.magritte-select-activator-disabled___mYKi2_5-2-9 .magritte-select-activator-placeholder___7ODSn_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0.magritte-select-activator-disabled___mYKi2_5-3-0 .magritte-select-activator-placeholder___7ODSn_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9.magritte-select-activator-disabled___mYKi2_5-2-9 .magritte-select-activator-value___wDbVR_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0.magritte-select-activator-disabled___mYKi2_5-3-0 .magritte-select-activator-value___wDbVR_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-9.magritte-select-activator-disabled___mYKi2_5-2-9 .magritte-select-activator-chevron___DHIUH_5-2-9{
+.magritte-select-activator___9XXwA_5-3-0.magritte-select-activator-disabled___mYKi2_5-3-0 .magritte-select-activator-chevron___DHIUH_5-3-0{
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-9{
+.magritte-select-activator-invalid___IdlRp_5-3-0{
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-9 .magritte-select-activator-label___Mc49R_5-2-9{
+.magritte-select-activator-invalid___IdlRp_5-3-0 .magritte-select-activator-label___Mc49R_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-9 .magritte-select-activator-placeholder___7ODSn_5-2-9{
+.magritte-select-activator-invalid___IdlRp_5-3-0 .magritte-select-activator-placeholder___7ODSn_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-9 .magritte-select-activator-value___wDbVR_5-2-9{
+.magritte-select-activator-invalid___IdlRp_5-3-0 .magritte-select-activator-value___wDbVR_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-9 .magritte-select-activator-chevron___DHIUH_5-2-9{
+.magritte-select-activator-invalid___IdlRp_5-3-0 .magritte-select-activator-chevron___DHIUH_5-3-0{
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
 }
-.magritte-select-activator-size-large___MIXAH_5-2-9{
+.magritte-select-activator-size-large___MIXAH_5-3-0{
   padding:16px;
 }
-.magritte-select-activator-with-label___DwcKr_5-2-9{
+.magritte-select-activator-with-label___DwcKr_5-3-0{
   padding:8px 16px;
 }
-.magritte-select-activator-label-root___eYIWQ_5-2-9{
+.magritte-select-activator-label-root___eYIWQ_5-3-0{
   display:flex;
   flex-direction:column;
   overflow:hidden;
 }
-.magritte-select-activator-item___JsY4v_5-2-9{
+.magritte-select-activator-item___JsY4v_5-3-0{
   display:flex;
   width:fit-content;
   gap:12px;
   --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v18-1-2);
   --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v18-1-2);
 }
-.magritte-select-activator-has-counter___k2Kc2_5-2-9{
+.magritte-select-activator-has-counter___k2Kc2_5-3-0{
   min-width:96px;
 }
-.magritte-select-activator-ellipsis___16zkC_5-2-9{
+.magritte-select-activator-ellipsis___16zkC_5-3-0{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
 }
-.magritte-select-activator-placeholder___7ODSn_5-2-9{
+.magritte-select-activator-placeholder___7ODSn_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-placeholder-v18-1-2);
 }
-.magritte-select-activator-label___Mc49R_5-2-9{
+.magritte-select-activator-label___Mc49R_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-label-v18-1-2);
 }
-.magritte-select-activator-value___wDbVR_5-2-9{
+.magritte-select-activator-value___wDbVR_5-3-0{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v18-1-2);
 }
-.magritte-select-activator-chevron___DHIUH_5-2-9{
+.magritte-select-activator-chevron___DHIUH_5-3-0{
   height:24px;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-select-activator-chevron-animation-timeout___y19bf_5-2-9,
-  .magritte-select-activator-chevron___DHIUH_5-2-9{
+  .magritte-select-activator-chevron-animation-timeout___y19bf_5-3-0,
+  .magritte-select-activator-chevron___DHIUH_5-3-0{
     transform:rotate(0);
     transition-property:transform;
     transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
     transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2);
     --animation-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
   }
-  .magritte-select-activator-chevron-up___gtPyi_5-2-9{
+  .magritte-select-activator-chevron-up___gtPyi_5-3-0{
     transform:rotate(-180deg);
   }
 }
-.magritte-select-options___y2KYZ_5-2-9{
+.magritte-select-options___y2KYZ_5-3-0{
   display:flex;
   width:100%;
   gap:12px;
@@ -246,9 +250,9 @@
   align-items:stretch;
   flex-direction:column;
 }
-.magritte-select-options-xs___BiiPo_5-2-9{
+.magritte-select-options-xs___BiiPo_5-3-0{
   margin-bottom:0;
 }
-.magritte-optionDelimiter___OaKsB_5-2-9{
+.magritte-optionDelimiter___OaKsB_5-3-0{
   padding:16px 8px 0;
 }

package/index.js

@@ -1,11 +1,12 @@
 import './index.css';
-export { S as SelectActivator } from './SelectActivator-7f53c708.js';
+export { S as SelectActivator } from './SelectActivator-125a6b32.js';
 export { UncontrolledSelect } from './UncontrolledSelect.js';
 export { Select } from './Select.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-counter';
 import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
@@ -14,7 +15,6 @@ import '@hh.ru/magritte-ui-typography';
 import '@hh.ru/magritte-common-fuzzy-search';
 import '@hh.ru/magritte-ui-breakpoint';
 import './SelectForDesktopDevice.js';
-import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-drop';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-select",
-  "version": "5.2.9",
+  "version": "5.3.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -20,21 +20,21 @@
   },
   "dependencies": {
     "@hh.ru/magritte-common-fuzzy-search": "1.0.4",
-    "@hh.ru/magritte-common-keyboard": "3.0.2",
+    "@hh.ru/magritte-common-keyboard": "4.0.0",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
     "@hh.ru/magritte-design-tokens": "18.1.2",
-    "@hh.ru/magritte-ui-bottom-sheet": "4.1.27",
+    "@hh.ru/magritte-ui-bottom-sheet": "4.1.29",
     "@hh.ru/magritte-ui-breakpoint": "4.0.2",
-    "@hh.ru/magritte-ui-card": "6.0.5",
+    "@hh.ru/magritte-ui-card": "6.0.6",
     "@hh.ru/magritte-ui-cell": "2.2.12",
-    "@hh.ru/magritte-ui-checkable-card": "3.0.7",
+    "@hh.ru/magritte-ui-checkable-card": "3.0.9",
     "@hh.ru/magritte-ui-checkbox-radio": "3.0.3",
     "@hh.ru/magritte-ui-counter": "4.0.10",
-    "@hh.ru/magritte-ui-drop": "5.1.2",
+    "@hh.ru/magritte-ui-drop": "6.0.0",
     "@hh.ru/magritte-ui-form-helper": "1.0.3",
     "@hh.ru/magritte-ui-icon": "7.1.7",
-    "@hh.ru/magritte-ui-input": "5.0.20",
-    "@hh.ru/magritte-ui-navigation-bar": "4.1.12",
+    "@hh.ru/magritte-ui-input": "5.0.21",
+    "@hh.ru/magritte-ui-navigation-bar": "4.1.14",
     "@hh.ru/magritte-ui-typography": "3.0.10"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a72846c6f393720276c3a8abcbd754142906f5d1"
+  "gitHead": "cb9ae2f8bc2a076dcb5e45ab962cd0ff27c92f1d"
 }

package/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject, MutableRefObject, Dispatch, SetStateAction, ReactElement } from 'react';
+import type { ReactNode, RefObject, Dispatch, SetStateAction, ReactElement } from 'react';
 import { BottomSheetHeight } from '@hh.ru/magritte-ui-bottom-sheet/src';
 export interface BaseSelectActivatorProps<T> {
     /** Текст плейсхолдера */
@@ -20,7 +20,7 @@ export interface BaseSelectActivatorProps<T> {
     widthEqualToActivator?: boolean;
     searchValue: string;
     counter?: number;
-    onClick: (visible: boolean) => void;
+    toggleOptions: (visible: boolean) => void;
     multiple: boolean;
     onChange?: (values: string[]) => void;
     /** Обработчик события получения фокуса */
@@ -32,7 +32,6 @@ export interface BaseSelectActivatorProps<T> {
     selectedOptions: SelectOption<T>[];
     visible?: boolean;
     dropRef?: RefObject<HTMLDivElement>;
-    searchRef?: MutableRefObject<HTMLInputElement | null>;
     /** Обработчик события открытия дропа */
     onDropOpen?: VoidFunction;
     /** Обработчик события закрытия дропа */
@@ -41,6 +40,8 @@ export interface BaseSelectActivatorProps<T> {
     onBottomSheetOpen?: VoidFunction;
     /** Обработчик события закрытия боттомшита */
     onBottomSheetClose?: VoidFunction;
+    forcedState?: 'focus' | 'focusAndSelect' | null;
+    setForcedState?: (state: 'focus' | 'focusAndSelect' | null) => void;
 }
 export interface LargeSelectProps {
     /** Размер cелекта, как и у инпута флаг elevatePlaceholder можно задать только для large */
@@ -78,8 +79,6 @@ export interface RenderSelectOption<T> {
 export type SelectOptionWrapperProps<T> = Omit<SelectOptionProps<T>, 'input'> & {
     render?: RenderSelectOption<T>;
     multiple: boolean;
-    isFirstActiveElement?: boolean;
-    isLastActiveElement?: boolean;
 };
 export interface OnChangeAction {
     (value: string, needToPut: boolean): void;
@@ -113,7 +112,7 @@ export type SelectBaseProps<T = unknown> = {
     dropHost?: RefObject<HTMLElement>;
     /** Максимальное количество выбранных опций */
     maxSelectedOptions?: number;
-} & (LargeSelectProps | MediumSelectProps) & Omit<SelectActivatorProps<T>, 'searchValue' | 'counter' | 'onClick' | 'multiple' | 'onChange' | 'selectedOptions' | 'visible' | 'dropRef' | 'searchRef' | 'setSearchValue' | 'size' | 'elevatePlaceholder' | 'optionsCount'>;
+} & (LargeSelectProps | MediumSelectProps) & Omit<SelectActivatorProps<T>, 'searchValue' | 'counter' | 'toggleOptions' | 'multiple' | 'onChange' | 'selectedOptions' | 'visible' | 'dropRef' | 'searchRef' | 'setSearchValue' | 'size' | 'elevatePlaceholder' | 'optionsCount'>;
 type ButtonTrls<ShowClearButtonType extends boolean> = [ShowClearButtonType] extends [true] ? {
     /** Перевод для card/cell очистки списка в Drop */
     trls: {
@@ -164,7 +163,7 @@ type ContolledSelectConditionalProps<ShowClearButtonType extends boolean, Multip
 export type UncontrolledSelectProps<ShowClearButtonType extends boolean, MultipleType extends boolean, T = unknown> = SelectBaseProps<T> & UncontrolledSelectConditionalProps<ShowClearButtonType, MultipleType>;
 export type SelectProps<ShowClearButtonType extends boolean, MultipleType extends boolean, T = unknown> = SelectBaseProps<T> & ContolledSelectConditionalProps<ShowClearButtonType, MultipleType>;
 export type InternalSelectProps<T, MultipleType extends boolean> = Omit<SelectProps<boolean, boolean, T>, 'value' | 'onChange' | 'renderItemForDesktop' | 'renderItem'> & {
-    onActivatorClick: (visible: boolean) => void;
+    toggleOptions: (visible: boolean) => void;
     selectedOptions: SelectOption<T>[];
     values: [MultipleType] extends [true] ? string[] : string;
     visible: boolean;

package/useSelectOptionsList.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface HookReturnType {
-    onActivatorClick: (show: boolean) => void;
+    toggleOptions: (show: boolean) => void;
     activatorRef: React.RefObject<HTMLElement>;
     optionsListRef: React.RefObject<HTMLElement>;
     onOptionsListClose: VoidFunction;

package/useSelectOptionsList.js

@@ -3,7 +3,9 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 
 const useSelectOptionsList = (searchable) => {
     const [showOptions, setShowOptions] = useState(false);
-    const onActivatorClick = useCallback((show) => setShowOptions((optionsVisible) => (show ? !!(!optionsVisible || searchable) : false)), [searchable, setShowOptions]);
+    const toggleOptions = useCallback((show) => {
+        setShowOptions((optionsVisible) => (show ? !!(!optionsVisible || searchable) : false));
+    }, [searchable, setShowOptions]);
     const activatorRef = useRef(null);
     const optionsListRef = useRef(null);
     useEffect(() => {
@@ -27,7 +29,7 @@ const useSelectOptionsList = (searchable) => {
     const onOptionsListClose = () => setShowOptions(false);
     const onClearSelectionClick = () => setShowOptions(false);
     return {
-        onActivatorClick,
+        toggleOptions,
         activatorRef,
         optionsListRef,
         onOptionsListClose,

package/useSelectOptionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectOptionsList.js","sources":["../src/useSelectOptionsList.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef } from 'react';\n\ninterface HookReturnType {\n    onActivatorClick: (show: boolean) => void;\n    activatorRef: React.RefObject<HTMLElement>;\n    optionsListRef: React.RefObject<HTMLElement>;\n    onOptionsListClose: VoidFunction;\n    onClearSelectionClick: VoidFunction;\n    showOptions: boolean;\n}\n\nexport const useSelectOptionsList = (searchable: boolean): HookReturnType => {\n    const [showOptions, setShowOptions] = useState(false);\n    const onActivatorClick = useCallback(\n        (show: boolean) => setShowOptions((optionsVisible) => (show ? !!(!optionsVisible || searchable) : false)),\n        [searchable, setShowOptions]\n    );\n    const activatorRef = useRef<HTMLElement>(null);\n    const optionsListRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n        if (!showOptions) {\n            return undefined;\n        }\n\n        const blurHandler = () => {\n            // даем фокусу перейти на другой элемент прежде чем проверить остался ли он внутри компонента\n            requestAnimationFrame(() => {\n                const activeElement = document.activeElement;\n\n                if (activatorRef.current?.contains(activeElement) || optionsListRef.current?.contains(activeElement)) {\n                    return;\n                }\n\n                document.body.removeEventListener('blur', blurHandler, true);\n                setShowOptions(false);\n            });\n        };\n\n        document.body.addEventListener('blur', blurHandler, true);\n        return () => document.body.removeEventListener('blur', blurHandler, true);\n    }, [showOptions]);\n\n    const onOptionsListClose = () => setShowOptions(false);\n    const onClearSelectionClick = () => setShowOptions(false);\n\n    return {\n        onActivatorClick,\n        activatorRef,\n        optionsListRef,\n        onOptionsListClose,\n        onClearSelectionClick,\n        showOptions,\n    };\n};\n"],"names":[],"mappings":";;AAWa,MAAA,oBAAoB,GAAG,CAAC,UAAmB,KAAoB;IACxE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,IAAa,KAAK,cAAc,CAAC,CAAC,cAAc,MAAM,IAAI,GAAG,CAAC,EAAE,CAAC,cAAc,IAAI,UAAU,CAAC,GAAG,KAAK,CAAC,CAAC,EACzG,CAAC,UAAU,EAAE,cAAc,CAAC,CAC/B,CAAC;AACF,IAAA,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;AAC/C,IAAA,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,WAAW,EAAE;AACd,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;QAED,MAAM,WAAW,GAAG,MAAK;;YAErB,qBAAqB,CAAC,MAAK;AACvB,gBAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;AAE7C,gBAAA,IAAI,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;oBAClG,OAAO;AACV,iBAAA;gBAED,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;gBAC7D,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,aAAC,CAAC,CAAC;AACP,SAAC,CAAC;QAEF,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;AAC1D,QAAA,OAAO,MAAM,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;AAC9E,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,qBAAqB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO;QACH,gBAAgB;QAChB,YAAY;QACZ,cAAc;QACd,kBAAkB;QAClB,qBAAqB;QACrB,WAAW;KACd,CAAC;AACN;;;;"}
+{"version":3,"file":"useSelectOptionsList.js","sources":["../src/useSelectOptionsList.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useRef } from 'react';\n\ninterface HookReturnType {\n    toggleOptions: (show: boolean) => void;\n    activatorRef: React.RefObject<HTMLElement>;\n    optionsListRef: React.RefObject<HTMLElement>;\n    onOptionsListClose: VoidFunction;\n    onClearSelectionClick: VoidFunction;\n    showOptions: boolean;\n}\n\nexport const useSelectOptionsList = (searchable: boolean): HookReturnType => {\n    const [showOptions, setShowOptions] = useState(false);\n\n    const toggleOptions = useCallback(\n        (show: boolean) => {\n            setShowOptions((optionsVisible) => (show ? !!(!optionsVisible || searchable) : false));\n        },\n        [searchable, setShowOptions]\n    );\n\n    const activatorRef = useRef<HTMLElement>(null);\n    const optionsListRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n        if (!showOptions) {\n            return undefined;\n        }\n\n        const blurHandler = () => {\n            // даем фокусу перейти на другой элемент прежде чем проверить остался ли он внутри компонента\n            requestAnimationFrame(() => {\n                const activeElement = document.activeElement;\n\n                if (activatorRef.current?.contains(activeElement) || optionsListRef.current?.contains(activeElement)) {\n                    return;\n                }\n\n                document.body.removeEventListener('blur', blurHandler, true);\n                setShowOptions(false);\n            });\n        };\n\n        document.body.addEventListener('blur', blurHandler, true);\n        return () => document.body.removeEventListener('blur', blurHandler, true);\n    }, [showOptions]);\n\n    const onOptionsListClose = () => setShowOptions(false);\n    const onClearSelectionClick = () => setShowOptions(false);\n\n    return {\n        toggleOptions,\n        activatorRef,\n        optionsListRef,\n        onOptionsListClose,\n        onClearSelectionClick,\n        showOptions,\n    };\n};\n"],"names":[],"mappings":";;AAWa,MAAA,oBAAoB,GAAG,CAAC,UAAmB,KAAoB;IACxE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEtD,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,IAAa,KAAI;QACd,cAAc,CAAC,CAAC,cAAc,MAAM,IAAI,GAAG,CAAC,EAAE,CAAC,cAAc,IAAI,UAAU,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;AAC3F,KAAC,EACD,CAAC,UAAU,EAAE,cAAc,CAAC,CAC/B,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;AAC/C,IAAA,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,WAAW,EAAE;AACd,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;QAED,MAAM,WAAW,GAAG,MAAK;;YAErB,qBAAqB,CAAC,MAAK;AACvB,gBAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;AAE7C,gBAAA,IAAI,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;oBAClG,OAAO;AACV,iBAAA;gBAED,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;gBAC7D,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,aAAC,CAAC,CAAC;AACP,SAAC,CAAC;QAEF,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;AAC1D,QAAA,OAAO,MAAM,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;AAC9E,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,qBAAqB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO;QACH,aAAa;QACb,YAAY;QACZ,cAAc;QACd,kBAAkB;QAClB,qBAAqB;QACrB,WAAW;KACd,CAAC;AACN;;;;"}

package/SelectActivator-7f53c708.js

@@ -1,87 +0,0 @@
-import './index.css';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { forwardRef, useRef, Fragment, useEffect } from 'react';
-import classnames from 'classnames';
-import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
-import { Counter } from '@hh.ru/magritte-ui-counter';
-import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
-import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
-import { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';
-import { Text } from '@hh.ru/magritte-ui-typography';
-
-var styles = {"select-activator":"magritte-select-activator___9XXwA_5-2-9","selectActivator":"magritte-select-activator___9XXwA_5-2-9","select-activator-label":"magritte-select-activator-label___Mc49R_5-2-9","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-2-9","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-2-9","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-2-9","select-activator-value":"magritte-select-activator-value___wDbVR_5-2-9","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-2-9","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-2-9","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-2-9","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-2-9","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-2-9","select-activator-item":"magritte-select-activator-item___JsY4v_5-2-9","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-2-9","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-2-9","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-2-9","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-2-9","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-2-9","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-2-9","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-2-9","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-2-9","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-2-9","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-2-9","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-2-9","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-2-9","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-2-9","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-9","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-9","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-2-9","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-2-9","select-options":"magritte-select-options___y2KYZ_5-2-9","selectOptions":"magritte-select-options___y2KYZ_5-2-9","select-options-xs":"magritte-select-options-xs___BiiPo_5-2-9","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-2-9","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-2-9"};
-
-const SelectActivator = forwardRef(({ placeholder, size = 'medium', elevatePlaceholder = false, disabled = false, multiple, invalid = false, searchable = false, selectedOptions, onClick, onFocus, onBlur, searchValue, setSearchValue, description, errorMessage, visible, dropRef, searchRef, }, ref) => {
-    const prevVisibleRef = useRef(visible);
-    const focusedRef = useRef(false);
-    const counter = multiple ? selectedOptions?.length ?? 0 : 0;
-    const value = selectedOptions?.map(({ label, value }, index) => (jsxs(Fragment, { children: [label, index === selectedOptions.length - 1 ? '' : ', '] }, value)));
-    const hintContent = (jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid && !visible }, "hint"));
-    useEffect(() => {
-        if (prevVisibleRef.current && !visible) {
-            onBlur?.();
-        }
-        else if (visible) {
-            onFocus?.();
-        }
-        prevVisibleRef.current = visible;
-    }, [visible, onBlur, onFocus]);
-    if (searchable && visible) {
-        const sizeProp = size === 'large' ? { size: 'large' } : { size: 'medium' };
-        return (jsxs(Fragment$1, { children: [jsx(BaseInput, { ...sizeProp, wrapperRef: ref, onKeyDown: (event) => {
-                        if (dropRef?.current &&
-                            keyboardMatches(event.nativeEvent, [keyboardKeys.ArrowDown, keyboardKeys.Tab])) {
-                            const focusableElement = dropRef.current.querySelector('[data-magritte-option-first-active-element]');
-                            event.preventDefault();
-                            event.stopPropagation();
-                            focusableElement?.focus();
-                        }
-                        if (visible && keyboardMatches(event.nativeEvent, [keyboardKeys.Escape])) {
-                            event.stopPropagation();
-                            const dropHost = dropRef?.current || document.body;
-                            dropHost?.dispatchEvent(new KeyboardEvent(event.type, { key: event.key, code: event.code }));
-                        }
-                    }, ref: (input) => {
-                        input?.focus();
-                        if (searchRef) {
-                            searchRef.current = input;
-                        }
-                    }, value: searchValue, onChange: setSearchValue, "data-qa": "magritte-select-activator-input", placeholder: selectedOptions.length > 0 ? value : placeholder, counter: counter === 0 ? undefined : counter, autoComplete: "off" }), hintContent] }));
-    }
-    const showValue = selectedOptions.length > 0;
-    const showPlaceholder = !!(placeholder && !showValue);
-    const isLargeSize = size === 'large';
-    const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);
-    return (jsxs(Fragment$1, { children: [jsxs("div", { ref: ref, "data-qa": "magritte-select-activator", className: classnames(styles.selectActivator, {
-                    [styles.selectActivatorSizeLarge]: isLargeSize,
-                    [styles.selectActivatorWithLabel]: showLabel,
-                    [styles.selectActivatorHasCounter]: counter > 0,
-                    [styles.selectActivatorDisabled]: disabled,
-                    [styles.selectActivatorInvalid]: invalid,
-                }), onClick: () => {
-                    if (disabled) {
-                        return;
-                    }
-                    if (!focusedRef.current) {
-                        onClick(!visible);
-                    }
-                    focusedRef.current = false;
-                }, onFocus: () => {
-                    if (disabled) {
-                        return;
-                    }
-                    onClick(true);
-                    focusedRef.current = true;
-                }, onBlur: () => {
-                    focusedRef.current = false;
-                }, tabIndex: disabled ? -1 : 0, children: [jsxs("div", { className: styles.selectActivatorLabelRoot, children: [showPlaceholder && (jsx("div", { className: styles.selectActivatorPlaceholder, children: jsx(Text, { typography: "label-2-regular", children: jsx("div", { className: styles.selectActivatorEllipsis, children: placeholder }) }) })), showLabel && (jsx("div", { className: styles.selectActivatorLabel, children: jsx(Text, { typography: "label-4-regular", children: jsx("div", { className: styles.selectActivatorEllipsis, children: placeholder }) }) })), showValue && (jsx("div", { className: styles.selectActivatorValue, children: jsx(Text, { typography: "label-2-regular", children: jsx("div", { className: styles.selectActivatorEllipsis, children: value }) }) }))] }), jsxs("div", { className: styles.selectActivatorItem, children: [counter > 0 && jsx(Counter, { label: counter }), jsx("div", { className: classnames(styles.selectActivatorChevron, {
-                                    [styles.selectActivatorChevronUp]: visible,
-                                }), children: jsx(ChevronDownOutlinedSize24, {}) })] })] }), hintContent] }));
-});
-SelectActivator.displayName = 'SelectActivator';
-const renderSelectActivator = (props) => {
-    return jsx(SelectActivator, { ...props });
-};
-
-export { SelectActivator as S, renderSelectActivator as r, styles as s };
-//# sourceMappingURL=SelectActivator-7f53c708.js.map

package/SelectActivator-7f53c708.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectActivator-7f53c708.js","sources":["../src/SelectActivator.tsx"],"sourcesContent":["import { type ForwardedRef, type ReactNode, forwardRef, useEffect, Fragment, useRef, RefObject } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { type SelectActivatorProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './styles.less';\n\nconst SelectActivator = forwardRef(\n    <T,>(\n        {\n            placeholder,\n            size = 'medium',\n            elevatePlaceholder = false,\n            disabled = false,\n            multiple,\n            invalid = false,\n            searchable = false,\n            selectedOptions,\n            onClick,\n            onFocus,\n            onBlur,\n            searchValue,\n            setSearchValue,\n            description,\n            errorMessage,\n            visible,\n            dropRef,\n            searchRef,\n        }: SelectActivatorProps<T>,\n        ref: ForwardedRef<HTMLElement>\n    ) => {\n        const prevVisibleRef = useRef(visible);\n        const focusedRef = useRef(false);\n        const counter = multiple ? selectedOptions?.length ?? 0 : 0;\n        const value = selectedOptions?.map(({ label, value }, index) => (\n            <Fragment key={value}>\n                {label}\n                {index === selectedOptions.length - 1 ? '' : ', '}\n            </Fragment>\n        ));\n\n        const hintContent = (\n            <FormHelper\n                key=\"hint\"\n                description={description}\n                errorMessage={errorMessage}\n                disabled={disabled}\n                invalid={invalid && !visible}\n            />\n        );\n\n        useEffect(() => {\n            if (prevVisibleRef.current && !visible) {\n                onBlur?.();\n            } else if (visible) {\n                onFocus?.();\n            }\n            prevVisibleRef.current = visible;\n        }, [visible, onBlur, onFocus]);\n\n        if (searchable && visible) {\n            const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n\n            return (\n                <>\n                    <BaseInput\n                        {...sizeProp}\n                        wrapperRef={ref as ForwardedRef<HTMLDivElement> | undefined}\n                        onKeyDown={(event) => {\n                            if (\n                                dropRef?.current &&\n                                keyboardMatches(event.nativeEvent, [keyboardKeys.ArrowDown, keyboardKeys.Tab])\n                            ) {\n                                const focusableElement = dropRef.current.querySelector(\n                                    '[data-magritte-option-first-active-element]'\n                                ) as HTMLElement;\n                                event.preventDefault();\n                                event.stopPropagation();\n                                focusableElement?.focus();\n                            }\n                            if (visible && keyboardMatches(event.nativeEvent, [keyboardKeys.Escape])) {\n                                event.stopPropagation();\n                                const dropHost = dropRef?.current || document.body;\n                                dropHost?.dispatchEvent(\n                                    new KeyboardEvent(event.type, { key: event.key, code: event.code })\n                                );\n                            }\n                        }}\n                        ref={(input) => {\n                            input?.focus();\n                            if (searchRef) {\n                                searchRef.current = input;\n                            }\n                        }}\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        data-qa=\"magritte-select-activator-input\"\n                        placeholder={selectedOptions.length > 0 ? value : placeholder}\n                        counter={counter === 0 ? undefined : counter}\n                        autoComplete=\"off\"\n                    />\n                    {hintContent}\n                </>\n            );\n        }\n\n        const showValue = selectedOptions.length > 0;\n        const showPlaceholder = !!(placeholder && !showValue);\n        const isLargeSize = size === 'large';\n        const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);\n\n        return (\n            <>\n                <div\n                    ref={ref as RefObject<HTMLDivElement>}\n                    data-qa=\"magritte-select-activator\"\n                    className={classnames(styles.selectActivator, {\n                        [styles.selectActivatorSizeLarge]: isLargeSize,\n                        [styles.selectActivatorWithLabel]: showLabel,\n                        [styles.selectActivatorHasCounter]: counter > 0,\n                        [styles.selectActivatorDisabled]: disabled,\n                        [styles.selectActivatorInvalid]: invalid,\n                    })}\n                    onClick={() => {\n                        if (disabled) {\n                            return;\n                        }\n\n                        if (!focusedRef.current) {\n                            onClick(!visible);\n                        }\n                        focusedRef.current = false;\n                    }}\n                    onFocus={() => {\n                        if (disabled) {\n                            return;\n                        }\n                        onClick(true);\n                        focusedRef.current = true;\n                    }}\n                    onBlur={() => {\n                        focusedRef.current = false;\n                    }}\n                    tabIndex={disabled ? -1 : 0}\n                >\n                    <div className={styles.selectActivatorLabelRoot}>\n                        {showPlaceholder && (\n                            <div className={styles.selectActivatorPlaceholder}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showLabel && (\n                            <div className={styles.selectActivatorLabel}>\n                                <Text typography=\"label-4-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showValue && (\n                            <div className={styles.selectActivatorValue}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{value}</div>\n                                </Text>\n                            </div>\n                        )}\n                    </div>\n                    <div className={styles.selectActivatorItem}>\n                        {counter > 0 && <Counter label={counter} />}\n                        <div\n                            className={classnames(styles.selectActivatorChevron, {\n                                [styles.selectActivatorChevronUp]: visible,\n                            })}\n                        >\n                            <ChevronDownOutlinedSize24 />\n                        </div>\n                    </div>\n                </div>\n                {hintContent}\n            </>\n        );\n    }\n);\n\nSelectActivator.displayName = 'SelectActivator';\n\nconst renderSelectActivator = <T,>(props: SelectActivatorProps<T>): ReactNode => {\n    return <SelectActivator {...props} />;\n};\n\nexport { SelectActivator, renderSelectActivator };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}