@hh.ru/magritte-ui-suggest 8.0.11 → 9.0.0

package/Suggest.js

@@ -6,7 +6,7 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { getSearchResultCount, SuggestPicker } from './SuggestPicker.js';
 import { useSuggestKeyboardNav } from './useSuggestKeyboardNav.js';
-import { s as styles } from './sectionRenderers-Dyz_nHUQ.js';
+import { s as styles } from './sectionRenderers-DbHEQJwL.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-bottom-sheet';
@@ -17,18 +17,32 @@ import '@hh.ru/magritte-ui-navigation-bar';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';
+import '@hh.ru/magritte-ui-link';
 import '@hh.ru/magritte-ui-typography';
 
+const autoSelectFirstItemDefault = (result) => {
+    // выбираем любую из секций, которая находится ближе к инпуту
+    const suitableSection = result.find((section) => section.type !== 'delimiter');
+    if (!suitableSection) {
+        return null;
+    }
+    if (suitableSection.items.length === 0) {
+        return null;
+    }
+    return suitableSection.items[0];
+};
 const SuggestTriggerDefault = (props) => {
     const { component: TriggerComponent, props: triggerProps } = props;
     return (jsx(TriggerComponent, { ...triggerProps }));
 };
-const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectValidator = () => true, navigationBarProps, maxHeight = 460, itemsGap = 4, onBlur, topContent, bottomContent, dropWidth, errorPlaceholder, trls, onChange, onDropOpen, onDropClose, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, renderTrigger = SuggestTriggerDefault, renderItem, }, ref) {
+const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectValidator = () => true, maxHeight = 460, itemsGap = 4, onBlur, topContent, bottomContent, dropWidth, errorPlaceholder, trls, onChange, onDropOpen, onDropClose, onBottomSheetOpen, onBottomSheetClose, onSearchSubmit, renderTrigger = SuggestTriggerDefault, renderItem, renderHeader, headerTitle, showUserInputInResults = false, autoSelectFirstItem = false, }, ref) {
     const { component: InputComponent, props: inputProps } = input;
     const [inputValueState, setInputValueState] = useState(inputProps.value || '');
-    const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown } = inputProps;
+    const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown, onBlur: onInputBlurExternal, } = inputProps;
     const [requestResult, setRequestResult] = useState(null);
     const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState(false);
+    const { isMobile } = useBreakpoint();
+    const [isError, setIsError] = useState(false);
     const inputRef = useRef(null);
     const wrapperRef = useRef(null);
     const suggestContainerRef = useRef(null);
@@ -36,10 +50,9 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
     const inputRefMulti = useMultipleRefs(inputRef, ref);
     const onBlurRef = useRef(onBlur);
     onBlurRef.current = onBlur; // update actual callback
-    const { isMobile } = useBreakpoint();
-    const [isError, setIsError] = useState(false);
     const currentRequestRef = useRef();
     const actualInputValue = inputValue === undefined ? inputValueState : inputValue;
+    const inputWasChanged = useRef(false);
     const { focused, onKeyDown, onFocus, ...rest } = useSuggestKeyboardNav(suggestContainerRef, inputContainerRef, setValueSelectedFromSuggest, actualInputValue, inputRef, onBlurRef);
     const handleBottomSheetClose = () => {
         rest.onBottomSheetClose();
@@ -88,8 +101,8 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
         onInputFocus?.(event);
         onFocus(event);
     }, [actualInputValue, requestResult?.query, onInputFocus, onFocus, requestData]);
