@hh.ru/magritte-ui-select 8.4.1 → 8.5.0
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 -0
- package/Select.js.map +1 -1
- package/SelectBottomSheet.js +1 -1
- package/SelectDrop.js +1 -1
- package/SelectOption.js +1 -1
- package/index.css +13 -13
- package/package.json +2 -2
- package/types.d.ts +5 -3
- package/useSelectState.js +5 -2
- package/useSelectState.js.map +1 -1
package/Select.js
CHANGED
|
@@ -169,6 +169,7 @@ const Select = ({ type, options, multiple, value: _value, maxSelectedOptions, lo
|
|
|
169
169
|
},
|
|
170
170
|
'data-qa': dataQa,
|
|
171
171
|
setSearchValue,
|
|
172
|
+
optionsCount: optionList.length,
|
|
172
173
|
...triggerProps,
|
|
173
174
|
}), useSearchInput && (jsx("div", { style: inputWrapperStyles, children: jsx(BaseInput, { ...sizeProp, ref: inputRef, wrapperRef: activatorRef, value: searchValue, onChange: setSearchValue, onKeyDown: handleKeyDown, onBlur: () => {
|
|
174
175
|
setForcedState(null);
|
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 pickerRef,\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, pickerRef);\n const showedByFocus = useRef<boolean>(false);\n const isLimitExceeded =\n maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;\n const { size, stretched, label: triggerLabel, disabled } = triggerProps;\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n const inputWrapperStyles = stretched ? { with: '100%' } : { maxWidth: activatorRef.current?.offsetWidth };\n const searchable = _searchable && (size === 'large' || size === 'medium');\n const dataQa = triggerProps['data-qa'] || 'magritte-select-activator';\n\n useLayoutEffect(() => {\n if (searchable && !isMobile) {\n return;\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n if (forcedState === 'focus') {\n activatorRef.current?.focus();\n setForcedState?.(null);\n showedByFocus.current = false;\n }\n }\n if (!forcedState && !showOptions && prevVisibleRef.current) {\n onBlur?.();\n }\n prevVisibleRef.current = showOptions;\n }, [activatorRef, forcedState, isMobile, onBlur, searchable, setInitialValuesWithoutOnChange, showOptions]);\n\n useLayoutEffect(() => {\n if (!searchable || isMobile) {\n return;\n }\n if ((forcedState === 'focus' || forcedState === 'focusAndSelect') && useDefaultTrigger) {\n setUseSearchInput(true);\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n useLayoutEffect(() => {\n if (!useSearchInput || !inputRef.current) {\n return;\n }\n if (forcedState === 'focus') {\n inputRef.current.focus();\n }\n if (forcedState === 'focusAndSelect') {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n }\n if (!forcedState && !showOptions) {\n setUseSearchInput(false);\n if (prevVisibleRef.current) {\n onBlur?.();\n }\n }\n prevVisibleRef.current = showOptions;\n }, [forcedState, onBlur, setForcedState, useSearchInput, showOptions, setInitialValuesWithoutOnChange]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n showedByFocus.current = false;\n setForcedState('focus');\n toggleListVisibility();\n return;\n }\n\n // движение по списку опций\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n focusOptionsList(event, dropRef?.current, 'up');\n return;\n }\n\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n focusOptionsList(event, dropRef?.current, 'down');\n return;\n }\n\n // после закрытия пользователь решил что-то поделать опять\n if (\n !showOptions &&\n !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n ) {\n toggleListVisibility();\n }\n },\n [showOptions, toggleListVisibility]\n );\n\n return (\n <>\n {!useSearchInput &&\n renderTrigger({\n values: selectedLabels,\n expanded: showOptions,\n toggleExpanded: toggleListVisibility,\n onChange: () => {\n if (disabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRef,\n onKeyDown: handleKeyDown,\n onBlur: () => {\n setForcedState(null);\n if (showOptions && optionList.length === 0) {\n toggleListVisibility();\n }\n },\n onFocus: () => {\n if (disabled) {\n return;\n }\n if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n onFocus?.();\n setForcedState('focus');\n toggleListVisibility();\n }\n showedByFocus.current = true;\n },\n 'data-qa': dataQa,\n setSearchValue,\n ...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 {\n SelectProps,\n TriggerPropsWithRef,\n FocusStateType,\n SetSearchValue,\n OptionsCount,\n} from '@hh.ru/magritte-ui-select/types';\nimport { useSelectOptionsList } from '@hh.ru/magritte-ui-select/useSelectOptionsList';\nimport { useSelectSearch } from '@hh.ru/magritte-ui-select/useSelectSearch';\nimport { useSelectState } from '@hh.ru/magritte-ui-select/useSelectState';\nimport { Trigger } from '@hh.ru/magritte-ui-trigger';\n\nconst SelectTriggerDefault = (triggerProps: TriggerPropsWithRef): ReactElement => {\n return <Trigger {...triggerProps} />;\n};\n\nconst focusOptionsList = (event: SyntheticEvent, drop: HTMLElement | null | undefined, direction: 'up' | 'down') => {\n if (drop) {\n const nextFocusableElement = findNextFocusableElement(drop, null, direction, 'list');\n if (nextFocusableElement !== null) {\n event.preventDefault();\n nextFocusableElement.focus();\n }\n }\n};\n\nexport const Select = <MultipleType extends boolean, DataType>({\n type,\n options,\n multiple,\n value: _value,\n maxSelectedOptions,\n loading,\n error,\n searchable: _searchable,\n bottomSheetHeight = 'full-screen',\n onChange: onChangeHandler,\n renderTrigger = SelectTriggerDefault,\n triggerProps,\n renderMobileItem,\n renderDesktopItem,\n name,\n maxWidth,\n maxHeight = 460,\n useInitialValuesOnClearAction,\n renderAlertOnExitWithoutSaving,\n renderButtonsContainer,\n renderHeader,\n headerTitle: _headerTitle,\n clearButton,\n applyChangesButton,\n forceDropVisibleWithEmptyOptions,\n plain = false,\n widthEqualToActivator = true,\n renderContentBefore,\n onBlur,\n onFocus,\n onDropOpen,\n onDropClose,\n onBottomSheetClose,\n onBottomSheetOpen,\n onSearchSubmit,\n pickerRef,\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, pickerRef);\n const showedByFocus = useRef<boolean>(false);\n const isLimitExceeded =\n maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;\n const { size, stretched, label: triggerLabel, disabled } = triggerProps;\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n const inputWrapperStyles = stretched ? { with: '100%' } : { maxWidth: activatorRef.current?.offsetWidth };\n const searchable = _searchable && (size === 'large' || size === 'medium');\n const dataQa = triggerProps['data-qa'] || 'magritte-select-activator';\n\n useLayoutEffect(() => {\n if (searchable && !isMobile) {\n return;\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n if (forcedState === 'focus') {\n activatorRef.current?.focus();\n setForcedState?.(null);\n showedByFocus.current = false;\n }\n }\n if (!forcedState && !showOptions && prevVisibleRef.current) {\n onBlur?.();\n }\n prevVisibleRef.current = showOptions;\n }, [activatorRef, forcedState, isMobile, onBlur, searchable, setInitialValuesWithoutOnChange, showOptions]);\n\n useLayoutEffect(() => {\n if (!searchable || isMobile) {\n return;\n }\n if ((forcedState === 'focus' || forcedState === 'focusAndSelect') && useDefaultTrigger) {\n setUseSearchInput(true);\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger]);\n\n useLayoutEffect(() => {\n if (!useSearchInput || !inputRef.current) {\n return;\n }\n if (forcedState === 'focus') {\n inputRef.current.focus();\n }\n if (forcedState === 'focusAndSelect') {\n inputRef.current?.focus();\n inputRef.current?.select();\n }\n if (!showOptions && prevVisibleRef.current) {\n setInitialValuesWithoutOnChange();\n }\n if (!forcedState && !showOptions) {\n setUseSearchInput(false);\n if (prevVisibleRef.current) {\n onBlur?.();\n }\n }\n prevVisibleRef.current = showOptions;\n }, [forcedState, onBlur, setForcedState, useSearchInput, showOptions, setInitialValuesWithoutOnChange]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n showedByFocus.current = false;\n setForcedState('focus');\n toggleListVisibility();\n return;\n }\n\n // движение по списку опций\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowUp)) {\n focusOptionsList(event, dropRef?.current, 'up');\n return;\n }\n\n if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowDown)) {\n focusOptionsList(event, dropRef?.current, 'down');\n return;\n }\n\n // после закрытия пользователь решил что-то поделать опять\n if (\n !showOptions &&\n !keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])\n ) {\n toggleListVisibility();\n }\n },\n [showOptions, toggleListVisibility]\n );\n\n return (\n <>\n {!useSearchInput &&\n renderTrigger({\n values: selectedLabels,\n expanded: showOptions,\n toggleExpanded: toggleListVisibility,\n onChange: () => {\n if (disabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRef,\n onKeyDown: handleKeyDown,\n onBlur: () => {\n setForcedState(null);\n if (showOptions && optionList.length === 0) {\n toggleListVisibility();\n }\n },\n onFocus: () => {\n if (disabled) {\n return;\n }\n if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n onFocus?.();\n setForcedState('focus');\n toggleListVisibility();\n }\n showedByFocus.current = true;\n },\n 'data-qa': dataQa,\n setSearchValue,\n optionsCount: optionList.length,\n ...triggerProps,\n } as TriggerPropsWithRef & SetSearchValue & OptionsCount)}\n {useSearchInput && (\n <div style={inputWrapperStyles}>\n <BaseInput\n {...sizeProp}\n ref={inputRef}\n wrapperRef={activatorRef}\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={handleKeyDown}\n onBlur={() => {\n setForcedState(null);\n if (showOptions && optionList.length === 0) {\n toggleListVisibility();\n }\n }}\n data-qa=\"magritte-select-activator-input\"\n placeholder={selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel}\n autoComplete=\"off\"\n />\n </div>\n )}\n {isMobile && (\n <SelectBottomSheet\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n error={error}\n height={searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight}\n visible={showOptions}\n value={values}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\n type={type}\n loading={loading}\n searchable={_searchable}\n useInitialValuesOnClearAction={useInitialValuesOnClearAction}\n initialValuesOnOpening={initialValuesOnOpening}\n renderItem={renderMobileItem}\n renderAlertOnExitWithoutSaving={renderAlertOnExitWithoutSaving}\n renderButtonsContainer={renderButtonsContainer}\n renderHeader={renderHeader}\n headerTitle={_headerTitle || triggerLabel}\n optionList={optionList}\n optionsListRef={optionsListRefCallback}\n onChange={onChange}\n onClose={onOptionsListClose}\n searchValue={searchValue}\n setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n setSelectedValues={setSelectedValues}\n onBottomSheetClose={onBottomSheetClose}\n onBottomSheetOpen={onBottomSheetOpen}\n onSearchSubmit={onSearchSubmit}\n />\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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"}
|
package/SelectBottomSheet.js
CHANGED
|
@@ -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-
|
|
21
|
+
var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_8-5-0","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_8-5-0","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-5-0","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_8-5-0","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_8-5-0","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_8-5-0","loading":"magritte-loading___VpU1J_8-5-0","error-wrapper":"magritte-error-wrapper___P7jYg_8-5-0","errorWrapper":"magritte-error-wrapper___P7jYg_8-5-0"};
|
|
22
22
|
|
|
23
23
|
const SelectOptionDefault = ({ label, input, type }) => {
|
|
24
24
|
if (type === 'delimiter') {
|
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-
|
|
16
|
+
var styles = {"select-drop":"magritte-select-drop___jn4O-_8-5-0","selectDrop":"magritte-select-drop___jn4O-_8-5-0","select-drop-header":"magritte-select-drop-header___fMmio_8-5-0","selectDropHeader":"magritte-select-drop-header___fMmio_8-5-0","select-drop_plain":"magritte-select-drop_plain___VL8Fz_8-5-0","selectDropPlain":"magritte-select-drop_plain___VL8Fz_8-5-0","label-option-plain":"magritte-label-option-plain___BvBH8_8-5-0","labelOptionPlain":"magritte-label-option-plain___BvBH8_8-5-0","loading":"magritte-loading___AMiuq_8-5-0"};
|
|
17
17
|
|
|
18
18
|
const SelectOptionDefault = ({ label, input, type, plain, }) => {
|
|
19
19
|
if (type === 'delimiter') {
|
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-
|
|
12
|
+
var styles = {"select-option-label":"magritte-select-option-label___bYo2l_8-5-0","selectOptionLabel":"magritte-select-option-label___bYo2l_8-5-0","select-option-label_desktop":"magritte-select-option-label_desktop___bceen_8-5-0","selectOptionLabelDesktop":"magritte-select-option-label_desktop___bceen_8-5-0","select-delimiter":"magritte-select-delimiter___WyeR6_8-5-0","selectDelimiter":"magritte-select-delimiter___WyeR6_8-5-0"};
|
|
13
13
|
|
|
14
14
|
const CheckableComponent = ({ type, value, checked, name, onChange }) => {
|
|
15
15
|
if (type === 'label') {
|
package/index.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.magritte-select-option-label___bYo2l_8-
|
|
1
|
+
.magritte-select-option-label___bYo2l_8-5-0{
|
|
2
2
|
display:flex;
|
|
3
3
|
max-height:56px;
|
|
4
4
|
}
|
|
5
|
-
.magritte-select-option-label_desktop___bceen_8-
|
|
5
|
+
.magritte-select-option-label_desktop___bceen_8-5-0{
|
|
6
6
|
max-height:24px;
|
|
7
7
|
}
|
|
8
|
-
.magritte-select-delimiter___WyeR6_8-
|
|
8
|
+
.magritte-select-delimiter___WyeR6_8-5-0{
|
|
9
9
|
padding-left:16px;
|
|
10
10
|
padding-top:12px;
|
|
11
11
|
}
|
|
@@ -13,44 +13,44 @@
|
|
|
13
13
|
:root{
|
|
14
14
|
--magritte-static-space-400-v19-1-2:16px;
|
|
15
15
|
}
|
|
16
|
-
.magritte-select-bottom-sheet___1RZDJ_8-
|
|
16
|
+
.magritte-select-bottom-sheet___1RZDJ_8-5-0{
|
|
17
17
|
display:flex;
|
|
18
18
|
flex-direction:column;
|
|
19
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-
|
|
23
|
-
.magritte-select-bottom-sheet_radio___qvFFV_8-
|
|
22
|
+
.magritte-select-bottom-sheet_checkbox___hwTgo_8-5-0,
|
|
23
|
+
.magritte-select-bottom-sheet_radio___qvFFV_8-5-0{
|
|
24
24
|
gap:12px;
|
|
25
25
|
}
|
|
26
|
-
.magritte-loading___VpU1J_8-
|
|
26
|
+
.magritte-loading___VpU1J_8-5-0{
|
|
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-
|
|
32
|
+
.magritte-error-wrapper___P7jYg_8-5-0{
|
|
33
33
|
height:100%;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.magritte-select-drop___jn4O-_8-
|
|
36
|
+
.magritte-select-drop___jn4O-_8-5-0{
|
|
37
37
|
display:flex;
|
|
38
38
|
flex-direction:column;
|
|
39
39
|
gap:8px;
|
|
40
40
|
}
|
|
41
|
-
.magritte-select-drop-header___fMmio_8-
|
|
41
|
+
.magritte-select-drop-header___fMmio_8-5-0{
|
|
42
42
|
display:flex;
|
|
43
43
|
flex-direction:column;
|
|
44
44
|
margin-bottom:8px;
|
|
45
45
|
}
|
|
46
|
-
.magritte-select-drop_plain___VL8Fz_8-
|
|
46
|
+
.magritte-select-drop_plain___VL8Fz_8-5-0{
|
|
47
47
|
gap:16px;
|
|
48
48
|
}
|
|
49
|
-
.magritte-label-option-plain___BvBH8_8-
|
|
49
|
+
.magritte-label-option-plain___BvBH8_8-5-0{
|
|
50
50
|
display:flex;
|
|
51
51
|
justify-content:center;
|
|
52
52
|
}
|
|
53
|
-
.magritte-loading___AMiuq_8-
|
|
53
|
+
.magritte-loading___AMiuq_8-5-0{
|
|
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.
|
|
3
|
+
"version": "8.5.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"@hh.ru/magritte-ui-trigger": "3.0.3",
|
|
48
48
|
"@hh.ru/magritte-ui-typography": "3.0.18"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "7b409e911dfec1538579815f39b292b145aa5002"
|
|
51
51
|
}
|
package/types.d.ts
CHANGED
|
@@ -61,17 +61,19 @@ export interface AlertOutWithoutSavingProps {
|
|
|
61
61
|
export interface RenderAlertOnExitWithoutSaving {
|
|
62
62
|
(props: AlertOutWithoutSavingProps): ReactElement;
|
|
63
63
|
}
|
|
64
|
+
export interface OptionsCount {
|
|
65
|
+
optionsCount: number;
|
|
66
|
+
}
|
|
64
67
|
export interface SetSearchValue {
|
|
65
68
|
setSearchValue: Dispatch<SetStateAction<string>>;
|
|
66
69
|
}
|
|
67
70
|
export interface SearchSubmitType {
|
|
68
71
|
(event: KeyboardEvent<HTMLElement>, onCloseBottomSheet: VoidFunction, optionsCount: number): void;
|
|
69
72
|
}
|
|
70
|
-
export interface RenderHeaderProps extends SetSearchValue {
|
|
73
|
+
export interface RenderHeaderProps extends SetSearchValue, OptionsCount {
|
|
71
74
|
onCloseBottomSheet: VoidFunction;
|
|
72
75
|
setSearchValue: Dispatch<SetStateAction<string>>;
|
|
73
76
|
searchValue: string;
|
|
74
|
-
optionsCount: number;
|
|
75
77
|
searchable?: boolean;
|
|
76
78
|
headerTitle?: ReactNode;
|
|
77
79
|
onSearchSubmit?: SearchSubmitType;
|
|
@@ -126,7 +128,7 @@ interface SelectPropsHelper<MultipleType extends boolean, DataType, ValueType =
|
|
|
126
128
|
/** Свойства Trigger */
|
|
127
129
|
triggerProps: TriggerExternalProps;
|
|
128
130
|
/** Render функция для Trigger */
|
|
129
|
-
renderTrigger?: (props: TriggerPropsWithRef & SetSearchValue) => ReactElement;
|
|
131
|
+
renderTrigger?: (props: TriggerPropsWithRef & SetSearchValue & OptionsCount) => ReactElement;
|
|
130
132
|
/** onChange хендлер изменения селекта, для multiple возвращает массив выбранных значений */
|
|
131
133
|
onChange: (value: ValueType) => void;
|
|
132
134
|
/** Render функция для option для mobile view */
|
package/useSelectState.js
CHANGED
|
@@ -37,16 +37,19 @@ const useSelectState = (multiple, value, options, showOptions, hasChangesButton,
|
|
|
37
37
|
const [state, dispatch] = useReducer(reducer, valuesArr);
|
|
38
38
|
const stateRef = useRef(state);
|
|
39
39
|
stateRef.current = state;
|
|
40
|
+
// используем ref, чтобы не вызывать пересчетов функции ниже
|
|
41
|
+
const onChangeExternalHandlerRef = useRef(onChangeExternalHandler);
|
|
42
|
+
onChangeExternalHandlerRef.current = onChangeExternalHandler;
|
|
40
43
|
const updateSelectedValuesAndLabels = useCallback((values, needEmitChangeEvent = true) => {
|
|
41
44
|
if (needEmitChangeEvent) {
|
|
42
45
|
const hasUnsavedChanges = !isArraysEquals(prevValues.current, values);
|
|
43
46
|
if (hasUnsavedChanges) {
|
|
44
|
-
|
|
47
|
+
onChangeExternalHandlerRef.current?.((multiple ? values : values[0]));
|
|
45
48
|
prevValues.current = values;
|
|
46
49
|
}
|
|
47
50
|
}
|
|
48
51
|
setSelectedLabels(getLabels(options, values));
|
|
49
|
-
}, [multiple,
|
|
52
|
+
}, [multiple, options]);
|
|
50
53
|
useEffect(() => {
|
|
51
54
|
if (showOptions) {
|
|
52
55
|
initialValuesOnOpening.current = state;
|
package/useSelectState.js.map
CHANGED
|
@@ -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
|
|
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 // используем ref, чтобы не вызывать пересчетов функции ниже\n const onChangeExternalHandlerRef = useRef(onChangeExternalHandler);\n onChangeExternalHandlerRef.current = onChangeExternalHandler;\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 onChangeExternalHandlerRef.current?.((multiple ? values : values[0]) as ValueType);\n prevValues.current = values;\n }\n }\n setSelectedLabels(getLabels(options, values));\n },\n [multiple, 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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"}
|