@vkontakte/vkui 7.2.1 → 7.3.0

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

@@ -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":"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"}
+{"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":"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;AAoCA,MAAMC,OAAOP,SAAS;AAEtB,OAAO,SAASQ,cAAc,EAC5BC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,MAAM,EACNN,aAAa,EACbO,oBAAoB,EACpBC,QAAQ,EACRC,gBAAgBtB,gBAAgB,EAChCuB,gBAAgBrB,gBAAgB,EAChCsB,iBAAiBzB,iBAAiB,EAClC0B,iBAAiBxB,iBAAiB,EAClCyB,oBAAoB5B,2BAA2B,EAC/C,GAAG6B,WACgB;IACnB,MAAMC,WAAWvB,aAAac;IAC9B,MAAMU,WAAWvB;IACjB,MAAM,EAAEwB,OAAOC,aAAa,EAAE,GAAG3B;IAEjCP,MAAMmC,SAAS,CAAC;QACd,MAAMC,qBAAqBpB,kBAAkBqB,YAAYd,uBAAuBP;QAEhF,IAAIe,SAASO,OAAO,EAAE;YACpBxB,iBAAiBiB,SAASO,OAAO,EAAEC,QAAQH;QAC7C;IACF,GAAG;QAACb;QAAsBP;QAAee;KAAS;IAElD,MAAMS,eAAexC,MAAMyC,WAAW,CACpC,CAACC;QACC,IACEnB,yBAAyBc,aACzBrB,kBAAkBqB,aAClBP,UAAUa,OAAO,KAAKN,aACtBN,SAASO,OAAO,EAChB;YACAxB,iBAAiBiB,SAASO,OAAO,EAAE;QACrC;QACA,IAAItB,kBAAkBqB,aAAaN,SAASO,OAAO,EAAE;YACnDxB,iBAAiBiB,SAASO,OAAO,EAAEC,QAAQvB;QAC7C;QACAQ,YAAYA,SAASkB;IACvB,GACA;QAACnB;QAAsBP;QAAec,UAAUa,OAAO;QAAEnB;QAAUO;KAAS;IAG9E,IAAIa,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIvB,wBAAwBO,UAAUiB,cAAc,EAAE;YACpD9B,KAAK,yEAAyE;QAChF;QAEA,IAAID,iBAAiBc,UAAUa,OAAO,EAAE;YACtC1B,KAAK,2DAA2D;QAClE;QAEA,IAAIa,UAAUiB,cAAc,IAAIjB,UAAUa,OAAO,EAAE;YACjD1B,KAAK,4DAA4D;QACnE;IACF;IAEA,qBACE,MAACN;QACCqC,eAAenC,OAAOoC,IAAI;QAC1B9B,WAAWA;QACXC,OAAOA;QACPC,YAAYA;;0BAEZ,KAACT;gBACE,GAAGkB,SAAS;gBACboB,WAAU;gBACVC,MAAK;gBACL3B,UAAUgB;gBACVrB,WAAWN,OAAOuC,KAAK;gBACvB/B,YAAYU;;YAEbC,aAAa,wBACZ,KAACP;gBAAcN,WAAWN,OAAOwC,MAAM;+BAEvC,MAACrD,MAAMsD,QAAQ;;oBACZpB,cAAcqB,OAAO,kBACpB,KAAC9B;wBAAcN,WAAWb,WAAWO,OAAOwC,MAAM,EAAEnB,cAAcqB,OAAO,CAACpC,SAAS;;oBAEpFe,cAAcsB,OAAO,kBACpB,KAAC9B;wBAAcP,WAAWb,WAAWO,OAAOwC,MAAM,EAAEnB,cAAcsB,OAAO,CAACrC,SAAS;;;;YAIxFa,aAAa,wBACZ,KAACL;gBAAeR,WAAWN,OAAO4C,OAAO;+BAEzC,MAACzD,MAAMsD,QAAQ;;oBACZpB,cAAcqB,OAAO,kBACpB,KAAC5B;wBACCR,WAAWb,WAAWO,OAAO4C,OAAO,EAAEvB,cAAcqB,OAAO,CAACpC,SAAS;;oBAGxEe,cAAcsB,OAAO,kBACpB,KAAC5B;wBACCT,WAAWb,WAAWO,OAAO4C,OAAO,EAAEvB,cAAcsB,OAAO,CAACrC,SAAS;;;;YAK5Ea,aAAa,wBACZ,KAACH;gBAAkB6B,OAAO;gBAAIC,QAAQ;gBAAIxC,WAAWN,OAAO+C,iBAAiB;+BAE7E,MAAC5D,MAAMsD,QAAQ;;oBACZpB,cAAcqB,OAAO,kBACpB,KAAC1B;wBACCV,WAAWb,WAAWO,OAAO+C,iBAAiB,EAAE1B,cAAcqB,OAAO,CAACpC,SAAS;wBAC/EuC,OAAO;wBACPC,QAAQ;;oBAGXzB,cAAcsB,OAAO,kBACpB,KAAC3B;wBACCV,WAAWb,WAAWO,OAAO+C,iBAAiB,EAAE1B,cAAcsB,OAAO,CAACrC,SAAS;wBAC/EuC,OAAO;wBACPC,QAAQ;;;;;;AAOtB"}

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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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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"}
+{"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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,mCAAgC;AAC3F,SAASC,0BAA0B,QAAQ,4CAAyC;AACpF,SAASC,kBAAkB,QAA4C,2BAAkB;AACzF,SACEC,mBAAmB,EACnBC,aAAa,EACbC,uBAAuB,EACvBC,qBAAqB,EACrBC,qBAAqB,QAChB,iCAA8B;AACrC,SAASC,2BAA2B,QAAQ,+BAA4B;AAWxE,OAAO,MAAMC,iBAAiB,CAC5BC,OACAC,gBACAC,iBAOAF,MAAMG,GAAG,CAAC,CAACC,SAAY,CAAA;YACrB,GAAGA,MAAM;YACTC,OAAOH,eAAeE;YACtBJ,OAAOC,eAAeG;QACxB,CAAA,GAAI;AAuBN,OAAO,MAAME,gBAAgB,CAAuB,EAClD,SAAS;AACTN,OAAOO,SAAS,EAChBC,eAAed,aAAa,EAC5Be,QAAQ,EACRP,iBAAiBN,qBAAqB,EACtCK,iBAAiBJ,qBAAqB,EACtCa,mBAAmBf,uBAAuB,EAE1C,QAAQ;AACRgB,YAAYC,cAAc,EAC1BC,oBAAoBpB,mBAAmB,EACvCqB,eAAeC,iBAAiB,EAEhC,QAAQ;AACRC,QAAQ,EACRC,SAAS,EACa;IAgBtB,MAAM,CAACjB,OAAOkB,SAAS,GAAG7B,wBAAwB;QAChD2B;QACAhB,OAAOO,YAAYR,eAAeQ,WAAWN,gBAAgBC,kBAAkBiB;QAC/EX,cAAcT,eAAeS,cAAcP,gBAAgBC;QAC3DO;IACF;IAEA,MAAMW,WAAWhC,MAAMiC,MAAM,CAA4D;IACzF,MAAM,CAACV,YAAYW,eAAe,GAAGhC,kBAAkB;QACrD0B;QACAhB,OAAOY;QACPJ,cAAcK;QACdJ,UAAUM;IACZ;IAEA,MAAMQ,eAAgCnC,MAAMoC,WAAW,CACrD,CAACC,gBAA4CC;QAC3CR,SAAS,CAACS;YACR,MAAMC,yBAAyB,IAAIC;YACnC,MAAMC,sBAAsBL,eAAetB,GAAG,CAAC,CAACC;gBAC9C,MAAM2B,qBAAqBjC,4BAA4BM;gBACvD,MAAM4B,iBAAiBD,qBACnBrB,iBAAiBN,OAAOJ,KAAK,EAAEI,OAAOC,KAAK,IAC3CK,iBAAiBN,QAAQ,OAAOA,WAAW,WAAWA,SAAS;gBACnEwB,uBAAuBK,GAAG,CAACD,eAAehC,KAAK;gBAC/C,OAAOgC;YACT;YAEA,MAAME,YAAYP,UAAUQ,MAAM,CAChC,CAAC/B,SAAc,CAACwB,uBAAuBQ,GAAG,CAAChC,OAAOJ,KAAK;YAGzD,IAAI0B,YAAY;gBACdQ,UAAUG,IAAI,IAAIP;YACpB;YAEA,OAAOI;QACT;IACF,GACA;QAAChB;QAAUR;KAAiB;IAG9B,MAAM4B,aAAalD,MAAMoC,WAAW,CAAC;QACnC,sBAAsB,GACtB,IAAI,CAACJ,SAASmB,OAAO,EAAE;YACrB;QACF;QACA/C,mBAAmB4B,SAASmB,OAAO,EAAE;IACvC,GAAG;QAACnB;KAAS;IAEb,MAAMoB,YAAYpD,MAAMoC,WAAW,CACjC,CAACiB,WAAyBlB,aAAa;YAACkB;SAAS,EAAE,OACnD;QAAClB;KAAa;IAGhB,MAAMmB,aAAatD,MAAMoC,WAAW,CAClC,CAACmB,YAAiCpB,aAAaoB,WAAW,OAC1D;QAACpB;KAAa;IAGhB,MAAMqB,eAAexD,MAAMoC,WAAW,CACpC,CAACiB,WAAkClB,aAAa;YAACkB;SAAS,EAAE,QAC5D;QAAClB;KAAa;IAGhB,MAAMsB,qBAAqBzD,MAAMoC,WAAW,CAC1C,CAACb;QACC,MAAMN,QAAQM,WAAWmC,IAAI;QAC7B,IAAIzC,OAAO;YACTmC,UAAUnC;YACViC;QACF;IACF,GACA;QAACE;QAAWF;KAAW;IAGzB,MAAMS,QAAQ3D,MAAMoC,WAAW,CAAC;QAC9BN,SAASV;IACX,GAAG;QAACA;QAAcU;KAAS;IAE3B,MAAM8B,eAAe5D,MAAMoC,WAAW,CAAC;QACrCN,SAASxB;QACT4C;IACF,GAAG;QAACA;QAAYpB;KAAS;IAEzB,MAAMJ,gBAAgB1B,MAAMoC,WAAW,CACrC,CAACyB,GAAwCC,YAAY,IAAI;QACvD,MAAMC,gBAAgBF,EAAEG,MAAM,CAACpD,KAAK;QACpC,IAAI,CAACiB,aAAa,CAACkC,cAAcE,QAAQ,CAACpC,cAAc,CAACiC,WAAW;YAClE5B,eAAe2B;YACf;QACF;QACA,MAAMK,SAASH,cACZL,IAAI,GACJS,KAAK,CAACtC,WACNd,GAAG,CAAC,CAACqD,IAAMA,EAAEV,IAAI,IACjBX,MAAM,CAACsB;QAEVR,EAAEG,MAAM,CAACpD,KAAK,GAAG;QACjBiD,EAAES,aAAa,CAAC1D,KAAK,GAAG;QACxBsB,eAAe2B;QAEfP,WAAWY;IACb,GACA;QAACZ;QAAYzB;QAAWK;KAAe;IAGzC/B,2BAA2B6B,UAAU2B;IAErC,OAAO;QACL/C;QACAwC;QACAK;QACAD;QAEAxB;QACAT;QACAG;QACAwB;QACAU;IACF;AACF,EAAE"}

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

