dumi 2.0.2 → 2.0.4

package/compiled/@umijs/plugins/index.js

@@ -1 +1 @@
-(function(){var e={226:function(e){var n=Object.defineProperty;var t=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var __export=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:true})};var __copyProps=(e,o,i,c)=>{if(o&&typeof o==="object"||typeof o==="function"){for(let s of r(o))if(!a.call(e,s)&&s!==i)n(e,s,{get:()=>o[s],enumerable:!(c=t(o,s))||c.enumerable})}return e};var __toCommonJS=e=>__copyProps(n({},"__esModule",{value:true}),e);var o={};__export(o,{default:()=>analytics_default});e.exports=__toCommonJS(o);var analytics_default=e=>{const n=process.env.GA_KEY;const t=process.env.GA_V2_KEY;const enableBy=e=>e.config.analytics||n;e.describe({key:"analytics",config:{schema(e){return e.alternatives().try(e.object({baidu:e.string(),ga:e.string(),ga_v2:e.string()}),e.boolean().invalid(true))},onChange:e.ConfigChangeType.reload},enableBy:enableBy});const baiduTpl=e=>`\n    (function() {\n      var hm = document.createElement('script');\n      hm.src = '//hm.baidu.com/hm.js?${e}';\n      var s = document.getElementsByTagName('script')[0];\n      s.parentNode.insertBefore(hm, s);\n    })();\n  `;const gaTpl=e=>`\n    (function(){\n      if (!location.port) {\n        (function (i, s, o, g, r, a, m) {\n          i['GoogleAnalyticsObject'] = r;\n          i[r] = i[r] || function () {\n              (i[r].q = i[r].q || []).push(arguments)\n            }, i[r].l = 1 * new Date();\n          a = s.createElement(o),\n            m = s.getElementsByTagName(o)[0];\n          a.async = 1;\n          a.src = g;\n          m.parentNode.insertBefore(a, m)\n        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');\n        ga('create', '${e}', 'auto');\n        ga('send', 'pageview');\n      }\n    })();\n  `;const gaV2Tpl=e=>`\n      window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', '${e}');\n    `.trim();e.addHTMLHeadScripts((()=>{const r=e.config.analytics||{};const{baidu:a,ga:o=n,ga_v2:i=t}=r;const c=[];if(a){c.push({content:"var _hmt = _hmt || [];"})}if(e.env!=="development"){if(a){c.push({content:baiduTpl(a)})}if(o){c.push({content:gaTpl(o)})}if(i){c.push({async:true,src:`//www.googletagmanager.com/gtag/js?id=${i}`},{content:gaV2Tpl(i)})}}return c.filter(Boolean)}))};0&&0}};var n={};function __nccwpck_require__(t){var r=n[t];if(r!==undefined){return r.exports}var a=n[t]={exports:{}};var o=true;try{e[t](a,a.exports,__nccwpck_require__);o=false}finally{if(o)delete n[t]}return a.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var t=__nccwpck_require__(226);module.exports=t})();
+(function(){var e={814:function(e){var n=Object.defineProperty;var t=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var __export=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:true})};var __copyProps=(e,o,i,c)=>{if(o&&typeof o==="object"||typeof o==="function"){for(let s of r(o))if(!a.call(e,s)&&s!==i)n(e,s,{get:()=>o[s],enumerable:!(c=t(o,s))||c.enumerable})}return e};var __toCommonJS=e=>__copyProps(n({},"__esModule",{value:true}),e);var o={};__export(o,{default:()=>analytics_default});e.exports=__toCommonJS(o);var analytics_default=e=>{const n=process.env.GA_KEY;const t=process.env.GA_V2_KEY;const enableBy=e=>e.config.analytics||n;e.describe({key:"analytics",config:{schema(e){return e.alternatives().try(e.object({baidu:e.string(),ga:e.string(),ga_v2:e.string()}),e.boolean().invalid(true))},onChange:e.ConfigChangeType.reload},enableBy:enableBy});const baiduTpl=e=>`\n    (function() {\n      var hm = document.createElement('script');\n      hm.src = '//hm.baidu.com/hm.js?${e}';\n      var s = document.getElementsByTagName('script')[0];\n      s.parentNode.insertBefore(hm, s);\n    })();\n  `;const gaTpl=e=>`\n    (function(){\n      if (!location.port) {\n        (function (i, s, o, g, r, a, m) {\n          i['GoogleAnalyticsObject'] = r;\n          i[r] = i[r] || function () {\n              (i[r].q = i[r].q || []).push(arguments)\n            }, i[r].l = 1 * new Date();\n          a = s.createElement(o),\n            m = s.getElementsByTagName(o)[0];\n          a.async = 1;\n          a.src = g;\n          m.parentNode.insertBefore(a, m)\n        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');\n        ga('create', '${e}', 'auto');\n        ga('send', 'pageview');\n      }\n    })();\n  `;const gaV2Tpl=e=>`\n      window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', '${e}');\n    `.trim();e.addHTMLHeadScripts((()=>{const r=e.config.analytics||{};const{baidu:a,ga:o=n,ga_v2:i=t}=r;const c=[];if(a){c.push({content:"var _hmt = _hmt || [];"})}if(e.env!=="development"){if(a){c.push({content:baiduTpl(a)})}if(o){c.push({content:gaTpl(o)})}if(i){c.push({async:true,src:`//www.googletagmanager.com/gtag/js?id=${i}`},{content:gaV2Tpl(i)})}}return c.filter(Boolean)}))};0&&0}};var n={};function __nccwpck_require__(t){var r=n[t];if(r!==undefined){return r.exports}var a=n[t]={exports:{}};var o=true;try{e[t](a,a.exports,__nccwpck_require__);o=false}finally{if(o)delete n[t]}return a.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var t=__nccwpck_require__(814);module.exports=t})();

