@geneui/components 2.11.1

package/Menu.js

@@ -0,0 +1,277 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { s as screenTypes } from './configs-91c86664.js';
+import { c as classnames } from './index-6ff23041.js';
+import Option from './Option.js';
+import CustomScrollbar from './Scrollbar.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './index-ac59cb10.js';
+import './GeneUIProvider.js';
+import './Icon.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.11.0\"] .menu-items-wrapper{min-width:18rem;overflow:hidden;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .menu-items-wrapper>ul.reversed>li:first-child{order:0}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper>ul.reversed>li:nth-child(2){order:2}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper>ul.reversed>li:nth-child(3){order:1}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper>ul>li{display:flex;flex-direction:column;flex-shrink:0;width:100%}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .divider.type-horizontal{margin:0;width:100%}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .divider.type-horizontal.full-width{margin:1rem 0;width:100%}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .popover-positioner.mobile-view .menu-items-wrapper .menu-item{padding:1.4rem 2rem}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-item.highlighted{color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-item:hover{background:rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-item.act-direction:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-item .icon{margin:-.2rem 0}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-item .icon.menu-custom-icon{margin-inline-end:1rem}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-item.header{flex-direction:row-reverse}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-text{flex:auto}[data-gene-ui-version=\"2.11.0\"] .menu-items-wrapper .menu-text .small-text{font-size:1.2rem;line-height:1.4rem;opacity:.7}";
+styleInject(css_248z);
+
+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 [prevHeader, setPrevHeader] = useState([]);
+  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);
+    if (isHeader) {
+      setIndexStack(indexStack.slice(0, -1));
+      setPrevHeader(prev => prev.slice(0, -1));
+      !(indexStack.length - 1) && setHeader(null);
+      onBack && onBack(e, item);
+      setHeader(prevHeader[prevHeader.length - 2]);
+    } else {
+      const {
+        onClick,
+        children
+      } = item;
+      if (children) {
+        setIndexStack([...indexStack, index]);
+        setHeader(item);
+        setPrevHeader(prev => [...prev, 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,
+      titlePosition: "center"
+    }, 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: propTypesExports.arrayOf(propTypesExports.shape({
+    component: propTypesExports.node,
+    maxHeight: propTypesExports.number,
+    ...Option.propTypes
+  })),
+  /**
+   * Fires event when user click on header elements;
+   * (event: Event, item: Object) => void
+   */
+  onBack: propTypesExports.func,
+  /**
+   * Fires event when user click on option elements;
+   * (event: Event, item: Object) => void
+   */
+  onNext: propTypesExports.func,
+  /**
+   * Fires event when user click on elements;
+   * (event: Event, item: Object) => void
+   */
+  onSelect: propTypesExports.func,
+  /**
+   * Controls screen type
+   */
+  screenType: propTypesExports.oneOf(screenTypes),
+  /**
+   * auto scroll to activeElement
+   */
+  scrollToActiveElement: propTypesExports.bool,
+  /**
+   * Initial selected options indexes array
+   */
+  initialIndexStack: propTypesExports.arrayOf(propTypesExports.string)
+};
+
+export { Menu as default };

package/MobileNavigation.js

@@ -0,0 +1,95 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import Badge from './Badge.js';
+import Icon from './Icon.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './configs.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .mob-navigation-bar>ul{display:table;table-layout:fixed;width:100%}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .mob-navigation-bar>ul>li .badge{margin:0 auto;position:absolute;top:.8rem;width:5.2rem}[data-gene-ui-version=\"2.11.0\"] .mob-navigation-bar>ul>li .badge-right .badge{right:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.11.0\"] .mob-navigation-bar>ul>li .badge-left .badge{left:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .mob-navigation-bar>ul>li.active{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .mob-navigation-bar>ul>li.active:before{transform:translateY(0)}[data-gene-ui-version=\"2.11.0\"] .mob-navigation-bar>ul>li.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .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: propTypesExports.arrayOf(propTypesExports.shape({
+    /**
+     * Title for navigation item
+     */
+    title: propTypesExports.string,
+    /**
+     *
+     */
+    slug: propTypesExports.string,
+    /**
+     * Icon for navigation item
+     */
+    icon: propTypesExports.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: propTypesExports.shape({
+      count: propTypesExports.number,
+      maxCount: propTypesExports.number,
+      position: propTypesExports.oneOf(['left', 'right'])
+    })
+  }).isRequired),
+  /**
+   * Initially selected item
+   */
+  activeSlug: propTypesExports.string,
+  /**
+   * CSS class name for element
+   */
+  className: propTypesExports.string,
+  /**
+   * Fires event when user click on one of the items
+   * (item: Object) => void
+   */
+  onChange: propTypesExports.func
+};
+
+export { MobileNavigation as default };

