@navikt/ds-react 1.4.1 → 1.4.3

package/esm/date/utils/parse-date.js

@@ -3,16 +3,10 @@ import { isValidDate } from ".";
 export const INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";
 export const INPUT_DATE_STRING_FORMAT_MONTH = "MMMM yyyy";
 const ALLOWED_INPUT_FORMATS_DATE = [
-    "ddMMyy",
-    "d.M.yy",
-    "dd.MM.yy",
-    "dd/MM/yy",
-    "dd-MM-yy",
     INPUT_DATE_STRING_FORMAT_DATE,
     "ddMMyyyy",
     "dd/MM/yyyy",
     "dd-MM-yyyy",
-    "d.M.yyyy",
 ];
 const ALLOWED_INPUT_FORMATS_MONTH = [
     "M/yyyy",
@@ -23,15 +17,27 @@ const ALLOWED_INPUT_FORMATS_MONTH = [
     INPUT_DATE_STRING_FORMAT_MONTH,
     ...ALLOWED_INPUT_FORMATS_DATE,
 ];
+const isTwoDigitYear = (dateString, today, locale, formats) => {
+    let parsed;
+    const newFormat = formats.map((x) => x.replace("yyyy", "yy"));
+    for (const format of newFormat) {
+        parsed = parse(dateString, format, today, { locale });
+        if (isValidDate(parsed)) {
+            return true;
+        }
+    }
+    return false;
+};
 export const parseDate = (date, today, locale, type) => {
     let parsed;
     const ALLOWED_FORMATS = type === "date" ? ALLOWED_INPUT_FORMATS_DATE : ALLOWED_INPUT_FORMATS_MONTH;
     for (const format of ALLOWED_FORMATS) {
         parsed = parse(date, format, today, { locale });
-        if (isValidDate(parsed)) {
+        if (isValidDate(parsed) &&
+            !isTwoDigitYear(date, today, locale, ALLOWED_FORMATS)) {
             return parsed;
         }
     }
-    return parsed;
+    return new Date("Invalid date");
 };
 //# sourceMappingURL=parse-date.js.map

package/esm/date/utils/parse-date.js.map

@@ -1 +1 @@
-{"version":3,"file":"parse-date.js","sourceRoot":"","sources":["../../../src/date/utils/parse-date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAEhC,MAAM,CAAC,MAAM,6BAA6B,GAAG,YAAY,CAAC;AAE1D,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;AAE1D,MAAM,0BAA0B,GAAG;IACjC,QAAQ;IACR,QAAQ;IACR,UAAU;IACV,UAAU;IACV,UAAU;IACV,6BAA6B;IAC7B,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,UAAU;CACX,CAAC;AAEF,MAAM,2BAA2B,GAAG;IAClC,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,SAAS;IACT,SAAS;IACT,8BAA8B;IAC9B,GAAG,0BAA0B;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,KAAW,EACX,MAAc,EACd,IAAsB,EACtB,EAAE;IACF,IAAI,MAAM,CAAC;IACX,MAAM,eAAe,GACnB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAC7E,KAAK,MAAM,MAAM,IAAI,eAAe,EAAE;QACpC,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAChD,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE;YACvB,OAAO,MAAM,CAAC;SACf;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"parse-date.js","sourceRoot":"","sources":["../../../src/date/utils/parse-date.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAEhC,MAAM,CAAC,MAAM,6BAA6B,GAAG,YAAY,CAAC;AAE1D,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC;AAE1D,MAAM,0BAA0B,GAAG;IACjC,6BAA6B;IAC7B,UAAU;IACV,YAAY;IACZ,YAAY;CACb,CAAC;AAEF,MAAM,2BAA2B,GAAG;IAClC,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,SAAS;IACT,SAAS;IACT,8BAA8B;IAC9B,GAAG,0BAA0B;CAC9B,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE;IAC5D,IAAI,MAAM,CAAC;IACX,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAC9D,KAAK,MAAM,MAAM,IAAI,SAAS,EAAE;QAC9B,MAAM,GAAG,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QACtD,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;KACF;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,KAAW,EACX,MAAc,EACd,IAAsB,EAChB,EAAE;IACR,IAAI,MAAM,CAAC;IACX,MAAM,eAAe,GACnB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAC7E,KAAK,MAAM,MAAM,IAAI,eAAe,EAAE;QACpC,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QAChD,IACE,WAAW,CAAC,MAAM,CAAC;YACnB,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,EACrD;YACA,OAAO,MAAM,CAAC;SACf;KACF;IACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC;AAClC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.4.1",
+    "@navikt/ds-icons": "^1.4.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/date/datepicker/datepicker.stories.tsx

@@ -1,4 +1,3 @@
-import isSaturday from "date-fns/isSaturday";
 import React, { useId, useState } from "react";
 import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
 import { Button } from "../..";
@@ -221,8 +220,13 @@ export const UserControlled = () => {
 };
 
 export const Validering = () => {
-  const { datepickerProps, selectedDay, inputProps } = UNSAFE_useDatepicker({
-    fromDate: new Date("Aug 23 2019"),
+  const [error, setError] = useState(false);
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 2 2019"),
+    onValidate: (val) => setError(val.isWeekend),
+    defaultSelected: new Date("Nov 26 2022"),
+    disableWeekends: true,
+    onDateChange: console.log,
   });
 
   return (
@@ -230,8 +234,8 @@ export const Validering = () => {
       <DatePicker {...datepickerProps}>
         <DatePicker.Input
           error={
-            selectedDay && isSaturday(selectedDay)
-              ? "NAV-kontoret er ikke åpent på lørdager. Velg en annen dag."
+            error
+              ? "NAV-kontoret er ikke åpent i helger. Velg en annen dag."
               : undefined
           }
           {...inputProps}
@@ -261,3 +265,24 @@ export const ErrorInput = () => {
     </div>
   );
 };
+
+export const UseRangedDatepickerValidation = () => {
+  const { datepickerProps, fromInputProps, toInputProps } =
+    UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+      disableWeekends: true,
+      disabled: [new Date("Oct 10 2022")],
+      onValidate: console.table,
+    });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <DatePicker.Input {...fromInputProps} label="Fra" />
+          <DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </DatePicker>
+    </div>
+  );
+};

package/src/date/hooks/index.ts

@@ -1,6 +1,9 @@
 export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export type { DateValidationT } from "./useDatepicker";
 export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export type { RangeValidationT } from "./useRangeDatepicker";
 export { useMonthpicker as UNSAFE_useMonthpicker } from "./useMonthPicker";
+export type { MonthValidationT } from "./useMonthPicker";
 export { useDateInputContext, DateContext } from "./useDateInputContext";
 export {
   useSharedMonthContext,

package/src/date/hooks/useDatepicker.tsx

@@ -36,6 +36,15 @@ export interface UseDatepickerOptions
    * Callback for changed state
    */
   onDateChange?: (val?: Date) => void;
+  /**
+   * Input-format
+   * @default "dd.MM.yyyy"
+   */
+  inputFormat?: string;
+  /**
+   * validation-callback
+   */
+  onValidate?: (val: DateValidationT) => void;
 }
 
 interface UseDatepickerValue {
@@ -62,6 +71,27 @@ interface UseDatepickerValue {
   setSelected: (date?: Date) => void;
 }
 
+export type DateValidationT = {
+  isDisabled: boolean;
+  isWeekend: boolean;
+  isEmpty: boolean;
+  isInvalid: boolean;
+  isValidDate: boolean;
+  isBefore: boolean;
+  isAfter: boolean;
+};
+
+const getValidationMessage = (val = {}): DateValidationT => ({
+  isDisabled: false,
+  isWeekend: false,
+  isEmpty: false,
+  isInvalid: false,
+  isBefore: false,
+  isAfter: false,
+  isValidDate: true,
+  ...val,
+});
+
 export const useDatepicker = (
   opt: UseDatepickerOptions = {}
 ): UseDatepickerValue => {
@@ -75,6 +105,8 @@ export const useDatepicker = (
     disabled,
     disableWeekends,
     onDateChange,
+    inputFormat,
+    onValidate,
   } = opt;
 
   const locale = getLocaleFromString(_locale);
@@ -90,7 +122,7 @@ export const useDatepicker = (
   const [open, setOpen] = useState(false);
 
   const defaultInputValue = defaultSelected
-    ? formatDateForInput(defaultSelected, locale, "date")
+    ? formatDateForInput(defaultSelected, locale, "date", inputFormat)
     : "";
   const [inputValue, setInputValue] = useState(defaultInputValue);
 
@@ -99,6 +131,11 @@ export const useDatepicker = (
     setSelectedDay(date);
   };
 
+  const updateValidation = (val: Partial<DateValidationT> = {}) => {
+    const msg = getValidationMessage(val);
+    onValidate?.(msg);
+  };
+
   const handleFocusIn = useCallback(
     (e) => {
       if (!e?.target || !e?.target?.nodeType) {
@@ -134,7 +171,9 @@ export const useDatepicker = (
   const setSelected = (date: Date | undefined) => {
     updateDate(date);
     setMonth(date ?? today);
-    setInputValue(date ? formatDateForInput(date, locale, "date") : "");
+    setInputValue(
+      date ? formatDateForInput(date, locale, "date", inputFormat) : ""
+    );
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
@@ -143,13 +182,14 @@ export const useDatepicker = (
     let day = parseDate(e.target.value, today, locale, "date");
     if (isValidDate(day)) {
       setMonth(day);
-      setInputValue(formatDateForInput(day, locale, "date"));
+      setInputValue(formatDateForInput(day, locale, "date", inputFormat));
     }
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     let day = parseDate(e.target.value, today, locale, "date");
-    isValidDate(day) && setInputValue(formatDateForInput(day, locale, "date"));
+    isValidDate(day) &&
+      setInputValue(formatDateForInput(day, locale, "date", inputFormat));
   };
 
   /* Only allow de-selecting if not required */
@@ -162,11 +202,15 @@ export const useDatepicker = (
     if (!required && selected) {
       updateDate(undefined);
       setInputValue("");
+      updateValidation({ isValidDate: false, isEmpty: true });
       return;
     }
     updateDate(day);
+    updateValidation();
     setMonth(day);
-    setInputValue(day ? formatDateForInput(day, locale, "date") : "");
+    setInputValue(
+      day ? formatDateForInput(day, locale, "date", inputFormat) : ""
+    );
   };
 
   // When changing the input field, save its value in state and check if the
@@ -176,22 +220,39 @@ export const useDatepicker = (
     setInputValue(e.target.value);
     const day = parseDate(e.target.value, today, locale, "date");
 
+    const isBefore =
+      fromDate && day && differenceInCalendarDays(fromDate, day) > 0;
+    const isAfter = toDate && day && differenceInCalendarDays(day, toDate) > 0;
+
     if (
       !isValidDate(day) ||
-      (disabled &&
-        ((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
+      (disableWeekends && isWeekend(day)) ||
+      (disabled && isMatch(day, disabled))
     ) {
       updateDate(undefined);
+      updateValidation({
+        isInvalid: isValidDate(day),
+        isWeekend: disableWeekends && isWeekend(day),
+        isDisabled: disabled && isMatch(day, disabled),
+        isValidDate: false,
+        isEmpty: !e.target.value,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
       return;
     }
 
-    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
-    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
     if (isBefore || isAfter) {
       updateDate(undefined);
+      updateValidation({
+        isValidDate: false,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
       return;
     }
     updateDate(day);
+    updateValidation();
     setMonth(day);
   };
 
@@ -217,13 +278,15 @@ export const useDatepicker = (
     month,
     onMonthChange: (month) => setMonth(month),
     onDayClick: handleDayClick,
-    selected: selectedDay,
+    selected: selectedDay ?? new Date("Invalid date"),
     locale: _locale,
     fromDate,
     toDate,
     today,
     open,
     onOpenToggle: () => setOpen((x) => !x),
+    disabled,
+    disableWeekends,
     ref: daypickerRef,
   };
 

package/src/date/hooks/useMonthPicker.tsx

@@ -22,6 +22,15 @@ export interface UseMonthPickerOptions
    * Callback for month-change
    */
   onMonthChange?: (date?: Date) => void;
+  /**
+   * Input-format
+   * @default "MMMM yyyy"
+   */
+  inputFormat?: string;
+  /**
+   * validation-callback
+   */
+  onValidate?: (val: MonthValidationT) => void;
 }
 
 interface UseMonthPickerValue {
@@ -48,6 +57,25 @@ interface UseMonthPickerValue {
   reset: () => void;
 }
 
+export type MonthValidationT = {
+  isDisabled: boolean;
+  isEmpty: boolean;
+  isInvalid: boolean;
+  isValidMonth: boolean;
+  isBefore: boolean;
+  isAfter: boolean;
+};
+
+const getValidationMessage = (val = {}): MonthValidationT => ({
+  isDisabled: false,
+  isEmpty: false,
+  isInvalid: false,
+  isBefore: false,
+  isAfter: false,
+  isValidMonth: true,
+  ...val,
+});
+
 export const useMonthpicker = (
   opt: UseMonthPickerOptions = {}
 ): UseMonthPickerValue => {
@@ -59,6 +87,8 @@ export const useMonthpicker = (
     disabled,
     required,
     onMonthChange,
+    inputFormat,
+    onValidate,
   } = opt;
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
@@ -75,7 +105,7 @@ export const useMonthpicker = (
   const [open, setOpen] = useState(false);
 
   const defaultInputValue = defaultSelected
-    ? formatDateForInput(defaultSelected, locale, "month")
+    ? formatDateForInput(defaultSelected, locale, "month", inputFormat)
     : "";
 
   const [inputValue, setInputValue] = useState(defaultInputValue);
@@ -85,6 +115,11 @@ export const useMonthpicker = (
     setSelectedMonth(date);
   };
 
+  const updateValidation = (val: Partial<MonthValidationT> = {}) => {
+    const msg = getValidationMessage(val);
+    onValidate?.(msg);
+  };
+
   const handleFocusIn = useCallback(
     (e) => {
       if (!e?.target || !e?.target?.nodeType) {
@@ -120,7 +155,9 @@ export const useMonthpicker = (
   const setSelected = (date: Date | undefined) => {
     updateMonth(date);
     setYear(date ?? today);
-    setInputValue(date ? formatDateForInput(date, locale, "month") : "");
+    setInputValue(
+      date ? formatDateForInput(date, locale, "month", inputFormat) : ""
+    );
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
@@ -128,13 +165,14 @@ export const useMonthpicker = (
     let day = parseDate(e.target.value, today, locale, "month");
     if (isValidDate(day)) {
       setYear(day);
-      setInputValue(formatDateForInput(day, locale, "month"));
+      setInputValue(formatDateForInput(day, locale, "month", inputFormat));
     }
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     let day = parseDate(e.target.value, today, locale, "month");
-    isValidDate(day) && setInputValue(formatDateForInput(day, locale, "month"));
+    isValidDate(day) &&
+      setInputValue(formatDateForInput(day, locale, "month", inputFormat));
   };
 
   /* Only allow de-selecting if not required */
@@ -146,11 +184,15 @@ export const useMonthpicker = (
 
     if (!required && !month) {
       updateMonth(undefined);
+      updateValidation({ isValidMonth: false, isEmpty: true });
       setInputValue("");
       return;
     }
     updateMonth(month);
-    setInputValue(month ? formatDateForInput(month, locale, "month") : "");
+    updateValidation();
+    setInputValue(
+      month ? formatDateForInput(month, locale, "month", inputFormat) : ""
+    );
   };
 
   // When changing the input field, save its value in state and check if the
@@ -160,32 +202,48 @@ export const useMonthpicker = (
     setInputValue(e.target.value);
     const month = parseDate(e.target.value, today, locale, "month");
 
-    if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
-      updateMonth(undefined);
-      return;
-    }
-
     const isBefore =
       fromDate &&
+      month &&
       (fromDate.getFullYear() > month.getFullYear() ||
         (fromDate.getFullYear() === month.getFullYear() &&
           fromDate.getMonth() > month.getMonth()));
 
     const isAfter =
       toDate &&
+      month &&
       (toDate.getFullYear() < month.getFullYear() ||
         (toDate.getFullYear() === month.getFullYear() &&
           toDate.getMonth() < month.getMonth()));
 
+    if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
+      updateMonth(undefined);
+      updateValidation({
+        isInvalid: isValidDate(month),
+        isDisabled: disabled && isMatch(month, disabled),
+        isValidMonth: false,
+        isEmpty: !e.target.value,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
+      return;
+    }
+
     if (
       isAfter ||
       isBefore ||
       (fromDate && toDate && !isMatch(month, [{ from: fromDate, to: toDate }]))
     ) {
       updateMonth(undefined);
+      updateValidation({
+        isValidMonth: false,
+        isBefore: isBefore ?? false,
+        isAfter: isAfter ?? false,
+      });
       return;
     }
     updateMonth(month);
+    updateValidation();
     setYear(month);
   };
 

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

@@ -0,0 +1,59 @@
+/* eslint-disable react/jsx-pascal-case */
+import { act, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { UNSAFE_DatePicker, UNSAFE_useRangeDatepicker } from "..";
+
+const RangeDemo = () => {
+  const { datepickerProps, fromInputProps, selectedRange, toInputProps } =
+    UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+    });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <UNSAFE_DatePicker {...datepickerProps}>
+        <UNSAFE_DatePicker.Input {...fromInputProps} label="Fra" />
+        <UNSAFE_DatePicker.Input {...toInputProps} label="Til" />
+      </UNSAFE_DatePicker>
+      <div title="res">{JSON.stringify(selectedRange)}</div>
+    </div>
+  );
+};
+
+describe("Writing in input sets correct values", () => {
+  it("useRangeDatepicker same date", async () => {
+    const utils = render(<RangeDemo />);
+
+    const fraInput = utils.getByRole("textbox", { name: "Fra" });
+    const tilInput = utils.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");
+    expect(res.innerHTML).toEqual(
+      JSON.stringify({
+        from: "2022-08-02T22:00:00.000Z",
+        to: "2022-08-02T22:00:00.000Z",
+      })
+    );
+  });
+
+  it("useRangeDatepicker before after to ", async () => {
+    const utils = render(<RangeDemo />);
+
+    const fraInput = utils.getByRole("textbox", { name: "Fra" });
+    const tilInput = utils.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");
+    expect(res.innerHTML).toEqual(
+      JSON.stringify({
+        from: "2022-08-02T22:00:00.000Z",
+      })
+    );
+  });
+});