@equinor/eds-core-react 0.41.2 → 0.41.3

package/dist/eds-core-react.cjs

@@ -6320,19 +6320,25 @@ const PopoverPaper = styled__default.default(Paper).withConfig({
       paper
     }
   } = theme;
-  return styled.css(["", " background:", ";", " z-index:1400;&:focus-visible{", "}"], edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border), edsUtils.outlineTemplate(paper.states.focus.outline));
+  return styled.css(["position:relative;", " background:", ";", " &:focus-visible{", "}"], edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border), edsUtils.outlineTemplate(paper.states.focus.outline));
 });
+const StyledPopover$2 = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Popover__StyledPopover",
+  componentId: "sc-b7p1is-1"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
 const ArrowWrapper = styled__default.default.div.withConfig({
   displayName: "Popover__ArrowWrapper",
-  componentId: "sc-b7p1is-1"
+  componentId: "sc-b7p1is-2"
 })(({
   theme
 }) => {
-  return styled.css(["position:absolute;width:", ";height:", ";z-index:-1;"], theme.entities.arrow.width, theme.entities.arrow.height);
+  return styled.css(["position:absolute;width:", ";height:", ";"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
 const InnerWrapper = styled__default.default.div.withConfig({
   displayName: "Popover__InnerWrapper",
-  componentId: "sc-b7p1is-2"
+  componentId: "sc-b7p1is-3"
 })(({
   theme
 }) => {
@@ -6340,7 +6346,7 @@ const InnerWrapper = styled__default.default.div.withConfig({
 });
 const PopoverArrow = styled__default.default.svg.withConfig({
   displayName: "Popover__PopoverArrow",
-  componentId: "sc-b7p1is-3"
+  componentId: "sc-b7p1is-4"
 })(({
   theme
 }) => {
@@ -6357,6 +6363,9 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   trapFocus,
   ...rest
 }, ref) {
+  if (withinPortal) {
+    console.warn('Popover "withinPortal" prop has been deprecated. Popover now uses the native popover api');
+  }
   const arrowRef = react.useRef(null);
   const {
     x,
@@ -6389,6 +6398,13 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   const {
     getFloatingProps
   } = react$1.useInteractions([react$1.useDismiss(context)]);
+  edsUtils.useIsomorphicLayoutEffect(() => {
+    if (open) {
+      refs.floating.current?.showPopover();
+    } else {
+      refs.floating.current?.hidePopover();
+    }
+  }, [open, refs.floating]);
   react.useEffect(() => {
     if (arrowRef.current) {
       const staticSide = {
@@ -6424,7 +6440,6 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrowRef.current, arrowX, arrowY, finalPlacement]);
   const props = {
-    open,
     ...rest
   };
   const {
@@ -6433,14 +6448,10 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   const token = edsUtils.useToken({
     density
   }, popover);
-
-  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = edsUtils.useIsInDialog(anchorEl);
   const popover$1 = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
-      elevation: "overlay",
-      ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledPopover$2, {
+      popover: "manual",
       ...getFloatingProps({
         ref: popoverRef,
         style: {
@@ -6450,35 +6461,30 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
           left: x || 0
         }
       }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
-        ref: arrowRef,
-        className: "arrow",
-        children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
-          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: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
+        elevation: "overlay",
+        ...props,
+        children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
+          ref: arrowRef,
+          className: "arrow",
+          children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
+            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"
+            })
           })
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(InnerWrapper, {
-        children: children
-      })]
+        }), /*#__PURE__*/jsxRuntime.jsx(InnerWrapper, {
+          children: children
+        })]
+      })
     })
   });
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    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,
-        modal: true,
-        children: popover$1
-      }) : open && popover$1
-    }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
-        context: context,
-        modal: true,
-        children: popover$1
-      }) : open && popover$1
-    })
+    children: trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+      context: context,
+      modal: true,
+      children: popover$1
+    }) : open && popover$1
   });
 });
 
