@navikt/ds-react 4.12.1 → 5.0.0

package/_docs.json

@@ -5769,10 +5769,10 @@
     "filePath": "src/modal/Modal.tsx",
     "displayName": "Modal",
     "props": {
-      "children": {
+      "header": {
         "defaultValue": null,
-        "description": "Modal content",
-        "name": "children",
+        "description": "Content for the header. Alteratively you can use <Modal.Header> instead for more control,\nbut then you have to set `aria-label` or `aria-labelledby` on the modal manually.",
+        "name": "header",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5783,15 +5783,15 @@
             "name": "ModalProps"
           }
         ],
-        "required": true,
+        "required": false,
         "type": {
-          "name": "ReactNode"
+          "name": "{ label?: string; icon?: ReactNode; heading: string; size?: \"medium\" | \"small\"; closeButton?: boolean | undefined; } | undefined"
         }
       },
-      "open": {
+      "children": {
         "defaultValue": null,
-        "description": "Open state for modal",
-        "name": "open",
+        "description": "Modal content",
+        "name": "children",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5804,34 +5804,13 @@
         ],
         "required": true,
         "type": {
-          "name": "boolean"
+          "name": "ReactNode"
         }
       },
-      "onClose": {
+      "open": {
         "defaultValue": null,
-        "description": "Callback for modal wanting to close",
-        "name": "onClose",
-        "parent": {
-          "fileName": "src/modal/Modal.tsx",
-          "name": "ModalProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/modal/Modal.tsx",
-            "name": "ModalProps"
-          }
-        ],
-        "required": true,
-        "type": {
-          "name": "() => void"
-        }
-      },
-      "shouldCloseOnOverlayClick": {
-        "defaultValue": {
-          "value": "true"
-        },
-        "description": "If modal should close on overlay click (click outside Modal)",
-        "name": "shouldCloseOnOverlayClick",
+        "description": "Whether the modal should be visible or not.\nRemember to use the `onClose` callback to keep your local state in sync.\nYou can also use `ref.current.openModal()` and `ref.current.close()`.",
+        "name": "open",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5847,10 +5826,10 @@
           "name": "boolean"
         }
       },
-      "className": {
+      "onClose": {
         "defaultValue": null,
-        "description": "User defined classname for modal",
-        "name": "className",
+        "description": "Called when the modal has been closed",
+        "name": "onClose",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5863,13 +5842,13 @@
         ],
         "required": false,
         "type": {
-          "name": "string"
+          "name": "ReactEventHandler<HTMLDialogElement>"
         }
       },
-      "overlayClassName": {
+      "onBeforeClose": {
         "defaultValue": null,
-        "description": "User defined classname for modal",
-        "name": "overlayClassName",
+        "description": "Called when the user wants to close the modal (clicked the close button or pressed Esc).\n@returns Whether to close the modal",
+        "name": "onBeforeClose",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5882,15 +5861,13 @@
         ],
         "required": false,
         "type": {
-          "name": "string"
+          "name": "(() => boolean | void)"
         }
       },
-      "closeButton": {
-        "defaultValue": {
-          "value": "true"
-        },
-        "description": "Removes close-button(X) when false",
-        "name": "closeButton",
+      "onCancel": {
+        "defaultValue": null,
+        "description": "Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.",
+        "name": "onCancel",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5903,13 +5880,15 @@
         ],
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "ReactEventHandler<HTMLDialogElement>"
         }
       },
-      "shouldCloseOnEsc": {
-        "defaultValue": null,
+      "width": {
+        "defaultValue": {
+          "value": "fit-content (up to 700px)"
+        },
         "description": "",
-        "name": "shouldCloseOnEsc",
+        "name": "width",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5922,13 +5901,13 @@
         ],
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "string | number"
         }
       },
-      "style": {
+      "className": {
         "defaultValue": null,
-        "description": "Allows custom styling of ReactModal, in accordance with their typing",
-        "name": "style",
+        "description": "User defined classname for modal",
+        "name": "className",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5941,13 +5920,13 @@
         ],
         "required": false,
         "type": {
-          "name": "Styles"
+          "name": "string"
         }
       },
