@majoo-ui/react 1.54.8-rc.1 → 1.54.9

package/components/table/Table.d.ts

@@ -1273,6 +1273,10 @@ export interface TableColumnProps {
      * If true, the column will be rendered on the bottom flex of mobile layout.
      */
     isAction?: boolean;
+    /**
+     * Additional column header styles css.
+     */
+    headerCss?: CSS;
 }
 export declare const TableColumn: React.FC<TableColumnProps>;
 export {};

package/index.esm.js

@@ -17114,7 +17114,6 @@ function InputDatePicker({
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
-  console.log(placement);
   useEffect(() => {
     setValue(date || dateValue);
   }, [date, dateValue]);
@@ -18045,8 +18044,6 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
 
           if (customRowsStyle && customRowsStyle(row.values).length) {
             for (let i = 0; i < customRowsStyle(row.values).length; i++) {
-              console.log(customRowsStyle(row.values)[i]);
-
               if (customRowsStyle(row.values)[i].predicate) {
                 customStyle = customRowsStyle(row.values)[i].css;
               }
@@ -18705,7 +18702,7 @@ function Table({
                       minWidth: column.colMinWidth
                     }
                   }]), {
-                    css: Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth))
+                    css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss)
                   }, {
                     children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
                       isSortedDesc: column.isSortedDesc,
@@ -18802,11 +18799,11 @@ function Table({
                       subCell: true,
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
-                      css: Object.assign({
+                      css: Object.assign(Object.assign({
                         paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
                         paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`,
                         backgroundColor: '$bgGray'
-                      }, stickyPositionStyling(cell.column))
+                      }, stickyPositionStyling(cell.column)), cell.column.headerCss)
                     }, {
                       children: jsx(Paragraph, Object.assign({
                         paragraph: "shortContentBold"
@@ -19915,10 +19912,30 @@ const PageDialogFooter = styled('div');
 PageDialogFooter.displayName = 'PageDialogFooter';
 const PageDialogTitle = styled('div');
 PageDialogTitle.displayName = 'PageDialogTitle';
-const PageDialogContent = styled('div');
+const PageDialogContent = styled('div', {});
 PageDialogContent.displayName = 'PageDialogContent';
 const PageDialogTrigger = styled('div');
 PageDialogTrigger.displayName = 'PageDialogTrigger';
+const ContentWrapper = styled(Box, {
+  variants: {
+    wrapperSize: {
+      md: {
+        padding: '40px 24px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        //982 + padding horizontal
+        maxWidth: 1030
+      },
+      lg: {
+        padding: '40px 24px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        //1318 + padding horizontal
+        maxWidth: 1366
+      }
+    }
+  }
+});
 
 const findNodeChild = (array, displayName) => {
   const result = array.find(child => {
@@ -19962,6 +19979,8 @@ const HEADER_HEIGHT_MOBILE = 76;
  */
 
 const PageDialog = props => {
+  var _a, _b;
+
   const {
     children,
     size,
@@ -20133,6 +20152,20 @@ const PageDialog = props => {
               }, void 0)
             }), void 0)]
           }), void 0), pageDialogChildren && jsx(Box, Object.assign({}, pageDialogChildren.props, {
+            children: jsx(ConditionalWrapper, Object.assign({
+              condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
+              wrapper: child => {
+                var _a;
+
+                return jsx(ContentWrapper, Object.assign({
+                  wrapperSize: (_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize
+                }, {
+                  children: child
+                }), void 0);
+              }
+            }, {
+              children: (_b = pageDialogChildren.props) === null || _b === void 0 ? void 0 : _b.children
+            }), void 0),
             css: Object.assign({
               flexGrow: 1,
               maxHeight: footerChildren ? `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px)` : `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px)`,
@@ -23349,7 +23382,7 @@ const Upload = ({
         } else {
           imageCompressionComponent(blob, {
             maxSizeMB,
-            maxWidthOrHeight: 1920,
+            maxWidthOrHeight: 1000,
             maxIteration: 10,
             useWebWorker: true,
             alwaysKeepResolution: true
@@ -27810,7 +27843,7 @@ const Navigation = props => {
     const isComplete = props.isComplete[i - 1]; // eslint-disable-next-line no-lone-blocks
 
     {
-      var _data$title, _data, _data2, _data3, _data4, _data5, _data6, _data$title2, _data7, _data8, _data9, _data10, _data11;
+      var _data$title, _data2, _data3, _data4, _data5, _data6, _data7, _data$title2, _data8, _data9, _data10, _data11, _data12;
 
       !isMobile ? stepItems.push( /*#__PURE__*/React__default.createElement(StepperItem, {
         css: {
@@ -27821,7 +27854,9 @@ const Navigation = props => {
         align: "center",
         key: `step-${i}`,
         onClick: () => {
-          if (props.onNavClicked) props.onNavClicked(i);
+          var _data;
+
+          if (props.onNavClicked && !((_data = data[i - 1]) != null && _data.disabled)) props.onNavClicked(i);
 
           if (!forbidClickNav && isComplete && !isHide) {
             props.goToStep(i);
@@ -27855,9 +27890,9 @@ const Navigation = props => {
           lineNumber: 123,
           columnNumber: 17
         }
-      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data2 = data[i - 1]).title) == null ? void 0 : _data$title.call(_data2), ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
-        label: (_data3 = data[i - 1]) == null ? void 0 : _data3.tooltipsContents,
+        label: (_data4 = data[i - 1]) == null ? void 0 : _data4.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -27876,9 +27911,9 @@ const Navigation = props => {
           lineNumber: 128,
           columnNumber: 19
         }
-      })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), ((_data5 = data[i - 1]) == null ? void 0 : _data5.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         css: {
-          marginLeft: (_data5 = data[i - 1]) != null && _data5.withTolltip ? 0 : '$spacing-03'
+          marginLeft: (_data6 = data[i - 1]) != null && _data6.withTolltip ? 0 : '$spacing-03'
         },
         align: "center",
         __self: undefined,
@@ -27907,6 +27942,13 @@ const Navigation = props => {
           fontSize: '12px',
           textAlign: '-webkit-center'
         },
+        onClick: () => {
+          if (props.onNavClicked) props.onNavClicked(i);
+
+          if (!forbidClickNav && isComplete && !isHide) {
+            props.goToStep(i);
+          }
+        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -27919,7 +27961,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 153,
+          lineNumber: 159,
           columnNumber: 50
         }
       }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27930,12 +27972,12 @@ const Navigation = props => {
           height: 24,
           borderRadius: '$round',
           border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-          backgroundColor: (_data6 = data[i - 1]) != null && _data6.disabled ? '$gray200' : '$white'
+          backgroundColor: (_data7 = data[i - 1]) != null && _data7.disabled ? '$gray200' : '$white'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 155,
+          lineNumber: 161,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -27945,17 +27987,17 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 167,
+          lineNumber: 173,
           columnNumber: 15
         }
-      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data8 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data8) : ''), isActive && ((_data9 = data[i - 1]) == null ? void 0 : _data9.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
         withClick: true,
-        label: (_data9 = data[i - 1]) == null ? void 0 : _data9.tooltipsContents,
+        label: (_data10 = data[i - 1]) == null ? void 0 : _data10.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 171,
+          lineNumber: 177,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27964,19 +28006,19 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
+          lineNumber: 178,
           columnNumber: 19
         }
-      })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), isActive && ((_data11 = data[i - 1]) == null ? void 0 : _data11.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
         justify: "center",
         css: {
-          marginTop: (_data11 = data[i - 1]) != null && _data11.withTolltip ? 0 : '$spacing-03'
+          marginTop: (_data12 = data[i - 1]) != null && _data12.withTolltip ? 0 : '$spacing-03'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 176,
+          lineNumber: 182,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27985,7 +28027,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 177,
+          lineNumber: 183,
           columnNumber: 19
         }
       }, "Coming Soon"))));
@@ -27994,34 +28036,54 @@ const Navigation = props => {
 
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: !isMobile,
-    wrapper: child => /*#__PURE__*/React__default.createElement(Flex$1, {
+    wrapper: child => /*#__PURE__*/React__default.createElement(Box, {
+      css: {
+        opacity: isHide ? 0 : undefined,
+        maxWidth: 311
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 196,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default.createElement(Flex$1, {
+      css: {
+        position: !isMobile && 'sticky',
+        top: !isMobile ? 44 : 40
+      },
       direction: "column",
       gap: 7,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 190,
-        columnNumber: 9
+        lineNumber: 197,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Card, {
       css: {
         height: 'fit-content',
-        padding: 0,
-        maxWidth: 311,
-        opacity: isHide ? 0 : undefined
+        padding: 0
       },
       showBottomLine: false,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 191,
-        columnNumber: 11
+        lineNumber: 198,
+        columnNumber: 13
       }
-    }, child), typeof (props == null ? void 0 : props.appendContent) === 'function' ? props == null ? void 0 : props.appendContent == null ? void 0 : props.appendContent() : props == null ? void 0 : props.appendContent),
+    }, child), /*#__PURE__*/React__default.createElement(Box, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 207,
+        columnNumber: 13
+      }
+    }, typeof (props == null ? void 0 : props.appendContent) === 'function' ? props == null ? void 0 : props.appendContent == null ? void 0 : props.appendContent() : props == null ? void 0 : props.appendContent))),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 187,
+      lineNumber: 193,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepperList, {
@@ -28039,7 +28101,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 201,
+      lineNumber: 212,
       columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -28051,7 +28113,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 217,
+      lineNumber: 228,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28064,7 +28126,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 218,
+      lineNumber: 229,
       columnNumber: 13
     }
   }, stepItems)) : stepItems));
@@ -28163,7 +28225,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 316,
+      lineNumber: 327,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -28186,7 +28248,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 317,
+      lineNumber: 328,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -28200,7 +28262,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 341,
+        lineNumber: 352,
         columnNumber: 13
       }
     }),
@@ -28210,7 +28272,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 335,
+      lineNumber: 346,
       columnNumber: 9
     }
   }), props.children)));
@@ -28341,7 +28403,8 @@ function Content({
   content,
   activeId,
   isCollapse,
-  isDialog
+  isDialog,
+  onNavClick
 }) {
   var _getDatasets;
 
@@ -28424,8 +28487,11 @@ function Content({
       active: (item == null ? void 0 : item.id) === activeId,
       href: `#${item == null ? void 0 : item.id}`,
       onClick: e => {
+        var _e$currentTarget, _e$currentTarget$href, _e$currentTarget$href2, _e$currentTarget2, _e$currentTarget2$hre, _e$currentTarget2$hre2;
+
         e.preventDefault();
-        const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
+        onNavClick == null ? void 0 : onNavClick(e == null ? void 0 : (_e$currentTarget = e.currentTarget) == null ? void 0 : (_e$currentTarget$href = _e$currentTarget.href) == null ? void 0 : (_e$currentTarget$href2 = _e$currentTarget$href.split('#')) == null ? void 0 : _e$currentTarget$href2[1]);
+        const target = window.document.getElementById(e == null ? void 0 : (_e$currentTarget2 = e.currentTarget) == null ? void 0 : (_e$currentTarget2$hre = _e$currentTarget2.href) == null ? void 0 : (_e$currentTarget2$hre2 = _e$currentTarget2$hre.split('#')) == null ? void 0 : _e$currentTarget2$hre2[1]);
 
         if (target) {
           var headerOffset = 20;
@@ -28460,7 +28526,8 @@ function TableOfContent({
   css,
   isMobile,
   isDialog,
-  activeId
+  activeId,
+  onNavClick
 }) {
   const [mobileCollapse, setMobileCollapse] = useState(false);
 
@@ -28477,7 +28544,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 159,
+      lineNumber: 160,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -28485,10 +28552,11 @@ function TableOfContent({
     isCollapse: mobileCollapse,
     isDialog: isDialog,
     content: content,
+    onNavClick: onNavClick,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 160,
+      lineNumber: 161,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28500,7 +28568,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 161,
+      lineNumber: 168,
       columnNumber: 7
     }
   }, mobileCollapse ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -28510,7 +28578,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 163,
+      lineNumber: 170,
       columnNumber: 11
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -28520,7 +28588,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 165,
+      lineNumber: 172,
       columnNumber: 11
     }
   }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
@@ -28529,17 +28597,18 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 170,
+      lineNumber: 177,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
     isCollapse: true,
     isDialog: isDialog,
     content: content,
+    onNavClick: onNavClick,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 171,
+      lineNumber: 178,
       columnNumber: 7
     }
   }));
@@ -28571,7 +28640,12 @@ TableOfContent.propTypes = {
   /**
    The active ID to reference the active content on the mobile view obtained from onUpdateCallback.
    */
-  activeId: PropTypes.string
+  activeId: PropTypes.string,
+
+  /**
+   Event Callback on navigation click.
+   */
+  onNavClick: PropTypes.func
 };
 
 const TableOfContentPage = props => {

package/index.umd.js

@@ -17388,7 +17388,6 @@
         defaultValue = _h[0],
         setDefaultValue = _h[1];
 
-    console.log(placement);
     React.useEffect(function () {
       setValue(date || dateValue);
     }, [date, dateValue]);
@@ -18333,8 +18332,6 @@
 
             if (customRowsStyle && customRowsStyle(row.values).length) {
               for (var i = 0; i < customRowsStyle(row.values).length; i++) {
-                console.log(customRowsStyle(row.values)[i]);
-
                 if (customRowsStyle(row.values)[i].predicate) {
                   customStyle = customRowsStyle(row.values)[i].css;
                 }
@@ -19042,7 +19039,7 @@
                         }
                       }];
                     }), {
-                      css: __assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth))
+                      css: __assign(__assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss)
                     }, {
                       children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
                         isSortedDesc: column.isSortedDesc,
@@ -19154,11 +19151,11 @@
                           subCell: true,
                           colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                           headerSubCell: true,
-                          css: __assign({
+                          css: __assign(__assign({
                             paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
                             paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important"),
                             backgroundColor: '$bgGray'
-                          }, stickyPositionStyling(cell.column))
+                          }, stickyPositionStyling(cell.column)), cell.column.headerCss)
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
                             paragraph: "shortContentBold"
@@ -20275,10 +20272,30 @@
   PageDialogFooter.displayName = 'PageDialogFooter';
   var PageDialogTitle = styled('div');
   PageDialogTitle.displayName = 'PageDialogTitle';
-  var PageDialogContent = styled('div');
+  var PageDialogContent = styled('div', {});
   PageDialogContent.displayName = 'PageDialogContent';
   var PageDialogTrigger = styled('div');
   PageDialogTrigger.displayName = 'PageDialogTrigger';
+  var ContentWrapper = styled(Box, {
+    variants: {
+      wrapperSize: {
+        md: {
+          padding: '40px 24px',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          //982 + padding horizontal
+          maxWidth: 1030
+        },
+        lg: {
+          padding: '40px 24px',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          //1318 + padding horizontal
+          maxWidth: 1366
+        }
+      }
+    }
+  });
 
   var findNodeChild = function findNodeChild(array, displayName) {
     var result = array.find(function (child) {
@@ -20322,6 +20339,8 @@
    */
 
   var PageDialog = function PageDialog(props) {
+    var _a, _b;
+
     var children = props.children,
         size = props.size,
         css = props.css,
@@ -20495,6 +20514,20 @@
                 }, void 0)
               }), void 0)]
             }), void 0), pageDialogChildren && jsxRuntime.jsx(Box, __assign({}, pageDialogChildren.props, {
+              children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+                condition: !isMobile && ((_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize),
+                wrapper: function (child) {
+                  var _a;
+
+                  return jsxRuntime.jsx(ContentWrapper, __assign({
+                    wrapperSize: (_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize
+                  }, {
+                    children: child
+                  }), void 0);
+                }
+              }, {
+                children: (_b = pageDialogChildren.props) === null || _b === void 0 ? void 0 : _b.children
+              }), void 0),
               css: __assign({
                 flexGrow: 1,
                 maxHeight: footerChildren ? "calc(100vh - ".concat(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT, "px - ").concat(FOOTER_HEIGHT, "px)") : "calc(100vh - ".concat(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT, "px)"),
@@ -23745,7 +23778,7 @@
           } else {
             imageCompressionComponent__default["default"](blob, {
               maxSizeMB,
-              maxWidthOrHeight: 1920,
+              maxWidthOrHeight: 1000,
               maxIteration: 10,
               useWebWorker: true,
               alwaysKeepResolution: true
@@ -28219,7 +28252,7 @@
       const isComplete = props.isComplete[i - 1]; // eslint-disable-next-line no-lone-blocks
 
       {
-        var _data$title, _data, _data2, _data3, _data4, _data5, _data6, _data$title2, _data7, _data8, _data9, _data10, _data11;
+        var _data$title, _data2, _data3, _data4, _data5, _data6, _data7, _data$title2, _data8, _data9, _data10, _data11, _data12;
 
         !isMobile ? stepItems.push( /*#__PURE__*/React__default["default"].createElement(StepperItem, {
           css: {
@@ -28230,7 +28263,9 @@
           align: "center",
           key: `step-${i}`,
           onClick: () => {
-            if (props.onNavClicked) props.onNavClicked(i);
+            var _data;
+
+            if (props.onNavClicked && !((_data = data[i - 1]) != null && _data.disabled)) props.onNavClicked(i);
 
             if (!forbidClickNav && isComplete && !isHide) {
               props.goToStep(i);
@@ -28264,9 +28299,9 @@
             lineNumber: 123,
             columnNumber: 17
           }
-        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data2 = data[i - 1]).title) == null ? void 0 : _data$title.call(_data2), ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
-          label: (_data3 = data[i - 1]) == null ? void 0 : _data3.tooltipsContents,
+          label: (_data4 = data[i - 1]) == null ? void 0 : _data4.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28285,9 +28320,9 @@
             lineNumber: 128,
             columnNumber: 19
           }
-        })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), ((_data5 = data[i - 1]) == null ? void 0 : _data5.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           css: {
-            marginLeft: (_data5 = data[i - 1]) != null && _data5.withTolltip ? 0 : '$spacing-03'
+            marginLeft: (_data6 = data[i - 1]) != null && _data6.withTolltip ? 0 : '$spacing-03'
           },
           align: "center",
           __self: undefined,
@@ -28316,6 +28351,13 @@
             fontSize: '12px',
             textAlign: '-webkit-center'
           },
+          onClick: () => {
+            if (props.onNavClicked) props.onNavClicked(i);
+
+            if (!forbidClickNav && isComplete && !isHide) {
+              props.goToStep(i);
+            }
+          },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28328,7 +28370,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 153,
+            lineNumber: 159,
             columnNumber: 50
           }
         }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28339,12 +28381,12 @@
             height: 24,
             borderRadius: '$round',
             border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-            backgroundColor: (_data6 = data[i - 1]) != null && _data6.disabled ? '$gray200' : '$white'
+            backgroundColor: (_data7 = data[i - 1]) != null && _data7.disabled ? '$gray200' : '$white'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 155,
+            lineNumber: 161,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -28354,17 +28396,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 167,
+            lineNumber: 173,
             columnNumber: 15
           }
-        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data8 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data8) : ''), isActive && ((_data9 = data[i - 1]) == null ? void 0 : _data9.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data9 = data[i - 1]) == null ? void 0 : _data9.tooltipsContents,
+          label: (_data10 = data[i - 1]) == null ? void 0 : _data10.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 171,
+            lineNumber: 177,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28373,19 +28415,19 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
+            lineNumber: 178,
             columnNumber: 19
           }
