@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

package/lib/color-dialog/index.js

@@ -0,0 +1,459 @@
+import { __decorate } from "tslib";
+import { html, css, 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { VERSION } from '../version.js';
+import { ValueModel } from './helpers/value-model.js';
+import { isHex, removeHashSign } from './helpers/color-helpers.js';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
+import { translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
+/**
+ * Displays a colour picker dialog,
+ * for selecting a predefined range of colours.
+ *
+ * @fires value-changed - Fired when the `value` property changes.
+ * @fires opened-changed - Fired when the `opened` property changes.
+ *
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
+ *
+ * @attr {boolean} [opened=false] - Set dialog to open
+ * @prop {boolean} [opened=false] - Set dialog to open
+ *
+ * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
+ * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
+ *
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
+ *
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
+ *
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ *
+ * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
+ *
+ * @prop {boolean} [withBackdrop=true] - False to hide backdrop.
+ *
+ * @prop {boolean} [draggable=true] - False to make the dialog not draggable.
+ *
+ * @prop {boolean} [withShadow=true] - False to remove shadow for dialog component.
+ */
+let ColorDialog = class ColorDialog extends Dialog {
+    constructor() {
+        super(...arguments);
+        /**
+         * speed up rendering by not populating content on page load
+         */
+        this.lazyRendered = false;
+        /**
+         * Color dialog has commit button to update actual values
+         * Value model is used to support this functionality
+         */
+        this.valueModel = new ValueModel();
+        /**
+        * @ignore
+        */
+        this.draggable = true;
+        /**
+         * Set the palettes to activate no-color option
+         */
+        this.allowNocolor = false;
+        this._value = '';
+    }
+    /**
+     * 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
+     */
+    static get styles() {
+        return [
+            super.styles,
+            css `
+        :host {
+          display: block;
+        }
+        [part=preview-color][no-color] {
+          background: linear-gradient(to bottom right, transparent calc(50% - 2px),
+          var(--no-color-line-color, #ff0000) calc(50% - 1px),
+          var(--no-color-line-color, #ff0000) calc(50% + 1px),
+          transparent calc(50% + 2px));
+        }
+    `
+        ];
+    }
+    /**
+     * Value of selected color from color dialog will be written here as hex value
+     * e.g. "#00f" or "#0000ff"
+     * @default -
+     * @param value A value to set
+     */
+    set value(value) {
+        value = String(value);
+        const oldValue = this._value;
+        if (!this.isValidValue(value)) {
+            value = '';
+        }
+        this._value = value;
+        this.requestUpdate('value', oldValue);
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex
+     * @default -
+     * @param hex A hex value to set
+     */
+    set hex(hex) {
+        hex = String(hex);
+        if (!this.isValidHex(hex)) {
+            hex = '';
+        }
+        this.value = hex ? `#${hex}` : '';
+    }
+    get hex() {
+        const value = this.value;
+        return value ? removeHashSign(value) : '';
+    }
+    /**
+     * Red value from 0 to 255
+     * @default -
+     * @param red Red value
+     */
+    set red(red) {
+        red = String(red);
+        this.value = this.isValidRGB(red) ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex() : '';
+    }
+    get red() {
+        return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
+    }
+    /**
+     * Green value from 0 to 255
+     * @default -
+     * @param green Green value
+     */
+    set green(green) {
+        green = String(green);
+        this.value = this.isValidRGB(green) ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex() : '';
+    }
+    get green() {
+        return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
+    }
+    /**
+     * Blue value from 0 to 255
+     * @default -
+     * @param blue Blue value
+     */
+    set blue(blue) {
+        blue = String(blue);
+        this.value = this.isValidRGB(blue) ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex() : '';
+    }
+    get blue() {
+        return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
+    }
+    /**
+     * Check if component should be updated
+     * @param changedProperties properties changed on shouldUpdate lifecycle callback
+     * @returns boolean should component update
+     */
+    shouldUpdate(changedProperties) {
+        const shouldUpdate = super.shouldUpdate(changedProperties);
+        return shouldUpdate
+            || changedProperties.has('allowNocolor')
+            || changedProperties.has('red')
+            || changedProperties.has('green')
+            || changedProperties.has('blue')
+            || changedProperties.has('value')
+            || changedProperties.has('hex')
+            || changedProperties.has('enableConfirm');
+    }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has('value')) {
+            // ensure that the internal values are always in sync when set externally
+            this.resetValueModel();
+        }
+        if (this.opened && changedProperties.has('opened')) {
+            this.lazyRendered = true;
+        }
+        super.update(changedProperties);
+    }
+    /**
+     * @inheritdoc
+     * Reset value model
+     * @param opened True if opened
+     * @returns {void}
+     */
+    setOpened(opened) {
+        // setOpened is run only from internal context. It is safe to reset it here
+        this.resetValueModel();
+        super.setOpened(opened);
+    }
+    /**
+     * Reset value model always resets
+     * when either red, green, blue, hex or value are changed externally
+     * Value model is reset internally otherwise
+     * @returns {void}
+     */
+    resetValueModel() {
+        this.valueModel = new ValueModel(this.value);
+    }
+    /**
+     * Check if value is valid HEX value (including #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    isValidValue(value) {
+        const isValid = value === '' || isHex(value);
+        if (!isValid) {
+            new WarningNotice(`The specified value "${value}" is not valid value. The correct value should look like "#fff" or "#ffffff".`).show();
+        }
+        return isValid;
+    }
+    /**
+     * Check if value is valid HEX value (excluding #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    isValidHex(value) {
+        const isValid = value === '' || (!value.includes('#') && isHex(`#${value}`));
+        if (!isValid) {
+            new WarningNotice(`The specified hex "${value}" is not valid color. The correct value should look like "fff" or "ffffff".`).show();
+        }
+        return isValid;
+    }
+    /**
+     * Check if value is within 0 - 255, and warn of it is not
+     * @param value Value to check
+     * @returns true if value is within 0 - 255
+     */
+    isValidRGB(value) {
+        const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
+        if (!isValid) {
+            new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
+        }
+        return isValid;
+    }
+    /**
+     * update color value when tapping or dragging on color palettes
+     * @param event select color event
+     * @return {void}
+     */
+    onColorChanged(event) {
+        this.valueModel.hex = removeHashSign(event.target.value);
+        this.requestUpdate();
+    }
+    /**
+     * update hex value when typing on hex input
+     * @param event input event
+     * @return {void}
+     */
+    onHexChanged(event) {
+        this.valueModel.hex = event.target.value;
+        this.requestUpdate();
+    }
+    /**
+     * update r,g,b value when typing on RGB inputs
+     * @param event input event
+     * @return {void}
+     */
+    onRGBChanged(event) {
+        const targetElem = event.target;
+        if (targetElem === this.redInputEl) {
+            this.valueModel.red = this.redInputEl.value;
+        }
+        else if (targetElem === this.greenInputEl) {
+            this.valueModel.green = this.greenInputEl.value;
+        }
+        else if (targetElem === this.blueInputEl) {
+            this.valueModel.blue = this.blueInputEl.value;
+        }
+        this.requestUpdate();
+    }
+    /**
+     * set opened state to false
+     * @return {void}
+     */
+    onCloseDialog() {
+        this.setOpened(false);
+    }
+    /**
+     * fired value-changed event and close dialog
+     * @return {void}
+     */
+    onConfirmValue() {
+        // no need to check for anything, as the button is disabled if not dirty is invalid
+        this.value = this.valueModel.value;
+        this.notifyPropertyChange('value', this.value);
+        this.setOpened(false);
+    }
+    /**
+     * Check if apply button is disabled
+     * The button is disabled if value is invalid
+     * or value has not changed
+     * @returns {boolean} true if disabled
+     */
+    isApplyDisabled() {
+        return this.valueModel.hasChanged() && this.valueModel.isValid() ? this.allowNocolor ? false : this.valueModel.hex === '' : true;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    get contentRegion() {
+        if (!this.lazyRendered) {
+            return html ``;
+        }
+        return html `
+      <div part="content-section">
+        <div part="palettes-container">
+          <ef-color-palettes
+            .value=${this.valueModel.value}
+            @value-changed=${this.onColorChanged}
+            part="color-palettes">
+          </ef-color-palettes>
+          <ef-grayscale-palettes
+            .value=${this.valueModel.value}
+            @value-changed=${this.onColorChanged}
+            ?allow-nocolor=${this.allowNocolor}
+            part="grayscale-palettes"
+            >
+          </ef-grayscale-palettes>
+        </div>
+        <div part="inputs-container">
+          <div
+            part="preview-color"
+            style=${styleMap({
+            backgroundColor: this.valueModel.value || undefined
+        })}
+            ?no-color=${!this.valueModel.value}></div>
+          <div>${this.t('RED')}&nbsp;:
+            <ef-number-field
+              .value=${this.valueModel.red}
+              @value-changed=${this.onRGBChanged}
+              part="color-input"
+              min="0"
+              max="255"
+              no-spinner
+              id="redInput"
+            ></ef-number-field>
+          </div>
+          <div>${this.t('GREEN')}&nbsp;:
+            <ef-number-field
+              .value=${this.valueModel.green}
+              @value-changed=${this.onRGBChanged}
+              part="color-input"
+              min="0"
+              max="255"
+              no-spinner
+              id="greenInput"
+            ></ef-number-field>
+          </div>
+          <div>${this.t('BLUE')}&nbsp;:
+            <ef-number-field
+              .value=${this.valueModel.blue}
+              @value-changed=${this.onRGBChanged}
+              part="color-input"
+              min="0"
+              max="255"
+              no-spinner
+              id="blueInput"
+            ></ef-number-field>
+          </div>
+          <div>#&nbsp;:
+            <ef-text-field
+              .value=${this.valueModel.hex}
+              @value-changed=${this.onHexChanged}
+              pattern="^([0-9a-fA-F]{3}){1,2}$"
+              part="color-input"
+              id="hexInput"
+              maxlength="6">
+            </ef-text-field>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    get footerRegion() {
+        if (!this.lazyRendered) {
+            return html ``;
+        }
+        return html `
+      <ef-button
+        id="confirmButton"
+        part="button"
+        cta
+        @tap=${this.onConfirmValue}
+        ?disabled=${this.isApplyDisabled()}>${this.t('APPLY')}</ef-button>
+      <ef-button
+        id="closeButton"
+        @tap=${this.onCloseDialog}
+        part="button">${this.t('CLOSE')}</ef-button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'allow-nocolor' })
+], ColorDialog.prototype, "allowNocolor", void 0);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "value", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "hex", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "red", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "green", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "blue", null);
+__decorate([
+    translate()
+], ColorDialog.prototype, "t", void 0);
+__decorate([
+    query('#redInput')
+], ColorDialog.prototype, "redInputEl", void 0);
+__decorate([
+    query('#greenInput')
+], ColorDialog.prototype, "greenInputEl", void 0);
+__decorate([
+    query('#blueInput')
+], ColorDialog.prototype, "blueInputEl", void 0);
+ColorDialog = __decorate([
+    customElement('ef-color-dialog', {
+        alias: 'emerald-color-dialog'
+    })
+], ColorDialog);
+export { ColorDialog };

