@refinitiv-ui/elements 6.0.1 → 6.0.2

package/lib/list/elements/list.js

@@ -0,0 +1,632 @@
+import { __decorate } from "tslib";
+import { ControlElement, css, html, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { VERSION } from '../../version.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { getItemId } from '../helpers/item-id.js';
+import { ListRenderer } from '../helpers/renderer.js';
+import './list-item.js';
+/**
+ * Key direction
+ */
+var Direction;
+(function (Direction) {
+    Direction[Direction["UP"] = -1] = "UP";
+    Direction[Direction["DOWN"] = 1] = "DOWN";
+})(Direction || (Direction = {}));
+const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.');
+/**
+ * Provides listing and immutable selection
+ * @fires value-changed - Dispatched when value changes
+ */
+let List = class List extends ControlElement {
+    constructor() {
+        super(...arguments);
+        this.defaultRole = 'listbox';
+        /**
+         * Used to timestamp renders.
+         * This enables diff checking against item updates,
+         * rendering only items which have updated since the last render cycle.
+         */
+        this.renderTimestamp = new Map();
+        /**
+         * Requests an update after a composer modification.
+         * @returns Update promise.
+         */
+        this.modificationUpdate = () => {
+            this.requestUpdate();
+        };
+        /**
+         * Item map; used to link element nodes to data items.
+         */
+        this.itemMap = new Map();
+        /**
+         * Element map; used to link data items to element nodes.
+         */
+        this.elementMap = new Map();
+        /**
+         * Composer used to query and modify item state.
+         */
+        this.composer = new CollectionComposer([]);
+        /**
+         * Element focus delegation.
+         * Set to `false` and relies on native focusing.
+         */
+        this.delegatesFocus = false;
+        /**
+         * Renderer used to render list item elements
+         * @type {ListRenderer}
+         */
+        this.renderer = new ListRenderer(this);
+        /**
+         * Disable selections
+         */
+        this.stateless = false;
+        /**
+         * Allow multiple selections
+         */
+        this.multiple = false;
+        this._data = null;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * The data object, used to render the list.
+     * @type {ListData}
+     * @default null
+     */
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        const oldValue = this._data;
+        if (oldValue === value) {
+            return;
+        }
+        if (value instanceof CollectionComposer) {
+            this.composer = value;
+        }
+        else if (Array.isArray(value)) {
+            this.composer = new CollectionComposer(value);
+        }
+        else {
+            this.composer = new CollectionComposer([]);
+        }
+        this.composer.on('modification', // Listen for modifications
+        this.modificationUpdate // Update the template
+        );
+        this.clearMaps();
+        this._data = value;
+        this.requestUpdate('data', oldValue);
+    }
+    /**
+     * Returns the first selected item value.
+     * Use `values` when multiple selection mode is enabled.
+     * @default -
+     */
+    get value() {
+        return this.values[0] || '';
+    }
+    set value(value) {
+        const oldValue = this.value;
+        if (value !== oldValue || this.values.length > 1) {
+            this.clearSelection();
+            const item = this.queryItemsByPropertyValue('value', value)[0];
+            if (item) {
+                this.composer.setItemPropertyValue(item, 'selected', true);
+            }
+            this.requestUpdate('value', oldValue);
+        }
+    }
+    /**
+     * Returns a values collection of the currently
+     * selected item values
+     * @type {string[]}
+     * @default []
+     * @readonly
+     */
+    get values() {
+        return this.queryItemsByPropertyValue('selected', true)
+            .map((item) => this.composer.getItemPropertyValue(item, 'value'));
+    }
+    set values(values) {
+        if (!Array.isArray(values)) {
+            valueFormatWarning.show();
+            this.values = [];
+        }
+        else {
+            // Clone value arrays
+            const newValue = values.slice();
+            const oldValue = this.values.slice();
+            newValue.sort();
+            oldValue.sort();
+            // Create comparison strings to check for differences
+            const newComparison = newValue.toString();
+            const oldComparison = oldValue.toString();
+            // Should we update the selection state?
+            if (newComparison !== oldComparison) {
+                this.clearSelection();
+                values.some((value) => {
+                    const matches = this.queryItemsByPropertyValue('value', value);
+                    matches.forEach((match) => this.composer.setItemPropertyValue(match, 'selected', true));
+                    return !this.multiple; // Only set the fist value if multiple is not enabled
+                });
+                this.requestUpdate('values', oldValue);
+            }
+        }
+    }
+    /**
+     * Selects an item in the list
+     * @param item Data Item or Item Element
+     * @returns If a selection has been made or not
+     */
+    selectItem(item) {
+        if (!this.stateless) {
+            if (item instanceof HTMLElement) {
+                item = this.itemFromElement(item);
+            }
+            if (item && this.multiple) {
+                const value = this.composer.getItemPropertyValue(item, 'selected');
+                this.composer.setItemPropertyValue(item, 'selected', !value);
+                return true;
+            }
+            if (item && this.composer.getItemPropertyValue(item, 'selected') !== true) {
+                this.clearSelection();
+                this.composer.setItemPropertyValue(item, 'selected', true);
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Navigate up through the list items
+     * @returns {void}
+     */
+    up() {
+        this.highlightItem(this.getNextHighlightItem(Direction.UP), true);
+    }
+    /**
+     * Navigate down through the list items
+     * @returns {void}
+     */
+    down() {
+        this.highlightItem(this.getNextHighlightItem(Direction.DOWN), true);
+    }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    first() {
+        const firstItem = this.itemMap.get(this.tabbableItems[0]);
+        this.highlightItem(firstItem, true);
+    }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    last() {
+        const lastItem = this.itemMap.get(this.tabbableItems[this.tabbableItems.length - 1]);
+        this.highlightItem(lastItem, true);
+    }
+    /**
+     * Proxy for querying the composer
+     * @param engine composer querying engine
+     * @returns Collection of queried items
+     */
+    queryItems(engine) {
+        return this.composer.queryItems(engine);
+    }
+    /**
+     * Proxy for querying the composer by property and value
+     * @param name Property name
+     * @param value Property value
+     * @returns Collection of queried items
+     */
+    queryItemsByPropertyValue(name, value) {
+        return this.composer.queryItemsByPropertyValue(name, value);
+    }
+    /**
+     * Gets the associated element for the data item provided,
+     * if there is one available.
+     * @param item Item to map element to
+     * @returns Associated element
+     */
+    elementFromItem(item) {
+        return this.elementMap.get(item);
+    }
+    /**
+     * Gets the associated data item for the provided element,
+     * if there is one available.
+     * @param element Element to map item to
+     * @returns Associated date item
+     */
+    itemFromElement(element) {
+        return this.itemMap.get(element);
+    }
+    /**
+     * Tries to find the next focusable element.
+     * @param direction Direction to search
+     * @param element Starting element
+     * @returns Next logical element to focus
+     */
+    getNextFocusableItem(direction, element) {
+        if (!element) {
+            return;
+        }
+        const children = this.tabbableItems;
+        if (children.length > 1) {
+            let index = children.indexOf(element) + direction;
+            if (index < 0) {
+                index = children.length - 1;
+            }
+            else if (index >= children.length) {
+                index = 0;
+            }
+            return children[index];
+        }
+    }
+    /**
+     * Tries to find the next highlight item
+     * @param direction Direction to search
+     * @returns A data item, if found.
+     */
+    getNextHighlightItem(direction) {
+        const highlightItem = this.queryItemsByPropertyValue('highlighted', true)[0];
+        const nextElement = this.getNextFocusableItem(direction) || this.getNextFocusableItem(direction, this.elementFromItem(highlightItem));
+        const backupElement = this.tabbableItems[0];
+        if (nextElement) {
+            return this.itemFromElement(nextElement);
+        }
+        else if (backupElement) {
+            return this.itemFromElement(backupElement);
+        }
+        return undefined;
+    }
+    /**
+     * Clears any highlighted item
+     * @returns {void}
+     */
+    clearHighlighted() {
+        this.queryItemsByPropertyValue('highlighted', true)
+            .forEach(item => this.composer.setItemPropertyValue(item, 'highlighted', false));
+    }
+    /**
+     * Highlights a single item.
+     * Used for navigation.
+     * @param item Item to highlight
+     * @param scrollToItem Scroll the item into view?
+     * @returns {void}
+     */
+    highlightItem(item, scrollToItem = false) {
+        if (item) {
+            this.clearHighlighted();
+            this.composer.setItemPropertyValue(item, 'highlighted', true);
+            if (this.tabIndex >= 0) {
+                const id = getItemId(this.renderer.key, item.value);
+                this.setAttribute('aria-activedescendant', id);
+            }
+            scrollToItem && this.scrollToItem(item);
+        }
+    }
+    /**
+     * Gets the available tabbable elements
+     */
+    get tabbableItems() {
+        return Array.from(this.children).filter((item) => {
+            if (item instanceof HTMLElement) {
+                const role = item.getAttribute('role');
+                const isEnabled = !item.hasAttribute('disabled');
+                const isOption = role ? ['option', 'treeitem'].includes(role) : false;
+                return isOption && isEnabled;
+            }
+            return false;
+        });
+    }
+    /**
+     * Returns the current focused element
+     */
+    get highlightElement() {
+        const item = this.queryItemsByPropertyValue('highlighted', true)[0];
+        return this.elementFromItem(item) || null;
+    }
+    /**
+     * Tries to select the current highlighted element
+     * @returns {void}
+     */
+    triggerActiveItem() {
+        const element = this.highlightElement;
+        const item = element && this.itemFromElement(element);
+        item && this.selectItem(item) && this.fireSelectionUpdate();
+    }
+    /**
+     * Scroll to list item element
+     * @param item Data item to scroll to
+     * @returns {void}
+     */
+    scrollToItem(item) {
+        const element = this.elementFromItem(item);
+        if (element) {
+            const minPosition = this.scrollTop;
+            const maxPosition = this.scrollTop + this.clientHeight - element.offsetHeight;
+            const position = element.offsetTop;
+            let scrollPosition;
+            if (position > maxPosition) {
+                scrollPosition = element.offsetTop - this.clientHeight + element.offsetHeight;
+            }
+            else if (position < minPosition) {
+                scrollPosition = element.offsetTop;
+            }
+            if (scrollPosition) {
+                this.scrollTop = scrollPosition;
+            }
+        }
+    }
+    /**
+     * Handles key input
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case ' ':
+            case 'Spacebar':
+            case 'Enter':
+                this.triggerActiveItem();
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.up();
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                this.down();
+                break;
+            case 'Home':
+                this.first();
+                break;
+            case 'End':
+                this.last();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Handle list on tap
+     * Typically it will select an item
+     * @param event Event to handle
+     * @returns {void}
+     */
+    onTap(event) {
+        const element = this.findItemElementFromTarget(event.target);
+        const item = element && this.itemFromElement(element);
+        if (item) {
+            this.highlightItem(item);
+            if (this.selectItem(item)) {
+                this.fireSelectionUpdate();
+            }
+        }
+    }
+    /**
+     * Handles mouse move
+     * Typically it will highlight an item
+     * @param event Event to handle
+     * @returns {void}
+     */
+    onMouse(event) {
+        const element = this.findItemElementFromTarget(event.target);
+        const item = element && this.itemFromElement(element);
+        if (item && element !== this.highlightElement) {
+            this.highlightItem(item);
+        }
+    }
+    /**
+     * Handles item focus out
+     * Typically it will remove highlighting
+     * @returns {void}
+     */
+    onBlur() {
+        this.clearHighlighted();
+        this.removeAttribute('aria-activedescendant');
+    }
+    /**
+     * Tries to find a known item element,
+     * from an event target
+     * @param target Event target
+     * @returns Found element, if available
+     */
+    findItemElementFromTarget(target) {
+        let element = target;
+        while (element) {
+            if (this.itemMap.has(element)) {
+                break; // known rendered item
+            }
+            element = element.parentElement;
+        }
+        return element;
+    }
+    /**
+     * Clears the current selected items
+     * @returns {void}
+     */
+    clearSelection() {
+        this.queryItemsByPropertyValue('selected', true)
+            .forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
+        this.requestUpdate();
+    }
+    /**
+     * Queries and returns all renderable items.
+     * @returns Collection of renderable items
+     */
+    get renderItems() {
+        return this.queryItems((item, composer) => {
+            return composer.getItemPropertyValue(item, 'hidden') !== true;
+        });
+    }
+    /**
+     * Proxy for creating list item elements.
+     * Allows for a mapping to be created between
+     * Data Item and Item Element.
+     * @param item Data item context
+     * @param recyclableElements Child elements available for reuse
+     * @returns List item element
+     */
+    createListItem(item, recyclableElements) {
+        const cachedElement = this.elementFromItem(item);
+        const previousTimestamp = this.renderTimestamp.get(item) || NaN;
+        if (cachedElement && previousTimestamp > this.composer.getItemTimestamp(item)) {
+            return cachedElement; // don't re-render if the item hasn't changed
+        }
+        if (!cachedElement && recyclableElements.length) {
+            // Remove any old ties with the reusable element.
+            const recycledElement = recyclableElements.pop();
+            const previousItem = this.itemFromElement(recycledElement);
+            this.itemMap.delete(recycledElement);
+            previousItem && this.elementMap.delete(previousItem);
+            this.elementMap.set(item, recycledElement);
+        }
+        const freshElement = this.renderer(item, this.composer, this.elementFromItem(item));
+        if (cachedElement && cachedElement !== freshElement) {
+            // Renderer returned a new element, so remove the old link.
+            this.itemMap.delete(cachedElement);
+        }
+        this.itemMap.set(freshElement, item); // Link element to item
+        this.elementMap.set(item, freshElement); // Link item to element
+        this.renderTimestamp.set(item, performance.now());
+        return freshElement;
+    }
+    /**
+     * Clears all item-element and timestamp maps
+     * @returns {void}
+     */
+    clearMaps() {
+        this.itemMap.clear();
+        this.elementMap.clear();
+        this.renderTimestamp.clear();
+    }
+    /**
+     * Fire value changed event
+     * @returns {void}
+     */
+    fireSelectionUpdate() {
+        /**
+         * @event List#value-changed
+         */
+        this.notifyPropertyChange('value', this.value);
+    }
+    /**
+     * Calculates what elements can be recycled safely
+     * @param renderItems Current items to render
+     * @returns Collection of elements to be recycled
+     */
+    calculateRecyclableElements(renderItems) {
+        const result = [];
+        for (const element of this.children) {
+            const item = this.itemFromElement(element);
+            if (item && !renderItems.includes(item)) {
+                result.push(element);
+            }
+        }
+        return result;
+    }
+    /**
+     * Renders updates to light DOM
+     * @returns {void}
+     */
+    renderLightDOM() {
+        const renderItems = this.renderItems;
+        const currentChildren = Array.from(this.children);
+        const recyclableElements = this.calculateRecyclableElements(renderItems);
+        const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
+        const deletions = currentChildren.filter(element => !renderChildren.includes(element));
+        deletions.forEach(element => this.removeChild(element));
+        renderChildren.forEach((element, index) => {
+            if (this.children.length === index) {
+                this.appendChild(element);
+            }
+            else if (element !== this.children[index]) {
+                this.insertBefore(element, this.children[index]);
+            }
+        });
+    }
+    /**
+     * Invoked when the element is first updated. Implement to perform one time work on the element after update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
+    firstUpdated(changeProperties) {
+        super.firstUpdated(changeProperties);
+        this.addEventListener('keydown', this.onKeyDown);
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('mousemove', this.onMouse);
+        this.addEventListener('mouseleave', this.clearHighlighted);
+        this.addEventListener('focusout', this.onBlur);
+    }
+    /**
+     * Invoked before update() to compute values needed during the update.
+     * @param changeProperties changed properties
+     * @returns {void}
+     */
+    willUpdate(changeProperties) {
+        if (changeProperties.has('multiple')) {
+            this.renderTimestamp.clear(); // force render of all items
+            this.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+        }
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+        max-height: 600px;
+        overflow-y: auto;
+        position: relative; /* required for scrollToItem */
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        this.renderLightDOM();
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Function, attribute: false })
+], List.prototype, "renderer", void 0);
+__decorate([
+    property({ type: Boolean })
+], List.prototype, "stateless", void 0);
+__decorate([
+    property({ type: Boolean })
+], List.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: false })
+], List.prototype, "data", null);
+__decorate([
+    property({ type: String })
+], List.prototype, "value", null);
+__decorate([
+    property({ type: Array, attribute: false })
+], List.prototype, "values", null);
+List = __decorate([
+    customElement('ef-list', {
+        alias: 'coral-list'
+    })
+], List);
+export { List };

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

@@ -1,4 +1,3 @@
-import '../../item/index.js';
 import { Renderer } from '../renderer.js';
 /**
  * Renders list items as `ef-item` elements.

package/lib/list/helpers/renderer.js

@@ -1,5 +1,4 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
-import '../../item/index.js';
 import { getItemId } from './item-id.js';
 import { Renderer } from '../renderer.js';
 /**
@@ -15,7 +14,7 @@ export class ListRenderer extends Renderer {
             /**
              * Element to render
              */
-            const el = (element || document.createElement('ef-item'));
+            const el = (element || document.createElement('ef-list-item'));
             /**
              * Tooltip value to be used, if any.
              */
@@ -32,7 +31,6 @@ export class ListRenderer extends Renderer {
             el.type = composer.getItemPropertyValue(item, 'type');
             el.multiple = !!context && context.multiple === true;
             const itemRole = el.type === 'text' || !el.type ? 'option' : 'presentation';
-            el.tabIndex = -1;
             el.setAttribute('role', itemRole);
             tooltip ? el.setAttribute('title', tooltip) : el.removeAttribute('title');
             return el;