@refinitiv-ui/elements 7.5.0 → 7.6.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.6.0...@refinitiv-ui/elements@7.6.1) (2023-10-02)
+
+### Bug Fixes
+
+- **list, tree:** stateless list and tree should have `aria-readonly`="true" ([#971](https://github.com/Refinitiv/refinitiv-ui/issues/971)) ([6856c0f](https://github.com/Refinitiv/refinitiv-ui/commit/6856c0fdff5e7165f8c07e99865ebfdc7f190558))
+- **tree:** parent label can't expand/collapse in stateless mode ([#967](https://github.com/Refinitiv/refinitiv-ui/issues/967)) ([74f9877](https://github.com/Refinitiv/refinitiv-ui/commit/74f9877b8643e49059f4e35a141b4a892f17cd86))
+
+# [7.6.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.5.0...@refinitiv-ui/elements@7.6.0) (2023-09-25)
+
+### Bug Fixes
+
+- **interactive-chart:** invalid legend render when add new seriesList ([#954](https://github.com/Refinitiv/refinitiv-ui/issues/954)) ([f8706b6](https://github.com/Refinitiv/refinitiv-ui/commit/f8706b6da7ad5c49b6abbadce853c339bd5a77b8))
+- **tree-select:** show invalid values when click on cancel button on selected view ([#964](https://github.com/Refinitiv/refinitiv-ui/issues/964)) ([49302bc](https://github.com/Refinitiv/refinitiv-ui/commit/49302bc1af0edec984e77083cdcdb31ba068c0c8))
+
+### Features
+
+- **calendar:** introduce before-cell-render event ([#926](https://github.com/Refinitiv/refinitiv-ui/issues/926)) ([ff2164f](https://github.com/Refinitiv/refinitiv-ui/commit/ff2164f5794d874064f167c363a476fe7a3836e1))
+
 # [7.5.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.4.0...@refinitiv-ui/elements@7.5.0) (2023-09-18)
 
 ### Bug Fixes

package/lib/calendar/constants.d.ts

@@ -1,4 +1,4 @@
-export declare enum RenderView {
+export declare enum CalendarRenderView {
     DAY = "day",
     MONTH = "month",
     YEAR = "year"

package/lib/calendar/constants.js

@@ -1,10 +1,11 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
-export var RenderView;
-(function (RenderView) {
-    RenderView["DAY"] = "day";
-    RenderView["MONTH"] = "month";
-    RenderView["YEAR"] = "year";
-})(RenderView || (RenderView = {}));
+// public API
+export var CalendarRenderView;
+(function (CalendarRenderView) {
+    CalendarRenderView["DAY"] = "day";
+    CalendarRenderView["MONTH"] = "month";
+    CalendarRenderView["YEAR"] = "year";
+})(CalendarRenderView || (CalendarRenderView = {}));
 export const FIRST_DAY_OF_WEEK = 0; // 0 for Sunday
 export const YEARS_PER_YEAR_VIEW = 16; /* must be a square number */
 export const DAY_VIEW = {

package/lib/calendar/custom-elements.json

@@ -181,6 +181,10 @@
         }
       ],
       "events": [
+        {
+          "name": "before-cell-render",
+          "description": "Fired before calendar renders each cell along with `cell` model."
+        },
         {
           "name": "value-changed",
           "description": "Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically."

package/lib/calendar/custom-elements.md

@@ -23,10 +23,11 @@ Standard calendar element
 
 ## Events
 
-| Event           | Description                                      |
-|-----------------|--------------------------------------------------|
-| `value-changed` | Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically. |
-| `view-changed`  | Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically. |
+| Event                | Description                                      |
+|----------------------|--------------------------------------------------|
+| `before-cell-render` | Fired before calendar renders each cell along with `cell` model. |
+| `value-changed`      | Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically. |
+| `view-changed`       | Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically. |
 
 ## Slots
 

package/lib/calendar/index.d.ts

@@ -3,12 +3,16 @@ import { CSSResultGroup, ControlElement, MultiValue, PropertyValues, TemplateRes
 import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
 import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import '../button/index.js';
+import { CalendarRenderView } from './constants.js';
 import './locales.js';
-import type { CalendarFilter } from './types';
-export { CalendarFilter };
+import type { BeforeCellRenderEvent, CalendarFilter } from './types';
+export { CalendarRenderView };
+export type { CalendarCell } from './types';
+export type { CalendarFilter, BeforeCellRenderEvent };
 /**
  * Standard calendar element
  *
+ * @fires before-cell-render - Fired before calendar renders each cell along with `cell` model.
  * @fires value-changed - Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically.
  * @fires view-changed - Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically.
  *
@@ -381,9 +385,15 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns key Translate label key
      */
     private getCellLabelKey;
+    /**
+     * fire 'before-cell-render' event
+     * @param cell Cell
+     * @returns {void}
+     */
+    private dispatchBeforeCellRender;
     /**
      * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
+     * @param cell Cell
      * @returns template result
      */
     private renderCell;

package/lib/calendar/index.js

@@ -12,12 +12,14 @@ import { DateFormat, addMonths, format, isAfter, isBefore, isSameDay, isSameMont
 import { down, first, last, left, right, up } from '@refinitiv-ui/utils/navigation.js';
 import '../button/index.js';
 import { VERSION } from '../version.js';
-import { CalendarLocaleScope, DAY_VIEW, FIRST_DAY_OF_WEEK, MONTH_VIEW, RenderView, YEARS_PER_YEAR_VIEW, YEAR_VIEW } from './constants.js';
+import { CalendarLocaleScope, CalendarRenderView, DAY_VIEW, FIRST_DAY_OF_WEEK, MONTH_VIEW, YEARS_PER_YEAR_VIEW, YEAR_VIEW } from './constants.js';
 import './locales.js';
-import { ViewFormatTranslateParams, monthInfo, monthsNames, weekdaysNames } from './utils.js';
+import { ViewFormatTranslateParams, monthInfo, monthsNames, toCalendarCell, weekdaysNames } from './utils.js';
+export { CalendarRenderView };
 /**
  * Standard calendar element
  *
+ * @fires before-cell-render - Fired before calendar renders each cell along with `cell` model.
  * @fires value-changed - Fired when the user commits a date change. The event is not triggered if `value` is changed programmatically.
  * @fires view-changed - Fired when the user changes a view of calendar e.g. changed to next month page. The event is not triggered if `view` property is changed programmatically.
  *
@@ -72,7 +74,7 @@ let Calendar = class Calendar extends ControlElement {
         /**
          * Used for internal navigation between render views
          */
-        this._renderView = RenderView.DAY;
+        this._renderView = CalendarRenderView.DAY;
         /**
          * Used for keyboard navigation when trying
          * to restore focus on re-render and control navigation
@@ -578,7 +580,8 @@ let Calendar = class Calendar extends ControlElement {
      */
     onRenderViewTap(event) {
         if (!event.defaultPrevented) {
-            this.renderView = this.renderView === RenderView.DAY ? RenderView.YEAR : RenderView.DAY;
+            this.renderView =
+                this.renderView === CalendarRenderView.DAY ? CalendarRenderView.YEAR : CalendarRenderView.DAY;
         }
     }
     /**
@@ -592,8 +595,8 @@ let Calendar = class Calendar extends ControlElement {
         }
         switch (event.key) {
             case 'Escape':
-                if (this.renderView === RenderView.YEAR || this.renderView === RenderView.MONTH) {
-                    this.renderView = RenderView.DAY;
+                if (this.renderView === CalendarRenderView.YEAR || this.renderView === CalendarRenderView.MONTH) {
+                    this.renderView = CalendarRenderView.DAY;
                     break;
                 }
                 return;
@@ -656,20 +659,20 @@ let Calendar = class Calendar extends ControlElement {
         this.activeCellIndex = cell.index;
         const cellSegment = toDateSegment(cell.value);
         const viewSegment = toDateSegment(this.view);
-        if (this.renderView === RenderView.YEAR) {
+        if (this.renderView === CalendarRenderView.YEAR) {
             /* YEAR -> MONTH */
             viewSegment.year = cellSegment.year;
             if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.MONTH;
+                this.renderView = CalendarRenderView.MONTH;
             }
             return;
         }
-        if (this.renderView === RenderView.MONTH) {
+        if (this.renderView === CalendarRenderView.MONTH) {
             /* MONTH -> DAY */
             viewSegment.year = cellSegment.year;
             viewSegment.month = cellSegment.month;
             if (this.notifyViewChange(viewSegment)) {
-                this.renderView = RenderView.DAY;
+                this.renderView = CalendarRenderView.DAY;
             }
             return;
         }
@@ -753,13 +756,13 @@ let Calendar = class Calendar extends ControlElement {
     toNextView() {
         let viewSegment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
                 viewSegment = toDateSegment(addMonths(this.view, 1));
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 viewSegment.year += 1;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 viewSegment.year += YEARS_PER_YEAR_VIEW;
                 break;
             // no default
@@ -773,13 +776,13 @@ let Calendar = class Calendar extends ControlElement {
     toPreviousView() {
         let viewSegment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
                 viewSegment = toDateSegment(subMonths(this.view, 1));
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 viewSegment.year -= 1;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 viewSegment.year -= YEARS_PER_YEAR_VIEW;
                 break;
             // no default
@@ -874,9 +877,9 @@ let Calendar = class Calendar extends ControlElement {
     get formattedViewRender() {
         const segment = toDateSegment(this.view);
         switch (this.renderView) {
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 return this.viewFormattedDate(segment);
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 const month = segment.month;
                 const day = segment.day;
                 const fromYear = Math.floor(segment.year / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
@@ -884,7 +887,7 @@ let Calendar = class Calendar extends ControlElement {
                 const fromView = this.viewFormattedDate({ year: fromYear, month, day });
                 const toView = this.viewFormattedDate({ year: toYear, month, day });
                 return html `${fromView} - ${toView}`;
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
             default:
                 return this.viewFormattedDate(segment, true);
         }
@@ -938,7 +941,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get year view template
      */
     get yearView() {
-        const view = RenderView.YEAR;
+        const view = CalendarRenderView.YEAR;
         const currentYear = toDateSegment(this.view).year;
         const startIdx = Math.floor(currentYear / YEARS_PER_YEAR_VIEW) * YEARS_PER_YEAR_VIEW;
         const years = [];
@@ -973,7 +976,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get month view template
      */
     get monthView() {
-        const view = RenderView.MONTH;
+        const view = CalendarRenderView.MONTH;
         const currentYear = toDateSegment(this.view).year;
         const columnCount = MONTH_VIEW.columnCount;
         const monthCount = 12;
@@ -1018,7 +1021,7 @@ let Calendar = class Calendar extends ControlElement {
      * Get day view template
      */
     get dayView() {
-        const view = RenderView.DAY;
+        const view = CalendarRenderView.DAY;
         const firstDayOfWeek = this.firstDayOfWeek;
         const padding = (7 + utcParse(this.view).getUTCDay() - firstDayOfWeek) % 7;
         const viewMonth = monthInfo(this.view);
@@ -1111,13 +1114,13 @@ let Calendar = class Calendar extends ControlElement {
     get viewRender() {
         let renderView;
         switch (this.renderView) {
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 renderView = this.monthView;
                 break;
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 renderView = this.yearView;
                 break;
-            case RenderView.DAY:
+            case CalendarRenderView.DAY:
             default:
                 renderView = this.dayView;
         }
@@ -1140,12 +1143,32 @@ let Calendar = class Calendar extends ControlElement {
         }
         return 'CELL_LABEL';
     }
+    /**
+     * fire 'before-cell-render' event
+     * @param cell Cell
+     * @returns {void}
+     */
+    dispatchBeforeCellRender(cell) {
+        const calendarCell = toCalendarCell(cell);
+        const event = new CustomEvent('before-cell-render', {
+            cancelable: false,
+            composed: true,
+            detail: {
+                cell: calendarCell
+            }
+        });
+        this.dispatchEvent(event);
+    }
     /**
      * Render cell template. Cell can be a day, month or year
-     * @param cell Cell object
+     * @param cell Cell
      * @returns template result
      */
     renderCell(cell) {
+        // there is no slot for cells with falsy value
+        if (cell.value) {
+            this.dispatchBeforeCellRender(cell);
+        }
         const isSelection = cell.value !== undefined;
         const isSelectable = isSelection && !cell.disabled;
         const isSelected = cell.selected ? 'true' : 'false';
@@ -1201,12 +1224,12 @@ let Calendar = class Calendar extends ControlElement {
         let nextBtnAriaLabel = this.t('NEXT_MONTH');
         let viewBtnAriaLabel = this.t('YEAR_SELECTOR');
         switch (this.renderView) {
-            case RenderView.YEAR:
+            case CalendarRenderView.YEAR:
                 prevBtnAriaLabel = this.t('PREVIOUS_DECADE');
                 nextBtnAriaLabel = this.t('NEXT_DECADE');
                 viewBtnAriaLabel = this.t('DATE_SELECTOR');
                 break;
-            case RenderView.MONTH:
+            case CalendarRenderView.MONTH:
                 prevBtnAriaLabel = this.t('PREVIOUS_YEAR');
                 nextBtnAriaLabel = this.t('NEXT_YEAR');
                 viewBtnAriaLabel = this.t('DATE_SELECTOR');
@@ -1226,7 +1249,7 @@ let Calendar = class Calendar extends ControlElement {
         aria-description="${viewBtnAriaLabel}"
         part="btn-view"
         textpos="before"
-        .icon="${this.renderView === RenderView.DAY ? 'down' : 'up'}"
+        .icon="${this.renderView === CalendarRenderView.DAY ? 'down' : 'up'}"
         @tap="${this.onRenderViewTap}"
         >${this.formattedViewRender}</ef-button
       >

package/lib/calendar/types.d.ts

@@ -1,5 +1,5 @@
 import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
-import { RenderView } from './constants.js';
+import { CalendarRenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;
     range?: boolean;
@@ -9,7 +9,7 @@ export interface CellSelectionModel {
     lastDate?: boolean;
 }
 export interface Cell extends CellSelectionModel {
-    view: RenderView;
+    view: CalendarRenderView;
     text?: string;
     active?: boolean;
     value?: string;
@@ -30,3 +30,22 @@ export type WeekdayName = {
     narrow: string;
     long: string;
 };
+export type CalendarCell = {
+    active: boolean;
+    disabled: boolean;
+    firstDate: boolean;
+    idle: boolean;
+    index: CellIndex;
+    lastDate: boolean;
+    now: boolean;
+    range: boolean;
+    rangeFrom: boolean;
+    rangeTo: boolean;
+    selected: boolean;
+    text: string;
+    value: string;
+    view: CalendarRenderView;
+};
+export type BeforeCellRenderEvent = CustomEvent<{
+    cell: CalendarCell;
+}>;

package/lib/calendar/utils.d.ts

@@ -1,4 +1,5 @@
 import { TranslateParams } from '@refinitiv-ui/i18n';
+import { CalendarCell, Cell } from './types.js';
 export type MonthInfo = {
     days: number;
     month: number;
@@ -28,4 +29,11 @@ declare const monthsNames: (locale: string, width?: Intl.DateTimeFormatOptions['
  * Used to format views
  */
 declare const ViewFormatTranslateParams: TranslateParams;
-export { monthInfo, weekdaysNames, monthsNames, ViewFormatTranslateParams };
+/**
+ * convert internal Cell to CalendarCell
+ * avoid introducing breaking changes to the API
+ * @param cell Cell
+ * @returns CalendarCell
+ */
+declare const toCalendarCell: (cell: Cell) => CalendarCell;
+export { monthInfo, weekdaysNames, monthsNames, toCalendarCell, ViewFormatTranslateParams };

package/lib/calendar/utils.js

@@ -99,4 +99,27 @@ const ViewFormatTranslateParams = {
     },
     formats: DateMessageFormats
 };
-export { monthInfo, weekdaysNames, monthsNames, ViewFormatTranslateParams };
+/**
+ * convert internal Cell to CalendarCell
+ * avoid introducing breaking changes to the API
+ * @param cell Cell
+ * @returns CalendarCell
+ */
+const toCalendarCell = (cell) => {
+    return {
+        ...cell,
+        active: cell.active || false,
+        disabled: cell.disabled || false,
+        firstDate: cell.firstDate || false,
+        idle: cell.idle || false,
+        lastDate: cell.lastDate || false,
+        now: cell.now || false,
+        range: cell.range || false,
+        rangeFrom: cell.rangeFrom || false,
+        rangeTo: cell.rangeTo || false,
+        selected: cell.selected || false,
+        text: cell.text ?? '',
+        value: cell.value ?? ''
+    };
+};
+export { monthInfo, weekdaysNames, monthsNames, toCalendarCell, ViewFormatTranslateParams };

package/lib/email-field/custom-elements.json

@@ -180,6 +180,18 @@
           "name": "icon-click",
           "description": "Fired when the user taps on icon added into control's slot."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]

package/lib/email-field/custom-elements.md

@@ -28,6 +28,13 @@ A form control element for email.
 | `value`         | `value`           | `string`         | ""      | Input's value                                    |
 | `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/email-field/index.d.ts

@@ -49,6 +49,16 @@ export declare class EmailField extends TextField {
      * Set to multiple mode, allows multiple emails in a single input
      */
     multiple: boolean;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="email" - always `email`

package/lib/email-field/index.js

@@ -53,6 +53,20 @@ let EmailField = class EmailField extends TextField {
          */
         this.multiple = false;
     }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="email" - always `email`

package/lib/interactive-chart/index.js

@@ -957,6 +957,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 const dataSet = series.data || [];
                 const latestData = dataSet[dataSet.length - 1];
                 if (latestData) {
+                    this.hasDataPoint = dataSet.length > 0;
                     const priceColor = this.getColorInSeries(latestData, chartType, idx);
                     // Render legend by series type
                     this.renderTextLegend(chartType, this.rowLegend, latestData, priceColor, idx);

package/lib/list/elements/list.js

@@ -572,6 +572,14 @@ let List = class List extends ControlElement {
             this.renderTimestamp.clear(); // force render of all items
             this.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
         }
+        if (changeProperties.has('stateless')) {
+            if (this.stateless) {
+                this.setAttribute('aria-readonly', 'true');
+            }
+            else {
+                this.removeAttribute('aria-readonly');
+            }
+        }
     }
     /**
      * A `CSSResultGroup` that will be used

package/lib/number-field/custom-elements.json

@@ -166,9 +166,6 @@
         {
           "name": "step-down",
           "description": "Fired when user acts value down on both pressing arrow down or tapping the spinner down. The event is not triggered if stepDown method is called programmatically."
-        },
-        {
-          "name": "input"
         }
       ],
       "methods": [
@@ -192,9 +189,14 @@
             }
           ]
         },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        },
         {
           "name": "checkValidity",
-          "description": "Returns true if an input element contains valid data.",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
           "params": []
         }
       ]

package/lib/number-field/custom-elements.md

@@ -21,18 +21,18 @@ Form control element for numbers.
 
 ## Methods
 
-| Method          | Type                                          | Description                                      |
-|-----------------|-----------------------------------------------|--------------------------------------------------|
-| `checkValidity` | `(): boolean`                                 | Returns true if an input element contains valid data. |
-| `stepDown`      | `(stepIncrement?: number \| undefined): void` | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
-| `stepUp`        | `(stepIncrement?: number \| undefined): void` | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+| Method           | Type                                          | Description                                      |
+|------------------|-----------------------------------------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean`                                 | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean`                                 | Validate the element input and mark it as error if its input is invalid. |
+| `stepDown`       | `(stepIncrement?: number \| undefined): void` | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
+| `stepUp`         | `(stepIncrement?: number \| undefined): void` | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
 
 ## Events
 
 | Event           | Description                                      |
 |-----------------|--------------------------------------------------|
 | `error-changed` | Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically. |
-| `input`         |                                                  |
 | `step-down`     | Fired when user acts value down on both pressing arrow down or tapping the spinner down. The event is not triggered if stepDown method is called programmatically. |
 | `step-up`       | Fired when user acts value up on both pressing arrow up or tapping the spinner up. The event is not triggered if stepUp method is called programmatically. |
 | `value-changed` | Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically. |

package/lib/number-field/index.d.ts

@@ -262,8 +262,13 @@ export declare class NumberField extends FormFieldElement {
      */
     stepDown(stepIncrement?: number): void;
     /**
-     * Returns true if an input element contains valid data.
-     * @returns true if input is valid
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
      */
     checkValidity(): boolean;
     /**

package/lib/number-field/index.js

@@ -289,6 +289,10 @@ let NumberField = class NumberField extends FormFieldElement {
         if (event) {
             try {
                 this.applyStepDirection(direction);
+                /**
+                 * @ignore
+                 * exclude native event from the documentation
+                 */
                 this.dispatchEvent(new InputEvent('input'));
                 this.setSilentlyValueAndNotify();
             }
@@ -360,16 +364,14 @@ let NumberField = class NumberField extends FormFieldElement {
     onNativeInputChange(event) {
         const currentInput = this.inputValue;
         const inputValue = this.stripeInvalidCharacters(currentInput, this.value, event.data || '');
-        if (inputValue !== currentInput) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const inputEl = this.inputElement;
+        if (inputValue !== currentInput && this.inputElement) {
             // we can only stripe the characters, so try to make the best guess where the cursor should be
-            const selectionStart = inputEl.selectionStart || 0;
-            const selectionEnd = inputEl.selectionEnd || 0;
+            const selectionStart = this.inputElement.selectionStart || 0;
+            const selectionEnd = this.inputElement.selectionEnd || 0;
             this.inputValue = inputValue;
             const diff = currentInput.length - inputValue.length;
-            inputEl.selectionStart = Math.max(selectionStart - diff, 0);
-            inputEl.selectionEnd = Math.max(selectionEnd - diff, 0);
+            this.inputElement.selectionStart = Math.max(selectionStart - diff, 0);
+            this.inputElement.selectionEnd = Math.max(selectionEnd - diff, 0);
         }
         this.setSilentlyValueAndNotify();
     }
@@ -608,8 +610,15 @@ let NumberField = class NumberField extends FormFieldElement {
         this.applyStepDirection(Direction.Down, stepIncrement);
     }
     /**
-     * Returns true if an input element contains valid data.
-     * @returns true if input is valid
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
      */
     checkValidity() {
         const value = this.internalValue;

package/lib/password-field/custom-elements.json

@@ -134,6 +134,18 @@
           "name": "error-changed",
           "description": "Fired when user inputs an invalid value. The event is not triggered if `error` property is changed programmatically."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]

package/lib/password-field/custom-elements.md

@@ -24,6 +24,13 @@ A form control element for password.
 | `value`       | `value`       | `string`         | ""      | Input's value                                    |
 | `warning`     | `warning`     | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/password-field/index.d.ts

@@ -55,6 +55,16 @@ export declare class PasswordField extends TextField {
      * @return shouldUpdate
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="text|password" - text if password is visible

package/lib/password-field/index.js

@@ -60,6 +60,20 @@ let PasswordField = class PasswordField extends TextField {
         // password shouldn't display value on tooltip when value is overflow
         deregisterOverflowTooltip(this);
     }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="text|password" - text if password is visible

package/lib/search-field/custom-elements.json

@@ -156,6 +156,18 @@
           "name": "icon-click",
           "description": "Fired when the user taps on icon added into control's slot."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]

package/lib/search-field/custom-elements.md

@@ -26,6 +26,13 @@ Form control to get a search input from users.
 | `value`         | `value`           | `string`         | ""      | Input's value                                    |
 | `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/search-field/index.d.ts

@@ -55,6 +55,16 @@ export declare class SearchField extends TextField {
      * @returns template map
      */
     protected get decorateInputMap(): TemplateMap;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Renders icon element
      * @returns {void}

package/lib/search-field/index.js

@@ -57,6 +57,20 @@ let SearchField = class SearchField extends TextField {
             inputmode: 'search'
         };
     }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
     /**
      * Renders icon element
      * @returns {void}

package/lib/text-field/custom-elements.json

@@ -171,6 +171,18 @@
           "name": "icon-click",
           "description": "Fired when the user taps on icon added into control's slot."
         }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "description": "Returns `true` if the element input is valid; otherwise, returns `false`.",
+          "params": []
+        },
+        {
+          "name": "reportValidity",
+          "description": "Validate the element input and mark it as error if its input is invalid.",
+          "params": []
+        }
       ]
     }
   ]

package/lib/text-field/custom-elements.md

@@ -19,6 +19,13 @@ Form control element for text.
 | `value`         | `value`           | `string`         | ""      | Input's value                                    |
 | `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
+## Methods
+
+| Method           | Type          | Description                                      |
+|------------------|---------------|--------------------------------------------------|
+| `checkValidity`  | `(): boolean` | Returns `true` if the element input is valid; otherwise, returns `false`. |
+| `reportValidity` | `(): boolean` | Validate the element input and mark it as error if its input is invalid. |
+
 ## Events
 
 | Event           | Description                                      |

package/lib/text-field/index.d.ts

@@ -80,6 +80,16 @@ export declare class TextField extends FormFieldElement {
      * @returns shouldUpdate
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity(): boolean;
     /**
      * Check if input value should be synchronised with component value
      * @param changedProperties Properties that has changed

package/lib/text-field/index.js

@@ -130,6 +130,20 @@ let TextField = class TextField extends FormFieldElement {
             this.syncInputValue();
         }
     }
+    /**
+     * Returns `true` if the element input is valid; otherwise, returns `false`.
+     * @returns element input validity
+     */
+    checkValidity() {
+        return super.checkValidity();
+    }
+    /**
+     * Validate the element input and mark it as error if its input is invalid.
+     * @returns `true` if the element input is valid; otherwise, returns `false`.
+     */
+    reportValidity() {
+        return super.reportValidity();
+    }
     /**
      * Check if input value should be synchronised with component value
      * @param changedProperties Properties that has changed

package/lib/tree/elements/tree.js

@@ -96,6 +96,10 @@ let Tree = class Tree extends List {
     selectItem(item) {
         // Stateless tree
         if (this.stateless) {
+            // Single selection - expand/collapse group (parent)
+            if (!this.multiple && this.manager.isItemParent(item)) {
+                this.toggleExpandedState(item);
+            }
             return false;
         }
         // Multiple selection

package/lib/tree-select/index.js

@@ -539,9 +539,8 @@ let TreeSelect = class TreeSelect extends ComboBox {
      */
     onPopupClosed() {
         super.onPopupClosed();
-        this.updateMemo();
+        this.exitEditSelection(); // selection filter should be removed before reverting modified selection
         this.revertModifiedSelection();
-        this.exitEditSelection();
     }
     /**
      * Filter the internal items by query. Changes items' hidden state.

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.5.0';
+export const VERSION = '7.6.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.5.0",
+  "version": "7.6.1",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -352,7 +352,7 @@
   },
   "devDependencies": {
     "@refinitiv-ui/core": "^7.2.0",
-    "@refinitiv-ui/demo-block": "^7.0.6",
+    "@refinitiv-ui/demo-block": "^7.0.7",
     "@refinitiv-ui/i18n": "^7.0.4",
     "@refinitiv-ui/phrasebook": "^7.0.4",
     "@refinitiv-ui/test-helpers": "^7.0.4",
@@ -371,5 +371,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e162ec78601e5f97201d53d740925ee2075fd95e"
+  "gitHead": "788e08bbba04ae54501cee9cf19251e1a44b18fb"
 }