@hh.ru/magritte-ui-select 7.0.1 → 7.1.1

package/Select.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { SelectProps } from '@hh.ru/magritte-ui-select/types';
-export declare const Select: <MultipleType extends boolean, T>({ 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, plain, widthEqualToActivator, renderContentBefore, onBlur, onFocus, onDropOpen, onDropClose, onBottomSheetClose, onBottomSheetOpen, }: SelectProps<MultipleType, T>) => ReactElement;
+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, plain, widthEqualToActivator, renderContentBefore, onBlur, onFocus, onDropOpen, onDropClose, onBottomSheetClose, onBottomSheetOpen, }: SelectProps<MultipleType, DataType>) => ReactElement;

package/Select.js

@@ -166,6 +166,7 @@ const Select = ({ type, options, multiple, value: _value, maxSelectedOptions, lo
                         showedByFocus.current = true;
                     },
                     'data-qa': dataQa,
+                    setSearchValue,
                     ...triggerProps,
                 }), useSearchInput && (jsx("div", { style: inputWrapperStyles, children: jsx(BaseInput, { ...sizeProp, ref: inputRef, wrapperRef: activatorRef, value: searchValue, onChange: setSearchValue, onKeyDown: handleKeyDown, onBlur: () => {
                         setForcedState(null);

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 { SelectProps, TriggerPropsWithRef, FocusStateType } 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, T>({\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    plain = false,\n    widthEqualToActivator = true,\n    renderContentBefore,\n    onBlur,\n    onFocus,\n    onDropOpen,\n    onDropClose,\n    onBottomSheetClose,\n    onBottomSheetOpen,\n}: SelectProps<MultipleType, T>): 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\n    const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n        useSelectOptionsList(isMobile);\n    const prevVisibleRef = useRef<boolean>(showOptions);\n    const { optionList, searchValue, setSearchValue } = useSelectSearch<T>(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<T, MultipleType>(\n        !!multiple,\n        _value || [],\n        options,\n        showOptions,\n        hasChangesButton,\n        onChangeHandler\n    );\n\n    const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef);\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') {\n            setUseSearchInput(true);\n        }\n    }, [forcedState, isMobile, searchable]);\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                    onToogle: () => {\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                    ...triggerProps,\n                } as TriggerPropsWithRef)}\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                />\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                    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                />\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} 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 { SelectProps, TriggerPropsWithRef, FocusStateType, SetSearchValue } 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    plain = false,\n    widthEqualToActivator = true,\n    renderContentBefore,\n    onBlur,\n    onFocus,\n    onDropOpen,\n    onDropClose,\n    onBottomSheetClose,\n    onBottomSheetOpen,\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\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    );\n\n    const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef);\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') {\n            setUseSearchInput(true);\n        }\n    }, [forcedState, isMobile, searchable]);\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                    onToogle: () => {\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                    ...triggerProps,\n                } as TriggerPropsWithRef & SetSearchValue)}\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                />\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                    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                />\n            )}\n        </>\n    );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/SelectBottomSheet.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { SelectBottomSheetProps } from '@hh.ru/magritte-ui-select/types';
-export declare const SelectBottomSheet: <MultipleType extends boolean, T>({ 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, ...props }: SelectBottomSheetProps<MultipleType, T>) => ReactElement;
+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, ...props }: SelectBottomSheetProps<MultipleType, DataType>) => ReactElement;

package/SelectBottomSheet.js

@@ -18,7 +18,7 @@ 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_7-0-1","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_7-0-1","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_7-0-1","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_7-0-1","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_7-0-1","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_7-0-1","loading":"magritte-loading___VpU1J_7-0-1","error-wrapper":"magritte-error-wrapper___P7jYg_7-0-1","errorWrapper":"magritte-error-wrapper___P7jYg_7-0-1"};
+var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_7-1-1","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_7-1-1","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_7-1-1","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_7-1-1","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_7-1-1","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_7-1-1","loading":"magritte-loading___VpU1J_7-1-1","error-wrapper":"magritte-error-wrapper___P7jYg_7-1-1","errorWrapper":"magritte-error-wrapper___P7jYg_7-1-1"};
 
 const SelectOptionDefault = ({ label, input, type }) => {
     if (type === 'delimiter') {

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 { 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 = <T,>({ label, input, type }: RenderOptionTypeProps<T>): 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}: 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                        data-qa=\"bottom-sheet-navigation-input\"\n                        autoComplete=\"off\"\n                    />\n                )\n            }\n        />\n    );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, T>({\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    ...props\n}: SelectBottomSheetProps<MultipleType, T>): 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            },\n        } as 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                },\n            } as 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    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                })}\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                                    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 { 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}: 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                        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    ...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            },\n        } as 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                },\n            } as 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    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                })}\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                                    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,3 @@
 import { ReactElement } from 'react';
 import { SelectDropProps } from '@hh.ru/magritte-ui-select/types';
-export declare const SelectDrop: <MultipleType extends boolean, T>({ 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, renderContentBefore, setForcedState, setSelectedValues, maxHeight, onDropClose, onDropOpen, ...props }: SelectDropProps<MultipleType, T>) => ReactElement;
+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, renderContentBefore, setForcedState, setSelectedValues, maxHeight, onDropClose, onDropOpen, ...props }: SelectDropProps<MultipleType, DataType>) => ReactElement;

package/SelectDrop.js

@@ -13,9 +13,9 @@ 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-_7-0-1","selectDrop":"magritte-select-drop___jn4O-_7-0-1","select-drop-header":"magritte-select-drop-header___fMmio_7-0-1","selectDropHeader":"magritte-select-drop-header___fMmio_7-0-1","select-drop_plain":"magritte-select-drop_plain___VL8Fz_7-0-1","selectDropPlain":"magritte-select-drop_plain___VL8Fz_7-0-1","label-option-plain":"magritte-label-option-plain___BvBH8_7-0-1","labelOptionPlain":"magritte-label-option-plain___BvBH8_7-0-1","loading":"magritte-loading___AMiuq_7-0-1"};
+var styles = {"select-drop":"magritte-select-drop___jn4O-_7-1-1","selectDrop":"magritte-select-drop___jn4O-_7-1-1","select-drop-header":"magritte-select-drop-header___fMmio_7-1-1","selectDropHeader":"magritte-select-drop-header___fMmio_7-1-1","select-drop_plain":"magritte-select-drop_plain___VL8Fz_7-1-1","selectDropPlain":"magritte-select-drop_plain___VL8Fz_7-1-1","label-option-plain":"magritte-label-option-plain___BvBH8_7-1-1","labelOptionPlain":"magritte-label-option-plain___BvBH8_7-1-1","loading":"magritte-loading___AMiuq_7-1-1"};
 
