feature(web-components)：[TreeItem] support callback for expand change (#34234)

Co-authored-by: Chris Holt <13071055+chrisdholt@users.noreply.github.com>

Author: nice-hang

change/@fluentui-web-components-c20696f3-d570-4297-9cfb-153d63176092.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "support callback for expand change",
+  "packageName": "@fluentui/web-components",
+  "email": "HangWhy@outlook.com",
+  "dependentChangeType": "patch"
+}

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

@@ -31,6 +31,10 @@ export class BaseTreeItem extends FASTElement {
    * @public
    */
   public expandedChanged(prev: boolean, next: boolean): void {
+    this.$emit('toggle', {
+      oldState: prev ? 'open' : 'closed',
+      newState: next ? 'open' : 'closed',
+    });
     toggleState(this.elementInternals, 'expanded', next);
     if (this.childTreeItems && this.childTreeItems.length > 0) {
       this.elementInternals.ariaExpanded = next ? 'true' : 'false';

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

@@ -189,3 +189,20 @@ export const AsideSlot: Story = {
     asideSlottedContent: () => html`<span slot="aside">${FilterIcon}</span>`,
   },
 };
+
+export const ToggleEvent: Story = {
+  render: renderComponent(html<StoryArgs<FluentTreeItem>>`
+    <fluent-tree-item
+      @click=${(story, context) => {
+        const target = context.eventTarget() as FluentTreeItem;
+        target.toggleExpansion();
+      }}
+      @toggle=${(c, e) => {
+        console.log('toggle', (e.event as any)?.detail);
+      }}
+    >
+      Item 1
+      <fluent-tree-item>Item 1-1</fluent-tree-item>
+    </fluent-tree-item>
+  `),
+};