@vkontakte/vkui 5.0.3 → 5.1.0

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import { CellProps } from "../Cell";
-export declare type CellCheckboxProps = Pick<CellProps, "defaultChecked" | "checked"> & React.InputHTMLAttributes<HTMLInputElement>;
+import * as React from 'react';
+import { CellProps } from '../Cell';
+export declare type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;
 export declare const CellCheckbox: ({ className, style, ...restProps }: CellCheckboxProps) => JSX.Element;

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _getPlatformClassName = require("../../../helpers/getPlatformClassName");
 var _usePlatform = require("../../../hooks/usePlatform");
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../../lib/platform");
 var _excluded = ["className", "style"];
 var CellCheckbox = function CellCheckbox(_ref) {
@@ -23,15 +23,15 @@ var CellCheckbox = function CellCheckbox(_ref) {
   var IconOff = platform === _platform.Platform.IOS || platform === _platform.Platform.VKCOM ? _icons.Icon24CheckCircleOff : _icons.Icon24CheckBoxOff;
   var IconOn = platform === _platform.Platform.IOS || platform === _platform.Platform.VKCOM ? _icons.Icon24CheckCircleOn : _icons.Icon24CheckBoxOn;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCellCheckbox", (0, _getPlatformClassName.getPlatformClassName)("vkuiCellCheckbox", platform), className),
+    className: (0, _vkjs.classNames)("vkuiCellCheckbox", (0, _getPlatformClassName.getPlatformClassName)("vkuiCellCheckbox", platform), className),
     style: style
   }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
     className: "vkuiCellCheckbox__input",
     type: "checkbox"
   }, restProps)), /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--off")
+    className: (0, _vkjs.classNames)("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--off")
   }, /*#__PURE__*/React.createElement(IconOff, null)), /*#__PURE__*/React.createElement("span", {
-    className: (0, _classNames.classNamesString)("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--on")
+    className: (0, _vkjs.classNames)("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--on")
   }, /*#__PURE__*/React.createElement(IconOn, null)));
 };
 exports.CellCheckbox = CellCheckbox;

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellCheckbox.js","names":["CellCheckbox","className","style","restProps","platform","usePlatform","IconOff","Platform","IOS","VKCOM","Icon24CheckCircleOff","Icon24CheckBoxOff","IconOn","Icon24CheckCircleOn","Icon24CheckBoxOn","classNamesString","getPlatformClassName"],"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from \"@vkontakte/icons\";\nimport { getPlatformClassName } from \"../../../helpers/getPlatformClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { Platform } from \"../../../lib/platform\";\nimport { CellProps } from \"../Cell\";\nimport styles from \"./CellCheckbox.module.css\";\n\nexport type CellCheckboxProps = Pick<CellProps, \"defaultChecked\" | \"checked\"> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({\n  className,\n  style,\n  ...restProps\n}: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"CellCheckbox\"],\n        getPlatformClassName(styles[\"CellCheckbox\"], platform),\n        className\n      )}\n      style={style}\n    >\n      <input\n        className={styles[\"CellCheckbox__input\"]}\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <span\n        className={classNamesString(\n          styles[\"CellCheckbox__icon\"],\n          styles[\"CellCheckbox__icon--off\"]\n        )}\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNamesString(\n          styles[\"CellCheckbox__icon\"],\n          styles[\"CellCheckbox__icon--on\"]\n        )}\n      >\n        <IconOn />\n      </span>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AAAiD;AAO1C,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAIA;EAAA,IAHvBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GACXF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDC,2BAAoB,GACpBC,wBAAiB;EAEvB,IAAMC,MAAM,GACVR,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDI,0BAAmB,GACnBC,uBAAgB;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,sBAEzB,IAAAC,0CAAoB,sBAAyBZ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb;IACE,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAE,IAAAY,4BAAgB;EAGzB,gBAEF,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAE,IAAAA,4BAAgB;EAGzB,gBAEF,oBAAC,MAAM,OAAG,CACL,CACH;AAEV,CAAC;AAAC"}
+{"version":3,"file":"CellCheckbox.js","names":["CellCheckbox","className","style","restProps","platform","usePlatform","IconOff","Platform","IOS","VKCOM","Icon24CheckCircleOff","Icon24CheckBoxOff","IconOn","Icon24CheckCircleOn","Icon24CheckBoxOn","classNames","getPlatformClassName"],"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../../lib/platform';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <div\n      className={classNames(\n        styles['CellCheckbox'],\n        getPlatformClassName(styles['CellCheckbox'], platform),\n        className,\n      )}\n      style={style}\n    >\n      <input className={styles['CellCheckbox__input']} type=\"checkbox\" {...restProps} />\n      <span className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}>\n        <IconOff />\n      </span>\n      <span className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}>\n        <IconOn />\n      </span>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AAAiD;AAO1C,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GACXF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDC,2BAAoB,GACpBC,wBAAiB;EAEvB,IAAMC,MAAM,GACVR,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,IAAIJ,QAAQ,KAAKG,kBAAQ,CAACE,KAAK,GACpDI,0BAAmB,GACnBC,uBAAgB;EAEtB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,sBAEnB,IAAAC,0CAAoB,sBAAyBZ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb;IAAO,SAAS,2BAAgC;IAAC,IAAI,EAAC;EAAU,GAAKC,SAAS,EAAI,eAClF;IAAM,SAAS,EAAE,IAAAY,gBAAU;EAAkE,gBAC3F,oBAAC,OAAO,OAAG,CACN,eACP;IAAM,SAAS,EAAE,IAAAA,gBAAU;EAAiE,gBAC1F,oBAAC,MAAM,OAAG,CACL,CACH;AAEV,CAAC;AAAC"}

