fix(layout): Added fixes required for Concurrent Rendering

Author: mlaursen

packages/layout/src/LayoutProvider.tsx

@@ -1,12 +1,12 @@
 import {
   createContext,
+  ReactElement,
   ReactNode,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
-  useRef,
-  ReactElement,
 } from "react";
 import { useAppSize } from "@react-md/utils";
 
@@ -166,22 +166,18 @@ export function LayoutProvider({
     largeDesktopLayout,
   ].some((layout) => !!layout && isMiniLayout(layout));
 
-  const isPersistent = isPersistentLayout(layout);
-
   const { isDesktop } = appSize;
   const [visible, setVisible] = useState(
-    (isPersistent && isDesktop) ||
+    (isPersistentLayout(layout) && isDesktop) ||
       isToggleableVisible(defaultToggleableVisible, layout)
   );
-  const prevLayout = useRef(layout);
-  if (prevLayout.current !== layout) {
-    prevLayout.current = layout;
-    const nextVisible =
-      isPersistent || isToggleableVisible(defaultToggleableVisible, layout);
-    if (visible !== nextVisible) {
-      setVisible(nextVisible);
-    }
-  }
+
+  useEffect(() => {
+    setVisible(
+      isPersistentLayout(layout) ||
+        isToggleableVisible(defaultToggleableVisible, layout)
+    );
+  }, [defaultToggleableVisible, layout]);
 
   const showNav = useCallback(() => {
     setVisible(true);

packages/layout/src/__tests__/Layout.tsx

@@ -15,6 +15,7 @@ import {
   getByText as getByTextGlobal,
   render as baseRender,
   waitForElementToBeRemoved,
+  waitFor,
 } from "@testing-library/react";
 import {
   HomeSVGIcon,
@@ -630,7 +631,7 @@ describe("Layout", () => {
     });
   });
 
-  it("should maintain state while switching between static and mini layouts", () => {
+  it("should maintain state while switching between static and mini layouts", async () => {
     const navItems: LayoutNavigationTree = {
       "/": {
         href: "/",
@@ -685,7 +686,9 @@ describe("Layout", () => {
     expect(checkbox).toBeChecked();
 
     fireEvent.click(getByRole("button", { name: "Mobile" }));
-    expect(getNav).toThrow();
+    await waitFor(() => {
+      expect(getNav).toThrow();
+    });
     expect(getMiniNav).not.toThrow();
     expect(checkbox).toBeInTheDocument();
     expect(checkbox).toBeChecked();

packages/layout/src/useLayoutNavigation.ts

@@ -1,4 +1,4 @@
-import { ElementType, useRef } from "react";
+import { ElementType, useEffect } from "react";
 import { Link } from "@react-md/link";
 import {
   BaseTreeItem,
@@ -100,15 +100,23 @@ export function useLayoutNavigation<
   const { expandedIds, onItemExpansion, onMultiItemExpansion } =
     useTreeItemExpansion(() => getParentIds(itemId, navItems));
 
-  const prevItemId = useRef(itemId);
-  const prevNavItems = useRef(navItems);
-  if (prevItemId.current !== itemId || prevNavItems.current !== navItems) {
-    prevItemId.current = itemId;
-    prevNavItems.current = navItems;
-    onMultiItemExpansion(
-      Array.from(new Set([...expandedIds, ...getParentIds(itemId, navItems)]))
-    );
-  }
+  useEffect(() => {
+    onMultiItemExpansion((prevExpandedIds) => {
+      const nextExpandedIds = [
+        ...new Set([...prevExpandedIds, ...getParentIds(itemId, navItems)]),
+      ];
+      if (nextExpandedIds.length !== prevExpandedIds.length) {
+        return nextExpandedIds;
+      }
+
+      const prevSorted = prevExpandedIds.slice().sort();
+      const nextSorted = nextExpandedIds.slice().sort();
+
+      return nextSorted.some((itemId, index) => itemId !== prevSorted[index])
+        ? nextSorted
+        : prevSorted;
+    });
+  }, [itemId, navItems, onMultiItemExpansion]);
 
   return {
     navItems,

packages/tree/src/types.ts

@@ -1,11 +1,13 @@
 import type {
   CSSProperties,
+  Dispatch,
   ElementType,
   HTMLAttributes,
   MutableRefObject,
   ReactElement,
   ReactNode,
   Ref,
+  SetStateAction,
 } from "react";
 import type {
   ListItemChildrenProps,
@@ -146,8 +148,11 @@ export interface TreeItemExpansion {
   /**
    * A function to call when the user presses the asterisk key (*) that will
    * expand all tree items at the same level as the currently focused item.
+   *
+   * @remarks \@since 4.0.1 Allows for callback behavior to get current
+   * `expandedIds`.
    */
-  onMultiItemExpansion(itemIds: ExpandedIds): void;
+  onMultiItemExpansion: Dispatch<SetStateAction<ExpandedIds>>;
 }
 
 export interface TreeItemSelection {

packages/tree/src/useTreeItemExpansion.ts

@@ -36,13 +36,9 @@ export function useTreeItemExpansion(
     []
   );
 
-  const onMultiItemExpansion = useCallback((itemIds: ExpandedIds) => {
-    setExpandedIds(itemIds);
-  }, []);
-
   return {
     expandedIds,
     onItemExpansion,
-    onMultiItemExpansion,
+    onMultiItemExpansion: setExpandedIds,
   };
 }

tsconfig.base.json

@@ -10,6 +10,7 @@
     "esModuleInterop": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "downlevelIteration": true,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,