@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/list/index.js

@@ -1,13 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, css, customElement, html, property, WarningNotice } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import '../item';
-import { ListRenderer } from './helpers/list-renderer';
+import { __decorate } from "tslib";
+import { ControlElement, css, html, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { ListRenderer } from './helpers/list-renderer.js';
+import '../item/index.js';
 export { ListRenderer };
 /**
  * Key direction
@@ -20,10 +18,12 @@ var Direction;
 const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.');
 /**
  * Provides listing and immutable selection
+ * @fires value-changed - Dispatched when value changes
  */
 let List = class List extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'listbox';
         /**
          * Used to timestamp renders.
          * This enables diff checking against item updates,
@@ -35,7 +35,7 @@ let List = class List extends ControlElement {
          * @returns Update promise.
          */
         this.modificationUpdate = () => {
-            void this.requestUpdate();
+            this.requestUpdate();
         };
         /**
          * Item map; used to link element nodes to data items.
@@ -67,15 +67,27 @@ let List = class List extends ControlElement {
          * Disable selections
          */
         this.stateless = false;
+        /**
+         * Aria indicating that list supports multiple selection
+         */
+        this.ariaMultiselectable = 'false';
         /**
          * Allow multiple selections
          */
         this.multiple = false;
         this._data = null;
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * The data object, used to render the list.
      * @type {ListData}
+     * @default null
      */
     get data() {
         return this._data;
@@ -99,11 +111,12 @@ let List = class List extends ControlElement {
         );
         this.clearMaps();
         this._data = value;
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value() {
         return this.values[0] || '';
@@ -116,12 +129,14 @@ let List = class List extends ControlElement {
             if (item) {
                 this.composer.setItemPropertyValue(item, 'selected', true);
             }
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     /**
      * Returns a values collection of the currently
      * selected item values
+     * @type {string[]}
+     * @default []
      * @readonly
      */
     get values() {
@@ -148,7 +163,7 @@ let List = class List extends ControlElement {
                     matches.forEach((match) => this.composer.setItemPropertyValue(match, 'selected', true));
                     return !this.multiple; // Only set the fist value if multiple is not enabled
                 });
-                void this.requestUpdate('values', oldValue);
+                this.requestUpdate('values', oldValue);
             }
         }
     }
@@ -183,12 +198,28 @@ let List = class List extends ControlElement {
         this.highlightItem(this.getNextHighlightItem(Direction.UP), true);
     }
     /**
-     * Navigate up through the list items
+     * Navigate down through the list items
      * @returns {void}
      */
     down() {
         this.highlightItem(this.getNextHighlightItem(Direction.DOWN), true);
     }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    first() {
+        const firstItem = this.itemMap.get(this.tabbableElements[0]);
+        this.highlightItem(firstItem, true);
+    }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    last() {
+        const lastItem = this.itemMap.get(this.tabbableElements[this.tabbableElements.length - 1]);
+        this.highlightItem(lastItem, true);
+    }
     /**
      * Proxy for querying the composer
      * @param engine composer querying engine
@@ -346,6 +377,12 @@ let List = class List extends ControlElement {
             case 'ArrowDown':
                 this.down();
                 break;
+            case 'Home':
+                this.first();
+                break;
+            case 'End':
+                this.last();
+                break;
             default:
                 return;
         }
@@ -430,7 +467,7 @@ let List = class List extends ControlElement {
     clearSelection() {
         this.queryItemsByPropertyValue('selected', true)
             .forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Queries and returns all renderable items.
@@ -446,21 +483,22 @@ let List = class List extends ControlElement {
      * Allows for a mapping to be created between
      * Data Item and Item Element.
      * @param item Data item context
-     * @param reusableElement Child element available for reuse
+     * @param recyclableElements Child elements available for reuse
      * @returns List item element
      */
-    createListItem(item, reusableElement) {
+    createListItem(item, recyclableElements) {
         const cachedElement = this.elementFromItem(item);
         const previousTimestamp = this.renderTimestamp.get(item) || NaN;
         if (cachedElement && previousTimestamp > this.composer.getItemTimestamp(item)) {
             return cachedElement; // don't re-render if the item hasn't changed
         }
-        if (!cachedElement && reusableElement) {
+        if (!cachedElement && recyclableElements.length) {
             // Remove any old ties with the reusable element.
-            const previousItem = this.itemFromElement(reusableElement);
-            this.itemMap.delete(reusableElement);
+            const recycledElement = recyclableElements.pop();
+            const previousItem = this.itemFromElement(recycledElement);
+            this.itemMap.delete(recycledElement);
             previousItem && this.elementMap.delete(previousItem);
-            this.elementMap.set(item, reusableElement);
+            this.elementMap.set(item, recycledElement);
         }
         const freshElement = this.renderer(item, this.composer, this.elementFromItem(item));
         if (cachedElement && cachedElement !== freshElement) {
@@ -491,34 +529,49 @@ let List = class List extends ControlElement {
          */
         this.notifyPropertyChange('value', this.value);
     }
+    /**
+     * Calculates what elements can be recycled safely
+     * @param renderItems Current items to render
+     * @returns Collection of elements to be recycled
+     */
+    calculateRecyclableElements(renderItems) {
+        const result = [];
+        for (const element of this.children) {
+            const item = this.itemFromElement(element);
+            if (item && !renderItems.includes(item)) {
+                result.push(element);
+            }
+        }
+        return result;
+    }
     /**
      * Renders updates to light DOM
      * @returns {void}
      */
     renderLightDOM() {
+        const renderItems = this.renderItems;
         const currentChildren = Array.from(this.children);
-        const renderChildren = this.renderItems.map((item, index) => this.createListItem(item, currentChildren[index]));
-        const additions = renderChildren.filter(item => !currentChildren.includes(item));
-        const deletions = currentChildren.filter(item => !renderChildren.includes(item));
-        deletions.forEach(item => this.removeChild(item));
-        additions.forEach(item => {
-            const index = renderChildren.indexOf(item);
+        const recyclableElements = this.calculateRecyclableElements(renderItems);
+        const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
+        const deletions = currentChildren.filter(element => !renderChildren.includes(element));
+        deletions.forEach(element => this.removeChild(element));
+        renderChildren.forEach((element, index) => {
             if (this.children.length === index) {
-                this.appendChild(item);
+                this.appendChild(element);
             }
-            else {
-                this.insertBefore(item, this.children[index]);
+            else if (element !== this.children[index]) {
+                this.insertBefore(element, this.children[index]);
             }
         });
     }
     firstUpdated(changeProperties) {
         super.firstUpdated(changeProperties);
-        this.addEventListener('keydown', event => this.onKeyDown(event));
-        this.addEventListener('tap', event => this.onTap(event));
-        this.addEventListener('mousemove', event => this.onMouse(event));
-        this.addEventListener('mouseleave', () => this.clearHighlighted());
-        this.addEventListener('focusin', event => this.onFocus(event));
-        this.addEventListener('focusout', () => this.onBlur());
+        this.addEventListener('keydown', this.onKeyDown);
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('mousemove', this.onMouse);
+        this.addEventListener('mouseleave', this.clearHighlighted);
+        this.addEventListener('focusin', this.onFocus);
+        this.addEventListener('focusout', this.onBlur);
     }
     update(changeProperties) {
         if (changeProperties.has('multiple')) {
@@ -526,8 +579,14 @@ let List = class List extends ControlElement {
         }
         return super.update(changeProperties);
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('multiple')) {
+            this.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+        }
+    }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -558,6 +617,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], List.prototype, "stateless", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-multiselectable' })
+], List.prototype, "ariaMultiselectable", void 0);
 __decorate([
     property({ type: Boolean })
 ], List.prototype, "multiple", void 0);
@@ -576,4 +638,3 @@ List = __decorate([
     })
 ], List);
 export { List };
-//# sourceMappingURL=index.js.map

package/lib/list/renderer.d.ts

@@ -1,5 +1,5 @@
-import { ExtensibleFunction } from './extensible-function';
-import { DataItem, CollectionComposer } from '@refinitiv-ui/utils';
+import { ExtensibleFunction } from './extensible-function.js';
+import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
 /**
  * Render function interface
  * TODO: Move this to @refinitiv-ui/utils

package/lib/list/renderer.js

@@ -1,4 +1,4 @@
-import { ExtensibleFunction } from './extensible-function';
+import { ExtensibleFunction } from './extensible-function.js';
 /**
  * Renderer base class.
  * Used for creating renderers to render data items.
@@ -7,4 +7,3 @@ import { ExtensibleFunction } from './extensible-function';
  */
 export class Renderer extends ExtensibleFunction {
 }
-//# sourceMappingURL=renderer.js.map

package/lib/loader/custom-elements.md

@@ -0,0 +1,5 @@
+# ef-loader
+
+An animated graphical component,
+used to show that an app is performing an action
+in the background such as downloading content.

package/lib/loader/index.d.ts

@@ -6,6 +6,11 @@ import { BasicElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core
  *  in the background such as downloading content.
  */
 export declare class Loader extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
      * Collection of template part names,
      * used to create and theme different loader styles
@@ -31,4 +36,6 @@ declare global {
       'ef-loader': Partial<Loader> | JSXInterface.HTMLAttributes<Loader>;
     }
   }
-}
+}
+
+export {};

package/lib/loader/index.js

@@ -1,10 +1,7 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, customElement, html } from '@refinitiv-ui/core';
+import { __decorate } from "tslib";
+import { BasicElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { VERSION } from '../version.js';
 /**
  * Global cache for loader template parts
  */
@@ -15,6 +12,13 @@ let cachedParts;
  *  in the background such as downloading content.
  */
 let Loader = class Loader extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Collection of template part names,
      * used to create and theme different loader styles
@@ -55,4 +59,3 @@ Loader = __decorate([
     })
 ], Loader);
 export { Loader };
