@navikt/ds-react 7.33.2 → 7.33.4

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, useContext, useEffect, useState } from "react";
 import { Slot } from "../../slot/Slot";
-import { omit } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
 import { ownerDocument } from "../../util/owner";
@@ -63,34 +62,7 @@ interface DismissableLayerBaseProps
 
 type DismissableLayerProps = DismissableLayerBaseProps & AsChild;
 
-const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
-  ({ enabled = true, ...restProps }: DismissableLayerProps, forwardedRef) => {
-    if (!enabled) {
-      const Component = restProps.asChild ? Slot : "div";
-      return (
-        <Component
-          {...omit(restProps, [
-            "asChild",
-            "disableOutsidePointerEvents",
-            "onDismiss",
-            "onEscapeKeyDown",
-            "onFocusOutside",
-            "onInteractOutside",
-            "onPointerDownOutside",
-            "safeZone",
-          ])}
-          ref={forwardedRef}
-        />
-      );
-    }
-
-    return <DismissableLayerInternal {...restProps} ref={forwardedRef} />;
-  },
-);
-
-type DismissableLayerElement = React.ComponentRef<
-  typeof DismissableLayerInternal
->;
+type DismissableLayerElement = React.ComponentRef<typeof DismissableLayer>;
 
 const BranchedLayerContext =
   React.createContext<DismissableLayerElement | null>(null);
@@ -108,10 +80,7 @@ const DismissableLayerContext = React.createContext({
   layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),
 });
 
-const DismissableLayerInternal = forwardRef<
-  HTMLDivElement,
-  DismissableLayerProps
->(
+const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
   (
     {
       children,
@@ -123,6 +92,7 @@ const DismissableLayerInternal = forwardRef<
       onPointerDownOutside,
       safeZone,
       asChild,
+      enabled = true,
       ...restProps
     }: DismissableLayerProps,
     forwardedRef,
@@ -194,73 +164,85 @@ const DismissableLayerInternal = forwardRef<
       }
     }
 
-    const pointerDownOutside = usePointerDownOutside((event) => {
-      if (!shouldEnablePointerEvents) {
-        return;
-      }
-
-      /**
-       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
-       */
-      onPointerDownOutside?.(event);
-      onInteractOutside?.(event);
-
-      /**
-       * Add safeZone to prevent closing when interacting with trigger/anchor or its children.
-       */
-      safeZone && handleOutsideEvent(event);
+    const pointerDownOutside = usePointerDownOutside(
+      (event) => {
+        if (!shouldEnablePointerEvents) {
+          return;
+        }
 
-      if (!event.defaultPrevented && onDismiss) {
-        onDismiss();
-      }
-    }, ownerDoc);
+        /**
+         * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
+         */
+        onPointerDownOutside?.(event);
+        onInteractOutside?.(event);
 
-    const focusOutside = useFocusOutside((event) => {
-      /**
-       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
-       */
-      onFocusOutside?.(event);
-      onInteractOutside?.(event);
+        /**
+         * Add safeZone to prevent closing when interacting with trigger/anchor or its children.
+         */
+        safeZone && handleOutsideEvent(event);
 
-      /**
-       * Add safeZone to prevent closing when interacting with trigger/anchor or its children.
-       */
-      safeZone && handleOutsideEvent(event);
+        if (!event.defaultPrevented && onDismiss) {
+          onDismiss();
+        }
+      },
+      ownerDoc,
+      enabled,
+    );
 
-      if (!event.defaultPrevented && onDismiss) {
-        onDismiss();
-      }
-    }, ownerDoc);
+    const focusOutside = useFocusOutside(
+      (event) => {
+        /**
+         * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
+         */
+        onFocusOutside?.(event);
+        onInteractOutside?.(event);
+
+        /**
+         * Add safeZone to prevent closing when interacting with trigger/anchor or its children.
+         */
+        safeZone && handleOutsideEvent(event);
+
+        if (!event.defaultPrevented && onDismiss) {
+          onDismiss();
+        }
+      },
+      ownerDoc,
+      enabled,
+    );
 
