@hh.ru/magritte-ui-select 5.1.8

package/Select.d.ts

@@ -0,0 +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;
+    displayName: string;
+};
+export { Select };

package/Select.js

@@ -0,0 +1,142 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { match } from '@hh.ru/magritte-common-fuzzy-search';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { SelectForDesktopDevice } from './SelectForDesktopDevice.js';
+import { SelectForMobileDevice } from './SelectForMobileDevice.js';
+import { useSelectOptionsList } from './useSelectOptionsList.js';
+import { useSelectState } from './useSelectState.js';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-ui-card';
+import '@hh.ru/magritte-ui-cell';
+import '@hh.ru/magritte-ui-drop';
+import '@hh.ru/magritte-ui-icon/icon';
+import './SelectActivator-e0a9d95a.js';
+import 'classnames';
+import '@hh.ru/magritte-internal-field-hint';
+import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-input/BaseInput';
+import '@hh.ru/magritte-ui-typography';
+import './SelectOption.js';
+import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
+import '@hh.ru/magritte-ui-checkbox-radio';
+import './getChecked.js';
+import '@hh.ru/magritte-ui-bottom-sheet';
+import '@hh.ru/magritte-ui-input';
+import '@hh.ru/magritte-ui-navigation-bar';
+
+const getValue = (values) => {
+    if (values === undefined) {
+        return [];
+    }
+    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 { isMobile } = useBreakpoint();
+    const [commitChanges, setCommitChanges] = useState();
+    const previousCommitChanges = useRef(commitChanges);
+    const [searchValue, setSearchValue] = useState('');
+    const [optionList, setOptionList] = useState(options);
+    const optionListSearchText = useRef([]);
+    const valueSelectArray = getValue(valueSelect);
+    const [selectedOptions, setSelectedOptions] = useState(() => valueSelectArray ? options.filter(({ value }) => valueSelectArray.includes(value)) : []);
+    const { optionsListRef, activatorRef, onActivatorClick, onClearSelectionClick, onOptionsListClose, showOptions } = useSelectOptionsList(!!searchable);
+    const { values, onChange, clearSelectedValues, setLastValues } = useSelectState(!!multiple, valueSelect || []);
+    useEffect(() => {
+        const nextSelectedOptions = options.filter(({ value }) => valueSelectArray.includes(value));
+        const isEqualsSelect = nextSelectedOptions.every((item) => {
+            return selectedOptions.includes(item);
+        });
+        if (!isEqualsSelect) {
+            setSelectedOptions(options.filter(({ value }) => valueSelectArray.includes(value)));
+        }
+    }, [options, valueSelectArray, selectedOptions]);
+    const optionListProps = {
+        ...props,
+        searchable,
+        onChange,
+        maxWidth,
+        widthEqualToActivator,
+        visible: showOptions,
+        setLastValues,
+        clearSelectedValues: () => {
+            clearSelectedValues();
+            setCommitChanges(performance.now());
+            onClearSelectionClick();
+        },
+        maxHeight,
+        bottomSheetHeight,
+        onActivatorClick,
+        values,
+        multiple,
+        selectedOptions,
+        onOptionsListClose,
+        searchValue,
+        setSearchValue,
+        optionsListRef,
+        activatorRef,
+        options: optionList,
+        optionsCount: options.length,
+        setCommitChanges,
+        showClearButton,
+        isLimitExceeded: maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions,
+    };
+    useEffect(() => {
+        if (optionListSearchText.current.length === 0 && showOptions && optionsListRef.current) {
+            const options = optionsListRef.current.querySelectorAll('[data-magritte-option]');
+            optionListSearchText.current = [...options].map((optionElement) => {
+                return {
+                    search: optionElement.innerText ?? optionElement.textContent,
+                    value: optionElement.dataset.magritteOption,
+                };
+            });
+        }
+        if (!showOptions) {
+            setSearchValue('');
+        }
+    }, [optionsListRef, showOptions]);
+    useEffect(() => {
+        if (searchValue === '') {
+            setOptionList(options);
+        }
+        else {
+            const optionToVisible = optionListSearchText.current
+                .filter(({ search }) => {
+                const result = match(searchValue, search);
+                return result;
+            })
+                .map(({ value }) => value);
+            const nextOptions = options.filter(({ value }) => optionToVisible.includes(value));
+            setOptionList(nextOptions);
+        }
+    }, [searchValue, options]);
+    const onChangeSelect = useCallback(() => onChangeHandler(values), [values, onChangeHandler]);
+    // обработка выбора значения селекта
+    useEffect(() => {
+        // если изменения не было, то ничего не делаем
+        if (previousCommitChanges.current === commitChanges) {
+            return;
+        }
+        if (!multiple) {
+            onOptionsListClose();
+        }
+        onChangeSelect();
+    }, [isMobile, onChangeSelect, commitChanges, multiple, onOptionsListClose]);
+    useEffect(() => {
+        if (previousCommitChanges.current !== commitChanges) {
+            const nextSelectedOptions = options.filter(({ value }) => Array.isArray(values) ? values.includes(value) : values === value);
+            setSelectedOptions(nextSelectedOptions);
+            previousCommitChanges.current = commitChanges;
+        }
+    }, [options, values, commitChanges]);
+    if (isMobile) {
+        return (jsx(SelectForMobileDevice, { ...optionListProps, showCloseButtonInNavigationBar: showCloseButtonInNavigationBar, renderItem: renderItem }));
+    }
+    return (jsx(SelectForDesktopDevice, { ...optionListProps, renderItemForDesktop: renderItemForDesktop, dropHost: dropHost }));
+};
+Select.displayName = 'Select';
+
+export { Select };
+//# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -0,0 +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":"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"}

