@hh.ru/magritte-ui-select 8.2.0 → 8.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Select.js.map CHANGED
@@ -1 +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, 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 forceDropVisibleWithEmptyOptions,\n plain = false,\n widthEqualToActivator = true,\n renderContentBefore,\n onBlur,\n onFocus,\n onDropOpen,\n onDropClose,\n onBottomSheetClose,\n onBottomSheetOpen,\n onSearchSubmit,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n const { isMobile } = useBreakpoint();\n const inputRef = useRef<HTMLInputElement>(null);\n const [useSearchInput, setUseSearchInput] = useState<boolean>(false);\n const [forcedState, setForcedState] = useState<FocusStateType>(null);\n const dropRef = useRef<HTMLDivElement>(null);\n const useDefaultTrigger = renderTrigger === SelectTriggerDefault;\n\n const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n useSelectOptionsList(isMobile);\n const prevVisibleRef = useRef<boolean>(showOptions);\n const { optionList, searchValue, setSearchValue } = useSelectSearch<DataType>(showOptions, options, optionsListRef);\n const hasChangesButton = multiple && Boolean(applyChangesButton);\n const {\n values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n selectedLabels,\n setSelectedValues,\n setInitialValuesWithoutOnChange,\n initialValuesOnOpening,\n } = useSelectState<DataType, MultipleType>(\n !!multiple,\n _value || [],\n options,\n showOptions,\n hasChangesButton,\n onChangeHandler\n );\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') && useDefaultTrigger) {\n setUseSearchInput(true);\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n useLayoutEffect(() => {\n if (!useSearchInput || !inputRef.current) {\n return;\n }\n if (forcedState === 'focus') {\n inputRef.current.focus();\n }\n if (forcedState === 'focusAndSelect') {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n }\n if (!forcedState && !showOptions) {\n setUseSearchInput(false);\n if (prevVisibleRef.current) {\n onBlur?.();\n }\n }\n prevVisibleRef.current = showOptions;\n }, [forcedState, onBlur, setForcedState, useSearchInput, showOptions, setInitialValuesWithoutOnChange]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n showedByFocus.current = false;\n setForcedState('focus');\n toggleListVisibility();\n return;\n }\n\n // движение по списку опций\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n focusOptionsList(event, dropRef?.current, 'up');\n return;\n }\n\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n focusOptionsList(event, dropRef?.current, 'down');\n return;\n }\n\n // после закрытия пользователь решил что-то поделать опять\n if (\n !showOptions &&\n !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n ) {\n toggleListVisibility();\n }\n },\n [showOptions, toggleListVisibility]\n );\n\n return (\n <>\n {!useSearchInput &&\n renderTrigger({\n values: selectedLabels,\n expanded: showOptions,\n toggleExpanded: toggleListVisibility,\n onChange: () => {\n if (disabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRef,\n onKeyDown: handleKeyDown,\n onBlur: () => {\n setForcedState(null);\n if (showOptions && optionList.length === 0) {\n toggleListVisibility();\n }\n },\n onFocus: () => {\n if (disabled) {\n return;\n }\n if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n onFocus?.();\n setForcedState('focus');\n toggleListVisibility();\n }\n showedByFocus.current = true;\n },\n 'data-qa': dataQa,\n setSearchValue,\n ...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 onSearchSubmit={onSearchSubmit}\n />\n )}\n {!isMobile && (\n <SelectDrop\n activatorRef={activatorRef}\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\n maxWidth={maxWidth}\n type={type}\n loading={loading}\n useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n onClose={onOptionsListClose}\n renderItem={renderDesktopItem}\n renderButtonsContainer={renderButtonsContainer}\n plain={plain}\n optionList={optionList}\n optionsListRef={optionsListRefCallback}\n value={values}\n onChange={onChange}\n searchValue={searchValue}\n searchable={searchable}\n forceDropVisibleWithEmptyOptions={forceDropVisibleWithEmptyOptions}\n setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n visible={!error && showOptions}\n widthEqualToActivator={widthEqualToActivator}\n renderContentBefore={renderContentBefore}\n setForcedState={setForcedState}\n setSelectedValues={setSelectedValues}\n maxHeight={maxHeight}\n onDropOpen={onDropOpen}\n onDropClose={onDropClose}\n />\n )}\n </>\n );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
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, 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 forceDropVisibleWithEmptyOptions,\n plain = false,\n widthEqualToActivator = true,\n renderContentBefore,\n onBlur,\n onFocus,\n onDropOpen,\n onDropClose,\n onBottomSheetClose,\n onBottomSheetOpen,\n onSearchSubmit,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n const { isMobile } = useBreakpoint();\n const inputRef = useRef<HTMLInputElement>(null);\n const [useSearchInput, setUseSearchInput] = useState<boolean>(false);\n const [forcedState, setForcedState] = useState<FocusStateType>(null);\n const dropRef = useRef<HTMLDivElement>(null);\n const useDefaultTrigger = renderTrigger === SelectTriggerDefault;\n\n const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n useSelectOptionsList(isMobile);\n const prevVisibleRef = useRef<boolean>(showOptions);\n const { optionList, searchValue, setSearchValue } = useSelectSearch<DataType>(showOptions, options, optionsListRef);\n const hasChangesButton = multiple && Boolean(applyChangesButton);\n const {\n values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n selectedLabels,\n setSelectedValues,\n setInitialValuesWithoutOnChange,\n initialValuesOnOpening,\n } = useSelectState<DataType, MultipleType>(\n !!multiple,\n _value || [],\n options,\n showOptions,\n hasChangesButton,\n onChangeHandler\n );\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') && useDefaultTrigger) {\n setUseSearchInput(true);\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n useLayoutEffect(() => {\n if (!useSearchInput || !inputRef.current) {\n return;\n }\n if (forcedState === 'focus') {\n inputRef.current.focus();\n }\n if (forcedState === 'focusAndSelect') {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n }\n if (!forcedState && !showOptions) {\n setUseSearchInput(false);\n if (prevVisibleRef.current) {\n onBlur?.();\n }\n }\n prevVisibleRef.current = showOptions;\n }, [forcedState, onBlur, setForcedState, useSearchInput, showOptions, setInitialValuesWithoutOnChange]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n showedByFocus.current = false;\n setForcedState('focus');\n toggleListVisibility();\n return;\n }\n\n // движение по списку опций\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n focusOptionsList(event, dropRef?.current, 'up');\n return;\n }\n\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n focusOptionsList(event, dropRef?.current, 'down');\n return;\n }\n\n // после закрытия пользователь решил что-то поделать опять\n if (\n !showOptions &&\n !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n ) {\n toggleListVisibility();\n }\n },\n [showOptions, toggleListVisibility]\n );\n\n return (\n <>\n {!useSearchInput &&\n renderTrigger({\n values: selectedLabels,\n expanded: showOptions,\n toggleExpanded: toggleListVisibility,\n onChange: () => {\n if (disabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRef,\n onKeyDown: handleKeyDown,\n onBlur: () => {\n setForcedState(null);\n if (showOptions && optionList.length === 0) {\n toggleListVisibility();\n }\n },\n onFocus: () => {\n if (disabled) {\n return;\n }\n if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n onFocus?.();\n setForcedState('focus');\n toggleListVisibility();\n }\n showedByFocus.current = true;\n },\n 'data-qa': dataQa,\n setSearchValue,\n ...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 onSearchSubmit={onSearchSubmit}\n />\n )}\n {!isMobile && (\n <SelectDrop\n activatorRef={activatorRef}\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\n maxWidth={maxWidth}\n type={type}\n loading={loading}\n useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n onClose={onOptionsListClose}\n renderItem={renderDesktopItem}\n renderButtonsContainer={renderButtonsContainer}\n plain={plain}\n optionList={optionList}\n optionsListRef={optionsListRefCallback}\n value={values}\n onChange={onChange}\n searchValue={searchValue}\n searchable={searchable}\n forceDropVisibleWithEmptyOptions={forceDropVisibleWithEmptyOptions}\n setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n visible={!error && showOptions}\n widthEqualToActivator={widthEqualToActivator}\n renderContentBefore={renderContentBefore}\n setForcedState={setForcedState}\n setSelectedValues={setSelectedValues}\n maxHeight={maxHeight}\n onDropOpen={onDropOpen}\n onDropClose={onDropClose}\n />\n )}\n </>\n );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
@@ -18,7 +18,7 @@ import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
18
18
  import '@hh.ru/magritte-ui-checkbox-radio';