-        })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), isActive && ((_data11 = data[i - 1]) == null ? void 0 : _data11.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           align: "center",
           justify: "center",
           css: {
-            marginTop: (_data11 = data[i - 1]) != null && _data11.withTolltip ? 0 : '$spacing-03'
+            marginTop: (_data12 = data[i - 1]) != null && _data12.withTolltip ? 0 : '$spacing-03'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 176,
+            lineNumber: 182,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28394,7 +28436,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 177,
+            lineNumber: 183,
             columnNumber: 19
           }
         }, "Coming Soon"))));
@@ -28403,34 +28445,54 @@
 
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
       condition: !isMobile,
-      wrapper: child => /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(Box, {
+        css: {
+          opacity: isHide ? 0 : undefined,
+          maxWidth: 311
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 196,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        css: {
+          position: !isMobile && 'sticky',
+          top: !isMobile ? 44 : 40
+        },
         direction: "column",
         gap: 7,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 190,
-          columnNumber: 9
+          lineNumber: 197,
+          columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Card, {
         css: {
           height: 'fit-content',
-          padding: 0,
-          maxWidth: 311,
-          opacity: isHide ? 0 : undefined
+          padding: 0
         },
         showBottomLine: false,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 191,
-          columnNumber: 11
+          lineNumber: 198,
+          columnNumber: 13
+        }
+      }, child), /*#__PURE__*/React__default["default"].createElement(Box, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 207,
+          columnNumber: 13
         }
-      }, child), typeof (props == null ? void 0 : props.appendContent) === 'function' ? props == null ? void 0 : props.appendContent == null ? void 0 : props.appendContent() : props == null ? void 0 : props.appendContent),
+      }, typeof (props == null ? void 0 : props.appendContent) === 'function' ? props == null ? void 0 : props.appendContent == null ? void 0 : props.appendContent() : props == null ? void 0 : props.appendContent))),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 187,
+        lineNumber: 193,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepperList, {
@@ -28448,7 +28510,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 201,
+        lineNumber: 212,
         columnNumber: 7
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -28460,7 +28522,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 217,
+        lineNumber: 228,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28473,7 +28535,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 218,
+        lineNumber: 229,
         columnNumber: 13
       }
     }, stepItems)) : stepItems));
