@megafon/ui-core 8.17.1 → 8.17.3

package/dist/lib/components/Sliders/SliderRatio/SliderRatio.js

@@ -0,0 +1,209 @@
+"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.array.find-index.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
+var _helpers = require("../helpers");
+var _helpers2 = require("./helpers");
+var _types = require("./types");
+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 THUMB_SIZE = 24;
+var MIN_RANGE_VALUE = 0;
+var MAX_RANGE_VALUE = 100;
+var cn = (0, _uiHelpers.cnCreate)('mfui-slider-ratio');
+var SliderRatio = function SliderRatio(_ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    _ref$displayValueType = _ref.displayValueType,
+    displayValueType = _ref$displayValueType === void 0 ? 'line' : _ref$displayValueType,
+    displayLeftValuePrefix = _ref.displayLeftValuePrefix,
+    displayRightValuePrefix = _ref.displayRightValuePrefix,
+    displayLeftValueUnit = _ref.displayLeftValueUnit,
+    displayRightValueUnit = _ref.displayRightValueUnit,
+    values = _ref.values,
+    _ref$index = _ref.index,
+    outerIndex = _ref$index === void 0 ? 0 : _ref$index,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showScale = _ref.showScale,
+    showScale = _ref$showScale === void 0 ? false : _ref$showScale,
+    dataAttrs = _ref.dataAttrs,
+    onChange = _ref.onChange;
+  var _a, _b;
+  var stepCount = values.length - 1;
+  var rangeInputRef = React.useRef(null);
+  var rangeTrackRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isPointerUpped = _React$useState2[0],
+    setIsPointerUpped = _React$useState2[1];
+  var _React$useState3 = React.useState(outerIndex),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    innerIndex = _React$useState4[0],
+    setInnerIndex = _React$useState4[1];
+  var _React$useReducer = React.useReducer(_helpers2.inputReducer, {
+      left: null,
+      right: null
+    }),
+    _React$useReducer2 = (0, _slicedToArray2["default"])(_React$useReducer, 2),
+    rawInputValue = _React$useReducer2[0],
+    dispatchRawInputValue = _React$useReducer2[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    rawRangeValue = _React$useState6[0],
+    setRawRangeValue = _React$useState6[1];
+  var currentIndex = isControlled ? outerIndex : innerIndex;
+  var rangeValue = rawRangeValue !== null && rawRangeValue !== void 0 ? rawRangeValue : (0, _helpers2.getRangeStepValue)(stepCount, currentIndex);
+  var leftInputValue = (_a = rawInputValue.left) !== null && _a !== void 0 ? _a : values[currentIndex].leftValue;
+  var rightInputValue = (_b = rawInputValue.right) !== null && _b !== void 0 ? _b : values[currentIndex].rightValue;
+  var trackSize = (0, _helpers.getTrackSize)(rangeValue, MIN_RANGE_VALUE, MAX_RANGE_VALUE);
+  var handleInputChange = function handleInputChange(key) {
+    return function (e) {
+      var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
+      var closestValue = (0, _helpers2.findClosestValue)(values, Number(targetValue), key);
+      var newIndex = values.findIndex(function (value) {
+        return value[key] === closestValue;
+      });
+      setRawRangeValue(null);
+      !isControlled && setInnerIndex(newIndex);
+      dispatchRawInputValue({
+        type: key,
+        value: targetValue
+      });
+    };
+  };
+  var handleRangeInputChange = function handleRangeInputChange(e) {
+    // Cross browser fix: Firefox calls onChange after calling onPointerUp, but Chrome doesn't
+    if (isPointerUpped) {
+      setIsPointerUpped(false);
+      return;
+    }
+    setRawRangeValue(Number(e.target.value));
+  };
+  var handleRangeInputPointerUp = function handleRangeInputPointerUp() {
+    var newIndex = (0, _helpers2.getIndexByRangeValue)(rangeValue, stepCount);
+    setIsPointerUpped(true);
+    setRawRangeValue(null);
+    !isControlled && setInnerIndex(newIndex);
+    newIndex !== currentIndex && (onChange === null || onChange === void 0 ? void 0 : onChange(newIndex));
+  };
+  var handleRangeTrackPointerUp = function handleRangeTrackPointerUp(e) {
+    if (disabled) {
+      return;
+    }
+    var currentTarget = e.currentTarget;
+    var newRangeValue = (0, _helpers2.getRangeValueByPageX)(e.pageX, currentTarget, THUMB_SIZE);
+    var newIndex = (0, _helpers2.getIndexByRangeValue)(newRangeValue, stepCount);
+    setRawRangeValue(null);
+    !isControlled && setInnerIndex(newIndex);
+    newIndex !== currentIndex && (onChange === null || onChange === void 0 ? void 0 : onChange(newIndex));
+  };
+  var handleRangeTrackPointerLeave = React.useCallback(function () {
+    var _a, _b;
+    (_a = rangeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_b = rangeTrackRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointerleave', handleRangeTrackPointerLeave);
+  }, []);
+  var handleRangeTrackPointerDown = function handleRangeTrackPointerDown() {
+    var _a;
+    if (disabled) {
+      return;
+    }
+    (_a = rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerleave', handleRangeTrackPointerLeave);
+  };
+  var handleInputBlur = function handleInputBlur(key) {
+    return function () {
+      onChange === null || onChange === void 0 ? void 0 : onChange(currentIndex);
+      dispatchRawInputValue({
+        type: key,
+        value: null
+      });
+    };
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      disabled: disabled
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    style: {
+      '--thumbSize': "".concat(THUMB_SIZE, "px")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('head')
+  }, !!label && /*#__PURE__*/React.createElement("div", {
+    className: cn('label')
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: cn('display-values')
+  }, /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "left",
+    value: leftInputValue,
+    fieldType: displayValueType,
+    valuePrefix: displayLeftValuePrefix,
+    valueUnit: displayLeftValueUnit,
+    disabled: disabled,
+    onChange: handleInputChange(_types.KeyValueEnum.LEFT),
+    onBlur: handleInputBlur(_types.KeyValueEnum.LEFT),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
+    }
+  }), /*#__PURE__*/React.createElement(_ValueField["default"], {
+    isControlled: true,
+    position: "right",
+    value: rightInputValue,
+    fieldType: displayValueType,
+    valuePrefix: displayRightValuePrefix,
+    valueUnit: displayRightValueUnit,
+    disabled: disabled,
+    onChange: handleInputChange(_types.KeyValueEnum.RIGHT),
+    onBlur: handleInputBlur(_types.KeyValueEnum.RIGHT),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightInput
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-container')
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('range-input'),
+    type: "range",
+    value: rangeValue,
+    min: MIN_RANGE_VALUE,
+    max: MAX_RANGE_VALUE,
+    onChange: handleRangeInputChange,
+    onPointerUp: handleRangeInputPointerUp,
+    disabled: disabled,
+    style: {
+      backgroundSize: "".concat(trackSize, "% 100%")
+    }
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput), {
+    ref: rangeInputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track'),
+    onPointerUp: handleRangeTrackPointerUp,
+    onPointerDown: handleRangeTrackPointerDown,
+    ref: rangeTrackRef
+  }), showScale && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('scale')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale)), values.map(function (_, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('scale-item'),
+      key: i
+    });
+  }))));
+};
+var _default = exports["default"] = SliderRatio;