19
19
  import '@hh.ru/magritte-ui-typography';
20
20
 
21
- var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_8-2-0","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_8-2-0","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-2-0","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-2-0","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_8-2-0","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_8-2-0","loading":"magritte-loading___VpU1J_8-2-0","error-wrapper":"magritte-error-wrapper___P7jYg_8-2-0","errorWrapper":"magritte-error-wrapper___P7jYg_8-2-0"};
21
+ var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_8-2-2","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_8-2-2","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-2-2","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-2-2","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_8-2-2","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_8-2-2","loading":"magritte-loading___VpU1J_8-2-2","error-wrapper":"magritte-error-wrapper___P7jYg_8-2-2","errorWrapper":"magritte-error-wrapper___P7jYg_8-2-2"};
22
22
 
23
23
  const SelectOptionDefault = ({ label, input, type }) => {
24
24
  if (type === 'delimiter') {
@@ -1 +1 @@
1
- {"version":3,"file":"SelectBottomSheet.js","sources":["../src/SelectBottomSheet.tsx"],"sourcesContent":["import { useCallback, ReactElement, ReactNode, cloneElement, useState, ComponentProps } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { ButtonElement } from '@hh.ru/magritte-ui-button-stack';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n OnChangeAction,\n SelectButtons,\n SelectBottomSheetProps,\n RenderOptionTypeProps,\n RenderHeaderProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType,>({ label, input, type }: RenderOptionTypeProps<DataType>): ReactElement => {\n if (type === 'delimiter') {\n return (\n <CellText maxLines={1} style=\"secondary\">\n {label}\n </CellText>\n );\n }\n if (type === 'label') {\n return <CellText maxLines={1}>{label}</CellText>;\n }\n return (\n <Cell Element=\"div\" align=\"center\" right={input}>\n <CellText maxLines={1}>{label}</CellText>\n </Cell>\n );\n};\n\nconst RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }: SelectButtons): ReactNode => {\n const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n return <ActionBar type=\"mobile\" primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nconst RenderHeaderDefault = ({\n onCloseBottomSheet,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n right={\n <Action\n icon={CrossOutlinedSize24}\n onClick={onCloseBottomSheet}\n data-qa=\"select-bottom-sheet-navigation-close\"\n />\n }\n options={\n searchable && (\n <SearchInput\n clearable\n size=\"medium\"\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={(event) => {\n if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n onSearchSubmit(event);\n onCloseBottomSheet();\n }\n }}\n data-qa=\"bottom-sheet-navigation-input\"\n autoComplete=\"off\"\n />\n )\n }\n />\n );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType>({\n type,\n name,\n multiple,\n clearButton: _clearButton,\n applyChangesButton: _applyChangesButton,\n useInitialValuesOnClearAction,\n loading,\n error,\n renderHeader = RenderHeaderDefault,\n renderItem = SelectOptionDefault,\n renderButtonsContainer = RenderButtonsContainerDefault,\n renderAlertOnExitWithoutSaving,\n headerTitle,\n onClose,\n visible,\n optionList,\n optionsListRef,\n searchValue,\n setSearchValue,\n searchable,\n value: values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n isLimitExceeded,\n initialValuesOnOpening,\n setSelectedValues,\n onBottomSheetOpen,\n onBottomSheetClose,\n onSearchSubmit,\n ...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 onSearchSubmit,\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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"}
1
+ {"version":3,"file":"SelectBottomSheet.js","sources":["../src/SelectBottomSheet.tsx"],"sourcesContent":["import { useCallback, ReactElement, ReactNode, cloneElement, useState, ComponentProps } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { ButtonElement } from '@hh.ru/magritte-ui-button-stack';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n OnChangeAction,\n SelectButtons,\n SelectBottomSheetProps,\n RenderOptionTypeProps,\n RenderHeaderProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType,>({ label, input, type }: RenderOptionTypeProps<DataType>): ReactElement => {\n if (type === 'delimiter') {\n return (\n <CellText maxLines={1} style=\"secondary\">\n {label}\n </CellText>\n );\n }\n if (type === 'label') {\n return <CellText maxLines={1}>{label}</CellText>;\n }\n return (\n <Cell Element=\"div\" align=\"center\" right={input}>\n <CellText maxLines={1}>{label}</CellText>\n </Cell>\n );\n};\n\nconst RenderButtonsContainerDefault = ({ clearButton, applyChangesButton }: SelectButtons): ReactNode => {\n const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n return <ActionBar type=\"mobile\" primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nconst RenderHeaderDefault = ({\n onCloseBottomSheet,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n right={\n <Action\n icon={CrossOutlinedSize24}\n onClick={onCloseBottomSheet}\n data-qa=\"select-bottom-sheet-navigation-close\"\n />\n }\n options={\n searchable && (\n <SearchInput\n clearable\n size=\"medium\"\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={(event) => {\n if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n onSearchSubmit(event);\n onCloseBottomSheet();\n }\n }}\n data-qa=\"bottom-sheet-navigation-input\"\n autoComplete=\"off\"\n />\n )\n }\n />\n );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType>({\n type,\n name,\n multiple,\n clearButton: _clearButton,\n applyChangesButton: _applyChangesButton,\n useInitialValuesOnClearAction,\n loading,\n error,\n renderHeader = RenderHeaderDefault,\n renderItem = SelectOptionDefault,\n renderButtonsContainer = RenderButtonsContainerDefault,\n renderAlertOnExitWithoutSaving,\n headerTitle,\n onClose,\n visible,\n optionList,\n optionsListRef,\n searchValue,\n setSearchValue,\n searchable,\n value: values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n isLimitExceeded,\n initialValuesOnOpening,\n setSelectedValues,\n onBottomSheetOpen,\n onBottomSheetClose,\n onSearchSubmit,\n ...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 onSearchSubmit,\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.js CHANGED
@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
13
13
  import '@hh.ru/magritte-ui-icon/icon';
14
14
  import '@hh.ru/magritte-ui-typography';
15
15
 
16
- var styles = {"select-drop":"magritte-select-drop___jn4O-_8-2-0","selectDrop":"magritte-select-drop___jn4O-_8-2-0","select-drop-header":"magritte-select-drop-header___fMmio_8-2-0","selectDropHeader":"magritte-select-drop-header___fMmio_8-2-0","select-drop_plain":"magritte-select-drop_plain___VL8Fz_8-2-0","selectDropPlain":"magritte-select-drop_plain___VL8Fz_8-2-0","label-option-plain":"magritte-label-option-plain___BvBH8_8-2-0","labelOptionPlain":"magritte-label-option-plain___BvBH8_8-2-0","loading":"magritte-loading___AMiuq_8-2-0"};
16
+ var styles = {"select-drop":"magritte-select-drop___jn4O-_8-2-2","selectDrop":"magritte-select-drop___jn4O-_8-2-2","select-drop-header":"magritte-select-drop-header___fMmio_8-2-2","selectDropHeader":"magritte-select-drop-header___fMmio_8-2-2","select-drop_plain":"magritte-select-drop_plain___VL8Fz_8-2-2","selectDropPlain":"magritte-select-drop_plain___VL8Fz_8-2-2","label-option-plain":"magritte-label-option-plain___BvBH8_8-2-2","labelOptionPlain":"magritte-label-option-plain___BvBH8_8-2-2","loading":"magritte-loading___AMiuq_8-2-2"};
17
17
 
18
18
  const SelectOptionDefault = ({ label, input, type, plain, }) => {
19
19
  if (type === 'delimiter') {
package/SelectDrop.js.map CHANGED
@@ -1 +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 = <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 forceDropVisibleWithEmptyOptions,\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\n const clearSelectedValuesAndClose = () => {\n if (useInitialValuesOnClearAction) {\n setInitialValues();\n } else {\n clearSelectedValues();\n }\n onClose?.();\n };\n const clearButton =\n _clearButton &&\n cloneElement(_clearButton, {\n key: 'clearButton',\n size: 'medium',\n 'data-qa': 'magritte-select-clear-action',\n onClick: clearSelectedValuesAndClose,\n } as ComponentProps<typeof Button>);\n const needAddChangesButton = multiple && _applyChangesButton;\n const applyChangesButton =\n (needAddChangesButton &&\n cloneElement(_applyChangesButton, {\n key: 'applyChangesButton',\n size: 'medium',\n 'data-qa': 'magritte-select-apply',\n onClick: () => {\n setSelectedValues();\n onClose?.();\n },\n } as ComponentProps<typeof Button>)) ||\n undefined;\n const footer =\n !loading &&\n needAddChangesButton &&\n renderButtonsContainer({\n applyChangesButton,\n clearButton,\n });\n return (\n <Drop\n {...props}\n ref={optionsListRef}\n autoFocusWhenOpened={false}\n maxWidth={maxWidth}\n visible={(optionList.length > 0 || forceDropVisibleWithEmptyOptions) && 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":";;;;;;;;;;;;;;;;AAcA,MAAM,mBAAmB,GAAG,CAAY,EACpC,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,GACyB,KAAkB;IAChD,IAAI,IAAI,KAAK,WAAW,EAAE;AACtB,QAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,WAAW,EAAA,QAAA,EACnC,KAAK,EAAA,CACC,EACb;AACL,KAAA;IACD,IAAI,IAAI,KAAK,OAAO,EAAE;AAClB,QAAA,IAAI,KAAK,EAAE;YACP,OAAOA,GAAA,CAAC,QAAQ,EAAC,EAAA,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAY,CAAC;AACpD,SAAA;AACD,QAAA,QACIA,GAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAC9BA,aAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACnCA,GAAC,CAAA,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAY,EACvC,CAAA,EAAA,CACH,EACT;AACL,KAAA;IACD,QACIA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,EAC1C,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAY,EACtC,CAAA,EACT;AACN,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,CAAC,EAAE,kBAAkB,EAAiB,KAAe;AACvF,IAAA,MAAM,cAAc,GAAG,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,IAAA,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,OAAO,IAAI,CAAC;AACf,KAAA;;IAED,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,kBAAkB,EAAA,CAAI,CAAC;AACrC,CAAC,CAAC;AAEW,MAAA,UAAU,GAAG,CAAyC,EAC/D,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAAE,mBAAmB,EACvC,WAAW,EAAE,YAAY,EACzB,6BAA6B,EAC7B,OAAO,EACP,UAAU,GAAG,mBAAmB,EAChC,sBAAsB,GAAG,6BAA6B,EACtD,OAAO,EACP,UAAU,EACV,cAAc,EACd,WAAW,EACX,cAAc,EACd,QAAQ,EACR,KAAK,EAAE,MAAM,EACb,QAAQ,EACR,OAAO,EACP,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,KAAK,EACL,UAAU,EACV,qBAAqB,EACrB,gCAAgC,EAChC,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EAC8B,KAAkB;AACxD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAmB,WAAW,CAC5C,CAAC,GAAG,IAAI,KAAI;AACR,QAAA,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;QAElB,IAAI,CAAC,QAAQ,EAAE;YACX,OAAO,IAAI,CAAC;AACf,SAAA;AAED,QAAA,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CAAC,OAAO,EAAE;AAC1C,YAAA,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;YACpC,cAAc,CAAC,OAAO,CAAC,CAAC;YACxB,OAAO;AACV,SAAA;QAED,IAAI,QAAQ,IAAI,WAAW,EAAE;YACzB,cAAc,CAAC,gBAAgB,CAAC,CAAC;YACjC,OAAO;AACV,SAAA;AACD,QAAA,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;QACpC,cAAc,CAAC,IAAI,CAAC,CAAC;AACzB,KAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,CAAC,CAC7D,CAAC;IAEF,MAAM,2BAA2B,GAAG,MAAK;AACrC,QAAA,IAAI,6BAA6B,EAAE;AAC/B,YAAA,gBAAgB,EAAE,CAAC;AACtB,SAAA;AAAM,aAAA;AACH,YAAA,mBAAmB,EAAE,CAAC;AACzB,SAAA;QACD,OAAO,IAAI,CAAC;AAChB,KAAC,CAAC;IACF,MAAM,WAAW,GACb,YAAY;QACZ,YAAY,CAAC,YAAY,EAAE;AACvB,YAAA,GAAG,EAAE,aAAa;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,SAAS,EAAE,8BAA8B;AACzC,YAAA,OAAO,EAAE,2BAA2B;AACN,SAAA,CAAC,CAAC;AACxC,IAAA,MAAM,oBAAoB,GAAG,QAAQ,IAAI,mBAAmB,CAAC;IAC7D,MAAM,kBAAkB,GACpB,CAAC,oBAAoB;QACjB,YAAY,CAAC,mBAAmB,EAAE;AAC9B,YAAA,GAAG,EAAE,oBAAoB;AACzB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,SAAS,EAAE,uBAAuB;YAClC,OAAO,EAAE,MAAK;AACV,gBAAA,iBAAiB,EAAE,CAAC;gBACpB,OAAO,IAAI,CAAC;aACf;AAC6B,SAAA,CAAC;AACvC,QAAA,SAAS,CAAC;IACd,MAAM,MAAM,GACR,CAAC,OAAO;QACR,oBAAoB;AACpB,QAAA,sBAAsB,CAAC;YACnB,kBAAkB;YAClB,WAAW;AACd,SAAA,CAAC,CAAC;AACP,IAAA,QACIC,IAAA,CAAC,IAAI,EAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAE,cAAc,EACnB,mBAAmB,EAAE,KAAK,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,gCAAgC,KAAK,OAAO,EAC/E,SAAS,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,EACtC,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,EACvC,KAAK,EAAE,KAAK,GAAG,GAAG,GAAG,GAAG,EACxB,sBAAsB,EAAC,MAAM,EAC7B,OAAO,EAAE,MAAK;YACV,cAAc,CAAC,OAAO,CAAC,CAAC;YACxB,OAAO,IAAI,CAAC;SACf,EACD,mBAAmB,EAAE,KAAK,EAC1B,gBAAgB,EAAE,CAAC,KAAoB,KAAI;AACvC,YAAA,IAAI,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE;AAC9E,gBAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;AACtC,aAAA;SACJ,EACD,qBAAqB,EAAE,qBAAqB,IAAI,OAAO,EACvD,cAAc,EAAA,IAAA,EACd,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,UAAU,EAAA,QAAA,EAAA,CAEnB,OAAO,KACJF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAC1B,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,EAClB,CAAA,CACT,EACA,CAAC,OAAO,KACLE,IAAA,CAAAD,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,mBAAmB,KAChBD,GAAA,CAAA,KAAA,EAAA,EAAA,SAAA,EAAa,wBAAwB,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACnE,mBAAmB,CAAC,EAAE,2BAA2B,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC,EAAA,CAChF,CACT,EACDA,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,KAAK,EAAE,CAAC,EAAA,SAAA,EACrE,6BAA6B,EACrC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI,EAAE,EAAA,QAAA,EAErC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,KAAI;AACrE,4BAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;4BAC7D,MAAM,QAAQ,GAAG,CAAC,OAAO,KAAK,SAAS,IAAI,eAAe,CAAC,CAAC;4BAC5D,QACIA,IAAC,YAAY,EAAA,EAET,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,UAAU,IAAI,IAAI,EACxB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,QAAQ,EAAA,GACd,MAAM,EAAA,EAVL,MAAM,CAAC,KAAK,CAWnB,EACJ;AACN,yBAAC,CAAC,EACA,CAAA,CAAA,EAAA,CACP,CACN,CAAA,EAAA,CACE,EACT;AACN;;;;"}
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 = <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 forceDropVisibleWithEmptyOptions,\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\n const clearSelectedValuesAndClose = () => {\n if (useInitialValuesOnClearAction) {\n setInitialValues();\n } else {\n clearSelectedValues();\n }\n onClose?.();\n };\n const clearButton =\n _clearButton &&\n cloneElement(_clearButton, {\n key: 'clearButton',\n size: 'medium',\n 'data-qa': 'magritte-select-clear-action',\n onClick: clearSelectedValuesAndClose,\n } as ComponentProps<typeof Button>);\n const needAddChangesButton = multiple && _applyChangesButton;\n const applyChangesButton =\n (needAddChangesButton &&\n cloneElement(_applyChangesButton, {\n key: 'applyChangesButton',\n size: 'medium',\n 'data-qa': 'magritte-select-apply',\n onClick: () => {\n setSelectedValues();\n onClose?.();\n },\n } as ComponentProps<typeof Button>)) ||\n undefined;\n const footer =\n !loading &&\n needAddChangesButton &&\n renderButtonsContainer({\n applyChangesButton,\n clearButton,\n });\n return (\n <Drop\n {...props}\n ref={optionsListRef}\n autoFocusWhenOpened={false}\n maxWidth={maxWidth}\n visible={(optionList.length > 0 || forceDropVisibleWithEmptyOptions) && 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":";;;;;;;;;;;;;;;;AAcA,MAAM,mBAAmB,GAAG,CAAY,EACpC,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,GACyB,KAAkB;AAChD,IAAA,IAAI,IAAI,KAAK,WAAW,EAAE;AACtB,QAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAC,WAAW,EAAA,QAAA,EACnC,KAAK,EAAA,CACC,EACb;KACL;AACD,IAAA,IAAI,IAAI,KAAK,OAAO,EAAE;QAClB,IAAI,KAAK,EAAE;YACP,OAAOA,GAAA,CAAC,QAAQ,EAAC,EAAA,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAY,CAAC;SACpD;AACD,QAAA,QACIA,GAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAC9BA,aAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACnCA,GAAC,CAAA,QAAQ,IAAC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAY,EACvC,CAAA,EAAA,CACH,EACT;KACL;IACD,QACIA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,EAC1C,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAY,EACtC,CAAA,EACT;AACN,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,CAAC,EAAE,kBAAkB,EAAiB,KAAe;AACvF,IAAA,MAAM,cAAc,GAAG,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,IAAA,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,OAAO,IAAI,CAAC;KACf;;IAED,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,kBAAkB,EAAA,CAAI,CAAC;AACrC,CAAC,CAAC;AAEW,MAAA,UAAU,GAAG,CAAyC,EAC/D,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAAE,mBAAmB,EACvC,WAAW,EAAE,YAAY,EACzB,6BAA6B,EAC7B,OAAO,EACP,UAAU,GAAG,mBAAmB,EAChC,sBAAsB,GAAG,6BAA6B,EACtD,OAAO,EACP,UAAU,EACV,cAAc,EACd,WAAW,EACX,cAAc,EACd,QAAQ,EACR,KAAK,EAAE,MAAM,EACb,QAAQ,EACR,OAAO,EACP,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,KAAK,EACL,UAAU,EACV,qBAAqB,EACrB,gCAAgC,EAChC,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EAC8B,KAAkB;AACxD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAmB,WAAW,CAC5C,CAAC,GAAG,IAAI,KAAI;AACR,QAAA,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;QAElB,IAAI,CAAC,QAAQ,EAAE;YACX,OAAO,IAAI,CAAC;SACf;AAED,QAAA,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CAAC,OAAO,EAAE;AAC1C,YAAA,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;YACpC,cAAc,CAAC,OAAO,CAAC,CAAC;YACxB,OAAO;SACV;AAED,QAAA,IAAI,QAAQ,IAAI,WAAW,EAAE;YACzB,cAAc,CAAC,gBAAgB,CAAC,CAAC;YACjC,OAAO;SACV;AACD,QAAA,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;QACpC,cAAc,CAAC,IAAI,CAAC,CAAC;AACzB,KAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,CAAC,CAC7D,CAAC;IAEF,MAAM,2BAA2B,GAAG,MAAK;QACrC,IAAI,6BAA6B,EAAE;AAC/B,YAAA,gBAAgB,EAAE,CAAC;SACtB;aAAM;AACH,YAAA,mBAAmB,EAAE,CAAC;SACzB;QACD,OAAO,IAAI,CAAC;AAChB,KAAC,CAAC;IACF,MAAM,WAAW,GACb,YAAY;QACZ,YAAY,CAAC,YAAY,EAAE;AACvB,YAAA,GAAG,EAAE,aAAa;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,SAAS,EAAE,8BAA8B;AACzC,YAAA,OAAO,EAAE,2BAA2B;AACN,SAAA,CAAC,CAAC;AACxC,IAAA,MAAM,oBAAoB,GAAG,QAAQ,IAAI,mBAAmB,CAAC;IAC7D,MAAM,kBAAkB,GACpB,CAAC,oBAAoB;QACjB,YAAY,CAAC,mBAAmB,EAAE;AAC9B,YAAA,GAAG,EAAE,oBAAoB;AACzB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,SAAS,EAAE,uBAAuB;YAClC,OAAO,EAAE,MAAK;AACV,gBAAA,iBAAiB,EAAE,CAAC;gBACpB,OAAO,IAAI,CAAC;aACf;AAC6B,SAAA,CAAC;AACvC,QAAA,SAAS,CAAC;IACd,MAAM,MAAM,GACR,CAAC,OAAO;QACR,oBAAoB;AACpB,QAAA,sBAAsB,CAAC;YACnB,kBAAkB;YAClB,WAAW;AACd,SAAA,CAAC,CAAC;AACP,IAAA,QACIC,IAAA,CAAC,IAAI,EAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAE,cAAc,EACnB,mBAAmB,EAAE,KAAK,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,gCAAgC,KAAK,OAAO,EAC/E,SAAS,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,EACtC,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,EACvC,KAAK,EAAE,KAAK,GAAG,GAAG,GAAG,GAAG,EACxB,sBAAsB,EAAC,MAAM,EAC7B,OAAO,EAAE,MAAK;YACV,cAAc,CAAC,OAAO,CAAC,CAAC;YACxB,OAAO,IAAI,CAAC;SACf,EACD,mBAAmB,EAAE,KAAK,EAC1B,gBAAgB,EAAE,CAAC,KAAoB,KAAI;AACvC,YAAA,IAAI,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE;AAC9E,gBAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;aACtC;SACJ,EACD,qBAAqB,EAAE,qBAAqB,IAAI,OAAO,EACvD,cAAc,EAAA,IAAA,EACd,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,UAAU,EAAA,QAAA,EAAA,CAEnB,OAAO,KACJF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAC1B,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,EAClB,CAAA,CACT,EACA,CAAC,OAAO,KACLE,IAAA,CAAAD,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,mBAAmB,KAChBD,GAAA,CAAA,KAAA,EAAA,EAAA,SAAA,EAAa,wBAAwB,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACnE,mBAAmB,CAAC,EAAE,2BAA2B,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC,EAAA,CAChF,CACT,EACDA,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,KAAK,EAAE,CAAC,EAAA,SAAA,EACrE,6BAA6B,EACrC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI,EAAE,EAAA,QAAA,EAErC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,KAAI;AACrE,4BAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;4BAC7D,MAAM,QAAQ,GAAG,CAAC,OAAO,KAAK,SAAS,IAAI,eAAe,CAAC,CAAC;4BAC5D,QACIA,IAAC,YAAY,EAAA,EAET,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,UAAU,IAAI,IAAI,EACxB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,QAAQ,EAAA,GACd,MAAM,EAAA,EAVL,MAAM,CAAC,KAAK,CAWnB,EACJ;AACN,yBAAC,CAAC,EACA,CAAA,CAAA,EAAA,CACP,CACN,CAAA,EAAA,CACE,EACT;AACN;;;;"}
package/SelectOption.js CHANGED
@@ -9,7 +9,7 @@ import { Radio, Checkbox } from '@hh.ru/magritte-ui-checkbox-radio';
9
9
  import { CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
10
10
  import { Text } from '@hh.ru/magritte-ui-typography';
11
11
 
12
- var styles = {"select-option-label":"magritte-select-option-label___bYo2l_8-2-0","selectOptionLabel":"magritte-select-option-label___bYo2l_8-2-0","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_8-2-0","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_8-2-0","select-delimiter":"magritte-select-delimiter___WyeR6_8-2-0","selectDelimiter":"magritte-select-delimiter___WyeR6_8-2-0"};
12
+ var styles = {"select-option-label":"magritte-select-option-label___bYo2l_8-2-2","selectOptionLabel":"magritte-select-option-label___bYo2l_8-2-2","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_8-2-2","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_8-2-2","select-delimiter":"magritte-select-delimiter___WyeR6_8-2-2","selectDelimiter":"magritte-select-delimiter___WyeR6_8-2-2"};
13
13
 
14
14
  const CheckableComponent = ({ type, value, checked, name, onChange }) => {
15
15
  if (type === 'label') {
@@ -1 +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 = <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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"}
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 = <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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"}
@@ -1,7 +1,7 @@
1
1
  import { type ReactElement } from 'react';
2
2
  import type { UncontrolledSelectProps } from '@hh.ru/magritte-ui-select/types';
3
3
  declare const UncontrolledSelect: {
4
- <MultipleType extends boolean, DataType>({ name, onChange, ...props }: UncontrolledSelectProps<MultipleType, DataType, [MultipleType] extends [true] ? string[] : string>): ReactElement;
4
+ <MultipleType extends boolean, DataType>({ name, onChange, ...props }: UncontrolledSelectProps<MultipleType, DataType>): ReactElement;
5
5
  displayName: string;
6
6
  };
7
7
  export { UncontrolledSelect };
@@ -32,7 +32,7 @@ import '@hh.ru/magritte-ui-trigger';
32
32
 
33
33
  const UncontrolledSelect = ({ name, onChange, ...props }) => {
34
34
  const { multiple, value } = props;
35
- const initialValue = multiple ? value ?? [] : value ?? '';
35
+ const initialValue = multiple ? (value ?? []) : (value ?? '');
36
36
  const [controlledValue, setValue] = useState(initialValue);
37
37
  return (jsxs(Fragment, { children: [jsx(Select, { ...props, onChange: (values) => {
38
38
  setValue(values);
@@ -1 +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, 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;;;;"}
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, 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,IAAI,KAAK,IAAI,EAAE,KAAK,KAAK,IAAI,EAAE,CAAC,CAAC;IACjF,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 CHANGED
@@ -1,56 +1,56 @@
1
- .magritte-select-option-label___bYo2l_8-2-0{
1
+ .magritte-select-option-label___bYo2l_8-2-2{
2
2
  display:flex;
3
3
  max-height:56px;
4
4
  }
5
- .magritte-select-option-label_desktop___bceen_8-2-0{
5
+ .magritte-select-option-label_desktop___bceen_8-2-2{
6
6
  max-height:24px;
7
7
  }
8
- .magritte-select-delimiter___WyeR6_8-2-0{
8
+ .magritte-select-delimiter___WyeR6_8-2-2{
9
9
  padding-left:16px;
10
10
  padding-top:12px;
11
11
  }
12
12
 
13
13
  :root{
14
- --magritte-static-space-400-v19-1-1:16px;
14
+ --magritte-static-space-400-v19-1-2:16px;
15
15
  }
16
- .magritte-select-bottom-sheet___1RZDJ_8-2-0{
16
+ .magritte-select-bottom-sheet___1RZDJ_8-2-2{
17
17
  display:flex;
18
18
  flex-direction:column;
19
- padding:0 var(--magritte-static-space-400-v19-1-1);
19
+ padding:0 var(--magritte-static-space-400-v19-1-2);
20
20
  padding-bottom:16px;
21
21
  }
22
- .magritte-select-bottom-sheet_checkbox___hwTgo_8-2-0,
23
- .magritte-select-bottom-sheet_radio___qvFFV_8-2-0{
22
+ .magritte-select-bottom-sheet_checkbox___hwTgo_8-2-2,
23
+ .magritte-select-bottom-sheet_radio___qvFFV_8-2-2{
24
24
  gap:12px;
25
25
  }
26
- .magritte-loading___VpU1J_8-2-0{
26
+ .magritte-loading___VpU1J_8-2-2{
27
27
  display:flex;
28
28
  align-items:center;
29
29
  height:100%;
30
30
  justify-content:center;
31
31
  }
32
- .magritte-error-wrapper___P7jYg_8-2-0{
32
+ .magritte-error-wrapper___P7jYg_8-2-2{
33
33
  height:100%;
34
34
  }
35
35
 
36
- .magritte-select-drop___jn4O-_8-2-0{
36
+ .magritte-select-drop___jn4O-_8-2-2{
37
37
  display:flex;
38
38
  flex-direction:column;
39
39
  gap:8px;
40
40
  }
41
- .magritte-select-drop-header___fMmio_8-2-0{
41
+ .magritte-select-drop-header___fMmio_8-2-2{
42
42
  display:flex;
43
43
  flex-direction:column;
44
44
  margin-bottom:8px;
45
45
  }
46
- .magritte-select-drop_plain___VL8Fz_8-2-0{
46
+ .magritte-select-drop_plain___VL8Fz_8-2-2{
47
47
  gap:16px;
48
48
  }
49
- .magritte-label-option-plain___BvBH8_8-2-0{
49
+ .magritte-label-option-plain___BvBH8_8-2-2{
50
50
  display:flex;
51
51
  justify-content:center;
52
52
  }
53
- .magritte-loading___AMiuq_8-2-0{
53
+ .magritte-loading___AMiuq_8-2-2{
54
54
  display:flex;
55
55
  align-items:center;
56
56
  height:150px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-select",
3
- "version": "8.2.0",
3
+ "version": "8.2.2",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -30,22 +30,22 @@
30
30
  "@hh.ru/magritte-common-fuzzy-search": "1.0.5",
31
31
  "@hh.ru/magritte-common-keyboard": "4.0.2",
32
32
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
33
- "@hh.ru/magritte-ui-action": "4.4.11",
34
- "@hh.ru/magritte-ui-action-bar": "2.2.4",
35
- "@hh.ru/magritte-ui-bottom-sheet": "5.5.4",
36
- "@hh.ru/magritte-ui-breakpoint": "4.0.3",
37
- "@hh.ru/magritte-ui-button": "5.2.3",
38
- "@hh.ru/magritte-ui-button-stack": "2.1.22",
39
- "@hh.ru/magritte-ui-cell": "4.0.18",
40
- "@hh.ru/magritte-ui-checkable-card": "3.0.43",
41
- "@hh.ru/magritte-ui-checkbox-radio": "3.0.23",
42
- "@hh.ru/magritte-ui-drop": "7.2.2",
43
- "@hh.ru/magritte-ui-icon": "7.9.1",
44
- "@hh.ru/magritte-ui-input": "7.0.1",
45
- "@hh.ru/magritte-ui-loader": "1.3.6",
46
- "@hh.ru/magritte-ui-navigation-bar": "6.3.1",
47
- "@hh.ru/magritte-ui-trigger": "3.0.2",
48
- "@hh.ru/magritte-ui-typography": "3.0.17"
33
+ "@hh.ru/magritte-ui-action": "4.4.12",
34
+ "@hh.ru/magritte-ui-action-bar": "2.2.5",
35
+ "@hh.ru/magritte-ui-bottom-sheet": "5.5.6",
36
+ "@hh.ru/magritte-ui-breakpoint": "4.0.4",
37
+ "@hh.ru/magritte-ui-button": "5.2.4",
38
+ "@hh.ru/magritte-ui-button-stack": "2.1.23",
39
+ "@hh.ru/magritte-ui-cell": "4.0.19",
40
+ "@hh.ru/magritte-ui-checkable-card": "3.0.45",
41
+ "@hh.ru/magritte-ui-checkbox-radio": "3.0.24",
42
+ "@hh.ru/magritte-ui-drop": "7.2.3",
43
+ "@hh.ru/magritte-ui-icon": "7.9.2",
44
+ "@hh.ru/magritte-ui-input": "7.0.2",
45
+ "@hh.ru/magritte-ui-loader": "1.3.7",
46
+ "@hh.ru/magritte-ui-navigation-bar": "6.3.2",
47
+ "@hh.ru/magritte-ui-trigger": "3.0.3",
48
+ "@hh.ru/magritte-ui-typography": "3.0.18"
49
49
  },
50
- "gitHead": "d54006637559e6ccc3b8654e273f7471236a0436"
50
+ "gitHead": "1ac30fb3b6ed8df5e0683e4551925b6ab8bf08d9"
51
51
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useSelectOptionsList.js","sources":["../src/useSelectOptionsList.tsx"],"sourcesContent":["import { useState, useEffect, useRef, RefObject } from 'react';\n\ninterface UseSelectOptionsList {\n activatorRef: RefObject<HTMLDivElement>;\n optionsListRef: RefObject<HTMLElement>;\n onOptionsListClose: VoidFunction;\n toggleListVisibility: VoidFunction;\n showOptions: boolean;\n}\n\nexport const useSelectOptionsList = (isMobile: boolean): UseSelectOptionsList => {\n const [showOptions, setShowOptions] = useState(false);\n const activatorRef = useRef<HTMLDivElement>(null);\n const optionsListRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!showOptions || isMobile) {\n return void 0;\n }\n const isSelectContainsElement = (element: Node | null) => {\n return activatorRef.current?.contains(element) || optionsListRef.current?.contains(element);\n };\n const clickHandler = (event: MouseEvent) => {\n if (isSelectContainsElement(event.target as Node)) {\n return;\n }\n document.removeEventListener('click', clickHandler, true);\n setShowOptions(false);\n };\n const focusHandler = (event: FocusEvent) => {\n if (isSelectContainsElement(event.target as Node)) {\n return;\n }\n document.removeEventListener('focus', focusHandler, true);\n setShowOptions(false);\n };\n document.addEventListener('focus', focusHandler, true);\n document.addEventListener('click', clickHandler, true);\n return () => {\n document.removeEventListener('focus', focusHandler, true);\n document.removeEventListener('click', clickHandler, true);\n };\n }, [isMobile, optionsListRef, showOptions]);\n\n const onOptionsListClose = () => setShowOptions(false);\n const toggleListVisibility = () => setShowOptions((showOptions) => !showOptions);\n\n return {\n activatorRef,\n optionsListRef,\n onOptionsListClose,\n toggleListVisibility,\n showOptions,\n };\n};\n"],"names":[],"mappings":";;AAUa,MAAA,oBAAoB,GAAG,CAAC,QAAiB,KAA0B;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAClD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;YAC1B,OAAO,KAAK,CAAC,CAAC;AACjB,SAAA;AACD,QAAA,MAAM,uBAAuB,GAAG,CAAC,OAAoB,KAAI;AACrD,YAAA,OAAO,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;AAChG,SAAC,CAAC;AACF,QAAA,MAAM,YAAY,GAAG,CAAC,KAAiB,KAAI;AACvC,YAAA,IAAI,uBAAuB,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC/C,OAAO;AACV,aAAA;YACD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC1D,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAC,CAAC;AACF,QAAA,MAAM,YAAY,GAAG,CAAC,KAAiB,KAAI;AACvC,YAAA,IAAI,uBAAuB,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC/C,OAAO;AACV,aAAA;YACD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC1D,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;QACvD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;AACvD,QAAA,OAAO,MAAK;YACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC1D,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;AAC9D,SAAC,CAAC;KACL,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5C,MAAM,kBAAkB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC;AACvD,IAAA,MAAM,oBAAoB,GAAG,MAAM,cAAc,CAAC,CAAC,WAAW,KAAK,CAAC,WAAW,CAAC,CAAC;IAEjF,OAAO;QACH,YAAY;QACZ,cAAc;QACd,kBAAkB;QAClB,oBAAoB;QACpB,WAAW;KACd,CAAC;AACN;;;;"}
1
+ {"version":3,"file":"useSelectOptionsList.js","sources":["../src/useSelectOptionsList.tsx"],"sourcesContent":["import { useState, useEffect, useRef, RefObject } from 'react';\n\ninterface UseSelectOptionsList {\n activatorRef: RefObject<HTMLDivElement>;\n optionsListRef: RefObject<HTMLElement>;\n onOptionsListClose: VoidFunction;\n toggleListVisibility: VoidFunction;\n showOptions: boolean;\n}\n\nexport const useSelectOptionsList = (isMobile: boolean): UseSelectOptionsList => {\n const [showOptions, setShowOptions] = useState(false);\n const activatorRef = useRef<HTMLDivElement>(null);\n const optionsListRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n if (!showOptions || isMobile) {\n return void 0;\n }\n const isSelectContainsElement = (element: Node | null) => {\n return activatorRef.current?.contains(element) || optionsListRef.current?.contains(element);\n };\n const clickHandler = (event: MouseEvent) => {\n if (isSelectContainsElement(event.target as Node)) {\n return;\n }\n document.removeEventListener('click', clickHandler, true);\n setShowOptions(false);\n };\n const focusHandler = (event: FocusEvent) => {\n if (isSelectContainsElement(event.target as Node)) {\n return;\n }\n document.removeEventListener('focus', focusHandler, true);\n setShowOptions(false);\n };\n document.addEventListener('focus', focusHandler, true);\n document.addEventListener('click', clickHandler, true);\n return () => {\n document.removeEventListener('focus', focusHandler, true);\n document.removeEventListener('click', clickHandler, true);\n };\n }, [isMobile, optionsListRef, showOptions]);\n\n const onOptionsListClose = () => setShowOptions(false);\n const toggleListVisibility = () => setShowOptions((showOptions) => !showOptions);\n\n return {\n activatorRef,\n optionsListRef,\n onOptionsListClose,\n toggleListVisibility,\n showOptions,\n };\n};\n"],"names":[],"mappings":";;AAUa,MAAA,oBAAoB,GAAG,CAAC,QAAiB,KAA0B;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAClD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;YAC1B,OAAO,KAAK,CAAC,CAAC;SACjB;AACD,QAAA,MAAM,uBAAuB,GAAG,CAAC,OAAoB,KAAI;AACrD,YAAA,OAAO,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;AAChG,SAAC,CAAC;AACF,QAAA,MAAM,YAAY,GAAG,CAAC,KAAiB,KAAI;AACvC,YAAA,IAAI,uBAAuB,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC/C,OAAO;aACV;YACD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC1D,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAC,CAAC;AACF,QAAA,MAAM,YAAY,GAAG,CAAC,KAAiB,KAAI;AACvC,YAAA,IAAI,uBAAuB,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC/C,OAAO;aACV;YACD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC1D,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;QACvD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;AACvD,QAAA,OAAO,MAAK;YACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;YAC1D,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;AAC9D,SAAC,CAAC;KACL,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5C,MAAM,kBAAkB,GAAG,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC;AACvD,IAAA,MAAM,oBAAoB,GAAG,MAAM,cAAc,CAAC,CAAC,WAAW,KAAK,CAAC,WAAW,CAAC,CAAC;IAEjF,OAAO;QACH,YAAY;QACZ,cAAc;QACd,kBAAkB;QAClB,oBAAoB;QACpB,WAAW;KACd,CAAC;AACN;;;;"}
@@ -1 +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<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;;;;"}
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<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;KACb;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;SACV;AACD,QAAA,IAAI,mBAAmB,CAAC,OAAO,EAAE;YAC7B,OAAO;SACV;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;AACX,QAAA,IAAI,WAAW,KAAK,EAAE,EAAE;YACpB,aAAa,CAAC,OAAO,CAAC,CAAC;SAC1B;aAAM;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;iBAC7B;AACL,aAAC,CAAC,CAAC;YACH,aAAa,CAAC,YAAY,CAAC,CAAC;SAC/B;;AAEL,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAElB,IAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvD;;;;"}
@@ -1,2 +1,2 @@
1
1
  import { UseSelectState, SelectOption } from '@hh.ru/magritte-ui-select/types';
2
- 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>;
2
+ 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) => UseSelectState<MultipleType, ValueType>;
@@ -1 +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 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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"}
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 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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"}