@refinitiv-ui/elements 7.10.7 → 7.10.8

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.10.8](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.7...@refinitiv-ui/elements@7.10.8) (2024-03-18)
+
+### Bug Fixes
+
+- **list, combobox, tree:** fix EvalError with CSP on renderer ([#1115](https://github.com/Refinitiv/refinitiv-ui/issues/1115)) ([8dffb10](https://github.com/Refinitiv/refinitiv-ui/commit/8dffb102a04f262f82f6da5a590b5207deded9e6))
+
 ## [7.10.7](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.6...@refinitiv-ui/elements@7.10.7) (2024-03-12)
 
 ### Bug Fixes

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

@@ -82,8 +82,7 @@
         {
           "name": "renderer",
           "description": "Renderer used to render list item elements",
-          "type": "ComboBoxRenderer",
-          "default": "\"new ComboBoxRenderer(this)\""
+          "default": "\"createComboBoxRenderer<T>(this)\""
         },
         {
           "name": "multiple",

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

@@ -4,25 +4,25 @@ Combines a popup with a filterable selection list
 
 ## Properties
 
-| Property            | Attribute             | Type                        | Default                      | Description                                      |
-|---------------------|-----------------------|-----------------------------|------------------------------|--------------------------------------------------|
-| `clears`            | `clears`              | `boolean`                   | false                        | Show clears button                               |
-| `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 |
-| `freeText`          | `free-text`           | `boolean`                   | false                        | Allow to enter any value                         |
-| `label (readonly)`  |                       | `string`                    | ""                           | Label of selected value                          |
-| `multiple`          | `multiple`            | `boolean`                   | false                        | Multiple selection mode                          |
-| `opened`            | `opened`              | `boolean`                   | false                        | Track opened state of popup                      |
-| `placeholder`       | `placeholder`         | `string`                    | ""                           | Set placeholder text                             |
-| `query`             |                       | `string \| null`            | null                         | Query string applied to combo-box<br />Set via internal input |
-| `queryDebounceRate` | `query-debounce-rate` | `number`                    | "0"                          | Control query rate in milliseconds               |
-| `readonly`          | `readonly`            | `boolean`                   | false                        | Set readonly state                               |
-| `renderer`          |                       | `ComboBoxRenderer`          | "new ComboBoxRenderer(this)" | Renderer used to render list item elements       |
-| `value`             | `value`               | `string`                    | ""                           | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
-| `values`            |                       | `string[]`                  | []                           | Returns a values collection of the currently<br />selected item values |
-| `warning`           | `warning`             | `boolean`                   | false                        | Set warning state                                |
+| Property            | Attribute             | Type                        | Default                           | Description                                      |
+|---------------------|-----------------------|-----------------------------|-----------------------------------|--------------------------------------------------|
+| `clears`            | `clears`              | `boolean`                   | false                             | Show clears button                               |
+| `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 |
+| `freeText`          | `free-text`           | `boolean`                   | false                             | Allow to enter any value                         |
+| `label (readonly)`  |                       | `string`                    | ""                                | Label of selected value                          |
+| `multiple`          | `multiple`            | `boolean`                   | false                             | Multiple selection mode                          |
+| `opened`            | `opened`              | `boolean`                   | false                             | Track opened state of popup                      |
+| `placeholder`       | `placeholder`         | `string`                    | ""                                | Set placeholder text                             |
+| `query`             |                       | `string \| null`            | null                              | Query string applied to combo-box<br />Set via internal input |
+| `queryDebounceRate` | `query-debounce-rate` | `number`                    | "0"                               | Control query rate in milliseconds               |
+| `readonly`          | `readonly`            | `boolean`                   | false                             | Set readonly state                               |
+| `renderer`          |                       |                             | "createComboBoxRenderer<T>(this)" | Renderer used to render list item elements       |
+| `value`             | `value`               | `string`                    | ""                                | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`            |                       | `string[]`                  | []                                | Returns a values collection of the currently<br />selected item values |
+| `warning`           | `warning`             | `boolean`                   | false                             | Set warning state                                |
 
 ## Events
 

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

@@ -1,7 +1,11 @@
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { ItemData } from '../../item';
 import { Renderer } from '../../list/renderer.js';
+export declare const createComboBoxRenderer: <T extends DataItem = ItemData>(context?: unknown) => (item: T, composer: CollectionComposer<T>, element?: HTMLElement) => HTMLElement;
 /**
  * Renders list items as `ef-item` elements.
  * Extends its behaviour from ListRenderer.
+ * @deprecate ComboBoxRenderer is deprecated. Use createComboBoxRenderer instead.
  */
 export declare class ComboBoxRenderer extends Renderer {
     constructor(context?: unknown);

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

@@ -1,24 +1,31 @@
-import { ListRenderer } from '../../list/index.js';
+import { DeprecationNotice } from '@refinitiv-ui/core';
+import { createListRenderer } from '../../list/index.js';
 import { Renderer } from '../../list/renderer.js';
+export const createComboBoxRenderer = (context) => {
+    const listRenderer = createListRenderer(context);
+    return (item, composer, element) => {
+        // Extending renderer from listRenderer
+        element = listRenderer(item, composer, element);
+        const value = composer.getItemPropertyValue(item, 'value');
+        // Using value as id for `aria-activedescendant` in combobox
+        if (value && element.id !== value) {
+            element.id = value;
+        }
+        else if (!value && element.id) {
+            element.removeAttribute('id');
+        }
+        return element;
+    };
+};
+const deprecationNotice = new DeprecationNotice('ComboBoxRenderer is deprecated. Use createComboBoxRenderer instead.');
 /**
  * Renders list items as `ef-item` elements.
  * Extends its behaviour from ListRenderer.
+ * @deprecate ComboBoxRenderer is deprecated. Use createComboBoxRenderer instead.
  */
 export class ComboBoxRenderer extends Renderer {
     constructor(context) {
-        const listRenderer = new ListRenderer(context);
-        super((item, composer, element) => {
-            // Extending renderer from listRenderer
-            element = listRenderer(item, composer, element);
-            const value = composer.getItemPropertyValue(item, 'value');
-            // Using value as id for `aria-activedescendant` in combobox
-            if (value && element.id !== value) {
-                element.id = value;
-            }
-            else if (!value && element.id) {
-                element.removeAttribute('id');
-            }
-            return element;
-        });
+        super(createComboBoxRenderer(context));
+        deprecationNotice.show();
     }
 }

package/lib/combo-box/index.d.ts

@@ -12,10 +12,10 @@ import type { List } from '../list';
 import '../list/index.js';
 import '../overlay/index.js';
 import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
-import { ComboBoxRenderer } from './helpers/renderer.js';
+import { ComboBoxRenderer, createComboBoxRenderer } from './helpers/renderer.js';
 import type { ComboBoxData, ComboBoxFilter } from './helpers/types';
 export type { ComboBoxFilter, ComboBoxData };
-export { ComboBoxRenderer };
+export { ComboBoxRenderer, createComboBoxRenderer };
 /**
  * Combines a popup with a filterable selection list
  *
@@ -53,9 +53,8 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
     filter: ComboBoxFilter<T> | null;
     /**
      * Renderer used to render list item elements
-     * @type {ComboBoxRenderer}
      */
-    renderer: ComboBoxRenderer;
+    renderer: (item: T, composer: CollectionComposer<T>, element?: HTMLElement | undefined) => HTMLElement;
     private _multiple;
     /**
      * Multiple selection mode

package/lib/combo-box/index.js

@@ -18,8 +18,8 @@ import { registerOverflowTooltip } from '../tooltip/index.js';
 import { VERSION } from '../version.js';
 import { defaultFilter } from './helpers/filter.js';
 import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
-import { ComboBoxRenderer } from './helpers/renderer.js';
-export { ComboBoxRenderer };
+import { ComboBoxRenderer, createComboBoxRenderer } from './helpers/renderer.js';
+export { ComboBoxRenderer, createComboBoxRenderer };
 const QUERY_DEBOUNCE_RATE = 0;
 // Maximum number of characters to display in multiple mode
 const MULTIPLE_LABEL_MAX_SIZE = 250;
@@ -56,9 +56,8 @@ let ComboBox = class ComboBox extends FormFieldElement {
         this.filter = defaultFilter(this);
         /**
          * Renderer used to render list item elements
-         * @type {ComboBoxRenderer}
          */
-        this.renderer = new ComboBoxRenderer(this);
+        this.renderer = createComboBoxRenderer(this);
         this._multiple = false;
         /**
          * Track opened state of popup
@@ -267,7 +266,9 @@ let ComboBox = class ComboBox extends FormFieldElement {
             // Clone value arrays
             const newValues = values.slice(0, this.multiple ? values.length : 1);
             const oldValues = this.values.slice();
-            // Create comparison strings to check for differences
+            // Create comparison strings to check for differences.
+            //  i18n not required at this sort, and
+            // we just sort values to create signature values for comparison.
             const newComparison = newValues.sort().toString();
             const oldComparison = oldValues.sort().toString();
             // Update the selection state when found new value

package/lib/list/custom-elements.json

@@ -34,8 +34,7 @@
         {
           "name": "renderer",
           "description": "Renderer used to render list item elements",
-          "type": "ListRenderer",
-          "default": "\"new ListRenderer(this)\""
+          "default": "\"createListRenderer<T>(this)\""
         },
         {
           "name": "stateless",

package/lib/list/custom-elements.md

@@ -4,15 +4,15 @@ Provides listing and immutable selection
 
 ## Properties
 
-| Property                    | Attribute   | Type           | Default                  | Description                                      |
-|-----------------------------|-------------|----------------|--------------------------|--------------------------------------------------|
-| `data`                      |             | `ListData`     | null                     | The data object, used to render the list.        |
-| `delegatesFocus (readonly)` |             | `false`        | false                    | Element focus delegation.<br />Set to `false` and relies on native focusing. |
-| `multiple`                  | `multiple`  | `boolean`      | false                    | Allow multiple selections                        |
-| `renderer`                  |             | `ListRenderer` | "new ListRenderer(this)" | Renderer used to render list item elements       |
-| `stateless`                 | `stateless` | `boolean`      | false                    | Disable selections                               |
-| `value`                     | `value`     | `string`       | ""                       | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
-| `values`                    |             | `string[]`     | []                       | Returns a values collection of the currently<br />selected item values |
+| Property                    | Attribute   | Type       | Default                       | Description                                      |
+|-----------------------------|-------------|------------|-------------------------------|--------------------------------------------------|
+| `data`                      |             | `ListData` | null                          | The data object, used to render the list.        |
+| `delegatesFocus (readonly)` |             | `false`    | false                         | Element focus delegation.<br />Set to `false` and relies on native focusing. |
+| `multiple`                  | `multiple`  | `boolean`  | false                         | Allow multiple selections                        |
+| `renderer`                  |             |            | "createListRenderer<T>(this)" | Renderer used to render list item elements       |
+| `stateless`                 | `stateless` | `boolean`  | false                         | Disable selections                               |
+| `value`                     | `value`     | `string`   | ""                            | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`                    |             | `string[]` | []                            | Returns a values collection of the currently<br />selected item values |
 
 ## Methods
 

package/lib/list/elements/list.d.ts

@@ -2,7 +2,6 @@ import { JSXInterface } from '../../jsx';
 import { CSSResultGroup, ControlElement, PropertyValues, TapEvent, TemplateResult, WarningNotice } from '@refinitiv-ui/core';
 import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import type { ItemData } from '../../item';
-import { ListRenderer } from '../helpers/renderer.js';
 import type { ListData } from '../helpers/types';
 import './list-item.js';
 /**
@@ -54,9 +53,8 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     readonly delegatesFocus = false;
     /**
      * Renderer used to render list item elements
-     * @type {ListRenderer}
      */
-    renderer: ListRenderer;
+    renderer: (item: T, composer: CollectionComposer<T>, element?: HTMLElement | undefined) => HTMLElement;
     /**
      * Disable selections
      */

package/lib/list/elements/list.js

@@ -4,7 +4,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { VERSION } from '../../version.js';
-import { ListRenderer } from '../helpers/renderer.js';
+import { createListRenderer } from '../helpers/renderer.js';
 import './list-item.js';
 /**
  * Key direction
@@ -55,9 +55,8 @@ let List = class List extends ControlElement {
         this.delegatesFocus = false;
         /**
          * Renderer used to render list item elements
-         * @type {ListRenderer}
          */
-        this.renderer = new ListRenderer(this);
+        this.renderer = createListRenderer(this);
         /**
          * Disable selections
          */
@@ -139,13 +138,13 @@ let List = class List extends ControlElement {
         }
         else {
             // Clone value arrays
-            const newValue = values.slice();
-            const oldValue = this.values.slice();
-            newValue.sort();
-            oldValue.sort();
-            // Create comparison strings to check for differences
-            const newComparison = newValue.toString();
-            const oldComparison = oldValue.toString();
+            const newValues = values.slice();
+            const oldValues = this.values.slice();
+            // Create comparison strings to check for differences.
+            //  i18n not required at this sort, and
+            // we just sort values to create signature values for comparison.
+            const newComparison = newValues.sort().toString();
+            const oldComparison = oldValues.sort().toString();
             // Should we update the selection state?
             if (newComparison !== oldComparison) {
                 this.clearSelection();
@@ -154,7 +153,7 @@ let List = class List extends ControlElement {
                     matches.forEach((match) => this.composer.setItemPropertyValue(match, 'selected', true));
                     return !this.multiple; // Only set the fist value if multiple is not enabled
                 });
-                this.requestUpdate('values', oldValue);
+                this.requestUpdate('values', oldValues);
             }
         }
     }

package/lib/list/extensible-function.d.ts

@@ -1,7 +1,6 @@
 /**
- * Extensible function class
- * TODO: Move this to @refinitiv-ui/utils
- * ! Do not import this module !
+ *  Do not use: ExtensibleFunction is not CSP compliant.
+ * @deprecate ExtensibleFunction is deprecated.
  */
 export declare abstract class ExtensibleFunction extends Function {
     constructor(fn: Function);

package/lib/list/extensible-function.js

@@ -1,7 +1,6 @@
 /**
- * Extensible function class
- * TODO: Move this to @refinitiv-ui/utils
- * ! Do not import this module !
+ *  Do not use: ExtensibleFunction is not CSP compliant.
+ * @deprecate ExtensibleFunction is deprecated.
  */
 export class ExtensibleFunction extends Function {
     // eslint-disable-next-line @typescript-eslint/ban-types

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

@@ -1,7 +1,11 @@
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
+import type { ItemData } from '../../item';
 import { Renderer } from '../renderer.js';
+export declare const createListRenderer: <T extends DataItem = ItemData>(context?: unknown) => (item: T, composer: CollectionComposer<T>, element?: HTMLElement) => HTMLElement;
 /**
  * Renders list items as `ef-item` elements.
  * This is the default renderer for lists.
+ * @deprecate ListRenderer is deprecated. Use createListRenderer instead.
  */
 export declare class ListRenderer extends Renderer {
     constructor(context?: unknown);

package/lib/list/helpers/renderer.js

@@ -1,43 +1,50 @@
+import { DeprecationNotice } from '@refinitiv-ui/core';
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import { Renderer } from '../renderer.js';
 import { getItemId } from './item-id.js';
+export const createListRenderer = (context) => {
+    /**
+     * Renderer key prefix, used in combination with item value to give unique id to each item
+     */
+    const key = uuid();
+    return (item, composer, element) => {
+        /**
+         * Element to render
+         */
+        const el = element || document.createElement('ef-list-item');
+        /**
+         * Tooltip value to be used, if any.
+         */
+        const tooltip = composer.getItemPropertyValue(item, 'tooltip');
+        el.label = composer.getItemPropertyValue(item, 'label');
+        el.subLabel = composer.getItemPropertyValue(item, 'subLabel');
+        el.value = composer.getItemPropertyValue(item, 'value');
+        el.id = getItemId(key, el.value);
+        el.icon = composer.getItemPropertyValue(item, 'icon');
+        el.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
+        el.selected = composer.getItemPropertyValue(item, 'selected') === true;
+        el.disabled = composer.getItemPropertyValue(item, 'disabled') === true;
+        el.hidden = composer.getItemPropertyValue(item, 'hidden') === true;
+        el.type = composer.getItemPropertyValue(item, 'type');
+        el.multiple = !!context && context.multiple === true;
+        const itemRole = el.type === 'text' || !el.type ? 'option' : 'presentation';
+        el.setAttribute('role', itemRole);
+        tooltip ? el.setAttribute('title', tooltip) : el.removeAttribute('title');
+        return el;
+    };
+};
+const deprecationNotice = new DeprecationNotice('ListRenderer is deprecated. Use createListRenderer instead.');
 /**
  * Renders list items as `ef-item` elements.
  * This is the default renderer for lists.
+ * @deprecate ListRenderer is deprecated. Use createListRenderer instead.
  */
 export class ListRenderer extends Renderer {
     constructor(context) {
-        /**
-         * Renderer key prefix, used in combination with item value to give unique id to each item
-         */
-        const key = uuid();
         /**
          * Create and return render function
          */
-        super((item, composer, element) => {
-            /**
-             * Element to render
-             */
-            const el = element || document.createElement('ef-list-item');
-            /**
-             * Tooltip value to be used, if any.
-             */
-            const tooltip = composer.getItemPropertyValue(item, 'tooltip');
-            el.label = composer.getItemPropertyValue(item, 'label');
-            el.subLabel = composer.getItemPropertyValue(item, 'subLabel');
-            el.value = composer.getItemPropertyValue(item, 'value');
-            el.id = getItemId(key, el.value);
-            el.icon = composer.getItemPropertyValue(item, 'icon');
-            el.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
-            el.selected = composer.getItemPropertyValue(item, 'selected') === true;
-            el.disabled = composer.getItemPropertyValue(item, 'disabled') === true;
-            el.hidden = composer.getItemPropertyValue(item, 'hidden') === true;
-            el.type = composer.getItemPropertyValue(item, 'type');
-            el.multiple = !!context && context.multiple === true;
-            const itemRole = el.type === 'text' || !el.type ? 'option' : 'presentation';
-            el.setAttribute('role', itemRole);
-            tooltip ? el.setAttribute('title', tooltip) : el.removeAttribute('title');
-            return el;
-        });
+        super(createListRenderer(context));
+        deprecationNotice.show();
     }
 }

package/lib/list/index.d.ts

@@ -1,5 +1,5 @@
 import type { ListData } from './helpers/types';
 export * from './elements/list.js';
 export * from './elements/list-item.js';
-export { ListRenderer } from './helpers/renderer.js';
+export { ListRenderer, createListRenderer } from './helpers/renderer.js';
 export type { ListData };

package/lib/list/index.js

@@ -1,3 +1,3 @@
 export * from './elements/list.js';
 export * from './elements/list-item.js';
-export { ListRenderer } from './helpers/renderer.js';
+export { ListRenderer, createListRenderer } from './helpers/renderer.js';

package/lib/list/renderer.d.ts

@@ -1,36 +1,8 @@
-import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js';
 import { ExtensibleFunction } from './extensible-function.js';
 /**
- * Render function interface
- * TODO: Move this to @refinitiv-ui/utils
- * ! Do not import this module !
- */
-export interface RenderFunction {
-    /**
-     * Renders data items into elements
-     * @param item Data item context
-     * @param composer Composer context
-     * @param element Reusable element. This element tries to be the same as was used before.
-     * @returns List item element
-     */
-    (item: DataItem, composer: CollectionComposer, element?: HTMLElement): HTMLElement;
-}
-/**
- * Render constructor interface
- * TODO: Move this to @refinitiv-ui/utils
- * ! Do not import this module !
- */
-export interface RendererConstructor {
-    /**
-     * @param fn Render function to use as the instance
-     */
-    new (fn: RenderFunction): RenderFunction;
-}
-/**
- * Renderer base class.
+ * Do not use: Renderer is not CSP compliant.
  * Used for creating renderers to render data items.
- * TODO: Move this to @refinitiv-ui/utils
- * ! Do not import this module !
+ * @deprecate Renderer is deprecated.
  */
 export declare abstract class Renderer extends ExtensibleFunction {
 }

package/lib/list/renderer.js

@@ -1,9 +1,8 @@
 import { ExtensibleFunction } from './extensible-function.js';
 /**
- * Renderer base class.
+ * Do not use: Renderer is not CSP compliant.
  * Used for creating renderers to render data items.
- * TODO: Move this to @refinitiv-ui/utils
- * ! Do not import this module !
+ * @deprecate Renderer is deprecated.
  */
 export class Renderer extends ExtensibleFunction {
 }

package/lib/tree/custom-elements.json

@@ -55,8 +55,7 @@
         {
           "name": "renderer",
           "description": "Renderer used for generating tree items",
-          "type": "TreeRenderer",
-          "default": "\"new TreeRenderer(this)\""
+          "default": "\"createTreeRenderer<T>(this)\""
         },
         {
           "name": "values",

package/lib/tree/custom-elements.md

@@ -5,15 +5,15 @@ 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` | "new TreeRenderer(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         |
+| `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

@@ -2,7 +2,6 @@ import { JSXInterface } from '../../jsx';
 import { PropertyValues, TapEvent } from '@refinitiv-ui/core';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { List } from '../../list/index.js';
-import { TreeRenderer } from '../helpers/renderer.js';
 import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
 import { TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
@@ -48,9 +47,8 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
     protected filter: TreeFilter<T> | null;
     /**
      * Renderer used for generating tree items
-     * @type {TreeRenderer}
      */
-    renderer: TreeRenderer;
+    renderer: (item: T, composer: CollectionComposer<T>, element?: HTMLElement) => HTMLElement;
     /**
      * Expands all groups
      * @returns {void}

package/lib/tree/elements/tree.js

@@ -4,7 +4,7 @@ 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 { TreeRenderer } from '../helpers/renderer.js';
+import { createTreeRenderer } from '../helpers/renderer.js';
 import { TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
 import './tree-item.js';
 const EXPAND_TOGGLE_ATTR = 'expand-toggle';
@@ -47,9 +47,8 @@ let Tree = class Tree extends List {
         this.filter = defaultFilter(this);
         /**
          * Renderer used for generating tree items
-         * @type {TreeRenderer}
          */
-        this.renderer = new TreeRenderer(this);
+        this.renderer = createTreeRenderer(this);
     }
     /**
      * Element version number

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

@@ -1,4 +1,10 @@
+import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { Renderer } from '../../list/renderer.js';
+import type { TreeDataItem } from './types';
+export declare const createTreeRenderer: <T extends TreeDataItem = TreeDataItem>(context?: unknown) => (item: T, composer: CollectionComposer<T>, element?: HTMLElement) => HTMLElement;
+/**
+ * @deprecate TreeRenderer is deprecated. Use createTreeRenderer instead.
+ */
 export declare class TreeRenderer extends Renderer {
-    constructor(scope?: unknown);
+    constructor(context?: unknown);
 }

package/lib/tree/helpers/renderer.js

@@ -1,39 +1,50 @@
+import { DeprecationNotice } from '@refinitiv-ui/core';
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import { getItemId } from '../../list/helpers/item-id.js';
 import { Renderer } from '../../list/renderer.js';
 import { CheckedState, TreeManager, TreeManagerMode } from '../managers/tree-manager.js';
+export const createTreeRenderer = (context) => {
+    /**
+     * Renderer key prefix, used in combination with item value to give unique id to each item
+     */
+    const key = uuid();
+    let manager;
+    let currentMode;
+    let currentComposer;
+    return (item, composer, element = document.createElement('ef-tree-item')) => {
+        // cast type to element to not break List api.
+        const _element = element;
+        const multiple = !!context && context.multiple === true;
+        const noRelation = !!context && context.noRelation === true;
+        const mode = !multiple || !noRelation ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
+        if (currentComposer !== composer || currentMode !== mode) {
+            currentMode = mode;
+            currentComposer = composer;
+            manager = new TreeManager(composer, mode);
+        }
+        _element.multiple = multiple;
+        _element.item = item;
+        _element.id = getItemId(key, item.value);
+        _element.depth = composer.getItemDepth(item);
+        _element.parent = composer.getItemChildren(item).length > 0;
+        _element.expanded = manager.isItemExpanded(item);
+        _element.checkedState =
+            !multiple && _element.parent ? CheckedState.UNCHECKED : manager.getItemCheckedState(item);
+        _element.icon = composer.getItemPropertyValue(item, 'icon');
+        _element.label = composer.getItemPropertyValue(item, 'label');
+        _element.disabled = composer.getItemPropertyValue(item, 'disabled') === true;
+        _element.readonly = composer.getItemPropertyValue(item, 'readonly') === true;
+        _element.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
+        return _element;
+    };
+};
+const deprecationNotice = new DeprecationNotice('TreeRenderer is deprecated. Use createTreeRenderer instead.');
+/**
+ * @deprecate TreeRenderer is deprecated. Use createTreeRenderer instead.
+ */
 export class TreeRenderer extends Renderer {
-    constructor(scope) {
-        /**
-         * Renderer key prefix, used in combination with item value to give unique id to each item
-         */
-        const key = uuid();
-        let manager;
-        let currentMode;
-        let currentComposer;
-        super((item, composer, element = document.createElement('ef-tree-item')) => {
-            const multiple = !!scope && scope.multiple === true;
-            const noRelation = !!scope && scope.noRelation === true;
-            const mode = !multiple || !noRelation ? TreeManagerMode.RELATIONAL : TreeManagerMode.INDEPENDENT;
-            if (currentComposer !== composer || currentMode !== mode) {
-                currentMode = mode;
-                currentComposer = composer;
-                manager = new TreeManager(composer, mode);
-            }
-            element.multiple = multiple;
-            element.item = item;
-            element.id = getItemId(key, item.value);
-            element.depth = composer.getItemDepth(item);
-            element.parent = composer.getItemChildren(item).length > 0;
-            element.expanded = manager.isItemExpanded(item);
-            element.checkedState =
-                !multiple && element.parent ? CheckedState.UNCHECKED : manager.getItemCheckedState(item);
-            element.icon = composer.getItemPropertyValue(item, 'icon');
-            element.label = composer.getItemPropertyValue(item, 'label');
-            element.disabled = composer.getItemPropertyValue(item, 'disabled') === true;
-            element.readonly = composer.getItemPropertyValue(item, 'readonly') === true;
-            element.highlighted = composer.getItemPropertyValue(item, 'highlighted') === true;
-            return element;
-        });
+    constructor(context) {
+        super(createTreeRenderer(context));
+        deprecationNotice.show();
     }
 }

package/lib/tree/index.d.ts

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

package/lib/tree/index.js

@@ -1,4 +1,4 @@
 export * from './elements/tree.js';
 export * from './elements/tree-item.js';
-export { TreeRenderer } from './helpers/renderer.js';
+export { TreeRenderer, createTreeRenderer } from './helpers/renderer.js';
 export { TreeManager, TreeManagerMode, CheckedState } from './managers/tree-manager.js';

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

@@ -66,8 +66,7 @@
         {
           "name": "renderer",
           "description": "Renderer used to render tree item elements",
-          "type": "TreeSelectRenderer",
-          "default": "\"new TreeSelectRenderer(this)\""
+          "default": "\"createTreeSelectRenderer<TreeSelectDataItem>(this)\""
         },
         {
           "name": "max",

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

@@ -4,17 +4,17 @@ Dropdown control that allows selection from the tree list
 
 ## 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`    |               | `TreeSelectRenderer` | "new TreeSelectRenderer(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         |
+| `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 |
 
 ## Events
 

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

@@ -11,12 +11,11 @@ import type { CheckChangedEvent } from '../events';
 import '../icon/index.js';
 import type { Overlay } from '../overlay';
 import '../pill/index.js';
-import '../tree/index.js';
-import { TreeRenderer as TreeSelectRenderer } from '../tree/index.js';
+import { TreeRenderer as TreeSelectRenderer, createTreeRenderer as createTreeSelectRenderer } from '../tree/index.js';
 import type { Tree } from '../tree/index.js';
 import { TreeManager, TreeManagerMode } from '../tree/managers/tree-manager.js';
 import type { TreeSelectData, TreeSelectDataItem } from './helpers/types';
-export { TreeSelectRenderer };
+export { TreeSelectRenderer, createTreeSelectRenderer };
 export type { TreeSelectFilter, TreeSelectDataItem, TreeSelectData };
 /**
  * Dropdown control that allows selection from the tree list
@@ -112,9 +111,8 @@ export declare class TreeSelect extends ComboBox<TreeSelectDataItem> {
     set values(values: string[]);
     /**
      * Renderer used to render tree item elements
-     * @type {TreeSelectRenderer}
      */
-    renderer: TreeSelectRenderer;
+    renderer: (item: import("../tree/index.js").TreeDataItem, composer: CollectionComposer<import("../tree/index.js").TreeDataItem>, element?: HTMLElement) => HTMLElement;
     private _max;
     /**
      * Set maximum number of selected items

package/lib/tree-select/index.js

@@ -14,11 +14,10 @@ import '../checkbox/index.js';
 import { ComboBox } from '../combo-box/index.js';
 import '../icon/index.js';
 import '../pill/index.js';
-import '../tree/index.js';
-import { TreeRenderer as TreeSelectRenderer } from '../tree/index.js';
+import { TreeRenderer as TreeSelectRenderer, createTreeRenderer as createTreeSelectRenderer } from '../tree/index.js';
 import { CheckedState, TreeManager, TreeManagerMode } from '../tree/managers/tree-manager.js';
 import { VERSION } from '../version.js';
-export { TreeSelectRenderer };
+export { TreeSelectRenderer, createTreeSelectRenderer };
 const MEMO_THROTTLE = 16;
 const POPUP_POSITION = ['bottom-start', 'top-start'];
 const valueFormatWarning = new WarningNotice("The specified 'values' format does not conform to the required format.");
@@ -105,9 +104,8 @@ let TreeSelect = class TreeSelect extends ComboBox {
         this._values = [];
         /**
          * Renderer used to render tree item elements
-         * @type {TreeSelectRenderer}
          */
-        this.renderer = new TreeSelectRenderer(this);
+        this.renderer = createTreeSelectRenderer(this);
         this._max = null;
         /**
          * TODO:

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.10.7';
+export const VERSION = '7.10.8';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.10.7",
+  "version": "7.10.8",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -373,5 +373,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "95774e711a8ad9898e4cb12aa97e050622d593ac"
+  "gitHead": "8b23e2bfb34daf403420a349da85f7f0410dc678"
 }