@blocklet/launcher-layout 1.6.20 → 1.7.2

package/lib/content.js

@@ -27,4 +27,4 @@ Content.propTypes = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "content__Container",
   componentId: "sc-1b9ey7-0"
-})(["display:flex;flex-direction:column;height:100%;width:100%;.center{display:flex;justify-content:center;}.page-title{text-align:center;}.toolbar{display:flex;justify-content:space-between;align-items:center;.toolbar_title{color:", ";font-size:16px;}}.page-footer{display:flex;justify-content:center;align-items:center;width:100%;background:", ";.create-button{margin-right:32px;}& > button,.button{margin:0 8px;}", "{padding:24px;& > button,.button{margin:0 12px;min-width:200px;}}", "{margin-top:auto;padding:16px;}}"], props => props.theme.palette.grey['900'], props => props.theme.palette.common.white, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'));
+})(["display:flex;flex-direction:column;height:100%;width:100%;.center{display:flex;justify-content:center;}.page-title{text-align:center;}.toolbar{display:flex;justify-content:space-between;align-items:center;.toolbar_title{color:", ";font-size:16px;}}.page-footer{display:flex;justify-content:center;align-items:center;width:100%;background:", ";.create-button{margin-right:32px;}& > button,.button{margin:0 8px;}", "{padding:24px;& > button,.button{margin:0 12px;min-width:200px;}}", "{margin-top:auto;padding:16px;}}"], props => props.theme.palette.grey['900'], props => props.theme.palette.common.white, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));

package/lib/header.js

@@ -13,9 +13,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
 
-var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
@@ -36,13 +36,13 @@ function AppHeader(_ref) {
     locale,
     navLogo
   } = _ref;
-  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('sm'));
+  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
   const blockletSize = isMobile ? 18 : 48;
   const appNameRef = (0, _react.useRef)(null);
   const [appNameSize, setAppNameSize] = (0, _react.useState)('');
 
   let blockletIcon = /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-    variant: "rect",
+    variant: "rectangular",
     width: blockletSize,
     height: blockletSize
   });
@@ -112,4 +112,4 @@ AppHeader.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "header__Container",
   componentId: "sc-1twhts3-0"
