@megafon/ui-shared 5.17.0 → 6.0.0-beta.2

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

@@ -1,5 +1,5 @@
-import React, { Ref } from 'react';
-import './ImageBanner.less';
+import * as React from 'react';
+import './ImageBanner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
@@ -8,23 +8,23 @@ export declare const BackgroundColor: {
     readonly GRADIENT: "gradient";
     readonly LIGHT: "light";
 };
-export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
+export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
 export declare const Radius: {
     readonly CORNERS: "corners";
     readonly ROUNDED: "rounded";
 };
-export declare type RadiusType = typeof Radius[keyof typeof Radius];
+export type RadiusType = (typeof Radius)[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-export declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+export type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
 export declare const ImageVerticalAlign: {
     readonly TOP: "top";
     readonly CENTER: "center";
     readonly BOTTOM: "bottom";
 };
-export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
+export type ImageVerticalAlignType = (typeof ImageVerticalAlign)[keyof typeof ImageVerticalAlign];
 export interface IImageBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -47,7 +47,7 @@ export interface IImageBannerProps {
         children?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title?: string | React.ReactNode | React.ReactNode[];
     /** Текст-описание */
@@ -82,6 +82,7 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    children?: React.ReactNode;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -1,39 +1,22 @@
 "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); }
-
+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.ImageVerticalAlign = exports.NavTheme = exports.Radius = exports.BackgroundColor = void 0;
-
+exports["default"] = exports.Radius = exports.NavTheme = exports.ImageVerticalAlign = exports.BackgroundColor = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 require("core-js/modules/es.symbol.js");
-
 require("core-js/modules/es.symbol.description.js");
-
 require("core-js/modules/es.array.concat.js");
-
-require("core-js/modules/es.object.values.js");
-
-var _react = _interopRequireDefault(require("react"));
-
+var React = _interopRequireWildcard(require("react"));
 var _uiCore = require("@megafon/ui-core");
-
 var _uiHelpers = require("@megafon/ui-helpers");
-
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _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 _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 && Object.prototype.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(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var BackgroundColor = {
+var BackgroundColor = exports.BackgroundColor = {
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
@@ -41,41 +24,34 @@ var BackgroundColor = {
   GRADIENT: 'gradient',
   LIGHT: 'light'
 };
-exports.BackgroundColor = BackgroundColor;
-var Radius = {
+var Radius = exports.Radius = {
   CORNERS: 'corners',
   ROUNDED: 'rounded'
 };
-exports.Radius = Radius;
-var NavTheme = {
+var NavTheme = exports.NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
-exports.NavTheme = NavTheme;
-var ImageVerticalAlign = {
+var ImageVerticalAlign = exports.ImageVerticalAlign = {
   TOP: 'top',
   CENTER: 'center',
   BOTTOM: 'bottom'
 };
-exports.ImageVerticalAlign = ImageVerticalAlign;
-
 var getTheme = function getTheme(backgrounColor) {
   switch (backgrounColor) {
     case BackgroundColor.GREEN:
     case BackgroundColor.PURPLE:
       return NavTheme.LIGHT;
-
     default:
       return NavTheme.DARK;
   }
 };
-
 var cn = (0, _uiHelpers.cnCreate)('mfui-image-banner');
 var typographyConfig = {
   b: {
     component: function component(_ref) {
       var children = _ref.children;
-      return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+      return /*#__PURE__*/React.createElement(_uiCore.Header, {
         className: cn('value'),
         as: "h3",
         color: "inherit"
@@ -83,108 +59,97 @@ var typographyConfig = {
     }
   }
 };
-
 var ImageBanner = function ImageBanner(_ref2) {
   var dataAttrs = _ref2.dataAttrs,
-      className = _ref2.className,
-      _ref2$classes = _ref2.classes,
-      classes = _ref2$classes === void 0 ? {} : _ref2$classes,
-      rootRef = _ref2.rootRef,
-      _ref2$imageMobile = _ref2.imageMobile,
-      imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
-      _ref2$imageMobile2x = _ref2.imageMobile2x,
-      imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
-      _ref2$imageDesktop = _ref2.imageDesktop,
-      imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
-      _ref2$imageDesktop2x = _ref2.imageDesktop2x,
-      imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
-      _ref2$imageAlt = _ref2.imageAlt,
-      imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
-      _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
-      imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
-      title = _ref2.title,
-      description = _ref2.description,
-      cost = _ref2.cost,
-      _ref2$headerLevelMobi = _ref2.headerLevelMobile,
-      headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
-      _ref2$headerLevel = _ref2.headerLevel,
-      headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
-      _ref2$backgroundColor = _ref2.backgroundColor,
-      backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
-      _ref2$radius = _ref2.radius,
-      radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
-      autoHeight = _ref2.autoHeight,
-      isImageFullWidth = _ref2.isImageFullWidth,
-      badges = _ref2.badges,
-      adBlock = _ref2.adBlock,
-      _ref2$children = _ref2.children,
-      children = _ref2$children === void 0 ? [] : _ref2$children;
-
-  var _React$useState = _react["default"].useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      isMobile = _React$useState2[0],
-      setIsMobile = _React$useState2[1];
-
-  _react["default"].useEffect(function () {
+    className = _ref2.className,
+    _ref2$classes = _ref2.classes,
+    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+    rootRef = _ref2.rootRef,
+    _ref2$imageMobile = _ref2.imageMobile,
+    imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
+    _ref2$imageMobile2x = _ref2.imageMobile2x,
+    imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
+    _ref2$imageDesktop = _ref2.imageDesktop,
+    imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
+    _ref2$imageDesktop2x = _ref2.imageDesktop2x,
+    imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
+    _ref2$imageAlt = _ref2.imageAlt,
+    imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
+    _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
+    imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
+    title = _ref2.title,
+    description = _ref2.description,
+    cost = _ref2.cost,
+    _ref2$headerLevelMobi = _ref2.headerLevelMobile,
+    headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
+    _ref2$headerLevel = _ref2.headerLevel,
+    headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
+    _ref2$backgroundColor = _ref2.backgroundColor,
+    backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
+    _ref2$radius = _ref2.radius,
+    radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
+    autoHeight = _ref2.autoHeight,
+    isImageFullWidth = _ref2.isImageFullWidth,
+    badges = _ref2.badges,
+    adBlock = _ref2.adBlock,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children;
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isMobile = _React$useState2[0],
+    setIsMobile = _React$useState2[1];
+  React.useEffect(function () {
     var mediaQuery = window.matchMedia("(max-width: ".concat(_uiHelpers.breakpoints.MOBILE_MIDDLE_END, "px)"));
-
     var handleMediaChange = function handleMediaChange(_ref3) {
       var matches = _ref3.matches;
       setIsMobile(matches);
     };
-
     setIsMobile(mediaQuery.matches);
     mediaQuery.addEventListener('change', handleMediaChange);
     return function () {
       mediaQuery.removeEventListener('change', handleMediaChange);
     };
   }, []);
-
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
-
-  var renderBadges = !!badges && /*#__PURE__*/_react["default"].createElement("div", {
+  var renderBadges = !!badges && /*#__PURE__*/React.createElement("div", {
     className: cn('badges', [classes.badges])
   }, badges);
-
-  var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
+  var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
     className: cn('ad-block', [classes.adBlock])
   }, adBlock);
-
-  var renderContent = /*#__PURE__*/_react["default"].createElement("div", {
+  var renderContent = /*#__PURE__*/React.createElement("div", {
     className: cn('content')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: cn('badges-container', [classes.badgesContainer])
-  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('title', [classes.title]),
     color: "inherit",
     as: isMobile ? headerLevelMobile : headerLevel
-  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('description', [classes.description]),
     as: "h5",
     color: "inherit"
-  }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/_react["default"].createElement("div", {
+  }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
     className: cn('cost', [classes.cost])
-  }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!_react["default"].Children.count(children) && /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
     className: cn('children', [classes.children])
   }, children));
-
-  var renderImage = /*#__PURE__*/_react["default"].createElement("picture", {
+  var renderImage = /*#__PURE__*/React.createElement("picture", {
     className: cn('picture', {
       'v-align': imageVerticalAlign
     })
-  }, /*#__PURE__*/_react["default"].createElement("source", {
+  }, /*#__PURE__*/React.createElement("source", {
     className: classes.imageSource,
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
-  }), /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
+  }), /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
     className: cn('image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
     alt: imageAlt
   })));
-
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'background-color': backgroundColor,
       'text-color': navTheme,
@@ -196,46 +161,4 @@ var ImageBanner = function ImageBanner(_ref2) {
     ref: rootRef
   }), renderContent, hasImage && renderImage);
 };
-
-ImageBanner.propTypes = {
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    image: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    image: PropTypes.string,
-    imageSource: PropTypes.string,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    cost: PropTypes.string,
-    badgesContainer: PropTypes.string,
-    badges: PropTypes.string,
-    badge: PropTypes.string,
-    adBlock: PropTypes.string,
-    children: PropTypes.string
-  }),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  cost: PropTypes.string,
-  headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
-  headerLevel: PropTypes.oneOf(['h1', 'h2']),
-  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
-  radius: PropTypes.oneOf(Object.values(Radius)),
-  imageMobile: PropTypes.string,
-  imageMobile2x: PropTypes.string,
-  imageDesktop: PropTypes.string,
-  imageDesktop2x: PropTypes.string,
-  imageAlt: PropTypes.string,
-  imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
-  autoHeight: PropTypes.bool,
-  isImageFullWidth: PropTypes.bool,
-  badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
-};
-var _default = ImageBanner;
-exports["default"] = _default;
+var _default = exports["default"] = ImageBanner;

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

@@ -1,6 +1,6 @@
-import React, { Ref } from 'react';
+import * as React from 'react';
 import SwiperCore from 'swiper';
-import './Instructions.less';
+import './Instructions.scss';
 export declare const pictureAlignTypes: {
     readonly LEFT: "left";
     readonly RIGHT: "right";
@@ -34,13 +34,13 @@ export declare const elementOrderTypes: {
     readonly DEFAULT: "default";
     readonly REVERSED: "reversed";
 };
-declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
-declare type PictureVerticalAlignTypesType = typeof pictureVerticalAlignTypes[keyof typeof pictureVerticalAlignTypes];
-declare type PictureMaskTypesType = typeof pictureMaskTypes[keyof typeof pictureMaskTypes];
-declare type PictureBackgroundColorsType = typeof pictureBackgroundColorTypes[keyof typeof pictureBackgroundColorTypes];
-declare type ArrowThemeType = typeof arrowTheme[keyof typeof arrowTheme];
-declare type ElementOrderType = typeof elementOrderTypes[keyof typeof elementOrderTypes];
-export declare type InstructionItemType = {
+type PictureAlignTypesType = (typeof pictureAlignTypes)[keyof typeof pictureAlignTypes];
+type PictureVerticalAlignTypesType = (typeof pictureVerticalAlignTypes)[keyof typeof pictureVerticalAlignTypes];
+type PictureMaskTypesType = (typeof pictureMaskTypes)[keyof typeof pictureMaskTypes];
+type PictureBackgroundColorsType = (typeof pictureBackgroundColorTypes)[keyof typeof pictureBackgroundColorTypes];
+type ArrowThemeType = (typeof arrowTheme)[keyof typeof arrowTheme];
+type ElementOrderType = (typeof elementOrderTypes)[keyof typeof elementOrderTypes];
+export type InstructionItemType = {
     title: string | React.ReactNode | React.ReactNode[];
     mediaUrl: string;
     isVideo: boolean;
@@ -62,7 +62,7 @@ export interface IInstructionsProps {
         arrowNext?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: Ref<HTMLDivElement>;
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         instructionItem?: string;
@@ -99,5 +99,5 @@ export interface IInstructionsProps {
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }
-declare const Instructions: React.FC<IInstructionsProps>;
+declare const Instructions: React.FC<React.PropsWithChildren<IInstructionsProps>>;
 export default Instructions;