@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/Tree.d.ts

@@ -1,9 +1,21 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import TreeList from "./TreeList.js";
-import ListMode from "./types/ListMode.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+import DropIndicator from "./DropIndicator.js";
 import type TreeItemBase from "./TreeItemBase.js";
+import TreeList from "./TreeList.js";
+import ListSelectionMode from "./types/ListSelectionMode.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import type { TreeItemBaseToggleEventDetail, TreeItemBaseStepInEventDetail, TreeItemBaseStepOutEventDetail } from "./TreeItemBase.js";
-import type { ListItemClickEventDetail, ListItemDeleteEventDetail, ListSelectionChangeEventDetail } from "./List.js";
+import type { ListItemClickEventDetail, ListItemDeleteEventDetail, ListItemFocusEventDetail, ListSelectionChangeEventDetail } from "./List.js";
+type TreeMoveEventDetail = {
+    source: {
+        element: HTMLElement;
+    };
+    destination: {
+        element: HTMLElement;
+        placement: `${MovePlacement}`;
+    };
+};
 type TreeItemEventDetail = {
     item: TreeItemBase;
 };
@@ -12,6 +24,7 @@ type TreeItemMouseoverEventDetail = TreeItemEventDetail;
 type TreeItemMouseoutEventDetail = TreeItemEventDetail;
 type TreeItemClickEventDetail = TreeItemEventDetail;
 type TreeItemDeleteEventDetail = TreeItemEventDetail;
