@vkontakte/vkui 5.0.0 → 5.0.2

package/dist/components/Cell/Cell.js

@@ -1,10 +1,9 @@
 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 { createScopedElement } from "../../lib/jsxRuntime";
+  _excluded2 = ["dragging"];
 import * as React from "react";
-import { classNames } from "../../lib/classNames";
+import { classNamesString } from "../../lib/classNames";
 import { noop } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
 import { SimpleCell } from "../SimpleCell/SimpleCell";
@@ -15,49 +14,44 @@ import { useDraggable } from "./useDraggable";
 import { ListContext } from "../List/ListContext";
 import { CellDragger } from "./CellDragger/CellDragger";
 import { CellCheckbox } from "./CellCheckbox/CellCheckbox";
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
 export var Cell = function Cell(_ref) {
   var mode = _ref.mode,
-      _ref$onRemove = _ref.onRemove,
-      _onRemove = _ref$onRemove === void 0 ? noop : _ref$onRemove,
-      _ref$removePlaceholde = _ref.removePlaceholder,
-      removePlaceholder = _ref$removePlaceholde === void 0 ? "Удалить" : _ref$removePlaceholde,
-      onDragFinish = _ref.onDragFinish,
-      before = _ref.before,
-      after = _ref.after,
-      disabled = _ref.disabled,
-      draggable = _ref.draggable,
-      Component = _ref.Component,
-      onChange = _ref.onChange,
-      name = _ref.name,
-      value = _ref.value,
-      checked = _ref.checked,
-      defaultChecked = _ref.defaultChecked,
-      getRootRef = _ref.getRootRef,
-      _ref$draggerLabel = _ref.draggerLabel,
-      draggerLabel = _ref$draggerLabel === void 0 ? "Перенести ячейку" : _ref$draggerLabel,
-      className = _ref.className,
-      style = _ref.style,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$onRemove = _ref.onRemove,
+    _onRemove = _ref$onRemove === void 0 ? noop : _ref$onRemove,
+    _ref$removePlaceholde = _ref.removePlaceholder,
+    removePlaceholder = _ref$removePlaceholde === void 0 ? "Удалить" : _ref$removePlaceholde,
+    onDragFinish = _ref.onDragFinish,
+    before = _ref.before,
+    after = _ref.after,
+    disabled = _ref.disabled,
+    draggable = _ref.draggable,
+    Component = _ref.Component,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    value = _ref.value,
+    checked = _ref.checked,
+    defaultChecked = _ref.defaultChecked,
+    getRootRef = _ref.getRootRef,
+    _ref$draggerLabel = _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 platform = usePlatform();
   var rootElRef = useExternRef(getRootRef);
-
   var _useDraggable = useDraggable({
-    rootElRef: rootElRef,
-    onDragFinish: onDragFinish
-  }),
-      dragging = _useDraggable.dragging,
-      draggableProps = _objectWithoutProperties(_useDraggable, _excluded2);
-
+      rootElRef: rootElRef,
+      onDragFinish: onDragFinish
+    }),
+    dragging = _useDraggable.dragging,
+    draggableProps = _objectWithoutProperties(_useDraggable, _excluded2);
   var _React$useContext = React.useContext(ListContext),
-      toggleDrag = _React$useContext.toggleDrag;
-
+    toggleDrag = _React$useContext.toggleDrag;
   React.useEffect(function () {
     if (dragging) {
       toggleDrag(true);
@@ -65,20 +59,16 @@ export var Cell = function Cell(_ref) {
         return toggleDrag(false);
       };
     }
-
     return undefined;
   }, [dragging, toggleDrag]);
   var dragger;
