@refinitiv-ui/elements 7.7.0 → 7.9.0

package/lib/overlay/managers/viewport-manager.d.ts

@@ -1,5 +1,5 @@
-import '../elements/overlay-viewport.js';
 import type { Overlay } from '../elements/overlay';
+import '../elements/overlay-viewport.js';
 import type { ViewAreaInfo } from '../helpers/types';
 /**
  * Viewport manager singleton is responsible for getting

package/lib/overlay/managers/viewport-manager.js

@@ -95,6 +95,7 @@ export class ViewportManager {
         // Safari does but zooming doesn't update this property value
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
+        // TODO: Remove @ts-ignore and re-test again when standardized zoom is implemented across major browsers and TypeScript, https://github.com/w3c/csswg-drafts/issues/5623
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         const zoom = parseFloat(window.getComputedStyle(document.body).zoom);
         const screenHeight = screenRect.height / zoom;

package/lib/overlay-menu/helpers/types.d.ts

@@ -1,6 +1,6 @@
+import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import type { Item, ItemData } from '../../item';
 import type { OverlayMenu } from '../index';
-import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 export type NestedMenu = {
     menu: OverlayMenu;
     item: Item;

package/lib/overlay-menu/managers/menu-manager.d.ts

@@ -1,5 +1,5 @@
-import { OverlayMenu } from '../index.js';
 import type { Item } from '../../item';
+import { OverlayMenu } from '../index.js';
 /**
  * Overlay menu manager monitors menu nesting and ensures
  * that only a single menu tree can be opened

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

@@ -5,6 +5,16 @@
       "name": "ef-password-field",
       "description": "A form control element for password.",
       "attributes": [
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "description": "Set disabled state",
@@ -17,6 +27,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "placeholder",
           "description": "Set placeholder text",
@@ -46,19 +62,21 @@
           "description": "Input's value",
           "type": "string",
           "default": "\"\""
-        },
+        }
+      ],
+      "properties": [
         {
-          "name": "maxlength",
+          "name": "maxLength",
+          "attribute": "maxlength",
           "description": "Set character max limit",
-          "type": "number"
+          "type": "number | null"
         },
         {
-          "name": "minlength",
+          "name": "minLength",
+          "attribute": "minlength",
           "description": "Set character min limit",
-          "type": "number"
-        }
-      ],
-      "properties": [
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -73,18 +91,9 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "maxLength",
-          "description": "Set character max limit",
-          "type": "number | null"
-        },
-        {
-          "name": "minLength",
-          "description": "Set character min limit",
-          "type": "number | null"
-        },
         {
           "name": "pattern",
+          "attribute": "pattern",
           "description": "Set regular expression for input validation",
           "type": "string",
           "default": "\"\""

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

@@ -2,22 +2,15 @@
 
 A form control element for password.
 
-## Attributes
-
-| Attribute   | Type     | Description             |
-|-------------|----------|-------------------------|
-| `maxlength` | `number` | Set character max limit |
-| `minlength` | `number` | Set character min limit |
-
 ## Properties
 
 | Property      | Attribute     | Type             | Default | Description                                      |
 |---------------|---------------|------------------|---------|--------------------------------------------------|
 | `disabled`    | `disabled`    | `boolean`        | false   | Set disabled state                               |
 | `error`       | `error`       | `boolean`        | false   | Set error state                                  |
-| `maxLength`   |               | `number \| null` | null    | Set character max limit                          |
-| `minLength`   |               | `number \| null` | null    | Set character min limit                          |
-| `pattern`     |               | `string`         | ""      | Set regular expression for input validation      |
+| `maxLength`   | `maxlength`   | `number \| null` | null    | Set character max limit                          |
+| `minLength`   | `minlength`   | `number \| null` | null    | Set character min limit                          |
+| `pattern`     | `pattern`     | `string`         | ""      | Set regular expression for input validation      |
 | `placeholder` | `placeholder` | `string`         | ""      | Set placeholder text                             |
 | `readonly`    | `readonly`    | `boolean`        | false   | Set readonly state                               |
 | `transparent` | `transparent` | `boolean`        | false   | Disables all other states and border/background styles. |

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

@@ -17,12 +17,7 @@ import { TextField } from '../text-field/index.js';
  * @attr {boolean} error - Set error state
  * @prop {boolean} [error=false] - Set error state
  *
- * @attr {number} maxlength - Set character max limit
- * @prop {number | null} [maxLength=null] - Set character max limit
- *
- * @attr {number} minlength - Set character min limit
- * @prop {number | null} [minLength=null] - Set character min limit
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -41,6 +36,14 @@ import { TextField } from '../text-field/index.js';
  * @prop {string} [value=""] - Input's value
  */
 export declare class PasswordField extends TextField {
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
     /**
      * Used for translations
      */

package/lib/password-field/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, unsafeCSS } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
@@ -20,12 +21,7 @@ import { deregisterOverflowTooltip } from '../tooltip/index.js';
  * @attr {boolean} error - Set error state
  * @prop {boolean} [error=false] - Set error state
  *
