@navikt/ds-react 7.36.0 → 7.38.0

package/cjs/dialog/popup/DialogPopupInternal.js

@@ -0,0 +1,166 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogPopupInternal = void 0;
+const react_1 = __importStar(require("react"));
+const box_1 = require("../../layout/box");
+const DismissableLayer_1 = require("../../overlays/dismissablelayer/DismissableLayer");
+const Theme_1 = require("../../theme/Theme");
+const FocusBoundary_1 = require("../../util/focus-boundary/FocusBoundary");
+const FocusGuards_1 = require("../../util/focus-guards/FocusGuards");
+const hooks_1 = require("../../util/hooks");
+const useOpenChangeAnimationComplete_1 = require("../../util/hooks/useOpenChangeAnimationComplete");
+const useScrollLock_1 = require("../../util/hooks/useScrollLock");
+const useTransitionStatus_1 = require("../../util/hooks/useTransitionStatus");
+const DialogRoot_context_1 = require("../root/DialogRoot.context");
+const DialogPopupInternal = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { className, modal, closeOnOutsideClick = true, initialFocusTo, returnFocusTo, position = "center", width = "medium", height, id, style, "aria-labelledby": ariaLabelledbyProp, withBackdrop, role = "dialog" } = _a, restProps = __rest(_a, ["className", "modal", "closeOnOutsideClick", "initialFocusTo", "returnFocusTo", "position", "width", "height", "id", "style", "aria-labelledby", "withBackdrop", "role"]);
+    const { cn } = (0, Theme_1.useRenameCSS)();
+    const { mounted, popupRef, setPopupElement, triggerElement, setOpen, open, transitionStatus, popupElement, nestedOpenDialogCount: nestedOpenDialogCountProp, nested, size, titleId, popupId, onOpenChangeComplete, setMounted, } = (0, DialogRoot_context_1.useDialogContext)();
+    const mergedRefs = (0, hooks_1.useMergeRefs)(forwardedRef, popupRef, setPopupElement);
+    (0, useScrollLock_1.useScrollLock)({
+        enabled: open && modal === true,
+        mounted,
+        open,
+        referenceElement: popupElement,
+    });
+    (0, useOpenChangeAnimationComplete_1.useOpenChangeAnimationComplete)({
+        open,
+        ref: popupRef,
+        onComplete() {
+            if (open) {
+                onOpenChangeComplete === null || onOpenChangeComplete === void 0 ? void 0 : onOpenChangeComplete(true);
+            }
+            else {
+                setMounted(false);
+                onOpenChangeComplete === null || onOpenChangeComplete === void 0 ? void 0 : onOpenChangeComplete(false);
+            }
+        },
+    });
+    const resolvedInitialFocus = initialFocusTo !== null && initialFocusTo !== void 0 ? initialFocusTo : popupRef;
+    const resolvedReturnFocus = () => {
+        if (returnFocusTo) {
+            return typeof returnFocusTo === "function"
+                ? returnFocusTo()
+                : returnFocusTo.current;
+        }
+        if (isFocusable(triggerElement)) {
+            return triggerElement;
+        }
+        return true;
+    };
+    return (react_1.default.createElement(FocusGuards_1.FocusGuards, null,
+        react_1.default.createElement(FocusBoundary_1.FocusBoundary, { loop: true, trapped: open, initialFocus: resolvedInitialFocus, returnFocus: resolvedReturnFocus, modal: true },
+            react_1.default.createElement(DismissableLayer_1.DismissableLayer, { asChild: true, safeZone: {
+                    anchor: triggerElement,
+                }, onDismiss: (event) => {
+                    open && setOpen(false, event);
+                }, disableOutsidePointerEvents: modal === true || withBackdrop, onInteractOutside: (event) => {
+                    /**
+                     * Since trigger might be set up to close the dialog on click,
+                     * we need to prevent dismissing when clicking the trigger to avoid double close events (potentially re-triggering open)
+                     */
+                    const target = event.target;
+                    const targetIsTrigger = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(target);
+                    if (targetIsTrigger) {
+                        event.preventDefault();
+                    }
+                }, 
+                /**
+                 * Only close dialog on pointerUp pointerEvents
+                 */
+                onPointerDownOutside: (event) => {
+                    event.preventDefault();
+                }, onFocusOutside: (event) => {
+                    /**
+                     * Focus-events are tricky when dealing with portals and nested dialogs.
+                     * If multiple dialogs are open, initial auto-focus might cause
+                     * onFocusOutside to trigger on the parent dialog when focusing the child dialog.
+                     */
+                    event.preventDefault();
+                }, enablePointerUpOutside: true, onPointerUpOutside: (event) => {
+                    !closeOnOutsideClick && event.preventDefault();
+                } },
+                react_1.default.createElement(box_1.BoxNew, Object.assign({ "aria-labelledby": ariaLabelledbyProp !== null && ariaLabelledbyProp !== void 0 ? ariaLabelledbyProp : titleId, id: id !== null && id !== void 0 ? id : popupId }, restProps, { ref: mergedRefs, className: cn("navds-dialog__popup", className), role: role, "aria-modal": "true" }, (0, useTransitionStatus_1.createTransitionStatusAttribute)(transitionStatus), { "data-position": position, "data-size": size, width: translateWidth(width, position), height: translateHeight(height, position), style: Object.assign(Object.assign({}, style), { "--__axc-nested-level": nestedOpenDialogCountProp }), "data-nested-dialog-open": !!nestedOpenDialogCountProp, "data-nested": !!nested }))))));
+});
+exports.DialogPopupInternal = DialogPopupInternal;
+function translateWidth(width, position) {
+    if (position === "fullscreen") {
+        return undefined;
+    }
+    switch (width) {
+        case "small":
+            return "480px";
+        case "medium":
+            return "640px";
+        case "large":
+            return "800px";
+        default:
+            return width;
+    }
+}
+function translateHeight(height, position) {
+    if (position === "fullscreen" ||
+        position === "left" ||
+        position === "right") {
+        return undefined;
+    }
+    return height;
+}
+function isFocusable(element) {
+    if (!element || !element.isConnected) {
+        return false;
+    }
+    /**
+     * Baselined in 2024
+     * @see https://caniuse.com/?search=checkvisibility
+     */
+    if (typeof element.checkVisibility === "function") {
+        return element.checkVisibility();
+    }
+    return getComputedStyle(element).display !== "none";
+}
+//# sourceMappingURL=DialogPopupInternal.js.map

