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

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

@@ -19,3 +19,28 @@ $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;
+$treeview-checkbox-border-color-focused: null !default;
+$treeview-checkbox-background-color-focused: null !default;
+$treeview-checkbox-accent-color-focused: 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%);
+  $treeview-checkbox-border-color-focused: color.scale($base-bg, $lightness: -85.88%);
+  $treeview-checkbox-background-color-focused: color.scale($base-bg, $lightness: -7.84%);
+  $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 16%, $space: hsl);
+}
+
+@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);
+  $treeview-checkbox-border-color-focused: color.change($base-bg, $lightness: 100%, $space: hsl);
+  $treeview-checkbox-background-color-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl);
+  $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl);
+}
+

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

@@ -6,35 +6,77 @@
 @use "../sizes" as *;
 @use "../../base/treeView" as *;
 @use "../../base/icon_fonts" as *;
-@use "../checkBox/colors" as *;
 
 .dx-treeview-custom-expand-icon,
 .dx-treeview-custom-collapse-icon {
   @include dx-icon-sizing($fluent-base-icon-size);
 }
 
 .dx-treeview-item-with-checkbox {
+  .dx-treeview-item {
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        border-color: $treeview-item-content-disabled;
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon::before {
+          background-color: $treeview-item-content-disabled;
+        }
+      }
+    }
+  }
+
   &.dx-state-focused > .dx-treeview-item {
     .dx-checkbox {
       .dx-checkbox-icon {
-        border-color: $checkbox-accent-color-focused;
+        border-color: $treeview-checkbox-border-color-focused;
+        background-color: $treeview-checkbox-background-color-focused;
       }
 
       &.dx-checkbox-checked {
         .dx-checkbox-icon {
-          background-color: $checkbox-accent-color-focused;
+          background-color: $treeview-checkbox-accent-color-focused;
+          border-color: $treeview-checkbox-accent-color-focused;
+        }
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon {
+          border-color: $treeview-checkbox-accent-color-focused;
+
+          &::before {
+            background-color: $treeview-checkbox-accent-color-focused;
+          }
+        }
+      }
+    }
+
+    .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: $checkbox-accent-color-focused;
+          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) !default;
 
 @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`;
+export 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';
@@ -103,7 +105,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _dataSource!: any;
 
-  // eslint-disable-next-line no-restricted-globals
   _setFocusedItemTimeout?: ReturnType<typeof setTimeout>;
 
   _$selectAllItem?: dxElementWrapper;
@@ -884,10 +885,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
@@ -998,8 +995,18 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
   _postprocessRenderItem(args: PostprocessRenderItemInfo<TreeViewNode>): void {
     const { itemData, itemElement } = args;
 
+    const node = this._getNode(itemData);
+
+    if (node?.internalFields.disabled) {
+      const $itemContent = $(itemElement).find(`.${ITEM_CONTENT_CLASS}`);
+      $(itemElement).removeClass(DISABLED_STATE_CLASS);
+      $(itemElement).removeAttr(DISABLED_STATE_ARIA);
+      $itemContent.addClass(DISABLED_STATE_CLASS);
+      $itemContent.attr(DISABLED_STATE_ARIA, true);
+    }
+
     if (this._showCheckboxes()) {
-      this._renderCheckBox(itemElement, this._getNode(itemData));
+      this._renderCheckBox(itemElement, node);
     }
 
     super._postprocessRenderItem(args);
@@ -1148,9 +1155,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 +1211,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 +1229,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 +1565,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 +1885,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),
@@ -1988,7 +1984,7 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
   }
 
   _findNonDisabledNodes($nodes: dxElementWrapper): dxElementWrapper {
-    return $nodes.not(`:has(>.${ITEM_CLASS}.${DISABLED_STATE_CLASS})`);
+    return $nodes.not(`:has(>.${ITEM_CLASS} > .${ITEM_CONTENT_CLASS}.${DISABLED_STATE_CLASS})`);
   }
 
   _moveFocus(location: string, e: DxEvent<KeyboardEvent>): void {
@@ -2105,7 +2101,7 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
   }
 
   _getClosestNonDisabledNode($node: dxElementWrapper): dxElementWrapper {
-    const isNodeDisabled = ($el: dxElementWrapper): boolean => $el.children(`.${ITEM_CLASS}.${DISABLED_STATE_CLASS}`).length > 0;
+    const isNodeDisabled = ($el: dxElementWrapper): boolean => $el.find(`.${ITEM_CLASS} .${ITEM_CONTENT_CLASS}.${DISABLED_STATE_CLASS}`).length > 0;
 
     let currentNode = $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,10 +466,10 @@ QUnit.module('Column chooser', baseModuleConfig, () => {
         // act
         dataGrid.showColumnChooser();
 
-        const items = $('.dx-item.dx-treeview-item');
+        const item = $('.dx-item.dx-treeview-item').eq(2).find('.dx-treeview-item-content');
 
         // assert
-        assert.ok(items.eq(2).hasClass('dx-state-disabled'), 'Column with allowHiding=false is disabled');
+        assert.ok(item.hasClass('dx-state-disabled'), 'Column with allowHiding=false is disabled');
     });
 
     QUnit.test('Column chooser search.editorOptions option should work', function(assert) {