@oceanbase/design 0.2.19 → 0.2.21

package/es/card/index.d.ts

@@ -10,7 +10,7 @@ export interface CardProps extends AntCardProps {
     tabList?: CardTabListType[];
 }
 declare const Card: {
-    ({ children, divided, tabList, activeTabKey, defaultActiveTabKey, onTabChange, tabProps, prefixCls: customizePrefixCls, className, ...restProps }: CardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ children, divided, tabList, prefixCls: customizePrefixCls, className, ...restProps }: CardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     Grid: React.FC<import("antd/es/card").CardGridProps>;
     Meta: React.FC<import("antd/es/card").CardMetaProps>;
     displayName: string;

package/es/card/index.js

@@ -1,11 +1,5 @@
 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); }
-var _excluded = ["children", "divided", "tabList", "activeTabKey", "defaultActiveTabKey", "onTabChange", "tabProps", "prefixCls", "className"];
-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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _excluded = ["children", "divided", "tabList", "prefixCls", "className"];
 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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -16,24 +10,18 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { isNullValue } from '@oceanbase/util';
 import { Card as AntCard, Space, Tag } from 'antd';
 import classNames from 'classnames';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext } from 'react';
 import ConfigProvider from "../config-provider";
-import useInkBar from "../tabs/hooks/useInkBar";
 import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from 'antd/es/card/Card';
 export * from 'antd/es/card';
 var Card = function Card(_ref) {
-  var _newTabList$;
   var children = _ref.children,
     _ref$divided = _ref.divided,
     divided = _ref$divided === void 0 ? true : _ref$divided,
     tabList = _ref.tabList,
-    activeTabKey = _ref.activeTabKey,
-    defaultActiveTabKey = _ref.defaultActiveTabKey,
-    _onTabChange = _ref.onTabChange,
-    tabProps = _ref.tabProps,
     customizePrefixCls = _ref.prefixCls,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -44,7 +32,6 @@ var Card = function Card(_ref) {
   var _useStyle = useStyle(prefixCls, tabsPrefixCls),
     wrapSSR = _useStyle.wrapSSR;
   var cardCls = classNames(_defineProperty({}, "".concat(prefixCls, "-no-divider"), !divided), className);
-  var ref = useRef();
   var newTabList = tabList === null || tabList === void 0 ? void 0 : tabList.map(function (item) {
     if (!isNullValue(item.tag)) {
       return _objectSpread(_objectSpread({}, item), {}, {
@@ -60,28 +47,8 @@ var Card = function Card(_ref) {
     }
     return item;
   });
-  var _useState = useState(activeTabKey || defaultActiveTabKey || (newTabList === null || newTabList === void 0 ? void 0 : (_newTabList$ = newTabList[0]) === null || _newTabList$ === void 0 ? void 0 : _newTabList$.key)),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeKey = _useState2[0],
-    setActiveKey = _useState2[1];
-  useInkBar({
-    prefixCls: tabsPrefixCls,
-    activeKey: activeKey,
-    size: tabProps === null || tabProps === void 0 ? void 0 : tabProps.size,
-    type: tabProps === null || tabProps === void 0 ? void 0 : tabProps.type,
-    tabPosition: tabProps === null || tabProps === void 0 ? void 0 : tabProps.tabPosition,
-    containerRef: ref
-  });
   return wrapSSR( /*#__PURE__*/_jsx(AntCard, _objectSpread(_objectSpread({
-    ref: ref,
     tabList: newTabList,
-    defaultActiveTabKey: defaultActiveTabKey,
-    activeTabKey: activeTabKey,
-    onTabChange: function onTabChange(key) {
-      setActiveKey(key);
-      _onTabChange === null || _onTabChange === void 0 ? void 0 : _onTabChange(key);
-    },
-    tabProps: tabProps,
     prefixCls: customizePrefixCls,
     className: cardCls
   }, restProps), {}, {

package/es/config-provider/index.d.ts

@@ -15,6 +15,8 @@ export type SpinConfig = ComponentStyleConfig & {
     indicator?: SpinIndicator;
 };
 export interface ConfigConsumerProps extends AntConfigConsumerProps {
+    theme?: ThemeConfig;
+    navigate?: NavigateFunction;
     spin?: SpinConfig;
 }
 export interface ConfigProviderProps extends AntConfigProviderProps {
@@ -26,7 +28,7 @@ export interface ExtendedConfigConsumerProps {
     navigate?: NavigateFunction;
 }
 declare const ConfigProvider: {
-    ({ children, theme, navigate, spin, ...restProps }: ConfigProviderProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    ({ children, theme, navigate, spin, tabs, ...restProps }: ConfigProviderProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
     ConfigContext: React.Context<ConfigConsumerProps>;
     ExtendedConfigContext: React.Context<ExtendedConfigConsumerProps>;
     config: ({ prefixCls, iconPrefixCls, theme, }: Pick<AntConfigProviderProps, "prefixCls" | "iconPrefixCls"> & {

package/es/config-provider/index.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["children", "theme", "navigate", "spin"];
+var _excluded = ["children", "theme", "navigate", "spin", "tabs"];
 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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -30,12 +30,18 @@ var ConfigProvider = function ConfigProvider(_ref) {
     theme = _ref.theme,
     navigate = _ref.navigate,
     spin = _ref.spin,
+    tabs = _ref.tabs,
     restProps = _objectWithoutProperties(_ref, _excluded);
   // inherit from parent ConfigProvider
   var parentContext = React.useContext(AntConfigProvider.ConfigContext);
   var parentExtendedContext = React.useContext(ExtendedConfigContext);
   return /*#__PURE__*/_jsx(AntConfigProvider, _objectSpread(_objectSpread({
     spin: merge(parentContext.spin, spin),
+    tabs: merge({
+      indicatorSize: function indicatorSize(origin) {
+        return origin >= 24 ? origin - 16 : origin;
+      }
+    }, parentContext.tabs, tabs),
     theme: merge({
       // Only set seed token for dark theme
       // Because defaultThemeToken is designed for light theme

package/es/tabs/index.d.ts

@@ -11,7 +11,7 @@ export interface TabsProps extends AntTabsProps {
 }
 export type TabsPosition = AntTabsPosition;
 declare const Tabs: {
-    ({ children, items, defaultActiveKey, activeKey: activeKeyProp, onChange, size, type, tabPosition, prefixCls: customizePrefixCls, className, ...restProps }: TabsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ children, items, type, tabPosition, prefixCls: customizePrefixCls, className, ...restProps }: TabsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     TabPane: React.FC<import("./TabPane").TabPaneProps>;
     displayName: string;
 };

package/es/tabs/index.js

@@ -1,11 +1,5 @@
 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); }
-var _excluded = ["children", "items", "defaultActiveKey", "activeKey", "onChange", "size", "type", "tabPosition", "prefixCls", "className"];
-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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _excluded = ["children", "items", "type", "tabPosition", "prefixCls", "className"];
 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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -15,25 +9,18 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { isNullValue } from '@oceanbase/util';
 import { Space, Tabs as AntTabs, Tag } from 'antd';
-import React, { useState, useRef, useContext } from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import ConfigProvider from "../config-provider";
-import useInkBar from "./hooks/useInkBar";
 import useLegacyItems from "./hooks/useLegacyItems";
 import useStyle from "./style";
-import { useUpdateEffect } from 'ahooks';
 import TabPane from "./TabPane";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from 'antd/es/tabs';
 var Tabs = function Tabs(_ref) {
-  var _newItems, _newItems$;
   var children = _ref.children,
     items = _ref.items,
-    defaultActiveKey = _ref.defaultActiveKey,
-    activeKeyProp = _ref.activeKey,
-    _onChange = _ref.onChange,
-    size = _ref.size,
     type = _ref.type,
     tabPosition = _ref.tabPosition,
     customizePrefixCls = _ref.prefixCls,
@@ -45,7 +32,6 @@ var Tabs = function Tabs(_ref) {
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
   var tabsCls = classNames(className);
-  var ref = useRef();
   var isHorizontal = !tabPosition || tabPosition === 'top' || tabPosition === 'bottom';
   var newItems = items === null || items === void 0 ? void 0 : items.map(function (item) {
     if (!isNullValue(item.tag)) {
@@ -63,38 +49,8 @@ var Tabs = function Tabs(_ref) {
     return item;
   });
   newItems = useLegacyItems(newItems, children, prefixCls);
-  var _useState = useState(activeKeyProp || defaultActiveKey || ((_newItems = newItems) === null || _newItems === void 0 ? void 0 : (_newItems$ = _newItems[0]) === null || _newItems$ === void 0 ? void 0 : _newItems$.key)),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeKey = _useState2[0],
-    setActiveKey = _useState2[1];
-
-  // 防止第一次顶掉默认值
-  useUpdateEffect(function () {
-    // 外部触发的 activeKey 更改，需要同步内部状态变化
-    if (activeKeyProp) {
-      setActiveKey(activeKeyProp);
-    }
-  }, [activeKeyProp]);
-  useInkBar({
-    prefixCls: prefixCls,
-    activeKey: activeKey,
-    size: size,
-    type: type,
-    tabPosition: tabPosition,
-    containerRef: ref
-  });
-  return wrapSSR( /*#__PURE__*/_jsx(AntTabs
-  // @ts-ignore
-  , _objectSpread({
-    ref: ref,
+  return wrapSSR( /*#__PURE__*/_jsx(AntTabs, _objectSpread({
     items: newItems,
-    defaultActiveKey: defaultActiveKey,
-    activeKey: activeKey,
-    onChange: function onChange(key) {
-      setActiveKey(key);
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange(key);
-    },
-    size: size,
     type: type,
     tabPosition: tabPosition,
     tabBarGutter: !type || type === 'line' ? isHorizontal ? 24 : 0 : undefined,

package/lib/card/index.d.ts

@@ -10,7 +10,7 @@ export interface CardProps extends AntCardProps {
     tabList?: CardTabListType[];
 }
 declare const Card: {
-    ({ children, divided, tabList, activeTabKey, defaultActiveTabKey, onTabChange, tabProps, prefixCls: customizePrefixCls, className, ...restProps }: CardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ children, divided, tabList, prefixCls: customizePrefixCls, className, ...restProps }: CardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     Grid: React.FC<import("antd/es/card").CardGridProps>;
     Meta: React.FC<import("antd/es/card").CardMetaProps>;
     displayName: string;

package/lib/card/index.js

@@ -38,7 +38,6 @@ var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var import_config_provider = __toESM(require("../config-provider"));
-var import_useInkBar = __toESM(require("../tabs/hooks/useInkBar"));
 var import_style = __toESM(require("./style"));
 __reExport(card_exports, require("antd/es/card/Card"), module.exports);
 __reExport(card_exports, require("antd/es/card"), module.exports);
@@ -46,15 +45,10 @@ var Card = ({
   children,
   divided = true,
   tabList,
-  activeTabKey,
-  defaultActiveTabKey,
-  onTabChange,
-  tabProps,
   prefixCls: customizePrefixCls,
   className,
   ...restProps
 }) => {
-  var _a;
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("card", customizePrefixCls);
   const tabsPrefixCls = getPrefixCls("tabs", customizePrefixCls);
@@ -65,7 +59,6 @@ var Card = ({
     },
     className
   );
-  const ref = (0, import_react.useRef)();
   const newTabList = tabList == null ? void 0 : tabList.map((item) => {
     if (!(0, import_util.isNullValue)(item.tag)) {
       return {
@@ -75,36 +68,8 @@ var Card = ({
     }
     return item;
   });
-  const [activeKey, setActiveKey] = (0, import_react.useState)(
-    activeTabKey || defaultActiveTabKey || ((_a = newTabList == null ? void 0 : newTabList[0]) == null ? void 0 : _a.key)
-  );
-  (0, import_useInkBar.default)({
-    prefixCls: tabsPrefixCls,
-    activeKey,
-    size: tabProps == null ? void 0 : tabProps.size,
-    type: tabProps == null ? void 0 : tabProps.type,
-    tabPosition: tabProps == null ? void 0 : tabProps.tabPosition,
-    containerRef: ref
-  });
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Card,
-      {
-        ref,
-        tabList: newTabList,
-        defaultActiveTabKey,
-        activeTabKey,
-        onTabChange: (key) => {
-          setActiveKey(key);
-          onTabChange == null ? void 0 : onTabChange(key);
-        },
-        tabProps,
-        prefixCls: customizePrefixCls,
-        className: cardCls,
-        ...restProps
-      },
-      children
-    )
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { tabList: newTabList, prefixCls: customizePrefixCls, className: cardCls, ...restProps }, children)
   );
 };
 Card.Grid = import_antd.Card.Grid;

package/lib/config-provider/index.d.ts

@@ -15,6 +15,8 @@ export type SpinConfig = ComponentStyleConfig & {
     indicator?: SpinIndicator;
 };
 export interface ConfigConsumerProps extends AntConfigConsumerProps {
+    theme?: ThemeConfig;
+    navigate?: NavigateFunction;
     spin?: SpinConfig;
 }
 export interface ConfigProviderProps extends AntConfigProviderProps {
@@ -26,7 +28,7 @@ export interface ExtendedConfigConsumerProps {
     navigate?: NavigateFunction;
 }
 declare const ConfigProvider: {
-    ({ children, theme, navigate, spin, ...restProps }: ConfigProviderProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    ({ children, theme, navigate, spin, tabs, ...restProps }: ConfigProviderProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
     ConfigContext: React.Context<ConfigConsumerProps>;
     ExtendedConfigContext: React.Context<ExtendedConfigConsumerProps>;
     config: ({ prefixCls, iconPrefixCls, theme, }: Pick<AntConfigProviderProps, "prefixCls" | "iconPrefixCls"> & {

package/lib/config-provider/index.js

@@ -48,13 +48,27 @@ var ExtendedConfigContext = import_react.default.createContext({
   navigate: void 0
 });
 var { defaultSeed, components } = import_theme.default;
-var ConfigProvider = ({ children, theme, navigate, spin, ...restProps }) => {
+var ConfigProvider = ({
+  children,
+  theme,
+  navigate,
+  spin,
+  tabs,
+  ...restProps
+}) => {
   const parentContext = import_react.default.useContext(import_antd.ConfigProvider.ConfigContext);
   const parentExtendedContext = import_react.default.useContext(ExtendedConfigContext);
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.ConfigProvider,
     {
       spin: (0, import_lodash.merge)(parentContext.spin, spin),
+      tabs: (0, import_lodash.merge)(
+        {
+          indicatorSize: (origin) => origin >= 24 ? origin - 16 : origin
+        },
+        parentContext.tabs,
+        tabs
+      ),
       theme: (0, import_lodash.merge)(
         {
           // Only set seed token for dark theme

package/lib/tabs/index.d.ts

@@ -11,7 +11,7 @@ export interface TabsProps extends AntTabsProps {
 }
 export type TabsPosition = AntTabsPosition;
 declare const Tabs: {
-    ({ children, items, defaultActiveKey, activeKey: activeKeyProp, onChange, size, type, tabPosition, prefixCls: customizePrefixCls, className, ...restProps }: TabsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ children, items, type, tabPosition, prefixCls: customizePrefixCls, className, ...restProps }: TabsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     TabPane: React.FC<import("./TabPane").TabPaneProps>;
     displayName: string;
 };

package/lib/tabs/index.js

@@ -38,31 +38,23 @@ var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
-var import_useInkBar = __toESM(require("./hooks/useInkBar"));
 var import_useLegacyItems = __toESM(require("./hooks/useLegacyItems"));
 var import_style = __toESM(require("./style"));
-var import_ahooks = require("ahooks");
 var import_TabPane = __toESM(require("./TabPane"));
 __reExport(tabs_exports, require("antd/es/tabs"), module.exports);
 var Tabs = ({
   children,
   items,
-  defaultActiveKey,
-  activeKey: activeKeyProp,
-  onChange,
-  size,
   type,
   tabPosition,
   prefixCls: customizePrefixCls,
   className,
   ...restProps
 }) => {
-  var _a;
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("tabs", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
   const tabsCls = (0, import_classnames.default)(className);
-  const ref = (0, import_react.useRef)();
   const isHorizontal = !tabPosition || tabPosition === "top" || tabPosition === "bottom";
   let newItems = items == null ? void 0 : items.map((item) => {
     if (!(0, import_util.isNullValue)(item.tag)) {
@@ -74,35 +66,11 @@ var Tabs = ({
     return item;
   });
   newItems = (0, import_useLegacyItems.default)(newItems, children, prefixCls);
-  const [activeKey, setActiveKey] = (0, import_react.useState)(
-    activeKeyProp || defaultActiveKey || ((_a = newItems == null ? void 0 : newItems[0]) == null ? void 0 : _a.key)
-  );
-  (0, import_ahooks.useUpdateEffect)(() => {
-    if (activeKeyProp) {
-      setActiveKey(activeKeyProp);
-    }
-  }, [activeKeyProp]);
-  (0, import_useInkBar.default)({
-    prefixCls,
-    activeKey,
-    size,
-    type,
-    tabPosition,
-    containerRef: ref
-  });
   return wrapSSR(
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tabs,
       {
-        ref,
         items: newItems,
-        defaultActiveKey,
-        activeKey,
-        onChange: (key) => {
-          setActiveKey(key);
-          onChange == null ? void 0 : onChange(key);
-        },
-        size,
         type,
         tabPosition,
         tabBarGutter: !type || type === "line" ? isHorizontal ? 24 : 0 : void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.0",
     "@oceanbase/icons": "^0.2.7",
-    "@oceanbase/util": "^0.2.8",
+    "@oceanbase/util": "^0.2.9",
     "ahooks": "^2.10.14",
     "antd": "^5.9.0",
     "classnames": "^2.3.2",
@@ -48,7 +48,7 @@
     "react-sticky-mouse-tooltip": "^0.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.15",
+    "@babel/cli": "^7.23.0",
     "@babel/preset-env": "^7.22.20",
     "antd-token-previewer": "^1.1.0"
   },
@@ -56,5 +56,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "3d55f9a8967c0b20491eb7d154f53db8943c1522"
+  "gitHead": "38becd333620011d0d084df62b1131135a396abb"
 }

package/es/tabs/hooks/useInkBar.d.ts

@@ -1,12 +0,0 @@
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { TabsPosition, TabsType } from 'antd/es/tabs';
-import type { MutableRefObject } from 'react';
-declare const _default: ({ prefixCls, activeKey, size, type, tabPosition, containerRef, }: {
-    prefixCls: string;
-    activeKey: string;
-    size: SizeType;
-    type: TabsType;
-    tabPosition: TabsPosition;
-    containerRef: MutableRefObject<HTMLDivElement>;
-}) => void;
-export default _default;

package/es/tabs/hooks/useInkBar.js

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-export default (function (_ref) {
-  var prefixCls = _ref.prefixCls,
-    activeKey = _ref.activeKey,
-    size = _ref.size,
-    type = _ref.type,
-    tabPosition = _ref.tabPosition,
-    containerRef = _ref.containerRef;
-  var isHorizontal = !tabPosition || tabPosition === 'top' || tabPosition === 'bottom';
-  var isVertical = tabPosition === 'left' || tabPosition === 'right';
-  useEffect(function () {
-    var _containerNode$getEle;
-    // Tabs 容器节点
-    var containerNode = containerRef.current;
-    // inkbar 节点
-    var inkBarNode = containerNode === null || containerNode === void 0 ? void 0 : (_containerNode$getEle = containerNode.getElementsByClassName("".concat(prefixCls, "-ink-bar"))) === null || _containerNode$getEle === void 0 ? void 0 : _containerNode$getEle[0];
-    // 当前选中的 Tab 节点
-    var activeTabNode = containerNode === null || containerNode === void 0 ? void 0 : containerNode.querySelector("[data-node-key=\"".concat(activeKey, "\"]"));
-    // 当前选中的 Tab 下的 btn 节点
-    var activeTabBtnNode = containerNode === null || containerNode === void 0 ? void 0 : containerNode.querySelector("[data-node-key=\"".concat(activeKey, "\"]>.").concat(prefixCls, "-tab-btn"));
-
-    // 水平布局下 inkbar 的偏移量
-    var horizontalOffset = 8;
-    setTimeout(function () {
-      if ((!type || type === 'line') && inkBarNode) {
-        // 水平布局，如果 inkbar 宽度 >= 24，则两侧各减去 8px，并保持水平居中
-        if (isHorizontal && (activeTabNode === null || activeTabNode === void 0 ? void 0 : activeTabNode.offsetWidth) >= 24) {
-          inkBarNode.style.width = "".concat((activeTabNode === null || activeTabNode === void 0 ? void 0 : activeTabNode.offsetWidth) - horizontalOffset * 2, "px");
-          inkBarNode.style.marginLeft = "".concat(horizontalOffset, "px");
-          inkBarNode.style.marginTop = '0px';
-        }
-        // 垂直布局，inkbar 高度始终与 Tab btn 相同，并保持垂直居中
-        if (isVertical) {
-          inkBarNode.style.height = "".concat(activeTabBtnNode === null || activeTabBtnNode === void 0 ? void 0 : activeTabBtnNode.offsetHeight, "px");
-          inkBarNode.style.marginTop = "".concat(((activeTabNode === null || activeTabNode === void 0 ? void 0 : activeTabNode.offsetHeight) - (activeTabBtnNode === null || activeTabBtnNode === void 0 ? void 0 : activeTabBtnNode.offsetHeight)) / 2, "px");
-          inkBarNode.style.marginLeft = '0px';
-        }
-      }
-    }, 100);
-  }, [prefixCls, activeKey, size, type, isHorizontal, isVertical, containerRef]);
-});

package/lib/tabs/hooks/useInkBar.d.ts

@@ -1,12 +0,0 @@
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { TabsPosition, TabsType } from 'antd/es/tabs';
-import type { MutableRefObject } from 'react';
-declare const _default: ({ prefixCls, activeKey, size, type, tabPosition, containerRef, }: {
-    prefixCls: string;
-    activeKey: string;
-    size: SizeType;
-    type: TabsType;
-    tabPosition: TabsPosition;
-    containerRef: MutableRefObject<HTMLDivElement>;
-}) => void;
-export default _default;

package/lib/tabs/hooks/useInkBar.js

@@ -1,62 +0,0 @@
-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/tabs/hooks/useInkBar.ts
-var useInkBar_exports = {};
-__export(useInkBar_exports, {
-  default: () => useInkBar_default
-});
-module.exports = __toCommonJS(useInkBar_exports);
-var import_react = require("react");
-var useInkBar_default = ({
-  prefixCls,
-  activeKey,
-  size,
-  type,
-  tabPosition,
-  containerRef
-}) => {
-  const isHorizontal = !tabPosition || tabPosition === "top" || tabPosition === "bottom";
-  const isVertical = tabPosition === "left" || tabPosition === "right";
-  (0, import_react.useEffect)(() => {
-    var _a;
-    const containerNode = containerRef.current;
-    const inkBarNode = (_a = containerNode == null ? void 0 : containerNode.getElementsByClassName(
-      `${prefixCls}-ink-bar`
-    )) == null ? void 0 : _a[0];
-    const activeTabNode = containerNode == null ? void 0 : containerNode.querySelector(`[data-node-key="${activeKey}"]`);
-    const activeTabBtnNode = containerNode == null ? void 0 : containerNode.querySelector(
-      `[data-node-key="${activeKey}"]>.${prefixCls}-tab-btn`
-    );
-    const horizontalOffset = 8;
-    setTimeout(() => {
-      if ((!type || type === "line") && inkBarNode) {
-        if (isHorizontal && (activeTabNode == null ? void 0 : activeTabNode.offsetWidth) >= 24) {
-          inkBarNode.style.width = `${(activeTabNode == null ? void 0 : activeTabNode.offsetWidth) - horizontalOffset * 2}px`;
-          inkBarNode.style.marginLeft = `${horizontalOffset}px`;
-          inkBarNode.style.marginTop = "0px";
-        }
-        if (isVertical) {
-          inkBarNode.style.height = `${activeTabBtnNode == null ? void 0 : activeTabBtnNode.offsetHeight}px`;
-          inkBarNode.style.marginTop = `${((activeTabNode == null ? void 0 : activeTabNode.offsetHeight) - (activeTabBtnNode == null ? void 0 : activeTabBtnNode.offsetHeight)) / 2}px`;
-          inkBarNode.style.marginLeft = "0px";
-        }
-      }
-    }, 100);
-  }, [prefixCls, activeKey, size, type, isHorizontal, isVertical, containerRef]);
-};