@devbookhq/splitter - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

lib/cjs/index.js

@@ -15,3 +15,3 @@ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("react-is");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(t);function o(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===exports.SplitDirection.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===exports.SplitDirection.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function a(e,n,i=[],r={condition:!0}){const{condition:o}=r,a=function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}return n}(r,["condition"]);t.useEffect((()=>(o&&window.addEventListener(e,n,a),()=>{o&&window.removeEventListener(e,n)})),[e,n,o,...i])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const d=r.default.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=exports.SplitDirection.Vertical,onDragging:o},a)=>{const d=`__dbk__gutter ${r} ${t||n}`,s=`__dbk__dragger ${r} ${i||n}`;return e.jsx("div",Object.assign({className:d,ref:a,dir:r,onMouseDown:o,onTouchStart:f?o:void 0},{children:e.jsx("div",{className:s},void 0)}),void 0)}));var s;function g(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function c(e,t){switch(t.type){case s.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case s.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,a=i[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const d=o(n,a);if(void 0===d)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${d}.`);const s=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],g=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===exports.SplitDirection.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,l=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,u=n===exports.SplitDirection.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,p={idx:t-1,a:e,b:o,gutter:d,parent:a,start:g,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};s.push(p)}})),Object.assign(Object.assign({},e),{pairs:s})}case s.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case s.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case s.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],a=o(n,r.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const d=r.gutter[n===exports.SplitDirection.Horizontal?"clientWidth":"clientHeight"],s=0===i,c=i===e.pairs.length-1,{aGutterSize:l,bGutterSize:u}=g(d,s,c);let p,h,f,_,b;return n===exports.SplitDirection.Horizontal?(p=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,_=(r.a.getBoundingClientRect().width+l)/a*100,b=(r.b.getBoundingClientRect().width+u)/a*100,f=r.a.getBoundingClientRect().width+l+u+r.b.getBoundingClientRect().width):(p=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,_=(r.a.getBoundingClientRect().height+l)/a*100,b=(r.b.getBoundingClientRect().height+u)/a*100,f=r.a.getBoundingClientRect().height+l+u+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:p,end:h,size:f,aSizePct:_,bSizePct:b,gutterSize:d}),Object.assign({},e)}default:return e}}function l(e,i=0,r=[]){return t.Children.toArray(e).reduce(((e,o,a)=>(n.isFragment(o)?e.push.apply(e,l(o.props.children,i+1,r.concat(o.key||a))):t.isValidElement(o)?e.push(t.cloneElement(o,{key:r.concat(String(o.key)).join(".")})):"string"!=typeof o&&"number"!=typeof o||e.push(o),e)),[])}!function(e){e[e.SetIsReadyToCompute=0]="SetIsReadyToCompute",e[e.CreatePairs=1]="CreatePairs",e[e.CalculateSizes=2]="CalculateSizes",e[e.StartDragging=3]="StartDragging",e[e.StopDragging=4]="StopDragging"}(s||(s={}));const u=e=>"changedTouches"in e;var p,h;exports.SplitDirection=void 0,(p=exports.SplitDirection||(exports.SplitDirection={})).Horizontal="Horizontal",p.Vertical="Vertical",exports.GutterTheme=void 0,(h=exports.GutterTheme||(exports.GutterTheme={})).Light="Light",h.Dark="Dark";const f="undefined"!=typeof window&&"ontouchstart"in window;function _(e){return e===exports.SplitDirection.Horizontal?"col-resize":"row-resize"}const b={isReady:!1,isDragging:!1,pairs:[]};exports.default=function({direction:n=exports.SplitDirection.Horizontal,minWidths:i=[],minHeights:p=[],initialSizes:h,gutterTheme:z=exports.GutterTheme.Dark,gutterClassName:x,draggerClassName:S,children:w,onResizeStarted:C,onResizeFinished:y,classes:m=[]}){const v=l(w),[D,k]=t.useReducer(c,b),R=t.useRef(null),j=t.useRef([]),E=t.useRef([]);j.current=[],E.current=[];const B=r.default.useCallback((e=>{k({type:s.SetIsReadyToCompute,payload:{isReady:e}})}),[]),I=r.default.useCallback(((e,t)=>{k({type:s.StartDragging,payload:{gutterIdx:t}});const n=D.pairs[t];null==C||C(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=_(e),n.parent.style.cursor=_(e),document.body.style.cursor=_(e)}),[D.pairs]),H=r.default.useCallback((()=>{k({type:s.StopDragging});const e=[];for(let t=0;t<D.pairs.length;t++){const i=D.pairs[t],r=o(n,i.parent);if(void 0===r)throw new Error("Cannot call the 'onResizeFinished' callback - parentSize is undefined");if(void 0===i.gutterSize)throw new Error("Cannot call 'onResizeFinished' callback - gutterSize is undefined");const a=0===t,d=t===D.pairs.length-1,s=i.a.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"],{aGutterSize:c,bGutterSize:l}=g(i.gutterSize,a,d),u=(s+c)/r*100;if(e.push(u),d){const t=(i.b.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"]+l)/r*100;e.push(t)}}if(void 0===D.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=D.pairs[D.draggingIdx];null==y||y(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[D.draggingIdx,D.pairs,n]),O=r.default.useCallback(((e,t)=>{k({type:s.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),T=r.default.useCallback(((e,t,n)=>{k({type:s.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),G=r.default.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===o(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,o)=>{const a=o===t.length-1;let d;if(t.length>1){n[a?o-1:o].getBoundingClientRect()[e===exports.SplitDirection.Horizontal?"width":"height"]}d=i&&o<i.length?`calc(${i[o]}% - 0px)`:`calc(${100/t.length}% - 0px)`,e===exports.SplitDirection.Horizontal?(r.style.width=d,r.style.height="100%"):(r.style.height=d,r.style.width="100%")}))}),[]),N=r.default.useCallback(((e,t)=>{if(void 0===D.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=D.pairs[D.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,o=i-t/n.size*i,a=0===D.draggingIdx,d=D.draggingIdx===D.pairs.length-1,{aGutterSize:s,bGutterSize:c}=g(n.gutterSize,a,d),l=`calc(${r}% - ${s}px)`,u=`calc(${o}% - ${c}px)`;e===exports.SplitDirection.Horizontal?(n.a.style.width=l,n.b.style.width=u):(n.a.style.height=l,n.b.style.height=u)}),[D.draggingIdx,D.pairs,n]),P=r.default.useCallback(((e,t,n)=>{if(!D.isDragging)return;if(void 0===D.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=D.pairs[D.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){const n=u(t)?t.changedTouches[0]:t;return e===exports.SplitDirection.Horizontal?n.clientX:n.clientY}(t,e)-i.start,o=16,a=16;n.length>D.draggingIdx&&(o=n[D.draggingIdx]),n.length>=D.draggingIdx+1&&(a=n[D.draggingIdx+1]),r<i.gutterSize+o&&(r=i.gutterSize+o),r>=i.size-(i.gutterSize+a)&&(r=i.size-(i.gutterSize+a)),N(t,r)}),[D.isDragging,D.draggingIdx,D.pairs,N]),$=()=>{if(D.isDragging){if(void 0===D.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");O(n,D.draggingIdx),H()}},F=e=>{D.isDragging&&(u(e)&&e.preventDefault(),P(e,n,n===exports.SplitDirection.Horizontal?i:p))};function L(e,t){if(!e.current)throw new Error("Can't add element to ref object - ref isn't initialized");t&&!e.current.includes(t)&&e.current.push(t)}return a("mouseup",$,[D.isDragging,H]),a("mousemove",F,[n,D.isDragging,P,i,p]),a("touchend",$,[D.isDragging,H],{condition:f}),a("touchmove",F,[n,D.isDragging,P,i,p],{condition:f,passive:!f}),t.useEffect((function(){if(!R.current)return;const e=R.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),i=n===exports.SplitDirection.Horizontal?e.clientWidth:e.clientHeight;B(!!t&&!!i)}));return t.observe(e),()=>{t.disconnect()}}),[R.current,n]),t.useEffect((function(){if(D.isReady){if(!j.current||!E.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");v.length<=1?G(n,j.current,E.current,h):(G(n,j.current,E.current,h),T(n,j.current,E.current))}}),[w,D.isReady,n,G,T,h]),e.jsx("div",Object.assign({className:`__dbk__container ${n}`,ref:R},{children:D.isReady&&v.map(((t,i)=>e.jsxs(r.default.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>L(j,e),className:"__dbk__child-wrapper "+(i<m.length?m[i]:"")},{children:t}),void 0),i<v.length-1&&e.jsx(d,{ref:e=>L(E,e),className:x,theme:z,draggerClassName:S,direction:n,onDragging:()=>{return O(n,e=i),void I(n,e);var e}},void 0)]},i)))}),void 0)},exports.isTouchDevice=f;
+***************************************************************************** */function a(e,n,i=[],r={condition:!0}){const{condition:o}=r,a=function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}return n}(r,["condition"]);t.useEffect((()=>(o&&window.addEventListener(e,n,a),()=>{o&&window.removeEventListener(e,n)})),[e,n,o,...i])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const d=r.default.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=exports.SplitDirection.Vertical,onDragging:o},a)=>{const d=`__dbk__gutter ${r} ${t||n}`,s=`__dbk__dragger ${r} ${i||n}`;return e.jsx("div",Object.assign({className:d,ref:a,dir:r,onMouseDown:o,onTouchStart:f?o:void 0},{children:e.jsx("div",{className:s},void 0)}),void 0)}));var s;function g(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function c(e,t){switch(t.type){case s.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case s.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,a=i[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const d=o(n,a);if(void 0===d)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${d}.`);const s=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],g=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===exports.SplitDirection.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,l=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,u=n===exports.SplitDirection.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,p={idx:t-1,a:e,b:o,gutter:d,parent:a,start:g,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};s.push(p)}})),Object.assign(Object.assign({},e),{pairs:s})}case s.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case s.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case s.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],a=o(n,r.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const d=r.gutter[n===exports.SplitDirection.Horizontal?"clientWidth":"clientHeight"],s=0===i,c=i===e.pairs.length-1,{aGutterSize:l,bGutterSize:u}=g(d,s,c);let p,h,f,_,b;return n===exports.SplitDirection.Horizontal?(p=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,_=(r.a.getBoundingClientRect().width+l)/a*100,b=(r.b.getBoundingClientRect().width+u)/a*100,f=r.a.getBoundingClientRect().width+l+u+r.b.getBoundingClientRect().width):(p=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,_=(r.a.getBoundingClientRect().height+l)/a*100,b=(r.b.getBoundingClientRect().height+u)/a*100,f=r.a.getBoundingClientRect().height+l+u+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:p,end:h,size:f,aSizePct:_,bSizePct:b,gutterSize:d}),Object.assign({},e)}default:return e}}function l(e,i=0,r=[]){return t.Children.toArray(e).reduce(((e,o,a)=>(n.isFragment(o)?e.push.apply(e,l(o.props.children,i+1,r.concat(o.key||a))):t.isValidElement(o)?e.push(t.cloneElement(o,{key:r.concat(String(o.key)).join(".")})):"string"!=typeof o&&"number"!=typeof o||e.push(o),e)),[])}!function(e){e[e.SetIsReadyToCompute=0]="SetIsReadyToCompute",e[e.CreatePairs=1]="CreatePairs",e[e.CalculateSizes=2]="CalculateSizes",e[e.StartDragging=3]="StartDragging",e[e.StopDragging=4]="StopDragging"}(s||(s={}));const u=e=>"changedTouches"in e;var p,h;exports.SplitDirection=void 0,(p=exports.SplitDirection||(exports.SplitDirection={})).Horizontal="Horizontal",p.Vertical="Vertical",exports.GutterTheme=void 0,(h=exports.GutterTheme||(exports.GutterTheme={})).Light="Light",h.Dark="Dark";const f="undefined"!=typeof window&&"ontouchstart"in window;function _(e){return e===exports.SplitDirection.Horizontal?"col-resize":"row-resize"}const b={isReady:!1,isDragging:!1,pairs:[]};exports.default=function({direction:n=exports.SplitDirection.Horizontal,minWidths:i=[],minHeights:p=[],initialSizes:h,gutterTheme:z=exports.GutterTheme.Dark,gutterClassName:x,draggerClassName:S,children:w,onResizeStarted:C,onResizeFinished:y,classes:m=[]}){const v=l(w),[D,k]=t.useReducer(c,b),R=t.useRef(null),j=t.useRef([]),E=t.useRef([]);j.current=[],E.current=[];const B=r.default.useCallback((e=>{k({type:s.SetIsReadyToCompute,payload:{isReady:e}})}),[]),I=r.default.useCallback(((e,t)=>{k({type:s.StartDragging,payload:{gutterIdx:t}});const n=D.pairs[t];null==C||C(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=_(e),n.parent.style.cursor=_(e),document.body.style.cursor=_(e)}),[D.pairs]),H=r.default.useCallback((()=>{k({type:s.StopDragging});const e=[];for(let t=0;t<D.pairs.length;t++){const i=D.pairs[t],r=o(n,i.parent);if(void 0===r)throw new Error("Cannot call the 'onResizeFinished' callback - parentSize is undefined");if(void 0===i.gutterSize)throw new Error("Cannot call 'onResizeFinished' callback - gutterSize is undefined");const a=0===t,d=t===D.pairs.length-1,s=i.a.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"],{aGutterSize:c,bGutterSize:l}=g(i.gutterSize,a,d),u=(s+c)/r*100;if(e.push(u),d){const t=(i.b.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"]+l)/r*100;e.push(t)}}if(void 0===D.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=D.pairs[D.draggingIdx];null==y||y(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[D.draggingIdx,D.pairs,n]),O=r.default.useCallback(((e,t)=>{k({type:s.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),T=r.default.useCallback(((e,t,n)=>{k({type:s.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),G=r.default.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===o(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,o)=>{const a=0===o,d=o===t.length-1;let s,g=0;if(t.length>1){g=n[d?o-1:o].getBoundingClientRect()[e===exports.SplitDirection.Horizontal?"width":"height"],g=a||d?g/2:g}s=i&&o<i.length?`calc(${i[o]}% - ${g}px)`:`calc(${100/t.length}% - ${g}px)`,e===exports.SplitDirection.Horizontal?(r.style.width=s,r.style.height="100%"):(r.style.height=s,r.style.width="100%")}))}),[]),N=r.default.useCallback(((e,t)=>{if(void 0===D.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=D.pairs[D.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,o=i-t/n.size*i,a=0===D.draggingIdx,d=D.draggingIdx===D.pairs.length-1,{aGutterSize:s,bGutterSize:c}=g(n.gutterSize,a,d),l=`calc(${r}% - ${s}px)`,u=`calc(${o}% - ${c}px)`;e===exports.SplitDirection.Horizontal?(n.a.style.width=l,n.b.style.width=u):(n.a.style.height=l,n.b.style.height=u)}),[D.draggingIdx,D.pairs,n]),P=r.default.useCallback(((e,t,n)=>{if(!D.isDragging)return;if(void 0===D.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=D.pairs[D.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){const n=u(t)?t.changedTouches[0]:t;return e===exports.SplitDirection.Horizontal?n.clientX:n.clientY}(t,e)-i.start,o=16,a=16;n.length>D.draggingIdx&&(o=n[D.draggingIdx]),n.length>=D.draggingIdx+1&&(a=n[D.draggingIdx+1]),r<i.gutterSize+o&&(r=i.gutterSize+o),r>=i.size-(i.gutterSize+a)&&(r=i.size-(i.gutterSize+a)),N(t,r)}),[D.isDragging,D.draggingIdx,D.pairs,N]),$=()=>{if(D.isDragging){if(void 0===D.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");O(n,D.draggingIdx),H()}},F=e=>{D.isDragging&&(u(e)&&e.preventDefault(),P(e,n,n===exports.SplitDirection.Horizontal?i:p))};function L(e,t){if(!e.current)throw new Error("Can't add element to ref object - ref isn't initialized");t&&!e.current.includes(t)&&e.current.push(t)}return a("mouseup",$,[D.isDragging,H]),a("mousemove",F,[n,D.isDragging,P,i,p]),a("touchend",$,[D.isDragging,H],{condition:f}),a("touchmove",F,[n,D.isDragging,P,i,p],{condition:f,passive:!f}),t.useEffect((function(){if(!R.current)return;const e=R.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),i=n===exports.SplitDirection.Horizontal?e.clientWidth:e.clientHeight;B(!!t&&!!i)}));return t.observe(e),()=>{t.disconnect()}}),[R.current,n]),t.useEffect((function(){if(D.isReady){if(!j.current||!E.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");v.length<=1?G(n,j.current,E.current,h):(G(n,j.current,E.current,h),T(n,j.current,E.current))}}),[w,D.isReady,n,G,T,h]),e.jsx("div",Object.assign({className:`__dbk__container ${n}`,ref:R},{children:D.isReady&&v.map(((t,i)=>e.jsxs(r.default.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>L(j,e),className:"__dbk__child-wrapper "+(i<m.length?m[i]:"")},{children:t}),void 0),i<v.length-1&&e.jsx(d,{ref:e=>L(E,e),className:x,theme:z,draggerClassName:S,direction:n,onDragging:()=>{return O(n,e=i),void I(n,e);var e}},void 0)]},i)))}),void 0)},exports.isTouchDevice=f;
 //# sourceMappingURL=index.js.map

lib/mjs/index.js

@@ -15,3 +15,3 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useEffect as i,Children as r,isValidElement as a,cloneElement as o,useReducer as g,useRef as d}from"react";import{isFragment as s}from"react-is";function c(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===z.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===z.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function l(e,t,n=[],r={condition:!0}){const{condition:a}=r,o=function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}return n}(r,["condition"]);i((()=>(a&&window.addEventListener(e,t,o),()=>{a&&window.removeEventListener(e,t)})),[e,t,a,...n])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const u=n.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=z.Vertical,onDragging:a},o)=>{const g=`__dbk__gutter ${r} ${t||n}`,d=`__dbk__dragger ${r} ${i||n}`;return e("div",Object.assign({className:g,ref:o,dir:r,onMouseDown:a,onTouchStart:C?a:void 0},{children:e("div",{className:d},void 0)}),void 0)}));var h;function p(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function f(e,t){switch(t.type){case h.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case h.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,a=i[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const o=c(n,a);if(void 0===o)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${o}.`);const g=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],s=n===z.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===z.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,l=n===z.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,u=n===z.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,h={idx:t-1,a:e,b:o,gutter:d,parent:a,start:s,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};g.push(h)}})),Object.assign(Object.assign({},e),{pairs:g})}case h.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case h.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case h.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],a=c(n,r.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const o=r.gutter[n===z.Horizontal?"clientWidth":"clientHeight"],g=0===i,d=i===e.pairs.length-1,{aGutterSize:s,bGutterSize:l}=p(o,g,d);let u,h,f,_,b;return n===z.Horizontal?(u=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,_=(r.a.getBoundingClientRect().width+s)/a*100,b=(r.b.getBoundingClientRect().width+l)/a*100,f=r.a.getBoundingClientRect().width+s+l+r.b.getBoundingClientRect().width):(u=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,_=(r.a.getBoundingClientRect().height+s)/a*100,b=(r.b.getBoundingClientRect().height+l)/a*100,f=r.a.getBoundingClientRect().height+s+l+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:u,end:h,size:f,aSizePct:_,bSizePct:b,gutterSize:o}),Object.assign({},e)}default:return e}}function _(e,t=0,n=[]){return r.toArray(e).reduce(((e,i,r)=>(s(i)?e.push.apply(e,_(i.props.children,t+1,n.concat(i.key||r))):a(i)?e.push(o(i,{key:n.concat(String(i.key)).join(".")})):"string"!=typeof i&&"number"!=typeof i||e.push(i),e)),[])}!function(e){e[e.SetIsReadyToCompute=0]="SetIsReadyToCompute",e[e.CreatePairs=1]="CreatePairs",e[e.CalculateSizes=2]="CalculateSizes",e[e.StartDragging=3]="StartDragging",e[e.StopDragging=4]="StopDragging"}(h||(h={}));const b=e=>"changedTouches"in e;var z,w;!function(e){e.Horizontal="Horizontal",e.Vertical="Vertical"}(z||(z={})),function(e){e.Light="Light",e.Dark="Dark"}(w||(w={}));const C="undefined"!=typeof window&&"ontouchstart"in window;function y(e){return e===z.Horizontal?"col-resize":"row-resize"}const S={isReady:!1,isDragging:!1,pairs:[]};function m({direction:r=z.Horizontal,minWidths:a=[],minHeights:o=[],initialSizes:s,gutterTheme:m=w.Dark,gutterClassName:x,draggerClassName:k,children:v,onResizeStarted:R,onResizeFinished:B,classes:D=[]}){const I=_(v),[E,H]=g(f,S),j=d(null),O=d([]),N=d([]);O.current=[],N.current=[];const P=n.useCallback((e=>{H({type:h.SetIsReadyToCompute,payload:{isReady:e}})}),[]),T=n.useCallback(((e,t)=>{H({type:h.StartDragging,payload:{gutterIdx:t}});const n=E.pairs[t];null==R||R(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=y(e),n.parent.style.cursor=y(e),document.body.style.cursor=y(e)}),[E.pairs]),$=n.useCallback((()=>{H({type:h.StopDragging});const e=[];for(let t=0;t<E.pairs.length;t++){const n=E.pairs[t],i=c(r,n.parent);if(void 0===i)throw new Error("Cannot call the 'onResizeFinished' callback - parentSize is undefined");if(void 0===n.gutterSize)throw new Error("Cannot call 'onResizeFinished' callback - gutterSize is undefined");const a=0===t,o=t===E.pairs.length-1,g=n.a.getBoundingClientRect()[r===z.Horizontal?"width":"height"],{aGutterSize:d,bGutterSize:s}=p(n.gutterSize,a,o),l=(g+d)/i*100;if(e.push(l),o){const t=(n.b.getBoundingClientRect()[r===z.Horizontal?"width":"height"]+s)/i*100;e.push(t)}}if(void 0===E.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=E.pairs[E.draggingIdx];null==B||B(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[E.draggingIdx,E.pairs,r]),F=n.useCallback(((e,t)=>{H({type:h.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),G=n.useCallback(((e,t,n)=>{H({type:h.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),L=n.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===c(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=a===t.length-1;let g;if(t.length>1){n[o?a-1:a].getBoundingClientRect()[e===z.Horizontal?"width":"height"]}g=i&&a<i.length?`calc(${i[a]}% - 0px)`:`calc(${100/t.length}% - 0px)`,e===z.Horizontal?(r.style.width=g,r.style.height="100%"):(r.style.height=g,r.style.width="100%")}))}),[]),V=n.useCallback(((e,t)=>{if(void 0===E.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=E.pairs[E.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,a=i-t/n.size*i,o=0===E.draggingIdx,g=E.draggingIdx===E.pairs.length-1,{aGutterSize:d,bGutterSize:s}=p(n.gutterSize,o,g),c=`calc(${r}% - ${d}px)`,l=`calc(${a}% - ${s}px)`;e===z.Horizontal?(n.a.style.width=c,n.b.style.width=l):(n.a.style.height=c,n.b.style.height=l)}),[E.draggingIdx,E.pairs,r]),A=n.useCallback(((e,t,n)=>{if(!E.isDragging)return;if(void 0===E.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=E.pairs[E.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){const n=b(t)?t.changedTouches[0]:t;return e===z.Horizontal?n.clientX:n.clientY}(t,e)-i.start,a=16,o=16;n.length>E.draggingIdx&&(a=n[E.draggingIdx]),n.length>=E.draggingIdx+1&&(o=n[E.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),V(t,r)}),[E.isDragging,E.draggingIdx,E.pairs,V]);const W=()=>{if(E.isDragging){if(void 0===E.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");F(r,E.draggingIdx),$()}},M=e=>{E.isDragging&&(b(e)&&e.preventDefault(),A(e,r,r===z.Horizontal?a:o))};function X(e,t){if(!e.current)throw new Error("Can't add element to ref object - ref isn't initialized");t&&!e.current.includes(t)&&e.current.push(t)}return l("mouseup",W,[E.isDragging,$]),l("mousemove",M,[r,E.isDragging,A,a,o]),l("touchend",W,[E.isDragging,$],{condition:C}),l("touchmove",M,[r,E.isDragging,A,a,o],{condition:C,passive:!C}),i((function(){if(!j.current)return;const e=j.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),n=r===z.Horizontal?e.clientWidth:e.clientHeight;P(!!t&&!!n)}));return t.observe(e),()=>{t.disconnect()}}),[j.current,r]),i((function(){if(E.isReady){if(!O.current||!N.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");I.length<=1?L(r,O.current,N.current,s):(L(r,O.current,N.current,s),G(r,O.current,N.current))}}),[v,E.isReady,r,L,G,s]),e("div",Object.assign({className:`__dbk__container ${r}`,ref:j},{children:E.isReady&&I.map(((i,a)=>t(n.Fragment,{children:[e("div",Object.assign({ref:e=>X(O,e),className:"__dbk__child-wrapper "+(a<D.length?D[a]:"")},{children:i}),void 0),a<I.length-1&&e(u,{ref:e=>X(N,e),className:x,theme:m,draggerClassName:k,direction:r,onDragging:()=>{return F(r,e=a),void T(r,e);var e}},void 0)]},a)))}),void 0)}export{w as GutterTheme,z as SplitDirection,m as default,C as isTouchDevice};
+***************************************************************************** */function l(e,t,n=[],r={condition:!0}){const{condition:a}=r,o=function(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}return n}(r,["condition"]);i((()=>(a&&window.addEventListener(e,t,o),()=>{a&&window.removeEventListener(e,t)})),[e,t,a,...n])}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("/* === Main Container === */\n.__dbk__container {\n  height: 100%;\n  width: 100%;\n\n  display: flex;\n  overflow: hidden;\n}\n\n.__dbk__container.Horizontal {\n  flex-direction: row;\n}\n\n.__dbk__container.Vertical {\n  flex-direction: column;\n}\n/* ====== */\n\n/* === Wrapper for each child element === */\n.__dbk__child-wrapper {\n  height: 100%;\n  width: 100%;\n}\n/* ====== */\n\n/* === Gutter === */\n.__dbk__gutter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n/* .__dbk__gutter > div {\n  background: red;\n} */\n.__dbk__gutter.Horizontal {\n  height: 100%;\n  padding: 0 2px;\n  flex-direction: column;\n}\n.__dbk__gutter.Horizontal:hover {\n  cursor: col-resize;\n}\n\n.__dbk__gutter.Vertical {\n  width: 100%;\n  padding: 2px 0;\n  flex-direction: row;\n}\n.__dbk__gutter.Vertical:hover {\n  cursor: row-resize;\n}\n\n.__dbk__gutter.Light {\n  background: #EDF0EF;\n}\n.__dbk__gutter.Light:hover > .__dbk__dragger {\n  background: #76747B;\n}\n\n.__dbk__gutter.Dark {\n  background: #020203;\n}\n.__dbk__gutter.Dark:hover > .__dbk__dragger {\n  background: #9995A3;\n}\n/* ====== */\n\n/* === Gutter's Dragger === */\n.__dbk__dragger {\n  border-radius: 2px;\n}\n\n.__dbk__dragger.Horizontal {\n  width: 4px;\n  height: 24px;  \n}\n\n.__dbk__dragger.Vertical {\n  width: 24px;\n  height: 4px;  \n}\n\n.__dbk__dragger.Light {\n  background: #A6ACB5;\n}\n\n.__dbk__dragger.Dark {\n  background: #434252;\n}\n/* ====== */");const u=n.forwardRef((({className:t,theme:n,draggerClassName:i,direction:r=z.Vertical,onDragging:a},o)=>{const g=`__dbk__gutter ${r} ${t||n}`,d=`__dbk__dragger ${r} ${i||n}`;return e("div",Object.assign({className:g,ref:o,dir:r,onMouseDown:a,onTouchStart:C?a:void 0},{children:e("div",{className:d},void 0)}),void 0)}));var h;function p(e,t,n){let i,r;return t?(i=e/2,r=e):n?(i=e,r=e/2):(i=e,r=e),{aGutterSize:i,bGutterSize:r}}function f(e,t){switch(t.type){case h.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case h.CreatePairs:{const{direction:n,children:i,gutters:r}=t.payload,a=i[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const o=c(n,a);if(void 0===o)throw new Error(`Cannot create pairs - parent has undefined or zero size: ${o}.`);const g=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],s=n===z.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===z.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,l=n===z.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,u=n===z.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,h={idx:t-1,a:e,b:o,gutter:d,parent:a,start:s,end:c,size:l,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};g.push(h)}})),Object.assign(Object.assign({},e),{pairs:g})}case h.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case h.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case h.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,r=e.pairs[i],a=c(n,r.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const o=r.gutter[n===z.Horizontal?"clientWidth":"clientHeight"],g=0===i,d=i===e.pairs.length-1,{aGutterSize:s,bGutterSize:l}=p(o,g,d);let u,h,f,_,b;return n===z.Horizontal?(u=r.a.getBoundingClientRect().left,h=r.b.getBoundingClientRect().right,_=(r.a.getBoundingClientRect().width+s)/a*100,b=(r.b.getBoundingClientRect().width+l)/a*100,f=r.a.getBoundingClientRect().width+s+l+r.b.getBoundingClientRect().width):(u=r.a.getBoundingClientRect().top,h=r.b.getBoundingClientRect().bottom,_=(r.a.getBoundingClientRect().height+s)/a*100,b=(r.b.getBoundingClientRect().height+l)/a*100,f=r.a.getBoundingClientRect().height+s+l+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:u,end:h,size:f,aSizePct:_,bSizePct:b,gutterSize:o}),Object.assign({},e)}default:return e}}function _(e,t=0,n=[]){return r.toArray(e).reduce(((e,i,r)=>(s(i)?e.push.apply(e,_(i.props.children,t+1,n.concat(i.key||r))):a(i)?e.push(o(i,{key:n.concat(String(i.key)).join(".")})):"string"!=typeof i&&"number"!=typeof i||e.push(i),e)),[])}!function(e){e[e.SetIsReadyToCompute=0]="SetIsReadyToCompute",e[e.CreatePairs=1]="CreatePairs",e[e.CalculateSizes=2]="CalculateSizes",e[e.StartDragging=3]="StartDragging",e[e.StopDragging=4]="StopDragging"}(h||(h={}));const b=e=>"changedTouches"in e;var z,w;!function(e){e.Horizontal="Horizontal",e.Vertical="Vertical"}(z||(z={})),function(e){e.Light="Light",e.Dark="Dark"}(w||(w={}));const C="undefined"!=typeof window&&"ontouchstart"in window;function y(e){return e===z.Horizontal?"col-resize":"row-resize"}const S={isReady:!1,isDragging:!1,pairs:[]};function m({direction:r=z.Horizontal,minWidths:a=[],minHeights:o=[],initialSizes:s,gutterTheme:m=w.Dark,gutterClassName:x,draggerClassName:k,children:v,onResizeStarted:R,onResizeFinished:B,classes:D=[]}){const I=_(v),[E,H]=g(f,S),j=d(null),O=d([]),N=d([]);O.current=[],N.current=[];const $=n.useCallback((e=>{H({type:h.SetIsReadyToCompute,payload:{isReady:e}})}),[]),P=n.useCallback(((e,t)=>{H({type:h.StartDragging,payload:{gutterIdx:t}});const n=E.pairs[t];null==R||R(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=y(e),n.parent.style.cursor=y(e),document.body.style.cursor=y(e)}),[E.pairs]),T=n.useCallback((()=>{H({type:h.StopDragging});const e=[];for(let t=0;t<E.pairs.length;t++){const n=E.pairs[t],i=c(r,n.parent);if(void 0===i)throw new Error("Cannot call the 'onResizeFinished' callback - parentSize is undefined");if(void 0===n.gutterSize)throw new Error("Cannot call 'onResizeFinished' callback - gutterSize is undefined");const a=0===t,o=t===E.pairs.length-1,g=n.a.getBoundingClientRect()[r===z.Horizontal?"width":"height"],{aGutterSize:d,bGutterSize:s}=p(n.gutterSize,a,o),l=(g+d)/i*100;if(e.push(l),o){const t=(n.b.getBoundingClientRect()[r===z.Horizontal?"width":"height"]+s)/i*100;e.push(t)}}if(void 0===E.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=E.pairs[E.draggingIdx];null==B||B(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[E.draggingIdx,E.pairs,r]),F=n.useCallback(((e,t)=>{H({type:h.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),G=n.useCallback(((e,t,n)=>{H({type:h.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),L=n.useCallback(((e,t,n,i)=>{const r=t[0].parentNode;if(!r)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===c(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=0===a,g=a===t.length-1;let d,s=0;if(t.length>1){s=n[g?a-1:a].getBoundingClientRect()[e===z.Horizontal?"width":"height"],s=o||g?s/2:s}d=i&&a<i.length?`calc(${i[a]}% - ${s}px)`:`calc(${100/t.length}% - ${s}px)`,e===z.Horizontal?(r.style.width=d,r.style.height="100%"):(r.style.height=d,r.style.width="100%")}))}),[]),V=n.useCallback(((e,t)=>{if(void 0===E.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=E.pairs[E.draggingIdx];if(void 0===n.size)throw new Error("Cannot adjust size - 'pair.size' is undefined");if(void 0===n.gutterSize)throw new Error("Cannot adjust size - 'pair.gutterSize' is undefined");const i=n.aSizePct+n.bSizePct,r=t/n.size*i,a=i-t/n.size*i,o=0===E.draggingIdx,g=E.draggingIdx===E.pairs.length-1,{aGutterSize:d,bGutterSize:s}=p(n.gutterSize,o,g),c=`calc(${r}% - ${d}px)`,l=`calc(${a}% - ${s}px)`;e===z.Horizontal?(n.a.style.width=c,n.b.style.width=l):(n.a.style.height=c,n.b.style.height=l)}),[E.draggingIdx,E.pairs,r]),A=n.useCallback(((e,t,n)=>{if(!E.isDragging)return;if(void 0===E.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=E.pairs[E.draggingIdx];if(void 0===i.start)throw new Error("Cannot drag - 'pair.start' is undefined");if(void 0===i.size)throw new Error("Cannot drag - 'pair.size' is undefined");if(void 0===i.gutterSize)throw new Error("Cannot drag - 'pair.gutterSize' is undefined");let r=function(e,t){const n=b(t)?t.changedTouches[0]:t;return e===z.Horizontal?n.clientX:n.clientY}(t,e)-i.start,a=16,o=16;n.length>E.draggingIdx&&(a=n[E.draggingIdx]),n.length>=E.draggingIdx+1&&(o=n[E.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),V(t,r)}),[E.isDragging,E.draggingIdx,E.pairs,V]);const W=()=>{if(E.isDragging){if(void 0===E.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");F(r,E.draggingIdx),T()}},M=e=>{E.isDragging&&(b(e)&&e.preventDefault(),A(e,r,r===z.Horizontal?a:o))};function X(e,t){if(!e.current)throw new Error("Can't add element to ref object - ref isn't initialized");t&&!e.current.includes(t)&&e.current.push(t)}return l("mouseup",W,[E.isDragging,T]),l("mousemove",M,[r,E.isDragging,A,a,o]),l("touchend",W,[E.isDragging,T],{condition:C}),l("touchmove",M,[r,E.isDragging,A,a,o],{condition:C,passive:!C}),i((function(){if(!j.current)return;const e=j.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),n=r===z.Horizontal?e.clientWidth:e.clientHeight;$(!!t&&!!n)}));return t.observe(e),()=>{t.disconnect()}}),[j.current,r]),i((function(){if(E.isReady){if(!O.current||!N.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");I.length<=1?L(r,O.current,N.current,s):(L(r,O.current,N.current,s),G(r,O.current,N.current))}}),[v,E.isReady,r,L,G,s]),e("div",Object.assign({className:`__dbk__container ${r}`,ref:j},{children:E.isReady&&I.map(((i,a)=>t(n.Fragment,{children:[e("div",Object.assign({ref:e=>X(O,e),className:"__dbk__child-wrapper "+(a<D.length?D[a]:"")},{children:i}),void 0),a<I.length-1&&e(u,{ref:e=>X(N,e),className:x,theme:m,draggerClassName:k,direction:r,onDragging:()=>{return F(r,e=a),void P(r,e);var e}},void 0)]},a)))}),void 0)}export{w as GutterTheme,z as SplitDirection,m as default,C as isTouchDevice};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@devbookhq/splitter",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Create resizable split views - like in VS Code",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119771

increased by0.2%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes