@dtjoy/dt-design 1.0.6 → 1.0.7

package/esm/collapsible/index.js

@@ -16,28 +16,70 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 React from 'react';
-import { globalConfig } from 'antd/es/config-provider';
-import classNames from 'classnames';
 import { isEqual, pick } from 'lodash-es';
 import "./style";
+import { ConfigConsumer } from 'antd/lib/config-provider/context';
+import clsx from 'clsx';
 var Collapsible = /*#__PURE__*/function (_React$Component) {
   _inherits(Collapsible, _React$Component);
   var _super = _createSuper(Collapsible);
-  // public cssClasses = {
-  //     PREFIX: 'ant-collapsible',
-  //     TRANSITION: 'ant-collapsible-transition',
-  //     WRAPPER: 'ant-collapsible-wrapper',
-  // };
-
   function Collapsible(_props) {
     var _this;
     _classCallCheck(this, Collapsible);
     _this = _super.call(this, _props);
-    _defineProperty(_assertThisInitialized(_this), "prefixCls", 'collapsible');
     _defineProperty(_assertThisInitialized(_this), "foundation", void 0);
     _defineProperty(_assertThisInitialized(_this), "domRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "resizeObserver", null);
     _defineProperty(_assertThisInitialized(_this), "hasBeenRendered", false);
+    _defineProperty(_assertThisInitialized(_this), "renderCollapsible", function (_ref) {
+      var getPrefixCls = _ref.getPrefixCls;
+      var _this$props = _this.props,
+        isOpen = _this$props.isOpen,
+        collapseHeight = _this$props.collapseHeight,
+        fade = _this$props.fade,
+        motion = _this$props.motion,
+        duration = _this$props.duration,
+        style = _this$props.style,
+        className = _this$props.className,
+        id = _this$props.id,
+        keepDOM = _this$props.keepDOM,
+        lazyRender = _this$props.lazyRender,
+        onMotionEnd = _this$props.onMotionEnd,
+        customizePrefixCls = _this$props.prefixCls;
+      var _this$state = _this.state,
+        domHeight = _this$state.domHeight,
+        isTransitioning = _this$state.isTransitioning,
+        visible = _this$state.visible;
+      var prefixCls = getPrefixCls('splitter', customizePrefixCls);
+      var wrapperStyle = _objectSpread({
+        overflow: 'hidden',
+        height: isOpen ? domHeight : collapseHeight,
+        opacity: isOpen || !fade || collapseHeight !== 0 ? 1 : 0,
+        transitionDuration: "".concat(motion && isTransitioning ? duration : 0, "ms")
+      }, style);
+      var wrapperCls = clsx("".concat(prefixCls, "-wrapper"), _defineProperty({}, "".concat(prefixCls, "-transition"), motion && isTransitioning), className);
+      var shouldRender = keepDOM && (lazyRender ? _this.hasBeenRendered : true) || collapseHeight !== 0 || visible || isOpen;
+      if (shouldRender && !_this.hasBeenRendered) {
+        _this.hasBeenRendered = true;
+      }
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: wrapperCls,
+        style: wrapperStyle,
+        onTransitionEnd: function onTransitionEnd() {
+          if (!isOpen) {
+            _this.foundation.updateVisible(false);
+          }
+          _this.foundation.updateIsTransitioning(false);
+          onMotionEnd === null || onMotionEnd === void 0 || onMotionEnd();
+        }
+      }, _this.getDataAttr(_this.props)), /*#__PURE__*/React.createElement("div", {
+        ref: _this.domRef,
+        style: {
+          overflow: 'hidden'
+        },
+        id: id
+      }, shouldRender && _this.props.children));
+    });
     _defineProperty(_assertThisInitialized(_this), "handleResize", function (entryList) {
       var entry = entryList[0];
       if (entry) {
@@ -68,7 +110,6 @@ var Collapsible = /*#__PURE__*/function (_React$Component) {
       isTransitioning: false,
       cacheIsOpen: _this.props.isOpen || false
     };
-    _this.prefixCls = "".concat(globalConfig().getPrefixCls(_this.prefixCls));
     _this.foundation = {
       updateDOMInRenderTree: function updateDOMInRenderTree(val) {
         return _this.setState({
@@ -96,6 +137,7 @@ var Collapsible = /*#__PURE__*/function (_React$Component) {
   _createClass(Collapsible, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      // eslint-disable-next-line compat/compat
       this.resizeObserver = new ResizeObserver(this.handleResize);
       if (this.domRef.current) {
         this.resizeObserver.observe(this.domRef.current);
@@ -134,51 +176,7 @@ var Collapsible = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-      var _this$props = this.props,
-        isOpen = _this$props.isOpen,
-        collapseHeight = _this$props.collapseHeight,
-        fade = _this$props.fade,
-        motion = _this$props.motion,
-        duration = _this$props.duration,
-        style = _this$props.style,
-        className = _this$props.className,
-        id = _this$props.id,
-        keepDOM = _this$props.keepDOM,
-        lazyRender = _this$props.lazyRender,
-        onMotionEnd = _this$props.onMotionEnd;
-      var _this$state = this.state,
-        domHeight = _this$state.domHeight,
-        isTransitioning = _this$state.isTransitioning,
-        visible = _this$state.visible;
-      var wrapperStyle = _objectSpread({
-        overflow: 'hidden',
-        height: isOpen ? domHeight : collapseHeight,
-        opacity: isOpen || !fade || collapseHeight !== 0 ? 1 : 0,
-        transitionDuration: "".concat(motion && isTransitioning ? duration : 0, "ms")
-      }, style);
-      var wrapperCls = classNames("".concat(this.prefixCls, "-wrapper"), _defineProperty({}, "".concat(this.prefixCls, "-transition"), motion && isTransitioning), className);
-      var shouldRender = keepDOM && (lazyRender ? this.hasBeenRendered : true) || collapseHeight !== 0 || visible || isOpen;
-      if (shouldRender && !this.hasBeenRendered) {
-        this.hasBeenRendered = true;
-      }
-      return /*#__PURE__*/React.createElement("div", _extends({
-        className: wrapperCls,
-        style: wrapperStyle,
-        onTransitionEnd: function onTransitionEnd() {
-          if (!isOpen) {
-            _this3.foundation.updateVisible(false);
-          }
-          _this3.foundation.updateIsTransitioning(false);
-          onMotionEnd === null || onMotionEnd === void 0 || onMotionEnd();
-        }
-      }, this.getDataAttr(this.props)), /*#__PURE__*/React.createElement("div", {
-        ref: this.domRef,
-        style: {
-          overflow: 'hidden'
-        },
-        id: id
-      }, shouldRender && this.props.children));
+      return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderCollapsible);
     }
   }], [{
     key: "getDerivedStateFromProps",

package/esm/collapsibleActionItems/index.js

@@ -4,8 +4,8 @@ import { EllipsisOutlined } from '@ant-design/icons';
 import { Button } from "./..";
 import { Divider, Dropdown, Menu } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
-import classNames from 'classnames';
 import "./style";
+import clsx from 'clsx';
 var CollapsibleActionItems = function CollapsibleActionItems(props) {
   var actionItems = props.actionItems,
     _props$maxCount = props.maxCount,
@@ -53,7 +53,7 @@ var CollapsibleActionItems = function CollapsibleActionItems(props) {
     return getActionItemNode(item, true);
   })) : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, className),
+    className: clsx(prefixCls, className),
     style: style
   }, displayAction.map(function (actionItem, index) {
     var showDivider = index < actionItems.length - 1;

package/esm/flex/index.js

@@ -16,7 +16,7 @@ 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 React from 'react';
 import { ConfigContext, globalConfig } from 'antd/es/config-provider';
-import clsx from 'classnames';
+import clsx from 'clsx';
 import { omit } from 'lodash-es';
 import "./style";
 import { isPresetSize } from "../_util/gapSize";

package/esm/flex/style/index.less

@@ -1,77 +1,77 @@
-@import '../../style/themes/index.less';
-
-@flex-prefix-cls: ~'@{ant-prefix}-flex';
-
-// 属性与值的映射
-@align-items-values: {
-    stretch: stretch;
-    flex-start: flex-start;
-    center: center;
-    flex-end: flex-end;
-    baseline: baseline;
-};
-
-@justify-content-values: {
-    flex-start: flex-start;
-    center: center;
-    flex-end: flex-end;
-    space-between: space-between;
-    space-around: space-around;
-    space-evenly: space-evenly;
-};
-
-@flex-wrap-values: {
-    nowrap: nowrap;
-    wrap: wrap;
-    wrap-reverse: wrap-reverse;
-};
-
-.@{flex-prefix-cls} {
-    display: flex;
-    margin: 0;
-    padding: 0;
-
-    // 方向
-    &-vertical {
-        flex-direction: column;
-    }
-    &-rtl {
-        direction: rtl;
-    }
-    &:empty {
-        display: none;
-    }
-
-    // 间距 (Gap)
-    &-gap-small {
-        gap: @padding-xs;
-    }
-    &-gap-middle {
-        gap: @padding-md;
-    }
-    &-gap-large {
-        gap: @padding-lg;
-    }
-
-    // 使用 Loops/Each 抽象重复代码
-    // flex-wrap
-    each(@flex-wrap-values, .(@value, @key) {
-        &-wrap-@{key} {
-            flex-wrap: @value;
-        }
-    });
-
-    // align-items
-    each(@align-items-values, .(@value, @key) {
-        &-align-@{key} {
-            align-items: @value;
-        }
-    });
-
-    // justify-content
-    each(@justify-content-values, .(@value, @key) {
-        &-justify-@{key} {
-            justify-content: @value;
-        }
-    });
+@import '../../style/themes/index.less';
+
+@flex-prefix-cls: ~'@{ant-prefix}-flex';
+
+// 属性与值的映射
+@align-items-values: {
+    stretch: stretch;
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    baseline: baseline;
+};
+
+@justify-content-values: {
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    space-between: space-between;
+    space-around: space-around;
+    space-evenly: space-evenly;
+};
+
+@flex-wrap-values: {
+    nowrap: nowrap;
+    wrap: wrap;
+    wrap-reverse: wrap-reverse;
+};
+
+.@{flex-prefix-cls} {
+    display: flex;
+    margin: 0;
+    padding: 0;
+
+    // 方向
+    &-vertical {
+        flex-direction: column;
+    }
+    &-rtl {
+        direction: rtl;
+    }
+    &:empty {
+        display: none;
+    }
+
+    // 间距 (Gap)
+    &-gap-small {
+        gap: @padding-xs;
+    }
+    &-gap-middle {
+        gap: @padding-md;
+    }
+    &-gap-large {
+        gap: @padding-lg;
+    }
+
+    // 使用 Loops/Each 抽象重复代码
+    // flex-wrap
+    each(@flex-wrap-values, .(@value, @key) {
+        &-wrap-@{key} {
+            flex-wrap: @value;
+        }
+    });
+
+    // align-items
+    each(@align-items-values, .(@value, @key) {
+        &-align-@{key} {
+            align-items: @value;
+        }
+    });
+
+    // justify-content
+    each(@justify-content-values, .(@value, @key) {
+        &-justify-@{key} {
+            justify-content: @value;
+        }
+    });
 }

package/esm/flex/utils.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 clsx from 'classnames';
+import clsx from 'clsx';
 export var flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
 export var justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
 export var alignItemsValues = ['center', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'baseline', 'normal', 'stretch'];

package/esm/formList/index.js

@@ -14,19 +14,19 @@ import React, { useMemo } from 'react';
 import { Utils } from '@dtinsight/dt-utils';
 import { Form, Table } from 'antd';
 import { globalConfig } from 'antd/es/config-provider';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import "./style";
 
-/**
- * Override NamePath parameters type
+/**
+ * Override NamePath parameters type
  */
 
-/**
- * Override PanelRender type
+/**
+ * Override PanelRender type
  */
 
-/**
- * Form.Table 组件类型
+/**
+ * Form.Table 组件类型
  */
 
 export default function InternalTable(_ref) {
@@ -85,9 +85,11 @@ export default function InternalTable(_ref) {
         return _typeof(rule) === 'object' && rule.required;
       }));
       return _objectSpread(_objectSpread({}, cols), {}, {
-        title: /*#__PURE__*/React.createElement(React.Fragment, null, isRequired && /*#__PURE__*/React.createElement("span", {
-          className: "dtc-form__table__column--required"
-        }), cols.title),
+        title: function title() {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, isRequired && /*#__PURE__*/React.createElement("span", {
+            className: "dtc-form__table__column--required"
+          }), typeof cols.title === 'function' ? cols.title.apply(cols, arguments) : cols.title);
+        },
         render: function render(_, fieldData) {
           var currentNamePath = [fieldData.name, cols.dataIndex].filter(Utils.checkExist).flat();
           var rules = rawRules === null || rawRules === void 0 ? void 0 : rawRules.map(function (rule) {
@@ -124,7 +126,7 @@ export default function InternalTable(_ref) {
     initialValue: initialValue
   }, function (fields, ope, meta) {
     return /*#__PURE__*/React.createElement(Table, _extends({
-      className: classnames(prefixCls, tableClassName),
+      className: clsx(prefixCls, tableClassName),
       rowKey: "key",
       dataSource: fields,
       pagination: false,

package/esm/formList/style/index.less

@@ -1,45 +1,45 @@
-@import '../../style/themes/index.less';
-
-@form-list-prefix-cls: ~'@{ant-prefix}-form-list';
-
-.@{form-list-prefix-cls} {
-  height: 100%;
-
-  &__column {
-    &--required {
-      &::before {
-        content: "*";
-        display: inline-block;
-        margin-inline-end: 4px;
-        font-size: 14px;
-        line-height: 1;
-        color: @error-color;
-      }
-
-      vertical-align: -0.1em;
-    }
-  }
-
-  .ant-table,
-  .ant-table-container {
-    height: 100%;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-
-  table colgroup > col.ant-table-selection-col {
-    width: 48px;
-  }
-
-  .ant-table-thead > tr > th.ant-table-selection-column {
-    padding: 0 16px;
-  }
-
-  .ant-table-tbody > tr > td.ant-table-selection-column {
-    padding: 0 16px;
-  }
-}
-
-
+@import '../../style/themes/index.less';
+
+@form-list-prefix-cls: ~'@{ant-prefix}-form-list';
+
+.@{form-list-prefix-cls} {
+  height: 100%;
+
+  &__column {
+    &--required {
+      &::before {
+        content: "*";
+        display: inline-block;
+        margin-inline-end: 4px;
+        font-size: 14px;
+        line-height: 1;
+        color: @error-color;
+      }
+
+      vertical-align: -0.1em;
+    }
+  }
+
+  .ant-table,
+  .ant-table-container {
+    height: 100%;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+
+  table colgroup > col.ant-table-selection-col {
+    width: 48px;
+  }
+
+  .ant-table-thead > tr > th.ant-table-selection-column {
+    padding: 0 16px;
+  }
+
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    padding: 0 16px;
+  }
+}
+
+

package/esm/index.js

@@ -9,4 +9,6 @@ export { default as OverflowList } from "./overflowList";
 export { default as Resize } from "./resize";
 export { default as Splitter } from "./splitter";
 export * from "./splitter";
-export { default as StatusTag } from "./statusTag";
+export { default as StatusTag } from "./statusTag";
+export * from "./statusTag";
+export { default as Table } from "./table";

package/esm/overflowList/index.js

@@ -16,8 +16,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 React, { Component, createRef } from 'react';
 import { globalConfig } from 'antd/es/config-provider';
-import classNames from 'classnames';
 import "./style";
+import clsx from 'clsx';
+import { uniqueId } from 'lodash-es';
 import ReactResizeObserver from "../resizeObserver";
 var OverflowList = /*#__PURE__*/function (_Component) {
   _inherits(OverflowList, _Component);
@@ -120,7 +121,7 @@ var OverflowList = /*#__PURE__*/function (_Component) {
           var isVisible = isMeasuring || (collapseFrom === 'end' ? i < visibleCount : i >= items.length - visibleCount);
           if (!isVisible) return null;
           return /*#__PURE__*/React.createElement("div", {
-            key: i,
+            key: uniqueId('overflow-list-item'),
             ref: function ref(el) {
               if (el) _this2.itemRefs.set(i, el);else _this2.itemRefs.delete(i);
             },
@@ -140,7 +141,7 @@ var OverflowList = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/React.createElement("div", {
         ref: this.containerRef,
-        className: classNames(this.prefixCls, className),
+        className: clsx(this.prefixCls, className),
         style: containerStyle
       }, collapseFrom === 'start' && overflowNode, renderItems(), collapseFrom === 'end' && overflowNode));
     }

package/esm/resize/index.js

@@ -20,7 +20,7 @@ var Resize = function Resize(_ref) {
       var resizeObserver = new ResizeObserver(onResizeProxy);
       resizeObserver.observe(observerEle);
       return function () {
-        resizeObserver.unobserve(observerEle);
+        resizeObserver.disconnect();
       };
     }
   }, [observerEle]);

package/esm/resizeObserver/index.js

@@ -42,9 +42,10 @@ var ReactResizeObserver = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "formerPropertyValue", new Map());
     _defineProperty(_assertThisInitialized(_this), "getElement", function () {
       try {
-        // eslint-disable-next-line react/no-find-dom-node
+        // eslint-disable-next-line react-dom/no-find-dom-node
         return findDOMNode(_this.childNode || _assertThisInitialized(_this));
-      } catch (error) {
+        // eslint-disable-next-line unused-imports/no-unused-vars
+      } catch (_error) {
         return null;
       }
     });

package/esm/splitter/Panel.js

@@ -5,8 +5,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 React, { forwardRef, useContext } from 'react';
-import { ConfigContext } from 'antd/es/config-provider';
-import classNames from 'classnames';
+import { ConfigContext } from 'antd/lib/config-provider';
+import clsx from 'clsx';
 export var InternalPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var customizePrefixCls = props.prefixCls,
     className = props.className,
@@ -17,7 +17,7 @@ export var InternalPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
   var prefixCls = getPrefixCls('splitter', customizePrefixCls);
-  var panelClassName = classNames("".concat(prefixCls, "-panel"), _defineProperty({}, "".concat(prefixCls, "-panel-hidden"), size === 0), className);
+  var panelClassName = clsx("".concat(prefixCls, "-panel"), _defineProperty({}, "".concat(prefixCls, "-panel-hidden"), size === 0), className);
   var hasSize = size !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,

package/esm/splitter/SplitBar.js

@@ -10,7 +10,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState } from 'react';
 import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useEvent from 'rc-util/lib/hooks/useEvent';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 function getValidNumber(num) {
@@ -139,6 +139,7 @@ var SplitBar = function SplitBar(props) {
       var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
         event = _Object$entries$_i[0],
         handler = _Object$entries$_i[1];
+      // eslint-disable-next-line react-web-api/no-leaked-event-listener
       window.addEventListener(event, handler);
     }
     return function () {
@@ -160,26 +161,26 @@ var SplitBar = function SplitBar(props) {
     "aria-valuemin": getValidNumber(ariaMin),
     "aria-valuemax": getValidNumber(ariaMax)
   }, lazy && /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(splitBarPrefixCls, "-preview"), _defineProperty({}, "".concat(splitBarPrefixCls, "-preview-active"), !!constrainedOffset)),
+    className: clsx("".concat(splitBarPrefixCls, "-preview"), _defineProperty({}, "".concat(splitBarPrefixCls, "-preview-active"), !!constrainedOffset)),
     style: transformStyle
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active)),
+    className: clsx("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active)),
     onMouseDown: onMouseDown,
     onTouchStart: onTouchStart
   }), startCollapsible && /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-start"), getVisibilityClass(showStartCollapsibleIcon)),
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-start"), getVisibilityClass(showStartCollapsibleIcon)),
     onClick: function onClick() {
       return onCollapse(index, 'start');
     }
   }, /*#__PURE__*/React.createElement(StartIcon, {
-    className: classNames("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-start"))
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-start"))
   })), endCollapsible && /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-end"), getVisibilityClass(showEndCollapsibleIcon)),
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-end"), getVisibilityClass(showEndCollapsibleIcon)),
     onClick: function onClick() {
       return onCollapse(index, 'end');
     }
   }, /*#__PURE__*/React.createElement(EndIcon, {
-    className: classNames("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-end"))
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-end"))
   })));
 };
 export default SplitBar;

package/esm/splitter/Splitter.js

@@ -13,7 +13,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useContext, useState } from 'react';
 import { ConfigContext } from 'antd/es/config-provider';
-import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import useEvent from 'rc-util/es/hooks/useEvent';
 import warning from 'rc-util/es/warning';
@@ -24,6 +23,8 @@ import useSizes from "./hooks/useSizes";
 import { InternalPanel } from "./Panel";
 import SplitBar from "./SplitBar";
 import "./style/index.less";
+import clsx from 'clsx';
+import { uniqueId } from 'lodash-es';
 var Splitter = function Splitter(props) {
   var customizePrefixCls = props.prefixCls,
     className = props.className,
@@ -115,7 +116,7 @@ var Splitter = function Splitter(props) {
     });
     (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, collapsed, nextSizes);
   });
-  var containerClassName = classNames(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName);
+  var containerClassName = clsx(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName);
   var maskCls = "".concat(prefixCls, "-mask");
   var stackSizes = React.useMemo(function () {
     var mergedSizes = [];
@@ -173,11 +174,11 @@ var Splitter = function Splitter(props) {
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: "split-panel-".concat(idx)
+      key: "split-panel-".concat(uniqueId())
     }, panel, splitBar);
   }), typeof movingIndex === 'number' && /*#__PURE__*/React.createElement("div", {
     "aria-hidden": true,
-    className: classNames(maskCls, "".concat(maskCls, "-").concat(layout))
+    className: clsx(maskCls, "".concat(maskCls, "-").concat(layout))
   })));
 };
 if (process.env.NODE_ENV !== 'production') {