@hh.ru/magritte-ui-select 8.6.23 → 9.0.1

package/Select.d.ts

@@ -1,3 +1,4 @@
 import { ReactElement } from 'react';
+import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
 import { SelectProps } from '@hh.ru/magritte-ui-select/types';
-export declare const Select: <MultipleType extends boolean, DataType>({ type, options, multiple, value: _value, maxSelectedOptions, loading, error, searchable: _searchable, bottomSheetHeight, onChange: onChangeHandler, renderTrigger, triggerProps, renderMobileItem, renderDesktopItem, name, maxWidth, maxHeight, useInitialValuesOnClearAction, renderAlertOnExitWithoutSaving, renderButtonsContainer, renderHeader, headerTitle: _headerTitle, clearButton, applyChangesButton, forceDropVisibleWithEmptyOptions, plain, widthEqualToActivator, renderContentBefore, onBlur, onFocus, onDropOpen, onDropClose, onBottomSheetClose, onBottomSheetOpen, onSearchSubmit, onApply, onClear, onSelectOption, pickerRef, optionDataQa, }: SelectProps<MultipleType, DataType>) => ReactElement;
+export declare const Select: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ type, multiple, value: _value, maxSelectedOptions, loading, error, searchable: _searchable, bottomSheetHeight, onChange: onChangeHandler, renderTrigger, triggerProps, renderMobileItem, renderDesktopItem, name, maxWidth, maxHeight, useInitialValuesOnClearAction, renderAlertOnExitWithoutSaving, renderButtonsContainer, renderHeader, headerTitle: _headerTitle, clearButton, applyChangesButton, forceDropVisibleWithEmptyOptions, plain, widthEqualToActivator, renderContentBefore, onBlur, onFocus, onDropOpen, onDropClose, onBottomSheetClose, onBottomSheetOpen, onSearchSubmit, onApply, onClear, onSelectOption, pickerRef, dataProvider, emptyOptionsHint, emptyOptionsSearchHint, onOptionsChange, innerErrorTrls, optionDataQa, }: SelectProps<MultipleType, DataType>) => ReactElement;

package/Select.js

@@ -1,6 +1,6 @@
 import './index.css';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useLayoutEffect, useCallback } from 'react';
+import { useRef, useState, useMemo, useLayoutEffect, useCallback } from 'react';
 import { keyboardMatch, keyboardKeys, keyboardMatches, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
@@ -15,19 +15,24 @@ import 'classnames';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-action-bar';
 import '@hh.ru/magritte-ui-bottom-sheet';
+import '@hh.ru/magritte-ui-button';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-input';
 import '@hh.ru/magritte-ui-loader';
 import '@hh.ru/magritte-ui-navigation-bar';
+import './SelectError.js';
+import '@hh.ru/magritte-ui-icon/variants/icon';
+import '@hh.ru/magritte-ui-spacing';
+import '@hh.ru/magritte-ui-title';
+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 '@hh.ru/magritte-ui-typography';
 import './getChecked.js';
 import './isArraysEquals.js';
 import '@hh.ru/magritte-ui-drop';
-import '@hh.ru/magritte-common-fuzzy-search';
+import '@hh.ru/magritte-common-data-provider';
 
 const SelectTriggerDefault = (triggerProps) => {
     return jsx(Trigger, { ...triggerProps });
@@ -41,7 +46,7 @@ const focusOptionsList = (event, drop, direction) => {
         }
     }
 };
