@hh.ru/magritte-ui-select 5.1.12 → 5.2.0

package/Select.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import type { SelectProps } from './types';
 declare const Select: {
-    <ShowClearButtonType extends boolean, MultipleType extends boolean, T>({ multiple, showClearButton, showCloseButtonInNavigationBar, onChange: onChangeHandler, value: valueSelect, renderItem, renderItemForDesktop, options, maxHeight, widthEqualToActivator, maxWidth, bottomSheetHeight, dropHost, maxSelectedOptions, searchable, ...props }: SelectProps<ShowClearButtonType, MultipleType, T>): ReactElement;
+    <ShowClearButtonType extends boolean, MultipleType extends boolean, T>({ multiple, showClearButton, showCloseButtonInNavigationBar, onChange: onChangeHandler, value: valueSelect, renderItem, renderItemForDesktop, options, maxHeight, widthEqualToActivator, maxWidth, bottomSheetHeight, dropHost, maxSelectedOptions, searchable, onBottomSheetOpen, onBottomSheetClose, onDropClose, onDropOpen, ...props }: SelectProps<ShowClearButtonType, MultipleType, T>): ReactElement;
     displayName: string;
 };
 export { Select };

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-e067d7b3.js';
+import './SelectActivator-1d7ecae1.js';
 import 'classnames';
 import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-counter';
@@ -33,7 +33,7 @@ const getValue = (values) => {
     }
     return typeof values === 'string' ? [values] : values;
 };
-const Select = ({ multiple, showClearButton, showCloseButtonInNavigationBar = false, onChange: onChangeHandler, value: valueSelect, renderItem, renderItemForDesktop, options, maxHeight = 460, widthEqualToActivator = true, maxWidth, bottomSheetHeight = 'full-screen', dropHost, maxSelectedOptions, searchable, ...props }) => {
+const Select = ({ multiple, showClearButton, showCloseButtonInNavigationBar = false, onChange: onChangeHandler, value: valueSelect, renderItem, renderItemForDesktop, options, maxHeight = 460, widthEqualToActivator = true, maxWidth, bottomSheetHeight = 'full-screen', dropHost, maxSelectedOptions, searchable, onBottomSheetOpen, onBottomSheetClose, onDropClose, onDropOpen, ...props }) => {
     const { isMobile } = useBreakpoint();
     const [commitChanges, setCommitChanges] = useState();
     const previousCommitChanges = useRef(commitChanges);
@@ -132,9 +132,9 @@ const Select = ({ multiple, showClearButton, showCloseButtonInNavigationBar = fa
         }
     }, [options, values, commitChanges]);
     if (isMobile) {
-        return (jsx(SelectForMobileDevice, { ...optionListProps, showCloseButtonInNavigationBar: showCloseButtonInNavigationBar, renderItem: renderItem }));
+        return (jsx(SelectForMobileDevice, { ...optionListProps, showCloseButtonInNavigationBar: showCloseButtonInNavigationBar, renderItem: renderItem, onBottomSheetClose: onBottomSheetClose, onBottomSheetOpen: onBottomSheetOpen }));
     }
-    return (jsx(SelectForDesktopDevice, { ...optionListProps, renderItemForDesktop: renderItemForDesktop, dropHost: dropHost }));
+    return (jsx(SelectForDesktopDevice, { ...optionListProps, renderItemForDesktop: renderItemForDesktop, dropHost: dropHost, onDropClose: onDropClose, onDropOpen: onDropOpen }));
 };
 Select.displayName = 'Select';
 

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    ...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            />\n        );\n    }\n\n    return (\n        <SelectForDesktopDevice {...optionListProps} renderItemForDesktop={renderItemForDesktop} dropHost={dropHost} />\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,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;AACV,QAAA,QACIA,GAAA,CAAC,qBAAqB,EAAA,EAAA,GACd,eAAe,EACnB,8BAA8B,EAAE,8BAA8B,EAC9D,UAAU,EAAE,UAAU,EAAA,CACxB,EACJ;AACL,KAAA;AAED,IAAA,QACIA,GAAA,CAAC,sBAAsB,EAAA,EAAA,GAAK,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,EAAA,CAAI,EACjH;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, 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":"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"}

package/{SelectActivator-e067d7b3.js → SelectActivator-1d7ecae1.js}

@@ -9,7 +9,7 @@ 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-1-12","selectActivator":"magritte-select-activator___9XXwA_5-1-12","select-activator-label":"magritte-select-activator-label___Mc49R_5-1-12","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-1-12","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-1-12","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-1-12","select-activator-value":"magritte-select-activator-value___wDbVR_5-1-12","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-1-12","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-1-12","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-1-12","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-1-12","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-1-12","select-activator-item":"magritte-select-activator-item___JsY4v_5-1-12","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-1-12","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-1-12","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-1-12","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-1-12","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-1-12","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-1-12","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-1-12","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-1-12","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-1-12","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-1-12","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-1-12","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-1-12","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-1-12","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-1-12","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-1-12","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-1-12","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-1-12","select-options":"magritte-select-options___y2KYZ_5-1-12","selectOptions":"magritte-select-options___y2KYZ_5-1-12","select-options-xs":"magritte-select-options-xs___BiiPo_5-1-12","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-1-12","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-1-12"};
+var styles = {"select-activator":"magritte-select-activator___9XXwA_5-2-0","selectActivator":"magritte-select-activator___9XXwA_5-2-0","select-activator-label":"magritte-select-activator-label___Mc49R_5-2-0","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-2-0","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-2-0","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-2-0","select-activator-value":"magritte-select-activator-value___wDbVR_5-2-0","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-2-0","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-2-0","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-2-0","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-2-0","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-2-0","select-activator-item":"magritte-select-activator-item___JsY4v_5-2-0","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-2-0","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-2-0","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-2-0","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-2-0","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-2-0","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-2-0","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-2-0","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-2-0","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-2-0","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-2-0","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-2-0","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-2-0","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-2-0","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-0","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-0","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-2-0","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-2-0","select-options":"magritte-select-options___y2KYZ_5-2-0","selectOptions":"magritte-select-options___y2KYZ_5-2-0","select-options-xs":"magritte-select-options-xs___BiiPo_5-2-0","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-2-0","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-2-0"};
 
 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);
