@dtjoy/dt-design 1.0.0 → 1.0.2

package/lib/splitter/Splitter.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _useItems = _interopRequireDefault(require("./hooks/useItems"));
+var _useResizable = _interopRequireDefault(require("./hooks/useResizable"));
+var _useResize = _interopRequireDefault(require("./hooks/useResize"));
+var _useSizes = _interopRequireDefault(require("./hooks/useSizes"));
+var _Panel = require("./Panel");
+var _SplitBar = _interopRequireDefault(require("./SplitBar"));
+require("./style/index.less");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); } /* eslint-disable react/no-array-index-key */ // 替换 v5 配置为 v4 ConfigContext
+// 替换 devUseWarning 为 v4 原生 warning
+const Splitter = props => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    style,
+    layout = 'horizontal',
+    children,
+    rootClassName,
+    onResizeStart,
+    onResize,
+    onResizeEnd,
+    lazy
+  } = props;
+  const {
+    getPrefixCls,
+    direction
+  } = (0, _react.useContext)(_configProvider.ConfigContext);
+  const prefixCls = getPrefixCls('splitter', customizePrefixCls);
+
+  // ======================== Direct ========================
+  const isVertical = layout === 'vertical';
+  const isRTL = direction === 'rtl';
+  const reverse = !isVertical && isRTL;
+
+  // ====================== Items Data ======================
+  const items = (0, _useItems.default)(children);
+
+  // >>> Warning 适配 v4
+  if (process.env.NODE_ENV !== 'production') {
+    let existSize = false;
+    let existUndefinedSize = false;
+    items.forEach(item => {
+      if (item.size !== undefined) {
+        existSize = true;
+      } else {
+        existUndefinedSize = true;
+      }
+    });
+    if (existSize && existUndefinedSize && !onResize) {
+      (0, _warning.default)(false, 'When part of `Splitter.Panel` has `size`, `onResize` is required or change `size` to `defaultSize`.');
+    }
+  }
+
+  // ====================== Container =======================
+  const [containerSize, setContainerSize] = (0, _react.useState)();
+  const onContainerResize = size => {
+    const {
+      offsetWidth,
+      offsetHeight
+    } = size;
+    const containerSize = isVertical ? offsetHeight : offsetWidth;
+    if (containerSize === 0) {
+      return;
+    }
+    setContainerSize(containerSize);
+  };
+
+  // ========================= Size =========================
+  const [panelSizes, itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] = (0, _useSizes.default)(items, containerSize);
+
+  // ====================== Resizable =======================
+  const resizableInfos = (0, _useResizable.default)(items, itemPxSizes, isRTL);
+  const [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex] = (0, _useResize.default)(items, resizableInfos, itemPtgSizes, containerSize, updateSizes, isRTL);
+
+  // ======================== Events ========================
+  const onInternalResizeStart = (0, _useEvent.default)(index => {
+    onOffsetStart(index);
+    onResizeStart?.(itemPxSizes);
+  });
+  const onInternalResizeUpdate = (0, _useEvent.default)((index, offset, lazyEnd) => {
+    const nextSizes = onOffsetUpdate(index, offset);
+    if (lazyEnd) {
+      onResizeEnd?.(nextSizes);
+    } else {
+      onResize?.(nextSizes);
+    }
+  });
+  const onInternalResizeEnd = (0, _useEvent.default)(lazyEnd => {
+    onOffsetEnd();
+    if (!lazyEnd) {
+      onResizeEnd?.(itemPxSizes);
+    }
+  });
+  const onInternalCollapse = (0, _useEvent.default)((index, type) => {
+    const nextSizes = onCollapse(index, type);
+    onResize?.(nextSizes);
+    onResizeEnd?.(nextSizes);
+  });
+
+  // ======================== Styles ========================
+  // 构建 v4 风格类名（移除 cssinjs 相关 hash 和变量类）
+  const containerClassName = (0, _classnames.default)(prefixCls, className, `${prefixCls}-${layout}`, {
+    [`${prefixCls}-rtl`]: isRTL
+  }, rootClassName
+  // 移除 v5 cssinjs 类名
+  // contextClassName,
+  // cssVarCls,
+  // rootCls,
+  // hashId
+  );
+
+  // ======================== Render ========================
+  const maskCls = `${prefixCls}-mask`;
+  const stackSizes = _react.default.useMemo(() => {
+    const mergedSizes = [];
+    let stack = 0;
+    for (let i = 0; i < items.length; i += 1) {
+      stack += itemPtgSizes[i];
+      mergedSizes.push(stack);
+    }
+    return mergedSizes;
+  }, [itemPtgSizes]);
+
+  // 合并样式（移除 v5 上下文样式）
+  const mergedStyle = {
+    ...style
+  };
+
+  // 移除 wrapCSSVar 包装（v4 无需 cssinjs 变量注入）
+  return /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
+    onResize: onContainerResize
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: mergedStyle,
+    className: containerClassName
+  }, items.map((item, idx) => {
+    // Panel
+    const panel = /*#__PURE__*/_react.default.createElement(_Panel.InternalPanel, _extends({}, item, {
+      prefixCls: prefixCls,
+      size: panelSizes[idx]
+    }));
+
+    // Split Bar
+    let splitBar = null;
+    const resizableInfo = resizableInfos[idx];
+    if (resizableInfo) {
+      const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
+      const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
+      const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
+      const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
+      splitBar = /*#__PURE__*/_react.default.createElement(_SplitBar.default, {
+        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: (index, offsetX, offsetY, lazyEnd) => {
+          let offset = isVertical ? offsetY : offsetX;
+          if (reverse) {
+            offset = -offset;
+          }
+          onInternalResizeUpdate(index, offset, lazyEnd);
+        },
+        onOffsetEnd: onInternalResizeEnd,
+        onCollapse: onInternalCollapse,
+        containerSize: containerSize || 0
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: `split-panel-${idx}`
+    }, panel, splitBar);
+  }), typeof movingIndex === 'number' && /*#__PURE__*/_react.default.createElement("div", {
+    "aria-hidden": true,
+    className: (0, _classnames.default)(maskCls, `${maskCls}-${layout}`)
+  })));
+};
+if (process.env.NODE_ENV !== 'production') {
+  Splitter.displayName = 'Splitter';
+}
+var _default = exports.default = Splitter;

