@megafon/ui-core 8.17.0 → 8.17.1

package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.css

@@ -1 +0,0 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-mobile-bottom__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-modal-mobile-bottom__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-modal-mobile-bottom__container-wrap_move{-webkit-transition:none;transition:none}.mfui-modal-mobile-bottom__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-modal-mobile-bottom__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:8px;border-top-right-radius:8px;flex-grow:0;height:auto}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}

package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { MODAL_TRANSITIONS_STEPS_ENUM } from '../Modal';
-import type ModalContextPropsType from '../types';
-import './ModalMobileBottom.scss';
-export interface IModalMobileBottomProps extends ModalContextPropsType {
-    isSwipeDisabled?: boolean;
-    onChangeTransitionStep: (value: MODAL_TRANSITIONS_STEPS_ENUM) => void;
-    onChangeContainerWrapTransform: (value: string) => void;
-    children?: React.ReactNode;
-}
-declare const ModalMobileBottom: React.FC<IModalMobileBottomProps>;
-export default ModalMobileBottom;

package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.js

@@ -1,119 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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 { MODAL_TRANSITIONS_STEPS_ENUM } from "../Modal";
-import "./ModalMobileBottom.css";
-var HALF_DIVIDER = 2;
-var cn = cnCreate('mfui-modal-mobile-bottom');
-var ModalMobileBottom = function ModalMobileBottom(_a) {
-  var _b = _a.classes,
-    _c = _b === void 0 ? {} : _b,
-    containerWrap = _c.containerWrap,
-    containerInner = _c.containerInner,
-    restClasses = __rest(_c, ["containerWrap", "containerInner"]),
-    isSwipeDisabled = _a.isSwipeDisabled,
-    children = _a.children,
-    onChangeTransitionStep = _a.onChangeTransitionStep,
-    onChangeContainerWrapTransform = _a.onChangeContainerWrapTransform,
-    restProps = __rest(_a, ["classes", "isSwipeDisabled", "children", "onChangeTransitionStep", "onChangeContainerWrapTransform"]);
-  var _restProps$refs = restProps.refs,
-    containerWrapRef = _restProps$refs.containerWrapRef,
-    containerInnerRef = _restProps$refs.containerInnerRef,
-    scrollBarScrollableRef = _restProps$refs.scrollBarScrollableRef,
-    isTransitionMoveStep = restProps.isTransitionMoveStep,
-    isTransitionEndStep = restProps.isTransitionEndStep;
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    initialTouchPosition = _React$useState2[0],
-    setInitialTouchPosition = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    initialContainerWrapHeight = _React$useState4[0],
-    setInitialContainerWrapHeight = _React$useState4[1];
-  var animationFrameId = React.useRef(0);
-  var offsetHeightCenter = React.useMemo(function () {
-    var _a;
-    return initialTouchPosition && containerInnerRef.current ? ((_a = containerInnerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) / HALF_DIVIDER : 0;
-  }, [containerInnerRef, initialTouchPosition]);
-  var handleWindowTouchMove = React.useCallback(function (e) {
-    if (animationFrameId) {
-      window.cancelAnimationFrame(animationFrameId.current);
-    }
-    var containerWrapNode = containerWrapRef.current;
-    var scrollableNode = scrollBarScrollableRef.current;
-    animationFrameId.current = window.requestAnimationFrame(function () {
-      onChangeTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP);
-      var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
-      if (!containerWrapNode || !isScrollTop) {
-        return;
-      }
-      if (!initialContainerWrapHeight) {
-        setInitialContainerWrapHeight(containerWrapNode.clientHeight);
-      }
-      if (!initialTouchPosition) {
-        setInitialTouchPosition(e.touches[0].clientY);
-        return;
-      }
-      var positionsDiff = initialTouchPosition - e.touches[0].clientY;
-      var positionsDiffAbs = Math.abs(positionsDiff);
-      var isMoveToTop = positionsDiff > 0;
-      var newContainerWrapHeight = initialContainerWrapHeight - positionsDiffAbs;
-      var isMoveAboveInitialContainer = isMoveToTop && newContainerWrapHeight < containerWrapNode.offsetHeight;
-      if (isMoveAboveInitialContainer) {
-        return;
-      }
-      onChangeContainerWrapTransform("translateY(".concat(positionsDiffAbs, "px)"));
-      animationFrameId.current = 0;
-    });
-  }, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
-  var handleWindowTouchEnd = React.useCallback(function (e) {
-    var _a;
-    var containerWrapNode = containerWrapRef.current;
-    var scrollableNode = scrollBarScrollableRef.current;
-    var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
-    if (!containerWrapNode || !isTransitionMoveStep || !isScrollTop) {
-      return;
-    }
-    window.cancelAnimationFrame(animationFrameId.current);
-    var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
-    var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
-    setInitialTouchPosition(null);
-    onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
-    onChangeTransitionStep(isMoreHalfClosed ? MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
-  }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
-  React.useEffect(function () {
-    if (isSwipeDisabled) {
-      return undefined;
-    }
-    window.addEventListener('touchmove', handleWindowTouchMove);
-    window.addEventListener('touchend', handleWindowTouchEnd);
-    return function () {
-      window.removeEventListener('touchmove', handleWindowTouchMove);
-      window.removeEventListener('touchend', handleWindowTouchEnd);
-    };
-  }, [handleWindowTouchEnd, handleWindowTouchMove, isSwipeDisabled]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn()
-  }, /*#__PURE__*/React.createElement(ModalContent, _extends({}, restProps, {
-    classes: _extends(_extends({}, restClasses), {
-      containerWrap: cn('container-wrap', {
-        move: isTransitionMoveStep,
-        'transition-end': isTransitionEndStep
-      }, containerWrap),
-      containerInner: cn('container-inner', containerInner)
-    })
-  }), children));
-};
-export default ModalMobileBottom;

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

@@ -1 +0,0 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-mobile-full-screen{width:100%}.mfui-modal-mobile-full-screen__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-modal-mobile-full-screen__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-modal-mobile-full-screen__scroll-root{height:100%}.mfui-modal-mobile-full-screen__scroll-init{height:100vh}.mfui-modal-mobile-full-screen__scroll-content{height:100%}.mfui-modal-mobile-full-screen__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-modal-mobile-full-screen__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-modal-mobile-full-screen__container-wrap{height:100%}

package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type ModalContextPropsType from '../types';
-import './ModalMobileFullScreen.scss';
-interface IModalMobileFullScreenProps extends ModalContextPropsType {
-    children?: React.ReactNode;
-}
-declare const ModalMobileFullScreen: React.FC<IModalMobileFullScreenProps>;
-export default ModalMobileFullScreen;

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

@@ -1,56 +0,0 @@
-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, {
-    containerWrapHeight: undefined,
-    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

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

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

@@ -1,83 +0,0 @@
-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',
-    headerBackButton: 'headerBackButton-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
-    },
-    scrollBarScrollableRef: {
-      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

@@ -1,28 +0,0 @@
-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;
-        scrollBarScrollableRef: React.MutableRefObject<HTMLElement | null>;
-    };
-    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

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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 +0,0 @@
-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;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-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_size_middle{height:40px;padding:4px;width:40px}.mfui-nav-arrow_size_large{height:64px;padding:12px;width:64px}.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,33 +0,0 @@
-import * as React from 'react';
-import './NavArrow.scss';
-export declare const Theme: {
-    readonly PURPLE: "purple";
-    readonly DARK: "dark";
-    readonly WHITE: "white";
-};
-export declare const View: {
-    readonly PREV: "prev";
-    readonly NEXT: "next";
-};
-export declare const Size: {
-    readonly MIDDLE: "middle";
-    readonly LARGE: "large";
-};
-export type ThemeType = (typeof Theme)[keyof typeof Theme];
-type ViewType = (typeof View)[keyof typeof View];
-type SizeType = (typeof Size)[keyof typeof Size];
-export interface INavArrowProps {
-    dataAttrs?: {
-        root?: Record<string, string>;
-        prevArrow?: Record<string, string>;
-        nextArrow?: Record<string, string>;
-    };
-    className?: string;
-    theme?: ThemeType;
-    view?: ViewType;
-    size?: SizeType;
-    disabled?: boolean;
-    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
-}
-declare const NavArrow: React.FC<INavArrowProps>;
-export default NavArrow;

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

@@ -1,98 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import "./NavArrow.css";
-var ArrowLeft24 = function ArrowLeft24(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
-  }));
-};
-var ArrowRight24 = function ArrowRight24(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
-  }));
-};
-var ArrowLeft32 = function ArrowLeft32(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 40 40"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
-  }));
-};
-var ArrowRight32 = function ArrowRight32(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 40 40"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
-  }));
-};
-export var Theme = {
-  PURPLE: 'purple',
-  DARK: 'dark',
-  WHITE: 'white'
-};
-export var View = {
-  PREV: 'prev',
-  NEXT: 'next'
-};
-export var Size = {
-  MIDDLE: 'middle',
-  LARGE: 'large'
-};
-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$size = _ref.size,
-    size = _ref$size === void 0 ? Size.MIDDLE : _ref$size,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onClick = _ref.onClick;
-  var getIcons = function getIcons() {
-    switch (size) {
-      case Size.LARGE:
-        return {
-          ArrowLeft: ArrowLeft32,
-          ArrowRight: ArrowRight32
-        };
-      default:
-        return {
-          ArrowLeft: ArrowLeft24,
-          ArrowRight: ArrowRight24
-        };
-    }
-  };
-  var renderIcon = function renderIcon() {
-    var _getIcons = getIcons(),
-      ArrowLeft = _getIcons.ArrowLeft,
-      ArrowRight = _getIcons.ArrowRight;
-    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')
-        }));
-    }
-  };
-  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    type: "button",
-    className: cn({
-      theme: theme,
-      size: size
-    }, className),
-    onClick: onClick,
-    disabled: disabled
-  }), renderIcon());
-};
-export default NavArrow;

