@navikt/ds-react 7.13.0 → 7.14.0

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

@@ -1,48 +0,0 @@
-import { getUnixTime } from "date-fns";
-import React from "react";
-import { useDayPicker } from "react-day-picker";
-import { Hide } from "../../../layout/responsive";
-import DayButton from "./DayButton";
-import WeekNumber from "./WeekNumber";
-
-/**
- * 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)}
-        >
-          <DayButton displayMonth={props.displayMonth} date={date} />
-        </td>
-      ))}
-    </tr>
-  );
-}
-
-export default Row;

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

@@ -1,17 +0,0 @@
-import React from "react";
-import { HeadRow, useDayPicker } from "react-day-picker";
-
-/**
- * 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 (
-    <thead style={styles.head} className={classNames.head} aria-hidden>
-      <HeadRowComponent />
-    </thead>
-  );
-}
-
-export default TableHead;

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

@@ -1,75 +0,0 @@
-/* https://github.com/gpbl/react-day-picker/blob/7f78cd5/src/components/WeekNumber/WeekNumber.tsx#L21 */
-import React from "react";
-import { Button as RDPButton, useDayPicker } from "react-day-picker";
-import { Button } from "../../../button";
-import { useThemeInternal } from "../../../theme/Theme";
-import { Detail } from "../../../typography";
-import { useDateTranslationContext } from "../../context";
-
-export interface WeekNumberProps {
-  /** The number of the week. */
-  number: number;
-  /** The dates in the week. */
-  dates: Date[];
-}
-
-/**
- * https://github.com/gpbl/react-day-picker/tree/main/src/components/WeekNumber
- */
-function WeekNumber({
-  number: weekNumber,
-  dates,
-}: WeekNumberProps): JSX.Element {
-  const { onWeekNumberClick, styles, classNames } = useDayPicker();
-  const themeContext = useThemeInternal(false);
-  const translate = useDateTranslationContext().translate;
-
-  if (!onWeekNumberClick) {
-    return (
-      <Detail
-        as="span"
-        textColor="subtle"
-        className={classNames.weeknumber}
-        style={styles.weeknumber}
-        aria-label={translate("weekNumber", { week: weekNumber })}
-      >
-        {weekNumber}
-      </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 (
-    <RDPButton
-      name="week-number"
-      aria-label={translate("selectWeekNumber", { week: weekNumber })}
-      style={styles.weeknumber}
-      className={classNames.weeknumber}
-      onClick={(event) => {
-        onWeekNumberClick(weekNumber, dates, event);
-      }}
-    >
-      {weekNumber}
-    </RDPButton>
-  );
-}
-
-export default WeekNumber;

package/src/date/hooks/index.ts

@@ -1,6 +0,0 @@
-export { useDatepicker } from "./useDatepicker";
-export type { DateValidationT } from "./useDatepicker";
-export { useRangeDatepicker } from "./useRangeDatepicker";
-export type { RangeValidationT } from "./useRangeDatepicker";
-export { useMonthpicker } from "./useMonthPicker";
-export type { MonthValidationT } from "./useMonthPicker";

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,102 +0,0 @@
-import cl from "clsx";
-import React, { forwardRef, useState } from "react";
-import { DayPickerProvider } from "react-day-picker";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
-import {
-  DateTranslationContextProvider,
-  SharedMonthProvider,
-} from "../context";
-import { getLocaleFromString, getTranslations } from "../utils";
-import MonthCaption from "./MonthCaption";
-import MonthSelector from "./MonthSelector";
-import { MonthPickerProps } from "./types";
-
-export interface MonthPickerStandaloneProps
-  extends Omit<
-    MonthPickerProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
-  > {
-  /**
-   * Monthpicker classname
-   */
-  className?: string;
-}
-
-export type MonthPickerStandaloneType = React.ForwardRefExoticComponent<
-  MonthPickerStandaloneProps & React.RefAttributes<HTMLDivElement>
->;
-
-export const MonthPickerStandalone = forwardRef<
-  HTMLDivElement,
-  MonthPickerStandaloneProps
->(
-  (
-    {
-      dropdownCaption = false,
-      fromDate,
-      toDate,
-      disabled = [],
-      selected,
-      className,
-      locale,
-      translations,
-      onMonthSelect,
-      defaultSelected,
-      year,
-      onYearChange,
-    },
-    ref,
-  ) => {
-    const translate = useI18n(
-      "DatePicker",
-      translations,
-      getTranslations(locale),
-    );
-    const langProviderLocale = useDateLocale();
-    const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
-      defaultSelected,
-    );
-
-    const handleSelect = (month?: Date) => {
-      setSelectedMonth(month);
-      onMonthSelect?.(month);
-    };
-
-    if (dropdownCaption && (!fromDate || !toDate)) {
-      console.warn("Using dropdownCaption required fromDate and toDate");
-      return null;
-    }
-
-    return (
-      <div ref={ref} className={cl("navds-date__wrapper", className)}>
-        <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>
-    );
-  },
-);
-
-export default MonthPickerStandalone;

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

@@ -1,22 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { dateIsInCurrentMonth } from "..";
-
-const selectedDate = new Date("Feb 1 1994");
-
-describe("Returns if date is in current month", () => {
-  test("Date should be within current month (true)", () => {
-    expect(dateIsInCurrentMonth(new Date(), new Date())).toBeTruthy();
-  });
-
-  test("Date should not be within current month (false)", () => {
-    expect(
-      dateIsInCurrentMonth(new Date("Sep 2 2021"), selectedDate),
-    ).toBeFalsy();
-    expect(
-      dateIsInCurrentMonth(new Date("Sep 1 2021"), selectedDate),
-    ).toBeFalsy();
-    expect(
-      dateIsInCurrentMonth(new Date("Sep 30 2021"), selectedDate),
-    ).toBeFalsy();
-  });
-});

package/src/date/utils/__tests__/get-dates.test.ts

@@ -1,121 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { getMonths, getYears } from "..";
-
-describe("Extracts correct months", () => {
-  test("March - October (8)", () => {
-    const t = {
-      start: new Date(2019, 2, 22),
-      end: new Date(2019, 9, 22),
-      current: new Date(2019, 6, 22),
-      res: 8,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-
-  test("Only first 7 months", () => {
-    const t = {
-      start: new Date(2019, 0, 22),
-      end: new Date(2022, 7, 22),
-      current: new Date(2022, 6, 22),
-      res: 8,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-
-  test("All of 2019 when only 2019 avaliable (12)", () => {
-    const t = {
-      start: new Date(2019, 0, 22),
-      end: new Date(2019, 11, 22),
-      current: new Date(2019, 6, 22),
-      res: 12,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-  test("All of 2019 when start + current is 2019 and end is later(12)", () => {
-    const t = {
-      start: new Date(2019, 0, 22),
-      end: new Date(2022, 7, 22),
-      current: new Date(2019, 6, 22),
-      res: 12,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-  test("All of 2020 when between 2019 and 2022 (12)", () => {
-    const t = {
-      start: new Date(2019, 0, 22),
-      end: new Date(2022, 7, 22),
-      current: new Date(2020, 6, 22),
-      res: 12,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-  test("Tail part of 2019, including starting month (12)", () => {
-    const t = {
-      start: new Date(2019, 5, 22),
-      end: new Date(2022, 7, 22),
-      current: new Date(2019, 6, 22),
-      res: 7,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-  test("End part of 2022, including starting month (12)", () => {
-    const t = {
-      start: new Date(2019, 5, 22),
-      end: new Date(2022, 7, 22),
-      current: new Date(2022, 7, 22),
-      res: 8,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-  test("Adds out of range month to list (13)", () => {
-    const t = {
-      start: new Date(2019, 5, 22),
-      end: new Date(2022, 7, 22),
-      current: new Date(2022, 9, 22),
-      res: 9,
-    };
-    expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-});
-
-describe("Extracts correct years", () => {
-  test("Same year (1)", () => {
-    const t = {
-      start: new Date(2019, 2, 22),
-      end: new Date(2019, 9, 22),
-      current: 2019,
-      res: 1,
-    };
-    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-
-  test("Multiple years (11)", () => {
-    const t = {
-      start: new Date(2019, 2, 22),
-      end: new Date(2029, 9, 22),
-      current: 2022,
-      res: 11,
-    };
-    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-
-  test("Displaymonth outside range: after (11)", () => {
-    const t = {
-      start: new Date(2019, 2, 22),
-      end: new Date(2029, 9, 22),
-      current: 2040,
-      res: 12,
-    };
-    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-
-  test("Displaymonth outside range: before (11)", () => {
-    const t = {
-      start: new Date(2019, 2, 22),
-      end: new Date(2029, 9, 22),
-      current: 2001,
-      res: 12,
-    };
-    expect(getYears(t.start, t.end, t.current).length).toEqual(t.res);
-  });
-});

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

@@ -1,83 +0,0 @@
-import { isSameYear } from "date-fns";
-import { describe, expect, test } from "vitest";
-import { getInitialYear } from "..";
-
-describe("Returns initial year for monthpicker", () => {
-  test("Default selected should be valid (true)", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2021"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2021"),
-        }),
-      ),
-    ).toBeTruthy();
-  });
-  test("Default selected should not be valid (false)", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2021"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2020"),
-        }),
-      ),
-    ).toBeFalsy();
-  });
-  test("Default selected should be valid with fromDate", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2021"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2021"),
-          /* toDate: new Date("Oct 4 2021"), */
-          fromDate: new Date("Oct 4 2021"),
-        }),
-      ),
-    ).toBeTruthy();
-  });
-  test("Default selected should be valid with toDate", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2021"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2021"),
-          toDate: new Date("Jun 4 2021"),
-        }),
-      ),
-    ).toBeTruthy();
-  });
-  test("Default selected should be moved to toDate", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2020"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2021"),
-          toDate: new Date("Jun 4 2020"),
-        }),
-      ),
-    ).toBeTruthy();
-  });
-  test("Default selected should be moved to fromDate", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2022"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2021"),
-          fromDate: new Date("Jun 4 2022"),
-        }),
-      ),
-    ).toBeTruthy();
-  });
-  test("Default selected should be moved to fromDate, not toDate", () => {
-    expect(
-      isSameYear(
-        new Date("Oct 4 2022"),
-        getInitialYear({
-          defaultMonth: new Date("Aug 4 2021"),
-          toDate: new Date("Oct 4 2023"),
-          fromDate: new Date("Jun 4 2022"),
-        }),
-      ),
-    ).toBeTruthy();
-  });
-});

