@equinor/eds-core-react 0.41.1 → 0.41.2

package/dist/eds-core-react.cjs

@@ -11193,23 +11193,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 +11252,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 +11267,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 +11281,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 +11292,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 +11303,9 @@ const YearGrid = ({
       autoFocus: true,
       children: /*#__PURE__*/jsxRuntime.jsx(GridFocusManager, {
         year: selectedYear,
-        setFocusedYear: setFocusedYear
+        setFocusedYear: setFocusedYear,
+        yearPickerPage: yearPickerPage,
+        setYearPickerPage: setYearPickerPage
       })
     })
   });
@@ -11267,10 +11313,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 +11346,9 @@ function CalendarGrid({
         year
       }));
       setShowYearPicker(false);
-    }
+    },
+    yearPickerPage: yearPickerPage,
+    setYearPickerPage: setYearPickerPage
   }) : /*#__PURE__*/jsxRuntime.jsxs("table", {
     ...gridProps,
     style: {
@@ -11356,15 +11409,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 +11447,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 +11469,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 +11507,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 +11518,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 +12056,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 +12087,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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.41.1",
+  "version": "0.41.2",
   "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-icons": "^0.21.0",
-    "@equinor/eds-utils": "0.8.5"
+    "@equinor/eds-utils": "0.8.5",
+    "@equinor/eds-icons": "^0.21.0"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",