@digigov/ui 2.0.0-7d9a8d86 → 2.0.0-85c27c19

package/cjs/form/AutoComplete/index.js

@@ -1,27 +1,32 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, {get: all[name], enumerable: true});
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, {get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable});
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? {get: () => module2.default, enumerable: true} : {value: module2, enumerable: true})), module2);
+  return to;
 };
-__markAsModule(exports);
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AutoComplete_exports = {};
+__export(AutoComplete_exports, {
   AutoComplete: () => AutoComplete,
   AutoCompleteAssistiveHint: () => import_AutoCompleteAssistiveHint.default,
   AutoCompleteContainer: () => import_AutoCompleteContainer.default,
@@ -33,23 +38,24 @@ __export(exports, {
   AutoCompleteResultListItem: () => import_AutoCompleteResultListItem.default,
   default: () => AutoComplete
 });
-var import_react = __toModule(require("react"));
-var import_react2 = __toModule(require("react"));
-var import_AutoCompleteAssistiveHint = __toModule(require("@digigov/react-core/AutoCompleteAssistiveHint"));
-var import_AutoCompleteInput = __toModule(require("@digigov/react-core/AutoCompleteInput"));
-var import_AutoCompleteInputTypeahead = __toModule(require("@digigov/react-core/AutoCompleteInputTypeahead"));
-var import_AutoCompleteResultList = __toModule(require("@digigov/react-core/AutoCompleteResultList"));
-var import_AutoCompleteResultListItem = __toModule(require("@digigov/react-core/AutoCompleteResultListItem"));
-var import_AutoCompleteContainer = __toModule(require("@digigov/react-core/AutoCompleteContainer"));
-var import_AutoCompleteMultipleInputContainer = __toModule(require("@digigov/react-core/AutoCompleteMultipleInputContainer"));
-var import_AutoCompleteMultipleInput = __toModule(require("@digigov/react-core/AutoCompleteMultipleInput"));
-var import_CaretIcon = __toModule(require("@digigov/react-icons/CaretIcon"));
-var import_Status = __toModule(require("@digigov/ui/form/AutoComplete/Status"));
-var import_utils = __toModule(require("@digigov/ui/form/AutoComplete/utils"));
-var import_Checkbox = __toModule(require("../Checkbox"));
-var import_Chip = __toModule(require("@digigov/ui/content/Chip"));
-var import_Button = __toModule(require("@digigov/ui/form/Button"));
-var import_NormalText = __toModule(require("@digigov/ui/typography/NormalText"));
+module.exports = __toCommonJS(AutoComplete_exports);
+var import_react = __toESM(require("react"));
+var import_react2 = require("react");
+var import_AutoCompleteAssistiveHint = __toESM(require("@digigov/react-core/AutoCompleteAssistiveHint"));
+var import_AutoCompleteInput = __toESM(require("@digigov/react-core/AutoCompleteInput"));
+var import_AutoCompleteInputTypeahead = __toESM(require("@digigov/react-core/AutoCompleteInputTypeahead"));
+var import_AutoCompleteResultList = __toESM(require("@digigov/react-core/AutoCompleteResultList"));
+var import_AutoCompleteResultListItem = __toESM(require("@digigov/react-core/AutoCompleteResultListItem"));
+var import_AutoCompleteContainer = __toESM(require("@digigov/react-core/AutoCompleteContainer"));
+var import_AutoCompleteMultipleInputContainer = __toESM(require("@digigov/react-core/AutoCompleteMultipleInputContainer"));
+var import_AutoCompleteMultipleInput = __toESM(require("@digigov/react-core/AutoCompleteMultipleInput"));
+var import_CaretIcon = require("@digigov/react-icons/CaretIcon");
+var import_Status = __toESM(require("@digigov/ui/form/AutoComplete/Status"));
+var import_utils = require("@digigov/ui/form/AutoComplete/utils");
+var import_Checkbox = __toESM(require("../Checkbox"));
+var import_Chip = require("@digigov/ui/content/Chip");
+var import_Button = __toESM(require("@digigov/ui/form/Button"));
+var import_NormalText = require("@digigov/ui/typography/NormalText");
 class AutoComplete extends import_react2.Component {
   constructor(props) {
     super(props);
@@ -92,6 +98,22 @@ class AutoComplete extends import_react2.Component {
     this.handleInputFocus = this.handleInputFocus.bind(this);
     this.getDirectInputChanges = this.getDirectInputChanges.bind(this);
   }
+  static {
+    this.defaultProps = {
+      width: "full",
+      autoselect: false,
+      minLength: 0,
+      name: "ds-input-autocomplete",
+      placeholder: "",
+      onConfirm: () => {
+        return;
+      },
+      confirmOnBlur: false,
+      required: false,
+      tNoResults: () => "No results found",
+      tAssistiveHint: () => "When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures."
+    };
+  }
   isQueryAnOption(query, options) {
     return options.map((entry) => this.templateInputValue(entry).toLowerCase()).indexOf(query.toLowerCase()) !== -1;
   }
@@ -102,11 +124,11 @@ class AutoComplete extends import_react2.Component {
     const inputReference = this.elementReferences[-1];
     const queryHasChanged = inputReference && inputReference.value !== (this.state.query ?? "");
     if (queryHasChanged) {
-      this.handleInputChange({target: {value: inputReference.value}});
+      this.handleInputChange({ target: { value: inputReference.value } });
     }
   }
   componentDidUpdate(_, prevState) {
-    const {focused} = this.state;
+    const { focused } = this.state;
     const componentLostFocus = focused === null;
     const focusedChanged = prevState.focused !== focused;
     const focusDifferentElement = focusedChanged && !componentLostFocus;
@@ -124,16 +146,18 @@ class AutoComplete extends import_react2.Component {
   hasAutoselect() {
     return (0, import_utils.isIosDevice)() ? false : this.props.autoselect;
   }
+  // This template is used when converting from a state.options object into a state.query.
   templateInputValue(value) {
     const inputValueTemplate = this.props.templates && this.props.templates.inputValue;
     return inputValueTemplate ? inputValueTemplate(value) : value;
   }
+  // This template is used when displaying results / suggestions.
   templateSuggestion(value) {
     const suggestionTemplate = this.props.templates && this.props.templates.suggestion;
     return suggestionTemplate ? suggestionTemplate(value, this.state.query) : value;
   }
   handleComponentBlur(newState) {
-    const {options, query, selected} = this.state;
+    const { options, query, selected } = this.state;
     let newQuery;
     if (this.props.confirmOnBlur) {
       newQuery = newState?.query || query;
@@ -155,7 +179,7 @@ class AutoComplete extends import_react2.Component {
     });
   }
   handleAutoCompleteBlur(event, index) {
-    const {focused, options, query, selected} = this.state;
+    const { focused, options, query, selected } = this.state;
     let focusingOutsideComponent = false;
     if (event.relatedTarget === null) {
       focusingOutsideComponent = true;
@@ -178,7 +202,7 @@ class AutoComplete extends import_react2.Component {
     }
   }
   handleInputChange(event) {
-    const {source, minLength} = this.props;
+    const { source, minLength } = this.props;
     const autoselect = this.hasAutoselect();
     const query = event.target.value;
     const queryEmpty = query.length === 0;
@@ -201,12 +225,12 @@ class AutoComplete extends import_react2.Component {
     this.handleInputChange(event);
   }
   handleInputFocus() {
-    const {source} = this.props;
-    const {query, validChoiceMade, options} = this.state;
-    const {minLength} = this.props;
+    const { source } = this.props;
+    const { query, validChoiceMade, options } = this.state;
+    const { minLength } = this.props;
     const shouldReopenMenu = !validChoiceMade && query.length >= minLength && options.length > 0;
     if (shouldReopenMenu) {
-      this.setState(({menuOpen}) => ({
+      this.setState(({ menuOpen }) => ({
         focused: -1,
         menuOpen: shouldReopenMenu || menuOpen,
         selected: -1
@@ -240,7 +264,10 @@ class AutoComplete extends import_react2.Component {
     if (this.state.selectedValues.indexOf(selectedOption) === -1) {
       selectedValues = selectedValues.concat([selectedOption]);
     } else {
-      selectedValues.splice(this.state.selectedValues.indexOf(selectedOption), 1);
+      selectedValues.splice(
+        this.state.selectedValues.indexOf(selectedOption),
+        1
+      );
     }
     this.props.onConfirm?.(selectedValues);
     this.setState({
@@ -275,7 +302,7 @@ class AutoComplete extends import_react2.Component {
   }
   handleUpArrow(event) {
     event.preventDefault();
-    const {menuOpen, selected} = this.state;
+    const { menuOpen, selected } = this.state;
     const isNotAtTop = selected !== -1;
     const allowMoveUp = isNotAtTop && menuOpen;
     if (allowMoveUp) {
@@ -296,7 +323,7 @@ class AutoComplete extends import_react2.Component {
         });
       });
     } else if (this.state.menuOpen === true) {
-      const {menuOpen, options, selected} = this.state;
+      const { menuOpen, options, selected } = this.state;
       const isNotAtBottom = selected !== options.length - 1;
       const allowMoveDown = isNotAtBottom && menuOpen;
       if (allowMoveDown) {
@@ -363,12 +390,19 @@ class AutoComplete extends import_react2.Component {
         break;
       case "backspace":
         if (this.props.multiple) {
-          if (this.state.query.length === 0) {
+          if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
+            event.preventDefault();
+            const updatedSelectedValues = this.state.selectedValues.slice(0, -1);
             this.setState({
-              selectedValues: this.state.selectedValues.slice(0, -1)
+              selectedValues: updatedSelectedValues
+            }, () => {
+              this.props.onConfirm?.(updatedSelectedValues);
             });
             break;
           }
+        } else {
+          this.props.onConfirm?.("");
+          break;
         }
       default:
         if ((0, import_utils.isPrintableKeyCode)(event.keyCode)) {
@@ -424,186 +458,212 @@ class AutoComplete extends import_react2.Component {
       {
         return options2.map((option, index) => {
           const showFocused = focused === -1 ? selected === index : focused === index;
-          const iosPosinsetHtml = (0, import_utils.isIosDevice)() ? /* @__PURE__ */ import_react.default.createElement("span", {
-            id: `${id}__option-suffix--${index}`,
-            style: {
-              border: "0",
-              clip: "rect(0 0 0 0)",
-              height: "1px",
-              marginBottom: "-1px",
-              marginRight: "-1px",
-              overflow: "hidden",
-              padding: "0",
-              position: "absolute",
-              whiteSpace: "nowrap",
-              width: "1px"
-            }
-          }, index + 1, " \u03B1\u03C0\u03CC ", options2.length) : "";
-          return /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultListItem.default, {
-            isFocused: showFocused,
-            isHovered: hovered,
-            index,
-            "aria-selected": focused === index ? "true" : "false",
-            key: index,
-            onBlur: (event) => this.handleAutoCompleteBlur(event, index),
-            onClick: () => this.handleOptionClick(index),
-            onMouseDown: this.handleOptionMouseDown,
-            onMouseEnter: () => this.handleOptionMouseEnter(index),
-            ref: (optionEl) => {
-              this.elementReferences[index] = optionEl;
+          const iosPosinsetHtml = (0, import_utils.isIosDevice)() ? /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              id: `${id}__option-suffix--${index}`,
+              style: {
+                border: "0",
+                clip: "rect(0 0 0 0)",
+                height: "1px",
+                marginBottom: "-1px",
+                marginRight: "-1px",
+                overflow: "hidden",
+                padding: "0",
+                position: "absolute",
+                whiteSpace: "nowrap",
+                width: "1px"
+              }
             },
-            role: "option",
-            tabIndex: -1,
-            "aria-posinset": index + 1,
-            "aria-setsize": options2.length
-          }, multiple2 ? /* @__PURE__ */ import_react.default.createElement(import_Checkbox.CheckboxItem, {
-            value: option,
-            checked: this.state.selectedValues.includes(option),
-            onChange: () => {
-            }
-          }, this.templateSuggestion(option)) : this.templateSuggestion(option), iosPosinsetHtml);
+            index + 1,
+            " \u03B1\u03C0\u03CC ",
+            options2.length
+          ) : "";
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_AutoCompleteResultListItem.default,
+            {
+              isFocused: showFocused,
+              isHovered: hovered,
+              index,
+              "aria-selected": focused === index ? "true" : "false",
+              key: index,
+              onBlur: (event) => this.handleAutoCompleteBlur(event, index),
+              onClick: () => this.handleOptionClick(index),
+              onMouseDown: this.handleOptionMouseDown,
+              onMouseEnter: () => this.handleOptionMouseEnter(index),
+              ref: (optionEl) => {
+                this.elementReferences[index] = optionEl;
+              },
+              role: "option",
+              tabIndex: -1,
+              value: typeof option === "object" ? option?.value : option,
+              "aria-posinset": index + 1,
+              "aria-setsize": options2.length
+            },
+            multiple2 ? /* @__PURE__ */ import_react.default.createElement(
+              import_Checkbox.CheckboxItem,
+              {
+                value: option,
+                checked: this.state.selectedValues.includes(option),
+                onChange: () => {
+                }
+              },
+              this.templateSuggestion(option)
+            ) : this.templateSuggestion(option),
+            iosPosinsetHtml
+          );
         });
       }
     };
-    return /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteContainer.default, {
-      onKeyDown: this.handleKeyDown,
-      width
-    }, /* @__PURE__ */ import_react.default.createElement(import_Status.default, {
-      id,
-      length: options.length,
-      queryLength: query.length,
-      minQueryLength: minLength,
-      selectedOption: this.templateInputValue(options[selected]),
-      selectedOptionIndex: selected,
-      validChoiceMade,
-      isInFocus: this.state.focused !== null,
-      tQueryTooShort: tStatusQueryTooShort,
-      tNoResults: tStatusNoResults,
-      tSelectedOption: tStatusSelectedOption,
-      tResults: tStatusResults
-    }), hintValue && (placeholder === "" || !placeholder) && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteInputTypeahead.default, {
-      value: hintValue
-    }), multiple ? /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteMultipleInputContainer.default, {
-      isFocused: componentIsFocused,
-      numberOfSelected: this.props.numberOfSelected
-    }, /* @__PURE__ */ import_react.default.createElement(import_Chip.ChipContainer, null, this.state.selectedValues.map((value) => {
-      return /* @__PURE__ */ import_react.default.createElement(import_Chip.Chip, {
-        key: value,
-        onDelete: () => {
-          this.setState({
-            selectedValues: this.state.selectedValues.filter((v) => v !== value)
-          });
-        }
-      }, value);
-    }), !componentIsFocused && typeof this.props.numberOfSelected === "number" && this.state.selectedValues.length > this.props.numberOfSelected && /* @__PURE__ */ import_react.default.createElement(import_NormalText.NormalText, {
-      fontWeight: "bold",
-      margin: 0
-    }, "+", this.state.selectedValues.length - this.props.numberOfSelected)), /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteMultipleInput.default, {
-      "aria-expanded": menuOpen ? "true" : "false",
-      "aria-activedescendant": optionFocused ? `${id}__option--${focused}` : "",
-      "aria-owns": `${id}__listbox`,
-      "aria-autocomplete": this.hasAutoselect() ? "both" : "list",
-      ...ariaDescribedProp,
-      autoComplete: "off",
-      id,
-      onClick: (event) => this.handleInputClick(event),
-      onBlur: (event) => this.handleAutoCompleteBlur(event),
-      onChange: this.handleInputChange,
-      onFocus: this.handleInputFocus,
-      name,
-      placeholder,
-      ref: (inputElement) => {
-        this.elementReferences[-1] = inputElement;
-      },
-      role: "combobox",
-      required,
-      value: query
-    }), /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-      ref: (buttonElement) => {
-        this.elementReferences["button-arrow"] = buttonElement;
+    return /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteContainer.default, { onKeyDown: this.handleKeyDown, width }, /* @__PURE__ */ import_react.default.createElement(
+      import_Status.default,
+      {
+        id,
+        length: options.length,
+        queryLength: query.length,
+        minQueryLength: minLength,
+        selectedOption: this.templateInputValue(options[selected]),
+        selectedOptionIndex: selected,
+        validChoiceMade,
+        isInFocus: this.state.focused !== null,
+        tQueryTooShort: tStatusQueryTooShort,
+        tNoResults: tStatusNoResults,
+        tSelectedOption: tStatusSelectedOption,
+        tResults: tStatusResults
+      }
+    ), hintValue && (placeholder === "" || !placeholder) && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteInputTypeahead.default, { value: hintValue }), multiple ? /* @__PURE__ */ import_react.default.createElement(
+      import_AutoCompleteMultipleInputContainer.default,
+      {
+        isFocused: componentIsFocused,
+        numberOfSelected: this.props.numberOfSelected
       },
-      variant: "link",
-      onClick: () => {
-        if (!this.state.menuOpen) {
-          source(query, (options2) => {
-            const optionsAvailable = options2.length > 0;
-            this.setState({
-              menuOpen: optionsAvailable,
-              options: options2,
-              selected: autoselect && optionsAvailable ? 0 : -1,
-              validChoiceMade: false
-            });
-          });
-        } else {
-          this.setState({
-            menuOpen: false,
-            focused: null
-          });
+      /* @__PURE__ */ import_react.default.createElement(import_Chip.ChipContainer, null, this.state.selectedValues.map((value, index) => {
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_Chip.Chip,
+          {
+            key: index,
+            onDelete: () => {
+              this.setState((prevState) => ({
+                selectedValues: prevState.selectedValues.filter(
+                  (v) => {
+                    if (typeof v === "string") {
+                      return v !== value;
+                    } else {
+                      return v.value !== value.value;
+                    }
+                  }
+                )
+              }), () => {
+                this.props.onConfirm?.(this.state.selectedValues);
+              });
+            }
+          },
+          typeof value === "string" ? value : value.label.primary
+        );
+      }), !componentIsFocused && typeof this.props.numberOfSelected === "number" && this.state.selectedValues.length > this.props.numberOfSelected && /* @__PURE__ */ import_react.default.createElement(import_NormalText.NormalText, { fontWeight: "bold", margin: 0 }, "+", this.state.selectedValues.length - this.props.numberOfSelected)),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_AutoCompleteMultipleInput.default,
+        {
+          "aria-expanded": menuOpen ? "true" : "false",
+          "aria-activedescendant": optionFocused ? `${id}__option--${focused}` : "",
+          "aria-owns": `${id}__listbox`,
+          "aria-autocomplete": this.hasAutoselect() ? "both" : "list",
+          ...ariaDescribedProp,
+          autoComplete: "off",
+          id,
+          onClick: (event) => this.handleInputClick(event),
+          onBlur: (event) => this.handleAutoCompleteBlur(event),
+          onChange: this.handleInputChange,
+          onFocus: this.handleInputFocus,
+          name,
+          placeholder,
+          ref: (inputElement) => {
+            this.elementReferences[-1] = inputElement;
+          },
+          role: "combobox",
+          required,
+          value: query
         }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_Button.default,
+        {
+          id: `${id}__button-arrow`,
+          ref: (buttonElement) => {
+            this.elementReferences["button-arrow"] = buttonElement;
+          },
+          variant: "link",
+          onClick: () => {
+            if (!this.state.menuOpen) {
+              source(query, (options2) => {
+                const optionsAvailable = options2.length > 0;
+                this.setState({
+                  menuOpen: optionsAvailable,
+                  options: options2,
+                  selected: autoselect && optionsAvailable ? 0 : -1,
+                  validChoiceMade: false
+                });
+              });
+            } else {
+              this.setState({
+                menuOpen: false,
+                focused: null
+              });
+            }
+          },
+          onBlur: (event) => this.handleAutoCompleteBlur(event)
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_CaretIcon.CaretIcon, { direction: "down", size: "md" })
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_AutoCompleteResultList.default,
+        {
+          isVisible: menuIsVisible,
+          onMouseLeave: () => this.handleListMouseLeave(),
+          id: `${id}__listbox`,
+          role: "listbox"
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, null, showAutoCompleteResultListItems(options, multiple)),
+        showNoOptionsFound && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultListItem.default, { empty: true }, tNoResults?.())
+      ),
+      /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteAssistiveHint.default, { id: assistiveHintID }, tAssistiveHint?.())
+    ) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_AutoCompleteInput.default,
+      {
+        "aria-expanded": menuOpen ? "true" : "false",
+        "aria-activedescendant": optionFocused ? `${id}__option--${focused}` : "",
+        "aria-owns": `${id}__listbox`,
+        "aria-autocomplete": this.hasAutoselect() ? "both" : "list",
+        ...ariaDescribedProp,
+        autoComplete: "off",
+        isFocused: componentIsFocused,
+        id,
+        onClick: (event) => this.handleInputClick(event),
+        onBlur: this.handleAutoCompleteBlur,
+        onChange: this.handleInputChange,
+        onFocus: this.handleInputFocus,
+        name,
+        placeholder,
+        ref: (inputElement) => {
+          this.elementReferences[-1] = inputElement;
+        },
+        role: "combobox",
+        required,
+        value: query
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_CaretIcon.CaretIcon, { direction: "down", size: "md" }), /* @__PURE__ */ import_react.default.createElement(
+      import_AutoCompleteResultList.default,
+      {
+        isVisible: menuIsVisible,
+        onMouseLeave: () => this.handleListMouseLeave(),
+        id: `${id}__listbox`,
+        role: "listbox"
       },
-      onBlur: (event) => this.handleAutoCompleteBlur(event)
-    }, /* @__PURE__ */ import_react.default.createElement(import_CaretIcon.CaretIcon, {
-      direction: "down",
-      size: "md"
-    })), /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultList.default, {
-      isVisible: menuIsVisible,
-      onMouseLeave: () => this.handleListMouseLeave(),
-      id: `${id}__listbox`,
-      role: "listbox"
-    }, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, null, showAutoCompleteResultListItems(options, multiple)), showNoOptionsFound && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultListItem.default, {
-      empty: true
-    }, tNoResults?.())), /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteAssistiveHint.default, {
-      id: assistiveHintID
-    }, tAssistiveHint?.())) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteInput.default, {
-      "aria-expanded": menuOpen ? "true" : "false",
-      "aria-activedescendant": optionFocused ? `${id}__option--${focused}` : "",
-      "aria-owns": `${id}__listbox`,
-      "aria-autocomplete": this.hasAutoselect() ? "both" : "list",
-      ...ariaDescribedProp,
-      autoComplete: "off",
-      isFocused: componentIsFocused,
-      id,
-      onClick: (event) => this.handleInputClick(event),
-      onBlur: this.handleAutoCompleteBlur,
-      onChange: this.handleInputChange,
-      onFocus: this.handleInputFocus,
-      name,
-      placeholder,
-      ref: (inputElement) => {
-        this.elementReferences[-1] = inputElement;
-      },
-      role: "combobox",
-      required,
-      value: query
-    }), /* @__PURE__ */ import_react.default.createElement(import_CaretIcon.CaretIcon, {
-      direction: "down",
-      size: "md"
-    }), /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultList.default, {
-      isVisible: menuIsVisible,
-      onMouseLeave: () => this.handleListMouseLeave(),
-      id: `${id}__listbox`,
-      role: "listbox"
-    }, showAutoCompleteResultListItems(options, false), showNoOptionsFound && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultListItem.default, {
-      empty: true
-    }, tNoResults?.())), /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteAssistiveHint.default, {
-      id: assistiveHintID
-    }, tAssistiveHint?.())));
+      showAutoCompleteResultListItems(options, false),
+      showNoOptionsFound && /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteResultListItem.default, { empty: true }, tNoResults?.())
+    ), /* @__PURE__ */ import_react.default.createElement(import_AutoCompleteAssistiveHint.default, { id: assistiveHintID }, tAssistiveHint?.())));
   }
 }
-AutoComplete.defaultProps = {
-  width: "full",
-  autoselect: false,
-  minLength: 0,
-  name: "ds-input-autocomplete",
-  placeholder: "",
-  onConfirm: () => {
-    return;
-  },
-  confirmOnBlur: false,
-  required: false,
-  tNoResults: () => "No results found",
-  tAssistiveHint: () => "When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures."
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AutoComplete,