@hh.ru/magritte-ui-suggest 6.0.14 → 6.1.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.
Files changed (10) hide show
  1. package/Suggest.js +20 -14
  2. package/Suggest.js.map +1 -1
  3. package/SuggestPicker.js +1 -1
  4. package/index.css +12 -12
  5. package/index.js +1 -1
  6. package/package.json +3 -2
  7. package/{sectionRenderers-DplRmg4w.js → sectionRenderers-u2DGMJQo.js} +2 -2
  8. package/{sectionRenderers-DplRmg4w.js.map → sectionRenderers-u2DGMJQo.js.map} +1 -1
  9. package/sectionRenderers.js +1 -1
  10. package/types.d.ts +16 -7
package/Suggest.js CHANGED
@@ -6,7 +6,7 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
6
6
  import { SuggestPicker } from './SuggestPicker.js';
7
7
  import { DataProviderError } from './dataProvider.js';
8
8
  import { useSuggestKeyboardNav } from './useSuggestKeyboardNav.js';
9
- import { s as styles } from './sectionRenderers-DplRmg4w.js';
9
+ import { s as styles } from './sectionRenderers-u2DGMJQo.js';
10
10
  import 'classnames';
11
11
  import '@hh.ru/magritte-ui-bottom-sheet';
12
12
  import '@hh.ru/magritte-ui-button';
@@ -22,14 +22,18 @@ import '@hh.ru/magritte-ui-cell';
22
22
  import '@hh.ru/magritte-ui-chips';
23
23
  import '@hh.ru/magritte-ui-typography';
24
24
 
25
- const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectValidator = () => true, navigationBarProps, maxHeight = 460, itemsGap = 4, onBlur, topContent, bottomContent, dropWidth, errorPlaceholder, trls, onChange, onDropOpen, onDropClose, onBottomSheetOpen, onBottomSheetClose, }, ref) {
25
+ const SuggestTriggerDefault = (props) => {
26
+ const { component: TriggerComponent, props: triggerProps } = props;
27
+ return (jsx(TriggerComponent, { ...triggerProps }));
28
+ };
29
+ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectValidator = () => true, navigationBarProps, maxHeight = 460, itemsGap = 4, onBlur, topContent, bottomContent, dropWidth, errorPlaceholder, trls, onChange, onDropOpen, onDropClose, onBottomSheetOpen, onBottomSheetClose, renderTrigger = SuggestTriggerDefault, }, ref) {
26
30
  const { component: InputComponent, props: inputProps } = input;
27
31
  const [inputValueState, setInputValueState] = useState(inputProps.value || '');
28
32
  const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown } = inputProps;
29
33
  const [requestResult, setRequestResult] = useState(null);
30
34
  const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState(false);
31
35
  const inputRef = useRef(null);
32
- const wrapperInputRef = useRef(null);
36
+ const wrapperRef = useRef(null);
33
37
  const suggestContainerRef = useRef(null);
34
38
  const inputContainerRef = useRef(null);
35
39
  const inputRefMulti = useMultipleRefs(inputRef, ref);
@@ -102,17 +106,19 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
102
106
  onKeyDown(event);
103
107
  onInputKeyDown?.(event);
104
108
  }, [onInputKeyDown, onKeyDown]);
