@dtjoy/dt-design 1.0.1 → 1.0.3

package/lib/splitter/SplitBar.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@ant-design/icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+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 getValidNumber(num) {
+  return typeof num === 'number' && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
+}
+const SplitBar = props => {
+  const {
+    prefixCls,
+    vertical,
+    index,
+    active,
+    ariaNow,
+    ariaMin,
+    ariaMax,
+    resizable,
+    startCollapsible,
+    endCollapsible,
+    onOffsetStart,
+    onOffsetUpdate,
+    onOffsetEnd,
+    onCollapse,
+    lazy,
+    containerSize,
+    showStartCollapsibleIcon,
+    showEndCollapsibleIcon
+  } = props;
+  const splitBarPrefixCls = `${prefixCls}-bar`;
+  const [startPos, setStartPos] = (0, _react.useState)(null);
+  const [constrainedOffset, setConstrainedOffset] = (0, _react.useState)(0);
+  const constrainedOffsetX = vertical ? 0 : constrainedOffset;
+  const constrainedOffsetY = vertical ? constrainedOffset : 0;
+  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);
+    }
+  };
+  const getConstrainedOffset = rawOffset => {
+    const currentPos = containerSize * ariaNow / 100;
+    const newPos = currentPos + rawOffset;
+    const minAllowed = Math.max(0, containerSize * ariaMin / 100);
+    const maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
+    const clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
+    return clampedPos - currentPos;
+  };
+  const handleLazyMove = (0, _useEvent.default)((offsetX, offsetY) => {
+    const constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
+    setConstrainedOffset(constrainedOffsetValue);
+  });
+  const handleLazyEnd = (0, _useEvent.default)(() => {
+    onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
+    setConstrainedOffset(0);
+    onOffsetEnd(true);
+  });
+  const getVisibilityClass = mode => {
+    switch (mode) {
+      case true:
+        return `${splitBarPrefixCls}-collapse-bar-always-visible`;
+      case false:
+        return `${splitBarPrefixCls}-collapse-bar-always-hidden`;
+      case 'auto':
+        return `${splitBarPrefixCls}-collapse-bar-hover-only`;
+    }
+  };
+  (0, _useLayoutEffect.default)(() => {
+    if (!startPos) {
+      return;
+    }
+    const onMouseMove = e => {
+      const {
+        pageX,
+        pageY
+      } = e;
+      const offsetX = pageX - startPos[0];
+      const offsetY = pageY - startPos[1];
+      if (lazy) {
+        handleLazyMove(offsetX, offsetY);
+      } else {
+        onOffsetUpdate(index, offsetX, offsetY);
+      }
+    };
+    const onMouseUp = () => {
+      if (lazy) {
+        handleLazyEnd();
+      } else {
+        onOffsetEnd();
+      }
+      setStartPos(null);
+    };
+    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];
+        if (lazy) {
+          handleLazyMove(offsetX, offsetY);
+        } else {
+          onOffsetUpdate(index, offsetX, offsetY);
+        }
+      }
+    };
+    const handleTouchEnd = () => {
+      if (lazy) {
+        handleLazyEnd();
+      } else {
+        onOffsetEnd();
+      }
+      setStartPos(null);
+    };
+    const eventHandlerMap = {
+      mousemove: onMouseMove,
+      mouseup: onMouseUp,
+      touchmove: handleTouchMove,
+      touchend: handleTouchEnd
+    };
+    for (const [event, handler] of Object.entries(eventHandlerMap)) {
+      window.addEventListener(event, handler);
+    }
+    return () => {
+      for (const [event, handler] of Object.entries(eventHandlerMap)) {
+        window.removeEventListener(event, handler);
+      }
+    };
+  }, [startPos, index, lazy]);
+  const transformStyle = {
+    [`--${splitBarPrefixCls}-preview-offset`]: `${constrainedOffset}px`
+  };
+  const StartIcon = vertical ? _icons.UpOutlined : _icons.LeftOutlined;
+  const EndIcon = vertical ? _icons.DownOutlined : _icons.RightOutlined;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: splitBarPrefixCls,
+    role: "separator",
+    "aria-valuenow": getValidNumber(ariaNow),
+    "aria-valuemin": getValidNumber(ariaMin),
+    "aria-valuemax": getValidNumber(ariaMax)
+  }, lazy && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-preview`, {
+      [`${splitBarPrefixCls}-preview-active`]: !!constrainedOffset
+    }),
+    style: transformStyle
+  }), /*#__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`, getVisibilityClass(showStartCollapsibleIcon)),
+    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`, getVisibilityClass(showEndCollapsibleIcon)),
+    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,5 @@
+import React from 'react';
+import type { SplitterProps } from './interface';
+import './style/index.less';
+declare const Splitter: React.FC<React.PropsWithChildren<SplitterProps>>;
+export default Splitter;

package/lib/splitter/Splitter.js

@@ -0,0 +1,186 @@
+"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/es/hooks/useEvent"));
+var _warning = _interopRequireDefault(require("rc-util/es/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); }
+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);
+  });
+  const containerClassName = (0, _classnames.default)(prefixCls, className, `${prefixCls}-${layout}`, {
+    [`${prefixCls}-rtl`]: isRTL
+  }, rootClassName);
+
+  // ======================== 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 = {
+    ...style
+  };
+  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]
+    }));
+    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];