npm - @vkontakte/vkui - Versions diffs - 7.2.0 → 7.3.0 - Mend

@vkontakte/vkui 7.2.0 → 7.3.0

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.

Files changed (1679) hide show

package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n Icon20CheckBoxIndetermanate,\n Icon20CheckBoxOff,\n Icon20CheckBoxOn,\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport type { HasRef, HasRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './CheckboxInput.module.css';\n\ntype VendorIconType = typeof Icon20CheckBoxOn;\n\nexport type CheckboxInputIconType =\n \| React.ComponentType<React.SVGProps<SVGSVGElement>>\n \| VendorIconType;\n\nfunction setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {\n el.indeterminate = indeterminate;\n}\n\nexport interface CheckboxInputProps\n extends React.ComponentProps<'input'>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLInputElement> {\n indeterminate?: boolean;\n defaultIndeterminate?: boolean;\n IconOnCompact?: CheckboxInputIconType;\n IconOnRegular?: CheckboxInputIconType;\n IconOffCompact?: CheckboxInputIconType;\n IconOffRegular?: CheckboxInputIconType;\n IconIndeterminate?: CheckboxInputIconType;\n}\n\nconst warn = warnOnce('Checkbox');\n\nexport function CheckboxInput({\n className,\n style,\n getRootRef,\n getRef,\n indeterminate,\n defaultIndeterminate,\n onChange,\n IconOnCompact = Icon20CheckBoxOn,\n IconOnRegular = Icon24CheckBoxOn,\n IconOffCompact = Icon20CheckBoxOff,\n IconOffRegular = Icon24CheckBoxOff,\n IconIndeterminate = Icon20CheckBoxIndetermanate,\n ...restProps\n}: CheckboxInputProps) {\n const inputRef = useExternRef(getRef);\n const platform = usePlatform();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n React.useEffect(() => {\n const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n if (inputRef.current) {\n setIndeterminate(inputRef.current, Boolean(indeterminateValue));\n }\n }, [defaultIndeterminate, indeterminate, inputRef]);\n\n const handleChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (\n defaultIndeterminate !== undefined &&\n indeterminate === undefined &&\n restProps.checked === undefined &&\n inputRef.current\n ) {\n setIndeterminate(inputRef.current, false);\n }\n if (indeterminate !== undefined && inputRef.current) {\n setIndeterminate(inputRef.current, Boolean(indeterminate));\n }\n onChange && onChange(event);\n },\n [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n );\n\n if (process.env.NODE_ENV === 'development') {\n if (defaultIndeterminate && restProps.defaultChecked) {\n warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n }\n\n if (indeterminate && restProps.checked) {\n warn('indeterminate и checked не могут быть true одновременно', 'error');\n }\n\n if (restProps.defaultChecked && restProps.checked) {\n warn('defaultChecked и checked не могут быть true одновременно', 'error');\n }\n }\n\n return (\n <RootComponent\n baseClassName={styles.host}\n className={className}\n style={style}\n getRootRef={getRootRef}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n type=\"checkbox\"\n onChange={handleChange}\n className={styles.input}\n getRootRef={inputRef}\n />\n {platform === 'vkcom' ? (\n <IconOnCompact className={styles.iconOn} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <IconOnCompact className={classNames(styles.iconOn, adaptiveSizeY.compact.className)} />\n )}\n {adaptiveSizeY.regular && (\n <IconOnRegular className={classNames(styles.iconOn, adaptiveSizeY.regular.className)} />\n )}\n </React.Fragment>\n )}\n {platform === 'vkcom' ? (\n <IconOffCompact className={styles.iconOff} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <IconOffCompact\n className={classNames(styles.iconOff, adaptiveSizeY.compact.className)}\n />\n )}\n {adaptiveSizeY.regular && (\n <IconOffRegular\n className={classNames(styles.iconOff, adaptiveSizeY.regular.className)}\n />\n )}\n </React.Fragment>\n )}\n {platform === 'vkcom' ? (\n <IconIndeterminate width={20} height={20} className={styles.iconIndeterminate} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <IconIndeterminate\n className={classNames(styles.iconIndeterminate, adaptiveSizeY.compact.className)}\n width={20}\n height={20}\n />\n )}\n {adaptiveSizeY.regular && (\n <IconIndeterminate\n className={classNames(styles.iconIndeterminate, adaptiveSizeY.regular.className)}\n width={24}\n height={24}\n />\n )}\n </React.Fragment>\n )}\n </RootComponent>\n );\n}\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","useAdaptivityConditionalRender","useExternRef","usePlatform","warnOnce","RootComponent","VisuallyHidden","styles","setIndeterminate","el","indeterminate","warn","CheckboxInput","className","style","getRootRef","getRef","defaultIndeterminate","onChange","IconOnCompact","IconOnRegular","IconOffCompact","IconOffRegular","IconIndeterminate","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","baseClassName","host","Component","type","input","iconOn","Fragment","compact","regular","iconOff","width","height","iconIndeterminate"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAC3BC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,QACX,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,yDAAgD;AAC/F,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,QAAQ,QAAQ,2BAAwB;AAEjD,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,cAAc,QAAQ,yCAAsC;AACrE,OAAOC,YAAY,6BAA6B;AAQhD,SAASC,iBAAiBC,EAAoB,EAAEC,aAAsB;IACpED,GAAGC,aAAa,GAAGA;AACrB;~~AAeA~~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"}
1	+ {"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n Icon20CheckBoxIndetermanate,\n Icon20CheckBoxOff,\n Icon20CheckBoxOn,\n Icon24CheckBoxOff,\n Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport type { HasRef, HasRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './CheckboxInput.module.css';\n\ntype VendorIconType = typeof Icon20CheckBoxOn;\n\nexport type CheckboxInputIconType =\n \| React.ComponentType<React.SVGProps<SVGSVGElement>>\n \| VendorIconType;\n\nfunction setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {\n el.indeterminate = indeterminate;\n}\n\nexport interface CheckboxInputProps\n extends React.ComponentProps<'input'>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLInputElement> {\n /*\n Неопределенное состояние чекбокса.\n /\n indeterminate?: boolean;\n /\n Неопределенное состояние чекбокса по умолчанию.\n /\n defaultIndeterminate?: boolean;\n /\n Иконка для включенного состояния в компактном режиме.\n /\n IconOnCompact?: CheckboxInputIconType;\n /\n Иконка для включенного состояния в обычном режиме.\n /\n IconOnRegular?: CheckboxInputIconType;\n /\n Иконка для выключенного состояния в компактном режиме.\n /\n IconOffCompact?: CheckboxInputIconType;\n /\n Иконка для выключенного состояния в обычном режиме.\n /\n IconOffRegular?: CheckboxInputIconType;\n /\n Иконка для неопределенного состояния.\n */\n IconIndeterminate?: CheckboxInputIconType;\n}\n\nconst warn = warnOnce('Checkbox');\n\nexport function CheckboxInput({\n className,\n style,\n getRootRef,\n getRef,\n indeterminate,\n defaultIndeterminate,\n onChange,\n IconOnCompact = Icon20CheckBoxOn,\n IconOnRegular = Icon24CheckBoxOn,\n IconOffCompact = Icon20CheckBoxOff,\n IconOffRegular = Icon24CheckBoxOff,\n IconIndeterminate = Icon20CheckBoxIndetermanate,\n ...restProps\n}: CheckboxInputProps) {\n const inputRef = useExternRef(getRef);\n const platform = usePlatform();\n const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n React.useEffect(() => {\n const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n if (inputRef.current) {\n setIndeterminate(inputRef.current, Boolean(indeterminateValue));\n }\n }, [defaultIndeterminate, indeterminate, inputRef]);\n\n const handleChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (\n defaultIndeterminate !== undefined &&\n indeterminate === undefined &&\n restProps.checked === undefined &&\n inputRef.current\n ) {\n setIndeterminate(inputRef.current, false);\n }\n if (indeterminate !== undefined && inputRef.current) {\n setIndeterminate(inputRef.current, Boolean(indeterminate));\n }\n onChange && onChange(event);\n },\n [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n );\n\n if (process.env.NODE_ENV === 'development') {\n if (defaultIndeterminate && restProps.defaultChecked) {\n warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n }\n\n if (indeterminate && restProps.checked) {\n warn('indeterminate и checked не могут быть true одновременно', 'error');\n }\n\n if (restProps.defaultChecked && restProps.checked) {\n warn('defaultChecked и checked не могут быть true одновременно', 'error');\n }\n }\n\n return (\n <RootComponent\n baseClassName={styles.host}\n className={className}\n style={style}\n getRootRef={getRootRef}\n >\n <VisuallyHidden\n {...restProps}\n Component=\"input\"\n type=\"checkbox\"\n onChange={handleChange}\n className={styles.input}\n getRootRef={inputRef}\n />\n {platform === 'vkcom' ? (\n <IconOnCompact className={styles.iconOn} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <IconOnCompact className={classNames(styles.iconOn, adaptiveSizeY.compact.className)} />\n )}\n {adaptiveSizeY.regular && (\n <IconOnRegular className={classNames(styles.iconOn, adaptiveSizeY.regular.className)} />\n )}\n </React.Fragment>\n )}\n {platform === 'vkcom' ? (\n <IconOffCompact className={styles.iconOff} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <IconOffCompact\n className={classNames(styles.iconOff, adaptiveSizeY.compact.className)}\n />\n )}\n {adaptiveSizeY.regular && (\n <IconOffRegular\n className={classNames(styles.iconOff, adaptiveSizeY.regular.className)}\n />\n )}\n </React.Fragment>\n )}\n {platform === 'vkcom' ? (\n <IconIndeterminate width={20} height={20} className={styles.iconIndeterminate} />\n ) : (\n <React.Fragment>\n {adaptiveSizeY.compact && (\n <IconIndeterminate\n className={classNames(styles.iconIndeterminate, adaptiveSizeY.compact.className)}\n width={20}\n height={20}\n />\n )}\n {adaptiveSizeY.regular && (\n <IconIndeterminate\n className={classNames(styles.iconIndeterminate, adaptiveSizeY.regular.className)}\n width={24}\n height={24}\n />\n )}\n </React.Fragment>\n )}\n </RootComponent>\n );\n}\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","useAdaptivityConditionalRender","useExternRef","usePlatform","warnOnce","RootComponent","VisuallyHidden","styles","setIndeterminate","el","indeterminate","warn","CheckboxInput","className","style","getRootRef","getRef","defaultIndeterminate","onChange","IconOnCompact","IconOnRegular","IconOffCompact","IconOffRegular","IconIndeterminate","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","baseClassName","host","Component","type","input","iconOn","Fragment","compact","regular","iconOff","width","height","iconIndeterminate"],"mappings":"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"}

package/dist/cssm/components/ChipsInput/ChipsInput.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { useChipsInput } from "./useChipsInput.js";
  */ export const ChipsInput = ({ // option
 value: valueProp, defaultValue, onChange, // input
 getRef, inputValue: inputValueProp, defaultInputValue: inputDefaultValueProp, onInputChange: onInputChangeProp, getOptionValue, getOptionLabel, getNewOptionData, // other
-disabled, allowClearButton, ...restProps })=>{
+disabled, allowClearButton, delimiter, ...restProps })=>{
     const { value, addOptionFromInput, removeOption, clearOptions, // input
     inputRef: inputRefHook, inputValue, onInputChange } = useChipsInput({
         // option
@@ -23,7 +23,8 @@ disabled, allowClearButton, ...restProps })=>{
         defaultInputValue: inputDefaultValueProp,
         onInputChange: onInputChangeProp,
         // other
-        disabled
+        disabled,
+        delimiter
     });
     const inputRef = useExternRef(getRef, inputRefHook);
     return /*#__PURE__*/ _jsx(ChipsInputBase, {

package/dist/cssm/components/ChipsInput/ChipsInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["'use client';\n\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { useChipsInput, type UseChipsInputProps } from './useChipsInput';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n extends ChipsInputBaseProps<Option>,\n UseChipsInputProps<Option>,\n Pick<FormFieldProps, 'status' \| 'mode' \| 'before' \| 'after' \| 'maxHeight'> {\n /*\n Если `true`, то справа будет отображаться кнопка для очистки ~~значения\~~n /\n allowClearButton?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n\n // input\n getRef,\n inputValue: inputValueProp,\n defaultInputValue: inputDefaultValueProp,\n onInputChange: onInputChangeProp,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // other\n disabled,\n allowClearButton,\n ...restProps\n}: ChipsInputProps<Option>): React.ReactNode => {\n const {\n value,\n addOptionFromInput,\n removeOption,\n clearOptions,\n\n // input\n inputRef: inputRefHook,\n inputValue,\n onInputChange,\n } = useChipsInput({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionLabel,\n getOptionValue,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue: inputDefaultValueProp,\n onInputChange: onInputChangeProp,\n\n // other\n disabled,\n });\n const inputRef = useExternRef(getRef, inputRefHook);\n\n return (\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n value={value}\n clearButtonShown={allowClearButton && (!!value.length \|\| !!inputValue.length)}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n onClear={clearOptions}\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n />\n );\n};\n"],"names":["useExternRef","ChipsInputBase","useChipsInput","ChipsInput","value","valueProp","defaultValue","onChange","getRef","inputValue","inputValueProp","defaultInputValue","inputDefaultValueProp","onInputChange","onInputChangeProp","getOptionValue","getOptionLabel","getNewOptionData","disabled","allowClearButton","restProps","addOptionFromInput","removeOption","clearOptions","inputRef","inputRefHook","clearButtonShown","length","onAddChipOption","onRemoveChipOption","onClear"],"mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,8BAA2B;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,SAASC,aAAa,QAAiC,qBAAkB;AAYzE;;CAEC,GACD,OAAO,MAAMC,aAAa,CAA4B,EACpD,SAAS;AACTC,OAAOC,SAAS,EAChBC,YAAY,EACZC,QAAQ,EAER,QAAQ;AACRC,MAAM,EACNC,YAAYC,cAAc,EAC1BC,mBAAmBC,qBAAqB,EACxCC,eAAeC,iBAAiB,EAChCC,cAAc,EACdC,cAAc,EACdC,gBAAgB,EAEhB,QAAQ;AACRC,QAAQ,EACRC,gBAAgB,~~EAChB~~,GAAGC,WACqB;IACxB,MAAM,~~EACJhB~~,KAAK,~~EACLiB~~,kBAAkB,EAClBC,YAAY,EACZC,YAAY,EAEZ,QAAQ;IACRC,UAAUC,YAAY,~~EACtBhB~~,UAAU,EACVI,aAAa,EACd,GAAGX,cAAc;QAChB,SAAS;QACTE,OAAOC;QACPC;QACAC;QACAS;QACAD;QACAE;QAEA,QAAQ;QACRR,YAAYC;QACZC,mBAAmBC;QACnBC,eAAeC;QAEf,QAAQ;QACRI;IACF;IACA,~~MAAMM~~,~~WAAWxB~~,aAAaQ,~~QAAQiB~~;IAEtC,qBACE,~~KAACxB~~;QACE,~~GAAGmB~~,SAAS;~~QACbF~~,UAAUA;QACVd,OAAOA;~~QACPsB~~,~~kBAAkBP~~,oBAAqB,CAAA,CAAC,CAACf,~~MAAMuB~~,MAAM,IAAI,CAAC,~~CAAClB~~,~~WAAWkB~~,MAAM,AAAD;QAC3EC,iBAAiBP;QACjBQ,oBAAoBP;QACpBQ,SAASP;~~QACTf~~,~~QAAQgB~~;~~QACRf~~,YAAYA;QACZI,eAAeA;;AAGrB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["'use client';\n\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { useChipsInput, type UseChipsInputProps } from './useChipsInput';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n extends ChipsInputBaseProps<Option>,\n UseChipsInputProps<Option>,\n Pick<FormFieldProps, 'status' \| 'mode' \| 'before' \| 'after' \| 'maxHeight'> {\n /*\n Если `true`, то справа будет отображаться кнопка для очистки значения.\n /\n allowClearButton?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n\n // input\n getRef,\n inputValue: inputValueProp,\n defaultInputValue: inputDefaultValueProp,\n onInputChange: onInputChangeProp,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // other\n disabled,\n allowClearButton,\n delimiter,\n ...restProps\n}: ChipsInputProps<Option>): React.ReactNode => {\n const {\n value,\n addOptionFromInput,\n removeOption,\n clearOptions,\n\n // input\n inputRef: inputRefHook,\n inputValue,\n onInputChange,\n } = useChipsInput({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionLabel,\n getOptionValue,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue: inputDefaultValueProp,\n onInputChange: onInputChangeProp,\n\n // other\n disabled,\n delimiter,\n });\n const inputRef = useExternRef(getRef, inputRefHook);\n\n return (\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n value={value}\n clearButtonShown={allowClearButton && (!!value.length \|\| !!inputValue.length)}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n onClear={clearOptions}\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n />\n );\n};\n"],"names":["useExternRef","ChipsInputBase","useChipsInput","ChipsInput","value","valueProp","defaultValue","onChange","getRef","inputValue","inputValueProp","defaultInputValue","inputDefaultValueProp","onInputChange","onInputChangeProp","getOptionValue","getOptionLabel","getNewOptionData","disabled","allowClearButton","delimiter","restProps","addOptionFromInput","removeOption","clearOptions","inputRef","inputRefHook","clearButtonShown","length","onAddChipOption","onRemoveChipOption","onClear"],"mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,8BAA2B;AACxD,SAASC,cAAc,QAAQ,sCAAmC;AAGlE,SAASC,aAAa,QAAiC,qBAAkB;AAYzE;;CAEC,GACD,OAAO,MAAMC,aAAa,CAA4B,EACpD,SAAS;AACTC,OAAOC,SAAS,EAChBC,YAAY,EACZC,QAAQ,EAER,QAAQ;AACRC,MAAM,EACNC,YAAYC,cAAc,EAC1BC,mBAAmBC,qBAAqB,EACxCC,eAAeC,iBAAiB,EAChCC,cAAc,EACdC,cAAc,EACdC,gBAAgB,EAEhB,QAAQ;AACRC,QAAQ,EACRC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACqB;IACxB,MAAM,EACJjB,KAAK,EACLkB,kBAAkB,EAClBC,YAAY,EACZC,YAAY,EAEZ,QAAQ;IACRC,UAAUC,YAAY,EACtBjB,UAAU,EACVI,aAAa,EACd,GAAGX,cAAc;QAChB,SAAS;QACTE,OAAOC;QACPC;QACAC;QACAS;QACAD;QACAE;QAEA,QAAQ;QACRR,YAAYC;QACZC,mBAAmBC;QACnBC,eAAeC;QAEf,QAAQ;QACRI;QACAE;IACF;IACA,MAAMK,WAAWzB,aAAaQ,QAAQkB;IAEtC,qBACE,KAACzB;QACE,GAAGoB,SAAS;QACbH,UAAUA;QACVd,OAAOA;QACPuB,kBAAkBR,oBAAqB,CAAA,CAAC,CAACf,MAAMwB,MAAM,IAAI,CAAC,CAACnB,WAAWmB,MAAM,AAAD;QAC3EC,iBAAiBP;QACjBQ,oBAAoBP;QACpBQ,SAASP;QACThB,QAAQiB;QACRhB,YAAYA;QACZI,eAAeA;;AAGrB,EAAE"}

package/dist/cssm/components/ChipsInput/useChipsInput.js CHANGED Viewed

@@ -11,8 +11,8 @@ export const transformValue = (value, getOptionValue, getOptionLabel)=>value.map
         }));
 export const useChipsInput = ({ // option
 value: valueProp, defaultValue = DEFAULT_VALUE, onChange, getOptionLabel = getOptionLabelDefault, getOptionValue = getOptionValueDefault, getNewOptionData = getNewOptionDataDefault, // input
-inputValue: inputValueProp, defaultInputValue = DEFAULT_INPUT_VALUE, onInputChange, // other
-disabled })=>{
+inputValue: inputValueProp, defaultInputValue = DEFAULT_INPUT_VALUE, onInputChange: onInputChangeProp, // other
+disabled, delimiter })=>{
     const [value, setValue] = useCustomEnsuredControl({
         disabled,
         value: valueProp ? transformValue(valueProp, getOptionValue, getOptionLabel) : undefined,
@@ -24,18 +24,20 @@ disabled })=>{
         disabled,
         value: inputValueProp,
         defaultValue: defaultInputValue,
-        onChange: onInputChange
+        onChange: onInputChangeProp
     });
-    const toggleOption = React.useCallback((nextValueProp, isNewValue)=>{
+    const toggleOption = React.useCallback((nextValuesProp, isNewValue)=>{
         setValue((prevValue)=>{
-            const isLikeObjectOption = isValueLikeChipOptionObject(nextValueProp);
-            const resolvedOption = isLikeObjectOption ? getNewOptionData(nextValueProp.value, nextValueProp.label) : getNewOptionData(nextValueProp, typeof nextValueProp === 'string' ? nextValueProp : '');
-            const nextValue = prevValue.filter((option)=>resolvedOption.value !== option.value);
-            if (isNewValue === true) {
-                nextValue.push(isLikeObjectOption ? {
-                    ...nextValueProp,
-                    ...resolvedOption
-                } : resolvedOption);
+            const resolvedNextOptionsSet = new Set();
+            const resolvedNextOptions = nextValuesProp.map((option)=>{
+                const isLikeObjectOption = isValueLikeChipOptionObject(option);
+                const resolvedOption = isLikeObjectOption ? getNewOptionData(option.value, option.label) : getNewOptionData(option, typeof option === 'string' ? option : '');
+                resolvedNextOptionsSet.add(resolvedOption.value);
+                return resolvedOption;
+            });
+            const nextValue = prevValue.filter((option)=>!resolvedNextOptionsSet.has(option.value));
+            if (isNewValue) {
+                nextValue.push(...resolvedNextOptions);
             }
             return nextValue;
         });
@@ -51,10 +53,17 @@ disabled })=>{
     }, [
         inputRef
     ]);
-    const addOption = React.useCallback((newValue)=>toggleOption(newValue, true), [
+    const addOption = React.useCallback((newValue)=>toggleOption([
+            newValue
+        ], true), [
         toggleOption
     ]);
-    const removeOption = React.useCallback((newValue)=>toggleOption(newValue, false), [
+    const addOptions = React.useCallback((newValues)=>toggleOption(newValues, true), [
+        toggleOption
+    ]);
+    const removeOption = React.useCallback((newValue)=>toggleOption([
+            newValue
+        ], false), [
         toggleOption
     ]);
     const addOptionFromInput = React.useCallback((inputValue)=>{
@@ -80,6 +89,22 @@ disabled })=>{
         clearInput,
         setValue
     ]);
+    const onInputChange = React.useCallback((e, canCreate = true)=>{
+        const newInputValue = e.target.value;
+        if (!delimiter || !newInputValue.includes(delimiter) || !canCreate) {
+            setInputChange(e);
+            return;
+        }
+        const values = newInputValue.trim().split(delimiter).map((v)=>v.trim()).filter(Boolean);
+        e.target.value = '';
+        e.currentTarget.value = '';
+        setInputChange(e);
+        addOptions(values);
+    }, [
+        addOptions,
+        delimiter,
+        setInputChange
+    ]);
     useNativeFormResetListener(inputRef, reset);
     return {
         value,
@@ -88,7 +113,7 @@ disabled })=>{
         removeOption,
         inputRef,
         inputValue,
-        onInputChange: setInputChange,
+        onInputChange,
         clearInput,
         clearOptions
     };

package/dist/cssm/components/ChipsInput/useChipsInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsInput/useChipsInput.ts"],"sourcesContent":["import * as React from 'react';\nimport { useCustomEnsuredControl, useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { simulateReactInput, type SimulateReactInputTargetState } from '../../lib/react';\nimport {\n DEFAULT_INPUT_VALUE,\n DEFAULT_VALUE,\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport { isValueLikeChipOptionObject } from '../ChipsInputBase/helpers';\nimport type {\n ChipOption,\n ChipOptionLabel,\n ChipOptionValue,\n GetNewOptionData,\n GetOptionLabel,\n GetOptionValue,\n UseChipsInputBaseProps,\n} from '../ChipsInputBase/types';\n\nexport const transformValue = <O extends ChipOption>(\n value: O[],\n getOptionValue: GetOptionValue<O>,\n getOptionLabel: GetOptionLabel<O>,\n): Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n> =>\n value.map((option) => ({\n ...option,\n label: getOptionLabel(option),\n value: getOptionValue(option),\n }));\n\ninterface ToggleOption<O extends ChipOption> {\n (optionForAdd: O \| string, isNewValue: true): void;\n (optionForRemove: O \| ChipOptionValue, isNewValue: false): void;\n}\n\nexport interface UseChipsInputProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseProps<O> {\n /*\n Селектор значения.\n /\n getOptionValue?: GetOptionValue<O>;\n /\n Селектор пользовательского представления.\n /\n getOptionLabel?: GetOptionLabel<O>;\n /\n Функция для создания новой опции.\n /\n getNewOptionData?: GetNewOptionData<O>;\n}\n\nexport const useChipsInput = <O extends ChipOption>({\n // option\n value: valueProp,\n defaultValue = DEFAULT_VALUE,\n onChange,\n getOptionLabel = getOptionLabelDefault,\n getOptionValue = getOptionValueDefault,\n getNewOptionData = getNewOptionDataDefault,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue = DEFAULT_INPUT_VALUE,\n onInputChange,\n\n // other\n disabled,\n}: UseChipsInputProps<O>): {\n value: Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n >;\n addOption: (newValue: O \| string) => void;\n addOptionFromInput: (inputValue: string) => void;\n removeOption: (newValue: O \| ChipOptionValue) => void;\n clearOptions: () => void;\n inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) \| null>;\n inputValue: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => any;\n clearInput: () => void;\n} => {\n const [value, setValue] = useCustomEnsuredControl({\n disabled,\n value: valueProp ? transformValue(valueProp, getOptionValue, getOptionLabel) : undefined,\n defaultValue: transformValue(defaultValue, getOptionValue, getOptionLabel),\n onChange,\n });\n\n const inputRef = React.useRef<(HTMLInputElement & SimulateReactInputTargetState) \| null>(null);\n const [inputValue, setInputChange] = useEnsuredControl({\n disabled,\n value: inputValueProp,\n defaultValue: defaultInputValue,\n onChange: onInputChange,\n });\n\n const toggleOption: ToggleOption<O> = React.useCallback(\n (nextValueProp: O \| ChipOptionValue, isNewValue: boolean) => {\n setValue((prevValue) => {\n const isLikeObjectOption = isValueLikeChipOptionObject(nextValueProp);\n const resolvedOption = isLikeObjectOption\n ? getNewOptionData(nextValueProp.value, nextValueProp.label)\n : getNewOptionData(nextValueProp, typeof nextValueProp === 'string' ? nextValueProp : '');\n const nextValue = prevValue.filter((option: O) => resolvedOption.value !== option.value);\n\n if (isNewValue === true) {\n nextValue.push(\n isLikeObjectOption ? { ...nextValueProp, ...resolvedOption } : resolvedOption,\n );\n }\n\n return nextValue;\n });\n },\n [setValue, getNewOptionData],\n );\n\n const clearInput = React.useCallback(() => {\n / istanbul ignore if */\n if (!inputRef.current) {\n return;\n }\n simulateReactInput(inputRef.current, '');\n }, [inputRef]);\n\n const addOption = React.useCallback(\n (newValue: O \| string) => toggleOption(newValue, true),\n [toggleOption],\n );\n\n const removeOption = React.useCallback(\n (newValue: O \| ChipOptionValue) => toggleOption(newValue, false),\n [toggleOption],\n );\n\n const addOptionFromInput = React.useCallback(\n (inputValue: string) => {\n const label = inputValue.trim();\n if (label) {\n addOption(label);\n clearInput();\n }\n },\n [addOption, clearInput],\n );\n\n const reset = React.useCallback(() => {\n setValue(defaultValue);\n }, [defaultValue, setValue]);\n\n const clearOptions = React.useCallback(() => {\n setValue(DEFAULT_VALUE);\n clearInput();\n }, [clearInput, setValue]);\n\n useNativeFormResetListener(inputRef, reset);\n\n return {\n value,\n addOption,\n addOptionFromInput,\n removeOption,\n\n inputRef,\n inputValue,\n onInputChange: setInputChange,\n clearInput,\n clearOptions,\n };\n};\n"],"names":["React","useCustomEnsuredControl","useEnsuredControl","useNativeFormResetListener","simulateReactInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","isValueLikeChipOptionObject","transformValue","value","getOptionValue","getOptionLabel","map","option","label","useChipsInput","valueProp","defaultValue","onChange","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","disabled","setValue","undefined","inputRef","useRef","setInputChange","toggleOption","useCallback","nextValueProp","isNewValue","prevValue","isLikeObjectOption","resolvedOption","nextValue","filter","push","clearInput","current","addOption","newValue","removeOption","addOptionFromInput","trim","reset","clearOptions"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsInput/useChipsInput.ts"],"sourcesContent":["import * as React from 'react';\nimport { useCustomEnsuredControl, useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { simulateReactInput, type SimulateReactInputTargetState } from '../../lib/react';\nimport {\n DEFAULT_INPUT_VALUE,\n DEFAULT_VALUE,\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport { isValueLikeChipOptionObject } from '../ChipsInputBase/helpers';\nimport type {\n ChipOption,\n ChipOptionLabel,\n ChipOptionValue,\n GetNewOptionData,\n GetOptionLabel,\n GetOptionValue,\n UseChipsInputBaseProps,\n} from '../ChipsInputBase/types';\n\nexport const transformValue = <O extends ChipOption>(\n value: O[],\n getOptionValue: GetOptionValue<O>,\n getOptionLabel: GetOptionLabel<O>,\n): Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n> =>\n value.map((option) => ({\n ...option,\n label: getOptionLabel(option),\n value: getOptionValue(option),\n }));\n\ninterface ToggleOption<O extends ChipOption> {\n (optionsForAdd: Array<O \| string>, isNewValue: true): void;\n (optionsForRemove: Array<O \| ChipOptionValue>, isNewValue: false): void;\n}\n\nexport interface UseChipsInputProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseProps<O> {\n /*\n Селектор значения.\n /\n getOptionValue?: GetOptionValue<O>;\n /\n Селектор пользовательского представления.\n /\n getOptionLabel?: GetOptionLabel<O>;\n /\n Функция для создания новой опции.\n /\n getNewOptionData?: GetNewOptionData<O>;\n}\n\nexport const useChipsInput = <O extends ChipOption>({\n // option\n value: valueProp,\n defaultValue = DEFAULT_VALUE,\n onChange,\n getOptionLabel = getOptionLabelDefault,\n getOptionValue = getOptionValueDefault,\n getNewOptionData = getNewOptionDataDefault,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue = DEFAULT_INPUT_VALUE,\n onInputChange: onInputChangeProp,\n\n // other\n disabled,\n delimiter,\n}: UseChipsInputProps<O>): {\n value: Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n >;\n addOption: (newValue: O \| string) => void;\n addOptionFromInput: (inputValue: string) => void;\n removeOption: (newValue: O \| ChipOptionValue) => void;\n clearOptions: () => void;\n inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) \| null>;\n inputValue: string;\n onInputChange: (e: React.ChangeEvent<HTMLInputElement>, canCreate?: boolean) => any;\n clearInput: () => void;\n} => {\n const [value, setValue] = useCustomEnsuredControl({\n disabled,\n value: valueProp ? transformValue(valueProp, getOptionValue, getOptionLabel) : undefined,\n defaultValue: transformValue(defaultValue, getOptionValue, getOptionLabel),\n onChange,\n });\n\n const inputRef = React.useRef<(HTMLInputElement & SimulateReactInputTargetState) \| null>(null);\n const [inputValue, setInputChange] = useEnsuredControl({\n disabled,\n value: inputValueProp,\n defaultValue: defaultInputValue,\n onChange: onInputChangeProp,\n });\n\n const toggleOption: ToggleOption<O> = React.useCallback(\n (nextValuesProp: Array<O \| ChipOptionValue>, isNewValue: boolean) => {\n setValue((prevValue) => {\n const resolvedNextOptionsSet = new Set<ChipOptionValue>();\n const resolvedNextOptions = nextValuesProp.map((option) => {\n const isLikeObjectOption = isValueLikeChipOptionObject(option);\n const resolvedOption = isLikeObjectOption\n ? getNewOptionData(option.value, option.label)\n : getNewOptionData(option, typeof option === 'string' ? option : '');\n resolvedNextOptionsSet.add(resolvedOption.value);\n return resolvedOption;\n });\n\n const nextValue = prevValue.filter(\n (option: O) => !resolvedNextOptionsSet.has(option.value),\n );\n\n if (isNewValue) {\n nextValue.push(...resolvedNextOptions);\n }\n\n return nextValue;\n });\n },\n [setValue, getNewOptionData],\n );\n\n const clearInput = React.useCallback(() => {\n / istanbul ignore if */\n if (!inputRef.current) {\n return;\n }\n simulateReactInput(inputRef.current, '');\n }, [inputRef]);\n\n const addOption = React.useCallback(\n (newValue: O \| string) => toggleOption([newValue], true),\n [toggleOption],\n );\n\n const addOptions = React.useCallback(\n (newValues: Array<O \| string>) => toggleOption(newValues, true),\n [toggleOption],\n );\n\n const removeOption = React.useCallback(\n (newValue: O \| ChipOptionValue) => toggleOption([newValue], false),\n [toggleOption],\n );\n\n const addOptionFromInput = React.useCallback(\n (inputValue: string) => {\n const label = inputValue.trim();\n if (label) {\n addOption(label);\n clearInput();\n }\n },\n [addOption, clearInput],\n );\n\n const reset = React.useCallback(() => {\n setValue(defaultValue);\n }, [defaultValue, setValue]);\n\n const clearOptions = React.useCallback(() => {\n setValue(DEFAULT_VALUE);\n clearInput();\n }, [clearInput, setValue]);\n\n const onInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, canCreate = true) => {\n const newInputValue = e.target.value;\n if (!delimiter \|\| !newInputValue.includes(delimiter) \|\| !canCreate) {\n setInputChange(e);\n return;\n }\n const values = newInputValue\n .trim()\n .split(delimiter)\n .map((v) => v.trim())\n .filter(Boolean);\n\n e.target.value = '';\n e.currentTarget.value = '';\n setInputChange(e);\n\n addOptions(values);\n },\n [addOptions, delimiter, setInputChange],\n );\n\n useNativeFormResetListener(inputRef, reset);\n\n return {\n value,\n addOption,\n addOptionFromInput,\n removeOption,\n\n inputRef,\n inputValue,\n onInputChange,\n clearInput,\n clearOptions,\n };\n};\n"],"names":["React","useCustomEnsuredControl","useEnsuredControl","useNativeFormResetListener","simulateReactInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","isValueLikeChipOptionObject","transformValue","value","getOptionValue","getOptionLabel","map","option","label","useChipsInput","valueProp","defaultValue","onChange","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","onInputChangeProp","disabled","delimiter","setValue","undefined","inputRef","useRef","setInputChange","toggleOption","useCallback","nextValuesProp","isNewValue","prevValue","resolvedNextOptionsSet","Set","resolvedNextOptions","isLikeObjectOption","resolvedOption","add","nextValue","filter","has","push","clearInput","current","addOption","newValue","addOptions","newValues","removeOption","addOptionFromInput","trim","reset","clearOptions","e","canCreate","newInputValue","target","includes","values","split","v","Boolean","currentTarget"],"mappings":"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"}

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js CHANGED Viewed

