@megafon/ui-core 5.16.0 → 5.18.0

package/dist/lib/components/ListData/ListData.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import './ListData.less';
+declare type Target = '_self' | '_blank' | '_parent' | '_top';
+export declare type TitlePropsType = {
+    /** Текст заголовка */
+    text: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: Target;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+declare const ValueColors: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+};
+export declare type ValueColorsType = typeof ValueColors[keyof typeof ValueColors];
+declare const Actions: {
+    readonly DELETE: "delete";
+    readonly CONTROL: "control";
+};
+export declare type ActionsType = typeof Actions[keyof typeof Actions];
+export interface IListDataProps {
+    /** Заголовок */
+    title: string | TitlePropsType;
+    /** Подзаголовок */
+    subTitle?: string;
+    /** Значение */
+    value?: string;
+    /** Цвет */
+    valueColor?: ValueColorsType;
+    /** Дополнительное значение */
+    subValue?: string;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Фоновая заливка у иконки */
+    isIconColored?: boolean;
+    /** Аватар */
+    avatar?: JSX.Element;
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Элемент дополнительного действия */
+    actionType?: ActionsType;
+    /** Обработчик дополнительного действия */
+    onAction?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        actionIcon?: Record<string, string>;
+    };
+    /** Дочерние элементы: Button, Selector */
+    children?: React.ReactNode;
+}
+declare const ListData: React.FC<IListDataProps>;
+export declare const ListDataPropType: {
+    title: PropTypes.Validator<string | PropTypes.InferProps<{
+        text: PropTypes.Validator<string>;
+        href: PropTypes.Validator<string>;
+        target: PropTypes.Requireable<string>;
+        rel: PropTypes.Requireable<string>;
+    }>>;
+    subTitle: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<string>;
+    valueColor: PropTypes.Requireable<"default" | "green">;
+    subValue: PropTypes.Requireable<string>;
+    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    isIconColored: PropTypes.Requireable<boolean>;
+    avatar: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    disabled: PropTypes.Requireable<boolean>;
+    actionType: PropTypes.Requireable<"delete" | "control">;
+    onAction: PropTypes.Requireable<(...args: any[]) => any>;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    className: PropTypes.Requireable<string>;
+    classes: PropTypes.Requireable<{
+        [x: string]: string | null | undefined;
+    }>;
+    dataAttrs: PropTypes.Requireable<{
+        [x: string]: object | null | undefined;
+    }>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+};
+export default ListData;

package/dist/lib/components/ListData/ListData.js

