@trackunit/react-modal 1.3.26 → 1.3.31

package/index.cjs.js

@@ -4,29 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
-var React = require('react');
+var react = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var usePortal = require('react-useportal');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 var defaultTranslations = {
 	
 };
@@ -133,12 +114,12 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
 
 /**
  * The Backdrop for the modal.
-
+ *
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
- * @returns {JSX.Element} ModalBackdrop component
+ * @returns {ReactElement} ModalBackdrop component
  */
 const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) => {
-    const ref = React__namespace.useRef(null);
+    const ref = react.useRef(null);
     return (jsxRuntime.jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow, isFastOpen }), onMouseDown: e => {
             // only react on click on backdrop - accessing first child to get around styled element element
             if (ref.current !== null && e.target === ref.current.children[0]) {
@@ -151,13 +132,12 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) =
  * - 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.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
-
  */
-const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
+const Modal = ({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
     return;
-}, }, ref) => {
+}, ref, }) => {
     const { openModal, closeModal } = reactCoreHooks.useModalDialogContext();
-    React__namespace.useEffect(() => {
+    react.useEffect(() => {
         if (isOpen) {
             openModal();
         }
@@ -165,7 +145,7 @@ const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, class
             closeModal();
         }
     }, [isOpen, openModal, closeModal]);
-    React__namespace.useEffect(() => {
+    react.useEffect(() => {
         return () => {
             if (isOpen) {
                 closeModal();
@@ -174,17 +154,17 @@ const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, class
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // Empty dependency array means this effect runs only on mount and unmount
     return (jsxRuntime.jsx(ModalBackdrop, { isFastOpen: isFastOpen, isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
-});
+};
 Modal.displayName = "Modal";
 
 /**
  * The useModal component should be used to inform the user of important information.
- 
+ *
  * @param {UseModalProps} props - The props for the useModal hook
  * @returns {*} useModal return
  */
 const useModal = ({ closeOnOutsideClick, bindTo, closeOnEsc = true } = {}) => {
-    const modalRef = React.useRef(null);
+    const modalRef = react.useRef(null);
     const { isOpen, togglePortal, openPortal, closePortal, Portal } = usePortal({
         closeOnOutsideClick,
         closeOnEsc,
@@ -202,7 +182,7 @@ const useModal = ({ closeOnOutsideClick, bindTo, closeOnEsc = true } = {}) => {
     });
     const PortalWrapper = (props) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, { isOpen: isOpen, ref: modalRef, ...props }) }));
     PortalWrapper.displayName = "Modal";
-    const WrappedModal = React.useCallback(PortalWrapper, [Portal, isOpen]);
+    const WrappedModal = react.useCallback(PortalWrapper, [Portal, isOpen]);
     return {
         Modal: WrappedModal,
         toggleModal: (e) => {

package/index.esm.js

@@ -2,8 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
 import { Card } from '@trackunit/react-components';
 import { useModalDialogContext } from '@trackunit/react-core-hooks';
-import * as React from 'react';
-import { useRef, useCallback } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import usePortal from 'react-useportal';
 
@@ -113,12 +112,12 @@ const cvaModalBackdrop = cvaMerge([
 
 /**
  * The Backdrop for the modal.
-
+ *
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
- * @returns {JSX.Element} ModalBackdrop component
+ * @returns {ReactElement} ModalBackdrop component
  */
 const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) => {
-    const ref = React.useRef(null);
+    const ref = useRef(null);
     return (jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow, isFastOpen }), onMouseDown: e => {
             // only react on click on backdrop - accessing first child to get around styled element element
             if (ref.current !== null && e.target === ref.current.children[0]) {
@@ -131,13 +130,12 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) =
  * - 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.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
-
  */
-const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
+const Modal = ({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
     return;
-}, }, ref) => {
+}, ref, }) => {
     const { openModal, closeModal } = useModalDialogContext();
-    React.useEffect(() => {
+    useEffect(() => {
         if (isOpen) {
             openModal();
         }
@@ -145,7 +143,7 @@ const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, conta
             closeModal();
         }
     }, [isOpen, openModal, closeModal]);
-    React.useEffect(() => {
+    useEffect(() => {
         return () => {
             if (isOpen) {
                 closeModal();
@@ -154,12 +152,12 @@ const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, conta
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // Empty dependency array means this effect runs only on mount and unmount
     return (jsx(ModalBackdrop, { isFastOpen: isFastOpen, isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
-});
+};
 Modal.displayName = "Modal";
 
 /**
  * The useModal component should be used to inform the user of important information.
- 
+ *
  * @param {UseModalProps} props - The props for the useModal hook
  * @returns {*} useModal return
  */

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.3.26",
+  "version": "1.3.31",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=20.x"
   },
   "dependencies": {
-    "react": "18.3.1",
-    "react-useportal": "1.0.18",
-    "@trackunit/react-components": "1.4.23",
-    "@trackunit/react-core-hooks": "1.3.24",
-    "@trackunit/css-class-variance-utilities": "1.3.23",
-    "@trackunit/i18n-library-translation": "1.3.24"
+    "react": "19.0.0",
+    "react-useportal": "1.0.19",
+    "@trackunit/react-components": "1.4.28",
+    "@trackunit/react-core-hooks": "1.3.29",
+    "@trackunit/css-class-variance-utilities": "1.3.28",
+    "@trackunit/i18n-library-translation": "1.3.29"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import * as React from "react";
+import { ReactNode, Ref } from "react";
 export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
@@ -12,7 +12,7 @@ export interface ModalProps extends CommonProps {
     /**
      * Child elements to be rendered inside the modal.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Test id to be applied to the modal.
      */
@@ -29,6 +29,10 @@ export interface ModalProps extends CommonProps {
      * A custom class name to be attached to modal container
      */
     containerClassName?: string;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLDivElement>;
     /**
      * Whether modal should open with a fast animation or not.
      */
@@ -38,6 +42,8 @@ export interface ModalProps extends CommonProps {
  * - 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.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
-
  */
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Modal: {
+    ({ isOpen, children, dataTestId, className, containerClassName, role, noBackdropShadow, isFastOpen, onDismissClick, ref, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/modal/ModalBackdrop.d.ts

@@ -1,4 +1,3 @@
-import * as React from "react";
 export interface ModalBackdropProps {
     onClick: () => void;
     children: React.ReactNode;
@@ -8,8 +7,8 @@ export interface ModalBackdropProps {
 }
 /**
  * The Backdrop for the modal.
-
+ *
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
- * @returns {JSX.Element} ModalBackdrop component
+ * @returns {ReactElement} ModalBackdrop component
  */
 export declare const ModalBackdrop: ({ children, isVisible, onClick, noShadow, isFastOpen }: ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;

package/src/modal/useModal.d.ts

@@ -7,7 +7,7 @@ export interface UseModalProps {
 }
 /**
  * The useModal component should be used to inform the user of important information.
- 
+ *
  * @param {UseModalProps} props - The props for the useModal hook
  * @returns {*} useModal return
  */