@navikt/ds-react 4.12.1 → 5.0.0

package/src/modal/index.ts

@@ -1,2 +1,4 @@
 export { default as Modal, type ModalProps } from "./Modal";
-export { type ModalContentProps } from "./ModalContent";
+export { type ModalHeaderProps } from "./ModalHeader";
+export { type ModalBodyProps } from "./ModalBody";
+export { type ModalFooterProps } from "./ModalFooter";

package/src/modal/modal.stories.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useEffect, useState } from "react";
+import React, { useRef, useState } from "react";
+import { FileIcon } from "@navikt/aksel-icons";
 import { BodyLong, Button, Heading } from "..";
 import Modal from "./Modal";
 
@@ -7,78 +7,161 @@ export default {
   title: "ds-react/Modal",
   component: Modal,
   parameters: {
-    chromatic: { delay: 1000 },
+    chromatic: { pauseAnimationAtEnd: true },
   },
 };
 
-export const Default = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
+export const WithUseRef = () => {
+  const ref = useRef<HTMLDialogElement>(null);
+  const ref2 = useRef<HTMLDialogElement>(null);
 
-    useEffect(() => {
-      Modal.setAppElement?.("#root");
-    }, []);
+  return (
+    <>
+      <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
+      <Modal
+        open={ref.current ? undefined : true /* initially open */}
+        ref={ref}
+        header={{
+          label: "Optional label",
+          icon: <FileIcon aria-hidden />,
+          heading: "Title",
+          size: "small",
+        }}
+      >
+        <Modal.Body>
+          <BodyLong spacing>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </BodyLong>
 
-    return (
-      <>
-        <Button onClick={() => setOpen(true)}>Open Modal</Button>
-        <Modal
-          open={open}
-          onClose={() => setOpen(false)}
-          aria-labelledby="header123"
-          {...props}
-        >
-          <Modal.Content>
-            <Heading spacing id="header123" level="1" size="large">
-              Header
-            </Heading>
-            <Heading spacing level="2" size="medium">
-              Header
-            </Heading>
-            <BodyLong>
-              Voluptate laboris mollit dolore qui. Magna elit.
-            </BodyLong>
-          </Modal.Content>
-        </Modal>
-      </>
-    );
-  },
+          {/* Nested modal */}
+          <Modal
+            ref={ref2}
+            onBeforeClose={() =>
+              window.confirm("Are you sure you want to close the modal?")
+            }
+            aria-labelledby="heading123"
+          >
+            <Modal.Header>
+              <Heading size="medium" level="2" id="heading123">
+                Custom header
+              </Heading>
+            </Modal.Header>
+            <Modal.Body>
+              Nesting modals is not recommended, but works in most cases.
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onClick={() => ref2.current?.close()}>
+                Close w/o confirm
+              </Button>
+            </Modal.Footer>
+          </Modal>
 
-  args: {
-    shouldCloseOnOverlayClick: true,
-    closeButton: true,
-  },
+          <BodyLong>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </BodyLong>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button>Primary</Button>
+          <Button variant="secondary" onClick={() => ref2.current?.showModal()}>
+            Secondary
+          </Button>
+          <Button variant="tertiary">Tertiary</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
 };
+WithUseRef.storyName = "With useRef";
 