package/lib/color-dialog/themes/halo/dark/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/dialog/themes/halo/dark';
+
+elf.customStyles.define('ef-color-dialog', ':host{width:425px}:host [part=content-section]{display:flex;min-width:0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;margin:2px;width:100px;box-sizing:border-box}:host [part=preview-color]{border:1px solid #404040;height:24px;margin-bottom:10px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=grayscale-palettes]{height:23px}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:8px}:host [part=button]:first-child{margin-right:0}');

package/lib/color-dialog/themes/halo/light/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/light';
+import '@refinitiv-ui/elements/lib/button/themes/halo/light';
+import '@refinitiv-ui/elements/lib/panel/themes/halo/light';
+import '@refinitiv-ui/elements/lib/dialog/themes/halo/light';
+
+elf.customStyles.define('ef-color-dialog', ':host{width:425px}:host [part=content-section]{display:flex;min-width:0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;margin:2px;width:100px;box-sizing:border-box}:host [part=preview-color]{border:1px solid #595959;height:24px;margin-bottom:10px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=grayscale-palettes]{height:23px}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:8px}:host [part=button]:first-child{margin-right:0}');

package/lib/color-dialog/themes/solar/charcoal/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/panel/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/dialog/themes/solar/charcoal';
+
+elf.customStyles.define('ef-color-dialog', ':host [part=content-section]{display:flex;min-width:0;padding:5px 0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;box-sizing:border-box;width:60px;margin:0 0 0 5px}:host [part=preview-color]{border:1px solid #4a4a52;height:30px;margin-bottom:15px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:10px 10px 10px 3px}:host{width:300px}:host [part=grayscale-palettes]{height:18px;width:140px;margin:5px 0 0 23px}:host [part=button]:first-child{margin-right:3px}');

