@hh.ru/magritte-ui-suggest 11.1.21 → 11.2.1

package/Suggest.js

@@ -1,12 +1,13 @@
 import './index.css';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import { forwardRef, useState, useRef, useId, useCallback, useEffect, useMemo } from 'react';
 import { DataProviderError } from '@hh.ru/magritte-common-data-provider';
 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 { renderSection, renderUserInput } from './sectionRenderers.js';
 import { useSuggestKeyboardNav } from './useSuggestKeyboardNav.js';
-import { s as styles } from './sectionRenderers-CECX-UvN.js';
+import { s as styles } from './suggest-BWMCEBaw.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-bottom-sheet';
@@ -41,7 +42,7 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
     const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown, onBlur: onInputBlurExternal, } = inputProps;
     const [requestResult, setRequestResult] = useState(null);
     const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState(false);
-    const { isMobile } = useBreakpoint();
+    const { isMobile, breakpoint } = useBreakpoint();
     const [isError, setIsError] = useState(false);
     const inputRef = useRef(null);
     const wrapperRef = useRef(null);
@@ -53,7 +54,13 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
     const currentRequestRef = useRef();
     const actualInputValue = inputValue === undefined ? inputValueState : inputValue;
     const inputWasChanged = useRef(false);
+    const [showDrop, setShowDrop] = useState(true);
+    const [showBottomSheet, setShowBottomSheet] = useState(false);
+    const pickerId = useId();
+    const renderItemRef = useRef(renderItem);
+    renderItemRef.current = renderItem;
     const { focused, onKeyDown, onFocus, ...rest } = useSuggestKeyboardNav(suggestContainerRef, inputContainerRef, setValueSelectedFromSuggest, actualInputValue, inputRef, onBlurRef);
+    const dropOpenend = focused && showDrop;
     const handleBottomSheetClose = () => {
         rest.onBottomSheetClose();
         onBottomSheetClose?.();
@@ -138,6 +145,31 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
         onKeyDown(event);
         onInputKeyDown?.(event);
     }, [onInputKeyDown, onKeyDown]);