package/cjs/dialog/popup/DialogPopupInternal.js.map

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

package/cjs/dialog/root/DialogRoot.context.d.ts

@@ -0,0 +1,84 @@
+import type { TransitionStatus } from "../../util/hooks/useTransitionStatus";
+interface DialogContextProps {
+    /**
+     * Whether the dialog is currently open.
+     */
+    open: boolean;
+    /**
+     * Event handler called when the dialog is opened or closed.
+     */
+    setOpen: (open: boolean, originalEvent: Event) => void;
+    /**
+     * Setter for whether the dialog is mounted.
+     */
+    setMounted: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Event handler called after any animations complete when the dialog is opened or closed.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * The transition status of the dialog
+     */
+    transitionStatus: TransitionStatus;
+    /**
+     * Whether the dialog should be mounted (opened)
+     */
+    mounted: boolean;
+    /**
+     * The ref to the Popup element.
+     */
+    popupRef: React.RefObject<HTMLElement | null>;
+    /**
+     * Callback to register the Popup element DOM node.
+     */
+    setPopupElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    /**
+     * The Popup element DOM node.
+     */
+    popupElement: HTMLElement | null;
+    /**
+     * ID of the popup element
+     */
+    popupId: string;
+    /**
+     * Callback to register the Trigger element DOM node.
+     */
+    setTriggerElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    /**
+     * The Trigger element DOM node.
+     */
+    triggerElement: HTMLElement | null;
+    /**
+     * Declares if this dialog is nested inside another dialog.
+     */
+    nested: boolean;
+    /**
+     * Handles nested dialog opened event.
+     */
+    nestedDialogOpened: (nestedCount: number) => void;
+    /**
+     * Handles nested dialog closing event.
+     */
+    nestedDialogClosed: () => void;
+    /**
+     * Number of currently opened nested dialogs.
+     */
+    nestedOpenDialogCount: number | undefined;
+    /**
+     * Dialog size
+     */
+    size: "small" | "medium";
+    /**
+     * ID of the dialog title element.
+     */
+    titleId?: string;
+    /**
+     * Setter for the dialog title ID.
+     */
+    setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}
+declare const DialogContextProvider: import("react").FC<DialogContextProps & {
+    children: React.ReactNode;
+    ref?: never;
+}>, useDialogContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DialogContextProps : DialogContextProps | undefined;
+export { DialogContextProvider, useDialogContext };

