@navikt/ds-react 6.6.1 → 6.7.1

package/src/popover/Popover.tsx

@@ -4,22 +4,14 @@ import {
   offset as flOffset,
   flip,
   shift,
-  useClick,
-  useDismiss,
   useFloating,
-  useInteractions,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, {
-  HTMLAttributes,
-  forwardRef,
-  useCallback,
-  useContext,
-  useRef,
-} from "react";
+import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
 import { DateContext } from "../date/context";
 import { useModalContext } from "../modal/Modal.context";
-import { useClientLayoutEffect, useEventListener } from "../util/hooks";
+import { DismissableLayer } from "../overlay/dismiss/DismissableLayer";
+import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
@@ -133,19 +125,15 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const chosenFlip = isInDatepicker ? false : _flip;
 
     const {
-      x,
-      y,
-      strategy,
-      context,
       update,
       refs,
       placement: flPlacement,
       middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+      floatingStyles,
     } = useFloating({
       strategy: chosenStrategy,
       placement,
       open,
-      onOpenChange: () => onClose(),
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
         chosenFlip &&
@@ -155,11 +143,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       ],
     });
 
-    const { getFloatingProps } = useInteractions([
-      useClick(context),
-      useDismiss(context),
-    ]);
-
     useClientLayoutEffect(() => {
       refs.setReference(anchorEl);
     }, [anchorEl]);
@@ -176,24 +159,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       return () => cleanup();
     }, [refs.floating, refs.reference, update, open, anchorEl]);
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            e.target instanceof HTMLElement &&
-            ![anchorEl, refs.floating.current].some(
-              (element) => element?.contains(e.target as Node),
-            ) &&
-            !e.target.contains(refs.floating.current)
-          ) {
-            open && onClose();
-          }
-        },
-        [anchorEl, refs, open, onClose],
-      ),
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -202,38 +167,41 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     }[flPlacement.split("-")[0]];
 
     return (
-      <div
-        className={cl("navds-popover", className, {
-          "navds-popover--hidden": !open || !anchorEl,
-        })}
-        data-placement={flPlacement}
-        aria-hidden={!open || !anchorEl}
-        {...getFloatingProps({
-          ref: floatingRef,
-          style: {
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-          },
-          tabIndex: undefined,
-        })}
-        {...rest}
+      <DismissableLayer
+        asChild
+        safeZone={{
+          anchor: anchorEl,
+          dismissable: refs.floating.current,
+        }}
+        onDismiss={() => open && onClose?.()}
+        enabled={open}
       >
-        {children}
-        {arrow && (
-          <div
-            ref={(node) => {
-              arrowRef.current = node;
-            }}
-            style={{
-              ...(arrowX != null ? { left: arrowX } : {}),
-              ...(arrowY != null ? { top: arrowY } : {}),
-              ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-            }}
-            className="navds-popover__arrow"
-          />
-        )}
-      </div>
+        <div
+          ref={floatingRef}
+          {...rest}
+          className={cl("navds-popover", className, {
+            "navds-popover--hidden": !open || !anchorEl,
+          })}
+          style={{ ...rest.style, ...floatingStyles }}
+          data-placement={flPlacement}
+          aria-hidden={!open || !anchorEl}
+        >
+          {children}
+          {arrow && (
+            <div
+              ref={(node) => {
+                arrowRef.current = node;
+              }}
+              style={{
+                ...(arrowX != null ? { left: arrowX } : {}),
+                ...(arrowY != null ? { top: arrowY } : {}),
+                ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+              }}
+              className="navds-popover__arrow"
+            />
+          )}
+        </div>
+      </DismissableLayer>
     );
   },
 ) as PopoverComponent;

package/src/progress-bar/ProgressBar.tsx

