react-resizable-panels 4.0.3 → 4.0.4
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,37 @@ 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 specified using the following CSS units:
|
|
138
|
+
- Pixels (default if value is of type `number`)
|
|
139
|
+
- Percentages (default if value is of type `string`)
|
|
140
|
+
- Font sizes (em, rem)
|
|
141
|
+
- Viewport sizes (vh, vw)
|
|
122
142
|
|
|
123
|
-
|
|
143
|
+
Panel elements always include the following attributes:
|
|
124
144
|
|
|
125
|
-
|
|
145
|
+
```html
|
|
146
|
+
<div data-panel data-testid="panel-id-prop" id="panel-id-prop">
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
|
|
150
|
+
<!-- Panel:description:end -->
|
|
151
|
+
|
|
152
|
+
#### Required props
|
|
153
|
+
|
|
154
|
+
<!-- Panel:required-props:begin -->
|
|
155
|
+
None
|
|
156
|
+
<!-- Panel:required-props:end -->
|
|
126
157
|
|
|
127
158
|
#### Optional props
|
|
128
159
|
|
|
129
|
-
<!-- Panel:optional:begin -->
|
|
160
|
+
<!-- Panel:optional-props:begin -->
|
|
130
161
|
|
|
131
162
|
<table>
|
|
132
163
|
<thead>
|
|
@@ -209,19 +240,35 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
209
240
|
</tbody>
|
|
210
241
|
</table>
|
|
211
242
|
|
|
212
|
-
<!-- Panel:optional:end -->
|
|
243
|
+
<!-- Panel:optional-props:end -->
|
|
213
244
|
|
|
214
245
|
### Separator
|
|
215
246
|
|
|
216
|
-
|
|
247
|
+
<!-- Separator:description:begin -->
|
|
248
|
+
Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
|
|
249
|
+
|
|
250
|
+
Separators should be rendered as the direct child of a Group component.
|
|
251
|
+
|
|
252
|
+
Separator elements always include the following attributes:
|
|
217
253
|
|
|
218
|
-
|
|
254
|
+
```html
|
|
255
|
+
<div data-separator data-testid="separator-id-prop" id="separator-id-prop" role="separator">
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
|
|
259
|
+
|
|
260
|
+
ℹ️ 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).
|
|
261
|
+
<!-- Separator:description:end -->
|
|
262
|
+
|
|
263
|
+
#### Required props
|
|
219
264
|
|
|
220
|
-
<!-- Separator:required:
|
|
265
|
+
<!-- Separator:required-props:begin -->
|
|
266
|
+
None
|
|
267
|
+
<!-- Separator:required-props:end -->
|
|
221
268
|
|
|
222
269
|
#### Optional props
|
|
223
270
|
|
|
224
|
-
<!-- Separator:optional:begin -->
|
|
271
|
+
<!-- Separator:optional-props:begin -->
|
|
225
272
|
|
|
226
273
|
<table>
|
|
227
274
|
<thead>
|
|
@@ -260,4 +307,4 @@ Falls back to <code>useId</code> when not provided.</p>
|
|
|
260
307
|
</tbody>
|
|
261
308
|
</table>
|
|
262
309
|
|
|
263
|
-
<!-- Separator:optional:end -->
|
|
310
|
+
<!-- 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
|