@dtjoy/dt-design 1.1.1 → 1.1.5

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/{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 {};

package/es/splitter/hooks/useDragListeners.js

@@ -0,0 +1,107 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+export default function useDragListeners(options) {
+  var startPos = options.startPos,
+    lazy = options.lazy,
+    onOffsetUpdate = options.onOffsetUpdate,
+    onOffsetEnd = options.onOffsetEnd,
+    handleLazyMove = options.handleLazyMove,
+    handleLazyEnd = options.handleLazyEnd,
+    setStartPos = options.setStartPos,
+    index = options.index;
+  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) {
+        e.preventDefault();
+        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 handleMouseLeave = function handleMouseLeave() {
+      if (lazy) {
+        handleLazyEnd();
+      } else {
+        onOffsetEnd();
+      }
+      setStartPos(null);
+    };
+    var handleBlur = function handleBlur() {
+      if (lazy) {
+        handleLazyEnd();
+      } else {
+        onOffsetEnd();
+      }
+      setStartPos(null);
+    };
+    var eventHandlerMap = {
+      mousemove: onMouseMove,
+      mouseup: onMouseUp,
+      touchmove: handleTouchMove,
+      touchend: handleTouchEnd,
+      mouseleave: handleMouseLeave,
+      blur: handleBlur
+    };
+    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];
+      var _options = event === 'touchmove' ? {
+        passive: false
+      } : undefined;
+      // eslint-disable-next-line react-web-api/no-leaked-event-listener
+      window.addEventListener(event, handler, _options);
+    }
+    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];
+        var _options2 = _event === 'touchmove' ? {
+          passive: false
+        } : undefined;
+        window.removeEventListener(_event, _handler, _options2);
+      }
+    };
+  }, [startPos, index, lazy]);
+}

package/{esm → es}/splitter/hooks/useItems.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import type { PanelProps } from '../interface';
 export type ItemType = Omit<PanelProps, 'collapsible'> & {
+    id?: string;
     collapsible: {
         start?: boolean;
         end?: boolean;
         showCollapsibleIcon: 'auto' | boolean;
+        icon?: {
+            start?: React.ReactNode;
+            end?: React.ReactNode;
+        };
+        motion?: boolean;
     };
 };
 /**

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

@@ -0,0 +1,2 @@
+export type Orientation = 'horizontal' | 'vertical';
+export default function useOrientation(orientation?: Orientation, vertical?: boolean, layout?: Orientation): [Orientation, boolean];

package/es/splitter/hooks/useOrientation.js

@@ -0,0 +1,6 @@
+export default function useOrientation(orientation, vertical, layout) {
+  var _ref, _ref2;
+  var mergedOrientation = (_ref = (_ref2 = orientation !== null && orientation !== void 0 ? orientation : vertical ? 'vertical' : undefined) !== null && _ref2 !== void 0 ? _ref2 : layout) !== null && _ref !== void 0 ? _ref : 'horizontal';
+  var isVertical = mergedOrientation === 'vertical';
+  return [mergedOrientation, isVertical];
+}

package/{esm → es}/splitter/hooks/useResizable.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ShowCollapsibleIconMode } from '../SplitBar';
 import type { ItemType } from './useItems';
 export type ResizableInfo = {
@@ -6,5 +7,7 @@ export type ResizableInfo = {
     endCollapsible: boolean;
     showStartCollapsibleIcon: ShowCollapsibleIconMode;
     showEndCollapsibleIcon: ShowCollapsibleIconMode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
 };
 export default function useResizable(items: ItemType[], pxSizes: number[], isRTL: boolean): ResizableInfo[];

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

@@ -21,6 +21,7 @@ export default function useResizable(items, pxSizes, isRTL) {
   return React.useMemo(function () {
     var resizeInfos = [];
     for (var i = 0; i < items.length - 1; i += 1) {
+      var _prevCollapsible$icon, _prevCollapsible$icon2, _nextCollapsible$icon, _nextCollapsible$icon2;
       var prevItem = items[i];
       var nextItem = items[i + 1];
       var prevSize = pxSizes[i];
@@ -65,9 +66,11 @@ export default function useResizable(items, pxSizes, isRTL) {
         startCollapsible: !!(isRTL ? endCollapsible : startCollapsible),
         endCollapsible: !!(isRTL ? startCollapsible : endCollapsible),
         showStartCollapsibleIcon: isRTL ? showEndCollapsibleIcon : showStartCollapsibleIcon,
-        showEndCollapsibleIcon: isRTL ? showStartCollapsibleIcon : showEndCollapsibleIcon
+        showEndCollapsibleIcon: isRTL ? showStartCollapsibleIcon : showEndCollapsibleIcon,
+        startIcon: isRTL ? (_prevCollapsible$icon = prevCollapsible.icon) === null || _prevCollapsible$icon === void 0 ? void 0 : _prevCollapsible$icon.start : (_prevCollapsible$icon2 = prevCollapsible.icon) === null || _prevCollapsible$icon2 === void 0 ? void 0 : _prevCollapsible$icon2.end,
+        endIcon: isRTL ? (_nextCollapsible$icon = nextCollapsible.icon) === null || _nextCollapsible$icon === void 0 ? void 0 : _nextCollapsible$icon.end : (_nextCollapsible$icon2 = nextCollapsible.icon) === null || _nextCollapsible$icon2 === void 0 ? void 0 : _nextCollapsible$icon2.start
       };
     }
     return resizeInfos;
-  }, [pxSizes, items]);
+  }, [pxSizes, items, isRTL]);
 }

package/{esm → es}/splitter/hooks/useResize.d.ts

@@ -3,4 +3,4 @@ import type { ResizableInfo } from './useResizable';
 /**
  * Handle user drag resize logic.
  */
