@dubai-design-system/components-js 4.1.0 → 5.0.0

package/dist/collection/components/dda-select/dda-select.js

@@ -5,6 +5,85 @@ export class Ddaselect {
         this.is_open = false;
         //@Prop() validationtype?: string;
         this.custom_class = '';
+        // F-014: focus target requested by a keyboard interaction (ArrowDown/Up
+        // from the trigger) that fires before the listbox exists in the DOM.
+        // Consumed by componentDidRender, then cleared.
+        this.pendingFocusIndex = null;
+        this.onTriggerKeyDown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                const wasOpen = this.is_open;
+                this.is_open = true;
+                const target = this.initialOptionIndex();
+                if (wasOpen) {
+                    this.focusOption(target);
+                }
+                else {
+                    this.pendingFocusIndex = target;
+                }
+            }
+            else if (event.key === 'Escape' && this.is_open) {
+                event.preventDefault();
+                this.is_open = false;
+            }
+        };
+        this.onOptionKeyDown = (event, option) => {
+            const currentIndex = this.currentFocusedOptionIndex();
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusOption(currentIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusOption(currentIndex - 1);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusOption(0);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusOption(this.parsedOptions.length - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.selectOption(option);
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.closeAndReturnFocus();
+                    break;
+                case 'Tab':
+                    // Let focus leave naturally; don't trap it, but the popup should
+                    // not stay open once it does.
+                    this.is_open = false;
+                    break;
+                default:
+                    break;
+            }
+        };
+    }
+    get listboxId() {
+        return `${this.button_id}-listbox`;
+    }
+    // F-016: same button_id-derived uniqueness pattern as listboxId above.
+    get helperId() {
+        return this.button_id ? `${this.button_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.button_id ? `${this.button_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
     }
     get parsedOptions() {
         try {
@@ -14,19 +93,50 @@ export class Ddaselect {
             return [];
         }
     }
+    focusOption(index) {
+        const options = Array.from(this.el.querySelectorAll('.dda-input-dropdown-item[role="option"]'));
+        if (options.length === 0) {
+            return;
+        }
+        const clamped = Math.max(0, Math.min(index, options.length - 1));
+        options[clamped].focus();
+    }
+    currentFocusedOptionIndex() {
+        const options = Array.from(this.el.querySelectorAll('.dda-input-dropdown-item[role="option"]'));
+        return options.indexOf(document.activeElement);
+    }
+    initialOptionIndex() {
+        const options = this.parsedOptions;
+        const selectedIndex = options.indexOf(this.selected);
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    }
     toggleSelect() {
         if (!this.disabled) {
             this.is_open = !this.is_open;
         }
     }
+    closeAndReturnFocus() {
+        this.is_open = false;
+        const trigger = this.el.querySelector('.dda-select-header');
+        if (trigger) {
+            trigger.focus();
+        }
+    }
     selectOption(option) {
         if (!this.disabled) {
             this.selected = option;
-            this.is_open = false;
+            this.closeAndReturnFocus();
+        }
+    }
+    componentDidRender() {
+        if (this.is_open && this.pendingFocusIndex !== null) {
+            const target = this.pendingFocusIndex;
+            this.pendingFocusIndex = null;
+            this.focusOption(target);
         }
     }
     render() {
-        return (h(Host, { key: 'c0a73f03445c95930b550ba2b3bb3ac859b617b6' }, h("div", { key: 'b8f6cc200987460f6662d8b40cab6e9327d73133', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '14b9d76fbb1c4a25787dbedfb5113dc3f7c67a69', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '217a732c3886c2763909a90431400662081fd894', class: "dda-dropdown-container" }, h("button", { key: '2d6c0df4e40a966b0141593f8c3099dae82723d1', "aria-label": this.aria_label, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", onClick: () => { this.toggleSelect(); } }, this.selected || 'Select an option', h("i", { key: 'd4448e19431eae21628fc35fe91b484559378415', class: `material-icons` }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'd939822a702482b52fa35fceccc69d7f313ed93b', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: 'e7821efe3d2300d153fd29dc5406beab0b151d22', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'ca7dfd193bc6504938e792a28bc715c3de974763', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '24112cb3263994d6e4b7c87a5a1ec75d010c6ee0' }, h("div", { key: '9d49fc8c1905079e83a8949ca8c1f46fa3255401', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '96d14ea8c1174032261945b9bef49f23e6ff55b6', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '0896838d28313f76b1938c225bdf5df1fdbc7849', class: "dda-dropdown-container" }, h("button", { key: 'a224ad80778a6e315735e806a0afbb4fc7c57e93', name: this.toggle_button_name, "aria-label": this.aria_label, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '7ed3bdb440c0a892795af32b1b2f9105633d5af7', class: `material-icons` }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '266c9fc8de36433de06bf289a854c22ab499f0ca', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '62028ea0d45943d0728f71ec58122ab58a554ec7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '30f11a0804b15424e0ca7a8769477f5f4547b191', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {
@@ -57,8 +167,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "options": {
                 "type": "string",
@@ -76,8 +186,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
-                "reflect": false
+                "reflect": false,
+                "attribute": "options"
             },
             "selected": {
                 "type": "string",
@@ -95,8 +205,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected"
             },
             "disabled": {
                 "type": "boolean",
@@ -114,8 +224,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "error": {
@@ -134,8 +244,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error"
             },
             "error_message": {
                 "type": "string",
@@ -153,8 +263,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "helper_text": {
                 "type": "string",
@@ -172,8 +282,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "size": {
                 "type": "string",
@@ -191,8 +301,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "custom_class": {
                 "type": "string",
@@ -210,8 +320,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -230,8 +340,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -249,8 +359,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "button_id": {
                 "type": "string",
@@ -268,8 +378,46 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
+            },
+            "toggle_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle_button_name"
+            },
+            "option_select_button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "option_select_button_name"
             }
         };
     }
@@ -278,5 +426,5 @@ export class Ddaselect {
             "is_open": {}
         };
     }
+    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-select.js.map

package/dist/collection/components/dda-select/dda-select.stories.js

@@ -53,28 +53,38 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the select element',
         },
+        toggle_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the toggle button',
+        },
+        option_select_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the option select button',
+        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-select\` component, pass the following props:
-
-  \`\`\`html
-<dda-select
-    label="Select an option"
-    selected="Option 1"
-    disabled="false"
-    helper_text="Helper or footer text"
-    error_message=""
-    size="default"
-    custom_class=""
-    component_mode=""
-    button_id="button"
-    aria_label="select"
-    options='["Option 1","Option 2","Option 3"]'
-></dda-select>
-  \`\`\`
+                component: `
+  To use the \`dda-select\` component, pass the following props:
+
+  \`\`\`html
+<dda-select
+    label="Select an option"
+    selected="Option 1"
+    disabled="false"
+    helper_text="Helper or footer text"
+    error_message=""
+    size="default"
+    custom_class=""
+    component_mode=""
+    button_id="button"
+    aria_label="select"
+    options='["Option 1","Option 2","Option 3"]'
+    toggle_button_name="toggle_button_name"
+    option_select_button_name="option_select_button_name"
+></dda-select>
+  \`\`\`
   `,
             },
         },
@@ -101,6 +111,8 @@ Default.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
 };
 export const Small = Template.bind({});
 Small.args = {
@@ -115,6 +127,8 @@ Small.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
 };
 export const WithError = Template.bind({});
 WithError.args = {
@@ -129,6 +143,8 @@ WithError.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -142,5 +158,6 @@ Disabled.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
 };
-//# sourceMappingURL=dda-select.stories.js.map