@equinor/eds-core-react 0.40.1 → 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: {
@@ -1147,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"
@@ -1245,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,
@@ -1270,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]
   });
 });
 
@@ -3909,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
@@ -6167,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,
@@ -6203,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 {
@@ -6217,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
+      })
+    })
   });
 });
 
@@ -7704,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",
@@ -7814,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,
@@ -7947,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 = {
@@ -7962,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: {
@@ -7979,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;
@@ -9357,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",
@@ -9461,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,
@@ -9696,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]);
@@ -9997,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 = () => {
@@ -12199,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

@@ -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]);
@@ -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/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/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/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
+      })
+    })
   });
 });
 

package/dist/esm/components/Tabs/TabList.js

@@ -13,7 +13,7 @@ const StyledTabList = styled.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[$variant], ({
   $scrollable

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,14 +1,16 @@
 import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from 'react';
 import styled from 'styled-components';
-import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs, useIsInDialog } from '@equinor/eds-utils';
+import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
 import { tooltip } from './Tooltip.tokens.js';
-import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss, FloatingPortal } from '@floating-ui/react';
+import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss } from '@floating-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-const StyledTooltip = styled.div.withConfig({
+const StyledTooltip = styled('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;}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), 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;}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background);
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
@@ -103,10 +105,13 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
       ...children.props
     })
   });
-
-  //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = useIsInDialog(refs.domReference.current);
+  useIsomorphicLayoutEffect(() => {
+    if (shouldOpen && open) {
+      refs.floating.current?.showPopover();
+    }
+  }, [open, shouldOpen, refs.floating]);
   const TooltipEl = /*#__PURE__*/jsxs(StyledTooltip, {
+    popover: "manual",
     ...rest,
     ...getFloatingProps({
       ref: tooltipRef,
@@ -128,12 +133,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [inDialog ? /*#__PURE__*/jsx(Fragment, {
-      children: shouldOpen && open && TooltipEl
-    }) : /*#__PURE__*/jsx(FloatingPortal, {
-      id: "eds-tooltip-container",
-      children: shouldOpen && open && TooltipEl
-    }), updatedChildren]
+    children: [shouldOpen && open && TooltipEl, updatedChildren]
   });
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.40.1",
+  "version": "0.41.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -35,17 +35,17 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-actions": "^8.1.11",
-    "@storybook/addon-docs": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/preview-api": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@testing-library/dom": "^10.3.1",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@storybook/addon-a11y": "^8.2.8",
+    "@storybook/addon-actions": "^8.2.8",
+    "@storybook/addon-docs": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/preview-api": "^8.2.8",
+    "@storybook/react": "^8.2.8",
+    "@storybook/react-vite": "^8.2.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "^29.5.12",
@@ -58,19 +58,19 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.41",
     "ramda": "^0.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.52.1",
-    "react-router-dom": "^6.24.1",
-    "rollup": "^4.18.1",
+    "react-hook-form": "^7.52.2",
+    "react-router-dom": "^6.26.0",
+    "rollup": "^4.20.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.1.11",
-    "styled-components": "6.1.11",
+    "storybook": "^8.2.8",
+    "styled-components": "6.1.12",
     "tsc-watch": "^6.2.0",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -78,19 +78,19 @@
     "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
-    "@floating-ui/react": "^0.26.19",
-    "@internationalized/date": "^3.5.4",
-    "@react-aria/utils": "^3.24.1",
-    "@react-stately/calendar": "^3.5.1",
-    "@react-stately/datepicker": "^3.9.4",
-    "@react-types/shared": "^3.23.1",
-    "@tanstack/react-virtual": "3.8.2",
-    "downshift": "9.0.6",
-    "react-aria": "^3.33.1",
-    "@equinor/eds-icons": "^0.21.0",
+    "@babel/runtime": "^7.25.0",
+    "@floating-ui/react": "^0.26.22",
+    "@internationalized/date": "^3.5.5",
+    "@react-aria/utils": "^3.25.1",
+    "@react-stately/calendar": "^3.5.3",
+    "@react-stately/datepicker": "^3.10.1",
+    "@react-types/shared": "^3.24.1",
+    "@tanstack/react-virtual": "3.8.4",
+    "downshift": "9.0.7",
+    "react-aria": "^3.34.1",
+    "@equinor/eds-tokens": "0.9.2",
     "@equinor/eds-utils": "0.8.5",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-icons": "^0.21.0"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",