@@ -84,4 +84,4 @@ const renderSelectActivator = (props) => {
 };
 
 export { SelectActivator as S, renderSelectActivator as r, styles as s };
-//# sourceMappingURL=SelectActivator-e067d7b3.js.map
+//# sourceMappingURL=SelectActivator-1d7ecae1.js.map

package/{SelectActivator-e067d7b3.js.map → SelectActivator-1d7ecae1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SelectActivator-e067d7b3.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 { FieldHint } from '@hh.ru/magritte-internal-field-hint';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\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            <FieldHint\n                key=\"hint\"\n                description={description}\n                errorMessage={errorMessage}\n                disabled={disabled}\n                focused={visible}\n                invalid={invalid}\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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"}
+{"version":3,"file":"SelectActivator-1d7ecae1.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 { FieldHint } from '@hh.ru/magritte-internal-field-hint';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\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            <FieldHint\n                key=\"hint\"\n                description={description}\n                errorMessage={errorMessage}\n                disabled={disabled}\n                focused={visible}\n                invalid={invalid}\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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"}

package/SelectActivator.js

@@ -8,5 +8,5 @@ import '@hh.ru/magritte-ui-counter';
 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-e067d7b3.js';
+export { S as SelectActivator, r as renderSelectActivator } from './SelectActivator-1d7ecae1.js';
 //# sourceMappingURL=SelectActivator.js.map

package/SelectForDesktopDevice.d.ts

