@oceanbase/design 1.0.0-alpha.20 → 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

@@ -3,19 +3,19 @@ import type { DescriptionsItemType } from '..';
 export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
     children: string | number | boolean | Iterable<React.ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element;
     key?: React.Key;
-    className?: string;
     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;
     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/style/global.js

@@ -15,7 +15,7 @@ import 'antd/dist/reset.css';
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 var genGlobalStyle = function genGlobalStyle(token, prefixCls, iconPrefixCls) {
-  var _token$lineWidthFocus, _ref;
+  var _ref;
   var antCls = ".".concat(prefixCls);
   var iconCls = ".".concat(iconPrefixCls);
   var buttonComponentCls = "".concat(antCls, "-btn");
@@ -80,15 +80,26 @@ var genGlobalStyle = function genGlobalStyle(token, prefixCls, iconPrefixCls) {
     'input::placeholder': {
       // affact all placeholder excluding select
       fontWeight: token.fontWeightWeak
+    },
+    // WCAG 2.4.7: native / non-ant focusables still need a visible ring (antd controls use token lineWidthFocus)
+    // [[
+    //   `button:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `a:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `textarea:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `select:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `input:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `[role="button"]:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    // ].join(', ')]: {
+    //   outline: `${token.lineWidthFocus ?? 2}px solid ${token.colorPrimary}`,
+    //   outlineOffset: 2,
+    // },
+    '*': {
+      scrollbarColor: "".concat(token.colorFillSecondary, " transparent")
+    },
+    '.rc-virtual-list-scrollbar-thumb': {
+      background: "".concat(token.colorFillSecondary, " !important")
     }
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, ["button:not([class^=\"".concat(prefixCls, "-\"]):not([class*=\" ").concat(prefixCls, "-\"]):focus-visible"), "a:not([class^=\"".concat(prefixCls, "-\"]):not([class*=\" ").concat(prefixCls, "-\"]):focus-visible"), "textarea:not([class^=\"".concat(prefixCls, "-\"]):not([class*=\" ").concat(prefixCls, "-\"]):focus-visible"), "select:not([class^=\"".concat(prefixCls, "-\"]):not([class*=\" ").concat(prefixCls, "-\"]):focus-visible"), "input:not([class^=\"".concat(prefixCls, "-\"]):not([class*=\" ").concat(prefixCls, "-\"]):focus-visible"), "[role=\"button\"]:not([class^=\"".concat(prefixCls, "-\"]):not([class*=\" ").concat(prefixCls, "-\"]):focus-visible")].join(', '), {
-    outline: "".concat((_token$lineWidthFocus = token.lineWidthFocus) !== null && _token$lineWidthFocus !== void 0 ? _token$lineWidthFocus : 2, "px solid ").concat(token.colorPrimary),
-    outlineOffset: 2
-  }), '*', {
-    scrollbarColor: "".concat(token.colorFillSecondary, " transparent")
-  }), '.rc-virtual-list-scrollbar-thumb', {
-    background: "".concat(token.colorFillSecondary, " !important")
-  }), "[style*='font-size: 12px']", {
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "[style*='font-size: 12px']", {
     fontWeight: token.fontWeightWeak
   }), 'a[href], a[data-aspm-param^="obcloud_openLink="]', _defineProperty({}, "&:not([disabled]):not([class^=\"".concat(prefixCls, "-\"]):hover"), {
     textDecoration: 'underline'
@@ -112,7 +123,7 @@ var genGlobalStyle = function genGlobalStyle(token, prefixCls, iconPrefixCls) {
     color: token.colorIcon
   }))), "".concat(selectComponentCls).concat(selectComponentCls, "-single").concat(selectComponentCls, "-open ").concat(selectComponentCls, "-selection-item"), {
     color: token.colorTextSecondary
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "".concat(pickerComponentCls), _defineProperty({}, "".concat(pickerComponentCls, "-clear ").concat(iconCls), _defineProperty({
+  }), "".concat(pickerComponentCls), _defineProperty({}, "".concat(pickerComponentCls, "-clear ").concat(iconCls), _defineProperty({
     color: token.gray7
   }, '&:hover', {
     color: token.gray8
@@ -125,7 +136,7 @@ var genGlobalStyle = function genGlobalStyle(token, prefixCls, iconPrefixCls) {
     color: token.colorIcon,
     // to avoid icon to be hidden when hover
     position: 'relative'
-  })), "".concat(treeComponentCls, " ").concat(treeComponentCls, "-iconEle, ").concat(treeSelectComponentCls, " ").concat(treeSelectComponentCls, "-iconEle"), _defineProperty({}, "".concat(iconCls), {
+  })), _defineProperty(_defineProperty(_ref, "".concat(treeComponentCls, " ").concat(treeComponentCls, "-iconEle, ").concat(treeSelectComponentCls, " ").concat(treeSelectComponentCls, "-iconEle"), _defineProperty({}, "".concat(iconCls), {
     color: token.colorIcon
   })), "".concat(uploadComponentCls), _defineProperty({}, "".concat(iconCls), {
     color: token.colorIcon

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

@@ -3,19 +3,19 @@ import type { DescriptionsItemType } from '..';
 export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
     children: string | number | boolean | Iterable<React.ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element;
     key?: React.Key;
-    className?: string;
     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;
     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/style/global.js

@@ -82,10 +82,17 @@ const genGlobalStyle = (token, prefixCls, iconPrefixCls) => {
       fontWeight: token.fontWeightWeak
     },
     // WCAG 2.4.7: native / non-ant focusables still need a visible ring (antd controls use token lineWidthFocus)
-    [[`button:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`, `a:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`, `textarea:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`, `select:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`, `input:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`, `[role="button"]:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`].join(', ')]: {
-      outline: `${token.lineWidthFocus ?? 2}px solid ${token.colorPrimary}`,
-      outlineOffset: 2
-    },
+    // [[
+    //   `button:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `a:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `textarea:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `select:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `input:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    //   `[role="button"]:not([class^="${prefixCls}-"]):not([class*=" ${prefixCls}-"]):focus-visible`,
+    // ].join(', ')]: {
+    //   outline: `${token.lineWidthFocus ?? 2}px solid ${token.colorPrimary}`,
+    //   outlineOffset: 2,
+    // },
     '*': {
       scrollbarColor: `${token.colorFillSecondary} transparent`
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "1.0.0-alpha.20",
+  "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": "f61500e847937943de57d0d67d18df4abe5fe03b"
+  "gitHead": "5eca952eb89ecccc408d803fd6ab84cc4a878eef"
 }