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

package/src/internal-header/index.ts

@@ -1,8 +1,21 @@
+"use client";
 export {
   default as InternalHeader,
   type InternalHeaderProps,
 } from "./InternalHeader";
-export { type InternalHeaderButtonProps } from "./InternalHeaderButton";
-export { type InternalHeaderTitleProps } from "./InternalHeaderTitle";
-export { type InternalHeaderUserProps } from "./InternalHeaderUser";
-export { type InternalHeaderUserButtonProps } from "./InternalHeaderUserButton";
+export {
+  default as InternalHeaderButton,
+  type InternalHeaderButtonProps,
+} from "./InternalHeaderButton";
+export {
+  default as InternalHeaderTitle,
+  type InternalHeaderTitleProps,
+} from "./InternalHeaderTitle";
+export {
+  default as InternalHeaderUser,
+  type InternalHeaderUserProps,
+} from "./InternalHeaderUser";
+export {
+  default as InternalHeaderUserButton,
+  type InternalHeaderUserButtonProps,
+} from "./InternalHeaderUserButton";

package/src/layout/bleed/Bleed.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
-import { Box, HStack, VStack } from "../..";
 import { BodyLong } from "../../typography";
+import { Box } from "../box";
+import { HStack, VStack } from "../stack";
 import { Bleed } from "./Bleed";
 
 export default {

package/src/layout/bleed/Bleed.tsx

@@ -125,3 +125,5 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     );
   },
 );
+
+export default Bleed;

package/src/layout/bleed/index.ts

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

package/src/layout/box/Box.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta } from "@storybook/react";
 import React, { ReactNode } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
-import { HGrid, HStack, VStack } from "../..";
 import { BodyLong, Detail, Heading } from "../../typography";
+import { HGrid } from "../grid";
+import { HStack, VStack } from "../stack";
 import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
 import { Box } from "./Box";
 

package/src/layout/box/Box.tsx

@@ -145,3 +145,5 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
     );
   },
 );
+
+export default Box;

package/src/layout/box/index.ts

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

package/src/layout/grid/index.ts

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

package/src/layout/page/index.ts

@@ -1,2 +1,3 @@
+"use client";
 export { default as Page, type PageProps } from "./Page";
-export { type PageBlockProps } from "./parts/PageBlock";
+export { default as PageBlock, type PageBlockProps } from "./parts/PageBlock";

package/src/layout/page/parts/PageBlock.tsx

@@ -72,3 +72,5 @@ export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
       );
     },
   );
+
+export default PageBlock;

package/src/layout/responsive/index.ts

@@ -1 +1,2 @@
+"use client";
 export { Show, Hide, type ResponsiveProps } from "./Responsive";

package/src/layout/sidemal-test/Filter.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { InformationSquareIcon } from "@navikt/aksel-icons";
-import { Checkbox, CheckboxGroup } from "../../form";
+import { Checkbox, CheckboxGroup } from "../../form/checkbox";
 import { BodyLong, Detail, Heading } from "../../typography";
 import { Box } from "../box";
 import { HStack, VStack } from "../stack";

package/src/layout/sidemal-test/navno-sidemal.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Box, HGrid, Hide, Show, VStack } from "../..";
+import { Box } from "../box";
+import { HGrid } from "../grid";
+import { Hide, Show } from "../responsive";
+import { VStack } from "../stack";
 import { Content } from "./Content";
 import { FilterCard } from "./Filter";
 import { Header } from "./Header";

package/src/layout/stack/HStack.tsx

@@ -28,3 +28,5 @@ export const HStack: OverridableComponent<HStackProps, HTMLDivElement> =
   forwardRef((props, ref) => {
     return <Stack {...props} ref={ref} direction="row" />;
   });
+
+export default HStack;

package/src/layout/stack/Spacer.tsx

@@ -13,3 +13,5 @@ import React from "react";
  * </HStack>
  */
 export const Spacer = () => <div className="navds-stack__spacer" />;
+
+export default Spacer;

package/src/layout/stack/Stack.tsx

@@ -76,3 +76,5 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       );
     },
   );
+
+export default Stack;

package/src/layout/stack/VStack.tsx

@@ -28,3 +28,5 @@ export const VStack: OverridableComponent<VStackProps, HTMLDivElement> =
   forwardRef((props, ref) => {
     return <Stack {...props} ref={ref} direction="column" wrap={false} />;
   });
