TreeView: provide a way to control ability to select nodes - change disabled behavior

packages/devextreme-scss/scss/widgets/base/treeView/_common.scss

@@ -98,21 +98,13 @@ $treeview-searchbox-margin-bottom: 5px;
       align-items: center;
     }
   }
-
-  &.dx-state-disabled {
-    opacity: 0.5;
-  }
 }
 
 .dx-treeview-toggle-item-visibility,
 .dx-treeview-custom-expand-icon,
 .dx-treeview-custom-collapse-icon {
   cursor: pointer;
   order: 0;
-
-  &.dx-state-disabled {
-    cursor: default;
-  }
 }
 
 .dx-rtl {

packages/devextreme-scss/scss/widgets/fluent/treeView/_colors.scss

@@ -19,3 +19,19 @@ $treeview-item-selected-color: $treeview-color !default;
 $treeview-item-selected-bg: $base-selected-bg !default;
 $treeview-spin-icon-color: $base-spin-icon-color !default;
 $checkbox-border-color-focused: $base-accent-active !default;
+$treeview-checkbox-disabled-border-color-focused: null !default;
+$treeview-checkbox-disabled-background-focused: null !default;
+$treeview-item-content-disabled: null !default;
+
+@if $mode == "light" {
+  $treeview-item-content-disabled: color.scale($base-bg, $lightness: -25.88%);
+  $treeview-checkbox-disabled-border-color-focused: color.scale($base-bg, $lightness: -29.8%);
+  $treeview-checkbox-disabled-background-focused: color.scale($base-bg, $lightness: -7.84%);
+}
+
+@if $mode == "dark" {
+  $treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl);
+  $treeview-checkbox-disabled-border-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl);
+  $treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl);
+}
+

packages/devextreme-scss/scss/widgets/fluent/treeView/_index.scss

@@ -32,9 +32,32 @@
         }
       }
     }
+
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        background-color: $treeview-checkbox-disabled-background-focused;
+        border-color: $treeview-checkbox-disabled-border-color-focused;
+      }
+
+      &.dx-checkbox-checked {
+        .dx-checkbox-icon {
+          color: $treeview-checkbox-disabled-border-color-focused;
+        }
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon::before {
+          background-color: $treeview-checkbox-disabled-border-color-focused;
+        }
+      }
+    }
   }
 }
 
