Content Tree: Event trigger on shift arrow keys

stencil-workspace/src/components.d.ts

@@ -26,7 +26,7 @@ import { TableCellEdited, TableContext } from "./components/modus-table/models/t
 import { Tab } from "./components/modus-tabs/modus-tabs";
 import { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
 import { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models";
-import { TreeViewItemInfo, TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
+import { TreeItemSelectionChange, TreeViewItemInfo, TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 import { ModusActionBarOptions as ModusActionBarOptions1 } from "./components/modus-action-bar/modus-action-bar";
 export { ModusActionBarOptions } from "./components/modus-action-bar/modus-action-bar";
 export { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete";
@@ -49,7 +49,7 @@ export { TableCellEdited, TableContext } from "./components/modus-table/models/t
 export { Tab } from "./components/modus-tabs/modus-tabs";
 export { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
 export { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models";
-export { TreeViewItemInfo, TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
+export { TreeItemSelectionChange, TreeViewItemInfo, TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export { ModusActionBarOptions as ModusActionBarOptions1 } from "./components/modus-action-bar/modus-action-bar";
 export namespace Components {
     interface ModusAccordion {
@@ -2776,6 +2776,7 @@ declare global {
     };
     interface HTMLModusTreeViewElementEventMap {
         "itemDrop": { [key: string]: TreeViewItemInfo };
+        "itemSelectionChange": TreeItemSelectionChange;
         "itemActionClick": any;
     }
     interface HTMLModusTreeViewElement extends Components.ModusTreeView, HTMLStencilElement {
@@ -2796,6 +2797,7 @@ declare global {
         "checkboxClick": boolean;
         "itemLabelChange": string;
         "itemClick": boolean;
+        "itemSelectionChange": TreeItemSelectionChange;
         "itemExpandToggle": boolean;
         "itemAdded": HTMLElement;
         "actionClick": any;
@@ -4818,6 +4820,7 @@ declare namespace LocalJSX {
          */
         "onItemActionClick"?: (event: ModusTreeViewCustomEvent<any>) => void;
         "onItemDrop"?: (event: ModusTreeViewCustomEvent<{ [key: string]: TreeViewItemInfo }>) => void;
+        "onItemSelectionChange"?: (event: ModusTreeViewCustomEvent<TreeItemSelectionChange>) => void;
         /**
           * (optional) Set selected tree items
          */
@@ -4881,6 +4884,7 @@ declare namespace LocalJSX {
           * An event that fires on tree item label changes
          */
         "onItemLabelChange"?: (event: ModusTreeViewItemCustomEvent<string>) => void;
+        "onItemSelectionChange"?: (event: ModusTreeViewItemCustomEvent<TreeItemSelectionChange>) => void;
         /**
           * (optional) Tab Index for the tree item
          */

stencil-workspace/src/components/modus-content-tree/modus-content-tree.types.tsx

@@ -37,6 +37,11 @@ export type TreeViewItemInfo = {
   level?: number;
 };
 
+export type TreeItemSelectionChange = {
+  nodeId: string;
+  isSelected: boolean;
+};
+
 export type TreeViewItemDragState = {
   itemId: string;
   dragContent: HTMLElement;

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

@@ -12,7 +12,7 @@ import {
   FunctionalComponent,
 } from '@stencil/core';
 import { ModusIconMap } from '../../../icons/ModusIconMap';
-import { TreeViewItemOptions } from '../modus-content-tree.types';
+import { TreeItemSelectionChange, TreeViewItemOptions } from '../modus-content-tree.types';
 import { TREE_ITEM_SIZE_CLASS } from '../modus-content-tree.constants';
 import { ModusActionBarOptions } from '../../modus-action-bar/modus-action-bar';
 
@@ -53,6 +53,8 @@ export class ModusTreeViewItem {
   /** An event that fires on tree item click */
   @Event() itemClick: EventEmitter<boolean>;
 
+  @Event() itemSelectionChange: EventEmitter<TreeItemSelectionChange>;
+
   /** An event that fires on tree item expand/collapse */
   @Event() itemExpandToggle: EventEmitter<boolean>;
 
@@ -252,6 +254,9 @@ export class ModusTreeViewItem {
 
       onItemSelection(this.nodeId, e);
       this.itemClick.emit(hasItemSelected(this.nodeId));
+      if (!e.ctrlKey) {
+        this.itemSelectionChange.emit({ isSelected: hasItemSelected(this.nodeId), nodeId: this.nodeId });
+      }
     }
   }
 

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

@@ -22,13 +22,14 @@
 
 ## Events
 
-| Event              | Description                                                                           | Type                   |
-| ------------------ | ------------------------------------------------------------------------------------- | ---------------------- |
-| `actionClick`      | Fired when an action button within the tree item is clicked. Includes the `actionId`. | `CustomEvent<any>`     |
-| `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>`  |
+| Event                 | Description                                                                           | Type                                                    |
+| --------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| `actionClick`         | Fired when an action button within the tree item is clicked. Includes the `actionId`. | `CustomEvent<any>`                                      |
+| `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>`                                   |
+| `itemSelectionChange` |                                                                                       | `CustomEvent<{ nodeId: string; isSelected: boolean; }>` |
 
 
 ## Methods

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

@@ -10,7 +10,13 @@ import {
   State,
   Watch,
 } from '@stencil/core';
-import { TreeViewItemOptions, TreeViewItemInfo, TreeViewItemDragState, Position } from '../modus-content-tree.types';
+import {
+  TreeViewItemOptions,
+  TreeViewItemInfo,
+  TreeViewItemDragState,
+  TreeItemSelectionChange,
+  Position,
+} from '../modus-content-tree.types';
 import { ModusContentTreeDragItem } from '../modus-content-tree-drag-item';
 
 @Component({
@@ -54,6 +60,8 @@ export class ModusTreeView {
 
   @Event() itemDrop: EventEmitter<{ [key: string]: TreeViewItemInfo }>;
 
+  @Event() itemSelectionChange: EventEmitter<TreeItemSelectionChange>;
+
   private currentItem: TreeViewItemInfo;
 
   private focusItem: string;
@@ -595,6 +603,10 @@ export class ModusTreeView {
     current.focusItem();
   }
 
+  handleChangeTreeitem(isSelected: boolean, nodeId: string): void {
+    this.itemSelectionChange.emit({ isSelected, nodeId });
+  }
+
   handleItemSelection(itemId: string, event?: KeyboardEvent | MouseEvent): void {
     if (this.items[itemId].disabled) return;
     const allowMultipleSelection = this.multiSelection && event && (event.shiftKey || event.ctrlKey || event.metaKey);
@@ -606,11 +618,13 @@ export class ModusTreeView {
     if (isSelected) {
       if (allowMultipleSelection) {
         newItems.push(itemId);
+        this.handleChangeTreeitem(true, itemId);
       } else {
         newItems = [itemId];
       }
     } else {
       newItems = newItems.filter((i) => i !== itemId);
+      if (allowMultipleSelection) this.handleChangeTreeitem(false, itemId);
     }
     this.selectedItems = [...newItems];
     this.syncItems.push(...oldItems, ...newItems);

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

@@ -22,10 +22,11 @@
 
 ## Events
 
-| Event             | Description                                                                                                                           | Type                                                |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
-| `itemActionClick` | Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. | `CustomEvent<any>`                                  |
-| `itemDrop`        |                                                                                                                                       | `CustomEvent<{ [key: string]: TreeViewItemInfo; }>` |
+| Event                 | Description                                                                                                                           | Type                                                    |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| `itemActionClick`     | Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. | `CustomEvent<any>`                                      |
+| `itemDrop`            |                                                                                                                                       | `CustomEvent<{ [key: string]: TreeViewItemInfo; }>`     |
+| `itemSelectionChange` |                                                                                                                                       | `CustomEvent<{ nodeId: string; isSelected: boolean; }>` |
 
 
 ----------------------------------------------

stencil-workspace/src/interfaces.d.ts

@@ -1,6 +1,6 @@
 export { Components, JSX } from './components';
 export { Crumb } from './components/modus-breadcrumb/modus-breadcrumb';
-export { TreeViewItemInfo } from './components/modus-content-tree/modus-content-tree.types';
+export { TreeItemSelectionChange, TreeViewItemInfo } from './components/modus-content-tree/modus-content-tree.types';
 export { ModusNavbarApp } from './components/modus-navbar/apps-menu/modus-navbar-apps-menu';
 export * from './components/modus-data-table/modus-data-table.models';
 export { ModusAutocompleteOption } from './components/modus-autocomplete/modus-autocomplete';

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

@@ -643,10 +643,11 @@ Every item and the elements such as drag icon, expand & collapse icon and the ch
 
 #### Modus Tree View
 
-| Name            | Description                                                                                                                           | Emits                                  |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| itemActionClick | Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. | `{ actionId: string, nodeId: string }` |
-| itemDrop        | Fired when an item is dropped in a different position. Includes the updated item's map.                                               | `{ [key: string]: TreeViewItemInfo }`  |
+| Name                | Description                                                                                                                           | Emits                                                |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| itemActionClick     | Fired when an action is clicked within any tree item. Includes both the `actionId` and `nodeId` of the action and item, respectively. | `{ actionId: string, nodeId: string }`               |
+| itemDrop            | Fired when an item is dropped in a different position. Includes the updated item's map.                                               | `{ [key: string]: TreeViewItemInfo }`                |
+| itemSelectionChange | Fired when the item's selection state changes by any means, such as mouse or keyboard interactions                                    | `CustomEvent<{isSelected: boolean, nodeId: number}>` |
 
 ##### Modus Tree View Item
 

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

@@ -70,6 +70,7 @@ export default {
         'itemClick modus-tree-view-item',
         'itemLabelChange modus-tree-view-item',
         'itemDrop modus-tree-view',
+        'itemSelectionChange modus-tree-view',
       ],
     },
     controls: { expanded: true, sort: 'requiredFirst' },