@@ -183,6 +183,7 @@ ClearButton = FormFieldClearButton, clearButtonShown, clearButtonTestId, onClear
                             // чтобы можно было легче найти этот чип в DOM
                             'data-index': index,
                             'data-value': option.value,
+                            'data-value-type': typeof option.value,
                             // для a11y
                             'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,
                             'role': 'option',

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getHorizontalFocusGoTo, Keys } from '../../lib/accessibility';\nimport {\n contains as checkTargetIsInputEl,\n contains,\n getActiveElementByAnotherElement,\n} from '../../lib/dom';\nimport { FormField } from '../FormField/FormField';\nimport { FormFieldClearButton } from '../FormFieldClearButton/FormFieldClearButton';\nimport { Text } from '../Typography/Text/Text';\nimport { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from './constants';\nimport {\n getChipOptionIndexByHTMLElement,\n getChipOptionIndexByValueProp,\n getChipOptionValueByHTMLElement,\n getNextChipOptionIndexByNavigateToProp,\n isInputValueEmpty,\n} from './helpers';\nimport type { ChipOption, ChipOptionValue, ChipsInputBasePrivateProps, NavigateTo } from './types';\nimport styles from './ChipsInputBase.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n} as const;\n\nexport const ChipsInputBase = <O extends ChipOption>({\n // FormFieldProps\n getRootRef,\n style,\n className,\n before,\n after,\n status,\n mode,\n maxHeight,\n\n // option\n value = DEFAULT_VALUE,\n onAddChipOption,\n onRemoveChipOption: onRemoveChipOptionProp,\n renderChip = renderChipDefault,\n\n // input\n getRef,\n id: idProp,\n inputValue = DEFAULT_INPUT_VALUE,\n placeholder,\n disabled,\n readOnly,\n addOnBlur,\n onBlur,\n onInputChange,\n\n // clear\n ClearButton = FormFieldClearButton,\n clearButtonShown,\n clearButtonTestId,\n onClear,\n ...restProps\n}: ChipsInputBasePrivateProps<O>): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const idGenerated = React.useId();\n const inputRef = useExternRef(getRef);\n const listboxRef = React.useRef<HTMLDivElement>(null);\n\n const valueLength = value.length;\n const withPlaceholder = valueLength === 0;\n const [lastFocusedChipOptionIndex, setLastFocusedChipOptionIndex] = React.useState(0);\n\n const resetChipOptionFocusToInputEl = (inputEl: HTMLInputElement) => {\n setLastFocusedChipOptionIndex(0);\n inputEl.focus();\n };\n\n const moveFocusToChipOption = (\n currentIndex: number,\n navigateTo: NavigateTo,\n listboxEl: HTMLElement,\n ) => {\n const index = getNextChipOptionIndexByNavigateToProp(currentIndex, navigateTo, valueLength);\n // eslint-disable-next-line no-restricted-properties\n const foundEl = listboxEl.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n\n if (foundEl) {\n setLastFocusedChipOptionIndex(index);\n foundEl.focus();\n }\n };\n\n const removeChipOption = (o: O \| ChipOptionValue, index: number) => {\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) /\n if (!inputRef.current \|\| !listboxRef.current) {\n return;\n }\n\n if (valueLength > 1) {\n if (index === valueLength - 1) {\n moveFocusToChipOption(index, 'prev', listboxRef.current);\n } else {\n moveFocusToChipOption(index, 'next', listboxRef.current);\n }\n } else {\n resetChipOptionFocusToInputEl(inputRef.current);\n }\n\n onRemoveChipOptionProp(o);\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const targetEl = event.target;\n / istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (event.defaultPrevented \|\| !listboxRef.current \|\| !isHTMLElement(targetEl)) {\n return;\n }\n\n switch (event.key) {\n case Keys.ENTER: {\n if (\n !readOnly &&\n checkTargetIsInputEl(targetEl, inputRef.current) &&\n inputRef.current &&\n !isInputValueEmpty(inputRef.current)\n ) {\n event.preventDefault();\n onAddChipOption(inputRef.current.value);\n }\n break;\n }\n case Keys.DELETE:\n case Keys.BACKSPACE: {\n if (!readOnly && valueLength > 0) {\n if (!checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n removeChipOption(\n getChipOptionValueByHTMLElement(targetEl),\n getChipOptionIndexByHTMLElement(targetEl),\n );\n } else if (event.key === Keys.BACKSPACE && isInputValueEmpty(inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n 'last',\n listboxRef.current,\n );\n }\n }\n break;\n }\n case Keys.ARROW_UP:\n case Keys.ARROW_LEFT:\n case Keys.ARROW_DOWN:\n case Keys.ARROW_RIGHT: {\n if (valueLength !== 0 && !checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n getHorizontalFocusGoTo(event.key),\n listboxRef.current,\n );\n }\n break;\n }\n }\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(event);\n }\n\n if (addOnBlur && !event.defaultPrevented && inputRef.current) {\n onAddChipOption(inputRef.current.value);\n }\n };\n\n const handleChipRemove = (event: React.MouseEvent, v: ChipOptionValue) => {\n event.preventDefault();\n event.stopPropagation();\n removeChipOption(v, getChipOptionIndexByValueProp(v, value));\n };\n\n const handleRootClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (\n event.defaultPrevented \|\|\n contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))\n ) {\n return;\n }\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearButton = React.useMemo(() => {\n if (clearButtonShown) {\n return <ClearButton onClick={onClear} disabled={disabled} data-testid={clearButtonTestId} />;\n }\n return undefined;\n }, [ClearButton, clearButtonShown, clearButtonTestId, disabled, onClear]);\n\n const afterItems = React.useMemo(() => {\n if (clearButton \|\| after) {\n return (\n <>\n {clearButton}\n {after}\n </>\n );\n }\n return undefined;\n }, [after, clearButton]);\n\n return (\n <FormField\n Component=\"div\"\n getRootRef={getRootRef}\n style={style}\n disabled={disabled}\n before={before}\n after={afterItems}\n status={status}\n mode={mode}\n className={className}\n maxHeight={maxHeight}\n onClick={disabled ? undefined : handleRootClick}\n >\n <div\n className={classNames(\n styles.host,\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n withPlaceholder && styles.hasPlaceholder,\n )}\n // для a11y\n ref={listboxRef}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onKeyDown={disabled ? undefined : handleListboxKeyDown}\n >\n {value.map((option, index) => (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderChip(\n {\n 'Component': 'div',\n 'value': option.value,\n 'label': option.label,\n 'disabled': option.disabled \|\| disabled,\n 'readOnly': option.readOnly \|\| readOnly,\n 'className': styles.chip,\n 'onRemove': handleChipRemove,\n // чтобы можно было легче найти этот чип в DOM\n 'data-index': index,\n 'data-value': option.value,\n // для a11y\n 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,\n 'role': 'option',\n 'aria-selected': true,\n 'aria-posinset': index + 1,\n 'aria-setsize': valueLength,\n },\n option,\n )}\n </React.Fragment>\n ))}\n <Text\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n {...restProps}\n Component=\"input\"\n type=\"text\"\n id={idProp \|\| `chips-input-base-generated-id-${idGenerated}`}\n getRootRef={inputRef}\n className={styles.el}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={withPlaceholder ? placeholder : undefined}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n />\n </div>\n </FormField>\n );\n};\n"],"names":["React","classNames","isHTMLElement","useAdaptivity","useExternRef","getHorizontalFocusGoTo","Keys","contains","checkTargetIsInputEl","getActiveElementByAnotherElement","FormField","FormFieldClearButton","Text","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","renderChipDefault","getChipOptionIndexByHTMLElement","getChipOptionIndexByValueProp","getChipOptionValueByHTMLElement","getNextChipOptionIndexByNavigateToProp","isInputValueEmpty","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","ChipsInputBase","getRootRef","style","className","before","after","status","mode","maxHeight","value","onAddChipOption","onRemoveChipOption","onRemoveChipOptionProp","renderChip","getRef","id","idProp","inputValue","placeholder","disabled","readOnly","addOnBlur","onBlur","onInputChange","ClearButton","clearButtonShown","clearButtonTestId","onClear","restProps","sizeY","idGenerated","useId","inputRef","listboxRef","useRef","valueLength","length","withPlaceholder","lastFocusedChipOptionIndex","setLastFocusedChipOptionIndex","useState","resetChipOptionFocusToInputEl","inputEl","focus","moveFocusToChipOption","currentIndex","navigateTo","listboxEl","index","foundEl","querySelector","removeChipOption","o","current","handleListboxKeyDown","event","targetEl","target","defaultPrevented","key","ENTER","preventDefault","DELETE","BACKSPACE","ARROW_UP","ARROW_LEFT","ARROW_DOWN","ARROW_RIGHT","handleInputBlur","handleChipRemove","v","stopPropagation","handleRootClick","currentTarget","clearButton","useMemo","onClick","data-testid","undefined","afterItems","Component","div","host","hasPlaceholder","ref","role","aria-orientation","aria-disabled","aria-readonly","onKeyDown","map","option","Fragment","label","chip","autoCapitalize","autoComplete","autoCorrect","spellCheck","type","el","onChange"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getHorizontalFocusGoTo, Keys } from '../../lib/accessibility';\nimport {\n contains as checkTargetIsInputEl,\n contains,\n getActiveElementByAnotherElement,\n} from '../../lib/dom';\nimport { FormField } from '../FormField/FormField';\nimport { FormFieldClearButton } from '../FormFieldClearButton/FormFieldClearButton';\nimport { Text } from '../Typography/Text/Text';\nimport { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from './constants';\nimport {\n getChipOptionIndexByHTMLElement,\n getChipOptionIndexByValueProp,\n getChipOptionValueByHTMLElement,\n getNextChipOptionIndexByNavigateToProp,\n isInputValueEmpty,\n} from './helpers';\nimport type { ChipOption, ChipOptionValue, ChipsInputBasePrivateProps, NavigateTo } from './types';\nimport styles from './ChipsInputBase.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n} as const;\n\nexport const ChipsInputBase = <O extends ChipOption>({\n // FormFieldProps\n getRootRef,\n style,\n className,\n before,\n after,\n status,\n mode,\n maxHeight,\n\n // option\n value = DEFAULT_VALUE,\n onAddChipOption,\n onRemoveChipOption: onRemoveChipOptionProp,\n renderChip = renderChipDefault,\n\n // input\n getRef,\n id: idProp,\n inputValue = DEFAULT_INPUT_VALUE,\n placeholder,\n disabled,\n readOnly,\n addOnBlur,\n onBlur,\n onInputChange,\n\n // clear\n ClearButton = FormFieldClearButton,\n clearButtonShown,\n clearButtonTestId,\n onClear,\n ...restProps\n}: ChipsInputBasePrivateProps<O>): React.ReactNode => {\n const { sizeY = 'none' } = useAdaptivity();\n const idGenerated = React.useId();\n const inputRef = useExternRef(getRef);\n const listboxRef = React.useRef<HTMLDivElement>(null);\n\n const valueLength = value.length;\n const withPlaceholder = valueLength === 0;\n const [lastFocusedChipOptionIndex, setLastFocusedChipOptionIndex] = React.useState(0);\n\n const resetChipOptionFocusToInputEl = (inputEl: HTMLInputElement) => {\n setLastFocusedChipOptionIndex(0);\n inputEl.focus();\n };\n\n const moveFocusToChipOption = (\n currentIndex: number,\n navigateTo: NavigateTo,\n listboxEl: HTMLElement,\n ) => {\n const index = getNextChipOptionIndexByNavigateToProp(currentIndex, navigateTo, valueLength);\n // eslint-disable-next-line no-restricted-properties\n const foundEl = listboxEl.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n\n if (foundEl) {\n setLastFocusedChipOptionIndex(index);\n foundEl.focus();\n }\n };\n\n const removeChipOption = (o: O \| ChipOptionValue, index: number) => {\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) /\n if (!inputRef.current \|\| !listboxRef.current) {\n return;\n }\n\n if (valueLength > 1) {\n if (index === valueLength - 1) {\n moveFocusToChipOption(index, 'prev', listboxRef.current);\n } else {\n moveFocusToChipOption(index, 'next', listboxRef.current);\n }\n } else {\n resetChipOptionFocusToInputEl(inputRef.current);\n }\n\n onRemoveChipOptionProp(o);\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const targetEl = event.target;\n / istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (event.defaultPrevented \|\| !listboxRef.current \|\| !isHTMLElement(targetEl)) {\n return;\n }\n\n switch (event.key) {\n case Keys.ENTER: {\n if (\n !readOnly &&\n checkTargetIsInputEl(targetEl, inputRef.current) &&\n inputRef.current &&\n !isInputValueEmpty(inputRef.current)\n ) {\n event.preventDefault();\n onAddChipOption(inputRef.current.value);\n }\n break;\n }\n case Keys.DELETE:\n case Keys.BACKSPACE: {\n if (!readOnly && valueLength > 0) {\n if (!checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n removeChipOption(\n getChipOptionValueByHTMLElement(targetEl),\n getChipOptionIndexByHTMLElement(targetEl),\n );\n } else if (event.key === Keys.BACKSPACE && isInputValueEmpty(inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n 'last',\n listboxRef.current,\n );\n }\n }\n break;\n }\n case Keys.ARROW_UP:\n case Keys.ARROW_LEFT:\n case Keys.ARROW_DOWN:\n case Keys.ARROW_RIGHT: {\n if (valueLength !== 0 && !checkTargetIsInputEl(targetEl, inputRef.current)) {\n event.preventDefault();\n moveFocusToChipOption(\n getChipOptionIndexByHTMLElement(targetEl),\n getHorizontalFocusGoTo(event.key),\n listboxRef.current,\n );\n }\n break;\n }\n }\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(event);\n }\n\n if (addOnBlur && !event.defaultPrevented && inputRef.current) {\n onAddChipOption(inputRef.current.value);\n }\n };\n\n const handleChipRemove = (event: React.MouseEvent, v: ChipOptionValue) => {\n event.preventDefault();\n event.stopPropagation();\n removeChipOption(v, getChipOptionIndexByValueProp(v, value));\n };\n\n const handleRootClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (\n event.defaultPrevented \|\|\n contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))\n ) {\n return;\n }\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const clearButton = React.useMemo(() => {\n if (clearButtonShown) {\n return <ClearButton onClick={onClear} disabled={disabled} data-testid={clearButtonTestId} />;\n }\n return undefined;\n }, [ClearButton, clearButtonShown, clearButtonTestId, disabled, onClear]);\n\n const afterItems = React.useMemo(() => {\n if (clearButton \|\| after) {\n return (\n <>\n {clearButton}\n {after}\n </>\n );\n }\n return undefined;\n }, [after, clearButton]);\n\n return (\n <FormField\n Component=\"div\"\n getRootRef={getRootRef}\n style={style}\n disabled={disabled}\n before={before}\n after={afterItems}\n status={status}\n mode={mode}\n className={className}\n maxHeight={maxHeight}\n onClick={disabled ? undefined : handleRootClick}\n >\n <div\n className={classNames(\n styles.host,\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n withPlaceholder && styles.hasPlaceholder,\n )}\n // для a11y\n ref={listboxRef}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onKeyDown={disabled ? undefined : handleListboxKeyDown}\n >\n {value.map((option, index) => (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderChip(\n {\n 'Component': 'div',\n 'value': option.value,\n 'label': option.label,\n 'disabled': option.disabled \|\| disabled,\n 'readOnly': option.readOnly \|\| readOnly,\n 'className': styles.chip,\n 'onRemove': handleChipRemove,\n // чтобы можно было легче найти этот чип в DOM\n 'data-index': index,\n 'data-value': option.value,\n 'data-value-type': typeof option.value,\n // для a11y\n 'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,\n 'role': 'option',\n 'aria-selected': true,\n 'aria-posinset': index + 1,\n 'aria-setsize': valueLength,\n },\n option,\n )}\n </React.Fragment>\n ))}\n <Text\n autoCapitalize=\"none\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n spellCheck={false}\n {...restProps}\n Component=\"input\"\n type=\"text\"\n id={idProp \|\| `chips-input-base-generated-id-${idGenerated}`}\n getRootRef={inputRef}\n className={styles.el}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={withPlaceholder ? placeholder : undefined}\n value={inputValue}\n onChange={onInputChange}\n onBlur={handleInputBlur}\n />\n </div>\n </FormField>\n );\n};\n"],"names":["React","classNames","isHTMLElement","useAdaptivity","useExternRef","getHorizontalFocusGoTo","Keys","contains","checkTargetIsInputEl","getActiveElementByAnotherElement","FormField","FormFieldClearButton","Text","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","renderChipDefault","getChipOptionIndexByHTMLElement","getChipOptionIndexByValueProp","getChipOptionValueByHTMLElement","getNextChipOptionIndexByNavigateToProp","isInputValueEmpty","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","ChipsInputBase","getRootRef","style","className","before","after","status","mode","maxHeight","value","onAddChipOption","onRemoveChipOption","onRemoveChipOptionProp","renderChip","getRef","id","idProp","inputValue","placeholder","disabled","readOnly","addOnBlur","onBlur","onInputChange","ClearButton","clearButtonShown","clearButtonTestId","onClear","restProps","sizeY","idGenerated","useId","inputRef","listboxRef","useRef","valueLength","length","withPlaceholder","lastFocusedChipOptionIndex","setLastFocusedChipOptionIndex","useState","resetChipOptionFocusToInputEl","inputEl","focus","moveFocusToChipOption","currentIndex","navigateTo","listboxEl","index","foundEl","querySelector","removeChipOption","o","current","handleListboxKeyDown","event","targetEl","target","defaultPrevented","key","ENTER","preventDefault","DELETE","BACKSPACE","ARROW_UP","ARROW_LEFT","ARROW_DOWN","ARROW_RIGHT","handleInputBlur","handleChipRemove","v","stopPropagation","handleRootClick","currentTarget","clearButton","useMemo","onClick","data-testid","undefined","afterItems","Component","div","host","hasPlaceholder","ref","role","aria-orientation","aria-disabled","aria-readonly","onKeyDown","map","option","Fragment","label","chip","autoCapitalize","autoComplete","autoCorrect","spellCheck","type","el","onChange"],"mappings":"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"}

package/dist/cssm/components/ChipsInputBase/helpers.js CHANGED Viewed

@@ -21,6 +21,10 @@ import { DEFAULT_INPUT_VALUE } from "./constants.js";
  * @private
  */ export const getChipOptionValueByHTMLElement = (el)=>{
     const value = el && el.dataset.value;
+    const valueType = el && el.dataset.valueType;
+    if (valueType === 'number') {
+        return Number(value);
+    }
     return typeof value === 'string' ? value : -1;
 };
 /**

package/dist/cssm/components/ChipsInputBase/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsInputBase/helpers.ts"],"sourcesContent":["import { DEFAULT_INPUT_VALUE } from './constants';\nimport type { ChipOption, ChipOptionValue, NavigateTo } from './types';\n\n/*\n @private\n /\nexport const isValueLikeChipOptionObject = <O extends ChipOption>(v: O \| ChipOptionValue): v is O =>\n typeof v === 'object' && 'value' in v;\n\n/\n @private\n /\nexport const isInputValueEmpty = (input: HTMLInputElement \| null): boolean =>\n input ? input.value === DEFAULT_INPUT_VALUE : true;\n\n/\n @private\n /\nexport const getChipOptionIndexByValueProp = <O extends ChipOption>(\n optionProp: O \| ChipOptionValue,\n valueProp: O[],\n): number => {\n const value = isValueLikeChipOptionObject(optionProp) ? optionProp.value : optionProp;\n return valueProp.findIndex((option) => option.value === value);\n};\n\n/\n @private\n /\nexport const getChipOptionIndexByHTMLElement = (el: HTMLElement \| null): number => {\n const value = el && el.dataset.index;\n return typeof value === 'string' ? Number(value) : -1;\n};\n\n/\n @private\n /\nexport const getChipOptionValueByHTMLElement = (el: HTMLElement \| null): ~~string~~ \| -1 => {\n const value = el && el.dataset.value;\n return typeof value === 'string' ? value : -1;\n};\n\n/\n @private\n /\nexport const getNextChipOptionIndexByNavigateToProp = (\n currentIndex: number,\n navigateTo: NavigateTo,\n length: number,\n): number => {\n const LAST_INDEX = length - 1;\n switch (navigateTo) {\n case 'prev':\n const prevIndex = currentIndex - 1;\n return prevIndex < 0 ? LAST_INDEX : prevIndex;\n case 'next':\n const nextIndex = currentIndex + 1;\n return nextIndex > LAST_INDEX ? 0 : nextIndex;\n case 'last':\n return LAST_INDEX;\n default:\n / istanbul ignore next */\n return -1;\n }\n};\n"],"names":["DEFAULT_INPUT_VALUE","isValueLikeChipOptionObject","v","isInputValueEmpty","input","value","getChipOptionIndexByValueProp","optionProp","valueProp","findIndex","option","getChipOptionIndexByHTMLElement","el","dataset","index","Number","getChipOptionValueByHTMLElement","getNextChipOptionIndexByNavigateToProp","currentIndex","navigateTo","length","LAST_INDEX","prevIndex","nextIndex"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,iBAAc;AAGlD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAAuBC,IAChE,OAAOA,MAAM,YAAY,WAAWA,EAAE;AAExC;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,QAChCA,QAAQA,MAAMC,KAAK,KAAKL,sBAAsB,KAAK;AAErD;;CAEC,GACD,OAAO,MAAMM,gCAAgC,CAC3CC,YACAC;IAEA,MAAMH,QAAQJ,4BAA4BM,cAAcA,WAAWF,KAAK,GAAGE;IAC3E,OAAOC,UAAUC,SAAS,CAAC,CAACC,SAAWA,OAAOL,KAAK,KAAKA;AAC1D,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMM,kCAAkC,CAACC;IAC9C,MAAMP,QAAQO,MAAMA,GAAGC,OAAO,CAACC,KAAK;IACpC,OAAO,OAAOT,UAAU,WAAWU,OAAOV,SAAS,CAAC;AACtD,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMW,kCAAkC,CAACJ;IAC9C,MAAMP,QAAQO,MAAMA,GAAGC,OAAO,CAACR,KAAK;IACpC,OAAO,OAAOA,UAAU,WAAWA,QAAQ,CAAC;AAC9C,EAAE;AAEF;;CAEC,GACD,OAAO,~~MAAMY~~,yCAAyC,CACpDC,cACAC,YACAC;IAEA,MAAMC,aAAaD,SAAS;IAC5B,OAAQD;QACN,KAAK;YACH,MAAMG,YAAYJ,eAAe;YACjC,OAAOI,YAAY,IAAID,aAAaC;QACtC,KAAK;YACH,MAAMC,YAAYL,eAAe;YACjC,OAAOK,YAAYF,aAAa,IAAIE;QACtC,KAAK;YACH,OAAOF;QACT;YACE,wBAAwB,GACxB,OAAO,CAAC;IACZ;AACF,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsInputBase/helpers.ts"],"sourcesContent":["import { DEFAULT_INPUT_VALUE } from './constants';\nimport type { ChipOption, ChipOptionValue, NavigateTo } from './types';\n\n/*\n @private\n /\nexport const isValueLikeChipOptionObject = <O extends ChipOption>(v: O \| ChipOptionValue): v is O =>\n typeof v === 'object' && 'value' in v;\n\n/\n @private\n /\nexport const isInputValueEmpty = (input: HTMLInputElement \| null): boolean =>\n input ? input.value === DEFAULT_INPUT_VALUE : true;\n\n/\n @private\n /\nexport const getChipOptionIndexByValueProp = <O extends ChipOption>(\n optionProp: O \| ChipOptionValue,\n valueProp: O[],\n): number => {\n const value = isValueLikeChipOptionObject(optionProp) ? optionProp.value : optionProp;\n return valueProp.findIndex((option) => option.value === value);\n};\n\n/\n @private\n /\nexport const getChipOptionIndexByHTMLElement = (el: HTMLElement \| null): number => {\n const value = el && el.dataset.index;\n return typeof value === 'string' ? Number(value) : -1;\n};\n\n/\n @private\n /\nexport const getChipOptionValueByHTMLElement = (el: HTMLElement \| null): ChipOptionValue \| -1 => {\n const value = el && el.dataset.value;\n const valueType = el && el.dataset.valueType;\n if (valueType === 'number') {\n return Number(value);\n }\n return typeof value === 'string' ? value : -1;\n};\n\n/\n @private\n /\nexport const getNextChipOptionIndexByNavigateToProp = (\n currentIndex: number,\n navigateTo: NavigateTo,\n length: number,\n): number => {\n const LAST_INDEX = length - 1;\n switch (navigateTo) {\n case 'prev':\n const prevIndex = currentIndex - 1;\n return prevIndex < 0 ? LAST_INDEX : prevIndex;\n case 'next':\n const nextIndex = currentIndex + 1;\n return nextIndex > LAST_INDEX ? 0 : nextIndex;\n case 'last':\n return LAST_INDEX;\n default:\n / istanbul ignore next */\n return -1;\n }\n};\n"],"names":["DEFAULT_INPUT_VALUE","isValueLikeChipOptionObject","v","isInputValueEmpty","input","value","getChipOptionIndexByValueProp","optionProp","valueProp","findIndex","option","getChipOptionIndexByHTMLElement","el","dataset","index","Number","getChipOptionValueByHTMLElement","valueType","getNextChipOptionIndexByNavigateToProp","currentIndex","navigateTo","length","LAST_INDEX","prevIndex","nextIndex"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,iBAAc;AAGlD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAAuBC,IAChE,OAAOA,MAAM,YAAY,WAAWA,EAAE;AAExC;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,QAChCA,QAAQA,MAAMC,KAAK,KAAKL,sBAAsB,KAAK;AAErD;;CAEC,GACD,OAAO,MAAMM,gCAAgC,CAC3CC,YACAC;IAEA,MAAMH,QAAQJ,4BAA4BM,cAAcA,WAAWF,KAAK,GAAGE;IAC3E,OAAOC,UAAUC,SAAS,CAAC,CAACC,SAAWA,OAAOL,KAAK,KAAKA;AAC1D,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMM,kCAAkC,CAACC;IAC9C,MAAMP,QAAQO,MAAMA,GAAGC,OAAO,CAACC,KAAK;IACpC,OAAO,OAAOT,UAAU,WAAWU,OAAOV,SAAS,CAAC;AACtD,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMW,kCAAkC,CAACJ;IAC9C,MAAMP,QAAQO,MAAMA,GAAGC,OAAO,CAACR,KAAK;IACpC,MAAMY,YAAYL,MAAMA,GAAGC,OAAO,CAACI,SAAS;IAC5C,IAAIA,cAAc,UAAU;QAC1B,OAAOF,OAAOV;IAChB;IACA,OAAO,OAAOA,UAAU,WAAWA,QAAQ,CAAC;AAC9C,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMa,yCAAyC,CACpDC,cACAC,YACAC;IAEA,MAAMC,aAAaD,SAAS;IAC5B,OAAQD;QACN,KAAK;YACH,MAAMG,YAAYJ,eAAe;YACjC,OAAOI,YAAY,IAAID,aAAaC;QACtC,KAAK;YACH,MAAMC,YAAYL,eAAe;YACjC,OAAOK,YAAYF,aAAa,IAAIE;QACtC,KAAK;YACH,OAAOF;QACT;YACE,wBAAwB,GACxB,OAAO,CAAC;IACZ;AACF,EAAE"}

package/dist/cssm/components/ChipsInputBase/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n HasAlign,\n HasComponent,\n HasDataAttribute,\n HasRef,\n HTMLAttributesWithRootRef,\n} from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\n\nexport type NavigateTo = 'prev' \| 'next' \| 'last';\n\nexport type ChipOptionValue = string \| number;\n\nexport type ChipOptionLabel = React.ReactElement \| string \| number;\n\nexport type ChipOption = {\n value: ChipOptionValue;\n label: ChipOptionLabel;\n disabled?: boolean;\n [index: string]: any;\n};\n\nexport interface ChipProps\n extends HasComponent,\n HasDataAttribute,\n HTMLAttributesWithRootRef<HTMLElement> {\n value?: ChipOptionValue;\n removable?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n removeLabel?: string;\n before?: React.ReactNode;\n after?: React.ReactNode;\n onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n props: RenderChipProps,\n option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n value: ChipOptionValue,\n label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/*\n @public\n /\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n disabled?: boolean;\n\n value?: O[];\n defaultValue?: O[];\n onChange?: OnChange<O>;\n\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: OnInputChange;\n}\n\n/\n @private\n /\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n UseChipsInputBaseProps<O>,\n 'onChange' \| 'defaultValue' \| 'defaultInputValue'\n>;\n\n/\n @public\n /\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseOnlyNeededProps<O>,\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n keyof UseChipsInputBaseProps<O> \| 'defaultChecked'\n >,\n HasRef<HTMLInputElement>,\n HasAlign {\n getRootRef?: React.Ref<HTMLDivElement>;\n /\n Добавляет значение в список на событие `onBlur`\n /\n addOnBlur?: boolean;\n /\n Render prop функция для возврата своего компонента.\n \n @default Используется [Chip](#/Chip)\n /\n renderChip?: RenderChip;\n /\n Показывать ли кнопку для очистки ~~значения\~~n /\n clearButtonShown?: boolean;\n /\n (e2e) testId кнопки ~~очистки\~~n /\n clearButtonTestId?: string;\n /\n Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n /\n ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n}\n\n/\n @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n extends ChipsInputBaseProps<O>,\n Pick<FormFieldProps, 'mode' \| 'status' \| 'before' \| 'after' \| 'maxHeight'> {\n onClear: () => void;\n onAddChipOption: (value: string) => void;\n onRemoveChipOption: (value: O \| ChipOptionValue) => void;\n}\n"],"names":[],"mappings":"~~AAwHA~~;;CAEC,GACD,~~WAMC~~"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n HasAlign,\n HasComponent,\n HasDataAttribute,\n HasRef,\n HTMLAttributesWithRootRef,\n} from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\n\nexport type NavigateTo = 'prev' \| 'next' \| 'last';\n\nexport type ChipOptionValue = string \| number;\n\nexport type ChipOptionLabel = React.ReactElement \| string \| number;\n\nexport type ChipOption = {\n /*\n Значение опции.\n /\n value: ChipOptionValue;\n /\n Отображаемый текст опции.\n /\n label: ChipOptionLabel;\n /\n Блокировка взаимодействия с оцией.\n /\n disabled?: boolean;\n [index: string]: any;\n};\n\nexport interface ChipProps\n extends HasComponent,\n HasDataAttribute,\n HTMLAttributesWithRootRef<HTMLElement> {\n /\n Значение чипа.\n /\n value?: ChipOptionValue;\n /\n Можно ли удалить чип.\n /\n removable?: boolean;\n /\n Блокировка взаимодействия с чипом.\n /\n disabled?: boolean;\n /\n Режим только для чтения.\n /\n readOnly?: boolean;\n /\n Текст для кнопки удаления.\n /\n removeLabel?: string;\n /\n Контент перед основным содержимым.\n /\n before?: React.ReactNode;\n /\n Контент после основного содержимого.\n /\n after?: React.ReactNode;\n /\n Обработчик удаления чипа.\n /\n onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n /\n Отображаемый текст чипа.\n /\n label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n props: RenderChipProps,\n option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n value: ChipOptionValue,\n label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/\n @public\n /\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n /\n Блокировка взаимодействия с компонентом.\n /\n disabled?: boolean;\n /\n Выбранные опции.\n /\n value?: O[];\n /\n Выбранные опции по умолчанию.\n /\n defaultValue?: O[];\n /\n Обработчик изменения выбранных опций.\n /\n onChange?: OnChange<O>;\n /\n Значение поля ввода.\n /\n inputValue?: string;\n /\n Значение поля ввода по умолчанию.\n /\n defaultInputValue?: string;\n /\n Обработчик изменения значения в поле ввода.\n /\n onInputChange?: OnInputChange;\n /\n Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.\n \n Работает в двух сценариях:\n * 1. При вводе разделителя - текст до разделителя автоматически преобразуется в новую опцию.\n * Например, при `delimiter=\",\"` ввод \"опция1,\" создаст опцию \"опция1\".\n \n 2. При вставке из буфера обмена - если вставляемый текст содержит разделители,\n * он будет автоматически разбит на несколько опций.\n * Например, при `delimiter=\",\"` вставка \"опция1,опция2,опция3\" создаст\n * три отдельные опции: \"опция1\", \"опция2\" и \"опция3\".\n /\n delimiter?: string;\n}\n\n/\n @private\n /\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n UseChipsInputBaseProps<O>,\n 'onChange' \| 'defaultValue' \| 'defaultInputValue'\n>;\n\n/\n @public\n /\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n extends UseChipsInputBaseOnlyNeededProps<O>,\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n keyof UseChipsInputBaseProps<O> \| 'defaultChecked'\n >,\n HasRef<HTMLInputElement>,\n HasAlign {\n /\n Ссылка на корневой элемент.\n /\n getRootRef?: React.Ref<HTMLDivElement>;\n /\n Добавляет значение в список на событие `onBlur`.\n /\n addOnBlur?: boolean;\n /\n Render prop функция для возврата своего компонента.\n \n @default Используется [Chip](#/Chip)\n /\n renderChip?: RenderChip<O>;\n /\n Показывать ли кнопку для очистки значения.\n /\n clearButtonShown?: boolean;\n /\n (e2e) testId кнопки очистки.\n /\n clearButtonTestId?: string;\n /\n Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`.\n /\n ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n}\n\n/\n @private\n /\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n extends ChipsInputBaseProps<O>,\n Pick<FormFieldProps, 'mode' \| 'status' \| 'before' \| 'after' \| 'maxHeight'> {\n /\n Обработчик очистки всех выбранных опций.\n /\n onClear: () => void;\n /\n Обработчик добавления новой опции чипа.\n /\n onAddChipOption: (value: string) => void;\n /\n Обработчик удаления опции чипа.\n */\n onRemoveChipOption: (value: O \| ChipOptionValue) => void;\n}\n"],"names":[],"mappings":"AA+LA;;CAEC,GACD,WAeC"}