package/cjs/dialog/root/DialogRoot.context.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogContext = exports.DialogContextProvider = void 0;
+const create_strict_context_1 = require("../../util/create-strict-context");
+const { Provider: DialogContextProvider, useContext: useDialogContext } = (0, create_strict_context_1.createStrictContext)({
+    name: "DialogContext",
+    errorMessage: "useDialogContext must be used within Dialog",
+});
+exports.DialogContextProvider = DialogContextProvider;
+exports.useDialogContext = useDialogContext;
+//# sourceMappingURL=DialogRoot.context.js.map

package/cjs/dialog/root/DialogRoot.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogRoot.context.js","sourceRoot":"","sources":["../../../src/dialog/root/DialogRoot.context.ts"],"names":[],"mappings":";;;AAAA,4EAAuE;AAkFvE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,UAAU,EAAE,gBAAgB,EAAE,GACrE,IAAA,2CAAmB,EAAqB;IACtC,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,6CAA6C;CAC5D,CAAC,CAAC;AAEI,sDAAqB;AAAE,4CAAgB"}

package/cjs/dialog/root/DialogRoot.d.ts

@@ -0,0 +1,179 @@
+import React from "react";
+import { DialogBody } from "../body/DialogBody";
+import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
+import { DialogDescription } from "../description/DialogDescription";
+import { DialogFooter } from "../footer/DialogFooter";
+import { DialogHeader } from "../header/DialogHeader";
+import { DialogPopup } from "../popup/DialogPopup";
+import { DialogTitle } from "../title/DialogTitle";
+import { DialogTrigger } from "../trigger/DialogTrigger";
+interface DialogProps {
+    children: React.ReactNode;
+    /**
+     * Whether the dialog is currently open.
+     */
+    open?: boolean;
+    /**
+     * Whether the dialog should be initially open.
+     *
+     * To render a controlled dialog, use the `open` prop instead.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Event handler called when the dialog is opened or closed.
+     */
+    onOpenChange?: (nextOpen: boolean, event: Event) => void;
+    /**
+     * Event handler called after any animations complete when the dialog is opened or closed.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * Updates sub-component padding + DialogTitle and DialogDescription font-size.
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+}
+interface DialogComponent extends React.FC<DialogProps> {
+    /**
+     * @see 🏷️ {@link DialogTriggerProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Trigger>
+     *      <Button>Open dialog</Button>
+     *    </Dialog.Trigger>
+     *  </Dialog>
+     * ```
+     */
+    Trigger: typeof DialogTrigger;
+    /**
+     * @see 🏷️ {@link DialogCloseTriggerProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Popup>
+     *      <Dialog.CloseTrigger>
+     *        <Button>Close dialog</Button>
+     *      </Dialog.CloseTrigger>
+     *    </Dialog.Popup>
+     *  </Dialog>
+     * ```
+     */
+    CloseTrigger: typeof DialogCloseTrigger;
+    /**
+     * @see 🏷️ {@link DialogPopupProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Popup>
+     *      ...
+     *    </Dialog.Popup>
+     *  </Dialog>
+     * ```
+     */
+    Popup: typeof DialogPopup;
+    /**
+     * @see 🏷️ {@link DialogHeaderProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Popup>
+     *      <Dialog.Header>
+     *        <Dialog.Title>Dialog title</Dialog.Title>
+     *      </Dialog.Header>
+     *    </Dialog.Popup>
+     *  </Dialog>
+     * ```
+     */
+    Header: typeof DialogHeader;
+    /**
+     * @see 🏷️ {@link DialogTitleProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Popup>
+     *      <Dialog.Header>
+     *        <Dialog.Title>Dialog title</Dialog.Title>
+     *      </Dialog.Header>
+     *    </Dialog.Popup>
+     *  </Dialog>
+     * ```
+     */
+    Title: typeof DialogTitle;
+    /**
+     * @see 🏷️ {@link DialogDescriptionProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Popup>
+     *      <Dialog.Header>
+     *        <Dialog.Title>Dialog title</Dialog.Title>
+     *        <Dialog.Description>Dialog description</Dialog.Description>
+     *      </Dialog.Header>
+     *    </Dialog.Popup>
+     *  </Dialog>
+     * ```
+     */
+    Description: typeof DialogDescription;
+    /**
+     * @see 🏷️ {@link DialogBodyProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Popup>
+     *      <Dialog.Body>
+     *        Dialog body content
+     *      </Dialog.Body>
+     *    </Dialog.Popup>
+     *  </Dialog>
+     * ```
+     */
+    Body: typeof DialogBody;
+    /**
+     * @see 🏷️ {@link DialogFooterProps}
+     * @example
+     * ```jsx
+     *  <Dialog>
+     *    <Dialog.Popup>
+     *      <Dialog.Footer>
+     *        <Dialog.CloseTrigger>
+     *          <Button>Close dialog</Button>
+     *        </Dialog.CloseTrigger>
+     *      </Dialog.Footer>
+     *    </Dialog.Popup>
+     *  </Dialog>
+     * ```
+     */
+    Footer: typeof DialogFooter;
+}
+/**
+ * Dialog component for displaying modal content on top of an application.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dialog)
+ * @see 🏷️ {@link DialogProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Trigger>
+ *      <Button>Open dialog</Button>
+ *    </Dialog.Trigger>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *        <Dialog.Description>Dialog description</Dialog.Description>
+ *      </Dialog.Header>
+ *      <Dialog.Body>
+ *        Dialog body content
+ *      </Dialog.Body>
+ *      <Dialog.Footer>
+ *        <Dialog.CloseTrigger>
+ *          <Button>Close dialog</Button>
+ *        </Dialog.CloseTrigger>
+ *      </Dialog.Footer>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+export declare const Dialog: DialogComponent;
+export default Dialog;
+export type { DialogProps };

package/cjs/dialog/root/DialogRoot.js

@@ -0,0 +1,134 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const react_1 = __importStar(require("react"));
+const util_1 = require("../../util");
+const useControllableState_1 = require("../../util/hooks/useControllableState");
+const useEventCallback_1 = require("../../util/hooks/useEventCallback");
+const useTransitionStatus_1 = require("../../util/hooks/useTransitionStatus");
+const DialogBody_1 = require("../body/DialogBody");
+const DialogCloseTrigger_1 = require("../close-trigger/DialogCloseTrigger");
+const DialogDescription_1 = require("../description/DialogDescription");
+const DialogFooter_1 = require("../footer/DialogFooter");
+const DialogHeader_1 = require("../header/DialogHeader");
+const DialogPopup_1 = require("../popup/DialogPopup");
+const DialogTitle_1 = require("../title/DialogTitle");
+const DialogTrigger_1 = require("../trigger/DialogTrigger");
+const DialogRoot_context_1 = require("./DialogRoot.context");
+/**
+ * Dialog component for displaying modal content on top of an application.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dialog)
+ * @see 🏷️ {@link DialogProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Trigger>
+ *      <Button>Open dialog</Button>
+ *    </Dialog.Trigger>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *        <Dialog.Description>Dialog description</Dialog.Description>
+ *      </Dialog.Header>
+ *      <Dialog.Body>
+ *        Dialog body content
+ *      </Dialog.Body>
+ *      <Dialog.Footer>
+ *        <Dialog.CloseTrigger>
+ *          <Button>Close dialog</Button>
+ *        </Dialog.CloseTrigger>
+ *      </Dialog.Footer>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+const Dialog = (props) => {
+    var _a;
+    const { children, defaultOpen = false, open: openParam, onOpenChange, onOpenChangeComplete, size = "medium", } = props;
+    const [open, setOpenStateInternal] = (0, useControllableState_1.useControllableState)({
+        defaultValue: defaultOpen,
+        value: openParam,
+    });
+    const { mounted, setMounted, transitionStatus } = (0, useTransitionStatus_1.useTransitionStatus)(open);
+    const popupRef = (0, react_1.useRef)(null);
+    const [triggerElement, setTriggerElement] = (0, react_1.useState)(null);
+    const [popupElement, setPopupElement] = (0, react_1.useState)(null);
+    const defaultId = (0, util_1.useId)();
+    const [titleId, setTitleId] = (0, react_1.useState)();
+    const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = (0, react_1.useState)(0);
+    const nestedDialogOpened = (0, react_1.useCallback)((nestedCount) => {
+        setOwnNestedOpenDialogs(nestedCount + 1);
+    }, []);
+    const nestedDialogClosed = (0, react_1.useCallback)(() => {
+        setOwnNestedOpenDialogs(0);
+    }, []);
+    const parentContext = (0, DialogRoot_context_1.useDialogContext)(false);
+    /**
+     * Notify parent dialog about nested dialogs opening/closing.
+     * This allows us to better hide/obscure parent dialogs when nested dialogs are opened.
+     *
+     * This pattern is not good for deep nesting since the context updates will cause cascading renders
+     * but should work fine for 1-2 levels of nesting which is the most common use case here.
+     */
+    (0, react_1.useEffect)(() => {
+        if (open && parentContext) {
+            parentContext.nestedDialogOpened(ownNestedOpenDialogs);
+            return () => parentContext.nestedDialogClosed();
+        }
+    }, [open, parentContext, ownNestedOpenDialogs]);
+    /**
+     * Passing the original event to onOpenChange to allow preventing the state change
+     */
+    const setOpen = (0, useEventCallback_1.useEventCallback)((nextOpen, originalEvent) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, originalEvent);
+        if (originalEvent === null || originalEvent === void 0 ? void 0 : originalEvent.defaultPrevented) {
+            return;
+        }
+        setOpenStateInternal(nextOpen);
+    });
+    return (react_1.default.createElement(DialogRoot_context_1.DialogContextProvider, { open: open, setOpen: setOpen, mounted: mounted, transitionStatus: transitionStatus, popupRef: popupRef, setPopupElement: setPopupElement, popupElement: popupElement, popupId: (_a = popupElement === null || popupElement === void 0 ? void 0 : popupElement.id) !== null && _a !== void 0 ? _a : defaultId, setTriggerElement: setTriggerElement, triggerElement: triggerElement, nested: !!parentContext, nestedDialogOpened: nestedDialogOpened, nestedDialogClosed: nestedDialogClosed, nestedOpenDialogCount: ownNestedOpenDialogs, size: size, titleId: titleId, setTitleId: setTitleId, onOpenChangeComplete: onOpenChangeComplete, setMounted: setMounted }, children));
+};
+exports.Dialog = Dialog;
+exports.Dialog.Trigger = DialogTrigger_1.DialogTrigger;
+exports.Dialog.CloseTrigger = DialogCloseTrigger_1.DialogCloseTrigger;
+exports.Dialog.Header = DialogHeader_1.DialogHeader;
+exports.Dialog.Title = DialogTitle_1.DialogTitle;
+exports.Dialog.Description = DialogDescription_1.DialogDescription;
+exports.Dialog.Body = DialogBody_1.DialogBody;
+exports.Dialog.Footer = DialogFooter_1.DialogFooter;
+exports.Dialog.Popup = DialogPopup_1.DialogPopup;
+exports.default = exports.Dialog;
+//# sourceMappingURL=DialogRoot.js.map