-const Select = ({ type, options, multiple, value: _value, maxSelectedOptions, loading, error, searchable: _searchable, bottomSheetHeight = 'full-screen', onChange: onChangeHandler, renderTrigger = SelectTriggerDefault, triggerProps, renderMobileItem, renderDesktopItem, name, maxWidth, maxHeight = 460, useInitialValuesOnClearAction, renderAlertOnExitWithoutSaving, renderButtonsContainer, renderHeader, headerTitle: _headerTitle, clearButton, applyChangesButton, forceDropVisibleWithEmptyOptions, plain = false, widthEqualToActivator = true, renderContentBefore, onBlur, onFocus, onDropOpen, onDropClose, onBottomSheetClose, onBottomSheetOpen, onSearchSubmit, onApply, onClear, onSelectOption, pickerRef, optionDataQa, }) => {
+const Select = ({ type, multiple, value: _value, maxSelectedOptions, loading, error, searchable: _searchable, bottomSheetHeight = 'full-screen', onChange: onChangeHandler, renderTrigger = SelectTriggerDefault, triggerProps, renderMobileItem, renderDesktopItem, name, maxWidth, maxHeight = 460, useInitialValuesOnClearAction, renderAlertOnExitWithoutSaving, renderButtonsContainer, renderHeader, headerTitle: _headerTitle, clearButton, applyChangesButton, forceDropVisibleWithEmptyOptions, plain = false, widthEqualToActivator = true, renderContentBefore, onBlur, onFocus, onDropOpen, onDropClose, onBottomSheetClose, onBottomSheetOpen, onSearchSubmit, onApply, onClear, onSelectOption, pickerRef, dataProvider, emptyOptionsHint, emptyOptionsSearchHint, onOptionsChange, innerErrorTrls, optionDataQa, }) => {
     const { isMobile } = useBreakpoint();
     const inputRef = useRef(null);
     const [useSearchInput, setUseSearchInput] = useState(false);
@@ -50,9 +55,19 @@ const Select = ({ type, options, multiple, value: _value, maxSelectedOptions, lo
     const useDefaultTrigger = renderTrigger === SelectTriggerDefault;
     const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } = useSelectOptionsList(isMobile);
     const prevVisibleRef = useRef(showOptions);
-    const { optionList, searchValue, setSearchValue } = useSelectSearch(showOptions, options, optionsListRef);
     const hasChangesButton = multiple && Boolean(applyChangesButton);
-    const { values, onChange, clearSelectedValues, setInitialValues, selectedLabels, setSelectedValues, setInitialValuesWithoutOnChange, initialValuesOnOpening, } = useSelectState(!!multiple, _value || [], options, showOptions, hasChangesButton, onChangeHandler, onSelectOption);
+    const { values, onChange, clearSelectedValues, setInitialValues, setSelectedValues, setInitialValuesWithoutOnChange, initialValuesOnOpening, } = useSelectState(!!multiple, _value || [], showOptions, hasChangesButton, onChangeHandler, onSelectOption);
+    const valuesArray = useMemo(
+    // eslint-disable-next-line no-nested-ternary
+    () => (Array.isArray(values) ? values : values ? [values] : []), [values]);
+    const { optionList, internalLoading, searchValue, setSearchValue, searchInProgress, reload, internalError } = useSelectSearch(showOptions, valuesArray, dataProvider, onOptionsChange, multiple);
+    const selectedLabels = useMemo(() => 
+    // eslint-disable-next-line no-nested-ternary
+    Array.isArray(_value)
+        ? _value.map((item) => item.text ?? item.value)
+        : _value
+            ? [_value?.text ?? _value.value]
+            : [], [_value]);
     const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef, pickerRef);
     const showedByFocus = useRef(false);
     const isLimitExceeded = maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;
@@ -152,7 +167,7 @@ const Select = ({ type, options, multiple, value: _value, maxSelectedOptions, lo
                     onKeyDown: handleKeyDown,
                     onBlur: () => {
                         setForcedState(null);
-                        if (showOptions && optionList.length === 0) {
+                        if (showOptions && optionList.length === 0 && !emptyOptionsHint) {
                             toggleListVisibility();
                         }
                     },
@@ -171,12 +186,14 @@ const Select = ({ type, options, multiple, value: _value, maxSelectedOptions, lo
                     setSearchValue,
                     optionsCount: optionList.length,
                     ...triggerProps,
-                }), useSearchInput && (jsx("div", { style: inputWrapperStyles, children: jsx(BaseInput, { ...sizeProp, ref: inputRef, wrapperRef: activatorRef, value: searchValue, onChange: setSearchValue, onKeyDown: handleKeyDown, onBlur: () => {
+                }), useSearchInput && (jsx("div", { style: inputWrapperStyles, children: jsx(BaseInput, { ...sizeProp, ref: inputRef, wrapperRef: activatorRef, value: searchValue, onChange: setSearchValue, onKeyDown: handleKeyDown, onFocus: () => {
+                        setForcedState('focus');
+                    }, onBlur: () => {
                         setForcedState(null);
-                        if (showOptions && optionList.length === 0) {
+                        if (showOptions && optionList.length === 0 && !emptyOptionsHint) {
                             toggleListVisibility();
                         }
-                    }, "data-qa": "magritte-select-activator-input", placeholder: selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel, autoComplete: "off" }) })), isMobile && (jsx(SelectBottomSheet, { applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, error: error, height: searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight, visible: showOptions, value: values, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, type: type, loading: loading, searchable: _searchable, useInitialValuesOnClearAction: useInitialValuesOnClearAction, initialValuesOnOpening: initialValuesOnOpening, renderItem: renderMobileItem, renderAlertOnExitWithoutSaving: renderAlertOnExitWithoutSaving, renderButtonsContainer: renderButtonsContainer, renderHeader: renderHeader, headerTitle: _headerTitle || triggerLabel, optionList: optionList, optionsListRef: optionsListRefCallback, onChange: onChange, onClose: onOptionsListClose, searchValue: searchValue, setSearchValue: setSearchValue, setInitialValues: setInitialValues, setSelectedValues: setSelectedValues, onBottomSheetClose: onBottomSheetClose, onBottomSheetOpen: onBottomSheetOpen, onSearchSubmit: onSearchSubmit, onApply: onApply, onClear: onClear, optionDataQa: optionDataQa })), !isMobile && (jsx(SelectDrop, { activatorRef: activatorRef, applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, maxWidth: maxWidth, type: type, loading: loading, useInitialValuesOnClearAction: useInitialValuesOnClearAction, onClose: onOptionsListClose, renderItem: renderDesktopItem, renderButtonsContainer: renderButtonsContainer, plain: plain, optionList: optionList, optionsListRef: optionsListRefCallback, value: values, onChange: onChange, searchValue: searchValue, searchable: searchable, forceDropVisibleWithEmptyOptions: forceDropVisibleWithEmptyOptions, setSearchValue: setSearchValue, setInitialValues: setInitialValues, visible: !error && showOptions, widthEqualToActivator: widthEqualToActivator, renderContentBefore: renderContentBefore, setForcedState: setForcedState, setSelectedValues: setSelectedValues, maxHeight: maxHeight, onDropOpen: onDropOpen, onDropClose: onDropClose, onApply: onApply, onClear: onClear, optionDataQa: optionDataQa }))] }));
+                    }, "data-qa": "magritte-select-activator-input", placeholder: selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel, autoComplete: "off" }) })), isMobile && (jsx(SelectBottomSheet, { applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, error: error, height: searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight, visible: Boolean(showOptions || internalLoading), value: values, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, type: type, loading: loading || internalLoading, searchable: _searchable, useInitialValuesOnClearAction: useInitialValuesOnClearAction, initialValuesOnOpening: initialValuesOnOpening, renderItem: renderMobileItem, renderAlertOnExitWithoutSaving: renderAlertOnExitWithoutSaving, renderButtonsContainer: renderButtonsContainer, renderHeader: renderHeader, headerTitle: _headerTitle || triggerLabel, optionList: optionList, optionsListRef: optionsListRefCallback, onChange: onChange, onClose: onOptionsListClose, searchValue: searchValue, setSearchValue: setSearchValue, setInitialValues: setInitialValues, setSelectedValues: setSelectedValues, onBottomSheetClose: onBottomSheetClose, onBottomSheetOpen: onBottomSheetOpen, onSearchSubmit: onSearchSubmit, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa })), !isMobile && (jsx(SelectDrop, { activatorRef: activatorRef, applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, maxWidth: maxWidth, type: type, loading: loading || internalLoading, useInitialValuesOnClearAction: useInitialValuesOnClearAction, onClose: onOptionsListClose, renderItem: renderDesktopItem, renderButtonsContainer: renderButtonsContainer, plain: plain, optionList: optionList, optionsListRef: optionsListRefCallback, value: values, onChange: onChange, searchValue: searchValue, searchable: searchable, forceDropVisibleWithEmptyOptions: forceDropVisibleWithEmptyOptions || internalLoading, setSearchValue: setSearchValue, setInitialValues: setInitialValues, visible: !error && (showOptions || internalLoading), widthEqualToActivator: widthEqualToActivator, renderContentBefore: renderContentBefore, setForcedState: setForcedState, setSelectedValues: setSelectedValues, maxHeight: maxHeight, onDropOpen: onDropOpen, onDropClose: onDropClose, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa }))] }));
 };
 
 export { Select };

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/Select.tsx"],"sourcesContent":["import {\n    ReactElement,\n    useState,\n    useRef,\n    useLayoutEffect,\n    useCallback,\n    KeyboardEventHandler,\n    SyntheticEvent,\n} from 'react';\n\nimport {\n    findNextFocusableElement,\n    keyboardKeys,\n    keyboardMatch,\n    keyboardMatches,\n} from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { SelectBottomSheet } from '@hh.ru/magritte-ui-select/SelectBottomSheet';\nimport { SelectDrop } from '@hh.ru/magritte-ui-select/SelectDrop';\nimport {\n    SelectProps,\n    TriggerPropsWithRef,\n    FocusStateType,\n    SetSearchValue,\n    OptionsCount,\n} from '@hh.ru/magritte-ui-select/types';\nimport { useSelectOptionsList } from '@hh.ru/magritte-ui-select/useSelectOptionsList';\nimport { useSelectSearch } from '@hh.ru/magritte-ui-select/useSelectSearch';\nimport { useSelectState } from '@hh.ru/magritte-ui-select/useSelectState';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nconst SelectTriggerDefault = (triggerProps: TriggerPropsWithRef): ReactElement => {\n    return <Trigger {...triggerProps} />;\n};\n\nconst focusOptionsList = (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: 'up' | 'down') => {\n    if (drop) {\n        const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n        if (nextFocusableElement !== null) {\n            event.preventDefault();\n            nextFocusableElement.focus();\n        }\n    }\n};\n\nexport const Select = <MultipleType extends boolean, DataType>({\n    type,\n    options,\n    multiple,\n    value: _value,\n    maxSelectedOptions,\n    loading,\n    error,\n    searchable: _searchable,\n    bottomSheetHeight = 'full-screen',\n    onChange: onChangeHandler,\n    renderTrigger = SelectTriggerDefault,\n    triggerProps,\n    renderMobileItem,\n    renderDesktopItem,\n    name,\n    maxWidth,\n    maxHeight = 460,\n    useInitialValuesOnClearAction,\n    renderAlertOnExitWithoutSaving,\n    renderButtonsContainer,\n    renderHeader,\n    headerTitle: _headerTitle,\n    clearButton,\n    applyChangesButton,\n    forceDropVisibleWithEmptyOptions,\n    plain = false,\n    widthEqualToActivator = true,\n    renderContentBefore,\n    onBlur,\n    onFocus,\n    onDropOpen,\n    onDropClose,\n    onBottomSheetClose,\n    onBottomSheetOpen,\n    onSearchSubmit,\n    onApply,\n    onClear,\n    onSelectOption,\n    pickerRef,\n    optionDataQa,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n    const { isMobile } = useBreakpoint();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [useSearchInput, setUseSearchInput] = useState<boolean>(false);\n    const [forcedState, setForcedState] = useState<FocusStateType>(null);\n    const dropRef = useRef<HTMLDivElement>(null);\n    const useDefaultTrigger = renderTrigger === SelectTriggerDefault;\n\n    const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n        useSelectOptionsList(isMobile);\n    const prevVisibleRef = useRef<boolean>(showOptions);\n    const { optionList, searchValue, setSearchValue } = useSelectSearch<DataType>(showOptions, options, optionsListRef);\n    const hasChangesButton = multiple && Boolean(applyChangesButton);\n    const {\n        values,\n        onChange,\n        clearSelectedValues,\n        setInitialValues,\n        selectedLabels,\n        setSelectedValues,\n        setInitialValuesWithoutOnChange,\n        initialValuesOnOpening,\n    } = useSelectState<DataType, MultipleType>(\n        !!multiple,\n        _value || [],\n        options,\n        showOptions,\n        hasChangesButton,\n        onChangeHandler,\n        onSelectOption\n    );\n\n    const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef, pickerRef);\n    const showedByFocus = useRef<boolean>(false);\n    const isLimitExceeded =\n        maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;\n    const { size, stretched, label: triggerLabel, disabled } = triggerProps;\n    const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n    const inputWrapperStyles = stretched ? { with: '100%' } : { maxWidth: activatorRef.current?.offsetWidth };\n    const searchable = _searchable && (size === 'large' || size === 'medium');\n    const dataQa = triggerProps['data-qa'] || 'magritte-select-activator';\n\n    useLayoutEffect(() => {\n        if (searchable && !isMobile) {\n            return;\n        }\n        if (!showOptions && prevVisibleRef.current) {\n            setInitialValuesWithoutOnChange();\n            if (forcedState === 'focus') {\n                activatorRef.current?.focus();\n                setForcedState?.(null);\n                showedByFocus.current = false;\n            }\n        }\n        if (!forcedState && !showOptions && prevVisibleRef.current) {\n            onBlur?.();\n        }\n        prevVisibleRef.current = showOptions;\n    }, [activatorRef, forcedState, isMobile, onBlur, searchable, setInitialValuesWithoutOnChange, showOptions]);\n\n    useLayoutEffect(() => {\n        if (!searchable || isMobile) {\n            return;\n        }\n        if ((forcedState === 'focus' || forcedState === 'focusAndSelect') && useDefaultTrigger) {\n            setUseSearchInput(true);\n        }\n    }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n    useLayoutEffect(() => {\n        if (!useSearchInput || !inputRef.current) {\n            return;\n        }\n        if (forcedState === 'focus') {\n            inputRef.current.focus();\n        }\n        if (forcedState === 'focusAndSelect') {\n            inputRef.current?.focus();\n            inputRef.current?.select();\n        }\n        if (!showOptions && prevVisibleRef.current) {\n            setInitialValuesWithoutOnChange();\n        }\n        if (!forcedState && !showOptions) {\n            setUseSearchInput(false);\n            if (prevVisibleRef.current) {\n                onBlur?.();\n            }\n        }\n        prevVisibleRef.current = showOptions;\n    }, [forcedState, onBlur, setForcedState, useSearchInput, showOptions, setInitialValuesWithoutOnChange]);\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n        (event) => {\n            if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n                showedByFocus.current = false;\n                setForcedState('focus');\n                toggleListVisibility();\n                return;\n            }\n\n            // движение по списку опций\n            if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n                focusOptionsList(event, dropRef?.current, 'up');\n                return;\n            }\n\n            if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n                focusOptionsList(event, dropRef?.current, 'down');\n                return;\n            }\n\n            // после закрытия пользователь решил что-то поделать опять\n            if (\n                !showOptions &&\n                !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n            ) {\n                toggleListVisibility();\n            }\n        },\n        [showOptions, toggleListVisibility]\n    );\n\n    return (\n        <>\n            {!useSearchInput &&\n                renderTrigger({\n                    values: selectedLabels,\n                    expanded: showOptions,\n                    toggleExpanded: toggleListVisibility,\n                    onChange: () => {\n                        if (disabled) {\n                            return;\n                        }\n                        // открываем по фокусу, закрываем по клику\n                        // повторно открываем по клику (события фокуса уже не будет)\n                        if (showedByFocus.current) {\n                            showedByFocus.current = false;\n                            return;\n                        }\n                        toggleListVisibility();\n                    },\n                    onClear: () => clearSelectedValues(),\n                    ref: activatorRef,\n                    onKeyDown: handleKeyDown,\n                    onBlur: () => {\n                        setForcedState(null);\n                        if (showOptions && optionList.length === 0) {\n                            toggleListVisibility();\n                        }\n                    },\n                    onFocus: () => {\n                        if (disabled) {\n                            return;\n                        }\n                        if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n                            onFocus?.();\n                            setForcedState('focus');\n                            toggleListVisibility();\n                        }\n                        showedByFocus.current = true;\n                    },\n                    'data-qa': dataQa,\n                    setSearchValue,\n                    optionsCount: optionList.length,\n                    ...triggerProps,\n                } as TriggerPropsWithRef & SetSearchValue & OptionsCount)}\n            {useSearchInput && (\n                <div style={inputWrapperStyles}>\n                    <BaseInput\n                        {...sizeProp}\n                        ref={inputRef}\n                        wrapperRef={activatorRef}\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        onKeyDown={handleKeyDown}\n                        onBlur={() => {\n                            setForcedState(null);\n                            if (showOptions && optionList.length === 0) {\n                                toggleListVisibility();\n                            }\n                        }}\n                        data-qa=\"magritte-select-activator-input\"\n                        placeholder={selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel}\n                        autoComplete=\"off\"\n                    />\n                </div>\n            )}\n            {isMobile && (\n                <SelectBottomSheet\n                    applyChangesButton={applyChangesButton}\n                    clearButton={clearButton}\n                    clearSelectedValues={clearSelectedValues}\n                    error={error}\n                    height={searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight}\n                    visible={showOptions}\n                    value={values}\n                    isLimitExceeded={isLimitExceeded}\n                    name={name}\n                    multiple={multiple}\n                    type={type}\n                    loading={loading}\n                    searchable={_searchable}\n                    useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n                    initialValuesOnOpening={initialValuesOnOpening}\n                    renderItem={renderMobileItem}\n                    renderAlertOnExitWithoutSaving={renderAlertOnExitWithoutSaving}\n                    renderButtonsContainer={renderButtonsContainer}\n                    renderHeader={renderHeader}\n                    headerTitle={_headerTitle || triggerLabel}\n                    optionList={optionList}\n                    optionsListRef={optionsListRefCallback}\n                    onChange={onChange}\n                    onClose={onOptionsListClose}\n                    searchValue={searchValue}\n                    setSearchValue={setSearchValue}\n                    setInitialValues={setInitialValues}\n                    setSelectedValues={setSelectedValues}\n                    onBottomSheetClose={onBottomSheetClose}\n                    onBottomSheetOpen={onBottomSheetOpen}\n                    onSearchSubmit={onSearchSubmit}\n                    onApply={onApply}\n                    onClear={onClear}\n                    optionDataQa={optionDataQa}\n                />\n            )}\n            {!isMobile && (\n                <SelectDrop\n                    activatorRef={activatorRef}\n                    applyChangesButton={applyChangesButton}\n                    clearButton={clearButton}\n                    clearSelectedValues={clearSelectedValues}\n                    isLimitExceeded={isLimitExceeded}\n                    name={name}\n                    multiple={multiple}\n                    maxWidth={maxWidth}\n                    type={type}\n                    loading={loading}\n                    useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n                    onClose={onOptionsListClose}\n                    renderItem={renderDesktopItem}\n                    renderButtonsContainer={renderButtonsContainer}\n                    plain={plain}\n                    optionList={optionList}\n                    optionsListRef={optionsListRefCallback}\n                    value={values}\n                    onChange={onChange}\n                    searchValue={searchValue}\n                    searchable={searchable}\n                    forceDropVisibleWithEmptyOptions={forceDropVisibleWithEmptyOptions}\n                    setSearchValue={setSearchValue}\n                    setInitialValues={setInitialValues}\n                    visible={!error && showOptions}\n                    widthEqualToActivator={widthEqualToActivator}\n                    renderContentBefore={renderContentBefore}\n                    setForcedState={setForcedState}\n                    setSelectedValues={setSelectedValues}\n                    maxHeight={maxHeight}\n                    onDropOpen={onDropOpen}\n                    onDropClose={onDropClose}\n                    onApply={onApply}\n                    onClear={onClear}\n                    optionDataQa={optionDataQa}\n                />\n            )}\n        </>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../src/Select.tsx"],"sourcesContent":["import {\n    ReactElement,\n    useState,\n    useRef,\n    useLayoutEffect,\n    useCallback,\n    KeyboardEventHandler,\n    SyntheticEvent,\n    useMemo,\n} from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport {\n    findNextFocusableElement,\n    keyboardKeys,\n    keyboardMatch,\n    keyboardMatches,\n} from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { SelectBottomSheet } from '@hh.ru/magritte-ui-select/SelectBottomSheet';\nimport { SelectDrop } from '@hh.ru/magritte-ui-select/SelectDrop';\nimport {\n    SelectProps,\n    TriggerPropsWithRef,\n    FocusStateType,\n    SetSearchValue,\n    OptionsCount,\n} from '@hh.ru/magritte-ui-select/types';\nimport { useSelectOptionsList } from '@hh.ru/magritte-ui-select/useSelectOptionsList';\nimport { useSelectSearch } from '@hh.ru/magritte-ui-select/useSelectSearch';\nimport { useSelectState } from '@hh.ru/magritte-ui-select/useSelectState';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nconst SelectTriggerDefault = (triggerProps: TriggerPropsWithRef): ReactElement => {\n    return <Trigger {...triggerProps} />;\n};\n\nconst focusOptionsList = (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: 'up' | 'down') => {\n    if (drop) {\n        const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n        if (nextFocusableElement !== null) {\n            event.preventDefault();\n            nextFocusableElement.focus();\n        }\n    }\n};\n\nexport const Select = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    type,\n    multiple,\n    value: _value,\n    maxSelectedOptions,\n    loading,\n    error,\n    searchable: _searchable,\n    bottomSheetHeight = 'full-screen',\n    onChange: onChangeHandler,\n    renderTrigger = SelectTriggerDefault,\n    triggerProps,\n    renderMobileItem,\n    renderDesktopItem,\n    name,\n    maxWidth,\n    maxHeight = 460,\n    useInitialValuesOnClearAction,\n    renderAlertOnExitWithoutSaving,\n    renderButtonsContainer,\n    renderHeader,\n    headerTitle: _headerTitle,\n    clearButton,\n    applyChangesButton,\n    forceDropVisibleWithEmptyOptions,\n    plain = false,\n    widthEqualToActivator = true,\n    renderContentBefore,\n    onBlur,\n    onFocus,\n    onDropOpen,\n    onDropClose,\n    onBottomSheetClose,\n    onBottomSheetOpen,\n    onSearchSubmit,\n    onApply,\n    onClear,\n    onSelectOption,\n    pickerRef,\n    dataProvider,\n    emptyOptionsHint,\n    emptyOptionsSearchHint,\n    onOptionsChange,\n    innerErrorTrls,\n    optionDataQa,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n    const { isMobile } = useBreakpoint();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [useSearchInput, setUseSearchInput] = useState<boolean>(false);\n    const [forcedState, setForcedState] = useState<FocusStateType>(null);\n    const dropRef = useRef<HTMLDivElement>(null);\n    const useDefaultTrigger = renderTrigger === SelectTriggerDefault;\n\n    const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n        useSelectOptionsList(isMobile);\n    const prevVisibleRef = useRef<boolean>(showOptions);\n    const hasChangesButton = multiple && Boolean(applyChangesButton);\n    const {\n        values,\n        onChange,\n        clearSelectedValues,\n        setInitialValues,\n        setSelectedValues,\n        setInitialValuesWithoutOnChange,\n        initialValuesOnOpening,\n    } = useSelectState<DataType, MultipleType>(\n        !!multiple,\n        _value || [],\n        showOptions,\n        hasChangesButton,\n        onChangeHandler,\n        onSelectOption\n    );\n    const valuesArray = useMemo(\n        // eslint-disable-next-line no-nested-ternary\n        () => (Array.isArray(values) ? values : values ? ([values] as DataType[]) : []),\n        [values]\n    );\n    const { optionList, internalLoading, searchValue, setSearchValue, searchInProgress, reload, internalError } =\n        useSelectSearch<DataType>(showOptions, valuesArray, dataProvider, onOptionsChange, multiple);\n\n    const selectedLabels = useMemo(\n        () =>\n            // eslint-disable-next-line no-nested-ternary\n            Array.isArray(_value)\n                ? _value.map((item) => item.text ?? item.value)\n                : _value\n                  ? [_value?.text ?? _value.value]\n                  : [],\n        [_value]\n    );\n\n    const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef, pickerRef);\n    const showedByFocus = useRef<boolean>(false);\n    const isLimitExceeded =\n        maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;\n    const { size, stretched, label: triggerLabel, disabled } = triggerProps;\n    const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n    const inputWrapperStyles = stretched ? { with: '100%' } : { maxWidth: activatorRef.current?.offsetWidth };\n    const searchable = _searchable && (size === 'large' || size === 'medium');\n    const dataQa = triggerProps['data-qa'] || 'magritte-select-activator';\n\n    useLayoutEffect(() => {\n        if (searchable && !isMobile) {\n            return;\n        }\n        if (!showOptions && prevVisibleRef.current) {\n            setInitialValuesWithoutOnChange();\n            if (forcedState === 'focus') {\n                activatorRef.current?.focus();\n                setForcedState?.(null);\n                showedByFocus.current = false;\n            }\n        }\n        if (!forcedState && !showOptions && prevVisibleRef.current) {\n            onBlur?.();\n        }\n        prevVisibleRef.current = showOptions;\n    }, [activatorRef, forcedState, isMobile, onBlur, searchable, setInitialValuesWithoutOnChange, showOptions]);\n\n    useLayoutEffect(() => {\n        if (!searchable || isMobile) {\n            return;\n        }\n        if ((forcedState === 'focus' || forcedState === 'focusAndSelect') && useDefaultTrigger) {\n            setUseSearchInput(true);\n        }\n    }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n    useLayoutEffect(() => {\n        if (!useSearchInput || !inputRef.current) {\n            return;\n        }\n        if (forcedState === 'focus') {\n            inputRef.current.focus();\n        }\n        if (forcedState === 'focusAndSelect') {\n            inputRef.current?.focus();\n            inputRef.current?.select();\n        }\n        if (!showOptions && prevVisibleRef.current) {\n            setInitialValuesWithoutOnChange();\n        }\n        if (!forcedState && !showOptions) {\n            setUseSearchInput(false);\n            if (prevVisibleRef.current) {\n                onBlur?.();\n            }\n        }\n        prevVisibleRef.current = showOptions;\n    }, [forcedState, onBlur, setForcedState, useSearchInput, showOptions, setInitialValuesWithoutOnChange]);\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n        (event) => {\n            if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n                showedByFocus.current = false;\n                setForcedState('focus');\n\n                toggleListVisibility();\n                return;\n            }\n\n            // движение по списку опций\n            if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n                focusOptionsList(event, dropRef?.current, 'up');\n                return;\n            }\n\n            if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n                focusOptionsList(event, dropRef?.current, 'down');\n                return;\n            }\n\n            // после закрытия пользователь решил что-то поделать опять\n            if (\n                !showOptions &&\n                !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n            ) {\n                toggleListVisibility();\n            }\n        },\n        [showOptions, toggleListVisibility]\n    );\n\n    return (\n        <>\n            {!useSearchInput &&\n                renderTrigger({\n                    values: selectedLabels,\n                    expanded: showOptions,\n                    toggleExpanded: toggleListVisibility,\n                    onChange: () => {\n                        if (disabled) {\n                            return;\n                        }\n                        // открываем по фокусу, закрываем по клику\n                        // повторно открываем по клику (события фокуса уже не будет)\n                        if (showedByFocus.current) {\n                            showedByFocus.current = false;\n                            return;\n                        }\n                        toggleListVisibility();\n                    },\n                    onClear: () => clearSelectedValues(),\n                    ref: activatorRef,\n                    onKeyDown: handleKeyDown,\n                    onBlur: () => {\n                        setForcedState(null);\n                        if (showOptions && optionList.length === 0 && !emptyOptionsHint) {\n                            toggleListVisibility();\n                        }\n                    },\n                    onFocus: () => {\n                        if (disabled) {\n                            return;\n                        }\n                        if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n                            onFocus?.();\n                            setForcedState('focus');\n\n                            toggleListVisibility();\n                        }\n                        showedByFocus.current = true;\n                    },\n                    'data-qa': dataQa,\n                    setSearchValue,\n                    optionsCount: optionList.length,\n                    ...triggerProps,\n                } as TriggerPropsWithRef & SetSearchValue & OptionsCount)}\n            {useSearchInput && (\n                <div style={inputWrapperStyles}>\n                    <BaseInput\n                        {...sizeProp}\n                        ref={inputRef}\n                        wrapperRef={activatorRef}\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        onKeyDown={handleKeyDown}\n                        onFocus={() => {\n                            setForcedState('focus');\n                        }}\n                        onBlur={() => {\n                            setForcedState(null);\n                            if (showOptions && optionList.length === 0 && !emptyOptionsHint) {\n                                toggleListVisibility();\n                            }\n                        }}\n                        data-qa=\"magritte-select-activator-input\"\n                        placeholder={selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel}\n                        autoComplete=\"off\"\n                    />\n                </div>\n            )}\n            {isMobile && (\n                <SelectBottomSheet\n                    applyChangesButton={applyChangesButton}\n                    clearButton={clearButton}\n                    clearSelectedValues={clearSelectedValues}\n                    error={error}\n                    height={searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight}\n                    visible={Boolean(showOptions || internalLoading)}\n                    value={values}\n                    isLimitExceeded={isLimitExceeded}\n                    name={name}\n                    multiple={multiple}\n                    type={type}\n                    loading={loading || internalLoading}\n                    searchable={_searchable}\n                    useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n                    initialValuesOnOpening={initialValuesOnOpening}\n                    renderItem={renderMobileItem}\n                    renderAlertOnExitWithoutSaving={renderAlertOnExitWithoutSaving}\n                    renderButtonsContainer={renderButtonsContainer}\n                    renderHeader={renderHeader}\n                    headerTitle={_headerTitle || triggerLabel}\n                    optionList={optionList}\n                    optionsListRef={optionsListRefCallback}\n                    onChange={onChange}\n                    onClose={onOptionsListClose}\n                    searchValue={searchValue}\n                    setSearchValue={setSearchValue}\n                    setInitialValues={setInitialValues}\n                    setSelectedValues={setSelectedValues}\n                    onBottomSheetClose={onBottomSheetClose}\n                    onBottomSheetOpen={onBottomSheetOpen}\n                    onSearchSubmit={onSearchSubmit}\n                    onApply={onApply}\n                    onClear={onClear}\n                    emptyOptionsHint={emptyOptionsHint}\n                    emptyOptionsSearchHint={emptyOptionsSearchHint}\n                    searchInProgress={searchInProgress}\n                    internalError={internalError}\n                    reload={reload}\n                    innerErrorTrls={innerErrorTrls}\n                    optionDataQa={optionDataQa}\n                />\n            )}\n            {!isMobile && (\n                <SelectDrop\n                    activatorRef={activatorRef}\n                    applyChangesButton={applyChangesButton}\n                    clearButton={clearButton}\n                    clearSelectedValues={clearSelectedValues}\n                    isLimitExceeded={isLimitExceeded}\n                    name={name}\n                    multiple={multiple}\n                    maxWidth={maxWidth}\n                    type={type}\n                    loading={loading || internalLoading}\n                    useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n                    onClose={onOptionsListClose}\n                    renderItem={renderDesktopItem}\n                    renderButtonsContainer={renderButtonsContainer}\n                    plain={plain}\n                    optionList={optionList}\n                    optionsListRef={optionsListRefCallback}\n                    value={values}\n                    onChange={onChange}\n                    searchValue={searchValue}\n                    searchable={searchable}\n                    forceDropVisibleWithEmptyOptions={forceDropVisibleWithEmptyOptions || internalLoading}\n                    setSearchValue={setSearchValue}\n                    setInitialValues={setInitialValues}\n                    visible={!error && (showOptions || internalLoading)}\n                    widthEqualToActivator={widthEqualToActivator}\n                    renderContentBefore={renderContentBefore}\n                    setForcedState={setForcedState}\n                    setSelectedValues={setSelectedValues}\n                    maxHeight={maxHeight}\n                    onDropOpen={onDropOpen}\n                    onDropClose={onDropClose}\n                    onApply={onApply}\n                    onClear={onClear}\n                    emptyOptionsHint={emptyOptionsHint}\n                    emptyOptionsSearchHint={emptyOptionsSearchHint}\n                    searchInProgress={searchInProgress}\n                    internalError={internalError}\n                    reload={reload}\n                    innerErrorTrls={innerErrorTrls}\n                    optionDataQa={optionDataQa}\n                />\n            )}\n        </>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/SelectBottomSheet.d.ts

@@ -1,3 +1,4 @@
 import { ReactElement } from 'react';
+import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
 import { SelectBottomSheetProps } from '@hh.ru/magritte-ui-select/types';
-export declare const SelectBottomSheet: <MultipleType extends boolean, DataType>({ type, name, multiple, clearButton: _clearButton, applyChangesButton: _applyChangesButton, useInitialValuesOnClearAction, loading, error, renderHeader, renderItem, renderButtonsContainer, renderAlertOnExitWithoutSaving, headerTitle, onClose, visible, optionList, optionsListRef, searchValue, setSearchValue, searchable, value: values, onChange, clearSelectedValues, setInitialValues, isLimitExceeded, initialValuesOnOpening, setSelectedValues, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, onApply, onClear, optionDataQa, ...props }: SelectBottomSheetProps<MultipleType, DataType>) => ReactElement;
+export declare const SelectBottomSheet: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ type, name, multiple, clearButton: _clearButton, applyChangesButton: _applyChangesButton, useInitialValuesOnClearAction, loading, error, renderHeader, renderItem, renderButtonsContainer, renderAlertOnExitWithoutSaving, headerTitle, onClose, visible, optionList, optionsListRef, searchValue, setSearchValue, searchable, value: values, onChange, clearSelectedValues, setInitialValues, isLimitExceeded, initialValuesOnOpening, setSelectedValues, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, onApply, onClear, emptyOptionsHint, emptyOptionsSearchHint, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, ...props }: SelectBottomSheetProps<MultipleType, DataType>) => ReactElement;