@@ -0,0 +1,229 @@
+"use strict";
+
+function _typeof3(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof3 = function _typeof3(obj) { return typeof obj; }; } else { _typeof3 = function _typeof3(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof3(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ListDataPropType = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.parse-int.js");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var DeleteIcon = function DeleteIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16 4h-3.2c-.4-1.2-1.5-2-2.8-2s-2.4.8-2.8 2H4v4h1l1 10h8l1-10h1V4zM5 5h3v-.4C8.2 3.7 9.1 3 10 3s1.8.7 2 1.6V5h3v2H5V5zm8 12H7l-.9-9H14l-1 9z"
+  }));
+};
+
+var NothingIcon = function NothingIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: 21,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    cx: 11,
+    cy: 16,
+    r: 1.5
+  }));
+};
+
+var LINE_COUNT = 2;
+var ValueColors = {
+  DEFAULT: 'default',
+  GREEN: 'green'
+};
+var Actions = {
+  DELETE: 'delete',
+  CONTROL: 'control'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-list-data');
+
+var ListData = function ListData(_ref) {
+  var title = _ref.title,
+      subTitle = _ref.subTitle,
+      value = _ref.value,
+      valueColor = _ref.valueColor,
+      subValue = _ref.subValue,
+      icon = _ref.icon,
+      _ref$isIconColored = _ref.isIconColored,
+      isIconColored = _ref$isIconColored === void 0 ? false : _ref$isIconColored,
+      avatar = _ref.avatar,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      actionType = _ref.actionType,
+      onClick = _ref.onClick,
+      onAction = _ref.onAction,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+
+  var valueRef = _react["default"].useRef(null);
+
+  var _React$useState = _react["default"].useState('right'),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      valueAlignment = _React$useState2[0],
+      setValueAlignment = _React$useState2[1];
+
+  var isActive = !!onClick && !((0, _typeof2["default"])(title) === 'object' && (title === null || title === void 0 ? void 0 : title.href));
+  var showActionElement = !!actionType || !!children;
+
+  var handleClick = function handleClick(e) {
+    !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e));
+  };
+
+  var handleAction = _react["default"].useCallback(function (e) {
+    e.stopPropagation();
+    !disabled && (onAction === null || onAction === void 0 ? void 0 : onAction(e));
+  }, [disabled, onAction]);
+
+  _react["default"].useEffect(function () {
+    if (!valueRef.current) {
+      return;
+    }
+
+    var lineHeight = parseInt(getComputedStyle(valueRef.current).lineHeight, 10);
+    var actualHeight = valueRef.current.offsetHeight;
+    var currentLineCount = actualHeight / lineHeight;
+    setValueAlignment(currentLineCount >= LINE_COUNT ? 'left' : 'right');
+  }, [value]);
+
+  var renderedTitle = /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('title', [classes.title])
+  }, typeof title === 'string' ? title : /*#__PURE__*/_react["default"].createElement("a", {
+    className: cn('title-link'),
+    href: title.href,
+    target: title === null || title === void 0 ? void 0 : title.target,
+    rel: title === null || title === void 0 ? void 0 : title.rel
+  }, title.text));
+
+  var renderIcon = function renderIcon() {
+    if (!icon && !avatar) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('icon-container', {
+        colored: isIconColored && !avatar
+      })
+    }, avatar || /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('icon')
+    }, icon));
+  };
+
+  var renderExtraContent = function renderExtraContent() {
+    if (children) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('children', {
+          'event-none': !!onClick
+        })
+      }, children);
+    }
+
+    if (value) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('value-container')
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('value', {
+          color: valueColor
+        }),
+        ref: valueRef,
+        style: {
+          textAlign: valueAlignment
+        }
+      }, (0, _uiHelpers.convert)(value, _uiHelpers.textConvertConfig)), !!subValue && /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('sub-value')
+      }, subValue));
+    }
+
+    if (actionType) {
+      var isDelete = actionType === Actions.DELETE;
+      var ActionIcon = isDelete ? DeleteIcon : NothingIcon;
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+        className: cn('icon', {
+          small: isDelete
+        })
+      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.actionIcon), {
+        onClick: handleAction
+      }), /*#__PURE__*/_react["default"].createElement(ActionIcon, {
+        className: cn('action-icon', {
+          active: !disabled
+        })
+      }));
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      active: isActive,
+      disabled: disabled
+    }, [className, classes.root]),
+    onClick: handleClick
+  }), renderIcon(), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('header', {
+      gap: showActionElement,
+      align: !!subTitle
+    })
+  }, renderedTitle, !!subTitle && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('sub-title', [classes.subtitle])
+  }, subTitle)), renderExtraContent());
+};
+
+var ListDataPropType = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  })]).isRequired,
+  subTitle: PropTypes.string,
+  value: PropTypes.string,
+  valueColor: PropTypes.oneOf(Object.values(ValueColors)),
+  subValue: PropTypes.string,
+  icon: PropTypes.element,
+  isIconColored: PropTypes.bool,
+  avatar: PropTypes.element,
+  disabled: PropTypes.bool,
+  actionType: PropTypes.oneOf(Object.values(Actions)),
+  onAction: PropTypes.func,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node
+};
+exports.ListDataPropType = ListDataPropType;
+ListData.propTypes = ListDataPropType;
+var _default = ListData;
+exports["default"] = _default;

package/dist/lib/components/ListData/ListDataGroup.css

