@navikt/ds-react 4.12.1 → 5.0.0

package/cjs/popover/Popover.js

@@ -44,6 +44,7 @@ const react_2 = __importStar(require("react"));
 const __1 = require("..");
 const util_1 = require("../util");
 const PopoverContent_1 = __importDefault(require("./PopoverContent"));
+const ModalContext_1 = require("../modal/ModalContext");
 /**
  * A component that displays a popover.
  *
@@ -65,10 +66,12 @@ const PopoverContent_1 = __importDefault(require("./PopoverContent"));
  * ```
  */
 exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
-    var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy = "absolute", bubbleEscape = false } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy", "bubbleEscape"]);
+    var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy, bubbleEscape = false } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy", "bubbleEscape"]);
     const arrowRef = (0, react_2.useRef)(null);
+    const isInModal = (0, react_2.useContext)(ModalContext_1.ModalContext) !== null;
+    const chosenStrategy = userStrategy !== null && userStrategy !== void 0 ? userStrategy : (isInModal ? "fixed" : "absolute");
     const { x, y, strategy, context, update, refs, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = (0, react_1.useFloating)({
-        strategy: userStrategy,
+        strategy: chosenStrategy,
         placement,
         open: open,
         onOpenChange: onClose,

package/cjs/table/DataCell.js

@@ -41,12 +41,10 @@ exports.DataCell = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
-const Table_1 = require("./Table");
 exports.DataCell = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
-    const context = (0, react_1.useContext)(Table_1.TableContext);
     return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, clsx_1.default)("navds-table__data-cell", className, {
             [`navds-table__data-cell--align-${align}`]: align,
-        }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
+        }) }, rest), children));
 });
 exports.default = exports.DataCell;

package/cjs/table/ExpandableRow.js

@@ -66,6 +66,7 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__expandable-row", className, {
                 "navds-table__expandable-row--open": isOpen,
                 "navds-table__expandable-row--expansion-disabled": expansionDisabled,
+                "navds-table__expandable-row--clickable": expandOnRowClick,
             }), onClick: (e) => {
                 var _a;
                 !expansionDisabled && expandOnRowClick && onRowClick(e);
@@ -74,7 +75,7 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
             togglePlacement === "right" && children,
             react_1.default.createElement(DataCell_1.default, { className: (0, clsx_1.default)("navds-table__toggle-expand-cell", {
                     "navds-table__toggle-expand-cell--open": isOpen,
-                }) }, !expansionDisabled && (react_1.default.createElement("button", { type: "button", className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: expansionHandler },
+                }) }, !expansionDisabled && (react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", type: "button", "aria-controls": id, "aria-expanded": isOpen, onClick: expansionHandler },
                 react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-table__expandable-icon", title: isOpen ? "Vis mindre" : "Vis mer" })))),
             togglePlacement === "left" && children),
         react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },

package/cjs/table/HeaderCell.js

@@ -38,15 +38,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderCell = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const Table_1 = require("./Table");
+const react_1 = __importStar(require("react"));
 exports.HeaderCell = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
-    const context = (0, react_1.useContext)(Table_1.TableContext);
     return (react_1.default.createElement("th", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-table__header-cell", "navds-label", className, {
             [`navds-table__header-cell--align-${align}`]: align,
-            "navds-label--small": (context === null || context === void 0 ? void 0 : context.size) === "small",
         }) }, rest), children));
 });
 exports.default = exports.HeaderCell;

package/cjs/table/Table.js

@@ -82,7 +82,7 @@ exports.TableContext = (0, react_1.createContext)(null);
  */
 exports.Table = (0, react_1.forwardRef)((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
-    return (react_1.default.createElement(exports.TableContext.Provider, { value: { size, onSortChange, sort } },
+    return (react_1.default.createElement(exports.TableContext.Provider, { value: { onSortChange, sort } },
         react_1.default.createElement("table", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table", `navds-table--${size}`, className, {
                 "navds-table--zebra-stripes": zebraStripes,
             }) }))));

package/esm/date/datepicker/DatePicker.d.ts

