react-resizable-panels 4.0.3 → 4.0.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
|
@@ -27,15 +27,28 @@ Documentation for this project is available at [react-resizable-panels.vercel.ap
|
|
|
27
27
|
|
|
28
28
|
### Group
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
<!-- Group:description:begin -->
|
|
31
|
+
A Group wraps a set of resizable Panel components.
|
|
32
|
+
Group content can be resized _horizontally_ or _vertically_.
|
|
33
|
+
|
|
34
|
+
Group elements always include the following attributes:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<div data-group data-testid="group-id-prop" id="group-id-prop">
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
|
|
41
|
+
<!-- Group:description:end -->
|
|
31
42
|
|
|
32
|
-
|
|
43
|
+
#### Required props
|
|
33
44
|
|
|
34
|
-
<!-- Group:required:
|
|
45
|
+
<!-- Group:required-props:begin -->
|
|
46
|
+
None
|
|
47
|
+
<!-- Group:required-props:end -->
|
|
35
48
|
|
|
36
49
|
#### Optional props
|
|
37
50
|
|
|
38
|
-
<!-- Group:optional:begin -->
|
|
51
|
+
<!-- Group:optional-props:begin -->
|
|
39
52
|
|
|
40
53
|
<table>
|
|
41
54
|
<thead>
|
|
@@ -114,19 +127,43 @@ Use this prop to disable that behavior for Panels and Separators in this group.<
|
|
|
114
127
|
</tbody>
|
|
115
128
|
</table>
|
|
116
129
|
|
|
117
|
-
<!-- Group:optional:end -->
|
|
130
|
+
<!-- Group:optional-props:end -->
|
|
118
131
|
|
|
119
132
|
### Panel
|
|
120
133
|
|
|
121
|
-
|
|
134
|
+
<!-- Panel:description:begin -->
|
|
135
|
+
A Panel wraps resizable content and can be configured with min/max size constraints and collapsible behavior.
|
|
136
|
+
|
|
137
|
+
Panel size props can be in the following formats:
|
|
138
|
+
- Percentage of the parent Group (0..100)
|
|
139
|
+
- Pixels
|
|
140
|
+
- Relative font units (em, rem)
|
|
141
|
+
- Viewport relative units (vh, vw)
|
|
142
|
+
|
|
143
|
+
ℹ️ Numeric values are assumed to be pixels.
|
|
144
|
+
Strings without explicit units are assumed to be percentages (0%..100%).
|
|
145
|
+
Percentages may also be specified as strings ending with "%" (e.g. "33%")
|
|
146
|
+
Pixels may also be specified as strings ending with the unit "px".
|
|
147
|
+
Other units should be specified as strings ending with their CSS property units (e.g. 1rem, 50vh)
|
|
148
|
+
|
|
149
|
+
Panel elements always include the following attributes:
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
<div data-panel data-testid="panel-id-prop" id="panel-id-prop">
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
|
|
156
|
+
<!-- Panel:description:end -->
|
|
122
157
|
|
|
123
|
-
|
|
158
|
+
#### Required props
|
|
124
159
|
|
|
125
|
-
<!-- Panel:required:
|
|
160
|
+
<!-- Panel:required-props:begin -->
|
|
161
|
+
None
|
|
162
|
+
<!-- Panel:required-props:end -->
|
|
126
163
|
|
|
127
164
|
#### Optional props
|
|
128
165
|
|
|
129
|
-
<!-- Panel:optional:begin -->
|
|
166
|
+
<!-- Panel:optional-props:begin -->
|
|
130
167
|
|
|
131
168
|
<table>
|
|
132
169
|
<thead>
|
|
@@ -158,7 +195,7 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
158
195
|
</tr>
|
|
159
196
|
<tr>
|
|
160
197
|
<td>collapsedSize</td>
|
|
161
|
-
<td><p>Panel size when collapsed; defaults to 0
|
|
198
|
+
<td><p>Panel size when collapsed; defaults to 0%.</p>
|
|
162
199
|
</td>
|
|
163
200
|
</tr>
|
|
164
201
|
<tr>
|
|
@@ -209,19 +246,35 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
209
246
|
</tbody>
|
|
210
247
|
</table>
|
|
211
248
|
|
|
212
|
-
<!-- Panel:optional:end -->
|
|
249
|
+
<!-- Panel:optional-props:end -->
|
|
213
250
|
|
|
214
251
|
### Separator
|
|
215
252
|
|
|
216
|
-
|
|
253
|
+
<!-- Separator:description:begin -->
|
|
254
|
+
Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
|
|
255
|
+
|
|
256
|
+
Separators should be rendered as the direct child of a Group component.
|
|
257
|
+
|
|
258
|
+
Separator elements always include the following attributes:
|
|
217
259
|
|
|
218
|
-
|
|
260
|
+
```html
|
|
261
|
+
<div data-separator data-testid="separator-id-prop" id="separator-id-prop" role="separator">
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
|
|
265
|
+
|
|
266
|
+
ℹ️ In addition to the attributes shown above, separator also renders all required [WAI-ARIA properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role#associated_wai-aria_roles_states_and_properties).
|
|
267
|
+
<!-- Separator:description:end -->
|
|
268
|
+
|
|
269
|
+
#### Required props
|
|
219
270
|
|
|
220
|
-
<!-- Separator:required:
|
|
271
|
+
<!-- Separator:required-props:begin -->
|
|
272
|
+
None
|
|
273
|
+
<!-- Separator:required-props:end -->
|
|
221
274
|
|
|
222
275
|
#### Optional props
|
|
223
276
|
|
|
224
|
-
<!-- Separator:optional:begin -->
|
|
277
|
+
<!-- Separator:optional-props:begin -->
|
|
225
278
|
|
|
226
279
|
<table>
|
|
227
280
|
<thead>
|
|
@@ -260,4 +313,4 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
260
313
|
</tbody>
|
|
261
314
|
</table>
|
|
262
315
|
|
|
263
|
-
<!-- Separator:optional:end -->
|
|
316
|
+
<!-- Separator:optional-props:end -->
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react/jsx-runtime"),g=require("react");function b(e,t="Assertion error"){if(!e)throw Error(t)}function ie(e,t){return t.sort(e==="horizontal"?Oe:Te)}function Oe(e,t){const n=e.element.offsetLeft-t.element.offsetLeft;return n!==0?n:e.element.offsetWidth-t.element.offsetWidth}function Te(e,t){const n=e.element.offsetTop-t.element.offsetTop;return n!==0?n:e.element.offsetHeight-t.element.offsetHeight}function Se(e){const{element:t,orientation:n,panels:o,separators:r}=e,s=ie(n,Array.from(t.children).filter(l=>l instanceof HTMLElement).map(l=>({element:l}))).map(({element:l})=>l),u=[];let i,a;for(const l of s){const f=o.find(c=>c.element===l);if(f){if(i){const c=i.element.getBoundingClientRect(),m=l.getBoundingClientRect();u.push({group:e,panels:[i,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)})}i=f,a=void 0}else{const c=r.find(m=>m.element===l);c?a=c:(i=void 0,a=void 0)}}return u}function De(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function Ae(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function $e(e){return e/100*window.innerHeight}function Ne(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,s]=_e(n);switch(s){case"%":{o=r/100*e;break}case"px":{o=r;break}case"rem":{o=Ae(t,r);break}case"em":{o=De(t,r);break}case"vh":{o=$e(r);break}case"vw":{o=Ne(r);break}}return o}function I(e){return parseFloat(e.toFixed(3))}function re({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=re({group:e});return t.map(o=>{const{element:r,panelConstraints:s}=o;let u=0;if(s.collapsedSize){const f=Z({groupSize:n,panelElement:r,styleProp:s.collapsedSize});u=I(f/n*100)}let i;if(s.defaultSize){const f=Z({groupSize:n,panelElement:r,styleProp:s.defaultSize});i=I(f/n*100)}let a=0;if(s.minSize){const f=Z({groupSize:n,panelElement:r,styleProp:s.minSize});a=I(f/n*100)}let l=100;if(s.maxSize){const f=Z({groupSize:n,panelElement:r,styleProp:s.maxSize});l=I(f/n*100)}return{collapsedSize:u,collapsible:s.collapsible===!0,defaultSize:i,minSize:a,maxSize:l,panelId:o.id}})}class je{#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,s=null;const u=Array.from(o);for(let i=0;i<u.length;i++){const a=u[i];try{a.call(null,n)}catch(l){s===null&&(r=!0,s=l)}}if(r)throw s}}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 je;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(s=>{if(s.collapsible){const{layout:u}=n.mountedGroups.get(r)??{};if(u){const i=P(s.collapsedSize,o.layout[s.panelId]),a=P(s.collapsedSize,u[s.panelId]);i&&!a&&(r.inMemoryLastExpandedPanelSizes[s.panelId]=u[s.panelId])}}})}),D.emit("mountedGroupsChange",C.mountedGroups)),C}const He=e=>e,ne=()=>{},xe=1,ze=2,be=4,we=8,pe={coarse:10,precise:5};function Fe({cursorFlags:e,groups:t,state:n}){let o=0,r=0;switch(n){case"active":case"hover":t.forEach(s=>{if(!s.disableCursor)switch(s.orientation){case"horizontal":{o++;break}case"vertical":{r++;break}}})}if(o===0&&r===0)return null;switch(n){case"active":{const s=(e&xe)!==0,u=(e&ze)!==0,i=(e&be)!==0,a=(e&we)!==0;if(e){if(s)return i?"se-resize":a?"ne-resize":"e-resize";if(u)return i?"sw-resize":a?"nw-resize":"w-resize";if(i)return"s-resize";if(a)return"n-resize"}break}}return o>0&&r>0?"move":o>0?"ew-resize":"ns-resize"}let oe=null,k;function ae(){k===void 0&&(k=new CSSStyleSheet,document.adoptedStyleSheets=[k]);const{cursorFlags:e,interactionState:t}=O();switch(t.state){case"active":case"hover":{const n=Fe({cursorFlags:e,groups:t.hitRegions.map(o=>o.group),state:t.state});if(oe===n)return;oe=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":{oe=null,k.cssRules.length===1&&k.deleteRule(0);break}}}function We(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:s=0}=e;if(F(t,s)<0)if(o){const u=(n+s)/2;F(t,u)<0?t=n:t=s}else t=s;return t=Math.min(r,t),t=I(t),t}function W({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:r,trigger:s}){if(P(e,0))return t;const u=Object.values(t),i=Object.values(r),a=[...u],[l,f]=o;b(l!=null,"Invalid first pivot index"),b(f!=null,"Invalid second pivot index");let c=0;if(s==="keyboard"){{const d=e<0?f:l,p=n[d];b(p,`Panel constraints not found for index ${d}`);const{collapsedSize:v=0,collapsible:h,minSize:y=0}=p;if(h){const z=u[d];if(b(z!=null,`Previous layout not found for panel index ${d}`),P(z,v)){const S=y-z;F(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}{const d=e<0?l:f,p=n[d];b(p,`No panel constraints found for index ${d}`);const{collapsedSize:v=0,collapsible:h,minSize:y=0}=p;if(h){const z=u[d];if(b(z!=null,`Previous layout not found for panel index ${d}`),P(z,y)){const S=z-v;F(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}}{const d=e<0?1:-1;let p=e<0?f:l,v=0;for(;;){const y=u[p];b(y!=null,`Previous layout not found for panel index ${p}`);const S=_({panelConstraints:n[p],size:100})-y;if(v+=S,p+=d,p<0||p>=n.length)break}const h=Math.min(Math.abs(e),Math.abs(v));e=e<0?0-h:h}{let p=e<0?l:f;for(;p>=0&&p<n.length;){const v=Math.abs(e)-Math.abs(c),h=u[p];b(h!=null,`Previous layout not found for panel index ${p}`);const y=h-v,z=_({panelConstraints:n[p],size:y});if(!P(h,z)&&(c+=h-z,a[p]=z,c.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?p--:p++}}if(We(i,a))return r;{const d=e<0?f:l,p=u[d];b(p!=null,`Previous layout not found for panel index ${d}`);const v=p+c,h=_({panelConstraints:n[d],size:v});if(a[d]=h,!P(h,v)){let y=v-h,S=e<0?f:l;for(;S>=0&&S<n.length;){const L=a[S];b(L!=null,`Previous layout not found for panel index ${S}`);const R=L+y,E=_({panelConstraints:n[S],size:R});if(P(L,E)||(y-=E-L,a[S]=E),P(y,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 x=Object.keys(r);return a.reduce((d,p,v)=>(d[x[v]]=p,d),{})}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 Pe({event:e,hitRegions:t,initialLayoutMap:n,mountedGroups:o,pointerDownAtPoint:r}){let s=0;const u=new Map(o);t.forEach(i=>{const{disableCursor:a,element:l,orientation:f,panels:c}=i.group;let m=0;r?f==="horizontal"?m=(e.clientX-r.x)/l.offsetWidth*100:m=(e.clientY-r.y)/l.offsetHeight*100:f==="horizontal"?m=e.clientX<0?-100:100:m=e.clientY<0?-100:100;const x=n.get(i.group),{derivedPanelConstraints:d,layout:p,separatorToPanels:v}=o.get(i.group)??{};if(d&&x&&p&&v){const h=W({delta:m,initialLayout:x,panelConstraints:d,pivotIndices:i.panels.map(y=>c.indexOf(y)),prevLayout:p,trigger:"mouse-or-touch"});if(B(h,p)){if(m!==0&&!a)switch(f){case"horizontal":{s|=m<0?xe:ze;break}case"vertical":{s|=m<0?be:we;break}}}else{u.set(i.group,{derivedPanelConstraints:d,layout:h,separatorToPanels:v});const y=i.group.panels.map(({id:z})=>z).join(",");i.group.inMemoryLayouts[y]=h}}}),M({cursorFlags:s,mountedGroups:u}),ae()}function me(e){if(e.defaultPrevented)return;if(e.relatedTarget!==null)return;const{interactionState:t,mountedGroups:n}=O();switch(t.state){case"active":t.hitRegions.forEach(o=>{e.currentTarget===o.group.element&&Pe({event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n})})}}function Q(e){const t=e.parentElement;b(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 A({layout:e,panelConstraints:t}){const o=[...Object.values(e)],r=o.reduce((i,a)=>i+a,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(i=>`${i}%`).join(", ")}`);if(!P(r,100)&&o.length>0)for(let i=0;i<t.length;i++){const a=o[i];b(a!=null,`No layout data found for index ${i}`);const l=100/r*a;o[i]=l}let s=0;for(let i=0;i<t.length;i++){const a=o[i];b(a!=null,`No layout data found for index ${i}`);const l=_({panelConstraints:t[i],size:a});a!=l&&(s+=a-l,o[i]=l)}if(!P(s,0))for(let i=0;i<t.length;i++){const a=o[i];b(a!=null,`No layout data found for index ${i}`);const l=a+s,f=_({panelConstraints:t[i],size:l});if(a!==f&&(s-=f-a,o[i]=f,P(s,0)))break}const u=Object.keys(e);return o.reduce((i,a,l)=>(i[u[l]]=a,i),{})}function Le({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:s,separatorToPanels:u}=t(),i=A({layout:n,panelConstraints:o});return B(s,i)||M(a=>({mountedGroups:new Map(a.mountedGroups).set(r,{derivedPanelConstraints:o,layout:i,separatorToPanels:u})})),i}}}function Re(e){const{mountedGroups:t}=O(),n=t.get(e);return b(n,`Mounted Group ${e.id} not found`),n}function T(e,t){const n=Q(e),o=Re(n),r=n.separators.find(c=>c.element===e);b(r,"Matching separator not found");const s=o.separatorToPanels.get(r);b(s,"Matching panels not found");const u=s.map(c=>n.panels.indexOf(c)),a=Le({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 he(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:s,separatorToPanels:u}=Re(o),i=o.separators.find(c=>c.element===t);b(i,"Matching separator not found");const a=u.get(i);b(a,"Matching panels not found");const l=a[0],f=r.find(c=>c.panelId===l.id);if(b(f,"Panel metadata not found"),f.collapsible){const c=s[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=Q(t).separators.map(a=>a.element),s=Array.from(r).findIndex(a=>a===e.currentTarget);b(s!==null,"Index not found");const u=e.shiftKey?s>0?s-1:r.length-1:s+1<r.length?s+1:0;r[u].focus();break}case"Home":{e.preventDefault(),T(t,-100);break}}}function Be(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 Ue(e,t,n){let o,r={x:1/0,y:1/0};for(const s of t){const u=Be(n,s.rect);switch(e){case"horizontal":{u.x<=r.x&&(o=s,r=u);break}case"vertical":{u.y<=r.y&&(o=s,r=u);break}}}return o?{distance:r,hitRegion:o}:void 0}let J;function Ke(){return J===void 0&&(typeof matchMedia=="function"?J=!!matchMedia("(pointer:coarse)").matches:J=!1),J}function Ee(e,t){const n=[];return t.forEach((o,r)=>{if(r.disabled)return;const s=Ke()?pe.coarse:pe.precise,u=Se(r),i=Ue(r.orientation,u,{x:e.clientX,y:e.clientY});i&&i.distance.x<=s&&i.distance.y<=s&&n.push(i.hitRegion)}),n}function ve(e){if(e.defaultPrevented)return;const{mountedGroups:t}=O(),n=Ee(e,t),o=new Set,r=new Set,s=new Set,u=new Map;n.forEach(i=>{o.add(i.group),i.panels.forEach(l=>{r.add(l)}),i.separator&&s.add(i.separator);const a=t.get(i.group);a&&u.set(i.group,a.layout)}),M({interactionState:{hitRegions:n,initialLayoutMap:u,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function ge(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=O();switch(t.state){case"active":{if(e.type!=="pointerleave"&&e.buttons===0){M(o=>o.interactionState.state==="inactive"?o:{cursorFlags:0,interactionState:{state:"inactive"}});return}Pe({event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n,pointerDownAtPoint:t.pointerDownAtPoint});break}default:{const o=Ee(e,n);o.length===0?t.state!=="inactive"&&M({interactionState:{state:"inactive"}}):M({interactionState:{hitRegions:o,state:"hover"}}),ae();break}}}function ye(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=O();switch(t.state){case"active":M({cursorFlags:0,interactionState:{state:"inactive"}}),ae()}}function Ve(e){let t=0,n=0;const o={};for(const s of e)if(s.defaultSize!==void 0){t++;const u=I(s.defaultSize);n+=u,o[s.panelId]=u}else o[s.panelId]=void 0;const r=e.length-t;if(r!==0){const s=I((100-n)/r);for(const u of e)u.defaultSize===void 0&&(o[u.panelId]=s)}return o}function qe(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 s=re({group:e});r.onResize({asPercentage:I(o.inlineSize/s*100),inPixels:o.inlineSize},r.id)}function Xe(e){let t=!0;b(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:x,target:d}=m;d===e.element?t&&M(p=>{const v=p.mountedGroups.get(e);if(v){const h=de(e),y=v.layout,z=A({layout:y,panelConstraints:h});return{mountedGroups:new Map(p.mountedGroups).set(e,{derivedPanelConstraints:h,layout:z,separatorToPanels:v.separatorToPanels})}}return p}):qe(e,d,x)}});r.observe(e.element),e.panels.forEach(c=>{b(!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 s=de(e),u=e.panels.map(({id:c})=>c).join(","),i=e.inMemoryLayouts[u]??e.defaultLayout??Ve(s),a=A({layout:i,panelConstraints:s}),l=Se(e),f=M(c=>({mountedGroups:new Map(c.mountedGroups).set(e,{derivedPanelConstraints:s,layout:a,separatorToPanels:new Map(l.filter(m=>m.separator).map(m=>[m.separator,m.panels]))})}));return e.element.addEventListener("pointerleave",me),e.separators.forEach(c=>{b(!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",he)}),f.mountedGroups.size===1&&(window.addEventListener("pointerdown",ve),window.addEventListener("pointermove",ge),window.addEventListener("pointerup",ye)),function(){t=!1;const m=M(x=>{const d=new Map(x.mountedGroups);return d.delete(e),{mountedGroups:d}});e.element.removeEventListener("pointerleave",me),e.separators.forEach(x=>{x.element.removeEventListener("keydown",he)}),m.mountedGroups.size===0&&(window.removeEventListener("pointerdown",ve),window.removeEventListener("pointermove",ge),window.removeEventListener("pointerup",ye)),r.disconnect()}}function le(e){const t=g.useId();return`${e??t}`}const j=typeof window<"u"?g.useLayoutEffect:g.useEffect;function ue(e){const t=g.useRef(e);return j(()=>{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 Ce="--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 Ge=g.createContext(null);function Ye(e,t){const n=g.useRef({getLayout:()=>({}),setLayout:He});g.useImperativeHandle(t,()=>n.current,[]),j(()=>{Object.assign(n.current,Le({groupId:e}))})}function Ze({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:r,elementRef:s,groupRef:u,id:i,onLayoutChange:a,orientation:l="horizontal",style:f,...c}){const m=g.useRef({}),x=ue(w=>{B(m.current,w)||(m.current=w,a?.(w))}),d=le(i),[p,v]=g.useState(!1),[h,y]=g.useState(null),[z,S]=g.useState(n??{}),[L,R]=g.useState([]),[E,U]=g.useState([]),ee=g.useRef({}),K=g.useRef({}),V=ce(y,s);Ye(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(h!==null&&L.length>0){const w={defaultLayout:n,disableCursor:!!o,disabled:!!r,element:h,id:d,inMemoryLastExpandedPanelSizes:ee.current,inMemoryLayouts:K.current,orientation:l,panels:L,separators:E},G=Xe(w),te=O().mountedGroups.get(w);te&&(S(te.layout),x?.(te.layout));const Ie=D.addListener("interactionStateChange",Y=>{switch(Y.state){case"active":case"hover":{v(Y.hitRegions.some(N=>N.group===w));break}}}),ke=D.addListener("mountedGroupsChange",Y=>{const N=Y.get(w);N&&N.derivedPanelConstraints.length>0&&(S(N.layout),x?.(N.layout))});return()=>{G(),Ie(),ke()}}},[n,o,r,h,d,x,l,L,E]);const X={[Ce]:p?"none":void 0};for(const w in z){const G=Me(d,w),$=z[w];X[G]=$}return H.jsx(Ge.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 se(e){return`react-resizable-panels:${e}`}function Je({id:e,layout:t,storage:n}){try{const o=se(e);n.setItem(o,JSON.stringify(t))}catch(o){console.error(o)}}function Qe({groupId:e,storage:t}){const n=g.useSyncExternalStore(et,()=>t.getItem(se(e)),()=>t.getItem(se(e))),o=g.useMemo(()=>n?JSON.parse(n):void 0,[n]),r=g.useCallback(s=>Je({id:e,layout:s,storage:t}),[e,t]);return{defaultLayout:o,onLayoutChange:r}}function et(){return function(){}}function tt(){return g.useState(null)}function nt(){return g.useRef(null)}function fe(){const e=g.useContext(Ge);return b(e,"Group Context not found; did you render a Panel or Separator outside of a Group?"),e}function ot({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:i}=O();for(const[a,{derivedPanelConstraints:l,layout:f,separatorToPanels:c}]of i)if(a.id===e)return{derivedPanelConstraints:l,group:a,layout:f,separatorToPanels:c};throw Error(`Group ${e} not found`)},o=()=>{const i=n().derivedPanelConstraints.find(a=>a.panelId===t);if(i!==void 0)return i;throw Error(`Panel constraints not found for Panel ${t}`)},r=()=>{const i=n().group.panels.find(a=>a.id===t);if(i!==void 0)return i;throw Error(`Layout not found for Panel ${t}`)},s=()=>{const i=n().layout[t];if(i!==void 0)return i;throw Error(`Layout not found for Panel ${t}`)},u=i=>{const a=s();if(i===a)return;const{derivedPanelConstraints:l,group:f,layout:c,separatorToPanels:m}=n(),x=f.panels.findIndex(h=>h.id===t),d=x===f.panels.length-1,p=W({delta:d?a-i:i-a,initialLayout:c,panelConstraints:l,pivotIndices:d?[x-1,x]:[x,x+1],prevLayout:c,trigger:"imperative-api"}),v=A({layout:p,panelConstraints:l});B(c,v)||M(h=>({mountedGroups:new Map(h.mountedGroups).set(f,{derivedPanelConstraints:l,layout:v,separatorToPanels:m})}))};return{collapse:()=>{const{collapsible:i,collapsedSize:a}=o(),l=s();i&&l!==a&&u(a)},expand:()=>{const{collapsible:i,collapsedSize:a,minSize:l}=o(),f=s();i&&f===a&&u(l)},getSize:()=>{const{group:i}=n(),a=s(),{element:l}=r(),f=i.orientation==="horizontal"?l.offsetWidth:l.offsetHeight;return{asPercentage:a,inPixels:f}},isCollapsed:()=>{const{collapsible:i,collapsedSize:a}=o(),l=s();return i&&P(a,l)},resize:i=>{if(s()!==i){let l;switch(typeof i){case"number":{const{group:f}=n(),c=re({group:f});l=I(i/c*100);break}case"string":{l=parseFloat(i);break}}u(l)}}}}function it(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,[]),j(()=>{Object.assign(o.current,ot({groupId:n,panelId:e}))})}function st({children:e,className:t,collapsedSize:n=0,collapsible:o=!1,defaultSize:r,elementRef:s,id:u,maxSize:i="100",minSize:a="0",onResize:l,panelRef:f,style:c,...m}){const x=!!u,d=le(u),[p,v]=g.useState(null),h=ce(v,s),{id:y,registerPanel:z}=fe(),S=l!==null,L=ue(E=>{l?.(E,u)});j(()=>{if(p!==null)return z({element:p,id:d,idIsStable:x,onResize:S?L:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:r,maxSize:i,minSize:a}})},[n,o,r,p,S,d,x,i,a,L,z]),it(d,f);const R=Me(y,d);return H.jsx("div",{...m,"data-panel":!0,"data-testid":d,id:d,ref:h,style:{...rt,flexBasis:0,flexGrow:`var(${R}, 1)`,flexShrink:1,overflow:"hidden",pointerEvents:`var(${Ce})`},children:H.jsx("div",{className:t,style:{width:"100%",height:"100%",...c},children:e})})}const rt={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 at(){return g.useState(null)}function lt(){return g.useRef(null)}function ut({layout:e,panelConstraints:t,panelId:n,panelIndex:o}){let r,s;const u=e[n],i=t.find(a=>a.panelId===n);if(i){const a=i.maxSize,l=s=i.collapsible?i.collapsedSize:i.minSize,f=[o,o+1];s=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:s,valueNow:u}}function ct({children:e,className:t,elementRef:n,id:o,style:r,...s}){const u=le(o),[i,a]=g.useState({}),[l,f]=g.useState("inactive"),[c,m]=g.useState(null),x=ce(m,n),{id:d,orientation:p,registerSeparator:v}=fe(),h=p==="horizontal"?"vertical":"horizontal";return j(()=>{if(c!==null){const y={element:c,id:u},z=v(y),S=D.addListener("interactionStateChange",R=>{f(R.state!=="inactive"&&R.hitRegions.some(E=>E.separator===y)?R.state:"inactive")}),L=D.addListener("mountedGroupsChange",R=>{R.forEach(({derivedPanelConstraints:E,layout:U,separatorToPanels:ee},K)=>{if(K.id===d){const V=ee.get(y);if(V){const q=V[0],X=K.panels.indexOf(q);a(ut({layout:U,panelConstraints:E,panelId:q.id,panelIndex:X}))}}})});return()=>{S(),L(),z()}}},[c,d,u,v]),H.jsx("div",{...s,"aria-controls":i.valueControls,"aria-orientation":h,"aria-valuemax":i.valueMax,"aria-valuemin":i.valueMin,"aria-valuenow":i.valueNow,children:e,className:t,"data-separator":l,"data-testid":u,id:u,ref:x,role:"separator",style:{flexBasis:"auto",...r,flexGrow:0,flexShrink:0},tabIndex:0})}exports.Group=Ze;exports.Panel=st;exports.Separator=ct;exports.useDefaultLayout=Qe;exports.useGroupCallbackRef=tt;exports.useGroupRef=nt;exports.usePanelCallbackRef=at;exports.usePanelRef=lt;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react/jsx-runtime"),g=require("react");function b(e,t="Assertion error"){if(!e)throw Error(t)}function ie(e,t){return t.sort(e==="horizontal"?Oe:Te)}function Oe(e,t){const n=e.element.offsetLeft-t.element.offsetLeft;return n!==0?n:e.element.offsetWidth-t.element.offsetWidth}function Te(e,t){const n=e.element.offsetTop-t.element.offsetTop;return n!==0?n:e.element.offsetHeight-t.element.offsetHeight}function Se(e){const{element:t,orientation:n,panels:o,separators:a}=e,s=ie(n,Array.from(t.children).filter(l=>l instanceof HTMLElement).map(l=>({element:l}))).map(({element:l})=>l),u=[];let i,r;for(const l of s){const f=o.find(c=>c.element===l);if(f){if(i){const c=i.element.getBoundingClientRect(),m=l.getBoundingClientRect();u.push({group:e,panels:[i,f],separator:r,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)})}i=f,r=void 0}else{const c=a.find(m=>m.element===l);c?r=c:(i=void 0,r=void 0)}}return u}function De(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function Ae(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function $e(e){return e/100*window.innerHeight}function Ne(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[a,s]=_e(n);switch(s){case"%":{o=a/100*e;break}case"px":{o=a;break}case"rem":{o=Ae(t,a);break}case"em":{o=De(t,a);break}case"vh":{o=$e(a);break}case"vw":{o=Ne(a);break}}return o}function I(e){return parseFloat(e.toFixed(3))}function ae({group:e}){const{orientation:t,panels:n}=e;return n.reduce((o,a)=>(o+=t==="horizontal"?a.element.offsetWidth:a.element.offsetHeight,o),0)}function de(e){const{panels:t}=e,n=ae({group:e});return t.map(o=>{const{element:a,panelConstraints:s}=o;let u=0;if(s.collapsedSize){const f=Z({groupSize:n,panelElement:a,styleProp:s.collapsedSize});u=I(f/n*100)}let i;if(s.defaultSize){const f=Z({groupSize:n,panelElement:a,styleProp:s.defaultSize});i=I(f/n*100)}let r=0;if(s.minSize){const f=Z({groupSize:n,panelElement:a,styleProp:s.minSize});r=I(f/n*100)}let l=100;if(s.maxSize){const f=Z({groupSize:n,panelElement:a,styleProp:s.maxSize});l=I(f/n*100)}return{collapsedSize:u,collapsible:s.collapsible===!0,defaultSize:i,minSize:r,maxSize:l,panelId:o.id}})}class je{#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 a=!1,s=null;const u=Array.from(o);for(let i=0;i<u.length;i++){const r=u[i];try{r.call(null,n)}catch(l){s===null&&(a=!0,s=l)}}if(a)throw s}}removeAllListeners(){this.#e={}}removeListener(t,n){const o=this.#e[t];if(o!==void 0){const a=o.indexOf(n);a>=0&&o.splice(a,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 je;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,a)=>{o.derivedPanelConstraints.forEach(s=>{if(s.collapsible){const{layout:u}=n.mountedGroups.get(a)??{};if(u){const i=P(s.collapsedSize,o.layout[s.panelId]),r=P(s.collapsedSize,u[s.panelId]);i&&!r&&(a.inMemoryLastExpandedPanelSizes[s.panelId]=u[s.panelId])}}})}),D.emit("mountedGroupsChange",C.mountedGroups)),C}const He=e=>e,ne=()=>{},xe=1,ze=2,be=4,we=8,pe={coarse:10,precise:5};function Fe({cursorFlags:e,groups:t,state:n}){let o=0,a=0;switch(n){case"active":case"hover":t.forEach(s=>{if(!s.disableCursor)switch(s.orientation){case"horizontal":{o++;break}case"vertical":{a++;break}}})}if(o===0&&a===0)return null;switch(n){case"active":{const s=(e&xe)!==0,u=(e&ze)!==0,i=(e&be)!==0,r=(e&we)!==0;if(e){if(s)return i?"se-resize":r?"ne-resize":"e-resize";if(u)return i?"sw-resize":r?"nw-resize":"w-resize";if(i)return"s-resize";if(r)return"n-resize"}break}}return o>0&&a>0?"move":o>0?"ew-resize":"ns-resize"}let oe,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=Fe({cursorFlags:e,groups:t.hitRegions.map(a=>a.group),state:t.state}),o=`*{cursor: ${n} !important; ${t.state==="active"?"touch-action: none;":""} }`;if(oe===o)return;oe=o,n?k.cssRules.length===0?k.insertRule(o):k.replaceSync(o):k.cssRules.length===1&&k.deleteRule(0);break}case"inactive":{oe=void 0,k.cssRules.length===1&&k.deleteRule(0);break}}}function We(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:a=100,minSize:s=0}=e;if(F(t,s)<0)if(o){const u=(n+s)/2;F(t,u)<0?t=n:t=s}else t=s;return t=Math.min(a,t),t=I(t),t}function W({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:a,trigger:s}){if(P(e,0))return t;const u=Object.values(t),i=Object.values(a),r=[...u],[l,f]=o;b(l!=null,"Invalid first pivot index"),b(f!=null,"Invalid second pivot index");let c=0;if(s==="keyboard"){{const d=e<0?f:l,p=n[d];b(p,`Panel constraints not found for index ${d}`);const{collapsedSize:v=0,collapsible:h,minSize:y=0}=p;if(h){const z=u[d];if(b(z!=null,`Previous layout not found for panel index ${d}`),P(z,v)){const S=y-z;F(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}{const d=e<0?l:f,p=n[d];b(p,`No panel constraints found for index ${d}`);const{collapsedSize:v=0,collapsible:h,minSize:y=0}=p;if(h){const z=u[d];if(b(z!=null,`Previous layout not found for panel index ${d}`),P(z,y)){const S=z-v;F(S,Math.abs(e))>0&&(e=e<0?0-S:S)}}}}{const d=e<0?1:-1;let p=e<0?f:l,v=0;for(;;){const y=u[p];b(y!=null,`Previous layout not found for panel index ${p}`);const S=_({panelConstraints:n[p],size:100})-y;if(v+=S,p+=d,p<0||p>=n.length)break}const h=Math.min(Math.abs(e),Math.abs(v));e=e<0?0-h:h}{let p=e<0?l:f;for(;p>=0&&p<n.length;){const v=Math.abs(e)-Math.abs(c),h=u[p];b(h!=null,`Previous layout not found for panel index ${p}`);const y=h-v,z=_({panelConstraints:n[p],size:y});if(!P(h,z)&&(c+=h-z,r[p]=z,c.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?p--:p++}}if(We(i,r))return a;{const d=e<0?f:l,p=u[d];b(p!=null,`Previous layout not found for panel index ${d}`);const v=p+c,h=_({panelConstraints:n[d],size:v});if(r[d]=h,!P(h,v)){let y=v-h,S=e<0?f:l;for(;S>=0&&S<n.length;){const L=r[S];b(L!=null,`Previous layout not found for panel index ${S}`);const R=L+y,E=_({panelConstraints:n[S],size:R});if(P(L,E)||(y-=E-L,r[S]=E),P(y,0))break;e>0?S--:S++}}}const m=Object.values(r).reduce((d,p)=>p+d,0);if(!P(m,100,.1))return a;const x=Object.keys(a);return r.reduce((d,p,v)=>(d[x[v]]=p,d),{})}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 Pe({event:e,hitRegions:t,initialLayoutMap:n,mountedGroups:o,pointerDownAtPoint:a}){let s=0;const u=new Map(o);t.forEach(i=>{const{disableCursor:r,element:l,orientation:f,panels:c}=i.group;let m=0;a?f==="horizontal"?m=(e.clientX-a.x)/l.offsetWidth*100:m=(e.clientY-a.y)/l.offsetHeight*100:f==="horizontal"?m=e.clientX<0?-100:100:m=e.clientY<0?-100:100;const x=n.get(i.group),{derivedPanelConstraints:d,layout:p,separatorToPanels:v}=o.get(i.group)??{};if(d&&x&&p&&v){const h=W({delta:m,initialLayout:x,panelConstraints:d,pivotIndices:i.panels.map(y=>c.indexOf(y)),prevLayout:p,trigger:"mouse-or-touch"});if(B(h,p)){if(m!==0&&!r)switch(f){case"horizontal":{s|=m<0?xe:ze;break}case"vertical":{s|=m<0?be:we;break}}}else{u.set(i.group,{derivedPanelConstraints:d,layout:h,separatorToPanels:v});const y=i.group.panels.map(({id:z})=>z).join(",");i.group.inMemoryLayouts[y]=h}}}),M({cursorFlags:s,mountedGroups:u}),re()}function me(e){if(e.defaultPrevented)return;if(e.relatedTarget!==null)return;if(e.clientX===0&&e.clientY===0)return;const{interactionState:t,mountedGroups:n}=O();switch(t.state){case"active":t.hitRegions.forEach(o=>{e.currentTarget===o.group.element&&Pe({event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n})})}}function Q(e){const t=e.parentElement;b(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 A({layout:e,panelConstraints:t}){const o=[...Object.values(e)],a=o.reduce((i,r)=>i+r,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(i=>`${i}%`).join(", ")}`);if(!P(a,100)&&o.length>0)for(let i=0;i<t.length;i++){const r=o[i];b(r!=null,`No layout data found for index ${i}`);const l=100/a*r;o[i]=l}let s=0;for(let i=0;i<t.length;i++){const r=o[i];b(r!=null,`No layout data found for index ${i}`);const l=_({panelConstraints:t[i],size:r});r!=l&&(s+=r-l,o[i]=l)}if(!P(s,0))for(let i=0;i<t.length;i++){const r=o[i];b(r!=null,`No layout data found for index ${i}`);const l=r+s,f=_({panelConstraints:t[i],size:l});if(r!==f&&(s-=f-r,o[i]=f,P(s,0)))break}const u=Object.keys(e);return o.reduce((i,r,l)=>(i[u[l]]=r,i),{})}function Le({groupId:e}){const t=()=>{const{mountedGroups:n}=O();for(const[o,a]of n)if(o.id===e)return{group:o,...a};throw Error(`Group ${e} not found`)};return{getLayout(){const{layout:n}=t();return n},setLayout(n){const{derivedPanelConstraints:o,group:a,layout:s,separatorToPanels:u}=t(),i=A({layout:n,panelConstraints:o});return B(s,i)||M(r=>({mountedGroups:new Map(r.mountedGroups).set(a,{derivedPanelConstraints:o,layout:i,separatorToPanels:u})})),i}}}function Re(e){const{mountedGroups:t}=O(),n=t.get(e);return b(n,`Mounted Group ${e.id} not found`),n}function T(e,t){const n=Q(e),o=Re(n),a=n.separators.find(c=>c.element===e);b(a,"Matching separator not found");const s=o.separatorToPanels.get(a);b(s,"Matching panels not found");const u=s.map(c=>n.panels.indexOf(c)),r=Le({groupId:n.id}).getLayout(),l=W({delta:t,initialLayout:r,panelConstraints:o.derivedPanelConstraints,pivotIndices:u,prevLayout:r,trigger:"keyboard"}),f=A({layout:l,panelConstraints:o.derivedPanelConstraints});B(r,f)||M(c=>({mountedGroups:new Map(c.mountedGroups).set(n,{derivedPanelConstraints:o.derivedPanelConstraints,layout:f,separatorToPanels:o.separatorToPanels})}))}function he(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:a,layout:s,separatorToPanels:u}=Re(o),i=o.separators.find(c=>c.element===t);b(i,"Matching separator not found");const r=u.get(i);b(r,"Matching panels not found");const l=r[0],f=a.find(c=>c.panelId===l.id);if(b(f,"Panel metadata not found"),f.collapsible){const c=s[l.id],m=f.collapsedSize===c?o.inMemoryLastExpandedPanelSizes[l.id]??f.minSize:f.collapsedSize;T(t,m-c)}break}case"F6":{e.preventDefault();const a=Q(t).separators.map(r=>r.element),s=Array.from(a).findIndex(r=>r===e.currentTarget);b(s!==null,"Index not found");const u=e.shiftKey?s>0?s-1:a.length-1:s+1<a.length?s+1:0;a[u].focus();break}case"Home":{e.preventDefault(),T(t,-100);break}}}function Be(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 Ue(e,t,n){let o,a={x:1/0,y:1/0};for(const s of t){const u=Be(n,s.rect);switch(e){case"horizontal":{u.x<=a.x&&(o=s,a=u);break}case"vertical":{u.y<=a.y&&(o=s,a=u);break}}}return o?{distance:a,hitRegion:o}:void 0}let J;function Ke(){return J===void 0&&(typeof matchMedia=="function"?J=!!matchMedia("(pointer:coarse)").matches:J=!1),J}function Ee(e,t){const n=[];return t.forEach((o,a)=>{if(a.disabled)return;const s=Ke()?pe.coarse:pe.precise,u=Se(a),i=Ue(a.orientation,u,{x:e.clientX,y:e.clientY});i&&i.distance.x<=s&&i.distance.y<=s&&n.push(i.hitRegion)}),n}function ve(e){if(e.defaultPrevented)return;const{mountedGroups:t}=O(),n=Ee(e,t),o=new Set,a=new Set,s=new Set,u=new Map;let i=!1;n.forEach(r=>{o.add(r.group),r.panels.forEach(f=>{a.add(f)}),r.separator&&(s.add(r.separator),i||(i=!0,r.separator.element.focus()));const l=t.get(r.group);l&&u.set(r.group,l.layout)}),M({interactionState:{hitRegions:n,initialLayoutMap:u,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function ge(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=O();switch(t.state){case"active":{if(e.type!=="pointerleave"&&e.buttons===0){M(o=>o.interactionState.state==="inactive"?o:{cursorFlags:0,interactionState:{state:"inactive"}});return}Pe({event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n,pointerDownAtPoint:t.pointerDownAtPoint});break}default:{const o=Ee(e,n);o.length===0?t.state!=="inactive"&&M({interactionState:{state:"inactive"}}):M({interactionState:{hitRegions:o,state:"hover"}}),re();break}}}function ye(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=O();switch(t.state){case"active":M({cursorFlags:0,interactionState:{state:"inactive"}}),re()}}function Ve(e){let t=0,n=0;const o={};for(const s of e)if(s.defaultSize!==void 0){t++;const u=I(s.defaultSize);n+=u,o[s.panelId]=u}else o[s.panelId]=void 0;const a=e.length-t;if(a!==0){const s=I((100-n)/a);for(const u of e)u.defaultSize===void 0&&(o[u.panelId]=s)}return o}function qe(e,t,n){const o=n[0];if(!o)return;const a=e.panels.find(u=>u.element===t);if(!a||!a.onResize)return;const s=ae({group:e});a.onResize({asPercentage:I(o.inlineSize/s*100),inPixels:o.inlineSize},a.id)}function Xe(e){let t=!0;b(e.separators.length===0||e.separators.length<e.panels.length,"Invalid Group configuration; too many Separator components");const n=new Set,o=new Set,a=new ResizeObserver(c=>{for(const m of c){const{borderBoxSize:x,target:d}=m;d===e.element?t&&M(p=>{const v=p.mountedGroups.get(e);if(v){const h=de(e),y=v.layout,z=A({layout:y,panelConstraints:h});return{mountedGroups:new Map(p.mountedGroups).set(e,{derivedPanelConstraints:h,layout:z,separatorToPanels:v.separatorToPanels})}}return p}):qe(e,d,x)}});a.observe(e.element),e.panels.forEach(c=>{b(!n.has(c.id),`Panel ids must be unique; id "${c.id}" was used more than once`),n.add(c.id),c.onResize&&a.observe(c.element)});const s=de(e),u=e.panels.map(({id:c})=>c).join(","),i=e.inMemoryLayouts[u]??e.defaultLayout??Ve(s),r=A({layout:i,panelConstraints:s}),l=Se(e),f=M(c=>({mountedGroups:new Map(c.mountedGroups).set(e,{derivedPanelConstraints:s,layout:r,separatorToPanels:new Map(l.filter(m=>m.separator).map(m=>[m.separator,m.panels]))})}));return e.element.addEventListener("pointerleave",me),e.separators.forEach(c=>{b(!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",he)}),f.mountedGroups.size===1&&(window.addEventListener("pointerdown",ve),window.addEventListener("pointermove",ge),window.addEventListener("pointerup",ye)),function(){t=!1;const m=M(x=>{const d=new Map(x.mountedGroups);return d.delete(e),{mountedGroups:d}});e.element.removeEventListener("pointerleave",me),e.separators.forEach(x=>{x.element.removeEventListener("keydown",he)}),m.mountedGroups.size===0&&(window.removeEventListener("pointerdown",ve),window.removeEventListener("pointermove",ge),window.removeEventListener("pointerup",ye)),a.disconnect()}}function le(e){const t=g.useId();return`${e??t}`}const j=typeof window<"u"?g.useLayoutEffect:g.useEffect;function ue(e){const t=g.useRef(e);return j(()=>{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 Ce="--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 Ge=g.createContext(null);function Ye(e,t){const n=g.useRef({getLayout:()=>({}),setLayout:He});g.useImperativeHandle(t,()=>n.current,[]),j(()=>{Object.assign(n.current,Le({groupId:e}))})}function Ze({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:a,elementRef:s,groupRef:u,id:i,onLayoutChange:r,orientation:l="horizontal",style:f,...c}){const m=g.useRef({}),x=ue(w=>{B(m.current,w)||(m.current=w,r?.(w))}),d=le(i),[p,v]=g.useState(!1),[h,y]=g.useState(null),[z,S]=g.useState(n??{}),[L,R]=g.useState([]),[E,U]=g.useState([]),ee=g.useRef({}),K=g.useRef({}),V=ce(y,s);Ye(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(h!==null&&L.length>0){const w={defaultLayout:n,disableCursor:!!o,disabled:!!a,element:h,id:d,inMemoryLastExpandedPanelSizes:ee.current,inMemoryLayouts:K.current,orientation:l,panels:L,separators:E},G=Xe(w),te=O().mountedGroups.get(w);te&&(S(te.layout),x?.(te.layout));const Ie=D.addListener("interactionStateChange",Y=>{switch(Y.state){case"active":case"hover":{v(Y.hitRegions.some(N=>N.group===w));break}}}),ke=D.addListener("mountedGroupsChange",Y=>{const N=Y.get(w);N&&N.derivedPanelConstraints.length>0&&(S(N.layout),x?.(N.layout))});return()=>{G(),Ie(),ke()}}},[n,o,a,h,d,x,l,L,E]);const X={[Ce]:p?"none":void 0};for(const w in z){const G=Me(d,w),$=z[w];X[G]=$}return H.jsx(Ge.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 se(e){return`react-resizable-panels:${e}`}function Je({id:e,layout:t,storage:n}){try{const o=se(e);n.setItem(o,JSON.stringify(t))}catch(o){console.error(o)}}function Qe({groupId:e,storage:t}){const n=g.useSyncExternalStore(et,()=>t.getItem(se(e)),()=>t.getItem(se(e))),o=g.useMemo(()=>n?JSON.parse(n):void 0,[n]),a=g.useCallback(s=>Je({id:e,layout:s,storage:t}),[e,t]);return{defaultLayout:o,onLayoutChange:a}}function et(){return function(){}}function tt(){return g.useState(null)}function nt(){return g.useRef(null)}function fe(){const e=g.useContext(Ge);return b(e,"Group Context not found; did you render a Panel or Separator outside of a Group?"),e}function ot({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:i}=O();for(const[r,{derivedPanelConstraints:l,layout:f,separatorToPanels:c}]of i)if(r.id===e)return{derivedPanelConstraints:l,group:r,layout:f,separatorToPanels:c};throw Error(`Group ${e} not found`)},o=()=>{const i=n().derivedPanelConstraints.find(r=>r.panelId===t);if(i!==void 0)return i;throw Error(`Panel constraints not found for Panel ${t}`)},a=()=>{const i=n().group.panels.find(r=>r.id===t);if(i!==void 0)return i;throw Error(`Layout not found for Panel ${t}`)},s=()=>{const i=n().layout[t];if(i!==void 0)return i;throw Error(`Layout not found for Panel ${t}`)},u=i=>{const r=s();if(i===r)return;const{derivedPanelConstraints:l,group:f,layout:c,separatorToPanels:m}=n(),x=f.panels.findIndex(h=>h.id===t),d=x===f.panels.length-1,p=W({delta:d?r-i:i-r,initialLayout:c,panelConstraints:l,pivotIndices:d?[x-1,x]:[x,x+1],prevLayout:c,trigger:"imperative-api"}),v=A({layout:p,panelConstraints:l});B(c,v)||M(h=>({mountedGroups:new Map(h.mountedGroups).set(f,{derivedPanelConstraints:l,layout:v,separatorToPanels:m})}))};return{collapse:()=>{const{collapsible:i,collapsedSize:r}=o(),l=s();i&&l!==r&&u(r)},expand:()=>{const{collapsible:i,collapsedSize:r,minSize:l}=o(),f=s();i&&f===r&&u(l)},getSize:()=>{const{group:i}=n(),r=s(),{element:l}=a(),f=i.orientation==="horizontal"?l.offsetWidth:l.offsetHeight;return{asPercentage:r,inPixels:f}},isCollapsed:()=>{const{collapsible:i,collapsedSize:r}=o(),l=s();return i&&P(r,l)},resize:i=>{if(s()!==i){let l;switch(typeof i){case"number":{const{group:f}=n(),c=ae({group:f});l=I(i/c*100);break}case"string":{l=parseFloat(i);break}}u(l)}}}}function it(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,[]),j(()=>{Object.assign(o.current,ot({groupId:n,panelId:e}))})}function st({children:e,className:t,collapsedSize:n="0%",collapsible:o=!1,defaultSize:a,elementRef:s,id:u,maxSize:i="100%",minSize:r="0%",onResize:l,panelRef:f,style:c,...m}){const x=!!u,d=le(u),[p,v]=g.useState(null),h=ce(v,s),{id:y,registerPanel:z}=fe(),S=l!==null,L=ue(E=>{l?.(E,u)});j(()=>{if(p!==null)return z({element:p,id:d,idIsStable:x,onResize:S?L:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:a,maxSize:i,minSize:r}})},[n,o,a,p,S,d,x,i,r,L,z]),it(d,f);const R=Me(y,d);return H.jsx("div",{...m,"data-panel":!0,"data-testid":d,id:d,ref:h,style:{...at,flexBasis:0,flexGrow:`var(${R}, 1)`,flexShrink:1,overflow:"hidden",pointerEvents:`var(${Ce})`},children:H.jsx("div",{className:t,style:{width:"100%",height:"100%",...c},children:e})})}const at={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 rt(){return g.useState(null)}function lt(){return g.useRef(null)}function ut({layout:e,panelConstraints:t,panelId:n,panelIndex:o}){let a,s;const u=e[n],i=t.find(r=>r.panelId===n);if(i){const r=i.maxSize,l=s=i.collapsible?i.collapsedSize:i.minSize,f=[o,o+1];s=A({layout:W({delta:l-u,initialLayout:e,panelConstraints:t,pivotIndices:f,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n],a=A({layout:W({delta:r-u,initialLayout:e,panelConstraints:t,pivotIndices:f,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n]}return{valueControls:n,valueMax:a,valueMin:s,valueNow:u}}function ct({children:e,className:t,elementRef:n,id:o,style:a,...s}){const u=le(o),[i,r]=g.useState({}),[l,f]=g.useState("inactive"),[c,m]=g.useState(null),x=ce(m,n),{id:d,orientation:p,registerSeparator:v}=fe(),h=p==="horizontal"?"vertical":"horizontal";return j(()=>{if(c!==null){const y={element:c,id:u},z=v(y),S=D.addListener("interactionStateChange",R=>{f(R.state!=="inactive"&&R.hitRegions.some(E=>E.separator===y)?R.state:"inactive")}),L=D.addListener("mountedGroupsChange",R=>{R.forEach(({derivedPanelConstraints:E,layout:U,separatorToPanels:ee},K)=>{if(K.id===d){const V=ee.get(y);if(V){const q=V[0],X=K.panels.indexOf(q);r(ut({layout:U,panelConstraints:E,panelId:q.id,panelIndex:X}))}}})});return()=>{S(),L(),z()}}},[c,d,u,v]),H.jsx("div",{...s,"aria-controls":i.valueControls,"aria-orientation":h,"aria-valuemax":i.valueMax,"aria-valuemin":i.valueMin,"aria-valuenow":i.valueNow,children:e,className:t,"data-separator":l,"data-testid":u,id:u,ref:x,role:"separator",style:{flexBasis:"auto",...a,flexGrow:0,flexShrink:0},tabIndex:0})}exports.Group=Ze;exports.Panel=st;exports.Separator=ct;exports.useDefaultLayout=Qe;exports.useGroupCallbackRef=tt;exports.useGroupRef=nt;exports.usePanelCallbackRef=rt;exports.usePanelRef=lt;
|
|
2
2
|
//# sourceMappingURL=react-resizable-panels.cjs.map
|