@hh.ru/magritte-ui-chips-input 1.2.2 → 2.0.0

package/ChipsInput.d.ts

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

package/ChipsInput.js

@@ -1,121 +1,45 @@
-import './index.css';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
-import classnames from 'classnames';
-import { keyboardMatch, keyboardKeys, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
-import { CustomChip } from '@hh.ru/magritte-ui-chips';
-import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
-import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
-import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
+import { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger';
+import { Input } from '@hh.ru/magritte-ui-input';
+import { Suggest } from '@hh.ru/magritte-ui-suggest';
 
-var styles = {"root":"magritte-root___1YkGM_1-2-2","focused":"magritte-focused___dy9eY_1-2-2","invalid":"magritte-invalid___RJHLG_1-2-2","disabled":"magritte-disabled___hD00s_1-2-2","field":"magritte-field___IMwTW_1-2-2","focus-visible":"magritte-focus-visible___wdNv6_1-2-2","focusVisible":"magritte-focus-visible___wdNv6_1-2-2","large":"magritte-large___OjLba_1-2-2","icon":"magritte-icon___7eYOG_1-2-2","medium":"magritte-medium___SSyhM_1-2-2","scrollable-area":"magritte-scrollable-area___7XKlY_1-2-2","scrollableArea":"magritte-scrollable-area___7XKlY_1-2-2","chips-and-input":"magritte-chips-and-input___wx6To_1-2-2","chipsAndInput":"magritte-chips-and-input___wx6To_1-2-2","icon_expanded":"magritte-icon_expanded___PtihN_1-2-2","iconExpanded":"magritte-icon_expanded___PtihN_1-2-2"};
-
-const focusOnLastChip = (event, chipsContainer, input) => {
-    if (!chipsContainer || !input) {
-        return;
-    }
-    const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');
-    if (nextFocusableElement !== null) {
-        event.preventDefault();
-        nextFocusableElement.focus();
+const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerProps, suggestProps }, ref) => {
+    const chipsTriggerRef = useRef(null);
+    const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);
+    if (type === 'suggest') {
+        return (jsx(Suggest, { ...suggestProps, onChange: (value, isValueFromList) => {
+                if (!isValueFromList) {
+                    return;
+                }
+                if (!state.chips.some((chip) => chip.value === value)) {
+                    onChangeExternal({ value: '', chips: [...state.chips, { value }] });
+                }
+            }, onBottomSheetOpen: () => chipsTriggerRef.current?.blur(), input: {
+                component: Input,
+                props: {
+                    value: state.value,
+                },
+            }, onSearchSubmit: (event) => {
+                if (!triggerProps.allowArbitraryValues) {
+                    return;
+                }
+                const value = event.target.value;
+                if (value) {
+                    onChangeExternal({ value: '', chips: [...state.chips, { value }] });
+                }
+            }, renderTrigger: ({ props }) => {
+                const { onChange, wrapperRef, onFocus, onKeyDown } = props;
+                return (jsx(ChipsTrigger, { ...triggerProps, state: state, ref: chipsTriggerRefCallback, wrapperRef: wrapperRef, onKeyDown: onKeyDown, onFocus: onFocus, onChange: (newState) => {
+                        onChangeExternal(newState);
+                        onChange?.(newState.value);
+                    } }));
+            } }));
     }
+    return jsx("div", { children: "select" });
 };
-const ChipsInput = forwardRef(({ size = 'large', placeholder, disabled, state, invalid, maxHeight, description, errorMessage, wrapperRef, onChange, onFocus, onBlur, onKeyDown, onChangeInput: onChangeInputExternal, }, ref) => {
-    const [expanded, setExpanded] = useState(false);
-    const [isFocusVisible, setFocusVisible] = useState(false);
-    const chipsRootRef = useRef(null);
-    const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);
-    const chipsContainerRef = useRef(null);
-    const inputRef = useRef(null);
-    const inputRefCallback = useMultipleRefs(ref, inputRef);
-    const onChangeInput = useCallback((value) => {
-        onChange({
-            value,
-            chips: state.chips,
-            eventType: 'changeInputValue',
-        });
-        onChangeInputExternal?.(value);
-    }, [state.chips, onChange, onChangeInputExternal]);
-    const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);
-    useEffect(() => {
-        if (inputRef.current) {
-            setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));
-        }
-    }, [isFocused]);
-    const deleteHandler = useCallback((index) => {
-        state.chips.splice(index, 1);
-        onChange({
-            value: state.value,
-            chips: [...state.chips],
-            eventType: 'removeChipByCross',
-        });
-        // не теряем фокус с инпута
-        inputRef.current?.focus();
-    }, [onChange, state.chips, state.value]);
-    const keyDownHandler = useCallback((event) => {
-        // создаем новый чипс и затираем текстовый инпут
-        if (keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {
-            if (state.value.length === 0) {
-                return;
-            }
-            onChange({
-                value: '',
-                chips: [...state.chips, state.value],
-                eventType: 'addChipByEnter',
-            });
-            onChangeInputExternal?.('');
-        }
-        // удаляем последний созданный чипс
-        if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {
-            state.chips.pop();
-            onChange({
-                value: state.value,
-                chips: [...state.chips],
-                eventType: 'removeChipByBackspace',
-            });
-        }
-        // пытаемся найти ближайший чипс для фокуса
-        if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {
-            focusOnLastChip(event, chipsContainerRef.current, inputRef.current);
-        }
-    }, [onChange, onChangeInputExternal, state]);
-    // при выставлении высоты учитваем падинги
-    // иначе высота будет больше значения свойства
-    const scrollableAreaStyle = maxHeight
-        ? {
-            maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px`,
-        }
-        : undefined;
-    return (jsxs(Fragment, { children: [jsxs("div", { ref: chipsRootRefCallback, className: classnames(styles.root, styles[size], {
-                    [styles.focused]: isFocused,
-                    [styles.focusVisible]: isFocusVisible,
-                    [styles.disabled]: !!disabled,
-                    [styles.invalid]: !!invalid,
-                }), onFocus: () => {
-                    if (disabled) {
-                        return;
-                    }
-                    if (!inputRef.current) {
-                        return;
-                    }
-                    setExpanded(true);
-                    // добавляем .focus() еще и тут
-                    // чтобы не сбрасывать фокус во время клика по chip
-                    // или по клику на враппер
-                    if (document.activeElement === chipsRootRef.current) {
-                        inputRef.current.focus();
-                    }
-                }, onBlur: () => {
-                    setExpanded(false);
-                }, onKeyDown: onKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx("div", { style: scrollableAreaStyle, className: styles.scrollableArea, children: jsxs("div", { ref: chipsContainerRef, className: styles.chipsAndInput, children: [state.chips.map((chip, index) => {
-                                    return (jsx(CustomChip, { Element: "button", size: "small", disabled: disabled, onDelete: () => {
-                                            deleteHandler(index);
-                                        }, children: chip }, `${chip}-${index}`));
-                                }), jsx("input", { ref: inputRefCallback, className: styles.field, type: "text", disabled: disabled, value: state.value, placeholder: state.chips.length === 0 ? placeholder : '', onKeyDown: keyDownHandler, onFocus: focusHandler, onBlur: blurHandler, onChange: changeHandler })] }) }), jsx("div", { className: classnames(styles.icon, {
-                            [styles.iconExpanded]: expanded,
-                        }), children: jsx(ChevronDownOutlinedSize24, {}) })] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, disabled: disabled, invalid: invalid })] }));
-});
+const ChipsInput = forwardRef(ChipsInputComponent);
 ChipsInput.displayName = 'ChipsInput';
 
 export { ChipsInput };

package/ChipsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsInput.js","sources":["../src/ChipsInput.tsx"],"sourcesContent":["import {\n    forwardRef,\n    InputHTMLAttributes,\n    useState,\n    useCallback,\n    KeyboardEventHandler,\n    useRef,\n    SyntheticEvent,\n    useEffect,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\n\nimport styles from './chips-input.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\nexport const ChipsInput = forwardRef<\n    HTMLInputElement,\n    ChipsInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsInputProps>\n>(\n    (\n        {\n            size = 'large',\n            placeholder,\n            disabled,\n            state,\n            invalid,\n            maxHeight,\n            description,\n            errorMessage,\n            wrapperRef,\n            onChange,\n            onFocus,\n            onBlur,\n            onKeyDown,\n            onChangeInput: onChangeInputExternal,\n        },\n        ref\n    ) => {\n        const [expanded, setExpanded] = useState(false);\n        const [isFocusVisible, setFocusVisible] = useState(false);\n\n        const chipsRootRef = useRef<HTMLDivElement>(null);\n        const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n        const chipsContainerRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement>(null);\n        const inputRefCallback = useMultipleRefs(ref, inputRef);\n\n        const onChangeInput = useCallback(\n            (value: string) => {\n                onChange({\n                    value,\n                    chips: state.chips,\n                    eventType: 'changeInputValue',\n                });\n                onChangeInputExternal?.(value);\n            },\n            [state.chips, onChange, onChangeInputExternal]\n        );\n        const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n        useEffect(() => {\n            if (inputRef.current) {\n                setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n            }\n        }, [isFocused]);\n\n        const deleteHandler = useCallback(\n            (index: number) => {\n                state.chips.splice(index, 1);\n                onChange({\n                    value: state.value,\n                    chips: [...state.chips],\n                    eventType: 'removeChipByCross',\n                });\n                // не теряем фокус с инпута\n                inputRef.current?.focus();\n            },\n            [onChange, state.chips, state.value]\n        );\n\n        const keyDownHandler = useCallback<KeyboardEventHandler>(\n            (event) => {\n                // создаем новый чипс и затираем текстовый инпут\n                if (keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                    if (state.value.length === 0) {\n                        return;\n                    }\n                    onChange({\n                        value: '',\n                        chips: [...state.chips, state.value],\n                        eventType: 'addChipByEnter',\n                    });\n                    onChangeInputExternal?.('');\n                }\n                // удаляем последний созданный чипс\n                if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n                    state.chips.pop();\n                    onChange({\n                        value: state.value,\n                        chips: [...state.chips],\n                        eventType: 'removeChipByBackspace',\n                    });\n                }\n                // пытаемся найти ближайший чипс для фокуса\n                if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n                    focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n                }\n            },\n            [onChange, onChangeInputExternal, state]\n        );\n\n        // при выставлении высоты учитваем падинги\n        // иначе высота будет больше значения свойства\n        const scrollableAreaStyle = maxHeight\n            ? {\n                  maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px`,\n              }\n            : undefined;\n\n        return (\n            <>\n                <div\n                    ref={chipsRootRefCallback}\n                    className={classnames(styles.root, styles[size], {\n                        [styles.focused]: isFocused,\n                        [styles.focusVisible]: isFocusVisible,\n                        [styles.disabled]: !!disabled,\n                        [styles.invalid]: !!invalid,\n                    })}\n                    onFocus={() => {\n                        if (disabled) {\n                            return;\n                        }\n                        if (!inputRef.current) {\n                            return;\n                        }\n                        setExpanded(true);\n                        // добавляем .focus() еще и тут\n                        // чтобы не сбрасывать фокус во время клика по chip\n                        // или по клику на враппер\n                        if (document.activeElement === chipsRootRef.current) {\n                            inputRef.current.focus();\n                        }\n                    }}\n                    onBlur={() => {\n                        setExpanded(false);\n                    }}\n                    onKeyDown={onKeyDown}\n                    tabIndex={disabled ? -1 : 0}\n                >\n                    <div style={scrollableAreaStyle} className={styles.scrollableArea}>\n                        <div ref={chipsContainerRef} className={styles.chipsAndInput}>\n                            {state.chips.map((chip, index) => {\n                                return (\n                                    <CustomChip\n                                        Element=\"button\"\n                                        key={`${chip}-${index}`}\n                                        size=\"small\"\n                                        disabled={disabled}\n                                        onDelete={() => {\n                                            deleteHandler(index);\n                                        }}\n                                    >\n                                        {chip}\n                                    </CustomChip>\n                                );\n                            })}\n                            <input\n                                ref={inputRefCallback}\n                                className={styles.field}\n                                type=\"text\"\n                                disabled={disabled}\n                                value={state.value}\n                                placeholder={state.chips.length === 0 ? placeholder : ''}\n                                onKeyDown={keyDownHandler}\n                                onFocus={focusHandler}\n                                onBlur={blurHandler}\n                                onChange={changeHandler}\n                            />\n                        </div>\n                    </div>\n                    <div\n                        className={classnames(styles.icon, {\n                            [styles.iconExpanded]: expanded,\n                        })}\n                    >\n                        <ChevronDownOutlinedSize24 />\n                    </div>\n                </div>\n                <FormHelper\n                    description={description}\n                    errorMessage={errorMessage}\n                    disabled={disabled}\n                    invalid={invalid}\n                />\n            </>\n        );\n    }\n);\n\nChipsInput.displayName = 'ChipsInput';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"ChipsInput.js","sources":["../src/ChipsInput.tsx"],"sourcesContent":["import { forwardRef, useRef, ForwardedRef, ReactElement } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger';\nimport { Input } from '@hh.ru/magritte-ui-input';\nimport { Suggest } from '@hh.ru/magritte-ui-suggest';\n\nconst ChipsInputComponent = <DataType,>(\n    { type, state, onChange: onChangeExternal, triggerProps, suggestProps }: ChipsInputProps<DataType>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const chipsTriggerRef = useRef<HTMLInputElement>(null);\n    const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);\n\n    if (type === 'suggest') {\n        return (\n            <Suggest\n                {...suggestProps}\n                onChange={(value, isValueFromList) => {\n                    if (!isValueFromList) {\n                        return;\n                    }\n                    if (!state.chips.some((chip) => chip.value === value)) {\n                        onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n                    }\n                }}\n                onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n                input={{\n                    component: Input,\n                    props: {\n                        value: state.value,\n                    },\n                }}\n                onSearchSubmit={(event) => {\n                    if (!triggerProps.allowArbitraryValues) {\n                        return;\n                    }\n                    const value = (event.target as HTMLInputElement).value;\n                    if (value) {\n                        onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n                    }\n                }}\n                renderTrigger={({ props }) => {\n                    const { onChange, wrapperRef, onFocus, onKeyDown } = props;\n                    return (\n                        <ChipsTrigger\n                            {...triggerProps}\n                            state={state}\n                            ref={chipsTriggerRefCallback}\n                            wrapperRef={wrapperRef}\n                            onKeyDown={onKeyDown}\n                            onFocus={onFocus}\n                            onChange={(newState) => {\n                                onChangeExternal(newState);\n                                onChange?.(newState.value);\n                            }}\n                        />\n                    );\n                }}\n            />\n        );\n    }\n\n    return <div>select</div>;\n};\n\nconst ChipsInput = forwardRef(ChipsInputComponent) as (<DataType>(\n    props: ChipsInputProps<DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nChipsInput.displayName = 'ChipsInput';\n\nexport { ChipsInput };\n"],"names":["_jsx"],"mappings":";;;;;;;AAQA,MAAM,mBAAmB,GAAG,CACxB,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAA6B,EAClG,GAAmC,KACnC;AACA,IAAA,MAAM,eAAe,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACvD,MAAM,uBAAuB,GAAG,eAAe,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;IAEtE,IAAI,IAAI,KAAK,SAAS,EAAE;AACpB,QAAA,QACIA,GAAA,CAAC,OAAO,EAAA,EAAA,GACA,YAAY,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAI;gBACjC,IAAI,CAAC,eAAe,EAAE;oBAClB,OAAO;AACV,iBAAA;AACD,gBAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE;oBACnD,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AACvE,iBAAA;AACL,aAAC,EACD,iBAAiB,EAAE,MAAM,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE,EACxD,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,KAAK;AAChB,gBAAA,KAAK,EAAE;oBACH,KAAK,EAAE,KAAK,CAAC,KAAK;AACrB,iBAAA;AACJ,aAAA,EACD,cAAc,EAAE,CAAC,KAAK,KAAI;AACtB,gBAAA,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE;oBACpC,OAAO;AACV,iBAAA;AACD,gBAAA,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;AACvD,gBAAA,IAAI,KAAK,EAAE;oBACP,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AACvE,iBAAA;aACJ,EACD,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;gBACzB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;AAC3D,gBAAA,QACIA,GAAA,CAAC,YAAY,EAAA,EAAA,GACL,YAAY,EAChB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,uBAAuB,EAC5B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,QAAQ,KAAI;wBACnB,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAC3B,wBAAA,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;qBAC9B,EAAA,CACH,EACJ;aACL,EAAA,CACH,EACJ;AACL,KAAA;AAED,IAAA,OAAOA,kCAAiB,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,UAAU,CAAC,mBAAmB,EAEG;AAEpD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/index.d.ts

@@ -1,3 +1,2 @@
 export * from '@hh.ru/magritte-ui-chips-input/ChipsInput';
-export * from '@hh.ru/magritte-ui-chips-input/UncontrolledChipsInput';
 export * from '@hh.ru/magritte-ui-chips-input/types';

package/index.js

@@ -1,13 +1,8 @@
-import './index.css';
 export { ChipsInput } from './ChipsInput.js';
-export { UncontrolledChipsInput } from './UncontrolledChipsInput.js';
 import 'react/jsx-runtime';
 import 'react';
-import 'classnames';
-import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-ui-chips';
-import '@hh.ru/magritte-ui-form-helper';
-import '@hh.ru/magritte-ui-icon/icon';
-import '@hh.ru/magritte-ui-input/useFocus';
+import '@hh.ru/magritte-ui-chips-trigger';
+import '@hh.ru/magritte-ui-input';
+import '@hh.ru/magritte-ui-suggest';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-chips-input",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,20 +19,17 @@
     "test": "yarn root:test $(pwd)",
     "watch": "yarn root:watch $(pwd)"
   },
-  "peerDependencies": {
-    "classnames": ">=2.3.2",
-    "react": ">=18.2.0"
-  },
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  },
   "dependencies": {
-    "@hh.ru/magritte-common-keyboard": "4.0.2",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
-    "@hh.ru/magritte-ui-chips": "5.2.16",
-    "@hh.ru/magritte-ui-form-helper": "1.0.10",
-    "@hh.ru/magritte-ui-icon": "7.9.0",
-    "@hh.ru/magritte-ui-input": "6.0.15"
+    "@hh.ru/magritte-ui-chips-trigger": "2.0.5",
+    "@hh.ru/magritte-ui-input": "7.0.1",
+    "@hh.ru/magritte-ui-suggest": "6.2.2"
   },
-  "gitHead": "b3e0588e408e619e64868eff34e01e3d07260b2d"
+  "gitHead": "f16f39dabf580281a2a9c2a7038d27a037f9a5ef"
 }

package/types.d.ts

@@ -1,39 +1,13 @@
-import type { FocusEventHandler, ForwardedRef, ReactNode, KeyboardEventHandler } from 'react';
-export type ChipsInputSize = 'medium' | 'large';
-export type ChipsInputEventType = 'changeInputValue' | 'removeChipByCross' | 'addChipByEnter' | 'removeChipByBackspace';
-export interface ChipsInputState {
-    value: string;
-    chips: string[];
-    eventType?: ChipsInputEventType;
+import { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger';
+import { SuggestProps } from '@hh.ru/magritte-ui-suggest';
+type ChipsInputType = 'select' | 'suggest';
+type TriggerPropsHelper = Omit<ChipsTriggerProps, 'expanded' | 'toggleExpanded' | 'wrapperRef' | 'ref' | 'state' | 'onChange' | 'onKeyDown' | 'onFocus'>;
+type SuggestPropsHelper<DataType> = Omit<SuggestProps<DataType>, 'inputValue' | 'onChange' | 'renderTrigger' | 'onSearchSubmit' | 'onBottomSheetOpen' | 'input'>;
+export interface ChipsInputProps<DataType> {
+    type: ChipsInputType;
+    state: ChipsTriggerProps['state'];
+    onChange: ChipsTriggerProps['onChange'];
+    triggerProps: TriggerPropsHelper;
+    suggestProps: SuggestPropsHelper<DataType>;
 }
-export interface ChipsInputProps {
-    /** Размер для chips-input */
-    size?: ChipsInputSize;
-    /** Текст плейсхолдера */
-    placeholder?: string;
-    /** Флаг отключения инпута */
-    disabled?: boolean;
-    /** Признак невалидности */
-    invalid?: boolean;
-    /** Обработчик события изменения состояния компонента (chip+input) */
-    onChange: (state: ChipsInputState) => void;
-    /** Обработчик события изменения состояния input */
-    onChangeInput?: (value: string) => void;
-    /** Значение инпута */
-    state: ChipsInputState;
-    /** Обработчик события получения фокуса */
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    /** Обработчик события потери фокуса */
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    /** Обработчик события keydown */
-    onKeyDown?: KeyboardEventHandler<HTMLElement>;
-    /** Максимальная высота chips-input */
-    maxHeight?: number;
-    /** Текст подсказки под инпутом */
-    description?: ReactNode;
-    /** Текст сообщения об ошибке */
-    errorMessage?: ReactNode;
-    /** ref root контейнера */
-    wrapperRef?: ForwardedRef<HTMLElement>;
-}
-export type UncontrolledChipsInputProps = Partial<ChipsInputProps>;
+export {};

package/types.js

@@ -1,3 +1,2 @@
-import './index.css';
 
 //# sourceMappingURL=types.js.map

package/UncontrolledChipsInput.d.ts

@@ -1,2 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-export declare const UncontrolledChipsInput: import("react").ForwardRefExoticComponent<Partial<import("@hh.ru/magritte-ui-chips-input/types").ChipsInputProps> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof import("@hh.ru/magritte-ui-chips-input/types").ChipsInputProps> & import("react").RefAttributes<HTMLInputElement>>;

package/UncontrolledChipsInput.js

@@ -1,27 +0,0 @@
-import './index.css';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
-import { ChipsInput } from './ChipsInput.js';
-import 'classnames';
-import '@hh.ru/magritte-common-keyboard';
-import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-ui-chips';
-import '@hh.ru/magritte-ui-form-helper';
-import '@hh.ru/magritte-ui-icon/icon';
-import '@hh.ru/magritte-ui-input/useFocus';
-
-const DEFAULT_STATE = {
-    value: '',
-    chips: [],
-};
-const UncontrolledChipsInput = forwardRef(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {
-    const [state, setState] = useState({ ...defaultState });
-    return (jsxs(Fragment, { children: [jsx(ChipsInput, { ...restProps, state: state, onChange: (newState) => {
-                    setState(newState);
-                    onChange?.(newState);
-                }, ref: ref }), state.chips.map((value) => (jsx("input", { type: "hidden", name: name, value: value }, value)))] }));
-});
-UncontrolledChipsInput.displayName = 'UncontrolledChipsInput';
-
-export { UncontrolledChipsInput };
-//# sourceMappingURL=UncontrolledChipsInput.js.map

package/UncontrolledChipsInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UncontrolledChipsInput.js","sources":["../src/UncontrolledChipsInput.tsx"],"sourcesContent":["import { forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsInput } from '@hh.ru/magritte-ui-chips-input/ChipsInput';\nimport { UncontrolledChipsInputProps, ChipsInputState } from '@hh.ru/magritte-ui-chips-input/types';\n\nconst DEFAULT_STATE = {\n    value: '',\n    chips: [],\n};\n\nexport const UncontrolledChipsInput = forwardRef<\n    HTMLInputElement,\n    UncontrolledChipsInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsInputProps>\n>(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {\n    const [state, setState] = useState<ChipsInputState>({ ...defaultState });\n    return (\n        <>\n            <ChipsInput\n                {...restProps}\n                state={state}\n                onChange={(newState) => {\n                    setState(newState);\n                    onChange?.(newState);\n                }}\n                ref={ref}\n            />\n            {state.chips.map((value) => (\n                <input type=\"hidden\" name={name} value={value} key={value} />\n            ))}\n        </>\n    );\n});\n\nUncontrolledChipsInput.displayName = 'UncontrolledChipsInput';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;AAKA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEW,MAAA,sBAAsB,GAAG,UAAU,CAG9C,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,CAAkB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AACzE,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,UAAU,EAAA,EAAA,GACH,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,EAAA,CACV,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,MACnBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAO,KAAK,CAAI,CAChE,CAAC,CAAA,EAAA,CACH,EACL;AACN,CAAC,EAAE;AAEH,sBAAsB,CAAC,WAAW,GAAG,wBAAwB;;;;"}

package/index.css

@@ -1,207 +0,0 @@
-:root{
-  --magritte-color-component-input-stroke-state-field-hovered-v19-1-0:#CCD5DF;
-  --magritte-color-component-input-stroke-state-field-focused-v19-1-0:#0070ff;
-  --magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-0:#0070ff7a;
-  --magritte-color-component-input-stroke-state-field-invalid-v19-1-0:#ff4d3a;
-  --magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-0:#ff4d3a7a;
-  --magritte-color-component-input-stroke-state-field-disabled-v19-1-0:#EEF1F7;
-  --magritte-color-component-input-background-field-v19-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-hovered-v19-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-focused-v19-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-invalid-v19-1-0:#ffffff;
-  --magritte-color-component-input-background-state-field-disabled-v19-1-0:#F4F6FB;
-  --magritte-color-component-input-stroke-field-v19-1-0:#DCE3EB;
-  --magritte-color-component-input-text-state-placeholder-disabled-v19-1-0:#AABBCA;
-  --magritte-color-component-input-text-state-placeholder-hovered-v19-1-0:#768694;
-  --magritte-color-component-input-text-state-placeholder-focused-v19-1-0:#AABBCA;
-  --magritte-color-component-input-text-state-placeholder-invalid-v19-1-0:#AABBCA;
-  --magritte-color-component-input-icon-content-v19-1-0:#6a7885;
-  --magritte-color-component-input-icon-state-content-hovered-v19-1-0:#6a7885;
-  --magritte-color-component-input-icon-state-content-focused-v19-1-0:#000000;
-  --magritte-color-component-input-icon-state-content-invalid-v19-1-0:#6a7885;
-  --magritte-color-component-input-icon-state-content-disabled-v19-1-0:#AABBCA;
-  --magritte-color-component-input-icon-state-chevron-focused-v19-1-0:#000000;
-  --magritte-color-component-input-text-placeholder-v19-1-0:#AABBCA;
-  --magritte-color-component-input-chips-background-state-neutral-disable-v19-1-0:#DCE3EB;
-  --magritte-color-component-input-chips-text-state-neutral-disable-v19-1-0:#96aabb;
-}
-:root{
-  --magritte-typography-label-2-regular-font-family-v19-1-0:"Inter";
-  --magritte-typography-label-2-regular-font-weight-v19-1-0:400;
-  --magritte-typography-label-2-regular-line-height-v19-1-0:22px;
-  --magritte-typography-label-2-regular-font-size-v19-1-0:16px;
-  --magritte-typography-label-2-regular-letter-spacing-v19-1-0:0em;
-  --magritte-typography-label-2-regular-text-indent-v19-1-0:0px;
-  --magritte-typography-label-2-regular-text-transform-v19-1-0:none;
-  --magritte-typography-label-2-regular-text-decoration-v19-1-0:none;
-  --magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-0:cubic-bezier(0.25, 0.1, 0.25, 1);
-  --magritte-semantic-animation-ease-in-out-100-duration-v19-1-0:100ms;
-  --magritte-static-space-100-v19-1-0:4px;
-  --magritte-static-space-200-v19-1-0:8px;
-  --magritte-static-space-300-v19-1-0:12px;
-  --magritte-static-space-400-v19-1-0:16px;
-  --magritte-core-border-radius-3-x-v19-1-0:12px;
-}
-.magritte-night-theme{
-  --magritte-color-component-input-stroke-state-field-hovered-v19-1-0:#3B3B3B;
-  --magritte-color-component-input-stroke-state-field-focused-v19-1-0:#0070ff;
-  --magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-0:#0070ff7a;
-  --magritte-color-component-input-stroke-state-field-invalid-v19-1-0:#ff4d3a;
-  --magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-0:#ff4d3a7a;
-  --magritte-color-component-input-stroke-state-field-disabled-v19-1-0:#111;
-  --magritte-color-component-input-background-field-v19-1-0:#1B1B1B;
-  --magritte-color-component-input-background-state-field-hovered-v19-1-0:#1B1B1B;
-  --magritte-color-component-input-background-state-field-focused-v19-1-0:#1B1B1B;
-  --magritte-color-component-input-background-state-field-invalid-v19-1-0:#1B1B1B;
-  --magritte-color-component-input-background-state-field-disabled-v19-1-0:#111;
-  --magritte-color-component-input-stroke-field-v19-1-0:#303030;
-  --magritte-color-component-input-text-placeholder-v19-1-0:#535353;
-  --magritte-color-component-input-text-state-placeholder-disabled-v19-1-0:#474747;
-  --magritte-color-component-input-text-state-placeholder-hovered-v19-1-0:#5E5E5E;
-  --magritte-color-component-input-text-state-placeholder-focused-v19-1-0:#535353;
-  --magritte-color-component-input-text-state-placeholder-invalid-v19-1-0:#535353;
-  --magritte-color-component-input-icon-state-content-hovered-v19-1-0:#5E5E5E;
-  --magritte-color-component-input-icon-state-content-focused-v19-1-0:#ffffff;
-  --magritte-color-component-input-icon-state-content-invalid-v19-1-0:#767676;
-  --magritte-color-component-input-icon-state-content-disabled-v19-1-0:#474747;
-  --magritte-color-component-input-icon-state-chevron-focused-v19-1-0:#ffffff;
-  --magritte-color-component-input-icon-content-v19-1-0:#ABABAB;
-  --magritte-color-component-input-chips-background-state-neutral-disable-v19-1-0:#1B1B1B;
-  --magritte-color-component-input-chips-text-state-neutral-disable-v19-1-0:#474747;
-}
-.magritte-root___1YkGM_1-2-2{
-  display:inline-flex;
-  position:relative;
-  width:100%;
-  box-sizing:border-box;
-  user-select:none;
-  white-space:nowrap;
-  appearance:none;
-  overflow-y:auto;
-  background-color:var(--magritte-color-component-input-background-field-v19-1-0);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v19-1-0);
-  border-radius:var(--magritte-core-border-radius-3-x-v19-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v19-1-0);
-}
-@media (min-width: 1020px){
-  body.magritte-old-layout .magritte-root___1YkGM_1-2-2:not(.magritte-focused___dy9eY_1-2-2):not(.magritte-invalid___RJHLG_1-2-2):not(.magritte-disabled___hD00s_1-2-2):hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-0);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-0);
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v19-1-0);
-  }
-  body.magritte-old-layout .magritte-root___1YkGM_1-2-2:not(.magritte-focused___dy9eY_1-2-2):not(.magritte-invalid___RJHLG_1-2-2):not(.magritte-disabled___hD00s_1-2-2):hover .magritte-field___IMwTW_1-2-2::placeholder{
-    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-0);
-  }
-}
-@media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-root___1YkGM_1-2-2:not(.magritte-focused___dy9eY_1-2-2):not(.magritte-invalid___RJHLG_1-2-2):not(.magritte-disabled___hD00s_1-2-2):hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-1-0);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-1-0);
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v19-1-0);
-  }
-  body:not(.magritte-old-layout) .magritte-root___1YkGM_1-2-2:not(.magritte-focused___dy9eY_1-2-2):not(.magritte-invalid___RJHLG_1-2-2):not(.magritte-disabled___hD00s_1-2-2):hover .magritte-field___IMwTW_1-2-2::placeholder{
-    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-1-0);
-  }
-}
-.magritte-root___1YkGM_1-2-2:not(.magritte-disabled___hD00s_1-2-2){
-  cursor:text;
-}
-.magritte-root___1YkGM_1-2-2.magritte-focused___dy9eY_1-2-2{
-  background-color:var(--magritte-color-component-input-background-state-field-focused-v19-1-0);
-  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v19-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v19-1-0);
-}
-.magritte-root___1YkGM_1-2-2.magritte-focused___dy9eY_1-2-2 .magritte-field___IMwTW_1-2-2::placeholder{
-  color:var(--magritte-color-component-input-text-state-placeholder-focused-v19-1-0);
-}
-.magritte-root___1YkGM_1-2-2.magritte-invalid___RJHLG_1-2-2{
-  background-color:var(--magritte-color-component-input-background-state-field-invalid-v19-1-0);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v19-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v19-1-0);
-}
-.magritte-root___1YkGM_1-2-2.magritte-invalid___RJHLG_1-2-2 .magritte-field___IMwTW_1-2-2::placeholder{
-  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v19-1-0);
-}
-.magritte-root___1YkGM_1-2-2.magritte-disabled___hD00s_1-2-2{
-  background-color:var(--magritte-color-component-input-background-state-field-disabled-v19-1-0);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v19-1-0);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v19-1-0);
-  --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v19-1-0);
-  --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v19-1-0);
-}
-.magritte-root___1YkGM_1-2-2.magritte-disabled___hD00s_1-2-2 .magritte-field___IMwTW_1-2-2::placeholder{
-  color:var(--magritte-color-component-input-text-state-placeholder-disabled-v19-1-0);
-}
-.magritte-root___1YkGM_1-2-2.magritte-focus-visible___wdNv6_1-2-2{
-  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v19-1-0) solid 4px;
-}
-.magritte-root___1YkGM_1-2-2.magritte-focus-visible___wdNv6_1-2-2.magritte-invalid___RJHLG_1-2-2{
-  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v19-1-0);
-}
-.magritte-large___OjLba_1-2-2{
-  padding:var(--magritte-static-space-300-v19-1-0);
-}
-.magritte-large___OjLba_1-2-2 .magritte-field___IMwTW_1-2-2{
-  padding-left:var(--magritte-static-space-100-v19-1-0);
-}
-.magritte-large___OjLba_1-2-2 .magritte-icon___7eYOG_1-2-2{
-  top:var(--magritte-static-space-300-v19-1-0);
-  right:var(--magritte-static-space-400-v19-1-0);
-}
-.magritte-medium___SSyhM_1-2-2{
-  padding:var(--magritte-static-space-200-v19-1-0);
-}
-.magritte-medium___SSyhM_1-2-2 .magritte-field___IMwTW_1-2-2{
-  padding-left:var(--magritte-static-space-100-v19-1-0);
-}
-.magritte-medium___SSyhM_1-2-2 .magritte-icon___7eYOG_1-2-2{
-  top:var(--magritte-static-space-200-v19-1-0);
-  right:var(--magritte-static-space-300-v19-1-0);
-}
-.magritte-scrollable-area___7XKlY_1-2-2{
-  display:flex;
-  align-items:flex-start;
-  overflow-y:auto;
-  width:100%;
-  padding-right:24px;
-}
-.magritte-chips-and-input___wx6To_1-2-2{
-  display:flex;
-  gap:6px;
-  flex-wrap:wrap;
-  align-items:center;
-  width:100%;
-  margin-right:var(--magritte-static-space-300-v19-1-0);
-}
-.magritte-field___IMwTW_1-2-2{
-  border:0;
-  background:none;
-  flex-grow:1;
-  height:32px;
-  width:50px;
-  outline:none;
-  font-family:var(--magritte-typography-label-2-regular-font-family-v19-1-0);
-  font-weight:var(--magritte-typography-label-2-regular-font-weight-v19-1-0);
-  line-height:var(--magritte-typography-label-2-regular-line-height-v19-1-0);
-  font-size:var(--magritte-typography-label-2-regular-font-size-v19-1-0);
-  letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v19-1-0);
-  text-indent:var(--magritte-typography-label-2-regular-text-indent-v19-1-0);
-  text-transform:var(--magritte-typography-label-2-regular-text-transform-v19-1-0);
-  text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v19-1-0);
-}
-.magritte-field___IMwTW_1-2-2::placeholder{
-  color:var(--magritte-color-component-input-text-placeholder-v19-1-0);
-}
-.magritte-icon___7eYOG_1-2-2{
-  display:inline-flex;
-  margin-left:auto;
-  padding:var(--magritte-static-space-100-v19-1-0) 0;
-  position:absolute;
-  transition-property:transform;
-  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v19-1-0);
-  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v19-1-0);
-}
-.magritte-icon_expanded___PtihN_1-2-2{
-  transform:rotate(-180deg);
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-1-0);
-}