@refinitiv-ui/elements 6.15.5 → 6.16.1-next.0

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.
 
+# [6.16.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.15.5...@refinitiv-ui/elements@6.16.0) (2024-02-27)
+
+### Features
+
+- **heatmap:** add new config in Heatmap to customise maximum font size in the cells ([bb0b767](https://github.com/Refinitiv/refinitiv-ui/commit/bb0b7674f479b62c5699b2027086df9704eafcd9))
+
 ## [6.15.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.15.4...@refinitiv-ui/elements@6.15.5) (2024-02-19)
 
 **Note:** Version bump only for package @refinitiv-ui/elements

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

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

@@ -427,6 +427,11 @@ export declare class DatetimePicker extends FormFieldElement implements MultiVal
      * @returns true if `from` is before or the same as `to`
      */
     private isFromBeforeTo;
+    /**
+     * Check if `values` correspond to dates that are allowed within the conditions of weekdays or weekends
+     * @returns false if `values` don't correspond to dates that are allowed within the conditions of weekdays or weekends.
+     */
+    private isValidDay;
     /**
      * Check if datetime picker has an error
      * @returns true if error

package/lib/datetime-picker/index.js

@@ -8,7 +8,7 @@ import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import '@refinitiv-ui/phrasebook/locale/en/datetime-picker.js';
 import { TranslatePropertyKey, getLocale, translate } from '@refinitiv-ui/translate';
-import { DateFormat, DateTimeFormat, addMonths, format, isAfter, isBefore, isValidDate, isValidDateTime, parse, subMonths } from '@refinitiv-ui/utils/date.js';
+import { DateFormat, DateTimeFormat, addMonths, format, isAfter, isBefore, isValidDate, isValidDateTime, isWeekend, parse, subMonths } from '@refinitiv-ui/utils/date.js';
 import '../calendar/index.js';
 import '../icon/index.js';
 import { preload } from '../icon/index.js';
@@ -443,7 +443,9 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         if ((changedProperties.has('_values') && changedProperties.get('_values') !== undefined) ||
             (changedProperties.has('min') && changedProperties.get('min') !== undefined) ||
             (changedProperties.has('max') && changedProperties.get('max') !== undefined) ||
-            (changedProperties.has('showSeconds') && changedProperties.get('showSeconds') !== undefined)) {
+            (changedProperties.has('showSeconds') && changedProperties.get('showSeconds') !== undefined) ||
+            (changedProperties.has('weekdaysOnly') && changedProperties.get('weekdaysOnly') !== undefined) ||
+            (changedProperties.has('weekendsOnly') && changedProperties.get('weekendsOnly') !== undefined)) {
             return true;
         }
         return false;
@@ -898,12 +900,30 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         }
         return true;
     }
+    /**
+     * Check if `values` correspond to dates that are allowed within the conditions of weekdays or weekends
+     * @returns false if `values` don't correspond to dates that are allowed within the conditions of weekdays or weekends.
+     */
+    isValidDay() {
+        for (const value of this.values) {
+            if (this.weekdaysOnly && isWeekend(value)) {
+                return false;
+            }
+            if (this.weekendsOnly && !isWeekend(value)) {
+                return false;
+            }
+        }
+        return true;
+    }
     /**
      * Check if datetime picker has an error
      * @returns true if error
      */
     hasError() {
-        return !(this.isValidFormat() && this.isValueWithinMinMax() && this.isFromBeforeTo());
+        return !(this.isValidFormat() &&
+            this.isValueWithinMinMax() &&
+            this.isFromBeforeTo() &&
+            this.isValidDay());
     }
     /**
      * Toggles the opened state of the list

package/lib/heatmap/custom-elements.json

@@ -12,7 +12,7 @@
         },
         {
           "name": "label-width",
-          "description": "Number of maximum label width that cell can paint in pixel.\ne.g. label-width: 30px; cell label hides when text length reaches 30px.",
+          "description": "Set minimum text length to be shown on cells. Unit in pixel.\ne.g. label-width = 30; cell's label is hidden when text length is less than 30px.",
           "type": "number",
           "default": "0"
         },
@@ -57,6 +57,12 @@
           "description": "Cell minimum color saturation, value can be from 0 - 1",
           "type": "number",
           "default": "0.4"
+        },
+        {
+          "name": "label-max-font-size",
+          "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
+          "type": "number",
+          "default": "16"
         }
       ],
       "properties": [
@@ -69,7 +75,7 @@
         {
           "name": "labelWidth",
           "attribute": "label-width",
-          "description": "Number of maximum label width that cell can paint in pixel.\ne.g. label-width: 30px; cell label hides when text length reaches 30px.",
+          "description": "Set minimum text length to be shown on cells. Unit in pixel.\ne.g. label-width = 30; cell's label is hidden when text length is less than 30px.",
           "type": "number",
           "default": "0"
         },
@@ -122,6 +128,13 @@
           "type": "number",
           "default": "0.4"
         },
+        {
+          "name": "labelMaxFontSize",
+          "attribute": "label-max-font-size",
+          "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
+          "type": "number",
+          "default": "16"
+        },
         {
           "name": "tooltipCallback",
           "description": "A callback function that allows tooltip rendering on cell hover",

package/lib/heatmap/custom-elements.md

@@ -5,19 +5,20 @@ values contained in a matrix are represented as colors
 
 ## Properties
 
-| Property          | Attribute      | Type                     | Default | Description                                      |
-|-------------------|----------------|--------------------------|---------|--------------------------------------------------|
-| `axisHidden`      | `axis-hidden`  | `boolean`                | false   | Hide all axes                                    |
-| `blend`           | `blend`        | `boolean`                | false   | Enable cell color blending                       |
-| `config`          | `config`       | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
-| `labelHidden`     | `label-hidden` | `boolean`                | false   | Hide all labels in the cells                     |
-| `labelWidth`      | `label-width`  | `number`                 | 0       | Number of maximum label width that cell can paint in pixel.<br />e.g. label-width: 30px; cell label hides when text length reaches 30px. |
-| `maxPoint`        | `max-point`    | `number`                 | 1       | Maximum point of the cell coloring               |
-| `midPoint`        | `mid-point`    | `number`                 | 0       | Middle point of the cell coloring                |
-| `minPoint`        | `min-point`    | `number`                 | -1      | Minimum point of the cell coloring               |
-| `renderCallback`  |                | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
-| `saturation`      | `saturation`   | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
-| `tooltipCallback` |                | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
+| Property           | Attribute             | Type                     | Default | Description                                      |
+|--------------------|-----------------------|--------------------------|---------|--------------------------------------------------|
+| `axisHidden`       | `axis-hidden`         | `boolean`                | false   | Hide all axes                                    |
+| `blend`            | `blend`               | `boolean`                | false   | Enable cell color blending                       |
+| `config`           | `config`              | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
+| `labelHidden`      | `label-hidden`        | `boolean`                | false   | Hide all labels in the cells                     |
+| `labelMaxFontSize` | `label-max-font-size` | `number`                 | 16      | Maximum font size of label in cells, value in pixel unit e.g. 18 |
+| `labelWidth`       | `label-width`         | `number`                 | 0       | Set minimum text length to be shown on cells. Unit in pixel.<br />e.g. label-width = 30; cell's label is hidden when text length is less than 30px. |
+| `maxPoint`         | `max-point`           | `number`                 | 1       | Maximum point of the cell coloring               |
+| `midPoint`         | `mid-point`           | `number`                 | 0       | Middle point of the cell coloring                |
+| `minPoint`         | `min-point`           | `number`                 | -1      | Minimum point of the cell coloring               |
+| `renderCallback`   |                       | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
+| `saturation`       | `saturation`          | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
+| `tooltipCallback`  |                       | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
 
 ## Methods
 

package/lib/heatmap/helpers/text.d.ts

@@ -1,14 +1,14 @@
 import type { HeatmapCell } from './types';
 declare const MIN_FONT_SIZE = 12;
-declare const MAX_FONT_SIZE = 16;
 /**
  * Calculate responsive font size according to the screen width
  * @param ratio font ratio
  * @param cellHeight cell's height
  * @param cellWidth cell's width
+ * @param cellMaxFontSize cell's max font size
  * @returns font size
  */
-declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number) => number;
+declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number, cellMaxFontSize: number) => number;
 /**
  * Get maximum text width out of all the cell by sampling
  * @param ctx canvas context
@@ -17,4 +17,4 @@ declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWid
  * @returns label width measured in canvas
  */
 declare const getMaximumTextWidth: (ctx: CanvasRenderingContext2D, cells: HeatmapCell[], hasCellHeader: boolean) => number;
