@equinor/eds-core-react 0.32.2 → 0.32.3

package/dist/eds-core-react.cjs

@@ -1049,27 +1049,33 @@ var Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   var updatedChildren = /*#__PURE__*/react.cloneElement(children, _objectSpread__default.default({}, getReferenceProps(_objectSpread__default.default({
     ref: anchorRef
   }, children.props))));
+
+  //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = edsUtils.useIsInDialog(refs.domReference.current);
+  var TooltipEl = /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({}, rest), getFloatingProps({
+    ref: tooltipRef,
+    style: _objectSpread__default.default(_objectSpread__default.default({}, style), {}, {
+      position: strategy,
+      top: y || 0,
+      left: x || 0
+    })
+  })), {}, {
+    children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
+      ref: arrowRef,
+      children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
+        className: "arrowSvg",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+        })
+      })
+    })]
+  }));
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    children: [inDialog ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: shouldOpen && open && TooltipEl
+    }) : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       id: "eds-tooltip-container",
-      children: shouldOpen && open && /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({}, rest), getFloatingProps({
-        ref: tooltipRef,
-        style: _objectSpread__default.default(_objectSpread__default.default({}, style), {}, {
-          position: strategy,
-          top: y || 0,
-          left: x || 0
-        })
-      })), {}, {
-        children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
-          ref: arrowRef,
-          children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
-            className: "arrowSvg",
-            children: /*#__PURE__*/jsxRuntime.jsx("path", {
-              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: shouldOpen && open && TooltipEl
     }), updatedChildren]
   });
 });
@@ -3970,7 +3976,7 @@ var StyledDialog = styled__default.default(Paper).attrs({
   componentId: "sc-1mewo3f-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return styled.css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";overflow:hidden;"], theme.width, theme.background, edsUtils.typographyTemplate(theme.typography), edsUtils.bordersTemplate(theme.border), theme.spacings.bottom);
+  return styled.css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";"], theme.width, theme.background, edsUtils.typographyTemplate(theme.typography), edsUtils.bordersTemplate(theme.border), theme.spacings.bottom);
 });
 var StyledNativeDialog = styled__default.default.dialog.withConfig({
   displayName: "Dialog__StyledNativeDialog",
@@ -5617,6 +5623,9 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   var token = edsUtils.useToken({
     density: density
   }, popover);
+
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = edsUtils.useIsInDialog(anchorEl);
   var popover$1 = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({
@@ -5644,7 +5653,7 @@ var Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
     }))
   });
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: withinPortal ? /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    children: withinPortal && !inDialog ? /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       id: "eds-popover-container",
       children: open && trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
@@ -7004,28 +7013,32 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
     anchorEl: anchorEl,
     open: open
   });
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-      id: "eds-menu-container",
-      children: /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
-        theme: token,
-        children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({
-          elevation: "raised"
-        }, props), getFloatingProps({
-          ref: popoverRef,
-          style: _objectSpread__default.default(_objectSpread__default.default({}, style), {}, {
-            position: strategy,
-            top: y || 0,
-            left: x || 0
-          })
-        })), {}, {
-          children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
-            children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, _objectSpread__default.default(_objectSpread__default.default({}, menuProps), {}, {
-              ref: ref
-            }))
-          })
+
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = edsUtils.useIsInDialog(anchorEl);
+  var menuElement = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({
+      elevation: "raised"
+    }, props), getFloatingProps({
+      ref: popoverRef,
+      style: _objectSpread__default.default(_objectSpread__default.default({}, style), {}, {
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      })
+    })), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, _objectSpread__default.default(_objectSpread__default.default({}, menuProps), {}, {
+          ref: ref
         }))
       })
+    }))
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: inDialog ? menuElement : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      id: "eds-menu-container",
+      children: menuElement
     })
   });
 });
@@ -8713,6 +8726,9 @@ function AutocompleteInner(props, ref) {
   var selectedItemsLabels = react.useMemo(function () {
     return selectedItems.map(getLabel);
   }, [selectedItems, getLabel]);
+
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = edsUtils.useIsInDialog(refs.domReference.current);
   var optionsList = /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread__default.default(_objectSpread__default.default({}, getFloatingProps({
     ref: refs.setFloating,
     style: {
@@ -8823,7 +8839,7 @@ function AutocompleteInner(props, ref) {
             }))]
           })
         }, other))
-      }), disablePortal ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList
       })]

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

@@ -12,7 +12,7 @@ import { Icon } from '../Icon/index.js';
 import { Progress } from '../Progress/index.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
-import { bordersTemplate, useToken, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
+import { bordersTemplate, useToken, useIsomorphicLayoutEffect, useIsInDialog } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -431,6 +431,9 @@ function AutocompleteInner(props, ref) {
   var selectedItemsLabels = useMemo(function () {
     return selectedItems.map(getLabel);
   }, [selectedItems, getLabel]);
+
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = useIsInDialog(refs.domReference.current);
   var optionsList = /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, getFloatingProps({
     ref: refs.setFloating,
     style: {
@@ -541,7 +544,7 @@ function AutocompleteInner(props, ref) {
             }))]
           })
         }, other))
-      }), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
+      }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList
       })]

package/dist/esm/components/Dialog/Dialog.js

