@refinitiv-ui/elements 5.11.0 → 5.12.0-alpha.0

package/lib/tree/elements/tree.js

@@ -1,414 +0,0 @@
-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';
-/**
- * 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
-         */
-        this.manager = new TreeManager(this.composer);
-        /**
-         * Allows multiple items to be selected
-         */
-        this.multiple = false;
-        /**
-         * Breaks the relationship when multiple
-         * 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}
-     */
-    expandAll() {
-        this.manager.expandAllItems();
-    }
-    /**
-     * Collapses all groups
-     * @returns {void}
-     */
-    collapseAll() {
-        this.manager.collapseAllItems();
-    }
-    /**
-     * Checks all editable items
-     * @returns {void}
-     */
-    checkAll() {
-        if (!this.multiple) {
-            throw new RangeError('You cannot check all items in single selection mode');
-        }
-        this.manager.checkAllItems();
-    }
-    /**
-     * Unchecks all editable items
-     * @returns {void}
-     */
-    uncheckAll() {
-        this.manager.uncheckAllItems();
-    }
-    /**
-     * @override
-     * @ignore
-     */
-    selectItem(item) {
-        // Stateless tree
-        if (this.stateless) {
-            return false;
-        }
-        // Multiple selection
-        if (this.multiple) {
-            return this.manager.toggleItem(item);
-        }
-        // Single selection - expand/collapse group (parent)
-        if (this.manager.isItemParent(item)) {
-            this.toggleExpandedState(item);
-            return false;
-        }
-        // Single selection - check item
-        if (this.manager.checkItem(item)) {
-            this.manager.checkedItems.forEach(checkedItem => {
-                checkedItem !== item && this.manager.uncheckItem(checkedItem);
-            });
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Dispatches an event, detailing which item has recently changed it's expanded state.
-     * @param item Data item of which the expanded property changed
-     * @returns {void}
-     */
-    dispatchExpandedChangedEvent(item) {
-        /**
-        * Property `detail.value` is the current expanded state.
-        * Property `detail.item` is the original data item of which the property has been modified.
-        */
-        const event = new CustomEvent('expanded-changed', {
-            bubbles: false,
-            cancelable: false,
-            composed: true,
-            detail: {
-                value: this.manager.isItemExpanded(item),
-                item
-            }
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Handles tap event when composed path contains
-     * an element with an `expand-toggle` attribute.
-     * @param event Tap event to try and handle
-     * @returns True or False depending if the event was handled
-     */
-    handleExpandCollapse(event) {
-        const containsToggle = event.composedPath().some((target) => target instanceof HTMLElement && target.hasAttribute(EXPAND_TOGGLE_ATTR));
-        const itemElement = containsToggle && this.findItemElementFromTarget(event.target);
-        const item = itemElement && this.itemFromElement(itemElement);
-        if (item) {
-            this.toggleExpandedState(item);
-            return true;
-        }
-        return false;
-    }
-    /**
-     * @override
-     */
-    onTap(event) {
-        if (this.handleExpandCollapse(event)) {
-            return;
-        }
-        super.onTap(event);
-    }
-    /**
-     * @override
-     */
-    onKeyDown(event) {
-        switch (event.key) {
-            case 'Left':
-            case 'ArrowLeft':
-                this.left();
-                break;
-            case 'Right':
-            case 'ArrowRight':
-                this.right();
-                break;
-            default:
-                return super.onKeyDown(event);
-        }
-        event.preventDefault();
-    }
-    /**
-     * Performs left arrow keyboard action,
-     * collapsing a group item if possible.
-     * @returns {void}
-     */
-    left() {
-        const item = this.highlightElement && this.itemFromElement(this.highlightElement);
-        if (item && this.manager.isItemExpanded(item)) {
-            this.manager.collapseItem(item);
-            this.dispatchExpandedChangedEvent(item);
-        }
-    }
-    /**
-     * Performs right arrow keyboard action,
-     * expanding a group item if possible.
-     * @returns {void}
-     */
-    right() {
-        const item = this.highlightElement && this.itemFromElement(this.highlightElement);
-        if (item && !this.manager.isItemExpanded(item)) {
-            this.manager.expandItem(item);
-            this.dispatchExpandedChangedEvent(item);
-        }
-    }
-    /**
-     * Toggles the expanded state of an item.
-     * Executed when a user taps on an item to expand/collapse the group.
-     * @param item Original data item
-     * @returns {void}
-     */
-    toggleExpandedState(item) {
-        if (this.manager.isItemExpanded(item)) {
-            this.manager.collapseItem(item);
-        }
-        else {
-            this.manager.expandItem(item);
-        }
-        this.dispatchExpandedChangedEvent(item);
-    }
-    /**
-     * @override
-     */
-    queryItems(engine) {
-        return this.composer.queryItems(engine, Infinity);
-    }
-    /**
-     * @override
-     */
-    queryItemsByPropertyValue(property, value) {
-        return this.composer.queryItemsByPropertyValue(property, value, Infinity);
-    }
-    /**
-     * @override
-     */
-    update(changedProperties) {
-        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 => {
-            return this.composer.getItemPropertyValue(item, 'value') || '';
-        });
-    }
-    set values(value) {
-        super.values = value;
-    }
-    /**
-     * Data object to be used for creating tree
-     * @override
-     * @type {TreeData<T>}
-     */
-    get data() {
-        return super.data;
-    }
-    set data(data) {
-        super.data = data;
-        this.manager = new TreeManager(this.composer, this.mode);
-    }
-    /**
-     * @override
-     */
-    get renderItems() {
-        return this.manager.visibleItems;
-    }
-    /**
-     * Mode to use in the tree manager
-     */
-    get mode() {
-        return !this.multiple || !this.noRelation
-            ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], Tree.prototype, "multiple", void 0);
-__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);
-Tree = __decorate([
-    customElement('ef-tree')
-], Tree);
-export { Tree };

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

@@ -1,8 +0,0 @@
-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

@@ -1,33 +0,0 @@
-/**
- * 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 +0,0 @@
-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,33 +0,0 @@
-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;
-        let currentMode;
-        let currentComposer;
-        super((item, composer, element = document.createElement('ef-tree-item')) => {
-            const el = element;
-            const multiple = !!scope && scope.multiple === true;
-            const noRelation = !!scope && scope.noRelation === true;
-            const mode = !multiple || !noRelation ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
-            if (currentComposer !== composer || currentMode !== mode) {
-                currentMode = mode;
-                currentComposer = composer;
-                manager = new TreeManager(composer, mode);
-            }
-            el.multiple = multiple;
-            el.item = item;
-            el.depth = composer.getItemDepth(item);
-            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;
-            el.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
-            return el;
-        });
-    }
-}

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

@@ -1,25 +0,0 @@
-import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection';
-export declare type TreeData<T extends TreeDataItem = TreeDataItem> = T[] | CollectionComposer<T> | null;
-export interface TreeDataItem extends DataItem {
-    /**
-     * Icon to show, when rendering the item.
-     */
-    icon?: string;
-    /**
-     * Label to show, when rendering the item.
-     */
-    label?: string;
-    /**
-     * Expanded state of child items.
-     * If `true`, child items will be visible
-     */
-    expanded?: boolean;
-}
-/**
- * Predicate callback
- * Matches item against filter function
- *
- * @param item Item to filter
- * @return Does item match filter
- */
-export declare type TreeFilter<T extends TreeDataItem = TreeDataItem> = (item: T) => boolean;

package/lib/tree/helpers/types.js

@@ -1 +0,0 @@
-export {};

package/lib/tree/index.d.ts

@@ -1,4 +0,0 @@
-export * from './elements/tree.js';
-export * from './elements/tree-item.js';
-export { TreeRenderer } from './helpers/renderer.js';
-export type { TreeData, TreeDataItem } from './helpers/types';

package/lib/tree/index.js

@@ -1,3 +0,0 @@
-export * from './elements/tree.js';
-export * from './elements/tree-item.js';
-export { TreeRenderer } from './helpers/renderer.js';