@equinor/eds-core-react 0.40.0 → 0.41.0

package/dist/eds-core-react.cjs

@@ -7,7 +7,6 @@ var edsUtils = require('@equinor/eds-utils');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@floating-ui/react');
 var edsIcons = require('@equinor/eds-icons');
-var ReactDom = require('react-dom');
 var downshift = require('downshift');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactAria = require('react-aria');
@@ -18,26 +17,7 @@ var utils = require('@react-aria/utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
 
 const {
   typography: {
@@ -172,12 +152,8 @@ const button = {
   }
 };
 
-var _placeholder = {
-  '@@functional/placeholder': true
-};
-
 function _isPlaceholder(a) {
-  return a === _placeholder;
+  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
 }
 
 /**
@@ -1151,10 +1127,12 @@ const tooltip = {
   }
 };
 
-const StyledTooltip = styled__default.default.div.withConfig({
+const StyledTooltip = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
-})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
+})(["inset:unset;border:0;overflow:visible;", " ", " ", " background:", ";white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}&::backdrop{background-color:transparent;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
 const ArrowWrapper$1 = styled__default.default.div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
@@ -1249,10 +1227,13 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
       ...children.props
     })
   });
-
-  //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = edsUtils.useIsInDialog(refs.domReference.current);
+  edsUtils.useIsomorphicLayoutEffect(() => {
+    if (shouldOpen && open) {
+      refs.floating.current?.showPopover();
+    }
+  }, [open, shouldOpen, refs.floating]);
   const TooltipEl = /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
+    popover: "manual",
     ...rest,
     ...getFloatingProps({
       ref: tooltipRef,
@@ -1274,12 +1255,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [inDialog ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: shouldOpen && open && TooltipEl
-    }) : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-      id: "eds-tooltip-container",
-      children: shouldOpen && open && TooltipEl
-    }), updatedChildren]
+    children: [shouldOpen && open && TooltipEl, updatedChildren]
   });
 });
 
@@ -3913,7 +3889,7 @@ const StyledTabList = styled__default.default.div.attrs(() => ({
 })).withConfig({
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
-})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;& ::-webkit-scrollbar{width:0;height:0;}}"], ({
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:none;& ::-webkit-scrollbar{width:0;height:0;}}"], ({
   $variant
 }) => variants$1[$variant], ({
   $scrollable
@@ -6171,20 +6147,30 @@ const snackbar = {
   }
 };
 
-const StyledSnackbar = styled__default.default(Paper).withConfig({
-  displayName: "Snackbar__StyledSnackbar",
+const PopoverDiv = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+  ,
+  displayName: "Snackbar__PopoverDiv",
   componentId: "sc-ac6no8-0"
 })(({
   theme,
   $placement
 }) => {
-  return styled.css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:1400;", " a,button{color:", ";}"], theme.background, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), theme.minHeight, {
+  return styled.css(["inset:unset;border:0;overflow:visible;position:fixed;padding:0;background-color:transparent;", " &::backdrop{background-color:transparent;}"], {
     top: $placement.includes('top') ? theme.spacings.top : $placement === 'left' || $placement === 'right' ? '50%' : undefined,
     bottom: $placement.includes('bottom') ? theme.spacings.bottom : undefined,
     right: $placement.includes('right') ? theme.spacings.right : undefined,
     left: $placement.includes('left') ? theme.spacings.left : $placement === 'top' || $placement === 'bottom' ? '50%' : undefined,
     transform: $placement === 'left' || $placement === 'right' ? 'translateY(-50%)' : $placement === 'top' || $placement === 'bottom' ? 'translateX(-50%)' : undefined
-  }, theme.entities.button.typography.color);
+  });
+});
+const StyledSnackbar = styled__default.default(Paper).withConfig({
+  displayName: "Snackbar__StyledSnackbar",
+  componentId: "sc-ac6no8-1"
+})(({
+  theme
+}) => {
+  return styled.css(["background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;a,button{color:", ";}"], theme.background, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), theme.minHeight, theme.entities.button.typography.color);
 });
 const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
   open = false,
@@ -6207,10 +6193,9 @@ const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
       }, autoHideDuration);
     }
     return () => clearTimeout(timer.current);
-  }, [open, autoHideDuration, setVisible, onClose]);
+  }, [open, setVisible, autoHideDuration, onClose]);
   const props = {
     ref,
-    $placement: placement,
     ...rest
   };
   const {
@@ -6221,12 +6206,17 @@ const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
   }, snackbar);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: visible && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
-      role: "alert",
-      elevation: "overlay",
-      ...props,
-      children: children
-    }), document.body)
+    children: visible && /*#__PURE__*/jsxRuntime.jsx(PopoverDiv, {
+      popover: "manual",
+      $placement: placement,
+      ref: el => el?.showPopover(),
+      children: /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
+        role: "alert",
+        elevation: "overlay",
+        ...props,
+        children: children
+      })
+    })
   });
 });
 
