@trackunit/react-modal 1.7.13 → 1.7.18

package/index.cjs.js

@@ -5,8 +5,8 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var react$1 = require('@floating-ui/react');
 var reactComponents = require('@trackunit/react-components');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var react = require('react');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 
 var defaultTranslations = {
@@ -104,6 +104,64 @@ const ModalBackdrop = ({ children, onClick }) => {
         }, ref: ref, children: children }));
 };
 
+/**
+ * Observes the modal body within the given root element and toggles a top border on the footer
+ * when the body becomes vertically scrollable.
+ *
+ * Behavior:
+ * - Locates elements via stable data-attributes (by default: [data-modal-body], [data-modal-footer]).
+ * - Recomputes on resize, DOM mutations within the body, scroll events, and image load/error events.
+ * - Cleans up all observers/listeners on unmount or dependency change.
+ *
+ * Edge cases:
+ * - If either body or footer is missing, the hook does nothing.
+ * - No DOM mutations occur when `enabled` is false.
+ *
+ * @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.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]", } = {}) => {
+    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 });
+            }
+        });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            bodyEl.removeEventListener("scroll", update);
+            footerEl.classList.remove(borderClass);
+        };
+    }, [rootRef, borderClass, enabled, bodySelector, footerSelector]);
+};
+
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
  * - Modals interrupt a user's workflow by design.
@@ -121,20 +179,21 @@ const ModalBackdrop = ({ children, onClick }) => {
  * };
  *
  * const childComponent = ({...modalProps}: UseModalReturnValue) => {
- *  return (
- *    <Modal {...modalProps}>
- *      <CardHeader onClose={modalProps.close} heading="My Modal" />
- *      <CardBody>
+ *  return (* <Modal {...modalProps}>
+ *      <ModalHeader onClose={modalProps.close} heading="My Modal" />
+ *      <ModalBody>
  *        <p>This is a modal</p>
- *      </CardBody>
- *    </Modal>
- *  );
+ *      </ModalBody>
+ *      <ModalFooter onCancel={modalProps.close} primaryLabel="Cancel" />
+ *    </Modal> *);
  * };
  * ```
  */
 const Modal = ({ children, isOpen, role = "dialog", dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
     const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
-    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, children: children }) }) }) }) })) : null }));
+    const cardRef = react.useRef(null);
+    useModalFooterBorder(cardRef, { enabled: isOpen, borderClass: "border-t" });
+    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";
 

package/index.esm.js

@@ -3,8 +3,8 @@ 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 { zIndex } from '@trackunit/ui-design-tokens';
+import { useRef, useLayoutEffect, useState, useEffect, useCallback, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { useModalDialogContext } from '@trackunit/react-core-hooks';
 
 var defaultTranslations = {
@@ -102,6 +102,64 @@ const ModalBackdrop = ({ children, onClick }) => {
         }, ref: ref, children: children }));
 };
 
+/**
+ * Observes the modal body within the given root element and toggles a top border on the footer
+ * when the body becomes vertically scrollable.
+ *
+ * Behavior:
+ * - Locates elements via stable data-attributes (by default: [data-modal-body], [data-modal-footer]).
+ * - Recomputes on resize, DOM mutations within the body, scroll events, and image load/error events.
+ * - Cleans up all observers/listeners on unmount or dependency change.
+ *
+ * Edge cases:
+ * - If either body or footer is missing, the hook does nothing.
+ * - No DOM mutations occur when `enabled` is false.
+ *
+ * @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.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]", } = {}) => {
+    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 });
+            }
+        });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            bodyEl.removeEventListener("scroll", update);
+            footerEl.classList.remove(borderClass);
+        };
+    }, [rootRef, borderClass, enabled, bodySelector, footerSelector]);
+};
+
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
  * - Modals interrupt a user's workflow by design.
@@ -119,20 +177,21 @@ const ModalBackdrop = ({ children, onClick }) => {
  * };
  *
  * const childComponent = ({...modalProps}: UseModalReturnValue) => {
- *  return (
- *    <Modal {...modalProps}>
- *      <CardHeader onClose={modalProps.close} heading="My Modal" />
- *      <CardBody>
+ *  return (* <Modal {...modalProps}>
+ *      <ModalHeader onClose={modalProps.close} heading="My Modal" />
+ *      <ModalBody>
  *        <p>This is a modal</p>
- *      </CardBody>
- *    </Modal>
- *  );
+ *      </ModalBody>
+ *      <ModalFooter onCancel={modalProps.close} primaryLabel="Cancel" />
+ *    </Modal> *);
  * };
  * ```
  */
 const Modal = ({ children, isOpen, role = "dialog", dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
     const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
-    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, children: children }) }) }) }) })) : null }));
+    const cardRef = useRef(null);
+    useModalFooterBorder(cardRef, { enabled: isOpen, borderClass: "border-t" });
+    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";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.7.13",
+  "version": "1.7.18",
   "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.8.30",
-    "@trackunit/react-core-hooks": "1.6.58",
-    "@trackunit/css-class-variance-utilities": "1.6.54",
-    "@trackunit/i18n-library-translation": "1.6.59",
-    "@trackunit/react-test-setup": "1.3.54",
+    "@trackunit/react-components": "1.8.35",
+    "@trackunit/react-core-hooks": "1.6.62",
+    "@trackunit/css-class-variance-utilities": "1.6.58",
+    "@trackunit/i18n-library-translation": "1.6.63",
+    "@trackunit/react-test-setup": "1.3.58",
     "@floating-ui/react": "^0.26.25",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/ui-design-tokens": "1.6.56"
+    "@trackunit/ui-design-tokens": "1.6.60"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/Modal.d.ts

