dumi 2.0.3 → 2.0.5

package/dist/client/theme-api/AtomRenderer.d.ts

@@ -0,0 +1,8 @@
+import { AtomAsset, ExamplePresetAsset } from 'dumi-assets-types';
+import { type FC } from 'react';
+interface IAtomRendererProps {
+    type: AtomAsset['type'];
+    value: ExamplePresetAsset['value'];
+}
+export declare const AtomRenderer: FC<IAtomRendererProps>;
+export {};

package/dist/client/theme-api/AtomRenderer.js

@@ -0,0 +1,99 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+import { useSiteData } from 'dumi';
+import React from 'react';
+
+function builtInProcessor(entity, entryExports) {
+  var mod;
+
+  switch (entity.$$__type) {
+    case 'function':
+      // eslint-disable-next-line no-eval
+      return eval(entity.$$__body.sourceCode);
+
+    case 'element':
+      // find child component from entry exports
+      mod = entity.$$__body.componentName.split('.').reduce(function (col, cur) {
+        return col[cur];
+      }, entryExports); // fallback to HTML tag
+
+      if (mod === undefined) return entity.$$__body.componentName; // support pure render for antd components
+
+      return '_InternalPanelDoNotUseOrYouWillBeFired' in mod ? mod._InternalPanelDoNotUseOrYouWillBeFired : mod;
+  }
+}
+
+function deepReplace(value, entityProcessor) {
+  // transform array props
+  if (Array.isArray(value)) {
+    return value.map(function (e) {
+      return deepReplace(e, entityProcessor);
+    });
+  } // transform element props
+
+
+  if (_typeof(value) === 'object' && (value === null || value === void 0 ? void 0 : value.$$__type) === 'element') {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return translatePresetToReact(value.$$__body, entityProcessor);
+  } // transform pure object props
+
+
+  if (_typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Object]') {
+    return Object.entries(value).reduce(function (col, _ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+
+      return _objectSpread(_objectSpread({}, col), {}, _defineProperty({}, key, deepReplace(value, entityProcessor)));
+    }, {});
+  }
+
+  return value;
+}
+
+function translatePresetToReact(value, processor) {
+  var props = value.props,
+      size = value.size;
+  var Component = processor({
+    $$__type: 'element',
+    $$__body: value
+  });
+  return /*#__PURE__*/React.createElement(Component, deepReplace(_objectSpread(_objectSpread({}, props), {}, {
+    style: _objectSpread(_objectSpread({}, props.style), size)
+  }), processor));
+}
+
+export var AtomRenderer = function AtomRenderer(props) {
+  var _useSiteData = useSiteData(),
+      entryExports = _useSiteData.entryExports;
+
+  switch (props.type) {
+    case 'COMPONENT':
+      return translatePresetToReact(props.value, function (entity) {
+        // TODO: support custom processor
+        return builtInProcessor(entity, entryExports);
+      });
+
+    default:
+      // TODO: handle FUNCTION type
+      return /*#__PURE__*/React.createElement(React.Fragment, null, props.type, " atom is not supported.");
+  }
+};

package/dist/client/theme-api/context.d.ts

