@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/tree/elements/tree-item.js

@@ -1,14 +1,12 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, html, property, ControlElement } from '@refinitiv-ui/core';
-import '../../icon';
-import { preload } from '../../icon';
-import '../../checkbox';
-import { CheckedState } from '../managers/tree-manager';
+import { __decorate } from "tslib";
+import { html, ControlElement } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import '../../icon/index.js';
+import { preload } from '../../icon/index.js';
+import '../../checkbox/index.js';
+import { CheckedState } from '../managers/tree-manager.js';
 preload('right');
 const emptyTemplate = html ``;
 /**
@@ -18,6 +16,7 @@ const emptyTemplate = html ``;
 let TreeItem = class TreeItem extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'treeitem';
         /**
          * Checked state of the item
          */
@@ -42,12 +41,23 @@ let TreeItem = class TreeItem extends ControlElement {
          * Label of the item
          */
         this.label = '';
+        /**
+         * Icon of the item
+         */
+        this.icon = '';
         /**
          * Highlighted state of the item.
          * This is for showing which item is currently being interacted with.
          */
         this.highlighted = false;
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Template for rendering the indentation element
      */
@@ -61,10 +71,7 @@ let TreeItem = class TreeItem extends ControlElement {
      */
     get toggleTemplate() {
         return html `
-    <div
-    expand-toggle
-    part="toggle"
-    style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}">
+    <div expand-toggle part="toggle" style="pointer-events:all;visibility:${this.parent ? 'visible' : 'hidden'}">
       <ef-icon part="toggle-icon${this.expanded ? ' toggle-icon-expanded' : ''}" icon="right"></ef-icon>
     </div>
     `;
@@ -78,15 +85,25 @@ let TreeItem = class TreeItem extends ControlElement {
         }
         return html `
     <ef-checkbox
-    part="checkbox"
-    tabindex="-1"
-    .disabled="${this.disabled}"
-    .readonly="${this.readonly}"
-    .indeterminate="${this.indeterminate}"
-    .checked="${this.checked}"
-    style="pointer-events:none"></ef-checkbox>
+      part="checkbox"
+      tabindex="-1"
+      .disabled="${this.disabled}"
+      .readonly="${this.readonly}"
+      .indeterminate="${this.indeterminate}"
+      .checked="${this.checked}"
+      style="pointer-events:none">
+    </ef-checkbox>
     `;
     }
+    /**
+     * Template for rendering the icon
+     */
+    get iconTemplate() {
+        if (typeof this.icon === 'undefined') {
+            return emptyTemplate;
+        }
+        return html `<ef-icon part="label-icon" icon="${this.icon}"></ef-icon>`;
+    }
     /**
      * Is the item fully checked?
      */
@@ -99,26 +116,87 @@ let TreeItem = class TreeItem extends ControlElement {
     get indeterminate() {
         return this.checkedState === CheckedState.INDETERMINATE;
     }
+    /**
+     * Handles aria-checked and aria-selected when mode changes
+     * aria-checked is used for multiple mode due to tri-state support
+     * @returns {void}
+     **/
+    multipleChanged() {
+        this.removeAttribute(this.multiple ? 'aria-selected' : 'aria-checked');
+        this.checkedChanged();
+    }
+    /**
+     * Handles selected and aria attribute changes
+     * @returns {void}
+     */
+    checkedChanged() {
+        switch (this.checkedState) {
+            case CheckedState.CHECKED:
+                this.setAttribute('selected', '');
+                this.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                break;
+            case CheckedState.INDETERMINATE:
+                this.setAttribute('selected', 'indeterminate');
+                this.setAttribute('aria-checked', 'mixed');
+                break;
+            default:
+                this.removeAttribute('selected');
+                // In single mode, only children nodes are selectable
+                if (this.parent && !this.multiple) {
+                    this.removeAttribute('aria-selected');
+                }
+                else {
+                    this.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'false');
+                }
+                break;
+        }
+    }
+    /**
+     * Handles aria-expanded when expanded state changes
+     * @returns {void}
+     */
+    expandedChanged() {
+        if (this.parent) {
+            this.setAttribute('aria-expanded', this.expanded ? 'true' : 'false');
+        }
+    }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.setAttribute('aria-level', String(this.depth + 1));
+    }
+    /**
+     * Invoked whenever the element is updated
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checkedState')) {
-            switch (this.checkedState) {
-                case CheckedState.CHECKED:
-                    this.setAttribute('selected', '');
-                    break;
-                case CheckedState.INDETERMINATE:
-                    this.setAttribute('selected', 'indeterminate');
-                    break;
-                default:
-                    this.removeAttribute('selected');
-            }
+            this.checkedChanged();
+        }
+        if (changedProperties.has('multiple') && changedProperties.get('multiple') !== undefined) {
+            this.multipleChanged();
+        }
+        if (changedProperties.has('expanded')) {
+            this.expandedChanged();
         }
     }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
     render() {
         return html `
       ${this.indentTemplate}
       ${this.toggleTemplate}
       ${this.checkboxTemplate}
+      ${this.iconTemplate}
       <div part="label">
         <slot>${this.label}</slot>
       </div>
@@ -138,11 +216,14 @@ __decorate([
     property({ type: Boolean })
 ], TreeItem.prototype, "expanded", void 0);
 __decorate([
-    property({ reflect: true, type: Number })
+    property({ type: Number, reflect: true })
 ], TreeItem.prototype, "depth", void 0);
 __decorate([
     property({ type: String })
 ], TreeItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TreeItem.prototype, "icon", void 0);
 __decorate([
     property({ attribute: false })
 ], TreeItem.prototype, "item", void 0);
@@ -155,4 +236,3 @@ TreeItem = __decorate([
     })
 ], TreeItem);
 export { TreeItem };
-//# sourceMappingURL=tree-item.js.map

package/lib/tree/elements/tree.d.ts

@@ -1,17 +1,28 @@
 import { JSXInterface } from '../../jsx';
 import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import { List } from '../../list';
-import { TreeRenderer } from '../helpers/renderer';
-import { TreeData, TreeDataItem } from '../helpers/types';
-import { TreeManagerMode } from '../managers/tree-manager';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { List } from '../../list/index.js';
+import { TreeRenderer } from '../helpers/renderer.js';
+import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
+import { TreeManagerMode } from '../managers/tree-manager.js';
 /**
  * Displays a tree structure
  * to be used for menus and group selections
  *
  * @fires value-changed - Fired when the users changed selection item.
+ * @fires expanded-changed - Fired when an item's expanded state has changed.
+ *
+ * @attr {boolean} [stateless=false] - Disable selections
+ * @prop {boolean} [stateless=false] - Disable selections
+ *
  */
 export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T> {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Tree manager used for manipulation
      */
@@ -25,6 +36,16 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      * selection mode is enabled
      */
     noRelation: boolean;
+    /**
+     * Query string applied to tree
+     */
+    query: string;
+    /**
+     * Custom filter for static data
+     * @type {TreeFilter<T> | null}
+     * @ignore set to protected for now and need to discuss before set to public API
+     */
+    protected filter: TreeFilter<T> | null;
     /**
      * Renderer used for generating tree items
      * @type {TreeRenderer}
@@ -45,25 +66,11 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      * @returns {void}
      */
     checkAll(): void;
-    /**
-     * Checks all editable items
-     * @returns {void}
-     * @deprecated
-     * @ignore
-     */
-    selectAll(): void;
     /**
      * Unchecks all editable items
      * @returns {void}
      */
     uncheckAll(): void;
-    /**
-     * Unchecks all editable items
-     * @returns {void}
-     * @deprecated
-     * @ignore
-     */
-    deselectAll(): void;
     /**
      * @override
      * @ignore
@@ -121,10 +128,46 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      * @override
      */
     protected update(changedProperties: PropertyValues): void;
+    /**
+     * Filter the internal items by query changes items' hidden state
+     * @returns {void}
+     */
+    protected filterItems(): void;
+    /**
+     * Utility method
+     * Adds descendants for each item passed
+     * @param items List of child items
+     * @returns {void}
+     */
+    protected addItemDescendantsToRender(items: T[]): void;
+    /**
+     * Utility method
+     * Add nested children of item list
+     * @param items List of items
+     * @param excludeItems List of exclude items
+     * @param [includeHidden=false] Include hidden items
+     * @returns {void}
+     */
+    protected addNestedItemsToRender(items: readonly T[], excludeItems: readonly T[], includeHidden?: boolean): void;
+    /**
+     * Utility method
+     * Adds ancestors for each item passed and expand
+     * @param items List of child items
+     * @returns {void}
+     */
+    protected addExpandedAncestorsToRender(items: T[]): void;
+    /**
+     * Utility method
+     * Adds parent and expands
+     * @param ancestor parent item
+     * @returns {void}
+     */
+    protected addExpandedAncestorToRender(ancestor: T): void;
     /**
      * Selected items in tree
      * @override
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     set values(value: string[]);
@@ -155,4 +198,6 @@ declare global {
       'ef-tree': Partial<Tree> | JSXInterface.HTMLAttributes<Tree>;
     }
   }
-}
+}
+
+export {};

package/lib/tree/elements/tree.js

@@ -1,25 +1,27 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, property, DeprecationNotice } from '@refinitiv-ui/core';
-import { List } from '../../list';
-import { TreeRenderer } from '../helpers/renderer';
-import { TreeManager, TreeManagerMode } from '../managers/tree-manager';
+import { __decorate } from "tslib";
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import { List } from '../../list/index.js';
+import { TreeRenderer } from '../helpers/renderer.js';
+import { defaultFilter } from '../helpers/filter.js';
+import { TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
 const EXPAND_TOGGLE_ATTR = 'expand-toggle';
-const selectAllDeprecation = new DeprecationNotice('selectAll is deprecated, use checkAll instead.');
-const deselectAllDeprecation = new DeprecationNotice('deselectAll is deprecated, use uncheckAll instead.');
 /**
  * Displays a tree structure
  * to be used for menus and group selections
  *
  * @fires value-changed - Fired when the users changed selection item.
+ * @fires expanded-changed - Fired when an item's expanded state has changed.
+ *
+ * @attr {boolean} [stateless=false] - Disable selections
+ * @prop {boolean} [stateless=false] - Disable selections
+ *
  */
 let Tree = class Tree extends List {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'tree';
         /**
          * Tree manager used for manipulation
          */
@@ -33,12 +35,29 @@ let Tree = class Tree extends List {
          * selection mode is enabled
          */
         this.noRelation = false;
+        /**
+         * Query string applied to tree
+         */
+        this.query = '';
+        /**
+         * Custom filter for static data
+         * @type {TreeFilter<T> | null}
+         * @ignore set to protected for now and need to discuss before set to public API
+         */
+        this.filter = defaultFilter(this);
         /**
          * Renderer used for generating tree items
          * @type {TreeRenderer}
          */
         this.renderer = new TreeRenderer(this);
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Expands all groups
      * @returns {void}
@@ -63,16 +82,6 @@ let Tree = class Tree extends List {
         }
         this.manager.checkAllItems();
     }
-    /**
-     * Checks all editable items
-     * @returns {void}
-     * @deprecated
-     * @ignore
-     */
-    selectAll() {
-        selectAllDeprecation.once();
-        this.checkAll();
-    }
     /**
      * Unchecks all editable items
      * @returns {void}
@@ -80,16 +89,6 @@ let Tree = class Tree extends List {
     uncheckAll() {
         this.manager.uncheckAllItems();
     }
-    /**
-     * Unchecks all editable items
-     * @returns {void}
-     * @deprecated
-     * @ignore
-     */
-    deselectAll() {
-        deselectAllDeprecation.once();
-        this.uncheckAll();
-    }
     /**
      * @override
      * @ignore
@@ -124,7 +123,6 @@ let Tree = class Tree extends List {
      */
     dispatchExpandedChangedEvent(item) {
         /**
-        * @fires expanded-changed Fired when an item's expanded state has changed.
         * Property `detail.value` is the current expanded state.
         * Property `detail.item` is the original data item of which the property has been modified.
         */
@@ -240,12 +238,129 @@ let Tree = class Tree extends List {
         if (changedProperties.has('noRelation') || changedProperties.has('multiple')) {
             this.manager.setMode(this.mode);
         }
+        if (changedProperties.has('query') || changedProperties.has('data')) {
+            this.filterItems();
+        }
         super.update(changedProperties);
     }
+    /**
+     * Filter the internal items by query changes items' hidden state
+     * @returns {void}
+     */
+    filterItems() {
+        // if filter is null, it is off and external app is responsible
+        if (this.filter) {
+            const filter = this.filter;
+            const items = this.queryItems((item) => {
+                // Do not filter hidden items
+                if (item.hidden) {
+                    return false;
+                }
+                const result = filter(item);
+                if (result) {
+                    this.manager.includeItem(item);
+                }
+                else {
+                    this.manager.excludeItem(item);
+                }
+                return result;
+            }).slice();
+            // Do not expand tree if there is no filter applied
+            if (this.query) {
+                /**
+                 * Add all descendants of item list to make the descendants
+                 * are accessible which user can navigate into the nested data
+                 */
+                this.addItemDescendantsToRender(items);
+                /**
+                 * Add all parents of item list which they must be shown
+                 * when some descendant is shown.
+                 */
+                this.addExpandedAncestorsToRender(items);
+            }
+        }
+    }
+    /**
+     * Utility method
+     * Adds descendants for each item passed
+     * @param items List of child items
+     * @returns {void}
+     */
+    addItemDescendantsToRender(items) {
+        items.forEach((item) => {
+            /**
+             * Collapse an item to prevent tree show too many nested expanded
+             */
+            if (this.manager.isItemExpanded(item)) {
+                this.manager.collapseItem(item);
+            }
+            /**
+             * show all descendants of items to make them all are selectable
+             * and user can navigate into nested data
+             */
+            const children = this.composer.getItemChildren(item);
+            if (children.length) {
+                this.addNestedItemsToRender(children, items, false);
+            }
+        });
+    }
+    /**
+     * Utility method
+     * Add nested children of item list
+     * @param items List of items
+     * @param excludeItems List of exclude items
+     * @param [includeHidden=false] Include hidden items
+     * @returns {void}
+     */
+    addNestedItemsToRender(items, excludeItems, includeHidden = false) {
+        items.forEach(item => {
+            // Skip hidden and exclude item
+            if (!item.hidden && !excludeItems.includes(item)) {
+                // Add item and nested children
+                this.manager.includeItem(item);
+                const children = this.manager.getItemChildren(item);
+                if (children.length) {
+                    this.addNestedItemsToRender(children, excludeItems, includeHidden);
+                }
+            }
+        });
+    }
+    /**
+     * Utility method
+     * Adds ancestors for each item passed and expand
+     * @param items List of child items
+     * @returns {void}
+     */
+    addExpandedAncestorsToRender(items) {
+        // Establish unique ancestors set
+        const ancestors = new Set();
+        // we iterate each item match so as to find ancestors
+        items.forEach((item) => {
+            // Get the ancestors
+            const parent = this.manager.getItemParent(item);
+            if (parent && !ancestors.has(parent)) {
+                this.manager.getItemAncestors(item).forEach((ancestor) => {
+                    ancestors.add(ancestor); // track ancestors
+                    this.addExpandedAncestorToRender(ancestor);
+                });
+            }
+        });
+    }
+    /**
+     * Utility method
+     * Adds parent and expands
+     * @param ancestor parent item
+     * @returns {void}
+     */
+    addExpandedAncestorToRender(ancestor) {
+        this.manager.includeItem(ancestor);
+        this.manager.expandItem(ancestor);
+    }
     /**
      * Selected items in tree
      * @override
      * @type {string[]}
+     * @default []
      */
     get values() {
         return this.manager.checkedItems.map(item => {
@@ -287,6 +402,9 @@ __decorate([
 __decorate([
     property({ attribute: 'no-relation', type: Boolean })
 ], Tree.prototype, "noRelation", void 0);
+__decorate([
+    property({ type: String })
+], Tree.prototype, "query", void 0);
 __decorate([
     property({ attribute: false })
 ], Tree.prototype, "renderer", void 0);
@@ -294,4 +412,3 @@ Tree = __decorate([
     customElement('ef-tree')
 ], Tree);
 export { Tree };
-//# sourceMappingURL=tree.js.map

package/lib/tree/helpers/filter.d.ts

@@ -0,0 +1,8 @@
+import type { Tree, TreeDataItem } from '../index';
+import type { TreeFilter } from './types';
+/**
+ * Default filter used by tree
+ * @param el Tree instance to filter
+ * @returns Filter accepting an item
+ */
+export declare const defaultFilter: <T extends TreeDataItem = TreeDataItem>(el: Tree<T>) => TreeFilter<T>;

package/lib/tree/helpers/filter.js

@@ -0,0 +1,33 @@
+/**
+ * Default filter used by tree
+ * @param el Tree instance to filter
+ * @returns Filter accepting an item
+ */
+export const defaultFilter = (el) => {
+    // reference query string for validating queryRegExp cache state
+    let query = '';
+    // cache RegExp
+    let queryRegExp;
+    // Get current RegExp, or renew if out of date
+    // this is fetched on demand by filter/renderer
+    // only created once per query
+    const getRegularExpressionOfQuery = () => {
+        if (el.query !== query || !queryRegExp) {
+            query = el.query || '';
+            queryRegExp = new RegExp(query.replace(/(\W)/g, '\\$1'), 'i');
+        }
+        return queryRegExp;
+    };
+    // return scoped custom filter
+    return (item) => {
+        const label = item.label;
+        if (!label) {
+            return false;
+        }
+        const regex = getRegularExpressionOfQuery();
+        const result = regex.test(label);
+        // this regex uses global scope, so the index needs resetting
+        regex.lastIndex = 0;
+        return result;
+    };
+};

package/lib/tree/helpers/renderer.d.ts

@@ -1,5 +1,5 @@
-import { Renderer } from '../../list/renderer';
-import '../elements/tree-item';
+import { Renderer } from '../../list/renderer.js';
+import '../elements/tree-item.js';
 export declare class TreeRenderer extends Renderer {
     constructor(scope?: unknown);
 }

package/lib/tree/helpers/renderer.js

@@ -1,6 +1,6 @@
-import { TreeManager, TreeManagerMode, CheckedState } from '../managers/tree-manager';
-import { Renderer } from '../../list/renderer';
-import '../elements/tree-item';
+import { TreeManager, TreeManagerMode, CheckedState } from '../managers/tree-manager.js';
+import { Renderer } from '../../list/renderer.js';
+import '../elements/tree-item.js';
 export class TreeRenderer extends Renderer {
     constructor(scope) {
         let manager;
@@ -22,6 +22,7 @@ export class TreeRenderer extends Renderer {
             el.parent = composer.getItemChildren(item).length > 0;
             el.expanded = manager.isItemExpanded(item);
             el.checkedState = !multiple && el.parent ? CheckedState.UNCHECKED : manager.getItemCheckedState(item);
+            el.icon = composer.getItemPropertyValue(item, 'icon');
             el.label = composer.getItemPropertyValue(item, 'label');
             el.disabled = composer.getItemPropertyValue(item, 'disabled') === true;
             el.readonly = composer.getItemPropertyValue(item, 'readonly') === true;
@@ -30,4 +31,3 @@ export class TreeRenderer extends Renderer {
         });
     }
 }
-//# sourceMappingURL=renderer.js.map