@navikt/ds-react 7.7.0 → 7.8.1

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

@@ -5,6 +5,51 @@ export default {
         showMore: "Vis meir",
         showLess: "Vis mindre",
         readOnly: "Skrivebeskytta",
+        close: "Lukk",
+    },
+    Alert: {
+        closeAlert: "Lukk varsel",
+        closeMessage: "Lukk melding",
+        error: "Feil",
+        info: "Informasjon",
+        success: "Suksess",
+        warning: "Åtvaring",
+    },
+    Chips: {
+        Removable: {
+            labelSuffix: "slett",
+        },
+    },
+    Combobox: {
+        addOption: "Legg til",
+        loading: "Søker…",
+        maxSelected: "{selected} av maks {limit} er valt.",
+    },
+    CopyButton: {
+        title: "Kopier",
+        activeText: "Kopiert!",
+    },
+    DatePicker: {
+        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",
+    },
+    ErrorSummary: {
+        heading: "Du må rette desse feila før du kan halde fram:",
     },
     FileUpload: {
         dropzone: {
@@ -29,35 +74,18 @@ export default {
         showAllSteps: "Vis alle steg",
         hideAllSteps: "Skjul alle steg",
     },
-    Alert: {
-        closeAlert: "Lukk varsel",
-        closeMessage: "Lukk melding",
-        error: "Feil",
-        info: "Informasjon",
-        success: "Suksess",
-        warning: "Åtvaring",
-    },
-    Chips: {
-        Removable: {
-            labelSuffix: "slett",
-        },
-    },
-    CopyButton: {
-        title: "Kopier",
-        activeText: "Kopiert!",
-    },
-    ErrorSummary: {
-        heading: "Du må rette desse feila før du kan halde fram:",
-    },
     FormSummary: {
         editAnswer: "Endre svar",
     },
+    GuidePanel: {
+        illustrationLabel: "Illustrasjon av rettleiar",
+    },
+    HelpText: {
+        title: "Meir informasjon",
+    },
     Loader: {
         title: "Ventar…",
     },
-    Modal: {
-        close: "Lukk",
-    },
     Pagination: {
         previous: "Førre",
         next: "Neste",
@@ -67,7 +95,7 @@ export default {
         progressUnknown: "Framdrift kan ikkje bereknast, antatt tid er {seconds} sekund.",
     },
     Search: {
-        clear: "Tøm",
+        clear: "Tøm feltet",
         search: "Søk",
     },
     Textarea: {
@@ -100,37 +128,5 @@ 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",
-    },
-    Combobox: {
-        addOption: "Legg til",
-        loading: "Søker…",
-        maxSelected: "{selected} av maks {limit} er valt.",
-        clear: "Tøm",
-    },
-    GuidePanel: {
-        illustrationLabel: "Illustrasjon av rettleiar",
-    },
-    HelpText: {
-        title: "Meir informasjon",
-    },
 };
 //# 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,UAAU,EAAE;QACV,KAAK,EAAE,QAAQ;QACf,UAAU,EAAE,UAAU;KACvB;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gDAAgD;KAC1D;IACD,WAAW,EAAE;QACX,UAAU,EAAE,YAAY;KACzB;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;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,UAAU;QACtB,WAAW,EAAE,YAAY;QACzB,eAAe,EAAE,yBAAyB;QAC1C,WAAW,EAAE,WAAW;QACxB,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,aAAa;QACzB,gBAAgB,EAAE,iBAAiB;QACnC,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,oBAAoB;QACnC,iBAAiB,EAAE,oBAAoB;QACvC,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,iBAAiB;QAC/B,gBAAgB,EAAE,iBAAiB;QACnC,cAAc,EAAE,iBAAiB;QACjC,eAAe,EAAE,mBAAmB;QACpC,eAAe,EAAE,iBAAiB;QAClC,gBAAgB,EAAE,mBAAmB;KACtC;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,UAAU;QACrB,OAAO,EAAE,QAAQ;QACjB,WAAW,EAAE,qCAAqC;QAClD,KAAK,EAAE,KAAK;KACb;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,2BAA2B;KAC/C;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,kBAAkB;KAC1B;CACqB,CAAC"}
+{"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;QAC1B,KAAK,EAAE,MAAM;KACd;IAED,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,QAAQ,EAAE;QACR,SAAS,EAAE,UAAU;QACrB,OAAO,EAAE,QAAQ;QACjB,WAAW,EAAE,qCAAqC;KACnD;IACD,UAAU,EAAE;QACV,KAAK,EAAE,QAAQ;QACf,UAAU,EAAE,UAAU;KACvB;IACD,UAAU,EAAE;QACV,UAAU,EAAE,UAAU;QACtB,WAAW,EAAE,YAAY;QACzB,eAAe,EAAE,yBAAyB;QAC1C,WAAW,EAAE,WAAW;QACxB,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,aAAa;QACzB,gBAAgB,EAAE,iBAAiB;QACnC,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,oBAAoB;QACnC,iBAAiB,EAAE,oBAAoB;QACvC,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,iBAAiB;QAC/B,gBAAgB,EAAE,iBAAiB;QACnC,cAAc,EAAE,iBAAiB;QACjC,eAAe,EAAE,mBAAmB;QACpC,eAAe,EAAE,iBAAiB;QAClC,gBAAgB,EAAE,mBAAmB;KACtC;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gDAAgD;KAC1D;IACD,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,WAAW,EAAE;QACX,UAAU,EAAE,YAAY;KACzB;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,2BAA2B;KAC/C;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,kBAAkB;KAC1B;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;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,YAAY;QACnB,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.7.0",
+  "version": "7.8.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -8,7 +8,7 @@
     "react",
     "typescript",
     "javascript",
-    "NAV"
+    "Nav"
   ],
   "repository": {
     "type": "git",
@@ -40,6 +40,16 @@
         "default": "./cjs/index.js"
       }
     },
+    "./locales": {
+      "import": {
+        "types": "./esm/util/i18n/locales/index.d.ts",
+        "default": "./esm/util/i18n/locales/index.js"
+      },
+      "require": {
+        "types": "./cjs/util/i18n/locales/index.d.ts",
+        "default": "./cjs/util/i18n/locales/index.js"
+      }
+    },
     "./Accordion": {
       "import": {
         "types": "./esm/accordion/index.d.ts",
@@ -604,8 +614,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.7.0",
-    "@navikt/ds-tokens": "^7.7.0",
+    "@navikt/aksel-icons": "^7.8.1",
+    "@navikt/ds-tokens": "^7.8.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"

package/src/chips/Removable.tsx

@@ -16,11 +16,6 @@ export interface ChipsRemovableProps
    * Click callback
    */
   onDelete?: () => void;
-  /**
-   * Replaces label read for screen-readers
-   * @default "slett"
-   */
-  removeLabel?: string;
 }
 
 export const RemovableChips = forwardRef<
@@ -32,7 +27,6 @@ export const RemovableChips = forwardRef<
       children,
       variant = "action",
       onDelete,
-      removeLabel,
       className,
       onClick,
       type = "button",
@@ -51,9 +45,7 @@ export const RemovableChips = forwardRef<
           className,
           `navds-chips__removable--${variant}`,
         )}
