@hh.ru/magritte-ui-select 12.5.4 → 12.6.0

package/SelectDrop.js

@@ -1,8 +1,9 @@
 import './index.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useCallback, cloneElement } from 'react';
+import { useRef, useId, useCallback, cloneElement } from 'react';
 import classnames from 'classnames';
 import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { ActionBar } from '@hh.ru/magritte-ui-action-bar/ActionBar';
 import { CellText, Cell } from '@hh.ru/magritte-ui-cell';
 import { Drop } from '@hh.ru/magritte-ui-drop';
@@ -21,7 +22,7 @@ import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import '@hh.ru/magritte-ui-checkbox-radio';
 
-var styles = {"select-drop-container-wrapper":"magritte-select-drop-container-wrapper___OHM0q_12-5-4","selectDropContainerWrapper":"magritte-select-drop-container-wrapper___OHM0q_12-5-4","select-drop-container":"magritte-select-drop-container___hee1p_12-5-4","selectDropContainer":"magritte-select-drop-container___hee1p_12-5-4","select-drop-container_plain":"magritte-select-drop-container_plain___766zl_12-5-4","selectDropContainerPlain":"magritte-select-drop-container_plain___766zl_12-5-4","select-drop-container_with-footer":"magritte-select-drop-container_with-footer___6wp-L_12-5-4","selectDropContainerWithFooter":"magritte-select-drop-container_with-footer___6wp-L_12-5-4","select-drop":"magritte-select-drop___jn4O-_12-5-4","selectDrop":"magritte-select-drop___jn4O-_12-5-4","select-drop-header":"magritte-select-drop-header___fMmio_12-5-4","selectDropHeader":"magritte-select-drop-header___fMmio_12-5-4","select-drop_plain":"magritte-select-drop_plain___VL8Fz_12-5-4","selectDropPlain":"magritte-select-drop_plain___VL8Fz_12-5-4","label-option":"magritte-label-option___2N7t9_12-5-4","labelOption":"magritte-label-option___2N7t9_12-5-4","loading":"magritte-loading___AMiuq_12-5-4","hint":"magritte-hint___6qaFl_12-5-4"};
+var styles = {"select-drop-container-wrapper":"magritte-select-drop-container-wrapper___OHM0q_12-6-0","selectDropContainerWrapper":"magritte-select-drop-container-wrapper___OHM0q_12-6-0","select-drop-container":"magritte-select-drop-container___hee1p_12-6-0","selectDropContainer":"magritte-select-drop-container___hee1p_12-6-0","select-drop-container_plain":"magritte-select-drop-container_plain___766zl_12-6-0","selectDropContainerPlain":"magritte-select-drop-container_plain___766zl_12-6-0","select-drop-container_with-footer":"magritte-select-drop-container_with-footer___6wp-L_12-6-0","selectDropContainerWithFooter":"magritte-select-drop-container_with-footer___6wp-L_12-6-0","select-drop":"magritte-select-drop___jn4O-_12-6-0","selectDrop":"magritte-select-drop___jn4O-_12-6-0","select-drop-header":"magritte-select-drop-header___fMmio_12-6-0","selectDropHeader":"magritte-select-drop-header___fMmio_12-6-0","select-drop_plain":"magritte-select-drop_plain___VL8Fz_12-6-0","selectDropPlain":"magritte-select-drop_plain___VL8Fz_12-6-0","label-option":"magritte-label-option___2N7t9_12-6-0","labelOption":"magritte-label-option___2N7t9_12-6-0","loading":"magritte-loading___AMiuq_12-6-0","hint":"magritte-hint___6qaFl_12-6-0"};
 
 const SelectOptionDefault = ({ data, input, type, plain, checked, }) => {
     if (type === 'delimiter') {
@@ -38,8 +39,14 @@ const RenderButtonsContainerDefault = ({ applyChangesButton, loading }) => {
     }
     return jsx(ActionBar, { primaryActions: applyChangesButton });
 };
-const SelectDrop = ({ activatorRef, type, name, multiple, applyChangesButton: _applyChangesButton, clearButton: _clearButton, useInitialValuesOnClearAction, loading, renderItem = SelectOptionDefault, renderButtonsContainer = RenderButtonsContainerDefault, visible, optionList, optionsListRef, searchValue, setSearchValue, maxWidth, value: values, onChange, onClose, clearSelectedValues, setInitialValues, isLimitExceeded, plain, searchable, widthEqualToActivator, forceDropVisibleWithEmptyOptions, renderContentBefore, setForcedState, setSelectedValues, maxHeight, onDropClose, onDropOpen, emptyOptionsHint, emptyOptionsSearchHint, onApply, onClear, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, dropWidth, ...props }) => {
+const getDropRole = (clearButton, applyChangesButton, multiple) => {
+    const needAddChangesButton = multiple && Boolean(applyChangesButton);
+    const hasAnyButton = Boolean(clearButton) || needAddChangesButton;
+    return hasAnyButton ? 'dialog' : 'listbox';
+};
+const SelectDrop = ({ activatorRef, type, name, multiple, applyChangesButton: _applyChangesButton, clearButton: _clearButton, useInitialValuesOnClearAction, loading, renderItem = SelectOptionDefault, renderButtonsContainer = RenderButtonsContainerDefault, visible, optionList, optionsListRef, searchValue, setSearchValue, maxWidth, value: values, onChange, onClose, clearSelectedValues, setInitialValues, isLimitExceeded, plain, searchable, widthEqualToActivator, forceDropVisibleWithEmptyOptions, renderContentBefore, setForcedState, setSelectedValues, maxHeight, onDropClose, onDropOpen, emptyOptionsHint, emptyOptionsSearchHint, onApply, onClear, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, dropWidth, id, ...props }) => {
     const closedByKeyboardRef = useRef(false);
+    const listId = useId();
     const valuesArr = Array.isArray(values) ? values : [values];
     const handleChange = useCallback((newValue, needToPut) => {
         onChange(newValue, needToPut);
@@ -67,11 +74,14 @@ const SelectDrop = ({ activatorRef, type, name, multiple, applyChangesButton: _a
         }
         onClose?.();
     };
+    const applyTrl = useTranslation('Select', 'apply');
+    const clearTrl = useTranslation('Select', 'clear');
     const clearButton = _clearButton &&
         cloneElement(_clearButton, {
             key: 'clearButton',
             size: 'medium',
             'data-qa': 'magritte-select-clear-action',
+            'aria-label': _clearButton.props['aria-label'] || clearTrl,
             onClick: () => {
                 clearSelectedValuesAndClose();
                 onClear?.();
@@ -83,6 +93,7 @@ const SelectDrop = ({ activatorRef, type, name, multiple, applyChangesButton: _a
             key: 'applyChangesButton',
             size: 'medium',
             'data-qa': 'magritte-select-apply',
+            'aria-label': _applyChangesButton.props['aria-label'] || applyTrl,
             onClick: () => {
                 setSelectedValues();
                 onClose?.();
@@ -117,29 +128,32 @@ const SelectDrop = ({ activatorRef, type, name, multiple, applyChangesButton: _a
         emptyOptionsHintVisible: emptyOptionsHintVisible || emptySearchOptionsHintVisible,
     });
     const haveFooter = Boolean(footer);
+    const dropRole = getDropRole(_clearButton, _applyChangesButton, multiple);
+    const dropA11YProps = dropRole === 'listbox' ? { 'aria-owns': listId, 'aria-multiselectable': multiple } : {};
+    const listA11YProps = dropRole === 'dialog' ? { role: 'listbox', 'aria-multiselectable': multiple } : {};
     return (jsx(Drop, { ...props, ref: optionsListRef, autoFocusWhenOpened: false, maxWidth: maxWidth, width: dropWidth, visible: (optionList.length > 0 ||
             forceDropVisibleWithEmptyOptions ||
             emptyOptionsHintVisible ||
             emptySearchOptionsHintVisible ||
             internalError) &&
-            visible, placement: ['bottom-left', 'top-left', 'bottom-right', 'top-right'], activatorRef: activatorRef, role: searchable ? 'status' : 'listbox', padding: plain ? 24 : 12, keyboardNavigationMode: "list", onClose: () => {
+            visible, placement: ['bottom-left', 'top-left', 'bottom-right', 'top-right'], activatorRef: activatorRef, padding: plain ? 24 : 12, keyboardNavigationMode: "list", onClose: () => {
             setForcedState('focus');
             onClose?.();
         }, closeByClickOutside: false, onKeyDownCapture: (event) => {
             if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
                 closedByKeyboardRef.current = true;
             }
-        }, widthEqualToActivator: widthEqualToActivator || loading, forcePlacement: true, footer: footer, onAfterExit: onDropClose, onAppear: onDropOpen, returnFocusOnClose: false, children: jsx("div", { className: styles.selectDropContainerWrapper, style: { maxHeight: `${maxHeight}px` }, children: jsxs("div", { className: classnames(styles.selectDropContainer, { [styles.selectDropContainerPlain]: plain }, { [styles.selectDropContainerWithFooter]: haveFooter }), children: [internalError && innerErrorTrls && jsx(SelectError, { innerErrorTrls: innerErrorTrls, reload: reload }), emptyOptionsHintVisible && jsx("div", { className: styles.hint, children: emptyOptionsHint }), emptySearchOptionsHintVisible && jsx("div", { className: styles.hint, children: emptyOptionsSearchHint }), loading && (jsx("div", { className: styles.loading, children: jsx(Loader, { size: 24 }) })), optionsVisible && (jsxs(Fragment, { children: [renderContentBefore && (jsx("div", { "data-qa": "magritte-select-header", className: styles.selectDropHeader, children: renderContentBefore({
+        }, widthEqualToActivator: widthEqualToActivator || loading, forcePlacement: true, footer: footer, onAfterExit: onDropClose, onAppear: onDropOpen, returnFocusOnClose: false, id: id, role: dropRole, ...dropA11YProps, children: jsx("div", { className: styles.selectDropContainerWrapper, style: { maxHeight: `${maxHeight}px` }, children: jsxs("div", { className: classnames(styles.selectDropContainer, { [styles.selectDropContainerPlain]: plain }, { [styles.selectDropContainerWithFooter]: haveFooter }), children: [internalError && innerErrorTrls && jsx(SelectError, { innerErrorTrls: innerErrorTrls, reload: reload }), emptyOptionsHintVisible && jsx("div", { className: styles.hint, children: emptyOptionsHint }), emptySearchOptionsHintVisible && jsx("div", { className: styles.hint, children: emptyOptionsSearchHint }), loading && (jsx("div", { className: styles.loading, children: jsx(Loader, { size: 24 }) })), optionsVisible && (jsxs(Fragment, { children: [renderContentBefore && (jsx("div", { "data-qa": "magritte-select-header", className: styles.selectDropHeader, children: renderContentBefore({
                                     clearSelectedValuesAndClose,
                                     searchValue,
                                     setSearchValue,
                                     optionsCount: optionList.length,
-                                }) })), jsx("div", { className: classnames(styles.selectDrop, { [styles.selectDropPlain]: plain }), "data-qa": "magritte-select-option-list", children: optionList.map((option) => {
+                                }) })), jsx("div", { id: listId, className: classnames(styles.selectDrop, { [styles.selectDropPlain]: plain }), "data-qa": "magritte-select-option-list", ...listA11YProps, children: optionList.map((option) => {
                                     const checked = Boolean(option.data && getChecked(option.data, values ?? []));
                                     const disabled = !checked && (option.disabled || isLimitExceeded);
                                     return (jsx(SelectOption, { name: name, checked: checked, onChange: handleChange, render: renderItem, disabled: disabled, type: option.type || type, plain: !!plain, multiple: multiple, "data-qa": optionDataQa, data: option.data }, option.data.value));
                                 }) })] }))] }) }) }));
 };
 
-export { SelectDrop };
+export { SelectDrop, getDropRole };
 //# sourceMappingURL=SelectDrop.js.map

package/SelectDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDrop.js","sources":["src/SelectDrop.tsx"],"sourcesContent":["import { useCallback, ReactElement, cloneElement, ComponentProps, ReactNode, useRef, KeyboardEvent } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar/ActionBar';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { SelectError } from '@hh.ru/magritte-ui-select/SelectError';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport {\n    OnChangeAction,\n    SelectDropProps,\n    RenderOptionTypeProps,\n    RenderButtonsContainerProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-drop.less';\n\nconst SelectOptionDefault = <DataType extends StaticDataFetcherItem>({\n    data,\n    input,\n    type,\n    plain,\n    checked,\n}: RenderOptionTypeProps<DataType>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {data.text}\n            </CellText>\n        );\n    }\n    if (type === 'label') {\n        return (\n            <Cell Element=\"div\" right={checked && plain ? <CheckOutlinedSize24 /> : undefined}>\n                <div className={classnames({ [styles.labelOption]: !plain })}>\n                    <CellText maxLines={1}>{data.text}</CellText>\n                </div>\n            </Cell>\n        );\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" left={input}>\n            <CellText maxLines={1}>{data.text}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({ applyChangesButton, loading }: RenderButtonsContainerProps): ReactNode => {\n    if (loading || !applyChangesButton) {\n        return null;\n    }\n    return <ActionBar primaryActions={applyChangesButton} />;\n};\n\nexport const SelectDrop = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    activatorRef,\n    type,\n    name,\n    multiple,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    useInitialValuesOnClearAction,\n    loading,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    maxWidth,\n    value: values,\n    onChange,\n    onClose,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    plain,\n    searchable,\n    widthEqualToActivator,\n    forceDropVisibleWithEmptyOptions,\n    renderContentBefore,\n    setForcedState,\n    setSelectedValues,\n    maxHeight,\n    onDropClose,\n    onDropOpen,\n    emptyOptionsHint,\n    emptyOptionsSearchHint,\n    onApply,\n    onClear,\n    searchInProgress,\n    internalError,\n    reload,\n    innerErrorTrls,\n    optionDataQa,\n    dropWidth,\n    ...props\n}: SelectDropProps<MultipleType, DataType>): ReactElement => {\n    const closedByKeyboardRef = useRef(false);\n    const valuesArr = Array.isArray(values) ? values : [values];\n    const handleChange: OnChangeAction<DataType> = useCallback(\n        (newValue, needToPut) => {\n            onChange(newValue, needToPut);\n\n            if (!multiple) {\n                onClose?.();\n            }\n\n            if (!multiple && closedByKeyboardRef.current) {\n                closedByKeyboardRef.current = false;\n                setForcedState('focus');\n                return;\n            }\n\n            if (multiple && searchValue) {\n                setForcedState('focusAndSelect');\n                return;\n            }\n            closedByKeyboardRef.current = false;\n            setForcedState(null);\n        },\n        [multiple, onChange, onClose, searchValue, setForcedState]\n    );\n\n    const clearSelectedValuesAndClose = () => {\n        if (useInitialValuesOnClearAction) {\n            setInitialValues();\n        } else {\n            clearSelectedValues();\n        }\n        onClose?.();\n    };\n    const clearButton =\n        _clearButton &&\n        cloneElement(_clearButton, {\n            key: 'clearButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-clear-action',\n            onClick: () => {\n                clearSelectedValuesAndClose();\n                onClear?.();\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n    const needAddChangesButton = multiple && _applyChangesButton;\n    const applyChangesButton =\n        needAddChangesButton &&\n        cloneElement(_applyChangesButton, {\n            key: 'applyChangesButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-apply',\n            onClick: () => {\n                setSelectedValues();\n                onClose?.();\n                onApply?.({\n                    isMobile: false,\n                    searchValue,\n                    optionsCount: optionList.length,\n                    selectedOptionsCount: valuesArr.length,\n                });\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n\n    const emptyOptionsHintVisible =\n        optionList.length === 0 &&\n        !searchValue &&\n        !!emptyOptionsHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError;\n    const emptySearchOptionsHintVisible = !!(\n        optionList.length === 0 &&\n        searchValue &&\n        !!emptyOptionsSearchHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError\n    );\n\n    const optionsVisible = !loading && !emptySearchOptionsHintVisible && !emptyOptionsHintVisible && !internalError;\n    const footer = renderButtonsContainer({\n        applyChangesButton,\n        clearButton,\n        searchValue,\n        optionsCount: optionList.length,\n        loading,\n        isError: Boolean(internalError && innerErrorTrls),\n        emptyOptionsHintVisible: emptyOptionsHintVisible || emptySearchOptionsHintVisible,\n    });\n    const haveFooter = Boolean(footer);\n\n    return (\n        <Drop\n            {...props}\n            ref={optionsListRef}\n            autoFocusWhenOpened={false}\n            maxWidth={maxWidth}\n            width={dropWidth}\n            visible={\n                (optionList.length > 0 ||\n                    forceDropVisibleWithEmptyOptions ||\n                    emptyOptionsHintVisible ||\n                    emptySearchOptionsHintVisible ||\n                    internalError) &&\n                visible\n            }\n            placement={['bottom-left', 'top-left', 'bottom-right', 'top-right']}\n            activatorRef={activatorRef}\n            role={searchable ? 'status' : 'listbox'}\n            padding={plain ? 24 : 12}\n            keyboardNavigationMode=\"list\"\n            onClose={() => {\n                setForcedState('focus');\n                onClose?.();\n            }}\n            closeByClickOutside={false}\n            onKeyDownCapture={(event: KeyboardEvent) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    closedByKeyboardRef.current = true;\n                }\n            }}\n            widthEqualToActivator={widthEqualToActivator || loading}\n            forcePlacement\n            footer={footer}\n            onAfterExit={onDropClose}\n            onAppear={onDropOpen}\n            returnFocusOnClose={false}\n        >\n            <div className={styles.selectDropContainerWrapper} style={{ maxHeight: `${maxHeight}px` }}>\n                <div\n                    className={classnames(\n                        styles.selectDropContainer,\n                        { [styles.selectDropContainerPlain]: plain },\n                        { [styles.selectDropContainerWithFooter]: haveFooter }\n                    )}\n                >\n                    {internalError && innerErrorTrls && <SelectError innerErrorTrls={innerErrorTrls} reload={reload} />}\n                    {emptyOptionsHintVisible && <div className={styles.hint}>{emptyOptionsHint}</div>}\n                    {emptySearchOptionsHintVisible && <div className={styles.hint}>{emptyOptionsSearchHint}</div>}\n                    {loading && (\n                        <div className={styles.loading}>\n                            <Loader size={24} />\n                        </div>\n                    )}\n                    {optionsVisible && (\n                        <>\n                            {renderContentBefore && (\n                                <div data-qa=\"magritte-select-header\" className={styles.selectDropHeader}>\n                                    {renderContentBefore({\n                                        clearSelectedValuesAndClose,\n                                        searchValue,\n                                        setSearchValue,\n                                        optionsCount: optionList.length,\n                                    })}\n                                </div>\n                            )}\n                            <div\n                                className={classnames(styles.selectDrop, { [styles.selectDropPlain]: plain })}\n                                data-qa=\"magritte-select-option-list\"\n                            >\n                                {optionList.map((option) => {\n                                    const checked = Boolean(option.data && getChecked(option.data, values ?? []));\n                                    const disabled = !checked && (option.disabled || isLimitExceeded);\n                                    return (\n                                        <SelectOption\n                                            key={option.data.value}\n                                            name={name}\n                                            checked={checked}\n                                            onChange={handleChange}\n                                            render={renderItem}\n                                            disabled={disabled}\n                                            type={option.type || type}\n                                            plain={!!plain}\n                                            multiple={multiple}\n                                            data-qa={optionDataQa}\n                                            data={option.data}\n                                        />\n                                    );\n                                })}\n                            </div>\n                        </>\n                    )}\n                </div>\n            </div>\n        </Drop>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"SelectDrop.js","sources":["src/SelectDrop.tsx"],"sourcesContent":["import {\n    useCallback,\n    cloneElement,\n    useRef,\n    type ComponentProps,\n    type ReactNode,\n    type ReactElement,\n    type KeyboardEvent,\n    useId,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar/ActionBar';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { ButtonElement } from '@hh.ru/magritte-ui-button-stack';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { Drop, DropRole } from '@hh.ru/magritte-ui-drop';\nimport { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { SelectError } from '@hh.ru/magritte-ui-select/SelectError';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport {\n    OnChangeAction,\n    SelectDropProps,\n    RenderOptionTypeProps,\n    RenderButtonsContainerProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-drop.less';\n\nconst SelectOptionDefault = <DataType extends StaticDataFetcherItem>({\n    data,\n    input,\n    type,\n    plain,\n    checked,\n}: RenderOptionTypeProps<DataType>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {data.text}\n            </CellText>\n        );\n    }\n    if (type === 'label') {\n        return (\n            <Cell Element=\"div\" right={checked && plain ? <CheckOutlinedSize24 /> : undefined}>\n                <div className={classnames({ [styles.labelOption]: !plain })}>\n                    <CellText maxLines={1}>{data.text}</CellText>\n                </div>\n            </Cell>\n        );\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" left={input}>\n            <CellText maxLines={1}>{data.text}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({ applyChangesButton, loading }: RenderButtonsContainerProps): ReactNode => {\n    if (loading || !applyChangesButton) {\n        return null;\n    }\n    return <ActionBar primaryActions={applyChangesButton} />;\n};\n\nexport const getDropRole = (\n    clearButton: ButtonElement | undefined,\n    applyChangesButton: ButtonElement | undefined,\n    multiple: boolean | undefined\n): DropRole => {\n    const needAddChangesButton = multiple && Boolean(applyChangesButton);\n    const hasAnyButton = Boolean(clearButton) || needAddChangesButton;\n    return hasAnyButton ? 'dialog' : 'listbox';\n};\n\nexport const SelectDrop = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    activatorRef,\n    type,\n    name,\n    multiple,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    useInitialValuesOnClearAction,\n    loading,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    maxWidth,\n    value: values,\n    onChange,\n    onClose,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    plain,\n    searchable,\n    widthEqualToActivator,\n    forceDropVisibleWithEmptyOptions,\n    renderContentBefore,\n    setForcedState,\n    setSelectedValues,\n    maxHeight,\n    onDropClose,\n    onDropOpen,\n    emptyOptionsHint,\n    emptyOptionsSearchHint,\n    onApply,\n    onClear,\n    searchInProgress,\n    internalError,\n    reload,\n    innerErrorTrls,\n    optionDataQa,\n    dropWidth,\n    id,\n    ...props\n}: SelectDropProps<MultipleType, DataType>): ReactElement => {\n    const closedByKeyboardRef = useRef(false);\n    const listId = useId();\n    const valuesArr = Array.isArray(values) ? values : [values];\n    const handleChange: OnChangeAction<DataType> = useCallback(\n        (newValue, needToPut) => {\n            onChange(newValue, needToPut);\n\n            if (!multiple) {\n                onClose?.();\n            }\n\n            if (!multiple && closedByKeyboardRef.current) {\n                closedByKeyboardRef.current = false;\n                setForcedState('focus');\n                return;\n            }\n\n            if (multiple && searchValue) {\n                setForcedState('focusAndSelect');\n                return;\n            }\n            closedByKeyboardRef.current = false;\n            setForcedState(null);\n        },\n        [multiple, onChange, onClose, searchValue, setForcedState]\n    );\n\n    const clearSelectedValuesAndClose = () => {\n        if (useInitialValuesOnClearAction) {\n            setInitialValues();\n        } else {\n            clearSelectedValues();\n        }\n        onClose?.();\n    };\n    const applyTrl = useTranslation('Select', 'apply');\n    const clearTrl = useTranslation('Select', 'clear');\n    const clearButton =\n        _clearButton &&\n        cloneElement(_clearButton, {\n            key: 'clearButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-clear-action',\n            'aria-label': _clearButton.props['aria-label'] || clearTrl,\n            onClick: () => {\n                clearSelectedValuesAndClose();\n                onClear?.();\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n    const needAddChangesButton = multiple && _applyChangesButton;\n    const applyChangesButton =\n        needAddChangesButton &&\n        cloneElement(_applyChangesButton, {\n            key: 'applyChangesButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-apply',\n            'aria-label': _applyChangesButton.props['aria-label'] || applyTrl,\n            onClick: () => {\n                setSelectedValues();\n                onClose?.();\n                onApply?.({\n                    isMobile: false,\n                    searchValue,\n                    optionsCount: optionList.length,\n                    selectedOptionsCount: valuesArr.length,\n                });\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n\n    const emptyOptionsHintVisible =\n        optionList.length === 0 &&\n        !searchValue &&\n        !!emptyOptionsHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError;\n    const emptySearchOptionsHintVisible = !!(\n        optionList.length === 0 &&\n        searchValue &&\n        !!emptyOptionsSearchHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError\n    );\n\n    const optionsVisible = !loading && !emptySearchOptionsHintVisible && !emptyOptionsHintVisible && !internalError;\n    const footer = renderButtonsContainer({\n        applyChangesButton,\n        clearButton,\n        searchValue,\n        optionsCount: optionList.length,\n        loading,\n        isError: Boolean(internalError && innerErrorTrls),\n        emptyOptionsHintVisible: emptyOptionsHintVisible || emptySearchOptionsHintVisible,\n    });\n    const haveFooter = Boolean(footer);\n\n    const dropRole = getDropRole(_clearButton, _applyChangesButton, multiple);\n    const dropA11YProps = dropRole === 'listbox' ? { 'aria-owns': listId, 'aria-multiselectable': multiple } : {};\n    const listA11YProps = dropRole === 'dialog' ? { role: 'listbox', 'aria-multiselectable': multiple } : {};\n\n    return (\n        <Drop\n            {...props}\n            ref={optionsListRef}\n            autoFocusWhenOpened={false}\n            maxWidth={maxWidth}\n            width={dropWidth}\n            visible={\n                (optionList.length > 0 ||\n                    forceDropVisibleWithEmptyOptions ||\n                    emptyOptionsHintVisible ||\n                    emptySearchOptionsHintVisible ||\n                    internalError) &&\n                visible\n            }\n            placement={['bottom-left', 'top-left', 'bottom-right', 'top-right']}\n            activatorRef={activatorRef}\n            padding={plain ? 24 : 12}\n            keyboardNavigationMode=\"list\"\n            onClose={() => {\n                setForcedState('focus');\n                onClose?.();\n            }}\n            closeByClickOutside={false}\n            onKeyDownCapture={(event: KeyboardEvent) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    closedByKeyboardRef.current = true;\n                }\n            }}\n            widthEqualToActivator={widthEqualToActivator || loading}\n            forcePlacement\n            footer={footer}\n            onAfterExit={onDropClose}\n            onAppear={onDropOpen}\n            returnFocusOnClose={false}\n            id={id}\n            role={dropRole}\n            {...dropA11YProps}\n        >\n            <div className={styles.selectDropContainerWrapper} style={{ maxHeight: `${maxHeight}px` }}>\n                <div\n                    className={classnames(\n                        styles.selectDropContainer,\n                        { [styles.selectDropContainerPlain]: plain },\n                        { [styles.selectDropContainerWithFooter]: haveFooter }\n                    )}\n                >\n                    {internalError && innerErrorTrls && <SelectError innerErrorTrls={innerErrorTrls} reload={reload} />}\n                    {emptyOptionsHintVisible && <div className={styles.hint}>{emptyOptionsHint}</div>}\n                    {emptySearchOptionsHintVisible && <div className={styles.hint}>{emptyOptionsSearchHint}</div>}\n                    {loading && (\n                        <div className={styles.loading}>\n                            <Loader size={24} />\n                        </div>\n                    )}\n                    {optionsVisible && (\n                        <>\n                            {renderContentBefore && (\n                                <div data-qa=\"magritte-select-header\" className={styles.selectDropHeader}>\n                                    {renderContentBefore({\n                                        clearSelectedValuesAndClose,\n                                        searchValue,\n                                        setSearchValue,\n                                        optionsCount: optionList.length,\n                                    })}\n                                </div>\n                            )}\n                            <div\n                                id={listId}\n                                className={classnames(styles.selectDrop, { [styles.selectDropPlain]: plain })}\n                                data-qa=\"magritte-select-option-list\"\n                                {...listA11YProps}\n                            >\n                                {optionList.map((option) => {\n                                    const checked = Boolean(option.data && getChecked(option.data, values ?? []));\n                                    const disabled = !checked && (option.disabled || isLimitExceeded);\n                                    return (\n                                        <SelectOption\n                                            key={option.data.value}\n                                            name={name}\n                                            checked={checked}\n                                            onChange={handleChange}\n                                            render={renderItem}\n                                            disabled={disabled}\n                                            type={option.type || type}\n                                            plain={!!plain}\n                                            multiple={multiple}\n                                            data-qa={optionDataQa}\n                                            data={option.data}\n                                        />\n                                    );\n                                })}\n                            </div>\n                        </>\n                    )}\n                </div>\n            </div>\n        </Drop>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/SelectEmptyHint.js

@@ -6,7 +6,7 @@ import { VSpacing } from '@hh.ru/magritte-ui-spacing';
 import { Title } from '@hh.ru/magritte-ui-title';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"select-empty-hint":"magritte-select-empty-hint___B39XJ_12-5-4","selectEmptyHint":"magritte-select-empty-hint___B39XJ_12-5-4","icon":"magritte-icon___F0GQx_12-5-4","icon-init":"magritte-icon-init___GWK-V_12-5-4","iconInit":"magritte-icon-init___GWK-V_12-5-4","icon-search":"magritte-icon-search___ZsqO-_12-5-4","iconSearch":"magritte-icon-search___ZsqO-_12-5-4"};
+var styles = {"select-empty-hint":"magritte-select-empty-hint___B39XJ_12-6-0","selectEmptyHint":"magritte-select-empty-hint___B39XJ_12-6-0","icon":"magritte-icon___F0GQx_12-6-0","icon-init":"magritte-icon-init___GWK-V_12-6-0","iconInit":"magritte-icon-init___GWK-V_12-6-0","icon-search":"magritte-icon-search___ZsqO-_12-6-0","iconSearch":"magritte-icon-search___ZsqO-_12-6-0"};
 
 const SelectEmptyHint = ({ title, titleElement, description, type }) => {
     return (jsxs("div", { className: styles.selectEmptyHint, children: [type === 'init' && (jsx("div", { className: classnames(styles.icon, styles.iconInit), children: jsx(MagnifierOutlinedSize24, {}) })), type === 'emptySearch' && (jsx("div", { className: classnames(styles.icon, styles.iconSearch), children: jsx(EmojiHalfsadOutlinedSize24, {}) })), jsx(VSpacing, { default: 32 }), jsx(Title, { Element: titleElement, size: "small", children: title }), jsx(VSpacing, { default: 8 }), Boolean(description) && (jsx(Text, { typography: "paragraph-2-regular", style: "secondary", children: description }))] }));

package/SelectError.js

@@ -7,7 +7,7 @@ import { VSpacing } from '@hh.ru/magritte-ui-spacing';
 import { Title } from '@hh.ru/magritte-ui-title';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"error-container":"magritte-error-container___t9B5w_12-5-4","errorContainer":"magritte-error-container___t9B5w_12-5-4"};
+var styles = {"error-container":"magritte-error-container___t9B5w_12-6-0","errorContainer":"magritte-error-container___t9B5w_12-6-0"};
 
 const SelectError = ({ innerErrorTrls, reload, }) => {
     const { isMobile } = useBreakpoint();

package/SelectModal.js

@@ -2,6 +2,7 @@ import './index.css';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useCallback, cloneElement } from 'react';
 import classnames from 'classnames';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { ActionBar } from '@hh.ru/magritte-ui-action-bar';
 import { CellText, Cell } from '@hh.ru/magritte-ui-cell';
 import { CrossOutlinedSize24, CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
@@ -23,7 +24,7 @@ import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import '@hh.ru/magritte-ui-checkbox-radio';
 
-var styles = {"select-modal-wrapper":"magritte-select-modal-wrapper___5BhtC_12-5-4","selectModalWrapper":"magritte-select-modal-wrapper___5BhtC_12-5-4","select-modal":"magritte-select-modal___f9wc6_12-5-4","selectModal":"magritte-select-modal___f9wc6_12-5-4","select-modal_plain":"magritte-select-modal_plain___0rP39_12-5-4","selectModalPlain":"magritte-select-modal_plain___0rP39_12-5-4","label-option":"magritte-label-option___kFAuR_12-5-4","labelOption":"magritte-label-option___kFAuR_12-5-4","layer-full-height":"magritte-layer-full-height___cJX-K_12-5-4","layerFullHeight":"magritte-layer-full-height___cJX-K_12-5-4"};
+var styles = {"select-modal-wrapper":"magritte-select-modal-wrapper___5BhtC_12-6-0","selectModalWrapper":"magritte-select-modal-wrapper___5BhtC_12-6-0","select-modal":"magritte-select-modal___f9wc6_12-6-0","selectModal":"magritte-select-modal___f9wc6_12-6-0","select-modal_plain":"magritte-select-modal_plain___0rP39_12-6-0","selectModalPlain":"magritte-select-modal_plain___0rP39_12-6-0","label-option":"magritte-label-option___kFAuR_12-6-0","labelOption":"magritte-label-option___kFAuR_12-6-0","layer-full-height":"magritte-layer-full-height___cJX-K_12-6-0","layerFullHeight":"magritte-layer-full-height___cJX-K_12-6-0"};
 
 const SelectOptionDefault = ({ data, input, type, plain, checked, }) => {
     if (type === 'delimiter') {
@@ -49,6 +50,10 @@ const SelectModal = ({ type, name, multiple, applyChangesButton: _applyChangesBu
     const [alertVisible, setAlertVisible] = useState(false);
     const onCloseAlert = () => setAlertVisible(false);
     const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);
+    const applyTrl = useTranslation('Select', 'apply');
+    const clearTrl = useTranslation('Select', 'clear');
+    const searchTrl = useTranslation('Select', 'search');
+    const closeTrl = useTranslation('Select', 'close');
     const onCloseWithAlertCheck = () => {
         if (showAlertOnExitWithoutSaving && multiple) {
             // eslint-disable-next-line no-nested-ternary
@@ -91,6 +96,7 @@ const SelectModal = ({ type, name, multiple, applyChangesButton: _applyChangesBu
             size: 'medium',
             'data-qa': 'magritte-select-clear-action',
             disabled: loading,
+            'aria-label': _clearButton.props['aria-label'] || clearTrl,
             onClick: () => {
                 clearSelectedValuesAndClose();
                 onClear?.();
@@ -103,6 +109,7 @@ const SelectModal = ({ type, name, multiple, applyChangesButton: _applyChangesBu
             size: 'medium',
             'data-qa': 'magritte-select-apply',
             disabled: loading,
+            'aria-label': _applyChangesButton.props['aria-label'] || applyTrl,
             onClick: () => {
                 setSelectedValues();
                 onClose?.();
@@ -135,10 +142,12 @@ const SelectModal = ({ type, name, multiple, applyChangesButton: _applyChangesBu
                     loading,
                     isError: Boolean(internalError && innerErrorTrls),
                     emptyOptionsHintVisible: emptyOptionsHintVisible || emptySearchOptionsHintVisible,
-                }), options: searchable && (jsx(SearchInput, { clearable: true, size: "medium", value: searchValue, onChange: setSearchValue, "data-qa": "select-modal-search-input", autoComplete: "off" })), onClose: () => {
+                }), options: searchable && (jsx(SearchInput, { clearable: true, size: "medium", value: searchValue, onChange: setSearchValue, "data-qa": "select-modal-search-input", autoComplete: "off", "data-magritte-select-seach-input": true, "aria-label": searchTrl })), onClose: () => {
                     setForcedState('focus');
                     onCloseWithAlertCheck?.();
-                }, actions: [jsx(CrossOutlinedSize24, { "data-qa": "select-modal-close", onClick: onCloseWithAlertCheck }, "1")], children: jsxs("div", { className: styles.selectModalWrapper, children: [internalError && innerErrorTrls && (jsx("div", { className: styles.layerFullHeight, children: jsx(SelectError, { innerErrorTrls: innerErrorTrls, reload: reload }) })), emptyOptionsHintVisible && jsx("div", { className: styles.layerFullHeight, children: emptyOptionsHint }), emptySearchOptionsHintVisible && (jsx("div", { className: styles.layerFullHeight, children: emptyOptionsSearchHint })), loading && (jsx("div", { className: styles.layerFullHeight, children: jsx(Loader, { size: 24 }) })), optionsVisible && (jsx("div", { className: classnames(styles.selectModal, { [styles.selectModalPlain]: plain }), "data-qa": "magritte-select-option-list", children: optionList.map((option) => {
+                }, actions: [
+                    jsx(CrossOutlinedSize24, { "data-qa": "select-modal-close", onClick: onCloseWithAlertCheck, "aria-label": closeTrl }, "1"),
+                ], children: jsxs("div", { className: styles.selectModalWrapper, children: [internalError && innerErrorTrls && (jsx("div", { className: styles.layerFullHeight, children: jsx(SelectError, { innerErrorTrls: innerErrorTrls, reload: reload }) })), emptyOptionsHintVisible && jsx("div", { className: styles.layerFullHeight, children: emptyOptionsHint }), emptySearchOptionsHintVisible && (jsx("div", { className: styles.layerFullHeight, children: emptyOptionsSearchHint })), loading && (jsx("div", { className: styles.layerFullHeight, children: jsx(Loader, { size: 24 }) })), optionsVisible && (jsx("div", { className: classnames(styles.selectModal, { [styles.selectModalPlain]: plain }), "data-qa": "magritte-select-option-list", role: 'listbox', children: optionList.map((option) => {
                                 const checked = Boolean(option.data && getChecked(option.data, values ?? []));
                                 const disabled = !checked && (option.disabled || isLimitExceeded);
                                 return (jsx(SelectOption, { name: name, checked: checked, onChange: handleChange, render: renderItem, disabled: disabled, type: option.type || type, plain: !!plain, multiple: multiple, "data-qa": optionDataQa, data: option.data }, option.data.value));

package/SelectModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectModal.js","sources":["src/SelectModal.tsx"],"sourcesContent":["import { useCallback, ReactElement, cloneElement, ComponentProps, ReactNode, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CrossOutlinedSize24, CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Modal } from '@hh.ru/magritte-ui-modal';\nimport { SelectError } from '@hh.ru/magritte-ui-select/SelectError';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n    OnChangeAction,\n    SelectModalProps,\n    RenderOptionTypeProps,\n    RenderButtonsContainerProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-modal.less';\n\nconst SelectOptionDefault = <DataType extends StaticDataFetcherItem>({\n    data,\n    input,\n    type,\n    plain,\n    checked,\n}: RenderOptionTypeProps<DataType>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {data.text}\n            </CellText>\n        );\n    }\n    if (type === 'label') {\n        return (\n            <Cell\n                Element=\"div\"\n                right={checked && plain ? <CheckOutlinedSize24 /> : undefined}\n                vertPadding={plain}\n                showDivider={plain}\n            >\n                <div className={classnames({ [styles.labelOption]: !plain })}>\n                    <CellText maxLines={1}>{data.text}</CellText>\n                </div>\n            </Cell>\n        );\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" left={input} vertPadding={plain} showDivider={plain}>\n            <CellText maxLines={1}>{data.text}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({\n    applyChangesButton,\n    clearButton,\n    isError,\n    emptyOptionsHintVisible,\n}: RenderButtonsContainerProps): ReactNode => {\n    if (isError || emptyOptionsHintVisible) {\n        return null;\n    }\n    const primaryActions = [applyChangesButton, clearButton].filter((btn) => btn);\n    if (primaryActions.length === 0) {\n        return null;\n    }\n    return <ActionBar secondaryActions={clearButton} primaryActions={applyChangesButton} />;\n};\n\nexport const SelectModal = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    type,\n    name,\n    multiple,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    useInitialValuesOnClearAction,\n    loading,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    value: values,\n    onChange,\n    onClose,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    plain,\n    searchable,\n    setForcedState,\n    setSelectedValues,\n    emptyOptionsHint,\n    emptyOptionsSearchHint,\n    onApply,\n    onClear,\n    searchInProgress,\n    internalError,\n    reload,\n    innerErrorTrls,\n    optionDataQa,\n    renderAlertOnExitWithoutSaving,\n    initialValuesOnOpening,\n    internalLoading,\n    ...modalProps\n}: SelectModalProps<MultipleType, DataType>): ReactElement => {\n    const valuesArr = Array.isArray(values) ? values : [values];\n    const [alertVisible, setAlertVisible] = useState(false);\n    const onCloseAlert = () => setAlertVisible(false);\n    const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n\n    const onCloseWithAlertCheck = () => {\n        if (showAlertOnExitWithoutSaving && multiple) {\n            // eslint-disable-next-line no-nested-ternary\n            const currentValues = Array.isArray(values)\n                ? values.map((item) => item.value)\n                : values\n                  ? [values.value]\n                  : [];\n            const haveUnsavingChanges = !isArraysEquals<string>(\n                initialValuesOnOpening.current?.map((item) => item.value) ?? [],\n                currentValues\n            );\n            if (haveUnsavingChanges) {\n                setAlertVisible(true);\n            } else {\n                onClose?.();\n            }\n        } else {\n            onClose?.();\n        }\n    };\n\n    const handleChange: OnChangeAction<DataType> = useCallback(\n        (newValue, needToPut) => {\n            onChange(newValue, needToPut);\n            if (!multiple) {\n                onClose?.();\n            }\n            setForcedState(null);\n        },\n        [multiple, onChange, onClose, setForcedState]\n    );\n\n    const clearSelectedValuesAndClose = () => {\n        if (useInitialValuesOnClearAction) {\n            setInitialValues();\n        } else {\n            clearSelectedValues();\n        }\n        onClose?.();\n    };\n    const clearButton =\n        _clearButton &&\n        cloneElement(_clearButton, {\n            key: 'clearButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-clear-action',\n            disabled: loading,\n            onClick: () => {\n                clearSelectedValuesAndClose();\n                onClear?.();\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n    const needAddChangesButton = multiple && _applyChangesButton;\n    const applyChangesButton =\n        needAddChangesButton &&\n        cloneElement(_applyChangesButton, {\n            key: 'applyChangesButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-apply',\n            disabled: loading,\n            onClick: () => {\n                setSelectedValues();\n                onClose?.();\n                onApply?.({\n                    isMobile: false,\n                    searchValue,\n                    optionsCount: optionList.length,\n                    selectedOptionsCount: valuesArr.length,\n                });\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n\n    const emptyOptionsHintVisible =\n        optionList.length === 0 &&\n        !searchValue &&\n        !!emptyOptionsHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError;\n    const emptySearchOptionsHintVisible = !!(\n        optionList.length === 0 &&\n        searchValue &&\n        !!emptyOptionsSearchHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError\n    );\n\n    const optionsVisible = !loading && !emptySearchOptionsHintVisible && !emptyOptionsHintVisible && !internalError;\n\n    return (\n        <>\n            <Modal\n                {...modalProps}\n                size={modalProps?.size || 'small'}\n                height={searchable ? 'full-screen' : modalProps?.height}\n                ref={optionsListRef}\n                visible={visible}\n                footer={renderButtonsContainer({\n                    applyChangesButton,\n                    clearButton,\n                    searchValue,\n                    optionsCount: optionList.length,\n                    loading,\n                    isError: Boolean(internalError && innerErrorTrls),\n                    emptyOptionsHintVisible: emptyOptionsHintVisible || emptySearchOptionsHintVisible,\n                })}\n                options={\n                    searchable && (\n                        <SearchInput\n                            clearable\n                            size=\"medium\"\n                            value={searchValue}\n                            onChange={setSearchValue}\n                            data-qa=\"select-modal-search-input\"\n                            autoComplete=\"off\"\n                        />\n                    )\n                }\n                onClose={() => {\n                    setForcedState('focus');\n                    onCloseWithAlertCheck?.();\n                }}\n                actions={[<CrossOutlinedSize24 key=\"1\" data-qa=\"select-modal-close\" onClick={onCloseWithAlertCheck} />]}\n            >\n                <div className={styles.selectModalWrapper}>\n                    {internalError && innerErrorTrls && (\n                        <div className={styles.layerFullHeight}>\n                            <SelectError innerErrorTrls={innerErrorTrls} reload={reload} />\n                        </div>\n                    )}\n                    {emptyOptionsHintVisible && <div className={styles.layerFullHeight}>{emptyOptionsHint}</div>}\n                    {emptySearchOptionsHintVisible && (\n                        <div className={styles.layerFullHeight}>{emptyOptionsSearchHint}</div>\n                    )}\n                    {loading && (\n                        <div className={styles.layerFullHeight}>\n                            <Loader size={24} />\n                        </div>\n                    )}\n                    {optionsVisible && (\n                        <div\n                            className={classnames(styles.selectModal, { [styles.selectModalPlain]: plain })}\n                            data-qa=\"magritte-select-option-list\"\n                        >\n                            {optionList.map((option) => {\n                                const checked = Boolean(option.data && getChecked(option.data, values ?? []));\n                                const disabled = !checked && (option.disabled || isLimitExceeded);\n                                return (\n                                    <SelectOption\n                                        key={option.data.value}\n                                        name={name}\n                                        checked={checked}\n                                        onChange={handleChange}\n                                        render={renderItem}\n                                        disabled={disabled}\n                                        type={option.type || type}\n                                        plain={!!plain}\n                                        multiple={multiple}\n                                        data-qa={optionDataQa}\n                                        data={option.data}\n                                    />\n                                );\n                            })}\n                        </div>\n                    )}\n                </div>\n            </Modal>\n            {renderAlertOnExitWithoutSaving?.({\n                alertVisible,\n                onCloseAlert,\n                onClosePickerAndAlert: () => {\n                    onCloseAlert();\n                    onClose?.();\n                },\n            })}\n        </>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"SelectModal.js","sources":["src/SelectModal.tsx"],"sourcesContent":["import { useCallback, ReactElement, cloneElement, ComponentProps, ReactNode, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CrossOutlinedSize24, CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Modal } from '@hh.ru/magritte-ui-modal';\nimport { SelectError } from '@hh.ru/magritte-ui-select/SelectError';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n    OnChangeAction,\n    SelectModalProps,\n    RenderOptionTypeProps,\n    RenderButtonsContainerProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-modal.less';\n\nconst SelectOptionDefault = <DataType extends StaticDataFetcherItem>({\n    data,\n    input,\n    type,\n    plain,\n    checked,\n}: RenderOptionTypeProps<DataType>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {data.text}\n            </CellText>\n        );\n    }\n    if (type === 'label') {\n        return (\n            <Cell\n                Element=\"div\"\n                right={checked && plain ? <CheckOutlinedSize24 /> : undefined}\n                vertPadding={plain}\n                showDivider={plain}\n            >\n                <div className={classnames({ [styles.labelOption]: !plain })}>\n                    <CellText maxLines={1}>{data.text}</CellText>\n                </div>\n            </Cell>\n        );\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" left={input} vertPadding={plain} showDivider={plain}>\n            <CellText maxLines={1}>{data.text}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({\n    applyChangesButton,\n    clearButton,\n    isError,\n    emptyOptionsHintVisible,\n}: RenderButtonsContainerProps): ReactNode => {\n    if (isError || emptyOptionsHintVisible) {\n        return null;\n    }\n    const primaryActions = [applyChangesButton, clearButton].filter((btn) => btn);\n    if (primaryActions.length === 0) {\n        return null;\n    }\n    return <ActionBar secondaryActions={clearButton} primaryActions={applyChangesButton} />;\n};\n\nexport const SelectModal = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    type,\n    name,\n    multiple,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    useInitialValuesOnClearAction,\n    loading,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    value: values,\n    onChange,\n    onClose,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    plain,\n    searchable,\n    setForcedState,\n    setSelectedValues,\n    emptyOptionsHint,\n    emptyOptionsSearchHint,\n    onApply,\n    onClear,\n    searchInProgress,\n    internalError,\n    reload,\n    innerErrorTrls,\n    optionDataQa,\n    renderAlertOnExitWithoutSaving,\n    initialValuesOnOpening,\n    internalLoading,\n    ...modalProps\n}: SelectModalProps<MultipleType, DataType>): ReactElement => {\n    const valuesArr = Array.isArray(values) ? values : [values];\n    const [alertVisible, setAlertVisible] = useState(false);\n    const onCloseAlert = () => setAlertVisible(false);\n    const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n    const applyTrl = useTranslation('Select', 'apply');\n    const clearTrl = useTranslation('Select', 'clear');\n    const searchTrl = useTranslation('Select', 'search');\n    const closeTrl = useTranslation('Select', 'close');\n\n    const onCloseWithAlertCheck = () => {\n        if (showAlertOnExitWithoutSaving && multiple) {\n            // eslint-disable-next-line no-nested-ternary\n            const currentValues = Array.isArray(values)\n                ? values.map((item) => item.value)\n                : values\n                  ? [values.value]\n                  : [];\n            const haveUnsavingChanges = !isArraysEquals<string>(\n                initialValuesOnOpening.current?.map((item) => item.value) ?? [],\n                currentValues\n            );\n            if (haveUnsavingChanges) {\n                setAlertVisible(true);\n            } else {\n                onClose?.();\n            }\n        } else {\n            onClose?.();\n        }\n    };\n\n    const handleChange: OnChangeAction<DataType> = useCallback(\n        (newValue, needToPut) => {\n            onChange(newValue, needToPut);\n            if (!multiple) {\n                onClose?.();\n            }\n            setForcedState(null);\n        },\n        [multiple, onChange, onClose, setForcedState]\n    );\n\n    const clearSelectedValuesAndClose = () => {\n        if (useInitialValuesOnClearAction) {\n            setInitialValues();\n        } else {\n            clearSelectedValues();\n        }\n        onClose?.();\n    };\n    const clearButton =\n        _clearButton &&\n        cloneElement(_clearButton, {\n            key: 'clearButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-clear-action',\n            disabled: loading,\n            'aria-label': _clearButton.props['aria-label'] || clearTrl,\n            onClick: () => {\n                clearSelectedValuesAndClose();\n                onClear?.();\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n    const needAddChangesButton = multiple && _applyChangesButton;\n    const applyChangesButton =\n        needAddChangesButton &&\n        cloneElement(_applyChangesButton, {\n            key: 'applyChangesButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-apply',\n            disabled: loading,\n            'aria-label': _applyChangesButton.props['aria-label'] || applyTrl,\n            onClick: () => {\n                setSelectedValues();\n                onClose?.();\n                onApply?.({\n                    isMobile: false,\n                    searchValue,\n                    optionsCount: optionList.length,\n                    selectedOptionsCount: valuesArr.length,\n                });\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n\n    const emptyOptionsHintVisible =\n        optionList.length === 0 &&\n        !searchValue &&\n        !!emptyOptionsHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError;\n    const emptySearchOptionsHintVisible = !!(\n        optionList.length === 0 &&\n        searchValue &&\n        !!emptyOptionsSearchHint &&\n        !loading &&\n        !searchInProgress &&\n        !internalError\n    );\n\n    const optionsVisible = !loading && !emptySearchOptionsHintVisible && !emptyOptionsHintVisible && !internalError;\n\n    return (\n        <>\n            <Modal\n                {...modalProps}\n                size={modalProps?.size || 'small'}\n                height={searchable ? 'full-screen' : modalProps?.height}\n                ref={optionsListRef}\n                visible={visible}\n                footer={renderButtonsContainer({\n                    applyChangesButton,\n                    clearButton,\n                    searchValue,\n                    optionsCount: optionList.length,\n                    loading,\n                    isError: Boolean(internalError && innerErrorTrls),\n                    emptyOptionsHintVisible: emptyOptionsHintVisible || emptySearchOptionsHintVisible,\n                })}\n                options={\n                    searchable && (\n                        <SearchInput\n                            clearable\n                            size=\"medium\"\n                            value={searchValue}\n                            onChange={setSearchValue}\n                            data-qa=\"select-modal-search-input\"\n                            autoComplete=\"off\"\n                            data-magritte-select-seach-input\n                            aria-label={searchTrl}\n                        />\n                    )\n                }\n                onClose={() => {\n                    setForcedState('focus');\n                    onCloseWithAlertCheck?.();\n                }}\n                actions={[\n                    <CrossOutlinedSize24\n                        key=\"1\"\n                        data-qa=\"select-modal-close\"\n                        onClick={onCloseWithAlertCheck}\n                        aria-label={closeTrl}\n                    />,\n                ]}\n            >\n                <div className={styles.selectModalWrapper}>\n                    {internalError && innerErrorTrls && (\n                        <div className={styles.layerFullHeight}>\n                            <SelectError innerErrorTrls={innerErrorTrls} reload={reload} />\n                        </div>\n                    )}\n                    {emptyOptionsHintVisible && <div className={styles.layerFullHeight}>{emptyOptionsHint}</div>}\n                    {emptySearchOptionsHintVisible && (\n                        <div className={styles.layerFullHeight}>{emptyOptionsSearchHint}</div>\n                    )}\n                    {loading && (\n                        <div className={styles.layerFullHeight}>\n                            <Loader size={24} />\n                        </div>\n                    )}\n                    {optionsVisible && (\n                        <div\n                            className={classnames(styles.selectModal, { [styles.selectModalPlain]: plain })}\n                            data-qa=\"magritte-select-option-list\"\n                            role={'listbox'}\n                        >\n                            {optionList.map((option) => {\n                                const checked = Boolean(option.data && getChecked(option.data, values ?? []));\n                                const disabled = !checked && (option.disabled || isLimitExceeded);\n                                return (\n                                    <SelectOption\n                                        key={option.data.value}\n                                        name={name}\n                                        checked={checked}\n                                        onChange={handleChange}\n                                        render={renderItem}\n                                        disabled={disabled}\n                                        type={option.type || type}\n                                        plain={!!plain}\n                                        multiple={multiple}\n                                        data-qa={optionDataQa}\n                                        data={option.data}\n                                    />\n                                );\n                            })}\n                        </div>\n                    )}\n                </div>\n            </Modal>\n            {renderAlertOnExitWithoutSaving?.({\n                alertVisible,\n                onCloseAlert,\n                onClosePickerAndAlert: () => {\n                    onCloseAlert();\n                    onClose?.();\n                },\n            })}\n        </>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/SelectOption.js

@@ -8,7 +8,7 @@ import { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/Checkabl
 import { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"select-option-plain":"magritte-select-option-plain___dfz4a_12-5-4","selectOptionPlain":"magritte-select-option-plain___dfz4a_12-5-4","select-option-plain_active":"magritte-select-option-plain_active___AQSQS_12-5-4","selectOptionPlainActive":"magritte-select-option-plain_active___AQSQS_12-5-4","select-delimiter":"magritte-select-delimiter___WyeR6_12-5-4","selectDelimiter":"magritte-select-delimiter___WyeR6_12-5-4"};
+var styles = {"select-option-plain":"magritte-select-option-plain___dfz4a_12-6-0","selectOptionPlain":"magritte-select-option-plain___dfz4a_12-6-0","select-option-plain_active":"magritte-select-option-plain_active___AQSQS_12-6-0","selectOptionPlainActive":"magritte-select-option-plain_active___AQSQS_12-6-0","select-delimiter":"magritte-select-delimiter___WyeR6_12-6-0","selectDelimiter":"magritte-select-delimiter___WyeR6_12-6-0"};
 
 const CheckableComponent = ({ type, value, checked, name, onChange, 'data-qa': dataQa, }) => {
     if (type === 'label') {
@@ -45,14 +45,18 @@ const SelectOption = ({ checked, name, disabled, render, type, onChange, plain,
         return (jsx("div", { className: classnames({ [styles.selectDelimiter]: !plain }), children: jsx(Text, { typography: "label-3-regular", children: render(renderProps) }) }));
     }
     if (plain) {
-        return (jsx("div", { className: classnames(styles.selectOptionPlain, { [styles.selectOptionPlainActive]: !disabled }), "data-qa": `magritte-select-option-${data.value}`, "data-magritte-select-option": data.value, onClick: () => {
+        return (jsx("div", { className: classnames(styles.selectOptionPlain, { [styles.selectOptionPlainActive]: !disabled }), "data-qa": `magritte-select-option-${data.value}`, "data-magritte-select-option": data.value, role: "option", "aria-selected": checked, tabIndex: disabled ? -1 : 0, onClick: () => {
                 if (disabled) {
                     return;
                 }
                 onChange(data, !checked);
+            }, onKeyDown: (event) => {
+                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
+                    onChange(data, !checked);
+                }
             }, children: jsx(DisabledContext.Provider, { value: !!disabled, children: render(renderProps) }) }));
     }
-    return (jsx(CheckableCardElement, { Element: "label", padding: 16, borderRadius: 12, flexible: false, checked: checked, "data-magritte-select-option": data.value, focusVisible: focusVisible, "data-qa": `magritte-select-option-${data.value}`, disabled: disabled, toneHover: true, onClick: () => {
+    return (jsx(CheckableCardElement, { Element: "label", role: "option", padding: 16, borderRadius: 12, flexible: false, checked: checked, "data-magritte-select-option": data.value, focusVisible: focusVisible, "data-qa": `magritte-select-option-${data.value}`, disabled: disabled, "aria-selected": checked, toneHover: true, onClick: () => {
             if (type === 'label' && !disabled) {
                 onChange(data, !checked);
             }

package/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["src/SelectOption.tsx"],"sourcesContent":["import { useState, useRef, ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';\nimport { SelectOptionProps, CheckableComponentProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './select-option.less';\n\nconst CheckableComponent = <DataType extends StaticDataFetcherItem>({\n    type,\n    value,\n    checked,\n    name,\n    onChange,\n    'data-qa': dataQa,\n}: CheckableComponentProps<DataType>): ReactElement => {\n    if (type === 'label') {\n        return <input type=\"hidden\" name={name} value={value.value} />;\n    }\n    if (type === 'radio') {\n        return (\n            <Radio\n                data-focus-visible-skip=\"true\"\n                data-qa={dataQa}\n                tabIndex={-1}\n                name={name}\n                value={value.value}\n                checked={checked}\n                onChange={(event) => {\n                    onChange(value, event.target.checked);\n                }}\n            />\n        );\n    }\n    return (\n        <Checkbox\n            data-focus-visible-skip=\"true\"\n            data-qa={dataQa}\n            tabIndex={-1}\n            name={name}\n            value={value.value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    );\n};\n\nCheckableComponent.displayName = 'SelectInputRender';\n\nexport const SelectOption = <DataType extends StaticDataFetcherItem>({\n    checked,\n    name,\n    disabled,\n    render,\n    type,\n    onChange,\n    plain,\n    data,\n    multiple,\n    isMobile,\n    'data-qa': dataQa,\n}: SelectOptionProps<DataType>): ReactElement => {\n    const [focusVisible, setFocusVisible] = useState(false);\n    const focusedByMouseRef = useRef(false);\n    const input = CheckableComponent<DataType>({ type, value: data, checked, name, onChange, 'data-qa': dataQa });\n    const renderProps = {\n        data,\n        checked,\n        multiple,\n        name,\n        onChange,\n        input,\n        type,\n        plain,\n        disabled,\n        render,\n        isMobile,\n    };\n    if (type === 'delimiter') {\n        return (\n            <div className={classnames({ [styles.selectDelimiter]: !plain })}>\n                <Text typography=\"label-3-regular\">{render(renderProps)}</Text>\n            </div>\n        );\n    }\n    if (plain) {\n        return (\n            <div\n                className={classnames(styles.selectOptionPlain, { [styles.selectOptionPlainActive]: !disabled })}\n                data-qa={`magritte-select-option-${data.value}`}\n                data-magritte-select-option={data.value}\n                onClick={() => {\n                    if (disabled) {\n                        return;\n                    }\n                    onChange(data, !checked);\n                }}\n            >\n                <DisabledContext.Provider value={!!disabled}>{render(renderProps)}</DisabledContext.Provider>\n            </div>\n        );\n    }\n    return (\n        <CheckableCardElement\n            Element=\"label\"\n            padding={16}\n            borderRadius={12}\n            flexible={false}\n            checked={checked}\n            data-magritte-select-option={data.value}\n            focusVisible={focusVisible}\n            data-qa={`magritte-select-option-${data.value}`}\n            disabled={disabled}\n            toneHover\n            onClick={() => {\n                if (type === 'label' && !disabled) {\n                    onChange(data, !checked);\n                }\n            }}\n            onMouseDown={() => {\n                focusedByMouseRef.current = true;\n            }}\n            onKeyDown={(event) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    onChange(data, !checked);\n                    event.preventDefault();\n                    setFocusVisible(true);\n                }\n            }}\n            onFocus={(event) => {\n                if (!event.target.dataset.focusVisibleSkip) {\n                    return;\n                }\n                if (focusedByMouseRef.current) {\n                    focusedByMouseRef.current = false;\n                    return;\n                }\n                setFocusVisible(true);\n            }}\n            onBlur={() => {\n                if (focusVisible) {\n                    setFocusVisible(false);\n                }\n            }}\n        >\n            {render(renderProps)}\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"SelectOption.js","sources":["src/SelectOption.tsx"],"sourcesContent":["import { useState, useRef, ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';\nimport { SelectOptionProps, CheckableComponentProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './select-option.less';\n\nconst CheckableComponent = <DataType extends StaticDataFetcherItem>({\n    type,\n    value,\n    checked,\n    name,\n    onChange,\n    'data-qa': dataQa,\n}: CheckableComponentProps<DataType>): ReactElement => {\n    if (type === 'label') {\n        return <input type=\"hidden\" name={name} value={value.value} />;\n    }\n    if (type === 'radio') {\n        return (\n            <Radio\n                data-focus-visible-skip=\"true\"\n                data-qa={dataQa}\n                tabIndex={-1}\n                name={name}\n                value={value.value}\n                checked={checked}\n                onChange={(event) => {\n                    onChange(value, event.target.checked);\n                }}\n            />\n        );\n    }\n    return (\n        <Checkbox\n            data-focus-visible-skip=\"true\"\n            data-qa={dataQa}\n            tabIndex={-1}\n            name={name}\n            value={value.value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    );\n};\n\nCheckableComponent.displayName = 'SelectInputRender';\n\nexport const SelectOption = <DataType extends StaticDataFetcherItem>({\n    checked,\n    name,\n    disabled,\n    render,\n    type,\n    onChange,\n    plain,\n    data,\n    multiple,\n    isMobile,\n    'data-qa': dataQa,\n}: SelectOptionProps<DataType>): ReactElement => {\n    const [focusVisible, setFocusVisible] = useState(false);\n    const focusedByMouseRef = useRef(false);\n    const input = CheckableComponent<DataType>({ type, value: data, checked, name, onChange, 'data-qa': dataQa });\n    const renderProps = {\n        data,\n        checked,\n        multiple,\n        name,\n        onChange,\n        input,\n        type,\n        plain,\n        disabled,\n        render,\n        isMobile,\n    };\n    if (type === 'delimiter') {\n        return (\n            <div className={classnames({ [styles.selectDelimiter]: !plain })}>\n                <Text typography=\"label-3-regular\">{render(renderProps)}</Text>\n            </div>\n        );\n    }\n    if (plain) {\n        return (\n            <div\n                className={classnames(styles.selectOptionPlain, { [styles.selectOptionPlainActive]: !disabled })}\n                data-qa={`magritte-select-option-${data.value}`}\n                data-magritte-select-option={data.value}\n                role=\"option\"\n                aria-selected={checked}\n                tabIndex={disabled ? -1 : 0}\n                onClick={() => {\n                    if (disabled) {\n                        return;\n                    }\n                    onChange(data, !checked);\n                }}\n                onKeyDown={(event) => {\n                    if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                        onChange(data, !checked);\n                    }\n                }}\n            >\n                <DisabledContext.Provider value={!!disabled}>{render(renderProps)}</DisabledContext.Provider>\n            </div>\n        );\n    }\n    return (\n        <CheckableCardElement\n            Element=\"label\"\n            role=\"option\"\n            padding={16}\n            borderRadius={12}\n            flexible={false}\n            checked={checked}\n            data-magritte-select-option={data.value}\n            focusVisible={focusVisible}\n            data-qa={`magritte-select-option-${data.value}`}\n            disabled={disabled}\n            aria-selected={checked}\n            toneHover\n            onClick={() => {\n                if (type === 'label' && !disabled) {\n                    onChange(data, !checked);\n                }\n            }}\n            onMouseDown={() => {\n                focusedByMouseRef.current = true;\n            }}\n            onKeyDown={(event) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    onChange(data, !checked);\n                    event.preventDefault();\n                    setFocusVisible(true);\n                }\n            }}\n            onFocus={(event) => {\n                if (!event.target.dataset.focusVisibleSkip) {\n                    return;\n                }\n                if (focusedByMouseRef.current) {\n                    focusedByMouseRef.current = false;\n                    return;\n                }\n                setFocusVisible(true);\n            }}\n            onBlur={() => {\n                if (focusVisible) {\n                    setFocusVisible(false);\n                }\n            }}\n        >\n            {render(renderProps)}\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/UncontrolledSelect.js

@@ -9,6 +9,7 @@ import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-input/BaseInput';
 import './SelectBottomSheet.js';
 import 'classnames';
+import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-action-bar';
 import '@hh.ru/magritte-ui-bottom-sheet';
 import '@hh.ru/magritte-ui-button';

package/UncontrolledSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"UncontrolledSelect.js","sources":["src/UncontrolledSelect.tsx"],"sourcesContent":["import { type ReactElement, useState } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { Select } from '@hh.ru/magritte-ui-select';\nimport type { UncontrolledSelectProps } from '@hh.ru/magritte-ui-select/types';\n\nconst UncontrolledSelect = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    name,\n    onChange,\n    ...props\n}: UncontrolledSelectProps<MultipleType, DataType>): ReactElement => {\n    const { value } = props;\n    const [controlledValue, setValue] = useState(value);\n    return (\n        <>\n            <Select\n                {...props}\n                onChange={(values) => {\n                    setValue(values);\n                    onChange?.(values);\n                }}\n                value={controlledValue}\n                name={name}\n            />\n            {Array.isArray(controlledValue) ? (\n                controlledValue.map((value) => (\n                    <input type=\"hidden\" name={name} value={value.value} key={value.value} />\n                ))\n            ) : (\n                <input type=\"hidden\" name={name} value={controlledValue?.value} />\n            )}\n        </>\n    );\n};\n\nUncontrolledSelect.displayName = 'UncontrolledSelect';\n\nexport { UncontrolledSelect };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,GAAG,CAAuE,EAC9F,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACsC,KAAkB;AAChE,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,MAAM,EACC,EAAA,GAAA,KAAK,EACT,QAAQ,EAAE,CAAC,MAAM,KAAI;oBACjB,QAAQ,CAAC,MAAM,CAAC,CAAC;AACjB,oBAAA,QAAQ,GAAG,MAAM,CAAC,CAAC;AACvB,iBAAC,EACD,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,IAAI,EAAA,CACZ,EACD,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAC3B,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,MACtBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAO,EAAA,KAAK,CAAC,KAAK,CAAI,CAC5E,CAAC,KAEFA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAA,CAAI,CACrE,CAAA,EAAA,CACF,EACL;AACN,EAAE;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"UncontrolledSelect.js","sources":["src/UncontrolledSelect.tsx"],"sourcesContent":["import { type ReactElement, useState } from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { Select } from '@hh.ru/magritte-ui-select';\nimport type { UncontrolledSelectProps } from '@hh.ru/magritte-ui-select/types';\n\nconst UncontrolledSelect = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    name,\n    onChange,\n    ...props\n}: UncontrolledSelectProps<MultipleType, DataType>): ReactElement => {\n    const { value } = props;\n    const [controlledValue, setValue] = useState(value);\n    return (\n        <>\n            <Select\n                {...props}\n                onChange={(values) => {\n                    setValue(values);\n                    onChange?.(values);\n                }}\n                value={controlledValue}\n                name={name}\n            />\n            {Array.isArray(controlledValue) ? (\n                controlledValue.map((value) => (\n                    <input type=\"hidden\" name={name} value={value.value} key={value.value} />\n                ))\n            ) : (\n                <input type=\"hidden\" name={name} value={controlledValue?.value} />\n            )}\n        </>\n    );\n};\n\nUncontrolledSelect.displayName = 'UncontrolledSelect';\n\nexport { UncontrolledSelect };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,GAAG,CAAuE,EAC9F,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACsC,KAAkB;AAChE,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,MAAM,EACC,EAAA,GAAA,KAAK,EACT,QAAQ,EAAE,CAAC,MAAM,KAAI;oBACjB,QAAQ,CAAC,MAAM,CAAC,CAAC;AACjB,oBAAA,QAAQ,GAAG,MAAM,CAAC,CAAC;AACvB,iBAAC,EACD,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,IAAI,EAAA,CACZ,EACD,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAC3B,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,MACtBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAO,EAAA,KAAK,CAAC,KAAK,CAAI,CAC5E,CAAC,KAEFA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAA,CAAI,CACrE,CAAA,EAAA,CACF,EACL;AACN,EAAE;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}