@navikt/ds-react 7.13.0 → 7.14.0-alpha.1

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/check-dates.ts

@@ -0,0 +1,28 @@
+import { differenceInCalendarDays, isThisMonth, setYear } from "date-fns";
+
+export const dateIsInCurrentMonth = (
+  date: Date,
+  dateToCompare: Date,
+): boolean => {
+  return isThisMonth(setYear(date, Number(dateToCompare.getFullYear())));
+};
+
+/** @private */
+export function isValidDate(day?: Date): boolean {
+  return !!(day && !Number.isNaN(day.getTime()) && day.getFullYear() > 999);
+}
+
+export function isDateOutsideRange({
+  day,
+  fromDate,
+  toDate,
+}: {
+  day: Date;
+  fromDate?: Date;
+  toDate?: Date;
+}): boolean {
+  const isDateAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
+  const isDateBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
+
+  return isDateAfter || isDateBefore || false;
+}

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

@@ -0,0 +1,156 @@
+import { startOfMonth, startOfYear } from "date-fns";
+import { describe, expect, test } from "vitest";
+import { isDateOutsideRange } from "./check-dates";
+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));
+  });
+});
+
+describe("isDateOutsideRange", () => {
+  test("returns false when day is within range", () => {
+    const day = new Date(2023, 5, 15);
+    const fromDate = new Date(2023, 0, 1);
+    const toDate = new Date(2023, 11, 31);
+
+    expect(isDateOutsideRange({ day, fromDate, toDate })).toBe(false);
+  });
+
+  test("returns true when day is after toDate", () => {
+    const day = new Date(2024, 0, 1);
+    const fromDate = new Date(2023, 0, 1);
+    const toDate = new Date(2023, 11, 31);
+
+    expect(isDateOutsideRange({ day, fromDate, toDate })).toBe(true);
+  });
+
+  test("returns true when day is before fromDate", () => {
+    const day = new Date(2022, 11, 31);
+    const fromDate = new Date(2023, 0, 1);
+    const toDate = new Date(2023, 11, 31);
+
+    expect(isDateOutsideRange({ day, fromDate, toDate })).toBe(true);
+  });
+
+  test("returns false when fromDate and toDate are not provided", () => {
+    const day = new Date(2023, 5, 15);
+
+    expect(isDateOutsideRange({ day })).toBe(false);
+  });
+
+  test("returns true when only toDate is provided and day is after toDate", () => {
+    const day = new Date(2024, 0, 1);
+    const toDate = new Date(2023, 11, 31);
+
+    expect(isDateOutsideRange({ day, toDate })).toBe(true);
+  });
+
+  test("returns false when only toDate is provided and day is before toDate", () => {
+    const day = new Date(2023, 5, 15);
+    const toDate = new Date(2023, 11, 31);
+
+    expect(isDateOutsideRange({ day, toDate })).toBe(false);
+  });
+
+  test("returns true when only fromDate is provided and day is before fromDate", () => {
+    const day = new Date(2022, 11, 31);
+    const fromDate = new Date(2023, 0, 1);
+
+    expect(isDateOutsideRange({ day, fromDate })).toBe(true);
+  });
+
+  test("returns false when only fromDate is provided and day is after fromDate", () => {
+    const day = new Date(2023, 5, 15);
+    const fromDate = new Date(2023, 0, 1);
+
+    expect(isDateOutsideRange({ day, fromDate })).toBe(false);
+  });
+
+  test("returns false when day is identical to fromDate", () => {
+    const day = new Date(2023, 0, 1);
+    const fromDate = new Date(2023, 0, 1);
+
+    expect(isDateOutsideRange({ day, fromDate })).toBe(false);
+  });
+
+  test("returns false when day is identical to toDate", () => {
+    const day = new Date(2023, 11, 31);
+    const toDate = new Date(2023, 11, 31);
+
+    expect(isDateOutsideRange({ day, toDate })).toBe(false);
+  });
+
+  test("returns false when day is identical to both fromDate and toDate", () => {
+    const day = new Date(2023, 5, 15);
+    const fromDate = new Date(2023, 5, 15);
+    const toDate = new Date(2023, 5, 15);
+
+    expect(isDateOutsideRange({ day, fromDate, toDate })).toBe(false);
+  });
+});

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,16 @@
+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,
+  isDateOutsideRange,
+} 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);

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

@@ -1,7 +1,8 @@
 import { getMonth } from "date-fns";
 import { nb } from "date-fns/locale";
 import { describe, expect, test } from "vitest";
-import { isValidDate, parseDate } from "..";
+import { isValidDate } from "./check-dates";
+import { parseDate } from "./parse-date";
 
 const check = (inp: string) =>
   // eslint-disable-next-line @vitest/valid-expect