@@ -28572,7 +28634,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 316,
+        lineNumber: 327,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -28595,7 +28657,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 317,
+        lineNumber: 328,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -28609,7 +28671,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 341,
+          lineNumber: 352,
           columnNumber: 13
         }
       }),
@@ -28619,7 +28681,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 335,
+        lineNumber: 346,
         columnNumber: 9
       }
     }), props.children)));
@@ -28750,7 +28812,8 @@
     content,
     activeId,
     isCollapse,
-    isDialog
+    isDialog,
+    onNavClick
   }) {
     var _getDatasets;
 
@@ -28833,8 +28896,11 @@
         active: (item == null ? void 0 : item.id) === activeId,
         href: `#${item == null ? void 0 : item.id}`,
         onClick: e => {
+          var _e$currentTarget, _e$currentTarget$href, _e$currentTarget$href2, _e$currentTarget2, _e$currentTarget2$hre, _e$currentTarget2$hre2;
+
           e.preventDefault();
-          const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
+          onNavClick == null ? void 0 : onNavClick(e == null ? void 0 : (_e$currentTarget = e.currentTarget) == null ? void 0 : (_e$currentTarget$href = _e$currentTarget.href) == null ? void 0 : (_e$currentTarget$href2 = _e$currentTarget$href.split('#')) == null ? void 0 : _e$currentTarget$href2[1]);
+          const target = window.document.getElementById(e == null ? void 0 : (_e$currentTarget2 = e.currentTarget) == null ? void 0 : (_e$currentTarget2$hre = _e$currentTarget2.href) == null ? void 0 : (_e$currentTarget2$hre2 = _e$currentTarget2$hre.split('#')) == null ? void 0 : _e$currentTarget2$hre2[1]);
 
           if (target) {
             var headerOffset = 20;
@@ -28869,7 +28935,8 @@
     css,
     isMobile,
     isDialog,
-    activeId
+    activeId,
+    onNavClick
   }) {
     const [mobileCollapse, setMobileCollapse] = React.useState(false);
 
@@ -28886,7 +28953,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 159,
+        lineNumber: 160,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -28894,10 +28961,11 @@
       isCollapse: mobileCollapse,
       isDialog: isDialog,
       content: content,
+      onNavClick: onNavClick,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 160,
+        lineNumber: 161,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -28909,7 +28977,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 161,
+        lineNumber: 168,
         columnNumber: 7
       }
     }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -28919,7 +28987,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 163,
+        lineNumber: 170,
         columnNumber: 11
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -28929,7 +28997,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 165,
+        lineNumber: 172,
         columnNumber: 11
       }
     }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
@@ -28938,17 +29006,18 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 170,
+        lineNumber: 177,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
       isCollapse: true,
       isDialog: isDialog,
       content: content,
+      onNavClick: onNavClick,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 171,
+        lineNumber: 178,
         columnNumber: 7
       }
     }));
@@ -28980,7 +29049,12 @@
     /**
      The active ID to reference the active content on the mobile view obtained from onUpdateCallback.
      */
-    activeId: PropTypes__default["default"].string
+    activeId: PropTypes__default["default"].string,
+
+    /**
+     Event Callback on navigation click.
+     */
+    onNavClick: PropTypes__default["default"].func
   };
 
   var TableOfContentPage = function TableOfContentPage(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.8-rc.1",
+  "version": "1.54.9",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",