@trackunit/react-modal 0.0.133 → 0.0.136

package/index.cjs.js

@@ -135,9 +135,9 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
  * - 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, role = "", noBackdropShadow = false, onDismissClick = () => {
+const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, onDismissClick = () => {
     return;
 }, }, ref) => {
     const { openModal, closeModal } = reactCoreHooks.useModalDialogContext();
@@ -157,7 +157,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(), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
+    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 }));
 });
 Modal.displayName = "Modal";
 

package/index.esm.js

@@ -115,9 +115,9 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
  * - 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, role = "", noBackdropShadow = false, onDismissClick = () => {
+const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, onDismissClick = () => {
     return;
 }, }, ref) => {
     const { openModal, closeModal } = useModalDialogContext();
@@ -137,7 +137,7 @@ const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role
         };
         // 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(), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
+    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 }));
 });
 Modal.displayName = "Modal";
 

package/package.json

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

package/src/modal/Modal.d.ts

@@ -25,11 +25,15 @@ export interface ModalProps extends CommonProps {
      * Whether modal has backdrop shadow or not
      */
     noBackdropShadow?: boolean;
+    /**
+     * A custom class name to be attached to modal container
+     */
+    containerClassName?: string;
 }
 /**
  * - 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>>;