@@ -82,9 +82,9 @@ export interface DatePickerDefaultProps extends Omit<React.HTMLAttributes<HTMLDi
     onOpenToggle?: () => void;
     /**
      * Avoid using if possible!
-     * Changes what CSS position property to use
+     * Changes what CSS position property to use.
      * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
-     * @default "absolute"
+     * @default See Popover
      */
     strategy?: "absolute" | "fixed";
     /**

package/esm/date/datepicker/DatePicker.js

@@ -45,7 +45,7 @@ import { TableHead } from "./TableHead";
  */
 export const DatePicker = forwardRef((_a, ref) => {
     var _b;
-    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy = "absolute", bubbleEscape = false } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy", "bubbleEscape"]);
+    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy, bubbleEscape = false } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy", "bubbleEscape"]);
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open !== null && _open !== void 0 ? _open : false);
     const wrapperRef = useRef(null);

package/esm/date/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date/datepicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date/datepicker/DatePicker.tsx"],"names":[],"mappings":"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"}

package/esm/date/hooks/useEscape.d.ts

@@ -1 +1,2 @@
-export declare const useEscape: (open: boolean, setOpen: (openState: boolean) => void, focusRef: any) => void;
+import { RefObject } from "react";
+export declare const useEscape: (open: boolean, setOpen: (openState: boolean) => void, focusRef: RefObject<HTMLElement>) => void;

package/esm/date/hooks/useEscape.js

@@ -4,7 +4,12 @@ export const useEscape = (open, setOpen, focusRef) => {
         setOpen(false);
         (focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) && focusRef.current.focus();
     }, [focusRef, setOpen]);