package/src/date/utils/__tests__/get-month-weeks.test.ts

@@ -1,116 +0,0 @@
-/* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
-import { enGB, nb } from "date-fns/locale";
-import { describe, expect, test } from "vitest";
-import { getMonthWeeks } from "../get-month-weeks";
-
-describe('when using the "nB" locale', () => {
-  const locale = nb;
-  describe("when getting the weeks for January 2022", () => {
-    const weeks = getMonthWeeks(new Date(2022, 0), { locale });
-    test("the first week should be the last of the previous year", () => {
-      const weekNumbers = weeks.map((week) => week.weekNumber);
-      expect(weekNumbers[0]).toEqual(52);
-    });
-    test("the first week should contain days from previous year", () => {
-      expect(weeks[0].dates.map((date) => date.getDate())).toEqual([
-        27, 28, 29, 30, 31, 1, 2,
-      ]);
-    });
-    test("the last week should be the last of January", () => {
-      const weekNumbers = weeks.map((week) => week.weekNumber);
-      expect(weekNumbers[weekNumbers.length - 1]).toEqual(5);
-    });
-  });
-});
-
-describe('when using the "enGB" locale', () => {
-  const locale = enGB;
-  describe("when using fixed weeks", () => {
-    const useFixedWeeks = true;
-    describe("when getting the weeks for December 2022", () => {
-      const weeks = getMonthWeeks(new Date(2022, 11), {
-        useFixedWeeks,
-        locale,
-      });
-      test("should return 48 - 1 week numbers", () => {
-        const weekNumbers = weeks.map((week) => week.weekNumber);
-        const expectedResult = [48, 49, 50, 51, 52, 1];
-        expect(weekNumbers).toEqual(expectedResult);
-      });
-      test("the last week should be the one in the next year", () => {
-        const lastWeek = weeks[weeks.length - 1];
-        const lastWeekDates = lastWeek.dates.map((date) => date.getDate());
-        const expectedResult = [2, 3, 4, 5, 6, 7, 8];
-        expect(lastWeekDates).toEqual(expectedResult);
-      });
-    });
-    describe("when getting the weeks for December 2021", () => {
-      const weeks = getMonthWeeks(new Date(2021, 11), {
-        useFixedWeeks,
-        locale,
-      });
-      test("should return 48 - 1 week numbers", () => {
-        const weekNumbers = weeks.map((week) => week.weekNumber);
-        const expectedResult = [48, 49, 50, 51, 52, 1];
-        expect(weekNumbers).toEqual(expectedResult);
-      });
-      test("week 1 contains the first day of the new year", () => {
-        expect(weeks[4].dates.map((date) => date.getDate())).toEqual([
-          27, 28, 29, 30, 31, 1, 2,
-        ]);
-      });
-    });
-  });
-});
-
-describe('when using the "nb" locale', () => {
-  const locale = nb;
-  describe("when using fixed weeks", () => {
-    const useFixedWeeks = true;
-    describe("when getting the weeks for December 2022", () => {
-      const weeks = getMonthWeeks(new Date(2022, 11), {
-        useFixedWeeks,
-        locale,
-      });
-      test("should return 48 - 1 week numbers", () => {
-        const weekNumbers = weeks.map((week) => week.weekNumber);
-        const expectedResult = [48, 49, 50, 51, 52, 1];
-        expect(weekNumbers).toEqual(expectedResult);
-      });
-      test("the last week should be the one in the next year", () => {
-        const lastWeek = weeks[weeks.length - 1];
-        const lastWeekDates = lastWeek.dates.map((date) => date.getDate());
-        const expectedResult = [2, 3, 4, 5, 6, 7, 8];
-        expect(lastWeekDates).toEqual(expectedResult);
-      });
-    });
-    describe("when getting the weeks for December 2021", () => {
-      const weeks = getMonthWeeks(new Date(2021, 11), {
-        useFixedWeeks,
-        locale,
-      });
-      test("should return 48 - 1 week numbers", () => {
-        const weekNumbers = weeks.map((week) => week.weekNumber);
-        const expectedResult = [48, 49, 50, 51, 52, 1];
-        expect(weekNumbers).toEqual(expectedResult);
-      });
-      test("week 1 contains the first day of the new year", () => {
-        expect(weeks[4].dates.map((date) => date.getDate())).toEqual([
-          27, 28, 29, 30, 31, 1, 2,
-        ]);
-      });
-    });
-  });
-});
-
-describe("getMonthWeeks should calculate week-number corectly", () => {
-  const locale = nb;
-  describe("when getting the weeks for September 2022", () => {
-    const date = new Date(2022, 8);
-    const weeks = getMonthWeeks(date, { locale });
-    test("the last week should have number 39", () => {
-      const weekNumbers = weeks.map((week) => week.weekNumber);
-      expect(weekNumbers[weekNumbers.length - 1]).toEqual(39);
-    });
-  });
-});

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

@@ -1,60 +0,0 @@
-import {
-  isSameYear,
-  setMonth,
-  setYear,
-  startOfMonth,
-  startOfYear,
-} from "date-fns";
-
-export const getMonths = (start: Date, end: Date, current: Date): Date[] => {
-  const dropdownMonths: Date[] = [];
-
-  if (isSameYear(start, end)) {
-    const date = startOfMonth(start);
-    for (let month = start.getMonth(); month <= end.getMonth(); month++) {
-      dropdownMonths.push(setMonth(date, month));
-    }
-  } else if (isSameYear(current, end)) {
-    const date = startOfMonth(new Date());
-    for (let month = 0; month <= end.getMonth(); month++) {
-      dropdownMonths.push(setMonth(date, month));
-    }
-  } else if (isSameYear(current, start)) {
-    const date = startOfMonth(start);
-    for (let month = date.getMonth(); month <= 11; month++) {
-      dropdownMonths.push(setMonth(date, month));
-    }
-  } else {
-    const date = startOfMonth(new Date());
-    for (let month = 0; month <= 11; month++) {
-      dropdownMonths.push(setMonth(date, month));
-    }
-  }
-
-  if (!dropdownMonths.map((d) => d.getMonth()).includes(current.getMonth())) {
-    dropdownMonths.push(current);
-  }
-  dropdownMonths.sort((a, b) => a.getMonth() - b.getMonth());
-
-  return dropdownMonths;
-};
-
-export const getYears = (
-  start: Date,
-  end: Date,
-  currentYear: number,
-): Date[] => {
-  const years: Date[] = [];
-  const fromYear = start.getFullYear();
-  const toYear = end.getFullYear();
-  for (let year = fromYear; year <= toYear; year++) {
-    years.push(setYear(startOfYear(new Date()), year));
-  }
-
-  if (fromYear > currentYear || toYear < currentYear) {
-    years.push(setYear(startOfYear(new Date()), currentYear));
-  }
-
-  years.sort((a, b) => a.getFullYear() - b.getFullYear());
-  return years;
-};

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

@@ -1,25 +0,0 @@
-import { startOfYear } from "date-fns";
-import { DayPickerContextValue } from "react-day-picker";
-
-/**
- *
- */
-export function getInitialYear(context: Partial<DayPickerContextValue>): Date {
-  const { month, defaultMonth, toDate, fromDate } = context;
-
-  let initialMonth = month || defaultMonth || new Date();
-
-  const isAfter = toDate && toDate.getFullYear() < initialMonth.getFullYear();
-
-  const isBefore =
-    fromDate && fromDate.getFullYear() > initialMonth.getFullYear();
-
-  if (isAfter) {
-    initialMonth = toDate;
-  }
-  if (isBefore) {
-    initialMonth = fromDate;
-  }
-
-  return startOfYear(initialMonth);
-}