@pine-ds/core 3.22.1 → 3.24.0

package/dist/collection/components/pds-combobox/pds-combobox.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { isSpecTest } from "../../utils/form";
 import { computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { debounceEvent } from "../../utils/utils";
 import DOMPurify from "dompurify";
@@ -39,7 +40,8 @@ export class PdsCombobox {
         this.dropdownWidth = '236px';
         /**
          * Visually hides the label text for instances where only the combobox should be displayed.
-         * Label remains accessible to assistive technology such as screen readers.
+         * The visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;
+         * the trigger uses `aria-label` so the name stays available to assistive technology.
          */
         this.hideLabel = false;
         /**
@@ -62,6 +64,12 @@ export class PdsCombobox {
          * @default 'secondary'
          */
         this.triggerVariant = 'secondary';
+        /**
+         * The shape of the button trigger. Use 'input' to render the trigger with input-like styling
+         * (subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect.
+         * @default 'pill'
+         */
+        this.triggerShape = 'pill';
         /**
          * The sentiment for the chip trigger. Matches Pine chip sentiments.
          * @default 'neutral'
@@ -412,14 +420,7 @@ export class PdsCombobox {
             }
         }
         // Initialize form value with current value
-        if (this.internals) {
-            try {
-                this.internals.setFormValue((_c = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '');
-            }
-            catch (e) {
-                // ElementInternals.setFormValue not available in unit tests
-            }
-        }
+        this.updateFormValue((_c = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '');
     }
     disconnectedCallback() {
         var _a;
@@ -441,14 +442,7 @@ export class PdsCombobox {
     handleValueChange() {
         this.filterOptions();
         // Sync with form internals for form association
-        if (this.internals) {
-            try {
-                this.internals.setFormValue(this.value);
-            }
-            catch (e) {
-                // ElementInternals.setFormValue not available in unit tests
-            }
-        }
+        this.updateFormValue(this.value);
         // Find and select option that matches the value (for external value changes)
         // Only do this if we're not already updating from a selection
         if (!this.isUpdatingFromSelection && this.value && this.optionEls.length > 0) {
@@ -481,26 +475,19 @@ export class PdsCombobox {
             this.displayText = this.getOptionLabel(this.selectedOption);
             this.value = this.selectedOption.value;
             // Update form internals with the actual option value
-            if (this.internals) {
-                try {
-                    this.internals.setFormValue(this.selectedOption.value);
-                }
-                catch (e) {
-                    // ElementInternals.setFormValue not available in unit tests
-                }
-            }
+            this.updateFormValue(this.selectedOption.value);
         }
         else {
             this.displayText = '';
             this.value = '';
-            if (this.internals) {
-                try {
-                    this.internals.setFormValue('');
-                }
-                catch (e) {
-                    // ElementInternals.setFormValue not available in unit tests
-                }
-            }
+            this.updateFormValue('');
+        }
+    }
+    updateFormValue(value) {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            this.internals.setFormValue(value);
         }
     }
     clearAsyncFetchState() {
@@ -1250,11 +1237,17 @@ export class PdsCombobox {
             large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
     }
     render() {
-        const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
-        return (h(Host, { key: '8972918e55f8c0fba10399d963a49ab31b49eeae' }, h("div", { key: '5f5782e3fb83c7ff3fea2d4344324d888110b8fc', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && (h("label", { key: '286cab5baba38486c7e661384f0b5a6a38976891', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '3ccb30ead595d633bfe3ce624c99f9483c0d6265', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        const triggerClass = [
+            'pds-combobox__button-trigger',
+            `pds-combobox__button-trigger--${this.triggerVariant}`,
+            this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: '6a8f372c89a896d2d7e67661e84053c4c95b93c9' }, h("div", { key: '7b4747885bfa9aaa6e698bf13b6cdf9d4e77b3b1', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '46acd60080458de682516becc6144b38675a3f2d', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '02597d696490153015a5d41190598f24fa1b034e', style: { display: 'none' } }, h("slot", { key: '3bb35ff0c7cdde0cb3c4c0eeb9fc4879fcef62c6', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '4e4bd7cb7139416f3f59b1c9736a1fad85c09c24', style: { display: 'none' } }, h("slot", { key: '79e4c181d161a56acba68e1f7ca932369e938e10', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -1433,7 +1426,7 @@ export class PdsCombobox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visually hides the label text for instances where only the combobox should be displayed.\nLabel remains accessible to assistive technology such as screen readers."
+                    "text": "Visually hides the label text for instances where only the combobox should be displayed.\nThe visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;\nthe trigger uses `aria-label` so the name stays available to assistive technology."
                 },
                 "getter": false,
                 "setter": false,
@@ -1590,6 +1583,29 @@ export class PdsCombobox {
                 "attribute": "trigger-variant",
                 "defaultValue": "'secondary'"
             },
+            "triggerShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pill' | 'input'",
+                    "resolved": "\"input\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'pill'"
+                        }],
+                    "text": "The shape of the button trigger. Use 'input' to render the trigger with input-like styling\n(subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-shape",
+                "defaultValue": "'pill'"
+            },
             "chipSentiment": {
                 "type": "string",
                 "mutable": false,