@navikt/ds-react 6.0.0-alpha.7 → 6.1.0

package/src/tooltip/Tooltip.test.tsx

@@ -1,6 +1,7 @@
 import { act, fireEvent, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
+import { describe, expect, test } from "vitest";
 import {
   focusVisible,
   renderWithStyles as render,
@@ -64,7 +65,7 @@ describe("Tooltip", () => {
     expect(screen.queryByRole("tooltip")).toBeNull();
   });
 
-  it("delay", async () => {
+  test("delay", async () => {
     const user = userEvent.setup();
 
     render(
@@ -85,7 +86,7 @@ describe("Tooltip", () => {
     expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
-  it("outsideClick", async () => {
+  test("outsideClick", async () => {
     render(
       <div>
         <Tooltip content="Hello World">
@@ -108,7 +109,7 @@ describe("Tooltip", () => {
     expect(screen.queryByRole("tooltip")).toBeNull();
   });
 
-  it("keep open on tooltip-click", async () => {
+  test("keep open on tooltip-click", async () => {
     render(
       <div>
         <Tooltip content="Hello World">
@@ -128,7 +129,7 @@ describe("Tooltip", () => {
     expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
-  it("close on focus-loss", async () => {
+  test("close on focus-loss", async () => {
     render(
       <div>
         <Tooltip content="Hello World">

package/src/tooltip/Tooltip.tsx

@@ -12,15 +12,9 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, {
-  HTMLAttributes,
-  cloneElement,
-  forwardRef,
-  useContext,
-  useRef,
-} from "react";
-import { ModalContext } from "../modal/ModalContext";
-import Portal from "../overlays/portal/Portal";
+import React, { HTMLAttributes, cloneElement, forwardRef, useRef } from "react";
+import { useModalContext } from "../modal/Modal.context";
+import { Portal } from "../portal";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -121,7 +115,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     });
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
-    const modalContext = useContext(ModalContext);
+    const modalContext = useModalContext(false);
     const rootElement = modalContext ? modalContext.ref.current : undefined;
 
     const {
@@ -195,7 +189,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               : children?.props["aria-describedby"],
           }),
         )}
-        <Portal rootElement={rootElement}>
+        <Portal rootElement={rootElement} asChild>
           {_open && (
             <div
               {...getFloatingProps({

package/src/tooltip/index.ts

@@ -1 +1,2 @@
+"use client";
 export { default as Tooltip, type TooltipProps } from "./Tooltip";

package/src/tooltip/tooltip.stories.tsx

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

package/src/typography/index.ts

@@ -1,3 +1,4 @@
+"use client";
 export { type BodyLongProps, default as BodyLong } from "./BodyLong";
 export { type BodyShortProps, default as BodyShort } from "./BodyShort";
 export { default as Detail, type DetailProps } from "./Detail";

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

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { BodyLong } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import BodyLong from "../BodyLong";
 
 const meta = {
   title: "ds-react/Typography/BodyLong",
   component: BodyLong,
   decorators: [(story) => <div style={{ maxWidth: "700px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof BodyLong>;
 
 export default meta;
@@ -17,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 const lorem =
   "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.";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -162,3 +165,46 @@ export const OverrideTag: Story = {
     expect(legendBodyLong.tagName).toEqual("LEGEND");
   },
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Large</h2>
+        <h3>Size</h3>
+        {SizeLarge.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingLarge.render?.(...props)}
+      </div>
+      <div>
+        <h2>Medium</h2>
+        <h3>Size</h3>
+        {SizeMedium.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingMedium.render?.(...props)}
+      </div>
+      <div>
+        <h2>Small</h2>
+        <h3>Size</h3>
+        {SizeSmall.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingSmall.render?.(...props)}
+      </div>
+      <div>
+        <h2>Colors</h2>
+        {Colors.render?.(...props)}
+      </div>
+      <div>
+        <h2>Align</h2>
+        {Align.render?.(...props)}
+      </div>
+      <div>
+        <h2>Override Tag</h2>
+        {OverrideTag.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

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

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { BodyShort } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import { BodyShort } from "../BodyShort";
 
 const meta = {
   title: "ds-react/Typography/BodyShort",
   component: BodyShort,
-  decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
+  decorators: [(story) => <div style={{ maxWidth: "250px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof BodyShort>;
 
 export default meta;
@@ -16,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -161,3 +164,46 @@ export const OverrideTag: Story = {
     expect(legendBodyShort.tagName).toEqual("LEGEND");
   },
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Large</h2>
+        <h3>Size</h3>
+        {SizeLarge.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingLarge.render?.(...props)}
+      </div>
+      <div>
+        <h2>Medium</h2>
+        <h3>Size</h3>
+        {SizeMedium.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingMedium.render?.(...props)}
+      </div>
+      <div>
+        <h2>Small</h2>
+        <h3>Size</h3>
+        {SizeSmall.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingSmall.render?.(...props)}
+      </div>
+      <div>
+        <h2>Colors</h2>
+        {Colors.render?.(...props)}
+      </div>
+      <div>
+        <h2>Align</h2>
+        {Align.render?.(...props)}
+      </div>
+      <div>
+        <h2>Override Tag</h2>
+        {OverrideTag.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

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

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { Detail } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Detail from "../Detail";
 
 const meta = {
   title: "ds-react/Typography/Detail",
   component: Detail,
   decorators: [(story) => <div style={{ maxWidth: "200px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Detail>;
 
 export default meta;
@@ -16,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 const lorem = "Du må gjøre en filtrering for å se brukere i listen.";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -85,3 +88,29 @@ export const OverrideTag: Story = {
     expect(legendDetail.tagName).toEqual("LEGEND");
   },
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Spacing</h2>
+        {Spacing.render?.(...props)}
+      </div>
+      <div>
+        <h2>Colors</h2>
+        {Colors.render?.(...props)}
+      </div>
+      <div>
+        <h2>Align</h2>
+        {Align.render?.(...props)}
+      </div>
+      <div>
+        <h2>Override Tag</h2>
+        {OverrideTag.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

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

@@ -1,12 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { ErrorMessage } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import ErrorMessage from "../ErrorMessage";
 
 const meta = {
   title: "ds-react/Typography/ErrorMessage",
   component: ErrorMessage,
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof ErrorMessage>;
 
 export default meta;
@@ -16,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 const lorem =
   "Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -90,3 +93,31 @@ export const OverrideTag: Story = {
     expect(legendErrorMessage.tagName).toEqual("LEGEND");
   },
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Medium</h2>
+        <h3>Size</h3>
+        {SizeMedium.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingMedium.render?.(...props)}
+      </div>
+      <div>
+        <h2>Small</h2>
+        <h3>Size</h3>
+        {SizeSmall.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingSmall.render?.(...props)}
+      </div>
+      <div>
+        <h2>Override Tag</h2>
+        {OverrideTag.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

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

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import { default as React } from "react";
-import { Heading } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Heading from "../Heading";
 
 const meta = {
   title: "ds-react/Typography/Heading",
   component: Heading,
   decorators: [(story) => <div style={{ maxWidth: "300px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Heading>;
 
 export default meta;
@@ -16,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 const lorem = "Hva kan vi hjelpe deg med?";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -139,3 +142,29 @@ export const OverrideTag: Story = {
     expect(legendHeading.tagName).toEqual("LEGEND");
   },
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Sizes</h2>
+        {Sizes.render?.(...props)}
+      </div>
+      <div>
+        <h2>Colors</h2>
+        {Colors.render?.(...props)}
+      </div>
+      <div>
+        <h2>Align</h2>
+        {Align.render?.(...props)}
+      </div>
+      <div>
+        <h2>Override Tag</h2>
+        {OverrideTag.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

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

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 import React from "react";
-import { Label } from "..";
-import { VStack } from "../..";
+import { VStack } from "../../layout/stack";
+import Label from "../Label";
 
 const meta = {
   title: "ds-react/Typography/Label",
   component: Label,
   decorators: [(story) => <div style={{ maxWidth: "400px" }}>{story()}</div>],
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof Label>;
 
 export default meta;
@@ -17,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 const lorem =
   "Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon";
 
-export const Default: Story = {
+export const Controls: Story = {
   args: {
     spacing: false,
     children: lorem,
@@ -95,3 +98,35 @@ export const OverrideTag: Story = {
     expect(legendLabel.tagName).toEqual("LEGEND");
   },
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Medium</h2>
+        <h3>Size</h3>
+        {SizeMedium.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingMedium.render?.(...props)}
+      </div>
+      <div>
+        <h2>Small</h2>
+        <h3>Size</h3>
+        {SizeSmall.render?.(...props)}
+        <h3>Spacing</h3>
+        {SpacingSmall.render?.(...props)}
+      </div>
+      <div>
+        <h2>Colors</h2>
+        {Colors.render?.(...props)}
+      </div>
+      <div>
+        <h2>Override Tag</h2>
+        {OverrideTag.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

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

@@ -1,12 +1,13 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
+import { describe, expect, test, vi } from "vitest";
 import { Button } from "../../button";
 import { Slot } from "../Slot";
 
 describe("Slot", () => {
   describe("should handle forwarning events", () => {
     test("Should call onClick when event is on Slot", async () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(
         <Slot onClick={handleClick}>
           <Button>Button</Button>
@@ -17,7 +18,7 @@ describe("Slot", () => {
     });
 
     test("Should call onClick when event is on Child", async () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(
         <Slot>
           <Button onClick={handleClick}>Button</Button>
@@ -28,8 +29,8 @@ describe("Slot", () => {
     });
 
     test("Should call onClick when event is on Child and Slot", async () => {
-      const handleClickSlot = jest.fn();
-      const handleClick = jest.fn();
+      const handleClickSlot = vi.fn();
+      const handleClick = vi.fn();
       render(
         <Slot onClick={handleClickSlot}>
           <Button onClick={handleClick}>Button</Button>
@@ -41,7 +42,7 @@ describe("Slot", () => {
     });
 
     test("Should call onClick when event is on Child and undefined on Slot", async () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(
         <Slot onClick={undefined}>
           <Button onClick={handleClick}>Button</Button>
@@ -52,7 +53,7 @@ describe("Slot", () => {
     });
 
     test("Should call onClick when event is on Slot and undefined on Child", async () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       render(
         <Slot onClick={handleClick}>
           <Button onClick={undefined}>Button</Button>

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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
+import { describe, expect, test } from "vitest";
 import { useMedia } from "../hooks";
 
 function TestComponent({ fallback }: { fallback?: boolean }) {

package/src/util/create-context.tsx

@@ -6,6 +6,7 @@
  */
 import React, {
   createContext as createReactContext,
+  forwardRef,
   useContext as useReactContext,
 } from "react";
 
@@ -19,11 +20,6 @@ export interface CreateContextOptions<T> {
 
 type ProviderProps<T> = T & { children: React.ReactNode };
 
-export type CreateContextReturn<T> = [
-  (contextValues: ProviderProps<T>) => React.JSX.Element,
-  () => T,
-];
-
 function getErrorMessage(hook: string, provider: string) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
 }
@@ -39,17 +35,30 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
 
   const Context = createReactContext<T | undefined>(defaultValue);
 
-  function Provider({ children, ...context }: ProviderProps<T>) {
-    // Only re-memoize when prop values change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const value = React.useMemo(() => context, Object.values(context)) as T;
-    return <Context.Provider value={value}>{children}</Context.Provider>;
-  }
+  /**
+   * We use forwardRef to allow `ref` to be used as a regular context value
+   * @see https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components
+   */
+  const Provider = forwardRef(
+    ({ children, ...context }: ProviderProps<T>, ref) => {
+      // Only re-memoize when prop values change
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const value = React.useMemo(() => context, Object.values(context)) as T;
 
-  function useContext() {
+      return (
+        <Context.Provider value={ref ? { ...value, ref } : value}>
+          {children}
+        </Context.Provider>
+      );
+    },
+  );
+
+  function useContext<S extends boolean = true>(
+    strict: S = true as S,
+  ): Context<S, T> {
     const context = useReactContext(Context);
 
-    if (!context) {
+    if (!context && strict) {
       const error = new Error(
         errorMessage ?? getErrorMessage(hookName, providerName),
       );
@@ -58,10 +67,12 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
       throw error;
     }
 
-    return context;
+    return context as Context<S, T>;
   }
 
   Context.displayName = name;
 
-  return [Provider, useContext] as CreateContextReturn<T>;
+  return [Provider, useContext] as const;
 }
+
+type Context<S, T> = S extends true ? T : T | undefined;

package/src/util/debounce.ts

@@ -1,3 +1,4 @@
+"use client";
 // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
 export default function debounce(func, wait = 166) {
   let timeout;

package/src/util/hooks/useClientLayoutEffect.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useLayoutEffect } from "react";
 
 export const useClientLayoutEffect = globalThis?.document

package/src/util/hooks/useEventListener.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 
 export interface ListenerT {

package/src/util/hooks/useId.ts

@@ -1,3 +1,5 @@
+"use client";
+
 //https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/useId.ts
 import React, { useEffect, useState } from "react";
 

package/src/util/index.ts

@@ -1,6 +1,6 @@
-export type * from "./types";
+export type { OverridableComponent } from "./types";
 export { default as debounce } from "./debounce";
-export * from "./omit";
+export { omit } from "./omit";
 export { useClientLayoutEffect } from "./hooks/useClientLayoutEffect";
 export { useEventListener } from "./hooks/useEventListener";
 export { useId } from "./hooks/useId";

package/src/util/omit.ts

@@ -1,10 +1,14 @@
-export const omit = (obj: object, props: string[]) =>
-  Object.entries(obj)
-    .filter(([key]) => !props.includes(key))
+export function omit<T extends object, K extends keyof T>(
+  obj: T,
+  props: K[],
+): Omit<T, K> {
+  return Object.entries(obj)
+    .filter(([key]) => !props.includes(key as K))
     .reduce(
       (prevObj, [key, value]) => ({
         ...prevObj,
         [key]: value,
       }),
-      {},
+      {} as Omit<T, K>,
     );
+}