@hh.ru/magritte-ui-select 10.3.5 → 10.4.1
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 +1 -1
- package/Select.js.map +1 -1
- package/SelectBottomSheet.js +1 -1
- package/SelectDrop.js +1 -1
- package/SelectEmptyHint.js +1 -1
- package/SelectError.js +1 -1
- package/SelectOption.js +1 -1
- package/index.css +44 -44
- package/package.json +19 -19
- package/useSelectSearch.d.ts +1 -1
- package/useSelectSearch.js +16 -39
- package/useSelectSearch.js.map +1 -1
package/Select.js
CHANGED
|
@@ -63,7 +63,7 @@ const Select = ({ type, multiple, value: _value, maxSelectedOptions, loading, er
|
|
|
63
63
|
const valuesArray = useMemo(
|
|
64
64
|
// eslint-disable-next-line no-nested-ternary
|
|
65
65
|
() => (Array.isArray(values) ? values : values ? [values] : []), [values]);
|
|
66
|
-
const { optionList, internalLoading, searchValue, setSearchValue, searchInProgress, reload, internalError } = useSelectSearch(showOptions, valuesArray, dataProvider, onOptionsChange
|
|
66
|
+
const { optionList, internalLoading, searchValue, setSearchValue, searchInProgress, reload, internalError } = useSelectSearch(showOptions, valuesArray, dataProvider, onOptionsChange);
|
|
67
67
|
const selectedLabels = useMemo(() =>
|
|
68
68
|
// eslint-disable-next-line no-nested-ternary
|
|
69
69
|
Array.isArray(_value)
|
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 useMemo,\n} from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport {\n findNextFocusableElement,\n keyboardKeys,\n keyboardMatch,\n keyboardMatches,\n} from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { SelectBottomSheet } from '@hh.ru/magritte-ui-select/SelectBottomSheet';\nimport { SelectDrop } from '@hh.ru/magritte-ui-select/SelectDrop';\nimport {\n SelectProps,\n TriggerPropsWithRef,\n FocusStateType,\n SetSearchValue,\n OptionsCount,\n} from '@hh.ru/magritte-ui-select/types';\nimport { useSelectOptionsList } from '@hh.ru/magritte-ui-select/useSelectOptionsList';\nimport { useSelectSearch } from '@hh.ru/magritte-ui-select/useSelectSearch';\nimport { useSelectState } from '@hh.ru/magritte-ui-select/useSelectState';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nconst SelectTriggerDefault = (triggerProps: TriggerPropsWithRef): ReactElement => {\n return <Trigger {...triggerProps} />;\n};\n\nconst focusOptionsList = (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: 'up' | 'down') => {\n if (drop) {\n const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n if (nextFocusableElement !== null) {\n event.preventDefault();\n nextFocusableElement.focus();\n }\n }\n};\n\ninterface SearchInputState {\n useSearchInput: boolean;\n emitEvents: boolean;\n}\n\nconst SEARCH_INPUT_STATE: SearchInputState = {\n useSearchInput: false,\n emitEvents: false,\n};\n\nexport const Select = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n type,\n multiple,\n value: _value,\n maxSelectedOptions,\n loading,\n error,\n searchable: _searchable,\n bottomSheetHeight = 'full-screen',\n onChange: onChangeHandler,\n renderTrigger = SelectTriggerDefault,\n triggerProps,\n renderMobileItem,\n renderDesktopItem,\n name,\n maxWidth,\n maxHeight = 460,\n useInitialValuesOnClearAction,\n renderAlertOnExitWithoutSaving,\n renderButtonsContainer,\n renderHeader,\n headerTitle: _headerTitle,\n clearButton,\n applyChangesButton,\n forceDropVisibleWithEmptyOptions,\n plain = false,\n widthEqualToActivator = true,\n renderContentBefore,\n onBlur,\n onFocus,\n onDropOpen,\n onDropClose,\n onBottomSheetClose,\n onBottomSheetOpen,\n onSearchSubmit,\n onApply,\n onClear,\n onSelectOption,\n pickerRef,\n dataProvider,\n emptyOptionsHint,\n emptyOptionsSearchHint,\n onOptionsChange,\n innerErrorTrls,\n optionDataQa,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n const { isMobile } = useBreakpoint();\n const inputRef = useRef<HTMLInputElement>(null);\n const [searchInputState, setSearchInputState] = useState<SearchInputState>(SEARCH_INPUT_STATE);\n const [forcedState, setForcedState] = useState<FocusStateType>(null);\n const dropRef = useRef<HTMLDivElement>(null);\n const useDefaultTrigger = renderTrigger === SelectTriggerDefault;\n\n const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n useSelectOptionsList(isMobile);\n const prevVisibleRef = useRef<boolean>(showOptions);\n const hasChangesButton = multiple && Boolean(applyChangesButton);\n const {\n values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n setSelectedValues,\n setInitialValuesWithoutOnChange,\n initialValuesOnOpening,\n } = useSelectState<DataType, MultipleType>(\n !!multiple,\n _value || [],\n showOptions,\n hasChangesButton,\n onChangeHandler,\n onSelectOption\n );\n const valuesArray = useMemo(\n // eslint-disable-next-line no-nested-ternary\n () => (Array.isArray(values) ? values : values ? ([values] as DataType[]) : []),\n [values]\n );\n const { optionList, internalLoading, searchValue, setSearchValue, searchInProgress, reload, internalError } =\n useSelectSearch<DataType>(showOptions, valuesArray, dataProvider, onOptionsChange, multiple);\n\n const selectedLabels = useMemo(\n () =>\n // eslint-disable-next-line no-nested-ternary\n Array.isArray(_value)\n ? _value.map((item) => item.text ?? item.value)\n : _value\n ? [_value?.text ?? _value.value]\n : [],\n [_value]\n );\n\n const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef, pickerRef);\n const showedByFocus = useRef<boolean>(false);\n const isLimitExceeded =\n maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;\n const { size, stretched, label: triggerLabel, disabled } = triggerProps;\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n const inputWrapperStyles = stretched ? { with: '100%' } : { maxWidth: activatorRef.current?.offsetWidth };\n const searchable = _searchable && (size === 'large' || size === 'medium');\n const dataQa = triggerProps['data-qa'] || 'magritte-select-activator';\n\n // селект без поиска (переключаем фокус и отправляем blur)\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 // селект с поиском (нужно подменить контрол)\n useLayoutEffect(() => {\n if (!searchable || isMobile) {\n return;\n }\n if (forcedState === 'focus' || forcedState === 'focusAndSelect') {\n setSearchInputState({\n useSearchInput: useDefaultTrigger,\n emitEvents: true,\n });\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n // триггер подменяться на input (тут пачка логики + blur)\n useLayoutEffect(() => {\n if (!searchInputState.emitEvents) {\n return;\n }\n // немного магипуляций, если тригер дефотный\n if (searchInputState.useSearchInput) {\n if (!inputRef.current) {\n return;\n }\n if (forcedState === 'focus') {\n inputRef.current.focus();\n }\n // например во время выбора опции, нужно выбрать текст\n if (forcedState === 'focusAndSelect') {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n }\n if (!forcedState && !showOptions) {\n setSearchInputState({\n useSearchInput: false,\n emitEvents: false,\n });\n if (prevVisibleRef.current) {\n onBlur?.();\n }\n }\n prevVisibleRef.current = showOptions;\n }, [forcedState, onBlur, setForcedState, searchInputState, showOptions, setInitialValuesWithoutOnChange]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n showedByFocus.current = false;\n setForcedState('focus');\n\n toggleListVisibility();\n return;\n }\n\n // движение по списку опций\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n focusOptionsList(event, dropRef?.current, 'up');\n return;\n }\n\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n focusOptionsList(event, dropRef?.current, 'down');\n return;\n }\n\n // после закрытия пользователь решил что-то поделать опять\n if (\n !showOptions &&\n !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n ) {\n toggleListVisibility();\n }\n },\n [showOptions, toggleListVisibility]\n );\n\n return (\n <>\n {!searchInputState.useSearchInput &&\n renderTrigger({\n values: selectedLabels,\n expanded: showOptions,\n toggleExpanded: toggleListVisibility,\n onChange: () => {\n if (disabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRef,\n onKeyDown: handleKeyDown,\n onBlur: () => {\n setForcedState(null);\n if (showOptions && optionList.length === 0 && !emptyOptionsHint) {\n toggleListVisibility();\n }\n if (!showOptions && forcedState === null) {\n onBlur?.();\n }\n },\n onFocus: () => {\n if (disabled || showOptions) {\n return;\n }\n if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n onFocus?.();\n setForcedState('focus');\n\n toggleListVisibility();\n }\n showedByFocus.current = true;\n },\n 'data-qa': dataQa,\n setSearchValue,\n optionsCount: optionList.length,\n ...triggerProps,\n } as TriggerPropsWithRef & SetSearchValue & OptionsCount)}\n {searchInputState.useSearchInput && (\n <div style={inputWrapperStyles}>\n <BaseInput\n {...sizeProp}\n ref={inputRef}\n wrapperRef={activatorRef}\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={handleKeyDown}\n onFocus={() => {\n setForcedState('focus');\n }}\n onBlur={() => {\n setForcedState(null);\n if (showOptions && optionList.length === 0 && !emptyOptionsHint) {\n toggleListVisibility();\n }\n }}\n data-qa=\"magritte-select-activator-input\"\n placeholder={selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel}\n autoComplete=\"off\"\n />\n </div>\n )}\n {isMobile && (\n <SelectBottomSheet\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n error={error}\n height={searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight}\n visible={Boolean(showOptions || internalLoading)}\n value={values}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\n type={type}\n loading={loading || internalLoading}\n searchable={_searchable}\n useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n initialValuesOnOpening={initialValuesOnOpening}\n renderItem={renderMobileItem}\n renderAlertOnExitWithoutSaving={renderAlertOnExitWithoutSaving}\n renderButtonsContainer={renderButtonsContainer}\n renderHeader={renderHeader}\n headerTitle={_headerTitle || triggerLabel}\n optionList={optionList}\n optionsListRef={optionsListRefCallback}\n onChange={onChange}\n onClose={onOptionsListClose}\n searchValue={searchValue}\n setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n setSelectedValues={setSelectedValues}\n onBottomSheetClose={onBottomSheetClose}\n onBottomSheetOpen={onBottomSheetOpen}\n onSearchSubmit={onSearchSubmit}\n onApply={onApply}\n onClear={onClear}\n emptyOptionsHint={emptyOptionsHint}\n emptyOptionsSearchHint={emptyOptionsSearchHint}\n searchInProgress={searchInProgress}\n internalError={internalError}\n reload={reload}\n innerErrorTrls={innerErrorTrls}\n optionDataQa={optionDataQa}\n />\n )}\n {!isMobile && (\n <SelectDrop\n activatorRef={activatorRef}\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\n maxWidth={maxWidth}\n type={type}\n loading={loading || internalLoading}\n useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n onClose={onOptionsListClose}\n renderItem={renderDesktopItem}\n renderButtonsContainer={renderButtonsContainer}\n plain={plain}\n optionList={optionList}\n optionsListRef={optionsListRefCallback}\n value={values}\n onChange={onChange}\n searchValue={searchValue}\n searchable={searchable}\n forceDropVisibleWithEmptyOptions={forceDropVisibleWithEmptyOptions || internalLoading}\n setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n visible={!error && (showOptions || internalLoading)}\n widthEqualToActivator={widthEqualToActivator}\n renderContentBefore={renderContentBefore}\n setForcedState={setForcedState}\n setSelectedValues={setSelectedValues}\n maxHeight={maxHeight}\n onDropOpen={onDropOpen}\n onDropClose={onDropClose}\n onApply={onApply}\n onClear={onClear}\n emptyOptionsHint={emptyOptionsHint}\n emptyOptionsSearchHint={emptyOptionsSearchHint}\n searchInProgress={searchInProgress}\n internalError={internalError}\n reload={reload}\n innerErrorTrls={innerErrorTrls}\n optionDataQa={optionDataQa}\n />\n )}\n </>\n );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
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 useMemo,\n} from 'react';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport {\n findNextFocusableElement,\n keyboardKeys,\n keyboardMatch,\n keyboardMatches,\n} from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { SelectBottomSheet } from '@hh.ru/magritte-ui-select/SelectBottomSheet';\nimport { SelectDrop } from '@hh.ru/magritte-ui-select/SelectDrop';\nimport {\n SelectProps,\n TriggerPropsWithRef,\n FocusStateType,\n SetSearchValue,\n OptionsCount,\n} from '@hh.ru/magritte-ui-select/types';\nimport { useSelectOptionsList } from '@hh.ru/magritte-ui-select/useSelectOptionsList';\nimport { useSelectSearch } from '@hh.ru/magritte-ui-select/useSelectSearch';\nimport { useSelectState } from '@hh.ru/magritte-ui-select/useSelectState';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nconst SelectTriggerDefault = (triggerProps: TriggerPropsWithRef): ReactElement => {\n return <Trigger {...triggerProps} />;\n};\n\nconst focusOptionsList = (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: 'up' | 'down') => {\n if (drop) {\n const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n if (nextFocusableElement !== null) {\n event.preventDefault();\n nextFocusableElement.focus();\n }\n }\n};\n\ninterface SearchInputState {\n useSearchInput: boolean;\n emitEvents: boolean;\n}\n\nconst SEARCH_INPUT_STATE: SearchInputState = {\n useSearchInput: false,\n emitEvents: false,\n};\n\nexport const Select = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n type,\n multiple,\n value: _value,\n maxSelectedOptions,\n loading,\n error,\n searchable: _searchable,\n bottomSheetHeight = 'full-screen',\n onChange: onChangeHandler,\n renderTrigger = SelectTriggerDefault,\n triggerProps,\n renderMobileItem,\n renderDesktopItem,\n name,\n maxWidth,\n maxHeight = 460,\n useInitialValuesOnClearAction,\n renderAlertOnExitWithoutSaving,\n renderButtonsContainer,\n renderHeader,\n headerTitle: _headerTitle,\n clearButton,\n applyChangesButton,\n forceDropVisibleWithEmptyOptions,\n plain = false,\n widthEqualToActivator = true,\n renderContentBefore,\n onBlur,\n onFocus,\n onDropOpen,\n onDropClose,\n onBottomSheetClose,\n onBottomSheetOpen,\n onSearchSubmit,\n onApply,\n onClear,\n onSelectOption,\n pickerRef,\n dataProvider,\n emptyOptionsHint,\n emptyOptionsSearchHint,\n onOptionsChange,\n innerErrorTrls,\n optionDataQa,\n}: SelectProps<MultipleType, DataType>): ReactElement => {\n const { isMobile } = useBreakpoint();\n const inputRef = useRef<HTMLInputElement>(null);\n const [searchInputState, setSearchInputState] = useState<SearchInputState>(SEARCH_INPUT_STATE);\n const [forcedState, setForcedState] = useState<FocusStateType>(null);\n const dropRef = useRef<HTMLDivElement>(null);\n const useDefaultTrigger = renderTrigger === SelectTriggerDefault;\n\n const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n useSelectOptionsList(isMobile);\n const prevVisibleRef = useRef<boolean>(showOptions);\n const hasChangesButton = multiple && Boolean(applyChangesButton);\n const {\n values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n setSelectedValues,\n setInitialValuesWithoutOnChange,\n initialValuesOnOpening,\n } = useSelectState<DataType, MultipleType>(\n !!multiple,\n _value || [],\n showOptions,\n hasChangesButton,\n onChangeHandler,\n onSelectOption\n );\n const valuesArray = useMemo(\n // eslint-disable-next-line no-nested-ternary\n () => (Array.isArray(values) ? values : values ? ([values] as DataType[]) : []),\n [values]\n );\n const { optionList, internalLoading, searchValue, setSearchValue, searchInProgress, reload, internalError } =\n useSelectSearch<DataType>(showOptions, valuesArray, dataProvider, onOptionsChange);\n\n const selectedLabels = useMemo(\n () =>\n // eslint-disable-next-line no-nested-ternary\n Array.isArray(_value)\n ? _value.map((item) => item.text ?? item.value)\n : _value\n ? [_value?.text ?? _value.value]\n : [],\n [_value]\n );\n\n const optionsListRefCallback = useMultipleRefs(optionsListRef, dropRef, pickerRef);\n const showedByFocus = useRef<boolean>(false);\n const isLimitExceeded =\n maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;\n const { size, stretched, label: triggerLabel, disabled } = triggerProps;\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n const inputWrapperStyles = stretched ? { with: '100%' } : { maxWidth: activatorRef.current?.offsetWidth };\n const searchable = _searchable && (size === 'large' || size === 'medium');\n const dataQa = triggerProps['data-qa'] || 'magritte-select-activator';\n\n // селект без поиска (переключаем фокус и отправляем blur)\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 // селект с поиском (нужно подменить контрол)\n useLayoutEffect(() => {\n if (!searchable || isMobile) {\n return;\n }\n if (forcedState === 'focus' || forcedState === 'focusAndSelect') {\n setSearchInputState({\n useSearchInput: useDefaultTrigger,\n emitEvents: true,\n });\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n // триггер подменяться на input (тут пачка логики + blur)\n useLayoutEffect(() => {\n if (!searchInputState.emitEvents) {\n return;\n }\n // немного магипуляций, если тригер дефотный\n if (searchInputState.useSearchInput) {\n if (!inputRef.current) {\n return;\n }\n if (forcedState === 'focus') {\n inputRef.current.focus();\n }\n // например во время выбора опции, нужно выбрать текст\n if (forcedState === 'focusAndSelect') {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n }\n if (!forcedState && !showOptions) {\n setSearchInputState({\n useSearchInput: false,\n emitEvents: false,\n });\n if (prevVisibleRef.current) {\n onBlur?.();\n }\n }\n prevVisibleRef.current = showOptions;\n }, [forcedState, onBlur, setForcedState, searchInputState, showOptions, setInitialValuesWithoutOnChange]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n showedByFocus.current = false;\n setForcedState('focus');\n\n toggleListVisibility();\n return;\n }\n\n // движение по списку опций\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n focusOptionsList(event, dropRef?.current, 'up');\n return;\n }\n\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n focusOptionsList(event, dropRef?.current, 'down');\n return;\n }\n\n // после закрытия пользователь решил что-то поделать опять\n if (\n !showOptions &&\n !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n ) {\n toggleListVisibility();\n }\n },\n [showOptions, toggleListVisibility]\n );\n\n return (\n <>\n {!searchInputState.useSearchInput &&\n renderTrigger({\n values: selectedLabels,\n expanded: showOptions,\n toggleExpanded: toggleListVisibility,\n onChange: () => {\n if (disabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRef,\n onKeyDown: handleKeyDown,\n onBlur: () => {\n setForcedState(null);\n if (showOptions && optionList.length === 0 && !emptyOptionsHint) {\n toggleListVisibility();\n }\n if (!showOptions && forcedState === null) {\n onBlur?.();\n }\n },\n onFocus: () => {\n if (disabled || showOptions) {\n return;\n }\n if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n onFocus?.();\n setForcedState('focus');\n\n toggleListVisibility();\n }\n showedByFocus.current = true;\n },\n 'data-qa': dataQa,\n setSearchValue,\n optionsCount: optionList.length,\n ...triggerProps,\n } as TriggerPropsWithRef & SetSearchValue & OptionsCount)}\n {searchInputState.useSearchInput && (\n <div style={inputWrapperStyles}>\n <BaseInput\n {...sizeProp}\n ref={inputRef}\n wrapperRef={activatorRef}\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={handleKeyDown}\n onFocus={() => {\n setForcedState('focus');\n }}\n onBlur={() => {\n setForcedState(null);\n if (showOptions && optionList.length === 0 && !emptyOptionsHint) {\n toggleListVisibility();\n }\n }}\n data-qa=\"magritte-select-activator-input\"\n placeholder={selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel}\n autoComplete=\"off\"\n />\n </div>\n )}\n {isMobile && (\n <SelectBottomSheet\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n error={error}\n height={searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight}\n visible={Boolean(showOptions || internalLoading)}\n value={values}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\n type={type}\n loading={loading || internalLoading}\n searchable={_searchable}\n useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n initialValuesOnOpening={initialValuesOnOpening}\n renderItem={renderMobileItem}\n renderAlertOnExitWithoutSaving={renderAlertOnExitWithoutSaving}\n renderButtonsContainer={renderButtonsContainer}\n renderHeader={renderHeader}\n headerTitle={_headerTitle || triggerLabel}\n optionList={optionList}\n optionsListRef={optionsListRefCallback}\n onChange={onChange}\n onClose={onOptionsListClose}\n searchValue={searchValue}\n setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n setSelectedValues={setSelectedValues}\n onBottomSheetClose={onBottomSheetClose}\n onBottomSheetOpen={onBottomSheetOpen}\n onSearchSubmit={onSearchSubmit}\n onApply={onApply}\n onClear={onClear}\n emptyOptionsHint={emptyOptionsHint}\n emptyOptionsSearchHint={emptyOptionsSearchHint}\n searchInProgress={searchInProgress}\n internalError={internalError}\n reload={reload}\n innerErrorTrls={innerErrorTrls}\n optionDataQa={optionDataQa}\n />\n )}\n {!isMobile && (\n <SelectDrop\n activatorRef={activatorRef}\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\n maxWidth={maxWidth}\n type={type}\n loading={loading || internalLoading}\n useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n onClose={onOptionsListClose}\n renderItem={renderDesktopItem}\n renderButtonsContainer={renderButtonsContainer}\n plain={plain}\n optionList={optionList}\n optionsListRef={optionsListRefCallback}\n value={values}\n onChange={onChange}\n searchValue={searchValue}\n searchable={searchable}\n forceDropVisibleWithEmptyOptions={forceDropVisibleWithEmptyOptions || internalLoading}\n setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n visible={!error && (showOptions || internalLoading)}\n widthEqualToActivator={widthEqualToActivator}\n renderContentBefore={renderContentBefore}\n setForcedState={setForcedState}\n setSelectedValues={setSelectedValues}\n maxHeight={maxHeight}\n onDropOpen={onDropOpen}\n onDropClose={onDropClose}\n onApply={onApply}\n onClear={onClear}\n emptyOptionsHint={emptyOptionsHint}\n emptyOptionsSearchHint={emptyOptionsSearchHint}\n searchInProgress={searchInProgress}\n internalError={internalError}\n reload={reload}\n innerErrorTrls={innerErrorTrls}\n optionDataQa={optionDataQa}\n />\n )}\n </>\n );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
package/SelectBottomSheet.js
CHANGED
|
@@ -23,7 +23,7 @@ import '@hh.ru/magritte-ui-typography';
|
|
|
23
23
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
24
24
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
25
25
|
|
|
26
|
-
var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_10-
|
|
26
|
+
var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_10-4-1","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_10-4-1","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_10-4-1","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_10-4-1","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_10-4-1","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_10-4-1","full-screen-placeholder":"magritte-full-screen-placeholder___zPC8k_10-4-1","fullScreenPlaceholder":"magritte-full-screen-placeholder___zPC8k_10-4-1","error-wrapper":"magritte-error-wrapper___P7jYg_10-4-1","errorWrapper":"magritte-error-wrapper___P7jYg_10-4-1"};
|
|
27
27
|
|
|
28
28
|
const SelectOptionDefault = ({ data, input, type, }) => {
|
|
29
29
|
if (type === 'delimiter') {
|
package/SelectDrop.js
CHANGED
|
@@ -19,7 +19,7 @@ import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
|
19
19
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
20
20
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
21
21
|
|
|
22
|
-
var styles = {"select-drop-container-wrapper":"magritte-select-drop-container-wrapper___OHM0q_10-
|
|
22
|
+
var styles = {"select-drop-container-wrapper":"magritte-select-drop-container-wrapper___OHM0q_10-4-1","selectDropContainerWrapper":"magritte-select-drop-container-wrapper___OHM0q_10-4-1","select-drop-container":"magritte-select-drop-container___hee1p_10-4-1","selectDropContainer":"magritte-select-drop-container___hee1p_10-4-1","select-drop-container_plain":"magritte-select-drop-container_plain___766zl_10-4-1","selectDropContainerPlain":"magritte-select-drop-container_plain___766zl_10-4-1","select-drop":"magritte-select-drop___jn4O-_10-4-1","selectDrop":"magritte-select-drop___jn4O-_10-4-1","select-drop-header":"magritte-select-drop-header___fMmio_10-4-1","selectDropHeader":"magritte-select-drop-header___fMmio_10-4-1","select-drop_plain":"magritte-select-drop_plain___VL8Fz_10-4-1","selectDropPlain":"magritte-select-drop_plain___VL8Fz_10-4-1","label-option-plain":"magritte-label-option-plain___BvBH8_10-4-1","labelOptionPlain":"magritte-label-option-plain___BvBH8_10-4-1","loading":"magritte-loading___AMiuq_10-4-1","hint":"magritte-hint___6qaFl_10-4-1"};
|
|
23
23
|
|
|
24
24
|
const SelectOptionDefault = ({ data, input, type, plain, }) => {
|
|
25
25
|
if (type === 'delimiter') {
|
package/SelectEmptyHint.js
CHANGED
|
@@ -6,7 +6,7 @@ import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
|
6
6
|
import { Title } from '@hh.ru/magritte-ui-title';
|
|
7
7
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
8
8
|
|
|
9
|
-
var styles = {"select-empty-hint":"magritte-select-empty-hint___B39XJ_10-
|
|
9
|
+
var styles = {"select-empty-hint":"magritte-select-empty-hint___B39XJ_10-4-1","selectEmptyHint":"magritte-select-empty-hint___B39XJ_10-4-1","icon":"magritte-icon___F0GQx_10-4-1","icon-init":"magritte-icon-init___GWK-V_10-4-1","iconInit":"magritte-icon-init___GWK-V_10-4-1","icon-search":"magritte-icon-search___ZsqO-_10-4-1","iconSearch":"magritte-icon-search___ZsqO-_10-4-1"};
|
|
10
10
|
|
|
11
11
|
const SelectEmptyHint = ({ title, titleElement, description, type }) => {
|
|
12
12
|
return (jsxs("div", { className: styles.selectEmptyHint, children: [type === 'init' && (jsx("div", { className: classnames(styles.icon, styles.iconInit), children: jsx(MagnifierOutlinedSize24, {}) })), type === 'emptySearch' && (jsx("div", { className: classnames(styles.icon, styles.iconSearch), children: jsx(EmojiHalfsadOutlinedSize24, {}) })), jsx(VSpacing, { default: 32 }), jsx(Title, { Element: titleElement, size: "small", children: title }), jsx(VSpacing, { default: 8 }), Boolean(description) && (jsx(Text, { typography: "paragraph-2-regular", style: "secondary", children: description }))] }));
|
package/SelectError.js
CHANGED
|
@@ -7,7 +7,7 @@ import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
|
7
7
|
import { Title } from '@hh.ru/magritte-ui-title';
|
|
8
8
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
9
9
|
|
|
10
|
-
var styles = {"error-container":"magritte-error-container___t9B5w_10-
|
|
10
|
+
var styles = {"error-container":"magritte-error-container___t9B5w_10-4-1","errorContainer":"magritte-error-container___t9B5w_10-4-1"};
|
|
11
11
|
|
|
12
12
|
const SelectError = ({ innerErrorTrls, reload, }) => {
|
|
13
13
|
const { isMobile } = useBreakpoint();
|
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_10-
|
|
12
|
+
var styles = {"select-option-label":"magritte-select-option-label___bYo2l_10-4-1","selectOptionLabel":"magritte-select-option-label___bYo2l_10-4-1","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_10-4-1","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_10-4-1","select-delimiter":"magritte-select-delimiter___WyeR6_10-4-1","selectDelimiter":"magritte-select-delimiter___WyeR6_10-4-1"};
|
|
13
13
|
|
|
14
14
|
const CheckableComponent = ({ type, value, checked, name, onChange, 'data-qa': dataQa, }) => {
|
|
15
15
|
if (type === 'label') {
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.magritte-error-container___t9B5w_10-
|
|
1
|
+
.magritte-error-container___t9B5w_10-4-1{
|
|
2
2
|
display:flex;
|
|
3
3
|
flex-direction:column;
|
|
4
4
|
align-items:center;
|
|
@@ -6,96 +6,96 @@
|
|
|
6
6
|
justify-content:center;
|
|
7
7
|
}
|
|
8
8
|
@media (min-width: 1020px){
|
|
9
|
-
body.magritte-old-layout .magritte-error-container___t9B5w_10-
|
|
9
|
+
body.magritte-old-layout .magritte-error-container___t9B5w_10-4-1{
|
|
10
10
|
min-height:320px;
|
|
11
11
|
height:auto;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
@media (min-width: 1024px){
|
|
15
|
-
body:not(.magritte-old-layout) .magritte-error-container___t9B5w_10-
|
|
15
|
+
body:not(.magritte-old-layout) .magritte-error-container___t9B5w_10-4-1{
|
|
16
16
|
min-height:320px;
|
|
17
17
|
height:auto;
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.magritte-select-option-label___bYo2l_10-
|
|
21
|
+
.magritte-select-option-label___bYo2l_10-4-1{
|
|
22
22
|
display:flex;
|
|
23
23
|
max-height:56px;
|
|
24
24
|
}
|
|
25
|
-
.magritte-select-option-label_desktop___bceen_10-
|
|
25
|
+
.magritte-select-option-label_desktop___bceen_10-4-1{
|
|
26
26
|
max-height:24px;
|
|
27
27
|
}
|
|
28
|
-
.magritte-select-delimiter___WyeR6_10-
|
|
28
|
+
.magritte-select-delimiter___WyeR6_10-4-1{
|
|
29
29
|
padding-left:16px;
|
|
30
30
|
padding-top:12px;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
:root{
|
|
34
|
-
--magritte-static-space-400-v21-
|
|
34
|
+
--magritte-static-space-400-v21-4-0:16px;
|
|
35
35
|
}
|
|
36
|
-
.magritte-select-bottom-sheet___1RZDJ_10-
|
|
36
|
+
.magritte-select-bottom-sheet___1RZDJ_10-4-1{
|
|
37
37
|
display:flex;
|
|
38
38
|
flex-direction:column;
|
|
39
|
-
padding:0 var(--magritte-static-space-400-v21-
|
|
39
|
+
padding:0 var(--magritte-static-space-400-v21-4-0);
|
|
40
40
|
padding-bottom:16px;
|
|
41
41
|
}
|
|
42
|
-
.magritte-select-bottom-sheet_checkbox___hwTgo_10-
|
|
43
|
-
.magritte-select-bottom-sheet_radio___qvFFV_10-
|
|
42
|
+
.magritte-select-bottom-sheet_checkbox___hwTgo_10-4-1,
|
|
43
|
+
.magritte-select-bottom-sheet_radio___qvFFV_10-4-1{
|
|
44
44
|
gap:12px;
|
|
45
45
|
}
|
|
46
|
-
.magritte-full-screen-placeholder___zPC8k_10-
|
|
46
|
+
.magritte-full-screen-placeholder___zPC8k_10-4-1{
|
|
47
47
|
display:flex;
|
|
48
48
|
flex-direction:column;
|
|
49
49
|
align-items:center;
|
|
50
50
|
height:100%;
|
|
51
51
|
justify-content:center;
|
|
52
52
|
}
|
|
53
|
-
.magritte-error-wrapper___P7jYg_10-
|
|
53
|
+
.magritte-error-wrapper___P7jYg_10-4-1{
|
|
54
54
|
height:100%;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
:root{
|
|
58
|
-
--magritte-static-space-300-v21-
|
|
59
|
-
--magritte-static-space-600-v21-
|
|
58
|
+
--magritte-static-space-300-v21-4-0:12px;
|
|
59
|
+
--magritte-static-space-600-v21-4-0:24px;
|
|
60
60
|
}
|
|
61
|
-
.magritte-select-drop-container-wrapper___OHM0q_10-
|
|
61
|
+
.magritte-select-drop-container-wrapper___OHM0q_10-4-1{
|
|
62
62
|
display:flex;
|
|
63
63
|
flex-direction:column;
|
|
64
64
|
}
|
|
65
|
-
.magritte-select-drop-container___hee1p_10-
|
|
65
|
+
.magritte-select-drop-container___hee1p_10-4-1{
|
|
66
66
|
display:flex;
|
|
67
67
|
flex-direction:column;
|
|
68
|
-
padding:var(--magritte-static-space-300-v21-
|
|
69
|
-
margin:calc(-1 * var(--magritte-static-space-300-v21-
|
|
68
|
+
padding:var(--magritte-static-space-300-v21-4-0);
|
|
69
|
+
margin:calc(-1 * var(--magritte-static-space-300-v21-4-0));
|
|
70
70
|
}
|
|
71
|
-
.magritte-select-drop-container_plain___766zl_10-
|
|
72
|
-
padding:var(--magritte-static-space-600-v21-
|
|
73
|
-
margin:calc(-1 * var(--magritte-static-space-600-v21-
|
|
71
|
+
.magritte-select-drop-container_plain___766zl_10-4-1{
|
|
72
|
+
padding:var(--magritte-static-space-600-v21-4-0);
|
|
73
|
+
margin:calc(-1 * var(--magritte-static-space-600-v21-4-0));
|
|
74
74
|
}
|
|
75
|
-
.magritte-select-drop___jn4O-_10-
|
|
75
|
+
.magritte-select-drop___jn4O-_10-4-1{
|
|
76
76
|
display:flex;
|
|
77
77
|
flex-direction:column;
|
|
78
78
|
gap:8px;
|
|
79
79
|
}
|
|
80
|
-
.magritte-select-drop-header___fMmio_10-
|
|
80
|
+
.magritte-select-drop-header___fMmio_10-4-1{
|
|
81
81
|
display:flex;
|
|
82
82
|
flex-direction:column;
|
|
83
83
|
margin-bottom:8px;
|
|
84
84
|
}
|
|
85
|
-
.magritte-select-drop_plain___VL8Fz_10-
|
|
85
|
+
.magritte-select-drop_plain___VL8Fz_10-4-1{
|
|
86
86
|
gap:16px;
|
|
87
87
|
}
|
|
88
|
-
.magritte-label-option-plain___BvBH8_10-
|
|
88
|
+
.magritte-label-option-plain___BvBH8_10-4-1{
|
|
89
89
|
display:flex;
|
|
90
90
|
justify-content:center;
|
|
91
91
|
}
|
|
92
|
-
.magritte-loading___AMiuq_10-
|
|
92
|
+
.magritte-loading___AMiuq_10-4-1{
|
|
93
93
|
display:flex;
|
|
94
94
|
align-items:center;
|
|
95
95
|
height:150px;
|
|
96
96
|
justify-content:center;
|
|
97
97
|
}
|
|
98
|
-
.magritte-hint___6qaFl_10-
|
|
98
|
+
.magritte-hint___6qaFl_10-4-1{
|
|
99
99
|
display:flex;
|
|
100
100
|
flex-direction:column;
|
|
101
101
|
align-items:center;
|
|
@@ -104,25 +104,25 @@
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
:root{
|
|
107
|
-
--magritte-color-background-secondary-v21-
|
|
108
|
-
--magritte-color-background-accent-secondary-v21-
|
|
109
|
-
--magritte-color-icon-tertiary-v21-
|
|
110
|
-
--magritte-color-icon-accent-v21-
|
|
107
|
+
--magritte-color-background-secondary-v21-4-0:#F1F4F9;
|
|
108
|
+
--magritte-color-background-accent-secondary-v21-4-0:#EDF6FF;
|
|
109
|
+
--magritte-color-icon-tertiary-v21-4-0:#AABBCA;
|
|
110
|
+
--magritte-color-icon-accent-v21-4-0:#0070ff;
|
|
111
111
|
}
|
|
112
112
|
.magritte-night-theme{
|
|
113
|
-
--magritte-color-background-secondary-v21-
|
|
114
|
-
--magritte-color-background-accent-secondary-v21-
|
|
115
|
-
--magritte-color-icon-tertiary-v21-
|
|
116
|
-
--magritte-color-icon-accent-v21-
|
|
113
|
+
--magritte-color-background-secondary-v21-4-0:#303030;
|
|
114
|
+
--magritte-color-background-accent-secondary-v21-4-0:#222D3D;
|
|
115
|
+
--magritte-color-icon-tertiary-v21-4-0:#767676;
|
|
116
|
+
--magritte-color-icon-accent-v21-4-0:#5e9eff;
|
|
117
117
|
}
|
|
118
|
-
.magritte-select-empty-hint___B39XJ_10-
|
|
118
|
+
.magritte-select-empty-hint___B39XJ_10-4-1{
|
|
119
119
|
display:flex;
|
|
120
120
|
flex-direction:column;
|
|
121
121
|
justify-content:center;
|
|
122
122
|
align-content:center;
|
|
123
123
|
align-items:center;
|
|
124
124
|
}
|
|
125
|
-
.magritte-icon___F0GQx_10-
|
|
125
|
+
.magritte-icon___F0GQx_10-4-1{
|
|
126
126
|
display:flex;
|
|
127
127
|
align-items:center;
|
|
128
128
|
justify-content:center;
|
|
@@ -130,11 +130,11 @@
|
|
|
130
130
|
height:48px;
|
|
131
131
|
border-radius:50%;
|
|
132
132
|
}
|
|
133
|
-
.magritte-icon-init___GWK-V_10-
|
|
134
|
-
background-color:var(--magritte-color-background-accent-secondary-v21-
|
|
135
|
-
--magritte-ui-icon-color-override:var(--magritte-color-icon-accent-v21-
|
|
133
|
+
.magritte-icon-init___GWK-V_10-4-1{
|
|
134
|
+
background-color:var(--magritte-color-background-accent-secondary-v21-4-0);
|
|
135
|
+
--magritte-ui-icon-color-override:var(--magritte-color-icon-accent-v21-4-0);
|
|
136
136
|
}
|
|
137
|
-
.magritte-icon-search___ZsqO-_10-
|
|
138
|
-
background-color:var(--magritte-color-background-secondary-v21-
|
|
139
|
-
--magritte-ui-icon-color-override:var(--magritte-color-icon-tertiary-v21-
|
|
137
|
+
.magritte-icon-search___ZsqO-_10-4-1{
|
|
138
|
+
background-color:var(--magritte-color-background-secondary-v21-4-0);
|
|
139
|
+
--magritte-ui-icon-color-override:var(--magritte-color-icon-tertiary-v21-4-0);
|
|
140
140
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-select",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.4.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -31,24 +31,24 @@
|
|
|
31
31
|
"@hh.ru/magritte-common-fuzzy-search": "1.0.5",
|
|
32
32
|
"@hh.ru/magritte-common-keyboard": "4.1.0",
|
|
33
33
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.5",
|
|
34
|
-
"@hh.ru/magritte-ui-action-bar": "3.0.
|
|
35
|
-
"@hh.ru/magritte-ui-bottom-sheet": "7.1.
|
|
34
|
+
"@hh.ru/magritte-ui-action-bar": "3.0.11",
|
|
35
|
+
"@hh.ru/magritte-ui-bottom-sheet": "7.1.10",
|
|
36
36
|
"@hh.ru/magritte-ui-breakpoint": "5.0.0",
|
|
37
|
-
"@hh.ru/magritte-ui-button": "5.3.
|
|
38
|
-
"@hh.ru/magritte-ui-button-stack": "2.1.
|
|
39
|
-
"@hh.ru/magritte-ui-cell": "4.2.
|
|
40
|
-
"@hh.ru/magritte-ui-checkable-card": "3.0.
|
|
41
|
-
"@hh.ru/magritte-ui-checkbox-radio": "3.0.
|
|
42
|
-
"@hh.ru/magritte-ui-drop": "8.0.
|
|
43
|
-
"@hh.ru/magritte-ui-icon": "10.2.
|
|
44
|
-
"@hh.ru/magritte-ui-input": "7.2.
|
|
45
|
-
"@hh.ru/magritte-ui-loader": "1.3.
|
|
46
|
-
"@hh.ru/magritte-ui-navigation-bar": "9.0.
|
|
47
|
-
"@hh.ru/magritte-ui-spacing": "2.0.
|
|
48
|
-
"@hh.ru/magritte-ui-theme-provider": "1.1.
|
|
49
|
-
"@hh.ru/magritte-ui-title": "6.1.
|
|
50
|
-
"@hh.ru/magritte-ui-trigger": "3.1.
|
|
51
|
-
"@hh.ru/magritte-ui-typography": "3.0.
|
|
37
|
+
"@hh.ru/magritte-ui-button": "5.3.1",
|
|
38
|
+
"@hh.ru/magritte-ui-button-stack": "2.1.51",
|
|
39
|
+
"@hh.ru/magritte-ui-cell": "4.2.2",
|
|
40
|
+
"@hh.ru/magritte-ui-checkable-card": "3.0.80",
|
|
41
|
+
"@hh.ru/magritte-ui-checkbox-radio": "3.0.46",
|
|
42
|
+
"@hh.ru/magritte-ui-drop": "8.0.5",
|
|
43
|
+
"@hh.ru/magritte-ui-icon": "10.2.1",
|
|
44
|
+
"@hh.ru/magritte-ui-input": "7.2.3",
|
|
45
|
+
"@hh.ru/magritte-ui-loader": "1.3.28",
|
|
46
|
+
"@hh.ru/magritte-ui-navigation-bar": "9.0.3",
|
|
47
|
+
"@hh.ru/magritte-ui-spacing": "2.0.45",
|
|
48
|
+
"@hh.ru/magritte-ui-theme-provider": "1.1.42",
|
|
49
|
+
"@hh.ru/magritte-ui-title": "6.1.6",
|
|
50
|
+
"@hh.ru/magritte-ui-trigger": "3.1.2",
|
|
51
|
+
"@hh.ru/magritte-ui-typography": "3.0.33"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "7ba02d5feb5c5dc67ba5aef9f921c5cf104fb698"
|
|
54
54
|
}
|
package/useSelectSearch.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { DataProvider, StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
2
2
|
import { OnOptionsChangeCallback, UseSelectSearch } from '@hh.ru/magritte-ui-select/types';
|
|
3
|
-
export declare const useSelectSearch: <DataType extends StaticDataFetcherItem>(visible: boolean, selectedValues: DataType[], dataProvider: DataProvider<DataType>, onOptionsChangeExternal?: OnOptionsChangeCallback<DataType
|
|
3
|
+
export declare const useSelectSearch: <DataType extends StaticDataFetcherItem>(visible: boolean, selectedValues: DataType[], dataProvider: DataProvider<DataType>, onOptionsChangeExternal?: OnOptionsChangeCallback<DataType>) => UseSelectSearch<DataType>;
|
package/useSelectSearch.js
CHANGED
|
@@ -2,12 +2,10 @@ import './index.css';
|
|
|
2
2
|
import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
|
|
3
3
|
import { DataProviderError } from '@hh.ru/magritte-common-data-provider';
|
|
4
4
|
|
|
5
|
-
const useSelectSearch = (visible, selectedValues, dataProvider, onOptionsChangeExternal
|
|
5
|
+
const useSelectSearch = (visible, selectedValues, dataProvider, onOptionsChangeExternal) => {
|
|
6
6
|
const [searchValue, setSearchValue] = useState('');
|
|
7
7
|
const [providerOptionList, setProviderOptionList] = useState([]);
|
|
8
8
|
const [providerOptionListReady, setProviderOptionListReady] = useState(false);
|
|
9
|
-
const [initOptionList, setInitOptionList] = useState([]);
|
|
10
|
-
const [initOptionListReady, setInitOptionListReady] = useState(false);
|
|
11
9
|
const dataProviderOptionsRef = useRef([]);
|
|
12
10
|
const emptyResultListRef = useRef([]);
|
|
13
11
|
const resultListRef = useRef(emptyResultListRef.current);
|
|
@@ -20,9 +18,11 @@ const useSelectSearch = (visible, selectedValues, dataProvider, onOptionsChangeE
|
|
|
20
18
|
const currentRequestRef = useRef();
|
|
21
19
|
const loadingTimeoutRef = useRef(0);
|
|
22
20
|
const inProgressTimeoutRef = useRef(0);
|
|
23
|
-
const updateOptionsFromProvider = useCallback((text) => {
|
|
21
|
+
const updateOptionsFromProvider = useCallback((text, recalcSearchState = true) => {
|
|
24
22
|
setInternalError(false);
|
|
25
|
-
|
|
23
|
+
if (recalcSearchState) {
|
|
24
|
+
setSearchInProgress(true);
|
|
25
|
+
}
|
|
26
26
|
clearTimeout(inProgressTimeoutRef.current);
|
|
27
27
|
// по спеке лоудер на получение данных показывается, если запрос занимает более 1 секунды
|
|
28
28
|
const lastLoadingTimeout = setTimeout(() => {
|
|
@@ -78,36 +78,11 @@ const useSelectSearch = (visible, selectedValues, dataProvider, onOptionsChangeE
|
|
|
78
78
|
setProviderOptionListReady(true);
|
|
79
79
|
});
|
|
80
80
|
}, [dataProvider]);
|
|
81
|
-
|
|
82
|
-
if (addOnly) {
|
|
83
|
-
const addInitOptions = selectedValues
|
|
84
|
-
.filter((selected) => !initOptionList.find((exist) => exist.data.value === selected.value))
|
|
85
|
-
.map((item) => ({ data: item }));
|
|
86
|
-
const newInitOptionsList = [...initOptionList, ...addInitOptions];
|
|
87
|
-
setInitOptionList(newInitOptionsList);
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
const newInitOptionsList = selectedValues.map((item) => ({ data: item }));
|
|
91
|
-
setInitOptionList(newInitOptionsList);
|
|
92
|
-
}
|
|
93
|
-
setInitOptionListReady(true);
|
|
94
|
-
}, [selectedValues, initOptionList]);
|
|
95
|
-
// формируем итоговый список, после того, как сформировали списки из провайдера и из выбранных опций
|
|
96
|
-
// это нужно, чтобы список не прыгал
|
|
97
|
-
// если у нас есть выбранные значения, которых нет в данных провайдера, то мы их подмешиваем в начало списка
|
|
98
|
-
// если итоговый список состоит только из разделителей, то считаем, что список пустой
|
|
81
|
+
// формируем итоговый список
|
|
99
82
|
const optionList = useMemo(() => {
|
|
100
83
|
let resultList = emptyResultListRef.current;
|
|
101
|
-
if (providerOptionListReady
|
|
102
|
-
|
|
103
|
-
resultList = [
|
|
104
|
-
...initOptionList.filter((selected) => !providerOptionList.find((provided) => provided.data.value === selected.data.value)),
|
|
105
|
-
...providerOptionList,
|
|
106
|
-
];
|
|
107
|
-
}
|
|
108
|
-
else {
|
|
109
|
-
resultList = providerOptionList;
|
|
110
|
-
}
|
|
84
|
+
if (providerOptionListReady) {
|
|
85
|
+
resultList = providerOptionList;
|
|
111
86
|
if (resultList.every((item) => item.type === 'delimiter')) {
|
|
112
87
|
resultList = emptyResultListRef.current;
|
|
113
88
|
}
|
|
@@ -118,23 +93,25 @@ const useSelectSearch = (visible, selectedValues, dataProvider, onOptionsChangeE
|
|
|
118
93
|
}
|
|
119
94
|
return resultListRef.current;
|
|
120
95
|
// eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
|
|
121
|
-
}, [providerOptionList, providerOptionListReady
|
|
96
|
+
}, [providerOptionList, providerOptionListReady]);
|
|
97
|
+
// сбрасываем select при закрытии компонента
|
|
122
98
|
useEffect(() => {
|
|
123
99
|
if (!visible) {
|
|
124
100
|
setSearchValue('');
|
|
125
|
-
|
|
126
|
-
updateOptionsFromProvider('');
|
|
101
|
+
updateOptionsFromProvider('', false);
|
|
127
102
|
}
|
|
128
103
|
// eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
|
|
129
104
|
}, [visible]);
|
|
105
|
+
// обрабатываем поиск
|
|
130
106
|
useEffect(() => {
|
|
131
107
|
updateOptionsFromProvider(searchValue);
|
|
132
108
|
// eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
|
|
133
|
-
}, [searchValue
|
|
109
|
+
}, [searchValue]);
|
|
110
|
+
// обрабатываем обновление провайдера из клиента
|
|
134
111
|
useEffect(() => {
|
|
135
|
-
|
|
112
|
+
updateOptionsFromProvider(searchValue, false);
|
|
136
113
|
// eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
|
|
137
|
-
}, [
|
|
114
|
+
}, [dataProvider]);
|
|
138
115
|
const reload = useCallback(() => {
|
|
139
116
|
setOptionsLoading(true);
|
|
140
117
|
updateOptionsFromProvider(searchValue);
|
package/useSelectSearch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectSearch.js","sources":["../src/useSelectSearch.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { DataProvider, StaticDataFetcherItem, DataProviderError } from '@hh.ru/magritte-common-data-provider';\nimport { DataProviderRequest } from '@hh.ru/magritte-common-data-provider/types';\nimport { OnOptionsChangeCallback, SelectOption, UseSelectSearch } from '@hh.ru/magritte-ui-select/types';\n\nexport const useSelectSearch = <DataType extends StaticDataFetcherItem>(\n visible: boolean,\n selectedValues: DataType[],\n dataProvider: DataProvider<DataType>,\n onOptionsChangeExternal?: OnOptionsChangeCallback<DataType>,\n multiple?: boolean\n): UseSelectSearch<DataType> => {\n const [searchValue, setSearchValue] = useState('');\n const [providerOptionList, setProviderOptionList] = useState<SelectOption<DataType>[]>([]);\n const [providerOptionListReady, setProviderOptionListReady] = useState(false);\n const [initOptionList, setInitOptionList] = useState<SelectOption<DataType>[]>([]);\n const [initOptionListReady, setInitOptionListReady] = useState(false);\n const dataProviderOptionsRef = useRef<SelectOption<DataType>[]>([]);\n const emptyResultListRef = useRef<SelectOption<DataType>[]>([]);\n const resultListRef = useRef<SelectOption<DataType>[]>(emptyResultListRef.current);\n const [internalError, setInternalError] = useState(false);\n // для отображения лоадера\n const [optionsLoading, setOptionsLoading] = useState(false);\n\n // для понимания что сейчас идет поиск, даже если лоадер не показывается\n // чтобы не выводить emptyOptionsSearchHint\n const [searchInProgress, setSearchInProgress] = useState(false);\n const currentRequestRef = useRef<DataProviderRequest>();\n\n const loadingTimeoutRef = useRef<number>(0);\n const inProgressTimeoutRef = useRef<number>(0);\n\n const updateOptionsFromProvider = useCallback(\n (text: string) => {\n setInternalError(false);\n setSearchInProgress(true);\n clearTimeout(inProgressTimeoutRef.current);\n\n // по спеке лоудер на получение данных показывается, если запрос занимает более 1 секунды\n const lastLoadingTimeout = setTimeout(() => {\n if (lastLoadingTimeout === loadingTimeoutRef.current && currentRequestRef.current) {\n setOptionsLoading(true);\n }\n }, 1000) as unknown as number;\n loadingTimeoutRef.current = lastLoadingTimeout;\n\n currentRequestRef.current?.cancel();\n const request = dataProvider(text);\n currentRequestRef.current = request;\n request\n .then((result) => {\n currentRequestRef.current = undefined;\n const newOptions: SelectOption<DataType>[] = [];\n result.forEach((section) => {\n if (section.type === 'delimiter') {\n newOptions.push({\n type: 'delimiter',\n data: { value: section.text, text: section.text } as DataType,\n });\n }\n if (section.type === 'cells') {\n section.items.forEach((item) => {\n newOptions.push({\n data: item.data ? item.data : ({ text: item.value, value: item.value } as DataType),\n disabled: item.disabled,\n });\n });\n }\n });\n\n setProviderOptionList(newOptions);\n dataProviderOptionsRef.current = newOptions;\n })\n .catch((error) => {\n setProviderOptionList([]);\n dataProviderOptionsRef.current = [];\n // включаем error state если это НЕ ошибка, вызванная `minCharsCount` или отменненым запросом\n if (!(error instanceof DataProviderError)) {\n setInternalError(true);\n }\n })\n .finally(() => {\n // этот таймаут нужен, чтобы emptyOptionsSearchHint не мигал во время быстрого ввода,\n // если провайдер работает без дебаунса\n // без таймаута мы получает очень быстрое переключение состояния на каждый ввод буквы,\n // а так мы откладываем сброс признака searchInProgress до момента, когда пользователь завершит ввод\n\n inProgressTimeoutRef.current = setTimeout(() => {\n setSearchInProgress(false);\n }, 300) as unknown as number;\n clearTimeout(lastLoadingTimeout);\n setOptionsLoading(false);\n setProviderOptionListReady(true);\n });\n },\n [dataProvider]\n );\n\n const updateOptionsFromSelected = useCallback(\n (addOnly = false) => {\n if (addOnly) {\n const addInitOptions = selectedValues\n .filter((selected) => !initOptionList.find((exist) => exist.data.value === selected.value))\n .map((item) => ({ data: item }));\n const newInitOptionsList = [...initOptionList, ...addInitOptions];\n setInitOptionList(newInitOptionsList);\n } else {\n const newInitOptionsList = selectedValues.map((item) => ({ data: item }));\n setInitOptionList(newInitOptionsList);\n }\n setInitOptionListReady(true);\n },\n [selectedValues, initOptionList]\n );\n\n // формируем итоговый список, после того, как сформировали списки из провайдера и из выбранных опций\n // это нужно, чтобы список не прыгал\n // если у нас есть выбранные значения, которых нет в данных провайдера, то мы их подмешиваем в начало списка\n // если итоговый список состоит только из разделителей, то считаем, что список пустой\n const optionList = useMemo(() => {\n let resultList: SelectOption<DataType>[] = emptyResultListRef.current;\n if (providerOptionListReady && initOptionListReady) {\n if (!searchValue) {\n resultList = [\n ...initOptionList.filter(\n (selected) =>\n !providerOptionList.find((provided) => provided.data.value === selected.data.value)\n ),\n ...providerOptionList,\n ];\n } else {\n resultList = providerOptionList;\n }\n if (resultList.every((item) => item.type === 'delimiter')) {\n resultList = emptyResultListRef.current;\n }\n }\n if (resultListRef.current !== resultList) {\n resultListRef.current = resultList;\n onOptionsChangeExternal?.(resultList);\n }\n\n return resultListRef.current;\n\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [providerOptionList, providerOptionListReady, initOptionList, initOptionListReady]);\n\n useEffect(() => {\n if (!visible) {\n setSearchValue('');\n updateOptionsFromSelected();\n updateOptionsFromProvider('');\n }\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [visible]);\n\n useEffect(() => {\n updateOptionsFromProvider(searchValue);\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [searchValue, dataProvider]);\n\n useEffect(() => {\n updateOptionsFromSelected(multiple);\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [selectedValues]);\n\n const reload = useCallback(() => {\n setOptionsLoading(true);\n updateOptionsFromProvider(searchValue);\n }, [updateOptionsFromProvider, searchValue]);\n\n return {\n optionList,\n searchValue,\n setSearchValue,\n internalLoading: optionsLoading && visible,\n searchInProgress,\n internalError,\n reload,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSelectSearch.js","sources":["../src/useSelectSearch.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { DataProvider, StaticDataFetcherItem, DataProviderError } from '@hh.ru/magritte-common-data-provider';\nimport { DataProviderRequest } from '@hh.ru/magritte-common-data-provider/types';\nimport { OnOptionsChangeCallback, SelectOption, UseSelectSearch } from '@hh.ru/magritte-ui-select/types';\n\nexport const useSelectSearch = <DataType extends StaticDataFetcherItem>(\n visible: boolean,\n selectedValues: DataType[],\n dataProvider: DataProvider<DataType>,\n onOptionsChangeExternal?: OnOptionsChangeCallback<DataType>\n): UseSelectSearch<DataType> => {\n const [searchValue, setSearchValue] = useState('');\n const [providerOptionList, setProviderOptionList] = useState<SelectOption<DataType>[]>([]);\n const [providerOptionListReady, setProviderOptionListReady] = useState(false);\n const dataProviderOptionsRef = useRef<SelectOption<DataType>[]>([]);\n const emptyResultListRef = useRef<SelectOption<DataType>[]>([]);\n const resultListRef = useRef<SelectOption<DataType>[]>(emptyResultListRef.current);\n const [internalError, setInternalError] = useState(false);\n // для отображения лоадера\n const [optionsLoading, setOptionsLoading] = useState(false);\n\n // для понимания что сейчас идет поиск, даже если лоадер не показывается\n // чтобы не выводить emptyOptionsSearchHint\n const [searchInProgress, setSearchInProgress] = useState(false);\n const currentRequestRef = useRef<DataProviderRequest>();\n\n const loadingTimeoutRef = useRef<number>(0);\n const inProgressTimeoutRef = useRef<number>(0);\n\n const updateOptionsFromProvider = useCallback(\n (text: string, recalcSearchState = true) => {\n setInternalError(false);\n if (recalcSearchState) {\n setSearchInProgress(true);\n }\n clearTimeout(inProgressTimeoutRef.current);\n\n // по спеке лоудер на получение данных показывается, если запрос занимает более 1 секунды\n const lastLoadingTimeout = setTimeout(() => {\n if (lastLoadingTimeout === loadingTimeoutRef.current && currentRequestRef.current) {\n setOptionsLoading(true);\n }\n }, 1000) as unknown as number;\n loadingTimeoutRef.current = lastLoadingTimeout;\n\n currentRequestRef.current?.cancel();\n const request = dataProvider(text);\n currentRequestRef.current = request;\n request\n .then((result) => {\n currentRequestRef.current = undefined;\n const newOptions: SelectOption<DataType>[] = [];\n result.forEach((section) => {\n if (section.type === 'delimiter') {\n newOptions.push({\n type: 'delimiter',\n data: { value: section.text, text: section.text } as DataType,\n });\n }\n if (section.type === 'cells') {\n section.items.forEach((item) => {\n newOptions.push({\n data: item.data ? item.data : ({ text: item.value, value: item.value } as DataType),\n disabled: item.disabled,\n });\n });\n }\n });\n\n setProviderOptionList(newOptions);\n dataProviderOptionsRef.current = newOptions;\n })\n .catch((error) => {\n setProviderOptionList([]);\n dataProviderOptionsRef.current = [];\n // включаем error state если это НЕ ошибка, вызванная `minCharsCount` или отменненым запросом\n if (!(error instanceof DataProviderError)) {\n setInternalError(true);\n }\n })\n .finally(() => {\n // этот таймаут нужен, чтобы emptyOptionsSearchHint не мигал во время быстрого ввода,\n // если провайдер работает без дебаунса\n // без таймаута мы получает очень быстрое переключение состояния на каждый ввод буквы,\n // а так мы откладываем сброс признака searchInProgress до момента, когда пользователь завершит ввод\n\n inProgressTimeoutRef.current = setTimeout(() => {\n setSearchInProgress(false);\n }, 300) as unknown as number;\n clearTimeout(lastLoadingTimeout);\n setOptionsLoading(false);\n setProviderOptionListReady(true);\n });\n },\n [dataProvider]\n );\n\n // формируем итоговый список\n const optionList = useMemo(() => {\n let resultList: SelectOption<DataType>[] = emptyResultListRef.current;\n if (providerOptionListReady) {\n resultList = providerOptionList;\n if (resultList.every((item) => item.type === 'delimiter')) {\n resultList = emptyResultListRef.current;\n }\n }\n if (resultListRef.current !== resultList) {\n resultListRef.current = resultList;\n onOptionsChangeExternal?.(resultList);\n }\n return resultListRef.current;\n\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [providerOptionList, providerOptionListReady]);\n\n // сбрасываем select при закрытии компонента\n useEffect(() => {\n if (!visible) {\n setSearchValue('');\n updateOptionsFromProvider('', false);\n }\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [visible]);\n\n // обрабатываем поиск\n useEffect(() => {\n updateOptionsFromProvider(searchValue);\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [searchValue]);\n\n // обрабатываем обновление провайдера из клиента\n useEffect(() => {\n updateOptionsFromProvider(searchValue, false);\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [dataProvider]);\n\n const reload = useCallback(() => {\n setOptionsLoading(true);\n updateOptionsFromProvider(searchValue);\n }, [updateOptionsFromProvider, searchValue]);\n\n return {\n optionList,\n searchValue,\n setSearchValue,\n internalLoading: optionsLoading && visible,\n searchInProgress,\n internalError,\n reload,\n };\n};\n"],"names":[],"mappings":"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"}
|