@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { 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"],"mappings":"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"}
+{"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":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","toggleDrag","useContext","useEffect","undefined","dragger","aria-label","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","hasHover","Fragment","e","current","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,WAAW,QAAQ,sBAAsB;AAClD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,UAAU,QAAyB,2BAA2B;AACvE,SAASC,YAAY,QAA2B,8BAA8B;AAC9E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,OAAOC,YAAY,oBAAoB;AAoCvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,KAAI,EACJC,UAAWb,KAAI,EACfc,mBAAoB,UAAS,EAC7BC,aAAY,EACZC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,UAAS,EACTC,SAAQ,EACRC,KAAI,EACJC,MAAK,EACLC,QAAO,EACPC,eAAc,EACdC,WAAU,EACVC,cAAe,mBAAkB,EACjCC,UAAS,EACTC,MAAK,EACL,GAAGC,WACO,GAAK;IACf,MAAMC,aAAanB,SAAS;IAC5B,MAAMoB,YAAYpB,SAAS;IAE3B,MAAMqB,WAAW/B;IAEjB,MAAMgC,YAAYjC,aAAayB;IAE/B,MAAM,EAAES,SAAQ,EAAE,GAAGC,gBAAgB,GAAG3B,aAAa;QACnDyB;QACAnB;IACF;IAEA,MAAM,EAAEsB,WAAU,EAAE,GAAGvC,MAAMwC,UAAU,CAAClC;IACxCN,MAAMyC,SAAS,CAAC,IAAM;QACpB,IAAIJ,UAAU;YACZE,WAAW,IAAI;YACf,OAAO,IAAMA,WAAW,KAAK;QAC/B,CAAC;QACD,OAAOG;IACT,GAAG;QAACL;QAAUE;KAAW;IAEzB,IAAII;IACJ,IAAItB,WAAW;QACbsB,wBACE,oBAACjC;YACCoB,WAAWlB,MAAM,CAAC,gBAAgB;YAClCgC,cAAYf;YACX,GAAGS,cAAc;;IAGxB,CAAC;IAED,IAAIO;IACJ,IAAIZ,YAAY;QACd,MAAMa,gBAAmC;YACvCtB;YACAC;YACAF;YACAI;YACAD;YACAN;QACF;QACAyB,yBAAW,oBAACpC;YAAaqB,WAAWlB,MAAM,CAAC,iBAAiB;YAAG,GAAGkC,aAAa;;IACjF,CAAC;IAED,MAAMC,qBAAqB,AAAC1B,aAAa,CAACY,cAAeC,aAAad;IACtE,MAAM4B,YAAY,CAACD,sBAAsB,CAACV;IAE1C,MAAMY,cAAchD,WAClBW,MAAM,CAAC,OAAO,EACduB,aAAa9B,SAAS6C,GAAG,IAAItC,MAAM,CAAC,YAAY,EAChDyB,YAAYzB,MAAM,CAAC,iBAAiB,EACpCsB,aAAatB,MAAM,CAAC,kBAAkB,EACtCqB,cAAcrB,MAAM,CAAC,mBAAmB,EACxCQ,YAAYR,MAAM,CAAC,iBAAiB;IAGtC,MAAMuC,2BACJ,oBAAC3C;QACCwC,WAAWA;QACXI,UAAUJ;QACT,GAAGhB,SAAS;QACbF,WAAWlB,MAAM,CAAC,gBAAgB;QAClCQ,UAAU2B;QACVzB,WAAWW,aAAa,UAAUX,SAAS;QAC3CJ,sBACE,oBAAClB,MAAMqD,QAAQ,QACZhC,aAAac,aAAa9B,SAAS6C,GAAG,IAAIP,SAC1CV,cAAcY,UACd3B;QAGLC,qBACE,oBAACnB,MAAMqD,QAAQ,QACZhC,aAAac,aAAa9B,SAAS6C,GAAG,IAAIP,SAC1CxB;;IAMT,IAAIe,WAAW;QACb,qBACE,oBAAC3B;YACCuB,WAAW7B,WAAWgD,aAAanB;YACnCC,OAAOA;YACPH,YAAYQ;YACZpB,mBAAmBA;YACnBD,UAAU,CAACuC,IAAMvC,SAASuC,GAAGlB,UAAUmB,OAAO;WAE7CJ;IAGP,CAAC;IAED,qBACE,oBAACK;QAAI1B,WAAW7B,WAAWgD,aAAanB;QAAYC,OAAOA;QAAO0B,KAAKrB;OACpEe;AAGP,EAAE"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CellCheckbox.js","names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHiddenInput","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span className={classNames(styles['CellCheckbox'], className)} style={style}>\n      <VisuallyHiddenInput\n        className={styles['CellCheckbox__input']}\n        type=\"checkbox\"\n        {...restProps}\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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,mBAAmB,QAAQ,+CAA+C;AAAC;AAOpF,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAGP,WAAW,EAAE;EAE9B,IAAMQ,OAAO,GACXD,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDb,oBAAoB,GACpBF,iBAAiB;EAEvB,IAAMgB,MAAM,GACVJ,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDZ,mBAAmB,GACnBF,gBAAgB;EAEtB,oBACE;IAAM,SAAS,EAAEG,UAAU,qBAAyBK,SAAS,CAAE;IAAC,KAAK,EAAEC;EAAM,gBAC3E,oBAAC,mBAAmB;IAClB,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAEP,UAAU,yDAAkE;IACvF;EAAW,gBAEX,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAEA,UAAU,wDAAiE;IACtF;EAAW,gBAEX,oBAAC,MAAM,OAAG,CACL,CACF;AAEX,CAAC"}
+{"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 { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span className={className} style={style}>\n      <VisuallyHiddenInput\n        className={styles['CellCheckbox__input']}\n        type=\"checkbox\"\n        {...restProps}\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":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHiddenInput","styles","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn","span","type","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,mBAAmB,QAAQ,gDAAgD;AAEpF,OAAOC,YAAY,4BAA4B;AAK/C,OAAO,MAAMC,eAAe,CAAC,EAAEC,UAAS,EAAEC,MAAK,EAAE,GAAGC,WAA8B,GAAK;IACrF,MAAMC,WAAWR;IAEjB,MAAMS,UACJD,aAAaP,SAASS,GAAG,IAAIF,aAAaP,SAASU,KAAK,GACpDd,uBACAF,iBAAiB;IAEvB,MAAMiB,SACJJ,aAAaP,SAASS,GAAG,IAAIF,aAAaP,SAASU,KAAK,GACpDb,sBACAF,gBAAgB;IAEtB,qBACE,oBAACiB;QAAKR,WAAWA;QAAWC,OAAOA;qBACjC,oBAACJ;QACCG,WAAWF,MAAM,CAAC,sBAAsB;QACxCW,MAAK;QACJ,GAAGP,SAAS;sBAEf,oBAACM;QACCR,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;QACrFY,eAAAA,IAAW;qBAEX,oBAACN,+BAEH,oBAACI;QACCR,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;QACpFY,eAAAA,IAAW;qBAEX,oBAACH;AAIT,EAAE"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","IOS"],"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { 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 & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,kBAAkB;AAClE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAAC;AAM1C,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAE9B,IAAMU,OAAO,GAAGd,KAAK,CAACe,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK;IACJ,SAAS,EAAEd,UAAU,oBAAwBQ,SAAS,CAAE;IACxD,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEI;EAAQ,GACbF,SAAS,GAEZC,QAAQ,KAAKR,QAAQ,CAACa,GAAG,gBAAG,oBAAC,gBAAgB,OAAG,gBAAG,oBAAC,aAAa,OAAG,CAC/D;AAEZ,CAAC"}
+{"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 & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","styles","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAOC,YAAY,2BAA2B;AAI9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,YAAW,EACXC,WAAU,EACVC,UAAS,EACTC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWV;IAEjB,MAAMW,UAAUf,MAAMgB,WAAW,CAAC,CAACC,IAAwB;QACzDA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,qBACE,oBAACZ;QACCM,WAAWT,WAAWI,MAAM,CAAC,cAAc,EAAEK;QAC7CO,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPI,SAASA;QACR,GAAGF,SAAS;OAEZC,aAAaT,SAASiB,GAAG,iBAAG,oBAACpB,wCAAsB,oBAACD,oBAAgB;AAG3E,EAAE"}

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

