@navikt/ds-react 1.3.0-alpha.0 → 1.3.1

package/src/datepicker/hooks/useDatepicker.tsx

@@ -1,181 +0,0 @@
-import { differenceInCalendarDays } from "date-fns";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { DayClickEventHandler } from "react-day-picker";
-import { DatePickerProps } from "../DatePicker";
-import { DatePickerInputProps } from "../DatePickerInput";
-import { formatDateForInput, getLocaleFromString, isValidDate } from "../utils";
-import { parseDate } from "../utils/parse-date";
-
-export interface UseDatepickerOptions
-  extends Pick<
-    DatePickerProps,
-    | "locale"
-    | "fromDate"
-    | "toDate"
-    | "today"
-    | "toDate"
-    | "fromDate"
-    | "toDate"
-  > {
-  /** The initially selected date */
-  defaultSelected?: Date;
-  /** Make the selection required. */
-  required?: boolean;
-  /**
-   * Opens datepicker on input-focus
-   * @default true
-   */
-  openOnFocus?: boolean;
-}
-
-interface UseDatepickerValue {
-  /**
-   * Use: <DatePicker {...dayPickerProps}/>
-   */
-  dayPickerProps: DatePickerProps;
-  /**
-   * Use: <DatePicker.Input {...inputProps}/>
-   */
-  inputProps: Pick<
-    DatePickerInputProps,
-    "onChange" | "onFocus" | "onBlur" | "value" | "wrapperRef"
-  >;
-  /**
-   * Resets all states
-   */
-  reset: () => void;
-  /**
-   * Selected Date callback
-   */
-  selectedDay?: Date;
-  /**
-   * Manually set selected day if needed
-   */
-  setSelected: (date?: Date) => void;
-}
-
-export const useDatepicker = (
-  opt: UseDatepickerOptions = {}
-): UseDatepickerValue => {
-  const {
-    locale: _locale = "nb",
-    required,
-    defaultSelected,
-    today = new Date(),
-    fromDate,
-    toDate,
-    openOnFocus = true,
-  } = opt;
-
-  const locale = getLocaleFromString(_locale);
-
-  const inputRef = useRef<HTMLDivElement>(null);
-  const daypickerRef = useRef<HTMLDivElement>(null);
-
-  // Initialize states
-  const [month, setMonth] = useState(defaultSelected ?? today);
-  const [selectedDay, setSelectedDay] = useState(defaultSelected);
-  const [open, setOpen] = useState(false);
-
-  const defaultInputValue = defaultSelected
-    ? formatDateForInput(defaultSelected, locale)
-    : "";
-  const [inputValue, setInputValue] = useState(defaultInputValue);
-
-  const handleFocusOut = useCallback(
-    (e) =>
-      ![daypickerRef.current, inputRef.current].some((element) =>
-        element?.contains(e.relatedTarget)
-      ) && setOpen(false),
-    []
-  );
-
-  useEffect(() => {
-    const el = inputRef.current;
-    el?.addEventListener("focusout", handleFocusOut);
-    return () => el?.removeEventListener?.("focusout", handleFocusOut);
-  }, [handleFocusOut]);
-
-  const reset = () => {
-    setSelectedDay(defaultSelected);
-    setMonth(defaultSelected ?? today);
-    setInputValue(defaultInputValue ?? "");
-  };
-
-  const setSelected = (date: Date | undefined) => {
-    setSelectedDay(date);
-    setMonth(date ?? today);
-    setInputValue(date ? formatDateForInput(date, locale) : "");
-  };
-
-  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    !open && openOnFocus && setOpen(true);
-    if (!e.target.value) {
-      reset();
-      return;
-    }
-    let day = parseDate(e.target.value, today, locale);
-    if (isValidDate(day)) {
-      setMonth(day);
-      setInputValue(formatDateForInput(day, locale));
-    }
-  };
-
-  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
-    let day = parseDate(e.target.value, today, locale);
-    isValidDate(day) && setInputValue(formatDateForInput(day, locale));
-  };
-
-  /* Only allow de-selecting if not required */
-  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
-    if (!required && selected) {
-      setSelectedDay(undefined);
-      setInputValue("");
-      return;
-    }
-    setSelectedDay(day);
-    setInputValue(day ? formatDateForInput(day, locale) : "");
-  };
-
-  // When changing the input field, save its value in state and check if the
-  // string is a valid date. If it is a valid day, set it as selected and update
-  // the calendar’s month.
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    setInputValue(e.target.value);
-    const day = parseDate(e.target.value, today, locale);
-
-    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
-    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
-    if (!isValidDate(day) || isBefore || isAfter) {
-      setSelectedDay(undefined);
-      return;
-    }
-    setSelectedDay(day);
-    setMonth(day);
-  };
-
-  const dayPickerProps = {
-    month,
-    onMonthChange: (month) => setMonth(month),
-    onDayClick: handleDayClick,
-    selected: selectedDay,
-    locale: _locale,
-    fromDate,
-    toDate,
-    today,
-    open,
-    onClose: () => setOpen(false),
-    onOpenToggle: () => setOpen((x) => !x),
-    ref: daypickerRef,
-  };
-
-  const inputProps = {
-    onChange: handleChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    value: inputValue,
-    wrapperRef: inputRef,
-  };
-
-  return { dayPickerProps, inputProps, reset, selectedDay, setSelected };
-};