105
- const actualInputProps = {
106
- ...inputProps,
107
- value: actualInputValue,
108
- onFocus: onFocusHandler,
109
- onChange: onChangeHandler,
110
- onKeyDown: onKeyDownHandler,
111
- ref: inputRefMulti,
112
- wrapperRef: wrapperInputRef,
113
- autoComplete: 'off',
114
- };
115
- return (jsxs(Fragment, { children: [jsx("div", { ref: inputContainerRef, className: styles.suggestInputContainer, children: jsx(InputComponent, { ...actualInputProps }) }), jsx(SuggestPicker, { data: requestResult?.result, activatorRef: wrapperInputRef, inputRef: inputRef, inputFocused: focused, currentInputValueSelectedFromSuggest: valueSelectedFromSuggest !== false, onValueSelect: onValueSelectHandler, maxHeight: maxHeight, navigationBarProps: navigationBarProps, suggestContainerRef: suggestContainerRef, itemsGap: itemsGap, onBottomSheetClose: handleBottomSheetClose, onBottomSheetOpen: onBottomSheetOpen, onDropOpen: onDropOpen, onDropClose: onDropClose, inputValue: actualInputValue, topContent: topContent, bottomContent: bottomContent, dropWidth: dropWidth, isError: isError, trls: trls, errorPlaceholder: errorPlaceholder, onClickReload: () => {
109
+ return (jsxs(Fragment, { children: [jsx("div", { ref: inputContainerRef, className: styles.suggestInputContainer, children: renderTrigger({
110
+ component: InputComponent,
111
+ props: {
112
+ ...inputProps,
113
+ value: actualInputValue,
114
+ onFocus: onFocusHandler,
115
+ onChange: onChangeHandler,
116
+ onKeyDown: onKeyDownHandler,
117
+ ref: inputRefMulti,
118
+ wrapperRef,
119
+ autoComplete: 'off',
120
+ },
121
+ }) }), jsx(SuggestPicker, { data: requestResult?.result, activatorRef: wrapperRef, inputRef: inputRef, inputFocused: focused, currentInputValueSelectedFromSuggest: valueSelectedFromSuggest !== false, onValueSelect: onValueSelectHandler, maxHeight: maxHeight, navigationBarProps: navigationBarProps, suggestContainerRef: suggestContainerRef, itemsGap: itemsGap, onBottomSheetClose: handleBottomSheetClose, onBottomSheetOpen: onBottomSheetOpen, onDropOpen: onDropOpen, onDropClose: onDropClose, inputValue: actualInputValue, topContent: topContent, bottomContent: bottomContent, dropWidth: dropWidth, isError: isError, trls: trls, errorPlaceholder: errorPlaceholder, onClickReload: () => {
116
122
  requestData(actualInputValue);
117
123
  }, input: {
118
124
  component: InputComponent,
package/Suggest.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Suggest.js","sources":["../src/Suggest.tsx"],"sourcesContent":["import {\n FocusEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n KeyboardEventHandler,\n forwardRef,\n ForwardedRef,\n} from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SuggestPicker } from '@hh.ru/magritte-ui-suggest/SuggestPicker';\nimport { DataProviderError } from '@hh.ru/magritte-ui-suggest/dataProvider';\nimport {\n DataProviderRequest,\n DataProviderResult,\n SuggestProps,\n SuggestInputComponent,\n InputProp,\n ControlledInputProps,\n NativeFocusEventHandler,\n} from '@hh.ru/magritte-ui-suggest/types';\nimport { useSuggestKeyboardNav } from '@hh.ru/magritte-ui-suggest/useSuggestKeyboardNav';\n\nimport styles from './suggest.less';\n\nconst SuggestComponent = function <K, T extends SuggestInputComponent>(\n {\n dataProvider,\n input,\n inputValue,\n onSelectValidator = () => true,\n navigationBarProps,\n maxHeight = 460,\n itemsGap = 4,\n onBlur,\n topContent,\n bottomContent,\n dropWidth,\n errorPlaceholder,\n trls,\n onChange,\n onDropOpen,\n onDropClose,\n onBottomSheetOpen,\n onBottomSheetClose,\n }: SuggestProps<K, T>,\n ref: ForwardedRef<HTMLElement>\n): ReactElement | null {\n const { component: InputComponent, props: inputProps } = input;\n const [inputValueState, setInputValueState] = useState(inputProps.value || '');\n const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown } = inputProps;\n const [requestResult, setRequestResult] = useState<{ query: string; result: DataProviderResult<K> } | null>(null);\n const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState<string | false>(false);\n const inputRef = useRef<HTMLInputElement>(null);\n const wrapperInputRef = useRef<HTMLInputElement>(null);\n const suggestContainerRef = useRef<HTMLElement>(null);\n const inputContainerRef = useRef<HTMLDivElement>(null);\n const inputRefMulti = useMultipleRefs(inputRef, ref);\n const onBlurRef = useRef<NativeFocusEventHandler | undefined>(onBlur);\n onBlurRef.current = onBlur; // update actual callback\n const { isMobile } = useBreakpoint();\n const [isError, setIsError] = useState(false);\n\n const currentRequestRef = useRef<DataProviderRequest>();\n const actualInputValue = inputValue === undefined ? inputValueState : inputValue;\n\n const { focused, onKeyDown, onFocus, ...rest } = useSuggestKeyboardNav(\n suggestContainerRef,\n inputContainerRef,\n setValueSelectedFromSuggest,\n actualInputValue,\n inputRef,\n onBlurRef\n );\n\n const handleBottomSheetClose = () => {\n rest.onBottomSheetClose();\n onBottomSheetClose?.();\n };\n\n const onChangeHandler = useCallback(\n (value: string, skipSuggestChangeHandler = false) => {\n if (inputValue === undefined) {\n setInputValueState(value);\n }\n !skipSuggestChangeHandler && onChange?.(value, false);\n onInputChange?.(value);\n },\n [inputValue, setInputValueState, onInputChange, onChange]\n );\n\n const requestData = useCallback(\n (query: string) => {\n setIsError(false);\n currentRequestRef.current?.cancel();\n const request = dataProvider(query);\n request.then(\n (result) => {\n setRequestResult({ query, result });\n },\n (event) => {\n // включаем error state если это НЕ ошибка, вызванная `minCharsCount` или отменненым запросом\n if (!(event instanceof DataProviderError)) {\n setIsError(true);\n }\n setRequestResult(null);\n }\n );\n currentRequestRef.current = request;\n },\n [dataProvider]\n );\n\n useEffect(() => {\n if (valueSelectedFromSuggest !== false && requestResult?.query !== actualInputValue) {\n setRequestResult(null);\n }\n if (valueSelectedFromSuggest !== actualInputValue.trim()) {\n setValueSelectedFromSuggest(false);\n if (focused) {\n requestData(actualInputValue);\n }\n }\n\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [actualInputValue, requestData, focused]);\n\n const onFocusHandler = useCallback<FocusEventHandler<HTMLElement>>(\n (event) => {\n setValueSelectedFromSuggest(false);\n if (actualInputValue !== requestResult?.query) {\n setRequestResult(null);\n requestData(actualInputValue);\n }\n\n onInputFocus?.(event);\n onFocus(event);\n },\n [actualInputValue, requestResult?.query, onInputFocus, onFocus, requestData]\n );\n\n const onValueSelectHandler = useCallback(\n (value: string, data: K | undefined) => {\n if (!onSelectValidator(value, data)) {\n return;\n }\n if (!isMobile) {\n inputRef.current?.focus();\n }\n onChangeHandler(value, true);\n onChange?.(value, true, data);\n setValueSelectedFromSuggest(value);\n },\n [onSelectValidator, isMobile, onChangeHandler, onChange]\n );\n\n const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (event) => {\n onKeyDown(event);\n onInputKeyDown?.(event);\n },\n [onInputKeyDown, onKeyDown]\n );\n\n const actualInputProps = {\n ...inputProps,\n value: actualInputValue,\n onFocus: onFocusHandler,\n onChange: onChangeHandler,\n onKeyDown: onKeyDownHandler,\n ref: inputRefMulti,\n wrapperRef: wrapperInputRef,\n autoComplete: 'off',\n } as unknown as JSX.IntrinsicAttributes & JSX.LibraryManagedAttributes<T, ControlledInputProps>;\n\n return (\n <>\n <div ref={inputContainerRef} className={styles.suggestInputContainer}>\n <InputComponent {...actualInputProps} />\n </div>\n <SuggestPicker\n data={requestResult?.result}\n activatorRef={wrapperInputRef}\n inputRef={inputRef}\n inputFocused={focused}\n currentInputValueSelectedFromSuggest={valueSelectedFromSuggest !== false}\n onValueSelect={onValueSelectHandler}\n maxHeight={maxHeight}\n navigationBarProps={navigationBarProps}\n suggestContainerRef={suggestContainerRef}\n itemsGap={itemsGap}\n onBottomSheetClose={handleBottomSheetClose}\n onBottomSheetOpen={onBottomSheetOpen}\n onDropOpen={onDropOpen}\n onDropClose={onDropClose}\n inputValue={actualInputValue}\n topContent={topContent}\n bottomContent={bottomContent}\n dropWidth={dropWidth}\n isError={isError}\n trls={trls}\n errorPlaceholder={errorPlaceholder}\n onClickReload={() => {\n requestData(actualInputValue);\n }}\n input={\n {\n component: InputComponent,\n props: {\n ...input.props,\n onFocus: onFocusHandler,\n onChange: onChangeHandler,\n value: actualInputValue,\n onKeyDown: onKeyDownHandler,\n },\n } as InputProp<T>\n }\n />\n </>\n );\n};\n\nconst Suggest = forwardRef(SuggestComponent) as (<K, T extends SuggestInputComponent>(\n props: SuggestProps<K, T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSuggest.displayName = 'Suggest';\n\nexport { Suggest };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Suggest.js","sources":["../src/Suggest.tsx"],"sourcesContent":["import {\n FocusEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n KeyboardEventHandler,\n forwardRef,\n ForwardedRef,\n} from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SuggestPicker } from '@hh.ru/magritte-ui-suggest/SuggestPicker';\nimport { DataProviderError } from '@hh.ru/magritte-ui-suggest/dataProvider';\nimport {\n DataProviderRequest,\n DataProviderResult,\n SuggestProps,\n SuggestInputComponent,\n InputProp,\n ControlledInputProps,\n NativeFocusEventHandler,\n} from '@hh.ru/magritte-ui-suggest/types';\nimport { useSuggestKeyboardNav } from '@hh.ru/magritte-ui-suggest/useSuggestKeyboardNav';\n\nimport styles from './suggest.less';\n\nconst SuggestTriggerDefault = <T extends SuggestInputComponent>(props: InputProp<T>): ReactElement => {\n const { component: TriggerComponent, props: triggerProps } = props;\n return (\n <TriggerComponent\n {...(triggerProps as unknown as JSX.IntrinsicAttributes &\n JSX.LibraryManagedAttributes<T, ControlledInputProps>)}\n />\n );\n};\n\nconst SuggestComponent = function <K, T extends SuggestInputComponent>(\n {\n dataProvider,\n input,\n inputValue,\n onSelectValidator = () => true,\n navigationBarProps,\n maxHeight = 460,\n itemsGap = 4,\n onBlur,\n topContent,\n bottomContent,\n dropWidth,\n errorPlaceholder,\n trls,\n onChange,\n onDropOpen,\n onDropClose,\n onBottomSheetOpen,\n onBottomSheetClose,\n renderTrigger = SuggestTriggerDefault,\n }: SuggestProps<K, T>,\n ref: ForwardedRef<HTMLElement>\n): ReactElement | null {\n const { component: InputComponent, props: inputProps } = input;\n const [inputValueState, setInputValueState] = useState(inputProps.value || '');\n const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown } = inputProps;\n const [requestResult, setRequestResult] = useState<{ query: string; result: DataProviderResult<K> } | null>(null);\n const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState<string | false>(false);\n const inputRef = useRef<HTMLInputElement>(null);\n const wrapperRef = useRef<HTMLElement>(null);\n const suggestContainerRef = useRef<HTMLElement>(null);\n const inputContainerRef = useRef<HTMLDivElement>(null);\n const inputRefMulti = useMultipleRefs(inputRef, ref);\n const onBlurRef = useRef<NativeFocusEventHandler | undefined>(onBlur);\n onBlurRef.current = onBlur; // update actual callback\n const { isMobile } = useBreakpoint();\n const [isError, setIsError] = useState(false);\n\n const currentRequestRef = useRef<DataProviderRequest>();\n const actualInputValue = inputValue === undefined ? inputValueState : inputValue;\n\n const { focused, onKeyDown, onFocus, ...rest } = useSuggestKeyboardNav(\n suggestContainerRef,\n inputContainerRef,\n setValueSelectedFromSuggest,\n actualInputValue,\n inputRef,\n onBlurRef\n );\n\n const handleBottomSheetClose = () => {\n rest.onBottomSheetClose();\n onBottomSheetClose?.();\n };\n\n const onChangeHandler = useCallback(\n (value: string, skipSuggestChangeHandler = false) => {\n if (inputValue === undefined) {\n setInputValueState(value);\n }\n !skipSuggestChangeHandler && onChange?.(value, false);\n onInputChange?.(value);\n },\n [inputValue, setInputValueState, onInputChange, onChange]\n );\n\n const requestData = useCallback(\n (query: string) => {\n setIsError(false);\n currentRequestRef.current?.cancel();\n const request = dataProvider(query);\n request.then(\n (result) => {\n setRequestResult({ query, result });\n },\n (event) => {\n // включаем error state если это НЕ ошибка, вызванная `minCharsCount` или отменненым запросом\n if (!(event instanceof DataProviderError)) {\n setIsError(true);\n }\n setRequestResult(null);\n }\n );\n currentRequestRef.current = request;\n },\n [dataProvider]\n );\n\n useEffect(() => {\n if (valueSelectedFromSuggest !== false && requestResult?.query !== actualInputValue) {\n setRequestResult(null);\n }\n if (valueSelectedFromSuggest !== actualInputValue.trim()) {\n setValueSelectedFromSuggest(false);\n if (focused) {\n requestData(actualInputValue);\n }\n }\n\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [actualInputValue, requestData, focused]);\n\n const onFocusHandler = useCallback<FocusEventHandler<HTMLElement>>(\n (event) => {\n setValueSelectedFromSuggest(false);\n if (actualInputValue !== requestResult?.query) {\n setRequestResult(null);\n requestData(actualInputValue);\n }\n\n onInputFocus?.(event);\n onFocus(event);\n },\n [actualInputValue, requestResult?.query, onInputFocus, onFocus, requestData]\n );\n\n const onValueSelectHandler = useCallback(\n (value: string, data: K | undefined) => {\n if (!onSelectValidator(value, data)) {\n return;\n }\n if (!isMobile) {\n inputRef.current?.focus();\n }\n onChangeHandler(value, true);\n onChange?.(value, true, data);\n setValueSelectedFromSuggest(value);\n },\n [onSelectValidator, isMobile, onChangeHandler, onChange]\n );\n\n const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (event) => {\n onKeyDown(event);\n onInputKeyDown?.(event);\n },\n [onInputKeyDown, onKeyDown]\n );\n\n return (\n <>\n <div ref={inputContainerRef} className={styles.suggestInputContainer}>\n {renderTrigger({\n component: InputComponent,\n props: {\n ...inputProps,\n value: actualInputValue,\n onFocus: onFocusHandler,\n onChange: onChangeHandler,\n onKeyDown: onKeyDownHandler,\n ref: inputRefMulti,\n wrapperRef,\n autoComplete: 'off',\n },\n } as unknown as InputProp<T>)}\n </div>\n <SuggestPicker\n data={requestResult?.result}\n activatorRef={wrapperRef}\n inputRef={inputRef}\n inputFocused={focused}\n currentInputValueSelectedFromSuggest={valueSelectedFromSuggest !== false}\n onValueSelect={onValueSelectHandler}\n maxHeight={maxHeight}\n navigationBarProps={navigationBarProps}\n suggestContainerRef={suggestContainerRef}\n itemsGap={itemsGap}\n onBottomSheetClose={handleBottomSheetClose}\n onBottomSheetOpen={onBottomSheetOpen}\n onDropOpen={onDropOpen}\n onDropClose={onDropClose}\n inputValue={actualInputValue}\n topContent={topContent}\n bottomContent={bottomContent}\n dropWidth={dropWidth}\n isError={isError}\n trls={trls}\n errorPlaceholder={errorPlaceholder}\n onClickReload={() => {\n requestData(actualInputValue);\n }}\n input={\n {\n component: InputComponent,\n props: {\n ...input.props,\n onFocus: onFocusHandler,\n onChange: onChangeHandler,\n value: actualInputValue,\n onKeyDown: onKeyDownHandler,\n },\n } as InputProp<T>\n }\n />\n </>\n );\n};\n\nconst Suggest = forwardRef(SuggestComponent) as (<K, T extends SuggestInputComponent>(\n props: SuggestProps<K, T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSuggest.displayName = 'Suggest';\n\nexport { Suggest };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,qBAAqB,GAAG,CAAkC,KAAmB,KAAkB;IACjG,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;AACnE,IAAA,QACIA,GAAC,CAAA,gBAAgB,OACR,YACqD,EAAA,CAC5D,EACJ;AACN,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,UACrB,EACI,YAAY,EACZ,KAAK,EACL,UAAU,EACV,iBAAiB,GAAG,MAAM,IAAI,EAC9B,kBAAkB,EAClB,SAAS,GAAG,GAAG,EACf,QAAQ,GAAG,CAAC,EACZ,MAAM,EACN,UAAU,EACV,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,GAAG,qBAAqB,GACpB,EACrB,GAA8B,EAAA;IAE9B,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;AAC/D,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;AAC/E,IAAA,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC;IACjG,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA0D,IAAI,CAAC,CAAC;IAClH,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAiB,KAAK,CAAC,CAAC;AAChG,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;AAChD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;AACtD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAsC,MAAM,CAAC,CAAC;AACtE,IAAA,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;AAC3B,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAE9C,IAAA,MAAM,iBAAiB,GAAG,MAAM,EAAuB,CAAC;AACxD,IAAA,MAAM,gBAAgB,GAAG,UAAU,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IAEjF,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,qBAAqB,CAClE,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,gBAAgB,EAChB,QAAQ,EACR,SAAS,CACZ,CAAC;IAEF,MAAM,sBAAsB,GAAG,MAAK;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,kBAAkB,IAAI,CAAC;AAC3B,KAAC,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,KAAa,EAAE,wBAAwB,GAAG,KAAK,KAAI;QAChD,IAAI,UAAU,KAAK,SAAS,EAAE;YAC1B,kBAAkB,CAAC,KAAK,CAAC,CAAC;AAC7B,SAAA;QACD,CAAC,wBAAwB,IAAI,QAAQ,GAAG,KAAK,EAAE,KAAK,CAAC,CAAC;AACtD,QAAA,aAAa,GAAG,KAAK,CAAC,CAAC;KAC1B,EACD,CAAC,UAAU,EAAE,kBAAkB,EAAE,aAAa,EAAE,QAAQ,CAAC,CAC5D,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAa,KAAI;QACd,UAAU,CAAC,KAAK,CAAC,CAAC;AAClB,QAAA,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;AACpC,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AACpC,QAAA,OAAO,CAAC,IAAI,CACR,CAAC,MAAM,KAAI;AACP,YAAA,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;AACxC,SAAC,EACD,CAAC,KAAK,KAAI;;AAEN,YAAA,IAAI,EAAE,KAAK,YAAY,iBAAiB,CAAC,EAAE;gBACvC,UAAU,CAAC,IAAI,CAAC,CAAC;AACpB,aAAA;YACD,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC3B,SAAC,CACJ,CAAC;AACF,QAAA,iBAAiB,CAAC,OAAO,GAAG,OAAO,CAAC;AACxC,KAAC,EACD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,SAAS,CAAC,MAAK;QACX,IAAI,wBAAwB,KAAK,KAAK,IAAI,aAAa,EAAE,KAAK,KAAK,gBAAgB,EAAE;YACjF,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC1B,SAAA;AACD,QAAA,IAAI,wBAAwB,KAAK,gBAAgB,CAAC,IAAI,EAAE,EAAE;YACtD,2BAA2B,CAAC,KAAK,CAAC,CAAC;AACnC,YAAA,IAAI,OAAO,EAAE;gBACT,WAAW,CAAC,gBAAgB,CAAC,CAAC;AACjC,aAAA;AACJ,SAAA;;KAGJ,EAAE,CAAC,gBAAgB,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAE7C,IAAA,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,KAAK,KAAI;QACN,2BAA2B,CAAC,KAAK,CAAC,CAAC;AACnC,QAAA,IAAI,gBAAgB,KAAK,aAAa,EAAE,KAAK,EAAE;YAC3C,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,WAAW,CAAC,gBAAgB,CAAC,CAAC;AACjC,SAAA;AAED,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;QACtB,OAAO,CAAC,KAAK,CAAC,CAAC;AACnB,KAAC,EACD,CAAC,gBAAgB,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,CAAC,CAC/E,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CACpC,CAAC,KAAa,EAAE,IAAmB,KAAI;AACnC,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;YACjC,OAAO;AACV,SAAA;QACD,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;AAC7B,SAAA;AACD,QAAA,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC7B,QAAQ,GAAG,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC9B,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACtC,EACD,CAAC,iBAAiB,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,CAAC,CAC3D,CAAC;AAEF,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAK,KAAI;QACN,SAAS,CAAC,KAAK,CAAC,CAAC;AACjB,QAAA,cAAc,GAAG,KAAK,CAAC,CAAC;AAC5B,KAAC,EACD,CAAC,cAAc,EAAE,SAAS,CAAC,CAC9B,CAAC;AAEF,IAAA,QACIC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIF,GAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA,QAAA,EAC/D,aAAa,CAAC;AACX,oBAAA,SAAS,EAAE,cAAc;AACzB,oBAAA,KAAK,EAAE;AACH,wBAAA,GAAG,UAAU;AACb,wBAAA,KAAK,EAAE,gBAAgB;AACvB,wBAAA,OAAO,EAAE,cAAc;AACvB,wBAAA,QAAQ,EAAE,eAAe;AACzB,wBAAA,SAAS,EAAE,gBAAgB;AAC3B,wBAAA,GAAG,EAAE,aAAa;wBAClB,UAAU;AACV,wBAAA,YAAY,EAAE,KAAK;AACtB,qBAAA;iBACuB,CAAC,EAAA,CAC3B,EACNA,GAAC,CAAA,aAAa,IACV,IAAI,EAAE,aAAa,EAAE,MAAM,EAC3B,YAAY,EAAE,UAAU,EACxB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,OAAO,EACrB,oCAAoC,EAAE,wBAAwB,KAAK,KAAK,EACxE,aAAa,EAAE,oBAAoB,EACnC,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,sBAAsB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,gBAAgB,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,MAAK;oBAChB,WAAW,CAAC,gBAAgB,CAAC,CAAC;iBACjC,EACD,KAAK,EACD;AACI,oBAAA,SAAS,EAAE,cAAc;AACzB,oBAAA,KAAK,EAAE;wBACH,GAAG,KAAK,CAAC,KAAK;AACd,wBAAA,OAAO,EAAE,cAAc;AACvB,wBAAA,QAAQ,EAAE,eAAe;AACzB,wBAAA,KAAK,EAAE,gBAAgB;AACvB,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;iBACY,EAEvB,CAAA,CAAA,EAAA,CACH,EACL;AACN,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAES;AAEpD,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
package/SuggestPicker.js CHANGED
@@ -8,7 +8,7 @@ import { Button } from '@hh.ru/magritte-ui-button';
8
8
  import { Drop } from '@hh.ru/magritte-ui-drop';
9
9
  import { ArrowPathOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
10
10
  import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
11
- import { r as renderSection, s as styles } from './sectionRenderers-DplRmg4w.js';
11
+ import { r as renderSection, s as styles } from './sectionRenderers-u2DGMJQo.js';
12
12
  import '@hh.ru/magritte-ui-card';
13
13
  import '@hh.ru/magritte-ui-cell';
14
14
  import '@hh.ru/magritte-ui-chips';
package/index.css CHANGED
@@ -8,57 +8,57 @@
8
8
  .magritte-night-theme{
9
9
  --magritte-color-text-primary-v19-0-0:#ffffff;
10
10
  }
11
- .magritte-chips-section-container___Z7N-E_6-0-14{
11
+ .magritte-chips-section-container___Z7N-E_6-1-0{
12
12
  display:flex;
13
13
  gap:12px;
14
14
  flex:1 1;
15
15
  flex-wrap:wrap;
16
16
  }
17
- .magritte-chips-section-container_with-other-items___eJZAr_6-0-14{
17
+ .magritte-chips-section-container_with-other-items___eJZAr_6-1-0{
18
18
  padding-bottom:16px;
19
19
  }
20
- .magritte-suggest-items-container___SKj-g_6-0-14{
20
+ .magritte-suggest-items-container___SKj-g_6-1-0{
21
21
  display:flex;
22
22
  flex-direction:column;
23
23
  }
24
- .magritte-suggest-items-container___SKj-g_6-0-14 .focus-visible{
24
+ .magritte-suggest-items-container___SKj-g_6-1-0 .focus-visible{
25
25
  z-index:1;
26
26
  position:relative;
27
27
  }
28
- .magritte-suggest-items-container-wrapper___T2L5U_6-0-14{
28
+ .magritte-suggest-items-container-wrapper___T2L5U_6-1-0{
29
29
  padding:var(--magritte-static-space-400-v19-0-0);
30
30
  margin:calc(-1 * var(--magritte-static-space-400-v19-0-0));
31
31
  display:flex;
32
32
  flex-direction:column;
33
33
  }
34
34
  @media (min-width: 1020px){
35
- body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_6-0-14{
35
+ body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_6-1-0{
36
36
  padding:var(--magritte-static-space-300-v19-0-0);
37
37
  }
38
38
  }
39
39
  @media (min-width: 1024px){
40
- body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_6-0-14{
40
+ body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_6-1-0{
41
41
  padding:var(--magritte-static-space-300-v19-0-0);
42
42
  }
43
43
  }
44
- .magritte-suggest-input-container___l3OkM_6-0-14{
44
+ .magritte-suggest-input-container___l3OkM_6-1-0{
45
45
  --magritte-ui-input-caret-color-override:transparent;
46
46
  display:inline-block;
47
47
  width:100%;
48
48
  }
49
49
  @media (min-width: 700px){
50
- body.magritte-old-layout .magritte-suggest-input-container___l3OkM_6-0-14{
50
+ body.magritte-old-layout .magritte-suggest-input-container___l3OkM_6-1-0{
51
51
  --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v19-0-0);
52
52
  }
53
53
  }
54
54
  @media (min-width: 600px){
55
- body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_6-0-14{
55
+ body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_6-1-0{
56
56
  --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v19-0-0);
57
57
  }
58
58
  }
59
- .magritte-bottom-sheet-input-hide-caret___ikoig_6-0-14{
59
+ .magritte-bottom-sheet-input-hide-caret___ikoig_6-1-0{
60
60
  --magritte-ui-input-caret-color-override:transparent;
61
61
  }
62
- .magritte-error-wrapper___Ui4xt_6-0-14{
62
+ .magritte-error-wrapper___Ui4xt_6-1-0{
63
63
  height:100%;
64
64
  }
package/index.js CHANGED
@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-button';
13
13
  import '@hh.ru/magritte-ui-drop';
14
14
  import '@hh.ru/magritte-ui-icon/icon';
15
15
  import '@hh.ru/magritte-ui-navigation-bar';
16
- import './sectionRenderers-DplRmg4w.js';
16
+ import './sectionRenderers-u2DGMJQo.js';
17
17
  import '@hh.ru/magritte-ui-card';
18
18
  import '@hh.ru/magritte-ui-cell';
19
19
  import '@hh.ru/magritte-ui-chips';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-suggest",
3
- "version": "6.0.14",
3
+ "version": "6.1.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -37,6 +37,7 @@
37
37
  "@hh.ru/magritte-ui-mock-component": "1.0.11",
38
38
  "@hh.ru/magritte-ui-navigation-bar": "6.0.10",
39
39
  "@hh.ru/magritte-ui-theme-provider": "1.1.28",
40
+ "@hh.ru/magritte-ui-trigger": "2.6.15",
40
41
  "@hh.ru/magritte-ui-typography": "3.0.15"
41
42
  },
42
43
  "peerDependencies": {
@@ -47,5 +48,5 @@
47
48
  "publishConfig": {
48
49
  "access": "public"
49
50
  },
50
- "gitHead": "c6557f921bc6f6c1974111299d7fce240d2946aa"
51
+ "gitHead": "c1ee94abf8255c5a7275f4b4a10ed95cd069dc52"
51
52
  }
package/{sectionRenderers-DplRmg4w.js → sectionRenderers-u2DGMJQo.js} RENAMED
@@ -8,7 +8,7 @@ import { Cell } from '@hh.ru/magritte-ui-cell';
8
8
  import { CustomChip } from '@hh.ru/magritte-ui-chips';
9
9
  import { Text } from '@hh.ru/magritte-ui-typography';
10
10
 
11
- var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_6-0-14","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_6-0-14","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_6-0-14","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_6-0-14","suggest-items-container":"magritte-suggest-items-container___SKj-g_6-0-14","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_6-0-14","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_6-0-14","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_6-0-14","suggest-input-container":"magritte-suggest-input-container___l3OkM_6-0-14","suggestInputContainer":"magritte-suggest-input-container___l3OkM_6-0-14","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_6-0-14","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_6-0-14","error-wrapper":"magritte-error-wrapper___Ui4xt_6-0-14","errorWrapper":"magritte-error-wrapper___Ui4xt_6-0-14"};
11
+ var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_6-1-0","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_6-1-0","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_6-1-0","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_6-1-0","suggest-items-container":"magritte-suggest-items-container___SKj-g_6-1-0","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_6-1-0","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_6-1-0","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_6-1-0","suggest-input-container":"magritte-suggest-input-container___l3OkM_6-1-0","suggestInputContainer":"magritte-suggest-input-container___l3OkM_6-1-0","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_6-1-0","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_6-1-0","error-wrapper":"magritte-error-wrapper___Ui4xt_6-1-0","errorWrapper":"magritte-error-wrapper___Ui4xt_6-1-0"};
12
12
 
13
13
  const cellSectionRenderer = (section, sectionId, onValueSelect, breakpoint) => {
14
14
  return section.items.map((item) => {
@@ -45,4 +45,4 @@ const renderSection = (section, sectionId, onValueSelect, breakpoint, length, ha
45
45
  };
46
46
 
47
47
  export { renderSection as r, styles as s };
48
- //# sourceMappingURL=sectionRenderers-DplRmg4w.js.map
48
+ //# sourceMappingURL=sectionRenderers-u2DGMJQo.js.map
package/{sectionRenderers-DplRmg4w.js.map → sectionRenderers-u2DGMJQo.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"sectionRenderers-DplRmg4w.js","sources":["../src/sectionRenderers.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell } from '@hh.ru/magritte-ui-cell';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { DataSection, DataSectionOfType } from '@hh.ru/magritte-ui-suggest/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './suggest.less';\n\ninterface ValueSelectHandler<K> {\n (value: string, data: K | undefined): void;\n}\n\ninterface SectionRenderer<T extends DataSection['type'], K = unknown> {\n (\n section: DataSectionOfType<T>,\n sectionId: number,\n onValueSelect: ValueSelectHandler<K>,\n breakpoint: Breakpoint,\n length: number,\n haveBottomContent: boolean\n ): JSX.Element[] | JSX.Element;\n}\n\nconst cellSectionRenderer: SectionRenderer<'cells'> = (section, sectionId, onValueSelect, breakpoint) => {\n return section.items.map((item) => {\n return (\n <Card\n style=\"blank\"\n stretched\n hoverStyle=\"neutral\"\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n onClick={(event) => {\n event.preventDefault();\n onValueSelect(item.value, item.data);\n }}\n actionCard\n padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n paddingTop={12}\n paddingBottom={12}\n borderRadius={12}\n key={`cell_${sectionId}_${item.value}`}\n data-qa=\"suggest-item-cell\"\n >\n <Cell {...item.componentProps} onClick={undefined} />\n </Card>\n );\n });\n};\n\nconst chipsSectionRenderer: SectionRenderer<'chips'> = (\n section,\n sectionId,\n onValueSelect,\n _,\n length,\n haveBottomContent\n) => {\n return (\n <div\n className={classnames(styles.chipsSectionContainer, {\n // чипсы - не последний элемент или есть нижний контент\n [styles.chipsSectionContainerWithOtherItems]: sectionId !== length - 1 || haveBottomContent,\n })}\n key={`chips_section_${sectionId}`}\n >\n {section.items.map((item) => {\n return (\n <CustomChip\n {...(item.componentProps || {})}\n key={`chips_${sectionId}_${item.value}`}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => onValueSelect(item.value, item.data)}\n data-qa=\"suggest-item-chips\"\n >\n {item.value}\n </CustomChip>\n );\n })}\n </div>\n );\n};\n\nconst delimiterSectionRenderer: SectionRenderer<'delimiter'> = (section, _, __, breakpoint) => {\n return [\n <Card\n style=\"blank\"\n stretched\n padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n paddingTop={8}\n paddingBottom={8}\n key={`delimiter_${section.text}`}\n data-qa=\"suggest-item-delimiter\"\n >\n <Text style=\"secondary\" typography=\"label-3-regular\">\n {section.text}\n </Text>\n </Card>,\n ];\n};\n\nconst SECTION_TYPE_TO_RENDERER_MAP: { [K in DataSection['type']]: SectionRenderer<K> } = {\n cells: cellSectionRenderer,\n chips: chipsSectionRenderer,\n delimiter: delimiterSectionRenderer,\n};\n\nexport const renderSection = <T, K extends DataSection['type']>(\n section: DataSectionOfType<K>,\n sectionId: number,\n onValueSelect: ValueSelectHandler<T>,\n breakpoint: Breakpoint,\n length: number,\n haveBottomContent: boolean\n): JSX.Element[] => {\n const renderer = SECTION_TYPE_TO_RENDERER_MAP[section.type];\n const result = renderer(\n section,\n sectionId,\n onValueSelect as ValueSelectHandler<unknown>,\n breakpoint,\n length,\n haveBottomContent\n );\n return Array.isArray(result) ? result : [result];\n};\n"],"names":["_jsx","_createElement"],"mappings":"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"}
1
+ {"version":3,"file":"sectionRenderers-u2DGMJQo.js","sources":["../src/sectionRenderers.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell } from '@hh.ru/magritte-ui-cell';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { DataSection, DataSectionOfType } from '@hh.ru/magritte-ui-suggest/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './suggest.less';\n\ninterface ValueSelectHandler<K> {\n (value: string, data: K | undefined): void;\n}\n\ninterface SectionRenderer<T extends DataSection['type'], K = unknown> {\n (\n section: DataSectionOfType<T>,\n sectionId: number,\n onValueSelect: ValueSelectHandler<K>,\n breakpoint: Breakpoint,\n length: number,\n haveBottomContent: boolean\n ): JSX.Element[] | JSX.Element;\n}\n\nconst cellSectionRenderer: SectionRenderer<'cells'> = (section, sectionId, onValueSelect, breakpoint) => {\n return section.items.map((item) => {\n return (\n <Card\n style=\"blank\"\n stretched\n hoverStyle=\"neutral\"\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n onClick={(event) => {\n event.preventDefault();\n onValueSelect(item.value, item.data);\n }}\n actionCard\n padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n paddingTop={12}\n paddingBottom={12}\n borderRadius={12}\n key={`cell_${sectionId}_${item.value}`}\n data-qa=\"suggest-item-cell\"\n >\n <Cell {...item.componentProps} onClick={undefined} />\n </Card>\n );\n });\n};\n\nconst chipsSectionRenderer: SectionRenderer<'chips'> = (\n section,\n sectionId,\n onValueSelect,\n _,\n length,\n haveBottomContent\n) => {\n return (\n <div\n className={classnames(styles.chipsSectionContainer, {\n // чипсы - не последний элемент или есть нижний контент\n [styles.chipsSectionContainerWithOtherItems]: sectionId !== length - 1 || haveBottomContent,\n })}\n key={`chips_section_${sectionId}`}\n >\n {section.items.map((item) => {\n return (\n <CustomChip\n {...(item.componentProps || {})}\n key={`chips_${sectionId}_${item.value}`}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => onValueSelect(item.value, item.data)}\n data-qa=\"suggest-item-chips\"\n >\n {item.value}\n </CustomChip>\n );\n })}\n </div>\n );\n};\n\nconst delimiterSectionRenderer: SectionRenderer<'delimiter'> = (section, _, __, breakpoint) => {\n return [\n <Card\n style=\"blank\"\n stretched\n padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n paddingTop={8}\n paddingBottom={8}\n key={`delimiter_${section.text}`}\n data-qa=\"suggest-item-delimiter\"\n >\n <Text style=\"secondary\" typography=\"label-3-regular\">\n {section.text}\n </Text>\n </Card>,\n ];\n};\n\nconst SECTION_TYPE_TO_RENDERER_MAP: { [K in DataSection['type']]: SectionRenderer<K> } = {\n cells: cellSectionRenderer,\n chips: chipsSectionRenderer,\n delimiter: delimiterSectionRenderer,\n};\n\nexport const renderSection = <T, K extends DataSection['type']>(\n section: DataSectionOfType<K>,\n sectionId: number,\n onValueSelect: ValueSelectHandler<T>,\n breakpoint: Breakpoint,\n length: number,\n haveBottomContent: boolean\n): JSX.Element[] => {\n const renderer = SECTION_TYPE_TO_RENDERER_MAP[section.type];\n const result = renderer(\n section,\n sectionId,\n onValueSelect as ValueSelectHandler<unknown>,\n breakpoint,\n length,\n haveBottomContent\n );\n return Array.isArray(result) ? result : [result];\n};\n"],"names":["_jsx","_createElement"],"mappings":"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"}
package/sectionRenderers.js CHANGED
@@ -7,5 +7,5 @@ import '@hh.ru/magritte-ui-card';
7
7
  import '@hh.ru/magritte-ui-cell';
8
8
  import '@hh.ru/magritte-ui-chips';
9
9
  import '@hh.ru/magritte-ui-typography';
10
- export { r as renderSection } from './sectionRenderers-DplRmg4w.js';
10
+ export { r as renderSection } from './sectionRenderers-u2DGMJQo.js';
11
11
  //# sourceMappingURL=sectionRenderers.js.map
package/types.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import { FocusEventHandler, ForwardRefExoticComponent, FunctionComponent, KeyboardEventHandler, Ref, ReactNode } from 'react';
1
+ import { FocusEventHandler, ForwardRefExoticComponent, FunctionComponent, KeyboardEventHandler, Ref, ReactNode, ReactElement, RefObject } from 'react';
2
2
  import { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';
3
3
  import { type CellProps } from '@hh.ru/magritte-ui-cell';
4
4
  import { type CustomChipProps } from '@hh.ru/magritte-ui-chips';
5
5
  import { type NavigationBarProps } from '@hh.ru/magritte-ui-navigation-bar';
6
+ import { BaseTrigger } from '@hh.ru/magritte-ui-trigger/BaseTrigger';
6
7
  export interface NativeFocusEventHandler {
7
8
  (event: FocusEvent): void;
8
9
  }
@@ -46,7 +47,7 @@ export interface RequiredInputProps {
46
47
  onFocus: FocusEventHandler<HTMLElement>;
47
48
  onKeyDown: KeyboardEventHandler<HTMLElement>;
48
49
  }
49
- export interface ControlledInputProps {
50
+ export interface ControlledInputProps extends BaseTrigger {
50
51
  value: string;
51
52
  onChange: (value: string) => void;
52
53
  }
@@ -56,11 +57,15 @@ export interface SuggestInputProps extends ControlledInputProps {
56
57
  onKeyDown?: KeyboardEventHandler<HTMLElement>;
57
58
  }
58
59
  export type SuggestInputComponent = FunctionComponent<ControlledInputProps> | ForwardRefExoticComponent<ControlledInputProps>;
60
+ type DataQa = {
61
+ [key: `data-${string}`]: string;
62
+ };
63
+ type WrapperRef = {
64
+ wrapperRef?: RefObject<HTMLElement>;
65
+ };
59
66
  export type InputProp<P extends SuggestInputComponent, T = Parameters<P>[0], K = Required<T>> = K extends RequiredInputProps ? {
60
67
  component: P;
61
- props: Omit<T, keyof RequiredInputProps> & Partial<RequiredInputProps> & {
62
- [key: `data-${string}`]: string;
63
- };
68
+ props: Omit<T, keyof RequiredInputProps> & Partial<RequiredInputProps> & DataQa & WrapperRef;
64
69
  } : never;
65
70
  export interface SuggestProps<K, P extends SuggestInputComponent = SuggestInputComponent> {
66
71
  /** Функция провайдер данных */
@@ -82,10 +87,14 @@ export interface SuggestProps<K, P extends SuggestInputComponent = SuggestInputC
82
87
  onChange?: (value: string, isValueFromList: boolean, data?: K) => void;
83
88
  /** Отступ в пикселях между элементами саджеста */
84
89
  itemsGap?: TokenBaseCoreSpace;
85
- /** Компонент используемый в качестве инпута в саджесте и его пропсы, в качестве компонента могуст использоваться
86
- * только controlled инпуты
90
+ /**
91
+ * Компонент, используемый в качестве инпута в саджесте и его пропсы.
92
+ * В качестве компонента могут использоваться только controlled инпуты.
93
+ * В случае использования кастомного триггера, `component` используется только в `bottom-sheet`
87
94
  */
88
95
  input: InputProp<P>;
96
+ /** Render функция для Trigger */
97
+ renderTrigger?: (props: InputProp<P>) => ReactElement;
89
98
  /** Пропсы NavigationBar который отображается в BottomSheet саджеста на мобильных разрешениях */
90
99
  navigationBarProps?: NavigationBarProps;
91
100
  /** Максимальная высота дропа с вариантами */