@@ -0,0 +1,149 @@
+import cl from "clsx";
+import React, { HTMLAttributes, forwardRef, useRef } from "react";
+
+interface ProgressBarPropsBase
+  extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+  /**
+   * Changes height.
+   * @default "medium"
+   */
+  size?: "large" | "medium" | "small";
+  /**
+   * Current progress. If set, the `simulated` prop overrides `value`.
+   */
+  value?: number;
+  /**
+   * Maximum progress.
+   * @default 100
+   */
+  valueMax?: number;
+  /**
+   * Visually simulates loading.
+   * ProgressBar grows with a preset animation for set number of seconds,
+   * then shows an indeterminate animation on timeout.
+   */
+  simulated?: {
+    /**
+     * Duration in seconds.
+     */
+    seconds: number;
+    /**
+     * Callback function when progress is indeterminate.
+     */
+    onTimeout: () => void;
+  };
+  /**
+   * String ID of the element that labels the progress bar.
+   * Not needed if `aria-label` is used.
+   */
+  "aria-labelledby"?: string;
+  /**
+   * String value that labels the progress bar.
+   * Not needed if `aria-labelledby` is used.
+   */
+  "aria-label"?: string;
+}
+
+export type ProgressBarProps = ProgressBarPropsBase &
+  (
+    | {
+        "aria-hidden": true;
+      }
+    | {
+        "aria-labelledby": string;
+        "aria-label"?: never;
+      }
+    | {
+        "aria-label": string;
+        "aria-labelledby"?: never;
+      }
+  );
+
+/**
+ * ProgressBar
+ * A component for visualizing progression in a process.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
+ * @see 🏷️ {@link ProgressBarProps}
+ *
+ * @example
+ * // For loading content with an approximate duration in sec.
+ * <ProgressBar simulated={{
+ *     seconds: 30,
+ *     onTimeout: () => console.log("Oops, this is taking more time than expected!")
+ *   }}
+ * />
+ *
+ * @example
+ * // As a step indicator for forms, questionnaires, etc.
+ * <ProgressBar value={2} valueMax={7} />
+ */
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  (
+    {
+      size = "medium",
+      value = 0,
+      valueMax = 100,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      className,
+      simulated,
+      ...rest
+    },
+    ref,
+  ) => {
+    const translate = 100 - (Math.round(value) / valueMax) * 100;
+    const onTimeoutRef = useRef<() => void>();
+    onTimeoutRef.current = simulated?.onTimeout;
+
+    React.useEffect(() => {
+      if (simulated?.seconds && onTimeoutRef.current) {
+        const timeout = setTimeout(
+          onTimeoutRef.current,
+          simulated.seconds * 1000,
+        );
+        return () => clearTimeout(timeout);
+      }
+    }, [simulated?.seconds]);
+
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-progress-bar",
+          `navds-progress-bar--${size}`,
+          className,
+        )}
+        aria-valuemax={simulated?.seconds ? 0 : Math.round(valueMax)}
+        aria-valuenow={simulated?.seconds ? 0 : Math.round(value)}
+        aria-valuetext={
+          simulated?.seconds
+            ? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated?.seconds} sekunder`
+            : `${Math.round(value)} av ${Math.round(valueMax)}`
+        }
+        role="progressbar"
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabel}
+        {...rest}
+      >
+        <div
+          className={cl("navds-progress-bar__foreground", {
+            "navds-progress-bar__foreground--indeterminate": Number.isInteger(
+              simulated?.seconds,
+            ),
+          })}
+          style={{
+            "--__ac-progress-bar-simulated": Number.isInteger(
+              simulated?.seconds,
+            )
+              ? `${simulated?.seconds}s`
+              : undefined,
+            "--__ac-progress-bar-translate": `-${translate}%`,
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+export default ProgressBar;

package/src/progress-bar/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar";

package/src/tabs/Tabs.context.ts

@@ -21,4 +21,6 @@ export const [TabsProvider, useTabsContext] = createContext<TabsProviderProps>({
   name: "TabsContext",
   hookName: "useTabsContext",
   providerName: "TabsProvider",
+  errorMessage:
+    "Tabs.List, Tabs.Tag and Tabs.Panel needs to be wrapped within <Tabs>",
 });

package/src/toggle-group/ToggleGroup.context.ts

@@ -28,4 +28,5 @@ export const [ToggleGroupProvider, useToggleGroupContext] =
     name: "ToggleGroupContext",
     hookName: "useToggleGroupContext",
     providerName: "ToggleGroupProvider",
+    errorMessage: "<ToggleGroup.Item> needs to be wrapped within <ToggleGroup>",
   });

package/src/typography/BodyLong.tsx

@@ -8,12 +8,12 @@ export interface BodyLongProps
   extends TypoProps,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * large: 20px, medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
   /**
-   * Text
+   * Text.
    */
   children: React.ReactNode;
 }
@@ -27,11 +27,11 @@ export interface BodyLongProps
  *
  * @example
  * ```jsx
