@vkontakte/vkui 5.2.3 → 5.3.0

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

@@ -1,123 +1,109 @@
 "use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useDraggable = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
-var useDraggable = function useDraggable(_ref) {
-  var rootElRef = _ref.rootElRef,
-    onDragFinish = _ref.onDragFinish;
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    dragging = _React$useState2[0],
-    setDragging = _React$useState2[1];
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    siblings = _React$useState4[0],
-    setSiblings = _React$useState4[1];
-  var _React$useState5 = React.useState(0),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    dragStartIndex = _React$useState6[0],
-    setDragStartIndex = _React$useState6[1];
-  var _React$useState7 = React.useState(0),
-    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-    dragEndIndex = _React$useState8[0],
-    setDragEndIndex = _React$useState8[1];
-  var _React$useState9 = React.useState(0),
-    _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-    dragShift = _React$useState10[0],
-    setDragShift = _React$useState10[1];
-  var _React$useState11 = React.useState(undefined),
-    _React$useState12 = (0, _slicedToArray2.default)(_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);
+Object.defineProperty(exports, "useDraggable", {
+    enumerable: true,
+    get: function() {
+        return useDraggable;
     }
-    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;
+});
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var useDraggable = function(param) {
+    var rootElRef = param.rootElRef, onDragFinish = param.onDragFinish;
+    var _React_useState = _slicedToArray(_react.useState(false), 2), dragging = _React_useState[0], setDragging = _React_useState[1];
+    var _React_useState1 = _slicedToArray(_react.useState([]), 2), siblings = _React_useState1[0], setSiblings = _React_useState1[1];
+    var _React_useState2 = _slicedToArray(_react.useState(0), 2), dragStartIndex = _React_useState2[0], setDragStartIndex = _React_useState2[1];
+    var _React_useState3 = _slicedToArray(_react.useState(0), 2), dragEndIndex = _React_useState3[0], setDragEndIndex = _React_useState3[1];
+    var _React_useState4 = _slicedToArray(_react.useState(0), 2), dragShift = _React_useState4[0], setDragShift = _React_useState4[1];
+    var _React_useState5 = _slicedToArray(_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;
 };
-exports.useDraggable = useDraggable;
+
 //# sourceMappingURL=useDraggable.js.map

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

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

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

@@ -1,36 +1,31 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "CellButton", {
+    enumerable: true,
+    get: function() {
+        return CellButton;
+    }
 });
-exports.CellButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _SimpleCell = require("../SimpleCell/SimpleCell");
-var _excluded = ["centered", "mode", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/CellButton
- */
-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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_SimpleCell.SimpleCell, (0, _extends2.default)({
-    stopPropagation: true
-  }, restProps, {
-    className: (0, _vkjs.classNames)("vkuiCellButton", styles["CellButton--mode-".concat(mode)], centered && "vkuiCellButton--centered", className)
-  }));
-};
-exports.CellButton = CellButton;
-var styles = {
-  "CellButton--mode-danger": "vkuiCellButton--mode-danger",
-  "CellButton--mode-primary": "vkuiCellButton--mode-primary"
+var _simpleCell = require("../SimpleCell/SimpleCell");
+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 = _objectWithoutProperties(_param, [
+        "centered",
+        "mode",
+        "className"
+    ]);
+    return /*#__PURE__*/ _react.createElement(_simpleCell.SimpleCell, _objectSpreadProps(_objectSpread({
+        stopPropagation: true
+    }, restProps), {
+        className: (0, _vkjs.classNames)("vkuiCellButton", "vkuiInternalCellButton", mode === "danger" && (0, _vkjs.classNames)("vkuiCellButton--mode-danger", "vkuiInternalCellButton--mode-danger"), centered && "vkuiCellButton--centered", className)
+    }));
 };
