@navikt/ds-react 7.5.2 → 7.6.0

package/esm/util/i18n/locales/nb.js

@@ -95,5 +95,25 @@ export default {
             reset: "Tilbakestill tidsperspektiv",
         },
     },
+    DatePicker: {
+        close: "Lukk", // TODO: Consider making global
+        chooseDate: "Velg dato",
+        chooseDates: "Velg datoer",
+        chooseDateRange: "Velg start- og sluttdato",
+        chooseMonth: "Velg måned",
+        week: "Uke",
+        weekNumber: "Uke {week}",
+        selectWeekNumber: "Velg uke {week}",
+        month: "Måned",
+        goToNextMonth: "Gå til neste måned",
+        goToPreviousMonth: "Gå til forrige måned",
+        year: "År",
+        goToNextYear: "Gå til neste år",
+        goToPreviousYear: "Gå til forrige år",
+        openDatePicker: "Åpne datovelger",
+        openMonthPicker: "Åpne månedsvelger",
+        closeDatePicker: "Lukk datovelger",
+        closeMonthPicker: "Lukk månedsvelger",
+    },
 };
 //# sourceMappingURL=nb.js.map

package/esm/util/i18n/locales/nb.js.map

@@ -1 +1 @@
-{"version":3,"file":"nb.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAM7C,eAAe;IACb,MAAM,EAAE;QACN,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,iBAAiB;KAC5B;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,cAAc,EAAE,YAAY;YAC5B,WAAW,EAAE,wBAAwB;YACrC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,mCAAmC;SACvD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,gCAAgC;YAClD,iBAAiB,EAAE,aAAa;YAChC,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,8DAA8D;YAC9D,WAAW,EAAE,OAAO;SACrB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,iDAAiD;KAC3D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,OAAO;KACd;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,0BAA0B;QAC1B,SAAS,EAAE,6CAA6C;QACxD,YAAY,EAAE,sBAAsB;QACpC,SAAS,EAAE,oBAAoB;KAChC;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,YAAY;QACxB,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,QAAQ;QACrB,UAAU,EAAE,MAAM;QAClB,GAAG,EAAE;YACH,SAAS,EAAE,gBAAgB;YAC3B,MAAM,EAAE,mBAAmB;SAC5B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,UAAU;YACnB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS,EAAE,qCAAqC;YACzD,MAAM,EAAE,gCAAgC;SACzC;QACD,GAAG,EAAE;YACH,GAAG,EAAE,aAAa;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,mCAAmC;YACzC,KAAK,EAAE,6BAA6B;SACrC;KACF;CACuB,CAAC"}
+{"version":3,"file":"nb.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nb.ts"],"names":[],"mappings":"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"}

package/esm/util/i18n/locales/nn.d.ts

@@ -92,5 +92,25 @@ declare const _default: {
             reset: string;
         };
     };
+    DatePicker: {
+        close: string;
+        chooseDate: string;
+        chooseDates: string;
+        chooseDateRange: string;
+        chooseMonth: string;
+        week: string;
+        weekNumber: string;
+        selectWeekNumber: string;
+        month: string;
+        goToNextMonth: string;
+        goToPreviousMonth: string;
+        year: string;
+        goToNextYear: string;
+        goToPreviousYear: string;
+        openDatePicker: string;
+        openMonthPicker: string;
+        closeDatePicker: string;
+        closeMonthPicker: string;
+    };
 };
 export default _default;

package/esm/util/i18n/locales/nn.js

@@ -93,5 +93,25 @@ export default {
             reset: "Tilbakestill tidsperspektiv",
         },
     },
