react-asc 25.2.7 → 25.2.8

package/components/Modal/ModalFooter.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const ModalFooter: ({ children }: React.ComponentProps<'div'>) => JSX.Element;
+interface IModalFooterProps extends React.ComponentProps<'div'> {
+    shadow?: boolean;
+}
+export declare const ModalFooter: (props: IModalFooterProps) => JSX.Element;
+export {};

package/components/Modal/ModalHeader.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface IModalHeaderProps extends React.ComponentProps<'div'> {
     onClose?: () => void;
     isDismissable?: boolean;
+    shadow?: boolean;
 }
 export declare const ModalHeader: (props: IModalHeaderProps) => JSX.Element;
 export {};

package/index.es.js

@@ -1798,32 +1798,49 @@ class LoadingIndicatorService {
 }
 const loadingIndicatorService = new LoadingIndicatorService();
 
-var css_248z$p = ".ModalHeader-module_modalHeader__tw-u- {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1rem 0 1rem;\n  border-top-left-radius: calc(0.3rem - 1px);\n  border-top-right-radius: calc(0.3rem - 1px);\n  border-bottom: none;\n  align-items: center;\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n  margin-bottom: 0;\n  line-height: 1.5;\n}";
-var styles$p = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
+var css_248z$p = ".ModalHeader-module_modalHeader__tw-u- {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  border-top-left-radius: calc(0.3rem - 1px);\n  border-top-right-radius: calc(0.3rem - 1px);\n  border-bottom: none;\n  align-items: center;\n}\n.ModalHeader-module_modalHeader__tw-u-.ModalHeader-module_shadow__qELWb {\n  box-shadow: var(--shadow);\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n  margin-bottom: 0;\n  line-height: 1.5;\n}";
+var styles$p = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","shadow":"ModalHeader-module_shadow__qELWb","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
 styleInject(css_248z$p);
 
 const ModalHeader = (props) => {
-    const { children, isDismissable = false, onClose, ...rest } = props;
+    const { children, shadow, className, isDismissable = false, onClose, ...rest } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$p.modalHeader);
+        shadow && cssClasses.push(styles$p.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
     const handleClick = () => {
         onClose && onClose();
     };
-    return (React.createElement("div", { className: styles$p.modalHeader, ...rest },
+    return (React.createElement("div", { className: getCssClasses(), ...rest },
         React.createElement("h5", { className: styles$p.modalTitle }, children),
         isDismissable &&
             React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
 };
 
-var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 1rem;\n}";
+var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 1rem;\n  overflow-y: auto;\n}";
 var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
 styleInject(css_248z$o);
 
 const ModalBody = ({ children }) => (React.createElement("div", { className: styles$o.modalBody }, children));
 
-var css_248z$n = ".ModalFooter-module_modalFooter__SNm-f {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-bottom-right-radius: calc(0.3rem - 1px);\n  border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n  margin: 0.25rem;\n}";
-var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
+var css_248z$n = ".ModalFooter-module_modalFooter__SNm-f {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-bottom-right-radius: calc(0.3rem - 1px);\n  border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f.ModalFooter-module_shadow__z29Cy {\n  box-shadow: var(--shadow);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n  margin: 0.25rem;\n}";
+var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f","shadow":"ModalFooter-module_shadow__z29Cy"};
 styleInject(css_248z$n);
 
-const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$n.modalFooter }, children));
+const ModalFooter = (props) => {
+    const { children, shadow, className, ...rest } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$n.modalFooter);
+        shadow && cssClasses.push(styles$n.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
+};
 
 var css_248z$m = ".Modal-module_modal__HMxWV {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n  z-index: 1111 !important;\n  border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n  max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n  max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n  max-width: 1140px;\n}\n@media (min-width: 576px) {\n  .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n    max-width: 600px;\n  }\n}\n\n.Modal-module_modalDialog__fNqyK {\n  position: relative;\n  width: auto;\n  pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  border-radius: 0.3rem;\n  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n  outline: 0;\n  margin: 1rem;\n}\n@media (min-width: 576px) {\n  .Modal-module_modalContent__9wAwB {\n    max-width: 500px;\n    margin: auto;\n  }\n}\n\n.Modal-module_fullscreen__iepGa {\n  width: 100% !important;\n  height: 100% !important;\n  max-height: 100% !important;\n  margin: 0;\n  padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n  margin: 0;\n  height: auto;\n  min-height: 100%;\n  max-height: 100%;\n  border-radius: 0;\n  overflow: auto;\n  max-width: 100%;\n}\n@media (min-width: 320px) {\n  .Modal-module_fullscreen__iepGa {\n    max-width: 100% !important;\n  }\n}";
 var styles$m = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
@@ -1831,11 +1848,21 @@ styleInject(css_248z$m);
 
 const Modal = (props) => {
     const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
+    const { isMobile } = useMobileDetect();
+    const [isFullScreen, setIsFullScreen] = useState(fullScreen);
+    useEffect(() => {
+        if (isMobile === true && (fullScreen === true || fullScreen === undefined)) {
+            setIsFullScreen(true);
+        }
+        else {
+            setIsFullScreen(false);
+        }
+    }, [isMobile, fullScreen]);
     const getCssClass = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.modalDialog);
         cssClasses.push(styles$m.modalDialogCentered);
-        fullScreen && cssClasses.push(styles$m.fullscreen);
+        isFullScreen && cssClasses.push(styles$m.fullscreen);
         size && cssClasses.push(styles$m[size]);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