@@ -4,6 +4,7 @@ import { type ComponentType } from 'react';
 import type { ILocalesConfig, IPreviewerProps, IThemeConfig } from './types';
 interface ISiteContext {
     pkg: Partial<Record<keyof typeof PICKED_PKG_FIELDS, any>>;
+    entryExports: Record<string, any>;
     demos: Record<string, {
         component: ComponentType;
         asset: IPreviewerProps['asset'];

package/dist/client/theme-api/context.js

@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 export var SiteContext = /*#__PURE__*/createContext({
   pkg: {},
+  entryExports: {},
   demos: {},
   components: {},
   locales: [],

package/dist/client/theme-api/index.d.ts

@@ -1,4 +1,5 @@
 export { createIntlCache, defineMessages, FormattedDate, FormattedDateParts, FormattedDisplayName, FormattedList, FormattedMessage, FormattedNumber, FormattedNumberParts, FormattedPlural, FormattedRelativeTime, FormattedTime, FormattedTimeParts, injectIntl, IntlContext, IntlProvider, RawIntlProvider, useIntl, } from 'react-intl';
+export { AtomRenderer } from './AtomRenderer';
 export { useSiteData } from './context';
 export { DumiDemo } from './DumiDemo';
 export { DumiDemoGrid } from './DumiDemoGrid';

package/dist/client/theme-api/index.js

@@ -1,4 +1,5 @@
 export { createIntlCache, defineMessages, FormattedDate, FormattedDateParts, FormattedDisplayName, FormattedList, FormattedMessage, FormattedNumber, FormattedNumberParts, FormattedPlural, FormattedRelativeTime, FormattedTime, FormattedTimeParts, injectIntl, IntlContext, IntlProvider, RawIntlProvider, useIntl } from 'react-intl';
+export { AtomRenderer } from "./AtomRenderer";
 export { useSiteData } from "./context";
 export { DumiDemo } from "./DumiDemo";
 export { DumiDemoGrid } from "./DumiDemoGrid";

package/dist/features/compile/index.js

@@ -75,7 +75,7 @@ var compile_default = (api) => {
     });
     memo.module.rule("dumi-page").type("javascript/auto").test(/\.(j|t)sx?$/).resourceQuery(/meta$/).use("page-meta-loader").loader(require.resolve("../../loaders/page"));
     memo.module.rule("dumi-demo").type("javascript/auto").test(/\..+$/).enforce("pre").resourceQuery(/techStack/).use("demo-loader").loader(require.resolve("../../loaders/demo")).options({ techStacks, cwd: api.cwd });
-    memo.module.rule("dumi-raw").post().resourceQuery(/dumi-raw/).use("raw-loader").loader(require.resolve("raw-loader"));
+    memo.module.rule("dumi-raw").post().resourceQuery(/dumi-raw/).use("raw-loader").loader(require.resolve("raw-loader")).end().use("pre-raw-loader").loader(require.resolve("../../loaders/pre-raw"));
     if (api.env === "development" && memo.plugins.has("fastRefresh")) {
       memo.plugin("fastRefresh").tap(([params]) => [
         {

package/dist/features/derivative.js

@@ -71,11 +71,14 @@ var derivative_default = (api) => {
   };
   api.describe({ key: "dumi:derivative" });
   api.onCheck(() => {
-    var _a;
+    var _a, _b;
     (0, import_assert.default)(!api.config.mpa, "MPA mode is not supported in dumi!");
     (0, import_assert.default)(!api.config.vite, "Vite mode is not supported yet!");
     (0, import_assert.default)(((_a = api.config.mfsu) == null ? void 0 : _a.strategy) !== "eager", "MFSU eager mode is not supported yet!");
     (0, import_assert.default)(!api.config.ssr || api.config.ssr.builder === "webpack", "Only `webpack` builder is supported in SSR mode!");
+    if (((_b = api.userConfig.history) == null ? void 0 : _b.type) === "hash") {
+      import_plugin_utils.logger.warn("Hash history is temporarily incompatible, it is recommended to use browser history for now.");
+    }
   });
   safeExcludeInMFSU(api, [new RegExp("dumi/dist/client")]);
   api.modifyDefaultConfig((memo) => {

package/dist/features/tabs.js

@@ -47,7 +47,7 @@ var tabs_default = (api) => {
       key: "addContentTab"
     });
     tabsFromPlugins.forEach((tab) => {
-      tab.id ?? (tab.id = `plugin-tab${tab.test ? `-${tab.test}` : ""}-${tab.key}`);
+      tab.id ?? (tab.id = `plugin-tab-${tab.key}`);
       tab.component = (0, import_plugin_utils.winPath)(tab.component);
     });
     return memo;
@@ -82,8 +82,8 @@ var tabs_default = (api) => {
         });
       }
     });
-    tabs.push(...tabsFromPlugins.map((tab) => ({
-      index: tabs.length,
+    tabs.push(...tabsFromPlugins.map((tab, index) => ({
+      index: tabs.length + index,
       key: tab.key,
       id: tab.id,
       file: tab.component

package/dist/features/theme/index.js

@@ -42,6 +42,12 @@ function getPkgThemePath(api) {
   const pkgThemeName = getPkgThemeName(api);
   return pkgThemeName && import_path.default.dirname(require.resolve(`${pkgThemeName}/package.json`, { paths: [api.cwd] }));
 }
+function getModuleExports(modulePath) {
+  return (0, import_bundler_utils.parseModuleSync)({
+    path: modulePath,
+    content: import_fs.default.readFileSync(modulePath, "utf-8")
+  })[1];
+}
 var theme_default = (api) => {
   const defaultThemeData = (0, import_loader.default)(DEFAULT_THEME_PATH);
   const pkgThemePath = getPkgThemePath(api);
@@ -60,7 +66,12 @@ var theme_default = (api) => {
       api.registerPlugins([plugin]);
     }
   });
-  (0, import_derivative.safeExcludeInMFSU)(api, ["dumi/theme-default", "@ant-design/icons-svg", getPkgThemeName(api)].filter(Boolean).map((pkg) => new RegExp(pkg)));
+  (0, import_derivative.safeExcludeInMFSU)(api, [
+    "dumi/theme-default",
+    "@ant-design/icons-svg",
+    "highlight-words-core",
+    getPkgThemeName(api)
+  ].filter(Boolean).map((pkg) => new RegExp(pkg)));
   api.register({
     key: "modifyAppData",
     before: "appData",
@@ -113,10 +124,7 @@ var theme_default = (api) => {
         if (item.source === "dumi")
           return;
         let contents = [];
-        const [, exports] = (0, import_bundler_utils.parseModuleSync)({
-          path: item.source,
-          content: import_fs.default.readFileSync(item.source, "utf-8")
-        });
+        const exports = getModuleExports(item.source);
         if (exports.includes("default")) {
           contents.push(`export { default } from '${item.source}';`);
         }
@@ -130,6 +138,10 @@ var theme_default = (api) => {
         });
       });
     });
+    const entryFile = api.config.resolve.entryFile && [import_path.default.resolve(api.cwd, api.config.resolve.entryFile)].find(import_fs.default.existsSync);
+    const entryExports = entryFile ? getModuleExports(entryFile) : [];
+    const hasDefaultExport = entryExports.includes("default");
+    const hasNamedExport = entryExports.some((exp) => exp !== "default");
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/ContextWrapper.tsx",
@@ -137,7 +149,14 @@ var theme_default = (api) => {
 import { useOutlet, history } from 'dumi';
 import { SiteContext } from '${(0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/context"))}';
 import { demos, components } from '../meta';
-import { locales } from '../locales/config';
+import { locales } from '../locales/config';${hasDefaultExport ? `
+import entryDefaultExport from '${(0, import_plugin_utils.winPath)(entryFile)}';` : ""}${hasNamedExport ? `
+import * as entryMemberExports from '${(0, import_plugin_utils.winPath)(entryFile)}';` : ""}
+
+const entryExports = {
+  ${hasDefaultExport ? "default: entryDefaultExport," : ""}
+  ${hasNamedExport ? "...entryMemberExports," : ""}
+};
 
 export default function DumiContextWrapper() {
   const outlet = useOutlet();
@@ -160,6 +179,7 @@ export default function DumiContextWrapper() {
   return (
     <SiteContext.Provider value={{
       pkg: ${JSON.stringify(import_plugin_utils.lodash.pick(api.pkg, ...Object.keys(import_constants.PICKED_PKG_FIELDS)))},
+      entryExports,
       demos,
       components,
       locales,

package/dist/loaders/markdown/index.js

@@ -137,6 +137,7 @@ function mdLoader(content) {
     ].join(":");
     cache.setSync(finalCacheKey, ret);
     cb(null, emit.call(this, opts, ret));
+    delete deferrer[cacheKey];
   }).catch(cb);
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -143,14 +143,15 @@ function rehypeDemo(opts) {
               parseOpts.fileAbsPath = codeNode.properties.src;
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, import_path.default.parse(parseOpts.fileAbsPath).name, vFile.data.frontmatter.atomId);
               component = `React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
-              codeNode.properties.title = codeValue || void 0;
+              if (codeValue)
+                codeNode.properties.title = codeValue;
               (_a2 = codeNode.properties).filename ?? (_a2.filename = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));
             } else {
               parseOpts.fileAbsPath = opts.fileAbsPath.replace(".md", ".tsx");
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, String(index++), vFile.data.frontmatter.atomId);
               component = techStack.transformCode(codeValue, {
                 type: "code-block",
-                fileAbsPath: opts.fileAbsPath
+                fileAbsPath: parseOpts.fileAbsPath
               });
             }
             const propDemo = { id: parseOpts.id };

package/dist/loaders/markdown/transformer/remarkContainer.d.ts

@@ -1,3 +1,3 @@
 import type { Root } from 'mdast';
 import type { Transformer } from 'unified';
-export default function remarkContainer(): Transformer<Root>;
+export default function remarkContainer(this: any): Transformer<Root>;

package/dist/loaders/markdown/transformer/remarkContainer.js

@@ -32,6 +32,10 @@ var VALID_CONTAINER_TYPES = ["info", "warning", "success", "error"];
   ({ visit, SKIP } = await import("unist-util-visit"));
 })();
 function remarkContainer() {
+  const data = this.data();
+  const micromarkExtensions = data.micromarkExtensions.find(({ flow, text }) => flow && "58" in flow && text && "58" in text);
+  delete micromarkExtensions.text;
+  micromarkExtensions.flow["58"].splice(1, 1);
   return (tree) => {
     visit(tree, (node, i, parent) => {
       if (node.type === "containerDirective" && VALID_CONTAINER_TYPES.includes(node.name)) {

package/dist/loaders/pre-raw/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * loader for discard frontmatter from code file content
+ */
+export default function preRawLoader(this: any, raw: string): string;

package/dist/loaders/pre-raw/index.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loaders/pre-raw/index.ts
+var pre_raw_exports = {};
+__export(pre_raw_exports, {
+  default: () => preRawLoader
+});
+module.exports = __toCommonJS(pre_raw_exports);
+var import_utils = require("../../utils");
+function preRawLoader(raw) {
+  if (/\.(j|t)sx?$/.test(this.resourcePath)) {
+    return (0, import_utils.parseCodeFrontmatter)(raw).code;
+  }
+  return raw;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/service/service.d.ts

@@ -3,7 +3,7 @@ export declare class DumiService extends Service {
     constructor();
     getPaths(): Promise<{
         cwd: string;
-        absSrcPath: string;
+        absSrcPath: any;
         absPagesPath: string;
         absApiRoutesPath: string;
         absTmpPath: string;

package/dist/service/service.js

@@ -38,8 +38,9 @@ var DumiService = class extends import_umi.Service {
     });
   }
   async getPaths() {
+    var _a;
     const cwd = this.cwd;
-    const absSrcPath = cwd;
+    const absSrcPath = ((_a = this.userConfig.alias) == null ? void 0 : _a["@"]) ?? cwd;
     const absPagesPath = winJoin(absSrcPath, "pages");
     const absApiRoutesPath = winJoin(absSrcPath, "api");
     const tmp = this.env === import_core.Env.development ? `tmp` : `tmp-${this.env}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -102,6 +102,7 @@
     "mdast-util-to-string": "^3.1.0",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "^1.3.5",
+    "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "raw-loader": "^4.0.2",
     "rc-tabs": "12.1.0-alpha.1",

package/theme-default/builtins/SourceCode/index.d.ts

@@ -1,5 +1,5 @@
 import { type Language } from 'prism-react-renderer';
-import 'prismjs/themes/prism-coy.css';
+import 'prism-themes/themes/prism-one-light.css';
 import { type FC } from 'react';
 import './index.less';
 declare const SourceCode: FC<{

package/theme-default/builtins/SourceCode/index.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ReactComponent as IconCheck } from '@ant-design/icons-svg/inline-svg/outlined/check.svg';
 import { ReactComponent as IconCopy } from '@ant-design/icons-svg/inline-svg/outlined/copy.svg';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import 'prismjs/themes/prism-coy.css';
+import 'prism-themes/themes/prism-one-light.css';
 import React, { useRef, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import "./index.less";

package/theme-default/slots/Content/index.less

@@ -8,6 +8,10 @@
     color: @c-primary;
   }
 
+  img {
+    max-width: 100%;
+  }
+
   // inline code
   *:not(pre) code {
     padding: 2px 5px;

package/theme-default/slots/RtlSwitch/index.less

@@ -1,5 +1,11 @@
 @import '../LangSwitch/index.less';
 
+.@{prefix}-lang-switch {
+  + & {
+    margin-inline-start: 20px;
+  }
+}
+
 html[data-direction='rtl'] {
   direction: rtl;
 }

package/theme-default/slots/SearchBar/Input.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare const Input: React.ForwardRefExoticComponent<{
+    onChange: (keywords: string) => void;
+} & Pick<NativeInputProps, "onFocus" | "onBlur"> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/theme-default/slots/SearchBar/Input.js

@@ -0,0 +1,40 @@
+import { useIntl } from 'dumi';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
+  var intl = useIntl();
+  var imeWaiting = useRef(false);
+  var nativeInputRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return nativeInputRef.current;
+  });
+  return /*#__PURE__*/React.createElement("input", {
+    className: "dumi-default-search-bar-input",
+    onCompositionStart: function onCompositionStart() {
+      return imeWaiting.current = true;
+    },
+    onCompositionEnd: function onCompositionEnd(ev) {
+      imeWaiting.current = false; // special case: press Enter open IME panel will not trigger onChange
+
+      props.onChange(ev.currentTarget.value);
+    },
+    onFocus: props.onFocus,
+    onBlur: props.onBlur,
+    onKeyDown: function onKeyDown(ev) {
+      if (['ArrowDown', 'ArrowUp'].includes(ev.key)) ev.preventDefault(); // esc to blur input
+
+      if (ev.key === 'Escape' && !imeWaiting.current) ev.currentTarget.blur();
+    },
+    onChange: function onChange(ev) {
+      // wait for onCompositionEnd event be triggered
+      setTimeout(function () {
+        if (!imeWaiting.current) {
+          props.onChange(ev.target.value);
+        }
+      }, 1);
+    },
+    placeholder: intl.formatMessage({
+      id: 'header.search.placeholder'
+    }),
+    ref: nativeInputRef
+  });
+});

package/theme-default/slots/SearchBar/Mask.d.ts

@@ -0,0 +1,9 @@
+import { type FC, type ReactNode } from 'react';
+declare type MaskProps = {
+    visible: boolean;
+    children: ReactNode;
+    onMaskClick?: () => void;
+    onClose?: () => void;
+};
+export declare const Mask: FC<MaskProps>;
+export {};

package/theme-default/slots/SearchBar/Mask.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+export var Mask = function Mask(props) {
+  useEffect(function () {
+    if (props.visible) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      var _props$onClose;
+
+      document.body.style.overflow = '';
+      (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
+    }
+  }, [props.visible]);
+  return props.visible ? /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-search-modal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-search-modal-mask",
+    onClick: props.onMaskClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-search-modal-content"
+  }, props.children)) : null;
+};

package/theme-default/slots/SearchBar/index.d.ts

@@ -1,4 +1,6 @@
 import { type FC } from 'react';
 import './index.less';
+export { Input as SearchInput } from './Input';
+export { Mask as SearchMask } from './Mask';
 declare const SearchBar: FC;
 export default SearchBar;

package/theme-default/slots/SearchBar/index.js

@@ -12,23 +12,27 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+import { ReactComponent as IconArrowDown } from '@ant-design/icons-svg/inline-svg/outlined/arrow-down.svg';
+import { ReactComponent as IconArrowUp } from '@ant-design/icons-svg/inline-svg/outlined/arrow-up.svg';
 import { ReactComponent as IconSearch } from '@ant-design/icons-svg/inline-svg/outlined/search.svg';
-import { useIntl, useSiteSearch } from 'dumi';
+import { useSiteSearch } from 'dumi';
 import React, { useEffect, useRef, useState } from 'react';
 import SearchResult from "../SearchResult";
 import "./index.less";
+import { Input } from "./Input";
+import { Mask } from "./Mask";
+export { Input as SearchInput } from "./Input";
+export { Mask as SearchMask } from "./Mask";
 var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform : '');
 
 var SearchBar = function SearchBar() {
-  var intl = useIntl();
-  var imeWaiting = useRef(false);
-
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       focusing = _useState2[0],
       setFocusing = _useState2[1];
 
-  var input = useRef(null);
+  var inputRef = useRef(null);
+  var modalInputRef = useRef(null);
 
   var _useState3 = useState('⌘'),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -41,6 +45,11 @@ var SearchBar = function SearchBar() {
       result = _useSiteSearch.result,
       loading = _useSiteSearch.loading;
 
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      modalVisible = _useState6[0],
+      setModalVisible = _useState6[1];
+
   useEffect(function () {
     // why put useEffect?
     // to avoid Text content mismatch between server & client in ssr
@@ -49,11 +58,35 @@ var SearchBar = function SearchBar() {
     }
 
     var handler = function handler(ev) {
-      if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && ev.key === 'k') {
-        var _input$current;
+      if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && ev.key === 'k' || ev.key === '/') {
+        ev.preventDefault();
+
+        if (inputRef.current) {
+          var _inputRef$current$get = inputRef.current.getBoundingClientRect(),
+              top = _inputRef$current$get.top,
+              bottom = _inputRef$current$get.bottom,
+              left = _inputRef$current$get.left,
+              right = _inputRef$current$get.right;
+
+          var isInViewport = top >= 0 && left >= 0 && bottom <= window.innerHeight && right <= window.innerWidth;
+
+          if (isInViewport) {
+            inputRef.current.focus();
+          } else {
+            setKeywords('');
+            setModalVisible(true);
+            setTimeout(function () {
+              var _modalInputRef$curren;
+
+              (_modalInputRef$curren = modalInputRef.current) === null || _modalInputRef$curren === void 0 ? void 0 : _modalInputRef$curren.focus();
+            });
+          }
+        }
+      }
 
-        (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.focus();
+      if (ev.key === 'Escape') {
         ev.preventDefault();
+        setModalVisible(false);
       }
     };
 
@@ -64,15 +97,9 @@ var SearchBar = function SearchBar() {
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-search-bar"
-  }, /*#__PURE__*/React.createElement(IconSearch, null), /*#__PURE__*/React.createElement("input", {
-    onCompositionStart: function onCompositionStart() {
-      return imeWaiting.current = true;
-    },
-    onCompositionEnd: function onCompositionEnd(ev) {
-      imeWaiting.current = false; // special case: press Enter open IME panel will not trigger onChange
-
-      setKeywords(ev.currentTarget.value);
-    },
+  }, /*#__PURE__*/React.createElement(IconSearch, {
+    className: "dumi-default-search-bar-svg"
+  }), /*#__PURE__*/React.createElement(Input, {
     onFocus: function onFocus() {
       return setFocusing(true);
     },
@@ -82,31 +109,74 @@ var SearchBar = function SearchBar() {
         setFocusing(false);
       }, 1);
     },
-    onKeyDown: function onKeyDown(ev) {
-      if (['ArrowDown', 'ArrowUp'].includes(ev.key)) ev.preventDefault(); // esc to blur input
-
-      if (ev.key === 'Escape' && !imeWaiting.current) ev.currentTarget.blur();
+    onChange: function onChange(keywords) {
+      return setKeywords(keywords);
     },
-    onChange: function onChange(ev) {
-      // wait for onCompositionEnd event be triggered
-      setTimeout(function () {
-        if (!imeWaiting.current) {
-          setKeywords(ev.target.value);
-        }
-      }, 1);
-    },
-    placeholder: intl.formatMessage({
-      id: 'header.search.placeholder'
-    }),
-    ref: input
+    ref: inputRef
   }), /*#__PURE__*/React.createElement("span", {
     className: "dumi-default-search-shortcut"
-  }, symbol, " K"), keywords.trim() && focusing && (result.length || !loading) && /*#__PURE__*/React.createElement("div", {
+  }, symbol, " K"), keywords.trim() && focusing && (result.length || !loading) && !modalVisible && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-search-popover"
   }, /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(SearchResult, {
     data: result,
     loading: loading
-  }))));
+  }))), /*#__PURE__*/React.createElement(Mask, {
+    visible: modalVisible,
+    onMaskClick: function onMaskClick() {
+      setModalVisible(false);
+    },
+    onClose: function onClose() {
+      return setKeywords('');
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(IconSearch, {
+    className: "dumi-default-search-bar-svg"
+  }), /*#__PURE__*/React.createElement(Input, {
+    onFocus: function onFocus() {
+      return setFocusing(true);
+    },
+    onBlur: function onBlur() {
+      // wait for item click
+      setTimeout(function () {
+        setFocusing(false);
+      }, 1);
+    },
+    onChange: function onChange(keywords) {
+      return setKeywords(keywords);
+    },
+    ref: modalInputRef
+  })), /*#__PURE__*/React.createElement(SearchResult, {
+    data: result,
+    loading: loading,
+    onItemSelect: function onItemSelect() {
+      setModalVisible(false);
+    }
+  }), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement("ul", {
+    className: "dumi-default-search-modal-commands"
+  }, /*#__PURE__*/React.createElement("li", {
+    className: "dumi-default-search-modal-commands-arrow"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-search-modal-shortcut"
+  }, /*#__PURE__*/React.createElement(IconArrowUp, {
+    width: "10px",
+    height: "10px",
+    fill: "rgba(0, 0, 0, 0.45)"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-search-modal-shortcut"
+  }, /*#__PURE__*/React.createElement(IconArrowDown, {
+    width: "10px",
+    height: "10px",
+    fill: "rgba(0, 0, 0, 0.45)"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-search-modal-commands-text"
+  }, "to navigate")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-search-modal-shortcut"
+  }, "esc"), /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-search-modal-commands-text"
+  }, "to close"))))));
 };
 
 export default SearchBar;

