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

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

@@ -18705,7 +18705,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 +18802,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 +19915,28 @@ 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 0px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        maxWidth: 982
+      },
+      lg: {
+        padding: '40px 24px 0px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        maxWidth: 1400
+      }
+    }
+  }
+});
 
 const findNodeChild = (array, displayName) => {
   const result = array.find(child => {
@@ -19962,6 +19980,8 @@ const HEADER_HEIGHT_MOBILE = 76;
  */
 
 const PageDialog = props => {
+  var _a, _b;
+
   const {
     children,
     size,
@@ -20133,6 +20153,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)`,
@@ -27907,6 +27941,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 +27960,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 153,
+          lineNumber: 159,
           columnNumber: 50
         }
       }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27935,7 +27976,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 155,
+          lineNumber: 161,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -27945,7 +27986,7 @@ 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, {
@@ -27955,7 +27996,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 171,
+          lineNumber: 177,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27964,7 +28005,7 @@ 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, {
@@ -27976,7 +28017,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 176,
+          lineNumber: 182,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27985,7 +28026,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 177,
+          lineNumber: 183,
           columnNumber: 19
         }
       }, "Coming Soon"))));
@@ -27994,34 +28035,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 +28100,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 201,
+      lineNumber: 212,
       columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -28051,7 +28112,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 217,
+      lineNumber: 228,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28064,7 +28125,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 218,
+      lineNumber: 229,
       columnNumber: 13
     }
   }, stepItems)) : stepItems));
@@ -28163,7 +28224,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 316,
+      lineNumber: 327,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -28186,7 +28247,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 +28261,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 341,
+        lineNumber: 352,
         columnNumber: 13
       }
     }),
@@ -28210,7 +28271,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 335,
+      lineNumber: 346,
       columnNumber: 9
     }
   }), props.children)));

package/index.umd.js

@@ -19042,7 +19042,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 +19154,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 +20275,28 @@
   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 0px',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          maxWidth: 982
+        },
+        lg: {
+          padding: '40px 24px 0px',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          maxWidth: 1400
+        }
+      }
+    }
+  });
 
   var findNodeChild = function findNodeChild(array, displayName) {
     var result = array.find(function (child) {
@@ -20322,6 +20340,8 @@
    */
 
   var PageDialog = function PageDialog(props) {
+    var _a, _b;
+
     var children = props.children,
         size = props.size,
         css = props.css,
@@ -20495,6 +20515,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)"),
@@ -28316,6 +28350,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 +28369,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 153,
+            lineNumber: 159,
             columnNumber: 50
           }
         }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28344,7 +28385,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 155,
+            lineNumber: 161,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -28354,7 +28395,7 @@
           __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, {
@@ -28364,7 +28405,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 171,
+            lineNumber: 177,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28373,7 +28414,7 @@
           __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, {
@@ -28385,7 +28426,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 176,
+            lineNumber: 182,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28394,7 +28435,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 177,
+            lineNumber: 183,
             columnNumber: 19
           }
         }, "Coming Soon"))));
@@ -28403,34 +28444,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), 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["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["default"].createElement(StepperList, {
@@ -28448,7 +28509,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 201,
+        lineNumber: 212,
         columnNumber: 7
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -28460,7 +28521,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 217,
+        lineNumber: 228,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28473,7 +28534,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 218,
+        lineNumber: 229,
         columnNumber: 13
       }
     }, stepItems)) : stepItems));
@@ -28572,7 +28633,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 316,
+        lineNumber: 327,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -28595,7 +28656,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 317,
+        lineNumber: 328,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -28609,7 +28670,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 341,
+          lineNumber: 352,
           columnNumber: 13
         }
       }),
@@ -28619,7 +28680,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 335,
+        lineNumber: 346,
         columnNumber: 9
       }
     }), props.children)));

package/package.json

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