react-resizable-panels 4.0.5 → 4.0.7

package/dist/react-resizable-panels.js

@@ -5,7 +5,7 @@ function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
 }
-function se(e, t) {
+function re(e, t) {
   return t.sort(
     e === "horizontal" ? je : Be
   );
@@ -18,8 +18,14 @@ function Be(e, t) {
   const n = e.element.offsetTop - t.element.offsetTop;
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
+function te({
+  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 we(e) {
-  const { element: t, orientation: n, panels: o, separators: r } = e, s = se(
+  const { element: t, orientation: n, panels: o, separators: r } = e, s = re(
     n,
     Array.from(t.children).filter((l) => l instanceof HTMLElement).map((l) => ({ element: l }))
   ).map(({ element: l }) => l), c = [];
@@ -33,6 +39,7 @@ function we(e) {
         const u = i.element.getBoundingClientRect(), m = l.getBoundingClientRect();
         c.push({
           group: e,
+          groupSize: te({ group: e }),
           panels: [i, f],
           separator: a,
           rect: n === "horizontal" ? new DOMRect(
@@ -120,14 +127,8 @@ function J({
 function I(e) {
   return parseFloat(e.toFixed(3));
 }
-function ae({
-  group: e
-}) {
-  const { orientation: t, panels: n } = e;
-  return n.reduce((o, r) => (o += t === "horizontal" ? r.element.offsetWidth : r.element.offsetHeight, o), 0);
-}
 function pe(e) {
-  const { panels: t } = e, n = ae({ group: e });
+  const { panels: t } = e, n = te({ group: e });
   return t.map((o) => {
     const { element: r, panelConstraints: s } = o;
     let c = 0;
@@ -255,7 +256,7 @@ function C(e) {
     });
   }), A.emit("mountedGroupsChange", R.mountedGroups)), R;
 }
-const Ze = (e) => e, oe = () => {
+const Ze = (e) => e, ie = () => {
 }, Le = 1, Pe = 2, Ee = 4, Re = 8, me = {
   coarse: 10,
   precise: 5
@@ -303,7 +304,7 @@ function Je({
   }
   return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
-let ie, k;
+let se, k;
 function le() {
   k === void 0 && (k = new CSSStyleSheet(), document.adoptedStyleSheets = [k]);
   const { cursorFlags: e, interactionState: t } = O();
@@ -315,13 +316,13 @@ function le() {
         groups: t.hitRegions.map((r) => r.group),
         state: t.state
       }), o = `*{cursor: ${n} !important; ${t.state === "active" ? "touch-action: none;" : ""} }`;
-      if (ie === o)
+      if (se === o)
         return;
-      ie = o, n ? k.cssRules.length === 0 ? k.insertRule(o) : k.replaceSync(o) : k.cssRules.length === 1 && k.deleteRule(0);
+      se = o, n ? k.cssRules.length === 0 ? k.insertRule(o) : k.replaceSync(o) : k.cssRules.length === 1 && k.deleteRule(0);
       break;
     }
     case "inactive": {
-      ie = void 0, k.cssRules.length === 1 && k.deleteRule(0);
+      se = void 0, k.cssRules.length === 1 && k.deleteRule(0);
       break;
     }
   }
@@ -376,17 +377,17 @@ function B({
         `Panel constraints not found for index ${d}`
       );
       const {
-        collapsedSize: v = 0,
-        collapsible: h,
-        minSize: g = 0
+        collapsedSize: h = 0,
+        collapsible: v,
+        minSize: x = 0
       } = p;
-      if (h) {
-        const x = c[d];
+      if (v) {
+        const S = c[d];
         if (z(
-          x != null,
+          S != null,
           `Previous layout not found for panel index ${d}`
-        ), w(x, v)) {
-          const y = g - x;
+        ), w(S, h)) {
+          const y = x - S;
           j(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
@@ -398,17 +399,17 @@ function B({
         `No panel constraints found for index ${d}`
       );
       const {
-        collapsedSize: v = 0,
-        collapsible: h,
-        minSize: g = 0
+        collapsedSize: h = 0,
+        collapsible: v,
+        minSize: x = 0
       } = p;
-      if (h) {
-        const x = c[d];
+      if (v) {
+        const S = c[d];
         if (z(
-          x != null,
+          S != null,
           `Previous layout not found for panel index ${d}`
-        ), w(x, g)) {
-          const y = x - v;
+        ), w(S, x)) {
+          const y = S - h;
           j(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
@@ -416,36 +417,36 @@ function B({
   }
   {
     const d = e < 0 ? 1 : -1;
-    let p = e < 0 ? f : l, v = 0;
+    let p = e < 0 ? f : l, h = 0;
     for (; ; ) {
-      const g = c[p];
+      const x = c[p];
       z(
-        g != null,
+        x != null,
         `Previous layout not found for panel index ${p}`
       );
       const y = F({
         panelConstraints: n[p],
         size: 100
-      }) - g;
-      if (v += y, p += d, p < 0 || p >= n.length)
+      }) - x;
+      if (h += y, p += d, p < 0 || p >= n.length)
         break;
     }
-    const h = Math.min(Math.abs(e), Math.abs(v));
-    e = e < 0 ? 0 - h : h;
+    const v = Math.min(Math.abs(e), Math.abs(h));
+    e = e < 0 ? 0 - v : v;
   }
   {
     let p = e < 0 ? l : f;
     for (; p >= 0 && p < n.length; ) {
-      const v = Math.abs(e) - Math.abs(u), h = c[p];
+      const h = Math.abs(e) - Math.abs(u), v = c[p];
       z(
-        h != null,
+        v != null,
         `Previous layout not found for panel index ${p}`
       );
-      const g = h - v, x = F({
+      const x = v - h, S = F({
         panelConstraints: n[p],
-        size: g
+        size: x
       });
-      if (!w(h, x) && (u += h - x, a[p] = x, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!w(v, S) && (u += v - S, a[p] = S, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
@@ -460,23 +461,23 @@ function B({
       p != null,
       `Previous layout not found for panel index ${d}`
     );
-    const v = p + u, h = F({
+    const h = p + u, v = F({
       panelConstraints: n[d],
-      size: v
+      size: h
     });
-    if (a[d] = h, !w(h, v)) {
-      let g = v - h, y = e < 0 ? f : l;
+    if (a[d] = v, !w(v, h)) {
+      let x = h - v, y = e < 0 ? f : l;
       for (; y >= 0 && y < n.length; ) {
         const L = a[y];
         z(
           L != null,
           `Previous layout not found for panel index ${y}`
         );
-        const P = L + g, E = F({
+        const P = L + x, E = F({
           panelConstraints: n[y],
           size: P
         });
-        if (w(L, E) || (g -= E - L, a[y] = E), w(g, 0))
+        if (w(L, E) || (x -= E - L, a[y] = E), w(x, 0))
           break;
         e > 0 ? y-- : y++;
       }
@@ -488,8 +489,8 @@ function B({
   );
   if (!w(m, 100, 0.1))
     return r;
-  const S = Object.keys(r);
-  return a.reduce((d, p, v) => (d[S[v]] = p, d), {});
+  const g = Object.keys(r);
+  return a.reduce((d, p, h) => (d[g[h]] = p, d), {});
 }
 function U(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
@@ -509,43 +510,43 @@ function Ce({
   let s = 0;
   const c = new Map(o);
   t.forEach((i) => {
-    const { disableCursor: a, element: l, orientation: f, panels: u } = 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 S = n.get(i.group), {
-      derivedPanelConstraints: d,
-      layout: p,
+    const { group: a, groupSize: l } = i, { disableCursor: f, orientation: u, panels: m } = a;
+    let g = 0;
+    r ? u === "horizontal" ? g = (e.clientX - r.x) / l * 100 : g = (e.clientY - r.y) / l * 100 : u === "horizontal" ? g = e.clientX < 0 ? -100 : 100 : g = e.clientY < 0 ? -100 : 100;
+    const d = n.get(a), {
+      derivedPanelConstraints: p,
+      layout: h,
       separatorToPanels: v
-    } = o.get(i.group) ?? {};
-    if (d && S && p && v) {
-      const h = B({
-        delta: m,
-        initialLayout: S,
-        panelConstraints: d,
-        pivotIndices: i.panels.map((g) => u.indexOf(g)),
-        prevLayout: p,
+    } = o.get(a) ?? {};
+    if (p && d && h && v) {
+      const x = B({
+        delta: g,
+        initialLayout: d,
+        panelConstraints: p,
+        pivotIndices: i.panels.map((S) => m.indexOf(S)),
+        prevLayout: h,
         trigger: "mouse-or-touch"
       });
-      if (U(h, p)) {
-        if (m !== 0 && !a)
-          switch (f) {
+      if (U(x, h)) {
+        if (g !== 0 && !f)
+          switch (u) {
             case "horizontal": {
-              s |= m < 0 ? Le : Pe;
+              s |= g < 0 ? Le : Pe;
               break;
             }
             case "vertical": {
-              s |= m < 0 ? Ee : Re;
+              s |= g < 0 ? Ee : Re;
               break;
             }
           }
       } else {
         c.set(i.group, {
-          derivedPanelConstraints: d,
-          layout: h,
+          derivedPanelConstraints: p,
+          layout: x,
           separatorToPanels: v
         });
-        const g = i.group.panels.map(({ id: x }) => x).join(",");
-        i.group.inMemoryLayouts[g] = h;
+        const S = i.group.panels.map(({ id: y }) => y).join(",");
+        i.group.inMemoryLayouts[S] = x;
       }
     }
   }), C({
@@ -905,7 +906,7 @@ function it(e, t, n) {
   const r = e.panels.find((c) => c.element === t);
   if (!r || !r.onResize)
     return;
-  const s = ae({ group: e });
+  const s = te({ group: e });
   r.onResize(
     {
       asPercentage: I(
@@ -924,24 +925,24 @@ function st(e) {
   );
   const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((u) => {
     for (const m of u) {
-      const { borderBoxSize: S, target: d } = m;
+      const { borderBoxSize: g, target: d } = m;
       d === e.element ? t && C((p) => {
-        const v = p.mountedGroups.get(e);
-        if (v) {
-          const h = pe(e), g = v.layout, x = $({
-            layout: g,
-            panelConstraints: h
+        const h = p.mountedGroups.get(e);
+        if (h) {
+          const v = pe(e), x = h.layout, S = $({
+            layout: x,
+            panelConstraints: v
           });
           return {
             mountedGroups: new Map(p.mountedGroups).set(e, {
-              derivedPanelConstraints: h,
-              layout: x,
-              separatorToPanels: v.separatorToPanels
+              derivedPanelConstraints: v,
+              layout: S,
+              separatorToPanels: h.separatorToPanels
             })
           };
         }
         return p;
-      }) : it(e, d, S);
+      }) : it(e, d, g);
     }
   });
   r.observe(e.element), e.panels.forEach((u) => {
@@ -969,12 +970,12 @@ function st(e) {
     ), o.add(u.id), u.element.addEventListener("keydown", ve);
   }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointermove", ye), window.addEventListener("pointerup", Se)), function() {
     t = !1;
-    const m = C((S) => {
-      const d = new Map(S.mountedGroups);
+    const m = C((g) => {
+      const d = new Map(g.mountedGroups);
       return d.delete(e), { mountedGroups: d };
     });
-    e.element.removeEventListener("pointerleave", he), e.separators.forEach((S) => {
-      S.element.removeEventListener("keydown", ve);
+    e.element.removeEventListener("pointerleave", he), e.separators.forEach((g) => {
+      g.element.removeEventListener("keydown", ve);
     }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointermove", ye), window.removeEventListener("pointerup", Se)), r.disconnect();
   };
 }
@@ -1038,19 +1039,19 @@ function ht({
   style: f,
   ...u
 }) {
-  const m = T({}), S = ue((b) => {
+  const m = T({}), g = ue((b) => {
     U(m.current, b) || (m.current = b, a?.(b));
-  }), d = ce(i), [p, v] = G(!1), [h, g] = G(null), [x, y] = G(n ?? {}), [L, P] = G([]), [E, K] = G([]), te = T({}), V = T({}), X = fe(g, s);
+  }), d = ce(i), [p, h] = G(!1), [v, x] = G(null), [S, y] = G(n ?? {}), [L, P] = G([]), [E, K] = G([]), ne = T({}), V = T({}), X = fe(x, s);
   rt(d, c);
   const Y = be(
     () => ({
       id: d,
       orientation: l,
-      registerPanel: (b) => (P((M) => se(l, [...M, b])), () => {
+      registerPanel: (b) => (P((M) => re(l, [...M, b])), () => {
         P((M) => M.filter((N) => N !== b));
       }),
       registerSeparator: (b) => (K(
-        (M) => se(l, [...M, b])
+        (M) => re(l, [...M, b])
       ), () => {
         K(
           (M) => M.filter((N) => N !== b)
@@ -1060,40 +1061,43 @@ function ht({
     [d, l]
   );
   H(() => {
-    if (h !== null && L.length > 0) {
+    if (v !== null && L.length > 0) {
       const b = {
         defaultLayout: n,
         disableCursor: !!o,
         disabled: !!r,
-        element: h,
+        element: v,
         id: d,
-        inMemoryLastExpandedPanelSizes: te.current,
+        inMemoryLastExpandedPanelSizes: ne.current,
         inMemoryLayouts: V.current,
         orientation: l,
         panels: L,
         separators: E
-      }, M = st(b), ne = O().mountedGroups.get(b);
-      ne && (y(ne.layout), S?.(ne.layout));
+      }, M = st(b), oe = O().mountedGroups.get(b);
+      oe && (y(oe.layout), g?.(oe.layout));
       const De = A.addListener(
         "interactionStateChange",
         (Z) => {
           switch (Z.state) {
-            case "active":
-            case "hover": {
-              v(
+            case "active": {
+              h(
                 Z.hitRegions.some(
                   (_) => _.group === b
                 )
               );
               break;
             }
+            default: {
+              h(!1);
+              break;
+            }
           }
         }
       ), Ae = A.addListener(
         "mountedGroupsChange",
         (Z) => {
           const _ = Z.get(b);
-          _ && _.derivedPanelConstraints.length > 0 && (y(_.layout), S?.(_.layout));
+          _ && _.derivedPanelConstraints.length > 0 && (y(_.layout), g?.(_.layout));
         }
       );
       return () => {
@@ -1104,9 +1108,9 @@ function ht({
     n,
     o,
     r,
-    h,
+    v,
     d,
-    S,
+    g,
     l,
     L,
     E
@@ -1114,8 +1118,8 @@ function ht({
   const q = {
     [ke]: p ? "none" : void 0
   };
-  for (const b in x) {
-    const M = Oe(d, b), N = x[b];
+  for (const b in S) {
+    const M = Oe(d, b), N = S[b];
     q[M] = N;
   }
   return /* @__PURE__ */ W(Te.Provider, { value: Y, children: /* @__PURE__ */ W(
@@ -1139,7 +1143,7 @@ function ht({
     }
   ) });
 }
-function re(e) {
+function ae(e) {
   return `react-resizable-panels:${e}`;
 }
 function at({
@@ -1148,7 +1152,7 @@ function at({
   storage: n
 }) {
   try {
-    const o = re(e);
+    const o = ae(e);
     n.setItem(o, JSON.stringify(t));
   } catch (o) {
     console.error(o);
@@ -1160,8 +1164,8 @@ function vt({
 }) {
   const n = He(
     lt,
-    () => t.getItem(re(e)),
-    () => t.getItem(re(e))
+    () => t.getItem(ae(e)),
+    () => t.getItem(ae(e))
   ), o = be(
     () => n ? JSON.parse(n) : void 0,
     [n]
@@ -1234,21 +1238,21 @@ function ct({
       group: f,
       layout: u,
       separatorToPanels: m
-    } = n(), S = f.panels.findIndex((h) => h.id === t), d = S === f.panels.length - 1, p = B({
+    } = n(), g = f.panels.findIndex((v) => v.id === t), d = g === f.panels.length - 1, p = B({
       delta: d ? a - i : i - a,
       initialLayout: u,
       panelConstraints: l,
-      pivotIndices: d ? [S - 1, S] : [S, S + 1],
+      pivotIndices: d ? [g - 1, g] : [g, g + 1],
       prevLayout: u,
       trigger: "imperative-api"
-    }), v = $({
+    }), h = $({
       layout: p,
       panelConstraints: l
     });
-    U(u, v) || C((h) => ({
-      mountedGroups: new Map(h.mountedGroups).set(f, {
+    U(u, h) || C((v) => ({
+      mountedGroups: new Map(v.mountedGroups).set(f, {
         derivedPanelConstraints: l,
-        layout: v,
+        layout: h,
         separatorToPanels: m
       })
     }));
@@ -1278,7 +1282,7 @@ function ct({
         let l;
         switch (typeof i) {
           case "number": {
-            const { group: f } = n(), u = ae({ group: f });
+            const { group: f } = n(), u = te({ group: f });
             l = I(i / u * 100);
             break;
           }
@@ -1294,14 +1298,14 @@ function ct({
 }
 function ut(e, t) {
   const { id: n } = de(), o = T({
-    collapse: oe,
-    expand: oe,
+    collapse: ie,
+    expand: ie,
     getSize: () => ({
       asPercentage: 0,
       inPixels: 0
     }),
     isCollapsed: () => !1,
-    resize: oe
+    resize: ie
   });
   ze(t, () => o.current, []), H(() => {
     Object.assign(
@@ -1325,15 +1329,15 @@ function St({
   style: u,
   ...m
 }) {
-  const S = !!c, d = ce(c), [p, v] = G(null), h = fe(v, s), { id: g, registerPanel: x } = de(), y = l !== null, L = ue((E) => {
+  const g = !!c, d = ce(c), [p, h] = G(null), v = fe(h, s), { id: x, registerPanel: S } = de(), y = l !== null, L = ue((E) => {
     l?.(E, c);
   });
   H(() => {
     if (p !== null)
-      return x({
+      return S({
         element: p,
         id: d,
-        idIsStable: S,
+        idIsStable: g,
         onResize: y ? L : void 0,
         panelConstraints: {
           collapsedSize: n,
@@ -1350,13 +1354,13 @@ function St({
     p,
     y,
     d,
-    S,
+    g,
     i,
     a,
     L,
-    x
+    S
   ]), ut(d, f);
-  const P = Oe(g, d);
+  const P = Oe(x, d);
   return /* @__PURE__ */ W(
     "div",
     {
@@ -1364,7 +1368,7 @@ function St({
       "data-panel": !0,
       "data-testid": d,
       id: d,
-      ref: h,
+      ref: v,
       style: {
         ...ft,
         flexBasis: 0,
@@ -1462,22 +1466,22 @@ function bt({
   style: r,
   ...s
 }) {
-  const c = ce(o), [i, a] = G({}), [l, f] = G("inactive"), [u, m] = G(null), S = fe(m, n), {
+  const c = ce(o), [i, a] = G({}), [l, f] = G("inactive"), [u, m] = G(null), g = fe(m, n), {
     id: d,
     orientation: p,
-    registerSeparator: v
-  } = de(), h = p === "horizontal" ? "vertical" : "horizontal";
+    registerSeparator: h
+  } = de(), v = p === "horizontal" ? "vertical" : "horizontal";
   return H(() => {
     if (u !== null) {
-      const g = {
+      const x = {
         element: u,
         id: c
-      }, x = v(g), y = A.addListener(
+      }, S = h(x), y = A.addListener(
         "interactionStateChange",
         (P) => {
           f(
             P.state !== "inactive" && P.hitRegions.some(
-              (E) => E.separator === g
+              (E) => E.separator === x
             ) ? P.state : "inactive"
           );
         }
@@ -1485,9 +1489,9 @@ function bt({
         "mountedGroupsChange",
         (P) => {
           P.forEach(
-            ({ derivedPanelConstraints: E, layout: K, separatorToPanels: te }, V) => {
+            ({ derivedPanelConstraints: E, layout: K, separatorToPanels: ne }, V) => {
               if (V.id === d) {
-                const X = te.get(g);
+                const X = ne.get(x);
                 if (X) {
                   const Y = X[0], q = V.panels.indexOf(Y);
                   a(
@@ -1505,15 +1509,15 @@ function bt({
         }
       );
       return () => {
-        y(), L(), x();
+        y(), L(), S();
       };
     }
-  }, [u, d, c, v]), /* @__PURE__ */ W(
+  }, [u, d, c, h]), /* @__PURE__ */ W(
     "div",
     {
       ...s,
       "aria-controls": i.valueControls,
-      "aria-orientation": h,
+      "aria-orientation": v,
       "aria-valuemax": i.valueMax,
       "aria-valuemin": i.valueMin,
       "aria-valuenow": i.valueNow,
@@ -1522,7 +1526,7 @@ function bt({
       "data-separator": l,
       "data-testid": c,
       id: c,
-      ref: S,
+      ref: g,
       role: "separator",
       style: {
         flexBasis: "auto",