@navikt/ds-react 7.6.0 → 7.8.0

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

@@ -1,8 +1,10 @@
 /* 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 { useI18n } from "../../../util/i18n/i18n.context";
-import { getTranslations } from "../../utils";
+import { Button as RDPButton, useDayPicker } from "react-day-picker";
+import { Button } from "../../../button";
+import { UNSAFE_useAkselTheme } from "../../../provider";
+import { Detail } from "../../../typography";
+import { useDateTranslationContext } from "../../context";
 
 export interface WeekNumberProps {
   /** The number of the week. */
@@ -18,38 +20,55 @@ function WeekNumber({
   number: weekNumber,
   dates,
 }: WeekNumberProps): JSX.Element {
-  const {
-    onWeekNumberClick,
-    styles,
-    classNames,
-    locale: { code },
-  } = useDayPicker();
-  const translate = useI18n("DatePicker", getTranslations(code));
+  const { onWeekNumberClick, styles, classNames } = useDayPicker();
+  const themeContext = UNSAFE_useAkselTheme(false);
+  const translate = useDateTranslationContext().translate;
 
   if (!onWeekNumberClick) {
     return (
-      <span
+      <Detail
+        as="span"
+        textColor="subtle"
         className={classNames.weeknumber}
         style={styles.weeknumber}
         aria-label={translate("weekNumber", { week: weekNumber })}
       >
         {weekNumber}
-      </span>
+      </Detail>
+    );
+  }
+
+  if (themeContext) {
+    return (
+      <Button
+        variant="secondary-neutral"
+        size="small"
+        name="week-number"
+        aria-label={translate("selectWeekNumber", { week: weekNumber })}
+        style={styles.weeknumber}
+        className="navds-date__weeknumber"
+        onClick={(event) => {
+          onWeekNumberClick(weekNumber, dates, event);
+        }}
+        icon={
+          <span className="navds-date__weeknumber-number">{weekNumber}</span>
+        }
+      />
     );
   }
 
   return (
-    <Button
+    <RDPButton
       name="week-number"
       aria-label={translate("selectWeekNumber", { week: weekNumber })}
-      className={classNames.weeknumber}
       style={styles.weeknumber}
+      className={classNames.weeknumber}
       onClick={(event) => {
         onWeekNumberClick(weekNumber, dates, event);
       }}
     >
       {weekNumber}
-    </Button>
+    </RDPButton>
   );
 }
 

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[] = [];
 

package/src/date/monthpicker/MonthPicker.tsx

@@ -3,11 +3,15 @@ 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 { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import {
+  DateInputContext,
+  DateTranslationContextProvider,
+  SharedMonthProvider,
+} from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString } from "../utils";
+import { getLocaleFromString, getTranslations } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone from "./MonthPickerStandalone";
 import MonthSelector from "./MonthSelector";
@@ -69,6 +73,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       onClose,
       onOpenToggle,
       locale,
+      translations,
       onMonthSelect,
       className,
       wrapperClassName,
@@ -79,6 +84,11 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
@@ -103,61 +113,64 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     }
 
     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="month"
-            popoverProps={{
-              id: ariaId,
-              strategy,
-            }}
+          <div
+            ref={mergedRef}
+            className={cl("navds-date__wrapper", wrapperClassName)}
           >
-            <DayPickerProvider
-              initialProps={{
-                locale: locale
-                  ? getLocaleFromString(locale)
-                  : langProviderLocale,
-                selected: selected ?? selectedMonth,
-                toDate,
-                fromDate,
-                month: selected ?? selectedMonth,
+            {children}
+            <DateWrapper
+              open={_open ?? open}
+              anchor={wrapperRef}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              locale={locale}
+              translate={translate}
+              variant="month"
+              popoverProps={{
+                id: ariaId,
+                strategy,
               }}
             >
-              <div className={cl("rdp-month", className)}>
-                <SharedMonthProvider
-                  dropdownCaption={dropdownCaption}
-                  disabled={disabled}
-                  selected={selected ?? selectedMonth}
-                  onSelect={handleSelect}
-                  year={year}
-                  onYearChange={onYearChange}
-                >
-                  <MonthCaption />
-                  <MonthSelector />
-                </SharedMonthProvider>
-              </div>
-            </DayPickerProvider>
-          </DateWrapper>
-        </div>
-      </DateContext.Provider>
+              <DayPickerProvider
+                initialProps={{
+                  locale: locale
+                    ? getLocaleFromString(locale)
+                    : langProviderLocale,
+                  selected: selected ?? selectedMonth,
+                  toDate,
+                  fromDate,
+                  month: selected ?? selectedMonth,
+                }}
+              >
+                <div className={cl("rdp-month", className)}>
+                  <SharedMonthProvider
+                    dropdownCaption={dropdownCaption}
+                    disabled={disabled}
+                    selected={selected ?? selectedMonth}
+                    onSelect={handleSelect}
+                    year={year}
+                    onYearChange={onYearChange}
+                  >
+                    <MonthCaption />
+                    <MonthSelector />
+                  </SharedMonthProvider>
+                </div>
+              </DayPickerProvider>
+            </DateWrapper>
+          </div>
+        </DateInputContext.Provider>
+      </DateTranslationContextProvider>
     );
   },
 ) as MonthPickerComponent;

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,8 +1,12 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
-import { SharedMonthProvider } from "../context";
-import { getLocaleFromString } from "../utils";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import {
+  DateTranslationContextProvider,
+  SharedMonthProvider,
+} from "../context";
+import { getLocaleFromString, getTranslations } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthSelector from "./MonthSelector";
 import { MonthPickerProps } from "./types";
