@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

package/Menu/index.js

@@ -1,281 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { s as screenTypes } from '../configs-00612ce0.js';
-import Option from '../Option/index.js';
-import CustomScrollbar from '../Scrollbar/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../Icon/index.js';
-import '../index-65217440.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-
-const findDeep = function (data, indexStack) {
-  let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  return index < indexStack.length ? findDeep(data[indexStack[index]].children, indexStack, index + 1) : data;
-};
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper{min-width:18rem;overflow:hidden;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper>ul{display:flex;min-width:100%;transform:translateX(calc(var(--translate-x)*-1));transition:transform .3s}html[dir=rtl] .menu-items-wrapper>ul{transform:translateX(var(--translate-x))}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper>ul.reversed>li:first-child{order:0}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper>ul.reversed>li:nth-child(2){order:2}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper>ul.reversed>li:nth-child(3){order:1}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper>ul>li{display:flex;flex-direction:column;flex-shrink:0;width:100%}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .divider.type-horizontal{margin:0;width:100%}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .divider.type-horizontal.full-width{margin:1rem 0;width:100%}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-item{align-items:center;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);padding:1rem 1.4rem;transition:color .3s,background .3s}[data-gene-ui-version=\"2.16.3\"] .popover-positioner.mobile-view .menu-items-wrapper .menu-item{padding:1.4rem 2rem}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-item.highlighted{color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-item:hover{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-item.act-direction:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-item .icon{margin:-.2rem 0}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-item .icon.menu-custom-icon{margin-inline-end:1rem}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-item.header{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-text{flex:auto}[data-gene-ui-version=\"2.16.3\"] .menu-items-wrapper .menu-text .small-text{font-size:1.2rem;line-height:1.4rem;opacity:.7}";
-styleInject(css_248z);
-
-const findHeaderByIndexStack = (data, indexStack) => {
-  var _data$currentIndex;
-  if (!data || !Array.isArray(data) || data.length === 0) {
-    return null;
-  }
-  const [currentIndex, ...nextIndexStack] = indexStack;
-  const nextData = (_data$currentIndex = data[currentIndex]) === null || _data$currentIndex === void 0 ? void 0 : _data$currentIndex.children;
-  return indexStack.length === 1 ? data[currentIndex] : findHeaderByIndexStack(nextData, nextIndexStack);
-};
-const Menu = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _activeElementRef$cur2;
-  let {
-    data,
-    onBack,
-    toggle,
-    onNext,
-    onSelect,
-    screenType,
-    scrollToActiveElement,
-    initialIndexStack,
-    ...restProps
-  } = _ref;
-  const initialHeader = useMemo(() => initialIndexStack === null || initialIndexStack === void 0 ? void 0 : initialIndexStack.reduce((headerItem, stackIndex, index) => {
-    const nextItem = headerItem ? headerItem[stackIndex] : data[stackIndex];
-    const isLast = index === initialIndexStack.length - 1;
-    return isLast ? nextItem : nextItem.children;
-  }, null), [initialIndexStack, data]);
-  const [header, setHeader] = useState(initialHeader);
-  const [indexStack, setIndexStack] = useState(initialIndexStack !== null && initialIndexStack !== void 0 ? initialIndexStack : []);
-  const listRef = useRef(null);
-  const activeElementRef = useRef(null);
-  const [scrollTopGap, setScrollTopGap] = useState(0);
-  const layer = useMemo(() => findDeep(data === null || data === void 0 ? void 0 : data.filter(item => item), indexStack), [data, indexStack]);
-
-  // Scroll to active element
-  const [activeElementTop, setActiveElementTop] = useState(null);
-  const [allowScroll, setAllowScroll] = useState(false);
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [scrollWithArrowKey, setScrollWithArrowKey] = useState(false);
-  useEffect(() => {
-    if (allowScroll || scrollWithArrowKey) {
-      var _activeElementRef$cur;
-      setActiveElementTop((activeElementRef === null || activeElementRef === void 0 ? void 0 : (_activeElementRef$cur = activeElementRef.current) === null || _activeElementRef$cur === void 0 ? void 0 : _activeElementRef$cur.offsetTop) - scrollTopGap);
-      setAllowScroll(false);
-      setScrollWithArrowKey(false);
-    }
-  }, [allowScroll, indexStack, activeElementRef === null || activeElementRef === void 0 ? void 0 : (_activeElementRef$cur2 = activeElementRef.current) === null || _activeElementRef$cur2 === void 0 ? void 0 : _activeElementRef$cur2.offsetTop, scrollTopGap, scrollWithArrowKey]);
-  useEffect(() => {
-    var _listRef$current;
-    if (!isScrolled && (listRef === null || listRef === void 0 ? void 0 : (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.container.firstChild.children.length) === layer.length) {
-      setAllowScroll(true);
-      setIsScrolled(true);
-    }
-  });
-  const handleClick = useCallback((e, item, isHeader, index) => {
-    setWithSmoothScroll(false);
-    setAllowScroll(true);
-    setHoverIndex(null);
-    setScrollTopGap(item !== null && item !== void 0 && item.scrollTopGap ? item === null || item === void 0 ? void 0 : item.scrollTopGap : 0);
-    const newIndexStack = indexStack.slice(0, -1);
-    if (isHeader) {
-      setIndexStack(newIndexStack);
-      onBack && onBack(e, item);
-      setHeader(findHeaderByIndexStack(data, newIndexStack));
-    } else {
-      const {
-        onClick,
-        children
-      } = item;
-      if (children) {
-        setIndexStack([...indexStack, index]);
-        setHeader(item);
-        onNext && onNext(e, item);
-      } else {
-        onSelect && onSelect(e, item);
-      }
-      onClick && onClick(e, item);
-    }
-  }, [indexStack]);
-  const isOtherLayoutExists = layer === null || layer === void 0 ? void 0 : layer.some(item => !!item.children);
-
-  // key accessibility
-  const [hoverIndex, setHoverIndex] = useState(null);
-  const [allowHoverOnActiveElement, setAllowHoverOnActiveElement] = useState(false);
-  const [withHeader, setWithHeader] = useState(false);
-  const [hoveredHeader, setHoveredHeader] = useState(false);
-  const [withSmoothScroll, setWithSmoothScroll] = useState(false);
-  const handleMenuFocus = () => setHoverIndex(0);
-  const keyDownHandler = e => {
-    setWithSmoothScroll(true);
-    switch (e.key) {
-      case 'ArrowDown':
-        {
-          if (hoveredHeader) {
-            setHoverIndex(0);
-            setHoveredHeader(false);
-          } else {
-            setHoverIndex(prev => prev >= layer.length - 1 ? layer.length - 1 : prev + 1);
-            setScrollWithArrowKey(true);
-          }
-          break;
-        }
-      case 'ArrowUp':
-        {
-          if (hoverIndex <= 0) {
-            setHoverIndex(null);
-            if (withHeader) {
-              setHoveredHeader(true);
-            } else {
-              setScrollWithArrowKey(true);
-            }
-          } else {
-            setHoverIndex(prev => prev - 1);
-            setScrollWithArrowKey(true);
-          }
-          break;
-        }
-      case 'Enter':
-        {
-          setAllowHoverOnActiveElement(true);
-          const selectedItem = layer[hoverIndex];
-          if (selectedItem) {
-            handleClick(e, selectedItem, false, hoverIndex);
-            setHoverIndex(0);
-          }
-          if (hoveredHeader) handleClick(e, header, true);
-          break;
-        }
-      case 'Tab':
-      case 'Escape':
-        toggle && toggle(false);
-        break;
-    }
-  };
-  const omitLayoutProps = obj => {
-    let result = obj;
-    if (obj !== null && obj !== void 0 && obj.maxHeight) {
-      const {
-        maxHeight,
-        ...restProps
-      } = result;
-      result = restProps;
-    }
-    if (obj !== null && obj !== void 0 && obj.scrollTopGap) {
-      const {
-        scrollTopGap,
-        ...restProps
-      } = result;
-      result = restProps;
-    }
-    return result;
-  };
-  const contentListMemo = useMemo(() => layer === null || layer === void 0 ? void 0 : layer.map((item, index) => {
-    const itemProps = omitLayoutProps(item);
-    if (allowHoverOnActiveElement && item.active) {
-      setHoverIndex(index);
-      setAllowHoverOnActiveElement(false);
-    }
-    return item.component || /*#__PURE__*/React__default.createElement(Option, _extends({
-      key: "".concat(item.header).concat(index),
-      title: item.title,
-      onClick: e => handleClick(e, item, false, index),
-      forwardMark: !!item.children,
-      screenType: screenType
-    }, scrollToActiveElement && item.active && allowScroll || index === hoverIndex ? {
-      forwardedRef: activeElementRef
-    } : {}, itemProps, {
-      className: classnames({
-        hovered: index === hoverIndex
-      }, itemProps.className)
-    }));
-  }), [indexStack, layer, hoverIndex]);
-  const headerMemo = useMemo(() => {
-    const headerProps = omitLayoutProps(header);
-    setWithHeader(!!headerProps);
-    return header && /*#__PURE__*/React__default.createElement(Option, _extends({
-      onClick: e => handleClick(e, header, true),
-      icon: "bc-icon-arrow-left",
-      border: "bottom",
-      className: classnames({
-        hovered: hoveredHeader
-      }),
-      screenType: screenType
-    }, headerProps, {
-      title: header.title
-    }));
-  }, [header, screenType, header === null || header === void 0 ? void 0 : header.maxHeight, indexStack, hoveredHeader]);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: "menu-items-wrapper popover-top-bottom-padding",
-    onKeyDown: keyDownHandler,
-    onFocus: handleMenuFocus,
-    tabIndex: 0,
-    ref: ref
-  }, restProps), /*#__PURE__*/React__default.createElement("ul", {
-    style: {
-      '--translate-x': "".concat(indexStack.length * 100, "%")
-    }
-  }, indexStack.map((_, index) => /*#__PURE__*/React__default.createElement("li", {
-    key: index
-  })), /*#__PURE__*/React__default.createElement("li", null, headerMemo, header !== null && header !== void 0 && header.maxHeight ? /*#__PURE__*/React__default.createElement(CustomScrollbar, {
-    style: {
-      height: "".concat(header.maxHeight, "px")
-    },
-    ref: listRef,
-    scrollTop: activeElementTop,
-    withSmoothScroll: withSmoothScroll
-  }, contentListMemo) : contentListMemo), isOtherLayoutExists && /*#__PURE__*/React__default.createElement("li", null)));
-});
-Menu.defaultProps = {
-  screenType: screenTypes[0]
-};
-Menu.propTypes = {
-  /**
-   * This is an array where you send menu options, if you send a component,
-   * then your component will be rendered, and if parameters, they will be
-   * used for the atoms/Option component.<br/>
-   * Add <code>maxHeight</code> to data to add scrollbar with maxHeight(px)
-   */
-  data: PropTypes.arrayOf(PropTypes.shape({
-    component: PropTypes.node,
-    maxHeight: PropTypes.number,
-    ...Option.propTypes
-  })),
-  /**
-   * Fires event when user click on header elements;
-   * (event: Event, item: Object) => void
-   */
-  onBack: PropTypes.func,
-  /**
-   * Fires event when user click on option elements;
-   * (event: Event, item: Object) => void
-   */
-  onNext: PropTypes.func,
-  /**
-   * Fires event when user click on elements;
-   * (event: Event, item: Object) => void
-   */
-  onSelect: PropTypes.func,
-  /**
-   * Controls screen type
-   */
-  screenType: PropTypes.oneOf(screenTypes),
-  /**
-   * auto scroll to activeElement
-   */
-  scrollToActiveElement: PropTypes.bool,
-  /**
-   * Initial selected options indexes array
-   */
-  initialIndexStack: PropTypes.arrayOf(PropTypes.string)
-};
-
-export { Menu as default };

