@chaoswise/ui 3.0.23 → 3.1.0

package/lib/Antd5/splitter/Splitter.js

@@ -0,0 +1,194 @@
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+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 useStyle from './style';
+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;
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls,
+    direction = _React$useContext.direction,
+    splitter = _React$useContext.splitter;
+  var prefixCls = getPrefixCls('splitter', customizePrefixCls);
+  var rootCls = useCSSVarCls(prefixCls);
+  var _useStyle = useStyle(prefixCls, rootCls),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  // ======================== Direct ========================
+  var isVertical = layout === 'vertical';
+  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 = false;
+    var existUndefinedSize = false;
+    items.forEach(function (item) {
+      if (item.size !== undefined) {
+        existSize = true;
+      } else {
+        existUndefinedSize = true;
+      }
+    });
+    if (existSize && existUndefinedSize && !onResize) {
+      warning(false, 'usage', '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;
+    // 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);
+  var _useResize = useResize(items, resizableInfos, itemPtgSizes, containerSize, updateSizes),
+    _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) {
+    var nextSizes = onOffsetUpdate(index, offset);
+    onResize === null || onResize === void 0 || onResize(nextSizes);
+  });
+  var onInternalResizeEnd = useEvent(function () {
+    onOffsetEnd();
+    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 ========================
+  var containerClassName = classNames(prefixCls, className, "".concat(prefixCls, "-").concat(layout), _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), rootClassName, splitter === null || splitter === void 0 ? void 0 : splitter.className, 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]);
+  var mergedStyle = _objectSpread(_objectSpread({}, splitter === null || splitter === void 0 ? void 0 : splitter.style), style);
+  return wrapCSSVar(_jsx(ResizeObserver, {
+    onResize: onContainerResize,
+    children: _jsxs("div", {
+      style: mergedStyle,
+      className: containerClassName,
+      children: [items.map(function (item, idx) {
+        // Panel
+        var panel = _jsx(InternalPanel, _objectSpread(_objectSpread({}, 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 = _jsx(SplitBar, {
+            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,
+            onOffsetStart: onInternalResizeStart,
+            onOffsetUpdate: function onOffsetUpdate(index, offsetX, offsetY) {
+              var offset = isVertical ? offsetY : offsetX;
+              if (reverse) {
+                offset = -offset;
+              }
+              onInternalResizeUpdate(index, offset);
+            },
+            onOffsetEnd: onInternalResizeEnd,
+            onCollapse: onInternalCollapse
+          });
+        }
+        return _jsxs(React.Fragment, {
+          children: [panel, splitBar]
+        }, "split-panel-".concat(idx));
+      }), typeof movingIndex === 'number' && _jsx("div", {
+        "aria-hidden": true,
+        className: classNames(maskCls, "".concat(maskCls, "-").concat(layout))
+      })]
+    })
+  }));
+};
+if (process.env.NODE_ENV !== 'production') {
+  Splitter.displayName = 'Splitter';
+}
+export default Splitter;

package/lib/Antd5/{_util/transButton.js → splitter/hooks/useItems.js}

@@ -1,5 +1,4 @@
-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); }
-var _excluded = ["style", "noStyle", "disabled", "tabIndex"];
+var _excluded = ["collapsible"];
 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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -7,57 +6,32 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Wrap of sub component which need use as Button capacity (like Icon component).
