@dtjoy/dt-design 1.1.2 → 1.1.5

package/{esm/resizeObserver → es/resize-observer}/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "style"];
+var _excluded = ["children", "className", "style", "onResize", "observeParent", "observerProperty", "delayTick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return 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; }
@@ -21,7 +21,6 @@ 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 { findDOMNode } from 'react-dom';
 export var ObserverProperty = /*#__PURE__*/function (ObserverProperty) {
   ObserverProperty["Width"] = "width";
   ObserverProperty["Height"] = "height";
@@ -41,13 +40,10 @@ var ReactResizeObserver = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "_parentNode", null);
     _defineProperty(_assertThisInitialized(_this), "formerPropertyValue", new Map());
     _defineProperty(_assertThisInitialized(_this), "getElement", function () {
-      try {
-        // eslint-disable-next-line react-dom/no-find-dom-node
-        return findDOMNode(_this.childNode || _assertThisInitialized(_this));
-        // eslint-disable-next-line unused-imports/no-unused-vars
-      } catch (_error) {
-        return null;
+      if (_this.childNode) {
+        return _this.childNode;
       }
+      return null;
     });
     _defineProperty(_assertThisInitialized(_this), "handleResizeEventTriggered", function (entries) {
       var _this$props = _this.props,
@@ -153,6 +149,10 @@ var ReactResizeObserver = /*#__PURE__*/function (_React$Component) {
         children = _this$props2.children,
         className = _this$props2.className,
         style = _this$props2.style,
+        onResize = _this$props2.onResize,
+        observeParent = _this$props2.observeParent,
+        observerProperty = _this$props2.observerProperty,
+        delayTick = _this$props2.delayTick,
         rest = _objectWithoutProperties(_this$props2, _excluded);
       var child = React.Children.only(children);
       var childRef = child.ref;

package/es/splitter/Panel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { InternalPanelProps, PanelProps } from './interface';
+export declare const InternalPanel: React.ForwardRefExoticComponent<InternalPanelProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Panel: React.FC<React.PropsWithChildren<PanelProps>>;
+export default Panel;

package/{esm → es}/splitter/Panel.js

@@ -13,26 +13,34 @@ export var InternalPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     size = props.size,
     _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style;
+    style = _props$style === void 0 ? {} : _props$style,
+    id = props.id,
+    destroyOnHidden = props.destroyOnHidden,
+    supportMotion = props.supportMotion;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
   var prefixCls = getPrefixCls('splitter', customizePrefixCls);
-  var panelClassName = clsx("".concat(prefixCls, "-panel"), _defineProperty({}, "".concat(prefixCls, "-panel-hidden"), size === 0), className);
+  var panelClassName = clsx("".concat(prefixCls, "-panel"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-panel-hidden"), size === 0), "".concat(prefixCls, "-panel-motion"), supportMotion), className);
   var hasSize = size !== undefined;
+  var shouldRender = !destroyOnHidden || size !== 0;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
+    id: id,
     className: panelClassName,
     style: _objectSpread(_objectSpread({}, style), {}, {
       // Use auto when start from ssr
       flexBasis: hasSize ? size : 'auto',
       flexGrow: hasSize ? 0 : 1
     })
-  }, children);
+  }, shouldRender ? children : null);
 });
 if (process.env.NODE_ENV !== 'production') {
-  InternalPanel.displayName = 'Panel';
+  InternalPanel.displayName = 'Splitter.Panel';
 }
 var Panel = function Panel() {
   return null;
 };
+if (process.env.NODE_ENV !== 'production') {
+  Panel.displayName = 'Splitter.Panel';
+}
 export default Panel;

package/es/splitter/SplitBar.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type ShowCollapsibleIconMode = boolean | 'auto';
+export interface SplitBarProps {
+    index: number;
+    active: boolean;
+    prefixCls: string;
+    resizable: boolean;
+    startCollapsible: boolean;
+    endCollapsible: boolean;
+    showStartCollapsibleIcon: ShowCollapsibleIconMode;
+    showEndCollapsibleIcon: ShowCollapsibleIconMode;
+    draggerIcon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    onOffsetStart: (index: number) => void;
+    onOffsetUpdate: (index: number, offsetX: number, offsetY: number, lazyEnd?: boolean) => number[];
+    onOffsetEnd: (nextSizes?: number[], lazyEnd?: boolean) => void;
+    onCollapse: (index: number, type: 'start' | 'end') => void;
+    vertical: boolean;
+    ariaNow: number;
+    ariaMin: number;
+    ariaMax: number;
+    ariaControls: string;
+    lazy?: boolean;
+    containerSize: number;
+}
+declare const SplitBar: React.FC<SplitBarProps>;
+export default SplitBar;

package/{esm → es}/splitter/SplitBar.js

@@ -12,7 +12,7 @@ import React, { useState } from 'react';
 import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
 import useEvent from 'rc-util/lib/hooks/useEvent';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useDragListeners from "./hooks/useDragListeners";
 function getValidNumber(num) {
   return typeof num === 'number' && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
 }
@@ -24,9 +24,13 @@ var SplitBar = function SplitBar(props) {
     ariaNow = props.ariaNow,
     ariaMin = props.ariaMin,
     ariaMax = props.ariaMax,
+    ariaControls = props.ariaControls,
     resizable = props.resizable,
     startCollapsible = props.startCollapsible,
     endCollapsible = props.endCollapsible,
+    draggerIcon = props.draggerIcon,
+    startIcon = props.startIcon,
+    endIcon = props.endIcon,
     onOffsetStart = props.onOffsetStart,
     onOffsetUpdate = props.onOffsetUpdate,
     onOffsetEnd = props.onOffsetEnd,
@@ -46,19 +50,61 @@ var SplitBar = function SplitBar(props) {
     setConstrainedOffset = _useState4[1];
   var constrainedOffsetX = vertical ? 0 : constrainedOffset;
   var constrainedOffsetY = vertical ? constrainedOffset : 0;
+  var STEP = 10;
   var onMouseDown = function onMouseDown(e) {
     if (resizable && e.currentTarget) {
+      e.preventDefault();
       setStartPos([e.pageX, e.pageY]);
       onOffsetStart(index);
     }
   };
   var onTouchStart = function onTouchStart(e) {
     if (resizable && e.touches.length === 1) {
+      e.preventDefault();
       var touch = e.touches[0];
       setStartPos([touch.pageX, touch.pageY]);
       onOffsetStart(index);
     }
   };
+  var onKeyDown = function onKeyDown(e) {
+    if (!resizable) {
+      return;
+    }
+    var isHorizontal = !vertical;
+    var offsetX = 0;
+    var offsetY = 0;
+    switch (e.key) {
+      case 'ArrowLeft':
+        offsetX = isHorizontal ? -STEP : 0;
+        break;
+      case 'ArrowRight':
+        offsetX = isHorizontal ? STEP : 0;
+        break;
+      case 'ArrowUp':
+        offsetY = isHorizontal ? 0 : -STEP;
+        break;
+      case 'ArrowDown':
+        offsetY = isHorizontal ? 0 : STEP;
+        break;
+      case 'Home':
+        offsetX = isHorizontal ? -containerSize : 0;
+        offsetY = isHorizontal ? 0 : -containerSize;
+        break;
+      case 'End':
+        offsetX = isHorizontal ? containerSize : 0;
+        offsetY = isHorizontal ? 0 : containerSize;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    // Each key press is a complete start -> update -> end resize lifecycle:
+    // seed from the current sizes, apply the offset, then reset the moving
+    // state so the resize mask never lingers after a key press.
+    onOffsetStart(index);
+    var nextSizes = onOffsetUpdate(index, offsetX, offsetY);
+    onOffsetEnd(nextSizes);
+  };
   var getConstrainedOffset = function getConstrainedOffset(rawOffset) {
     var currentPos = containerSize * ariaNow / 100;
     var newPos = currentPos + rawOffset;
@@ -72,9 +118,9 @@ var SplitBar = function SplitBar(props) {
     setConstrainedOffset(constrainedOffsetValue);
   });
   var handleLazyEnd = useEvent(function () {
-    onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
+    var nextSizes = onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
     setConstrainedOffset(0);
-    onOffsetEnd(true);
+    onOffsetEnd(nextSizes, true);
   });
   var getVisibilityClass = function getVisibilityClass(mode) {
     switch (mode) {
@@ -86,101 +132,57 @@ var SplitBar = function SplitBar(props) {
         return "".concat(splitBarPrefixCls, "-collapse-bar-hover-only");
     }
   };
-  useLayoutEffect(function () {
-    if (!startPos) {
-      return;
-    }
-    var onMouseMove = function onMouseMove(e) {
-      var pageX = e.pageX,
-        pageY = e.pageY;
-      var offsetX = pageX - startPos[0];
-      var offsetY = pageY - startPos[1];
-      if (lazy) {
-        handleLazyMove(offsetX, offsetY);
-      } else {
-        onOffsetUpdate(index, offsetX, offsetY);
-      }
-    };
-    var onMouseUp = function onMouseUp() {
-      if (lazy) {
-        handleLazyEnd();
-      } else {
-        onOffsetEnd();
-      }
-      setStartPos(null);
-    };
-    var handleTouchMove = function handleTouchMove(e) {
-      if (e.touches.length === 1) {
-        var touch = e.touches[0];
-        var _offsetX = touch.pageX - startPos[0];
-        var _offsetY = touch.pageY - startPos[1];
-        if (lazy) {
-          handleLazyMove(_offsetX, _offsetY);
-        } else {
-          onOffsetUpdate(index, _offsetX, _offsetY);
-        }
-      }
-    };
-    var handleTouchEnd = function handleTouchEnd() {
-      if (lazy) {
-        handleLazyEnd();
-      } else {
-        onOffsetEnd();
-      }
-      setStartPos(null);
-    };
-    var eventHandlerMap = {
-      mousemove: onMouseMove,
-      mouseup: onMouseUp,
-      touchmove: handleTouchMove,
-      touchend: handleTouchEnd
-    };
-    for (var _i = 0, _Object$entries = Object.entries(eventHandlerMap); _i < _Object$entries.length; _i++) {
-      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 () {
-      for (var _i2 = 0, _Object$entries2 = Object.entries(eventHandlerMap); _i2 < _Object$entries2.length; _i2++) {
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
-          _event = _Object$entries2$_i[0],
-          _handler = _Object$entries2$_i[1];
-        window.removeEventListener(_event, _handler);
-      }
-    };
-  }, [startPos, index, lazy]);
+  useDragListeners({
+    startPos: startPos,
+    vertical: vertical,
+    lazy: lazy,
+    onOffsetUpdate: onOffsetUpdate,
+    onOffsetEnd: onOffsetEnd,
+    handleLazyMove: handleLazyMove,
+    handleLazyEnd: handleLazyEnd,
+    setStartPos: setStartPos,
+    index: index
+  });
   var transformStyle = _defineProperty({}, "--".concat(splitBarPrefixCls, "-preview-offset"), "".concat(constrainedOffset, "px"));
-  var StartIcon = vertical ? UpOutlined : LeftOutlined;
-  var EndIcon = vertical ? DownOutlined : RightOutlined;
+  var startIconNode = startIcon || (vertical ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null));
+  var endIconNode = endIcon || (vertical ? /*#__PURE__*/React.createElement(DownOutlined, null) : /*#__PURE__*/React.createElement(RightOutlined, null));
+  var startIconCustomized = startIcon !== undefined;
+  var endIconCustomized = endIcon !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: splitBarPrefixCls,
-    role: "separator",
+    role: "separator"
+    // Splitter bar is keyboard-focusable for ARIA slider/splitter interaction
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: resizable ? 0 : -1,
     "aria-valuenow": getValidNumber(ariaNow),
     "aria-valuemin": getValidNumber(ariaMin),
-    "aria-valuemax": getValidNumber(ariaMax)
+    "aria-valuemax": getValidNumber(ariaMax),
+    "aria-controls": ariaControls,
+    onKeyDown: onKeyDown
   }, lazy && /*#__PURE__*/React.createElement("div", {
     className: clsx("".concat(splitBarPrefixCls, "-preview"), _defineProperty({}, "".concat(splitBarPrefixCls, "-preview-active"), !!constrainedOffset)),
     style: transformStyle
   }), /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active)),
+    className: clsx("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active), "".concat(splitBarPrefixCls, "-dragger-customize"), draggerIcon !== undefined)),
     onMouseDown: onMouseDown,
     onTouchStart: onTouchStart
-  }), startCollapsible && /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-start"), getVisibilityClass(showStartCollapsibleIcon)),
+  }, draggerIcon !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(splitBarPrefixCls, "-dragger-icon"))
+  }, draggerIcon)), startCollapsible && /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-start"), _defineProperty({}, "".concat(splitBarPrefixCls, "-collapse-bar-customize"), startIconCustomized), getVisibilityClass(showStartCollapsibleIcon)),
     onClick: function onClick() {
       return onCollapse(index, 'start');
     }