package/MobileNavigation/index.js

@@ -1,94 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import Badge from '../Badge/index.js';
-import Icon from '../Icon/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../tslib.es6-f211516f.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar{background:var(--background);border-top:1px solid rgba(var(--background-sc-rgb),.06);bottom:0;font:600 1rem/1.4rem var(--font-family);left:0;position:fixed;text-align:center;width:100%;z-index:200}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul{display:table;table-layout:fixed;width:100%}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li{display:table-cell;overflow:hidden;padding:.8rem 0 .4rem;position:relative;transition:color .3s,opacity .3s}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li .badge{margin:0 auto;position:absolute;top:.8rem;width:5.2rem}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li .badge-right .badge{right:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li .badge-left .badge{left:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li:before{background:var(--hero);border-radius:0 0 .5rem .5rem;content:\"\";display:block;height:.3rem;left:calc(50% - 2.6rem);position:absolute;top:0;transform:translateY(-100%);transition:transform .3s;width:5.2rem}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li.active{color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li.active:before{transform:translateY(0)}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar>ul>li.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .mob-navigation-bar .icon{margin:0 0 .2rem}";
-styleInject(css_248z);
-
-function MobileNavigation(_ref) {
-  let {
-    list,
-    activeSlug,
-    onChange,
-    className,
-    ...restProps
-  } = _ref;
-  const handleClick = event => {
-    const {
-      index
-    } = event.currentTarget.dataset;
-    const item = list[index];
-    onChange && onChange(item);
-  };
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames('mob-navigation-bar', className)
-  }, restProps), /*#__PURE__*/React__default.createElement("ul", null, list.map((item, index) => /*#__PURE__*/React__default.createElement("li", {
-    key: item.slug,
-    "data-index": index,
-    className: classnames({
-      active: item.slug === activeSlug,
-      disabled: item.disabled
-    }),
-    onClick: !item.disabled ? handleClick : null
-  }, item.badge && /*#__PURE__*/React__default.createElement("div", {
-    className: "badge-".concat(item.badge.position || 'right')
-  }, /*#__PURE__*/React__default.createElement(Badge, {
-    size: "default",
-    maxCount: item.badge.maxCount,
-    count: item.badge.count
-  })), /*#__PURE__*/React__default.createElement(Icon, {
-    type: item.icon
-  }), /*#__PURE__*/React__default.createElement("p", {
-    className: "ellipsis-text"
-  }, item.title)))));
-}
-MobileNavigation.propTypes = {
-  /**
-   * Array of menu items data
-   */
-  list: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * Title for navigation item
-     */
-    title: PropTypes.string,
-    /**
-     *
-     */
-    slug: PropTypes.string,
-    /**
-     * Icon for navigation item
-     */
-    icon: PropTypes.string,
-    /**
-     * Notification Badge
-     * count - the value of badge
-     * maxCount - if the count is greater than the max count, the Badge shows maxCount+
-     * position - position of Badge
-     */
-    badge: PropTypes.shape({
-      count: PropTypes.number,
-      maxCount: PropTypes.number,
-      position: PropTypes.oneOf(['left', 'right'])
-    })
-  }).isRequired),
-  /**
-   * Initially selected item
-   */
-  activeSlug: PropTypes.string,
-  /**
-   * CSS class name for element
-   */
-  className: PropTypes.string,
-  /**
-   * Fires event when user click on one of the items
-   * (item: Object) => void
-   */
-  onChange: PropTypes.func
-};
-
-export { MobileNavigation as default };