package/src/datepicker/hooks/useRangeDatepicker.tsx

@@ -1,285 +0,0 @@
-import { differenceInCalendarDays } from "date-fns";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { DateRange } from "react-day-picker";
-import { DatePickerProps } from "../DatePicker";
-import { DatePickerInputProps } from "../DatePickerInput";
-import {
-  formatDateForInput,
-  getLocaleFromString,
-  isValidDate,
-  parseDate,
-} from "../utils";
-import { UseDatepickerOptions } from "./useDatepicker";
-
-interface UseRangeDatepickerOptions
-  extends Omit<UseDatepickerOptions, "defaultSelected"> {
-  /** The initially selected date-range */
-  defaultSelected?: DateRange;
-}
-
-interface UseRangeDatepickerValue {
-  /**
-   * Use: <DatePicker {...dayPickerProps}/>
-   */
-  dayPickerProps: DatePickerProps;
-  /**
-   * Use: <DatePicker.Input label="from" {...fromInputProps}/>
-   */
-  fromInputProps: Pick<
-    DatePickerInputProps,
-    "onChange" | "onFocus" | "onBlur" | "value"
-  >;
-  /**
-   * Use: <DatePicker.Input label="to" {...toInputProps}/>
-   */
-  toInputProps: Pick<
-    DatePickerInputProps,
-    "onChange" | "onFocus" | "onBlur" | "value"
-  >;
-  /**
-   * Resets all states
-   */
-  reset: () => void;
-  /**
-   * Selected range-callback
-   */
-  selectedRange?: DateRange;
-  /**
-   * Manually set selected range if needed
-   */
-  setSelected: (date?: DateRange) => void;
-}
-
-const RANGE = {
-  FROM: "FROM",
-  TO: "TO",
-} as const;
-
-type RangeT = typeof RANGE[keyof typeof RANGE];
-
-export const useRangeDatepicker = (
-  opt: UseRangeDatepickerOptions = {}
-): UseRangeDatepickerValue => {
-  const {
-    locale: _locale = "nb",
-    defaultSelected,
-    today = new Date(),
-    fromDate,
-    toDate,
-    openOnFocus = true,
-  } = opt;
-
-  const locale = getLocaleFromString(_locale);
-
-  const inputRefTo = useRef<HTMLDivElement>(null);
-  const inputRefFrom = useRef<HTMLDivElement>(null);
-  const datePickerRef = useRef<HTMLDivElement | null>(null);
-
-  // Initialize states
-  const [month, setMonth] = useState(
-    defaultSelected ? defaultSelected.from : today
-  );
-  const [selectedRange, setSelectedRange] = useState(defaultSelected);
-
-  const [fromInputValue, setFromInputValue] = useState(
-    defaultSelected?.from
-      ? formatDateForInput(defaultSelected.from, locale)
-      : ""
-  );
-
-  const [toInputValue, setToInputValue] = useState(
-    defaultSelected?.to ? formatDateForInput(defaultSelected.to, locale) : ""
-  );
-  const [open, setOpen] = useState(false);
-
-  const handleFocusOut = useCallback(
-    (e) =>
-      ![datePickerRef.current, inputRefTo.current, inputRefFrom.current].some(
-        (element) => element?.contains(e.relatedTarget)
-      ) && setOpen(false),
-    []
-  );
-
-  useEffect(() => {
-    const from = inputRefFrom.current;
-    const to = inputRefTo.current;
-    from?.addEventListener("focusout", handleFocusOut);
-    to?.addEventListener("focusout", handleFocusOut);
-    return () => {
-      from?.removeEventListener?.("focusout", handleFocusOut);
-      to?.removeEventListener?.("focusout", handleFocusOut);
-    };
-  }, [handleFocusOut]);
-
-  const reset = () => {
-    setSelectedRange(defaultSelected);
-    setMonth(defaultSelected ? defaultSelected.from : today);
-    setFromInputValue(
-      defaultSelected?.from
-        ? formatDateForInput(defaultSelected.from, locale)
-        : ""
-    );
-    setToInputValue(
-      defaultSelected?.to ? formatDateForInput(defaultSelected.to, locale) : ""
-    );
-  };
-
-  const setSelected = (range?: DateRange) => {
-    setSelectedRange(range);
-    setFromInputValue(
-      range?.from ? formatDateForInput(range.from, locale) : ""
-    );
-    setToInputValue(range?.to ? formatDateForInput(range?.to, locale) : "");
-  };
-
-  const handleFocus = (e, src: RangeT) => {
-    !open && openOnFocus && setOpen(true);
-    let day = parseDate(e.target.value, today, locale);
-    if (isValidDate(day)) {
-      setMonth(day);
-      src === RANGE.FROM
-        ? setFromInputValue(formatDateForInput(day, locale))
-        : setToInputValue(formatDateForInput(day, locale));
-    }
-  };
-
-  const handleInputs = (day: Date, src: RangeT) => {
-    if (src === RANGE.FROM) {
-      const isAfter =
-        toInputValue &&
-        differenceInCalendarDays(day, parseDate(toInputValue, today, locale)) >
-          0;
-
-      if (isAfter) {
-        setFromInputValue(
-          formatDateForInput(parseDate(toInputValue, today, locale), locale)
-        );
-        setToInputValue(formatDateForInput(day, locale));
-      } else {
-        setFromInputValue(formatDateForInput(day, locale));
-      }
-    } else if (src === RANGE.TO) {
-      const isBefore =
-        fromInputValue &&
-        differenceInCalendarDays(
-          parseDate(fromInputValue, today, locale),
-          day
-        ) > 0;
-
-      if (isBefore) {
-        setToInputValue(
-          formatDateForInput(parseDate(fromInputValue, today, locale), locale)
-        );
-        setFromInputValue(formatDateForInput(day, locale));
-      } else {
-        setToInputValue(formatDateForInput(day, locale));
-      }
-    }
-  };
-
-  const handleBlur = (e, src: RangeT) => {
-    let day = parseDate(e.target.value, today, locale);
-    if (!isValidDate(day)) {
-      return;
-    }
-
-    handleInputs(day, src);
-  };
-
-  const handleSelect = (range) => {
-    const prevToRange =
-      !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
-
-    range?.from
-      ? setFromInputValue(formatDateForInput(range?.from, locale))
-      : setFromInputValue("");
-    prevToRange
-      ? setToInputValue(formatDateForInput(prevToRange, locale))
-      : setToInputValue("");
-    setSelectedRange({ from: range?.from, to: prevToRange });
-  };
-
-  /* live-update datepicker based on changes in inputfields */
-  const handleChange = (e, src: RangeT) => {
-    src === RANGE.FROM
-      ? setFromInputValue(e.target.value)
-      : setToInputValue(e.target.value);
-    const day = parseDate(e.target.value, today, locale);
-
-    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
-    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
-    if (!isValidDate(day) || isBefore || isAfter) {
-      src === RANGE.FROM
-        ? setSelectedRange((x) => ({ ...x, from: undefined }))
-        : setSelectedRange((x) => ({ from: x?.from, to: undefined }));
-      return;
-    }
-
-    /* If to-value < from-value, switch places in state */
-    if (
-      src === RANGE.TO &&
-      selectedRange?.from &&
-      differenceInCalendarDays(selectedRange?.from, day) >= 0
-    ) {
-      setSelectedRange({ from: day, to: selectedRange?.from });
-      setMonth(day);
-      return;
-    }
-
-    /* If from-value > to-value  , switch places in state */
-    if (
-      src === RANGE.FROM &&
-      selectedRange?.to &&
-      differenceInCalendarDays(day, selectedRange?.to) >= 0
-    ) {
-      setSelectedRange({ to: day, from: selectedRange?.to });
-      setMonth(day);
-      return;
-    }
-
-    src === RANGE.FROM && setSelectedRange((x) => ({ ...x, from: day }));
-    src === RANGE.TO && setSelectedRange((x) => ({ from: x?.from, to: day }));
-    setMonth(day);
-  };
-
-  const dayPickerProps = {
-    month: month,
-    onMonthChange: (month) => setMonth(month),
-    onSelect: handleSelect,
-    selected: selectedRange,
-    locale: _locale,
-    fromDate,
-    toDate,
-    today,
-    mode: "range" as const,
-    open,
-    onClose: () => setOpen(false),
-    onOpenToggle: () => setOpen((x) => !x),
-    ref: datePickerRef,
-  };
-
-  const fromInputProps = {
-    onChange: (e) => handleChange(e, RANGE.FROM),
-    onFocus: (e) => handleFocus(e, RANGE.FROM),
-    onBlur: (e) => handleBlur(e, RANGE.FROM),
-    value: fromInputValue,
-    wrapperRef: inputRefFrom,
-  };
-
-  const toInputProps = {
-    onChange: (e) => handleChange(e, RANGE.TO),
-    onFocus: (e) => handleFocus(e, RANGE.TO),
-    onBlur: (e) => handleBlur(e, RANGE.TO),
-    value: toInputValue,
-    wrapperRef: inputRefTo,
-  };
-
-  return {
-    dayPickerProps,
-    fromInputProps,
-    toInputProps,
-    reset,
-    selectedRange,
-    setSelected,
-  };
-};