-//# sourceMappingURL=index.js.map

package/lib/multi-input/custom-elements.json

@@ -49,13 +49,13 @@
           "name": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",
@@ -66,9 +66,10 @@
       ],
       "properties": [
         {
-          "name": "values",
+          "name": "values (readonly)",
           "description": "Array of item's values ( readonly )",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "pillsOnly",
@@ -137,14 +138,14 @@
           "attribute": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",

package/lib/multi-input/custom-elements.md

@@ -0,0 +1,43 @@
+# ef-multi-input
+
+An input control component to display a selection of pills
+
+## Properties
+
+| Property            | Attribute     | Type                     | Default | Description                                    |
+|---------------------|---------------|--------------------------|---------|------------------------------------------------|
+| `data`              |               | `MultiInputData \| null` | null    | The data object, used to render the list.      |
+| `disabled`          | `disabled`    | `boolean`                | false   | Set disabled state                             |
+| `error`             | `error`       | `boolean`                | false   | Set state to error                             |
+| `icon`              | `icon`        | `string`                 | ""      | Specify icon to display inside input box       |
+| `maxLength`         | `maxlength`   | `number \| null`         | null    | Set character max limit                        |
+| `minLength`         | `minlength`   | `number \| null`         | null    | Set character min limit                        |
+| `pillsOnly`         | `pills-only`  | `boolean`                | false   | Hide text input box                            |
+| `placeholder`       | `placeholder` | `string`                 | ""      | Placeholder text to display in input box       |
+| `readonly`          | `readonly`    | `boolean`                | false   | Hides text field and clear icon from all pills |
+| `selectionEnd`      |               | `number \| null`         | null    | Selection end index                            |
+| `selectionStart`    |               | `number \| null`         | null    | Selection start index                          |
+| `value`             | `value`       | `string`                 | ""      | Current value of text field                    |
+| `values (readonly)` |               | `string[]`               | []      | Array of item's values ( readonly )            |
+| `warning`           | `warning`     | `boolean`                | false   | Set state to warning                           |
+
+## Methods
+
+| Method              | Type                                             | Description                                      |
+|---------------------|--------------------------------------------------|--------------------------------------------------|
+| `add`               | `(item: any): MultiInputDataItem \| null`        | Add a new item to the input. Return newly added object or null if added invalid object.<br /><br />**item**: to add. Object must have at least value and label |
+| `removeByIndex`     | `(index: number): MultiInputDataItem \| null`    | Removes pill by index. Returns item that removed or null if list was empty<br /><br />**index**: of pill to be removed |
+| `removeByValue`     | `(value: string): string`                        | Removes the item by the value and returns array of removed items<br /><br />**value**: Value of item to remove |
+| `removeLastItem`    | `(): MultiInputDataItem \| null`                 | Removes last item. Returns item that removed or null if list was empty |
+| `select`            | `(): void`                                       | Select the contents of input                     |
+| `setSelectionRange` | `(startSelection: number, endSelection: number): void` | Set the selection range<br /><br />**startSelection**: Start of selection<br />**endSelection**: End of the selection |
+
+## Events
+
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `error-changed` | Dispatched when error state changes.<br />Property `detail.error` is error from validation. |
+| `item-added`    | Fired when new pill is added.<br />Property `detail.item` is new added pill.<br />Property `detail.items` is new list of all pills. |
+| `item-error`    | Fired when item that attempt to add is invalid.<br />Property `detail.item` is item with an error.<br />Property `detail.items` a current list of pills. |
+| `item-removed`  | Fired when item is removed.<br />Property `detail.item` is pill that removed.<br />Property `detail.items` is new list of all pills. |
+| `value-changed` | Fired when new value of text field is changed.<br />Property `detail.value` will be the new value. |

package/lib/multi-input/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { CollectionItem } from '@refinitiv-ui/utils';
+import type { CollectionItem } from '@refinitiv-ui/utils/lib/collection.js';
 export declare type SelectionIndex = number | null;
 export declare type MultiInputEvents = 'item-added' | 'item-removed' | 'item-error';
 export declare type MultiInputData = MultiInputDataItem[];

package/lib/multi-input/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/lib/multi-input/index.d.ts

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import '../pill';
-import '../text-field';
-import { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
-export { MultiInputData, MultiInputDataItem };
+import { ControlElement, CSSResultGroup, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
+import '../pill/index.js';
+import '../text-field/index.js';
+export type { MultiInputData, MultiInputDataItem };
 /**
  * An input control component to display a selection of pills
  *
@@ -37,16 +37,22 @@ export { MultiInputData, MultiInputDataItem };
  */
 export declare class MultiInput extends ControlElement implements MultiValue {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Array of item's values ( readonly )
      * @readonly
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     /**
@@ -79,17 +85,20 @@ export declare class MultiInput extends ControlElement implements MultiValue {
     minLength: number | null;
     /**
      * Selection start index
+     * @default null
      */
     get selectionStart(): number | null;
     set selectionStart(index: SelectionIndex);
     /**
      * Selection end index
+     * @default null
      */
     get selectionEnd(): number | null;
     set selectionEnd(index: SelectionIndex);
     /**
      * The data object, used to render the list.
      * @type {MultiInputData | null}
+     * @default null
      */
     get data(): MultiInputData | null;
     set data(value: MultiInputData | null);
@@ -287,4 +296,6 @@ declare global {
       'ef-multi-input': Partial<MultiInput> | JSXInterface.ControlHTMLAttributes<MultiInput>;
     }
   }
-}
+}
+
+export {};

package/lib/multi-input/index.js

@@ -1,13 +1,13 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, css, customElement, html, property, query, ifDefined } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import '../pill';
-import '../text-field';
+import { __decorate } from "tslib";
+import { ControlElement, css, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import '../pill/index.js';
+import '../text-field/index.js';
 const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
 /**
  * An input control component to display a selection of pills
@@ -101,7 +101,14 @@ let MultiInput = class MultiInput extends ControlElement {
         };
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -138,12 +145,14 @@ let MultiInput = class MultiInput extends ControlElement {
      * Array of item's values ( readonly )
      * @readonly
      * @type {string[]}
+     * @default []
      */
     get values() {
         return this.composer.queryItems(() => true).map(({ value }) => value);
     }
     /**
      * Selection start index
+     * @default null
      */
     get selectionStart() {
         if (this.search) {
@@ -158,6 +167,7 @@ let MultiInput = class MultiInput extends ControlElement {
     }
     /**
      * Selection end index
+     * @default null
      */
     get selectionEnd() {
         if (this.search) {
@@ -173,6 +183,7 @@ let MultiInput = class MultiInput extends ControlElement {
     /**
      * The data object, used to render the list.
      * @type {MultiInputData | null}
+     * @default null
      */
     get data() {
         return this._data;
@@ -189,7 +200,7 @@ let MultiInput = class MultiInput extends ControlElement {
             this.composer = new CollectionComposer([]);
         }
         this._data = value;
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
      * Removes the item by the value and returns array of removed items
@@ -247,8 +258,7 @@ let MultiInput = class MultiInput extends ControlElement {
         }
         if (process) {
             this.composer.removeItem(item);
-            void this.requestUpdate();
-            this.focus(); /* keep focus on multi-input */
+            this.requestUpdate();
             return item;
         }
         return null;
@@ -281,7 +291,7 @@ let MultiInput = class MultiInput extends ControlElement {
         }
         if (process) {
             this.composer.addItem(item);
-            void this.requestUpdate();
+            this.requestUpdate();
             return item;
         }
         return null;
@@ -324,7 +334,7 @@ let MultiInput = class MultiInput extends ControlElement {
         }
         if (oldValue !== value) {
             this.oldValue = value;
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     get value() {
@@ -435,12 +445,13 @@ let MultiInput = class MultiInput extends ControlElement {
     onPillClearsHandler(event) {
         const pill = event.target;
         const index = pill.getAttribute('index');
-        if (index == null) {
+        if (index === null) {
             return;
         }
         const items = this.composer.queryItems(() => true);
         const item = items[Number(index)];
         this.removeItem(item, true);
+        this.focus(); // keep focus on multi-input
     }
     /**
      * the wrapper for item events
@@ -581,4 +592,3 @@ MultiInput = __decorate([
     })
 ], MultiInput);
 export { MultiInput };
-//# sourceMappingURL=index.js.map