package/dist/lib/components/Sliders/SliderRatio/helpers.d.ts

@@ -0,0 +1,15 @@
+import { KeyValueEnum, ValueType } from './types';
+export declare const inputReducer: (state: {
+    left: string | null;
+    right: string | null;
+}, action: {
+    type: KeyValueEnum;
+    value: string | null;
+}) => {
+    left: string | null;
+    right: string | null;
+};
+export declare const getRangeValueByPageX: (pageX: number, trackInnerNode: HTMLDivElement, thumbSize: number) => number;
+export declare const getRangeStepValue: (valuesCount: number, index: number) => number;
+export declare const getIndexByRangeValue: (rangeValue: number, valuesCount: number) => number;
+export declare const findClosestValue: (values: ValueType[], target: number, key: KeyValueEnum) => number;

package/dist/lib/components/Sliders/SliderRatio/helpers.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inputReducer = exports.getRangeValueByPageX = exports.getRangeStepValue = exports.getIndexByRangeValue = exports.findClosestValue = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.object.to-string.js");
+var _types = require("./types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var inputReducer = exports.inputReducer = function inputReducer(state, action) {
+  if (action.type === _types.KeyValueEnum.LEFT) {
+    return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+      left: action.value
+    });
+  }
+  return (0, _extends2["default"])((0, _extends2["default"])({}, state), {
+    right: action.value
+  });
+};
+var getRangeValueByPageX = exports.getRangeValueByPageX = function getRangeValueByPageX(pageX, trackInnerNode, thumbSize) {
+  var clickPosition = pageX - (trackInnerNode.getBoundingClientRect().left + thumbSize / 2);
+  var clickPositionPercent = clickPosition * 100 / (trackInnerNode.offsetWidth - thumbSize);
+  return Math.round(clickPositionPercent);
+};
+var getRangeStepValue = exports.getRangeStepValue = function getRangeStepValue(valuesCount, index) {
+  var step = 100 / valuesCount;
+  return step * index;
+};
+var getIndexByRangeValue = exports.getIndexByRangeValue = function getIndexByRangeValue(rangeValue, valuesCount) {
+  var step = 100 / valuesCount;
+  return Math.round(rangeValue / step);
+};
+var findClosestValue = exports.findClosestValue = function findClosestValue(values, target, key) {
+  return values.reduce(function (closest, value) {
+    return Math.abs(value[key] - target) > Math.abs(closest - target) ? closest : value[key];
+  }, values[0][key]);
+};

