@megafon/ui-core 6.2.0 → 7.0.0-beta.1

package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import ModalContent from "../_ModalContent/ModalContent";
+import "./ModalMobileFullScreen.css";
+var cn = cnCreate('mfui-modal-mobile-full-screen');
+var ModalMobileFullScreen = function ModalMobileFullScreen(_a) {
+  var _b = _a.classes,
+    _c = _b === void 0 ? {} : _b,
+    containerWrap = _c.containerWrap,
+    containerInner = _c.containerInner,
+    containerBody = _c.containerBody,
+    childrenClass = _c.children,
+    childrenContent = _c.childrenContent,
+    restClasses = __rest(_c, ["containerWrap", "containerInner", "containerBody", "children", "childrenContent"]),
+    _d = _a.scrollBarParams,
+    _e = _d.classes,
+    _f = _e === void 0 ? {} : _e,
+    root = _f.root,
+    init = _f.init,
+    scrollContent = _f.scrollContent,
+    restClassesScrollBar = __rest(_f, ["root", "init", "scrollContent"]),
+    restScrollBarParams = __rest(_d, ["classes"]),
+    children = _a.children,
+    restProps = __rest(_a, ["classes", "scrollBarParams", "children"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(ModalContent, _extends({}, restProps, {
+    classes: _extends(_extends({}, restClasses), {
+      containerWrap: cn('container-wrap', containerWrap),
+      containerInner: cn('container-inner', containerInner),
+      containerBody: cn('container-body', containerBody),
+      children: cn('children', childrenClass),
+      childrenContent: cn('children-content', childrenContent)
+    }),
+    scrollBarParams: _extends(_extends({}, restScrollBarParams), {
+      classes: _extends(_extends({}, restClassesScrollBar), {
+        root: cn('scroll-root', root),
+        init: cn('scroll-init', init),
+        scrollContent: cn('scroll-content', scrollContent)
+      })
+    })
+  }), children));
+};
+export default ModalMobileFullScreen;

package/dist/es/components/Modal/mocks.d.ts

@@ -0,0 +1,3 @@
+import type ModalContextPropsType from './types';
+declare const mockModalContextProps: ModalContextPropsType;
+export default mockModalContextProps;

package/dist/es/components/Modal/mocks.js

@@ -0,0 +1,79 @@
+var mockModalContextProps = {
+  classes: {
+    bodyOpen: 'bodyOpen-class',
+    modalContent: 'modalContent-class',
+    overlay: 'overlay-class',
+    background: 'background-class',
+    containerWrap: 'containerWrap-class',
+    containerInner: 'containerInner-class',
+    containerBody: 'containerBody-class',
+    header: 'header-class',
+    headerCloseButton: 'headerCloseButton-class',
+    titleArea: 'titleArea-class',
+    title: 'title-class',
+    children: 'children-class',
+    childrenContent: 'childrenContent-class',
+    footer: 'footer-class'
+  },
+  dataAttrs: {
+    background: {
+      'data-testid': 'background'
+    },
+    headerBackButton: {
+      'data-testid': 'headerBackButton'
+    },
+    headerCloseButton: {
+      'data-testid': 'headerCloseButton'
+    },
+    containerWrap: {
+      'data-testid': 'containerWrap'
+    },
+    containerInner: {
+      'data-testid': 'containerInner'
+    },
+    containerBody: {
+      'data-testid': 'containerBody'
+    }
+  },
+  scrollBarParams: {
+    maxHeight: 100,
+    classes: {
+      root: 'scrollBar-root-class',
+      init: 'scrollBar-init-class',
+      scrollContent: 'scrollBar-scrollContent-class',
+      childrenWrap: 'scrollBar-childrenWrap-class'
+    }
+  },
+  refs: {
+    overlayRef: {
+      current: null
+    },
+    headerRef: {
+      current: null
+    },
+    footerRef: {
+      current: null
+    },
+    containerWrapRef: {
+      current: null
+    },
+    containerInnerRef: {
+      current: null
+    },
+    containerBodyRef: {
+      current: null
+    }
+  },
+  isMobile: false,
+  isTransitionMoveStep: false,
+  isTransitionEndStep: false,
+  containerWrapTransform: '',
+  containerWrapHeight: 200,
+  containerWrapOverflow: '',
+  isBottomTransitionIn: false,
+  onSetContainerWrapRef: jest.fn(),
+  onPopupClose: jest.fn(),
+  onTransitionExited: jest.fn(),
+  onTransitionEnd: jest.fn()
+};
+export default mockModalContextProps;

package/dist/es/components/Modal/types.d.ts

@@ -0,0 +1,27 @@
+import type { IScrollBarProps } from '../ScrollBar/ScrollBar';
+import type { IModalProps } from './Modal';
+type ModalComponentPropsType = Pick<IModalProps, 'classes' | 'dataAttrs' | 'headerProps' | 'footerProps' | 'isEnabledNativeScroll' | 'isDisabledBackgroundClick'>;
+type RefType = React.MutableRefObject<HTMLDivElement | null>;
+type ModalContextPropsType = ModalComponentPropsType & {
+    scrollBarParams: IScrollBarProps;
+    refs: {
+        overlayRef: RefType;
+        headerRef: RefType;
+        footerRef: RefType;
+        containerWrapRef: RefType;
+        containerInnerRef: RefType;
+        containerBodyRef: RefType;
+    };
+    isMobile: boolean;
+    isTransitionMoveStep: boolean;
+    isTransitionEndStep: boolean;
+    containerWrapTransform: string;
+    containerWrapHeight: number | undefined;
+    containerWrapOverflow: string;
+    isBottomTransitionIn: boolean;
+    onSetContainerWrapRef: (node: HTMLDivElement) => void;
+    onPopupClose: () => void;
+    onTransitionExited: () => void;
+    onTransitionEnd: (e: React.TransitionEvent) => void;
+};
+export default ModalContextPropsType;

package/dist/es/components/Modal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/components/Modal/utils/utils.d.ts

@@ -0,0 +1,18 @@
+type CorrectMaxHeightRefsType = {
+    overlayNode: HTMLDivElement | null;
+    headerNode: HTMLDivElement | null;
+    footerNode: HTMLDivElement | null;
+    containerBodyNode: HTMLDivElement | null;
+};
+type CorrectMaxHeightArgsType = {
+    refs: CorrectMaxHeightRefsType;
+    props: {
+        isStickyFooter?: boolean;
+        isBottomView?: boolean;
+        isStickyHeader?: boolean;
+    };
+};
+export declare const getCorrectMaxHeight: ({ refs, props }: CorrectMaxHeightArgsType) => number;
+export declare const changeBodyPadding: (isOpened: boolean) => void;
+declare const _default: null;
+export default _default;

package/dist/es/components/Modal/utils/utils.js

@@ -0,0 +1,66 @@
+import "core-js/modules/es.parse-int.js";
+import { breakpoints } from '@megafon/ui-helpers';
+var getAdditionalSize = function getAdditionalSize(refs) {
+  var overlayNode = refs.overlayNode,
+    headerNode = refs.headerNode,
+    footerNode = refs.footerNode,
+    containerBodyNode = refs.containerBodyNode;
+  if (!(overlayNode && containerBodyNode)) {
+    return {
+      modalOverlayPadding: 0,
+      popupContainerBodyPaddings: 0,
+      popupHeaderHeight: 0,
+      popupFooterHeight: 0
+    };
+  }
+  var modalOverlayPadding = parseInt(getComputedStyle(overlayNode).paddingTop, 10);
+  var popupHeaderHeight = (headerNode === null || headerNode === void 0 ? void 0 : headerNode.offsetHeight) || 0;
+  var popupFooterHeight = (footerNode === null || footerNode === void 0 ? void 0 : footerNode.offsetHeight) || 0;
+  var popupContainerBodyPaddingTop = parseInt(getComputedStyle(containerBodyNode).paddingTop, 10);
+  var popupContainerBodyPaddingBottom = parseInt(getComputedStyle(containerBodyNode).paddingBottom, 10);
+  var popupContainerBodyPaddings = popupContainerBodyPaddingTop + popupContainerBodyPaddingBottom;
+  return {
+    modalOverlayPadding: modalOverlayPadding,
+    popupContainerBodyPaddings: popupContainerBodyPaddings,
+    popupHeaderHeight: popupHeaderHeight,
+    popupFooterHeight: popupFooterHeight
+  };
+};
+export var getCorrectMaxHeight = function getCorrectMaxHeight(_ref) {
+  var refs = _ref.refs,
+    props = _ref.props;
+  var isStickyFooter = props.isStickyFooter,
+    isStickyHeader = props.isStickyHeader,
+    isBottomView = props.isBottomView;
+  var windowHeight = window.innerHeight;
+  var windowWidth = window.innerWidth;
+  var isMobile = windowWidth < breakpoints.MOBILE_BIG_START;
+  var _getAdditionalSize = getAdditionalSize(refs),
+    modalOverlayPadding = _getAdditionalSize.modalOverlayPadding,
+    popupContainerBodyPaddings = _getAdditionalSize.popupContainerBodyPaddings,
+    popupHeaderHeight = _getAdditionalSize.popupHeaderHeight,
+    popupFooterHeight = _getAdditionalSize.popupFooterHeight;
+  var maxHeightDesktop = windowHeight - modalOverlayPadding * 2 - popupHeaderHeight - popupContainerBodyPaddings;
+  var maxHeightMobileDefault = windowHeight - popupContainerBodyPaddings;
+  var maxHeightMobileHeader = isStickyHeader ? maxHeightMobileDefault - popupHeaderHeight : maxHeightMobileDefault;
+  var maxHeightMobileView = isBottomView ? maxHeightMobileHeader - modalOverlayPadding : maxHeightMobileHeader;
+  var maxHeightResize = isMobile ? maxHeightMobileView : maxHeightDesktop;
+  var correctMaxHeight = isStickyFooter ? maxHeightResize - popupFooterHeight : maxHeightResize;
+  return correctMaxHeight;
+};
+export var changeBodyPadding = function changeBodyPadding(isOpened) {
+  var windowWidth = window.innerWidth;
+  var documentClientWidth = document.documentElement.clientWidth;
+  var scrollBarWidth = windowWidth - documentClientWidth;
+  var bodyEl = document.body;
+  if (!isOpened) {
+    bodyEl.style.paddingRight = '';
+    return;
+  }
+  if (scrollBarWidth === 0) {
+    return;
+  }
+  var computedBodyPaddingRight = parseInt(getComputedStyle(bodyEl).paddingRight, 10);
+  bodyEl.style.paddingRight = "".concat(computedBodyPaddingRight + scrollBarWidth, "px");
+};
+export default null;

package/dist/es/components/NavArrow/NavArrow.css

@@ -1,63 +1 @@
-.mfui-nav-arrow {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 40px;
-  height: 40px;
-  margin: 0;
-  padding: 4px;
-  border: none;
-  border-radius: 50%;
-  outline: none;
-  cursor: pointer;
-  -webkit-transition: background-color 0.3s, opacity 0.3s;
-  transition: background-color 0.3s, opacity 0.3s;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.mfui-nav-arrow:disabled {
-  cursor: default;
-  opacity: 0.3;
-  pointer-events: none;
-}
-.mfui-nav-arrow__icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-  fill: var(--stcWhite);
-}
-.mfui-nav-arrow_theme_purple {
-  background-color: var(--brandPurple);
-}
-.mfui-nav-arrow_theme_purple:hover {
-  background-color: var(--buttonHoverPurple);
-}
-.mfui-nav-arrow_theme_purple:active {
-  background-color: var(--buttonDown);
-}
-.mfui-nav-arrow_theme_dark {
-  background-color: var(--stcBlack20);
-}
-.mfui-nav-arrow_theme_dark:hover {
-  background-color: var(--stcBlack50);
-}
-.mfui-nav-arrow_theme_dark:active {
-  background-color: var(--buttonDown);
-}
-.mfui-nav-arrow_theme_white {
-  background-color: var(--stcWhite);
-  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-.mfui-nav-arrow_theme_white:hover {
-  -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
-          box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
-}
-.mfui-nav-arrow_theme_white:active {
-  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
-          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
-}
-.mfui-nav-arrow_theme_white .mfui-nav-arrow__icon {
-  fill: var(--stcBlack);
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:40px;margin:0;outline:none;padding:4px;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;width:40px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-nav-arrow_theme_white .mfui-nav-arrow__icon{fill:var(--stcBlack)}

package/dist/es/components/NavArrow/NavArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './NavArrow.less';
+import './NavArrow.scss';
 export declare const Theme: {
     readonly PURPLE: "purple";
     readonly DARK: "dark";
@@ -9,8 +9,8 @@ export declare const View: {
     readonly PREV: "prev";
     readonly NEXT: "next";
 };
-export declare type ThemeType = typeof Theme[keyof typeof Theme];
-declare type ViewType = typeof View[keyof typeof View];
+export type ThemeType = (typeof Theme)[keyof typeof Theme];
+type ViewType = (typeof View)[keyof typeof View];
 export interface INavArrowProps {
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/es/components/NavArrow/NavArrow.js

@@ -1,10 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./NavArrow.css";
-
 var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -12,7 +9,6 @@ var ArrowLeft = function ArrowLeft(props) {
     d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
   }));
 };
-
 var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -20,7 +16,6 @@ var ArrowRight = function ArrowRight(props) {
     d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
   }));
 };