@@ -1,114 +1,91 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
-export var useDraggable = function useDraggable(_ref) {
-  var rootElRef = _ref.rootElRef,
-    onDragFinish = _ref.onDragFinish;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dragging = _React$useState2[0],
-    setDragging = _React$useState2[1];
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    siblings = _React$useState4[0],
-    setSiblings = _React$useState4[1];
-  var _React$useState5 = React.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    dragStartIndex = _React$useState6[0],
-    setDragStartIndex = _React$useState6[1];
-  var _React$useState7 = React.useState(0),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    dragEndIndex = _React$useState8[0],
-    setDragEndIndex = _React$useState8[1];
-  var _React$useState9 = React.useState(0),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    dragShift = _React$useState10[0],
-    setDragShift = _React$useState10[1];
-  var _React$useState11 = React.useState(undefined),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    dragDirection = _React$useState12[0],
-    setDragDirection = _React$useState12[1];
-  var onDragStart = function onDragStart() {
-    var _rootEl$parentElement;
-    var rootEl = rootElRef.current;
-    if (!rootEl) {
-      return;
-    }
-    setDragging(true);
-    var _siblings = [];
-    if ((_rootEl$parentElement = rootEl.parentElement) !== null && _rootEl$parentElement !== void 0 && _rootEl$parentElement.childNodes) {
-      _siblings = Array.from(rootEl.parentElement.children);
-    }
-    var idx = _siblings.indexOf(rootEl);
-    setDragStartIndex(idx);
-    setDragEndIndex(idx);
-    setSiblings(_siblings);
-    setDragShift(0);
-  };
-  var onDragMove = function onDragMove(e) {
-    e.originalEvent.preventDefault();
-    var rootEl = rootElRef.current;
-    if (rootEl) {
-      rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
-      var rootGesture = rootEl.getBoundingClientRect();
-      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
-      setDragShift(e.shiftY);
-      setDragEndIndex(dragStartIndex);
-      siblings.forEach(function (sibling, siblingIndex) {
-        var siblingGesture = sibling.getBoundingClientRect();
-        var siblingHalfHeight = siblingGesture.height / 2;
-        var rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
-        var rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
-        if (dragStartIndex < siblingIndex) {
-          if (rootOverSibling) {
-            if (dragDirection === 'down') {
-              sibling.style.transform = 'translateY(-100%)';
-            }
-            setDragEndIndex(function (dragEndIndex) {
-              return dragEndIndex + 1;
-            });
-          }
-          if (rootUnderSibling && dragDirection === 'up') {
-            sibling.style.transform = 'translateY(0)';
-          }
-        } else if (dragStartIndex > siblingIndex) {
-          if (rootUnderSibling) {
-            if (dragDirection === 'up') {
-              sibling.style.transform = 'translateY(100%)';
-            }
-            setDragEndIndex(function (dragEndIndex) {
-              return dragEndIndex - 1;
+export const useDraggable = ({ rootElRef , onDragFinish  })=>{
+    const [dragging, setDragging] = React.useState(false);
+    const [siblings, setSiblings] = React.useState([]);
+    const [dragStartIndex, setDragStartIndex] = React.useState(0);
+    const [dragEndIndex, setDragEndIndex] = React.useState(0);
+    const [dragShift, setDragShift] = React.useState(0);
+    const [dragDirection, setDragDirection] = React.useState(undefined);
+    const onDragStart = ()=>{
+        const rootEl = rootElRef.current;
+        if (!rootEl) {
+            return;
+        }
+        setDragging(true);
+        let _siblings = [];
+        if (rootEl.parentElement?.childNodes) {
+            _siblings = Array.from(rootEl.parentElement.children);
+        }
+        const idx = _siblings.indexOf(rootEl);
+        setDragStartIndex(idx);
+        setDragEndIndex(idx);
+        setSiblings(_siblings);
+        setDragShift(0);
+    };
+    const onDragMove = (e)=>{
+        e.originalEvent.preventDefault();
+        const rootEl = rootElRef.current;
+        if (rootEl) {
+            rootEl.style.transform = `translateY(${e.shiftY}px)`;
+            const rootGesture = rootEl.getBoundingClientRect();
+            setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
+            setDragShift(e.shiftY);
+            setDragEndIndex(dragStartIndex);
+            siblings.forEach((sibling, siblingIndex)=>{
+                const siblingGesture = sibling.getBoundingClientRect();
+                const siblingHalfHeight = siblingGesture.height / 2;
+                const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
+                const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+                if (dragStartIndex < siblingIndex) {
+                    if (rootOverSibling) {
+                        if (dragDirection === 'down') {
+                            sibling.style.transform = 'translateY(-100%)';
+                        }
+                        setDragEndIndex((dragEndIndex)=>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((dragEndIndex)=>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;
+    };
+    const onDragEnd = ()=>{
+        const [from, to] = [
+            dragStartIndex,
+            dragEndIndex
+        ];
+        siblings.forEach((sibling)=>{
+            sibling.style.transform = '';
+        });
+        setSiblings([]);
+        setDragEndIndex(0);
+        setDragStartIndex(0);
+        setDragDirection(undefined);
+        setDragShift(0);
+        setDragging(false);
+        onDragFinish && onDragFinish({
+            from,
+            to
+        });
+    };
+    const useDraggableProps = {
+        onDragStart,
+        onDragMove,
+        onDragEnd,
+        dragging
+    };
+    return useDraggableProps;
 };
+
 //# sourceMappingURL=useDraggable.js.map

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CellButton.js","names":["React","classNames","SimpleCell","CellButton","centered","mode","className","restProps","styles"],"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        styles[`CellButton--mode-${mode}`],\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,UAAU,QAAyB,0BAA0B;AAAC;AAQvE;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,yBAJrBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,UAAU;IACT,eAAe,EAAE;EAAK,GAClBA,SAAS;IACb,SAAS,EAAEN,UAAU,mBAEnBO,MAAM,4BAAqBH,IAAI,EAAG,EAClCD,QAAQ,8BAAkC,EAC1CE,SAAS;EACT,GACF;AAEN,CAAC;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        'vkuiInternalCellButton',\n        mode === 'danger' &&\n          classNames(styles['CellButton--mode-danger'], 'vkuiInternalCellButton--mode-danger'),\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","SimpleCell","styles","CellButton","centered","mode","className","restProps","stopPropagation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAW,KAAK,CAAA,EAChBC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,qBACE,oBAACN;QACCO,iBAAiB,IAAI;QACpB,GAAGD,SAAS;QACbD,WAAWN,WACTE,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,YACPL,WAAWE,MAAM,CAAC,0BAA0B,EAAE,wCAChDE,YAAYF,MAAM,CAAC,uBAAuB,EAC1CI;;AAIR,EAAE"}