@navikt/ds-react 2.8.9 → 2.8.11

package/src/date/hooks/useMonthPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DateInputProps } from "../DateInput";
 import { MonthPickerProps } from "../monthpicker/MonthPicker";
 import {
@@ -8,6 +8,8 @@ import {
   isValidDate,
   parseDate,
 } from "../utils";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";
 
 export interface UseMonthPickerOptions
   extends Pick<
@@ -118,7 +120,7 @@ export const useMonthpicker = (
   const locale = getLocaleFromString(_locale);
 
   const inputRef = useRef<HTMLInputElement>(null);
-  const monthpickerRef = useRef<HTMLDivElement>(null);
+  const [monthpickerRef, setMonthpickerRef] = useState<HTMLDivElement>();
 
   // Initialize states
   const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
@@ -131,44 +133,21 @@ export const useMonthpicker = (
 
   const [inputValue, setInputValue] = useState(defaultInputValue);
 
+  useOutsideClickHandler(open, setOpen, [
+    monthpickerRef,
+    inputRef.current,
+    inputRef.current?.nextSibling,
+  ]);
+
+  useEscape(open, setOpen, inputRef);
+
   const updateMonth = (date?: Date) => {
     onMonthChange?.(date);
     setSelectedMonth(date);
   };
 
-  const updateValidation = (val: Partial<MonthValidationT> = {}) => {
-    const msg = getValidationMessage(val);
-    onValidate?.(msg);
-  };
-
-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      ![
-        monthpickerRef.current,
-        inputRef.current,
-        inputRef.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
+  const updateValidation = (val: Partial<MonthValidationT> = {}) =>
+    onValidate?.(getValidationMessage(val));
 
   const reset = () => {
     updateMonth(defaultSelected);
@@ -294,24 +273,6 @@ export const useMonthpicker = (
     setYear(month);
   };
 
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    inputRef.current && inputRef.current.focus();
-  }, []);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
   const monthpickerProps = {
     year,
     onYearChange: (y?: Date) => setYear(y ?? today),
@@ -323,7 +284,7 @@ export const useMonthpicker = (
     open,
     onOpenToggle: () => setOpen((x) => !x),
     disabled,
-    ref: monthpickerRef,
+    ref: setMonthpickerRef,
   };
 
   const inputProps = {

package/src/date/hooks/useOutsideClickHandler.tsx

@@ -0,0 +1,34 @@
+import React, { useCallback, useEffect } from "react";
+
+export const useOutsideClickHandler = (
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  refs: Array<any>
+) => {
+  const handleFocusIn = useCallback(
+    (e) => {
+      const composed = e.composedPath?.()?.[0];
+      if (!e?.target || !e?.target?.nodeType || !composed) {
+        return;
+      }
+      if (
+        !refs.some(
+          (element) =>
+            element?.contains(e.target) || element?.contains(composed)
+        )
+      ) {
+        open && setOpen(false);
+      }
+    },
+    [open, refs, setOpen]
+  );
+
+  useEffect(() => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("pointerdown", handleFocusIn);
+    return () => {
+      window?.removeEventListener?.("focusin", handleFocusIn);
+      window?.removeEventListener?.("pointerdown", handleFocusIn);
+    };
+  }, [handleFocusIn]);
+};

package/src/date/hooks/useRangeDatepicker.tsx

@@ -1,7 +1,7 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
 import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -12,6 +12,8 @@ import {
   parseDate,
 } from "../utils";
 import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";
 
 export type RangeValidationT = {
   from: DateValidationT;
@@ -211,7 +213,7 @@ export const useRangeDatepicker = (
 
   const inputRefTo = useRef<HTMLInputElement>(null);
   const inputRefFrom = useRef<HTMLInputElement>(null);
-  const datePickerRef = useRef<HTMLDivElement | null>(null);
+  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 
@@ -241,6 +243,20 @@ export const useRangeDatepicker = (
 
   const [open, setOpen] = useState(false);
 
+  useOutsideClickHandler(open, setOpen, [
+    daypickerRef,
+    inputRefTo.current,
+    inputRefFrom.current,
+    inputRefTo.current?.nextSibling,
+    inputRefFrom.current?.nextSibling,
+  ]);
+
+  useEscape(
+    open,
+    setOpen,
+    selectedRange?.from && !selectedRange?.to ? inputRefTo : inputRefFrom
+  );
+
   const updateRange = (range?: DateRange) => {
     onRangeChange?.(range);
     setSelectedRange(range);
@@ -255,37 +271,6 @@ export const useRangeDatepicker = (
     onValidate?.(msg);
   };
 
-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      ![
-        datePickerRef.current,
-        inputRefTo.current,
-        inputRefFrom.current,
-        inputRefTo.current?.nextSibling,
-        inputRefFrom.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
-
   const reset = () => {
     updateRange(defaultSelected ?? { from: undefined, to: undefined });
     setMonth(defaultSelected ? defaultSelected?.from : defaultMonth ?? today);
@@ -527,28 +512,6 @@ export const useRangeDatepicker = (
       : toChange(e.target.value, day, isBefore, isAfter);
   };
 
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    if (selectedRange?.from && !selectedRange?.to) {
-      inputRefTo?.current?.focus();
-    } else {
-      inputRefFrom?.current?.focus();
-    }
-  }, [selectedRange]);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
   const datepickerProps = {
     month: month,
     onMonthChange: (month) => setMonth(month),
@@ -563,7 +526,7 @@ export const useRangeDatepicker = (
     onOpenToggle: () => setOpen((x) => !x),
     disabled,
     disableWeekends,
-    ref: datePickerRef,
+    ref: setDaypickerRef,
   };
 
   const fromInputProps = {

package/src/date/monthpicker/MonthButton.tsx

@@ -6,7 +6,7 @@ import isSameMonth from "date-fns/isSameMonth";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { dateIsInCurrentMonth, isMatch, nextEnabled } from "../utils";
 
 interface MonthType {

package/src/date/monthpicker/MonthCaption.tsx

@@ -6,7 +6,7 @@ import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Button, Select } from "../..";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { hasNextYear, labelNextYear, labelPrevYear } from "../utils";
 
 export const MonthCaption = () => {

package/src/date/monthpicker/MonthPicker.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
 import { Popover, useId } from "../..";
 import { DateInputType, MonthPickerInput } from "../DateInput";
-import { DateContext, SharedMonthProvider } from "../hooks";
+import { DateContext, SharedMonthProvider } from "../context";
 import { getLocaleFromString, Matcher } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone, {

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { SharedMonthProvider } from "../hooks";
+import { SharedMonthProvider } from "../context";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
 import { MonthPickerProps } from "./MonthPicker";

package/src/date/monthpicker/MonthSelector.tsx

@@ -4,7 +4,7 @@ import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React, { useState } from "react";
 import { BodyShort } from "../..";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { isMatch } from "../utils";
 import MonthButton from "./MonthButton";
 

package/esm/date/datepicker/Head.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Head.js","sourceRoot":"","sources":["../../../src/date/datepicker/Head.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzD,6BAA6B;AAC7B,MAAM,UAAU,IAAI;;IAClB,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;IAC1D,MAAM,gBAAgB,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,mCAAI,OAAO,CAAC;IACxD,OAAO,CACL,+BAAO,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI;QACnD,oBAAC,gBAAgB,OAAG,CACd,CACT,CAAC;AACJ,CAAC"}

package/esm/date/hooks/useDateInputContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDateInputContext.js","sourceRoot":"","sources":["../../../src/date/hooks/useDateInputContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiBlD,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B;IAChE,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAC;KACnE;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/esm/date/hooks/useSharedMonthContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSharedMonthContext.js","sourceRoot":"","sources":["../../../src/date/hooks/useSharedMonthContext.tsx"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAW,MAAM,UAAU,CAAC;AAWnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAyB;IACtE,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,IAAI,IAAI,EAAE;IAChB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI;IAClB,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAE1E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EAAE,KAAK,EACX,YAAY,GACb,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAO,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAG,CAAC,CAAC,CAAC,eAAe,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAE9E,IACE,OAAO,CAAC,QAAQ;QAChB,OAAO,CAAC,MAAM;QACd,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,MAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA,EACpC;QACA,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;KAClE;IAED,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI;YACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACZ,MAAM,CAAC,CAAC,CAAC,CAAC;gBACV,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,CAAC;YACpB,CAAC;YACD,WAAW;YACX,QAAQ;YACR,QAAQ;YACR,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE,CACrB,CAAC;gBACC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;gBACnE,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC;SAC1B,IAEA,QAAQ,CACmB,CAC/B,CAAC;AACJ,CAAC,CAAC"}