package/dist/cjs/components/Cell/CellDragger/CellDragger.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { DraggableProps } from "../useDraggable";
+import * as React from 'react';
+import { DraggableProps } from '../useDraggable';
 declare type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
 export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, className, ...restProps }: CellDraggerProps) => JSX.Element;
 export {};

package/dist/cjs/components/Cell/CellDragger/CellDragger.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _getPlatformClassName = require("../../../helpers/getPlatformClassName");
 var _usePlatform = require("../../../hooks/usePlatform");
-var _classNames = require("../../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../../lib/platform");
 var _Touch = require("../../Touch/Touch");
 var _excluded = ["onDragStart", "onDragMove", "onDragEnd", "className"];
@@ -27,7 +27,7 @@ var CellDragger = function CellDragger(_ref) {
     e.preventDefault();
   }, []);
   return /*#__PURE__*/React.createElement(_Touch.Touch, (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiCellDragger", (0, _getPlatformClassName.getPlatformClassName)("vkuiCellDragger", platform), className),
+    className: (0, _vkjs.classNames)("vkuiCellDragger", (0, _getPlatformClassName.getPlatformClassName)("vkuiCellDragger", platform), className),
     onStart: onDragStart,
     onMoveY: onDragMove,
     onEnd: onDragEnd,

package/dist/cjs/components/Cell/CellDragger/CellDragger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellDragger.js","names":["CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","usePlatform","onClick","React","useCallback","e","preventDefault","classNamesString","getPlatformClassName","Platform","IOS"],"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon24Reorder, Icon24ReorderIos } from \"@vkontakte/icons\";\nimport { getPlatformClassName } from \"../../../helpers/getPlatformClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNamesString } from \"../../../lib/classNames\";\nimport { Platform } from \"../../../lib/platform\";\nimport { Touch } from \"../../Touch/Touch\";\nimport { DraggableProps } from \"../useDraggable\";\nimport styles from \"./CellDragger.module.css\";\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNamesString(\n        styles[\"CellDragger\"],\n        getPlatformClassName(styles[\"CellDragger\"], platform),\n        className\n      )}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0C;AAMnC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GAAGC,KAAK,CAACC,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,YAAK;IACJ,SAAS,EAAE,IAAAC,4BAAgB,qBAEzB,IAAAC,0CAAoB,qBAAwBR,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEK;EAAQ,GACbH,SAAS,GAEZC,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,gBAAG,oBAAC,uBAAgB,OAAG,gBAAG,oBAAC,oBAAa,OAAG,CAC/D;AAEZ,CAAC;AAAC"}
+{"version":3,"file":"CellDragger.js","names":["CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","usePlatform","onClick","React","useCallback","e","preventDefault","classNames","getPlatformClassName","Platform","IOS"],"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(\n        styles['CellDragger'],\n        getPlatformClassName(styles['CellDragger'], platform),\n        className,\n      )}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0C;AAMnC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,OAAO,GAAGC,KAAK,CAACC,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,YAAK;IACJ,SAAS,EAAE,IAAAC,gBAAU,qBAEnB,IAAAC,0CAAoB,qBAAwBR,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEK;EAAQ,GACbH,SAAS,GAEZC,QAAQ,KAAKS,kBAAQ,CAACC,GAAG,gBAAG,oBAAC,uBAAgB,OAAG,gBAAG,oBAAC,oBAAa,OAAG,CAC/D;AAEZ,CAAC;AAAC"}