package/lib/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/lib/splitter/hooks/sizeUtil.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoPtgSizes = autoPtgSizes;
+function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
+  let currentTotalPtg = 0;
+  const undefinedIndexes = [];
+  ptgSizes.forEach((size, index) => {
+    if (size === undefined) {
+      undefinedIndexes.push(index);
+    } else {
+      currentTotalPtg += size;
+    }
+  });
+  const restPtg = 1 - currentTotalPtg;
+  const undefinedCount = undefinedIndexes.length;
+  if (restPtg < 0) {
+    const scale = 1 / currentTotalPtg;
+    return ptgSizes.map(size => size === undefined ? 0 : size * scale);
+  }
+  let sumMin = 0;
+  let sumMax = 0;
+  let limitMin = 0;
+  let limitMax = 1;
+  for (const index of undefinedIndexes) {
+    const min = minPtgSizes[index] || 0;
+    const max = maxPtgSizes[index] || 1;
+    sumMin += min;
+    sumMax += max;
+    limitMin = Math.max(limitMin, min);
+    limitMax = Math.min(limitMax, max);
+  }
+  if (sumMin > 1 && sumMax < 1) {
+    const avg = 1 / undefinedCount;
+    return ptgSizes.map(size => size === undefined ? avg : size);
+  }
+  const restAvg = restPtg / undefinedCount;
+  if (limitMin <= restAvg && restAvg <= limitMax) {
+    return ptgSizes.map(size => size === undefined ? restAvg : size);
+  }
+  const result = [...ptgSizes];
+  let remain = restPtg - sumMin;
+  for (let i = 0; i < undefinedCount; i += 1) {
+    const index = undefinedIndexes[i];
+    const min = minPtgSizes[index] || 0;
+    const max = maxPtgSizes[index] || 1;
+    result[index] = min;
+    const canAdd = max - min;
+    const add = Math.min(canAdd, remain);
+    result[index] += add;
+    remain -= add;
+  }
+  return result;
+}

package/lib/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/lib/splitter/hooks/useItems.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getCollapsible(collapsible) {
+  if (collapsible && typeof collapsible === 'object') {
+    return {
+      ...collapsible,
+      showCollapsibleIcon: collapsible.showCollapsibleIcon === undefined ? 'auto' : collapsible.showCollapsibleIcon
+    };
+  }
+  const mergedCollapsible = !!collapsible;
+  return {
+    start: mergedCollapsible,
+    end: mergedCollapsible,
+    showCollapsibleIcon: 'auto'
+  };
+}
+
+/**
+ * Convert `children` into `items`.
+ */
+function useItems(children) {
+  const items = React.useMemo(() => (0, _toArray.default)(children).filter(item => /*#__PURE__*/React.isValidElement(item)).map(node => {
+    const {
+      props
+    } = node;
+    const {
+      collapsible,
+      ...restProps
+    } = props;
+    return {
+      ...restProps,
+      collapsible: getCollapsible(collapsible)
+    };
+  }), [children]);
+  return items;
+}
+var _default = exports.default = useItems;