+
 //# sourceMappingURL=CellButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellButton.js","names":["CellButton","centered","mode","className","restProps","classNames","styles"],"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        styles[`CellButton--mode-${mode}`],\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAuE;AAQvE;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,yBAJrBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,sBAAU;IACT,eAAe,EAAE;EAAK,GAClBA,SAAS;IACb,SAAS,EAAE,IAAAC,gBAAU,oBAEnBC,MAAM,4BAAqBJ,IAAI,EAAG,EAClCD,QAAQ,8BAAkC,EAC1CE,SAAS;EACT,GACF;AAEN,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"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":["CellButton","centered","mode","className","restProps","SimpleCell","stopPropagation","classNames"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;2DAbU;oBACI;0BACiB;AAWrC,IAAMA,aAAa,iBAKH;iCAJrBC,UAAAA,wCAAW,KAAK,yCAChBC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,qBACE,qBAACE,sBAAU;QACTC,iBAAiB,IAAI;OACjBF;QACJD,WAAWI,IAAAA,gBAAU,oBAEnB,0BACAL,SAAS,YACPK,IAAAA,gBAAU,iCAAoC,wCAChDN,wCACAE;;AAIR"}

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

@@ -1,135 +1,142 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+    enumerable: true,
+    get: function() {
+        return Checkbox;
+    }
 });
-exports.Checkbox = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var React = _interopRequireWildcard(require("react"));
+var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
 var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