@@ -0,0 +1,15 @@
+.mfui-list-data-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow-y: hidden;
+}
+.mfui-list-data-group__item_divider:not(:last-child) {
+  border-bottom: 1px solid var(--spbSky1);
+}

package/dist/lib/components/ListData/ListDataGroup.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import { ActivatorNodesType, GapSizesType } from './components/ListDataSortable';
+import { IListDataProps } from './ListData';
+import './ListDataGroup.less';
+export declare type ListItemPropsType = IListDataProps & {
+    id: string | number;
+};
+declare type DragOverlayPropsType = {
+    className?: string;
+    zIndex?: number;
+};
+export interface IListDataGroupProps {
+    /** Массив элементов */
+    items: ListItemPropsType[];
+    /** Активатор события перетаскивания */
+    activatorNode?: ActivatorNodesType;
+    /** Отступ между элементами */
+    gap?: GapSizesType;
+    /** Показать разделитель */
+    showDivider?: boolean;
+    /** Обработчик начала процесса перетаскивания */
+    onDragStart?: (event?: DragStartEvent) => void;
+    /** Обработчик окончания процесса перетаскивания */
+    onDragEnd?: (items: ListItemPropsType[], event?: DragEndEvent) => void;
+    /** Отключить перетаскивание */
+    disabled?: boolean;
+    /** Параметры DragOverlay элемента */
+    dragOverlayProps?: DragOverlayPropsType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        cell?: string;
+        control?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        cell?: Record<string, string>;
+        control?: Record<string, string>;
+    };
+}
+declare const ListDataGroup: React.FC<IListDataGroupProps>;
+export default ListDataGroup;

package/dist/lib/components/ListData/ListDataGroup.js