package/dist/lib/components/Sliders/SliderRatio/types.d.ts

@@ -0,0 +1,8 @@
+export declare enum KeyValueEnum {
+    LEFT = "leftValue",
+    RIGHT = "rightValue"
+}
+export type ValueType = {
+    [KeyValueEnum.LEFT]: number;
+    [KeyValueEnum.RIGHT]: number;
+};

package/dist/lib/components/Sliders/SliderRatio/types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyValueEnum = void 0;
+var KeyValueEnum;
+(function (KeyValueEnum) {
+  KeyValueEnum["LEFT"] = "leftValue";
+  KeyValueEnum["RIGHT"] = "rightValue";
+})(KeyValueEnum || (exports.KeyValueEnum = KeyValueEnum = {}));

package/dist/lib/components/Sliders/components/SliderScale/SliderScale.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-slider-scale{font-size:12px;height:18px;line-height:18px;margin:8px 12px 0;position:relative}.mfui-slider-scale_disabled{color:var(--spbSky3)}.mfui-slider-scale__item{position:absolute;translate:-50% 0;white-space:nowrap}

package/dist/lib/components/Sliders/components/SliderScale/SliderScale.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import './SliderScale.scss';
+export declare const Scale: {
+    readonly BASE: "base";
+    readonly INTERVAL: "interval";
+};
+export type ScaleType = (typeof Scale)[keyof typeof Scale];
+export interface ISliderScale {
+    minValue: number;
+    maxValue: number;
+    scale?: ScaleType;
+    customScale?: string[];
+    disabled?: boolean;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const SliderScale: React.FC<ISliderScale>;
+export default SliderScale;

package/dist/lib/components/Sliders/components/SliderScale/SliderScale.js

@@ -0,0 +1,46 @@
+"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.Scale = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.map.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+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 Scale = exports.Scale = {
+  BASE: 'base',
+  INTERVAL: 'interval'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-slider-scale');
+var SliderScale = function SliderScale(_ref) {
+  var minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 'base' : _ref$scale,
+    customScale = _ref.customScale,
+    disabled = _ref.disabled,
+    dataAttrs = _ref.dataAttrs;
+  var builtInScale = scale === Scale.BASE ? [minValue, maxValue] : (0, _helpers.getIntervalScale)(minValue, maxValue);
+  var currentScale = customScale || builtInScale;
+  var leftOffset = 100 / (currentScale.length - 1);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      disabled: disabled
+    })
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), currentScale.map(function (item, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item'),
+      style: {
+        left: "calc(".concat(leftOffset * i, "%)")
+      },
+      key: i
+    }, item);
+  }));
+};
+var _default = exports["default"] = SliderScale;

