diginet-core-ui 1.4.39 → 1.4.40

package/components/popover/index.js

@@ -1,663 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { bgColor, borderBottom, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, shadowLarge } from "../../styles/general";
-import { makeStyles, useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp, isMobile, refType as ref } from "../../utils";
-const eventMap = new Map([['click', ['click']], ['hover', ['mouseenter', 'mouseleave']], ['focus', ['focus', 'blur']]]);
-const getArrowPosition = (anchorOrigin, transformOrigin, translate) => {
-  if (anchorOrigin.horizontal === 'right' && transformOrigin.horizontal === 'left') {
-    translate.left = -6;
-    translate.transform = 'rotateZ(270deg)';
-    return 'left';
-  } else if (anchorOrigin.horizontal === 'left' && transformOrigin.horizontal === 'right') {
-    translate.left = 6;
-    translate.transform = 'rotateZ(90deg)';
-    return 'right';
-  } else if (transformOrigin.vertical === 'bottom') {
-    translate.top = 6;
-    // translate.transform = 'rotateZ(180deg)';
-    return 'bottom';
-  } else {
-    translate.top = -6;
-    return 'top';
-  }
-};
-const calPosition = (position, originBounding) => {
-  const {
-    width,
-    height
-  } = originBounding;
-  switch (position) {
-    case 'bottom':
-    case 'right':
-      {
-        return [height, width];
-      }
-    case 'center':
-      {
-        return [height / 2, width / 2];
-      }
-    default:
-      return [0, 0];
-  }
-};
-const getDirectionPopover = direction => {
-  switch (direction) {
-    case 'center':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'center'
-        }
-      };
-    case 'top':
-      return {
-        anchorOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        }
-      };
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-    default:
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-  }
-};
-const Popover = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors,
-    spacing,
-    zIndex: zIndexTheme
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Popover'
-  });
-  const {
-    action = {},
-    anchor: anchorProp,
-    anchorOrigin: anchorOriginProp,
-    arrow,
-    bgColor: bgColorProp,
-    children,
-    className,
-    clickOutsideToClose,
-    direction,
-    fullScreen,
-    height,
-    marginThreshold = spacing(4),
-    onClose,
-    onOpen,
-    open,
-    pressESCToClose,
-    style,
-    transformOrigin: transformOriginProp,
-    trigger: triggerProp,
-    width,
-    zIndex = zIndexTheme(1)
-  } = props;
-  let anchor = anchorProp;
-  let anchorOrigin = anchorOriginProp;
-  let transformOrigin = transformOriginProp;
-  let trigger = triggerProp;
-  if (isMobile.any() && triggerProp === 'hover') trigger = 'click';
-  const ref = useRef(null);
-  const arrowRef = useRef(null);
-  // const overflow = useRef(null);
-  const anchorRef = useRef(anchor);
-  const [openState, setOpenState] = useState(open);
-  const [element, setElement] = useState(null);
-  const arrowSize = arrow ? 6 : 0;
-  const bgColor = getProp(colors, bgColorProp, bgColorProp);
-  const useStyles = makeStyles({
-    noScroll: {
-      key: props => `DGN-Popover-${props}`,
-      overflow: 'hidden',
-      paddingRight: `${Math.abs(window.innerWidth - document.documentElement.clientWidth) +
-      // scrollbar width
-      parseInt(getComputedStyle(document.body).getPropertyValue('padding-right')) // body padding-right
-      }px`
-    }
-  });
-  const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
-  const _PopoverContainerCSS = PopoverContainerCSS(bgColor, width, height, theme);
-  const _PopoverArrowCSS = PopoverArrowCSS(bgColor, arrowSize);
-  if (direction) {
-    const directionObject = getDirectionPopover(direction);
-    anchorOrigin = directionObject.anchorOrigin;
-    transformOrigin = directionObject.transformOrigin;
-  }
-  const onOpenPopover = () => {
-    if (!openState) setOpenState(true);
-    onOpen && onOpen();
-  };
-  const onClosePopover = (event, reason) => {
-    if (openState) {
-      if (ref.current) ref.current.style.opacity = 0;
-      onClose && onClose(event, reason);
-      setOpenState(false);
-    }
-  };
-  const pressESCHandler = event => {
-    if (event.key === 'Escape') {
-      onClosePopover(event, `key${event.key}`);
-    }
-  };
-  const onClickOutside = event => {
-    var _anchor2, _anchor3, _anchor3$current, _anchor4, _ref$current, _ref$current2, _ref$current2$parentN;
-    if (!ref.current) {
-      document.removeEventListener('click', onClickOutside);
-      return;
-    }
-    const _anchor = ((_anchor2 = anchor) === null || _anchor2 === void 0 ? void 0 : _anchor2.element) || ((_anchor3 = anchor) === null || _anchor3 === void 0 ? void 0 : (_anchor3$current = _anchor3.current) === null || _anchor3$current === void 0 ? void 0 : _anchor3$current.element) || ((_anchor4 = anchor) === null || _anchor4 === void 0 ? void 0 : _anchor4.current) || anchor;
-    if (clickOutsideToClose && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && (!fullScreen || (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2$parentN = _ref$current2.parentNode) !== null && _ref$current2$parentN !== void 0 && _ref$current2$parentN.contains(event === null || event === void 0 ? void 0 : event.target)) && !(_anchor !== null && _anchor !== void 0 && _anchor.contains((event === null || event === void 0 ? void 0 : event.toElement) || (event === null || event === void 0 ? void 0 : event.target))) && openState) {
-      onClosePopover(event, 'clickOutside');
-    }
-  };
-  const updatePositionPopover = (el = null, cb) => {
-    var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect10, _anchorRect11, _anchorRect12, _newDirectionObject, _newDirectionObject$t, _transformOrigin, _newDirectionObject2, _newDirectionObject2$, _transformOrigin2;
-    if (el instanceof Element) setElement(el);
-    if (!ref.current) {
-      window.removeEventListener('resize', updatePositionPopover);
-      return;
-    }
-    let top = 0,
-      left = 0,
-      vertical = 0,
-      verticalCenter = 0,
-      horizontal = 0,
-      horizontalCenter = 0,
-      arrowPosition = {
-        display: 'block'
-      },
-      translate = {
-        left: 0,
-        top: 0
-      },
-      anchorRect = null,
-      aPosition = '',
-      newDirectionObject = null;
-    if (transformOrigin === 'center') {
-      transformOrigin = {
-        vertical: 'center',
-        horizontal: 'center'
-      };
-    }
-    if (element || anchor) {
-      if (element) anchor = element;else if (anchor && !(anchor instanceof Element)) {
-        var _anchor5, _anchor$current;
-        anchor = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
-      }
-      if (!document.body.contains(anchor)) return;
-      if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
-        aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
-      }
-      anchorRect = anchor.getBoundingClientRect();
-      vertical = anchorRect.y + calPosition(anchorOrigin.vertical, anchorRect)[0] - translate.top;
-      verticalCenter = anchorRect.y + calPosition('center', anchorRect)[0];
-      horizontal = anchorRect.x + calPosition(anchorOrigin.horizontal, anchorRect)[1] - translate.left;
-      horizontalCenter = anchorRect.x + calPosition('center', anchorRect)[1];
-    }
-
-    // Calculate element positioning
-    const containerWindow = {
-      width: ((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) || 0,
-      height: ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.innerHeight) || 0
-    };
-    const popoverHeight = ref.current.offsetHeight;
-    const popoverWidth = ref.current.offsetWidth;
-    switch (transformOrigin.vertical) {
-      case 'center':
-        top = vertical - popoverHeight / 2;
-        break;
-      case 'bottom':
-        top = vertical - popoverHeight;
-        break;
-      default:
-        top = vertical;
-        break;
-    }
-    switch (transformOrigin.horizontal) {
-      case 'center':
-        left = horizontal - popoverWidth / 2;
-        break;
-      case 'right':
-        left = horizontal - popoverWidth;
-        break;
-      default:
-        left = horizontal;
-        break;
-    }
-
-    // Variables for check if needs shifting
-    const heightThreshold = containerWindow.height - marginThreshold;
-    const widthThreshold = containerWindow.width - marginThreshold;
-    const bottomOfAnchor = top + ((_anchor6 = anchor) === null || _anchor6 === void 0 ? void 0 : _anchor6.offsetHeight);
-    const topPos = ((_anchorRect = anchorRect) === null || _anchorRect === void 0 ? void 0 : _anchorRect.bottom) + arrowSize;
-    const verticalCenterPos = verticalCenter - popoverHeight / 2;
-    const bottomPos = ((_anchorRect2 = anchorRect) === null || _anchorRect2 === void 0 ? void 0 : _anchorRect2.top) - (popoverHeight + arrowSize);
-    const rightOfAnchor = left + ((_anchor7 = anchor) === null || _anchor7 === void 0 ? void 0 : _anchor7.offsetWidth);
-    const leftPos = ((_anchorRect3 = anchorRect) === null || _anchorRect3 === void 0 ? void 0 : _anchorRect3.right) + arrowSize;
-    const horizontalCenterPos = horizontalCenter - popoverWidth / 2;
-    const rightPos = ((_anchorRect4 = anchorRect) === null || _anchorRect4 === void 0 ? void 0 : _anchorRect4.left) - (popoverWidth + arrowSize);
-
-    // Check if the vertical axis needs shifting
-    if (top < marginThreshold) {
-      if (topPos > heightThreshold) {
-        top = verticalCenterPos;
-        newDirectionObject = getDirectionPopover('center');
-        aPosition = '';
-      } else if (top < 0 || transformOrigin.vertical === 'bottom') {
-        top = topPos;
-        newDirectionObject = getDirectionPopover('bottom');
-        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
-      }
-    } else if (top + popoverHeight > containerWindow.height) {
-      if (bottomPos < bottomOfAnchor && bottomPos < marginThreshold) {
-        top = verticalCenterPos;
-        newDirectionObject = getDirectionPopover('center');
-        aPosition = '';
-      } else {
-        top = bottomPos;
-        newDirectionObject = getDirectionPopover('top');
-        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
-      }
-    }
-
-    // Check if the horizontal axis needs shifting
-    if (left < marginThreshold) {
-      if (leftPos > widthThreshold) {
-        left = horizontalCenterPos;
-        newDirectionObject = getDirectionPopover('center');
-        aPosition = '';
-      } else if (leftPos < 0 || transformOrigin.horizontal === 'right') {
-        left = leftPos;
-        newDirectionObject = getDirectionPopover('right');
-        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
-      }
-    } else if (left + popoverWidth > containerWindow.width) {
-      if (rightPos < rightOfAnchor && rightPos < marginThreshold) {
-        left = horizontalCenterPos;
-        newDirectionObject = getDirectionPopover('center');
-        aPosition = '';
-      } else {
-        left = rightPos;
-        newDirectionObject = getDirectionPopover('left');
-        aPosition = getArrowPosition(newDirectionObject.anchorOrigin, newDirectionObject.transformOrigin, translate);
-      }
-    }
-
-    // Valid mean popover not at top-left, top-right, bottom-left, bottom-right
-    const validVerticalArrow = left >= ((_anchorRect5 = anchorRect) === null || _anchorRect5 === void 0 ? void 0 : _anchorRect5.left) + ((_anchorRect6 = anchorRect) === null || _anchorRect6 === void 0 ? void 0 : _anchorRect6.width) / 2 - popoverWidth && left <= ((_anchorRect7 = anchorRect) === null || _anchorRect7 === void 0 ? void 0 : _anchorRect7.right) - ((_anchorRect8 = anchorRect) === null || _anchorRect8 === void 0 ? void 0 : _anchorRect8.width) / 2 + popoverWidth;
-    const validHorizontalArrow = top >= ((_anchorRect9 = anchorRect) === null || _anchorRect9 === void 0 ? void 0 : _anchorRect9.top) + ((_anchorRect10 = anchorRect) === null || _anchorRect10 === void 0 ? void 0 : _anchorRect10.height) / 2 - popoverHeight && top <= ((_anchorRect11 = anchorRect) === null || _anchorRect11 === void 0 ? void 0 : _anchorRect11.bottom) - ((_anchorRect12 = anchorRect) === null || _anchorRect12 === void 0 ? void 0 : _anchorRect12.height) / 2;
-
-    // Get arrow's position
-    if (arrow && translate) {
-      switch (aPosition) {
-        case 'top':
-          if (validVerticalArrow) {
-            var _anchorRect13, _anchorRect14;
-            arrowPosition.left = ((_anchorRect13 = anchorRect) === null || _anchorRect13 === void 0 ? void 0 : _anchorRect13.width) / 2 + ((_anchorRect14 = anchorRect) === null || _anchorRect14 === void 0 ? void 0 : _anchorRect14.left) - arrowSize + 'px';
-            arrowPosition.top = Math.round(top) - arrowSize + 'px';
-          }
-          break;
-        case 'bottom':
-          if (validVerticalArrow) {
-            var _anchorRect15, _anchorRect16;
-            arrowPosition.left = ((_anchorRect15 = anchorRect) === null || _anchorRect15 === void 0 ? void 0 : _anchorRect15.width) / 2 + ((_anchorRect16 = anchorRect) === null || _anchorRect16 === void 0 ? void 0 : _anchorRect16.left) - arrowSize + 'px';
-            arrowPosition.top = Math.round(top) + popoverHeight + 'px';
-          }
-          break;
-        case 'left':
-          if (validHorizontalArrow) {
-            var _anchorRect17, _anchorRect18;
-            arrowPosition.top = ((_anchorRect17 = anchorRect) === null || _anchorRect17 === void 0 ? void 0 : _anchorRect17.height) / 2 + ((_anchorRect18 = anchorRect) === null || _anchorRect18 === void 0 ? void 0 : _anchorRect18.top) - arrowSize / 2 + 'px';
-            arrowPosition.left = Math.round(left) - 1.5 * arrowSize + 'px';
-          }
-          break;
-        case 'right':
-          if (validHorizontalArrow) {
-            var _anchorRect19, _anchorRect20;
-            arrowPosition.top = ((_anchorRect19 = anchorRect) === null || _anchorRect19 === void 0 ? void 0 : _anchorRect19.height) / 2 + ((_anchorRect20 = anchorRect) === null || _anchorRect20 === void 0 ? void 0 : _anchorRect20.top) - arrowSize / 2 + 'px';
-            arrowPosition.left = Math.round(left) + popoverWidth - arrowSize / 2 + 'px';
-          }
-          break;
-        default:
-          break;
-      }
-      if (arrowRef.current) {
-        Object.assign(arrowRef.current.style, arrowPosition, {
-          transform: translate.transform,
-          display: newDirectionObject === 'center' || !(arrowPosition !== null && arrowPosition !== void 0 && arrowPosition.top) ? 'none' : 'block'
-        });
-      }
-    }
-    if (top < marginThreshold) top = marginThreshold;
-    if (left < marginThreshold) left = marginThreshold;
-    const isVerticalOverFlow = left + popoverWidth > containerWindow.width;
-    ref.current.style.maxHeight = `calc(100% - ${spacing(8) + top}px)`;
-    ref.current.style.top = `${Math.round(top)}px`;
-    if (isVerticalOverFlow) {
-      ref.current.style.left = 0;
-      ref.current.style.margin = 'auto';
-    } else ref.current.style.left = `${Math.round(left)}px`;
-    ref.current.style.transformOrigin = `${((_newDirectionObject = newDirectionObject) === null || _newDirectionObject === void 0 ? void 0 : (_newDirectionObject$t = _newDirectionObject.transformOrigin) === null || _newDirectionObject$t === void 0 ? void 0 : _newDirectionObject$t.horizontal) || ((_transformOrigin = transformOrigin) === null || _transformOrigin === void 0 ? void 0 : _transformOrigin.horizontal) || 'left'} ${((_newDirectionObject2 = newDirectionObject) === null || _newDirectionObject2 === void 0 ? void 0 : (_newDirectionObject2$ = _newDirectionObject2.transformOrigin) === null || _newDirectionObject2$ === void 0 ? void 0 : _newDirectionObject2$.vertical) || ((_transformOrigin2 = transformOrigin) === null || _transformOrigin2 === void 0 ? void 0 : _transformOrigin2.vertical) || 'top'}`;
-    ref.current.style.opacity = 1;
-    cb === null || cb === void 0 ? void 0 : cb();
-  };
-  const handleEventTrigger = e => {
-    if (!openState) {
-      onOpenPopover();
-    } else {
-      onClickOutside(e);
-    }
-  };
-  useEffect(() => {
-    return () => {
-      if (pressESCToClose) {
-        document.removeEventListener('keydown', pressESCHandler);
-      }
-      document.removeEventListener('click', onClickOutside);
-      window.removeEventListener('resize', updatePositionPopover);
-    };
-  }, []);
-  useEffect(() => {
-    anchorRef.current = anchor;
-  }, [anchor]);
-  useEffect(() => {
-    var _anchor8, _anchor9, _anchorRef$current, _anchorRef$current$pr;
-    const anchorEl = ((_anchor8 = anchor) === null || _anchor8 === void 0 ? void 0 : _anchor8.element) || ((_anchor9 = anchor) === null || _anchor9 === void 0 ? void 0 : _anchor9.current) || anchor;
-    if (anchorEl !== null && anchorEl !== void 0 && anchorEl.disabled || (_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && (_anchorRef$current$pr = _anchorRef$current.props) !== null && _anchorRef$current$pr !== void 0 && _anchorRef$current$pr.disabled) return;
-    const eventArr = eventMap.get(trigger) || [];
-    if (anchorEl && open === undefined && (eventArr === null || eventArr === void 0 ? void 0 : eventArr.length) > 0) {
-      eventArr.forEach(evt => anchorEl.addEventListener(evt, handleEventTrigger, false));
-      return () => {
-        eventArr.forEach(evt => anchorEl.removeEventListener(evt, handleEventTrigger, false));
-      };
-    }
-  }, [anchor, trigger, openState]);
-  useEffect(() => {
-    if (open !== undefined) setOpenState(open);
-  }, [open]);
-  useEffect(() => {
-    if (openState && ref.current) {
-      // if (document.body.style.overflow !== 'hidden') {
-      //     overflow.current = document.body.style.overflow; // store overflow of <body /> before open
-      //     document.body.style.overflow = 'hidden';
-      // }
-      const timestamp = Date.now();
-      const classes = useStyles(timestamp);
-      const noScrollClass = classes.noScroll.split(' ');
-      document.body.classList.add(...noScrollClass);
-      // Position's anchor
-      updatePositionPopover();
-
-      // Allow press ESC to close popup
-      if (pressESCToClose) {
-        document.addEventListener('keydown', pressESCHandler);
-      }
-      // Click out popover to close popover
-      document.addEventListener('click', onClickOutside);
-
-      // Update position popover on resize
-      window.addEventListener('resize', updatePositionPopover);
-      if (trigger === 'hover') ref.current.addEventListener('mouseleave', handleEventTrigger, false);
-      return () => {
-        document.body.classList.remove(...noScrollClass);
-        // document.body.style.overflow = overflow.current; // reset overflow of <body /> before open
-        if (pressESCToClose) {
-          document.removeEventListener('keydown', pressESCHandler);
-        }
-        document.removeEventListener('click', onClickOutside);
-        window.removeEventListener('resize', updatePositionPopover);
-        if (trigger === 'hover' && ref.current) ref.current.removeEventListener('mouseleave', handleEventTrigger, false);
-      };
-    }
-    // else if (!openState) {
-    //     document.documentElement.style.overflow = overflow.current;
-    // }
-  }, [openState]);
-  useEffect(() => {
-    clickOutsideToClose ? document.addEventListener('click', onClickOutside) : document.removeEventListener('click', onClickOutside);
-  }, [clickOutsideToClose]);
-  useEffect(() => {
-    updatePositionPopover();
-  }, [children]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      show: el => {
-        if (el) setElement(el);
-        !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
-      },
-      close: () => onClosePopover(null, 'ref'),
-      setPosition: el => updatePositionPopover(el),
-      ...action
-    }; // methods
-    _instance.__proto__ = {
-      hide: () => onClosePopover()
-    }; // hidden methods
-    currentRef.instance = _instance;
-    currentRef.show = el => {
-      if (el) setElement(el);
-      !openState && el ? updatePositionPopover(el, onOpenPopover()) : onOpenPopover();
-    };
-    currentRef.close = onClosePopover;
-    currentRef.setPosition = el => updatePositionPopover(el);
-    return currentRef;
-  });
-  const renderAnchor = () => {
-    var _anchor10, _anchor11, _anchor11$props;
-    if (!((_anchor10 = anchor) !== null && _anchor10 !== void 0 && _anchor10.type)) return null;
-    const AnchorTag = /*#__PURE__*/React.cloneElement(anchor, {
-      ref: ref => {
-        anchor = ref;
-      },
-      style: {
-        cursor: 'pointer',
-        ...(((_anchor11 = anchor) === null || _anchor11 === void 0 ? void 0 : (_anchor11$props = _anchor11.props) === null || _anchor11$props === void 0 ? void 0 : _anchor11$props.style) || {})
-      }
-    });
-    return AnchorTag;
-  };
-  const PopoverView = useMemo(() => {
-    if (openState) {
-      const node = jsx("div", {
-        css: _PortalPopoverCSS,
-        className: 'DGN-UI-Portal DGN-UI-Popover'
-      }, jsx("div", {
-        css: _PopoverContainerCSS,
-        ref: ref,
-        style: style,
-        className: classNames('DGN-UI-Popover-Container', className)
-      }, children), arrow ? jsx("span", {
-        ref: arrowRef,
-        css: _PopoverArrowCSS
-      }) : null);
-      return /*#__PURE__*/createPortal(node, document.body);
-    }
-    return null;
-  }, [openState, theme, arrow, bgColorProp, children, className, clickOutsideToClose, fullScreen, height, style, width, zIndex]);
-  return jsx(React.Fragment, null, renderAnchor(), PopoverView);
-}));
-const PortalPopoverCSS = (zIndex, fullScreen) => css`
-    ${positionFixed};
-    ${fullScreen ? pointerEventsInitial : pointerEventsNone};
-    ${inset(0)};
-    z-index: ${zIndex};
-`;
-const PopoverContainerCSS = (bgCl, width, height, {
-  spacing,
-  typography
-}) => css`
-    ${displayFlex};
-    ${flexCol};
-    ${positionRelative};
-    ${justifyBetween};
-    ${overflowAuto};
-    ${borderRadius4px};
-    ${typography.paragraph1};
-    ${pointerEventsInitial};
-    ${parseWidthHeight(width, height)};
-    ${parseMinWidthHeight(spacing([4]))};
-    ${parseMaxWidthHeight(`calc(100% - ${spacing([8])})`)};
-    ${bgColor(bgCl)};
-    transition: opacity 0.3s ease;
-    opacity: 0;
-    ${shadowLarge};
-`;
-const PopoverArrowCSS = (bgCl, arrowSize) => css`
-    ${displayNone};
-    ${positionAbsolute};
-    ${parseWidthHeight(0)};
-    ${borderBottom(arrowSize, bgCl)};
-    border-left: ${arrowSize}px solid transparent;
-    border-right: ${arrowSize}px solid transparent;
-`;
-
-// Popover.defaultProps = {
-//     anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
-//     arrow: false,
-//     bgColor: 'system/standard',
-//     className: '',
-//     clickOutsideToClose: true,
-//     fullScreen: true,
-//     height: 'max-content',
-//     marginThreshold: spacing(4),
-//     pressESCToClose: true,
-//     style: {},
-//     transformOrigin: { vertical: 'top', horizontal: 'center' },
-//     trigger: 'click',
-//     width: 'max-content',
-//     zIndex: zIndexCORE(1),
-// };
-
-Popover.propTypes = {
-  /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
-  anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
-   */
-  anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['center', 'left', 'right']),
-    vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
-  }),
-  /** If `true`, arrow is shown. */
-  arrow: PropTypes.bool,
-  /** Background color of the component. */
-  bgColor: PropTypes.string,
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** If `true`, click outside will close component. */
-  clickOutsideToClose: PropTypes.bool,
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
-   */
-  direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
-  /** Height of the component. */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Specifies how close to the edge of the window the popover can appear. */
-  marginThreshold: PropTypes.number,
-  /** Callback fired when the component requests to be closed. */
-  onClose: PropTypes.func,
-  /** Callback fired when the component requests to be opened. */
-  onOpen: PropTypes.func,
-  /** If `true`, the component is shown. */
-  open: PropTypes.bool,
-  /** If `true`, hitting escape will close component. */
-  pressESCToClose: PropTypes.bool,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
-   */
-  transformOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['center', 'left', 'right']),
-    vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
-  }),
-  /** Trigger mode of the component. Will not work when use with `open` prop. */
-  trigger: PropTypes.oneOf(['click', 'hover', 'focus']),
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Config z-index of the component. */
-  zIndex: PropTypes.number
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-};
-export { Popover };
-export default OptionWrapper(Popover);