chore: memoizes contextual slots creation & stops resolving on consumer

microsoft · Jul 11, 2023 · fa94ceb · fa94ceb
1 parent 3cf92ff
commit fa94ceb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -72,6 +72,7 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
     handleActionsRef,
     actionsRef,
   );
+  const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);
 
   const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
     onClick?.(event);
@@ -146,6 +147,32 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
 
   const isBranch = itemType === 'branch';
 
+  const actionsSlot = React.useMemo(
+    () => (isActionsVisible ? resolveShorthand(actions) : undefined),
+    [actions, isActionsVisible],
+  );
+  if (actionsSlot) {
+    actionsSlot.ref = actionsRefs;
+  }
+  const asideSlot = React.useMemo(
+    () => (isAsideVisible ? resolveShorthand(aside) : undefined),
+    [aside, isAsideVisible],
+  );
+  const expandIconSlot = React.useMemo(
+    () =>
+      resolveShorthand(expandIcon, {
+        required: isBranch,
+        defaultProps: {
+          children: <TreeItemChevron />,
+          'aria-hidden': true,
+        },
+      }),
+    [expandIcon, isBranch],
+  );
+  if (expandIconSlot) {
+    expandIconSlot.ref = expandIconRefs;
+  }
+
   return {
     value,
     open,
@@ -171,15 +198,8 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
       onMouseOut: handleActionsInvisible,
       onBlur: handleActionsInvisible,
     }),
-    actions: isActionsVisible ? resolveShorthand(actions, { defaultProps: { ref: actionsRefs } }) : undefined,
-    aside: isAsideVisible ? resolveShorthand(aside) : undefined,
-    expandIcon: resolveShorthand(expandIcon, {
-      required: isBranch,
-      defaultProps: {
-        children: <TreeItemChevron />,
-        'aria-hidden': true,
-        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),
-      },
-    }),
+    actions: actionsSlot,
+    aside: asideSlot,
+    expandIcon: expandIconSlot,
   };
 }
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts
@@ -38,8 +38,8 @@ export const useTreeItemLayout_unstable = (
     iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),
     content: resolveShorthand(content, { required: true }),
     iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),
-    aside: resolveShorthand(aside),
-    actions: resolveShorthand(actions),
-    expandIcon: resolveShorthand(expandIcon),
+    aside,
+    actions,
+    expandIcon,
   };
 };
diff --git a/packages/react-components/react-tree/src/contexts/treeItemSlotsContext.ts b/packages/react-components/react-tree/src/contexts/treeItemSlotsContext.ts
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { TreeItemSlots } from '../TreeItem';
+import type { TreeItemSlots } from '../TreeItem';
+import type { ComponentState } from '@fluentui/react-utilities';
 
-export type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;
+export type TreeItemSlotsContextValue = Pick<ComponentState<TreeItemSlots>, 'actions' | 'aside' | 'expandIcon'>;
 
 const defaultContextValue: TreeItemSlotsContextValue = {
   actions: undefined,