@vkontakte/vkui 6.4.0 → 6.5.0

package/dist/cssm/components/Cell/Cell.module.css

@@ -19,6 +19,12 @@
           margin-inline-end: var(--vkui--spacing_size_2xl);
 }
 
+.Cell__control--noBefore {
+  /* Когда в before нет ничего, кроме dragger или checkbox, нужно добавлять компенсированный отступ */
+  -webkit-margin-end: calc(var(--vkui--spacing_size_2xl) - var(--vkui--spacing_size_xl));
+          margin-inline-end: calc(var(--vkui--spacing_size_2xl) - var(--vkui--spacing_size_xl));
+}
+
 .Cell__content {
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -60,6 +66,12 @@
           margin-inline-end: var(--vkui--spacing_size_xl);
 }
 
+.Cell--ios .Cell__control--noBefore {
+  /* Когда в before нет ничего, кроме dragger или checkbox, оставляем только отступ у before в SimpleCell */
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+}
+
 .Cell--ios.Cell--removable .Cell__content {
   /* размер removable icon + icon margins*/
   padding-inline: 48px var(--vkui--size_base_padding_horizontal--regular);

package/dist/cssm/components/CellButton/CellButton.module.css

@@ -47,9 +47,9 @@
 }
 
 .CellButton {
-  --vkui_internal--icon_color: var(--vkui--color_icon_accent);
+  --vkui_internal--icon_color: var(--vkui--color_icon_accent_themed);
 
-  color: var(--vkui--color_text_accent);
+  color: var(--vkui--color_text_accent_themed);
 }
 
 .CellButton--mode-danger {

package/dist/cssm/components/Checkbox/Checkbox.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
+import { HasRootRef } from '../../types';
 import { type TappableProps } from '../Tappable/Tappable';
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
+import { CheckboxInput, CheckboxInputProps } from './CheckboxInput/CheckboxInput';
+export interface CheckboxProps extends Omit<CheckboxInputProps, 'getRootRef'>, HasRootRef<HTMLLabelElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
     description?: React.ReactNode;
-    indeterminate?: boolean;
-    defaultIndeterminate?: boolean;
     titleAfter?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => React.ReactNode;
+export declare const Checkbox: {
+    (props: CheckboxProps): React.ReactNode;
+    Input: typeof CheckboxInput;
+};
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/cssm/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAepE,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC,EACxB,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,2MAiBlB,aAAa,KAAG,KAAK,CAAC,SAuIxB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAGlF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,EAC5C,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAoCD;;GAEG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa,GAAG,KAAK,CAAC,SAAS;;CAO9D,CAAC"}

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

@@ -1,74 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Icon20CheckBoxIndetermanate, Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { warnOnce } from '../../lib/warnOnce';
-import { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';
-import { Tappable } from '../Tappable/Tappable';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { Text } from '../Typography/Text/Text';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
-import styles from './Checkbox.module.css';
-function setIndeterminate(el, indeterminate) {
-    el.indeterminate = indeterminate;
-}
-const sizeYClassNames = {
-    none: styles['Checkbox--sizeY-none'],
-    ['compact']: styles['Checkbox--sizeY-compact']
-};
-const warn = warnOnce('Checkbox');
-/**
- * @see https://vkcom.github.io/VKUI/#/Checkbox
- */ export const Checkbox = ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps })=>{
-    const inputRef = useExternRef(getRef);
-    const platform = usePlatform();
-    const { sizeY = 'none' } = useAdaptivity();
-    const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
-    React.useEffect(()=>{
-        const indeterminateValue = indeterminate ?? Boolean(defaultIndeterminate);
-        if (inputRef.current) {
-            setIndeterminate(inputRef.current, indeterminateValue);
-        }
-    }, [
-        defaultIndeterminate,
-        indeterminate,
-        inputRef
-    ]);
-    const handleChange = React.useCallback((event)=>{
-        if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined) {
-            event.currentTarget.indeterminate = false;
-        }
-        if (indeterminate !== undefined) {
-            event.currentTarget.indeterminate = indeterminate;
-        }
-        onChange && onChange(event);
-    }, [
-        defaultIndeterminate,
-        indeterminate,
-        restProps.checked,
-        onChange
-    ]);
-    if (process.env.NODE_ENV === 'development') {
-        if (defaultIndeterminate && restProps.defaultChecked) {
-            warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
-        }
-        if (indeterminate && restProps.checked) {
-            warn('indeterminate и checked не могут быть true одновременно', 'error');
-        }
-        if (restProps.defaultChecked && restProps.checked) {
-            warn('defaultChecked и checked не могут быть true одновременно', 'error');
-        }
-    }
-    return /*#__PURE__*/ _jsxs(Tappable, {
-        Component: "label",
-        className: classNames(styles['Checkbox'], sizeY !== 'regular' && sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'], className),
+import { hasReactNode } from '@vkontakte/vkjs';
+import { SelectionControl } from '../SelectionControl/SelectionControl';
+import { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';
+import { CheckboxInput } from './CheckboxInput/CheckboxInput';
+import { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';
+const CheckboxComponent = ({ children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, ...restProps })=>{
+    return /*#__PURE__*/ _jsxs(SelectionControl, {
+        className: className,
         style: style,
         disabled: restProps.disabled,
-        activeEffectDelay: platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY,
         getRootRef: getRootRef,
         hoverMode: hoverMode,
         activeMode: activeMode,
@@ -76,84 +17,30 @@ const warn = warnOnce('Checkbox');
         hasActive: hasActive,
         focusVisibleMode: focusVisibleMode,
         children: [
-            /*#__PURE__*/ _jsx(VisuallyHidden, {
-                ...restProps,
-                Component: "input",
-                type: "checkbox",
-                onChange: handleChange,
-                className: styles['Checkbox__input'],
-                getRootRef: inputRef
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on']),
-                children: platform === 'vkcom' ? /*#__PURE__*/ _jsx(Icon20CheckBoxOn, {}) : /*#__PURE__*/ _jsxs(React.Fragment, {
-                    children: [
-                        adaptiveSizeY.compact && /*#__PURE__*/ _jsx(Icon20CheckBoxOn, {
-                            className: adaptiveSizeY.compact.className
-                        }),
-                        adaptiveSizeY.regular && /*#__PURE__*/ _jsx(Icon24CheckBoxOn, {
-                            className: adaptiveSizeY.regular.className
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off']),
-                children: platform === 'vkcom' ? /*#__PURE__*/ _jsx(Icon20CheckBoxOff, {}) : /*#__PURE__*/ _jsxs(React.Fragment, {
-                    children: [
-                        adaptiveSizeY.compact && /*#__PURE__*/ _jsx(Icon20CheckBoxOff, {
-                            className: adaptiveSizeY.compact.className
-                        }),
-                        adaptiveSizeY.regular && /*#__PURE__*/ _jsx(Icon24CheckBoxOff, {
-                            className: adaptiveSizeY.regular.className
-                        })
-                    ]
-                })
+            /*#__PURE__*/ _jsx(CheckboxInput, {
+                ...restProps
             }),
-            /*#__PURE__*/ _jsx("div", {
-                className: classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate']),
-                children: platform === 'vkcom' ? /*#__PURE__*/ _jsx(Icon20CheckBoxIndetermanate, {
-                    width: 20,
-                    height: 20
-                }) : /*#__PURE__*/ _jsxs(React.Fragment, {
-                    children: [
-                        adaptiveSizeY.compact && /*#__PURE__*/ _jsx(Icon20CheckBoxIndetermanate, {
-                            className: adaptiveSizeY.compact.className,
-                            width: 20,
-                            height: 20
-                        }),
-                        adaptiveSizeY.regular && /*#__PURE__*/ _jsx(Icon20CheckBoxIndetermanate, {
-                            className: adaptiveSizeY.regular.className,
-                            width: 24,
-                            height: 24
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: styles['Checkbox__content'],
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: styles['Checkbox__title'],
-                        children: [
-                            /*#__PURE__*/ _jsx(Text, {
-                                className: styles['Checkbox__titleBefore'],
-                                children: children
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: styles['Checkbox__titleAfter'],
-                                children: titleAfter
-                            })
-                        ]
-                    }),
-                    hasReactNode(description) && /*#__PURE__*/ _jsx(Footnote, {
-                        className: styles['Checkbox__description'],
-                        children: description
-                    })
-                ]
+            /*#__PURE__*/ _jsx(SelectionControlLabel, {
+                titleAfter: titleAfter,
+                description: description,
+                children: children
             })
         ]
     });
 };
+/**
+ * @see https://vkcom.github.io/VKUI/#/Checkbox
+ */ export const Checkbox = (props)=>{
+    const simple = !(hasReactNode(props.children) || hasReactNode(props.description));
+    if (simple) {
+        return /*#__PURE__*/ _jsx(CheckboxSimple, {
+            ...props
+        });
+    }
+    return /*#__PURE__*/ _jsx(CheckboxComponent, {
+        ...props
+    });
+};
+Checkbox.Input = CheckboxInput;
 
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nfunction setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {\n  el.indeterminate = indeterminate;\n}\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  ['compact']: styles['Checkbox--sizeY-compact'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps): React.ReactNode => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate ?? Boolean(defaultIndeterminate);\n\n    if (inputRef.current) {\n      setIndeterminate(inputRef.current, indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined\n      ) {\n        event.currentTarget.indeterminate = false;\n      }\n      if (indeterminate !== undefined) {\n        event.currentTarget.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange],\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    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === 'vkcom' ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === 'vkcom' ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === 'vkcom' ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <Text className={styles['Checkbox__titleBefore']}>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","warnOnce","DEFAULT_ACTIVE_EFFECT_DELAY","Tappable","Footnote","Text","VisuallyHidden","styles","setIndeterminate","el","indeterminate","sizeYClassNames","none","warn","Checkbox","children","className","style","getRootRef","getRef","description","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","Boolean","current","handleChange","useCallback","event","undefined","checked","currentTarget","process","env","NODE_ENV","defaultChecked","Component","disabled","activeEffectDelay","type","div","Fragment","compact","regular","width","height"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAC3BC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,QACX,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,8BAA8B,QAAQ,6CAA6C;AAC5F,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,iBAAiBC,EAAoB,EAAEC,aAAsB;IACpED,GAAGC,aAAa,GAAGA;AACrB;AAEA,MAAMC,kBAAkB;IACtBC,MAAML,MAAM,CAAC,uBAAuB;IACpC,CAAC,UAAU,EAAEA,MAAM,CAAC,0BAA0B;AAChD;AAgBA,MAAMM,OAAOZ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMa,WAAW,CAAC,EACvBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,MAAM,EACNC,WAAW,EACXV,aAAa,EACbW,oBAAoB,EACpBC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,QAAQ,EACRC,UAAU,EACV,GAAGC,WACW;IACd,MAAMC,WAAW/B,aAAaoB;IAC9B,MAAMY,WAAW/B;IACjB,MAAM,EAAEgC,QAAQ,MAAM,EAAE,GAAGnC;IAC3B,MAAM,EAAEmC,OAAOC,aAAa,EAAE,GAAGnC;IAEjCT,MAAM6C,SAAS,CAAC;QACd,MAAMC,qBAAqBzB,iBAAiB0B,QAAQf;QAEpD,IAAIS,SAASO,OAAO,EAAE;YACpB7B,iBAAiBsB,SAASO,OAAO,EAAEF;QACrC;IACF,GAAG;QAACd;QAAsBX;QAAeoB;KAAS;IAElD,MAAMQ,eAA0CjD,MAAMkD,WAAW,CAC/D,CAACC;QACC,IACEnB,yBAAyBoB,aACzB/B,kBAAkB+B,aAClBZ,UAAUa,OAAO,KAAKD,WACtB;YACAD,MAAMG,aAAa,CAACjC,aAAa,GAAG;QACtC;QACA,IAAIA,kBAAkB+B,WAAW;YAC/BD,MAAMG,aAAa,CAACjC,aAAa,GAAGA;QACtC;QACAiB,YAAYA,SAASa;IACvB,GACA;QAACnB;QAAsBX;QAAemB,UAAUa,OAAO;QAAEf;KAAS;IAGpE,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIzB,wBAAwBQ,UAAUkB,cAAc,EAAE;YACpDlC,KAAK,yEAAyE;QAChF;QAEA,IAAIH,iBAAiBmB,UAAUa,OAAO,EAAE;YACtC7B,KAAK,2DAA2D;QAClE;QAEA,IAAIgB,UAAUkB,cAAc,IAAIlB,UAAUa,OAAO,EAAE;YACjD7B,KAAK,4DAA4D;QACnE;IACF;IAEA,qBACE,MAACV;QACC6C,WAAU;QACVhC,WAAWrB,WACTY,MAAM,CAAC,WAAW,EAClByB,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7C,CAAEpC,CAAAA,aAAamB,aAAanB,aAAawB,YAAW,KAAMb,MAAM,CAAC,mBAAmB,EACpFS;QAEFC,OAAOA;QACPgC,UAAUpB,UAAUoB,QAAQ;QAC5BC,mBAAmBnB,aAAa,QAAQ,MAAM7B;QAC9CgB,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;;0BAElB,KAACpB;gBACE,GAAGuB,SAAS;gBACbmB,WAAU;gBACVG,MAAK;gBACLxB,UAAUW;gBACVtB,WAAWT,MAAM,CAAC,kBAAkB;gBACpCW,YAAYY;;0BAEd,KAACsB;gBAAIpC,WAAWrB,WAAWY,MAAM,CAAC,iBAAiB,EAAEA,MAAM,CAAC,qBAAqB;0BAC9EwB,aAAa,wBACZ,KAACvC,sCAED,MAACH,MAAMgE,QAAQ;;wBACZpB,cAAcqB,OAAO,kBACpB,KAAC9D;4BAAiBwB,WAAWiB,cAAcqB,OAAO,CAACtC,SAAS;;wBAE7DiB,cAAcsB,OAAO,kBACpB,KAAC7D;4BAAiBsB,WAAWiB,cAAcsB,OAAO,CAACvC,SAAS;;;;;0BAKpE,KAACoC;gBAAIpC,WAAWrB,WAAWY,MAAM,CAAC,iBAAiB,EAAEA,MAAM,CAAC,sBAAsB;0BAC/EwB,aAAa,wBACZ,KAACxC,uCAED,MAACF,MAAMgE,QAAQ;;wBACZpB,cAAcqB,OAAO,kBACpB,KAAC/D;4BAAkByB,WAAWiB,cAAcqB,OAAO,CAACtC,SAAS;;wBAE9DiB,cAAcsB,OAAO,kBACpB,KAAC9D;4BAAkBuB,WAAWiB,cAAcsB,OAAO,CAACvC,SAAS;;;;;0BAKrE,KAACoC;gBACCpC,WAAWrB,WAAWY,MAAM,CAAC,iBAAiB,EAAEA,MAAM,CAAC,gCAAgC;0BAEtFwB,aAAa,wBACZ,KAACzC;oBAA4BkE,OAAO;oBAAIC,QAAQ;mCAEhD,MAACpE,MAAMgE,QAAQ;;wBACZpB,cAAcqB,OAAO,kBACpB,KAAChE;4BACC0B,WAAWiB,cAAcqB,OAAO,CAACtC,SAAS;4BAC1CwC,OAAO;4BACPC,QAAQ;;wBAGXxB,cAAcsB,OAAO,kBACpB,KAACjE;4BACC0B,WAAWiB,cAAcsB,OAAO,CAACvC,SAAS;4BAC1CwC,OAAO;4BACPC,QAAQ;;;;;0BAMlB,MAACL;gBAAIpC,WAAWT,MAAM,CAAC,oBAAoB;;kCACzC,MAAC6C;wBAAIpC,WAAWT,MAAM,CAAC,kBAAkB;;0CACvC,KAACF;gCAAKW,WAAWT,MAAM,CAAC,wBAAwB;0CAAGQ;;0CACnD,KAACqC;gCAAIpC,WAAWT,MAAM,CAAC,uBAAuB;0CAAGqB;;;;oBAElDhC,aAAawB,8BACZ,KAAChB;wBAASY,WAAWT,MAAM,CAAC,wBAAwB;kCAAGa;;;;;;AAKjE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport { type TappableProps } from '../Tappable/Tappable';\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput/CheckboxInput';\nimport { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';\n\nexport interface CheckboxProps\n  extends Omit<CheckboxInputProps, 'getRootRef'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\nconst CheckboxComponent = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  ...restProps\n}: CheckboxProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      className={className}\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    >\n      <CheckboxInput {...restProps} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = (props: CheckboxProps): React.ReactNode => {\n  const simple = !(hasReactNode(props.children) || hasReactNode(props.description));\n  if (simple) {\n    return <CheckboxSimple {...props} />;\n  }\n\n  return <CheckboxComponent {...props} />;\n};\n\nCheckbox.Input = CheckboxInput;\n"],"names":["React","hasReactNode","SelectionControl","SelectionControlLabel","CheckboxInput","CheckboxSimple","CheckboxComponent","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","disabled","Checkbox","props","simple","Input"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,SAASC,qBAAqB,QAAQ,kEAAkE;AAExG,SAASC,aAAa,QAA4B,gCAAgC;AAClF,SAASC,cAAc,QAAQ,kCAAkC;AAajE,MAAMC,oBAAoB,CAAC,EACzBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACV,GAAGC,WACW;IACd,qBACE,MAAChB;QACCM,WAAWA;QACXC,OAAOA;QACPU,UAAUD,UAAUC,QAAQ;QAC5BT,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;;0BAElB,KAACZ;gBAAe,GAAGc,SAAS;;0BAC5B,KAACf;gBAAsBc,YAAYA;gBAAYN,aAAaA;0BACzDJ;;;;AAIT;AAEA;;CAEC,GACD,OAAO,MAAMa,WAAW,CAACC;IACvB,MAAMC,SAAS,CAAErB,CAAAA,aAAaoB,MAAMd,QAAQ,KAAKN,aAAaoB,MAAMV,WAAW,CAAA;IAC/E,IAAIW,QAAQ;QACV,qBAAO,KAACjB;YAAgB,GAAGgB,KAAK;;IAClC;IAEA,qBAAO,KAACf;QAAmB,GAAGe,KAAK;;AACrC,EAAE;AAEFD,SAASG,KAAK,GAAGnB"}

package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../../types';
+export interface CheckboxInputProps extends React.ComponentProps<'input'>, HasRootRef<HTMLDivElement>, HasRef<HTMLInputElement> {
+    indeterminate?: boolean;
+    defaultIndeterminate?: boolean;
+}
+export declare function CheckboxInput({ className, style, getRootRef, getRef, indeterminate, defaultIndeterminate, onChange, ...restProps }: CheckboxInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxInput.d.ts.map

package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKpD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EACnC,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAID,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,2CAwIpB"}

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon20CheckBoxIndetermanate, Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityConditionalRender } from '../../../hooks/useAdaptivityConditionalRender';
+import { useExternRef } from '../../../hooks/useExternRef';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { warnOnce } from '../../../lib/warnOnce';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+import styles from './CheckboxInput.module.css';
+const warn = warnOnce('Checkbox');
+export function CheckboxInput({ className, style, getRootRef, getRef, indeterminate, defaultIndeterminate, onChange, ...restProps }) {
+    const inputRef = useExternRef(getRef);
+    const platform = usePlatform();
+    const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
+    React.useEffect(()=>{
+        const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+        if (inputRef.current) {
+            inputRef.current.indeterminate = Boolean(indeterminateValue);
+        }
+    }, [
+        defaultIndeterminate,
+        indeterminate,
+        inputRef
+    ]);
+    const handleChange = React.useCallback((event)=>{
+        if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined && inputRef.current) {
+            inputRef.current.indeterminate = false;
+        }
+        if (indeterminate !== undefined && inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+        onChange && onChange(event);
+    }, [
+        defaultIndeterminate,
+        indeterminate,
+        restProps.checked,
+        onChange,
+        inputRef
+    ]);
+    if (process.env.NODE_ENV === 'development') {
+        if (defaultIndeterminate && restProps.defaultChecked) {
+            warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
+        }
+        if (indeterminate && restProps.checked) {
+            warn('indeterminate и checked не могут быть true одновременно', 'error');
+        }
+        if (restProps.defaultChecked && restProps.checked) {
+            warn('defaultChecked и checked не могут быть true одновременно', 'error');
+        }
+    }
+    return /*#__PURE__*/ _jsxs(RootComponent, {
+        baseClassName: styles['CheckboxInput'],
+        className: className,
+        style: style,
+        getRootRef: getRootRef,
+        children: [
+            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                ...restProps,
+                Component: "input",
+                type: "checkbox",
+                onChange: handleChange,
+                className: styles['CheckboxInput__input'],
+                getRootRef: inputRef
+            }),
+            platform === 'vkcom' ? /*#__PURE__*/ _jsx(Icon20CheckBoxOn, {
+                className: styles['CheckboxInput__icon--on']
+            }) : /*#__PURE__*/ _jsxs(React.Fragment, {
+                children: [
+                    adaptiveSizeY.compact && /*#__PURE__*/ _jsx(Icon20CheckBoxOn, {
+                        className: classNames(styles['CheckboxInput__icon--on'], adaptiveSizeY.compact.className)
+                    }),
+                    adaptiveSizeY.regular && /*#__PURE__*/ _jsx(Icon24CheckBoxOn, {
+                        className: classNames(styles['CheckboxInput__icon--on'], adaptiveSizeY.regular.className)
+                    })
+                ]
+            }),
+            platform === 'vkcom' ? /*#__PURE__*/ _jsx(Icon20CheckBoxOff, {
+                className: styles['CheckboxInput__icon--off']
+            }) : /*#__PURE__*/ _jsxs(React.Fragment, {
+                children: [
+                    adaptiveSizeY.compact && /*#__PURE__*/ _jsx(Icon20CheckBoxOff, {
+                        className: classNames(styles['CheckboxInput__icon--off'], adaptiveSizeY.compact.className)
+                    }),
+                    adaptiveSizeY.regular && /*#__PURE__*/ _jsx(Icon24CheckBoxOff, {
+                        className: classNames(styles['CheckboxInput__icon--off'], adaptiveSizeY.regular.className)
+                    })
+                ]
+            }),
+            platform === 'vkcom' ? /*#__PURE__*/ _jsx(Icon20CheckBoxIndetermanate, {
+                width: 20,
+                height: 20,
+                className: styles['CheckboxInput__icon--indeterminate']
+            }) : /*#__PURE__*/ _jsxs(React.Fragment, {
+                children: [
+                    adaptiveSizeY.compact && /*#__PURE__*/ _jsx(Icon20CheckBoxIndetermanate, {
+                        className: classNames(styles['CheckboxInput__icon--indeterminate'], adaptiveSizeY.compact.className),
+                        width: 20,
+                        height: 20
+                    }),
+                    adaptiveSizeY.regular && /*#__PURE__*/ _jsx(Icon20CheckBoxIndetermanate, {
+                        className: classNames(styles['CheckboxInput__icon--indeterminate'], adaptiveSizeY.regular.className),
+                        width: 24,
+                        height: 24
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=CheckboxInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxInput/CheckboxInput.tsx"],"sourcesContent":["import * 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 { HasRef, HasRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './CheckboxInput.module.css';\n\nexport interface CheckboxInputProps\n  extends React.ComponentProps<'input'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\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  ...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      inputRef.current.indeterminate = 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        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = 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['CheckboxInput']}\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['CheckboxInput__input']}\n        getRootRef={inputRef}\n      />\n      {platform === 'vkcom' ? (\n        <Icon20CheckBoxOn className={styles['CheckboxInput__icon--on']} />\n      ) : (\n        <React.Fragment>\n          {adaptiveSizeY.compact && (\n            <Icon20CheckBoxOn\n              className={classNames(\n                styles['CheckboxInput__icon--on'],\n                adaptiveSizeY.compact.className,\n              )}\n            />\n          )}\n          {adaptiveSizeY.regular && (\n            <Icon24CheckBoxOn\n              className={classNames(\n                styles['CheckboxInput__icon--on'],\n                adaptiveSizeY.regular.className,\n              )}\n            />\n          )}\n        </React.Fragment>\n      )}\n      {platform === 'vkcom' ? (\n        <Icon20CheckBoxOff className={styles['CheckboxInput__icon--off']} />\n      ) : (\n        <React.Fragment>\n          {adaptiveSizeY.compact && (\n            <Icon20CheckBoxOff\n              className={classNames(\n                styles['CheckboxInput__icon--off'],\n                adaptiveSizeY.compact.className,\n              )}\n            />\n          )}\n          {adaptiveSizeY.regular && (\n            <Icon24CheckBoxOff\n              className={classNames(\n                styles['CheckboxInput__icon--off'],\n                adaptiveSizeY.regular.className,\n              )}\n            />\n          )}\n        </React.Fragment>\n      )}\n      {platform === 'vkcom' ? (\n        <Icon20CheckBoxIndetermanate\n          width={20}\n          height={20}\n          className={styles['CheckboxInput__icon--indeterminate']}\n        />\n      ) : (\n        <React.Fragment>\n          {adaptiveSizeY.compact && (\n            <Icon20CheckBoxIndetermanate\n              className={classNames(\n                styles['CheckboxInput__icon--indeterminate'],\n                adaptiveSizeY.compact.className,\n              )}\n              width={20}\n              height={20}\n            />\n          )}\n          {adaptiveSizeY.regular && (\n            <Icon20CheckBoxIndetermanate\n              className={classNames(\n                styles['CheckboxInput__icon--indeterminate'],\n                adaptiveSizeY.regular.className,\n              )}\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","warn","CheckboxInput","className","style","getRootRef","getRef","indeterminate","defaultIndeterminate","onChange","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","baseClassName","Component","type","Fragment","compact","regular","width","height"],"mappings":";AAAA,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,gDAAgD;AAC/F,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,6BAA6B;AAUhD,MAAMC,OAAOJ,SAAS;AAEtB,OAAO,SAASK,cAAc,EAC5BC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,MAAM,EACNC,aAAa,EACbC,oBAAoB,EACpBC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAMC,WAAWhB,aAAaW;IAC9B,MAAMM,WAAWhB;IACjB,MAAM,EAAEiB,OAAOC,aAAa,EAAE,GAAGpB;IAEjCP,MAAM4B,SAAS,CAAC;QACd,MAAMC,qBAAqBT,kBAAkBU,YAAYT,uBAAuBD;QAEhF,IAAII,SAASO,OAAO,EAAE;YACpBP,SAASO,OAAO,CAACX,aAAa,GAAGY,QAAQH;QAC3C;IACF,GAAG;QAACR;QAAsBD;QAAeI;KAAS;IAElD,MAAMS,eAAejC,MAAMkC,WAAW,CACpC,CAACC;QACC,IACEd,yBAAyBS,aACzBV,kBAAkBU,aAClBP,UAAUa,OAAO,KAAKN,aACtBN,SAASO,OAAO,EAChB;YACAP,SAASO,OAAO,CAACX,aAAa,GAAG;QACnC;QACA,IAAIA,kBAAkBU,aAAaN,SAASO,OAAO,EAAE;YACnDP,SAASO,OAAO,CAACX,aAAa,GAAGA;QACnC;QACAE,YAAYA,SAASa;IACvB,GACA;QAACd;QAAsBD;QAAeG,UAAUa,OAAO;QAAEd;QAAUE;KAAS;IAG9E,IAAIa,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIlB,wBAAwBE,UAAUiB,cAAc,EAAE;YACpD1B,KAAK,yEAAyE;QAChF;QAEA,IAAIM,iBAAiBG,UAAUa,OAAO,EAAE;YACtCtB,KAAK,2DAA2D;QAClE;QAEA,IAAIS,UAAUiB,cAAc,IAAIjB,UAAUa,OAAO,EAAE;YACjDtB,KAAK,4DAA4D;QACnE;IACF;IAEA,qBACE,MAACH;QACC8B,eAAe5B,MAAM,CAAC,gBAAgB;QACtCG,WAAWA;QACXC,OAAOA;QACPC,YAAYA;;0BAEZ,KAACN;gBACE,GAAGW,SAAS;gBACbmB,WAAU;gBACVC,MAAK;gBACLrB,UAAUW;gBACVjB,WAAWH,MAAM,CAAC,uBAAuB;gBACzCK,YAAYM;;YAEbC,aAAa,wBACZ,KAACtB;gBAAiBa,WAAWH,MAAM,CAAC,0BAA0B;+BAE9D,MAACb,MAAM4C,QAAQ;;oBACZjB,cAAckB,OAAO,kBACpB,KAAC1C;wBACCa,WAAWV,WACTO,MAAM,CAAC,0BAA0B,EACjCc,cAAckB,OAAO,CAAC7B,SAAS;;oBAIpCW,cAAcmB,OAAO,kBACpB,KAACzC;wBACCW,WAAWV,WACTO,MAAM,CAAC,0BAA0B,EACjCc,cAAcmB,OAAO,CAAC9B,SAAS;;;;YAMxCS,aAAa,wBACZ,KAACvB;gBAAkBc,WAAWH,MAAM,CAAC,2BAA2B;+BAEhE,MAACb,MAAM4C,QAAQ;;oBACZjB,cAAckB,OAAO,kBACpB,KAAC3C;wBACCc,WAAWV,WACTO,MAAM,CAAC,2BAA2B,EAClCc,cAAckB,OAAO,CAAC7B,SAAS;;oBAIpCW,cAAcmB,OAAO,kBACpB,KAAC1C;wBACCY,WAAWV,WACTO,MAAM,CAAC,2BAA2B,EAClCc,cAAcmB,OAAO,CAAC9B,SAAS;;;;YAMxCS,aAAa,wBACZ,KAACxB;gBACC8C,OAAO;gBACPC,QAAQ;gBACRhC,WAAWH,MAAM,CAAC,qCAAqC;+BAGzD,MAACb,MAAM4C,QAAQ;;oBACZjB,cAAckB,OAAO,kBACpB,KAAC5C;wBACCe,WAAWV,WACTO,MAAM,CAAC,qCAAqC,EAC5Cc,cAAckB,OAAO,CAAC7B,SAAS;wBAEjC+B,OAAO;wBACPC,QAAQ;;oBAGXrB,cAAcmB,OAAO,kBACpB,KAAC7C;wBACCe,WAAWV,WACTO,MAAM,CAAC,qCAAqC,EAC5Cc,cAAcmB,OAAO,CAAC9B,SAAS;wBAEjC+B,OAAO;wBACPC,QAAQ;;;;;;AAOtB"}

package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.module.css

@@ -0,0 +1,30 @@
+.CheckboxInput {
+  color: var(--vkui--color_icon_accent);
+}
+
+.CheckboxInput__icon--on,
+.CheckboxInput__icon--indeterminate {
+  display: none;
+}
+
+.CheckboxInput__icon--off {
+  color: var(--vkui--color_icon_tertiary);
+}
+
+.CheckboxInput__input:checked ~ .CheckboxInput__icon--on {
+  display: flex;
+}
+
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--indeterminate,
+.CheckboxInput__input:checked ~ .CheckboxInput__icon--off {
+  display: none;
+}
+
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--indeterminate {
+  display: flex;
+}
+
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--on,
+.CheckboxInput__input:indeterminate ~ .CheckboxInput__icon--off {
+  display: none;
+}

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from '../Checkbox';
+export declare function CheckboxSimple({ children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, ...restProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxSimple.d.ts.map

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSimple.d.ts","sourceRoot":"","sources":["../../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAS5C,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,EACV,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,GAAG,SAAS,EACb,EAAE,aAAa,2CAuBf"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { Tappable } from '../../Tappable/Tappable';
+import { CheckboxInput } from '../CheckboxInput/CheckboxInput';
+import styles from './CheckboxSimple.module.css';
+const sizeYClassNames = {
+    none: styles['CheckboxSimple--sizeY-none'],
+    compact: styles['CheckboxSimple--sizeY-compact']
+};
+export function CheckboxSimple({ children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, ...restProps }) {
+    const { sizeY = 'none' } = useAdaptivity();
+    return /*#__PURE__*/ _jsx(Tappable, {
+        className: classNames(className, styles['CheckboxSimple'], sizeY !== 'regular' && sizeYClassNames[sizeY]),
+        style: style,
+        disabled: restProps.disabled,
+        getRootRef: getRootRef,
+        hoverMode: hoverMode,
+        activeMode: activeMode,
+        hasHover: hasHover,
+        hasActive: hasActive,
+        focusVisibleMode: focusVisibleMode,
+        Component: "label",
+        children: /*#__PURE__*/ _jsx(CheckboxInput, {
+            ...restProps
+        })
+    });
+}
+
+//# sourceMappingURL=CheckboxSimple.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { CheckboxProps } from '../Checkbox';\nimport { CheckboxInput } from '../CheckboxInput/CheckboxInput';\nimport styles from './CheckboxSimple.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CheckboxSimple--sizeY-none'],\n  compact: styles['CheckboxSimple--sizeY-compact'],\n};\n\nexport function CheckboxSimple({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      className={classNames(\n        className,\n        styles['CheckboxSimple'],\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","compact","CheckboxSimple","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","sizeY","disabled","Component"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AAEnD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,6BAA6B;IAC1CG,SAASH,MAAM,CAAC,gCAAgC;AAClD;AAEA,OAAO,SAASI,eAAe,EAC7BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACV,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGpB;IAE3B,qBACE,KAACC;QACCQ,WAAWV,WACTU,WACAN,MAAM,CAAC,iBAAiB,EACxBiB,UAAU,aAAahB,eAAe,CAACgB,MAAM;QAE/CV,OAAOA;QACPW,UAAUF,UAAUE,QAAQ;QAC5BV,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBK,WAAU;kBAEV,cAAA,KAACpB;YAAe,GAAGiB,SAAS;;;AAGlC"}

package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css

@@ -0,0 +1,28 @@
+.CheckboxSimple {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  inline-size: var(--vkui--size_field_height--regular);
+  block-size: var(--vkui--size_field_height--regular);
+}
+
+.CheckboxSimple[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.CheckboxSimple--sizeY-compact {
+  inline-size: var(--vkui--size_field_height--compact);
+  block-size: var(--vkui--size_field_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .CheckboxSimple--sizeY-none {
+    inline-size: var(--vkui--size_field_height--compact);
+    block-size: var(--vkui--size_field_height--compact);
+  }
+}

package/dist/cssm/components/ChipsInput/ChipsInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,MAAM,WAAW,eAAe,CAAC,MAAM,SAAS,UAAU,CACxD,SAAQ,mBAAmB,CAAC,MAAM,CAAC,EACjC,kBAAkB,CAAC,MAAM,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,SAAS,UAAU,4PAmBjD,eAAe,CAAC,MAAM,CAAC,KAAG,KAAK,CAAC,SA4ClC,CAAC"}
+{"version":3,"file":"ChipsInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,MAAM,WAAW,eAAe,CAAC,MAAM,SAAS,UAAU,CACxD,SAAQ,mBAAmB,CAAC,MAAM,CAAC,EACjC,kBAAkB,CAAC,MAAM,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,SAAS,UAAU,4PAmBjD,eAAe,CAAC,MAAM,CAAC,KAAG,KAAK,CAAC,SA4ClC,CAAC"}

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

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useExternRef } from '../../hooks/useExternRef';
 import { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';
-import { getNewOptionDataDefault, getOptionLabelDefault, getOptionValueDefault } from '../ChipsInputBase/constants';
 import { useChipsInput } from './useChipsInput';
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */ export const ChipsInput = ({ // option
 value: valueProp, defaultValue, onChange, // input
-getRef, inputValue: inputValueProp, defaultInputValue: inputDefaultValueProp, onInputChange: onInputChangeProp, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, getNewOptionData = getNewOptionDataDefault, // other
+getRef, inputValue: inputValueProp, defaultInputValue: inputDefaultValueProp, onInputChange: onInputChangeProp, getOptionValue, getOptionLabel, getNewOptionData, // other
 disabled, allowClearButton, ...restProps })=>{
     const { value, addOptionFromInput, removeOption, clearOptions, // input
     inputRef: inputRefHook, inputValue, onInputChange } = useChipsInput({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import { useExternRef } from '../../hooks/useExternRef';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n  getNewOptionDataDefault,\n  getOptionLabelDefault,\n  getOptionValueDefault,\n} from '../ChipsInputBase/constants';\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'> {\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 = getOptionValueDefault,\n  getOptionLabel = getOptionLabelDefault,\n  getNewOptionData = getNewOptionDataDefault,\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","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","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,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SACEC,uBAAuB,EACvBC,qBAAqB,EACrBC,qBAAqB,QAChB,8BAA8B;AAGrC,SAASC,aAAa,QAAiC,kBAAkB;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,iBAAiBd,qBAAqB,EACtCe,iBAAiBhB,qBAAqB,EACtCiB,mBAAmBlB,uBAAuB,EAE1C,QAAQ;AACRmB,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,WAAW3B,aAAaW,QAAQiB;IAEtC,qBACE,KAAC3B;QACE,GAAGsB,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":["import { 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'> {\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,SAASA,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,SAASC,aAAa,QAAiC,kBAAkB;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"}

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

@@ -189,7 +189,7 @@ ClearButton = FormFieldClearButton, clearButtonShown, clearButtonTestId, onClear
                             'aria-posinset': index + 1,
                             'aria-setsize': valueLength
                         }, option)
-                    }, `${typeof option.value}-${option.label}`)),
+                    }, `${typeof option.value}-${option.value}`)),
                 /*#__PURE__*/ _jsx(Text, {
                     autoCapitalize: "none",
                     autoComplete: "off",