- * @attr {number} maxlength - Set character max limit
- * @prop {number | null} [maxLength=null] - Set character max limit
- *
- * @attr {number} minlength - Set character min limit
- * @prop {number | null} [minLength=null] - Set character min limit
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -46,6 +42,16 @@ import { deregisterOverflowTooltip } from '../tooltip/index.js';
 let PasswordField = class PasswordField extends TextField {
     constructor() {
         super(...arguments);
+        /**
+         * Set character max limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.maxLength = null;
+        /**
+         * Set character min limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.minLength = null;
         /**
          * Defines whether password is visible or not
          */
@@ -150,6 +156,12 @@ let PasswordField = class PasswordField extends TextField {
         this.isPasswordVisible = !this.isPasswordVisible;
     }
 };
+__decorate([
+    property({ type: Number, attribute: 'maxlength', reflect: true })
+], PasswordField.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minlength', reflect: true })
+], PasswordField.prototype, "minLength", void 0);
 __decorate([
     translate({ scope: 'ef-password-field' })
 ], PasswordField.prototype, "t", void 0);

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

@@ -5,6 +5,16 @@
       "name": "ef-search-field",
       "description": "Form control to get a search input from users.",
       "attributes": [
+        {
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "description": "Set disabled state",
@@ -23,6 +33,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "placeholder",
           "description": "Set placeholder text",
@@ -57,19 +73,21 @@
           "name": "icon-has-action",
           "description": "Specify when icon need to be clickable",
           "type": "boolean"
-        },
+        }
+      ],
+      "properties": [
         {
-          "name": "maxlength",
+          "name": "maxLength",
+          "attribute": "maxlength",
           "description": "Set character max limit",
-          "type": "number"
+          "type": "number | null"
         },
         {
-          "name": "minlength",
+          "name": "minLength",
+          "attribute": "minlength",
           "description": "Set character min limit",
-          "type": "number"
-        }
-      ],
-      "properties": [
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -91,18 +109,9 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "maxLength",
-          "description": "Set character max limit",
-          "type": "number | null"
-        },
-        {
-          "name": "minLength",
-          "description": "Set character min limit",
-          "type": "number | null"
-        },
         {
           "name": "pattern",
+          "attribute": "pattern",
           "description": "Set regular expression for input validation",
           "type": "string",
           "default": "\"\""

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

@@ -7,8 +7,6 @@ Form control to get a search input from users.
 | Attribute         | Type      | Description                            |
 |-------------------|-----------|----------------------------------------|
 | `icon-has-action` | `boolean` | Specify when icon need to be clickable |
-| `maxlength`       | `number`  | Set character max limit                |
-| `minlength`       | `number`  | Set character min limit                |
 
 ## Properties
 
@@ -17,9 +15,9 @@ Form control to get a search input from users.
 | `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
 | `error`         | `error`           | `boolean`        | false   | Set error state                                  |
 | `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
-| `maxLength`     |                   | `number \| null` | null    | Set character max limit                          |
-| `minLength`     |                   | `number \| null` | null    | Set character min limit                          |
-| `pattern`       |                   | `string`         | ""      | Set regular expression for input validation      |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
 | `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
 | `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
 | `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |

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

@@ -21,12 +21,7 @@ import { TextField } from '../text-field/index.js';
  * @attr {boolean} icon-has-action - Specify when icon need to be clickable
  * @prop {boolean} [iconHasAction=false] - Specify when icon need to be clickable
  *
- * @attr {number} maxlength - Set character max limit
- * @prop {number | null} [maxLength=null] - Set character max limit
- *
- * @attr {number} minlength - Set character min limit
- * @prop {number | null} [minLength=null] - Set character min limit
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -45,6 +40,14 @@ import { TextField } from '../text-field/index.js';
  * @prop {string} [value=""] - Input's value
  */
 export declare class SearchField extends TextField {
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
     /**
      * Used for translations
      */

package/lib/search-field/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import '@refinitiv-ui/phrasebook/locale/en/search-field.js';
 import { translate } from '@refinitiv-ui/translate';
 import '../icon/index.js';
@@ -21,12 +22,7 @@ import { TextField } from '../text-field/index.js';
  * @attr {boolean} icon-has-action - Specify when icon need to be clickable
  * @prop {boolean} [iconHasAction=false] - Specify when icon need to be clickable
  *
- * @attr {number} maxlength - Set character max limit
- * @prop {number | null} [maxLength=null] - Set character max limit
- *
- * @attr {number} minlength - Set character min limit
- * @prop {number | null} [minLength=null] - Set character min limit
- *
+ * @attr {string} pattern - Set regular expression for input validation
  * @prop {string} [pattern=""] - Set regular expression for input validation
  *
  * @attr {string} placeholder - Set placeholder text
@@ -45,6 +41,19 @@ import { TextField } from '../text-field/index.js';
  * @prop {string} [value=""] - Input's value
  */
 let SearchField = class SearchField extends TextField {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set character max limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.maxLength = null;
+        /**
+         * Set character min limit
+         */
+        // override to merely fix missing attribute from component's doc
+        this.minLength = null;
+    }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="search" - always `search`
@@ -90,6 +99,12 @@ let SearchField = class SearchField extends TextField {
     `;
     }
 };