package/dist/cjs/components/Cell/useDraggable.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { TouchEvent } from "../Touch/Touch";
-import { CellProps } from "./Cell";
+import * as React from 'react';
+import { TouchEvent } from '../Touch/Touch';
+import { CellProps } from './Cell';
 export interface DraggableProps {
     onDragStart: () => void;
     onDragEnd: () => void;

package/dist/cjs/components/Cell/useDraggable.js

@@ -58,7 +58,7 @@ var useDraggable = function useDraggable(_ref) {
     if (rootEl) {
       rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
       var rootGesture = rootEl.getBoundingClientRect();
-      setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
+      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
       setDragShift(e.shiftY);
       setDragEndIndex(dragStartIndex);
       siblings.forEach(function (sibling, siblingIndex) {
@@ -68,27 +68,27 @@ var useDraggable = function useDraggable(_ref) {
         var rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
         if (dragStartIndex < siblingIndex) {
           if (rootOverSibling) {
-            if (dragDirection === "down") {
-              sibling.style.transform = "translateY(-100%)";
+            if (dragDirection === 'down') {
+              sibling.style.transform = 'translateY(-100%)';
             }
             setDragEndIndex(function (dragEndIndex) {
               return dragEndIndex + 1;
             });
           }
-          if (rootUnderSibling && dragDirection === "up") {
-            sibling.style.transform = "translateY(0)";
+          if (rootUnderSibling && dragDirection === 'up') {
+            sibling.style.transform = 'translateY(0)';
           }
         } else if (dragStartIndex > siblingIndex) {
           if (rootUnderSibling) {
-            if (dragDirection === "up") {
-              sibling.style.transform = "translateY(100%)";
+            if (dragDirection === 'up') {
+              sibling.style.transform = 'translateY(100%)';
             }
             setDragEndIndex(function (dragEndIndex) {
               return dragEndIndex - 1;
             });
           }
-          if (rootOverSibling && dragDirection === "down") {
-            sibling.style.transform = "translateY(0)";
+          if (rootOverSibling && dragDirection === 'down') {
+            sibling.style.transform = 'translateY(0)';
           }
         }
       });
@@ -98,7 +98,7 @@ var useDraggable = function useDraggable(_ref) {
     var from = dragStartIndex,
       to = dragEndIndex;
     siblings.forEach(function (sibling) {
-      sibling.style.transform = "";
+      sibling.style.transform = '';
     });
     setSiblings([]);
     setDragEndIndex(0);

package/dist/cjs/components/Cell/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.js","names":["useDraggable","rootElRef","onDragFinish","React","useState","dragging","setDragging","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { TouchEvent } from \"../Touch/Touch\";\nimport { CellProps } from \"./Cell\";\n\nexport interface DraggableProps {\n  onDragStart: () => void;\n  onDragEnd: () => void;\n  onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, \"onDragFinish\"> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<\n    \"down\" | \"up\" | undefined\n  >(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? \"down\" : \"up\");\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling =\n          rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling =\n          rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === \"down\") {\n              sibling.style.transform = \"translateY(-100%)\";\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === \"up\") {\n            sibling.style.transform = \"translateY(0)\";\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === \"up\") {\n              sibling.style.transform = \"translateY(100%)\";\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === \"down\") {\n            sibling.style.transform = \"translateY(0)\";\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = \"\";\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"mappings":";;;;;;;;;AAAA;AAcO,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAKnB;EAAA,IAJJC,SAAS,QAATA,SAAS;IACTC,YAAY,QAAZA,YAAY;EAIZ,sBAAgCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAvDC,QAAQ;IAAEC,WAAW;EAE5B,uBAAgCH,KAAK,CAACC,QAAQ,CAAgB,EAAE,CAAC;IAAA;IAA1DG,QAAQ;IAAEC,WAAW;EAC5B,uBAA4CL,KAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAA9DK,cAAc;IAAEC,iBAAiB;EACxC,uBAAwCP,KAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAA1DO,YAAY;IAAEC,eAAe;EACpC,uBAAkCT,KAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAApDS,SAAS;IAAEC,YAAY;EAC9B,wBAA0CX,KAAK,CAACC,QAAQ,CAEtDW,SAAS,CAAC;IAAA;IAFLC,aAAa;IAAEC,gBAAgB;EAItC,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IAAA;IACxB,IAAMC,MAAM,GAAGlB,SAAS,CAACmB,OAAO;IAChC,IAAI,CAACD,MAAM,EAAE;MACX;IACF;IAEAb,WAAW,CAAC,IAAI,CAAC;IAEjB,IAAIe,SAAwB,GAAG,EAAE;IACjC,6BAAIF,MAAM,CAACG,aAAa,kDAApB,sBAAsBC,UAAU,EAAE;MACpCF,SAAS,GAAGG,KAAK,CAACC,IAAI,CAACN,MAAM,CAACG,aAAa,CAACI,QAAQ,CAAkB;IACxE;IACA,IAAMC,GAAG,GAAGN,SAAS,CAACO,OAAO,CAACT,MAAM,CAAC;IAErCT,iBAAiB,CAACiB,GAAG,CAAC;IACtBf,eAAe,CAACe,GAAG,CAAC;IACpBnB,WAAW,CAACa,SAAS,CAAC;IACtBP,YAAY,CAAC,CAAC,CAAC;EACjB,CAAC;EAED,IAAMe,UAAU,GAAG,SAAbA,UAAU,CAAIC,CAAa,EAAK;IACpCA,CAAC,CAACC,aAAa,CAACC,cAAc,EAAE;IAEhC,IAAMb,MAAM,GAAGlB,SAAS,CAACmB,OAAO;IAEhC,IAAID,MAAM,EAAE;MACVA,MAAM,CAACc,KAAK,CAACC,SAAS,wBAAiBJ,CAAC,CAACK,MAAM,QAAK;MACpD,IAAMC,WAAW,GAAGjB,MAAM,CAACkB,qBAAqB,EAAE;MAElDpB,gBAAgB,CAACJ,SAAS,GAAGiB,CAAC,CAACK,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;MAC1DrB,YAAY,CAACgB,CAAC,CAACK,MAAM,CAAC;MACtBvB,eAAe,CAACH,cAAc,CAAC;MAE/BF,QAAQ,CAAC+B,OAAO,CAAC,UAACC,OAAoB,EAAEC,YAAoB,EAAK;QAC/D,IAAMC,cAAc,GAAGF,OAAO,CAACF,qBAAqB,EAAE;QACtD,IAAMK,iBAAiB,GAAGD,cAAc,CAACE,MAAM,GAAG,CAAC;QAEnD,IAAMC,eAAe,GACnBR,WAAW,CAACS,MAAM,GAAGJ,cAAc,CAACK,GAAG,GAAGJ,iBAAiB;QAC7D,IAAMK,gBAAgB,GACpBX,WAAW,CAACU,GAAG,GAAGL,cAAc,CAACI,MAAM,GAAGH,iBAAiB;QAE7D,IAAIjC,cAAc,GAAG+B,YAAY,EAAE;UACjC,IAAII,eAAe,EAAE;YACnB,IAAI5B,aAAa,KAAK,MAAM,EAAE;cAC5BuB,OAAO,CAACN,KAAK,CAACC,SAAS,GAAG,mBAAmB;YAC/C;YAEAtB,eAAe,CAAC,UAACD,YAAY;cAAA,OAAKA,YAAY,GAAG,CAAC;YAAA,EAAC;UACrD;UACA,IAAIoC,gBAAgB,IAAI/B,aAAa,KAAK,IAAI,EAAE;YAC9CuB,OAAO,CAACN,KAAK,CAACC,SAAS,GAAG,eAAe;UAC3C;QACF,CAAC,MAAM,IAAIzB,cAAc,GAAG+B,YAAY,EAAE;UACxC,IAAIO,gBAAgB,EAAE;YACpB,IAAI/B,aAAa,KAAK,IAAI,EAAE;cAC1BuB,OAAO,CAACN,KAAK,CAACC,SAAS,GAAG,kBAAkB;YAC9C;YAEAtB,eAAe,CAAC,UAACD,YAAY;cAAA,OAAKA,YAAY,GAAG,CAAC;YAAA,EAAC;UACrD;UACA,IAAIiC,eAAe,IAAI5B,aAAa,KAAK,MAAM,EAAE;YAC/CuB,OAAO,CAACN,KAAK,CAACC,SAAS,GAAG,eAAe;UAC3C;QACF;MACF,CAAC,CAAC;IACJ;EACF,CAAC;EAED,IAAMc,SAAS,GAAG,SAAZA,SAAS,GAAS;IACtB,IAAOvB,IAAI,GAAShB,cAAc;MAArBwC,EAAE,GAAqBtC,YAAY;IAEhDJ,QAAQ,CAAC+B,OAAO,CAAC,UAACC,OAAoB,EAAK;MACzCA,OAAO,CAACN,KAAK,CAACC,SAAS,GAAG,EAAE;IAC9B,CAAC,CAAC;IAEF1B,WAAW,CAAC,EAAE,CAAC;IACfI,eAAe,CAAC,CAAC,CAAC;IAClBF,iBAAiB,CAAC,CAAC,CAAC;IACpBO,gBAAgB,CAACF,SAAS,CAAC;IAC3BD,YAAY,CAAC,CAAC,CAAC;IAEfR,WAAW,CAAC,KAAK,CAAC;IAElBJ,YAAY,IAAIA,YAAY,CAAC;MAAEuB,IAAI,EAAJA,IAAI;MAAEwB,EAAE,EAAFA;IAAG,CAAC,CAAC;EAC5C,CAAC;EAED,IAAMC,iBAAoC,GAAG;IAC3ChC,WAAW,EAAXA,WAAW;IACXW,UAAU,EAAVA,UAAU;IACVmB,SAAS,EAATA,SAAS;IACT3C,QAAQ,EAARA;EACF,CAAC;EAED,OAAO6C,iBAAiB;AAC1B,CAAC;AAAC"}
+{"version":3,"file":"useDraggable.js","names":["useDraggable","rootElRef","onDragFinish","React","useState","dragging","setDragging","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart: () => void;\n  onDragEnd: () => void;\n  onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"mappings":"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"}

package/dist/cjs/components/CellButton/CellButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 export interface CellButtonProps extends SimpleCellProps {
-    mode?: "primary" | "danger";
+    mode?: 'primary' | 'danger';
     centered?: boolean;
 }
 /**

package/dist/cjs/components/CellButton/CellButton.js

@@ -9,7 +9,7 @@ exports.CellButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _SimpleCell = require("../SimpleCell/SimpleCell");
 var _excluded = ["centered", "mode", "className"];
 /**
@@ -19,13 +19,13 @@ var CellButton = function CellButton(_ref) {
   var _ref$centered = _ref.centered,
     centered = _ref$centered === void 0 ? false : _ref$centered,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "primary" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'primary' : _ref$mode,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_SimpleCell.SimpleCell, (0, _extends2.default)({
     stopPropagation: true
   }, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiCellButton", styles["CellButton--mode-".concat(mode)], centered && "vkuiCellButton--centered", className)
+    className: (0, _vkjs.classNames)("vkuiCellButton", styles["CellButton--mode-".concat(mode)], centered && "vkuiCellButton--centered", className)
   }));
 };
 exports.CellButton = CellButton;

package/dist/cjs/components/CellButton/CellButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellButton.js","names":["CellButton","centered","mode","className","restProps","classNamesString","styles"],"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport styles from \"./CellButton.module.css\";\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: \"primary\" | \"danger\";\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = \"primary\",\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNamesString(\n        styles[\"CellButton\"],\n        styles[`CellButton--mode-${mode}`],\n        centered && styles[\"CellButton--centered\"],\n        className\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAuE;AAQvE;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,yBAJrBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,sBAAU;IACT,eAAe,EAAE;EAAK,GAClBA,SAAS;IACb,SAAS,EAAE,IAAAC,4BAAgB,oBAEzBC,MAAM,4BAAqBJ,IAAI,EAAG,EAClCD,QAAQ,8BAAkC,EAC1CE,SAAS;EACT,GACF;AAEN,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"CellButton.js","names":["CellButton","centered","mode","className","restProps","classNames","styles"],"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        styles[`CellButton--mode-${mode}`],\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAuE;AAQvE;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,yBAJrBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,sBAAU;IACT,eAAe,EAAE;EAAK,GAClBA,SAAS;IACb,SAAS,EAAE,IAAAC,gBAAU,oBAEnBC,MAAM,4BAAqBJ,IAAI,EAAG,EAClCD,QAAQ,8BAAkC,EAC1CE,SAAS;EACT,GACF;AAEN,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
     description?: React.ReactNode;
     indeterminate?: boolean;

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -10,11 +10,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _Tappable = require("../Tappable/Tappable");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _icons = require("@vkontakte/icons");
 var _usePlatform = require("../../hooks/usePlatform");
-var _utils = require("../../lib/utils");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
@@ -23,7 +22,7 @@ var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditio
 var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
 var _warnOnce = require("../../lib/warnOnce");
 var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "onChange"];
-var warn = (0, _warnOnce.warnOnce)("Checkbox");
+var warn = (0, _warnOnce.warnOnce)('Checkbox');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
@@ -60,20 +59,20 @@ var Checkbox = function Checkbox(_ref) {
     }
     onChange && onChange(event);
   }, [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]);
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
     if (defaultIndeterminate && restProps.defaultChecked) {
-      warn("defaultIndeterminate и defaultChecked не могут быть true одновременно", "error");
+      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
     }
     if (indeterminate && restProps.checked) {
-      warn("indeterminate и checked не могут быть true одновременно", "error");
+      warn('indeterminate и checked не могут быть true одновременно', 'error');
     }
     if (restProps.defaultChecked && restProps.checked) {
-      warn("defaultChecked и checked не могут быть true одновременно", "error");
+      warn('defaultChecked и checked не могут быть true одновременно', 'error');
     }
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, {
     Component: "label",
-    className: (0, _classNames.classNamesString)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", (0, _getSizeYClassName.getSizeYClassName)("vkuiCheckbox", sizeY), !((0, _utils.hasReactNode)(children) || (0, _utils.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
+    className: (0, _vkjs.classNames)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", (0, _getSizeYClassName.getSizeYClassName)("vkuiCheckbox", sizeY), !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
     style: style,
     disabled: restProps.disabled,
     activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,
@@ -84,19 +83,19 @@ var Checkbox = function Checkbox(_ref) {
     className: "vkuiCheckbox__input",
     getRef: inputRef
   })), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
+    className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
   }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOn, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOn, {
     className: adaptiveSizeY.compact.className
   }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(_icons.Icon24CheckBoxOn, {
     className: adaptiveSizeY.regular.className
   }))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
+    className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
   }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOff, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOff, {
     className: adaptiveSizeY.compact.className
   }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(_icons.Icon24CheckBoxOff, {
     className: adaptiveSizeY.regular.className
   }))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
+    className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
   }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxIndetermanate, {
     width: 20,
     height: 20
@@ -112,7 +111,7 @@ var Checkbox = function Checkbox(_ref) {
     className: "vkuiCheckbox__content"
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiCheckbox__children"
-  }, children), (0, _utils.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, children), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiCheckbox__description"
   }, description)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["warn","warnOnce","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","onChange","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","classNamesString","Platform","VKCOM","getSizeYClassName","hasReactNode","disabled","IOS","ACTIVE_EFFECT_DELAY","compact","regular"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport {\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from \"@vkontakte/icons\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useAdaptivityConditionalRender } from \"../../hooks/useAdaptivityConditionalRender\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport styles from \"./Checkbox.module.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\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  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue =\n      indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(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        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(\n        \"defaultIndeterminate и defaultChecked не могут быть true одновременно\",\n        \"error\"\n      );\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={classNamesString(\n        styles[\"Checkbox\"],\n        platform === Platform.VKCOM && styles[\"Checkbox--vkcom\"],\n        getSizeYClassName(styles[\"Checkbox\"], sizeY),\n        !(hasReactNode(children) || hasReactNode(description)) &&\n          styles[\"Checkbox--simple\"],\n        className\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles[\"Checkbox__input\"]}\n        getRef={inputRef}\n      />\n      <div\n        className={classNamesString(\n          styles[\"Checkbox__icon\"],\n          styles[\"Checkbox__icon--on\"]\n        )}\n      >\n        {platform === 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\n        className={classNamesString(\n          styles[\"Checkbox__icon\"],\n          styles[\"Checkbox__icon--off\"]\n        )}\n      >\n        {platform === 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={classNamesString(\n          styles[\"Checkbox__icon\"],\n          styles[\"Checkbox__icon--indeterminate\"]\n        )}\n      >\n        {platform === 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__children\"]}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles[\"Checkbox__description\"]}>\n            {description}\n          </Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["warn","warnOnce","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","onChange","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","classNames","Platform","VKCOM","getSizeYClassName","hasReactNode","disabled","IOS","ACTIVE_EFFECT_DELAY","compact","regular"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport {\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from '@vkontakte/icons';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\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  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\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: CheckboxProps['onChange'] = 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    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        getSizeYClassName(styles['Checkbox'], sizeY),\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles['Checkbox__input']}\n        getRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === 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 === 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 === 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__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare type ChipValue = string | number;
 export interface ChipOption {
     value?: ChipValue;

package/dist/cjs/components/Chip/Chip.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _utils = require("../../lib/utils");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Tappable = require("../Tappable/Tappable");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
@@ -22,14 +22,14 @@ var _excluded = ["value", "option", "removable", "onRemove", "removeAriaLabel",
  */
 var Chip = function Chip(_ref) {
   var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? "" : _ref$value,
+    value = _ref$value === void 0 ? '' : _ref$value,
     option = _ref.option,
     _ref$removable = _ref.removable,
     removable = _ref$removable === void 0 ? true : _ref$removable,
     _ref$onRemove = _ref.onRemove,
-    onRemove = _ref$onRemove === void 0 ? _utils.noop : _ref$onRemove,
+    onRemove = _ref$onRemove === void 0 ? _vkjs.noop : _ref$onRemove,
     _ref$removeAriaLabel = _ref.removeAriaLabel,
-    removeAriaLabel = _ref$removeAriaLabel === void 0 ? "Удалить" : _ref$removeAriaLabel,
+    removeAriaLabel = _ref$removeAriaLabel === void 0 ? 'Удалить' : _ref$removeAriaLabel,
     _ref$before = _ref.before,
     before = _ref$before === void 0 ? null : _ref$before,
     after = _ref.after,
@@ -43,19 +43,19 @@ var Chip = function Chip(_ref) {
   }, [onRemove, value]);
   var title = (0, _utils.getTitleFromChildren)(children);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiChip", (0, _getSizeYClassName.getSizeYClassName)("vkuiChip", sizeY), removable && "vkuiChip--removable", className),
+    className: (0, _vkjs.classNames)("vkuiChip", (0, _getSizeYClassName.getSizeYClassName)("vkuiChip", sizeY), removable && "vkuiChip--removable", className),
     role: "option",
     "aria-label": title
   }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "vkuiChip__in",
     role: "presentation"
-  }, (0, _utils.hasReactNode)(before) && /*#__PURE__*/React.createElement("div", {
+  }, (0, _vkjs.hasReactNode)(before) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiChip__before"
   }, before), /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiChip__content",
     title: title,
-    "aria-hidden": "true"
-  }, children), (0, _utils.hasReactNode)(after) && /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": true
+  }, children), (0, _vkjs.hasReactNode)(after) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiChip__after"
   }, after), removable && /*#__PURE__*/React.createElement(_Tappable.Tappable, {
     Component: "button",

package/dist/cjs/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","className","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","classNamesString","getSizeYClassName","hasReactNode"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Chip.module.css\";\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value]\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"Chip\"],\n        getSizeYClassName(styles[\"Chip\"], sizeY),\n        removable && styles[\"Chip--removable\"],\n        className\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles[\"Chip__in\"]} role=\"presentation\">\n        {hasReactNode(before) && (\n          <div className={styles[\"Chip__before\"]}>{before}</div>\n        )}\n        <Footnote\n          className={styles[\"Chip__content\"]}\n          title={title}\n          aria-hidden=\"true\"\n        >\n          {children}\n        </Footnote>\n        {hasReactNode(after) && (\n          <div className={styles[\"Chip__after\"]}>{after}</div>\n        )}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles[\"Chip__remove\"]}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA2BpE;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGC,WAAI;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,IAAMC,eAAe,GAAGC,KAAK,CAACC,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3Bb,QAAQ,CAACa,KAAK,EAAEhB,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMiB,KAAK,GAAG,IAAAC,2BAAoB,EAACV,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAE,IAAAW,4BAAgB,cAEzB,IAAAC,oCAAiB,cAAiBR,KAAK,CAAC,EACxCV,SAAS,yBAA6B,EACtCO,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYQ;EAAM,GACdP,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpD,IAAAW,mBAAY,EAACf,MAAM,CAAC,iBACnB;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAChD,eACD,oBAAC,kBAAQ;IACP,SAAS,qBAA0B;IACnC,KAAK,EAAEW,KAAM;IACb,eAAY;EAAM,GAEjBT,QAAQ,CACA,EACV,IAAAa,mBAAY,EAACd,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAC9C,EAEAL,SAAS,iBACR,oBAAC,kBAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAEW,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeR,eAAe,cAAIY,KAAK;EAAG,gBAE1C,oBAAC,mBAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"file":"Chip.js","names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","className","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","classNames","getSizeYClassName","hasReactNode"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Tappable } from '../Tappable/Tappable';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Chip.module.css';\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = '',\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = 'Удалить',\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value],\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNames(\n        styles['Chip'],\n        getSizeYClassName(styles['Chip'], sizeY),\n        removable && styles['Chip--removable'],\n        className,\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles['Chip__in']} role=\"presentation\">\n        {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n        <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n          {children}\n        </Footnote>\n        {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles['Chip__remove']}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AA2BpE;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGC,UAAI;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,IAAMC,eAAe,GAAGC,KAAK,CAACC,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3Bb,QAAQ,CAACa,KAAK,EAAEhB,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMiB,KAAK,GAAG,IAAAC,2BAAoB,EAACV,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAE,IAAAW,gBAAU,cAEnB,IAAAC,oCAAiB,cAAiBR,KAAK,CAAC,EACxCV,SAAS,yBAA6B,EACtCO,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYQ;EAAM,GACdP,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpD,IAAAW,kBAAY,EAACf,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAAO,eAC/E,oBAAC,kBAAQ;IAAC,SAAS,qBAA0B;IAAC,KAAK,EAAEW,KAAM;IAAC;EAAW,GACpET,QAAQ,CACA,EACV,IAAAa,kBAAY,EAACd,KAAK,CAAC,iBAAI;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAAO,EAE3EL,SAAS,iBACR,oBAAC,kBAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAEW,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeR,eAAe,cAAIY,KAAK;EAAG,gBAE1C,oBAAC,mBAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC;AAAC"}

package/dist/cjs/components/ChipsInput/ChipsInput.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { FormFieldProps } from "../FormField/FormField";
-import { ChipOption } from "../Chip/Chip";
-import { ChipsInputBaseProps } from "../ChipsInputBase/ChipsInputBase";
+import { FormFieldProps } from '../FormField/FormField';
+import { ChipOption } from '../Chip/Chip';
+import { ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';
 export interface ChipsInputProps<Option extends ChipOption> extends ChipsInputBaseProps<Option>, FormFieldProps {
 }
 /**

package/dist/cjs/components/ChipsInput/ChipsInput.js

@@ -9,7 +9,7 @@ exports.ChipsInput = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _FormField = require("../FormField/FormField");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _ChipsInputBase = require("../ChipsInputBase/ChipsInputBase");
 var _excluded = ["style", "className", "getRootRef", "before", "after", "status"];
 /**
@@ -25,7 +25,7 @@ var ChipsInput = function ChipsInput(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_FormField.FormField, {
     getRootRef: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiChipsInput", className),
+    className: (0, _vkjs.classNames)("vkuiChipsInput", className),
     style: style,
     disabled: restProps.disabled,
     before: before,

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

@@ -1 +1 @@
-{"version":3,"file":"ChipsInput.js","names":["ChipsInput","style","className","getRootRef","before","after","status","restProps","classNamesString","disabled","readOnly"],"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { ChipOption } from \"../Chip/Chip\";\nimport {\n  ChipsInputBase,\n  ChipsInputBaseProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport styles from \"./ChipsInput.module.css\";\n\nexport interface ChipsInputProps<Option extends ChipOption>\n  extends ChipsInputBaseProps<Option>,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n  style,\n  className,\n  getRootRef,\n  before,\n  after,\n  status,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNamesString(styles[\"ChipsInput\"], className)}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n      status={status}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAG0C;AAO1C;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,oBAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAE,IAAAK,4BAAgB,oBAAuBN,SAAS,CAAE;IAC7D,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACE,QAAS;IAC7B,MAAM,EAAEL,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACE,QAAS;IAClC,iBAAeF,SAAS,CAACG,QAAS;IAClC,MAAM,EAAEJ;EAAO,gBAEf,oBAAC,8BAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC;AAAC"}
+{"version":3,"file":"ChipsInput.js","names":["ChipsInput","style","className","getRootRef","before","after","status","restProps","classNames","disabled","readOnly"],"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ChipOption } from '../Chip/Chip';\nimport { ChipsInputBase, ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';\nimport styles from './ChipsInput.module.css';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n  extends ChipsInputBaseProps<Option>,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n  style,\n  className,\n  getRootRef,\n  before,\n  after,\n  status,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNames(styles['ChipsInput'], className)}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n      status={status}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAuF;AAOvF;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,oBAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAE,IAAAK,gBAAU,oBAAuBN,SAAS,CAAE;IACvD,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACE,QAAS;IAC7B,MAAM,EAAEL,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACE,QAAS;IAClC,iBAAeF,SAAS,CAACG,QAAS;IAClC,MAAM,EAAEJ;EAAO,gBAEf,oBAAC,8BAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC;AAAC"}

package/dist/cjs/components/ChipsInputBase/ChipsInputBase.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasAlign, HasRef, HasRootRef } from "../../types";
-import { ChipOption, ChipValue, RenderChip } from "../Chip/Chip";
-export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign {
+import * as React from 'react';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';
+export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign {
     value: Option[];
     inputValue?: string;
     onChange?: (o: Option[]) => void;