- *
- * This helps accessibility reader to tread as a interactive button to operation.
- */
+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 KeyCode from 'rc-util/lib/KeyCode';
-var inlineStyle = {
-  border: 0,
-  background: 'transparent',
-  padding: 0,
-  lineHeight: 'inherit',
-  display: 'inline-block'
-};
-var TransButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var onKeyDown = function onKeyDown(event) {
-    var keyCode = event.keyCode;
-    if (keyCode === KeyCode.ENTER) {
-      event.preventDefault();
-    }
-  };
-  var onKeyUp = function onKeyUp(event) {
-    var keyCode = event.keyCode;
-    var onClick = props.onClick;
-    if (keyCode === KeyCode.ENTER && onClick) {
-      onClick();
-    }
-  };
-  var style = props.style,
-    noStyle = props.noStyle,
-    disabled = props.disabled,
-    _props$tabIndex = props.tabIndex,
-    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var mergedStyle = {};
-  if (!noStyle) {
-    mergedStyle = _objectSpread({}, inlineStyle);
-  }
-  if (disabled) {
-    mergedStyle.pointerEvents = 'none';
+import toArray from 'rc-util/lib/Children/toArray';
+function getCollapsible(collapsible) {
+  if (collapsible && _typeof(collapsible) === 'object') {
+    return collapsible;
   }
-  mergedStyle = _objectSpread(_objectSpread({}, mergedStyle), style);
-  return _jsx("div", _objectSpread(_objectSpread({
-    role: "button",
-    tabIndex: tabIndex,
-    ref: ref
-  }, restProps), {}, {
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    style: mergedStyle
-  }));
-});
-export default TransButton;
+  var mergedCollapsible = !!collapsible;
+  return {
+    start: mergedCollapsible,
+    end: mergedCollapsible
+  };
+}
+/**
+ * Convert `children` into `items`.
+ */
+export default function useItems(children) {
+  var items = React.useMemo(function () {
+    return toArray(children).filter(React.isValidElement).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;
+}

package/lib/Antd5/splitter/hooks/useResizable.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export default function useResizable(items, pxSizes) {
+  return React.useMemo(function () {
+    var resizeInfos = [];
+    for (var i = 0; i < items.length - 1; i += 1) {
+      var prevItem = items[i];
+      var nextItem = items[i + 1];
+      var prevSize = pxSizes[i];
+      var nextSize = pxSizes[i + 1];
+      var _prevItem$resizable = prevItem.resizable,
+        prevResizable = _prevItem$resizable === void 0 ? true : _prevItem$resizable,
+        prevMin = prevItem.min,
+        prevCollapsible = prevItem.collapsible;
+      var _nextItem$resizable = nextItem.resizable,
+        nextResizable = _nextItem$resizable === void 0 ? true : _nextItem$resizable,
+        nextMin = nextItem.min,
+        nextCollapsible = nextItem.collapsible;
+      var 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);
+      var startCollapsible =
+      // Self is collapsible
+      prevCollapsible.end && prevSize > 0 ||
+      // Collapsed and can be collapsed
+      nextCollapsible.start && nextSize === 0 && prevSize > 0;
+      var endCollapsible =
+      // Self is collapsible
+      nextCollapsible.start && nextSize > 0 ||
+      // Collapsed and can be collapsed
+      prevCollapsible.end && prevSize === 0 && nextSize > 0;
+      resizeInfos[i] = {
+        resizable: mergedResizable,
+        startCollapsible: !!startCollapsible,
+        endCollapsible: !!endCollapsible
+      };
+    }
+    return resizeInfos;
+  }, [pxSizes, items]);
+}

package/lib/Antd5/splitter/hooks/useResize.js

@@ -0,0 +1,138 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+import * as React from 'react';
+import { getPtg } from './useSizes';
+/**
+ * Handle user drag resize logic.
+ */
+export default function useResize(items, resizableInfos, percentSizes, containerSize, updateSizes) {
+  var limitSizes = items.map(function (item) {
+    return [item.min, item.max];
+  });
+  var mergedContainerSize = containerSize || 0;
+  var ptg2px = function ptg2px(ptg) {
+    return ptg * mergedContainerSize;
+  };
+  // ======================== Resize ========================
+  function getLimitSize(str, defaultLimit) {
+    if (typeof str === 'string') {
+      return ptg2px(getPtg(str));
+    }
+    return str !== null && str !== void 0 ? str : defaultLimit;
+  }
+  // Real px sizes
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    cacheSizes = _React$useState2[0],
+    setCacheSizes = _React$useState2[1];
+  /**
+   * When start drag, check the direct is `start` or `end`.
+   * This will handle when 2 splitter bar are in the same position.
+   */
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    movingIndex = _React$useState4[0],
+    setMovingIndex = _React$useState4[1];
+  var getPxSizes = function getPxSizes() {
+    return percentSizes.map(ptg2px);
+  };
+  var onOffsetStart = function onOffsetStart(index) {
+    setCacheSizes(getPxSizes());
+    setMovingIndex({
+      index: index,
+      confirmed: false
+    });
+  };
+  var onOffsetUpdate = function onOffsetUpdate(index, offset) {
+    var _ref, _confirmedIndex;
+    // First time trigger move index update is not sync in the state
+    var 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: index,
+          confirmed: true
+        });
+      } else {
+        for (var i = index; i >= 0; i -= 1) {
+          if (cacheSizes[i] > 0 && resizableInfos[i].resizable) {
+            confirmedIndex = i;
+            setMovingIndex({
+              index: i,
+              confirmed: true
+            });
+            break;
+          }
+        }
+      }
+    }
+    var mergedIndex = (_ref = (_confirmedIndex = confirmedIndex) !== null && _confirmedIndex !== void 0 ? _confirmedIndex : movingIndex === null || movingIndex === void 0 ? void 0 : movingIndex.index) !== null && _ref !== void 0 ? _ref : index;
+    var numSizes = _toConsumableArray(cacheSizes);
+    var nextIndex = mergedIndex + 1;
+    // Get boundary
+    var startMinSize = getLimitSize(limitSizes[mergedIndex][0], 0);
+    var endMinSize = getLimitSize(limitSizes[nextIndex][0], 0);
+    var startMaxSize = getLimitSize(limitSizes[mergedIndex][1], mergedContainerSize);
+    var endMaxSize = getLimitSize(limitSizes[nextIndex][1], mergedContainerSize);
+    var 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;
+  };
+  var onOffsetEnd = function onOffsetEnd() {
+    setMovingIndex(null);
+  };
+  // ======================= Collapse =======================
+  var onCollapse = function onCollapse(index, type) {
+    var currentSizes = getPxSizes();
+    var currentIndex = type === 'start' ? index : index + 1;
+    var targetIndex = type === 'start' ? index + 1 : index;
+    var currentSize = currentSizes[currentIndex];
+    var targetSize = currentSizes[targetIndex];
+    if (currentSize !== 0 && targetSize !== 0) {
+      // Collapse directly
+      currentSizes[currentIndex] = 0;
+      currentSizes[targetIndex] += currentSize;
+    } else {
+      var totalSize = currentSize + targetSize;
+      var currentSizeMin = getLimitSize(limitSizes[currentIndex][0], 0);
+      var currentSizeMax = getLimitSize(limitSizes[currentIndex][1], mergedContainerSize);
+      var targetSizeMin = getLimitSize(limitSizes[targetIndex][0], 0);
+      var targetSizeMax = getLimitSize(limitSizes[targetIndex][1], mergedContainerSize);
+      var limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
+      var limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
+      var halfOffset = (limitEnd - limitStart) / 2;
+      currentSizes[currentIndex] -= halfOffset;
+      currentSizes[targetIndex] += halfOffset;
+    }
+    updateSizes(currentSizes);
+    return currentSizes;
+  };
+  return [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex === null || movingIndex === void 0 ? void 0 : movingIndex.index];
+}

