opus-toolkit-components 1.3.1 → 1.3.3

package/lib/opus-components.main.js

@@ -399,7 +399,7 @@ if (true) {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `table{width:100%}table thead th:first-of-type{border-top-left-radius:8px}table thead th:last-of-type{border-top-right-radius:8px}table tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}table tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}@media(max-width: 640px){.responsive-table-wrapper td::before{content:attr(data-label);display:block;font-weight:600;text-transform:uppercase;margin-bottom:.25rem;color:var(--color-text-strong)}button{width:100%}.responsive-table-wrapper tr{display:block}.responsive-table-wrapper td{display:block}.responsive-table-wrapper thead{display:none}}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.scss"],"names":[],"mappings":"AAAA,MAuBI,UAAA,CApBQ,6BACI,0BAAA,CAEJ,4BACI,2BAAA,CAOA,uCACI,6BAAA,CAEJ,sCACI,8BAAA,CAQpB,yBACI,qCACE,wBAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,oBAAA,CACA,8BAAA,CAEF,OACI,UAAA,CAEJ,6BACE,aAAA,CAGF,6BACE,aAAA,CAGF,gCACE,YAAA,CAAA","sourcesContent":["table {\r\n    thead {\r\n        th {\r\n            &:first-of-type {\r\n                border-top-left-radius: 8px;\r\n            }\r\n            &:last-of-type {\r\n                border-top-right-radius: 8px;\r\n            }\r\n        }\r\n    }\r\n    tr {\r\n        &:last-of-type {\r\n            td {\r\n                &:first-of-type {\r\n                    border-bottom-left-radius: 8px;\r\n                }\r\n                &:last-of-type {\r\n                    border-bottom-right-radius: 8px;\r\n                }\r\n            }\r\n        }  \r\n    }\r\n    width: 100%; \r\n}\r\n\r\n@media (max-width: 640px) {\r\n    .responsive-table-wrapper td::before {\r\n      content: attr(data-label);\r\n      display: block;\r\n      font-weight: 600;\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.25rem;\r\n      color: var(--color-text-strong);\r\n    }\r\n    button {\r\n        width:100%;\r\n    }\r\n    .responsive-table-wrapper tr {\r\n      display: block;\r\n    }\r\n  \r\n    .responsive-table-wrapper td {\r\n      display: block;\r\n    }\r\n  \r\n    .responsive-table-wrapper thead {\r\n      display: none;\r\n    }\r\n  }"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{width:100%}.wrapper table{width:100%}.wrapper table thead th:first-of-type{border-top-left-radius:8px}.wrapper table thead th:last-of-type{border-top-right-radius:8px}.wrapper table tbody tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}.wrapper table tbody tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}@media(max-width: 640px){.wrapper td::before{content:attr(data-label);display:block;font-weight:600;text-transform:uppercase;margin-bottom:.25rem;color:var(--color-text-strong)}.wrapper tr{display:block}.wrapper td{display:block}.wrapper thead{display:none}.wrapper button{width:100%}}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.scss"],"names":[],"mappings":"AAAA,SACE,UAAA,CAEA,eACE,UAAA,CAII,sCACE,0BAAA,CAGF,qCACE,2BAAA,CASE,sDACE,6BAAA,CAGF,qDACE,8BAAA,CAQZ,yBACE,oBACE,wBAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,oBAAA,CACA,8BAAA,CAGF,YACE,aAAA,CAGF,YACE,aAAA,CAGF,eACE,YAAA,CAGF,gBACE,UAAA,CAAA","sourcesContent":[".wrapper {\r\n  width: 100%;\r\n\r\n  table {\r\n    width: 100%;\r\n\r\n    thead {\r\n      th {\r\n        &:first-of-type {\r\n          border-top-left-radius: 8px;\r\n        }\r\n\r\n        &:last-of-type {\r\n          border-top-right-radius: 8px;\r\n        }\r\n      }\r\n    }\r\n\r\n    tbody {\r\n      tr {\r\n        &:last-of-type {\r\n          td {\r\n            &:first-of-type {\r\n              border-bottom-left-radius: 8px;\r\n            }\r\n\r\n            &:last-of-type {\r\n              border-bottom-right-radius: 8px;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    td::before {\r\n      content: attr(data-label);\r\n      display: block;\r\n      font-weight: 600;\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.25rem;\r\n      color: var(--color-text-strong);\r\n    }\r\n\r\n    tr {\r\n      display: block;\r\n    }\r\n\r\n    td {\r\n      display: block;\r\n    }\r\n\r\n    thead {\r\n      display: none;\r\n    }\r\n\r\n    button {\r\n      width: 100%;\r\n    }\r\n  }\r\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4289,24 +4289,24 @@ function Table(_ref) {
     rowKeyExtractor = (row, index) => index
   } = _ref;
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "responsive-table-wrapper w-full ".concat(className)
+    className: "wrapper w-full ".concat(className)
   }, /*#__PURE__*/external_react_default().createElement("table", {
-    className: "min-w-full table-auto text-left border-collapse"
+    className: " min-w-full  table-auto  text-left  border-collapse  table"
   }, /*#__PURE__*/external_react_default().createElement("thead", {
     className: "hidden sm:table-header-group"
   }, /*#__PURE__*/external_react_default().createElement("tr", {
     className: "bg-[--color-table-head-bg] ".concat(headRowClassName)
   }, data.map(column => /*#__PURE__*/external_react_default().createElement("th", {
     key: column.key,
-    className: "border-b border-[--color-stroke] py-2 px-4 text-sm font-normal text-[--color-table-head-txt] ".concat(headCellClassName)
+    className: "\n                  border-b border-[--color-stroke] \n                  py-2 px-4 \n                  text-sm font-normal text-[--color-table-head-txt] ".concat(headCellClassName)
   }, column.header)))), /*#__PURE__*/external_react_default().createElement("tbody", null, rows.map((row, index) => {
     const backgroundClass = index % 2 === 0 ? 'bg-[--color-table-row-bg-even]' : 'bg-[--color-table-row-bg-odd]';
     return /*#__PURE__*/external_react_default().createElement("tr", {
       key: rowKeyExtractor(row, index),
-      className: "block sm:table-row mb-4 sm:mb-0 rounded-lg sm:rounded-none border sm:border-0 border-[--color-stroke] p-4 sm:p-0 shadow-sm sm:shadow-none hover:bg-[--color-table-row-bg-hover] ".concat(backgroundClass, " ").concat(rowClassName)
+      className: "block \n                  sm:table-row \n                  mb-4 sm:mb-0 \n                  rounded-lg sm:rounded-none \n                  border sm:border-0 border-[--color-stroke] \n                  p-4 sm:p-0 \n                  shadow-sm sm:shadow-none \n                  hover:bg-[--color-table-row-bg-hover] ".concat(backgroundClass, " ").concat(rowClassName)
     }, data.map(column => /*#__PURE__*/external_react_default().createElement("td", {
       key: column.key,
-      className: "block sm:table-cell lg:px-4 lg:py-2 text-sm text-[--color-text-weak] ".concat(cellClassName),
+      className: "\n                      block sm:table-cell \n                      lg:px-4 lg:py-2 \n                      text-sm text-[--color-text-weak] ".concat(cellClassName),
       "data-label": column.header
     }, column.render ? column.render(row) : row[column.key])));
   }))));
@@ -12965,6 +12965,38 @@ const Navbar = _ref => {
   }, children)));
 };
 /* harmony default export */ const Navbar_Navbar = (Navbar);
+;// external "opus-toolkit-styles/assets/logos/c247-loader.gif"
+const c247_loader_gif_namespaceObject = require("opus-toolkit-styles/assets/logos/c247-loader.gif");
+var c247_loader_gif_default = /*#__PURE__*/__webpack_require__.n(c247_loader_gif_namespaceObject);
+;// ./src/components/Loader/Loader.js
+
+
+
+// TODO: Consider refactoring Loader to remove internal isLoading logic.
+// It's currently responsible for both rendering logic and presentation.
+// In production, it's better to let the parent control rendering to keep Loader focused on UI.
+// This change would improve testability, flexibility, and follow React best practices.
+
+function Loader(_ref) {
+  let {
+    isLoading,
+    loaderText = 'loading...',
+    customLoader,
+    className = ''
+  } = _ref;
+  return isLoading && /*#__PURE__*/external_react_default().createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    className: "fixed inset-0 flex flex-col items-center justify-center bg-[--color-primary-bg] bg-opacity-50 z-50 ".concat(className)
+  }, customLoader ? customLoader : /*#__PURE__*/external_react_default().createElement("img", {
+    src: (c247_loader_gif_default()),
+    alt: "Loading",
+    className: "h-60"
+  }), /*#__PURE__*/external_react_default().createElement(Text, {
+    variant: "h4",
+    className: "mt-4 animate-pulse text-center"
+  }, loaderText));
+}
 ;// ./node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js
 
 function XMarkIcon({
@@ -12994,10 +13026,13 @@ const XMarkIcon_ForwardRef = /*#__PURE__*/ external_react_.forwardRef(XMarkIcon)
 
 
 
+
 const Modal = _ref => {
   let {
     isOpen,
     onClose,
+    isLoading = false,
+    loaderText = 'Loading...',
     header,
     body,
     footer,
@@ -13025,9 +13060,15 @@ const Modal = _ref => {
     "aria-modal": "true",
     "aria-labelledby": "modal-title",
     "aria-describedby": "modal-description",
-    className: "bg-[--color-primary-bg] rounded-lg shadow-xl w-11/12 max-w-fit p-6 ".concat(className)
-  }, /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex justify-end pb-3"
+    className: "relative bg-[--color-primary-bg] rounded-lg shadow-xl w-11/12 max-w-fit p-6 ".concat(className)
+  }, isLoading && /*#__PURE__*/external_react_default().createElement("div", {
+    className: "absolute inset-0 z-10 flex flex-col bg-[--color-primary-bg] items-center justify-center rounded-lg ".concat(isLoading ? 'opacity-1' : 'opacity-0 pointer-events-none')
+  }, /*#__PURE__*/external_react_default().createElement(Loader, {
+    isLoading: true,
+    loaderText: loaderText,
+    className: "relative z-20 w-[150px] h-[110px]"
+  })), /*#__PURE__*/external_react_default().createElement("div", {
+    className: "flex justify-end pb-3 relative z-0"
   }, /*#__PURE__*/external_react_default().createElement("button", {
     onClick: onClose,
     className: "hover:cursor-pointer text-[--color-text-strong]",
@@ -13036,44 +13077,17 @@ const Modal = _ref => {
     width: "24px",
     className: "text-[--color-text-strong]"
   }))), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "border-b border-[--color-stroke] pb-4 text-[--color-text-strong] ".concat(headerClassName)
+    className: "border-b border-[--color-stroke] pb-4 text-[--color-text-strong] relative z-0 ".concat(headerClassName)
   }, /*#__PURE__*/external_react_default().createElement("div", {
     id: "modal-title"
   }, header)), /*#__PURE__*/external_react_default().createElement("div", {
     id: "modal-description",
-    className: "my-4 text-[--color-text-weak]"
+    className: "my-4 text-[--color-text-weak] relative z-0"
   }, body), /*#__PURE__*/external_react_default().createElement("div", {
-    className: "text-[--color-text-weak] ".concat(footerClassName)
+    className: "text-[--color-text-weak] relative z-0 ".concat(footerClassName)
   }, footer)));
 };
 /* harmony default export */ const Modals_Modal = (Modal);
-;// external "opus-toolkit-styles/assets/logos/c247-loader.gif"
-const c247_loader_gif_namespaceObject = require("opus-toolkit-styles/assets/logos/c247-loader.gif");
-var c247_loader_gif_default = /*#__PURE__*/__webpack_require__.n(c247_loader_gif_namespaceObject);
-;// ./src/components/Loader/Loader.js
-
-
-
-function Loader(_ref) {
-  let {
-    isLoading,
-    loaderText = 'loading...',
-    customLoader,
-    className = ''
-  } = _ref;
-  return isLoading && /*#__PURE__*/external_react_default().createElement("div", {
-    role: "status",
-    "aria-live": "polite",
-    className: "fixed inset-0 flex flex-col items-center justify-center bg-greySunkenDark1000 bg-opacity-80 z-50 ".concat(className)
-  }, customLoader ? customLoader : /*#__PURE__*/external_react_default().createElement("img", {
-    src: (c247_loader_gif_default()),
-    alt: "Loading",
-    className: "h-60"
-  }), /*#__PURE__*/external_react_default().createElement(Text, {
-    variant: "h4",
-    className: "mt-4 animate-pulse"
-  }, loaderText));
-}
 ;// external "opus-toolkit-styles/assets/logos/footer-logos.svg"
 const footer_logos_svg_namespaceObject = require("opus-toolkit-styles/assets/logos/footer-logos.svg");
 var footer_logos_svg_default = /*#__PURE__*/__webpack_require__.n(footer_logos_svg_namespaceObject);