package/src/datepicker/index.ts

@@ -1,5 +0,0 @@
-export { default as DatePicker } from "./DatePicker";
-export { DatePickerProps } from "./DatePicker";
-export { DatePickerStandaloneProps } from "./DatePickerStandalone";
-export { DatePickerInputProps } from "./DatePickerInput";
-export { useDatepicker, useRangeDatepicker } from "./hooks";

package/src/datepicker/utils/__tests__/dates-disabled.test.ts

@@ -1,48 +0,0 @@
-import { disableDate } from "../dates-disabled";
-
-describe("Returns if date should be disabled", () => {
-  test("Should be disabled using Date (true)", () => {
-    const dateToDisable = new Date("Aug 3 2022");
-    expect(disableDate(dateToDisable, new Date("Aug 3 2022"))).toBe(true);
-  });
-
-  test("Should not be disabled using Date (false)", () => {
-    const dateToDisable = new Date("Aug 3 2022");
-    expect(disableDate(dateToDisable, new Date("Okt 11 2019"))).toBe(false);
-  });
-
-  test("Should be disabled using Array (true)", () => {
-    const dateToDisable = [
-      new Date("Nov 2 2019"),
-      new Date("Aug 13 2021"),
-      new Date("Jul 17 2018"),
-    ];
-    expect(disableDate(dateToDisable, new Date("Jul 17 2018"))).toBe(true);
-  });
-
-  test("Should not be disabled using Array (false)", () => {
-    const dateToDisable = [
-      new Date("Nov 2 2019"),
-      new Date("Aug 13 2021"),
-      new Date("Jul 17 2018"),
-    ];
-    expect(disableDate(dateToDisable, new Date("Jul 18 2018"))).toBe(false);
-  });
-
-  test("Should be disabled using Array with range (true)", () => {
-    const dateToDisable = [
-      { from: new Date("Jul 05 2018"), to: new Date("Sept 09 2020") },
-      { from: new Date("Sep 18 2020"), to: new Date("Des 09 2020") },
-      new Date("Nov 2 2019"),
-    ];
-    expect(disableDate(dateToDisable, new Date("Jul 18 2018"))).toBe(true);
-  });
-
-  test("Should not be disabled using Array with range (false)", () => {
-    const dateToDisable = [
-      { from: new Date("Jul 05 2018"), to: new Date("Sept 09 2020") },
-      new Date("Nov 2 2019"),
-    ];
-    expect(disableDate(dateToDisable, new Date("Jul 4 2018"))).toBe(false);
-  });
-});