package/dist/lib/components/Sliders/components/SliderScale/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getIntervalScale: (minValue: number, maxValue: number) => number[];
+export default getIntervalScale;

package/dist/lib/components/Sliders/components/SliderScale/helpers.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIntervalScale = exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var SCALE_MAX_LENGTH = 10;
+var SCALE_SEGMENT_COUNT = 9;
+var SCALE_WITHOUT_EDGE_LENGTH = SCALE_MAX_LENGTH - 2;
+var getIntervalScale = exports.getIntervalScale = function getIntervalScale(minValue, maxValue) {
+  var valueDifference = maxValue - minValue;
+  if (valueDifference < SCALE_MAX_LENGTH) {
+    return Array.from({
+      length: valueDifference + 1
+    }, function (_, i) {
+      return minValue + i;
+    });
+  }
+  var interval = valueDifference / SCALE_SEGMENT_COUNT;
+  var midItems = Array.from(Array(SCALE_WITHOUT_EDGE_LENGTH).keys());
+  var _midItems$reduce = midItems.reduce(function (acc) {
+      return {
+        current: acc.current + interval,
+        items: [].concat((0, _toConsumableArray2["default"])(acc.items), [Math.round(acc.current + interval)])
+      };
+    }, {
+      current: minValue,
+      items: []
+    }),
+    items = _midItems$reduce.items;
+  return [minValue].concat((0, _toConsumableArray2["default"])(items), [maxValue]);
+};
+var _default = exports["default"] = getIntervalScale;

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