-})(["display:flex;justify-content:flex-start;align-items:flex-start;width:100%;", "{min-height:70px;}", "{align-items:center;}.app-name-content{width:100%;display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:14px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app-icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{flex:1;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{position:relative;display:flex;justify-content:center;align-items:center;flex:1;height:100%;color:", ";font-weight:700;", "{font-size:18px;line-height:1.2em;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:12px;line-height:16px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('sm'));
+})(["display:flex;justify-content:flex-start;align-items:flex-start;width:100%;", "{min-height:70px;}", "{align-items:center;}.app-name-content{width:100%;display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:14px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app-icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{flex:1;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{position:relative;display:flex;justify-content:center;align-items:center;flex:1;height:100%;color:", ";font-weight:700;", "{font-size:18px;line-height:1.2em;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:12px;line-height:16px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('md'));

package/lib/index.js

@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Hidden = _interopRequireDefault(require("@material-ui/core/Hidden"));
+var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
 
-var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
-var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 
 var _step = require("./context/step");
 
@@ -50,7 +50,7 @@ function Layout(_ref) {
     pcHeight,
     navLogo
   } = _ref;
-  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('sm'));
+  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
   const {
     activeStep,
     totalStepsCount
@@ -100,7 +100,7 @@ function Layout(_ref) {
       height: pcHeight
     } : {}
   }, /*#__PURE__*/_react.default.createElement(_Hidden.default, {
-    smDown: true
+    mdDown: true
   }, /*#__PURE__*/_react.default.createElement(_nav.default, {
     locale: locale,
     blockletMeta: blockletMeta,
@@ -137,7 +137,7 @@ if (ua.includes('iphone os') && ua.includes('crios')) {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "src__Root",
   componentId: "sc-11nbl7p-2"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " .circular{display:inline-block;position:relative;width:15px;height:12px;> *{position:absolute;left:3px;top:2px;width:100%;height:100%;}}.ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", "{left:26px;width:calc(100% - 26px);}}", "{background:#f6f8fa;}", "{background:", ";}.root-header{position:fixed;z-index:200;top:0;display:flex;width:100%;max-width:1245px;height:68px;align-items:center;", "{padding:24px;justify-content:flex-end;}", "{height:56px;padding:14px 16px;justify-content:space-between;background:#f6f8fa;}.left{flex:1;display:flex;align-items:center;}.right{display:flex;align-items:center;", "{button,a{padding-left:8px;padding-right:8px;}}}}"], injectStyle, props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.down('sm'));
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " .circular{display:inline-block;position:relative;width:15px;height:12px;> *{position:absolute;left:3px;top:2px;width:100%;height:100%;}}.ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", "{left:26px;width:calc(100% - 26px);}}", "{background:#f6f8fa;}", "{background:", ";}.root-header{position:fixed;z-index:200;top:0;display:flex;width:100%;max-width:1245px;height:68px;align-items:center;", "{padding:24px;justify-content:flex-end;}", "{height:56px;padding:14px 16px;justify-content:space-between;background:#f6f8fa;}.left{flex:1;display:flex;align-items:center;}.right{display:flex;align-items:center;", "{button,a{padding-left:8px;padding-right:8px;}}}}"], injectStyle, props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
 
 const Center = _styledComponents.default.div.withConfig({
   displayName: "src__Center",

package/lib/launch-result-message.js

@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
 var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 
-var _PriorityHigh = _interopRequireDefault(require("@material-ui/icons/PriorityHigh"));
+var _PriorityHigh = _interopRequireDefault(require("@mui/icons-material/PriorityHigh"));
 
 const _excluded = ["variant", "title", "subTitle", "footer"];
 

package/lib/nav.js

@@ -13,9 +13,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
-var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 
 var _header = _interopRequireDefault(require("./header"));
 
@@ -89,17 +89,17 @@ function Nav(_ref) {
 const AppLink = _styledComponents.default.a.withConfig({
   displayName: "nav__AppLink",
   componentId: "sc-1qwhj4c-0"
-})(["color:", ";text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';text-decoration:none;font-weight:700;-webkit-font-smoothing:antialiased;", "{display:block;max-width:calc(100vw - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], props => props.theme.palette.common.black, props => props.theme.breakpoints.down('sm'));
+})(["color:", ";text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';text-decoration:none;font-weight:700;-webkit-font-smoothing:antialiased;", "{display:block;max-width:calc(100vw - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'));
 
 const Div = _styledComponents.default.div.withConfig({
   displayName: "nav__Div",
   componentId: "sc-1qwhj4c-1"
-})(["", "{padding:24px;border-right:1px solid ", ";width:30%;min-width:260px;min-height:48px;.MuiStepConnector-vertical{padding:0;}}", "{padding:16px;.MuiStepConnector-lineVertical{border:none;}}.stepper{padding:0 !important;background:transparent;", "{margin-top:100px;}", "{margin-top:40px;}.step{cursor:pointer;}}"], props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'));
+})(["", "{padding:24px;border-right:1px solid ", ";width:30%;min-width:260px;min-height:48px;.MuiStepConnector-vertical{padding:0;}}", "{padding:16px;.MuiStepConnector-lineVertical{border:none;}}.stepper{padding:0 !important;background:transparent;", "{margin-top:100px;}", "{margin-top:40px;}.step{cursor:pointer;}}"], props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
 
 const StepContainer = _styledComponents.default.div.withConfig({
   displayName: "nav__StepContainer",
   componentId: "sc-1qwhj4c-2"
-})(["display:flex;flex-direction:column;margin-top:60px;", "{margin-top:30px;}.step-line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;opacity:0.5;background-color:", ";transition:all ease 0.2s;}.step-icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step-name{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";white-space:nowrap;}", "{.step-name-content{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;}}.step-block{position:relative;display:flex;height:70px;opacity:0.5;overflow:hidden;transition:all ease 0.2s;&.step-optional{height:0;opacity:0;}&.step-checked{opacity:1;.step-icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step-line{background-color:", ";opacity:1;}}&.step-active{opacity:1;.step-icon{background-color:", ";}.step-icon:before{transform:scale(1);}.step-name{color:", ";}}&:last-child{.step-line{display:none;}}}"], props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
+})(["display:flex;flex-direction:column;margin-top:60px;", "{margin-top:30px;}.step-line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;opacity:0.5;background-color:", ";transition:all ease 0.2s;}.step-icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step-name{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";white-space:nowrap;}", "{.step-name-content{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;}}.step-block{position:relative;display:flex;height:70px;opacity:0.5;overflow:hidden;transition:all ease 0.2s;&.step-optional{height:0;opacity:0;}&.step-checked{opacity:1;.step-icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step-line{background-color:", ";opacity:1;}}&.step-active{opacity:1;.step-icon{background-color:", ";}.step-icon:before{transform:scale(1);}.step-name{color:", ";}}&:last-child{.step-line{display:none;}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
 
 Nav.propTypes = {
   blockletMeta: _propTypes.default.object.isRequired,

package/lib/wizard/server-eula.js

@@ -75,4 +75,4 @@ ServerEula.defaultProps = {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "server-eula__Div",
   componentId: "sc-66fg47-0"
-})(["margin:0 auto;display:flex;justify-content:space-between;align-items:center;@media (max-width:", "px){flex-direction:column;}.eula-trigger{cursor:pointer;text-decoration:underline;", "{padding-right:24px;}", "{padding:16px;}font-size:14px;white-space:nowrap;&:hover{color:", ";}}.next-button{min-width:200px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.primary.main);
+})(["margin:0 auto;display:flex;justify-content:space-between;align-items:center;@media (max-width:", "px){flex-direction:column;}.eula-trigger{cursor:pointer;text-decoration:underline;", "{padding-right:24px;}", "{padding:16px;}font-size:14px;white-space:nowrap;&:hover{color:", ";}}.next-button{min-width:200px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main);

package/lib/wizard/wizard-desc.js

@@ -17,15 +17,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _rehypeReact = _interopRequireDefault(require("rehype-react"));
 
-var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
+var _Table = _interopRequireDefault(require("@mui/material/Table"));
 
-var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));
+var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
 
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
 
-var _TableContainer = _interopRequireDefault(require("@material-ui/core/TableContainer"));
+var _TableContainer = _interopRequireDefault(require("@mui/material/TableContainer"));
 
-var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "1.6.20",
+  "version": "1.7.2",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -34,16 +34,19 @@
     "url": "https://github.com/blocklet/launcher/issues"
   },
   "peerDependencies": {
-    "react": ">=16.12.0"
+    "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^1.17.19",
-    "@arcblock/icons": "^1.17.19",
-    "@arcblock/ux": "^1.17.19",
+    "@arcblock/did-connect": "^2.0.0",
+    "@arcblock/icons": "^2.0.0",
+    "@arcblock/ux": "^2.0.0",
     "@blocklet/meta": "^1.7.14",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.81",
+    "@mui/material": "^5.6.4",
+    "@mui/styles": "^5.6.2",
     "lodash.get": "^4.4.2",
     "prop-types": "^15.8.1",
     "rehype-react": "^7.0.4",
@@ -58,5 +61,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "0b6fd5b0f48663636699dde5a931f3f6eda1f0fa"
+  "gitHead": "bb09fe36ecff2ae82930f91d284fe8aef0264c05"
 }