+    const data = requestResult?.result;
+    const currentInputValueSelectedFromSuggest = valueSelectedFromSuggest !== false;
+    const suggestContent = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        return data.reduce((result, section, index) => {
+            const renderResult = renderSection(section, index, onValueSelectHandler, breakpoint, data.length, Boolean(bottomContent), renderItemRef.current, isMobile);
+            result.push(...renderResult);
+            return result;
+        }, []);
+    }, [data, onValueSelectHandler, breakpoint, bottomContent, isMobile]);
+    const userInputInResults = showUserInputInResults && actualInputValue
+        ? renderUserInput({
+            value: actualInputValue,
+            onValueSelect: onValueSelectHandler,
+            breakpoint,
+            renderItem,
+            isMobile,
+        })
+        : null;
+    const dropVisible = ((suggestContent !== null && suggestContent.length > 0) ||
+        (userInputInResults !== null && userInputInResults.length > 0)) &&
+        !currentInputValueSelectedFromSuggest &&
+        dropOpenend;
     return (jsxs(Fragment, { children: [jsx("div", { ref: inputContainerRef, className: styles.suggestInputContainer, children: renderTrigger({
                     component: InputComponent,
                     props: {
@@ -150,11 +182,16 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
                         onBlur: onInputBlur,
                         wrapperRef,
                         autoComplete: 'off',
+                        role: 'combobox',
+                        'aria-haspopup': 'listbox',
+                        'aria-autocomplete': 'list',
+                        'aria-controls': pickerId,
+                        'aria-expanded': isMobile ? showBottomSheet : dropVisible,
                     },
                     optionsCount: getSearchResultCount(requestResult?.result),
-                }) }), 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: () => {
+                }) }), jsx(SuggestPicker, { data: requestResult?.result, activatorRef: wrapperRef, inputRef: inputRef, inputFocused: focused, currentInputValueSelectedFromSuggest: currentInputValueSelectedFromSuggest, 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, renderHeader: renderHeader, headerTitle: headerTitle, onClickReload: () => {
                     requestData(actualInputValue);
-                }, onSearchSubmit: onSearchSubmit, input: {
+                }, onSearchSubmit: onSearchSubmit, pickerId: pickerId, setShowDrop: setShowDrop, dropVisible: dropVisible, setShowBottomSheet: setShowBottomSheet, showBottomSheet: showBottomSheet, suggestContent: suggestContent, userInputInResults: userInputInResults, input: {
                     component: InputComponent,
                     props: {
                         ...input.props,

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    ChangeEvent,\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, event?: ChangeEvent<HTMLInputElement>, skipSuggestChangeHandler = false) => {\n            if (inputValue === undefined) {\n                setInputValueState(value);\n            }\n            !skipSuggestChangeHandler && onChange?.(value, false);\n            onInputChange?.(value, event);\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, undefined, 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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"}
+{"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    ChangeEvent,\n    useId,\n    useMemo,\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 { renderSection, renderUserInput } from '@hh.ru/magritte-ui-suggest/sectionRenderers';\nimport {\n    SuggestProps,\n    SuggestInputComponent,\n    InputProp,\n    ControlledInputProps,\n    NativeFocusEventHandler,\n    OptionsCount,\n    RenderOptionType,\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, breakpoint } = 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    const [showDrop, setShowDrop] = useState(true);\n    const [showBottomSheet, setShowBottomSheet] = useState(false);\n    const pickerId = useId();\n    const renderItemRef = useRef<RenderOptionType<DataType> | undefined>(renderItem);\n    renderItemRef.current = renderItem;\n\n    const { focused, onKeyDown, onFocus, ...rest } = useSuggestKeyboardNav(\n        suggestContainerRef,\n        inputContainerRef,\n        setValueSelectedFromSuggest,\n        actualInputValue,\n        inputRef,\n        onBlurRef\n    );\n    const dropOpenend = focused && showDrop;\n\n    const handleBottomSheetClose = () => {\n        rest.onBottomSheetClose();\n        onBottomSheetClose?.();\n    };\n\n    const onChangeHandler = useCallback(\n        (value: string, event?: ChangeEvent<HTMLInputElement>, skipSuggestChangeHandler = false) => {\n            if (inputValue === undefined) {\n                setInputValueState(value);\n            }\n            !skipSuggestChangeHandler && onChange?.(value, false);\n            onInputChange?.(value, event);\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, undefined, 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    const data = requestResult?.result;\n    const currentInputValueSelectedFromSuggest = valueSelectedFromSuggest !== false;\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                onValueSelectHandler,\n                breakpoint,\n                data.length,\n                Boolean(bottomContent),\n                renderItemRef.current,\n                isMobile\n            );\n            result.push(...renderResult);\n            return result;\n        }, []);\n    }, [data, onValueSelectHandler, breakpoint, bottomContent, isMobile]);\n\n    const userInputInResults =\n        showUserInputInResults && actualInputValue\n            ? renderUserInput({\n                  value: actualInputValue,\n                  onValueSelect: onValueSelectHandler,\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        dropOpenend;\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                        role: 'combobox',\n                        'aria-haspopup': 'listbox',\n                        'aria-autocomplete': 'list',\n                        'aria-controls': pickerId,\n                        'aria-expanded': isMobile ? showBottomSheet : dropVisible,\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={currentInputValueSelectedFromSuggest}\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                renderHeader={renderHeader}\n                headerTitle={headerTitle}\n                onClickReload={() => {\n                    requestData(actualInputValue);\n                }}\n                onSearchSubmit={onSearchSubmit}\n                pickerId={pickerId}\n                setShowDrop={setShowDrop}\n                dropVisible={dropVisible}\n                setShowBottomSheet={setShowBottomSheet}\n                showBottomSheet={showBottomSheet}\n                suggestContent={suggestContent}\n                userInputInResults={userInputInResults}\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,16 +1,14 @@
-import { RefObject, ReactElement, ReactNode } from 'react';
+import { RefObject, ReactElement, ReactNode, Dispatch, SetStateAction } from 'react';
 import { DataProviderResult } from '@hh.ru/magritte-common-data-provider';
 import { type TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';
-import { SuggestInputComponent, InputProp, SearchSubmitType, SuggestTrls, RenderOptionType, RenderHeader } from '@hh.ru/magritte-ui-suggest/types';
+import { SuggestInputComponent, InputProp, SearchSubmitType, SuggestTrls, 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, isUserInput?: boolean) => void;
     maxHeight: number;
     input: InputProp<InputType>;
     inputFocused: boolean;
-    renderItem?: RenderOptionType<DataType>;
     renderHeader?: RenderHeader;
     headerTitle?: ReactNode;
     currentInputValueSelectedFromSuggest: boolean;
@@ -29,11 +27,17 @@ interface SuggestPickerProps<DataType, InputType extends SuggestInputComponent>
     onDropOpen?: VoidFunction;
     onDropClose?: VoidFunction;
     onSearchSubmit?: SearchSubmitType;
-    showUserInputInResults?: boolean;
+    pickerId: string;
+    dropVisible: boolean;
+    setShowDrop: Dispatch<SetStateAction<boolean>>;
+    showBottomSheet: boolean;
+    setShowBottomSheet: Dispatch<SetStateAction<boolean>>;
+    suggestContent: JSX.Element[] | null;
+    userInputInResults: JSX.Element[] | null;
 }
 export declare const getSearchResultCount: <K>(options: DataProviderResult<K> | null | undefined) => number;
 export declare const SuggestPicker: {
-    <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;
+    <DataType, InputType extends SuggestInputComponent>({ data, activatorRef, inputRef, maxHeight, input, inputFocused, currentInputValueSelectedFromSuggest, suggestContainerRef, itemsGap, onBottomSheetClose, onBottomSheetOpen, inputValue, topContent, bottomContent, dropWidth, isError, trls, errorPlaceholder, onClickReload, onDropOpen, onDropClose, onSearchSubmit, headerTitle, renderHeader, pickerId, dropVisible, setShowDrop, showBottomSheet, setShowBottomSheet, suggestContent, userInputInResults, }: SuggestPickerProps<DataType, InputType>): ReactElement | null;
     displayName: string;
 };
 export {};

package/SuggestPicker.js

@@ -1,6 +1,6 @@
 import './index.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useRef, useState, useId, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
 import { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';
@@ -9,12 +9,7 @@ import { Button } from '@hh.ru/magritte-ui-button';
 import { Drop } from '@hh.ru/magritte-ui-drop';
 import { ArrowPathOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
-import { r as renderSection, a as renderUserInput, s as styles } from './sectionRenderers-CECX-UvN.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';
+import { s as styles } from './suggest-BWMCEBaw.js';
 
 const RenderHeaderDefault = ({ onCloseBottomSheet, headerTitle, onChange, options, initialValueOnOpening, }) => {
     return (jsx(NavigationBar, { title: headerTitle, showDivider: "always", right: jsx(CrossOutlinedSize24, { onClick: () => {
@@ -24,15 +19,12 @@ const RenderHeaderDefault = ({ onCloseBottomSheet, headerTitle, onChange, option
 };
 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, 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);
+const SuggestPicker = function ({ data, activatorRef, inputRef, maxHeight, input, inputFocused, currentInputValueSelectedFromSuggest, suggestContainerRef, itemsGap, onBottomSheetClose, onBottomSheetOpen, inputValue, topContent, bottomContent, dropWidth, isError, trls, errorPlaceholder, onClickReload, onDropOpen, onDropClose, onSearchSubmit, headerTitle, renderHeader = RenderHeaderDefault, pickerId, dropVisible, setShowDrop, showBottomSheet, setShowBottomSheet, suggestContent, userInputInResults, }) {
+    const { isMobile } = useBreakpoint();
     const bottomSheetInputRef = useRef(null);
     const [caretVisible, setCaretVisible] = useState(false);
-    const renderItemRef = useRef(renderItem);
-    renderItemRef.current = renderItem;
     const initialValueOnOpening = useRef(inputValue);
+    const listId = useId();
     useEffect(() => {
         if (inputFocused) {
             setShowBottomSheet(true);
@@ -47,11 +39,11 @@ const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, m
         if (currentInputValueSelectedFromSuggest) {
             setShowBottomSheet(false);
         }
-    }, [currentInputValueSelectedFromSuggest, isMobile]);
+    }, [currentInputValueSelectedFromSuggest, isMobile, setShowBottomSheet]);
     // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать
     useEffect(() => {
         setShowDrop(true);
-    }, [inputValue, inputFocused]);
+    }, [inputValue, inputFocused, setShowDrop]);
     const onKeyDownHandler = useCallback((event) => {
         input.props.onKeyDown?.(event);
         if (keyboardMatch(event, keyboardKeys.Enter)) {
@@ -70,31 +62,7 @@ const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, m
         if (keyboardMatch(event, keyboardKeys.Escape)) {
             input.props.onChange?.(initialValueOnOpening.current);
         }
-    }, [input.props, onSearchSubmit, data]);
-    const suggestContent = useMemo(() => {
-        if (!data) {
-            return null;
-        }
-        return data.reduce((result, section, index) => {
-            const renderResult = renderSection(section, index, onValueSelect, breakpoint, data.length, Boolean(bottomContent), renderItemRef.current, isMobile);
-            result.push(...renderResult);
-            return result;
-        }, []);
-    }, [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;
+    }, [input.props, onSearchSubmit, data, setShowBottomSheet]);
     const InputComponent = input.component;
     const processInput = (ref) => (event) => {
         const hasPrintableRepresentation = event.key.replace(/\s/g, '').length === 1;
@@ -114,7 +82,7 @@ const SuggestPicker = function ({ data, activatorRef, inputRef, onValueSelect, m
                 autoComplete: 'off',
                 onKeyDown: onKeyDownHandler,
             } }) }));
-    return (jsxs(Fragment, { children: [jsxs(BottomSheet, { visible: showBottomSheet, height: "full-screen", onAfterExit: onBottomSheetClose, keyboardOverlaysFooter: false, header: renderHeader({
+    return (jsxs(Fragment, { children: [jsxs(BottomSheet, { id: pickerId, visible: showBottomSheet, height: "full-screen", onAfterExit: onBottomSheetClose, keyboardOverlaysFooter: false, header: renderHeader({
                     onCloseBottomSheet: () => setShowBottomSheet(false),
                     headerTitle,
                     onChange: input.props.onChange,
@@ -129,7 +97,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, 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", padding: 16, widthEqualToActivator: !dropWidth, width: dropWidth, forcePlacement: true, keyboardNavigationMode: "list", "data-qa": "suggest-drop", ref: suggestContainerRef, onAppear: onDropOpen, onAfterExit: onDropClose, returnFocusOnClose: false, 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] }) }) })] }));
+                }, 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 }, role: "listbox", children: [topContent, userInputInResults, suggestContent, bottomContent] })), isError && jsx("div", { className: styles.errorWrapper, children: errorPlaceholder })] }), jsx(Drop, { id: pickerId, autoFocusWhenOpened: false, placement: dropPlacement, lockPlacement: true, visible: dropVisible, onClose: () => setShowDrop(false), activatorRef: activatorRef, role: "listbox", padding: 16, widthEqualToActivator: !dropWidth, width: dropWidth, forcePlacement: true, keyboardNavigationMode: "list", "data-qa": "suggest-drop", ref: suggestContainerRef, onAppear: onDropOpen, onAfterExit: onDropClose, returnFocusOnClose: false, "aria-owns": listId, children: jsx("div", { onKeyDown: processInput(inputRef), className: classnames(styles.suggestItemsContainer, styles.suggestItemsContainerDesktop), style: { maxHeight }, children: jsxs("div", { id: listId, 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 TokenBaseStaticSpace } 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: TokenBaseStaticSpace;\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 = ({\n    onCloseBottomSheet,\n    headerTitle,\n    onChange,\n    options,\n    initialValueOnOpening,\n}: RenderHeaderProps): ReactNode => {\n    return (\n        <NavigationBar\n            title={headerTitle}\n            showDivider=\"always\"\n            right={\n                <CrossOutlinedSize24\n                    onClick={() => {\n                        onCloseBottomSheet();\n                        onChange?.(initialValueOnOpening.current);\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    const initialValueOnOpening = useRef(inputValue);\n\n    useEffect(() => {\n        if (inputFocused) {\n            setShowBottomSheet(true);\n            initialValueOnOpening.current = inputValue;\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?.(initialValueOnOpening.current);\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                    initialValueOnOpening,\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                padding={16}\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                returnFocusOnClose={false}\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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"}
+{"version":3,"file":"SuggestPicker.js","sources":["src/SuggestPicker.tsx"],"sourcesContent":["import {\n    RefObject,\n    useEffect,\n    useRef,\n    useState,\n    ReactElement,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    Dispatch,\n    SetStateAction,\n    useId,\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 TokenBaseStaticSpace } 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 {\n    SuggestInputComponent,\n    InputProp,\n    SearchSubmitType,\n    SuggestTrls,\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    maxHeight: number;\n    input: InputProp<InputType>;\n    inputFocused: boolean;\n    renderHeader?: RenderHeader;\n    headerTitle?: ReactNode;\n    currentInputValueSelectedFromSuggest: boolean;\n    suggestContainerRef: RefObject<HTMLElement>;\n    itemsGap: TokenBaseStaticSpace;\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    pickerId: string;\n    dropVisible: boolean;\n    setShowDrop: Dispatch<SetStateAction<boolean>>;\n    showBottomSheet: boolean;\n    setShowBottomSheet: Dispatch<SetStateAction<boolean>>;\n    suggestContent: JSX.Element[] | null;\n    userInputInResults: JSX.Element[] | null;\n}\n\nconst RenderHeaderDefault = ({\n    onCloseBottomSheet,\n    headerTitle,\n    onChange,\n    options,\n    initialValueOnOpening,\n}: RenderHeaderProps): ReactNode => {\n    return (\n        <NavigationBar\n            title={headerTitle}\n            showDivider=\"always\"\n            right={\n                <CrossOutlinedSize24\n                    onClick={() => {\n                        onCloseBottomSheet();\n                        onChange?.(initialValueOnOpening.current);\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    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    headerTitle,\n    renderHeader = RenderHeaderDefault,\n    pickerId,\n    dropVisible,\n    setShowDrop,\n    showBottomSheet,\n    setShowBottomSheet,\n    suggestContent,\n    userInputInResults,\n}: SuggestPickerProps<DataType, InputType>): ReactElement | null {\n    const { isMobile } = useBreakpoint();\n    const bottomSheetInputRef = useRef<HTMLInputElement>(null);\n    const [caretVisible, setCaretVisible] = useState(false);\n    const initialValueOnOpening = useRef(inputValue);\n    const listId = useId();\n\n    useEffect(() => {\n        if (inputFocused) {\n            setShowBottomSheet(true);\n            initialValueOnOpening.current = inputValue;\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, setShowBottomSheet]);\n\n    // если скрыли дроп из-за скрытия активатора под скроллом, то при следующем изменении данных нужно его показать\n    useEffect(() => {\n        setShowDrop(true);\n    }, [inputValue, inputFocused, setShowDrop]);\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?.(initialValueOnOpening.current);\n            }\n        },\n        [input.props, onSearchSubmit, data, setShowBottomSheet]\n    );\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                id={pickerId}\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                    initialValueOnOpening,\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                        role=\"listbox\"\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                id={pickerId}\n                autoFocusWhenOpened={false}\n                placement={dropPlacement}\n                lockPlacement\n                visible={dropVisible}\n                onClose={() => setShowDrop(false)}\n                activatorRef={activatorRef}\n                role=\"listbox\"\n                padding={16}\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                returnFocusOnClose={false}\n                aria-owns={listId}\n            >\n                <div\n                    onKeyDown={processInput(inputRef)}\n                    className={classnames(styles.suggestItemsContainer, styles.suggestItemsContainerDesktop)}\n                    style={{ maxHeight }}\n                >\n                    <div id={listId} 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

@@ -6,7 +6,7 @@
 .magritte-night-theme{
   --magritte-color-text-primary-v24-5-0:#ffffff;
 }
-.magritte-chips-section-container___Z7N-E_11-1-21{
+.magritte-chips-section-container___Z7N-E_11-2-1{
   display:flex;
   gap:12px;
   flex:1 1;
@@ -15,93 +15,93 @@
   padding-right:16px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-chips-section-container___Z7N-E_11-1-21{
+  body.magritte-old-layout .magritte-chips-section-container___Z7N-E_11-2-1{
     padding-left:0;
     padding-right:0;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-chips-section-container___Z7N-E_11-1-21{
+  body:not(.magritte-old-layout) .magritte-chips-section-container___Z7N-E_11-2-1{
     padding-left:0;
     padding-right:0;
   }
 }
-.magritte-chips-section-container_with-other-items___eJZAr_11-1-21{
+.magritte-chips-section-container_with-other-items___eJZAr_11-2-1{
   padding-bottom:16px;
 }
-.magritte-suggest-items-container___SKj-g_11-1-21{
+.magritte-suggest-items-container___SKj-g_11-2-1{
   display:flex;
   flex-direction:column;
   padding-top:16px;
 }
-.magritte-suggest-items-container___SKj-g_11-1-21 .focus-visible{
+.magritte-suggest-items-container___SKj-g_11-2-1 .focus-visible{
   z-index:1;
   position:relative;
 }
-.magritte-suggest-items-container_desktop___nKhfi_11-1-21{
+.magritte-suggest-items-container_desktop___nKhfi_11-2-1{
   padding-top:0;
 }
-.magritte-suggest-items-container-wrapper___T2L5U_11-1-21{
+.magritte-suggest-items-container-wrapper___T2L5U_11-2-1{
   padding:16px;
   margin:calc(-1 * 16px);
   display:flex;
   flex-direction:column;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_11-1-21{
+  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_11-2-1{
     padding:12px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_11-1-21{
+  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_11-2-1{
     padding:12px;
   }
 }
-.magritte-suggest-input-container___l3OkM_11-1-21{
+.magritte-suggest-input-container___l3OkM_11-2-1{
   --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_11-1-21{
+  body.magritte-old-layout .magritte-suggest-input-container___l3OkM_11-2-1{
     --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v24-5-0);
   }
 }
 @media (min-width: 600px){
-  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_11-1-21{
+  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_11-2-1{
     --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v24-5-0);
   }
 }
-.magritte-bottom-sheet-input-hide-caret___ikoig_11-1-21{
+.magritte-bottom-sheet-input-hide-caret___ikoig_11-2-1{
   --magritte-ui-input-caret-color-override:transparent;
 }
-.magritte-error-wrapper___Ui4xt_11-1-21{
+.magritte-error-wrapper___Ui4xt_11-2-1{
   height:100%;
 }
-.magritte-delimiter___bh1bC_11-1-21{
+.magritte-delimiter___bh1bC_11-2-1{
   display:flex;
   padding:8px 0;
 }
-.magritte-delimiter_with-padding___BGNUr_11-1-21{
+.magritte-delimiter_with-padding___BGNUr_11-2-1{
   padding:8px 16px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-delimiter_with-padding___BGNUr_11-1-21{
+  body.magritte-old-layout .magritte-delimiter_with-padding___BGNUr_11-2-1{
     padding:8px 12px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-delimiter_with-padding___BGNUr_11-1-21{
+  body:not(.magritte-old-layout) .magritte-delimiter_with-padding___BGNUr_11-2-1{
     padding:8px 12px;
   }
 }
-.magritte-delimiter-link___pBTjW_11-1-21{
+.magritte-delimiter-link___pBTjW_11-2-1{
   margin-left:auto;
 }
-.magritte-suggest-item___jzPcw_11-1-21:hover,
-.magritte-suggest-item___jzPcw_11-1-21:active{
+.magritte-suggest-item___jzPcw_11-2-1:hover,
+.magritte-suggest-item___jzPcw_11-2-1:active{
   cursor:pointer;
 }
-.magritte-suggest-item___jzPcw_11-1-21.focus-visible{
+.magritte-suggest-item___jzPcw_11-2-1.focus-visible{
   outline:var(--magritte-color-stroke-state-focused-accessible-v24-5-0) solid 4px;
 }

package/index.js

@@ -1,6 +1,6 @@
 import './index.css';
 export { Suggest } from './Suggest.js';
-export { D as Delimiter, R as RenderItemDefault } from './sectionRenderers-CECX-UvN.js';
+export { Delimiter, RenderItemDefault } from './sectionRenderers.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@hh.ru/magritte-common-data-provider';
@@ -14,6 +14,7 @@ import '@hh.ru/magritte-ui-button';
 import '@hh.ru/magritte-ui-drop';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-navigation-bar';
+import './suggest-BWMCEBaw.js';
 import './useSuggestKeyboardNav.js';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';

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": "11.1.21",
+  "version": "11.2.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -25,20 +25,20 @@
     "@hh.ru/magritte-common-keyboard": "4.3.1",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
     "@hh.ru/magritte-design-tokens": "24.5.0",
-    "@hh.ru/magritte-ui-bottom-sheet": "9.2.16",
+    "@hh.ru/magritte-ui-bottom-sheet": "9.3.1",
     "@hh.ru/magritte-ui-breakpoint": "6.0.8",
-    "@hh.ru/magritte-ui-button": "7.1.8",
-    "@hh.ru/magritte-ui-card": "8.3.12",
-    "@hh.ru/magritte-ui-cell": "7.2.9",
-    "@hh.ru/magritte-ui-chips": "6.2.8",
-    "@hh.ru/magritte-ui-drop": "12.2.7",
-    "@hh.ru/magritte-ui-icon": "13.11.4",
-    "@hh.ru/magritte-ui-input": "9.4.7",
-    "@hh.ru/magritte-ui-link": "7.1.10",
+    "@hh.ru/magritte-ui-button": "7.1.9",
+    "@hh.ru/magritte-ui-card": "8.3.13",
+    "@hh.ru/magritte-ui-cell": "7.2.10",
+    "@hh.ru/magritte-ui-chips": "6.2.10",
+    "@hh.ru/magritte-ui-drop": "12.3.1",
+    "@hh.ru/magritte-ui-icon": "14.0.0",
+    "@hh.ru/magritte-ui-input": "9.4.9",
+    "@hh.ru/magritte-ui-link": "7.1.11",
     "@hh.ru/magritte-ui-mock-component": "1.1.7",
-    "@hh.ru/magritte-ui-navigation-bar": "10.1.11",
-    "@hh.ru/magritte-ui-trigger": "4.2.7",
-    "@hh.ru/magritte-ui-typography": "4.5.4"
+    "@hh.ru/magritte-ui-navigation-bar": "10.1.12",
+    "@hh.ru/magritte-ui-trigger": "4.3.1",
+    "@hh.ru/magritte-ui-typography": "5.0.0"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0d147efb00e0803c03ee0ac99525211ce44788e1"
+  "gitHead": "e019f700cfff466975b65b96124aaac592268720"
 }

package/sectionRenderers.js

@@ -1,13 +1,151 @@
 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 { D as Delimiter, R as RenderItemDefault, r as renderSection, a as renderUserInput } from './sectionRenderers-CECX-UvN.js';
+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';
+import { s as styles } from './suggest-BWMCEBaw.js';
+
+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, role: "option", 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, role: "option", 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", role: "option", 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, role: "option", 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", role: "option", 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, RenderItemDefault, renderSection, renderUserInput };
 //# 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":["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                role=\"option\"\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                role=\"option\"\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            role=\"option\"\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                        role=\"option\"\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                    role=\"option\"\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":"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"}

package/suggest-BWMCEBaw.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_11-2-1","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_11-2-1","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_11-2-1","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_11-2-1","suggest-items-container":"magritte-suggest-items-container___SKj-g_11-2-1","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_11-2-1","suggest-items-container_desktop":"magritte-suggest-items-container_desktop___nKhfi_11-2-1","suggestItemsContainerDesktop":"magritte-suggest-items-container_desktop___nKhfi_11-2-1","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-2-1","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-2-1","suggest-input-container":"magritte-suggest-input-container___l3OkM_11-2-1","suggestInputContainer":"magritte-suggest-input-container___l3OkM_11-2-1","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-2-1","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-2-1","error-wrapper":"magritte-error-wrapper___Ui4xt_11-2-1","errorWrapper":"magritte-error-wrapper___Ui4xt_11-2-1","delimiter":"magritte-delimiter___bh1bC_11-2-1","delimiter_with-padding":"magritte-delimiter_with-padding___BGNUr_11-2-1","delimiterWithPadding":"magritte-delimiter_with-padding___BGNUr_11-2-1","delimiter-link":"magritte-delimiter-link___pBTjW_11-2-1","delimiterLink":"magritte-delimiter-link___pBTjW_11-2-1","suggest-item":"magritte-suggest-item___jzPcw_11-2-1","suggestItem":"magritte-suggest-item___jzPcw_11-2-1"};
+
+export { styles as s };
+//# sourceMappingURL=suggest-BWMCEBaw.js.map

package/suggest-BWMCEBaw.js.map

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

package/types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEventHandler, ForwardRefExoticComponent, FunctionComponent, KeyboardEventHandler, ReactNode, ReactElement, ForwardedRef, MutableRefObject } from 'react';
+import { ChangeEvent, FocusEventHandler, ForwardRefExoticComponent, FunctionComponent, KeyboardEventHandler, ReactNode, ReactElement, ForwardedRef, MutableRefObject, AriaAttributes } from 'react';
 import { DataProvider, CellItemProps, ChipItemProps, DataProviderResult, DelimiterProps } from '@hh.ru/magritte-common-data-provider';
 import { type TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';
 import { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';
@@ -14,6 +14,10 @@ export interface RequiredInputProps {
     onBlur: FocusEventHandler<HTMLElement>;
     onKeyDown: KeyboardEventHandler<HTMLElement>;
 }
+interface AriaProps {
+    'aria-expanded'?: AriaAttributes['aria-expanded'];
+    'aria-controls'?: string;
+}
 interface WrapperRefHelper {
     wrapperRef?: ForwardedRef<HTMLElement>;
 }
@@ -38,7 +42,7 @@ export interface OptionsCount {
 }
 export type InputProp<InputType extends SuggestInputComponent, InputParameters = Parameters<InputType>[0], RequiredPropsType = Required<InputParameters>> = RequiredPropsType extends RequiredInputProps ? {
     component: InputType;
-    props: Omit<InputParameters, keyof RequiredInputProps> & Partial<RequiredInputProps> & DataQa & WrapperRefHelper;
+    props: Omit<InputParameters, keyof RequiredInputProps> & Partial<RequiredInputProps> & DataQa & WrapperRefHelper & AriaProps;
 } : never;
 export interface SuggestTrls {
     resetButton: ReactNode;

package/sectionRenderers-CECX-UvN.js

@@ -1,152 +0,0 @@
-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_11-1-21","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_11-1-21","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_11-1-21","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_11-1-21","suggest-items-container":"magritte-suggest-items-container___SKj-g_11-1-21","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_11-1-21","suggest-items-container_desktop":"magritte-suggest-items-container_desktop___nKhfi_11-1-21","suggestItemsContainerDesktop":"magritte-suggest-items-container_desktop___nKhfi_11-1-21","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-1-21","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_11-1-21","suggest-input-container":"magritte-suggest-input-container___l3OkM_11-1-21","suggestInputContainer":"magritte-suggest-input-container___l3OkM_11-1-21","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-1-21","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_11-1-21","error-wrapper":"magritte-error-wrapper___Ui4xt_11-1-21","errorWrapper":"magritte-error-wrapper___Ui4xt_11-1-21","delimiter":"magritte-delimiter___bh1bC_11-1-21","delimiter_with-padding":"magritte-delimiter_with-padding___BGNUr_11-1-21","delimiterWithPadding":"magritte-delimiter_with-padding___BGNUr_11-1-21","delimiter-link":"magritte-delimiter-link___pBTjW_11-1-21","delimiterLink":"magritte-delimiter-link___pBTjW_11-1-21","suggest-item":"magritte-suggest-item___jzPcw_11-1-21","suggestItem":"magritte-suggest-item___jzPcw_11-1-21"};
-
-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-CECX-UvN.js.map

package/sectionRenderers-CECX-UvN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sectionRenderers-CECX-UvN.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":"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"}