@vkontakte/vkui 4.19.0 → 4.22.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["getClassName","classNames","Tappable","Title","Text","Subhead","Caption","usePlatform","SizeType","withAdaptivity","IOS","VKCOM","Spinner","ButtonTypography","props","size","sizeY","platform","restProps","isCompact","COMPACT","Button","mode","stretched","align","children","before","after","getRootRef","Component","loading","onClick","hasIcons","Boolean","href","defaultProps","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport Tappable, { TappableProps } from '../Tappable/Tappable';\nimport Title from '../Typography/Title/Title';\nimport Text from '../Typography/Text/Text';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport Caption from '../Typography/Caption/Caption';\nimport { HasAlign } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptivityProps, SizeType, withAdaptivity } from '../../hoc/withAdaptivity';\nimport { Platform, IOS, VKCOM } from '../../lib/platform';\nimport Spinner from '../Spinner/Spinner';\nimport './Button.css';\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'commerce' | 'destructive' | 'overlay_primary' | 'overlay_secondary' | 'overlay_outline';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\ninterface ButtonTypographyProps {\n  size: ButtonProps['size'];\n  platform: Platform;\n  sizeY: AdaptivityProps['sizeY'];\n  children?: ButtonProps['children'];\n  Component?: React.ElementType;\n}\n\nconst ButtonTypography: React.FC<ButtonTypographyProps> = (props: ButtonTypographyProps) => {\n  const { size, sizeY, platform, ...restProps } = props;\n  const isCompact = sizeY === SizeType.COMPACT;\n\n  switch (size) {\n    case 'l':\n      if (isCompact) {\n        return <Text weight=\"medium\" {...restProps} />;\n      }\n\n      return <Title level=\"3\" weight=\"medium\" {...restProps} />;\n    case 'm':\n      if (isCompact) {\n        return <Subhead weight={platform === VKCOM ? 'regular' : 'medium'} {...restProps} />;\n      }\n\n      return <Text weight=\"medium\" {...restProps} />;\n    case 's':\n    default:\n      if (platform === IOS) {\n        return <Subhead weight=\"medium\" {...restProps} />;\n      }\n\n      if (platform === VKCOM) {\n        return <Caption level=\"1\" weight=\"regular\" {...restProps} />;\n      }\n\n      if (isCompact) {\n        return <Caption level=\"1\" weight=\"medium\" {...restProps} />;\n      }\n\n      return <Subhead weight=\"medium\" {...restProps} />;\n  }\n};\n\nconst Button: React.FC<ButtonProps> = (props: ButtonProps) => {\n  const platform = usePlatform();\n  const {\n    size,\n    mode,\n    stretched,\n    align,\n    children,\n    before,\n    after,\n    getRootRef,\n    sizeY,\n    Component = 'button',\n    loading,\n    onClick,\n    ...restProps\n  } = props;\n\n  const hasIcons = Boolean(before || after);\n\n  return (\n    <Tappable\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      onClick={loading ? null : onClick}\n      focusVisibleMode=\"outside\"\n      vkuiClass={\n        classNames(\n          getClassName('Button', platform),\n          `Button--sz-${size}`,\n          `Button--lvl-${mode}`,\n          `Button--aln-${align}`,\n          `Button--sizeY-${sizeY}`,\n          {\n            ['Button--stretched']: stretched,\n            ['Button--with-icon']: hasIcons,\n          },\n        )\n      }\n      getRootRef={getRootRef}\n      activeMode=\"opacity\"\n    >\n      {loading && <Spinner size=\"small\" vkuiClass=\"Button__spinner\" />}\n      <span vkuiClass=\"Button__in\">\n        {before && <span vkuiClass=\"Button__before\">{before}</span>}\n        {children && (\n          <ButtonTypography\n            size={size}\n            sizeY={sizeY}\n            platform={platform}\n            vkuiClass=\"Button__content\"\n            Component=\"span\"\n          >\n            {children}\n          </ButtonTypography>\n        )}\n        {after && <span vkuiClass=\"Button__after\">{after}</span>}\n      </span>\n    </Tappable>\n  );\n};\n\nButton.defaultProps = {\n  mode: 'primary',\n  align: 'center',\n  size: 's',\n  stretched: false,\n  stopPropagation: true,\n};\n\nexport default withAdaptivity(Button, {\n  sizeY: true,\n});\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["getClassName","classNames","Tappable","Title","Text","Subhead","Caption","usePlatform","SizeType","withAdaptivity","IOS","VKCOM","Spinner","ButtonTypography","props","size","sizeY","platform","restProps","isCompact","COMPACT","Button","mode","stretched","align","children","before","after","getRootRef","Component","loading","onClick","hasIcons","Boolean","href","defaultProps","stopPropagation"],"mappings":";;;;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,OAAOC,QAAP;AACA,OAAOC,KAAP;AACA,OAAOC,IAAP;AACA,OAAOC,OAAP;AACA,OAAOC,OAAP;AAEA,SAASC,WAAT;AACA,SAA0BC,QAA1B,EAAoCC,cAApC;AACA,SAAmBC,GAAnB,EAAwBC,KAAxB;AACA,OAAOC,OAAP;AACA;;AAoBA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAACC,KAAD,EAAkC;AAC1F,MAAQC,IAAR,GAAgDD,KAAhD,CAAQC,IAAR;AAAA,MAAcC,KAAd,GAAgDF,KAAhD,CAAcE,KAAd;AAAA,MAAqBC,QAArB,GAAgDH,KAAhD,CAAqBG,QAArB;AAAA,MAAkCC,SAAlC,4BAAgDJ,KAAhD;;AACA,MAAMK,SAAS,GAAGH,KAAK,KAAKR,QAAQ,CAACY,OAArC;;AAEA,UAAQL,IAAR;AACE,SAAK,GAAL;AACE,UAAII,SAAJ,EAAe;AACb,eAAO,oBAAC,IAAD;AAAM,UAAA,MAAM,EAAC;AAAb,WAA0BD,SAA1B,EAAP;AACD;;AAED,aAAO,oBAAC,KAAD;AAAO,QAAA,KAAK,EAAC,GAAb;AAAiB,QAAA,MAAM,EAAC;AAAxB,SAAqCA,SAArC,EAAP;;AACF,SAAK,GAAL;AACE,UAAIC,SAAJ,EAAe;AACb,eAAO,oBAAC,OAAD;AAAS,UAAA,MAAM,EAAEF,QAAQ,KAAKN,KAAb,GAAqB,SAArB,GAAiC;AAAlD,WAAgEO,SAAhE,EAAP;AACD;;AAED,aAAO,oBAAC,IAAD;AAAM,QAAA,MAAM,EAAC;AAAb,SAA0BA,SAA1B,EAAP;;AACF,SAAK,GAAL;AACA;AACE,UAAID,QAAQ,KAAKP,GAAjB,EAAsB;AACpB,eAAO,oBAAC,OAAD;AAAS,UAAA,MAAM,EAAC;AAAhB,WAA6BQ,SAA7B,EAAP;AACD;;AAED,UAAID,QAAQ,KAAKN,KAAjB,EAAwB;AACtB,eAAO,oBAAC,OAAD;AAAS,UAAA,KAAK,EAAC,GAAf;AAAmB,UAAA,MAAM,EAAC;AAA1B,WAAwCO,SAAxC,EAAP;AACD;;AAED,UAAIC,SAAJ,EAAe;AACb,eAAO,oBAAC,OAAD;AAAS,UAAA,KAAK,EAAC,GAAf;AAAmB,UAAA,MAAM,EAAC;AAA1B,WAAuCD,SAAvC,EAAP;AACD;;AAED,aAAO,oBAAC,OAAD;AAAS,QAAA,MAAM,EAAC;AAAhB,SAA6BA,SAA7B,EAAP;AA3BJ;AA6BD,CAjCD;;AAmCA,IAAMG,MAA6B,GAAG,SAAhCA,MAAgC,CAACP,KAAD,EAAwB;AAAA;;AAC5D,MAAMG,QAAQ,GAAGV,WAAW,EAA5B;;AACA,MACEQ,IADF,GAcID,KAdJ,CACEC,IADF;AAAA,MAEEO,IAFF,GAcIR,KAdJ,CAEEQ,IAFF;AAAA,MAGEC,SAHF,GAcIT,KAdJ,CAGES,SAHF;AAAA,MAIEC,KAJF,GAcIV,KAdJ,CAIEU,KAJF;AAAA,MAKEC,QALF,GAcIX,KAdJ,CAKEW,QALF;AAAA,MAMEC,MANF,GAcIZ,KAdJ,CAMEY,MANF;AAAA,MAOEC,KAPF,GAcIb,KAdJ,CAOEa,KAPF;AAAA,MAQEC,UARF,GAcId,KAdJ,CAQEc,UARF;AAAA,MASEZ,KATF,GAcIF,KAdJ,CASEE,KATF;AAAA,yBAcIF,KAdJ,CAUEe,SAVF;AAAA,MAUEA,SAVF,iCAUc,QAVd;AAAA,MAWEC,OAXF,GAcIhB,KAdJ,CAWEgB,OAXF;AAAA,MAYEC,OAZF,GAcIjB,KAdJ,CAYEiB,OAZF;AAAA,MAaKb,SAbL,4BAcIJ,KAdJ;;AAgBA,MAAMkB,QAAQ,GAAGC,OAAO,CAACP,MAAM,IAAIC,KAAX,CAAxB;AAEA,SACE,oBAAC,QAAD,eACMT,SADN;AAEE,IAAA,SAAS,EAAEA,SAAS,CAACgB,IAAV,GAAiB,GAAjB,GAAuBL,SAFpC;AAGE,IAAA,OAAO,EAAEC,OAAO,GAAG,IAAH,GAAUC,OAH5B;AAIE,IAAA,gBAAgB,EAAC,SAJnB;AAKE,IAAA,SAAS,EACP9B,UAAU,CACRD,YAAY,CAAC,QAAD,EAAWiB,QAAX,CADJ,uBAEMF,IAFN,yBAGOO,IAHP,yBAIOE,KAJP,2BAKSR,KALT,mDAOL,mBAPK,EAOiBO,SAPjB,gCAQL,mBARK,EAQiBS,QARjB,gBANd;AAkBE,IAAA,UAAU,EAAEJ,UAlBd;AAmBE,IAAA,UAAU,EAAC;AAnBb,MAqBGE,OAAO,IAAI,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,OAAd;AAAsB,IAAA,SAAS,EAAC;AAAhC,IArBd,EAsBE;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGJ,MAAM,IAAI;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAkCA,MAAlC,CADb,EAEGD,QAAQ,IACP,oBAAC,gBAAD;AACE,IAAA,IAAI,EAAEV,IADR;AAEE,IAAA,KAAK,EAAEC,KAFT;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,SAAS,EAAC,iBAJZ;AAKE,IAAA,SAAS,EAAC;AALZ,KAOGQ,QAPH,CAHJ,EAaGE,KAAK,IAAI;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCA,KAAjC,CAbZ,CAtBF,CADF;AAwCD,CA5DD;;AA8DAN,MAAM,CAACc,YAAP,GAAsB;AACpBb,EAAAA,IAAI,EAAE,SADc;AAEpBE,EAAAA,KAAK,EAAE,QAFa;AAGpBT,EAAAA,IAAI,EAAE,GAHc;AAIpBQ,EAAAA,SAAS,EAAE,KAJS;AAKpBa,EAAAA,eAAe,EAAE;AALG,CAAtB;AAQA,eAAe3B,cAAc,CAACY,MAAD,EAAS;AACpCL,EAAAA,KAAK,EAAE;AAD6B,CAAT,CAA7B","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport Tappable, { TappableProps } from '../Tappable/Tappable';\nimport Title from '../Typography/Title/Title';\nimport Text from '../Typography/Text/Text';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport Caption from '../Typography/Caption/Caption';\nimport { HasAlign, HasComponent } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptivityProps, SizeType, withAdaptivity } from '../../hoc/withAdaptivity';\nimport { Platform, IOS, VKCOM } from '../../lib/platform';\nimport Spinner from '../Spinner/Spinner';\nimport './Button.css';\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'commerce' | 'destructive' | 'overlay_primary' | 'overlay_secondary' | 'overlay_outline';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\ninterface ButtonTypographyProps extends HasComponent {\n  size: ButtonProps['size'];\n  platform: Platform;\n  sizeY: AdaptivityProps['sizeY'];\n  children?: ButtonProps['children'];\n}\n\nconst ButtonTypography: React.FC<ButtonTypographyProps> = (props: ButtonTypographyProps) => {\n  const { size, sizeY, platform, ...restProps } = props;\n  const isCompact = sizeY === SizeType.COMPACT;\n\n  switch (size) {\n    case 'l':\n      if (isCompact) {\n        return <Text weight=\"medium\" {...restProps} />;\n      }\n\n      return <Title level=\"3\" weight=\"medium\" {...restProps} />;\n    case 'm':\n      if (isCompact) {\n        return <Subhead weight={platform === VKCOM ? 'regular' : 'medium'} {...restProps} />;\n      }\n\n      return <Text weight=\"medium\" {...restProps} />;\n    case 's':\n    default:\n      if (platform === IOS) {\n        return <Subhead weight=\"medium\" {...restProps} />;\n      }\n\n      if (platform === VKCOM) {\n        return <Caption level=\"1\" weight=\"regular\" {...restProps} />;\n      }\n\n      if (isCompact) {\n        return <Caption level=\"1\" weight=\"medium\" {...restProps} />;\n      }\n\n      return <Subhead weight=\"medium\" {...restProps} />;\n  }\n};\n\nconst Button: React.FC<ButtonProps> = (props: ButtonProps) => {\n  const platform = usePlatform();\n  const {\n    size,\n    mode,\n    stretched,\n    align,\n    children,\n    before,\n    after,\n    getRootRef,\n    sizeY,\n    Component = 'button',\n    loading,\n    onClick,\n    ...restProps\n  } = props;\n\n  const hasIcons = Boolean(before || after);\n\n  return (\n    <Tappable\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      onClick={loading ? null : onClick}\n      focusVisibleMode=\"outside\"\n      vkuiClass={\n        classNames(\n          getClassName('Button', platform),\n          `Button--sz-${size}`,\n          `Button--lvl-${mode}`,\n          `Button--aln-${align}`,\n          `Button--sizeY-${sizeY}`,\n          {\n            ['Button--stretched']: stretched,\n            ['Button--with-icon']: hasIcons,\n          },\n        )\n      }\n      getRootRef={getRootRef}\n      activeMode=\"opacity\"\n    >\n      {loading && <Spinner size=\"small\" vkuiClass=\"Button__spinner\" />}\n      <span vkuiClass=\"Button__in\">\n        {before && <span vkuiClass=\"Button__before\">{before}</span>}\n        {children && (\n          <ButtonTypography\n            size={size}\n            sizeY={sizeY}\n            platform={platform}\n            vkuiClass=\"Button__content\"\n            Component=\"span\"\n          >\n            {children}\n          </ButtonTypography>\n        )}\n        {after && <span vkuiClass=\"Button__after\">{after}</span>}\n      </span>\n    </Tappable>\n  );\n};\n\nButton.defaultProps = {\n  mode: 'primary',\n  align: 'center',\n  size: 's',\n  stretched: false,\n  stopPropagation: true,\n};\n\nexport default withAdaptivity(Button, {\n  sizeY: true,\n});\n"],"file":"Button.js"}

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

@@ -1 +1 @@
-.vkuiCell{position:relative;margin:0;padding:0}.vkuiFormItem .vkuiCell{width:100%;box-sizing:content-box;margin:0 calc(-1*16px);margin:0 calc(-1*var(--formitem_padding))}.vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.vkuiList--dragging .vkuiCell--dragging,.vkuiCell--dragging{background-color:#fff;background-color:var(--background_content);box-shadow:0 0 5px rgba(0,0,0,.25);z-index:3}.vkuiCell__dragger{position:relative}.vkuiCell .vkuiCell__dragger .vkuiIcon{color:#99a2ad;color:var(--icon_secondary)}.vkuiCell__checkbox{display:none}.vkuiCell--selectable .vkuiCell__marker{position:relative;flex-shrink:0;width:24px;height:24px;margin-right:16px;padding:0;color:#b8c1cc;color:var(--icon_tertiary)}.vkuiCell--selectable .vkuiCell__marker-in--checked{position:absolute;top:0;left:0;visibility:hidden;color:#2688eb;color:var(--accent)}.vkuiCell--selectable.vkuiCell--disabled{opacity:.6}.vkuiCell--selectable .vkuiCell__checkbox:checked~.vkuiCell__marker .vkuiCell__marker-in--checked{visibility:initial}.vkuiCell--removable .vkuiSimpleCell{max-width:100%;flex-grow:1;min-width:0;padding-right:2px;flex-shrink:initial;overflow:hidden}.vkuiCell--ios .vkuiCell__in{transition:-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1),-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing),-webkit-transform .6s var(--ios-easing)}.vkuiCell--ios.vkuiCell--selectable .vkuiCell__marker{margin-right:12px}.vkuiCell--ios.vkuiCell--removable .vkuiSimpleCell{padding-left:0;padding-right:0}.vkuiCell--android .vkuiCell__dragger,.vkuiCell--vkcom .vkuiCell__dragger{padding-right:16px}
+.vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging){transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;pointer-events:none}.vkuiCell--dragging{background-color:#fff;background-color:var(--background_content);box-shadow:0 0 5px rgba(0,0,0,.25);z-index:3}.vkuiCell--selectable.vkuiCell--disabled{opacity:.6}.vkuiCell__checkbox,.vkuiCell__dragger{position:relative;flex-shrink:0;margin-right:16px}.vkuiCell__dragger{z-index:2}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-right:0;padding-left:0}.vkuiCell--ios .vkuiCell__dragger{margin-right:0;margin-left:12px}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiFormItem>.vkuiCell{margin:0 calc(-1*16px);margin:0 calc(-1*var(--formitem_padding))}

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

@@ -1,151 +1,69 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onRemove", "removePlaceholder", "onDragFinish", "className", "style", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "checked", "defaultChecked", "getRootRef"];
+var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
+    _excluded2 = ["dragging", "rootElRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
 import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
 import { getClassName } from "../../helpers/getClassName";
-import { Touch } from "../Touch/Touch";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
-import { Icon24Reorder, Icon24ReorderIos, Icon24CheckCircleOn, Icon24CheckCircleOff, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
 import SimpleCell from "../SimpleCell/SimpleCell";
 import { Removable } from "../Removable/Removable";
 import { usePlatform } from "../../hooks/usePlatform";
-import { ListContext } from "../../components/List/ListContext";
+import { useDraggable } from "./useDraggable";
+import { ListContext } from "../List/ListContext";
+import { CellDragger } from "./CellDragger/CellDragger";
+import { CellCheckbox } from "./CellCheckbox/CellCheckbox";
 import "./Cell.css";
-export var Cell = function Cell(props) {
-  var _onRemove = props.onRemove,
-      removePlaceholder = props.removePlaceholder,
-      onDragFinish = props.onDragFinish,
-      className = props.className,
-      style = props.style,
-      before = props.before,
-      after = props.after,
-      disabled = props.disabled,
-      removable = props.removable,
-      draggable = props.draggable,
-      selectable = props.selectable,
-      Component = props.Component,
-      onChange = props.onChange,
-      name = props.name,
-      checked = props.checked,
-      defaultChecked = props.defaultChecked,
-      getRootRef = props.getRootRef,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  var rootElRef = React.useRef(null);
-  var platform = usePlatform();
-
-  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(undefined),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      siblings = _React$useState4[0],
-      setSiblings = _React$useState4[1];
-
-  var _React$useState5 = React.useState(undefined),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      dragStartIndex = _React$useState6[0],
-      setDragStartIndex = _React$useState6[1];
-
-  var _React$useState7 = React.useState(undefined),
-      _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 = rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current;
-    setDragging(true);
-
-    var _siblings = Array.from(rootEl.parentElement.childNodes);
-
-    var rootElIdx = _siblings.indexOf(rootEl);
-
-    setDragStartIndex(rootElIdx);
-    setDragEndIndex(rootElIdx);
-    setSiblings(_siblings);
-    setDragShift(0);
-  };
-
-  var onDragMove = function onDragMove(e) {
-    e.originalEvent.preventDefault();
-    var rootEl = rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current;
-    rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
-    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
-    setDragShift(e.shiftY);
-    setDragEndIndex(dragStartIndex);
-    siblings.forEach(function (sibling, siblingIndex) {
-      var rootGesture = rootEl.getBoundingClientRect();
-      var siblingGesture = sibling.getBoundingClientRect();
-
-      if (dragStartIndex < siblingIndex) {
-        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2) {
-          if (dragDirection === 'down') {
-            sibling.style.transform = 'translateY(-100%)';
-          }
-
-          setDragEndIndex(function (dragEndIndex) {
-            return dragEndIndex + 1;
-          });
-        }
-
-        if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2 && dragDirection === 'up') {
-          sibling.style.transform = 'translateY(0)';
-        }
-      } else if (dragStartIndex > siblingIndex) {
-        if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2) {
-          if (dragDirection === 'up') {
-            sibling.style.transform = 'translateY(100%)';
-          }
-
-          setDragEndIndex(function (dragEndIndex) {
-            return dragEndIndex - 1;
-          });
-        }
+var warn = warnOnce('Cell');
+export var Cell = function Cell(_ref) {
+  var propsMode = _ref.mode,
+      _onRemove = _ref.onRemove,
+      _ref$removePlaceholde = _ref.removePlaceholder,
+      removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
+      onDragFinish = _ref.onDragFinish,
+      before = _ref.before,
+      after = _ref.after,
+      disabled = _ref.disabled,
+      deprecatedRemovable = _ref.removable,
+      draggable = _ref.draggable,
+      deprecatedSelectable = _ref.selectable,
+      Component = _ref.Component,
+      onChange = _ref.onChange,
+      name = _ref.name,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
+      getRootRef = _ref.getRootRef,
+      _ref$draggerLabel = _ref.draggerLabel,
+      draggerLabel = _ref$draggerLabel === void 0 ? 'Перенести ячейку' : _ref$draggerLabel,
+      className = _ref.className,
+      style = _ref.style,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  // TODO: удалить перед 5.0.0
+  var mode = propsMode;
+
+  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {
+    mode = deprecatedSelectable ? 'selectable' : 'removable';
+
+    if (process.env.NODE_ENV === 'development') {
+      deprecatedSelectable && warn('Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".');
+      deprecatedRemovable && warn('Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".');
+    }
+  } // /end TODO
 
-        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2 && dragDirection === 'down') {
-          sibling.style.transform = 'translateY(0)';
-        }
-      }
-    });
-  };
 
-  var onDragEnd = function onDragEnd() {
-    var from = dragStartIndex,
-        to = dragEndIndex;
-    siblings.forEach(function (sibling) {
-      sibling.style.transform = null;
-    });
-    setSiblings(undefined);
-    setDragEndIndex(undefined);
-    setDragStartIndex(undefined);
-    setDragDirection(undefined);
-    setDragShift(undefined);
-    setDragging(false);
-    props.onDragFinish && props.onDragFinish({
-      from: from,
-      to: to
-    });
-  };
+  var selectable = mode === 'selectable';
+  var removable = mode === 'removable';
+  var platform = usePlatform();
 
-  var onDragClick = function onDragClick(e) {
-    e.nativeEvent.stopPropagation();
-    e.preventDefault();
-  };
+  var _useDraggable = useDraggable({
+    onDragFinish: onDragFinish
+  }),
+      dragging = _useDraggable.dragging,
+      rootElRef = _useDraggable.rootElRef,
+      draggableProps = _objectWithoutProperties(_useDraggable, _excluded2);
 
   var _React$useContext = React.useContext(ListContext),
       toggleDrag = _React$useContext.toggleDrag;
@@ -160,59 +78,67 @@ export var Cell = function Cell(props) {
 
     return undefined;
   }, [dragging]);
