@salesgenterp/ui-components 0.4.545 → 0.4.547

package/dist/index.js

@@ -2834,7 +2834,7 @@ var InfoContainer = styled__default.div(_templateObject$9 || (_templateObject$9
   return props.fontColor;
 });
 
-var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 var totalIcons = [{
   name: '',
   icon: /*#__PURE__*/React__default.createElement(ai.AiOutlineShoppingCart, null)
@@ -2913,6 +2913,38 @@ 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.offsetHeight) || 0, (doc === null || doc === void 0 ? void 0 : (_doc$documentElement = doc.documentElement) === null || _doc$documentElement === void 0 ? void 0 : _doc$documentElement.offsetHeight) || 0);
+      if (contentHeight) {
+        iframe.style.height = contentHeight + "px";
+      }
+    } catch (_unused) {}
+  };
+  React.useEffect(function () {
+    if (!isTablet || !invoiceModal.open) return;
+    var scrollY = window.scrollY;
+    document.body.style.position = 'fixed';
+    document.body.style.top = "-" + scrollY + "px";
+    document.body.style.left = '0';
+    document.body.style.right = '0';
+    document.body.style.width = '100%';
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.left = '';
+      document.body.style.right = '';
+      document.body.style.width = '';
+      document.body.style.overflow = '';
+      window.scrollTo(0, scrollY);
+    };
+  }, [isTablet, invoiceModal.open]);
   React.useEffect(function () {
     if (hideSalesOrderTab) {
       setValue(1);
@@ -3320,16 +3352,24 @@ 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"
-  }, /*#__PURE__*/React__default.createElement(material.DialogContent, {
+    maxWidth: "lg",
+    fullScreen: isTablet,
+    $tablet: isTablet
+  }, isTablet ? /*#__PURE__*/React__default.createElement(InvoiceScrollArea, null, /*#__PURE__*/React__default.createElement("iframe", {
+    src: invoiceModal.url,
+    title: "Invoice preview",
+    onLoad: handleInvoiceIframeLoad
+  })) : /*#__PURE__*/React__default.createElement(material.DialogContent, {
     dividers: true
   }, /*#__PURE__*/React__default.createElement("iframe", {
-    src: invoiceModal.url
+    src: invoiceModal.url,
+    title: "Invoice preview"
   }))), /*#__PURE__*/React__default.createElement(APITable, {
     key: value,
     cacheFilters: true,
@@ -3596,8 +3636,12 @@ 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 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) {
+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-container {\n      overscroll-behavior: none;\n    }\n\n    .MuiDialog-paper {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      height: 100%;\n      max-height: 100%;\n      margin: 0;\n    }\n  ";
+});
+var InvoiceScrollArea = styled__default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n  touch-action: pan-y;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n\n  iframe {\n    width: 100%;\n    border: none;\n    display: block;\n    pointer-events: none;\n  }\n"])));
+var TabsContainer = styled__default(material.Tabs)(_templateObject20 || (_templateObject20 = _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) {
   return props.primaryColor;
@@ -4911,7 +4955,7 @@ var getDropzoneRejectionError = function getDropzoneRejectionError(fileRejection
   return (error === null || error === void 0 ? void 0 : error.message) || 'Invalid file';
 };
 
-var _templateObject$k, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
+var _templateObject$k, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
 var DEFAULT_PRIMARY_COLOR = "#437c0f";
 var Container = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f6f6f6;\n  padding: 2rem 1rem;\n"])));
 var Card = styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  width: min(100%, 720px);\n  background: #fff;\n  border: 1px solid #cac8c8;\n  border-radius: 8px;\n  padding: 1.5rem;\n"])));
@@ -4951,7 +4995,7 @@ var DropzoneBtn = styled__default.span(_templateObject16$1 || (_templateObject16
 var DropzoneText = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.875rem;\n  color: #666;\n"])));
 var DropzoneError = styled__default.p(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem 0 0;\n  font-size: 0.8rem;\n  color: #c62828;\n"])));
 var SelectedFileRow = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.6rem 0.75rem;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  background: #fafafa;\n"])));
-var SelectedFileInfo = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n  flex: 1;\n"])));
+var SelectedFileInfo = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n  flex: 1;\n"])));
 var SelectedFileName = styled__default.span(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  font-size: 0.875rem;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 var ClearFileBtn = styled__default.button(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: none;\n  color: #c62828;\n  font-size: 1.1rem;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])));
 var UploadedFiles = styled__default.ul(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  li {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 0.875rem;\n    color: #555;\n    padding: 0.65rem 0.75rem;\n    background: #fff;\n    border: 1px solid #eee;\n    border-radius: 4px;\n  }\n"])));