@@ -1,7 +1,7 @@
 import { type 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, ...activatorProps }: Omit<import("./types").SelectProps<boolean, boolean, T>, "onChange" | "value" | "renderItemForDesktop" | "renderItem"> & {
+    <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;
         selectedOptions: import("@hh.ru/magritte-ui-select/types").SelectOption<T>[];
         values: [MultipleType] extends [true] ? string[] : string;

package/SelectForDesktopDevice.js

@@ -7,7 +7,7 @@ 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-e067d7b3.js';
+import { S as SelectActivator, s as styles } from './SelectActivator-1d7ecae1.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
 import 'classnames';
@@ -18,7 +18,7 @@ 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, ...activatorProps }) => {
+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 dropRef = useRef(null);
     const optionsMultiRef = useMultipleRefs(optionsListRef, dropRef);
@@ -38,7 +38,7 @@ const SelectForDesktopDevice = ({ name, options, disabled, multiple = false, onC
                         activeElement?.dataset.magritteOptionFirstActiveElement) {
                         searchInput.focus();
                     }
-                }, 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: () => {
                                     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) => {

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    ...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            >\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 { 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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"}

package/SelectForMobileDevice.d.ts

@@ -1,7 +1,7 @@
 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, ...activatorProps }: Omit<import("./types").SelectProps<boolean, boolean, T>, "onChange" | "value" | "renderItemForDesktop" | "renderItem"> & {
+    <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;
         selectedOptions: import("@hh.ru/magritte-ui-select/types").SelectOption<T>[];
         values: [MultipleType] extends [true] ? string[] : string;

package/SelectForMobileDevice.js

@@ -5,7 +5,7 @@ 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-e067d7b3.js';
+import { s as styles, r as renderSelectActivator } from './SelectActivator-1d7ecae1.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
 import 'classnames';
@@ -19,7 +19,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, ...activatorProps }) => {
+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 sizeProp = size === 'large' ? { size: 'large', elevatePlaceholder } : { size: 'medium' };
     const clearButton = showClearButton &&
         _clearButton &&
@@ -54,7 +54,7 @@ const SelectForMobileDevice = ({ name, options, disabled, multiple = false, onCh
                 visible,
                 disabled,
                 placeholder,
-            }), jsx(BottomSheet, { allowScrollWhileFocused: true, keyboardOverlaysContent: false, visible: visible, onClose: () => {
+            }), jsx(BottomSheet, { allowScrollWhileFocused: true, onAppear: onBottomSheetOpen, onAfterExit: onBottomSheetClose, keyboardOverlaysContent: false, visible: visible, onClose: () => {
                     onOptionsListClose();
                     setLastValues();
                 }, ref: optionsListRef, height: searchable ? 'full-screen' : bottomSheetHeight, header: jsx(NavigationBar, { title: placeholder, right: showCloseButtonInNavigationBar

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    ...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                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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"}
+{"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":"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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-e067d7b3.js';
+import './SelectActivator-1d7ecae1.js';
 import 'classnames';
 import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-counter';

package/index.css

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

package/index.js

@@ -1,5 +1,5 @@
 import './index.css';
-export { S as SelectActivator } from './SelectActivator-e067d7b3.js';
+export { S as SelectActivator } from './SelectActivator-1d7ecae1.js';
 export { UncontrolledSelect } from './UncontrolledSelect.js';
 export { Select } from './Select.js';
 import 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-select",
-  "version": "5.1.12",
+  "version": "5.2.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -31,7 +31,7 @@
     "@hh.ru/magritte-ui-checkable-card": "3.0.3",
     "@hh.ru/magritte-ui-checkbox-radio": "2.2.0",
     "@hh.ru/magritte-ui-counter": "4.0.8",
-    "@hh.ru/magritte-ui-drop": "5.0.8",
+    "@hh.ru/magritte-ui-drop": "5.1.0",
     "@hh.ru/magritte-ui-icon": "7.1.4",
     "@hh.ru/magritte-ui-input": "5.0.14",
     "@hh.ru/magritte-ui-navigation-bar": "4.1.9",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f93e64b452b301b15ecc740d6cf9c0ff178522df"
+  "gitHead": "f389886d54baa53831572063d657dd243480424e"
 }

package/types.d.ts

@@ -33,6 +33,14 @@ export interface BaseSelectActivatorProps<T> {
     visible?: boolean;
     dropRef?: RefObject<HTMLDivElement>;
     searchRef?: MutableRefObject<HTMLInputElement | null>;
+    /** Обработчик события открытия дропа */
+    onDropOpen?: VoidFunction;
+    /** Обработчик события закрытия дропа */
+    onDropClose?: VoidFunction;
+    /** Обработчик события открытия боттомшита */
+    onBottomSheetOpen?: VoidFunction;
+    /** Обработчик события закрытия боттомшита */
+    onBottomSheetClose?: VoidFunction;
 }
 export interface LargeSelectProps {
     /** Размер cелекта, как и у инпута флаг elevatePlaceholder можно задать только для large */