-  var IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
-  var IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
-  var simpleCell = createScopedElement(SimpleCell, _extends({}, restProps, {
-    disabled: draggable || removable || disabled,
-    Component: selectable ? 'label' : Component,
-    htmlFor: selectable ? name : undefined,
-    before: createScopedElement(React.Fragment, null, (platform === ANDROID || platform === VKCOM) && draggable && createScopedElement(Touch, {
+  var dragger;
+
+  if (draggable) {
+    dragger = createScopedElement(CellDragger, _extends({
       vkuiClass: "Cell__dragger",
-      onStart: onDragStart,
-      onMoveY: onDragMove,
-      onEnd: onDragEnd,
-      onClick: onDragClick
-    }, createScopedElement(Icon24Reorder, null)), selectable && createScopedElement(React.Fragment, null, createScopedElement("input", {
-      type: "checkbox",
-      vkuiClass: "Cell__checkbox",
+      "aria-label": draggerLabel
+    }, draggableProps));
+  }
+
+  var checkbox;
+
+  if (selectable) {
+    var checkboxProps = {
       name: name,
       onChange: onChange,
       defaultChecked: defaultChecked,
       checked: checked,
       disabled: disabled
-    }), createScopedElement("span", {
-      vkuiClass: "Cell__marker"
-    }, createScopedElement(IconOff, {
-      vkuiClass: "Cell__marker-in"
-    }), createScopedElement(IconOn, {
-      vkuiClass: "Cell__marker-in Cell__marker-in--checked"
-    }))), before),
-    after: createScopedElement(React.Fragment, null, platform === IOS && draggable && createScopedElement(Touch, {
-      vkuiClass: "Cell__dragger",
-      onStart: onDragStart,
-      onMoveY: onDragMove,
-      onEnd: onDragEnd,
-      onClick: onDragClick
-    }, createScopedElement(Icon24ReorderIos, null)), after)
+    };
+    checkbox = createScopedElement(CellCheckbox, _extends({
+      vkuiClass: "Cell__checkbox"
+    }, checkboxProps));
+  }
+
+  var simpleCellDisabled = draggable && !selectable || removable || disabled;
+  var hasActive = !simpleCellDisabled && !dragging;
+  var cellClasses = classNames(getClassName('Cell', platform), {
+    'Cell--dragging': dragging,
+    'Cell--removable': removable,
+    'Cell--selectable': selectable,
+    'Cell--disabled': disabled
+  });
+  var simpleCell = createScopedElement(SimpleCell, _extends({
+    hasActive: hasActive,
+    hasHover: hasActive
+  }, restProps, {
+    vkuiClass: "Cell__content",
+    disabled: simpleCellDisabled,
+    Component: selectable ? 'label' : Component,
+    before: createScopedElement(React.Fragment, null, draggable && (platform === ANDROID || platform === VKCOM) && dragger, selectable && checkbox, before),
+    after: createScopedElement(React.Fragment, null, draggable && platform === IOS && dragger, after)
   }));
+
+  if (removable) {
+    return createScopedElement(Removable, {
+      vkuiClass: cellClasses,
+      className: className,
+      style: style,
+      getRootRef: rootElRef,
+      removePlaceholder: removePlaceholder,
+      onRemove: function onRemove(e) {
+        return _onRemove(e, rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current);
+      }
+    }, simpleCell);
+  }
+
   return createScopedElement("div", {
-    vkuiClass: classNames(getClassName('Cell', platform), {
-      'Cell--dragging': dragging,
-      'Cell--removable': removable,
-      'Cell--selectable': selectable,
-      'Cell--disabled': disabled
-    }),
+    vkuiClass: cellClasses,
     className: className,
     style: style,
     ref: rootElRef
-  }, removable ? createScopedElement(Removable, {
-    removePlaceholder: removePlaceholder,
-    onRemove: function onRemove(e) {
-      return _onRemove(e, rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current);
-    }
-  }, simpleCell) : simpleCell);
-};
-Cell.defaultProps = {
-  removePlaceholder: 'Удалить'
+  }, simpleCell);
 };
 //# sourceMappingURL=Cell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"names":["React","classNames","getClassName","Touch","ANDROID","IOS","VKCOM","Icon24Reorder","Icon24ReorderIos","Icon24CheckCircleOn","Icon24CheckCircleOff","Icon24CheckBoxOff","Icon24CheckBoxOn","SimpleCell","Removable","usePlatform","ListContext","Cell","props","onRemove","removePlaceholder","onDragFinish","className","style","before","after","disabled","removable","draggable","selectable","Component","onChange","name","checked","defaultChecked","getRootRef","restProps","rootElRef","useRef","platform","useState","dragging","setDragging","undefined","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","Array","from","parentElement","childNodes","rootElIdx","indexOf","onDragMove","e","originalEvent","preventDefault","transform","shiftY","forEach","sibling","siblingIndex","rootGesture","getBoundingClientRect","siblingGesture","bottom","top","height","onDragEnd","to","onDragClick","nativeEvent","stopPropagation","useContext","toggleDrag","useEffect","IconOff","IconOn","simpleCell","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Reorder, Icon24ReorderIos, Icon24CheckCircleOn, Icon24CheckCircleOff, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';\nimport SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { HasPlatform } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ListContext } from '../../components/List/ListContext';\nimport './Cell.css';\n\nexport interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps {\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  removable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  selectable?: boolean;\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\nexport const Cell: React.FC<CellProps> = (props: CellProps) => {\n  const {\n    onRemove,\n    removePlaceholder,\n    onDragFinish,\n    className,\n    style,\n    before,\n    after,\n    disabled,\n    removable,\n    draggable,\n    selectable,\n    Component,\n    onChange,\n    name,\n    checked,\n    defaultChecked,\n    getRootRef,\n    ...restProps\n  } = props;\n  const rootElRef = React.useRef(null);\n  const platform = usePlatform();\n\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up'>(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef?.current;\n\n    setDragging(true);\n\n    const _siblings: HTMLElement[] = Array.from(rootEl.parentElement.childNodes);\n    const rootElIdx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(rootElIdx);\n    setDragEndIndex(rootElIdx);\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    rootEl.style.transform = `translateY(${e.shiftY}px)`;\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 rootGesture = rootEl.getBoundingClientRect();\n\n      const siblingGesture = sibling.getBoundingClientRect();\n\n      if (dragStartIndex < siblingIndex) {\n        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2) {\n          if (dragDirection === 'down') {\n            sibling.style.transform = 'translateY(-100%)';\n          }\n\n          setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n        }\n        if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2 && dragDirection === 'up') {\n          sibling.style.transform = 'translateY(0)';\n        }\n      } else if (dragStartIndex > siblingIndex) {\n        if (rootGesture.top < siblingGesture.bottom - siblingGesture.height / 2) {\n          if (dragDirection === 'up') {\n            sibling.style.transform = 'translateY(100%)';\n          }\n\n          setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n        }\n        if (rootGesture.bottom > siblingGesture.top + siblingGesture.height / 2 && dragDirection === 'down') {\n          sibling.style.transform = 'translateY(0)';\n        }\n      }\n    });\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = null;\n    });\n\n    setSiblings(undefined);\n    setDragEndIndex(undefined);\n    setDragStartIndex(undefined);\n    setDragDirection(undefined);\n    setDragShift(undefined);\n\n    setDragging(false);\n\n    props.onDragFinish && props.onDragFinish({ from, to });\n  };\n\n  const onDragClick = (e: React.MouseEvent) => {\n    e.nativeEvent.stopPropagation();\n    e.preventDefault();\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]);\n\n  const IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;\n  const IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;\n\n  const simpleCell = (\n    <SimpleCell\n      {...restProps}\n      disabled={draggable || removable || disabled}\n      Component={selectable ? 'label' : Component}\n      htmlFor={selectable ? name : undefined}\n      before={\n        <React.Fragment>\n          {(platform === ANDROID || platform === VKCOM) && draggable && (\n            <Touch\n              vkuiClass=\"Cell__dragger\"\n              onStart={onDragStart}\n              onMoveY={onDragMove}\n              onEnd={onDragEnd}\n              onClick={onDragClick}\n            ><Icon24Reorder /></Touch>\n          )}\n          {selectable && (\n            <React.Fragment>\n              <input\n                type=\"checkbox\"\n                vkuiClass=\"Cell__checkbox\"\n                name={name}\n                onChange={onChange}\n                defaultChecked={defaultChecked}\n                checked={checked}\n                disabled={disabled}\n              />\n              <span vkuiClass=\"Cell__marker\">\n                <IconOff vkuiClass=\"Cell__marker-in\" />\n                <IconOn vkuiClass=\"Cell__marker-in Cell__marker-in--checked\" />\n              </span>\n            </React.Fragment>\n          )}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {platform === IOS && draggable && (\n            <Touch\n              vkuiClass=\"Cell__dragger\"\n              onStart={onDragStart}\n              onMoveY={onDragMove}\n              onEnd={onDragEnd}\n              onClick={onDragClick}\n            ><Icon24ReorderIos /></Touch>\n          )}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Cell', platform), {\n        'Cell--dragging': dragging,\n        'Cell--removable': removable,\n        'Cell--selectable': selectable,\n        'Cell--disabled': disabled,\n      })}\n      className={className}\n      style={style}\n      ref={rootElRef}\n    >\n      {removable\n        ? <Removable removePlaceholder={removePlaceholder} onRemove={(e) => onRemove(e, rootElRef?.current)}>{simpleCell}</Removable>\n        : simpleCell\n      }\n    </div>\n  );\n};\n\nCell.defaultProps = {\n  removePlaceholder: 'Удалить',\n};\n"],"file":"Cell.js"}