-    useEscapeKeydown((event) => {
-      /**
-       * The deepest nested element will always be last in the descendants list.
-       * This allows us to only close the highest layer when pressing escape.
-       */
-      const isHighestLayer = index === context.layers.size - 1;
-      if (!isHighestLayer) {
-        return;
-      }
+    useEscapeKeydown(
+      (event) => {
+        /**
+         * The deepest nested element will always be last in the descendants list.
+         * This allows us to only close the highest layer when pressing escape.
+         */
+        const isHighestLayer = index === context.layers.size - 1;
+        if (!isHighestLayer) {
+          return;
+        }
 
-      /**
-       * We call this before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
-       */
-      onEscapeKeyDown?.(event);
-      /**
-       * `onEscapeKeyDown` is able to preventDefault the event, thus stopping call for `onDismiss`.
-       * We want to `preventDefault` the escape-event to avoid sideeffect from other elements on screen
-       */
-      if (!event.defaultPrevented && onDismiss) {
-        event.preventDefault();
-        onDismiss();
-      }
-    }, ownerDoc);
+        /**
+         * We call this before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
+         */
+        onEscapeKeyDown?.(event);
+        /**
+         * `onEscapeKeyDown` is able to preventDefault the event, thus stopping call for `onDismiss`.
+         * We want to `preventDefault` the escape-event to avoid sideeffect from other elements on screen
+         */
+        if (!event.defaultPrevented && onDismiss) {
+          event.preventDefault();
+          onDismiss();
+        }
+      },
+      ownerDoc,
+      enabled,
+    );
 
     /**
      * Handles registering `layers` and `layersWithOutsidePointerEventsDisabled`.
      */
     useEffect(() => {
-      if (!node) {
+      if (!node || !enabled) {
         return;
       }
 
@@ -282,25 +264,32 @@ const DismissableLayerInternal = forwardRef<
           ownerDoc.body.style.pointerEvents = originalBodyPointerEvents;
         }
       };
-    }, [node, disableOutsidePointerEvents, context, ownerDoc]);
+    }, [node, enabled, disableOutsidePointerEvents, context, ownerDoc]);
 
     /**
      * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
      * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
      * and add it to the end again so the layering order wouldn't be creation order.
      * We only want them to be removed from context stacks when unmounted.
+     *
+     * We depend on `enabled` to clean up when the layer is disabled.
      */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to clean up after enabled changes.
     useEffect(() => {
       return () => {
         if (!node) {
           return;
         }
-
-        context.layers.delete(node);
-        context.layersWithOutsidePointerEventsDisabled.delete(node);
-        dispatchUpdate();
+        if (
+          context.layers.has(node) ||
+          context.layersWithOutsidePointerEventsDisabled.has(node)
+        ) {
+          context.layers.delete(node);
+          context.layersWithOutsidePointerEventsDisabled.delete(node);
+          dispatchUpdate();
+        }
       };
-    }, [node, context]);
+    }, [node, context, enabled]);
 
     const parentBranchedLayer = useContext(BranchedLayerContext);
 
@@ -309,7 +298,12 @@ const DismissableLayerInternal = forwardRef<
      * When this layer has a parent, we register it as a child of the parent.
      */
     useEffect(() => {
-      if (!node || !parentBranchedLayer || node === parentBranchedLayer) {
+      if (
+        !node ||
+        !enabled ||
+        !parentBranchedLayer ||
+        node === parentBranchedLayer
+      ) {
         return;
       }
 
@@ -332,7 +326,7 @@ const DismissableLayerInternal = forwardRef<
 
         dispatchUpdate();
       };
-    }, [node, parentBranchedLayer, context]);
+    }, [node, enabled, parentBranchedLayer, context]);
 
     /**
      * Synchronizes layer state across all mounted `DismissableLayer` instances.

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)

package/src/util/TextareaAutoSize.tsx

@@ -219,8 +219,12 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
     };
 
     const mainStyle: React.CSSProperties = {
-      "--__ac-textarea-height": state.outerHeightStyle + "px",
-      "--__axc-textarea-height": state.outerHeightStyle + "px",
+      "--__ac-textarea-height": state.outerHeightStyle
+        ? state.outerHeightStyle + "px"
+        : "auto",
+      "--__axc-textarea-height": state.outerHeightStyle
+        ? state.outerHeightStyle + "px"
+        : "auto",
       // Need a large enough difference to allow scrolling.
       // This prevents infinite rendering loop.
       overflow: