@vkontakte/vkui 4.20.0 → 4.22.1

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"}

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

@@ -0,0 +1,126 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+export var useDraggable = function useDraggable(_ref) {
+  var onDragFinish = _ref.onDragFinish;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dragging = _React$useState2[0],
+      setDragging = _React$useState2[1];
+
+  var rootElRef = React.useRef(null);
+
+  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.current;
+    setDragging(true);
+
+    var _siblings = _toConsumableArray(rootEl.parentElement.childNodes);
+
+    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;
+    rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
+    var rootGesture = rootEl.getBoundingClientRect();
+    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
+    setDragShift(e.shiftY);
+    setDragEndIndex(dragStartIndex);
+    siblings.forEach(function (sibling, siblingIndex) {
+      var siblingGesture = sibling.getBoundingClientRect();
+      var siblingHalfHeight = siblingGesture.height / 2;
+      var rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
+      var rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+
+      if (dragStartIndex < siblingIndex) {
+        if (rootOverSibling) {
+          if (dragDirection === 'down') {
+            sibling.style.transform = 'translateY(-100%)';
+          }
+
+          setDragEndIndex(function (dragEndIndex) {
+            return dragEndIndex + 1;
+          });
+        }
+
+        if (rootUnderSibling && dragDirection === 'up') {
+          sibling.style.transform = 'translateY(0)';
+        }
+      } else if (dragStartIndex > siblingIndex) {
+        if (rootUnderSibling) {
+          if (dragDirection === 'up') {
+            sibling.style.transform = 'translateY(100%)';
+          }
+
+          setDragEndIndex(function (dragEndIndex) {
+            return dragEndIndex - 1;
+          });
+        }
+
+        if (rootOverSibling && dragDirection === 'down') {
+          sibling.style.transform = 'translateY(0)';
+        }
+      }
+    });
+  };
+
+  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);
+    onDragFinish && onDragFinish({
+      from: from,
+      to: to
+    });
+  };
+
+  var useDraggableProps = {
+    onDragStart: onDragStart,
+    onDragMove: onDragMove,
+    onDragEnd: onDragEnd,
+    dragging: dragging,
+    rootElRef: rootElRef
+  };
+  return useDraggableProps;
+};
+//# sourceMappingURL=useDraggable.js.map

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

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

package/dist/cssm/components/ChipsSelect/ChipsSelect.js

@@ -7,7 +7,7 @@ var _excluded = ["style", "onFocus", "onKeyDown", "className", "fetching", "rend
     _excluded2 = ["option"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
-import { Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { classNames } from "../../lib/classNames";
 import Spinner from "../Spinner/Spinner";
 import CustomScrollView from "../CustomScrollView/CustomScrollView";
@@ -250,7 +250,7 @@ var ChipsSelect = function ChipsSelect(props) {
     getRef: getRef,
     disabled: disabled,
     onInputChange: handleInputChange,
-    after: createScopedElement(Icon20Dropdown, null)
+    after: createScopedElement(DropdownIcon, null)
   })), opened && createScopedElement("div", {
     vkuiClass: classNames('ChipsSelect__options', _defineProperty({}, 'ChipsSelect__options--popupDirectionTop', popupDirection === 'top')),
     onMouseLeave: function onMouseLeave() {