@navikt/ds-react 7.13.0 → 7.14.0

package/src/date/{parts/DateInput.tsx → Date.Input.tsx}

@@ -1,11 +1,36 @@
 import cl from "clsx";
 import React, { InputHTMLAttributes, forwardRef, useRef } from "react";
 import { CalendarIcon } from "@navikt/aksel-icons";
-import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
-import { FormFieldProps, useFormField } from "../../form/useFormField";
-import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { omit } from "../../util";
-import { useDateInputContext, useDateTranslationContext } from "../context";
+import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../form/useFormField";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
+import { createContext } from "../util/create-context";
+import { useDateTranslationContext } from "./Date.locale";
+
+interface DateInputContextProps {
+  /**
+   * Open state for popover
+   */
+  open: boolean;
+  /**
+   * Callback for onOpen toggle
+   */
+  onOpen: () => void;
+  /**
+   * Aria-connected ID
+   */
+  ariaId?: string;
+  /**
+   * Flag for enabled-check
+   */
+  defined: boolean;
+}
+
+export const [DateInputContextProvider, useDateInputContext] =
+  createContext<DateInputContextProps>({
+    errorMessage: "useDateInputContext must be used with DateInputContext",
+  });
 
 export interface DateInputProps
   extends FormFieldProps,

package/src/date/{utils/locale.ts → Date.locale.ts}

@@ -1,6 +1,8 @@
 import { enGB, nb, nn } from "date-fns/locale";
-import en_translations from "../../util/i18n/locales/en";
-import nn_translations from "../../util/i18n/locales/nn";
+import { createContext } from "../util/create-context";
+import { TFunction } from "../util/i18n/i18n.types";
+import en_translations from "../util/i18n/locales/en";
+import nn_translations from "../util/i18n/locales/nn";
 
 /** @private */
 export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
@@ -45,3 +47,10 @@ export const getGlobalTranslations = (locale: string | undefined) => {
       return undefined;
   }
 };
+
+interface DateTranslationContextProps {
+  translate: TFunction<"DatePicker">;
+}
+
+export const [DateTranslationContextProvider, useDateTranslationContext] =
+  createContext<DateTranslationContextProps>();

package/src/date/Date.typeutils.ts

@@ -0,0 +1,32 @@
+export type DateRange = {
+  from: Date | undefined;
+  to?: Date | undefined;
+};
+
+export type DateBefore = {
+  before: Date;
+};
+
+export type DateAfter = {
+  after: Date;
+};
+
+export function isDateAfterType(value: unknown): value is DateAfter {
+  return Boolean(value && typeof value === "object" && "after" in value);
+}
+
+export function isDateBeforeType(value: unknown): value is DateBefore {
+  return Boolean(value && typeof value === "object" && "before" in value);
+}
+
+export function isDateRange(value: unknown): value is DateRange {
+  return Boolean(value && typeof value === "object" && "from" in value);
+}
+
+export type Matcher =
+  | ((date: Date) => boolean)
+  | Date
+  | Date[]
+  | DateRange
+  | DateBefore
+  | DateAfter;

package/src/date/date-utils/calendar-range.test.ts

