@dtjoy/dt-design 1.0.1 → 1.0.2

package/esm/resize/index.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface ResizeProps {
+    observerEle?: HTMLElement | null;
+    children?: ReactNode;
+    onResize?: () => void;
+}
+declare const Resize: React.FC<ResizeProps>;
+export default Resize;

package/esm/resize/index.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+var Resize = function Resize(_ref) {
+  var observerEle = _ref.observerEle,
+    onResize = _ref.onResize,
+    children = _ref.children;
+  var resizeEventRef = useRef(onResize);
+  resizeEventRef.current = onResize;
+  useEffect(function () {
+    var onResizeProxy = function onResizeProxy() {
+      if (typeof resizeEventRef.current === 'function') {
+        resizeEventRef.current();
+      }
+    };
+    if (!observerEle) {
+      window.addEventListener('resize', onResizeProxy, false);
+      return function () {
+        window.removeEventListener('resize', onResizeProxy, false);
+      };
+    } else {
+      var resizeObserver = new ResizeObserver(onResizeProxy);
+      resizeObserver.observe(observerEle);
+      return function () {
+        resizeObserver.unobserve(observerEle);
+      };
+    }
+  }, [observerEle]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+export default Resize;

package/esm/splitter/Panel.d.ts

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

package/esm/splitter/Panel.js

@@ -0,0 +1,38 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function 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 _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 React, { forwardRef, useContext } from 'react';
+import { ConfigContext } from 'antd/es/config-provider';
+import classNames from 'classnames';
+export var InternalPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    children = props.children,
+    size = props.size,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style;
+  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 hasSize = size !== undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: panelClassName,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      // Use auto when start from ssr
+      flexBasis: hasSize ? size : 'auto',
+      flexGrow: hasSize ? 0 : 1
+    })
+  }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  InternalPanel.displayName = 'Panel';
+}
+var Panel = function Panel() {
+  return null;
+};
+export default Panel;

package/esm/splitter/SplitBar.d.ts

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

package/esm/splitter/SplitBar.js

@@ -0,0 +1,185 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 React, { useState } from 'react';
+import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@dtinsight/react-icons';
+import classNames from 'classnames';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+function getValidNumber(num) {
+  return typeof num === 'number' && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
+}
+var SplitBar = function SplitBar(props) {
+  var prefixCls = props.prefixCls,
+    vertical = props.vertical,
+    index = props.index,
+    active = props.active,
+    ariaNow = props.ariaNow,
+    ariaMin = props.ariaMin,
+    ariaMax = props.ariaMax,
+    resizable = props.resizable,
+    startCollapsible = props.startCollapsible,
+    endCollapsible = props.endCollapsible,
+    onOffsetStart = props.onOffsetStart,
+    onOffsetUpdate = props.onOffsetUpdate,
+    onOffsetEnd = props.onOffsetEnd,
+    onCollapse = props.onCollapse,
+    lazy = props.lazy,
+    containerSize = props.containerSize,
+    showStartCollapsibleIcon = props.showStartCollapsibleIcon,
+    showEndCollapsibleIcon = props.showEndCollapsibleIcon;
+  var splitBarPrefixCls = "".concat(prefixCls, "-bar");
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    startPos = _useState2[0],
+    setStartPos = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    constrainedOffset = _useState4[0],
+    setConstrainedOffset = _useState4[1];
+  var constrainedOffsetX = vertical ? 0 : constrainedOffset;
+  var constrainedOffsetY = vertical ? constrainedOffset : 0;
+  var onMouseDown = function onMouseDown(e) {
+    if (resizable && e.currentTarget) {
+      setStartPos([e.pageX, e.pageY]);
+      onOffsetStart(index);
+    }
+  };
+  var onTouchStart = function onTouchStart(e) {
+    if (resizable && e.touches.length === 1) {
+      var touch = e.touches[0];
+      setStartPos([touch.pageX, touch.pageY]);
+      onOffsetStart(index);
+    }
+  };
+  var getConstrainedOffset = function getConstrainedOffset(rawOffset) {
+    var currentPos = containerSize * ariaNow / 100;
+    var newPos = currentPos + rawOffset;
+    var minAllowed = Math.max(0, containerSize * ariaMin / 100);
+    var maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
+    var clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
+    return clampedPos - currentPos;
+  };
+  var handleLazyMove = useEvent(function (offsetX, offsetY) {
+    var constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
+    setConstrainedOffset(constrainedOffsetValue);
+  });
+  var handleLazyEnd = useEvent(function () {
+    onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
+    setConstrainedOffset(0);
+    onOffsetEnd(true);
+  });
+  var getVisibilityClass = function getVisibilityClass(mode) {
+    switch (mode) {
+      case true:
+        return "".concat(splitBarPrefixCls, "-collapse-bar-always-visible");
+      case false:
+        return "".concat(splitBarPrefixCls, "-collapse-bar-always-hidden");
+      case 'auto':
+        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];
+      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]);
+  var transformStyle = _defineProperty({}, "--".concat(splitBarPrefixCls, "-preview-offset"), "".concat(constrainedOffset, "px"));
+  var StartIcon = vertical ? UpOutlined : LeftOutlined;
+  var EndIcon = vertical ? DownOutlined : RightOutlined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: splitBarPrefixCls,
+    role: "separator",
+    "aria-valuenow": getValidNumber(ariaNow),
+    "aria-valuemin": getValidNumber(ariaMin),
+    "aria-valuemax": getValidNumber(ariaMax)
+  }, lazy && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".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)),
+    onMouseDown: onMouseDown,
+    onTouchStart: onTouchStart
+  }), startCollapsible && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".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"))
+  })), endCollapsible && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".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"))
+  })));
+};
+export default SplitBar;