+    DatePicker: {
+        close: "Lukk",
+        chooseDate: "Vel dato",
+        chooseDates: "Vel datoar",
+        chooseDateRange: "Vel start- og sluttdato",
+        chooseMonth: "Vel månad",
+        week: "Veke",
+        weekNumber: "Veke {week}",
+        selectWeekNumber: "Vel veke {week}",
+        month: "Månad",
+        goToNextMonth: "Gå til neste månad",
+        goToPreviousMonth: "Gå til førre månad",
+        year: "År",
+        goToNextYear: "Gå til neste år",
+        goToPreviousYear: "Gå til førre år",
+        openDatePicker: "Opne datoveljar",
+        openMonthPicker: "Opne månadsveljar",
+        closeDatePicker: "Lukk datoveljar",
+        closeMonthPicker: "Lukk månadsveljar",
+    },
 };
 //# sourceMappingURL=nn.js.map

package/esm/util/i18n/locales/nn.js.map

@@ -1 +1 @@
-{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrC,eAAe;IACb,MAAM,EAAE;QACN,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,gBAAgB;KAC3B;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,cAAc,EAAE,WAAW;YAC3B,WAAW,EAAE,uBAAuB;YACpC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,qCAAqC;SACzD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,+BAA+B;YACjD,iBAAiB,EAAE,YAAY;YAC/B,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,OAAO;SACrB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gDAAgD;KAC1D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE,OAAO;KACd;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,8CAA8C;QACzD,YAAY,EAAE,yBAAyB;QACvC,SAAS,EAAE,qBAAqB;KACjC;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,YAAY;QACxB,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,QAAQ;QACrB,UAAU,EAAE,MAAM;QAClB,GAAG,EAAE;YACH,SAAS,EAAE,gBAAgB;YAC3B,MAAM,EAAE,mBAAmB;SAC5B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,UAAU;YACnB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,gCAAgC;SACzC;QACD,GAAG,EAAE;YACH,GAAG,EAAE,aAAa;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,iCAAiC;YACvC,KAAK,EAAE,6BAA6B;SACrC;KACF;CACqB,CAAC"}
+{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.5.2",
+  "version": "7.6.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -604,8 +604,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.5.2",
-    "@navikt/ds-tokens": "^7.5.2",
+    "@navikt/aksel-icons": "^7.6.0",
+    "@navikt/ds-tokens": "^7.6.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"
@@ -629,7 +629,7 @@
   },
   "peerDependencies": {
     "@types/react": ">=17.0.30",
-    "react": ">=17.0.0"
+    "react": ">=17.0.0 || >19.0.0-rc"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/src/date/datepicker/DatePicker.tsx

@@ -5,10 +5,11 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DateContext } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString, labels } from "../utils";
+import { getLocaleFromString } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -66,7 +67,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   (
     {
       children,
-      locale = "nb",
+      locale,
       dropdownCaption,
       disabled = [],
       disableWeekends = false,
@@ -85,6 +86,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     },
     ref,
   ) => {
+    const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
@@ -114,7 +116,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
 
     const DatePickerComponent = (
       <DayPicker
-        locale={getLocaleFromString(locale)}
+        locale={locale ? getLocaleFromString(locale) : langProviderLocale}
         mode={mode}
         onSelect={handleSelect}
         selected={selected ?? selectedDates}
@@ -134,7 +136,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         }}
         weekStartsOn={1}
         initialFocus={false}
-        labels={labels as any}
         modifiers={{
           weekend: (day) => disableWeekends && isWeekend(day),
         }}

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -3,7 +3,8 @@ import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
-import { getLocaleFromString, labels } from "../utils";
+import { useDateLocale } from "../../util/i18n/i18n.context";
+import { getLocaleFromString } from "../utils";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
@@ -49,7 +50,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
   (
     {
       className,
-      locale = "nb",
+      locale,
       dropdownCaption,
       disabled = [],
       disableWeekends = false,
@@ -63,6 +64,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     },
     ref,
   ) => {
+    const langProviderLocale = useDateLocale();
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
     >(defaultSelected);
@@ -83,7 +85,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
         className={cl("navds-date__standalone-wrapper", className)}
       >
         <DayPicker
-          locale={getLocaleFromString(locale)}
+          locale={locale ? getLocaleFromString(locale) : langProviderLocale}
           mode={mode}
           onSelect={handleSelect}
           selected={selected ?? selectedDates}
@@ -103,7 +105,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
           }}
           weekStartsOn={1}
           initialFocus={false}