+.dx-treeview-item-content.dx-state-disabled {
+  color: $treeview-item-content-disabled;
+}
+
 @include default-expander-icon(
   'chevrondown',
   'chevronright',

packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss

@@ -33,6 +33,7 @@ $treeview-border-color: $base-border-color !default;
 $treeview-item-selected-color: null !default;
 $treeview-item-selected-bg: null !default;
 $treeview-item-selected-hover-bg: null !default;
+$treeview-item-content-disabled: null !default;
 
 /**
 * $name 120. Arrow icon color
@@ -52,6 +53,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default;
   $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default;
   $treeview-spin-icon-color: $base-header-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl);
 }
 
 @if $color == "contrast" {
@@ -63,6 +65,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: $base-inverted-bg !default;
   $treeview-item-selected-hover-bg: $base-inverted-bg !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.scale($base-text-color, $lightness: -48.24%);
 }
 
 @if $color == "dark" {
@@ -75,6 +78,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#fff, $alpha: 0.12) !default;
   $treeview-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.change($base-text-color, $lightness: 51.8%, $space: hsl);
 }
 
 @if $color == "darkmoon" {
@@ -87,6 +91,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#748fbc, $alpha: 0.42) !default;
   $treeview-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.scale($base-text-color, $lightness: -48.24%);
 }
 
 @if $color == "darkviolet" {
@@ -99,6 +104,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default;
   $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default;
   $treeview-spin-icon-color: $base-header-color !default;
+  $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 51.76%, $space: hsl);
 }
 
 @if $color == "greenmist" {
@@ -111,6 +117,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
   $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 60%, $space: hsl);
 }
 
 @if $color == "light" {
@@ -123,6 +130,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
   $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl);
 }
 
 @if $color == "softblue" {
@@ -135,5 +143,5 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
   $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default;
   $treeview-spin-icon-color: $base-icon-color !default;
+  $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl);
 }
-

packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss

@@ -81,3 +81,7 @@
     }
   }
 }
+
+.dx-treeview-item-content.dx-state-disabled {
+  color: $treeview-item-content-disabled;
+}

packages/devextreme-scss/scss/widgets/material/treeView/_colors.scss

@@ -18,8 +18,8 @@ $treeview-border-color: $base-border-color !default;
 $treeview-item-selected-color: $treeview-color !default;
 $treeview-item-selected-bg: null !default;
 $treeview-spin-icon-color: $base-spin-icon-color !default;
-
 $checkbox-border-color-focused: $base-focus-bg !default;
+$treeview-item-content-disabled: color.change($base-text-color, $alpha: 0.38);
 
 @if $mode == "light" {
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.12) !default;

packages/devextreme-scss/scss/widgets/material/treeView/_index.scss

@@ -32,6 +32,10 @@
   }
 }
 
+.dx-treeview-item-content.dx-state-disabled {
+  color: $treeview-item-content-disabled;
+}
+
 @include treeview-item(
   $material-treeview-item-element-gap,
   $material-treeview-item-padding,

packages/devextreme/js/__internal/ui/tree_view/tree_view.base.ts

@@ -58,6 +58,7 @@ const OPENED_NODE_CONTAINER_CLASS = `${NODE_CLASS}-container-opened`;
 const IS_LEAF = `${NODE_CLASS}-is-leaf`;
 
 export const ITEM_CLASS = `${WIDGET_CLASS}-item`;
+const ITEM_CONTENT_CLASS = `${WIDGET_CLASS}-item-content`;
 const ITEM_WITH_CHECKBOX_CLASS = `${ITEM_CLASS}-with-checkbox`;
 const ITEM_WITH_CUSTOM_EXPANDER_ICON_CLASS = `${ITEM_CLASS}-with-custom-expander-icon`;
 const CUSTOM_EXPANDER_ICON_ITEM_CONTAINER_CLASS = `${WIDGET_CLASS}-custom-expander-icon-item-container`;
@@ -76,6 +77,7 @@ export const SELECT_ALL_ITEM_CLASS = `${WIDGET_CLASS}-select-all-item`;
 
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
+const DISABLED_STATE_ARIA = 'aria-disabled';
 const SELECTED_ITEM_CLASS = 'dx-state-selected';
 const EXPAND_EVENT_NAMESPACE = 'dxTreeView_expand';
 const DATA_ITEM_ID = 'data-item-id';
@@ -884,10 +886,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
     this.setAria('selected', nodeData.selected, $node);
     this._toggleSelectedClass($node, nodeData.selected);
 
-    if (nodeData.disabled) {
-      this.setAria('disabled', nodeData.disabled, $node);
-    }
-
     super._renderItem(
       this._renderedItemsCount + nodeIndex,
       // @ts-expect-error ts-error
@@ -1002,6 +1000,17 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
       this._renderCheckBox(itemElement, this._getNode(itemData));
     }
 
+    const $itemElement = $(itemElement);
+    const $itemContent = $itemElement.find(`.${ITEM_CONTENT_CLASS}`).first();
+    const node = this._getNode(itemData);
+
+    if (node?.internalFields.disabled) {
+      $itemElement.removeClass(DISABLED_STATE_CLASS);
+      $itemElement.removeAttr(DISABLED_STATE_ARIA);
+      $itemContent.addClass(DISABLED_STATE_CLASS);
+      $itemContent.attr(DISABLED_STATE_ARIA, 'true');
+    }
+
     super._postprocessRenderItem(args);
   }
 
@@ -1148,9 +1157,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
     if (!node) {
       return Deferred().reject().promise();
     }
-    if (node.internalFields.disabled) {
-      return Deferred().reject().promise();
-    }
 
     const currentState = node.internalFields.expanded;
     if (currentState === state) {
@@ -1207,10 +1213,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
     $icon.appendTo(this._getItem($node));
     $icon.addClass(iconClass);
 
-    if (node.internalFields.disabled) {
-      $icon.addClass(DISABLED_STATE_CLASS);
-    }
-
     this._renderToggleItemVisibilityIconClick($icon, node);
   }
 
@@ -1229,10 +1231,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
       $node.parent().addClass(OPENED_NODE_CONTAINER_CLASS);
     }
 
-    if (node.internalFields.disabled) {
-      $icon.addClass(DISABLED_STATE_CLASS);
-    }
-
     this._renderToggleItemVisibilityIconClick($icon, node);
   }
 
@@ -1569,11 +1567,11 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
 
   _toggleNodeDisabledState(node: TreeViewNode, state: boolean): void {
     const $node = this._getNodeElement(node);
-    const $item = $node.find(`.${ITEM_CLASS}`).eq(0);
+    const $itemContent = $node.find(`.${ITEM_CONTENT_CLASS}`).eq(0);
 
     this._dataAdapter.toggleNodeDisabledState(node.internalFields.key, state);
 
-    $item.toggleClass(DISABLED_STATE_CLASS, !!state);
+    $itemContent.toggleClass(DISABLED_STATE_CLASS, !!state);
 
     if (this._showCheckboxes()) {
       const checkbox = this._getCheckBoxInstance($node);
@@ -1889,7 +1887,7 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
 
     const node = this._getNodeByElement($item);
 
-    if (!node) return;
+    if (!node || node.internalFields.disabled) return;
 
     this._itemDXEventHandler(e, 'onItemClick', {
       node: this._dataAdapter.getPublicNode(node),

packages/devextreme/testing/helpers/fileManagerHelpers.js

@@ -40,6 +40,7 @@ export const Consts = {
     GRID_DATA_ROW_CLASS: 'dx-data-row',
     FILE_ACTION_BUTTON_CLASS: 'dx-filemanager-file-actions-button',
     FOLDERS_TREE_VIEW_ITEM_CLASS: 'dx-treeview-item',
+    FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS: 'dx-treeview-item-content',
     FOLDERS_TREE_VIEW_ITEM_TOGGLE_CLASS: 'dx-treeview-toggle-item-visibility',
     FOLDERS_TREE_VIEW_ITEM_TOGGLE_OPENED_CLASS: 'dx-treeview-toggle-item-visibility-opened',
     BREADCRUMBS_CLASS: 'dx-filemanager-breadcrumbs',

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooser.integration.tests.js

@@ -466,7 +466,7 @@ QUnit.module('Column chooser', baseModuleConfig, () => {
         // act
         dataGrid.showColumnChooser();
 
-        const items = $('.dx-item.dx-treeview-item');
+        const items = $('.dx-item.dx-treeview-item .dx-treeview-item-content');
 
         // assert
         assert.ok(items.eq(2).hasClass('dx-state-disabled'), 'Column with allowHiding=false is disabled');