package/cjs/dialog/root/DialogRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogRoot.js","sourceRoot":"","sources":["../../../src/dialog/root/DialogRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwE;AACxE,qCAAmC;AACnC,gFAA6E;AAC7E,wEAAqE;AACrE,8EAA2E;AAC3E,mDAAgD;AAChD,4EAAyE;AACzE,wEAAqE;AACrE,yDAAsD;AACtD,yDAAsD;AACtD,sDAAmD;AACnD,sDAAmD;AACnD,4DAAyD;AACzD,6DAA+E;AAqJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACI,MAAM,MAAM,GAAoB,CAAC,KAAkB,EAAE,EAAE;;IAC5D,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,SAAS,EACf,YAAY,EACZ,oBAAoB,EACpB,IAAI,GAAG,QAAQ,GAChB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,IAAI,EAAE,oBAAoB,CAAC,GAAG,IAAA,2CAAoB,EAAC;QACxD,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,SAAS;KACjB,CAAC,CAAC;IAEH,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,IAAA,yCAAmB,EAAC,IAAI,CAAC,CAAC;IAE5E,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAErD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAClD,IAAI,CACL,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAqB,IAAI,CAAC,CAAC;IAE3E,MAAM,SAAS,GAAG,IAAA,YAAK,GAAE,CAAC;IAE1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,GAAU,CAAC;IAEjD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAEpE,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,CAAC,WAAmB,EAAE,EAAE;QAC7D,uBAAuB,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC1C,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,IAAA,qCAAgB,EAAC,KAAK,CAAC,CAAC;IAE9C;;;;;;OAMG;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,aAAa,EAAE,CAAC;YAC1B,aAAa,CAAC,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;YACvD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,kBAAkB,EAAE,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEhD;;OAEG;IACH,MAAM,OAAO,GAAG,IAAA,mCAAgB,EAC9B,CAAC,QAAiB,EAAE,aAAoB,EAAE,EAAE;QAC1C,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,QAAQ,EAAE,aAAa,CAAC,CAAC;QAExC,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,gBAAgB,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,CACF,CAAC;IAEF,OAAO,CACL,8BAAC,0CAAqB,IACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,mCAAI,SAAS,EACtC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,MAAM,EAAE,CAAC,CAAC,aAAa,EACvB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,oBAAoB,EAC3C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,oBAAoB,EAAE,oBAAoB,EAC1C,UAAU,EAAE,UAAU,IAErB,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AA9FW,QAAA,MAAM,UA8FjB;AAEF,cAAM,CAAC,OAAO,GAAG,6BAAa,CAAC;AAC/B,cAAM,CAAC,YAAY,GAAG,uCAAkB,CAAC;AACzC,cAAM,CAAC,MAAM,GAAG,2BAAY,CAAC;AAC7B,cAAM,CAAC,KAAK,GAAG,yBAAW,CAAC;AAC3B,cAAM,CAAC,WAAW,GAAG,qCAAiB,CAAC;AACvC,cAAM,CAAC,IAAI,GAAG,uBAAU,CAAC;AACzB,cAAM,CAAC,MAAM,GAAG,2BAAY,CAAC;AAC7B,cAAM,CAAC,KAAK,GAAG,yBAAW,CAAC;AAE3B,kBAAe,cAAM,CAAC"}

package/cjs/dialog/title/DialogTitle.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+/**
+ * @see 🏷️ {@link DialogTitleProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *      </Dialog.Header>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export { DialogTitle };
+export type { DialogTitleProps };