package/SelectBottomSheet.js

@@ -6,28 +6,34 @@ import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
 import { Action } from '@hh.ru/magritte-ui-action';
 import { ActionBar } from '@hh.ru/magritte-ui-action-bar';
 import { BottomSheetFooter, BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
+import { Button } from '@hh.ru/magritte-ui-button';
 import { CellText, Cell } from '@hh.ru/magritte-ui-cell';
-import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { ArrowPathClockwiseSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { SearchInput } from '@hh.ru/magritte-ui-input';
 import { Loader } from '@hh.ru/magritte-ui-loader';
 import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
+import { SelectError } from './SelectError.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
 import { isArraysEquals } from './isArraysEquals.js';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-icon/variants/icon';
+import '@hh.ru/magritte-ui-spacing';
+import '@hh.ru/magritte-ui-title';
+import '@hh.ru/magritte-ui-typography';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import '@hh.ru/magritte-ui-checkbox-radio';
-import '@hh.ru/magritte-ui-typography';
 
-var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_8-6-23","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_8-6-23","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-6-23","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-6-23","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_8-6-23","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_8-6-23","loading":"magritte-loading___VpU1J_8-6-23","error-wrapper":"magritte-error-wrapper___P7jYg_8-6-23","errorWrapper":"magritte-error-wrapper___P7jYg_8-6-23"};
+var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_9-0-1","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_9-0-1","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_9-0-1","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_9-0-1","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_9-0-1","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_9-0-1","full-screen-placeholder":"magritte-full-screen-placeholder___zPC8k_9-0-1","fullScreenPlaceholder":"magritte-full-screen-placeholder___zPC8k_9-0-1","error-wrapper":"magritte-error-wrapper___P7jYg_9-0-1","errorWrapper":"magritte-error-wrapper___P7jYg_9-0-1"};
 
-const SelectOptionDefault = ({ label, input, type }) => {
+const SelectOptionDefault = ({ data, input, type, }) => {
     if (type === 'delimiter') {
-        return (jsx(CellText, { maxLines: 1, style: "secondary", children: label }));
+        return (jsx(CellText, { maxLines: 1, style: "secondary", children: data.text }));
     }
     if (type === 'label') {
-        return jsx(CellText, { maxLines: 1, children: label });
+        return jsx(CellText, { maxLines: 1, children: data.text });
     }
-    return (jsx(Cell, { Element: "div", align: "center", right: input, children: jsx(CellText, { maxLines: 1, children: label }) }));
+    return (jsx(Cell, { Element: "div", align: "center", right: input, children: jsx(CellText, { maxLines: 1, children: data.text }) }));
 };
 const RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }) => {
     const primaryActions = [clearButton, applyChangesButton].filter(Boolean);
@@ -40,14 +46,16 @@ const RenderHeaderDefault = ({ onCloseBottomSheet, searchValue, setSearchValue,
                 }
             }, "data-qa": "bottom-sheet-navigation-input", autoComplete: "off" })) }));
 };
