react-resizable-panels 4.0.0-alpha.3 → 4.0.0-alpha.5
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
|
@@ -46,13 +46,26 @@ Documentation for this project is available at [react-resizable-panels.vercel.ap
|
|
|
46
46
|
</thead>
|
|
47
47
|
<tbody>
|
|
48
48
|
<tr>
|
|
49
|
-
<td>
|
|
50
|
-
<td><p>
|
|
49
|
+
<td>className</td>
|
|
50
|
+
<td><p>CSS class name.</p>
|
|
51
51
|
</td>
|
|
52
52
|
</tr>
|
|
53
53
|
<tr>
|
|
54
|
-
<td>
|
|
55
|
-
<td><p>
|
|
54
|
+
<td>id</td>
|
|
55
|
+
<td><p>Uniquely identifies this group within an application.
|
|
56
|
+
Falls back to <code>useId</code> when not provided.</p>
|
|
57
|
+
<p>ℹ️ This value will also be assigned to the <code>data-group</code> attribute.</p>
|
|
58
|
+
</td>
|
|
59
|
+
</tr>
|
|
60
|
+
<tr>
|
|
61
|
+
<td>style</td>
|
|
62
|
+
<td><p>CSS properties.</p>
|
|
63
|
+
<p>⚠️ The following styles cannot be overridden: <code>display</code>, <code>flex-direction</code>, <code>flex-wrap</code>, and <code>overflow</code>.</p>
|
|
64
|
+
</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<tr>
|
|
67
|
+
<td>children</td>
|
|
68
|
+
<td><p>Panel and Separator components that comprise this group.</p>
|
|
56
69
|
</td>
|
|
57
70
|
</tr>
|
|
58
71
|
<tr>
|
|
@@ -86,13 +99,6 @@ Use this prop to disable that behavior for Panels and Separators in this group.<
|
|
|
86
99
|
<li><code>setLayout(layout: Layout): void</code></li>
|
|
87
100
|
</ul>
|
|
88
101
|
<p>ℹ️ The <code>useGroupRef</code> and <code>useGroupCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
|
|
89
|
-
</td>
|
|
90
|
-
</tr>
|
|
91
|
-
<tr>
|
|
92
|
-
<td>id</td>
|
|
93
|
-
<td><p>Uniquely identifies this group within an application.
|
|
94
|
-
Falls back to <code>useId</code> when not provided.</p>
|
|
95
|
-
<p>ℹ️ This value will also be assigned to the <code>data-group</code> attribute.</p>
|
|
96
102
|
</td>
|
|
97
103
|
</tr>
|
|
98
104
|
<tr>
|
|
@@ -103,12 +109,6 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
103
109
|
<tr>
|
|
104
110
|
<td>orientation</td>
|
|
105
111
|
<td><p>Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"</p>
|
|
106
|
-
</td>
|
|
107
|
-
</tr>
|
|
108
|
-
<tr>
|
|
109
|
-
<td>style</td>
|
|
110
|
-
<td><p>CSS properties.</p>
|
|
111
|
-
<p>⚠️ The following styles cannot be overridden: <code>display</code>, <code>flex-direction</code>, <code>flex-wrap</code>, and <code>overflow</code>.</p>
|
|
112
112
|
</td>
|
|
113
113
|
</tr>
|
|
114
114
|
</tbody>
|
|
@@ -140,6 +140,20 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
140
140
|
<td>className</td>
|
|
141
141
|
<td><p>CSS class name.</p>
|
|
142
142
|
<p>⚠️ Class is applied to nested <code>HTMLDivElement</code> to avoid styles that interfere with Flex layout.</p>
|
|
143
|
+
</td>
|
|
144
|
+
</tr>
|
|
145
|
+
<tr>
|
|
146
|
+
<td>id</td>
|
|
147
|
+
<td><p>Uniquely identifies this panel within the parent group.
|
|
148
|
+
Falls back to <code>useId</code> when not provided.</p>
|
|
149
|
+
<p>ℹ️ This prop is used to associate persisted group layouts with the original panel.</p>
|
|
150
|
+
<p>ℹ️ This value will also be assigned to the <code>data-panel</code> attribute.</p>
|
|
151
|
+
</td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td>style</td>
|
|
155
|
+
<td><p>CSS properties.</p>
|
|
156
|
+
<p>⚠️ Style is applied to nested <code>HTMLDivElement</code> to avoid styles that interfere with Flex layout.</p>
|
|
143
157
|
</td>
|
|
144
158
|
</tr>
|
|
145
159
|
<tr>
|
|
@@ -161,14 +175,6 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
161
175
|
<tr>
|
|
162
176
|
<td>elementRef</td>
|
|
163
177
|
<td><p>Ref attached to the root <code>HTMLDivElement</code>.</p>
|
|
164
|
-
</td>
|
|
165
|
-
</tr>
|
|
166
|
-
<tr>
|
|
167
|
-
<td>id</td>
|
|
168
|
-
<td><p>Uniquely identifies this panel within the parent group.
|
|
169
|
-
Falls back to <code>useId</code> when not provided.</p>
|
|
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</code> attribute.</p>
|
|
172
178
|
</td>
|
|
173
179
|
</tr>
|
|
174
180
|
<tr>
|
|
@@ -198,12 +204,6 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
198
204
|
<li><code>resize(size: number): void</code></li>
|
|
199
205
|
</ul>
|
|
200
206
|
<p>ℹ️ The <code>usePanelRef</code> and <code>usePanelCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
|
|
201
|
-
</td>
|
|
202
|
-
</tr>
|
|
203
|
-
<tr>
|
|
204
|
-
<td>style</td>
|
|
205
|
-
<td><p>CSS properties.</p>
|
|
206
|
-
<p>⚠️ Style is applied to nested <code>HTMLDivElement</code> to avoid styles that interfere with Flex layout.</p>
|
|
207
207
|
</td>
|
|
208
208
|
</tr>
|
|
209
209
|
</tbody>
|
|
@@ -236,11 +236,6 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
236
236
|
<td><p>CSS class name.</p>
|
|
237
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
|
-
</td>
|
|
240
|
-
</tr>
|
|
241
|
-
<tr>
|
|
242
|
-
<td>elementRef</td>
|
|
243
|
-
<td><p>Ref attached to the root <code>HTMLDivElement</code>.</p>
|
|
244
239
|
</td>
|
|
245
240
|
</tr>
|
|
246
241
|
<tr>
|
|
@@ -255,6 +250,11 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
255
250
|
<td><p>CSS properties.</p>
|
|
256
251
|
<p>ℹ️ Use the <code>data-separator</code> attribute for custom <em>hover</em> and <em>active</em> styles</p>
|
|
257
252
|
<p>⚠️ The following properties cannot be overridden: <code>flex-grow</code>, <code>flex-shrink</code></p>
|
|
253
|
+
</td>
|
|
254
|
+
</tr>
|
|
255
|
+
<tr>
|
|
256
|
+
<td>elementRef</td>
|
|
257
|
+
<td><p>Ref attached to the root <code>HTMLDivElement</code>.</p>
|
|
258
258
|
</td>
|
|
259
259
|
</tr>
|
|
260
260
|
</tbody>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react/jsx-runtime"),g=require("react");function x(e,t="Assertion error"){if(!e)throw Error(t)}function se(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:r}=e,i=se(n,Array.from(t.children).filter(l=>l instanceof HTMLElement).map(l=>({element:l}))).map(({element:l})=>l),u=[];let s,a;for(const l of i){const c=o.find(f=>f.element===l);if(c){if(s){const f=s.element.getBoundingClientRect(),m=l.getBoundingClientRect();u.push({group:e,panels:[s,c],separator:a,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)})}s=c,a=void 0}else{const f=r.find(m=>m.element===l);f?a=f:(s=void 0,a=void 0)}}return u}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 Te(e){return e/100*window.innerHeight}function De(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 Y({groupSize:e,panelElement:t,styleProp:n}){let o;const[r,i]=Ae(n);switch(i){case"%":{o=r/100*e;break}case"px":{o=r;break}case"rem":{o=Oe(t,r);break}case"em":{o=ke(t,r);break}case"vh":{o=Te(r);break}case"vw":{o=De(r);break}}return o}function M(e){return parseFloat(e.toFixed(3))}function ae({group:e}){const{orientation:t,panels:n}=e;return n.reduce((o,r)=>(o+=t==="horizontal"?r.element.offsetWidth:r.element.offsetHeight,o),0)}function de(e){const{panels:t}=e,n=ae({group:e});return t.map(o=>{const{element:r,panelConstraints:i}=o;let u=0;if(i.collapsedSize){const c=Y({groupSize:n,panelElement:r,styleProp:i.collapsedSize});u=M(c/n*100)}let s;if(i.defaultSize){const c=Y({groupSize:n,panelElement:r,styleProp:i.defaultSize});s=M(c/n*100)}let a=0;if(i.minSize){const c=Y({groupSize:n,panelElement:r,styleProp:i.minSize});a=M(c/n*100)}let l=100;if(i.maxSize){const c=Y({groupSize:n,panelElement:r,styleProp:i.maxSize});l=M(c/n*100)}return{collapsedSize:u,collapsible:i.collapsible===!0,defaultSize:s,minSize:a,maxSize:l,panelId:o.id}})}class $e{#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 u=Array.from(o);for(let s=0;s<u.length;s++){const a=u[s];try{a.call(null,n)}catch(l){i===null&&(r=!0,i=l)}}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)}}}function P(e,t,n=0){return Math.abs(M(e)-M(t))<=n}let R={cursorFlags:0,interactionState:{state:"inactive"},mountedGroups:new Map};const D=new $e;function k(){return R}function E(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&&D.emit("cursorFlagsChange",R.cursorFlags),t.interactionState!==void 0&&D.emit("interactionStateChange",R.interactionState),t.mountedGroups!==void 0&&(R.mountedGroups.forEach((o,r)=>{o.derivedPanelConstraints.forEach(i=>{if(i.collapsible){const{layout:u}=n.mountedGroups.get(r)??{};if(u){const s=P(i.collapsedSize,o.layout[i.panelId]),a=P(i.collapsedSize,u[i.panelId]);s&&!a&&(r.inMemoryLastExpandedPanelSizes[i.panelId]=u[i.panelId])}}})}),D.emit("mountedGroupsChange",R.mountedGroups)),R}function Ne(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 j({panelConstraints:e,size:t}){const{collapsedSize:n=0,collapsible:o,maxSize:r=100,minSize:i=0}=e;if(H(t,i)<0)if(o){const u=(n+i)/2;H(t,u)<0?t=n:t=i}else t=i;return t=Math.min(r,t),t=M(t),t}function W({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:r,trigger:i}){if(P(e,0))return t;const u=Object.values(t),s=Object.values(r),a=[...u],[l,c]=o;x(l!=null,"Invalid first pivot index"),x(c!=null,"Invalid second pivot index");let f=0;if(i==="keyboard"){{const p=e<0?c:l,d=n[p];x(d,`Panel constraints not found for index ${p}`);const{collapsedSize:h=0,collapsible:y,minSize:b=0}=d;if(y){const z=u[p];if(x(z!=null,`Previous layout not found for panel index ${p}`),P(z,h)){const S=b-z;H(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}{const p=e<0?l:c,d=n[p];x(d,`No panel constraints found for index ${p}`);const{collapsedSize:h=0,collapsible:y,minSize:b=0}=d;if(y){const z=u[p];if(x(z!=null,`Previous layout not found for panel index ${p}`),P(z,b)){const S=z-h;H(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}}{const p=e<0?1:-1;let d=e<0?c:l,h=0;for(;;){const b=u[d];x(b!=null,`Previous layout not found for panel index ${d}`);const S=j({panelConstraints:n[d],size:100})-b;if(h+=S,d+=p,d<0||d>=n.length)break}const y=Math.min(Math.abs(e),Math.abs(h));e=e<0?0-y:y}{let d=e<0?l:c;for(;d>=0&&d<n.length;){const h=Math.abs(e)-Math.abs(f),y=u[d];x(y!=null,`Previous layout not found for panel index ${d}`);const b=y-h,z=j({panelConstraints:n[d],size:b});if(!P(y,z)&&(f+=y-z,a[d]=z,f.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?d--:d++}}if(Ne(s,a))return r;{const p=e<0?c:l,d=u[p];x(d!=null,`Previous layout not found for panel index ${p}`);const h=d+f,y=j({panelConstraints:n[p],size:h});if(a[p]=y,!P(y,h)){let b=h-y,S=e<0?c:l;for(;S>=0&&S<n.length;){const L=a[S];x(L!=null,`Previous layout not found for panel index ${S}`);const G=L+b,O=j({panelConstraints:n[S],size:G});if(P(L,O)||(b-=O-L,a[S]=O),P(b,0))break;e>0?S--:S++}}}const m=Object.values(a).reduce((p,d)=>d+p,0);if(!P(m,100,.1))return r;const v=Object.keys(r);return a.reduce((p,d,h)=>(p[v[h]]=d,p),{})}function Q(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 U(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 A({layout:e,panelConstraints:t}){const o=[...Object.values(e)],r=o.reduce((s,a)=>s+a,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(s=>`${s}%`).join(", ")}`);if(!P(r,100)&&o.length>0)for(let s=0;s<t.length;s++){const a=o[s];x(a!=null,`No layout data found for index ${s}`);const l=100/r*a;o[s]=l}let i=0;for(let s=0;s<t.length;s++){const a=o[s];x(a!=null,`No layout data found for index ${s}`);const l=j({panelConstraints:t[s],size:a});a!=l&&(i+=a-l,o[s]=l)}if(!P(i,0))for(let s=0;s<t.length;s++){const a=o[s];x(a!=null,`No layout data found for index ${s}`);const l=a+i,c=j({panelConstraints:t[s],size:l});if(a!==c&&(i-=c-a,o[s]=c,P(i,0)))break}const u=Object.keys(e);return o.reduce((s,a,l)=>(s[u[l]]=a,s),{})}function ge({groupId:e}){const t=()=>{const{mountedGroups:n}=k();for(const[o,r]of n)if(o.id===e)return{group:o,...r};throw Error(`Group ${e} not found`)};return{getLayout(){const{layout:n}=t();return n},setLayout(n){const{derivedPanelConstraints:o,group:r,layout:i,separatorToPanels:u}=t(),s=A({layout:n,panelConstraints:o});return U(i,s)||E(a=>({mountedGroups:new Map(a.mountedGroups).set(r,{derivedPanelConstraints:o,layout:s,separatorToPanels:u})})),s}}}function Se(e){const{mountedGroups:t}=k(),n=t.get(e);return x(n,`Mounted Group ${e.id} not found`),n}function T(e,t){const n=Q(e),o=Se(n),r=n.separators.find(f=>f.element===e);x(r,"Matching separator not found");const i=o.separatorToPanels.get(r);x(i,"Matching panels not found");const u=i.map(f=>n.panels.indexOf(f)),a=ge({groupId:n.id}).getLayout(),l=W({delta:t,initialLayout:a,panelConstraints:o.derivedPanelConstraints,pivotIndices:u,prevLayout:a,trigger:"keyboard"}),c=A({layout:l,panelConstraints:o.derivedPanelConstraints});U(a,c)||E(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=Q(t);if(!n.disabled)switch(e.key){case"ArrowDown":{e.preventDefault(),n.orientation==="vertical"&&T(t,5);break}case"ArrowLeft":{e.preventDefault(),n.orientation==="horizontal"&&T(t,-5);break}case"ArrowRight":{e.preventDefault(),n.orientation==="horizontal"&&T(t,5);break}case"ArrowUp":{e.preventDefault(),n.orientation==="vertical"&&T(t,-5);break}case"End":{e.preventDefault(),T(t,100);break}case"Enter":{e.preventDefault();const o=Q(t),{derivedPanelConstraints:r,layout:i,separatorToPanels:u}=Se(o),s=o.separators.find(f=>f.element===t);x(s,"Matching separator not found");const a=u.get(s);x(a,"Matching panels not found");const l=a[0],c=r.find(f=>f.panelId===l.id);if(x(c,"Panel metadata not found"),c.collapsible){const f=i[l.id],m=c.collapsedSize===f?o.inMemoryLastExpandedPanelSizes[l.id]??c.minSize:c.collapsedSize;T(t,m-f)}break}case"F6":{e.preventDefault();const r=Q(t).separators.map(a=>a.element),i=Array.from(r).findIndex(a=>a===e.currentTarget);x(i!==null,"Index not found");const u=e.shiftKey?i>0?i-1:r.length-1:i+1<r.length?i+1:0;r[u].focus();break}case"Home":{e.preventDefault(),T(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,r={x:1/0,y:1/0};for(const i of t){const u=_e(n,i.rect);switch(e){case"horizontal":{u.x<=r.x&&(o=i,r=u);break}case"vertical":{u.y<=r.y&&(o=i,r=u);break}}}return o?{distance:r,hitRegion:o}:void 0}let Z;function He(){return Z===void 0&&(typeof matchMedia=="function"?Z=!!matchMedia("(pointer:coarse)").matches:Z=!1),Z}function Le(e,t){const n=[];return t.forEach((o,r)=>{if(r.disabled)return;const i=He()?me.coarse:me.precise,u=ye(r),s=Fe(r.orientation,u,{x:e.clientX,y:e.clientY});s&&s.distance.x<=i&&s.distance.y<=i&&n.push(s.hitRegion)}),n}function he(e){if(e.defaultPrevented)return;const{mountedGroups:t}=k(),n=Le(e,t),o=new Set,r=new Set,i=new Set,u=new Map;n.forEach(s=>{o.add(s.group),s.panels.forEach(l=>{r.add(l)}),s.separator&&i.add(s.separator);const a=t.get(s.group);a&&u.set(s.group,a.layout)}),E({interactionState:{hitRegions:n,initialLayoutMap:u,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function We({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.orientation){case"horizontal":{o++;break}case"vertical":{r++;break}}})}if(o===0&&r===0)return null;switch(n){case"active":{const i=(e&xe)!==0,u=(e&ze)!==0,s=(e&be)!==0,a=(e&we)!==0;if(e){if(i)return s?"se-resize":a?"ne-resize":"e-resize";if(u)return s?"sw-resize":a?"nw-resize":"w-resize";if(s)return"s-resize";if(a)return"n-resize"}break}}return o>0&&r>0?"move":o>0?"ew-resize":"ns-resize"}let oe=null,I;function ie(){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 J(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=k();switch(t.state){case"active":{if(e.type!=="pointerleave"&&e.buttons===0){E(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{disableCursor:u,element:s,orientation:a,panels:l}=i.group;let c=0;t.state==="active"&&(a==="horizontal"?c=(e.clientX-t.pointerDownAtPoint.x)/s.offsetWidth*100:c=(e.clientY-t.pointerDownAtPoint.y)/s.offsetHeight*100);const f=t.initialLayoutMap.get(i.group),{derivedPanelConstraints:m,layout:v,separatorToPanels:p}=n.get(i.group)??{};if(m&&f&&v&&p){const d=W({delta:c,initialLayout:f,panelConstraints:m,pivotIndices:i.panels.map(h=>l.indexOf(h)),prevLayout:v,trigger:"mouse-or-touch"});if(U(d,v)){if(c!==0&&!u)switch(a){case"horizontal":{o|=c<0?xe:ze;break}case"vertical":{o|=c<0?be:we;break}}}else{r.set(i.group,{derivedPanelConstraints:m,layout:d,separatorToPanels:p});const h=i.group.panels.map(({id:y})=>y).join(",");i.group.inMemoryLayouts[h]=d}}}),E({cursorFlags:o,mountedGroups:r}),ie();break}default:{const o=Le(e,n);o.length===0?t.state!=="inactive"&&E({interactionState:{state:"inactive"}}):E({interactionState:{hitRegions:o,state:"hover"}}),ie();break}}}function ve(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=k();switch(t.state){case"active":E({cursorFlags:0,interactionState:{state:"inactive"}}),ie()}}function Ue(e){let t=0,n=0;const o={};for(const i of e)if(i.defaultSize!==void 0){t++;const u=M(i.defaultSize);n+=u,o[i.panelId]=u}else o[i.panelId]=void 0;const r=e.length-t;if(r!==0){const i=M((100-n)/r);for(const u of e)u.defaultSize===void 0&&(o[u.panelId]=i)}return o}function Be(e,t,n){const o=n[0];if(!o)return;const r=e.panels.find(u=>u.element===t);if(!r||!r.onResize)return;const i=ae({group:e});r.onResize({asPercentage:M(o.inlineSize/i*100),inPixels:o.inlineSize},r.id)}function Ke(e){let t=!0;x(e.separators.length===0||e.separators.length<e.panels.length,"Invalid Group configuration; too many Separator components");const n=new Set,o=new Set,r=new ResizeObserver(f=>{for(const m of f){const{borderBoxSize:v,target:p}=m;p===e.element?t&&E(d=>{const h=d.mountedGroups.get(e);if(h){const y=de(e),b=h.layout,z=A({layout:b,panelConstraints:y});return{mountedGroups:new Map(d.mountedGroups).set(e,{derivedPanelConstraints:y,layout:z,separatorToPanels:h.separatorToPanels})}}return d}):Be(e,p,v)}});r.observe(e.element),e.panels.forEach(f=>{x(!n.has(f.id),`Panel ids must be unique; id "${f.id}" was used more than once`),n.add(f.id),f.onResize&&r.observe(f.element)});const i=de(e),u=e.panels.map(({id:f})=>f).join(","),s=e.inMemoryLayouts[u]??e.defaultLayout??Ue(i),a=A({layout:s,panelConstraints:i}),l=ye(e),c=E(f=>({mountedGroups:new Map(f.mountedGroups).set(e,{derivedPanelConstraints:i,layout:a,separatorToPanels:new Map(l.filter(m=>m.separator).map(m=>[m.separator,m.panels]))})}));return e.separators.forEach(f=>{x(!o.has(f.id),`Separator ids must be unique; id "${f.id}" was used more than once`),o.add(f.id),f.element.addEventListener("keydown",pe)}),c.mountedGroups.size===1&&(window.addEventListener("pointerdown",he),window.addEventListener("pointerleave",J),window.addEventListener("pointermove",J),window.addEventListener("pointerup",ve)),function(){t=!1;const m=E(v=>{const p=new Map(v.mountedGroups);return p.delete(e),{mountedGroups:p}});e.separators.forEach(v=>{v.element.removeEventListener("keydown",pe)}),m.mountedGroups.size===0&&(window.removeEventListener("pointerdown",he),window.removeEventListener("pointerleave",J),window.removeEventListener("pointermove",J),window.removeEventListener("pointerup",ve)),r.disconnect()}}function le(e){const t=g.useId();return`${e??t}`}const _=typeof window<"u"?g.useLayoutEffect:g.useEffect;function ue(e){const t=g.useRef(e);return _(()=>{t.current=e},[e]),g.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=g.createContext(null);function Ve(e,t){const n=g.useRef({getLayout:()=>({}),setLayout:je});g.useImperativeHandle(t,()=>n.current,[]),_(()=>{Object.assign(n.current,ge({groupId:e}))})}function qe({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:r,elementRef:i,groupRef:u,id:s,onLayoutChange:a,orientation:l="horizontal",style:c}){const f=g.useRef({}),m=ue(w=>{U(f.current,w)||(f.current=w,a?.(w))}),v=le(s),[p,d]=g.useState(!1),[h,y]=g.useState(null),[b,z]=g.useState(n??{}),[S,L]=g.useState([]),[G,O]=g.useState([]),ee=g.useRef({}),B=g.useRef({}),K=ce(y,i);Ve(v,u);const V=g.useMemo(()=>({id:v,orientation:l,registerPanel:w=>(L(C=>se(l,[...C,w])),()=>{L(C=>C.filter($=>$!==w))}),registerSeparator:w=>(O(C=>se(l,[...C,w])),()=>{O(C=>C.filter($=>$!==w))})}),[v,l]);_(()=>{if(h!==null&&S.length>0){const w={defaultLayout:n,disableCursor:!!o,disabled:!!r,element:h,id:v,inMemoryLastExpandedPanelSizes:ee.current,inMemoryLayouts:B.current,orientation:l,panels:S,separators:G},C=Ke(w),te=k().mountedGroups.get(w);te&&(z(te.layout),m?.(te.layout));const Ce=D.addListener("interactionStateChange",X=>{switch(X.state){case"active":case"hover":{d(X.hitRegions.some(N=>N.group===w));break}}}),Me=D.addListener("mountedGroupsChange",X=>{const N=X.get(w);N&&N.derivedPanelConstraints.length>0&&(z(N.layout),m?.(N.layout))});return()=>{C(),Ce(),Me()}}},[n,o,r,h,v,m,l,S,G]);const q={[Pe]:p?"none":void 0};for(const w in b){const C=Re(v,w),$=b[w];q[C]=$}return F.jsx(Ee.Provider,{value:V,children:F.jsx("div",{"aria-orientation":l,className:t,"data-group":!0,"data-testid":s??void 0,ref:K,style:{...c,...q,display:"flex",flexDirection:l==="horizontal"?"row":"column",flexWrap:"nowrap"},children:e})})}function re(e){return`react-resizable-panels:${e}`}function Xe({id:e,layout:t,storage:n}){try{const o=re(e);n.setItem(o,JSON.stringify(t))}catch(o){console.error(o)}}function Ye({groupId:e,storage:t}){const n=g.useSyncExternalStore(Ze,()=>t.getItem(re(e)),()=>t.getItem(re(e))),o=g.useMemo(()=>n?JSON.parse(n):null,[n]),r=g.useCallback(i=>Xe({id:e,layout:i,storage:t}),[e,t]);return{defaultLayout:o,onLayoutChange:r}}function Ze(){return function(){}}function Je(){return g.useState(null)}function Qe(){return g.useRef(null)}function fe(){const e=g.useContext(Ee);return x(e,"Group Context not found; did you render a Panel or Separator outside of a Group?"),e}function et({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:s}=k();for(const[a,{derivedPanelConstraints:l,layout:c,separatorToPanels:f}]of s)if(a.id===e)return{derivedPanelConstraints:l,group:a,layout:c,separatorToPanels:f};throw Error(`Group ${e} not found`)},o=()=>{const s=n().derivedPanelConstraints.find(a=>a.panelId===t);if(s!==void 0)return s;throw Error(`Panel constraints not found for Panel ${t}`)},r=()=>{const s=n().group.panels.find(a=>a.id===t);if(s!==void 0)return s;throw Error(`Layout not found for Panel ${t}`)},i=()=>{const s=n().layout[t];if(s!==void 0)return s;throw Error(`Layout not found for Panel ${t}`)},u=s=>{const a=i();if(s===a)return;const{derivedPanelConstraints:l,group:c,layout:f,separatorToPanels:m}=n(),v=c.panels.findIndex(y=>y.id===t),p=v===c.panels.length-1,d=W({delta:p?a-s:s-a,initialLayout:f,panelConstraints:l,pivotIndices:p?[v-1,v]:[v,v+1],prevLayout:f,trigger:"imperative-api"}),h=A({layout:d,panelConstraints:l});U(f,h)||E(y=>({mountedGroups:new Map(y.mountedGroups).set(c,{derivedPanelConstraints:l,layout:h,separatorToPanels:m})}))};return{collapse:()=>{const{collapsible:s,collapsedSize:a}=o(),l=i();s&&l!==a&&u(a)},expand:()=>{const{collapsible:s,collapsedSize:a,minSize:l}=o(),c=i();s&&c===a&&u(l)},getSize:()=>{const{group:s}=n(),a=i(),{element:l}=r(),c=s.orientation==="horizontal"?l.offsetWidth:l.offsetHeight;return{asPercentage:a,inPixels:c}},isCollapsed:()=>{const{collapsible:s,collapsedSize:a}=o(),l=i();return s&&P(a,l)},resize:s=>{if(i()!==s){let l;switch(typeof s){case"number":{const{group:c}=n(),f=ae({group:c});l=M(s/f*100);break}case"string":{l=parseFloat(s);break}}u(l)}}}}function tt(e,t){const{id:n}=fe(),o=g.useRef({collapse:ne,expand:ne,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:ne});g.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:r,elementRef:i,id:u,maxSize:s="100",minSize:a="0",onResize:l,panelRef:c,style:f}){const m=!!u,v=le(u),[p,d]=g.useState(null),h=ce(d,i),{id:y,registerPanel:b}=fe(),z=l!==null,S=ue(G=>{l?.(G,u)});_(()=>{if(p!==null)return b({element:p,id:v,idIsStable:m,onResize:z?S:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:r,maxSize:s,minSize:a}})},[n,o,r,p,z,v,m,s,a,S,b]),tt(v,c);const L=Re(y,v);return F.jsx("div",{"data-panel":!0,"data-testid":u??void 0,ref:h,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 g.useState(null)}function st(){return g.useRef(null)}function it({layout:e,panelConstraints:t,panelId:n,panelIndex:o}){let r,i;const u=e[n],s=t.find(a=>a.panelId===n);if(s){const a=s.maxSize,l=i=s.collapsible?s.collapsedSize:s.minSize,c=[o,o+1];i=A({layout:W({delta:l-u,initialLayout:e,panelConstraints:t,pivotIndices:c,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n],r=A({layout:W({delta:a-u,initialLayout:e,panelConstraints:t,pivotIndices:c,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n]}return{valueMax:r,valueMin:i,valueNow:u}}function rt({children:e,className:t,elementRef:n,id:o,style:r}){const i=le(o),[u,s]=g.useState({}),[a,l]=g.useState("inactive"),[c,f]=g.useState(null),m=ce(f,n),{id:v,orientation:p,registerSeparator:d}=fe(),h=p==="horizontal"?"vertical":"horizontal";return _(()=>{if(c!==null){const y={element:c,id:i},b=d(y),z=D.addListener("interactionStateChange",L=>{l(L.state!=="inactive"&&L.hitRegions.some(G=>G.separator===y)?L.state:"inactive")}),S=D.addListener("mountedGroupsChange",L=>{L.forEach(({derivedPanelConstraints:G,layout:O,separatorToPanels:ee},B)=>{if(B.id===v){const K=ee.get(y);if(K){const V=K[0],q=B.panels.indexOf(V);s(it({layout:O,panelConstraints:G,panelId:V.id,panelIndex:q}))}}})});return()=>{z(),S(),b()}}},[c,v,i,d]),F.jsx("div",{"aria-orientation":h,"aria-valuemax":u.valueMax,"aria-valuemin":u.valueMin,"aria-valuenow":u.valueNow,children:e,className:t,"data-separator":a,"data-testid":o??void 0,ref:m,role:"separator",style:{flexBasis:"auto",...r,flexGrow:0,flexShrink:0},tabIndex:0})}exports.Group=qe;exports.Panel=nt;exports.Separator=rt;exports.useDefaultLayout=Ye;exports.useGroupCallbackRef=Je;exports.useGroupRef=Qe;exports.usePanelCallbackRef=ot;exports.usePanelRef=st;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react/jsx-runtime"),g=require("react");function x(e,t="Assertion error"){if(!e)throw Error(t)}function ie(e,t){return t.sort(e==="horizontal"?Ie:ke)}function Ie(e,t){const n=e.element.offsetLeft-t.element.offsetLeft;return n!==0?n:e.element.offsetWidth-t.element.offsetWidth}function ke(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:r}=e,i=ie(n,Array.from(t.children).filter(l=>l instanceof HTMLElement).map(l=>({element:l}))).map(({element:l})=>l),u=[];let s,a;for(const l of i){const f=o.find(c=>c.element===l);if(f){if(s){const c=s.element.getBoundingClientRect(),m=l.getBoundingClientRect();u.push({group:e,panels:[s,f],separator:a,rect:n==="horizontal"?new DOMRect(c.right,m.top,m.left-c.right,m.height):new DOMRect(m.left,c.bottom,m.width,m.top-c.bottom)})}s=f,a=void 0}else{const c=r.find(m=>m.element===l);c?a=c:(s=void 0,a=void 0)}}return u}function Oe(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function Te(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function De(e){return e/100*window.innerHeight}function Ae(e){return e/100*window.innerWidth}function $e(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 Z({groupSize:e,panelElement:t,styleProp:n}){let o;const[r,i]=$e(n);switch(i){case"%":{o=r/100*e;break}case"px":{o=r;break}case"rem":{o=Te(t,r);break}case"em":{o=Oe(t,r);break}case"vh":{o=De(r);break}case"vw":{o=Ae(r);break}}return o}function I(e){return parseFloat(e.toFixed(3))}function le({group:e}){const{orientation:t,panels:n}=e;return n.reduce((o,r)=>(o+=t==="horizontal"?r.element.offsetWidth:r.element.offsetHeight,o),0)}function pe(e){const{panels:t}=e,n=le({group:e});return t.map(o=>{const{element:r,panelConstraints:i}=o;let u=0;if(i.collapsedSize){const f=Z({groupSize:n,panelElement:r,styleProp:i.collapsedSize});u=I(f/n*100)}let s;if(i.defaultSize){const f=Z({groupSize:n,panelElement:r,styleProp:i.defaultSize});s=I(f/n*100)}let a=0;if(i.minSize){const f=Z({groupSize:n,panelElement:r,styleProp:i.minSize});a=I(f/n*100)}let l=100;if(i.maxSize){const f=Z({groupSize:n,panelElement:r,styleProp:i.maxSize});l=I(f/n*100)}return{collapsedSize:u,collapsible:i.collapsible===!0,defaultSize:s,minSize:a,maxSize:l,panelId:o.id}})}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 r=!1,i=null;const u=Array.from(o);for(let s=0;s<u.length;s++){const a=u[s];try{a.call(null,n)}catch(l){i===null&&(r=!0,i=l)}}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)}}}function P(e,t,n=0){return Math.abs(I(e)-I(t))<=n}let C={cursorFlags:0,interactionState:{state:"inactive"},mountedGroups:new Map};const D=new Ne;function O(){return C}function M(e){const t=typeof e=="function"?e(C):e;if(C===t)return C;const n=C;return C={...C,...t},t.cursorFlags!==void 0&&D.emit("cursorFlagsChange",C.cursorFlags),t.interactionState!==void 0&&D.emit("interactionStateChange",C.interactionState),t.mountedGroups!==void 0&&(C.mountedGroups.forEach((o,r)=>{o.derivedPanelConstraints.forEach(i=>{if(i.collapsible){const{layout:u}=n.mountedGroups.get(r)??{};if(u){const s=P(i.collapsedSize,o.layout[i.panelId]),a=P(i.collapsedSize,u[i.panelId]);s&&!a&&(r.inMemoryLastExpandedPanelSizes[i.panelId]=u[i.panelId])}}})}),D.emit("mountedGroupsChange",C.mountedGroups)),C}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 F(e,t){return P(e,t)?0:e>t?1:-1}function _({panelConstraints:e,size:t}){const{collapsedSize:n=0,collapsible:o,maxSize:r=100,minSize:i=0}=e;if(F(t,i)<0)if(o){const u=(n+i)/2;F(t,u)<0?t=n:t=i}else t=i;return t=Math.min(r,t),t=I(t),t}function W({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:r,trigger:i}){if(P(e,0))return t;const u=Object.values(t),s=Object.values(r),a=[...u],[l,f]=o;x(l!=null,"Invalid first pivot index"),x(f!=null,"Invalid second pivot index");let c=0;if(i==="keyboard"){{const d=e<0?f:l,p=n[d];x(p,`Panel constraints not found for index ${d}`);const{collapsedSize:h=0,collapsible:v,minSize:b=0}=p;if(v){const z=u[d];if(x(z!=null,`Previous layout not found for panel index ${d}`),P(z,h)){const S=b-z;F(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}{const d=e<0?l:f,p=n[d];x(p,`No panel constraints found for index ${d}`);const{collapsedSize:h=0,collapsible:v,minSize:b=0}=p;if(v){const z=u[d];if(x(z!=null,`Previous layout not found for panel index ${d}`),P(z,b)){const S=z-h;F(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}}{const d=e<0?1:-1;let p=e<0?f:l,h=0;for(;;){const b=u[p];x(b!=null,`Previous layout not found for panel index ${p}`);const S=_({panelConstraints:n[p],size:100})-b;if(h+=S,p+=d,p<0||p>=n.length)break}const v=Math.min(Math.abs(e),Math.abs(h));e=e<0?0-v:v}{let p=e<0?l:f;for(;p>=0&&p<n.length;){const h=Math.abs(e)-Math.abs(c),v=u[p];x(v!=null,`Previous layout not found for panel index ${p}`);const b=v-h,z=_({panelConstraints:n[p],size:b});if(!P(v,z)&&(c+=v-z,a[p]=z,c.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?p--:p++}}if(_e(s,a))return r;{const d=e<0?f:l,p=u[d];x(p!=null,`Previous layout not found for panel index ${d}`);const h=p+c,v=_({panelConstraints:n[d],size:h});if(a[d]=v,!P(v,h)){let b=h-v,S=e<0?f:l;for(;S>=0&&S<n.length;){const L=a[S];x(L!=null,`Previous layout not found for panel index ${S}`);const R=L+b,E=_({panelConstraints:n[S],size:R});if(P(L,E)||(b-=E-L,a[S]=E),P(b,0))break;e>0?S--:S++}}}const m=Object.values(a).reduce((d,p)=>p+d,0);if(!P(m,100,.1))return r;const y=Object.keys(r);return a.reduce((d,p,h)=>(d[y[h]]=p,d),{})}function ee(e){const t=e.parentElement;x(t,"Parent group element not found");const{mountedGroups:n}=O();for(const[o]of n)if(o.element===t)return o;throw Error("Could not find parent Group for separator element")}function B(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(F(e[n],t[n])!==0)return!1;return!0}function A({layout:e,panelConstraints:t}){const o=[...Object.values(e)],r=o.reduce((s,a)=>s+a,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(s=>`${s}%`).join(", ")}`);if(!P(r,100)&&o.length>0)for(let s=0;s<t.length;s++){const a=o[s];x(a!=null,`No layout data found for index ${s}`);const l=100/r*a;o[s]=l}let i=0;for(let s=0;s<t.length;s++){const a=o[s];x(a!=null,`No layout data found for index ${s}`);const l=_({panelConstraints:t[s],size:a});a!=l&&(i+=a-l,o[s]=l)}if(!P(i,0))for(let s=0;s<t.length;s++){const a=o[s];x(a!=null,`No layout data found for index ${s}`);const l=a+i,f=_({panelConstraints:t[s],size:l});if(a!==f&&(i-=f-a,o[s]=f,P(i,0)))break}const u=Object.keys(e);return o.reduce((s,a,l)=>(s[u[l]]=a,s),{})}function Se({groupId:e}){const t=()=>{const{mountedGroups:n}=O();for(const[o,r]of n)if(o.id===e)return{group:o,...r};throw Error(`Group ${e} not found`)};return{getLayout(){const{layout:n}=t();return n},setLayout(n){const{derivedPanelConstraints:o,group:r,layout:i,separatorToPanels:u}=t(),s=A({layout:n,panelConstraints:o});return B(i,s)||M(a=>({mountedGroups:new Map(a.mountedGroups).set(r,{derivedPanelConstraints:o,layout:s,separatorToPanels:u})})),s}}}function xe(e){const{mountedGroups:t}=O(),n=t.get(e);return x(n,`Mounted Group ${e.id} not found`),n}function T(e,t){const n=ee(e),o=xe(n),r=n.separators.find(c=>c.element===e);x(r,"Matching separator not found");const i=o.separatorToPanels.get(r);x(i,"Matching panels not found");const u=i.map(c=>n.panels.indexOf(c)),a=Se({groupId:n.id}).getLayout(),l=W({delta:t,initialLayout:a,panelConstraints:o.derivedPanelConstraints,pivotIndices:u,prevLayout:a,trigger:"keyboard"}),f=A({layout:l,panelConstraints:o.derivedPanelConstraints});B(a,f)||M(c=>({mountedGroups:new Map(c.mountedGroups).set(n,{derivedPanelConstraints:o.derivedPanelConstraints,layout:f,separatorToPanels:o.separatorToPanels})}))}function me(e){if(e.defaultPrevented)return;const t=e.currentTarget,n=ee(t);if(!n.disabled)switch(e.key){case"ArrowDown":{e.preventDefault(),n.orientation==="vertical"&&T(t,5);break}case"ArrowLeft":{e.preventDefault(),n.orientation==="horizontal"&&T(t,-5);break}case"ArrowRight":{e.preventDefault(),n.orientation==="horizontal"&&T(t,5);break}case"ArrowUp":{e.preventDefault(),n.orientation==="vertical"&&T(t,-5);break}case"End":{e.preventDefault(),T(t,100);break}case"Enter":{e.preventDefault();const o=ee(t),{derivedPanelConstraints:r,layout:i,separatorToPanels:u}=xe(o),s=o.separators.find(c=>c.element===t);x(s,"Matching separator not found");const a=u.get(s);x(a,"Matching panels not found");const l=a[0],f=r.find(c=>c.panelId===l.id);if(x(f,"Panel metadata not found"),f.collapsible){const c=i[l.id],m=f.collapsedSize===c?o.inMemoryLastExpandedPanelSizes[l.id]??f.minSize:f.collapsedSize;T(t,m-c)}break}case"F6":{e.preventDefault();const r=ee(t).separators.map(a=>a.element),i=Array.from(r).findIndex(a=>a===e.currentTarget);x(i!==null,"Index not found");const u=e.shiftKey?i>0?i-1:r.length-1:i+1<r.length?i+1:0;r[u].focus();break}case"Home":{e.preventDefault(),T(t,-100);break}}}const je=e=>e,oe=()=>{},ze=1,be=2,we=4,Pe=8,he={coarse:10,precise:5};function He(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,r={x:1/0,y:1/0};for(const i of t){const u=He(n,i.rect);switch(e){case"horizontal":{u.x<=r.x&&(o=i,r=u);break}case"vertical":{u.y<=r.y&&(o=i,r=u);break}}}return o?{distance:r,hitRegion:o}:void 0}let J;function We(){return J===void 0&&(typeof matchMedia=="function"?J=!!matchMedia("(pointer:coarse)").matches:J=!1),J}function Le(e,t){const n=[];return t.forEach((o,r)=>{if(r.disabled)return;const i=We()?he.coarse:he.precise,u=ye(r),s=Fe(r.orientation,u,{x:e.clientX,y:e.clientY});s&&s.distance.x<=i&&s.distance.y<=i&&n.push(s.hitRegion)}),n}function ve(e){if(e.defaultPrevented)return;const{mountedGroups:t}=O(),n=Le(e,t),o=new Set,r=new Set,i=new Set,u=new Map;n.forEach(s=>{o.add(s.group),s.panels.forEach(l=>{r.add(l)}),s.separator&&i.add(s.separator);const a=t.get(s.group);a&&u.set(s.group,a.layout)}),M({interactionState:{hitRegions:n,initialLayoutMap:u,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function Be({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.orientation){case"horizontal":{o++;break}case"vertical":{r++;break}}})}if(o===0&&r===0)return null;switch(n){case"active":{const i=(e&ze)!==0,u=(e&be)!==0,s=(e&we)!==0,a=(e&Pe)!==0;if(e){if(i)return s?"se-resize":a?"ne-resize":"e-resize";if(u)return s?"sw-resize":a?"nw-resize":"w-resize";if(s)return"s-resize";if(a)return"n-resize"}break}}return o>0&&r>0?"move":o>0?"ew-resize":"ns-resize"}let se=null,k;function re(){k===void 0&&(k=new CSSStyleSheet,document.adoptedStyleSheets=[k]);const{cursorFlags:e,interactionState:t}=O();switch(t.state){case"active":case"hover":{const n=Be({cursorFlags:e,groups:t.hitRegions.map(o=>o.group),state:t.state});if(se===n)return;se=n,n?k.cssRules.length===0?k.insertRule(`*{cursor: ${n} !important;}`):k.replaceSync(`*{cursor: ${n} !important;}`):k.cssRules.length===1&&k.deleteRule(0);break}case"inactive":{se=null,k.cssRules.length===1&&k.deleteRule(0);break}}}function Q(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=O();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{disableCursor:u,element:s,orientation:a,panels:l}=i.group;let f=0;t.state==="active"&&(a==="horizontal"?f=(e.clientX-t.pointerDownAtPoint.x)/s.offsetWidth*100:f=(e.clientY-t.pointerDownAtPoint.y)/s.offsetHeight*100);const c=t.initialLayoutMap.get(i.group),{derivedPanelConstraints:m,layout:y,separatorToPanels:d}=n.get(i.group)??{};if(m&&c&&y&&d){const p=W({delta:f,initialLayout:c,panelConstraints:m,pivotIndices:i.panels.map(h=>l.indexOf(h)),prevLayout:y,trigger:"mouse-or-touch"});if(B(p,y)){if(f!==0&&!u)switch(a){case"horizontal":{o|=f<0?ze:be;break}case"vertical":{o|=f<0?we:Pe;break}}}else{r.set(i.group,{derivedPanelConstraints:m,layout:p,separatorToPanels:d});const h=i.group.panels.map(({id:v})=>v).join(",");i.group.inMemoryLayouts[h]=p}}}),M({cursorFlags:o,mountedGroups:r}),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 ge(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=O();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 u=I(i.defaultSize);n+=u,o[i.panelId]=u}else o[i.panelId]=void 0;const r=e.length-t;if(r!==0){const i=I((100-n)/r);for(const u of e)u.defaultSize===void 0&&(o[u.panelId]=i)}return o}function Ke(e,t,n){const o=n[0];if(!o)return;const r=e.panels.find(u=>u.element===t);if(!r||!r.onResize)return;const i=le({group:e});r.onResize({asPercentage:I(o.inlineSize/i*100),inPixels:o.inlineSize},r.id)}function Ve(e){let t=!0;x(e.separators.length===0||e.separators.length<e.panels.length,"Invalid Group configuration; too many Separator components");const n=new Set,o=new Set,r=new ResizeObserver(c=>{for(const m of c){const{borderBoxSize:y,target:d}=m;d===e.element?t&&M(p=>{const h=p.mountedGroups.get(e);if(h){const v=pe(e),b=h.layout,z=A({layout:b,panelConstraints:v});return{mountedGroups:new Map(p.mountedGroups).set(e,{derivedPanelConstraints:v,layout:z,separatorToPanels:h.separatorToPanels})}}return p}):Ke(e,d,y)}});r.observe(e.element),e.panels.forEach(c=>{x(!n.has(c.id),`Panel ids must be unique; id "${c.id}" was used more than once`),n.add(c.id),c.onResize&&r.observe(c.element)});const i=pe(e),u=e.panels.map(({id:c})=>c).join(","),s=e.inMemoryLayouts[u]??e.defaultLayout??Ue(i),a=A({layout:s,panelConstraints:i}),l=ye(e),f=M(c=>({mountedGroups:new Map(c.mountedGroups).set(e,{derivedPanelConstraints:i,layout:a,separatorToPanels:new Map(l.filter(m=>m.separator).map(m=>[m.separator,m.panels]))})}));return e.separators.forEach(c=>{x(!o.has(c.id),`Separator ids must be unique; id "${c.id}" was used more than once`),o.add(c.id),c.element.addEventListener("keydown",me)}),f.mountedGroups.size===1&&(window.addEventListener("pointerdown",ve),window.addEventListener("pointerleave",Q),window.addEventListener("pointermove",Q),window.addEventListener("pointerup",ge)),function(){t=!1;const m=M(y=>{const d=new Map(y.mountedGroups);return d.delete(e),{mountedGroups:d}});e.separators.forEach(y=>{y.element.removeEventListener("keydown",me)}),m.mountedGroups.size===0&&(window.removeEventListener("pointerdown",ve),window.removeEventListener("pointerleave",Q),window.removeEventListener("pointermove",Q),window.removeEventListener("pointerup",ge)),r.disconnect()}}function ue(e){const t=g.useId();return`${e??t}`}const j=typeof window<"u"?g.useLayoutEffect:g.useEffect;function ce(e){const t=g.useRef(e);return j(()=>{t.current=e},[e]),g.useCallback(n=>t.current?.(n),[t])}function fe(...e){return ce(t=>{e.forEach(n=>{if(n)switch(typeof n){case"function":{n(t);break}case"object":{n.current=t;break}}})})}const Re="--react-resizable-panels--panel--pointer-events";function Ee(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 Ce=g.createContext(null);function qe(e,t){const n=g.useRef({getLayout:()=>({}),setLayout:je});g.useImperativeHandle(t,()=>n.current,[]),j(()=>{Object.assign(n.current,Se({groupId:e}))})}function Xe({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:r,elementRef:i,groupRef:u,id:s,onLayoutChange:a,orientation:l="horizontal",style:f,...c}){const m=g.useRef({}),y=ce(w=>{B(m.current,w)||(m.current=w,a?.(w))}),d=ue(s),[p,h]=g.useState(!1),[v,b]=g.useState(null),[z,S]=g.useState(n??{}),[L,R]=g.useState([]),[E,U]=g.useState([]),te=g.useRef({}),K=g.useRef({}),V=fe(b,i);qe(d,u);const q=g.useMemo(()=>({id:d,orientation:l,registerPanel:w=>(R(G=>ie(l,[...G,w])),()=>{R(G=>G.filter($=>$!==w))}),registerSeparator:w=>(U(G=>ie(l,[...G,w])),()=>{U(G=>G.filter($=>$!==w))})}),[d,l]);j(()=>{if(v!==null&&L.length>0){const w={defaultLayout:n,disableCursor:!!o,disabled:!!r,element:v,id:d,inMemoryLastExpandedPanelSizes:te.current,inMemoryLayouts:K.current,orientation:l,panels:L,separators:E},G=Ve(w),ne=O().mountedGroups.get(w);ne&&(S(ne.layout),y?.(ne.layout));const Me=D.addListener("interactionStateChange",Y=>{switch(Y.state){case"active":case"hover":{h(Y.hitRegions.some(N=>N.group===w));break}}}),Ge=D.addListener("mountedGroupsChange",Y=>{const N=Y.get(w);N&&N.derivedPanelConstraints.length>0&&(S(N.layout),y?.(N.layout))});return()=>{G(),Me(),Ge()}}},[n,o,r,v,d,y,l,L,E]);const X={[Re]:p?"none":void 0};for(const w in z){const G=Ee(d,w),$=z[w];X[G]=$}return H.jsx(Ce.Provider,{value:q,children:H.jsx("div",{...c,"aria-orientation":l,className:t,"data-group":!0,"data-testid":d,id:d,ref:V,style:{...f,...X,display:"flex",flexDirection:l==="horizontal"?"row":"column",flexWrap:"nowrap"},children:e})})}function ae(e){return`react-resizable-panels:${e}`}function Ye({id:e,layout:t,storage:n}){try{const o=ae(e);n.setItem(o,JSON.stringify(t))}catch(o){console.error(o)}}function Ze({groupId:e,storage:t}){const n=g.useSyncExternalStore(Je,()=>t.getItem(ae(e)),()=>t.getItem(ae(e))),o=g.useMemo(()=>n?JSON.parse(n):null,[n]),r=g.useCallback(i=>Ye({id:e,layout:i,storage:t}),[e,t]);return{defaultLayout:o,onLayoutChange:r}}function Je(){return function(){}}function Qe(){return g.useState(null)}function et(){return g.useRef(null)}function de(){const e=g.useContext(Ce);return x(e,"Group Context not found; did you render a Panel or Separator outside of a Group?"),e}function tt({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:s}=O();for(const[a,{derivedPanelConstraints:l,layout:f,separatorToPanels:c}]of s)if(a.id===e)return{derivedPanelConstraints:l,group:a,layout:f,separatorToPanels:c};throw Error(`Group ${e} not found`)},o=()=>{const s=n().derivedPanelConstraints.find(a=>a.panelId===t);if(s!==void 0)return s;throw Error(`Panel constraints not found for Panel ${t}`)},r=()=>{const s=n().group.panels.find(a=>a.id===t);if(s!==void 0)return s;throw Error(`Layout not found for Panel ${t}`)},i=()=>{const s=n().layout[t];if(s!==void 0)return s;throw Error(`Layout not found for Panel ${t}`)},u=s=>{const a=i();if(s===a)return;const{derivedPanelConstraints:l,group:f,layout:c,separatorToPanels:m}=n(),y=f.panels.findIndex(v=>v.id===t),d=y===f.panels.length-1,p=W({delta:d?a-s:s-a,initialLayout:c,panelConstraints:l,pivotIndices:d?[y-1,y]:[y,y+1],prevLayout:c,trigger:"imperative-api"}),h=A({layout:p,panelConstraints:l});B(c,h)||M(v=>({mountedGroups:new Map(v.mountedGroups).set(f,{derivedPanelConstraints:l,layout:h,separatorToPanels:m})}))};return{collapse:()=>{const{collapsible:s,collapsedSize:a}=o(),l=i();s&&l!==a&&u(a)},expand:()=>{const{collapsible:s,collapsedSize:a,minSize:l}=o(),f=i();s&&f===a&&u(l)},getSize:()=>{const{group:s}=n(),a=i(),{element:l}=r(),f=s.orientation==="horizontal"?l.offsetWidth:l.offsetHeight;return{asPercentage:a,inPixels:f}},isCollapsed:()=>{const{collapsible:s,collapsedSize:a}=o(),l=i();return s&&P(a,l)},resize:s=>{if(i()!==s){let l;switch(typeof s){case"number":{const{group:f}=n(),c=le({group:f});l=I(s/c*100);break}case"string":{l=parseFloat(s);break}}u(l)}}}}function nt(e,t){const{id:n}=de(),o=g.useRef({collapse:oe,expand:oe,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:oe});g.useImperativeHandle(t,()=>o.current,[]),j(()=>{Object.assign(o.current,tt({groupId:n,panelId:e}))})}function ot({children:e,className:t,collapsedSize:n=0,collapsible:o=!1,defaultSize:r,elementRef:i,id:u,maxSize:s="100",minSize:a="0",onResize:l,panelRef:f,style:c,...m}){const y=!!u,d=ue(u),[p,h]=g.useState(null),v=fe(h,i),{id:b,registerPanel:z}=de(),S=l!==null,L=ce(E=>{l?.(E,u)});j(()=>{if(p!==null)return z({element:p,id:d,idIsStable:y,onResize:S?L:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:r,maxSize:s,minSize:a}})},[n,o,r,p,S,d,y,s,a,L,z]),nt(d,f);const R=Ee(b,d);return H.jsx("div",{...m,"data-panel":!0,"data-testid":d,id:d,ref:v,style:{...st,flexBasis:0,flexGrow:`var(${R}, 1)`,flexShrink:1,overflow:"hidden",pointerEvents:`var(${Re})`},children:H.jsx("div",{className:t,style:{width:"100%",height:"100%",...c},children:e})})}const st={minHeight:"unset",maxHeight:"unset",height:"unset",minWidth:"unset",maxWidth:"unset",width:"unset",flex:"unset",flexBasis:"unset",flexShrink:"unset",flexGrow:"unset",border:"unset",borderWidth:"unset",padding:"unset",margin:"unset"};function it(){return g.useState(null)}function rt(){return g.useRef(null)}function at({layout:e,panelConstraints:t,panelId:n,panelIndex:o}){let r,i;const u=e[n],s=t.find(a=>a.panelId===n);if(s){const a=s.maxSize,l=i=s.collapsible?s.collapsedSize:s.minSize,f=[o,o+1];i=A({layout:W({delta:l-u,initialLayout:e,panelConstraints:t,pivotIndices:f,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n],r=A({layout:W({delta:a-u,initialLayout:e,panelConstraints:t,pivotIndices:f,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n]}return{valueControls:n,valueMax:r,valueMin:i,valueNow:u}}function lt({children:e,className:t,elementRef:n,id:o,style:r,...i}){const u=ue(o),[s,a]=g.useState({}),[l,f]=g.useState("inactive"),[c,m]=g.useState(null),y=fe(m,n),{id:d,orientation:p,registerSeparator:h}=de(),v=p==="horizontal"?"vertical":"horizontal";return j(()=>{if(c!==null){const b={element:c,id:u},z=h(b),S=D.addListener("interactionStateChange",R=>{f(R.state!=="inactive"&&R.hitRegions.some(E=>E.separator===b)?R.state:"inactive")}),L=D.addListener("mountedGroupsChange",R=>{R.forEach(({derivedPanelConstraints:E,layout:U,separatorToPanels:te},K)=>{if(K.id===d){const V=te.get(b);if(V){const q=V[0],X=K.panels.indexOf(q);a(at({layout:U,panelConstraints:E,panelId:q.id,panelIndex:X}))}}})});return()=>{S(),L(),z()}}},[c,d,u,h]),H.jsx("div",{...i,"aria-controls":s.valueControls,"aria-orientation":v,"aria-valuemax":s.valueMax,"aria-valuemin":s.valueMin,"aria-valuenow":s.valueNow,children:e,className:t,"data-separator":l,"data-testid":u,id:u,ref:y,role:"separator",style:{flexBasis:"auto",...r,flexGrow:0,flexShrink:0},tabIndex:0})}exports.Group=Xe;exports.Panel=ot;exports.Separator=lt;exports.useDefaultLayout=Ze;exports.useGroupCallbackRef=Qe;exports.useGroupRef=et;exports.usePanelCallbackRef=it;exports.usePanelRef=rt;
|
|
2
2
|
//# sourceMappingURL=react-resizable-panels.cjs.map
|