@navikt/ds-react 6.0.0 → 6.1.0

package/src/link-panel/index.ts

@@ -1,2 +1,10 @@
-export { default as LinkPanel } from "./LinkPanel";
-export { type LinkPanelProps } from "./LinkPanel";
+"use client";
+export { default as LinkPanel, type LinkPanelProps } from "./LinkPanel";
+export {
+  default as LinkPanelTitle,
+  type LinkPanelTitleProps,
+} from "./LinkPanelTitle";
+export {
+  default as LinkPanelDescription,
+  type LinkPanelDescriptionProps,
+} from "./LinkPanelDescription";

package/src/list/index.ts

@@ -1,2 +1,4 @@
+"use client";
 export { default as List } from "./List";
 export type { ListProps } from "./types";
+export { default as ListItem, type ListItemProps } from "./ListItem";

package/src/loader/index.ts

@@ -1,2 +1,3 @@
+"use client";
 export { default as Loader } from "./Loader";
 export { type LoaderProps } from "./Loader";

package/src/modal/Modal.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React, { useState } from "react";
+import { describe, expect, test } from "vitest";
 import { Button, Modal } from "..";
 import { BODY_CLASS } from "./ModalUtils";
 

package/src/modal/Modal.tsx

@@ -3,7 +3,7 @@ import cl from "clsx";
 import React, { forwardRef, useContext, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { DateContext } from "../date/context";
-import { useProvider } from "../provider";
+import { useProvider } from "../provider/Provider";
 import { Detail, Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
@@ -98,8 +98,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const portalNode = useFloatingPortalNode({ root: rootElement });
 
     const dateContext = useContext(DateContext);
-    const modalContext = useModalContext(false);
-    if (modalContext && !dateContext) {
+    const isNested = useModalContext(false) !== undefined;
+    if (isNested && !dateContext) {
       console.error("Modals should not be nested");
     }
 
@@ -130,7 +130,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       }
     }, [modalRef, portalNode, open]);
 
-    useBodyScrollLock(modalRef, portalNode);
+    useBodyScrollLock(modalRef, portalNode, isNested);
 
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);

package/src/modal/ModalUtils.ts

@@ -18,8 +18,10 @@ export const BODY_CLASS = "navds-modal__document-body";
 export function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement>,
   portalNode: HTMLElement | null,
+  isNested: boolean,
 ) {
   React.useEffect(() => {
+    if (isNested) return;
     if (!modalRef.current || !portalNode) return; // We check both to avoid running this twice when not using portal
     if (modalRef.current.open) document.body.classList.add(BODY_CLASS); // In case `open` is true initially
 
@@ -35,5 +37,5 @@ export function useBodyScrollLock(
       observer.disconnect();
       document.body.classList.remove(BODY_CLASS); // In case modal is unmounted before it's closed
     };
-  }, [modalRef, portalNode]);
+  }, [modalRef, portalNode, isNested]);
 }

package/src/modal/index.ts

@@ -1,5 +1,6 @@
+"use client";
 export { default as Modal } from "./Modal";
-export { type ModalBodyProps } from "./ModalBody";
-export { type ModalFooterProps } from "./ModalFooter";
-export { type ModalHeaderProps } from "./ModalHeader";
+export { default as ModalBody, type ModalBodyProps } from "./ModalBody";
+export { default as ModalFooter, type ModalFooterProps } from "./ModalFooter";
+export { default as ModalHeader, type ModalHeaderProps } from "./ModalHeader";
 export { type ModalProps } from "./types";

package/src/modal/modal.stories.tsx

@@ -339,3 +339,57 @@ ChromaticViewportTesting.parameters = {
     },
   },
 };
+
+// For testing TS error messages:
+
+/* const PropTypeTest = () => {
+  return (
+    <>
+      <Modal header={{ heading: "Label" }}>OK</Modal>
+
+      <Modal header={{ heading: "Label" }} aria-label="Label">
+        OK
+      </Modal>
+
+      <Modal header={{ heading: "Label" }} aria-labelledby="Label">
+        OK
+      </Modal>
+
+      <Modal aria-label="Label">OK</Modal>
+
+      <Modal aria-labelledby="Label">OK</Modal>
+
+      <Modal aria-label="Label" open onClose={() => null}>
+        OK
+      </Modal>
+
+      <Modal>Mangler label</Modal>
+
+      <Modal open>Mangler onClose eller label</Modal>
+
+      <Modal open aria-label="Label">
+        Mangler onClose
+      </Modal>
+
+      <Modal open onClose={() => null}>
+        Mangler label
+      </Modal>
+
+      <Modal header={{ heading: "Label" }} open>
+        Mangler onClose
+      </Modal>
+
+      <Modal
+        header={{ heading: "Label" }}
+        aria-label="Label"
+        aria-labelledby="Label"
+      >
+        For mange labels
+      </Modal>
+
+      <Modal aria-label="Label" aria-labelledby="Label">
+        For mange labels
+      </Modal>
+    </>
+  );
+}; */

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";