react-resizable-panels 4.0.0-alpha.0 → 4.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -60,11 +60,6 @@ Documentation for this project is available at [react-resizable-panels.vercel.ap
|
|
|
60
60
|
<td><p>Default layout for the Group.</p>
|
|
61
61
|
<p>ℹ️ This value allows layouts to be remembered between page reloads.</p>
|
|
62
62
|
<p>⚠️ Refer to the documentation for how to avoid layout shift when using server components.</p>
|
|
63
|
-
</td>
|
|
64
|
-
</tr>
|
|
65
|
-
<tr>
|
|
66
|
-
<td>direction</td>
|
|
67
|
-
<td><p>Specifies the resizable direction ("horizontal" or "vertical"); defaults to "horizontal"</p>
|
|
68
63
|
</td>
|
|
69
64
|
</tr>
|
|
70
65
|
<tr>
|
|
@@ -97,12 +92,17 @@ Use this prop to disable that behavior for Panels and Separators in this group.<
|
|
|
97
92
|
<td>id</td>
|
|
98
93
|
<td><p>Uniquely identifies this group within an application.
|
|
99
94
|
Falls back to <code>useId</code> when not provided.</p>
|
|
100
|
-
<p>ℹ️ This value will also be assigned to the <code>data-group
|
|
95
|
+
<p>ℹ️ This value will also be assigned to the <code>data-group</code> attribute.</p>
|
|
101
96
|
</td>
|
|
102
97
|
</tr>
|
|
103
98
|
<tr>
|
|
104
99
|
<td>onLayoutChange</td>
|
|
105
100
|
<td><p>Called when panel sizes change; receives a map of Panel id to size.</p>
|
|
101
|
+
</td>
|
|
102
|
+
</tr>
|
|
103
|
+
<tr>
|
|
104
|
+
<td>orientation</td>
|
|
105
|
+
<td><p>Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"</p>
|
|
106
106
|
</td>
|
|
107
107
|
</tr>
|
|
108
108
|
<tr>
|
|
@@ -168,7 +168,7 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
168
168
|
<td><p>Uniquely identifies this panel within the parent group.
|
|
169
169
|
Falls back to <code>useId</code> when not provided.</p>
|
|
170
170
|
<p>ℹ️ This prop is used to associate persisted group layouts with the original panel.</p>
|
|
171
|
-
<p>ℹ️ This value will also be assigned to the <code>data-panel
|
|
171
|
+
<p>ℹ️ This value will also be assigned to the <code>data-panel</code> attribute.</p>
|
|
172
172
|
</td>
|
|
173
173
|
</tr>
|
|
174
174
|
<tr>
|
|
@@ -234,7 +234,7 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
234
234
|
<tr>
|
|
235
235
|
<td>className</td>
|
|
236
236
|
<td><p>CSS class name.</p>
|
|
237
|
-
<p>ℹ️ Use the <code>data-separator
|
|
237
|
+
<p>ℹ️ Use the <code>data-separator</code> attribute for custom <em>hover</em> and <em>active</em> styles</p>
|
|
238
238
|
<p>⚠️ The following properties cannot be overridden: <code>flex-grow</code>, <code>flex-shrink</code></p>
|
|
239
239
|
</td>
|
|
240
240
|
</tr>
|
|
@@ -247,13 +247,13 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
247
247
|
<td>id</td>
|
|
248
248
|
<td><p>Uniquely identifies the separator within the parent group.
|
|
249
249
|
Falls back to <code>useId</code> when not provided.</p>
|
|
250
|
-
<p>ℹ️ This value will also be assigned to the <code>data-separator
|
|
250
|
+
<p>ℹ️ This value will also be assigned to the <code>data-separator</code> attribute.</p>
|
|
251
251
|
</td>
|
|
252
252
|
</tr>
|
|
253
253
|
<tr>
|
|
254
254
|
<td>style</td>
|
|
255
255
|
<td><p>CSS properties.</p>
|
|
256
|
-
<p>ℹ️ Use the <code>data-separator
|
|
256
|
+
<p>ℹ️ Use the <code>data-separator</code> attribute for custom <em>hover</em> and <em>active</em> styles</p>
|
|
257
257
|
<p>⚠️ The following properties cannot be overridden: <code>flex-grow</code>, <code>flex-shrink</code></p>
|
|
258
258
|
</td>
|
|
259
259
|
</tr>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),h=require("react");function be(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function we(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function Re(e){return e/100*window.innerHeight}function Le(e){return e/100*window.innerWidth}function Pe(e){switch(typeof e){case"number":return[e,"px"];case"string":{const t=parseFloat(e);return e.endsWith("%")?[t,"%"]:e.endsWith("px")?[t,"px"]:e.endsWith("rem")?[t,"rem"]:e.endsWith("em")?[t,"em"]:e.endsWith("vh")?[t,"vh"]:e.endsWith("vw")?[t,"vw"]:[t,"%"]}}}function F({groupSize:e,panelElement:t,styleProp:n}){let o;const[r,i]=Pe(n);switch(i){case"%":{o=r/100*e;break}case"px":{o=r;break}case"rem":{o=we(t,r);break}case"em":{o=be(t,r);break}case"vh":{o=Re(r);break}case"vw":{o=Le(r);break}}return o}function L(e){return parseFloat(e.toFixed(3))}function X({group:e}){const{direction:t,panels:n}=e;return n.reduce((o,r)=>(o+=t==="horizontal"?r.element.offsetWidth:r.element.offsetHeight,o),0)}function oe(e){const{panels:t}=e,n=X({group:e});return t.map(o=>{const{element:r,panelConstraints:i}=o;let a=0;if(i.collapsedSize){const u=F({groupSize:n,panelElement:r,styleProp:i.collapsedSize});a=L(u/n*100)}let s;if(i.defaultSize){const u=F({groupSize:n,panelElement:r,styleProp:i.defaultSize});s=L(u/n*100)}let l=0;if(i.minSize){const u=F({groupSize:n,panelElement:r,styleProp:i.minSize});l=L(u/n*100)}let c=100;if(i.maxSize){const u=F({groupSize:n,panelElement:r,styleProp:i.maxSize});c=L(u/n*100)}return{collapsedSize:a,collapsible:i.collapsible===!0,defaultSize:s,minSize:l,maxSize:c,panelId:o.id}})}class Ce{#e={};addListener(t,n){const o=this.#e[t];return o===void 0?this.#e[t]=[n]:o.includes(n)||o.push(n),()=>{this.removeListener(t,n)}}emit(t,n){const o=this.#e[t];if(o!==void 0)if(o.length===1)o[0].call(null,n);else{let r=!1,i=null;const a=Array.from(o);for(let s=0;s<a.length;s++){const l=a[s];try{l.call(null,n)}catch(c){i===null&&(r=!0,i=c)}}if(r)throw i}}removeAllListeners(){this.#e={}}removeListener(t,n){const o=this.#e[t];if(o!==void 0){const r=o.indexOf(n);r>=0&&o.splice(r,1)}}}let E={cursorFlags:0,interactionState:{state:"inactive"},mountedGroups:new Map};const D=new Ce;function I(){return E}function M(e){const t=typeof e=="function"?e(E):e;return E===t||(E={...E,...t},t.cursorFlags!==void 0&&D.emit("cursorFlagsChange",E.cursorFlags),t.interactionState!==void 0&&D.emit("interactionStateChange",E.interactionState),t.mountedGroups!==void 0&&D.emit("mountedGroupsChange",E.mountedGroups)),E}const Ee=e=>e,U=()=>{},le=1,ce=2,ue=4,fe=8,ie={coarse:10,precise:5};function Ge(e){const{direction:t,element:n,panels:o,separators:r}=e,i=Array.from(n.children).filter(c=>c instanceof HTMLElement).sort((c,u)=>{const f=c.getBoundingClientRect(),p=u.getBoundingClientRect();return t==="horizontal"?f.left-p.left:f.top-p.top}),a=[];let s,l;for(const c of i){const u=o.find(f=>f.element===c);if(u){if(s){const f=s.element.getBoundingClientRect(),p=c.getBoundingClientRect();a.push({group:e,panels:[s,u],separator:l,rect:t==="horizontal"?new DOMRect(f.right,p.top,p.left-f.right,p.height):new DOMRect(p.left,f.bottom,p.width,p.top-f.bottom)})}s=u}else{const f=r.find(p=>p.element===c);f?l=f:(s=void 0,l=void 0)}}return a}function Me(e,t){return{x:e.x>=t.left&&e.x<=t.right?0:Math.min(Math.abs(e.x-t.left),Math.abs(e.x-t.right)),y:e.y>=t.top&&e.y<=t.bottom?0:Math.min(Math.abs(e.y-t.top),Math.abs(e.y-t.bottom))}}function Ie(e,t,n){let o,r={x:1/0,y:1/0};for(const i of t){const a=Me(n,i.rect);switch(e){case"horizontal":{a.x<=r.x&&(o=i,r=a);break}case"vertical":{a.y<=r.y&&(o=i,r=a);break}}}return o?{distance:r,hitRegion:o}:void 0}let H;function ke(){return H===void 0&&(typeof matchMedia=="function"?H=!!matchMedia("(pointer:coarse)").matches:H=!1),H}function de(e,t){const n=[];return t.forEach((o,r)=>{if(r.disabled)return;const i=ke()?ie.coarse:ie.precise,a=Ge(r),s=Ie(r.direction,a,{x:e.clientX,y:e.clientY});s&&s.distance.x<=i&&s.distance.y<=i&&n.push(s.hitRegion)}),n}function se(e){if(e.defaultPrevented)return;const{mountedGroups:t}=I(),n=de(e,t),o=new Set,r=new Set,i=new Set,a=new Map;n.forEach(s=>{o.add(s.group),s.panels.forEach(c=>{r.add(c)}),s.separator&&i.add(s.separator);const l=t.get(s.group);l&&a.set(s.group,l.layout)}),M({interactionState:{hitRegions:n,initialLayoutMap:a,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function Oe({cursorFlags:e,groups:t,state:n}){let o=0,r=0;switch(n){case"active":case"hover":t.forEach(i=>{if(!i.disableCursor)switch(i.direction){case"horizontal":{o++;break}case"vertical":{r++;break}}})}if(o===0&&r===0)return null;switch(n){case"active":{const i=(e&le)!==0,a=(e&ce)!==0,s=(e&ue)!==0,l=(e&fe)!==0;if(e){if(i)return s?"se-resize":l?"ne-resize":"e-resize";if(a)return s?"sw-resize":l?"nw-resize":"w-resize";if(s)return"s-resize";if(l)return"n-resize"}break}}return o>0&&r>0?"move":o>0?"ew-resize":"ns-resize"}let K=null,C;function V(){C===void 0&&(C=new CSSStyleSheet,document.adoptedStyleSheets=[C]);const{cursorFlags:e,interactionState:t}=I();switch(t.state){case"active":case"hover":{const n=Oe({cursorFlags:e,groups:t.hitRegions.map(o=>o.group),state:t.state});if(K===n)return;K=n,n?C.cssRules.length===0?C.insertRule(`*{cursor: ${n} !important;}`):C.replaceSync(`*{cursor: ${n} !important;}`):C.cssRules.length===1&&C.deleteRule(0);break}case"inactive":{K=null,C.cssRules.length===1&&C.deleteRule(0);break}}}function G(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}function Ae(e,t){if(e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!=t[n])return!1;return!0}function R(e,t,n=0){return Math.abs(L(e)-L(t))<=n}function q(e,t){return R(e,t)?0:e>t?1:-1}function T({panelConstraints:e,size:t}){const{collapsedSize:n=0,collapsible:o,maxSize:r=100,minSize:i=0}=e;if(q(t,i)<0)if(o){const a=(n+i)/2;q(t,a)<0?t=n:t=i}else t=i;return t=Math.min(r,t),t=L(t),t}function Ne({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:r,trigger:i}){if(R(e,0))return t;const a=Object.values(t),s=Object.values(r),l=[...a],[c,u]=o;G(c!=null,"Invalid first pivot index"),G(u!=null,"Invalid second pivot index");let f=0;{const v=e<0?1:-1;let d=e<0?u:c,g=0;for(;;){const z=a[d];G(z!=null,`Previous layout not found for panel index ${d}`);const S=T({panelConstraints:n[d],size:100})-z;if(g+=S,d+=v,d<0||d>=n.length)break}const x=Math.min(Math.abs(e),Math.abs(g));e=e<0?0-x:x}{let d=e<0?c:u;for(;d>=0&&d<n.length;){const g=Math.abs(e)-Math.abs(f),x=a[d];G(x!=null,`Previous layout not found for panel index ${d}`);const z=x-g,b=T({panelConstraints:n[d],size:z});if(!R(x,b)&&(f+=x-b,l[d]=b,f.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?d--:d++}}if(Ae(s,l))return r;{const v=e<0?u:c,d=a[v];G(d!=null,`Previous layout not found for panel index ${v}`);const g=d+f,x=T({panelConstraints:n[v],size:g});if(l[v]=x,!R(x,g)){let z=g-x,S=e<0?u:c;for(;S>=0&&S<n.length;){const P=l[S];G(P!=null,`Previous layout not found for panel index ${S}`);const k=P+z,O=T({panelConstraints:n[S],size:k});if(R(P,O)||(z-=O-P,l[S]=O),R(z,0))break;e>0?S--:S++}}}const p=Object.values(l).reduce((v,d)=>d+v,0);if(!R(p,100,.1))return r;const m=Object.keys(r);return l.reduce((v,d,g)=>(v[m[g]]=d,v),{})}function Y(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(q(e[n],t[n])!==0)return!1;return!0}function B(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=I();switch(t.state){case"active":{if(e.type!=="pointerleave"&&e.buttons===0){M(i=>i.interactionState.state==="inactive"?i:{cursorFlags:0,interactionState:{state:"inactive"}});return}let o=0;const r=new Map(n);t.hitRegions.forEach(i=>{const{direction:a,disableCursor:s,element:l,panels:c}=i.group;let u=0;t.state==="active"&&(a==="horizontal"?u=(e.clientX-t.pointerDownAtPoint.x)/l.offsetWidth*100:u=(e.clientY-t.pointerDownAtPoint.y)/l.offsetHeight*100);const f=t.initialLayoutMap.get(i.group),{derivedPanelConstraints:p,layout:m}=n.get(i.group)??{};if(p&&f&&m){const v=Ne({delta:u,initialLayout:f,panelConstraints:p,pivotIndices:i.panels.map(d=>c.indexOf(d)),prevLayout:m,trigger:"mouse-or-touch"});if(Y(v,m)){if(u!==0&&!s)switch(a){case"horizontal":{o|=u<0?le:ce;break}case"vertical":{o|=u<0?ue:fe;break}}}else{r.set(i.group,{derivedPanelConstraints:p,layout:v});const d=i.group.panels.map(({id:g})=>g).join(",");i.group.inMemoryLayouts[d]=v}}}),M({cursorFlags:o,mountedGroups:r}),V();break}default:{const o=de(e,n);o.length===0?t.state!=="inactive"&&M({interactionState:{state:"inactive"}}):M({interactionState:{hitRegions:o,state:"hover"}}),V();break}}}function re(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=I();switch(t.state){case"active":M({cursorFlags:0,interactionState:{state:"inactive"}}),V()}}function Te(e){let t=0,n=0;const o={};for(const i of e)if(i.defaultSize!==void 0){t++;const a=L(i.defaultSize);n+=a,o[i.panelId]=a}else o[i.panelId]=void 0;const r=e.length-t;if(r!==0){const i=L((100-n)/r);for(const a of e)a.defaultSize===void 0&&(o[a.panelId]=i)}return o}function De(e,t,n){const o=n[0];if(!o)return;const r=e.panels.find(a=>a.element===t);if(!r||!r.onResize)return;const i=X({group:e});r.onResize({asPercentage:L(o.inlineSize/i*100),inPixels:o.inlineSize})}function pe({layout:e,panelConstraints:t}){const o=[...Object.values(e)],r=o.reduce((s,l)=>s+l,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(s=>`${s}%`).join(", ")}`);if(!R(r,100)&&o.length>0)for(let s=0;s<t.length;s++){const l=o[s];G(l!=null,`No layout data found for index ${s}`);const c=100/r*l;o[s]=c}let i=0;for(let s=0;s<t.length;s++){const l=o[s];G(l!=null,`No layout data found for index ${s}`);const c=T({panelConstraints:t[s],size:l});l!=c&&(i+=l-c,o[s]=c)}if(!R(i,0))for(let s=0;s<t.length;s++){const l=o[s];G(l!=null,`No layout data found for index ${s}`);const c=l+i,u=T({panelConstraints:t[s],size:c});if(l!==u&&(i-=u-l,o[s]=u,R(i,0)))break}const a=Object.keys(e);return o.reduce((s,l,c)=>(s[a[c]]=l,s),{})}function _e(e){let t=!1;const n=new ResizeObserver(l=>{for(const c of l){const{borderBoxSize:u,target:f}=c;f===e.element?t&&M(p=>{const m=p.mountedGroups.get(e);return m?{mountedGroups:new Map(p.mountedGroups).set(e,{derivedPanelConstraints:oe(e),layout:m.layout})}:p}):De(e,f,u)}});n.observe(e.element),e.panels.forEach(l=>{l.onResize&&n.observe(l.element)});const o=oe(e),r=e.panels.map(({id:l})=>l).join(","),i=e.inMemoryLayouts[r]??e.defaultLayout??Te(o),a=pe({layout:i,panelConstraints:o}),s=M(l=>({mountedGroups:new Map(l.mountedGroups).set(e,{derivedPanelConstraints:o,layout:a})}));return t=!0,s.mountedGroups.size===1&&(window.addEventListener("pointerdown",se),window.addEventListener("pointerleave",B),window.addEventListener("pointermove",B),window.addEventListener("pointerup",re)),function(){const c=M(u=>{const f=new Map(u.mountedGroups);return f.delete(e),{mountedGroups:f}});t=!1,c.mountedGroups.size===0&&(window.removeEventListener("pointerdown",se),window.removeEventListener("pointerleave",B),window.removeEventListener("pointermove",B),window.removeEventListener("pointerup",re)),n.disconnect()}}function Z(e){const t=h.useId();return`${e??t}`}const _=typeof window<"u"?h.useLayoutEffect:h.useEffect;function J(e){const t=h.useRef(e);return _(()=>{t.current=e},[e]),h.useCallback(n=>t.current?.(n),[t])}function Q(...e){return J(t=>{e.forEach(n=>{if(n)switch(typeof n){case"function":{n(t);break}case"object":{n.current=t;break}}})})}const he="--react-resizable-panels--panel--pointer-events";function me(e,t){const n=e.replace(/[^a-zA-Z0-9\-_]/g,""),o=t.replace(/[^a-zA-Z0-9\-_]/g,"");return`--react-resizable-panels--${n}--${o}`}const ve=h.createContext(null);function ae(e,t){return t.sort(e==="horizontal"?(n,o)=>n.element.offsetLeft-o.element.offsetLeft:(n,o)=>n.element.offsetTop-o.element.offsetTop)}function $e({groupId:e}){const t=()=>{const{mountedGroups:n}=I();for(const[o,{derivedPanelConstraints:r,layout:i}]of n)if(o.id===e)return{derivedPanelConstraints:r,group:o,layout:i};throw Error(`Group ${e} not found`)};return{getLayout(){const{layout:n}=t();return n},setLayout(n){const{derivedPanelConstraints:o,group:r,layout:i}=t(),a=pe({layout:n,panelConstraints:o});return Y(i,a)||M(s=>({mountedGroups:new Map(s.mountedGroups).set(r,{derivedPanelConstraints:o,layout:a})})),a}}}function je(e,t){const n=h.useRef({getLayout:()=>({}),setLayout:Ee});h.useImperativeHandle(t,()=>n.current,[]),_(()=>{Object.assign(n.current,$e({groupId:e}))})}function Fe({children:e,className:t,defaultLayout:n,direction:o="horizontal",disableCursor:r,disabled:i,elementRef:a,groupRef:s,id:l,onLayoutChange:c,style:u}){const f=h.useRef({}),p=J(y=>{Y(f.current,y)||(f.current=y,c?.(y))}),m=Z(l),[v,d]=h.useState(!1),[g,x]=h.useState(null),z=h.useRef({}),[b,S]=h.useState(n??{}),[P,k]=h.useState([]),[O,te]=h.useState([]),ye=Q(x,a);je(m,s);const Se=h.useMemo(()=>({direction:o,id:m,registerPanel:y=>(k(w=>ae(o,[...w,y])),()=>{k(w=>w.filter(A=>A!==y))}),registerSeparator:y=>(te(w=>ae(o,[...w,y])),()=>{te(w=>w.filter(A=>A!==y))})}),[o,m]);_(()=>{if(g!==null&&P.length>0){const y={defaultLayout:n,direction:o,disableCursor:!!r,disabled:!!i,element:g,id:m,inMemoryLayouts:z.current,panels:P,separators:O},w=_e(y),W=I().mountedGroups.get(y);W&&(S(W.layout),p?.(W.layout));const xe=D.addListener("interactionStateChange",j=>{switch(j.state){case"active":case"hover":{d(j.hitRegions.some(N=>N.group===y));break}}}),ze=D.addListener("mountedGroupsChange",j=>{const N=j.get(y);N&&N.derivedPanelConstraints.length>0&&(S(N.layout),p?.(N.layout))});return()=>{w(),xe(),ze()}}},[n,o,r,i,g,m,p,P,O]);const ne={[he]:v?"none":void 0};for(const y in b){const w=me(m,y),A=b[y];ne[w]=A}return $.jsx(ve.Provider,{value:Se,children:$.jsx("div",{className:t,"data-group":!0,"data-group-id":m,"data-group-direction":o,ref:ye,style:{...u,...ne,display:"flex",flexDirection:o==="horizontal"?"row":"column",flexWrap:"nowrap",overflow:"hidden"},children:e})})}function ge(e){return`react-resizable-panels:${e}`}function He({id:e,storage:t}){try{const n=ge(e),o=t.getItem(n);if(o)return JSON.parse(o)}catch(n){console.error(n)}}function Be({id:e,layout:t,storage:n}){try{const o=ge(e);n.setItem(o,JSON.stringify(t))}catch(o){console.error(o)}}function We({groupId:e,storage:t=localStorage}){const n=h.useRef(null);n.current===null&&(n.current=He({id:e,storage:t}));const o=h.useCallback(r=>Be({id:e,layout:r,storage:t}),[e,t]);return{defaultLayout:n.current,onLayoutChange:o}}function Ue(){return h.useState(null)}function Ke(){return h.useRef(null)}function ee(){const e=h.useContext(ve);return G(e,"Unexpected"),e}function Ve({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:a}=I();for(const[s,{derivedPanelConstraints:l,layout:c}]of a)if(s.id===e)return{derivedPanelConstraints:l,group:s,layout:c};throw Error(`Group ${e} not found`)},o=()=>{const a=n().derivedPanelConstraints.find(s=>s.panelId===t);if(a!==void 0)return a;throw Error(`Panel constraints not found for Panel ${t}`)},r=()=>{const a=n().group.panels.find(s=>s.id===t);if(a!==void 0)return a;throw Error(`Layout not found for Panel ${t}`)},i=()=>{const a=n().layout[t];if(a!==void 0)return a;throw Error(`Layout not found for Panel ${t}`)};return{collapse:()=>{const{collapsible:a,collapsedSize:s}=o();i()},expand:()=>{const{collapsible:a,collapsedSize:s,minSize:l}=o();i()},getSize:()=>{const{group:a}=n(),s=i(),{element:l}=r(),c=a.direction==="horizontal"?l.offsetWidth:l.offsetHeight;return{asPercentage:s,inPixels:c}},isCollapsed:()=>{const{collapsible:a,collapsedSize:s}=o(),l=i();return a&&R(s,l)},resize:a=>{if(i()!==a)switch(typeof a){case"number":{const{group:l}=n(),c=X({group:l});L(a/c*100);break}}}}}function qe(e,t){const{id:n}=ee(),o=h.useRef({collapse:U,expand:U,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:U});h.useImperativeHandle(t,()=>o.current,[]),_(()=>{Object.assign(o.current,Ve({groupId:n,panelId:e}))})}function Xe({children:e,className:t,collapsedSize:n=0,collapsible:o=!1,defaultSize:r,elementRef:i,id:a,maxSize:s="100",minSize:l="0",onResize:c,panelRef:u,style:f}){const p=!!a,m=Z(a),[v,d]=h.useState(null),g=Q(d,i),{id:x,registerPanel:z}=ee(),b=c!==null,S=J(k=>{c?.(k)});_(()=>{if(v!==null)return z({element:v,id:m,idIsStable:p,onResize:b?S:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:r,maxSize:s,minSize:l}})},[n,o,r,v,b,m,p,s,l,S,z]),qe(m,u);const P=me(x,m);return $.jsx("div",{"data-panel":!0,"data-panel-id":m,ref:g,style:{flexBasis:0,flexGrow:`var(${P}, 1)`,flexShrink:1,overflow:"hidden",pointerEvents:`var(${he})`},children:$.jsx("div",{className:t,style:{width:"100%",height:"100%",...f},children:e})})}function Ye(){return h.useState(null)}function Ze(){return h.useRef(null)}function Je({children:e,className:t,elementRef:n,id:o,style:r}){const i=Z(o),[a,s]=h.useState(null),[l,c]=h.useState("inactive"),u=Q(s,n),{registerSeparator:f}=ee();return _(()=>{if(a!==null){const p={element:a,id:i},m=f(p),v=D.addListener("interactionStateChange",d=>{c(d.state!=="inactive"&&d.hitRegions.some(g=>g.separator===p)?d.state:"inactive")});return()=>{m(),v()}}},[a,i,f]),$.jsx("div",{children:e,className:t,"data-separator":!0,"data-separator-id":i,"data-separator-state":l,ref:u,style:{flexBasis:"auto",...r,flexGrow:0,flexShrink:0}})}exports.Group=Fe;exports.Panel=Xe;exports.Separator=Je;exports.useDefaultLayout=We;exports.useGroupCallbackRef=Ue;exports.useGroupRef=Ke;exports.usePanelCallbackRef=Ye;exports.usePanelRef=Ze;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react/jsx-runtime"),h=require("react");function ie(e,t){return t.sort(e==="horizontal"?Ge:Ie)}function Ge(e,t){const n=e.element.offsetLeft-t.element.offsetLeft;return n!==0?n:e.element.offsetWidth-t.element.offsetWidth}function Ie(e,t){const n=e.element.offsetTop-t.element.offsetTop;return n!==0?n:e.element.offsetHeight-t.element.offsetHeight}function ye(e){const{element:t,orientation:n,panels:o,separators:s}=e,i=ie(n,Array.from(t.children).filter(u=>u instanceof HTMLElement).map(u=>({element:u}))).map(({element:u})=>u),a=[];let r,l;for(const u of i){const c=o.find(f=>f.element===u);if(c){if(r){const f=r.element.getBoundingClientRect(),m=u.getBoundingClientRect();a.push({group:e,panels:[r,c],separator:l,rect:n==="horizontal"?new DOMRect(f.right,m.top,m.left-f.right,m.height):new DOMRect(m.left,f.bottom,m.width,m.top-f.bottom)})}r=c,l=void 0}else{const f=s.find(m=>m.element===u);f?l=f:(r=void 0,l=void 0)}}return a}function ke(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function Oe(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function De(e){return e/100*window.innerHeight}function Te(e){return e/100*window.innerWidth}function Ae(e){switch(typeof e){case"number":return[e,"px"];case"string":{const t=parseFloat(e);return e.endsWith("%")?[t,"%"]:e.endsWith("px")?[t,"px"]:e.endsWith("rem")?[t,"rem"]:e.endsWith("em")?[t,"em"]:e.endsWith("vh")?[t,"vh"]:e.endsWith("vw")?[t,"vw"]:[t,"%"]}}}function q({groupSize:e,panelElement:t,styleProp:n}){let o;const[s,i]=Ae(n);switch(i){case"%":{o=s/100*e;break}case"px":{o=s;break}case"rem":{o=Oe(t,s);break}case"em":{o=ke(t,s);break}case"vh":{o=De(s);break}case"vw":{o=Te(s);break}}return o}function C(e){return parseFloat(e.toFixed(3))}function ae({group:e}){const{orientation:t,panels:n}=e;return n.reduce((o,s)=>(o+=t==="horizontal"?s.element.offsetWidth:s.element.offsetHeight,o),0)}function de(e){const{panels:t}=e,n=ae({group:e});return t.map(o=>{const{element:s,panelConstraints:i}=o;let a=0;if(i.collapsedSize){const c=q({groupSize:n,panelElement:s,styleProp:i.collapsedSize});a=C(c/n*100)}let r;if(i.defaultSize){const c=q({groupSize:n,panelElement:s,styleProp:i.defaultSize});r=C(c/n*100)}let l=0;if(i.minSize){const c=q({groupSize:n,panelElement:s,styleProp:i.minSize});l=C(c/n*100)}let u=100;if(i.maxSize){const c=q({groupSize:n,panelElement:s,styleProp:i.maxSize});u=C(c/n*100)}return{collapsedSize:a,collapsible:i.collapsible===!0,defaultSize:r,minSize:l,maxSize:u,panelId:o.id}})}function x(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}class Ne{#e={};addListener(t,n){const o=this.#e[t];return o===void 0?this.#e[t]=[n]:o.includes(n)||o.push(n),()=>{this.removeListener(t,n)}}emit(t,n){const o=this.#e[t];if(o!==void 0)if(o.length===1)o[0].call(null,n);else{let s=!1,i=null;const a=Array.from(o);for(let r=0;r<a.length;r++){const l=a[r];try{l.call(null,n)}catch(u){i===null&&(s=!0,i=u)}}if(s)throw i}}removeAllListeners(){this.#e={}}removeListener(t,n){const o=this.#e[t];if(o!==void 0){const s=o.indexOf(n);s>=0&&o.splice(s,1)}}}function P(e,t,n=0){return Math.abs(C(e)-C(t))<=n}let R={cursorFlags:0,interactionState:{state:"inactive"},mountedGroups:new Map};const T=new Ne;function k(){return R}function M(e){const t=typeof e=="function"?e(R):e;if(R===t)return R;const n=R;return R={...R,...t},t.cursorFlags!==void 0&&T.emit("cursorFlagsChange",R.cursorFlags),t.interactionState!==void 0&&T.emit("interactionStateChange",R.interactionState),t.mountedGroups!==void 0&&(R.mountedGroups.forEach((o,s)=>{o.derivedPanelConstraints.forEach(i=>{if(i.collapsible){const{layout:a}=n.mountedGroups.get(s)??{};if(a){const r=P(i.collapsedSize,o.layout[i.panelId]),l=P(i.collapsedSize,a[i.panelId]);r&&!l&&(s.inMemoryLastExpandedPanelSizes[i.panelId]=a[i.panelId])}}})}),T.emit("mountedGroupsChange",R.mountedGroups)),R}function $e(e,t){if(e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!=t[n])return!1;return!0}function H(e,t){return P(e,t)?0:e>t?1:-1}function $({panelConstraints:e,size:t}){const{collapsedSize:n=0,collapsible:o,maxSize:s=100,minSize:i=0}=e;if(H(t,i)<0)if(o){const a=(n+i)/2;H(t,a)<0?t=n:t=i}else t=i;return t=Math.min(s,t),t=C(t),t}function J({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:s,trigger:i}){if(P(e,0))return t;const a=Object.values(t),r=Object.values(s),l=[...a],[u,c]=o;x(u!=null,"Invalid first pivot index"),x(c!=null,"Invalid second pivot index");let f=0;if(i==="keyboard"){{const p=e<0?c:u,d=n[p];x(d,`Panel constraints not found for index ${p}`);const{collapsedSize:v=0,collapsible:y,minSize:b=0}=d;if(y){const z=a[p];if(x(z!=null,`Previous layout not found for panel index ${p}`),P(z,v)){const S=b-z;H(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}{const p=e<0?u:c,d=n[p];x(d,`No panel constraints found for index ${p}`);const{collapsedSize:v=0,collapsible:y,minSize:b=0}=d;if(y){const z=a[p];if(x(z!=null,`Previous layout not found for panel index ${p}`),P(z,b)){const S=z-v;H(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}}{const p=e<0?1:-1;let d=e<0?c:u,v=0;for(;;){const b=a[d];x(b!=null,`Previous layout not found for panel index ${d}`);const S=$({panelConstraints:n[d],size:100})-b;if(v+=S,d+=p,d<0||d>=n.length)break}const y=Math.min(Math.abs(e),Math.abs(v));e=e<0?0-y:y}{let d=e<0?u:c;for(;d>=0&&d<n.length;){const v=Math.abs(e)-Math.abs(f),y=a[d];x(y!=null,`Previous layout not found for panel index ${d}`);const b=y-v,z=$({panelConstraints:n[d],size:b});if(!P(y,z)&&(f+=y-z,l[d]=z,f.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?d--:d++}}if($e(r,l))return s;{const p=e<0?c:u,d=a[p];x(d!=null,`Previous layout not found for panel index ${p}`);const v=d+f,y=$({panelConstraints:n[p],size:v});if(l[p]=y,!P(y,v)){let b=v-y,S=e<0?c:u;for(;S>=0&&S<n.length;){const L=l[S];x(L!=null,`Previous layout not found for panel index ${S}`);const G=L+b,O=$({panelConstraints:n[S],size:G});if(P(L,O)||(b-=O-L,l[S]=O),P(b,0))break;e>0?S--:S++}}}const m=Object.values(l).reduce((p,d)=>d+p,0);if(!P(m,100,.1))return s;const g=Object.keys(s);return l.reduce((p,d,v)=>(p[g[v]]=d,p),{})}function Z(e){const t=e.parentElement;x(t,"Parent group element not found");const{mountedGroups:n}=k();for(const[o]of n)if(o.element===t)return o;throw Error("Could not find parent Group for separator element")}function Q(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(H(e[n],t[n])!==0)return!1;return!0}function j({layout:e,panelConstraints:t}){const o=[...Object.values(e)],s=o.reduce((r,l)=>r+l,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(r=>`${r}%`).join(", ")}`);if(!P(s,100)&&o.length>0)for(let r=0;r<t.length;r++){const l=o[r];x(l!=null,`No layout data found for index ${r}`);const u=100/s*l;o[r]=u}let i=0;for(let r=0;r<t.length;r++){const l=o[r];x(l!=null,`No layout data found for index ${r}`);const u=$({panelConstraints:t[r],size:l});l!=u&&(i+=l-u,o[r]=u)}if(!P(i,0))for(let r=0;r<t.length;r++){const l=o[r];x(l!=null,`No layout data found for index ${r}`);const u=l+i,c=$({panelConstraints:t[r],size:u});if(l!==c&&(i-=c-l,o[r]=c,P(i,0)))break}const a=Object.keys(e);return o.reduce((r,l,u)=>(r[a[u]]=l,r),{})}function Se({groupId:e}){const t=()=>{const{mountedGroups:n}=k();for(const[o,s]of n)if(o.id===e)return{group:o,...s};throw Error(`Group ${e} not found`)};return{getLayout(){const{layout:n}=t();return n},setLayout(n){const{derivedPanelConstraints:o,group:s,layout:i,separatorToPanels:a}=t(),r=j({layout:n,panelConstraints:o});return Q(i,r)||M(l=>({mountedGroups:new Map(l.mountedGroups).set(s,{derivedPanelConstraints:o,layout:r,separatorToPanels:a})})),r}}}function ge(e){const{mountedGroups:t}=k(),n=t.get(e);return x(n,`Mounted Group ${e.id} not found`),n}function D(e,t){const n=Z(e),o=ge(n),s=n.separators.find(f=>f.element===e);x(s,"Matching separator not found");const i=o.separatorToPanels.get(s);x(i,"Matching panels not found");const a=i.map(f=>n.panels.indexOf(f)),l=Se({groupId:n.id}).getLayout(),u=J({delta:t,initialLayout:l,panelConstraints:o.derivedPanelConstraints,pivotIndices:a,prevLayout:l,trigger:"keyboard"}),c=j({layout:u,panelConstraints:o.derivedPanelConstraints});Q(l,c)||M(f=>({mountedGroups:new Map(f.mountedGroups).set(n,{derivedPanelConstraints:o.derivedPanelConstraints,layout:c,separatorToPanels:o.separatorToPanels})}))}function pe(e){if(e.defaultPrevented)return;const t=e.currentTarget,n=Z(t);if(!n.disabled)switch(e.key){case"ArrowDown":{e.preventDefault(),n.orientation==="vertical"&&D(t,5);break}case"ArrowLeft":{e.preventDefault(),n.orientation==="horizontal"&&D(t,-5);break}case"ArrowRight":{e.preventDefault(),n.orientation==="horizontal"&&D(t,5);break}case"ArrowUp":{e.preventDefault(),n.orientation==="vertical"&&D(t,-5);break}case"End":{e.preventDefault(),D(t,100);break}case"Enter":{e.preventDefault();const o=Z(t),{derivedPanelConstraints:s,layout:i,separatorToPanels:a}=ge(o),r=o.separators.find(f=>f.element===t);x(r,"Matching separator not found");const l=a.get(r);x(l,"Matching panels not found");const u=l[0],c=s.find(f=>f.panelId===u.id);if(x(c,"Panel metadata not found"),c.collapsible){const f=i[u.id],m=c.collapsedSize===f?o.inMemoryLastExpandedPanelSizes[u.id]??c.minSize:c.collapsedSize;D(t,m-f)}break}case"F6":{e.preventDefault();const s=Z(t).separators.map(l=>l.element),i=Array.from(s).findIndex(l=>l===e.currentTarget);x(i!==null,"Index not found");const a=e.shiftKey?i>0?i-1:s.length-1:i+1<s.length?i+1:0;s[a].focus();break}case"Home":{e.preventDefault(),D(t,-100);break}}}const je=e=>e,ne=()=>{},xe=1,ze=2,be=4,we=8,me={coarse:10,precise:5};function _e(e,t){return{x:e.x>=t.left&&e.x<=t.right?0:Math.min(Math.abs(e.x-t.left),Math.abs(e.x-t.right)),y:e.y>=t.top&&e.y<=t.bottom?0:Math.min(Math.abs(e.y-t.top),Math.abs(e.y-t.bottom))}}function Fe(e,t,n){let o,s={x:1/0,y:1/0};for(const i of t){const a=_e(n,i.rect);switch(e){case"horizontal":{a.x<=s.x&&(o=i,s=a);break}case"vertical":{a.y<=s.y&&(o=i,s=a);break}}}return o?{distance:s,hitRegion:o}:void 0}let X;function He(){return X===void 0&&(typeof matchMedia=="function"?X=!!matchMedia("(pointer:coarse)").matches:X=!1),X}function Le(e,t){const n=[];return t.forEach((o,s)=>{if(s.disabled)return;const i=He()?me.coarse:me.precise,a=ye(s),r=Fe(s.orientation,a,{x:e.clientX,y:e.clientY});r&&r.distance.x<=i&&r.distance.y<=i&&n.push(r.hitRegion)}),n}function he(e){if(e.defaultPrevented)return;const{mountedGroups:t}=k(),n=Le(e,t),o=new Set,s=new Set,i=new Set,a=new Map;n.forEach(r=>{o.add(r.group),r.panels.forEach(u=>{s.add(u)}),r.separator&&i.add(r.separator);const l=t.get(r.group);l&&a.set(r.group,l.layout)}),M({interactionState:{hitRegions:n,initialLayoutMap:a,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function We({cursorFlags:e,groups:t,state:n}){let o=0,s=0;switch(n){case"active":case"hover":t.forEach(i=>{if(!i.disableCursor)switch(i.orientation){case"horizontal":{o++;break}case"vertical":{s++;break}}})}if(o===0&&s===0)return null;switch(n){case"active":{const i=(e&xe)!==0,a=(e&ze)!==0,r=(e&be)!==0,l=(e&we)!==0;if(e){if(i)return r?"se-resize":l?"ne-resize":"e-resize";if(a)return r?"sw-resize":l?"nw-resize":"w-resize";if(r)return"s-resize";if(l)return"n-resize"}break}}return o>0&&s>0?"move":o>0?"ew-resize":"ns-resize"}let oe=null,I;function re(){I===void 0&&(I=new CSSStyleSheet,document.adoptedStyleSheets=[I]);const{cursorFlags:e,interactionState:t}=k();switch(t.state){case"active":case"hover":{const n=We({cursorFlags:e,groups:t.hitRegions.map(o=>o.group),state:t.state});if(oe===n)return;oe=n,n?I.cssRules.length===0?I.insertRule(`*{cursor: ${n} !important;}`):I.replaceSync(`*{cursor: ${n} !important;}`):I.cssRules.length===1&&I.deleteRule(0);break}case"inactive":{oe=null,I.cssRules.length===1&&I.deleteRule(0);break}}}function Y(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=k();switch(t.state){case"active":{if(e.type!=="pointerleave"&&e.buttons===0){M(i=>i.interactionState.state==="inactive"?i:{cursorFlags:0,interactionState:{state:"inactive"}});return}let o=0;const s=new Map(n);t.hitRegions.forEach(i=>{const{disableCursor:a,element:r,orientation:l,panels:u}=i.group;let c=0;t.state==="active"&&(l==="horizontal"?c=(e.clientX-t.pointerDownAtPoint.x)/r.offsetWidth*100:c=(e.clientY-t.pointerDownAtPoint.y)/r.offsetHeight*100);const f=t.initialLayoutMap.get(i.group),{derivedPanelConstraints:m,layout:g,separatorToPanels:p}=n.get(i.group)??{};if(m&&f&&g&&p){const d=J({delta:c,initialLayout:f,panelConstraints:m,pivotIndices:i.panels.map(v=>u.indexOf(v)),prevLayout:g,trigger:"mouse-or-touch"});if(Q(d,g)){if(c!==0&&!a)switch(l){case"horizontal":{o|=c<0?xe:ze;break}case"vertical":{o|=c<0?be:we;break}}}else{s.set(i.group,{derivedPanelConstraints:m,layout:d,separatorToPanels:p});const v=i.group.panels.map(({id:y})=>y).join(",");i.group.inMemoryLayouts[v]=d}}}),M({cursorFlags:o,mountedGroups:s}),re();break}default:{const o=Le(e,n);o.length===0?t.state!=="inactive"&&M({interactionState:{state:"inactive"}}):M({interactionState:{hitRegions:o,state:"hover"}}),re();break}}}function ve(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=k();switch(t.state){case"active":M({cursorFlags:0,interactionState:{state:"inactive"}}),re()}}function Ue(e){let t=0,n=0;const o={};for(const i of e)if(i.defaultSize!==void 0){t++;const a=C(i.defaultSize);n+=a,o[i.panelId]=a}else o[i.panelId]=void 0;const s=e.length-t;if(s!==0){const i=C((100-n)/s);for(const a of e)a.defaultSize===void 0&&(o[a.panelId]=i)}return o}function Be(e,t,n){const o=n[0];if(!o)return;const s=e.panels.find(a=>a.element===t);if(!s||!s.onResize)return;const i=ae({group:e});s.onResize({asPercentage:C(o.inlineSize/i*100),inPixels:o.inlineSize},s.id)}function Ke(e){let t=!0;const n=new ResizeObserver(u=>{for(const c of u){const{borderBoxSize:f,target:m}=c;m===e.element?t&&M(g=>{const p=g.mountedGroups.get(e);if(p){const d=de(e),v=p.layout,y=j({layout:v,panelConstraints:d});return{mountedGroups:new Map(g.mountedGroups).set(e,{derivedPanelConstraints:d,layout:y,separatorToPanels:p.separatorToPanels})}}return g}):Be(e,m,f)}});n.observe(e.element),e.panels.forEach(u=>{u.onResize&&n.observe(u.element)});const o=de(e),s=e.panels.map(({id:u})=>u).join(","),i=e.inMemoryLayouts[s]??e.defaultLayout??Ue(o),a=j({layout:i,panelConstraints:o}),r=ye(e),l=M(u=>({mountedGroups:new Map(u.mountedGroups).set(e,{derivedPanelConstraints:o,layout:a,separatorToPanels:new Map(r.filter(c=>c.separator).map(c=>[c.separator,c.panels]))})}));return e.separators.forEach(u=>{u.element.addEventListener("keydown",pe)}),l.mountedGroups.size===1&&(window.addEventListener("pointerdown",he),window.addEventListener("pointerleave",Y),window.addEventListener("pointermove",Y),window.addEventListener("pointerup",ve)),function(){t=!1;const c=M(f=>{const m=new Map(f.mountedGroups);return m.delete(e),{mountedGroups:m}});e.separators.forEach(f=>{f.element.removeEventListener("keydown",pe)}),c.mountedGroups.size===0&&(window.removeEventListener("pointerdown",he),window.removeEventListener("pointerleave",Y),window.removeEventListener("pointermove",Y),window.removeEventListener("pointerup",ve)),n.disconnect()}}function le(e){const t=h.useId();return`${e??t}`}const _=typeof window<"u"?h.useLayoutEffect:h.useEffect;function ue(e){const t=h.useRef(e);return _(()=>{t.current=e},[e]),h.useCallback(n=>t.current?.(n),[t])}function ce(...e){return ue(t=>{e.forEach(n=>{if(n)switch(typeof n){case"function":{n(t);break}case"object":{n.current=t;break}}})})}const Pe="--react-resizable-panels--panel--pointer-events";function Re(e,t){const n=e.replace(/[^a-zA-Z0-9\-_]/g,""),o=t.replace(/[^a-zA-Z0-9\-_]/g,"");return`--react-resizable-panels--${n}--${o}`}const Ee=h.createContext(null);function Ve(e,t){const n=h.useRef({getLayout:()=>({}),setLayout:je});h.useImperativeHandle(t,()=>n.current,[]),_(()=>{Object.assign(n.current,Se({groupId:e}))})}function qe({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:s,elementRef:i,groupRef:a,id:r,onLayoutChange:l,orientation:u="horizontal",style:c}){const f=h.useRef({}),m=ue(w=>{Q(f.current,w)||(f.current=w,l?.(w))}),g=le(r),[p,d]=h.useState(!1),[v,y]=h.useState(null),[b,z]=h.useState(n??{}),[S,L]=h.useState([]),[G,O]=h.useState([]),ee=h.useRef({}),W=h.useRef({}),U=ce(y,i);Ve(g,a);const B=h.useMemo(()=>({id:g,orientation:u,registerPanel:w=>(L(E=>ie(u,[...E,w])),()=>{L(E=>E.filter(A=>A!==w))}),registerSeparator:w=>(O(E=>ie(u,[...E,w])),()=>{O(E=>E.filter(A=>A!==w))})}),[g,u]);_(()=>{if(v!==null&&S.length>0){const w={defaultLayout:n,disableCursor:!!o,disabled:!!s,element:v,id:g,inMemoryLastExpandedPanelSizes:ee.current,inMemoryLayouts:W.current,orientation:u,panels:S,separators:G},E=Ke(w),te=k().mountedGroups.get(w);te&&(z(te.layout),m?.(te.layout));const Ce=T.addListener("interactionStateChange",V=>{switch(V.state){case"active":case"hover":{d(V.hitRegions.some(N=>N.group===w));break}}}),Me=T.addListener("mountedGroupsChange",V=>{const N=V.get(w);N&&N.derivedPanelConstraints.length>0&&(z(N.layout),m?.(N.layout))});return()=>{E(),Ce(),Me()}}},[n,o,s,v,g,m,u,S,G]);const K={[Pe]:p?"none":void 0};for(const w in b){const E=Re(g,w),A=b[w];K[E]=A}return F.jsx(Ee.Provider,{value:B,children:F.jsx("div",{"aria-orientation":u,className:t,"data-group":!0,"data-testid":r??void 0,ref:U,style:{...c,...K,display:"flex",flexDirection:u==="horizontal"?"row":"column",flexWrap:"nowrap"},children:e})})}function se(e){return`react-resizable-panels:${e}`}function Xe({id:e,layout:t,storage:n}){try{const o=se(e);n.setItem(o,JSON.stringify(t))}catch(o){console.error(o)}}function Ye({groupId:e,storage:t}){const n=h.useSyncExternalStore(Ze,()=>t.getItem(se(e)),()=>t.getItem(se(e))),o=h.useMemo(()=>n?JSON.parse(n):null,[n]),s=h.useCallback(i=>Xe({id:e,layout:i,storage:t}),[e,t]);return{defaultLayout:o,onLayoutChange:s}}function Ze(){return function(){}}function Je(){return h.useState(null)}function Qe(){return h.useRef(null)}function fe(){const e=h.useContext(Ee);return x(e,"Unexpected"),e}function et({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:a}=k();for(const[r,{derivedPanelConstraints:l,layout:u}]of a)if(r.id===e)return{derivedPanelConstraints:l,group:r,layout:u};throw Error(`Group ${e} not found`)},o=()=>{const a=n().derivedPanelConstraints.find(r=>r.panelId===t);if(a!==void 0)return a;throw Error(`Panel constraints not found for Panel ${t}`)},s=()=>{const a=n().group.panels.find(r=>r.id===t);if(a!==void 0)return a;throw Error(`Layout not found for Panel ${t}`)},i=()=>{const a=n().layout[t];if(a!==void 0)return a;throw Error(`Layout not found for Panel ${t}`)};return{collapse:()=>{const{collapsible:a,collapsedSize:r}=o();i()},expand:()=>{const{collapsible:a,collapsedSize:r,minSize:l}=o();i()},getSize:()=>{const{group:a}=n(),r=i(),{element:l}=s(),u=a.orientation==="horizontal"?l.offsetWidth:l.offsetHeight;return{asPercentage:r,inPixels:u}},isCollapsed:()=>{const{collapsible:a,collapsedSize:r}=o(),l=i();return a&&P(r,l)},resize:a=>{if(i()!==a)switch(typeof a){case"number":{const{group:l}=n(),u=ae({group:l});C(a/u*100);break}}}}}function tt(e,t){const{id:n}=fe(),o=h.useRef({collapse:ne,expand:ne,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:ne});h.useImperativeHandle(t,()=>o.current,[]),_(()=>{Object.assign(o.current,et({groupId:n,panelId:e}))})}function nt({children:e,className:t,collapsedSize:n=0,collapsible:o=!1,defaultSize:s,elementRef:i,id:a,maxSize:r="100",minSize:l="0",onResize:u,panelRef:c,style:f}){const m=!!a,g=le(a),[p,d]=h.useState(null),v=ce(d,i),{id:y,registerPanel:b}=fe(),z=u!==null,S=ue(G=>{u?.(G,a)});_(()=>{if(p!==null)return b({element:p,id:g,idIsStable:m,onResize:z?S:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:s,maxSize:r,minSize:l}})},[n,o,s,p,z,g,m,r,l,S,b]),tt(g,c);const L=Re(y,g);return F.jsx("div",{"data-panel":!0,"data-testid":a??void 0,ref:v,style:{flexBasis:0,flexGrow:`var(${L}, 1)`,flexShrink:1,overflow:"hidden",pointerEvents:`var(${Pe})`},children:F.jsx("div",{className:t,style:{width:"100%",height:"100%",...f},children:e})})}function ot(){return h.useState(null)}function it(){return h.useRef(null)}function rt({layout:e,panelConstraints:t,panelId:n,panelIndex:o}){let s,i;const a=e[n],r=t.find(l=>l.panelId===n);if(r){const l=r.maxSize,u=i=r.collapsible?r.collapsedSize:r.minSize,c=[o,o+1];i=j({layout:J({delta:u-a,initialLayout:e,panelConstraints:t,pivotIndices:c,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n],s=j({layout:J({delta:l-a,initialLayout:e,panelConstraints:t,pivotIndices:c,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n]}return{valueMax:s,valueMin:i,valueNow:a}}function st({children:e,className:t,elementRef:n,id:o,style:s}){const i=le(o),[a,r]=h.useState({}),[l,u]=h.useState("inactive"),[c,f]=h.useState(null),m=ce(f,n),{id:g,orientation:p,registerSeparator:d}=fe(),v=p==="horizontal"?"vertical":"horizontal";return _(()=>{if(c!==null){const y={element:c,id:i},b=d(y),z=T.addListener("interactionStateChange",L=>{u(L.state!=="inactive"&&L.hitRegions.some(G=>G.separator===y)?L.state:"inactive")}),S=T.addListener("mountedGroupsChange",L=>{L.forEach(({derivedPanelConstraints:G,layout:O,separatorToPanels:ee},W)=>{if(W.id===g){const U=ee.get(y);if(U){const B=U[0],K=W.panels.indexOf(B);r(rt({layout:O,panelConstraints:G,panelId:B.id,panelIndex:K}))}}})});return()=>{z(),S(),b()}}},[c,g,i,d]),F.jsx("div",{"aria-orientation":v,"aria-valuemax":a.valueMax,"aria-valuemin":a.valueMin,"aria-valuenow":a.valueNow,children:e,className:t,"data-separator":l,"data-testid":o??void 0,ref:m,role:"separator",style:{flexBasis:"auto",...s,flexGrow:0,flexShrink:0},tabIndex:0})}exports.Group=qe;exports.Panel=nt;exports.Separator=st;exports.useDefaultLayout=Ye;exports.useGroupCallbackRef=Je;exports.useGroupRef=Qe;exports.usePanelCallbackRef=ot;exports.usePanelRef=it;
|
|
2
2
|
//# sourceMappingURL=react-resizable-panels.cjs.map
|