@@ -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<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  onClear: () => void;\n  onAddChipOption: (value: string) => void;\n  onRemoveChipOption: (value: O | ChipOptionValue) => void;\n}\n"],"names":[],"mappings":"AAwHA;;CAEC,GACD,WAMC"}
+{"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

@@ -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,7 +67,8 @@ getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInput
         onClose,
         onOpen,
         // other
-        disabled
+        disabled,
+        delimiter
     });
     // Связано с ChipsInputProps
     const rootRef = useExternRef(getRootRef);

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

@@ -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  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","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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"}
+{"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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"}

package/dist/cssm/components/ChipsSelect/types.js

@@ -1,3 +1,3 @@
-export { };
+/* eslint-disable jsdoc/require-jsdoc */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/cssm/components/ChipsSelect/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsSelect/types.ts"],"sourcesContent":["import type { ChipOption } from '../ChipsInputBase/types';\n\nexport type FocusActionType = 'next' | 'prev';\n\nexport type CreateNewOptionPreset = {\n  actionText: string;\n};\n\nexport type PlaceholderPreset = {\n  placeholder: string;\n};\n\nexport type ServicePreset = CreateNewOptionPreset | PlaceholderPreset;\n\nexport type OptionPreset<O extends ChipOption> = O | ServicePreset;\n"],"names":[],"mappings":"AAcA,WAAmE"}
+{"version":3,"sources":["../../../../src/components/ChipsSelect/types.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport type { ChipOption } from '../ChipsInputBase/types';\n\nexport type FocusActionType = 'next' | 'prev';\n\nexport type CreateNewOptionPreset = {\n  actionText: string;\n};\n\nexport type PlaceholderPreset = {\n  placeholder: string;\n};\n\nexport type ServicePreset = CreateNewOptionPreset | PlaceholderPreset;\n\nexport type OptionPreset<O extends ChipOption> = O | ServicePreset;\n"],"names":[],"mappings":"AAAA,sCAAsC,GAgBtC,WAAmE"}