package/lib/color-dialog/themes/solar/pearl/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/number-field/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/panel/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/dialog/themes/solar/pearl';
+
+elf.customStyles.define('ef-color-dialog', ':host [part=content-section]{display:flex;min-width:0;padding:5px 0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;box-sizing:border-box;width:60px;margin:0 0 0 5px}:host [part=preview-color]{border:1px solid #a9afba;height:30px;margin-bottom:15px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:10px 10px 10px 3px}:host{width:300px}:host [part=grayscale-palettes]{height:18px;width:140px;margin:5px 0 0 23px}:host [part=button]:first-child{margin-right:3px}');

package/lib/combo-box/helpers/filter.d.ts

@@ -0,0 +1,10 @@
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { ComboBox } from '../index';
+import type { ComboBoxFilter } from './types';
+import type { ItemData } from '../../item';
+/**
+ * Default filter used by combo box
+ * @param el ComboBox instance to filter
+ * @returns Filter accepting an item
+ */
+export declare const defaultFilter: <T extends DataItem = ItemData>(el: ComboBox<T>) => ComboBoxFilter<T>;

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

@@ -0,0 +1,29 @@
+/**
+ * Default filter used by combo box
+ * @param el ComboBox instance to filter
+ * @returns Filter accepting an item
+ */
+export const defaultFilter = (el) => {
+    // reference query string for validating queryRegExp cache state
+    let query = '';
+    // cache RegExp
+    let queryRegExp;
+    // Get current RegExp, or renew if out of date
+    // this is fetched on demand by filter/renderer
+    // only created once per query
+    const getRegularExpressionOfQuery = () => {
+        if (el.query !== query || !queryRegExp) {
+            query = el.query || '';
+            queryRegExp = new RegExp(query.replace(/(\W)/g, '\\$1'), 'i');
+        }
+        return queryRegExp;
+    };
+    // return scoped custom filter
+    return (item) => {
+        const regex = getRegularExpressionOfQuery();
+        const result = regex.test(item.label);
+        // this example uses global scope, so the index needs resetting
+        regex.lastIndex = 0;
+        return result;
+    };
+};

