@vkontakte/vkui 5.4.3 → 5.5.0

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

@@ -8,23 +8,23 @@ Object.defineProperty(exports, "Cell", {
         return Cell;
     }
 });
-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 _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
-var _listContext = require("../List/ListContext");
-var _removable = require("../Removable/Removable");
-var _simpleCell = require("../SimpleCell/SimpleCell");
-var _cellCheckbox = require("./CellCheckbox/CellCheckbox");
-var _cellDragger = require("./CellDragger/CellDragger");
+var _ListContext = require("../List/ListContext");
+var _Removable = require("../Removable/Removable");
+var _SimpleCell = require("../SimpleCell/SimpleCell");
+var _CellCheckbox = require("./CellCheckbox/CellCheckbox");
+var _CellDragger = require("./CellDragger/CellDragger");
 var _useDraggable = require("./useDraggable");
 var Cell = function(_param) {
-    var mode = _param.mode, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, onDragFinish = _param.onDragFinish, before = _param.before, after = _param.after, disabled = _param.disabled, draggable = _param.draggable, Component = _param.Component, onChange = _param.onChange, name = _param.name, value = _param.value, checked = _param.checked, defaultChecked = _param.defaultChecked, getRootRef = _param.getRootRef, _param_draggerLabel = _param.draggerLabel, draggerLabel = _param_draggerLabel === void 0 ? "Перенести ячейку" : _param_draggerLabel, className = _param.className, style = _param.style, restProps = _objectWithoutProperties(_param, [
+    var mode = _param.mode, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, onDragFinish = _param.onDragFinish, before = _param.before, after = _param.after, disabled = _param.disabled, draggable = _param.draggable, ComponentProps = _param.Component, onChange = _param.onChange, name = _param.name, value = _param.value, checked = _param.checked, defaultChecked = _param.defaultChecked, getRootRef = _param.getRootRef, _param_draggerLabel = _param.draggerLabel, draggerLabel = _param_draggerLabel === void 0 ? "Перенести ячейку" : _param_draggerLabel, className = _param.className, style = _param.style, restProps = _object_without_properties._(_param, [
         "mode",
         "onRemove",
         "removePlaceholder",
@@ -46,15 +46,16 @@ var Cell = function(_param) {
     ]);
     var selectable = mode === "selectable";
     var removable = mode === "removable";
+    var Component = selectable ? "label" : ComponentProps;
     var platform = (0, _usePlatform.usePlatform)();
     var rootElRef = (0, _useExternRef.useExternRef)(getRootRef);
     var _useDraggable1 = (0, _useDraggable.useDraggable)({
         rootElRef: rootElRef,
         onDragFinish: onDragFinish
-    }), dragging = _useDraggable1.dragging, draggableProps = _objectWithoutProperties(_useDraggable1, [
+    }), dragging = _useDraggable1.dragging, draggableProps = _object_without_properties._(_useDraggable1, [
         "dragging"
     ]);
-    var toggleDrag = _react.useContext(_listContext.ListContext).toggleDrag;
+    var toggleDrag = _react.useContext(_ListContext.ListContext).toggleDrag;
     _react.useEffect(function() {
         if (dragging) {
             toggleDrag(true);
@@ -69,7 +70,7 @@ var Cell = function(_param) {
     ]);
     var dragger;
     if (draggable) {
-        dragger = /*#__PURE__*/ _react.createElement(_cellDragger.CellDragger, _objectSpread({
+        dragger = /*#__PURE__*/ _react.createElement(_CellDragger.CellDragger, _object_spread._({
             className: "vkuiCell__dragger",
             "aria-label": draggerLabel
         }, draggableProps));
@@ -84,25 +85,25 @@ var Cell = function(_param) {
             checked: checked,
             disabled: disabled
         };
-        checkbox = /*#__PURE__*/ _react.createElement(_cellCheckbox.CellCheckbox, _objectSpread({
+        checkbox = /*#__PURE__*/ _react.createElement(_CellCheckbox.CellCheckbox, _object_spread._({
             className: "vkuiCell__checkbox"
         }, checkboxProps));
     }
     var simpleCellDisabled = draggable && !selectable || removable || disabled;
     var hasActive = !simpleCellDisabled && !dragging;
-    var cellClasses = (0, _vkjs.classNames)("vkuiCell", platform === _platform.Platform.IOS && "vkuiCell--ios", dragging && "vkuiCell--dragging", removable && "vkuiCell--removable", selectable && "vkuiCell--selectable", disabled && "vkuiCell--disabled");
-    var simpleCell = /*#__PURE__*/ _react.createElement(_simpleCell.SimpleCell, _objectSpreadProps(_objectSpread({
+    var cellClasses = (0, _vkjs.classNames)("vkuiCell", platform === _platform.Platform.IOS && "vkuiCell--ios", dragging && "vkuiCell--dragging", removable && "vkuiCell--removable", Component === "label" && "vkuiCell--selectable", disabled && "vkuiCell--disabled");
+    var simpleCell = /*#__PURE__*/ _react.createElement(_SimpleCell.SimpleCell, _object_spread_props._(_object_spread._({
         hasActive: hasActive,
         hasHover: hasActive
     }, restProps), {
         className: "vkuiCell__content",
         disabled: simpleCellDisabled,
-        Component: selectable ? "label" : Component,
+        Component: Component,
         before: /*#__PURE__*/ _react.createElement(_react.Fragment, null, draggable && platform !== _platform.Platform.IOS && dragger, selectable && checkbox, before),
         after: /*#__PURE__*/ _react.createElement(_react.Fragment, null, draggable && platform === _platform.Platform.IOS && dragger, after)
     }));
     if (removable) {
-        return /*#__PURE__*/ _react.createElement(_removable.Removable, {
+        return /*#__PURE__*/ _react.createElement(_Removable.Removable, {
             className: (0, _vkjs.classNames)(cellClasses, className),
             style: style,
             getRootRef: rootElRef,
@@ -118,5 +119,6 @@ var Cell = function(_param) {
         ref: rootElRef
     }, simpleCell);
 };
+Cell.Checkbox = _CellCheckbox.CellCheckbox;
 
 //# sourceMappingURL=Cell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ListContext } from '../List/ListContext';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { useDraggable } from './useDraggable';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    selectable && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={selectable ? 'label' : Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","usePlatform","rootElRef","useExternRef","useDraggable","dragging","draggableProps","toggleDrag","React","useContext","ListContext","useEffect","undefined","dragger","CellDragger","aria-label","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","hasActive","cellClasses","classNames","Platform","IOS","simpleCell","SimpleCell","hasHover","Fragment","Removable","e","current","div","ref"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;2DAnDU;oBACU;4BACJ;2BACD;wBACH;2BAEG;yBACc;0BACE;4BACI;2BACpB;4BACC;AAwCtB,IAAMA,OAAO,iBAoBH;QAnBfC,cAAAA,+BACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,sBAAAA,cACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,UACAC,mBAAAA,WACAC,mBAAAA,WACAC,kBAAAA,UACAC,cAAAA,MACAC,eAAAA,OACAC,iBAAAA,SACAC,wBAAAA,gBACAC,oBAAAA,yCACAC,cAAAA,gDAAe,0CACfC,mBAAAA,WACAC,eAAAA,OACGC;QAlBHnB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,aAAapB,SAAS;IAC5B,IAAMqB,YAAYrB,SAAS;IAE3B,IAAMsB,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,YAAYC,IAAAA,0BAAY,EAACV;IAE/B,IAAwCW,iBAAAA,IAAAA,0BAAY,EAAC;QACnDF,WAAAA;QACApB,cAAAA;IACF,IAHM,AAAEuB,WAAgCD,eAAhCC,UAAaC,0CAAmBF;QAAhCC;;IAKR,IAAM,AAAEE,aAAeC,OAAMC,UAAU,CAACC,wBAAW,EAA3CH;IACRC,OAAMG,SAAS,CAAC,WAAM;QACpB,IAAIN,UAAU;YACZE,WAAW,IAAI;YACf,OAAO;uBAAMA,WAAW,KAAK;;QAC/B,CAAC;QACD,OAAOK;IACT,GAAG;QAACP;QAAUE;KAAW;IAEzB,IAAIM;IACJ,IAAI3B,WAAW;QACb2B,wBACE,qBAACC,wBAAW;YACVnB,SAAS;YACToB,cAAYrB;WACRY;IAGV,CAAC;IAED,IAAIU;IACJ,IAAIlB,YAAY;QACd,IAAMmB,gBAAmC;YACvC5B,MAAAA;YACAC,OAAAA;YACAF,UAAAA;YACAI,gBAAAA;YACAD,SAAAA;YACAN,UAAAA;QACF;QACA+B,yBAAW,qBAACE,0BAAY;YAACvB,SAAS;WAAgCsB;IACpE,CAAC;IAED,IAAME,qBAAqB,AAACjC,aAAa,CAACY,cAAeC,aAAad;IACtE,IAAMmC,YAAY,CAACD,sBAAsB,CAACd;IAE1C,IAAMgB,cAAcC,IAAAA,gBAAU,cAE5BtB,aAAauB,kBAAQ,CAACC,GAAG,qBACzBnB,kCACAN,oCACAD,sCACAb;IAGF,IAAMwC,2BACJ,qBAACC,sBAAU;QACTN,WAAWA;QACXO,UAAUP;OACNvB;QACJF,SAAS;QACTV,UAAUkC;QACVhC,WAAWW,aAAa,UAAUX,SAAS;QAC3CJ,sBACE,qBAACyB,OAAMoB,QAAQ,QACZ1C,aAAac,aAAauB,kBAAQ,CAACC,GAAG,IAAIX,SAC1Cf,cAAckB,UACdjC;QAGLC,qBACE,qBAACwB,OAAMoB,QAAQ,QACZ1C,aAAac,aAAauB,kBAAQ,CAACC,GAAG,IAAIX,SAC1C7B;;IAMT,IAAIe,WAAW;QACb,qBACE,qBAAC8B,oBAAS;YACRlC,WAAW2B,IAAAA,gBAAU,EAACD,aAAa1B;YACnCC,OAAOA;YACPH,YAAYS;YACZrB,mBAAmBA;YACnBF,UAAU,SAACmD;uBAAMnD,SAASmD,GAAG5B,UAAU6B,OAAO;;WAE7CN;IAGP,CAAC;IAED,qBACE,qBAACO;QAAIrC,WAAW2B,IAAAA,gBAAU,EAACD,aAAa1B;QAAYC,OAAOA;QAAOqC,KAAK/B;OACpEuB;AAGP"}
+{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ListContext } from '../List/ListContext';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { useDraggable } from './useDraggable';\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: ComponentProps,\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  const Component = selectable ? 'label' : ComponentProps;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    Component === 'label' && 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={Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","usePlatform","rootElRef","useExternRef","useDraggable","dragging","draggableProps","toggleDrag","React","useContext","ListContext","useEffect","undefined","dragger","CellDragger","aria-label","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","hasActive","cellClasses","classNames","Platform","IOS","simpleCell","SimpleCell","hasHover","Fragment","Removable","e","current","div","ref","Checkbox"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;+DAnDU;oBACU;4BACJ;2BACD;wBACH;2BAEG;yBACc;0BACE;4BACI;2BACpB;4BACC;AAwCtB,IAAMA,OAAO;QAClBC,cAAAA,+BACAC,UAAAA,wCAAWC,gEACXC,mBAAAA,0DAAoB,sCACpBC,sBAAAA,cACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,UACAC,mBAAAA,WACAC,AAAWC,wBAAXD,WACAE,kBAAAA,UACAC,cAAAA,MACAC,eAAAA,OACAC,iBAAAA,SACAC,wBAAAA,gBACAC,oBAAAA,yCACAC,cAAAA,gDAAe,0CACfC,mBAAAA,WACAC,eAAAA,OACGC;QAlBHpB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,aAAarB,SAAS;IAC5B,IAAMsB,YAAYtB,SAAS;IAC3B,IAAMS,YAAYY,aAAa,UAAUX;IAEzC,IAAMa,WAAWC,IAAAA;IAEjB,IAAMC,YAAYC,IAAAA,4BAAaV;IAE/B,IAAwCW,iBAAAA,IAAAA,4BAAa;QACnDF,WAAAA;QACArB,cAAAA;IACF,IAHM,AAAEwB,WAAgCD,eAAhCC,UAAaC,8CAAmBF;QAAhCC;;IAKR,IAAM,AAAEE,aAAeC,OAAMC,WAAWC,0BAAhCH;IACRC,OAAMG,UAAU;QACd,IAAIN,UAAU;YACZE,WAAW;YACX,OAAO;uBAAMA,WAAW;;QAC1B;QACA,OAAOK;IACT,GAAG;QAACP;QAAUE;KAAW;IAEzB,IAAIM;IACJ,IAAI5B,WAAW;QACb4B,wBACE,qBAACC;YACCnB,SAAS;YACToB,cAAYrB;WACRY;IAGV;IAEA,IAAIU;IACJ,IAAIlB,YAAY;QACd,IAAMmB,gBAAmC;YACvC5B,MAAAA;YACAC,OAAAA;YACAF,UAAAA;YACAI,gBAAAA;YACAD,SAAAA;YACAP,UAAAA;QACF;QACAgC,yBAAW,qBAACE;YAAavB,SAAS;WAAgCsB;IACpE;IAEA,IAAME,qBAAqB,AAAClC,aAAa,CAACa,cAAeC,aAAaf;IACtE,IAAMoC,YAAY,CAACD,sBAAsB,CAACd;IAE1C,IAAMgB,cAAcC,IAAAA,8BAElBtB,aAAauB,mBAASC,wBACtBnB,kCACAN,oCACAb,cAAc,mCACdF;IAGF,IAAMyC,2BACJ,qBAACC;QACCN,WAAWA;QACXO,UAAUP;OACNvB;QACJF,SAAS;QACTX,UAAUmC;QACVjC,WAAWA;QACXJ,sBACE,qBAAC0B,OAAMoB,gBACJ3C,aAAae,aAAauB,mBAASC,OAAOX,SAC1Cf,cAAckB,UACdlC;QAGLC,qBACE,qBAACyB,OAAMoB,gBACJ3C,aAAae,aAAauB,mBAASC,OAAOX,SAC1C9B;;IAMT,IAAIgB,WAAW;QACb,qBACE,qBAAC8B;YACClC,WAAW2B,IAAAA,kBAAWD,aAAa1B;YACnCC,OAAOA;YACPH,YAAYS;YACZtB,mBAAmBA;YACnBF,UAAU,SAACoD;uBAAMpD,SAASoD,GAAG5B,UAAU6B;;WAEtCN;IAGP;IAEA,qBACE,qBAACO;QAAIrC,WAAW2B,IAAAA,kBAAWD,aAAa1B;QAAYC,OAAOA;QAAOqC,KAAK/B;OACpEuB;AAGP;AAEAjD,KAAK0D,WAAWhB"}

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { HasRef } from '../../../types';
+import { HasRef, HasRootRef } from '../../../types';
 import { CellProps } from '../Cell';
-export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLSpanElement>, HasRef<HTMLInputElement> {
+    /**
+     * Вид чекбокса. Если auto, то зависит от платформы.
+     */
+    type?: 'auto' | 'circle' | 'square';
 }
-export declare const CellCheckbox: ({ className, style, getRef, ...restProps }: CellCheckboxProps) => JSX.Element;
+export declare const CellCheckbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => React.JSX.Element;

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

@@ -8,29 +8,55 @@ Object.defineProperty(exports, "CellCheckbox", {
         return CellCheckbox;
     }
 });
-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 _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../../hooks/usePlatform");
 var _platform = require("../../../lib/platform");
-var _visuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
+var _AdaptiveIconRenderer = require("../../AdaptiveIconRenderer/AdaptiveIconRenderer");
+var _VisuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
+var CheckBoxOn = function() {
+    return /*#__PURE__*/ _react.createElement(_AdaptiveIconRenderer.AdaptiveIconRenderer, {
+        IconCompact: _icons.Icon20CheckBoxOn,
+        IconRegular: _icons.Icon24CheckBoxOn
+    });
+};
+var CheckBoxOff = function() {
+    return /*#__PURE__*/ _react.createElement(_AdaptiveIconRenderer.AdaptiveIconRenderer, {
+        IconCompact: _icons.Icon20CheckBoxOff,
+        IconRegular: _icons.Icon24CheckBoxOff
+    });
+};
+function useTypeIcon(type) {
+    var platform = (0, _usePlatform.usePlatform)();
+    if (type !== "auto") {
+        return type;
+    }
+    if (platform === _platform.Platform.IOS || platform === _platform.Platform.VKCOM) {
+        return "circle";
+    }
+    return "square";
+}
 var CellCheckbox = function(_param) {
-    var className = _param.className, style = _param.style, getRef = _param.getRef, restProps = _objectWithoutProperties(_param, [
+    var getRootRef = _param.getRootRef, getRef = _param.getRef, className = _param.className, style = _param.style, _param_type = _param.type, type = _param_type === void 0 ? "auto" : _param_type, restProps = _object_without_properties._(_param, [
+        "getRootRef",
+        "getRef",
         "className",
         "style",
-        "getRef"
+        "type"
     ]);
-    var platform = (0, _usePlatform.usePlatform)();
-    var IconOff = platform === _platform.Platform.IOS || platform === _platform.Platform.VKCOM ? _icons.Icon24CheckCircleOff : _icons.Icon24CheckBoxOff;
-    var IconOn = platform === _platform.Platform.IOS || platform === _platform.Platform.VKCOM ? _icons.Icon24CheckCircleOn : _icons.Icon24CheckBoxOn;
+    var typeIcon = useTypeIcon(type);
+    var IconOff = typeIcon === "circle" ? _icons.Icon24CheckCircleOff : CheckBoxOff;
+    var IconOn = typeIcon === "circle" ? _icons.Icon24CheckCircleOn : CheckBoxOn;
     return /*#__PURE__*/ _react.createElement("span", {
-        className: className,
-        style: style
-    }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiCellCheckbox", className),
+        style: style,
+        ref: getRootRef
+    }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, _object_spread_props._(_object_spread._({}, restProps), {
         Component: "input",
         type: "checkbox",
         className: "vkuiCellCheckbox__input",

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

@@ -1 +1 @@
-{"version":3,"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 { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef } from '../../../types';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\nexport const CellCheckbox = ({ className, style, getRef, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span className={className} style={style}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["CellCheckbox","className","style","getRef","restProps","platform","usePlatform","IconOff","Platform","IOS","VKCOM","Icon24CheckCircleOff","Icon24CheckBoxOff","IconOn","Icon24CheckCircleOn","Icon24CheckBoxOn","span","VisuallyHidden","Component","type","getRootRef","classNames","aria-hidden"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;2DApBU;qBAMhB;oBACoB;2BACC;wBACH;8BAEM;AASxB,IAAMA,eAAe,iBAAmE;QAAhEC,mBAAAA,WAAWC,eAAAA,OAAOC,gBAAAA,QAAWC;QAA7BH;QAAWC;QAAOC;;IAC/C,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,UACJF,aAAaG,kBAAQ,CAACC,GAAG,IAAIJ,aAAaG,kBAAQ,CAACE,KAAK,GACpDC,2BAAoB,GACpBC,wBAAiB;IAEvB,IAAMC,SACJR,aAAaG,kBAAQ,CAACC,GAAG,IAAIJ,aAAaG,kBAAQ,CAACE,KAAK,GACpDI,0BAAmB,GACnBC,uBAAgB;IAEtB,qBACE,qBAACC;QAAKf,WAAWA;QAAWC,OAAOA;qBACjC,qBAACe,8BAAc,uCACTb;QACJc,WAAU;QACVC,MAAK;QACLlB,SAAS;QACTmB,YAAYjB;uBAEd,qBAACa;QACCf,WAAWoB,IAAAA,gBAAU;QACrBC,eAAAA,IAAW;qBAEX,qBAACf,+BAEH,qBAACS;QACCf,WAAWoB,IAAAA,gBAAU;QACrBC,eAAAA,IAAW;qBAEX,qBAACT;AAIT"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nconst CheckBoxOn = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOn} IconRegular={Icon24CheckBoxOn} />\n);\n\nconst CheckBoxOff = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOff} IconRegular={Icon24CheckBoxOff} />\n);\n\nfunction useTypeIcon(type: NonNullable<CellCheckboxProps['type']>) {\n  const platform = usePlatform();\n\n  if (type !== 'auto') {\n    return type;\n  }\n\n  if (platform === Platform.IOS || platform === Platform.VKCOM) {\n    return 'circle';\n  }\n\n  return 'square';\n}\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLSpanElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Вид чекбокса. Если auto, то зависит от платформы.\n   */\n  type?: 'auto' | 'circle' | 'square';\n}\n\nexport const CellCheckbox = ({\n  getRootRef,\n  getRef,\n  className,\n  style,\n  type = 'auto',\n  ...restProps\n}: CellCheckboxProps) => {\n  const typeIcon = useTypeIcon(type);\n\n  const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;\n  const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;\n\n  return (\n    <span className={classNames(styles['CellCheckbox'], className)} style={style} ref={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["CellCheckbox","CheckBoxOn","AdaptiveIconRenderer","IconCompact","Icon20CheckBoxOn","IconRegular","Icon24CheckBoxOn","CheckBoxOff","Icon20CheckBoxOff","Icon24CheckBoxOff","useTypeIcon","type","platform","usePlatform","Platform","IOS","VKCOM","getRootRef","getRef","className","style","restProps","typeIcon","IconOff","Icon24CheckCircleOff","IconOn","Icon24CheckCircleOn","span","classNames","ref","VisuallyHidden","Component","aria-hidden"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;+DAnDU;qBAQhB;oBACoB;2BACC;wBACH;oCAEY;8BACN;AAI/B,IAAMC,aAAa;yBACjB,qBAACC;QAAqBC,aAAaC;QAAkBC,aAAaC;;;AAGpE,IAAMC,cAAc;yBAClB,qBAACL;QAAqBC,aAAaK;QAAmBH,aAAaI;;;AAGrE,SAASC,YAAYC,IAA4C;IAC/D,IAAMC,WAAWC,IAAAA;IAEjB,IAAIF,SAAS,QAAQ;QACnB,OAAOA;IACT;IAEA,IAAIC,aAAaE,mBAASC,OAAOH,aAAaE,mBAASE,OAAO;QAC5D,OAAO;IACT;IAEA,OAAO;AACT;AAaO,IAAMhB,eAAe;QAC1BiB,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,4BACAT,MAAAA,gCAAO,sBACJU;QALHJ;QACAC;QACAC;QACAC;QACAT;;IAGA,IAAMW,WAAWZ,YAAYC;IAE7B,IAAMY,UAAUD,aAAa,WAAWE,8BAAuBjB;IAC/D,IAAMkB,SAASH,aAAa,WAAWI,6BAAsBzB;IAE7D,qBACE,qBAAC0B;QAAKR,WAAWS,IAAAA,sCAAmCT;QAAYC,OAAOA;QAAOS,KAAKZ;qBACjF,qBAACa,4EACKT;QACJU,WAAU;QACVpB,MAAK;QACLQ,SAAS;QACTF,YAAYC;uBAEd,qBAACS;QACCR,WAAWS,IAAAA;QACXI,eAAAA;qBAEA,qBAACT,+BAEH,qBAACI;QACCR,WAAWS,IAAAA;QACXI,eAAAA;qBAEA,qBAACP;AAIT"}

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

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

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

@@ -8,17 +8,17 @@ Object.defineProperty(exports, "CellDragger", {
         return CellDragger;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../../hooks/usePlatform");
 var _platform = require("../../../lib/platform");
-var _touch = require("../../Touch/Touch");
+var _Touch = require("../../Touch/Touch");
 var CellDragger = function(_param) {
-    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, onClick = _param.onClick, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, onClick = _param.onClick, className = _param.className, restProps = _object_without_properties._(_param, [
         "onDragStart",
         "onDragMove",
         "onDragEnd",
@@ -32,7 +32,7 @@ var CellDragger = function(_param) {
             onClick(event);
         }
     };
-    return /*#__PURE__*/ _react.createElement(_touch.Touch, _objectSpread({
+    return /*#__PURE__*/ _react.createElement(_Touch.Touch, _object_spread._({
         className: (0, _vkjs.classNames)("vkuiCellDragger", className),
         onStart: onDragStart,
         onMoveY: onDragMove,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  onClick,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","usePlatform","handleClick","event","preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;2DAZU;qBACyB;oBACrB;2BACC;wBACH;qBACH;AAOf,IAAMA,cAAc,iBAOH;QANtBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,cAAc,SAACC,OAAyC;QAC5DA,MAAMC,cAAc;QACpB,IAAIP,SAAS;YACXA,QAAQM;QACV,CAAC;IACH;IAEA,qBACE,qBAACE,YAAK;QACJP,WAAWQ,IAAAA,gBAAU,qBAAwBR;QAC7CS,SAASb;QACTc,SAASb;QACTc,OAAOb;QACPC,SAASK;OACLH,YAEHC,aAAaU,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,uBAAgB,wBAAM,qBAACC,oBAAa,OAAG;AAG3E"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  onClick,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","usePlatform","handleClick","event","preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;+DAZU;qBACyB;oBACrB;2BACC;wBACH;qBACH;AAOf,IAAMA,cAAc;QACzBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAMC,cAAc,SAACC;QACnBA,MAAMC;QACN,IAAIP,SAAS;YACXA,QAAQM;QACV;IACF;IAEA,qBACE,qBAACE;QACCP,WAAWQ,IAAAA,qCAAkCR;QAC7CS,SAASb;QACTc,SAASb;QACTc,OAAOb;QACPC,SAASK;OACLH,YAEHC,aAAaU,mBAASC,oBAAM,qBAACC,+CAAsB,qBAACC;AAG3D"}

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

@@ -8,17 +8,17 @@ Object.defineProperty(exports, "useDraggable", {
         return useDraggable;
     }
 });
-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 _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(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 _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(event) {
         var _rootEl_parentElement;
         var rootEl = rootElRef.current;

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

@@ -1 +1 @@
-{"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(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: 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 = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\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 = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.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 = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\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","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"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(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: 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 = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\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 = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.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 = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\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","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","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.d.ts

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

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

@@ -8,20 +8,20 @@ Object.defineProperty(exports, "CellButton", {
         return CellButton;
     }
 });
-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 _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _simpleCell = require("../SimpleCell/SimpleCell");
+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, [
+    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.SimpleCell, _objectSpreadProps(_objectSpread({
+    return /*#__PURE__*/ _react.createElement(_SimpleCell.SimpleCell, _object_spread_props._(_object_spread._({
         stopPropagation: true
     }, restProps), {
         className: (0, _vkjs.classNames)("vkuiCellButton", "vkuiInternalCellButton", mode === "danger" && (0, _vkjs.classNames)("vkuiCellButton--mode-danger", "vkuiInternalCellButton--mode-danger"), centered && "vkuiCellButton--centered", className)

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

@@ -1 +1 @@
-{"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"}
+{"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;;;;;;;+DAbU;oBACI;0BACiB;AAWrC,IAAMA,aAAa;iCACxBC,UAAAA,wCAAW,8CACXC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCC,iBAAiB;OACbF;QACJD,WAAWI,IAAAA,oCAET,0BACAL,SAAS,YACPK,IAAAA,iDAA8C,wCAChDN,wCACAE;;AAIR"}

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

@@ -10,4 +10,4 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => React.JSX.Element;

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

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "Checkbox", {
         return Checkbox;
     }
 });
-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 _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
@@ -23,16 +23,16 @@ 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 _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
+var _Tappable = require("../Tappable/Tappable");
+var _Footnote = require("../Typography/Footnote/Footnote");
+var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 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);
+}, _define_property._(_obj, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _define_property._(_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, titleAfter = _param.titleAfter, restProps = _objectWithoutProperties(_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, titleAfter = _param.titleAfter, restProps = _object_without_properties._(_param, [
         "children",
         "className",
         "style",
@@ -89,19 +89,19 @@ var Checkbox = function(_param) {
             warn("defaultChecked и checked не могут быть true одновременно", "error");
         }
     }
-    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, {
+    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,
+        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(_visuallyHidden.VisuallyHidden, _objectSpreadProps(_objectSpread({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, _object_spread_props._(_object_spread._({}, restProps), {
         Component: "input",
         type: "checkbox",
         onChange: handleChange,
@@ -138,7 +138,7 @@ var Checkbox = function(_param) {
         className: "vkuiCheckbox__title"
     }, /*#__PURE__*/ _react.createElement("span", null, children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCheckbox__titleAfter"
-    }, titleAfter)), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+    }, titleAfter)), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiCheckbox__description"
     }, description)));
 };