+{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"names":["React","classNames","warnOnce","getClassName","ANDROID","IOS","VKCOM","SimpleCell","Removable","usePlatform","useDraggable","ListContext","CellDragger","CellCheckbox","warn","Cell","propsMode","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","deprecatedRemovable","removable","draggable","deprecatedSelectable","selectable","Component","onChange","name","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","process","env","NODE_ENV","platform","dragging","rootElRef","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","simpleCell","e","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { getClassName } from '../../helpers/getClassName';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { HasPlatform } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDraggable } from './useDraggable';\nimport { ListContext } from '../List/ListContext';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport './Cell.css';\n\nexport interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте mode=\"removable\"\n   */\n  removable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте mode=\"selectable\"\n   */\n  selectable?: boolean;\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\nconst warn = warnOnce('Cell');\nexport const Cell: React.FC<CellProps> = ({\n  mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0\n  onRemove,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  removable: deprecatedRemovable, // TODO: удалить перед 5.0.0\n  draggable,\n  selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0\n  Component,\n  onChange,\n  name,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  // TODO: удалить перед 5.0.0\n  let mode: CellProps['mode'] = propsMode;\n\n  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {\n    mode = deprecatedSelectable\n      ? 'selectable'\n      : 'removable';\n\n    if (process.env.NODE_ENV === 'development') {\n      deprecatedSelectable && warn('Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode=\"selectable\".');\n      deprecatedRemovable && warn('Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode=\"removable\".');\n    }\n  }\n  // /end TODO\n\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n\n  const platform = usePlatform();\n\n  const { dragging, rootElRef, ...draggableProps } = useDraggable({ onDragFinish });\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]);\n\n  let dragger;\n  if (draggable) {\n    dragger = <CellDragger vkuiClass=\"Cell__dragger\" aria-label={draggerLabel} {...draggableProps} />;\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = { name, onChange, defaultChecked, checked, disabled };\n    checkbox = <CellCheckbox vkuiClass=\"Cell__checkbox\" {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = draggable && !selectable || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(getClassName('Cell', platform), {\n    'Cell--dragging': dragging,\n    'Cell--removable': removable,\n    'Cell--selectable': selectable,\n    'Cell--disabled': disabled,\n  });\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      vkuiClass=\"Cell__content\"\n      disabled={simpleCellDisabled}\n      Component={selectable ? 'label' : Component}\n      before={\n        <React.Fragment>\n          {draggable && (platform === ANDROID || platform === VKCOM) && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        vkuiClass={cellClasses}\n        className={className}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef?.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div\n      vkuiClass={cellClasses}\n      className={className}\n      style={style}\n      ref={rootElRef}\n    >\n      {simpleCell}\n    </div>\n  );\n};\n"],"file":"Cell.js"}

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

