@oceanbase/design 1.0.0-alpha.21 → 1.0.0-alpha.22

package/es/config-provider/index.js

@@ -140,6 +140,17 @@ var ConfigProvider = function ConfigProvider(_ref5) {
   var parentStyleContext = React.useContext(StyleContext);
   var mergedStyleProviderProps = merge({}, parentStyleContext, styleProviderProps);
   var mergedLocale = merge({}, parentContext.locale, locale);
+  var resolvedAntTheme = merge({}, mergedTheme, getLocaleFontSizeThemePatch(mergedLocale, mergedTheme, fontSize), {
+    token: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontFamily', fontFamily, fontFamilyEn)), getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightWeak', fontWeightWeak, fontWeightWeakEn)), getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeight', fontWeight, fontWeightEn)), getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightStrong', fontWeightStrong, fontWeightStrongEn))
+  });
+
+  // cssVar 模式下 App 必须有真实 DOM 节点挂载 cssVarCls，component={false} 会导致变量作用域丢失
+  var cssVarEnabled = Boolean(resolvedAntTheme === null || resolvedAntTheme === void 0 ? void 0 : resolvedAntTheme.cssVar);
+  var resolvedAppProps = merge({}, cssVarEnabled ? {
+    component: 'div'
+  } : {
+    component: false
+  }, appProps);
   return /*#__PURE__*/_jsx(AntConfigProvider, _objectSpread(_objectSpread({
     locale: mergedLocale,
     wave: merge({}, {
@@ -181,9 +192,7 @@ var ConfigProvider = function ConfigProvider(_ref5) {
       }
     }, parentContext.table, table),
     tabs: merge({}, parentContext.tabs, tabs),
-    theme: merge({}, mergedTheme, getLocaleFontSizeThemePatch(mergedLocale, mergedTheme, fontSize), {
-      token: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontFamily', fontFamily, fontFamilyEn)), getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightWeak', fontWeightWeak, fontWeightWeakEn)), getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeight', fontWeight, fontWeightEn)), getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightStrong', fontWeightStrong, fontWeightStrongEn))
-    }),
+    theme: resolvedAntTheme,
     renderEmpty: parentContext.renderEmpty || function (componentName) {
       return /*#__PURE__*/_jsx(DefaultRenderEmpty, {
         componentName: componentName
@@ -201,9 +210,7 @@ var ConfigProvider = function ConfigProvider(_ref5) {
         children: [/*#__PURE__*/_jsx(CssVariablesStyle, {}), /*#__PURE__*/_jsx(GlobalStyle, {
           prefixCls: restProps.prefixCls,
           iconPrefixCls: restProps.iconPrefixCls
-        }), /*#__PURE__*/_jsxs(App, _objectSpread(_objectSpread({
-          component: false
-        }, appProps), {}, {
+        }), /*#__PURE__*/_jsxs(App, _objectSpread(_objectSpread({}, resolvedAppProps), {}, {
           children: [children, parentExtendedContext.injectStaticFunction && /*#__PURE__*/_jsx(StaticFunction, {})]
         }))]
       }))

package/es/descriptions/hooks/useItems.d.ts

@@ -1,21 +1,21 @@
 import React from 'react';
 import type { DescriptionsItemType } from '..';
 export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
-    children: string | number | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
+    children: string | number | boolean | Iterable<React.ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element;
     key?: React.Key;
     label?: React.ReactNode;
     span?: number | "filled" | {
-        xxl?: number;
-        xl?: number;
-        lg?: number;
-        md?: number;
-        sm?: number;
         xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        xxl?: number;
     };
     style?: React.CSSProperties;
+    classNames?: Partial<Record<"label" | "content", string>>;
+    styles?: Partial<Record<"label" | "content", React.CSSProperties>>;
     className?: string;
-    classNames?: Partial<Record<"content" | "label", string>>;
-    styles?: Partial<Record<"content" | "label", React.CSSProperties>>;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];

package/es/form/FormItem.d.ts

@@ -4,7 +4,7 @@ import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
 declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     useStatus: () => {
-        status?: "" | "error" | "warning" | "success" | "validating";
+        status?: "" | "success" | "warning" | "error" | "validating";
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/es/spin/style/index.js

@@ -10,10 +10,15 @@ var genSizeStyle = function genSizeStyle(spinDotSize, token) {
     colorText = token.colorText;
   var spinDotWidth = spinDotSize;
   var spinDotHight = spinDotWidth;
-  return _defineProperty({}, "&".concat(componentCls, "-oceanbase"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-dot"), {
+  return _defineProperty({}, "&".concat(componentCls, "-oceanbase"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-dot"), _defineProperty({
     width: spinDotWidth,
-    height: spinDotHight
-  }), "".concat(componentCls, "-text"), {
+    height: spinDotHight,
+    overflow: 'hidden',
+    lineHeight: 0
+  }, "> div", {
+    width: '100%',
+    height: '100%'
+  })), "".concat(componentCls, "-text"), {
     width: spinDotWidth,
     color: colorText
   }));

package/es/table/index.d.ts

@@ -38,8 +38,8 @@ declare const _default: (<RecordType extends AnyObject = AnyObject>(props: Table
     SELECTION_ALL: "SELECT_ALL";
     SELECTION_INVERT: "SELECT_INVERT";
     SELECTION_NONE: "SELECT_NONE";
-    Column: <RecordType extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType>) => null;
-    ColumnGroup: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_1>) => null;
+    Column: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType_1>) => null;
+    ColumnGroup: <RecordType_2 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_2>) => null;
     Summary: typeof Summary;
     useStyle: (prefixCls: string, rootCls?: string) => readonly [(node: ReactElement<any, string | React.JSXElementConstructor<any>>) => ReactElement<any, string | React.JSXElementConstructor<any>>, string, string];
     useDefaultPagination: (pagination?: false | import("antd").TablePaginationConfig) => false | import("antd").TablePaginationConfig;