-export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };

package/lib/heatmap/helpers/text.js

@@ -1,19 +1,19 @@
 const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 16;
 /**
  * Calculate responsive font size according to the screen width
  * @param ratio font ratio
  * @param cellHeight cell's height
  * @param cellWidth cell's width
+ * @param cellMaxFontSize cell's max font size
  * @returns font size
  */
-const getResponsiveFontSize = (ratio, cellHeight, cellWidth) => {
+const getResponsiveFontSize = (ratio, cellHeight, cellWidth, cellMaxFontSize) => {
     let fontSize = Math.round(Math.min(cellHeight, cellWidth) * ratio);
     if (fontSize < MIN_FONT_SIZE) {
         fontSize = MIN_FONT_SIZE;
     }
-    else if (fontSize > MAX_FONT_SIZE) {
-        fontSize = MAX_FONT_SIZE;
+    else if (fontSize > cellMaxFontSize) {
+        fontSize = cellMaxFontSize;
     }
     return fontSize;
 };
@@ -71,4 +71,4 @@ const getMaximumTextWidth = (ctx, cells, hasCellHeader) => {
     }
     return maxTextWidth;
 };
-export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };

package/lib/heatmap/index.d.ts

@@ -27,8 +27,8 @@ export declare class Heatmap extends ResponsiveElement {
      */
     config: HeatmapConfig | null;
     /**
-     * Number of maximum label width that cell can paint in pixel.
-     * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+     * Set minimum text length to be shown on cells. Unit in pixel.
+     * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
      */
     labelWidth: number;
     /**
@@ -65,6 +65,10 @@ export declare class Heatmap extends ResponsiveElement {
      * Cell minimum color saturation, value can be from 0 - 1
      */
     saturation: number;
+    /**
+     * Maximum font size of label in cells, value in pixel unit e.g. 18
+     */
+    labelMaxFontSize: number;
     /**
      * Returns data of interactive cell
      * @param {MouseEvent} event A MouseEvent that occurs when Heatmap is being interacted
@@ -330,9 +334,9 @@ export declare class Heatmap extends ResponsiveElement {
      */
     private paintAllLabel;
     /**
-     * Calculates space between header and label using cell's height
-     * Maximum 10 pixels
+     * Calculates space between header and label
      * @param cellHeight in pixels
+     * @param cellWidth in pixels
      * @returns in pixels
      */
     private calculateHeaderMargin;

package/lib/heatmap/index.js

@@ -149,8 +149,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
          */
         this.config = null;
         /**
-         * Number of maximum label width that cell can paint in pixel.
-         * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+         * Set minimum text length to be shown on cells. Unit in pixel.
+         * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
          */
         this.labelWidth = 0;
         /**
@@ -181,6 +181,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
          * Cell minimum color saturation, value can be from 0 - 1
          */
         this.saturation = 0.4;
+        /**
+         * Maximum font size of label in cells, value in pixel unit e.g. 18
+         */
+        this.labelMaxFontSize = 16;
         /**
          * Current active cell
          */
@@ -630,14 +634,16 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
     }
     /**
-     * Calculates space between header and label using cell's height
-     * Maximum 10 pixels
+     * Calculates space between header and label
      * @param cellHeight in pixels
+     * @param cellWidth in pixels
      * @returns in pixels
      */