-export const ParentSelector = () => {
+export const WithUseState = () => {
   const [open, setOpen] = useState(true);
-
-  useEffect(() => {
-    Modal.setAppElement?.("#root");
-  }, []);
-
-  const parentEl = document.getElementById("custom-container");
+  const [open2, setOpen2] = useState(false);
 
   return (
-    <>
-      <div id="custom-container" />
-      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+    <div style={{ minHeight: "1000px", display: "flex", alignItems: "center" }}>
+      <div style={{ display: "flex", gap: "1em" }}>
+        <Button variant="secondary">Button</Button>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+        <Button variant="secondary">Button</Button>
+      </div>
       <Modal
+        header={{ heading: "Simple header" }}
         open={open}
         onClose={() => setOpen(false)}
-        aria-labelledby="header123"
-        parentSelector={parentEl ? () => parentEl : undefined}
+        width={400}
       >
-        <Modal.Content>
-          <Heading spacing id="header123" level="1" size="large">
-            Header
-          </Heading>
-          <Heading spacing level="2" size="medium">
-            Header
-          </Heading>
-          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
-        </Modal.Content>
+        <Modal.Body>
+          This modal has width set to 400.
+          {/* Nested modal */}
+          <Modal
+            open={open2}
+            onClose={(e) => {
+              e.stopPropagation(); // onClose wil propagate to parent modal if not stopped
+              setOpen2(false);
+            }}
+            aria-label="Nested modal"
+            width={800}
+          >
+            <Modal.Body>
+              <BodyLong spacing>
+                Nesting modals is not recommended, but works in most cases. This
+                one does not have header or footer, but is bigger than the
+                parent modal.
+              </BodyLong>
+              <BodyLong spacing>Width is set to 800.</BodyLong>
+              <Button onClick={() => setOpen2(false)}>Close</Button>
+            </Modal.Body>
+          </Modal>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={() => setOpen2(true)}>Primary</Button>
+          <Button variant="secondary" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+        </Modal.Footer>
       </Modal>
-    </>
+    </div>
   );
 };
+WithUseState.storyName = "With useState";
+
+export const EmptyHeader = () => (
+  <div style={{ minWidth: "800px", minHeight: "600px" } /* For Chromatic */}>
+    <Modal open>
+      <Modal.Header />
+      <Modal.Body>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Modal.Body>
+    </Modal>
+  </div>
+);
+
+export const Small = () => (
+  <Modal open width="small" header={{ heading: "Simple header" }}>
+    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
+  </Modal>
+);
+
+export const Medium = () => (
+  <Modal open width="medium" header={{ heading: "Simple header" }}>
+    <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
+  </Modal>
+);

package/src/popover/Popover.tsx

@@ -16,10 +16,12 @@ import React, {
   useCallback,
   useMemo,
   useRef,
+  useContext,
 } from "react";
 import { mergeRefs } from "..";
 import { useClientLayoutEffect, useEventListener } from "../util";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
+import { ModalContext } from "../modal/ModalContext";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -117,13 +119,15 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onClose,
       placement = "top",
       offset,
-      strategy: userStrategy = "absolute",
+      strategy: userStrategy,
       bubbleEscape = false,
       ...rest
     },
     ref
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
+    const isInModal = useContext(ModalContext) !== null;
+    const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
 
     const {
       x,
@@ -135,7 +139,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement: flPlacement,
       middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
     } = useFloating({
-      strategy: userStrategy,
+      strategy: chosenStrategy,
       placement,
       open: open,
       onOpenChange: onClose,

package/src/provider/Provider.tsx

@@ -2,13 +2,9 @@ import React, { createContext, useContext } from "react";
 
 export interface ProviderContextType {
   /**
-   * Global root-element to attach portals to (Modal, Tooltip)
+   * Global root-element to attach portals to (Tooltip)
    */
   rootElement?: HTMLElement;
-  /**
-   * Global config for appElement (Modal)
-   */
-  appElement?: HTMLElement;
 }
 
 export const ProviderContext = createContext<ProviderContextType | undefined>(
@@ -18,7 +14,6 @@ export const ProviderContext = createContext<ProviderContextType | undefined>(
 export interface ProviderProps {
   children?: React.ReactNode;
   rootElement?: HTMLElement;
-  appElement?: HTMLElement;
 }
 
 export const useProvider = () => useContext(ProviderContext);

package/src/table/DataCell.tsx

@@ -1,7 +1,6 @@
-import React, { forwardRef, useContext } from "react";
+import React, { forwardRef } from "react";
 import cl from "clsx";
 import { BodyShort } from "..";
-import { TableContext } from "./Table";
 
 export interface DataCellProps
   extends React.TdHTMLAttributes<HTMLTableCellElement> {
@@ -19,8 +18,6 @@ export interface DataCellType
 
 export const DataCell: DataCellType = forwardRef(
   ({ className, children = "", align, ...rest }, ref) => {
-    const context = useContext(TableContext);
-
     return (
       <BodyShort
         as="td"
@@ -28,7 +25,6 @@ export const DataCell: DataCellType = forwardRef(
         className={cl("navds-table__data-cell", className, {
           [`navds-table__data-cell--align-${align}`]: align,
         })}
-        size={context?.size}
         {...rest}
       >
         {children}

package/src/table/ExpandableRow.tsx

@@ -96,6 +96,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
             "navds-table__expandable-row--open": isOpen,
             "navds-table__expandable-row--expansion-disabled":
               expansionDisabled,
+            "navds-table__expandable-row--clickable": expandOnRowClick,
           })}
           onClick={(e) => {
             !expansionDisabled && expandOnRowClick && onRowClick(e);
@@ -110,8 +111,8 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           >
             {!expansionDisabled && (
               <button
-                type="button"
                 className="navds-table__toggle-expand-button"
+                type="button"
                 aria-controls={id}
                 aria-expanded={isOpen}
                 onClick={expansionHandler}

package/src/table/HeaderCell.tsx

@@ -1,6 +1,5 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { TableContext } from "./Table";
+import React, { forwardRef } from "react";
 
 export interface HeaderCellProps
   extends React.ThHTMLAttributes<HTMLTableCellElement> {
@@ -19,14 +18,11 @@ export interface HeaderCellType
 
 export const HeaderCell: HeaderCellType = forwardRef(
   ({ className, children, align, ...rest }, ref) => {
-    const context = useContext(TableContext);
-
     return (
       <th
         ref={ref}
         className={cl("navds-table__header-cell", "navds-label", className, {
           [`navds-table__header-cell--align-${align}`]: align,
-          "navds-label--small": context?.size === "small",
         })}
         {...rest}
       >

package/src/table/Table.tsx

@@ -16,10 +16,10 @@ export interface SortState {
 export interface TableProps
   extends React.TableHTMLAttributes<HTMLTableElement> {
   /**
-   * Changes padding
+   * Changes padding around Cells
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
   /**
    * Zebra striped table
    * @default false
@@ -49,7 +49,6 @@ export interface TableType
 }
 
 export interface TableContextProps {
-  size: "medium" | "small";
   onSortChange?: (sortKey: string) => void;
   sort?: SortState;
 }
@@ -100,7 +99,7 @@ export const Table = forwardRef(
     },
     ref
   ) => (
-    <TableContext.Provider value={{ size, onSortChange, sort }}>
+    <TableContext.Provider value={{ onSortChange, sort }}>
       <table
         {...rest}
         ref={ref}

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

@@ -36,8 +36,44 @@ export const Expandable = () => {
   );
 };
 
+export const ExpandableLarge = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Table size="large">
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell />
+          {columns.map(({ key, name }) => (
+            <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {data.slice(0, 1).map((data) => (
+          <Table.ExpandableRow content={data.content} key={data.name}>
+            {columns.map(({ key }) => (
+              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+            ))}
+          </Table.ExpandableRow>
+        ))}
+        {data.slice(1, 2).map((data) => (
+          <Table.ExpandableRow
+            content={data.content}
+            key={data.name}
+            open={open}
+            onOpenChange={(open) => setOpen(open)}
+          >
+            {columns.map(({ key }) => (
+              <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+            ))}
+          </Table.ExpandableRow>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};
+
 export const ExpandableSmall = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [open, setOpen] = useState(false);
   return (
     <Table size="small">

package/src/table/stories/table.stories.tsx

@@ -77,7 +77,10 @@ export const NoShadeOnHover = () => <TableComponent shadeOnHover={false} />;
 export const ZebraNoShadeOnHover = () => (
   <TableComponent zebraStripes shadeOnHover={false} />
 );
-export const Small = () => <TableComponent size="small" />;
+export const SizeLarge = () => <TableComponent size="large" />;
+export const SizeMedium = () => <TableComponent size="medium" />;
+export const SizeSmall = () => <TableComponent size="small" />;
+
 export const Buttons = () => <TableComponent size="small" button />;
 
 export const WithDivs = () => {

package/esm/modal/ModalContent.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Modal.Content content
-     */
-    children: React.ReactNode;
-}
-export type ModalContentType = React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const ModalContent: ModalContentType;
-export default ModalContent;

package/esm/modal/ModalContent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../src/modal/ModalContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AActB,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC/B,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/src/modal/ModalContent.tsx

@@ -1,26 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "clsx";
-
-export interface ModalContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Modal.Content content
-   */
-  children: React.ReactNode;
-}
-
-export type ModalContentType = React.ForwardRefExoticComponent<
-  ModalContentProps & React.RefAttributes<HTMLDivElement>
->;
-
-const ModalContent: ModalContentType = forwardRef(
-  ({ className, ...rest }, ref) => (
-    <div
-      {...rest}
-      ref={ref}
-      className={cl("navds-modal__content", className)}
-    />
-  )
-);
-
-export default ModalContent;