@navikt/ds-react 7.36.0 → 7.38.0

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

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from "react";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
+import {
+  CUSTOM_EVENTS,
+  CustomPointerEvent,
+  dispatchCustomEvent,
+} from "./dispatchCustomEvent";
+
+/**
+ * Listens for `pointerup` outside a react subtree.
+ * Returns props to pass to the node we want to check for outside events.
+ * By checking `isPointerInsideReactTreeRef` we can determine if the event happened outside the subtree of the node, saving some element-comparisons.
+ */
+export function usePointerUpOutside(
+  callback?: (event: CustomPointerEvent) => void,
+  ownerDocument: Document = globalThis?.document,
+  enabled: boolean = true,
+) {
+  // Keep callback ref stable
+  const handlePointerUpOutside = useEventCallback(callback) as EventListener;
+  // Tracks if the pointer interaction started inside the React subtree.
+  const isPointerInsideReactTreeRef = useRef(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const handlePointerUp = (event: PointerEvent) => {
+      /**
+       * The `DismisableLayer`-API is based on the ability to stop events from propagating and in the end calling `onDismiss`
+       * if `usePointerUpOutside`-callback does not run `event.preventDefault()`.
+       *
+       * Although `pointerup` is already a cancelable event, we still dispatch a custom event (discrete)
+       * to keep parity with focus outside handling and ensure ordering.
+       *
+       * Since pointer events are `discrete` in React we rely on the same custom dispatch strategy.
+       */
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        dispatchCustomEvent(
+          CUSTOM_EVENTS.POINTER_UP_OUTSIDE,
+          handlePointerUpOutside,
+          { originalEvent: event },
+          { discrete: true },
+        );
+      }
+      /* Reset for next interaction. */
+      isPointerInsideReactTreeRef.current = false;
+    };
+
+    /* Mostly relevant if user moved touch after touch-start */
+    const handlePointerCancel = () => {
+      /* Reset state if interaction is cancelled */
+      isPointerInsideReactTreeRef.current = false;
+    };
+
+    /**
+     * If this hook executes in a component that mounts via a `pointerup` event, the event
+     * would bubble up to the document and trigger a `pointerUpOutside` event. We avoid
+     * this by delaying the event listener registration on the document.
+     * This is not React specific, but rather how the DOM works, ie:
+     * ```
+     * button.addEventListener('pointerup', () => {
+     *   console.log('I will log');
+     *   document.addEventListener('pointerup', () => {
+     *     console.log('I will also log');
+     *   })
+     * });
+     */
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerup", handlePointerUp);
+      ownerDocument.addEventListener("pointercancel", handlePointerCancel);
+    }, 0);
+
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerup", handlePointerUp);
+      ownerDocument.removeEventListener("pointercancel", handlePointerCancel);
+    };
+  }, [ownerDocument, handlePointerUpOutside, enabled]);
+
+  /**
+   * Ensures we check React component tree (not just DOM tree).
+   * This makes sure that if you start or end a pointer interaction inside the
+   * React tree (e.g. Modal), we don't trigger the outside event on pointer up.
+   */
+  return {
+    onPointerDownCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    },
+    onPointerUpCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    },
+  };
+}

package/src/overlays/floating/Floating.tsx

@@ -20,14 +20,11 @@ import React, {
 } from "react";
 import { useModalContext } from "../../modal/Modal.context";
 import { Slot } from "../../slot/Slot";
-import { createContext } from "../../util/create-context";
-import {
-  useCallbackRef,
-  useClientLayoutEffect,
-  useMergeRefs,
-} from "../../util/hooks";
+import { createStrictContext } from "../../util/create-strict-context";
+import { useClientLayoutEffect, useMergeRefs } from "../../util/hooks";
+import { useEventCallback } from "../../util/hooks/useEventCallback";
+import { useOpenChangeAnimationComplete } from "../../util/hooks/useOpenChangeAnimationComplete";
 import { AsChildProps } from "../../util/types";