@@ -7708,6 +7698,7 @@ const MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
         variant: "small"
       })
     }), title && /*#__PURE__*/jsxRuntime.jsx(Header, {
+      role: "group",
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
         group: "navigation",
         variant: "label",
@@ -7818,11 +7809,13 @@ const {
 const MenuPaper = styled__default.default(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], edsUtils.bordersTemplate(border$1), ({
-  open
-}) => styled.css({
-  display: open ? 'block' : 'none'
-}));
+})(["width:100%;min-width:fit-content;", ";"], edsUtils.bordersTemplate(border$1));
+const StyledPopover$1 = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Menu__StyledPopover",
+  componentId: "sc-1vlnqcj-1"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
 const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer({
   children,
   anchorEl,
@@ -7951,13 +7944,19 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
       return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, open]);
+  edsUtils.useIsomorphicLayoutEffect(() => {
+    if (open) {
+      refs.floating.current?.showPopover();
+    } else {
+      refs.floating.current?.hidePopover();
+    }
+  }, [open, refs.floating]);
   const {
     getFloatingProps
   } = react$1.useInteractions([react$1.useDismiss(context, {
     escapeKey: false
   })]);
   const props = {
-    open,
     className
   };
   const menuProps = {
@@ -7966,14 +7965,10 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
     anchorEl,
     open
   };
-
-  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = edsUtils.useIsInDialog(anchorEl);
-  const menuElement = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
-      elevation: "raised",
-      ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPopover$1, {
+      popover: "manual",
       ...getFloatingProps({
         ref: popoverRef,
         style: {
@@ -7983,20 +7978,18 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
           left: x || 0
         }
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
-        children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, {
-          ...menuProps,
-          ref: ref
+      children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
+        elevation: "raised",
+        ...props,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
+          children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, {
+            ...menuProps,
+            ref: ref
+          })
         })
       })
     })
   });
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: inDialog ? menuElement : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-      id: "eds-menu-container",
-      children: menuElement
-    })
-  });
 });
 
 const Menu = Menu$1;