package/esm/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/splitter/Splitter.js

@@ -0,0 +1,215 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _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); }
+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; }
+/* eslint-disable react/no-array-index-key */
+import React, { useContext, useState } from 'react';
+// 替换 v5 配置为 v4 ConfigContext
+import { ConfigContext } from 'antd/es/config-provider';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import warning from 'rc-util/lib/warning'; // 替换 devUseWarning 为 v4 原生 warning
+
+import useItems from "./hooks/useItems";
+import useResizable from "./hooks/useResizable";
+import useResize from "./hooks/useResize";
+import useSizes from "./hooks/useSizes";
+import { InternalPanel } from "./Panel";
+import SplitBar from "./SplitBar";
+import "./style/index.less";
+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,
+    children = props.children,
+    rootClassName = props.rootClassName,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd,
+    lazy = props.lazy;
+  var _useContext = useContext(ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls,
+    direction = _useContext.direction;
+  var prefixCls = getPrefixCls('splitter', customizePrefixCls);
+
+  // ======================== Direct ========================
+  var isVertical = layout === 'vertical';
+  var isRTL = direction === 'rtl';
+  var reverse = !isVertical && isRTL;
+
+  // ====================== Items Data ======================
+  var items = useItems(children);
+
+  // >>> Warning 适配 v4
+  if (process.env.NODE_ENV !== 'production') {
+    var existSize = false;
+    var existUndefinedSize = false;
+    items.forEach(function (item) {
+      if (item.size !== undefined) {
+        existSize = true;
+      } else {
+        existUndefinedSize = true;
+      }
+    });
+    if (existSize && existUndefinedSize && !onResize) {
+      warning(false, 'When part of `Splitter.Panel` has `size`, `onResize` is required or change `size` to `defaultSize`.');
+    }
+  }
+
+  // ====================== Container =======================
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerSize = _useState2[0],
+    setContainerSize = _useState2[1];
+  var onContainerResize = function onContainerResize(size) {
+    var offsetWidth = size.offsetWidth,
+      offsetHeight = size.offsetHeight;
+    var containerSize = isVertical ? offsetHeight : offsetWidth;
+    if (containerSize === 0) {
+      return;
+    }
+    setContainerSize(containerSize);
+  };
+
+  // ========================= Size =========================
+  var _useSizes = useSizes(items, containerSize),
+    _useSizes2 = _slicedToArray(_useSizes, 6),
+    panelSizes = _useSizes2[0],
+    itemPxSizes = _useSizes2[1],
+    itemPtgSizes = _useSizes2[2],
+    itemPtgMinSizes = _useSizes2[3],
+    itemPtgMaxSizes = _useSizes2[4],
+    updateSizes = _useSizes2[5];
+
+  // ====================== Resizable =======================
+  var resizableInfos = useResizable(items, itemPxSizes, isRTL);
+  var _useResize = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes, isRTL),
+    _useResize2 = _slicedToArray(_useResize, 5),
+    onOffsetStart = _useResize2[0],
+    onOffsetUpdate = _useResize2[1],
+    onOffsetEnd = _useResize2[2],
+    onCollapse = _useResize2[3],
+    movingIndex = _useResize2[4];
+
+  // ======================== Events ========================
+  var onInternalResizeStart = useEvent(function (index) {
+    onOffsetStart(index);
+    onResizeStart === null || onResizeStart === void 0 || onResizeStart(itemPxSizes);
+  });
+  var onInternalResizeUpdate = useEvent(function (index, offset, lazyEnd) {
+    var nextSizes = onOffsetUpdate(index, offset);
+    if (lazyEnd) {
+      onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(nextSizes);
+    } else {
+      onResize === null || onResize === void 0 || onResize(nextSizes);
+    }
+  });
+  var onInternalResizeEnd = useEvent(function (lazyEnd) {
+    onOffsetEnd();
+    if (!lazyEnd) {
+      onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(itemPxSizes);
+    }
+  });
+  var onInternalCollapse = useEvent(function (index, type) {
+    var nextSizes = onCollapse(index, type);
+    onResize === null || onResize === void 0 || onResize(nextSizes);
+    onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(nextSizes);
+  });
+
+  // ======================== Styles ========================
+  // 构建 v4 风格类名（移除 cssinjs 相关 hash 和变量类）
+  var containerClassName = classNames(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName
+  // 移除 v5 cssinjs 类名
+  // contextClassName,
+  // cssVarCls,
+  // rootCls,
+  // hashId
+  );
+
+  // ======================== Render ========================
+  var maskCls = "".concat(prefixCls, "-mask");
+  var stackSizes = React.useMemo(function () {
+    var mergedSizes = [];
+    var stack = 0;
+    for (var i = 0; i < items.length; i += 1) {
+      stack += itemPtgSizes[i];
+      mergedSizes.push(stack);
+    }
+    return mergedSizes;
+  }, [itemPtgSizes]);
+
+  // 合并样式（移除 v5 上下文样式）
+  var mergedStyle = _objectSpread({}, style);
+
+  // 移除 wrapCSSVar 包装（v4 无需 cssinjs 变量注入）
+  return /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: onContainerResize
+  }, /*#__PURE__*/React.createElement("div", {
+    style: mergedStyle,
+    className: containerClassName
+  }, items.map(function (item, idx) {
+    // Panel
+    var panel = /*#__PURE__*/React.createElement(InternalPanel, _extends({}, item, {
+      prefixCls: prefixCls,
+      size: panelSizes[idx]
+    }));
+
+    // Split Bar
+    var splitBar = null;
+    var resizableInfo = resizableInfos[idx];
+    if (resizableInfo) {
+      var ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
+      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];
+      splitBar = /*#__PURE__*/React.createElement(SplitBar, {
+        lazy: lazy,
+        index: idx,
+        active: movingIndex === idx,
+        prefixCls: prefixCls,
+        vertical: isVertical,
+        resizable: resizableInfo.resizable,
+        ariaNow: stackSizes[idx] * 100,
+        ariaMin: Math.max(ariaMinStart, ariaMinEnd) * 100,
+        ariaMax: Math.min(ariaMaxStart, ariaMaxEnd) * 100,
+        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);
+        },
+        onOffsetEnd: onInternalResizeEnd,
+        onCollapse: onInternalCollapse,
+        containerSize: containerSize || 0
+      });
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "split-panel-".concat(idx)
+    }, panel, splitBar);
+  }), typeof movingIndex === 'number' && /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": true,
+    className: classNames(maskCls, "".concat(maskCls, "-").concat(layout))
+  })));
+};
+if (process.env.NODE_ENV !== 'production') {
+  Splitter.displayName = 'Splitter';
+}
+export default Splitter;

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

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

