@navikt/ds-react 5.17.4 → 5.18.0

package/src/tooltip/Tooltip.tsx

@@ -1,5 +1,4 @@
 import {
-  FloatingPortal,
   autoUpdate,
   arrow as flArrow,
   flip,
@@ -21,7 +20,7 @@ import React, {
   useRef,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
-import { useProvider } from "../provider";
+import Portal from "../overlays/portal/Portal";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -123,10 +122,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const modalContext = useContext(ModalContext);
-    const providerRootElement = useProvider()?.rootElement;
-    const rootElement = modalContext
-      ? modalContext.ref.current
-      : providerRootElement;
+    const rootElement = modalContext ? modalContext.ref.current : undefined;
 
     const {
       x,
@@ -199,7 +195,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               : children?.props["aria-describedby"],
           }),
         )}
-        <FloatingPortal root={rootElement}>
+        <Portal rootElement={rootElement}>
           {_open && (
             <div
               {...getFloatingProps({
@@ -253,7 +249,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               )}
             </div>
           )}
-        </FloatingPortal>
+        </Portal>
       </>
     );
   },

package/src/util/Slot.tsx

@@ -20,10 +20,12 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>(
     }
 
     if (React.Children.count(children) > 1) {
-      console.error(
+      const error = new Error(
         "Aksel: Components using 'asChild' expects to recieve a single React element child.",
       );
-      return React.Children.only(null);
+      error.name = "SlotError";
+      Error.captureStackTrace?.(error, Slot);
+      throw error;
     }
 
     return null;

package/src/util/types/AsChildProps.ts

@@ -0,0 +1,37 @@
+export type AsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild: true;
+    }
+  | {
+      children: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <MergedComponent data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };

package/src/util/types/index.ts

@@ -1 +1,2 @@
 export type { OverridableComponent } from "./OverridableComponent";
+export type { AsChildProps } from "./AsChildProps";