package/lib/splitter/hooks/useResizable.d.ts

@@ -0,0 +1,10 @@
+import type { ShowCollapsibleIconMode } from '../SplitBar';
+import type { ItemType } from './useItems';
+export declare type ResizableInfo = {
+    resizable: boolean;
+    startCollapsible: boolean;
+    endCollapsible: boolean;
+    showStartCollapsibleIcon: ShowCollapsibleIconMode;
+    showEndCollapsibleIcon: ShowCollapsibleIconMode;
+};
+export default function useResizable(items: ItemType[], pxSizes: number[], isRTL: boolean): ResizableInfo[];

package/lib/splitter/hooks/useResizable.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useResizable;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getShowCollapsibleIcon(prev, next) {
+  if (prev.collapsible && next.collapsible) {
+    if (prev.showCollapsibleIcon === true || next.showCollapsibleIcon === true) {
+      return true;
+    }
+    if (prev.showCollapsibleIcon === 'auto' || next.showCollapsibleIcon === 'auto') {
+      return 'auto';
+    }
+    return false;
+  }
+  if (prev.collapsible) {
+    return prev.showCollapsibleIcon;
+  }
+  if (next.collapsible) {
+    return next.showCollapsibleIcon;
+  }
+  return false;
+}
+function useResizable(items, pxSizes, isRTL) {
+  return React.useMemo(() => {
+    const resizeInfos = [];
+    for (let i = 0; i < items.length - 1; i += 1) {
+      const prevItem = items[i];
+      const nextItem = items[i + 1];
+      const prevSize = pxSizes[i];
+      const nextSize = pxSizes[i + 1];
+      const {
+        resizable: prevResizable = true,
+        min: prevMin,
+        collapsible: prevCollapsible
+      } = prevItem;
+      const {
+        resizable: nextResizable = true,
+        min: nextMin,
+        collapsible: nextCollapsible
+      } = nextItem;
+      const mergedResizable =
+      // Both need to be resizable
+      prevResizable && nextResizable && (
+      // Prev is not collapsed and limit min size
+      prevSize !== 0 || !prevMin) && (
+      // Next is not collapsed and limit min size
+      nextSize !== 0 || !nextMin);
+      const prevEndCollapsible = !!prevCollapsible.end && prevSize > 0;
+      const nextStartExpandable = !!nextCollapsible.start && nextSize === 0 && prevSize > 0;
+      const startCollapsible = prevEndCollapsible || nextStartExpandable;
+      const nextStartCollapsible = !!nextCollapsible.start && nextSize > 0;
+      const prevEndExpandable = !!prevCollapsible.end && prevSize === 0 && nextSize > 0;
+      const endCollapsible = nextStartCollapsible || prevEndExpandable;
+      const showStartCollapsibleIcon = getShowCollapsibleIcon({
+        collapsible: prevEndCollapsible,
+        showCollapsibleIcon: prevCollapsible.showCollapsibleIcon
+      }, {
+        collapsible: nextStartExpandable,
+        showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
+      });
+      const showEndCollapsibleIcon = getShowCollapsibleIcon({
+        collapsible: nextStartCollapsible,
+        showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
+      }, {
+        collapsible: prevEndExpandable,
+        showCollapsibleIcon: prevCollapsible.showCollapsibleIcon
+      });
+      resizeInfos[i] = {
+        resizable: mergedResizable,
+        startCollapsible: !!(isRTL ? endCollapsible : startCollapsible),
+        endCollapsible: !!(isRTL ? startCollapsible : endCollapsible),
+        showStartCollapsibleIcon: isRTL ? showEndCollapsibleIcon : showStartCollapsibleIcon,
+        showEndCollapsibleIcon: isRTL ? showStartCollapsibleIcon : showEndCollapsibleIcon
+      };
+    }
+    return resizeInfos;
+  }, [pxSizes, items]);
+}

package/lib/splitter/hooks/useResize.d.ts

@@ -0,0 +1,6 @@
+import type { ItemType } from './useItems';
+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];

