@navikt/ds-react 7.35.3 → 7.37.0

package/esm/dialog/footer/DialogFooter.js

@@ -0,0 +1,35 @@
+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 { useRenameCSS } from "../../theme/Theme.js";
+/**
+ * @see 🏷️ {@link DialogFooterProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      <Dialog.Footer>
+ *        <Dialog.CloseTrigger>
+ *          <Button>Close dialog</Button>
+ *        </Dialog.CloseTrigger>
+ *      </Dialog.Footer>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+const DialogFooter = forwardRef((_a, forwardedRef) => {
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
+    const { cn } = useRenameCSS();
+    return (React.createElement("div", Object.assign({}, restProps, { ref: forwardedRef, className: cn("navds-dialog__footer", className) }), children));
+});
+export { DialogFooter };
+//# sourceMappingURL=DialogFooter.js.map

package/esm/dialog/footer/DialogFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.js","sourceRoot":"","sources":["../../../src/dialog/footer/DialogFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD;;;;;;;;;;;;;;GAcG;AACH,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAqC,EAAE,YAAY,EAAE,EAAE;QAAvD,EAAE,SAAS,EAAE,QAAQ,OAAgB,EAAX,SAAS,cAAnC,yBAAqC,CAAF;IAClC,MAAM,EAAE,EAAE,EAAE,GAAG,YAAY,EAAE,CAAC;IAE9B,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,KAE/C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/dialog/header/DialogHeader.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to show a close button in the header.
+     * Will trigger `onOpenChange` when clicked.
+     * @default true
+     */
+    withClosebutton?: boolean;
+}
+/**
+ * @see 🏷️ {@link DialogHeaderProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *      </Dialog.Header>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export { DialogHeader };
+export type { DialogHeaderProps };

package/esm/dialog/header/DialogHeader.js

@@ -0,0 +1,41 @@
+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 { XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../../button/index.js";
+import { useRenameCSS } from "../../theme/Theme.js";
+import { useI18n } from "../../util/i18n/i18n.hooks.js";
+import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger.js";
+/**
+ * @see 🏷️ {@link DialogHeaderProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      <Dialog.Header>
+ *        <Dialog.Title>Dialog title</Dialog.Title>
+ *      </Dialog.Header>
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+const DialogHeader = forwardRef((_a, forwardedRef) => {
+    var { className, children, withClosebutton = true } = _a, restProps = __rest(_a, ["className", "children", "withClosebutton"]);
+    const { cn } = useRenameCSS();
+    const translate = useI18n("global");
+    return (React.createElement("div", Object.assign({}, restProps, { ref: forwardedRef, className: cn("navds-dialog__header", className) }),
+        withClosebutton && (React.createElement(DialogCloseTrigger, null,
+            React.createElement(Button, { type: "button", className: cn("navds-dialog__close-button"), size: "small", variant: "tertiary-neutral", icon: React.createElement(XMarkIcon, { title: translate("close") }) }))),
+        children));
+});
+export { DialogHeader };
+//# sourceMappingURL=DialogHeader.js.map

package/esm/dialog/header/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.js","sourceRoot":"","sources":["../../../src/dialog/header/DialogHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAWzE;;;;;;;;;;;;GAYG;AACH,MAAM,YAAY,GAAG,UAAU,CAC7B,CACE,EAA6D,EAC7D,YAAY,EACZ,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,GAAG,IAAI,OAAgB,EAAX,SAAS,cAA3D,4CAA6D,CAAF;IAG3D,MAAM,EAAE,EAAE,EAAE,GAAG,YAAY,EAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpC,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC;QAE/C,eAAe,IAAI,CAClB,oBAAC,kBAAkB;YACjB,oBAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,4BAA4B,CAAC,EAC3C,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,oBAAC,SAAS,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,GAAI,GAC9C,CACiB,CACtB;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/dialog/index.d.ts

@@ -0,0 +1,18 @@
+export { Dialog } from "./root/DialogRoot.js";
+export type { DialogProps } from "./root/DialogRoot.js";
+export { DialogTrigger } from "./trigger/DialogTrigger.js";
+export type { DialogTriggerProps } from "./trigger/DialogTrigger.js";
+export { DialogPopup } from "./popup/DialogPopup.js";
+export type { DialogPopupProps } from "./popup/DialogPopup.js";
+export { DialogCloseTrigger } from "./close-trigger/DialogCloseTrigger.js";
+export type { DialogCloseTriggerProps } from "./close-trigger/DialogCloseTrigger.js";
+export { DialogHeader } from "./header/DialogHeader.js";
+export type { DialogHeaderProps } from "./header/DialogHeader.js";
+export { DialogFooter } from "./footer/DialogFooter.js";
+export type { DialogFooterProps } from "./footer/DialogFooter.js";
+export { DialogTitle } from "./title/DialogTitle.js";
+export type { DialogTitleProps } from "./title/DialogTitle.js";
+export { DialogDescription } from "./description/DialogDescription.js";
+export type { DialogDescriptionProps } from "./description/DialogDescription.js";
+export { DialogBody } from "./body/DialogBody.js";
+export type { DialogBodyProps } from "./body/DialogBody.js";

package/esm/dialog/index.js

@@ -0,0 +1,11 @@
+"use client";
+export { Dialog } from "./root/DialogRoot.js";
+export { DialogTrigger } from "./trigger/DialogTrigger.js";
+export { DialogPopup } from "./popup/DialogPopup.js";
+export { DialogCloseTrigger } from "./close-trigger/DialogCloseTrigger.js";
+export { DialogHeader } from "./header/DialogHeader.js";
+export { DialogFooter } from "./footer/DialogFooter.js";
+export { DialogTitle } from "./title/DialogTitle.js";
+export { DialogDescription } from "./description/DialogDescription.js";
+export { DialogBody } from "./body/DialogBody.js";
+//# sourceMappingURL=index.js.map

package/esm/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}

package/esm/dialog/popup/DialogPopup.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { type PortalProps } from "../../portal/index.js";
+import { type DialogPopupInternalProps } from "./DialogPopupInternal.js";
+type DialogPopupProps = DialogPopupInternalProps & Pick<PortalProps, "rootElement"> & {
+    children: React.ReactNode;
+};
+/**
+ * @see 🏷️ {@link DialogPopupProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      ...
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+declare const DialogPopup: React.ForwardRefExoticComponent<DialogPopupInternalProps & Pick<PortalProps, "rootElement"> & {
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { DialogPopup };
+export type { DialogPopupProps };

package/esm/dialog/popup/DialogPopup.js

@@ -0,0 +1,39 @@
+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 { Portal } from "../../portal/index.js";
+import { DialogBackdropInternal } from "../backdrop/DialogBackdropInternal.js";
+import { useDialogContext } from "../root/DialogRoot.context.js";
+import { DialogPopupInternal, } from "./DialogPopupInternal.js";
+/**
+ * @see 🏷️ {@link DialogPopupProps}
+ * @example
+ * ```jsx
+ *  <Dialog>
+ *    <Dialog.Popup>
+ *      ...
+ *    </Dialog.Popup>
+ *  </Dialog>
+ * ```
+ */
+const DialogPopup = forwardRef((_a, forwardedRef) => {
+    var { modal = true, withBackdrop = modal === true, rootElement, position } = _a, restProps = __rest(_a, ["modal", "withBackdrop", "rootElement", "position"]);
+    const { mounted, nested } = useDialogContext();
+    if (!mounted) {
+        return null;
+    }
+    return (React.createElement(Portal, { rootElement: rootElement },
+        withBackdrop && position !== "fullscreen" && !nested && (React.createElement(DialogBackdropInternal, null)),
+        React.createElement(DialogPopupInternal, Object.assign({ ref: forwardedRef }, restProps, { position: position, withBackdrop: withBackdrop && position !== "fullscreen", modal: modal }))));
+});
+export { DialogPopup };
+//# sourceMappingURL=DialogPopup.js.map

