@dtjoy/dt-design 1.1.1 → 1.1.5

package/lib/splitter/hooks/useResizable.js

@@ -1,12 +1,13 @@
 "use strict";
 
+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); }
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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) {
@@ -26,44 +27,43 @@ function getShowCollapsibleIcon(prev, next) {
   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 =
+  return React.useMemo(function () {
+    var resizeInfos = [];
+    for (var i = 0; i < items.length - 1; i += 1) {
+      var _prevCollapsible$icon, _prevCollapsible$icon2, _nextCollapsible$icon, _nextCollapsible$icon2;
+      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);
-      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({
+      var prevEndCollapsible = !!prevCollapsible.end && prevSize > 0;
+      var nextStartExpandable = !!nextCollapsible.start && nextSize === 0 && prevSize > 0;
+      var startCollapsible = prevEndCollapsible || nextStartExpandable;
+      var nextStartCollapsible = !!nextCollapsible.start && nextSize > 0;
+      var prevEndExpandable = !!prevCollapsible.end && prevSize === 0 && nextSize > 0;
+      var endCollapsible = nextStartCollapsible || prevEndExpandable;
+      var showStartCollapsibleIcon = getShowCollapsibleIcon({
         collapsible: prevEndCollapsible,
         showCollapsibleIcon: prevCollapsible.showCollapsibleIcon
       }, {
         collapsible: nextStartExpandable,
         showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
       });
-      const showEndCollapsibleIcon = getShowCollapsibleIcon({
+      var showEndCollapsibleIcon = getShowCollapsibleIcon({
         collapsible: nextStartCollapsible,
         showCollapsibleIcon: nextCollapsible.showCollapsibleIcon
       }, {
@@ -75,9 +75,11 @@ function useResizable(items, pxSizes, isRTL) {
         startCollapsible: !!(isRTL ? endCollapsible : startCollapsible),
         endCollapsible: !!(isRTL ? startCollapsible : endCollapsible),
         showStartCollapsibleIcon: isRTL ? showEndCollapsibleIcon : showStartCollapsibleIcon,
-        showEndCollapsibleIcon: isRTL ? showStartCollapsibleIcon : showEndCollapsibleIcon
+        showEndCollapsibleIcon: isRTL ? showStartCollapsibleIcon : showEndCollapsibleIcon,
+        startIcon: isRTL ? (_prevCollapsible$icon = prevCollapsible.icon) === null || _prevCollapsible$icon === void 0 ? void 0 : _prevCollapsible$icon.start : (_prevCollapsible$icon2 = prevCollapsible.icon) === null || _prevCollapsible$icon2 === void 0 ? void 0 : _prevCollapsible$icon2.end,
+        endIcon: isRTL ? (_nextCollapsible$icon = nextCollapsible.icon) === null || _nextCollapsible$icon === void 0 ? void 0 : _nextCollapsible$icon.end : (_nextCollapsible$icon2 = nextCollapsible.icon) === null || _nextCollapsible$icon2 === void 0 ? void 0 : _nextCollapsible$icon2.start
       };
     }
     return resizeInfos;
-  }, [pxSizes, items]);
+  }, [pxSizes, items, isRTL]);
 }

package/lib/splitter/hooks/useResize.js

@@ -1,49 +1,80 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useResize;
 var React = _interopRequireWildcard(require("react"));
 var _useSizes = require("./useSizes");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * Handle user drag resize logic.
  */
 function useResize(items, resizableInfos, percentSizes, containerSize, updateSizes, isRTL) {
-  const limitSizes = items.map(item => [item.min, item.max]);
-  const mergedContainerSize = containerSize || 0;
-  const ptg2px = ptg => ptg * mergedContainerSize;
+  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((0, _useSizes.getPtg)(str));
     }
-    return str ?? defaultLimit;
+    return str !== null && str !== void 0 ? str : defaultLimit;
   }
 
   // Real px sizes
-  const [cacheSizes, setCacheSizes] = React.useState([]);
-  const cacheCollapsedSize = React.useRef([]);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    cacheSizes = _React$useState2[0],
+    setCacheSizes = _React$useState2[1];
+  var cacheCollapsedSize = React.useRef([]);
 
   /**
    * When start drag, check the direct is `start` or `end`.
    * This will handle when 2 splitter bar are in the same position.
    */
-  const [movingIndex, setMovingIndex] = React.useState(null);
-  const getPxSizes = () => percentSizes.map(ptg2px);
-  const onOffsetStart = index => {
+  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: index,
       confirmed: false
     });
   };
-  const onOffsetUpdate = (index, offset) => {
+  var onOffsetUpdate = function onOffsetUpdate(index, offset) {
+    var _ref, _confirmedIndex;
     // First time trigger move index update is not sync in the state
-    let confirmedIndex = null;
+    var confirmedIndex = null;
+
+    // Drag offsets are cumulative from the drag start, so compute on the
+    // drag-start baseline (`cacheSizes`). Keyboard resize fires start/update
+    // synchronously and the seeded state is not committed yet (`movingIndex`
+    // is still null), so compute on the current sizes instead of an empty
+    // baseline which would produce NaN sizes.
+    var numSizes = movingIndex ? _toConsumableArray(cacheSizes) : getPxSizes();
 
     // We need to know what the real index is.
     if ((!movingIndex || !movingIndex.confirmed) && offset !== 0) {
@@ -51,12 +82,12 @@ function useResize(items, resizableInfos, percentSizes, containerSize, updateSiz
       if (offset > 0) {
         confirmedIndex = index;
         setMovingIndex({
-          index,
+          index: index,
           confirmed: true
         });
       } else {
-        for (let i = index; i >= 0; i -= 1) {
-          if (cacheSizes[i] > 0 && resizableInfos[i].resizable) {
+        for (var i = index; i >= 0; i -= 1) {
+          if (numSizes[i] > 0 && resizableInfos[i].resizable) {
             confirmedIndex = i;
             setMovingIndex({
               index: i,
@@ -67,16 +98,15 @@ function useResize(items, resizableInfos, percentSizes, containerSize, updateSiz
         }
       }
     }
-    const mergedIndex = confirmedIndex ?? movingIndex?.index ?? index;
-    const numSizes = [...cacheSizes];
-    const nextIndex = mergedIndex + 1;
+    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 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;
+    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) {
@@ -98,35 +128,36 @@ function useResize(items, resizableInfos, percentSizes, containerSize, updateSiz
     updateSizes(numSizes);
     return numSizes;
   };
-  const onOffsetEnd = () => {
+  var onOffsetEnd = function onOffsetEnd(nextSizes) {
     setMovingIndex(null);
+    return nextSizes;
   };
 
   // ======================= Collapse =======================
-  const onCollapse = (index, type) => {
-    const currentSizes = getPxSizes();
-    const adjustedType = isRTL ? type === 'start' ? 'end' : 'start' : type;
-    const currentIndex = adjustedType === 'start' ? index : index + 1;
-    const targetIndex = adjustedType === 'start' ? index + 1 : index;
-    const currentSize = currentSizes[currentIndex];
-    const targetSize = currentSizes[targetIndex];
+  var onCollapse = function onCollapse(index, type) {
+    var currentSizes = getPxSizes();
+    var adjustedType = isRTL ? type === 'start' ? 'end' : 'start' : type;
+    var currentIndex = adjustedType === 'start' ? index : index + 1;
+    var targetIndex = adjustedType === '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;
       cacheCollapsedSize.current[index] = currentSize;
     } else {
-      const totalSize = currentSize + targetSize;
-      const currentSizeMin = getLimitSize(limitSizes[currentIndex][0], 0);
-      const currentSizeMax = getLimitSize(limitSizes[currentIndex][1], mergedContainerSize);
-      const targetSizeMin = getLimitSize(limitSizes[targetIndex][0], 0);
-      const targetSizeMax = getLimitSize(limitSizes[targetIndex][1], mergedContainerSize);
-      const limitStart = Math.max(currentSizeMin, totalSize - targetSizeMax);
-      const limitEnd = Math.min(currentSizeMax, totalSize - targetSizeMin);
-      const halfOffset = targetSizeMin || (limitEnd - limitStart) / 2;
-      const targetCacheCollapsedSize = cacheCollapsedSize.current[index];
-      const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
-      const shouldUseCache = targetCacheCollapsedSize && targetCacheCollapsedSize <= targetSizeMax && targetCacheCollapsedSize >= targetSizeMin && currentCacheCollapsedSize <= currentSizeMax && currentCacheCollapsedSize >= currentSizeMin;
+      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 = targetSizeMin || (limitEnd - limitStart) / 2;
+      var targetCacheCollapsedSize = cacheCollapsedSize.current[index];
+      var currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
+      var shouldUseCache = targetCacheCollapsedSize && targetCacheCollapsedSize <= targetSizeMax && targetCacheCollapsedSize >= targetSizeMin && currentCacheCollapsedSize <= currentSizeMax && currentCacheCollapsedSize >= currentSizeMin;
       if (shouldUseCache) {
         currentSizes[targetIndex] = targetCacheCollapsedSize;
         currentSizes[currentIndex] = currentCacheCollapsedSize;
@@ -138,5 +169,5 @@ function useResize(items, resizableInfos, percentSizes, containerSize, updateSiz
     updateSizes(currentSizes);
     return currentSizes;
   };
-  return [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex?.index];
+  return [onOffsetStart, onOffsetUpdate, onOffsetEnd, onCollapse, movingIndex === null || movingIndex === void 0 ? void 0 : movingIndex.index];
 }

package/lib/splitter/hooks/useSizes.js

@@ -6,8 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = useSizes;
 exports.getPtg = getPtg;
 var _react = _interopRequireDefault(require("react"));
+var _is = require("../../_util/is");
 var _sizeUtil = require("./sizeUtil");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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(arr) { if (Array.isArray(arr)) return arr; }
 function getPtg(str) {
   return Number(str.slice(0, -1)) / 100;
 }
@@ -15,38 +22,52 @@ function isPtg(itemSize) {
   return typeof itemSize === 'string' && itemSize.endsWith('%');
 }
 function useSizes(items, containerSize) {
-  const propSizes = items.map(item => item.size);
-  const itemsCount = items.length;
-  const mergedContainerSize = containerSize || 0;
-  const ptg2px = ptg => ptg * mergedContainerSize;
-  const [innerSizes, setInnerSizes] = _react.default.useState(() => items.map(item => item.defaultSize));
-  const sizes = _react.default.useMemo(() => {
-    const mergedSizes = [];
-    for (let i = 0; i < itemsCount; i += 1) {
-      mergedSizes[i] = propSizes[i] ?? innerSizes[i];
-    }
-    return mergedSizes;
+  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;
+  };
+  var _React$useState = _react.default.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.default.useMemo(function () {
+    // If any panel has a controlled `size`, use only prop sizes.
+    // Undefined panels will be auto-filled by autoPtgSizes.
+    // Otherwise, use innerSizes for fully uncontrolled mode.
+    return propSizes.some(_is.isNonNullable) ? propSizes : innerSizes;
   }, [itemsCount, innerSizes, propSizes]);
-  const postPercentMinSizes = _react.default.useMemo(() => items.map(item => {
-    if (isPtg(item.min)) {
-      return getPtg(item.min);
-    }
-    return (item.min || 0) / mergedContainerSize;
-  }), [items, mergedContainerSize]);
-  const postPercentMaxSizes = _react.default.useMemo(() => items.map(item => {
-    if (isPtg(item.max)) {
-      return getPtg(item.max);
-    }
-    return (item.max || mergedContainerSize) / mergedContainerSize;
-  }), [items, mergedContainerSize]);
-  const postPercentSizes = _react.default.useMemo(() => {
-    const ptgList = [];
-    for (let i = 0; i < itemsCount; i += 1) {
-      const itemSize = sizes[i];
+  var postPercentMinSizes = _react.default.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.default.useMemo(function () {
+    return items.map(function (item) {
+      if (isPtg(item.max)) {
+        return getPtg(item.max);
+      }
+      return (item.max || mergedContainerSize) / mergedContainerSize;
+    });
+  }, [items, mergedContainerSize]);
+  var postPercentSizes = _react.default.useMemo(function () {
+    var ptgList = [];
+    for (var i = 0; i < itemsCount; i += 1) {
+      var itemSize = sizes[i];
       if (isPtg(itemSize)) {
         ptgList[i] = getPtg(itemSize);
       } else if (itemSize || itemSize === 0) {
-        const num = Number(itemSize);
+        var num = Number(itemSize);
         if (!Number.isNaN(num)) {
           ptgList[i] = num / mergedContainerSize;
         }
@@ -56,7 +77,11 @@ function useSizes(items, containerSize) {
     }
     return (0, _sizeUtil.autoPtgSizes)(ptgList, postPercentMinSizes, postPercentMaxSizes);
   }, [itemsCount, sizes, mergedContainerSize, postPercentMinSizes, postPercentMaxSizes]);
-  const postPxSizes = _react.default.useMemo(() => postPercentSizes.map(ptg2px), [postPercentSizes, mergedContainerSize]);
-  const panelSizes = _react.default.useMemo(() => containerSize ? postPxSizes : sizes, [postPxSizes, sizes, containerSize]);
+  var postPxSizes = _react.default.useMemo(function () {
+    return postPercentSizes.map(ptg2px);
+  }, [postPercentSizes, mergedContainerSize]);
+  var panelSizes = _react.default.useMemo(function () {
+    return containerSize ? postPxSizes : sizes;
+  }, [postPxSizes, sizes, containerSize]);
   return [panelSizes, postPxSizes, postPercentSizes, postPercentMinSizes, postPercentMaxSizes, setInnerSizes];
 }

package/lib/splitter/index.js

@@ -7,6 +7,6 @@ exports.default = void 0;
 var _Panel = _interopRequireDefault(require("./Panel"));
 var _Splitter = _interopRequireDefault(require("./Splitter"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Splitter = _Splitter.default;
+var Splitter = _Splitter.default;
 Splitter.Panel = _Panel.default;
 var _default = exports.default = Splitter;