primereact 8.6.0 → 8.7.0

package/splitter/splitter.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var utils = require('primereact/utils');
 var hooks = require('primereact/hooks');
+var utils = require('primereact/utils');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -43,6 +43,21 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
 
@@ -78,6 +93,10 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function _readOnlyError(name) {
+  throw new TypeError("\"" + name + "\" is read-only");
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -120,6 +139,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SplitterPanel = function SplitterPanel() {};
 var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var elementRef = React__namespace.useRef(null);
@@ -131,11 +153,22 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var prevPanelElement = React__namespace.useRef(null);
   var nextPanelElement = React__namespace.useRef(null);
   var prevPanelSize = React__namespace.useRef(null);
+  var prevPanelSizeNew = React__namespace.useRef(null);
   var nextPanelSize = React__namespace.useRef(null);
+  var nextPanelSizeNew = React__namespace.useRef(null);
   var prevPanelIndex = React__namespace.useRef(null);
-  var panelSizes = React__namespace.useRef(null);
-  var mounted = React__namespace.useRef(false);
+
+  var _React$useState = React__namespace.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      panelSizes = _React$useState2[0],
+      setPanelSizes = _React$useState2[1];
+
   var isStateful = props.stateKey != null;
+  var childrenLength = props.children && props.children.length;
+
+  var panelSize = function panelSize(sizes, index) {
+    return index in sizes ? sizes[index] : (props.children[index].props.size || 100) / childrenLength;
+  };
 
   var _useEventListener = hooks.useEventListener({
     type: 'mousemove',
@@ -169,6 +202,9 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
 
   var validateResize = function validateResize(newPrevPanelSize, newNextPanelSize) {
+    if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false;
+    if (newNextPanelSize > 100 || newNextPanelSize < 0) return false;
+
     if (props.children[prevPanelIndex.current].props && props.children[prevPanelIndex.current].props.minSize && props.children[prevPanelIndex.current].props.minSize > newPrevPanelSize) {
       return false;
     }
@@ -187,11 +223,13 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     prevPanelElement.current = null;
     nextPanelElement.current = null;
     prevPanelSize.current = null;
+    prevPanelSizeNew.current = null;
     nextPanelSize.current = null;
+    nextPanelSizeNew.current = null;
     prevPanelIndex.current = null;
   };
 
-  var getStorage = function getStorage() {
+  var getStorage = React__namespace.useCallback(function () {
     switch (props.stateStorage) {
       case 'local':
         return window.localStorage;
@@ -202,31 +240,16 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       default:
         throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
     }
-  };
+  }, [props.stateStorage]);
 
-  var saveState = function saveState() {
-    getStorage().setItem(props.stateKey, JSON.stringify(panelSizes.current));
+  var saveState = function saveState(sizes) {
+    getStorage().setItem(props.stateKey, JSON.stringify(sizes));
   };
 
-  var restoreState = function restoreState() {
-    var storage = getStorage();
-    var stateString = storage.getItem(props.stateKey);
-
-    if (stateString) {
-      panelSizes.current = JSON.parse(stateString);
-
-      var children = _toConsumableArray(elementRef.current.children).filter(function (child) {
-        return utils.DomHandler.hasClass(child, 'p-splitter-panel');
-      });
-
-      children.forEach(function (child, i) {
-        child.style.flexBasis = 'calc(' + panelSizes.current[i] + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
-      });
-      return true;
-    }
-
-    return false;
-  };
+  var restoreState = React__namespace.useCallback(function () {
+    var stateString = getStorage().getItem(props.stateKey);
+    if (stateString) setPanelSizes(JSON.parse(stateString));
+  }, [getStorage, props.stateKey]);
 
   var onResizeStart = function onResizeStart(event, index) {
     gutterRef.current = gutterRefs.current[index];
@@ -238,7 +261,9 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     prevPanelElement.current = gutterRef.current.previousElementSibling;
     nextPanelElement.current = gutterRef.current.nextElementSibling;
     prevPanelSize.current = 100 * (props.layout === 'horizontal' ? utils.DomHandler.getOuterWidth(prevPanelElement.current, true) : utils.DomHandler.getOuterHeight(prevPanelElement.current, true)) / size.current;
+    prevPanelSizeNew.current = prevPanelSize.current;
     nextPanelSize.current = 100 * (props.layout === 'horizontal' ? utils.DomHandler.getOuterWidth(nextPanelElement.current, true) : utils.DomHandler.getOuterHeight(nextPanelElement.current, true)) / size.current;
+    nextPanelSizeNew.current = nextPanelSize.current;
     prevPanelIndex.current = index;
     utils.DomHandler.addClass(gutterRef.current, 'p-splitter-gutter-resizing');
     utils.DomHandler.addClass(elementRef.current, 'p-splitter-resizing');
@@ -253,25 +278,34 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var newNextPanelSize = nextPanelSize.current - newPos;
 
     if (validateResize(newPrevPanelSize, newNextPanelSize)) {
+      prevPanelSizeNew.current = newPrevPanelSize;
+      nextPanelSizeNew.current = newNextPanelSize;
       prevPanelElement.current.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
       nextPanelElement.current.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
-      panelSizes.current[prevPanelIndex.current] = newPrevPanelSize;
-      panelSizes.current[prevPanelIndex.current + 1] = newNextPanelSize;
     }
   };
 
   var onResizeEnd = function onResizeEnd(event) {
-    if (isStateful) {
-      saveState();
-    }
+    setPanelSizes(function (prev) {
+      var sizes = [];
 
-    if (props.onResizeEnd) {
-      props.onResizeEnd({
-        originalEvent: event,
-        sizes: panelSizes.current
-      });
-    }
+      for (var index = 0; index < props.children.length; _readOnlyError("index")) {
+        sizes[index] = panelSize(prev, index);
+      }
+
+      sizes[prevPanelIndex.current] = prevPanelSizeNew.current;
+      sizes[prevPanelIndex.current + 1] = nextPanelSizeNew.current;
+
+      if (props.onResizeEnd) {
+        props.onResizeEnd({
+          originalEvent: event,
+          sizes: sizes
+        });
+      }
 
+      if (isStateful) saveState(sizes);
+      return sizes;
+    });
     utils.DomHandler.removeClass(gutterRef.current, 'p-splitter-gutter-resizing');
     utils.DomHandler.removeClass(elementRef.current, 'p-splitter-resizing');
     clear();
@@ -319,30 +353,10 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         utils.DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
       }
     });
-
-    if (props.children && props.children.length) {
-      var initialized = false;
-
-      if (isStateful && !mounted.current) {
-        initialized = restoreState();
-      }
-
-      if (!initialized) {
-        var _panelSizes = [];
-        props.children.map(function (panel, i) {
-          var panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
-          var panelSize = panelInitialSize || 100 / props.children.length;
-          _panelSizes[i] = panelSize;
-          panelElements[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
-          return _panelSizes;
-        });
-        panelSizes.current = _panelSizes;
-        mounted.current && saveState();
-      }
-    }
-
-    mounted.current = true;
-  });
+  }, []);
+  React__namespace.useEffect(function () {
+    if (isStateful) restoreState();
+  }, [restoreState, isStateful]);
 
   var createPanel = function createPanel(panel, index) {
     var otherProps = utils.ObjectUtils.findDiffKeys(panel.props, SplitterPanel.defaultProps);
@@ -373,10 +387,13 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "p-splitter-gutter-handle"
     }));