package/theme-default/slots/SearchBar/index.less

@@ -12,7 +12,7 @@
     margin-inline-end: 28px;
   }
 
-  > svg {
+  &-svg {
     position: absolute;
     top: 50%;
     margin-top: 1px;
@@ -22,7 +22,7 @@
     transform: translateY(-50%);
   }
 
-  > input {
+  &-input {
     width: 280px;
     height: 40px;
     padding: 0;
@@ -104,4 +104,89 @@
       border-radius: inherit;
     }
   }
+
+  .@{prefix}-search-modal {
+    position: fixed;
+    top: 0;
+    inset-inline-start: 0;
+    z-index: 1000;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+
+    &-mask {
+      background-color: rgb(0 0 0 / 45%);
+      width: 100%;
+      height: 100%;
+    }
+
+    &-content {
+      position: absolute;
+      top: 60px;
+      background-color: #fff;
+      width: 500px;
+      padding: 12px;
+      box-sizing: border-box;
+      box-shadow: inset 1px 1px 0 0 hsl(0deg 0% 100% / 50%), 0 3px 8px 0 #555a64;
+      border-radius: 8px;
+    }
+
+    .@{prefix}-search-bar-input {
+      width: 100%;
+      border-radius: 4px;
+    }
+
+    .@{prefix}-search-result {
+      min-height: 60px;
+      margin-top: 12px;
+
+      > dl > dd {
+        margin: 0 auto;
+      }
+    }
+
+    &-commands {
+      justify-content: flex-start;
+      font-size: 12px;
+      color: @c-text-note;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      border-top: 1px solid @c-border-light;
+      padding-top: 12px;
+      display: flex;
+      align-items: center;
+      user-select: none;
+
+      > li {
+        margin-inline-end: 10px;
+      }
+
+      &-arrow {
+        .@{prefix}-search-modal-shortcut {
+          margin-inline-end: 4px;
+        }
+      }
+
+      &-text {
+        margin-inline-start: 5px;
+      }
+    }
+
+    &-shortcut {
+      display: inline-block;
+      padding: 4px 8px;
+      color: @c-text-note;
+      font-size: 12px;
+      line-height: 1;
+      white-space: nowrap;
+      background-color: @c-site-bg;
+      border-radius: 3px;
+      border: 1px solid @c-border;
+      border-bottom-width: 2px;
+      transition: all 0.3s;
+      pointer-events: none;
+    }
+  }
 }