+__decorate([
+    property({ type: Number, attribute: 'maxlength', reflect: true })
+], SearchField.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minlength', reflect: true })
+], SearchField.prototype, "minLength", void 0);
 __decorate([
     translate({ scope: 'ef-search-field' })
 ], SearchField.prototype, "t", void 0);

package/lib/sidebar-layout/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../layout/index.js';
 import type { Layout } from '../layout';
+import '../layout/index.js';
 /**
  * Provides an app layout with sidebar.
  * There are 4 sections that can be slotted a component in.

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

@@ -8,7 +8,7 @@
         {
           "name": "pattern",
           "description": "Set regular expression for input validation",
-          "type": "string",
+          "type": "string | null",
           "default": "\"\""
         },
         {
@@ -80,7 +80,7 @@
           "name": "pattern",
           "attribute": "pattern",
           "description": "Set regular expression for input validation",
-          "type": "string",
+          "type": "string | null",
           "default": "\"\""
         },
         {

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

@@ -12,7 +12,7 @@ Form control element for text.
 | `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
 | `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
 | `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
-| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
+| `pattern`       | `pattern`         | `string \| null` | ""      | Set regular expression for input validation      |
 | `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
 | `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
 | `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |

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

@@ -45,7 +45,7 @@ export declare class TextField extends FormFieldElement {
     /**
      * Set regular expression for input validation
      */
-    pattern: string;
+    pattern: string | null;
     /**
      * Specify icon to display in input. Value can be icon name
      */
