@navikt/ds-react 5.12.5 → 5.14.0

package/src/tooltip/Tooltip.tsx

@@ -18,14 +18,14 @@ import React, {
   cloneElement,
   forwardRef,
   useContext,
-  useMemo,
   useRef,
-  useState,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
 import { useProvider } from "../provider";
 import { Detail } from "../typography";
-import { mergeRefs, useId } from "../util";
+import { useId } from "../util/hooks";
+import { useControllableState } from "../util/hooks/useControllableState";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -43,6 +43,10 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
    * @note "open"-prop overwrites this
    */
   defaultOpen?: boolean;
+  /**
+   * Change handler for open
+   */
+  onOpenChange?: (open: boolean) => void;
   /**
    * Orientation for tooltip
    * @default "top"
@@ -98,8 +102,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       className,
       arrow: _arrow = true,
       placement: _placement = "top",
-      open: userOpen,
+      open,
       defaultOpen = false,
+      onOpenChange,
       offset: _offset,
       content,
       delay = 150,
@@ -108,9 +113,14 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       maxChar = 80,
       ...rest
     },
-    ref
+    ref,
   ) => {
-    const [open, setOpen] = useState(defaultOpen);
+    const [_open, _setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      value: open,
+      onChange: onOpenChange,
+    });
+
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const modalContext = useContext(ModalContext);
     const providerRootElement = useProvider()?.rootElement;
@@ -131,8 +141,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       refs,
     } = useFloating({
       placement: _placement,
-      open: userOpen ?? open,
-      onOpenChange: (_open) => setOpen(_open),
+      open: _open,
+      onOpenChange: (newState) => _setOpen(newState),
       middleware: [
         offset(_offset ? _offset : _arrow ? 10 : 2),
         shift(),
@@ -156,14 +166,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const ariaId = useId(id);
 
-    const mergedRef = useMemo(
-      () => mergeRefs([ref, refs.setFloating]),
-      [refs.setFloating, ref]
-    );
-    const childMergedRef = useMemo(
-      () => mergeRefs([(children as any).ref, refs.setReference]),
-      [children, refs.setReference]
-    );
+    const mergedRef = useMergeRefs(ref, refs.setFloating);
+    const childMergedRef = useMergeRefs(children.ref, refs.setReference);
 
     if (
       !children ||
@@ -171,15 +175,15 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       (children as any) === React.Fragment
     ) {
       console.error(
-        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>"
+        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>",
       );
       return null;
     }
 
     if (content?.length > maxChar) {
-      (userOpen ?? open) &&
+      _open &&
         console.warn(
-          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`
+          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`,
         );
     }
 
@@ -190,14 +194,13 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           getReferenceProps({
             ...children.props,
             ref: childMergedRef,
-            "aria-describedby":
-              userOpen ?? open
-                ? cl(ariaId, children?.props["aria-describedby"])
-                : children?.props["aria-describedby"],
-          })
+            "aria-describedby": _open
+              ? cl(ariaId, children?.props["aria-describedby"])
+              : children?.props["aria-describedby"],
+          }),
         )}
         <FloatingPortal root={rootElement}>
-          {(userOpen ?? open) && (
+          {_open && (
             <div
               {...getFloatingProps({
                 ...rest,
@@ -213,7 +216,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 className: cl(
                   "navds-tooltip",
                   "navds-detail navds-detail--small",
-                  className
+                  className,
                 ),
               })}
               data-side={placement}
@@ -222,12 +225,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               {keys && (
                 <span className="navds-tooltip__keys">
                   {keys.map((key) => (
-                    <Detail
-                      size="small"
-                      as="kbd"
-                      key={key}
-                      className="navds-tooltip__key"
-                    >
+                    <Detail as="kbd" key={key} className="navds-tooltip__key">
                       {key}
                     </Detail>
                   ))}
@@ -258,7 +256,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         </FloatingPortal>
       </>
     );
-  }
+  },
 );
 
 export default Tooltip;

package/src/tooltip/tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Tooltip, Alert, Button, Search } from "..";
+import { Alert, Button, Search, Tooltip } from "..";
 
 export default {
   title: "ds-react/Tooltip",

package/src/typography/BodyLong.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -51,7 +51,7 @@ export const BodyLong: OverridableComponent<
       textColor,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <Component
       {...rest}
@@ -67,10 +67,10 @@ export const BodyLong: OverridableComponent<
           align,
           visuallyHidden,
           textColor,
-        })
+        }),
       )}
     />
-  )
+  ),
 );
 
 export default BodyLong;

package/src/typography/BodyShort.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -49,7 +49,7 @@ export const BodyShort: OverridableComponent<
       textColor,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <Component
       {...rest}
@@ -65,10 +65,10 @@ export const BodyShort: OverridableComponent<
           align,
           visuallyHidden,
           textColor,
-        })
+        }),
       )}
     />
-  )
+  ),
 );
 
 export default BodyShort;

package/src/typography/Detail.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -51,7 +51,7 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
         textColor,
         ...rest
       },
-      ref
+      ref,
     ) => (
       <Component
         {...rest}
@@ -70,10 +70,10 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
           }),
           {
             "navds-detail--small": size === "small",
-          }
+          },
         )}
       />
-    )
+    ),
   );
 
 export default Detail;

package/src/typography/ErrorMessage.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -49,10 +49,10 @@ export const ErrorMessage: OverridableComponent<
         }),
         {
           "navds-label--small": size === "small",
-        }
+        },
       )}
     />
-  )
+  ),
 );
 
 export default ErrorMessage;

package/src/typography/Heading.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -50,7 +50,7 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
         textColor,
         ...rest
       },
-      ref
+      ref,
     ) => {
       const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
@@ -67,11 +67,11 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
               align,
               visuallyHidden,
               textColor,
-            })
+            }),
           )}
         />
       );
-    }
+    },
   );
 
 export default Heading;

package/src/typography/Ingress.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 
 export interface IngressProps
   extends React.HTMLAttributes<HTMLParagraphElement> {

package/src/typography/Label.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -44,7 +44,7 @@ export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
         textColor,
         ...rest
       },
-      ref
+      ref,
     ) => (
       <Component
         {...rest}
@@ -59,10 +59,10 @@ export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
           }),
           {
             "navds-label--small": size === "small",
-          }
+          },
         )}
       />
-    )
+    ),
   );
 
 export default Label;

package/src/typography/stories/bodylong.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { BodyLong } from "..";
 import { VStack } from "../..";

package/src/typography/stories/bodyshort.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { BodyShort } from "..";
 import { VStack } from "../..";

package/src/typography/stories/detail.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { Detail } from "..";
 import { VStack } from "../..";

package/src/typography/stories/error-message.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { ErrorMessage } from "..";
 import { VStack } from "../..";

package/src/typography/stories/heading.stories.tsx

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-
-import { expect } from "@storybook/jest";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import { default as React } from "react";
 import { Heading } from "..";
 import { VStack } from "../..";

package/src/typography/stories/ingress.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { Ingress } from "..";
 

package/src/typography/stories/label.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { Label } from "..";
 import { VStack } from "../..";

package/src/util/Slot.tsx

@@ -1,6 +1,6 @@
 // https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
 import * as React from "react";
-import mergeRefs from "./mergeRefs";
+import { mergeRefs } from "./hooks/useMergeRefs";
 
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
@@ -21,18 +21,18 @@ export const Slot = React.forwardRef<HTMLElement, SlotProps>(
 
     if (React.Children.count(children) > 1) {
       console.error(
-        "Aksel: Components using 'asChild' expects to recieve a single React element child."
+        "Aksel: Components using 'asChild' expects to recieve a single React element child.",
       );
       return React.Children.only(null);
     }
 
     return null;
-  }
+  },
 );
 
 function mergeProps(
   slotProps: Record<string, any>,
-  childProps: Record<string, any>
+  childProps: Record<string, any>,
 ) {
   // all child props should override
   const overrideProps = { ...childProps };

package/src/util/TextareaAutoSize.tsx

@@ -1,7 +1,9 @@
 /* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { debounce, mergeRefs, useClientLayoutEffect } from "../util";
+import { useClientLayoutEffect } from "../util/hooks";
+import debounce from "./debounce";
+import { useMergeRefs } from "./hooks/useMergeRefs";
 
 type State = {
   outerHeightStyle: number;
@@ -11,7 +13,7 @@ type State = {
 const updateState = (
   prevState: State,
   newState: State,
-  renders: React.MutableRefObject<number>
+  renders: React.MutableRefObject<number>,
 ) => {
   const { outerHeightStyle, overflow } = newState;
   // Need a large enough difference to update the height.
@@ -34,7 +36,7 @@ const updateState = (
         [
           "Textarea: Too many re-renders. The layout is unstable.",
           "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-        ].join("\n")
+        ].join("\n"),
       );
     }
   }
@@ -86,11 +88,13 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       value,
       ...other
     }: TextareaAutosizeProps,
-    ref
+    ref,
   ) => {
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
-    const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
+
+    const handleRef = useMergeRefs(inputRef, ref);
+
     const shadowRef = useRef<HTMLTextAreaElement>(null);
     const renders = useRef(0);
     const [state, setState] = useState<State>({ outerHeightStyle: 0 });
@@ -281,7 +285,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         />
       </>
     );
-  }
+  },
 );
 
 function isEmpty(obj: State) {

package/src/util/__tests__/Slot.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { Button } from "../../button";
 import { Slot } from "../Slot";
@@ -10,7 +10,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={handleClick}>
           <Button>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -21,7 +21,7 @@ describe("Slot", () => {
       render(
         <Slot>
           <Button onClick={handleClick}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -33,7 +33,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={handleClickSlot}>
           <Button onClick={handleClick}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClickSlot).toHaveBeenCalledTimes(1);
@@ -45,7 +45,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={undefined}>
           <Button onClick={handleClick}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -56,7 +56,7 @@ describe("Slot", () => {
       render(
         <Slot onClick={handleClick}>
           <Button onClick={undefined}>Button</Button>
-        </Slot>
+        </Slot>,
       );
       fireEvent.click(screen.getByRole("button"));
       expect(handleClick).toHaveBeenCalledTimes(1);
@@ -68,10 +68,10 @@ describe("Slot", () => {
       render(
         <Slot className="class1">
           <button className="class2 class2--inline">Button</button>
-        </Slot>
+        </Slot>,
       );
       expect(screen.getByRole("button").className).toEqual(
-        "class1 class2 class2--inline"
+        "class1 class2 class2--inline",
       );
     });
 
@@ -79,10 +79,10 @@ describe("Slot", () => {
       render(
         <Slot className={undefined}>
           <button className="class2 class2--inline">Button</button>
-        </Slot>
+        </Slot>,
       );
       expect(screen.getByRole("button").className).toEqual(
-        "class2 class2--inline"
+        "class2 class2--inline",
       );
     });
 
@@ -90,7 +90,7 @@ describe("Slot", () => {
       render(
         <Slot className="class1">
           <button className={undefined}>Button</button>
-        </Slot>
+        </Slot>,
       );
       expect(screen.getByRole("button").className).toEqual("class1");
     });

package/src/util/__tests__/useMedia.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import { useMedia } from "../useMedia";
+import { useMedia } from "../hooks";
 
 function TestComponent({ fallback }: { fallback?: boolean }) {
   const media = useMedia("screen and (min-width: 1024px)", fallback);

package/src/util/composeEventHandlers.ts

@@ -0,0 +1,19 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx#L1 */
+
+/**
+ * Utility to consistently call original eventhandler, often from props and internal eventhandler
+ * @internal
+ */
+export function composeEventHandlers<T extends React.SyntheticEvent>(
+  originalEventHandler?: (event: T) => void,
+  ourEventHandler?: (event: T) => void,
+  { checkForDefaultPrevented = true } = {},
+) {
+  return function handleEvent(event: T) {
+    originalEventHandler?.(event);
+
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}

package/src/util/hooks/index.ts

@@ -0,0 +1,8 @@
+export { useCallbackRef } from "./useCallbackRef";
+export { useClientLayoutEffect } from "./useClientLayoutEffect";
+export { useControllableState } from "./useControllableState";
+export { useMergeRefs } from "./useMergeRefs";
+export { useEventListener } from "./useEventListener";
+export { useId } from "./useId";
+export { useMedia } from "./useMedia";
+export { usePrevious } from "./usePrevious";

package/src/util/hooks/useCallbackRef.ts

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+export function useCallbackRef<T extends (...args: any[]) => any>(
+  callback: T | undefined,
+  deps: React.DependencyList = [],
+) {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useCallback(((...args) => callbackRef.current?.(...args)) as T, deps);
+}

package/src/util/hooks/useClientLayoutEffect.ts

@@ -0,0 +1,5 @@
+import { useLayoutEffect } from "react";
+
+export const useClientLayoutEffect = globalThis?.document
+  ? useLayoutEffect
+  : () => {};