-      "parentSelector": {
+      "aria-labelledby": {
         "defaultValue": null,
-        "description": "Callback for setting parent element modal will attach to",
-        "name": "parentSelector",
+        "description": "Sets aria-labelledby on modal.\nNo need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.\n@warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.",
+        "name": "aria-labelledby",
         "parent": {
           "fileName": "src/modal/Modal.tsx",
           "name": "ModalProps"
@@ -5960,40 +5939,46 @@
         ],
         "required": false,
         "type": {
-          "name": "(() => HTMLElement)"
+          "name": "string"
         }
       },
-      "aria-labelledby": {
+      "ref": {
         "defaultValue": null,
-        "description": "",
-        "name": "aria-labelledby",
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
         "parent": {
-          "fileName": "src/modal/Modal.tsx",
-          "name": "ModalProps"
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
         },
         "declarations": [
           {
-            "fileName": "src/modal/Modal.tsx",
-            "name": "ModalProps"
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
           }
         ],
         "required": false,
         "type": {
-          "name": "string"
+          "name": "Ref<HTMLDialogElement>"
         }
-      },
-      "aria-describedby": {
+      }
+    }
+  },
+  {
+    "filePath": "src/modal/ModalBody.tsx",
+    "displayName": "ModalBody",
+    "props": {
+      "className": {
         "defaultValue": null,
         "description": "",
-        "name": "aria-describedby",
+        "name": "className",
         "parent": {
-          "fileName": "src/modal/Modal.tsx",
-          "name": "ModalProps"
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
         },
         "declarations": [
           {
-            "fileName": "src/modal/Modal.tsx",
-            "name": "ModalProps"
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
           }
         ],
         "required": false,
@@ -6001,37 +5986,43 @@
           "name": "string"
         }
       },
-      "aria-modal": {
+      "ref": {
         "defaultValue": null,
-        "description": "",
-        "name": "aria-modal",
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
         "parent": {
-          "fileName": "src/modal/Modal.tsx",
-          "name": "ModalProps"
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
         },
         "declarations": [
           {
-            "fileName": "src/modal/Modal.tsx",
-            "name": "ModalProps"
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
           }
         ],
         "required": false,
         "type": {
-          "name": "boolean"
+          "name": "Ref<HTMLDivElement>"
         }
-      },
-      "aria-label": {
+      }
+    }
+  },
+  {
+    "filePath": "src/modal/ModalFooter.tsx",
+    "displayName": "ModalFooter",
+    "props": {
+      "className": {
         "defaultValue": null,
-        "description": "Sets aria-label on modal\n@warning This should be set if not using 'aria-labelledby' or 'aria-describedby'",
-        "name": "aria-label",
+        "description": "",
+        "name": "className",
         "parent": {
-          "fileName": "src/modal/Modal.tsx",
-          "name": "ModalProps"
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
         },
         "declarations": [
           {
-            "fileName": "src/modal/Modal.tsx",
-            "name": "ModalProps"
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
           }
         ],
         "required": false,
@@ -6055,32 +6046,34 @@
         ],
         "required": false,
         "type": {
-          "name": "Ref<ReactModal>"
+          "name": "Ref<HTMLDivElement>"
         }
       }
     }
   },
   {
-    "filePath": "src/modal/ModalContent.tsx",
-    "displayName": "ModalContent",
+    "filePath": "src/modal/ModalHeader.tsx",
+    "displayName": "ModalHeader",
     "props": {
-      "children": {
-        "defaultValue": null,
-        "description": "Modal.Content content",
-        "name": "children",
+      "closeButton": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Removes close-button (X) when false",
+        "name": "closeButton",
         "parent": {
-          "fileName": "src/modal/ModalContent.tsx",
-          "name": "ModalContentProps"
+          "fileName": "src/modal/ModalHeader.tsx",
+          "name": "ModalHeaderProps"
         },
         "declarations": [
           {
-            "fileName": "src/modal/ModalContent.tsx",
-            "name": "ModalContentProps"
+            "fileName": "src/modal/ModalHeader.tsx",
+            "name": "ModalHeaderProps"
           }
         ],
-        "required": true,
+        "required": false,
         "type": {
-          "name": "ReactNode"
+          "name": "boolean"
         }
       },
       "className": {
@@ -6975,25 +6968,6 @@
         "type": {
           "name": "HTMLElement"
         }
-      },
-      "appElement": {
-        "defaultValue": null,
-        "description": "",
-        "name": "appElement",
-        "parent": {
-          "fileName": "src/provider/Provider.tsx",
-          "name": "ProviderProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/provider/Provider.tsx",
-            "name": "ProviderProps"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "HTMLElement"
-        }
       }
     }
   },
@@ -8215,7 +8189,7 @@
         "defaultValue": {
           "value": "\"medium\""
         },