package/dist/cssm/components/ChipsSelect/ChipsSelect.js CHANGED Viewed

@@ -40,7 +40,7 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
  */ export const ChipsSelect = ({ // FormFieldProps
 id: labelledbyId, getRootRef, className, status = 'default', icon: dropdownIconProp, onChangeStart, // CustomSelectDropdownProps
 options: optionsProp, placement: placementProp = 'bottom', closeAfterSelect = true, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR, emptyText = DEFAULT_EMPTY_TEXT, creatable = false, fetching = false, dropdownAutoWidth, forceDropdownPortal, noMaxHeight = false, filterFn = defaultFilterFn, sortFn = false, dropdownTestId, onClose, onOpen, overscrollBehavior, renderDropdown, // ChipsInputProps
-getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInputValue, disabled, readOnly, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, getNewOptionData = getNewOptionDataDefault, renderChip = renderChipDefault, renderOption = renderOptionDefault, onChange, onFocus: onFocusProp, onInputChange: onInputChangeProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, dropdownOffsetDistance = 0, allowClearButton, clearButtonTestId, ...restProps })=>{
+getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInputValue, disabled, readOnly, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, getNewOptionData = getNewOptionDataDefault, renderChip = renderChipDefault, renderOption = renderOptionDefault, onChange, onFocus: onFocusProp, onInputChange: onInputChangeProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, dropdownOffsetDistance = 0, allowClearButton, clearButtonTestId, delimiter, ...restProps })=>{
     const { // Связано с ChipsInputProps
     // option
     value, addOptionFromInput, addOption, removeOption, clearOptions, // input
@@ -67,11 +67,13 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
         onClose,
         onOpen,
         // other
-        disabled
+        disabled,
+        delimiter
     });
     // Связано с ChipsInputProps
     const rootRef = useExternRef(getRootRef);
     const inputRef = useExternRef(getRef, inputRefHook);
