ezr-antd 1.0.0

package/lib/splitter/SplitBar.js

@@ -0,0 +1,119 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
+var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
+var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
+var _UpOutlined = _interopRequireDefault(require("@ant-design/icons/UpOutlined"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function getValidNumber(num) {
+  return typeof num === 'number' && !Number.isNaN(num) ? Math.round(num) : 0;
+}
+const SplitBar = props => {
+  const {
+    prefixCls,
+    vertical,
+    index,
+    active,
+    ariaNow,
+    ariaMin,
+    ariaMax,
+    resizable,
+    startCollapsible,
+    endCollapsible,
+    onOffsetStart,
+    onOffsetUpdate,
+    onOffsetEnd,
+    onCollapse
+  } = props;
+  const splitBarPrefixCls = `${prefixCls}-bar`;
+  // ======================== Resize ========================
+  const [startPos, setStartPos] = (0, _react.useState)(null);
+  const onMouseDown = e => {
+    if (resizable && e.currentTarget) {
+      setStartPos([e.pageX, e.pageY]);
+      onOffsetStart(index);
+    }
+  };
+  const onTouchStart = e => {
+    if (resizable && e.touches.length === 1) {
+      const touch = e.touches[0];
+      setStartPos([touch.pageX, touch.pageY]);
+      onOffsetStart(index);
+    }
+  };
+  _react.default.useEffect(() => {
+    if (startPos) {
+      const onMouseMove = e => {
+        const {
+          pageX,
+          pageY
+        } = e;
+        const offsetX = pageX - startPos[0];
+        const offsetY = pageY - startPos[1];
+        onOffsetUpdate(index, offsetX, offsetY);
+      };
+      const onMouseUp = () => {
+        setStartPos(null);
+        onOffsetEnd();
+      };
+      const handleTouchMove = e => {
+        if (e.touches.length === 1) {
+          const touch = e.touches[0];
+          const offsetX = touch.pageX - startPos[0];
+          const offsetY = touch.pageY - startPos[1];
+          onOffsetUpdate(index, offsetX, offsetY);
+        }
+      };
+      const handleTouchEnd = () => {
+        setStartPos(null);
+        onOffsetEnd();
+      };
+      window.addEventListener('touchmove', handleTouchMove);
+      window.addEventListener('touchend', handleTouchEnd);
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+      return () => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+        window.removeEventListener('touchmove', handleTouchMove);
+        window.removeEventListener('touchend', handleTouchEnd);
+      };
+    }
+  }, [startPos]);
+  // ======================== Render ========================
+  const StartIcon = vertical ? _UpOutlined.default : _LeftOutlined.default;
+  const EndIcon = vertical ? _DownOutlined.default : _RightOutlined.default;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: splitBarPrefixCls,
+    role: "separator",
+    "aria-valuenow": getValidNumber(ariaNow),
+    "aria-valuemin": getValidNumber(ariaMin),
+    "aria-valuemax": getValidNumber(ariaMax)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-dragger`, {
+      [`${splitBarPrefixCls}-dragger-disabled`]: !resizable,
+      [`${splitBarPrefixCls}-dragger-active`]: active
+    }),
+    onMouseDown: onMouseDown,
+    onTouchStart: onTouchStart
+  }), startCollapsible && (/*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-bar`, `${splitBarPrefixCls}-collapse-bar-start`),
+    onClick: () => onCollapse(index, 'start')
+  }, /*#__PURE__*/_react.default.createElement(StartIcon, {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-icon`, `${splitBarPrefixCls}-collapse-start`)
+  }))), endCollapsible && (/*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-bar`, `${splitBarPrefixCls}-collapse-bar-end`),
+    onClick: () => onCollapse(index, 'end')
+  }, /*#__PURE__*/_react.default.createElement(EndIcon, {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-icon`, `${splitBarPrefixCls}-collapse-end`)
+  }))));
+};
+var _default = exports.default = SplitBar;

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

@@ -0,0 +1,174 @@
+"use strict";
+"use client";
+
+/* eslint-disable react/no-array-index-key */
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
+var _warning = require("../_util/warning");
+var _configProvider = require("../config-provider");
+var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
+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"));
+var _style = _interopRequireDefault(require("./style"));
+const Splitter = props => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    style,
+    layout = 'horizontal',
+    children,
+    rootClassName,
+    onResizeStart,
+    onResize,
+    onResizeEnd
+  } = props;
+  const {
+    getPrefixCls,
+    direction,
+    splitter
+  } = _react.default.useContext(_configProvider.ConfigContext);
+  const prefixCls = getPrefixCls('splitter', customizePrefixCls);
+  const rootCls = (0, _useCSSVarCls.default)(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
+  // ======================== Direct ========================
+  const isVertical = layout === 'vertical';
+  const isRTL = direction === 'rtl';
+  const reverse = !isVertical && isRTL;
+  // ====================== Items Data ======================
+  const items = (0, _useItems.default)(children);
+  // >>> Warning for uncontrolled
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = (0, _warning.devUseWarning)('Splitter');
+    let existSize = false;
+    let existUndefinedSize = false;
+    items.forEach(item => {
+      if (item.size !== undefined) {
+        existSize = true;
+      } else {
+        existUndefinedSize = true;
+      }
+    });
+    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;
+    }
+  }
+  // ====================== Container =======================
+  const [containerSize, setContainerSize] = (0, _react.useState)();
+  const onContainerResize = size => {
+    const {
+      offsetWidth,
+      offsetHeight
+    } = size;
+    const 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 =========================
+  const [panelSizes, itemPxSizes, itemPtgSizes, itemPtgMinSizes, itemPtgMaxSizes, updateSizes] = (0, _useSizes.default)(items, containerSize);
+  // ====================== Resizable =======================
+  const resizableInfos = (0, _useResizable.default)(items, itemPxSizes);
+  const [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex] = (0, _useResize.default)(items, resizableInfos, itemPtgSizes, containerSize, updateSizes);
+  // ======================== Events ========================
+  const onInternalResizeStart = (0, _useEvent.default)(index => {
+    onOffsetStart(index);
+    onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(itemPxSizes);
+  });
+  const onInternalResizeUpdate = (0, _useEvent.default)((index, offset) => {
+    const nextSizes = onOffsetUpdate(index, offset);
+    onResize === null || onResize === void 0 ? void 0 : onResize(nextSizes);
+  });
+  const onInternalResizeEnd = (0, _useEvent.default)(() => {
+    onOffsetEnd();
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(itemPxSizes);
+  });
+  const onInternalCollapse = (0, _useEvent.default)((index, type) => {
+    const nextSizes = onCollapse(index, type);
+    onResize === null || onResize === void 0 ? void 0 : onResize(nextSizes);
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd(nextSizes);
+  });
+  // ======================== Styles ========================
+  const containerClassName = (0, _classnames.default)(prefixCls, className, `${prefixCls}-${layout}`, {
+    [`${prefixCls}-rtl`]: isRTL
+  }, rootClassName, splitter === null || splitter === void 0 ? void 0 : splitter.className, 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]);
+  const mergedStyle = Object.assign(Object.assign({}, splitter === null || splitter === void 0 ? void 0 : splitter.style), style);
+  return wrapCSSVar(/*#__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, Object.assign({}, 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, {
+        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: (index, offsetX, offsetY) => {
+          let offset = isVertical ? offsetY : offsetX;
+          if (reverse) {
+            offset = -offset;
+          }
+          onInternalResizeUpdate(index, offset);
+        },
+        onOffsetEnd: onInternalResizeEnd,
+        onCollapse: onInternalCollapse
+      });
+    }
+    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/useItems.d.ts

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

package/lib/splitter/hooks/useItems.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useItems;
+var React = _interopRequireWildcard(require("react"));
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+function getCollapsible(collapsible) {
+  if (collapsible && typeof collapsible === 'object') {
+    return collapsible;
+  }
+  const mergedCollapsible = !!collapsible;
+  return {
+    start: mergedCollapsible,
+    end: mergedCollapsible
+  };
+}
+/**
+ * Convert `children` into `items`.
+ */
+function useItems(children) {
+  const items = React.useMemo(() => (0, _toArray.default)(children).filter(React.isValidElement).map(node => {
+    const {
+      props
+    } = node;
+    const {
+        collapsible
+      } = props,
+      restProps = __rest(props, ["collapsible"]);
+    return Object.assign(Object.assign({}, restProps), {
+      collapsible: getCollapsible(collapsible)
+    });
+  }), [children]);
+  return items;
+}

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

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

package/lib/splitter/hooks/useResizable.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useResizable;
+var React = _interopRequireWildcard(require("react"));
+function useResizable(items, pxSizes) {
+  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 startCollapsible =
+      // Self is collapsible
+      prevCollapsible.end && prevSize > 0 ||
+      // Collapsed and can be collapsed
+      nextCollapsible.start && nextSize === 0 && prevSize > 0;
+      const 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/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): 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,125 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useResize;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var React = _interopRequireWildcard(require("react"));
+var _useSizes = require("./useSizes");
+/**
+ * Handle user drag resize logic.
+ */
+function useResize(items, resizableInfos, percentSizes, containerSize, updateSizes) {
+  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 !== null && str !== void 0 ? str : defaultLimit;
+  }
+  // Real px sizes
+  const [cacheSizes, setCacheSizes] = React.useState([]);
+  /**
+   * 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) => {
+    var _a;
+    // 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 = (_a = confirmedIndex !== null && confirmedIndex !== void 0 ? confirmedIndex : movingIndex === null || movingIndex === void 0 ? void 0 : movingIndex.index) !== null && _a !== void 0 ? _a : index;
+    const numSizes = (0, _toConsumableArray2.default)(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 currentIndex = type === 'start' ? index : index + 1;
+    const targetIndex = type === '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;
+    } 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 = (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/splitter/hooks/useSizes.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { PanelProps } from '../interface';
+export declare function getPtg(str: string): number;
+/**
+ * Save the size state.
+ * Align the size into flex percentage base.
+ */
+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,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSizes;
+exports.getPtg = getPtg;
+var _react = _interopRequireDefault(require("react"));
+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.
+ */
+function useSizes(items, containerSize) {
+  const propSizes = items.map(item => item.size);
+  const itemsCount = items.length;
+  const mergedContainerSize = containerSize || 0;
+  const ptg2px = ptg => ptg * mergedContainerSize;
+  // We do not need care the size state match the `items` length in `useState`.
+  // It will calculate later.
+  const [innerSizes, setInnerSizes] = _react.default.useState(() => items.map(item => item.defaultSize));
+  const sizes = _react.default.useMemo(() => {
+    var _a;
+    const mergedSizes = [];
+    for (let i = 0; i < itemsCount; i += 1) {
+      mergedSizes[i] = (_a = propSizes[i]) !== null && _a !== void 0 ? _a : 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.
+  const postPercentSizes = _react.default.useMemo(() => {
+    let ptgList = [];
+    let emptyCount = 0;
+    // Fill default percentage
+    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 {
+        emptyCount += 1;
+        ptgList[i] = undefined;
+      }
+    }
+    const totalPtg = ptgList.reduce((acc, ptg) => acc + (ptg || 0), 0);
+    if (totalPtg > 1 || !emptyCount) {
+      // If total percentage is larger than 1, we will scale it down.
+      const scale = 1 / totalPtg;
+      ptgList = ptgList.map(ptg => ptg === undefined ? 0 : ptg * scale);
+    } else {
+      // If total percentage is smaller than 1, we will fill the rest.
+      const avgRest = (1 - totalPtg) / emptyCount;
+      ptgList = ptgList.map(ptg => ptg === undefined ? avgRest : ptg);
+    }
+    return ptgList;
+  }, [sizes, mergedContainerSize]);
+  const postPxSizes = _react.default.useMemo(() => postPercentSizes.map(ptg2px), [postPercentSizes, mergedContainerSize]);
+  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]);
+  // If ssr, we will use the size from developer config first.
+  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';
+type CompoundedComponent = typeof SplitterComp & {
+    Panel: typeof Panel;
+};
+declare const Splitter: CompoundedComponent;
+export default Splitter;

package/lib/splitter/index.js

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _Splitter = _interopRequireDefault(require("./Splitter"));
+const Splitter = _Splitter.default;
+Splitter.Panel = _Panel.default;
+var _default = exports.default = Splitter;