@megafon/ui-core 5.16.0 → 5.17.0

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

@@ -0,0 +1,129 @@
+"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"] = 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");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _utilities = require("@dnd-kit/utilities");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _ListData = _interopRequireWildcard(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 DragIcon = function DragIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 14H8v-2h16v2zm0 6H8v-2h16v2z"
+  }));
+};
+
+var ActivatorNodes = {
+  CELL: 'cell',
+  CONTROL: 'control'
+};
+exports.ActivatorNodes = ActivatorNodes;
+var GapSizes = {
+  NONE: 'none',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+exports.GapSizes = GapSizes;
+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["default"].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["default"].createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/_react["default"].createElement(_ListData["default"], (0, _extends2["default"])({}, item, {
+    className: cn('item', [item === null || item === void 0 ? void 0 : item.className])
+  })), /*#__PURE__*/_react["default"].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["default"].createElement(DragIcon, {
+    className: cn('icon')
+  }))));
+};
+
+ListDataSortable.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  item: PropTypes.shape(_ListData.ListDataPropType).isRequired,
+  activatorNode: PropTypes.oneOf(Object.values(ActivatorNodes)).isRequired,
+  disabled: PropTypes.bool,
+  isDragOverlay: PropTypes.bool,
+  gap: PropTypes.oneOf(Object.values(GapSizes)),
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    control: PropTypes.string
+  }),
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+var _default = ListDataSortable;
+exports["default"] = _default;

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,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.restrictToElement = exports.restrictToVerticalAxis = exports.restrictToBoundingRect = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var 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;
+};
+
+exports.restrictToBoundingRect = restrictToBoundingRect;
+
+var restrictToVerticalAxis = function restrictToVerticalAxis(_ref) {
+  var transform = _ref.transform;
+  return (0, _extends2["default"])((0, _extends2["default"])({}, transform), {
+    x: 0
+  });
+};
+
+exports.restrictToVerticalAxis = restrictToVerticalAxis;
+
+var 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);
+  };
+};
+
+exports.restrictToElement = restrictToElement;

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

@@ -39,6 +39,7 @@ export interface ISearchProps {
         itemTitle?: Record<string, string>;
         notice?: Record<string, string>;
         popularItem?: Record<string, string>;
+        clearButton?: Record<string, string>;
     };
     /** Значение */
     value?: string;

package/dist/lib/components/Search/Search.js

@@ -377,11 +377,11 @@ var Search = function Search(_ref) {
   };
 
   var renderClearButton = function renderClearButton() {
-    return /*#__PURE__*/_react["default"].createElement("button", {
+    return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.clearButton), {
       onClick: handleClearClick,
       type: "button",
       className: cn('clear')
-    }, /*#__PURE__*/_react["default"].createElement(ClearIcon, {
+    }), /*#__PURE__*/_react["default"].createElement(ClearIcon, {
       className: cn('clear-icon')
     }));
   };

package/dist/lib/components/Snackbar/SnackbarTimer/SnackbarTimer.css

@@ -7,6 +7,7 @@ h5 {
 }
 .mfui-snackbar-timer {
   color: var(--base);
+  margin-right: 8px;
 }
 @-webkit-keyframes snackbar-progress-bar {
   0% {
@@ -35,7 +36,6 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-right: 8px;
   width: 24px;
   height: 24px;
 }

package/dist/lib/index.d.ts

@@ -23,6 +23,9 @@ export { default as GridColumn } from './components/Grid/GridColumn';
 export { default as Header } from './components/Header/Header';
 export { default as Link } from './components/Link/Link';
 export { default as List } from './components/List/List';
+export { default as ListData } from './components/ListData/ListData';
+export { default as ListDataGroup } from './components/ListData/ListDataGroup';
+export { default as ListDataSortable } from './components/ListData/components/ListDataSortable';
 export { default as ListItem } from './components/List/ListItem';
 export { default as Logo } from './components/Logo/Logo';
 export { default as Month } from './components/Calendar/components/Month/Month';
@@ -48,6 +51,7 @@ export { default as SliderDisplayValue } from './components/Sliders/components/S
 export { default as SliderRange } from './components/Sliders/SliderRange/SliderRange';
 export { default as SliderRatio } from './components/Sliders/SliderRatio/SliderRatio';
 export { default as SliderScale } from './components/Sliders/components/SliderScale/SliderScale';
+export { default as slidesSettings } from './components/Banner/slidesSettings';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
 export { default as Switcher } from './components/Switcher/Switcher';

package/dist/lib/index.js

@@ -153,6 +153,24 @@ Object.defineProperty(exports, "List", {
     return _List["default"];
   }
 });
+Object.defineProperty(exports, "ListData", {
+  enumerable: true,
+  get: function get() {
+    return _ListData["default"];
+  }
+});
+Object.defineProperty(exports, "ListDataGroup", {
+  enumerable: true,
+  get: function get() {
+    return _ListDataGroup["default"];
+  }
+});
+Object.defineProperty(exports, "ListDataSortable", {
+  enumerable: true,
+  get: function get() {
+    return _ListDataSortable["default"];
+  }
+});
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function get() {
@@ -303,6 +321,12 @@ Object.defineProperty(exports, "SliderScale", {
     return _SliderScale["default"];
   }
 });
+Object.defineProperty(exports, "slidesSettings", {
+  enumerable: true,
+  get: function get() {
+    return _slidesSettings["default"];
+  }
+});
 Object.defineProperty(exports, "Snackbar", {
   enumerable: true,
   get: function get() {
@@ -432,6 +456,12 @@ var _Link = _interopRequireDefault(require("./components/Link/Link"));
 
 var _List = _interopRequireDefault(require("./components/List/List"));
 
+var _ListData = _interopRequireDefault(require("./components/ListData/ListData"));
+
+var _ListDataGroup = _interopRequireDefault(require("./components/ListData/ListDataGroup"));
+
+var _ListDataSortable = _interopRequireDefault(require("./components/ListData/components/ListDataSortable"));
+
 var _ListItem = _interopRequireDefault(require("./components/List/ListItem"));
 
 var _Logo = _interopRequireDefault(require("./components/Logo/Logo"));
@@ -482,6 +512,8 @@ var _SliderRatio = _interopRequireDefault(require("./components/Sliders/SliderRa
 
 var _SliderScale = _interopRequireDefault(require("./components/Sliders/components/SliderScale/SliderScale"));
 
+var _slidesSettings = _interopRequireDefault(require("./components/Banner/slidesSettings"));
+
 var _Snackbar = _interopRequireDefault(require("./components/Snackbar/Snackbar"));
 
 var _SnackbarTimer = _interopRequireDefault(require("./components/Snackbar/SnackbarTimer/SnackbarTimer"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.16.0",
+  "version": "5.17.0",
   "files": [
     "dist",
     "styles"
@@ -86,6 +86,8 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@megafon/ui-helpers": "^2.6.0",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
@@ -97,5 +99,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "0d4f96ecbc805db6a1b2200dd9adbb707349d474"
+  "gitHead": "426c7d8e65c13746f9cc1c895a2e7e1b4b08316a"
 }