@hh.ru/magritte-ui-chips-trigger 3.0.1 → 3.2.0

package/ChipsTrigger.js

@@ -4,12 +4,13 @@ import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
 import { keyboardMatch, keyboardKeys, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { CustomChip } from '@hh.ru/magritte-ui-chips';
 import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
 import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
 
-var styles = {"root":"magritte-root___-zVdz_3-0-1","focused":"magritte-focused___0Uzyu_3-0-1","invalid":"magritte-invalid___tVzQV_3-0-1","disabled":"magritte-disabled___UeqcV_3-0-1","field":"magritte-field___rlEmn_3-0-1","focus-visible":"magritte-focus-visible___ifvAP_3-0-1","focusVisible":"magritte-focus-visible___ifvAP_3-0-1","large":"magritte-large___JIrIy_3-0-1","icon":"magritte-icon___fDMiz_3-0-1","medium":"magritte-medium___Xk-XB_3-0-1","scrollable-area":"magritte-scrollable-area___-xMF2_3-0-1","scrollableArea":"magritte-scrollable-area___-xMF2_3-0-1","chips-and-input":"magritte-chips-and-input___qg-Ba_3-0-1","chipsAndInput":"magritte-chips-and-input___qg-Ba_3-0-1","icon_expanded":"magritte-icon_expanded___RaOT-_3-0-1","iconExpanded":"magritte-icon_expanded___RaOT-_3-0-1"};
+var styles = {"root":"magritte-root___-zVdz_3-2-0","focused":"magritte-focused___0Uzyu_3-2-0","invalid":"magritte-invalid___tVzQV_3-2-0","disabled":"magritte-disabled___UeqcV_3-2-0","label":"magritte-label___j7Trt_3-2-0","focus-visible":"magritte-focus-visible___ifvAP_3-2-0","focusVisible":"magritte-focus-visible___ifvAP_3-2-0","large":"magritte-large___JIrIy_3-2-0","field":"magritte-field___rlEmn_3-2-0","icon":"magritte-icon___fDMiz_3-2-0","scrollable-area":"magritte-scrollable-area___-xMF2_3-2-0","scrollableArea":"magritte-scrollable-area___-xMF2_3-2-0","medium":"magritte-medium___Xk-XB_3-2-0","chips-and-input":"magritte-chips-and-input___qg-Ba_3-2-0","chipsAndInput":"magritte-chips-and-input___qg-Ba_3-2-0","field-input":"magritte-field-input___04Cag_3-2-0","fieldInput":"magritte-field-input___04Cag_3-2-0","label-wrapper":"magritte-label-wrapper___De7Bm_3-2-0","labelWrapper":"magritte-label-wrapper___De7Bm_3-2-0","icon_expanded":"magritte-icon_expanded___RaOT-_3-2-0","iconExpanded":"magritte-icon_expanded___RaOT-_3-2-0"};
 
 const focusOnLastChip = (event, chipsContainer, input) => {
     if (!chipsContainer || !input) {
@@ -22,6 +23,7 @@ const focusOnLastChip = (event, chipsContainer, input) => {
     }
 };
 const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expanded: externalExpanded, toggleExpanded: toggleExternalExpanded, state, invalid, maxHeight, description, errorMessage, wrapperRef, onChange, onFocus, onBlur, onKeyDown, onChangeInput: onChangeInputExternal, allowArbitraryValues = true, 'data-qa': dataQa = 'chips-trigger', }, ref) => {
+    const { isMobile } = useBreakpoint();
     const [expanded, setExpanded] = useState(false);
     const [isFocusVisible, setFocusVisible] = useState(false);
     const stateRef = useRef({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });
@@ -30,6 +32,7 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
     const chipsContainerRef = useRef(null);
     const inputRef = useRef(null);
     const inputRefCallback = useMultipleRefs(ref, inputRef);
+    const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';
     const onChangeInput = useCallback((value) => {
         onChange({
             value,
@@ -45,11 +48,11 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
         }
     }, [isFocused]);
     const deleteHandler = useCallback((index) => {
-        state.chips.splice(index, 1);
+        const deletedChip = state.chips.splice(index, 1);
         onChange({
             value: state.value,
             chips: [...state.chips],
-            event: { type: 'remove', modifier: 'cross' },
+            event: { type: 'remove', modifier: 'cross', element: deletedChip?.[0] },
         });
         // не теряем фокус с инпута
         inputRef.current?.focus();
@@ -69,11 +72,14 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
         }
         // удаляем последний созданный чипс
         if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {
-            state.chips.pop();
+            if (state.chips.length === 0) {
+                return;
+            }
+            const deletedChip = state.chips.pop();
             onChange({
                 value: state.value,
                 chips: [...state.chips],
-                event: { type: 'remove', modifier: 'backspace' },
+                event: { type: 'remove', modifier: 'backspace', element: deletedChip },
             });
         }
         // пытаемся найти ближайший чипс для фокуса
@@ -127,7 +133,7 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
                                     return (jsx(CustomChip, { Element: "button", size: "small", disabled: disabled, onDelete: () => {
                                             deleteHandler(index);
                                         }, dataQaWrapper: `chips-trigger-chip-${chip.value}`, children: chip.label ?? chip.value }, `${chip.value}-${index}`));
-                                }), jsx("input", { ref: inputRefCallback, className: styles.field, type: "text", disabled: disabled, value: state.value, placeholder: state.chips.length === 0 ? placeholder : '', onKeyDown: keyDownHandler, onFocus: focusHandler, onBlur: blurHandler, onChange: changeHandler, "data-qa": "chips-trigger-input" })] }) }), jsx("div", { className: classnames(styles.icon, {
+                                }), jsxs("div", { className: styles.field, children: [jsx("input", { ref: inputRefCallback, className: styles.fieldInput, type: "text", disabled: disabled, value: state.value, onKeyDown: keyDownHandler, onFocus: focusHandler, onBlur: blurHandler, onChange: changeHandler, "data-qa": "chips-trigger-input", readOnly: isMobile }), showLabel && (jsx("div", { className: styles.labelWrapper, children: jsx("label", { className: styles.label, children: placeholder }) }))] })] }) }), jsx("div", { className: classnames(styles.icon, {
                             [styles.iconExpanded]: expanded || externalExpanded,
                         }), children: jsx(ChevronDownOutlinedSize24, {}) })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
 });