package/esm/splitter/hooks/sizeUtil.js

@@ -0,0 +1,63 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+export function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
+  var currentTotalPtg = 0;
+  var undefinedIndexes = [];
+  ptgSizes.forEach(function (size, index) {
+    if (size === undefined) {
+      undefinedIndexes.push(index);
+    } else {
+      currentTotalPtg += size;
+    }
+  });
+  var restPtg = 1 - currentTotalPtg;
+  var undefinedCount = undefinedIndexes.length;
+  if (restPtg < 0) {
+    var scale = 1 / currentTotalPtg;
+    return ptgSizes.map(function (size) {
+      return size === undefined ? 0 : size * scale;
+    });
+  }
+  var sumMin = 0;
+  var sumMax = 0;
+  var limitMin = 0;
+  var limitMax = 1;
+  for (var _i = 0, _undefinedIndexes = undefinedIndexes; _i < _undefinedIndexes.length; _i++) {
+    var index = _undefinedIndexes[_i];
+    var min = minPtgSizes[index] || 0;
+    var max = maxPtgSizes[index] || 1;
+    sumMin += min;
+    sumMax += max;
+    limitMin = Math.max(limitMin, min);
+    limitMax = Math.min(limitMax, max);
+  }
+  if (sumMin > 1 && sumMax < 1) {
+    var avg = 1 / undefinedCount;
+    return ptgSizes.map(function (size) {
+      return size === undefined ? avg : size;
+    });
+  }
+  var restAvg = restPtg / undefinedCount;
+  if (limitMin <= restAvg && restAvg <= limitMax) {
+    return ptgSizes.map(function (size) {
+      return size === undefined ? restAvg : size;
+    });
+  }
+  var result = _toConsumableArray(ptgSizes);
+  var remain = restPtg - sumMin;
+  for (var i = 0; i < undefinedCount; i += 1) {
+    var _index = undefinedIndexes[i];
+    var _min = minPtgSizes[_index] || 0;
+    var _max = maxPtgSizes[_index] || 1;
+    result[_index] = _min;
+    var canAdd = _max - _min;
+    var add = Math.min(canAdd, remain);
+    result[_index] += add;
+    remain -= add;
+  }
+  return result;
+}

