@refinitiv-ui/elements 6.16.5 → 6.17.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.17.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.16.5...@refinitiv-ui/elements@6.17.0) (2024-06-10)
+
+### Bug Fixes
+
+- **combo-box, list, tree:** make implicit type of renderer explicit ([#1170](https://github.com/Refinitiv/refinitiv-ui/issues/1170)) ([90e2136](https://github.com/Refinitiv/refinitiv-ui/commit/90e21362022eefa79e7359354084cc1677da5e87))
+
+### Features
+
+- **time-picker:** add build-in validation for partial input value ([#1166](https://github.com/Refinitiv/refinitiv-ui/issues/1166)) ([5473aad](https://github.com/Refinitiv/refinitiv-ui/commit/5473aad2f5651c1517ddb702059d8a200509e9aa))
+- **tree:** enable custom filter of query ([#1172](https://github.com/Refinitiv/refinitiv-ui/issues/1172)) ([6e7f048](https://github.com/Refinitiv/refinitiv-ui/commit/6e7f048e3657cf1f52a000312034aa3a4c2f4082))
+
 ## [6.16.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.16.4...@refinitiv-ui/elements@6.16.5) (2024-05-20)
 
 ### Bug Fixes

package/lib/combo-box/custom-elements.json

@@ -77,7 +77,7 @@
           "name": "filter",
           "description": "Custom filter for static data\nSet this to null when data is filtered externally, eg XHR",
           "type": "ComboBoxFilter<T> | null",
-          "default": "\"defaultFilter<T>(this)\""
+          "default": "\"createDefaultFilter<T>(this)\""
         },
         {
           "name": "renderer",

package/lib/combo-box/custom-elements.md

@@ -10,7 +10,7 @@ Combines a popup with a filterable selection list
 | `data`              |                       | `ComboBoxData<T>`           | []                                | Data array to be displayed                       |
 | `disabled`          | `disabled`            | `boolean`                   | false                             | Set disabled state                               |
 | `error`             | `error`               | `boolean`                   | false                             | Set error state                                  |
-| `filter`            |                       | `ComboBoxFilter<T> \| null` | "defaultFilter<T>(this)"          | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
+| `filter`            |                       | `ComboBoxFilter<T> \| null` | "createDefaultFilter<T>(this)"    | Custom filter for static data<br />Set this to null when data is filtered externally, eg XHR |
 | `freeText`          | `free-text`           | `boolean`                   | false                             | Allow to enter any value                         |
 | `label (readonly)`  |                       | `string`                    | ""                                | Label of selected value                          |
 | `multiple`          | `multiple`            | `boolean`                   | false                             | Multiple selection mode                          |

package/lib/combo-box/helpers/filter.d.ts

@@ -7,4 +7,4 @@ import type { ComboBoxFilter } from './types';
  * @param el ComboBox instance to filter
  * @returns Filter accepting an item
  */
-export declare const defaultFilter: <T extends DataItem = ItemData>(el: ComboBox<T>) => ComboBoxFilter<T>;
+export declare const createDefaultFilter: <T extends DataItem = ItemData>(el: ComboBox<T>) => ComboBoxFilter<T>;

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

@@ -4,7 +4,7 @@ import escapeStringRegexp from 'escape-string-regexp';
  * @param el ComboBox instance to filter
  * @returns Filter accepting an item
  */
-export const defaultFilter = (el) => {
+export const createDefaultFilter = (el) => {
     // reference query string for validating queryRegExp cache state
     let query = '';
     // cache RegExp
@@ -23,8 +23,6 @@ export const defaultFilter = (el) => {
     return (item) => {
         const regex = getRegularExpressionOfQuery();
         const result = regex.test(item.label);
-        // this example uses global scope, so the index needs resetting
-        regex.lastIndex = 0;
         return result;
     };
 };

package/lib/combo-box/index.js

@@ -16,7 +16,7 @@ import '../list/index.js';
 import '../overlay/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { VERSION } from '../version.js';
-import { defaultFilter } from './helpers/filter.js';
+import { createDefaultFilter } from './helpers/filter.js';
 import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
 import { ComboBoxRenderer, createComboBoxRenderer } from './helpers/renderer.js';
 export { ComboBoxRenderer, createComboBoxRenderer };
@@ -53,7 +53,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
          * Set this to null when data is filtered externally, eg XHR
          * @type {ComboBoxFilter<T> | null}
          */
-        this.filter = defaultFilter(this);
+        this.filter = createDefaultFilter(this);
         /**
          * Renderer used to render list item elements
          */
@@ -1135,10 +1135,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

@@ -354,6 +354,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) {
@@ -393,6 +394,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
      *
@@ -980,6 +1006,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

@@ -617,7 +617,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';
@@ -46,14 +46,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';
@@ -78,6 +82,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
          */
@@ -456,6 +464,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
@@ -477,6 +488,50 @@ 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() {
+        const hasError = !this.checkValidity();
+        this.notifyErrorChange(hasError);
+        return !hasError;
+    }
+    /**
+     * 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 +599,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 +628,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 +734,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 +802,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 +825,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 +848,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 +865,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 +945,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

@@ -451,10 +451,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

@@ -52,6 +52,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,15 +5,16 @@ 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         |
-| `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`   |               | `TreeRenderer` | "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                    |
+| `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`   |               | `TreeRenderer`          | "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

@@ -42,14 +42,13 @@ 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
      * @type {TreeRenderer}
      */
-    renderer: (item: T, composer: CollectionComposer<T>, element?: HTMLElement) => HTMLElement;
+    renderer: (item: T, composer: CollectionComposer<T>, element?: HTMLElement | undefined) => HTMLElement;
     /**
      * Expands all groups
      * @returns {void}

package/lib/tree/elements/tree.js

@@ -3,7 +3,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { List, valueFormatWarning } from '../../list/index.js';
 import { VERSION } from '../../version.js';
-import { defaultFilter } from '../helpers/filter.js';
+import { createDefaultFilter } from '../helpers/filter.js';
 import { createTreeRenderer } from '../helpers/renderer.js';
 import { TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
@@ -42,9 +42,8 @@ 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 = defaultFilter(this);
+        this.filter = createDefaultFilter(this);
         /**
          * Renderer used for generating tree items
          * @type {TreeRenderer}
@@ -438,6 +437,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.d.ts

@@ -5,4 +5,4 @@ import type { TreeFilter } from './types';
  * @param el Tree instance to filter
  * @returns Filter accepting an item
  */
-export declare const defaultFilter: <T extends TreeDataItem = TreeDataItem>(el: Tree<T>) => TreeFilter<T>;
+export declare const createDefaultFilter: <T extends TreeDataItem = TreeDataItem>(el: Tree<T>) => TreeFilter<T>;

package/lib/tree/helpers/filter.js

@@ -4,7 +4,7 @@ import escapeStringRegexp from 'escape-string-regexp';
  * @param el Tree instance to filter
  * @returns Filter accepting an item
  */
-export const defaultFilter = (el) => {
+export const createDefaultFilter = (el) => {
     // reference query string for validating queryRegExp cache state
     let query = '';
     // cache RegExp
@@ -27,8 +27,6 @@ export const defaultFilter = (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,6 +1,5 @@
-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 { 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": [
@@ -75,6 +85,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,19 +2,27 @@
 
 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                    |
-| `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                    |
+| `values`            |                       | `string[]`                    | []                                               | Returns a values collection of the currently<br />selected item values |
 
 ## Events
 

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
@@ -112,7 +115,7 @@ export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
     /**
      * Renderer used to render tree item elements
      */
-    renderer: (item: import("../tree/index.js").TreeDataItem, composer: CollectionComposer<import("../tree/index.js").TreeDataItem>, element?: HTMLElement) => HTMLElement;
+    renderer: (item: import("../tree/index.js").TreeDataItem, composer: CollectionComposer<import("../tree/index.js").TreeDataItem>, element?: HTMLElement | undefined) => HTMLElement;
     private _max;
     /**
      * Set maximum number of selected items

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
@@ -960,7 +963,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 = '6.16.5';
+export const VERSION = '6.17.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.16.5",
+  "version": "6.17.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -339,8 +339,8 @@
   },
   "dependencies": {
     "@lit-labs/context": "^0.3.1",
-    "@refinitiv-ui/halo-theme": "^6.7.5",
-    "@refinitiv-ui/solar-theme": "^6.4.8",
+    "@refinitiv-ui/halo-theme": "^6.8.0",
+    "@refinitiv-ui/solar-theme": "^6.5.0",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
@@ -351,7 +351,7 @@
   },
   "devDependencies": {
     "@refinitiv-ui/core": "^6.5.7",
-    "@refinitiv-ui/demo-block": "^6.1.24",
+    "@refinitiv-ui/demo-block": "^6.1.25",
     "@refinitiv-ui/i18n": "^6.0.21",
     "@refinitiv-ui/phrasebook": "^6.3.9",
     "@refinitiv-ui/test-helpers": "^6.0.15",
@@ -370,5 +370,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3c00d54e43bead9ed6ed224baac0ca27b4ab5ca0"
+  "gitHead": "0ab1230f2a01d84a07c779df2a04e962beea86b7"
 }