@navikt/ds-react 5.5.0 → 5.6.0

package/src/date/datepicker/{DayButton.tsx → parts/DayButton.tsx}

@@ -2,7 +2,7 @@ import format from "date-fns/format";
 import React, { useRef } from "react";
 import { Button, DayProps, useDayPicker, useDayRender } from "react-day-picker";
 
-export const DayButton = (props: DayProps) => {
+const DayButton = (props: DayProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
   const { locale } = useDayPicker();
@@ -25,3 +25,5 @@ export const DayButton = (props: DayProps) => {
     />
   );
 };
+
+export default DayButton;

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

@@ -0,0 +1,113 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import setMonth from "date-fns/setMonth";
+import setYear from "date-fns/setYear";
+import startOfMonth from "date-fns/startOfMonth";
+import React from "react";
+import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
+import { Button, Select } from "../../..";
+import { getMonths, getYears } from "../../utils/get-dates";
+import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
+import { max, min } from "date-fns";
+import WeekRow from "./WeekRow";
+
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/CaptionDropdowns
+ */
+export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
+  const { goToMonth, nextMonth, previousMonth } = useNavigation();
+  const {
+    fromDate,
+    toDate,
+    formatters: { formatYearCaption, formatMonthCaption, formatCaption },
+    labels: { labelPrevious, labelNext },
+    locale,
+  } = useDayPicker();
+
+  if (!fromDate || !toDate) {
+    console.warn("Using dropdownCaption required fromDate and toDate");
+    return null;
+  }
+
+  const handleYearChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    const newMonth = setYear(
+      startOfMonth(displayMonth),
+      Number(e.target.value)
+    );
+    goToMonth(startOfMonth(min([max([newMonth, fromDate]), toDate])));
+  };
+
+  const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
+    goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
+
+  const years = getYears(fromDate, toDate, displayMonth.getFullYear());
+  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">
+        <span
+          aria-live="polite"
+          aria-atomic="true"
+          id={id}
+          className="navds-sr-only"
+        >
+          {formatCaption(displayMonth, { locale })}
+        </span>
+        <Button
+          variant="tertiary"
+          disabled={!previousMonth}
+          onClick={() => previousMonth && goToMonth(previousMonth)}
+          icon={<ArrowLeftIcon title={previousLabel} />}
+          className="navds-date__caption-button"
+          type="button"
+        />
+
+        <div className="navds-date__caption">
+          <Select
+            label={MonthDropdownLabel}
+            hideLabel
+            className="navds-date__caption__month"
+            value={displayMonth.getMonth()}
+            onChange={handleMonthChange}
+          >
+            {months.map((m) => (
+              <option key={m.getMonth()} value={m.getMonth()}>
+                {formatMonthCaption(m, { locale })}
+              </option>
+            ))}
+          </Select>
+          <Select
+            label={yearDropdownLabel}
+            hideLabel
+            value={displayMonth.getFullYear()}
+            onChange={handleYearChange}
+            className="navds-date__caption__year"
+          >
+            {years.map((year) => (
+              <option key={year.getFullYear()} value={year.getFullYear()}>
+                {formatYearCaption(year, { locale })}
+              </option>
+            ))}
+          </Select>
+        </div>
+
+        <Button
+          icon={<ArrowRightIcon title={nextLabel} />}
+          onClick={() => nextMonth && goToMonth(nextMonth)}
+          disabled={!nextMonth}
+          variant="tertiary"
+          className="navds-date__caption-button"
+          type="button"
+        />
+      </div>
+      <WeekRow displayMonth={displayMonth} />
+    </>
+  );
+};
+
+export default DropdownCaption;

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { addDays, Locale, startOfWeek } from "date-fns";
+import { useDayPicker } from "react-day-picker";
+import { Hide } from "../../../layout/responsive";
+
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/HeadRow
+ */
+export function HeadRow(): JSX.Element {
+  const {
+    classNames,
+    styles,
+    showWeekNumber,
+    locale,
+    formatters: { formatWeekdayName },
+    labels: { labelWeekday },
+  } = useDayPicker();
+
+  const weekdays = getWeekdays(locale);
+
+  return (
+    <tr style={styles.head_row} className={classNames.head_row}>
+      {showWeekNumber && (
+        <Hide below="sm" asChild>
+          <td style={styles.head_cell} className={classNames.head_cell}></td>
+        </Hide>
+      )}
+      {weekdays.map((weekday, i) => (
+        <th
+          key={i}
+          scope="col"
+          className={classNames.head_cell}
+          style={styles.head_cell}
+          aria-label={labelWeekday(weekday, { locale })}
+        >
+          {formatWeekdayName(weekday, { locale })}
+        </th>
+      ))}
+    </tr>
+  );
+}
+
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+export function getWeekdays(locale?: Locale): Date[] {
+  const start = startOfWeek(new Date(), { locale, weekStartsOn: 1 });
+
+  const days: Date[] = [];
+  for (let i = 0; i < 7; i++) {
+    const day = addDays(start, i);
+    days.push(day);
+  }
+  return days;
+}

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { getUnixTime } from "date-fns";
+import { useDayPicker, Day } from "react-day-picker";
+import WeekNumber from "./WeekNumber";
+import { Hide } from "../../../layout/responsive";
+
+/**
+ * The props for the {@link Row} component.
+ */
+export interface RowProps {
+  /** The month where the row is displayed. */
+  displayMonth: Date;
+  /** The number of the week to render. */
+  weekNumber: number;
+  /** The days contained in the week. */
+  dates: Date[];
+}
+
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Row
+ */
+function Row(props: RowProps): JSX.Element {
+  const { styles, classNames, showWeekNumber } = useDayPicker();
+
+  return (
+    <tr className={classNames.row} style={styles.row}>
+      {showWeekNumber && (
+        <Hide below="sm" asChild>
+          <td className={classNames.cell} style={styles.cell}>
+            <WeekNumber number={props.weekNumber} dates={props.dates} />
+          </td>
+        </Hide>
+      )}
+      {props.dates.map((date) => (
+        <td
+          className={classNames.cell}
+          style={styles.cell}
+          key={getUnixTime(date)}
+        >
+          <Day displayMonth={props.displayMonth} date={date} />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+export default Row;

package/src/date/datepicker/{TableHead.tsx → parts/TableHead.tsx}

@@ -1,8 +1,10 @@
 import React from "react";
 import { HeadRow, useDayPicker } from "react-day-picker";
 
-/** Render the table head. */
-export function TableHead(): JSX.Element {
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Head
+ */
+function TableHead(): JSX.Element {
   const { classNames, styles, components } = useDayPicker();
   const HeadRowComponent = components?.HeadRow ?? HeadRow;
   return (
@@ -11,3 +13,5 @@ export function TableHead(): JSX.Element {
     </thead>
   );
 }
+
+export default TableHead;

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

@@ -0,0 +1,79 @@
+/* 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";
+
+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;
+  const {
+    onWeekNumberClick,
+    styles,
+    classNames,
+    locale: { code },
+  } = useDayPicker();
+
+  const weekLabel = labelWeekNumber({
+    week: Number(weekNumber),
+    localeCode: code,
+  });
+
+  if (!onWeekNumberClick) {
+    return (
+      <span
+        className={classNames.weeknumber}
+        style={styles.weeknumber}
+        aria-label={weekLabel}
+      >
+        {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}
+      className={classNames.weeknumber}
+      style={styles.weeknumber}
+      onClick={handleClick}
+    >
+      {weekNumber}
+    </Button>
+  );
+}
+
+export default WeekNumber;

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { useDayPicker } from "react-day-picker";
+import { Show } from "../../../layout/responsive";
+import { Detail } from "../../../typography";
+import { getMonthWeeks } from "../../utils/get-month-weeks";
+import { labelWeek } from "../../utils/labels";
+import WeekNumber from "./WeekNumber";
+import { useId } from "../../../util";
+
+const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
+  const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();
+
+  const labelId = useId();
+
+  if (!onWeekNumberClick) {
+    return null;
+  }
+
+  const weeks = getMonthWeeks(displayMonth, {
+    useFixedWeeks: Boolean(fixedWeeks),
+    locale,
+  });
+
+  return (
+    <Show below="sm" asChild>
+      <table className="rdp-table" role="grid">
+        <tbody className="rdp-tbody">
+          <tr className="rdp-row navds-date__week-row">
+            <Detail
+              as="th"
+              weight="semibold"
+              className="rdp-cell navds-date__week-cell"
+            >
+              <span className="navds-date__week-wrapper" id={labelId}>
+                {labelWeek(locale?.code)}
+              </span>
+            </Detail>
+
+            {weeks.map((week) => (
+              <td
+                key={week.weekNumber}
+                className="rdp-cell navds-date__week-cell"
+              >
+                <span className="navds-date__week-wrapper">
+                  <WeekNumber
+                    number={week.weekNumber}
+                    dates={week.dates}
+                    headerVersion
+                  />
+                </span>
+              </td>
+            ))}
+          </tr>
+        </tbody>
+      </table>
+    </Show>
+  );
+};
+
+export default WeekRow;

package/src/date/hooks/useDatepicker.tsx

@@ -207,7 +207,7 @@ export const useDatepicker = (
       return;
     }
     !open && openOnFocus && handleOpen(true);
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -227,7 +227,7 @@ export const useDatepicker = (
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,

package/src/date/hooks/useMonthPicker.tsx

@@ -204,7 +204,7 @@ export const useMonthpicker = (
       return;
     }
     !open && openOnFocus && handleOpen(true);
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -223,7 +223,7 @@ export const useMonthpicker = (
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable react/jsx-pascal-case */
-import { act, render } from "@testing-library/react";
+/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { DatePicker, useRangeDatepicker } from "..";
@@ -23,15 +23,15 @@ const RangeDemo = () => {
 
 describe("Writing in input sets correct values", () => {
   it("useRangeDatepicker same date", async () => {
-    const utils = render(<RangeDemo />);
+    render(<RangeDemo />);
 
-    const fraInput = utils.getByRole("textbox", { name: "Fra" });
-    const tilInput = utils.getByRole("textbox", { name: "Til" });
+    const fraInput = screen.getByRole("textbox", { name: "Fra" });
+    const tilInput = screen.getByRole("textbox", { name: "Til" });
     await act(async () => {
       await userEvent.type(fraInput, "03.08.2022");
       await userEvent.type(tilInput, "03.08.2022");
     });
-    const res = utils.getByTitle("res");
+    const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({
         from: "2022-08-03T00:00:00.000Z",
@@ -40,16 +40,16 @@ describe("Writing in input sets correct values", () => {
     );
   });
 
-  it("useRangeDatepicker before after to ", async () => {
-    const utils = render(<RangeDemo />);
+  it("useRangeDatepicker before after to", async () => {
+    render(<RangeDemo />);
 
-    const fraInput = utils.getByRole("textbox", { name: "Fra" });
-    const tilInput = utils.getByRole("textbox", { name: "Til" });
+    const fraInput = screen.getByRole("textbox", { name: "Fra" });
+    const tilInput = screen.getByRole("textbox", { name: "Til" });
     await act(async () => {
       await userEvent.type(fraInput, "03.08.2022");
       await userEvent.type(tilInput, "02.08.2022");
     });
-    const res = utils.getByTitle("res");
+    const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({
         from: "2022-08-03T00:00:00.000Z",

package/src/date/hooks/useRangeDatepicker.tsx

@@ -325,7 +325,7 @@ export const useRangeDatepicker = (
       return;
     }
     !open && openOnFocus && setOpen(true);
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -349,7 +349,7 @@ export const useRangeDatepicker = (
   };
 
   const handleBlur = (e, src: RangeT) => {
-    let day = parseDate(
+    const day = parseDate(
       e.target.value,
       today,
       locale,
@@ -379,7 +379,7 @@ export const useRangeDatepicker = (
     if (range?.from && range?.to) {
       setOpen(false);
     }
-    let prevToRange =
+    const prevToRange =
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
 
     const resetTo = isBefore(prevToRange, range?.from);

package/src/date/monthpicker/MonthButton.tsx

@@ -13,9 +13,9 @@ interface MonthType {
   month: Date;
   months: Date[];
   focus: Date | undefined;
-  setFocus: Function;
+  setFocus: (date?: Date) => void;
   tabRoot?: Date;
-  setTabRoot: Function;
+  setTabRoot: (date?: Date) => void;
 }
 
 const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => {

package/src/date/monthpicker/MonthPicker.tsx

@@ -70,7 +70,7 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Callback for user-controlled state
    */
-  onMonthSelect?: Function;
+  onMonthSelect?: (month?: Date) => void;
   /**
    * Used to set visible year programmatically. Component controlled by default
    */

package/src/date/monthpicker/MonthSelector.tsx

@@ -62,9 +62,9 @@ export const MonthSelector = () => {
   return (
     <BodyShort as="table" className="rdp-table">
       <tbody className="rdp-tbody">
-        {tableMonths.map((x, y) => (
-          <tr className="rdp-row" key={y}>
-            {x.map((month: Date, y) => {
+        {tableMonths.map((months, i) => (
+          <tr className="rdp-row" key={i}>
+            {months.map((month: Date) => {
               return (
                 <td key={month.toDateString()} className="rdp-cell">
                   <MonthButton

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -42,7 +42,7 @@ Default.argTypes = {
   },
 };
 
-export const dropdownCaption = () => {
+export const DropdownCaption = () => {
   return (
     <MonthPicker.Standalone
       dropdownCaption

package/src/date/utils/__tests__/get-initial-year.test.ts

@@ -22,18 +22,6 @@ describe("Returns initial year for monthpicker", () => {
       )
     ).toBeFalsy();
   });
-  test("Default selected should not be valid (false)", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2021"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2020"),
-          /* toDate: new Date("Oct 4 2021"), */
-          /* fromDate: new Date("Oct 4 2021"), */
-        })
-      )
-    ).toBeFalsy();
-  });
   test("Default selected should be valid with fromDate", () => {
     expect(
       isSameYear(