@helsenorge/datepicker 12.4.0 → 12.7.0

package/CHANGELOG.md

@@ -1,3 +1,95 @@
+## [12.7.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.4&targetVersion=GTv12.7.0) (2025-10-17)
+
+### Features
+
+- **formgroup:** endre prop for FormFieldTag til å være lik som i label
+  ([850b4e0](https://github.com/helsenorge/designsystem/commit/850b4e0cdc5888dbe29ba894c23e460dfe9d4930)), closes
+  [#362503](https://github.com/helsenorge/designsystem/issues/362503)
+
+## [12.6.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.3&targetVersion=GTv12.6.4) (2025-10-16)
+
+### Reverts
+
+- Revert "v12.6.3" ([973e6b8](https://github.com/helsenorge/designsystem/commit/973e6b8893fc765892a993adf83d93f4d5bfd5dd))
+
+## [12.6.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.2&targetVersion=GTv12.6.3) (2025-10-16)
+
+## [12.6.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.1&targetVersion=GTv12.6.2) (2025-10-16)
+
+## [12.6.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.6.0&targetVersion=GTv12.6.1) (2025-10-16)
+
+## [12.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.5.0&targetVersion=GTv12.6.0) (2025-10-16)
+
+### Features
+
+- **formfieldtag:** ny komponent for å markere obligatoriske felter
+  ([43186e8](https://github.com/helsenorge/designsystem/commit/43186e85e06d6b3e34124c3afd372180ecff9af9)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+- **stickynote:** justeringer etter ny figma komponent
+  ([b3afb5a](https://github.com/helsenorge/designsystem/commit/b3afb5a41f1400bef0afce40b244deafcac7b505)), closes
+  [#361520](https://github.com/helsenorge/designsystem/issues/361520)
+
+### Bug Fixes
+
+- **formfieldtag:** fiks display for at den holder seg i riktig størrelse
+  ([1e53dc1](https://github.com/helsenorge/designsystem/commit/1e53dc1cf52215a3476a1d6d86c36f8108b0fbc1)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+- **label:** bruk formfieldtag som komponent slik at man får satt id
+  ([006e152](https://github.com/helsenorge/designsystem/commit/006e1520cc16b66f637c11c193902510ebd72b76)), closes
+  [#361861](https://github.com/helsenorge/designsystem/issues/361861)
+
+## [12.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.4.0&targetVersion=GTv12.5.0) (2025-10-08)
+
+### Features
+
+- **datepicker:** default språkstøtte fra sot
+  ([1f2b2ae](https://github.com/helsenorge/designsystem/commit/1f2b2ae2ddd0ab527d976ec2d3dc6ec9293f58a0))
+- **drawer:** default språkstøtte fra sot
+  ([56517c5](https://github.com/helsenorge/designsystem/commit/56517c50ec9f4d61ecbbd3ce2ebbe509d9af898b))
+- **formgroup:** lagt til legendclassname prop
+  ([9dbd90c](https://github.com/helsenorge/designsystem/commit/9dbd90c7efbb838fb5204870bcfd90a089d03f4c)), closes
+  [#360836](https://github.com/helsenorge/designsystem/issues/360836)
+- **helptriggericon:** lagt til classname prop
+  ([b9d207e](https://github.com/helsenorge/designsystem/commit/b9d207ec0871ce79259562042f4b321b21b94fd8)), closes
+  [#360496](https://github.com/helsenorge/designsystem/issues/360496)
+- **icon:** nytt ikon feedback ([0e3f89c](https://github.com/helsenorge/designsystem/commit/0e3f89c04c897c8667593396cecaceb8d50fd879)),
+  closes [#360055](https://github.com/helsenorge/designsystem/issues/360055)
+- **listeditmode:** funksjonalitet for å redigere liste
+  ([d87e8c5](https://github.com/helsenorge/designsystem/commit/d87e8c59d44ce2278b403df3c3858029db280ad0)), closes
+  [#359697](https://github.com/helsenorge/designsystem/issues/359697)
+- **tabs:** default språkstøtte fra sot
+  ([733fd7e](https://github.com/helsenorge/designsystem/commit/733fd7e559e57cb3dfaf5e2efd52ac8754db8f6d))
+
+### Bug Fixes
+
+- **drawer:** legg breakpoint check på outer level for å vise animasjon riktig igjen
+  ([04f604a](https://github.com/helsenorge/designsystem/commit/04f604aaba66738ac710c28cb5514ec7b0d2967a)), closes
+  [#360641](https://github.com/helsenorge/designsystem/issues/360641)
+- **favoritebutton:** kun vis fokusstrek på focus-visible"
+  ([2dc6b2f](https://github.com/helsenorge/designsystem/commit/2dc6b2f954cdb7a5b5b3e7326a8c0d42723ef972)), closes
+  [#357829](https://github.com/helsenorge/designsystem/issues/357829)
+- **helptriggericon:** fiks så komponenten fungerer i liste igjen
+  ([45f801e](https://github.com/helsenorge/designsystem/commit/45f801edb77306cd7cba614396a7abc1089a610b)), closes
+  [#353532](https://github.com/helsenorge/designsystem/issues/353532) [#360885](https://github.com/helsenorge/designsystem/issues/360885)
+- **helptriggericon:** juster ikon ift tekst uten å endre linjehøyde
+  ([687a0fa](https://github.com/helsenorge/designsystem/commit/687a0fa13798a757408d417bde0d9bdb57cb59e1)), closes
+  [#360885](https://github.com/helsenorge/designsystem/issues/360885)
+- **list:** vertikalt align knapper riktig i liste
+  ([2926423](https://github.com/helsenorge/designsystem/commit/2926423198f6459228ea28b5c68945407756c6e3)), closes
+  [#353532](https://github.com/helsenorge/designsystem/issues/353532)
+- **panel:** juster paddings for å ta hensyn til statuslinje
+  ([1e8f5ff](https://github.com/helsenorge/designsystem/commit/1e8f5ff07c8e796af7269b3f4b92269a50d4fdcb)), closes
+  [#360101](https://github.com/helsenorge/designsystem/issues/360101)
+- **popmenu:** ikon sentreres riktig
+  ([3a8f5ac](https://github.com/helsenorge/designsystem/commit/3a8f5ac3dd9dfcff4fc75f101a4f4a6dbfbd1c88)), closes
+  [#361064](https://github.com/helsenorge/designsystem/issues/361064)
+- **radiobutton:** disabled har samme radius som andre states
+  ([27548a7](https://github.com/helsenorge/designsystem/commit/27548a74a68ac6c2d4c5783b84da056971995a4d)), closes
+  [#350142](https://github.com/helsenorge/designsystem/issues/350142)
+- **radiobutton:** hele wrapperen skal ikke se klikkbar ut
+  ([2c396cd](https://github.com/helsenorge/designsystem/commit/2c396cd1a5c79869ef9d72941c9c93efba47dc47)), closes
+  [#350142](https://github.com/helsenorge/designsystem/issues/350142)
+
 ## [12.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.3.0&targetVersion=GTv12.4.0) (2025-09-23)
 
 ### Features

package/components/DatePicker/DatePicker.d.ts

@@ -4,13 +4,14 @@ import { DayPickerProps } from 'react-day-picker';
 import { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';
 import { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';
 import { DatePickerAriaLabels } from './DatePickerPopup';
+import { HNDesignsystemDatePicker } from '../../resources/Resources';
 export type DateFormat = 'dd.MM.yyyy';
 export interface DatePickerProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'onBlur' | 'autoComplete'>, Pick<DayPickerProps, 'dir' | 'initialFocus'> {
     /** Setter labels for popup på desktop visning */
     ariaLabels?: DatePickerAriaLabels;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Sets aria-label on the button that opens the datepicker dialogue */
+    /** @deprecated Sets aria-label on the button that opens the datepicker dialogue */
     dateButtonAriaLabel?: string;
     /** Sets the format of the date - only applies for desktop use. Native mobile date fields base their formats on the device */
     dateFormat?: DateFormat;
@@ -46,6 +47,8 @@ export interface DatePickerProps extends ErrorWrapperClassNameProps, Pick<React.
     onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, date?: Date | string) => void;
     /** Only use this to trigger validation. Callback triggered by change in chosen date via the datepicker popup */
     onDatePopupClosed?: (date: Date | string | undefined) => void;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDatePicker>;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Determines the placement of the DatePicker popup. Default: automatic positioning. */

package/components/DatePicker/index.js

@@ -1,16 +1,17 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { createContext, useContext, useCallback, useRef, useLayoutEffect, useState, useEffect, useMemo } from "react";
-import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear, isValid, parse, isWithinInterval } from "date-fns";
+import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear, isValid, parse, isWithinInterval } from "date-fns";
 import { nb } from "date-fns/locale";
 import Button$1 from "@helsenorge/designsystem-react/components/Button";
 import Icon from "@helsenorge/designsystem-react/components/Icon";
 import Calendar from "@helsenorge/designsystem-react/components/Icons/Calendar";
 import Input from "@helsenorge/designsystem-react/components/Input";
 import { PopOverVariant } from "@helsenorge/designsystem-react/components/PopOver";
-import { ZIndex, KeyboardEventKey } from "@helsenorge/designsystem-react/constants";
+import { ZIndex, LanguageLocales as LanguageLocales$1, KeyboardEventKey } from "@helsenorge/designsystem-react/constants";
 import { useKeyboardEvent } from "@helsenorge/designsystem-react/hooks/useKeyboardEvent";
 import { useOutsideEvent } from "@helsenorge/designsystem-react/hooks/useOutsideEvent";
 import { usePseudoClasses } from "@helsenorge/designsystem-react/hooks/usePseudoClasses";
+import { useLanguage } from "@helsenorge/designsystem-react/utils/language";
 import { isMobileUA } from "@helsenorge/designsystem-react/utils/mobile";
 import { isMutableRefObject, mergeRefs } from "@helsenorge/designsystem-react/utils/refs";
 import classNames from "classnames";
@@ -22,6 +23,7 @@ import { useSize } from "@helsenorge/designsystem-react/hooks/useSize";
 import { getSpacer } from "@helsenorge/designsystem-react/theme/currys/spacing";
 import styles from "./styles.module.scss";
 import { enUS } from "date-fns/locale/en-US";
+import { LanguageLocales } from "@helsenorge/designsystem-react";
 import ErrorWrapper from "@helsenorge/designsystem-react/components/ErrorWrapper";
 import { useUuid } from "@helsenorge/designsystem-react/hooks/useUuid";
 import { isComponent } from "@helsenorge/designsystem-react/utils/component";
@@ -323,6 +325,19 @@ class DateLib {
       var _a;
       return ((_a = this.overrides) == null ? void 0 : _a.eachMonthOfInterval) ? this.overrides.eachMonthOfInterval(interval) : eachMonthOfInterval(interval);
     };
+    this.eachYearOfInterval = (interval) => {
+      var _a;
+      const years = ((_a = this.overrides) == null ? void 0 : _a.eachYearOfInterval) ? this.overrides.eachYearOfInterval(interval) : eachYearOfInterval(interval);
+      const uniqueYears = new Set(years.map((d) => this.getYear(d)));
+      if (uniqueYears.size === years.length) {
+        return years;
+      }
+      const yearsArray = [];
+      uniqueYears.forEach((y) => {
+        yearsArray.push(new Date(y, 0, 1));
+      });
+      return yearsArray;
+    };
     this.endOfBroadcastWeek = (date) => {
       var _a;
       return ((_a = this.overrides) == null ? void 0 : _a.endOfBroadcastWeek) ? this.overrides.endOfBroadcastWeek(date) : endOfBroadcastWeek(date, this);
@@ -473,7 +488,62 @@ class DateLib {
   formatNumber(value) {
     return this.replaceDigits(value.toString());
   }
-}
+  /**
+   * Returns the preferred ordering for month and year labels for the current
+   * locale.
+   */
+  getMonthYearOrder() {
+    var _a;
+    const code = (_a = this.options.locale) == null ? void 0 : _a.code;
+    if (!code) {
+      return "month-first";
+    }
+    return DateLib.yearFirstLocales.has(code) ? "year-first" : "month-first";
+  }
+  /**
+   * Formats the month/year pair respecting locale conventions.
+   *
+   * @since 9.11.0
+   */
+  formatMonthYear(date) {
+    const { locale, timeZone, numerals } = this.options;
+    const localeCode = locale == null ? void 0 : locale.code;
+    if (localeCode && DateLib.yearFirstLocales.has(localeCode)) {
+      try {
+        const intl = new Intl.DateTimeFormat(localeCode, {
+          month: "long",
+          year: "numeric",
+          timeZone,
+          numberingSystem: numerals
+        });
+        const formatted = intl.format(date);
+        return formatted;
+      } catch {
+      }
+    }
+    const pattern = this.getMonthYearOrder() === "year-first" ? "y LLLL" : "LLLL y";
+    return this.format(date, pattern);
+  }
+}
+DateLib.yearFirstLocales = /* @__PURE__ */ new Set([
+  "eu",
+  "hu",
+  "ja",
+  "ja-Hira",
+  "ja-JP",
+  "ko",
+  "ko-KR",
+  "lt",
+  "lt-LT",
+  "lv",
+  "lv-LV",
+  "mn",
+  "mn-MN",
+  "zh",
+  "zh-CN",
+  "zh-HK",
+  "zh-TW"
+]);
 const defaultDateLib = new DateLib();
 class CalendarDay {
   constructor(date, displayMonth, dateLib = defaultDateLib) {
@@ -641,30 +711,30 @@ function MonthsDropdown(props) {
   return React.createElement(components2.Dropdown, { ...props });
 }
 function Nav(props) {
-  const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
+  const { onPreviousClick, onNextClick, previousMonth: previousMonth2, nextMonth: nextMonth2, ...navProps } = props;
   const { components: components2, classNames: classNames2, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
   const handleNextClick = useCallback((e) => {
-    if (nextMonth) {
+    if (nextMonth2) {
       onNextClick == null ? void 0 : onNextClick(e);
     }
-  }, [nextMonth, onNextClick]);
+  }, [nextMonth2, onNextClick]);
   const handlePreviousClick = useCallback((e) => {
-    if (previousMonth) {
+    if (previousMonth2) {
       onPreviousClick == null ? void 0 : onPreviousClick(e);
     }
-  }, [previousMonth, onPreviousClick]);
+  }, [previousMonth2, onPreviousClick]);
   return React.createElement(
     "nav",
     { ...navProps },
     React.createElement(
       components2.PreviousMonthButton,
-      { type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick },
-      React.createElement(components2.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames2[UI.Chevron], orientation: "left" })
+      { type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth2 ? void 0 : -1, "aria-disabled": previousMonth2 ? void 0 : true, "aria-label": labelPrevious2(previousMonth2), onClick: handlePreviousClick },
+      React.createElement(components2.Chevron, { disabled: previousMonth2 ? void 0 : true, className: classNames2[UI.Chevron], orientation: "left" })
     ),
     React.createElement(
       components2.NextMonthButton,
-      { type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick },
-      React.createElement(components2.Chevron, { disabled: nextMonth ? void 0 : true, orientation: "right", className: classNames2[UI.Chevron] })
+      { type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth2 ? void 0 : -1, "aria-disabled": nextMonth2 ? void 0 : true, "aria-label": labelNext2(nextMonth2), onClick: handleNextClick },
+      React.createElement(components2.Chevron, { disabled: nextMonth2 ? void 0 : true, orientation: "right", className: classNames2[UI.Chevron] })
     )
   );
 }
@@ -945,7 +1015,8 @@ function getDefaultClassNames() {
   return classNames2;
 }
 function formatCaption(month, options, dateLib) {
-  return (dateLib ?? new DateLib(options)).format(month, "LLLL y");
+  const lib = dateLib ?? new DateLib(options);
+  return lib.formatMonthYear(month);
 }
 const formatMonthCaption = formatCaption;
 function formatDay(date, options, dateLib) {
@@ -1033,21 +1104,16 @@ function getYearOptions(navStart, navEnd, formatters, dateLib, reverse = false)
     return void 0;
   if (!navEnd)
     return void 0;
-  const { startOfYear: startOfYear2, endOfYear: endOfYear2, addYears: addYears2, getYear: getYear2, isBefore: isBefore2, isSameYear: isSameYear2 } = dateLib;
+  const { startOfYear: startOfYear2, endOfYear: endOfYear2, eachYearOfInterval: eachYearOfInterval2, getYear: getYear2 } = dateLib;
   const firstNavYear = startOfYear2(navStart);
   const lastNavYear = endOfYear2(navEnd);
-  const years = [];
-  let year = firstNavYear;
-  while (isBefore2(year, lastNavYear) || isSameYear2(year, lastNavYear)) {
-    years.push(year);
-    year = addYears2(year, 1);
-  }
+  const years = eachYearOfInterval2({ start: firstNavYear, end: lastNavYear });
   if (reverse)
     years.reverse();
-  return years.map((year2) => {
-    const label = formatters.formatYearDropdown(year2, dateLib);
+  return years.map((year) => {
+    const label = formatters.formatYearDropdown(year, dateLib);
     return {
-      value: getYear2(year2),
+      value: getYear2(year),
       label,
       disabled: false
     };
@@ -1063,7 +1129,8 @@ function labelDayButton(date, modifiers, options, dateLib) {
 }
 const labelDay = labelDayButton;
 function labelGrid(date, options, dateLib) {
-  return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
+  const lib = dateLib ?? new DateLib(options);
+  return lib.formatMonthYear(date);
 }
 const labelCaption = labelGrid;
 function labelGridcell(date, modifiers, options, dateLib) {
@@ -1434,8 +1501,8 @@ function useCalendar(props, dateLib) {
   const months = getMonths(displayMonths, dates, props, dateLib);
   const weeks = getWeeks(months);
   const days = getDays(months);
-  const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
-  const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+  const previousMonth2 = getPreviousMonth(firstMonth, navStart, props, dateLib);
+  const nextMonth2 = getNextMonth(firstMonth, navEnd, props, dateLib);
   const { disableNavigation, onMonthChange } = props;
   const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day)));
   const goToMonth = (date) => {
@@ -1464,8 +1531,8 @@ function useCalendar(props, dateLib) {
     days,
     navStart,
     navEnd,
-    previousMonth,
-    nextMonth,
+    previousMonth: previousMonth2,
+    nextMonth: nextMonth2,
     goToMonth,
     goToDay
   };
@@ -1555,6 +1622,12 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
     const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib);
     if (!nextFocus)
       return;
+    if (props.disableNavigation) {
+      const isNextInCalendar = calendar.days.some((day) => day.isEqualTo(nextFocus));
+      if (!isNextInCalendar) {
+        return;
+      }
+    }
     calendar.goToDay(nextFocus);
     setFocused(nextFocus);
   };
@@ -1867,7 +1940,7 @@ function DayPicker(initialProps) {
   const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles: styles2 } = props;
   const { formatCaption: formatCaption2, formatDay: formatDay2, formatMonthDropdown: formatMonthDropdown2, formatWeekNumber: formatWeekNumber2, formatWeekNumberHeader: formatWeekNumberHeader2, formatWeekdayName: formatWeekdayName2, formatYearDropdown: formatYearDropdown2 } = formatters;
   const calendar = useCalendar(props, dateLib);
-  const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar;
+  const { days, months, navStart, navEnd, previousMonth: previousMonth2, nextMonth: nextMonth2, goToMonth } = calendar;
   const getModifiers = createGetModifiers(days, props, navStart, navEnd, dateLib);
   const { isSelected, select, selected: selectedValue } = useSelection(props, dateLib) ?? {};
   const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
@@ -1875,17 +1948,17 @@ function DayPicker(initialProps) {
   const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);
   const isInteractive = mode !== void 0 || onDayClick !== void 0;
   const handlePreviousClick = useCallback(() => {
-    if (!previousMonth)
+    if (!previousMonth2)
       return;
-    goToMonth(previousMonth);
-    onPrevClick == null ? void 0 : onPrevClick(previousMonth);
-  }, [previousMonth, goToMonth, onPrevClick]);
+    goToMonth(previousMonth2);
+    onPrevClick == null ? void 0 : onPrevClick(previousMonth2);
+  }, [previousMonth2, goToMonth, onPrevClick]);
   const handleNextClick = useCallback(() => {
-    if (!nextMonth)
+    if (!nextMonth2)
       return;
-    goToMonth(nextMonth);
-    onNextClick == null ? void 0 : onNextClick(nextMonth);
-  }, [goToMonth, nextMonth, onNextClick]);
+    goToMonth(nextMonth2);
+    onNextClick == null ? void 0 : onNextClick(nextMonth2);
+  }, [goToMonth, nextMonth2, onNextClick]);
   const handleDayClick = useCallback((day, m) => (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1960,8 +2033,8 @@ function DayPicker(initialProps) {
     select,
     isSelected,
     months,
-    nextMonth,
-    previousMonth,
+    nextMonth: nextMonth2,
+    previousMonth: previousMonth2,
     goToMonth,
     getModifiers,
     components: components2,
@@ -1975,11 +2048,11 @@ function DayPicker(initialProps) {
     { value: contextValue },
     React.createElement(
       components2.Root,
-      { rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+      { rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
       React.createElement(
         components2.Months,
         { className: classNames2[UI.Months], style: styles2 == null ? void 0 : styles2[UI.Months] },
-        !props.hideNavigation && !navLayout && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
+        !props.hideNavigation && !navLayout && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth2, nextMonth: nextMonth2 }),
         months.map((calendarMonth, displayIndex) => {
           return React.createElement(
             components2.Month,
@@ -1994,14 +2067,18 @@ function DayPicker(initialProps) {
             },
             navLayout === "around" && !props.hideNavigation && displayIndex === 0 && React.createElement(
               components2.PreviousMonthButton,
-              { type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
-              React.createElement(components2.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
+              { type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth2 ? void 0 : -1, "aria-disabled": previousMonth2 ? void 0 : true, "aria-label": labelPrevious2(previousMonth2), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
+              React.createElement(components2.Chevron, { disabled: previousMonth2 ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
             ),
             React.createElement(components2.MonthCaption, { "data-animated-caption": props.animate ? "true" : void 0, className: classNames2[UI.MonthCaption], style: styles2 == null ? void 0 : styles2[UI.MonthCaption], calendarMonth, displayIndex }, (captionLayout == null ? void 0 : captionLayout.startsWith("dropdown")) ? React.createElement(
               components2.DropdownNav,
               { className: classNames2[UI.Dropdowns], style: styles2 == null ? void 0 : styles2[UI.Dropdowns] },
-              captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React.createElement(components2.MonthsDropdown, { className: classNames2[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React.createElement("span", null, formatMonthDropdown2(calendarMonth.date, dateLib)),
-              captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React.createElement(components2.YearsDropdown, { className: classNames2[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React.createElement("span", null, formatYearDropdown2(calendarMonth.date, dateLib)),
+              (() => {
+                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React.createElement(components2.MonthsDropdown, { key: "month", className: classNames2[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
+                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React.createElement(components2.YearsDropdown, { key: "year", className: classNames2[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames: classNames2, components: components2, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles2 == null ? void 0 : styles2[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
+                const controls = dateLib.getMonthYearOrder() === "year-first" ? [yearControl, monthControl] : [monthControl, yearControl];
+                return controls;
+              })(),
               React.createElement("span", { role: "status", "aria-live": "polite", style: {
                 border: 0,
                 clip: "rect(0 0 0 0)",
@@ -2020,10 +2097,10 @@ function DayPicker(initialProps) {
             )),
             navLayout === "around" && !props.hideNavigation && displayIndex === numberOfMonths - 1 && React.createElement(
               components2.NextMonthButton,
-              { type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
-              React.createElement(components2.Chevron, { disabled: nextMonth ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
+              { type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth2 ? void 0 : -1, "aria-disabled": nextMonth2 ? void 0 : true, "aria-label": labelNext2(nextMonth2), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
+              React.createElement(components2.Chevron, { disabled: nextMonth2 ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
             ),
-            displayIndex === numberOfMonths - 1 && navLayout === "after" && !props.hideNavigation && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
+            displayIndex === numberOfMonths - 1 && navLayout === "after" && !props.hideNavigation && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth2, nextMonth: nextMonth2 }),
             React.createElement(
               components2.MonthGrid,
               { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid2(calendarMonth.date, dateLib.options, dateLib) || void 0, className: classNames2[UI.MonthGrid], style: styles2 == null ? void 0 : styles2[UI.MonthGrid] },
@@ -2282,10 +2359,55 @@ const DatePickerPopup = (props) => {
     /* @__PURE__ */ jsx("div", { ref: arrowRef, className: popupArrowClasses, style: { ...arrowStyle, zIndex } })
   ] });
 };
+const dateButtonAriaLabel$1 = "Open datepicker";
+const dayButtonBase$1 = "{date}";
+const dayButtonToday$1 = "Today, {date}";
+const dayButtonSelected$1 = "{date}, selected";
+const nextMonth$1 = "Next month";
+const previousMonth$1 = "Previous month";
+const monthDropdown$1 = "Select month";
+const yearDropdown$1 = "Select year";
+const enGB = {
+  dateButtonAriaLabel: dateButtonAriaLabel$1,
+  dayButtonBase: dayButtonBase$1,
+  dayButtonToday: dayButtonToday$1,
+  dayButtonSelected: dayButtonSelected$1,
+  nextMonth: nextMonth$1,
+  previousMonth: previousMonth$1,
+  monthDropdown: monthDropdown$1,
+  yearDropdown: yearDropdown$1
+};
+const dateButtonAriaLabel = "Åpne datovelger";
+const dayButtonBase = "{date}";
+const dayButtonToday = "I dag, {date}";
+const dayButtonSelected = "{date} valgt";
+const nextMonth = "Neste måned";
+const previousMonth = "Forrige måned";
+const monthDropdown = "Velg måned";
+const yearDropdown = "Velg år";
+const nbNO = {
+  dateButtonAriaLabel,
+  dayButtonBase,
+  dayButtonToday,
+  dayButtonSelected,
+  nextMonth,
+  previousMonth,
+  monthDropdown,
+  yearDropdown
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
 const DatePicker = React.forwardRef((props, ref) => {
   const {
     className,
-    dateButtonAriaLabel,
+    dateButtonAriaLabel: dateButtonAriaLabel2,
     dateFormat = "dd.MM.yyyy",
     dateValue,
     defaultMonth,
@@ -2308,6 +2430,7 @@ const DatePicker = React.forwardRef((props, ref) => {
     onChange,
     onDatePopupClosed,
     testId,
+    resources,
     autoComplete = "off",
     variant = PopOverVariant.positionautomatic,
     zIndex = ZIndex.PopOver,
@@ -2318,6 +2441,22 @@ const DatePicker = React.forwardRef((props, ref) => {
   const [month, setMonth2] = useState(defaultMonth);
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [returnInputFocus, setReturnInputFocus] = useState(false);
+  const { language } = useLanguage(LanguageLocales$1.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    dateButtonAriaLabel: dateButtonAriaLabel2 || (resources == null ? void 0 : resources.dateButtonAriaLabel) || defaultResources.dateButtonAriaLabel
+  };
+  const popupAriaLabels = {
+    dayButtonBase: (ariaLabels == null ? void 0 : ariaLabels.dayButtonBase) || mergedResources.dayButtonBase,
+    dayButtonToday: (ariaLabels == null ? void 0 : ariaLabels.dayButtonToday) || mergedResources.dayButtonToday,
+    dayButtonSelected: (ariaLabels == null ? void 0 : ariaLabels.dayButtonSelected) || mergedResources.dayButtonSelected,
+    nextMonth: (ariaLabels == null ? void 0 : ariaLabels.nextMonth) || mergedResources.nextMonth,
+    previousMonth: (ariaLabels == null ? void 0 : ariaLabels.previousMonth) || mergedResources.previousMonth,
+    monthDropdown: (ariaLabels == null ? void 0 : ariaLabels.monthDropdown) || mergedResources.monthDropdown,
+    yearDropdown: (ariaLabels == null ? void 0 : ariaLabels.yearDropdown) || mergedResources.yearDropdown
+  };
   const weekendMatcher = {
     dayOfWeek: [0, 6]
   };
@@ -2493,7 +2632,7 @@ const DatePicker = React.forwardRef((props, ref) => {
           Button$1,
           {
             disabled,
-            ariaLabel: dateButtonAriaLabel ?? "Velg dato",
+            ariaLabel: dateButtonAriaLabel2 ?? "Velg dato",
             onClick: handleButtonClick,
             tabIndex: datePickerOpen ? -1 : 0,
             variant: "borderless",
@@ -2522,7 +2661,7 @@ const DatePicker = React.forwardRef((props, ref) => {
         onMonthChange: setMonth2,
         variant,
         zIndex,
-        ariaLabels
+        ariaLabels: popupAriaLabels
       }
     )
   ] });