@devbookhq/splitter - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

lib/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);function r(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}function o(e,n,i=[]){t.useEffect((()=>(window.addEventListener(e,n),()=>window.removeEventListener(e,n))),[e,n,...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 a=i.default.forwardRef((({className:t,theme:n=exports.GutterTheme.Dark,draggerClassName:i,direction:r=exports.SplitDirection.Vertical,onMouseDown:o},a)=>{const d=`__dbk__gutter ${r} ${n} ${t||""}`,s=`__dbk__dragger ${r} ${n} ${i||""}`;return e.jsx("div",Object.assign({className:d,ref:a,dir:r,onMouseDown:o},{children:e.jsx("div",{className:s},void 0)}),void 0)}));var d,s,g;function l(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 d.SetIsReadyToCompute:return{...e,isReady:t.payload.isReady};case d.CreatePairs:{const{direction:n,children:i,gutters:o}=t.payload,a=i[0].parentNode;if(!a)throw new Error("Cannot create pairs - parent is undefined.");const d=r(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],r=i[t],d=o[t-1],g=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,l=n===exports.SplitDirection.Horizontal?r.getBoundingClientRect().right:r.getBoundingClientRect().bottom,c=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+r.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+r.getBoundingClientRect().height,u=n===exports.SplitDirection.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,p={idx:t-1,a:e,b:r,gutter:d,parent:a,start:g,end:l,size:c,gutterSize:u,aSizePct:100/i.length,bSizePct:100/i.length};s.push(p)}})),{...e,pairs:s}}case d.StartDragging:{const{gutterIdx:n}=t.payload;return{...e,isDragging:!0,draggingIdx:n}}case d.StopDragging:return{...e,isDragging:!1};case d.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,o=e.pairs[i],a=r(n,o.parent);if(!a)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const d=o.gutter[n===exports.SplitDirection.Horizontal?"clientWidth":"clientHeight"],s=0===i,g=i===e.pairs.length-1,{aGutterSize:c,bGutterSize:u}=l(d,s,g);let p,h,f,_,z;return n===exports.SplitDirection.Horizontal?(p=o.a.getBoundingClientRect().left,h=o.b.getBoundingClientRect().right,_=(o.a.getBoundingClientRect().width+c)/a*100,z=(o.b.getBoundingClientRect().width+u)/a*100,f=o.a.getBoundingClientRect().width+c+u+o.b.getBoundingClientRect().width):(p=o.a.getBoundingClientRect().top,h=o.b.getBoundingClientRect().bottom,_=(o.a.getBoundingClientRect().height+c)/a*100,z=(o.b.getBoundingClientRect().height+u)/a*100,f=o.a.getBoundingClientRect().height+c+u+o.b.getBoundingClientRect().height),e.pairs[i]={...o,start:p,end:h,size:f,aSizePct:_,bSizePct:z,gutterSize:d},{...e}}default:return 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"}(d||(d={})),exports.SplitDirection=void 0,(s=exports.SplitDirection||(exports.SplitDirection={})).Horizontal="Horizontal",s.Vertical="Vertical",exports.GutterTheme=void 0,(g=exports.GutterTheme||(exports.GutterTheme={})).Light="Light",g.Dark="Dark";function u(e){return e===exports.SplitDirection.Horizontal?"col-resize":"row-resize"}const p={isReady:!1,isDragging:!1,pairs:[]};exports.default=function({direction:n=exports.SplitDirection.Horizontal,minWidths:s=[],minHeights:g=[],initialSizes:h,gutterTheme:f=exports.GutterTheme.Dark,gutterClassName:_,draggerClassName:z,children:x,onResizeStarted:C,onResizeFinished:S,classes:b=[]}){const[w,y]=t.useReducer(c,p),m=t.useRef(null),D=t.useRef([]),R=t.useRef([]);D.current=[],R.current=[];const k=i.default.useCallback((e=>{y({type:d.SetIsReadyToCompute,payload:{isReady:e}})}),[]),v=i.default.useCallback(((e,t)=>{y({type:d.StartDragging,payload:{gutterIdx:t}});const n=w.pairs[t];C?.(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=u(e),n.parent.style.cursor=u(e),document.body.style.cursor=u(e)}),[w.pairs]),B=i.default.useCallback((()=>{y({type:d.StopDragging});const e=[];for(let t=0;t<w.pairs.length;t++){const i=w.pairs[t],o=r(n,i.parent);if(void 0===o)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===w.pairs.length-1,s=i.a.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"],{aGutterSize:g,bGutterSize:c}=l(i.gutterSize,a,d),u=(s+g)/o*100;if(e.push(u),d){const t=(i.b.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"]+c)/o*100;e.push(t)}}if(void 0===w.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=w.pairs[w.draggingIdx];S?.(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[w.draggingIdx,w.pairs,n]),E=i.default.useCallback(((e,t)=>{y({type:d.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),I=i.default.useCallback(((e,t,n)=>{y({type:d.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),H=i.default.useCallback(((e,t,n,i)=>{const o=t[0].parentNode;if(!o)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===r(e,o))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=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%")}))}),[]),j=i.default.useCallback(((e,t)=>{if(void 0===w.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=w.pairs[w.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===w.draggingIdx,d=w.draggingIdx===w.pairs.length-1,{aGutterSize:s,bGutterSize:g}=l(n.gutterSize,a,d),c=`calc(${r}% - ${s}px)`,u=`calc(${o}% - ${g}px)`;e===exports.SplitDirection.Horizontal?(n.a.style.width=c,n.b.style.width=u):(n.a.style.height=c,n.b.style.height=u)}),[w.draggingIdx,w.pairs,n]),$=i.default.useCallback(((e,t,n)=>{if(!w.isDragging)return;if(void 0===w.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=w.pairs[w.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){return e===exports.SplitDirection.Horizontal?t.clientX:t.clientY}(t,e)-i.start,o=16,a=16;n.length>w.draggingIdx&&(o=n[w.draggingIdx]),n.length>=w.draggingIdx+1&&(a=n[w.draggingIdx+1]),r<i.gutterSize+o&&(r=i.gutterSize+o),r>=i.size-(i.gutterSize+a)&&(r=i.size-(i.gutterSize+a)),j(t,r)}),[w.isDragging,w.draggingIdx,w.pairs,j]);function G(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 o("mouseup",(()=>{if(w.isDragging){if(void 0===w.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");E(n,w.draggingIdx),B()}}),[w.isDragging,B]),o("mousemove",(e=>{w.isDragging&&$(e,n,n===exports.SplitDirection.Horizontal?s:g)}),[n,w.isDragging,$,s,g]),t.useEffect((function(){if(!m.current)return;const e=m.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),i=n===exports.SplitDirection.Horizontal?e.clientWidth:e.clientHeight;k(!!t&&!!i)}));return t.observe(e),()=>{t.disconnect()}}),[m.current,n]),t.useEffect((function(){if(w.isReady){if(void 0===x)throw new Error("Cannot initialize split - 'children' is undefined");if(Array.isArray(x)&&!(x.length<=1)){if(!D.current||!R.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");H(n,D.current,R.current,h),I(n,D.current,R.current)}}}),[w.isReady,n,H,I,h]),e.jsxs("div",Object.assign({className:`__dbk__container ${n}`,ref:m},{children:[x&&!Array.isArray(x)&&e.jsx("div",{children:x},void 0),w.isReady&&x&&Array.isArray(x)&&x.map(((t,r)=>e.jsxs(i.default.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>G(D,e),className:"__dbk__child-wrapper "+(r<b.length?b[r]:"")},{children:t}),void 0),r<x.length-1&&e.jsx(a,{ref:e=>G(R,e),className:_,theme:f,draggerClassName:z,direction:n,onMouseDown:e=>function(e,t){t.preventDefault(),E(n,e),v(n,e)}(r,e)},void 0)]},r)))]}),void 0)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);function r(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}function a(e,n,i=[]){t.useEffect((()=>(window.addEventListener(e,n),()=>window.removeEventListener(e,n))),[e,n,...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 o=i.default.forwardRef((({className:t,theme:n=exports.GutterTheme.Dark,draggerClassName:i,direction:r=exports.SplitDirection.Vertical,onMouseDown:a},o)=>{const d=`__dbk__gutter ${r} ${n} ${t||""}`,s=`__dbk__dragger ${r} ${n} ${i||""}`;return e.jsx("div",Object.assign({className:d,ref:o,dir:r,onMouseDown:a},{children:e.jsx("div",{className:s},void 0)}),void 0)}));var d,s,g;function c(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 l(e,t){switch(t.type){case d.SetIsReadyToCompute:return Object.assign(Object.assign({},e),{isReady:t.payload.isReady});case d.CreatePairs:{const{direction:n,children:i,gutters:a}=t.payload,o=i[0].parentNode;if(!o)throw new Error("Cannot create pairs - parent is undefined.");const d=r(n,o);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],r=i[t],d=a[t-1],g=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,c=n===exports.SplitDirection.Horizontal?r.getBoundingClientRect().right:r.getBoundingClientRect().bottom,l=n===exports.SplitDirection.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+r.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+r.getBoundingClientRect().height,u=n===exports.SplitDirection.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,p={idx:t-1,a:e,b:r,gutter:d,parent:o,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 d.StartDragging:{const{gutterIdx:n}=t.payload;return Object.assign(Object.assign({},e),{isDragging:!0,draggingIdx:n})}case d.StopDragging:return Object.assign(Object.assign({},e),{isDragging:!1});case d.CalculateSizes:{const{direction:n,gutterIdx:i}=t.payload,a=e.pairs[i],o=r(n,a.parent);if(!o)throw new Error("Cannot calculate sizes - 'pair.parent' has undefined or zero size.");const d=a.gutter[n===exports.SplitDirection.Horizontal?"clientWidth":"clientHeight"],s=0===i,g=i===e.pairs.length-1,{aGutterSize:l,bGutterSize:u}=c(d,s,g);let p,h,f,_,z;return n===exports.SplitDirection.Horizontal?(p=a.a.getBoundingClientRect().left,h=a.b.getBoundingClientRect().right,_=(a.a.getBoundingClientRect().width+l)/o*100,z=(a.b.getBoundingClientRect().width+u)/o*100,f=a.a.getBoundingClientRect().width+l+u+a.b.getBoundingClientRect().width):(p=a.a.getBoundingClientRect().top,h=a.b.getBoundingClientRect().bottom,_=(a.a.getBoundingClientRect().height+l)/o*100,z=(a.b.getBoundingClientRect().height+u)/o*100,f=a.a.getBoundingClientRect().height+l+u+a.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},a),{start:p,end:h,size:f,aSizePct:_,bSizePct:z,gutterSize:d}),Object.assign({},e)}default:return 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"}(d||(d={})),exports.SplitDirection=void 0,(s=exports.SplitDirection||(exports.SplitDirection={})).Horizontal="Horizontal",s.Vertical="Vertical",exports.GutterTheme=void 0,(g=exports.GutterTheme||(exports.GutterTheme={})).Light="Light",g.Dark="Dark";function u(e){return e===exports.SplitDirection.Horizontal?"col-resize":"row-resize"}const p={isReady:!1,isDragging:!1,pairs:[]};exports.default=function({direction:n=exports.SplitDirection.Horizontal,minWidths:s=[],minHeights:g=[],initialSizes:h,gutterTheme:f=exports.GutterTheme.Dark,gutterClassName:_,draggerClassName:z,children:b,onResizeStarted:x,onResizeFinished:C,classes:S=[]}){const[w,y]=t.useReducer(l,p),m=t.useRef(null),D=t.useRef([]),R=t.useRef([]);D.current=[],R.current=[];const k=i.default.useCallback((e=>{y({type:d.SetIsReadyToCompute,payload:{isReady:e}})}),[]),v=i.default.useCallback(((e,t)=>{y({type:d.StartDragging,payload:{gutterIdx:t}});const n=w.pairs[t];null==x||x(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=u(e),n.parent.style.cursor=u(e),document.body.style.cursor=u(e)}),[w.pairs]),B=i.default.useCallback((()=>{y({type:d.StopDragging});const e=[];for(let t=0;t<w.pairs.length;t++){const i=w.pairs[t],a=r(n,i.parent);if(void 0===a)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 o=0===t,d=t===w.pairs.length-1,s=i.a.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"],{aGutterSize:g,bGutterSize:l}=c(i.gutterSize,o,d),u=(s+g)/a*100;if(e.push(u),d){const t=(i.b.getBoundingClientRect()[n===exports.SplitDirection.Horizontal?"width":"height"]+l)/a*100;e.push(t)}}if(void 0===w.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=w.pairs[w.draggingIdx];null==C||C(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[w.draggingIdx,w.pairs,n]),E=i.default.useCallback(((e,t)=>{y({type:d.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),I=i.default.useCallback(((e,t,n)=>{y({type:d.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),j=i.default.useCallback(((e,t,n,i)=>{const a=t[0].parentNode;if(!a)throw new Error("Cannot set initial sizes - parent is undefined");if(void 0===r(e,a))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=0===a,d=a===t.length-1;let s,g=n[d?a-1:a].getBoundingClientRect()[e===exports.SplitDirection.Horizontal?"width":"height"];g=o||d?g/2:g,s=i&&a<i.length?`calc(${i[a]}% - ${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%")}))}),[]),H=i.default.useCallback(((e,t)=>{if(void 0===w.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=w.pairs[w.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===w.draggingIdx,d=w.draggingIdx===w.pairs.length-1,{aGutterSize:s,bGutterSize:g}=c(n.gutterSize,o,d),l=`calc(${r}% - ${s}px)`,u=`calc(${a}% - ${g}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)}),[w.draggingIdx,w.pairs,n]),O=i.default.useCallback(((e,t,n)=>{if(!w.isDragging)return;if(void 0===w.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=w.pairs[w.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){return e===exports.SplitDirection.Horizontal?t.clientX:t.clientY}(t,e)-i.start,a=16,o=16;n.length>w.draggingIdx&&(a=n[w.draggingIdx]),n.length>=w.draggingIdx+1&&(o=n[w.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),H(t,r)}),[w.isDragging,w.draggingIdx,w.pairs,H]);function $(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",(()=>{if(w.isDragging){if(void 0===w.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");E(n,w.draggingIdx),B()}}),[w.isDragging,B]),a("mousemove",(e=>{w.isDragging&&O(e,n,n===exports.SplitDirection.Horizontal?s:g)}),[n,w.isDragging,O,s,g]),t.useEffect((function(){if(!m.current)return;const e=m.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),i=n===exports.SplitDirection.Horizontal?e.clientWidth:e.clientHeight;k(!!t&&!!i)}));return t.observe(e),()=>{t.disconnect()}}),[m.current,n]),t.useEffect((function(){if(w.isReady){if(void 0===b)throw new Error("Cannot initialize split - 'children' is undefined");if(Array.isArray(b)&&!(b.length<=1)){if(!D.current||!R.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");j(n,D.current,R.current,h),I(n,D.current,R.current)}}}),[w.isReady,n,j,I,h]),e.jsxs("div",Object.assign({className:`__dbk__container ${n}`,ref:m},{children:[b&&!Array.isArray(b)&&e.jsx("div",{children:b},void 0),w.isReady&&b&&Array.isArray(b)&&b.map(((t,r)=>e.jsxs(i.default.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>$(D,e),className:"__dbk__child-wrapper "+(r<S.length?S[r]:"")},{children:t}),void 0),r<b.length-1&&e.jsx(o,{ref:e=>$(R,e),className:_,theme:f,draggerClassName:z,direction:n,onMouseDown:e=>function(e,t){t.preventDefault(),E(n,e),v(n,e)}(r,e)},void 0)]},r)))]}),void 0)};
 //# sourceMappingURL=index.js.map

lib/mjs/index.js

@@ -1,2 +0,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useEffect as i,useReducer as r,useRef as a}from"react";function o(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===c.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===c.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}function d(e,t,n=[]){i((()=>(window.addEventListener(e,t),()=>window.removeEventListener(e,t))),[e,t,...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 g=n.forwardRef((({className:t,theme:n=l.Dark,draggerClassName:i,direction:r=c.Vertical,onMouseDown:a},o)=>{const d=`__dbk__gutter ${r} ${n} ${t||""}`,g=`__dbk__dragger ${r} ${n} ${i||""}`;return e("div",Object.assign({className:d,ref:o,dir:r,onMouseDown:a},{children:e("div",{className:g},void 0)}),void 0)}));var s,c,l;function u(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 h(e,t){switch(t.type){case s.SetIsReadyToCompute:return{...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 g=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],s=n===c.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,l=n===c.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,u=n===c.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,h=n===c.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,p={idx:t-1,a:e,b:o,gutter:d,parent:a,start:s,end:l,size:u,gutterSize:h,aSizePct:100/i.length,bSizePct:100/i.length};g.push(p)}})),{...e,pairs:g}}case s.StartDragging:{const{gutterIdx:n}=t.payload;return{...e,isDragging:!0,draggingIdx:n}}case s.StopDragging:return{...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===c.Horizontal?"clientWidth":"clientHeight"],g=0===i,s=i===e.pairs.length-1,{aGutterSize:l,bGutterSize:h}=u(d,g,s);let p,_,f,z,C;return n===c.Horizontal?(p=r.a.getBoundingClientRect().left,_=r.b.getBoundingClientRect().right,z=(r.a.getBoundingClientRect().width+l)/a*100,C=(r.b.getBoundingClientRect().width+h)/a*100,f=r.a.getBoundingClientRect().width+l+h+r.b.getBoundingClientRect().width):(p=r.a.getBoundingClientRect().top,_=r.b.getBoundingClientRect().bottom,z=(r.a.getBoundingClientRect().height+l)/a*100,C=(r.b.getBoundingClientRect().height+h)/a*100,f=r.a.getBoundingClientRect().height+l+h+r.b.getBoundingClientRect().height),e.pairs[i]={...r,start:p,end:_,size:f,aSizePct:z,bSizePct:C,gutterSize:d},{...e}}default:return 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={})),function(e){e.Horizontal="Horizontal",e.Vertical="Vertical"}(c||(c={})),function(e){e.Light="Light",e.Dark="Dark"}(l||(l={}));function p(e){return e===c.Horizontal?"col-resize":"row-resize"}const _={isReady:!1,isDragging:!1,pairs:[]};function f({direction:f=c.Horizontal,minWidths:z=[],minHeights:C=[],initialSizes:w,gutterTheme:b=l.Dark,gutterClassName:y,draggerClassName:S,children:m,onResizeStarted:x,onResizeFinished:k,classes:R=[]}){const[v,B]=r(h,_),D=a(null),I=a([]),E=a([]);I.current=[],E.current=[];const H=n.useCallback((e=>{B({type:s.SetIsReadyToCompute,payload:{isReady:e}})}),[]),$=n.useCallback(((e,t)=>{B({type:s.StartDragging,payload:{gutterIdx:t}});const n=v.pairs[t];x?.(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=p(e),n.parent.style.cursor=p(e),document.body.style.cursor=p(e)}),[v.pairs]),N=n.useCallback((()=>{B({type:s.StopDragging});const e=[];for(let t=0;t<v.pairs.length;t++){const n=v.pairs[t],i=o(f,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 r=0===t,a=t===v.pairs.length-1,d=n.a.getBoundingClientRect()[f===c.Horizontal?"width":"height"],{aGutterSize:g,bGutterSize:s}=u(n.gutterSize,r,a),l=(d+g)/i*100;if(e.push(l),a){const t=(n.b.getBoundingClientRect()[f===c.Horizontal?"width":"height"]+s)/i*100;e.push(t)}}if(void 0===v.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=v.pairs[v.draggingIdx];k?.(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[v.draggingIdx,v.pairs,f]),A=n.useCallback(((e,t)=>{B({type:s.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),F=n.useCallback(((e,t,n)=>{B({type:s.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),G=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===o(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=0===a,d=a===t.length-1;let g,s=n[d?a-1:a].getBoundingClientRect()[e===c.Horizontal?"width":"height"];s=o||d?s/2:s,g=i&&a<i.length?`calc(${i[a]}% - ${s}px)`:`calc(${100/t.length}% - ${s}px)`,e===c.Horizontal?(r.style.width=g,r.style.height="100%"):(r.style.height=g,r.style.width="100%")}))}),[]),P=n.useCallback(((e,t)=>{if(void 0===v.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=v.pairs[v.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===v.draggingIdx,d=v.draggingIdx===v.pairs.length-1,{aGutterSize:g,bGutterSize:s}=u(n.gutterSize,o,d),l=`calc(${r}% - ${g}px)`,h=`calc(${a}% - ${s}px)`;e===c.Horizontal?(n.a.style.width=l,n.b.style.width=h):(n.a.style.height=l,n.b.style.height=h)}),[v.draggingIdx,v.pairs,f]),j=n.useCallback(((e,t,n)=>{if(!v.isDragging)return;if(void 0===v.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=v.pairs[v.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){return e===c.Horizontal?t.clientX:t.clientY}(t,e)-i.start,a=16,o=16;n.length>v.draggingIdx&&(a=n[v.draggingIdx]),n.length>=v.draggingIdx+1&&(o=n[v.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),P(t,r)}),[v.isDragging,v.draggingIdx,v.pairs,P]);function T(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 d("mouseup",(()=>{if(v.isDragging){if(void 0===v.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");A(f,v.draggingIdx),N()}}),[v.isDragging,N]),d("mousemove",(e=>{v.isDragging&&j(e,f,f===c.Horizontal?z:C)}),[f,v.isDragging,j,z,C]),i((function(){if(!D.current)return;const e=D.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),n=f===c.Horizontal?e.clientWidth:e.clientHeight;H(!!t&&!!n)}));return t.observe(e),()=>{t.disconnect()}}),[D.current,f]),i((function(){if(v.isReady){if(void 0===m)throw new Error("Cannot initialize split - 'children' is undefined");if(Array.isArray(m)&&!(m.length<=1)){if(!I.current||!E.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");G(f,I.current,E.current,w),F(f,I.current,E.current)}}}),[v.isReady,f,G,F,w]),t("div",Object.assign({className:`__dbk__container ${f}`,ref:D},{children:[m&&!Array.isArray(m)&&e("div",{children:m},void 0),v.isReady&&m&&Array.isArray(m)&&m.map(((i,r)=>t(n.Fragment,{children:[e("div",Object.assign({ref:e=>T(I,e),className:"__dbk__child-wrapper "+(r<R.length?R[r]:"")},{children:i}),void 0),r<m.length-1&&e(g,{ref:e=>T(E,e),className:y,theme:b,draggerClassName:S,direction:f,onMouseDown:e=>function(e,t){t.preventDefault(),A(f,e),$(f,e)}(r,e)},void 0)]},r)))]}),void 0)}export{l as GutterTheme,c as SplitDirection,f as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useEffect as i,useReducer as r,useRef as a}from"react";function o(e,t){const n=getComputedStyle(t);if(!n)return;let i=e===c.Horizontal?t.clientWidth:t.clientHeight;return 0!==i?(e===c.Horizontal?i-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight):i-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom),i):void 0}function d(e,t,n=[]){i((()=>(window.addEventListener(e,t),()=>window.removeEventListener(e,t))),[e,t,...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 g=n.forwardRef((({className:t,theme:n=l.Dark,draggerClassName:i,direction:r=c.Vertical,onMouseDown:a},o)=>{const d=`__dbk__gutter ${r} ${n} ${t||""}`,g=`__dbk__dragger ${r} ${n} ${i||""}`;return e("div",Object.assign({className:d,ref:o,dir:r,onMouseDown:a},{children:e("div",{className:g},void 0)}),void 0)}));var s,c,l;function u(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 h(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 g=[];return i.forEach(((e,t)=>{if(t>0){const e=i[t-1],o=i[t],d=r[t-1],s=n===c.Horizontal?e.getBoundingClientRect().left:e.getBoundingClientRect().top,l=n===c.Horizontal?o.getBoundingClientRect().right:o.getBoundingClientRect().bottom,u=n===c.Horizontal?e.getBoundingClientRect().width+d.getBoundingClientRect().width+o.getBoundingClientRect().width:e.getBoundingClientRect().height+d.getBoundingClientRect().height+o.getBoundingClientRect().height,h=n===c.Horizontal?d.getBoundingClientRect().width:d.getBoundingClientRect().height,p={idx:t-1,a:e,b:o,gutter:d,parent:a,start:s,end:l,size:u,gutterSize:h,aSizePct:100/i.length,bSizePct:100/i.length};g.push(p)}})),Object.assign(Object.assign({},e),{pairs:g})}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===c.Horizontal?"clientWidth":"clientHeight"],g=0===i,s=i===e.pairs.length-1,{aGutterSize:l,bGutterSize:h}=u(d,g,s);let p,_,f,z,b;return n===c.Horizontal?(p=r.a.getBoundingClientRect().left,_=r.b.getBoundingClientRect().right,z=(r.a.getBoundingClientRect().width+l)/a*100,b=(r.b.getBoundingClientRect().width+h)/a*100,f=r.a.getBoundingClientRect().width+l+h+r.b.getBoundingClientRect().width):(p=r.a.getBoundingClientRect().top,_=r.b.getBoundingClientRect().bottom,z=(r.a.getBoundingClientRect().height+l)/a*100,b=(r.b.getBoundingClientRect().height+h)/a*100,f=r.a.getBoundingClientRect().height+l+h+r.b.getBoundingClientRect().height),e.pairs[i]=Object.assign(Object.assign({},r),{start:p,end:_,size:f,aSizePct:z,bSizePct:b,gutterSize:d}),Object.assign({},e)}default:return 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={})),function(e){e.Horizontal="Horizontal",e.Vertical="Vertical"}(c||(c={})),function(e){e.Light="Light",e.Dark="Dark"}(l||(l={}));function p(e){return e===c.Horizontal?"col-resize":"row-resize"}const _={isReady:!1,isDragging:!1,pairs:[]};function f({direction:f=c.Horizontal,minWidths:z=[],minHeights:b=[],initialSizes:C,gutterTheme:w=l.Dark,gutterClassName:y,draggerClassName:S,children:m,onResizeStarted:x,onResizeFinished:k,classes:R=[]}){const[v,B]=r(h,_),D=a(null),I=a([]),E=a([]);I.current=[],E.current=[];const H=n.useCallback((e=>{B({type:s.SetIsReadyToCompute,payload:{isReady:e}})}),[]),j=n.useCallback(((e,t)=>{B({type:s.StartDragging,payload:{gutterIdx:t}});const n=v.pairs[t];null==x||x(n.idx),n.a.style.userSelect="none",n.b.style.userSelect="none",n.gutter.style.cursor=p(e),n.parent.style.cursor=p(e),document.body.style.cursor=p(e)}),[v.pairs]),$=n.useCallback((()=>{B({type:s.StopDragging});const e=[];for(let t=0;t<v.pairs.length;t++){const n=v.pairs[t],i=o(f,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 r=0===t,a=t===v.pairs.length-1,d=n.a.getBoundingClientRect()[f===c.Horizontal?"width":"height"],{aGutterSize:g,bGutterSize:s}=u(n.gutterSize,r,a),l=(d+g)/i*100;if(e.push(l),a){const t=(n.b.getBoundingClientRect()[f===c.Horizontal?"width":"height"]+s)/i*100;e.push(t)}}if(void 0===v.draggingIdx)throw new Error("Could not reset cursor and user-select because 'state.draggingIdx' is undefined");const t=v.pairs[v.draggingIdx];null==k||k(t.idx,e),t.a.style.userSelect="",t.b.style.userSelect="",t.gutter.style.cursor="",t.parent.style.cursor="",document.body.style.cursor=""}),[v.draggingIdx,v.pairs,f]),O=n.useCallback(((e,t)=>{B({type:s.CalculateSizes,payload:{direction:e,gutterIdx:t}})}),[]),N=n.useCallback(((e,t,n)=>{B({type:s.CreatePairs,payload:{direction:e,children:t,gutters:n}})}),[]),A=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===o(e,r))throw new Error("Cannot set initial sizes - parent has undefined size");t.forEach(((r,a)=>{const o=0===a,d=a===t.length-1;let g,s=n[d?a-1:a].getBoundingClientRect()[e===c.Horizontal?"width":"height"];s=o||d?s/2:s,g=i&&a<i.length?`calc(${i[a]}% - ${s}px)`:`calc(${100/t.length}% - ${s}px)`,e===c.Horizontal?(r.style.width=g,r.style.height="100%"):(r.style.height=g,r.style.width="100%")}))}),[]),F=n.useCallback(((e,t)=>{if(void 0===v.draggingIdx)throw new Error("Cannot adjust size - 'draggingIdx' is undefined");const n=v.pairs[v.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===v.draggingIdx,d=v.draggingIdx===v.pairs.length-1,{aGutterSize:g,bGutterSize:s}=u(n.gutterSize,o,d),l=`calc(${r}% - ${g}px)`,h=`calc(${a}% - ${s}px)`;e===c.Horizontal?(n.a.style.width=l,n.b.style.width=h):(n.a.style.height=l,n.b.style.height=h)}),[v.draggingIdx,v.pairs,f]),G=n.useCallback(((e,t,n)=>{if(!v.isDragging)return;if(void 0===v.draggingIdx)throw new Error("Cannot drag - 'draggingIdx' is undefined");const i=v.pairs[v.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){return e===c.Horizontal?t.clientX:t.clientY}(t,e)-i.start,a=16,o=16;n.length>v.draggingIdx&&(a=n[v.draggingIdx]),n.length>=v.draggingIdx+1&&(o=n[v.draggingIdx+1]),r<i.gutterSize+a&&(r=i.gutterSize+a),r>=i.size-(i.gutterSize+o)&&(r=i.size-(i.gutterSize+o)),F(t,r)}),[v.isDragging,v.draggingIdx,v.pairs,F]);function P(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 d("mouseup",(()=>{if(v.isDragging){if(void 0===v.draggingIdx)throw new Error("Cannot calculate sizes after dragging = 'state.draggingIdx' is undefined");O(f,v.draggingIdx),$()}}),[v.isDragging,$]),d("mousemove",(e=>{v.isDragging&&G(e,f,f===c.Horizontal?z:b)}),[f,v.isDragging,G,z,b]),i((function(){if(!D.current)return;const e=D.current.parentElement;if(!e)return;const t=new ResizeObserver((()=>{const t=getComputedStyle(e),n=f===c.Horizontal?e.clientWidth:e.clientHeight;H(!!t&&!!n)}));return t.observe(e),()=>{t.disconnect()}}),[D.current,f]),i((function(){if(v.isReady){if(void 0===m)throw new Error("Cannot initialize split - 'children' is undefined");if(Array.isArray(m)&&!(m.length<=1)){if(!I.current||!E.current)throw new Error("Cannot create pairs - either variable 'childRefs' or 'gutterRefs' is undefined");A(f,I.current,E.current,C),N(f,I.current,E.current)}}}),[v.isReady,f,A,N,C]),t("div",Object.assign({className:`__dbk__container ${f}`,ref:D},{children:[m&&!Array.isArray(m)&&e("div",{children:m},void 0),v.isReady&&m&&Array.isArray(m)&&m.map(((i,r)=>t(n.Fragment,{children:[e("div",Object.assign({ref:e=>P(I,e),className:"__dbk__child-wrapper "+(r<R.length?R[r]:"")},{children:i}),void 0),r<m.length-1&&e(g,{ref:e=>P(E,e),className:y,theme:w,draggerClassName:S,direction:f,onMouseDown:e=>function(e,t){t.preventDefault(),O(f,e),j(f,e)}(r,e)},void 0)]},r)))]}),void 0)}export{l as GutterTheme,c as SplitDirection,f as default};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@devbookhq/splitter",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Create resizable split views - like in VS Code",
@@ -27,2 +27,3 @@ "license": "MIT",
     "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@types/node": "^12.20.4",
@@ -32,4 +33,2 @@ "@types/react": "^17.0.20",
     "autoprefixer": "^10.2.5",
-    "babel-core": "^6.26.3",
-    "babel-runtime": "^6.26.0",
     "postcss": "^8.2.7",
@@ -39,3 +38,2 @@ "rollup": "^2.56.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.4.3"
@@ -42,0 +40,0 @@ },

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

Improved metrics

Total package byte prevSize

122224

increased by139.76%

Dev dependency count

12

decreased by-14.29%

Lines of code

470

increased by0.43%

No dependency changes