@996-design/996-components 1.0.0

package/es/splitter/SplitBar.js

@@ -0,0 +1,251 @@
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import DownOutlined from "@996-design/996-icons/es/icons/DownOutlined";
+import LeftOutlined from "@996-design/996-icons/es/icons/LeftOutlined";
+import RightOutlined from "@996-design/996-icons/es/icons/RightOutlined";
+import UpOutlined from "@996-design/996-icons/es/icons/UpOutlined";
+import { useEvent, useLayoutEffect } from '@rc-component/util';
+import { clsx } from 'clsx';
+import { isNumber } from '../_util/is.js';
+import { genCssVar } from '../theme/util/genStyleUtils.js';
+var getValidNumber = function getValidNumber(num) {
+  return isNumber(num) && Number.isFinite(num) ? Math.round(num) : 0;
+};
+var DOUBLE_CLICK_TIME_GAP = 300;
+var SplitBar = function SplitBar(props) {
+  var prefixCls = props.prefixCls,
+    rootPrefixCls = props.rootPrefixCls,
+    vertical = props.vertical,
+    index = props.index,
+    active = props.active,
+    ariaNow = props.ariaNow,
+    ariaMin = props.ariaMin,
+    ariaMax = props.ariaMax,
+    resizable = props.resizable,
+    draggerIcon = props.draggerIcon,
+    draggerStyle = props.draggerStyle,
+    draggerClassName = props.draggerClassName,
+    collapsibleIcon = props.collapsibleIcon,
+    startCollapsible = props.startCollapsible,
+    endCollapsible = props.endCollapsible,
+    onDraggerDoubleClick = props.onDraggerDoubleClick,
+    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 lastClickTimeRef = useRef(0);
+  var _genCssVar = genCssVar(rootPrefixCls, 'splitter'),
+    _genCssVar2 = _slicedToArray(_genCssVar, 1),
+    varName = _genCssVar2[0];
+  // ======================== Resize ========================
+  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) {
+    e.stopPropagation();
+    var currentTime = Date.now();
+    var timeGap = currentTime - lastClickTimeRef.current;
+    if (timeGap > 0 && timeGap < DOUBLE_CLICK_TIME_GAP) {
+      // Prevent drag start if it's a double-click action
+      return;
+    }
+    lastClickTimeRef.current = currentTime;
+    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);
+    }
+  };
+  // Updated constraint calculation
+  var getConstrainedOffset = function getConstrainedOffset(rawOffset) {
+    var currentPos = containerSize * ariaNow / 100;
+    var newPos = currentPos + rawOffset;
+    // Calculate available space
+    var minAllowed = Math.max(0, containerSize * ariaMin / 100);
+    var maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
+    // Constrain new position within bounds
+    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 onCollapseKeyDown = function onCollapseKeyDown(e, type) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onCollapse(index, type);
+    }
+  };
+  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];
+      // 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]);
+  var transformStyle = _defineProperty({}, varName('bar-preview-offset'), "".concat(constrainedOffset, "px"));
+  // ======================== Render ========================
+  var _React$useMemo = React.useMemo(function () {
+      var startIcon = null;
+      var endIcon = null;
+      var startCustomize = (collapsibleIcon === null || collapsibleIcon === void 0 ? void 0 : collapsibleIcon.start) !== undefined;
+      var endCustomize = (collapsibleIcon === null || collapsibleIcon === void 0 ? void 0 : collapsibleIcon.end) !== undefined;
+      if (vertical) {
+        startIcon = startCustomize ? collapsibleIcon.start : /*#__PURE__*/React.createElement(UpOutlined, null);
+        endIcon = endCustomize ? collapsibleIcon.end : /*#__PURE__*/React.createElement(DownOutlined, null);
+      } else {
+        startIcon = startCustomize ? collapsibleIcon.start : /*#__PURE__*/React.createElement(LeftOutlined, null);
+        endIcon = endCustomize ? collapsibleIcon.end : /*#__PURE__*/React.createElement(RightOutlined, null);
+      }
+      return [startIcon, endIcon, startCustomize, endCustomize];
+    }, [collapsibleIcon, vertical]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 4),
+    startIcon = _React$useMemo2[0],
+    endIcon = _React$useMemo2[1],
+    startCustomize = _React$useMemo2[2],
+    endCustomize = _React$useMemo2[3];
+  return /*#__PURE__*/React.createElement("div", {
+    className: splitBarPrefixCls
+  }, lazy && (/*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(splitBarPrefixCls, "-preview"), _defineProperty({}, "".concat(splitBarPrefixCls, "-preview-active"), !!constrainedOffset)),
+    style: transformStyle
+  })), /*#__PURE__*/React.createElement("div", {
+    style: draggerStyle === null || draggerStyle === void 0 ? void 0 : draggerStyle.default,
+    className: clsx("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active), "".concat(splitBarPrefixCls, "-dragger-customize"), draggerIcon !== undefined), draggerClassName === null || draggerClassName === void 0 ? void 0 : draggerClassName.default, active && (draggerClassName === null || draggerClassName === void 0 ? void 0 : draggerClassName.active)),
+    onMouseDown: onMouseDown,
+    onTouchStart: onTouchStart,
+    onDoubleClick: function onDoubleClick() {
+      return onDraggerDoubleClick === null || onDraggerDoubleClick === void 0 ? void 0 : onDraggerDoubleClick(index);
+    },
+    role: "separator",
+    "aria-disabled": !resizable,
+    "aria-orientation": vertical ? 'horizontal' : 'vertical',
+    "aria-valuenow": getValidNumber(ariaNow),
+    "aria-valuemin": getValidNumber(ariaMin),
+    "aria-valuemax": getValidNumber(ariaMax)
+  }, draggerIcon !== undefined ? (/*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(splitBarPrefixCls, "-dragger-icon"))
+  }, draggerIcon)) : null), startCollapsible && (/*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-start"), _defineProperty({}, "".concat(splitBarPrefixCls, "-collapse-bar-customize"), startCustomize), getVisibilityClass(showStartCollapsibleIcon)),
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "Toggle start panel",
+    onClick: function onClick() {
+      return onCollapse(index, 'start');
+    },
+    onKeyDown: function onKeyDown(e) {
+      return onCollapseKeyDown(e, 'start');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-start"))
+  }, startIcon))), endCollapsible && (/*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-end"), _defineProperty({}, "".concat(splitBarPrefixCls, "-collapse-bar-customize"), endCustomize), getVisibilityClass(showEndCollapsibleIcon)),
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "Toggle end panel",
+    onClick: function onClick() {
+      return onCollapse(index, 'end');
+    },
+    onKeyDown: function onKeyDown(e) {
+      return onCollapseKeyDown(e, 'end');
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: clsx("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-end"))
+  }, endIcon))));
+};
+export default SplitBar;

package/es/splitter/Splitter.d.ts

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

package/es/splitter/Splitter.js

@@ -0,0 +1,247 @@
+"use client";
+
+/* eslint-disable react/no-array-index-key */
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import ResizeObserver from '@rc-component/resize-observer';
+import { useEvent } from '@rc-component/util';
+import { clsx } from 'clsx';
+import { useOrientation } from '../_util/hooks/index.js';
+import { useMergeSemantic, useSemanticRootStyle } from '../_util/hooks/useMergeSemantic/index.js';
+import { isNumber } from '../_util/is.js';
+import { devUseWarning } from '../_util/warning.js';
+import { useComponentConfig } from '../config-provider/context.js';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls.js';
+import useItems from './hooks/useItems.js';
+import useResizable from './hooks/useResizable.js';
+import useResize from './hooks/useResize.js';
+import useSizes from './hooks/useSizes.js';
+import { InternalPanel } from './Panel.js';
+import SplitBar from './SplitBar.js';
+import useStyle from './style/index.js';
+var Splitter = function Splitter(props) {
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    classNames = props.classNames,
+    collapsible = props.collapsible,
+    style = props.style,
+    styles = props.styles,
+    layout = props.layout,
+    orientation = props.orientation,
+    vertical = props.vertical,
+    children = props.children,
+    destroyOnHidden = props.destroyOnHidden,
+    draggerIcon = props.draggerIcon,
+    collapsibleIcon = props.collapsibleIcon,
+    rootClassName = props.rootClassName,
+    onDraggerDoubleClick = props.onDraggerDoubleClick,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd,
+    lazy = props.lazy;
+  var _useComponentConfig = useComponentConfig('splitter'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    direction = _useComponentConfig.direction,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style,
+    contextClassNames = _useComponentConfig.classNames,
+    contextStyles = _useComponentConfig.styles;
+  var prefixCls = getPrefixCls('splitter', customizePrefixCls);
+  var rootPrefixCls = getPrefixCls();
+  var rootCls = useCSSVarCls(prefixCls);
+  var _useStyle = useStyle(prefixCls, rootCls),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    hashId = _useStyle2[0],
+    cssVarCls = _useStyle2[1];
+  // ======================== Direct ========================
+  var _useOrientation = useOrientation(orientation, vertical, layout),
+    _useOrientation2 = _slicedToArray(_useOrientation, 2),
+    mergedOrientation = _useOrientation2[0],
+    isVertical = _useOrientation2[1];
+  var isRTL = direction === 'rtl';
+  var reverse = !isVertical && isRTL;
+  // ====================== Items Data ======================
+  var items = useItems(children);
+  // >>> Warning for uncontrolled
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = devUseWarning('Splitter');
+    var existSize = items.some(function (item) {
+      return item.size !== undefined;
+    });
+    var existUndefinedSize = items.some(function (item) {
+      return item.size === undefined;
+    });
+    if (existSize && existUndefinedSize && !onResize) {
+      process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'When part of `Splitter.Panel` has `size`, `onResize` is required or change `size` to `defaultSize`.') : void 0;
+    }
+    warning.deprecated(!layout, 'layout', 'orientation');
+    warning.deprecated(!collapsibleIcon, 'collapsibleIcon', 'collapsible.icon');
+  }
+  // ====================== 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;
+    // Skip when container has no size, Such as nested in a hidden tab panel
+    // to fix: https://github.com/ant-design/ant-design/issues/51106
+    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, reverse);
+  var _useResize = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes, reverse),
+    _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 _props$onCollapse;
+    var nextSizes = onCollapse(index, type);
+    onResize === null || onResize === void 0 || onResize(nextSizes);
+    onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd(nextSizes);
+    var collapsed = nextSizes.map(function (size) {
+      return Math.abs(size) < Number.EPSILON;
+    });
+    (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, collapsed, nextSizes);
+  });
+  // =========== Merged Props for Semantic ==========
+  var mergedProps = _objectSpread(_objectSpread({}, props), {}, {
+    vertical: isVertical,
+    orientation: mergedOrientation
+  });
+  // ======================== Styles ========================
+  var contextStyleRoot = useSemanticRootStyle(contextStyle);
+  var styleRoot = useSemanticRootStyle(style);
+  var _useMergeSemantic = useMergeSemantic([contextClassNames, classNames], [contextStyles, contextStyleRoot, styles, styleRoot], {
+      props: mergedProps
+    }, {
+      // Convert `classNames.dragger: 'a'` to
+      // `classNames.dragger: { default: 'a' }`
+      dragger: {
+        _default: 'default'
+      }
+    }),
+    _useMergeSemantic2 = _slicedToArray(_useMergeSemantic, 2),
+    mergedClassNames = _useMergeSemantic2[0],
+    mergedStyles = _useMergeSemantic2[1];
+  var containerClassName = clsx(prefixCls, className, "".concat(prefixCls, "-").concat(mergedOrientation), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName, mergedClassNames.root, contextClassName, cssVarCls, rootCls, hashId);
+  // ======================== Render ========================
+  var maskCls = "".concat(prefixCls, "-mask");
+  var stackSizes = React.useMemo(function () {
+    var mergedSizes = [];
+    var stack = 0;
+    var len = items.length;
+    for (var i = 0; i < len; i += 1) {
+      stack += itemPtgSizes[i];
+      mergedSizes.push(stack);
+    }
+    return mergedSizes;
+  }, [itemPtgSizes, items.length]);
+  return /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: onContainerResize
+  }, /*#__PURE__*/React.createElement("div", {
+    style: mergedStyles.root,
+    className: containerClassName
+  }, items.map(function (item, idx) {
+    var _item$destroyOnHidden;
+    var panelProps = _objectSpread(_objectSpread({}, item), {}, {
+      className: clsx(mergedClassNames.panel, item.className),
+      style: _objectSpread(_objectSpread({}, mergedStyles.panel), item.style)
+    });
+    var panel = /*#__PURE__*/React.createElement(InternalPanel, _objectSpread(_objectSpread({}, panelProps), {}, {
+      prefixCls: prefixCls,
+      size: panelSizes[idx],
+      supportMotion: (collapsible === null || collapsible === void 0 ? void 0 : collapsible.motion) && movingIndex === undefined,
+      destroyOnHidden: (_item$destroyOnHidden = item.destroyOnHidden) !== null && _item$destroyOnHidden !== void 0 ? _item$destroyOnHidden : destroyOnHidden
+    }));
+    // 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,
+        rootPrefixCls: rootPrefixCls,
+        vertical: isVertical,
+        resizable: resizableInfo.resizable,
+        draggerStyle: mergedStyles.dragger,
+        draggerClassName: mergedClassNames.dragger,
+        draggerIcon: draggerIcon,
+        collapsibleIcon: (collapsible === null || collapsible === void 0 ? void 0 : collapsible.icon) || collapsibleIcon,
+        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,
+        onDraggerDoubleClick: onDraggerDoubleClick,
+        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);
+  }), isNumber(movingIndex) && (/*#__PURE__*/React.createElement("div", {
+    "aria-hidden": true,
+    className: clsx(maskCls, "".concat(maskCls, "-").concat(mergedOrientation))
+  }))));
+};
+if (process.env.NODE_ENV !== 'production') {
+  Splitter.displayName = 'Splitter';
+}
+export default Splitter;

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