package/MobilePopup.js

@@ -0,0 +1,180 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useCallback, forwardRef } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { n as noop } from './index-ac59cb10.js';
+import Icon from './Icon.js';
+import Portal from './Portal.js';
+import './dateValidation-67caec66.js';
+import 'react-dom';
+import './configs-91c86664.js';
+import { u as useClickOutside } from './useClickOutside-5183e396.js';
+import { P as Popover } from './index-a4635754.js';
+import Menu from './Menu.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './globalStyling-9c60a159.js';
+import './GeneUIProvider.js';
+import './_commonjsHelpers-24198af3.js';
+import './Popover-f4d1cac0.js';
+import './index-122432cd.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './Scrollbar.js';
+import './guid-8ddf77b3.js';
+import './Option.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tooltip.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.11.0\"] .m-popup-holder{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:400}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .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.11.0\"] .m-popup-head>li{align-items:center;display:flex;overflow:hidden}[data-gene-ui-version=\"2.11.0\"] .m-popup-head>li:first-child .mp-action .icon{margin-inline-end:1rem}[data-gene-ui-version=\"2.11.0\"] .m-popup-head>li:last-child .mp-action{flex-direction:row-reverse}[data-gene-ui-version=\"2.11.0\"] .m-popup-head>li:last-child .mp-action .icon{margin-inline-start:1rem}[data-gene-ui-version=\"2.11.0\"] .m-popup-head>li:nth-child(2){padding:0 1rem}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .m-popup-head>li:nth-child(3){justify-content:flex-end}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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: propTypesExports.func,
+  /**
+   * Fires event when user clicks on left action button
+   * (event: SyntheticEvent) => void
+   */
+  leftActionClick: propTypesExports.func,
+  /**
+   * Container for portal
+   */
+  portalContainer: propTypesExports.any,
+  /**
+   * Props for right action
+   *  iconType: String
+   *  text: String
+   *  menuOptions: Option atom's props
+   */
+  rightAction: propTypesExports.oneOfType([propTypesExports.any, propTypesExports.shape({
+    iconType: propTypesExports.string,
+    text: propTypesExports.string,
+    menuOptions: propTypesExports.arrayOf(propTypesExports.object)
+  })]),
+  /**
+   * Props for left action
+   *  iconType: String
+   *  text: String
+   *  menuOptions: Option atom's props
+   */
+  leftAction: propTypesExports.oneOfType([propTypesExports.any, propTypesExports.shape({
+    iconType: propTypesExports.string,
+    text: propTypesExports.string,
+    menuOptions: propTypesExports.arrayOf(propTypesExports.object)
+  })]),
+  /**
+   * Additional classname
+   */
+  className: propTypesExports.string,
+  /**
+   * Displays popup if [true]
+   */
+  isOpened: propTypesExports.bool,
+  /**
+   * Valid React elements for popup body
+   */
+  children: propTypesExports.node,
+  /**
+   * Custom title for popup
+   */
+  title: propTypesExports.string,
+  /*
+   * Backdrop click event handler
+   */
+  onBackdropClick: propTypesExports.func
+};
+MobilePopUp.defaultProps = {
+  onBackdropClick: noop,
+  leftActionClick: noop,
+  rightActionClick: noop
+};
+
+export { MobilePopUp as default };