package/MobilePopup/index.js

@@ -1,182 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useState, useCallback, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { n as noop } from '../index-5f37f281.js';
-import Icon from '../Icon/index.js';
-import Portal from '../Portal/index.js';
-import '../dateValidation-67caec66.js';
-import 'react-dom';
-import '../configs-00612ce0.js';
-import useClickOutside from '../hooks/useClickOutside.js';
-import Popover from '../Popover/index.js';
-import Menu from '../Menu/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../GeneUIProvider/index.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../index-122432cd.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../hooks/useUpdatableRef.js';
-import '../hooks/useForceUpdate.js';
-import '../Scrollbar/index.js';
-import '../guid-8ddf77b3.js';
-import '../Option/index.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../index-65217440.js';
-import '../tslib.es6-f211516f.js';
-
-function ActionMenu(_ref) {
-  let {
-    action,
-    children
-  } = _ref;
-  const [isOpened, setIsOpened] = useState(false);
-  const toggleMenu = useCallback(() => setIsOpened(status => !status), []);
-  const handleOutsideClick = useClickOutside(toggleMenu);
-  if (action.menuOptions) {
-    return /*#__PURE__*/React__default.createElement(Popover, {
-      swipeable: true,
-      align: "end",
-      screenType: "mobile",
-      isOpen: isOpened,
-      onSwipedDown: toggleMenu,
-      contentRef: handleOutsideClick,
-      Content: /*#__PURE__*/React__default.createElement(Menu, {
-        screenType: "mobile",
-        onClick: toggleMenu,
-        data: [...action.menuOptions, {
-          title: 'Cancel',
-          icon: 'bc-icon-clear',
-          border: 'top'
-        }]
-      })
-    }, /*#__PURE__*/React__default.createElement("div", {
-      onClick: toggleMenu
-    }, children));
-  }
-  return children;
-}
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .m-popup-holder{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:400}[data-gene-ui-version=\"2.16.3\"] .m-popup-backdrop{animation:m-popup-backdrop-reveal .3s forwards;background-color:#0003;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}@keyframes m-popup-backdrop-reveal{to{opacity:1}}[data-gene-ui-version=\"2.16.3\"] .m-popup-c{animation:m-popup-c-reveal .4s .25s forwards;background:var(--background);border-radius:1rem 1rem 0 0;bottom:0;box-shadow:0 -1px .2rem 0 #0000000d;display:flex;flex-direction:column;left:0;max-height:calc(100% - 2rem);padding:0 1.6rem;position:absolute;right:0;transform:translate3d(0,100%,0)}@keyframes m-popup-c-reveal{to{transform:translateZ(0)}}[data-gene-ui-version=\"2.16.3\"] .m-popup-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:grid;font-weight:700;grid-template-columns:1fr auto 1fr;height:5.1rem;position:relative}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li{align-items:center;display:flex;overflow:hidden}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li:first-child .mp-action .icon{margin-inline-end:1rem}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li:last-child .mp-action{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li:last-child .mp-action .icon{margin-inline-start:1rem}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li:nth-child(2){padding:0 1rem}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li:not(:nth-child(2)){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li:nth-child(3){justify-content:flex-end}[data-gene-ui-version=\"2.16.3\"] .m-popup-head>li .mp-action{align-items:center;color:var(--hero);cursor:pointer;display:flex;font:600 1.4rem/3.6rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.16.3\"] .m-popup-content{-webkit-overflow-scrolling:auto;flex:auto;margin:0 -1.6rem;overflow-y:auto;padding:0 1.6rem env(safe-area-inset-bottom);transition:padding .4s;width:calc(100% + 3.2rem)}";
-styleInject(css_248z);
-
-const MobilePopUp = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    onBackdropClick,
-    rightActionClick,
-    leftActionClick,
-    portalContainer,
-    rightAction,
-    leftAction,
-    className,
-    isOpened,
-    children,
-    title,
-    ...restProps
-  } = _ref;
-  const generateAction = (action, onClick) => {
-    if (action) {
-      if ( /*#__PURE__*/React__default.isValidElement(action)) {
-        return action;
-      }
-      return /*#__PURE__*/React__default.createElement(ActionMenu, {
-        action: action
-      }, /*#__PURE__*/React__default.createElement("button", {
-        className: "mp-action",
-        onClick: onClick
-      }, action.iconType && /*#__PURE__*/React__default.createElement(Icon, {
-        type: action.iconType
-      }), action.text && /*#__PURE__*/React__default.createElement("p", {
-        className: "ellipsis-text"
-      }, action.text)));
-    }
-  };
-  const handleBackdropClick = useCallback(event => {
-    onBackdropClick(event, true);
-  }, [onBackdropClick]);
-  return /*#__PURE__*/React__default.createElement(Portal, {
-    isOpen: isOpened,
-    container: portalContainer
-  }, /*#__PURE__*/React__default.createElement("div", _extends({}, restProps, {
-    className: classnames('m-popup-holder', className)
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "m-popup-backdrop",
-    onClick: handleBackdropClick
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "m-popup-c"
-  }, /*#__PURE__*/React__default.createElement("ul", {
-    className: "m-popup-head"
-  }, /*#__PURE__*/React__default.createElement("li", null, generateAction(leftAction, leftActionClick)), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("div", {
-    className: "ellipsis-text"
-  }, title)), /*#__PURE__*/React__default.createElement("li", null, generateAction(rightAction, rightActionClick))), /*#__PURE__*/React__default.createElement("div", {
-    className: "m-popup-content",
-    ref: ref
-  }, children))));
-});
-MobilePopUp.propTypes = {
-  /**
-   * Fires event when user clicks on right action button
-   * (event: SyntheticEvent) => void
-   */
-  rightActionClick: PropTypes.func,
-  /**
-   * Fires event when user clicks on left action button
-   * (event: SyntheticEvent) => void
-   */
-  leftActionClick: PropTypes.func,
-  /**
-   * Container for portal
-   */
-  portalContainer: PropTypes.any,
-  /**
-   * Props for right action
-   *  iconType: String
-   *  text: String
-   *  menuOptions: Option atom's props
-   */
-  rightAction: PropTypes.oneOfType([PropTypes.any, PropTypes.shape({
-    iconType: PropTypes.string,
-    text: PropTypes.string,
-    menuOptions: PropTypes.arrayOf(PropTypes.object)
-  })]),
-  /**
-   * Props for left action
-   *  iconType: String
-   *  text: String
-   *  menuOptions: Option atom's props
-   */
-  leftAction: PropTypes.oneOfType([PropTypes.any, PropTypes.shape({
-    iconType: PropTypes.string,
-    text: PropTypes.string,
-    menuOptions: PropTypes.arrayOf(PropTypes.object)
-  })]),
-  /**
-   * Additional classname
-   */
-  className: PropTypes.string,
-  /**
-   * Displays popup if [true]
-   */
-  isOpened: PropTypes.bool,
-  /**
-   * Valid React elements for popup body
-   */
-  children: PropTypes.node,
-  /**
-   * Custom title for popup
-   */
-  title: PropTypes.string,
-  /*
-   * Backdrop click event handler
-   */
-  onBackdropClick: PropTypes.func
-};
-MobilePopUp.defaultProps = {
-  onBackdropClick: noop,
-  leftActionClick: noop,
-  rightActionClick: noop
-};
-
-export { MobilePopUp as default };