@@ -80,6 +80,11 @@ export declare class TextField extends FormFieldElement {
      * @returns shouldUpdate
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    protected shouldValidate(): boolean;
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
      * @returns element input validity

package/lib/text-field/index.js

@@ -6,7 +6,6 @@ import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import '../icon/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { VERSION } from '../version.js';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * Form control element for text.
  *
@@ -114,7 +113,7 @@ let TextField = class TextField extends FormFieldElement {
      * @returns {void}
      */
     update(changedProperties) {
-        if (changedProperties.has(FocusedPropertyKey) && !this.focused) {
+        if (changedProperties.has(FocusedPropertyKey) && !this.focused && this.shouldValidate()) {
             this.reportValidity();
         }
         super.update(changedProperties);
@@ -130,6 +129,16 @@ let TextField = class TextField extends FormFieldElement {
             this.syncInputValue();
         }
     }
+    /**
+     * Returns whether input of the element should be validated or not based on the existence of validation constraints
+     * @returns true if there is at least one validation constraint
+     */
+    shouldValidate() {
+        const hasMaxLength = this.maxLength !== null;
+        const hasMinLength = this.minLength !== null;
+        const hasPattern = !!this.pattern;
+        return hasMaxLength || hasMinLength || hasPattern;
+    }
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
      * @returns element input validity
@@ -186,7 +195,9 @@ let TextField = class TextField extends FormFieldElement {
     onPossibleValueChange(event) {
         const value = this.inputElement?.value || '';
         this.setValueAndNotify(value);
-        this.reportValidity();
+        if (this.shouldValidate()) {
+            this.reportValidity();
+        }
     }
     /**
      * Fires event on `icon` click
@@ -246,7 +257,7 @@ let TextField = class TextField extends FormFieldElement {
     }
 };
 __decorate([
-    property({ type: String, hasChanged })
+    property({ type: String })
 ], TextField.prototype, "pattern", void 0);
 __decorate([
     property({ type: String, reflect: true })
@@ -258,7 +269,7 @@ __decorate([
     property({ type: Number, attribute: 'maxlength', reflect: true })
 ], TextField.prototype, "maxLength", void 0);
 __decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
+    property({ type: Number, attribute: 'minlength', reflect: true })
 ], TextField.prototype, "minLength", void 0);
 TextField = __decorate([
     customElement('ef-text-field')

package/lib/tooltip/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
 import '../overlay/index.js';
 import './elements/title-tooltip.js';
 import { deregister as deregisterOverflowTooltip, register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
 import { TooltipCondition, TooltipPosition, TooltipRenderer } from './helpers/types.js';
-import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
 /**
  * Tooltip displays extra information when the
  * user hovers the pointer over an item.

package/lib/tree/elements/tree-item.d.ts

@@ -2,8 +2,8 @@ import { JSXInterface } from '../../jsx';
 import { ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../../checkbox/index.js';
 import '../../icon/index.js';
-import { CheckedState } from '../managers/tree-manager.js';
 import type { TreeDataItem } from '../helpers/types';
+import { CheckedState } from '../managers/tree-manager.js';
 /**
  * Displays a tree list item.
  * Groups display expansion arrows.

package/lib/tree/elements/tree.d.ts

@@ -3,9 +3,9 @@ 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';
-import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types';
 /**
  * Displays a tree structure
  * to be used for menus and group selections

package/lib/tree/helpers/filter.js

@@ -1,3 +1,4 @@
+import escapeStringRegexp from 'escape-string-regexp';
 /**
  * Default filter used by tree
  * @param el Tree instance to filter
@@ -14,7 +15,7 @@ export const defaultFilter = (el) => {
     const getRegularExpressionOfQuery = () => {
         if (el.query !== query || !queryRegExp) {
             query = el.query || '';
-            queryRegExp = new RegExp(query.replace(/(\W)/g, '\\$1'), 'i');
+            queryRegExp = new RegExp(escapeStringRegexp(query), 'i');
         }
         return queryRegExp;
     };

package/lib/tree/managers/tree-manager.d.ts

@@ -1,5 +1,5 @@
-import type { TreeDataItem } from '../helpers/types';
 import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import type { TreeDataItem } from '../helpers/types';
 export declare enum CheckedState {
     CHECKED = 1,
     UNCHECKED = 0,

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

@@ -7,14 +7,14 @@ import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import '../button/index.js';
 import '../checkbox/index.js';
 import { ComboBox, ComboBoxFilter as TreeSelectFilter } from '../combo-box/index.js';
+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 { TreeManager, TreeManagerMode } from '../tree/managers/tree-manager.js';
-import type { CheckChangedEvent } from '../events';
-import type { Overlay } from '../overlay';
 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 type { TreeSelectFilter, TreeSelectDataItem, TreeSelectData };

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.7.0';
+export const VERSION = '7.9.0';