@megafon/ui-core 8.2.1 → 8.3.0

package/dist/lib/components/Pagination/usePagination.d.ts

@@ -1,8 +1,13 @@
-export declare const Button: {
-    HIDDEN: string;
+import { PaginationTypesType, ValueType } from './types';
+export declare const BUTTONS: {
+    SKIP_PREV: string;
+    SKIP_NEXT: string;
     FIRST: number;
 };
-export declare const MOBILE_RESOLUTION = 360;
-type PaginationItem = string | number;
-declare const usePagination: (totalPages: number, activePage: number) => PaginationItem[];
+type usePaginationReturnType = {
+    paginationItems: ValueType[];
+    skipPrevPage: number;
+    skipNextPage: number;
+};
+declare const usePagination: (type: PaginationTypesType, totalPages: number, activePage: number) => usePaginationReturnType;
 export default usePagination;

package/dist/lib/components/Pagination/usePagination.js

@@ -3,80 +3,112 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.MOBILE_RESOLUTION = exports.Button = void 0;
+exports["default"] = exports.BUTTONS = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 require("core-js/modules/es.array.concat.js");
 var _react = _interopRequireDefault(require("react"));
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
-var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
-var _helpers = _interopRequireDefault(require("./helpers"));
+var _useResolution2 = _interopRequireDefault(require("../../hooks/useResolution"));
+var _helpers = require("./helpers");
+var _types = require("./types");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var Button = exports.Button = {
-  HIDDEN: 'HIDDEN',
+var BUTTONS = exports.BUTTONS = {
+  SKIP_PREV: 'SKIP_PREV',
+  SKIP_NEXT: 'SKIP_NEXT',
   FIRST: 1
 };
-var NeighbourCount = {
-  MOBILE: 0,
-  MAIN: 1
-};
-var BUTTON_RATIO = 5;
-var MOBILE_RESOLUTION = exports.MOBILE_RESOLUTION = 360;
+var PAGINATION_SETTINGS = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _types.PaginationTypes.CLASSIC, {
+  neighbourCount: {
+    main: 1,
+    mobile: 1,
+    mobileXS: 0
+  },
+  visibleNumbers: {
+    main: 7,
+    mobile: 7,
+    mobileXS: 5
+  },
+  skipStep: 0
+}), _types.PaginationTypes.MODERN, {
+  neighbourCount: {
+    main: 3,
+    mobile: 2,
+    mobileXS: 1
+  },
+  visibleNumbers: {
+    main: 6,
+    mobile: 5,
+    mobileXS: 4
+  },
+  skipStep: 4
+});
 var getItems = function getItems(_ref) {
-  var totalPages = _ref.totalPages,
+  var type = _ref.type,
+    totalPages = _ref.totalPages,
     activePage = _ref.activePage,
-    maxButtonsCount = _ref.maxButtonsCount,
+    buttonsCount = _ref.buttonsCount,
     neighbourCount = _ref.neighbourCount;
-  var isMoreThenMaxBtnsCount = totalPages > maxButtonsCount;
+  var isClassicType = type === _types.PaginationTypes.CLASSIC;
+  var isMoreThenButtonsCount = totalPages > buttonsCount;
   var lastPage = totalPages;
-  if (!isMoreThenMaxBtnsCount) {
-    return (0, _helpers["default"])(Button.FIRST, lastPage);
+  if (!isMoreThenButtonsCount) {
+    return (0, _helpers.getRange)(BUTTONS.FIRST, lastPage);
+  }
+  var hasLeftHiddenButtons = activePage > Math.ceil(buttonsCount / 2);
+  var hasRightHiddenButtons = isClassicType ? lastPage > activePage + neighbourCount + 2 : lastPage > activePage + neighbourCount;
+  if (!hasLeftHiddenButtons && hasRightHiddenButtons) {
+    var _range = (0, _helpers.getRange)(BUTTONS.FIRST, buttonsCount - 2);
+    return [].concat((0, _toConsumableArray2["default"])(_range), [BUTTONS.SKIP_NEXT, lastPage]);
   }
-  var hasLeftHiddenBtns = activePage > Math.ceil(maxButtonsCount / 2);
-  var hasRightHiddenBtns = lastPage > activePage + neighbourCount + 2;
-  switch (true) {
-    case !hasLeftHiddenBtns && hasRightHiddenBtns:
-      {
-        var range = (0, _helpers["default"])(Button.FIRST, maxButtonsCount - 2);
-        return [].concat((0, _toConsumableArray2["default"])(range), [Button.HIDDEN, lastPage]);
-      }
-    case hasLeftHiddenBtns && !hasRightHiddenBtns:
-      {
-        var _range = (0, _helpers["default"])(totalPages - (2 + 2 * neighbourCount), totalPages);
-        return [Button.FIRST, Button.HIDDEN].concat((0, _toConsumableArray2["default"])(_range));
-      }
-    default:
-      {
-        var _range2 = (0, _helpers["default"])(activePage - neighbourCount, activePage + neighbourCount);
-        return [Button.FIRST, Button.HIDDEN].concat((0, _toConsumableArray2["default"])(_range2), [Button.HIDDEN, lastPage]);
-      }
+  if (hasLeftHiddenButtons && !hasRightHiddenButtons) {
+    var _range2 = isClassicType ? (0, _helpers.getRange)(totalPages - (2 + 2 * neighbourCount), totalPages) : (0, _helpers.getRange)(totalPages - neighbourCount, totalPages);
+    return [BUTTONS.FIRST, BUTTONS.SKIP_PREV].concat((0, _toConsumableArray2["default"])(_range2));
   }
+  var range = isClassicType ? (0, _helpers.getRange)(activePage - neighbourCount, activePage + neighbourCount) : (0, _helpers.getRange)(activePage, activePage + neighbourCount);
+  return [BUTTONS.FIRST, BUTTONS.SKIP_PREV].concat((0, _toConsumableArray2["default"])(range), [BUTTONS.SKIP_NEXT, lastPage]);
 };
-var usePagination = function usePagination(totalPages, activePage) {
-  var _React$useState = _react["default"].useState(NeighbourCount.MAIN),
+var usePagination = function usePagination(type, totalPages, activePage) {
+  var _PAGINATION_SETTINGS$ = PAGINATION_SETTINGS[type],
+    neighbourCount = _PAGINATION_SETTINGS$.neighbourCount,
+    visibleNumbers = _PAGINATION_SETTINGS$.visibleNumbers,
+    skipStep = _PAGINATION_SETTINGS$.skipStep;
+  var _useResolution = (0, _useResolution2["default"])(),
+    isMobileExtraSmall = _useResolution.isMobileExtraSmall,
+    isMobile = _useResolution.isMobile;
+  var _React$useState = _react["default"].useState({
+      neighbourCount: neighbourCount.main,
+      buttonsCount: visibleNumbers.main
+    }),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    neighbourCount = _React$useState2[0],
-    setNeighbourCount = _React$useState2[1];
-  var maxButtonsCount = 2 * neighbourCount + BUTTON_RATIO;
+    config = _React$useState2[0],
+    setConfig = _React$useState2[1];
   var paginationItems = getItems({
+    type: type,
     totalPages: totalPages,
     activePage: activePage,
-    maxButtonsCount: maxButtonsCount,
-    neighbourCount: neighbourCount
+    neighbourCount: config.neighbourCount,
+    buttonsCount: config.buttonsCount
   });
+  var skipPrevPage = Math.max(1, activePage - skipStep);
+  var skipNextPage = Math.min(totalPages, activePage + skipStep);
   _react["default"].useEffect(function () {
-    var handleResize = function handleResize() {
-      var isMobile = window.innerWidth <= MOBILE_RESOLUTION;
-      var value = isMobile ? NeighbourCount.MOBILE : NeighbourCount.MAIN;
-      setNeighbourCount(value);
-    };
-    handleResize();
-    var handleResizeThrottled = (0, _lodash["default"])(handleResize, _throttleTime["default"].resize);
-    window.addEventListener('resize', handleResizeThrottled);
-    return function () {
-      window.removeEventListener('resize', handleResizeThrottled);
-    };
-  }, []);
-  return paginationItems;
+    if (isMobileExtraSmall) {
+      setConfig({
+        neighbourCount: neighbourCount.mobileXS,
+        buttonsCount: visibleNumbers.mobileXS
+      });
+      return;
+    }
+    setConfig({
+      neighbourCount: isMobile ? neighbourCount.mobile : neighbourCount.main,
+      buttonsCount: isMobile ? visibleNumbers.mobile : visibleNumbers.main
+    });
+  }, [isMobile, isMobileExtraSmall, visibleNumbers, neighbourCount]);
+  return {
+    paginationItems: paginationItems,
+    skipPrevPage: skipPrevPage,
+    skipNextPage: skipNextPage
+  };
 };
 var _default = exports["default"] = usePagination;

package/dist/lib/components/Tooltip/Tooltip.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-tooltip{opacity:0;pointer-events:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;visibility:hidden;z-index:100}.mfui-tooltip_open{opacity:1;pointer-events:all;visibility:visible}.mfui-tooltip_paddings_small .mfui-tooltip__content{padding:16px}.mfui-tooltip_paddings_medium .mfui-tooltip__content{padding:24px}.mfui-tooltip__content{overflow:hidden;position:relative;z-index:1}.mfui-tooltip__content-shadow{bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.mfui-tooltip__arrow-container{position:absolute}.mfui-tooltip__arrow,.mfui-tooltip__arrow-wrap{height:13px;width:33px}.mfui-tooltip__arrow{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tooltip__arrow svg{position:absolute}.mfui-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));fill:var(--base)}.mfui-tooltip__text{font-size:15px;line-height:24px}@media screen and (max-width:767px){.mfui-tooltip__text{font-size:12px;line-height:18px}}.mfui-tooltip__text_margin{margin-top:8px}.mfui-tooltip__button,.mfui-tooltip__close-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding:0}.mfui-tooltip__button{background-color:transparent;color:var(--brandGreen);font-family:inherit;font-size:15px;font-weight:500;line-height:18px;-webkit-transition:.3s;transition:.3s}@media screen and (max-width:767px){.mfui-tooltip__button{font-size:12px;line-height:14px}}.mfui-tooltip__button_margin{margin-top:8px}.mfui-tooltip__button:hover{color:var(--buttonHoverGreen)}.mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGreen)}.mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip__close-button{position:relative;right:-6px;top:-6px;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:12px;float:right;height:24px;justify-content:center;-webkit-transition:.3s;transition:.3s;width:24px}.mfui-tooltip__close-button:hover{background-color:var(--spbSky1)}.mfui-tooltip__close-button:active{background-color:var(--spbSky2)}.mfui-tooltip__close-icon{display:block;height:20px;opacity:.5;width:20px;fill:var(--content)}.mfui-tooltip__button-arrow{height:20px;margin-bottom:-2px;min-width:20px;-webkit-transition:.3s;transition:.3s;width:20px;fill:var(--brandGreen)}.mfui-tooltip__addititonal-content_margin{margin-top:16px}@media screen and (max-width:767px){.mfui-tooltip__addititonal-content_margin{margin-top:12px}}.mfui-tooltip_small .mfui-tooltip__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-tooltip_small .mfui-tooltip__text{font-weight:500}.mfui-tooltip_small .mfui-tooltip__close-button{top:auto}.mfui-tooltip_theme_white .mfui-tooltip__content{border:1px solid var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__button,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__title,.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__button,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__title{color:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button-arrow{fill:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover,.mfui-tooltip_theme_red .mfui-tooltip__button:hover{color:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active,.mfui-tooltip_theme_red .mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button,.mfui-tooltip_theme_red .mfui-tooltip__close-button{background-color:var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:hover,.mfui-tooltip_theme_red .mfui-tooltip__close-button:hover{background-color:var(--stcWhite20)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:active,.mfui-tooltip_theme_red .mfui-tooltip__close-button:active{background-color:var(--stcWhite50)}.mfui-tooltip_theme_blue .mfui-tooltip__close-icon,.mfui-tooltip_theme_red .mfui-tooltip__close-icon{opacity:1;fill:var(--stcWhite)}.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__content-shadow{background-color:var(--fury80)}.mfui-tooltip_theme_red .mfui-tooltip__arrow-inner{fill:var(--fury80)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__content-shadow{background-color:var(--night)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow-inner{fill:var(--night)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content-shadow{-webkit-transform:translateX(24px);transform:translateX(24px)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-wrap{left:3px}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__content-shadow{-webkit-transform:translateX(15px);transform:translateX(15px)}.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__arrow-wrap{left:-6px}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content-shadow{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-wrap{right:3px}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__content-shadow{-webkit-transform:translateX(-15px);transform:translateX(-15px)}.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__arrow-wrap{right:-6px}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content-shadow{-webkit-transform:translateY(-24px);transform:translateY(-24px)}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-wrap{bottom:13px}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__content-shadow{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__arrow-wrap{bottom:4px}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content-shadow{-webkit-transform:translateY(24px);transform:translateY(24px)}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__arrow-wrap{top:13px}.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__content-shadow{-webkit-transform:translateY(15px);transform:translateY(15px)}.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__arrow-wrap{top:4px}.mfui-tooltip[data-popper-escaped=true].mfui-tooltip_has-escape{pointer-events:none;visibility:hidden}
+h1,h2,h3,h4,h5{margin:0}.mfui-tooltip{opacity:0;pointer-events:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;visibility:hidden;z-index:100}.mfui-tooltip_open{opacity:1;pointer-events:all;visibility:visible}.mfui-tooltip_paddings_small .mfui-tooltip__content{padding:16px}.mfui-tooltip_paddings_medium .mfui-tooltip__content{padding:24px}.mfui-tooltip__content{overflow:hidden;position:relative;z-index:1}.mfui-tooltip__content-shadow{bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}.mfui-tooltip__arrow-container{position:absolute}.mfui-tooltip__arrow-wrap{height:13px;width:33px}.mfui-tooltip_theme_white .mfui-tooltip__arrow-wrap{z-index:2}.mfui-tooltip__arrow{display:-webkit-box;display:-ms-flexbox;display:flex;height:13px;position:absolute;width:33px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tooltip__arrow svg{position:absolute}.mfui-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));filter:drop-shadow(0 2px 9px rgba(0,0,0,.15));fill:var(--base)}.mfui-tooltip_theme_white .mfui-tooltip__arrow-inner{-webkit-filter:drop-shadow(0 -2px 1px rgba(0,0,0,.05));filter:drop-shadow(0 -2px 1px rgba(0,0,0,.05));top:1px}@-moz-document url-prefix(""){.mfui-tooltip_theme_white .mfui-tooltip__arrow-inner_top{filter:drop-shadow(0 2px 1px rgba(0,0,0,.05))}}.mfui-tooltip_theme_white .mfui-tooltip__arrow-inner path:nth-child(2){fill:var(--stcWhite10)}.mfui-tooltip__text{font-size:15px;line-height:24px}@media screen and (max-width:767px){.mfui-tooltip__text{font-size:12px;line-height:18px}}.mfui-tooltip__text_margin{margin-top:8px}.mfui-tooltip__button,.mfui-tooltip__close-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding:0}.mfui-tooltip__button{background-color:transparent;color:var(--brandGreen);font-family:inherit;font-size:15px;font-weight:500;line-height:18px;-webkit-transition:.3s;transition:.3s}@media screen and (max-width:767px){.mfui-tooltip__button{font-size:12px;line-height:14px}}.mfui-tooltip__button_margin{margin-top:8px}.mfui-tooltip__button:hover{color:var(--buttonHoverGreen)}.mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGreen)}.mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip__close-button{position:relative;right:-6px;top:-6px;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:12px;float:right;height:24px;justify-content:center;-webkit-transition:.3s;transition:.3s;width:24px}.mfui-tooltip__close-button:hover{background-color:var(--spbSky1)}.mfui-tooltip__close-button:active{background-color:var(--spbSky2)}.mfui-tooltip__close-icon{display:block;height:20px;opacity:.5;width:20px;fill:var(--content)}.mfui-tooltip__button-arrow{height:20px;margin-bottom:-2px;min-width:20px;-webkit-transition:.3s;transition:.3s;width:20px;fill:var(--brandGreen)}.mfui-tooltip__addititonal-content_margin{margin-top:16px}@media screen and (max-width:767px){.mfui-tooltip__addititonal-content_margin{margin-top:12px}}.mfui-tooltip_small .mfui-tooltip__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-tooltip_small .mfui-tooltip__text{font-weight:500}.mfui-tooltip_small .mfui-tooltip__close-button{top:auto}.mfui-tooltip_theme_white .mfui-tooltip__content{border:1px solid var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__button,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__title,.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__button,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__title{color:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button-arrow{fill:var(--stcWhite)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover,.mfui-tooltip_theme_red .mfui-tooltip__button:hover{color:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:hover .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:hover .mfui-tooltip__button-arrow{fill:var(--buttonHoverGrey)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active,.mfui-tooltip_theme_red .mfui-tooltip__button:active{color:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__button:active .mfui-tooltip__button-arrow,.mfui-tooltip_theme_red .mfui-tooltip__button:active .mfui-tooltip__button-arrow{fill:var(--buttonDown)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button,.mfui-tooltip_theme_red .mfui-tooltip__close-button{background-color:var(--stcWhite10)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:hover,.mfui-tooltip_theme_red .mfui-tooltip__close-button:hover{background-color:var(--stcWhite20)}.mfui-tooltip_theme_blue .mfui-tooltip__close-button:active,.mfui-tooltip_theme_red .mfui-tooltip__close-button:active{background-color:var(--stcWhite50)}.mfui-tooltip_theme_blue .mfui-tooltip__close-icon,.mfui-tooltip_theme_red .mfui-tooltip__close-icon{opacity:1;fill:var(--stcWhite)}.mfui-tooltip_theme_red .mfui-tooltip__arrow:before,.mfui-tooltip_theme_red .mfui-tooltip__content,.mfui-tooltip_theme_red .mfui-tooltip__content-shadow{background-color:var(--fury80)}.mfui-tooltip_theme_red .mfui-tooltip__arrow-inner{fill:var(--fury80)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow:before,.mfui-tooltip_theme_blue .mfui-tooltip__content,.mfui-tooltip_theme_blue .mfui-tooltip__content-shadow{background-color:var(--night)}.mfui-tooltip_theme_blue .mfui-tooltip__arrow-inner{fill:var(--night)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__content-shadow{-webkit-transform:translateX(24px);transform:translateX(24px)}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-wrap{left:3px}.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=right] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__content-shadow{-webkit-transform:translateX(15px);transform:translateX(15px)}.mfui-tooltip_offset_small[data-popper-placement=right-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=right-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=right] .mfui-tooltip__arrow-wrap{left:-6px}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__content-shadow{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-wrap{right:3px}.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=left] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__content-shadow{-webkit-transform:translateX(-15px);transform:translateX(-15px)}.mfui-tooltip_offset_small[data-popper-placement=left-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=left-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=left] .mfui-tooltip__arrow-wrap{right:-6px}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__content-shadow{-webkit-transform:translateY(-24px);transform:translateY(-24px)}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-wrap{bottom:13px}.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-end] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top-start] .mfui-tooltip__arrow-shadow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow,.mfui-tooltip[data-popper-placement=top] .mfui-tooltip__arrow-shadow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__content-shadow{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.mfui-tooltip_offset_small[data-popper-placement=top-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=top-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=top] .mfui-tooltip__arrow-wrap{bottom:4px}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__content-shadow,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__content-shadow{-webkit-transform:translateY(24px);transform:translateY(24px)}.mfui-tooltip[data-popper-placement=bottom-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip[data-popper-placement=bottom] .mfui-tooltip__arrow-wrap{top:13px}.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__content-shadow,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__content,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__content-shadow{-webkit-transform:translateY(15px);transform:translateY(15px)}.mfui-tooltip_offset_small[data-popper-placement=bottom-end] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=bottom-start] .mfui-tooltip__arrow-wrap,.mfui-tooltip_offset_small[data-popper-placement=bottom] .mfui-tooltip__arrow-wrap{top:4px}.mfui-tooltip[data-popper-escaped=true].mfui-tooltip_has-escape{pointer-events:none;visibility:hidden}

package/dist/lib/components/Tooltip/Tooltip.js

@@ -31,6 +31,20 @@ var CancelIcon = function CancelIcon(props) {
     d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
   }));
 };
+var ArrowWithContour = function ArrowWithContour(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    width: 32,
+    height: 12
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.878.894c.852-.955 2.39-.954 3.241.002C21.128 4.278 27.71 11 32.5 11H.5C5.261 11 11.86 4.275 14.878.894z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.119.718c2.295 2.58 6.67 7.103 10.742 9.104 1.266.622 2.503 1 3.639 1h-3.858l-1.829-1a28.919 28.919 0 01-2.797-2.004c-2.684-2.154-5.124-4.726-6.644-6.435a1.19 1.19 0 00-1.748-.002C14.1 3.09 11.654 5.662 8.969 7.816a29.088 29.088 0 01-2.8 2.006l-2.045 1H.5c1.129 0 2.361-.378 3.624-1C8.19 7.82 12.576 3.295 14.878.715c.852-.955 2.39-.953 3.241.003z"
+  }));
+};
 var Arrow = function Arrow(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 42,
@@ -197,7 +211,8 @@ var Tooltip = function Tooltip(_ref) {
   var _usePopper = (0, _reactPopper.usePopper)(currentTarget, popperElement, options),
     styles = _usePopper.styles,
     attributes = _usePopper.attributes,
-    update = _usePopper.update;
+    update = _usePopper.update,
+    state = _usePopper.state;
   useEffect(function () {
     return setIsOpen(isOpened);
   }, [isOpened]);
@@ -341,7 +356,11 @@ var Tooltip = function Tooltip(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('arrow', [arrowClassName]),
     "data-testid": "".concat(testIdPrefix, "-arrow")
-  }, /*#__PURE__*/React.createElement(Arrow, {
+  }, theme === 'white' ? /*#__PURE__*/React.createElement(ArrowWithContour, {
+    className: cn('arrow-inner', {
+      top: (state === null || state === void 0 ? void 0 : state.placement) === 'top'
+    })
+  }) : /*#__PURE__*/React.createElement(Arrow, {
     className: cn('arrow-inner')
   }))), /*#__PURE__*/React.createElement("div", {
     className: cn('content-wrap')

package/dist/lib/components/UploadForm/UploadField/UploadField.d.ts

@@ -11,6 +11,8 @@ export interface IUploadDropField {
     onChange: (files: File[]) => void;
     /** Дополнительная информация */
     description?: string;
+    /** Список допустимых типов файлов для внутреннего input */
+    accept?: string;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/lib/components/UploadForm/UploadField/UploadField.js

@@ -23,6 +23,7 @@ var UploadField = function UploadField(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    accept = _ref.accept,
     onChange = _ref.onChange,
     description = _ref.description,
     dataAttrs = _ref.dataAttrs;
@@ -48,6 +49,7 @@ var UploadField = function UploadField(_ref) {
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     multiple: true,
     type: "file",
+    accept: accept,
     ref: inputRef,
     onChange: handleInputChange,
     disabled: disabled

package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0);border:none;border-radius:50%;cursor:pointer;padding:0}.mfui-upload-file-item__cancel-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden}.mfui-upload-file-item__name{font-size:15px;font-weight:500;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}
+h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.d.ts

@@ -9,16 +9,27 @@ export interface IUploadFileItem {
     fileSize?: string | number;
     /** Процент загрузки файла */
     loadingProgress?: number;
+    /** Не отображать прогресс загрузки */
+    hideProgress?: boolean;
     /** Сообщение об ошибке */
     errorText?: string;
     /** Проверка файла */
     isChecking?: string;
+    /** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
+    downloadLink?: string;
+    /** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
+    download?: boolean | string;
+    /** Указывает, где открыть скачиваемый документ */
+    target?: React.HTMLAttributeAnchorTarget;
+    /** Обработчик скачивания файла */
+    onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Обработчик удаления файла */
     onDelete?: (e: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         deleteButton?: Record<string, string>;
+        downloadButton?: Record<string, string>;
     };
 }
 declare const UploadFileItem: React.FC<IUploadFileItem>;

package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js

@@ -15,6 +15,15 @@ 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 DownloadIcon = function DownloadIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15.04 5.99L14.97 17l-1.26-1.49-1.42 1.41L15.37 20h1.26l3.08-3.08-1.42-1.41-1.32 1.55.07-11.05-2-.02z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 17H6a10 10 0 0020 0h-2a8 8 0 01-16 0z"
+  }));
+};
 var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -32,9 +41,15 @@ var UploadFileItem = function UploadFileItem(_ref) {
     fileSize = _ref$fileSize === void 0 ? 0 : _ref$fileSize,
     _ref$loadingProgress = _ref.loadingProgress,
     loadingProgress = _ref$loadingProgress === void 0 ? 0 : _ref$loadingProgress,
+    _ref$hideProgress = _ref.hideProgress,
+    hideProgress = _ref$hideProgress === void 0 ? false : _ref$hideProgress,
     errorText = _ref.errorText,
     _ref$isChecking = _ref.isChecking,
     isChecking = _ref$isChecking === void 0 ? false : _ref$isChecking,
+    downloadLink = _ref.downloadLink,
+    download = _ref.download,
+    target = _ref.target,
+    onDownload = _ref.onDownload,
     onDelete = _ref.onDelete,
     dataAttrs = _ref.dataAttrs;
   var tooltipTriggerElement = React.useRef(null);
@@ -43,9 +58,6 @@ var UploadFileItem = function UploadFileItem(_ref) {
     extension = _splitFileName.extension;
   var readableFileSize = (0, _helpers.getReadableFileSize)(fileSize);
   var isError = !!errorText;
-  var handleDelete = function handleDelete(e) {
-    onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
-  };
   var loadingStatusText = function loadingStatusText() {
     if (isChecking) {
       return 'проверка файла…';
@@ -68,6 +80,9 @@ var UploadFileItem = function UploadFileItem(_ref) {
         offset: "small"
       }, errorText));
     }
+    if (hideProgress) {
+      return null;
+    }
     return /*#__PURE__*/React.createElement("span", {
       className: cn('service-message')
     }, loadingStatusText());
@@ -87,7 +102,16 @@ var UploadFileItem = function UploadFileItem(_ref) {
     className: cn('name')
   }, name), /*#__PURE__*/React.createElement("div", {
     className: cn('description')
-  }, !!extension && /*#__PURE__*/React.createElement("span", null, extension.toUpperCase()), /*#__PURE__*/React.createElement("span", null, readableFileSize), renderExtraContent()), /*#__PURE__*/React.createElement("div", {
+  }, !!extension && /*#__PURE__*/React.createElement("span", null, extension.toUpperCase()), /*#__PURE__*/React.createElement("span", null, readableFileSize), renderExtraContent()), !!downloadLink && /*#__PURE__*/React.createElement("a", (0, _extends2["default"])({
+    className: cn('download-icon-box')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.downloadButton), {
+    href: downloadLink,
+    download: download,
+    target: target,
+    onClick: onDownload
+  }), /*#__PURE__*/React.createElement(DownloadIcon, {
+    className: cn('icon')
+  })), !hideProgress && /*#__PURE__*/React.createElement("div", {
     className: cn('progress-bar')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('progress-bar-fill'),
@@ -98,7 +122,7 @@ var UploadFileItem = function UploadFileItem(_ref) {
     type: "button",
     className: cn('cancel-icon-box')
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
-    onClick: handleDelete
+    onClick: onDelete
   }), /*#__PURE__*/React.createElement(CancelIcon, {
     className: cn('icon')
   })));

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from 'react';
 import './ValueField.scss';
 export declare const Field: {
     readonly LINE: "line";
@@ -35,6 +36,8 @@ export interface IValueField {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /** Обработчик потери фокуса */
     onBlur?: () => void;
+    /** Ссылка на input */
+    inputRef?: RefObject<HTMLInputElement>;
 }
 declare const ValueField: React.FC<IValueField>;
 export default ValueField;

package/dist/lib/components/ValueField/ValueField.js

@@ -44,20 +44,22 @@ var ValueField = function ValueField(_ref) {
     isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
     dataAttrs = _ref.dataAttrs,
     onChange = _ref.onChange,
-    onBlur = _ref.onBlur;
+    onBlur = _ref.onBlur,
+    externalInputRef = _ref.inputRef;
   var _a;
   var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : ''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
   var currentValue = isControlled ? value : inputValue;
-  var inputRef = React.useRef(null);
+  var internalInputRef = React.useRef(null);
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
   var isFieldInput = fieldType === Field.INPUT;
   var RootElement = isFieldInput ? 'label' : 'div';
+  var inputRef = externalInputRef || internalInputRef;
   var handleInputBlur = function handleInputBlur() {
     setIsFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur();
@@ -99,7 +101,7 @@ var ValueField = function ValueField(_ref) {
     className: cn('input'),
     type: "number",
     value: currentValue,
-    placeholder: placeholder,
+    placeholder: isFocused ? placeholder : undefined,
     onChange: handleInputChange,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,

package/dist/lib/hooks/useResolution.d.ts

@@ -1,4 +1,5 @@
 type UseResolutionReturnType = {
+    isMobileExtraSmall: boolean;
     isMobile: boolean;
 };
 declare function useResolution(): UseResolutionReturnType;

package/dist/lib/hooks/useResolution.js

@@ -12,33 +12,50 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var RESOLUTIONS;
 (function (RESOLUTIONS) {
+  RESOLUTIONS[RESOLUTIONS["MOBILE_XS_END"] = 359] = "MOBILE_XS_END";
   RESOLUTIONS[RESOLUTIONS["MOBILE_END"] = 767] = "MOBILE_END";
 })(RESOLUTIONS || (RESOLUTIONS = {}));
 var _RESOLUTIONS = RESOLUTIONS,
-  MOBILE_END = _RESOLUTIONS.MOBILE_END;
+  MOBILE_END = _RESOLUTIONS.MOBILE_END,
+  MOBILE_XS_END = _RESOLUTIONS.MOBILE_XS_END;
 var MEDIA_QUERIES = {
+  MAX_WIDTH_MOBILE_XS_END: "(max-width: ".concat(MOBILE_XS_END, "px)"),
   MAX_WIDTH_MOBILE_END: "(max-width: ".concat(MOBILE_END, "px)")
 };
-var MAX_WIDTH_MOBILE_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_END;
+var MAX_WIDTH_MOBILE_XS_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_XS_END,
+  MAX_WIDTH_MOBILE_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_END;
+var isScreenWidthAtMost = function isScreenWidthAtMost(maxWidth) {
+  return typeof window !== 'undefined' ? window.innerWidth <= maxWidth : false;
+};
 function useResolution() {
-  var _React$useState = React.useState((window === null || window === void 0 ? void 0 : window.innerWidth) <= MOBILE_END || false),
+  var _React$useState = React.useState(isScreenWidthAtMost(MOBILE_END)),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isMobile = _React$useState2[0],
     setIsMobile = _React$useState2[1];
+  var _React$useState3 = React.useState(isScreenWidthAtMost(MOBILE_XS_END)),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    isMobileExtraSmall = _React$useState4[0],
+    setIsMobileExtraSmall = _React$useState4[1];
   var handleMediaChange = function handleMediaChange(updateStateFn) {
     return function (e) {
       return updateStateFn(e.matches);
     };
   };
   var handleMaxWidthMobileEnd = handleMediaChange(setIsMobile);
+  var handleMaxWidthMobileExtraSmall = handleMediaChange(setIsMobileExtraSmall);
   React.useEffect(function () {
-    window.matchMedia(MAX_WIDTH_MOBILE_END).addEventListener('change', handleMaxWidthMobileEnd);
+    var mobileExtraSmallQuery = window.matchMedia(MAX_WIDTH_MOBILE_XS_END);
+    var mobileQuery = window.matchMedia(MAX_WIDTH_MOBILE_END);
+    mobileExtraSmallQuery.addEventListener('change', handleMaxWidthMobileExtraSmall);
+    mobileQuery.addEventListener('change', handleMaxWidthMobileEnd);
     return function () {
-      window.matchMedia(MAX_WIDTH_MOBILE_END).removeEventListener('change', handleMaxWidthMobileEnd);
+      mobileExtraSmallQuery.removeEventListener('change', handleMaxWidthMobileExtraSmall);
+      mobileQuery.removeEventListener('change', handleMaxWidthMobileEnd);
     };
-  }, [handleMaxWidthMobileEnd]);
+  }, [handleMaxWidthMobileEnd, handleMaxWidthMobileExtraSmall]);
   return {
-    isMobile: isMobile
+    isMobile: isMobile,
+    isMobileExtraSmall: isMobileExtraSmall
   };
 }
 var _default = exports["default"] = useResolution;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "8.2.1",
+    "version": "8.3.0",
     "files": [
         "dist",
         "styles"
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "edffcb4b303fb6d5c80e587e09a7bdb1f0e6898b"
+    "gitHead": "3a9673d8ac34a1c09c4dbb829fd29f2833b4029d"
 }

package/styles/colors.css

@@ -35,7 +35,7 @@
     --gradientGreen3: linear-gradient(90deg, #00B956 50%, #00D1FF 100%);
     --gradientPurple1: linear-gradient(95.39deg, #731982 55%, #AA5AFF 90%);
     --gradientPurple2: linear-gradient(90deg, #731982 50%, #E64DE6 100%);
-    --gradientPurple3: linear-gradient(90deg, #731982 50:, #00D2FF 100%);
+    --gradientPurple3: linear-gradient(90deg, #731982 50%, #00D2FF 100%);
     --gradientPurple4: linear-gradient(90deg, #731982 50%, #1B61AC 100%);
 
     /* Gradients Secondary*/
@@ -44,9 +44,8 @@
     --gradientBerry1: linear-gradient(90deg, #AA5AFF 50%, #00D1FF 100%);
     --gradientBerry2: linear-gradient(90deg, #AA5AFF 50%, #E64DE6 100%);
 
-
     /* Gradients System*/
-    --gradientScrim: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%);
+    --gradientScrim: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%);
 
     /* Static */
     --stcWhite: #FFFFFF;
@@ -113,13 +112,13 @@
     --gradientGreen3: linear-gradient(90deg, #00B956 50%, #00D1FF 100%);
     --gradientPurple1: linear-gradient(95.39deg, #731982 55%, #AA5AFF 90%);
     --gradientPurple2: linear-gradient(90deg, #731982 50%, #E64DE6 100%);
-    --gradientPurple3: linear-gradient(90deg, #731982 50:, #00D2FF 100%);
+    --gradientPurple3: linear-gradient(90deg, #731982 50%, #00D2FF 100%);
     --gradientPurple4: linear-gradient(90deg, #731982 50%, #1B61AC 100%);
     --gradientLime: linear-gradient(90deg, #AAFF00 50%, #00D1FF 100%);
     --gradientGrass: linear-gradient(90deg, #1EFA64 50%, #00D1FF 100%);
     --gradientBerry1: linear-gradient(90deg, #AA5AFF 50%, #00D1FF 100%);
     --gradientBerry2: linear-gradient(90deg, #AA5AFF 50%, #E64DE6 100%);
-    --gradientScrim: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 22%);
+    --gradientScrim: linear-gradient(270deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 20%);
     --stcWhite: #FFFFFF;
     --stcBlack: #333333;
     --stcWhite5: #FFFFFF0D;