-const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, applyChangesButton: _applyChangesButton, useInitialValuesOnClearAction, loading, error, renderHeader = RenderHeaderDefault, renderItem = SelectOptionDefault, renderButtonsContainer = RenderButtonsContainerDefault, renderAlertOnExitWithoutSaving, headerTitle, onClose, visible, optionList, optionsListRef, searchValue, setSearchValue, searchable, value: values, onChange, clearSelectedValues, setInitialValues, isLimitExceeded, initialValuesOnOpening, setSelectedValues, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, onApply, onClear, optionDataQa, ...props }) => {
+const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, applyChangesButton: _applyChangesButton, useInitialValuesOnClearAction, loading, error, renderHeader = RenderHeaderDefault, renderItem = SelectOptionDefault, renderButtonsContainer = RenderButtonsContainerDefault, renderAlertOnExitWithoutSaving, headerTitle, onClose, visible, optionList, optionsListRef, searchValue, setSearchValue, searchable, value: values, onChange, clearSelectedValues, setInitialValues, isLimitExceeded, initialValuesOnOpening, setSelectedValues, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, onApply, onClear, emptyOptionsHint, emptyOptionsSearchHint, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, ...props }) => {
     const [alertVisible, setAlertVisible] = useState(false);
     const onCloseAlert = () => setAlertVisible(false);
     const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);
     const showErrorPlaceholder = Boolean(error);
     const onCloseWithAlertCheck = () => {
         if (showAlertOnExitWithoutSaving && multiple) {
-            const haveUnsavingChanges = !isArraysEquals(initialValuesOnOpening.current, values);
+            const haveUnsavingChanges = !isArraysEquals(initialValuesOnOpening.current?.map((item) => item.value) ?? [], 
+            // eslint-disable-next-line no-nested-ternary
+            Array.isArray(values) ? values.map((item) => item.value) : values ? [values.value] : []);
             if (haveUnsavingChanges) {
                 setAlertVisible(true);
             }
@@ -101,10 +109,29 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
             clearButton,
             applyChangesButton,
         })) : (jsx(BottomSheetFooter, { children: error && error.resetButton }));