@@ -35,14 +35,13 @@ export type ModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOp
  * };
  *
  * const childComponent = ({...modalProps}: UseModalReturnValue) => {
- *  return (
- *    <Modal {...modalProps}>
- *      <CardHeader onClose={modalProps.close} heading="My Modal" />
- *      <CardBody>
+ *  return (* <Modal {...modalProps}>
+ *      <ModalHeader onClose={modalProps.close} heading="My Modal" />
+ *      <ModalBody>
  *        <p>This is a modal</p>
- *      </CardBody>
- *    </Modal>
- *  );
+ *      </ModalBody>
+ *      <ModalFooter onCancel={modalProps.close} primaryLabel="Cancel" />
+ *    </Modal> *);
  * };
  * ```
  */

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

@@ -1,11 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-webpack5";
 import { Modal } from "./Modal";
-import { UseModalReturnValue } from "./useModal";
 type Story = StoryObj<typeof Modal>;
 declare const meta: Meta<typeof Modal>;
 export default meta;
 export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
-export declare const OverviewTemplate: ({ ...modalProps }: UseModalReturnValue) => import("react/jsx-runtime").JSX.Element;
 export declare const Default: Story;
 export declare const IncorrectUsageErrorModal: (closeOnOutsideClick: true) => import("react/jsx-runtime").JSX.Element;
 export declare const CorrectUsagePrimaryAction: (closeOnOutsideClick: true) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface ModalBodyProps extends CommonProps {
+    /**
+     * Content to render inside the modal body. Accepts any React nodes.
+     * Typically text, lists, forms or other components.
+     * When content overflows, the container becomes scrollable.
+     */
+    children: ReactNode | null;
+}
+/**
+ * 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.
+ */
+export declare const ModalBody: import("react").ForwardRefExoticComponent<ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react-webpack5";
+import { ModalBody } from "./ModalBody";
+type Story = StoryObj<typeof ModalBody>;
+declare const meta: Meta<typeof ModalBody>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;
+export declare const InContextWithinModal: Story;

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

@@ -0,0 +1 @@
+export declare const cvaModalBodyContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -0,0 +1,65 @@
+import { CommonProps } from "@trackunit/react-components";
+export interface ModalFooterProps extends CommonProps {
+    /**
+     * Click handler for the Cancel button.
+     */
+    onCancel: () => void;
+    /**
+     * Text for the Primary action button.
+     * When omitted, the Primary button is not rendered.
+     */
+    primaryLabel?: string;
+    /**
+     * Visual variant for the Primary button.
+     * Defaults to "primary".
+     */
+    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;
+    /**
+     * Loading state for the Primary button.
+     * Defaults to false.
+     */
+    primaryLoading?: boolean;
+    /**
+     * Text for the Secondary action button.
+     * The Secondary button is rendered only if both secondaryLabel and secondaryAction are provided.
+     */
+    secondaryLabel?: string;
+    /**
+     * Click handler for the Secondary action button.
+     */
+    secondaryAction?: () => void;
+    /**
+     * Visual variant for the Secondary button.
+     * Defaults to "secondary".
+     */
+    secondaryVariant?: "secondary" | "secondary-danger";
+    /**
+     * Loading state for the Secondary button.
+     * Defaults to false.
+     */
+    secondaryLoading?: boolean;
+    /**
+     * Text for the Cancel button.
+     */
+    cancelLabel: string;
+}
+/**
+ * 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.
+ */
+export declare const ModalFooter: import("react").ForwardRefExoticComponent<ModalFooterProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react-webpack5";
+import { ModalFooter } from "./ModalFooter";
+type Story = StoryObj<typeof ModalFooter>;
+declare const meta: Meta<typeof ModalFooter>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;
+export declare const WithSecondaryAction: Story;
+export declare const PrimaryDanger: Story;
+export declare const LoadingPrimary: Story;
+export declare const OnlyCancel: Story;
+export declare const SecondaryDanger: Story;
+export declare const LoadingSecondary: Story;
+export declare const InContextWithinModal: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const cvaModalFooterContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -0,0 +1,30 @@
+import { CommonProps } from "@trackunit/react-components";
+interface ModalHeaderProps extends CommonProps {
+    /**
+     * Main title displayed in the modal header.
+     */
+    heading: string;
+    /**
+     * Optional subtitle displayed below the main title.
+     * Not rendered when undefined.
+     */
+    subHeading?: string;
+    /**
+     * Click handler for the close button.
+     */
+    onClose: () => void;
+}
+/**
+ * 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.
+ */
+export declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react-webpack5";
+import { ModalHeader } from "./ModalHeader";
+type Story = StoryObj<typeof ModalHeader>;
+declare const meta: Meta<typeof ModalHeader>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;
+export declare const WithSubHeading: Story;
+export declare const LongHeadings: Story;
+export declare const InContextWithinModal: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+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 cvaIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/modal/useModalFooterBorder.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from "react";
+type Options = {
+    borderClass?: string;
+    enabled?: boolean;
+    bodySelector?: string;
+    footerSelector?: string;
+};
+/**
+ * Observes the modal body within the given root element and toggles a top border on the footer
+ * when the body becomes vertically scrollable.
+ *
+ * Behavior:
+ * - Locates elements via stable data-attributes (by default: [data-modal-body], [data-modal-footer]).
+ * - Recomputes on resize, DOM mutations within the body, scroll events, and image load/error events.
+ * - Cleans up all observers/listeners on unmount or dependency change.
+ *
+ * Edge cases:
+ * - If either body or footer is missing, the hook does nothing.
+ * - No DOM mutations occur when `enabled` is false.
+ *
+ * @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.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 {};