@navikt/ds-react 7.33.2 → 7.33.3

package/src/overlays/dismissablelayer/util/useEscapeKeydown.ts

@@ -4,10 +4,15 @@ import { useCallbackRef } from "../../../util/hooks";
 export function useEscapeKeydown(
   callback?: (event: KeyboardEvent) => void,
   ownerDocument: Document = globalThis?.document,
+  enabled: boolean = true,
 ) {
   const onEscapeKeyDown = useCallbackRef(callback);
 
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -15,7 +20,9 @@ export function useEscapeKeydown(
     };
 
     ownerDocument.addEventListener("keydown", handleKeyDown, true);
-    return () =>
+
+    return () => {
       ownerDocument.removeEventListener("keydown", handleKeyDown, true);
-  }, [onEscapeKeyDown, ownerDocument]);
+    };
+  }, [onEscapeKeyDown, ownerDocument, enabled]);
 }

package/src/overlays/dismissablelayer/util/useFocusOutside.ts

@@ -12,11 +12,16 @@ import {
 export function useFocusOutside(
   callback?: (event: CustomFocusEvent) => void,
   ownerDocument: Document = globalThis?.document,
+  enabled: boolean = true,
 ) {
   const handleFocusOutside = useCallbackRef(callback) as EventListener;
   const isFocusInsideReactTreeRef = useRef(false);
 
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
     const handleFocus = (event: FocusEvent) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -38,8 +43,10 @@ export function useFocusOutside(
       }
     };
     ownerDocument.addEventListener("focusin", handleFocus);
-    return () => ownerDocument.removeEventListener("focusin", handleFocus);
-  }, [ownerDocument, handleFocusOutside]);
+    return () => {
+      ownerDocument.removeEventListener("focusin", handleFocus);
+    };
+  }, [ownerDocument, handleFocusOutside, enabled]);
 
   /**
    * By directly setting isFocusInsideReactTreeRef on focus-events at the root of the "dismissable" element,

package/src/overlays/dismissablelayer/util/usePointerDownOutside.ts

@@ -16,6 +16,7 @@ import {
 export function usePointerDownOutside(
   callback?: (event: CustomPointerDownEvent) => void,
   ownerDocument: Document = globalThis?.document,
+  enabled: boolean = true,
 ) {
   const handlePointerDownOutside = useCallbackRef(callback) as EventListener;
   const isPointerInsideReactTreeRef = useRef(false);
@@ -23,6 +24,10 @@ export function usePointerDownOutside(
   const timeout = useTimeout();
 
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
     const handlePointerDown = (event: PointerEvent) => {
       /**
        * The `DismisableLayer`-API is based on the ability to stop events from propagating and in the end calling `onDismiss`
@@ -87,7 +92,7 @@ export function usePointerDownOutside(
       ownerDocument.removeEventListener("pointerdown", handlePointerDown);
       ownerDocument.removeEventListener("click", handleClickRef.current);
     };
-  }, [ownerDocument, handlePointerDownOutside, timeout]);
+  }, [ownerDocument, handlePointerDownOutside, timeout, enabled]);
 
   return {
     // ensures we check React component tree (not just DOM tree)