@trackunit/react-modal 2.10.17 → 2.11.0

package/index.cjs.js

@@ -439,9 +439,9 @@ const cvaModalBodyContainer = cssClassVarianceUtilities.cva({
  * @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, style }, ref) => {
+const ModalBody = ({ 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.cva({
     base: [
@@ -525,20 +525,20 @@ function isCustom(props) {
  * @param props.primaryLoading Optional loading state for the Primary button.
  * @returns {ReactElement} Modal footer container element.
  */
-const ModalFooter = react.forwardRef((props, ref) => {
-    const { "data-testid": dataTestId, className, style } = props;
+const ModalFooter = (props) => {
+    const { "data-testid": dataTestId, className, style, ref } = 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, 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, 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, 
+    return (jsxRuntime.jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, ref: ref, 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
                 onClick: primaryAction, role: "button", type: "submit", variant: primaryVariant, children: primaryLabel })) : null] }));
-});
+};
 
 const cvaContainer = cssClassVarianceUtilities.cva({
     base: ["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"],
@@ -597,14 +597,14 @@ const cvaIconContainer = cssClassVarianceUtilities.cva({ base: ["flex", "place-i
  * @param {() => void} props.onClickClose Close button click handler.
  * @param {string} [props."data-testid"] Optional test id for the container.
  * @param {string} [props.className] Optional additional class name(s).
- * @returns The modal header element.
+ * @returns {ReactElement} The modal header element.
  */
-const ModalHeader = react.forwardRef(({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, style, id, children, accessories, }, ref) => {
+const ModalHeader = ({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, style, id, children, accessories, ref, }) => {
     const [t] = useTranslation();
     return (jsxRuntime.jsxs("div", { className: cvaContainer({
             className,
         }), "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", title: t("modalHeader.close"), variant: "ghost-neutral" }) })] }));
-});
+};
 
 /**
  * Trust anchor for the modal registry's outbound (iframe → host) postMessage.

package/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-library-translation';
+import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { useMergeRefs, FloatingFocusManager, FloatingOverlay, useFloating, autoUpdate, shift, useDismiss, useInteractions } from '@floating-ui/react';
 import { useOverflowBorder, useSheetSnap, useWatch, Card, Portal, Sheet, Button, Heading, Text, IconButton, Icon, useContainerBreakpoints, useViewportBreakpoints, useTimeout, SHEET_TRANSITION_DURATION_MS } from '@trackunit/react-components';
-import { useRef, useEffect, useCallback, useState, useReducer, useMemo, forwardRef, useId, useSyncExternalStore, useLayoutEffect, useContext } from 'react';
+import { useRef, useEffect, useCallback, useState, useReducer, useMemo, useId, useSyncExternalStore, useLayoutEffect, useContext } from 'react';
 import { cva } from '@trackunit/css-class-variance-utilities';
 import { ModalDialogContext, ErrorHandlingContext } from '@trackunit/react-core-contexts-api';
 
@@ -437,9 +437,9 @@ const cvaModalBodyContainer = cva({
  * @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, style }, ref) => {
+const ModalBody = ({ 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 = cva({
     base: [
@@ -523,20 +523,20 @@ function isCustom(props) {
  * @param props.primaryLoading Optional loading state for the Primary button.
  * @returns {ReactElement} Modal footer container element.
  */
-const ModalFooter = forwardRef((props, ref) => {
-    const { "data-testid": dataTestId, className, style } = props;
+const ModalFooter = (props) => {
+    const { "data-testid": dataTestId, className, style, ref } = 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, 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, 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, 
+    return (jsxs("div", { className: cvaModalFooterContainer({ className }), "data-modal-footer": true, "data-testid": dataTestId, ref: ref, 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
                 onClick: primaryAction, role: "button", type: "submit", variant: primaryVariant, children: primaryLabel })) : null] }));
