@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cssm/components/CalendarTime/CalendarTime.js

@@ -1,34 +1,34 @@
-import * as React from "react";
-import { setHours, setMinutes } from "../../lib/date";
-import { CustomSelect } from "../CustomSelect/CustomSelect";
-import { Button } from "../Button/Button";
-import { SizeType } from "../../lib/adaptivity";
-import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
+import * as React from 'react';
+import { setHours, setMinutes } from '../../lib/date';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { Button } from '../Button/Button';
+import { SizeType } from '../../lib/adaptivity';
+import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import "./CalendarTime.module.css";
 var hours = [];
 for (var i = 0; i < 24; i += 1) {
   hours.push({
     value: i,
-    label: String(i).padStart(2, "0")
+    label: String(i).padStart(2, '0')
   });
 }
 var minutes = [];
 for (var _i = 0; _i < 60; _i += 1) {
   minutes.push({
     value: _i,
-    label: String(_i).padStart(2, "0")
+    label: String(_i).padStart(2, '0')
   });
 }
 export var CalendarTime = function CalendarTime(_ref) {
   var value = _ref.value,
     _ref$doneButtonText = _ref.doneButtonText,
-    doneButtonText = _ref$doneButtonText === void 0 ? "Готово" : _ref$doneButtonText,
+    doneButtonText = _ref$doneButtonText === void 0 ? 'Готово' : _ref$doneButtonText,
     onChange = _ref.onChange,
     onClose = _ref.onClose,
     _ref$changeHoursAriaL = _ref.changeHoursAriaLabel,
-    changeHoursAriaLabel = _ref$changeHoursAriaL === void 0 ? "Изменить час" : _ref$changeHoursAriaL,
+    changeHoursAriaLabel = _ref$changeHoursAriaL === void 0 ? 'Изменить час' : _ref$changeHoursAriaL,
     _ref$changeMinutesAri = _ref.changeMinutesAriaLabel,
-    changeMinutesAriaLabel = _ref$changeMinutesAri === void 0 ? "Изменить минуту" : _ref$changeMinutesAri;
+    changeMinutesAriaLabel = _ref$changeMinutesAri === void 0 ? 'Изменить минуту' : _ref$changeMinutesAri;
   var onHoursChange = React.useCallback(function (event) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(setHours(value, Number(event.target.value)));
   }, [onChange, value]);

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarTime.js","names":["React","setHours","setMinutes","CustomSelect","Button","SizeType","AdaptivityProvider","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","COMPACT","getHours","getMinutes"],"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { setHours, setMinutes } from \"../../lib/date\";\nimport { CustomSelect } from \"../CustomSelect/CustomSelect\";\nimport { Button } from \"../Button/Button\";\nimport { SizeType } from \"../../lib/adaptivity\";\nimport { AdaptivityProvider } from \"../AdaptivityProvider/AdaptivityProvider\";\nimport styles from \"./CalendarTime.module.css\";\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursAriaLabel?: string;\n  changeMinutesAriaLabel?: string;\n  onChange?(value: Date): void;\n  onClose?(): void;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, \"0\") });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, \"0\") });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = \"Готово\",\n  onChange,\n  onClose,\n  changeHoursAriaLabel = \"Изменить час\",\n  changeMinutesAriaLabel = \"Изменить минуту\",\n}: CalendarTimeProps) => {\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value]\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value]\n  );\n\n  return (\n    <div className={styles[\"CalendarTime\"]}>\n      <div className={styles[\"CalendarTime__picker\"]}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getHours()}\n            options={hours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles[\"CalendarTime__divider\"]}>:</div>\n      <div className={styles[\"CalendarTime__picker\"]}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getMinutes()}\n            options={minutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles[\"CalendarTime__button\"]}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <Button\n            mode=\"secondary\"\n            onClick={onClose}\n            size=\"l\"\n            aria-label={doneButtonText}\n          >\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CalendarTime.js","names":["React","setHours","setMinutes","CustomSelect","Button","SizeType","AdaptivityProvider","hours","i","push","value","label","String","padStart","minutes","CalendarTime","doneButtonText","onChange","onClose","changeHoursAriaLabel","changeMinutesAriaLabel","onHoursChange","useCallback","event","Number","target","onMinutesChange","COMPACT","getHours","getMinutes"],"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Button } from '../Button/Button';\nimport { SizeType } from '../../lib/adaptivity';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursAriaLabel?: string;\n  changeMinutesAriaLabel?: string;\n  onChange?(value: Date): void;\n  onClose?(): void;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = 'Готово',\n  onChange,\n  onClose,\n  changeHoursAriaLabel = 'Изменить час',\n  changeMinutesAriaLabel = 'Изменить минуту',\n}: CalendarTimeProps) => {\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={styles['CalendarTime']}>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getHours()}\n            options={hours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__divider']}>:</div>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <CustomSelect\n            value={value.getMinutes()}\n            options={minutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesAriaLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__button']}>\n        <AdaptivityProvider sizeY={SizeType.COMPACT}>\n          <Button mode=\"secondary\" onClick={onClose} size=\"l\" aria-label={doneButtonText}>\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,UAAU,QAAQ,gBAAgB;AACrD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,kBAAkB,QAAQ,0CAA0C;AAAC;AAY9E,IAAMC,KAGJ,GAAG,EAAE;AACP,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,EAAE,EAAEA,CAAC,IAAI,CAAC,EAAE;EAC9BD,KAAK,CAACE,IAAI,CAAC;IAAEC,KAAK,EAAEF,CAAC;IAAEG,KAAK,EAAEC,MAAM,CAACJ,CAAC,CAAC,CAACK,QAAQ,CAAC,CAAC,EAAE,GAAG;EAAE,CAAC,CAAC;AAC7D;AAEA,IAAMC,OAGJ,GAAG,EAAE;AACP,KAAK,IAAIN,EAAC,GAAG,CAAC,EAAEA,EAAC,GAAG,EAAE,EAAEA,EAAC,IAAI,CAAC,EAAE;EAC9BM,OAAO,CAACL,IAAI,CAAC;IAAEC,KAAK,EAAEF,EAAC;IAAEG,KAAK,EAAEC,MAAM,CAACJ,EAAC,CAAC,CAACK,QAAQ,CAAC,CAAC,EAAE,GAAG;EAAE,CAAC,CAAC;AAC/D;AAEA,OAAO,IAAME,YAAY,GAAG,SAAfA,YAAY,OAOA;EAAA,IANvBL,KAAK,QAALA,KAAK;IAAA,2BACLM,cAAc;IAAdA,cAAc,oCAAG,QAAQ;IACzBC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,6BACPC,oBAAoB;IAApBA,oBAAoB,sCAAG,cAAc;IAAA,6BACrCC,sBAAsB;IAAtBA,sBAAsB,sCAAG,iBAAiB;EAE1C,IAAMC,aAAa,GAAGrB,KAAK,CAACsB,WAAW,CACrC,UAACC,KAA2C;IAAA,OAC1CN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGhB,QAAQ,CAACS,KAAK,EAAEc,MAAM,CAACD,KAAK,CAACE,MAAM,CAACf,KAAK,CAAC,CAAC,CAAC;EAAA,GACzD,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EACD,IAAMgB,eAAe,GAAG1B,KAAK,CAACsB,WAAW,CACvC,UAACC,KAA2C;IAAA,OAC1CN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGf,UAAU,CAACQ,KAAK,EAAEc,MAAM,CAACD,KAAK,CAACE,MAAM,CAACf,KAAK,CAAC,CAAC,CAAC;EAAA,GAC3D,CAACO,QAAQ,EAAEP,KAAK,CAAC,CAClB;EAED,oBACE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,kBAAkB;IAAC,KAAK,EAAEL,QAAQ,CAACsB;EAAQ,gBAC1C,oBAAC,YAAY;IACX,KAAK,EAAEjB,KAAK,CAACkB,QAAQ,EAAG;IACxB,OAAO,EAAErB,KAAM;IACf,QAAQ,EAAEc,aAAc;IACxB,mBAAmB,EAAE,KAAM;IAC3B,cAAYF;EAAqB,EACjC,CACiB,CACjB,eACN;IAAK,SAAS;EAAkC,GAAC,GAAC,CAAM,eACxD;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,kBAAkB;IAAC,KAAK,EAAEd,QAAQ,CAACsB;EAAQ,gBAC1C,oBAAC,YAAY;IACX,KAAK,EAAEjB,KAAK,CAACmB,UAAU,EAAG;IAC1B,OAAO,EAAEf,OAAQ;IACjB,QAAQ,EAAEY,eAAgB;IAC1B,mBAAmB,EAAE,KAAM;IAC3B,cAAYN;EAAuB,EACnC,CACiB,CACjB,eACN;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,kBAAkB;IAAC,KAAK,EAAEf,QAAQ,CAACsB;EAAQ,gBAC1C,oBAAC,MAAM;IAAC,IAAI,EAAC,WAAW;IAAC,OAAO,EAAET,OAAQ;IAAC,IAAI,EAAC,GAAG;IAAC,cAAYF;EAAe,GAC5EA,cAAc,CACR,CACU,CACjB,CACF;AAEV,CAAC"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-    mode?: "tint" | "shadow" | "outline";
+    mode?: 'tint' | 'shadow' | 'outline';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Card

