@equinor/eds-core-react 0.41.1 → 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]);
             }
@@ -11193,23 +11200,58 @@ const GridColumn = styled__default.default.button.withConfig({
 })(["background-color:transparent;outline:none;border:none;display:flex;justify-content:center;cursor:pointer;padding:8px;font-size:", ";font-family:", ";font-weight:", ";line-height:", ";color:", ";border-radius:999px;", ";&:hover{background-color:#f0f0f0;}&:focus{outline:2px dashed ", ";}"], edsTokens.tokens.typography.navigation.button.fontSize, edsTokens.tokens.typography.navigation.button.fontFamily, edsTokens.tokens.typography.navigation.button.fontWeight, edsTokens.tokens.typography.navigation.button.lineHeight, edsTokens.tokens.colors.text.static_icons__default.rgba, ({
   $active
 }) => $active ? `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba}` : '', edsTokens.tokens.colors.interactive.primary__resting.rgba);
+const TOTAL_VISIBLE_YEARS = 36;
+const RANGE_OFFSET = 30 / 2;
 const GridFocusManager = ({
   year: selectedYear,
-  setFocusedYear
+  setFocusedYear,
+  yearPickerPage,
+  setYearPickerPage
 }) => {
   const focusManager = reactAria.useFocusManager();
-  const onKeyDown = e => {
+  const prevYear = react.useRef();
+  const navByKeyboard = react.useRef(false);
+  const page = yearPickerPage * TOTAL_VISIBLE_YEARS;
+  const years = Array.from({
+    length: TOTAL_VISIBLE_YEARS
+  }, (_, i) => i + (selectedYear + page - RANGE_OFFSET));
+  react.useEffect(() => {
+    if (prevYear.current === undefined) {
+      prevYear.current = yearPickerPage;
+      return;
+    }
+    if (!navByKeyboard.current) {
+      focusManager.focusFirst();
+      return;
+    }
+    navByKeyboard.current = false;
+    yearPickerPage > prevYear.current ? focusManager.focusFirst() : focusManager.focusLast();
+    prevYear.current = yearPickerPage;
+  }, [yearPickerPage, focusManager]);
+  const onKeyDown = year => e => {
     const target = e.currentTarget;
     const parent = target.parentElement;
+    const isFirstYear = years.at(0) === year;
+    const isLastYear = years.at(-1) === year;
     switch (e.key) {
       case 'ArrowRight':
         e.preventDefault();
+        if (isLastYear) {
+          navByKeyboard.current = true;
+          setYearPickerPage(page => page + 1);
+          break;
+        }
         focusManager.focusNext({
           wrap: true
         });
         break;
       case 'ArrowLeft':
         e.preventDefault();
+        if (isFirstYear) {
+          navByKeyboard.current = true;
+          setYearPickerPage(page => page - 1);
+          break;
+        }
         focusManager.focusPrevious({
           wrap: true
         });
@@ -11217,6 +11259,11 @@ const GridFocusManager = ({
       case 'ArrowDown':
         {
           e.preventDefault();
+          if (isLastYear) {
+            navByKeyboard.current = true;
+            setYearPickerPage(page => page + 1);
+            break;
+          }
           const selfIndex = Array.from(parent.children).indexOf(target);
           const focusElement = Array.from(parent.children).at(selfIndex + 5);
           focusManager.focusNext({
@@ -11227,6 +11274,11 @@ const GridFocusManager = ({
       case 'ArrowUp':
         {
           e.preventDefault();
+          if (isFirstYear) {
+            navByKeyboard.current = true;
+            setYearPickerPage(page => page - 1);
+            break;
+          }
           const selfIndex = Array.from(parent.children).indexOf(target);
           const focusElement = Array.from(parent.children).at(selfIndex - 5);
           focusManager.focusPrevious({
@@ -11236,12 +11288,9 @@ const GridFocusManager = ({
         }
     }
   };
-  const years = Array.from({
-    length: 36
-  }, (_, i) => i + (selectedYear - 30 / 2));
   return years.map(year => /*#__PURE__*/jsxRuntime.jsx(GridColumn, {
     $active: selectedYear === year,
-    onKeyDown: onKeyDown,
+    onKeyDown: onKeyDown(year),
     onClick: () => setFocusedYear(year),
     "aria-label": `Set year to ${year}`,
     tabIndex: 0,
@@ -11250,7 +11299,9 @@ const GridFocusManager = ({
 };
 const YearGrid = ({
   setFocusedYear,
-  year: selectedYear
+  year: selectedYear,
+  yearPickerPage,
+  setYearPickerPage
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx(Grid, {
     children: /*#__PURE__*/jsxRuntime.jsx(reactAria.FocusScope, {
@@ -11259,7 +11310,9 @@ const YearGrid = ({
       autoFocus: true,
       children: /*#__PURE__*/jsxRuntime.jsx(GridFocusManager, {
         year: selectedYear,
-        setFocusedYear: setFocusedYear
+        setFocusedYear: setFocusedYear,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     })
   });
@@ -11267,10 +11320,15 @@ const YearGrid = ({
 
 /* eslint-disable react/no-array-index-key */
 
+/**
+ * The grid laying out the cells for the calendars in {link Calendar} and {link RangeCalendar}
+ */
 function CalendarGrid({
   state,
   showYearPicker,
   setShowYearPicker,
+  yearPickerPage,
+  setYearPickerPage,
   ...props
 }) {
   const {
@@ -11295,7 +11353,9 @@ function CalendarGrid({
         year
       }));
       setShowYearPicker(false);
-    }
+    },
+    yearPickerPage: yearPickerPage,
+    setYearPickerPage: setYearPickerPage
   }) : /*#__PURE__*/jsxRuntime.jsxs("table", {
     ...gridProps,
     style: {
@@ -11356,15 +11416,16 @@ function CalendarHeader({
   previousMonthDisabled,
   nextMonthDisabled,
   showYearPicker,
-  setShowYearPicker
+  setShowYearPicker,
+  setYearPickerPage
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(HeaderWrapper, {
     children: /*#__PURE__*/jsxRuntime.jsxs(HeaderActions, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Button$1, {
         variant: 'ghost_icon',
         "aria-label": 'Previous month',
-        disabled: previousMonthDisabled || showYearPicker,
-        onClick: () => state.focusPreviousPage(),
+        disabled: previousMonthDisabled,
+        onClick: () => showYearPicker ? setYearPickerPage(page => page - 1) : state.focusPreviousPage(),
         children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
           data: edsIcons.chevron_left
         })
@@ -11393,8 +11454,8 @@ function CalendarHeader({
         }
       }), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
         variant: 'ghost_icon',
-        onClick: () => state.focusNextPage(),
-        disabled: nextMonthDisabled || showYearPicker,
+        onClick: () => showYearPicker ? setYearPickerPage(page => page + 1) : state.focusNextPage(),
+        disabled: nextMonthDisabled,
         "aria-label": 'Next month',
         children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
           data: edsIcons.chevron_right
@@ -11415,6 +11476,7 @@ const Calendar = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const [showYearPicker, setShowYearPicker] = react.useState(false);
+  const [yearPickerPage, setYearPickerPage] = react.useState(0);
   const {
     locale
   } = reactAria.useLocale();
@@ -11452,7 +11514,8 @@ const Calendar = /*#__PURE__*/react.forwardRef(({
         previousMonthDisabled: prevButtonProps.isDisabled,
         nextMonthDisabled: nextButtonProps.isDisabled,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        setYearPickerPage: setYearPickerPage
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
       className: "calendar",
@@ -11462,7 +11525,9 @@ const Calendar = /*#__PURE__*/react.forwardRef(({
       children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
         state: calendarState,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     }), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
       children: /*#__PURE__*/jsxRuntime.jsx(Footer, {
@@ -11998,6 +12063,7 @@ const RangeCalendar = /*#__PURE__*/react.forwardRef(({
   ...props
 }, ref) => {
   const [showYearPicker, setShowYearPicker] = react.useState(false);
+  const [yearPickerPage, setYearPickerPage] = react.useState(0);
   const {
     locale
   } = reactAria.useLocale();
@@ -12028,13 +12094,16 @@ const RangeCalendar = /*#__PURE__*/react.forwardRef(({
         state: state,
         title: title,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        setYearPickerPage: setYearPickerPage
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
       children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
         state: state,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     }), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
       children: /*#__PURE__*/jsxRuntime.jsx(Footer, {

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/Datepicker/calendars/Calendar.js

@@ -14,6 +14,7 @@ const Calendar = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const [showYearPicker, setShowYearPicker] = useState(false);
+  const [yearPickerPage, setYearPickerPage] = useState(0);
   const {
     locale
   } = useLocale();
@@ -51,7 +52,8 @@ const Calendar = /*#__PURE__*/forwardRef(({
         previousMonthDisabled: prevButtonProps.isDisabled,
         nextMonthDisabled: nextButtonProps.isDisabled,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        setYearPickerPage: setYearPickerPage
       })
     }), /*#__PURE__*/jsx(Popover.Content, {
       className: "calendar",
@@ -61,7 +63,9 @@ const Calendar = /*#__PURE__*/forwardRef(({
       children: /*#__PURE__*/jsx(CalendarGrid, {
         state: calendarState,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     }), Footer && /*#__PURE__*/jsx(Popover.Actions, {
       children: /*#__PURE__*/jsx(Footer, {

package/dist/esm/components/Datepicker/calendars/CalendarGrid.js

@@ -6,10 +6,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 /* eslint-disable react/no-array-index-key */
 
+/**
+ * The grid laying out the cells for the calendars in {link Calendar} and {link RangeCalendar}
+ */
 function CalendarGrid({
   state,
   showYearPicker,
   setShowYearPicker,
+  yearPickerPage,
+  setYearPickerPage,
   ...props
 }) {
   const {
@@ -34,7 +39,9 @@ function CalendarGrid({
         year
       }));
       setShowYearPicker(false);
-    }
+    },
+    yearPickerPage: yearPickerPage,
+    setYearPickerPage: setYearPickerPage
   }) : /*#__PURE__*/jsxs("table", {
     ...gridProps,
     style: {

package/dist/esm/components/Datepicker/calendars/CalendarHeader.js

@@ -39,15 +39,16 @@ function CalendarHeader({
   previousMonthDisabled,
   nextMonthDisabled,
   showYearPicker,
-  setShowYearPicker
+  setShowYearPicker,
+  setYearPickerPage
 }) {
   return /*#__PURE__*/jsx(HeaderWrapper, {
     children: /*#__PURE__*/jsxs(HeaderActions, {
       children: [/*#__PURE__*/jsx(Button, {
         variant: 'ghost_icon',
         "aria-label": 'Previous month',
-        disabled: previousMonthDisabled || showYearPicker,
-        onClick: () => state.focusPreviousPage(),
+        disabled: previousMonthDisabled,
+        onClick: () => showYearPicker ? setYearPickerPage(page => page - 1) : state.focusPreviousPage(),
         children: /*#__PURE__*/jsx(Icon, {
           data: chevron_left
         })
@@ -76,8 +77,8 @@ function CalendarHeader({
         }
       }), /*#__PURE__*/jsx(Button, {
         variant: 'ghost_icon',
-        onClick: () => state.focusNextPage(),
-        disabled: nextMonthDisabled || showYearPicker,
+        onClick: () => showYearPicker ? setYearPickerPage(page => page + 1) : state.focusNextPage(),
+        disabled: nextMonthDisabled,
         "aria-label": 'Next month',
         children: /*#__PURE__*/jsx(Icon, {
           data: chevron_right

package/dist/esm/components/Datepicker/calendars/RangeCalendar.js

@@ -14,6 +14,7 @@ const RangeCalendar = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const [showYearPicker, setShowYearPicker] = useState(false);
+  const [yearPickerPage, setYearPickerPage] = useState(0);
   const {
     locale
   } = useLocale();
@@ -44,13 +45,16 @@ const RangeCalendar = /*#__PURE__*/forwardRef(({
         state: state,
         title: title,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        setYearPickerPage: setYearPickerPage
       })
     }), /*#__PURE__*/jsx(Popover.Content, {
       children: /*#__PURE__*/jsx(CalendarGrid, {
         state: state,
         setShowYearPicker: setShowYearPicker,
-        showYearPicker: showYearPicker
+        showYearPicker: showYearPicker,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     }), Footer && /*#__PURE__*/jsx(Popover.Actions, {
       children: /*#__PURE__*/jsx(Footer, {

package/dist/esm/components/Datepicker/calendars/YearGrid.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 import { FocusScope, useFocusManager } from 'react-aria';
+import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // Disable no-autofocus - it's not the native autofocus attribute, but react-aria's autoFocus prop
@@ -15,23 +16,58 @@ const GridColumn = styled.button.withConfig({
 })(["background-color:transparent;outline:none;border:none;display:flex;justify-content:center;cursor:pointer;padding:8px;font-size:", ";font-family:", ";font-weight:", ";line-height:", ";color:", ";border-radius:999px;", ";&:hover{background-color:#f0f0f0;}&:focus{outline:2px dashed ", ";}"], tokens.typography.navigation.button.fontSize, tokens.typography.navigation.button.fontFamily, tokens.typography.navigation.button.fontWeight, tokens.typography.navigation.button.lineHeight, tokens.colors.text.static_icons__default.rgba, ({
   $active
 }) => $active ? `background-color: ${tokens.colors.interactive.primary__selected_highlight.rgba}` : '', tokens.colors.interactive.primary__resting.rgba);
+const TOTAL_VISIBLE_YEARS = 36;
+const RANGE_OFFSET = 30 / 2;
 const GridFocusManager = ({
   year: selectedYear,
-  setFocusedYear
+  setFocusedYear,
+  yearPickerPage,
+  setYearPickerPage
 }) => {
   const focusManager = useFocusManager();
-  const onKeyDown = e => {
+  const prevYear = useRef();
+  const navByKeyboard = useRef(false);
+  const page = yearPickerPage * TOTAL_VISIBLE_YEARS;
+  const years = Array.from({
+    length: TOTAL_VISIBLE_YEARS
+  }, (_, i) => i + (selectedYear + page - RANGE_OFFSET));
+  useEffect(() => {
+    if (prevYear.current === undefined) {
+      prevYear.current = yearPickerPage;
+      return;
+    }
+    if (!navByKeyboard.current) {
+      focusManager.focusFirst();
+      return;
+    }
+    navByKeyboard.current = false;
+    yearPickerPage > prevYear.current ? focusManager.focusFirst() : focusManager.focusLast();
+    prevYear.current = yearPickerPage;
+  }, [yearPickerPage, focusManager]);
+  const onKeyDown = year => e => {
     const target = e.currentTarget;
     const parent = target.parentElement;
+    const isFirstYear = years.at(0) === year;
+    const isLastYear = years.at(-1) === year;
     switch (e.key) {
       case 'ArrowRight':
         e.preventDefault();
+        if (isLastYear) {
+          navByKeyboard.current = true;
+          setYearPickerPage(page => page + 1);
+          break;
+        }
         focusManager.focusNext({
           wrap: true
         });
         break;
       case 'ArrowLeft':
         e.preventDefault();
+        if (isFirstYear) {
+          navByKeyboard.current = true;
+          setYearPickerPage(page => page - 1);
+          break;
+        }
         focusManager.focusPrevious({
           wrap: true
         });
@@ -39,6 +75,11 @@ const GridFocusManager = ({
       case 'ArrowDown':
         {
           e.preventDefault();
+          if (isLastYear) {
+            navByKeyboard.current = true;
+            setYearPickerPage(page => page + 1);
+            break;
+          }
           const selfIndex = Array.from(parent.children).indexOf(target);
           const focusElement = Array.from(parent.children).at(selfIndex + 5);
           focusManager.focusNext({
@@ -49,6 +90,11 @@ const GridFocusManager = ({
       case 'ArrowUp':
         {
           e.preventDefault();
+          if (isFirstYear) {
+            navByKeyboard.current = true;
+            setYearPickerPage(page => page - 1);
+            break;
+          }
           const selfIndex = Array.from(parent.children).indexOf(target);
           const focusElement = Array.from(parent.children).at(selfIndex - 5);
           focusManager.focusPrevious({
@@ -58,12 +104,9 @@ const GridFocusManager = ({
         }
     }
   };
-  const years = Array.from({
-    length: 36
-  }, (_, i) => i + (selectedYear - 30 / 2));
   return years.map(year => /*#__PURE__*/jsx(GridColumn, {
     $active: selectedYear === year,
-    onKeyDown: onKeyDown,
+    onKeyDown: onKeyDown(year),
     onClick: () => setFocusedYear(year),
     "aria-label": `Set year to ${year}`,
     tabIndex: 0,
@@ -72,7 +115,9 @@ const GridFocusManager = ({
 };
 const YearGrid = ({
   setFocusedYear,
-  year: selectedYear
+  year: selectedYear,
+  yearPickerPage,
+  setYearPickerPage
 }) => {
   return /*#__PURE__*/jsx(Grid, {
     children: /*#__PURE__*/jsx(FocusScope, {
@@ -81,7 +126,9 @@ const YearGrid = ({
       autoFocus: true,
       children: /*#__PURE__*/jsx(GridFocusManager, {
         year: selectedYear,
-        setFocusedYear: setFocusedYear
+        setFocusedYear: setFocusedYear,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     })
   });

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/Datepicker/calendars/CalendarGrid.d.ts

@@ -1,10 +1,13 @@
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { AriaCalendarGridProps } from 'react-aria';
+import { Dispatch, SetStateAction } from 'react';
 /**
  * The grid laying out the cells for the calendars in {link Calendar} and {link RangeCalendar}
  */
-export declare function CalendarGrid({ state, showYearPicker, setShowYearPicker, ...props }: {
+export declare function CalendarGrid({ state, showYearPicker, setShowYearPicker, yearPickerPage, setYearPickerPage, ...props }: {
     state: CalendarState | RangeCalendarState;
     showYearPicker: boolean;
     setShowYearPicker: (showYearPicker: boolean) => void;
+    yearPickerPage: number;
+    setYearPickerPage: Dispatch<SetStateAction<number>>;
 } & AriaCalendarGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Datepicker/calendars/CalendarHeader.d.ts

@@ -1,12 +1,14 @@
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
+import { Dispatch, SetStateAction } from 'react';
 /**
  * The default header for the calendar components if no custom header is provided
  */
-export declare function CalendarHeader({ state, title, previousMonthDisabled, nextMonthDisabled, showYearPicker, setShowYearPicker, }: {
+export declare function CalendarHeader({ state, title, previousMonthDisabled, nextMonthDisabled, showYearPicker, setShowYearPicker, setYearPickerPage, }: {
     state: CalendarState | RangeCalendarState;
     title: string;
     previousMonthDisabled?: boolean;
     nextMonthDisabled?: boolean;
     showYearPicker: boolean;
     setShowYearPicker: (showYearPicker: boolean) => void;
+    setYearPickerPage?: Dispatch<SetStateAction<number>>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Datepicker/calendars/YearGrid.d.ts

@@ -1,4 +1,7 @@
-export declare const YearGrid: ({ setFocusedYear, year: selectedYear, }: {
+import { Dispatch, SetStateAction } from 'react';
+export declare const YearGrid: ({ setFocusedYear, year: selectedYear, yearPickerPage, setYearPickerPage, }: {
     setFocusedYear: (year: number) => void;
     year: number;
+    yearPickerPage: number;
+    setYearPickerPage?: Dispatch<SetStateAction<number>>;
 }) => import("react/jsx-runtime").JSX.Element;

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.1",
+  "version": "0.41.3",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"