@@ -0,0 +1 @@
+.vkuiCellCheckbox__icon{color:#b8c1cc;color:var(--icon_tertiary)}.vkuiCellCheckbox__input,.vkuiCellCheckbox__icon{display:none}.vkuiCellCheckbox__icon--on{color:#2688eb;color:var(--accent)}.vkuiCellCheckbox__input:not(:checked)~.vkuiCellCheckbox__icon--off,.vkuiCellCheckbox__input:checked~.vkuiCellCheckbox__icon--on{display:block}

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "style"];
+import { createScopedElement } from "../../../lib/jsxRuntime";
+import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { getClassName } from "../../../helpers/getClassName";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { ANDROID } from "../../../lib/platform";
+import "./CellCheckbox.css";
+export var CellCheckbox = function CellCheckbox(_ref) {
+  var className = _ref.className,
+      style = _ref.style,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var platform = usePlatform();
+  var IconOff = platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
+  var IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
+  return createScopedElement("div", {
+    vkuiClass: classNames(getClassName('CellCheckbox', platform)),
+    className: className,
+    style: style
+  }, createScopedElement("input", _extends({
+    vkuiClass: "CellCheckbox__input",
+    type: "checkbox"
+  }, restProps)), createScopedElement(IconOff, {
+    vkuiClass: "CellCheckbox__icon CellCheckbox__icon--off"
+  }), createScopedElement(IconOn, {
+    vkuiClass: "CellCheckbox__icon CellCheckbox__icon--on"
+  }));
+};
+//# sourceMappingURL=CellCheckbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"names":["Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getClassName","usePlatform","classNames","ANDROID","CellCheckbox","className","style","restProps","platform","IconOff","IconOn"],"mappings":";;;;AACA,SAASA,iBAAT,EAA4BC,gBAA5B,EAA8CC,oBAA9C,EAAoEC,mBAApE,QAA+F,kBAA/F;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,OAAT;AAEA;AAIA,OAAO,IAAMC,YAAyC,GAAG,SAA5CA,YAA4C,OAInD;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGP,WAAW,EAA5B;AAEA,MAAMQ,OAAO,GAAGD,QAAQ,KAAKL,OAAb,GACZP,iBADY,GAEZE,oBAFJ;AAIA,MAAMY,MAAM,GAAGF,QAAQ,KAAKL,OAAb,GACXN,gBADW,GAEXE,mBAFJ;AAIA,SACE;AACE,IAAA,SAAS,EAAEG,UAAU,CAACF,YAAY,CAAC,cAAD,EAAiBQ,QAAjB,CAAb,CADvB;AAEE,IAAA,SAAS,EAAEH,SAFb;AAGE,IAAA,KAAK,EAAEC;AAHT,KAKE;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,IAAA,IAAI,EAAC;AAFP,KAGMC,SAHN,EALF,EAUE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,IAVF,EAWE,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC;AAAlB,IAXF,CADF;AAeD,CA9BM","sourcesContent":["import * as React from 'react';\nimport { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { getClassName } from '../../../helpers/getClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '../../../lib/classNames';\nimport { ANDROID } from '../../../lib/platform';\nimport { CellProps } from '../Cell';\nimport './CellCheckbox.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox: React.FC<CellCheckboxProps> = ({\n  className,\n  style,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  const IconOff = platform === ANDROID\n    ? Icon24CheckBoxOff\n    : Icon24CheckCircleOff;\n\n  const IconOn = platform === ANDROID\n    ? Icon24CheckBoxOn\n    : Icon24CheckCircleOn;\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('CellCheckbox', platform))}\n      className={className}\n      style={style}\n    >\n      <input\n        vkuiClass=\"CellCheckbox__input\"\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <IconOff vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--off\" />\n      <IconOn vkuiClass=\"CellCheckbox__icon CellCheckbox__icon--on\" />\n    </div>\n  );\n};\n"],"file":"CellCheckbox.js"}

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

