@hh.ru/magritte-ui-chips-trigger 4.7.1 → 4.7.3

package/{ChipsList-Cm_F1BsO.js → ChipsList-DJz68o5T.js}

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { CustomChip } from '@hh.ru/magritte-ui-chips';
 
-var styles = {"root":"magritte-root___-zVdz_4-7-1","focused":"magritte-focused___0Uzyu_4-7-1","invalid":"magritte-invalid___tVzQV_4-7-1","disabled":"magritte-disabled___UeqcV_4-7-1","label":"magritte-label___j7Trt_4-7-1","field-input":"magritte-field-input___04Cag_4-7-1","fieldInput":"magritte-field-input___04Cag_4-7-1","scrollable-area":"magritte-scrollable-area___-xMF2_4-7-1","scrollableArea":"magritte-scrollable-area___-xMF2_4-7-1","focus-visible":"magritte-focus-visible___ifvAP_4-7-1","focusVisible":"magritte-focus-visible___ifvAP_4-7-1","large":"magritte-large___JIrIy_4-7-1","field":"magritte-field___rlEmn_4-7-1","icon":"magritte-icon___fDMiz_4-7-1","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-7-1","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-7-1","scrollable-area-wrapper_with-icon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-1","scrollableAreaWrapperWithIcon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-1","medium":"magritte-medium___Xk-XB_4-7-1","chips-and-input":"magritte-chips-and-input___qg-Ba_4-7-1","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-7-1","label-wrapper":"magritte-label-wrapper___De7Bm_4-7-1","labelWrapper":"magritte-label-wrapper___De7Bm_4-7-1","icon_expanded":"magritte-icon_expanded___RaOT-_4-7-1","iconExpanded":"magritte-icon_expanded___RaOT-_4-7-1","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-7-1","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-7-1","mobile-root":"magritte-mobile-root___-hey4_4-7-1","mobileRoot":"magritte-mobile-root___-hey4_4-7-1","mobile-chips":"magritte-mobile-chips___cuB21_4-7-1","mobileChips":"magritte-mobile-chips___cuB21_4-7-1"};
+var styles = {"root":"magritte-root___-zVdz_4-7-3","focused":"magritte-focused___0Uzyu_4-7-3","invalid":"magritte-invalid___tVzQV_4-7-3","disabled":"magritte-disabled___UeqcV_4-7-3","label":"magritte-label___j7Trt_4-7-3","field-input":"magritte-field-input___04Cag_4-7-3","fieldInput":"magritte-field-input___04Cag_4-7-3","scrollable-area":"magritte-scrollable-area___-xMF2_4-7-3","scrollableArea":"magritte-scrollable-area___-xMF2_4-7-3","focus-visible":"magritte-focus-visible___ifvAP_4-7-3","focusVisible":"magritte-focus-visible___ifvAP_4-7-3","large":"magritte-large___JIrIy_4-7-3","field":"magritte-field___rlEmn_4-7-3","icon":"magritte-icon___fDMiz_4-7-3","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-7-3","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-7-3","scrollable-area-wrapper_with-icon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-3","scrollableAreaWrapperWithIcon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-3","medium":"magritte-medium___Xk-XB_4-7-3","chips-and-input":"magritte-chips-and-input___qg-Ba_4-7-3","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-7-3","label-wrapper":"magritte-label-wrapper___De7Bm_4-7-3","labelWrapper":"magritte-label-wrapper___De7Bm_4-7-3","icon_expanded":"magritte-icon_expanded___RaOT-_4-7-3","iconExpanded":"magritte-icon_expanded___RaOT-_4-7-3","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-7-3","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-7-3","mobile-root":"magritte-mobile-root___-hey4_4-7-3","mobileRoot":"magritte-mobile-root___-hey4_4-7-3","mobile-chips":"magritte-mobile-chips___cuB21_4-7-3","mobileChips":"magritte-mobile-chips___cuB21_4-7-3"};
 
 const ChipLayoutComponentDefault = ({ data: _, ...props }) => /* @__PURE__ */ jsx(CustomChip, { ...props });
 const ChipsList = ({
@@ -57,4 +57,4 @@ const ChipsList = ({
 };
 
 export { ChipsList as C, styles as s };
-//# sourceMappingURL=ChipsList-Cm_F1BsO.js.map
+//# sourceMappingURL=ChipsList-DJz68o5T.js.map

package/{ChipsList-Cm_F1BsO.js.map → ChipsList-DJz68o5T.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ChipsList-Cm_F1BsO.js","sources":["src/ChipsList.tsx"],"sourcesContent":["import { ReactElement, useCallback } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipCustomLayoutProps, ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nimport styles from './chips-trigger.less';\n\nconst ChipLayoutComponentDefault = ({ data: _, ...props }: ChipCustomLayoutProps): ReactElement => (\n    <CustomChip {...props} />\n);\n\ntype ChipsListProps<T> = Pick<\n    ChipsTriggerProps<T>,\n    'state' | 'onChange' | 'chipLayoutComponent' | 'disabled' | 'deleteButtonAriaLabel'\n>;\n\nconst ChipsList = <T,>({\n    state,\n    onChange,\n    chipLayoutComponent,\n    disabled,\n    deleteButtonAriaLabel,\n}: ChipsListProps<T>): ReactElement => {\n    const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\n    const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;\n\n    const deleteHandler = useCallback(\n        (index: number) => {\n            const chips = [...state.chips];\n            const [deletedChip] = chips.splice(index, 1);\n            onChange({\n                value: state.value,\n                chips,\n                event: { type: 'remove', modifier: 'cross', element: deletedChip },\n            });\n        },\n        [onChange, state.chips, state.value]\n    );\n\n    return (\n        <>\n            {state.chips.map((chip, index) => {\n                return (\n                    <div\n                        key={`${chip.value}-${index}`}\n                        className={styles.customChipWrapper}\n                        onMouseDown={(event) => event.preventDefault()}\n                    >\n                        <ChipLayoutComponent\n                            Element=\"button\"\n                            size=\"extra-small\"\n                            onDelete={() => {\n                                deleteHandler(index);\n                            }}\n                            dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n                            deleteButtonAriaLabel={deleteButtonAriaLabel ?? deleteButtonAriaTrl}\n                            disabled={disabled}\n                            data={chip.data}\n                            deleteOnly\n                        >\n                            {chip.label ?? chip.value}\n                        </ChipLayoutComponent>\n                    </div>\n                );\n            })}\n        </>\n    );\n};\n\nexport { ChipsList };\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,0BAAA,GAA6B,CAAC,EAAE,IAAM,EAAA,CAAA,EAAG,GAAG,KAAA,EAC9C,qBAAA,GAAA,CAAC,UAAY,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAQ3B,MAAM,YAAY,CAAK;AAAA,EACnB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AACJ,CAAuC,KAAA;AACnC,EAAM,MAAA,mBAAA,GAAsB,cAAe,CAAA,cAAA,EAAgB,QAAQ,CAAA,CAAA;AACnE,EAAA,MAAM,sBAAsB,mBAAuB,IAAA,0BAAA,CAAA;AAEnD,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IAClB,CAAC,KAAkB,KAAA;AACf,MAAA,MAAM,KAAQ,GAAA,CAAC,GAAG,KAAA,CAAM,KAAK,CAAA,CAAA;AAC7B,MAAA,MAAM,CAAC,WAAW,CAAA,GAAI,KAAM,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA,CAAA;AAC3C,MAAS,QAAA,CAAA;AAAA,QACL,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,KAAA;AAAA,QACA,OAAO,EAAE,IAAA,EAAM,UAAU,QAAU,EAAA,OAAA,EAAS,SAAS,WAAY,EAAA;AAAA,OACpE,CAAA,CAAA;AAAA,KACL;AAAA,IACA,CAAC,QAAA,EAAU,KAAM,CAAA,KAAA,EAAO,MAAM,KAAK,CAAA;AAAA,GACvC,CAAA;AAEA,EAAA,uCAES,QAAM,EAAA,KAAA,CAAA,KAAA,CAAM,GAAI,CAAA,CAAC,MAAM,KAAU,KAAA;AAC9B,IACI,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEG,WAAW,MAAO,CAAA,iBAAA;AAAA,QAClB,WAAa,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,cAAe,EAAA;AAAA,QAE7C,QAAA,kBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACG,OAAQ,EAAA,QAAA;AAAA,YACR,IAAK,EAAA,aAAA;AAAA,YACL,UAAU,MAAM;AACZ,cAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,aACvB;AAAA,YACA,aAAA,EAAe,CAAsB,mBAAA,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,YAC/C,uBAAuB,qBAAyB,IAAA,mBAAA;AAAA,YAChD,QAAA;AAAA,YACA,MAAM,IAAK,CAAA,IAAA;AAAA,YACX,UAAU,EAAA,IAAA;AAAA,YAET,QAAA,EAAA,IAAA,CAAK,SAAS,IAAK,CAAA,KAAA;AAAA,WAAA;AAAA,SACxB;AAAA,OAAA;AAAA,MAjBK,CAAG,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAAA,KAkB/B,CAAA;AAAA,GAEP,CACL,EAAA,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"ChipsList-DJz68o5T.js","sources":["src/ChipsList.tsx"],"sourcesContent":["import { ReactElement, useCallback } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipCustomLayoutProps, ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nimport styles from './chips-trigger.less';\n\nconst ChipLayoutComponentDefault = ({ data: _, ...props }: ChipCustomLayoutProps): ReactElement => (\n    <CustomChip {...props} />\n);\n\ntype ChipsListProps<T> = Pick<\n    ChipsTriggerProps<T>,\n    'state' | 'onChange' | 'chipLayoutComponent' | 'disabled' | 'deleteButtonAriaLabel'\n>;\n\nconst ChipsList = <T,>({\n    state,\n    onChange,\n    chipLayoutComponent,\n    disabled,\n    deleteButtonAriaLabel,\n}: ChipsListProps<T>): ReactElement => {\n    const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\n    const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;\n\n    const deleteHandler = useCallback(\n        (index: number) => {\n            const chips = [...state.chips];\n            const [deletedChip] = chips.splice(index, 1);\n            onChange({\n                value: state.value,\n                chips,\n                event: { type: 'remove', modifier: 'cross', element: deletedChip },\n            });\n        },\n        [onChange, state.chips, state.value]\n    );\n\n    return (\n        <>\n            {state.chips.map((chip, index) => {\n                return (\n                    <div\n                        key={`${chip.value}-${index}`}\n                        className={styles.customChipWrapper}\n                        onMouseDown={(event) => event.preventDefault()}\n                    >\n                        <ChipLayoutComponent\n                            Element=\"button\"\n                            size=\"extra-small\"\n                            onDelete={() => {\n                                deleteHandler(index);\n                            }}\n                            dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n                            deleteButtonAriaLabel={deleteButtonAriaLabel ?? deleteButtonAriaTrl}\n                            disabled={disabled}\n                            data={chip.data}\n                            deleteOnly\n                        >\n                            {chip.label ?? chip.value}\n                        </ChipLayoutComponent>\n                    </div>\n                );\n            })}\n        </>\n    );\n};\n\nexport { ChipsList };\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,0BAAA,GAA6B,CAAC,EAAE,IAAM,EAAA,CAAA,EAAG,GAAG,KAAA,EAC9C,qBAAA,GAAA,CAAC,UAAY,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAQ3B,MAAM,YAAY,CAAK;AAAA,EACnB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AACJ,CAAuC,KAAA;AACnC,EAAM,MAAA,mBAAA,GAAsB,cAAe,CAAA,cAAA,EAAgB,QAAQ,CAAA,CAAA;AACnE,EAAA,MAAM,sBAAsB,mBAAuB,IAAA,0BAAA,CAAA;AAEnD,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IAClB,CAAC,KAAkB,KAAA;AACf,MAAA,MAAM,KAAQ,GAAA,CAAC,GAAG,KAAA,CAAM,KAAK,CAAA,CAAA;AAC7B,MAAA,MAAM,CAAC,WAAW,CAAA,GAAI,KAAM,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA,CAAA;AAC3C,MAAS,QAAA,CAAA;AAAA,QACL,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,KAAA;AAAA,QACA,OAAO,EAAE,IAAA,EAAM,UAAU,QAAU,EAAA,OAAA,EAAS,SAAS,WAAY,EAAA;AAAA,OACpE,CAAA,CAAA;AAAA,KACL;AAAA,IACA,CAAC,QAAA,EAAU,KAAM,CAAA,KAAA,EAAO,MAAM,KAAK,CAAA;AAAA,GACvC,CAAA;AAEA,EAAA,uCAES,QAAM,EAAA,KAAA,CAAA,KAAA,CAAM,GAAI,CAAA,CAAC,MAAM,KAAU,KAAA;AAC9B,IACI,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEG,WAAW,MAAO,CAAA,iBAAA;AAAA,QAClB,WAAa,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,cAAe,EAAA;AAAA,QAE7C,QAAA,kBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACG,OAAQ,EAAA,QAAA;AAAA,YACR,IAAK,EAAA,aAAA;AAAA,YACL,UAAU,MAAM;AACZ,cAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,aACvB;AAAA,YACA,aAAA,EAAe,CAAsB,mBAAA,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,YAC/C,uBAAuB,qBAAyB,IAAA,mBAAA;AAAA,YAChD,QAAA;AAAA,YACA,MAAM,IAAK,CAAA,IAAA;AAAA,YACX,UAAU,EAAA,IAAA;AAAA,YAET,QAAA,EAAA,IAAA,CAAK,SAAS,IAAK,CAAA,KAAA;AAAA,WAAA;AAAA,SACxB;AAAA,OAAA;AAAA,MAjBK,CAAG,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAAA,KAkB/B,CAAA;AAAA,GAEP,CACL,EAAA,CAAA,CAAA;AAER;;;;"}

package/ChipsList.js

@@ -3,5 +3,5 @@ import 'react/jsx-runtime';
 import 'react';
 import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-chips';
-export { C as ChipsList } from './ChipsList-Cm_F1BsO.js';
+export { C as ChipsList } from './ChipsList-DJz68o5T.js';
 //# sourceMappingURL=ChipsList.js.map

package/ChipsTrigger.js

@@ -8,7 +8,7 @@ import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import './ChipsList-Cm_F1BsO.js';
+import './ChipsList-DJz68o5T.js';
 import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-chips';
 import '@hh.ru/magritte-ui-icon/icon';

package/DesktopChipsTrigger.js

@@ -4,7 +4,7 @@ import { useState, useRef, useId, useCallback, useEffect, isValidElement } from
 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 { s as styles, C as ChipsList } from './ChipsList-Cm_F1BsO.js';
+import { s as styles, C as ChipsList } from './ChipsList-DJz68o5T.js';
 import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
 import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
@@ -83,6 +83,7 @@ const DesktopChipsTrigger = ({
         if (state.value.length === 0) {
           return;
         }
+        event.preventDefault();
         onChange({
           value: "",
           chips: [...state.chips, { value: state.value, userInput: true }],

package/DesktopChipsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopChipsTrigger.js","sources":["src/DesktopChipsTrigger.tsx"],"sourcesContent":["import {\n    ForwardedRef,\n    InputHTMLAttributes,\n    KeyboardEventHandler,\n    ReactElement,\n    SyntheticEvent,\n    useCallback,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n    isValidElement,\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 { ChipsList } from '@hh.ru/magritte-ui-chips-trigger/ChipsList';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\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\ntype DesktopChipsTriggerProps<T> = ChipsTriggerProps<T> &\n    Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {\n        innerRef: ForwardedRef<HTMLInputElement>;\n    };\n\nconst DesktopChipsTrigger = <T,>({\n    size = 'large',\n    placeholder,\n    disabled,\n    expanded: externalExpanded,\n    toggleExpanded: toggleExternalExpanded,\n    state,\n    chipLayoutComponent,\n    invalid,\n    maxHeight,\n    wrapperRef,\n    rightIcon = true,\n    onChange,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onChangeInput: onChangeInputExternal,\n    allowArbitraryValues = true,\n    'data-qa': dataQa = 'chips-trigger',\n    deleteButtonAriaLabel,\n    'aria-expanded': ariaExpanded,\n    'aria-controls': ariaControls,\n    innerRef,\n}: DesktopChipsTriggerProps<T>): ReactElement => {\n    const [expanded, setExpanded] = useState(false);\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n    const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n        axis: disabled ? 'none' : 'vertical',\n    });\n\n    const chipsRootRef = useRef<HTMLDivElement>(null);\n    const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n    const chipsContainerRef = useRef<HTMLDivElement>(null);\n    const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputRefCallback = useMultipleRefs(inputRef, innerRef);\n    const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n    const labelId = useId();\n    const ariaLabeledBy = `chips-trigger-label-${labelId}`;\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 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, userInput: true }],\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 chips = [...state.chips];\n                const deletedChip = chips.pop();\n                onChange({\n                    value: state.value,\n                    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 ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` } : undefined;\n\n    const showIcon = rightIcon !== false;\n    const showCustomIcon = isValidElement(rightIcon);\n\n    return (\n        <div\n            ref={chipsRootRefCallback}\n            className={classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {\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 ? undefined : 0}\n            data-qa={dataQa}\n            aria-disabled={disabled}\n        >\n            <div\n                style={scrollableAreaStyle}\n                className={classnames(styles.scrollableAreaWrapper, {\n                    [styles.scrollableAreaWrapperWithIcon]: showIcon,\n                })}\n            >\n                <div className={styles.scrollableArea} ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}>\n                    <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\n                        <ChipsList\n                            state={state}\n                            onChange={onChange}\n                            chipLayoutComponent={chipLayoutComponent}\n                            disabled={disabled}\n                            deleteButtonAriaLabel={deleteButtonAriaLabel}\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                                aria-labelledby={showLabel ? ariaLabeledBy : undefined}\n                                role={'combobox'}\n                                aria-haspopup={'listbox'}\n                                aria-autocomplete={'list'}\n                                aria-expanded={ariaExpanded}\n                                aria-controls={ariaControls}\n                            />\n                            {showLabel && (\n                                <div className={styles.labelWrapper}>\n                                    <label className={styles.label} id={ariaLabeledBy}>\n                                        {placeholder}\n                                    </label>\n                                </div>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            {showIcon && (\n                <div\n                    className={classnames(styles.icon, {\n                        [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon,\n                    })}\n                    data-qa=\"chips-trigger-icon\"\n                >\n                    {showCustomIcon ? rightIcon : <ChevronDownOutlinedSize24 />}\n                </div>\n            )}\n            {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n        </div>\n    );\n};\n\nexport { DesktopChipsTrigger };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DesktopChipsTrigger.js","sources":["src/DesktopChipsTrigger.tsx"],"sourcesContent":["import {\n    ForwardedRef,\n    InputHTMLAttributes,\n    KeyboardEventHandler,\n    ReactElement,\n    SyntheticEvent,\n    useCallback,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n    isValidElement,\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 { ChipsList } from '@hh.ru/magritte-ui-chips-trigger/ChipsList';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\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\ntype DesktopChipsTriggerProps<T> = ChipsTriggerProps<T> &\n    Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {\n        innerRef: ForwardedRef<HTMLInputElement>;\n    };\n\nconst DesktopChipsTrigger = <T,>({\n    size = 'large',\n    placeholder,\n    disabled,\n    expanded: externalExpanded,\n    toggleExpanded: toggleExternalExpanded,\n    state,\n    chipLayoutComponent,\n    invalid,\n    maxHeight,\n    wrapperRef,\n    rightIcon = true,\n    onChange,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onChangeInput: onChangeInputExternal,\n    allowArbitraryValues = true,\n    'data-qa': dataQa = 'chips-trigger',\n    deleteButtonAriaLabel,\n    'aria-expanded': ariaExpanded,\n    'aria-controls': ariaControls,\n    innerRef,\n}: DesktopChipsTriggerProps<T>): ReactElement => {\n    const [expanded, setExpanded] = useState(false);\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n    const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n        axis: disabled ? 'none' : 'vertical',\n    });\n\n    const chipsRootRef = useRef<HTMLDivElement>(null);\n    const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n    const chipsContainerRef = useRef<HTMLDivElement>(null);\n    const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputRefCallback = useMultipleRefs(inputRef, innerRef);\n    const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n    const labelId = useId();\n    const ariaLabeledBy = `chips-trigger-label-${labelId}`;\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 keyDownHandler = useCallback<KeyboardEventHandler>(\n        (event) => {\n            // создаем новый чипс и затираем текстовый инпут\n            if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                if (state.value.length === 0) {\n                    return;\n                }\n                // Enter создаёт чипс, а не отправляет форму\n                event.preventDefault();\n                onChange({\n                    value: '',\n                    chips: [...state.chips, { value: state.value, userInput: true }],\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 chips = [...state.chips];\n                const deletedChip = chips.pop();\n                onChange({\n                    value: state.value,\n                    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 ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` } : undefined;\n\n    const showIcon = rightIcon !== false;\n    const showCustomIcon = isValidElement(rightIcon);\n\n    return (\n        <div\n            ref={chipsRootRefCallback}\n            className={classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {\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 ? undefined : 0}\n            data-qa={dataQa}\n            aria-disabled={disabled}\n        >\n            <div\n                style={scrollableAreaStyle}\n                className={classnames(styles.scrollableAreaWrapper, {\n                    [styles.scrollableAreaWrapperWithIcon]: showIcon,\n                })}\n            >\n                <div className={styles.scrollableArea} ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}>\n                    <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\n                        <ChipsList\n                            state={state}\n                            onChange={onChange}\n                            chipLayoutComponent={chipLayoutComponent}\n                            disabled={disabled}\n                            deleteButtonAriaLabel={deleteButtonAriaLabel}\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                                aria-labelledby={showLabel ? ariaLabeledBy : undefined}\n                                role={'combobox'}\n                                aria-haspopup={'listbox'}\n                                aria-autocomplete={'list'}\n                                aria-expanded={ariaExpanded}\n                                aria-controls={ariaControls}\n                            />\n                            {showLabel && (\n                                <div className={styles.labelWrapper}>\n                                    <label className={styles.label} id={ariaLabeledBy}>\n                                        {placeholder}\n                                    </label>\n                                </div>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            {showIcon && (\n                <div\n                    className={classnames(styles.icon, {\n                        [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon,\n                    })}\n                    data-qa=\"chips-trigger-icon\"\n                >\n                    {showCustomIcon ? rightIcon : <ChevronDownOutlinedSize24 />}\n                </div>\n            )}\n            {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n        </div>\n    );\n};\n\nexport { DesktopChipsTrigger };\n"],"names":[],"mappings":"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"}

package/MobileChipsTrigger.js

@@ -4,7 +4,7 @@ import { useRef } from 'react';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { CustomChip } from '@hh.ru/magritte-ui-chips';
-import { s as styles, C as ChipsList } from './ChipsList-Cm_F1BsO.js';
+import { s as styles, C as ChipsList } from './ChipsList-DJz68o5T.js';
 import { PlusOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
 
 const MobileChipsTrigger = ({

package/UncontrolledChipsTrigger.js

@@ -7,7 +7,7 @@ import './DesktopChipsTrigger.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import './ChipsList-Cm_F1BsO.js';
+import './ChipsList-DJz68o5T.js';
 import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-chips';
 import '@hh.ru/magritte-ui-icon/icon';

package/index.css

@@ -68,7 +68,7 @@
   --magritte-color-component-input-icon-state-chevron-hovered-v26-0-2:#8293a2;
   --magritte-color-component-input-icon-state-chevron-disabled-v26-0-2:#96aabb;
 }
-.magritte-root___-zVdz_4-7-1{
+.magritte-root___-zVdz_4-7-3{
   display:inline-flex;
   position:relative;
   width:100%;
@@ -84,139 +84,139 @@
   --magritte-ui-scrollbar-border-radius:12px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-root___-zVdz_4-7-1:not(.magritte-focused___0Uzyu_4-7-1):not(.magritte-invalid___tVzQV_4-7-1):not(.magritte-disabled___UeqcV_4-7-1):hover{
+  body.magritte-old-layout .magritte-root___-zVdz_4-7-3:not(.magritte-focused___0Uzyu_4-7-3):not(.magritte-invalid___tVzQV_4-7-3):not(.magritte-disabled___UeqcV_4-7-3):hover{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-root___-zVdz_4-7-1:not(.magritte-focused___0Uzyu_4-7-1):not(.magritte-invalid___tVzQV_4-7-1):not(.magritte-disabled___UeqcV_4-7-1):hover .magritte-label___j7Trt_4-7-1{
+  body.magritte-old-layout .magritte-root___-zVdz_4-7-3:not(.magritte-focused___0Uzyu_4-7-3):not(.magritte-invalid___tVzQV_4-7-3):not(.magritte-disabled___UeqcV_4-7-3):hover .magritte-label___j7Trt_4-7-3{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-root___-zVdz_4-7-1:not(.magritte-focused___0Uzyu_4-7-1):not(.magritte-invalid___tVzQV_4-7-1):not(.magritte-disabled___UeqcV_4-7-1):hover .magritte-field-input___04Cag_4-7-1{
+  body.magritte-old-layout .magritte-root___-zVdz_4-7-3:not(.magritte-focused___0Uzyu_4-7-3):not(.magritte-invalid___tVzQV_4-7-3):not(.magritte-disabled___UeqcV_4-7-3):hover .magritte-field-input___04Cag_4-7-3{
     color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-7-1:not(.magritte-focused___0Uzyu_4-7-1):not(.magritte-invalid___tVzQV_4-7-1):not(.magritte-disabled___UeqcV_4-7-1):hover{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-7-3:not(.magritte-focused___0Uzyu_4-7-3):not(.magritte-invalid___tVzQV_4-7-3):not(.magritte-disabled___UeqcV_4-7-3):hover{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-7-1:not(.magritte-focused___0Uzyu_4-7-1):not(.magritte-invalid___tVzQV_4-7-1):not(.magritte-disabled___UeqcV_4-7-1):hover .magritte-label___j7Trt_4-7-1{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-7-3:not(.magritte-focused___0Uzyu_4-7-3):not(.magritte-invalid___tVzQV_4-7-3):not(.magritte-disabled___UeqcV_4-7-3):hover .magritte-label___j7Trt_4-7-3{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-7-1:not(.magritte-focused___0Uzyu_4-7-1):not(.magritte-invalid___tVzQV_4-7-1):not(.magritte-disabled___UeqcV_4-7-1):hover .magritte-field-input___04Cag_4-7-1{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-7-3:not(.magritte-focused___0Uzyu_4-7-3):not(.magritte-invalid___tVzQV_4-7-3):not(.magritte-disabled___UeqcV_4-7-3):hover .magritte-field-input___04Cag_4-7-3{
     color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
   }
 }
-.magritte-root___-zVdz_4-7-1:not(.magritte-disabled___UeqcV_4-7-1){
+.magritte-root___-zVdz_4-7-3:not(.magritte-disabled___UeqcV_4-7-3){
   cursor:text;
 }
-.magritte-root___-zVdz_4-7-1.magritte-focused___0Uzyu_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-focused___0Uzyu_4-7-3{
   background-color:var(--magritte-color-component-input-background-state-field-focused-v26-0-2);
   box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v26-0-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-focused___0Uzyu_4-7-1 .magritte-label___j7Trt_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-focused___0Uzyu_4-7-3 .magritte-label___j7Trt_4-7-3{
   color:var(--magritte-color-component-input-text-state-placeholder-focused-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-focused___0Uzyu_4-7-1 .magritte-field-input___04Cag_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-focused___0Uzyu_4-7-3 .magritte-field-input___04Cag_4-7-3{
   color:var(--magritte-color-component-input-text-state-content-focused-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-invalid___tVzQV_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-invalid___tVzQV_4-7-3{
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-invalid___tVzQV_4-7-1 .magritte-label___j7Trt_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-invalid___tVzQV_4-7-3 .magritte-label___j7Trt_4-7-3{
   color:var(--magritte-color-component-input-text-state-placeholder-invalid-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-invalid___tVzQV_4-7-1 .magritte-field-input___04Cag_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-invalid___tVzQV_4-7-3 .magritte-field-input___04Cag_4-7-3{
   color:var(--magritte-color-component-input-text-state-content-invalid-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-disabled___UeqcV_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-disabled___UeqcV_4-7-3{
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v26-0-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v26-0-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v26-0-2);
   --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v26-0-2);
   --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-disabled___UeqcV_4-7-1 .magritte-label___j7Trt_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-disabled___UeqcV_4-7-3 .magritte-label___j7Trt_4-7-3{
   color:var(--magritte-color-component-input-text-state-placeholder-disabled-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-disabled___UeqcV_4-7-1 .magritte-field-input___04Cag_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-disabled___UeqcV_4-7-3 .magritte-field-input___04Cag_4-7-3{
   color:var(--magritte-color-component-input-text-state-content-disabled-v26-0-2);
 }
-.magritte-root___-zVdz_4-7-1.magritte-disabled___UeqcV_4-7-1 .magritte-scrollable-area___-xMF2_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-disabled___UeqcV_4-7-3 .magritte-scrollable-area___-xMF2_4-7-3{
   overflow:hidden;
 }
-.magritte-root___-zVdz_4-7-1.magritte-focus-visible___ifvAP_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-focus-visible___ifvAP_4-7-3{
   outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v26-0-2) solid 4px;
 }
-.magritte-root___-zVdz_4-7-1.magritte-focus-visible___ifvAP_4-7-1.magritte-invalid___tVzQV_4-7-1{
+.magritte-root___-zVdz_4-7-3.magritte-focus-visible___ifvAP_4-7-3.magritte-invalid___tVzQV_4-7-3{
   outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v26-0-2);
 }
-.magritte-large___JIrIy_4-7-1{
+.magritte-large___JIrIy_4-7-3{
   padding-left:12px;
   padding-top:12px;
   padding-bottom:12px;
   padding-right:2px;
 }
-.magritte-large___JIrIy_4-7-1 .magritte-field___rlEmn_4-7-1{
+.magritte-large___JIrIy_4-7-3 .magritte-field___rlEmn_4-7-3{
   margin-left:4px;
 }
-.magritte-large___JIrIy_4-7-1 .magritte-icon___fDMiz_4-7-1{
+.magritte-large___JIrIy_4-7-3 .magritte-icon___fDMiz_4-7-3{
   top:12px;
   right:16px;
 }
-.magritte-large___JIrIy_4-7-1 .magritte-scrollable-area-wrapper___hZNQd_4-7-1{
+.magritte-large___JIrIy_4-7-3 .magritte-scrollable-area-wrapper___hZNQd_4-7-3{
   padding-right:10px;
 }
-.magritte-large___JIrIy_4-7-1 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-1{
+.magritte-large___JIrIy_4-7-3 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-3{
   padding-right:calc(24px + 10px + 12px);
 }
-.magritte-medium___Xk-XB_4-7-1{
+.magritte-medium___Xk-XB_4-7-3{
   padding-left:8px;
   padding-top:8px;
   padding-bottom:8px;
   padding-right:2px;
 }
-.magritte-medium___Xk-XB_4-7-1 .magritte-field___rlEmn_4-7-1{
+.magritte-medium___Xk-XB_4-7-3 .magritte-field___rlEmn_4-7-3{
   margin-left:8px;
 }
-.magritte-medium___Xk-XB_4-7-1 .magritte-icon___fDMiz_4-7-1{
+.magritte-medium___Xk-XB_4-7-3 .magritte-icon___fDMiz_4-7-3{
   top:8px;
   right:12px;
 }
-.magritte-medium___Xk-XB_4-7-1 .magritte-scrollable-area-wrapper___hZNQd_4-7-1{
+.magritte-medium___Xk-XB_4-7-3 .magritte-scrollable-area-wrapper___hZNQd_4-7-3{
   padding-right:6px;
 }
-.magritte-medium___Xk-XB_4-7-1 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-1{
+.magritte-medium___Xk-XB_4-7-3 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-7-3{
   padding-right:calc(24px + 6px + 12px);
 }
-.magritte-scrollable-area-wrapper___hZNQd_4-7-1{
+.magritte-scrollable-area-wrapper___hZNQd_4-7-3{
   width:100%;
   position:relative;
   overflow:hidden;
 }
-.magritte-scrollable-area___-xMF2_4-7-1{
+.magritte-scrollable-area___-xMF2_4-7-3{
   height:100%;
   display:flex;
   align-items:flex-start;
   overflow-y:auto;
   scrollbar-width:none;
 }
-.magritte-scrollable-area___-xMF2_4-7-1::-webkit-scrollbar{
+.magritte-scrollable-area___-xMF2_4-7-3::-webkit-scrollbar{
   display:none;
 }
-.magritte-chips-and-input___qg-Ba_4-7-1{
+.magritte-chips-and-input___qg-Ba_4-7-3{
   display:flex;
   gap:8px;
   flex-wrap:wrap;
   align-items:center;
   width:100%;
 }
-.magritte-field___rlEmn_4-7-1{
+.magritte-field___rlEmn_4-7-3{
   display:flex;
   align-items:center;
   position:relative;
@@ -232,7 +232,7 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-field-input___04Cag_4-7-1{
+.magritte-field-input___04Cag_4-7-3{
   border:0;
   padding:0;
   background:none;
@@ -241,19 +241,19 @@
   z-index:1;
   color:var(--magritte-color-component-input-text-content-v26-0-2);
 }
-.magritte-label-wrapper___De7Bm_4-7-1{
+.magritte-label-wrapper___De7Bm_4-7-3{
   display:flex;
   align-items:center;
   position:absolute;
   height:100%;
   inset:0;
 }
-.magritte-label___j7Trt_4-7-1{
+.magritte-label___j7Trt_4-7-3{
   color:var(--magritte-color-component-input-text-placeholder-v26-0-2);
   overflow:hidden;
   text-overflow:ellipsis;
 }
-.magritte-icon___fDMiz_4-7-1{
+.magritte-icon___fDMiz_4-7-3{
   display:inline-flex;
   margin-left:auto;
   padding:4px 0;
@@ -262,21 +262,21 @@
   transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v26-0-2);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v26-0-2);
 }
-.magritte-icon_expanded___RaOT-_4-7-1{
+.magritte-icon_expanded___RaOT-_4-7-3{
   transform:rotate(-180deg);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v26-0-2);
 }
-.magritte-custom-chip-wrapper___a9kJ6_4-7-1{
+.magritte-custom-chip-wrapper___a9kJ6_4-7-3{
   display:inline-flex;
   min-width:0;
 }
-.magritte-mobile-root___-hey4_4-7-1{
+.magritte-mobile-root___-hey4_4-7-3{
   display:flex;
   flex-direction:column;
   align-items:flex-start;
   gap:12px;
 }
-.magritte-mobile-chips___cuB21_4-7-1{
+.magritte-mobile-chips___cuB21_4-7-3{
   display:flex;
   flex-wrap:wrap;
   gap:8px;

package/index.js

@@ -8,7 +8,7 @@ import './DesktopChipsTrigger.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import './ChipsList-Cm_F1BsO.js';
+import './ChipsList-DJz68o5T.js';
 import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-chips';
 import '@hh.ru/magritte-ui-icon/icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-chips-trigger",
-  "version": "4.7.1",
+  "version": "4.7.3",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -29,15 +29,15 @@
   "dependencies": {
     "@hh.ru/magritte-common-keyboard": "4.3.7",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.13",
-    "@hh.ru/magritte-common-use-translation": "3.8.0",
+    "@hh.ru/magritte-common-use-translation": "3.9.0",
     "@hh.ru/magritte-design-tokens": "26.0.2",
     "@hh.ru/magritte-ui-breakpoint": "6.1.3",
-    "@hh.ru/magritte-ui-chips": "7.1.1",
+    "@hh.ru/magritte-ui-chips": "7.1.2",
     "@hh.ru/magritte-ui-form-helper": "2.1.27",
     "@hh.ru/magritte-ui-icon": "15.2.0",
-    "@hh.ru/magritte-ui-input": "9.5.0",
+    "@hh.ru/magritte-ui-input": "9.5.1",
     "@hh.ru/magritte-ui-mock-component": "1.1.9",
     "@hh.ru/magritte-ui-scrollbar": "1.1.0"
   },
-  "gitHead": "c4a95a3ae0a370fb14e16f79e2294b053bfcf67e"
+  "gitHead": "ad19ed51701dafb78eb62deec0a4cf7448b0ff47"
 }