@trackunit/react-modal 1.3.20 → 1.3.21

package/index.cjs.js

@@ -105,25 +105,41 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
 ], {
     variants: {
         show: {
-            true: "animate-modal-fade",
+            true: "",
             false: "",
         },
         noShadow: {
             true: "",
             false: "bg-black/50",
         },
+        isFastOpen: {
+            true: "",
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            show: true,
+            isFastOpen: true,
+            class: "animate-modal-fade-fast",
+        },
+        {
+            show: true,
+            isFastOpen: false,
+            class: "animate-modal-fade",
+        },
+    ],
 });
 
 /**
  * The Backdrop for the modal.
- 
+
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
-const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
+const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) => {
     const ref = React__namespace.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
+    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]) {
                 onClick();
@@ -137,7 +153,7 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
 
  */
-const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, onDismissClick = () => {
+const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
     return;
 }, }, ref) => {
     const { openModal, closeModal } = reactCoreHooks.useModalDialogContext();
@@ -157,7 +173,7 @@ 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, { 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 }));
+    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";
 

package/index.esm.js

@@ -85,25 +85,41 @@ const cvaModalBackdrop = cvaMerge([
 ], {
     variants: {
         show: {
-            true: "animate-modal-fade",
+            true: "",
             false: "",
         },
         noShadow: {
             true: "",
             false: "bg-black/50",
         },
+        isFastOpen: {
+            true: "",
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            show: true,
+            isFastOpen: true,
+            class: "animate-modal-fade-fast",
+        },
+        {
+            show: true,
+            isFastOpen: false,
+            class: "animate-modal-fade",
+        },
+    ],
 });
 
 /**
  * The Backdrop for the modal.
- 
+
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
-const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
+const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) => {
     const ref = React.useRef(null);
-    return (jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
+    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]) {
                 onClick();
@@ -117,7 +133,7 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
 
  */
-const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, onDismissClick = () => {
+const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
     return;
 }, }, ref) => {
     const { openModal, closeModal } = useModalDialogContext();
@@ -137,7 +153,7 @@ 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, { 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 }));
+    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";
 

package/package.json

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

package/src/modal/Modal.d.ts

@@ -29,6 +29,10 @@ export interface ModalProps extends CommonProps {
      * A custom class name to be attached to modal container
      */
     containerClassName?: string;
+    /**
+     * Whether modal should open with a fast animation or not.
+     */
+    isFastOpen?: boolean;
 }
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.

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

@@ -3,4 +3,5 @@ export declare const cvaModalCard: (props?: import("class-variance-authority/dis
 export declare const cvaModalBackdrop: (props?: ({
     show?: boolean | null | undefined;
     noShadow?: boolean | null | undefined;
+    isFastOpen?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/modal/ModalBackdrop.d.ts

@@ -4,11 +4,12 @@ export interface ModalBackdropProps {
     children: React.ReactNode;
     isVisible?: boolean;
     noShadow?: boolean;
+    isFastOpen?: boolean;
 }
 /**
  * The Backdrop for the modal.
- 
+
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
-export declare const ModalBackdrop: ({ children, isVisible, onClick, noShadow }: ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBackdrop: ({ children, isVisible, onClick, noShadow, isFastOpen }: ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;