package/dist/cssm/components/Card/Card.js

@@ -1,22 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "children", "getRootRef", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import "./Card.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */
 export var Card = function Card(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "tint" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'tint' : _ref$mode,
     children = _ref.children,
     getRootRef = _ref.getRootRef,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNamesString("vkuiCard", styles["Card--mode-".concat(mode)], className)
+    className: classNames("vkuiCard", styles["Card--mode-".concat(mode)], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiCard__in"
   }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","classNamesString","Card","mode","children","getRootRef","className","restProps","styles"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport styles from \"./Card.module.css\";\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: \"tint\" | \"shadow\" | \"outline\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = \"tint\",\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNamesString(\n        styles[\"Card\"],\n        styles[`Card--mode-${mode}`],\n        className\n      )}\n    >\n      <div className={styles[\"Card__in\"]}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AAUxD;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAMA;EAAA,qBALfC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEJ,gBAAgB,aAEzBO,MAAM,sBAAeL,IAAI,EAAG,EAC5BG,SAAS;EACT,iBAEF;IAAK,SAAS;EAAqB,GAAEF,QAAQ,CAAO,CAChD;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Card.js","names":["React","classNames","Card","mode","children","getRootRef","className","restProps","styles"],"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(styles['Card'], styles[`Card--mode-${mode}`], className)}\n    >\n      <div className={styles['Card__in']}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAU7C;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAMA;EAAA,qBALfC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEJ,UAAU,aAAiBO,MAAM,sBAAeL,IAAI,EAAG,EAAEG,SAAS;EAAE,iBAE/E;IAAK,SAAS;EAAqB,GAAEF,QAAQ,CAAO,CAChD;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,3 +1,3 @@
-.vkuiCard{background:var(--vkui--color_background_secondary);border-radius:var(--vkui--size_card_border_radius--regular);position:relative}.vkuiCard__in{border-radius:inherit;position:relative;z-index:2}.vkuiCard--mode-shadow{box-shadow:0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08);box-shadow:var(
+.vkuiCard{background:var(--vkui--color_background_secondary);border-radius:var(--vkui--size_card_border_radius--regular);position:relative}.vkuiCard__in{border-radius:inherit;position:relative}.vkuiCard--mode-shadow{box-shadow:0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08);box-shadow:var(
     --vkui--elevation3,0 2px 24px 0 rgba(0,0,0,.08),0 0 2px 0 rgba(0,0,0,.08)
-  )}.vkuiCard--mode-outline,.vkuiCard--mode-shadow{background:var(--vkui--color_background_modal)}.vkuiCard--mode-outline:before{border:var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);border-radius:inherit;box-sizing:border-box;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.vkuiCardScroll .vkuiCard{flex-shrink:0;margin-right:var(--vkui--size_cardgrid_padding--regular)}.vkuiCardScroll .vkuiCard:last-of-type{margin-right:0}.vkuiCardScroll--size-s .vkuiCard{width:40%}.vkuiCardScroll--size-m .vkuiCard{width:62%}.vkuiCardScroll--size-l .vkuiCard{margin-right:var(--vkui--size_base_padding_horizontal--regular);width:calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2)}.vkuiGroup--mode-card .vkuiCardScroll--size-l .vkuiCard,.vkuiSplitCol--spaced .vkuiCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}.vkuiGroup--mode-card .vkuiCardScroll--size-l .vkuiCard:last-of-type,.vkuiSplitCol--spaced .vkuiCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}@media (min-width:768px){.vkuiGroup--mode-none .vkuiCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}.vkuiGroup--mode-none .vkuiCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}}
+  )}.vkuiCard--mode-outline,.vkuiCard--mode-shadow{background:var(--vkui--color_background_modal)}.vkuiCard--mode-outline:after{border:var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);border-radius:inherit;box-sizing:border-box;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiCardScroll .vkuiCard{flex-shrink:0;margin-right:var(--vkui--size_cardgrid_padding--regular)}.vkuiCardScroll .vkuiCard:last-of-type{margin-right:0}.vkuiCardScroll--size-s .vkuiCard{width:40%}.vkuiCardScroll--size-m .vkuiCard{width:62%}.vkuiCardScroll--size-l .vkuiCard{margin-right:var(--vkui--size_base_padding_horizontal--regular);width:calc(100% - var(--vkui--size_base_padding_horizontal--regular) * 2)}.vkuiGroup--mode-card .vkuiCardScroll--size-l .vkuiCard,.vkuiSplitCol--spaced .vkuiCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}.vkuiGroup--mode-card .vkuiCardScroll--size-l .vkuiCard:last-of-type,.vkuiSplitCol--spaced .vkuiCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}@media (min-width:768px){.vkuiGroup--mode-none .vkuiCardScroll--size-l .vkuiCard:last-of-type{margin-right:0}.vkuiGroup--mode-none .vkuiCardScroll--size-l .vkuiCard{margin-right:16px;width:calc(100% - 32px)}}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: "s" | "m" | "l";
+    size?: 's' | 'm' | 'l';
     /**
      * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа
      */