@@ -0,0 +1,54 @@
+import {
+  addYears,
+  endOfMonth,
+  endOfYear,
+  startOfDay,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
+import { describe, expect, test } from "vitest";
+import { calendarRange } from "./calendar-range";
+
+describe("calendarRange", () => {
+  test("should return start and end of the given months", () => {
+    const startMonth = new Date(2023, 0, 15);
+    const endMonth = new Date(2023, 11, 15);
+    const result = calendarRange({ startMonth, endMonth });
+
+    expect(result[0]).toEqual(startOfDay(startOfMonth(startMonth)));
+    expect(result[1]).toEqual(startOfDay(endOfMonth(endMonth)));
+  });
+
+  test("should return start of the year 100 years ago and end of the current year if captionLayout is dropdown", () => {
+    const today = new Date(2023, 6, 15);
+    const result = calendarRange({ captionLayout: "dropdown", today });
+
+    expect(result[0]).toEqual(startOfDay(startOfYear(addYears(today, -100))));
+    expect(result[1]).toEqual(startOfDay(endOfYear(today)));
+  });
+
+  test("should return undefined if no startMonth and endMonth are provided", () => {
+    const today = new Date(2023, 6, 15);
+    const result = calendarRange({ today });
+
+    expect(result[0]).toBeUndefined();
+    expect(result[1]).toBeUndefined();
+  });
+
+  test("should handle undefined today date", () => {
+    const result = calendarRange({ captionLayout: "dropdown" });
+
+    const today = new Date();
+    expect(result[0]).toEqual(startOfDay(startOfYear(addYears(today, -100))));
+    expect(result[1]).toEqual(startOfDay(endOfYear(today)));
+  });
+
+  test("should handle undefined captionLayout", () => {
+    const startMonth = new Date(2023, 0, 15);
+    const endMonth = new Date(2023, 11, 15);
+    const result = calendarRange({ startMonth, endMonth });
+
+    expect(result[0]).toEqual(startOfDay(startOfMonth(startMonth)));
+    expect(result[1]).toEqual(startOfDay(endOfMonth(endMonth)));
+  });
+});

package/src/date/date-utils/calendar-range.ts

@@ -0,0 +1,46 @@
+import {
+  addYears,
+  endOfMonth,
+  endOfYear,
+  startOfDay,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
+
+/**
+ * Generates the min and max-dates possible to show and navigate to in the calendar.
+ * In the cases there is not a startMonth or endMonth, and layout is "label" no min or max dates are set.
+ * @returns Return the start and end months for the calendar navigation.
+ */
+export function calendarRange({
+  captionLayout,
+  startMonth,
+  endMonth,
+  today,
+}: {
+  captionLayout?: "label" | "dropdown";
+  startMonth?: Date;
+  endMonth?: Date;
+  today?: Date;
+}) {
+  const hasYearDropdown = captionLayout === "dropdown";
+
+  const todayDate = today ?? new Date();
+
+  if (startMonth) {
+    startMonth = startOfMonth(startMonth);
+  } else if (!startMonth && hasYearDropdown) {
+    startMonth = startOfYear(addYears(todayDate, -100));
+  }
+
+  if (endMonth) {
+    endMonth = endOfMonth(endMonth);
+  } else if (!endMonth && hasYearDropdown) {
+    endMonth = endOfYear(todayDate);
+  }
+
+  return [
+    startMonth ? startOfDay(startMonth) : startMonth,
+    endMonth ? startOfDay(endMonth) : endMonth,
+  ];
+}

package/src/date/date-utils/check-dates.test.ts

@@ -0,0 +1,49 @@
+import { setYear } from "date-fns";
+import { describe, expect, test } from "vitest";
+import { dateIsInCurrentMonth, isValidDate } from "./check-dates";
+
+describe("dateIsInCurrentMonth", () => {
+  test("should return true if the date is in the same month and year as the date to compare", () => {
+    const date = new Date();
+    const dateToCompare = new Date();
+    expect(dateIsInCurrentMonth(date, dateToCompare)).toBe(true);
+  });
+
+  test("should return false if the date is not in the same month as the date to compare", () => {
+    const date = new Date();
+    const dateToCompare = new Date(2023, 9, 1); // October 1, 2023
+    expect(dateIsInCurrentMonth(date, dateToCompare)).toBe(false);
+  });
+
+  test("should return false if the date is in the same month but different year as the date to compare", () => {
+    const date = new Date();
+    const dateToCompare = new Date();
+    expect(
+      dateIsInCurrentMonth(
+        date,
+        setYear(dateToCompare, dateToCompare.getFullYear() + 1),
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("isValidDate", () => {
+  test("should return true for a valid date", () => {
+    const date = new Date(2023, 9, 15); // October 15, 2023
+    expect(isValidDate(date)).toBe(true);
+  });
+
+  test("should return false for an invalid date", () => {
+    const date = new Date("invalid date");
+    expect(isValidDate(date)).toBe(false);
+  });
+
+  test("should return false for a date with year less than 1000", () => {
+    const date = new Date(999, 9, 15); // October 15, 999
+    expect(isValidDate(date)).toBe(false);
+  });
+
+  test("should return false for undefined", () => {
+    expect(isValidDate(undefined)).toBe(false);
+  });
+});

package/src/date/date-utils/clamp-dates.test.ts

@@ -0,0 +1,73 @@
+import { startOfMonth, startOfYear } from "date-fns";
+import { describe, expect, test } from "vitest";
+import { clampDisplayMonth, clampDisplayYear } from "./clamp-dates";
+
+describe("clampDisplayMonth", () => {
+  test("should return undefined if month is not provided", () => {
+    expect(
+      clampDisplayMonth({ start: new Date(), end: new Date() }),
+    ).toBeUndefined();
+  });
+
+  test("should return the start of the month if month is before start", () => {
+    const start = new Date(2023, 5, 1);
+    const month = new Date(2023, 4, 1);
+    expect(clampDisplayMonth({ month, start, end: new Date() })).toEqual(
+      startOfMonth(start),
+    );
+  });
+
+  test("should return the start of end month if month is after end", () => {
+    const end = new Date(2023, 5, 1);
+    const month = new Date(2023, 6, 1);
+    expect(clampDisplayMonth({ month, start: new Date(), end })).toEqual(
+      startOfMonth(end),
+    );
+  });
+
+  test("should return the start of the month if month is within range", () => {
+    const month = new Date(2023, 5, 1);
+    expect(
+      clampDisplayMonth({
+        month,
+        start: new Date(2023, 4, 1),
+        end: new Date(2023, 6, 1),
+      }),
+    ).toEqual(startOfMonth(month));
+  });
+});
+
+describe("clampDisplayYear", () => {
+  test("should return undefined if month is not provided", () => {
+    expect(
+      clampDisplayYear({ start: new Date(), end: new Date() }),
+    ).toBeUndefined();
+  });
+
+  test("should return the start of the year if month is before start year", () => {
+    const start = new Date(2023, 0, 1);
+    const month = new Date(2022, 11, 1);
+    expect(clampDisplayYear({ month, start, end: new Date() })).toEqual(
+      startOfYear(start),
+    );
+  });
+
+  test("should return the start of the year if month is after end year", () => {
+    const end = new Date(2023, 0, 1);
+    const month = new Date(2024, 0, 1);
+    expect(clampDisplayYear({ month, start: new Date(), end })).toEqual(
+      startOfYear(end),
+    );
+  });
+
+  test("should return the start of the year if month is within range", () => {
+    const month = new Date(2023, 5, 1);
+    expect(
+      clampDisplayYear({
+        month,
+        start: new Date(2022, 0, 1),
+        end: new Date(2024, 0, 1),
+      }),
+    ).toEqual(startOfYear(month));
+  });
+});

package/src/date/date-utils/clamp-dates.ts

@@ -0,0 +1,63 @@
+import { isAfter, isBefore, startOfMonth, startOfYear } from "date-fns";
+
+/**
+ * Makes sure the month is within the min and max daterange to avoid showing disabled months
+ * @note We do not warn the user if start > end now
+ */
+const clampDisplayMonth = ({
+  month,
+  start,
+  end,
+}: {
+  month?: Date;
+  start?: Date;
+  end?: Date;
+}): Date | undefined => {
+  if (!month) {
+    return undefined;
+  }
+
+  let monthToShow = month;
+
+  if (start && isBefore(monthToShow, start)) {
+    monthToShow = start;
+  }
+
+  if (end && isAfter(monthToShow, end)) {
+    monthToShow = end;
+  }
+
+  return startOfMonth(monthToShow);
+};
+
+/**
+ * Makes sure the month is within the min and max daterange to avoid showing disabled months
+ * @note We do not warn the user if start > end now
+ */
+const clampDisplayYear = ({
+  month,
+  start,
+  end,
+}: {
+  month?: Date;
+  start?: Date;
+  end?: Date;
+}): Date | undefined => {
+  if (!month) {
+    return undefined;
+  }
+
+  let monthToShow = month;
+
+  if (start && monthToShow.getFullYear() < start.getFullYear()) {
+    monthToShow = start;
+  }
+
+  if (end && monthToShow.getFullYear() > end.getFullYear()) {
+    monthToShow = end;
+  }
+
+  return startOfYear(monthToShow);
+};
+
+export { clampDisplayYear, clampDisplayMonth };

package/src/date/{utils/__tests__ → date-utils}/dates-disabled.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { disableDate } from "..";
+import { disableDate } from "./dates-disabled";
 
 describe("Returns if date should be disabled", () => {
   test("Should be disabled using Date (true)", () => {

package/src/date/{utils → date-utils}/dates-disabled.ts

@@ -1,7 +1,6 @@
 import { isSameDay } from "date-fns";
-import { isDateRange } from "react-day-picker";
+import { isDateRange } from "../Date.typeutils";
 
-// TODO: ((date: Date) => boolean)
 export const disableDate = (
   disabledSelection: Date | any[],
   date: Date,

package/src/date/date-utils/dropdown-options.test.ts

@@ -0,0 +1,143 @@
+import { nb } from "date-fns/locale";
+import { describe, expect, test } from "vitest";
+import { getMonthOptions, getYearOptions } from "./dropdown-options";
+
+describe("getYearOptions", () => {
+  test("should return undefined if navStart is undefined", () => {
+    const result = getYearOptions(undefined, new Date(), nb);
+    expect(result).toBeUndefined();
+  });
+
+  test("should return undefined if navEnd is undefined", () => {
+    const result = getYearOptions(new Date(), undefined, nb);
+    expect(result).toBeUndefined();
+  });
+
+  test("should return the correct year options within the interval", () => {
+    const navStart = new Date(2020, 0, 1); // Januar 1, 2020
+    const navEnd = new Date(2022, 11, 31); // Desember 31, 2022
+    const result = getYearOptions(navStart, navEnd, nb);
+
+    const expected = [
+      { value: 2020, label: "2020", disabled: false },
+      { value: 2021, label: "2021", disabled: false },
+      { value: 2022, label: "2022", disabled: false },
+    ];
+
+    expect(result).toEqual(expected);
+  });
+
+  test("should return the correct year options for a single year", () => {
+    const navStart = new Date(2021, 0, 1); // Januar 1, 2021
+    const navEnd = new Date(2021, 11, 31); // Desember 31, 2021
+    const result = getYearOptions(navStart, navEnd, nb);
+
+    const expected = [{ value: 2021, label: "2021", disabled: false }];
+
+    expect(result).toEqual(expected);
+  });
+
+  test("should return the correct year options when navStart and navEnd are the same date", () => {
+    const navStart = new Date(2021, 0, 1); // Januar 1, 2021
+    const navEnd = new Date(2021, 0, 1); // Januar 1, 2021
+    const result = getYearOptions(navStart, navEnd, nb);
+
+    const expected = [{ value: 2021, label: "2021", disabled: false }];
+
+    expect(result).toEqual(expected);
+  });
+});
+
+describe("getMonthOptions", () => {
+  test("should return the correct month options for the given year", () => {
+    const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
+    const result = getMonthOptions(displayMonth, undefined, undefined, nb);
+
+    const expected = [
+      { value: 0, label: "januar", disabled: false },
+      { value: 1, label: "februar", disabled: false },
+      { value: 2, label: "mars", disabled: false },
+      { value: 3, label: "april", disabled: false },
+      { value: 4, label: "mai", disabled: false },
+      { value: 5, label: "juni", disabled: false },
+      { value: 6, label: "juli", disabled: false },
+      { value: 7, label: "august", disabled: false },
+      { value: 8, label: "september", disabled: false },
+      { value: 9, label: "oktober", disabled: false },
+      { value: 10, label: "november", disabled: false },
+      { value: 11, label: "desember", disabled: false },
+    ];
+
+    expect(result).toEqual(expected);
+  });
+
+  test("should disable months before navStart", () => {
+    const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
+    const navStart = new Date(2021, 5, 1); // Juni 1, 2021
+    const result = getMonthOptions(displayMonth, navStart, undefined, nb);
+
+    const expected = [
+      { value: 0, label: "januar", disabled: true },
+      { value: 1, label: "februar", disabled: true },
+      { value: 2, label: "mars", disabled: true },
+      { value: 3, label: "april", disabled: true },
+      { value: 4, label: "mai", disabled: true },
+      { value: 5, label: "juni", disabled: false },
+      { value: 6, label: "juli", disabled: false },
+      { value: 7, label: "august", disabled: false },
+      { value: 8, label: "september", disabled: false },
+      { value: 9, label: "oktober", disabled: false },
+      { value: 10, label: "november", disabled: false },
+      { value: 11, label: "desember", disabled: false },
+    ];
+
+    expect(result).toEqual(expected);
+  });
+
+  test("should disable months after navEnd", () => {
+    const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
+    const navEnd = new Date(2021, 5, 1); // Juni 1, 2021
+    const result = getMonthOptions(displayMonth, undefined, navEnd, nb);
+
+    const expected = [
+      { value: 0, label: "januar", disabled: false },
+      { value: 1, label: "februar", disabled: false },
+      { value: 2, label: "mars", disabled: false },
+      { value: 3, label: "april", disabled: false },
+      { value: 4, label: "mai", disabled: false },
+      { value: 5, label: "juni", disabled: false },
+      { value: 6, label: "juli", disabled: true },
+      { value: 7, label: "august", disabled: true },
+      { value: 8, label: "september", disabled: true },
+      { value: 9, label: "oktober", disabled: true },
+      { value: 10, label: "november", disabled: true },
+      { value: 11, label: "desember", disabled: true },
+    ];
+
+    expect(result).toEqual(expected);
+  });
+
+  test("should disable months before navStart and after navEnd", () => {
+    const displayMonth = new Date(2021, 0, 1); // Januar 1, 2021
+    const navStart = new Date(2021, 3, 1); // April 1, 2021
+    const navEnd = new Date(2021, 8, 1); // September 1, 2021
+    const result = getMonthOptions(displayMonth, navStart, navEnd, nb);
+
+    const expected = [
+      { value: 0, label: "januar", disabled: true },
+      { value: 1, label: "februar", disabled: true },
+      { value: 2, label: "mars", disabled: true },
+      { value: 3, label: "april", disabled: false },
+      { value: 4, label: "mai", disabled: false },
+      { value: 5, label: "juni", disabled: false },
+      { value: 6, label: "juli", disabled: false },
+      { value: 7, label: "august", disabled: false },
+      { value: 8, label: "september", disabled: false },
+      { value: 9, label: "oktober", disabled: true },
+      { value: 10, label: "november", disabled: true },
+      { value: 11, label: "desember", disabled: true },
+    ];
+
+    expect(result).toEqual(expected);
+  });
+});

package/src/date/date-utils/dropdown-options.ts

@@ -0,0 +1,79 @@
+import {
+  Locale,
+  addYears,
+  eachMonthOfInterval,
+  endOfYear,
+  format,
+  getMonth,
+  getYear,
+  isBefore,
+  isSameYear,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
+
+/** Return the months to show in the dropdown. */
+export function getMonthOptions(
+  displayMonth: Date,
+  navStart: Date | undefined,
+  navEnd: Date | undefined,
+  locale: Locale,
+):
+  | {
+      value: number;
+      label: string;
+      disabled: boolean;
+    }[]
+  | undefined {
+  const months = eachMonthOfInterval({
+    start: startOfYear(displayMonth),
+    end: endOfYear(displayMonth),
+  });
+
+  const options = months.map((month) => {
+    const label = format(month, "LLLL", { locale });
+    const value = getMonth(month);
+    const disabled =
+      (navStart && month < startOfMonth(navStart)) ||
+      (navEnd && month > startOfMonth(navEnd)) ||
+      false;
+    return { value, label, disabled };
+  });
+
+  return options;
+}
+
+/** Return the years to show in the dropdown. */
+export function getYearOptions(
+  navStart: Date | undefined,
+  navEnd: Date | undefined,
+  locale: Locale,
+):
+  | {
+      value: number;
+      label: string;
+      disabled: boolean;
+    }[]
+  | undefined {
+  if (!navStart) return undefined;
+  if (!navEnd) return undefined;
+
+  const firstNavYear = startOfYear(navStart);
+  const lastNavYear = endOfYear(navEnd);
+  const years: Date[] = [];
+
+  let year = firstNavYear;
+  while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
+    years.push(year);
+    year = addYears(year, 1);
+  }
+
+  return years.map((_year) => {
+    const label = format(_year, "yyyy", { locale });
+    return {
+      value: getYear(_year),
+      label,
+      disabled: false,
+    };
+  });
+}

package/src/date/{utils/__tests__ → date-utils}/format-dates.test.ts

@@ -1,7 +1,7 @@
 import { nb } from "date-fns/locale";
 import { describe, expect, test } from "vitest";
-import { formatDateForInput } from "../format-date";
-import { parseDate } from "../parse-date";
+import { formatDateForInput } from "./format-date";
+import { parseDate } from "./parse-date";
 
 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);
 const parseTwoDigit = (inp: string) =>

package/src/date/date-utils/index.ts

@@ -0,0 +1,12 @@
+export { formatDateForInput } from "./format-date";
+export {
+  INPUT_DATE_STRING_FORMAT_DATE,
+  INPUT_DATE_STRING_FORMAT_MONTH,
+  parseDate,
+} from "./parse-date";
+export { disableDate } from "./dates-disabled";
+export { dateIsInCurrentMonth, isValidDate } from "./check-dates";
+export { isMatch, isDateInRange } from "./is-match";
+export { clampDisplayMonth, clampDisplayYear } from "./clamp-dates";
+export { getMonthOptions, getYearOptions } from "./dropdown-options";
+export { calendarRange } from "./calendar-range";

package/src/date/{utils/__tests__ → date-utils}/is-match.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { isMatch } from "..";
+import { isMatch } from "./is-match";
 
 const disabled = [
   new Date("Sep 8 2022"),

package/src/date/{utils → date-utils}/is-match.ts

@@ -5,21 +5,12 @@ import {
   isSameMonth,
 } from "date-fns";
 import {
-  DateAfter,
-  DateBefore,
   DateRange,
+  Matcher,
   isDateAfterType,
   isDateBeforeType,
   isDateRange,
-} from "react-day-picker";
-
-export type Matcher =
-  | ((date: Date) => boolean)
-  | Date
-  | Date[]
-  | DateRange
-  | DateBefore
-  | DateAfter;
+} from "../Date.typeutils";
 
 function isDateType(value: unknown): value is Date {
   return isDate(value);