@@ -0,0 +1,79 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+export function autoPtgSizes(ptgSizes, minPtgSizes, maxPtgSizes) {
+  // Static current data
+  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 all sizes are defined but don't sum to 1, scale them.
+  if (ptgSizes.length && !undefinedIndexes.length && currentTotalPtg !== 1) {
+    // Handle the case when all sizes are 0
+    if (currentTotalPtg === 0) {
+      var avg = 1 / ptgSizes.length;
+      return ptgSizes.map(function () {
+        return avg;
+      });
+    }
+    var scale = 1 / currentTotalPtg;
+    // We know `size` is a number here because undefinedIndexes is empty.
+    return ptgSizes.map(function (size) {
+      return size * scale;
+    });
+  }
+  // Fill if exceed
+  if (restPtg < 0) {
+    var _scale = 1 / currentTotalPtg;
+    return ptgSizes.map(function (size) {
+      return size === undefined ? 0 : size * _scale;
+    });
+  }
+  // Check if limit exists
+  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);
+  }
+  // Impossible case, just average fill
+  if (sumMin > 1 && sumMax < 1) {
+    var _avg = 1 / undefinedCount;
+    return ptgSizes.map(function (size) {
+      return size === undefined ? _avg : size;
+    });
+  }
+  // Quickly fill if can
+  var restAvg = restPtg / undefinedCount;
+  if (limitMin <= restAvg && restAvg <= limitMax) {
+    return ptgSizes.map(function (size) {
+      return size === undefined ? restAvg : size;
+    });
+  }
+  // Greedy algorithm
+  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/es/splitter/hooks/useItems.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { PanelProps } from '../interface';
+export 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/es/splitter/hooks/useItems.js

@@ -0,0 +1,38 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["collapsible"];
+import * as React from 'react';
+import { toArray } from '@rc-component/util';
+import { isPlainObject } from '../../_util/is.js';
+function getCollapsible(collapsible) {
+  if (isPlainObject(collapsible)) {
+    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;

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

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