-    const escape = useCallback((e) => open && e.key === "Escape" && handleClose(), [handleClose, open]);
+    const escape = useCallback((event) => {
+        if (open && event.key === "Escape") {
+            event.preventDefault(); // This prevents modal from closing when using datepicker inside modal
+            handleClose();
+        }
+    }, [handleClose, open]);
     useEffect(() => {
         window.addEventListener("keydown", escape, false);
         return () => {

package/esm/date/hooks/useEscape.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../../src/date/hooks/useEscape.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAa,EACb,OAAqC,EACrC,QAAa,EACb,EAAE;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,KAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAChD,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,WAAW,EAAE,EAClD,CAAC,WAAW,EAAE,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC,CAAC"}
+{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../../src/date/hooks/useEscape.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE1D,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAa,EACb,OAAqC,EACrC,QAAgC,EAChC,EAAE;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,KAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAChD,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,KAAoB,EAAE,EAAE;QACvB,IAAI,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,sEAAsE;YAC9F,WAAW,EAAE,CAAC;SACf;IACH,CAAC,EACD,CAAC,WAAW,EAAE,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC,CAAC"}

package/esm/modal/Modal.d.ts

@@ -1,64 +1,70 @@
 import React from "react";
-import ReactModal from "react-modal";
-import { ModalContentType } from "./ModalContent";
-export interface ModalProps {
+import ModalBody from "./ModalBody";
+import ModalHeader from "./ModalHeader";
+import ModalFooter from "./ModalFooter";
+export interface ModalProps 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.
+     */
+    header?: {
+        label?: string;
+        icon?: React.ReactNode;
+        heading: string;
+        /**
+         * Heading size
+         * @default "medium"
+         * */
+        size?: "medium" | "small";
+        /**
+         * Removes close-button (X) when false
+         * @default true
+         */
+        closeButton?: boolean;
+    };
     /**
      * Modal content
      */
     children: React.ReactNode;
     /**
-     * Open state for modal
+     * Whether the modal should be visible or not.
+     * Remember to use the `onClose` callback to keep your local state in sync.
+     * You can also use `ref.current.openModal()` and `ref.current.close()`.
      */
-    open: boolean;
+    open?: boolean;
     /**
-     * Callback for modal wanting to close
+     * Called when the modal has been closed
      */
-    onClose: () => void;
+    onClose?: React.ReactEventHandler<HTMLDialogElement>;
     /**
-     * If modal should close on overlay click (click outside Modal)
-     * @default true
+     * Called when the user wants to close the modal (clicked the close button or pressed Esc).
+     * @returns Whether to close the modal
      */
-    shouldCloseOnOverlayClick?: boolean;
+    onBeforeClose?: () => boolean | void;
     /**
-     * User defined classname for modal
+     * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
      */
-    className?: string;
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
     /**
-     * User defined classname for modal
-     */
-    overlayClassName?: string;
+     * @default fit-content (up to 700px)
+     * */
+    width?: "medium" | "small" | number | string;
     /**
-     * Removes close-button(X) when false
-     * @default true
-     */
-    closeButton?: boolean;
-    /**
-     *
-     */
-    shouldCloseOnEsc?: boolean;
-    /**
-     * Allows custom styling of ReactModal, in accordance with their typing
+     * User defined classname for modal
      */
-    style?: ReactModal.Styles;
+    className?: string;
     /**
-     * Callback for setting parent element modal will attach to
+     * Sets aria-labelledby on 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`.
      */
-    parentSelector?(): HTMLElement;
     "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    "aria-modal"?: boolean;
-    /**
-     * Sets aria-label on modal
-     * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
-     */
-    "aria-label"?: string;
 }
-interface ModalComponent extends ModalLifecycle, React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ReactModal>> {
-    Content: ModalContentType;
+interface ModalComponent extends React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDialogElement>> {
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
 }
-type ModalLifecycle = {
-    setAppElement: (element: any) => void;
-};
 /**
  * A component that displays a modal dialog.
  *
@@ -66,23 +72,42 @@ type ModalLifecycle = {
  * @see 🏷️ {@link ModalProps}
  *
  * @example
+ * State change with `useRef`
+ * ```jsx
+ * const ref = useRef<HTMLDialogElement>(null);
+ * <Button onClick={() => ref.current?.showModal()}>Open modal</Button>
+ * <Modal
+ *   ref={ref}
+ *   header={{
+ *     label: "Optional label",
+ *     icon: <FileIcon aria-hidden />,
+ *     heading: "My heading",
+ *   }}
+ * >
+ *   <Modal.Body>
+ *     <BodyLong>Hello world</BodyLong>
+ *   </Modal.Body>
+ *   <Modal.Footer>
+ *     <Button>Save</Button>
+ *     <Button type="button" variant="tertiary" onClick={() => ref.current?.close()}>Close</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ * @example
+ * State change with `useState`
  * ```jsx
  * const [open, setOpen] = useState(false);
- *
  * <Modal
  *   open={open}
- *   aria-label="Modal demo"
- *   onClose={() => setOpen((x) => !x)}
+ *   onClose={() => setOpen(false)}
  *   aria-labelledby="modal-heading"
  * >
- *   <Modal.Content>
- *     <Heading spacing level="1" size="large" id="modal-heading">
- *       Viktig info
- *     </Heading>
- *     <BodyLong spacing>
- *       Hallo!
- *     </BodyLong>
- *   </Modal.Content>
+ *   <Modal.Header>
+ *     <Heading level="1" size="large" id="modal-heading">My heading</Heading>
+ *   </Modal.Header>
+ *   <Modal.Body>
+ *     <BodyLong>Hello world</BodyLong>
+ *   </Modal.Body>
  * </Modal>
  * ```
  */

package/esm/modal/Modal.js

@@ -9,12 +9,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useEffect, useMemo, useRef } from "react";
+import React, { forwardRef, useContext, useEffect, useMemo, useRef, } from "react";
 import cl from "clsx";
-import ReactModal from "react-modal";
-import { Button, mergeRefs, useProvider } from "..";
-import ModalContent from "./ModalContent";
-import { XMarkIcon } from "@navikt/aksel-icons";
+import dialogPolyfill from "./dialog-polyfill";
+import { Detail, Heading, mergeRefs, useId } from "..";
+import ModalBody from "./ModalBody";
+import ModalHeader from "./ModalHeader";
+import ModalFooter from "./ModalFooter";
+import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
+import { ModalContext } from "./ModalContext";
+const needPolyfill = typeof window !== "undefined" && window.HTMLDialogElement === undefined;
 /**
  * A component that displays a modal dialog.
  *
@@ -22,64 +26,99 @@ import { XMarkIcon } from "@navikt/aksel-icons";
  * @see 🏷️ {@link ModalProps}
  *
  * @example
+ * State change with `useRef`
+ * ```jsx
+ * const ref = useRef<HTMLDialogElement>(null);
+ * <Button onClick={() => ref.current?.showModal()}>Open modal</Button>
+ * <Modal
+ *   ref={ref}
+ *   header={{
+ *     label: "Optional label",
+ *     icon: <FileIcon aria-hidden />,
+ *     heading: "My heading",
+ *   }}
+ * >
+ *   <Modal.Body>
+ *     <BodyLong>Hello world</BodyLong>
+ *   </Modal.Body>
+ *   <Modal.Footer>
+ *     <Button>Save</Button>
+ *     <Button type="button" variant="tertiary" onClick={() => ref.current?.close()}>Close</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ * @example
+ * State change with `useState`
  * ```jsx
  * const [open, setOpen] = useState(false);
- *
  * <Modal
  *   open={open}
- *   aria-label="Modal demo"
- *   onClose={() => setOpen((x) => !x)}
+ *   onClose={() => setOpen(false)}
  *   aria-labelledby="modal-heading"
  * >
- *   <Modal.Content>
- *     <Heading spacing level="1" size="large" id="modal-heading">
- *       Viktig info
- *     </Heading>
- *     <BodyLong spacing>
- *       Hallo!
- *     </BodyLong>
- *   </Modal.Content>
+ *   <Modal.Header>
+ *     <Heading level="1" size="large" id="modal-heading">My heading</Heading>
+ *   </Modal.Header>
+ *   <Modal.Body>
+ *     <BodyLong>Hello world</BodyLong>
+ *   </Modal.Body>
  * </Modal>
  * ```
  */
 export const Modal = forwardRef((_a, ref) => {
-    var _b, _c;
-    var { children, open, onClose, className, overlayClassName, shouldCloseOnOverlayClick = true, shouldCloseOnEsc = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel, style, parentSelector } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "overlayClassName", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label", "style", "parentSelector"]);
+    var _b;
+    var { header, children, open, onBeforeClose, onCancel, width, className, "aria-labelledby": ariaLabelledby, style } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "width", "className", "aria-labelledby", "style"]);
     const modalRef = useRef(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
-    const buttonRef = useRef(null);
-    const rootElement = (_b = useProvider()) === null || _b === void 0 ? void 0 : _b.rootElement;
-    const appElement = (_c = useProvider()) === null || _c === void 0 ? void 0 : _c.appElement;
+    const ariaLabelId = useId();
+    if (useContext(ModalContext)) {
+        console.error("Modals should not be nested");
+    }
     useEffect(() => {
-        appElement && Modal.setAppElement(appElement);
-    }, [appElement]);
-    const onModalCloseRequest = (e) => {
-        if (shouldCloseOnOverlayClick || e.type === "keydown") {
-            onClose();
+        if (needPolyfill && modalRef.current) {
+            dialogPolyfill.registerDialog(modalRef.current);
         }
-        else if (buttonRef.current) {
-            buttonRef.current.focus();
-        }
-    };
-    const getParentSelector = () => {
-        if (parentSelector) {
-            return parentSelector;
+    }, [modalRef]);
+    useEffect(() => {
+        // We need to have this in a useEffect so that the content renders before the modal is displayed,
+        // and in case `open` is true initially.
+        if (modalRef.current && open !== undefined) {
+            if (open && !modalRef.current.open) {
+                modalRef.current.showModal();
+            }
+            else if (!open && modalRef.current.open) {
+                modalRef.current.close();
+            }
         }
-        return rootElement !== undefined
-            ? () => rootElement
-            : undefined;
-    };
-    return (React.createElement(ReactModal, Object.assign({}, rest, { parentSelector: getParentSelector(), style: style, isOpen: open, ref: mergedRef, className: cl("navds-modal", className), overlayClassName: cl("navds-modal__overlay", overlayClassName), shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, onRequestClose: (e) => onModalCloseRequest(e), aria: {
-            describedby: ariaDescribedBy,
-            labelledby: ariaLabelledBy,
-            modal: ariaModal,
-        }, contentLabel: contentLabel }),
-        children,
-        closeButton && (React.createElement(Button, { className: cl("navds-modal__button", {
-                "navds-modal__button--shake": shouldCloseOnOverlayClick,
-            }), size: "small", variant: "tertiary-neutral", ref: buttonRef, onClick: onClose, icon: React.createElement(XMarkIcon, { title: "Lukk modalvindu" }) }))));
+    }, [modalRef, open]);
+    useBodyScrollLock(modalRef, "navds-modal__document-body");
+    const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
+    return (React.createElement("dialog", Object.assign({ ref: mergedRef, className: cl("navds-modal", className, {
+            "navds-modal--polyfilled": needPolyfill,
+            "navds-modal--autowidth": !width,
+            [`navds-modal--${width}`]: isWidthPreset,
+        }), style: Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {})), onCancel: (event) => {
+            // FYI: onCancel fires when you press Esc
+            if (onBeforeClose && onBeforeClose() === false) {
+                event.preventDefault();
+            }
+            else if (onCancel)
+                onCancel(event);
+        }, "aria-labelledby": !ariaLabelledby && !rest["aria-label"] && header
+            ? ariaLabelId
+            : ariaLabelledby }, rest),
+        React.createElement(ModalContext.Provider, { value: {
+                closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
+            } },
+            header && (React.createElement(ModalHeader, null,
+                header.label && (React.createElement(Detail, { className: "navds-modal__label" }, header.label)),
+                React.createElement(Heading, { size: (_b = header.size) !== null && _b !== void 0 ? _b : "medium", level: "1", id: ariaLabelId },
+                    React.createElement("span", { className: "navds-modal__header-icon" }, header.icon),
+                    header.heading))),
+            children)));
 });
-Modal.setAppElement = (element) => ReactModal.setAppElement(element);
-Modal.Content = ModalContent;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
 export default Modal;
 //# sourceMappingURL=Modal.js.map

package/esm/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}