package/compiled/@umijs/plugins/package.json

@@ -1 +1 @@
-{"name":"@umijs/plugins","version":"4.0.30","authors":["chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"],"license":"MIT","_lastModified":"2022-11-13T07:05:33.094Z"}
+{"name":"@umijs/plugins","version":"4.0.32","authors":["chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"],"license":"MIT","_lastModified":"2022-11-20T09:58:00.334Z"}

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,16 +71,19 @@ 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) => {
     if (api.userConfig.mfsu !== false) {
-      if (import_fs.default.existsSync(import_path.default.join(api.cwd, "node_modules", ".pnpm"))) {
+      if (import_fs.default.existsSync(import_path.default.join(api.cwd, "node_modules", ".pnpm")) || process.platform === "win32") {
         memo.mfsu = false;
       } else {
         memo.mfsu.strategy = "normal";

package/dist/features/meta.js

@@ -43,7 +43,7 @@ var meta_default = (api) => {
         if (!route.isLayout && !/\*|:/.test(route.path) && route.file && !(0, import_tabs.isTabRouteFile)(route.file)) {
           metaFiles.push({
             index: metaFiles.length,
-            file: route.file,
+            file: (0, import_plugin_utils.winPath)(route.file),
             id: route.id
           });
         }

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/remarkEmbed.js

@@ -35,12 +35,16 @@ var EMBED_CLOSE_TAG = "</embed>";
 var unified;
 var remarkParse;
 var remarkFrontmatter;
+var remarkDirective;
+var remarkGfm;
 var visit;
 (async () => {
   ({ visitParents: visit } = await import("unist-util-visit-parents"));
   ({ unified } = await import("unified"));
   ({ default: remarkParse } = await import("remark-parse"));
   ({ default: remarkFrontmatter } = await import("remark-frontmatter"));
+  ({ default: remarkDirective } = await import("remark-directive"));
+  ({ default: remarkGfm } = await import("remark-gfm"));
 })();
 function remarkRawAST() {
   this.Compiler = function Compiler(ast) {
@@ -79,7 +83,7 @@ function remarkEmbed(opts) {
           const {
             result: mdast,
             data: { embeds }
-          } = unified().use(remarkParse).use(remarkEmbed, { ...opts, fileAbsPath: absPath }).use(remarkFrontmatter).use(remarkRawAST).processSync(content);
+          } = unified().use(remarkParse).use(remarkEmbed, { ...opts, fileAbsPath: absPath }).use(remarkFrontmatter).use(remarkDirective).use(remarkGfm).use(remarkRawAST).processSync(content);
           if (!node.value.endsWith(EMBED_CLOSE_TAG)) {
             for (let j = i; j < parent.children.length; j++) {
               const sibling = parent.children[j];

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,8 +1,26 @@
 {
   "name": "dumi",
-  "version": "2.0.2",
-  "description": "Framework for developing UI components",
-  "keywords": [],
+  "version": "2.0.4",
+  "description": "📖 Documentation Generator of React Component",
+  "keywords": [
+    "generator",
+    "umi",
+    "webpack",
+    "react",
+    "static site generator",
+    "jamstack",
+    "markdown",
+    "components",
+    "documentation"
+  ],
+  "homepage": "https://d.umijs.org",
+  "bugs": {
+    "url": "https://github.com/umijs/dumi/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/dumi"
+  },
   "license": "MIT",
   "main": "dist/index.js",
   "types": "index.d.ts",
@@ -12,7 +30,9 @@
     "dist",
     "compiled",
     "theme-default",
-    "index.d.ts"
+    "index.d.ts",
+    "plugin-utils.js",
+    "plugin-utils.d.ts"
   ],
   "scripts": {
     "build": "father build",
@@ -22,6 +42,7 @@
     "docs:build": "node ./bin/dumi.js build",
     "docs:dev": "node ./bin/dumi.js dev",
     "docs:sync": "node ./scripts/sync-from-umi.js",
+    "format": "prettier --cache --write .",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
@@ -36,19 +57,19 @@
   },
   "lint-staged": {
     "*.{md,json}": [
-      "prettier --write --no-error-on-unmatched-pattern"
+      "prettier --cache --write --no-error-on-unmatched-pattern"
     ],
     "*.{css,less}": [
       "stylelint --fix",
-      "prettier --write"
+      "prettier --cache --write"
     ],
     "*.{js,jsx}": [
       "eslint --fix",
-      "prettier --write"
+      "prettier --cache --write"
     ],
     "*.{ts,tsx}": [
       "eslint --fix",
-      "prettier --parser=typescript --write"
+      "prettier --cache --parser=typescript --write"
     ]
   },
   "dependencies": {
@@ -81,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",
@@ -118,7 +140,7 @@
     "@types/react": "^18.0.16",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@umijs/lint": "^4.0.32",
-    "@umijs/plugins": "^4.0.32",
+    "@umijs/plugins": "4.0.32",
     "eslint": "^8.20.0",
     "father": "^4.1.0",
     "husky": "^8.0.1",

package/plugin-utils.d.ts

@@ -0,0 +1 @@
+export * from 'umi/plugin-utils';

package/plugin-utils.js

@@ -0,0 +1 @@
+module.exports = require('umi/plugin-utils');

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/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, {