-    const onValueSelectHandler = useCallback((value, data) => {
-        if (!onSelectValidator(value, data)) {
+    const onValueSelectHandler = useCallback((value, data, isUserInput) => {
+        if (!onSelectValidator(value, data, isUserInput)) {
             return;
         }
         if (!isMobile) {
@@ -98,8 +111,30 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
         onChangeHandler(value, true);
         onChange?.(value, true, data);
         setValueSelectedFromSuggest(value);
+        inputWasChanged.current = false;
     }, [onSelectValidator, isMobile, onChangeHandler, onChange]);
+    // на десктоп на blur надо подставить подходящий элемент (если был ввод)
+    const onInputBlur = (event) => {
+        if (!isMobile && Boolean(autoSelectFirstItem) && inputWasChanged.current) {
+            // если включен пользовательский ввод, его не надо перезаписывать (но validator вызвать нужно)
+            if (showUserInputInResults && actualInputValue.length > 0) {
+                onValueSelectHandler(actualInputValue, undefined, true);
+            }
+            else {
+                const suggestItem = typeof autoSelectFirstItem === 'function'
+                    ? autoSelectFirstItem(requestResult?.result || [])
+                    : autoSelectFirstItemDefault(requestResult?.result || []);
+                if (suggestItem) {
+                    const { value, data } = suggestItem;
+                    onValueSelectHandler(value, data);
+                }
+            }
+        }
+        // и не потерять пользовательский blur
+        onInputBlurExternal?.(event);
+    };
     const onKeyDownHandler = useCallback((event) => {
+        inputWasChanged.current = true;
         onKeyDown(event);
         onInputKeyDown?.(event);
     }, [onInputKeyDown, onKeyDown]);
@@ -112,11 +147,12 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
                         onChange: onChangeHandler,
                         onKeyDown: onKeyDownHandler,
                         ref: inputRefMulti,
+                        onBlur: onInputBlur,
                         wrapperRef,
                         autoComplete: 'off',
                     },
                     optionsCount: getSearchResultCount(requestResult?.result),
-                }) }), 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, renderItem: renderItem, onClickReload: () => {
+                }) }), jsx(SuggestPicker, { data: requestResult?.result, activatorRef: wrapperRef, inputRef: inputRef, inputFocused: focused, currentInputValueSelectedFromSuggest: valueSelectedFromSuggest !== false, onValueSelect: onValueSelectHandler, maxHeight: maxHeight, 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, renderItem: renderItem, renderHeader: renderHeader, headerTitle: headerTitle, showUserInputInResults: showUserInputInResults, onClickReload: () => {
                     requestData(actualInputValue);
                 }, onSearchSubmit: onSearchSubmit, input: {
                     component: InputComponent,

package/Suggest.js.map

@@ -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 { DataProviderRequest, DataProviderResult, DataProviderError } from '@hh.ru/magritte-common-data-provider';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SuggestPicker, getSearchResultCount } from '@hh.ru/magritte-ui-suggest/SuggestPicker';\nimport {\n    SuggestProps,\n    SuggestInputComponent,\n    InputProp,\n    ControlledInputProps,\n    NativeFocusEventHandler,\n    OptionsCount,\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 = <InputType extends SuggestInputComponent>(\n    props: InputProp<InputType> & OptionsCount\n): ReactElement => {\n    const { component: TriggerComponent, props: triggerProps } = props;\n    return (\n        <TriggerComponent\n            {...(triggerProps as unknown as JSX.IntrinsicAttributes &\n                JSX.LibraryManagedAttributes<InputType, ControlledInputProps>)}\n        />\n    );\n};\n\nconst SuggestComponent = function <DataType, InputType 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        onSearchSubmit,\n        renderTrigger = SuggestTriggerDefault,\n        renderItem,\n    }: SuggestProps<DataType, InputType>,\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<DataType> } | null>(\n        null\n    );\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: DataType | 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                    optionsCount: getSearchResultCount(requestResult?.result),\n                } as unknown as InputProp<InputType> & OptionsCount)}\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                renderItem={renderItem}\n                onClickReload={() => {\n                    requestData(actualInputValue);\n                }}\n                onSearchSubmit={onSearchSubmit}\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<InputType>\n                }\n            />\n        </>\n    );\n};\n\nconst Suggest = forwardRef(SuggestComponent) as (<DataType, InputType extends SuggestInputComponent>(\n    props: SuggestProps<DataType, InputType> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSuggest.displayName = 'Suggest';\n\nexport { Suggest };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"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 {\n    DataProviderRequest,\n    DataProviderResult,\n    DataProviderError,\n    ChipItemProps,\n    CellItemProps,\n} from '@hh.ru/magritte-common-data-provider';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SuggestPicker, getSearchResultCount } from '@hh.ru/magritte-ui-suggest/SuggestPicker';\nimport {\n    SuggestProps,\n    SuggestInputComponent,\n    InputProp,\n    ControlledInputProps,\n    NativeFocusEventHandler,\n    OptionsCount,\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 autoSelectFirstItemDefault = <DataType,>(\n    result: DataProviderResult<DataType>\n): ChipItemProps<DataType> | CellItemProps<DataType> | null => {\n    // выбираем любую из секций, которая находится ближе к инпуту\n    const suitableSection = result.find((section) => section.type !== 'delimiter');\n    if (!suitableSection) {\n        return null;\n    }\n    if (suitableSection.items.length === 0) {\n        return null;\n    }\n    return suitableSection.items[0];\n};\n\nconst SuggestTriggerDefault = <InputType extends SuggestInputComponent>(\n    props: InputProp<InputType> & OptionsCount\n): ReactElement => {\n    const { component: TriggerComponent, props: triggerProps } = props;\n    return (\n        <TriggerComponent\n            {...(triggerProps as unknown as JSX.IntrinsicAttributes &\n                JSX.LibraryManagedAttributes<InputType, ControlledInputProps>)}\n        />\n    );\n};\n\nconst SuggestComponent = function <DataType, InputType extends SuggestInputComponent>(\n    {\n        dataProvider,\n        input,\n        inputValue,\n        onSelectValidator = () => true,\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        onSearchSubmit,\n        renderTrigger = SuggestTriggerDefault,\n        renderItem,\n        renderHeader,\n        headerTitle,\n        showUserInputInResults = false,\n        autoSelectFirstItem = false,\n    }: SuggestProps<DataType, InputType>,\n    ref: ForwardedRef<HTMLElement>\n): ReactElement | null {\n    const { component: InputComponent, props: inputProps } = input;\n    const [inputValueState, setInputValueState] = useState(inputProps.value || '');\n    const {\n        onChange: onInputChange,\n        onFocus: onInputFocus,\n        onKeyDown: onInputKeyDown,\n        onBlur: onInputBlurExternal,\n    } = inputProps;\n    const [requestResult, setRequestResult] = useState<{ query: string; result: DataProviderResult<DataType> } | null>(\n        null\n    );\n    const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState<string | false>(false);\n    const { isMobile } = useBreakpoint();\n    const [isError, setIsError] = useState(false);\n\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 currentRequestRef = useRef<DataProviderRequest>();\n    const actualInputValue = inputValue === undefined ? inputValueState : inputValue;\n    const inputWasChanged = useRef<boolean>(false);\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: DataType | undefined, isUserInput?: boolean) => {\n            if (!onSelectValidator(value, data, isUserInput)) {\n                return;\n            }\n            if (!isMobile) {\n                inputRef.current?.focus();\n            }\n            onChangeHandler(value, true);\n            onChange?.(value, true, data);\n            setValueSelectedFromSuggest(value);\n            inputWasChanged.current = false;\n        },\n        [onSelectValidator, isMobile, onChangeHandler, onChange]\n    );\n\n    // на десктоп на blur надо подставить подходящий элемент (если был ввод)\n    const onInputBlur: FocusEventHandler<HTMLElement> = (event) => {\n        if (!isMobile && Boolean(autoSelectFirstItem) && inputWasChanged.current) {\n            // если включен пользовательский ввод, его не надо перезаписывать (но validator вызвать нужно)\n            if (showUserInputInResults && actualInputValue.length > 0) {\n                onValueSelectHandler(actualInputValue, undefined, true);\n            } else {\n                const suggestItem =\n                    typeof autoSelectFirstItem === 'function'\n                        ? autoSelectFirstItem(requestResult?.result || [])\n                        : autoSelectFirstItemDefault(requestResult?.result || []);\n                if (suggestItem) {\n                    const { value, data } = suggestItem;\n                    onValueSelectHandler(value, data);\n                }\n            }\n        }\n        // и не потерять пользовательский blur\n        onInputBlurExternal?.(event);\n    };\n\n    const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n        (event) => {\n            inputWasChanged.current = true;\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                        onBlur: onInputBlur,\n                        wrapperRef,\n                        autoComplete: 'off',\n                    },\n                    optionsCount: getSearchResultCount(requestResult?.result),\n                } as unknown as InputProp<InputType> & OptionsCount)}\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                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                renderItem={renderItem}\n                renderHeader={renderHeader}\n                headerTitle={headerTitle}\n                showUserInputInResults={showUserInputInResults}\n                onClickReload={() => {\n                    requestData(actualInputValue);\n                }}\n                onSearchSubmit={onSearchSubmit}\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<InputType>\n                }\n            />\n        </>\n    );\n};\n\nconst Suggest = forwardRef(SuggestComponent) as (<DataType, InputType extends SuggestInputComponent>(\n    props: SuggestProps<DataType, InputType> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSuggest.displayName = 'Suggest';\n\nexport { Suggest };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/SuggestPicker.d.ts

@@ -1,18 +1,18 @@
 import { RefObject, ReactElement, ReactNode } from 'react';
 import { DataProviderResult } from '@hh.ru/magritte-common-data-provider';
 import { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';
-import { type NavigationBarProps } from '@hh.ru/magritte-ui-navigation-bar';
-import { SuggestInputComponent, InputProp, SearchSubmitType, SuggestTrls, RenderOptionType } from '@hh.ru/magritte-ui-suggest/types';
+import { SuggestInputComponent, InputProp, SearchSubmitType, SuggestTrls, RenderOptionType, RenderHeader } from '@hh.ru/magritte-ui-suggest/types';
 interface SuggestPickerProps<DataType, InputType extends SuggestInputComponent> {
     data: DataProviderResult<DataType> | null | undefined;
     activatorRef: RefObject<HTMLElement>;
     inputRef: RefObject<HTMLElement>;
-    onValueSelect: (value: string, data: DataType | undefined) => void;
+    onValueSelect: (value: string, data: DataType | undefined, isUserInput?: boolean) => void;
     maxHeight: number;
-    navigationBarProps?: NavigationBarProps;
     input: InputProp<InputType>;
     inputFocused: boolean;
     renderItem?: RenderOptionType<DataType>;
+    renderHeader?: RenderHeader;
+    headerTitle?: ReactNode;
     currentInputValueSelectedFromSuggest: boolean;
     suggestContainerRef: RefObject<HTMLElement>;
     itemsGap: TokenBaseCoreSpace;
@@ -29,10 +29,11 @@ interface SuggestPickerProps<DataType, InputType extends SuggestInputComponent>
     onDropOpen?: VoidFunction;
     onDropClose?: VoidFunction;
     onSearchSubmit?: SearchSubmitType;
+    showUserInputInResults?: boolean;
 }
 export declare const getSearchResultCount: <K>(options: DataProviderResult<K> | null | undefined) => number;
 export declare const SuggestPicker: {
-    <DataType, InputType extends SuggestInputComponent>({ data, activatorRef, inputRef, onValueSelect, maxHeight, navigationBarProps, input, inputFocused, currentInputValueSelectedFromSuggest, suggestContainerRef, itemsGap, onBottomSheetClose, onBottomSheetOpen, inputValue, topContent, bottomContent, dropWidth, isError, trls, errorPlaceholder, onClickReload, onDropOpen, onDropClose, onSearchSubmit, renderItem, }: SuggestPickerProps<DataType, InputType>): ReactElement | null;
+    <DataType, InputType extends SuggestInputComponent>({ data, activatorRef, inputRef, onValueSelect, maxHeight, input, inputFocused, currentInputValueSelectedFromSuggest, suggestContainerRef, itemsGap, onBottomSheetClose, onBottomSheetOpen, inputValue, topContent, bottomContent, dropWidth, isError, trls, errorPlaceholder, onClickReload, onDropOpen, onDropClose, onSearchSubmit, renderItem, headerTitle, renderHeader, showUserInputInResults, }: SuggestPickerProps<DataType, InputType>): ReactElement | null;
     displayName: string;
 };
 export {};

package/SuggestPicker.js

@@ -1,5 +1,5 @@
 import './index.css';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
@@ -7,17 +7,24 @@ import { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet'
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { Button } from '@hh.ru/magritte-ui-button';
 import { Drop } from '@hh.ru/magritte-ui-drop';
-import { ArrowPathOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { ArrowPathOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
-import { r as renderSection, s as styles } from './sectionRenderers-Dyz_nHUQ.js';
+import { r as renderSection, a as renderUserInput, s as styles } from './sectionRenderers-DbHEQJwL.js';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';
+import '@hh.ru/magritte-ui-link';
 import '@hh.ru/magritte-ui-typography';
 
+const RenderHeaderDefault = ({ onCloseBottomSheet, headerTitle, onChange, options }) => {
+    return (jsx(NavigationBar, { title: headerTitle, right: jsx(CrossOutlinedSize24, { onClick: () => {
+                onCloseBottomSheet();
+                onChange?.('');
+            } }), options: options }));
+};
 const getSearchResultCount = (options) => options?.filter(({ type, searchable = true }) => type !== 'delimiter' && searchable).length || 0;
 const dropPlacement = ['bottom-left', 'top-left'];
-const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, maxHeight, navigationBarProps, input, inputFocused, currentInputValueSelectedFromSuggest, suggestContainerRef, itemsGap, onBottomSheetClose, onBottomSheetOpen, inputValue, topContent, bottomContent, dropWidth, isError, trls, errorPlaceholder, onClickReload, onDropOpen, onDropClose, onSearchSubmit, renderItem, }) {
+const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, maxHeight, input, inputFocused, currentInputValueSelectedFromSuggest, suggestContainerRef, itemsGap, onBottomSheetClose, onBottomSheetOpen, inputValue, topContent, bottomContent, dropWidth, isError, trls, errorPlaceholder, onClickReload, onDropOpen, onDropClose, onSearchSubmit, renderItem, headerTitle, renderHeader = RenderHeaderDefault, showUserInputInResults, }) {
     const { isMobile, breakpoint } = useBreakpoint();
     const [showBottomSheet, setShowBottomSheet] = useState(false);
     const [showDrop, setShowDrop] = useState(true);
@@ -45,12 +52,21 @@ const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, m
     }, [inputValue, inputFocused]);
     const onKeyDownHandler = useCallback((event) => {
         input.props.onKeyDown?.(event);
-        if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {
-            const onCloseBottomSheet = () => {
-                setShowBottomSheet(false);
-            };
-            // в onSearchSubmit нужно вернуть количество результатов поиска
-            onSearchSubmit(event, onCloseBottomSheet, getSearchResultCount(data));
+        if (keyboardMatch(event, keyboardKeys.Enter)) {
+            // onSearchSubmit использует зависимые компоненты
+            // чтобы контролировать поведение при сабмите
+            if (onSearchSubmit) {
+                const onCloseBottomSheet = () => {
+                    setShowBottomSheet(false);
+                };
+                // в onSearchSubmit нужно вернуть количество результатов поиска
+                onSearchSubmit(event, onCloseBottomSheet, getSearchResultCount(data));
+                return;
+            }
+            setShowBottomSheet(false);
+        }
+        if (keyboardMatch(event, keyboardKeys.Escape)) {
+            input.props.onChange?.('');
         }
     }, [input.props, onSearchSubmit, data]);
     const suggestContent = useMemo(() => {
@@ -58,13 +74,22 @@ const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, m
             return null;
         }
         return data.reduce((result, section, index) => {
-            const renderResult = renderSection(section, index, onValueSelect, breakpoint, data.length, Boolean(bottomContent), renderItemRef.current);
+            const renderResult = renderSection(section, index, onValueSelect, breakpoint, data.length, Boolean(bottomContent), renderItemRef.current, isMobile);
             result.push(...renderResult);
             return result;
         }, []);
-    }, [data, onValueSelect, breakpoint, bottomContent]);
-    const dropVisible = suggestContent !== null &&
-        suggestContent.length > 0 &&
+    }, [data, onValueSelect, breakpoint, bottomContent, isMobile]);
+    const userInputInResults = showUserInputInResults && inputValue
+        ? renderUserInput({
+            value: inputValue,
+            onValueSelect,
+            breakpoint,
+            renderItem,
+            isMobile,
+        })
+        : null;
+    const dropVisible = ((suggestContent !== null && suggestContent.length > 0) ||
+        (userInputInResults !== null && userInputInResults.length > 0)) &&
         !currentInputValueSelectedFromSuggest &&
         inputFocused &&
         showDrop;
@@ -78,15 +103,21 @@ const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, m
         const newEvent = new KeyboardEvent('keydown', event.nativeEvent);
         ref.current?.dispatchEvent(newEvent);
     };
-    return (jsxs(Fragment, { children: [jsxs(BottomSheet, { visible: showBottomSheet, height: "full-screen", onAfterExit: onBottomSheetClose, keyboardOverlaysFooter: false, header: jsx(NavigationBar, { ...navigationBarProps, options: jsx("div", { className: classnames({
-                            [styles.bottomSheetInputHideCaret]: !caretVisible,
-                        }), children: jsx(InputComponent, { ...{
-                                ...input.props,
-                                invalid: false,
-                                ref: bottomSheetInputRef,
-                                autoComplete: 'off',
-                                onKeyDown: onKeyDownHandler,
-                            } }) }) }), onAppear: () => {
+    const options = (jsx("div", { className: classnames({
+            [styles.bottomSheetInputHideCaret]: !caretVisible,
+        }), children: jsx(InputComponent, { ...{
+                ...input.props,
+                invalid: false,
+                ref: bottomSheetInputRef,
+                autoComplete: 'off',
+                onKeyDown: onKeyDownHandler,
+            } }) }));
+    return (jsxs(Fragment, { children: [jsxs(BottomSheet, { visible: showBottomSheet, height: "full-screen", onAfterExit: onBottomSheetClose, keyboardOverlaysFooter: false, header: renderHeader({
+                    onCloseBottomSheet: () => setShowBottomSheet(false),
+                    headerTitle,
+                    onChange: input.props.onChange,
+                    options,
+                }), onAppear: () => {
                     bottomSheetInputRef?.current?.focus();
                     setCaretVisible(true);
                     onBottomSheetOpen?.();
@@ -95,7 +126,7 @@ const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, m
                     setCaretVisible(false);
                 }, onClose: () => {
                     setShowBottomSheet(false);
-                }, footer: isError && (jsx(BottomSheetFooter, { children: jsx(Button, { mode: "secondary", style: "negative", icon: jsx(ArrowPathOutlinedSize24, {}), onClick: onClickReload, "data-qa": "suggest-reload-button", stretched: true, children: trls.resetButton }) })), ref: suggestContainerRef, allowScrollWhileFocused: true, children: [!isError && (jsxs("div", { onKeyDown: processInput(bottomSheetInputRef), className: styles.suggestItemsContainer, style: { gap: itemsGap }, children: [topContent, suggestContent, bottomContent] })), isError && jsx("div", { className: styles.errorWrapper, children: errorPlaceholder })] }), jsx(Drop, { autoFocusWhenOpened: false, placement: dropPlacement, lockPlacement: true, visible: dropVisible, onClose: () => setShowDrop(false), activatorRef: activatorRef, role: "status", space: 400, widthEqualToActivator: !dropWidth, width: dropWidth, forcePlacement: true, keyboardNavigationMode: "list", "data-qa": "suggest-drop", ref: suggestContainerRef, onAppear: onDropOpen, onAfterExit: onDropClose, children: jsx("div", { onKeyDown: processInput(inputRef), className: styles.suggestItemsContainer, style: { maxHeight }, children: jsxs("div", { className: styles.suggestItemsContainerWrapper, style: { gap: itemsGap }, children: [topContent, suggestContent, bottomContent] }) }) })] }));
+                }, footer: isError && (jsx(BottomSheetFooter, { children: jsx(Button, { mode: "secondary", style: "negative", icon: jsx(ArrowPathOutlinedSize24, {}), onClick: onClickReload, "data-qa": "suggest-reload-button", stretched: true, children: trls.resetButton }) })), ref: suggestContainerRef, allowScrollWhileFocused: true, withContentPaddings: false, children: [!isError && (jsxs("div", { onKeyDown: processInput(bottomSheetInputRef), className: styles.suggestItemsContainer, style: { gap: itemsGap }, children: [topContent, userInputInResults, suggestContent, bottomContent] })), isError && jsx("div", { className: styles.errorWrapper, children: errorPlaceholder })] }), jsx(Drop, { autoFocusWhenOpened: false, placement: dropPlacement, lockPlacement: true, visible: dropVisible, onClose: () => setShowDrop(false), activatorRef: activatorRef, role: "status", space: 400, widthEqualToActivator: !dropWidth, width: dropWidth, forcePlacement: true, keyboardNavigationMode: "list", "data-qa": "suggest-drop", ref: suggestContainerRef, onAppear: onDropOpen, onAfterExit: onDropClose, children: jsx("div", { onKeyDown: processInput(inputRef), className: classnames(styles.suggestItemsContainer, styles.suggestItemsContainerDesktop), style: { maxHeight }, children: jsxs("div", { className: styles.suggestItemsContainerWrapper, style: { gap: itemsGap }, children: [topContent, userInputInResults, suggestContent, bottomContent] }) }) })] }));
 };
 SuggestPicker.displayName = 'SuggestPicker';
 