+    const emptyOptionsHintVisible = optionList.length === 0 &&
+        !searchValue &&
+        !!emptyOptionsHint &&
+        !loading &&
+        !showErrorPlaceholder &&
+        !searchInProgress &&
+        !internalError;
+    const emptyOptionsSearchHintVisible = optionList.length === 0 &&
+        searchValue &&
+        !!emptyOptionsSearchHint &&
+        !loading &&
+        !showErrorPlaceholder &&
+        !searchInProgress &&
+        !internalError;
     const onCloseBottomSheetWithUpdateValues = () => {
         setSelectedValues();
         onCloseWithAlertCheck();
     };
+    const optionsVisible = !loading &&
+        !emptyOptionsSearchHintVisible &&
+        !emptyOptionsHintVisible &&
+        !internalError &&
+        !showErrorPlaceholder;
     return (jsxs(Fragment, { children: [jsxs(BottomSheet, { ...props, ref: optionsListRef, allowScrollWhileFocused: true, keyboardOverlaysContent: false, visible: visible, showDivider: false, withContentPaddings: showErrorPlaceholder, header: renderHeader({
                     onCloseBottomSheet: onCloseWithAlertCheck,
                     searchValue,
@@ -114,10 +141,10 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
                     onSearchSubmit,
                     optionsCount: optionList.length,
                     onCloseBottomSheetWithUpdateValues,
-                }), onClose: onCloseWithAlertCheck, footer: footer, onAppear: onBottomSheetOpen, onAfterExit: onBottomSheetClose, children: [loading && !showErrorPlaceholder && (jsx("div", { className: styles.loading, children: jsx(Loader, { size: 24 }) })), showErrorPlaceholder && jsx("div", { className: styles.errorWrapper, children: error && error.placeholder }), !loading && !showErrorPlaceholder && (jsx("div", { className: classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`]), "data-qa": "magritte-select-option-list-on-xs", children: optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {
-                            const checked = getChecked(option.value, values, !!multiple);
+                }), onClose: onCloseWithAlertCheck, footer: internalError && innerErrorTrls ? (jsx(BottomSheetFooter, { children: jsx(Button, { mode: "primary", style: "accent", size: "medium", onClick: reload, stretched: true, icon: jsx(ArrowPathClockwiseSize24, {}), children: innerErrorTrls.reloadButton }) })) : (footer), onAppear: onBottomSheetOpen, onAfterExit: onBottomSheetClose, children: [internalError && innerErrorTrls && jsx(SelectError, { innerErrorTrls: innerErrorTrls, reload: reload }), emptyOptionsSearchHintVisible && (jsx("div", { className: styles.fullScreenPlaceholder, children: emptyOptionsSearchHint })), emptyOptionsHintVisible && jsx("div", { className: styles.fullScreenPlaceholder, children: emptyOptionsHint }), loading && !showErrorPlaceholder && (jsx("div", { className: styles.fullScreenPlaceholder, children: jsx(Loader, { size: 24 }) })), showErrorPlaceholder && jsx("div", { className: styles.errorWrapper, children: error && error.placeholder }), optionsVisible && (jsx("div", { className: classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`]), "data-qa": "magritte-select-option-list-on-xs", children: optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {
+                            const checked = Boolean(option.data && getChecked(option.data, values ?? []));
                             const disabled = !checked && (_disabled || isLimitExceeded);
-                            return (jsx(SelectOption, { name: name, checked: checked, onChange: handleChange, render: renderItem, disabled: disabled, type: optionType || type, plain: type === 'label', multiple: multiple, "data-qa": optionDataQa, isXS: true, ...option }, option.value));
+                            return (jsx(SelectOption, { name: name, checked: checked, onChange: handleChange, render: renderItem, disabled: disabled, type: optionType || type, plain: type === 'label', multiple: multiple, "data-qa": optionDataQa, isXS: true, ...option }, option.data.value));
                         }) }))] }), renderAlertOnExitWithoutSaving?.({
                 alertVisible,
                 onCloseAlert,

package/SelectBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBottomSheet.js","sources":["../src/SelectBottomSheet.tsx"],"sourcesContent":["import { useCallback, ReactElement, ReactNode, cloneElement, useState, ComponentProps } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\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 { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\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    SelectButtons,\n    SelectBottomSheetProps,\n    RenderOptionTypeProps,\n    RenderHeaderProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType,>({ label, input, type }: RenderOptionTypeProps<DataType>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {label}\n            </CellText>\n        );\n    }\n    if (type === 'label') {\n        return <CellText maxLines={1}>{label}</CellText>;\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" right={input}>\n            <CellText maxLines={1}>{label}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }: SelectButtons): ReactNode => {\n    const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n    return <ActionBar type=\"mobile\" primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nconst RenderHeaderDefault = ({\n    onCloseBottomSheet,\n    searchValue,\n    setSearchValue,\n    searchable,\n    headerTitle,\n    onSearchSubmit,\n    optionsCount,\n    onCloseBottomSheetWithUpdateValues,\n}: RenderHeaderProps): ReactNode => {\n    return (\n        <NavigationBar\n            title={headerTitle}\n            right={\n                <Action\n                    icon={CrossOutlinedSize24}\n                    onClick={onCloseBottomSheet}\n                    data-qa=\"select-bottom-sheet-navigation-close\"\n                />\n            }\n            options={\n                searchable && (\n                    <SearchInput\n                        clearable\n                        size=\"medium\"\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        onKeyDown={(event) => {\n                            if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                                onSearchSubmit(\n                                    event,\n                                    onCloseBottomSheet,\n                                    optionsCount,\n                                    onCloseBottomSheetWithUpdateValues\n                                );\n                            }\n                        }}\n                        data-qa=\"bottom-sheet-navigation-input\"\n                        autoComplete=\"off\"\n                    />\n                )\n            }\n        />\n    );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType>({\n    type,\n    name,\n    multiple,\n    clearButton: _clearButton,\n    applyChangesButton: _applyChangesButton,\n    useInitialValuesOnClearAction,\n    loading,\n    error,\n    renderHeader = RenderHeaderDefault,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    renderAlertOnExitWithoutSaving,\n    headerTitle,\n    onClose,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    searchable,\n    value: values,\n    onChange,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    initialValuesOnOpening,\n    setSelectedValues,\n    onBottomSheetOpen,\n    onBottomSheetClose,\n    onSearchSubmit,\n    onApply,\n    onClear,\n    optionDataQa,\n    ...props\n}: SelectBottomSheetProps<MultipleType, DataType>): ReactElement => {\n    const [alertVisible, setAlertVisible] = useState(false);\n    const onCloseAlert = () => setAlertVisible(false);\n    const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n    const showErrorPlaceholder = Boolean(error);\n\n    const onCloseWithAlertCheck = () => {\n        if (showAlertOnExitWithoutSaving && multiple) {\n            const haveUnsavingChanges = !isArraysEquals<string>(\n                initialValuesOnOpening.current as string[],\n                values as string[]\n            );\n            if (haveUnsavingChanges) {\n                setAlertVisible(true);\n            } else {\n                onClose();\n            }\n        } else {\n            onClose();\n        }\n    };\n\n    const clearButton =\n        _clearButton &&\n        cloneElement(_clearButton, {\n            key: 'clearButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-clear-action-on-xs',\n            onClick: () => {\n                if (useInitialValuesOnClearAction) {\n                    setInitialValues();\n                } else {\n                    clearSelectedValues();\n                }\n                onClose();\n                onClear?.();\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n\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-on-xs',\n                onClick: () => {\n                    setSelectedValues();\n                    onClose();\n                    onApply?.({ isMobile: true, searchValue });\n                },\n            } as Partial<ComponentProps<typeof Button>>)) ||\n        undefined;\n\n    const handleChange: OnChangeAction = useCallback(\n        (...args) => {\n            if (!multiple) {\n                onClose();\n            }\n            onChange(...args);\n        },\n        [multiple, onChange, onClose]\n    );\n\n    const haveClearOrApplyChangesButtons = clearButton || applyChangesButton;\n    const footer = !showErrorPlaceholder ? (\n        !loading &&\n        haveClearOrApplyChangesButtons &&\n        renderButtonsContainer({\n            clearButton,\n            applyChangesButton,\n        })\n    ) : (\n        <BottomSheetFooter>{error && error.resetButton}</BottomSheetFooter>\n    );\n\n    const onCloseBottomSheetWithUpdateValues = () => {\n        setSelectedValues();\n        onCloseWithAlertCheck();\n    };\n\n    return (\n        <>\n            <BottomSheet\n                {...props}\n                ref={optionsListRef}\n                allowScrollWhileFocused\n                keyboardOverlaysContent={false}\n                visible={visible}\n                showDivider={false}\n                withContentPaddings={showErrorPlaceholder}\n                header={renderHeader({\n                    onCloseBottomSheet: onCloseWithAlertCheck,\n                    searchValue,\n                    setSearchValue,\n                    searchable,\n                    headerTitle,\n                    onSearchSubmit,\n                    optionsCount: optionList.length,\n                    onCloseBottomSheetWithUpdateValues,\n                })}\n                onClose={onCloseWithAlertCheck}\n                footer={footer}\n                onAppear={onBottomSheetOpen}\n                onAfterExit={onBottomSheetClose}\n            >\n                {loading && !showErrorPlaceholder && (\n                    <div className={styles.loading}>\n                        <Loader size={24} />\n                    </div>\n                )}\n                {showErrorPlaceholder && <div className={styles.errorWrapper}>{error && error.placeholder}</div>}\n                {!loading && !showErrorPlaceholder && (\n                    <div\n                        className={classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`])}\n                        data-qa=\"magritte-select-option-list-on-xs\"\n                    >\n                        {optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {\n                            const checked = getChecked(option.value, values, !!multiple);\n                            const disabled = !checked && (_disabled || isLimitExceeded);\n                            return (\n                                <SelectOption\n                                    key={option.value}\n                                    name={name}\n                                    checked={checked}\n                                    onChange={handleChange}\n                                    render={renderItem}\n                                    disabled={disabled}\n                                    type={optionType || type}\n                                    plain={type === 'label'}\n                                    multiple={multiple}\n                                    data-qa={optionDataQa}\n                                    isXS\n                                    {...option}\n                                />\n                            );\n                        })}\n                    </div>\n                )}\n            </BottomSheet>\n            {renderAlertOnExitWithoutSaving?.({\n                alertVisible,\n                onCloseAlert,\n                onCloseBottomSheetAndAlert: () => {\n                    onCloseAlert();\n                    onClose();\n                },\n            })}\n        </>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"SelectBottomSheet.js","sources":["../src/SelectBottomSheet.tsx"],"sourcesContent":["import { useCallback, ReactElement, ReactNode, cloneElement, useState, ComponentProps } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\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 { ArrowPathClockwiseSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\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    SelectButtons,\n    SelectBottomSheetProps,\n    RenderOptionTypeProps,\n    RenderHeaderProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType extends StaticDataFetcherItem>({\n    data,\n    input,\n    type,\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 <CellText maxLines={1}>{data.text}</CellText>;\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" right={input}>\n            <CellText maxLines={1}>{data.text}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }: SelectButtons): ReactNode => {\n    const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n    return <ActionBar type=\"mobile\" primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nconst RenderHeaderDefault = ({\n    onCloseBottomSheet,\n    searchValue,\n    setSearchValue,\n    searchable,\n    headerTitle,\n    onSearchSubmit,\n    optionsCount,\n    onCloseBottomSheetWithUpdateValues,\n}: RenderHeaderProps): ReactNode => {\n    return (\n        <NavigationBar\n            title={headerTitle}\n            right={\n                <Action\n                    icon={CrossOutlinedSize24}\n                    onClick={onCloseBottomSheet}\n                    data-qa=\"select-bottom-sheet-navigation-close\"\n                />\n            }\n            options={\n                searchable && (\n                    <SearchInput\n                        clearable\n                        size=\"medium\"\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        onKeyDown={(event) => {\n                            if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                                onSearchSubmit(\n                                    event,\n                                    onCloseBottomSheet,\n                                    optionsCount,\n                                    onCloseBottomSheetWithUpdateValues\n                                );\n                            }\n                        }}\n                        data-qa=\"bottom-sheet-navigation-input\"\n                        autoComplete=\"off\"\n                    />\n                )\n            }\n        />\n    );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n    type,\n    name,\n    multiple,\n    clearButton: _clearButton,\n    applyChangesButton: _applyChangesButton,\n    useInitialValuesOnClearAction,\n    loading,\n    error,\n    renderHeader = RenderHeaderDefault,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    renderAlertOnExitWithoutSaving,\n    headerTitle,\n    onClose,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    searchable,\n    value: values,\n    onChange,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    initialValuesOnOpening,\n    setSelectedValues,\n    onBottomSheetOpen,\n    onBottomSheetClose,\n    onSearchSubmit,\n    onApply,\n    onClear,\n    emptyOptionsHint,\n    emptyOptionsSearchHint,\n    searchInProgress,\n    internalError,\n    reload,\n    innerErrorTrls,\n    optionDataQa,\n    ...props\n}: SelectBottomSheetProps<MultipleType, DataType>): ReactElement => {\n    const [alertVisible, setAlertVisible] = useState(false);\n    const onCloseAlert = () => setAlertVisible(false);\n    const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n    const showErrorPlaceholder = Boolean(error);\n\n    const onCloseWithAlertCheck = () => {\n        if (showAlertOnExitWithoutSaving && multiple) {\n            const haveUnsavingChanges = !isArraysEquals<string>(\n                initialValuesOnOpening.current?.map((item) => item.value) ?? [],\n                // eslint-disable-next-line no-nested-ternary\n                Array.isArray(values) ? values.map((item) => item.value) : values ? [values.value] : []\n            );\n            if (haveUnsavingChanges) {\n                setAlertVisible(true);\n            } else {\n                onClose();\n            }\n        } else {\n            onClose();\n        }\n    };\n\n    const clearButton =\n        _clearButton &&\n        cloneElement(_clearButton, {\n            key: 'clearButton',\n            size: 'medium',\n            'data-qa': 'magritte-select-clear-action-on-xs',\n            onClick: () => {\n                if (useInitialValuesOnClearAction) {\n                    setInitialValues();\n                } else {\n                    clearSelectedValues();\n                }\n                onClose();\n                onClear?.();\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n\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-on-xs',\n                onClick: () => {\n                    setSelectedValues();\n                    onClose();\n                    onApply?.({ isMobile: true, searchValue });\n                },\n            } as Partial<ComponentProps<typeof Button>>)) ||\n        undefined;\n\n    const handleChange: OnChangeAction<DataType> = useCallback(\n        (...args) => {\n            if (!multiple) {\n                onClose();\n            }\n            onChange(...args);\n        },\n        [multiple, onChange, onClose]\n    );\n\n    const haveClearOrApplyChangesButtons = clearButton || applyChangesButton;\n    const footer = !showErrorPlaceholder ? (\n        !loading &&\n        haveClearOrApplyChangesButtons &&\n        renderButtonsContainer({\n            clearButton,\n            applyChangesButton,\n        })\n    ) : (\n        <BottomSheetFooter>{error && error.resetButton}</BottomSheetFooter>\n    );\n\n    const emptyOptionsHintVisible =\n        optionList.length === 0 &&\n        !searchValue &&\n        !!emptyOptionsHint &&\n        !loading &&\n        !showErrorPlaceholder &&\n        !searchInProgress &&\n        !internalError;\n\n    const emptyOptionsSearchHintVisible =\n        optionList.length === 0 &&\n        searchValue &&\n        !!emptyOptionsSearchHint &&\n        !loading &&\n        !showErrorPlaceholder &&\n        !searchInProgress &&\n        !internalError;\n\n    const onCloseBottomSheetWithUpdateValues = () => {\n        setSelectedValues();\n        onCloseWithAlertCheck();\n    };\n\n    const optionsVisible =\n        !loading &&\n        !emptyOptionsSearchHintVisible &&\n        !emptyOptionsHintVisible &&\n        !internalError &&\n        !showErrorPlaceholder;\n\n    return (\n        <>\n            <BottomSheet\n                {...props}\n                ref={optionsListRef}\n                allowScrollWhileFocused\n                keyboardOverlaysContent={false}\n                visible={visible}\n                showDivider={false}\n                withContentPaddings={showErrorPlaceholder}\n                header={renderHeader({\n                    onCloseBottomSheet: onCloseWithAlertCheck,\n                    searchValue,\n                    setSearchValue,\n                    searchable,\n                    headerTitle,\n                    onSearchSubmit,\n                    optionsCount: optionList.length,\n                    onCloseBottomSheetWithUpdateValues,\n                })}\n                onClose={onCloseWithAlertCheck}\n                footer={\n                    internalError && innerErrorTrls ? (\n                        <BottomSheetFooter>\n                            <Button\n                                mode=\"primary\"\n                                style=\"accent\"\n                                size=\"medium\"\n                                onClick={reload}\n                                stretched\n                                icon={<ArrowPathClockwiseSize24 />}\n                            >\n                                {innerErrorTrls.reloadButton}\n                            </Button>\n                        </BottomSheetFooter>\n                    ) : (\n                        footer\n                    )\n                }\n                onAppear={onBottomSheetOpen}\n                onAfterExit={onBottomSheetClose}\n            >\n                {internalError && innerErrorTrls && <SelectError innerErrorTrls={innerErrorTrls} reload={reload} />}\n                {emptyOptionsSearchHintVisible && (\n                    <div className={styles.fullScreenPlaceholder}>{emptyOptionsSearchHint}</div>\n                )}\n                {emptyOptionsHintVisible && <div className={styles.fullScreenPlaceholder}>{emptyOptionsHint}</div>}\n                {loading && !showErrorPlaceholder && (\n                    <div className={styles.fullScreenPlaceholder}>\n                        <Loader size={24} />\n                    </div>\n                )}\n                {showErrorPlaceholder && <div className={styles.errorWrapper}>{error && error.placeholder}</div>}\n                {optionsVisible && (\n                    <div\n                        className={classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`])}\n                        data-qa=\"magritte-select-option-list-on-xs\"\n                    >\n                        {optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {\n                            const checked = Boolean(option.data && getChecked<DataType>(option.data, values ?? []));\n                            const disabled = !checked && (_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={optionType || type}\n                                    plain={type === 'label'}\n                                    multiple={multiple}\n                                    data-qa={optionDataQa}\n                                    isXS\n                                    {...option}\n                                />\n                            );\n                        })}\n                    </div>\n                )}\n            </BottomSheet>\n            {renderAlertOnExitWithoutSaving?.({\n                alertVisible,\n                onCloseAlert,\n                onCloseBottomSheetAndAlert: () => {\n                    onCloseAlert();\n                    onClose();\n                },\n            })}\n        </>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/SelectDrop.d.ts

@@ -1,3 +1,4 @@
 import { ReactElement } from 'react';
+import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
 import { SelectDropProps } from '@hh.ru/magritte-ui-select/types';
-export declare const SelectDrop: <MultipleType extends boolean, DataType>({ activatorRef, type, name, multiple, applyChangesButton: _applyChangesButton, clearButton: _clearButton, useInitialValuesOnClearAction, loading, renderItem, renderButtonsContainer, visible, optionList, optionsListRef, searchValue, setSearchValue, maxWidth, value: values, onChange, onClose, clearSelectedValues, setInitialValues, isLimitExceeded, plain, searchable, widthEqualToActivator, forceDropVisibleWithEmptyOptions, renderContentBefore, setForcedState, setSelectedValues, maxHeight, onDropClose, onDropOpen, onApply, onClear, optionDataQa, ...props }: SelectDropProps<MultipleType, DataType>) => ReactElement;
+export declare const SelectDrop: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ activatorRef, type, name, multiple, applyChangesButton: _applyChangesButton, clearButton: _clearButton, useInitialValuesOnClearAction, loading, renderItem, renderButtonsContainer, 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, ...props }: SelectDropProps<MultipleType, DataType>) => ReactElement;

package/SelectDrop.js

@@ -6,26 +6,32 @@ import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
 import { CellText, Cell } from '@hh.ru/magritte-ui-cell';
 import { Drop } from '@hh.ru/magritte-ui-drop';
 import { Loader } from '@hh.ru/magritte-ui-loader';
+import { SelectError } from './SelectError.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-button';
+import '@hh.ru/magritte-ui-icon/variants/icon';
+import '@hh.ru/magritte-ui-spacing';
+import '@hh.ru/magritte-ui-title';
+import '@hh.ru/magritte-ui-typography';
 import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
 import '@hh.ru/magritte-ui-checkbox-radio';
 import '@hh.ru/magritte-ui-icon/icon';
-import '@hh.ru/magritte-ui-typography';
 
-var styles = {"select-drop":"magritte-select-drop___jn4O-_8-6-23","selectDrop":"magritte-select-drop___jn4O-_8-6-23","select-drop-header":"magritte-select-drop-header___fMmio_8-6-23","selectDropHeader":"magritte-select-drop-header___fMmio_8-6-23","select-drop_plain":"magritte-select-drop_plain___VL8Fz_8-6-23","selectDropPlain":"magritte-select-drop_plain___VL8Fz_8-6-23","label-option-plain":"magritte-label-option-plain___BvBH8_8-6-23","labelOptionPlain":"magritte-label-option-plain___BvBH8_8-6-23","loading":"magritte-loading___AMiuq_8-6-23"};
+var styles = {"select-drop":"magritte-select-drop___jn4O-_9-0-1","selectDrop":"magritte-select-drop___jn4O-_9-0-1","select-drop-header":"magritte-select-drop-header___fMmio_9-0-1","selectDropHeader":"magritte-select-drop-header___fMmio_9-0-1","select-drop_plain":"magritte-select-drop_plain___VL8Fz_9-0-1","selectDropPlain":"magritte-select-drop_plain___VL8Fz_9-0-1","label-option-plain":"magritte-label-option-plain___BvBH8_9-0-1","labelOptionPlain":"magritte-label-option-plain___BvBH8_9-0-1","loading":"magritte-loading___AMiuq_9-0-1","hint":"magritte-hint___6qaFl_9-0-1"};
 
-const SelectOptionDefault = ({ label, input, type, plain, }) => {
+const SelectOptionDefault = ({ data, input, type, plain, }) => {
     if (type === 'delimiter') {
-        return (jsx(CellText, { maxLines: 1, style: "secondary", children: label }));
+        return (jsx(CellText, { maxLines: 1, style: "secondary", children: data.text }));
     }
     if (type === 'label') {
         if (plain) {
-            return jsx(CellText, { maxLines: 1, children: label });
+            return jsx(CellText, { maxLines: 1, children: data.text });
         }
-        return (jsx(Cell, { Element: "div", align: "center", children: jsx("div", { className: styles.labelOptionPlain, children: jsx(CellText, { maxLines: 1, children: label }) }) }));
+        return (jsx(Cell, { Element: "div", align: "center", children: jsx("div", { className: styles.labelOptionPlain, children: jsx(CellText, { maxLines: 1, children: data.text }) }) }));
     }
-    return (jsx(Cell, { Element: "div", align: "center", left: input, children: jsx(CellText, { maxLines: 1, children: label }) }));
+    return (jsx(Cell, { Element: "div", align: "center", left: input, children: jsx(CellText, { maxLines: 1, children: data.text }) }));
 };
 const RenderButtonsContainerDefault = ({ applyChangesButton }) => {
     const primaryActions = [applyChangesButton].filter((btn) => btn);
@@ -35,10 +41,10 @@ const RenderButtonsContainerDefault = ({ applyChangesButton }) => {
     // заменить на action-bar, когда разберемся с отсутпами
     return jsx(Fragment, { children: 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, onApply, onClear, optionDataQa, ...props }) => {
+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, ...props }) => {
     const closedByKeyboardRef = useRef(false);
-    const handleChange = useCallback((...args) => {
-        onChange(...args);
+    const handleChange = useCallback((newValue, needToPut) => {
+        onChange(newValue, needToPut);
         if (!multiple) {
             onClose?.();
         }
@@ -92,17 +98,35 @@ const SelectDrop = ({ activatorRef, type, name, multiple, applyChangesButton: _a
             applyChangesButton,
             clearButton,
         });
-    return (jsxs(Drop, { ...props, ref: optionsListRef, autoFocusWhenOpened: false, maxWidth: maxWidth, visible: (optionList.length > 0 || forceDropVisibleWithEmptyOptions) && visible, placement: ['bottom-left', 'top-left'], activatorRef: activatorRef, role: searchable ? 'status' : 'listbox', space: plain ? 600 : 300, keyboardNavigationMode: "list", onClose: () => {
+    const emptyOptionsHintVisible = optionList.length === 0 &&
+        !searchValue &&
+        !!emptyOptionsHint &&
+        !loading &&
+        !searchInProgress &&
+        !internalError;
+    const emptySearchOptionsHintVisible = !!(optionList.length === 0 &&
+        searchValue &&
+        !!emptyOptionsSearchHint &&
+        !loading &&
+        !searchInProgress &&
+        !internalError);
+    const optionsVisible = !loading && !emptySearchOptionsHintVisible && !emptyOptionsHintVisible && !internalError;
+    return (jsxs(Drop, { ...props, ref: optionsListRef, autoFocusWhenOpened: false, maxWidth: maxWidth, visible: (optionList.length > 0 ||
+            forceDropVisibleWithEmptyOptions ||
+            emptyOptionsHintVisible ||
+            emptySearchOptionsHintVisible ||
+            internalError) &&
+            visible, placement: ['bottom-left', 'top-left'], activatorRef: activatorRef, role: searchable ? 'status' : 'listbox', space: plain ? 600 : 300, 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, children: [loading && (jsx("div", { className: styles.loading, children: jsx(Loader, { size: 24 }) })), !loading && (jsxs(Fragment, { children: [renderContentBefore && (jsx("div", { "data-qa": "magritte-select-header", className: styles.selectDropHeader, children: renderContentBefore({ clearSelectedValuesAndClose, searchValue, setSearchValue }) })), jsx("div", { className: classnames(styles.selectDrop, { [styles.selectDropPlain]: plain }), "data-qa": "magritte-select-option-list", style: { maxHeight: `${maxHeight}px` }, children: optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {
-                            const checked = getChecked(option.value, values, !!multiple);
-                            const disabled = !checked && (_disabled || isLimitExceeded);
-                            return (jsx(SelectOption, { name: name, checked: checked, onChange: handleChange, render: renderItem, disabled: disabled, type: optionType || type, plain: !!plain, isMobile: false, multiple: multiple, "data-qa": optionDataQa, ...option }, option.value));
+        }, widthEqualToActivator: widthEqualToActivator || loading, forcePlacement: true, footer: footer, onAfterExit: onDropClose, onAppear: onDropOpen, 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 }) })), jsx("div", { className: classnames(styles.selectDrop, { [styles.selectDropPlain]: plain }), "data-qa": "magritte-select-option-list", style: { maxHeight: `${maxHeight}px` }, 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, isMobile: false, multiple: multiple, "data-qa": optionDataQa, data: option.data }, option.data.value));
                         }) })] }))] }));
 };