@refinitiv-ui/elements 7.14.2 → 7.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +3 -3
- package/lib/datetime-picker/custom-elements.json +13 -0
- package/lib/datetime-picker/custom-elements.md +29 -28
- package/lib/datetime-picker/index.d.ts +5 -0
- package/lib/datetime-picker/index.js +11 -0
- package/lib/tooltip/index.d.ts +0 -5
- package/lib/tooltip/index.js +7 -14
- package/lib/tooltip/managers/tooltip-manager.js +16 -0
- package/lib/version.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [7.15.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.14.2...@refinitiv-ui/elements@7.15.0) (2025-04-28)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **tooltip:** fix tooltip reopen when mouse leaves ([#1276](https://github.com/Refinitiv/refinitiv-ui/issues/1276)) ([2d47dd0](https://github.com/Refinitiv/refinitiv-ui/commit/2d47dd0e8667df3198fe5f62d53eb8d3df444b7d))
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
- **datetime-picker:** introduce preventCloseOnSelect to prevents the Picker from closing on date selection ([#1277](https://github.com/Refinitiv/refinitiv-ui/issues/1277)) ([6a9639b](https://github.com/Refinitiv/refinitiv-ui/commit/6a9639b76e7bfd99edced522173939047607a571))
|
|
15
|
+
|
|
6
16
|
## [7.14.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.14.1...@refinitiv-ui/elements@7.14.2) (2025-02-04)
|
|
7
17
|
|
|
8
18
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Element Framework
|
|
2
2
|
|
|
3
|
-
Element Framework (EF) is a collection of elements that includes theming capability within the LSEG Workspace
|
|
3
|
+
Element Framework (EF) is a collection of elements that includes theming capability within the LSEG Workspace standardised components. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
@@ -10,13 +10,13 @@ EF elements are published under single package.
|
|
|
10
10
|
npm install @refinitiv-ui/elements
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
The elements
|
|
13
|
+
The elements require a theme to instantiate itself in the app. LSEG Workspace theme is called Halo theme and you can install it from npm command.
|
|
14
14
|
|
|
15
15
|
```sh
|
|
16
16
|
npm install @refinitiv-ui/halo-theme
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow LSEG Workspace
|
|
19
|
+
Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow LSEG Workspace standardised components, it is required styles of some native elements e.g. typography.
|
|
20
20
|
|
|
21
21
|
<br>
|
|
22
22
|
|
|
@@ -76,6 +76,12 @@
|
|
|
76
76
|
"type": "boolean",
|
|
77
77
|
"default": "false"
|
|
78
78
|
},
|
|
79
|
+
{
|
|
80
|
+
"name": "prevent-close-on-select",
|
|
81
|
+
"description": "Prevents the Picker from closing on date selection.\nNote that if timepicker is true, the picker will remain open regardless of this flag.",
|
|
82
|
+
"type": "boolean",
|
|
83
|
+
"default": "false"
|
|
84
|
+
},
|
|
79
85
|
{
|
|
80
86
|
"name": "input-disabled",
|
|
81
87
|
"description": "Disable input part of the picker",
|
|
@@ -237,6 +243,13 @@
|
|
|
237
243
|
"type": "boolean",
|
|
238
244
|
"default": "false"
|
|
239
245
|
},
|
|
246
|
+
{
|
|
247
|
+
"name": "preventCloseOnSelect",
|
|
248
|
+
"attribute": "prevent-close-on-select",
|
|
249
|
+
"description": "Prevents the Picker from closing on date selection.\nNote that if timepicker is true, the picker will remain open regardless of this flag.",
|
|
250
|
+
"type": "boolean",
|
|
251
|
+
"default": "false"
|
|
252
|
+
},
|
|
240
253
|
{
|
|
241
254
|
"name": "inputDisabled",
|
|
242
255
|
"attribute": "input-disabled",
|
|
@@ -4,34 +4,35 @@ Control to pick date and time
|
|
|
4
4
|
|
|
5
5
|
## Properties
|
|
6
6
|
|
|
7
|
-
| Property | Attribute
|
|
8
|
-
|
|
9
|
-
| `amPm` | `am-pm`
|
|
10
|
-
| `clears` | `clears`
|
|
11
|
-
| `disabled` | `disabled`
|
|
12
|
-
| `duplex` | `duplex`
|
|
13
|
-
| `error` | `error`
|
|
14
|
-
| `filter` |
|
|
15
|
-
| `firstDayOfWeek` | `first-day-of-week`
|
|
16
|
-
| `format` | `format`
|
|
17
|
-
| `inputDisabled` | `input-disabled`
|
|
18
|
-
| `inputTriggerDisabled` | `input-trigger-disabled`
|
|
19
|
-
| `max` | `max`
|
|
20
|
-
| `min` | `min`
|
|
21
|
-
| `opened` | `opened`
|
|
22
|
-
| `placeholder` | `placeholder`
|
|
23
|
-
| `popupDisabled` | `popup-disabled`
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
7
|
+
| Property | Attribute | Type | Default | Description |
|
|
8
|
+
|------------------------|---------------------------|----------------------------------|---------------|--------------------------------------------------|
|
|
9
|
+
| `amPm` | `am-pm` | `boolean` | false | Toggles 12hr time display |
|
|
10
|
+
| `clears` | `clears` | `boolean` | false | Show clears button |
|
|
11
|
+
| `disabled` | `disabled` | `boolean` | false | Set disabled state |
|
|
12
|
+
| `duplex` | `duplex` | `"" \| "consecutive" \| "split"` | null | Display two calendar pickers. |
|
|
13
|
+
| `error` | `error` | `boolean` | false | Set error state |
|
|
14
|
+
| `filter` | | `DatetimePickerFilter \| null` | null | Custom filter, used for enabling/disabling certain dates |
|
|
15
|
+
| `firstDayOfWeek` | `first-day-of-week` | `number \| undefined` | | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
|
|
16
|
+
| `format` | `format` | `string` | "dd-MMM-yyyy" | Set the datetime format<br />Based on date-fns formats (https://date-fns.org/) |
|
|
17
|
+
| `inputDisabled` | `input-disabled` | `boolean` | false | Disable input part of the picker |
|
|
18
|
+
| `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. |
|
|
19
|
+
| `max` | `max` | `string` | "" | Set maximum date |
|
|
20
|
+
| `min` | `min` | `string` | "" | Set minimum date |
|
|
21
|
+
| `opened` | `opened` | `boolean` | false | Toggles the opened state of the list |
|
|
22
|
+
| `placeholder` | `placeholder` | `string` | "dd-MMM-yyyy" | Set placeholder text default depends on format |
|
|
23
|
+
| `popupDisabled` | `popup-disabled` | `boolean` | false | Disable the popup |
|
|
24
|
+
| `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. |
|
|
25
|
+
| `range` | `range` | `boolean` | false | Set to switch to range select mode |
|
|
26
|
+
| `readonly` | `readonly` | `boolean` | false | Set readonly state |
|
|
27
|
+
| `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. |
|
|
28
|
+
| `timepicker` | `timepicker` | `boolean` | false | Toggle to display the time picker |
|
|
29
|
+
| `value` | `value` | `string` | "" | Current date time value |
|
|
30
|
+
| `values` | `values` | `string[]` | [] | Set multiple selected values |
|
|
31
|
+
| `view` | `view` | `string` | "" | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
|
|
32
|
+
| `views` | | `string[]` | [] | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
|
|
33
|
+
| `warning` | `warning` | `boolean` | false | Set warning state |
|
|
34
|
+
| `weekdaysOnly` | `weekdays-only` | `boolean` | false | Only enable weekdays |
|
|
35
|
+
| `weekendsOnly` | `weekends-only` | `boolean` | false | Only enable weekends |
|
|
35
36
|
|
|
36
37
|
## Methods
|
|
37
38
|
|
|
@@ -154,6 +154,11 @@ export declare class DatetimePicker extends FormFieldElement implements MultiVal
|
|
|
154
154
|
* Clicking on the input will no longer open the picker.
|
|
155
155
|
*/
|
|
156
156
|
inputTriggerDisabled: boolean;
|
|
157
|
+
/**
|
|
158
|
+
* Prevents the Picker from closing on date selection.
|
|
159
|
+
* Note that if timepicker is true, the picker will remain open regardless of this flag.
|
|
160
|
+
*/
|
|
161
|
+
preventCloseOnSelect: boolean;
|
|
157
162
|
/**
|
|
158
163
|
* Disable input part of the picker
|
|
159
164
|
*/
|
|
@@ -104,6 +104,11 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
|
|
|
104
104
|
* Clicking on the input will no longer open the picker.
|
|
105
105
|
*/
|
|
106
106
|
this.inputTriggerDisabled = false;
|
|
107
|
+
/**
|
|
108
|
+
* Prevents the Picker from closing on date selection.
|
|
109
|
+
* Note that if timepicker is true, the picker will remain open regardless of this flag.
|
|
110
|
+
*/
|
|
111
|
+
this.preventCloseOnSelect = false;
|
|
107
112
|
/**
|
|
108
113
|
* Disable input part of the picker
|
|
109
114
|
*/
|
|
@@ -791,6 +796,9 @@ let DatetimePicker = class DatetimePicker extends FormFieldElement {
|
|
|
791
796
|
// Close popup if there is no time picker
|
|
792
797
|
const newValues = this.values;
|
|
793
798
|
if (!this.timepicker && newValues[0] && (this.range ? newValues[1] : true)) {
|
|
799
|
+
if (this.preventCloseOnSelect) {
|
|
800
|
+
return;
|
|
801
|
+
}
|
|
794
802
|
this.setOpened(false);
|
|
795
803
|
/**
|
|
796
804
|
* Custom cell selection delegates focus back to the text field when the overlay is closed,
|
|
@@ -1276,6 +1284,9 @@ __decorate([
|
|
|
1276
1284
|
__decorate([
|
|
1277
1285
|
property({ type: Boolean, attribute: 'input-trigger-disabled' })
|
|
1278
1286
|
], DatetimePicker.prototype, "inputTriggerDisabled", void 0);
|
|
1287
|
+
__decorate([
|
|
1288
|
+
property({ type: Boolean, attribute: 'prevent-close-on-select' })
|
|
1289
|
+
], DatetimePicker.prototype, "preventCloseOnSelect", void 0);
|
|
1279
1290
|
__decorate([
|
|
1280
1291
|
property({ type: Boolean, attribute: 'input-disabled', reflect: true })
|
|
1281
1292
|
], DatetimePicker.prototype, "inputDisabled", void 0);
|
package/lib/tooltip/index.d.ts
CHANGED
|
@@ -156,11 +156,6 @@ declare class Tooltip extends BasicElement {
|
|
|
156
156
|
* Hide tooltip
|
|
157
157
|
* @returns {void}
|
|
158
158
|
*/
|
|
159
|
-
private hideTooltip;
|
|
160
|
-
/**
|
|
161
|
-
* Reset tooltip
|
|
162
|
-
* @returns {void}
|
|
163
|
-
*/
|
|
164
159
|
private resetTooltip;
|
|
165
160
|
/**
|
|
166
161
|
* Run when mouse is moving over the document
|
package/lib/tooltip/index.js
CHANGED
|
@@ -63,11 +63,15 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
|
|
|
63
63
|
window.clearTimeout(this.timerTimeout);
|
|
64
64
|
};
|
|
65
65
|
/**
|
|
66
|
-
*
|
|
66
|
+
* Hide tooltip
|
|
67
67
|
* @returns {void}
|
|
68
68
|
*/
|
|
69
69
|
this.resetTooltip = () => {
|
|
70
|
-
this.
|
|
70
|
+
this.reset();
|
|
71
|
+
this.matchTarget = null;
|
|
72
|
+
this.matchTargetRect = null;
|
|
73
|
+
this.positionTarget = null;
|
|
74
|
+
this.setOpened(false);
|
|
71
75
|
};
|
|
72
76
|
/**
|
|
73
77
|
* Run when mouse is moving over the document
|
|
@@ -84,7 +88,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
|
|
|
84
88
|
*/
|
|
85
89
|
this.onClick = () => {
|
|
86
90
|
this.clicked = true;
|
|
87
|
-
this.
|
|
91
|
+
this.resetTooltip();
|
|
88
92
|
};
|
|
89
93
|
/**
|
|
90
94
|
* Run when document mouse out event happens
|
|
@@ -329,17 +333,6 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
|
|
|
329
333
|
}
|
|
330
334
|
this.appendChild(contentNode);
|
|
331
335
|
}
|
|
332
|
-
/**
|
|
333
|
-
* Hide tooltip
|
|
334
|
-
* @returns {void}
|
|
335
|
-
*/
|
|
336
|
-
hideTooltip() {
|
|
337
|
-
this.reset();
|
|
338
|
-
this.matchTarget = null;
|
|
339
|
-
this.matchTargetRect = null;
|
|
340
|
-
this.positionTarget = null;
|
|
341
|
-
this.setOpened(false);
|
|
342
|
-
}
|
|
343
336
|
/**
|
|
344
337
|
* Try to show the tooltip if it matches the target
|
|
345
338
|
* @param paths The paths leading to target
|
|
@@ -28,6 +28,7 @@ class TooltipManager {
|
|
|
28
28
|
* @returns {void}
|
|
29
29
|
*/
|
|
30
30
|
this.onClick = (event) => {
|
|
31
|
+
this.cancelThrottler();
|
|
31
32
|
this.registry.forEach(({ click }) => click(event));
|
|
32
33
|
};
|
|
33
34
|
/**
|
|
@@ -35,6 +36,7 @@ class TooltipManager {
|
|
|
35
36
|
* @returns {void}
|
|
36
37
|
*/
|
|
37
38
|
this.onMouseOut = (event) => {
|
|
39
|
+
this.cancelThrottler();
|
|
38
40
|
this.registry.forEach(({ mouseout }) => mouseout(event));
|
|
39
41
|
};
|
|
40
42
|
/**
|
|
@@ -42,6 +44,7 @@ class TooltipManager {
|
|
|
42
44
|
* @returns {void}
|
|
43
45
|
*/
|
|
44
46
|
this.onMouseLeave = (event) => {
|
|
47
|
+
this.cancelThrottler();
|
|
45
48
|
this.registry.forEach(({ mouseleave }) => mouseleave(event));
|
|
46
49
|
};
|
|
47
50
|
/**
|
|
@@ -49,6 +52,7 @@ class TooltipManager {
|
|
|
49
52
|
* @returns {void}
|
|
50
53
|
*/
|
|
51
54
|
this.onWheel = (event) => {
|
|
55
|
+
this.cancelThrottler();
|
|
52
56
|
this.registry.forEach(({ wheel }) => wheel(event));
|
|
53
57
|
};
|
|
54
58
|
/**
|
|
@@ -56,6 +60,7 @@ class TooltipManager {
|
|
|
56
60
|
* @returns {void}
|
|
57
61
|
*/
|
|
58
62
|
this.onKeyDown = (event) => {
|
|
63
|
+
this.cancelThrottler();
|
|
59
64
|
this.registry.forEach(({ keydown }) => keydown(event));
|
|
60
65
|
};
|
|
61
66
|
/**
|
|
@@ -63,6 +68,7 @@ class TooltipManager {
|
|
|
63
68
|
* @returns {void}
|
|
64
69
|
*/
|
|
65
70
|
this.onBlur = (event) => {
|
|
71
|
+
this.cancelThrottler();
|
|
66
72
|
this.registry.forEach(({ blur }) => blur(event));
|
|
67
73
|
};
|
|
68
74
|
}
|
|
@@ -88,6 +94,16 @@ class TooltipManager {
|
|
|
88
94
|
}
|
|
89
95
|
}
|
|
90
96
|
}
|
|
97
|
+
/**
|
|
98
|
+
* Cancel the pending task of throttled mousemove event listener.
|
|
99
|
+
* This prevents the task from running out of order compared to the event dispatching sequence
|
|
100
|
+
* due to its setTimeout usage.
|
|
101
|
+
* Any event listener hiding the tooltip should call this method.
|
|
102
|
+
* @returns {void}
|
|
103
|
+
*/
|
|
104
|
+
cancelThrottler() {
|
|
105
|
+
this.titleThrottler.task?.cancel();
|
|
106
|
+
}
|
|
91
107
|
register(tooltip, documentCallbacks) {
|
|
92
108
|
if (!this.registry.size) {
|
|
93
109
|
const eventOptions = { passive: true };
|
package/lib/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const VERSION = '7.
|
|
1
|
+
export const VERSION = '7.15.0';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@refinitiv-ui/elements",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.15.0",
|
|
4
4
|
"description": "Element Framework Elements",
|
|
5
5
|
"author": "LSEG",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -490,5 +490,5 @@
|
|
|
490
490
|
"publishConfig": {
|
|
491
491
|
"access": "public"
|
|
492
492
|
},
|
|
493
|
-
"gitHead": "
|
|
493
|
+
"gitHead": "7bd7e6df76272a018849edcd41c69d82a8d727c0"
|
|
494
494
|
}
|