- *     <BodyLong>
- *       Hvis du ikke bor sammen med begge foreldrene dine,
- *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
- *       fullfører videregående skole eller tilsvarende.
- *     </BodyLong>
+ * <BodyLong>
+ *   Hvis du ikke bor sammen med begge foreldrene dine,
+ *   kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *   fullfører videregående skole eller tilsvarende.
+ * </BodyLong>
  * ```
  */
 export const BodyLong: OverridableComponent<

package/src/typography/BodyShort.tsx

@@ -8,12 +8,12 @@ export interface BodyShortProps
   extends TypoProps,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * large: 20px, medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
   /**
-   * Paragraph text
+   * Paragraph text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface BodyShortProps
  *
  * @example
  * ```jsx
- *     <BodyShort>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </BodyShort>
+ * <BodyShort>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </BodyShort>
  * ```
  */
 export const BodyShort: OverridableComponent<

package/src/typography/Detail.tsx

@@ -12,11 +12,11 @@ export interface DetailProps
    */
   size?: "medium" | "small";
   /**
-   * Paragraph text
+   * Text.
    */
   children: React.ReactNode;
   /**
-   * All caps
+   * ALL CAPS.
    */
   uppercase?: boolean;
 }
@@ -30,9 +30,9 @@ export interface DetailProps
  *
  * @example
  * ```jsx
- *     <Detail>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </Detail>
+ * <Detail>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </Detail>
  * ```
  */
 export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =

package/src/typography/ErrorMessage.tsx

@@ -8,12 +8,12 @@ export interface ErrorMessageProps
   extends Pick<TypoProps, "spacing">,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 18px, small: 16px
+   * medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Error text
+   * Error text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface ErrorMessageProps
  *
  * @example
  * ```jsx
- *     <ErrorMessage>
- *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </ErrorMessage>
+ * <ErrorMessage>
+ *   Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </ErrorMessage>
  * ```
  */
 export const ErrorMessage: OverridableComponent<

package/src/typography/Heading.tsx

@@ -8,16 +8,16 @@ export interface HeadingProps
   extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
     React.HTMLAttributes<HTMLHeadingElement> {
   /**
-   * Heading level
+   * Heading level.
    * @default "1"
    */
   level?: "1" | "2" | "3" | "4" | "5" | "6";
   /**
-   * Changes text-sizing
+   * xlarge: 40px, large: 32px, medium: 24px, small: 20px, xsmall: 18px.
    */
   size: "xlarge" | "large" | "medium" | "small" | "xsmall";
   /**
-   * Heading text
+   * Heading text.
    */
   children: React.ReactNode;
 }
@@ -31,9 +31,9 @@ export interface HeadingProps
  *
  * @example
  * ```jsx
- *     <Heading level="1" size="xlarge">
- *       Hva kan vi hjelpe deg med?
- *     </Heading>
+ * <Heading level="1" size="xlarge">
+ *   Hva kan vi hjelpe deg med?
+ * </Heading>
  * ```
  */
 export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =

package/src/typography/Label.tsx

@@ -8,12 +8,12 @@ export interface LabelProps
   extends Omit<TypoProps, "weight" | "align" | "truncate">,
     React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
-   * medium: 18px, small: 16px
+   * medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Paragraph text
+   * Label text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface LabelProps
  *
  * @example
  * ```jsx