+    var flexBasis = 'calc(' + panelSize(panelSizes, index) + '% - ' + (childrenLength - 1) * props.gutterSize + 'px)';
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       key: index,
       className: panelClassName,
-      style: panel.props.style
+      style: _objectSpread(_objectSpread({}, panel.props.style), {}, {
+        flexBasis: flexBasis
+      })
     }, otherProps), panel.props.children), gutter);
   };
 
@@ -397,22 +414,22 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
 SplitterPanel.displayName = 'SplitterPanel';
 SplitterPanel.defaultProps = {
   __TYPE: 'SplitterPanel',
-  size: null,
+  className: null,
   minSize: null,
-  style: null,
-  className: null
+  size: null,
+  style: null
 };
 Splitter.displayName = 'Splitter';
 Splitter.defaultProps = {
   __TYPE: 'Splitter',
-  id: null,
   className: null,
-  style: null,
-  layout: 'horizontal',
   gutterSize: 4,
+  id: null,
+  layout: 'horizontal',
+  onResizeEnd: null,
   stateKey: null,
   stateStorage: 'session',
-  onResizeEnd: null
+  style: null
 };
 
 exports.Splitter = Splitter;

package/splitter/splitter.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils"),r=require("primereact/hooks");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=n(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function o(e){if(Array.isArray(e))return i(e)}function a(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}function s(){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 p(e){return o(e)||a(e)||c(e)||s()}function f(e){if(Array.isArray(e))return e}function d(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,l,u=[],i=!0,o=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(u.push(n.value),!t||u.length!==t);i=!0);}catch(e){o=!0,l=e}finally{try{i||null==r.return||r.return()}finally{if(o)throw l}}return u}}function h(){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 m(e,t){return f(e)||d(e,t)||c(e,t)||h()}var y=function(){},g=l.memo(l.forwardRef((function(e,n){var i=l.useRef(null),o=l.useRef(),a=l.useRef({}),c=l.useRef(null),s=l.useRef(null),f=l.useRef(null),d=l.useRef(null),h=l.useRef(null),v=l.useRef(null),S=l.useRef(null),b=l.useRef(null),z=l.useRef(null),E=l.useRef(!1),w=null!=e.stateKey,O=m(r.useEventListener({type:"mousemove",listener:function(e){return _(e)}}),2),D=O[0],H=O[1],R=m(r.useEventListener({type:"mouseup",listener:function(e){T(e),x()}}),2),j=R[0],N=R[1],x=function(){H(),N()},P=function(t,r){return!(e.children[b.current].props&&e.children[b.current].props.minSize&&e.children[b.current].props.minSize>t)&&!(e.children[b.current+1].props&&e.children[b.current+1].props.minSize&&e.children[b.current+1].props.minSize>r)},A=function(){switch(e.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(e.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},C=function(){A().setItem(e.stateKey,JSON.stringify(z.current))},I=function(r,n){o.current=a.current[n];var l="touchstart"===r.type?r.touches[0].pageX:r.pageX,u="touchstart"===r.type?r.touches[0].pageY:r.pageY;c.current="horizontal"===e.layout?t.DomHandler.getWidth(i.current):t.DomHandler.getHeight(i.current),s.current=!0,f.current="horizontal"===e.layout?l:u,d.current=o.current.previousElementSibling,h.current=o.current.nextElementSibling,v.current=100*("horizontal"===e.layout?t.DomHandler.getOuterWidth(d.current,!0):t.DomHandler.getOuterHeight(d.current,!0))/c.current,S.current=100*("horizontal"===e.layout?t.DomHandler.getOuterWidth(h.current,!0):t.DomHandler.getOuterHeight(h.current,!0))/c.current,b.current=n,t.DomHandler.addClass(o.current,"p-splitter-gutter-resizing"),t.DomHandler.addClass(i.current,"p-splitter-resizing")},_=function(t){var r,n=v.current+(r="horizontal"===e.layout?100*("touchmove"===t.type?t.touches[0].pageX:t.pageX)/c.current-100*f.current/c.current:100*("touchmove"===t.type?t.touches[0].pageY:t.pageY)/c.current-100*f.current/c.current),l=S.current-r;P(n,l)&&(d.current.style.flexBasis="calc("+n+"% - "+(e.children.length-1)*e.gutterSize+"px)",h.current.style.flexBasis="calc("+l+"% - "+(e.children.length-1)*e.gutterSize+"px)",z.current[b.current]=n,z.current[b.current+1]=l)},T=function(r){w&&C(),e.onResizeEnd&&e.onResizeEnd({originalEvent:r,sizes:z.current}),t.DomHandler.removeClass(o.current,"p-splitter-gutter-resizing"),t.DomHandler.removeClass(i.current,"p-splitter-resizing"),s.current=!1,c.current=null,f.current=null,d.current=null,h.current=null,v.current=null,S.current=null,b.current=null},K=function(e,t){I(e,t),D(),j()},L=function(e,t){I(e,t),window.addEventListener("touchmove",Y,{passive:!1,cancelable:!1}),window.addEventListener("touchend",M)},Y=function(e){_(e)},M=function e(t){T(t),window.removeEventListener("touchmove",Y),window.removeEventListener("touchend",e)};l.useImperativeHandle(n,(function(){return{props:e,getElement:function(){return i.current}}})),l.useEffect((function(){var r,n=p(i.current.children).filter((function(e){return t.DomHandler.hasClass(e,"p-splitter-panel")}));if(n.map((function(e){e.childNodes&&t.ObjectUtils.isNotEmpty(t.DomHandler.find(e,".p-splitter"))&&t.DomHandler.addClass(e,"p-splitter-panel-nested")})),e.children&&e.children.length){var l=!1;if(w&&!E.current&&(l=!!(r=A().getItem(e.stateKey))&&(z.current=JSON.parse(r),p(i.current.children).filter((function(e){return t.DomHandler.hasClass(e,"p-splitter-panel")})).forEach((function(t,r){t.style.flexBasis="calc("+z.current[r]+"% - "+(e.children.length-1)*e.gutterSize+"px)"})),!0)),!l){var u=[];e.children.map((function(t,r){var l=(t.props&&t.props.size?t.props.size:null)||100/e.children.length;return u[r]=l,n[r].style.flexBasis="calc("+l+"% - "+(e.children.length-1)*e.gutterSize+"px)",u})),z.current=u,E.current&&C()}}E.current=!0}));var B=function(r,n){var i=t.ObjectUtils.findDiffKeys(r.props,y.defaultProps),o=t.classNames("p-splitter-panel",r.props.className),c=n!==e.children.length-1&&l.createElement("div",{ref:function(e){return a.current[n]=e},className:"p-splitter-gutter",style:"horizontal"===e.layout?{width:e.gutterSize+"px"}:{height:e.gutterSize+"px"},onMouseDown:function(e){return K(e,n)},onTouchStart:function(e){return L(e,n)},onTouchMove:function(e){return Y(e)},onTouchEnd:function(e){return M(e)}},l.createElement("div",{className:"p-splitter-gutter-handle"}));return l.createElement(l.Fragment,null,l.createElement("div",u({key:n,className:o,style:r.props.style},i),r.props.children),c)},U=t.ObjectUtils.findDiffKeys(e,g.defaultProps),X=t.classNames("p-splitter p-component p-splitter-".concat(e.layout),e.className),k=l.Children.map(e.children,B);return l.createElement("div",u({ref:i,id:e.id,className:X,style:e.style},U),k)})));y.displayName="SplitterPanel",y.defaultProps={__TYPE:"SplitterPanel",size:null,minSize:null,style:null,className:null},g.displayName="Splitter",g.defaultProps={__TYPE:"Splitter",id:null,className:null,style:null,layout:"horizontal",gutterSize:4,stateKey:null,stateStorage:"session",onResizeEnd:null},exports.Splitter=g,exports.SplitterPanel=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/hooks"),r=require("primereact/utils");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=n(e);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function c(e){if(Array.isArray(e))return i(e)}function a(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function s(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}function p(){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 f(e){throw new TypeError('"'+e+'" is read-only')}function d(e){if(Array.isArray(e))return e}function m(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,u,l=[],o=!0,i=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);o=!0);}catch(e){i=!0,u=e}finally{try{o||null==r.return||r.return()}finally{if(i)throw u}}return l}}function y(){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 h(e,t){return d(e)||m(e,t)||s(e,t)||y()}function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?g(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var b=function(){},O=u.memo(u.forwardRef((function(e,n){var o=u.useRef(null),i=u.useRef(),d=u.useRef({}),m=u.useRef(null),y=u.useRef(null),g=u.useRef(null),S=u.useRef(null),w=u.useRef(null),E=u.useRef(null),z=u.useRef(null),j=u.useRef(null),P=u.useRef(null),D=u.useRef(null),H=h(u.useState([]),2),R=H[0],N=H[1],x=null!=e.stateKey,C=e.children&&e.children.length,A=function(t,r){return r in t?t[r]:(e.children[r].props.size||100)/C},I=h(t.useEventListener({type:"mousemove",listener:function(e){return W(e)}}),2),T=I[0],_=I[1],K=h(t.useEventListener({type:"mouseup",listener:function(e){J(e),Y()}}),2),k=K[0],L=K[1],Y=function(){_(),L()},M=function(t,r){return!(t>100||t<0)&&(!(r>100||r<0)&&(!(e.children[D.current].props&&e.children[D.current].props.minSize&&e.children[D.current].props.minSize>t)&&!(e.children[D.current+1].props&&e.children[D.current+1].props.minSize&&e.children[D.current+1].props.minSize>r)))},U=u.useCallback((function(){switch(e.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(e.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}}),[e.stateStorage]),X=function(t){U().setItem(e.stateKey,JSON.stringify(t))},q=u.useCallback((function(){var t=U().getItem(e.stateKey);t&&N(JSON.parse(t))}),[U,e.stateKey]),B=function(t,n){i.current=d.current[n];var u="touchstart"===t.type?t.touches[0].pageX:t.pageX,l="touchstart"===t.type?t.touches[0].pageY:t.pageY;m.current="horizontal"===e.layout?r.DomHandler.getWidth(o.current):r.DomHandler.getHeight(o.current),y.current=!0,g.current="horizontal"===e.layout?u:l,S.current=i.current.previousElementSibling,w.current=i.current.nextElementSibling,E.current=100*("horizontal"===e.layout?r.DomHandler.getOuterWidth(S.current,!0):r.DomHandler.getOuterHeight(S.current,!0))/m.current,z.current=E.current,j.current=100*("horizontal"===e.layout?r.DomHandler.getOuterWidth(w.current,!0):r.DomHandler.getOuterHeight(w.current,!0))/m.current,P.current=j.current,D.current=n,r.DomHandler.addClass(i.current,"p-splitter-gutter-resizing"),r.DomHandler.addClass(o.current,"p-splitter-resizing")},W=function(t){var r,n=E.current+(r="horizontal"===e.layout?100*("touchmove"===t.type?t.touches[0].pageX:t.pageX)/m.current-100*g.current/m.current:100*("touchmove"===t.type?t.touches[0].pageY:t.pageY)/m.current-100*g.current/m.current),u=j.current-r;M(n,u)&&(z.current=n,P.current=u,S.current.style.flexBasis="calc("+n+"% - "+(e.children.length-1)*e.gutterSize+"px)",w.current.style.flexBasis="calc("+u+"% - "+(e.children.length-1)*e.gutterSize+"px)")},J=function(t){N((function(r){for(var n=[];0<e.children.length;f("index"))n[0]=A(r,0);return n[D.current]=z.current,n[D.current+1]=P.current,e.onResizeEnd&&e.onResizeEnd({originalEvent:t,sizes:n}),x&&X(n),n})),r.DomHandler.removeClass(i.current,"p-splitter-gutter-resizing"),r.DomHandler.removeClass(o.current,"p-splitter-resizing"),y.current=!1,m.current=null,g.current=null,S.current=null,w.current=null,E.current=null,z.current=null,j.current=null,P.current=null,D.current=null},F=function(e,t){B(e,t),T(),k()},$=function(e,t){B(e,t),window.addEventListener("touchmove",G,{passive:!1,cancelable:!1}),window.addEventListener("touchend",Q)},G=function(e){W(e)},Q=function e(t){J(t),window.removeEventListener("touchmove",G),window.removeEventListener("touchend",e)};u.useImperativeHandle(n,(function(){return{props:e,getElement:function(){return o.current}}})),u.useEffect((function(){var e;(e=o.current.children,c(e)||a(e)||s(e)||p()).filter((function(e){return r.DomHandler.hasClass(e,"p-splitter-panel")})).map((function(e){e.childNodes&&r.ObjectUtils.isNotEmpty(r.DomHandler.find(e,".p-splitter"))&&r.DomHandler.addClass(e,"p-splitter-panel-nested")}))}),[]),u.useEffect((function(){x&&q()}),[q,x]);var V=function(t,n){var o=r.ObjectUtils.findDiffKeys(t.props,b.defaultProps),i=r.classNames("p-splitter-panel",t.props.className),c=n!==e.children.length-1&&u.createElement("div",{ref:function(e){return d.current[n]=e},className:"p-splitter-gutter",style:"horizontal"===e.layout?{width:e.gutterSize+"px"}:{height:e.gutterSize+"px"},onMouseDown:function(e){return F(e,n)},onTouchStart:function(e){return $(e,n)},onTouchMove:function(e){return G(e)},onTouchEnd:function(e){return Q(e)}},u.createElement("div",{className:"p-splitter-gutter-handle"})),a="calc("+A(R,n)+"% - "+(C-1)*e.gutterSize+"px)";return u.createElement(u.Fragment,null,u.createElement("div",l({key:n,className:i,style:v(v({},t.props.style),{},{flexBasis:a})},o),t.props.children),c)},Z=r.ObjectUtils.findDiffKeys(e,O.defaultProps),ee=r.classNames("p-splitter p-component p-splitter-".concat(e.layout),e.className),te=u.Children.map(e.children,V);return u.createElement("div",l({ref:o,id:e.id,className:ee,style:e.style},Z),te)})));b.displayName="SplitterPanel",b.defaultProps={__TYPE:"SplitterPanel",className:null,minSize:null,size:null,style:null},O.displayName="Splitter",O.defaultProps={__TYPE:"Splitter",className:null,gutterSize:4,id:null,layout:"horizontal",onResizeEnd:null,stateKey:null,stateStorage:"session",style:null},exports.Splitter=O,exports.SplitterPanel=b;

package/splitter/splitter.d.ts

@@ -12,7 +12,7 @@ interface SplitterResizeEndParams {
 interface SplitterPanelProps {
     size?: number;
     minSize?: number;
-    style?: object;
+    style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
 }

package/splitter/splitter.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DomHandler, ObjectUtils, classNames } from 'primereact/utils';
 import { useEventListener } from 'primereact/hooks';
+import { DomHandler, ObjectUtils, classNames } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -19,6 +19,21 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
 
@@ -54,6 +69,10 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
+function _readOnlyError(name) {
+  throw new TypeError("\"" + name + "\" is read-only");
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -96,6 +115,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SplitterPanel = function SplitterPanel() {};
 var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var elementRef = React.useRef(null);
@@ -107,11 +129,22 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var prevPanelElement = React.useRef(null);
   var nextPanelElement = React.useRef(null);
   var prevPanelSize = React.useRef(null);
+  var prevPanelSizeNew = React.useRef(null);
   var nextPanelSize = React.useRef(null);
+  var nextPanelSizeNew = React.useRef(null);
   var prevPanelIndex = React.useRef(null);
-  var panelSizes = React.useRef(null);
-  var mounted = React.useRef(false);
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      panelSizes = _React$useState2[0],
+      setPanelSizes = _React$useState2[1];
+
   var isStateful = props.stateKey != null;
+  var childrenLength = props.children && props.children.length;
+
+  var panelSize = function panelSize(sizes, index) {
+    return index in sizes ? sizes[index] : (props.children[index].props.size || 100) / childrenLength;
+  };
 
   var _useEventListener = useEventListener({
     type: 'mousemove',
@@ -145,6 +178,9 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
 
   var validateResize = function validateResize(newPrevPanelSize, newNextPanelSize) {
+    if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false;
+    if (newNextPanelSize > 100 || newNextPanelSize < 0) return false;
+
     if (props.children[prevPanelIndex.current].props && props.children[prevPanelIndex.current].props.minSize && props.children[prevPanelIndex.current].props.minSize > newPrevPanelSize) {
       return false;
     }
@@ -163,11 +199,13 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     prevPanelElement.current = null;
     nextPanelElement.current = null;
     prevPanelSize.current = null;
+    prevPanelSizeNew.current = null;
     nextPanelSize.current = null;
+    nextPanelSizeNew.current = null;
     prevPanelIndex.current = null;
   };
 
-  var getStorage = function getStorage() {
+  var getStorage = React.useCallback(function () {
     switch (props.stateStorage) {
       case 'local':
         return window.localStorage;
@@ -178,31 +216,16 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       default:
         throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
     }
-  };
+  }, [props.stateStorage]);
 
-  var saveState = function saveState() {
-    getStorage().setItem(props.stateKey, JSON.stringify(panelSizes.current));
+  var saveState = function saveState(sizes) {
+    getStorage().setItem(props.stateKey, JSON.stringify(sizes));
   };
 
-  var restoreState = function restoreState() {
-    var storage = getStorage();
-    var stateString = storage.getItem(props.stateKey);
-
-    if (stateString) {
-      panelSizes.current = JSON.parse(stateString);
-
-      var children = _toConsumableArray(elementRef.current.children).filter(function (child) {
-        return DomHandler.hasClass(child, 'p-splitter-panel');
-      });
-
-      children.forEach(function (child, i) {
-        child.style.flexBasis = 'calc(' + panelSizes.current[i] + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
-      });
-      return true;
-    }
-
-    return false;
-  };
+  var restoreState = React.useCallback(function () {
+    var stateString = getStorage().getItem(props.stateKey);
+    if (stateString) setPanelSizes(JSON.parse(stateString));
+  }, [getStorage, props.stateKey]);
 
   var onResizeStart = function onResizeStart(event, index) {
     gutterRef.current = gutterRefs.current[index];
@@ -214,7 +237,9 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     prevPanelElement.current = gutterRef.current.previousElementSibling;
     nextPanelElement.current = gutterRef.current.nextElementSibling;
     prevPanelSize.current = 100 * (props.layout === 'horizontal' ? DomHandler.getOuterWidth(prevPanelElement.current, true) : DomHandler.getOuterHeight(prevPanelElement.current, true)) / size.current;
+    prevPanelSizeNew.current = prevPanelSize.current;
     nextPanelSize.current = 100 * (props.layout === 'horizontal' ? DomHandler.getOuterWidth(nextPanelElement.current, true) : DomHandler.getOuterHeight(nextPanelElement.current, true)) / size.current;
+    nextPanelSizeNew.current = nextPanelSize.current;
     prevPanelIndex.current = index;
     DomHandler.addClass(gutterRef.current, 'p-splitter-gutter-resizing');
     DomHandler.addClass(elementRef.current, 'p-splitter-resizing');
@@ -229,25 +254,34 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var newNextPanelSize = nextPanelSize.current - newPos;
 
     if (validateResize(newPrevPanelSize, newNextPanelSize)) {
+      prevPanelSizeNew.current = newPrevPanelSize;
+      nextPanelSizeNew.current = newNextPanelSize;
       prevPanelElement.current.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
       nextPanelElement.current.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
-      panelSizes.current[prevPanelIndex.current] = newPrevPanelSize;
-      panelSizes.current[prevPanelIndex.current + 1] = newNextPanelSize;
     }
   };
 
   var onResizeEnd = function onResizeEnd(event) {
-    if (isStateful) {
-      saveState();
-    }
+    setPanelSizes(function (prev) {
+      var sizes = [];
 
-    if (props.onResizeEnd) {
-      props.onResizeEnd({
-        originalEvent: event,
-        sizes: panelSizes.current
-      });
-    }
+      for (var index = 0; index < props.children.length; _readOnlyError("index")) {
+        sizes[index] = panelSize(prev, index);
+      }
+
+      sizes[prevPanelIndex.current] = prevPanelSizeNew.current;
+      sizes[prevPanelIndex.current + 1] = nextPanelSizeNew.current;
+
+      if (props.onResizeEnd) {
+        props.onResizeEnd({
+          originalEvent: event,
+          sizes: sizes
+        });
+      }
 
+      if (isStateful) saveState(sizes);
+      return sizes;
+    });
     DomHandler.removeClass(gutterRef.current, 'p-splitter-gutter-resizing');
     DomHandler.removeClass(elementRef.current, 'p-splitter-resizing');
     clear();
@@ -295,30 +329,10 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
       }
     });
-
-    if (props.children && props.children.length) {
-      var initialized = false;
-
-      if (isStateful && !mounted.current) {
-        initialized = restoreState();
-      }
-
-      if (!initialized) {
-        var _panelSizes = [];
-        props.children.map(function (panel, i) {
-          var panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
-          var panelSize = panelInitialSize || 100 / props.children.length;
-          _panelSizes[i] = panelSize;
-          panelElements[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
-          return _panelSizes;
-        });
-        panelSizes.current = _panelSizes;
-        mounted.current && saveState();
-      }
-    }
-
-    mounted.current = true;
-  });
+  }, []);
+  React.useEffect(function () {
+    if (isStateful) restoreState();
+  }, [restoreState, isStateful]);
 
   var createPanel = function createPanel(panel, index) {
     var otherProps = ObjectUtils.findDiffKeys(panel.props, SplitterPanel.defaultProps);
@@ -349,10 +363,13 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }, /*#__PURE__*/React.createElement("div", {
       className: "p-splitter-gutter-handle"
     }));
+    var flexBasis = 'calc(' + panelSize(panelSizes, index) + '% - ' + (childrenLength - 1) * props.gutterSize + 'px)';
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
       key: index,
       className: panelClassName,
-      style: panel.props.style
+      style: _objectSpread(_objectSpread({}, panel.props.style), {}, {
+        flexBasis: flexBasis
+      })
     }, otherProps), panel.props.children), gutter);
   };
 
