@vkontakte/vkui 7.8.2 → 7.9.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  /**\n   * Неопределенное состояние чекбокса.\n   */\n  indeterminate?: boolean;\n  /**\n   * Неопределенное состояние чекбокса по умолчанию.\n   */\n  defaultIndeterminate?: boolean;\n  /**\n   * Иконка для включенного состояния в компактном режиме.\n   */\n  IconOnCompact?: CheckboxInputIconType;\n  /**\n   * Иконка для включенного состояния в обычном режиме.\n   */\n  IconOnRegular?: CheckboxInputIconType;\n  /**\n   * Иконка для выключенного состояния в компактном режиме.\n   */\n  IconOffCompact?: CheckboxInputIconType;\n  /**\n   * Иконка для выключенного состояния в обычном режиме.\n   */\n  IconOffRegular?: CheckboxInputIconType;\n  /**\n   * Иконка для неопределенного состояния.\n   */\n  IconIndeterminate?: CheckboxInputIconType;\n}\n\nconst warn = warnOnce('Checkbox');\n\nexport function CheckboxInput({\n  className,\n  style,\n  getRootRef,\n  getRef,\n  indeterminate,\n  defaultIndeterminate,\n  onChange,\n  IconOnCompact = Icon20CheckBoxOn,\n  IconOnRegular = Icon24CheckBoxOn,\n  IconOffCompact = Icon20CheckBoxOff,\n  IconOffRegular = Icon24CheckBoxOff,\n  IconIndeterminate = Icon20CheckBoxIndetermanate,\n  ...restProps\n}: CheckboxInputProps) {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      setIndeterminate(inputRef.current, Boolean(indeterminateValue));\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        setIndeterminate(inputRef.current, false);\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        setIndeterminate(inputRef.current, Boolean(indeterminate));\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <RootComponent\n      baseClassName={styles.host}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles.input}\n        getRootRef={inputRef}\n      />\n      {platform === 'vkcom' ? (\n        <IconOnCompact className={styles.iconOn} />\n      ) : (\n        <React.Fragment>\n          {adaptiveSizeY.compact && (\n            <IconOnCompact className={classNames(styles.iconOn, adaptiveSizeY.compact.className)} />\n          )}\n          {adaptiveSizeY.regular && (\n            <IconOnRegular className={classNames(styles.iconOn, adaptiveSizeY.regular.className)} />\n          )}\n        </React.Fragment>\n      )}\n      {platform === 'vkcom' ? (\n        <IconOffCompact className={styles.iconOff} />\n      ) : (\n        <React.Fragment>\n          {adaptiveSizeY.compact && (\n            <IconOffCompact\n              className={classNames(styles.iconOff, adaptiveSizeY.compact.className)}\n            />\n          )}\n          {adaptiveSizeY.regular && (\n            <IconOffRegular\n              className={classNames(styles.iconOff, adaptiveSizeY.regular.className)}\n            />\n          )}\n        </React.Fragment>\n      )}\n      {platform === 'vkcom' ? (\n        <IconIndeterminate width={20} height={20} className={styles.iconIndeterminate} />\n      ) : (\n        <React.Fragment>\n          {adaptiveSizeY.compact && (\n            <IconIndeterminate\n              className={classNames(styles.iconIndeterminate, adaptiveSizeY.compact.className)}\n              width={20}\n              height={20}\n            />\n          )}\n          {adaptiveSizeY.regular && (\n            <IconIndeterminate\n              className={classNames(styles.iconIndeterminate, adaptiveSizeY.regular.className)}\n              width={24}\n              height={24}\n            />\n          )}\n        </React.Fragment>\n      )}\n    </RootComponent>\n  );\n}\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","useAdaptivityConditionalRender","useExternRef","usePlatform","warnOnce","RootComponent","VisuallyHidden","styles","setIndeterminate","el","indeterminate","warn","CheckboxInput","className","style","getRootRef","getRef","defaultIndeterminate","onChange","IconOnCompact","IconOnRegular","IconOffCompact","IconOffRegular","IconIndeterminate","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","baseClassName","host","Component","type","input","iconOn","Fragment","compact","regular","iconOff","width","height","iconIndeterminate"],"mappings":"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"}
+{"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 { useMergeProps } from '../../../hooks/useMergeProps';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport type { HasDataAttribute, 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  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `input`: свойства для прокидывания в скрытый `input`.\n   */\n  slotProps?: {\n    root?: Omit<React.HTMLAttributes<HTMLElement>, 'children'> &\n      HasRootRef<HTMLElement> &\n      HasDataAttribute;\n    input?: React.ComponentProps<'input'> & HasRootRef<HTMLInputElement> & HasDataAttribute;\n  };\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\n  indeterminate,\n  defaultIndeterminate,\n  IconOnCompact = Icon20CheckBoxOn,\n  IconOnRegular = Icon24CheckBoxOn,\n  IconOffCompact = Icon20CheckBoxOff,\n  IconOffRegular = Icon24CheckBoxOff,\n  IconIndeterminate = Icon20CheckBoxIndetermanate,\n\n  slotProps,\n  ...restProps\n}: CheckboxInputProps) {\n  const rootRest = useMergeProps(\n    {\n      className,\n      style,\n      getRootRef,\n    },\n    slotProps?.root,\n  );\n\n  const {\n    onChange,\n    getRootRef: getInputRef,\n    ...inputRest\n  } = useMergeProps({ getRootRef: getRef, ...restProps }, slotProps?.input);\n\n  const inputRef = useExternRef<HTMLInputElement>(getInputRef);\n\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        inputRest.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, inputRest.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore if: не проверяем в тестах */\n    if (getRef) {\n      warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');\n    }\n\n    if (defaultIndeterminate && inputRest.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && inputRest.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (inputRest.defaultChecked && inputRest.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <RootComponent baseClassName={styles.host} {...rootRest}>\n      <VisuallyHidden\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        getRootRef={inputRef}\n        baseClassName={styles.input}\n        {...inputRest}\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","useMergeProps","usePlatform","warnOnce","RootComponent","VisuallyHidden","styles","setIndeterminate","el","indeterminate","warn","CheckboxInput","className","style","getRootRef","getRef","defaultIndeterminate","IconOnCompact","IconOnRegular","IconOffCompact","IconOffRegular","IconIndeterminate","slotProps","restProps","rootRest","root","onChange","getInputRef","inputRest","input","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","baseClassName","host","Component","type","iconOn","Fragment","compact","regular","iconOff","width","height","iconIndeterminate"],"mappings":"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"}

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../../hooks/useAdaptivity.js";
+import { useMergeProps } from "../../../hooks/useMergeProps.js";
 import { Tappable } from "../../Tappable/Tappable.js";
 import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
 import styles from "./CheckboxSimple.module.css";
@@ -9,23 +10,40 @@ const sizeYClassNames = {
     none: styles.sizeYNone,
     compact: styles.sizeYCompact
 };
-export function CheckboxSimple({ children, className, style, getRootRef, description, hoverMode: hoverModeProp, activeMode: activeModeProp, hasHover, hasActive, focusVisibleMode, titleAfter, noPadding, ...restProps }) {
+export function CheckboxSimple({ children, className, style, getRootRef, getRef, description, hoverMode: hoverModeProp, activeMode: activeModeProp, hasHover, hasActive, focusVisibleMode, titleAfter, noPadding, indeterminate, defaultIndeterminate, IconOnCompact, IconOnRegular, IconOffCompact, IconOffRegular, IconIndeterminate, slotProps, ...restProps }) {
+    const rootRest = useMergeProps({
+        className,
+        style,
+        getRootRef
+    }, slotProps?.root);
+    const inputRest = useMergeProps({
+        getRootRef: getRef,
+        ...restProps
+    }, slotProps?.input);
     const { sizeY = 'none' } = useAdaptivity();
     const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');
     const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');
     return /*#__PURE__*/ _jsx(Tappable, {
-        className: classNames(className, styles.host, !noPadding && styles.withPadding, sizeY !== 'regular' && sizeYClassNames[sizeY]),
-        style: style,
-        disabled: restProps.disabled,
-        getRootRef: getRootRef,
+        baseClassName: classNames(styles.host, !noPadding && styles.withPadding, sizeY !== 'regular' && sizeYClassNames[sizeY]),
+        disabled: inputRest.disabled,
         hoverMode: hoverMode,
         activeMode: activeMode,
         hasHover: hasHover,
         hasActive: hasActive,
         focusVisibleMode: focusVisibleMode,
         Component: "label",
+        ...rootRest,
         children: /*#__PURE__*/ _jsx(CheckboxInput, {
-            ...restProps
+            indeterminate: indeterminate,
+            defaultIndeterminate: defaultIndeterminate,
+            IconIndeterminate: IconIndeterminate,
+            IconOnCompact: IconOnCompact,
+            IconOnRegular: IconOnRegular,
+            IconOffCompact: IconOffCompact,
+            IconOffRegular: IconOffRegular,
+            slotProps: {
+                input: inputRest
+            }
         })
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { Tappable } from '../../Tappable/Tappable';\nimport type { CheckboxProps } from '../Checkbox';\nimport { CheckboxInput } from '../CheckboxInput/CheckboxInput';\nimport styles from './CheckboxSimple.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function CheckboxSimple({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode: hoverModeProp,\n  activeMode: activeModeProp,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  noPadding,\n  ...restProps\n}: CheckboxProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');\n  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');\n\n  return (\n    <Tappable\n      className={classNames(\n        className,\n        styles.host,\n        !noPadding && styles.withPadding,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      Component=\"label\"\n    >\n      <CheckboxInput {...restProps} />\n    </Tappable>\n  );\n}\n"],"names":["classNames","useAdaptivity","Tappable","CheckboxInput","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","CheckboxSimple","children","className","style","getRootRef","description","hoverMode","hoverModeProp","activeMode","activeModeProp","hasHover","hasActive","focusVisibleMode","titleAfter","noPadding","restProps","sizeY","host","withPadding","disabled","Component"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,6BAA0B;AAEnD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,SAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAMe,YAAYC,iBAAkBO,CAAAA,YAAY,YAAY,YAAW;IACvE,MAAMN,aAAaC,kBAAmBK,CAAAA,YAAY,YAAY,YAAW;IAEzE,qBACE,KAACtB;QACCU,WAAWZ,WACTY,WACAR,OAAOuB,IAAI,EACX,CAACH,aAAapB,OAAOwB,WAAW,EAChCF,UAAU,aAAarB,eAAe,CAACqB,MAAM;QAE/Cb,OAAOA;QACPgB,UAAUJ,UAAUI,QAAQ;QAC5Bf,YAAYA;QACZE,WAAWA;QACXE,YAAYA;QACZE,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBQ,WAAU;kBAEV,cAAA,KAAC3B;YAAe,GAAGsB,SAAS;;;AAGlC"}
+{"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useMergeProps } from '../../../hooks/useMergeProps';\nimport { Tappable } from '../../Tappable/Tappable';\nimport type { CheckboxProps } from '../Checkbox';\nimport { CheckboxInput } from '../CheckboxInput/CheckboxInput';\nimport styles from './CheckboxSimple.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function CheckboxSimple({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  hoverMode: hoverModeProp,\n  activeMode: activeModeProp,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  noPadding,\n\n  indeterminate,\n  defaultIndeterminate,\n  IconOnCompact,\n  IconOnRegular,\n  IconOffCompact,\n  IconOffRegular,\n  IconIndeterminate,\n\n  slotProps,\n  ...restProps\n}: CheckboxProps) {\n  const rootRest = useMergeProps(\n    {\n      className,\n      style,\n      getRootRef,\n    },\n    slotProps?.root,\n  );\n\n  const inputRest = useMergeProps({ getRootRef: getRef, ...restProps }, slotProps?.input);\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');\n  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');\n\n  return (\n    <Tappable\n      baseClassName={classNames(\n        styles.host,\n        !noPadding && styles.withPadding,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      disabled={inputRest.disabled}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      Component=\"label\"\n      {...rootRest}\n    >\n      <CheckboxInput\n        indeterminate={indeterminate}\n        defaultIndeterminate={defaultIndeterminate}\n        IconIndeterminate={IconIndeterminate}\n        IconOnCompact={IconOnCompact}\n        IconOnRegular={IconOnRegular}\n        IconOffCompact={IconOffCompact}\n        IconOffRegular={IconOffRegular}\n        slotProps={{ input: inputRest }}\n      />\n    </Tappable>\n  );\n}\n"],"names":["classNames","useAdaptivity","useMergeProps","Tappable","CheckboxInput","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","CheckboxSimple","children","className","style","getRootRef","getRef","description","hoverMode","hoverModeProp","activeMode","activeModeProp","hasHover","hasActive","focusVisibleMode","titleAfter","noPadding","indeterminate","defaultIndeterminate","IconOnCompact","IconOnRegular","IconOffCompact","IconOffRegular","IconIndeterminate","slotProps","restProps","rootRest","root","inputRest","input","sizeY","baseClassName","host","withPadding","disabled","Component"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,6BAA0B;AAEnD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,MAAM,EACNC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,SAAS,EAETC,aAAa,EACbC,oBAAoB,EACpBC,aAAa,EACbC,aAAa,EACbC,cAAc,EACdC,cAAc,EACdC,iBAAiB,EAEjBC,SAAS,EACT,GAAGC,WACW;IACd,MAAMC,WAAWlC,cACf;QACEW;QACAC;QACAC;IACF,GACAmB,WAAWG;IAGb,MAAMC,YAAYpC,cAAc;QAAEa,YAAYC;QAAQ,GAAGmB,SAAS;IAAC,GAAGD,WAAWK;IAEjF,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGvC;IAE3B,MAAMiB,YAAYC,iBAAkBO,CAAAA,YAAY,YAAY,YAAW;IACvE,MAAMN,aAAaC,kBAAmBK,CAAAA,YAAY,YAAY,YAAW;IAEzE,qBACE,KAACvB;QACCsC,eAAezC,WACbK,OAAOqC,IAAI,EACX,CAAChB,aAAarB,OAAOsC,WAAW,EAChCH,UAAU,aAAalC,eAAe,CAACkC,MAAM;QAE/CI,UAAUN,UAAUM,QAAQ;QAC5B1B,WAAWA;QACXE,YAAYA;QACZE,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBqB,WAAU;QACT,GAAGT,QAAQ;kBAEZ,cAAA,KAAChC;YACCuB,eAAeA;YACfC,sBAAsBA;YACtBK,mBAAmBA;YACnBJ,eAAeA;YACfC,eAAeA;YACfC,gBAAgBA;YAChBC,gBAAgBA;YAChBE,WAAW;gBAAEK,OAAOD;YAAU;;;AAItC"}

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

@@ -1,14 +1,22 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useExternRef } from "../../hooks/useExternRef.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { ChipsInputBase } from "../ChipsInputBase/ChipsInputBase.js";
 import { useChipsInput } from "./useChipsInput.js";
 /**
  * @see https://vkui.io/components/chips-input
  */ export const ChipsInput = ({ // option
 value: valueProp, defaultValue, onChange, // input
-getRef, inputValue: inputValueProp, defaultInputValue: inputDefaultValueProp, onInputChange: onInputChangeProp, getOptionValue, getOptionLabel, getNewOptionData, // other
-disabled, allowClearButton, delimiter, ...restProps })=>{
+getRef, inputValue: inputValueProp, defaultInputValue: defaultInputValueProp, onInputChange: onInputChangeProp, getOptionValue, getOptionLabel, getNewOptionData, // other
+disabled: disabledProp, allowClearButton, delimiter, slotProps, ...restProps })=>{
+    const { getRootRef: getInputRef, value: resolvedInputValue, defaultValue: resolvedInputDefaultValue, onChange: resolvedOnInputChange, disabled, ...inputRest } = useMergeProps({
+        getRootRef: getRef,
+        value: inputValueProp,
+        defaultValue: defaultInputValueProp,
+        onChange: onInputChangeProp,
+        disabled: disabledProp
+    }, slotProps?.input);
     const { value, addOptionFromInput, removeOption, clearOptions, // input
     inputRef: inputRefHook, inputValue, onInputChange } = useChipsInput({
         // option
@@ -19,25 +27,31 @@ disabled, allowClearButton, delimiter, ...restProps })=>{
         getOptionValue,
         getNewOptionData,
         // input
-        inputValue: inputValueProp,
-        defaultInputValue: inputDefaultValueProp,
-        onInputChange: onInputChangeProp,
+        inputValue: resolvedInputValue,
+        defaultInputValue: resolvedInputDefaultValue,
+        onInputChange: resolvedOnInputChange,
         // other
         disabled,
         delimiter
     });
-    const inputRef = useExternRef(getRef, inputRefHook);
+    const inputRef = useExternRef(getInputRef, inputRefHook);
     return /*#__PURE__*/ _jsx(ChipsInputBase, {
-        ...restProps,
-        disabled: disabled,
         value: value,
         clearButtonShown: allowClearButton && (!!value.length || !!inputValue.length),
         onAddChipOption: addOptionFromInput,
         onRemoveChipOption: removeOption,
         onClear: clearOptions,
-        getRef: inputRef,
-        inputValue: inputValue,
-        onInputChange: onInputChange
+        slotProps: {
+            ...slotProps,
+            input: {
+                getRootRef: inputRef,
+                value: inputValue,
+                onChange: onInputChange,
+                disabled,
+                ...inputRest
+            }
+        },
+        ...restProps
     });
 };
 

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://vkui.io/components/chips-input\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"}
+{"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["'use client';\n\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\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://vkui.io/components/chips-input\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: defaultInputValueProp,\n  onInputChange: onInputChangeProp,\n  getOptionValue,\n  getOptionLabel,\n  getNewOptionData,\n\n  // other\n  disabled: disabledProp,\n  allowClearButton,\n  delimiter,\n\n  slotProps,\n  ...restProps\n}: ChipsInputProps<Option>): React.ReactNode => {\n  const {\n    getRootRef: getInputRef,\n    value: resolvedInputValue,\n    defaultValue: resolvedInputDefaultValue,\n    onChange: resolvedOnInputChange,\n    disabled,\n    ...inputRest\n  } = useMergeProps(\n    {\n      getRootRef: getRef,\n      value: inputValueProp,\n      defaultValue: defaultInputValueProp,\n      onChange: onInputChangeProp,\n      disabled: disabledProp,\n    },\n    slotProps?.input,\n  );\n\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: resolvedInputValue as string,\n    defaultInputValue: resolvedInputDefaultValue as string,\n    onInputChange: resolvedOnInputChange,\n\n    // other\n    disabled,\n    delimiter,\n  });\n  const inputRef = useExternRef(getInputRef, inputRefHook);\n\n  return (\n    <ChipsInputBase\n      value={value}\n      clearButtonShown={allowClearButton && (!!value.length || !!inputValue.length)}\n      onAddChipOption={addOptionFromInput}\n      onRemoveChipOption={removeOption}\n      onClear={clearOptions}\n      slotProps={{\n        ...slotProps,\n        input: {\n          getRootRef: inputRef,\n          value: inputValue,\n          onChange: onInputChange,\n          disabled,\n          ...inputRest,\n        },\n      }}\n      {...restProps}\n    />\n  );\n};\n"],"names":["useExternRef","useMergeProps","ChipsInputBase","useChipsInput","ChipsInput","value","valueProp","defaultValue","onChange","getRef","inputValue","inputValueProp","defaultInputValue","defaultInputValueProp","onInputChange","onInputChangeProp","getOptionValue","getOptionLabel","getNewOptionData","disabled","disabledProp","allowClearButton","delimiter","slotProps","restProps","getRootRef","getInputRef","resolvedInputValue","resolvedInputDefaultValue","resolvedOnInputChange","inputRest","input","addOptionFromInput","removeOption","clearOptions","inputRef","inputRefHook","clearButtonShown","length","onAddChipOption","onRemoveChipOption","onClear"],"mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,8BAA2B;AACxD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,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,UAAUC,YAAY,EACtBC,gBAAgB,EAChBC,SAAS,EAETC,SAAS,EACT,GAAGC,WACqB;IACxB,MAAM,EACJC,YAAYC,WAAW,EACvBrB,OAAOsB,kBAAkB,EACzBpB,cAAcqB,yBAAyB,EACvCpB,UAAUqB,qBAAqB,EAC/BV,QAAQ,EACR,GAAGW,WACJ,GAAG7B,cACF;QACEwB,YAAYhB;QACZJ,OAAOM;QACPJ,cAAcM;QACdL,UAAUO;QACVI,UAAUC;IACZ,GACAG,WAAWQ;IAGb,MAAM,EACJ1B,KAAK,EACL2B,kBAAkB,EAClBC,YAAY,EACZC,YAAY,EAEZ,QAAQ;IACRC,UAAUC,YAAY,EACtB1B,UAAU,EACVI,aAAa,EACd,GAAGX,cAAc;QAChB,SAAS;QACTE,OAAOC;QACPC;QACAC;QACAS;QACAD;QACAE;QAEA,QAAQ;QACRR,YAAYiB;QACZf,mBAAmBgB;QACnBd,eAAee;QAEf,QAAQ;QACRV;QACAG;IACF;IACA,MAAMa,WAAWnC,aAAa0B,aAAaU;IAE3C,qBACE,KAAClC;QACCG,OAAOA;QACPgC,kBAAkBhB,oBAAqB,CAAA,CAAC,CAAChB,MAAMiC,MAAM,IAAI,CAAC,CAAC5B,WAAW4B,MAAM,AAAD;QAC3EC,iBAAiBP;QACjBQ,oBAAoBP;QACpBQ,SAASP;QACTX,WAAW;YACT,GAAGA,SAAS;YACZQ,OAAO;gBACLN,YAAYU;gBACZ9B,OAAOK;gBACPF,UAAUM;gBACVK;gBACA,GAAGW,SAAS;YACd;QACF;QACC,GAAGN,SAAS;;AAGnB,EAAE"}

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

@@ -5,27 +5,46 @@ import { classNames } from "@vkontakte/vkjs";
 import { isHTMLElement } from "@vkontakte/vkui-floating-ui/utils/dom";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { getHorizontalFocusGoTo, Keys } from "../../lib/accessibility.js";
+import { callMultiple } from "../../lib/callMultiple.js";
 import { contains as checkTargetIsInputEl, contains, getActiveElementByAnotherElement } from "../../lib/dom.js";
+import { warnOnce } from "../../lib/warnOnce.js";
 import { FormField } from "../FormField/FormField.js";
 import { FormFieldClearButton } from "../FormFieldClearButton/FormFieldClearButton.js";
 import { Text } from "../Typography/Text/Text.js";
 import { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from "./constants.js";
 import { getChipOptionIndexByHTMLElement, getChipOptionIndexByValueProp, getChipOptionValueByHTMLElement, getNextChipOptionIndexByNavigateToProp, isInputValueEmpty } from "./helpers.js";
 import styles from "./ChipsInputBase.module.css";
+const warn = warnOnce('ChipsInputBase');
 const sizeYClassNames = {
     none: styles.sizeYNone,
     compact: styles.sizeYCompact
 };
 export const ChipsInputBase = ({ // FormFieldProps
-getRootRef, style, className, before, after, status, mode, maxHeight, // option
+'getRootRef': rootGetRootRef, 'style': rootStyle, 'className': rootClassName, before, after, status, mode, maxHeight, // option
 value = DEFAULT_VALUE, onAddChipOption, 'onRemoveChipOption': onRemoveChipOptionProp, renderChip = renderChipDefault, // input
-getRef, 'id': idProp, inputValue = DEFAULT_INPUT_VALUE, placeholder, disabled, readOnly, addOnBlur, onBlur, onInputChange, // clear
+getRef, 'inputValue': inputValueProp = DEFAULT_INPUT_VALUE, addOnBlur, onInputChange, // clear
 ClearButton = FormFieldClearButton, clearButtonShown, clearButtonTestId, onClear, // a11y
-chipsListLabel = 'Выбранные элементы', 'aria-label': ariaLabel = '', ...restProps })=>{
+chipsListLabel = 'Выбранные элементы', 'aria-label': ariaLabel = '', slotProps, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
+    /* istanbul ignore if: не проверяем в тестах */ if (process.env.NODE_ENV === 'development' && getRef) {
+        warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');
+    }
+    const { className, style, getRootRef, onClick: onRootClick, onMouseDown: onRootMouseDown, ...rootRest } = useMergeProps({
+        getRootRef: rootGetRootRef,
+        style: rootStyle,
+        className: rootClassName
+    }, slotProps?.root);
+    const { getRootRef: getInputRef, onBlur, placeholder, readOnly, disabled, id, value: inputValue = DEFAULT_INPUT_VALUE, ...inputRest } = useMergeProps({
+        getRootRef: getRef,
+        className: styles.el,
+        value: inputValueProp,
+        onChange: onInputChange,
+        ...restProps
+    }, slotProps?.input);
     const idGenerated = React.useId();
-    const inputRef = useExternRef(getRef);
+    const inputRef = useExternRef(getInputRef);
     const containerRef = React.useRef(null);
     const listboxRef = React.useRef(null);
     const valueLength = value.length;
@@ -163,7 +182,7 @@ chipsListLabel = 'Выбранные элементы', 'aria-label': ariaLabel
         after,
         clearButton
     ]);
-    const inputId = idProp || `chips-input-base-generated-id-${idGenerated}`;
+    const inputId = id || `chips-input-base-generated-id-${idGenerated}`;
     const handleRootMouseDown = (e)=>{
         // Если клик был в один из чипов, то preventDefault делать не нужно, так как не будет срабатывать выделение текста
         if (isHTMLElement(e.target) && contains(listboxRef.current, e.target) && listboxRef.current !== e.target) {
@@ -197,8 +216,9 @@ chipsListLabel = 'Выбранные элементы', 'aria-label': ariaLabel
         mode: mode,
         className: className,
         maxHeight: maxHeight,
-        onClick: disabled ? undefined : handleRootClick,
-        onMouseDown: handleRootMouseDown,
+        onClick: disabled ? onRootClick : callMultiple(handleRootClick, onRootClick),
+        onMouseDown: callMultiple(handleRootMouseDown, onRootMouseDown),
+        ...rootRest,
         children: /*#__PURE__*/ _jsxs("div", {
             className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], withPlaceholder && styles.hasPlaceholder, inputValue && styles.hasInputValue),
             ref: containerRef,
@@ -241,19 +261,17 @@ chipsListLabel = 'Выбранные элементы', 'aria-label': ariaLabel
                     autoComplete: "off",
                     autoCorrect: "off",
                     spellCheck: false,
-                    ...restProps,
                     "aria-label": ariaLabel,
                     Component: "input",
                     type: "text",
                     id: inputId,
                     getRootRef: inputRef,
-                    className: styles.el,
                     disabled: disabled,
                     readOnly: readOnly,
-                    placeholder: withPlaceholder ? placeholder : undefined,
                     value: inputValue,
-                    onChange: onInputChange,
-                    onBlur: handleInputBlur
+                    placeholder: withPlaceholder ? placeholder : undefined,
+                    onBlur: handleInputBlur,
+                    ...inputRest
                 })
             ]
         })

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

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

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 { HasAlign, HasRef } from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\nimport { type ChipProps } from './Chip/Chip';\n\nexport type NavigateTo = 'prev' | 'next' | 'last' | 'first';\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 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   * - `string` - простая строка\n   * - `RegExp` - регулярное выражение\n   * - `string[]` - массив строк, по которым нужно разелять ввод.\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 | RegExp | 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   * `aria-label` для списка выбранных опций.\n   */\n  chipsListLabel?: string;\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":"AA4JA;;CAEC,GACD,WAeC"}
+{"version":3,"sources":["../../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\nimport { type ChipProps } from './Chip/Chip';\n\nexport type NavigateTo = 'prev' | 'next' | 'last' | 'first';\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 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   * - `string` - простая строка\n   * - `RegExp` - регулярное выражение\n   * - `string[]` - массив строк, по которым нужно разелять ввод.\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 | RegExp | 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    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  /**\n   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `input`: свойства для прокидывания в поле ввода.\n   */\n  slotProps?: {\n    root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;\n    input?: React.InputHTMLAttributes<HTMLInputElement> &\n      HasRootRef<HTMLInputElement> &\n      HasDataAttribute;\n  };\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   * `aria-label` для списка выбранных опций.\n   */\n  chipsListLabel?: string;\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":"AAuKA;;CAEC,GACD,WAeC"}