@navikt/ds-react 4.12.0 → 5.0.0-rc.0

package/cjs/badge/Badge.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.Badge = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (react_1.default.createElement("sup", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-badge", className) }), children));
+});
+exports.default = exports.Badge;

package/cjs/badge/NotificationBadge.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationBadge = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.NotificationBadge = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, absolute = false, pulse = false, maxCount = 500, count } = _a, rest = __rest(_a, ["className", "absolute", "pulse", "maxCount", "count"]);
+    const getCount = () => {
+        if (!count) {
+            return null;
+        }
+        if (count <= maxCount) {
+            return `${count}`;
+        }
+        return `${maxCount}+`;
+    };
+    return (react_1.default.createElement("sup", { className: "navds-notificationbadge__wrapper" },
+        react_1.default.createElement("span", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-notificationbadge", className, {
+                "navds-notificationbadge--pulse": pulse,
+                "navds-notificationbadge--count": !!count,
+                "navds-notificationbadge--marker": !count,
+            }) }), getCount())));
+});
+exports.default = exports.NotificationBadge;

package/cjs/badge/index.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.NotificationBadge = void 0;
+var NotificationBadge_1 = require("./NotificationBadge");
+Object.defineProperty(exports, "NotificationBadge", { enumerable: true, get: function () { return __importDefault(NotificationBadge_1).default; } });

package/cjs/badge/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/badge/index.js",
+  "types": "../../esm/badge/index.d.ts"
+}

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/dropdown/Menu/GroupedList/Heading.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedHeading = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.GroupedHeading = (0, react_1.forwardRef)((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("dt", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-dropdown__list-heading", "navds-heading", "navds-heading--xsmall", className) })));
+});
+exports.default = exports.GroupedHeading;

package/cjs/dropdown/Menu/GroupedList/Item.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedItem = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const Dropdown_1 = require("../../Dropdown");
+exports.GroupedItem = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "button", className } = _a, rest = __rest(_a, ["as", "className"]);
+    const context = (0, react_1.useContext)(Dropdown_1.DropdownContext);
+    return (react_1.default.createElement("dd", { className: "navds-dropdown__list-item" },
+        react_1.default.createElement(Component, Object.assign({}, rest, { value: rest.children, onClick: (event) => {
+                var _a, _b;
+                (_a = context === null || context === void 0 ? void 0 : context.onSelect) === null || _a === void 0 ? void 0 : _a.call(context, event);
+                (_b = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _b === void 0 ? void 0 : _b.call(rest, event);
+            }, ref: ref, className: (0, clsx_1.default)("navds-dropdown__item", "navds-body-short", "navds-body-short--small", className) }))));
+});
+exports.default = exports.GroupedItem;

package/cjs/form/combobox/ComboboxWrapper.js

@@ -46,9 +46,9 @@ const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize,
             setHasFocusWithin(false);
         }
     }
-    return (react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
-            "navds-search--error": hasError,
-            "navds-search--disabled": !!inputProps.disabled,
+    return (react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${inputSize}`, {
+            "navds-combobox--error": hasError,
+            "navds-combobox--disabled": !!inputProps.disabled,
             "navds-combobox--focused": hasFocusWithin,
         }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
 };

package/cjs/grid/ContentContainer.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentContainer = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.ContentContainer = (0, react_1.forwardRef)((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-content-container", className) }, rest)));
+});
+exports.default = exports.ContentContainer;

package/cjs/layout/box/Box.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+exports.Box = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, style: _style } = _a, rest = __rest(_a, ["as", "className", "style"]);
+    const style = Object.assign({}, _style);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: (0, clsx_1.default)("navds-box", className, {}) })));
+});

package/cjs/layout/box/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+var Box_1 = require("./Box");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });

package/cjs/layout/box/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/layout/box/index.js",
+  "types": "../../../esm/layout/box/index.d.ts"
+}

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/ModalBody.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+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__body", className) })));
+});
+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);

package/cjs/modal/ModalFooter.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const ModalFooter = (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__footer", className) })));
+});
+exports.default = ModalFooter;