({ ...a, [c]: true }), {}),
})}
id=${ifDefined(id)}
data-testid=${ifDefined(testId ?? id)}
- style=${styleMap(customStyles)}
+ style=${styleMap({
+ ...customStyles,
+ ["margin-block-end"]: !isReadOnly && isOpen && !isDisabled ? `${adjustedPopoverHeight}px` : undefined,
+ })}
+ role="combobox"
+ aria-expanded=${isOpen}
+ aria-haspopup="listbox"
+ aria-controls=${`${comboboxId}-popover`}
+ aria-owns=${`${comboboxId}-popover`}
>
- ${TextField({
- size,
- isQuiet,
- isDisabled,
- isInvalid,
- isFocused,
- isKeyboardFocused,
- customClasses: [
- `${rootClass}-textfield`,
- ...(isLoading ? ["is-loading"] : []),
- ],
- customInputClasses: [`${rootClass}-input`],
- isLoading,
- customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
- name: "field",
- isReadOnly,
- value,
- onclick: function () {
- if (!isOpen) updateArgs({ isOpen: true });
- },
- }, context)}
- ${PickerButton({
- customClasses: [
- `${rootClass}-button`,
- ... isInvalid ? ["is-invalid"] : [],
- ],
- size,
- iconSet: "ui",
- iconName: "ChevronDown",
- isQuiet,
- id: getRandomId("picker"),
- isOpen,
- isFocused,
- isKeyboardFocused,
- isDisabled,
- position: "right",
- onclick: function () {
- updateArgs({ isOpen: !isOpen });
- },
- tabindex: "-1",
- }, context)}
-
- `;
-};
-
-export const Template = ({
- size = "m",
- isOpen = true,
- isQuiet = false,
- isDisabled = false,
- showFieldLabel = false,
- isReadOnly = false,
- fieldLabelText = "Select location",
- fieldLabelPosition = "top",
- content = [],
- value = "",
- ...args
-} = {}, context = {}) => {
- const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m"
- return html`
-
${when(showFieldLabel, () =>
FieldLabel({
size,
label: fieldLabelText,
isDisabled,
- customStyles: { "max-inline-size": "100px"},
- alignment: fieldLabelPosition === "left" && "left",
+ customClasses: [`${rootClass}-label`],
+ alignment: fieldLabelPosition === "side" && "side",
+ isRequired: isLabelRequired,
+ }, context)
+ )}
+
+ ${TextField({
+ size,
+ isDisabled,
+ isInvalid,
+ isFocused,
+ isHovered,
+ isKeyboardFocused,
+ customClasses: [
+ `${rootClass}-textfield`,
+ ...(isLoading ? ["is-loading"] : []),
+ ],
+ customInputClasses: [`${rootClass}-input`, `${rootClass}-autocomplete`],
+ isLoading,
+ customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
+ name: "field",
+ isReadOnly,
+ value,
+ autocomplete: autocomplete ? undefined : "off",
+ onclick: function () {
+ if (!isOpen) updateArgs({ isOpen: true });
+ },
+ }, context)}
+ ${InfieldButton({
+ customClasses: [
+ `${rootClass}-button`,
+ ...(!isDisabled && isOpen ? ["is-open"] : []),
+ ],
+ size,
+ id: getRandomId("infieldbutton"),
+ isDisabled: isDisabled || isReadOnly,
+ tabindex: "-1",
+ onclick: function () {
+ updateArgs({
+ isOpen: !isOpen,
+ });
+ },
+ }, context)}
+
+ ${Popover({
+ isOpen: isOpen && !isDisabled && !isReadOnly,
+ withTip: false,
+ position: "bottom-start",
+ customClasses: [`${rootClass}-popover`],
+ customStyles: {
+ "inline-size": size === "s" ? "192px" : size === "l" ? "224px" : size === "xl" ? "240px" : "208px",
+ },
+ content,
+ popoverHeight,
+ }, context)}
+ ${when(helpText, () =>
+ HelpText({
+ customClasses: [`${rootClass}-helptext`],
+ size,
+ isDisabled,
+ hideIcon: true,
+ text: helpText,
+ variant: isInvalid ? "negative" : "neutral",
}, context)
)}
- ${[
- Popover({
- isOpen: isOpen && !isDisabled && !isReadOnly,
- withTip: false,
- position: "bottom-start",
- isQuiet,
- trigger: (passthrough) => Combobox({
- size,
- isOpen,
- isQuiet,
- isDisabled,
- isReadOnly,
- value,
- ...args,
- ...passthrough,
- }, context),
- content,
- popoverWidth: size === "s" ? 140 : size === "l" ? 191 : size === "xl" ? 192 : 166, // default value is "m"
- popoverHeight,
- }, context),
- ]}
+