@abtnode/ux 1.16.0-beta-8ee536d7 → 1.16.0-beta-62b42401

package/lib/blocklet/actions.js

@@ -88,13 +88,9 @@ function BlockletActions(_ref) {
         let isRemoved = false;
         try {
           var _blocklet$settings;
-          const input = {
-            did: blocklet.meta.did
-          };
           if (action === 'remove') {
-            input.keepData = params.removeType === 'keepData';
-          }
-          if (action === 'start' && !inService && !skipSetup && !((_blocklet$settings = blocklet.settings) !== null && _blocklet$settings !== void 0 && _blocklet$settings.initialized)) {
+            await fn(params);
+          } else if (action === 'start' && !inService && !skipSetup && !((_blocklet$settings = blocklet.settings) !== null && _blocklet$settings !== void 0 && _blocklet$settings.initialized)) {
             // 启动 blocklet 并跳转到 setup 流程界面时携带 serverUrl 查询参数
             const serverUrl = (0, _util3.getServerUrl)(node.info);
             const url = new URL(recommendedUrl);
@@ -105,10 +101,14 @@ function BlockletActions(_ref) {
               blocklet
             });
             return;
+          } else {
+            const input = {
+              did: blocklet.meta.did
+            };
+            await fn({
+              input
+            });
           }
-          await fn({
-            input
-          });
           if (action === 'remove') {
             isRemoved = true; // Deleted send request and succeeded
           } else {
@@ -140,25 +140,12 @@ function BlockletActions(_ref) {
         setConfirmSetting(null);
       };
       const name = (0, _util.getDisplayName)(blocklet, true);
-      const removeSetting = blocklet.source === (0, _constant.fromBlockletSource)(_constant.BlockletSource.custom) ? {
-        description: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          component: "div",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            gutterBottom: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-              children: t('blocklet.action.forceRemoveDescription')
-            })
-          })
-        }),
-        params: {
-          removeType: 'complete'
-        }
-      } : {
+      const removeSetting = {
         description: (params, setParams) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
           component: "div",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             gutterBottom: true,
-            children: t('blocklet.action.removeDescription')
+            children: t('blocklet.action.removeApplicationDescription')
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_RadioGroup.default, {
             name: "removeType",
             value: params.removeType,
@@ -166,18 +153,18 @@ function BlockletActions(_ref) {
               removeType: e.target.value
             })),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
-              value: "keepData",
+              value: "backup",
               control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {}),
-              label: t('blocklet.action.removeKeepData')
+              label: t('blocklet.action.removeApplicationAfterBackup')
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
               value: "complete",
               control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {}),
