@navikt/ds-react 6.0.0 → 6.1.1

package/src/modal/types.test-d.ts

@@ -0,0 +1,78 @@
+import { expectTypeOf } from "vitest";
+import { ModalProps } from "./types";
+
+test("ModalProps works as intended", () => {
+  expectTypeOf({
+    header: { heading: "Label" },
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    "aria-label": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    "aria-labelledby": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-label": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-labelledby": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-label": "Label",
+    open: true,
+    onClose: () => null,
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    children: "Mangler label",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    open: true,
+    children: "Mangler onClose eller label",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    open: true,
+    "aria-label": "Label",
+    children: "Mangler onClose",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    open: true,
+    onClose: () => null,
+    children: "Mangler label",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    open: true,
+    children: "Mangler onClose",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    "aria-label": "Label",
+    "aria-labelledby": "Label",
+    children: "For mange labels",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-label": "Label",
+    "aria-labelledby": "Label",
+    children: "For mange labels",
+  }).not.toMatchTypeOf<ModalProps>();
+});

package/src/modal/types.ts

@@ -81,11 +81,25 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
 // Require onClose if you use open  &  Require either header, aria-labelledby or aria-label
 export type ModalProps = ModalPropsBase &
   (
-    | { open?: never }
-    | { open: boolean | undefined; onClose: ModalPropsBase["onClose"] }
+    | { onClose: ModalPropsBase["onClose"]; open: boolean | undefined }
+    | { onClose?: ModalPropsBase["onClose"]; open?: never }
   ) &
   (
-    | { header: ModalPropsBase["header"] }
+    | {
+        header: ModalPropsBase["header"];
+        "aria-labelledby": string;
+        "aria-label"?: never;
+      }
+    | {
+        header: ModalPropsBase["header"];
+        "aria-label": string;
+        "aria-labelledby"?: never;
+      }
+    | {
+        header: ModalPropsBase["header"];
+        "aria-labelledby"?: never;
+        "aria-label"?: never;
+      }
     | { "aria-labelledby": string; "aria-label"?: never }
     | { "aria-labelledby"?: never; "aria-label": string }
   );

package/src/pagination/index.ts

@@ -1 +1,6 @@
+"use client";
 export { default as Pagination, type PaginationProps } from "./Pagination";
+export {
+  default as PaginationItem,
+  type PaginationItemProps,
+} from "./PaginationItem";

package/src/pagination/steps.test.ts

@@ -1,15 +1,16 @@
 import faker from "faker";