-        "description": "Changes padding",
+        "description": "Changes padding around Cells",
         "name": "size",
         "parent": {
           "fileName": "src/table/Table.tsx",
@@ -8229,7 +8203,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"medium\" | \"small\""
+          "name": "\"large\" | \"medium\" | \"small\""
         }
       },
       "zebraStripes": {
@@ -10919,9 +10893,9 @@
       },
       "strategy": {
         "defaultValue": {
-          "value": "\"absolute\""
+          "value": "See Popover"
         },
-        "description": "Avoid using if possible!\nChanges what CSS position property to use\nYou want to use \"fixed\" if parent wrapper has position relative, but you want popover to escape",
+        "description": "Avoid using if possible!\nChanges what CSS position property to use.\nYou want to use \"fixed\" if parent wrapper has position relative, but you want popover to escape",
         "name": "strategy",
         "parent": {
           "fileName": "src/date/datepicker/DatePicker.tsx",

package/cjs/date/datepicker/DatePicker.js

@@ -74,7 +74,7 @@ const TableHead_1 = require("./TableHead");
  */
 exports.DatePicker = (0, react_1.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 = (0, __1.useId)(id);
     const [open, setOpen] = (0, react_1.useState)(_open !== null && _open !== void 0 ? _open : false);
     const wrapperRef = (0, react_1.useRef)(null);

package/cjs/date/hooks/useEscape.js

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

package/cjs/modal/Modal.js

@@ -40,10 +40,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const react_modal_1 = __importDefault(require("react-modal"));
+const dialog_polyfill_1 = __importDefault(require("./dialog-polyfill"));
 const __1 = require("..");
-const ModalContent_1 = __importDefault(require("./ModalContent"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
+const ModalBody_1 = __importDefault(require("./ModalBody"));
+const ModalHeader_1 = __importDefault(require("./ModalHeader"));
+const ModalFooter_1 = __importDefault(require("./ModalFooter"));
+const ModalUtils_1 = require("./ModalUtils");
+const ModalContext_1 = require("./ModalContext");
+const needPolyfill = typeof window !== "undefined" && window.HTMLDialogElement === undefined;
 /**
  * A component that displays a modal dialog.
  *
@@ -51,63 +55,98 @@ const aksel_icons_1 = require("@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>
  * ```
  */
 exports.Modal = (0, react_1.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 = (0, react_1.useRef)(null);
     const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([modalRef, ref]), [ref]);
-    const buttonRef = (0, react_1.useRef)(null);
-    const rootElement = (_b = (0, __1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
-    const appElement = (_c = (0, __1.useProvider)()) === null || _c === void 0 ? void 0 : _c.appElement;
+    const ariaLabelId = (0, __1.useId)();
+    if ((0, react_1.useContext)(ModalContext_1.ModalContext)) {
+        console.error("Modals should not be nested");
+    }
     (0, react_1.useEffect)(() => {
-        appElement && exports.Modal.setAppElement(appElement);
-    }, [appElement]);
-    const onModalCloseRequest = (e) => {
-        if (shouldCloseOnOverlayClick || e.type === "keydown") {
-            onClose();
+        if (needPolyfill && modalRef.current) {
+            dialog_polyfill_1.default.registerDialog(modalRef.current);
         }
-        else if (buttonRef.current) {
-            buttonRef.current.focus();
-        }
-    };
-    const getParentSelector = () => {
-        if (parentSelector) {
-            return parentSelector;
+    }, [modalRef]);
+    (0, react_1.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_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { parentSelector: getParentSelector(), style: style, isOpen: open, ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className), overlayClassName: (0, clsx_1.default)("navds-modal__overlay", overlayClassName), shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, onRequestClose: (e) => onModalCloseRequest(e), aria: {
-            describedby: ariaDescribedBy,
-            labelledby: ariaLabelledBy,
-            modal: ariaModal,
-        }, contentLabel: contentLabel }),
-        children,
-        closeButton && (react_1.default.createElement(__1.Button, { className: (0, clsx_1.default)("navds-modal__button", {
-                "navds-modal__button--shake": shouldCloseOnOverlayClick,
-            }), size: "small", variant: "tertiary-neutral", ref: buttonRef, onClick: onClose, icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: "Lukk modalvindu" }) }))));
+    }, [modalRef, open]);
+    (0, ModalUtils_1.useBodyScrollLock)(modalRef, "navds-modal__document-body");
+    const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
+    return (react_1.default.createElement("dialog", Object.assign({ ref: mergedRef, className: (0, clsx_1.default)("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_1.default.createElement(ModalContext_1.ModalContext.Provider, { value: {
+                closeHandler: (0, ModalUtils_1.getCloseHandler)(modalRef, header, onBeforeClose),
+            } },
+            header && (react_1.default.createElement(ModalHeader_1.default, null,
+                header.label && (react_1.default.createElement(__1.Detail, { className: "navds-modal__label" }, header.label)),
+                react_1.default.createElement(__1.Heading, { size: (_b = header.size) !== null && _b !== void 0 ? _b : "medium", level: "1", id: ariaLabelId },
+                    react_1.default.createElement("span", { className: "navds-modal__header-icon" }, header.icon),
+                    header.heading))),
+            children)));
 });
-exports.Modal.setAppElement = (element) => react_modal_1.default.setAppElement(element);
-exports.Modal.Content = ModalContent_1.default;
+exports.Modal.Header = ModalHeader_1.default;
+exports.Modal.Body = ModalBody_1.default;
+exports.Modal.Footer = ModalFooter_1.default;
 exports.default = exports.Modal;

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

@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const ModalContent = (0, react_1.forwardRef)((_a, ref) => {
+const ModalBody = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-modal__content", className) })));
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-modal__body", className) })));
 });
-exports.default = ModalContent;
+exports.default = ModalBody;

package/cjs/modal/ModalContext.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.ModalContext = react_1.default.createContext(null);