package/theme-default/slots/SearchResult/index.d.ts

@@ -5,5 +5,6 @@ declare type ISearchResult = ReturnType<typeof useSiteSearch>['result'];
 declare const SearchResult: FC<{
     data: ISearchResult;
     loading: boolean;
+    onItemSelect?: (item: ISearchResult[0]['hints'][0]) => void;
 }>;
 export default SearchResult;

package/theme-default/slots/SearchResult/index.js

@@ -125,10 +125,13 @@ var SearchResult = function SearchResult(props) {
       } else if (ev.key === 'ArrowUp') {
         setActiveIndex((activeIndex + histsCount - 1) % histsCount);
       } else if (ev.key === 'Enter' && activeIndex >= 0) {
-        var item = data.find(function (item) {
+        var _props$onItemSelect;
+
+        var _item = data.find(function (item) {
           return item.type === 'hint' && item.activeIndex === activeIndex;
         }).value;
-        history.push(item.link);
+        history.push(_item.link);
+        (_props$onItemSelect = props.onItemSelect) === null || _props$onItemSelect === void 0 ? void 0 : _props$onItemSelect.call(props, _item);
         document.activeElement.blur();
       }
 
@@ -161,7 +164,12 @@ var SearchResult = function SearchResult(props) {
       key: String(i)
     }, /*#__PURE__*/React.createElement(Link, {
       to: item.value.link,
-      "data-active": activeIndex === item.activeIndex || undefined
+      "data-active": activeIndex === item.activeIndex || undefined,
+      onClick: function onClick() {
+        var _props$onItemSelect2;
+
+        return (_props$onItemSelect2 = props.onItemSelect) === null || _props$onItemSelect2 === void 0 ? void 0 : _props$onItemSelect2.call(props, item.value);
+      }
     }, /*#__PURE__*/React.createElement(ICONS_MAPPING[item.value.type]), /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Highlight, {
       texts: item.value.highlightTitleTexts
     })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Highlight, {