+
+export default VStack;

package/src/layout/stack/index.ts

@@ -1,4 +1,5 @@
-export { HStack, type HStackProps } from "./HStack";
-export { VStack, type VStackProps } from "./VStack";
-export { Stack, type StackProps } from "./Stack";
-export { Spacer } from "./Spacer";
+"use client";
+export { default as HStack, type HStackProps } from "./HStack";
+export { default as VStack, type VStackProps } from "./VStack";
+export { default as Stack, type StackProps } from "./Stack";
+export { default as Spacer } from "./Spacer";

package/src/link/index.ts

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

package/src/link/stories/link.stories.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
-import {
-  BodyLong,
-  Alert as DsAlert,
-  ConfirmationPanel as DsConfirmationPanel,
-  Link,
-} from "../..";
+import { Alert } from "../../alert";
+import { ConfirmationPanel } from "../../form/confirmation-panel";
+import { BodyLong } from "../../typography";
+import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";
 
 export default {
@@ -139,37 +137,37 @@ const DemoLink = () => (
 
 export const Icon = () => <DemoLink />;
 
-export const Alert = () => {
+export const InAlert = () => {
   return (
     <div className="colgap">
-      <DsAlert variant="info">
+      <Alert variant="info">
         <DemoLink />
-      </DsAlert>
-      <DsAlert variant="success">
+      </Alert>
+      <Alert variant="success">
         <DemoLink />
-      </DsAlert>
-      <DsAlert variant="warning">
+      </Alert>
+      <Alert variant="warning">
         <DemoLink />
-      </DsAlert>
-      <DsAlert variant="error">
+      </Alert>
+      <Alert variant="error">
         <DemoLink />
-      </DsAlert>
+      </Alert>
     </div>
   );
 };
 
-export const ConfirmationPanel = () => {
+export const InConfirmationPanel = () => {
   return (
     <div className="colgap">
-      <DsConfirmationPanel label="demo">
+      <ConfirmationPanel label="demo">
         <DemoLink />
-      </DsConfirmationPanel>
-      <DsConfirmationPanel checked label="demo">
+      </ConfirmationPanel>
+      <ConfirmationPanel checked label="demo">
         <DemoLink />
-      </DsConfirmationPanel>
-      <DsConfirmationPanel error="demo" label="demo">
+      </ConfirmationPanel>
+      <ConfirmationPanel error="demo" label="demo">
         <DemoLink />
-      </DsConfirmationPanel>
+      </ConfirmationPanel>
     </div>
   );
 };

package/src/link-panel/LinkPanelDescription.tsx

@@ -18,3 +18,5 @@ export const LinkPanelDescription = forwardRef<
     className={cl("navds-link-panel__description", className)}
   />
 ));
+
+export default LinkPanelDescription;

package/src/link-panel/LinkPanelTitle.tsx

@@ -22,3 +22,5 @@ export const LinkPanelTitle: OverridableComponent<
     )}
   />
 ));
+
+export default LinkPanelTitle;

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

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

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

@@ -6,7 +6,8 @@ import {
   HeadHeartIcon,
   RecycleIcon,
 } from "@navikt/aksel-icons";
