@hh.ru/magritte-ui-select 12.5.4 → 12.6.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 +30 -6
- package/Select.js.map +1 -1
- package/SelectBottomSheet.d.ts +4 -3
- package/SelectBottomSheet.js +17 -8
- package/SelectBottomSheet.js.map +1 -1
- package/SelectDrop.d.ts +5 -2
- package/SelectDrop.js +21 -7
- package/SelectDrop.js.map +1 -1
- package/SelectEmptyHint.js +1 -1
- package/SelectError.js +1 -1
- package/SelectModal.js +12 -3
- package/SelectModal.js.map +1 -1
- package/SelectOption.js +7 -3
- package/SelectOption.js.map +1 -1
- package/UncontrolledSelect.js +1 -0
- package/UncontrolledSelect.js.map +1 -1
- package/index.css +40 -31
- package/index.d.ts +1 -0
- package/index.js +11 -10
- package/index.js.map +1 -1
- package/package.json +9 -8
- package/types.d.ts +4 -0
package/Select.js
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { forwardRef, useRef, useState, useMemo, useLayoutEffect, useCallback } from 'react';
|
|
3
|
+
import { forwardRef, useRef, useState, useId, useMemo, useLayoutEffect, useEffect, useCallback } from 'react';
|
|
4
4
|
import { keyboardMatch, keyboardKeys, keyboardMatches, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
|
|
5
5
|
import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
|
|
6
6
|
import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
7
7
|
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
8
8
|
import { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';
|
|
9
9
|
import { SelectBottomSheet } from './SelectBottomSheet.js';
|
|
10
|
-
import { SelectDrop } from './SelectDrop.js';
|
|
10
|
+
import { getDropRole, SelectDrop } from './SelectDrop.js';
|
|
11
11
|
import { SelectModal } from './SelectModal.js';
|
|
12
12
|
import { useSelectOptionsList } from './useSelectOptionsList.js';
|
|
13
13
|
import { useSelectSearch } from './useSelectSearch.js';
|
|
14
14
|
import { useSelectState } from './useSelectState.js';
|
|
15
15
|
import { Trigger } from '@hh.ru/magritte-ui-trigger';
|
|
16
16
|
import 'classnames';
|
|
17
|
+
import '@hh.ru/magritte-common-use-translation';
|
|
17
18
|
import '@hh.ru/magritte-ui-action-bar';
|
|
18
19
|
import '@hh.ru/magritte-ui-bottom-sheet';
|
|
19
20
|
import '@hh.ru/magritte-ui-button';
|
|
@@ -65,6 +66,8 @@ const SelectComponent = ({ type, multiple, value: _value, maxSelectedOptions, lo
|
|
|
65
66
|
const [forcedState, setForcedState] = useState(null);
|
|
66
67
|
const dropRef = useRef(null);
|
|
67
68
|
const useDefaultTrigger = renderTrigger === SelectTriggerDefault;
|
|
69
|
+
const dropId = useId();
|
|
70
|
+
const bottomSheetId = useId();
|
|
68
71
|
const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } = useSelectOptionsList(isMobile, pickerDesktopType);
|
|
69
72
|
const activatorRefCallback = useMultipleRefs(activatorRef, ref);
|
|
70
73
|
const prevVisibleRef = useRef(showOptions);
|
|
@@ -85,7 +88,7 @@ const SelectComponent = ({ type, multiple, value: _value, maxSelectedOptions, lo
|
|
|
85
88
|
const showedByFocus = useRef(false);
|
|
86
89
|
const isLimitExceeded = maxSelectedOptions !== undefined && Array.isArray(values) && values.length >= maxSelectedOptions;
|
|
87
90
|
// часть свойств тригера влияет на поведение дефолтного input search
|
|
88
|
-
const { size, label: triggerLabel, disabled } = triggerProps;
|
|
91
|
+
const { size, label: triggerLabel, disabled, 'aria-label': triggerAriaLabel } = triggerProps;
|
|
89
92
|
const forceDisabled = useDisabled();
|
|
90
93
|
const isComponentDisabled = disabled || forceDisabled;
|
|
91
94
|
const sizeProp = size === 'large' ? { size: 'large' } : { size: 'medium' };
|
|
@@ -155,6 +158,19 @@ const SelectComponent = ({ type, multiple, value: _value, maxSelectedOptions, lo
|
|
|
155
158
|
}
|
|
156
159
|
prevVisibleRef.current = showOptions;
|
|
157
160
|
}, [forcedState, onBlur, setForcedState, searchInputState, showOptions, setInitialValuesWithoutOnChange]);
|
|
161
|
+
useEffect(() => {
|
|
162
|
+
if (!optionsListRef.current || !showOptions) {
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
// на дестопе в поиском селекте оставим фокус на инпуте
|
|
166
|
+
if (!isMobile && searchable && pickerDesktopType === 'drop') {
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
// ставим фокус на первый выбранный элемент или на первый элемент списка
|
|
170
|
+
const selectedOrFirstElement = optionsListRef.current.querySelector('[data-magritte-select-option][aria-selected="true"]') ??
|
|
171
|
+
optionsListRef.current.querySelector('[data-magritte-select-option]');
|
|
172
|
+
selectedOrFirstElement?.focus();
|
|
173
|
+
}, [showOptions, searchable, isMobile, optionsListRef, pickerDesktopType]);
|
|
158
174
|
const handleKeyDown = useCallback((event) => {
|
|
159
175
|
if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
|
|
160
176
|
showedByFocus.current = false;
|
|
@@ -171,6 +187,10 @@ const SelectComponent = ({ type, multiple, value: _value, maxSelectedOptions, lo
|
|
|
171
187
|
focusOptionsList(event, dropRef?.current, 'down');
|
|
172
188
|
return;
|
|
173
189
|
}
|
|
190
|
+
if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Tab)) {
|
|
191
|
+
focusOptionsList(event, dropRef?.current, 'down');
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
174
194
|
// после закрытия пользователь решил что-то поделать опять
|
|
175
195
|
if (!showOptions &&
|
|
176
196
|
!keyboardMatches(event.nativeEvent, [keyboardKeys.Tab, keyboardKeys.Escape, keyboardKeys.Space])) {
|
|
@@ -213,14 +233,18 @@ const SelectComponent = ({ type, multiple, value: _value, maxSelectedOptions, lo
|
|
|
213
233
|
if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {
|
|
214
234
|
onFocus?.();
|
|
215
235
|
setForcedState('focus');
|
|
216
|
-
toggleListVisibility();
|
|
236
|
+
_searchable && toggleListVisibility();
|
|
217
237
|
}
|
|
218
|
-
|
|
238
|
+
// если поисковый select, то откроем drop сразу
|
|
239
|
+
showedByFocus.current = Boolean(_searchable);
|
|
219
240
|
},
|
|
220
241
|
'data-qa': dataQa,
|
|
221
242
|
setSearchValue,
|
|
222
243
|
optionsCount: optionList.length,
|
|
223
244
|
...triggerProps,
|
|
245
|
+
role: 'combobox',
|
|
246
|
+
'aria-haspopup': isMobile ? 'dialog' : getDropRole(clearButton, applyChangesButton, multiple),
|
|
247
|
+
'aria-controls': isMobile ? bottomSheetId : dropId,
|
|
224
248
|
disabled: isComponentDisabled,
|
|
225
249
|
}), searchInputState.useSearchInput && (jsx("div", { style: inputWrapperStyles, children: jsx(BaseInput, { ...sizeProp, ref: inputRef, wrapperRef: activatorRefCallback, value: searchValue, onChange: setSearchValue, onKeyDown: handleKeyDown, onFocus: () => {
|
|
226
250
|
setForcedState('focus');
|
|
@@ -229,7 +253,7 @@ const SelectComponent = ({ type, multiple, value: _value, maxSelectedOptions, lo
|
|
|
229
253
|
if (showOptions && optionList.length === 0 && !emptyOptionsHint) {
|
|
230
254
|
toggleListVisibility();
|
|
231
255
|
}
|
|
232
|
-
}, "data-qa": "magritte-select-activator-input", placeholder: selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel, autoComplete: "off" }) })), isMobile && (jsx(SelectBottomSheet, { applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, error: error, height: searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight, visible: Boolean(showOptions || internalLoading), value: values, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, type: type, loading: loading || internalLoading, searchable: _searchable, useInitialValuesOnClearAction: useInitialValuesOnClearAction, initialValuesOnOpening: initialValuesOnOpening, renderItem: renderMobileItem, renderAlertOnExitWithoutSaving: renderAlertOnExitWithoutSaving, renderButtonsContainer: renderButtonsContainer, renderHeader: renderHeader, headerTitle: _headerTitle || triggerLabel, optionList: optionList, optionsListRef: optionsListRefCallback, onChange: onChange, onClose: onOptionsListClose, searchValue: searchValue, setSearchValue: setSearchValue, setInitialValues: setInitialValues, setSelectedValues: setSelectedValues, onBottomSheetClose: onBottomSheetClose, onBottomSheetOpen: onBottomSheetOpen, onSearchSubmit: onSearchSubmit, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa })), !isMobile && (jsxs(Fragment, { children: [pickerDesktopType === 'drop' && (jsx(SelectDrop, { activatorRef: activatorRef, applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, maxWidth: maxWidth, type: type, loading: loading || internalLoading, useInitialValuesOnClearAction: useInitialValuesOnClearAction, onClose: onOptionsListClose, renderItem: renderDesktopItem, renderButtonsContainer: renderButtonsContainer, plain: plain, optionList: optionList, optionsListRef: optionsListRefCallback, value: values, onChange: onChange, searchValue: searchValue, searchable: searchable, forceDropVisibleWithEmptyOptions: forceDropVisibleWithEmptyOptions || internalLoading, setSearchValue: setSearchValue, setInitialValues: setInitialValues, visible: !error && (showOptions || internalLoading), widthEqualToActivator: widthEqualToActivator, renderContentBefore: renderContentBefore, setForcedState: setForcedState, setSelectedValues: setSelectedValues, maxHeight: maxHeight, onDropOpen: onDropOpen, onDropClose: onDropClose, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa, dropWidth: dropWidth })), pickerDesktopType === 'modal' && (jsx(SelectModal, { ...modalProps, applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, type: type, loading: loading || internalLoading, useInitialValuesOnClearAction: useInitialValuesOnClearAction, onClose: onOptionsListClose, renderItem: renderDesktopItem, renderButtonsContainer: renderButtonsContainer, plain: plain, optionList: optionList, optionsListRef: optionsListRefCallback, value: values, onChange: onChange, searchValue: searchValue, searchable: searchable, setSearchValue: setSearchValue, setInitialValues: setInitialValues, visible: Boolean(showOptions || internalLoading), setForcedState: setForcedState, setSelectedValues: setSelectedValues, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa, renderAlertOnExitWithoutSaving: renderAlertOnExitWithoutSaving, initialValuesOnOpening: initialValuesOnOpening }))] }))] }));
|
|
256
|
+
}, "data-qa": "magritte-select-activator-input", placeholder: selectedLabels.length > 0 ? selectedLabels.join(', ') : triggerLabel, autoComplete: "off", "aria-expanded": showOptions, role: "combobox", "aria-label": triggerAriaLabel, "aria-autocomplete": "list", "aria-controls": isMobile ? bottomSheetId : dropId }) })), isMobile && (jsx(SelectBottomSheet, { id: bottomSheetId, applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, error: error, height: searchable || Boolean(error) || loading ? 'full-screen' : bottomSheetHeight, visible: Boolean(showOptions || internalLoading), value: values, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, type: type, loading: loading || internalLoading, searchable: _searchable, useInitialValuesOnClearAction: useInitialValuesOnClearAction, initialValuesOnOpening: initialValuesOnOpening, renderItem: renderMobileItem, renderAlertOnExitWithoutSaving: renderAlertOnExitWithoutSaving, renderButtonsContainer: renderButtonsContainer, renderHeader: renderHeader, headerTitle: _headerTitle || triggerLabel, optionList: optionList, optionsListRef: optionsListRefCallback, onChange: onChange, onClose: onOptionsListClose, searchValue: searchValue, setSearchValue: setSearchValue, setInitialValues: setInitialValues, setSelectedValues: setSelectedValues, onBottomSheetClose: onBottomSheetClose, onBottomSheetOpen: onBottomSheetOpen, onSearchSubmit: onSearchSubmit, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa })), !isMobile && (jsxs(Fragment, { children: [pickerDesktopType === 'drop' && (jsx(SelectDrop, { id: dropId, activatorRef: activatorRef, applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, maxWidth: maxWidth, type: type, loading: loading || internalLoading, useInitialValuesOnClearAction: useInitialValuesOnClearAction, onClose: onOptionsListClose, renderItem: renderDesktopItem, renderButtonsContainer: renderButtonsContainer, plain: plain, optionList: optionList, optionsListRef: optionsListRefCallback, value: values, onChange: onChange, searchValue: searchValue, searchable: searchable, forceDropVisibleWithEmptyOptions: forceDropVisibleWithEmptyOptions || internalLoading, setSearchValue: setSearchValue, setInitialValues: setInitialValues, visible: !error && (showOptions || internalLoading), widthEqualToActivator: widthEqualToActivator, renderContentBefore: renderContentBefore, setForcedState: setForcedState, setSelectedValues: setSelectedValues, maxHeight: maxHeight, onDropOpen: onDropOpen, onDropClose: onDropClose, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa, dropWidth: dropWidth })), pickerDesktopType === 'modal' && (jsx(SelectModal, { ...modalProps, applyChangesButton: applyChangesButton, clearButton: clearButton, clearSelectedValues: clearSelectedValues, isLimitExceeded: isLimitExceeded, name: name, multiple: multiple, type: type, loading: loading || internalLoading, useInitialValuesOnClearAction: useInitialValuesOnClearAction, onClose: onOptionsListClose, renderItem: renderDesktopItem, renderButtonsContainer: renderButtonsContainer, plain: plain, optionList: optionList, optionsListRef: optionsListRefCallback, value: values, onChange: onChange, searchValue: searchValue, searchable: searchable, setSearchValue: setSearchValue, setInitialValues: setInitialValues, visible: Boolean(showOptions || internalLoading), setForcedState: setForcedState, setSelectedValues: setSelectedValues, onApply: onApply, onClear: onClear, emptyOptionsHint: emptyOptionsHint, emptyOptionsSearchHint: emptyOptionsSearchHint, searchInProgress: searchInProgress, internalError: internalError, reload: reload, innerErrorTrls: innerErrorTrls, optionDataQa: optionDataQa, renderAlertOnExitWithoutSaving: renderAlertOnExitWithoutSaving, initialValuesOnOpening: initialValuesOnOpening }))] }))] }));
|
|
233
257
|
};
|
|
234
258
|
const Select = forwardRef(SelectComponent);
|
|
235
259
|
Select.displayName = 'Select';
|
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 forwardRef,\n ForwardedRef,\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 { useDisabled } from '@hh.ru/magritte-common-use-disabled';\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 { SelectModal } from '@hh.ru/magritte-ui-select/SelectModal';\nimport {\n SelectProps,\n TriggerPropsWithRef,\n FocusStateType,\n SetSearchValue,\n OptionsCount,\n TriggerExternalProps,\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\nconst DEFAULT_DATA_QA = 'magritte-select-activator';\nconst DEFAULT_TRIGGER_PROPS = {\n size: 'medium',\n 'data-qa': DEFAULT_DATA_QA,\n} as TriggerExternalProps;\n\nconst SelectComponent = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(\n {\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 = DEFAULT_TRIGGER_PROPS,\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 pickerDesktopType = 'drop',\n modalProps,\n dropWidth,\n }: SelectProps<MultipleType, DataType>,\n ref: ForwardedRef<HTMLElement>\n): 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, pickerDesktopType);\n const activatorRefCallback = useMultipleRefs(activatorRef, ref);\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\n // часть свойств тригера влияет на поведение дефолтного input search\n const { size, label: triggerLabel, disabled } = triggerProps;\n const forceDisabled = useDisabled();\n const isComponentDisabled = disabled || forceDisabled;\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n const inputWrapperStyles = { maxWidth: activatorRef.current?.offsetWidth };\n const searchable = _searchable && (size === 'large' || size === 'medium');\n const dataQa = triggerProps?.['data-qa'] || DEFAULT_DATA_QA;\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 || pickerDesktopType === 'modal') {\n return;\n }\n if (forcedState === 'focus' || forcedState === 'focusAndSelect') {\n setSearchInputState({\n useSearchInput: useDefaultTrigger,\n emitEvents: true,\n });\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger, pickerDesktopType]);\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 (isComponentDisabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRefCallback,\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 (isComponentDisabled || 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 disabled: isComponentDisabled,\n } as TriggerPropsWithRef & SetSearchValue & OptionsCount)}\n {searchInputState.useSearchInput && (\n <div style={inputWrapperStyles}>\n <BaseInput\n {...sizeProp}\n ref={inputRef}\n wrapperRef={activatorRefCallback}\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 <>\n {pickerDesktopType === 'drop' && (\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 dropWidth={dropWidth}\n />\n )}\n {pickerDesktopType === 'modal' && (\n <SelectModal\n {...modalProps}\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\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 setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n visible={Boolean(showOptions || internalLoading)}\n setForcedState={setForcedState}\n setSelectedValues={setSelectedValues}\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 renderAlertOnExitWithoutSaving={renderAlertOnExitWithoutSaving}\n initialValuesOnOpening={initialValuesOnOpening}\n />\n )}\n </>\n )}\n </>\n );\n};\n\nconst Select = forwardRef(SelectComponent) as (<MultipleType extends boolean, DataType extends StaticDataFetcherItem>(\n props: SelectProps<MultipleType, DataType> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSelect.displayName = 'Select';\n\nexport { Select };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,oBAAoB,GAAG,CAAC,YAAiC,KAAkB;AAC7E,IAAA,OAAOA,GAAC,CAAA,OAAO,EAAK,EAAA,GAAA,YAAY,GAAI,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,KAAqB,EAAE,IAAoC,EAAE,SAAwB,KAAI;IAC/G,IAAI,IAAI,EAAE;AACN,QAAA,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AACrF,QAAA,IAAI,oBAAoB,KAAK,IAAI,EAAE;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,oBAAoB,CAAC,KAAK,EAAE,CAAC;SAChC;KACJ;AACL,CAAC,CAAC;AAOF,MAAM,kBAAkB,GAAqB;AACzC,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,UAAU,EAAE,KAAK;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG,2BAA2B,CAAC;AACpD,MAAM,qBAAqB,GAAG;AAC1B,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,SAAS,EAAE,eAAe;CACL,CAAC;AAE1B,MAAM,eAAe,GAAG,CACpB,EACI,IAAI,EACJ,QAAQ,EACR,KAAK,EAAE,MAAM,EACb,kBAAkB,EAClB,OAAO,EACP,KAAK,EACL,UAAU,EAAE,WAAW,EACvB,iBAAiB,GAAG,aAAa,EACjC,QAAQ,EAAE,eAAe,EACzB,aAAa,GAAG,oBAAoB,EACpC,YAAY,GAAG,qBAAqB,EACpC,gBAAgB,EAChB,iBAAiB,EACjB,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,6BAA6B,EAC7B,8BAA8B,EAC9B,sBAAsB,EACtB,YAAY,EACZ,WAAW,EAAE,YAAY,EACzB,WAAW,EACX,kBAAkB,EAClB,gCAAgC,EAChC,KAAK,GAAG,KAAK,EACb,qBAAqB,GAAG,IAAI,EAC5B,mBAAmB,EACnB,MAAM,EACN,OAAO,EACP,UAAU,EACV,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,OAAO,EACP,cAAc,EACd,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAAG,MAAM,EAC1B,UAAU,EACV,SAAS,GACyB,EACtC,GAA8B,KAChB;AACd,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;AACrC,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAmB,kBAAkB,CAAC,CAAC;IAC/F,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;AACrE,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,iBAAiB,GAAG,aAAa,KAAK,oBAAoB,CAAC;AAEjE,IAAA,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,WAAW,EAAE,GACzF,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,eAAe,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;AAChE,IAAA,MAAM,cAAc,GAAG,MAAM,CAAU,WAAW,CAAC,CAAC;IACpD,MAAM,gBAAgB,GAAG,QAAQ,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAAC;AACjE,IAAA,MAAM,EACF,MAAM,EACN,QAAQ,EACR,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,+BAA+B,EAC/B,sBAAsB,GACzB,GAAG,cAAc,CACd,CAAC,CAAC,QAAQ,EACV,MAAM,IAAI,EAAE,EACZ,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,cAAc,CACjB,CAAC;IACF,MAAM,WAAW,GAAG,OAAO;;AAEvB,IAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,GAAI,CAAC,MAAM,CAAgB,GAAG,EAAE,CAAC,EAC/E,CAAC,MAAM,CAAC,CACX,CAAC;IACF,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,EAAE,aAAa,EAAE,GACvG,eAAe,CAAW,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;AAEvF,IAAA,MAAM,cAAc,GAAG,OAAO,CAC1B;;AAEI,IAAA,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;AACjB,UAAE,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC;AAC/C,UAAE,MAAM;cACJ,CAAC,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC;AAChC,cAAE,EAAE,EACd,CAAC,MAAM,CAAC,CACX,CAAC;IAEF,MAAM,sBAAsB,GAAG,eAAe,CAAC,cAAc,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;AACnF,IAAA,MAAM,aAAa,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;AAC7C,IAAA,MAAM,eAAe,GACjB,kBAAkB,KAAK,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,IAAI,kBAAkB,CAAC;;IAGrG,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAC;AAC7D,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,mBAAmB,GAAG,QAAQ,IAAI,aAAa,CAAC;IACtD,MAAM,QAAQ,GAAG,IAAI,KAAK,OAAO,GAAI,EAAE,IAAI,EAAE,OAAO,EAAY,GAAI,EAAE,IAAI,EAAE,QAAQ,EAAY,CAAC;IACjG,MAAM,kBAAkB,GAAG,EAAE,QAAQ,EAAE,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;AAC3E,IAAA,MAAM,UAAU,GAAG,WAAW,KAAK,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC;IAC1E,MAAM,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC,IAAI,eAAe,CAAC;;IAG5D,eAAe,CAAC,MAAK;AACjB,QAAA,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE;YACzB,OAAO;SACV;AACD,QAAA,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,OAAO,EAAE;AACxC,YAAA,+BAA+B,EAAE,CAAC;AAClC,YAAA,IAAI,WAAW,KAAK,OAAO,EAAE;AACzB,gBAAA,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;AAC9B,gBAAA,cAAc,GAAG,IAAI,CAAC,CAAC;AACvB,gBAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;aACjC;SACJ;QACD,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,OAAO,EAAE;YACxD,MAAM,IAAI,CAAC;SACd;AACD,QAAA,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;AACzC,KAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,+BAA+B,EAAE,WAAW,CAAC,CAAC,CAAC;;IAG5G,eAAe,CAAC,MAAK;QACjB,IAAI,CAAC,UAAU,IAAI,QAAQ,IAAI,iBAAiB,KAAK,OAAO,EAAE;YAC1D,OAAO;SACV;QACD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,gBAAgB,EAAE;AAC7D,YAAA,mBAAmB,CAAC;AAChB,gBAAA,cAAc,EAAE,iBAAiB;AACjC,gBAAA,UAAU,EAAE,IAAI;AACnB,aAAA,CAAC,CAAC;SACN;AACL,KAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC;;IAG9E,eAAe,CAAC,MAAK;AACjB,QAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;YAC9B,OAAO;SACV;;AAED,QAAA,IAAI,gBAAgB,CAAC,cAAc,EAAE;AACjC,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;gBACnB,OAAO;aACV;AACD,YAAA,IAAI,WAAW,KAAK,OAAO,EAAE;AACzB,gBAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;aAC5B;;AAED,YAAA,IAAI,WAAW,KAAK,gBAAgB,EAAE;AAClC,gBAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;AAC1B,gBAAA,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;aAC9B;SACJ;AACD,QAAA,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,OAAO,EAAE;AACxC,YAAA,+BAA+B,EAAE,CAAC;SACrC;AACD,QAAA,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE;AAC9B,YAAA,mBAAmB,CAAC;AAChB,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,UAAU,EAAE,KAAK;AACpB,aAAA,CAAC,CAAC;AACH,YAAA,IAAI,cAAc,CAAC,OAAO,EAAE;gBACxB,MAAM,IAAI,CAAC;aACd;SACJ;AACD,QAAA,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;AACzC,KAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,WAAW,EAAE,+BAA+B,CAAC,CAAC,CAAC;AAE1G,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAK,KAAI;AACN,QAAA,IAAI,WAAW,IAAI,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE;AACtE,YAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,cAAc,CAAC,OAAO,CAAC,CAAC;AAExB,YAAA,oBAAoB,EAAE,CAAC;YACvB,OAAO;SACV;;AAGD,QAAA,IAAI,WAAW,IAAI,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE;YACvE,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;YAChD,OAAO;SACV;AAED,QAAA,IAAI,WAAW,IAAI,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE;YACzE,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;YAClD,OAAO;SACV;;AAGD,QAAA,IACI,CAAC,WAAW;YACZ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,EAClG;AACE,YAAA,oBAAoB,EAAE,CAAC;SAC1B;AACL,KAAC,EACD,CAAC,WAAW,EAAE,oBAAoB,CAAC,CACtC,CAAC;AAEF,IAAA,QACIC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,CAAC,gBAAgB,CAAC,cAAc;AAC7B,gBAAA,aAAa,CAAC;AACV,oBAAA,MAAM,EAAE,cAAc;AACtB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,cAAc,EAAE,oBAAoB;oBACpC,QAAQ,EAAE,MAAK;wBACX,IAAI,mBAAmB,EAAE;4BACrB,OAAO;yBACV;;;AAGD,wBAAA,IAAI,aAAa,CAAC,OAAO,EAAE;AACvB,4BAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;4BAC9B,OAAO;yBACV;AACD,wBAAA,oBAAoB,EAAE,CAAC;qBAC1B;AACD,oBAAA,OAAO,EAAE,MAAM,mBAAmB,EAAE;AACpC,oBAAA,GAAG,EAAE,oBAAoB;AACzB,oBAAA,SAAS,EAAE,aAAa;oBACxB,MAAM,EAAE,MAAK;wBACT,cAAc,CAAC,IAAI,CAAC,CAAC;wBACrB,IAAI,WAAW,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE;AAC7D,4BAAA,oBAAoB,EAAE,CAAC;yBAC1B;AACD,wBAAA,IAAI,CAAC,WAAW,IAAI,WAAW,KAAK,IAAI,EAAE;4BACtC,MAAM,IAAI,CAAC;yBACd;qBACJ;oBACD,OAAO,EAAE,MAAK;AACV,wBAAA,IAAI,mBAAmB,IAAI,WAAW,EAAE;4BACpC,OAAO;yBACV;wBACD,IAAI,CAAC,WAAW,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,gBAAgB,EAAE;4BAC7E,OAAO,IAAI,CAAC;4BACZ,cAAc,CAAC,OAAO,CAAC,CAAC;AAExB,4BAAA,oBAAoB,EAAE,CAAC;yBAC1B;AACD,wBAAA,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;qBAChC;AACD,oBAAA,SAAS,EAAE,MAAM;oBACjB,cAAc;oBACd,YAAY,EAAE,UAAU,CAAC,MAAM;AAC/B,oBAAA,GAAG,YAAY;AACf,oBAAA,QAAQ,EAAE,mBAAmB;AACuB,iBAAA,CAAC,EAC5D,gBAAgB,CAAC,cAAc,KAC5BF,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,kBAAkB,YAC1BA,GAAC,CAAA,SAAS,OACF,QAAQ,EACZ,GAAG,EAAE,QAAQ,EACb,UAAU,EAAE,oBAAoB,EAChC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,MAAK;wBACV,cAAc,CAAC,OAAO,CAAC,CAAC;AAC5B,qBAAC,EACD,MAAM,EAAE,MAAK;wBACT,cAAc,CAAC,IAAI,CAAC,CAAC;wBACrB,IAAI,WAAW,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE;AAC7D,4BAAA,oBAAoB,EAAE,CAAC;yBAC1B;AACL,qBAAC,EACO,SAAA,EAAA,iCAAiC,EACzC,WAAW,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,YAAY,EACjF,YAAY,EAAC,KAAK,EACpB,CAAA,EAAA,CACA,CACT,EACA,QAAQ,KACLA,GAAC,CAAA,iBAAiB,EACd,EAAA,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,UAAU,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,OAAO,GAAG,aAAa,GAAG,iBAAiB,EACnF,OAAO,EAAE,OAAO,CAAC,WAAW,IAAI,eAAe,CAAC,EAChD,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,IAAI,eAAe,EACnC,UAAU,EAAE,WAAW,EACvB,6BAA6B,EAAE,6BAA6B,EAC5D,sBAAsB,EAAE,sBAAsB,EAC9C,UAAU,EAAE,gBAAgB,EAC5B,8BAA8B,EAAE,8BAA8B,EAC9D,sBAAsB,EAAE,sBAAsB,EAC9C,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,YAAY,IAAI,YAAY,EACzC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,sBAAsB,EACtC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,kBAAkB,EAC3B,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,sBAAsB,EAAE,sBAAsB,EAC9C,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC5B,CAAA,CACL,EACA,CAAC,QAAQ,KACNC,IACK,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,iBAAiB,KAAK,MAAM,KACzBF,GAAA,CAAC,UAAU,EAAA,EACP,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,IAAI,eAAe,EACnC,6BAA6B,EAAE,6BAA6B,EAC5D,OAAO,EAAE,kBAAkB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,sBAAsB,EAAE,sBAAsB,EAC9C,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,sBAAsB,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,gCAAgC,EAAE,gCAAgC,IAAI,eAAe,EACrF,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,CAAC,KAAK,KAAK,WAAW,IAAI,eAAe,CAAC,EACnD,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,mBAAmB,EACxC,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,sBAAsB,EAAE,sBAAsB,EAC9C,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACtB,CAAA,CACL,EACA,iBAAiB,KAAK,OAAO,KAC1BA,IAAC,WAAW,EAAA,EAAA,GACJ,UAAU,EACd,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,IAAI,eAAe,EACnC,6BAA6B,EAAE,6BAA6B,EAC5D,OAAO,EAAE,kBAAkB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,sBAAsB,EAAE,sBAAsB,EAC9C,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,sBAAsB,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,CAAC,WAAW,IAAI,eAAe,CAAC,EAChD,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,sBAAsB,EAAE,sBAAsB,EAC9C,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,8BAA8B,EAAE,8BAA8B,EAC9D,sBAAsB,EAAE,sBAAsB,GAChD,CACL,CAAA,EAAA,CACF,CACN,CAAA,EAAA,CACF,EACL;AACN,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,eAAe,EAEW;AAEpD,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
|
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 forwardRef,\n ForwardedRef,\n useId,\n useEffect,\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 { useDisabled } from '@hh.ru/magritte-common-use-disabled';\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, getDropRole } from '@hh.ru/magritte-ui-select/SelectDrop';\nimport { SelectModal } from '@hh.ru/magritte-ui-select/SelectModal';\nimport {\n SelectProps,\n TriggerPropsWithRef,\n FocusStateType,\n SetSearchValue,\n OptionsCount,\n TriggerExternalProps,\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\nconst DEFAULT_DATA_QA = 'magritte-select-activator';\nconst DEFAULT_TRIGGER_PROPS = {\n size: 'medium',\n 'data-qa': DEFAULT_DATA_QA,\n} as TriggerExternalProps;\n\nconst SelectComponent = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>(\n {\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 = DEFAULT_TRIGGER_PROPS,\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 pickerDesktopType = 'drop',\n modalProps,\n dropWidth,\n }: SelectProps<MultipleType, DataType>,\n ref: ForwardedRef<HTMLElement>\n): 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 const dropId = useId();\n const bottomSheetId = useId();\n\n const { activatorRef, optionsListRef, onOptionsListClose, toggleListVisibility, showOptions } =\n useSelectOptionsList(isMobile, pickerDesktopType);\n const activatorRefCallback = useMultipleRefs(activatorRef, ref);\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\n // часть свойств тригера влияет на поведение дефолтного input search\n const { size, label: triggerLabel, disabled, 'aria-label': triggerAriaLabel } = triggerProps;\n const forceDisabled = useDisabled();\n const isComponentDisabled = disabled || forceDisabled;\n const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n const inputWrapperStyles = { maxWidth: activatorRef.current?.offsetWidth };\n const searchable = _searchable && (size === 'large' || size === 'medium');\n const dataQa = triggerProps?.['data-qa'] || DEFAULT_DATA_QA;\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 || pickerDesktopType === 'modal') {\n return;\n }\n if (forcedState === 'focus' || forcedState === 'focusAndSelect') {\n setSearchInputState({\n useSearchInput: useDefaultTrigger,\n emitEvents: true,\n });\n }\n }, [forcedState, isMobile, searchable, useDefaultTrigger, pickerDesktopType]);\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 useEffect(() => {\n if (!optionsListRef.current || !showOptions) {\n return;\n }\n // на дестопе в поиском селекте оставим фокус на инпуте\n if (!isMobile && searchable && pickerDesktopType === 'drop') {\n return;\n }\n // ставим фокус на первый выбранный элемент или на первый элемент списка\n const selectedOrFirstElement =\n optionsListRef.current.querySelector<HTMLElement>('[data-magritte-select-option][aria-selected=\"true\"]') ??\n optionsListRef.current.querySelector<HTMLElement>('[data-magritte-select-option]');\n selectedOrFirstElement?.focus();\n }, [showOptions, searchable, isMobile, optionsListRef, pickerDesktopType]);\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 if (showOptions && keyboardMatch(event.nativeEvent, keyboardKeys.Tab)) {\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 (isComponentDisabled) {\n return;\n }\n // открываем по фокусу, закрываем по клику\n // повторно открываем по клику (события фокуса уже не будет)\n if (showedByFocus.current) {\n showedByFocus.current = false;\n return;\n }\n toggleListVisibility();\n },\n onClear: () => clearSelectedValues(),\n ref: activatorRefCallback,\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 (isComponentDisabled || showOptions) {\n return;\n }\n if (!showOptions && forcedState !== 'focus' && forcedState !== 'focusAndSelect') {\n onFocus?.();\n setForcedState('focus');\n _searchable && toggleListVisibility();\n }\n // если поисковый select, то откроем drop сразу\n showedByFocus.current = Boolean(_searchable);\n },\n 'data-qa': dataQa,\n setSearchValue,\n optionsCount: optionList.length,\n ...triggerProps,\n role: 'combobox',\n 'aria-haspopup': isMobile ? 'dialog' : getDropRole(clearButton, applyChangesButton, multiple),\n 'aria-controls': isMobile ? bottomSheetId : dropId,\n disabled: isComponentDisabled,\n } as TriggerPropsWithRef & SetSearchValue & OptionsCount)}\n {searchInputState.useSearchInput && (\n <div style={inputWrapperStyles}>\n <BaseInput\n {...sizeProp}\n ref={inputRef}\n wrapperRef={activatorRefCallback}\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 aria-expanded={showOptions}\n role=\"combobox\"\n aria-label={triggerAriaLabel}\n aria-autocomplete=\"list\"\n aria-controls={isMobile ? bottomSheetId : dropId}\n />\n </div>\n )}\n {isMobile && (\n <SelectBottomSheet\n id={bottomSheetId}\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 <>\n {pickerDesktopType === 'drop' && (\n <SelectDrop\n id={dropId}\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 dropWidth={dropWidth}\n />\n )}\n {pickerDesktopType === 'modal' && (\n <SelectModal\n {...modalProps}\n applyChangesButton={applyChangesButton}\n clearButton={clearButton}\n clearSelectedValues={clearSelectedValues}\n isLimitExceeded={isLimitExceeded}\n name={name}\n multiple={multiple}\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 setSearchValue={setSearchValue}\n setInitialValues={setInitialValues}\n visible={Boolean(showOptions || internalLoading)}\n setForcedState={setForcedState}\n setSelectedValues={setSelectedValues}\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 renderAlertOnExitWithoutSaving={renderAlertOnExitWithoutSaving}\n initialValuesOnOpening={initialValuesOnOpening}\n />\n )}\n </>\n )}\n </>\n );\n};\n\nconst Select = forwardRef(SelectComponent) as (<MultipleType extends boolean, DataType extends StaticDataFetcherItem>(\n props: SelectProps<MultipleType, DataType> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSelect.displayName = 'Select';\n\nexport { Select };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
package/SelectBottomSheet.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
3
|
-
import { SelectBottomSheetProps } from '@hh.ru/magritte-ui-select/types';
|
|
4
|
-
export declare const
|
|
3
|
+
import { SelectBottomSheetProps, RenderHeaderProps } from '@hh.ru/magritte-ui-select/types';
|
|
4
|
+
export declare const RenderHeaderDefault: ({ onCloseBottomSheet, searchValue, setSearchValue, searchable, headerTitle, onSearchSubmit, optionsCount, onCloseBottomSheetWithUpdateValues, searchTrl, closeTrl, }: RenderHeaderProps) => ReactNode;
|
|
5
|
+
export declare const SelectBottomSheet: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ id, type, name, multiple, clearButton: _clearButton, applyChangesButton: _applyChangesButton, useInitialValuesOnClearAction, loading, error, renderHeader, renderItem, renderButtonsContainer, renderAlertOnExitWithoutSaving, headerTitle, onClose, visible, optionList, optionsListRef, searchValue, setSearchValue, searchable, value: values, onChange, clearSelectedValues, setInitialValues, isLimitExceeded, initialValuesOnOpening, setSelectedValues, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, onApply, onClear, emptyOptionsHint, emptyOptionsSearchHint, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, ...props }: SelectBottomSheetProps<MultipleType, DataType>) => ReactElement;
|
package/SelectBottomSheet.js
CHANGED
|
@@ -3,11 +3,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useState, useRef, cloneElement, useCallback } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
6
|
+
import { useTranslation } from '@hh.ru/magritte-common-use-translation';
|
|
6
7
|
import { ActionBar } from '@hh.ru/magritte-ui-action-bar';
|
|
7
8
|
import { BottomSheetFooter, BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
|
|
8
9
|
import { Button } from '@hh.ru/magritte-ui-button';
|
|
9
10
|
import { CellText, Cell } from '@hh.ru/magritte-ui-cell';
|
|
10
|
-
import { ArrowPathClockwiseOutlinedSize24, CheckOutlinedSize24
|
|
11
|
+
import { CrossOutlinedSize24, ArrowPathClockwiseOutlinedSize24, CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
11
12
|
import { SearchInput } from '@hh.ru/magritte-ui-input';
|
|
12
13
|
import { Loader } from '@hh.ru/magritte-ui-loader';
|
|
13
14
|
import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
|
|
@@ -24,7 +25,7 @@ import '@hh.ru/magritte-common-use-disabled';
|
|
|
24
25
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
25
26
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
26
27
|
|
|
27
|
-
var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_12-
|
|
28
|
+
var styles = {"select-bottom-sheet":"magritte-select-bottom-sheet___1RZDJ_12-6-0","selectBottomSheet":"magritte-select-bottom-sheet___1RZDJ_12-6-0","select-bottom-sheet_checkbox":"magritte-select-bottom-sheet_checkbox___hwTgo_12-6-0","selectBottomSheetCheckbox":"magritte-select-bottom-sheet_checkbox___hwTgo_12-6-0","select-bottom-sheet_radio":"magritte-select-bottom-sheet_radio___qvFFV_12-6-0","selectBottomSheetRadio":"magritte-select-bottom-sheet_radio___qvFFV_12-6-0","select-bottom-sheet_without-header":"magritte-select-bottom-sheet_without-header___KOKVh_12-6-0","selectBottomSheetWithoutHeader":"magritte-select-bottom-sheet_without-header___KOKVh_12-6-0","full-screen-placeholder":"magritte-full-screen-placeholder___zPC8k_12-6-0","fullScreenPlaceholder":"magritte-full-screen-placeholder___zPC8k_12-6-0","error-wrapper":"magritte-error-wrapper___P7jYg_12-6-0","errorWrapper":"magritte-error-wrapper___P7jYg_12-6-0"};
|
|
28
29
|
|
|
29
30
|
const SelectOptionDefault = ({ data, input, type, checked, plain, }) => {
|
|
30
31
|
if (type === 'delimiter') {
|
|
@@ -42,14 +43,14 @@ const RenderButtonsContainerDefault = ({ clearButton, applyChangesButton, loadin
|
|
|
42
43
|
const primaryActions = [clearButton, applyChangesButton].filter(Boolean);
|
|
43
44
|
return jsx(ActionBar, { primaryActions: primaryActions });
|
|
44
45
|
};
|
|
45
|
-
const RenderHeaderDefault = ({ onCloseBottomSheet, searchValue, setSearchValue, searchable, headerTitle, onSearchSubmit, optionsCount, onCloseBottomSheetWithUpdateValues, }) => {
|
|
46
|
-
return (jsx(NavigationBar, { title: headerTitle, right: jsx(CrossOutlinedSize24, { onClick: onCloseBottomSheet, "data-qa": "select-bottom-sheet-navigation-close" }), options: searchable && (jsx(SearchInput, { clearable: true, size: "medium", value: searchValue, onChange: setSearchValue, onKeyDown: (event) => {
|
|
46
|
+
const RenderHeaderDefault = ({ onCloseBottomSheet, searchValue, setSearchValue, searchable, headerTitle, onSearchSubmit, optionsCount, onCloseBottomSheetWithUpdateValues, searchTrl, closeTrl, }) => {
|
|
47
|
+
return (jsx(NavigationBar, { title: headerTitle, right: jsx(CrossOutlinedSize24, { onClick: onCloseBottomSheet, "data-qa": "select-bottom-sheet-navigation-close", "aria-label": closeTrl }), options: searchable && (jsx(SearchInput, { clearable: true, size: "medium", value: searchValue, onChange: setSearchValue, onKeyDown: (event) => {
|
|
47
48
|
if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {
|
|
48
49
|
onSearchSubmit(event, onCloseBottomSheet, optionsCount, onCloseBottomSheetWithUpdateValues);
|
|
49
50
|
}
|
|
50
|
-
}, "data-qa": "bottom-sheet-navigation-input", autoComplete: "off" })) }));
|
|
51
|
+
}, "data-qa": "bottom-sheet-navigation-input", autoComplete: "off", "aria-label": searchTrl, "data-magritte-select-seach-input": true })) }));
|
|
51
52
|
};
|
|
52
|
-
const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, applyChangesButton: _applyChangesButton, useInitialValuesOnClearAction, loading, error, renderHeader = RenderHeaderDefault, renderItem = SelectOptionDefault, renderButtonsContainer = RenderButtonsContainerDefault, renderAlertOnExitWithoutSaving, headerTitle, onClose, visible, optionList, optionsListRef, searchValue, setSearchValue, searchable, value: values, onChange, clearSelectedValues, setInitialValues, isLimitExceeded, initialValuesOnOpening, setSelectedValues, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, onApply, onClear, emptyOptionsHint, emptyOptionsSearchHint, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, ...props }) => {
|
|
53
|
+
const SelectBottomSheet = ({ id, type, name, multiple, clearButton: _clearButton, applyChangesButton: _applyChangesButton, useInitialValuesOnClearAction, loading, error, renderHeader = RenderHeaderDefault, renderItem = SelectOptionDefault, renderButtonsContainer = RenderButtonsContainerDefault, renderAlertOnExitWithoutSaving, headerTitle, onClose, visible, optionList, optionsListRef, searchValue, setSearchValue, searchable, value: values, onChange, clearSelectedValues, setInitialValues, isLimitExceeded, initialValuesOnOpening, setSelectedValues, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, onApply, onClear, emptyOptionsHint, emptyOptionsSearchHint, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, ...props }) => {
|
|
53
54
|
const valuesArr = Array.isArray(values) ? values : [values];
|
|
54
55
|
const [alertVisible, setAlertVisible] = useState(false);
|
|
55
56
|
const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);
|
|
@@ -72,11 +73,14 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
|
|
|
72
73
|
onClose();
|
|
73
74
|
}
|
|
74
75
|
};
|
|
76
|
+
const applyTrl = useTranslation('Select', 'apply');
|
|
77
|
+
const clearTrl = useTranslation('Select', 'clear');
|
|
75
78
|
const clearButton = _clearButton &&
|
|
76
79
|
cloneElement(_clearButton, {
|
|
77
80
|
key: 'clearButton',
|
|
78
81
|
size: 'medium',
|
|
79
82
|
'data-qa': 'magritte-select-clear-action-on-xs',
|
|
83
|
+
'aria-label': _clearButton.props['aria-label'] || clearTrl,
|
|
80
84
|
onClick: () => {
|
|
81
85
|
if (useInitialValuesOnClearAction) {
|
|
82
86
|
setInitialValues();
|
|
@@ -94,6 +98,7 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
|
|
|
94
98
|
key: 'applyChangesButton',
|
|
95
99
|
size: 'medium',
|
|
96
100
|
'data-qa': 'magritte-select-apply-on-xs',
|
|
101
|
+
'aria-label': _applyChangesButton.props['aria-label'] || applyTrl,
|
|
97
102
|
onClick: () => {
|
|
98
103
|
setSelectedValues();
|
|
99
104
|
onClose();
|
|
@@ -143,6 +148,8 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
|
|
|
143
148
|
!emptyOptionsHintVisible &&
|
|
144
149
|
!internalError &&
|
|
145
150
|
!showErrorPlaceholder;
|
|
151
|
+
const searchTrl = useTranslation('Select', 'search');
|
|
152
|
+
const closeTrl = useTranslation('Select', 'close');
|
|
146
153
|
const header = renderHeader({
|
|
147
154
|
onCloseBottomSheet: () => onCloseWithAlertCheck(null),
|
|
148
155
|
searchValue,
|
|
@@ -152,9 +159,11 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
|
|
|
152
159
|
onSearchSubmit,
|
|
153
160
|
optionsCount: optionList.length,
|
|
154
161
|
onCloseBottomSheetWithUpdateValues,
|
|
162
|
+
searchTrl,
|
|
163
|
+
closeTrl,
|
|
155
164
|
});
|
|
156
165
|
const haveHeader = Boolean(header);
|
|
157
|
-
return (jsxs(Fragment, { children: [jsxs(BottomSheet, { ...props, ref: optionsListRef, allowScrollWhileFocused: true, keyboardOverlaysFooter: false, visible: visible, showDivider: 'with-scroll', withContentPaddings: showErrorPlaceholder, header: header, onClose: onCloseWithAlertCheck, footer: internalError && innerErrorTrls ? (jsx(BottomSheetFooter, { children: jsx(Button, { mode: "primary", style: "accent", size: "medium", onClick: reload, stretched: true, icon: jsx(ArrowPathClockwiseOutlinedSize24, {}), children: innerErrorTrls.reloadButton }) })) : (footer), onAppear: onBottomSheetOpen, onAfterExit: onBottomSheetClose, children: [internalError && innerErrorTrls && jsx(SelectError, { innerErrorTrls: innerErrorTrls, reload: reload }), emptyOptionsSearchHintVisible && (jsx("div", { className: styles.fullScreenPlaceholder, children: emptyOptionsSearchHint })), emptyOptionsHintVisible && jsx("div", { className: styles.fullScreenPlaceholder, children: emptyOptionsHint }), loading && !showErrorPlaceholder && (jsx("div", { className: styles.fullScreenPlaceholder, children: jsx(Loader, { size: 24 }) })), showErrorPlaceholder && jsx("div", { className: styles.errorWrapper, children: error && error.placeholder }), optionsVisible && (jsx("div", { className: classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`], {
|
|
166
|
+
return (jsxs(Fragment, { children: [jsxs(BottomSheet, { ...props, id: id, ref: optionsListRef, allowScrollWhileFocused: true, keyboardOverlaysFooter: false, visible: visible, showDivider: 'with-scroll', withContentPaddings: showErrorPlaceholder, header: header, onClose: onCloseWithAlertCheck, footer: internalError && innerErrorTrls ? (jsx(BottomSheetFooter, { children: jsx(Button, { mode: "primary", style: "accent", size: "medium", onClick: reload, stretched: true, icon: jsx(ArrowPathClockwiseOutlinedSize24, {}), children: innerErrorTrls.reloadButton }) })) : (footer), onAppear: onBottomSheetOpen, onAfterExit: onBottomSheetClose, children: [internalError && innerErrorTrls && jsx(SelectError, { innerErrorTrls: innerErrorTrls, reload: reload }), emptyOptionsSearchHintVisible && (jsx("div", { className: styles.fullScreenPlaceholder, children: emptyOptionsSearchHint })), emptyOptionsHintVisible && jsx("div", { className: styles.fullScreenPlaceholder, children: emptyOptionsHint }), loading && !showErrorPlaceholder && (jsx("div", { className: styles.fullScreenPlaceholder, children: jsx(Loader, { size: 24 }) })), showErrorPlaceholder && jsx("div", { className: styles.errorWrapper, children: error && error.placeholder }), optionsVisible && (jsx("div", { role: 'listbox', className: classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`], {
|
|
158
167
|
[styles.selectBottomSheetWithoutHeader]: !haveHeader,
|
|
159
168
|
}), "data-qa": "magritte-select-option-list-on-xs", children: optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {
|
|
160
169
|
const checked = Boolean(option.data && getChecked(option.data, values ?? []));
|
|
@@ -175,5 +184,5 @@ const SelectBottomSheet = ({ type, name, multiple, clearButton: _clearButton, ap
|
|
|
175
184
|
})] }));
|
|
176
185
|
};
|
|
177
186
|
|
|
178
|
-
export { SelectBottomSheet };
|
|
187
|
+
export { RenderHeaderDefault, SelectBottomSheet };
|
|
179
188
|
//# sourceMappingURL=SelectBottomSheet.js.map
|
package/SelectBottomSheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBottomSheet.js","sources":["src/SelectBottomSheet.tsx"],"sourcesContent":["import { ComponentProps, ReactElement, ReactNode, cloneElement, useCallback, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { ButtonElement } from '@hh.ru/magritte-ui-button-stack';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport {\n ArrowPathClockwiseOutlinedSize24,\n CrossOutlinedSize24,\n CheckOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { SelectError } from '@hh.ru/magritte-ui-select/SelectError';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n OnChangeAction,\n SelectBottomSheetProps,\n RenderOptionTypeProps,\n RenderHeaderProps,\n RenderButtonsContainerProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType extends StaticDataFetcherItem>({\n data,\n input,\n type,\n checked,\n plain,\n}: RenderOptionTypeProps<DataType>): ReactElement => {\n if (type === 'delimiter') {\n return (\n <CellText maxLines={1} style=\"secondary\">\n {data.text}\n </CellText>\n );\n }\n if (type === 'label') {\n return (\n <Cell Element=\"div\" right={checked && plain ? <CheckOutlinedSize24 /> : undefined} vertPadding>\n <CellText maxLines={1}>{data.text}</CellText>\n </Cell>\n );\n }\n return (\n <Cell Element=\"div\" align=\"center\" right={input}>\n <CellText maxLines={1}>{data.text}</CellText>\n </Cell>\n );\n};\n\nconst RenderButtonsContainerDefault = ({\n clearButton,\n applyChangesButton,\n loading,\n}: RenderButtonsContainerProps): ReactNode => {\n if ((!clearButton && !applyChangesButton) || loading) {\n return null;\n }\n const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n return <ActionBar primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nconst RenderHeaderDefault = ({\n onCloseBottomSheet,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n optionsCount,\n onCloseBottomSheetWithUpdateValues,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n right={<CrossOutlinedSize24 onClick={onCloseBottomSheet} data-qa=\"select-bottom-sheet-navigation-close\" />}\n options={\n searchable && (\n <SearchInput\n clearable\n size=\"medium\"\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={(event) => {\n if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n onSearchSubmit(\n event,\n onCloseBottomSheet,\n optionsCount,\n onCloseBottomSheetWithUpdateValues\n );\n }\n }}\n data-qa=\"bottom-sheet-navigation-input\"\n autoComplete=\"off\"\n />\n )\n }\n />\n );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n type,\n name,\n multiple,\n clearButton: _clearButton,\n applyChangesButton: _applyChangesButton,\n useInitialValuesOnClearAction,\n loading,\n error,\n renderHeader = RenderHeaderDefault,\n renderItem = SelectOptionDefault,\n renderButtonsContainer = RenderButtonsContainerDefault,\n renderAlertOnExitWithoutSaving,\n headerTitle,\n onClose,\n visible,\n optionList,\n optionsListRef,\n searchValue,\n setSearchValue,\n searchable,\n value: values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n isLimitExceeded,\n initialValuesOnOpening,\n setSelectedValues,\n onBottomSheetOpen,\n onBottomSheetClose,\n onSearchSubmit,\n onApply,\n onClear,\n emptyOptionsHint,\n emptyOptionsSearchHint,\n searchInProgress,\n internalError,\n reload,\n innerErrorTrls,\n optionDataQa,\n ...props\n}: SelectBottomSheetProps<MultipleType, DataType>): ReactElement => {\n const valuesArr = Array.isArray(values) ? values : [values];\n const [alertVisible, setAlertVisible] = useState(false);\n const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n const showErrorPlaceholder = Boolean(error);\n const cancelCloseFuncRef = useRef<VoidFunction | null>(null);\n\n const onCloseWithAlertCheck = (cancelCloseFunc: VoidFunction | null) => {\n if (showAlertOnExitWithoutSaving && multiple) {\n const haveUnsavingChanges = !isArraysEquals<string>(\n initialValuesOnOpening.current?.map((item) => item.value) ?? [],\n // eslint-disable-next-line no-nested-ternary\n Array.isArray(values) ? values.map((item) => item.value) : values ? [values.value] : []\n );\n if (haveUnsavingChanges) {\n cancelCloseFuncRef.current = cancelCloseFunc;\n setAlertVisible(true);\n } else {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const clearButton =\n _clearButton &&\n cloneElement(_clearButton, {\n key: 'clearButton',\n size: 'medium',\n 'data-qa': 'magritte-select-clear-action-on-xs',\n onClick: () => {\n if (useInitialValuesOnClearAction) {\n setInitialValues();\n } else {\n clearSelectedValues();\n }\n onClose();\n onClear?.();\n },\n } as Partial<ComponentProps<typeof Button>>);\n\n const needAddChangesButton = multiple && _applyChangesButton;\n const applyChangesButton =\n needAddChangesButton &&\n cloneElement(_applyChangesButton, {\n key: 'applyChangesButton',\n size: 'medium',\n 'data-qa': 'magritte-select-apply-on-xs',\n onClick: () => {\n setSelectedValues();\n onClose();\n onApply?.({\n isMobile: true,\n searchValue,\n optionsCount: optionList.length,\n selectedOptionsCount: valuesArr.length,\n });\n },\n } as Partial<ComponentProps<typeof Button>>);\n\n const handleChange: OnChangeAction<DataType> = useCallback(\n (...args) => {\n if (!multiple) {\n onClose();\n }\n onChange(...args);\n },\n [multiple, onChange, onClose]\n );\n\n const emptyOptionsHintVisible =\n optionList.length === 0 &&\n !searchValue &&\n !!emptyOptionsHint &&\n !loading &&\n !showErrorPlaceholder &&\n !searchInProgress &&\n !internalError;\n\n const emptyOptionsSearchHintVisible =\n optionList.length === 0 &&\n searchValue &&\n !!emptyOptionsSearchHint &&\n !loading &&\n !showErrorPlaceholder &&\n !searchInProgress &&\n !internalError;\n\n const footer = !showErrorPlaceholder ? (\n renderButtonsContainer({\n clearButton,\n applyChangesButton,\n searchValue,\n optionsCount: optionList.length,\n loading,\n isError: Boolean(internalError && innerErrorTrls),\n emptyOptionsHintVisible: Boolean(emptyOptionsHintVisible || emptyOptionsSearchHintVisible),\n })\n ) : (\n <BottomSheetFooter>{error && error.resetButton}</BottomSheetFooter>\n );\n\n const onCloseBottomSheetWithUpdateValues = () => {\n setSelectedValues();\n onCloseWithAlertCheck(null);\n };\n\n const optionsVisible =\n !loading &&\n !emptyOptionsSearchHintVisible &&\n !emptyOptionsHintVisible &&\n !internalError &&\n !showErrorPlaceholder;\n\n const header = renderHeader({\n onCloseBottomSheet: () => onCloseWithAlertCheck(null),\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n optionsCount: optionList.length,\n onCloseBottomSheetWithUpdateValues,\n });\n const haveHeader = Boolean(header);\n\n return (\n <>\n <BottomSheet\n {...props}\n ref={optionsListRef}\n allowScrollWhileFocused\n keyboardOverlaysFooter={false}\n visible={visible}\n showDivider={'with-scroll'}\n withContentPaddings={showErrorPlaceholder}\n header={header}\n onClose={onCloseWithAlertCheck}\n footer={\n internalError && innerErrorTrls ? (\n <BottomSheetFooter>\n <Button\n mode=\"primary\"\n style=\"accent\"\n size=\"medium\"\n onClick={reload}\n stretched\n icon={<ArrowPathClockwiseOutlinedSize24 />}\n >\n {innerErrorTrls.reloadButton}\n </Button>\n </BottomSheetFooter>\n ) : (\n footer\n )\n }\n onAppear={onBottomSheetOpen}\n onAfterExit={onBottomSheetClose}\n >\n {internalError && innerErrorTrls && <SelectError innerErrorTrls={innerErrorTrls} reload={reload} />}\n {emptyOptionsSearchHintVisible && (\n <div className={styles.fullScreenPlaceholder}>{emptyOptionsSearchHint}</div>\n )}\n {emptyOptionsHintVisible && <div className={styles.fullScreenPlaceholder}>{emptyOptionsHint}</div>}\n {loading && !showErrorPlaceholder && (\n <div className={styles.fullScreenPlaceholder}>\n <Loader size={24} />\n </div>\n )}\n {showErrorPlaceholder && <div className={styles.errorWrapper}>{error && error.placeholder}</div>}\n {optionsVisible && (\n <div\n className={classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`], {\n [styles.selectBottomSheetWithoutHeader]: !haveHeader,\n })}\n data-qa=\"magritte-select-option-list-on-xs\"\n >\n {optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {\n const checked = Boolean(option.data && getChecked<DataType>(option.data, values ?? []));\n const disabled = !checked && (_disabled || isLimitExceeded);\n return (\n <SelectOption\n key={option.data.value}\n name={name}\n checked={checked}\n onChange={handleChange}\n render={renderItem}\n disabled={disabled}\n type={optionType || type}\n plain={type === 'label'}\n multiple={multiple}\n data-qa={optionDataQa}\n isMobile\n {...option}\n />\n );\n })}\n </div>\n )}\n </BottomSheet>\n {renderAlertOnExitWithoutSaving?.({\n alertVisible,\n onCloseAlert: () => {\n cancelCloseFuncRef.current?.();\n cancelCloseFuncRef.current = null;\n setAlertVisible(false);\n },\n onClosePickerAndAlert: () => {\n cancelCloseFuncRef.current = null;\n setAlertVisible(false);\n onClose();\n },\n })}\n </>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectBottomSheet.js","sources":["src/SelectBottomSheet.tsx"],"sourcesContent":["import { ComponentProps, ReactElement, ReactNode, cloneElement, useCallback, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { ActionBar } from '@hh.ru/magritte-ui-action-bar';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { ButtonElement } from '@hh.ru/magritte-ui-button-stack';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport {\n ArrowPathClockwiseOutlinedSize24,\n CrossOutlinedSize24,\n CheckOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { SearchInput } from '@hh.ru/magritte-ui-input';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { SelectError } from '@hh.ru/magritte-ui-select/SelectError';\nimport { SelectOption } from '@hh.ru/magritte-ui-select/SelectOption';\nimport { getChecked } from '@hh.ru/magritte-ui-select/getChecked';\nimport { isArraysEquals } from '@hh.ru/magritte-ui-select/isArraysEquals';\nimport {\n OnChangeAction,\n SelectBottomSheetProps,\n RenderOptionTypeProps,\n RenderHeaderProps,\n RenderButtonsContainerProps,\n} from '@hh.ru/magritte-ui-select/types';\n\nimport styles from './select-bottom-sheet.less';\n\nconst SelectOptionDefault = <DataType extends StaticDataFetcherItem>({\n data,\n input,\n type,\n checked,\n plain,\n}: RenderOptionTypeProps<DataType>): ReactElement => {\n if (type === 'delimiter') {\n return (\n <CellText maxLines={1} style=\"secondary\">\n {data.text}\n </CellText>\n );\n }\n if (type === 'label') {\n return (\n <Cell Element=\"div\" right={checked && plain ? <CheckOutlinedSize24 /> : undefined} vertPadding>\n <CellText maxLines={1}>{data.text}</CellText>\n </Cell>\n );\n }\n return (\n <Cell Element=\"div\" align=\"center\" right={input}>\n <CellText maxLines={1}>{data.text}</CellText>\n </Cell>\n );\n};\n\nconst RenderButtonsContainerDefault = ({\n clearButton,\n applyChangesButton,\n loading,\n}: RenderButtonsContainerProps): ReactNode => {\n if ((!clearButton && !applyChangesButton) || loading) {\n return null;\n }\n const primaryActions = [clearButton, applyChangesButton].filter(Boolean);\n return <ActionBar primaryActions={primaryActions as ButtonElement[]} />;\n};\n\nexport const RenderHeaderDefault = ({\n onCloseBottomSheet,\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n optionsCount,\n onCloseBottomSheetWithUpdateValues,\n searchTrl,\n closeTrl,\n}: RenderHeaderProps): ReactNode => {\n return (\n <NavigationBar\n title={headerTitle}\n right={\n <CrossOutlinedSize24\n onClick={onCloseBottomSheet}\n data-qa=\"select-bottom-sheet-navigation-close\"\n aria-label={closeTrl}\n />\n }\n options={\n searchable && (\n <SearchInput\n clearable\n size=\"medium\"\n value={searchValue}\n onChange={setSearchValue}\n onKeyDown={(event) => {\n if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n onSearchSubmit(\n event,\n onCloseBottomSheet,\n optionsCount,\n onCloseBottomSheetWithUpdateValues\n );\n }\n }}\n data-qa=\"bottom-sheet-navigation-input\"\n autoComplete=\"off\"\n aria-label={searchTrl}\n data-magritte-select-seach-input\n />\n )\n }\n />\n );\n};\n\nexport const SelectBottomSheet = <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({\n id,\n type,\n name,\n multiple,\n clearButton: _clearButton,\n applyChangesButton: _applyChangesButton,\n useInitialValuesOnClearAction,\n loading,\n error,\n renderHeader = RenderHeaderDefault,\n renderItem = SelectOptionDefault,\n renderButtonsContainer = RenderButtonsContainerDefault,\n renderAlertOnExitWithoutSaving,\n headerTitle,\n onClose,\n visible,\n optionList,\n optionsListRef,\n searchValue,\n setSearchValue,\n searchable,\n value: values,\n onChange,\n clearSelectedValues,\n setInitialValues,\n isLimitExceeded,\n initialValuesOnOpening,\n setSelectedValues,\n onBottomSheetOpen,\n onBottomSheetClose,\n onSearchSubmit,\n onApply,\n onClear,\n emptyOptionsHint,\n emptyOptionsSearchHint,\n searchInProgress,\n internalError,\n reload,\n innerErrorTrls,\n optionDataQa,\n ...props\n}: SelectBottomSheetProps<MultipleType, DataType>): ReactElement => {\n const valuesArr = Array.isArray(values) ? values : [values];\n const [alertVisible, setAlertVisible] = useState(false);\n const showAlertOnExitWithoutSaving = Boolean(renderAlertOnExitWithoutSaving);\n const showErrorPlaceholder = Boolean(error);\n const cancelCloseFuncRef = useRef<VoidFunction | null>(null);\n\n const onCloseWithAlertCheck = (cancelCloseFunc: VoidFunction | null) => {\n if (showAlertOnExitWithoutSaving && multiple) {\n const haveUnsavingChanges = !isArraysEquals<string>(\n initialValuesOnOpening.current?.map((item) => item.value) ?? [],\n // eslint-disable-next-line no-nested-ternary\n Array.isArray(values) ? values.map((item) => item.value) : values ? [values.value] : []\n );\n if (haveUnsavingChanges) {\n cancelCloseFuncRef.current = cancelCloseFunc;\n setAlertVisible(true);\n } else {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const applyTrl = useTranslation('Select', 'apply');\n const clearTrl = useTranslation('Select', 'clear');\n const clearButton =\n _clearButton &&\n cloneElement(_clearButton, {\n key: 'clearButton',\n size: 'medium',\n 'data-qa': 'magritte-select-clear-action-on-xs',\n 'aria-label': _clearButton.props['aria-label'] || clearTrl,\n onClick: () => {\n if (useInitialValuesOnClearAction) {\n setInitialValues();\n } else {\n clearSelectedValues();\n }\n onClose();\n onClear?.();\n },\n } as Partial<ComponentProps<typeof Button>>);\n\n const needAddChangesButton = multiple && _applyChangesButton;\n const applyChangesButton =\n needAddChangesButton &&\n cloneElement(_applyChangesButton, {\n key: 'applyChangesButton',\n size: 'medium',\n 'data-qa': 'magritte-select-apply-on-xs',\n 'aria-label': _applyChangesButton.props['aria-label'] || applyTrl,\n onClick: () => {\n setSelectedValues();\n onClose();\n onApply?.({\n isMobile: true,\n searchValue,\n optionsCount: optionList.length,\n selectedOptionsCount: valuesArr.length,\n });\n },\n } as Partial<ComponentProps<typeof Button>>);\n\n const handleChange: OnChangeAction<DataType> = useCallback(\n (...args) => {\n if (!multiple) {\n onClose();\n }\n onChange(...args);\n },\n [multiple, onChange, onClose]\n );\n\n const emptyOptionsHintVisible =\n optionList.length === 0 &&\n !searchValue &&\n !!emptyOptionsHint &&\n !loading &&\n !showErrorPlaceholder &&\n !searchInProgress &&\n !internalError;\n\n const emptyOptionsSearchHintVisible =\n optionList.length === 0 &&\n searchValue &&\n !!emptyOptionsSearchHint &&\n !loading &&\n !showErrorPlaceholder &&\n !searchInProgress &&\n !internalError;\n\n const footer = !showErrorPlaceholder ? (\n renderButtonsContainer({\n clearButton,\n applyChangesButton,\n searchValue,\n optionsCount: optionList.length,\n loading,\n isError: Boolean(internalError && innerErrorTrls),\n emptyOptionsHintVisible: Boolean(emptyOptionsHintVisible || emptyOptionsSearchHintVisible),\n })\n ) : (\n <BottomSheetFooter>{error && error.resetButton}</BottomSheetFooter>\n );\n\n const onCloseBottomSheetWithUpdateValues = () => {\n setSelectedValues();\n onCloseWithAlertCheck(null);\n };\n\n const optionsVisible =\n !loading &&\n !emptyOptionsSearchHintVisible &&\n !emptyOptionsHintVisible &&\n !internalError &&\n !showErrorPlaceholder;\n\n const searchTrl = useTranslation('Select', 'search');\n const closeTrl = useTranslation('Select', 'close');\n const header = renderHeader({\n onCloseBottomSheet: () => onCloseWithAlertCheck(null),\n searchValue,\n setSearchValue,\n searchable,\n headerTitle,\n onSearchSubmit,\n optionsCount: optionList.length,\n onCloseBottomSheetWithUpdateValues,\n searchTrl,\n closeTrl,\n });\n const haveHeader = Boolean(header);\n\n return (\n <>\n <BottomSheet\n {...props}\n id={id}\n ref={optionsListRef}\n allowScrollWhileFocused\n keyboardOverlaysFooter={false}\n visible={visible}\n showDivider={'with-scroll'}\n withContentPaddings={showErrorPlaceholder}\n header={header}\n onClose={onCloseWithAlertCheck}\n footer={\n internalError && innerErrorTrls ? (\n <BottomSheetFooter>\n <Button\n mode=\"primary\"\n style=\"accent\"\n size=\"medium\"\n onClick={reload}\n stretched\n icon={<ArrowPathClockwiseOutlinedSize24 />}\n >\n {innerErrorTrls.reloadButton}\n </Button>\n </BottomSheetFooter>\n ) : (\n footer\n )\n }\n onAppear={onBottomSheetOpen}\n onAfterExit={onBottomSheetClose}\n >\n {internalError && innerErrorTrls && <SelectError innerErrorTrls={innerErrorTrls} reload={reload} />}\n {emptyOptionsSearchHintVisible && (\n <div className={styles.fullScreenPlaceholder}>{emptyOptionsSearchHint}</div>\n )}\n {emptyOptionsHintVisible && <div className={styles.fullScreenPlaceholder}>{emptyOptionsHint}</div>}\n {loading && !showErrorPlaceholder && (\n <div className={styles.fullScreenPlaceholder}>\n <Loader size={24} />\n </div>\n )}\n {showErrorPlaceholder && <div className={styles.errorWrapper}>{error && error.placeholder}</div>}\n {optionsVisible && (\n <div\n role={'listbox'}\n className={classnames(styles.selectBottomSheet, styles[`select-bottom-sheet_${type}`], {\n [styles.selectBottomSheetWithoutHeader]: !haveHeader,\n })}\n data-qa=\"magritte-select-option-list-on-xs\"\n >\n {optionList.map(({ disabled: _disabled, type: optionType, ...option }) => {\n const checked = Boolean(option.data && getChecked<DataType>(option.data, values ?? []));\n const disabled = !checked && (_disabled || isLimitExceeded);\n return (\n <SelectOption\n key={option.data.value}\n name={name}\n checked={checked}\n onChange={handleChange}\n render={renderItem}\n disabled={disabled}\n type={optionType || type}\n plain={type === 'label'}\n multiple={multiple}\n data-qa={optionDataQa}\n isMobile\n {...option}\n />\n );\n })}\n </div>\n )}\n </BottomSheet>\n {renderAlertOnExitWithoutSaving?.({\n alertVisible,\n onCloseAlert: () => {\n cancelCloseFuncRef.current?.();\n cancelCloseFuncRef.current = null;\n setAlertVisible(false);\n },\n onClosePickerAndAlert: () => {\n cancelCloseFuncRef.current = null;\n setAlertVisible(false);\n onClose();\n },\n })}\n </>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/SelectDrop.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import { type ReactElement } from 'react';
|
|
2
2
|
import { StaticDataFetcherItem } from '@hh.ru/magritte-common-data-provider';
|
|
3
|
+
import { ButtonElement } from '@hh.ru/magritte-ui-button-stack';
|
|
4
|
+
import { DropRole } from '@hh.ru/magritte-ui-drop';
|
|
3
5
|
import { SelectDropProps } from '@hh.ru/magritte-ui-select/types';
|
|
4
|
-
export declare const
|
|
6
|
+
export declare const getDropRole: (clearButton: ButtonElement | undefined, applyChangesButton: ButtonElement | undefined, multiple: boolean | undefined) => DropRole;
|
|
7
|
+
export declare const SelectDrop: <MultipleType extends boolean, DataType extends StaticDataFetcherItem>({ activatorRef, type, name, multiple, applyChangesButton: _applyChangesButton, clearButton: _clearButton, useInitialValuesOnClearAction, loading, renderItem, renderButtonsContainer, visible, optionList, optionsListRef, searchValue, setSearchValue, maxWidth, value: values, onChange, onClose, clearSelectedValues, setInitialValues, isLimitExceeded, plain, searchable, widthEqualToActivator, forceDropVisibleWithEmptyOptions, renderContentBefore, setForcedState, setSelectedValues, maxHeight, onDropClose, onDropOpen, emptyOptionsHint, emptyOptionsSearchHint, onApply, onClear, searchInProgress, internalError, reload, innerErrorTrls, optionDataQa, dropWidth, id, ...props }: SelectDropProps<MultipleType, DataType>) => ReactElement;
|