DatePicker/MonthPicker: add support for translations provider

.changeset/moody-gorillas-try.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+DatePicker/MonthPicker: Remove pointerEvents=none on CalendarIcon so that the title shows up as tooltip on hover

@navikt/core/react/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),
         }}

@navikt/core/react/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),
           }}

@navikt/core/react/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("previousMonth")} />}
           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("nextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"

@navikt/core/react/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("previousMonth")} />}
           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("nextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
           variant="tertiary"

@navikt/core/react/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>

@navikt/core/react/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>
             ))}

@navikt/core/react/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);
 

@navikt/core/react/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);