@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/Cell/useDraggable.js

@@ -1,114 +1,98 @@
-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;
-  var _React$useState = React.useState(false),
-    _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];
-  var _React$useState5 = React.useState(0),
-    _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];
-  var _React$useState9 = React.useState(0),
-    _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];
-  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();
-      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
-      setDragShift(e.shiftY);
-      setDragEndIndex(dragStartIndex);
-      siblings.forEach(function (sibling, siblingIndex) {
-        var siblingGesture = sibling.getBoundingClientRect();
-        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)';
-          }
-        } else if (dragStartIndex > siblingIndex) {
-          if (rootUnderSibling) {
-            if (dragDirection === 'up') {
-              sibling.style.transform = 'translateY(100%)';
-            }
-            setDragEndIndex(function (dragEndIndex) {
-              return dragEndIndex - 1;
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import * as React from "react";
+export var useDraggable = function(param) {
+    var rootElRef = param.rootElRef, onDragFinish = param.onDragFinish;
+    var _React_useState = _sliced_to_array(React.useState(false), 2), dragging = _React_useState[0], setDragging = _React_useState[1];
+    var _React_useState1 = _sliced_to_array(React.useState([]), 2), siblings = _React_useState1[0], setSiblings = _React_useState1[1];
+    var _React_useState2 = _sliced_to_array(React.useState(0), 2), dragStartIndex = _React_useState2[0], setDragStartIndex = _React_useState2[1];
+    var _React_useState3 = _sliced_to_array(React.useState(0), 2), dragEndIndex = _React_useState3[0], setDragEndIndex = _React_useState3[1];
+    var _React_useState4 = _sliced_to_array(React.useState(0), 2), dragShift = _React_useState4[0], setDragShift = _React_useState4[1];
+    var _React_useState5 = _sliced_to_array(React.useState(undefined), 2), dragDirection = _React_useState5[0], setDragDirection = _React_useState5[1];
+    var onDragStart = function() {
+        var _rootEl_parentElement;
+        var rootEl = rootElRef.current;
+        if (!rootEl) {
+            return;
+        }
+        setDragging(true);
+        var _siblings = [];
+        if ((_rootEl_parentElement = rootEl.parentElement) === null || _rootEl_parentElement === void 0 ? 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(e) {
+        e.originalEvent.preventDefault();
+        var rootEl = rootElRef.current;
+        if (rootEl) {
+            rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
+            var rootGesture = rootEl.getBoundingClientRect();
+            setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
+            setDragShift(e.shiftY);
+            setDragEndIndex(dragStartIndex);
+            siblings.forEach(function(sibling, siblingIndex) {
+                var siblingGesture = sibling.getBoundingClientRect();
+                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)";
+                    }
+                } else if (dragStartIndex > siblingIndex) {
+                    if (rootUnderSibling) {
+                        if (dragDirection === "up") {
+                            sibling.style.transform = "translateY(100%)";
+                        }
+                        setDragEndIndex(function(dragEndIndex) {
+                            return dragEndIndex - 1;
+                        });
+                    }
+                    if (rootOverSibling && dragDirection === "down") {
+                        sibling.style.transform = "translateY(0)";
+                    }
+                }
             });
-          }
-          if (rootOverSibling && dragDirection === 'down') {
-            sibling.style.transform = 'translateY(0)';
-          }
         }
-      });
-    }
-  };
-  var onDragEnd = function onDragEnd() {
-    var from = dragStartIndex,
-      to = dragEndIndex;
-    siblings.forEach(function (sibling) {
-      sibling.style.transform = '';
-    });
-    setSiblings([]);
-    setDragEndIndex(0);
-    setDragStartIndex(0);
-    setDragDirection(undefined);
-    setDragShift(0);
-    setDragging(false);
-    onDragFinish && onDragFinish({
-      from: from,
-      to: to
-    });
-  };
-  var useDraggableProps = {
-    onDragStart: onDragStart,
-    onDragMove: onDragMove,
-    onDragEnd: onDragEnd,
-    dragging: dragging
-  };
-  return useDraggableProps;
+    };
+    var onDragEnd = function() {
+        var _ref = [
+            dragStartIndex,
+            dragEndIndex
+        ], from = _ref[0], to = _ref[1];
+        siblings.forEach(function(sibling) {
+            sibling.style.transform = "";
+        });
+        setSiblings([]);
+        setDragEndIndex(0);
+        setDragStartIndex(0);
+        setDragDirection(undefined);
+        setDragShift(0);
+        setDragging(false);
+        onDragFinish && onDragFinish({
+            from: from,
+            to: to
+        });
+    };
+    var useDraggableProps = {
+        onDragStart: onDragStart,
+        onDragMove: onDragMove,
+        onDragEnd: onDragEnd,
+        dragging: dragging
+    };
+    return useDraggableProps;
 };
