@refinitiv-ui/elements 6.19.0 → 6.20.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.20.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.20.0...@refinitiv-ui/elements@6.20.1) (2025-07-09)
+
+### Bug Fixes
+
+- **icon:** throw error once per session if sprite icon fails to load ([#1285](https://github.com/Refinitiv/refinitiv-ui/issues/1285)) ([db9d54a](https://github.com/Refinitiv/refinitiv-ui/commit/db9d54a4aab9d8278c3446fa463c66ce08ddb420))
+
+# [6.20.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.19.0...@refinitiv-ui/elements@6.20.0) (2025-04-28)
+
+### Bug Fixes
+
+- **tooltip:** fix tooltip reopen when mouse leaves ([#1279](https://github.com/Refinitiv/refinitiv-ui/issues/1279)) ([6eb3ff3](https://github.com/Refinitiv/refinitiv-ui/commit/6eb3ff3bd92ab5f6c3b37be49519805cd39b1dc7))
+
+### Features
+
+- **datetime-picker:** introduce preventCloseOnSelect to prevents the Picker from closing on date selection ([#1278](https://github.com/Refinitiv/refinitiv-ui/issues/1278)) ([4d937e7](https://github.com/Refinitiv/refinitiv-ui/commit/4d937e77fad7b89a56952d4a937da56451002fc5))
+
 # [6.19.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.18.6...@refinitiv-ui/elements@6.19.0) (2025-04-23)
 
 ### Features

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

@@ -76,6 +76,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "prevent-close-on-select",
+          "description": "Prevents the Picker from closing on date selection.\nNote that if timepicker is true, the picker will remain open regardless of this flag.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "input-disabled",
           "description": "Disable input part of the picker",
@@ -237,6 +243,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "preventCloseOnSelect",
+          "attribute": "prevent-close-on-select",
+          "description": "Prevents the Picker from closing on date selection.\nNote that if timepicker is true, the picker will remain open regardless of this flag.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "inputDisabled",
           "attribute": "input-disabled",

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

@@ -4,34 +4,35 @@ Control to pick date and time
 
 ## Properties
 
-| Property               | Attribute                | Type                             | Default       | Description                                      |
-|------------------------|--------------------------|----------------------------------|---------------|--------------------------------------------------|
-| `amPm`                 | `am-pm`                  | `boolean`                        | false         | Toggles 12hr time display                        |
-| `clears`               | `clears`                 | `boolean`                        | false         | Show clears button                               |
-| `disabled`             | `disabled`               | `boolean`                        | false         | Set disabled state                               |
-| `duplex`               | `duplex`                 | `"" \| "consecutive" \| "split"` | null          | Display two calendar pickers.                    |
-| `error`                | `error`                  | `boolean`                        | false         | Set error state                                  |
-| `filter`               |                          | `DatetimePickerFilter \| null`   | null          | Custom filter, used for enabling/disabling certain dates |
-| `firstDayOfWeek`       | `first-day-of-week`      | `number \| undefined`            |               | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
-| `format`               | `format`                 | `string`                         | "dd-MMM-yyyy" | Set the datetime format<br />Based on date-fns formats (https://date-fns.org/) |
-| `inputDisabled`        | `input-disabled`         | `boolean`                        | false         | Disable input part of the picker                 |
-| `inputTriggerDisabled` | `input-trigger-disabled` | `boolean`                        | false         | Only open picker panel when calendar icon is clicked.<br />Clicking on the input will no longer open the picker. |
-| `max`                  | `max`                    | `string`                         | ""            | Set maximum date                                 |
-| `min`                  | `min`                    | `string`                         | ""            | Set minimum date                                 |
-| `opened`               | `opened`                 | `boolean`                        | false         | Toggles the opened state of the list             |
-| `placeholder`          | `placeholder`            | `string`                         | "dd-MMM-yyyy" | Set placeholder text default depends on format   |
-| `popupDisabled`        | `popup-disabled`         | `boolean`                        | false         | Disable the popup                                |
-| `range`                | `range`                  | `boolean`                        | false         | Set to switch to range select mode               |
-| `readonly`             | `readonly`               | `boolean`                        | false         | Set readonly state                               |
-| `showSeconds`          | `show-seconds`           | `boolean`                        | false         | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
-| `timepicker`           | `timepicker`             | `boolean`                        | false         | Toggle to display the time picker                |
-| `value`                | `value`                  | `string`                         | ""            | Current date time value                          |
-| `values`               | `values`                 | `string[]`                       | []            | Set multiple selected values                     |
-| `view`                 | `view`                   | `string`                         | ""            | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
-| `views`                |                          | `string[]`                       | []            | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
-| `warning`              | `warning`                | `boolean`                        | false         | Set warning state                                |
-| `weekdaysOnly`         | `weekdays-only`          | `boolean`                        | false         | Only enable weekdays                             |
-| `weekendsOnly`         | `weekends-only`          | `boolean`                        | false         | Only enable weekends                             |
+| Property               | Attribute                 | Type                             | Default       | Description                                      |
+|------------------------|---------------------------|----------------------------------|---------------|--------------------------------------------------|
+| `amPm`                 | `am-pm`                   | `boolean`                        | false         | Toggles 12hr time display                        |
+| `clears`               | `clears`                  | `boolean`                        | false         | Show clears button                               |
+| `disabled`             | `disabled`                | `boolean`                        | false         | Set disabled state                               |
+| `duplex`               | `duplex`                  | `"" \| "consecutive" \| "split"` | null          | Display two calendar pickers.                    |
+| `error`                | `error`                   | `boolean`                        | false         | Set error state                                  |
+| `filter`               |                           | `DatetimePickerFilter \| null`   | null          | Custom filter, used for enabling/disabling certain dates |
+| `firstDayOfWeek`       | `first-day-of-week`       | `number \| undefined`            |               | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `format`               | `format`                  | `string`                         | "dd-MMM-yyyy" | Set the datetime format<br />Based on date-fns formats (https://date-fns.org/) |
+| `inputDisabled`        | `input-disabled`          | `boolean`                        | false         | Disable input part of the picker                 |
+| `inputTriggerDisabled` | `input-trigger-disabled`  | `boolean`                        | false         | Only open picker panel when calendar icon is clicked.<br />Clicking on the input will no longer open the picker. |
+| `max`                  | `max`                     | `string`                         | ""            | Set maximum date                                 |
+| `min`                  | `min`                     | `string`                         | ""            | Set minimum date                                 |
+| `opened`               | `opened`                  | `boolean`                        | false         | Toggles the opened state of the list             |
+| `placeholder`          | `placeholder`             | `string`                         | "dd-MMM-yyyy" | Set placeholder text default depends on format   |
+| `popupDisabled`        | `popup-disabled`          | `boolean`                        | false         | Disable the popup                                |
+| `preventCloseOnSelect` | `prevent-close-on-select` | `boolean`                        | false         | Prevents the Picker from closing on date selection.<br />Note that if timepicker is true, the picker will remain open regardless of this flag. |
+| `range`                | `range`                   | `boolean`                        | false         | Set to switch to range select mode               |
+| `readonly`             | `readonly`                | `boolean`                        | false         | Set readonly state                               |
+| `showSeconds`          | `show-seconds`            | `boolean`                        | false         | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
+| `timepicker`           | `timepicker`              | `boolean`                        | false         | Toggle to display the time picker                |
+| `value`                | `value`                   | `string`                         | ""            | Current date time value                          |
+| `values`               | `values`                  | `string[]`                       | []            | Set multiple selected values                     |
+| `view`                 | `view`                    | `string`                         | ""            | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
+| `views`                |                           | `string[]`                       | []            | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
+| `warning`              | `warning`                 | `boolean`                        | false         | Set warning state                                |
+| `weekdaysOnly`         | `weekdays-only`           | `boolean`                        | false         | Only enable weekdays                             |
+| `weekendsOnly`         | `weekends-only`           | `boolean`                        | false         | Only enable weekends                             |
 
 ## Methods
 

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

@@ -154,6 +154,11 @@ export declare class DatetimePicker extends FormFieldElement implements MultiVal
      * Clicking on the input will no longer open the picker.
      */
     inputTriggerDisabled: boolean;
+    /**
+     * Prevents the Picker from closing on date selection.
+     * Note that if timepicker is true, the picker will remain open regardless of this flag.
+     */
+    preventCloseOnSelect: boolean;
     /**
      * Disable input part of the picker
      */

package/lib/datetime-picker/index.js

@@ -104,6 +104,11 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
          * Clicking on the input will no longer open the picker.
          */
         this.inputTriggerDisabled = false;
+        /**
+         * Prevents the Picker from closing on date selection.
+         * Note that if timepicker is true, the picker will remain open regardless of this flag.
+         */
+        this.preventCloseOnSelect = false;
         /**
          * Disable input part of the picker
          */
@@ -794,6 +799,9 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
         // Close popup if there is no time picker
         const newValues = this.values;
         if (!this.timepicker && newValues[0] && (this.range ? newValues[1] : true)) {
+            if (this.preventCloseOnSelect) {
+                return;
+            }
             this.setOpened(false);
             /**
              * Custom cell selection delegates focus back to the text field when the overlay is closed,
@@ -1279,6 +1287,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'input-trigger-disabled' })
 ], DatetimePicker.prototype, "inputTriggerDisabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'prevent-close-on-select' })
+], DatetimePicker.prototype, "preventCloseOnSelect", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'input-disabled', reflect: true })
 ], DatetimePicker.prototype, "inputDisabled", void 0);

package/lib/icon/index.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { consume } from '@lit-labs/context';
-import { BasicElement, DeprecationNotice, css, svg } from '@refinitiv-ui/core';
+import { BasicElement, DeprecationNotice, ErrorThrower, css, svg } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { unsafeSVG } from '@refinitiv-ui/core/directives/unsafe-svg.js';
@@ -19,6 +19,7 @@ const EmptyTemplate = svg ``;
  * As the cache key is an absolute URL, we can assume no clashes will occur.
  */
 export const iconTemplateCache = new Map();
+const errorThrower = new ErrorThrower();
 let Icon = class Icon extends BasicElement {
     /**
      * Element version number
@@ -179,7 +180,9 @@ let Icon = class Icon extends BasicElement {
             void this.loadAndRenderIcon(iconProperty);
         }
         else {
-            void this.loadAndRenderSpriteIcon(iconProperty);
+            void this.loadAndRenderSpriteIcon(iconProperty).catch((error) => {
+                errorThrower.once(String(error));
+            });
         }
     }
     /**

package/lib/tooltip/index.d.ts

@@ -156,11 +156,6 @@ declare class Tooltip extends BasicElement {
      * Hide tooltip
      * @returns {void}
      */
-    private hideTooltip;
-    /**
-     * Reset tooltip
-     * @returns {void}
-     */
     private resetTooltip;
     /**
      * Run when mouse is moving over the document

package/lib/tooltip/index.js

@@ -63,11 +63,15 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
             window.clearTimeout(this.timerTimeout);
         };
         /**
-         * Reset tooltip
+         * Hide tooltip
          * @returns {void}
          */
         this.resetTooltip = () => {
-            this.hideTooltip();
+            this.reset();
+            this.matchTarget = null;
+            this.matchTargetRect = null;
+            this.positionTarget = null;
+            this.setOpened(false);
         };
         /**
          * Run when mouse is moving over the document
@@ -84,7 +88,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
          */
         this.onClick = () => {
             this.clicked = true;
-            this.hideTooltip();
+            this.resetTooltip();
         };
         /**
          * Run when document mouse out event happens
@@ -328,17 +332,6 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         }
         this.appendChild(contentNode);
     }
-    /**
-     * Hide tooltip
-     * @returns {void}
-     */
-    hideTooltip() {
-        this.reset();
-        this.matchTarget = null;
-        this.matchTargetRect = null;
-        this.positionTarget = null;
-        this.setOpened(false);
-    }
     /**
      * Try to show the tooltip if it matches the target
      * @param paths The paths leading to target

package/lib/tooltip/managers/tooltip-manager.js

@@ -29,6 +29,7 @@ class TooltipManager {
          * @returns {void}
          */
         this.onClick = (event) => {
+            this.cancelThrottler();
             this.registry.forEach(({ click }) => click(event));
         };
         /**
@@ -36,6 +37,7 @@ class TooltipManager {
          * @returns {void}
          */
         this.onMouseOut = (event) => {
+            this.cancelThrottler();
             this.registry.forEach(({ mouseout }) => mouseout(event));
         };
         /**
@@ -43,6 +45,7 @@ class TooltipManager {
          * @returns {void}
          */
         this.onMouseLeave = (event) => {
+            this.cancelThrottler();
             this.registry.forEach(({ mouseleave }) => mouseleave(event));
         };
         /**
@@ -50,6 +53,7 @@ class TooltipManager {
          * @returns {void}
          */
         this.onWheel = (event) => {
+            this.cancelThrottler();
             this.registry.forEach(({ wheel }) => wheel(event));
         };
         /**
@@ -57,6 +61,7 @@ class TooltipManager {
          * @returns {void}
          */
         this.onKeyDown = (event) => {
+            this.cancelThrottler();
             this.registry.forEach(({ keydown }) => keydown(event));
         };
         /**
@@ -64,6 +69,7 @@ class TooltipManager {
          * @returns {void}
          */
         this.onBlur = (event) => {
+            this.cancelThrottler();
             this.registry.forEach(({ blur }) => blur(event));
         };
     }
@@ -89,6 +95,16 @@ class TooltipManager {
             }
         }
     }
+    /**
+     * Cancel the pending task of throttled mousemove event listener.
+     * This prevents the task from running out of order compared to the event dispatching sequence
+     * due to its setTimeout usage.
+     * Any event listener hiding the tooltip should call this method.
+     * @returns {void}
+     */
+    cancelThrottler() {
+        this.titleThrottler.task?.cancel();
+    }
     register(tooltip, documentCallbacks) {
         if (!this.registry.size) {
             // IE11 does not support event options

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.19.0';
+export const VERSION = '6.20.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.19.0",
+  "version": "6.20.1",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -350,25 +350,25 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^6.6.1",
-    "@refinitiv-ui/demo-block": "^6.1.30",
+    "@refinitiv-ui/core": "^6.6.2",
+    "@refinitiv-ui/demo-block": "^6.1.31",
     "@refinitiv-ui/i18n": "^6.0.22",
     "@refinitiv-ui/phrasebook": "^6.3.9",
     "@refinitiv-ui/test-helpers": "^6.1.0",
-    "@refinitiv-ui/translate": "^6.0.36",
+    "@refinitiv-ui/translate": "^6.0.37",
     "@refinitiv-ui/utils": "^6.4.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
     "@refinitiv-ui/browser-sparkline": "^1.0.0 || ^2.0.0",
-    "@refinitiv-ui/core": "^6.6.1",
+    "@refinitiv-ui/core": "^6.6.2",
     "@refinitiv-ui/i18n": "^6.0.22",
     "@refinitiv-ui/phrasebook": "^6.3.9",
-    "@refinitiv-ui/translate": "^6.0.36",
+    "@refinitiv-ui/translate": "^6.0.37",
     "@refinitiv-ui/utils": "^6.4.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d093a683a9b34ed8d0cbfcf3c8e4e14361b787a"
+  "gitHead": "ffbf4a93c4fe5f583dace149901da15cedc87bec"
 }