@@ -1855,7 +1882,7 @@ const Modal = (props) => {
                 React.createElement("div", { className: getCssClass() },
                     React.createElement("div", { className: styles$m.modalContent },
                         header &&
-                            React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
+                            React.createElement(ModalHeader, { shadow: fullScreen, isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
                         React.createElement(ModalBody, null, children),
                         footer &&
                             React.createElement(ModalFooter, null, footer))))),

package/index.js

@@ -1807,32 +1807,49 @@ class LoadingIndicatorService {
 }
 const loadingIndicatorService = new LoadingIndicatorService();
 
-var css_248z$p = ".ModalHeader-module_modalHeader__tw-u- {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1rem 0 1rem;\n  border-top-left-radius: calc(0.3rem - 1px);\n  border-top-right-radius: calc(0.3rem - 1px);\n  border-bottom: none;\n  align-items: center;\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n  margin-bottom: 0;\n  line-height: 1.5;\n}";
-var styles$p = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
+var css_248z$p = ".ModalHeader-module_modalHeader__tw-u- {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  border-top-left-radius: calc(0.3rem - 1px);\n  border-top-right-radius: calc(0.3rem - 1px);\n  border-bottom: none;\n  align-items: center;\n}\n.ModalHeader-module_modalHeader__tw-u-.ModalHeader-module_shadow__qELWb {\n  box-shadow: var(--shadow);\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n  margin-bottom: 0;\n  line-height: 1.5;\n}";
+var styles$p = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","shadow":"ModalHeader-module_shadow__qELWb","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
 styleInject(css_248z$p);
 
 const ModalHeader = (props) => {
-    const { children, isDismissable = false, onClose, ...rest } = props;
+    const { children, shadow, className, isDismissable = false, onClose, ...rest } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$p.modalHeader);
+        shadow && cssClasses.push(styles$p.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
     const handleClick = () => {
         onClose && onClose();
     };
-    return (React__default["default"].createElement("div", { className: styles$p.modalHeader, ...rest },
+    return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
         React__default["default"].createElement("h5", { className: styles$p.modalTitle }, children),
         isDismissable &&
             React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), variant: exports.VARIANT.text, onClick: handleClick })));
 };
 
-var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 1rem;\n}";
+var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 1rem;\n  overflow-y: auto;\n}";
 var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
 styleInject(css_248z$o);
 
 const ModalBody = ({ children }) => (React__default["default"].createElement("div", { className: styles$o.modalBody }, children));
 
-var css_248z$n = ".ModalFooter-module_modalFooter__SNm-f {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-bottom-right-radius: calc(0.3rem - 1px);\n  border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n  margin: 0.25rem;\n}";
-var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
+var css_248z$n = ".ModalFooter-module_modalFooter__SNm-f {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-bottom-right-radius: calc(0.3rem - 1px);\n  border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f.ModalFooter-module_shadow__z29Cy {\n  box-shadow: var(--shadow);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n  margin: 0.25rem;\n}";
+var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f","shadow":"ModalFooter-module_shadow__z29Cy"};
 styleInject(css_248z$n);
 
-const ModalFooter = ({ children }) => (React__default["default"].createElement("div", { className: styles$n.modalFooter }, children));
+const ModalFooter = (props) => {
+    const { children, shadow, className, ...rest } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$n.modalFooter);
+        shadow && cssClasses.push(styles$n.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
+};
 
 var css_248z$m = ".Modal-module_modal__HMxWV {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n  z-index: 1111 !important;\n  border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n  max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n  max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n  max-width: 1140px;\n}\n@media (min-width: 576px) {\n  .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n    max-width: 600px;\n  }\n}\n\n.Modal-module_modalDialog__fNqyK {\n  position: relative;\n  width: auto;\n  pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  border-radius: 0.3rem;\n  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n  outline: 0;\n  margin: 1rem;\n}\n@media (min-width: 576px) {\n  .Modal-module_modalContent__9wAwB {\n    max-width: 500px;\n    margin: auto;\n  }\n}\n\n.Modal-module_fullscreen__iepGa {\n  width: 100% !important;\n  height: 100% !important;\n  max-height: 100% !important;\n  margin: 0;\n  padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n  margin: 0;\n  height: auto;\n  min-height: 100%;\n  max-height: 100%;\n  border-radius: 0;\n  overflow: auto;\n  max-width: 100%;\n}\n@media (min-width: 320px) {\n  .Modal-module_fullscreen__iepGa {\n    max-width: 100% !important;\n  }\n}";
 var styles$m = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
@@ -1840,11 +1857,21 @@ styleInject(css_248z$m);
 
 const Modal = (props) => {
     const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
+    const { isMobile } = useMobileDetect();
+    const [isFullScreen, setIsFullScreen] = React.useState(fullScreen);
+    React.useEffect(() => {
+        if (isMobile === true && (fullScreen === true || fullScreen === undefined)) {
+            setIsFullScreen(true);
+        }
+        else {
+            setIsFullScreen(false);
+        }
+    }, [isMobile, fullScreen]);
     const getCssClass = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.modalDialog);
         cssClasses.push(styles$m.modalDialogCentered);
-        fullScreen && cssClasses.push(styles$m.fullscreen);
+        isFullScreen && cssClasses.push(styles$m.fullscreen);
         size && cssClasses.push(styles$m[size]);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
@@ -1864,7 +1891,7 @@ const Modal = (props) => {
                 React__default["default"].createElement("div", { className: getCssClass() },
                     React__default["default"].createElement("div", { className: styles$m.modalContent },
                         header &&
-                            React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
+                            React__default["default"].createElement(ModalHeader, { shadow: fullScreen, isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
                         React__default["default"].createElement(ModalBody, null, children),
                         footer &&
                             React__default["default"].createElement(ModalFooter, null, footer))))),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "25.2.7",
+	"version": "25.2.8",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",