-const SelectOptionDefault = ({ label, input, type, plain }) => {
+const SelectOptionDefault = ({ label, input, type, plain, }) => {
     if (type === 'delimiter') {
         return (jsx(CellText, { maxLines: 1, style: "secondary", children: label }));
     }

package/SelectDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDrop.js","sources":["../src/SelectDrop.tsx"],"sourcesContent":["import { useCallback, ReactElement, cloneElement, ComponentProps, ReactNode, useRef, KeyboardEvent } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { OnChangeAction, SelectDropProps, RenderOptionTypeProps, SelectButtons } from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-drop.less';\n\nconst SelectOptionDefault = <T,>({ label, input, type, plain }: RenderOptionTypeProps<T>): ReactElement => {\n    if (type === 'delimiter') {\n        return (\n            <CellText maxLines={1} style=\"secondary\">\n                {label}\n            </CellText>\n        );\n    }\n    if (type === 'label') {\n        if (plain) {\n            return <CellText maxLines={1}>{label}</CellText>;\n        }\n        return (\n            <Cell Element=\"div\" align=\"center\">\n                <div className={styles.labelOptionPlain}>\n                    <CellText maxLines={1}>{label}</CellText>\n                </div>\n            </Cell>\n        );\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" left={input}>\n            <CellText maxLines={1}>{label}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({ applyChangesButton }: SelectButtons): ReactNode => {\n    const primaryActions = [applyChangesButton].filter((btn) => btn);\n    if (primaryActions.length === 0) {\n        return null;\n    }\n    // заменить на action-bar, когда разберемся с отсутпами\n    return <>{applyChangesButton}</>;\n};\n\nexport const SelectDrop = <MultipleType extends boolean, T>({\n    activatorRef,\n    type,\n    name,\n    multiple,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    useInitialValuesOnClearAction,\n    loading,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    maxWidth,\n    value: values,\n    onChange,\n    onClose,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    plain,\n    searchable,\n    widthEqualToActivator,\n    renderContentBefore,\n    setForcedState,\n    setSelectedValues,\n    maxHeight,\n    onDropClose,\n    onDropOpen,\n    ...props\n}: SelectDropProps<MultipleType, T>): ReactElement => {\n    const closedByKeyboardRef = useRef(false);\n    const handleChange: OnChangeAction = useCallback(\n        (...args) => {\n            onChange(...args);\n\n            if (!multiple) {\n                onClose?.();\n            }\n\n            if (!multiple && closedByKeyboardRef.current) {\n                closedByKeyboardRef.current = false;\n                setForcedState('focus');\n                return;\n            }\n\n            if (multiple && searchValue) {\n                setForcedState('focusAndSelect');\n                return;\n            }\n            closedByKeyboardRef.current = false;\n            setForcedState(null);\n        },\n        [multiple, onChange, onClose, searchValue, setForcedState]\n    );\n    const needAddChangesButton = multiple && _applyChangesButton;\n    const applyChangesButton =\n        (needAddChangesButton &&\n            cloneElement(_applyChangesButton, {\n                key: 'applyChangesButton',\n                size: 'medium',\n                'data-qa': 'magritte-select-apply',\n                onClick: () => {\n                    setSelectedValues();\n                    onClose?.();\n                },\n            } as ComponentProps<typeof Button>)) ||\n        undefined;\n    const clearSelectedValuesAndClose = () => {\n        if (useInitialValuesOnClearAction) {\n            setInitialValues();\n        } else {\n            clearSelectedValues();\n        }\n        onClose?.();\n    };\n    const footer =\n        !loading &&\n        needAddChangesButton &&\n        renderButtonsContainer({\n            applyChangesButton,\n        });\n    return (\n        <Drop\n            {...props}\n            ref={optionsListRef}\n            autoFocusWhenOpened={false}\n            maxWidth={maxWidth}\n            visible={optionList.length > 0 && visible}\n            placement={['bottom-left', 'top-left']}\n            activatorRef={activatorRef}\n            role={searchable ? 'status' : 'listbox'}\n            space={plain ? 600 : 300}\n            keyboardNavigationMode=\"list\"\n            onClose={() => {\n                setForcedState('focus');\n                onClose?.();\n            }}\n            closeByClickOutside={false}\n            onKeyDownCapture={(event: KeyboardEvent) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    closedByKeyboardRef.current = true;\n                }\n            }}\n            widthEqualToActivator={widthEqualToActivator || loading}\n            forcePlacement\n            footer={footer}\n            onAfterExit={onDropClose}\n            onAppear={onDropOpen}\n        >\n            {loading && (\n                <div className={styles.loading}>\n                    <Loader size={24} />\n                </div>\n            )}\n            {!loading && (\n                <>\n                    {renderContentBefore && (\n                        <div data-qa=\"magritte-select-header\" className={styles.selectDropHeader}>\n                            {renderContentBefore({ clearSelectedValuesAndClose, searchValue, setSearchValue })}\n                        </div>\n                    )}\n                    <div\n                        className={classnames(styles.selectDrop, { [styles.selectDropPlain]: plain })}\n                        data-qa=\"magritte-select-option-list\"\n                        style={{ maxHeight: `${maxHeight}px` }}\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={!!plain}\n                                    isMobile={false}\n                                    multiple={multiple}\n                                    {...option}\n                                />\n                            );\n                        })}\n                    </div>\n                </>\n            )}\n        </Drop>\n    );\n};\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
+{"version":3,"file":"SelectDrop.js","sources":["../src/SelectDrop.tsx"],"sourcesContent":["import { useCallback, ReactElement, cloneElement, ComponentProps, ReactNode, useRef, KeyboardEvent } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { OnChangeAction, SelectDropProps, RenderOptionTypeProps, SelectButtons } from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-drop.less';\n\nconst SelectOptionDefault = <DataType,>({\n    label,\n    input,\n    type,\n    plain,\n}: 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        if (plain) {\n            return <CellText maxLines={1}>{label}</CellText>;\n        }\n        return (\n            <Cell Element=\"div\" align=\"center\">\n                <div className={styles.labelOptionPlain}>\n                    <CellText maxLines={1}>{label}</CellText>\n                </div>\n            </Cell>\n        );\n    }\n    return (\n        <Cell Element=\"div\" align=\"center\" left={input}>\n            <CellText maxLines={1}>{label}</CellText>\n        </Cell>\n    );\n};\n\nconst RenderButtonsContainerDefault = ({ applyChangesButton }: SelectButtons): ReactNode => {\n    const primaryActions = [applyChangesButton].filter((btn) => btn);\n    if (primaryActions.length === 0) {\n        return null;\n    }\n    // заменить на action-bar, когда разберемся с отсутпами\n    return <>{applyChangesButton}</>;\n};\n\nexport const SelectDrop = <MultipleType extends boolean, DataType>({\n    activatorRef,\n    type,\n    name,\n    multiple,\n    applyChangesButton: _applyChangesButton,\n    clearButton: _clearButton,\n    useInitialValuesOnClearAction,\n    loading,\n    renderItem = SelectOptionDefault,\n    renderButtonsContainer = RenderButtonsContainerDefault,\n    visible,\n    optionList,\n    optionsListRef,\n    searchValue,\n    setSearchValue,\n    maxWidth,\n    value: values,\n    onChange,\n    onClose,\n    clearSelectedValues,\n    setInitialValues,\n    isLimitExceeded,\n    plain,\n    searchable,\n    widthEqualToActivator,\n    renderContentBefore,\n    setForcedState,\n    setSelectedValues,\n    maxHeight,\n    onDropClose,\n    onDropOpen,\n    ...props\n}: SelectDropProps<MultipleType, DataType>): ReactElement => {\n    const closedByKeyboardRef = useRef(false);\n    const handleChange: OnChangeAction = useCallback(\n        (...args) => {\n            onChange(...args);\n\n            if (!multiple) {\n                onClose?.();\n            }\n\n            if (!multiple && closedByKeyboardRef.current) {\n                closedByKeyboardRef.current = false;\n                setForcedState('focus');\n                return;\n            }\n\n            if (multiple && searchValue) {\n                setForcedState('focusAndSelect');\n                return;\n            }\n            closedByKeyboardRef.current = false;\n            setForcedState(null);\n        },\n        [multiple, onChange, onClose, searchValue, setForcedState]\n    );\n    const needAddChangesButton = multiple && _applyChangesButton;\n    const applyChangesButton =\n        (needAddChangesButton &&\n            cloneElement(_applyChangesButton, {\n                key: 'applyChangesButton',\n                size: 'medium',\n                'data-qa': 'magritte-select-apply',\n                onClick: () => {\n                    setSelectedValues();\n                    onClose?.();\n                },\n            } as ComponentProps<typeof Button>)) ||\n        undefined;\n    const clearSelectedValuesAndClose = () => {\n        if (useInitialValuesOnClearAction) {\n            setInitialValues();\n        } else {\n            clearSelectedValues();\n        }\n        onClose?.();\n    };\n    const footer =\n        !loading &&\n        needAddChangesButton &&\n        renderButtonsContainer({\n            applyChangesButton,\n        });\n    return (\n        <Drop\n            {...props}\n            ref={optionsListRef}\n            autoFocusWhenOpened={false}\n            maxWidth={maxWidth}\n            visible={optionList.length > 0 && visible}\n            placement={['bottom-left', 'top-left']}\n            activatorRef={activatorRef}\n            role={searchable ? 'status' : 'listbox'}\n            space={plain ? 600 : 300}\n            keyboardNavigationMode=\"list\"\n            onClose={() => {\n                setForcedState('focus');\n                onClose?.();\n            }}\n            closeByClickOutside={false}\n            onKeyDownCapture={(event: KeyboardEvent) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    closedByKeyboardRef.current = true;\n                }\n            }}\n            widthEqualToActivator={widthEqualToActivator || loading}\n            forcePlacement\n            footer={footer}\n            onAfterExit={onDropClose}\n            onAppear={onDropOpen}\n        >\n            {loading && (\n                <div className={styles.loading}>\n                    <Loader size={24} />\n                </div>\n            )}\n            {!loading && (\n                <>\n                    {renderContentBefore && (\n                        <div data-qa=\"magritte-select-header\" className={styles.selectDropHeader}>\n                            {renderContentBefore({ clearSelectedValuesAndClose, searchValue, setSearchValue })}\n                        </div>\n                    )}\n                    <div\n                        className={classnames(styles.selectDrop, { [styles.selectDropPlain]: plain })}\n                        data-qa=\"magritte-select-option-list\"\n                        style={{ maxHeight: `${maxHeight}px` }}\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={!!plain}\n                                    isMobile={false}\n                                    multiple={multiple}\n                                    {...option}\n                                />\n                            );\n                        })}\n                    </div>\n                </>\n            )}\n        </Drop>\n    );\n};\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/SelectOption.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { SelectOptionProps } from '@hh.ru/magritte-ui-select/types';
-export declare const SelectOption: <T>({ checked, name, value, disabled, render, type, label, onChange, plain, isMobile, data, multiple, isXS, }: SelectOptionProps<T>) => ReactElement;
+export declare const SelectOption: <DataType>({ checked, name, value, disabled, render, type, label, onChange, plain, isMobile, data, multiple, isXS, }: SelectOptionProps<DataType>) => ReactElement;

package/SelectOption.js

@@ -9,7 +9,7 @@ import { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';
 import { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"select-option-label":"magritte-select-option-label___bYo2l_7-0-1","selectOptionLabel":"magritte-select-option-label___bYo2l_7-0-1","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_7-0-1","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_7-0-1","select-delimiter":"magritte-select-delimiter___WyeR6_7-0-1","selectDelimiter":"magritte-select-delimiter___WyeR6_7-0-1"};
+var styles = {"select-option-label":"magritte-select-option-label___bYo2l_7-1-1","selectOptionLabel":"magritte-select-option-label___bYo2l_7-1-1","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_7-1-1","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_7-1-1","select-delimiter":"magritte-select-delimiter___WyeR6_7-1-1","selectDelimiter":"magritte-select-delimiter___WyeR6_7-1-1"};
 
 const CheckableComponent = ({ type, value, checked, name, onChange }) => {
     if (type === 'label') {

package/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sources":["../src/SelectOption.tsx"],"sourcesContent":["import { useState, useRef, ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { Cell } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';\nimport { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SelectOptionProps, CheckableComponentProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './select-option.less';\n\nconst CheckableComponent = ({ type, value, checked, name, onChange }: CheckableComponentProps): ReactElement => {\n    if (type === 'label') {\n        return (\n            <span>\n                {checked && <CheckOutlinedSize24 />}\n                <input type=\"hidden\" name={name} value={value} />\n            </span>\n        );\n    }\n    if (type === 'radio') {\n        return (\n            <Radio\n                data-focus-visible-skip=\"true\"\n                tabIndex={-1}\n                name={name}\n                value={value}\n                checked={checked}\n                onChange={(event) => {\n                    onChange(value, event.target.checked);\n                }}\n            />\n        );\n    }\n    return (\n        <Checkbox\n            data-focus-visible-skip=\"true\"\n            tabIndex={-1}\n            name={name}\n            value={value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    );\n};\n\nCheckableComponent.displayName = 'SelectInputRender';\n\nexport const SelectOption = <T,>({\n    checked,\n    name,\n    value,\n    disabled,\n    render,\n    type,\n    label,\n    onChange,\n    plain,\n    isMobile = true,\n    data,\n    multiple,\n    isXS,\n}: SelectOptionProps<T>): ReactElement => {\n    const [focusVisible, setFocusVisible] = useState(false);\n    const focusedByMouseRef = useRef(false);\n    const input = CheckableComponent({ type, value, checked, name, onChange });\n    const renderProps = {\n        data,\n        checked,\n        multiple,\n        name,\n        value,\n        onChange,\n        input,\n        label,\n        type,\n        plain,\n        disabled,\n        render,\n        isXS,\n    };\n    if (type === 'delimiter') {\n        return (\n            <div className={classnames({ [styles.selectDelimiter]: !plain })}>\n                <Text typography=\"label-3-regular\">{render(renderProps)}</Text>\n            </div>\n        );\n    }\n    if (plain) {\n        return (\n            <div className={classnames(styles.selectOptionLabel, { [styles.selectOptionLabelDesktop]: !isMobile })}>\n                <Cell\n                    align=\"center\"\n                    data-qa={`magritte-select-option-${value}`}\n                    data-magritte-select-option={value}\n                    right={type === 'label' ? input : undefined}\n                    vertPadding={isMobile}\n                    disabled={disabled}\n                    onClick={() => {\n                        onChange(value, !checked);\n                    }}\n                >\n                    {render(renderProps)}\n                </Cell>\n            </div>\n        );\n    }\n    return (\n        <CheckableCardElement\n            Element=\"label\"\n            padding={16}\n            borderRadius={12}\n            flexible={false}\n            checked={checked}\n            data-magritte-select-option={value}\n            focusVisible={focusVisible}\n            data-qa={`magritte-select-option-${value}`}\n            disabled={disabled}\n            toneHover\n            onClick={() => {\n                if (!plain && type === 'label') {\n                    onChange(value, !checked);\n                }\n            }}\n            onMouseDown={() => {\n                focusedByMouseRef.current = true;\n            }}\n            onKeyDown={(event) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    onChange(value, !checked);\n                    event.preventDefault();\n                    setFocusVisible(true);\n                }\n            }}\n            onFocus={(event) => {\n                if (!event.target.dataset.focusVisibleSkip) {\n                    return;\n                }\n                if (focusedByMouseRef.current) {\n                    focusedByMouseRef.current = false;\n                    return;\n                }\n                setFocusVisible(true);\n            }}\n            onBlur={() => {\n                if (focusVisible) {\n                    setFocusVisible(false);\n                }\n            }}\n        >\n            {render(renderProps)}\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AAaA,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAA2B,KAAkB;IAC3G,IAAI,IAAI,KAAK,OAAO,EAAE;QAClB,QACIA,0BACK,OAAO,IAAIC,IAAC,mBAAmB,EAAA,EAAA,CAAG,EACnCA,GAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAA,CAAI,CAC9C,EAAA,CAAA,EACT;AACL,KAAA;IACD,IAAI,IAAI,KAAK,OAAO,EAAE;AAClB,QAAA,QACIA,GAAA,CAAC,KAAK,EAAA,EAAA,yBAAA,EACsB,MAAM,EAC9B,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAChB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;aACzC,EAAA,CACH,EACJ;AACL,KAAA;AACD,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,EAAA,yBAAA,EACmB,MAAM,EAC9B,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,KAAK,KAAI;YAChB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SACzC,EAAA,CACH,EACJ;AACN,CAAC,CAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAE9C,MAAM,YAAY,GAAG,CAAK,EAC7B,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,IAAI,EACf,IAAI,EACJ,QAAQ,EACR,IAAI,GACe,KAAkB;IACrC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACxD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACxC,IAAA,MAAM,KAAK,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC3E,IAAA,MAAM,WAAW,GAAG;QAChB,IAAI;QACJ,OAAO;QACP,QAAQ;QACR,IAAI;QACJ,KAAK;QACL,QAAQ;QACR,KAAK;QACL,KAAK;QACL,IAAI;QACJ,KAAK;QACL,QAAQ;QACR,MAAM;QACN,IAAI;KACP,CAAC;IACF,IAAI,IAAI,KAAK,WAAW,EAAE;AACtB,QAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,KAAK,EAAE,CAAC,EAAA,QAAA,EAC5DA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAA,QAAA,EAAE,MAAM,CAAC,WAAW,CAAC,EAAQ,CAAA,EAAA,CAC7D,EACR;AACL,KAAA;AACD,IAAA,IAAI,KAAK,EAAE;AACP,QAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,wBAAwB,GAAG,CAAC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAClGA,GAAC,CAAA,IAAI,EACD,EAAA,KAAK,EAAC,QAAQ,EACL,SAAA,EAAA,CAAA,uBAAA,EAA0B,KAAK,CAAA,CAAE,EACb,6BAAA,EAAA,KAAK,EAClC,KAAK,EAAE,IAAI,KAAK,OAAO,GAAG,KAAK,GAAG,SAAS,EAC3C,WAAW,EAAE,QAAQ,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAK;AACV,oBAAA,QAAQ,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;iBAC7B,EAAA,QAAA,EAEA,MAAM,CAAC,WAAW,CAAC,EACjB,CAAA,EAAA,CACL,EACR;AACL,KAAA;AACD,IAAA,QACIA,GAAC,CAAA,oBAAoB,IACjB,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,EAAE,EAChB,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,OAAO,EAAA,6BAAA,EACa,KAAK,EAClC,YAAY,EAAE,YAAY,EAAA,SAAA,EACjB,0BAA0B,KAAK,CAAA,CAAE,EAC1C,QAAQ,EAAE,QAAQ,EAClB,SAAS,QACT,OAAO,EAAE,MAAK;AACV,YAAA,IAAI,CAAC,KAAK,IAAI,IAAI,KAAK,OAAO,EAAE;AAC5B,gBAAA,QAAQ,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;AAC7B,aAAA;AACL,SAAC,EACD,WAAW,EAAE,MAAK;AACd,YAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI,CAAC;AACrC,SAAC,EACD,SAAS,EAAE,CAAC,KAAK,KAAI;AACjB,YAAA,IAAI,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE;AAC9E,gBAAA,QAAQ,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;gBAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,eAAe,CAAC,IAAI,CAAC,CAAC;AACzB,aAAA;AACL,SAAC,EACD,OAAO,EAAE,CAAC,KAAK,KAAI;YACf,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,EAAE;gBACxC,OAAO;AACV,aAAA;YACD,IAAI,iBAAiB,CAAC,OAAO,EAAE;AAC3B,gBAAA,iBAAiB,CAAC,OAAO,GAAG,KAAK,CAAC;gBAClC,OAAO;AACV,aAAA;YACD,eAAe,CAAC,IAAI,CAAC,CAAC;AAC1B,SAAC,EACD,MAAM,EAAE,MAAK;AACT,YAAA,IAAI,YAAY,EAAE;gBACd,eAAe,CAAC,KAAK,CAAC,CAAC;AAC1B,aAAA;AACL,SAAC,YAEA,MAAM,CAAC,WAAW,CAAC,EAAA,CACD,EACzB;AACN;;;;"}
+{"version":3,"file":"SelectOption.js","sources":["../src/SelectOption.tsx"],"sourcesContent":["import { useState, useRef, ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { Cell } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';\nimport { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SelectOptionProps, CheckableComponentProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './select-option.less';\n\nconst CheckableComponent = ({ type, value, checked, name, onChange }: CheckableComponentProps): ReactElement => {\n    if (type === 'label') {\n        return (\n            <span>\n                {checked && <CheckOutlinedSize24 />}\n                <input type=\"hidden\" name={name} value={value} />\n            </span>\n        );\n    }\n    if (type === 'radio') {\n        return (\n            <Radio\n                data-focus-visible-skip=\"true\"\n                tabIndex={-1}\n                name={name}\n                value={value}\n                checked={checked}\n                onChange={(event) => {\n                    onChange(value, event.target.checked);\n                }}\n            />\n        );\n    }\n    return (\n        <Checkbox\n            data-focus-visible-skip=\"true\"\n            tabIndex={-1}\n            name={name}\n            value={value}\n            checked={checked}\n            onChange={(event) => {\n                onChange(value, event.target.checked);\n            }}\n        />\n    );\n};\n\nCheckableComponent.displayName = 'SelectInputRender';\n\nexport const SelectOption = <DataType,>({\n    checked,\n    name,\n    value,\n    disabled,\n    render,\n    type,\n    label,\n    onChange,\n    plain,\n    isMobile = true,\n    data,\n    multiple,\n    isXS,\n}: SelectOptionProps<DataType>): ReactElement => {\n    const [focusVisible, setFocusVisible] = useState(false);\n    const focusedByMouseRef = useRef(false);\n    const input = CheckableComponent({ type, value, checked, name, onChange });\n    const renderProps = {\n        data,\n        checked,\n        multiple,\n        name,\n        value,\n        onChange,\n        input,\n        label,\n        type,\n        plain,\n        disabled,\n        render,\n        isXS,\n    };\n    if (type === 'delimiter') {\n        return (\n            <div className={classnames({ [styles.selectDelimiter]: !plain })}>\n                <Text typography=\"label-3-regular\">{render(renderProps)}</Text>\n            </div>\n        );\n    }\n    if (plain) {\n        return (\n            <div className={classnames(styles.selectOptionLabel, { [styles.selectOptionLabelDesktop]: !isMobile })}>\n                <Cell\n                    align=\"center\"\n                    data-qa={`magritte-select-option-${value}`}\n                    data-magritte-select-option={value}\n                    right={type === 'label' ? input : undefined}\n                    vertPadding={isMobile}\n                    disabled={disabled}\n                    onClick={() => {\n                        onChange(value, !checked);\n                    }}\n                >\n                    {render(renderProps)}\n                </Cell>\n            </div>\n        );\n    }\n    return (\n        <CheckableCardElement\n            Element=\"label\"\n            padding={16}\n            borderRadius={12}\n            flexible={false}\n            checked={checked}\n            data-magritte-select-option={value}\n            focusVisible={focusVisible}\n            data-qa={`magritte-select-option-${value}`}\n            disabled={disabled}\n            toneHover\n            onClick={() => {\n                if (!plain && type === 'label') {\n                    onChange(value, !checked);\n                }\n            }}\n            onMouseDown={() => {\n                focusedByMouseRef.current = true;\n            }}\n            onKeyDown={(event) => {\n                if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n                    onChange(value, !checked);\n                    event.preventDefault();\n                    setFocusVisible(true);\n                }\n            }}\n            onFocus={(event) => {\n                if (!event.target.dataset.focusVisibleSkip) {\n                    return;\n                }\n                if (focusedByMouseRef.current) {\n                    focusedByMouseRef.current = false;\n                    return;\n                }\n                setFocusVisible(true);\n            }}\n            onBlur={() => {\n                if (focusVisible) {\n                    setFocusVisible(false);\n                }\n            }}\n        >\n            {render(renderProps)}\n        </CheckableCardElement>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/UncontrolledSelect.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import type { UncontrolledSelectProps } from '@hh.ru/magritte-ui-select/types';
 declare const UncontrolledSelect: {
-    <MultipleType extends boolean, T>({ name, onChange, ...props }: UncontrolledSelectProps<MultipleType, T, [MultipleType] extends [true] ? string[] : string>): ReactElement;
+    <MultipleType extends boolean, DataType>({ name, onChange, ...props }: UncontrolledSelectProps<MultipleType, DataType, [MultipleType] extends [true] ? string[] : string>): ReactElement;
     displayName: string;
 };
 export { UncontrolledSelect };

package/UncontrolledSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"UncontrolledSelect.js","sources":["../src/UncontrolledSelect.tsx"],"sourcesContent":["import { type ReactElement, useState } from 'react';\n\nimport { Select } from '@hh.ru/magritte-ui-select';\nimport type { UncontrolledSelectProps } from '@hh.ru/magritte-ui-select/types';\n\nconst UncontrolledSelect = <MultipleType extends boolean, T>({\n    name,\n    onChange,\n    ...props\n}: UncontrolledSelectProps<MultipleType, T>): ReactElement => {\n    const { multiple, value } = props;\n    const initialValue: string[] | string = multiple ? value ?? [] : value ?? '';\n    const [controlledValue, setValue] = useState(initialValue);\n    return (\n        <>\n            <Select\n                {...props}\n                onChange={(values) => {\n                    setValue(values);\n                    onChange?.(values as string & string[]);\n                }}\n                value={controlledValue as string & string[]}\n                name={name}\n            />\n            {Array.isArray(controlledValue) ? (\n                controlledValue.map((value) => <input type=\"hidden\" name={name} value={value} key={value} />)\n            ) : (\n                <input type=\"hidden\" name={name} value={controlledValue} />\n            )}\n        </>\n    );\n};\n\nUncontrolledSelect.displayName = 'UncontrolledSelect';\n\nexport { UncontrolledSelect };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,kBAAkB,GAAG,CAAkC,EACzD,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EAC+B,KAAkB;AACzD,IAAA,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;AAClC,IAAA,MAAM,YAAY,GAAsB,QAAQ,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC;IAC7E,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAC3D,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,MAAM,EACC,EAAA,GAAA,KAAK,EACT,QAAQ,EAAE,CAAC,MAAM,KAAI;oBACjB,QAAQ,CAAC,MAAM,CAAC,CAAC;AACjB,oBAAA,QAAQ,GAAG,MAA2B,CAAC,CAAC;AAC5C,iBAAC,EACD,KAAK,EAAE,eAAoC,EAC3C,IAAI,EAAE,IAAI,EACZ,CAAA,EACD,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAC3B,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,KAAKA,GAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAO,EAAA,KAAK,CAAI,CAAC,KAE7FA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAA,CAAI,CAC9D,CAAA,EAAA,CACF,EACL;AACN,EAAE;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"UncontrolledSelect.js","sources":["../src/UncontrolledSelect.tsx"],"sourcesContent":["import { type ReactElement, useState } from 'react';\n\nimport { Select } from '@hh.ru/magritte-ui-select';\nimport type { UncontrolledSelectProps } from '@hh.ru/magritte-ui-select/types';\n\nconst UncontrolledSelect = <MultipleType extends boolean, DataType>({\n    name,\n    onChange,\n    ...props\n}: UncontrolledSelectProps<MultipleType, DataType>): ReactElement => {\n    const { multiple, value } = props;\n    const initialValue: string[] | string = multiple ? value ?? [] : value ?? '';\n    const [controlledValue, setValue] = useState(initialValue);\n    return (\n        <>\n            <Select\n                {...props}\n                onChange={(values) => {\n                    setValue(values);\n                    onChange?.(values as string & string[]);\n                }}\n                value={controlledValue as string & string[]}\n                name={name}\n            />\n            {Array.isArray(controlledValue) ? (\n                controlledValue.map((value) => <input type=\"hidden\" name={name} value={value} key={value} />)\n            ) : (\n                <input type=\"hidden\" name={name} value={controlledValue} />\n            )}\n        </>\n    );\n};\n\nUncontrolledSelect.displayName = 'UncontrolledSelect';\n\nexport { UncontrolledSelect };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,kBAAkB,GAAG,CAAyC,EAChE,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACsC,KAAkB;AAChE,IAAA,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;AAClC,IAAA,MAAM,YAAY,GAAsB,QAAQ,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC;IAC7E,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAC3D,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,MAAM,EACC,EAAA,GAAA,KAAK,EACT,QAAQ,EAAE,CAAC,MAAM,KAAI;oBACjB,QAAQ,CAAC,MAAM,CAAC,CAAC;AACjB,oBAAA,QAAQ,GAAG,MAA2B,CAAC,CAAC;AAC5C,iBAAC,EACD,KAAK,EAAE,eAAoC,EAC3C,IAAI,EAAE,IAAI,EACZ,CAAA,EACD,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAC3B,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,KAAKA,GAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAO,EAAA,KAAK,CAAI,CAAC,KAE7FA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAA,CAAI,CAC9D,CAAA,EAAA,CACF,EACL;AACN,EAAE;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/index.css

@@ -1,11 +1,11 @@
-.magritte-select-option-label___bYo2l_7-0-1{
+.magritte-select-option-label___bYo2l_7-1-1{
   display:flex;
   max-height:56px;
 }
-.magritte-select-option-label_desktop___bceen_7-0-1{
+.magritte-select-option-label_desktop___bceen_7-1-1{
   max-height:24px;
 }
-.magritte-select-delimiter___WyeR6_7-0-1{
+.magritte-select-delimiter___WyeR6_7-1-1{
   padding-left:16px;
   padding-top:12px;
 }
@@ -13,44 +13,44 @@
 :root{
   --magritte-static-space-400-v19-0-0:16px;
 }
-.magritte-select-bottom-sheet___1RZDJ_7-0-1{
+.magritte-select-bottom-sheet___1RZDJ_7-1-1{
   display:flex;
   flex-direction:column;
   padding:0 var(--magritte-static-space-400-v19-0-0);
   padding-bottom:16px;
 }
-.magritte-select-bottom-sheet_checkbox___hwTgo_7-0-1,
-.magritte-select-bottom-sheet_radio___qvFFV_7-0-1{
+.magritte-select-bottom-sheet_checkbox___hwTgo_7-1-1,
+.magritte-select-bottom-sheet_radio___qvFFV_7-1-1{
   gap:12px;
 }
-.magritte-loading___VpU1J_7-0-1{
+.magritte-loading___VpU1J_7-1-1{
   display:flex;
   align-items:center;
   height:100%;
   justify-content:center;
 }
-.magritte-error-wrapper___P7jYg_7-0-1{
+.magritte-error-wrapper___P7jYg_7-1-1{
   height:100%;
 }
 
-.magritte-select-drop___jn4O-_7-0-1{
+.magritte-select-drop___jn4O-_7-1-1{
   display:flex;
   flex-direction:column;
   gap:8px;
 }
-.magritte-select-drop-header___fMmio_7-0-1{
+.magritte-select-drop-header___fMmio_7-1-1{
   display:flex;
   flex-direction:column;
   margin-bottom:8px;
 }
-.magritte-select-drop_plain___VL8Fz_7-0-1{
+.magritte-select-drop_plain___VL8Fz_7-1-1{
   gap:16px;
 }
-.magritte-label-option-plain___BvBH8_7-0-1{
+.magritte-label-option-plain___BvBH8_7-1-1{
   display:flex;
   justify-content:center;
 }
-.magritte-loading___AMiuq_7-0-1{
+.magritte-loading___AMiuq_7-1-1{
   display:flex;
   align-items:center;
   height:150px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-select",
-  "version": "7.0.1",
+  "version": "7.1.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -28,24 +28,24 @@
   },
   "dependencies": {
     "@hh.ru/magritte-common-fuzzy-search": "1.0.5",
-    "@hh.ru/magritte-common-keyboard": "4.0.1",
+    "@hh.ru/magritte-common-keyboard": "4.0.2",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
     "@hh.ru/magritte-ui-action": "4.4.8",
     "@hh.ru/magritte-ui-action-bar": "2.1.20",
-    "@hh.ru/magritte-ui-bottom-sheet": "5.3.24",
+    "@hh.ru/magritte-ui-bottom-sheet": "5.3.25",
     "@hh.ru/magritte-ui-breakpoint": "4.0.3",
     "@hh.ru/magritte-ui-button": "5.1.17",
     "@hh.ru/magritte-ui-button-stack": "2.1.18",
     "@hh.ru/magritte-ui-cell": "4.0.14",
-    "@hh.ru/magritte-ui-checkable-card": "3.0.39",
+    "@hh.ru/magritte-ui-checkable-card": "3.0.40",
     "@hh.ru/magritte-ui-checkbox-radio": "3.0.20",
-    "@hh.ru/magritte-ui-drop": "7.1.2",
+    "@hh.ru/magritte-ui-drop": "7.1.3",
     "@hh.ru/magritte-ui-icon": "7.8.1",
     "@hh.ru/magritte-ui-input": "6.0.13",
     "@hh.ru/magritte-ui-loader": "1.3.3",
-    "@hh.ru/magritte-ui-navigation-bar": "6.0.10",
-    "@hh.ru/magritte-ui-trigger": "2.6.14",
+    "@hh.ru/magritte-ui-navigation-bar": "6.0.11",
+    "@hh.ru/magritte-ui-trigger": "2.6.16",
     "@hh.ru/magritte-ui-typography": "3.0.15"
   },
-  "gitHead": "f2db3c039a6a07c962b5e7cb670a597471217cd8"
+  "gitHead": "bf7f56dd64799c73041f10f1ddc88dd5658faa86"
 }

package/types.d.ts

@@ -3,39 +3,39 @@ import { BottomSheet, BottomSheetHeight } from '@hh.ru/magritte-ui-bottom-sheet'
 import { ButtonElement } from '@hh.ru/magritte-ui-button-stack';
 import { Drop } from '@hh.ru/magritte-ui-drop';
 import { TriggerProps, Trigger } from '@hh.ru/magritte-ui-trigger';
-type BottomSheetPropsHelper = Omit<ComponentProps<typeof BottomSheet>, 'children' | 'footer' | 'withContentPaddings' | 'withFooterPaddings' | 'header' | 'footer' | 'allowScrollWhileFocused' | 'keyboardOverlaysContent'>;
+type BottomSheetPropsHelper = Omit<ComponentProps<typeof BottomSheet>, 'children' | 'footer' | 'withContentPaddings' | 'withFooterPaddings' | 'header' | 'allowScrollWhileFocused' | 'keyboardOverlaysContent'>;
 type DropPropsHelper = Omit<ComponentProps<typeof Drop>, 'placement' | 'children' | 'autoFocusWhenOpened' | 'direction' | 'alignment' | 'role' | 'space' | 'onChange' | 'keyboardNavigationMode' | 'forcePosition' | 'closeByClickOutside' | 'onKeyDownCapture' | 'footer'>;
 export type TriggerPropsWithRef = ComponentProps<typeof Trigger>;
 export type TriggerExternalProps = Omit<TriggerProps, 'values' | 'expanded' | 'onToogle' | 'onClear' | 'onKeyDown' | 'onBlur' | 'onFocus'>;
 type SelectType = 'checkbox' | 'label' | 'radio';
 type OptionType = 'delimiter';
 type SelectOptionType = OptionType | SelectType;
-export interface RenderOptionTypeProps<T> extends SelectOptionProps<T> {
+export interface RenderOptionTypeProps<DataType> extends SelectOptionProps<DataType> {
     input: ReactElement;
 }
 export interface OnChangeAction {
     (value: string, needToPut: boolean): void;
 }
-export interface SelectOption<T = unknown> {
+export interface SelectOption<DataType = unknown> {
     label: ReactNode;
     value: string;
     disabled?: boolean;
-    data?: T;
+    data?: DataType;
     type?: OptionType;
 }
-export interface SelectOptionProps<T = unknown> extends Omit<SelectOption<T>, 'type'> {
+export interface SelectOptionProps<DataType = unknown> extends Omit<SelectOption<DataType>, 'type'> {
     checked: boolean;
     name: string;
     type: SelectOptionType;
-    render: RenderOptionType<T>;
+    render: RenderOptionType<DataType>;
     onChange: OnChangeAction;
     plain: boolean;
     isMobile?: boolean;
     multiple?: boolean;
     isXS?: boolean;
 }
-export interface RenderOptionType<T> {
-    (props: RenderOptionTypeProps<T>): ReactElement;
+export interface RenderOptionType<DataType> {
+    (props: RenderOptionTypeProps<DataType>): ReactElement;
 }
 export interface CheckableComponentProps {
     type: SelectOptionType;
@@ -61,7 +61,10 @@ export interface AlertOutWithoutSavingProps {
 export interface RenderAlertOnExitWithoutSaving {
     (props: AlertOutWithoutSavingProps): ReactElement;
 }
-export interface RenderHeaderProps {
+export interface SetSearchValue {
+    setSearchValue: Dispatch<SetStateAction<string>>;
+}
+export interface RenderHeaderProps extends SetSearchValue {
     onCloseBottomSheet: VoidFunction;
     setSearchValue: Dispatch<SetStateAction<string>>;
     searchValue: string;
@@ -83,8 +86,8 @@ export interface UseSelectState<MultipleType extends boolean, ValueType = [Multi
     setInitialValuesWithoutOnChange: VoidFunction;
     initialValuesOnOpening: RefObject<string[]>;
 }
-export interface UseSelectSearch<T> {
-    optionList: SelectOption<T>[];
+export interface UseSelectSearch<DataType> extends SetSearchValue {
+    optionList: SelectOption<DataType>[];
     searchValue: string;
     setSearchValue: Dispatch<SetStateAction<string>>;
 }
@@ -106,9 +109,9 @@ export interface SelectBaseProps<MultipleType extends boolean, ValueType = [Mult
     /** Флаг включения поиска */
     searchable?: boolean;
 }
-interface SelectPropsHelper<MultipleType extends boolean, T, ValueType = [MultipleType] extends [true] ? string[] : string> {
+interface SelectPropsHelper<MultipleType extends boolean, DataType, ValueType = [MultipleType] extends [true] ? string[] : string> {
     /** Массив options для Select */
-    options: SelectOption<T>[];
+    options: SelectOption<DataType>[];
     /** Максимальное количество выбранных опций */
     maxSelectedOptions?: number;
     /** Высота Bottom Sheet */
@@ -116,22 +119,22 @@ interface SelectPropsHelper<MultipleType extends boolean, T, ValueType = [Multip
     /** Свойства Trigger */
     triggerProps: TriggerExternalProps;
     /** Render функция для Trigger */
-    renderTrigger?: (props: TriggerPropsWithRef) => ReactElement;
+    renderTrigger?: (props: TriggerPropsWithRef & SetSearchValue) => ReactElement;
     /** onChange хендлер изменения селекта, для multiple возвращает массив выбранных значений */
     onChange: (value: ValueType) => void;
     /** Render функция для option для mobile view */
-    renderMobileItem?: RenderOptionType<T>;
+    renderMobileItem?: RenderOptionType<DataType>;
     /** Render функция для option для desktop view */
-    renderDesktopItem?: RenderOptionType<T>;
+    renderDesktopItem?: RenderOptionType<DataType>;
     /** Обработчик события получения фокуса */
     onFocus?: () => void;
     /** Обработчик события потери фокуса */
     onBlur?: () => void;
 }
-interface SelectInternalPropsHelper<T> {
+interface SelectInternalPropsHelper<DataType> {
     isLimitExceeded?: boolean;
     /** Render функция для option */
-    renderItem?: RenderOptionType<T>;
+    renderItem?: RenderOptionType<DataType>;
     optionsListRef: RefCallback<HTMLElement>;
 }
 type ErrorState = {
@@ -154,7 +157,7 @@ type ExternalSelectBottomSheetProps = {
     /** Заголовок Navigation Bar */
     headerTitle?: ReactNode;
 };
-export interface RenderContentBeforeProps {
+export interface RenderContentBeforeProps extends SetSearchValue {
     clearSelectedValuesAndClose: VoidFunction;
     setSearchValue: Dispatch<SetStateAction<string>>;
     searchValue: string;
@@ -186,12 +189,12 @@ interface InternalSelectDropProps {
 interface InternalSelectBottomSheetProps {
     initialValuesOnOpening: RefObject<string[]>;
 }
-type SelectSearchAndCommitStuff<T> = UseSelectSearch<T> & UseSelectStateHelper & SelectInternalPropsHelper<T>;
-export type SelectBottomSheetProps<MultipleType extends boolean, T> = SelectBaseProps<MultipleType> & SelectSearchAndCommitStuff<T> & BottomSheetPropsHelper & InternalSelectBottomSheetProps & ExternalSelectBottomSheetProps & SelectButtons;
-export type SelectDropProps<MultipleType extends boolean, T> = SelectBaseProps<MultipleType> & SelectSearchAndCommitStuff<T> & InternalSelectDropProps & ExternalSelectDropProps & DropPropsHelper & SelectButtons;
-export type SelectProps<MultipleType extends boolean, T = unknown> = SelectBaseProps<MultipleType> & SelectButtons & ExternalSelectDropProps & ExternalSelectBottomSheetProps & SelectPropsHelper<MultipleType, T>;
-export type UncontrolledSelectProps<MultipleType extends boolean, T = unknown, ValueType = [MultipleType] extends [true] ? string[] : string> = {
+type SelectSearchAndCommitStuff<DataType> = UseSelectSearch<DataType> & UseSelectStateHelper & SelectInternalPropsHelper<DataType>;
+export type SelectBottomSheetProps<MultipleType extends boolean, DataType> = SelectBaseProps<MultipleType> & SelectSearchAndCommitStuff<DataType> & BottomSheetPropsHelper & InternalSelectBottomSheetProps & ExternalSelectBottomSheetProps & SelectButtons;
+export type SelectDropProps<MultipleType extends boolean, DataType> = SelectBaseProps<MultipleType> & SelectSearchAndCommitStuff<DataType> & InternalSelectDropProps & ExternalSelectDropProps & DropPropsHelper & SelectButtons;
+export type SelectProps<MultipleType extends boolean, DataType = unknown> = SelectBaseProps<MultipleType> & SelectButtons & ExternalSelectDropProps & ExternalSelectBottomSheetProps & SelectPropsHelper<MultipleType, DataType>;
+export type UncontrolledSelectProps<MultipleType extends boolean, DataType = unknown, ValueType = [MultipleType] extends [true] ? string[] : string> = {
     value?: ValueType;
     onChange?: (value: ValueType) => void;
-} & Omit<SelectProps<MultipleType, T>, 'value' | 'onChange'>;
+} & Omit<SelectProps<MultipleType, DataType>, 'value' | 'onChange'>;
 export {};

package/useSelectSearch.d.ts

@@ -1,9 +1,9 @@
 import { RefObject } from 'react';
 import { SelectOption, UseSelectSearch } from '@hh.ru/magritte-ui-select/types';
-interface OptionListForSearch<T> {
+interface OptionListForSearch<DataType> {
     search: string;
-    option: SelectOption<T>;
+    option: SelectOption<DataType>;
 }
-export declare const getOptionListForSearch: <T>(optionsListRef: RefObject<HTMLElement>, options: SelectOption<T>[]) => OptionListForSearch<T>[];
-export declare const useSelectSearch: <T>(visible: boolean, options: SelectOption<T>[], optionsListRef: RefObject<HTMLElement>) => UseSelectSearch<T>;
+export declare const getOptionListForSearch: <DataType>(optionsListRef: RefObject<HTMLElement>, options: SelectOption<DataType>[]) => OptionListForSearch<DataType>[];
+export declare const useSelectSearch: <DataType>(visible: boolean, options: SelectOption<DataType>[], optionsListRef: RefObject<HTMLElement>) => UseSelectSearch<DataType>;
 export {};

package/useSelectSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectSearch.js","sources":["../src/useSelectSearch.ts"],"sourcesContent":["import { useEffect, useState, useRef, RefObject } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { SelectOption, UseSelectSearch } from '@hh.ru/magritte-ui-select/types';\n\ninterface OptionListForSearch<T> {\n    search: string;\n    option: SelectOption<T>;\n}\n\nexport const getOptionListForSearch = <T>(\n    optionsListRef: RefObject<HTMLElement>,\n    options: SelectOption<T>[]\n): OptionListForSearch<T>[] => {\n    if (!optionsListRef.current) {\n        return [];\n    }\n    const visibleOptions = optionsListRef.current.querySelectorAll<HTMLDivElement>('[data-magritte-select-option]');\n    const optionsWithoutDelimiters = options.filter(({ type }) => type !== 'delimiter');\n    return [...visibleOptions].map((optionElement, index) => {\n        return {\n            search: optionElement.innerText ?? optionElement.textContent,\n            option: optionsWithoutDelimiters[index],\n        };\n    });\n};\n\nexport const useSelectSearch = <T>(\n    visible: boolean,\n    options: SelectOption<T>[],\n    optionsListRef: RefObject<HTMLElement>\n): UseSelectSearch<T> => {\n    const optionListForSearch = useRef<OptionListForSearch<T>[] | null>([]);\n\n    const [searchValue, setSearchValue] = useState('');\n    const [optionList, setOptionList] = useState(options); // for render the found list\n\n    useEffect(() => {\n        setSearchValue('');\n        setOptionList(options);\n        optionListForSearch.current = null;\n    }, [options]);\n\n    useEffect(() => {\n        if (!visible) {\n            setSearchValue('');\n            return;\n        }\n        if (optionListForSearch.current) {\n            return;\n        }\n        optionListForSearch.current = getOptionListForSearch<T>(optionsListRef, options);\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [optionList, visible]);\n\n    useEffect(() => {\n        if (searchValue === '') {\n            setOptionList(options);\n        } else {\n            const optionsFound: SelectOption<T>[] = [];\n            optionListForSearch.current?.forEach(({ search, option }) => {\n                if (match(searchValue, search)) {\n                    optionsFound.push(option);\n                }\n            });\n            setOptionList(optionsFound);\n        }\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [searchValue]);\n\n    return { optionList, searchValue, setSearchValue };\n};\n"],"names":[],"mappings":";;;MAUa,sBAAsB,GAAG,CAClC,cAAsC,EACtC,OAA0B,KACA;AAC1B,IAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;AACzB,QAAA,OAAO,EAAE,CAAC;AACb,KAAA;IACD,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAiB,+BAA+B,CAAC,CAAC;AAChH,IAAA,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,KAAK,WAAW,CAAC,CAAC;AACpF,IAAA,OAAO,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,KAAK,KAAI;QACpD,OAAO;AACH,YAAA,MAAM,EAAE,aAAa,CAAC,SAAS,IAAI,aAAa,CAAC,WAAW;AAC5D,YAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;SAC1C,CAAC;AACN,KAAC,CAAC,CAAC;AACP,EAAE;AAEW,MAAA,eAAe,GAAG,CAC3B,OAAgB,EAChB,OAA0B,EAC1B,cAAsC,KAClB;AACpB,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAC;IAExE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACnD,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtD,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,aAAa,CAAC,OAAO,CAAC,CAAC;AACvB,QAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;AACvC,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,OAAO,EAAE;YACV,cAAc,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO;AACV,SAAA;QACD,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC7B,OAAO;AACV,SAAA;QACD,mBAAmB,CAAC,OAAO,GAAG,sBAAsB,CAAI,cAAc,EAAE,OAAO,CAAC,CAAC;;AAErF,KAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,KAAK,EAAE,EAAE;YACpB,aAAa,CAAC,OAAO,CAAC,CAAC;AAC1B,SAAA;AAAM,aAAA;YACH,MAAM,YAAY,GAAsB,EAAE,CAAC;AAC3C,YAAA,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAI;AACxD,gBAAA,IAAI,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE;AAC5B,oBAAA,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC7B,iBAAA;AACL,aAAC,CAAC,CAAC;YACH,aAAa,CAAC,YAAY,CAAC,CAAC;AAC/B,SAAA;;AAEL,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAElB,IAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvD;;;;"}
+{"version":3,"file":"useSelectSearch.js","sources":["../src/useSelectSearch.ts"],"sourcesContent":["import { useEffect, useState, useRef, RefObject } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { SelectOption, UseSelectSearch } from '@hh.ru/magritte-ui-select/types';\n\ninterface OptionListForSearch<DataType> {\n    search: string;\n    option: SelectOption<DataType>;\n}\n\nexport const getOptionListForSearch = <DataType>(\n    optionsListRef: RefObject<HTMLElement>,\n    options: SelectOption<DataType>[]\n): OptionListForSearch<DataType>[] => {\n    if (!optionsListRef.current) {\n        return [];\n    }\n    const visibleOptions = optionsListRef.current.querySelectorAll<HTMLDivElement>('[data-magritte-select-option]');\n    const optionsWithoutDelimiters = options.filter(({ type }) => type !== 'delimiter');\n    return [...visibleOptions].map((optionElement, index) => {\n        return {\n            search: optionElement.innerText ?? optionElement.textContent,\n            option: optionsWithoutDelimiters[index],\n        };\n    });\n};\n\nexport const useSelectSearch = <DataType>(\n    visible: boolean,\n    options: SelectOption<DataType>[],\n    optionsListRef: RefObject<HTMLElement>\n): UseSelectSearch<DataType> => {\n    const optionListForSearch = useRef<OptionListForSearch<DataType>[] | null>([]);\n\n    const [searchValue, setSearchValue] = useState('');\n    const [optionList, setOptionList] = useState(options); // for render the found list\n\n    useEffect(() => {\n        setSearchValue('');\n        setOptionList(options);\n        optionListForSearch.current = null;\n    }, [options]);\n\n    useEffect(() => {\n        if (!visible) {\n            setSearchValue('');\n            return;\n        }\n        if (optionListForSearch.current) {\n            return;\n        }\n        optionListForSearch.current = getOptionListForSearch<DataType>(optionsListRef, options);\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [optionList, visible]);\n\n    useEffect(() => {\n        if (searchValue === '') {\n            setOptionList(options);\n        } else {\n            const optionsFound: SelectOption<DataType>[] = [];\n            optionListForSearch.current?.forEach(({ search, option }) => {\n                if (match(searchValue, search)) {\n                    optionsFound.push(option);\n                }\n            });\n            setOptionList(optionsFound);\n        }\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [searchValue]);\n\n    return { optionList, searchValue, setSearchValue };\n};\n"],"names":[],"mappings":";;;MAUa,sBAAsB,GAAG,CAClC,cAAsC,EACtC,OAAiC,KACA;AACjC,IAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;AACzB,QAAA,OAAO,EAAE,CAAC;AACb,KAAA;IACD,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAiB,+BAA+B,CAAC,CAAC;AAChH,IAAA,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,KAAK,WAAW,CAAC,CAAC;AACpF,IAAA,OAAO,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,KAAK,KAAI;QACpD,OAAO;AACH,YAAA,MAAM,EAAE,aAAa,CAAC,SAAS,IAAI,aAAa,CAAC,WAAW;AAC5D,YAAA,MAAM,EAAE,wBAAwB,CAAC,KAAK,CAAC;SAC1C,CAAC;AACN,KAAC,CAAC,CAAC;AACP,EAAE;AAEW,MAAA,eAAe,GAAG,CAC3B,OAAgB,EAChB,OAAiC,EACjC,cAAsC,KACX;AAC3B,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAyC,EAAE,CAAC,CAAC;IAE/E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACnD,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtD,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,EAAE,CAAC,CAAC;QACnB,aAAa,CAAC,OAAO,CAAC,CAAC;AACvB,QAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;AACvC,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,OAAO,EAAE;YACV,cAAc,CAAC,EAAE,CAAC,CAAC;YACnB,OAAO;AACV,SAAA;QACD,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC7B,OAAO;AACV,SAAA;QACD,mBAAmB,CAAC,OAAO,GAAG,sBAAsB,CAAW,cAAc,EAAE,OAAO,CAAC,CAAC;;AAE5F,KAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,KAAK,EAAE,EAAE;YACpB,aAAa,CAAC,OAAO,CAAC,CAAC;AAC1B,SAAA;AAAM,aAAA;YACH,MAAM,YAAY,GAA6B,EAAE,CAAC;AAClD,YAAA,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAI;AACxD,gBAAA,IAAI,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE;AAC5B,oBAAA,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC7B,iBAAA;AACL,aAAC,CAAC,CAAC;YACH,aAAa,CAAC,YAAY,CAAC,CAAC;AAC/B,SAAA;;AAEL,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAElB,IAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvD;;;;"}

package/useSelectState.d.ts

@@ -1,2 +1,2 @@
 import { UseSelectState, SelectOption } from '@hh.ru/magritte-ui-select/types';
-export declare const useSelectState: <T, MultipleType extends boolean, ValueType = [MultipleType] extends [true] ? string[] : string>(multiple: boolean, value: string[] | string, options: SelectOption<T>[], showOptions: boolean, hasChangesButton?: boolean, onChangeExternalHandler?: ((value: ValueType) => void) | undefined) => UseSelectState<MultipleType, ValueType>;
+export declare const useSelectState: <DataType, MultipleType extends boolean, ValueType = [MultipleType] extends [true] ? string[] : string>(multiple: boolean, value: string[] | string, options: SelectOption<DataType>[], showOptions: boolean, hasChangesButton?: boolean, onChangeExternalHandler?: ((value: ValueType) => void) | undefined) => UseSelectState<MultipleType, ValueType>;

package/useSelectState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectState.js","sources":["../src/useSelectState.ts"],"sourcesContent":["import { useCallback, useReducer, useState, ReactNode, useEffect, useRef } from 'react';\n\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport { UseSelectState, SelectOption } from '@hh.ru/magritte-ui-select/types';\n\nconst ADD = 'ADD';\nconst SET = 'SET';\nconst REMOVE = 'REMOVE';\nconst SINGLE_CHOICE = 'SINGLE_CHOICE';\nconst CLEAR = 'CLEAR';\n\nconst reducer = (\n    state: string[],\n    {\n        type,\n        payload,\n    }:\n        | { type: typeof ADD | typeof REMOVE | typeof SINGLE_CHOICE; payload: string[] }\n        | { type: typeof CLEAR; payload?: string }\n        | { type: typeof SET; payload: string[] }\n) => {\n    switch (type) {\n        case ADD:\n            return payload;\n        case SET:\n            return [...payload];\n        case REMOVE:\n            return payload;\n        case CLEAR:\n            return [];\n        case SINGLE_CHOICE:\n            return payload;\n        default:\n            return state;\n    }\n};\n\nconst getLabels = <T>(options: SelectOption<T>[], values: string[]): ReactNode[] => {\n    return options.filter(({ value }) => values.includes(value)).map(({ label }) => label);\n};\n\nexport const useSelectState = <\n    T,\n    MultipleType extends boolean,\n    ValueType = [MultipleType] extends [true] ? string[] : string\n>(\n    multiple: boolean,\n    value: string[] | string,\n    options: SelectOption<T>[],\n    showOptions: boolean,\n    hasChangesButton?: boolean,\n    onChangeExternalHandler?: (value: ValueType) => void\n): UseSelectState<MultipleType, ValueType> => {\n    const valuesArr = Array.isArray(value) ? value : [value];\n    const prevValues = useRef(valuesArr);\n    const initialValuesOnMount = useRef(valuesArr);\n    const initialValuesOnOpening = useRef<string[]>([]);\n    const [selectedLabels, setSelectedLabels] = useState<ReactNode[]>(() => {\n        return getLabels(options, valuesArr);\n    });\n    const [state, dispatch] = useReducer(reducer, valuesArr);\n    const stateRef = useRef(state);\n    stateRef.current = state;\n\n    const updateSelectedValuesAndLabels = useCallback(\n        (values: string[], needEmitChangeEvent = true) => {\n            if (needEmitChangeEvent) {\n                const hasUnsavedChanges = !isArraysEquals<string>(prevValues.current, values);\n                if (hasUnsavedChanges) {\n                    onChangeExternalHandler?.((multiple ? values : values[0]) as ValueType);\n                    prevValues.current = values;\n                }\n            }\n            setSelectedLabels(getLabels(options, values));\n        },\n        [multiple, onChangeExternalHandler, options]\n    );\n\n    useEffect(() => {\n        if (showOptions) {\n            initialValuesOnOpening.current = state;\n        }\n        // сохраняем values при открытии select\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [showOptions]);\n\n    useEffect(() => {\n        const newValues = Array.isArray(value) ? value : [value];\n        if (isArraysEquals(newValues, stateRef.current)) {\n            return;\n        }\n        // если values и редьюсер разошлись\n        dispatch({ type: SET, payload: newValues });\n        updateSelectedValuesAndLabels(newValues);\n    }, [updateSelectedValuesAndLabels, value]);\n\n    return {\n        values: (multiple ? state : state[0]) as ValueType,\n        clearSelectedValues: () => {\n            dispatch({ type: CLEAR });\n            updateSelectedValuesAndLabels([]);\n        },\n        setInitialValues: () => {\n            dispatch({ type: SET, payload: initialValuesOnMount.current });\n            updateSelectedValuesAndLabels(initialValuesOnMount.current);\n        },\n        setInitialValuesWithoutOnChange: () => {\n            // в остальных кейсах селект обновляется сразу\n            // либо выбранные значения сразу применяются\n            if (!hasChangesButton) {\n                return;\n            }\n            const hasInitialValuesAndPrevEmittedValusAreEqual = isArraysEquals<string>(\n                initialValuesOnOpening.current,\n                prevValues.current\n            );\n            // если values после открытия не поменялись\n            // то надо скоректировать состояния в drop/bottom-sheet\n            // иначе в drop/bottom-sheet будут те же элементы что и при предыдущем открытии\n            // даже если не нажимали кнопку применить\n            if (hasInitialValuesAndPrevEmittedValusAreEqual) {\n                dispatch({ type: SET, payload: initialValuesOnOpening.current });\n                updateSelectedValuesAndLabels(initialValuesOnOpening.current, false);\n            }\n        },\n        onChange: useCallback(\n            (value, needToPut) => {\n                const multipleActionType = needToPut ? ADD : REMOVE;\n                const actionType = multiple ? multipleActionType : SINGLE_CHOICE;\n                // single\n                let newValue = [value];\n                // multiple\n                if (actionType === ADD) {\n                    newValue = [...state, value];\n                }\n                if (actionType === REMOVE) {\n                    newValue = state.filter((item) => item !== value);\n                }\n                dispatch({ type: actionType, payload: newValue });\n                if (!hasChangesButton) {\n                    updateSelectedValuesAndLabels(newValue);\n                }\n            },\n            [hasChangesButton, multiple, state, updateSelectedValuesAndLabels]\n        ),\n        selectedLabels,\n        setSelectedValues: () => {\n            updateSelectedValuesAndLabels(state);\n        },\n        initialValuesOnOpening,\n    };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSelectState.js","sources":["../src/useSelectState.ts"],"sourcesContent":["import { useCallback, useReducer, useState, ReactNode, useEffect, useRef } from 'react';\n\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport { UseSelectState, SelectOption } from '@hh.ru/magritte-ui-select/types';\n\nconst ADD = 'ADD';\nconst SET = 'SET';\nconst REMOVE = 'REMOVE';\nconst SINGLE_CHOICE = 'SINGLE_CHOICE';\nconst CLEAR = 'CLEAR';\n\nconst reducer = (\n    state: string[],\n    {\n        type,\n        payload,\n    }:\n        | { type: typeof ADD | typeof REMOVE | typeof SINGLE_CHOICE; payload: string[] }\n        | { type: typeof CLEAR; payload?: string }\n        | { type: typeof SET; payload: string[] }\n) => {\n    switch (type) {\n        case ADD:\n            return payload;\n        case SET:\n            return [...payload];\n        case REMOVE:\n            return payload;\n        case CLEAR:\n            return [];\n        case SINGLE_CHOICE:\n            return payload;\n        default:\n            return state;\n    }\n};\n\nconst getLabels = <T>(options: SelectOption<T>[], values: string[]): ReactNode[] => {\n    return options.filter(({ value }) => values.includes(value)).map(({ label }) => label);\n};\n\nexport const useSelectState = <\n    DataType,\n    MultipleType extends boolean,\n    ValueType = [MultipleType] extends [true] ? string[] : string\n>(\n    multiple: boolean,\n    value: string[] | string,\n    options: SelectOption<DataType>[],\n    showOptions: boolean,\n    hasChangesButton?: boolean,\n    onChangeExternalHandler?: (value: ValueType) => void\n): UseSelectState<MultipleType, ValueType> => {\n    const valuesArr = Array.isArray(value) ? value : [value];\n    const prevValues = useRef(valuesArr);\n    const initialValuesOnMount = useRef(valuesArr);\n    const initialValuesOnOpening = useRef<string[]>([]);\n    const [selectedLabels, setSelectedLabels] = useState<ReactNode[]>(() => {\n        return getLabels(options, valuesArr);\n    });\n    const [state, dispatch] = useReducer(reducer, valuesArr);\n    const stateRef = useRef(state);\n    stateRef.current = state;\n\n    const updateSelectedValuesAndLabels = useCallback(\n        (values: string[], needEmitChangeEvent = true) => {\n            if (needEmitChangeEvent) {\n                const hasUnsavedChanges = !isArraysEquals<string>(prevValues.current, values);\n                if (hasUnsavedChanges) {\n                    onChangeExternalHandler?.((multiple ? values : values[0]) as ValueType);\n                    prevValues.current = values;\n                }\n            }\n            setSelectedLabels(getLabels(options, values));\n        },\n        [multiple, onChangeExternalHandler, options]\n    );\n\n    useEffect(() => {\n        if (showOptions) {\n            initialValuesOnOpening.current = state;\n        }\n        // сохраняем values при открытии select\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [showOptions]);\n\n    useEffect(() => {\n        const newValues = Array.isArray(value) ? value : [value];\n        if (isArraysEquals(newValues, stateRef.current)) {\n            return;\n        }\n        // если values и редьюсер разошлись\n        dispatch({ type: SET, payload: newValues });\n        updateSelectedValuesAndLabels(newValues);\n    }, [updateSelectedValuesAndLabels, value]);\n\n    return {\n        values: (multiple ? state : state[0]) as ValueType,\n        clearSelectedValues: () => {\n            dispatch({ type: CLEAR });\n            updateSelectedValuesAndLabels([]);\n        },\n        setInitialValues: () => {\n            dispatch({ type: SET, payload: initialValuesOnMount.current });\n            updateSelectedValuesAndLabels(initialValuesOnMount.current);\n        },\n        setInitialValuesWithoutOnChange: () => {\n            // в остальных кейсах селект обновляется сразу\n            // либо выбранные значения сразу применяются\n            if (!hasChangesButton) {\n                return;\n            }\n            const hasInitialValuesAndPrevEmittedValusAreEqual = isArraysEquals<string>(\n                initialValuesOnOpening.current,\n                prevValues.current\n            );\n            // если values после открытия не поменялись\n            // то надо скоректировать состояния в drop/bottom-sheet\n            // иначе в drop/bottom-sheet будут те же элементы что и при предыдущем открытии\n            // даже если не нажимали кнопку применить\n            if (hasInitialValuesAndPrevEmittedValusAreEqual) {\n                dispatch({ type: SET, payload: initialValuesOnOpening.current });\n                updateSelectedValuesAndLabels(initialValuesOnOpening.current, false);\n            }\n        },\n        onChange: useCallback(\n            (value, needToPut) => {\n                const multipleActionType = needToPut ? ADD : REMOVE;\n                const actionType = multiple ? multipleActionType : SINGLE_CHOICE;\n                // single\n                let newValue = [value];\n                // multiple\n                if (actionType === ADD) {\n                    newValue = [...state, value];\n                }\n                if (actionType === REMOVE) {\n                    newValue = state.filter((item) => item !== value);\n                }\n                dispatch({ type: actionType, payload: newValue });\n                if (!hasChangesButton) {\n                    updateSelectedValuesAndLabels(newValue);\n                }\n            },\n            [hasChangesButton, multiple, state, updateSelectedValuesAndLabels]\n        ),\n        selectedLabels,\n        setSelectedValues: () => {\n            updateSelectedValuesAndLabels(state);\n        },\n        initialValuesOnOpening,\n    };\n};\n"],"names":[],"mappings":"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"}