package/SelectActivator-e0a9d95a.js

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

package/SelectActivator-e0a9d95a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectActivator-e0a9d95a.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.d.ts

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

package/SelectActivator.js

@@ -0,0 +1,12 @@
+import './index.css';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-internal-field-hint';
+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-e0a9d95a.js';
+//# sourceMappingURL=SelectActivator.js.map

package/SelectActivator.js.map

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

package/SelectForDesktopDevice.d.ts

@@ -0,0 +1,22 @@
+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"> & {
+        onActivatorClick: (visible: boolean) => void;
+        selectedOptions: import("@hh.ru/magritte-ui-select/types").SelectOption<T>[];
+        values: [MultipleType] extends [true] ? string[] : string;
+        visible: boolean;
+        onOptionsListClose: VoidFunction;
+        optionsListRef: RefObject<HTMLElement>;
+        activatorRef: RefObject<HTMLElement>;
+        onChange: import("@hh.ru/magritte-ui-select/types").OnChangeAction;
+        clearSelectedValues: VoidFunction;
+        setCommitChanges: import("react").Dispatch<import("react").SetStateAction<number | undefined>>;
+        setLastValues: VoidFunction;
+        isLimitExceeded: boolean;
+    } & Pick<import("@hh.ru/magritte-ui-select/types").SelectActivatorProps<T>, "searchValue" | "setSearchValue" | "optionsCount"> & {
+        renderItemForDesktop?: RenderItem<T> | undefined;
+        dropHost?: RefObject<HTMLElement> | undefined;
+    }): ReactElement;
+    displayName: string;
+};

package/SelectForDesktopDevice.js