package/esm/modal/ModalBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+export default ModalBody;

package/esm/modal/{ModalContent.js → ModalBody.js}

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "clsx";
-const ModalContent = forwardRef((_a, ref) => {
+const ModalBody = forwardRef((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-modal__content", className) })));
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-modal__body", className) })));
 });
-export default ModalContent;
-//# sourceMappingURL=ModalContent.js.map
+export default ModalBody;
+//# sourceMappingURL=ModalBody.js.map

package/esm/modal/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["../../src/modal/ModalBody.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAMtB,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC/B,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,IAAI,CAC3E,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/modal/ModalContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ModalContextProps {
+    closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare const ModalContext: React.Context<ModalContextProps | null>;
+export {};

package/esm/modal/ModalContext.js

@@ -0,0 +1,3 @@
+import React from "react";
+export const ModalContext = React.createContext(null);
+//# sourceMappingURL=ModalContext.js.map

package/esm/modal/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../src/modal/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA2B,IAAI,CAAC,CAAC"}

package/esm/modal/ModalFooter.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+export default ModalFooter;

package/esm/modal/ModalFooter.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import cl from "clsx";
+const ModalFooter = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-modal__footer", className) })));
+});
+export default ModalFooter;
+//# sourceMappingURL=ModalFooter.js.map

package/esm/modal/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sourceRoot":"","sources":["../../src/modal/ModalFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAMtB,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC/B,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,IAAI,CAC7E,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/modal/ModalHeader.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    /**
+     * Removes close-button (X) when false
+     * @default true
+     */
+    closeButton?: boolean;
+}
+declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ModalHeader;