@navikt/ds-react 6.6.1 → 6.7.1

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -1,17 +1,12 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useState } from "react";
+import { createContext } from "../../../util/create-context";
 import { usePrevious } from "../../../util/hooks";
-import { useInputContext } from "../Input/inputContext";
+import { useInputContext } from "../Input/Input.context";
 import { isInList } from "../combobox-utils";
-import { useCustomOptionsContext } from "../customOptionsContext";
+import { useComboboxCustomOptions } from "../customOptionsContext";
 import { ComboboxOption, ComboboxProps, MaxSelected } from "../types";
 
-type SelectedOptionsContextType = {
+type SelectedOptionsContextValue = {
   addSelectedOption: (option: ComboboxOption) => void;
   isMultiSelect?: boolean;
   removeSelectedOption: (option: ComboboxOption) => void;
@@ -25,11 +20,10 @@ type SelectedOptionsContextType = {
   ) => void;
 };
 
-const SelectedOptionsContext = createContext<SelectedOptionsContextType>(
-  {} as SelectedOptionsContextType,
-);
+const [SelectedOptionsContextProvider, useSelectedOptionsContext] =
+  createContext<SelectedOptionsContextValue>();
 
-export const SelectedOptionsProvider = ({
+const SelectedOptionsProvider = ({
   children,
   value,
 }: {
@@ -45,7 +39,7 @@ export const SelectedOptionsProvider = ({
     removeCustomOption,
     addCustomOption,
     setCustomOptions,
-  } = useCustomOptionsContext();
+  } = useComboboxCustomOptions();
   const {
     allowNewValues,
     isMultiSelect,
@@ -149,18 +143,10 @@ export const SelectedOptionsProvider = ({
   };
 
   return (
-    <SelectedOptionsContext.Provider value={selectedOptionsState}>
+    <SelectedOptionsContextProvider {...selectedOptionsState}>
       {children}
-    </SelectedOptionsContext.Provider>
+    </SelectedOptionsContextProvider>
   );
 };
 
-export const useSelectedOptionsContext = () => {
-  const context = useContext(SelectedOptionsContext);
-  if (!context) {
-    throw new Error(
-      "useSelectedOptionsContext must be used within a SelectedOptionsProvider",
-    );
-  }
-  return context;
-};
+export { SelectedOptionsProvider, useSelectedOptionsContext };

package/src/form/combobox/{combobox-utils.test.ts → __tests__/combobox-utils.test.ts}

@@ -2,7 +2,7 @@ import {
   isInList,
   mapToComboboxOptionArray,
   toComboboxOption,
-} from "./combobox-utils";
+} from "../combobox-utils";
 
 const list = [
   { label: "Hjelpemidler", value: "HJE" },

package/src/form/combobox/{combobox.test.tsx → __tests__/combobox.test.tsx}

@@ -1,10 +1,9 @@
 /* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
-import { act } from "react-dom/test-utils";
 import { describe, expect, test, vi } from "vitest";
-import { UNSAFE_Combobox } from "./index";
+import { UNSAFE_Combobox } from "../index";
 
 const options = [
   "banana",

package/src/form/combobox/customOptionsContext.tsx

@@ -1,19 +1,23 @@
-import React, { createContext, useCallback, useContext, useState } from "react";
-import { useInputContext } from "./Input/inputContext";
+import React, { useCallback, useState } from "react";
+import { createContext } from "../../util/create-context";
+import { useInputContext } from "./Input/Input.context";
 import { ComboboxOption } from "./types";
 
-type CustomOptionsContextType = {
+type CustomOptionsContextValue = {
   customOptions: ComboboxOption[];
   removeCustomOption: (option: ComboboxOption) => void;
   addCustomOption: (option: ComboboxOption) => void;
   setCustomOptions: React.Dispatch<React.SetStateAction<ComboboxOption[]>>;
 };
 
-const CustomOptionsContext = createContext<CustomOptionsContextType>(
-  {} as CustomOptionsContextType,
-);
+const [ComboboxCustomOptionsProvider, useComboboxCustomOptions] =
+  createContext<CustomOptionsContextValue>({
+    name: "ComboboxCustomOptions",
+    errorMessage:
+      "useComboboxCustomOptions must be used within a ComboboxCustomOptionsProvider",
+  });
 
-export const CustomOptionsProvider = ({
+const CustomOptionsProvider = ({
   children,
   value,
 }: {
@@ -54,18 +58,10 @@ export const CustomOptionsProvider = ({
   };
 
   return (
-    <CustomOptionsContext.Provider value={customOptionsState}>
+    <ComboboxCustomOptionsProvider {...customOptionsState}>
       {children}
-    </CustomOptionsContext.Provider>
+    </ComboboxCustomOptionsProvider>
   );
 };
 
-export const useCustomOptionsContext = () => {
-  const context = useContext(CustomOptionsContext);
-  if (!context) {
-    throw new Error(
-      "useCustomOptionsContext must be used within a CustomOptionsProvider",
-    );
-  }
-  return context;
-};
+export { CustomOptionsProvider, useComboboxCustomOptions };

package/src/form/combobox/types.ts

@@ -100,7 +100,9 @@ export interface ComboboxProps
    *
    * @param event
    */
-  onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
+  onClear?: (
+    event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent,
+  ) => void;
   /**
    * Callback function triggered whenever an option is selected or de-selected.
    *

package/src/index.ts

@@ -59,6 +59,7 @@ export { Modal, type ModalProps } from "./modal";
 export { Pagination, type PaginationProps } from "./pagination";
 export { Popover, type PopoverProps } from "./popover";
 export { Portal, type PortalProps } from "./portal";
+export { ProgressBar, type ProgressBarProps } from "./progress-bar";
 export { Provider, type ProviderProps } from "./provider";
 export { ReadMore, type ReadMoreProps } from "./read-more";
 export { Skeleton, type SkeletonProps } from "./skeleton";

package/src/overlay/README.md

@@ -0,0 +1,5 @@
+# DismissableLayer API
+
+`DismissableLayer`-API provides a robust handler for layers that can be dismissed by interacting outside of it.
+
+One of the benefits is its ability to handle nested elements, relevant when creating nested dropdowns and similar solutions.

package/src/overlay/dismiss/DismissableLayer.tsx

@@ -0,0 +1,368 @@
+import React, {
+  CSSProperties,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Slot } from "../../util/Slot";
+import { useMergeRefs } from "../../util/hooks";
+import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
+import { AsChild } from "../../util/types/AsChild";
+import {
+  CustomFocusEvent,
+  CustomPointerDownEvent,
+} from "./util/dispatchCustomEvent";
+import { useEscapeKeydown } from "./util/useEscapeKeydown";
+import { useFocusOutside } from "./util/useFocusOutside";
+import { usePointerDownOutside } from "./util/usePointerDownOutside";
+
+interface DismissableLayerBaseProps {
+  /**
+   * When `true`, hover/focus/click interactions will be disabled on elements outside
+   * the `DismissableLayer`. Users will need to click twice on outside elements to
+   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.
+   */
+  disableOutsidePointerEvents?: boolean;
+  /**
+   * Event handler called when the escape key is down.
+   * Can be prevented.
+   */
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  /**
+   * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
+   * Can be prevented.
+   */
+  onPointerDownOutside?: (event: CustomPointerDownEvent) => void;
+  /**
+   * Event handler called when the focus moves outside of the `DismissableLayer`.
+   * Can be prevented.
+   */
+  onFocusOutside?: (event: CustomFocusEvent) => void;
+  /**
+   * Event handler called when an interaction happens outside the `DismissableLayer`.
+   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
+   * Can be prevented.
+   */
+  onInteractOutside?: (
+    event: CustomPointerDownEvent | CustomFocusEvent,
+  ) => void;
+  /**
+   * Handler called when the `DismissableLayer` should be dismissed
+   */
+  onDismiss?: () => void;
+  /**
+   * Stops `onDismiss` from beeing called when interacting with the `safeZone` elements.
+   * `safeZone.dismissable` is only needed when its element does not have a `tabIndex` since it will not receive focus-events.
+   */
+  safeZone?: {
+    anchor?: Element | null;
+    dismissable?: Element | null;
+  };
+
+  style?: CSSProperties;
+  /**
+   * Disables layer from beeing counted in context for nested `DismissableLayer`.
+   */
+  enabled?: boolean;
+}
+
+type DismissableLayerProps = DismissableLayerBaseProps & AsChild;
+
+export const [
+  DismissableDescendantsProvider,
+  useDismissableDescendantsContext,
+  useDismissableDescendants,
+  useDismissableDescendant,
+] = createDescendantContext<
+  HTMLDivElement,
+  { disableOutsidePointerEvents: boolean }
+>();
+
+let originalBodyPointerEvents: string;
+
+const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
+  (props: DismissableLayerProps, ref) => {
+    const context = useDismissableDescendantsContext(false);
+
+    /**
+     * To correctly handle nested DismissableLayer,
+     * we only initialize the `Descendants`-API for the root layer to aboid resetting context
+     */
+    return context ? (
+      <DismissableLayerNode ref={ref} {...props} />
+    ) : (
+      <DismissableRoot>
+        <DismissableLayerNode ref={ref} {...props} />
+      </DismissableRoot>
+    );
+  },
+);
+
+/**
+ * DismissableRoot
+ *
+ * Used to initialize the `Descendants`-API at the root layer.
+ * All subsequent layers will use the same context.
+ */
+const DismissableRoot = ({ children }: { children: React.ReactNode }) => {
+  const descendants = useDismissableDescendants();
+
+  return (
+    <DismissableDescendantsProvider value={descendants}>
+      {children}
+    </DismissableDescendantsProvider>
+  );
+};
+
+const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
+  (
+    {
+      children,
+      asChild,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss,
+      safeZone,
+      disableOutsidePointerEvents = false,
+      enabled = true,
+      ...rest
+    }: DismissableLayerProps,
+    ref,
+  ) => {
+    const { register, index, descendants } = useDismissableDescendant({
+      disableOutsidePointerEvents,
+      disabled: !enabled,
+    });
+
+    /**
+     * `node` will be set to the ref of the component or nested component
+     * Ex: If
+     * ```
+     * <DismissableLayer asChild>
+     *   <Popover />
+     * </DismissableLayer>
+     * ```
+     * `node` will in this case be the Popover-element.
+     * We use State her and not ref since we want to trigger a rerender when the node changes.
+     */
+    const [node, setNode] = useState<HTMLDivElement | null>(null);
+
+    const mergedRefs = useMergeRefs(setNode, register, ref);
+
+    /**
+     * In some cases the `node.ownerDocument` can differ from global document.
+     * This can happend when portaling elements or using web-components
+     */
+    const ownerDocument = node?.ownerDocument ?? globalThis?.document;
+
+    const hasInteractedOutsideRef = useRef(false);
+    const hasPointerDownOutsideRef = useRef(false);
+
+    const pointerEnabled = useMemo(() => {
+      let lastIndex = -1;
+
+      const descendantNodes = descendants.enabledValues();
+      descendantNodes.forEach((obj, _index) => {
+        if (obj.disableOutsidePointerEvents) {
+          lastIndex = _index;
+        }
+      });
+
+      return {
+        /**
+         * Makes sure we stop events at the highest layer with pointer events disabled.
+         * If not checked, we risk closing every layer when clicking outside the layer.
+         */
+        isPointerEventsEnabled: index >= lastIndex,
+        /**
+         * If we find a node with `disableOutsidePointerEvents` we want to disable pointer events on the body.
+         */
+        isBodyPointerEventsDisabled: lastIndex > -1,
+      };
+    }, [descendants, index]);
+
+    /**
+     * We want to prevent the Layer from closing when the trigger, anchor element, or its child elements are interacted with.
+     *
+     * To achieve this, we check if the event target is the trigger, anchor or a child. If it is, we prevent default event behavior.
+     *
+     * The `pointerDownOutside` and `focusOutside` handlers already check if the event target is within the DismissableLayer (`node`).
+     * However, since we don't add a `tabIndex` to the Popover/Tooltip, the `focusOutside` handler doesn't correctly handle focus events.
+     * Therefore, we also need to check that neither the trigger (`anchor`) nor the DismissableLayer (`dismissable`) are the event targets.
+     */
+    function handleOutsideEvent(
+      event: CustomFocusEvent | CustomPointerDownEvent,
+    ) {
+      if ((!safeZone?.anchor && !safeZone?.dismissable) || !enabled) {
+        return;
+      }
+
+      if (!event.defaultPrevented) {
+        hasInteractedOutsideRef.current = true;
+        if (event.detail.originalEvent.type === "pointerdown") {
+          hasPointerDownOutsideRef.current = true;
+        }
+      }
+
+      const target = event.target as HTMLElement;
+
+      /**
+       * pointerdown-events works as expected, but focus-events does not.
+       * For focus-event we need to also check `safeZone.dismissable` (the Popover/Tooltip itself) since it does not have a tabIndex.
+       */
+      if (event.detail.originalEvent.type === "pointerdown") {
+        const targetIsTrigger =
+          safeZone?.anchor?.contains(target) || target === safeZone?.anchor;
+        targetIsTrigger && event.preventDefault();
+      } else {
+        const targetIsNotTrigger =
+          target instanceof HTMLElement &&
+          ![safeZone?.anchor, safeZone?.dismissable].some(
+            (element) => element?.contains(target as Node),
+          ) &&
+          !target.contains(safeZone?.dismissable ?? null);
+
+        !targetIsNotTrigger && event.preventDefault();
+      }
+
+      /**
+       * In Safari, if the trigger element is inside a container with tabIndex={0}, a click on the trigger
+       * will first fire a 'pointerdownoutside' event on the trigger itself. However, it will then fire a
+       * 'focusoutside' event on the container.
+       *
+       * To handle this, we ignore any 'focusoutside' events if a 'pointerdownoutside' event has already occurred.
+       * 'pointerdownoutside' event is sufficient to indicate interaction outside the DismissableLayer.
+       */
+      if (
+        event.detail.originalEvent.type === "focusin" &&
+        hasPointerDownOutsideRef.current
+      ) {
+        event.preventDefault();
+      }
+      hasPointerDownOutsideRef.current = false;
+      hasInteractedOutsideRef.current = false;
+    }
+
+    const pointerDownOutside = usePointerDownOutside((event) => {
+      if (!pointerEnabled.isPointerEventsEnabled || !enabled) {
+        return;
+      }
+
+      /**
+       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
+       */
+      onPointerDownOutside?.(event);
+      onInteractOutside?.(event);
+
+      /**
+       * Add safeZone to prevent closing when interacting with trigger/anchor or its children.
+       */
+      safeZone && handleOutsideEvent(event);
+
+      /**
+       * Both `onPointerDownOutside` and `onInteractOutside` are able to preventDefault the event, thus stopping call for `onDismiss`.
+       */
+      if (!event.defaultPrevented && onDismiss) {
+        onDismiss();
+      }
+    }, ownerDocument);
+
+    const focusOutside = useFocusOutside((event) => {
+      if (!enabled) {
+        return;
+      }
+
+      /**
+       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
+       */
+      onFocusOutside?.(event);
+      onInteractOutside?.(event);
+
+      /**
+       * Add safeZone to prevent closing when interacting with trigger/anchor or its children.
+       */
+      safeZone && handleOutsideEvent(event);
+
+      /**
+       * Both `onFocusOutside` and `onInteractOutside` are able to preventDefault the event, thus stopping call for `onDismiss`.
+       */
+      if (!event.defaultPrevented && onDismiss) {
+        onDismiss();
+      }
+    }, ownerDocument);
+
+    useEscapeKeydown((event) => {
+      if (!enabled) {
+        return;
+      }
+      /**
+       * The deepest nested element will always be last in the descendants list.
+       * This allows us to only close the highest layer when pressing escape.
+       *
+       * In some cases a layer might still exist, but be disabled. We want to ignore these layers.
+       */
+      const isHighestLayer = index === descendants.enabledCount() - 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();
+      }
+    }, ownerDocument);
+
+    /**
+     * If `disableOutsidePointerEvents` is true,
+     * we want to disable pointer events on the body when the first layer is opened.
+     */
+    useEffect(() => {
+      if (!node || !disableOutsidePointerEvents || index !== 0 || !enabled) {
+        return;
+      }
+
+      originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+      ownerDocument.body.style.pointerEvents = "none";
+
+      return () => {
+        ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+      };
+    }, [node, ownerDocument, disableOutsidePointerEvents, index, enabled]);
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={mergedRefs}
+        {...rest}
+        onFocusCapture={focusOutside.onFocusCapture}
+        onBlurCapture={focusOutside.onBlurCapture}
+        onPointerDownCapture={pointerDownOutside.onPointerDownCapture}
+        style={{
+          pointerEvents: pointerEnabled.isBodyPointerEventsDisabled
+            ? pointerEnabled.isPointerEventsEnabled
+              ? "auto"
+              : "none"
+            : undefined,
+          ...rest.style,
+        }}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+export { DismissableLayer, type DismissableLayerProps };

package/src/overlay/dismiss/util/dispatchCustomEvent.ts

@@ -0,0 +1,77 @@
+import ReactDOM from "react-dom";
+
+type CustomFocusEvent = CustomEvent<{ originalEvent: FocusEvent }>;
+type CustomPointerDownEvent = CustomEvent<{
+  originalEvent: PointerEvent;
+}>;
+
+export { CustomFocusEvent, CustomPointerDownEvent };
+
+export const CUSTOM_EVENTS = {
+  FOCUS_OUTSIDE: "AKSEL_FOCUS_OUTSIDE",
+  POINTER_DOWN_OUTSIDE: "AKSEL_POINTER_DOWN_OUTSIDE",
+};
+
+/**
+ * Use of `discrete` flushes custom event dispatch. This is to mimic the behavior React has for `discrete` events.
+ * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L318
+ *
+ * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
+ *
+ * Internally, React prioritises events in the following order:
+ *  - discrete
+ *  - continuous
+ *  - default
+ *
+ * `discrete` is an  important distinction as updates within these events are applied immediately.
+ * React however, is not able to infer the priority of custom event types due to how they are detected internally.
+ * Because of this, it's possible for updates from custom events to be unexpectedly batched when
+ * dispatched by another `discrete` event.
+ *
+ * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
+ * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
+ * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
+ * For example:
+ *
+ * dispatching a known click 👎
+ * target.dispatchEvent(new Event(‘click’))
+ *
+ * dispatching a custom type within a non-discrete event 👎
+ * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
+ *
+ * dispatching a custom type within a `discrete` event 👍
+ * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
+ *
+ * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
+ * this utility with them. This is because it's possible for those handlers to be called implicitly during render
+ * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
+ */
+export function dispatchCustomEvent<
+  E extends CustomEvent,
+  OriginalEvent extends Event,
+>(
+  name: string,
+  handler: ((event: E) => void) | undefined,
+  detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D>
+    ? D
+    : never),
+  { discrete }: { discrete: boolean } = { discrete: false },
+) {
+  if (!handler) {
+    return;
+  }
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, {
+    bubbles: false,
+    cancelable: true,
+    detail,
+  });
+
+  target.addEventListener(name, handler as EventListener, { once: true });
+
+  if (discrete && target) {
+    ReactDOM.flushSync(() => target.dispatchEvent(event));
+  } else {
+    target.dispatchEvent(event);
+  }
+}

package/src/overlay/dismiss/util/useEscapeKeydown.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useCallbackRef } from "../../../util/hooks";
+
+export function useEscapeKeydown(
+  callback?: (event: KeyboardEvent) => void,
+  ownerDocument: Document = globalThis?.document,
+) {
+  const onEscapeKeyDown = useCallbackRef(callback);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onEscapeKeyDown(event);
+      }
+    };
+
+    ownerDocument.addEventListener("keydown", handleKeyDown, true);
+    return () =>
+      ownerDocument.removeEventListener("keydown", handleKeyDown, true);
+  }, [onEscapeKeyDown, ownerDocument]);
+}