@douyinfe/semi-ui 2.54.1 → 2.55.0

package/lib/cjs/_base/base.css

@@ -458,26 +458,26 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(87, 105, 255, 1);
+  --semi-color-data-1: rgba(142, 212, 231, 1);
+  --semi-color-data-2: rgba(245, 135, 0, 1);
+  --semi-color-data-3: rgba(220, 183, 252, 1);
+  --semi-color-data-4: rgba(74, 156, 247, 1);
+  --semi-color-data-5: rgba(243, 204, 53, 1);
+  --semi-color-data-6: rgba(254, 128, 144, 1);
+  --semi-color-data-7: rgba(139, 215, 210, 1);
+  --semi-color-data-8: rgba(131, 176, 35, 1);
+  --semi-color-data-9: rgba(233, 165, 229, 1);
+  --semi-color-data-10: rgba(48, 167, 206, 1);
+  --semi-color-data-11: rgba(249, 192, 100, 1);
+  --semi-color-data-12: rgba(177, 113, 249, 1);
+  --semi-color-data-13: rgba(119, 182, 249, 1);
+  --semi-color-data-14: rgba(200, 143, 2, 1);
+  --semi-color-data-15: rgba(255, 170, 178, 1);
+  --semi-color-data-16: rgba(51, 176, 171, 1);
+  --semi-color-data-17: rgba(182, 215, 129, 1);
+  --semi-color-data-18: rgba(212, 88, 212, 1);
+  --semi-color-data-19: rgba(188, 198, 255, 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -568,26 +568,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
   --semi-color-highlight: rgba(var(--semi-white), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(94, 109, 194, 1);
+  --semi-color-data-1: rgba(8, 104, 120, 1);
+  --semi-color-data-2: rgba(250, 173, 63, 1);
+  --semi-color-data-3: rgba(76, 43, 156, 1);
+  --semi-color-data-4: rgba(16, 125, 248, 1);
+  --semi-color-data-5: rgba(248, 202, 16, 1);
+  --semi-color-data-6: rgba(195, 30, 87, 1);
+  --semi-color-data-7: rgba(5, 119, 115, 1);
+  --semi-color-data-8: rgba(154, 207, 13, 1);
+  --semi-color-data-9: rgba(117, 29, 138, 1);
+  --semi-color-data-10: rgba(16, 162, 180, 1);
+  --semi-color-data-11: rgba(208, 110, 11, 1);
+  --semi-color-data-12: rgba(113, 66, 197, 1);
+  --semi-color-data-13: rgba(7, 100, 212, 1);
+  --semi-color-data-14: rgba(251, 232, 110, 1);
+  --semi-color-data-15: rgba(160, 19, 73, 1);
+  --semi-color-data-16: rgba(11, 179, 167, 1);
+  --semi-color-data-17: rgba(98, 138, 6, 1);
+  --semi-color-data-18: rgba(162, 48, 179, 1);
+  --semi-color-data-19: rgba(40, 51, 138, 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/cjs/_sortable/index.d.ts

@@ -36,6 +36,6 @@ interface SortableItemProps {
     prefix?: string;
     transition?: SortableTransition | null;
 }
-export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, activationConstraint, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
+export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
 export declare function SortableItem({ animateLayoutChanges, id, renderItem, prefix, transition: animation, }: SortableItemProps): JSX.Element;
 export {};

package/lib/cjs/_sortable/index.js

@@ -16,10 +16,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const defaultPrefix = 'semi-sortable';
-const defaultConstraint = {
-  delay: 150,
-  tolerance: 5
-};
 function DefaultContainer(props) {
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     style: {
@@ -27,6 +23,9 @@ function DefaultContainer(props) {
     }
   }, props));
 }
+const defaultKeyBoardOptions = {
+  coordinateGetter: _sortable.sortableKeyboardCoordinates
+};
 function Sortable(_ref) {
   let {
     items,
@@ -34,7 +33,6 @@ function Sortable(_ref) {
     adjustScale,
     renderItem,
     transition,
-    activationConstraint = defaultConstraint,
     collisionDetection = _core.closestCenter,
     strategy = _sortable.rectSortingStrategy,
     useDragOverlay = true,
@@ -43,13 +41,7 @@ function Sortable(_ref) {
     prefix = defaultPrefix
   } = _ref;
   const [activeId, setActiveId] = (0, _react.useState)(null);
-  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {
-    activationConstraint
-  }), (0, _core.useSensor)(_core.TouchSensor, {
-    activationConstraint
-  }), (0, _core.useSensor)(_core.KeyboardSensor, {
-    coordinateGetter: _sortable.sortableKeyboardCoordinates
-  }));
+  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor), (0, _core.useSensor)(_core.TouchSensor), (0, _core.useSensor)(_core.KeyboardSensor, defaultKeyBoardOptions));
   const getIndex = (0, _react.useCallback)(id => items.indexOf(id), [items]);
   const activeIndex = (0, _react.useMemo)(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);
   const onDragStart = (0, _react.useCallback)(_ref2 => {
@@ -159,13 +151,15 @@ function SortableItem(_ref4) {
     [`${prefix}-sortable-item-over`]: isOver,
     [`${prefix}-sortable-item-active`]: (active === null || active === void 0 ? void 0 : active.id) === id
   });
-  const wrapperStyle = !(0, _isNull2.default)(animation) ? {
-    transform: _utilities.CSS.Transform.toString(Object.assign(Object.assign({}, transform), {
-      scaleX: 1,
-      scaleY: 1
-    })),
-    transition: transition
-  } : undefined;
+  const wrapperStyle = (0, _react.useMemo)(() => {
+    return !(0, _isNull2.default)(animation) ? {
+      transform: _utilities.CSS.Transform.toString(Object.assign(Object.assign({}, transform), {
+        scaleX: 1,
+        scaleY: 1
+      })),
+      transition: transition
+    } : undefined;
+  }, [animation, transform, transition]);
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     ref: setNodeRef,
     style: wrapperStyle,

package/lib/cjs/button/splitButtonGroup.d.ts

@@ -7,11 +7,13 @@ export interface SplitButtonGroupProps extends BaseProps {
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     containerRef: React.RefObject<HTMLDivElement>;
+    mutationObserver: MutationObserver | null;
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }

package/lib/cjs/button/splitButtonGroup.js

@@ -16,16 +16,42 @@ class SplitButtonGroup extends _baseComponent.default {
   constructor() {
     super(...arguments);
     this.containerRef = /*#__PURE__*/_react.default.createRef();
+    this.mutationObserver = null;
   }
   componentDidMount() {
-    if (this.containerRef.current) {
+    const addClassName = () => {
       const buttons = this.containerRef.current.querySelectorAll('button');
       const firstButton = buttons[0];
       const lastButton = buttons[buttons.length - 1];
-      firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.add(`${prefixCls}-first`);
-      lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.add(`${prefixCls}-last`);
+      if (!(firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.contains(`${prefixCls}-first`))) {
+        firstButton === null || firstButton === void 0 ? void 0 : firstButton.classList.add(`${prefixCls}-first`);
+      }
+      if (!(lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.contains(`${prefixCls}-last`))) {
+        lastButton === null || lastButton === void 0 ? void 0 : lastButton.classList.add(`${prefixCls}-last`);
+      }
+    };
+    if (this.containerRef.current) {
+      addClassName();
+      const mutationObserver = new MutationObserver((mutations, observer) => {
+        for (const mutation of mutations) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class' || mutation.type === 'childList' && Array.from(mutation.addedNodes).some(node => node.nodeName === 'BUTTON')) {
+            addClassName();
+          }
+        }
+      });
+      mutationObserver.observe(this.containerRef.current, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+      this.mutationObserver = mutationObserver;
     }
   }
+  componentWillUnmount() {
+    var _a;
+    super.componentWillUnmount();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   render() {
     const {
       children,

package/lib/cjs/descriptions/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/descriptions/constants");
@@ -15,6 +15,8 @@ var _descriptionsContext = _interopRequireDefault(require("./descriptions-contex
 var _item = _interopRequireDefault(require("./item"));
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/descriptions/foundation"));
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -57,7 +59,22 @@ class Descriptions extends _baseComponent.default {
     this.foundation = new _foundation.default(this.adapter);
   }
   get adapter() {
-    return Object.assign({}, super.adapter);
+    return Object.assign(Object.assign({}, super.adapter), {
+      getColumns: () => {
+        var _a, _b;
+        if ((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.length) {
+          return this.props.data;
+        }
+        if (this.props.children) {
+          return (_b = _react.default.Children.toArray(this.props.children)) === null || _b === void 0 ? void 0 : _b.map(item => {
+            return /*#__PURE__*/(0, _react.isValidElement)(item) ? Object.assign({
+              value: item.props.children
+            }, item.props) : [];
+          });
+        }
+        return [];
+      }
+    });
   }
   render() {
     const _a = this.props,

package/lib/cjs/descriptions/item.js

@@ -57,7 +57,7 @@ class Item extends _react.PureComponent {
       className: keyCls
     }, itemKey)), /*#__PURE__*/_react.default.createElement("td", {
       className: `${prefixCls}-item ${prefixCls}-item-td`,
-      colSpan: span || 1
+      colSpan: span ? span * 2 - 1 : 1
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children)));

package/lib/cjs/navigation/index.d.ts

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React, { ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { NavigationAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/foundation';
+import NavigationFoundation, { NavigationAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/foundation';
 import SubNav, { SubNavProps } from './SubNav';
 import Item, { NavItemProps } from './Item';
 import Footer, { NavFooterProps } from './Footer';
@@ -122,6 +122,7 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     static __SemiComponentName__: string;
     static defaultProps: any;
     itemsChanged: boolean;
+    foundation: NavigationFoundation;
     constructor(props: NavProps);
     static getDerivedStateFromProps(props: NavProps, state: NavState): Partial<NavState>;
     componentDidMount(): void;

package/lib/cjs/tabs/index.d.ts

@@ -48,6 +48,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
     static getDerivedStateFromProps(props: TabsProps, state: TabsState): Partial<TabsState>;
     componentDidUpdate(prevProps: TabsProps, prevState: TabsState): void;
     setContentRef: RefCallback<HTMLDivElement>;
+    getPanes: () => PlainTab[];
     onTabClick: (activeKey: string, event: MouseEvent<HTMLDivElement>) => void;
     rePosChildren: (children: ReactElement[], activeKey: string) => ReactElement[];
     getActiveItem: () => ReactNode | ReactNode[];

package/lib/cjs/tabs/index.js

@@ -52,6 +52,34 @@ class Tabs extends _baseComponent.default {
         current: ref
       };
     };
+    this.getPanes = () => {
+      const {
+        tabList,
+        children
+      } = this.props;
+      if (Array.isArray(tabList) && tabList.length) {
+        return tabList;
+      }
+      return _react.default.Children.map(children, child => {
+        if (child) {
+          const {
+            tab,
+            icon,
+            disabled,
+            itemKey,
+            closable
+          } = child.props;
+          return {
+            tab,
+            icon,
+            disabled,
+            itemKey,
+            closable
+          };
+        }
+        return undefined;
+      });
+    };
     this.onTabClick = (activeKey, event) => {
       this.foundation.handleTabClick(activeKey, event);
     };
@@ -90,7 +118,7 @@ class Tabs extends _baseComponent.default {
     this.foundation = new _foundation.default(this.adapter);
     this.state = {
       activeKey: this.foundation.getDefaultActiveKey(),
-      panes: [],
+      panes: this.getPanes(),
       prevActiveKey: null,
       forceDisableMotion: false
     };
@@ -100,41 +128,12 @@ class Tabs extends _baseComponent.default {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       collectPane: () => {
-        const {
-          tabList,
-          children
-        } = this.props;
-        if (Array.isArray(tabList) && tabList.length) {
-          this.setState({
-            panes: tabList
-          });
-          return;
-        }
-        const panes = _react.default.Children.map(children, child => {
-          if (child) {
-            const {
-              tab,
-              icon,
-              disabled,
-              itemKey,
-              closable
-            } = child.props;
-            return {
-              tab,
-              icon,
-              disabled,
-              itemKey,
-              closable
-            };
-          }
-          return undefined;
-        });
+        const panes = this.getPanes();
         this.setState({
           panes
         });
       },
       collectActiveKey: () => {
-        let panes = [];
         const {
           tabList,
           children,
@@ -146,29 +145,7 @@ class Tabs extends _baseComponent.default {
         const {
           activeKey
         } = this.state;
-        if (Array.isArray(tabList) && tabList.length) {
-          panes = tabList;
-        } else {
-          panes = _react.default.Children.map(children, child => {
-            if (child) {
-              const {
-                tab,
-                icon,
-                disabled,
-                itemKey,
-                closable
-              } = child.props;
-              return {
-                tab,
-                icon,
-                disabled,
-                itemKey,
-                closable
-              };
-            }
-            return undefined;
-          });
-        }
+        const panes = this.getPanes();
         if (panes.findIndex(p => p.itemKey === activeKey) === -1) {
           if (panes.length > 0) {
             this.setState({

package/lib/es/_base/base.css

@@ -458,26 +458,26 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(87, 105, 255, 1);
+  --semi-color-data-1: rgba(142, 212, 231, 1);
+  --semi-color-data-2: rgba(245, 135, 0, 1);
+  --semi-color-data-3: rgba(220, 183, 252, 1);
+  --semi-color-data-4: rgba(74, 156, 247, 1);
+  --semi-color-data-5: rgba(243, 204, 53, 1);
+  --semi-color-data-6: rgba(254, 128, 144, 1);
+  --semi-color-data-7: rgba(139, 215, 210, 1);
+  --semi-color-data-8: rgba(131, 176, 35, 1);
+  --semi-color-data-9: rgba(233, 165, 229, 1);
+  --semi-color-data-10: rgba(48, 167, 206, 1);
+  --semi-color-data-11: rgba(249, 192, 100, 1);
+  --semi-color-data-12: rgba(177, 113, 249, 1);
+  --semi-color-data-13: rgba(119, 182, 249, 1);
+  --semi-color-data-14: rgba(200, 143, 2, 1);
+  --semi-color-data-15: rgba(255, 170, 178, 1);
+  --semi-color-data-16: rgba(51, 176, 171, 1);
+  --semi-color-data-17: rgba(182, 215, 129, 1);
+  --semi-color-data-18: rgba(212, 88, 212, 1);
+  --semi-color-data-19: rgba(188, 198, 255, 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -568,26 +568,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
   --semi-color-highlight: rgba(var(--semi-white), 1);
-  --semi-color-data-0:rgba(22, 100, 255, 1);
-  --semi-color-data-1:rgba(178, 207, 255, 1);
-  --semi-color-data-2:rgba(26, 198, 255, 1);
-  --semi-color-data-3:rgba(148, 239, 255, 1);
-  --semi-color-data-4:rgba(255, 138, 0, 1);
-  --semi-color-data-5:rgba(255, 206, 122, 1);
-  --semi-color-data-6:rgba(60, 199, 128, 1);
-  --semi-color-data-7:rgba(185, 237, 205, 1);
-  --semi-color-data-8:rgba(116, 66, 212, 1);
-  --semi-color-data-9:rgba(221, 197, 250, 1);
-  --semi-color-data-10:rgba(255, 196, 0, 1);
-  --semi-color-data-11:rgba(250, 232, 120, 1);
-  --semi-color-data-12:rgba(48, 77, 119, 1);
-  --semi-color-data-13:rgba(139, 149, 158, 1);
-  --semi-color-data-14:rgba(180, 141, 235, 1);
-  --semi-color-data-15:rgba(239, 227, 255, 1);
-  --semi-color-data-16:rgba(0, 148, 136, 1);
-  --semi-color-data-17:rgba(89, 186, 168, 1);
-  --semi-color-data-18:rgba(255, 125, 218, 1);
-  --semi-color-data-19:rgba(255, 207, 238, 1);
+  --semi-color-data-0: rgba(94, 109, 194, 1);
+  --semi-color-data-1: rgba(8, 104, 120, 1);
+  --semi-color-data-2: rgba(250, 173, 63, 1);
+  --semi-color-data-3: rgba(76, 43, 156, 1);
+  --semi-color-data-4: rgba(16, 125, 248, 1);
+  --semi-color-data-5: rgba(248, 202, 16, 1);
+  --semi-color-data-6: rgba(195, 30, 87, 1);
+  --semi-color-data-7: rgba(5, 119, 115, 1);
+  --semi-color-data-8: rgba(154, 207, 13, 1);
+  --semi-color-data-9: rgba(117, 29, 138, 1);
+  --semi-color-data-10: rgba(16, 162, 180, 1);
+  --semi-color-data-11: rgba(208, 110, 11, 1);
+  --semi-color-data-12: rgba(113, 66, 197, 1);
+  --semi-color-data-13: rgba(7, 100, 212, 1);
+  --semi-color-data-14: rgba(251, 232, 110, 1);
+  --semi-color-data-15: rgba(160, 19, 73, 1);
+  --semi-color-data-16: rgba(11, 179, 167, 1);
+  --semi-color-data-17: rgba(98, 138, 6, 1);
+  --semi-color-data-18: rgba(162, 48, 179, 1);
+  --semi-color-data-19: rgba(40, 51, 138, 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/es/_sortable/index.d.ts

@@ -36,6 +36,6 @@ interface SortableItemProps {
     prefix?: string;
     transition?: SortableTransition | null;
 }
-export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, activationConstraint, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
+export declare function Sortable({ items, onSortEnd, adjustScale, renderItem, transition, collisionDetection, strategy, useDragOverlay, dragOverlayCls, container: Container, prefix, }: SortableProps): JSX.Element;
 export declare function SortableItem({ animateLayoutChanges, id, renderItem, prefix, transition: animation, }: SortableItemProps): JSX.Element;
 export {};

package/lib/es/_sortable/index.js

@@ -6,10 +6,6 @@ import cls from 'classnames';
 import { closestCenter, DragOverlay, DndContext, MouseSensor, TouchSensor, useSensor, useSensors, KeyboardSensor, TraversalOrder } from '@dnd-kit/core';
 import { useSortable, SortableContext, rectSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 const defaultPrefix = 'semi-sortable';
-const defaultConstraint = {
-  delay: 150,
-  tolerance: 5
-};
 function DefaultContainer(props) {
   return /*#__PURE__*/React.createElement("div", Object.assign({
     style: {
@@ -17,6 +13,9 @@ function DefaultContainer(props) {
     }
   }, props));
 }
+const defaultKeyBoardOptions = {
+  coordinateGetter: sortableKeyboardCoordinates
+};
 export function Sortable(_ref) {
   let {
     items,
@@ -24,7 +23,6 @@ export function Sortable(_ref) {
     adjustScale,
     renderItem,
     transition,
-    activationConstraint = defaultConstraint,
     collisionDetection = closestCenter,
     strategy = rectSortingStrategy,
     useDragOverlay = true,
@@ -33,13 +31,7 @@ export function Sortable(_ref) {
     prefix = defaultPrefix
   } = _ref;
   const [activeId, setActiveId] = useState(null);
-  const sensors = useSensors(useSensor(MouseSensor, {
-    activationConstraint
-  }), useSensor(TouchSensor, {
-    activationConstraint
-  }), useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates
-  }));
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, defaultKeyBoardOptions));
   const getIndex = useCallback(id => items.indexOf(id), [items]);
   const activeIndex = useMemo(() => activeId ? getIndex(activeId) : -1, [getIndex, activeId]);
   const onDragStart = useCallback(_ref2 => {
@@ -149,13 +141,15 @@ export function SortableItem(_ref4) {
     [`${prefix}-sortable-item-over`]: isOver,
     [`${prefix}-sortable-item-active`]: (active === null || active === void 0 ? void 0 : active.id) === id
   });
-  const wrapperStyle = !_isNull(animation) ? {
-    transform: cssDndKit.Transform.toString(Object.assign(Object.assign({}, transform), {
-      scaleX: 1,
-      scaleY: 1
-    })),
-    transition: transition
-  } : undefined;
+  const wrapperStyle = useMemo(() => {
+    return !_isNull(animation) ? {
+      transform: cssDndKit.Transform.toString(Object.assign(Object.assign({}, transform), {
+        scaleX: 1,
+        scaleY: 1
+      })),
+      transition: transition
+    } : undefined;
+  }, [animation, transform, transition]);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: setNodeRef,
     style: wrapperStyle,

package/lib/es/button/splitButtonGroup.d.ts

@@ -7,11 +7,13 @@ export interface SplitButtonGroupProps extends BaseProps {
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     containerRef: React.RefObject<HTMLDivElement>;
+    mutationObserver: MutationObserver | null;
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }