@navikt/ds-react 7.35.3 → 7.37.0

package/src/overlays/floating-menu/Menu.tsx

@@ -2,10 +2,11 @@ import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { Portal } from "../../portal";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { createContext } from "../../util/create-context";
+import { createStrictContext } from "../../util/create-strict-context";
 import { FocusBoundary } from "../../util/focus-boundary/FocusBoundary";
-import { useCallbackRef, useId, useMergeRefs } from "../../util/hooks";
+import { useId, useMergeRefs } from "../../util/hooks";
 import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
+import { useEventCallback } from "../../util/hooks/useEventCallback";
 import { DismissableLayer } from "../dismissablelayer/DismissableLayer";
 import { Floating } from "../floating/Floating";
 import { RovingFocus, RovingFocusProps } from "./parts/RovingFocus";
@@ -71,10 +72,10 @@ type MenuContextValue = {
   onContentChange: (content: MenuContentElementRef | null) => void;
 };
 
-const [MenuProvider, useMenuContext] = createContext<MenuContextValue>({
-  providerName: "MenuProvider",
-  hookName: "useMenuContext",
-});
+const { Provider: MenuProvider, useContext: useMenuContext } =
+  createStrictContext<MenuContextValue>({
+    name: "MenuContext",
+  });
 
 type MenuRootContextValue = {
   onClose: () => void;
@@ -82,10 +83,9 @@ type MenuRootContextValue = {
   modal: boolean;
 };
 
-const [MenuRootProvider, useMenuRootContext] =
-  createContext<MenuRootContextValue>({
-    providerName: "MenuRootProvider",
-    hookName: "useMenuRootContext",
+const { Provider: MenuRootProvider, useContext: useMenuRootContext } =
+  createStrictContext<MenuRootContextValue>({
+    name: "MenuRootContext",
   });
 
 const MenuRoot = ({
@@ -96,7 +96,7 @@ const MenuRoot = ({
 }: MenuProps) => {
   const [content, setContent] = useState<MenuContentElement | null>(null);
   const isUsingKeyboardRef = useRef(false);
-  const handleOpenChange = useCallbackRef(onOpenChange);
+  const handleOpenChange = useEventCallback(onOpenChange);
 
   useEffect(() => {
     const globalDocument = globalThis.document;
@@ -589,10 +589,9 @@ const MenuPortal = forwardRef<MenuPortalElement, MenuPortalProps>(
 /* -------------------------------------------------------------------------- */
 /*                                 Menu Radio                                 */
 /* -------------------------------------------------------------------------- */
-const [RadioGroupProvider, useMenuRadioGroupContext] =
-  createContext<MenuRadioGroupProps>({
-    providerName: "MenuRadioGroupProvider",
-    hookName: "useMenuRadioGroupContext",
+const { Provider: RadioGroupProvider, useContext: useMenuRadioGroupContext } =
+  createStrictContext<MenuRadioGroupProps>({
+    name: "MenuRadioGroupContext",
     defaultValue: {
       value: undefined,
       onValueChange: () => {},
@@ -608,7 +607,7 @@ const MenuRadioGroup = React.forwardRef<
   React.ElementRef<typeof MenuGroup>,
   MenuRadioGroupProps
 >(({ value, onValueChange, ...rest }: MenuRadioGroupProps, ref) => {
-  const handleValueChange = useCallbackRef(onValueChange);
+  const handleValueChange = useEventCallback(onValueChange);
   return (
     <RadioGroupProvider value={value} onValueChange={handleValueChange}>
       <MenuGroup {...rest} ref={ref} />
@@ -619,11 +618,13 @@ const MenuRadioGroup = React.forwardRef<
 /* -------------------------------------------------------------------------- */
 /*                             Menu Item Indicator                            */
 /* -------------------------------------------------------------------------- */
-const [MenuItemIndicatorProvider, useMenuItemIndicatorContext] = createContext<{
+const {
+  Provider: MenuItemIndicatorProvider,
+  useContext: useMenuItemIndicatorContext,
+} = createStrictContext<{
   state: CheckedState;
 }>({
-  providerName: "MenuItemIndicatorProvider",
-  hookName: "useMenuItemIndicatorContext",
+  name: "MenuItemIndicatorContext",
 });
 
 type MenuItemIndicatorProps = SlottedDivProps;
@@ -743,12 +744,10 @@ type MenuSubContextValue = {
   onTriggerChange: (trigger: MenuItemElement | null) => void;
 };
 
-const [MenuSubProvider, useMenuSubContext] = createContext<MenuSubContextValue>(
-  {
-    providerName: "MenuSubProvider",
-    hookName: "useMenuSubContext",
-  },
-);
+const { Provider: MenuSubProvider, useContext: useMenuSubContext } =
+  createStrictContext<MenuSubContextValue>({
+    name: "MenuSubContext",
+  });
 
 interface MenuSubProps {
   children?: React.ReactNode;
@@ -769,7 +768,7 @@ const MenuSub: React.FC<MenuSubProps> = ({
   const [content, setContent] = useState<MenuContentInternalElement | null>(
     null,
   );
-  const handleOpenChange = useCallbackRef(onOpenChange);
+  const handleOpenChange = useEventCallback(onOpenChange);
 
   // Prevent the parent menu from reopening with open submenus.
   useEffect(() => {

package/src/overlays/floating-menu/parts/RovingFocus.tsx

@@ -1,8 +1,9 @@
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
 import { Slot } from "../../../slot/Slot";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { useCallbackRef, useMergeRefs } from "../../../util/hooks";
+import { useMergeRefs } from "../../../util/hooks";
 import { DescendantsManager } from "../../../util/hooks/descendants/descendant";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
 import { ownerDocument } from "../../../util/owner";
 
 interface RovingFocusProps
@@ -32,7 +33,7 @@ const RovingFocus = forwardRef<HTMLDivElement, RovingFocusProps>(
     const _ref = React.useRef<HTMLDivElement>(null);
     const composedRefs = useMergeRefs(ref, _ref);
 
-    const handleEntryFocus = useCallbackRef(onEntryFocus);
+    const handleEntryFocus = useEventCallback(onEntryFocus);
     const isMouseFocusRef = useRef(false);
 
     useEffect(() => {

package/src/pagination/PaginationItem.tsx

@@ -40,7 +40,7 @@ export const Item: PaginationItemType = forwardRef(
     },
     ref,
   ) => {
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
     const { cn } = useRenameCSS();
 
     return (

package/src/popover/Popover.tsx

@@ -1,4 +1,7 @@
 import {
+  Alignment,
+  Placement,
+  Side,
   autoUpdate,
   arrow as flArrow,
   offset as flOffset,
@@ -7,7 +10,6 @@ import {
   useFloating,
 } from "@floating-ui/react";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
-import { useDateInputContext } from "../date/Date.Input";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
 import { useRenameCSS, useThemeInternal } from "../theme/Theme";
@@ -121,11 +123,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const { cn } = useRenameCSS();
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useModalContext(false) !== undefined;
-    const datepickerContext = useDateInputContext(false);
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
-    const chosenFlip = datepickerContext ? false : _flip;
 
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     const {
       update,
@@ -139,8 +139,11 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       open,
       middleware: [
         flOffset(offset ?? (themeContext?.isDarkside ? 8 : arrow ? 16 : 4)),
-        chosenFlip &&
-          flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        _flip &&
+          flip({
+            padding: 5,
+            fallbackPlacements: getOppositePlacement(placement),
+          }),
         shift({ padding: 12 }),
         flArrow({ element: arrowRef, padding: 8 }),
       ],
@@ -209,6 +212,32 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   },
 ) as PopoverComponent;
 
+const oppositeSideMap: Record<Side, Side> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+
+/**
+ * If placement is side+alignment, we want to preserve the alignment
+ * when flipping to the opposite side.
+ */
+function getOppositePlacement(placement: Placement): Placement[] {
+  /**
+   * In most cases, the fallback for left/right should be top/bottom
+   * as there is usually more space vertically than horizontally.
+   */
+  if (placement.startsWith("left") || placement.startsWith("right")) {
+    return ["bottom", "top"];
+  }
+
+  const [side, alignment] = placement.split("-") as [Side, Alignment?];
+  const oppositeSide = oppositeSideMap[side];
+
+  return [alignment ? `${oppositeSide}-${alignment}` : oppositeSide];
+}
+
 Popover.Content = PopoverContent;
 
 export default Popover;

package/src/portal/Portal.tsx

@@ -90,7 +90,7 @@ type PortalDivProps = React.HTMLAttributes<HTMLDivElement>;
 
 const PortalDiv = forwardRef<HTMLDivElement, PortalDivProps>(
   (props: PortalDivProps, forwardedRef) => {
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     if (themeContext?.isDarkside) {
       return (

package/src/process/Process.tsx

@@ -8,7 +8,7 @@ import React, {
 import { useRenameCSS } from "../theme/Theme";
 import { BodyLong, BodyShort, Heading } from "../typography";
 import { useId } from "../util";
-import { createContext } from "../util/create-context";
+import { createStrictContext } from "../util/create-strict-context";
 import { useMergeRefs } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -34,10 +34,8 @@ type ProcessContextProps = Pick<ProcessProps, "hideStatusText"> & {
   syncAriaControls: () => void;
 };
 
-const [ProcessContextProvider, useProcessContext] =
-  createContext<ProcessContextProps>({
-    providerName: "ProcessContextProvider",
-    hookName: "useProcessContext",
+const { Provider: ProcessContextProvider, useContext: useProcessContext } =
+  createStrictContext<ProcessContextProps>({
     name: "ProcessContext",
     errorMessage:
       "`<Process.Event />` must be used within a `<Process />` component.",

package/src/progress-bar/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef, useEffect } from "react";
 import { useRenameCSS } from "../theme/Theme";
-import { useLatestRef } from "../util/hooks/useLatestRef";
 import { useTimeout } from "../util/hooks/useTimeout";
+import { useValueAsRef } from "../util/hooks/useValueAsRef";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
 interface ProgressBarPropsBase
@@ -97,7 +97,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
   ) => {
     const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
-    const onTimeoutRef = useLatestRef(simulated?.onTimeout);
+    const onTimeoutRef = useValueAsRef(simulated?.onTimeout);
 
     const translate = useI18n("ProgressBar");
     const timeout = useTimeout();
@@ -112,7 +112,6 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     }, [onTimeoutRef, simulated?.seconds, timeout]);
 
     return (
-      /* biome-ignore lint/a11y/useFocusableInteractive: Progressbar is not interactive. */
       <div
         ref={ref}
         className={cn(
@@ -132,7 +131,6 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
                 max: Math.round(valueMax),
               })
         }
-        // biome-ignore lint/a11y/useAriaPropsForRole: We found that adding valueMin was not needed
         role="progressbar"
         aria-labelledby={ariaLabelledBy}
         aria-label={ariaLabel}

package/src/stepper/context.ts

@@ -1,4 +1,4 @@
-import { createContext } from "../util/create-context";
+import { createStrictContext } from "../util/create-strict-context";
 
 interface StepperContextValue {
   onStepChange: (step: number) => void;
@@ -9,10 +9,10 @@ interface StepperContextValue {
   index: number;
 }
 
-export const [StepperContextProvider, useStepperContext] =
-  createContext<StepperContextValue>({
-    hookName: "useStepperContext",
-    providerName: "StepperContextProvider",
-    name: "StepperContext",
-    errorMessage: "<Stepper.Step> has to be used within <Stepper>",
-  });
+export const {
+  Provider: StepperContextProvider,
+  useContext: useStepperContext,
+} = createStrictContext<StepperContextValue>({
+  name: "StepperContext",
+  errorMessage: "<Stepper.Step> has to be used within <Stepper>",
+});

package/src/tabs/Tabs.context.ts

@@ -1,4 +1,4 @@
-import { createContext } from "../util/create-context";
+import { createStrictContext } from "../util/create-strict-context";
 import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
 import { TabsProps } from "./Tabs.types";
 import { useTabs } from "./useTabs";
@@ -17,10 +17,9 @@ type TabsProviderProps = ReturnType<typeof useTabs> &
   >;
 
 /* State context */
-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>",
-});
+export const { Provider: TabsProvider, useContext: useTabsContext } =
+  createStrictContext<TabsProviderProps>({
+    name: "TabsContext",
+    errorMessage:
+      "Tabs.List, Tabs.Tag and Tabs.Panel needs to be wrapped within <Tabs>",
+  });

package/src/theme/Theme.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Slot } from "../slot/Slot";
 import { AkselColor } from "../types";
-import { createContext } from "../util/create-context";
+import { createStrictContext } from "../util/create-strict-context";
 import { AsChildProps } from "../util/types";
 
 /* -------------------------------------------------------------------------- */
@@ -15,12 +15,11 @@ type RenameCSSContext = {
   cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
 };
 
-const [RenameCSSProvider, useRenameCSS] = createContext<RenameCSSContext>({
-  hookName: "useRenameCSS",
-  name: "RenameCSS",
-  providerName: "RenameCSSProvider",
-  defaultValue: { cn: cl },
-});
+const { Provider: RenameCSSProvider, useContext: useRenameCSS } =
+  createStrictContext<RenameCSSContext>({
+    name: "RenameCSS",
+    defaultValue: { cn: cl },
+  });
 
 export const compositeClassFunction = (
   ...inputs: Parameters<typeof cl>
@@ -61,15 +60,14 @@ type ThemeContext = {
   isDarkside: boolean;
 };
 
-const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
-  hookName: "useTheme",
-  name: "ThemeProvider",
-  providerName: "ThemeProvider",
-  defaultValue: {
-    color: DEFAULT_COLOR,
-    isDarkside: false,
-  },
-});
+const { Provider: ThemeProvider, useContext: useThemeInternal } =
+  createStrictContext<ThemeContext>({
+    name: "ThemeProvider",
+    defaultValue: {
+      color: DEFAULT_COLOR,
+      isDarkside: false,
+    },
+  });
 
 export type ThemeProps = {
   className?: string;
@@ -86,7 +84,7 @@ export type ThemeProps = {
 
 const Theme = forwardRef<HTMLDivElement, ThemeProps>(
   (props: ThemeProps, ref) => {
-    const context = useThemeInternal(false);
+    const context = useThemeInternal();
 
     const {
       children,

package/src/timeline/period/ClickablePeriod.tsx

@@ -98,7 +98,7 @@ const ClickablePeriod = React.memo(
           type="button"
           ref={(r) => {
             firstFocus && addFocusable(r, index);
-            mergedRef(r);
+            mergedRef?.(r);
           }}
           aria-label={label}
           className={cn(

package/src/timeline/period/index.tsx

@@ -68,8 +68,9 @@ export const Period = forwardRef<HTMLDivElement, TimelinePeriodProps>(
     const period = periods.find((p) => p.id === periodId);
 
     if (!period) {
-      return <></>;
+      return null;
     }
+
     const {
       start,
       endInclusive,

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

@@ -1,5 +1,5 @@
 import { createContext as ReactCreateContext } from "react";
-import { createContext } from "../util/create-context";
+import { createStrictContext } from "../util/create-strict-context";
 import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
 import { ToggleGroupProps } from "./ToggleGroup.types";
 import { useToggleGroup } from "./useToggleGroup";
@@ -23,10 +23,10 @@ type ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> &
   Pick<ToggleGroupProps, "size">;
 
 /* State context */
-export const [ToggleGroupProvider, useToggleGroupContext] =
-  createContext<ToggleGroupProviderProps>({
-    name: "ToggleGroupContext",
-    hookName: "useToggleGroupContext",
-    providerName: "ToggleGroupProvider",
-    errorMessage: "<ToggleGroup.Item> needs to be wrapped within <ToggleGroup>",
-  });
+export const {
+  Provider: ToggleGroupProvider,
+  useContext: useToggleGroupContext,
+} = createStrictContext<ToggleGroupProviderProps>({
+  name: "ToggleGroupContext",
+  errorMessage: "<ToggleGroup.Item> needs to be wrapped within <ToggleGroup>",
+});

package/src/toggle-group/ToggleGroup.tsx

@@ -55,7 +55,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     ref,
   ) => {
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
     const descendants = useToggleGroupDescendants();
 
     const toggleGroupContext = useToggleGroup({

package/src/tooltip/Tooltip.tsx

@@ -133,7 +133,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const modalContext = useModalContext(false);
-    const rootElement = modalContext ? modalContext.ref.current : undefined;
+    const rootElement = modalContext
+      ? modalContext.modalRef.current
+      : undefined;
 
     const {
       x,

package/src/util/composition-warning/CompositionWarning.tsx

@@ -13,7 +13,7 @@
  */
 import React, { useEffect, useRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { createContext } from "../create-context";
+import { createStrictContext } from "../create-strict-context";
 
 type CompositionName = string;
 
@@ -26,8 +26,9 @@ type CompositionWarningContextType = {
   name: CompositionName;
 };
 
-const [CompositionWarning, useCompositionWarning] =
-  createContext<CompositionWarningContextType>({
+const { Provider: CompositionWarning, useContext: useCompositionWarning } =
+  createStrictContext<CompositionWarningContextType>({
+    name: "CompositionWarningContext",
     errorMessage:
       "useCompositionWarning() must be used within <CompositionWarning />",
   });

package/src/util/create-strict-context.tsx

@@ -0,0 +1,91 @@
+/**
+ * Custom createStrictContext to consolidate context-implementation across the system.
+ * Unlike React's createContext, this throws an error by default when used outside a provider.
+ *
+ * Inspired by:
+ * - https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx
+ * - https://github.com/chakra-ui/chakra-ui/blob/5ec0be610b5a69afba01a9c22365155c1b519136/packages/hooks/context/src/index.ts
+ */
+import React, {
+  createContext as createReactContext,
+  useContext as useReactContext,
+} from "react";
+
+type ProviderProps<T> = T & { children: React.ReactNode; ref?: never };
+
+function getErrorMessage(name: string) {
+  return `Aksel: use${name}Context returned \`undefined\`. Seems you forgot to wrap component within ${name}Provider`;
+}
+
+/* -----------------------------------------------------------------------------
+ * Overload signatures
+ * -------------------------------------------------------------------------- */
+
+/**
+ * When defaultValue is provided, context is always defined.
+ * The hook will always return T (no strict parameter needed).
+ */
+function createStrictContext<T>(options: {
+  name: string;
+  errorMessage?: string;
+  defaultValue: T;
+}): { Provider: React.FC<ProviderProps<T>>; useContext: () => T };
+
+/**
+ * When no defaultValue is provided, context may be undefined.
+ * The hook accepts an optional `strict` parameter (default: true).
+ * - strict=true (default): throws if undefined, returns T
+ * - strict=false: returns T | undefined
+ */
+function createStrictContext<T>(options: {
+  name: string;
+  errorMessage?: string;
+  defaultValue?: undefined;
+}): {
+  Provider: React.FC<ProviderProps<T>>;
+  useContext: <S extends boolean = true>(
+    strict?: S,
+  ) => S extends true ? T : T | undefined;
+};
+
+/* -----------------------------------------------------------------------------
+ * Implementation
+ * -------------------------------------------------------------------------- */
+
+function createStrictContext<T>(options: {
+  name: string;
+  errorMessage?: string;
+  defaultValue?: T;
+}) {
+  const { name, defaultValue, errorMessage } = options;
+  const hasDefault = "defaultValue" in options;
+
+  const Context = createReactContext<T | undefined>(defaultValue);
+  Context.displayName = name;
+
+  function Provider({ children, ...context }: ProviderProps<T>) {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
+    const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps
+
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  }
+
+  Provider.displayName = `${name}Provider`;
+
+  function useContext(strict = true) {
+    const context = useReactContext(Context);
+
+    if (!hasDefault && !context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(name));
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext);
+      throw error;
+    }
+
+    return context;
+  }
+
+  return { Provider, useContext } as const;
+}
+
+export { createStrictContext };