@megafon/ui-core 8.17.1 → 8.17.3

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import './ListData.scss';
+type Target = '_self' | '_blank' | '_parent' | '_top';
+export type TitlePropsType = {
+    /** Текст заголовка */
+    text: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: Target;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+declare const ValueColors: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+};
+export type ValueColorsType = (typeof ValueColors)[keyof typeof ValueColors];
+declare const Actions: {
+    readonly DELETE: "delete";
+    readonly CONTROL: "control";
+};
+export 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 default ListData;

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

@@ -0,0 +1,169 @@
+"use strict";
+
+function _typeof3(o) { "@babel/helpers - typeof"; return _typeof3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof3(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var DeleteIcon = function DeleteIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.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.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("circle", {
+    cx: 21,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 16,
+    cy: 16,
+    r: 1.5
+  }), /*#__PURE__*/React.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.useRef(null);
+  var _React$useState = React.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.useCallback(function (e) {
+    e.stopPropagation();
+    !disabled && (onAction === null || onAction === void 0 ? void 0 : onAction(e));
+  }, [disabled, onAction]);
+  React.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.createElement("div", {
+    className: cn('title', [classes.title])
+  }, typeof title === 'string' ? title : /*#__PURE__*/React.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.createElement("div", {
+      className: cn('icon-container', {
+        colored: isIconColored && !avatar
+      })
+    }, avatar || /*#__PURE__*/React.createElement("div", {
+      className: cn('icon')
+    }, icon));
+  };
+  var renderExtraContent = function renderExtraContent() {
+    if (children) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('children', {
+          'event-none': !!onClick
+        })
+      }, children);
+    }
+    if (value) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('value-container')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cn('value', {
+          color: valueColor
+        }),
+        ref: valueRef,
+        style: {
+          textAlign: valueAlignment
+        }
+      }, (0, _uiHelpers.convert)(value, _uiHelpers.textConvertConfig)), !!subValue && /*#__PURE__*/React.createElement("div", {
+        className: cn('sub-value')
+      }, subValue));
+    }
+    if (actionType) {
+      var isDelete = actionType === Actions.DELETE;
+      var ActionIcon = isDelete ? DeleteIcon : NothingIcon;
+      return /*#__PURE__*/React.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.createElement(ActionIcon, {
+        className: cn('action-icon', {
+          active: !disabled
+        })
+      }));
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.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.createElement("div", {
+    className: cn('header', {
+      gap: showActionElement,
+      align: !!subTitle
+    })
+  }, renderedTitle, !!subTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title', [classes.subtitle])
+  }, subTitle)), renderExtraContent());
+};
+var _default = exports["default"] = ListData;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-list-data-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;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 * as React from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import { ActivatorNodesType, GapSizesType } from './components/ListDataSortable';
+import { IListDataProps } from './ListData';
+import './ListDataGroup.scss';
+export type ListItemPropsType = IListDataProps & {
+    id: string | number;
+};
+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,159 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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.symbol.js");
+require("core-js/modules/es.array.find-index.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.map.js");
+var React = _interopRequireWildcard(require("react"));
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _uiHelpers = require("@megafon/ui-helpers");
+var _ListDataSortable = _interopRequireWildcard(require("./components/ListDataSortable"));
+var _helpers = require("./helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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.useState(items),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    itemsList = _React$useState2[0],
+    setItemsList = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    activeId = _React$useState4[0],
+    setActiveId = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    dragEndEvent = _React$useState6[0],
+    setDragEndEvent = _React$useState6[1];
+  var boundaryRef = React.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.useCallback(function (event) {
+    var active = event.active;
+    setActiveId(active.id);
+    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+  }, [setActiveId, onDragStart]);
+  var handleDragCancel = React.useCallback(function () {
+    setActiveId(null);
+  }, [setActiveId]);
+  var handleDragEnd = React.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.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.createElement("div", {
+      key: id,
+      className: cn('item', {
+        divider: showDivider
+      })
+    }, /*#__PURE__*/React.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.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.createElement(_sortable.SortableContext, {
+    items: itemsList,
+    strategy: _sortable.verticalListSortingStrategy
+  }, /*#__PURE__*/React.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.createElement(_core.DragOverlay, dragOverlayProps, activeId ? renderDragOverlay() : null));
+};
+var _default = exports["default"] = ListDataGroup;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-list-data-sortable{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-list-data-sortable__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;border-radius:12px;justify-content:space-between}.mfui-list-data-sortable__item{padding-right:0}.mfui-list-data-sortable__control{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:12px 16px 12px 8px}.mfui-list-data-sortable__icon{height:32px;width:32px;fill:var(--spbSky2)}.mfui-list-data-sortable_gap_small{padding:2px 0}.mfui-list-data-sortable_gap_medium{padding:4px 0}.mfui-list-data-sortable_gap_large{padding:6px 0}.mfui-list-data-sortable_dragging{opacity:0}.mfui-list-data-sortable_drag-overlay .mfui-list-data-sortable__wrapper{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;background-color:var(--spbSky0)}.mfui-list-data-sortable_activator_cell:not(.mfui-list-data-sortable_disabled){cursor:-webkit-grab;cursor:grab}.mfui-list-data-sortable_activator_cell:not(.mfui-list-data-sortable_disabled).mfui-list-data-sortable_drag-overlay{cursor:-webkit-grabbing;cursor:grabbing}.mfui-list-data-sortable_activator_control:not(.mfui-list-data-sortable_disabled) .mfui-list-data-sortable__control{cursor:-webkit-grab;cursor:grab}.mfui-list-data-sortable_activator_control:not(.mfui-list-data-sortable_disabled).mfui-list-data-sortable_drag-overlay .mfui-list-data-sortable__control{cursor:-webkit-grabbing;cursor:grabbing}

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import { IListDataProps } from '../ListData';
+import './ListDataSortable.scss';
+export declare const ActivatorNodes: {
+    readonly CELL: "cell";
+    readonly CONTROL: "control";
+};
+export type ActivatorNodesType = (typeof ActivatorNodes)[keyof typeof ActivatorNodes];
+export declare const GapSizes: {
+    readonly NONE: "none";
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export type GapSizesType = (typeof GapSizes)[keyof typeof GapSizes];
+export interface IListDataSortableProps {
+    id: UniqueIdentifier;
+    item: IListDataProps;
+    activatorNode: ActivatorNodesType;
+    disabled?: boolean;
+    isDragOverlay?: boolean;
+    gap?: GapSizesType;
+    classes?: {
+        root?: string;
+        control?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        control?: Record<string, string>;
+    };
+}
+declare const ListDataSortable: React.FC<IListDataSortableProps>;
+export default ListDataSortable;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.GapSizes = exports.ActivatorNodes = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.to-string.js");
+var React = _interopRequireWildcard(require("react"));
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+var _uiHelpers = require("@megafon/ui-helpers");
+var _ListData = _interopRequireDefault(require("../ListData"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var DragIcon = function DragIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 14H8v-2h16v2zm0 6H8v-2h16v2z"
+  }));
+};
+var ActivatorNodes = exports.ActivatorNodes = {
+  CELL: 'cell',
+  CONTROL: 'control'
+};
+var GapSizes = exports.GapSizes = {
+  NONE: 'none',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-list-data-sortable');
+var ListDataSortable = function ListDataSortable(_ref) {
+  var id = _ref.id,
+    item = _ref.item,
+    activatorNode = _ref.activatorNode,
+    gap = _ref.gap,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    isDragOverlay = _ref.isDragOverlay,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var _useSortable = (0, _sortable.useSortable)({
+      id: id,
+      disabled: disabled
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    setActivatorNodeRef = _useSortable.setActivatorNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var isCellActivator = activatorNode === ActivatorNodes.CELL;
+  var isControlActivator = activatorNode === ActivatorNodes.CONTROL;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      gap: gap,
+      disabled: disabled,
+      activator: activatorNode,
+      dragging: isDragging,
+      'drag-overlay': isDragOverlay
+    }, [classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isCellActivator ? listeners : null, isCellActivator ? attributes : null, {
+    style: {
+      transform: _utilities.CSS.Transform.toString(transform),
+      transition: transition
+    },
+    ref: setNodeRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(_ListData["default"], (0, _extends2["default"])({}, item, {
+    className: cn('item', [item === null || item === void 0 ? void 0 : item.className])
+  })), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('control', [classes.control])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control, isControlActivator ? listeners : null, isControlActivator ? attributes : null, {
+    ref: isControlActivator ? setActivatorNodeRef : undefined
+  }), /*#__PURE__*/React.createElement(DragIcon, {
+    className: cn('icon')
+  }))));
+};
+var _default = exports["default"] = ListDataSortable;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ClientRect, Modifier } from '@dnd-kit/core';
+import type { Transform } from '@dnd-kit/utilities';
+export declare const restrictToBoundingRect: (transform: Transform, rect: ClientRect, boundingRect: ClientRect) => Transform;
+export declare const restrictToVerticalAxis: Modifier;
+export declare const restrictToElement: (boundaryRef: React.RefObject<HTMLDivElement>) => Modifier;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.restrictToVerticalAxis = exports.restrictToElement = exports.restrictToBoundingRect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var restrictToBoundingRect = exports.restrictToBoundingRect = function restrictToBoundingRect(transform, rect, boundingRect) {
+  var value = (0, _extends2["default"])({}, transform);
+  if (rect.top + transform.y <= boundingRect.top) {
+    value.y = boundingRect.top - rect.top;
+  } else if (rect.bottom + transform.y >= boundingRect.top + boundingRect.height) {
+    value.y = boundingRect.top + boundingRect.height - rect.bottom;
+  }
+  if (rect.left + transform.x <= boundingRect.left) {
+    value.x = boundingRect.left - rect.left;
+  } else if (rect.right + transform.x >= boundingRect.left + boundingRect.width) {
+    value.x = boundingRect.left + boundingRect.width - rect.right;
+  }
+  return value;
+};
+var restrictToVerticalAxis = exports.restrictToVerticalAxis = function restrictToVerticalAxis(_ref) {
+  var transform = _ref.transform;
+  return (0, _extends2["default"])((0, _extends2["default"])({}, transform), {
+    x: 0
+  });
+};
+var restrictToElement = exports.restrictToElement = function restrictToElement(boundaryRef) {
+  return function (_ref2) {
+    var transform = _ref2.transform,
+      draggingNodeRect = _ref2.draggingNodeRect;
+    var _a;
+    var boundaryRect = (_a = boundaryRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (!draggingNodeRect || !boundaryRect) {
+      return transform;
+    }
+    return restrictToBoundingRect(transform, draggingNodeRect, boundaryRect);
+  };
+};

package/dist/lib/components/Logo/Logo.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-logo{display:inline-block;vertical-align:top}.mfui-logo_view_horizontal,.mfui-logo_view_vertical{vertical-align:top;width:129px}@media screen and (min-width:1024px){.mfui-logo_view_horizontal,.mfui-logo_view_vertical{width:146px}}@media screen and (min-width:1280px){.mfui-logo_view_horizontal,.mfui-logo_view_vertical{width:158px}}.mfui-logo__svg{display:block;width:100%}.mfui-logo__img{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-logo_view_horizontal .mfui-logo__img{min-height:23px}@media screen and (min-width:1024px){.mfui-logo_view_horizontal .mfui-logo__img{height:26px;min-height:28px}}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import './Logo.scss';
+export interface ILogoProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Цвет */
+    color?: 'green';
+    /** Отображение */
+    view?: 'horizontal' | 'vertical';
+    /** Ссылка */
+    href?: string;
+    /** target - аргумент тега <a> */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Logo: React.FC<ILogoProps>;
+export default Logo;