@trackunit/react-modal 1.25.1 → 1.25.2

package/index.cjs.js

@@ -414,8 +414,8 @@ const cvaModalBodyContainer = cssClassVarianceUtilities.cvaMerge([
  * @param {string} [props."data-testid"] Optional test id for the container.
  * @returns {ReactElement} Modal body wrapper element.
  */
-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, ref: ref, children: children }));
+const ModalBody = react.forwardRef(({ children, id, "data-testid": dataTestId, className, style }, ref) => {
+    return (jsxRuntime.jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, ref: ref, style: style, children: children }));
 });
 
 const cvaModalFooterContainer = cssClassVarianceUtilities.cvaMerge([
@@ -499,14 +499,14 @@ function isCustom(props) {
  * @returns {ReactElement} Modal footer container element.
  */
 const ModalFooter = react.forwardRef((props, ref) => {
-    const { "data-testid": dataTestId, className } = props;
+    const { "data-testid": dataTestId, className, style } = 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 }));
+        return (jsxRuntime.jsx("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, ref: ref, style: style, children: props.children }));
     }
     // Branch with built-in buttons
     const { onCancel: onClickCancel, 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, { "data-testid": dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onClickCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsxRuntime.jsx(reactComponents.Button, { "data-testid": dataTestId ? `${dataTestId}-secondary` : undefined, disabled: primaryLoading || secondaryDisabled, loading: secondaryLoading, name: secondaryName, 
+    return (jsxRuntime.jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, style: style, children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onClickCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsxRuntime.jsx(reactComponents.Button, { "data-testid": dataTestId ? `${dataTestId}-secondary` : undefined, disabled: primaryLoading || secondaryDisabled, loading: secondaryLoading, name: secondaryName, 
                 // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                 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, 
                 // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
@@ -570,10 +570,10 @@ const cvaIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "place-item
  * @param {string} [props.className] Optional additional class name(s).
  * @returns The modal header element.
  */
-const ModalHeader = react.forwardRef(({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, id, children, accessories, }, ref) => {
+const ModalHeader = react.forwardRef(({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, style, id, children, accessories, }, ref) => {
     return (jsxRuntime.jsxs("div", { className: cvaContainer({
             className,
-        }), "data-testid": dataTestId, id: id, ref: ref, 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: onClickClose, size: "small", variant: "ghost-neutral" }) })] }));
+        }), "data-testid": dataTestId, id: id, ref: ref, style: style, 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: onClickClose, size: "small", variant: "ghost-neutral" }) })] }));
 });
 
 /**

package/index.esm.js

@@ -412,8 +412,8 @@ const cvaModalBodyContainer = cvaMerge([
  * @param {string} [props."data-testid"] Optional test id for the container.
  * @returns {ReactElement} Modal body wrapper element.
  */
-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, ref: ref, children: children }));
+const ModalBody = forwardRef(({ children, id, "data-testid": dataTestId, className, style }, ref) => {
+    return (jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, ref: ref, style: style, children: children }));
 });
 
 const cvaModalFooterContainer = cvaMerge([
@@ -497,14 +497,14 @@ function isCustom(props) {
  * @returns {ReactElement} Modal footer container element.
  */
 const ModalFooter = forwardRef((props, ref) => {
-    const { "data-testid": dataTestId, className } = props;
+    const { "data-testid": dataTestId, className, style } = 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 }));
+        return (jsx("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, ref: ref, style: style, children: props.children }));
     }
     // Branch with built-in buttons
     const { onCancel: onClickCancel, 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, { "data-testid": dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onClickCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsx(Button, { "data-testid": dataTestId ? `${dataTestId}-secondary` : undefined, disabled: primaryLoading || secondaryDisabled, loading: secondaryLoading, name: secondaryName, 
+    return (jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, style: style, children: [jsx(Button, { "data-testid": dataTestId ? `${dataTestId}-cancel` : undefined, disabled: secondaryLoading || primaryLoading, name: cancelName, onClick: onClickCancel, variant: "ghost-neutral", children: cancelLabel }), secondaryLabel && secondaryAction ? (jsx(Button, { "data-testid": dataTestId ? `${dataTestId}-secondary` : undefined, disabled: primaryLoading || secondaryDisabled, loading: secondaryLoading, name: secondaryName, 
                 // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                 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, 
                 // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
@@ -568,10 +568,10 @@ const cvaIconContainer = cvaMerge(["flex", "place-items-center"]);
  * @param {string} [props.className] Optional additional class name(s).
  * @returns The modal header element.
  */
-const ModalHeader = forwardRef(({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, id, children, accessories, }, ref) => {
+const ModalHeader = forwardRef(({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, style, id, children, accessories, }, ref) => {
     return (jsxs("div", { className: cvaContainer({
             className,
-        }), "data-testid": dataTestId, id: id, ref: ref, 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: onClickClose, size: "small", variant: "ghost-neutral" }) })] }));
+        }), "data-testid": dataTestId, id: id, ref: ref, style: style, 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: onClickClose, size: "small", variant: "ghost-neutral" }) })] }));
 });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.25.1",
+  "version": "1.25.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import { ReactNode } from "react";
-export interface ModalBodyProps extends CommonProps {
+export interface ModalBodyProps extends CommonProps, Styleable {
     /**
      * Content to render inside the modal body. Accepts any React nodes.
      * Typically text, lists, forms or other components.

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

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import { MouseEventHandler, ReactNode } from "react";
-interface ModalFooterBuiltInProps extends CommonProps {
+interface ModalFooterBuiltInProps extends CommonProps, Styleable {
     children?: null | undefined;
     /**
      * Click handler for the Cancel button.
@@ -66,7 +66,7 @@ interface ModalFooterBuiltInProps extends CommonProps {
     secondaryName?: string;
     cancelName?: string;
 }
-interface ModalFooterCustomProps extends CommonProps {
+interface ModalFooterCustomProps extends CommonProps, Styleable {
     children: ReactNode;
     onCancel?: never;
     cancelLabel?: never;

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

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import { MouseEventHandler, ReactNode } from "react";
-export interface ModalHeaderProps extends CommonProps {
+export interface ModalHeaderProps extends CommonProps, Styleable {
     /**
      * Main title displayed in the modal header.
      */