@hh.ru/magritte-ui-chips-input 3.1.2 → 3.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChipsInput.js +8 -0
- package/ChipsInput.js.map +1 -1
- package/UncontrolledChipsInput.js +1 -0
- package/UncontrolledChipsInput.js.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +6 -5
package/ChipsInput.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef, useRef, useState } from 'react';
|
|
3
3
|
import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
4
|
+
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
4
5
|
import { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger';
|
|
5
6
|
import { Input } from '@hh.ru/magritte-ui-input';
|
|
6
7
|
import { Select } from '@hh.ru/magritte-ui-select';
|
|
@@ -39,6 +40,8 @@ const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerP
|
|
|
39
40
|
});
|
|
40
41
|
const selectStateRef = useRef(selectState);
|
|
41
42
|
const optionsCountRef = useRef(selectProps?.options.length || 0);
|
|
43
|
+
const onChangeSuggestRef = useRef();
|
|
44
|
+
const { isMobile } = useBreakpoint();
|
|
42
45
|
if (type === 'suggest') {
|
|
43
46
|
return (jsx(Suggest, { ...suggestProps, onChange: (value, isValueFromList) => {
|
|
44
47
|
if (!isValueFromList) {
|
|
@@ -46,6 +49,9 @@ const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerP
|
|
|
46
49
|
}
|
|
47
50
|
if (!state.chips.some((chip) => chip.value === value)) {
|
|
48
51
|
onChangeExternal({ value: '', chips: [...state.chips, { value }] });
|
|
52
|
+
if (isMobile) {
|
|
53
|
+
onChangeSuggestRef.current?.('');
|
|
54
|
+
}
|
|
49
55
|
}
|
|
50
56
|
}, onBottomSheetOpen: () => chipsTriggerRef.current?.blur(), input: {
|
|
51
57
|
component: Input,
|
|
@@ -61,9 +67,11 @@ const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerP
|
|
|
61
67
|
if (value) {
|
|
62
68
|
onChangeExternal({ value: '', chips: [...state.chips, { value }] });
|
|
63
69
|
onCloseBottomSheet();
|
|
70
|
+
onChangeSuggestRef.current?.('');
|
|
64
71
|
}
|
|
65
72
|
}, renderTrigger: ({ props, optionsCount }) => {
|
|
66
73
|
const { onChange, wrapperRef, onFocus, onKeyDown } = props;
|
|
74
|
+
onChangeSuggestRef.current = onChange;
|
|
67
75
|
return (jsx(ChipsTrigger, { ...triggerProps,
|
|
68
76
|
// разрешаем добавлять результаты только если в suggest ничего не нашли
|
|
69
77
|
allowArbitraryValues: optionsCount === 0 && allowArbitraryValues, state: state, ref: chipsTriggerRefCallback, wrapperRef: wrapperRef, onKeyDown: onKeyDown, onFocus: onFocus, "data-qa": "chips-input-suggest-trigger", onChange: (newState) => {
|
package/ChipsInput.js.map
CHANGED
|
@@ -1 +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, SelectOption } from '@hh.ru/magritte-ui-select';\nimport { Suggest } from '@hh.ru/magritte-ui-suggest';\n\ntype ValueType<MultipleType> = [MultipleType] extends [true] ? string[] : string;\ntype ChipsList<DataType> = ChipsInputProps<DataType>['state']['chips'];\n\nconst getChipsFromSelectValues = <DataType,>(\n newValues: string[],\n options: SelectOption<DataType>[]\n): ChipsList<DataType> => {\n return newValues.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\nconst getUniqueChips = <DataType,>(\n selectState: string[],\n options: SelectOption<DataType>[],\n chipsFromState: ChipsList<DataType>\n): ChipsList<DataType> => {\n // надо взять предыдущие чипсы и убрать дубли\n const valuesFromOptions = options.map(({ value }) => value);\n const chipsFromUserInput = chipsFromState.filter(({ value }) => !valuesFromOptions.includes(value));\n // добавить значения селекта (преобразовать в чипсы их сперва)\n const chipsFromSelect = selectState.length > 0 ? getChipsFromSelectValues(selectState, options) : [];\n return [...chipsFromSelect, ...chipsFromUserInput];\n};\n\nconst getInitialSelectValue = <DataType,>(\n type: ChipsInputProps<DataType>['type'],\n chips: ChipsInputProps<DataType>['state']['chips']\n) => {\n if (type === 'suggest') {\n return '';\n }\n return chips.map((chip) => chip.value);\n};\n\nconst ChipsInputComponent = <DataType,>(\n { type, state, onChange: onChangeExternal, triggerProps, suggestProps, selectProps }: ChipsInputProps<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(type, state.chips);\n return initialState as ValueType<true>;\n });\n const selectStateRef = useRef<string[]>(selectState);\n const optionsCountRef = useRef<number>(selectProps?.options.length || 0);\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, optionsCount }) => {\n const { onChange, wrapperRef, onFocus, onKeyDown } = props;\n return (\n <ChipsTrigger\n {...triggerProps}\n // разрешаем добавлять результаты только если в suggest ничего не нашли\n allowArbitraryValues={optionsCount === 0 && allowArbitraryValues}\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 { options, applyChangesButton, clearButton } = selectProps;\n const haveApplyChangesButton = Boolean(applyChangesButton);\n const haveClearButton = Boolean(clearButton);\n return (\n <Select\n {...selectProps}\n searchable\n multiple\n value={selectState}\n onSelectOption={(values) => {\n selectStateRef.current = values;\n }}\n onChange={(newValues) => {\n setSelectState(newValues);\n if (haveApplyChangesButton || (haveClearButton && newValues.length === 0)) {\n // обработаем эти кейсы в onApply/onClear\n return;\n }\n const uniqueChips = getUniqueChips(newValues, options, state.chips);\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n }}\n onApply={({ isMobile, searchValue }) => {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);\n // добавляем пользовательский ввод, если нужно\n // в случае bs - из navbar, в случае drop - из chis-trigger\n const userValue = isMobile ? searchValue : state.value;\n if (allowArbitraryValues && userValue.length > 0 && optionsCountRef.current === 0) {\n uniqueChips.push({ value: userValue });\n }\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n // актуализируем состояние селекта\n setSelectState(selectStateRef.current);\n }}\n onClear={() => {\n onChangeExternal({\n value: '',\n chips: [],\n });\n setSelectState([]);\n }}\n onSearchSubmit={(event, _, optionsCount, onCloseBottomSheetWithUpdateValues) => {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);\n // добавляем пользовательский ввод из bs, если нужно\n const userValue = (event.target as HTMLInputElement).value;\n if (allowArbitraryValues && userValue.length > 0 && optionsCount === 0) {\n uniqueChips.push({ value: userValue });\n }\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n setSelectState(selectStateRef.current);\n onCloseBottomSheetWithUpdateValues();\n }}\n onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n triggerProps={{ size: 'large' }}\n renderTrigger={({ ref, setSearchValue, onKeyDown, onBlur, onFocus, optionsCount }) => {\n optionsCountRef.current = optionsCount;\n return (\n <ChipsTrigger\n {...triggerProps}\n allowArbitraryValues={optionsCount === 0 && 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 const { event } = newState;\n setSearchValue(newState.value);\n\n // если нажали `enter` в инпуте на desktop\n if (event?.type === 'add' && event.modifier === 'enter') {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, newState.chips);\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n setSelectState(selectStateRef.current);\n return;\n }\n\n onChangeExternal(newState);\n // если обновился только input, то ререндрить select не нужно\n if (event?.type === 'change' && event.modifier === 'keyboard') {\n return;\n }\n\n // осталось обработать только remove\n const deletedChip = event?.element?.value as string;\n const newSelectState = selectStateRef.current.filter((item) => item !== deletedChip);\n setSelectState(newSelectState);\n selectStateRef.current = newSelectState;\n }}\n />\n );\n }}\n />\n );\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":"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"}
|
|
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 { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\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, SelectOption } from '@hh.ru/magritte-ui-select';\nimport { Suggest } from '@hh.ru/magritte-ui-suggest';\n\ntype ValueType<MultipleType> = [MultipleType] extends [true] ? string[] : string;\ntype ChipsList<DataType> = ChipsInputProps<DataType>['state']['chips'];\ntype OnChangeSuggest = ((value: string) => void) | undefined;\n\nconst getChipsFromSelectValues = <DataType,>(\n newValues: string[],\n options: SelectOption<DataType>[]\n): ChipsList<DataType> => {\n return newValues.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\nconst getUniqueChips = <DataType,>(\n selectState: string[],\n options: SelectOption<DataType>[],\n chipsFromState: ChipsList<DataType>\n): ChipsList<DataType> => {\n // надо взять предыдущие чипсы и убрать дубли\n const valuesFromOptions = options.map(({ value }) => value);\n const chipsFromUserInput = chipsFromState.filter(({ value }) => !valuesFromOptions.includes(value));\n // добавить значения селекта (преобразовать в чипсы их сперва)\n const chipsFromSelect = selectState.length > 0 ? getChipsFromSelectValues(selectState, options) : [];\n return [...chipsFromSelect, ...chipsFromUserInput];\n};\n\nconst getInitialSelectValue = <DataType,>(\n type: ChipsInputProps<DataType>['type'],\n chips: ChipsInputProps<DataType>['state']['chips']\n) => {\n if (type === 'suggest') {\n return '';\n }\n return chips.map((chip) => chip.value);\n};\n\nconst ChipsInputComponent = <DataType,>(\n { type, state, onChange: onChangeExternal, triggerProps, suggestProps, selectProps }: ChipsInputProps<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(type, state.chips);\n return initialState as ValueType<true>;\n });\n const selectStateRef = useRef<string[]>(selectState);\n const optionsCountRef = useRef<number>(selectProps?.options.length || 0);\n const onChangeSuggestRef = useRef<OnChangeSuggest>();\n const { isMobile } = useBreakpoint();\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 if (isMobile) {\n onChangeSuggestRef.current?.('');\n }\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 onChangeSuggestRef.current?.('');\n }\n }}\n renderTrigger={({ props, optionsCount }) => {\n const { onChange, wrapperRef, onFocus, onKeyDown } = props;\n onChangeSuggestRef.current = onChange;\n return (\n <ChipsTrigger\n {...triggerProps}\n // разрешаем добавлять результаты только если в suggest ничего не нашли\n allowArbitraryValues={optionsCount === 0 && allowArbitraryValues}\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 { options, applyChangesButton, clearButton } = selectProps;\n const haveApplyChangesButton = Boolean(applyChangesButton);\n const haveClearButton = Boolean(clearButton);\n return (\n <Select\n {...selectProps}\n searchable\n multiple\n value={selectState}\n onSelectOption={(values) => {\n selectStateRef.current = values;\n }}\n onChange={(newValues) => {\n setSelectState(newValues);\n if (haveApplyChangesButton || (haveClearButton && newValues.length === 0)) {\n // обработаем эти кейсы в onApply/onClear\n return;\n }\n const uniqueChips = getUniqueChips(newValues, options, state.chips);\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n }}\n onApply={({ isMobile, searchValue }) => {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);\n // добавляем пользовательский ввод, если нужно\n // в случае bs - из navbar, в случае drop - из chis-trigger\n const userValue = isMobile ? searchValue : state.value;\n if (allowArbitraryValues && userValue.length > 0 && optionsCountRef.current === 0) {\n uniqueChips.push({ value: userValue });\n }\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n // актуализируем состояние селекта\n setSelectState(selectStateRef.current);\n }}\n onClear={() => {\n onChangeExternal({\n value: '',\n chips: [],\n });\n setSelectState([]);\n }}\n onSearchSubmit={(event, _, optionsCount, onCloseBottomSheetWithUpdateValues) => {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);\n // добавляем пользовательский ввод из bs, если нужно\n const userValue = (event.target as HTMLInputElement).value;\n if (allowArbitraryValues && userValue.length > 0 && optionsCount === 0) {\n uniqueChips.push({ value: userValue });\n }\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n setSelectState(selectStateRef.current);\n onCloseBottomSheetWithUpdateValues();\n }}\n onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n triggerProps={{ size: 'large' }}\n renderTrigger={({ ref, setSearchValue, onKeyDown, onBlur, onFocus, optionsCount }) => {\n optionsCountRef.current = optionsCount;\n return (\n <ChipsTrigger\n {...triggerProps}\n allowArbitraryValues={optionsCount === 0 && 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 const { event } = newState;\n setSearchValue(newState.value);\n\n // если нажали `enter` в инпуте на desktop\n if (event?.type === 'add' && event.modifier === 'enter') {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, newState.chips);\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n setSelectState(selectStateRef.current);\n return;\n }\n\n onChangeExternal(newState);\n // если обновился только input, то ререндрить select не нужно\n if (event?.type === 'change' && event.modifier === 'keyboard') {\n return;\n }\n\n // осталось обработать только remove\n const deletedChip = event?.element?.value as string;\n const newSelectState = selectStateRef.current.filter((item) => item !== deletedChip);\n setSelectState(newSelectState);\n selectStateRef.current = newSelectState;\n }}\n />\n );\n }}\n />\n );\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":"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"}
|
|
@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef, useState } from 'react';
|
|
3
3
|
import { ChipsInput } from './ChipsInput.js';
|
|
4
4
|
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
5
|
+
import '@hh.ru/magritte-ui-breakpoint';
|
|
5
6
|
import '@hh.ru/magritte-ui-chips-trigger';
|
|
6
7
|
import '@hh.ru/magritte-ui-input';
|
|
7
8
|
import '@hh.ru/magritte-ui-select';
|
|
@@ -1 +1 @@
|
|
|
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 = <DataType,>(\n { state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }: UncontrolledChipsInputProps<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 (<DataType>(\n props: UncontrolledChipsInputProps<DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nUncontrolledChipsInput.displayName = 'UncontrolledChipsInput';\n\nexport { UncontrolledChipsInput };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"
|
|
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 = <DataType,>(\n { state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }: UncontrolledChipsInputProps<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 (<DataType>(\n props: UncontrolledChipsInputProps<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,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAyC,EAC5G,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.js
CHANGED
|
@@ -4,6 +4,7 @@ export { UncontrolledChipsInput } from './UncontrolledChipsInput.js';
|
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import 'react';
|
|
6
6
|
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
7
|
+
import '@hh.ru/magritte-ui-breakpoint';
|
|
7
8
|
import '@hh.ru/magritte-ui-chips-trigger';
|
|
8
9
|
import '@hh.ru/magritte-ui-input';
|
|
9
10
|
import '@hh.ru/magritte-ui-select';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-chips-input",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.3",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -27,11 +27,12 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
|
|
30
|
-
"@hh.ru/magritte-ui-
|
|
30
|
+
"@hh.ru/magritte-ui-breakpoint": "4.0.4",
|
|
31
|
+
"@hh.ru/magritte-ui-chips-trigger": "3.2.3",
|
|
31
32
|
"@hh.ru/magritte-ui-input": "7.0.3",
|
|
32
|
-
"@hh.ru/magritte-ui-select": "8.6.
|
|
33
|
-
"@hh.ru/magritte-ui-suggest": "6.4.
|
|
33
|
+
"@hh.ru/magritte-ui-select": "8.6.2",
|
|
34
|
+
"@hh.ru/magritte-ui-suggest": "6.4.2",
|
|
34
35
|
"@hh.ru/magritte-ui-theme-provider": "1.1.31"
|
|
35
36
|
},
|
|
36
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "fb8f5621002b895e727aaa8ee79e7f91f9e6e4bc"
|
|
37
38
|
}
|