@@ -17,7 +17,7 @@ var StyledDialog = styled(Paper).attrs({
   componentId: "sc-1mewo3f-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";overflow:hidden;"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
+  return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
 });
 var StyledNativeDialog = styled.dialog.withConfig({
   displayName: "Dialog__StyledNativeDialog",

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

@@ -5,7 +5,7 @@ import { forwardRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
 import { MenuList } from './MenuList.js';
-import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useGlobalKeyPress } from '@equinor/eds-utils';
+import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useIsInDialog, 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';
@@ -163,28 +163,32 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
     anchorEl: anchorEl,
     open: open
   });
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsx(FloatingPortal, {
-      id: "eds-menu-container",
-      children: /*#__PURE__*/jsx(ThemeProvider, {
-        theme: token,
-        children: /*#__PURE__*/jsx(MenuPaper, _objectSpread(_objectSpread(_objectSpread({
-          elevation: "raised"
-        }, props), getFloatingProps({
-          ref: popoverRef,
-          style: _objectSpread(_objectSpread({}, style), {}, {
-            position: strategy,
-            top: y || 0,
-            left: x || 0
-          })
-        })), {}, {
-          children: /*#__PURE__*/jsx(MenuProvider, {
-            children: /*#__PURE__*/jsx(MenuContainer, _objectSpread(_objectSpread({}, menuProps), {}, {
-              ref: ref
-            }))
-          })
+
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = useIsInDialog(anchorEl);
+  var menuElement = /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx(MenuPaper, _objectSpread(_objectSpread(_objectSpread({
+      elevation: "raised"
+    }, props), getFloatingProps({
+      ref: popoverRef,
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      })
+    })), {}, {
+      children: /*#__PURE__*/jsx(MenuProvider, {
+        children: /*#__PURE__*/jsx(MenuContainer, _objectSpread(_objectSpread({}, menuProps), {}, {
+          ref: ref
         }))
       })
+    }))
+  });
+  return /*#__PURE__*/jsx(Fragment, {
+    children: inDialog ? menuElement : /*#__PURE__*/jsx(FloatingPortal, {
+      id: "eds-menu-container",
+      children: menuElement
     })
   });
 });

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

@@ -3,7 +3,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
+import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken, useIsInDialog } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -122,6 +122,9 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   var token = useToken({
     density: density
   }, popover);
+
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = useIsInDialog(anchorEl);
   var popover$1 = /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(PopoverPaper, _objectSpread(_objectSpread(_objectSpread({
@@ -149,7 +152,7 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
     }))
   });
   return /*#__PURE__*/jsx(Fragment, {
-    children: withinPortal ? /*#__PURE__*/jsx(FloatingPortal, {
+    children: withinPortal && !inDialog ? /*#__PURE__*/jsx(FloatingPortal, {
       id: "eds-popover-container",
       children: open && trapFocus ? open && /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,

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

@@ -4,10 +4,10 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from 'react';
 import styled from 'styled-components';
-import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs } from '@equinor/eds-utils';
+import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs, useIsInDialog } 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 { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var _excluded = ["title", "placement", "children", "style", "enterDelay"];
 var StyledTooltip = styled.div.withConfig({
@@ -108,27 +108,33 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
   var updatedChildren = /*#__PURE__*/cloneElement(children, _objectSpread({}, getReferenceProps(_objectSpread({
     ref: anchorRef
   }, children.props))));
+
+  //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
+  var inDialog = useIsInDialog(refs.domReference.current);
+  var TooltipEl = /*#__PURE__*/jsxs(StyledTooltip, _objectSpread(_objectSpread(_objectSpread({}, rest), getFloatingProps({
+    ref: tooltipRef,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      position: strategy,
+      top: y || 0,
+      left: x || 0
+    })
+  })), {}, {
+    children: [title, /*#__PURE__*/jsx(ArrowWrapper, {
+      ref: arrowRef,
+      children: /*#__PURE__*/jsx(TooltipArrow, {
+        className: "arrowSvg",
+        children: /*#__PURE__*/jsx("path", {
+          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+        })
+      })
+    })]
+  }));
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(FloatingPortal, {
+    children: [inDialog ? /*#__PURE__*/jsx(Fragment, {
+      children: shouldOpen && open && TooltipEl
+    }) : /*#__PURE__*/jsx(FloatingPortal, {
       id: "eds-tooltip-container",
-      children: shouldOpen && open && /*#__PURE__*/jsxs(StyledTooltip, _objectSpread(_objectSpread(_objectSpread({}, rest), getFloatingProps({
-        ref: tooltipRef,
-        style: _objectSpread(_objectSpread({}, style), {}, {
-          position: strategy,
-          top: y || 0,
-          left: x || 0
-        })
-      })), {}, {
-        children: [title, /*#__PURE__*/jsx(ArrowWrapper, {
-          ref: arrowRef,
-          children: /*#__PURE__*/jsx(TooltipArrow, {
-            className: "arrowSvg",
-            children: /*#__PURE__*/jsx("path", {
-              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: shouldOpen && open && TooltipEl
     }), updatedChildren]
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.32.2",
+  "version": "0.32.3",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -86,9 +86,9 @@
     "@floating-ui/react": "^0.24.3",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "downshift": "^7.6.0",
-    "@equinor/eds-icons": "0.19.2",
+    "@equinor/eds-icons": "^0.19.3",
     "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "0.8.0"
+    "@equinor/eds-utils": "0.8.1"
   },
   "engines": {
     "pnpm": ">=4",