@refinitiv-ui/elements 7.11.1 → 7.12.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.12.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.11.1...@refinitiv-ui/elements@7.12.0) (2024-06-10)
+
+### Features
+
+- **time-picker:** add build-in validation for partial input value ([#1165](https://github.com/Refinitiv/refinitiv-ui/issues/1165)) ([bb43ab7](https://github.com/Refinitiv/refinitiv-ui/commit/bb43ab7b5c718d7d7ae5b4f18bc4eaf3857ee5a6))
+- **tree:** enable custom filter of query ([#1169](https://github.com/Refinitiv/refinitiv-ui/issues/1169)) ([c9ef6b6](https://github.com/Refinitiv/refinitiv-ui/commit/c9ef6b68683f95f31550d6371b8d0f05613f96cd))
+
 ## [7.11.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.11.0...@refinitiv-ui/elements@7.11.1) (2024-05-20)
 
 ### Bug Fixes

package/lib/combo-box/helpers/filter.js

@@ -32,8 +32,6 @@ export const createDefaultFilter = (el) => {
         }
         const regex = getRegularExpressionOfQuery();
         const result = regex.test(label);
-        // this example uses global scope, so the index needs resetting
-        regex.lastIndex = 0;
         return result;
     };
 };

package/lib/combo-box/index.js

@@ -1136,10 +1136,10 @@ let ComboBox = class ComboBox extends FormFieldElement {
     }
 };
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], ComboBox.prototype, "filter", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], ComboBox.prototype, "renderer", void 0);
 __decorate([
     property({ type: Boolean })

package/lib/datetime-picker/index.d.ts

@@ -228,6 +228,12 @@ export declare class DatetimePicker extends FormFieldElement implements MultiVal
      * @returns promise
      */
     protected performUpdate(): Promise<void>;
+    /**
+     * if the time-picker input(s) is invalid
+     * it will sync time-picker value to previous valid value that store in datetime-picker
+     * @returns {void}
+     */
+    private syncTimePickerInput;
     /**
      * Overwrite validation method for value
      *

package/lib/datetime-picker/index.js

@@ -353,6 +353,7 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
     update(changedProperties) {
         if (changedProperties.has('opened') && this.opened) {
             this.lazyRendered = true;
+            this.syncTimePickerInput();
         }
         // make sure to close popup for disabled
         if (this.opened && !this.canOpenPopup) {
@@ -392,6 +393,31 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         ]);
         void super.performUpdate();
     }
+    /**
+     * if the time-picker input(s) is invalid
+     * it will sync time-picker value to previous valid value that store in datetime-picker
+     * @returns {void}
+     */
+    syncTimePickerInput() {
+        if (!this.timepicker || !this.opened) {
+            return;
+        }
+        const validateAndFallback = (element, value) => {
+            if (!element) {
+                return;
+            }
+            if (!element.checkValidity() || (!element.value && value)) {
+                element.value = value;
+            }
+        };
+        if (this.range) {
+            validateAndFallback(this.timepickerFromEl, this.timepickerValues[0]);
+            validateAndFallback(this.timepickerToEl, this.timepickerValues[1]);
+        }
+        else {
+            validateAndFallback(this.timepickerEl, this.timepickerValues[0]);
+        }
+    }
     /**
      * Overwrite validation method for value
      *
@@ -975,6 +1001,7 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         return html `<ef-time-picker
       id="${id}"
       part="time-picker"
+      custom-validation
       .showSeconds=${this.showSeconds}
       .amPm=${this.amPm}
       .value=${value}

package/lib/list/elements/list.js

@@ -614,7 +614,7 @@ let List = class List extends ControlElement {
     }
 };
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], List.prototype, "renderer", void 0);
 __decorate([
     property({ type: Boolean })

package/lib/swing-gauge/index.js

@@ -748,7 +748,7 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'secondary-legend' })
 ], SwingGauge.prototype, "secondaryLegend", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], SwingGauge.prototype, "valueFormatter", void 0);
 __decorate([
     state()

package/lib/time-picker/custom-elements.json

@@ -5,6 +5,12 @@
       "name": "ef-time-picker",
       "description": "Control the time input",
       "attributes": [
+        {
+          "name": "custom-validation",
+          "description": "Disable automatic build-in validation checking for partial input of hour, minute & second (if applicable) segments",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hours",
           "description": "Hours time segment in 24hr format",
@@ -49,9 +55,22 @@
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
+        {
+          "name": "customValidation",
+          "attribute": "custom-validation",
+          "description": "Disable automatic build-in validation checking for partial input of hour, minute & second (if applicable) segments",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hours",
           "attribute": "hours",
@@ -104,15 +123,36 @@
           "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
         {
           "name": "value-changed",
           "description": "Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically."
+        },
+        {
+          "name": "error-changed",
+          "description": "Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically."
         }
       ],
       "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if all input segments contain valid data or empty. Otherwise, returns false.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate input. Mark as error if input is invalid",
+          "params": []
+        },
         {
           "name": "toggle",
           "description": "Toggles the AM/PM state",

package/lib/time-picker/custom-elements.md

@@ -4,25 +4,30 @@ Control the time input
 
 ## Properties
 
-| Property      | Attribute      | Type             | Default | Description                                      |
-|---------------|----------------|------------------|---------|--------------------------------------------------|
-| `amPm`        | `am-pm`        | `boolean`        | false   | Toggles 12hr time display                        |
-| `disabled`    | `disabled`     | `boolean`        | false   | Set disabled state                               |
-| `hours`       | `hours`        | `number \| null` | null    | Hours time segment in 24hr format                |
-| `minutes`     | `minutes`      | `number \| null` | null    | Minutes time segment                             |
-| `readonly`    | `readonly`     | `boolean`        | false   | Set readonly state                               |
-| `seconds`     | `seconds`      | `number \| null` | null    | Seconds time segment                             |
-| `showSeconds` | `show-seconds` | `boolean`        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
-| `value`       | `value`        | `string`         | ""      | Current time value                               |
+| Property           | Attribute           | Type             | Default | Description                                      |
+|--------------------|---------------------|------------------|---------|--------------------------------------------------|
+| `amPm`             | `am-pm`             | `boolean`        | false   | Toggles 12hr time display                        |
+| `customValidation` | `custom-validation` | `boolean`        | false   | Disable automatic build-in validation checking for partial input of hour, minute & second (if applicable) segments |
+| `disabled`         | `disabled`          | `boolean`        | false   | Set disabled state                               |
+| `error`            | `error`             | `boolean`        | false   | Set error state                                  |
+| `hours`            | `hours`             | `number \| null` | null    | Hours time segment in 24hr format                |
+| `minutes`          | `minutes`           | `number \| null` | null    | Minutes time segment                             |
+| `readonly`         | `readonly`          | `boolean`        | false   | Set readonly state                               |
+| `seconds`          | `seconds`           | `number \| null` | null    | Seconds time segment                             |
+| `showSeconds`      | `show-seconds`      | `boolean`        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
+| `value`            | `value`             | `string`         | ""      | Current time value                               |
 
 ## Methods
 
-| Method   | Type       | Description             |
-|----------|------------|-------------------------|
-| `toggle` | `(): void` | Toggles the AM/PM state |
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if all input segments contain valid data or empty. Otherwise, returns false. |
+| `reportValidity` | `(): boolean` | Validate input. Mark as error if input is invalid |
+| `toggle`         | `(): void`    | Toggles the AM/PM state                          |
 
 ## Events
 
 | Event           | Description                                      |
 |-----------------|--------------------------------------------------|
+| `error-changed` | Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically. |
 | `value-changed` | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |

package/lib/time-picker/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, FormFieldElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/time-picker.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
 import '../number-field/index.js';
@@ -11,14 +11,18 @@ declare enum Segment {
 /**
  * Control the time input
  * @event value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @event error-changed - Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
  */
-export declare class TimePicker extends ControlElement {
+export declare class TimePicker extends FormFieldElement {
     /**
      * Element version number
      * @returns version number
@@ -46,6 +50,10 @@ export declare class TimePicker extends ControlElement {
      * The flag is not relevant when withSecond is forced to be true
      */
     private valueWithSeconds;
+    /**
+     * Disable automatic build-in validation checking for partial input of hour, minute & second (if applicable) segments
+     */
+    customValidation: boolean;
     /**
      * Hours time segment in 24hr format
      * @param hours hours value
@@ -243,6 +251,21 @@ export declare class TimePicker extends ControlElement {
      * @returns {void}
      */
     private onInputValueChanged;
+    /**
+     * Returns `true` if all input segments contain valid data or empty. Otherwise, returns false.
+     * @returns true if input is valid
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate input. Mark as error if input is invalid
+     * @returns false if there is an error
+     */
+    reportValidity(): boolean;
+    /**
+     * Handle validation on input segments
+     * @returns {void}
+     */
+    private onInputValidation;
     /**
      * Updates a time segment to the provided value
      * @param segment Segment id
@@ -349,6 +372,12 @@ export declare class TimePicker extends ControlElement {
      * @returns {void}
      */
     toggle(): void;
+    /**
+     * Handle tap toggle between AP and PM state
+     * @param  userInteraction indicates whether the toggle is triggered by user interaction or not
+     * @returns {void}
+     */
+    private onToggle;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -417,7 +446,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
-      'ef-time-picker': Partial<TimePicker> | JSXInterface.ControlHTMLAttributes<TimePicker>;
+      'ef-time-picker': Partial<TimePicker> | JSXInterface.HTMLAttributes<TimePicker>;
     }
   }
 }

package/lib/time-picker/index.js

@@ -1,6 +1,6 @@
 var TimePicker_1;
 import { __decorate } from "tslib";
-import { ControlElement, css, html, nothing } from '@refinitiv-ui/core';
+import { 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 { query } from '@refinitiv-ui/core/decorators/query.js';
@@ -45,14 +45,18 @@ const Placeholder = {
 /**
  * Control the time input
  * @event value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @event error-changed - Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
  */
-let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
+let TimePicker = TimePicker_1 = class TimePicker extends FormFieldElement {
     constructor() {
         super(...arguments);
         this.defaultRole = 'group';
@@ -77,6 +81,10 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
          * The flag is not relevant when withSecond is forced to be true
          */
         this.valueWithSeconds = false;
+        /**
+         * Disable automatic build-in validation checking for partial input of hour, minute & second (if applicable) segments
+         */
+        this.customValidation = false;
         /**
          * Toggles 12hr time display
          */
@@ -459,6 +467,9 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
             this.updateTimeSegmentTo(segment, Number(value));
         }
         this.updateSegmentValue(segment);
+        if (!this.customValidation) {
+            this.reportValidity();
+        }
     }
     /**
      * Handles action when input value changes
@@ -480,6 +491,48 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
             }
         }
     }
+    /**
+     * Returns `true` if all input segments contain valid data or empty. Otherwise, returns false.
+     * @returns true if input is valid
+     */
+    checkValidity() {
+        const hours = this.hoursInput?.value;
+        const minutes = this.minutesInput?.value;
+        const seconds = this.secondsInput?.value;
+        // If no values are provided in all segment, there is no error
+        if (!hours && !minutes && !seconds) {
+            return true;
+        }
+        const checkValues = (value, maxUnit) => {
+            if (!value) {
+                return false;
+            }
+            const _value = Number(value);
+            return TimePicker_1.validUnit(_value, MIN_UNIT, maxUnit, null) === _value;
+        };
+        const validHour = checkValues(hours, MAX_HOURS);
+        const validMinute = checkValues(minutes, MAX_MINUTES);
+        const validSecond = checkValues(seconds, MAX_SECONDS);
+        // Check second only when it's enabled
+        return validHour && validMinute && (!this.isShowSeconds || validSecond);
+    }
+    /**
+     * Validate input. Mark as error if input is invalid
+     * @returns false if there is an error
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
+    /**
+     * Handle validation on input segments
+     * @returns {void}
+     */
+    onInputValidation() {
+        if (this.customValidation) {
+            return;
+        }
+        this.reportValidity();
+    }
     /**
      * Updates a time segment to the provided value
      * @param segment Segment id
@@ -544,7 +597,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      */
     handleEnterKey(event) {
         if (event.target === this.toggleEl) {
-            this.toggle();
+            void this.onToggle();
             event.preventDefault();
         }
     }
@@ -573,7 +626,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      */
     toggleOrModify(amount, target) {
         if (target === this.toggleEl) {
-            this.toggle();
+            void this.onToggle();
         }
         else if (target === this.hoursInput) {
             this.changeValueBy(amount, Segment.HOURS);
@@ -679,9 +732,26 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
      * @returns {void}
      */
     toggle() {
+        void this.onToggle(false);
+    }
+    /**
+     * Handle tap toggle between AP and PM state
+     * @param  userInteraction indicates whether the toggle is triggered by user interaction or not
+     * @returns {void}
+     */
+    async onToggle(userInteraction = true) {
         if (this.amPm) {
             const hours = this.hours === null ? new Date().getHours() : (this.hours + HOURS_IN_DAY / 2) % HOURS_IN_DAY;
+            if (!userInteraction) {
+                this.hours = hours; // set segment without notifying value change
+                return;
+            }
             this.setSegmentAndNotify(Segment.HOURS, hours);
+            await this.updateComplete;
+            // The segment needs to be validated when its value has been changed
+            if (!this.customValidation) {
+                this.reportValidity();
+            }
         }
     }
     /**
@@ -730,6 +800,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
       ?readonly="${this.readonly}"
       @value-changed="${this.onInputValueChanged}"
       @focused-changed=${this.onInputFocusedChanged}
+      @input=${this.onInputValidation}
     ></ef-number-field>`;
     }
     /**
@@ -752,6 +823,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
       transparent
       @value-changed="${this.onInputValueChanged}"
       @focused-changed=${this.onInputFocusedChanged}
+      @input=${this.onInputValidation}
     ></ef-number-field>`;
     }
     /**
@@ -774,6 +846,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
       transparent
       @value-changed="${this.onInputValueChanged}"
       @focused-changed=${this.onInputFocusedChanged}
+      @input=${this.onInputValidation}
     ></ef-number-field>`;
     }
     /**
@@ -790,7 +863,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
             aria-activedescendant="${hasHours ? (this.isAM() ? 'toggle-am' : 'toggle-pm') : nothing}"
             id="toggle"
             part="toggle"
-            @tap=${this.toggle}
+            @tap=${this.onToggle}
             tabindex="0"
           >
             <div
@@ -870,6 +943,9 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
  * @returns Divider segment
  */
 TimePicker.dividerTemplate = html `<span part="divider"></span>`;
+__decorate([
+    property({ type: Boolean, attribute: 'custom-validation' })
+], TimePicker.prototype, "customValidation", void 0);
 __decorate([
     property({ type: Number })
 ], TimePicker.prototype, "hours", null);

package/lib/time-picker/themes/halo/dark/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/dark';
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([error]){border:1px solid #a01c2b}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([error]) [part=input]:focus::after,:host([error]) [part=input][focused]::after,:host([error]) [part=toggle]:focus::after,:host([error]) [part=toggle][focused]::after{border-bottom-color:#a01c2b}:host [part=divider]{width:2px}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5)}:host(:hover:not([readonly]):not([focused])){border-color:grey}:host([error]:not([focused])){border-color:#f5475b}:host([error][readonly]:not([focused])){border-color:rgba(250,168,177,.5)}:host([error]:hover:not([readonly]):not([focused])){border-color:#faa8b1}' }}));

package/lib/time-picker/themes/halo/light/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/halo/light';
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host [part=divider]{width:2px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;width:auto;min-width:-moz-max-content;min-width:max-content;padding:0}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host([error]){border:1px solid #b63243}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:24px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;font-size:50%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;line-height:1.2;outline:0;cursor:pointer;touch-action:manipulation}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([error]) [part=input]:focus::after,:host([error]) [part=input][focused]::after,:host([error]) [part=toggle]:focus::after,:host([error]) [part=toggle][focused]::after{border-bottom-color:#b63243}:host [part=divider]{width:2px}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-left:8px solid transparent;position:absolute;left:calc(50% - 8px);bottom:0;border-bottom:4px solid transparent;display:none}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5)}:host(:hover:not([readonly]):not([focused])){border-color:#0d0d0d}:host([error]:not([focused])){border-color:#d94255}:host([error][readonly]:not([focused])){border-color:rgba(238,172,180,.5)}:host([error]:hover:not([readonly]):not([focused])){border-color:#eeacb4}' }}));

package/lib/time-picker/themes/solar/charcoal/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#000;border:1px solid #4a4a52;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #f93;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#f93}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis}:host([error]){border:1px solid #f5475b}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #f93;border-left:8px solid transparent;position:absolute}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([error]) [part=input]:focus::after,:host([error]) [part=input][focused]::after,:host([error]) [part=toggle]:focus::after,:host([error]) [part=toggle][focused]::after{border-bottom-color:#f5475b}:host{width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#000;border:1px solid #4a4a52;padding:0}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#f93}:host([focused][readonly]:not([error])){border-color:#f93;border-style:dotted}:host([focused][error]:not([readonly])){border-color:#f93;border-style:dotted}:host([focused][error]) [part=input]:focus::after,:host([focused][error]) [part=input][focused]::after,:host([focused][error]) [part=toggle]:focus::after,:host([focused][error]) [part=toggle][focused]::after{border-bottom:none}' }}));

package/lib/time-picker/themes/solar/pearl/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#fff;border:1px solid #a9afba;padding:0}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #ffb266;border-left:8px solid transparent;position:absolute;content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#ffb266}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-time-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis}:host([error]){border:1px solid #d94255}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=input]{margin:0;text-align:center;padding:0;color:inherit;width:25px}:host [part=divider]::before{content:\':\'}:host [part=toggle]{width:20px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;outline:0;cursor:pointer;touch-action:manipulation;font-size:70%;line-height:1}:host [part=input],:host [part=toggle]{height:100%;position:relative}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border-right:8px solid transparent;border-bottom:4px solid #ffb266;border-left:8px solid transparent;position:absolute}:host [part=toggle-item]{opacity:.5}:host [part=toggle-item][active]{opacity:1}:host([error]) [part=input]:focus::after,:host([error]) [part=input][focused]::after,:host([error]) [part=toggle]:focus::after,:host([error]) [part=toggle][focused]::after{border-bottom-color:#d94255}:host{width:auto;min-width:-moz-max-content;min-width:max-content;background-color:#fff;border:1px solid #a9afba;padding:0}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host [part=input]:focus::after,:host [part=input][focused]::after,:host [part=toggle]:focus::after,:host [part=toggle][focused]::after{content:\'\';border:none;left:calc(50% - 7px);bottom:-1px;width:14px;height:1px;background:#ffb266}:host([focused][readonly]:not([error])){border-color:#ffb266;border-style:dotted}:host([focused][error]:not([readonly])){border-color:#ffb266;border-style:dotted}:host([focused][error]) [part=input]:focus::after,:host([focused][error]) [part=input][focused]::after,:host([focused][error]) [part=toggle]:focus::after,:host([focused][error]) [part=toggle][focused]::after{border-bottom:none}' }}));

package/lib/tooltip/index.js

@@ -452,10 +452,10 @@ __decorate([
     property({ type: String })
 ], Tooltip.prototype, "selector", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Tooltip.prototype, "condition", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Tooltip.prototype, "renderer", void 0);
 __decorate([
     property({ type: String })

package/lib/tree/custom-elements.json

@@ -57,6 +57,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "filter",
+          "description": "Custom filter for static data",
+          "type": "TreeFilter<T> | null",
+          "default": "\"createDefaultFilter<T>(this)\""
+        },
         {
           "name": "renderer",
           "description": "Renderer used for generating tree items",

package/lib/tree/custom-elements.md

@@ -5,16 +5,17 @@ to be used for menus and group selections
 
 ## Properties
 
-| Property             | Attribute     | Type             | Default                       | Description                                      |
-|----------------------|---------------|------------------|-------------------------------|--------------------------------------------------|
-| `data`               |               | `TreeData<T>`    |                               | Data object to be used for creating tree         |
-| `manager (readonly)` |               | `TreeManager<T>` |                               | Tree manager used for item manipulation          |
-| `multiple`           | `multiple`    | `boolean`        | false                         | Allows multiple items to be selected             |
-| `noRelation`         | `no-relation` | `boolean`        | false                         | Breaks the relationship when multiple<br />selection mode is enabled |
-| `query`              | `query`       | `string`         | ""                            | Query string applied to tree                     |
-| `renderer`           |               |                  | "createTreeRenderer<T>(this)" | Renderer used for generating tree items          |
-| `stateless`          | `stateless`   | `boolean`        | false                         | Disable selections                               |
-| `values`             |               | `string[]`       | []                            | Selected items in tree                           |
+| Property             | Attribute     | Type                    | Default                        | Description                                      |
+|----------------------|---------------|-------------------------|--------------------------------|--------------------------------------------------|
+| `data`               |               | `TreeData<T>`           |                                | Data object to be used for creating tree         |
+| `filter`             |               | `TreeFilter<T> \| null` | "createDefaultFilter<T>(this)" | Custom filter for static data                    |
+| `manager (readonly)` |               | `TreeManager<T>`        |                                | Tree manager used for item manipulation          |
+| `multiple`           | `multiple`    | `boolean`               | false                          | Allows multiple items to be selected             |
+| `noRelation`         | `no-relation` | `boolean`               | false                          | Breaks the relationship when multiple<br />selection mode is enabled |
+| `query`              | `query`       | `string`                | ""                             | Query string applied to tree                     |
+| `renderer`           |               |                         | "createTreeRenderer<T>(this)"  | Renderer used for generating tree items          |
+| `stateless`          | `stateless`   | `boolean`               | false                          | Disable selections                               |
+| `values`             |               | `string[]`              | []                             | Selected items in tree                           |
 
 ## Methods
 

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

@@ -43,9 +43,8 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
     /**
      * 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;
+    filter: TreeFilter<T> | null;
     /**
      * Renderer used for generating tree items
      */

package/lib/tree/elements/tree.js

@@ -39,7 +39,6 @@ let Tree = class Tree extends List {
         /**
          * 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 = createDefaultFilter(this);
         /**
@@ -439,6 +438,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Tree.prototype, "query", void 0);
+__decorate([
+    property({ attribute: false })
+], Tree.prototype, "filter", void 0);
 __decorate([
     property({ attribute: false })
 ], Tree.prototype, "renderer", void 0);

package/lib/tree/helpers/filter.js

@@ -27,8 +27,6 @@ export const createDefaultFilter = (el) => {
         }
         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/index.d.ts

@@ -1,7 +1,6 @@
-import type { TreeData, TreeDataItem } from './helpers/types';
 export * from './elements/tree.js';
 export * from './elements/tree-item.js';
 export { TreeRenderer, createTreeRenderer } from './helpers/renderer.js';
 export { TreeManager, TreeManagerMode, CheckedState } from './managers/tree-manager.js';
 export type { TreeNode } from './managers/tree-node.js';
-export type { TreeData, TreeDataItem };
+export type { TreeData, TreeDataItem, TreeFilter } from './helpers/types';

package/lib/tree-select/custom-elements.json

@@ -23,6 +23,11 @@
           "type": "string | null",
           "default": "\"\""
         },
+        {
+          "name": "query-debounce-rate",
+          "description": "Control query rate in milliseconds",
+          "type": "number"
+        },
         {
           "name": "opened",
           "description": "Set dropdown to open",
@@ -34,6 +39,11 @@
           "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "query-debounce-rate",
+          "description": "Control query rate in milliseconds",
+          "type": "number"
         }
       ],
       "properties": [
@@ -46,7 +56,7 @@
         {
           "name": "treeManager (readonly)",
           "description": "Tree manager used for item manipulation",
-          "type": "TreeManager<TreeSelectDataItem>"
+          "type": "TreeManager <TreeSelectDataItem>"
         },
         {
           "name": "noRelation",
@@ -80,6 +90,18 @@
           "type": "string | null",
           "default": "\"\""
         },
+        {
+          "name": "filter",
+          "description": "Custom filter for static data. Set this to null when data is filtered externally, eg XHR",
+          "type": "TreeSelectFilter<T> | null",
+          "default": "\"createDefaultFilter<T>(this)\""
+        },
+        {
+          "name": "queryDebounceRate",
+          "attribute": "query-debounce-rate",
+          "description": "Control query rate in milliseconds",
+          "type": "number"
+        },
         {
           "name": "opened",
           "attribute": "opened",

package/lib/tree-select/custom-elements.md

@@ -2,20 +2,28 @@
 
 Dropdown control that allows selection from the tree list
 
+## Attributes
+
+| Attribute             | Type     | Description                        |
+|-----------------------|----------|------------------------------------|
+| `query-debounce-rate` | `number` | Control query rate in milliseconds |
+
 ## Properties
 
-| Property                 | Attribute     | Type                              | Default                                          | Description                                      |
-|--------------------------|---------------|-----------------------------------|--------------------------------------------------|--------------------------------------------------|
-| `data`                   |               | `TreeSelectData[]`                | []                                               | Data object to be used for creating tree         |
-| `filterCount`            |               | `number`                          | 0                                                | Tracks the number of filter matches<br /><br />Only needed if internal filtering is unused |
-| `max`                    | `max`         | `string \| null`                  | ""                                               | Set maximum number of selected items             |
-| `noRelation`             | `no-relation` | `boolean`                         | false                                            | Breaks the relationship when multiple<br />selection mode is enabled |
-| `opened`                 | `opened`      | `boolean`                         | false                                            | Set dropdown to open                             |
-| `placeholder`            | `placeholder` | `string`                          | ""                                               | Set placeholder text                             |
-| `renderer`               |               |                                   | "createTreeSelectRenderer<TreeSelectDataItem>(this)" | Renderer used to render tree item elements       |
-| `showPills`              | `show-pills`  | `boolean`                         | false                                            | Should the control show pills                    |
-| `treeManager (readonly)` |               | `TreeManager<TreeSelectDataItem>` |                                                  | Tree manager used for item manipulation          |
-| `values`                 |               | `string[]`                        | []                                               | Returns a values collection of the currently<br />selected item values |
+| Property                 | Attribute             | Type                               | Default                                          | Description                                      |
+|--------------------------|-----------------------|------------------------------------|--------------------------------------------------|--------------------------------------------------|
+| `data`                   |                       | `TreeSelectData[]`                 | []                                               | Data object to be used for creating tree         |
+| `filter`                 |                       | `TreeSelectFilter<T> \| null`      | "createDefaultFilter<T>(this)"                   | Custom filter for static data. Set this to null when data is filtered externally, eg XHR |
+| `filterCount`            |                       | `number`                           | 0                                                | Tracks the number of filter matches<br /><br />Only needed if internal filtering is unused |
+| `max`                    | `max`                 | `string \| null`                   | ""                                               | Set maximum number of selected items             |
+| `noRelation`             | `no-relation`         | `boolean`                          | false                                            | Breaks the relationship when multiple<br />selection mode is enabled |
+| `opened`                 | `opened`              | `boolean`                          | false                                            | Set dropdown to open                             |
+| `placeholder`            | `placeholder`         | `string`                           | ""                                               | Set placeholder text                             |
+| `queryDebounceRate`      | `query-debounce-rate` | `number`                           |                                                  | Control query rate in milliseconds               |
+| `renderer`               |                       |                                    | "createTreeSelectRenderer<TreeSelectDataItem>(this)" | Renderer used to render tree item elements       |
+| `showPills`              | `show-pills`          | `boolean`                          | false                                            | Should the control show pills                    |
+| `treeManager (readonly)` |                       | `TreeManager <TreeSelectDataItem>` |                                                  | Tree manager used for item manipulation          |
+| `values`                 |                       | `string[]`                         | []                                               | Returns a values collection of the currently<br />selected item values |
 
 ## Methods
 

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

@@ -20,6 +20,9 @@ export type { TreeSelectFilter, TreeSelectDataItem, TreeSelectData };
 /**
  * Dropdown control that allows selection from the tree list
  *
+ * @prop {TreeSelectFilter<T> | null} [filter=createDefaultFilter<T>(this)] - Custom filter for static data. Set this to null when data is filtered externally, eg XHR
+ * @attr {number} [query-debounce-rate] - Control query rate in milliseconds
+ * @prop {number} [queryDebounceRate] - Control query rate in milliseconds
  * @attr {boolean} [opened=false] - Set dropdown to open
  * @prop {boolean} [opened=false] - Set dropdown to open
  * @attr {string} placeholder - Set placeholder text
@@ -79,6 +82,7 @@ export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
     protected _treeManager: TreeManager<TreeSelectDataItem>;
     /**
      * Tree manager used for item manipulation
+     * @type {TreeManager <TreeSelectDataItem>}
      */
     get treeManager(): TreeManager<TreeSelectDataItem>;
     /**

package/lib/tree-select/index.js

@@ -24,6 +24,9 @@ const valueFormatWarning = new WarningNotice("The specified 'values' format does
 /**
  * Dropdown control that allows selection from the tree list
  *
+ * @prop {TreeSelectFilter<T> | null} [filter=createDefaultFilter<T>(this)] - Custom filter for static data. Set this to null when data is filtered externally, eg XHR
+ * @attr {number} [query-debounce-rate] - Control query rate in milliseconds
+ * @prop {number} [queryDebounceRate] - Control query rate in milliseconds
  * @attr {boolean} [opened=false] - Set dropdown to open
  * @prop {boolean} [opened=false] - Set dropdown to open
  * @attr {string} placeholder - Set placeholder text
@@ -155,8 +158,10 @@ let TreeSelect = class TreeSelect extends ComboBox {
       }
     `;
     }
+    // add a space in front of angle bracket for line break opportunity in EF docs with @type
     /**
      * Tree manager used for item manipulation
+     * @type {TreeManager <TreeSelectDataItem>}
      */
     get treeManager() {
         return this._treeManager;
@@ -971,7 +976,7 @@ __decorate([
     property({ type: Array, attribute: false })
 ], TreeSelect.prototype, "values", null);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], TreeSelect.prototype, "renderer", void 0);
 __decorate([
     property({ type: String })

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.11.1';
+export const VERSION = '7.12.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.11.1",
+  "version": "7.12.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -342,8 +342,8 @@
   },
   "dependencies": {
     "@lit-labs/context": "^0.3.1",
-    "@refinitiv-ui/halo-theme": "^7.3.5",
-    "@refinitiv-ui/solar-theme": "^7.2.6",
+    "@refinitiv-ui/halo-theme": "^7.4.0",
+    "@refinitiv-ui/solar-theme": "^7.3.0",
     "chart.js": "^4.4.2",
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
@@ -354,7 +354,7 @@
   },
   "devDependencies": {
     "@refinitiv-ui/core": "^7.4.3",
-    "@refinitiv-ui/demo-block": "^7.1.10",
+    "@refinitiv-ui/demo-block": "^7.1.11",
     "@refinitiv-ui/i18n": "^7.1.4",
     "@refinitiv-ui/phrasebook": "^7.1.1",
     "@refinitiv-ui/test-helpers": "^7.1.1",
@@ -373,5 +373,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "40fe09a69794fb8d964d638498b0f4fe31b50e7e"
+  "gitHead": "62e644e3d7f5c2bda807bb68f27ce84fde63a8e8"
 }