chore: moves slots from TreeItem to TreeItemLayout (#28621)

microsoft · Jul 25, 2023 · 0d4d0ef · 0d4d0ef
1 parent c017e88
commit 0d4d0ef
Show file tree

Hide file tree

Showing 32 changed files with 461 additions and 470 deletions.
diff --git a/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json b/change/@fluentui-react-tree-977289b7-1256-4054-948b-aa984f37e4c2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: moves slots from TreeItem to TreeItemLayout",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/etc/react-tree.api.md b/packages/react-components/react-tree/etc/react-tree.api.md
@@ -13,7 +13,7 @@ import type { ArrowUp } from '@fluentui/keyboard-keys';
 import type { AvatarContextValue } from '@fluentui/react-avatar';
 import type { AvatarSize } from '@fluentui/react-avatar';
 import { ButtonContextValue } from '@fluentui/react-button';
-import type { Checkbox } from '@fluentui/react-checkbox';
+import { Checkbox } from '@fluentui/react-checkbox';
 import { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
@@ -26,7 +26,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { Home } from '@fluentui/keyboard-keys';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
-import type { Radio } from '@fluentui/react-radio';
+import { Radio } from '@fluentui/react-radio';
 import { RadioProps } from '@fluentui/react-radio';
 import * as React_2 from 'react';
 import { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
@@ -138,10 +138,15 @@ export type TreeContextValues = {
 export const TreeItem: ForwardRefComponent<TreeItemProps>;
 
 // @public (undocumented)
-export const treeItemClassNames: SlotClassNames<TreeItemInternalSlot>;
+export const treeItemClassNames: SlotClassNames<TreeItemSlots>;
 
 // @public (undocumented)
 export type TreeItemContextValue = {
+    isActionsVisible: boolean;
+    isAsideVisible: boolean;
+    selectionRef: React_2.Ref<HTMLInputElement>;
+    actionsRef: React_2.Ref<HTMLDivElement>;
+    expandIconRef: React_2.Ref<HTMLDivElement>;
     layoutRef: React_2.Ref<HTMLDivElement>;
     subtreeRef: React_2.Ref<HTMLDivElement>;
     itemType: TreeItemType;
@@ -153,7 +158,7 @@ export type TreeItemContextValue = {
 export const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps>;
 
 // @public (undocumented)
-export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutInternalSlots>;
+export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots>;
 
 // @public
 export type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
@@ -164,10 +169,16 @@ export type TreeItemLayoutSlots = {
     content: NonNullable<Slot<'div'>>;
     iconBefore?: Slot<'div'>;
     iconAfter?: Slot<'div'>;
+    expandIcon?: Slot<'div'>;
+    aside?: Slot<'div'>;
+    actions?: Slot<ExtractSlotProps<Slot<'div'> & {
+        visible?: boolean;
+    }>>;
+    selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;
 };
 
 // @public
-export type TreeItemLayoutState = ComponentState<TreeItemLayoutInternalSlots> & {
+export type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {
     buttonContextValue: ButtonContextValue;
 };
 
@@ -178,21 +189,21 @@ export const treeItemLevelToken: "--fluent-TreeItem--level";
 export const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps>;
 
 // @public (undocumented)
-export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutInternalSlots>;
+export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots>;
 
 // @public
 export type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;
 
 // @public (undocumented)
-export type TreeItemPersonaLayoutSlots = {
+export type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {
     root: NonNullable<Slot<'div'>>;
     media: NonNullable<Slot<'div'>>;
     content: NonNullable<Slot<'div'>>;
     description?: Slot<'div'>;
 };
 
 // @public
-export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutInternalSlots> & {
+export type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {
     avatarSize: AvatarSize;
     buttonContextValue: ButtonContextValue;
 };
@@ -211,17 +222,10 @@ export type TreeItemSlots = {
     root: Slot<ExtractSlotProps<Slot<'div'> & {
         style?: TreeItemCSSProperties;
     }>>;
-    expandIcon?: Slot<'div'>;
-    aside?: Slot<'div'>;
-    actions?: Slot<ExtractSlotProps<Slot<'div'> & {
-        visible?: boolean;
-    }>>;
-    checkboxIndicator?: Slot<typeof Checkbox>;
-    radioIndicator?: Slot<typeof Radio>;
 };
 
 // @public
-export type TreeItemState = ComponentState<TreeItemInternalSlot> & TreeItemContextValue & TreeItemSlotsContextValue & {
+export type TreeItemState = ComponentState<TreeItemSlots> & TreeItemContextValue & {
     level: number;
     itemType: TreeItemType;
 };

diff --git a/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx b/packages/react-components/react-tree/src/components/FlatTree/FlatTree.cy.tsx
@@ -126,8 +126,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions click', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action!</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action!</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -169,8 +169,8 @@ describe(TreeTest.displayName!, () => {
     it('should focus on actions when pressing tab key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -188,8 +188,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions Enter/Space key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>

diff --git a/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx b/packages/react-components/react-tree/src/components/Tree/Tree.cy.tsx
@@ -112,8 +112,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions click', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action!</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action!</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -155,8 +155,8 @@ describe(TreeTest.displayName!, () => {
     it('should focus on actions when pressing tab key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>
@@ -174,8 +174,8 @@ describe(TreeTest.displayName!, () => {
     it('should not expand/collapse item on actions Enter/Space key', () => {
       mount(
         <TreeTest id="baseTree" aria-label="Tree">
-          <TreeItem actions={<Button id="action">action</Button>} itemType="branch" value="item1" data-testid="item1">
-            <TreeItemLayout>level 1, item 1</TreeItemLayout>
+          <TreeItem itemType="branch" value="item1" data-testid="item1">
+            <TreeItemLayout actions={<Button id="action">action</Button>}>level 1, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf" value="item1__item1" data-testid="item1__item1">
                 <TreeItemLayout>level 2, item 1</TreeItemLayout>

diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts
@@ -2,53 +2,19 @@ import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fl
 import type { TreeItemContextValue } from '../../contexts';
 import { treeItemLevelToken } from '../../utils/tokens';
 import * as React from 'react';
-import { TreeItemSlotsContextValue } from '../../contexts/treeItemSlotsContext';
-import type { Checkbox } from '@fluentui/react-checkbox';
-import type { Radio } from '@fluentui/react-radio';
 
 export type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };
 
 export type TreeItemType = 'leaf' | 'branch';
 
 export type TreeItemSlots = {
   root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;
-  /**
-   * Expand icon slot,
-   * by default renders a chevron icon to indicate opening and closing
-   */
-  expandIcon?: Slot<'div'>;
-  aside?: Slot<'div'>;
-  /**
-   * actionable elements are normally buttons, menus, or other focusable elements.
-   * Those elements are only visibly available if the given tree item is currently active.
-   */
-  actions?: Slot<
-    ExtractSlotProps<
-      Slot<'div'> & {
-        /**
-         * Forces visibility of the aside/action content
-         */
-        visible?: boolean;
-      }
-    >
-  >;
-  /**
-   * Selection indicator if selection type is checkbox
-   */
-  checkboxIndicator?: Slot<typeof Checkbox>;
-  /**
-   * Selection indicator if selection type is radio
-   */
-  radioIndicator?: Slot<typeof Radio>;
 };
 
-export type TreeItemInternalSlot = Pick<TreeItemSlots, 'root'>;
-
 export type TreeItemValue = string | number;
 
 export type TreeItemContextValues = {
   treeItem: TreeItemContextValue;
-  treeItemSlots: TreeItemSlotsContextValue;
 };
 
 /**
@@ -62,9 +28,8 @@ export type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {
 /**
  * State used in rendering TreeItem
  */
-export type TreeItemState = ComponentState<TreeItemInternalSlot> &
-  TreeItemContextValue &
-  TreeItemSlotsContextValue & {
+export type TreeItemState = ComponentState<TreeItemSlots> &
+  TreeItemContextValue & {
     level: number;
     itemType: TreeItemType;
   };
diff --git a/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx
@@ -3,20 +3,18 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import type { TreeItemState, TreeItemContextValues, TreeItemInternalSlot } from './TreeItem.types';
-import { TreeItemProvider, TreeItemSlotsProvider } from '../../contexts';
+import type { TreeItemState, TreeItemContextValues, TreeItemSlots } from './TreeItem.types';
+import { TreeItemProvider } from '../../contexts';
 
 /**
  * Render the final JSX of TreeItem
  */
 export const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {
-  const { slots, slotProps } = getSlotsNext<TreeItemInternalSlot>(state);
+  const { slots, slotProps } = getSlotsNext<TreeItemSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>
-      <TreeItemProvider value={contextValues.treeItem}>
-        <TreeItemSlotsProvider value={contextValues.treeItemSlots}>{slotProps.root.children}</TreeItemSlotsProvider>
-      </TreeItemProvider>
+      <TreeItemProvider value={contextValues.treeItem}>{slotProps.root.children}</TreeItemProvider>
     </slots.root>
   );
 };