@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/Highlight/DiffView/index.js

@@ -1,54 +1,31 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Highlight/DiffView/index.tsx
-var DiffView_exports = {};
-__export(DiffView_exports, {
-  default: () => DiffView_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(DiffView_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_diff = require("diff");
-var import_core = __toESM(require("highlight.js/lib/core"));
-var import_warning = __toESM(require("rc-util/lib/warning"));
-var import_react = __toESM(require("react"));
-var import__ = require("..");
-var import_util = require("../../_util");
-var import_useKeyDownCopyEvent = require("../useKeyDownCopyEvent");
-var import_DiffCells = __toESM(require("./DiffCells"));
-var import__2 = require("../index.less");
-var MAX_MERGE_TIMES = 1e4;
-var EMPTY_TEXT = `<span class="hljs-comment">// 没有数据</span>`;
+exports.default = void 0;
+var _design = require("@oceanbase/design");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _diff = require("diff");
+var _core = _interopRequireDefault(require("highlight.js/lib/core"));
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("..");
+var _useKeyDownCopyEvent = require("../useKeyDownCopyEvent");
+var _DiffCells = _interopRequireDefault(require("./DiffCells"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MAX_MERGE_TIMES = 10000;
+const EMPTY_TEXT = `<span class="hljs-comment">// 没有数据</span>`;
 function getHighlightRows(language, code) {
-  const { value } = language ? import_core.default.highlight(language, code) : import_core.default.highlightAuto(code);
+  const {
+    value
+  } = language ? _core.default.highlight(language, code) : _core.default.highlightAuto(code);
   return value.split(/\r?\n/);
 }
-var DiffView = ({
+const DiffView = ({
   style,
   className,
   prefixCls: customizePrefixCls,
@@ -60,45 +37,55 @@ var DiffView = ({
   height,
   startRowIndex: baseStartRowIndex = 1
 }) => {
-  const prefixCls = (0, import_util.getPrefix)("highlight");
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = customizePrefixCls || getPrefixCls('highlight');
   const diffPrefixCls = `${prefixCls}-diff`;
-  const [report, setReport] = import_react.default.useState(null);
+  const [report, setReport] = _react.default.useState(null);
   const normalizedIndexes = Array.isArray(baseStartRowIndex) ? baseStartRowIndex : [baseStartRowIndex, baseStartRowIndex];
   const [baseStartRowIndexSrc = 1, baseStartRowIndexTgt = 1] = normalizedIndexes;
   const rowOffsetSrc = baseStartRowIndexSrc > 1 ? baseStartRowIndexSrc - 1 : 0;
   const rowOffsetTgt = baseStartRowIndexTgt > 1 ? baseStartRowIndexTgt - 1 : 0;
-  (0, import_react.useEffect)(() => {
+
+  // =========================== Language ===========================
+  (0, _react.useEffect)(() => {
     if (language) {
-      import_core.default.registerLanguage(language, import__.languageMap[language]);
+      _core.default.registerLanguage(language, _.languageMap[language]);
     } else {
-      Object.keys(import__.languageMap).forEach((lan) => {
-        import_core.default.registerLanguage(lan, import__.languageMap[lan]);
+      Object.keys(_.languageMap).forEach(lan => {
+        _core.default.registerLanguage(lan, _.languageMap[lan]);
       });
     }
   }, [language]);
-  const [selectable, setSelectable] = import_react.default.useState(null);
+
+  // ============================= Lock =============================
+  // Lock the selection to make user easy to copy
+  const [selectable, setSelectable] = _react.default.useState(null);
   function setSelectableRegion(region) {
-    var _a, _b, _c, _d, _e, _f;
     if (region !== selectable) {
-      (_c = (_a = window.getSelection) == null ? void 0 : (_b = _a.call(window)).removeAllRanges) == null ? void 0 : _c.call(_b);
-      (_f = (_d = window.getSelection) == null ? void 0 : (_e = _d.call(window)).empty) == null ? void 0 : _f.call(_e);
+      window.getSelection?.().removeAllRanges?.();
+      window.getSelection?.().empty?.();
     }
     setSelectable(region);
   }
   const onSourceMouseDown = () => {
-    setSelectableRegion("source");
+    setSelectableRegion('source');
   };
   const onTargetMouseDown = () => {
-    setSelectableRegion("target");
+    setSelectableRegion('target');
   };
-  (0, import_react.useEffect)(() => {
+
+  // ============================= Diff =============================
+  // Collection diff content
+  (0, _react.useEffect)(() => {
     if (!source && !target) {
       setReport(null);
       return;
     }
-    const srcRows = getHighlightRows(language, source || "");
-    const tgtRows = getHighlightRows(language, target || "");
-    const diff = (0, import_diff.diffLines)(source || "", target || "");
+    const srcRows = getHighlightRows(language, source || '');
+    const tgtRows = getHighlightRows(language, target || '');
+    const diff = (0, _diff.diffLines)(source || '', target || '');
     const newReport = {
       source: srcRows,
       target: tgtRows,
@@ -106,7 +93,9 @@ var DiffView = ({
     };
     setReport(newReport);
   }, [source, target, language]);
-  const diffData = (0, import_react.useMemo)(() => {
+
+  // Get diff rows
+  const diffData = (0, _react.useMemo)(() => {
     if (!report) {
       return null;
     }
@@ -114,56 +103,65 @@ var DiffView = ({
     let endRowIndex = 0;
     const sourceRows = [];
     const targetRows = [];
-    report.diff.forEach(({ count, added, removed }) => {
+    report.diff.forEach(({
+      count,
+      added,
+      removed
+    }) => {
+      // Source
       if (added) {
         sourceRows.push(...new Array(count).fill(null));
       } else {
-        sourceRows.push(
-          ...report.source.slice(startRowIndex, startRowIndex + count).map((value, index) => ({
-            value,
-            index: startRowIndex + index + 1,
-            type: removed ? "remove" : "keep"
-          }))
-        );
+        sourceRows.push(...report.source.slice(startRowIndex, startRowIndex + count).map((value, index) => ({
+          value,
+          index: startRowIndex + index + 1,
+          type: removed ? 'remove' : 'keep'
+        })));
         startRowIndex += count;
       }
+
+      // Target
       if (removed) {
         targetRows.push(...new Array(count).fill(null));
       } else {
-        targetRows.push(
-          ...report.target.slice(endRowIndex, endRowIndex + count).map((value, index) => ({
-            value,
-            index: endRowIndex + index + 1,
-            type: added ? "add" : "keep"
-          }))
-        );
+        targetRows.push(...report.target.slice(endRowIndex, endRowIndex + count).map((value, index) => ({
+          value,
+          index: endRowIndex + index + 1,
+          type: added ? 'add' : 'keep'
+        })));
         endRowIndex += count;
       }
     });
-    return { sourceRows, targetRows };
+    return {
+      sourceRows,
+      targetRows
+    };
   }, [report, split]);
-  const mergedData = (0, import_react.useMemo)(() => {
+
+  // Merge -- & ++ to one row
+  const mergedData = (0, _react.useMemo)(() => {
     if (!diffData) {
       return null;
     }
-    function findMergeRowIndex(startIndex, sourceRows2, targetRows2) {
-      var _a, _b, _c, _d;
-      for (let index = startIndex; index < sourceRows2.length - 1; index += 1) {
+    function findMergeRowIndex(startIndex, sourceRows, targetRows) {
+      for (let index = startIndex; index < sourceRows.length - 1; index += 1) {
         if (
-          // Row: ---- | null
-          // Row: null | ++++
-          ((_a = sourceRows2[index]) == null ? void 0 : _a.type) === "remove" && !targetRows2[index] && !sourceRows2[index + 1] && ((_b = targetRows2[index + 1]) == null ? void 0 : _b.type) === "add"
-        ) {
+        // Row: ---- | null
+        // Row: null | ++++
+        sourceRows[index]?.type === 'remove' && !targetRows[index] && !sourceRows[index + 1] && targetRows[index + 1]?.type === 'add') {
+          // Find source remove start index
           let removeStartIndex = index;
           for (let i = index - 1; i >= 0; i -= 1) {
-            if (((_c = sourceRows2[i]) == null ? void 0 : _c.type) !== "remove") {
+            if (sourceRows[i]?.type !== 'remove') {
               removeStartIndex = i + 1;
               break;
             }
           }
+
+          // Find target add end index
           let addEndIndex = index;
-          for (let i = index + 1; i <= targetRows2.length; i += 1) {
-            if (((_d = targetRows2[i]) == null ? void 0 : _d.type) !== "add") {
+          for (let i = index + 1; i <= targetRows.length; i += 1) {
+            if (targetRows[i]?.type !== 'add') {
               addEndIndex = i - 1;
               break;
             }
@@ -177,7 +175,10 @@ var DiffView = ({
       }
       return null;
     }
-    let { sourceRows, targetRows } = diffData;
+    let {
+      sourceRows,
+      targetRows
+    } = diffData;
     let mergeStartIndex = 0;
     let times = 0;
     for (; times < MAX_MERGE_TIMES; times += 1) {
@@ -185,23 +186,31 @@ var DiffView = ({
       if (mergeInfo === null) {
         break;
       }
-      const { index, addCount, removeCount } = mergeInfo;
+      const {
+        index,
+        addCount,
+        removeCount
+      } = mergeInfo;
       const maxMergeRowCount = Math.min(addCount, removeCount);
       sourceRows = [...sourceRows.slice(0, index), ...sourceRows.slice(index + maxMergeRowCount)];
       targetRows = [...targetRows.slice(0, index - maxMergeRowCount), ...targetRows.slice(index)];
       mergeStartIndex = index - maxMergeRowCount;
     }
-    (0, import_warning.default)(
-      times < MAX_MERGE_TIMES,
-      "Diff check too many times. Please help to fire issue of DiffView. Thanks."
-    );
+    (0, _warning.default)(times < MAX_MERGE_TIMES, 'Diff check too many times. Please help to fire issue of DiffView. Thanks.');
+
+    /**
+     * Change target rows order when has empty content:
+     *  -- null --              [  Data  ]
+     *  -- null --      =>      -- null --
+     *  [  Data  ]              -- null --
+     */
     const targetRowsLen = targetRows.length;
     for (let i = 0; i < targetRowsLen; i += 1) {
       if (!targetRows[i]) {
         for (let j = i + 1; j < targetRowsLen; j += 1) {
           const followRow = targetRows[j];
           if (followRow) {
-            if (followRow.type === "add") {
+            if (followRow.type === 'add') {
               targetRows[i] = followRow;
               targetRows[j] = null;
             }
@@ -215,83 +224,79 @@ var DiffView = ({
         source: src,
         target: targetRows[index]
       })),
-      sourceEmpty: sourceRows.every((row) => !row),
-      targetEmpty: targetRows.every((row) => !row)
+      sourceEmpty: sourceRows.every(row => !row),
+      targetEmpty: targetRows.every(row => !row)
     };
   }, [diffData]);
+
+  // ============================ Render ============================
   let viewRows;
   if (!report) {
-    viewRows = /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement(
-      import_DiffCells.default,
-      {
+    viewRows = /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DiffCells.default, {
         width: "100%",
-        diffPrefixCls,
+        diffPrefixCls: diffPrefixCls,
         data: {
           index: 1,
           value: EMPTY_TEXT,
-          type: "keep"
+          type: 'keep'
         }
-      }
-    ));
+      })
+    });
   } else if (split) {
-    viewRows = mergedData.rows.map(({ source: src, target: tgt }, index) => /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
-      import_DiffCells.default,
-      {
+    // Split view
+    viewRows = mergedData.rows.map(({
+      source: src,
+      target: tgt
+    }, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DiffCells.default, {
         width: "50%",
-        diffPrefixCls,
+        diffPrefixCls: diffPrefixCls,
         data: src,
         emptyText: index === 0 && mergedData.sourceEmpty && EMPTY_TEXT,
         onMouseDown: onSourceMouseDown,
-        lock: selectable !== "source",
+        lock: selectable !== 'source',
         rowOffset: rowOffsetSrc
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_DiffCells.default,
-      {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DiffCells.default, {
         width: "50%",
-        diffPrefixCls,
+        diffPrefixCls: diffPrefixCls,
         data: tgt,
         emptyText: index === 0 && mergedData.targetEmpty && EMPTY_TEXT,
         onMouseDown: onTargetMouseDown,
-        lock: selectable !== "target",
+        lock: selectable !== 'target',
         rowOffset: rowOffsetTgt
-      }
-    )));
+      })]
+    }, index));
   } else {
+    // Merge
     viewRows = diffData.sourceRows.map((src, index) => {
-      return /* @__PURE__ */ import_react.default.createElement("tr", { key: index }, /* @__PURE__ */ import_react.default.createElement(
-        import_DiffCells.default,
-        {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DiffCells.default, {
           width: "100%",
-          diffPrefixCls,
+          diffPrefixCls: diffPrefixCls,
           data: src ?? diffData.targetRows[index],
           rowOffset: rowOffsetTgt
-        }
-      ));
+        })
+      }, index);
     });
   }
-  const codeRef = import_react.default.useRef();
-  (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      style: {
-        height,
-        ...style
-      },
-      ref: codeRef,
-      tabIndex: -1,
-      className: (0, import_classnames.default)(
-        prefixCls,
-        diffPrefixCls,
-        `${prefixCls}-${theme === "dark" ? "dark" : "light"}`,
-        {
-          [`${diffPrefixCls}-split`]: split
-        },
-        className
-      )
+  const codeRef = _react.default.useRef();
+  (0, _useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height,
+      ...style
     },
-    /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("tbody", null, viewRows))
-  );
+    ref: codeRef,
+    tabIndex: -1,
+    className: (0, _classnames.default)(prefixCls, diffPrefixCls, `${prefixCls}-${theme === 'dark' ? 'dark' : 'light'}`, {
+      [`${diffPrefixCls}-split`]: split
+    }, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: viewRows
+      })
+    })
+  });
 };
-var DiffView_default = DiffView;
+var _default = exports.default = DiffView;

package/lib/Highlight/HighlightCell.js

@@ -1,39 +1,15 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Highlight/HighlightCell.tsx
-var HighlightCell_exports = {};
-__export(HighlightCell_exports, {
-  default: () => HighlightCell
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(HighlightCell_exports);
-var import_classnames = __toESM(require("classnames"));
-var React = __toESM(require("react"));
+exports.default = HighlightCell;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function HighlightCell({
   prefixCls,
   theme,
@@ -45,14 +21,21 @@ function HighlightCell({
   onMouseDown,
   hashId
 }) {
-  const rowIndex = data == null ? void 0 : data.index;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, lineNumber ? /* @__PURE__ */ React.createElement("td", { className: (0, import_classnames.default)(`${prefixCls}-${theme}-index`, `${prefixCls}-index`, hashId) }, rowIndex) : null, /* @__PURE__ */ React.createElement(
-    "td",
-    {
-      onMouseDown,
-      style: { width, userSelect: lock ? "none" : void 0 },
-      className: (0, import_classnames.default)(`${prefixCls}-content`, hashId),
-      dangerouslySetInnerHTML: { __html: (data == null ? void 0 : data.value) ?? (emptyText || "") }
-    }
-  ));
-}
+  const rowIndex = data?.index;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [lineNumber ? /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+      className: (0, _classnames.default)(`${prefixCls}-${theme}-index`, `${prefixCls}-index`, hashId),
+      children: rowIndex
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+      onMouseDown: onMouseDown,
+      style: {
+        width,
+        userSelect: lock ? 'none' : undefined
+      },
+      className: (0, _classnames.default)(`${prefixCls}-content`, hashId),
+      dangerouslySetInnerHTML: {
+        __html: data?.value ?? (emptyText || '')
+      }
+    })]
+  });
+}

package/lib/Highlight/JsonView.d.ts

@@ -1,5 +1,4 @@
 import type { HighlightProps } from '.';
-import './index.less';
 export interface JsonViewProps extends HighlightProps {
     json: object;
 }

package/lib/Highlight/JsonView.js

@@ -1,83 +1,54 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Highlight/JsonView.tsx
-var JsonView_exports = {};
-__export(JsonView_exports, {
-  default: () => JsonView_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(JsonView_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_react_json_view = __toESM(require("react-json-view"));
-var import_util = require("../_util");
-var import__ = require(".");
-var import_useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
-var import_index = require("./index.less");
-var JsonView_default = ({
+exports.default = void 0;
+var _design = require("@oceanbase/design");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactJsonView = _interopRequireDefault(require("react-json-view"));
+var _ = require(".");
+var _useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = ({
   json,
   theme,
   style,
   className,
   height,
-  onCopyChange = () => {
-  },
+  onCopyChange = () => {},
   copyable = true
 }) => {
-  const prefixCls = (0, import_util.getPrefix)("highlight");
-  const isDarkTheme = theme === import__.THEME_DARK;
-  const codeRef = (0, import_react.useRef)();
-  (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      style,
-      ref: codeRef,
-      tabIndex: -1,
-      className: (0, import_classnames.default)(
-        prefixCls,
-        `${prefixCls}-json-view`,
-        {
-          [`${prefixCls}-light`]: !isDarkTheme
-        },
-        className
-      )
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_react_json_view.default,
-      {
-        enableClipboard: copyable && onCopyChange,
-        src: json,
-        theme: isDarkTheme ? "ocean" : void 0,
-        displayDataTypes: false,
-        style: { height },
-        name: false
-      }
-    )
-  );
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('highlight');
+  const isDarkTheme = theme === _.THEME_DARK;
+  const codeRef = (0, _react.useRef)();
+  (0, _useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: style,
+    ref: codeRef
+    // 让div支持focus能力
+    ,
+    tabIndex: -1,
+    className: (0, _classnames.default)(prefixCls, `${prefixCls}-json-view`, {
+      [`${prefixCls}-light`]: !isDarkTheme
+    }, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactJsonView.default, {
+      enableClipboard: copyable && onCopyChange,
+      src: json,
+      theme: isDarkTheme ? 'ocean' : undefined,
+      displayDataTypes: false,
+      style: {
+        height
+      },
+      name: false
+    })
+  });
 };
+exports.default = _default;