@@ -0,0 +1 @@
+.vkuiCellDragger{cursor:ns-resize;color:#99a2ad;color:var(--icon_secondary)}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"names":["React","Icon24Reorder","Icon24ReorderIos","getClassName","usePlatform","classNames","IOS","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","restProps","platform","onClick","useCallback","e","preventDefault"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,QAAgD,kBAAhD;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,GAAT;AACA,SAASC,KAAT;AAEA;AAIA,OAAO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAKjD;AAAA,MAJJC,WAII,QAJJA,WAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AAEA,MAAMU,OAAO,GAAGd,KAAK,CAACe,WAAN,CAAkB,UAACC,CAAD,EAAyB;AACzDA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFe,EAEb,EAFa,CAAhB;AAIA,SACE,oBAAC,KAAD;AACE,IAAA,SAAS,EAAEZ,UAAU,CAACF,YAAY,CAAC,aAAD,EAAgBU,QAAhB,CAAb,CADvB;AAEE,IAAA,OAAO,EAAEJ,WAFX;AAGE,IAAA,OAAO,EAAEC,UAHX;AAIE,IAAA,KAAK,EAAEC,SAJT;AAKE,IAAA,OAAO,EAAEG;AALX,KAMMF,SANN,GAQGC,QAAQ,KAAKP,GAAb,GACG,oBAAC,gBAAD,OADH,GAEG,oBAAC,aAAD,OAVN,CADF;AAeD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { getClassName } from '../../../helpers/getClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '../../../lib/classNames';\nimport { IOS } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport './CellDragger.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger: React.FC<CellDraggerProps> = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      vkuiClass={classNames(getClassName('CellDragger', platform))}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === IOS\n        ? <Icon24ReorderIos />\n        : <Icon24Reorder />\n      }\n    </Touch>\n  );\n};\n"],"file":"CellDragger.js"}