package/lib/combo-box/helpers/keyboard-event.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A helper class to propagate KeyBoard event to the list
+ * Done is this way to cover IE11
+ */
+export declare class CustomKeyboardEvent extends Event {
+    key?: string;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    /**
+     * Create custom keyboard event
+     * @param type Event type
+     * @param eventInitDict Keyboard event init object
+     */
+    constructor(type: string, eventInitDict?: KeyboardEventInit);
+}

package/lib/combo-box/helpers/keyboard-event.js

@@ -0,0 +1,19 @@
+/**
+ * A helper class to propagate KeyBoard event to the list
+ * Done is this way to cover IE11
+ */
+export class CustomKeyboardEvent extends Event {
+    /**
+     * Create custom keyboard event
+     * @param type Event type
+     * @param eventInitDict Keyboard event init object
+     */
+    constructor(type, eventInitDict = {}) {
+        super(type, eventInitDict);
+        this.key = eventInitDict.key;
+        this.shiftKey = eventInitDict.shiftKey;
+        this.altKey = eventInitDict.altKey;
+        this.ctrlKey = eventInitDict.ctrlKey;
+        this.metaKey = eventInitDict.metaKey;
+    }
+}

package/lib/combo-box/helpers/renderer.d.ts

@@ -0,0 +1,8 @@
+import { Renderer } from '../../list/renderer.js';
+/**
+ * Renders list items as `ef-item` elements.
+ * Extends its behaviour from ListRenderer.
+ */
+export declare class ComboBoxRenderer extends Renderer {
+    constructor(context?: unknown);
+}

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

@@ -0,0 +1,24 @@
+import { ListRenderer } from '../../list/index.js';
+import { Renderer } from '../../list/renderer.js';
+/**
+ * Renders list items as `ef-item` elements.
+ * Extends its behaviour from ListRenderer.
+ */
+export class ComboBoxRenderer extends Renderer {
+    constructor(context) {
+        const listRenderer = new ListRenderer(context);
+        super((item, composer, element) => {
+            // Extending renderer from listRenderer
+            element = listRenderer(item, composer, element);
+            const value = composer.getItemPropertyValue(item, 'value');
+            // Using value as id for `aria-activedescendant` in combobox
+            if (value && element.id !== value) {
+                element.id = value;
+            }
+            else if (!value && element.id) {
+                element.removeAttribute('id');
+            }
+            return element;
+        });
+    }
+}

package/lib/combo-box/helpers/types.d.ts

@@ -0,0 +1,11 @@
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection';
+import type { ItemData } from '../../item';
+/**
+ * Predicate callback
+ * Matches item against filter function
+ *
+ * @param item Item to filter
+ * @return Does item match filter
+ */
+export declare type ComboBoxFilter<T extends DataItem = ItemData> = (item: T) => boolean;
+export declare type ComboBoxData<T extends DataItem = ItemData> = T[] | Promise<T[]>;

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

@@ -0,0 +1 @@
+export {};