package/dist/cssm/components/ChipsSelect/useChipsSelect.js

@@ -6,7 +6,7 @@ import { transformValue, useChipsInput } from "../ChipsInput/useChipsInput.js";
 import { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, getNewOptionDataDefault, getOptionLabelDefault, getOptionValueDefault } from "../ChipsInputBase/constants.js";
 import { DEFAULT_EMPTY_TEXT, DEFAULT_SELECTED_BEHAVIOR, isNotServicePreset } from "./constants.js";
 export const useChipsSelect = ({ // common
-disabled, // option
+disabled, delimiter, // option
 value: valueProp, defaultValue, onChange, getOptionLabel = getOptionLabelDefault, getOptionValue = getOptionValueDefault, getNewOptionData = getNewOptionDataDefault, // input
 inputValue: inputValueProp, defaultInputValue = DEFAULT_INPUT_VALUE, onInputChange: onInputChangeProp, // dropdown
 creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, sortFn = false, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR, options: optionsProp = DEFAULT_VALUE, onClose, onOpen })=>{
@@ -23,7 +23,8 @@ creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, s
         defaultInputValue,
         onInputChange: onInputChangeProp,
         // other
-        disabled
+        disabled,
+        delimiter
     });
     // dropdown
     const [opened, setOpened] = React.useState(false);
