@trackunit/react-components 0.1.249 → 0.1.250

package/index.cjs.js

@@ -1814,7 +1814,6 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
     "left-0",
     "w-full",
     "h-full",
-    "bg-black/50",
     "z-20",
     "invisible",
     "opacity-0",
@@ -1825,6 +1824,10 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
             true: "animate-modal-fade",
             false: "",
         },
+        noShadow: {
+            true: "",
+            false: "bg-black/50",
+        },
     },
 });
 
@@ -1834,9 +1837,9 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
-const ModalBackdrop = ({ children, isVisible, onClick }) => {
+const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
     const ref = React__namespace.useRef(null);
-    return (jsxRuntime.jsx("div", { ref: ref, className: cvaModalBackdrop({ show: isVisible }), onMouseDown: e => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: cvaModalBackdrop({ show: isVisible, noShadow }), 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();
@@ -1850,10 +1853,10 @@ const ModalBackdrop = ({ children, isVisible, onClick }) => {
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
  
  */
-const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
+const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsxRuntime.jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsxRuntime.jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) : null }));
+    return (jsxRuntime.jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, noShadow: noBackdropShadow, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsxRuntime.jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) : null }));
 });
 Modal.displayName = "Modal";
 

package/index.esm.js

@@ -1783,7 +1783,6 @@ const cvaModalBackdrop = cvaMerge([
     "left-0",
     "w-full",
     "h-full",
-    "bg-black/50",
     "z-20",
     "invisible",
     "opacity-0",
@@ -1794,6 +1793,10 @@ const cvaModalBackdrop = cvaMerge([
             true: "animate-modal-fade",
             false: "",
         },
+        noShadow: {
+            true: "",
+            false: "bg-black/50",
+        },
     },
 });
 
@@ -1803,9 +1806,9 @@ const cvaModalBackdrop = cvaMerge([
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
-const ModalBackdrop = ({ children, isVisible, onClick }) => {
+const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
     const ref = React.useRef(null);
-    return (jsx("div", { ref: ref, className: cvaModalBackdrop({ show: isVisible }), onMouseDown: e => {
+    return (jsx("div", { ref: ref, className: cvaModalBackdrop({ show: isVisible, noShadow }), 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();
@@ -1819,10 +1822,10 @@ const ModalBackdrop = ({ children, isVisible, onClick }) => {
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
  
  */
-const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", onDismissClick = () => {
+const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
     return;
 }, }, ref) => {
-    return (jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) : null }));
+    return (jsx(ModalBackdrop, { isVisible: isOpen, onClick: onDismissClick, noShadow: noBackdropShadow, children: isOpen ? (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { dataTestId: dataTestId, className: cvaModalCard({ className }), children: children }) })) : null }));
 });
 Modal.displayName = "Modal";
 

package/package.json

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

package/src/components/Modal/Modal.d.ts

@@ -21,6 +21,10 @@ export interface ModalProps extends CommonProps {
      * Aria role to be applied to element
      */
     role?: string;
+    /**
+     * Whether modal has backdrop shadow or not
+     */
+    noBackdropShadow?: boolean;
 }
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.

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

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

package/src/components/Modal/ModalBackdrop.d.ts

@@ -3,6 +3,7 @@ export interface ModalBackdropProps {
     onClick: () => void;
     children: React.ReactNode;
     isVisible?: boolean;
+    noShadow?: boolean;
 }
 /**
  * The Backdrop for the modal.
@@ -10,4 +11,4 @@ export interface ModalBackdropProps {
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {JSX.Element} ModalBackdrop component
  */
-export declare const ModalBackdrop: ({ children, isVisible, onClick }: ModalBackdropProps) => JSX.Element;
+export declare const ModalBackdrop: ({ children, isVisible, onClick, noShadow }: ModalBackdropProps) => JSX.Element;