package/lib/Antd5/splitter/hooks/useSizes.js

@@ -0,0 +1,109 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+export function getPtg(str) {
+  return Number(str.slice(0, -1)) / 100;
+}
+function isPtg(itemSize) {
+  return typeof itemSize === 'string' && itemSize.endsWith('%');
+}
+/**
+ * Save the size state.
+ * Align the size into flex percentage base.
+ */
+export default function useSizes(items, containerSize) {
+  var propSizes = items.map(function (item) {
+    return item.size;
+  });
+  var itemsCount = items.length;
+  var mergedContainerSize = containerSize || 0;
+  var ptg2px = function ptg2px(ptg) {
+    return ptg * mergedContainerSize;
+  };
+  // We do not need care the size state match the `items` length in `useState`.
+  // It will calculate later.
+  var _React$useState = React.useState(function () {
+      return items.map(function (item) {
+        return item.defaultSize;
+      });
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    innerSizes = _React$useState2[0],
+    setInnerSizes = _React$useState2[1];
+  var sizes = React.useMemo(function () {
+    var mergedSizes = [];
+    for (var i = 0; i < itemsCount; i += 1) {
+      var _propSizes$i;
+      mergedSizes[i] = (_propSizes$i = propSizes[i]) !== null && _propSizes$i !== void 0 ? _propSizes$i : innerSizes[i];
+    }
+    return mergedSizes;
+  }, [itemsCount, innerSizes, propSizes]);
+  // Post handle the size. Will do:
+  // 1. Convert all the px into percentage if not empty.
+  // 2. Get rest percentage for exist percentage.
+  // 3. Fill the rest percentage into empty item.
+  var postPercentSizes = React.useMemo(function () {
+    var ptgList = [];
+    var emptyCount = 0;
+    // Fill default percentage
+    for (var i = 0; i < itemsCount; i += 1) {
+      var itemSize = sizes[i];
+      if (isPtg(itemSize)) {
+        ptgList[i] = getPtg(itemSize);
+      } else if (itemSize || itemSize === 0) {
+        var num = Number(itemSize);
+        if (!Number.isNaN(num)) {
+          ptgList[i] = num / mergedContainerSize;
+        }
+      } else {
+        emptyCount += 1;
+        ptgList[i] = undefined;
+      }
+    }
+    var totalPtg = ptgList.reduce(function (acc, ptg) {
+      return acc + (ptg || 0);
+    }, 0);
+    if (totalPtg > 1 || !emptyCount) {
+      // If total percentage is larger than 1, we will scale it down.
+      var scale = 1 / totalPtg;
+      ptgList = ptgList.map(function (ptg) {
+        return ptg === undefined ? 0 : ptg * scale;
+      });
+    } else {
+      // If total percentage is smaller than 1, we will fill the rest.
+      var avgRest = (1 - totalPtg) / emptyCount;
+      ptgList = ptgList.map(function (ptg) {
+        return ptg === undefined ? avgRest : ptg;
+      });
+    }
+    return ptgList;
+  }, [sizes, mergedContainerSize]);
+  var postPxSizes = React.useMemo(function () {
+    return postPercentSizes.map(ptg2px);
+  }, [postPercentSizes, mergedContainerSize]);
+  var postPercentMinSizes = React.useMemo(function () {
+    return items.map(function (item) {
+      if (isPtg(item.min)) {
+        return getPtg(item.min);
+      }
+      return (item.min || 0) / mergedContainerSize;
+    });
+  }, [items, mergedContainerSize]);
+  var postPercentMaxSizes = React.useMemo(function () {
+    return items.map(function (item) {
+      if (isPtg(item.max)) {
+        return getPtg(item.max);
+      }
+      return (item.max || mergedContainerSize) / mergedContainerSize;
+    });
+  }, [items, mergedContainerSize]);
+  // If ssr, we will use the size from developer config first.
+  var panelSizes = React.useMemo(function () {
+    return containerSize ? postPxSizes : sizes;
+  }, [postPxSizes, containerSize]);
+  return [panelSizes, postPxSizes, postPercentSizes, postPercentMinSizes, postPercentMaxSizes, setInnerSizes];
+}

package/lib/Antd5/splitter/index.js

@@ -0,0 +1,5 @@
+import Panel from './Panel';
+import SplitterComp from './Splitter';
+var Splitter = SplitterComp;
+Splitter.Panel = Panel;
+export default Splitter;

package/lib/Antd5/splitter/interface.js

@@ -0,0 +1 @@
+export {};