package/dist/es/components/Notification/Notification.css

@@ -1 +0,0 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-notification{background-color:var(--base);border-radius:12px;padding:20px 12px 20px 32px;position:relative}@media screen and (max-width:767px){.mfui-notification{padding:16px 12px}}.mfui-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-notification__title{color:var(--content);display:block;font-size:15px;font-weight:500;line-height:18px;margin-bottom:4px}@media screen and (min-width:1280px){.mfui-notification__title{line-height:24px}}.mfui-notification__title_close-padding{padding-right:20px}.mfui-notification__text{color:var(--content);font-size:12px;line-height:18px;margin:0;max-width:100%;position:relative;-webkit-transition:height .3s;transition:height .3s}@media screen and (min-width:768px){.mfui-notification__text{font-size:15px;line-height:24px}}.mfui-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-notification__full-text,.mfui-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-notification__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:center;align-self:center;margin-left:12px;overflow:hidden;width:100%}.mfui-notification__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;height:40px;justify-content:center;min-width:40px;width:40px}.mfui-notification__attention-icon,.mfui-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-notification__text-container{margin-right:72px}}.mfui-notification__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-notification__bottom_has-button{margin-top:12px}.mfui-notification__link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brandGreen);cursor:pointer}.mfui-notification__button+.mfui-notification__link{margin-left:16px}.mfui-notification__collapse-button,.mfui-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-notification__collapse-button,.mfui-notification__link{font-size:12px;line-height:14px}}.mfui-notification__collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:transparent;border:none;color:var(--brandGreen);cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;text-align:right}@media screen and (max-width:767px){.mfui-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-notification__collapse-arrow,.mfui-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-notification__link-arrow{margin-bottom:-4px}}.mfui-notification__bottom-block+.mfui-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-notification__bottom-block+.mfui-notification__collapse-button{margin-left:16px}}.mfui-notification__collapse_hidden{visibility:hidden}.mfui-notification__close{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:8px;top:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:none;border-radius:50%;cursor:pointer;height:24px;justify-content:center;padding:0;width:24px}@media screen and (min-width:768px){.mfui-notification__close{height:32px;right:12px;top:12px;width:32px}}.mfui-notification__close:hover{background-color:var(--spbSky1)}.mfui-notification__close:active{background-color:var(--spbSky2)}.mfui-notification__close:after{background-color:var(--content);border-radius:50%;content:"";height:100%;opacity:.05;position:absolute;width:100%}.mfui-notification__close-icon{height:10px;opacity:.5;width:10px;fill:var(--content)}.mfui-notification_type_error .mfui-notification__icon-container{background-color:var(--fury20)}.mfui-notification_type_error .mfui-notification__icon-container svg{fill:var(--fury)}.mfui-notification_type_success .mfui-notification__icon-container{background-color:var(--brandGreen20)}.mfui-notification_type_success .mfui-notification__icon-container svg{fill:var(--brandGreen)}.mfui-notification_type_warning .mfui-notification__icon-container{background-color:var(--137C20)}.mfui-notification_type_warning .mfui-notification__icon-container svg{fill:var(--137C)}.mfui-notification_type_info .mfui-notification__icon-container{background-color:var(--sky20)}.mfui-notification_type_info .mfui-notification__icon-container svg{fill:var(--sky)}.mfui-notification_colored .mfui-notification__icon-container{background-color:var(--base)}.mfui-notification_colored.mfui-notification_type_info{background-color:var(--sky20)}.mfui-notification_colored.mfui-notification_type_warning{background-color:var(--137C20)}.mfui-notification_colored.mfui-notification_type_success{background-color:var(--brandGreen20)}.mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_info .mfui-notification__title,.mfui-notification_colored.mfui-notification_type_success .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_success .mfui-notification__title,.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__title{color:var(--content)}.mfui-notification_colored.mfui-notification_type_error{background-color:var(--fury80)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__collapse-button,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__title{color:var(--stcWhite)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__collapse-arrow,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link-arrow{fill:var(--stcWhite)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container{background-color:var(--stcWhite20)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container svg{fill:var(--stcWhite)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__close:not(:hover){background-color:var(--stcWhite20)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__close:not(:hover) .mfui-notification__close-icon{opacity:1;fill:var(--stcWhite)}

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

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import './Notification.scss';
-declare const NotificationTypes: {
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly ERROR: "error";
-    readonly INFO: "info";
-};
-type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
-declare const ShadowTypes: {
-    readonly ZERO: "zero";
-    readonly HOVER: "hover";
-    readonly PRESSED: "pressed";
-    readonly DEFAULT: "default";
-};
-type ShadowType = (typeof ShadowTypes)[keyof typeof ShadowTypes];
-export interface INotificationProps {
-    /** Дополнительный класс корневого элемента */
-    className?: string;
-    /** Дополнительные классы для корневого и внутренних элементов */
-    classes?: {
-        root?: string;
-        container?: string;
-        content?: string;
-        link?: string;
-    };
-    /** Тип отображения */
-    type?: NotificationType;
-    /** Уровень тени */
-    shadowLevel?: ShadowType;
-    /** Наличие фоновой заливки у уведомления */
-    isColored?: boolean;
-    /** Наличие кнопки-крестика "Закрыть" */
-    hasCloseButton?: boolean;
-    /** Заголовок */
-    title?: string;
-    /** Короткий текст, отображаемый при закрытом расхлопе */
-    shortText?: string;
-    /** заголовок закрытого расхлопа */
-    closeCollapseTitle?: string;
-    /** заголовок открытого расхлопа */
-    openCollapseTitle?: string;
-    /** Управление состоянием открыт/закрыт расхлопа "Подробнее" */
-    isCollapseOpened?: boolean;
-    /** Текст кнопки */
-    buttonText?: string;
-    /** Лоадер кнопки */
-    buttonLoader?: boolean;
-    /** Заблокировать кнопку */
-    buttonDisable?: boolean;
-    /** Текст ссылки внизу уведомления */
-    link?: string;
-    /** rel - аргумент тега <a> для ссылки */
-    rel?: string;
-    /** href - аргумент тега <a> для ссылки */
-    href?: string;
-    /** target - аргумент тега <a> */
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    /** Иконка */
-    icon?: JSX.Element;
-    /** Дополнительные data атрибуты к внутренним элементам */
-    dataAttrs?: {
-        root?: Record<string, string>;
-        title?: Record<string, string>;
-        text?: Record<string, string>;
-        link?: Record<string, string>;
-        close?: Record<string, string>;
-        button?: Record<string, string>;
-        collapseButton?: Record<string, string>;
-    };
-    /** Ссылка на элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
-    children?: React.ReactNode;
-    /** Обработчик на закрытие */
-    onClose?: () => void;
-    /** Обработчик клика по ссылке */
-    onLinkClick?: () => void;
-    /** Обработчик клика по кнопке */
-    onButtonClick?: () => void;
-    /** Обработчик клика по кнопке расхлопа */
-    onCollapseButtonClick?: (value: boolean) => void;
-}
-export declare const testIdPrefix = "Notification";
-declare const Notification: React.FC<INotificationProps>;
-export default Notification;