-    calculateHeaderMargin(cellHeight) {
-        const margin = (cellHeight / 10) * 2;
-        return margin > 10 ? 10 : margin;
+    calculateHeaderMargin(cellHeight, cellWidth) {
+        const margin = 18; // maximum margin
+        const maxValue = Math.max(cellHeight, cellWidth);
+        const minValue = Math.min(cellHeight, cellWidth);
+        return margin / (maxValue / minValue);
     }
     /**
      * Paints label to a single cell
@@ -653,7 +659,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             cell.foregroundColor === undefined) {
             return;
         }
-        const margin = cell.header ? this.calculateHeaderMargin(cell.height) : 0;
+        const margin = cell.header ? this.calculateHeaderMargin(cell.height, cell.width) : 0;
         const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
         this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
         this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
@@ -676,7 +682,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.contentWithinCellBoundary = false;
             return this.contentWithinCellBoundary;
         }
-        let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth);
+        let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth, this.labelMaxFontSize);
         canvas.textAlign = 'center';
         canvas.textBaseline = 'middle';
         canvas.font = `${fontSize}px ${fontFamily}`;
@@ -812,7 +818,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             return;
         }
         const labelFontStyle = this.canvasContext.font;
-        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
+        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height, cell.width);
         this.canvasContext.font = 'bold ' + labelFontStyle;
         this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
         this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
@@ -1098,6 +1104,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Heatmap.prototype, "saturation", void 0);
+__decorate([
+    property({ type: Number, attribute: 'label-max-font-size' })
+], Heatmap.prototype, "labelMaxFontSize", void 0);
 __decorate([
     property({ attribute: false })
 ], Heatmap.prototype, "tooltipCallback", void 0);

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
          */

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,47 @@
+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

@@ -56,7 +56,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`   |               | `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

@@ -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';
@@ -50,7 +49,7 @@ export declare class Tree<T extends TreeDataItem = TreeDataItem> extends List<T>
      * 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';
@@ -49,7 +49,7 @@ let Tree = class Tree extends List {
          * 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 = '6.15.5';
+export const VERSION = '6.16.1-next.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.15.5",
+  "version": "6.16.1-next.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -370,5 +370,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44fc7481eb1a179cca96795cdd46018e45448c9c"
+  "gitHead": "0325a57b2c0ce3258a175bea5e8743e79c3a7ba4"
 }