@@ -0,0 +1,3 @@
+export declare const getRangeValue: (value: string | number, minValue: number, maxValue: number, step: number) => number;
+export declare const getTrackSize: (value: number | undefined, minValue: number, maxValue: number) => number;
+export declare const removeFirstZeros: (targetValue: string) => string;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeFirstZeros = exports.getTrackSize = exports.getRangeValue = void 0;
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.replace.js");
+var getRangeValue = exports.getRangeValue = function getRangeValue(value, minValue, maxValue, step) {
+  var sourceValue = Number(value);
+  if (minValue === maxValue || sourceValue < minValue) {
+    return minValue;
+  }
+  if (sourceValue > maxValue) {
+    return maxValue;
+  }
+  var valueDifference = maxValue - minValue;
+  var expectedStepCount = valueDifference / step;
+  var receivedStepCount = valueDifference / sourceValue;
+  var stepPosition = Math.round(expectedStepCount / receivedStepCount);
+  var valueWithStep = step * stepPosition;
+  return valueWithStep < minValue ? minValue : valueWithStep;
+};
+var getTrackSize = exports.getTrackSize = function getTrackSize() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var minValue = arguments.length > 1 ? arguments[1] : undefined;
+  var maxValue = arguments.length > 2 ? arguments[2] : undefined;
+  var valueDifference = maxValue - minValue;
+  if (valueDifference <= 0) {
+    return 0;
+  }
+  var finalValue = value - minValue;
+  var percent = finalValue * 100 / valueDifference;
+  return Number(percent.toFixed(3));
+};
+var removeFirstZeros = exports.removeFirstZeros = function removeFirstZeros(targetValue) {
+  return /^0.+/.test(targetValue) ? targetValue.replace(/^(0){1,}/, '') : targetValue;
+};

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-snackbar{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:480px;z-index:1}@-webkit-keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@media screen and (max-width:767px){.mfui-snackbar{width:304px}}.mfui-snackbar_move{-webkit-transition:none;transition:none}.mfui-snackbar .mfui-snackbar__tile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-animation:snackbar-show .2s linear .2s 1 forwards;animation:snackbar-show .2s linear .2s 1 forwards;background-color:var(--content);border:2px solid var(--stcWhite10);justify-content:space-between;min-height:64px;opacity:0;padding:12px 16px 12px 12px}@media screen and (max-width:767px){.mfui-snackbar .mfui-snackbar__tile{min-height:48px}}.mfui-snackbar__tile_closed{-webkit-animation:snackbar-hide .1s linear 1;animation:snackbar-hide .1s linear 1}.mfui-snackbar__tile_type_success .mfui-snackbar__icon-container svg{fill:var(--brandGreen)}.mfui-snackbar__tile_type_attention .mfui-snackbar__icon-container svg{fill:var(--fury80)}.mfui-snackbar__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:8px;min-width:32px;width:32px}.mfui-snackbar__icon-container svg{fill:var(--base)}@media screen and (max-width:767px){.mfui-snackbar__icon-container{height:20px;min-width:20px;width:20px}}.mfui-snackbar__icon-container_desktop{display:none}@media screen and (min-width:768px){.mfui-snackbar__icon-container_desktop{display:block}}.mfui-snackbar__icon-container_mobile{display:none}@media screen and (max-width:767px){.mfui-snackbar__icon-container_mobile{display:block}}.mfui-snackbar__text-wrapper{-webkit-box-flex:1;-ms-flex-positive:1;color:var(--base);flex-grow:1}.mfui-snackbar__text{display:none;overflow:hidden}@media screen and (min-width:768px){.mfui-snackbar__text_desktop{display:block;max-height:48px}}@media screen and (max-width:767px){.mfui-snackbar__text_mobile{display:block;max-height:36px}}.mfui-snackbar__text_short{max-width:272px}.mfui-snackbar__text-button{margin-left:12px;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.mfui-snackbar__close-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:transparent;border:none;border-radius:40px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:32px;justify-content:center;margin-left:24px;padding:0;width:32px}@media screen and (max-width:767px){.mfui-snackbar__close-button{display:none}}.mfui-snackbar__close-button:hover{background-color:hsla(0,0%,60%,.2)}.mfui-snackbar__close-button:active{background-color:hsla(0,0%,60%,.4)}.mfui-snackbar__close-button-icon{height:40px;min-width:40px;width:40px;fill:var(--spbSky3)}

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import './Snackbar.scss';
+export declare const SnackbarTypes: {
+    readonly ATTENTION: "attention";
+    readonly SUCCESS: "success";
+    readonly TIMER: "timer";
+    readonly INFO: "info";
+};
+export type SnackbarType = (typeof SnackbarTypes)[keyof typeof SnackbarTypes];
+export interface ISnackbarProps {
+    /** Текст */
+    text: string;
+    /** Тип отображения */
+    type?: SnackbarType;
+    /** Кастомная иконка для типа 'info' */
+    icon?: JSX.Element;
+    /** Отображение иконки. Скрыть иконку можно только для типа 'info' */
+    hasIcon?: boolean;
+    /** Кастомный текст кнопки. Не работает для типа 'timer' */
+    buttonText?: string;
+    /** Максимальное значение таймера */
+    maxTimerValue?: number;
+    /** Отображение текстовой кнопки */
+    hasTextButton?: boolean;
+    /** Отключение анимации закрытия */
+    disableCloseAnimation?: boolean;
+    /** Отключение автоматического закрытия */
+    disableAutoClose?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        icon?: string;
+        text?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        text?: Record<string, string>;
+        closeButton?: Record<string, string>;
+        textButton?: Record<string, string>;
+    };
+    /** Обработчик клика по кнопке */
+    onButtonClick?: () => void;
+    /** Обработчик на закрытие */
+    onClose?: () => void;
+}
+declare const Snackbar: React.FC<ISnackbarProps>;
+export default Snackbar;