package/src/datepicker/utils/__tests__/format-dates.test.ts

@@ -1,14 +0,0 @@
-import { parseDate } from "../parse-date";
-import nb from "date-fns/locale/nb";
-import { formatDateForInput } from "../format-date";
-
-const parse = (inp: string) => parseDate(inp, new Date(), nb);
-
-describe("Format date to correct output", () => {
-  test("formatDateForInput", () => {
-    expect(formatDateForInput(parse("15/05/22"), nb)).toEqual("15.05.2022");
-    expect(formatDateForInput(parse("1/5/22"), nb)).toEqual("01.05.2022");
-    expect(formatDateForInput(parse("1/05/22"), nb)).toEqual("01.05.2022");
-    expect(formatDateForInput(parse("15/5/22"), nb)).toEqual("15.05.2022");
-  });
-});

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

@@ -1,79 +0,0 @@
-import { getMonths, getYears } from "../get-dates";
-
-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);
-  });
-});
-
-describe("Extracts correct years", () => {
-  test("Same year (1)", () => {
-    const t = {
-      start: new Date(2019, 2, 22),
-      end: new Date(2019, 9, 22),
-      res: 1,
-    };
-    expect(getYears(t.start, t.end).length).toEqual(t.res);
-  });
-  test("Multiple years (11)", () => {
-    const t = {
-      start: new Date(2019, 2, 22),
-      end: new Date(2029, 9, 22),
-      res: 11,
-    };
-    expect(getYears(t.start, t.end).length).toEqual(t.res);
-  });
-});