@@ -34,7 +38,8 @@ export const MonthPickerStandalone = forwardRef<
       disabled = [],
       selected,
       className,
-      locale = "nb",
+      locale,
+      translations,
       onMonthSelect,
       defaultSelected,
       year,
@@ -42,6 +47,12 @@ export const MonthPickerStandalone = forwardRef<
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
+    const langProviderLocale = useDateLocale();
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected,
     );
@@ -58,29 +69,31 @@ export const MonthPickerStandalone = forwardRef<
 
     return (
       <div ref={ref} className={cl("navds-date__wrapper", className)}>
-        <DayPickerProvider
-          initialProps={{
-            locale: getLocaleFromString(locale),
-            selected: selected ?? selectedMonth,
-            toDate,
-            fromDate,
-            month: selected ?? selectedMonth,
-          }}
-        >
-          <div className="navds-date rdp-month">
-            <SharedMonthProvider
-              dropdownCaption={dropdownCaption}
-              disabled={disabled}
-              selected={selected ?? selectedMonth}
-              onSelect={handleSelect}
-              year={year}
-              onYearChange={onYearChange}
-            >
-              <MonthCaption />
-              <MonthSelector />
-            </SharedMonthProvider>
-          </div>
-        </DayPickerProvider>
+        <DateTranslationContextProvider translate={translate}>
+          <DayPickerProvider
+            initialProps={{
+              locale: locale ? getLocaleFromString(locale) : langProviderLocale,
+              selected: selected ?? selectedMonth,
+              toDate,
+              fromDate,
+              month: selected ?? selectedMonth,
+            }}
+          >
+            <div className="navds-date rdp-month">
+              <SharedMonthProvider
+                dropdownCaption={dropdownCaption}
+                disabled={disabled}
+                selected={selected ?? selectedMonth}
+                onSelect={handleSelect}
+                year={year}
+                onYearChange={onYearChange}
+              >
+                <MonthCaption />
+                <MonthSelector />
+              </SharedMonthProvider>
+            </div>
+          </DayPickerProvider>
+        </DateTranslationContextProvider>
       </div>
     );
   },

package/src/date/monthpicker/types.ts

@@ -1,3 +1,4 @@
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
 import { Matcher } from "../utils";
 
 export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,8 +26,15 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Changes monthpicker 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">;
   /**
    * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
    * @default false

package/src/date/parts/DateInput.tsx

@@ -5,8 +5,7 @@ import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../../form/useFormField";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { useI18n } from "../../util/i18n/i18n.context";
-import { useDateInputContext } from "../context";
+import { useDateInputContext, useDateTranslationContext } from "../context";
 
 export interface DateInputProps
   extends FormFieldProps,
@@ -47,7 +46,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
   } = props;
 
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const translate = useI18n("DatePicker");
+  const translate = useDateTranslationContext().translate;
 
   const isDatepickerVariant = variant === "datepicker";
 

package/src/date/parts/DateWrapper.tsx

@@ -5,8 +5,8 @@ import { Modal } from "../../modal";
 import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
-import { useI18n } from "../../util/i18n/i18n.context";
-import { getTranslations } from "../utils";
+import { TFunction, useI18n } from "../../util/i18n/i18n.context";
+import { getGlobalTranslations } from "../utils";
 
 const variantToLabel = {
   single: "chooseDate",
@@ -22,6 +22,7 @@ type DateWrapperProps = {
   anchor: HTMLDivElement | null;
   /** @deprecated Temporary to support locale prop */
   locale: "nb" | "nn" | "en" | undefined;
+  translate: TFunction<"DatePicker">;
   variant: "single" | "multiple" | "range" | "month";
   popoverProps: {
     id?: string;
@@ -35,10 +36,11 @@ export const DateWrapper = ({
   onClose,
   anchor,
   locale,
+  translate,
   variant,
   popoverProps,
 }: DateWrapperProps) => {
-  const translate = useI18n("DatePicker", getTranslations(locale));
+  const translateGlobal = useI18n("global", getGlobalTranslations(locale));
   const modalRef = useRef<HTMLDialogElement>(null);
   const isInModal = useModalContext(false) !== undefined;
   const hideModal =
@@ -86,7 +88,7 @@ export const DateWrapper = ({
           size="small"
           type="button"
         >
-          {translate("close")}
+          {translateGlobal("close")}
         </Button>
       </div>
     </Modal>

package/src/date/utils/index.ts

@@ -5,7 +5,11 @@ export {
   INPUT_DATE_STRING_FORMAT_MONTH,
   parseDate,
 } from "./parse-date";
-export { getLocaleFromString, getTranslations } from "./locale";
+export {
+  getLocaleFromString,
+  getTranslations,
+  getGlobalTranslations,
+} from "./locale";
 export { disableDate } from "./dates-disabled";
 
 export { dateIsInCurrentMonth, isValidDate } from "./check-dates";