@refinitiv-ui/elements 7.4.0 → 7.6.0

package/lib/text-field/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, css, html, nothing } from '@refinitiv-ui/core';
+import { FocusedPropertyKey, FormFieldElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
@@ -108,6 +108,17 @@ let TextField = class TextField extends FormFieldElement {
         super.firstUpdated(changedProperties);
         registerOverflowTooltip(this, () => this.inputValue, () => (this.inputElement ? isElementOverflown(this.inputElement) : false));
     }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
+            this.reportValidity();
+        }
+        super.update(changedProperties);
+    }
     /**
      * Called when the element’s DOM has been updated and rendered
      * @param changedProperties Properties that has changed
@@ -116,12 +127,23 @@ let TextField = class TextField extends FormFieldElement {
     updated(changedProperties) {
         super.updated(changedProperties);
         if (this.shouldSyncInputValue(changedProperties)) {
-            this.syncInputValue(changedProperties);
-        }
-        if (this.shouldValidateInput(changedProperties)) {
-            this.validateInput();
+            this.syncInputValue();
         }
     }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
     /**
      * Check if input value should be synchronised with component value
      * @param changedProperties Properties that has changed
@@ -137,26 +159,9 @@ let TextField = class TextField extends FormFieldElement {
      * @param changedProperties Properties that has changed
      * @returns {void}
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    syncInputValue(changedProperties) {
+    syncInputValue() {
         this.inputValue = this.value;
     }
-    /**
-     * Check if input should be re-validated
-     * @param changedProperties Properties that has changed
-     * @returns True if input should be re-validated
-     */
-    /* c8 ignore start */
-    shouldValidateInput(changedProperties) {
-        // TODO: This validation should be refactored
-        return (changedProperties.has('pattern') ||
-            !!(this.pattern && changedProperties.has('value')) ||
-            changedProperties.has('minLength') ||
-            !!(this.minLength && changedProperties.has('value')) ||
-            changedProperties.has('maxLength') ||
-            !!(this.maxLength && changedProperties.has('value')));
-    }
-    /* c8 ignore stop */
     /**
      * Runs on input element `input` event
      * @param event `input` event
@@ -181,14 +186,7 @@ let TextField = class TextField extends FormFieldElement {
     onPossibleValueChange(event) {
         const value = this.inputElement?.value || '';
         this.setValueAndNotify(value);
-    }
-    /**
-     * Uses native `checkValidity()` function to validate input
-     * @returns {void}
-     */
-    validateInput() {
-        const error = !this.inputElement?.checkValidity();
-        this.notifyErrorChange(error);
+        this.reportValidity();
     }
     /**
      * Fires event on `icon` click

package/lib/tree/elements/tree.js

@@ -374,7 +374,7 @@ let Tree = class Tree extends List {
      */
     get values() {
         return this.manager.checkedItems.map((item) => {
-            return this.composer.getItemPropertyValue(item, 'value') || '';
+            return this.composer.getItemPropertyValue(item, 'value') ?? '';
         });
     }
     set values(values) {
@@ -384,9 +384,9 @@ let Tree = class Tree extends List {
         }
         else {
             // Clone value arrays
-            const newValue = [...values].sort().toString();
-            const oldValue = [...this.values].sort().toString();
-            if (newValue !== oldValue) {
+            const newValue = [...values];
+            const oldValue = [...this.values];
+            if (newValue.toString() !== oldValue.toString()) {
                 this.manager.uncheckAllItems();
                 values.some((value) => {
                     this.queryItemsByPropertyValue('value', value).forEach((item) => {

package/lib/tree/managers/tree-manager.d.ts

@@ -24,6 +24,10 @@ export declare class TreeManager<T extends TreeDataItem> {
      * Mode (algorithm) the tree manage is using
      */
     private mode;
+    /**
+     * Last selected item timestamp
+     */
+    private lastSelectedAt?;
     constructor(composer: CollectionComposer<T>, mode?: TreeManagerMode);
     /**
      * Is the manager maintaining parent/child relationships
@@ -42,6 +46,10 @@ export declare class TreeManager<T extends TreeDataItem> {
      * When managing relationships, this excludes groups/parents from the result.
      */
     get checkedItems(): readonly T[];
+    /**
+     * Compare items function order by sequential selected timestamp
+     */
+    protected get orderBySelectedAt(): (itemA: T, itemB: T) => number;
     /**
      * Items which should be visibly displayed.
      * This can be used to render items.

package/lib/tree/managers/tree-manager.js

@@ -47,12 +47,24 @@ export class TreeManager {
      * When managing relationships, this excludes groups/parents from the result.
      */
     get checkedItems() {
-        return this.composer.queryItems((item) => {
+        const items = this.composer.queryItems((item) => {
             if (this.manageRelationships && this.isItemParent(item)) {
                 return false;
             }
             return this.isItemChecked(item);
         }, Infinity);
+        return Object.freeze(items.slice().sort(this.orderBySelectedAt));
+    }
+    /**
+     * Compare items function order by sequential selected timestamp
+     */
+    get orderBySelectedAt() {
+        // Order by sequential selected timestamp
+        return (itemA, itemB) => {
+            const timeA = this.composer.getItemPropertyValue(itemA, 'selectedAt') ?? 0;
+            const timeB = this.composer.getItemPropertyValue(itemB, 'selectedAt') ?? 0;
+            return timeA - timeB;
+        };
     }
     /**
      * Items which should be visibly displayed.
@@ -341,7 +353,13 @@ export class TreeManager {
     }
     _checkItem(item, manageRelationships = this.manageRelationships) {
         if (this.canCheckItem(item)) {
+            // Create unique timestamp base on the latest selection for sequential selection.
+            const timestamp = Date.now();
+            this.lastSelectedAt =
+                this.lastSelectedAt && this.lastSelectedAt >= timestamp ? this.lastSelectedAt + 1 : timestamp;
+            // Set item selected with timestamp
             this.composer.setItemPropertyValue(item, 'selected', true);
+            this.composer.setItemPropertyValue(item, 'selectedAt', this.lastSelectedAt);
             if (manageRelationships) {
                 this.forceUpdateOnPath(item);
                 this.getItemDescendants(item).forEach((descendant) => this._checkItem(descendant, false));

package/lib/tree-select/index.d.ts

@@ -59,7 +59,11 @@ export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
     /**
      * Extracted values from {@link this.checkedGroupedItems}
      */
-    protected pillsData: TreeSelectDataItem[];
+    protected pillsData: Readonly<TreeSelectDataItem[]>;
+    /**
+     * Cache old selection timestamps for revert selected timestamps when cancel selection
+     */
+    protected oldSelection: Map<string, number | undefined>;
     /**
      * Are there pills visible
      */
@@ -207,10 +211,15 @@ export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
      */
     protected persistSelection(): void;
     /**
-     * Reverse selection. Run on Esc or Cancel
+     * Revert modified selection to old values. Run on Esc or Cancel
+     * @returns {void}
+     */
+    protected revertModifiedSelection(): void;
+    /**
+     * Revert all selected timestamps to the previous state which affect to item sorting
      * @returns {void}
      */
-    protected cancelSelection(): void;
+    protected revertSelectionTimestamps(): void;
     /**
      * Update memoized track
      *

package/lib/tree-select/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { css, html, nothing, triggerResize } from '@refinitiv-ui/core';
+import { WarningNotice, css, html, nothing, triggerResize } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
@@ -21,6 +21,7 @@ import { VERSION } from '../version.js';
 export { TreeSelectRenderer };
 const MEMO_THROTTLE = 16;
 const POPUP_POSITION = ['bottom-start', 'top-start'];
+const valueFormatWarning = new WarningNotice("The specified 'values' format does not conform to the required format.");
 /**
  * Dropdown control that allows selection from the tree list
  *
@@ -65,6 +66,10 @@ let TreeSelect = class TreeSelect extends ComboBox {
          * Extracted values from {@link this.checkedGroupedItems}
          */
         this.pillsData = [];
+        /**
+         * Cache old selection timestamps for revert selected timestamps when cancel selection
+         */
+        this.oldSelection = new Map();
         /**
          * Are there pills visible
          */
@@ -165,8 +170,26 @@ let TreeSelect = class TreeSelect extends ComboBox {
         return this._values;
     }
     set values(values) {
-        super.values = values;
-        this._values = values;
+        if (!Array.isArray(values)) {
+            valueFormatWarning.show();
+            this.values = [];
+            return;
+        }
+        // Update the selection state when found new value
+        const newValues = values.slice(0, this.multiple ? values.length : 1);
+        const oldValues = this.values.slice();
+        if (newValues.toString() !== oldValues.toString()) {
+            this._values = values;
+            this.updateComposerValues(values);
+            this.updatePills();
+            if (this.freeText) {
+                // free text mode is only supported in single selection mode
+                // so if there is no valid selection in the composer, we can assume
+                // the first item can be used as the free text item.
+                this.freeTextValue = !this.composerValues.length ? newValues[0] : '';
+            }
+            this.requestUpdate('values', oldValues);
+        }
     }
     /**
      * Set maximum number of selected items
@@ -228,7 +251,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @override
      */
     get selectedLabels() {
-        return this.checkedGroupedItems.map((selected) => this.getItemPropertyValue(selected, 'label') || '');
+        return this.checkedGroupedItems.map((selected) => this.getItemPropertyValue(selected, 'label') ?? '');
     }
     /**
      * Returns memoized selected state
@@ -332,29 +355,37 @@ let TreeSelect = class TreeSelect extends ComboBox {
      * @returns {void}
      */
     persistSelection() {
-        const oldValues = this.values.slice();
+        const oldValues = this.values;
         const newValues = this.composerValues;
-        const oldComparison = oldValues.sort().toString();
-        const newComparison = newValues.sort().toString();
-        if (oldComparison !== newComparison) {
+        if (oldValues.toString() !== newValues.toString()) {
+            // Set new values order by sequential selection
             this.values = newValues;
             this.notifyPropertyChange('value', this.value);
         }
     }
     /**
-     * Reverse selection. Run on Esc or Cancel
+     * Revert modified selection to old values. Run on Esc or Cancel
      * @returns {void}
      */
-    cancelSelection() {
-        const oldValues = this.values.slice();
+    revertModifiedSelection() {
+        const oldValues = this.values;
         const newValues = this.composerValues;
-        const oldComparison = oldValues.sort().toString();
-        const newComparison = newValues.sort().toString();
-        if (oldComparison !== newComparison) {
-            // revert selected item by updating the collection composer
-            this.updateComposerValues(this._values);
+        if (oldValues.toString() !== newValues.toString()) {
+            // Revert selected item by updating the collection composer
+            this.updateComposerValues(oldValues);
         }
     }
+    /**
+     * Revert all selected timestamps to the previous state which affect to item sorting
+     * @returns {void}
+     */
+    revertSelectionTimestamps() {
+        this.selection.forEach((item) => {
+            const oldSelectedAt = this.oldSelection.get(item.value);
+            this.composer.setItemPropertyValue(item, 'selectedAt', oldSelectedAt);
+        });
+        this.oldSelection.clear(); // Clear cache old selection
+    }
     /**
      * Update memoized track
      *
@@ -419,6 +450,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
         const event = new CustomEvent('cancel');
         this.dispatchEvent(event);
         if (!event.defaultPrevented) {
+            this.revertSelectionTimestamps();
             this.closeAndReset();
             // reset always happens on popup close action
         }
@@ -487,6 +519,10 @@ let TreeSelect = class TreeSelect extends ComboBox {
     onPopupOpened() {
         super.onPopupOpened();
         this.clearSelectionFilter();
+        // Cache current selection timestamps for reverting modified selection when user cancel
+        this.selection.forEach((item) => {
+            this.oldSelection.set(item.value, this.getItemPropertyValue(item, 'selectedAt'));
+        });
         this.updatePills();
         this.updateMemo();
     }
@@ -503,9 +539,8 @@ let TreeSelect = class TreeSelect extends ComboBox {
      */
     onPopupClosed() {
         super.onPopupClosed();
-        this.updateMemo();
-        this.cancelSelection();
-        this.exitEditSelection();
+        this.exitEditSelection(); // selection filter should be removed before reverting modified selection
+        this.revertModifiedSelection();
     }
     /**
      * Filter the internal items by query. Changes items' hidden state.
@@ -733,7 +768,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
      */
     updatePills() {
         if (this.showPills) {
-            this.pillsData = this.checkedGroupedItems.slice();
+            this.pillsData = this.checkedGroupedItems;
             this.hasPills = !!this.pillsData.length;
         }
     }

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.4.0';
+export const VERSION = '7.6.0';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.4.0",
+  "version": "7.6.0",
   "description": "Element Framework Elements",
-  "author": "Refinitiv",
+  "author": "LSEG",
   "license": "Apache-2.0",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
@@ -341,8 +341,8 @@
   },
   "dependencies": {
     "@lit-labs/context": "^0.3.1",
-    "@refinitiv-ui/halo-theme": "^7.1.0",
-    "@refinitiv-ui/solar-theme": "^7.1.0",
+    "@refinitiv-ui/halo-theme": "^7.1.1",
+    "@refinitiv-ui/solar-theme": "^7.1.1",
     "chart.js": "^4.3.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
@@ -351,25 +351,25 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^7.1.0",
-    "@refinitiv-ui/demo-block": "^7.0.5",
-    "@refinitiv-ui/i18n": "^7.0.3",
-    "@refinitiv-ui/phrasebook": "^7.0.3",
-    "@refinitiv-ui/test-helpers": "^7.0.3",
-    "@refinitiv-ui/translate": "^7.0.3",
-    "@refinitiv-ui/utils": "^7.0.3",
+    "@refinitiv-ui/core": "^7.2.0",
+    "@refinitiv-ui/demo-block": "^7.0.6",
+    "@refinitiv-ui/i18n": "^7.0.4",
+    "@refinitiv-ui/phrasebook": "^7.0.4",
+    "@refinitiv-ui/test-helpers": "^7.0.4",
+    "@refinitiv-ui/translate": "^7.0.4",
+    "@refinitiv-ui/utils": "^7.1.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
     "@refinitiv-ui/browser-sparkline": "^1.0.0 || ^2.0.0",
-    "@refinitiv-ui/core": "^7.1.0",
-    "@refinitiv-ui/i18n": "^7.0.3",
-    "@refinitiv-ui/phrasebook": "^7.0.3",
-    "@refinitiv-ui/translate": "^7.0.3",
-    "@refinitiv-ui/utils": "^7.0.3"
+    "@refinitiv-ui/core": "^7.2.0",
+    "@refinitiv-ui/i18n": "^7.0.4",
+    "@refinitiv-ui/phrasebook": "^7.0.4",
+    "@refinitiv-ui/translate": "^7.0.4",
+    "@refinitiv-ui/utils": "^7.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d220dde5331f239eb4d3ca99ed4972ff3d290f9a"
+  "gitHead": "4b172b7204c0d71ba30a01777ec1a00d0e35996a"
 }