+    const forbidCloseByOutsideClick = React.useRef(false);
     // Связано с CustomSelectDropdownProps
     const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState(placementProp);
     const onDropdownPlacementChange = React.useCallback((placement)=>{
@@ -214,7 +216,10 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
         setFocusedOptionIndex
     ]);
     const handleClickOutside = React.useCallback(()=>{
-        setOpened(false);
+        if (!forbidCloseByOutsideClick.current) {
+            setOpened(false);
+        }
+        forbidCloseByOutsideClick.current = false;
     }, [
         setOpened
     ]);
@@ -268,6 +273,7 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
                         if (!event.defaultPrevented) {
                             closeAfterSelect && setOpened(false);
                             addOption(option);
+                            forbidCloseByOutsideClick.current = true;
                             clearInput();
                         }
                     },

package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type MouseEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) \|\| !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) \|\| !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' \| 'mode' \| 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n placement?: 'top' \| 'bottom';\n /*\n Отрисовка Spinner вместо списка опций в выпадающем списке\n /\n fetching?: boolean;\n /\n Закрытие выпадающего списка после выбора элемента\n /\n closeAfterSelect?: boolean;\n /\n Ширина раскрывающегося списка зависит от контента\n /\n dropdownAutoWidth?: boolean;\n /\n Принудительно использовать портал.\n /\n forceDropdownPortal?: boolean;\n /\n Передает атрибут `data-testid` для дропдауна.\n /\n dropdownTestId?: string;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n /\n addOnBlur?: boolean;\n /\n Отключает максимальную высоту по умолчанию\n /\n noMaxHeight?: boolean;\n\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /\n Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n /\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /\n Событие срабатывающее перед onChange\n /\n onChangeStart?: (event: React.MouseEvent \| React.KeyboardEvent, option: O) => void;\n\n /\n Отступ от выпадающего списка\n /\n dropdownOffsetDistance?: number;\n\n /\n Если `true`, то справа будет отображаться кнопка для очистки значения\n /\n allowClearButton?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsSelect\n /\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' \| 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n / istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) /\n if (!item \|\| !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n / istanbul ignore next: нет представления как воспроизвести /\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number \| null) => {\n if (index === oldIndex) {\n / istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number \| null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented \|\| readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n setOpened(false);\n }, [setOpened]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n if (opened) {\n e.preventDefault();\n setOpened(false);\n }\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) \|\|\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length \|\| !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp \|\| (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnClickOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","styles","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","empty","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","popUp","popDown","clearButtonShown","host","after","onClick","dropdownIcon","dropdownIconWithOffset","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type MouseEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) \|\| !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) \|\| !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' \| 'mode' \| 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n /*\n Расположение выпадающего списка.\n /\n placement?: 'top' \| 'bottom';\n /\n Отрисовка Spinner вместо списка опций в выпадающем списке.\n /\n fetching?: boolean;\n /\n Закрытие выпадающего списка после выбора элемента.\n /\n closeAfterSelect?: boolean;\n /\n Ширина раскрывающегося списка зависит от контента.\n /\n dropdownAutoWidth?: boolean;\n /\n Принудительно использовать портал.\n /\n forceDropdownPortal?: boolean;\n /\n Передает атрибут `data-testid` для дропдауна.\n /\n dropdownTestId?: string;\n /\n Иконка раскрывающегося списка.\n /\n icon?: React.ReactNode;\n /\n Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n /\n addOnBlur?: boolean;\n /\n Отключает максимальную высоту по умолчанию.\n /\n noMaxHeight?: boolean;\n /\n Функция для отрисовки кастомной опции в выпадающем списке.\n /\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /\n Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n /\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /\n Событие срабатывающее перед `onChange`.\n /\n onChangeStart?: (event: React.MouseEvent \| React.KeyboardEvent, option: O) => void;\n\n /\n Отступ от выпадающего списка.\n /\n dropdownOffsetDistance?: number;\n\n /\n Если `true`, то справа будет отображаться кнопка для очистки значения.\n /\n allowClearButton?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ChipsSelect\n /\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n delimiter,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n const forbidCloseByOutsideClick = React.useRef(false);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' \| 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n / istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) /\n if (!item \|\| !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n / istanbul ignore next: нет представления как воспроизвести /\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number \| null) => {\n if (index === oldIndex) {\n / istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number \| null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented \|\| readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n if (!forbidCloseByOutsideClick.current) {\n setOpened(false);\n }\n forbidCloseByOutsideClick.current = false;\n }, [setOpened]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n if (opened) {\n e.preventDefault();\n setOpened(false);\n }\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n forbidCloseByOutsideClick.current = true;\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) \|\|\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length \|\| !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp \|\| (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnClickOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","styles","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","forbidCloseByOutsideClick","useRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","empty","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","popUp","popDown","clearButtonShown","host","after","onClick","dropdownIcon","dropdownIconWithOffset","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}