-import { List, VStack } from "..";
+import { VStack } from "../layout/stack";
+import List from "./List";
 
 export default {
   title: "ds-react/List",

package/src/loader/index.ts

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

package/src/loader/loader.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Loader, LoaderProps } from "..";
+import Loader, { LoaderProps } from "./Loader";
 
 export default {
   title: "ds-react/Loader",

package/src/modal/Modal.context.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { createContext } from "../util/create-context";
+
+interface ModalContextProps {
+  closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  ref: React.RefObject<HTMLDialogElement>;
+}
+
+export const [ModalContextProvider, useModalContext] =
+  createContext<ModalContextProps>({
+    name: "ModalContext",
+    errorMessage: "<Modal.Header> must be used within a <Modal>",
+  });

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";
 
@@ -7,7 +8,7 @@ const Test = () => {
   const [open, setOpen] = useState(true);
 
   return (
-    <Modal open={open}>
+    <Modal open={open} onClose={() => null} aria-label="Test">
       <Modal.Body>
         <p>Foobar</p>
         <Button onClick={() => setOpen(false)}>Close</Button>
@@ -40,7 +41,7 @@ describe("Modal", () => {
 
   test("should toggle body class when using portal", async () => {
     render(
-      <Modal portal open>
+      <Modal portal open onClose={() => null} aria-label="Test">
         <Modal.Header />
       </Modal>,
     );

package/src/modal/Modal.tsx

@@ -3,13 +3,13 @@ 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";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
-import { ModalContext } from "./ModalContext";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
 import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
@@ -98,8 +98,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const portalNode = useFloatingPortalNode({ root: rootElement });
 
     const dateContext = useContext(DateContext);
-    const modalContext = useContext(ModalContext);
-    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);
@@ -185,11 +185,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         onClick={composeEventHandlers(onClick, handleModalClick)}
         aria-labelledby={mergedAriaLabelledBy}
       >
-        <ModalContext.Provider
-          value={{
-            closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
-            ref: modalRef,
-          }}
+        <ModalContextProvider
+          closeHandler={getCloseHandler(modalRef, header, onBeforeClose)}
+          ref={modalRef}
         >
           {header && (
             <ModalHeader>
@@ -208,7 +206,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           )}
 
           {children}
-        </ModalContext.Provider>
+        </ModalContextProvider>
       </dialog>
     );
 

package/src/modal/ModalHeader.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
+import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { ModalContext } from "./ModalContext";
+import { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -15,11 +15,7 @@ export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
-    const context = useContext(ModalContext);
-    if (context === null) {
-      console.error("<Modal.Header> has to be used within a <Modal>");
-      return null;
-    }
+    const context = useModalContext();
 
     return (
       <div {...rest} ref={ref} className={cl("navds-modal__header", className)}>

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

@@ -1,9 +1,11 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { FileIcon } from "@navikt/aksel-icons";
-import { BodyLong, Button, Heading, Tooltip } from "..";
+import { Button } from "../button";
 import { Checkbox, CheckboxGroup } from "../form/checkbox";
 import { VStack } from "../layout/stack";
+import { Tooltip } from "../tooltip";
+import { BodyLong, Heading } from "../typography";
 import Modal from "./Modal";
 
 const meta: Meta<typeof Modal> = {
@@ -24,6 +26,7 @@ export const WithUseRef: StoryFn = () => {
       <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
       <Modal
         open={ref.current ? undefined : true /* initially open */}
+        onClose={() => null}
         ref={ref}
         header={{
           label: "Optional label",
@@ -145,7 +148,7 @@ export const WithUseState: StoryFn = () => {
 WithUseState.storyName = "With useState";
 
 export const EmptyHeader: StoryFn = () => (
-  <Modal open>
+  <Modal open onClose={() => null} aria-label="Modal with empty header">
     <Modal.Header />
     <Modal.Body>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -160,21 +163,37 @@ export const EmptyHeader: StoryFn = () => (
 );
 
 export const Small: StoryFn = () => (
-  <Modal open width="small" header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    width="small"
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
 Small.storyName = "Size = Small";
 
 export const MediumWithPortal: StoryFn = () => (
-  <Modal open portal width="medium" header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    portal
+    width="medium"
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
 MediumWithPortal.storyName = "Size = Medium (with portal)";
 
 export const Large800: StoryFn = () => (
-  <Modal open width={800} header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    width={800}
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
@@ -188,7 +207,9 @@ export const WithTooltip: StoryFn = () => {
       <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
       <Modal
         open={ref.current ? undefined : true /* initially open */}
+        onClose={() => null}
         ref={ref}
+        aria-label="Tooltip test"
       >
         <Modal.Body>
           <div style={{ marginBottom: "1rem" }}>
@@ -206,7 +227,12 @@ export const WithTooltip: StoryFn = () => {
 };
 
 export const WithSrOnlyElement: StoryFn = () => (
-  <Modal open width={300} header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    width={300}
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>
       <VStack gap="16">
         <BodyLong>
@@ -255,6 +281,7 @@ export const ChromaticViewportTesting: StoryFn = () => (
     <style>{`#storybook-root { padding: 0 !important }`}</style>
     <Modal
       open
+      onClose={() => null}
       header={{ heading: "Chromatic Viewports Testing", label: "Test" }}
     >
       <Modal.Body>
@@ -312,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>
+    </>
+  );
+}; */