-  }, /*#__PURE__*/React.createElement(StartIcon, {
+  }, /*#__PURE__*/React.createElement("span", {
     className: clsx("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-start"))
-  })), endCollapsible && /*#__PURE__*/React.createElement("div", {
-    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-end"), getVisibilityClass(showEndCollapsibleIcon)),
+  }, startIconNode)), endCollapsible && /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-end"), _defineProperty({}, "".concat(splitBarPrefixCls, "-collapse-bar-customize"), endIconCustomized), getVisibilityClass(showEndCollapsibleIcon)),
     onClick: function onClick() {
       return onCollapse(index, 'end');
     }
-  }, /*#__PURE__*/React.createElement(EndIcon, {
+  }, /*#__PURE__*/React.createElement("span", {
     className: clsx("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-end"))
-  })));
+  }, endIconNode)));
 };
 export default SplitBar;

package/es/splitter/Splitter.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SplitterProps } from './interface';
+import './style/index.less';
+declare const Splitter: React.FC<React.PropsWithChildren<SplitterProps>>;
+export default Splitter;

package/{esm → es}/splitter/Splitter.js

@@ -11,12 +11,13 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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 React, { useContext, useState } from 'react';
-import { ConfigContext } from 'antd/es/config-provider';
+import React, { useContext, useMemo, useState } from 'react';
+import { ConfigContext } from 'antd/lib/config-provider';
 import ResizeObserver from 'rc-resize-observer';
