Disable tree item

.changeset/chilly-sloths-punch.md

@@ -0,0 +1,7 @@
+---
+"@siemens/ix": patch
+---
+
+Add property **disabled** to **ix-tree-item**.
+
+Fixes #2091

packages/angular/src/components.ts

@@ -2806,14 +2806,14 @@ export declare interface IxTooltip extends Components.IxTooltip {}
 
 
 @ProxyCmp({
-  inputs: ['ariaLabelChevronIcon', 'context', 'hasChildren', 'text']
+  inputs: ['ariaLabelChevronIcon', 'context', 'disabled', 'hasChildren', 'text']
 })
 @Component({
   selector: 'ix-tree-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelChevronIcon', 'context', 'hasChildren', 'text'],
+  inputs: ['ariaLabelChevronIcon', 'context', 'disabled', 'hasChildren', 'text'],
   outputs: ['toggle', 'itemClick'],
   standalone: false
 })

packages/angular/standalone/src/components.ts

@@ -2907,14 +2907,14 @@ export declare interface IxTooltip extends Components.IxTooltip {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIxTreeItem,
-  inputs: ['ariaLabelChevronIcon', 'context', 'hasChildren', 'text']
+  inputs: ['ariaLabelChevronIcon', 'context', 'disabled', 'hasChildren', 'text']
 })
 @Component({
   selector: 'ix-tree-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelChevronIcon', 'context', 'hasChildren', 'text'],
+  inputs: ['ariaLabelChevronIcon', 'context', 'disabled', 'hasChildren', 'text'],
   outputs: ['toggle', 'itemClick'],
 })
 export class IxTreeItem {

packages/core/src/components.d.ts

@@ -3932,6 +3932,11 @@ export namespace Components {
           * Context
          */
         "context"?: TreeItemContext;
+        /**
+          * Disable tree item
+          * @default false
+         */
+        "disabled": boolean;
         /**
           * Has tree item children
           * @default false
@@ -9919,6 +9924,11 @@ declare namespace LocalJSX {
           * Context
          */
         "context"?: TreeItemContext;
+        /**
+          * Disable tree item
+          * @default false
+         */
+        "disabled"?: boolean;
         /**
           * Has tree item children
           * @default false

packages/core/src/components/tree-item/default-tree-item.ts

@@ -23,9 +23,11 @@ export function renderDefaultItem(
   el.hasChildren = item.hasChildren;
   el.context = context;
   el.text = item.data.name;
+  el.disabled = item.disabled || false;
 
   update((updateTreeItem) => {
     el.text = updateTreeItem.data.name;
+    el.disabled = updateTreeItem.disabled || false;
   });
   return el;
 }

packages/core/src/components/tree-item/tree-item.scss

@@ -77,3 +77,10 @@
 :host(.selected:active) {
   background-color: var(--theme-tree-item--background--selected-active);
 }
+
+:host(.disabled),
+:host(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}

packages/core/src/components/tree-item/tree-item.tsx

@@ -32,6 +32,11 @@ export class TreeItem {
    */
   @Prop() context?: TreeItemContext;
 
+  /**
+   * Disable tree item
+   */
+  @Prop() disabled = false;
+
   /**
    * ARIA label for the chevron icon
    */
@@ -48,10 +53,13 @@ export class TreeItem {
   @Event() itemClick!: EventEmitter<void>;
 
   render() {
+    const isDisabled = this.disabled || this.context?.isDisabled;
+
     return (
       <Host
         class={{
           selected: !!this.context?.isSelected,
+          disabled: !!isDisabled,
         }}
       >
         <div class="icon-toggle-container">
@@ -64,6 +72,9 @@ export class TreeItem {
               }}
               color="color-std-text"
               onClick={(e: Event) => {
+                if (isDisabled) {
+                  return;
+                }
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle.emit();
@@ -75,6 +86,9 @@ export class TreeItem {
         <div
           class="tree-node-container"
           onClick={() => {
+            if (isDisabled) {
+              return;
+            }
             this.itemClick.emit();
           }}
         >

packages/core/src/components/tree/test/tree.ct.ts

@@ -463,3 +463,161 @@ regressionTest(
     await expect(items.nth(2)).not.toBeVisible();
   }
 );
+
+regressionTest(
+  'disabled item should have disabled class',
+  async ({ mount, page }) => {
+    await mount(`
+    <div style="height: 20rem; width: 100%;">
+      <ix-tree root="root"></ix-tree>
+    </div>
+  `);
+
+    const tree = page.locator('ix-tree');
+
+    const modelWithDisabled = {
+      ...defaultModel,
+      'sample-child-1': {
+        ...defaultModel['sample-child-1'],
+        disabled: true,
+      },
+    };
+
+    await tree.evaluate(
+      (element: HTMLIxTreeElement, [model]) => {
+        element.model = model;
+      },
+      [modelWithDisabled]
+    );
+
+    await expect(tree).toHaveClass(/hydrated/);
+
+    const sampleItem = tree.locator('ix-tree-item').first();
+    await sampleItem.locator('ix-icon').click();
+
+    const disabledItem = tree.locator('ix-tree-item', {
+      hasText: 'Sample Child 1',
+    });
+
+    await expect(disabledItem).toBeVisible();
+    await expect(disabledItem).toHaveClass(/disabled/);
+  }
+);
+
+regressionTest(
+  'disabled item should have reduced opacity',
+  async ({ mount, page }) => {
+    await mount(`
+    <div style="height: 20rem; width: 100%;">
+      <ix-tree root="root"></ix-tree>
+    </div>
+  `);
+
+    const tree = page.locator('ix-tree');
+
+    const modelWithDisabled = {
+      ...defaultModel,
+      'sample-child-1': {
+        ...defaultModel['sample-child-1'],
+        disabled: true,
+      },
+    };
+
+    await tree.evaluate(
+      (element: HTMLIxTreeElement, [model]) => {
+        element.model = model;
+      },
+      [modelWithDisabled]
+    );
+
+    const sampleItem = tree.locator('ix-tree-item').first();
+    await sampleItem.locator('ix-icon').click();
+
+    const disabledItem = tree.locator('ix-tree-item', {
+      hasText: 'Sample Child 1',
+    });
+
+    await expect(disabledItem).toBeVisible();
+    await expect(disabledItem).toHaveCSS('opacity', '0.5');
+  }
+);
+
+regressionTest(
+  'disabled item should have not-allowed cursor',
+  async ({ mount, page }) => {
+    await mount(`
+    <div style="height: 20rem; width: 100%;">
+      <ix-tree root="root"></ix-tree>
+    </div>
+  `);
+
+    const tree = page.locator('ix-tree');
+
+    const modelWithDisabled = {
+      ...defaultModel,
+      'sample-child-1': {
+        ...defaultModel['sample-child-1'],
+        disabled: true,
+      },
+    };
+
+    await tree.evaluate(
+      (element: HTMLIxTreeElement, [model]) => {
+        element.model = model;
+      },
+      [modelWithDisabled]
+    );
+
+    const sampleItem = tree.locator('ix-tree-item').first();
+    await sampleItem.locator('ix-icon').click();
+
+    const disabledItem = tree.locator('ix-tree-item', {
+      hasText: 'Sample Child 1',
+    });
+
+    await expect(disabledItem).toBeVisible();
+    await expect(disabledItem).toHaveCSS('cursor', 'not-allowed');
+  }
+);
+
+regressionTest(
+  'enabled items should still be selectable when other items are disabled',
+  async ({ mount, page }) => {
+    await mount(`
+    <div style="height: 20rem; width: 100%;">
+      <ix-tree root="root"></ix-tree>
+    </div>
+  `);
+
+    const tree = page.locator('ix-tree');
+
+    const modelWithDisabled = {
+      ...defaultModel,
+      'sample-child-1': {
+        ...defaultModel['sample-child-1'],
+        disabled: true,
+      },
+    };
+
+    await tree.evaluate(
+      (element: HTMLIxTreeElement, [model]) => {
+        element.model = model;
+      },
+      [modelWithDisabled]
+    );
+
+    const sampleItem = tree.locator('ix-tree-item').first();
+    await sampleItem.locator('ix-icon').click();
+
+    const enabledItem = tree.locator('ix-tree-item', {
+      hasText: 'Sample Child 2',
+    });
+
+    await expect(enabledItem).toBeVisible();
+    await expect(enabledItem).not.toHaveClass(/disabled/);
+
+    await enabledItem.click();
+
+    await expect(enabledItem).toHaveClass(/selected/);
+  }
+);

packages/core/src/components/tree/tree-model.ts

@@ -21,6 +21,7 @@ export interface TreeItem<T> {
   data: T;
   hasChildren: boolean;
   children: TreeItemId[];
+  disabled?: boolean;
 }
 
 export interface TreeItemVisual<T> extends TreeItem<T> {
@@ -30,4 +31,5 @@ export interface TreeItemVisual<T> extends TreeItem<T> {
 export interface TreeItemContext {
   isExpanded: boolean;
   isSelected: boolean;
+  isDisabled?: boolean;
 }

packages/core/src/components/tree/tree.tsx

@@ -198,12 +198,14 @@ export class Tree {
       return {
         isExpanded: false,
         isSelected: false,
+        isDisabled: this.model[id]?.disabled,
       };
     }
     if (!this.context[id]) {
       this.context[id] = {
         isExpanded: false,
         isSelected: false,
+        isDisabled: this.model[id]?.disabled,
       };
     }
     return this.context[id];
@@ -349,6 +351,10 @@ export class Tree {
       return;
     }
 
+    if (item.disabled) {
+      return;
+    }
+
     const context = this.getContext(id);
     context.isExpanded = !context.isExpanded;
     this.nodeToggled.emit({ id, isExpanded: context.isExpanded });
@@ -367,6 +373,11 @@ export class Tree {
     }
 
     const item = this.model[id];
+
+    if (item.disabled) {
+      return;
+    }
+
     const path = event.composedPath();
     const treeIndex = path.indexOf(this.hostElement);
     const treePath = path.slice(0, treeIndex);

packages/react/src/tree/tree.tsx

@@ -47,6 +47,7 @@ export const IxTree = React.forwardRef(
         const rootNode = ReactDOM.createRoot(treeItem);
         treeItem.hasChildren = data.hasChildren;
         treeItem.context = context[data.id];
+        treeItem.disabled = data.disabled || false;
 
         if (props.renderItem) {
           rootNode.render(props.renderItem(data.data));
@@ -55,6 +56,7 @@ export const IxTree = React.forwardRef(
         update((itemData, newContext) => {
           treeItem.context = newContext[itemData.id];
           treeItem.hasChildren = itemData.hasChildren;
+          treeItem.disabled = itemData.disabled || false;
 
           if (props.renderItem) {
             rootNode.render(props.renderItem(itemData.data));

packages/vue/src/components.ts

@@ -1462,6 +1462,7 @@ export const IxTreeItem: StencilVueComponent<JSX.IxTreeItem> = /*@__PURE__*/ def
   'text',
   'hasChildren',
   'context',
+  'disabled',
   'ariaLabelChevronIcon',
   'toggle',
   'itemClick'