@refinitiv-ui/elements 7.8.0 → 7.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.9.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.8.0...@refinitiv-ui/elements@7.9.0) (2023-11-06)
+
+### Features
+
+- **core, elements:** custom validation for form fields ([#996](https://github.com/Refinitiv/refinitiv-ui/issues/996)) ([b8655a2](https://github.com/Refinitiv/refinitiv-ui/commit/b8655a2d2ea42aa16767ba1bd8b5ce9c67912f36))
+
 # [7.8.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.7.0...@refinitiv-ui/elements@7.8.0) (2023-10-31)
 
 ### Bug Fixes

package/lib/color-dialog/index.d.ts

@@ -138,7 +138,9 @@ export declare class ColorDialog extends Dialog {
      */
     protected update(changedProperties: PropertyValues): void;
     /**
-     * @inheritdoc
+     * Make sure that confirm/cancel events are fired appropriately
+     * All internal opened set events can be stoppable externally
+     * Use this instead of setting opened directly
      * Reset value model
      * @param opened True if opened
      * @returns {void}

package/lib/color-dialog/index.js

@@ -211,7 +211,9 @@ let ColorDialog = class ColorDialog extends Dialog {
         super.update(changedProperties);
     }
     /**
-     * @inheritdoc
+     * Make sure that confirm/cancel events are fired appropriately
+     * All internal opened set events can be stoppable externally
+     * Use this instead of setting opened directly
      * Reset value model
      * @param opened True if opened
      * @returns {void}

package/lib/combo-box/helpers/filter.js

@@ -1,3 +1,4 @@
+import escapeStringRegexp from 'escape-string-regexp';
 /**
  * Default filter used by combo box
  * @param el ComboBox instance to filter
@@ -13,8 +14,8 @@ export const defaultFilter = (el) => {
     // only created once per query
     const getRegularExpressionOfQuery = () => {
         if (el.query !== query || !queryRegExp) {
-            query = el.query || '';
-            queryRegExp = new RegExp(query.replace(/(\W)/g, '\\$1'), 'i');
+            query = el.query ?? '';
+            queryRegExp = new RegExp(escapeStringRegexp(query), 'i');
         }
         return queryRegExp;
     };

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

@@ -11,6 +11,21 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string | null"
+        },
+        {
+          "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",
@@ -68,16 +83,6 @@
           "name": "icon-has-action",
           "description": "Specify when icon need to be clickable",
           "type": "boolean"
-        },
-        {
-          "name": "maxlength",
-          "description": "Set character max limit",
-          "type": "number"
-        },
-        {
-          "name": "minlength",
-          "description": "Set character min limit",
-          "type": "number"
         }
       ],
       "properties": [
@@ -88,6 +93,24 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pattern",
+          "attribute": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string | null"
+        },
+        {
+          "name": "maxLength",
+          "attribute": "maxlength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minLength",
+          "attribute": "minlength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -115,22 +138,6 @@
           "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",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "placeholder",
           "attribute": "placeholder",

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

@@ -7,8 +7,6 @@ A form control element for email.
 | 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
 
@@ -18,10 +16,10 @@ A form control element for email.
 | `error`         | `error`           | `boolean`        | false   | Set error state                                  |
 | `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
 | `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                          |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
 | `multiple`      | `multiple`        | `boolean`        | false   | Set to multiple mode, allows multiple emails in a single input |
-| `pattern`       |                   | `string`         | ""      | Set regular expression for input validation      |
+| `pattern`       | `pattern`         | `string \| null` | 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/email-field/index.d.ts

@@ -21,14 +21,6 @@ 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
- *
- * @prop {string} [pattern=""] - Set regular expression for input validation
- *
  * @attr {string} placeholder - Set placeholder text
  * @prop {string} [placeholder=""] - Set placeholder text
  *
@@ -49,6 +41,18 @@ export declare class EmailField extends TextField {
      * Set to multiple mode, allows multiple emails in a single input
      */
     multiple: boolean;
+    /**
+     * Set regular expression for input validation
+     */
+    pattern: string | null;
+    /**
+     * Set character max limit
+     */
+    maxLength: number | null;
+    /**
+     * Set character min limit
+     */
+    minLength: number | null;
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
      * @returns element input validity
@@ -59,6 +63,11 @@ export declare class EmailField extends TextField {
      * @returns `true` if the element input is valid; otherwise, returns `false`.
      */
     reportValidity(): boolean;
+    /**
+     * 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;
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="email" - always `email`

package/lib/email-field/index.js

@@ -22,14 +22,6 @@ 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
- *
- * @prop {string} [pattern=""] - Set regular expression for input validation
- *
  * @attr {string} placeholder - Set placeholder text
  * @prop {string} [placeholder=""] - Set placeholder text
  *
@@ -52,6 +44,20 @@ let EmailField = class EmailField extends TextField {
          * Set to multiple mode, allows multiple emails in a single input
          */
         this.multiple = false;
+        /**
+         * Set regular expression for input validation
+         */
+        this.pattern = null;
+        /**
+         * 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;
     }
     /**
      * Returns `true` if the element input is valid; otherwise, returns `false`.
@@ -67,6 +73,16 @@ let EmailField = class EmailField extends TextField {
     reportValidity() {
         return super.reportValidity();
     }
+    /**
+     * 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;
+    }
     /**
      * Decorate `<input>` element with common properties extended from text-field:
      * type="email" - always `email`
@@ -78,13 +94,23 @@ let EmailField = class EmailField extends TextField {
             ...super.decorateInputMap,
             type: 'email',
             inputmode: 'email',
-            multiple: this.multiple
+            multiple: this.multiple,
+            pattern: this.pattern
         };
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EmailField.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], EmailField.prototype, "pattern", void 0);
+__decorate([
+    property({ type: Number, attribute: 'maxlength', reflect: true })
+], EmailField.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'minlength', reflect: true })
+], EmailField.prototype, "minLength", void 0);
 EmailField = __decorate([
     customElement('ef-email-field')
 ], EmailField);

package/lib/multi-input/index.js

@@ -7,7 +7,6 @@ import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import '../pill/index.js';
 import '../text-field/index.js';
 import { VERSION } from '../version.js';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * An input control component to display a selection of pills
  *
@@ -551,7 +550,7 @@ __decorate([
     property({ type: Number, attribute: 'maxlength', reflect: true })
 ], MultiInput.prototype, "maxLength", void 0);
 __decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true, hasChanged })
+    property({ type: Number, attribute: 'minlength', reflect: true })
 ], MultiInput.prototype, "minLength", void 0);
 __decorate([
     property({ type: Number, attribute: false })

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

@@ -288,6 +288,11 @@ export declare class NumberField extends FormFieldElement {
      * @returns {void}
      */
     stepDown(stepIncrement?: number): 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
+     */
+    private shouldValidate;
     /**
      * 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`.
@@ -300,37 +305,30 @@ export declare class NumberField extends FormFieldElement {
     checkValidity(): boolean;
     /**
      * @ignore
-     * @inheritDoc
      */
     get selectionStart(): number | null;
     /**
      * @ignore
-     * @inheritDoc
      */
     set selectionStart(index: number | null);
     /**
      * @ignore
-     * @inheritDoc
      */
     get selectionEnd(): number | null;
     /**
      * @ignore
-     * @inheritDoc
      */
     set selectionEnd(index: number | null);
     /**
      * @ignore
-     * @inheritDoc
      */
     get selectionDirection(): SelectionDirection | null;
     /**
      * @ignore
-     * @inheritDoc
      */
     set selectionDirection(direction: SelectionDirection | null);
     /**
      * @ignore
-     * @inheritDoc
      */
     setSelectionRange(startSelection: number | null, endSelection: number | null, selectionDirection?: SelectionDirection): void;
     /**

package/lib/number-field/index.js

@@ -166,7 +166,7 @@ let NumberField = class NumberField 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);
@@ -447,8 +447,9 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     setSilentlyValueAndNotify() {
-        // Nobody likes to see a red border
-        this.reportValidity();
+        if (this.shouldValidate()) {
+            this.reportValidity();
+        }
         const value = this.valueAsNumberString(this.inputValue);
         if (super.value !== value) {
             // here we must set the value silently to avoid re-rendering of input
@@ -639,6 +640,16 @@ let NumberField = class NumberField extends FormFieldElement {
     stepDown(stepIncrement) {
         this.applyStepDirection(Direction.Down, stepIncrement);
     }
+    /**
+     * 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 hasMax = this.max !== null;
+        const hasMin = this.min !== null;
+        const hasStep = this.step !== ANY_STEP;
+        return hasMax || hasMin || hasStep;
+    }
     /**
      * 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`.
@@ -675,7 +686,6 @@ let NumberField = class NumberField extends FormFieldElement {
     }
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     get selectionStart() {
@@ -684,7 +694,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     set selectionStart(index) {
@@ -693,7 +702,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     get selectionEnd() {
@@ -702,7 +710,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     set selectionEnd(index) {
@@ -711,7 +718,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     get selectionDirection() {
@@ -720,7 +726,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     set selectionDirection(direction) {
@@ -729,7 +734,6 @@ let NumberField = class NumberField extends FormFieldElement {
     /* c8 ignore stop */
     /**
      * @ignore
-     * @inheritDoc
      */
     /* c8 ignore start */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

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/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/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/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.8.0",
+  "version": "7.9.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -348,29 +348,30 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
     "date-fns": "^2.29.3",
+    "escape-string-regexp": "^5.0.0",
     "lightweight-charts": "^4.1.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^7.3.0",
-    "@refinitiv-ui/demo-block": "^7.1.0",
+    "@refinitiv-ui/core": "^7.4.0",
+    "@refinitiv-ui/demo-block": "^7.1.1",
     "@refinitiv-ui/i18n": "^7.1.0",
     "@refinitiv-ui/phrasebook": "^7.1.0",
     "@refinitiv-ui/test-helpers": "^7.1.0",
-    "@refinitiv-ui/translate": "^7.1.0",
+    "@refinitiv-ui/translate": "^7.1.1",
     "@refinitiv-ui/utils": "^7.2.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
     "@refinitiv-ui/browser-sparkline": "^1.0.0 || ^2.0.0",
-    "@refinitiv-ui/core": "^7.3.0",
+    "@refinitiv-ui/core": "^7.4.0",
     "@refinitiv-ui/i18n": "^7.1.0",
     "@refinitiv-ui/phrasebook": "^7.1.0",
-    "@refinitiv-ui/translate": "^7.1.0",
+    "@refinitiv-ui/translate": "^7.1.1",
     "@refinitiv-ui/utils": "^7.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0019ccc2f241a998c5e455b433c0e36720d5fe6"
+  "gitHead": "fd69344454e78b14bb7ecd5ddb4d9286e60e4c95"
 }