@hh.ru/magritte-ui-suggest 9.2.3 → 10.0.1

package/Suggest.js

@@ -6,7 +6,7 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { getSearchResultCount, SuggestPicker } from './SuggestPicker.js';
 import { useSuggestKeyboardNav } from './useSuggestKeyboardNav.js';
-import { s as styles } from './sectionRenderers-CkrlC2u0.js';
+import { s as styles } from './sectionRenderers-BOHVzklv.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-ui-bottom-sheet';

package/SuggestPicker.d.ts

@@ -1,6 +1,6 @@
 import { RefObject, ReactElement, ReactNode } from 'react';
 import { DataProviderResult } from '@hh.ru/magritte-common-data-provider';
-import { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';
+import { type TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';
 import { SuggestInputComponent, InputProp, SearchSubmitType, SuggestTrls, RenderOptionType, RenderHeader } from '@hh.ru/magritte-ui-suggest/types';
 interface SuggestPickerProps<DataType, InputType extends SuggestInputComponent> {
     data: DataProviderResult<DataType> | null | undefined;
@@ -15,7 +15,7 @@ interface SuggestPickerProps<DataType, InputType extends SuggestInputComponent>
     headerTitle?: ReactNode;
     currentInputValueSelectedFromSuggest: boolean;
     suggestContainerRef: RefObject<HTMLElement>;
-    itemsGap: TokenBaseCoreSpace;
+    itemsGap: TokenBaseStaticSpace;
     onBottomSheetClose: VoidFunction;
     inputValue: string;
     topContent?: ReactNode;

package/SuggestPicker.js

@@ -9,7 +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-CkrlC2u0.js';
+import { r as renderSection, a as renderUserInput, s as styles } from './sectionRenderers-BOHVzklv.js';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';

package/SuggestPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuggestPicker.js","sources":["../src/SuggestPicker.tsx"],"sourcesContent":["import {\n    RefObject,\n    useMemo,\n    useEffect,\n    useRef,\n    useState,\n    ReactElement,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { DataProviderResult } from '@hh.ru/magritte-common-data-provider';\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';\nimport { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport { Drop } from '@hh.ru/magritte-ui-drop';\nimport { ArrowPathOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { ControlledInputProps } from '@hh.ru/magritte-ui-input';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';\nimport { renderSection, renderUserInput } from '@hh.ru/magritte-ui-suggest/sectionRenderers';\nimport {\n    SuggestInputComponent,\n    InputProp,\n    SearchSubmitType,\n    SuggestTrls,\n    RenderOptionType,\n    RenderHeader,\n    RenderHeaderProps,\n} from '@hh.ru/magritte-ui-suggest/types';\n\nimport styles from './suggest.less';\n\ninterface SuggestPickerProps<DataType, InputType extends SuggestInputComponent> {\n    data: DataProviderResult<DataType> | null | undefined;\n    activatorRef: RefObject<HTMLElement>;\n    inputRef: RefObject<HTMLElement>;\n    onValueSelect: (value: string, data: DataType | undefined, isUserInput?: boolean) => void;\n    maxHeight: number;\n    input: InputProp<InputType>;\n    inputFocused: boolean;\n    renderItem?: RenderOptionType<DataType>;\n    renderHeader?: RenderHeader;\n    headerTitle?: ReactNode;\n    currentInputValueSelectedFromSuggest: boolean;\n    suggestContainerRef: RefObject<HTMLElement>;\n    itemsGap: TokenBaseCoreSpace;\n    onBottomSheetClose: VoidFunction;\n    inputValue: string;\n    topContent?: ReactNode;\n    bottomContent?: ReactNode;\n    dropWidth?: number;\n    isError: boolean;\n    trls: SuggestTrls;\n    errorPlaceholder: ReactNode;\n    onClickReload: VoidFunction;\n    onBottomSheetOpen?: VoidFunction;\n    onDropOpen?: VoidFunction;\n    onDropClose?: VoidFunction;\n    onSearchSubmit?: SearchSubmitType;\n    showUserInputInResults?: boolean;\n}\n\nconst RenderHeaderDefault = ({\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            >\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    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            >\n                <div\n                    onKeyDown={processInput(inputRef)}\n                    className={classnames(styles.suggestItemsContainer, styles.suggestItemsContainerDesktop)}\n                    style={{ maxHeight }}\n                >\n                    <div className={styles.suggestItemsContainerWrapper} style={{ gap: itemsGap }}>\n                        {topContent}\n                        {userInputInResults}\n                        {suggestContent}\n                        {bottomContent}\n                    </div>\n                </div>\n            </Drop>\n        </>\n    );\n};\n\nSuggestPicker.displayName = 'SuggestPicker';\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/index.css

@@ -1,16 +1,16 @@
 :root{
-  --magritte-color-stroke-state-focused-accessible-v21-5-1:#0070ff7a;
-  --magritte-color-text-primary-v21-5-1:#000000;
+  --magritte-color-stroke-state-focused-accessible-v22-0-0:#0070ff7a;
+  --magritte-color-text-primary-v22-0-0:#000000;
 }
 :root{
-  --magritte-static-space-300-v21-5-1:12px;
-  --magritte-static-space-400-v21-5-1:16px;
+  --magritte-static-space-300-v22-0-0:12px;
+  --magritte-static-space-400-v22-0-0:16px;
 }
 .magritte-night-theme{
-  --magritte-color-stroke-state-focused-accessible-v21-5-1:#0070ff7a;
-  --magritte-color-text-primary-v21-5-1:#ffffff;
+  --magritte-color-stroke-state-focused-accessible-v22-0-0:#0070ff7a;
+  --magritte-color-text-primary-v22-0-0:#ffffff;
 }
-.magritte-chips-section-container___Z7N-E_9-2-3{
+.magritte-chips-section-container___Z7N-E_10-0-1{
   display:flex;
   gap:12px;
   flex:1 1;
@@ -19,93 +19,93 @@
   padding-right:16px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-chips-section-container___Z7N-E_9-2-3{
+  body.magritte-old-layout .magritte-chips-section-container___Z7N-E_10-0-1{
     padding-left:0;
     padding-right:0;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-chips-section-container___Z7N-E_9-2-3{
+  body:not(.magritte-old-layout) .magritte-chips-section-container___Z7N-E_10-0-1{
     padding-left:0;
     padding-right:0;
   }
 }
-.magritte-chips-section-container_with-other-items___eJZAr_9-2-3{
+.magritte-chips-section-container_with-other-items___eJZAr_10-0-1{
   padding-bottom:16px;
 }
-.magritte-suggest-items-container___SKj-g_9-2-3{
+.magritte-suggest-items-container___SKj-g_10-0-1{
   display:flex;
   flex-direction:column;
   padding-top:16px;
 }
-.magritte-suggest-items-container___SKj-g_9-2-3 .focus-visible{
+.magritte-suggest-items-container___SKj-g_10-0-1 .focus-visible{
   z-index:1;
   position:relative;
 }
-.magritte-suggest-items-container_desktop___nKhfi_9-2-3{
+.magritte-suggest-items-container_desktop___nKhfi_10-0-1{
   padding-top:0;
 }
-.magritte-suggest-items-container-wrapper___T2L5U_9-2-3{
-  padding:var(--magritte-static-space-400-v21-5-1);
-  margin:calc(-1 * var(--magritte-static-space-400-v21-5-1));
+.magritte-suggest-items-container-wrapper___T2L5U_10-0-1{
+  padding:var(--magritte-static-space-400-v22-0-0);
+  margin:calc(-1 * var(--magritte-static-space-400-v22-0-0));
   display:flex;
   flex-direction:column;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_9-2-3{
-    padding:var(--magritte-static-space-300-v21-5-1);
+  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_10-0-1{
+    padding:var(--magritte-static-space-300-v22-0-0);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_9-2-3{
-    padding:var(--magritte-static-space-300-v21-5-1);
+  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_10-0-1{
+    padding:var(--magritte-static-space-300-v22-0-0);
   }
 }
-.magritte-suggest-input-container___l3OkM_9-2-3{
+.magritte-suggest-input-container___l3OkM_10-0-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_9-2-3{
-    --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v21-5-1);
+  body.magritte-old-layout .magritte-suggest-input-container___l3OkM_10-0-1{
+    --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v22-0-0);
   }
 }
 @media (min-width: 600px){
-  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_9-2-3{
-    --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v21-5-1);
+  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_10-0-1{
+    --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v22-0-0);
   }
 }
-.magritte-bottom-sheet-input-hide-caret___ikoig_9-2-3{
+.magritte-bottom-sheet-input-hide-caret___ikoig_10-0-1{
   --magritte-ui-input-caret-color-override:transparent;
 }
-.magritte-error-wrapper___Ui4xt_9-2-3{
+.magritte-error-wrapper___Ui4xt_10-0-1{
   height:100%;
 }
-.magritte-delimiter___bh1bC_9-2-3{
+.magritte-delimiter___bh1bC_10-0-1{
   display:flex;
   padding:8px 0;
 }
-.magritte-delimiter_with-padding___BGNUr_9-2-3{
+.magritte-delimiter_with-padding___BGNUr_10-0-1{
   padding:8px 16px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-delimiter_with-padding___BGNUr_9-2-3{
+  body.magritte-old-layout .magritte-delimiter_with-padding___BGNUr_10-0-1{
     padding:8px 12px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-delimiter_with-padding___BGNUr_9-2-3{
+  body:not(.magritte-old-layout) .magritte-delimiter_with-padding___BGNUr_10-0-1{
     padding:8px 12px;
   }
 }
-.magritte-delimiter-link___pBTjW_9-2-3{
+.magritte-delimiter-link___pBTjW_10-0-1{
   margin-left:auto;
 }
-.magritte-suggest-item___jzPcw_9-2-3:hover,
-.magritte-suggest-item___jzPcw_9-2-3:active{
+.magritte-suggest-item___jzPcw_10-0-1:hover,
+.magritte-suggest-item___jzPcw_10-0-1:active{
   cursor:pointer;
 }
-.magritte-suggest-item___jzPcw_9-2-3.focus-visible{
-  outline:var(--magritte-color-stroke-state-focused-accessible-v21-5-1) solid 4px;
+.magritte-suggest-item___jzPcw_10-0-1.focus-visible{
+  outline:var(--magritte-color-stroke-state-focused-accessible-v22-0-0) solid 4px;
 }

package/index.js

@@ -1,7 +1,7 @@
 import './index.css';
 export * from '@hh.ru/magritte-ui-theme-provider';
 export { Suggest } from './Suggest.js';
-export { D as Delimiter, R as RenderItemDefault } from './sectionRenderers-CkrlC2u0.js';
+export { D as Delimiter, R as RenderItemDefault } from './sectionRenderers-BOHVzklv.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@hh.ru/magritte-common-data-provider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-suggest",
-  "version": "9.2.3",
+  "version": "10.0.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -24,22 +24,22 @@
     "@hh.ru/magritte-common-fuzzy-search": "1.0.7",
     "@hh.ru/magritte-common-keyboard": "4.1.2",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.7",
-    "@hh.ru/magritte-design-tokens": "21.5.1",
-    "@hh.ru/magritte-ui-bottom-sheet": "7.2.22",
+    "@hh.ru/magritte-design-tokens": "22.0.0",
+    "@hh.ru/magritte-ui-bottom-sheet": "7.2.24",
     "@hh.ru/magritte-ui-breakpoint": "5.0.3",
-    "@hh.ru/magritte-ui-button": "5.4.0",
-    "@hh.ru/magritte-ui-card": "7.0.24",
-    "@hh.ru/magritte-ui-cell": "5.0.9",
-    "@hh.ru/magritte-ui-chips": "5.4.22",
-    "@hh.ru/magritte-ui-drop": "10.0.3",
-    "@hh.ru/magritte-ui-icon": "11.0.12",
-    "@hh.ru/magritte-ui-input": "7.2.21",
-    "@hh.ru/magritte-ui-link": "5.0.27",
+    "@hh.ru/magritte-ui-button": "5.4.2",
+    "@hh.ru/magritte-ui-card": "7.0.26",
+    "@hh.ru/magritte-ui-cell": "5.0.11",
+    "@hh.ru/magritte-ui-chips": "5.4.24",
+    "@hh.ru/magritte-ui-drop": "10.0.5",
+    "@hh.ru/magritte-ui-icon": "11.0.14",
+    "@hh.ru/magritte-ui-input": "7.2.23",
+    "@hh.ru/magritte-ui-link": "5.0.29",
     "@hh.ru/magritte-ui-mock-component": "1.1.4",
-    "@hh.ru/magritte-ui-navigation-bar": "9.0.21",
-    "@hh.ru/magritte-ui-theme-provider": "1.1.50",
-    "@hh.ru/magritte-ui-trigger": "3.1.20",
-    "@hh.ru/magritte-ui-typography": "3.0.46"
+    "@hh.ru/magritte-ui-navigation-bar": "9.0.23",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.51",
+    "@hh.ru/magritte-ui-trigger": "3.1.22",
+    "@hh.ru/magritte-ui-typography": "3.0.47"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ca3a8a18d81206fffa12bb08398ba44d8b442e3"
+  "gitHead": "d1596153195180eea9a2bef531e062520e5ac74b"
 }

package/{sectionRenderers-CkrlC2u0.js → sectionRenderers-BOHVzklv.js}

@@ -10,7 +10,7 @@ import { CustomChip } from '@hh.ru/magritte-ui-chips';
 import { Link } from '@hh.ru/magritte-ui-link';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_9-2-3","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_9-2-3","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_9-2-3","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_9-2-3","suggest-items-container":"magritte-suggest-items-container___SKj-g_9-2-3","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_9-2-3","suggest-items-container_desktop":"magritte-suggest-items-container_desktop___nKhfi_9-2-3","suggestItemsContainerDesktop":"magritte-suggest-items-container_desktop___nKhfi_9-2-3","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_9-2-3","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_9-2-3","suggest-input-container":"magritte-suggest-input-container___l3OkM_9-2-3","suggestInputContainer":"magritte-suggest-input-container___l3OkM_9-2-3","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_9-2-3","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_9-2-3","error-wrapper":"magritte-error-wrapper___Ui4xt_9-2-3","errorWrapper":"magritte-error-wrapper___Ui4xt_9-2-3","delimiter":"magritte-delimiter___bh1bC_9-2-3","delimiter_with-padding":"magritte-delimiter_with-padding___BGNUr_9-2-3","delimiterWithPadding":"magritte-delimiter_with-padding___BGNUr_9-2-3","delimiter-link":"magritte-delimiter-link___pBTjW_9-2-3","delimiterLink":"magritte-delimiter-link___pBTjW_9-2-3","suggest-item":"magritte-suggest-item___jzPcw_9-2-3","suggestItem":"magritte-suggest-item___jzPcw_9-2-3"};
+var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_10-0-1","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_10-0-1","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_10-0-1","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_10-0-1","suggest-items-container":"magritte-suggest-items-container___SKj-g_10-0-1","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_10-0-1","suggest-items-container_desktop":"magritte-suggest-items-container_desktop___nKhfi_10-0-1","suggestItemsContainerDesktop":"magritte-suggest-items-container_desktop___nKhfi_10-0-1","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_10-0-1","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_10-0-1","suggest-input-container":"magritte-suggest-input-container___l3OkM_10-0-1","suggestInputContainer":"magritte-suggest-input-container___l3OkM_10-0-1","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_10-0-1","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_10-0-1","error-wrapper":"magritte-error-wrapper___Ui4xt_10-0-1","errorWrapper":"magritte-error-wrapper___Ui4xt_10-0-1","delimiter":"magritte-delimiter___bh1bC_10-0-1","delimiter_with-padding":"magritte-delimiter_with-padding___BGNUr_10-0-1","delimiterWithPadding":"magritte-delimiter_with-padding___BGNUr_10-0-1","delimiter-link":"magritte-delimiter-link___pBTjW_10-0-1","delimiterLink":"magritte-delimiter-link___pBTjW_10-0-1","suggest-item":"magritte-suggest-item___jzPcw_10-0-1","suggestItem":"magritte-suggest-item___jzPcw_10-0-1"};
 
 const Delimiter = ({ children, enablePadding }) => {
     return (jsx("div", { className: classnames(styles.delimiter, {
@@ -149,4 +149,4 @@ const renderSection = (section, sectionId, onValueSelect, breakpoint, length, ha
 };
 
 export { Delimiter as D, RenderItemDefault as R, renderUserInput as a, renderSection as r, styles as s };
-//# sourceMappingURL=sectionRenderers-CkrlC2u0.js.map
+//# sourceMappingURL=sectionRenderers-BOHVzklv.js.map

package/{sectionRenderers-CkrlC2u0.js.map → sectionRenderers-BOHVzklv.js.map}

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

package/sectionRenderers.js

@@ -9,5 +9,5 @@ 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-CkrlC2u0.js';
+export { D as Delimiter, R as RenderItemDefault, r as renderSection, a as renderUserInput } from './sectionRenderers-BOHVzklv.js';
 //# sourceMappingURL=sectionRenderers.js.map

package/types.d.ts

@@ -1,6 +1,6 @@
 import { FocusEventHandler, ForwardRefExoticComponent, FunctionComponent, KeyboardEventHandler, ReactNode, ReactElement, MutableRefObject } from 'react';
 import { DataProvider, CellItemProps, ChipItemProps, DataProviderResult, DelimiterProps } from '@hh.ru/magritte-common-data-provider';
-import { type TokenBaseCoreSpace } from '@hh.ru/magritte-design-tokens/types';
+import { type TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';
 import { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { BaseTrigger } from '@hh.ru/magritte-ui-trigger/BaseTrigger';
 export interface NativeFocusEventHandler {
@@ -109,7 +109,7 @@ export interface SuggestProps<DataType, InputType extends SuggestInputComponent
      */
     onChange?: (value: string, isValueFromList: boolean, data?: DataType) => void;
     /** Отступ в пикселях между элементами саджеста */
-    itemsGap?: TokenBaseCoreSpace;
+    itemsGap?: TokenBaseStaticSpace;
     /**
      * Компонент, используемый в качестве инпута в саджесте и его пропсы.
      * В качестве компонента могут использоваться только controlled инпуты.