@@ -9562,7 +9568,6 @@ function AutocompleteInner(props, ref) {
     itemCompare,
     allowSelectAll,
     initialSelectedOptions: _initialSelectedOptions = [],
-    disablePortal,
     optionDisabled = defaultOptionDisabled,
     optionsFilter,
     autoWidth,
@@ -9582,9 +9587,6 @@ function AutocompleteInner(props, ref) {
   // MARK: initializing data/setup
   const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
   const initialSelectedOptions = _initialSelectedOptions ? itemCompare ? options.filter(item => _initialSelectedOptions.some(compare => itemCompare(item, compare))) : _initialSelectedOptions : undefined;
-  if (disablePortal) {
-    console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
-  }
   const isControlled = Boolean(selectedOptions);
   const [inputOptions, setInputOptions] = react.useState(options);
   const [_availableItems, setAvailableItems] = react.useState(inputOptions);
@@ -9774,7 +9776,12 @@ function AutocompleteInner(props, ref) {
             if (selectedItem === AllSymbol) {
               toggleAllSelected();
             } else if (multiple) {
-              selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
+              const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
+              if (shouldRemove) {
+                removeSelectedItem(selectedItem);
+              } else {
+                addSelectedItem(selectedItem);
+              }
             } else {
               setSelectedItems([selectedItem]);
             }

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

@@ -172,7 +172,6 @@ function AutocompleteInner(props, ref) {
     itemCompare,
     allowSelectAll,
     initialSelectedOptions: _initialSelectedOptions = [],
-    disablePortal,
     optionDisabled = defaultOptionDisabled,
     optionsFilter,
     autoWidth,
@@ -192,9 +191,6 @@ function AutocompleteInner(props, ref) {
   // MARK: initializing data/setup
   const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
   const initialSelectedOptions = _initialSelectedOptions ? itemCompare ? options.filter(item => _initialSelectedOptions.some(compare => itemCompare(item, compare))) : _initialSelectedOptions : undefined;
-  if (disablePortal) {
-    console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
-  }
   const isControlled = Boolean(selectedOptions);
   const [inputOptions, setInputOptions] = useState(options);
   const [_availableItems, setAvailableItems] = useState(inputOptions);
@@ -384,7 +380,12 @@ function AutocompleteInner(props, ref) {
             if (selectedItem === AllSymbol) {
               toggleAllSelected();
             } else if (multiple) {
-              selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
+              const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
+              if (shouldRemove) {
+                removeSelectedItem(selectedItem);
+              } else {
+                addSelectedItem(selectedItem);
+              }
             } else {
               setSelectedItems([selectedItem]);
             }

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

@@ -1,8 +1,8 @@
 import { forwardRef, useRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken, useIsInDialog } from '@equinor/eds-utils';
+import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useIsomorphicLayoutEffect, useToken } 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 { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingFocusManager } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
@@ -18,19 +18,25 @@ const PopoverPaper = styled(Paper).withConfig({
       paper
     }
   } = theme;
-  return css(["", " background:", ";", " z-index:1400;&:focus-visible{", "}"], typographyTemplate(theme.typography), theme.background, bordersTemplate(theme.border), outlineTemplate(paper.states.focus.outline));
+  return css(["position:relative;", " background:", ";", " &:focus-visible{", "}"], typographyTemplate(theme.typography), theme.background, bordersTemplate(theme.border), outlineTemplate(paper.states.focus.outline));
 });
+const StyledPopover = styled('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Popover__StyledPopover",
+  componentId: "sc-b7p1is-1"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
-  componentId: "sc-b7p1is-1"
+  componentId: "sc-b7p1is-2"
 })(({
   theme
 }) => {
-  return css(["position:absolute;width:", ";height:", ";z-index:-1;"], theme.entities.arrow.width, theme.entities.arrow.height);
+  return css(["position:absolute;width:", ";height:", ";"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
 const InnerWrapper = styled.div.withConfig({
   displayName: "Popover__InnerWrapper",
-  componentId: "sc-b7p1is-2"
+  componentId: "sc-b7p1is-3"
 })(({
   theme
 }) => {
@@ -38,7 +44,7 @@ const InnerWrapper = styled.div.withConfig({
 });
 const PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
-  componentId: "sc-b7p1is-3"
+  componentId: "sc-b7p1is-4"
 })(({
   theme
 }) => {
@@ -55,6 +61,9 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   trapFocus,
   ...rest
 }, ref) {
+  if (withinPortal) {
+    console.warn('Popover "withinPortal" prop has been deprecated. Popover now uses the native popover api');
+  }
   const arrowRef = useRef(null);
   const {
     x,
@@ -87,6 +96,13 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   const {
     getFloatingProps
   } = useInteractions([useDismiss(context)]);
+  useIsomorphicLayoutEffect(() => {
+    if (open) {
+      refs.floating.current?.showPopover();
+    } else {
+      refs.floating.current?.hidePopover();
+    }
+  }, [open, refs.floating]);
   useEffect(() => {
     if (arrowRef.current) {
       const staticSide = {
@@ -122,7 +138,6 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrowRef.current, arrowX, arrowY, finalPlacement]);
   const props = {
-    open,
     ...rest
   };
   const {
@@ -131,14 +146,10 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   const token = useToken({
     density
   }, popover);
-
-  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  const inDialog = useIsInDialog(anchorEl);
   const popover$1 = /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(PopoverPaper, {
-      elevation: "overlay",
-      ...props,
+    children: /*#__PURE__*/jsx(StyledPopover, {
+      popover: "manual",
       ...getFloatingProps({
         ref: popoverRef,
         style: {
@@ -148,35 +159,30 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
           left: x || 0
         }
       }),
-      children: [/*#__PURE__*/jsx(ArrowWrapper, {
-        ref: arrowRef,
-        className: "arrow",
-        children: /*#__PURE__*/jsx(PopoverArrow, {
-          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: /*#__PURE__*/jsxs(PopoverPaper, {
+        elevation: "overlay",
+        ...props,
+        children: [/*#__PURE__*/jsx(ArrowWrapper, {
+          ref: arrowRef,
+          className: "arrow",
+          children: /*#__PURE__*/jsx(PopoverArrow, {
+            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"
+            })
           })
-        })
-      }), /*#__PURE__*/jsx(InnerWrapper, {
-        children: children
-      })]
+        }), /*#__PURE__*/jsx(InnerWrapper, {
+          children: children
+        })]
+      })
     })
   });
   return /*#__PURE__*/jsx(Fragment, {
-    children: withinPortal && !inDialog ? /*#__PURE__*/jsx(FloatingPortal, {
-      id: "eds-popover-container",
-      children: open && trapFocus ? open && /*#__PURE__*/jsx(FloatingFocusManager, {
-        context: context,
-        modal: true,
-        children: popover$1
-      }) : open && popover$1
-    }) : /*#__PURE__*/jsx(Fragment, {
-      children: trapFocus ? open && /*#__PURE__*/jsx(FloatingFocusManager, {
-        context: context,
-        modal: true,
-        children: popover$1
-      }) : open && popover$1
-    })
+    children: trapFocus ? open && /*#__PURE__*/jsx(FloatingFocusManager, {
+      context: context,
+      modal: true,
+      children: popover$1
+    }) : open && popover$1
   });
 });
 

package/dist/types/components/Autocomplete/Autocomplete.d.ts

@@ -61,10 +61,6 @@ export type AutocompleteProps<T> = {
     optionLabel?: (option: T) => string;
     /**  Custom option template */
     optionComponent?: (option: T, isSelected: boolean) => ReactNode;
-    /** Disable use of react portal for dropdown
-     * @deprecated  Autocomplete now uses the native popover api to render the dropdown. This prop will be removed in a future version
-     */
-    disablePortal?: boolean;
     /** Disable option
      * @default () => false
      */

package/dist/types/components/Popover/Popover.d.ts

@@ -9,7 +9,9 @@ export type PopoverProps = {
     anchorEl?: HTMLElement | null;
     /** Is Popover open */
     open: boolean;
-    /** initializes react portal for dropdown, default to false. */
+    /**
+     * @deprecated  Popover now uses the native popover api instead of react portal. This prop will be removed in a future version
+     */
     withinPortal?: boolean;
     /** Determines whether focus should be trapped within dropdown,
      * default to false. */
@@ -24,7 +26,9 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     anchorEl?: HTMLElement | null;
     /** Is Popover open */
     open: boolean;
-    /** initializes react portal for dropdown, default to false. */
+    /**
+     * @deprecated  Popover now uses the native popover api instead of react portal. This prop will be removed in a future version
+     */
     withinPortal?: boolean;
     /** Determines whether focus should be trapped within dropdown,
      * default to false. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.41.2",
+  "version": "0.41.3",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -89,8 +89,8 @@
     "downshift": "9.0.7",
     "react-aria": "^3.34.1",
     "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "0.8.5",
-    "@equinor/eds-icons": "^0.21.0"
+    "@equinor/eds-icons": "^0.21.0",
+    "@equinor/eds-utils": "0.8.5"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",