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

package/components/stepWizard/index.d.ts

@@ -31,6 +31,7 @@ interface IStepWizardProps {
     onChangeVisibility?: (isHide: boolean) => void;
     onNavClicked?: () => void;
     hideCheckedIcon?: boolean;
+    appendContent?: JSX.Element;
 }
 declare const StepWizard: (props: IStepWizardProps) => JSX.Element;
 export default StepWizard;

package/index.esm.js

@@ -27731,9 +27731,10 @@ const StyledCircleInfoOutline = styled(CircleInfoOutline, {});
 const WrapperDiv = styled('div', {
   '& .stepperInstance': {
     display: 'flex',
-    gap: 10,
+    gap: 25,
     '& .rsw_2Y': {
       width: '100%',
+      maxWidth: 982,
       '& .rsw_2f': {
         display: 'none'
       },
@@ -27829,7 +27830,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 104,
+          lineNumber: 106,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Span, {
@@ -27839,7 +27840,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 119,
+          lineNumber: 121,
           columnNumber: 15
         }
       }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -27851,8 +27852,8 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 120,
-          columnNumber: 50
+          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, {
         align: "center",
@@ -27860,7 +27861,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 123,
+          lineNumber: 127,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27872,7 +27873,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 124,
+          lineNumber: 128,
           columnNumber: 19
         }
       })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27883,7 +27884,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 132,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27892,7 +27893,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 129,
+          lineNumber: 133,
           columnNumber: 19
         }
       }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27909,7 +27910,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 137,
+          lineNumber: 141,
           columnNumber: 13
         }
       }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -27918,7 +27919,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 149,
+          lineNumber: 153,
           columnNumber: 50
         }
       }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27934,7 +27935,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 151,
+          lineNumber: 155,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -27944,7 +27945,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 163,
+          lineNumber: 167,
           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, {
@@ -27954,7 +27955,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 167,
+          lineNumber: 171,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -27963,7 +27964,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 168,
+          lineNumber: 172,
           columnNumber: 19
         }
       })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -27975,7 +27976,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
+          lineNumber: 176,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -27984,14 +27985,46 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 173,
+          lineNumber: 177,
           columnNumber: 19
         }
       }, "Coming Soon"))));
     }
   }
 
-  return /*#__PURE__*/React__default.createElement(StepperList, {
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: !isMobile,
+    wrapper: child => /*#__PURE__*/React__default.createElement(Flex$1, {
+      direction: "column",
+      gap: 7,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 190,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default.createElement(Card, {
+      css: {
+        height: 'fit-content',
+        padding: 0,
+        maxWidth: 311,
+        opacity: isHide ? 0 : undefined
+      },
+      showBottomLine: false,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 191,
+        columnNumber: 11
+      }
+    }, 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),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 187,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(StepperList, {
     css: Object.assign({
       borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
       marginBottom: isMobile ? 65 : undefined,
@@ -28006,8 +28039,8 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 183,
-      columnNumber: 5
+      lineNumber: 201,
+      columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
     css: {
@@ -28018,8 +28051,8 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 199,
-      columnNumber: 9
+      lineNumber: 217,
+      columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
@@ -28031,10 +28064,10 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 200,
-      columnNumber: 11
+      lineNumber: 218,
+      columnNumber: 13
     }
-  }, stepItems)) : stepItems);
+  }, stepItems)) : stepItems));
 };
 const Default = props => {
   const [state, updateState] = React__default.useState(Object.assign({
@@ -28130,7 +28163,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 297,
+      lineNumber: 316,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -28153,7 +28186,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 298,
+      lineNumber: 317,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -28163,11 +28196,12 @@ const Default = props => {
     nav: /*#__PURE__*/React__default.createElement(Navigation, {
       onNavClicked: props.onNavClicked,
       isComplete: state.isComplete,
+      appendContent: props == null ? void 0 : props.appendContent,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 321,
-        columnNumber: 16
+        lineNumber: 341,
+        columnNumber: 13
       }
     }),
     initialStep: props.initialStep,
@@ -28176,7 +28210,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 316,
+      lineNumber: 335,
       columnNumber: 9
     }
   }), props.children)));

package/index.umd.js

@@ -28140,9 +28140,10 @@
   const WrapperDiv = styled('div', {
     '& .stepperInstance': {
       display: 'flex',
-      gap: 10,
+      gap: 25,
       '& .rsw_2Y': {
         width: '100%',
+        maxWidth: 982,
         '& .rsw_2f': {
           display: 'none'
         },
@@ -28238,7 +28239,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 104,
+            lineNumber: 106,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Span, {
@@ -28248,7 +28249,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 119,
+            lineNumber: 121,
             columnNumber: 15
           }
         }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -28260,8 +28261,8 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 120,
-            columnNumber: 50
+            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, {
           align: "center",
@@ -28269,7 +28270,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 123,
+            lineNumber: 127,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28281,7 +28282,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 124,
+            lineNumber: 128,
             columnNumber: 19
           }
         })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28292,7 +28293,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 128,
+            lineNumber: 132,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28301,7 +28302,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 129,
+            lineNumber: 133,
             columnNumber: 19
           }
         }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28318,7 +28319,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 137,
+            lineNumber: 141,
             columnNumber: 13
           }
         }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -28327,7 +28328,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 149,
+            lineNumber: 153,
             columnNumber: 50
           }
         }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28343,7 +28344,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 151,
+            lineNumber: 155,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -28353,7 +28354,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 163,
+            lineNumber: 167,
             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, {
@@ -28363,7 +28364,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 167,
+            lineNumber: 171,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -28372,7 +28373,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 168,
+            lineNumber: 172,
             columnNumber: 19
           }
         })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28384,7 +28385,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
+            lineNumber: 176,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -28393,14 +28394,46 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 173,
+            lineNumber: 177,
             columnNumber: 19
           }
         }, "Coming Soon"))));
       }
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(StepperList, {
+    return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: !isMobile,
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        direction: "column",
+        gap: 7,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 190,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Card, {
+        css: {
+          height: 'fit-content',
+          padding: 0,
+          maxWidth: 311,
+          opacity: isHide ? 0 : undefined
+        },
+        showBottomLine: false,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 191,
+          columnNumber: 11
+        }
+      }, 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),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 187,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StepperList, {
       css: Object.assign({
         borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
         marginBottom: isMobile ? 65 : undefined,
@@ -28415,8 +28448,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 183,
-        columnNumber: 5
+        lineNumber: 201,
+        columnNumber: 7
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       css: {
@@ -28427,8 +28460,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 199,
-        columnNumber: 9
+        lineNumber: 217,
+        columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
@@ -28440,10 +28473,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 200,
-        columnNumber: 11
+        lineNumber: 218,
+        columnNumber: 13
       }
-    }, stepItems)) : stepItems);
+    }, stepItems)) : stepItems));
   };
   const Default = props => {
     const [state, updateState] = React__default["default"].useState(Object.assign({
@@ -28539,7 +28572,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 297,
+        lineNumber: 316,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -28562,7 +28595,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 298,
+        lineNumber: 317,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -28572,11 +28605,12 @@
       nav: /*#__PURE__*/React__default["default"].createElement(Navigation, {
         onNavClicked: props.onNavClicked,
         isComplete: state.isComplete,
+        appendContent: props == null ? void 0 : props.appendContent,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 321,
-          columnNumber: 16
+          lineNumber: 341,
+          columnNumber: 13
         }
       }),
       initialStep: props.initialStep,
@@ -28585,7 +28619,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 316,
+        lineNumber: 335,
         columnNumber: 9
       }
     }), props.children)));

package/package.json

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