@hh.ru/magritte-ui-chips-trigger 4.4.2 → 4.5.1

package/ChipsTrigger.d.ts

@@ -1,3 +1,8 @@
-import { InputHTMLAttributes } from 'react';
+import { LegacyRef, InputHTMLAttributes, ReactElement } from 'react';
 import { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';
-export declare const ChipsTrigger: import("react").ForwardRefExoticComponent<ChipsTriggerProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps> & import("react").RefAttributes<HTMLInputElement>>;
+declare const ChipsTrigger: (<T>(props: ChipsTriggerProps<T> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {
+    ref?: LegacyRef<HTMLInputElement>;
+}) => ReactElement | null) & {
+    displayName: string;
+};
+export { ChipsTrigger };

package/ChipsTrigger.js

@@ -12,7 +12,7 @@ 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';
 
-var styles = {"root":"magritte-root___-zVdz_4-4-2","focused":"magritte-focused___0Uzyu_4-4-2","invalid":"magritte-invalid___tVzQV_4-4-2","disabled":"magritte-disabled___UeqcV_4-4-2","label":"magritte-label___j7Trt_4-4-2","field-input":"magritte-field-input___04Cag_4-4-2","fieldInput":"magritte-field-input___04Cag_4-4-2","scrollable-area":"magritte-scrollable-area___-xMF2_4-4-2","scrollableArea":"magritte-scrollable-area___-xMF2_4-4-2","focus-visible":"magritte-focus-visible___ifvAP_4-4-2","focusVisible":"magritte-focus-visible___ifvAP_4-4-2","large":"magritte-large___JIrIy_4-4-2","field":"magritte-field___rlEmn_4-4-2","icon":"magritte-icon___fDMiz_4-4-2","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-4-2","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-4-2","scrollable-area-wrapper_with-icon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-2","scrollableAreaWrapperWithIcon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-2","medium":"magritte-medium___Xk-XB_4-4-2","chips-and-input":"magritte-chips-and-input___qg-Ba_4-4-2","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-4-2","label-wrapper":"magritte-label-wrapper___De7Bm_4-4-2","labelWrapper":"magritte-label-wrapper___De7Bm_4-4-2","icon_expanded":"magritte-icon_expanded___RaOT-_4-4-2","iconExpanded":"magritte-icon_expanded___RaOT-_4-4-2","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-4-2","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-4-2"};
+var styles = {"root":"magritte-root___-zVdz_4-5-1","focused":"magritte-focused___0Uzyu_4-5-1","invalid":"magritte-invalid___tVzQV_4-5-1","disabled":"magritte-disabled___UeqcV_4-5-1","label":"magritte-label___j7Trt_4-5-1","field-input":"magritte-field-input___04Cag_4-5-1","fieldInput":"magritte-field-input___04Cag_4-5-1","scrollable-area":"magritte-scrollable-area___-xMF2_4-5-1","scrollableArea":"magritte-scrollable-area___-xMF2_4-5-1","focus-visible":"magritte-focus-visible___ifvAP_4-5-1","focusVisible":"magritte-focus-visible___ifvAP_4-5-1","large":"magritte-large___JIrIy_4-5-1","field":"magritte-field___rlEmn_4-5-1","icon":"magritte-icon___fDMiz_4-5-1","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-5-1","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-5-1","scrollable-area-wrapper_with-icon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-1","scrollableAreaWrapperWithIcon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-1","medium":"magritte-medium___Xk-XB_4-5-1","chips-and-input":"magritte-chips-and-input___qg-Ba_4-5-1","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-5-1","label-wrapper":"magritte-label-wrapper___De7Bm_4-5-1","labelWrapper":"magritte-label-wrapper___De7Bm_4-5-1","icon_expanded":"magritte-icon_expanded___RaOT-_4-5-1","iconExpanded":"magritte-icon_expanded___RaOT-_4-5-1","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-5-1","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-5-1"};
 
 const focusOnLastChip = (event, chipsContainer, input) => {
     if (!chipsContainer || !input) {
@@ -24,7 +24,8 @@ const focusOnLastChip = (event, chipsContainer, input) => {
         nextFocusableElement.focus();
     }
 };
-const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expanded: externalExpanded, toggleExpanded: toggleExternalExpanded, state, rightIcon = true, invalid, maxHeight, description, errorMessage, wrapperRef, onChange, onFocus, onBlur, onKeyDown, onChangeInput: onChangeInputExternal, allowArbitraryValues = true, 'data-qa': dataQa = 'chips-trigger', deleteButtonAriaLabel: _deleteButtonAriaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }, ref) => {
+const ChipLayoutComponentDefault = ({ data: _, ...props }) => (jsx(CustomChip, { ...props }));
+const ChipsTriggerComponent = ({ size = 'large', placeholder, disabled, expanded: externalExpanded, toggleExpanded: toggleExternalExpanded, state, chipLayoutComponent, invalid, maxHeight, description, errorMessage, wrapperRef, rightIcon = true, onChange, onFocus, onBlur, onKeyDown, onChangeInput: onChangeInputExternal, allowArbitraryValues = true, 'data-qa': dataQa = 'chips-trigger', deleteButtonAriaLabel: _deleteButtonAriaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }, ref) => {
     const { isMobile } = useBreakpoint();
     const [expanded, setExpanded] = useState(false);
     const [isFocusVisible, setFocusVisible] = useState(false);
@@ -42,7 +43,6 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
     const labelId = useId();
     const ariaLabeledBy = `chips-trigger-label-${labelId}`;
     const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');
-    const deleteButtonAriaLabel = _deleteButtonAriaLabel ?? deleteButtonAriaTrl;
     const onChangeInput = useCallback((value) => {
         onChange({
             value,
@@ -58,11 +58,12 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
         }
     }, [isFocused]);
     const deleteHandler = useCallback((index) => {
-        const deletedChip = state.chips.splice(index, 1);
+        const chips = [...state.chips];
+        const [deletedChip] = chips.splice(index, 1);
         onChange({
             value: state.value,
-            chips: [...state.chips],
-            event: { type: 'remove', modifier: 'cross', element: deletedChip?.[0] },
+            chips,
+            event: { type: 'remove', modifier: 'cross', element: deletedChip },
         });
     }, [onChange, state.chips, state.value]);
     const keyDownHandler = useCallback((event) => {
@@ -83,10 +84,11 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
             if (state.chips.length === 0) {
                 return;
             }
-            const deletedChip = state.chips.pop();
+            const chips = [...state.chips];
+            const deletedChip = chips.pop();
             onChange({
                 value: state.value,
-                chips: [...state.chips],
+                chips,
                 event: { type: 'remove', modifier: 'backspace', element: deletedChip },
             });
         }
@@ -97,9 +99,8 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
     }, [allowArbitraryValues, onChange, onChangeInputExternal, state]);
     // при выставлении высоты учитваем падинги
     // иначе высота будет больше значения свойства
-    const scrollableAreaStyle = maxHeight
-        ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` }
-        : undefined;
+    const scrollableAreaStyle = maxHeight ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` } : undefined;
+    const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;
     const showIcon = rightIcon !== false;
     const showCustomIcon = isValidElement(rightIcon);
     return (jsxs("div", { children: [jsxs("div", { ref: chipsRootRefCallback, className: classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {
@@ -142,13 +143,14 @@ const ChipsTrigger = forwardRef(({ size = 'large', placeholder, disabled, expand
                 }, tabIndex: disabled ? undefined : 0, "data-qa": dataQa, "aria-disabled": disabled, children: [jsx("div", { style: scrollableAreaStyle, className: classnames(styles.scrollableAreaWrapper, {
                             [styles.scrollableAreaWrapperWithIcon]: showIcon,
                         }), children: jsx("div", { className: styles.scrollableArea, ref: scrollbar.scrollContainerRef, children: jsxs("div", { ref: chipsContainerRefCallback, className: styles.chipsAndInput, children: [state.chips.map((chip, index) => {
-                                        return (jsx("div", { className: styles.customChipWrapper, onMouseDown: (event) => event.preventDefault(), children: jsx(CustomChip, { Element: "button", size: "extra-small", disabled: disabled, onDelete: () => {
+                                        return (jsx("div", { className: styles.customChipWrapper, onMouseDown: (event) => event.preventDefault(), children: jsx(ChipLayoutComponent, { Element: "button", size: "extra-small", onDelete: () => {
                                                     deleteHandler(index);
-                                                }, dataQaWrapper: `chips-trigger-chip-${chip.value}`, deleteOnly: true, deleteButtonAriaLabel: deleteButtonAriaLabel, children: chip.label ?? chip.value }) }, `${chip.value}-${index}`));
+                                                }, dataQaWrapper: `chips-trigger-chip-${chip.value}`, deleteButtonAriaLabel: _deleteButtonAriaLabel ?? deleteButtonAriaTrl, disabled: disabled, data: chip.data, deleteOnly: true, children: chip.label ?? chip.value }) }, `${chip.value}-${index}`));
                                     }), 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, "aria-labelledby": showLabel ? ariaLabeledBy : undefined, role: 'combobox', "aria-haspopup": 'listbox', "aria-autocomplete": 'list', "aria-expanded": ariaExpanded, "aria-controls": ariaControls }), showLabel && (jsx("div", { className: styles.labelWrapper, children: jsx("label", { className: styles.label, id: ariaLabeledBy, children: placeholder }) }))] })] }) }) }), showIcon && (jsx("div", { className: classnames(styles.icon, {
                             [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon,
                         }), "data-qa": "chips-trigger-icon", children: showCustomIcon ? rightIcon : jsx(ChevronDownOutlinedSize24, {}) })), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
-});
+};
+const ChipsTrigger = forwardRef(ChipsTriggerComponent);
 ChipsTrigger.displayName = 'ChipsTrigger';
 
 export { ChipsTrigger };

package/ChipsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsTrigger.js","sources":["src/ChipsTrigger.tsx"],"sourcesContent":["import {\n    InputHTMLAttributes,\n    KeyboardEventHandler,\n    SyntheticEvent,\n    forwardRef,\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 { useTranslation } from '@hh.ru/magritte-common-use-translation';\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';\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\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            rightIcon = true,\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            deleteButtonAriaLabel: _deleteButtonAriaLabel,\n            'aria-expanded': ariaExpanded,\n            'aria-controls': ariaControls,\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 { 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, ref);\n        const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n        const labelId = useId();\n        const ariaLabeledBy = `chips-trigger-label-${labelId}`;\n        const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\n        const deleteButtonAriaLabel = _deleteButtonAriaLabel ?? deleteButtonAriaTrl;\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            [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, 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 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        const showIcon = rightIcon !== false;\n        const showCustomIcon = isValidElement(rightIcon);\n\n        return (\n            <div>\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\n                            className={styles.scrollableArea}\n                            ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}\n                        >\n                            <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\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                                            <CustomChip\n                                                Element=\"button\"\n                                                size=\"extra-small\"\n                                                disabled={disabled}\n                                                onDelete={() => {\n                                                    deleteHandler(index);\n                                                }}\n                                                dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n                                                deleteOnly\n                                                deleteButtonAriaLabel={deleteButtonAriaLabel}\n                                            >\n                                                {chip.label ?? chip.value}\n                                            </CustomChip>\n                                        </div>\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                                        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                <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    ForwardedRef,\n    LegacyRef,\n    InputHTMLAttributes,\n    KeyboardEventHandler,\n    ReactElement,\n    SyntheticEvent,\n    forwardRef,\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 { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipCustomLayoutProps, 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';\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\nconst ChipLayoutComponentDefault = ({ data: _, ...props }: ChipCustomLayoutProps): ReactElement => (\n    <CustomChip {...props} />\n);\n\ntype State = {\n    hadFocusWhenClicked: boolean;\n    wasExpandedWhenClicked: boolean;\n};\n\nconst ChipsTriggerComponent = <T,>(\n    {\n        size = 'large',\n        placeholder,\n        disabled,\n        expanded: externalExpanded,\n        toggleExpanded: toggleExternalExpanded,\n        state,\n        chipLayoutComponent,\n        invalid,\n        maxHeight,\n        description,\n        errorMessage,\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: _deleteButtonAriaLabel,\n        'aria-expanded': ariaExpanded,\n        'aria-controls': ariaControls,\n    }: ChipsTriggerProps<T> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>>,\n    ref: ForwardedRef<HTMLInputElement>\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 { 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, ref);\n    const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n    const labelId = useId();\n    const ariaLabeledBy = `chips-trigger-label-${labelId}`;\n    const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\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 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    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    const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;\n\n    const showIcon = rightIcon !== false;\n    const showCustomIcon = isValidElement(rightIcon);\n\n    return (\n        <div>\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\n                        className={styles.scrollableArea}\n                        ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}\n                    >\n                        <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\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                            <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                                    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            <FormHelper description={description} errorMessage={errorMessage} disabled={disabled} invalid={invalid} />\n        </div>\n    );\n};\n\nconst ChipsTrigger = forwardRef(ChipsTriggerComponent) as (<T>(\n    props: ChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {\n            ref?: LegacyRef<HTMLInputElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nChipsTrigger.displayName = 'ChipsTrigger';\n\nexport { ChipsTrigger };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/UncontrolledChipsTrigger.d.ts

@@ -1,2 +1,8 @@
-import { InputHTMLAttributes } from 'react';
-export declare const UncontrolledChipsTrigger: import("react").ForwardRefExoticComponent<Partial<import("@hh.ru/magritte-ui-chips-trigger/types").ChipsTriggerProps> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof import("@hh.ru/magritte-ui-chips-trigger/types").ChipsTriggerProps> & import("react").RefAttributes<HTMLInputElement>>;
+import { LegacyRef, ReactElement, InputHTMLAttributes } from 'react';
+import { UncontrolledChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';
+declare const UncontrolledChipsTrigger: (<T>(props: UncontrolledChipsTriggerProps<T> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps<T>> & {
+    ref?: LegacyRef<HTMLInputElement>;
+}) => ReactElement | null) & {
+    displayName: string;
+};
+export { UncontrolledChipsTrigger };

package/UncontrolledChipsTrigger.js

@@ -17,13 +17,14 @@ const DEFAULT_STATE = {
     value: '',
     chips: [],
 };
-const UncontrolledChipsTrigger = forwardRef(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {
+const UncontrolledChipsTriggerComponent = ({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {
     const [state, setState] = useState({ ...defaultState });
     return (jsxs(Fragment, { children: [jsx(ChipsTrigger, { ...restProps, state: state, onChange: (newState) => {
                     setState(newState);
                     onChange?.(newState);
                 }, ref: ref }), state.chips.map((chip) => (jsx("input", { type: "hidden", name: name, value: chip.value }, chip.value)))] }));
-});
+};
+const UncontrolledChipsTrigger = forwardRef(UncontrolledChipsTriggerComponent);
 UncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';
 
 export { UncontrolledChipsTrigger };

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 { ForwardedRef, LegacyRef, ReactElement, 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\nconst UncontrolledChipsTriggerComponent = <T,>(\n    {\n        state: defaultState = DEFAULT_STATE,\n        onChange,\n        name,\n        ...restProps\n    }: UncontrolledChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps<T>>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const [state, setState] = useState<ChipsTriggerState<T>>({ ...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\nconst UncontrolledChipsTrigger = forwardRef(UncontrolledChipsTriggerComponent) as (<T>(\n    props: UncontrolledChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps<T>> & {\n            ref?: LegacyRef<HTMLInputElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nUncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';\n\nexport { UncontrolledChipsTrigger };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;AAKA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEF,MAAM,iCAAiC,GAAG,CACtC,EACI,KAAK,EAAE,YAAY,GAAG,aAAa,EACnC,QAAQ,EACR,IAAI,EACJ,GAAG,SAAS,EAEuE,EACvF,GAAmC,KACnC;AACA,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAuB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AAC9E,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,CAAC;AAEF,MAAM,wBAAwB,GAAG,UAAU,CAAC,iCAAiC,EAKzB;AAEpD,wBAAwB,CAAC,WAAW,GAAG,0BAA0B;;;;"}

package/index.css

@@ -1,74 +1,74 @@
 :root{
-  --magritte-color-component-input-stroke-state-field-hovered-v25-1-0:#CCD5DF;
-  --magritte-color-component-input-stroke-state-field-focused-v25-1-0:#0070ff;
-  --magritte-color-component-input-stroke-state-accent-focused-accessible-v25-1-0:#0070ff7a;
-  --magritte-color-component-input-stroke-state-field-invalid-v25-1-0:#ff4d3a;
-  --magritte-color-component-input-stroke-state-negative-focused-accessible-v25-1-0:#ff4d3a7a;
-  --magritte-color-component-input-stroke-state-field-disabled-v25-1-0:#EEF1F7;
-  --magritte-color-component-input-background-field-v25-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-hovered-v25-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-focused-v25-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-invalid-v25-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-disabled-v25-1-0:#F4F6FB;
-  --magritte-color-component-input-stroke-field-v25-1-0:#DCE3EB;
-  --magritte-color-component-input-text-state-content-disabled-v25-1-0:#AABBCA;
-  --magritte-color-component-input-text-state-placeholder-disabled-v25-1-0:#AABBCA;
-  --magritte-color-component-input-text-state-content-hovered-v25-1-0:#000000;
-  --magritte-color-component-input-text-state-content-focused-v25-1-0:#000000;
-  --magritte-color-component-input-text-state-content-invalid-v25-1-0:#000000;
-  --magritte-color-component-input-text-state-placeholder-hovered-v25-1-0:#768694;
-  --magritte-color-component-input-text-state-placeholder-focused-v25-1-0:#AABBCA;
-  --magritte-color-component-input-text-state-placeholder-invalid-v25-1-0:#AABBCA;
-  --magritte-color-component-input-icon-chevron-v25-1-0:#AABBCA;
-  --magritte-color-component-input-icon-state-chevron-focused-v25-1-0:#000000;
-  --magritte-color-component-input-icon-state-chevron-hovered-v25-1-0:#6a7885;
-  --magritte-color-component-input-icon-state-chevron-disabled-v25-1-0:#AABBCA;
-  --magritte-color-component-input-icon-state-chevron-invalid-v25-1-0:#AABBCA;
-  --magritte-color-component-input-text-content-v25-1-0:#000000;
-  --magritte-color-component-input-text-placeholder-v25-1-0:#AABBCA;
-  --magritte-color-component-input-chips-background-state-neutral-disable-v25-1-0:#DCE3EB;
-  --magritte-color-component-input-chips-text-state-neutral-disable-v25-1-0:#96aabb;
+  --magritte-color-component-input-stroke-state-field-hovered-v25-1-1:#CCD5DF;
+  --magritte-color-component-input-stroke-state-field-focused-v25-1-1:#0070ff;
+  --magritte-color-component-input-stroke-state-accent-focused-accessible-v25-1-1:#0070ff7a;
+  --magritte-color-component-input-stroke-state-field-invalid-v25-1-1:#ff4d3a;
+  --magritte-color-component-input-stroke-state-negative-focused-accessible-v25-1-1:#ff4d3a7a;
+  --magritte-color-component-input-stroke-state-field-disabled-v25-1-1:#EEF1F7;
+  --magritte-color-component-input-background-field-v25-1-1:#ffffff;
+  --magritte-color-component-input-background-state-field-hovered-v25-1-1:#ffffff;
+  --magritte-color-component-input-background-state-field-focused-v25-1-1:#ffffff;
+  --magritte-color-component-input-background-state-field-invalid-v25-1-1:#ffffff;
+  --magritte-color-component-input-background-state-field-disabled-v25-1-1:#F4F6FB;
+  --magritte-color-component-input-stroke-field-v25-1-1:#DCE3EB;
+  --magritte-color-component-input-text-state-content-disabled-v25-1-1:#AABBCA;
+  --magritte-color-component-input-text-state-placeholder-disabled-v25-1-1:#AABBCA;
+  --magritte-color-component-input-text-state-content-hovered-v25-1-1:#000000;
+  --magritte-color-component-input-text-state-content-focused-v25-1-1:#000000;
+  --magritte-color-component-input-text-state-content-invalid-v25-1-1:#000000;
+  --magritte-color-component-input-text-state-placeholder-hovered-v25-1-1:#768694;
+  --magritte-color-component-input-text-state-placeholder-focused-v25-1-1:#AABBCA;
+  --magritte-color-component-input-text-state-placeholder-invalid-v25-1-1:#AABBCA;
+  --magritte-color-component-input-icon-chevron-v25-1-1:#AABBCA;
+  --magritte-color-component-input-icon-state-chevron-focused-v25-1-1:#000000;
+  --magritte-color-component-input-icon-state-chevron-hovered-v25-1-1:#6a7885;
+  --magritte-color-component-input-icon-state-chevron-disabled-v25-1-1:#AABBCA;
+  --magritte-color-component-input-icon-state-chevron-invalid-v25-1-1:#AABBCA;
+  --magritte-color-component-input-text-content-v25-1-1:#000000;
+  --magritte-color-component-input-text-placeholder-v25-1-1:#AABBCA;
+  --magritte-color-component-input-chips-background-state-neutral-disable-v25-1-1:#DCE3EB;
+  --magritte-color-component-input-chips-text-state-neutral-disable-v25-1-1:#96aabb;
 }
 
 :root{
-  --magritte-semantic-animation-ease-in-out-100-timing-function-v25-1-0:cubic-bezier(0.25, 0.1, 0.25, 1);
-  --magritte-semantic-animation-ease-in-out-100-duration-v25-1-0:100ms;
+  --magritte-semantic-animation-ease-in-out-100-timing-function-v25-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-100-duration-v25-1-1:100ms;
 }
 
 .magritte-night-theme{
-  --magritte-color-component-input-stroke-state-field-hovered-v25-1-0:#3B3B3B;
-  --magritte-color-component-input-stroke-state-field-disabled-v25-1-0:#1B1B1B;
-  --magritte-color-component-input-background-field-v25-1-0:#111;
-  --magritte-color-component-input-background-state-field-hovered-v25-1-0:#111;
-  --magritte-color-component-input-background-state-field-focused-v25-1-0:#111;
-  --magritte-color-component-input-background-state-field-invalid-v25-1-0:#111;
-  --magritte-color-component-input-background-state-field-disabled-v25-1-0:#111;
-  --magritte-color-component-input-stroke-field-v25-1-0:#303030;
-  --magritte-color-component-input-text-content-v25-1-0:#ffffff;
-  --magritte-color-component-input-text-placeholder-v25-1-0:#535353;
-  --magritte-color-component-input-text-state-content-disabled-v25-1-0:#474747;
-  --magritte-color-component-input-text-state-placeholder-disabled-v25-1-0:#474747;
-  --magritte-color-component-input-text-state-content-hovered-v25-1-0:#ffffff;
-  --magritte-color-component-input-text-state-content-focused-v25-1-0:#ffffff;
-  --magritte-color-component-input-text-state-content-invalid-v25-1-0:#ffffff;
-  --magritte-color-component-input-text-state-placeholder-hovered-v25-1-0:#5E5E5E;
-  --magritte-color-component-input-text-state-placeholder-focused-v25-1-0:#535353;
-  --magritte-color-component-input-text-state-placeholder-invalid-v25-1-0:#535353;
-  --magritte-color-component-input-icon-state-chevron-disabled-v25-1-0:#474747;
-  --magritte-color-component-input-icon-state-chevron-hovered-v25-1-0:#848484;
-  --magritte-color-component-input-icon-state-chevron-focused-v25-1-0:#ffffff;
-  --magritte-color-component-input-icon-state-chevron-invalid-v25-1-0:#474747;
-  --magritte-color-component-input-icon-chevron-v25-1-0:#5E5E5E;
-  --magritte-color-component-input-chips-background-state-neutral-disable-v25-1-0:#1B1B1B;
-  --magritte-color-component-input-chips-text-state-neutral-disable-v25-1-0:#474747;
+  --magritte-color-component-input-stroke-state-field-hovered-v25-1-1:#3B3B3B;
+  --magritte-color-component-input-stroke-state-field-disabled-v25-1-1:#1B1B1B;
+  --magritte-color-component-input-background-field-v25-1-1:#111;
+  --magritte-color-component-input-background-state-field-hovered-v25-1-1:#111;
+  --magritte-color-component-input-background-state-field-focused-v25-1-1:#111;
+  --magritte-color-component-input-background-state-field-invalid-v25-1-1:#111;
+  --magritte-color-component-input-background-state-field-disabled-v25-1-1:#111;
+  --magritte-color-component-input-stroke-field-v25-1-1:#303030;
+  --magritte-color-component-input-text-content-v25-1-1:#ffffff;
+  --magritte-color-component-input-text-placeholder-v25-1-1:#535353;
+  --magritte-color-component-input-text-state-content-disabled-v25-1-1:#474747;
+  --magritte-color-component-input-text-state-placeholder-disabled-v25-1-1:#474747;
+  --magritte-color-component-input-text-state-content-hovered-v25-1-1:#ffffff;
+  --magritte-color-component-input-text-state-content-focused-v25-1-1:#ffffff;
+  --magritte-color-component-input-text-state-content-invalid-v25-1-1:#ffffff;
+  --magritte-color-component-input-text-state-placeholder-hovered-v25-1-1:#5E5E5E;
+  --magritte-color-component-input-text-state-placeholder-focused-v25-1-1:#535353;
+  --magritte-color-component-input-text-state-placeholder-invalid-v25-1-1:#535353;
+  --magritte-color-component-input-icon-state-chevron-disabled-v25-1-1:#474747;
+  --magritte-color-component-input-icon-state-chevron-hovered-v25-1-1:#848484;
+  --magritte-color-component-input-icon-state-chevron-focused-v25-1-1:#ffffff;
+  --magritte-color-component-input-icon-state-chevron-invalid-v25-1-1:#474747;
+  --magritte-color-component-input-icon-chevron-v25-1-1:#5E5E5E;
+  --magritte-color-component-input-chips-background-state-neutral-disable-v25-1-1:#1B1B1B;
+  --magritte-color-component-input-chips-text-state-neutral-disable-v25-1-1:#474747;
 }
 
 .magritte-zp-day-theme{
-  --magritte-color-component-input-stroke-state-field-focused-v25-1-0:#7195AF;
-  --magritte-color-component-input-icon-state-chevron-hovered-v25-1-0:#8293a2;
-  --magritte-color-component-input-icon-state-chevron-disabled-v25-1-0:#96aabb;
+  --magritte-color-component-input-stroke-state-field-focused-v25-1-1:#7195AF;
+  --magritte-color-component-input-icon-state-chevron-hovered-v25-1-1:#8293a2;
+  --magritte-color-component-input-icon-state-chevron-disabled-v25-1-1:#96aabb;
 }
-.magritte-root___-zVdz_4-4-2{
+.magritte-root___-zVdz_4-5-1{
   display:inline-flex;
   position:relative;
   width:100%;
@@ -77,146 +77,146 @@
   white-space:nowrap;
   appearance:none;
   overflow-y:auto;
-  background-color:var(--magritte-color-component-input-background-field-v25-1-0);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v25-1-0);
+  background-color:var(--magritte-color-component-input-background-field-v25-1-1);
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v25-1-1);
   border-radius:12px;
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v25-1-0);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-chevron-v25-1-1);
   --magritte-ui-scrollbar-border-radius:12px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-root___-zVdz_4-4-2:not(.magritte-focused___0Uzyu_4-4-2):not(.magritte-invalid___tVzQV_4-4-2):not(.magritte-disabled___UeqcV_4-4-2):hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-1-0);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-1-0);
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-1-0);
+  body.magritte-old-layout .magritte-root___-zVdz_4-5-1:not(.magritte-focused___0Uzyu_4-5-1):not(.magritte-invalid___tVzQV_4-5-1):not(.magritte-disabled___UeqcV_4-5-1):hover{
+    background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-1-1);
+    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-1-1);
+    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-1-1);
   }
-  body.magritte-old-layout .magritte-root___-zVdz_4-4-2:not(.magritte-focused___0Uzyu_4-4-2):not(.magritte-invalid___tVzQV_4-4-2):not(.magritte-disabled___UeqcV_4-4-2):hover .magritte-label___j7Trt_4-4-2{
-    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-1-0);
+  body.magritte-old-layout .magritte-root___-zVdz_4-5-1:not(.magritte-focused___0Uzyu_4-5-1):not(.magritte-invalid___tVzQV_4-5-1):not(.magritte-disabled___UeqcV_4-5-1):hover .magritte-label___j7Trt_4-5-1{
+    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-1-1);
   }
-  body.magritte-old-layout .magritte-root___-zVdz_4-4-2:not(.magritte-focused___0Uzyu_4-4-2):not(.magritte-invalid___tVzQV_4-4-2):not(.magritte-disabled___UeqcV_4-4-2):hover .magritte-field-input___04Cag_4-4-2{
-    color:var(--magritte-color-component-input-text-state-content-hovered-v25-1-0);
+  body.magritte-old-layout .magritte-root___-zVdz_4-5-1:not(.magritte-focused___0Uzyu_4-5-1):not(.magritte-invalid___tVzQV_4-5-1):not(.magritte-disabled___UeqcV_4-5-1):hover .magritte-field-input___04Cag_4-5-1{
+    color:var(--magritte-color-component-input-text-state-content-hovered-v25-1-1);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-4-2:not(.magritte-focused___0Uzyu_4-4-2):not(.magritte-invalid___tVzQV_4-4-2):not(.magritte-disabled___UeqcV_4-4-2):hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-1-0);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-1-0);
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-1-0);
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-5-1:not(.magritte-focused___0Uzyu_4-5-1):not(.magritte-invalid___tVzQV_4-5-1):not(.magritte-disabled___UeqcV_4-5-1):hover{
+    background-color:var(--magritte-color-component-input-background-state-field-hovered-v25-1-1);
+    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v25-1-1);
+    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v25-1-1);
   }
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-4-2:not(.magritte-focused___0Uzyu_4-4-2):not(.magritte-invalid___tVzQV_4-4-2):not(.magritte-disabled___UeqcV_4-4-2):hover .magritte-label___j7Trt_4-4-2{
-    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-1-0);
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-5-1:not(.magritte-focused___0Uzyu_4-5-1):not(.magritte-invalid___tVzQV_4-5-1):not(.magritte-disabled___UeqcV_4-5-1):hover .magritte-label___j7Trt_4-5-1{
+    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v25-1-1);
   }
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-4-2:not(.magritte-focused___0Uzyu_4-4-2):not(.magritte-invalid___tVzQV_4-4-2):not(.magritte-disabled___UeqcV_4-4-2):hover .magritte-field-input___04Cag_4-4-2{
-    color:var(--magritte-color-component-input-text-state-content-hovered-v25-1-0);
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-5-1:not(.magritte-focused___0Uzyu_4-5-1):not(.magritte-invalid___tVzQV_4-5-1):not(.magritte-disabled___UeqcV_4-5-1):hover .magritte-field-input___04Cag_4-5-1{
+    color:var(--magritte-color-component-input-text-state-content-hovered-v25-1-1);
   }
 }
-.magritte-root___-zVdz_4-4-2:not(.magritte-disabled___UeqcV_4-4-2){
+.magritte-root___-zVdz_4-5-1:not(.magritte-disabled___UeqcV_4-5-1){
   cursor:text;
 }
-.magritte-root___-zVdz_4-4-2.magritte-focused___0Uzyu_4-4-2{
-  background-color:var(--magritte-color-component-input-background-state-field-focused-v25-1-0);
-  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v25-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-focused___0Uzyu_4-5-1{
+  background-color:var(--magritte-color-component-input-background-state-field-focused-v25-1-1);
+  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v25-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-focused___0Uzyu_4-4-2 .magritte-label___j7Trt_4-4-2{
-  color:var(--magritte-color-component-input-text-state-placeholder-focused-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-focused___0Uzyu_4-5-1 .magritte-label___j7Trt_4-5-1{
+  color:var(--magritte-color-component-input-text-state-placeholder-focused-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-focused___0Uzyu_4-4-2 .magritte-field-input___04Cag_4-4-2{
-  color:var(--magritte-color-component-input-text-state-content-focused-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-focused___0Uzyu_4-5-1 .magritte-field-input___04Cag_4-5-1{
+  color:var(--magritte-color-component-input-text-state-content-focused-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-invalid___tVzQV_4-4-2{
-  background-color:var(--magritte-color-component-input-background-state-field-invalid-v25-1-0);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v25-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-invalid___tVzQV_4-5-1{
+  background-color:var(--magritte-color-component-input-background-state-field-invalid-v25-1-1);
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v25-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-invalid___tVzQV_4-4-2 .magritte-label___j7Trt_4-4-2{
-  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-invalid___tVzQV_4-5-1 .magritte-label___j7Trt_4-5-1{
+  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-invalid___tVzQV_4-4-2 .magritte-field-input___04Cag_4-4-2{
-  color:var(--magritte-color-component-input-text-state-content-invalid-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-invalid___tVzQV_4-5-1 .magritte-field-input___04Cag_4-5-1{
+  color:var(--magritte-color-component-input-text-state-content-invalid-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-disabled___UeqcV_4-4-2{
-  background-color:var(--magritte-color-component-input-background-state-field-disabled-v25-1-0);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v25-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v25-1-0);
-  --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v25-1-0);
-  --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-disabled___UeqcV_4-5-1{
+  background-color:var(--magritte-color-component-input-background-state-field-disabled-v25-1-1);
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v25-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v25-1-1);
+  --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v25-1-1);
+  --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-disabled___UeqcV_4-4-2 .magritte-label___j7Trt_4-4-2{
-  color:var(--magritte-color-component-input-text-state-placeholder-disabled-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-disabled___UeqcV_4-5-1 .magritte-label___j7Trt_4-5-1{
+  color:var(--magritte-color-component-input-text-state-placeholder-disabled-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-disabled___UeqcV_4-4-2 .magritte-field-input___04Cag_4-4-2{
-  color:var(--magritte-color-component-input-text-state-content-disabled-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-disabled___UeqcV_4-5-1 .magritte-field-input___04Cag_4-5-1{
+  color:var(--magritte-color-component-input-text-state-content-disabled-v25-1-1);
 }
-.magritte-root___-zVdz_4-4-2.magritte-disabled___UeqcV_4-4-2 .magritte-scrollable-area___-xMF2_4-4-2{
+.magritte-root___-zVdz_4-5-1.magritte-disabled___UeqcV_4-5-1 .magritte-scrollable-area___-xMF2_4-5-1{
   overflow:hidden;
 }
-.magritte-root___-zVdz_4-4-2.magritte-focus-visible___ifvAP_4-4-2{
-  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v25-1-0) solid 4px;
+.magritte-root___-zVdz_4-5-1.magritte-focus-visible___ifvAP_4-5-1{
+  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v25-1-1) solid 4px;
 }
-.magritte-root___-zVdz_4-4-2.magritte-focus-visible___ifvAP_4-4-2.magritte-invalid___tVzQV_4-4-2{
-  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v25-1-0);
+.magritte-root___-zVdz_4-5-1.magritte-focus-visible___ifvAP_4-5-1.magritte-invalid___tVzQV_4-5-1{
+  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v25-1-1);
 }
-.magritte-large___JIrIy_4-4-2{
+.magritte-large___JIrIy_4-5-1{
   padding-left:12px;
   padding-top:12px;
   padding-bottom:12px;
   padding-right:2px;
 }
-.magritte-large___JIrIy_4-4-2 .magritte-field___rlEmn_4-4-2{
+.magritte-large___JIrIy_4-5-1 .magritte-field___rlEmn_4-5-1{
   margin-left:4px;
 }
-.magritte-large___JIrIy_4-4-2 .magritte-icon___fDMiz_4-4-2{
+.magritte-large___JIrIy_4-5-1 .magritte-icon___fDMiz_4-5-1{
   top:12px;
   right:16px;
 }
-.magritte-large___JIrIy_4-4-2 .magritte-scrollable-area-wrapper___hZNQd_4-4-2{
+.magritte-large___JIrIy_4-5-1 .magritte-scrollable-area-wrapper___hZNQd_4-5-1{
   padding-right:10px;
 }
-.magritte-large___JIrIy_4-4-2 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-2{
+.magritte-large___JIrIy_4-5-1 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-1{
   padding-right:calc(24px + 10px + 12px);
 }
-.magritte-medium___Xk-XB_4-4-2{
+.magritte-medium___Xk-XB_4-5-1{
   padding-left:8px;
   padding-top:8px;
   padding-bottom:8px;
   padding-right:2px;
 }
-.magritte-medium___Xk-XB_4-4-2 .magritte-field___rlEmn_4-4-2{
+.magritte-medium___Xk-XB_4-5-1 .magritte-field___rlEmn_4-5-1{
   margin-left:8px;
 }
-.magritte-medium___Xk-XB_4-4-2 .magritte-icon___fDMiz_4-4-2{
+.magritte-medium___Xk-XB_4-5-1 .magritte-icon___fDMiz_4-5-1{
   top:8px;
   right:12px;
 }
-.magritte-medium___Xk-XB_4-4-2 .magritte-scrollable-area-wrapper___hZNQd_4-4-2{
+.magritte-medium___Xk-XB_4-5-1 .magritte-scrollable-area-wrapper___hZNQd_4-5-1{
   padding-right:6px;
 }
-.magritte-medium___Xk-XB_4-4-2 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-4-2{
+.magritte-medium___Xk-XB_4-5-1 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-1{
   padding-right:calc(24px + 6px + 12px);
 }
-.magritte-scrollable-area-wrapper___hZNQd_4-4-2{
+.magritte-scrollable-area-wrapper___hZNQd_4-5-1{
   width:100%;
   position:relative;
   overflow:hidden;
 }
-.magritte-scrollable-area___-xMF2_4-4-2{
+.magritte-scrollable-area___-xMF2_4-5-1{
   height:100%;
   display:flex;
   align-items:flex-start;
   overflow-y:auto;
   scrollbar-width:none;
 }
-.magritte-scrollable-area___-xMF2_4-4-2::-webkit-scrollbar{
+.magritte-scrollable-area___-xMF2_4-5-1::-webkit-scrollbar{
   display:none;
 }
-.magritte-chips-and-input___qg-Ba_4-4-2{
+.magritte-chips-and-input___qg-Ba_4-5-1{
   display:flex;
   gap:8px;
   flex-wrap:wrap;
   align-items:center;
   width:100%;
 }
-.magritte-field___rlEmn_4-4-2{
+.magritte-field___rlEmn_4-5-1{
   display:flex;
   align-items:center;
   position:relative;
@@ -232,41 +232,41 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-field-input___04Cag_4-4-2{
+.magritte-field-input___04Cag_4-5-1{
   border:0;
   padding:0;
   background:none;
   outline:none;
   width:100%;
   z-index:1;
-  color:var(--magritte-color-component-input-text-content-v25-1-0);
+  color:var(--magritte-color-component-input-text-content-v25-1-1);
 }
-.magritte-label-wrapper___De7Bm_4-4-2{
+.magritte-label-wrapper___De7Bm_4-5-1{
   display:flex;
   align-items:center;
   position:absolute;
   height:100%;
   inset:0;
 }
-.magritte-label___j7Trt_4-4-2{
-  color:var(--magritte-color-component-input-text-placeholder-v25-1-0);
+.magritte-label___j7Trt_4-5-1{
+  color:var(--magritte-color-component-input-text-placeholder-v25-1-1);
   overflow:hidden;
   text-overflow:ellipsis;
 }
-.magritte-icon___fDMiz_4-4-2{
+.magritte-icon___fDMiz_4-5-1{
   display:inline-flex;
   margin-left:auto;
   padding:4px 0;
   position:absolute;
   transition-property:transform;
-  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v25-1-0);
-  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v25-1-0);
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v25-1-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v25-1-1);
 }
-.magritte-icon_expanded___RaOT-_4-4-2{
+.magritte-icon_expanded___RaOT-_4-5-1{
   transform:rotate(-180deg);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-1-0);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v25-1-1);
 }
-.magritte-custom-chip-wrapper___a9kJ6_4-4-2{
+.magritte-custom-chip-wrapper___a9kJ6_4-5-1{
   display:inline-flex;
   min-width:0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-chips-trigger",
-  "version": "4.4.2",
+  "version": "4.5.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -12,7 +12,7 @@
     "prepack": "yarn root:prepack $(pwd)",
     "postpublish": "yarn root:postpublish $(pwd)",
     "stylelint-check": "yarn root:stylelint-check $(pwd)",
-    "eslint-check": "yarn root:eslint-check $(pwd)",
+    "lint-check": "yarn root:lint-check $(pwd)",
     "ts-config": "yarn root:ts-config $(pwd)",
     "ts-check": "yarn root:ts-check $(pwd)",
     "test": "yarn root:test $(pwd)",
@@ -26,17 +26,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@hh.ru/magritte-common-keyboard": "4.3.5",
-    "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
-    "@hh.ru/magritte-common-use-translation": "3.6.0",
-    "@hh.ru/magritte-design-tokens": "25.1.0",
-    "@hh.ru/magritte-ui-breakpoint": "6.1.1",
-    "@hh.ru/magritte-ui-chips": "7.0.44",
-    "@hh.ru/magritte-ui-form-helper": "2.1.22",
-    "@hh.ru/magritte-ui-icon": "15.1.2",
-    "@hh.ru/magritte-ui-input": "9.4.49",
-    "@hh.ru/magritte-ui-mock-component": "1.1.7",
-    "@hh.ru/magritte-ui-scrollbar": "1.0.36"
+    "@hh.ru/magritte-common-keyboard": "4.3.6",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.12",
+    "@hh.ru/magritte-common-use-translation": "3.6.1",
+    "@hh.ru/magritte-design-tokens": "25.1.1",
+    "@hh.ru/magritte-ui-breakpoint": "6.1.2",
+    "@hh.ru/magritte-ui-chips": "7.0.45",
+    "@hh.ru/magritte-ui-form-helper": "2.1.23",
+    "@hh.ru/magritte-ui-icon": "15.1.3",
+    "@hh.ru/magritte-ui-input": "9.4.50",
+    "@hh.ru/magritte-ui-mock-component": "1.1.8",
+    "@hh.ru/magritte-ui-scrollbar": "1.0.37"
   },
-  "gitHead": "4420819c71c2d263ef47b3208c47942e9f0a1d30"
+  "gitHead": "46d606980abbb523a41afba452c0a852ee902864"
 }

package/types.d.ts

@@ -1,23 +1,31 @@
-import type { FocusEventHandler, ForwardedRef, ReactNode, KeyboardEventHandler, ReactElement } from 'react';
+import type { FocusEventHandler, ForwardedRef, ReactNode, KeyboardEventHandler, ReactElement, ComponentType } from 'react';
+import type { CustomChipProps } from '@hh.ru/magritte-ui-chips/types';
 export type ChipsTriggerSize = 'medium' | 'large';
 export type ChipsTriggerEventType = 'change' | 'remove' | 'add';
 export type ChipsTriggerEventModifier = 'keyboard' | 'cross' | 'enter' | 'backspace';
-interface Chip {
+interface TriggerChip<T = unknown> {
     value: string;
     label?: string;
     userInput?: boolean;
+    /** Данные элемента, из которого собран чипс */
+    data?: T;
 }
-interface ChipsTriggerEvent {
+interface ChipsTriggerEvent<T = unknown> {
     type: ChipsTriggerEventType;
     modifier: ChipsTriggerEventModifier;
-    element?: Chip;
+    element?: TriggerChip<T>;
 }
-export interface ChipsTriggerState {
+export interface ChipsTriggerState<T = unknown> {
     value: string;
-    chips: Chip[];
-    event?: ChipsTriggerEvent;
+    chips: TriggerChip<T>[];
+    event?: ChipsTriggerEvent<T>;
 }
-export interface ChipsTriggerProps {
+export type ChipCustomLayoutProps<T = unknown> = {
+    /** Данные элемента, из которого собран чипс */
+    data?: T;
+} & CustomChipProps;
+export type ChipCustomLayoutComponent<T = unknown> = ComponentType<ChipCustomLayoutProps<T>>;
+export interface ChipsTriggerProps<T = unknown> {
     /** Размер для chips-trigger */
     size?: ChipsTriggerSize;
     /** Текст плейсхолдера */
@@ -31,11 +39,11 @@ export interface ChipsTriggerProps {
     /** Признак невалидности */
     invalid?: boolean;
     /** Обработчик события изменения состояния компонента (chip+input) */
-    onChange: (state: ChipsTriggerState) => void;
+    onChange: (state: ChipsTriggerState<T>) => void;
     /** Обработчик события изменения состояния input */
     onChangeInput?: (value: string) => void;
     /** Значение инпута */
-    state: ChipsTriggerState;
+    state: ChipsTriggerState<T>;
     /**
      * Иконка справа
      * true - показать дефолтный шеврон
@@ -43,6 +51,8 @@ export interface ChipsTriggerProps {
      * ReactElement - своя иконка
      */
     rightIcon?: ReactElement | boolean;
+    /** Компонент для кастомной верстки чипса, по умолчанию чипс рисуется через CustomChip */
+    chipLayoutComponent?: ChipCustomLayoutComponent<T>;
     /** Обработчик события получения фокуса */
     onFocus?: FocusEventHandler<HTMLInputElement>;
     /** Обработчик события потери фокуса */
@@ -64,5 +74,5 @@ export interface ChipsTriggerProps {
     /** aria-label кнопки удаления */
     deleteButtonAriaLabel?: string;
 }
-export type UncontrolledChipsTriggerProps = Partial<ChipsTriggerProps>;
+export type UncontrolledChipsTriggerProps<T = unknown> = Partial<ChipsTriggerProps<T>>;
 export {};