@@ -49,13 +50,14 @@ creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, s
         onClose
     ]);
     const handleInputChange = React.useCallback((event)=>{
-        onInputChange(event);
+        onInputChange(event, !!creatable);
         if (!opened) {
             handleOpened(true);
             setFocusedOptionIndex(0);
         }
     }, [
         onInputChange,
+        creatable,
         opened,
         handleOpened
     ]);

package/dist/cssm/components/ChipsSelect/useChipsSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsSelect/useChipsSelect.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\nimport { type SimulateReactInputTargetState } from '../../lib/react';\nimport { defaultFilterFn, type FilterFn, type SortFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n  transformValue,\n  useChipsInput,\n  type UseChipsInputProps,\n} from '../ChipsInput/useChipsInput';\nimport {\n  DEFAULT_INPUT_VALUE,\n  DEFAULT_VALUE,\n  getNewOptionDataDefault,\n  getOptionLabelDefault,\n  getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipOptionLabel, ChipOptionValue } from '../ChipsInputBase/types';\nimport { DEFAULT_EMPTY_TEXT, DEFAULT_SELECTED_BEHAVIOR, isNotServicePreset } from './constants';\nimport type { OptionPreset } from './types';\n\nexport interface UseChipsSelectProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputProps<O> {\n  options?: O[];\n  /**\n   * Возможность создавать чипы которых нет в списке:\n   * - `true` – добавление по кнопке Enter;\n   * - `<текст>` – помимо возможности добавления через Enter, в пункте меню появится кнопка с текстом.\n   * Текст для пункта, создающего чипы при клике, также отвечает за то, будет ли показан этот пункт\n   * (показывается после того как в списке не останется опций).\n   */\n  creatable?: boolean | string;\n  /**\n   * Текст, который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Показывать или скрывать уже выбранные опции.\n   */\n  selectedBehavior?: 'hide' | 'highlight';\n  filterFn?: false | FilterFn<O>;\n  sortFn?: false | SortFn<O>;\n  /**\n   * Будет вызвано в момент скрытия выпадающего списка\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано в момент открытия выпадающего списка\n   */\n  onOpen?: VoidFunction;\n}\n\nexport const useChipsSelect = <O extends ChipOption>({\n  // common\n  disabled,\n\n  // option\n  value: valueProp,\n  defaultValue,\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  // dropdown\n  creatable = false,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  filterFn = defaultFilterFn,\n  sortFn = false,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n  options: optionsProp = DEFAULT_VALUE,\n  onClose,\n  onOpen,\n}: UseChipsSelectProps<O>): {\n  // options\n  value: Array<\n    O & {\n      label: ChipOptionLabel;\n      value: ChipOptionValue;\n    }\n  >;\n  // input\n  inputValue: string;\n  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  // dropdown states\n  options: Array<OptionPreset<O>>;\n  opened: boolean;\n  setOpened: (isOpened: boolean) => void;\n  focusedOption: O | null;\n  focusedOptionIndex: number | null;\n  setFocusedOption: React.Dispatch<React.SetStateAction<O | null>>;\n  setFocusedOptionIndex: React.Dispatch<React.SetStateAction<number | null>>;\n  addOption: (newValue: string | O) => void;\n  addOptionFromInput: (inputValue: string) => void;\n  removeOption: (newValue: ChipOptionValue | O) => void;\n  clearOptions: () => void;\n  inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) | null>;\n  clearInput: () => void;\n} => {\n  const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({\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    // other\n    disabled,\n  });\n\n  // dropdown\n  const [opened, setOpened] = React.useState(false);\n  const [options, setOptions] = React.useState<Array<OptionPreset<O>>>(() =>\n    opened\n      ? transformOptions({\n          value,\n          getOptionValue,\n          getOptionLabel,\n          inputValue,\n          emptyText,\n          creatable,\n          filterFn,\n          sortFn,\n          options: optionsProp,\n          selectedBehavior,\n        })\n      : [],\n  );\n  const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | null>(0);\n  const [focusedOption, setFocusedOption] = React.useState<O | null>(null);\n\n  const handleOpened = React.useCallback(\n    (isOpened: boolean) => {\n      isOpened ? onOpen?.() : onClose?.();\n      setOpened(isOpened);\n    },\n    [onOpen, onClose],\n  );\n\n  const handleInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onInputChange(event);\n\n      if (!opened) {\n        handleOpened(true);\n        setFocusedOptionIndex(0);\n      }\n    },\n    [onInputChange, opened, handleOpened],\n  );\n\n  useIsomorphicLayoutEffect(\n    function handleDropdownOpen() {\n      if (!opened) {\n        return;\n      }\n\n      setOptions((prevOptions) => {\n        const nextOptions = transformOptions({\n          value,\n          getOptionValue,\n          getOptionLabel,\n          inputValue,\n          emptyText,\n          creatable,\n          filterFn,\n          sortFn,\n          options: optionsProp,\n          selectedBehavior,\n        });\n\n        if (isEqual(prevOptions, nextOptions)) {\n          return prevOptions;\n        }\n\n        return nextOptions;\n      });\n    },\n    [\n      opened,\n      value,\n      getOptionLabel,\n      getOptionValue,\n      inputValue,\n      optionsProp,\n      creatable,\n      selectedBehavior,\n      filterFn,\n      sortFn,\n    ],\n  );\n\n  return {\n    ...restChipsInputProps,\n\n    // options\n    value,\n\n    // input\n    inputValue,\n    onInputChange: handleInputChange,\n\n    // dropdown states\n    options,\n    opened,\n    setOpened: handleOpened,\n    focusedOption,\n    focusedOptionIndex,\n    setFocusedOption,\n    setFocusedOptionIndex,\n  };\n};\n\nfunction transformOptions<O extends ChipOption>({\n  value,\n  getOptionValue = getOptionValueDefault,\n  getOptionLabel = getOptionLabelDefault,\n  inputValue = DEFAULT_INPUT_VALUE,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  creatable = false,\n  sortFn = false,\n  filterFn = defaultFilterFn,\n  options: optionsProp = DEFAULT_VALUE,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n}: Required<Pick<UseChipsSelectProps<O>, 'value'>> &\n  Pick<\n    UseChipsSelectProps<O>,\n    | 'getOptionValue'\n    | 'getOptionLabel'\n    | 'inputValue'\n    | 'emptyText'\n    | 'creatable'\n    | 'filterFn'\n    | 'sortFn'\n    | 'options'\n    | 'selectedBehavior'\n  >) {\n  const filteredOptionsProp = filterFn\n    ? optionsProp.filter((option) => filterFn(inputValue, option, getOptionLabel))\n    : optionsProp;\n\n  if (filteredOptionsProp.length === 0) {\n    if (inputValue !== DEFAULT_INPUT_VALUE && typeof creatable === 'string') {\n      return [{ actionText: creatable }];\n    }\n    return [{ placeholder: emptyText }];\n  }\n\n  if (sortFn) {\n    filteredOptionsProp.sort((optionA, optionB) => sortFn(optionA, optionB, inputValue));\n  }\n\n  const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);\n\n  if (selectedBehavior === 'hide') {\n    const selected = value.map((item) => item.value);\n    return parsedOptions.filter((item) =>\n      isNotServicePreset(item) ? !selected.includes(item.value) : false,\n    );\n  }\n  return parsedOptions;\n}\n"],"names":["React","isEqual","defaultFilterFn","useIsomorphicLayoutEffect","transformValue","useChipsInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","isNotServicePreset","useChipsSelect","disabled","value","valueProp","defaultValue","onChange","getOptionLabel","getOptionValue","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","onInputChangeProp","creatable","emptyText","filterFn","sortFn","selectedBehavior","options","optionsProp","onClose","onOpen","restChipsInputProps","opened","setOpened","useState","setOptions","transformOptions","focusedOptionIndex","setFocusedOptionIndex","focusedOption","setFocusedOption","handleOpened","useCallback","isOpened","handleInputChange","event","handleDropdownOpen","prevOptions","nextOptions","filteredOptionsProp","filter","option","length","actionText","placeholder","sort","optionA","optionB","parsedOptions","selected","map","item","includes"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ChipsSelect/useChipsSelect.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\nimport { type SimulateReactInputTargetState } from '../../lib/react';\nimport { defaultFilterFn, type FilterFn, type SortFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n  transformValue,\n  useChipsInput,\n  type UseChipsInputProps,\n} from '../ChipsInput/useChipsInput';\nimport {\n  DEFAULT_INPUT_VALUE,\n  DEFAULT_VALUE,\n  getNewOptionDataDefault,\n  getOptionLabelDefault,\n  getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipOptionLabel, ChipOptionValue } from '../ChipsInputBase/types';\nimport { DEFAULT_EMPTY_TEXT, DEFAULT_SELECTED_BEHAVIOR, isNotServicePreset } from './constants';\nimport type { OptionPreset } from './types';\n\nexport interface UseChipsSelectProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputProps<O> {\n  /**\n   * Список опций в выпадающем списке.\n   */\n  options?: O[];\n  /**\n   * Возможность создавать чипы которых нет в списке:\n   * - `true` – добавление по кнопке Enter;\n   * - `<текст>` – помимо возможности добавления через Enter, в пункте меню появится кнопка с текстом.\n   * Текст для пункта, создающего чипы при нажатии, также отвечает за то, будет ли показан этот пункт\n   * (показывается после того как в списке не останется опций).\n   */\n  creatable?: boolean | string;\n  /**\n   * Текст, который показывается если список опций пуст.\n   */\n  emptyText?: string;\n  /**\n   * Показывать или скрывать уже выбранные опции.\n   */\n  selectedBehavior?: 'hide' | 'highlight';\n  /**\n   * Функция для фильтрации опций в списке.\n   */\n  filterFn?: false | FilterFn<O>;\n  /**\n   * Функция для сортировки опций в списке.\n   */\n  sortFn?: false | SortFn<O>;\n  /**\n   * Будет вызвано в момент скрытия выпадающего списка.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано в момент открытия выпадающего списка.\n   */\n  onOpen?: VoidFunction;\n}\n\nexport const useChipsSelect = <O extends ChipOption>({\n  // common\n  disabled,\n  delimiter,\n\n  // option\n  value: valueProp,\n  defaultValue,\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  // dropdown\n  creatable = false,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  filterFn = defaultFilterFn,\n  sortFn = false,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n  options: optionsProp = DEFAULT_VALUE,\n  onClose,\n  onOpen,\n}: UseChipsSelectProps<O>): {\n  // options\n  value: Array<\n    O & {\n      label: ChipOptionLabel;\n      value: ChipOptionValue;\n    }\n  >;\n  // input\n  inputValue: string;\n  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  // dropdown states\n  options: Array<OptionPreset<O>>;\n  opened: boolean;\n  setOpened: (isOpened: boolean) => void;\n  focusedOption: O | null;\n  focusedOptionIndex: number | null;\n  setFocusedOption: React.Dispatch<React.SetStateAction<O | null>>;\n  setFocusedOptionIndex: React.Dispatch<React.SetStateAction<number | null>>;\n  addOption: (newValue: string | O) => void;\n  addOptionFromInput: (inputValue: string) => void;\n  removeOption: (newValue: ChipOptionValue | O) => void;\n  clearOptions: () => void;\n  inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) | null>;\n  clearInput: () => void;\n} => {\n  const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({\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    // other\n    disabled,\n    delimiter,\n  });\n\n  // dropdown\n  const [opened, setOpened] = React.useState(false);\n  const [options, setOptions] = React.useState<Array<OptionPreset<O>>>(() =>\n    opened\n      ? transformOptions({\n          value,\n          getOptionValue,\n          getOptionLabel,\n          inputValue,\n          emptyText,\n          creatable,\n          filterFn,\n          sortFn,\n          options: optionsProp,\n          selectedBehavior,\n        })\n      : [],\n  );\n  const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | null>(0);\n  const [focusedOption, setFocusedOption] = React.useState<O | null>(null);\n\n  const handleOpened = React.useCallback(\n    (isOpened: boolean) => {\n      isOpened ? onOpen?.() : onClose?.();\n      setOpened(isOpened);\n    },\n    [onOpen, onClose],\n  );\n\n  const handleInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onInputChange(event, !!creatable);\n\n      if (!opened) {\n        handleOpened(true);\n        setFocusedOptionIndex(0);\n      }\n    },\n    [onInputChange, creatable, opened, handleOpened],\n  );\n\n  useIsomorphicLayoutEffect(\n    function handleDropdownOpen() {\n      if (!opened) {\n        return;\n      }\n\n      setOptions((prevOptions) => {\n        const nextOptions = transformOptions({\n          value,\n          getOptionValue,\n          getOptionLabel,\n          inputValue,\n          emptyText,\n          creatable,\n          filterFn,\n          sortFn,\n          options: optionsProp,\n          selectedBehavior,\n        });\n\n        if (isEqual(prevOptions, nextOptions)) {\n          return prevOptions;\n        }\n\n        return nextOptions;\n      });\n    },\n    [\n      opened,\n      value,\n      getOptionLabel,\n      getOptionValue,\n      inputValue,\n      optionsProp,\n      creatable,\n      selectedBehavior,\n      filterFn,\n      sortFn,\n    ],\n  );\n\n  return {\n    ...restChipsInputProps,\n\n    // options\n    value,\n\n    // input\n    inputValue,\n    onInputChange: handleInputChange,\n\n    // dropdown states\n    options,\n    opened,\n    setOpened: handleOpened,\n    focusedOption,\n    focusedOptionIndex,\n    setFocusedOption,\n    setFocusedOptionIndex,\n  };\n};\n\nfunction transformOptions<O extends ChipOption>({\n  value,\n  getOptionValue = getOptionValueDefault,\n  getOptionLabel = getOptionLabelDefault,\n  inputValue = DEFAULT_INPUT_VALUE,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  creatable = false,\n  sortFn = false,\n  filterFn = defaultFilterFn,\n  options: optionsProp = DEFAULT_VALUE,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n}: Required<Pick<UseChipsSelectProps<O>, 'value'>> &\n  Pick<\n    UseChipsSelectProps<O>,\n    | 'getOptionValue'\n    | 'getOptionLabel'\n    | 'inputValue'\n    | 'emptyText'\n    | 'creatable'\n    | 'filterFn'\n    | 'sortFn'\n    | 'options'\n    | 'selectedBehavior'\n  >) {\n  const filteredOptionsProp = filterFn\n    ? optionsProp.filter((option) => filterFn(inputValue, option, getOptionLabel))\n    : optionsProp;\n\n  if (filteredOptionsProp.length === 0) {\n    if (inputValue !== DEFAULT_INPUT_VALUE && typeof creatable === 'string') {\n      return [{ actionText: creatable }];\n    }\n    return [{ placeholder: emptyText }];\n  }\n\n  if (sortFn) {\n    filteredOptionsProp.sort((optionA, optionB) => sortFn(optionA, optionB, inputValue));\n  }\n\n  const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);\n\n  if (selectedBehavior === 'hide') {\n    const selected = value.map((item) => item.value);\n    return parsedOptions.filter((item) =>\n      isNotServicePreset(item) ? !selected.includes(item.value) : false,\n    );\n  }\n  return parsedOptions;\n}\n"],"names":["React","isEqual","defaultFilterFn","useIsomorphicLayoutEffect","transformValue","useChipsInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","isNotServicePreset","useChipsSelect","disabled","delimiter","value","valueProp","defaultValue","onChange","getOptionLabel","getOptionValue","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","onInputChangeProp","creatable","emptyText","filterFn","sortFn","selectedBehavior","options","optionsProp","onClose","onOpen","restChipsInputProps","opened","setOpened","useState","setOptions","transformOptions","focusedOptionIndex","setFocusedOptionIndex","focusedOption","setFocusedOption","handleOpened","useCallback","isOpened","handleInputChange","event","handleDropdownOpen","prevOptions","nextOptions","filteredOptionsProp","filter","option","length","actionText","placeholder","sort","optionA","optionB","parsedOptions","selected","map","item","includes"],"mappings":"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"}

package/dist/cssm/components/Clickable/Clickable.js

@@ -10,12 +10,12 @@ import styles from "./Clickable.module.css";
         ...restProps
     });
 /**
- * Проверяем, является ли компонент кликабельным
+ * Проверяем, является ли компонент кликабельным.
  */ export function checkClickable(props) {
     return (props.href !== undefined || props.onClick !== undefined || props.onClickCapture !== undefined || props.Component === 'a' || props.Component === 'button' || props.Component === 'label' || props.Component === 'input') && !props.disabled;
 }
 /**
- * Определяет правильный компонент и его свойства
+ * Определяет правильный компонент и его свойства.
  *
  * - если передан Component, используем его
  * - при передаче `href` превратится в `a`,
@@ -34,9 +34,10 @@ import styles from "./Clickable.module.css";
        * Если ссылка отключена, добавляем атрибуты для доступности.
        *
        * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`
-       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role="link"`
+       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role="link"`.
+       *
+       * @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.
        *
-       * https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria
        */ ...disabled && {
                 'aria-disabled': true,
                 'role': 'link'
@@ -65,7 +66,7 @@ import styles from "./Clickable.module.css";
  * Отвечает за:
  *
  * - стейты наведения и нажатия
- * - a11y компонентов
+ * - a11y компонентов.
  */ export const Clickable = (props)=>{
     const commonProps = component(props);
     const isClickable = checkClickable(props);