@hh.ru/magritte-ui-chips-input 2.1.2 → 2.3.0

package/ChipsInput.js

@@ -10,11 +10,27 @@ import { Suggest } from '@hh.ru/magritte-ui-suggest';
 const getSelectValuesAsArray = (values) => {
     return Array.isArray(values) ? values : [values].filter(Boolean);
 };
+const getInitialSelectValue = (type, chips, options, multiple) => {
+    if (type === 'suggest') {
+        return '';
+    }
+    // в случае multiple можно просто собрать value
+    if (multiple) {
+        return chips.map((chip) => chip.value);
+    }
+    // иначе нужно найти хотя бы один option, который подходит
+    const valuesFromOptions = options.map(({ value }) => value);
+    const suitableItem = chips.find((chip) => valuesFromOptions.includes(chip.value));
+    return suitableItem?.value || '';
+};
 const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerProps, suggestProps, selectProps, }, ref) => {
     const chipsTriggerRef = useRef(null);
     const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);
     const { allowArbitraryValues } = triggerProps;
-    const [selectState, setSelectState] = useState((selectProps?.multiple ? [] : ''));
+    const [selectState, setSelectState] = useState(() => {
+        const initialState = getInitialSelectValue(type, state.chips, selectProps?.options || [], selectProps?.multiple || false);
+        return initialState;
+    });
     if (type === 'suggest') {
         return (jsx(Suggest, { ...suggestProps, onChange: (value, isValueFromList) => {
                 if (!isValueFromList) {
@@ -27,18 +43,20 @@ const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerP
                 component: Input,
                 props: {
                     value: state.value,
+                    'data-qa': 'chips-input-suggest-search',
                 },
-            }, onSearchSubmit: (event) => {
-                if (!allowArbitraryValues) {
+            }, onSearchSubmit: (event, onCloseBottomSheet, optionsCount) => {
+                if (!allowArbitraryValues || optionsCount > 0) {
                     return;
                 }
                 const value = event.target.value;
                 if (value) {
                     onChangeExternal({ value: '', chips: [...state.chips, { value }] });
+                    onCloseBottomSheet();
                 }
             }, renderTrigger: ({ props }) => {
                 const { onChange, wrapperRef, onFocus, onKeyDown } = props;
-                return (jsx(ChipsTrigger, { ...triggerProps, state: state, ref: chipsTriggerRefCallback, wrapperRef: wrapperRef, onKeyDown: onKeyDown, onFocus: onFocus, onChange: (newState) => {
+                return (jsx(ChipsTrigger, { ...triggerProps, state: state, ref: chipsTriggerRefCallback, wrapperRef: wrapperRef, onKeyDown: onKeyDown, onFocus: onFocus, "data-qa": "chips-input-suggest-trigger", onChange: (newState) => {
                         onChangeExternal(newState);
                         onChange?.(newState.value);
                     } }));
@@ -49,6 +67,7 @@ const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerP
             const valuesArr = getSelectValuesAsArray(newValues);
             onChangeExternal({
                 value: '',
+                // из новый значений селекта собираем чипсы
                 chips: valuesArr.map((value) => {
                     const item = options.find((option) => option.value === value);
                     if (item) {
@@ -58,25 +77,27 @@ const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerP
                 }),
             });
             setSelectState(newValues);
-        }, onSearchSubmit: (event) => {
-            if (!allowArbitraryValues) {
+        }, onSearchSubmit: (event, onCloseBottomSheet, optionsCount) => {
+            if (!allowArbitraryValues || optionsCount > 0) {
                 return;
             }
             const value = event.target.value;
             if (value) {
                 onChangeExternal({ value: '', chips: [...state.chips, { value }] });
+                onCloseBottomSheet();
             }
         }, onBottomSheetOpen: () => chipsTriggerRef.current?.blur(), triggerProps: { size: 'large' }, renderTrigger: ({ ref, setSearchValue, onKeyDown, onBlur, onFocus }) => {
-            return (jsx(ChipsTrigger, { ...triggerProps, allowArbitraryValues: allowArbitraryValues, state: state, ref: chipsTriggerRefCallback, wrapperRef: ref, onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, onChange: (newState) => {
+            return (jsx(ChipsTrigger, { ...triggerProps, allowArbitraryValues: allowArbitraryValues, state: state, ref: chipsTriggerRefCallback, wrapperRef: ref, onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, "data-qa": "chips-input-select-trigger", onChange: (newState) => {
                     onChangeExternal(newState);
                     setSearchValue(newState.value);
                     if (!multiple) {
-                        const { eventType } = newState;
-                        if (eventType === 'removeChipByBackspace' || eventType === 'removeChipByCross') {
+                        const { event } = newState;
+                        if (event?.type === 'remove') {
                             setSelectState('');
                         }
                         return;
                     }
+                    // на основе чипсов собираем новый стейт селекта
                     setSelectState(newState.chips.map(({ value }) => value));
                 } }));
         } }));

package/ChipsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsInput.js","sources":["../src/ChipsInput.tsx"],"sourcesContent":["import { forwardRef, useRef, ForwardedRef, ReactElement, useState } 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 { Select } from '@hh.ru/magritte-ui-select';\nimport { Suggest } from '@hh.ru/magritte-ui-suggest';\n\ntype ValueType<MultipleType> = [MultipleType] extends [true] ? string[] : string;\n\n// сhips trigger работает только массивом\nconst getSelectValuesAsArray = (values: string[] | string): string[] => {\n    return Array.isArray(values) ? values : [values].filter(Boolean);\n};\n\nconst ChipsInputComponent = <MultipleType extends boolean, DataType>(\n    {\n        type,\n        state,\n        onChange: onChangeExternal,\n        triggerProps,\n        suggestProps,\n        selectProps,\n    }: ChipsInputProps<MultipleType, DataType>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const chipsTriggerRef = useRef<HTMLInputElement>(null);\n    const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);\n    const { allowArbitraryValues } = triggerProps;\n    const [selectState, setSelectState] = useState((selectProps?.multiple ? [] : '') as ValueType<MultipleType>);\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 (!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    const { multiple, options } = selectProps;\n    return (\n        <Select\n            {...selectProps}\n            searchable\n            multiple={multiple}\n            value={selectState}\n            onChange={(newValues) => {\n                const valuesArr = getSelectValuesAsArray(newValues);\n                onChangeExternal({\n                    value: '',\n                    chips: valuesArr.map((value) => {\n                        const item = options.find((option) => option.value === value);\n                        if (item) {\n                            return { value: item.value, label: item.label as string };\n                        }\n                        return { value };\n                    }),\n                });\n                setSelectState(newValues);\n            }}\n            onSearchSubmit={(event) => {\n                if (!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            onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n            triggerProps={{ size: 'large' }}\n            renderTrigger={({ ref, setSearchValue, onKeyDown, onBlur, onFocus }) => {\n                return (\n                    <ChipsTrigger\n                        {...triggerProps}\n                        allowArbitraryValues={allowArbitraryValues}\n                        state={state}\n                        ref={chipsTriggerRefCallback}\n                        wrapperRef={ref}\n                        onKeyDown={onKeyDown}\n                        onBlur={onBlur}\n                        onFocus={onFocus}\n                        onChange={(newState) => {\n                            onChangeExternal(newState);\n                            setSearchValue(newState.value);\n                            if (!multiple) {\n                                const { eventType } = newState;\n                                if (eventType === 'removeChipByBackspace' || eventType === 'removeChipByCross') {\n                                    setSelectState('' as ValueType<MultipleType>);\n                                }\n                                return;\n                            }\n                            setSelectState(newState.chips.map(({ value }) => value) as ValueType<MultipleType>);\n                        }}\n                    />\n                );\n            }}\n        />\n    );\n};\n\nconst ChipsInput = forwardRef(ChipsInputComponent) as (<MultipleType extends boolean, DataType>(\n    props: ChipsInputProps<MultipleType, DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nChipsInput.displayName = 'ChipsInput';\n\nexport { ChipsInput };\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ChipsInput.js","sources":["../src/ChipsInput.tsx"],"sourcesContent":["import { forwardRef, useRef, ForwardedRef, ReactElement, useState } 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 { Select, SelectProps } from '@hh.ru/magritte-ui-select';\nimport { Suggest } from '@hh.ru/magritte-ui-suggest';\n\ntype ValueType<MultipleType> = [MultipleType] extends [true] ? string[] : string;\n\n// сhips trigger работает только массивом\nconst getSelectValuesAsArray = (values: string[] | string): string[] => {\n    return Array.isArray(values) ? values : [values].filter(Boolean);\n};\n\nconst getInitialSelectValue = <MultipleType extends boolean, DataType>(\n    type: ChipsInputProps<MultipleType, DataType>['type'],\n    chips: ChipsInputProps<MultipleType, DataType>['state']['chips'],\n    options: SelectProps<MultipleType, DataType>['options'],\n    multiple: boolean\n) => {\n    if (type === 'suggest') {\n        return '';\n    }\n    // в случае multiple можно просто собрать value\n    if (multiple) {\n        return chips.map((chip) => chip.value);\n    }\n    // иначе нужно найти хотя бы один option, который подходит\n    const valuesFromOptions = options.map(({ value }) => value);\n    const suitableItem = chips.find((chip) => valuesFromOptions.includes(chip.value));\n    return suitableItem?.value || '';\n};\n\nconst ChipsInputComponent = <MultipleType extends boolean, DataType>(\n    {\n        type,\n        state,\n        onChange: onChangeExternal,\n        triggerProps,\n        suggestProps,\n        selectProps,\n    }: ChipsInputProps<MultipleType, DataType>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const chipsTriggerRef = useRef<HTMLInputElement>(null);\n    const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);\n    const { allowArbitraryValues } = triggerProps;\n    const [selectState, setSelectState] = useState(() => {\n        const initialState = getInitialSelectValue(\n            type,\n            state.chips,\n            selectProps?.options || [],\n            selectProps?.multiple || false\n        );\n        return initialState as ValueType<MultipleType>;\n    });\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                        'data-qa': 'chips-input-suggest-search',\n                    },\n                }}\n                onSearchSubmit={(event, onCloseBottomSheet, optionsCount) => {\n                    if (!allowArbitraryValues || optionsCount > 0) {\n                        return;\n                    }\n                    const value = (event.target as HTMLInputElement).value;\n                    if (value) {\n                        onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n                        onCloseBottomSheet();\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                            data-qa=\"chips-input-suggest-trigger\"\n                            onChange={(newState) => {\n                                onChangeExternal(newState);\n                                onChange?.(newState.value);\n                            }}\n                        />\n                    );\n                }}\n            />\n        );\n    }\n\n    const { multiple, options } = selectProps;\n    return (\n        <Select\n            {...selectProps}\n            searchable\n            multiple={multiple}\n            value={selectState}\n            onChange={(newValues) => {\n                const valuesArr = getSelectValuesAsArray(newValues);\n                onChangeExternal({\n                    value: '',\n                    // из новый значений селекта собираем чипсы\n                    chips: valuesArr.map((value) => {\n                        const item = options.find((option) => option.value === value);\n                        if (item) {\n                            return { value: item.value, label: item.label as string };\n                        }\n                        return { value };\n                    }),\n                });\n                setSelectState(newValues);\n            }}\n            onSearchSubmit={(event, onCloseBottomSheet, optionsCount) => {\n                if (!allowArbitraryValues || optionsCount > 0) {\n                    return;\n                }\n                const value = (event.target as HTMLInputElement).value;\n                if (value) {\n                    onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n                    onCloseBottomSheet();\n                }\n            }}\n            onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n            triggerProps={{ size: 'large' }}\n            renderTrigger={({ ref, setSearchValue, onKeyDown, onBlur, onFocus }) => {\n                return (\n                    <ChipsTrigger\n                        {...triggerProps}\n                        allowArbitraryValues={allowArbitraryValues}\n                        state={state}\n                        ref={chipsTriggerRefCallback}\n                        wrapperRef={ref}\n                        onKeyDown={onKeyDown}\n                        onBlur={onBlur}\n                        onFocus={onFocus}\n                        data-qa=\"chips-input-select-trigger\"\n                        onChange={(newState) => {\n                            onChangeExternal(newState);\n                            setSearchValue(newState.value);\n                            if (!multiple) {\n                                const { event } = newState;\n                                if (event?.type === 'remove') {\n                                    setSelectState('' as ValueType<MultipleType>);\n                                }\n                                return;\n                            }\n                            // на основе чипсов собираем новый стейт селекта\n                            setSelectState(newState.chips.map(({ value }) => value) as ValueType<MultipleType>);\n                        }}\n                    />\n                );\n            }}\n        />\n    );\n};\n\nconst ChipsInput = forwardRef(ChipsInputComponent) as (<MultipleType extends boolean, DataType>(\n    props: ChipsInputProps<MultipleType, DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nChipsInput.displayName = 'ChipsInput';\n\nexport { ChipsInput };\n"],"names":["_jsx"],"mappings":"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"}

package/UncontrolledChipsInput.d.ts

@@ -0,0 +1,8 @@
+import { ForwardedRef, ReactElement } from 'react';
+import { UncontrolledChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';
+declare const UncontrolledChipsInput: (<MultipleType extends boolean, DataType>(props: UncontrolledChipsInputProps<MultipleType, DataType> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+}) => ReactElement | null) & {
+    displayName: string;
+};
+export { UncontrolledChipsInput };

package/UncontrolledChipsInput.js

@@ -0,0 +1,25 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { ChipsInput } from './ChipsInput.js';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-ui-chips-trigger';
+import '@hh.ru/magritte-ui-input';
+import '@hh.ru/magritte-ui-select';
+import '@hh.ru/magritte-ui-suggest';
+
+const DEFAULT_STATE = {
+    value: '',
+    chips: [],
+};
+const UncontrolledChipsInputComponent = ({ 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((chip) => (jsx("input", { type: "hidden", name: name, value: chip.value }, chip.value)))] }));
+};
+const UncontrolledChipsInput = forwardRef(UncontrolledChipsInputComponent);
+UncontrolledChipsInput.displayName = 'UncontrolledChipsInput';
+
+export { UncontrolledChipsInput };
+//# sourceMappingURL=UncontrolledChipsInput.js.map

package/UncontrolledChipsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledChipsInput.js","sources":["../src/UncontrolledChipsInput.tsx"],"sourcesContent":["import { forwardRef, useState, ForwardedRef, ReactElement } from 'react';\n\nimport { ChipsInput } from '@hh.ru/magritte-ui-chips-input/ChipsInput';\nimport { UncontrolledChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';\nimport { ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n    value: '',\n    chips: [],\n};\n\nconst UncontrolledChipsInputComponent = <MultipleType extends boolean, DataType>(\n    {\n        state: defaultState = DEFAULT_STATE,\n        onChange,\n        name,\n        ...restProps\n    }: UncontrolledChipsInputProps<MultipleType, DataType>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const [state, setState] = useState<ChipsTriggerState>({ ...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((chip) => (\n                <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n            ))}\n        </>\n    );\n};\n\nconst UncontrolledChipsInput = forwardRef(UncontrolledChipsInputComponent) as (<MultipleType extends boolean, DataType>(\n    props: UncontrolledChipsInputProps<MultipleType, DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nUncontrolledChipsInput.displayName = 'UncontrolledChipsInput';\n\nexport { UncontrolledChipsInput };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;AAMA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEF,MAAM,+BAA+B,GAAG,CACpC,EACI,KAAK,EAAE,YAAY,GAAG,aAAa,EACnC,QAAQ,EACR,IAAI,EACJ,GAAG,SAAS,EACsC,EACtD,GAAmC,KACnC;AACA,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,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,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,sBAAsB,GAAG,UAAU,CAAC,+BAA+B,EAErB;AAEpD,sBAAsB,CAAC,WAAW,GAAG,wBAAwB;;;;"}

package/index.d.ts

@@ -1,2 +1,3 @@
 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,4 +1,5 @@
 export { ChipsInput } from './ChipsInput.js';
+export { UncontrolledChipsInput } from './UncontrolledChipsInput.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@hh.ru/magritte-common-use-multiple-refs';

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": "2.1.2",
+  "version": "2.3.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
-    "@hh.ru/magritte-ui-chips-trigger": "2.0.7",
+    "@hh.ru/magritte-ui-chips-trigger": "3.0.0",
     "@hh.ru/magritte-ui-input": "7.0.2",
-    "@hh.ru/magritte-ui-select": "8.2.3",
-    "@hh.ru/magritte-ui-suggest": "6.2.4"
+    "@hh.ru/magritte-ui-select": "8.3.1",
+    "@hh.ru/magritte-ui-suggest": "6.3.1"
   },
-  "gitHead": "4735b7d8ebc3a5b30340d50fb9be427f2b476efa"
+  "gitHead": "dbc45b2e706faaa5274d3e9de158a37c5dce7125"
 }

package/types.d.ts

@@ -1,16 +1,35 @@
 import { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger';
 import { SelectProps } from '@hh.ru/magritte-ui-select/types';
 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 TriggerPropsHelper = Omit<ChipsTriggerProps, 'expanded' | 'toggleExpanded' | 'wrapperRef' | 'ref' | 'state' | 'onChange' | 'onKeyDown' | 'onFocus' | 'data-qa'>;
 type SuggestPropsHelper<DataType> = Omit<SuggestProps<DataType>, 'inputValue' | 'onChange' | 'renderTrigger' | 'onSearchSubmit' | 'onBottomSheetOpen' | 'input'>;
 type SelectPropsHelper<MultipleType extends boolean, DataType> = Omit<SelectProps<MultipleType, DataType>, 'value' | 'onChange' | 'renderTrigger' | 'onSearchSubmit' | 'onBottomSheetOpen' | 'triggerProps' | 'searchable'>;
-export interface ChipsInputProps<MultipleType extends boolean, DataType> {
-    type: ChipsInputType;
+export interface ChipsInputBaseProps {
+    /** Свойства chips-trigger */
+    triggerProps: TriggerPropsHelper;
+    /** Name атрибут chips-inpupt */
+    name?: string;
+}
+export interface ChipsInputStateProps {
+    /** Состояние для chips-input */
     state: ChipsTriggerProps['state'];
+    /** Событие изменения для состояния */
     onChange: ChipsTriggerProps['onChange'];
-    triggerProps: TriggerPropsHelper;
-    suggestProps: SuggestPropsHelper<DataType>;
+}
+interface ChipsInputSelectProps<MultipleType extends boolean, DataType> {
+    /** Тип для chips-input */
+    type: 'select';
+    /** Свойства select */
     selectProps: SelectPropsHelper<MultipleType, DataType>;
+    suggestProps?: never;
+}
+interface ChipsInputSuggestProps<DataType> {
+    /** Тип для chips-input */
+    type: 'suggest';
+    /** Свойства suggest */
+    suggestProps: SuggestPropsHelper<DataType>;
+    selectProps?: never;
 }
+export type ChipsInputProps<MultipleType extends boolean, DataType> = ChipsInputBaseProps & ChipsInputStateProps & (ChipsInputSelectProps<MultipleType, DataType> | ChipsInputSuggestProps<DataType>);
+export type UncontrolledChipsInputProps<MultipleType extends boolean, DataType> = ChipsInputBaseProps & Partial<ChipsInputStateProps> & (ChipsInputSelectProps<MultipleType, DataType> | ChipsInputSuggestProps<DataType>);
 export {};