package/ChipsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsTrigger.js","sources":["../src/ChipsTrigger.tsx"],"sourcesContent":["import {\n    forwardRef,\n    InputHTMLAttributes,\n    useState,\n    useCallback,\n    KeyboardEventHandler,\n    useRef,\n    SyntheticEvent,\n    useEffect,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n    if (!chipsContainer || !input) {\n        return;\n    }\n    const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n    if (nextFocusableElement !== null) {\n        event.preventDefault();\n        nextFocusableElement.focus();\n    }\n};\n\ntype State = {\n    hadFocusWhenClicked: boolean;\n    wasExpandedWhenClicked: boolean;\n};\n\nexport const ChipsTrigger = forwardRef<\n    HTMLInputElement,\n    ChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps>\n>(\n    (\n        {\n            size = 'large',\n            placeholder,\n            disabled,\n            expanded: externalExpanded,\n            toggleExpanded: toggleExternalExpanded,\n            state,\n            invalid,\n            maxHeight,\n            description,\n            errorMessage,\n            wrapperRef,\n            onChange,\n            onFocus,\n            onBlur,\n            onKeyDown,\n            onChangeInput: onChangeInputExternal,\n            allowArbitraryValues = true,\n            'data-qa': dataQa = 'chips-trigger',\n        },\n        ref\n    ) => {\n        const [expanded, setExpanded] = useState(false);\n        const [isFocusVisible, setFocusVisible] = useState(false);\n        const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n        const chipsRootRef = useRef<HTMLDivElement>(null);\n        const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n        const chipsContainerRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement>(null);\n        const inputRefCallback = useMultipleRefs(ref, inputRef);\n\n        const onChangeInput = useCallback(\n            (value: string) => {\n                onChange({\n                    value,\n                    chips: state.chips,\n                    event: { type: 'change', modifier: 'keyboard' },\n                });\n                onChangeInputExternal?.(value);\n            },\n            [state.chips, onChange, onChangeInputExternal]\n        );\n        const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n        useEffect(() => {\n            if (inputRef.current) {\n                setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n            }\n        }, [isFocused]);\n\n        const deleteHandler = useCallback(\n            (index: number) => {\n                state.chips.splice(index, 1);\n                onChange({\n                    value: state.value,\n                    chips: [...state.chips],\n                    event: { type: 'remove', modifier: 'cross' },\n                });\n                // не теряем фокус с инпута\n                inputRef.current?.focus();\n            },\n            [onChange, state.chips, state.value]\n        );\n\n        const keyDownHandler = useCallback<KeyboardEventHandler>(\n            (event) => {\n                // создаем новый чипс и затираем текстовый инпут\n                if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                    if (state.value.length === 0) {\n                        return;\n                    }\n                    onChange({\n                        value: '',\n                        chips: [...state.chips, { value: state.value }],\n                        event: { type: 'add', modifier: 'enter' },\n                    });\n                    onChangeInputExternal?.('');\n                }\n                // удаляем последний созданный чипс\n                if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n                    state.chips.pop();\n                    onChange({\n                        value: state.value,\n                        chips: [...state.chips],\n                        event: { type: 'remove', modifier: 'backspace' },\n                    });\n                }\n                // пытаемся найти ближайший чипс для фокуса\n                if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n                    focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n                }\n            },\n            [allowArbitraryValues, onChange, onChangeInputExternal, state]\n        );\n\n        // при выставлении высоты учитваем падинги\n        // иначе высота будет больше значения свойства\n        const scrollableAreaStyle = maxHeight\n            ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }\n            : undefined;\n\n        return (\n            <div>\n                <div\n                    ref={chipsRootRefCallback}\n                    className={classnames(styles.root, styles[size], {\n                        [styles.focused]: isFocused,\n                        [styles.focusVisible]: isFocusVisible,\n                        [styles.disabled]: !!disabled,\n                        [styles.invalid]: !!invalid,\n                    })}\n                    onFocus={() => {\n                        if (disabled) {\n                            return;\n                        }\n                        if (!inputRef.current) {\n                            return;\n                        }\n                        setExpanded(true);\n                        // добавляем .focus() еще и тут\n                        // чтобы не сбрасывать фокус во время клика по chip\n                        // или по клику на враппер\n                        if (document.activeElement === chipsRootRef.current) {\n                            inputRef.current.focus();\n                        }\n                    }}\n                    onBlur={(event) => {\n                        stateRef.current.hadFocusWhenClicked &&=\n                            event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n                        setExpanded(false);\n                    }}\n                    onKeyDown={onKeyDown}\n                    onMouseDown={() => {\n                        // при повторном клике по инпуту в фокусе нужно закрыть дроп\n                        // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n                        // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n                        // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n                        stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n                        stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n                    }}\n                    onClick={() => {\n                        if (\n                            stateRef.current.hadFocusWhenClicked &&\n                            stateRef.current.wasExpandedWhenClicked === externalExpanded\n                        ) {\n                            toggleExternalExpanded?.();\n                        }\n                        stateRef.current.hadFocusWhenClicked = false;\n                        stateRef.current.wasExpandedWhenClicked = false;\n                    }}\n                    tabIndex={disabled ? -1 : 0}\n                    data-qa={dataQa}\n                >\n                    <div style={scrollableAreaStyle} className={styles.scrollableArea}>\n                        <div ref={chipsContainerRef} className={styles.chipsAndInput}>\n                            {state.chips.map((chip, index) => {\n                                return (\n                                    <CustomChip\n                                        Element=\"button\"\n                                        key={`${chip.value}-${index}`}\n                                        size=\"small\"\n                                        disabled={disabled}\n                                        onDelete={() => {\n                                            deleteHandler(index);\n                                        }}\n                                        dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n                                    >\n                                        {chip.label ?? chip.value}\n                                    </CustomChip>\n                                );\n                            })}\n                            <input\n                                ref={inputRefCallback}\n                                className={styles.field}\n                                type=\"text\"\n                                disabled={disabled}\n                                value={state.value}\n                                placeholder={state.chips.length === 0 ? placeholder : ''}\n                                onKeyDown={keyDownHandler}\n                                onFocus={focusHandler}\n                                onBlur={blurHandler}\n                                onChange={changeHandler}\n                                data-qa=\"chips-trigger-input\"\n                            />\n                        </div>\n                    </div>\n                    <div\n                        className={classnames(styles.icon, {\n                            [styles.iconExpanded]: expanded || externalExpanded,\n                        })}\n                    >\n                        <ChevronDownOutlinedSize24 />\n                    </div>\n                </div>\n                <FormHelper\n                    description={description}\n                    errorMessage={errorMessage}\n                    disabled={disabled}\n                    invalid={invalid}\n                />\n            </div>\n        );\n    }\n);\n\nChipsTrigger.displayName = 'ChipsTrigger';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ChipsTrigger.js","sources":["../src/ChipsTrigger.tsx"],"sourcesContent":["import {\n    forwardRef,\n    InputHTMLAttributes,\n    useState,\n    useCallback,\n    KeyboardEventHandler,\n    useRef,\n    SyntheticEvent,\n    useEffect,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n    if (!chipsContainer || !input) {\n        return;\n    }\n    const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n    if (nextFocusableElement !== null) {\n        event.preventDefault();\n        nextFocusableElement.focus();\n    }\n};\n\ntype State = {\n    hadFocusWhenClicked: boolean;\n    wasExpandedWhenClicked: boolean;\n};\n\nexport const ChipsTrigger = forwardRef<\n    HTMLInputElement,\n    ChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps>\n>(\n    (\n        {\n            size = 'large',\n            placeholder,\n            disabled,\n            expanded: externalExpanded,\n            toggleExpanded: toggleExternalExpanded,\n            state,\n            invalid,\n            maxHeight,\n            description,\n            errorMessage,\n            wrapperRef,\n            onChange,\n            onFocus,\n            onBlur,\n            onKeyDown,\n            onChangeInput: onChangeInputExternal,\n            allowArbitraryValues = true,\n            'data-qa': dataQa = 'chips-trigger',\n        },\n        ref\n    ) => {\n        const { isMobile } = useBreakpoint();\n        const [expanded, setExpanded] = useState(false);\n        const [isFocusVisible, setFocusVisible] = useState(false);\n        const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n        const chipsRootRef = useRef<HTMLDivElement>(null);\n        const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n        const chipsContainerRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement>(null);\n        const inputRefCallback = useMultipleRefs(ref, inputRef);\n        const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n\n        const onChangeInput = useCallback(\n            (value: string) => {\n                onChange({\n                    value,\n                    chips: state.chips,\n                    event: { type: 'change', modifier: 'keyboard' },\n                });\n                onChangeInputExternal?.(value);\n            },\n            [state.chips, onChange, onChangeInputExternal]\n        );\n        const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n        useEffect(() => {\n            if (inputRef.current) {\n                setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n            }\n        }, [isFocused]);\n\n        const deleteHandler = useCallback(\n            (index: number) => {\n                const deletedChip = state.chips.splice(index, 1);\n                onChange({\n                    value: state.value,\n                    chips: [...state.chips],\n                    event: { type: 'remove', modifier: 'cross', element: deletedChip?.[0] },\n                });\n                // не теряем фокус с инпута\n                inputRef.current?.focus();\n            },\n            [onChange, state.chips, state.value]\n        );\n\n        const keyDownHandler = useCallback<KeyboardEventHandler>(\n            (event) => {\n                // создаем новый чипс и затираем текстовый инпут\n                if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                    if (state.value.length === 0) {\n                        return;\n                    }\n                    onChange({\n                        value: '',\n                        chips: [...state.chips, { value: state.value }],\n                        event: { type: 'add', modifier: 'enter' },\n                    });\n                    onChangeInputExternal?.('');\n                }\n                // удаляем последний созданный чипс\n                if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n                    if (state.chips.length === 0) {\n                        return;\n                    }\n                    const deletedChip = state.chips.pop();\n                    onChange({\n                        value: state.value,\n                        chips: [...state.chips],\n                        event: { type: 'remove', modifier: 'backspace', element: deletedChip },\n                    });\n                }\n                // пытаемся найти ближайший чипс для фокуса\n                if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n                    focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n                }\n            },\n            [allowArbitraryValues, onChange, onChangeInputExternal, state]\n        );\n\n        // при выставлении высоты учитваем падинги\n        // иначе высота будет больше значения свойства\n        const scrollableAreaStyle = maxHeight\n            ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }\n            : undefined;\n\n        return (\n            <div>\n                <div\n                    ref={chipsRootRefCallback}\n                    className={classnames(styles.root, styles[size], {\n                        [styles.focused]: isFocused,\n                        [styles.focusVisible]: isFocusVisible,\n                        [styles.disabled]: !!disabled,\n                        [styles.invalid]: !!invalid,\n                    })}\n                    onFocus={() => {\n                        if (disabled) {\n                            return;\n                        }\n                        if (!inputRef.current) {\n                            return;\n                        }\n                        setExpanded(true);\n                        // добавляем .focus() еще и тут\n                        // чтобы не сбрасывать фокус во время клика по chip\n                        // или по клику на враппер\n                        if (document.activeElement === chipsRootRef.current) {\n                            inputRef.current.focus();\n                        }\n                    }}\n                    onBlur={(event) => {\n                        stateRef.current.hadFocusWhenClicked &&=\n                            event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n                        setExpanded(false);\n                    }}\n                    onKeyDown={onKeyDown}\n                    onMouseDown={() => {\n                        // при повторном клике по инпуту в фокусе нужно закрыть дроп\n                        // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n                        // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n                        // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n                        stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n                        stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n                    }}\n                    onClick={() => {\n                        if (\n                            stateRef.current.hadFocusWhenClicked &&\n                            stateRef.current.wasExpandedWhenClicked === externalExpanded\n                        ) {\n                            toggleExternalExpanded?.();\n                        }\n                        stateRef.current.hadFocusWhenClicked = false;\n                        stateRef.current.wasExpandedWhenClicked = false;\n                    }}\n                    tabIndex={disabled ? -1 : 0}\n                    data-qa={dataQa}\n                >\n                    <div style={scrollableAreaStyle} className={styles.scrollableArea}>\n                        <div ref={chipsContainerRef} className={styles.chipsAndInput}>\n                            {state.chips.map((chip, index) => {\n                                return (\n                                    <CustomChip\n                                        Element=\"button\"\n                                        key={`${chip.value}-${index}`}\n                                        size=\"small\"\n                                        disabled={disabled}\n                                        onDelete={() => {\n                                            deleteHandler(index);\n                                        }}\n                                        dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n                                    >\n                                        {chip.label ?? chip.value}\n                                    </CustomChip>\n                                );\n                            })}\n                            <div className={styles.field}>\n                                <input\n                                    ref={inputRefCallback}\n                                    className={styles.fieldInput}\n                                    type=\"text\"\n                                    disabled={disabled}\n                                    value={state.value}\n                                    onKeyDown={keyDownHandler}\n                                    onFocus={focusHandler}\n                                    onBlur={blurHandler}\n                                    onChange={changeHandler}\n                                    data-qa=\"chips-trigger-input\"\n                                    readOnly={isMobile}\n                                />\n                                {showLabel && (\n                                    <div className={styles.labelWrapper}>\n                                        <label className={styles.label}>{placeholder}</label>\n                                    </div>\n                                )}\n                            </div>\n                        </div>\n                    </div>\n                    <div\n                        className={classnames(styles.icon, {\n                            [styles.iconExpanded]: expanded || externalExpanded,\n                        })}\n                    >\n                        <ChevronDownOutlinedSize24 />\n                    </div>\n                </div>\n                <FormHelper\n                    description={description}\n                    errorMessage={errorMessage}\n                    disabled={disabled}\n                    invalid={invalid}\n                />\n            </div>\n        );\n    }\n);\n\nChipsTrigger.displayName = 'ChipsTrigger';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/UncontrolledChipsTrigger.js

@@ -5,6 +5,7 @@ import { ChipsTrigger } from './ChipsTrigger.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-chips';
 import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';

package/UncontrolledChipsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"UncontrolledChipsTrigger.js","sources":["../src/UncontrolledChipsTrigger.tsx"],"sourcesContent":["import { forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/ChipsTrigger';\nimport { UncontrolledChipsTriggerProps, ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n    value: '',\n    chips: [],\n};\n\nexport const UncontrolledChipsTrigger = forwardRef<\n    HTMLInputElement,\n    UncontrolledChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps>\n>(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {\n    const [state, setState] = useState<ChipsTriggerState>({ ...defaultState });\n    return (\n        <>\n            <ChipsTrigger\n                {...restProps}\n                state={state}\n                onChange={(newState) => {\n                    setState(newState);\n                    onChange?.(newState);\n                }}\n                ref={ref}\n            />\n            {state.chips.map((chip) => (\n                <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n            ))}\n        </>\n    );\n});\n\nUncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;AAKA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEW,MAAA,wBAAwB,GAAG,UAAU,CAGhD,CAAC,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;AAC7E,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAoB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AAC3E,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,YAAY,EAAA,EAAA,GACL,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,KAAI;oBACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACnB,oBAAA,QAAQ,GAAG,QAAQ,CAAC,CAAC;AACzB,iBAAC,EACD,GAAG,EAAE,GAAG,EACV,CAAA,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAO,EAAA,IAAI,CAAC,KAAK,CAAI,CAC1E,CAAC,CAAA,EAAA,CACH,EACL;AACN,CAAC,EAAE;AAEH,wBAAwB,CAAC,WAAW,GAAG,0BAA0B;;;;"}
+{"version":3,"file":"UncontrolledChipsTrigger.js","sources":["../src/UncontrolledChipsTrigger.tsx"],"sourcesContent":["import { forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/ChipsTrigger';\nimport { UncontrolledChipsTriggerProps, ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n    value: '',\n    chips: [],\n};\n\nexport const UncontrolledChipsTrigger = forwardRef<\n    HTMLInputElement,\n    UncontrolledChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps>\n>(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {\n    const [state, setState] = useState<ChipsTriggerState>({ ...defaultState });\n    return (\n        <>\n            <ChipsTrigger\n                {...restProps}\n                state={state}\n                onChange={(newState) => {\n                    setState(newState);\n                    onChange?.(newState);\n                }}\n                ref={ref}\n            />\n            {state.chips.map((chip) => (\n                <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n            ))}\n        </>\n    );\n});\n\nUncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;AAKA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEW,MAAA,wBAAwB,GAAG,UAAU,CAGhD,CAAC,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;AAC7E,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAoB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AAC3E,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,YAAY,EAAA,EAAA,GACL,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,KAAI;oBACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACnB,oBAAA,QAAQ,GAAG,QAAQ,CAAC,CAAC;AACzB,iBAAC,EACD,GAAG,EAAE,GAAG,EACV,CAAA,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAO,EAAA,IAAI,CAAC,KAAK,CAAI,CAC1E,CAAC,CAAA,EAAA,CACH,EACL;AACN,CAAC,EAAE;AAEH,wBAAwB,CAAC,WAAW,GAAG,0BAA0B;;;;"}

package/index.css

@@ -35,8 +35,11 @@
   --magritte-typography-label-2-regular-text-decoration-v19-1-2:none;
   --magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-2:cubic-bezier(0.25, 0.1, 0.25, 1);
   --magritte-semantic-animation-ease-in-out-100-duration-v19-1-2:100ms;
+  --magritte-static-space-50-v19-1-2:2px;
   --magritte-static-space-100-v19-1-2:4px;
+  --magritte-static-space-150-v19-1-2:6px;
   --magritte-static-space-200-v19-1-2:8px;
+  --magritte-static-space-250-v19-1-2:10px;
   --magritte-static-space-300-v19-1-2:12px;
   --magritte-static-space-400-v19-1-2:16px;
   --magritte-core-border-radius-3-x-v19-1-2:12px;
@@ -67,7 +70,7 @@
   --magritte-color-component-input-chips-background-state-neutral-disable-v19-1-2:#1B1B1B;
   --magritte-color-component-input-chips-text-state-neutral-disable-v19-1-2:#474747;
 }
-.magritte-root___-zVdz_3-0-1{
+.magritte-root___-zVdz_3-2-0{
   display:inline-flex;
   position:relative;
   width:100%;
@@ -82,102 +85,112 @@
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v19-1-2);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-root___-zVdz_3-0-1:not(.magritte-focused___0Uzyu_3-0-1):not(.magritte-invalid___tVzQV_3-0-1):not(.magritte-disabled___UeqcV_3-0-1):hover{
+  body.magritte-old-layout .magritte-root___-zVdz_3-2-0:not(.magritte-focused___0Uzyu_3-2-0):not(.magritte-invalid___tVzQV_3-2-0):not(.magritte-disabled___UeqcV_3-2-0):hover{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-2);
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v19-1-2);
   }
-  body.magritte-old-layout .magritte-root___-zVdz_3-0-1:not(.magritte-focused___0Uzyu_3-0-1):not(.magritte-invalid___tVzQV_3-0-1):not(.magritte-disabled___UeqcV_3-0-1):hover .magritte-field___rlEmn_3-0-1::placeholder{
+  body.magritte-old-layout .magritte-root___-zVdz_3-2-0:not(.magritte-focused___0Uzyu_3-2-0):not(.magritte-invalid___tVzQV_3-2-0):not(.magritte-disabled___UeqcV_3-2-0):hover .magritte-label___j7Trt_3-2-0{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_3-0-1:not(.magritte-focused___0Uzyu_3-0-1):not(.magritte-invalid___tVzQV_3-0-1):not(.magritte-disabled___UeqcV_3-0-1):hover{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_3-2-0:not(.magritte-focused___0Uzyu_3-2-0):not(.magritte-invalid___tVzQV_3-2-0):not(.magritte-disabled___UeqcV_3-2-0):hover{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-2);
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v19-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_3-0-1:not(.magritte-focused___0Uzyu_3-0-1):not(.magritte-invalid___tVzQV_3-0-1):not(.magritte-disabled___UeqcV_3-0-1):hover .magritte-field___rlEmn_3-0-1::placeholder{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_3-2-0:not(.magritte-focused___0Uzyu_3-2-0):not(.magritte-invalid___tVzQV_3-2-0):not(.magritte-disabled___UeqcV_3-2-0):hover .magritte-label___j7Trt_3-2-0{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-2);
   }
 }
-.magritte-root___-zVdz_3-0-1:not(.magritte-disabled___UeqcV_3-0-1){
+.magritte-root___-zVdz_3-2-0:not(.magritte-disabled___UeqcV_3-2-0){
   cursor:text;
 }
-.magritte-root___-zVdz_3-0-1.magritte-focused___0Uzyu_3-0-1{
+.magritte-root___-zVdz_3-2-0.magritte-focused___0Uzyu_3-2-0{
   background-color:var(--magritte-color-component-input-background-state-field-focused-v19-1-2);
   box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v19-1-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-1-2);
 }
-.magritte-root___-zVdz_3-0-1.magritte-focused___0Uzyu_3-0-1 .magritte-field___rlEmn_3-0-1::placeholder{
+.magritte-root___-zVdz_3-2-0.magritte-focused___0Uzyu_3-2-0 .magritte-label___j7Trt_3-2-0{
   color:var(--magritte-color-component-input-text-state-placeholder-focused-v19-1-2);
 }
-.magritte-root___-zVdz_3-0-1.magritte-invalid___tVzQV_3-0-1{
+.magritte-root___-zVdz_3-2-0.magritte-invalid___tVzQV_3-2-0{
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v19-1-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v19-1-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v19-1-2);
 }
-.magritte-root___-zVdz_3-0-1.magritte-invalid___tVzQV_3-0-1 .magritte-field___rlEmn_3-0-1::placeholder{
+.magritte-root___-zVdz_3-2-0.magritte-invalid___tVzQV_3-2-0 .magritte-label___j7Trt_3-2-0{
   color:var(--magritte-color-component-input-text-state-placeholder-invalid-v19-1-2);
 }
-.magritte-root___-zVdz_3-0-1.magritte-disabled___UeqcV_3-0-1{
+.magritte-root___-zVdz_3-2-0.magritte-disabled___UeqcV_3-2-0{
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v19-1-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v19-1-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v19-1-2);
   --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v19-1-2);
   --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v19-1-2);
 }
-.magritte-root___-zVdz_3-0-1.magritte-disabled___UeqcV_3-0-1 .magritte-field___rlEmn_3-0-1::placeholder{
+.magritte-root___-zVdz_3-2-0.magritte-disabled___UeqcV_3-2-0 .magritte-label___j7Trt_3-2-0{
   color:var(--magritte-color-component-input-text-state-placeholder-disabled-v19-1-2);
 }
-.magritte-root___-zVdz_3-0-1.magritte-focus-visible___ifvAP_3-0-1{
+.magritte-root___-zVdz_3-2-0.magritte-focus-visible___ifvAP_3-2-0{
   outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-2) solid 4px;
 }
-.magritte-root___-zVdz_3-0-1.magritte-focus-visible___ifvAP_3-0-1.magritte-invalid___tVzQV_3-0-1{
+.magritte-root___-zVdz_3-2-0.magritte-focus-visible___ifvAP_3-2-0.magritte-invalid___tVzQV_3-2-0{
   outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-2);
 }
-.magritte-large___JIrIy_3-0-1{
-  padding:var(--magritte-static-space-300-v19-1-2);
+.magritte-large___JIrIy_3-2-0{
+  padding-left:var(--magritte-static-space-300-v19-1-2);
+  padding-top:var(--magritte-static-space-300-v19-1-2);
+  padding-bottom:var(--magritte-static-space-300-v19-1-2);
+  padding-right:var(--magritte-static-space-50-v19-1-2);
 }
-.magritte-large___JIrIy_3-0-1 .magritte-field___rlEmn_3-0-1{
-  padding-left:var(--magritte-static-space-100-v19-1-2);
+.magritte-large___JIrIy_3-2-0 .magritte-field___rlEmn_3-2-0{
+  margin-left:var(--magritte-static-space-100-v19-1-2);
 }
-.magritte-large___JIrIy_3-0-1 .magritte-icon___fDMiz_3-0-1{
+.magritte-large___JIrIy_3-2-0 .magritte-icon___fDMiz_3-2-0{
   top:var(--magritte-static-space-300-v19-1-2);
   right:var(--magritte-static-space-400-v19-1-2);
 }
-.magritte-medium___Xk-XB_3-0-1{
-  padding:var(--magritte-static-space-200-v19-1-2);
+.magritte-large___JIrIy_3-2-0 .magritte-scrollable-area___-xMF2_3-2-0{
+  padding-right:calc(24px + var(--magritte-static-space-250-v19-1-2) + var(--magritte-static-space-300-v19-1-2));
 }
-.magritte-medium___Xk-XB_3-0-1 .magritte-field___rlEmn_3-0-1{
-  padding-left:var(--magritte-static-space-100-v19-1-2);
+.magritte-medium___Xk-XB_3-2-0{
+  padding-left:var(--magritte-static-space-200-v19-1-2);
+  padding-top:var(--magritte-static-space-200-v19-1-2);
+  padding-bottom:var(--magritte-static-space-200-v19-1-2);
+  padding-right:var(--magritte-static-space-50-v19-1-2);
 }
-.magritte-medium___Xk-XB_3-0-1 .magritte-icon___fDMiz_3-0-1{
+.magritte-medium___Xk-XB_3-2-0 .magritte-field___rlEmn_3-2-0{
+  margin-left:var(--magritte-static-space-100-v19-1-2);
+}
+.magritte-medium___Xk-XB_3-2-0 .magritte-icon___fDMiz_3-2-0{
   top:var(--magritte-static-space-200-v19-1-2);
   right:var(--magritte-static-space-300-v19-1-2);
 }
-.magritte-scrollable-area___-xMF2_3-0-1{
+.magritte-medium___Xk-XB_3-2-0 .magritte-scrollable-area___-xMF2_3-2-0{
+  padding-right:calc(24px + var(--magritte-static-space-150-v19-1-2) + var(--magritte-static-space-300-v19-1-2));
+}
+.magritte-scrollable-area___-xMF2_3-2-0{
   display:flex;
   align-items:flex-start;
   overflow-y:auto;
   width:100%;
-  padding-right:24px;
 }
-.magritte-chips-and-input___qg-Ba_3-0-1{
+.magritte-chips-and-input___qg-Ba_3-2-0{
   display:flex;
   gap:6px;
   flex-wrap:wrap;
   align-items:center;
   width:100%;
-  margin-right:var(--magritte-static-space-300-v19-1-2);
 }
-.magritte-field___rlEmn_3-0-1{
-  border:0;
-  background:none;
+.magritte-field___rlEmn_3-2-0{
+  display:flex;
+  align-items:center;
+  position:relative;
   flex-grow:1;
   height:32px;
   width:50px;
-  outline:none;
   font-family:var(--magritte-typography-label-2-regular-font-family-v19-1-2);
   font-weight:var(--magritte-typography-label-2-regular-font-weight-v19-1-2);
   line-height:var(--magritte-typography-label-2-regular-line-height-v19-1-2);
@@ -187,10 +200,26 @@
   text-transform:var(--magritte-typography-label-2-regular-text-transform-v19-1-2);
   text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v19-1-2);
 }
-.magritte-field___rlEmn_3-0-1::placeholder{
+.magritte-field-input___04Cag_3-2-0{
+  border:0;
+  padding:0;
+  background:none;
+  outline:none;
+  width:100%;
+}
+.magritte-label-wrapper___De7Bm_3-2-0{
+  display:flex;
+  align-items:center;
+  position:absolute;
+  height:100%;
+  inset:0;
+}
+.magritte-label___j7Trt_3-2-0{
   color:var(--magritte-color-component-input-text-placeholder-v19-1-2);
+  overflow:hidden;
+  text-overflow:ellipsis;
 }
-.magritte-icon___fDMiz_3-0-1{
+.magritte-icon___fDMiz_3-2-0{
   display:inline-flex;
   margin-left:auto;
   padding:var(--magritte-static-space-100-v19-1-2) 0;
@@ -199,7 +228,7 @@
   transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v19-1-2);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-2);
 }
-.magritte-icon_expanded___RaOT-_3-0-1{
+.magritte-icon_expanded___RaOT-_3-2-0{
   transform:rotate(-180deg);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-1-2);
 }

package/index.js

@@ -6,6 +6,7 @@ import 'react';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-chips';
 import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';

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-chips-trigger",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -29,10 +29,11 @@
   "dependencies": {
     "@hh.ru/magritte-common-keyboard": "4.0.2",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.4",
     "@hh.ru/magritte-ui-chips": "5.2.20",
     "@hh.ru/magritte-ui-form-helper": "1.0.12",
     "@hh.ru/magritte-ui-icon": "7.9.2",
     "@hh.ru/magritte-ui-input": "7.0.2"
   },
-  "gitHead": "01139f44e3220b2f920526a7d93ac4d43082ace6"
+  "gitHead": "cab9a585e813e940e1ffd06999a9aaf80df7b3a8"
 }

package/types.d.ts

@@ -2,16 +2,18 @@ import type { FocusEventHandler, ForwardedRef, ReactNode, KeyboardEventHandler }
 export type ChipsTriggerSize = 'medium' | 'large';
 export type ChipsTriggerEventType = 'change' | 'remove' | 'add';
 export type ChipsTriggerEventModifier = 'keyboard' | 'cross' | 'enter' | 'backspace';
+interface Chip {
+    value: string;
+    label?: string;
+}
 interface ChipsTriggerEvent {
     type: ChipsTriggerEventType;
     modifier: ChipsTriggerEventModifier;
+    element?: Chip;
 }
 export interface ChipsTriggerState {
     value: string;
-    chips: Array<{
-        value: string;
-        label?: string;
-    }>;
+    chips: Chip[];
     event?: ChipsTriggerEvent;
 }
 export interface ChipsTriggerProps {