+type TreeItemFocusEventDetail = TreeItemEventDetail;
 type TreeSelectionChangeEventDetail = {
     selectedItems: Array<TreeItemBase>;
     previouslySelectedItems: Array<TreeItemBase>;
@@ -21,166 +34,128 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-tree</code> component provides a tree structure for displaying data in a hierarchy.
+ * ### Overview
+ * The `ui5-tree` component provides a tree structure for displaying data in a hierarchy.
+ *
+ * ### Usage
+ *
+ * #### When to use:
  *
- * <h3>Usage</h3>
+ * - To display hierarchically structured items.
+ * - To select one or more items out of a set of hierarchically structured items.
  *
- * <h4>When to use:</h4>
- * <ul>
- * <li>To display hierarchically structured items.</li>
- * <li>To select one or more items out of a set of hierarchically structured items.</li>
- * </ul>
+ * #### When not to use:
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li>To display items not hierarchically strcutured. In this case, use the List component.</li>
- * <li>To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.</li>
- * <li>The hierarchy turns out to have only two levels. In this case, use List with group items.</li>
- * </ul>
+ * - To display items not hierarchically structured. In this case, use the List component.
+ * - To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.
+ * - The hierarchy turns out to have only two levels. In this case, use List with group items.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * The <code>ui5-tree</code> provides advanced keyboard handling.
+ * The `ui5-tree` provides advanced keyboard handling.
  * The user can use the following keyboard shortcuts in order to navigate trough the tree:
- * <ul>
- * <li>[UP/DOWN] - Navigates up and down the tree items that are currently visible.</li>
- * <li>[RIGHT] - Drills down the tree by expanding the tree nodes.</li>
- * <li>[LEFT] - Goes up the tree and collapses the tree nodes.</li>
- * </ul>
- * <br>
+ *
+ * - [Up] or [Down] - Navigates up and down the tree items that are currently visible.
+ * - [Right] - Drills down the tree by expanding the tree nodes.
+ * - [Left] - Goes up the tree and collapses the tree nodes.
  *
  * The user can use the following keyboard shortcuts to perform selection,
- * when the <code>mode</code> property is in use:
- * <ul>
- * <li>[SPACE] - Selects the currently focused item upon keyup.</li>
- * <li>[ENTER]  - Selects the currently focused item upon keydown.</li>
- * </ul>
+ * when the `selectionMode` property is in use:
+ *
+ * - [Space] - Selects the currently focused item upon keyup.
+ * - [Enter]  - Selects the currently focused item upon keydown.
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents/dist/Tree.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/Tree.js";`
  *
+ * `import "@ui5/webcomponents/dist/TreeItem.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Tree
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-tree
- * @appenddocs sap.ui.webc.main.TreeItem sap.ui.webc.main.TreeItemCustom
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.8
  */
 declare class Tree extends UI5Element {
     /**
-     * Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure,
+     * Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,
      * the tree modes are exactly the same as the list modes, and are all applicable.
-     *
      * @public
-     * @type {sap.ui.webc.main.types.ListMode}
-     * @name sap.ui.webc.main.Tree.prototype.mode
-     * @defaultValue "None"
+     * @default "None"
      */
-    mode: `${ListMode}`;
+    selectionMode: `${ListSelectionMode}`;
     /**
      * Defines the text that is displayed when the component contains no items.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Tree.prototype.noDataText
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     noDataText: string;
     /**
      * Defines the component header text.
-     * <br><br>
-     * <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.Tree.prototype.headerText
-     * @defaultvalue ""
+     * **Note:** If the `header` slot is set, this property is ignored.
+     * @default ""
      * @public
      */
     headerText: string;
     /**
      * Defines the component footer text.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Tree.prototype.footerText
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     footerText: string;
     /**
      * Defines the accessible name of the component.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Tree.prototype.accessibleName
-     * @defaultvalue: ""
+     * @default ""
      * @public
      * @since 1.8.0
      */
     accessibleName: string;
     /**
      * Defines the IDs of the elements that label the component.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.Tree.prototype.accessibleNameRef
-     * @defaultvalue ""
+     * @default ""
      * @public
      * @since 1.8.0
      */
     accessibleNameRef: string;
-    /**
-     * Defines the description for the accessible role of the component.
-     * @protected
-     * @type {string}
-     * @name sap.ui.webc.main.Tree.prototype.accessibleRoleDescription
-     * @defaultvalue undefined
-     * @since 1.10.0
-     */
-    accessibleRoleDescription?: string;
     /**
      * Defines the items of the component. Tree items may have other tree items as children.
-     * <br><br>
-     * <b>Note:</b> Use <code>ui5-tree-item</code> for the intended design.
      *
-     * @type {sap.ui.webc.main.ITreeItem[]}
-     * @name sap.ui.webc.main.Tree.prototype.default
-     * @slot items
+     * **Note:** Use `ui5-tree-item` for the intended design.
      * @public
      */
     items: Array<TreeItemBase>;
     /**
      * Defines the component header.
-     * <br><br>
-     * <b>Note:</b> When the <code>header</code> slot is set, the
-     * <code>headerText</code> property is ignored.
      *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.Tree.prototype.header
-     * @slot header
+     * **Note:** When the `header` slot is set, the
+     * `headerText` property is ignored.
      * @public
      */
     header: Array<HTMLElement>;
+    onEnterDOM(): void;
+    onExitDOM(): void;
     onBeforeRendering(): void;
     onAfterRendering(): void;
+    get dropIndicatorDOM(): DropIndicator | null;
     get list(): TreeList;
-    get _role(): string;
+    get _role(): ListAccessibleRole;
     get _label(): string | undefined;
     get _hasHeader(): boolean;
+    _ondragenter(e: DragEvent): void;
+    _ondragleave(e: DragEvent): void;
+    _ondragover(e: DragEvent): void;
+    _ondrop(e: DragEvent): void;
     _onListItemStepIn(e: CustomEvent<TreeItemBaseStepInEventDetail>): void;
     _onListItemStepOut(e: CustomEvent<TreeItemBaseStepOutEventDetail>): void;
     _onListItemToggle(e: CustomEvent<TreeItemBaseToggleEventDetail>): void;
     _onListItemClick(e: CustomEvent<ListItemClickEventDetail>): void;
     _onListItemDelete(e: CustomEvent<ListItemDeleteEventDetail>): void;
+    _onListItemFocus(e: CustomEvent<ListItemFocusEventDetail>): void;
     _onListItemMouseOver(e: MouseEvent): void;
     _onListItemMouseOut(e: MouseEvent): void;
     _onListSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>): void;
     _prepareTreeItems(): void;
     /**
      * Returns the corresponding list item for a given tree item
-     *
      * @param item The tree item
      * @protected
      */
@@ -188,7 +163,7 @@ declare class Tree extends UI5Element {
     /**
      * Returns the a flat array of all tree items
      * @protected
-     * @returns {Array}
+     * @returns array of the tree items
      */
     getItems(): Array<TreeItemBase>;
     /**
@@ -199,12 +174,11 @@ declare class Tree extends UI5Element {
     focusItemByIndex(index: number): void;
     /**
      * Perform Depth-First-Search walk on the tree and run a callback on each node
-     *
      * @public
-     * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
+     * @param callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
      */
     walk(callback: WalkCallback): void;
     _isInstanceOfTreeItemBase(object: any): object is TreeItemBase;
 }
 export default Tree;
-export type { TreeItemToggleEventDetail, TreeItemMouseoverEventDetail, TreeItemMouseoutEventDetail, TreeItemClickEventDetail, TreeItemDeleteEventDetail, TreeSelectionChangeEventDetail, };
+export type { TreeMoveEventDetail, TreeItemToggleEventDetail, TreeItemMouseoverEventDetail, TreeItemMouseoutEventDetail, TreeItemClickEventDetail, TreeItemDeleteEventDetail, TreeItemFocusEventDetail, TreeSelectionChangeEventDetail, WalkCallback, };

package/dist/Tree.js

@@ -8,13 +8,19 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
+import findClosestPosition from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
+import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import DropIndicator from "./DropIndicator.js";
 import TreeItem from "./TreeItem.js";
 import TreeItemCustom from "./TreeItemCustom.js";
 import TreeList from "./TreeList.js";
-import ListMode from "./types/ListMode.js";
+import ListSelectionMode from "./types/ListSelectionMode.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 // Template
 import TreeTemplate from "./generated/templates/TreeTemplate.lit.js";
 // Styles
@@ -22,57 +28,53 @@ import TreeCss from "./generated/themes/Tree.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-tree</code> component provides a tree structure for displaying data in a hierarchy.
+ * ### Overview
+ * The `ui5-tree` component provides a tree structure for displaying data in a hierarchy.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * <h4>When to use:</h4>
- * <ul>
- * <li>To display hierarchically structured items.</li>
- * <li>To select one or more items out of a set of hierarchically structured items.</li>
- * </ul>
+ * #### When to use:
  *
- * <h4>When not to use:</h4>
- * <ul>
- * <li>To display items not hierarchically strcutured. In this case, use the List component.</li>
- * <li>To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.</li>
- * <li>The hierarchy turns out to have only two levels. In this case, use List with group items.</li>
- * </ul>
+ * - To display hierarchically structured items.
+ * - To select one or more items out of a set of hierarchically structured items.
  *
- * <h3>Keyboard Handling</h3>
+ * #### When not to use:
  *
- * The <code>ui5-tree</code> provides advanced keyboard handling.
+ * - To display items not hierarchically structured. In this case, use the List component.
+ * - To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.
+ * - The hierarchy turns out to have only two levels. In this case, use List with group items.
+ *
+ * ### Keyboard Handling
+ *
+ * The `ui5-tree` provides advanced keyboard handling.
  * The user can use the following keyboard shortcuts in order to navigate trough the tree:
- * <ul>
- * <li>[UP/DOWN] - Navigates up and down the tree items that are currently visible.</li>
- * <li>[RIGHT] - Drills down the tree by expanding the tree nodes.</li>
- * <li>[LEFT] - Goes up the tree and collapses the tree nodes.</li>
- * </ul>
- * <br>
+ *
+ * - [Up] or [Down] - Navigates up and down the tree items that are currently visible.
+ * - [Right] - Drills down the tree by expanding the tree nodes.
+ * - [Left] - Goes up the tree and collapses the tree nodes.
  *
  * The user can use the following keyboard shortcuts to perform selection,
- * when the <code>mode</code> property is in use:
- * <ul>
- * <li>[SPACE] - Selects the currently focused item upon keyup.</li>
- * <li>[ENTER]  - Selects the currently focused item upon keydown.</li>
- * </ul>
+ * when the `selectionMode` property is in use:
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents/dist/Tree.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
+ * - [Space] - Selects the currently focused item upon keyup.
+ * - [Enter]  - Selects the currently focused item upon keydown.
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/Tree.js";`
+ *
+ * `import "@ui5/webcomponents/dist/TreeItem.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Tree
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-tree
- * @appenddocs sap.ui.webc.main.TreeItem sap.ui.webc.main.TreeItemCustom
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.8
  */
 let Tree = class Tree extends UI5Element {
+    onEnterDOM() {
+        DragRegistry.subscribe(this);
+    }
+    onExitDOM() {
+        DragRegistry.unsubscribe(this);
+    }
     onBeforeRendering() {
         this._prepareTreeItems();
     }
@@ -81,11 +83,14 @@ let Tree = class Tree extends UI5Element {
         // This code should be removed once a framework-level fix is implemented
         this.shadowRoot.querySelector("[ui5-tree-list]").onBeforeRendering();
     }
+    get dropIndicatorDOM() {
+        return this.shadowRoot.querySelector("[ui5-drop-indicator]");
+    }
     get list() {
         return this.getDomRef();
     }
     get _role() {
-        return "tree";
+        return ListAccessibleRole.Tree;
     }
     get _label() {
         return getEffectiveAriaLabelText(this);
@@ -93,6 +98,75 @@ let Tree = class Tree extends UI5Element {
     get _hasHeader() {
         return !!this.header.length;
     }
+    _ondragenter(e) {
+        e.preventDefault();
+    }
+    _ondragleave(e) {
+        if (e.relatedTarget instanceof Node && this.shadowRoot.contains(e.relatedTarget)) {
+            return;
+        }
+        this.dropIndicatorDOM.targetReference = null;
+    }
+    _ondragover(e) {
+        const draggedElement = DragRegistry.getDraggedElement();
+        const allLiNodesTraversed = []; // use the only <li> nodes to determine positioning
+        if (!(e.target instanceof HTMLElement) || !draggedElement) {
+            return;
+        }
+        this.walk(item => {
+            allLiNodesTraversed.push(item.shadowRoot.querySelector("li"));
+        });
+        const closestPosition = findClosestPosition(allLiNodesTraversed, e.clientY, Orientation.Vertical);
+        if (!closestPosition) {
+            this.dropIndicatorDOM.targetReference = null;
+            return;
+        }
+        let placements = closestPosition.placements;
+        closestPosition.element = closestPosition.element.getRootNode().host;
+        if (draggedElement.contains(closestPosition.element)) {
+            return;
+        }
+        if (closestPosition.element === draggedElement) {
+            placements = placements.filter(placement => placement !== MovePlacement.On);
+        }
+        const placementAccepted = placements.some(placement => {
+            const closestElement = closestPosition.element;
+            const beforeItemMovePrevented = !this.fireEvent("move-over", {
+                source: {
+                    element: draggedElement,
+                },
+                destination: {
+                    element: closestElement,
+                    placement,
+                },
+            }, true);
+            if (beforeItemMovePrevented) {
+                e.preventDefault();
+                this.dropIndicatorDOM.targetReference = closestElement;
+                this.dropIndicatorDOM.placement = placement;
+                return true;
+            }
+            return false;
+        });
+        if (!placementAccepted) {
+            this.dropIndicatorDOM.targetReference = null;
+        }
+    }
+    _ondrop(e) {
+        e.preventDefault();
+        const draggedElement = DragRegistry.getDraggedElement();
+        this.fireEvent("move", {
+            source: {
+                element: draggedElement,
+            },
+            destination: {
+                element: this.dropIndicatorDOM.targetReference,
+                placement: this.dropIndicatorDOM.placement,
+            },
+        });
+        draggedElement.focus();
+        this.dropIndicatorDOM.targetReference = null;
+    }
     _onListItemStepIn(e) {
         const treeItem = e.detail.item;
         if (treeItem.items.length > 0) {
@@ -126,6 +200,10 @@ let Tree = class Tree extends UI5Element {
         const treeItem = e.detail.item;
         this.fireEvent("item-delete", { item: treeItem });
     }
+    _onListItemFocus(e) {
+        const treeItem = e.detail.item;
+        this.fireEvent("item-focus", { item: treeItem });
+    }
     _onListItemMouseOver(e) {
         const target = e.target;
         if (this._isInstanceOfTreeItemBase(target)) {
@@ -160,13 +238,12 @@ let Tree = class Tree extends UI5Element {
             const parent = item.parentNode;
             const ariaSetSize = (parent && parent.children.length) || this.items.length;
             item.setAttribute("level", level.toString());
-            item._setsize = ariaSetSize;
-            item._posinset = index + 1;
+            item.forcedSetsize = ariaSetSize;
+            item.forcedPosinset = index + 1;
         });
     }
     /**
      * Returns the corresponding list item for a given tree item
-     *
      * @param item The tree item
      * @protected
      */
@@ -176,7 +253,7 @@ let Tree = class Tree extends UI5Element {
     /**
      * Returns the a flat array of all tree items
      * @protected
-     * @returns {Array}
+     * @returns array of the tree items
      */
     getItems() {
         return this.list.getItems();
@@ -192,9 +269,8 @@ let Tree = class Tree extends UI5Element {
     }
     /**
      * Perform Depth-First-Search walk on the tree and run a callback on each node
-     *
      * @public
-     * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
+     * @param callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
      */
     walk(callback) {
         walkTree(this, 1, callback);
@@ -204,8 +280,8 @@ let Tree = class Tree extends UI5Element {
     }
 };
 __decorate([
-    property({ type: ListMode, defaultValue: ListMode.None })
-], Tree.prototype, "mode", void 0);
+    property({ type: ListSelectionMode, defaultValue: ListSelectionMode.None })
+], Tree.prototype, "selectionMode", void 0);
 __decorate([
     property()
 ], Tree.prototype, "noDataText", void 0);
@@ -221,9 +297,6 @@ __decorate([
 __decorate([
     property()
 ], Tree.prototype, "accessibleNameRef", void 0);
-__decorate([
-    property({ defaultValue: undefined, noAttribute: true })
-], Tree.prototype, "accessibleRoleDescription", void 0);
 __decorate([
     slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
 ], Tree.prototype, "items", void 0);
@@ -240,15 +313,15 @@ Tree = __decorate([
             TreeList,
             TreeItem,
             TreeItemCustom,
+            DropIndicator,
         ],
     })
     /**
      * Fired when a tree item is expanded or collapsed.
-     * <i>Note:</i> You can call <code>preventDefault()</code> on the event object to suppress the event, if needed.
-     * This may be handy for example if you want to dynamically load tree items upon the user expanding a node.
-     * Even if you prevented the event's default behavior, you can always manually call <code>toggle()</code> on a tree item.
      *
-     * @event sap.ui.webc.main.Tree#item-toggle
+     * **Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.
+     * This may be handy for example if you want to dynamically load tree items upon the user expanding a node.
+     * Even if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.
      * @param {HTMLElement} item the toggled item.
      * @allowPreventDefault
      * @public
@@ -256,12 +329,14 @@ Tree = __decorate([
     ,
     event("item-toggle", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
     /**
      * Fired when the mouse cursor enters the tree item borders.
-     * @event sap.ui.webc.main.Tree#item-mouseover
      * @param {HTMLElement} item the hovered item.
      * @since 1.0.0-rc.16
      * @public
@@ -269,12 +344,14 @@ Tree = __decorate([
     ,
     event("item-mouseover", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
     /**
      * Fired when the mouse cursor leaves the tree item borders.
-     * @event sap.ui.webc.main.Tree#item-mouseout
      * @param {HTMLElement} item the hovered item.
      * @since 1.0.0-rc.16
      * @public
@@ -282,13 +359,14 @@ Tree = __decorate([
     ,
     event("item-mouseout", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
     /**
      * Fired when a tree item is activated.
-     *
-     * @event sap.ui.webc.main.Tree#item-click
      * @allowPreventDefault
      * @param {HTMLElement} item The clicked item.
      * @public
@@ -296,30 +374,43 @@ Tree = __decorate([
     ,
     event("item-click", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
     /**
      * Fired when the Delete button of any tree item is pressed.
-     * <br><br>
-     * <b>Note:</b> A Delete button is displayed on each item,
-     * when the component <code>mode</code> property is set to <code>Delete</code>.
      *
-     * @event sap.ui.webc.main.Tree#item-delete
+     * **Note:** A Delete button is displayed on each item,
+     * when the component `selectionMode` property is set to `Delete`.
      * @param {HTMLElement} item the deleted item.
      * @public
      */
     ,
     event("item-delete", {
+        detail: {
+            /**
+             * @public
+             */
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired when a tree item is focused.
+     * @param {HTMLElement} item The focused item.
+     * @private
+     */
+    ,
+    event("item-focus", {
         detail: {
             item: { type: HTMLElement },
         },
     })
     /**
      * Fired when selection is changed by user interaction
-     * in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.
-     *
-     * @event sap.ui.webc.main.Tree#selection-change
+     * in `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.
      * @param {Array} selectedItems An array of the selected items.
      * @param {Array} previouslySelectedItems An array of the previously selected items.
      * @param {HTMLElement} targetItem The item triggering the event.
@@ -328,8 +419,17 @@ Tree = __decorate([
     ,
     event("selection-change", {
         detail: {
+            /**
+             * @public
+             */
             selectedItems: { type: Array },
+            /**
+             * @public
+             */
             previouslySelectedItems: { type: Array },
+            /**
+             * @public
+             */
             targetItem: { type: HTMLElement },
         },
     })