Removed need to check checkVisibility()

Author: bvaughn

integrations/vite/tests/visibility.spec.tsx

@@ -54,26 +54,28 @@ test.describe("visibility", () => {
       "/e2e/visibility/display/hidden/"
     );
 
-    await expect(page.getByText('"onLayoutCount": 0')).toBeVisible();
+    await expect(page.getByText('"onLayoutCount": 1')).toBeVisible();
+    // Actual layout values are not meaningful since the Group is not visible
 
     await page.getByText("toggle display hidden → visible").click();
 
-    await expect(page.getByText('"onLayoutCount": 1')).toBeVisible();
+    await expect(page.getByText('"onLayoutCount": 2')).toBeVisible();
     await expect(page.getByText("id: left")).toContainText("25%");
     await expect(page.getByRole("separator")).toBeVisible();
     await expect(page.getByText("id: right")).toContainText("75%");
 
     await page.getByText("toggle display visible → hidden").click();
 
-    await expect(page.getByText('"onLayoutCount": 1')).toBeVisible();
+    await expect(page.getByText('"onLayoutCount": 2')).toBeVisible();
+    // Actual layout values are not meaningful since the Group is not visible
 
     await page.setViewportSize({
       width: 500,
       height: 500
     });
     await page.getByText("toggle display hidden → visible").click();
 
-    await expect(page.getByText('"onLayoutCount": 2')).toBeVisible();
+    await expect(page.getByText('"onLayoutCount": 3')).toBeVisible();
     await expect(page.getByText("id: left")).toContainText("33%");
     await expect(page.getByRole("separator")).toBeVisible();
     await expect(page.getByText("id: right")).toContainText("67%");

lib/components/group/Group.tsx

@@ -15,7 +15,6 @@ import { GroupContext } from "./GroupContext";
 import { sortByElementOffset } from "./sortByElementOffset";
 import type { GroupProps, Layout, RegisteredGroup } from "./types";
 import { useGroupImperativeHandle } from "./useGroupImperativeHandle";
-import { useIsVisible } from "./useIsVisible";
 
 /**
  * A Group wraps a set of resizable Panel components.
@@ -63,8 +62,6 @@ export function Group({
   const [panels, setPanels] = useState<RegisteredPanel[]>([]);
   const [separators, setSeparators] = useState<RegisteredSeparator[]>([]);
 
-  const isVisible = useIsVisible(element);
-
   const inMemoryLastExpandedPanelSizesRef = useRef<{
     [panelIds: string]: number;
   }>({});
@@ -107,13 +104,6 @@ export function Group({
       return;
     }
 
-    if (typeof element.checkVisibility === "function") {
-      if (!element.checkVisibility()) {
-        // Wait
-        return;
-      }
-    }
-
     const group: RegisteredGroup = {
       defaultLayout,
       disableCursor: !!disableCursor,
@@ -178,7 +168,6 @@ export function Group({
     disabled,
     element,
     id,
-    isVisible,
     onLayoutChangeStable,
     orientation,
     panels,
@@ -208,7 +197,6 @@ export function Group({
         style={{
           ...style,
           ...cssVariables,
-          contentVisibility: "auto",
           display: "flex",
           flexDirection: orientation === "horizontal" ? "row" : "column",
           flexWrap: "nowrap"

lib/components/group/useIsVisible.ts

@@ -5,13 +5,12 @@ import { formatLayoutNumber } from "../utils/formatLayoutNumber";
 import { calculateAvailableGroupSize } from "./calculateAvailableGroupSize";
 
 export function calculatePanelConstraints(group: RegisteredGroup) {
-  const { element, panels } = group;
+  const { panels } = group;
 
-  if (
-    typeof element.checkVisibility === "function" &&
-    !element.checkVisibility()
-  ) {
-    // Can't calculate anything meaningful if we're within an offscreen tree
+  const groupSize = calculateAvailableGroupSize({ group });
+  if (groupSize === 0) {
+    // Can't calculate anything meaningful if the group has a width/height of 0
+    // (This could indicate that it's within a hidden subtree)
     return panels.map((current) => ({
       collapsedSize: 0,
       collapsible: current.panelConstraints.collapsible === true,
@@ -22,8 +21,6 @@ export function calculatePanelConstraints(group: RegisteredGroup) {
     }));
   }
 
-  const groupSize = calculateAvailableGroupSize({ group });
-
   return panels.map<PanelConstraints>((panel) => {
     const { element, panelConstraints } = panel;
 

lib/global/dom/calculatePanelConstraints.ts

@@ -1,5 +1,6 @@
 import type { Layout, RegisteredGroup } from "../components/group/types";
 import { assert } from "../utils/assert";
+import { calculateAvailableGroupSize } from "./dom/calculateAvailableGroupSize";
 import { calculateHitRegions } from "./dom/calculateHitRegions";
 import { calculatePanelConstraints } from "./dom/calculatePanelConstraints";
 import { onGroupPointerLeave } from "./event-handlers/onGroupPointerLeave";
@@ -9,6 +10,7 @@ import { onWindowPointerMove } from "./event-handlers/onWindowPointerMove";
 import { onWindowPointerUp } from "./event-handlers/onWindowPointerUp";
 import { update } from "./mutableState";
 import { calculateDefaultLayout } from "./utils/calculateDefaultLayout";
+import { layoutsEqual } from "./utils/layoutsEqual";
 import { notifyPanelOnResize } from "./utils/notifyPanelOnResize";
 import { validatePanelGroupLayout } from "./utils/validatePanelGroupLayout";
 
@@ -31,15 +33,14 @@ export function mountGroup(group: RegisteredGroup) {
     for (const entry of entries) {
       const { borderBoxSize, target } = entry;
       if (target === group.element) {
-        if (
-          typeof target.checkVisibility === "function" &&
-          !target.checkVisibility()
-        ) {
-          // Constraints can't be calculated for groups within a hidden subtree
-          return;
-        }
-
         if (isMounted) {
+          const groupSize = calculateAvailableGroupSize({ group });
+          if (groupSize === 0) {
+            // Can't calculate anything meaningful if the group has a width/height of 0
+            // (This could indicate that it's within a hidden subtree)
+            return;
+          }
+
           update((prevState) => {
             const match = prevState.mountedGroups.get(group);
             if (match) {
@@ -48,12 +49,21 @@ export function mountGroup(group: RegisteredGroup) {
                 calculatePanelConstraints(group);
 
               // Revalidate layout in case constraints have changed
-              const prevLayout = match.layout;
+              const prevLayout = match.defaultLayoutDeferred
+                ? calculateDefaultLayout(nextDerivedPanelConstraints)
+                : match.layout;
               const nextLayout = validatePanelGroupLayout({
                 layout: prevLayout,
                 panelConstraints: nextDerivedPanelConstraints
               });
 
+              if (
+                !match.defaultLayoutDeferred &&
+                layoutsEqual(prevLayout, nextLayout)
+              ) {
+                return prevState;
+              }
+
               return {
                 mountedGroups: new Map(prevState.mountedGroups).set(group, {
                   derivedPanelConstraints: nextDerivedPanelConstraints,
@@ -84,6 +94,8 @@ export function mountGroup(group: RegisteredGroup) {
     }
   });
 
+  const groupSize = calculateAvailableGroupSize({ group });
+
   // Calculate initial layout for the new Panel configuration
   const derivedPanelConstraints = calculatePanelConstraints(group);
   const panelIdsKey = group.panels.map(({ id }) => id).join(",");
@@ -100,6 +112,7 @@ export function mountGroup(group: RegisteredGroup) {
 
   const nextState = update((prevState) => ({
     mountedGroups: new Map(prevState.mountedGroups).set(group, {
+      defaultLayoutDeferred: groupSize === 0,
       derivedPanelConstraints,
       layout: defaultLayoutSafe,
       separatorToPanels: new Map(

lib/global/mountGroup.ts

@@ -18,6 +18,7 @@ export type SeparatorToPanelsMap = Map<
 export type MountedGroupMap = Map<
   RegisteredGroup,
   {
+    defaultLayoutDeferred?: boolean | undefined;
     derivedPanelConstraints: PanelConstraints[];
     layout: Layout;
     separatorToPanels: SeparatorToPanelsMap;