-var _Tappable = require("../Tappable/Tappable");
-var _Footnote = require("../Typography/Footnote/Footnote");
-var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
-var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "hoverMode", "activeMode", "hasHover", "hasActive", "focusVisibleMode", "onChange"];
-var _sizeYClassNames;
-var sizeYClassNames = (_sizeYClassNames = {
-  none: "vkuiCheckbox--sizeY-none"
-}, (0, _defineProperty2.default)(_sizeYClassNames, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), (0, _defineProperty2.default)(_sizeYClassNames, _adaptivity.SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _sizeYClassNames);
-var warn = (0, _warnOnce.warnOnce)('Checkbox');
-
-/**
- * @see https://vkcom.github.io/VKUI/#/Checkbox
- */
-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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var inputRef = (0, _useExternRef.useExternRef)(getRef);
-  var platform = (0, _usePlatform.usePlatform)();
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var _useAdaptivityConditi = (0, _useAdaptivityConditionalRender.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;
+var _tappable = require("../Tappable/Tappable");
+var _footnote = require("../Typography/Footnote/Footnote");
+var _visuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
+var _obj;
+var sizeYClassNames = (_obj = {
+    none: "vkuiCheckbox--sizeY-none"
+}, _defineProperty(_obj, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _defineProperty(_obj, _adaptivity.SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _obj);
+var warn = (0, _warnOnce.warnOnce)("Checkbox");
+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 = _objectWithoutProperties(_param, [
+        "children",
+        "className",
+        "style",
+        "getRootRef",
+        "getRef",
+        "description",
+        "indeterminate",
+        "defaultIndeterminate",
+        "hoverMode",
+        "activeMode",
+        "hasHover",
+        "hasActive",
+        "focusVisibleMode",
+        "onChange"
+    ]);
+    var inputRef = (0, _useExternRef.useExternRef)(getRef);
+    var platform = (0, _usePlatform.usePlatform)();
+    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var _useAdaptivityConditionalRender1 = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)(), adaptiveSizeY = _useAdaptivityConditionalRender1.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 !== undefined && inputRef.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-    onChange && onChange(event);
-  }, [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]);
-  if (process.env.NODE_ENV === 'development') {
-    if (defaultIndeterminate && restProps.defaultChecked) {
-      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
-    }
-    if (indeterminate && restProps.checked) {
-      warn('indeterminate и checked не могут быть true одновременно', 'error');
-    }
-    if (restProps.defaultChecked && restProps.checked) {
-      warn('defaultChecked и checked не могут быть true одновременно', 'error');
-    }
-  }
-  return /*#__PURE__*/React.createElement(_Tappable.Tappable, {
-    Component: "label",
-    className: (0, _vkjs.classNames)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
-    style: style,
-    disabled: restProps.disabled,
-    activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,
-    getRootRef: getRootRef,
-    hoverMode: hoverMode,
-    activeMode: activeMode,
-    hasHover: hasHover,
-    hasActive: hasActive,
-    focusVisibleMode: focusVisibleMode
-  }, /*#__PURE__*/React.createElement(_VisuallyHiddenInput.VisuallyHiddenInput, (0, _extends2.default)({}, restProps, {
-    onChange: handleChange,
-    type: "checkbox",
-    className: "vkuiCheckbox__input",
-    getRef: inputRef
-  })), /*#__PURE__*/React.createElement("div", {
-    className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
-  }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOn, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOn, {
-    className: adaptiveSizeY.compact.className
-  }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(_icons.Icon24CheckBoxOn, {
-    className: adaptiveSizeY.regular.className
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
-  }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOff, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxOff, {
-    className: adaptiveSizeY.compact.className
-  }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(_icons.Icon24CheckBoxOff, {
-    className: adaptiveSizeY.regular.className
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
-  }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxIndetermanate, {
-    width: 20,
-    height: 20
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxIndetermanate, {
-    className: adaptiveSizeY.compact.className,
-    width: 20,
-    height: 20
-  }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(_icons.Icon20CheckBoxIndetermanate, {
-    className: adaptiveSizeY.regular.className,
-    width: 24,
-    height: 24
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCheckbox__content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiCheckbox__children"
-  }, children), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
-    className: "vkuiCheckbox__description"
-  }, description)));
+    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, {
+        Component: "label",
+        className: (0, _vkjs.classNames)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
+        style: style,
+        disabled: restProps.disabled,
+        activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _tappable.ACTIVE_EFFECT_DELAY,
+        getRootRef: getRootRef,
+        hoverMode: hoverMode,
+        activeMode: activeMode,
+        hasHover: hasHover,
+        hasActive: hasActive,
+        focusVisibleMode: focusVisibleMode
+    }, /*#__PURE__*/ _react.createElement(_visuallyHiddenInput.VisuallyHiddenInput, _objectSpreadProps(_objectSpread({}, restProps), {
+        onChange: handleChange,
+        type: "checkbox",
+        className: "vkuiCheckbox__input",
+        getRef: inputRef
+    })), /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
+    }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_icons.Icon20CheckBoxOn, null) : /*#__PURE__*/ _react.createElement(_react.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ _react.createElement(_icons.Icon20CheckBoxOn, {
+        className: adaptiveSizeY.compact.className
+    }), adaptiveSizeY.regular && /*#__PURE__*/ _react.createElement(_icons.Icon24CheckBoxOn, {
+        className: adaptiveSizeY.regular.className
+    }))), /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
+    }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_icons.Icon20CheckBoxOff, null) : /*#__PURE__*/ _react.createElement(_react.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ _react.createElement(_icons.Icon20CheckBoxOff, {
+        className: adaptiveSizeY.compact.className
+    }), adaptiveSizeY.regular && /*#__PURE__*/ _react.createElement(_icons.Icon24CheckBoxOff, {
+        className: adaptiveSizeY.regular.className
+    }))), /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
+    }, platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_icons.Icon20CheckBoxIndetermanate, {
+        width: 20,
+        height: 20
+    }) : /*#__PURE__*/ _react.createElement(_react.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ _react.createElement(_icons.Icon20CheckBoxIndetermanate, {
+        className: adaptiveSizeY.compact.className,
+        width: 20,
+        height: 20
+    }), adaptiveSizeY.regular && /*#__PURE__*/ _react.createElement(_icons.Icon20CheckBoxIndetermanate, {
+        className: adaptiveSizeY.regular.className,
+        width: 24,
+        height: 24
+    }))), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiCheckbox__content"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiCheckbox__children"
+    }, children), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+        className: "vkuiCheckbox__description"
+    }, description)));
 };
-exports.Checkbox = Checkbox;
+
 //# sourceMappingURL=Checkbox.js.map