package/lib/splitter/hooks/useResize.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useResize;
+var React = _interopRequireWildcard(require("react"));
+var _useSizes = require("./useSizes");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Handle user drag resize logic.
+ */
+function useResize(items, resizableInfos, percentSizes, containerSize, updateSizes, isRTL) {
+  const limitSizes = items.map(item => [item.min, item.max]);
+  const mergedContainerSize = containerSize || 0;
+  const ptg2px = ptg => ptg * mergedContainerSize;
+
+  // ======================== Resize ========================
+  function getLimitSize(str, defaultLimit) {
+    if (typeof str === 'string') {
+      return ptg2px((0, _useSizes.getPtg)(str));
+    }
+    return str ?? defaultLimit;
+  }
+
+  // Real px sizes
+  const [cacheSizes, setCacheSizes] = React.useState([]);
+  const cacheCollapsedSize = React.useRef([]);
+
+  /**
+   * When start drag, check the direct is `start` or `end`.
+   * This will handle when 2 splitter bar are in the same position.
+   */
+  const [movingIndex, setMovingIndex] = React.useState(null);
+  const getPxSizes = () => percentSizes.map(ptg2px);
+  const onOffsetStart = index => {
+    setCacheSizes(getPxSizes());
+    setMovingIndex({
+      index,
+      confirmed: false
+    });
+  };
+  const onOffsetUpdate = (index, offset) => {
+    // First time trigger move index update is not sync in the state
+    let confirmedIndex = null;
+
+    // We need to know what the real index is.
+    if ((!movingIndex || !movingIndex.confirmed) && offset !== 0) {
+      // Search for the real index
+      if (offset > 0) {
+        confirmedIndex = index;
+        setMovingIndex({
+          index,
+          confirmed: true
+        });
+      } else {
+        for (let i = index; i >= 0; i -= 1) {
+          if (cacheSizes[i] > 0 && resizableInfos[i].resizable) {
+            confirmedIndex = i;
+            setMovingIndex({
+              index: i,
+              confirmed: true
+            });
+            break;
+          }
+        }
+      }
+    }
+    const mergedIndex = confirmedIndex ?? movingIndex?.index ?? index;
+    const numSizes = [...cacheSizes];
+    const nextIndex = mergedIndex + 1;
+
+    // Get boundary
+    const startMinSize = getLimitSize(limitSizes[mergedIndex][0], 0);
+    const endMinSize = getLimitSize(limitSizes[nextIndex][0], 0);
+    const startMaxSize = getLimitSize(limitSizes[mergedIndex][1], mergedContainerSize);
+    const endMaxSize = getLimitSize(limitSizes[nextIndex][1], mergedContainerSize);
+    let mergedOffset = offset;
+
+    // Align with the boundary
+    if (numSizes[mergedIndex] + mergedOffset < startMinSize) {
+      mergedOffset = startMinSize - numSizes[mergedIndex];
+    }
+    if (numSizes[nextIndex] - mergedOffset < endMinSize) {
+      mergedOffset = numSizes[nextIndex] - endMinSize;
+    }
+    if (numSizes[mergedIndex] + mergedOffset > startMaxSize) {
+      mergedOffset = startMaxSize - numSizes[mergedIndex];
+    }
+    if (numSizes[nextIndex] - mergedOffset > endMaxSize) {
+      mergedOffset = numSizes[nextIndex] - endMaxSize;
+    }
+
+    // Do offset
+    numSizes[mergedIndex] += mergedOffset;
+    numSizes[nextIndex] -= mergedOffset;
+    updateSizes(numSizes);
+    return numSizes;
+  };
+  const onOffsetEnd = () => {
+    setMovingIndex(null);
+  };
+
+  // ======================= Collapse =======================
+  const onCollapse = (index, type) => {
+    const currentSizes = getPxSizes();
+    const adjustedType = isRTL ? type === 'start' ? 'end' : 'start' : type;
+    const currentIndex = adjustedType === 'start' ? index : index + 1;
+    const targetIndex = adjustedType === 'start' ? index + 1 : index;
+    const currentSize = currentSizes[currentIndex];
+    const targetSize = currentSizes[targetIndex];
+    if (currentSize !== 0 && targetSize !== 0) {
+      // Collapse directly
+      currentSizes[currentIndex] = 0;
+      currentSizes[targetIndex] += currentSize;
+      cacheCollapsedSize.current[index] = currentSize;
+    } else {
+      const totalSize = currentSize + targetSize;
+      const currentSizeMin = getLimitSize(limitSizes[currentIndex][0], 0);
+      const currentSizeMax = getLimitSize(limitSizes[currentIndex][1], mergedContainerSize);
+      const targetSizeMin = getLimitSize(limitSizes[targetIndex][0], 0);
+      const targetSizeMax = getLimitSize(limitSizes[targetIndex][1], mergedContainerSize);
+      const limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
+      const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
+      const halfOffset = targetSizeMin || (limitEnd - limitStart) / 2;
+      const targetCacheCollapsedSize = cacheCollapsedSize.current[index];
+      const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
+      const shouldUseCache = targetCacheCollapsedSize && targetCacheCollapsedSize <= targetSizeMax && targetCacheCollapsedSize >= targetSizeMin && currentCacheCollapsedSize <= currentSizeMax && currentCacheCollapsedSize >= currentSizeMin;
+      if (shouldUseCache) {
+        currentSizes[targetIndex] = targetCacheCollapsedSize;
+        currentSizes[currentIndex] = currentCacheCollapsedSize;
+      } else {
+        currentSizes[currentIndex] -= halfOffset;
+        currentSizes[targetIndex] += halfOffset;
+      }
+    }
+    updateSizes(currentSizes);
+    return currentSizes;
+  };
+  return [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex?.index];
+}