-          labels={labels as any}
           modifiers={{
             weekend: (day) => disableWeekends && isWeekend(day),
           }}

package/src/date/datepicker/parts/Caption.tsx

@@ -3,6 +3,8 @@ import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Label } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getTranslations } from "../../utils";
 import WeekRow from "./WeekRow";
 
 /**
@@ -11,13 +13,10 @@ import WeekRow from "./WeekRow";
 export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
   const { goToMonth, nextMonth, previousMonth } = useNavigation();
   const {
-    labels: { labelPrevious, labelNext },
     formatters: { formatCaption },
     locale,
   } = useDayPicker();
-
-  const previousLabel = labelPrevious(previousMonth, { locale });
-  const nextLabel = labelNext(nextMonth, { locale });
+  const translate = useI18n("DatePicker", getTranslations(locale.code));
 
   return (
     <>
@@ -26,7 +25,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
           variant="tertiary"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<ArrowLeftIcon title={previousLabel} />}
+          icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
           className="navds-date__caption-button"
           type="button"
         />
@@ -40,7 +39,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
           {formatCaption(displayMonth, { locale })}
         </Label>
         <Button
-          icon={<ArrowRightIcon title={nextLabel} />}
+          icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"

package/src/date/datepicker/parts/DropdownCaption.tsx

@@ -4,8 +4,8 @@ import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Select } from "../../../form/select";
-import { getMonths, getYears } from "../../utils/get-dates";
-import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getMonths, getTranslations, getYears } from "../../utils";
 import WeekRow from "./WeekRow";
 
 /**
@@ -17,9 +17,9 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
     fromDate,
     toDate,
     formatters: { formatYearCaption, formatMonthCaption, formatCaption },
-    labels: { labelPrevious, labelNext },
     locale,
   } = useDayPicker();
+  const translate = useI18n("DatePicker", getTranslations(locale.code));
 
   if (!fromDate || !toDate) {
     console.warn("Using dropdownCaption required fromDate and toDate");
@@ -44,11 +44,6 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
   ).reverse();
   const months = getMonths(fromDate, toDate, displayMonth);
 
-  const previousLabel = labelPrevious(previousMonth, { locale });
-  const nextLabel = labelNext(nextMonth, { locale });
-  const yearDropdownLabel = labelYearDropdown(locale);
-  const MonthDropdownLabel = labelMonthDropdown(locale);
-
   return (
     <>
       <div className="navds-date__caption">
@@ -64,14 +59,14 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
           variant="tertiary"
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<ArrowLeftIcon title={previousLabel} />}
+          icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
           className="navds-date__caption-button"
           type="button"
         />
 
         <div className="navds-date__caption">
           <Select
-            label={MonthDropdownLabel}
+            label={translate("month")}
             hideLabel
             className="navds-date__caption__month"
             value={displayMonth.getMonth()}
@@ -84,7 +79,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
             ))}
           </Select>
           <Select
-            label={yearDropdownLabel}
+            label={translate("year")}
             hideLabel
             value={displayMonth.getFullYear()}
             onChange={handleYearChange}
@@ -99,7 +94,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
         </div>
 
         <Button
-          icon={<ArrowRightIcon title={nextLabel} />}
+          icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"

package/src/date/datepicker/parts/WeekNumber.tsx

@@ -1,75 +1,52 @@
 /* https://github.com/gpbl/react-day-picker/blob/7f78cd5/src/components/WeekNumber/WeekNumber.tsx#L21 */
 import React from "react";
 import { Button, useDayPicker } from "react-day-picker";
-import { labelWeekNumber, labelWeekNumberButton } from "../../utils/labels";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getTranslations } from "../../utils";
 
 export interface WeekNumberProps {
   /** The number of the week. */
   number: number;
   /** The dates in the week. */
   dates: Date[];
-  headerVersion?: boolean;
 }
 
 /**
  * https://github.com/gpbl/react-day-picker/tree/main/src/components/WeekNumber
  */