-
 export var Theme = {
   PURPLE: 'purple',
   DARK: 'dark',
@@ -31,24 +26,22 @@ export var View = {
   NEXT: 'next'
 };
 var cn = cnCreate('mfui-nav-arrow');
-
 var NavArrow = function NavArrow(_ref) {
   var dataAttrs = _ref.dataAttrs,
-      className = _ref.className,
-      _ref$view = _ref.view,
-      view = _ref$view === void 0 ? View.PREV : _ref$view,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? Theme.PURPLE : _ref$theme,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onClick = _ref.onClick;
+    className = _ref.className,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? View.PREV : _ref$view,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? Theme.PURPLE : _ref$theme,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onClick = _ref.onClick;
   var renderIcon = React.useCallback(function () {
     switch (view) {
       case View.PREV:
         return /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow), {
           className: cn('icon')
         }));
-
       default:
         return /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow), {
           className: cn('icon')
@@ -64,17 +57,4 @@ var NavArrow = function NavArrow(_ref) {
     disabled: disabled
   }), renderIcon());
 };
-
-NavArrow.propTypes = {
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    prevArrow: PropTypes.objectOf(PropTypes.string.isRequired),
-    nextArrow: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  className: PropTypes.string,
-  theme: PropTypes.oneOf(Object.values(Theme)),
-  view: PropTypes.oneOf(Object.values(View)),
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func
-};
 export default NavArrow;