@@ -0,0 +1,229 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.find-index.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@dnd-kit/core");
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _ListDataSortable = _interopRequireWildcard(require("./components/ListDataSortable"));
+
+var _helpers = require("./helpers");
+
+var _ListData = require("./ListData");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var SCREEN_READER_INSTRUCTION = "\u0427\u0442\u043E\u0431\u044B \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442, \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u043F\u0440\u043E\u0431\u0435\u043B.\n    \u041F\u0440\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043B\u0430\u0432\u0438\u0448\u0438 \u0441\u043E \u0441\u0442\u0440\u0435\u043B\u043A\u0430\u043C\u0438 \u0434\u043B\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u0449\u0435\u043D\u0438\u044F \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430.\n    \u0421\u043D\u043E\u0432\u0430 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 \u043F\u0440\u043E\u0431\u0435\u043B, \u0447\u0442\u043E\u0431\u044B \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0432 \u0435\u0433\u043E \u043D\u043E\u0432\u043E\u0435 \u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0438\u043B\u0438 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 escape \u0434\u043B\u044F \u043E\u0442\u043C\u0435\u043D\u044B.";
+var cn = (0, _uiHelpers.cnCreate)('mfui-list-data-group');
+
+var ListDataGroup = function ListDataGroup(_ref) {
+  var items = _ref.items,
+      _ref$activatorNode = _ref.activatorNode,
+      activatorNode = _ref$activatorNode === void 0 ? _ListDataSortable.ActivatorNodes.CONTROL : _ref$activatorNode,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? _ListDataSortable.GapSizes.NONE : _ref$gap,
+      _ref$showDivider = _ref.showDivider,
+      showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
+      onDragStart = _ref.onDragStart,
+      onDragEnd = _ref.onDragEnd,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      dragOverlayProps = _ref.dragOverlayProps,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _React$useState = _react["default"].useState(items),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      itemsList = _React$useState2[0],
+      setItemsList = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(null),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      activeId = _React$useState4[0],
+      setActiveId = _React$useState4[1];
+
+  var _React$useState5 = _react["default"].useState(null),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      dragEndEvent = _React$useState6[0],
+      setDragEndEvent = _React$useState6[1];
+
+  var boundaryRef = _react["default"].useRef(null);
+
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: _sortable.sortableKeyboardCoordinates
+  }), (0, _core.useSensor)(_core.TouchSensor, {
+    activationConstraint: {
+      delay: 250,
+      tolerance: 5
+    }
+  }), (0, _core.useSensor)(_core.MouseSensor));
+
+  var handleDragStart = _react["default"].useCallback(function (event) {
+    var active = event.active;
+    setActiveId(active.id);
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+  }, [setActiveId, onDragStart]);
+
+  var handleDragCancel = _react["default"].useCallback(function () {
+    setActiveId(null);
+  }, [setActiveId]);
+
+  var handleDragEnd = _react["default"].useCallback(function (event) {
+    var active = event.active,
+        over = event.over;
+
+    if ((over === null || over === void 0 ? void 0 : over.id) && active.id !== over.id) {
+      setItemsList(function (prevItemsList) {
+        var oldIndex = prevItemsList.findIndex(function (item) {
+          return item.id === active.id;
+        });
+        var newIndex = prevItemsList.findIndex(function (item) {
+          return item.id === over.id;
+        });
+        return (0, _sortable.arrayMove)(prevItemsList, oldIndex, newIndex);
+      });
+    }
+
+    setActiveId(null);
+    setDragEndEvent(event);
+  }, []);
+
+  _react["default"].useEffect(function () {
+    if (dragEndEvent) {
+      onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(itemsList, dragEndEvent);
+      setDragEndEvent(null);
+    }
+  }, [itemsList, onDragEnd, dragEndEvent]);
+
+  var renderSortableItem = function renderSortableItem(_a, index, isDragOverlay) {
+    var id = _a.id,
+        item = __rest(_a, ["id"]);
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: id,
+      className: cn('item', {
+        divider: showDivider
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_ListDataSortable["default"], {
+      id: id,
+      item: item,
+      activatorNode: activatorNode,
+      gap: gap,
+      disabled: disabled || (item === null || item === void 0 ? void 0 : item.disabled),
+      isDragOverlay: isDragOverlay,
+      classes: {
+        root: classes.cell,
+        control: classes.control
+      },
+      dataAttrs: {
+        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.cell, index + 1)),
+        control: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control, index + 1))
+      }
+    }));
+  };
+
+  var renderDragOverlay = function renderDragOverlay() {
+    var activeIndex = itemsList.findIndex(function (item) {
+      return item.id === activeId;
+    });
+    var activeItem = itemsList[activeIndex];
+
+    if (activeItem) {
+      return renderSortableItem(activeItem, activeIndex, true);
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
+    sensors: sensors,
+    collisionDetection: _core.closestCenter,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel,
+    modifiers: [(0, _helpers.restrictToElement)(boundaryRef), _helpers.restrictToVerticalAxis],
+    accessibility: {
+      screenReaderInstructions: {
+        draggable: SCREEN_READER_INSTRUCTION
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_sortable.SortableContext, {
+    items: itemsList,
+    strategy: _sortable.verticalListSortingStrategy
+  }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes.root]),
+    ref: boundaryRef
+  }), itemsList.map(function (item, index) {
+    return renderSortableItem(item, index);
+  }))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, dragOverlayProps, activeId ? renderDragOverlay() : null));
+};
+
+ListDataGroup.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape((0, _extends2["default"])({
+    id: PropTypes.string.isRequired
+  }, _ListData.ListDataPropType)).isRequired).isRequired,
+  activatorNode: PropTypes.oneOf(Object.values(_ListDataSortable.ActivatorNodes)),
+  gap: PropTypes.oneOf(Object.values(_ListDataSortable.GapSizes)),
+  showDivider: PropTypes.bool,
+  onDragStart: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  disabled: PropTypes.bool,
+  dragOverlayProps: PropTypes.shape({
+    className: PropTypes.string,
+    zIndex: PropTypes.number
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    cell: PropTypes.string,
+    control: PropTypes.string
+  }),
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+var _default = ListDataGroup;
+exports["default"] = _default;