package/esm/dialog/popup/DialogPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogPopup.js","sourceRoot":"","sources":["../../../src/dialog/popup/DialogPopup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAoB,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EACL,mBAAmB,GAEpB,MAAM,uBAAuB,CAAC;AAO/B;;;;;;;;;;GAUG;AACH,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAMC,EACD,YAAY,EACZ,EAAE;QARF,EACE,KAAK,GAAG,IAAI,EACZ,YAAY,GAAG,KAAK,KAAK,IAAI,EAC7B,WAAW,EACX,QAAQ,OAET,EADI,SAAS,cALd,oDAMC,CADa;IAId,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE/C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAE,WAAW;QAC7B,YAAY,IAAI,QAAQ,KAAK,YAAY,IAAI,CAAC,MAAM,IAAI,CACvD,oBAAC,sBAAsB,OAAG,CAC3B;QACD,oBAAC,mBAAmB,kBAClB,GAAG,EAAE,YAAY,IACb,SAAS,IACb,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,IAAI,QAAQ,KAAK,YAAY,EACvD,KAAK,EAAE,KAAK,IACZ,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/esm/dialog/popup/DialogPopupInternal.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+interface DialogPopupInternalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Determines if the dialog enters a modal state when open.
+     * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
+     * - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+     * @default true
+     */
+    modal?: true | "trap-focus";
+    /**
+     * Determines if the dialog should close on outside clicks.
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Will try to focus the given element on mount.
+     *
+     * If not provided, Dialog will focus the popup itself.
+     */
+    initialFocusTo?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+    /**
+     * Will try to focus the given element on unmount.
+     *
+     * If not provided, Dialog will try to focus the `Dialog.Trigger` element
+     * or the last focused element before the dialog opened.
+     */
+    returnFocusTo?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+    /**
+     * The position of the dialog relative to the viewport.
+     * @default "center"
+     */
+    position?: "center" | "bottom" | "left" | "right" | "fullscreen";
+    /**
+     * CSS `width`
+     *
+     * Has no effect when `position` is set to `fullscreen`.
+     *
+     * @default "medium"
+     */
+    width?: (string & {}) | "small" | "medium" | "large";
+    /**
+     * CSS `height`
+     *
+     * Has no effect when `position` is set to `fullscreen`, `left` or `right`.
+     */
+    height?: (string & {}) | "small" | "medium" | "large";
+    /**
+     * Adds a backdrop behind the dialog popup.
+     * @default true if `modal={true}`, else `false`
+     */
+    withBackdrop?: boolean;
+    /**
+     * ARIA role for the dialog popup.
+     * @default "dialog"
+     */
+    role?: "dialog" | "alertdialog";
+}
+declare const DialogPopupInternal: React.ForwardRefExoticComponent<DialogPopupInternalProps & React.RefAttributes<HTMLDivElement>>;
+export { DialogPopupInternal };
+export type { DialogPopupInternalProps };