package/esm/splitter/hooks/useItems.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PanelProps } from '../interface';
+export declare type ItemType = Omit<PanelProps, 'collapsible'> & {
+    collapsible: {
+        start?: boolean;
+        end?: boolean;
+        showCollapsibleIcon: 'auto' | boolean;
+    };
+};
+/**
+ * Convert `children` into `items`.
+ */
+declare function useItems(children: React.ReactNode): ItemType[];
+export default useItems;

package/esm/splitter/hooks/useItems.js

@@ -0,0 +1,44 @@
+var _excluded = ["collapsible"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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 _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); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import * as React from 'react';
+import toArray from 'rc-util/lib/Children/toArray';
+function getCollapsible(collapsible) {
+  if (collapsible && _typeof(collapsible) === 'object') {
+    return _objectSpread(_objectSpread({}, collapsible), {}, {
+      showCollapsibleIcon: collapsible.showCollapsibleIcon === undefined ? 'auto' : collapsible.showCollapsibleIcon
+    });
+  }
+  var mergedCollapsible = !!collapsible;
+  return {
+    start: mergedCollapsible,
+    end: mergedCollapsible,
+    showCollapsibleIcon: 'auto'
+  };
+}
+
+/**
+ * Convert `children` into `items`.
+ */
+function useItems(children) {
+  var items = React.useMemo(function () {
+    return toArray(children).filter(function (item) {
+      return /*#__PURE__*/React.isValidElement(item);
+    }).map(function (node) {
+      var props = node.props;
+      var collapsible = props.collapsible,
+        restProps = _objectWithoutProperties(props, _excluded);
+      return _objectSpread(_objectSpread({}, restProps), {}, {
+        collapsible: getCollapsible(collapsible)
+      });
+    });
+  }, [children]);
+  return items;
+}
+export default useItems;