-        aria-label={`${children} ${
-          removeLabel ?? translate("Removable.labelSuffix")
-        }`}
+        aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>

package/src/date/context/index.ts

@@ -1,5 +1,9 @@
-export { useDateInputContext, DateContext } from "./useDateInputContext";
+export { useDateInputContext, DateInputContext } from "./useDateInputContext";
 export {
   useSharedMonthContext,
   SharedMonthProvider,
 } from "./useSharedMonthContext";
+export {
+  useDateTranslationContext,
+  DateTranslationContextProvider,
+} from "./useDateTranslationContext";

package/src/date/context/useDateInputContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 
-interface DateContextContextProps {
+interface DateInputContextProps {
   /**
    * Open state for popover
    */
@@ -19,13 +19,15 @@ interface DateContextContextProps {
   defined: boolean;
 }
 
-export const DateContext = createContext<DateContextContextProps | null>(null);
+export const DateInputContext = createContext<DateInputContextProps | null>(
+  null,
+);
 
 export const useDateInputContext = () => {
-  const context = useContext(DateContext);
+  const context = useContext(DateInputContext);
 
   if (!context) {
-    console.warn("useDateInputContext must be used with DateContext");
+    console.warn("useDateInputContext must be used with DateInputContext");
   }
 
   return context;

package/src/date/context/useDateTranslationContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from "../../util/create-context";
+import { TFunction } from "../../util/i18n/i18n.context";
+
+interface DateTranslationContextProps {
+  translate: TFunction<"DatePicker">;
+}
+
+export const [DateTranslationContextProvider, useDateTranslationContext] =
+  createContext<DateTranslationContextProps>();

package/src/date/datepicker/DatePicker.tsx

@@ -5,11 +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 { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { DateInputContext, DateTranslationContextProvider } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString } from "../utils";
+import { getLocaleFromString, getTranslations } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -68,6 +68,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     {
       children,
       locale,
+      translations,
       dropdownCaption,
       disabled = [],
       disableWeekends = false,
@@ -86,6 +87,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
@@ -151,37 +157,40 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     return (
-      <DateContext.Provider
-        value={{
-          open: _open ?? open,
-          onOpen: () => {
-            setOpen((x) => !x);
-            onOpenToggle?.();
-          },
-          ariaId,
-          defined: true,
-        }}
-      >
-        <div
-          ref={mergedRef}
-          className={cl("navds-date__wrapper", wrapperClassName)}
+      <DateTranslationContextProvider translate={translate}>
+        <DateInputContext.Provider
+          value={{
+            open: _open ?? open,
+            onOpen: () => {
+              setOpen((x) => !x);
+              onOpenToggle?.();
+            },
+            ariaId,
+            defined: true,
+          }}
         >
-          {children}
-          <DateWrapper
-            open={_open ?? open}
-            anchor={wrapperRef}
-            onClose={() => onClose?.() ?? setOpen(false)}
-            locale={locale}
-            variant={mode}
-            popoverProps={{
-              id: ariaId,
-              strategy,
-            }}
+          <div
+            ref={mergedRef}
+            className={cl("navds-date__wrapper", wrapperClassName)}
           >
-            {DatePickerComponent}
-          </DateWrapper>
-        </div>
-      </DateContext.Provider>
+            {children}
+            <DateWrapper
+              open={_open ?? open}
+              anchor={wrapperRef}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              locale={locale}
+              translate={translate}
+              variant={mode}
+              popoverProps={{
+                id: ariaId,
+                strategy,
+              }}
+            >
+              {DatePickerComponent}
+            </DateWrapper>
+          </div>
+        </DateInputContext.Provider>
+      </DateTranslationContextProvider>
     );
   },
 ) as DatePickerComponent;

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -3,8 +3,9 @@ import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
-import { useDateLocale } from "../../util/i18n/i18n.context";
-import { getLocaleFromString } from "../utils";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { DateTranslationContextProvider } from "../context";
+import { getLocaleFromString, getTranslations } from "../utils";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
@@ -51,6 +52,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     {
       className,
       locale,
+      translations,
       dropdownCaption,
       disabled = [],
       disableWeekends = false,
@@ -64,6 +66,11 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
     const langProviderLocale = useDateLocale();
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -84,41 +91,43 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
         ref={ref}
         className={cl("navds-date__standalone-wrapper", className)}
       >
-        <DayPicker
-          locale={locale ? getLocaleFromString(locale) : langProviderLocale}
-          mode={mode}
-          onSelect={handleSelect}
-          selected={selected ?? selectedDates}
-          components={{
-            Caption: dropdownCaption ? DropdownCaption : Caption,
-            Head: TableHead,
-            HeadRow,
-            WeekNumber,
-            Row,
-          }}
-          className="navds-date"
-          classNames={{ vhidden: "navds-sr-only" }}
-          disabled={(day) => {
-            return (
-              (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
-            );
-          }}
-          weekStartsOn={1}
-          initialFocus={false}
-          modifiers={{
-            weekend: (day) => disableWeekends && isWeekend(day),
-          }}
-          modifiersClassNames={{
-            weekend: "rdp-day__weekend",
-          }}
-          showWeekNumber={showWeekNumber}
-          onWeekNumberClick={
-            mode === "multiple" ? onWeekNumberClick : undefined
-          }
-          fixedWeeks={fixedWeeks}
-          showOutsideDays
-          {...omit(rest, ["children", "id"])}
-        />
+        <DateTranslationContextProvider translate={translate}>
+          <DayPicker
+            locale={locale ? getLocaleFromString(locale) : langProviderLocale}
+            mode={mode}
+            onSelect={handleSelect}
+            selected={selected ?? selectedDates}
+            components={{
+              Caption: dropdownCaption ? DropdownCaption : Caption,
+              Head: TableHead,
+              HeadRow,
+              WeekNumber,
+              Row,
+            }}
+            className="navds-date"
+            classNames={{ vhidden: "navds-sr-only" }}
+            disabled={(day) => {
+              return (
+                (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
+              );
+            }}
+            weekStartsOn={1}
+            initialFocus={false}
+            modifiers={{
+              weekend: (day) => disableWeekends && isWeekend(day),
+            }}
+            modifiersClassNames={{
+              weekend: "rdp-day__weekend",
+            }}
+            showWeekNumber={showWeekNumber}
+            onWeekNumberClick={
+              mode === "multiple" ? onWeekNumberClick : undefined
+            }
+            fixedWeeks={fixedWeeks}
+            showOutsideDays
+            {...omit(rest, ["children", "id"])}
+          />
+        </DateTranslationContextProvider>
       </div>
     );
   },

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

@@ -3,8 +3,7 @@ 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 { useDateTranslationContext } from "../../context";
 import WeekRow from "./WeekRow";
 
 /**
@@ -16,7 +15,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
     formatters: { formatCaption },
     locale,
   } = useDayPicker();
-  const translate = useI18n("DatePicker", getTranslations(locale.code));
+  const translate = useDateTranslationContext().translate;
 
   return (
     <>

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 { useI18n } from "../../../util/i18n/i18n.context";
-import { getMonths, getTranslations, getYears } from "../../utils";
+import { useDateTranslationContext } from "../../context";
+import { getMonths, getYears } from "../../utils";
 import WeekRow from "./WeekRow";
 
 /**
@@ -19,7 +19,7 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
     formatters: { formatYearCaption, formatMonthCaption, formatCaption },
     locale,
   } = useDayPicker();
-  const translate = useI18n("DatePicker", getTranslations(locale.code));
+  const translate = useDateTranslationContext().translate;
 
   if (!fromDate || !toDate) {
     console.warn("Using dropdownCaption required fromDate and toDate");

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

@@ -4,8 +4,7 @@ import { Button as RDPButton, useDayPicker } from "react-day-picker";
 import { Button } from "../../../button";
 import { UNSAFE_useAkselTheme } from "../../../provider";
 import { Detail } from "../../../typography";
-import { useI18n } from "../../../util/i18n/i18n.context";
-import { getTranslations } from "../../utils";
+import { useDateTranslationContext } from "../../context";
 
 export interface WeekNumberProps {
   /** The number of the week. */
@@ -21,14 +20,9 @@ function WeekNumber({
   number: weekNumber,
   dates,
 }: WeekNumberProps): JSX.Element {
-  const {
-    onWeekNumberClick,
-    styles,
-    classNames,
-    locale: { code },
-  } = useDayPicker();
+  const { onWeekNumberClick, styles, classNames } = useDayPicker();
   const themeContext = UNSAFE_useAkselTheme(false);
-  const translate = useI18n("DatePicker", getTranslations(code));
+  const translate = useDateTranslationContext().translate;
 
   if (!onWeekNumberClick) {
     return (

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

@@ -3,14 +3,13 @@ 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 { useDateTranslationContext } from "../../context";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
 import WeekNumber from "./WeekNumber";
 
 const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
   const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();
-  const translate = useI18n("DatePicker", getTranslations(locale.code));
+  const translate = useDateTranslationContext().translate;
   const labelId = useId();
 
   if (!onWeekNumberClick) {

package/src/date/datepicker/types.ts

@@ -1,4 +1,5 @@
 import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
 
 export type SingleMode = {
   mode?: "single";
@@ -52,8 +53,15 @@ export interface DatePickerDefaultProps
   /**
    * Changes datepicker locale
    * @default "nb" (norsk bokmål)
+   * @deprecated Use `<Provider />`-component
    */
   locale?: "nb" | "nn" | "en";
+  /**
+   * i18n-API for customizing texts and labels.
+   *
+   * **NB: If you need to change the language, use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) instead.**
+   */
+  translations?: ComponentTranslation<"DatePicker">;
   /**
    * The earliest day to start navigation.
    */

package/src/date/monthpicker/MonthCaption.tsx

@@ -10,9 +10,7 @@ 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 { getTranslations } from "../utils";
+import { useDateTranslationContext, useSharedMonthContext } from "../context";
 
 export const MonthCaption = () => {
   const {
@@ -22,7 +20,7 @@ export const MonthCaption = () => {
     locale,
   } = useDayPicker();
   const { hasDropdown, year, toYear } = useSharedMonthContext();
-  const translate = useI18n("DatePicker", getTranslations(locale.code));
+  const translate = useDateTranslationContext().translate;
 
   const years: Date[] = [];