package/src/datepicker/utils/__tests__/parse-dates.test.ts

@@ -1,81 +0,0 @@
-import { parseDate } from "../parse-date";
-import { isValidDate } from "../valid-date";
-import nb from "date-fns/locale/nb";
-import { getMonth, getYear } from "date-fns";
-
-const check = (inp: string) =>
-  expect(isValidDate(parseDate(inp, new Date(), nb)));
-
-const parse = (inp: string) => parseDate(inp, new Date(), nb);
-
-describe("Parse date-inputs", () => {
-  test("No spaces", () => {
-    check("150522").toBeTruthy();
-    check("11052022").toBeTruthy();
-    check("15052022").toBeTruthy();
-  });
-
-  test(". divider", () => {
-    check("1.5.22").toBeTruthy();
-    check("1.5.2022").toBeTruthy();
-    check("11.05.22").toBeTruthy();
-    check("11.05.2022").toBeTruthy();
-  });
-
-  test("/ divider", () => {
-    check("1/5/22").toBeTruthy();
-    check("10/5/22").toBeTruthy();
-    check("1/5/2022").toBeTruthy();
-    check("10/5/2022").toBeTruthy();
-    check("1/05/22").toBeTruthy();
-    check("10/05/22").toBeTruthy();
-    check("1/05/2022").toBeTruthy();
-    check("10/05/2022").toBeTruthy();
-  });
-
-  test("- divider", () => {
-    check("1-5-22").toBeTruthy();
-    check("10-5-22").toBeTruthy();
-    check("1-5-2022").toBeTruthy();
-    check("10-5-2022").toBeTruthy();
-    check("1-05-22").toBeTruthy();
-    check("10-05-22").toBeTruthy();
-    check("1-05-2022").toBeTruthy();
-    check("10-05-2022").toBeTruthy();
-  });
-});
-
-describe("Parse date-inputs to correct year", () => {
-  test("No spaces", () => {
-    expect(getYear(parse("150522"))).toEqual(2022);
-  });
-
-  test(". divider", () => {
-    expect(getYear(parse("1.05.22"))).toEqual(2022);
-    expect(getYear(parse("11.05.22"))).toEqual(2022);
-    expect(getYear(parse("1.5.22"))).toEqual(2022);
-    expect(getYear(parse("11.5.22"))).toEqual(2022);
-  });
-
-  test("/ divider", () => {
-    expect(getYear(parse("1/5/22"))).toEqual(2022);
-    expect(getYear(parse("10/5/22"))).toEqual(2022);
-    expect(getYear(parse("1/05/22"))).toEqual(2022);
-    expect(getYear(parse("10/05/22"))).toEqual(2022);
-  });
-
-  test("- divider", () => {
-    expect(getYear(parse("1-5-22"))).toEqual(2022);
-    expect(getYear(parse("10-5-22"))).toEqual(2022);
-    expect(getYear(parse("1-05-22"))).toEqual(2022);
-    expect(getYear(parse("10-05-22"))).toEqual(2022);
-  });
-});
-
-describe("Parse date-inputs to correct month", () => {
-  test("No spaces", () => {
-    expect(getMonth(parse("150522"))).toEqual(4);
-    expect(getMonth(parse("11052022"))).toEqual(4);
-    expect(getMonth(parse("15052022"))).toEqual(4);
-  });
-});