package/lib/config-provider/index.js

@@ -198,6 +198,22 @@ const ConfigProvider = ({
   const parentStyleContext = _react.default.useContext(_StyleContext.default);
   const mergedStyleProviderProps = (0, _lodash.merge)({}, parentStyleContext, styleProviderProps);
   const mergedLocale = (0, _lodash.merge)({}, parentContext.locale, locale);
+  const resolvedAntTheme = (0, _lodash.merge)({}, mergedTheme, getLocaleFontSizeThemePatch(mergedLocale, mergedTheme, fontSize), {
+    token: {
+      ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontFamily', fontFamily, _default2.fontFamilyEn),
+      ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightWeak', fontWeightWeak, _default2.fontWeightWeakEn),
+      ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeight', fontWeight, _default2.fontWeightEn),
+      ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightStrong', fontWeightStrong, _default2.fontWeightStrongEn)
+    }
+  });
+
+  // cssVar 模式下 App 必须有真实 DOM 节点挂载 cssVarCls，component={false} 会导致变量作用域丢失
+  const cssVarEnabled = Boolean(resolvedAntTheme?.cssVar);
+  const resolvedAppProps = (0, _lodash.merge)({}, cssVarEnabled ? {
+    component: 'div'
+  } : {
+    component: false
+  }, appProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
     locale: mergedLocale,
     wave: (0, _lodash.merge)({}, {
@@ -234,14 +250,7 @@ const ConfigProvider = ({
       }
     }, parentContext.table, table),
     tabs: (0, _lodash.merge)({}, parentContext.tabs, tabs),
-    theme: (0, _lodash.merge)({}, mergedTheme, getLocaleFontSizeThemePatch(mergedLocale, mergedTheme, fontSize), {
-      token: {
-        ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontFamily', fontFamily, _default2.fontFamilyEn),
-        ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightWeak', fontWeightWeak, _default2.fontWeightWeakEn),
-        ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeight', fontWeight, _default2.fontWeightEn),
-        ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightStrong', fontWeightStrong, _default2.fontWeightStrongEn)
-      }
-    }),
+    theme: resolvedAntTheme,
     renderEmpty: parentContext.renderEmpty || (componentName => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultRenderEmpty.default, {
       componentName: componentName
     })),
@@ -259,8 +268,7 @@ const ConfigProvider = ({
           prefixCls: restProps.prefixCls,
           iconPrefixCls: restProps.iconPrefixCls
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_app.default, {
-          component: false,
-          ...appProps,
+          ...resolvedAppProps,
           children: [children, parentExtendedContext.injectStaticFunction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_staticFunction.default, {})]
         })]
       })

package/lib/descriptions/hooks/useItems.d.ts

@@ -1,21 +1,21 @@
 import React from 'react';
 import type { DescriptionsItemType } from '..';
 export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
-    children: string | number | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
+    children: string | number | boolean | Iterable<React.ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element;
     key?: React.Key;
     label?: React.ReactNode;
     span?: number | "filled" | {
-        xxl?: number;
-        xl?: number;
-        lg?: number;
-        md?: number;
-        sm?: number;
         xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        xxl?: number;
     };
     style?: React.CSSProperties;
+    classNames?: Partial<Record<"label" | "content", string>>;
+    styles?: Partial<Record<"label" | "content", React.CSSProperties>>;
     className?: string;
-    classNames?: Partial<Record<"content" | "label", string>>;
-    styles?: Partial<Record<"content" | "label", React.CSSProperties>>;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];

package/lib/form/FormItem.d.ts

@@ -4,7 +4,7 @@ import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
 declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     useStatus: () => {
-        status?: "" | "error" | "warning" | "success" | "validating";
+        status?: "" | "success" | "warning" | "error" | "validating";
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/lib/spin/style/index.js

@@ -17,7 +17,13 @@ const genSizeStyle = (spinDotSize, token) => {
     [`&${componentCls}-oceanbase`]: {
       [`${componentCls}-dot`]: {
         width: spinDotWidth,
-        height: spinDotHight
+        height: spinDotHight,
+        overflow: 'hidden',
+        lineHeight: 0,
+        [`> div`]: {
+          width: '100%',
+          height: '100%'
+        }
       },
       [`${componentCls}-text`]: {
         width: spinDotWidth,

package/lib/table/index.d.ts

@@ -38,8 +38,8 @@ declare const _default: (<RecordType extends AnyObject = AnyObject>(props: Table
     SELECTION_ALL: "SELECT_ALL";
     SELECTION_INVERT: "SELECT_INVERT";
     SELECTION_NONE: "SELECT_NONE";
-    Column: <RecordType extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType>) => null;
-    ColumnGroup: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_1>) => null;
+    Column: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType_1>) => null;
+    ColumnGroup: <RecordType_2 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_2>) => null;
     Summary: typeof Summary;
     useStyle: (prefixCls: string, rootCls?: string) => readonly [(node: ReactElement<any, string | React.JSXElementConstructor<any>>) => ReactElement<any, string | React.JSXElementConstructor<any>>, string, string];
     useDefaultPagination: (pagination?: false | import("antd").TablePaginationConfig) => false | import("antd").TablePaginationConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.22",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -66,5 +66,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "f341321d6fc6414c7a852de69862a3c8f5ff7cca"
+  "gitHead": "5eca952eb89ecccc408d803fd6ab84cc4a878eef"
 }