package/esm/dialog/popup/DialogPopupInternal.js

@@ -0,0 +1,130 @@
+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 { BoxNew } from "../../layout/box/index.js";
+import { DismissableLayer } from "../../overlays/dismissablelayer/DismissableLayer.js";
+import { useRenameCSS } from "../../theme/Theme.js";
+import { FocusBoundary } from "../../util/focus-boundary/FocusBoundary.js";
+import { FocusGuards } from "../../util/focus-guards/FocusGuards.js";
+import { useMergeRefs } from "../../util/hooks/index.js";
+import { useOpenChangeAnimationComplete } from "../../util/hooks/useOpenChangeAnimationComplete.js";
+import { useScrollLock } from "../../util/hooks/useScrollLock.js";
+import { createTransitionStatusAttribute } from "../../util/hooks/useTransitionStatus.js";
+import { useDialogContext } from "../root/DialogRoot.context.js";
+const DialogPopupInternal = 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 } = useRenameCSS();
+    const { mounted, popupRef, setPopupElement, triggerElement, setOpen, open, transitionStatus, popupElement, nestedOpenDialogCount: nestedOpenDialogCountProp, nested, size, titleId, popupId, onOpenChangeComplete, setMounted, } = useDialogContext();
+    const mergedRefs = useMergeRefs(forwardedRef, popupRef, setPopupElement);
+    useScrollLock({
+        enabled: open && modal === true,
+        mounted,
+        open,
+        referenceElement: popupElement,
+    });
+    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.createElement(FocusGuards, null,
+        React.createElement(FocusBoundary, { loop: true, trapped: open, initialFocus: resolvedInitialFocus, returnFocus: resolvedReturnFocus, modal: true },
+            React.createElement(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.createElement(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" }, 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 }))))));
+});
+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";
+}
+export { DialogPopupInternal };
+//# sourceMappingURL=DialogPopupInternal.js.map

package/esm/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/esm/dialog/root/DialogRoot.context.d.ts

@@ -0,0 +1,84 @@
+import type { TransitionStatus } from "../../util/hooks/useTransitionStatus.js";
+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/esm/dialog/root/DialogRoot.context.js

@@ -0,0 +1,7 @@
+import { createStrictContext } from "../../util/create-strict-context.js";
+const { Provider: DialogContextProvider, useContext: useDialogContext } = createStrictContext({
+    name: "DialogContext",
+    errorMessage: "useDialogContext must be used within Dialog",
+});
+export { DialogContextProvider, useDialogContext };
+//# sourceMappingURL=DialogRoot.context.js.map

package/esm/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,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAkFvE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,UAAU,EAAE,gBAAgB,EAAE,GACrE,mBAAmB,CAAqB;IACtC,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,6CAA6C;CAC5D,CAAC,CAAC;AAEL,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAC"}