-              label: t('blocklet.action.removeComplete')
+              label: t('blocklet.action.removeApplicationComplete')
             })]
           })]
         }),
         params: {
-          removeType: 'keepData'
+          removeType: 'backup'
         }
       };
       const confirmSettings = {
@@ -263,7 +250,25 @@ function BlockletActions(_ref) {
     action: 'remove',
     icon: _icons.default.Remove,
     name: t('common.remove'),
-    handler: createHandler('remove', node.api.deleteBlocklet, true),
+    handler: createHandler('remove', async _ref2 => {
+      let {
+        removeType
+      } = _ref2;
+      if (removeType === 'backup') {
+        await node.api.backupBlocklet({
+          input: {
+            appDid: blocklet.appDid,
+            to: 'disk'
+          }
+        });
+      }
+      await node.api.deleteBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          keepData: false
+        }
+      });
+    }, true),
     disabled: inProgress
   } : null;
   const cancelDownloadAction = !inService ? {

package/lib/blocklet/component/add.js

@@ -25,6 +25,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@blocklet/constant");
 var _launcherLayout = _interopRequireDefault(require("@blocklet/launcher-layout"));
 var _step = require("@blocklet/launcher-layout/lib/context/step");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _constant2 = require("@abtnode/constant");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
@@ -43,6 +44,7 @@ var _agreement = _interopRequireDefault(require("../agreement"));
 var _installFromUrl = _interopRequireDefault(require("../install-from-url"));
 var _selectStore = _interopRequireDefault(require("./select-store"));
 var _storeBlockletList = _interopRequireDefault(require("./store-blocklet-list"));
+var _spaceConnector = _interopRequireDefault(require("./space-connector"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 const _excluded = ["name", "validation"],
@@ -57,6 +59,14 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const requirePurchase = meta => meta.inStore && (0, _util.isFreeBlocklet)(meta) === false;
+const getDIDSpaceCapability = meta => {
+  var _meta$capabilities;
+  return meta === null || meta === void 0 ? void 0 : (_meta$capabilities = meta.capabilities) === null || _meta$capabilities === void 0 ? void 0 : _meta$capabilities.didSpace;
+};
+const getDIDSpaceEndpoint = blocklet => {
+  var _blocklet$configs, _blocklet$configs$fin;
+  return (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$configs = blocklet.configs) === null || _blocklet$configs === void 0 ? void 0 : (_blocklet$configs$fin = _blocklet$configs.find(item => item.key === _constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)) === null || _blocklet$configs$fin === void 0 ? void 0 : _blocklet$configs$fin.value) || null;
+};
 const hasRequiredEnvironments = meta => (meta.environments || []).some(x => x.required);
 const hasMissRequiredConfigs = (configsList, sharedValueMap) => {
   return configsList === null || configsList === void 0 ? void 0 : configsList.some(item => {
@@ -161,6 +171,7 @@ function AddComponent(_ref2) {
     hasEnvironmentsStep: false,
     hasRequiredEnvironments: false,
     requirePurchase: false,
+    didSpaceCapability: null,
     installResultProps: {},
     purchaseResultProps: {},
     showFromUrlDialog: false
@@ -556,12 +567,16 @@ function AddComponent(_ref2) {
 
     // eslint-disable-next-line no-shadow
     const componentRequirePurchase = requirePurchase(component.current.meta);
+    const componentDIDSpaceCapability = getDIDSpaceCapability(component.current.meta);
+    const didSpaceEndpoint = getDIDSpaceEndpoint(blocklet);
     updateParams(_objectSpread(_objectSpread({
       bundleDid,
       componentDid
     }, doc), {}, {
       hasRequiredEnvironments: hasRequiredEnvironments(component.current.meta),
-      requirePurchase: componentRequirePurchase
+      requirePurchase: componentRequirePurchase,
+      didSpaceCapability: componentDIDSpaceCapability,
+      didSpaceEndpoint
     }));
     if (isInit && componentRequirePurchase) {
       onGeneratePurchaseData();
@@ -885,6 +900,48 @@ function AddComponent(_ref2) {
     confirm: t('common.next'),
     onCancel: _onCancel,
     onConfirm: onNext
+  }, meta && (params === null || params === void 0 ? void 0 : params.didSpaceCapability) && {
+    key: 'didSpace',
+    name: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [t('blocklet.component.didSpaceConfig'), " ", params.didSpaceCapability === 'required' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
+    }),
+    disabled: params.didSpaceCapability === 'required' && !params.didSpaceEndpoint,
+    body: () => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TypographyWrapper, {
+        component: "div",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderWrapper, {
+          title: t('blocklet.component.didSpaceConfig'),
+          subTitle: t('blocklet.component.didSpaceConfigTip')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          sx: {
+            mt: '36px',
+            '& > div': {
+              maxWidth: 'unset !important',
+              '& .MuiAutocomplete-root': {
+                maxWidth: 'unset !important'
+              }
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spaceConnector.default, {
+            sx: {
+              '& .MuiFormHelperText-root': {
+                wordBreak: 'break-all'
+              }
+            },
+            helperText: params.didSpaceEndpoint && t('blocklet.component.didSpaceConnected', {
+              endpoint: params.didSpaceEndpoint
+            }),
+            onConnect: () => {
+              onNext();
+            }
+          })
+        })]
+      });
+    },
+    cancel: t('common.pre'),
+    confirm: t('common.next'),
+    onCancel: _onCancel,
+    onConfirm: onNext
   }, {
     key: 'install',
     name: t('common.install'),

package/lib/blocklet/component/delete.js

@@ -47,7 +47,7 @@ function DeleteComponent(_ref) {
   const btn = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
     disabled: componentDisabled,
     onClick: () => setDeleteSetting({
-      title: t('blocklet.component.delete'),
+      title: "".concat(t('common.delete'), " ").concat(component.meta.title || component.meta.name),
       // eslint-disable-next-line react/no-unstable-nested-components
       description: (params, setParams) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
         component: "div",

package/lib/blocklet/component/navigation/locale-tabs.js

@@ -9,7 +9,13 @@ var _ahooks = require("ahooks");
 var _lodash = require("lodash");
 var _react = require("react");
 var _react2 = require("@iconify/react");
-var _material = require("@mui/material");
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _simpleSelect = _interopRequireDefault(require("./simple-select"));
 var _locales = _interopRequireDefault(require("../../../util/locales"));
@@ -115,21 +121,21 @@ function LocaleTabs(_ref) {
     state.inputLocale = value;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tabs, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tabs.default, {
       sx: sx,
       value: state.currentLocale,
       onChange: (e, value) => {
         state.currentLocale = value;
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
         label: "Default (".concat(_locales.default[defaultLocale], ")"),
         value: "en"
-      }), state.localeList.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+      }), state.localeList.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
         sx: {
           position: 'relative'
         },
         label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [_locales.default[item], /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          children: [_locales.default[item], /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
             size: "small",
             color: "inherit",
             sx: {
@@ -147,7 +153,7 @@ function LocaleTabs(_ref) {
           })]
         }),
         value: item
-      }, item)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      }, item)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
         color: "primary",
         disableFocusRipple: true,
         sx: {
@@ -160,7 +166,7 @@ function LocaleTabs(_ref) {
           icon: "mdi:plus"
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
       open: openChooseLocale,
       anchorEl: addLocaleButtonEl,
       onClose: close,
@@ -168,15 +174,15 @@ function LocaleTabs(_ref) {
         vertical: 'bottom',
         horizontal: 'left'
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         sx: {
           p: 2,
           width: '270px'
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "subtitle2",
           children: t('navigation.form.localePlaceholder')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           mt: 1,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_simpleSelect.default, {
             required: true,
@@ -188,10 +194,10 @@ function LocaleTabs(_ref) {
             error: !!state.localeError,
             helperText: state.localeError || ' '
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           display: "flex",
           justifyContent: "flex-end",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
             size: "small",
             variant: "contained",
             onClick: handleAddLocale,

package/lib/blocklet/component/navigation/navigation-actions.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("@iconify/react");
-var _material = require("@mui/material");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _react2 = require("react");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -50,7 +50,7 @@ function NavigationActions(_ref) {
     className: className,
     children: [!data.parent && ['header', 'footer', 'dashboard'].includes(section) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       title: isUninstalled ? t('navigation.action.noAddSub') : t('navigation.action.addSub'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
         size: "small",
         color: "success",
         onClick: handleClickAdd,
@@ -61,7 +61,7 @@ function NavigationActions(_ref) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       title: isUninstalled ? t('navigation.action.noEdit') : t('navigation.action.edit'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
         size: "small",
         color: "primary",
         onClick: handleClickEdit,
@@ -74,7 +74,7 @@ function NavigationActions(_ref) {
       title:
       // eslint-disable-next-line no-nested-ternary
       isUninstalled ? t('navigation.action.noEdit') : data.visible ? t('navigation.action.hide') : t('navigation.action.show'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
         size: "small",
         color: "warning",
         onClick: handleClickToggle,
@@ -87,7 +87,7 @@ function NavigationActions(_ref) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       title: isDisabled && !isUninstalled ? t('navigation.action.noDel') : t('navigation.action.del'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
         disabled: isDisabled && !isUninstalled,
         size: "small",
         color: "error",

package/lib/blocklet/component/navigation/navigation-dialog.js

@@ -8,7 +8,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _material = require("@mui/material");
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _ahooks = require("ahooks");
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
@@ -428,7 +434,7 @@ const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function Navigation
           let {
             field
           } = _ref3;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread({
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread({
             fullWidth: true,
             variant: "outlined",
             margin: "dense",
@@ -451,16 +457,16 @@ const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function Navigation
           let {
             field
           } = _ref4;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread(_objectSpread({
             fullWidth: true,
             variant: "outlined",
             margin: "dense",
             placeholder: t('navigation.form.iconPlaceholder'),
             label: t('navigation.form.icon'),
             error: !!(errors !== null && errors !== void 0 && (_errors$icon = errors.icon) !== null && _errors$icon !== void 0 && _errors$icon.message),
-            helperText: (errors === null || errors === void 0 ? void 0 : (_errors$icon2 = errors.icon) === null || _errors$icon2 === void 0 ? void 0 : _errors$icon2.message) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            helperText: (errors === null || errors === void 0 ? void 0 : (_errors$icon2 = errors.icon) === null || _errors$icon2 === void 0 ? void 0 : _errors$icon2.message) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               display: "flex",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
                 component: "a",
                 href: "https://icones.js.org",
                 target: "_blank",
@@ -476,9 +482,9 @@ const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function Navigation
             })
           }, field), {}, {
             InputProps: {
-              endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+              endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
                 position: "end",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
                   sx: {
                     cursor: 'default'
                   },
@@ -526,10 +532,10 @@ const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function Navigation
           let {
             field
           } = _ref6;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl.default, {
             fullWidth: true,
             margin: "dense",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, _objectSpread(_objectSpread({
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, _objectSpread(_objectSpread({
               disablePortal: true,
               freeSolo: true,
               blurOnSelect: true,
@@ -540,7 +546,7 @@ const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function Navigation
               options: autocompleteOptions,
               renderInput: params => {
                 var _errors$link, _errors$link2;
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread(_objectSpread({}, params), {}, {
                   placeholder: t('navigation.form.linkPlaceholder'),
                   label: t('navigation.form.link'),
                   error: !!(errors !== null && errors !== void 0 && (_errors$link = errors.link) !== null && _errors$link !== void 0 && _errors$link.message),
@@ -548,7 +554,7 @@ const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function Navigation
                   // FIXME: 添加了 startAdornment 后，autocomplete 选项无法显示，之后换成 antd 的 autocomplete 可以解决这个问题
                   ,
                   InputProps: {
-                    startAdornment: linkPrefix ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                    startAdornment: linkPrefix ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputAdornment.default, {
                       position: "start",
                       sx: {
                         textDecoration: (0, _isAbsoluteUrl.default)(watchLink || '') ? 'line-through' : ''
@@ -558,10 +564,10 @@ const NavigationDialog = /*#__PURE__*/(0, _react.forwardRef)(function Navigation
                   }
                 }));
               },
-              renderOption: (props, option) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, _objectSpread(_objectSpread({
+              renderOption: (props, option) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, _objectSpread(_objectSpread({
                 component: "li"
               }, props), {}, {
-                children: [option.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                children: [option.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                   marginLeft: 1,
                   component: "span",
                   variant: "body2",

package/lib/blocklet/component/navigation/navigation-preview.js

@@ -9,7 +9,9 @@ var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
 var _Footer = _interopRequireDefault(require("@blocklet/ui-react/lib/Footer"));
 var _Dashboard = _interopRequireDefault(require("@blocklet/ui-react/lib/Dashboard"));
 var _linkBlocker = _interopRequireDefault(require("@blocklet/ui-react/lib/common/link-blocker"));
-var _material = require("@mui/material");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _blocklet = require("../../../contexts/blocklet");
 var _useAppLogo = _interopRequireDefault(require("../../../hooks/use-app-logo"));
@@ -39,11 +41,11 @@ function NavigationPreview(_ref) {
     navigation
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkBlocker.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       className: className,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
         meta: blockletInfo
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dashboard.default, {
           meta: blockletInfo,
           invalidPathFallback: () => {},
@@ -52,28 +54,28 @@ function NavigationPreview(_ref) {
               display: 'none'
             }
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
             container: true,
             spacing: 2,
             children: new Array(6).fill().map((item, index) => {
               return (
                 /*#__PURE__*/
                 // eslint-disable-next-line react/no-array-index-key
-                (0, _jsxRuntime.jsxs)(_material.Grid, {
+                (0, _jsxRuntime.jsxs)(_Grid.default, {
                   item: true,
                   xs: 4,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
                     animation: false,
                     variant: "rectangular",
                     width: "100%",
                     height: 120
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
                     sx: {
                       pt: 0.5
                     },
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
                       animation: false
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
                       width: "60%",
                       animation: false
                     })]

package/lib/blocklet/component/navigation/simple-select.js

@@ -5,7 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["fullWidth", "multiple", "required", "label", "placeholer", "options", "helperText", "error", "margin"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,15 +40,15 @@ function SimpleSelect(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   const defaultOption = options.find(item => item.value === rest.value);
   const defaultValue = defaultOption === null || defaultOption === void 0 ? void 0 : defaultOption.title;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
     margin: margin,
     fullWidth: fullWidth,
     error: error,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
       children: "".concat(label).concat(required ? '*' : '')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Select, _objectSpread(_objectSpread({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, _objectSpread(_objectSpread({
       multiple: multiple,
-      input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.OutlinedInput, {
+      input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
         defaultValue: defaultValue,
         sx: {
           flex: 1
@@ -52,7 +61,7 @@ function SimpleSelect(_ref) {
       }),
       renderValue: selected => {
         if (multiple) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             sx: {
               display: 'flex',
               flexWrap: 'wrap',
@@ -60,7 +69,7 @@ function SimpleSelect(_ref) {
             },
             children: selected.map(value => {
               const option = options.find(item => item.value === value);
-              return option && option.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+              return option && option.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
                 size: "small",
                 label: option.title
               }, value);
@@ -68,11 +77,11 @@ function SimpleSelect(_ref) {
           });
         }
         const option = options.find(item => item.value === selected);
-        return option && option.title && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        return option && option.title && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             component: "span",
             children: option.title
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             marginLeft: 1,
             component: "span",
             variant: "body2",
@@ -82,25 +91,25 @@ function SimpleSelect(_ref) {
         });
       }
     }, rest), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
         disabled: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("em", {
           children: placeholer
         })
-      }), !multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+      }), !multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
         value: "",
         children: "None"
-      }), options.map(option => option && option.value && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      }), options.map(option => option && option.value && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
         value: option.value,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
           children: option.title
-        }), option.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        }), option.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "body2",
           color: "text.secondary",
           children: option.description
         })]
       }, option.value))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormHelperText, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, {
       children: helperText
     })]
   });