@@ -0,0 +1,69 @@
+import './index.css';
+import { useRef, createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { Card } from '@hh.ru/magritte-ui-card';
+import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
+import { Drop } from '@hh.ru/magritte-ui-drop';
+import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { S as SelectActivator, s as styles } from './SelectActivator-e0a9d95a.js';
+import { SelectOption } from './SelectOption.js';
+import { getChecked } from './getChecked.js';
+import 'classnames';
+import '@hh.ru/magritte-internal-field-hint';
+import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-input/BaseInput';
+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 wrapperRef = useRef(null);
+    const dropRef = useRef(null);
+    const optionsMultiRef = useMultipleRefs(optionsListRef, dropRef);
+    const searchRef = useRef(null);
+    const rawOptions = options.filter(({ type }) => type !== 'delimiter');
+    const firstOption = rawOptions?.[0];
+    const lastOption = rawOptions?.[rawOptions.length - 1];
+    const sizeProp = size === 'large' ? { size: 'large', elevatePlaceholder } : { size: 'medium' };
+    return (jsxs("div", { ref: wrapperRef, tabIndex: -1, children: [jsx(SelectActivator, { ...sizeProp, ...activatorProps, disabled: disabled, selectedOptions: selectedOptions, onClick: onActivatorClick, searchValue: searchValue, ref: activatorRef, multiple: multiple, visible: visible, dropRef: dropRef, searchRef: searchRef }), jsx(Drop, { ref: optionsMultiRef, maxWidth: maxWidth, visible: options.length > 0 && visible, direction: "bottom", alignment: "left", activatorRef: activatorRef, role: activatorProps.searchable ? 'status' : 'listbox', space: 400, widthEqualToActivator: widthEqualToActivator, host: dropHost, arrowNavigation: true, forcePosition: true, closeByClickOutside: false, onClose: () => {
+                    wrapperRef.current?.focus();
+                    onOptionsListClose();
+                }, onKeyDown: ({ nativeEvent }) => {
+                    const activeElement = document.activeElement;
+                    const searchInput = searchRef.current;
+                    if (searchInput !== null &&
+                        keyboardMatch(nativeEvent, keyboardKeys.ArrowUp) &&
+                        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: () => {
+                                    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) => {
+                                const checked = getChecked(option.value, values, multiple);
+                                const props = {
+                                    ...option,
+                                    name,
+                                    onChange: (value, needToPut) => {
+                                        onChange(value, needToPut);
+                                        setCommitChanges(performance.now());
+                                        if (searchRef.current && searchValue) {
+                                            searchRef.current?.focus();
+                                            searchRef.current?.select();
+                                        }
+                                        // return focus after select item
+                                        !multiple && wrapperRef.current?.focus();
+                                    },
+                                    checked,
+                                    multiple,
+                                    isLimitExceeded,
+                                };
+                                return (createElement(SelectOption, { ...props, isFirstActiveElement: !showClearButton && firstOption?.value === option.value, isLastActiveElement: lastOption?.value === option.value, key: option.value, onOptionsListClose: onOptionsListClose, render: renderItemForDesktop }));
+                            })] }) }) })] }));
+};
+SelectForDesktopDevice.displayName = 'SelectForDesktopDevice';
+
+export { SelectForDesktopDevice };
+//# sourceMappingURL=SelectForDesktopDevice.js.map

package/SelectForDesktopDevice.js.map

@@ -0,0 +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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"}

package/SelectForMobileDevice.d.ts

@@ -0,0 +1,22 @@
+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"> & {
+        onActivatorClick: (visible: boolean) => void;
+        selectedOptions: import("@hh.ru/magritte-ui-select/types").SelectOption<T>[];
+        values: [MultipleType] extends [true] ? string[] : string;
+        visible: boolean;
+        onOptionsListClose: VoidFunction;
+        optionsListRef: RefObject<HTMLElement>;
+        activatorRef: RefObject<HTMLElement>;
+        onChange: OnChangeAction;
+        clearSelectedValues: VoidFunction;
+        setCommitChanges: import("react").Dispatch<import("react").SetStateAction<number | undefined>>;
+        setLastValues: VoidFunction;
+        isLimitExceeded: boolean;
+    } & Pick<import("@hh.ru/magritte-ui-select/types").SelectActivatorProps<T>, "searchValue" | "setSearchValue" | "optionsCount"> & {
+        showCloseButtonInNavigationBar: boolean;
+        renderItem?: RenderItem<T> | undefined;
+    }): ReactElement;
+    displayName: string;
+};

package/SelectForMobileDevice.js