@@ -373,22 +390,22 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 SplitterPanel.displayName = 'SplitterPanel';
 SplitterPanel.defaultProps = {
   __TYPE: 'SplitterPanel',
-  size: null,
+  className: null,
   minSize: null,
-  style: null,
-  className: null
+  size: null,
+  style: null
 };
 Splitter.displayName = 'Splitter';
 Splitter.defaultProps = {
   __TYPE: 'Splitter',
-  id: null,
   className: null,
-  style: null,
-  layout: 'horizontal',
   gutterSize: 4,
+  id: null,
+  layout: 'horizontal',
+  onResizeEnd: null,
   stateKey: null,
   stateStorage: 'session',
-  onResizeEnd: null
+  style: null
 };
 
 export { Splitter, SplitterPanel };

package/splitter/splitter.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{DomHandler as t,ObjectUtils as r,classNames as n}from"primereact/utils";import{useEventListener as u}from"primereact/hooks";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function o(e){if(Array.isArray(e))return i(e)}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function a(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}function s(){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 p(e){return o(e)||c(e)||a(e)||s()}function f(e){if(Array.isArray(e))return e}function d(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,u,l=[],i=!0,o=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){o=!0,u=e}finally{try{i||null==r.return||r.return()}finally{if(o)throw u}}return l}}function h(){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 m(e,t){return f(e)||d(e,t)||a(e,t)||h()}var y=function(){},g=e.memo(e.forwardRef((function(i,o){var c=e.useRef(null),a=e.useRef(),s=e.useRef({}),f=e.useRef(null),d=e.useRef(null),h=e.useRef(null),v=e.useRef(null),S=e.useRef(null),z=e.useRef(null),w=e.useRef(null),E=e.useRef(null),b=e.useRef(null),R=e.useRef(!1),N=null!=i.stateKey,x=m(u({type:"mousemove",listener:function(e){return H(e)}}),2),O=x[0],A=x[1],C=m(u({type:"mouseup",listener:function(e){L(e),j()}}),2),P=C[0],I=C[1],j=function(){A(),I()},T=function(e,t){return!(i.children[E.current].props&&i.children[E.current].props.minSize&&i.children[E.current].props.minSize>e)&&!(i.children[E.current+1].props&&i.children[E.current+1].props.minSize&&i.children[E.current+1].props.minSize>t)},K=function(){switch(i.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(i.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}},Y=function(){K().setItem(i.stateKey,JSON.stringify(b.current))},B=function(e,r){a.current=s.current[r];var n="touchstart"===e.type?e.touches[0].pageX:e.pageX,u="touchstart"===e.type?e.touches[0].pageY:e.pageY;f.current="horizontal"===i.layout?t.getWidth(c.current):t.getHeight(c.current),d.current=!0,h.current="horizontal"===i.layout?n:u,v.current=a.current.previousElementSibling,S.current=a.current.nextElementSibling,z.current=100*("horizontal"===i.layout?t.getOuterWidth(v.current,!0):t.getOuterHeight(v.current,!0))/f.current,w.current=100*("horizontal"===i.layout?t.getOuterWidth(S.current,!0):t.getOuterHeight(S.current,!0))/f.current,E.current=r,t.addClass(a.current,"p-splitter-gutter-resizing"),t.addClass(c.current,"p-splitter-resizing")},H=function(e){var t,r=z.current+(t="horizontal"===i.layout?100*("touchmove"===e.type?e.touches[0].pageX:e.pageX)/f.current-100*h.current/f.current:100*("touchmove"===e.type?e.touches[0].pageY:e.pageY)/f.current-100*h.current/f.current),n=w.current-t;T(r,n)&&(v.current.style.flexBasis="calc("+r+"% - "+(i.children.length-1)*i.gutterSize+"px)",S.current.style.flexBasis="calc("+n+"% - "+(i.children.length-1)*i.gutterSize+"px)",b.current[E.current]=r,b.current[E.current+1]=n)},L=function(e){N&&Y(),i.onResizeEnd&&i.onResizeEnd({originalEvent:e,sizes:b.current}),t.removeClass(a.current,"p-splitter-gutter-resizing"),t.removeClass(c.current,"p-splitter-resizing"),d.current=!1,f.current=null,h.current=null,v.current=null,S.current=null,z.current=null,w.current=null,E.current=null},X=function(e,t){B(e,t),O(),P()},_=function(e,t){B(e,t),window.addEventListener("touchmove",D,{passive:!1,cancelable:!1}),window.addEventListener("touchend",M)},D=function(e){H(e)},M=function e(t){L(t),window.removeEventListener("touchmove",D),window.removeEventListener("touchend",e)};e.useImperativeHandle(o,(function(){return{props:i,getElement:function(){return c.current}}})),e.useEffect((function(){var e,n=p(c.current.children).filter((function(e){return t.hasClass(e,"p-splitter-panel")}));if(n.map((function(e){e.childNodes&&r.isNotEmpty(t.find(e,".p-splitter"))&&t.addClass(e,"p-splitter-panel-nested")})),i.children&&i.children.length){var u=!1;if(N&&!R.current&&(u=!!(e=K().getItem(i.stateKey))&&(b.current=JSON.parse(e),p(c.current.children).filter((function(e){return t.hasClass(e,"p-splitter-panel")})).forEach((function(e,t){e.style.flexBasis="calc("+b.current[t]+"% - "+(i.children.length-1)*i.gutterSize+"px)"})),!0)),!u){var l=[];i.children.map((function(e,t){var r=(e.props&&e.props.size?e.props.size:null)||100/i.children.length;return l[t]=r,n[t].style.flexBasis="calc("+r+"% - "+(i.children.length-1)*i.gutterSize+"px)",l})),b.current=l,R.current&&Y()}}R.current=!0}));var W=function(t,u){var o=r.findDiffKeys(t.props,y.defaultProps),c=n("p-splitter-panel",t.props.className),a=u!==i.children.length-1&&e.createElement("div",{ref:function(e){return s.current[u]=e},className:"p-splitter-gutter",style:"horizontal"===i.layout?{width:i.gutterSize+"px"}:{height:i.gutterSize+"px"},onMouseDown:function(e){return X(e,u)},onTouchStart:function(e){return _(e,u)},onTouchMove:function(e){return D(e)},onTouchEnd:function(e){return M(e)}},e.createElement("div",{className:"p-splitter-gutter-handle"}));return e.createElement(e.Fragment,null,e.createElement("div",l({key:u,className:c,style:t.props.style},o),t.props.children),a)},k=r.findDiffKeys(i,g.defaultProps),J=n("p-splitter p-component p-splitter-".concat(i.layout),i.className),F=e.Children.map(i.children,W);return e.createElement("div",l({ref:c,id:i.id,className:J,style:i.style},k),F)})));y.displayName="SplitterPanel",y.defaultProps={__TYPE:"SplitterPanel",size:null,minSize:null,style:null,className:null},g.displayName="Splitter",g.defaultProps={__TYPE:"Splitter",id:null,className:null,style:null,layout:"horizontal",gutterSize:4,stateKey:null,stateStorage:"session",onResizeEnd:null};export{g as Splitter,y as SplitterPanel};
+import*as e from"react";import{useEventListener as t}from"primereact/hooks";import{DomHandler as r,ObjectUtils as n,classNames as u}from"primereact/utils";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function c(e){if(Array.isArray(e))return i(e)}function a(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function s(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}function p(){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 f(e){throw new TypeError('"'+e+'" is read-only')}function d(e){if(Array.isArray(e))return e}function h(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,u,l=[],o=!0,i=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);o=!0);}catch(e){i=!0,u=e}finally{try{o||null==r.return||r.return()}finally{if(i)throw u}}return l}}function y(){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 m(e,t){return d(e)||h(e,t)||s(e,t)||y()}function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?g(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var b=function(){},S=e.memo(e.forwardRef((function(o,i){var d=e.useRef(null),h=e.useRef(),y=e.useRef({}),g=e.useRef(null),w=e.useRef(null),O=e.useRef(null),z=e.useRef(null),E=e.useRef(null),j=e.useRef(null),P=e.useRef(null),R=e.useRef(null),N=e.useRef(null),x=e.useRef(null),C=m(e.useState([]),2),A=C[0],I=C[1],T=null!=o.stateKey,D=o.children&&o.children.length,K=function(e,t){return t in e?e[t]:(o.children[t].props.size||100)/D},Y=m(t({type:"mousemove",listener:function(e){return $(e)}}),2),k=Y[0],H=Y[1],L=m(t({type:"mouseup",listener:function(e){q(e),B()}}),2),X=L[0],_=L[1],B=function(){H(),_()},M=function(e,t){return!(e>100||e<0)&&(!(t>100||t<0)&&(!(o.children[x.current].props&&o.children[x.current].props.minSize&&o.children[x.current].props.minSize>e)&&!(o.children[x.current+1].props&&o.children[x.current+1].props.minSize&&o.children[x.current+1].props.minSize>t)))},W=e.useCallback((function(){switch(o.stateStorage){case"local":return window.localStorage;case"session":return window.sessionStorage;default:throw new Error(o.stateStorage+' is not a valid value for the state storage, supported values are "local" and "session".')}}),[o.stateStorage]),J=function(e){W().setItem(o.stateKey,JSON.stringify(e))},F=e.useCallback((function(){var e=W().getItem(o.stateKey);e&&I(JSON.parse(e))}),[W,o.stateKey]),U=function(e,t){h.current=y.current[t];var n="touchstart"===e.type?e.touches[0].pageX:e.pageX,u="touchstart"===e.type?e.touches[0].pageY:e.pageY;g.current="horizontal"===o.layout?r.getWidth(d.current):r.getHeight(d.current),w.current=!0,O.current="horizontal"===o.layout?n:u,z.current=h.current.previousElementSibling,E.current=h.current.nextElementSibling,j.current=100*("horizontal"===o.layout?r.getOuterWidth(z.current,!0):r.getOuterHeight(z.current,!0))/g.current,P.current=j.current,R.current=100*("horizontal"===o.layout?r.getOuterWidth(E.current,!0):r.getOuterHeight(E.current,!0))/g.current,N.current=R.current,x.current=t,r.addClass(h.current,"p-splitter-gutter-resizing"),r.addClass(d.current,"p-splitter-resizing")},$=function(e){var t,r=j.current+(t="horizontal"===o.layout?100*("touchmove"===e.type?e.touches[0].pageX:e.pageX)/g.current-100*O.current/g.current:100*("touchmove"===e.type?e.touches[0].pageY:e.pageY)/g.current-100*O.current/g.current),n=R.current-t;M(r,n)&&(P.current=r,N.current=n,z.current.style.flexBasis="calc("+r+"% - "+(o.children.length-1)*o.gutterSize+"px)",E.current.style.flexBasis="calc("+n+"% - "+(o.children.length-1)*o.gutterSize+"px)")},q=function(e){I((function(t){for(var r=[];0<o.children.length;f("index"))r[0]=K(t,0);return r[x.current]=P.current,r[x.current+1]=N.current,o.onResizeEnd&&o.onResizeEnd({originalEvent:e,sizes:r}),T&&J(r),r})),r.removeClass(h.current,"p-splitter-gutter-resizing"),r.removeClass(d.current,"p-splitter-resizing"),w.current=!1,g.current=null,O.current=null,z.current=null,E.current=null,j.current=null,P.current=null,R.current=null,N.current=null,x.current=null},G=function(e,t){U(e,t),k(),X()},Q=function(e,t){U(e,t),window.addEventListener("touchmove",V,{passive:!1,cancelable:!1}),window.addEventListener("touchend",Z)},V=function(e){$(e)},Z=function e(t){q(t),window.removeEventListener("touchmove",V),window.removeEventListener("touchend",e)};e.useImperativeHandle(i,(function(){return{props:o,getElement:function(){return d.current}}})),e.useEffect((function(){var e;(e=d.current.children,c(e)||a(e)||s(e)||p()).filter((function(e){return r.hasClass(e,"p-splitter-panel")})).map((function(e){e.childNodes&&n.isNotEmpty(r.find(e,".p-splitter"))&&r.addClass(e,"p-splitter-panel-nested")}))}),[]),e.useEffect((function(){T&&F()}),[F,T]);var ee=function(t,r){var i=n.findDiffKeys(t.props,b.defaultProps),c=u("p-splitter-panel",t.props.className),a=r!==o.children.length-1&&e.createElement("div",{ref:function(e){return y.current[r]=e},className:"p-splitter-gutter",style:"horizontal"===o.layout?{width:o.gutterSize+"px"}:{height:o.gutterSize+"px"},onMouseDown:function(e){return G(e,r)},onTouchStart:function(e){return Q(e,r)},onTouchMove:function(e){return V(e)},onTouchEnd:function(e){return Z(e)}},e.createElement("div",{className:"p-splitter-gutter-handle"})),s="calc("+K(A,r)+"% - "+(D-1)*o.gutterSize+"px)";return e.createElement(e.Fragment,null,e.createElement("div",l({key:r,className:c,style:v(v({},t.props.style),{},{flexBasis:s})},i),t.props.children),a)},te=n.findDiffKeys(o,S.defaultProps),re=u("p-splitter p-component p-splitter-".concat(o.layout),o.className),ne=e.Children.map(o.children,ee);return e.createElement("div",l({ref:d,id:o.id,className:re,style:o.style},te),ne)})));b.displayName="SplitterPanel",b.defaultProps={__TYPE:"SplitterPanel",className:null,minSize:null,size:null,style:null},S.displayName="Splitter",S.defaultProps={__TYPE:"Splitter",className:null,gutterSize:4,id:null,layout:"horizontal",onResizeEnd:null,stateKey:null,stateStorage:"session",style:null};export{S as Splitter,b as SplitterPanel};