feat: make tree and tree-item SSR compatible (microsoft#35091)

Author: marchbox

change/@fluentui-web-components-93f20d11-77bf-466a-8abf-2cd2860dbe16.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: make tree and tree-item SSR compatible",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -4349,9 +4349,13 @@ export const TooltipTemplate: ViewTemplate<Tooltip, any>;
 // @public
 export class Tree extends BaseTree {
     appearance: TreeItemAppearance;
+    // (undocumented)
+    protected appearanceChanged(): void;
     // @internal
     childTreeItemsChanged(): void;
     size: TreeItemSize;
+    // (undocumented)
+    protected sizeChanged(): void;
     updateSizeAndAppearance(): void;
 }
 
@@ -4364,8 +4368,12 @@ export const TreeDefinition: FASTElementDefinition<typeof Tree>;
 export class TreeItem extends BaseTreeItem {
     appearance: TreeItemAppearance;
     // @internal
+    protected appearanceChanged(): void;
+    // @internal
     childTreeItemsChanged(): void;
     size: TreeItemSize;
+    // @internal
+    protected sizeChanged(): void;
     updateSizeAndAppearance(): void;
 }
 

packages/web-components/src/tree-item/tree-item.base.ts

@@ -58,6 +58,7 @@ export class BaseTreeItem extends FASTElement {
    * @internal
    */
   protected selectedChanged(prev: boolean, next: boolean): void {
+    this.updateTabindexBySelected();
     this.$emit('change');
     toggleState(this.elementInternals, 'selected', next);
     this.elementInternals.ariaSelected = next ? 'true' : 'false';
@@ -81,7 +82,7 @@ export class BaseTreeItem extends FASTElement {
   @attr({ attribute: 'data-indent' })
   public dataIndent!: number | undefined;
 
-  private dataIndentChanged(prev: number, next: number) {
+  protected dataIndentChanged(prev: number, next: number) {
     if (this.styles !== undefined) {
       this.$fastController.removeStyles(this.styles);
     }
@@ -108,6 +109,11 @@ export class BaseTreeItem extends FASTElement {
     this.updateChildTreeItems();
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateTabindexBySelected();
+  }
+
   /**
    * Updates the childrens indent
    *
@@ -154,4 +160,10 @@ export class BaseTreeItem extends FASTElement {
   get isNestedItem() {
     return isTreeItem(this.parentElement);
   }
+
+  protected updateTabindexBySelected() {
+    if (this.$fastController.isConnected) {
+      this.tabIndex = this.selected ? 0 : -1;
+    }
+  }
 }

packages/web-components/src/tree-item/tree-item.styles.ts

@@ -94,6 +94,11 @@ export const styles = css`
     transform: rotate(180deg);
   }
 
+  .chevron svg {
+    inline-size: 12px;
+    block-size: 12px;
+  }
+
   .aside {
     display: flex;
     align-items: center;

packages/web-components/src/tree-item/tree-item.template.ts

@@ -1,27 +1,20 @@
-import { children, html } from '@microsoft/fast-element';
+import { elements, html, slotted } from '@microsoft/fast-element';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import type { TreeItem } from './tree-item.js';
-import { isTreeItem } from './tree-item.options.js';
 
 const chevronIcon = html`
-  <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <svg viewBox="0 0 12 12" fill="currentColor">
     <path
       d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"
     ></path>
   </svg>
 `;
 
 export const template = html<TreeItem>`
-  <template
-    tabindex="${x => (x.selected ? 0 : -1)}"
-    slot="${x => (x.isNestedItem ? 'item' : void 0)}"
-    ${children({
-      property: 'childTreeItems',
-      filter: node => isTreeItem(node),
-    })}
-  >
+  <template slot="${x => (x.isNestedItem ? 'item' : void 0)}">
     <div class="positioning-region" part="positioning-region">
       <div class="content" part="content">
-        <span class="chevron" part="chevron">
+        <span class="chevron" part="chevron" aria-hidden="true">
           <slot name="chevron">${chevronIcon}</slot>
         </span>
         <slot name="start"></slot>
@@ -33,7 +26,13 @@ export const template = html<TreeItem>`
       </div>
     </div>
     <div role="group" class="items" part="items">
-      <slot name="item"></slot>
+      <slot
+        name="item"
+        ${slotted({
+          property: 'childTreeItems',
+          filter: elements(`${FluentDesignSystem.prefix}-tree-item`),
+        })}
+      ></slot>
     </div>
   </template>
 `;

packages/web-components/src/tree-item/tree-item.ts

@@ -1,6 +1,6 @@
 import { attr } from '@microsoft/fast-element';
-import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
 import { BaseTreeItem } from './tree-item.base.js';
+import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
 
 /**
  * The Fluent Tree Item Element. Implements {@link @microsoft/fast-foundation#BaseTreeItem}.
@@ -21,7 +21,7 @@ export class TreeItem extends BaseTreeItem {
    * we update the child tree items' size based on the size
    *  @internal
    */
-  private sizeChanged() {
+  protected sizeChanged() {
     this.updateSizeAndAppearance();
   }
 
@@ -37,7 +37,7 @@ export class TreeItem extends BaseTreeItem {
    *
    * @internal
    */
-  private appearanceChanged() {
+  protected appearanceChanged() {
     this.updateSizeAndAppearance();
   }
 

packages/web-components/src/tree/tree.base.ts

@@ -10,8 +10,8 @@ import {
   keyHome,
   keySpace,
 } from '@microsoft/fast-web-utilities';
+import type { BaseTreeItem } from '../tree-item/tree-item.base';
 import { isTreeItem } from '../tree-item/tree-item.options';
-import { BaseTreeItem } from '../tree-item/tree-item.base';
 
 export class BaseTree extends FASTElement {
   /**
@@ -146,6 +146,9 @@ export class BaseTree extends FASTElement {
 
     if (e.target === this) {
       this.currentFocused = this.getValidFocusableItem();
+      if (this.currentFocused && this.currentFocused.tabIndex < 0) {
+        this.currentFocused.tabIndex = 0;
+      }
       this.currentFocused?.focus();
 
       return;

packages/web-components/src/tree/tree.spec.ts

@@ -212,7 +212,7 @@ test.describe('Tree', () => {
     const treeItem1 = element.locator('fluent-tree-item').nth(0);
     expect(await treeItem1.getAttribute('selected')).toBeNull();
 
-    await treeItem1.focus();
+    await element.focus();
     expect(await elementHandle).toBe(false);
     await page.keyboard.press('Space');
 

packages/web-components/src/tree/tree.styles.ts

@@ -1,8 +1,9 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/display';
+import { display } from '../utils/display.js';
 
 export const styles = css`
   ${display('block')}
+
   :host {
     outline: none;
   }

packages/web-components/src/tree/tree.template.ts

@@ -1,5 +1,5 @@
-import { children, elements, html } from '@microsoft/fast-element';
-import { isTreeItem } from '../tree-item/tree-item.options.js';
+import { elements, html, slotted } from '@microsoft/fast-element';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import type { Tree } from './tree.js';
 
 export const template = html<Tree>`
@@ -10,11 +10,12 @@ export const template = html<Tree>`
     @focusout="${(x, c) => x.blurHandler(c.event as FocusEvent)}"
     @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     @change="${(x, c) => x.changeHandler(c.event)}"
-    ${children({
-      property: 'childTreeItems',
-      filter: node => isTreeItem(node),
-    })}
   >
-    <slot></slot>
+    <slot
+      ${slotted({
+        property: 'childTreeItems',
+        filter: elements(`${FluentDesignSystem.prefix}-tree-item`),
+      })}
+    ></slot>
   </template>
 `;