package/lib/splitter/hooks/useSizes.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PanelProps } from '../interface';
+export declare function getPtg(str: string): number;
+export default function useSizes(items: PanelProps[], containerSize?: number): readonly [(string | number | undefined)[], number[], number[], number[], number[], React.Dispatch<React.SetStateAction<(string | number | undefined)[]>>];

package/lib/splitter/hooks/useSizes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSizes;
+exports.getPtg = getPtg;
+var _react = _interopRequireDefault(require("react"));
+var _sizeUtil = require("./sizeUtil");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getPtg(str) {
+  return Number(str.slice(0, -1)) / 100;
+}
+function isPtg(itemSize) {
+  return typeof itemSize === 'string' && itemSize.endsWith('%');
+}
+function useSizes(items, containerSize) {
+  const propSizes = items.map(item => item.size);
+  const itemsCount = items.length;
+  const mergedContainerSize = containerSize || 0;
+  const ptg2px = ptg => ptg * mergedContainerSize;
+  const [innerSizes, setInnerSizes] = _react.default.useState(() => items.map(item => item.defaultSize));
+  const sizes = _react.default.useMemo(() => {
+    const mergedSizes = [];
+    for (let i = 0; i < itemsCount; i += 1) {
+      mergedSizes[i] = propSizes[i] ?? innerSizes[i];
+    }
+    return mergedSizes;
+  }, [itemsCount, innerSizes, propSizes]);
+  const postPercentMinSizes = _react.default.useMemo(() => items.map(item => {
+    if (isPtg(item.min)) {
+      return getPtg(item.min);
+    }
+    return (item.min || 0) / mergedContainerSize;
+  }), [items, mergedContainerSize]);
+  const postPercentMaxSizes = _react.default.useMemo(() => items.map(item => {
+    if (isPtg(item.max)) {
+      return getPtg(item.max);
+    }
+    return (item.max || mergedContainerSize) / mergedContainerSize;
+  }), [items, mergedContainerSize]);
+  const postPercentSizes = _react.default.useMemo(() => {
+    const ptgList = [];
+    for (let i = 0; i < itemsCount; i += 1) {
+      const itemSize = sizes[i];
+      if (isPtg(itemSize)) {
+        ptgList[i] = getPtg(itemSize);
+      } else if (itemSize || itemSize === 0) {
+        const num = Number(itemSize);
+        if (!Number.isNaN(num)) {
+          ptgList[i] = num / mergedContainerSize;
+        }
+      } else {
+        ptgList[i] = undefined;
+      }
+    }
+    return (0, _sizeUtil.autoPtgSizes)(ptgList, postPercentMinSizes, postPercentMaxSizes);
+  }, [sizes, mergedContainerSize, postPercentMinSizes, postPercentMaxSizes]);
+  const postPxSizes = _react.default.useMemo(() => postPercentSizes.map(ptg2px), [postPercentSizes, mergedContainerSize]);
+  const panelSizes = _react.default.useMemo(() => containerSize ? postPxSizes : sizes, [postPxSizes, containerSize]);
+  return [panelSizes, postPxSizes, postPercentSizes, postPercentMinSizes, postPercentMaxSizes, setInnerSizes];
+}

package/lib/splitter/index.d.ts

@@ -0,0 +1,8 @@
+import Panel from './Panel';
+import SplitterComp from './Splitter';
+export type { SplitterProps } from './interface';
+declare type CompoundedComponent = typeof SplitterComp & {
+    Panel: typeof Panel;
+};
+declare const Splitter: CompoundedComponent;
+export default Splitter;

package/lib/splitter/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _Splitter = _interopRequireDefault(require("./Splitter"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Splitter = _Splitter.default;
+Splitter.Panel = _Panel.default;
+var _default = exports.default = Splitter;