docs: new cem for Topic-P components - Tree

packages/main/src/Interfaces.ts

@@ -179,11 +179,10 @@ const IToken = "sap.ui.webc.main.IToken";
 /**
  * Interface for tree items for the purpose of <code>ui5-tree</code>
  *
- * @name sap.ui.webc.main.ITreeItem
- * @interface
  * @public
  */
-const ITreeItem = "sap.ui.webc.main.ITreeItem";
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface ITreeItem extends HTMLElement { }
 
 export {
 	IAvatar,

packages/main/src/SelectMenuOption.ts

@@ -28,7 +28,7 @@ import type { AccessibilityAttributes } from "./ListItem.js";
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webc.main.SelectMenuOption
- * @extends sap.ui.webc.base.UI5Element
+ * @extends sap.ui.webc.main.CustomListItem
  * @implements sap.ui.webc.main.ISelectMenuOption
  * @tagname ui5-select-menu-option
  * @public
@@ -53,6 +53,18 @@ class SelectMenuOption extends CustomListItem implements IOption {
 	@property()
 	displayText!: string;
 
+	/**
+	 * Defines whether the component is in disabled state.
+	 * <br><br>
+	 * <b>Note:</b> A disabled component is hidden.
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @name sap.ui.webc.main.SelectMenuOption.prototype.disabled
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean;
+
 	/**
 	 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
 	 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.

packages/main/src/Tree.ts

@@ -58,7 +58,7 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
  *
  * <h4>When not to use:</h4>
  * <ul>
- * <li>To display items not hierarchically strcutured. In this case, use the List component.</li>
+ * <li>To display items not hierarchically structured. 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>
@@ -87,11 +87,7 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
  * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
  *
  * @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
  */
@@ -112,7 +108,6 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
  * 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
  * @param {HTMLElement} item the toggled item.
  * @allowPreventDefault
  * @public
@@ -124,7 +119,6 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
 })
 /**
  * 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
@@ -136,7 +130,6 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
 })
 /**
  * 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
@@ -149,7 +142,6 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
 /**
  * Fired when a tree item is activated.
  *
- * @event sap.ui.webc.main.Tree#item-click
  * @allowPreventDefault
  * @param {HTMLElement} item The clicked item.
  * @public
@@ -166,7 +158,6 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
  * <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
  * @param {HTMLElement} item the deleted item.
  * @public
  */
@@ -180,7 +171,6 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
  * 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
  * @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.
@@ -199,19 +189,15 @@ class Tree extends UI5Element {
 	 * 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"
 	 */
 	@property({ type: ListMode, defaultValue: ListMode.None })
 	mode!: `${ListMode}`;
 
 	/**
 	 * 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
 	 */
 	@property()
@@ -222,9 +208,7 @@ class Tree extends UI5Element {
 	 * <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 ""
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -233,9 +217,7 @@ class Tree extends UI5Element {
 	/**
 	 * Defines the component footer text.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.Tree.prototype.footerText
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -244,9 +226,7 @@ class Tree extends UI5Element {
 	/**
 	 * Defines the accessible name of the component.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.Tree.prototype.accessibleName
-	 * @defaultvalue: ""
+	 * @default ""
 	 * @public
 	 * @since 1.8.0
 	 */
@@ -256,9 +236,7 @@ class Tree extends UI5Element {
 	/**
 	 * 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
 	 */
@@ -268,9 +246,7 @@ class Tree extends UI5Element {
 	/**
 	 * Defines the description for the accessible role of the component.
 	 * @protected
-	 * @type {string}
-	 * @name sap.ui.webc.main.Tree.prototype.accessibleRoleDescription
-	 * @defaultvalue undefined
+	 * @default undefined
 	 * @since 1.10.0
 	 */
 	@property({ defaultValue: undefined, noAttribute: true })
@@ -281,9 +257,6 @@ class Tree extends UI5Element {
 	 * <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
 	 * @public
 	 */
 	@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
@@ -295,9 +268,6 @@ class Tree extends UI5Element {
 	 * <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
 	 * @public
 	 */
 	@slot()

packages/main/src/TreeItem.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import TreeItemBase from "./TreeItemBase.js";
+import { ITreeItem } from "./Interfaces.js";
 // Template
 import TreeItemTemplate from "./generated/templates/TreeItemTemplate.lit.js";
 
@@ -16,51 +17,37 @@ import treeItemCss from "./generated/themes/TreeItem.css.js";
  * This is the item to use inside a <code>ui5-tree</code>.
  * You can represent an arbitrary tree structure by recursively nesting tree items.
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-tree-item</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>title - Used to style the title of the tree list item</li>
- * <li>additionalText - Used to style the additionalText of the tree list item</li>
- * <li>icon - Used to style the icon of the tree list item</li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
  *
+ * @csspart title - Used to style the title of the tree list item
+ * @csspart additionalText - Used to style the additionalText of the tree list item
+ * @csspart icon - Used to style the icon of the tree list item
+ *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.TreeItem
- * @extends sap.ui.webc.main.TreeItemBase
- * @tagname ui5-tree-item
+ * @extends TreeItemBase
  * @public
- * @implements sap.ui.webc.main.ITreeItem
+ * @implements {ITreeItem}
  * @since 1.0.0-rc.8
  */
 @customElement({
 	tag: "ui5-tree-item",
 	template: TreeItemTemplate,
 	styles: [TreeItemBase.styles, treeItemCss],
 })
-class TreeItem extends TreeItemBase {
+class TreeItem extends TreeItemBase implements ITreeItem {
 	/**
 	 * Defines the text of the tree item.
 	 *
 	 * @public
-	 * @type {string}
-	 * @name sap.ui.webc.main.TreeItem.prototype.text
-	 * @defaultValue ""
+	 * @default ""
 	 */
 	@property()
 	text!: string;
 
 	/**
 	 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
-	 * @type {string}
-	 * @name sap.ui.webc.main.TreeItem.prototype.additionalText
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 * @since 1.0.0-rc.15
 	 */
@@ -71,9 +58,7 @@ class TreeItem extends TreeItemBase {
 	 * Defines the state of the <code>additionalText</code>.
 	 * <br>
 	 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
-	 * @type {sap.ui.webc.base.types.ValueState}
-	 * @name sap.ui.webc.main.TreeItem.prototype.additionalTextState
-	 * @defaultvalue "None"
+	 * @default "None"
 	 * @public
 	 * @since 1.0.0-rc.15
 	 */