Content Tree: Add event emitter when item's label being updated (#2478)

* Add event emitter when item's label being updated

* Added test case

format code

* Content Tree: Update itemLabelChange return type in Storybook

---------

Co-authored-by: Christopher Winsor <cjwinsor@users.noreply.github.com>

stencil-workspace/src/components.d.ts

@@ -2593,6 +2593,7 @@ declare global {
     };
     interface HTMLModusTreeViewItemElementEventMap {
         "checkboxClick": boolean;
+        "itemLabelChange": string;
         "itemClick": boolean;
         "itemExpandToggle": boolean;
         "itemAdded": HTMLElement;
@@ -4505,6 +4506,10 @@ declare namespace LocalJSX {
           * An event that fires on tree item expand/collapse
          */
         "onItemExpandToggle"?: (event: ModusTreeViewItemCustomEvent<boolean>) => void;
+        /**
+          * An event that fires on tree item label changes
+         */
+        "onItemLabelChange"?: (event: ModusTreeViewItemCustomEvent<string>) => void;
         /**
           * (optional) Tab Index for the tree item
          */

stencil-workspace/src/components/modus-content-tree/modus-content-tree.e2e.ts

@@ -554,4 +554,28 @@ describe('modus-tree-view-item', () => {
     await page.waitForChanges();
     expect(element).not.toHaveClass('borderless');
   });
+
+  it('should emit itemLabelChange event when Enter key is pressed on editable label input', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`
+      <modus-tree-view>
+        <modus-tree-view-item node-Id="1" label="Original Label" editable="true">
+        </modus-tree-view-item>
+      </modus-tree-view>
+    `);
+
+    const treeViewItem = await page.find('modus-tree-view-item');
+    const itemLabelChangeEvent = await treeViewItem.spyOnEvent('itemLabelChange');
+
+    const labelInput = await page.find('modus-tree-view-item >>> .label-slot >>> input');
+
+    expect(labelInput).not.toBeNull();
+
+    await labelInput.type('NewLabel');
+    await labelInput.press('Enter');
+
+    await page.waitForChanges();
+    expect(itemLabelChangeEvent).toHaveReceivedEventDetail('Original LabelNewLabel');
+  });
 });

stencil-workspace/src/components/modus-content-tree/modus-tree-view-item/modus-tree-view-item.tsx

@@ -35,6 +35,9 @@ export class ModusTreeViewItem {
   /** An event that fires on tree item checkbox click */
   @Event() checkboxClick: EventEmitter<boolean>;
 
+  /** An event that fires on tree item label changes */
+  @Event() itemLabelChange: EventEmitter<string>;
+
   /** (optional) Disables the tree item */
   @Prop() disabled: boolean;
 
@@ -275,6 +278,7 @@ export class ModusTreeViewItem {
     switch (e.code) {
       case 'Enter':
         e.preventDefault();
+        this.itemLabelChange.emit(this.refLabelInput.value);
         this.updateLabelInput();
         break;
     }

stencil-workspace/src/components/modus-content-tree/modus-tree-view-item/readme.md

@@ -28,6 +28,7 @@
 | `checkboxClick`    | An event that fires on tree item checkbox click                                       | `CustomEvent<boolean>` |
 | `itemClick`        | An event that fires on tree item click                                                | `CustomEvent<boolean>` |
 | `itemExpandToggle` | An event that fires on tree item expand/collapse                                      | `CustomEvent<boolean>` |
+| `itemLabelChange`  | An event that fires on tree item label changes                                        | `CustomEvent<string>`  |
 
 
 ## Methods

stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree-storybook-docs.mdx

@@ -785,6 +785,7 @@ Every item and the elements such as drag icon, expand & collapse icon and the ch
 | checkboxClick    | An event that fires on tree item checkbox click                                       | boolean                |
 | itemClick        | An event that fires on tree item click                                                | boolean                |
 | itemExpandToggle | An event that fires on tree item expand/collapse                                      | boolean                |
+| itemLabelChange  | An event that fires on tree item label change                                         | `CustomEvent<string>`  |
 
 ### Methods
 

stencil-workspace/storybook/stories/components/modus-content-tree/modus-content-tree.stories.tsx

@@ -65,7 +65,7 @@ export default {
       page: docs,
     },
     actions: {
-      handles: ['itemActionClick modus-tree-view', 'actionClick modus-tree-view-item', 'itemClick modus-tree-view-item'],
+      handles: ['itemActionClick modus-tree-view', 'actionClick modus-tree-view-item', 'itemClick modus-tree-view-item','itemLabelChange modus-tree-view-item'],
     },
     controls: { expanded: true, sort: 'requiredFirst' },
     options: {