@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.10

package/es/Ranger/QuickPicker.js

@@ -16,17 +16,15 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 { ClockCircleOutlined, DownOutlined } from '@oceanbase/icons';
-import { Dropdown, Menu, Select, Space } from '@oceanbase/design';
+import { ConfigProvider, Dropdown, Menu, Select, Space } from '@oceanbase/design';
 import classnames from 'classnames';
 import dayjs from 'dayjs';
 import { noop } from 'lodash';
 import moment from 'moment';
-import React, { useEffect, useState } from 'react';
-import { getPrefix } from "../_util";
+import React, { useContext, useEffect, useState } from 'react';
 import { CUSTOMIZE } from "./constant";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = getPrefix('ranger-quick-picker');
 var RangeDropdown = function RangeDropdown(_ref) {
   var selects = _ref.selects,
     onChange = _ref.onChange,
@@ -35,6 +33,9 @@ var RangeDropdown = function RangeDropdown(_ref) {
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? {} : _ref$locale,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefix = getPrefixCls('ranger-quick-picker');
   var menu = /*#__PURE__*/_jsxs(Menu, {
     onClick: function onClick(e) {
       onChange(e.key);
@@ -74,6 +75,9 @@ var RangeSelect = function RangeSelect(_ref2) {
     locale = _ref2$locale === void 0 ? {} : _ref2$locale,
     size = _ref2.size,
     rest = _objectWithoutProperties(_ref2, _excluded2);
+  var _useContext2 = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var prefix = getPrefixCls('ranger-quick-picker');
   var handleChange = function handleChange(nextValue) {
     onChange(nextValue);
   };

package/es/Ranger/Ranger.d.ts

@@ -1,7 +1,6 @@
 import type { RangePickerProps } from '@oceanbase/design/es/date-picker';
 import type { Dayjs } from 'dayjs';
 import type { Moment } from 'moment';
-import './index.less';
 import type { QuickPickerProps } from './QuickPicker';
 import type { RangeOption } from './typing';
 export type RangeName = 'customize' | string;

package/es/Ranger/Ranger.js

@@ -13,21 +13,19 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 { DatePicker, Space } from '@oceanbase/design';
+import { ConfigProvider, DatePicker, Space } from '@oceanbase/design';
 import dayjs from 'dayjs';
 import { isNil, noop, omit } from 'lodash';
 import moment from 'moment';
 import classNames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix } from "../_util";
 import { CUSTOMIZE, DATE_TIME_FORMAT, NEAR_1_HOURS, NEAR_1_MINUTES, NEAR_30_MINUTES } from "./constant";
-import "./index.less";
+import useStyle from "./style";
 import zhCN from "./locale/zh-CN";
 import QuickPicker from "./QuickPicker";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = getPrefix('ranger');
 var Ranger = function Ranger(props) {
   var _selects$;
   var _props$selects = props.selects,
@@ -51,6 +49,11 @@ var Ranger = function Ranger(props) {
     _props$quickPickerPro = props.quickPickerProps,
     quickPickerProps = _props$quickPickerPro === void 0 ? {} : _props$quickPickerPro,
     rest = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('ranger');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   // 是否为 moment 时间对象
   var isMoment = moment.isMoment(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0]) || moment.isMoment(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[1]) || moment.isMoment(value === null || value === void 0 ? void 0 : value[0]) || moment.isMoment(value === null || value === void 0 ? void 0 : value[1]);
   var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
@@ -116,9 +119,9 @@ var Ranger = function Ranger(props) {
   var showRange = mode === 'default' || rangeName === CUSTOMIZE;
   // 没有 selects 时，回退到普通 RangePicker
   var showQuickPicker = selects.length !== 0;
-  return /*#__PURE__*/_jsxs(Space, {
+  return wrapSSR( /*#__PURE__*/_jsxs(Space, {
     size: 0,
-    className: classNames(_defineProperty({}, "".concat(prefix, "-show-range"), showRange), prefix),
+    className: classNames(_defineProperty({}, "".concat(prefixCls, "-show-range"), showRange), prefixCls),
     style: rest.style,
     children: [showQuickPicker && /*#__PURE__*/_jsx(QuickPicker, _objectSpread({
       customable: true,
@@ -140,11 +143,11 @@ var Ranger = function Ranger(props) {
       value: innerValue || defaultInternalValue,
       onChange: datePickerChange,
       showTime: true,
-      className: "".concat(prefix, "-range-picker"),
+      className: "".concat(prefixCls, "-range-picker"),
       size: size
       // 透传 props 到 antd Ranger
     }, omit(rest, 'value', 'onChange')))]
-  });
+  }));
 };
 export default LocaleWrapper({
   componentName: 'Ranger',

package/es/Ranger/locale/ja-JP.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    customize: string;
+    '\u8FD1 1 \u5206\u949F': string;
+    '\u8FD1 5 \u5206\u949F': string;
+    '\u8FD1 10 \u5206\u949F': string;
+    '\u8FD1 20 \u5206\u949F': string;
+    '\u8FD1 30 \u5206\u949F': string;
+    '\u8FD1 1 \u5C0F\u65F6': string;
+    '\u8FD1 2 \u5C0F\u65F6': string;
+    '\u8FD1 3 \u5C0F\u65F6': string;
+    '\u8FD1 6 \u5C0F\u65F6': string;
+    今天: string;
+    昨天: string;
+    明天: string;
+    本周: string;
+    上周: string;
+    下周: string;
+    本月: string;
+    上月: string;
+    下月: string;
+    本季度: string;
+    上季度: string;
+    下季度: string;
+    今年: string;
+    去年: string;
+    明年: string;
+};
+export default _default;

package/es/Ranger/locale/ja-JP.js

@@ -0,0 +1,29 @@
+export default {
+  customize: 'カスタム時間',
+  // 为保证和之前的逻辑兼容，仍然使用中文作为 key
+  // TODO: 后续需要替换为英文 key
+  '近 1 分钟': '過去 1 分',
+  '近 5 分钟': '過去 5 分',
+  '近 10 分钟': '過去 10 分',
+  '近 20 分钟': '過去 20 分',
+  '近 30 分钟': '過去 30 分',
+  '近 1 小时': '過去 1 時間',
+  '近 2 小时': '過去 2 時間',
+  '近 3 小时': '過去 3 時間',
+  '近 6 小时': '過去 6 時間',
+  今天: '今日',
+  昨天: '昨日',
+  明天: '明日',
+  本周: '今週',
+  上周: '先週',
+  下周: '来週',
+  本月: '今月',
+  上月: '先月',
+  下月: '来月',
+  本季度: '今四半期',
+  上季度: '前四半期',
+  下季度: '次四半期',
+  今年: '今年',
+  去年: '去年',
+  明年: '来年'
+};

package/es/Ranger/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type RangerToken = OBToken;
+export declare const genRangerStyle: GenerateStyle<RangerToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/es/Ranger/style/index.js

@@ -0,0 +1,44 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genRangerStyle = function genRangerStyle(token) {
+  var componentCls = token.componentCls,
+    antCls = token.antCls;
+  return _defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty({}, "".concat(antCls, "-space-item:nth-child(2)"), _defineProperty({
+    flex: 1,
+    width: '100%'
+  }, "".concat(antCls, "-picker, ").concat(antCls, "-picker-range, ").concat(componentCls, "-range-picker"), {
+    width: '100%',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    input: {
+      textAlign: 'center'
+    }
+  })), "".concat(componentCls, "-date-picker"), _defineProperty(_defineProperty({}, "".concat(antCls, "-select-selector"), {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    '&:hover': {
+      zIndex: 1
+    }
+  }), "".concat(antCls, "-select-arrow"), {
+    zIndex: 1
+  }))), "".concat(componentCls, "-show-range"), _defineProperty({}, "".concat(componentCls, "-quick-picker").concat(componentCls, "-quick-picker-select"), _defineProperty(_defineProperty({
+    marginRight: -1
+  }, "".concat(antCls, "-select-selector"), {
+    borderTopRightRadius: '0 !important',
+    borderBottomRightRadius: '0 !important',
+    '&:hover': {
+      zIndex: 1
+    }
+  }), "".concat(antCls, "-select-arrow"), {
+    zIndex: 1
+  })));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('Ranger', function (token) {
+    return [genRangerStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/SideTip/index.d.ts

@@ -2,7 +2,6 @@ import type { BadgeProps } from '@oceanbase/design/es/badge/index';
 import type { TooltipPropsWithTitle } from '@oceanbase/design/es/tooltip/index';
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './index.less';
 export type SideTipType = 'primary' | 'default';
 export type SideTipSize = 'small' | 'default';
 export interface Position {

package/es/SideTip/index.js

@@ -11,25 +11,24 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { CloseOutlined } from '@oceanbase/icons';
-import { Badge, Tooltip } from '@oceanbase/design';
+import { Badge, ConfigProvider, Tooltip } from '@oceanbase/design';
 import classnames from 'classnames';
-import React, { createRef, useEffect, useState } from 'react';
+import React, { createRef, useCallback, useContext, useEffect, useState } from 'react';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix } from "../_util";
+import useStyle from "./style";
 import Dragger from "./Dragger";
 import IconLoading from "./IconLoading";
 import zhCN from "./locale/zh-CN";
-// @ts-ignore
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var STORE_SIDETIP_HIDE = 'ob-sidetip-hide';
-var getLocalStorageKey = function getLocalStorageKey(id) {
-  return ["".concat(STORE_SIDETIP_HIDE), id].join('-');
-};
 var SideTip = function SideTip(props) {
   var buttonRef = /*#__PURE__*/createRef();
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('sidetip');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var defaultHide = props.defaultHide,
     onClick = props.onClick,
     open = props.open,
@@ -57,6 +56,9 @@ var SideTip = function SideTip(props) {
     _props$draggable = props.draggable,
     draggable = _props$draggable === void 0 ? true : _props$draggable,
     getPopupContainer = props.getPopupContainer;
+  var getLocalStorageKey = useCallback(function (localId) {
+    return ["".concat(prefixCls, "-hide"), localId].join('-');
+  }, [prefixCls]);
   var _useState = useState(hideable ? defaultHide === undefined ? window.localStorage.getItem(getLocalStorageKey(id)) === 'true' : !!defaultHide : false),
     _useState2 = _slicedToArray(_useState, 2),
     hide = _useState2[0],
@@ -71,7 +73,7 @@ var SideTip = function SideTip(props) {
     } else {
       window.localStorage.removeItem(getLocalStorageKey(id));
     }
-  }, [hide]);
+  }, [hide, id, getLocalStorageKey]);
   var hideSideTip = function hideSideTip() {
     setHide(true);
   };
@@ -107,23 +109,22 @@ var SideTip = function SideTip(props) {
     if (sizeCls === 'small') return 'small';
     return '';
   };
-  var prefix = getPrefix('sidetip');
   var typeCls = getTypeCls(type);
   var sizeCls = getSizeCls(size);
-  var buttonPrefix = "".concat(prefix, "-button");
+  var buttonPrefix = "".concat(prefixCls, "-button");
 
   // icon
   var iconClassName = classnames("".concat(buttonPrefix, "-icon"), (open || visible) && "".concat(buttonPrefix, "-icon-open"), disabled && "".concat(buttonPrefix, "-icon-disabled"), typeCls && "".concat(buttonPrefix, "-icon-").concat(typeCls), sizeCls && "".concat(buttonPrefix, "-icon-").concat(sizeCls));
   // 接受三种形式的icon
-  var iconDom = /*#__PURE__*/_jsx("span", {
+  var iconDom = icon ? /*#__PURE__*/_jsx("span", {
     className: iconClassName,
-    children: /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/_jsx("img", {
+    children: /*#__PURE__*/React.isValidElement(icon) ? icon : typeof icon === 'string' && icon ? /*#__PURE__*/_jsx("img", {
       src: icon,
       alt: "icon",
       width: "100%",
       height: "100%"
-    })
-  });
+    }) : null
+  }) : null;
 
   // close 按钮
   var closeClassName = classnames("".concat(buttonPrefix, "-close"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(buttonPrefix, "-close-show"), open || visible), "".concat(buttonPrefix, "-close-").concat(typeCls), typeCls), "".concat(buttonPrefix, "-close-").concat(sizeCls), sizeCls));
@@ -150,7 +151,7 @@ var SideTip = function SideTip(props) {
   }, badge), {}, {
     children: InnerButton
   })) : InnerButton;
-  var hideIconClassName = classnames("".concat(prefix, "-hide"), _defineProperty({}, "".concat(prefix, "-hide-hovered"), hovered));
+  var hideIconClassName = classnames("".concat(prefixCls, "-hide"), _defineProperty({}, "".concat(prefixCls, "-hide-hovered"), hovered));
 
   // 隐藏按钮
   var hideIcon = /*#__PURE__*/_jsx("div", {
@@ -158,10 +159,11 @@ var SideTip = function SideTip(props) {
     onClick: hideSideTip,
     className: hideIconClassName,
     children: /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefix, "-hide-icon")
+      className: "".concat(prefixCls, "-hide-icon")
     })
   });
-  return /*#__PURE__*/_jsxs(Dragger, {
+  var containerClassName = classnames(className, _defineProperty({}, "".concat(prefixCls, "-container-disabled"), disabled));
+  return wrapSSR( /*#__PURE__*/_jsxs(Dragger, {
     id: id,
     open: open || visible,
     hide: hide,
@@ -171,12 +173,12 @@ var SideTip = function SideTip(props) {
     onMouseLeave: handleMouseLeave,
     style: style,
     position: position,
-    prefix: prefix,
+    prefix: prefixCls,
     onDragStart: onDragStart,
     onDragEnd: onDragEnd,
     onDrag: onDrag,
     getPopupContainer: getPopupContainer,
-    className: className,
+    className: containerClassName,
     draggable: draggable,
     children: [tooltip && tooltip.title ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltip), {}, {
       getPopupContainer: function getPopupContainer() {
@@ -184,7 +186,7 @@ var SideTip = function SideTip(props) {
       },
       children: BadgeButton
     })) : BadgeButton, hideable && hideIcon, children]
-  });
+  }));
 };
 export default LocaleWrapper({
   componentName: 'SideTip',

package/es/SideTip/locale/ja-JP.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/es/SideTip/locale/ja-JP.js

@@ -0,0 +1 @@
+export default {};

package/es/SideTip/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type SideTipToken = OBToken;
+export declare const genSideTipStyle: GenerateStyle<SideTipToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/es/SideTip/style/index.js

@@ -0,0 +1,162 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genSideTipStyle = function genSideTipStyle(token) {
+  var componentCls = token.componentCls,
+    boxShadowSecondary = token.boxShadowSecondary,
+    colorTextQuaternary = token.colorTextQuaternary,
+    colorTextSecondary = token.colorTextSecondary;
+  return _defineProperty({}, "".concat(componentCls, "-container"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'fixed',
+    zIndex: 0,
+    fontSize: 14,
+    cursor: 'pointer',
+    insetInlineEnd: 24,
+    insetBlockEnd: 24
+  }, "&.".concat(componentCls, "-container-dragged"), {
+    cursor: 'grab'
+  }), "&.".concat(componentCls, "-container-disabled"), {
+    cursor: 'not-allowed'
+  }), "&.".concat(componentCls, "-container-hide"), {
+    transition: 'all 0.3s'
+  }), '@media screen and (max-width: 768px)', {
+    display: 'none'
+  }), "&.".concat(componentCls, "-container-hide-not-dragged:hover"), {
+    insetInlineEnd: '0 !important'
+  }), "".concat(componentCls, "-hide"), _defineProperty(_defineProperty({
+    position: 'absolute',
+    zIndex: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    background: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: 20,
+    transform: 'scale(0)',
+    cursor: 'pointer',
+    opacity: 0,
+    transition: 'all 0.18s ease-out 0.18s',
+    insetBlockStart: 0,
+    insetInlineEnd: -22,
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.35)'
+    }
+  }, "".concat(componentCls, "-hide-icon"), {
+    width: 6,
+    height: 2,
+    background: '#fff',
+    borderRadius: 4
+  }), "&.".concat(componentCls, "-hide-hovered"), {
+    transform: 'scale(1)',
+    opacity: 1
+  })), "".concat(componentCls, "-button"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 56,
+    height: 56,
+    backgroundColor: '#fff',
+    borderRadius: '50%',
+    boxShadow: boxShadowSecondary,
+    cursor: 'pointer',
+    transition: 'background-color 0.2s ease 0.1s, opacity 0.2s ease 0s, transform 0.2s ease 0.1s',
+    userSelect: 'none'
+  }, "&".concat(componentCls, "-button-primary"), {
+    backgroundColor: "".concat(token.colorPrimary, " !important")
+  }), "&".concat(componentCls, "-button-small"), {
+    width: 40,
+    height: 40
+  }), "&".concat(componentCls, "-button-disabled"), {
+    backgroundColor: "".concat(colorTextQuaternary, " !important"),
+    cursor: 'not-allowed'
+  }), '&:hover', {
+    opacity: 1
+  }), "".concat(componentCls, "-button-loading"), _defineProperty(_defineProperty({
+    position: 'absolute',
+    width: 56,
+    height: 56,
+    color: token.colorPrimary,
+    fontSize: 56,
+    insetBlockStart: 0,
+    insetInlineEnd: 0
+  }, "&".concat(componentCls, "-button-loading-primary"), {
+    color: '#fff'
+  }), "&".concat(componentCls, "-button-loading-small"), {
+    width: 40,
+    height: 40,
+    fontSize: 40,
+    lineHeight: 40
+  })), "".concat(componentCls, "-button-close"), _defineProperty(_defineProperty(_defineProperty({
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    color: colorTextSecondary,
+    fontSize: 24,
+    transform: 'translate(-50%, -50%) scale(0.4) rotate(-45deg)',
+    opacity: 0,
+    transition: 'all 0.3s linear',
+    userSelect: 'none',
+    insetBlockStart: '50%',
+    insetInlineStart: '50%'
+  }, "&.".concat(componentCls, "-button-close-primary"), {
+    color: '#fff'
+  }), "&.".concat(componentCls, "-button-close-show"), {
+    transform: 'translate(-50%, -50%)',
+    opacity: 1
+  }), "&.".concat(componentCls, "-button-close-small"), {
+    width: 16,
+    height: 16,
+    fontSize: 16,
+    lineHeight: 16
+  })), "".concat(componentCls, "-button-icon"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    color: colorTextSecondary,
+    fontSize: 24,
+    lineHeight: 24,
+    transform: 'translate(-50%, -50%)',
+    opacity: 1,
+    transition: 'all 0.3s linear',
+    userSelect: 'none',
+    insetBlockStart: '50%',
+    insetInlineStart: '50%',
+    '> *': {
+      fontSize: 'inherit',
+      color: 'inherit'
+    },
+    img: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain'
+    }
+  }, "&.".concat(componentCls, "-button-icon-open"), {
+    transform: 'translate(-50%, -50%) scale(0.4) rotate(45deg)',
+    opacity: 0
+  }), "&.".concat(componentCls, "-button-icon-disabled"), {
+    color: colorTextQuaternary
+  }), "&".concat(componentCls, "-button-icon-primary"), {
+    color: '#fff !important',
+    '> *': {
+      color: '#fff !important'
+    }
+  }), "&".concat(componentCls, "-button-icon-small"), {
+    width: 16,
+    height: 16,
+    fontSize: 16,
+    lineHeight: 16
+  }))));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('SideTip', function (token) {
+    return [genSideTipStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/TagSelect/Group.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 export type TagSelectValueType = string | number | readonly string[];
 export interface TagSelectOptionType {
     label: React.ReactNode;
@@ -9,15 +9,15 @@ export interface TagSelectOptionType {
 }
 export interface TagSelectGroupProps {
     title?: string;
-    children?: ReactNode;
+    children?: React.ReactNode;
     disabled?: boolean;
     className?: string;
     multiple?: boolean;
-    defaultValue?: TagSelectValueType | Array<TagSelectValueType>;
-    value?: TagSelectValueType | Array<TagSelectValueType>;
+    defaultValue?: TagSelectValueType | TagSelectValueType[];
+    value?: TagSelectValueType | TagSelectValueType[];
     size?: string;
-    options?: Array<TagSelectOptionType | string | number>;
-    onChange?: (value: Array<TagSelectValueType> | TagSelectValueType) => void;
+    options?: (TagSelectOptionType | string | number)[];
+    onChange?: (value: TagSelectValueType[] | TagSelectValueType) => void;
 }
 declare const Group: React.FC<TagSelectGroupProps>;
 export default Group;

package/es/TagSelect/Group.js

@@ -12,8 +12,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 classNames from 'classnames';
-import { getPrefix } from "../_util";
-import React, { useMemo, useState, useEffect } from 'react';
+import { ConfigProvider } from '@oceanbase/design';
+import React, { useContext, useMemo, useState, useEffect } from 'react';
 import TagSelectContext from "./TagSelectContext";
 import Item from "./Item";
 import useStyle from "./style";
@@ -39,7 +39,9 @@ var Group = function Group(_ref) {
     children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var prefix = getPrefix('tag-select');
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefix = getPrefixCls('tag-select');
   var _useStyle = useStyle(prefix),
     wrapSSR = _useStyle.wrapSSR,
     hashId = _useStyle.hashId;

package/es/TagSelect/Item.js

@@ -16,9 +16,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import RcCheckBox from 'rc-checkbox';
 import classNames from 'classnames';
 import { isBoolean } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { ConfigProvider } from '@oceanbase/design';
 import useStyle from "./style";
-import { getPrefix } from "../_util";
 import TagSelectContext from "./TagSelectContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,7 +33,9 @@ var Item = function Item(_ref) {
     checked = _useState2[0],
     setChecked = _useState2[1];
   var coverType = _typeof(cover);
-  var prefixCls = getPrefix('tag-select');
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('tag-select');
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR,
     hashId = _useStyle.hashId;

package/es/Welcome/index.d.ts

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '@oceanbase/design/es/button';
 import React from 'react';
-import './index.less';
 export interface IntroduceItem {
     image: string;
     title: string;