+import { describe, expect, test } from "vitest";
 import { getSteps } from "./Pagination";
 
 describe("getSteps", () => {
-  it("lists all pages when count is <= 7", () => {
+  test("lists all pages when count is <= 7", () => {
     const count = faker.datatype.number({ min: 1, max: 7 });
     expect(getSteps({ page: 1, count })).toEqual(
       Array.from({ length: count }, (_, i) => i + 1),
     );
   });
 
-  it("has an end ellipsis when count >= 8", () => {
+  test("has an end ellipsis when count >= 8", () => {
     const count = faker.datatype.number({ min: 8 });
     const page = faker.datatype.number({ min: 1, max: 4 });
     expect(
@@ -20,7 +21,7 @@ describe("getSteps", () => {
     ).toEqual([1, 2, 3, 4, 5, "ellipsis", count]);
   });
 
-  it("has a start ellipsis when count - page >= 3", () => {
+  test("has a start ellipsis when count - page >= 3", () => {
     const count = faker.datatype.number({ min: 8 });
     const page = faker.datatype.number({ min: count - 3, max: count });
     expect(
@@ -39,7 +40,7 @@ describe("getSteps", () => {
     ]);
   });
 
-  it("has start & end ellipsis when count is high", () => {
+  test("has start & end ellipsis when count is high", () => {
     const count = faker.datatype.number({ min: 9 });
     const page = faker.datatype.number({ min: 5, max: count - 4 });
     expect(
@@ -50,7 +51,7 @@ describe("getSteps", () => {
     ).toEqual([1, "ellipsis", page - 1, page, page + 1, "ellipsis", count]);
   });
 
-  it("can have a reduced siblingCount", () => {
+  test("can have a reduced siblingCount", () => {
     const count = faker.datatype.number({ min: 7 });
     const page = faker.datatype.number({ min: 4, max: count - 3 });
     expect(
@@ -62,7 +63,7 @@ describe("getSteps", () => {
     ).toEqual([1, "ellipsis", page, "ellipsis", count]);
   });
 
-  it("can have an increased siblingCount", () => {
+  test("can have an increased siblingCount", () => {
     const count = faker.datatype.number({ min: 11 });
     const page = faker.datatype.number({ min: 6, max: count - 5 });
     expect(
@@ -84,7 +85,7 @@ describe("getSteps", () => {
     ]);
   });
 
-  it("can have an reduced boundaryCount", () => {
+  test("can have an reduced boundaryCount", () => {
     const count = faker.datatype.number({ min: 7 });
     const page = faker.datatype.number({ min: 4, max: count - 3 });
     expect(
@@ -96,7 +97,7 @@ describe("getSteps", () => {
     ).toEqual(["ellipsis", page - 1, page, page + 1, "ellipsis"]);
   });
 
-  it("can have an increased boundaryCount", () => {
+  test("can have an increased boundaryCount", () => {
     const count = faker.datatype.number({ min: 11 });
     const page = faker.datatype.number({ min: 6, max: count - 5 });
     expect(

package/src/popover/Popover.test.tsx

@@ -1,5 +1,6 @@
 import { act, fireEvent, screen } from "@testing-library/react";
 import React from "react";
+import { describe, expect, test, vi } from "vitest";
 import { renderWithStyles as render } from "../../tests/utils";
 import Popover from "./Popover";
 
@@ -34,8 +35,8 @@ describe("Popover", () => {
     expect(screen.getByTestId("popover-id")).not.toBeVisible();
   });
 
-  it("outsideClick", async () => {
-    const fn = jest.fn();
+  test("outsideClick", async () => {
+    const fn = vi.fn();
     render(
       <div>
         <Popover
@@ -58,8 +59,8 @@ describe("Popover", () => {
     expect(fn).toHaveBeenCalled();
   });
 
-  it("escape", async () => {
-    const fn = jest.fn();
+  test("escape", async () => {
+    const fn = vi.fn();
     const { container } = render(
       <div>
         <Popover
@@ -83,8 +84,8 @@ describe("Popover", () => {
     expect(fn).toHaveBeenCalled();
   });
 
-  it("keep open on popover-focus", async () => {
-    const fn = jest.fn();
+  test("keep open on popover-focus", async () => {
+    const fn = vi.fn();
     render(
       <div>
         <Popover
@@ -106,8 +107,8 @@ describe("Popover", () => {
     expect(fn).toHaveBeenCalledTimes(0);
   }, 20000);
 
-  it("keep open on popover-click", async () => {
-    const fn = jest.fn();
+  test("keep open on popover-click", async () => {
+    const fn = vi.fn();
     render(
       <div>
         <Popover

package/src/popover/index.ts

@@ -1,2 +1,6 @@
+"use client";
 export { default as Popover, type PopoverProps } from "./Popover";
-export { type PopoverContentProps } from "./PopoverContent";
+export {
+  default as PopoverContent,
+  type PopoverContentProps,
+} from "./PopoverContent";

package/src/popover/popover.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button } from "../button";
-import { Popover } from "../index";
+import Popover from "./Popover";
 
 const placements = [
   "top",

package/src/{overlays/portal → portal}/Portal.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Box } from "../../layout/box";
-import { Provider } from "../../provider";
+import { Box } from "../layout/box";
+import { Provider } from "../provider";
 import { Portal } from "./Portal";
 
 export default {
@@ -12,7 +12,7 @@ export default {
 
 export const Default = () => {
   return (
-    <Box background="surface-neutral-subtle" border>
+    <Box background="surface-neutral-subtle">
       <h1>In regular DOM tree</h1>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
@@ -65,7 +65,10 @@ export const CustomPortalRootFromProvider = () => {
             <p>This is mounted to Tree B, while created inside Tree A</p>
           </Portal>
         </Box>
-        <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+        <Box
+          background="surface-alt-3-subtle"
+          ref={(el) => el && setPortalContainer(el)}
+        >
           <h1>Tree B</h1>
         </Box>
       </Box>
@@ -75,7 +78,7 @@ export const CustomPortalRootFromProvider = () => {
 
 export const AsChild = () => {
   return (
-    <Box background="surface-neutral-subtle" border>
+    <Box background="surface-neutral-subtle">
       <h1>In regular DOM tree</h1>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus

package/src/{overlays/portal → portal}/Portal.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import ReactDOM from "react-dom";
-import { useProvider } from "../../provider";
-import { Slot } from "../../util/Slot";
-import { AsChildProps } from "../../util/types";
+import { useProvider } from "../provider/Provider";
+import { Slot } from "../util/Slot";
+import { AsChildProps } from "../util/types";
 
 interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/portal/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as Portal, type PortalProps } from "./Portal";

package/src/provider/index.ts

@@ -1 +1,2 @@
-export { default as Provider, useProvider } from "./Provider";
+"use client";
+export { default as Provider, type ProviderProps } from "./Provider";

package/src/read-more/index.ts

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

package/src/skeleton/index.ts

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

package/src/skeleton/skeleton.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Skeleton } from ".";
 import { Alert } from "../alert";
 import { Button } from "../button";
-import { Checkbox } from "../form";
+import { Checkbox } from "../form/checkbox";
 import { BodyLong, Heading } from "../typography";
 
 export default {

package/src/stepper/index.ts

@@ -1 +1,3 @@
+"use client";
 export { default as Stepper, type StepperProps } from "./Stepper";
+export { default as StepperStep, type StepperStepProps } from "./Step";

package/src/table/index.ts

@@ -1,9 +1,16 @@
-export { type BodyProps } from "./Body";
-export { type ColumnHeaderProps } from "./ColumnHeader";
-export { type DataCellProps } from "./DataCell";
-export { type ExpandableRowProps } from "./ExpandableRow";
-export { type HeaderProps } from "./Header";
-export { type HeaderCellProps } from "./HeaderCell";
-export { type RowProps } from "./Row";
+"use client";
+export { default as TableBody, type BodyProps } from "./Body";
+export {
+  default as TableColumnHeader,
+  type ColumnHeaderProps,
+} from "./ColumnHeader";
+export { default as TableDataCell, type DataCellProps } from "./DataCell";
+export {
+  default as TableExpandableRow,
+  type ExpandableRowProps,
+} from "./ExpandableRow";
+export { default as TableHeader, type HeaderProps } from "./Header";
+export { default as TableHeaderCell, type HeaderCellProps } from "./HeaderCell";
+export { default as TableRow, type RowProps } from "./Row";
 export { default as Table, type TableProps } from "./Table";
 export { type SortState } from "./types";

package/src/table/stories/table-1.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Table, TableProps } from "../";
 import { Button } from "../../button";
-import { Checkbox } from "../../form";
+import { Checkbox } from "../../form/checkbox";
 import { VStack } from "../../layout/stack";
 import {
   Expandable,

package/src/table/stories/table-2-expandable.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button } from "../../button";
-import { Checkbox } from "../../form";
+import { Checkbox } from "../../form/checkbox";
 import { Link } from "../../link";
 import Table from "../Table";
 

package/src/tabs/Tabs.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
+import { describe, expect, test } from "vitest";
 import { Tabs } from "./Tabs";
 
 const TestTabs = ({

package/src/tabs/index.ts

@@ -1,4 +1,5 @@
-export { type TabProps } from "./Tab";
-export { type TabListProps } from "./TabList";
-export { type TabPanelProps } from "./TabPanel";
+"use client";
+export { default as TabsTab, type TabProps } from "./Tab";
+export { default as TabsList, type TabListProps } from "./TabList";
+export { default as TabsPanel, type TabPanelProps } from "./TabPanel";
 export { default as Tabs, type TabsProps } from "./Tabs";

package/src/tag/index.ts

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

package/src/timeline/index.ts

@@ -1,6 +1,9 @@
-export { default as Timeline } from "./Timeline";
-export type { TimelineProps } from "./Timeline";
-export type { TimelineRowProps } from "./TimelineRow";
-export type { TimelinePinProps } from "./Pin";
-export type { TimelinePeriodProps } from "./period";
-export type { TimelineZoomButtonProps } from "./zoom/ZoomButton";
+"use client";
+export { default as Timeline, type TimelineProps } from "./Timeline";
+export { default as TimelineRow, type TimelineRowProps } from "./TimelineRow";
+export { default as TimelinePin, type TimelinePinProps } from "./Pin";
+export { default as TimelinePeriod, type TimelinePeriodProps } from "./period";
+export {
+  default as TimelineZoomButton,
+  type TimelineZoomButtonProps,
+} from "./zoom/ZoomButton";

package/src/toggle-group/ToggleGroup.stories.tsx

@@ -5,7 +5,7 @@ import {
   EnvelopeOpenIcon,
   InboxUpIcon,
 } from "@navikt/aksel-icons";
-import { ToggleGroup } from "../index";
+import ToggleGroup from "./ToggleGroup";
 
 const meta: Meta<typeof ToggleGroup> = {
   title: "ds-react/ToggleGroup",

package/src/toggle-group/ToggleGroup.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
+import { describe, expect, test } from "vitest";
 import { ToggleGroup } from "./ToggleGroup";
 
 const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (

package/src/toggle-group/ToggleGroup.tsx

@@ -3,7 +3,7 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useState } from "react";
 import { Label } from "../typography";
 import { useId } from "../util/hooks";
-import ToggleItem, { ToggleItemProps } from "./ToggleItem";
+import ToggleItem, { ToggleGroupItemProps } from "./ToggleItem";
 import { ToggleGroupContext } from "./context";
 
 export interface ToggleGroupProps
@@ -45,10 +45,10 @@ interface ToggleGroupComponent
     ToggleGroupProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * @see 🏷️ {@link ToggleItemProps}
+   * @see 🏷️ {@link ToggleGroupItemProps}
    */
   Item: React.ForwardRefExoticComponent<
-    ToggleItemProps & React.RefAttributes<HTMLButtonElement>
+    ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>
   >;
 }
 

package/src/toggle-group/ToggleItem.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef, useContext } from "react";
 import { BodyShort } from "../typography/BodyShort";
 import { ToggleGroupContext } from "./context";
 
-export interface ToggleItemProps
+export interface ToggleGroupItemProps
   extends React.HTMLAttributes<HTMLButtonElement> {
   /**
    * Content
@@ -16,7 +16,7 @@ export interface ToggleItemProps
   value: string;
 }
 
-const ToggleItem = forwardRef<HTMLButtonElement, ToggleItemProps>(
+const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   ({ className, children, ...rest }, ref) => {
     const context = useContext(ToggleGroupContext);
 

package/src/toggle-group/index.ts

@@ -1,2 +1,6 @@
+"use client";
 export { default as ToggleGroup, type ToggleGroupProps } from "./ToggleGroup";
-export { type ToggleItemProps } from "./ToggleItem";
+export {
+  default as ToggleGroupItem,
+  type ToggleGroupItemProps,
+} from "./ToggleItem";

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

@@ -14,7 +14,7 @@ import {
 import cl from "clsx";
 import React, { HTMLAttributes, cloneElement, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
-import Portal from "../overlays/portal/Portal";
+import { Portal } from "../portal";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";

package/src/tooltip/index.ts

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

package/src/tooltip/tooltip.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from "@storybook/react";
 import React from "react";
 import { Alert } from "../alert";
 import { Button } from "../button";
-import { Search } from "../form";
+import { Search } from "../form/search";
 import Tooltip from "./Tooltip";
 
 export default {

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