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

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

@@ -1,5 +1,4 @@
-export interface ModalProps
-  extends React.DialogHTMLAttributes<HTMLDialogElement> {
+interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * Content for the header. Alteratively you can use <Modal.Header> instead for more control,
    * but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
@@ -39,7 +38,7 @@ export interface ModalProps
    * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
    * @returns Whether to close the modal
    */
-  onBeforeClose?: () => boolean | void;
+  onBeforeClose?: () => boolean;
   /**
    * *Sometimes** called when the user presses the Esc key.
    * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
@@ -66,9 +65,41 @@ export interface ModalProps
    */
   className?: string;
   /**
-   * Sets aria-labelledby on modal.
+   * ID of the element that labels the modal.
    * No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
    * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    */
   "aria-labelledby"?: string;
+  /**
+   * String value that labels the modal.
+   * No need to set this if the `header` prop is used.
+   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
+   */
+  "aria-label"?: string;
 }
+
+// Require onClose if you use open  &  Require either header, aria-labelledby or aria-label
+export type ModalProps = ModalPropsBase &
+  (
+    | { onClose: ModalPropsBase["onClose"]; open: boolean | undefined }
+    | { onClose?: ModalPropsBase["onClose"]; open?: never }
+  ) &
+  (
+    | {
+        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/panel/Panel.tsx

@@ -2,6 +2,9 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
 
+/**
+ * @deprecated Use Box with padding and border instead
+ */
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Panel content
@@ -17,23 +20,13 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
 export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 
 /**
- * A component that displays a bordered panel with heading and body.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/panel)
- * @see 🏷️ {@link PanelProps}
- * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
- *
- * @example
- * ```jsx
- * <Panel border>
- *   <Heading spacing level="2" size="large">
- *     Søk om økonomisk sosialhjelp
- *   </Heading>
- *   <BodyLong>
- *     Du kan søke om det du trenger økonomisk støtte til.
- *   </BodyLong>
- * </Panel>
+ * @deprecated
+ * Use Box with padding and border instead
+ * ```
+ * <Box padding="4" borderRadius="small" />
+ * <Box padding="4" borderWidth="1" borderRadius="small" />
  * ```
+ * Component will be removed in a future major release
  */
 export const Panel: PanelType = forwardRef(
   (

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/Popover.tsx

@@ -18,7 +18,7 @@ import React, {
   useRef,
 } from "react";
 import { DateContext } from "../date/context";
-import { ModalContext } from "../modal/ModalContext";
+import { useModalContext } from "../modal/Modal.context";
 import { useClientLayoutEffect, useEventListener } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -126,7 +126,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     ref,
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
-    const isInModal = useContext(ModalContext) !== null;
+    const isInModal = useModalContext(false) !== undefined;
     const isInDatepicker = useContext(DateContext) !== null;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
     const chosenFlip = isInDatepicker ? false : _flip;

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/stepper/stepper.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography";
 import Stepper from "./Stepper";
 
 const meta: Meta<typeof Stepper> = {

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