@trackunit/react-modal 1.8.109 → 1.8.112

package/index.cjs.js

@@ -236,11 +236,11 @@ const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = tru
  * };
  * ```
  */
-const Modal = ({ children, isOpen, role = "dialog", dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
+const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
     const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
     const cardRef = react.useRef(null);
     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 }));
+    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 }), "data-testid": dataTestId, ref: cardRef, children: children }) }) }) }) })) : null }));
 };
 Modal.displayName = "Modal";
 
@@ -263,10 +263,10 @@ const cvaModalBodyContainer = cssClassVarianceUtilities.cvaMerge([
  *
  * @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.
+ * @param {string} [props."data-testid"] Optional test id for the container.
  * @returns {ReactElement} Modal body wrapper element.
  */
-const ModalBody = react.forwardRef(({ children, id, dataTestId, className }, ref) => {
+const ModalBody = react.forwardRef(({ children, id, "data-testid": dataTestId, className }, ref) => {
     return (jsxRuntime.jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, children: children }));
 });
 
@@ -301,14 +301,14 @@ function isCustom(props) {
  * @returns {ReactElement} Modal footer container element.
  */
 const ModalFooter = react.forwardRef((props, ref) => {
-    const { dataTestId, className } = props;
+    const { "data-testid": 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] }));
+    return (jsxRuntime.jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsxRuntime.jsx(reactComponents.Button, { "data-testid": 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, { "data-testid": 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"]);
@@ -324,14 +324,14 @@ const cvaIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "place-item
  * @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."data-testid"] 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) => {
+const ModalHeader = react.forwardRef(({ heading, subHeading, onClose, "data-testid": 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" }) })] }));
+        }), "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", "data-testid": dataTestId ? `${dataTestId}-close-button` : "modal-close-button", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", variant: "ghost-neutral" }) })] }));
 });
 
 /**

package/index.esm.js

@@ -234,11 +234,11 @@ const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = tru
  * };
  * ```
  */
-const Modal = ({ children, isOpen, role = "dialog", dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
+const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
     const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
     const cardRef = useRef(null);
     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 }));
+    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 }), "data-testid": dataTestId, ref: cardRef, children: children }) }) }) }) })) : null }));
 };
 Modal.displayName = "Modal";
 
@@ -261,10 +261,10 @@ const cvaModalBodyContainer = cvaMerge([
  *
  * @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.
+ * @param {string} [props."data-testid"] Optional test id for the container.
  * @returns {ReactElement} Modal body wrapper element.
  */
-const ModalBody = forwardRef(({ children, id, dataTestId, className }, ref) => {
+const ModalBody = forwardRef(({ children, id, "data-testid": dataTestId, className }, ref) => {
     return (jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, children: children }));
 });
 
@@ -299,14 +299,14 @@ function isCustom(props) {
  * @returns {ReactElement} Modal footer container element.
  */
 const ModalFooter = forwardRef((props, ref) => {
-    const { dataTestId, className } = props;
+    const { "data-testid": 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] }));
+    return (jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, children: [jsx(Button, { "data-testid": dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsx(Button, { "data-testid": dataTestId ? `${dataTestId}-secondary` : undefined, disabled: primaryLoading || secondaryDisabled, loading: secondaryLoading, name: secondaryName, onClick: secondaryAction, role: "button", variant: secondaryVariant, children: secondaryLabel })) : null, primaryLabel ? (jsx(Button, { "data-testid": 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"]);
@@ -322,14 +322,14 @@ const cvaIconContainer = cvaMerge(["flex", "place-items-center"]);
  * @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."data-testid"] 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) => {
+const ModalHeader = forwardRef(({ heading, subHeading, onClose, "data-testid": 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" }) })] }));
+        }), "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", "data-testid": dataTestId ? `${dataTestId}-close-button` : "modal-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", variant: "ghost-neutral" }) })] }));
 });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.8.109",
+  "version": "1.8.112",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.10.48",
-    "@trackunit/react-core-hooks": "1.7.87",
-    "@trackunit/css-class-variance-utilities": "1.7.74",
-    "@trackunit/i18n-library-translation": "1.7.91",
+    "@trackunit/react-components": "1.10.51",
+    "@trackunit/react-core-hooks": "1.7.90",
+    "@trackunit/css-class-variance-utilities": "1.7.77",
+    "@trackunit/i18n-library-translation": "1.7.94",
     "@floating-ui/react": "^0.26.25",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/ui-design-tokens": "1.7.74"
+    "@trackunit/ui-design-tokens": "1.7.77"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/Modal.d.ts

@@ -16,7 +16,7 @@ export type ModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOp
     /**
      * The test ID applied to the modal.
      */
-    dataTestId?: string;
+    "data-testid"?: string;
 } & PropsWithChildren<UseModalReturnValue<TOnCloseFnArgs, TOnOpenFnArgs>>;
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
@@ -46,6 +46,6 @@ export type ModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOp
  * ```
  */
 export declare const Modal: {
-    <TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []>({ children, isOpen, role, dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }: ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): import("react/jsx-runtime").JSX.Element;
+    <TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []>({ children, isOpen, role, "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }: ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 declare const meta: {
     title: string;
     component: {
-        <TOnCloseFnArgs extends import("./useModal").BaseUseModalActionArgs = [], TOnOpenFnArgs extends import("./useModal").BaseUseModalActionArgs = []>({ children, isOpen, role, dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }: import("./Modal").ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): import("react/jsx-runtime").JSX.Element;
+        <TOnCloseFnArgs extends import("./useModal").BaseUseModalActionArgs = [], TOnOpenFnArgs extends import("./useModal").BaseUseModalActionArgs = []>({ children, isOpen, role, "data-testid": dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }: import("./Modal").ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     tags: string[];

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

@@ -19,7 +19,7 @@ export interface ModalBodyProps extends CommonProps {
  *
  * @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.
+ * @param {string} [props."data-testid"] 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

@@ -21,7 +21,7 @@ declare const meta: {
             control: "text";
             description: string;
         };
-        dataTestId: {
+        "data-testid": {
             control: "text";
             description: string;
         };

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

@@ -35,7 +35,7 @@ export interface ModalHeaderProps extends CommonProps {
  * @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."data-testid"] Optional test id for the container.
  * @param {string} [props.className] Optional additional class name(s).
  * @returns {ReactElement} The modal header element.
  */