@@ -9361,7 +9354,7 @@ const StyledListItem = styled__default.default.li.withConfig({
   $isdisabled
 }) => {
   const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
-  return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
+  return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
 const Label = styled__default.default.span.withConfig({
   displayName: "Option__Label",
@@ -9465,7 +9458,7 @@ const findIndex = ({
   availableItems
 }) => {
   const nextItem = availableItems[index];
-  if (optionDisabled(nextItem)) {
+  if (optionDisabled(nextItem) && index >= 0 && index < availableItems.length) {
     const nextIndex = calc(index);
     return findIndex({
       calc,
@@ -9700,7 +9693,7 @@ function AutocompleteInner(props, ref) {
     try {
       // eslint-disable-next-line @typescript-eslint/no-base-to-string
       return item?.toString();
-    } catch (error) {
+    } catch {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
@@ -9975,7 +9968,7 @@ function AutocompleteInner(props, ref) {
   } = react$1.useFloating({
     placement: 'bottom-start',
     middleware: [react$1.offset(4), react$1.flip({
-      boundary: document?.body
+      boundary: typeof document === 'undefined' ? undefined : document?.body
     }), react$1.size({
       apply({
         rects,
@@ -10001,9 +9994,9 @@ function AutocompleteInner(props, ref) {
   // MARK: popover toggle
   edsUtils.useIsomorphicLayoutEffect(() => {
     if (isOpen) {
-      refs.floating.current.showPopover();
+      refs.floating.current?.showPopover();
     } else {
-      refs.floating.current.hidePopover();
+      refs.floating.current?.hidePopover();
     }
   }, [isOpen, refs.floating]);
   const clear = () => {
@@ -12203,6 +12196,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
     timezone: timezone,
     formatOptions: formatOptions,
     children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+      ...props,
       isOpen: isOpen,
       color: state.isInvalid ? 'warning' : props.variant,
       helperProps: helperProps ?? props.helperProps,

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -12,8 +12,8 @@ import { bordersTemplate, useToken, useIsomorphicLayoutEffect } from '@equinor/e
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, size, useInteractions, autoUpdate } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import pickBy from '../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/pickBy.js';
-import mergeWith from '../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeWith.js';
+import pickBy from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/pickBy.js';
+import mergeWith from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeWith.js';
 import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
@@ -69,7 +69,7 @@ const findIndex = ({
   availableItems
 }) => {
   const nextItem = availableItems[index];
-  if (optionDisabled(nextItem)) {
+  if (optionDisabled(nextItem) && index >= 0 && index < availableItems.length) {
     const nextIndex = calc(index);
     return findIndex({
       calc,
@@ -304,7 +304,7 @@ function AutocompleteInner(props, ref) {
     try {
       // eslint-disable-next-line @typescript-eslint/no-base-to-string
       return item?.toString();
-    } catch (error) {
+    } catch {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
@@ -579,7 +579,7 @@ function AutocompleteInner(props, ref) {
   } = useFloating({
     placement: 'bottom-start',
     middleware: [offset(4), flip({
-      boundary: document?.body
+      boundary: typeof document === 'undefined' ? undefined : document?.body
     }), size({
       apply({
         rects,
@@ -605,9 +605,9 @@ function AutocompleteInner(props, ref) {
   // MARK: popover toggle
   useIsomorphicLayoutEffect(() => {
     if (isOpen) {
-      refs.floating.current.showPopover();
+      refs.floating.current?.showPopover();
     } else {
-      refs.floating.current.hidePopover();
+      refs.floating.current?.hidePopover();
     }
   }, [isOpen, refs.floating]);
   const clear = () => {

package/dist/esm/components/Autocomplete/Autocomplete.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   typography,

package/dist/esm/components/Autocomplete/Option.js

@@ -14,7 +14,7 @@ const StyledListItem = styled.li.withConfig({
   $isdisabled
 }) => {
   const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
-  return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), $isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
+  return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), $isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
 const Label = styled.span.withConfig({
   displayName: "Option__Label",

package/dist/esm/components/Button/tokens/contained.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   clickbounds: {

package/dist/esm/components/Button/tokens/ghost.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/outlined.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Datepicker/DateRangePicker.js

@@ -122,6 +122,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
     timezone: timezone,
     formatOptions: formatOptions,
     children: /*#__PURE__*/jsx(FieldWrapper, {
+      ...props,
       isOpen: isOpen,
       color: state.isInvalid ? 'warning' : props.variant,
       helperProps: helperProps ?? props.helperProps,

package/dist/esm/components/Input/Input.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/InputWrapper/InputWrapper.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.30.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

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

@@ -1,11 +1,11 @@
 import { forwardRef, useMemo, useEffect } from 'react';
-import styled, { css, ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
 import { MenuList } from './MenuList.js';
-import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useIsInDialog, useGlobalKeyPress } from '@equinor/eds-utils';
+import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
-import { offset, flip, shift, size, useFloating, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { offset, flip, shift, size, useFloating, autoUpdate, useInteractions, useDismiss } from '@floating-ui/react';
+import { jsx } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
@@ -15,11 +15,13 @@ const {
 const MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], bordersTemplate(border), ({
-  open
-}) => css({
-  display: open ? 'block' : 'none'
-}));
+})(["width:100%;min-width:fit-content;", ";"], bordersTemplate(border));
+const StyledPopover = styled('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Menu__StyledPopover",
+  componentId: "sc-1vlnqcj-1"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
 const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
   children,
   anchorEl,
@@ -148,13 +150,19 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, open]);
+  useIsomorphicLayoutEffect(() => {
+    if (open) {
+      refs.floating.current?.showPopover();
+    } else {
+      refs.floating.current?.hidePopover();
+    }
+  }, [open, refs.floating]);
   const {
     getFloatingProps
   } = useInteractions([useDismiss(context, {
     escapeKey: false
   })]);
   const props = {
-    open,
     className
   };
   const menuProps = {
@@ -163,14 +171,10 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
     anchorEl,
     open
   };
-
-  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = useIsInDialog(anchorEl);
-  const menuElement = /*#__PURE__*/jsx(ThemeProvider, {
+  return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(MenuPaper, {
-      elevation: "raised",
-      ...props,
+    children: /*#__PURE__*/jsx(StyledPopover, {
+      popover: "manual",
       ...getFloatingProps({
         ref: popoverRef,
         style: {
@@ -180,20 +184,18 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
           left: x || 0
         }
       }),
-      children: /*#__PURE__*/jsx(MenuProvider, {
-        children: /*#__PURE__*/jsx(MenuContainer, {
-          ...menuProps,
-          ref: ref
+      children: /*#__PURE__*/jsx(MenuPaper, {
+        elevation: "raised",
+        ...props,
+        children: /*#__PURE__*/jsx(MenuProvider, {
+          children: /*#__PURE__*/jsx(MenuContainer, {
+            ...menuProps,
+            ref: ref
+          })
         })
       })
     })
   });
-  return /*#__PURE__*/jsx(Fragment, {
-    children: inDialog ? menuElement : /*#__PURE__*/jsx(FloatingPortal, {
-      id: "eds-menu-container",
-      children: menuElement
-    })
-  });
 });
 
 export { Menu };

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

@@ -24,6 +24,7 @@ const MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
         variant: "small"
       })
     }), title && /*#__PURE__*/jsx(Header, {
+      role: "group",
       children: /*#__PURE__*/jsx(Typography, {
         group: "navigation",
         variant: "label",

package/dist/esm/components/Snackbar/Snackbar.js

@@ -1,5 +1,4 @@
 import { forwardRef, useState, useRef, useEffect } from 'react';
-import * as ReactDom from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { snackbar } from './Snackbar.tokens.js';
 import { spacingsTemplate, bordersTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
@@ -7,20 +6,30 @@ import { jsx } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledSnackbar = styled(Paper).withConfig({
-  displayName: "Snackbar__StyledSnackbar",
+const PopoverDiv = styled('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+  ,
+  displayName: "Snackbar__PopoverDiv",
   componentId: "sc-ac6no8-0"
 })(({
   theme,
   $placement
 }) => {
-  return css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:1400;", " a,button{color:", ";}"], theme.background, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), theme.minHeight, {
+  return css(["inset:unset;border:0;overflow:visible;position:fixed;padding:0;background-color:transparent;", " &::backdrop{background-color:transparent;}"], {
     top: $placement.includes('top') ? theme.spacings.top : $placement === 'left' || $placement === 'right' ? '50%' : undefined,
     bottom: $placement.includes('bottom') ? theme.spacings.bottom : undefined,
     right: $placement.includes('right') ? theme.spacings.right : undefined,
     left: $placement.includes('left') ? theme.spacings.left : $placement === 'top' || $placement === 'bottom' ? '50%' : undefined,
     transform: $placement === 'left' || $placement === 'right' ? 'translateY(-50%)' : $placement === 'top' || $placement === 'bottom' ? 'translateX(-50%)' : undefined
-  }, theme.entities.button.typography.color);
+  });
+});
+const StyledSnackbar = styled(Paper).withConfig({
+  displayName: "Snackbar__StyledSnackbar",
+  componentId: "sc-ac6no8-1"
+})(({
+  theme
+}) => {
+  return css(["background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;a,button{color:", ";}"], theme.background, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), theme.minHeight, theme.entities.button.typography.color);
 });
 const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
   open = false,
@@ -43,10 +52,9 @@ const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
       }, autoHideDuration);
     }
     return () => clearTimeout(timer.current);
-  }, [open, autoHideDuration, setVisible, onClose]);
+  }, [open, setVisible, autoHideDuration, onClose]);
   const props = {
     ref,
-    $placement: placement,
     ...rest
   };
   const {
@@ -57,12 +65,17 @@ const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
   }, snackbar);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: visible && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/jsx(StyledSnackbar, {
-      role: "alert",
-      elevation: "overlay",
-      ...props,
-      children: children
-    }), document.body)
+    children: visible && /*#__PURE__*/jsx(PopoverDiv, {
+      popover: "manual",
+      $placement: placement,
+      ref: el => el?.showPopover(),
+      children: /*#__PURE__*/jsx(StyledSnackbar, {
+        role: "alert",
+        elevation: "overlay",
+        ...props,
+        children: children
+      })
+    })
   });
 });