@salesgenterp/ui-components 0.4.545 → 0.4.546

package/dist/index.js

@@ -2913,6 +2913,19 @@ var Dashboard = function Dashboard(_ref) {
   var _useState7 = React.useState(0),
     value = _useState7[0],
     setValue = _useState7[1];
+  var isTablet = useMediaQuery('(hover: none) and (pointer: coarse) and (min-width: 768px) and (min-height: 768px)');
+  var handleInvoiceIframeLoad = function handleInvoiceIframeLoad(event) {
+    if (!isTablet) return;
+    var iframe = event.currentTarget;
+    try {
+      var _iframe$contentWindow, _doc$body, _doc$documentElement;
+      var doc = iframe.contentDocument || ((_iframe$contentWindow = iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : _iframe$contentWindow.document);
+      var contentHeight = Math.max((doc === null || doc === void 0 ? void 0 : (_doc$body = doc.body) === null || _doc$body === void 0 ? void 0 : _doc$body.scrollHeight) || 0, (doc === null || doc === void 0 ? void 0 : (_doc$documentElement = doc.documentElement) === null || _doc$documentElement === void 0 ? void 0 : _doc$documentElement.scrollHeight) || 0);
+      if (contentHeight) {
+        iframe.style.height = contentHeight + "px";
+      }
+    } catch (_unused) {}
+  };
   React.useEffect(function () {
     if (hideSalesOrderTab) {
       setValue(1);
@@ -3320,16 +3333,21 @@ var Dashboard = function Dashboard(_ref) {
   })))))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(InvoiceDialog, {
     onClose: function onClose() {
       return setInvoiceModal({
-        open: false
+        open: false,
+        url: ''
       });
     },
     "aria-labelledby": "customized-dialog-title",
     open: invoiceModal === null || invoiceModal === void 0 ? void 0 : invoiceModal.open,
-    maxWidth: "lg"
+    maxWidth: "lg",
+    fullScreen: isTablet,
+    $tablet: isTablet
   }, /*#__PURE__*/React__default.createElement(material.DialogContent, {
     dividers: true
   }, /*#__PURE__*/React__default.createElement("iframe", {
-    src: invoiceModal.url
+    src: invoiceModal.url,
+    title: "Invoice preview",
+    onLoad: handleInvoiceIframeLoad
   }))), /*#__PURE__*/React__default.createElement(APITable, {
     key: value,
     cacheFilters: true,
@@ -3596,7 +3614,10 @@ var StatusContainer = styled__default(material.Stack)(_templateObject16 || (_tem
   return props.primaryColor;
 });
 var TableContainer = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
-var InvoiceDialog = styled__default(material.Dialog)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
+var InvoiceDialog = styled__default(material.Dialog)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n    display: block;\n  }\n\n  ", "\n"])), function (_ref3) {
+  var $tablet = _ref3.$tablet;
+  return $tablet && "\n    .MuiDialog-paper {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .MuiDialogContent-root {\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      overscroll-behavior: contain;\n      padding: 0;\n      flex: 1;\n      min-height: 0;\n    }\n\n    iframe {\n      width: 100%;\n      min-height: 600px;\n      height: auto;\n      pointer-events: none;\n    }\n  ";
+});
 var TabsContainer = styled__default(material.Tabs)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  button {\n    color: ", " !important;\n    font-size: 1.1rem;\n    font-weight: 600;\n  }\n  .Mui-selected {\n    color: ", " !important;\n  }\n  .MuiTabs-indicator {\n    background-color: ", " !important;\n  }\n"])), function (props) {
   return props.fontColor;
 }, function (props) {