-export default function useResize(items: ItemType[], resizableInfos: ResizableInfo[], percentSizes: number[], containerSize: number | undefined, updateSizes: (sizes: number[]) => void, isRTL: boolean): readonly [(index: number) => void, (index: number, offset: number) => number[], () => void, (index: number, type: 'start' | 'end') => number[], number | undefined];
+export default function useResize(items: ItemType[], resizableInfos: ResizableInfo[], percentSizes: number[], containerSize: number | undefined, updateSizes: (sizes: number[]) => void, isRTL: boolean): readonly [(index: number) => void, (index: number, offset: number) => number[], (nextSizes?: number[]) => number[] | undefined, (index: number, type: "start" | "end") => number[], number | undefined];

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

@@ -61,6 +61,13 @@ export default function useResize(items, resizableInfos, percentSizes, container
     // First time trigger move index update is not sync in the state
     var confirmedIndex = null;
 
+    // Drag offsets are cumulative from the drag start, so compute on the
+    // drag-start baseline (`cacheSizes`). Keyboard resize fires start/update
+    // synchronously and the seeded state is not committed yet (`movingIndex`
+    // is still null), so compute on the current sizes instead of an empty
+    // baseline which would produce NaN sizes.
+    var numSizes = movingIndex ? _toConsumableArray(cacheSizes) : getPxSizes();
+
     // We need to know what the real index is.
     if ((!movingIndex || !movingIndex.confirmed) && offset !== 0) {
       // Search for the real index
@@ -72,7 +79,7 @@ export default function useResize(items, resizableInfos, percentSizes, container
         });
       } else {
         for (var i = index; i >= 0; i -= 1) {
-          if (cacheSizes[i] > 0 && resizableInfos[i].resizable) {
+          if (numSizes[i] > 0 && resizableInfos[i].resizable) {
             confirmedIndex = i;
             setMovingIndex({
               index: i,
@@ -84,7 +91,6 @@ export default function useResize(items, resizableInfos, percentSizes, container
       }
     }
     var mergedIndex = (_ref = (_confirmedIndex = confirmedIndex) !== null && _confirmedIndex !== void 0 ? _confirmedIndex : movingIndex === null || movingIndex === void 0 ? void 0 : movingIndex.index) !== null && _ref !== void 0 ? _ref : index;
-    var numSizes = _toConsumableArray(cacheSizes);
     var nextIndex = mergedIndex + 1;
 
     // Get boundary
@@ -114,8 +120,9 @@ export default function useResize(items, resizableInfos, percentSizes, container
     updateSizes(numSizes);
     return numSizes;
   };
-  var onOffsetEnd = function onOffsetEnd() {
+  var onOffsetEnd = function onOffsetEnd(nextSizes) {
     setMovingIndex(null);
+    return nextSizes;
   };
 
   // ======================= Collapse =======================

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

@@ -5,6 +5,7 @@ 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 React from 'react';
+import { isNonNullable } from "../../_util/is";
 import { autoPtgSizes } from "./sizeUtil";
 export function getPtg(str) {
   return Number(str.slice(0, -1)) / 100;
@@ -30,12 +31,10 @@ export default function useSizes(items, containerSize) {
     innerSizes = _React$useState2[0],
     setInnerSizes = _React$useState2[1];
   var sizes = React.useMemo(function () {
-    var mergedSizes = [];
-    for (var i = 0; i < itemsCount; i += 1) {
-      var _propSizes$i;
-      mergedSizes[i] = (_propSizes$i = propSizes[i]) !== null && _propSizes$i !== void 0 ? _propSizes$i : innerSizes[i];
-    }
-    return mergedSizes;
+    // If any panel has a controlled `size`, use only prop sizes.
+    // Undefined panels will be auto-filled by autoPtgSizes.
+    // Otherwise, use innerSizes for fully uncontrolled mode.
+    return propSizes.some(isNonNullable) ? propSizes : innerSizes;
   }, [itemsCount, innerSizes, propSizes]);
   var postPercentMinSizes = React.useMemo(function () {
     return items.map(function (item) {

package/{lib → es}/splitter/index.d.ts

@@ -1,6 +1,7 @@
 import Panel from './Panel';
 import SplitterComp from './Splitter';
-export type { SplitterProps } from './interface';
+export type { PanelProps, SplitterProps } from './interface';
+export type { ShowCollapsibleIconMode } from './SplitBar';
 type CompoundedComponent = typeof SplitterComp & {
     Panel: typeof Panel;
 };

package/es/splitter/interface.d.ts

@@ -0,0 +1,45 @@
+import type { ShowCollapsibleIconMode } from './SplitBar';
+export interface SplitterProps {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    rootClassName?: string;
+    layout?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical';
+    vertical?: boolean;
+    onResizeStart?: (sizes: number[]) => void;
+    onResize?: (sizes: number[]) => void;
+    onResizeEnd?: (sizes: number[]) => void;
+    onCollapse?: (collapsed: boolean[], sizes: number[]) => void;
+    lazy?: boolean;
+    destroyOnHidden?: boolean;
+    draggerIcon?: React.ReactNode;
+    motion?: boolean;
+}
+export interface PanelProps {
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    min?: number | string;
+    max?: number | string;
+    size?: number | string;
+    collapsible?: boolean | {
+        start?: boolean;
+        end?: boolean;
+        showCollapsibleIcon?: ShowCollapsibleIconMode;
+        icon?: {
+            start?: React.ReactNode;
+            end?: React.ReactNode;
+        };
+        motion?: boolean;
+    };
+    resizable?: boolean;
+    defaultSize?: number | string;
+    destroyOnHidden?: boolean;
+}
+export interface InternalPanelProps extends PanelProps {
+    className?: string;
+    prefixCls?: string;
+    id?: string;
+    supportMotion?: boolean;
+}