-
   if (draggable) {
-    dragger = createScopedElement(CellDragger, _extends({
-      vkuiClass: "Cell__dragger",
+    dragger = /*#__PURE__*/React.createElement(CellDragger, _extends({
+      className: "vkuiCell__dragger",
       "aria-label": draggerLabel
     }, draggableProps));
   }
-
   var checkbox;
-
   if (selectable) {
     var checkboxProps = {
       name: name,
@@ -88,29 +78,26 @@ export var Cell = function Cell(_ref) {
       checked: checked,
       disabled: disabled
     };
-    checkbox = createScopedElement(CellCheckbox, _extends({
-      vkuiClass: "Cell__checkbox"
+    checkbox = /*#__PURE__*/React.createElement(CellCheckbox, _extends({
+      className: "vkuiCell__checkbox"
     }, checkboxProps));
   }
-
   var simpleCellDisabled = draggable && !selectable || removable || disabled;
   var hasActive = !simpleCellDisabled && !dragging;
-  var cellClasses = classNames("Cell", platform === Platform.IOS && "Cell--ios", dragging && "Cell--dragging", removable && "Cell--removable", selectable && "Cell--selectable", disabled && "Cell--disabled");
-  var simpleCell = createScopedElement(SimpleCell, _extends({
+  var cellClasses = classNamesString("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, {
-    vkuiClass: "Cell__content",
+    className: "vkuiCell__content",
     disabled: simpleCellDisabled,
     Component: selectable ? "label" : Component,
-    before: createScopedElement(React.Fragment, null, draggable && platform !== Platform.IOS && dragger, selectable && checkbox, before),
-    after: createScopedElement(React.Fragment, null, draggable && platform === Platform.IOS && dragger, after)
+    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 createScopedElement(Removable, {
-      vkuiClass: cellClasses,
-      className: className,
+    return /*#__PURE__*/React.createElement(Removable, {
+      className: classNamesString(cellClasses, className),
       style: style,
       getRootRef: rootElRef,
       removePlaceholder: removePlaceholder,
@@ -119,10 +106,8 @@ export var Cell = function Cell(_ref) {
       }
     }, simpleCell);
   }
-
-  return createScopedElement("div", {
-    vkuiClass: cellClasses,
-    className: className,
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNamesString(cellClasses, className),
     style: style,
     ref: rootElRef
   }, simpleCell);

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

@@ -1 +1 @@
-{"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 } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { Platform } from \"../../lib/platform\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport { HasPlatform, 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 \"./Cell.css\";\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, \"getRootRef\">,\n    HasPlatform,\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        vkuiClass=\"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 vkuiClass=\"Cell__checkbox\" {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled =\n    (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    \"Cell\",\n    platform === Platform.IOS && \"Cell--ios\",\n    dragging && \"Cell--dragging\",\n    removable && \"Cell--removable\",\n    selectable && \"Cell--selectable\",\n    disabled && \"Cell--disabled\"\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      vkuiClass=\"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        vkuiClass={cellClasses}\n        className={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      vkuiClass={cellClasses}\n      className={className}\n      style={style}\n      ref={rootElRef}\n    >\n      {simpleCell}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"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;AAqC7E;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"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CellCheckbox.js","names":["Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getClassName","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 { getClassName } from \"../../../helpers/getClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { Platform } from \"../../../lib/platform\";\nimport { CellProps } from \"../Cell\";\nimport \"./CellCheckbox.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      vkuiClass={classNames(getClassName(\"CellCheckbox\", platform))}\n      className={className}\n      style={style}\n    >\n      <input vkuiClass=\"CellCheckbox__input\" type=\"checkbox\" {...restProps} />\n      <IconOff vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--off\" />\n      <IconOn vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--on\" />\n    </div>\n  );\n};\n"],"mappings":";;;;AACA,SACEA,iBADF,EAEEC,gBAFF,EAGEC,oBAHF,EAIEC,mBAJF,QAKO,kBALP;AAMA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AAOA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAIH;EAAA,IAHvBC,SAGuB,QAHvBA,SAGuB;EAAA,IAFvBC,KAEuB,QAFvBA,KAEuB;EAAA,IADpBC,SACoB;;EACvB,IAAMC,QAAQ,GAAGP,WAAW,EAA5B;EAEA,IAAMQ,OAAO,GACXD,QAAQ,KAAKL,QAAQ,CAACO,GAAtB,IAA6BF,QAAQ,KAAKL,QAAQ,CAACQ,KAAnD,GACIb,oBADJ,GAEIF,iBAHN;EAKA,IAAMgB,MAAM,GACVJ,QAAQ,KAAKL,QAAQ,CAACO,GAAtB,IAA6BF,QAAQ,KAAKL,QAAQ,CAACQ,KAAnD,GACIZ,mBADJ,GAEIF,gBAHN;EAKA,OACE;IACE,SAAS,EAAEK,UAAU,CAACF,YAAY,CAAC,cAAD,EAAiBQ,QAAjB,CAAb,CADvB;IAEE,SAAS,EAAEH,SAFb;IAGE,KAAK,EAAEC;EAHT,GAKE;IAAO,SAAS,EAAC,qBAAjB;IAAuC,IAAI,EAAC;EAA5C,GAA2DC,SAA3D,EALF,EAME,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,EANF,EAOE,oBAAC,MAAD;IAAQ,SAAS,EAAC;EAAlB,EAPF,CADF;AAWD,CA5BM"}
+{"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;AAOhD,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"}

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

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

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

@@ -1,30 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onDragStart", "onDragMove", "onDragEnd"];
-import { createScopedElement } from "../../../lib/jsxRuntime";
+var _excluded = ["onDragStart", "onDragMove", "onDragEnd", "className"];
 import * as React from "react";
 import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
-import { getClassName } from "../../../helpers/getClassName";
+import { getPlatformClassName } from "../../../helpers/getPlatformClassName";
 import { usePlatform } from "../../../hooks/usePlatform";
-import { classNames } from "../../../lib/classNames";
+import { classNamesString } from "../../../lib/classNames";
 import { Platform } from "../../../lib/platform";
 import { Touch } from "../../Touch/Touch";
 export var CellDragger = function CellDragger(_ref) {
   var onDragStart = _ref.onDragStart,
-      onDragMove = _ref.onDragMove,
-      onDragEnd = _ref.onDragEnd,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    onDragMove = _ref.onDragMove,
+    onDragEnd = _ref.onDragEnd,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var onClick = React.useCallback(function (e) {
     e.preventDefault();
   }, []);
-  return createScopedElement(Touch, _extends({
-    vkuiClass: classNames(getClassName("CellDragger", platform)),
+  return /*#__PURE__*/React.createElement(Touch, _extends({
+    className: classNamesString("vkuiCellDragger", getPlatformClassName("vkuiCellDragger", platform), className),
     onStart: onDragStart,
     onMoveY: onDragMove,
     onEnd: onDragEnd,
     onClick: onClick
-  }, restProps), platform === Platform.IOS ? createScopedElement(Icon24ReorderIos, null) : createScopedElement(Icon24Reorder, null));
+  }, restProps), platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon24ReorderIos, null) : /*#__PURE__*/React.createElement(Icon24Reorder, null));
 };
 //# sourceMappingURL=CellDragger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","getClassName","usePlatform","classNames","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","restProps","platform","onClick","useCallback","e","preventDefault","IOS"],"sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon24Reorder, Icon24ReorderIos } from \"@vkontakte/icons\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { Platform } from \"../../../lib/platform\";\nimport { Touch } from \"../../Touch/Touch\";\nimport { DraggableProps } from \"../useDraggable\";\nimport \"./CellDragger.css\";\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\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      vkuiClass={classNames(getClassName(\"CellDragger\", platform))}\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,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,QAAgD,kBAAhD;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,KAAT;AAMA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAKH;EAAA,IAJtBC,WAIsB,QAJtBA,WAIsB;EAAA,IAHtBC,UAGsB,QAHtBA,UAGsB;EAAA,IAFtBC,SAEsB,QAFtBA,SAEsB;EAAA,IADnBC,SACmB;;EACtB,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;EAEA,IAAMU,OAAO,GAAGd,KAAK,CAACe,WAAN,CAAkB,UAACC,CAAD,EAAyB;IACzDA,CAAC,CAACC,cAAF;EACD,CAFe,EAEb,EAFa,CAAhB;EAIA,OACE,oBAAC,KAAD;IACE,SAAS,EAAEZ,UAAU,CAACF,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CAAb,CADvB;IAEE,OAAO,EAAEJ,WAFX;IAGE,OAAO,EAAEC,UAHX;IAIE,KAAK,EAAEC,SAJT;IAKE,OAAO,EAAEG;EALX,GAMMF,SANN,GAQGC,QAAQ,KAAKP,QAAQ,CAACY,GAAtB,GAA4B,oBAAC,gBAAD,OAA5B,GAAmD,oBAAC,aAAD,OARtD,CADF;AAYD,CAxBM"}
+{"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","getPlatformClassName","usePlatform","classNamesString","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,kBAAkB;AAClE,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,gBAAgB,QAAQ,yBAAyB;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAMzC,OAAO,IAAMC,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,GAAGV,WAAW,EAAE;EAE9B,IAAMW,OAAO,GAAGf,KAAK,CAACgB,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK;IACJ,SAAS,EAAEb,gBAAgB,oBAEzBF,oBAAoB,oBAAwBW,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEI;EAAQ,GACbF,SAAS,GAEZC,QAAQ,KAAKR,QAAQ,CAACa,GAAG,gBAAG,oBAAC,gBAAgB,OAAG,gBAAG,oBAAC,aAAa,OAAG,CAC/D;AAEZ,CAAC"}

package/dist/components/Cell/useDraggable.js

@@ -2,66 +2,51 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from "react";
 export var useDraggable = function useDraggable(_ref) {
   var rootElRef = _ref.rootElRef,
-      onDragFinish = _ref.onDragFinish;
-
+    onDragFinish = _ref.onDragFinish;
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      dragging = _React$useState2[0],
-      setDragging = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dragging = _React$useState2[0],
+    setDragging = _React$useState2[1];
   var _React$useState3 = React.useState([]),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      siblings = _React$useState4[0],
-      setSiblings = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    siblings = _React$useState4[0],
+    setSiblings = _React$useState4[1];
   var _React$useState5 = React.useState(0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      dragStartIndex = _React$useState6[0],
-      setDragStartIndex = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    dragStartIndex = _React$useState6[0],
+    setDragStartIndex = _React$useState6[1];
   var _React$useState7 = React.useState(0),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      dragEndIndex = _React$useState8[0],
-      setDragEndIndex = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    dragEndIndex = _React$useState8[0],
+    setDragEndIndex = _React$useState8[1];
   var _React$useState9 = React.useState(0),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      dragShift = _React$useState10[0],
-      setDragShift = _React$useState10[1];
-
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    dragShift = _React$useState10[0],
+    setDragShift = _React$useState10[1];
   var _React$useState11 = React.useState(undefined),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      dragDirection = _React$useState12[0],
-      setDragDirection = _React$useState12[1];
-
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    dragDirection = _React$useState12[0],
+    setDragDirection = _React$useState12[1];
   var onDragStart = function onDragStart() {
     var _rootEl$parentElement;
-
     var rootEl = rootElRef.current;
-
     if (!rootEl) {
       return;
     }
-
     setDragging(true);
     var _siblings = [];
-
     if ((_rootEl$parentElement = rootEl.parentElement) !== null && _rootEl$parentElement !== void 0 && _rootEl$parentElement.childNodes) {
       _siblings = Array.from(rootEl.parentElement.children);
     }
-
     var idx = _siblings.indexOf(rootEl);
-
     setDragStartIndex(idx);
     setDragEndIndex(idx);
     setSiblings(_siblings);
     setDragShift(0);
   };
-
   var onDragMove = function onDragMove(e) {
     e.originalEvent.preventDefault();
     var rootEl = rootElRef.current;
-
     if (rootEl) {
       rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
       var rootGesture = rootEl.getBoundingClientRect();
@@ -73,18 +58,15 @@ export var useDraggable = function useDraggable(_ref) {
         var siblingHalfHeight = siblingGesture.height / 2;
         var rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
         var rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
-
         if (dragStartIndex < siblingIndex) {
           if (rootOverSibling) {
             if (dragDirection === "down") {
               sibling.style.transform = "translateY(-100%)";
             }
-
             setDragEndIndex(function (dragEndIndex) {
               return dragEndIndex + 1;
             });
           }
-
           if (rootUnderSibling && dragDirection === "up") {
             sibling.style.transform = "translateY(0)";
           }
@@ -93,12 +75,10 @@ export var useDraggable = function useDraggable(_ref) {
             if (dragDirection === "up") {
               sibling.style.transform = "translateY(100%)";
             }
-
             setDragEndIndex(function (dragEndIndex) {
               return dragEndIndex - 1;
             });
           }
-
           if (rootOverSibling && dragDirection === "down") {
             sibling.style.transform = "translateY(0)";
           }
@@ -106,10 +86,9 @@ export var useDraggable = function useDraggable(_ref) {
       });
     }
   };
-
   var onDragEnd = function onDragEnd() {
     var from = dragStartIndex,
-        to = dragEndIndex;
+      to = dragEndIndex;
     siblings.forEach(function (sibling) {
       sibling.style.transform = "";
     });
@@ -124,7 +103,6 @@ export var useDraggable = function useDraggable(_ref) {
       to: to
     });
   };
-
   var useDraggableProps = {
     onDragStart: onDragStart,
     onDragMove: onDragMove,

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

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.js","names":["React","useDraggable","rootElRef","onDragFinish","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":"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"}
+{"version":3,"file":"useDraggable.js","names":["React","useDraggable","rootElRef","onDragFinish","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":"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"}

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { SimpleCellProps } from "../SimpleCell/SimpleCell";
-import "./CellButton.css";
 export interface CellButtonProps extends SimpleCellProps {
     mode?: "primary" | "danger";
     centered?: boolean;
@@ -8,4 +7,4 @@ export interface CellButtonProps extends SimpleCellProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
  */
-export declare const CellButton: ({ centered, mode, ...restProps }: CellButtonProps) => JSX.Element;
+export declare const CellButton: ({ centered, mode, className, ...restProps }: CellButtonProps) => JSX.Element;