package/dist/cssm/components/CardGrid/CardGrid.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "size", "spaced", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import "./CardGrid.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
@@ -12,7 +12,7 @@ import "./CardGrid.module.css";
 export var CardGrid = function CardGrid(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "s" : _ref$size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
     _ref$spaced = _ref.spaced,
     spaced = _ref$spaced === void 0 ? false : _ref$spaced,
     className = _ref.className,
@@ -20,7 +20,7 @@ export var CardGrid = function CardGrid(_ref) {
   var _useAdaptivity = useAdaptivity(),
     sizeX = _useAdaptivity.sizeX;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", styles["CardGrid--size-".concat(size)], getSizeXClassName("vkuiCardGrid", sizeX), className)
+    className: classNames("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", styles["CardGrid--size-".concat(size)], getSizeXClassName("vkuiCardGrid", sizeX), className)
   }), children);
 };
 var styles = {

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

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.js","names":["React","classNamesString","getSizeXClassName","useAdaptivity","CardGrid","children","size","spaced","className","restProps","sizeX","styles"],"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./CardGrid.module.css\";\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: \"s\" | \"m\" | \"l\";\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  children,\n  size = \"s\",\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"CardGrid\"],\n        spaced && styles[\"CardGrid--spaced\"],\n        styles[`CardGrid--size-${size}`],\n        getSizeXClassName(styles[\"CardGrid\"], sizeX),\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAW1D;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,IALnBC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBN,aAAa,EAAE;IAAzBO,KAAK,kBAALA,KAAK;EAEb,oBACE,wCACMD,SAAS;IACb,SAAS,EAAER,gBAAgB,iBAEzBM,MAAM,0BAA8B,EACpCI,MAAM,0BAAmBL,IAAI,EAAG,EAChCJ,iBAAiB,iBAAqBQ,KAAK,CAAC,EAC5CF,SAAS;EACT,IAEDH,QAAQ,CACL;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"CardGrid.js","names":["React","classNames","getSizeXClassName","useAdaptivity","CardGrid","children","size","spaced","className","restProps","sizeX","styles"],"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './CardGrid.module.css';\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        spaced && styles['CardGrid--spaced'],\n        styles[`CardGrid--size-${size}`],\n        getSizeXClassName(styles['CardGrid'], sizeX),\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAW1D;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAMA;EAAA,IALnBC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IAAA,mBACVC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBN,aAAa,EAAE;IAAzBO,KAAK,kBAALA,KAAK;EAEb,oBACE,wCACMD,SAAS;IACb,SAAS,EAAER,UAAU,iBAEnBM,MAAM,0BAA8B,EACpCI,MAAM,0BAAmBL,IAAI,EAAG,EAChCJ,iBAAiB,iBAAqBQ,KAAK,CAAC,EAC5CF,SAAS;EACT,IAEDH,QAAQ,CACL;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { HorizontalScrollProps } from "../HorizontalScroll/HorizontalScroll";
+import * as React from 'react';
+import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
 export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
      */
-    size?: "s" | "m" | "l" | false;
-    showArrows?: HorizontalScrollProps["showArrows"];
+    size?: 's' | 'm' | 'l' | false;
+    showArrows?: HorizontalScrollProps['showArrows'];
     withSpaces?: boolean;
 }
 /**

package/dist/cssm/components/CardScroll/CardScroll.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "size", "showArrows", "withSpaces", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll";
-import { useDOM } from "../../lib/dom";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { HorizontalScroll } from '../HorizontalScroll/HorizontalScroll';
+import { useDOM } from '../../lib/dom';
 import "./CardScroll.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
@@ -15,7 +15,7 @@ import "./CardScroll.module.css";
 export var CardScroll = function CardScroll(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "s" : _ref$size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
     _ref$showArrows = _ref.showArrows,
     showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
     _ref$withSpaces = _ref.withSpaces,
@@ -63,7 +63,7 @@ export var CardScroll = function CardScroll(_ref) {
     return slide.offsetLeft - gapRef.current.offsetWidth;
   }
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiCardScroll", getSizeXClassName("vkuiCardScroll", sizeX), styles["CardScroll--size-".concat(size)], withSpaces && "vkuiCardScroll--withSpaces", className)
+    className: classNames("vkuiCardScroll", getSizeXClassName("vkuiCardScroll", sizeX), styles["CardScroll--size-".concat(size)], withSpaces && "vkuiCardScroll--withSpaces", className)
   }), /*#__PURE__*/React.createElement(HorizontalScroll, {
     getScrollToLeft: getScrollToLeft,
     getScrollToRight: getScrollToRight,

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

@@ -1 +1 @@
-{"version":3,"file":"CardScroll.js","names":["React","classNamesString","getSizeXClassName","useAdaptivity","HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","className","restProps","sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","styles"],"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport { useDOM } from \"../../lib/dom\";\nimport styles from \"./CardScroll.module.css\";\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: \"s\" | \"m\" | \"l\" | false;\n  showArrows?: HorizontalScrollProps[\"showArrows\"];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = \"s\",\n  showArrows = true,\n  withSpaces = true,\n  className,\n  ...restProps\n}: CardScrollProps) => {\n  const { sizeX } = useAdaptivity();\n\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = (\n      [...refContainer.current.children] as HTMLElement[]\n    ).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft -\n      (containerWidth - slide.offsetWidth) +\n      gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) =>\n        el.offsetLeft + el.offsetWidth - offset > containerWidth\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"CardScroll\"],\n        getSizeXClassName(styles[\"CardScroll\"], sizeX),\n        styles[`CardScroll--size-${size}`],\n        withSpaces && styles[\"CardScroll--withSpaces\"],\n        className\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles[\"CardScroll__in\"]} ref={refContainer}>\n          <span className={styles[\"CardScroll__gap\"]} ref={gapRef} />\n          {children}\n          <span className={styles[\"CardScroll__gap\"]} />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CardScroll.js","names":["React","classNames","getSizeXClassName","useAdaptivity","HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","className","restProps","sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","styles"],"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { useDOM } from '../../lib/dom';\nimport styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  withSpaces = true,\n  className,\n  ...restProps\n}: CardScrollProps) => {\n  const { sizeX } = useAdaptivity();\n\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardScroll'],\n        getSizeXClassName(styles['CardScroll'], sizeX),\n        styles[`CardScroll--size-${size}`],\n        withSpaces && styles['CardScroll--withSpaces'],\n        className,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { SimpleCellProps } from "../SimpleCell/SimpleCell";
-import { HasRootRef } from "../../types";
-import { RemovableProps } from "../Removable/Removable";
-export interface CellProps extends Omit<SimpleCellProps, "getRootRef">, RemovableProps, HasRootRef<HTMLDivElement> {
-    mode?: "removable" | "selectable";
+import { SimpleCellProps } from '../SimpleCell/SimpleCell';
+import { HasRootRef } from '../../types';
+import { RemovableProps } from '../Removable/Removable';
+export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, RemovableProps, HasRootRef<HTMLDivElement> {
+    mode?: 'removable' | 'selectable';
     /**
      * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
      */

package/dist/cssm/components/Cell/Cell.js

@@ -2,18 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "draggable", "Component", "onChange", "name", "value", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
   _excluded2 = ["dragging"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { noop } from "../../lib/utils";
-import { Platform } from "../../lib/platform";
-import { SimpleCell } from "../SimpleCell/SimpleCell";
-import { Removable } from "../Removable/Removable";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useDraggable } from "./useDraggable";
-import { ListContext } from "../List/ListContext";
-import { CellDragger } from "./CellDragger/CellDragger";
-import { CellCheckbox } from "./CellCheckbox/CellCheckbox";
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { SimpleCell } from '../SimpleCell/SimpleCell';
+import { Removable } from '../Removable/Removable';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useDraggable } from './useDraggable';
+import { ListContext } from '../List/ListContext';
+import { CellDragger } from './CellDragger/CellDragger';
+import { CellCheckbox } from './CellCheckbox/CellCheckbox';
 import "./Cell.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
@@ -23,7 +22,7 @@ export var Cell = function Cell(_ref) {
     _ref$onRemove = _ref.onRemove,
     _onRemove = _ref$onRemove === void 0 ? noop : _ref$onRemove,
     _ref$removePlaceholde = _ref.removePlaceholder,
-    removePlaceholder = _ref$removePlaceholde === void 0 ? "Удалить" : _ref$removePlaceholde,
+    removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
     onDragFinish = _ref.onDragFinish,
     before = _ref.before,
     after = _ref.after,
@@ -37,12 +36,12 @@ export var Cell = function Cell(_ref) {
     defaultChecked = _ref.defaultChecked,
     getRootRef = _ref.getRootRef,
     _ref$draggerLabel = _ref.draggerLabel,
-    draggerLabel = _ref$draggerLabel === void 0 ? "Перенести ячейку" : _ref$draggerLabel,
+    draggerLabel = _ref$draggerLabel === void 0 ? 'Перенести ячейку' : _ref$draggerLabel,
     className = _ref.className,
     style = _ref.style,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var selectable = mode === "selectable";
-  var removable = mode === "removable";
+  var selectable = mode === 'selectable';
+  var removable = mode === 'removable';
   var platform = usePlatform();
   var rootElRef = useExternRef(getRootRef);
   var _useDraggable = useDraggable({
@@ -85,20 +84,20 @@ export var Cell = function Cell(_ref) {
   }
   var simpleCellDisabled = draggable && !selectable || removable || disabled;
   var hasActive = !simpleCellDisabled && !dragging;
-  var cellClasses = classNamesString("vkuiCell", platform === Platform.IOS && "vkuiCell--ios", dragging && "vkuiCell--dragging", removable && "vkuiCell--removable", selectable && "vkuiCell--selectable", disabled && "vkuiCell--disabled");
+  var cellClasses = classNames("vkuiCell", platform === Platform.IOS && "vkuiCell--ios", dragging && "vkuiCell--dragging", removable && "vkuiCell--removable", selectable && "vkuiCell--selectable", disabled && "vkuiCell--disabled");
   var simpleCell = /*#__PURE__*/React.createElement(SimpleCell, _extends({
     hasActive: hasActive,
     hasHover: hasActive
   }, restProps, {
     className: "vkuiCell__content",
     disabled: simpleCellDisabled,
-    Component: selectable ? "label" : Component,
+    Component: selectable ? 'label' : Component,
     before: /*#__PURE__*/React.createElement(React.Fragment, null, draggable && platform !== Platform.IOS && dragger, selectable && checkbox, before),
     after: /*#__PURE__*/React.createElement(React.Fragment, null, draggable && platform === Platform.IOS && dragger, after)
   }));
   if (removable) {
     return /*#__PURE__*/React.createElement(Removable, {
-      className: classNamesString(cellClasses, className),
+      className: classNames(cellClasses, className),
       style: style,
       getRootRef: rootElRef,
       removePlaceholder: removePlaceholder,
@@ -108,7 +107,7 @@ export var Cell = function Cell(_ref) {
     }, simpleCell);
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: classNamesString(cellClasses, className),
+    className: classNames(cellClasses, className),
     style: style,
     ref: rootElRef
   }, simpleCell);

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":["React","classNamesString","noop","Platform","SimpleCell","Removable","usePlatform","useExternRef","useDraggable","ListContext","CellDragger","CellCheckbox","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { Platform } from \"../../lib/platform\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport { HasRootRef } from \"../../types\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDraggable } from \"./useDraggable\";\nimport { ListContext } from \"../List/ListContext\";\nimport { CellDragger } from \"./CellDragger/CellDragger\";\nimport { CellCheckbox, CellCheckboxProps } from \"./CellCheckbox/CellCheckbox\";\nimport styles from \"./Cell.module.css\";\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, \"getRootRef\">,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: \"removable\" | \"selectable\";\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = \"Перенести ячейку\",\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === \"selectable\";\n  const removable = mode === \"removable\";\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles[\"Cell__dragger\"]}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = (\n      <CellCheckbox className={styles[\"Cell__checkbox\"]} {...checkboxProps} />\n    );\n  }\n\n  const simpleCellDisabled =\n    (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNamesString(\n    styles[\"Cell\"],\n    platform === Platform.IOS && styles[\"Cell--ios\"],\n    dragging && styles[\"Cell--dragging\"],\n    removable && styles[\"Cell--removable\"],\n    selectable && styles[\"Cell--selectable\"],\n    disabled && styles[\"Cell--disabled\"]\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles[\"Cell__content\"]}\n      disabled={simpleCellDisabled}\n      Component={selectable ? \"label\" : Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNamesString(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div\n      className={classNamesString(cellClasses, className)}\n      style={style}\n      ref={rootElRef}\n    >\n      {simpleCell}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,IAAI,QAAQ,iBAAiB;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAyB,0BAA0B;AAEtE,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,WAAW,QAAQ,qBAAqB;AACjD,SAASC,WAAW,QAAQ,2BAA2B;AACvD,SAASC,YAAY,QAA2B,6BAA6B;AAAC;AAqC9E;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAoBA;EAAA,IAnBfC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,SAAQ,8BAAGZ,IAAI;IAAA,6BACfa,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,UAAU,QAAVA,UAAU;IAAA,yBACVC,YAAY;IAAZA,YAAY,kCAAG,kBAAkB;IACjCC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,SAAS;EAEZ,IAAMC,UAAU,GAAGnB,IAAI,KAAK,YAAY;EACxC,IAAMoB,SAAS,GAAGpB,IAAI,KAAK,WAAW;EAEtC,IAAMqB,QAAQ,GAAG5B,WAAW,EAAE;EAE9B,IAAM6B,SAAS,GAAG5B,YAAY,CAACoB,UAAU,CAAC;EAE1C,oBAAwCnB,YAAY,CAAC;MACnD2B,SAAS,EAATA,SAAS;MACTnB,YAAY,EAAZA;IACF,CAAC,CAAC;IAHMoB,QAAQ,iBAARA,QAAQ;IAAKC,cAAc;EAKnC,wBAAuBrC,KAAK,CAACsC,UAAU,CAAC7B,WAAW,CAAC;IAA5C8B,UAAU,qBAAVA,UAAU;EAClBvC,KAAK,CAACwC,SAAS,CAAC,YAAM;IACpB,IAAIJ,QAAQ,EAAE;MACZG,UAAU,CAAC,IAAI,CAAC;MAChB,OAAO;QAAA,OAAMA,UAAU,CAAC,KAAK,CAAC;MAAA;IAChC;IACA,OAAOE,SAAS;EAClB,CAAC,EAAE,CAACL,QAAQ,EAAEG,UAAU,CAAC,CAAC;EAE1B,IAAIG,OAAO;EACX,IAAItB,SAAS,EAAE;IACbsB,OAAO,gBACL,oBAAC,WAAW;MACV,SAAS,qBAA0B;MACnC,cAAYd;IAAa,GACrBS,cAAc,EAErB;EACH;EAEA,IAAIM,QAAQ;EACZ,IAAIX,UAAU,EAAE;IACd,IAAMY,aAAgC,GAAG;MACvCrB,IAAI,EAAJA,IAAI;MACJC,KAAK,EAALA,KAAK;MACLF,QAAQ,EAARA,QAAQ;MACRI,cAAc,EAAdA,cAAc;MACdD,OAAO,EAAPA,OAAO;MACPN,QAAQ,EAARA;IACF,CAAC;IACDwB,QAAQ,gBACN,oBAAC,YAAY;MAAC,SAAS;IAA2B,GAAKC,aAAa,EACrE;EACH;EAEA,IAAMC,kBAAkB,GACrBzB,SAAS,IAAI,CAACY,UAAU,IAAKC,SAAS,IAAId,QAAQ;EACrD,IAAM2B,SAAS,GAAG,CAACD,kBAAkB,IAAI,CAACT,QAAQ;EAElD,IAAMW,WAAW,GAAG9C,gBAAgB,aAElCiC,QAAQ,KAAK/B,QAAQ,CAAC6C,GAAG,mBAAuB,EAChDZ,QAAQ,wBAA4B,EACpCH,SAAS,yBAA6B,EACtCD,UAAU,0BAA8B,EACxCb,QAAQ,wBAA4B,CACrC;EAED,IAAM8B,UAAU,gBACd,oBAAC,UAAU;IACT,SAAS,EAAEH,SAAU;IACrB,QAAQ,EAAEA;EAAU,GAChBf,SAAS;IACb,SAAS,qBAA0B;IACnC,QAAQ,EAAEc,kBAAmB;IAC7B,SAAS,EAAEb,UAAU,GAAG,OAAO,GAAGX,SAAU;IAC5C,MAAM,eACJ,oBAAC,KAAK,CAAC,QAAQ,QACZD,SAAS,IAAIc,QAAQ,KAAK/B,QAAQ,CAAC6C,GAAG,IAAIN,OAAO,EACjDV,UAAU,IAAIW,QAAQ,EACtB1B,MAAM,CAEV;IACD,KAAK,eACH,oBAAC,KAAK,CAAC,QAAQ,QACZG,SAAS,IAAIc,QAAQ,KAAK/B,QAAQ,CAAC6C,GAAG,IAAIN,OAAO,EACjDxB,KAAK;EAET,GAEJ;EAED,IAAIe,SAAS,EAAE;IACb,oBACE,oBAAC,SAAS;MACR,SAAS,EAAEhC,gBAAgB,CAAC8C,WAAW,EAAElB,SAAS,CAAE;MACpD,KAAK,EAAEC,KAAM;MACb,UAAU,EAAEK,SAAU;MACtB,iBAAiB,EAAEpB,iBAAkB;MACrC,QAAQ,EAAE,kBAACmC,CAAC;QAAA,OAAKpC,SAAQ,CAACoC,CAAC,EAAEf,SAAS,CAACgB,OAAO,CAAC;MAAA;IAAC,GAE/CF,UAAU,CACD;EAEhB;EAEA,oBACE;IACE,SAAS,EAAEhD,gBAAgB,CAAC8C,WAAW,EAAElB,SAAS,CAAE;IACpD,KAAK,EAAEC,KAAM;IACb,GAAG,EAAEK;EAAU,GAEdc,UAAU,CACP;AAEV,CAAC"}
+{"version":3,"file":"Cell.js","names":["React","classNames","noop","Platform","SimpleCell","Removable","usePlatform","useExternRef","useDraggable","ListContext","CellDragger","CellCheckbox","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDraggable } from './useDraggable';\nimport { ListContext } from '../List/ListContext';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    selectable && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={selectable ? 'label' : Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiCell{position:relative}.vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){pointer-events:none;transition:transform .3s ease}.vkuiCell--dragging{background-color:var(--vkui--color_background_modal);box-shadow:var(--vkui--elevation3);opacity:.8;z-index:3}.vkuiCell--selectable.vkuiCell--disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCell__checkbox,.vkuiCell__dragger{flex-shrink:0;margin-right:16px;position:relative}.vkuiCell__dragger{z-index:2}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-left:0;padding-right:0}.vkuiCell--ios .vkuiCell__dragger{margin-left:12px;margin-right:0}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiFormItem>.vkuiCell{margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}
+.vkuiCell{position:relative}.vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){pointer-events:none;transition:transform .3s ease}.vkuiCell--dragging{background-color:var(--vkui--color_background_secondary);box-shadow:var(--vkui--elevation3);z-index:1;z-index:var(--vkui_internal--z_index_cell_dragging)}.vkuiCell--selectable.vkuiCell--disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCell__checkbox,.vkuiCell__dragger{flex-shrink:0;margin-right:16px;position:relative}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-left:0;padding-right:0}.vkuiCell--ios .vkuiCell__dragger{margin-left:12px;margin-right:0}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiFormItem>.vkuiCell{margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}

package/dist/cssm/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/cssm/components/Cell/CellCheckbox/CellCheckbox.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "style"];
-import * as React from "react";
-import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from "@vkontakte/icons";
-import { getPlatformClassName } from "../../../helpers/getPlatformClassName";
-import { usePlatform } from "../../../hooks/usePlatform";
-import { classNamesString } from "../../../lib/classNames";
-import { Platform } from "../../../lib/platform";
+import * as React from 'react';
+import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../../lib/platform';
 import "./CellCheckbox.module.css";
 export var CellCheckbox = function CellCheckbox(_ref) {
   var className = _ref.className,
@@ -16,15 +16,15 @@ export var CellCheckbox = function CellCheckbox(_ref) {
   var IconOff = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOff : Icon24CheckBoxOff;
   var IconOn = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOn : Icon24CheckBoxOn;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiCellCheckbox", getPlatformClassName("vkuiCellCheckbox", platform), className),
+    className: classNames("vkuiCellCheckbox", getPlatformClassName("vkuiCellCheckbox", platform), className),
     style: style
   }, /*#__PURE__*/React.createElement("input", _extends({
     className: "vkuiCellCheckbox__input",
     type: "checkbox"
   }, restProps)), /*#__PURE__*/React.createElement("span", {
-    className: classNamesString("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--off")
+    className: classNames("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--off")
   }, /*#__PURE__*/React.createElement(IconOff, null)), /*#__PURE__*/React.createElement("span", {
-    className: classNamesString("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--on")
+    className: classNames("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--on")
   }, /*#__PURE__*/React.createElement(IconOn, null)));
 };
 //# sourceMappingURL=CellCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellCheckbox.js","names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getPlatformClassName","usePlatform","classNamesString","Platform","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,kBAAkB;AACzB,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAAC;AAOjD,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAIA;EAAA,IAHvBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,SAAS;EAEZ,IAAMC,QAAQ,GAAGP,WAAW,EAAE;EAE9B,IAAMQ,OAAO,GACXD,QAAQ,KAAKL,QAAQ,CAACO,GAAG,IAAIF,QAAQ,KAAKL,QAAQ,CAACQ,KAAK,GACpDb,oBAAoB,GACpBF,iBAAiB;EAEvB,IAAMgB,MAAM,GACVJ,QAAQ,KAAKL,QAAQ,CAACO,GAAG,IAAIF,QAAQ,KAAKL,QAAQ,CAACQ,KAAK,GACpDZ,mBAAmB,GACnBF,gBAAgB;EAEtB,oBACE;IACE,SAAS,EAAEK,gBAAgB,qBAEzBF,oBAAoB,qBAAyBQ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb;IACE,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAEL,gBAAgB;EAGzB,gBAEF,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAEA,gBAAgB;EAGzB,gBAEF,oBAAC,MAAM,OAAG,CACL,CACH;AAEV,CAAC"}
+{"version":3,"file":"CellCheckbox.js","names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getPlatformClassName","usePlatform","classNames","Platform","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,kBAAkB;AACzB,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,uBAAuB;AAAC;AAOjD,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAGP,WAAW,EAAE;EAE9B,IAAMQ,OAAO,GACXD,QAAQ,KAAKL,QAAQ,CAACO,GAAG,IAAIF,QAAQ,KAAKL,QAAQ,CAACQ,KAAK,GACpDb,oBAAoB,GACpBF,iBAAiB;EAEvB,IAAMgB,MAAM,GACVJ,QAAQ,KAAKL,QAAQ,CAACO,GAAG,IAAIF,QAAQ,KAAKL,QAAQ,CAACQ,KAAK,GACpDZ,mBAAmB,GACnBF,gBAAgB;EAEtB,oBACE;IACE,SAAS,EAAEK,UAAU,qBAEnBF,oBAAoB,qBAAyBQ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb;IAAO,SAAS,2BAAgC;IAAC,IAAI,EAAC;EAAU,GAAKC,SAAS,EAAI,eAClF;IAAM,SAAS,EAAEL,UAAU;EAAkE,gBAC3F,oBAAC,OAAO,OAAG,CACN,eACP;IAAM,SAAS,EAAEA,UAAU;EAAiE,gBAC1F,oBAAC,MAAM,OAAG,CACL,CACH;AAEV,CAAC"}

package/dist/cssm/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/cssm/components/Cell/CellDragger/CellDragger.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onDragStart", "onDragMove", "onDragEnd", "className"];
-import * as React from "react";
-import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
-import { getPlatformClassName } from "../../../helpers/getPlatformClassName";
-import { usePlatform } from "../../../hooks/usePlatform";
-import { classNamesString } from "../../../lib/classNames";
-import { Platform } from "../../../lib/platform";
-import { Touch } from "../../Touch/Touch";
+import * as React from 'react';
+import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
+import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../../lib/platform';
+import { Touch } from '../../Touch/Touch';
 import "./CellDragger.module.css";
 export var CellDragger = function CellDragger(_ref) {
   var onDragStart = _ref.onDragStart,
@@ -20,7 +20,7 @@ export var CellDragger = function CellDragger(_ref) {
     e.preventDefault();
   }, []);
   return /*#__PURE__*/React.createElement(Touch, _extends({
-    className: classNamesString("vkuiCellDragger", getPlatformClassName("vkuiCellDragger", platform), className),
+    className: classNames("vkuiCellDragger", getPlatformClassName("vkuiCellDragger", platform), className),
     onStart: onDragStart,
     onMoveY: onDragMove,
     onEnd: onDragEnd,