+
 //# sourceMappingURL=useDraggable.js.map

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<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart: () => void;\n  onDragEnd: () => void;\n  onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"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"],"mappings":"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"}

package/dist/components/CellButton/CellButton.js

@@ -1,27 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["centered", "mode", "className"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { SimpleCell } from '../SimpleCell/SimpleCell';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { SimpleCell } from "../SimpleCell/SimpleCell";
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
- */
-export var CellButton = function CellButton(_ref) {
-  var _ref$centered = _ref.centered,
-    centered = _ref$centered === void 0 ? false : _ref$centered,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'primary' : _ref$mode,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(SimpleCell, _extends({
-    stopPropagation: true
-  }, restProps, {
-    className: classNames("vkuiCellButton", styles["CellButton--mode-".concat(mode)], centered && "vkuiCellButton--centered", className)
-  }));
-};
-var styles = {
-  "CellButton--mode-danger": "vkuiCellButton--mode-danger",
-  "CellButton--mode-primary": "vkuiCellButton--mode-primary"
+ */ export var CellButton = function(_param) {
+    var _param_centered = _param.centered, centered = _param_centered === void 0 ? false : _param_centered, _param_mode = _param.mode, mode = _param_mode === void 0 ? "primary" : _param_mode, className = _param.className, restProps = _object_without_properties(_param, [
+        "centered",
+        "mode",
+        "className"
+    ]);
+    return /*#__PURE__*/ React.createElement(SimpleCell, _object_spread_props(_object_spread({
+        stopPropagation: true
+    }, restProps), {
+        className: classNames("vkuiCellButton", "vkuiInternalCellButton", mode === "danger" && classNames("vkuiCellButton--mode-danger", "vkuiInternalCellButton--mode-danger"), centered && "vkuiCellButton--centered", className)
+    }));
 };
+
 //# sourceMappingURL=CellButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellButton.js","names":["React","classNames","SimpleCell","CellButton","centered","mode","className","restProps","styles"],"sources":["../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        styles[`CellButton--mode-${mode}`],\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,UAAU,QAAyB,0BAA0B;AAQtE;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,yBAJrBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,UAAU;IACT,eAAe,EAAE;EAAK,GAClBA,SAAS;IACb,SAAS,EAAEN,UAAU,mBAEnBO,MAAM,4BAAqBH,IAAI,EAAG,EAClCD,QAAQ,8BAAkC,EAC1CE,SAAS;EACT,GACF;AAEN,CAAC;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        'vkuiInternalCellButton',\n        mode === 'danger' &&\n          classNames(styles['CellButton--mode-danger'], 'vkuiInternalCellButton--mode-danger'),\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","SimpleCell","CellButton","centered","mode","className","restProps","stopPropagation"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AAQvE;;CAEC,GACD,OAAO,IAAMC,aAAa,iBAKH;iCAJrBC,UAAAA,wCAAW,KAAK,yCAChBC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,qBACE,oBAACJ;QACCM,iBAAiB,IAAI;OACjBD;QACJD,WAAWL,6BAET,0BACAI,SAAS,YACPJ,0CAA8C,wCAChDG,wCACAE;;AAIR,EAAE"}

package/dist/components/Checkbox/Checkbox.js

@@ -1,126 +1,133 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "hoverMode", "activeMode", "hasHover", "hasActive", "focusVisibleMode", "onChange"];
-var _sizeYClassNames;
-import * as React from 'react';
-import { Icon20CheckBoxIndetermanate, Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { SizeType } from '../../lib/adaptivity';
-import { Platform } from '../../lib/platform';
-import { warnOnce } from '../../lib/warnOnce';
-import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
-var sizeYClassNames = (_sizeYClassNames = {
-  none: "vkuiCheckbox--sizeY-none"
-}, _defineProperty(_sizeYClassNames, SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _defineProperty(_sizeYClassNames, SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _sizeYClassNames);
-var warn = warnOnce('Checkbox');
-
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { Icon20CheckBoxIndetermanate, Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn } from "@vkontakte/icons";
+import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditionalRender";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { SizeType } from "../../lib/adaptivity";
+import { Platform } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
+import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
+import { Footnote } from "../Typography/Footnote/Footnote";
+import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+var _obj;
+var sizeYClassNames = (_obj = {
+    none: "vkuiCheckbox--sizeY-none"
+}, _define_property(_obj, SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _define_property(_obj, SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _obj);
+var warn = warnOnce("Checkbox");
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
- */
-export var Checkbox = function Checkbox(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    style = _ref.style,
-    getRootRef = _ref.getRootRef,
-    getRef = _ref.getRef,
-    description = _ref.description,
-    indeterminate = _ref.indeterminate,
-    defaultIndeterminate = _ref.defaultIndeterminate,
-    hoverMode = _ref.hoverMode,
-    activeMode = _ref.activeMode,
-    hasHover = _ref.hasHover,
-    hasActive = _ref.hasActive,
-    focusVisibleMode = _ref.focusVisibleMode,
-    onChange = _ref.onChange,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var inputRef = useExternRef(getRef);
-  var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var _useAdaptivityConditi = useAdaptivityConditionalRender(),
-    adaptiveSizeY = _useAdaptivityConditi.sizeY;
-  React.useEffect(function () {
-    var indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
-    if (inputRef.current) {
-      inputRef.current.indeterminate = Boolean(indeterminateValue);
-    }
-  }, [defaultIndeterminate, indeterminate, inputRef]);
-  var handleChange = React.useCallback(function (event) {
-    if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined && inputRef.current) {
-      inputRef.current.indeterminate = false;
-    }
-    if (indeterminate !== undefined && inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-    onChange && onChange(event);
-  }, [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]);
-  if (process.env.NODE_ENV === 'development') {
-    if (defaultIndeterminate && restProps.defaultChecked) {
-      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
+ */ export var Checkbox = function(_param) {
+    var children = _param.children, className = _param.className, style = _param.style, getRootRef = _param.getRootRef, getRef = _param.getRef, description = _param.description, indeterminate = _param.indeterminate, defaultIndeterminate = _param.defaultIndeterminate, hoverMode = _param.hoverMode, activeMode = _param.activeMode, hasHover = _param.hasHover, hasActive = _param.hasActive, focusVisibleMode = _param.focusVisibleMode, onChange = _param.onChange, restProps = _object_without_properties(_param, [
+        "children",
+        "className",
+        "style",
+        "getRootRef",
+        "getRef",
+        "description",
+        "indeterminate",
+        "defaultIndeterminate",
+        "hoverMode",
+        "activeMode",
+        "hasHover",
+        "hasActive",
+        "focusVisibleMode",
+        "onChange"
+    ]);
+    var inputRef = useExternRef(getRef);
+    var platform = usePlatform();
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var _useAdaptivityConditionalRender = useAdaptivityConditionalRender(), adaptiveSizeY = _useAdaptivityConditionalRender.sizeY;
+    React.useEffect(function() {
+        var indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+        if (inputRef.current) {
+            inputRef.current.indeterminate = Boolean(indeterminateValue);
+        }
+    }, [
+        defaultIndeterminate,
+        indeterminate,
+        inputRef
+    ]);
+    var handleChange = React.useCallback(function(event) {
+        if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined && inputRef.current) {
+            inputRef.current.indeterminate = false;
+        }
+        if (indeterminate !== undefined && inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+        onChange && onChange(event);
+    }, [
+        defaultIndeterminate,
+        indeterminate,
+        restProps.checked,
+        onChange,
+        inputRef
+    ]);
+    if (process.env.NODE_ENV === "development") {
+        if (defaultIndeterminate && restProps.defaultChecked) {
+            warn("defaultIndeterminate и defaultChecked не могут быть true одновременно", "error");
+        }
+        if (indeterminate && restProps.checked) {
+            warn("indeterminate и checked не могут быть true одновременно", "error");
+        }
+        if (restProps.defaultChecked && restProps.checked) {
+            warn("defaultChecked и checked не могут быть true одновременно", "error");
+        }
     }
-    if (indeterminate && restProps.checked) {
-      warn('indeterminate и checked не могут быть true одновременно', 'error');
-    }
-    if (restProps.defaultChecked && restProps.checked) {
-      warn('defaultChecked и checked не могут быть true одновременно', 'error');
-    }
-  }
-  return /*#__PURE__*/React.createElement(Tappable, {
-    Component: "label",
-    className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
-    style: style,
-    disabled: restProps.disabled,
-    activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
-    getRootRef: getRootRef,
-    hoverMode: hoverMode,
-    activeMode: activeMode,
-    hasHover: hasHover,
-    hasActive: hasActive,
-    focusVisibleMode: focusVisibleMode
-  }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
-    onChange: handleChange,
-    type: "checkbox",
-    className: "vkuiCheckbox__input",
-    getRef: inputRef
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
-  }, platform === Platform.VKCOM ? /*#__PURE__*/React.createElement(Icon20CheckBoxOn, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(Icon20CheckBoxOn, {
-    className: adaptiveSizeY.compact.className
-  }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(Icon24CheckBoxOn, {
-    className: adaptiveSizeY.regular.className
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
-  }, platform === Platform.VKCOM ? /*#__PURE__*/React.createElement(Icon20CheckBoxOff, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(Icon20CheckBoxOff, {
-    className: adaptiveSizeY.compact.className
-  }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(Icon24CheckBoxOff, {
-    className: adaptiveSizeY.regular.className
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
-  }, platform === Platform.VKCOM ? /*#__PURE__*/React.createElement(Icon20CheckBoxIndetermanate, {
-    width: 20,
-    height: 20
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(Icon20CheckBoxIndetermanate, {
-    className: adaptiveSizeY.compact.className,
-    width: 20,
-    height: 20
-  }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(Icon20CheckBoxIndetermanate, {
-    className: adaptiveSizeY.regular.className,
-    width: 24,
-    height: 24
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCheckbox__content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCheckbox__children"
-  }, children), hasReactNode(description) && /*#__PURE__*/React.createElement(Footnote, {
-    className: "vkuiCheckbox__description"
-  }, description)));
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        Component: "label",
+        className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
+        style: style,
+        disabled: restProps.disabled,
+        activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
+        getRootRef: getRootRef,
+        hoverMode: hoverMode,
+        activeMode: activeMode,
+        hasHover: hasHover,
+        hasActive: hasActive,
+        focusVisibleMode: focusVisibleMode
+    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, _object_spread_props(_object_spread({}, restProps), {
+        onChange: handleChange,
+        type: "checkbox",
+        className: "vkuiCheckbox__input",
+        getRef: inputRef
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
+    }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Icon20CheckBoxOn, null) : /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ React.createElement(Icon20CheckBoxOn, {
+        className: adaptiveSizeY.compact.className
+    }), adaptiveSizeY.regular && /*#__PURE__*/ React.createElement(Icon24CheckBoxOn, {
+        className: adaptiveSizeY.regular.className
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
+    }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Icon20CheckBoxOff, null) : /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ React.createElement(Icon20CheckBoxOff, {
+        className: adaptiveSizeY.compact.className
+    }), adaptiveSizeY.regular && /*#__PURE__*/ React.createElement(Icon24CheckBoxOff, {
+        className: adaptiveSizeY.regular.className
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
+    }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Icon20CheckBoxIndetermanate, {
+        width: 20,
+        height: 20
+    }) : /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ React.createElement(Icon20CheckBoxIndetermanate, {
+        className: adaptiveSizeY.compact.className,
+        width: 20,
+        height: 20
+    }), adaptiveSizeY.regular && /*#__PURE__*/ React.createElement(Icon20CheckBoxIndetermanate, {
+        className: adaptiveSizeY.regular.className,
+        width: 24,
+        height: 24
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiCheckbox__content"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiCheckbox__children"
+    }, children), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: "vkuiCheckbox__description"
+    }, description)));
 };
+
 //# sourceMappingURL=Checkbox.js.map