@trackunit/react-modal 1.8.67 → 1.8.72

package/index.cjs.js

@@ -104,6 +104,12 @@ const ModalBackdrop = ({ children, onClick }) => {
         }, ref: ref, children: children }));
 };
 
+function resolveRootEl(refLike) {
+    if (refLike && typeof refLike === "object" && "current" in refLike) {
+        return refLike.current;
+    }
+    return refLike;
+}
 /**
  * Observes the modal body within the given root element and toggles a top border on the footer
  * when the body becomes vertically scrollable.
@@ -119,47 +125,88 @@ const ModalBackdrop = ({ children, onClick }) => {
  *
  * @param rootRef Root element that contains both the modal body and footer.
  * @param options Optional configuration.
- * @param options.borderClass CSS class toggled on the footer when the body is scrollable. Defaults to "border-t".
+ * @param options.footerClass CSS class(es) toggled on the footer when the body is scrollable. Accepts string or string[]. Defaults to "border-t".
  * @param options.enabled Whether the hook is active. Defaults to true.
  * @param options.bodySelector CSS selector to locate the body element. Defaults to "[data-modal-body]".
  * @param options.footerSelector CSS selector to locate the footer element. Defaults to "[data-modal-footer]".
  */
-const useModalFooterBorder = (rootRef, { borderClass = "border-t", enabled = true, bodySelector = "[data-modal-body]", footerSelector = "[data-modal-footer]", } = {}) => {
+const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = true, bodySelector = "[data-modal-body]", footerSelector = "[data-modal-footer]", } = {}) => {
     react.useLayoutEffect(() => {
         if (!enabled)
             return;
-        const root = rootRef.current;
-        if (!root)
-            return;
-        const bodyEl = root.querySelector(bodySelector);
-        const footerEl = root.querySelector(footerSelector);
-        if (!bodyEl || !footerEl)
-            return;
-        const update = () => {
-            const hasScrollbar = bodyEl.scrollHeight > bodyEl.clientHeight;
-            footerEl.classList.toggle(borderClass, hasScrollbar);
-        };
-        update();
-        const resizeObserver = new ResizeObserver(update);
-        resizeObserver.observe(bodyEl);
-        const mutationObserver = new MutationObserver(update);
-        mutationObserver.observe(bodyEl, { childList: true, subtree: true, characterData: true });
-        bodyEl.addEventListener("scroll", update);
-        const images = Array.from(bodyEl.querySelectorAll("img"));
-        images.forEach(img => {
-            if (!img.complete) {
-                const once = () => update();
-                img.addEventListener("load", once, { once: true });
-                img.addEventListener("error", once, { once: true });
+        let cleanup;
+        let cancelled = false;
+        const classes = Array.isArray(footerClass)
+            ? footerClass.filter(Boolean)
+            : String(footerClass).split(/\s+/).filter(Boolean);
+        let attempts = 0;
+        const MAX_ATTEMPTS = 20;
+        const tryInit = () => {
+            if (cancelled)
+                return;
+            const root = resolveRootEl(rootRef);
+            if (!root) {
+                if (attempts++ < MAX_ATTEMPTS)
+                    requestAnimationFrame(tryInit);
+                return;
+            }
+            const bodyEl = root.querySelector(bodySelector);
+            const footerEl = root.querySelector(footerSelector);
+            if (!bodyEl || !footerEl) {
+                if (attempts++ < MAX_ATTEMPTS)
+                    requestAnimationFrame(tryInit);
+                return;
             }
-        });
+            const update = () => {
+                const hasScrollbar = bodyEl.scrollHeight > bodyEl.clientHeight;
+                classes.forEach(cls => footerEl.classList.toggle(cls, hasScrollbar));
+            };
+            update();
+            const ro = new ResizeObserver(update);
+            ro.observe(bodyEl);
+            const attachImgListeners = (node) => {
+                const imgs = node.querySelectorAll("img"); // NodeListOf<HTMLImageElement>
+                imgs.forEach(img => {
+                    if (!img.complete) {
+                        const once = () => update();
+                        img.addEventListener("load", once, { once: true });
+                        img.addEventListener("error", once, { once: true });
+                    }
+                });
+            };
+            attachImgListeners(bodyEl);
+            const mo = new MutationObserver(muts => {
+                update();
+                for (const m of muts) {
+                    m.addedNodes.forEach(n => {
+                        if (n instanceof HTMLImageElement) {
+                            if (!n.complete) {
+                                const once = () => update();
+                                n.addEventListener("load", once, { once: true });
+                                n.addEventListener("error", once, { once: true });
+                            }
+                        }
+                        else if (n instanceof HTMLElement) {
+                            attachImgListeners(n);
+                        }
+                    });
+                }
+            });
+            mo.observe(bodyEl, { childList: true, subtree: true, characterData: true });
+            bodyEl.addEventListener("scroll", update, { passive: true });
+            cleanup = () => {
+                ro.disconnect();
+                mo.disconnect();
+                bodyEl.removeEventListener("scroll", update);
+                classes.forEach(cls => footerEl.classList.remove(cls));
+            };
+        };
+        requestAnimationFrame(tryInit);
         return () => {
-            resizeObserver.disconnect();
-            mutationObserver.disconnect();
-            bodyEl.removeEventListener("scroll", update);
-            footerEl.classList.remove(borderClass);
+            cancelled = true;
+            cleanup?.();
         };
-    }, [rootRef, borderClass, enabled, bodySelector, footerSelector]);
+    }, [enabled, footerClass, bodySelector, footerSelector, rootRef]);
 };
 
 /**
@@ -192,11 +239,101 @@ const useModalFooterBorder = (rootRef, { borderClass = "border-t", enabled = tru
 const Modal = ({ children, isOpen, role = "dialog", dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
     const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
     const cardRef = react.useRef(null);
-    useModalFooterBorder(cardRef, { enabled: isOpen, borderClass: "border-t" });
+    useModalFooterBorder(cardRef, { enabled: isOpen, footerClass: "border-t pt-4" });
     return (jsxRuntime.jsx(reactComponents.Portal, { root: rootElement, children: isOpen ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, children: jsxRuntime.jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: uiDesignTokens.zIndex.overlay }, ...getFloatingProps(), children: jsxRuntime.jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsxRuntime.jsx("div", { "aria-modal": true, className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, ref: cardRef, children: children }) }) }) }) })) : null }));
 };
 Modal.displayName = "Modal";
 
+const cvaModalBodyContainer = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-grow",
+    "min-h-0",
+    "overflow-auto",
+    "bg-neutral-50",
+    "flex-col",
+    "component-card-spacing",
+    "@sm:component-card-spacing-sm",
+    "@md:component-card-spacing-md",
+]);
+
+/**
+ * Modal body container.
+ *
+ * Renders children inside a scrollable flex container.
+ *
+ * @param {ModalBodyProps} props Component props.
+ * @param {ReactNode | null} props.children Content to render inside the modal body.
+ * @param {string} [props.dataTestId] Optional test id for the container.
+ * @returns {ReactElement} Modal body wrapper element.
+ */
+const ModalBody = react.forwardRef(({ children, id, dataTestId, className }, ref) => {
+    return (jsxRuntime.jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, children: children }));
+});
+
+const cvaModalFooterContainer = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    // flex-wrap
+    "justify-end",
+    "flex-row",
+    "px-4",
+    "pb-4",
+    "gap-3",
+    "bg-neutral-50",
+    "border-neutral-200",
+    "modal-footer",
+]);
+
+function isCustom(props) {
+    return props.children !== null && props.children !== undefined;
+}
+/**
+ * Modal footer with action buttons.
+ *
+ * @param props Component props.
+ * @param props.cancelLabel Text for the Cancel button.
+ * @param props.onCancel Optional handler invoked when the Cancel button is clicked (alias to onClose, if provided).
+ * @param props.secondaryLabel Text for the optional Secondary action button.
+ * @param props.secondaryAction Click handler for the optional Secondary action button.
+ * @param props.primaryLabel Text for the Primary action button.
+ * @param props.primaryAction Click handler for the Primary action button.
+ * @param props.primaryVariant Visual variant for the Primary button ("primary" | "primary-danger").
+ * @param props.primaryLoading Optional loading state for the Primary button.
+ * @returns {ReactElement} Modal footer container element.
+ */
+const ModalFooter = react.forwardRef((props, ref) => {
+    const { dataTestId, className } = props;
+    if (isCustom(props)) {
+        // Branch with children: everything else is not required
+        return (jsxRuntime.jsx("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, ref: ref, children: props.children }));
+    }
+    // Branch with built-in buttons
+    const { onCancel, cancelLabel, primaryLabel, primaryAction, primaryVariant = "primary", primaryLoading = false, primaryDisabled = false, primaryFormId, secondaryLabel, secondaryAction, secondaryVariant = "secondary", secondaryLoading = false, secondaryDisabled = false, primaryName, secondaryName, cancelName, } = props;
+    return (jsxRuntime.jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsxRuntime.jsx(reactComponents.Button, { dataTestId: dataTestId ? `${dataTestId}-secondary` : undefined, disabled: primaryLoading || secondaryDisabled, loading: secondaryLoading, name: secondaryName, onClick: secondaryAction, role: "button", variant: secondaryVariant, children: secondaryLabel })) : null, primaryLabel ? (jsxRuntime.jsx(reactComponents.Button, { dataTestId: dataTestId ? `${dataTestId}-primary` : undefined, disabled: secondaryLoading || primaryDisabled, form: primaryFormId, loading: primaryLoading, name: primaryName, onClick: primaryAction, role: "button", type: "submit", variant: primaryVariant, children: primaryLabel })) : null] }));
+});
+
+const cvaContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"]);
+const cvaHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "gap-1"]);
+const cvaTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
+const cvaIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "place-items-center"]);
+
+/**
+ * Modal header section.
+ * Displays a main heading, optional subheading, and a close button.
+ *
+ * @param {ModalHeaderProps} props Component props.
+ * @param {string} [props.heading] Main heading text.
+ * @param {string} [props.subHeading] Optional subheading content.
+ * @param {() => void} props.onClose Close button click handler.
+ * @param {string} [props.dataTestId] Optional test id for the container.
+ * @param {string} [props.className] Optional additional class name(s).
+ * @returns {ReactElement} The modal header element.
+ */
+const ModalHeader = react.forwardRef(({ heading, subHeading, onClose, dataTestId, className, id, children, accessories }, ref) => {
+    return (jsxRuntime.jsxs("div", { className: cvaContainer({
+            className,
+        }), "data-testid": dataTestId, id: id, children: [jsxRuntime.jsxs("div", { className: cvaHeadingContainer(), children: [jsxRuntime.jsxs("div", { className: cvaTitleContainer(), children: [jsxRuntime.jsx(reactComponents.Heading, { variant: "tertiary", children: heading }), accessories] }), Boolean(subHeading) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: subHeading })) : null, children] }), jsxRuntime.jsx("div", { className: cvaIconContainer(), children: jsxRuntime.jsx(reactComponents.IconButton, { className: "!h-min", dataTestId: dataTestId ? `${dataTestId}-close-button` : "modal-close-button", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", variant: "ghost-neutral" }) })] }));
+});
+
 /**
  * A hook to handle the state and configuration of Modal components.
  *
@@ -313,4 +450,7 @@ setupLibraryTranslations();
 
 exports.Modal = Modal;
 exports.ModalBackdrop = ModalBackdrop;
+exports.ModalBody = ModalBody;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
 exports.useModal = useModal;

package/index.esm.js

@@ -1,9 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { FloatingFocusManager, useFloating, autoUpdate, shift, useDismiss, useInteractions } from '@floating-ui/react';
-import { Portal, Card } from '@trackunit/react-components';
+import { Portal, Card, Button, Heading, Text, IconButton, Icon } from '@trackunit/react-components';
 import { zIndex } from '@trackunit/ui-design-tokens';
-import { useRef, useLayoutEffect, useState, useEffect, useCallback, useMemo } from 'react';
+import { useRef, useLayoutEffect, forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useModalDialogContext } from '@trackunit/react-core-hooks';
 
@@ -102,6 +102,12 @@ const ModalBackdrop = ({ children, onClick }) => {
         }, ref: ref, children: children }));
 };
 
+function resolveRootEl(refLike) {
+    if (refLike && typeof refLike === "object" && "current" in refLike) {
+        return refLike.current;
+    }
+    return refLike;
+}
 /**
  * Observes the modal body within the given root element and toggles a top border on the footer
  * when the body becomes vertically scrollable.
@@ -117,47 +123,88 @@ const ModalBackdrop = ({ children, onClick }) => {
  *
  * @param rootRef Root element that contains both the modal body and footer.
  * @param options Optional configuration.
- * @param options.borderClass CSS class toggled on the footer when the body is scrollable. Defaults to "border-t".
+ * @param options.footerClass CSS class(es) toggled on the footer when the body is scrollable. Accepts string or string[]. Defaults to "border-t".
  * @param options.enabled Whether the hook is active. Defaults to true.
  * @param options.bodySelector CSS selector to locate the body element. Defaults to "[data-modal-body]".
  * @param options.footerSelector CSS selector to locate the footer element. Defaults to "[data-modal-footer]".
  */
-const useModalFooterBorder = (rootRef, { borderClass = "border-t", enabled = true, bodySelector = "[data-modal-body]", footerSelector = "[data-modal-footer]", } = {}) => {
+const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = true, bodySelector = "[data-modal-body]", footerSelector = "[data-modal-footer]", } = {}) => {
     useLayoutEffect(() => {
         if (!enabled)
             return;
-        const root = rootRef.current;
-        if (!root)
-            return;
-        const bodyEl = root.querySelector(bodySelector);
-        const footerEl = root.querySelector(footerSelector);
-        if (!bodyEl || !footerEl)
-            return;
-        const update = () => {
-            const hasScrollbar = bodyEl.scrollHeight > bodyEl.clientHeight;
-            footerEl.classList.toggle(borderClass, hasScrollbar);
-        };
-        update();
-        const resizeObserver = new ResizeObserver(update);
-        resizeObserver.observe(bodyEl);
-        const mutationObserver = new MutationObserver(update);
-        mutationObserver.observe(bodyEl, { childList: true, subtree: true, characterData: true });
-        bodyEl.addEventListener("scroll", update);
-        const images = Array.from(bodyEl.querySelectorAll("img"));
-        images.forEach(img => {
-            if (!img.complete) {
-                const once = () => update();
-                img.addEventListener("load", once, { once: true });
-                img.addEventListener("error", once, { once: true });
+        let cleanup;
+        let cancelled = false;
+        const classes = Array.isArray(footerClass)
+            ? footerClass.filter(Boolean)
+            : String(footerClass).split(/\s+/).filter(Boolean);
+        let attempts = 0;
+        const MAX_ATTEMPTS = 20;
+        const tryInit = () => {
+            if (cancelled)
+                return;
+            const root = resolveRootEl(rootRef);
+            if (!root) {
+                if (attempts++ < MAX_ATTEMPTS)
+                    requestAnimationFrame(tryInit);
+                return;
+            }
+            const bodyEl = root.querySelector(bodySelector);
+            const footerEl = root.querySelector(footerSelector);
+            if (!bodyEl || !footerEl) {
+                if (attempts++ < MAX_ATTEMPTS)
+                    requestAnimationFrame(tryInit);
+                return;
             }
-        });
+            const update = () => {
+                const hasScrollbar = bodyEl.scrollHeight > bodyEl.clientHeight;
+                classes.forEach(cls => footerEl.classList.toggle(cls, hasScrollbar));
+            };
+            update();
+            const ro = new ResizeObserver(update);
+            ro.observe(bodyEl);
+            const attachImgListeners = (node) => {
+                const imgs = node.querySelectorAll("img"); // NodeListOf<HTMLImageElement>
+                imgs.forEach(img => {
+                    if (!img.complete) {
+                        const once = () => update();
+                        img.addEventListener("load", once, { once: true });
+                        img.addEventListener("error", once, { once: true });
+                    }
+                });
+            };
+            attachImgListeners(bodyEl);
+            const mo = new MutationObserver(muts => {
+                update();
+                for (const m of muts) {
+                    m.addedNodes.forEach(n => {
+                        if (n instanceof HTMLImageElement) {
+                            if (!n.complete) {
+                                const once = () => update();
+                                n.addEventListener("load", once, { once: true });
+                                n.addEventListener("error", once, { once: true });
+                            }
+                        }
+                        else if (n instanceof HTMLElement) {
+                            attachImgListeners(n);
+                        }
+                    });
+                }
+            });
+            mo.observe(bodyEl, { childList: true, subtree: true, characterData: true });
+            bodyEl.addEventListener("scroll", update, { passive: true });
+            cleanup = () => {
+                ro.disconnect();
+                mo.disconnect();
+                bodyEl.removeEventListener("scroll", update);
+                classes.forEach(cls => footerEl.classList.remove(cls));
+            };
+        };
+        requestAnimationFrame(tryInit);
         return () => {
-            resizeObserver.disconnect();
-            mutationObserver.disconnect();
-            bodyEl.removeEventListener("scroll", update);
-            footerEl.classList.remove(borderClass);
+            cancelled = true;
+            cleanup?.();
         };
-    }, [rootRef, borderClass, enabled, bodySelector, footerSelector]);
+    }, [enabled, footerClass, bodySelector, footerSelector, rootRef]);
 };
 
 /**
@@ -190,11 +237,101 @@ const useModalFooterBorder = (rootRef, { borderClass = "border-t", enabled = tru
 const Modal = ({ children, isOpen, role = "dialog", dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
     const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
     const cardRef = useRef(null);
-    useModalFooterBorder(cardRef, { enabled: isOpen, borderClass: "border-t" });
+    useModalFooterBorder(cardRef, { enabled: isOpen, footerClass: "border-t pt-4" });
     return (jsx(Portal, { root: rootElement, children: isOpen ? (jsx(FloatingFocusManager, { context: context, children: jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: zIndex.overlay }, ...getFloatingProps(), children: jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsx("div", { "aria-modal": true, className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, ref: cardRef, children: children }) }) }) }) })) : null }));
 };
 Modal.displayName = "Modal";
 
+const cvaModalBodyContainer = cvaMerge([
+    "flex",
+    "flex-grow",
+    "min-h-0",
+    "overflow-auto",
+    "bg-neutral-50",
+    "flex-col",
+    "component-card-spacing",
+    "@sm:component-card-spacing-sm",
+    "@md:component-card-spacing-md",
+]);
+
+/**
+ * Modal body container.
+ *
+ * Renders children inside a scrollable flex container.
+ *
+ * @param {ModalBodyProps} props Component props.
+ * @param {ReactNode | null} props.children Content to render inside the modal body.
+ * @param {string} [props.dataTestId] Optional test id for the container.
+ * @returns {ReactElement} Modal body wrapper element.
+ */
+const ModalBody = forwardRef(({ children, id, dataTestId, className }, ref) => {
+    return (jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, children: children }));
+});
+
+const cvaModalFooterContainer = cvaMerge([
+    "flex",
+    // flex-wrap
+    "justify-end",
+    "flex-row",
+    "px-4",
+    "pb-4",
+    "gap-3",
+    "bg-neutral-50",
+    "border-neutral-200",
+    "modal-footer",
+]);
+
+function isCustom(props) {
+    return props.children !== null && props.children !== undefined;
+}
+/**
+ * Modal footer with action buttons.
+ *
+ * @param props Component props.
+ * @param props.cancelLabel Text for the Cancel button.
+ * @param props.onCancel Optional handler invoked when the Cancel button is clicked (alias to onClose, if provided).
+ * @param props.secondaryLabel Text for the optional Secondary action button.
+ * @param props.secondaryAction Click handler for the optional Secondary action button.
+ * @param props.primaryLabel Text for the Primary action button.
+ * @param props.primaryAction Click handler for the Primary action button.
+ * @param props.primaryVariant Visual variant for the Primary button ("primary" | "primary-danger").
+ * @param props.primaryLoading Optional loading state for the Primary button.
+ * @returns {ReactElement} Modal footer container element.
+ */
+const ModalFooter = forwardRef((props, ref) => {
+    const { dataTestId, className } = props;
+    if (isCustom(props)) {
+        // Branch with children: everything else is not required
+        return (jsx("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, ref: ref, children: props.children }));
+    }
+    // Branch with built-in buttons
+    const { onCancel, cancelLabel, primaryLabel, primaryAction, primaryVariant = "primary", primaryLoading = false, primaryDisabled = false, primaryFormId, secondaryLabel, secondaryAction, secondaryVariant = "secondary", secondaryLoading = false, secondaryDisabled = false, primaryName, secondaryName, cancelName, } = props;
+    return (jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, children: [jsx(Button, { dataTestId: dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsx(Button, { dataTestId: dataTestId ? `${dataTestId}-secondary` : undefined, disabled: primaryLoading || secondaryDisabled, loading: secondaryLoading, name: secondaryName, onClick: secondaryAction, role: "button", variant: secondaryVariant, children: secondaryLabel })) : null, primaryLabel ? (jsx(Button, { dataTestId: dataTestId ? `${dataTestId}-primary` : undefined, disabled: secondaryLoading || primaryDisabled, form: primaryFormId, loading: primaryLoading, name: primaryName, onClick: primaryAction, role: "button", type: "submit", variant: primaryVariant, children: primaryLabel })) : null] }));
+});
+
+const cvaContainer = cvaMerge(["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"]);
+const cvaHeadingContainer = cvaMerge(["flex", "flex-col", "justify-center", "gap-1"]);
+const cvaTitleContainer = cvaMerge(["flex", "items-center", "gap-1"]);
+const cvaIconContainer = cvaMerge(["flex", "place-items-center"]);
+
+/**
+ * Modal header section.
+ * Displays a main heading, optional subheading, and a close button.
+ *
+ * @param {ModalHeaderProps} props Component props.
+ * @param {string} [props.heading] Main heading text.
+ * @param {string} [props.subHeading] Optional subheading content.
+ * @param {() => void} props.onClose Close button click handler.
+ * @param {string} [props.dataTestId] Optional test id for the container.
+ * @param {string} [props.className] Optional additional class name(s).
+ * @returns {ReactElement} The modal header element.
+ */
+const ModalHeader = forwardRef(({ heading, subHeading, onClose, dataTestId, className, id, children, accessories }, ref) => {
+    return (jsxs("div", { className: cvaContainer({
+            className,
+        }), "data-testid": dataTestId, id: id, children: [jsxs("div", { className: cvaHeadingContainer(), children: [jsxs("div", { className: cvaTitleContainer(), children: [jsx(Heading, { variant: "tertiary", children: heading }), accessories] }), Boolean(subHeading) ? (jsx(Text, { size: "small", subtle: true, children: subHeading })) : null, children] }), jsx("div", { className: cvaIconContainer(), children: jsx(IconButton, { className: "!h-min", dataTestId: dataTestId ? `${dataTestId}-close-button` : "modal-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", variant: "ghost-neutral" }) })] }));
+});
+
 /**
  * A hook to handle the state and configuration of Modal components.
  *
@@ -309,4 +446,4 @@ const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOu
  */
 setupLibraryTranslations();
 
-export { Modal, ModalBackdrop, useModal };
+export { Modal, ModalBackdrop, ModalBody, ModalFooter, ModalHeader, useModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.8.67",
+  "version": "1.8.72",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.10.7",
-    "@trackunit/react-core-hooks": "1.7.52",
-    "@trackunit/css-class-variance-utilities": "1.7.44",
-    "@trackunit/i18n-library-translation": "1.7.55",
-    "@trackunit/react-test-setup": "1.4.44",
+    "@trackunit/react-components": "1.10.12",
+    "@trackunit/react-core-hooks": "1.7.55",
+    "@trackunit/css-class-variance-utilities": "1.7.47",
+    "@trackunit/i18n-library-translation": "1.7.58",
+    "@trackunit/react-test-setup": "1.4.47",
     "@floating-ui/react": "^0.26.25",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/ui-design-tokens": "1.7.44"
+    "@trackunit/ui-design-tokens": "1.7.47"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/ModalBody/ModalBody.d.ts

@@ -7,6 +7,10 @@ export interface ModalBodyProps extends CommonProps {
      * When content overflows, the container becomes scrollable.
      */
     children: ReactNode | null;
+    /**
+     * The id of the element.
+     */
+    id?: string;
 }
 /**
  * Modal body container.

package/src/modal/ModalFooter/ModalFooter.d.ts

@@ -1,5 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
-export interface ModalFooterProps extends CommonProps {
+import { ReactNode } from "react";
+interface ModalFooterBuiltInProps extends CommonProps {
+    children?: null | undefined;
     /**
      * Click handler for the Cancel button.
      */
@@ -8,7 +10,7 @@ export interface ModalFooterProps extends CommonProps {
      * Text for the Primary action button.
      * When omitted, the Primary button is not rendered.
      */
-    primaryLabel?: string;
+    primaryLabel?: string | null;
     /**
      * Visual variant for the Primary button.
      * Defaults to "primary".
@@ -16,19 +18,26 @@ export interface ModalFooterProps extends CommonProps {
     primaryVariant?: "primary" | "primary-danger";
     /**
      * Click handler for the Primary action button.
-     * The Primary button is rendered only if both primaryLabel and primaryAction are provided.
      */
-    primaryAction?: () => void;
+    primaryAction?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     /**
      * Loading state for the Primary button.
      * Defaults to false.
      */
     primaryLoading?: boolean;
+    /**
+     * Disabled state for the Primary button.
+     * Defaults to false.
+     * Note: the Primary button is also disabled while `secondaryLoading` is true.
+     */
+    primaryDisabled?: boolean;
+    /** Optional form id to bind the Primary button to an external form */
+    primaryFormId?: string;
     /**
      * Text for the Secondary action button.
      * The Secondary button is rendered only if both secondaryLabel and secondaryAction are provided.
      */
-    secondaryLabel?: string;
+    secondaryLabel?: string | null;
     /**
      * Click handler for the Secondary action button.
      */
@@ -43,11 +52,40 @@ export interface ModalFooterProps extends CommonProps {
      * Defaults to false.
      */
     secondaryLoading?: boolean;
+    /**
+     * Disabled state for the Secondary button.
+     * Defaults to false.
+     * Note: the Secondary button is also disabled while `primaryLoading` is true.
+     */
+    secondaryDisabled?: boolean;
     /**
      * Text for the Cancel button.
      */
     cancelLabel: string;
+    primaryName?: string;
+    secondaryName?: string;
+    cancelName?: string;
+}
+interface ModalFooterCustomProps extends CommonProps {
+    children: ReactNode;
+    onCancel?: never;
+    cancelLabel?: never;
+    primaryLabel?: never;
+    primaryVariant?: never;
+    primaryAction?: never;
+    primaryLoading?: never;
+    primaryDisabled?: never;
+    primaryFormId?: never;
+    secondaryLabel?: never;
+    secondaryAction?: never;
+    secondaryVariant?: never;
+    secondaryLoading?: never;
+    secondaryDisabled?: never;
+    primaryName?: never;
+    secondaryName?: never;
+    cancelName?: never;
 }
+export type ModalFooterProps = ModalFooterBuiltInProps | ModalFooterCustomProps;
 /**
  * Modal footer with action buttons.
  *
@@ -63,3 +101,4 @@ export interface ModalFooterProps extends CommonProps {
  * @returns {ReactElement} Modal footer container element.
  */
 export declare const ModalFooter: import("react").ForwardRefExoticComponent<ModalFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/src/modal/ModalHeader/ModalHeader.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
+import { ReactElement, ReactNode } from "react";
 export interface ModalHeaderProps extends CommonProps {
     /**
      * Main title displayed in the modal header.
@@ -8,11 +9,23 @@ export interface ModalHeaderProps extends CommonProps {
      * Optional subtitle displayed below the main title.
      * Not rendered when undefined.
      */
-    subHeading?: string;
+    subHeading?: string | null | ReactElement;
     /**
      * Click handler for the close button.
      */
     onClose: () => void;
+    /**
+     * The id of the element.
+     */
+    id?: string;
+    /**
+     * Children to render in the header
+     */
+    children?: ReactNode | null;
+    /**
+     * Items to render next to the heading
+     */
+    accessories?: ReactNode;
 }
 /**
  * Modal header section.

package/src/modal/ModalHeader/ModalHeader.stories.d.ts

@@ -23,5 +23,6 @@ export default meta;
 export declare const PackageName: () => ReactElement;
 export declare const Default: Story;
 export declare const WithSubHeading: Story;
+export declare const WithAccessories: Story;
 export declare const LongHeadings: Story;
 export declare const InContextWithinModal: () => ReactElement;

package/src/modal/ModalHeader/ModalHeader.variants.d.ts

@@ -1,3 +1,4 @@
 export declare const cvaContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTitleContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/modal/index.d.ts

@@ -1,3 +1,6 @@
 export * from "./Modal";
 export * from "./ModalBackdrop";
+export * from "./ModalBody/ModalBody";
+export * from "./ModalFooter/ModalFooter";
+export * from "./ModalHeader/ModalHeader";
 export * from "./useModal";

package/src/modal/useModalFooterBorder.d.ts

@@ -1,10 +1,12 @@
 import { RefObject } from "react";
 type Options = {
-    borderClass?: string;
+    footerClass?: string | Array<string>;
     enabled?: boolean;
     bodySelector?: string;
     footerSelector?: string;
 };
+type ElementRef = HTMLElement | null;
+type ElementRefLike = ElementRef | RefObject<ElementRef>;
 /**
  * Observes the modal body within the given root element and toggles a top border on the footer
  * when the body becomes vertically scrollable.
@@ -20,10 +22,10 @@ type Options = {
  *
  * @param rootRef Root element that contains both the modal body and footer.
  * @param options Optional configuration.
- * @param options.borderClass CSS class toggled on the footer when the body is scrollable. Defaults to "border-t".
+ * @param options.footerClass CSS class(es) toggled on the footer when the body is scrollable. Accepts string or string[]. Defaults to "border-t".
  * @param options.enabled Whether the hook is active. Defaults to true.
  * @param options.bodySelector CSS selector to locate the body element. Defaults to "[data-modal-body]".
  * @param options.footerSelector CSS selector to locate the footer element. Defaults to "[data-modal-footer]".
  */
-export declare const useModalFooterBorder: (rootRef: RefObject<HTMLElement | null>, { borderClass, enabled, bodySelector, footerSelector, }?: Options) => void;
+export declare const useModalFooterBorder: (rootRef: ElementRefLike, { footerClass, enabled, bodySelector, footerSelector, }?: Options) => void;
 export {};