-});
+};
 
 const cvaContainer = cva({
     base: ["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"],
@@ -595,14 +595,14 @@ const cvaIconContainer = cva({ base: ["flex", "place-items-center"] });
  * @param {() => void} props.onClickClose Close button click handler.
  * @param {string} [props."data-testid"] Optional test id for the container.
  * @param {string} [props.className] Optional additional class name(s).
- * @returns The modal header element.
+ * @returns {ReactElement} The modal header element.
  */
-const ModalHeader = forwardRef(({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, style, id, children, accessories, }, ref) => {
+const ModalHeader = ({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, style, id, children, accessories, ref, }) => {
     const [t] = useTranslation();
     return (jsxs("div", { className: cvaContainer({
             className,
         }), "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", title: t("modalHeader.close"), variant: "ghost-neutral" }) })] }));
-});
+};
 
 /**
  * Trust anchor for the modal registry's outbound (iframe → host) postMessage.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "2.10.17",
+  "version": "2.11.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.25",
-    "@trackunit/react-components": "3.8.10",
-    "@trackunit/css-class-variance-utilities": "2.3.10",
-    "@trackunit/shared-utils": "1.19.10",
+    "@trackunit/react-components": "3.9.0",
+    "@trackunit/css-class-variance-utilities": "2.4.0",
+    "@trackunit/shared-utils": "1.20.0",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/react-core-contexts-api": "1.22.10",
-    "@trackunit/i18n-library-translation": "2.8.11"
+    "@trackunit/react-core-contexts-api": "1.23.0",
+    "@trackunit/i18n-library-translation": "2.9.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",

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

@@ -1,6 +1,6 @@
-import { CommonProps, type Styleable } from "@trackunit/react-components";
-import { ReactNode } from "react";
-export interface ModalBodyProps extends CommonProps, Styleable {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+import { ReactElement, ReactNode } from "react";
+export interface ModalBodyProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Content to render inside the modal body. Accepts any React nodes.
      * Typically text, lists, forms or other components.
@@ -50,4 +50,4 @@ export interface ModalBodyProps extends CommonProps, Styleable {
  * @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>>;
+export declare const ModalBody: ({ children, id, "data-testid": dataTestId, className, style, ref, }: ModalBodyProps) => ReactElement;

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

@@ -1,6 +1,6 @@
-import { CommonProps, type Styleable } from "@trackunit/react-components";
-import { MouseEventHandler, ReactNode } from "react";
-interface ModalFooterBuiltInProps extends CommonProps, Styleable {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
+interface ModalFooterBuiltInProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     children?: null | undefined;
     /**
      * Click handler for the Cancel button.
@@ -66,7 +66,7 @@ interface ModalFooterBuiltInProps extends CommonProps, Styleable {
     secondaryName?: string;
     cancelName?: string;
 }
-interface ModalFooterCustomProps extends CommonProps, Styleable {
+interface ModalFooterCustomProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     children: ReactNode;
     onCancel?: never;
     cancelLabel?: never;
@@ -149,5 +149,5 @@ export type ModalFooterProps = ModalFooterBuiltInProps | ModalFooterCustomProps;
  * @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>>;
+export declare const ModalFooter: (props: ModalFooterProps) => ReactElement;
 export {};

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

@@ -1,6 +1,6 @@
-import { CommonProps, type Styleable } from "@trackunit/react-components";
-import { MouseEventHandler, ReactNode } from "react";
-export interface ModalHeaderProps extends CommonProps, Styleable {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
+export interface ModalHeaderProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Main title displayed in the modal header.
      */
@@ -77,6 +77,6 @@ export interface ModalHeaderProps extends CommonProps, Styleable {
  * @param {() => void} props.onClickClose Close button click handler.
  * @param {string} [props."data-testid"] Optional test id for the container.
  * @param {string} [props.className] Optional additional class name(s).
- * @returns The modal header element.
+ * @returns {ReactElement} The modal header element.
  */
-export declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ModalHeader: ({ heading, subHeading, onClickClose, "data-testid": dataTestId, className, style, id, children, accessories, ref, }: ModalHeaderProps) => ReactElement;