- *     <Label>
- *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </Label>
+ * <Label>
+ *   Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </Label>
  * ```
  */
 export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =

package/src/typography/types.ts

@@ -12,15 +12,15 @@ export type TypoProps = {
    */
   align?: "start" | "center" | "end";
   /**
-   * Visually hide text. Text will still be accessible for screenreaders
+   * Visually hide text. Text will still be accessible for screenreaders.
    */
   visuallyHidden?: boolean;
   /**
-   * Adds spacing below text
+   * Adds spacing below text.
    */
   spacing?: boolean;
   /**
-   * Adjusts color
+   * Adjusts color.
    */
   textColor?: "default" | "subtle";
 };

package/src/util/hooks/descendants/useDescendant.tsx

@@ -8,68 +8,6 @@ import { mergeRefs } from "../useMergeRefs";
 import { DescendantOptions, DescendantsManager } from "./descendant";
 import { cast } from "./utils";
 
-/**
- * @internal
- * Initializing DescendantsManager
- */
-function useDescendants<
-  T extends HTMLElement = HTMLElement,
-  K extends Record<string, any> = object,
->() {
-  const descendants = useRef(new DescendantsManager<T, K>()).current;
-
-  return descendants;
-}
-
-const [DescendantsContextProvider, useDescendantsContext] = createContext<
-  ReturnType<typeof useDescendants>
->({
-  name: "DescendantsProvider",
-  errorMessage: "useDescendantsContext must be used within DescendantsProvider",
-});
-
-/**
- * @internal
- * This hook provides information to descendant component:
- * - Index compared to other descendants
- * - ref callback to register the descendant
- * - Its enabled index compared to other enabled descendants
- */
-function useDescendant<
-  T extends HTMLElement = HTMLElement,
-  K extends Record<string, any> = object,
->(options?: DescendantOptions<K>) {
-  const descendants = useDescendantsContext();
-  const [index, setIndex] = useState(-1);
-  const ref = useRef<T>(null);
-
-  useClientLayoutEffect(() => {
-    return () => {
-      if (!ref.current) return;
-      descendants.unregister(ref.current);
-    };
-  }, []);
-
-  useClientLayoutEffect(() => {
-    if (!ref.current) return;
-    const dataIndex = Number(ref.current.dataset["index"]);
-    if (index != dataIndex && !Number.isNaN(dataIndex)) {
-      setIndex(dataIndex);
-    }
-  });
-
-  const refCallback = options
-    ? cast<React.RefCallback<T>>(descendants.register(options))
-    : cast<React.RefCallback<T>>(descendants.register);
-
-  return {
-    descendants,
-    index,
-    enabledIndex: descendants.enabledIndexOf(ref.current),
-    register: mergeRefs([refCallback, ref]),
-  };
-}
-
 /**
  * Provides strongly typed versions of the context provider and hooks above.
  */
@@ -77,6 +15,14 @@ export function createDescendantContext<
   T extends HTMLElement = HTMLElement,
   K extends Record<string, any> = object,
 >() {
+  const [DescendantsContextProvider, useDescendantsContext] = createContext<
+    ReturnType<typeof _useDescendants>
+  >({
+    name: "DescendantsProvider",
+    errorMessage:
+      "useDescendantsContext must be used within DescendantsProvider",
+  });
+
   const ContextProvider = cast<React.Provider<DescendantsManager<T, K>>>(
     (props) => (
       <DescendantsContextProvider {...props.value}>
@@ -85,19 +31,60 @@ export function createDescendantContext<
     ),
   );
 
-  const _useDescendantsContext = () =>
-    cast<DescendantsManager<T, K>>(useDescendantsContext());
+  /**
+   * @internal
+   * This hook provides information to descendant component:
+   * - Index compared to other descendants
+   * - ref callback to register the descendant
+   * - Its enabled index compared to other enabled descendants
+   */
+  function _useDescendant(options?: DescendantOptions<K>) {
+    const descendants = useDescendantsContext();
+    const [index, setIndex] = useState(-1);
+    const ref = useRef<T>(null);
+
+    useClientLayoutEffect(() => {
+      return () => {
+        if (!ref.current) return;
+        descendants.unregister(ref.current);
+      };
+    }, []);
+
+    useClientLayoutEffect(() => {
+      if (!ref.current) return;
+      const dataIndex = Number(ref.current.dataset["index"]);
+      if (index != dataIndex && !Number.isNaN(dataIndex)) {
+        setIndex(dataIndex);
+      }
+    });
+
+    const refCallback = options
+      ? cast<React.RefCallback<T>>(descendants.register(options))
+      : cast<React.RefCallback<T>>(descendants.register);
+
+    return {
+      descendants,
+      index,
+      enabledIndex: descendants.enabledIndexOf(ref.current),
+      register: mergeRefs([refCallback, ref]),
+    };
+  }
 
-  const _useDescendant = (options?: DescendantOptions<K>) =>
-    useDescendant<T, K>(options);
+  /**
+   * @internal
+   * Initializing DescendantsManager
+   */
+  function _useDescendants() {
+    const descendants = useRef(new DescendantsManager<T, K>()).current;
 
-  const _useDescendants = () => useDescendants<T, K>();
+    return descendants;
+  }
 
   return [
     // context provider
     ContextProvider,
     // call this when you need to read from context
-    _useDescendantsContext,
+    useDescendantsContext,
     // descendants state information, to be called and passed to `ContextProvider`
     _useDescendants,
     // descendant index information

package/src/util/types/AsChild.ts

@@ -0,0 +1,15 @@
+export type AsChild =
+  | {
+      children: React.ReactElement;
+      /**
+       * Renders the children as a child of the component. Merges the props of the component with the props of the child.
+       */
+      asChild: true;
+    }
+  | {
+      children: React.ReactNode;
+      /**
+       * Renders the children as a child of the component. Merges the props of the component with the props of the child.
+       */
+      asChild?: false;
+    };