@trackunit/react-modal 1.13.7 → 1.13.9

package/index.cjs.js

@@ -145,7 +145,7 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
     variants: {
         isFrontmost: {
             // Frontmost modal shows backdrop
-            true: "bg-black/50",
+            true: ["bg-black/50", "backdrop-saturate-150"],
             // Non-frontmost modals have transparent backdrop with no transition (avoids flash)
             false: ["bg-transparent", "transition-none"],
         },
@@ -531,7 +531,7 @@ const SCALE_FACTOR_PER_LEVEL = 0.05;
  * };
  * ```
  */
-const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, size, floatingUi, ref, }) => {
+const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, size, floatingUi, ref, restoreFocus = true, }) => {
     // For dialogs/modals, Floating UI recommends not using floatingStyles since the modal
     // is viewport-centered via CSS, not positioned relative to a reference element.
     // See: https://floating-ui.com/docs/dialog
@@ -543,7 +543,7 @@ const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, c
     // Track modal stack position for stacked modal styling
     const { depthFromFront, stackSizeAtOpen } = useModalStack(isOpen);
     const isFrontmost = depthFromFront === 0;
-    return (jsxRuntime.jsx(reactComponents.Portal, { root: rootElement, children: isOpen ? (jsxRuntime.jsx(react$1.FloatingOverlay, { className: cvaModalBackdrop({ isFrontmost, shouldAnimate: stackSizeAtOpen === 0 }), lockScroll: true, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, children: jsxRuntime.jsx("div", { "aria-modal": true, className: cvaModalContainer(), ref: mergedRef, role: role, 
+    return (jsxRuntime.jsx(reactComponents.Portal, { root: rootElement, children: isOpen ? (jsxRuntime.jsx(react$1.FloatingOverlay, { className: cvaModalBackdrop({ isFrontmost, shouldAnimate: stackSizeAtOpen === 0 }), lockScroll: true, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, restoreFocus: restoreFocus, children: jsxRuntime.jsx("div", { "aria-modal": true, className: cvaModalContainer(), ref: mergedRef, role: role, 
                     // Scale down modals that are behind the frontmost
                     style: isFrontmost ? undefined : { transform: `scale(${1 - depthFromFront * SCALE_FACTOR_PER_LEVEL})` }, ...getFloatingProps(), children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className, animation: stackSizeAtOpen === 0 ? "fade" : "rise" }), "data-testid": dataTestId, ref: cardRef, style: getModalCardCSSVariables(size), children: children }) }) }) })) : null }));
 };

package/index.esm.js

@@ -143,7 +143,7 @@ const cvaModalBackdrop = cvaMerge([
     variants: {
         isFrontmost: {
             // Frontmost modal shows backdrop
-            true: "bg-black/50",
+            true: ["bg-black/50", "backdrop-saturate-150"],
             // Non-frontmost modals have transparent backdrop with no transition (avoids flash)
             false: ["bg-transparent", "transition-none"],
         },
@@ -529,7 +529,7 @@ const SCALE_FACTOR_PER_LEVEL = 0.05;
  * };
  * ```
  */
-const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, size, floatingUi, ref, }) => {
+const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, className, size, floatingUi, ref, restoreFocus = true, }) => {
     // For dialogs/modals, Floating UI recommends not using floatingStyles since the modal
     // is viewport-centered via CSS, not positioned relative to a reference element.
     // See: https://floating-ui.com/docs/dialog
@@ -541,7 +541,7 @@ const Modal = ({ children, isOpen, role = "dialog", "data-testid": dataTestId, c
     // Track modal stack position for stacked modal styling
     const { depthFromFront, stackSizeAtOpen } = useModalStack(isOpen);
     const isFrontmost = depthFromFront === 0;
-    return (jsx(Portal, { root: rootElement, children: isOpen ? (jsx(FloatingOverlay, { className: cvaModalBackdrop({ isFrontmost, shouldAnimate: stackSizeAtOpen === 0 }), lockScroll: true, children: jsx(FloatingFocusManager, { context: context, children: jsx("div", { "aria-modal": true, className: cvaModalContainer(), ref: mergedRef, role: role, 
+    return (jsx(Portal, { root: rootElement, children: isOpen ? (jsx(FloatingOverlay, { className: cvaModalBackdrop({ isFrontmost, shouldAnimate: stackSizeAtOpen === 0 }), lockScroll: true, children: jsx(FloatingFocusManager, { context: context, restoreFocus: restoreFocus, children: jsx("div", { "aria-modal": true, className: cvaModalContainer(), ref: mergedRef, role: role, 
                     // Scale down modals that are behind the frontmost
                     style: isFrontmost ? undefined : { transform: `scale(${1 - depthFromFront * SCALE_FACTOR_PER_LEVEL})` }, ...getFloatingProps(), children: jsx(Card, { className: cvaModalCard({ className, animation: stackSizeAtOpen === 0 ? "fade" : "rise" }), "data-testid": dataTestId, ref: cardRef, style: getModalCardCSSVariables(size), children: children }) }) }) })) : null }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.13.7",
+  "version": "1.13.9",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.25",
-    "@trackunit/react-components": "1.16.7",
+    "@trackunit/react-components": "1.16.9",
     "react": "19.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.26",
-    "@trackunit/shared-utils": "1.13.26",
+    "@trackunit/css-class-variance-utilities": "1.11.27",
+    "@trackunit/shared-utils": "1.13.27",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/react-core-contexts-api": "1.13.7",
-    "@trackunit/i18n-library-translation": "1.12.7"
+    "@trackunit/react-core-contexts-api": "1.13.8",
+    "@trackunit/i18n-library-translation": "1.12.8"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/Modal.d.ts

@@ -17,6 +17,13 @@ export type ModalProps = PropsWithChildren<UseModalReturnValue & {
      * The test ID applied to the modal.
      */
     "data-testid"?: string;
+    /**
+     * Determines if focus should be restored to the nearest tabbable element
+     * if the currently focused element inside the modal is removed from the DOM.
+     *
+     * @default true
+     */
+    restoreFocus?: boolean;
 }>;
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
@@ -46,6 +53,6 @@ export type ModalProps = PropsWithChildren<UseModalReturnValue & {
  * ```
  */
 export declare const Modal: {
-    ({ children, isOpen, role, "data-testid": dataTestId, className, size, floatingUi, ref, }: ModalProps): ReactElement;
+    ({ children, isOpen, role, "data-testid": dataTestId, className, size, floatingUi, ref, restoreFocus, }: ModalProps): ReactElement;
     displayName: string;
 };

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

@@ -4,7 +4,7 @@ type Story = StoryObjWithOptionalArgs<typeof meta, "ref" | "isOpen" | "close" |
 declare const meta: {
     title: string;
     component: {
-        ({ children, isOpen, role, "data-testid": dataTestId, className, size, floatingUi, ref, }: import("./Modal").ModalProps): ReactElement;
+        ({ children, isOpen, role, "data-testid": dataTestId, className, size, floatingUi, ref, restoreFocus, }: import("./Modal").ModalProps): ReactElement;
         displayName: string;
     };
     tags: string[];