-import useEvent from 'rc-util/es/hooks/useEvent';
-import warning from 'rc-util/es/warning';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import warning from 'rc-util/lib/warning';
 import useItems from "./hooks/useItems";
+import useOrientation from "./hooks/useOrientation";
 import useResizable from "./hooks/useResizable";
 import useResize from "./hooks/useResize";
 import useSizes from "./hooks/useSizes";
@@ -24,24 +25,30 @@ 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,
     style = props.style,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
+    layout = props.layout,
+    orientation = props.orientation,
+    vertical = props.vertical,
     children = props.children,
     rootClassName = props.rootClassName,
     onResizeStart = props.onResizeStart,
     onResize = props.onResize,
     onResizeEnd = props.onResizeEnd,
-    lazy = props.lazy;
+    lazy = props.lazy,
+    destroyOnHidden = props.destroyOnHidden,
+    draggerIcon = props.draggerIcon,
+    motion = props.motion;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     direction = _useContext.direction;
   var prefixCls = getPrefixCls('splitter', customizePrefixCls);
-  var isVertical = layout === 'vertical';
+  var _useOrientation = useOrientation(orientation, vertical, layout),
+    _useOrientation2 = _slicedToArray(_useOrientation, 2),
+    mergedOrientation = _useOrientation2[0],
+    isVertical = _useOrientation2[1];
   var isRTL = direction === 'rtl';
   var reverse = !isVertical && isRTL;
   var items = useItems(children);