@@ -0,0 +1,86 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cloneElement, useCallback } from 'react';
+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-e0a9d95a.js';
+import { SelectOption } from './SelectOption.js';
+import { getChecked } from './getChecked.js';
+import 'classnames';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-internal-field-hint';
+import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-input/BaseInput';
+import '@hh.ru/magritte-ui-typography';
+import '@hh.ru/magritte-ui-card';
+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 sizeProp = size === 'large' ? { size: 'large', elevatePlaceholder } : { size: 'medium' };
+    const clearButton = showClearButton &&
+        _clearButton &&
+        cloneElement(_clearButton, {
+            'data-qa': 'magritte-select-clear-action-on-xs',
+            onClick: clearSelectedValues,
+        });
+    const applyButton = multiple &&
+        _applyChangesButton &&
+        cloneElement(_applyChangesButton, {
+            'data-qa': 'magritte-select-apply-on-xs',
+            onClick: () => {
+                setCommitChanges(performance.now());
+                onOptionsListClose();
+            },
+        });
+    const handleChange = useCallback((...args) => {
+        if (!multiple) {
+            setCommitChanges(performance.now());
+            onOptionsListClose();
+        }
+        onChange(...args);
+    }, [onChange, setCommitChanges, onOptionsListClose, multiple]);
+    return (jsxs("div", { ref: activatorRef, children: [renderActivator({
+                ...sizeProp,
+                ...activatorProps,
+                onClick: onActivatorClick,
+                selectedOptions,
+                multiple,
+                searchValue,
+                setSearchValue,
+                visible,
+                disabled,
+                placeholder,
+            }), jsx(BottomSheet, { allowScrollWhileFocused: true, keyboardOverlaysContent: false, visible: visible, onClose: () => {
+                    onOptionsListClose();
+                    setLastValues();
+                }, ref: optionsListRef, height: searchable ? 'full-screen' : bottomSheetHeight, header: jsx(NavigationBar, { title: placeholder, right: showCloseButtonInNavigationBar
+                        ? [
+                            {
+                                key: 'close',
+                                icon: CrossOutlinedSize24,
+                                onClick: onOptionsListClose,
+                                'data-qa': 'bottom-sheet-navigation-close',
+                            },
+                        ]
+                        : undefined, options: searchable && (jsx(SearchInput, { clearable: true, value: searchValue, onChange: setSearchValue, "data-qa": "bottom-sheet-navigation-input", autoComplete: "off" })) }), footer: multiple || showClearButton ? (jsxs(BottomSheetFooter, { children: [clearButton, applyButton] })) : null, children: jsx("div", { "data-qa": "magritte-select-option-list-on-xs", className: `${styles.selectOptions} ${styles['select-options-xs']}`, children: options?.map((option) => {
+                        const checked = getChecked(option.value, values, multiple);
+                        const props = {
+                            ...option,
+                            name,
+                            onChange: handleChange,
+                            checked,
+                            multiple,
+                            isXS: true,
+                            isLimitExceeded,
+                        };
+                        return (jsx(SelectOption, { ...props, onOptionsListClose: onOptionsListClose, render: renderItem }, option.value));
+                    }) }) })] }));
+};
+SelectForMobileDevice.displayName = 'SelectForMobileDevice';
+
+export { SelectForMobileDevice };
+//# sourceMappingURL=SelectForMobileDevice.js.map

package/SelectForMobileDevice.js.map

@@ -0,0 +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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"}

package/SelectOption.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import type { SelectOptionProps, SelectOptionWrapperProps } from './types';
+declare const SelectOptionBase: {
+    <T>({ label, type, input, isXS }: SelectOptionProps<T>): ReactElement;
+    displayName: string;
+};
+declare const SelectOption: <T>({ checked, multiple, name, value, disabled, onChange, render, type, isFirstActiveElement, isLastActiveElement, isLimitExceeded, onOptionsListClose, ...props }: SelectOptionWrapperProps<T>) => ReactElement;
+export { SelectOptionBase, SelectOption };