react-asc 25.2.8 → 25.2.9

package/index.es.js

@@ -1820,7 +1820,7 @@ const ModalHeader = (props) => {
             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  overflow-y: auto;\n}";
+var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 0 1rem 1rem 1rem;\n  overflow-y: auto;\n}";
 var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
 styleInject(css_248z$o);
 
@@ -1842,28 +1842,18 @@ const ModalFooter = (props) => {
     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 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  max-height: 600px;\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"};
 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);
-        isFullScreen && cssClasses.push(styles$m.fullscreen);
         size && cssClasses.push(styles$m[size]);
+        fullScreen && cssClasses.push(styles$m.fullscreen);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
@@ -1882,7 +1872,7 @@ const Modal = (props) => {
                 React.createElement("div", { className: getCssClass() },
                     React.createElement("div", { className: styles$m.modalContent },
                         header &&
-                            React.createElement(ModalHeader, { shadow: fullScreen, isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
+                            React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
                         React.createElement(ModalBody, null, children),
                         footer &&
                             React.createElement(ModalFooter, null, footer))))),

package/index.js

@@ -1829,7 +1829,7 @@ const ModalHeader = (props) => {
             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  overflow-y: auto;\n}";
+var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 0 1rem 1rem 1rem;\n  overflow-y: auto;\n}";
 var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
 styleInject(css_248z$o);
 
@@ -1851,28 +1851,18 @@ const ModalFooter = (props) => {
     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 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  max-height: 600px;\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"};
 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);
-        isFullScreen && cssClasses.push(styles$m.fullscreen);
         size && cssClasses.push(styles$m[size]);
+        fullScreen && cssClasses.push(styles$m.fullscreen);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
@@ -1891,7 +1881,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, { shadow: fullScreen, isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
+                            React__default["default"].createElement(ModalHeader, { 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.8",
+	"version": "25.2.9",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",