@@ -88,6 +95,12 @@ var Splitter = function Splitter(props) {
     onOffsetEnd = _useResize2[2],
     onCollapse = _useResize2[3],
     movingIndex = _useResize2[4];
+  var supportMotion = React.useMemo(function () {
+    return (motion || items.some(function (item) {
+      var _item$collapsible;
+      return (_item$collapsible = item.collapsible) === null || _item$collapsible === void 0 ? void 0 : _item$collapsible.motion;
+    })) && movingIndex === undefined;
+  }, [items, motion, movingIndex]);
   var onInternalResizeStart = useEvent(function (index) {
     onOffsetStart(index);
     onResizeStart === null || onResizeStart === void 0 || onResizeStart(itemPxSizes);
@@ -99,13 +112,21 @@ var Splitter = function Splitter(props) {
     } else {
       onResize === null || onResize === void 0 || onResize(nextSizes);
     }
+    return nextSizes;
   });
-  var onInternalResizeEnd = useEvent(function (lazyEnd) {
-    onOffsetEnd();
+  var onInternalResizeEnd = useEvent(function (nextSizes, lazyEnd) {
+    onOffsetEnd(nextSizes);
     if (!lazyEnd) {
-      onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(itemPxSizes);
+      onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(nextSizes !== null && nextSizes !== void 0 ? nextSizes : itemPxSizes);
     }
   });
+  var onInternalOffsetUpdate = useEvent(function (index, offsetX, offsetY, lazyEnd) {
+    var offset = isVertical ? offsetY : offsetX;
+    if (reverse) {
+      offset = -offset;
+    }
+    return onInternalResizeUpdate(index, offset, lazyEnd);
+  });
   var onInternalCollapse = useEvent(function (index, type) {
     var _props$onCollapse;
     var nextSizes = onCollapse(index, type);
@@ -116,7 +137,7 @@ var Splitter = function Splitter(props) {
     });
     (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, collapsed, nextSizes);
   });
-  var containerClassName = clsx(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName);
+  var containerClassName = clsx(prefixCls, className, "".concat(prefixCls, "-").concat(mergedOrientation), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName);
   var maskCls = "".concat(prefixCls, "-mask");
   var stackSizes = React.useMemo(function () {
     var mergedSizes = [];
@@ -128,6 +149,11 @@ var Splitter = function Splitter(props) {
     }
     return mergedSizes;
   }, [itemPtgSizes, items.length]);
+  var panelIds = useMemo(function () {
+    return items.map(function (item, idx) {
+      return item.id || "".concat(prefixCls, "-panel-").concat(idx);
+    });
+  }, [items, prefixCls]);
   var mergedStyle = _objectSpread({}, style);
   return /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: onContainerResize
@@ -135,9 +161,13 @@ var Splitter = function Splitter(props) {
     style: mergedStyle,
     className: containerClassName
   }, items.map(function (item, idx) {
+    var _item$destroyOnHidden;
     var panel = /*#__PURE__*/React.createElement(InternalPanel, _extends({}, item, {
+      id: panelIds[idx],
       prefixCls: prefixCls,
-      size: panelSizes[idx]
+      size: panelSizes[idx],
+      destroyOnHidden: (_item$destroyOnHidden = item.destroyOnHidden) !== null && _item$destroyOnHidden !== void 0 ? _item$destroyOnHidden : destroyOnHidden,
+      supportMotion: supportMotion
     }));
     var splitBar = null;
     var resizableInfo = resizableInfos[idx];
@@ -146,6 +176,7 @@ var Splitter = function Splitter(props) {
       var ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
       var ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
       var ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
+      var ariaControls = [panelIds[idx], panelIds[idx + 1]].filter(Boolean).join(' ');
       splitBar = /*#__PURE__*/React.createElement(SplitBar, {
         lazy: lazy,
         index: idx,
@@ -153,32 +184,30 @@ var Splitter = function Splitter(props) {
         prefixCls: prefixCls,
         vertical: isVertical,
         resizable: resizableInfo.resizable,
+        draggerIcon: draggerIcon,
+        startIcon: resizableInfo.startIcon,
+        endIcon: resizableInfo.endIcon,
         ariaNow: stackSizes[idx] * 100,
         ariaMin: Math.max(ariaMinStart, ariaMinEnd) * 100,
         ariaMax: Math.min(ariaMaxStart, ariaMaxEnd) * 100,
+        ariaControls: ariaControls,
         startCollapsible: resizableInfo.startCollapsible,
         endCollapsible: resizableInfo.endCollapsible,
         showStartCollapsibleIcon: resizableInfo.showStartCollapsibleIcon,
         showEndCollapsibleIcon: resizableInfo.showEndCollapsibleIcon,
         onOffsetStart: onInternalResizeStart,
-        onOffsetUpdate: function onOffsetUpdate(index, offsetX, offsetY, lazyEnd) {
-          var offset = isVertical ? offsetY : offsetX;
-          if (reverse) {
-            offset = -offset;
-          }
-          onInternalResizeUpdate(index, offset, lazyEnd);
-        },
+        onOffsetUpdate: onInternalOffsetUpdate,
         onOffsetEnd: onInternalResizeEnd,
         onCollapse: onInternalCollapse,
         containerSize: containerSize || 0
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: "split-panel-".concat(uniqueId())
+      key: panelIds[idx] || "split-panel-".concat(idx)
     }, panel, splitBar);
   }), typeof movingIndex === 'number' && /*#__PURE__*/React.createElement("div", {
     "aria-hidden": true,
-    className: clsx(maskCls, "".concat(maskCls, "-").concat(layout))
+    className: clsx(maskCls, "".concat(maskCls, "-").concat(mergedOrientation))
   })));
 };
 if (process.env.NODE_ENV !== 'production') {

package/es/splitter/hooks/sizeUtil.d.ts

@@ -0,0 +1,3 @@
+type SizeUnit = number | undefined;
+export declare function autoPtgSizes(ptgSizes: SizeUnit[], minPtgSizes: SizeUnit[], maxPtgSizes: SizeUnit[]): number[];
+export {};

package/{esm → es}/splitter/hooks/sizeUtil.js

@@ -51,7 +51,7 @@ export function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
     limitMin = Math.max(limitMin, min);
     limitMax = Math.min(limitMax, max);
   }
-  if (sumMin > 1 && sumMax < 1) {
+  if (sumMin > 1 || sumMax < 1) {
     var _avg = 1 / undefinedCount;
     return ptgSizes.map(function (size) {
       return size === undefined ? _avg : size;

package/es/splitter/hooks/useDragListeners.d.ts

@@ -0,0 +1,14 @@
+type StartPos = readonly [number, number];
+export interface UseDragListenersOptions {
+    startPos: StartPos | null;
+    vertical: boolean;
+    lazy?: boolean;
+    onOffsetUpdate: (index: number, offsetX: number, offsetY: number, lazyEnd?: boolean) => void;
+    onOffsetEnd: (nextSizes?: number[], lazyEnd?: boolean) => void;
+    handleLazyMove: (offsetX: number, offsetY: number) => void;
+    handleLazyEnd: () => void;
+    setStartPos: (pos: StartPos | null) => void;
+    index: number;
+}
+export default function useDragListeners(options: UseDragListenersOptions): void;
+export {};