@equinor/eds-core-react 0.18.0-envis.2 → 0.19.0-dev.20220405

package/dist/esm/components/List/List.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { list } from './List.tokens.js';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   typography
@@ -10,14 +10,18 @@ const {
 const StyledList = styled.ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-v9d2hy-0"
-})(["", " ", ""], ({
-  as
-}) => as === 'ol' ? css(["& ol{list-style-type:lower-alpha;}"]) : '', typographyTemplate(typography));
-const List = /*#__PURE__*/forwardRef(function List({
-  children,
-  variant = 'bullet',
-  ...props
-}, ref) {
+})(["", " ", ""], _ref => {
+  let {
+    as
+  } = _ref;
+  return as === 'ol' ? css(["& ol{list-style-type:lower-alpha;}"]) : '';
+}, typographyTemplate(typography));
+const List = /*#__PURE__*/forwardRef(function List(_ref2, ref) {
+  let {
+    children,
+    variant = 'bullet',
+    ...props
+  } = _ref2;
   const as = variant === 'numbered' ? 'ol' : 'ul';
   return /*#__PURE__*/jsx(StyledList, {
     as: as,

package/dist/esm/components/List/ListItem.js

@@ -1,10 +1,11 @@
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const ListItem = /*#__PURE__*/forwardRef(function ListItem({
-  children,
-  ...props
-}, ref) {
+const ListItem = /*#__PURE__*/forwardRef(function ListItem(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx("li", { ...props,
     ref: ref,
     children: children

package/dist/esm/components/Menu/Menu.context.js

@@ -3,15 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 
 const initalState = {
   focusedIndex: -1,
+  initialFocus: null,
   onClose: null
 };
 const MenuContext = /*#__PURE__*/createContext(initalState);
-const MenuProvider = ({
-  children
-}) => {
+const MenuProvider = _ref => {
+  let {
+    children
+  } = _ref;
   const [state, setState] = useState(initalState);
   const {
     focusedIndex,
+    initialFocus,
     onClose
   } = state;
 
@@ -21,10 +24,17 @@ const MenuProvider = ({
     }));
   };
 
+  const setInitialFocus = initialFocus => {
+    setState(prevState => ({ ...prevState,
+      initialFocus: initialFocus
+    }));
+  };
+
   const setOnClose = onClose => {
     const onCloseHelper = () => {
-      onClose();
       setFocusedIndex(-1);
+      setInitialFocus(null);
+      onClose();
     };
 
     setState(prevState => ({ ...prevState,
@@ -35,6 +45,8 @@ const MenuProvider = ({
   const value = {
     setFocusedIndex,
     focusedIndex,
+    setInitialFocus,
+    initialFocus,
     setOnClose,
     onClose
   };

package/dist/esm/components/Menu/Menu.js

@@ -3,16 +3,11 @@ import * as ReactDom from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
 import { MenuList } from './MenuList.js';
+import { bordersTemplate, useIsMounted, useToken, usePopper, useOutsideClick, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useIsMounted } from '../../hooks/useMountedRef.js';
-import { useOutsideClick } from '../../hooks/useOutsideClick.js';
-import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
 import { Paper } from '../Paper/Paper.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
-import { usePopper } from '../../hooks/usePopper.js';
 
 const {
   border
@@ -20,28 +15,64 @@ const {
 const MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:300;width:fit-content;min-width:fit-content;", ";", ""], bordersTemplate(border), ({
-  open
-}) => css({
-  visibility: open ? null : 'hidden'
-}));
-const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
-  children,
-  anchorEl,
-  onClose: onCloseCallback,
-  open,
-  containerEl,
-  ...rest
-}, ref) {
+})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ""], bordersTemplate(border), _ref => {
+  let {
+    open
+  } = _ref;
+  return css({
+    visibility: open ? null : 'hidden'
+  });
+});
+const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
+  let {
+    children,
+    anchorEl,
+    onClose: onCloseCallback,
+    open,
+    containerEl,
+    ...rest
+  } = _ref2;
   const {
     setOnClose,
-    onClose
+    onClose,
+    setInitialFocus
   } = useMenu();
   useEffect(() => {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
   }, [onClose, onCloseCallback, setOnClose]);
+  useEffect(() => {
+    const openWithKey = e => {
+      const {
+        key
+      } = e; //activate menu with arrows according to wai-aria best practices
+
+      if (key === 'ArrowDown' || key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        anchorEl.dispatchEvent(new Event('click', {
+          bubbles: true
+        }));
+      }
+
+      switch (key) {
+        case 'Enter':
+        case 'ArrowDown':
+          setInitialFocus('first');
+          break;
+
+        case 'ArrowUp':
+          setInitialFocus('last');
+          break;
+      }
+    };
+
+    if (anchorEl) anchorEl.addEventListener('keydown', openWithKey);
+    return () => {
+      if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorEl]);
   useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -55,7 +86,11 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
   });
   useGlobalKeyPress('Enter', () => {
     if (open && onClose !== null) {
-      if (window.document.contains(anchorEl)) anchorEl.focus();
+      setTimeout(() => {
+        if (window.document.contains(anchorEl)) {
+          anchorEl.focus();
+        }
+      }, 0);
     }
   });
   return /*#__PURE__*/jsx(MenuList, { ...rest,
@@ -63,14 +98,15 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
     children: children
   });
 });
-const Menu = /*#__PURE__*/forwardRef(function Menu({
-  anchorEl,
-  open,
-  placement = 'auto',
-  style,
-  className,
-  ...rest
-}, ref) {
+const Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
+  let {
+    anchorEl,
+    open,
+    placement = 'auto',
+    style,
+    className,
+    ...rest
+  } = _ref3;
   const [containerEl, setContainerEl] = useState(null);
   const [storedAnchorEl, setStoredAnchorEl] = useState(null);
   const isMounted = useIsMounted();
@@ -87,7 +123,12 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   const {
     styles,
     attributes
-  } = usePopper(storedAnchorEl, containerEl, null, placement, 4);
+  } = usePopper({
+    anchorEl: storedAnchorEl,
+    popperEl: containerEl,
+    placement,
+    offset: 4
+  });
   const props = {
     open,
     style: { ...styles.popper,

package/dist/esm/components/Menu/MenuItem.js

@@ -1,11 +1,9 @@
 import { memo, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { menu } from './Menu.tokens.js';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, useCombinedRefs } from '@equinor/eds-utils';
 import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   typography,
@@ -21,32 +19,45 @@ const {
     icon
   }
 } = menu;
-const Item = styled.button.attrs(({
-  isFocused
-}) => ({
-  role: 'menuitem',
-  tabIndex: isFocused ? -1 : 0
-})).withConfig({
+const Item = styled.button.attrs(_ref => {
+  let {
+    isFocused
+  } = _ref;
+  return {
+    role: 'menuitem',
+    tabIndex: isFocused ? -1 : 0
+  };
+}).withConfig({
   displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), ({
-  theme
-}) => spacingsTemplate(theme.entities.item.spacings), ({
-  active
-}) => active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color), ({
-  disabled
-}) => disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline)));
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return spacingsTemplate(theme.entities.item.spacings);
+}, _ref3 => {
+  let {
+    active
+  } = _ref3;
+  return active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline));
+});
 const Content = styled.div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem({
-  children,
-  disabled,
-  index = 0,
-  onClick,
-  ...rest
-}, ref) {
+const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
+  let {
+    children,
+    disabled,
+    index = 0,
+    onClick,
+    ...rest
+  } = _ref5;
   const {
     focusedIndex,
     setFocusedIndex,
@@ -66,8 +77,10 @@ const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem({
   };
   return /*#__PURE__*/jsx(Item, { ...props,
     ref: useCombinedRefs(ref, el => {
-      if (el !== null && isFocused) {
-        el.focus();
+      if (isFocused) {
+        requestAnimationFrame(() => {
+          if (el !== null) el.focus();
+        });
       }
     }),
     onFocus: () => toggleFocus(index),

package/dist/esm/components/Menu/MenuList.js

@@ -4,8 +4,8 @@ import { useMenu } from './Menu.context.js';
 import { MenuItem } from './MenuItem.js';
 import { MenuSection } from './MenuSection.js';
 import { menu } from './Menu.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 
 const List = styled.div.withConfig({
   displayName: "MenuList__List",
@@ -17,19 +17,24 @@ function isIndexable(item) {
   return false;
 }
 
-const MenuList = /*#__PURE__*/forwardRef(function MenuList({
-  children,
-  focus,
-  ...rest
-}, ref) {
+const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref;
   const {
     focusedIndex,
-    setFocusedIndex
+    setFocusedIndex,
+    initialFocus
   } = useMenu();
   let index = -1;
   const focusableIndexs = useMemo(() => [], []);
   const updatedChildren = useMemo(() => Children.map(children, child => {
+    if (!child) return child;
+
     if (child.type === MenuSection) {
+      index++;
+      const menuSectionIndex = index;
       const updatedGrandChildren = Children.map(child.props.children, grandChild => {
         index++;
         if (isIndexable(grandChild)) focusableIndexs.push(index);
@@ -37,7 +42,9 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList({
           index
         });
       });
-      return /*#__PURE__*/cloneElement(child, null, updatedGrandChildren);
+      return /*#__PURE__*/cloneElement(child, {
+        index: menuSectionIndex
+      }, updatedGrandChildren);
     } else {
       index++;
       if (isIndexable(child)) focusableIndexs.push(index);
@@ -49,15 +56,15 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList({
   const firstFocusIndex = focusableIndexs[0];
   const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
   useEffect(() => {
-    if (focus === 'first') {
+    if (initialFocus === 'first') {
       setFocusedIndex(firstFocusIndex);
     }
 
-    if (focus === 'last') {
+    if (initialFocus === 'last') {
       setFocusedIndex(lastFocusIndex);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [focus, firstFocusIndex, lastFocusIndex]);
+  }, [initialFocus, firstFocusIndex, lastFocusIndex]);
 
   const handleMenuItemChange = (direction, fallbackIndex) => {
     const i = direction === 'down' ? 1 : -1;

package/dist/esm/components/Menu/MenuSection.js

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import styled from 'styled-components';
 import { menu } from './Menu.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
 import { Divider } from '../Divider/Divider.js';
 import { Typography } from '../Typography/Typography.js';
 

package/dist/esm/components/Pagination/Pagination.js

@@ -1,12 +1,12 @@
 import { forwardRef, useState, useLayoutEffect } from 'react';
 import styled from 'styled-components';
+import { useIsMounted } from '@equinor/eds-utils';
 import { Icon } from '../Icon/index.js';
 import { PaginationItem } from './PaginationItem.js';
 import { pagination } from './Pagination.tokens.js';
 import { chevron_left, chevron_right, more_horizontal } from '@equinor/eds-icons';
 import { PaginationControl } from './paginationControl.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useIsMounted } from '../../hooks/useMountedRef.js';
 import { Typography } from '../Typography/Typography.js';
 import { Button } from '../Button/Button.js';
 
@@ -19,9 +19,12 @@ Icon.add(icons);
 const Navigation = styled.nav.withConfig({
   displayName: "Pagination__Navigation",
   componentId: "sc-13cpp3o-0"
-})(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], ({
-  withItemIndicator
-}) => withItemIndicator ? pagination.spacings.left : 0);
+})(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], _ref => {
+  let {
+    withItemIndicator
+  } = _ref;
+  return withItemIndicator ? pagination.spacings.left : 0;
+});
 const OrderedList = styled.ol.withConfig({
   displayName: "Pagination__OrderedList",
   componentId: "sc-13cpp3o-1"
@@ -47,14 +50,15 @@ function getAriaLabel(page, selected) {
   return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
 }
 
-const Pagination = /*#__PURE__*/forwardRef(function Pagination({
-  totalItems,
-  defaultPage = 1,
-  withItemIndicator,
-  itemsPerPage = 10,
-  onChange,
-  ...rest
-}, ref) {
+const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
+  let {
+    totalItems,
+    defaultPage = 1,
+    withItemIndicator,
+    itemsPerPage = 10,
+    onChange,
+    ...rest
+  } = _ref2;
   const pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
 
   const columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >

package/dist/esm/components/Pagination/PaginationItem.js

@@ -3,12 +3,13 @@ import { pagination } from './Pagination.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '../Button/Button.js';
 
-const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem({
-  page,
-  selected,
-  onClick,
-  ...rest
-}, ref) {
+const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem(_ref, ref) {
+  let {
+    page,
+    selected,
+    onClick,
+    ...rest
+  } = _ref;
   const props = {
     ref,
     page,

package/dist/esm/components/Paper/Paper.js

@@ -6,13 +6,17 @@ import { jsx } from 'react/jsx-runtime';
 const StyledPaper = styled.div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, ({
-  elevation
-}) => elevation);
-const Paper = /*#__PURE__*/forwardRef(function Paper({
-  elevation: elevation$1,
-  ...rest
-}, ref) {
+})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
+  let {
+    elevation
+  } = _ref;
+  return elevation;
+});
+const Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
+  let {
+    elevation: elevation$1,
+    ...rest
+  } = _ref2;
   const props = { ...rest,
     elevation: elevation[elevation$1] || 'none'
   };

package/dist/esm/components/Popover/Popover.js

@@ -1,63 +1,59 @@
 import { forwardRef, useState, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { Icon } from '../Icon/index.js';
-import { close } from '@equinor/eds-icons';
+import { typographyTemplate, bordersTemplate, useCombinedRefs, useOutsideClick, useGlobalKeyPress, usePopper, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
-import { useOutsideClick } from '../../hooks/useOutsideClick.js';
-import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
 import { Paper } from '../Paper/Paper.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { Button } from '../Button/Button.js';
-import { usePopper } from '../../hooks/usePopper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
-})(({
-  theme,
-  open
-}) => {
-  return css(["", " ", " ", " display:grid;grid-gap:", ";grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";min-height:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
+})(_ref => {
+  let {
+    theme,
+    open
+  } = _ref;
+  return css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:1400;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
     visibility: open ? null : 'hidden'
-  }, typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.spacings.bottom, theme.background, theme.maxHeight, theme.maxWidth, theme.minHeight, bordersTemplate(theme.border), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
-});
-const StyledCloseButton = styled(Button).withConfig({
-  displayName: "Popover__StyledCloseButton",
-  componentId: "sc-b7p1is-1"
-})(({
-  theme
-}) => {
-  return css(["position:absolute;top:", ";right:", ";height:", ";width:", ";&:after{height:", ";}"], theme.entities.closeButton.spacings.top, theme.spacings.right, theme.entities.closeButton.height, theme.entities.closeButton.width, theme.entities.closeButton.height);
+  }, typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, bordersTemplate(theme.border), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
 });
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
-  componentId: "sc-b7p1is-2"
-})(({
-  theme
-}) => {
+  componentId: "sc-b7p1is-1"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
   return css(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
+const InnerWrapper = styled.div.withConfig({
+  displayName: "Popover__InnerWrapper",
+  componentId: "sc-b7p1is-2"
+})(_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return css(["display:grid;grid-gap:", ";"], theme.spacings.bottom);
+});
 const PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
   componentId: "sc-b7p1is-3"
-})(({
-  theme
-}) => {
+})(_ref4 => {
+  let {
+    theme
+  } = _ref4;
   return css(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], theme.entities.arrow.width, theme.entities.arrow.height, theme.background);
 });
-const Popover = /*#__PURE__*/forwardRef(function Popover({
-  children,
-  placement = 'bottom',
-  anchorEl,
-  open,
-  onClose,
-  ...rest
-}, ref) {
+const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
+  let {
+    children,
+    placement = 'bottom',
+    anchorEl,
+    open,
+    onClose,
+    ...rest
+  } = _ref5;
   const [popperEl, setPopperEl] = useState(null);
   const [storedAnchorEl, setStoredAnchorEl] = useState(null);
   const [arrowRef, setArrowRef] = useState(null);
@@ -79,7 +75,12 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   const {
     styles,
     attributes
-  } = usePopper(storedAnchorEl, popperEl, arrowRef, placement);
+  } = usePopper({
+    anchorEl: storedAnchorEl,
+    popperEl,
+    arrowRef,
+    placement
+  });
   const props = {
     open,
     ...rest,
@@ -109,16 +110,8 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
             d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
           })
         })
-      }), children, /*#__PURE__*/jsx(StyledCloseButton, {
-        onClick: onClose,
-        variant: "ghost_icon",
-        "data-testid": "popover-close",
-        "aria-label": "Close popover",
-        children: /*#__PURE__*/jsx(Icon, {
-          name: "close",
-          data: close,
-          size: 24
-        })
+      }), /*#__PURE__*/jsx(InnerWrapper, {
+        children: children
       })]
     })
   });