-function WeekNumber(props: WeekNumberProps): JSX.Element {
-  const { number: weekNumber, dates } = props;
+function WeekNumber({
+  number: weekNumber,
+  dates,
+}: WeekNumberProps): JSX.Element {
   const {
     onWeekNumberClick,
     styles,
     classNames,
     locale: { code },
   } = useDayPicker();
-
-  const weekLabel = labelWeekNumber({
-    week: Number(weekNumber),
-    localeCode: code,
-  });
+  const translate = useI18n("DatePicker", getTranslations(code));
 
   if (!onWeekNumberClick) {
     return (
       <span
         className={classNames.weeknumber}
         style={styles.weeknumber}
-        aria-label={weekLabel}
+        aria-label={translate("weekNumber", { week: weekNumber })}
       >
         {weekNumber}
       </span>
     );
   }
 
-  const label = labelWeekNumberButton({
-    week: Number(weekNumber),
-    localeCode: code,
-  });
-
-  const handleClick: React.MouseEventHandler = function (e) {
-    onWeekNumberClick(weekNumber, dates, e);
-  };
-
-  if (props?.headerVersion) {
-    return (
-      <Button
-        name="week-number"
-        aria-label={label}
-        className={classNames.weeknumber}
-        style={styles.weeknumber}
-        onClick={handleClick}
-      >
-        {weekNumber}
-      </Button>
-    );
-  }
-
   return (
     <Button
       name="week-number"
-      aria-label={label}
+      aria-label={translate("selectWeekNumber", { week: weekNumber })}
       className={classNames.weeknumber}
       style={styles.weeknumber}
-      onClick={handleClick}
+      onClick={(event) => {
+        onWeekNumberClick(weekNumber, dates, event);
+      }}
     >
       {weekNumber}
     </Button>

package/src/date/datepicker/parts/WeekRow.tsx

@@ -3,13 +3,14 @@ import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
 import { useId } from "../../../util/hooks";
+import { useI18n } from "../../../util/i18n/i18n.context";
+import { getTranslations } from "../../utils";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
-import { labelWeek } from "../../utils/labels";
 import WeekNumber from "./WeekNumber";
 
 const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
   const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();
-
+  const translate = useI18n("DatePicker", getTranslations(locale.code));
   const labelId = useId();
 
   if (!onWeekNumberClick) {
@@ -32,7 +33,7 @@ const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
               className="rdp-cell navds-date__week-cell"
             >
               <span className="navds-date__week-wrapper" id={labelId}>
-                {labelWeek(locale?.code)}
+                {`${translate("week")}:`}
               </span>
             </Detail>
 
@@ -42,11 +43,7 @@ const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
                 className="rdp-cell navds-date__week-cell"
               >
                 <span className="navds-date__week-wrapper">
-                  <WeekNumber
-                    number={week.weekNumber}
-                    dates={week.dates}
-                    headerVersion
-                  />
+                  <WeekNumber number={week.weekNumber} dates={week.dates} />
                 </span>
               </td>
             ))}

package/src/date/hooks/useDatepicker.tsx

@@ -1,6 +1,7 @@
 import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {
@@ -130,7 +131,7 @@ export const useDatepicker = (
   opt: UseDatepickerOptions = {},
 ): UseDatepickerValue => {
   const {
-    locale: _locale = "nb",
+    locale: _locale,
     required,
     defaultSelected: _defaultSelected,
     today = new Date(),
@@ -146,7 +147,8 @@ export const useDatepicker = (
   } = opt;
 
   const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
-  const locale = getLocaleFromString(_locale);
+  const localeFromProvider = useDateLocale();
+  const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 

package/src/date/hooks/useMonthPicker.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { MonthPickerProps } from "../monthpicker/types";
 import { DateInputProps } from "../parts/DateInput";
 import {
@@ -126,7 +127,7 @@ export const useMonthpicker = (
   opt: UseMonthPickerOptions = {},
 ): UseMonthPickerValue => {
   const {
-    locale: _locale = "nb",
+    locale: _locale,
     defaultSelected: _defaultSelected,
     fromDate,
     toDate,
@@ -143,7 +144,8 @@ export const useMonthpicker = (
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 
   const today = useMemo(() => new Date(), []);
-  const locale = getLocaleFromString(_locale);
+  const localeFromProvider = useDateLocale();
+  const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;
 
   // Initialize states
   const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);

package/src/date/hooks/useRangeDatepicker.tsx

@@ -5,6 +5,7 @@ import {
 } from "date-fns";
 import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {
@@ -220,7 +221,7 @@ export const useRangeDatepicker = (
   opt: UseRangeDatepickerOptions = {},
 ): UseRangeDatepickerValue => {
   const {
-    locale: _locale = "nb",
+    locale: _locale,
     defaultSelected: _defaultSelected,
     today = new Date(),
     fromDate,
@@ -236,7 +237,8 @@ export const useRangeDatepicker = (
 
   const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
 
-  const locale = getLocaleFromString(_locale);
+  const localeFromProvider = useDateLocale();
+  const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 

package/src/date/monthpicker/MonthCaption.tsx

@@ -10,8 +10,9 @@ import { useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
 import { Select } from "../../form/select";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { useSharedMonthContext } from "../context";
-import { labelNextYear, labelPrevYear } from "../utils";
+import { getTranslations } from "../utils";
 
 export const MonthCaption = () => {
   const {
@@ -20,8 +21,8 @@ export const MonthCaption = () => {
     formatters: { formatYearCaption },
     locale,
   } = useDayPicker();
-
   const { hasDropdown, year, toYear } = useSharedMonthContext();
+  const translate = useI18n("DatePicker", getTranslations(locale.code));
 
   const years: Date[] = [];
 
@@ -38,8 +39,8 @@ export const MonthCaption = () => {
     years.sort((a, b) => b.getFullYear() - a.getFullYear());
   }
 
-  const handleYearChange = (e) =>
-    toYear(setYear(startOfMonth(new Date()), Number(e.target.value)));
+  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) =>
+    toYear(setYear(startOfMonth(new Date()), Number(event.target.value)));
 
   const handleButtonClick = (val: number) => {
     const newYear = Number(year.getFullYear() + val);
@@ -64,17 +65,16 @@ export const MonthCaption = () => {
         className="navds-date__caption-button"
         disabled={disablePreviousYear()}
         onClick={() => handleButtonClick(-1)}
-        aria-label={labelPrevYear(locale?.code)}
-        icon={<ArrowLeftIcon aria-hidden />}
+        icon={<ArrowLeftIcon title={translate("goToPreviousYear")} />}
         variant="tertiary"
         type="button"
       />
 
       {hasDropdown ? (
         <Select
-          label="velg år"
+          label={translate("year")}
           hideLabel
-          value={year?.getFullYear()}
+          value={year.getFullYear()}
           onChange={handleYearChange}
           className="navds-date__caption__year"
         >
@@ -93,8 +93,7 @@ export const MonthCaption = () => {
         className="navds-date__caption-button"
         disabled={disableNextYear()}
         onClick={() => handleButtonClick(1)}
-        aria-label={labelNextYear(locale?.code)}
-        icon={<ArrowRightIcon aria-hidden />}
+        icon={<ArrowRightIcon title={translate("goToNextYear")} />}
         variant="tertiary"
         type="button"
       />

package/src/date/monthpicker/MonthPicker.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useDateLocale } from "../../util/i18n/i18n.context";
 import { DateContext, SharedMonthProvider } from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -67,7 +68,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       id,
       onClose,
       onOpenToggle,
-      locale = "nb",
+      locale,
       onMonthSelect,
       className,
       wrapperClassName,
@@ -78,6 +79,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     },
     ref,
   ) => {
+    const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
@@ -130,7 +132,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
           >
             <DayPickerProvider
               initialProps={{
-                locale: getLocaleFromString(locale),
+                locale: locale
+                  ? getLocaleFromString(locale)
+                  : langProviderLocale,
                 selected: selected ?? selectedMonth,
                 toDate,
                 fromDate,