package/SuggestPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestPicker.js","sources":["../src/SuggestPicker.tsx"],"sourcesContent":["import {\n    RefObject,\n    useMemo,\n    useEffect,\n    useRef,\n    useState,\n    ReactElement,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { DataProviderResult } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { ArrowPathOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { ControlledInputProps } from '@hh.ru/magritte-ui-input';\nimport { NavigationBar, type NavigationBarProps } from '@hh.ru/magritte-ui-navigation-bar';\nimport { renderSection } from '@hh.ru/magritte-ui-suggest/sectionRenderers';\nimport {\n    SuggestInputComponent,\n    InputProp,\n    SearchSubmitType,\n    SuggestTrls,\n    RenderOptionType,\n} from '@hh.ru/magritte-ui-suggest/types';\n\nimport styles from './suggest.less';\n\ninterface SuggestPickerProps<DataType, InputType extends SuggestInputComponent> {\n    data: DataProviderResult<DataType> | null | undefined;\n    activatorRef: RefObject<HTMLElement>;\n    inputRef: RefObject<HTMLElement>;\n    onValueSelect: (value: string, data: DataType | undefined) => void;\n    maxHeight: number;\n    navigationBarProps?: NavigationBarProps;\n    input: InputProp<InputType>;\n    inputFocused: boolean;\n    renderItem?: RenderOptionType<DataType>;\n    currentInputValueSelectedFromSuggest: boolean;\n    suggestContainerRef: RefObject<HTMLElement>;\n    itemsGap: TokenBaseCoreSpace;\n    onBottomSheetClose: VoidFunction;\n    inputValue: string;\n    topContent?: ReactNode;\n    bottomContent?: ReactNode;\n    dropWidth?: number;\n    isError: boolean;\n    trls: SuggestTrls;\n    errorPlaceholder: ReactNode;\n    onClickReload: VoidFunction;\n    onBottomSheetOpen?: VoidFunction;\n    onDropOpen?: VoidFunction;\n    onDropClose?: VoidFunction;\n    onSearchSubmit?: SearchSubmitType;\n}\n\nexport const getSearchResultCount = <K,>(options: DataProviderResult<K> | null | undefined): number =>\n    options?.filter(({ type, searchable = true }) => type !== 'delimiter' && searchable).length || 0;\n\nconst dropPlacement = ['bottom-left', 'top-left'];\n\nexport const SuggestPicker = function <DataType, InputType extends SuggestInputComponent>({\n    data,\n    activatorRef,\n    inputRef,\n    onValueSelect,\n    maxHeight,\n    navigationBarProps,\n    input,\n    inputFocused,\n    currentInputValueSelectedFromSuggest,\n    suggestContainerRef,\n    itemsGap,\n    onBottomSheetClose,\n    onBottomSheetOpen,\n    inputValue,\n    topContent,\n    bottomContent,\n    dropWidth,\n    isError,\n    trls,\n    errorPlaceholder,\n    onClickReload,\n    onDropOpen,\n    onDropClose,\n    onSearchSubmit,\n    renderItem,\n}: SuggestPickerProps<DataType, InputType>): ReactElement | null {\n    const { isMobile, breakpoint } = useBreakpoint();\n    const [showBottomSheet, setShowBottomSheet] = useState(false);\n    const [showDrop, setShowDrop] = useState(true);\n    const bottomSheetInputRef = useRef<HTMLInputElement>(null);\n    const [caretVisible, setCaretVisible] = useState(false);\n    const renderItemRef = useRef<RenderOptionType<DataType> | undefined>(renderItem);\n    renderItemRef.current = renderItem;\n\n    useEffect(() => {\n        if (inputFocused) {\n            setShowBottomSheet(true);\n        } else if (!isMobile) {\n            setShowBottomSheet(false);\n        }\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [inputFocused, setShowBottomSheet]);\n\n    useEffect(() => {\n        if (currentInputValueSelectedFromSuggest) {\n            setShowBottomSheet(false);\n        }\n    }, [currentInputValueSelectedFromSuggest, isMobile]);\n\n    // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать\n    useEffect(() => {\n        setShowDrop(true);\n    }, [inputValue, inputFocused]);\n\n    const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n        (event) => {\n            input.props.onKeyDown?.(event);\n            if (onSearchSubmit && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                const onCloseBottomSheet = () => {\n                    setShowBottomSheet(false);\n                };\n                // в onSearchSubmit нужно вернуть количество результатов поиска\n                onSearchSubmit(event, onCloseBottomSheet, getSearchResultCount(data));\n            }\n        },\n        [input.props, onSearchSubmit, data]\n    );\n\n    const suggestContent = useMemo(() => {\n        if (!data) {\n            return null;\n        }\n\n        return data.reduce<Array<JSX.Element>>((result, section, index) => {\n            const renderResult = renderSection(\n                section,\n                index,\n                onValueSelect,\n                breakpoint,\n                data.length,\n                Boolean(bottomContent),\n                renderItemRef.current\n            );\n            result.push(...renderResult);\n            return result;\n        }, []);\n    }, [data, onValueSelect, breakpoint, bottomContent]);\n\n    const dropVisible =\n        suggestContent !== null &&\n        suggestContent.length > 0 &&\n        !currentInputValueSelectedFromSuggest &&\n        inputFocused &&\n        showDrop;\n\n    const InputComponent = input.component;\n    const processInput =\n        (ref: RefObject<HTMLElement>): KeyboardEventHandler<HTMLElement> =>\n        (event) => {\n            const hasPrintableRepresentation = event.key.replace(/\\s/g, '').length === 1;\n            if (!hasPrintableRepresentation) {\n                return;\n            }\n            ref.current?.focus();\n            const newEvent = new KeyboardEvent('keydown', event.nativeEvent);\n            ref.current?.dispatchEvent(newEvent);\n        };\n\n    return (\n        <>\n            <BottomSheet\n                visible={showBottomSheet}\n                height=\"full-screen\"\n                onAfterExit={onBottomSheetClose}\n                keyboardOverlaysFooter={false}\n                header={\n                    <NavigationBar\n                        {...navigationBarProps}\n                        options={\n                            <div\n                                className={classnames({\n                                    [styles.bottomSheetInputHideCaret]: !caretVisible,\n                                })}\n                            >\n                                <InputComponent\n                                    {...({\n                                        ...input.props,\n                                        invalid: false,\n                                        ref: bottomSheetInputRef,\n                                        autoComplete: 'off',\n                                        onKeyDown: onKeyDownHandler,\n                                    } as unknown as JSX.IntrinsicAttributes &\n                                        JSX.LibraryManagedAttributes<InputType, ControlledInputProps>)}\n                                />\n                            </div>\n                        }\n                    />\n                }\n                onAppear={() => {\n                    bottomSheetInputRef?.current?.focus();\n                    setCaretVisible(true);\n                    onBottomSheetOpen?.();\n                }}\n                onBeforeExit={() => {\n                    bottomSheetInputRef?.current?.blur();\n                    setCaretVisible(false);\n                }}\n                onClose={() => {\n                    setShowBottomSheet(false);\n                }}\n                footer={\n                    isError && (\n                        <BottomSheetFooter>\n                            <Button\n                                mode=\"secondary\"\n                                style=\"negative\"\n                                icon={<ArrowPathOutlinedSize24 />}\n                                onClick={onClickReload}\n                                data-qa=\"suggest-reload-button\"\n                                stretched\n                            >\n                                {trls.resetButton}\n                            </Button>\n                        </BottomSheetFooter>\n                    )\n                }\n                ref={suggestContainerRef}\n                allowScrollWhileFocused\n            >\n                {!isError && (\n                    <div\n                        onKeyDown={processInput(bottomSheetInputRef)}\n                        className={styles.suggestItemsContainer}\n                        style={{ gap: itemsGap }}\n                    >\n                        {topContent}\n                        {suggestContent}\n                        {bottomContent}\n                    </div>\n                )}\n                {isError && <div className={styles.errorWrapper}>{errorPlaceholder}</div>}\n            </BottomSheet>\n            <Drop\n                autoFocusWhenOpened={false}\n                placement={dropPlacement}\n                lockPlacement\n                visible={dropVisible}\n                onClose={() => setShowDrop(false)}\n                activatorRef={activatorRef}\n                role=\"status\"\n                space={400}\n                widthEqualToActivator={!dropWidth}\n                width={dropWidth}\n                forcePlacement\n                keyboardNavigationMode=\"list\"\n                data-qa=\"suggest-drop\"\n                ref={suggestContainerRef}\n                onAppear={onDropOpen}\n                onAfterExit={onDropClose}\n            >\n                <div onKeyDown={processInput(inputRef)} className={styles.suggestItemsContainer} style={{ maxHeight }}>\n                    <div className={styles.suggestItemsContainerWrapper} style={{ gap: itemsGap }}>\n                        {topContent}\n                        {suggestContent}\n                        {bottomContent}\n                    </div>\n                </div>\n            </Drop>\n        </>\n    );\n};\n\nSuggestPicker.displayName = 'SuggestPicker';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"SuggestPicker.js","sources":["../src/SuggestPicker.tsx"],"sourcesContent":["import {\n    RefObject,\n    useMemo,\n    useEffect,\n    useRef,\n    useState,\n    ReactElement,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { DataProviderResult } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { ArrowPathOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { ControlledInputProps } from '@hh.ru/magritte-ui-input';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { renderSection, renderUserInput } from '@hh.ru/magritte-ui-suggest/sectionRenderers';\nimport {\n    SuggestInputComponent,\n    InputProp,\n    SearchSubmitType,\n    SuggestTrls,\n    RenderOptionType,\n    RenderHeader,\n    RenderHeaderProps,\n} from '@hh.ru/magritte-ui-suggest/types';\n\nimport styles from './suggest.less';\n\ninterface SuggestPickerProps<DataType, InputType extends SuggestInputComponent> {\n    data: DataProviderResult<DataType> | null | undefined;\n    activatorRef: RefObject<HTMLElement>;\n    inputRef: RefObject<HTMLElement>;\n    onValueSelect: (value: string, data: DataType | undefined, isUserInput?: boolean) => void;\n    maxHeight: number;\n    input: InputProp<InputType>;\n    inputFocused: boolean;\n    renderItem?: RenderOptionType<DataType>;\n    renderHeader?: RenderHeader;\n    headerTitle?: ReactNode;\n    currentInputValueSelectedFromSuggest: boolean;\n    suggestContainerRef: RefObject<HTMLElement>;\n    itemsGap: TokenBaseCoreSpace;\n    onBottomSheetClose: VoidFunction;\n    inputValue: string;\n    topContent?: ReactNode;\n    bottomContent?: ReactNode;\n    dropWidth?: number;\n    isError: boolean;\n    trls: SuggestTrls;\n    errorPlaceholder: ReactNode;\n    onClickReload: VoidFunction;\n    onBottomSheetOpen?: VoidFunction;\n    onDropOpen?: VoidFunction;\n    onDropClose?: VoidFunction;\n    onSearchSubmit?: SearchSubmitType;\n    showUserInputInResults?: boolean;\n}\n\nconst RenderHeaderDefault = ({ onCloseBottomSheet, headerTitle, onChange, options }: RenderHeaderProps): ReactNode => {\n    return (\n        <NavigationBar\n            title={headerTitle}\n            right={\n                <CrossOutlinedSize24\n                    onClick={() => {\n                        onCloseBottomSheet();\n                        onChange?.('');\n                    }}\n                />\n            }\n            options={options}\n        />\n    );\n};\n\nexport const getSearchResultCount = <K,>(options: DataProviderResult<K> | null | undefined): number =>\n    options?.filter(({ type, searchable = true }) => type !== 'delimiter' && searchable).length || 0;\n\nconst dropPlacement = ['bottom-left', 'top-left'];\n\nexport const SuggestPicker = function <DataType, InputType extends SuggestInputComponent>({\n    data,\n    activatorRef,\n    inputRef,\n    onValueSelect,\n    maxHeight,\n    input,\n    inputFocused,\n    currentInputValueSelectedFromSuggest,\n    suggestContainerRef,\n    itemsGap,\n    onBottomSheetClose,\n    onBottomSheetOpen,\n    inputValue,\n    topContent,\n    bottomContent,\n    dropWidth,\n    isError,\n    trls,\n    errorPlaceholder,\n    onClickReload,\n    onDropOpen,\n    onDropClose,\n    onSearchSubmit,\n    renderItem,\n    headerTitle,\n    renderHeader = RenderHeaderDefault,\n    showUserInputInResults,\n}: SuggestPickerProps<DataType, InputType>): ReactElement | null {\n    const { isMobile, breakpoint } = useBreakpoint();\n    const [showBottomSheet, setShowBottomSheet] = useState(false);\n    const [showDrop, setShowDrop] = useState(true);\n    const bottomSheetInputRef = useRef<HTMLInputElement>(null);\n    const [caretVisible, setCaretVisible] = useState(false);\n    const renderItemRef = useRef<RenderOptionType<DataType> | undefined>(renderItem);\n    renderItemRef.current = renderItem;\n\n    useEffect(() => {\n        if (inputFocused) {\n            setShowBottomSheet(true);\n        } else if (!isMobile) {\n            setShowBottomSheet(false);\n        }\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [inputFocused, setShowBottomSheet]);\n\n    useEffect(() => {\n        if (currentInputValueSelectedFromSuggest) {\n            setShowBottomSheet(false);\n        }\n    }, [currentInputValueSelectedFromSuggest, isMobile]);\n\n    // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать\n    useEffect(() => {\n        setShowDrop(true);\n    }, [inputValue, inputFocused]);\n\n    const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n        (event) => {\n            input.props.onKeyDown?.(event);\n            if (keyboardMatch(event, keyboardKeys.Enter)) {\n                // onSearchSubmit использует зависимые компоненты\n                // чтобы контролировать поведение при сабмите\n                if (onSearchSubmit) {\n                    const onCloseBottomSheet = () => {\n                        setShowBottomSheet(false);\n                    };\n                    // в onSearchSubmit нужно вернуть количество результатов поиска\n                    onSearchSubmit(event, onCloseBottomSheet, getSearchResultCount(data));\n                    return;\n                }\n                setShowBottomSheet(false);\n            }\n            if (keyboardMatch(event, keyboardKeys.Escape)) {\n                input.props.onChange?.('');\n            }\n        },\n        [input.props, onSearchSubmit, data]\n    );\n\n    const suggestContent = useMemo(() => {\n        if (!data) {\n            return null;\n        }\n\n        return data.reduce<Array<JSX.Element>>((result, section, index) => {\n            const renderResult = renderSection(\n                section,\n                index,\n                onValueSelect,\n                breakpoint,\n                data.length,\n                Boolean(bottomContent),\n                renderItemRef.current,\n                isMobile\n            );\n            result.push(...renderResult);\n            return result;\n        }, []);\n    }, [data, onValueSelect, breakpoint, bottomContent, isMobile]);\n\n    const userInputInResults =\n        showUserInputInResults && inputValue\n            ? renderUserInput({\n                  value: inputValue,\n                  onValueSelect,\n                  breakpoint,\n                  renderItem,\n                  isMobile,\n              })\n            : null;\n\n    const dropVisible =\n        ((suggestContent !== null && suggestContent.length > 0) ||\n            (userInputInResults !== null && userInputInResults.length > 0)) &&\n        !currentInputValueSelectedFromSuggest &&\n        inputFocused &&\n        showDrop;\n\n    const InputComponent = input.component;\n    const processInput =\n        (ref: RefObject<HTMLElement>): KeyboardEventHandler<HTMLElement> =>\n        (event) => {\n            const hasPrintableRepresentation = event.key.replace(/\\s/g, '').length === 1;\n            if (!hasPrintableRepresentation) {\n                return;\n            }\n            ref.current?.focus();\n            const newEvent = new KeyboardEvent('keydown', event.nativeEvent);\n            ref.current?.dispatchEvent(newEvent);\n        };\n\n    const options = (\n        <div\n            className={classnames({\n                [styles.bottomSheetInputHideCaret]: !caretVisible,\n            })}\n        >\n            <InputComponent\n                {...({\n                    ...input.props,\n                    invalid: false,\n                    ref: bottomSheetInputRef,\n                    autoComplete: 'off',\n                    onKeyDown: onKeyDownHandler,\n                } as unknown as JSX.IntrinsicAttributes &\n                    JSX.LibraryManagedAttributes<InputType, ControlledInputProps>)}\n            />\n        </div>\n    );\n\n    return (\n        <>\n            <BottomSheet\n                visible={showBottomSheet}\n                height=\"full-screen\"\n                onAfterExit={onBottomSheetClose}\n                keyboardOverlaysFooter={false}\n                header={renderHeader({\n                    onCloseBottomSheet: () => setShowBottomSheet(false),\n                    headerTitle,\n                    onChange: input.props.onChange,\n                    options,\n                })}\n                onAppear={() => {\n                    bottomSheetInputRef?.current?.focus();\n                    setCaretVisible(true);\n                    onBottomSheetOpen?.();\n                }}\n                onBeforeExit={() => {\n                    bottomSheetInputRef?.current?.blur();\n                    setCaretVisible(false);\n                }}\n                onClose={() => {\n                    setShowBottomSheet(false);\n                }}\n                footer={\n                    isError && (\n                        <BottomSheetFooter>\n                            <Button\n                                mode=\"secondary\"\n                                style=\"negative\"\n                                icon={<ArrowPathOutlinedSize24 />}\n                                onClick={onClickReload}\n                                data-qa=\"suggest-reload-button\"\n                                stretched\n                            >\n                                {trls.resetButton}\n                            </Button>\n                        </BottomSheetFooter>\n                    )\n                }\n                ref={suggestContainerRef}\n                allowScrollWhileFocused\n                withContentPaddings={false}\n            >\n                {!isError && (\n                    <div\n                        onKeyDown={processInput(bottomSheetInputRef)}\n                        className={styles.suggestItemsContainer}\n                        style={{ gap: itemsGap }}\n                    >\n                        {topContent}\n                        {userInputInResults}\n                        {suggestContent}\n                        {bottomContent}\n                    </div>\n                )}\n                {isError && <div className={styles.errorWrapper}>{errorPlaceholder}</div>}\n            </BottomSheet>\n            <Drop\n                autoFocusWhenOpened={false}\n                placement={dropPlacement}\n                lockPlacement\n                visible={dropVisible}\n                onClose={() => setShowDrop(false)}\n                activatorRef={activatorRef}\n                role=\"status\"\n                space={400}\n                widthEqualToActivator={!dropWidth}\n                width={dropWidth}\n                forcePlacement\n                keyboardNavigationMode=\"list\"\n                data-qa=\"suggest-drop\"\n                ref={suggestContainerRef}\n                onAppear={onDropOpen}\n                onAfterExit={onDropClose}\n            >\n                <div\n                    onKeyDown={processInput(inputRef)}\n                    className={classnames(styles.suggestItemsContainer, styles.suggestItemsContainerDesktop)}\n                    style={{ maxHeight }}\n                >\n                    <div className={styles.suggestItemsContainerWrapper} style={{ gap: itemsGap }}>\n                        {topContent}\n                        {userInputInResults}\n                        {suggestContent}\n                        {bottomContent}\n                    </div>\n                </div>\n            </Drop>\n        </>\n    );\n};\n\nSuggestPicker.displayName = 'SuggestPicker';\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/index.css

@@ -1,4 +1,5 @@
 :root{
+  --magritte-color-stroke-state-focused-accessible-v21-3-2:#0070ff7a;
   --magritte-color-text-primary-v21-3-2:#000000;
 }
 :root{
@@ -6,59 +7,105 @@
   --magritte-static-space-400-v21-3-2:16px;
 }
 .magritte-night-theme{
+  --magritte-color-stroke-state-focused-accessible-v21-3-2:#0070ff7a;
   --magritte-color-text-primary-v21-3-2:#ffffff;
 }
-.magritte-chips-section-container___Z7N-E_8-0-11{
+.magritte-chips-section-container___Z7N-E_9-0-0{
   display:flex;
   gap:12px;
   flex:1 1;
   flex-wrap:wrap;
+  padding-left:16px;
+  padding-right:16px;
 }
-.magritte-chips-section-container_with-other-items___eJZAr_8-0-11{
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-chips-section-container___Z7N-E_9-0-0{
+    padding-left:0;
+    padding-right:0;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-chips-section-container___Z7N-E_9-0-0{
+    padding-left:0;
+    padding-right:0;
+  }
+}
+.magritte-chips-section-container_with-other-items___eJZAr_9-0-0{
   padding-bottom:16px;
 }
-.magritte-suggest-items-container___SKj-g_8-0-11{
+.magritte-suggest-items-container___SKj-g_9-0-0{
   display:flex;
   flex-direction:column;
+  padding-top:16px;
 }
-.magritte-suggest-items-container___SKj-g_8-0-11 .focus-visible{
+.magritte-suggest-items-container___SKj-g_9-0-0 .focus-visible{
   z-index:1;
   position:relative;
 }
-.magritte-suggest-items-container-wrapper___T2L5U_8-0-11{
+.magritte-suggest-items-container_desktop___nKhfi_9-0-0{
+  padding-top:0;
+}
+.magritte-suggest-items-container-wrapper___T2L5U_9-0-0{
   padding:var(--magritte-static-space-400-v21-3-2);
   margin:calc(-1 * var(--magritte-static-space-400-v21-3-2));
   display:flex;
   flex-direction:column;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_8-0-11{
+  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_9-0-0{
     padding:var(--magritte-static-space-300-v21-3-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_8-0-11{
+  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_9-0-0{
     padding:var(--magritte-static-space-300-v21-3-2);
   }
 }
-.magritte-suggest-input-container___l3OkM_8-0-11{
+.magritte-suggest-input-container___l3OkM_9-0-0{
   --magritte-ui-input-caret-color-override:transparent;
   display:inline-block;
   width:100%;
 }
 @media (min-width: 700px){
-  body.magritte-old-layout .magritte-suggest-input-container___l3OkM_8-0-11{
+  body.magritte-old-layout .magritte-suggest-input-container___l3OkM_9-0-0{
     --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v21-3-2);
   }
 }
 @media (min-width: 600px){
-  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_8-0-11{
+  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_9-0-0{
     --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v21-3-2);
   }
 }
-.magritte-bottom-sheet-input-hide-caret___ikoig_8-0-11{
+.magritte-bottom-sheet-input-hide-caret___ikoig_9-0-0{
   --magritte-ui-input-caret-color-override:transparent;
 }
-.magritte-error-wrapper___Ui4xt_8-0-11{
+.magritte-error-wrapper___Ui4xt_9-0-0{
   height:100%;
 }
+.magritte-delimiter___bh1bC_9-0-0{
+  display:flex;
+  padding:8px 0;
+}
+.magritte-delimiter_with-padding___BGNUr_9-0-0{
+  padding:8px 16px;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-delimiter_with-padding___BGNUr_9-0-0{
+    padding:8px 12px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-delimiter_with-padding___BGNUr_9-0-0{
+    padding:8px 12px;
+  }
+}
+.magritte-delimiter-link___pBTjW_9-0-0{
+  margin-left:auto;
+}
+.magritte-suggest-item___jzPcw_9-0-0:hover,
+.magritte-suggest-item___jzPcw_9-0-0:active{
+  cursor:pointer;
+}
+.magritte-suggest-item___jzPcw_9-0-0.focus-visible{
+  outline:var(--magritte-color-stroke-state-focused-accessible-v21-3-2) solid 4px;
+}

package/index.d.ts

@@ -1,4 +1,4 @@
 export * from '@hh.ru/magritte-ui-theme-provider';
 export * from '@hh.ru/magritte-ui-suggest/Suggest';
-export { RenderItemDefault } from '@hh.ru/magritte-ui-suggest/sectionRenderers';
-export type { SuggestInputProps, SuggestProps, SuggestInputComponent, RenderOptionType as RenderSuggestOptionType, SuggestOptionProps, SuggestOptionWithText, } from '@hh.ru/magritte-ui-suggest/types';
+export { RenderItemDefault, Delimiter } from '@hh.ru/magritte-ui-suggest/sectionRenderers';
+export type { SuggestInputProps, SuggestProps, SuggestInputComponent, RenderOptionType as RenderSuggestOptionType, SuggestOptionProps, SuggestOptionWithText, RenderHeader as RenderSuggestHeader, RenderHeaderProps as RenderSuggestHeaderProps, CommonItemType as CommonSuggestItemType, } from '@hh.ru/magritte-ui-suggest/types';

package/index.js

@@ -1,7 +1,7 @@
 import './index.css';
 export * from '@hh.ru/magritte-ui-theme-provider';
 export { Suggest } from './Suggest.js';
-export { R as RenderItemDefault } from './sectionRenderers-Dyz_nHUQ.js';
+export { D as Delimiter, R as RenderItemDefault } from './sectionRenderers-DbHEQJwL.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@hh.ru/magritte-common-data-provider';
@@ -19,5 +19,6 @@ import './useSuggestKeyboardNav.js';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';
+import '@hh.ru/magritte-ui-link';
 import '@hh.ru/magritte-ui-typography';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-suggest",
-  "version": "8.0.11",
+  "version": "9.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -20,13 +20,13 @@
     "watch": "yarn root:watch $(pwd)"
   },
   "dependencies": {
-    "@hh.ru/magritte-common-data-provider": "1.2.0",
+    "@hh.ru/magritte-common-data-provider": "1.3.0",
     "@hh.ru/magritte-common-func-utils": "1.3.9",
     "@hh.ru/magritte-common-fuzzy-search": "1.0.5",
     "@hh.ru/magritte-common-keyboard": "4.1.0",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.5",
     "@hh.ru/magritte-design-tokens": "21.3.2",
-    "@hh.ru/magritte-ui-bottom-sheet": "7.1.7",
+    "@hh.ru/magritte-ui-bottom-sheet": "7.1.8",
     "@hh.ru/magritte-ui-breakpoint": "5.0.0",
     "@hh.ru/magritte-ui-button": "5.2.29",
     "@hh.ru/magritte-ui-card": "7.0.7",
@@ -34,7 +34,8 @@
     "@hh.ru/magritte-ui-chips": "5.4.1",
     "@hh.ru/magritte-ui-drop": "8.0.4",
     "@hh.ru/magritte-ui-icon": "10.2.0",
-    "@hh.ru/magritte-ui-input": "7.2.1",
+    "@hh.ru/magritte-ui-input": "7.2.2",
+    "@hh.ru/magritte-ui-link": "5.0.10",
     "@hh.ru/magritte-ui-mock-component": "1.1.0",
     "@hh.ru/magritte-ui-navigation-bar": "9.0.2",
     "@hh.ru/magritte-ui-theme-provider": "1.1.41",
@@ -48,5 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a63f004345be885817e68e4afb089520b15b0e0"
+  "gitHead": "1caa560bca7cebf69a1fa358796c8b3b674efb3e"
 }

package/sectionRenderers-DbHEQJwL.js

@@ -0,0 +1,152 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import classnames from 'classnames';
+import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { Card } from '@hh.ru/magritte-ui-card';
+import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
+import { CustomChip } from '@hh.ru/magritte-ui-chips';
+import { Link } from '@hh.ru/magritte-ui-link';
+import { Text } from '@hh.ru/magritte-ui-typography';
+
+var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_9-0-0","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_9-0-0","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_9-0-0","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_9-0-0","suggest-items-container":"magritte-suggest-items-container___SKj-g_9-0-0","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_9-0-0","suggest-items-container_desktop":"magritte-suggest-items-container_desktop___nKhfi_9-0-0","suggestItemsContainerDesktop":"magritte-suggest-items-container_desktop___nKhfi_9-0-0","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_9-0-0","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_9-0-0","suggest-input-container":"magritte-suggest-input-container___l3OkM_9-0-0","suggestInputContainer":"magritte-suggest-input-container___l3OkM_9-0-0","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_9-0-0","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_9-0-0","error-wrapper":"magritte-error-wrapper___Ui4xt_9-0-0","errorWrapper":"magritte-error-wrapper___Ui4xt_9-0-0","delimiter":"magritte-delimiter___bh1bC_9-0-0","delimiter_with-padding":"magritte-delimiter_with-padding___BGNUr_9-0-0","delimiterWithPadding":"magritte-delimiter_with-padding___BGNUr_9-0-0","delimiter-link":"magritte-delimiter-link___pBTjW_9-0-0","delimiterLink":"magritte-delimiter-link___pBTjW_9-0-0","suggest-item":"magritte-suggest-item___jzPcw_9-0-0","suggestItem":"magritte-suggest-item___jzPcw_9-0-0"};
+
+const Delimiter = ({ children, enablePadding }) => {
+    return (jsx("div", { className: classnames(styles.delimiter, {
+            [styles.delimiterWithPadding]: enablePadding,
+        }), "data-qa": "suggest-item-delimiter", children: children }));
+};
+const RenderItemDefault = ({ data, item, onValueSelect, 'data-qa': dataQa, isMobile, enableDelimiterPadding = true, }) => {
+    if (item.type === 'userInput') {
+        return (jsx(Cell, { horPadding: isMobile, vertPadding: isMobile, "data-qa": dataQa, children: jsx(CellText, { children: item.value }) }));
+    }
+    if (item.type === 'delimiter') {
+        return (jsxs(Delimiter, { enablePadding: enableDelimiterPadding, children: [jsx(Text, { style: "secondary", typography: "label-3-regular", children: item.text }), item.link && (jsx("div", { className: styles.delimiterLink, children: jsx(Link, { href: item.link.href, children: item.link.anchor }) }))] }));
+    }
+    if (item.type === 'cells') {
+        return (jsx(Cell, { horPadding: isMobile, vertPadding: isMobile, children: jsx(CellText, { children: data?.text || item.value }) }));
+    }
+    if (item.type === 'chips') {
+        return (jsx(CustomChip, { onMouseDown: (event) => event.preventDefault(), onClick: () => onValueSelect(item.value, item.data), "data-qa": dataQa, children: item.value }));
+    }
+    return null;
+};
+const renderUserInput = ({ value, onValueSelect, breakpoint, renderItem = RenderItemDefault, isMobile, }) => {
+    if (isMobile) {
+        return [
+            jsx("div", { className: styles.suggestItem, onMouseDown: (event) => {
+                    event.preventDefault();
+                }, onKeyDown: (event) => {
+                    if (keyboardMatch(event, keyboardKeys.Enter)) {
+                        onValueSelect(value, undefined, true);
+                    }
+                }, onClick: (event) => {
+                    event.preventDefault();
+                    onValueSelect(value, undefined, true);
+                }, "data-qa": "suggest-item-user-input", tabIndex: 0, children: renderItem({
+                    item: { value, type: 'userInput' },
+                    onValueSelect,
+                    breakpoint,
+                    'data-qa': 'suggest-item-user-input-text',
+                    isMobile,
+                }) }, "suggest-item-user-input"),
+        ];
+    }
+    return [
+        jsx(Card, { style: "primary", stretched: true, hoverStyle: "secondary", onMouseDown: (event) => {
+                event.preventDefault();
+            }, onClick: (event) => {
+                event.preventDefault();
+                onValueSelect(value, undefined, true);
+            }, padding: [Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12, paddingTop: 12, paddingBottom: 12, borderRadius: 12, "data-qa": "suggest-item-user-input", children: renderItem({
+                item: { value, type: 'userInput' },
+                onValueSelect,
+                breakpoint,
+                'data-qa': 'suggest-item-user-input-text',
+                isMobile,
+            }) }, "suggest-item-user-input"),
+    ];
+};
+const renderSection = (section, sectionId, onValueSelect, breakpoint, length, haveBottomContent, renderItem = RenderItemDefault, isMobile) => {
+    if (section.type === 'cells') {
+        const cellsSection = section;
+        return cellsSection.items.map((item, index) => {
+            if (isMobile) {
+                return (jsx("div", { className: styles.suggestItem, onMouseDown: (event) => {
+                        event.preventDefault();
+                    }, onKeyDown: (event) => {
+                        if (keyboardMatch(event, keyboardKeys.Enter)) {
+                            onValueSelect(item.value, item.data);
+                        }
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        onValueSelect(item.value, item.data);
+                    }, "data-qa": "suggest-item-cell", tabIndex: 0, children: renderItem({
+                        item: {
+                            type: 'cells',
+                            ...item,
+                        },
+                        data: item.data,
+                        onValueSelect,
+                        breakpoint,
+                        'data-qa': 'suggest-item-cell-text',
+                        isMobile,
+                    }) }, `cell_${sectionId}_${index}_${item.value}`));
+            }
+            return (jsx(Card, { style: "primary", stretched: true, hoverStyle: "secondary", onMouseDown: (event) => {
+                    event.preventDefault();
+                }, onClick: (event) => {
+                    event.preventDefault();
+                    onValueSelect(item.value, item.data);
+                }, padding: [Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12, paddingTop: 12, paddingBottom: 12, borderRadius: 12, "data-qa": "suggest-item-cell", children: renderItem({
+                    item: {
+                        type: 'cells',
+                        ...item,
+                    },
+                    data: item.data,
+                    onValueSelect,
+                    breakpoint,
+                    'data-qa': 'suggest-item-cell-text',
+                    isMobile,
+                }) }, `cell_${sectionId}_${index}_${item.value}`));
+        });
+    }
+    if (section.type === 'chips') {
+        const chipsSection = section;
+        return [
+            jsx("div", { className: classnames(styles.chipsSectionContainer, {
+                    // чипсы - не последний элемент или есть нижний контент
+                    [styles.chipsSectionContainerWithOtherItems]: sectionId !== length - 1 || haveBottomContent,
+                }), children: chipsSection.items.map((item, index) => {
+                    return (jsx(Fragment, { children: renderItem({
+                            item: {
+                                type: 'chips',
+                                ...item,
+                            },
+                            data: item.data,
+                            onValueSelect,
+                            breakpoint,
+                            'data-qa': 'suggest-item-chips',
+                            isMobile,
+                        }) }, `chips_${index}_${sectionId}_${item.value}`));
+                }) }, `chips_section_${sectionId}`),
+        ];
+    }
+    if (section.type === 'delimiter') {
+        const delimiterSection = section;
+        return [
+            jsx("div", { "data-qa": "suggest-item-delimiter", children: renderItem({
+                    item: delimiterSection,
+                    onValueSelect,
+                    breakpoint,
+                    'data-qa': '',
+                    isMobile,
+                }) }, `delimiter_${sectionId}_${delimiterSection.text}`),
+        ];
+    }
+    return [];
+};
+
+export { Delimiter as D, RenderItemDefault as R, renderUserInput as a, renderSection as r, styles as s };
+//# sourceMappingURL=sectionRenderers-DbHEQJwL.js.map

package/sectionRenderers-DbHEQJwL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectionRenderers-DbHEQJwL.js","sources":["../src/sectionRenderers.tsx"],"sourcesContent":["import { ReactElement, Fragment, FC, ReactNode } from 'react';\nimport classnames from 'classnames';\n\nimport { DataSection, DataSectionOfType } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { Link } from '@hh.ru/magritte-ui-link';\nimport {\n    RenderOptionType,\n    SuggestOptionProps,\n    ValueSelectHandler,\n    SuggestOptionWithText,\n    RenderUserInputProps,\n} from '@hh.ru/magritte-ui-suggest/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './suggest.less';\n\nexport const Delimiter: FC<{ children: ReactNode; enablePadding: boolean }> = ({ children, enablePadding }) => {\n    return (\n        <div\n            className={classnames(styles.delimiter, {\n                [styles.delimiterWithPadding]: enablePadding,\n            })}\n            data-qa=\"suggest-item-delimiter\"\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const RenderItemDefault = <DataType,>({\n    data,\n    item,\n    onValueSelect,\n    'data-qa': dataQa,\n    isMobile,\n    enableDelimiterPadding = true,\n}: SuggestOptionProps<DataType>): ReactElement | null => {\n    if (item.type === 'userInput') {\n        return (\n            <Cell horPadding={isMobile} vertPadding={isMobile} data-qa={dataQa}>\n                <CellText>{item.value}</CellText>\n            </Cell>\n        );\n    }\n    if (item.type === 'delimiter') {\n        return (\n            <Delimiter enablePadding={enableDelimiterPadding}>\n                <Text style=\"secondary\" typography=\"label-3-regular\">\n                    {item.text}\n                </Text>\n                {item.link && (\n                    <div className={styles.delimiterLink}>\n                        <Link href={item.link.href}>{item.link.anchor}</Link>\n                    </div>\n                )}\n            </Delimiter>\n        );\n    }\n    if (item.type === 'cells') {\n        return (\n            <Cell horPadding={isMobile} vertPadding={isMobile}>\n                <CellText>{(data as SuggestOptionWithText)?.text || item.value}</CellText>\n            </Cell>\n        );\n    }\n    if (item.type === 'chips') {\n        return (\n            <CustomChip\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => onValueSelect(item.value, item.data)}\n                data-qa={dataQa}\n            >\n                {item.value}\n            </CustomChip>\n        );\n    }\n    return null;\n};\n\nexport const renderUserInput = <DataType,>({\n    value,\n    onValueSelect,\n    breakpoint,\n    renderItem = RenderItemDefault,\n    isMobile,\n}: RenderUserInputProps<DataType>): JSX.Element[] => {\n    if (isMobile) {\n        return [\n            <div\n                key=\"suggest-item-user-input\"\n                className={styles.suggestItem}\n                onMouseDown={(event) => {\n                    event.preventDefault();\n                }}\n                onKeyDown={(event) => {\n                    if (keyboardMatch(event, keyboardKeys.Enter)) {\n                        onValueSelect(value, undefined, true);\n                    }\n                }}\n                onClick={(event) => {\n                    event.preventDefault();\n                    onValueSelect(value, undefined, true);\n                }}\n                data-qa=\"suggest-item-user-input\"\n                tabIndex={0}\n            >\n                {renderItem({\n                    item: { value, type: 'userInput' },\n                    onValueSelect,\n                    breakpoint,\n                    'data-qa': 'suggest-item-user-input-text',\n                    isMobile,\n                })}\n            </div>,\n        ];\n    }\n    return [\n        <Card\n            style=\"primary\"\n            stretched\n            hoverStyle=\"secondary\"\n            onMouseDown={(event) => {\n                event.preventDefault();\n            }}\n            onClick={(event) => {\n                event.preventDefault();\n                onValueSelect(value, undefined, true);\n            }}\n            padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n            paddingTop={12}\n            paddingBottom={12}\n            borderRadius={12}\n            data-qa=\"suggest-item-user-input\"\n            key=\"suggest-item-user-input\"\n        >\n            {renderItem({\n                item: { value, type: 'userInput' },\n                onValueSelect,\n                breakpoint,\n                'data-qa': 'suggest-item-user-input-text',\n                isMobile,\n            })}\n        </Card>,\n    ];\n};\n\nexport const renderSection = <DataSectionType extends DataSection['type'], DataType>(\n    section: DataSectionOfType<DataSectionType>,\n    sectionId: number,\n    onValueSelect: ValueSelectHandler<DataType>,\n    breakpoint: Breakpoint,\n    length: number,\n    haveBottomContent: boolean,\n    renderItem: RenderOptionType<DataType> = RenderItemDefault,\n    isMobile: boolean\n): JSX.Element[] => {\n    if (section.type === 'cells') {\n        const cellsSection = section as DataSectionOfType<'cells', DataType>;\n        return cellsSection.items.map((item, index) => {\n            if (isMobile) {\n                return (\n                    <div\n                        key={`cell_${sectionId}_${index}_${item.value}`}\n                        className={styles.suggestItem}\n                        onMouseDown={(event) => {\n                            event.preventDefault();\n                        }}\n                        onKeyDown={(event) => {\n                            if (keyboardMatch(event, keyboardKeys.Enter)) {\n                                onValueSelect(item.value, item.data);\n                            }\n                        }}\n                        onClick={(event) => {\n                            event.preventDefault();\n                            onValueSelect(item.value, item.data);\n                        }}\n                        data-qa=\"suggest-item-cell\"\n                        tabIndex={0}\n                    >\n                        {renderItem({\n                            item: {\n                                type: 'cells',\n                                ...item,\n                            },\n                            data: item.data,\n                            onValueSelect,\n                            breakpoint,\n                            'data-qa': 'suggest-item-cell-text',\n                            isMobile,\n                        })}\n                    </div>\n                );\n            }\n            return (\n                <Card\n                    style=\"primary\"\n                    stretched\n                    hoverStyle=\"secondary\"\n                    onMouseDown={(event) => {\n                        event.preventDefault();\n                    }}\n                    onClick={(event) => {\n                        event.preventDefault();\n                        onValueSelect(item.value, item.data);\n                    }}\n                    padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n                    paddingTop={12}\n                    paddingBottom={12}\n                    borderRadius={12}\n                    key={`cell_${sectionId}_${index}_${item.value}`}\n                    data-qa=\"suggest-item-cell\"\n                >\n                    {renderItem({\n                        item: {\n                            type: 'cells',\n                            ...item,\n                        },\n                        data: item.data,\n                        onValueSelect,\n                        breakpoint,\n                        'data-qa': 'suggest-item-cell-text',\n                        isMobile,\n                    })}\n                </Card>\n            );\n        });\n    }\n\n    if (section.type === 'chips') {\n        const chipsSection = section as DataSectionOfType<'chips', DataType>;\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                {chipsSection.items.map((item, index) => {\n                    return (\n                        <Fragment key={`chips_${index}_${sectionId}_${item.value}`}>\n                            {renderItem({\n                                item: {\n                                    type: 'chips',\n                                    ...item,\n                                },\n                                data: item.data,\n                                onValueSelect,\n                                breakpoint,\n                                'data-qa': 'suggest-item-chips',\n                                isMobile,\n                            })}\n                        </Fragment>\n                    );\n                })}\n            </div>,\n        ];\n    }\n\n    if (section.type === 'delimiter') {\n        const delimiterSection = section as DataSectionOfType<'delimiter', DataType>;\n        return [\n            <div key={`delimiter_${sectionId}_${delimiterSection.text}`} data-qa=\"suggest-item-delimiter\">\n                {renderItem({\n                    item: delimiterSection,\n                    onValueSelect,\n                    breakpoint,\n                    'data-qa': '',\n                    isMobile,\n                })}\n            </div>,\n        ];\n    }\n\n    return [];\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAqBa,MAAA,SAAS,GAAwD,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAI;IAC1G,QACIA,aACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE;AACpC,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa;AAC/C,SAAA,CAAC,aACM,wBAAwB,EAAA,QAAA,EAE/B,QAAQ,EAAA,CACP,EACR;AACN,EAAE;MAEW,iBAAiB,GAAG,CAAY,EACzC,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,SAAS,EAAE,MAAM,EACjB,QAAQ,EACR,sBAAsB,GAAG,IAAI,GACF,KAAyB;AACpD,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;QAC3B,QACIA,IAAC,IAAI,EAAA,EAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,aAAW,MAAM,EAAA,QAAA,EAC9DA,GAAC,CAAA,QAAQ,EAAE,EAAA,QAAA,EAAA,IAAI,CAAC,KAAK,EAAA,CAAY,EAC9B,CAAA,EACT;KACL;AACD,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;QAC3B,QACIC,IAAC,CAAA,SAAS,EAAC,EAAA,aAAa,EAAE,sBAAsB,EAC5C,QAAA,EAAA,CAAAD,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,WAAW,EAAC,UAAU,EAAC,iBAAiB,EAC/C,QAAA,EAAA,IAAI,CAAC,IAAI,EACP,CAAA,EACN,IAAI,CAAC,IAAI,KACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAChC,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAA,QAAA,EAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAA,CAAQ,EACnD,CAAA,CACT,CACO,EAAA,CAAA,EACd;KACL;AACD,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;QACvB,QACIA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAA,QAAA,EAC7CA,IAAC,QAAQ,EAAA,EAAA,QAAA,EAAG,IAA8B,EAAE,IAAI,IAAI,IAAI,CAAC,KAAK,EAAA,CAAY,EACvE,CAAA,EACT;KACL;AACD,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;AACvB,QAAA,QACIA,GAAC,CAAA,UAAU,EACP,EAAA,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE,EAC9C,OAAO,EAAE,MAAM,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAA,SAAA,EAC1C,MAAM,EAEd,QAAA,EAAA,IAAI,CAAC,KAAK,EAAA,CACF,EACf;KACL;AACD,IAAA,OAAO,IAAI,CAAC;AAChB,EAAE;AAEW,MAAA,eAAe,GAAG,CAAY,EACvC,KAAK,EACL,aAAa,EACb,UAAU,EACV,UAAU,GAAG,iBAAiB,EAC9B,QAAQ,GACqB,KAAmB;IAChD,IAAI,QAAQ,EAAE;QACV,OAAO;YACHA,GAEI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,CAAC,KAAK,KAAI;oBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,iBAAC,EACD,SAAS,EAAE,CAAC,KAAK,KAAI;oBACjB,IAAI,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE;AAC1C,wBAAA,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;qBACzC;AACL,iBAAC,EACD,OAAO,EAAE,CAAC,KAAK,KAAI;oBACf,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,oBAAA,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;iBACzC,EAAA,SAAA,EACO,yBAAyB,EACjC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAEV,UAAU,CAAC;AACR,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE;oBAClC,aAAa;oBACb,UAAU;AACV,oBAAA,SAAS,EAAE,8BAA8B;oBACzC,QAAQ;iBACX,CAAC,EAAA,EAvBE,yBAAyB,CAwB3B;SACT,CAAC;KACL;IACD,OAAO;AACH,QAAAA,GAAA,CAAC,IAAI,EACD,EAAA,KAAK,EAAC,SAAS,EACf,SAAS,EAAA,IAAA,EACT,UAAU,EAAC,WAAW,EACtB,WAAW,EAAE,CAAC,KAAK,KAAI;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,aAAC,EACD,OAAO,EAAE,CAAC,KAAK,KAAI;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,gBAAA,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;AAC1C,aAAC,EACD,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,EACpE,UAAU,EAAE,EAAE,EACd,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,aACR,yBAAyB,EAAA,QAAA,EAGhC,UAAU,CAAC;AACR,gBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE;gBAClC,aAAa;gBACb,UAAU;AACV,gBAAA,SAAS,EAAE,8BAA8B;gBACzC,QAAQ;aACX,CAAC,EAAA,EARE,yBAAyB,CAS1B;KACV,CAAC;AACN,EAAE;MAEW,aAAa,GAAG,CACzB,OAA2C,EAC3C,SAAiB,EACjB,aAA2C,EAC3C,UAAsB,EACtB,MAAc,EACd,iBAA0B,EAC1B,aAAyC,iBAAiB,EAC1D,QAAiB,KACF;AACf,IAAA,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE;QAC1B,MAAM,YAAY,GAAG,OAA+C,CAAC;QACrE,OAAO,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YAC1C,IAAI,QAAQ,EAAE;AACV,gBAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAEI,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,CAAC,KAAK,KAAI;wBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,qBAAC,EACD,SAAS,EAAE,CAAC,KAAK,KAAI;wBACjB,IAAI,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE;4BAC1C,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;yBACxC;AACL,qBAAC,EACD,OAAO,EAAE,CAAC,KAAK,KAAI;wBACf,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;qBACxC,EAAA,SAAA,EACO,mBAAmB,EAC3B,QAAQ,EAAE,CAAC,EAAA,QAAA,EAEV,UAAU,CAAC;AACR,wBAAA,IAAI,EAAE;AACF,4BAAA,IAAI,EAAE,OAAO;AACb,4BAAA,GAAG,IAAI;AACV,yBAAA;wBACD,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,aAAa;wBACb,UAAU;AACV,wBAAA,SAAS,EAAE,wBAAwB;wBACnC,QAAQ;AACX,qBAAA,CAAC,EA3BG,EAAA,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,CAAA,CAAE,CA4B7C,EACR;aACL;AACD,YAAA,QACIA,GAAC,CAAA,IAAI,IACD,KAAK,EAAC,SAAS,EACf,SAAS,QACT,UAAU,EAAC,WAAW,EACtB,WAAW,EAAE,CAAC,KAAK,KAAI;oBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,iBAAC,EACD,OAAO,EAAE,CAAC,KAAK,KAAI;oBACf,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;AACzC,iBAAC,EACD,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,EACpE,UAAU,EAAE,EAAE,EACd,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,aAER,mBAAmB,EAAA,QAAA,EAE1B,UAAU,CAAC;AACR,oBAAA,IAAI,EAAE;AACF,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,GAAG,IAAI;AACV,qBAAA;oBACD,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,aAAa;oBACb,UAAU;AACV,oBAAA,SAAS,EAAE,wBAAwB;oBACnC,QAAQ;AACX,iBAAA,CAAC,EAbG,EAAA,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,CAAA,CAAE,CAc5C,EACT;AACN,SAAC,CAAC,CAAC;KACN;AAED,IAAA,IAAI,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE;QAC1B,MAAM,YAAY,GAAG,OAA+C,CAAC;QACrE,OAAO;AACH,YAAAA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,qBAAqB,EAAE;;oBAEhD,CAAC,MAAM,CAAC,mCAAmC,GAAG,SAAS,KAAK,MAAM,GAAG,CAAC,IAAI,iBAAiB;AAC9F,iBAAA,CAAC,EAGD,QAAA,EAAA,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACpC,oBAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EACJ,UAAU,CAAC;AACR,4BAAA,IAAI,EAAE;AACF,gCAAA,IAAI,EAAE,OAAO;AACb,gCAAA,GAAG,IAAI;AACV,6BAAA;4BACD,IAAI,EAAE,IAAI,CAAC,IAAI;4BACf,aAAa;4BACb,UAAU;AACV,4BAAA,SAAS,EAAE,oBAAoB;4BAC/B,QAAQ;AACX,yBAAA,CAAC,EAXS,EAAA,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,CAAA,CAAE,CAY/C,EACb;AACN,iBAAC,CAAC,EAAA,EAlBG,CAAiB,cAAA,EAAA,SAAS,EAAE,CAmB/B;SACT,CAAC;KACL;AAED,IAAA,IAAI,OAAO,CAAC,IAAI,KAAK,WAAW,EAAE;QAC9B,MAAM,gBAAgB,GAAG,OAAmD,CAAC;QAC7E,OAAO;YACHA,GAAqE,CAAA,KAAA,EAAA,EAAA,SAAA,EAAA,wBAAwB,EACxF,QAAA,EAAA,UAAU,CAAC;AACR,oBAAA,IAAI,EAAE,gBAAgB;oBACtB,aAAa;oBACb,UAAU;AACV,oBAAA,SAAS,EAAE,EAAE;oBACb,QAAQ;iBACX,CAAC,EAAA,EAPI,aAAa,SAAS,CAAA,CAAA,EAAI,gBAAgB,CAAC,IAAI,EAAE,CAQrD;SACT,CAAC;KACL;AAED,IAAA,OAAO,EAAE,CAAC;AACd;;;;"}

package/sectionRenderers.d.ts

@@ -1,6 +1,11 @@
-import { ReactElement } from 'react';
+import { ReactElement, FC, ReactNode } from 'react';
 import { DataSection, DataSectionOfType } from '@hh.ru/magritte-common-data-provider';
 import { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';
-import { RenderOptionType, SuggestOptionProps, ValueSelectHandler } from '@hh.ru/magritte-ui-suggest/types';
-export declare const RenderItemDefault: <DataType>({ type, data, item, onValueSelect, "data-qa": dataQa, }: SuggestOptionProps<DataType>) => ReactElement | null;
-export declare const renderSection: <DataSectionType extends DataSection["type"], DataType>(section: DataSectionOfType<DataSectionType>, sectionId: number, onValueSelect: ValueSelectHandler<DataType>, breakpoint: Breakpoint, length: number, haveBottomContent: boolean, renderItem?: RenderOptionType<DataType>) => JSX.Element[];
+import { RenderOptionType, SuggestOptionProps, ValueSelectHandler, RenderUserInputProps } from '@hh.ru/magritte-ui-suggest/types';
+export declare const Delimiter: FC<{
+    children: ReactNode;
+    enablePadding: boolean;
+}>;
+export declare const RenderItemDefault: <DataType>({ data, item, onValueSelect, "data-qa": dataQa, isMobile, enableDelimiterPadding, }: SuggestOptionProps<DataType>) => ReactElement | null;
+export declare const renderUserInput: <DataType>({ value, onValueSelect, breakpoint, renderItem, isMobile, }: RenderUserInputProps<DataType>) => JSX.Element[];
+export declare const renderSection: <DataSectionType extends DataSection["type"], DataType>(section: DataSectionOfType<DataSectionType>, sectionId: number, onValueSelect: ValueSelectHandler<DataType>, breakpoint: Breakpoint, length: number, haveBottomContent: boolean, renderItem: RenderOptionType<DataType> | undefined, isMobile: boolean) => JSX.Element[];

package/sectionRenderers.js

@@ -2,10 +2,12 @@ import './index.css';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
+import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';
+import '@hh.ru/magritte-ui-link';
 import '@hh.ru/magritte-ui-typography';
-export { R as RenderItemDefault, r as renderSection } from './sectionRenderers-Dyz_nHUQ.js';
+export { D as Delimiter, R as RenderItemDefault, r as renderSection, a as renderUserInput } from './sectionRenderers-DbHEQJwL.js';
 //# sourceMappingURL=sectionRenderers.js.map

package/sectionRenderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"sectionRenderers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"sectionRenderers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/types.d.ts

@@ -1,8 +1,7 @@
 import { FocusEventHandler, ForwardRefExoticComponent, FunctionComponent, KeyboardEventHandler, Ref, ReactNode, ReactElement } from 'react';
-import { DataProvider, CellItemProps, ChipItemProps, DataSection } from '@hh.ru/magritte-common-data-provider';
+import { DataProvider, CellItemProps, ChipItemProps, DataProviderResult, DelimiterProps } from '@hh.ru/magritte-common-data-provider';
 import { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';
 import { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';
-import { type NavigationBarProps } from '@hh.ru/magritte-ui-navigation-bar';
 import { BaseTrigger } from '@hh.ru/magritte-ui-trigger/BaseTrigger';
 export interface NativeFocusEventHandler {
     (event: FocusEvent): void;
@@ -12,6 +11,7 @@ export interface RequiredInputProps {
     onChange: (value: string) => void;
     ref: Ref<HTMLInputElement>;
     onFocus: FocusEventHandler<HTMLElement>;
+    onBlur: FocusEventHandler<HTMLElement>;
     onKeyDown: KeyboardEventHandler<HTMLElement>;
 }
 export interface ControlledInputProps extends BaseTrigger<string> {
@@ -21,6 +21,7 @@ export interface SuggestInputProps extends ControlledInputProps {
     ref?: Ref<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLElement>;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    onBlur?: FocusEventHandler<HTMLElement>;
 }
 export interface SearchSubmitType {
     (event: React.KeyboardEvent<HTMLElement>, onCloseBottomSheet: VoidFunction, optionsCount: number): void;
@@ -40,22 +41,54 @@ export interface SuggestTrls {
     resetButton: ReactNode;
 }
 export interface ValueSelectHandler<DataType> {
-    (value: string, data: DataType | undefined): void;
+    (value: string, data: DataType | undefined, isUserInput?: boolean): void;
 }
 export interface SuggestOptionWithText {
     text?: string;
 }
+interface UserInputProps {
+    value: string;
+}
+export type CommonItemType<DataType> = (CellItemProps<DataType> & {
+    type: 'cells';
+}) | (ChipItemProps<DataType> & {
+    type: 'chips';
+}) | (DelimiterProps & {
+    type: 'delimiter';
+}) | (UserInputProps & {
+    type: 'userInput';
+});
 export interface SuggestOptionProps<DataType> {
-    type: Omit<DataSection['type'], 'delimiter'>;
-    item: CellItemProps<DataType> | ChipItemProps<DataType>;
+    item: CommonItemType<DataType>;
     data?: DataType;
     onValueSelect: ValueSelectHandler<DataType>;
     breakpoint: Breakpoint;
     'data-qa'?: string;
+    isMobile: boolean;
+    enableDelimiterPadding?: boolean;
+}
+export interface RenderUserInputProps<DataType> {
+    breakpoint: Breakpoint;
+    onValueSelect: ValueSelectHandler<DataType>;
+    value: string;
+    renderItem?: RenderOptionType<DataType>;
+    isMobile: boolean;
 }
 export interface RenderOptionType<DataType> {
     (props: SuggestOptionProps<DataType>): ReactElement | null;
 }
+export interface AutoSelectFirstItem<DataType> {
+    (result: DataProviderResult<DataType>): ChipItemProps<DataType> | CellItemProps<DataType> | null;
+}
+export interface RenderHeaderProps {
+    onCloseBottomSheet: VoidFunction;
+    headerTitle?: ReactNode;
+    options: ReactNode;
+    onChange?: (value: string) => void;
+}
+export interface RenderHeader {
+    (props: RenderHeaderProps): ReactNode;
+}
 export interface SuggestProps<DataType, InputType extends SuggestInputComponent = SuggestInputComponent> {
     /** Функция провайдер данных */
     dataProvider: DataProvider<DataType>;
@@ -63,7 +96,7 @@ export interface SuggestProps<DataType, InputType extends SuggestInputComponent
     inputValue?: string;
     /** Обработчик выбора значения в саджесте, с помощью возвращаемого значения
      * происходит управление применением выбора */
-    onSelectValidator?: (value: string, data: DataType | undefined) => boolean;
+    onSelectValidator?: (value: string, data: DataType | undefined, isUserInput?: boolean) => boolean;
     /**
      * Обработчик изменения значения саджеста.
      * Срабатывает как при вводе в инпут, так и при выборе значения из саджеста.
@@ -86,12 +119,18 @@ export interface SuggestProps<DataType, InputType extends SuggestInputComponent
     renderTrigger?: (props: InputProp<InputType> & OptionsCount) => ReactElement;
     /** Render функция для option */
     renderItem?: RenderOptionType<DataType>;
-    /** Пропсы NavigationBar который отображается в BottomSheet саджеста на мобильных разрешениях */
-    navigationBarProps?: NavigationBarProps;
     /** Обработчик события нажатия Enter в поиске */
     onSearchSubmit?: SearchSubmitType;
     /** Максимальная высота дропа с вариантами */
     maxHeight?: number;
+    /** Флаг отображения пользовательского ввода в drop/bs */
+    showUserInputInResults?: boolean;
+    /** Флаг включения автовыбора значение при событии blur */
+    autoSelectFirstItem?: boolean | AutoSelectFirstItem<DataType>;
+    /** Render функция для Bottom Sheet header */
+    renderHeader?: RenderHeader;
+    /** Заголовок Navigation Bar */
+    headerTitle?: ReactNode;
     /** Обработчик события потери фокуса садджестом */
     onBlur?: NativeFocusEventHandler;
     /** Верхний произвольный контент */

package/sectionRenderers-Dyz_nHUQ.js

@@ -1,69 +0,0 @@
-import './index.css';
-import { jsx } from 'react/jsx-runtime';
-import { Fragment } from 'react';
-import classnames from 'classnames';
-import { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';
-import { Card } from '@hh.ru/magritte-ui-card';
-import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
-import { CustomChip } from '@hh.ru/magritte-ui-chips';
-import { Text } from '@hh.ru/magritte-ui-typography';
-
-var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_8-0-11","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_8-0-11","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_8-0-11","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_8-0-11","suggest-items-container":"magritte-suggest-items-container___SKj-g_8-0-11","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_8-0-11","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_8-0-11","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_8-0-11","suggest-input-container":"magritte-suggest-input-container___l3OkM_8-0-11","suggestInputContainer":"magritte-suggest-input-container___l3OkM_8-0-11","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_8-0-11","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_8-0-11","error-wrapper":"magritte-error-wrapper___Ui4xt_8-0-11","errorWrapper":"magritte-error-wrapper___Ui4xt_8-0-11"};
-
-const RenderItemDefault = ({ type, data, item, onValueSelect, 'data-qa': dataQa, }) => {
-    if (type === 'cells') {
-        return (jsx(Cell, { children: jsx(CellText, { children: data?.text || item.value }) }));
-    }
-    if (type === 'chips') {
-        return (jsx(CustomChip, { onMouseDown: (event) => event.preventDefault(), onClick: () => onValueSelect(item.value, item.data), "data-qa": dataQa, children: item.value }));
-    }
-    return null;
-};
-const renderSection = (section, sectionId, onValueSelect, breakpoint, length, haveBottomContent, renderItem = RenderItemDefault) => {
-    if (section.type === 'cells') {
-        const cellsSection = section;
-        return cellsSection.items.map((item) => {
-            return (jsx(Card, { style: "primary", stretched: true, hoverStyle: "secondary", onMouseDown: (event) => {
-                    event.preventDefault();
-                }, onClick: (event) => {
-                    event.preventDefault();
-                    onValueSelect(item.value, item.data);
-                }, padding: [Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12, paddingTop: 12, paddingBottom: 12, borderRadius: 12, "data-qa": "suggest-item-cell", children: renderItem({
-                    type: section.type,
-                    item,
-                    data: item.data,
-                    onValueSelect,
-                    breakpoint,
-                    'data-qa': 'suggest-item-cell-text',
-                }) }, `cell_${sectionId}_${item.value}`));
-        });
-    }
-    if (section.type === 'chips') {
-        const chipsSection = section;
-        return [
-            jsx("div", { className: classnames(styles.chipsSectionContainer, {
-                    // чипсы - не последний элемент или есть нижний контент
-                    [styles.chipsSectionContainerWithOtherItems]: sectionId !== length - 1 || haveBottomContent,
-                }), children: chipsSection.items.map((item) => {
-                    return (jsx(Fragment, { children: renderItem({
-                            type: section.type,
-                            item,
-                            data: item.data,
-                            onValueSelect,
-                            breakpoint,
-                            'data-qa': 'suggest-item-chips',
-                        }) }, `chips_${sectionId}_${item.value}`));
-                }) }, `chips_section_${sectionId}`),
-        ];
-    }
-    if (section.type === 'delimiter') {
-        const delimiterSection = section;
-        return [
-            jsx(Card, { style: "primary", stretched: true, padding: [Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12, paddingTop: 8, paddingBottom: 8, "data-qa": "suggest-item-delimiter", children: jsx(Text, { style: "secondary", typography: "label-3-regular", children: delimiterSection.text }) }, `delimiter_${delimiterSection.text}`),
-        ];
-    }
-    return [];
-};
-
-export { RenderItemDefault as R, renderSection as r, styles as s };
-//# sourceMappingURL=sectionRenderers-Dyz_nHUQ.js.map

package/sectionRenderers-Dyz_nHUQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sectionRenderers-Dyz_nHUQ.js","sources":["../src/sectionRenderers.tsx"],"sourcesContent":["import { ReactElement, Fragment } from 'react';\nimport classnames from 'classnames';\n\nimport { DataSection, DataSectionOfType } from '@hh.ru/magritte-common-data-provider';\nimport { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport {\n    RenderOptionType,\n    SuggestOptionProps,\n    ValueSelectHandler,\n    SuggestOptionWithText,\n} from '@hh.ru/magritte-ui-suggest/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './suggest.less';\n\nexport const RenderItemDefault = <DataType,>({\n    type,\n    data,\n    item,\n    onValueSelect,\n    'data-qa': dataQa,\n}: SuggestOptionProps<DataType>): ReactElement | null => {\n    if (type === 'cells') {\n        return (\n            <Cell>\n                <CellText>{(data as SuggestOptionWithText)?.text || item.value}</CellText>\n            </Cell>\n        );\n    }\n    if (type === 'chips') {\n        return (\n            <CustomChip\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => onValueSelect(item.value, item.data)}\n                data-qa={dataQa}\n            >\n                {item.value}\n            </CustomChip>\n        );\n    }\n    return null;\n};\n\nexport const renderSection = <DataSectionType extends DataSection['type'], DataType>(\n    section: DataSectionOfType<DataSectionType>,\n    sectionId: number,\n    onValueSelect: ValueSelectHandler<DataType>,\n    breakpoint: Breakpoint,\n    length: number,\n    haveBottomContent: boolean,\n    renderItem: RenderOptionType<DataType> = RenderItemDefault\n): JSX.Element[] => {\n    if (section.type === 'cells') {\n        const cellsSection = section as DataSectionOfType<'cells', DataType>;\n        return cellsSection.items.map((item) => {\n            return (\n                <Card\n                    style=\"primary\"\n                    stretched\n                    hoverStyle=\"secondary\"\n                    onMouseDown={(event) => {\n                        event.preventDefault();\n                    }}\n                    onClick={(event) => {\n                        event.preventDefault();\n                        onValueSelect(item.value, item.data);\n                    }}\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                    {renderItem({\n                        type: section.type,\n                        item,\n                        data: item.data,\n                        onValueSelect,\n                        breakpoint,\n                        'data-qa': 'suggest-item-cell-text',\n                    })}\n                </Card>\n            );\n        });\n    }\n\n    if (section.type === 'chips') {\n        const chipsSection = section as DataSectionOfType<'chips', DataType>;\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                {chipsSection.items.map((item) => {\n                    return (\n                        <Fragment key={`chips_${sectionId}_${item.value}`}>\n                            {renderItem({\n                                type: section.type,\n                                item,\n                                data: item.data,\n                                onValueSelect,\n                                breakpoint,\n                                'data-qa': 'suggest-item-chips',\n                            })}\n                        </Fragment>\n                    );\n                })}\n            </div>,\n        ];\n    }\n\n    if (section.type === 'delimiter') {\n        const delimiterSection = section as DataSectionOfType<'delimiter', DataType>;\n        return [\n            <Card\n                style=\"primary\"\n                stretched\n                padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n                paddingTop={8}\n                paddingBottom={8}\n                key={`delimiter_${delimiterSection.text}`}\n                data-qa=\"suggest-item-delimiter\"\n            >\n                <Text style=\"secondary\" typography=\"label-3-regular\">\n                    {delimiterSection.text}\n                </Text>\n            </Card>,\n        ];\n    }\n\n    return [];\n};\n"],"names":["_jsx"],"mappings":"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"}