-import { useOpenChangeAnimationComplete } from "../overlay/hooks/useOpenChangeAnimationComplete";
 import {
   type Align,
   type Measurable,
@@ -44,11 +41,9 @@ type FloatingContextValue = {
   onAnchorChange: (anchor: Measurable | null) => void;
 };
 
-export const [FloatingProvider, useFloatingContext] =
-  createContext<FloatingContextValue>({
+export const { Provider: FloatingProvider, useContext: useFloatingContext } =
+  createStrictContext<FloatingContextValue>({
     name: "FloatingContext",
-    hookName: "useFloating",
-    providerName: "FloatingProvider",
   });
 
 interface FloatingProps {
@@ -171,12 +166,12 @@ type FloatingContentContextValue = {
   hideArrow: boolean;
 };
 
-const [FloatingContentProvider, useFloatingContentContext] =
-  createContext<FloatingContentContextValue>({
-    name: "FloatingContentContext",
-    hookName: "useFloatingContentContext",
-    providerName: "FloatingContentProvider",
-  });
+const {
+  Provider: FloatingContentProvider,
+  useContext: useFloatingContentContext,
+} = createStrictContext<FloatingContentContextValue>({
+  name: "FloatingContentContext",
+});
 
 type Boundary = Element | null;
 
@@ -364,15 +359,15 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
     }, [autoUpdateWhileMounted, enabled, floatingElements, update]);
 
     useOpenChangeAnimationComplete({
-      enabled: !!modalContext?.ref,
+      enabled: !!modalContext?.modalRef,
       open: enabled,
-      ref: modalContext?.ref,
+      ref: modalContext?.modalRef,
       onComplete: update,
     });
 
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
 
-    const handlePlaced = useCallbackRef(onPlaced);
+    const handlePlaced = useEventCallback(onPlaced);
 
     useClientLayoutEffect(() => {
       isPositioned && handlePlaced?.();

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

@@ -125,7 +125,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const isInModal = useModalContext(false) !== undefined;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
 
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     const {
       update,

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/provider/Provider.tsx

@@ -24,12 +24,10 @@ export type ProviderProps = {
        * Aksel locale
        * @default nb
        * @example
-       * ```jsx
        * import { en } from "@navikt/ds-react/locales";
        * <Provider locale={en}>
-       *  {app}
+       *   {app}
        * </Provider>
-       * ```
        */
       locale: Translations;
       /**
@@ -54,11 +52,9 @@ export const useProvider = () => useContext(ProviderContext);
  * @see 🏷️ {@link ProviderProps}
  *
  * @example
- * ```jsx
  * <Provider rootElement={rootElement}>
  *   {app}
  * </Provider>
- * ```
  */
 export const Provider = ({
   children,

package/src/slot/Slot.tsx

@@ -1,25 +1,30 @@
 import React from "react";
-import { mergeRefs } from "../util/hooks/useMergeRefs";
+import { useMergeRefs } from "../util/hooks";
 import { mergeProps } from "./merge-props";
 
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
+function getChildRef(children: React.ReactNode): React.Ref<HTMLElement> | null {
+  if (!React.isValidElement(children)) {
+    return null;
+  }
+  return Object.prototype.propertyIsEnumerable.call(children.props, "ref")
+    ? (children.props as any).ref // React 19 (children.ref still works, but gives a warning)
+    : (children as any).ref; // React <19
+}
+
 const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
   const { children, ...slotProps } = props;
 
-  if (React.isValidElement(children)) {
-    const childRef = Object.prototype.propertyIsEnumerable.call(
-      children.props,
-      "ref",
-    )
-      ? (children.props as any).ref // React 19 (children.ref still works, but gives a warning)
-      : (children as any).ref; // React <19
+  const childRef = getChildRef(children);
+  const mergedRef = useMergeRefs(forwardedRef, childRef);
 
+  if (React.isValidElement(children)) {
     return React.cloneElement<any>(children, {
       ...mergeProps(slotProps, children.props as any),
-      ref: forwardedRef ? mergeRefs([forwardedRef, childRef]) : childRef,
+      ref: mergedRef,
     });
   }
 

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/tabs/parts/tab/useTab.ts

@@ -1,5 +1,5 @@
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { mergeRefs } from "../../../util/hooks/useMergeRefs";
+import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
 import { useTabsContext, useTabsDescendant } from "../../Tabs.context";
 
 export interface UseTabProps {
@@ -40,8 +40,10 @@ export function useTab<P extends UseTabProps>(
     selectionFollowsFocus && setSelectedValue(value);
   };
 
+  const refs = useMergeRefs(register, ref);
+
   return {
-    ref: mergeRefs([register, ref]),
+    ref: refs,
     isSelected,
     isFocused: focusedValue === value,
     id: makeTabId(id, value),

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({