@digigov/ui 2.0.0-264e5fff → 2.0.0-290ada95

package/form/AutoComplete/index.js

@@ -1,669 +1,530 @@
-import React, { Component } from "react";
-import { AutoCompleteAssistiveHint } from "@digigov/react-core/AutoCompleteAssistiveHint";
-import { AutoCompleteContainer } from "@digigov/react-core/AutoCompleteContainer";
-import { AutoCompleteInputBase } from "@digigov/react-core/AutoCompleteInputBase";
-import { AutoCompleteMultipleInput } from "@digigov/react-core/AutoCompleteMultipleInput";
-import { AutoCompleteMultipleInputContainer } from "@digigov/react-core/AutoCompleteMultipleInputContainer";
-import { AutoCompleteResultList } from "@digigov/react-core/AutoCompleteResultList";
-import { AutoCompleteResultListItem } from "@digigov/react-core/AutoCompleteResultListItem";
-import { Base } from "@digigov/react-core/Base";
-import { CaretIcon } from "@digigov/react-icons/CaretIcon";
-import { Chip, ChipContainer } from "@digigov/ui/content/Chip";
-import Status from "@digigov/ui/form/AutoComplete/Status";
-import {
-  isIosDevice,
-  keyCodes,
-  isPrintableKeyCode
-} from "@digigov/ui/form/AutoComplete/utils";
-import Button from "@digigov/ui/form/Button";
-import Checkbox, { CheckboxItem } from "@digigov/ui/form/Checkbox";
-import { NormalText } from "@digigov/ui/typography/NormalText";
+import react, { Component } from "react";
+import { AutoCompleteAssistiveHint } from "@digigov/react-core/AutoCompleteAssistiveHint/index.js";
+import { AutoCompleteContainer } from "@digigov/react-core/AutoCompleteContainer/index.js";
+import { AutoCompleteInputBase } from "@digigov/react-core/AutoCompleteInputBase/index.js";
+import { AutoCompleteMultipleInput } from "@digigov/react-core/AutoCompleteMultipleInput/index.js";
+import { AutoCompleteMultipleInputContainer } from "@digigov/react-core/AutoCompleteMultipleInputContainer/index.js";
+import { AutoCompleteResultList } from "@digigov/react-core/AutoCompleteResultList/index.js";
+import { AutoCompleteResultListItem } from "@digigov/react-core/AutoCompleteResultListItem/index.js";
+import { Base } from "@digigov/react-core/Base/index.js";
+import { CaretIcon } from "@digigov/react-icons/CaretIcon/index.js";
+import { Chip, ChipContainer } from "../../content/Chip/index.js";
+import Status from "./Status/index.js";
+import { isIosDevice, isPrintableKeyCode, keyCodes } from "./utils.js";
+import Button from "../Button/index.js";
+import Checkbox, { CheckboxItem } from "../Checkbox/index.js";
+import { NormalText } from "../../typography/NormalText/index.js";
 class AutoComplete extends Component {
-  constructor(props) {
-    super(props);
-    this.elementReferences = {};
-    const customState = {};
-    if (Array.isArray(props.defaultValue)) {
-      customState.selectedValues = props.defaultValue;
-    } else if (props.defaultValue) {
-      customState.selectedValues = [props.defaultValue];
-    }
-    this.state = {
-      focused: null,
-      hovered: null,
-      menuOpen: false,
-      options: [],
-      query: this.props.multiple ? "" : props.defaultValue || "",
-      selectedValues: [],
-      validChoiceMade: false,
-      selected: null,
-      ariaHint: true,
-      ...customState
+    static defaultProps = {
+        width: 'full',
+        autoselect: false,
+        minLength: 0,
+        name: 'ds-input-autocomplete',
+        placeholder: '',
+        hint: false,
+        onConfirm: ()=>{},
+        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.'
     };
-    this.handleComponentBlur = this.handleComponentBlur.bind(this);
-    this.handleAutoCompleteBlur = this.handleAutoCompleteBlur.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleUpArrow = this.handleUpArrow.bind(this);
-    this.handleDownArrow = this.handleDownArrow.bind(this);
-    this.handleEnter = this.handleEnter.bind(this);
-    this.handlePrintableKey = this.handlePrintableKey.bind(this);
-    this.handleListMouseLeave = this.handleListMouseLeave.bind(this);
-    if (this.props.multiple) {
-      this.handleOptionClick = this.handleOptionClickMultiple.bind(this);
-    } else {
-      this.handleOptionClick = this.handleOptionClick.bind(this);
+    elementReferences = {};
+    constructor(props){
+        super(props);
+        const customState = {};
+        if (Array.isArray(props.defaultValue)) customState.selectedValues = props.defaultValue;
+        else if (props.defaultValue) customState.selectedValues = [
+            props.defaultValue
+        ];
+        this.state = {
+            focused: null,
+            hovered: null,
+            menuOpen: false,
+            options: [],
+            query: this.props.multiple ? '' : props.defaultValue || '',
+            selectedValues: [],
+            validChoiceMade: false,
+            selected: null,
+            ariaHint: true,
+            ...customState
+        };
+        this.handleComponentBlur = this.handleComponentBlur.bind(this);
+        this.handleAutoCompleteBlur = this.handleAutoCompleteBlur.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleUpArrow = this.handleUpArrow.bind(this);
+        this.handleDownArrow = this.handleDownArrow.bind(this);
+        this.handleEnter = this.handleEnter.bind(this);
+        this.handlePrintableKey = this.handlePrintableKey.bind(this);
+        this.handleListMouseLeave = this.handleListMouseLeave.bind(this);
+        if (this.props.multiple) this.handleOptionClick = this.handleOptionClickMultiple.bind(this);
+        else this.handleOptionClick = this.handleOptionClick.bind(this);
+        this.handleOptionFocus = this.handleOptionFocus.bind(this);
+        this.handleOptionMouseDown = this.handleOptionMouseDown.bind(this);
+        this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleInputFocus = this.handleInputFocus.bind(this);
+        this.getDirectInputChanges = this.getDirectInputChanges.bind(this);
     }
-    this.handleOptionFocus = this.handleOptionFocus.bind(this);
-    this.handleOptionMouseDown = this.handleOptionMouseDown.bind(this);
-    this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    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: "",
-      hint: false,
-      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;
-  }
-  componentDidMount() {
-    this.getDirectInputChanges();
-  }
-  getDirectInputChanges() {
-    const inputReference = this.elementReferences[-1];
-    const queryHasChanged = inputReference && inputReference.value !== (this.state.query ?? "");
-    if (queryHasChanged) {
-      this.handleInputChange({ target: { value: inputReference.value } });
+    isQueryAnOption(query, options) {
+        return -1 !== options.map((entry)=>this.templateInputValue(entry).toLowerCase()).indexOf(query.toLowerCase());
     }
-  }
-  componentDidUpdate(_, prevState) {
-    const { focused } = this.state;
-    const componentLostFocus = focused === null;
-    const focusedChanged = prevState.focused !== focused;
-    const focusDifferentElement = focusedChanged && !componentLostFocus;
-    if (focusDifferentElement) {
-      this.elementReferences[focused].focus();
+    componentDidMount() {
+        this.getDirectInputChanges();
     }
-    const focusedInput = focused === -1;
-    const componentGainedFocus = focusedChanged && prevState.focused === null;
-    const selectAllText = focusedInput && componentGainedFocus;
-    if (selectAllText) {
-      const inputElement = this.elementReferences[focused];
-      inputElement.setSelectionRange(0, inputElement.value.length);
+    getDirectInputChanges() {
+        const inputReference = this.elementReferences[-1];
+        const queryHasChanged = inputReference && inputReference.value !== (this.state.query ?? '');
+        if (queryHasChanged) this.handleInputChange({
+            target: {
+                value: inputReference.value
+            }
+        });
     }
-  }
-  hasAutoselect() {
-    return 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 { confirmOnBlur, autoselect, onConfirm } = this.props;
-    let newQuery = query;
-    if (confirmOnBlur || autoselect) {
-      newQuery = newState?.query ?? query;
+    componentDidUpdate(_, prevState) {
+        const { focused } = this.state;
+        const componentLostFocus = null === focused;
+        const focusedChanged = prevState.focused !== focused;
+        const focusDifferentElement = focusedChanged && !componentLostFocus;
+        if (focusDifferentElement) this.elementReferences[focused].focus();
+        const focusedInput = -1 === focused;
+        const componentGainedFocus = focusedChanged && null === prevState.focused;
+        const selectAllText = focusedInput && componentGainedFocus;
+        if (selectAllText) {
+            const inputElement = this.elementReferences[focused];
+            inputElement.setSelectionRange(0, inputElement.value.length);
+        }
     }
-    if (confirmOnBlur) {
-      onConfirm?.(options[selected]);
+    hasAutoselect() {
+        return isIosDevice() ? false : this.props.autoselect;
     }
-    this.setState({
-      focused: null,
-      menuOpen: newState?.menuOpen || false,
-      query: newQuery,
-      selected: null,
-      validChoiceMade: this.isQueryAnOption(newQuery, options)
-    });
-  }
-  handleListMouseLeave() {
-    this.setState({
-      hovered: null
-    });
-  }
-  handleAutoCompleteBlur(event, index) {
-    const { autoselect } = this.props;
-    const { focused, options, query, selected } = this.state;
-    let focusingOutsideComponent = false;
-    if (event.relatedTarget === null) {
-      focusingOutsideComponent = true;
-    } else {
-      focusingOutsideComponent = this.elementReferences["button-arrow"] !== event.relatedTarget;
+    templateInputValue(value) {
+        const inputValueTemplate = this.props.templates && this.props.templates.inputValue;
+        return inputValueTemplate ? inputValueTemplate(value) : value;
     }
-    const focusingInput = event.relatedTarget === this.elementReferences[-1];
-    const focusingButtonArrow = this.elementReferences["button-arrow"] === event.relatedTarget || false;
-    let focusingAnotherOption = focused !== null && focused !== -1;
-    if (index !== void 0) {
-      focusingAnotherOption = focused !== index && focused !== -1;
+    templateSuggestion(value) {
+        const suggestionTemplate = this.props.templates && this.props.templates.suggestion;
+        return suggestionTemplate ? suggestionTemplate(value, this.state.query) : value;
     }
-    const blurComponent = focusingOutsideComponent && !(focusingAnotherOption || focusingInput || focusingButtonArrow);
-    if (blurComponent && !autoselect) {
-      const newQuery = isIosDevice() ? query : this.templateInputValue(options[selected]);
-      this.handleComponentBlur({
-        menuOpen: false,
-        query: newQuery
-      });
+    handleComponentBlur(newState) {
+        const { options, query, selected } = this.state;
+        const { confirmOnBlur, autoselect, onConfirm } = this.props;
+        let newQuery = query;
+        if (confirmOnBlur || autoselect) newQuery = newState?.query ?? query;
+        if (confirmOnBlur) onConfirm?.(options[selected]);
+        this.setState({
+            focused: null,
+            menuOpen: newState?.menuOpen || false,
+            query: newQuery,
+            selected: null,
+            validChoiceMade: this.isQueryAnOption(newQuery, options)
+        });
     }
-    if (blurComponent && autoselect) {
-      const selectedOption = this.templateInputValue(
-        options[selected]
-      );
-      const newQuery = isIosDevice() ? query : selectedOption?.toLowerCase().includes(query.toLowerCase()) ? selectedOption : query;
-      this.handleComponentBlur({
-        menuOpen: false,
-        query: newQuery
-      });
+    handleListMouseLeave() {
+        this.setState({
+            hovered: null
+        });
     }
-  }
-  handleInputChange(event) {
-    const { source, minLength } = this.props;
-    const query = event.target.value;
-    const queryEmpty = query.length === 0;
-    this.setState({
-      query,
-      ariaHint: queryEmpty
-    });
-    const minLengthQuery = minLength != void 0 && minLength > query.length ? "" : query;
-    source(minLengthQuery, (options) => {
-      const optionsAvailable = options.length > 0;
-      this.setState({
-        menuOpen: optionsAvailable,
-        options,
-        selected: -1,
-        validChoiceMade: false
-      });
-    });
-  }
-  handleInputClick(event) {
-    this.handleInputChange(event);
-  }
-  handleInputFocus() {
-    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 }) => ({
-        focused: -1,
-        menuOpen: shouldReopenMenu || menuOpen,
-        selected: -1
-      }));
-    } else {
-      source(query, (options2) => {
+    handleAutoCompleteBlur(event, index) {
+        const { autoselect } = this.props;
+        const { focused, options, query, selected } = this.state;
+        let focusingOutsideComponent = false;
+        focusingOutsideComponent = null === event.relatedTarget ? true : this.elementReferences['button-arrow'] !== event.relatedTarget;
+        const focusingInput = event.relatedTarget === this.elementReferences[-1];
+        const focusingButtonArrow = this.elementReferences['button-arrow'] === event.relatedTarget || false;
+        let focusingAnotherOption = null !== focused && -1 !== focused;
+        if (void 0 !== index) focusingAnotherOption = focused !== index && -1 !== focused;
+        const blurComponent = focusingOutsideComponent && !(focusingAnotherOption || focusingInput || focusingButtonArrow);
+        if (blurComponent && !autoselect) {
+            const newQuery = isIosDevice() ? query : this.templateInputValue(options[selected]);
+            this.handleComponentBlur({
+                menuOpen: false,
+                query: newQuery
+            });
+        }
+        if (blurComponent && autoselect) {
+            const selectedOption = this.templateInputValue(options[selected]);
+            const newQuery = isIosDevice() ? query : selectedOption?.toLowerCase().includes(query.toLowerCase()) ? selectedOption : query;
+            this.handleComponentBlur({
+                menuOpen: false,
+                query: newQuery
+            });
+        }
+    }
+    handleInputChange(event) {
+        const { source, minLength } = this.props;
+        const query = event.target.value;
+        const queryEmpty = 0 === query.length;
         this.setState({
-          focused: -1,
-          options: options2
+            query,
+            ariaHint: queryEmpty
+        });
+        const minLengthQuery = void 0 != minLength && minLength > query.length ? '' : query;
+        source(minLengthQuery, (options)=>{
+            const optionsAvailable = options.length > 0;
+            this.setState({
+                menuOpen: optionsAvailable,
+                options,
+                selected: -1,
+                validChoiceMade: false
+            });
         });
-      });
     }
-  }
-  handleOptionFocus(index) {
-    this.setState({
-      focused: index,
-      hovered: null,
-      selected: index
-    });
-  }
-  handleOptionMouseEnter(index) {
-    if (!isIosDevice()) {
-      this.setState({
-        hovered: index
-      });
+    handleInputClick(event) {
+        this.handleInputChange(event);
     }
-    this.handleOptionFocus(index);
-  }
-  handleOptionClickMultiple(index) {
-    const selectedOption = this.state.options[index];
-    let selectedValues = this.state.selectedValues;
-    if (this.state.selectedValues.indexOf(selectedOption) === -1) {
-      selectedValues = selectedValues.concat([selectedOption]);
-    } else {
-      selectedValues.splice(
-        this.state.selectedValues.indexOf(selectedOption),
-        1
-      );
+    handleInputFocus() {
+        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 })=>({
+                focused: -1,
+                menuOpen: shouldReopenMenu || menuOpen,
+                selected: -1
+            }));
+        else source(query, (options)=>{
+            this.setState({
+                focused: -1,
+                options
+            });
+        });
     }
-    this.props.onConfirm?.(selectedValues);
-    this.setState({
-      focused: index,
-      hovered: null,
-      menuOpen: true,
-      query: "",
-      selectedValues,
-      selected: index,
-      validChoiceMade: true
-    });
-    this.forceUpdate();
-  }
-  handleOptionClick(index) {
-    const selectedOption = this.state.options[index];
-    const newQuery = this.templateInputValue(selectedOption);
-    this.props.onConfirm?.(selectedOption);
-    const selectedValues = this.props.multiple ? this.state.selectedValues.concat(selectedOption) : [selectedOption];
-    this.setState({
-      focused: -1,
-      hovered: null,
-      menuOpen: false,
-      query: newQuery,
-      selectedValues,
-      selected: -1,
-      validChoiceMade: true
-    });
-    this.forceUpdate();
-  }
-  handleOptionMouseDown(event) {
-    event.preventDefault();
-  }
-  handleUpArrow(event) {
-    event.preventDefault();
-    const { menuOpen, selected } = this.state;
-    const isNotAtTop = selected !== -1;
-    const allowMoveUp = isNotAtTop && menuOpen;
-    if (allowMoveUp) {
-      this.handleOptionFocus(selected - 1);
+    handleOptionFocus(index) {
+        this.setState({
+            focused: index,
+            hovered: null,
+            selected: index
+        });
+    }
+    handleOptionMouseEnter(index) {
+        if (!isIosDevice()) this.setState({
+            hovered: index
+        });
+        this.handleOptionFocus(index);
     }
-  }
-  handleDownArrow(event) {
-    event.preventDefault();
-    if (this.state.menuOpen === false) {
-      event.preventDefault();
-      this.props.source("", (options) => {
+    handleOptionClickMultiple(index) {
+        const selectedOption = this.state.options[index];
+        let selectedValues = this.state.selectedValues;
+        if (-1 === this.state.selectedValues.indexOf(selectedOption)) selectedValues = selectedValues.concat([
+            selectedOption
+        ]);
+        else selectedValues.splice(this.state.selectedValues.indexOf(selectedOption), 1);
+        this.props.onConfirm?.(selectedValues);
         this.setState({
-          menuOpen: true,
-          options,
-          selected: 0,
-          focused: 0,
-          hovered: null
+            focused: index,
+            hovered: null,
+            menuOpen: true,
+            query: '',
+            selectedValues,
+            selected: index,
+            validChoiceMade: true
         });
-      });
-    } else if (this.state.menuOpen === true) {
-      const { menuOpen, options, selected } = this.state;
-      const isNotAtBottom = selected !== options.length - 1;
-      const allowMoveDown = isNotAtBottom && menuOpen;
-      if (allowMoveDown) {
-        this.handleOptionFocus(selected + 1);
-      }
+        this.forceUpdate();
     }
-  }
-  handleSpace(event) {
-    if (this.state.menuOpen === false && this.state.query === "") {
-      event.preventDefault();
-      this.props.source("", (options) => {
+    handleOptionClick(index) {
+        const selectedOption = this.state.options[index];
+        const newQuery = this.templateInputValue(selectedOption);
+        this.props.onConfirm?.(selectedOption);
+        const selectedValues = this.props.multiple ? this.state.selectedValues.concat(selectedOption) : [
+            selectedOption
+        ];
         this.setState({
-          menuOpen: true,
-          options
+            focused: -1,
+            hovered: null,
+            menuOpen: false,
+            query: newQuery,
+            selectedValues,
+            selected: -1,
+            validChoiceMade: true
         });
-      });
+        this.forceUpdate();
     }
-    const focusIsOnOption = this.state.focused !== -1;
-    if (focusIsOnOption) {
-      event.preventDefault();
-      this.handleOptionClick(this.state.focused);
+    handleOptionMouseDown(event) {
+        event.preventDefault();
     }
-  }
-  handleEnter(event) {
-    if (this.state.menuOpen) {
-      event.preventDefault();
-      const hasSelectedOption = this.state.selected >= 0;
-      if (hasSelectedOption) {
-        this.handleOptionClick(this.state.selected);
-        if (this.props.multiple) {
-          this.setState({
-            menuOpen: false,
-            focused: -1
-          });
+    handleUpArrow(event) {
+        event.preventDefault();
+        const { menuOpen, selected } = this.state;
+        const isNotAtTop = -1 !== selected;
+        const allowMoveUp = isNotAtTop && menuOpen;
+        if (allowMoveUp) this.handleOptionFocus(selected - 1);
+    }
+    handleDownArrow(event) {
+        event.preventDefault();
+        if (false === this.state.menuOpen) {
+            event.preventDefault();
+            this.props.source('', (options)=>{
+                this.setState({
+                    menuOpen: true,
+                    options,
+                    selected: 0,
+                    focused: 0,
+                    hovered: null
+                });
+            });
+        } else if (true === this.state.menuOpen) {
+            const { menuOpen, options, selected } = this.state;
+            const isNotAtBottom = selected !== options.length - 1;
+            const allowMoveDown = isNotAtBottom && menuOpen;
+            if (allowMoveDown) this.handleOptionFocus(selected + 1);
         }
-      }
     }
-  }
-  handlePrintableKey(event) {
-    const inputElement = this.elementReferences[-1];
-    const eventIsOnInput = event.target === inputElement;
-    if (!eventIsOnInput) {
-      inputElement.focus();
+    handleSpace(event) {
+        if (false === this.state.menuOpen && '' === this.state.query) {
+            event.preventDefault();
+            this.props.source('', (options)=>{
+                this.setState({
+                    menuOpen: true,
+                    options
+                });
+            });
+        }
+        const focusIsOnOption = -1 !== this.state.focused;
+        if (focusIsOnOption) {
+            event.preventDefault();
+            this.handleOptionClick(this.state.focused);
+        }
     }
-  }
-  handleKeyDown(event) {
-    switch (keyCodes[event.keyCode]) {
-      case "up":
-        this.handleUpArrow(event);
-        break;
-      case "down":
-        this.handleDownArrow(event);
-        break;
-      case "space":
-        this.handleSpace(event);
-        break;
-      case "enter":
-        this.handleEnter(event);
-        break;
-      case "escape": {
-        this.handleComponentBlur({
-          query: this.state.query,
-          menuOpen: false
-        });
-        break;
-      }
-      case "backspace":
-        if (this.props.multiple) {
-          if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
+    handleEnter(event) {
+        if (this.state.menuOpen) {
             event.preventDefault();
-            const updatedSelectedValues = this.state.selectedValues.slice(
-              0,
-              -1
-            );
-            this.setState(
-              {
-                selectedValues: updatedSelectedValues
-              },
-              () => {
-                this.props.onConfirm?.(updatedSelectedValues);
-              }
-            );
-          } else {
-            if (isPrintableKeyCode(event.keyCode)) {
-              this.handlePrintableKey(event);
+            const hasSelectedOption = this.state.selected >= 0;
+            if (hasSelectedOption) {
+                this.handleOptionClick(this.state.selected);
+                if (this.props.multiple) this.setState({
+                    menuOpen: false,
+                    focused: -1
+                });
             }
-          }
-        } else {
-          this.props.onConfirm?.("");
         }
-        break;
-      default:
-        if (isPrintableKeyCode(event.keyCode)) {
-          this.handlePrintableKey(event);
+    }
+    handlePrintableKey(event) {
+        const inputElement = this.elementReferences[-1];
+        const eventIsOnInput = event.target === inputElement;
+        if (!eventIsOnInput) inputElement.focus();
+    }
+    handleKeyDown(event) {
+        switch(keyCodes[event.keyCode]){
+            case 'up':
+                this.handleUpArrow(event);
+                break;
+            case 'down':
+                this.handleDownArrow(event);
+                break;
+            case 'space':
+                this.handleSpace(event);
+                break;
+            case 'enter':
+                this.handleEnter(event);
+                break;
+            case 'escape':
+                this.handleComponentBlur({
+                    query: this.state.query,
+                    menuOpen: false
+                });
+                break;
+            case 'backspace':
+                if (this.props.multiple) {
+                    if (0 === this.state.query.length && this.state.selectedValues.length > 0) {
+                        event.preventDefault();
+                        const updatedSelectedValues = this.state.selectedValues.slice(0, -1);
+                        this.setState({
+                            selectedValues: updatedSelectedValues
+                        }, ()=>{
+                            this.props.onConfirm?.(updatedSelectedValues);
+                        });
+                    } else if (isPrintableKeyCode(event.keyCode)) this.handlePrintableKey(event);
+                } else this.props.onConfirm?.('');
+                break;
+            default:
+                if (isPrintableKeyCode(event.keyCode)) this.handlePrintableKey(event);
+                break;
         }
-        break;
     }
-  }
-  render() {
-    const {
-      id,
-      width,
-      minLength,
-      name,
-      placeholder,
-      required,
-      hint,
-      tNoResults,
-      tStatusQueryTooShort,
-      tStatusNoResults,
-      tStatusSelectedOption,
-      tStatusResults,
-      tAssistiveHint,
-      multiple,
-      source
-    } = this.props;
-    const {
-      focused,
-      hovered,
-      menuOpen,
-      options,
-      selected,
-      ariaHint,
-      validChoiceMade
-    } = this.state;
-    const autoselect = this.hasAutoselect();
-    const query = this.state.query ?? "";
-    const inputFocused = focused === -1;
-    const noOptionsAvailable = options.length === 0;
-    const queryNotEmpty = query.length !== 0;
-    const queryLongEnough = query.length >= minLength;
-    const showNoOptionsFound = inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
-    const componentIsFocused = focused !== null;
-    const optionFocused = focused !== -1 && focused !== null;
-    const menuIsVisible = menuOpen || showNoOptionsFound;
-    const selectedOptionText = this.templateInputValue(options[selected]);
-    const optionBeginsWithQuery = selectedOptionText && selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
-    const hintValue = optionBeginsWithQuery && (autoselect || hint) ? query + selectedOptionText.substr(query.length) : "";
-    const assistiveHintID = id + "__assistiveHint";
-    const ariaDescribedProp = ariaHint ? {
-      "aria-describedby": assistiveHintID
-    } : null;
-    const showAutoCompleteResultListItems = (options2, multiple2) => {
-      {
-        return options2.map((option, index) => {
-          const showFocused = focused === -1 ? selected === index : focused === index;
-          const iosPosinsetHtml = isIosDevice() ? /* @__PURE__ */ React.createElement(
-            Base,
-            {
-              as: "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__ */ React.createElement(
-            AutoCompleteResultListItem,
-            {
-              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__ */ React.createElement(
-              CheckboxItem,
-              {
-                value: option,
-                checked: this.state.selectedValues.includes(option),
-                onChange: () => {
-                }
-              },
-              this.templateSuggestion(option)
-            ) : this.templateSuggestion(option),
-            iosPosinsetHtml
-          );
-        });
-      }
-    };
-    return /* @__PURE__ */ React.createElement(AutoCompleteContainer, { onKeyDown: this.handleKeyDown, width }, /* @__PURE__ */ React.createElement(
-      Status,
-      {
-        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
-      }
-    ), multiple && !autoselect ? /* @__PURE__ */ React.createElement(
-      AutoCompleteMultipleInputContainer,
-      {
-        isFocused: componentIsFocused,
-        numberOfSelected: this.props.numberOfSelected
-      },
-      /* @__PURE__ */ React.createElement(ChipContainer, null, this.state.selectedValues.map((value, index) => {
-        return /* @__PURE__ */ React.createElement(
-          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;
-                      }
+    render() {
+        const { id, width, minLength, name, placeholder, required, hint, tNoResults, tStatusQueryTooShort, tStatusNoResults, tStatusSelectedOption, tStatusResults, tAssistiveHint, multiple, source } = this.props;
+        const { focused, hovered, menuOpen, options, selected, ariaHint, validChoiceMade } = this.state;
+        const autoselect = this.hasAutoselect();
+        const query = this.state.query ?? '';
+        const inputFocused = -1 === focused;
+        const noOptionsAvailable = 0 === options.length;
+        const queryNotEmpty = 0 !== query.length;
+        const queryLongEnough = query.length >= minLength;
+        const showNoOptionsFound = inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
+        const componentIsFocused = null !== focused;
+        const optionFocused = -1 !== focused && null !== focused;
+        const menuIsVisible = menuOpen || showNoOptionsFound;
+        const selectedOptionText = this.templateInputValue(options[selected]);
+        const optionBeginsWithQuery = selectedOptionText && 0 === selectedOptionText.toLowerCase().indexOf(query.toLowerCase());
+        const hintValue = optionBeginsWithQuery && (autoselect || hint) ? query + selectedOptionText.substr(query.length) : '';
+        const assistiveHintID = id + '__assistiveHint';
+        const ariaDescribedProp = ariaHint ? {
+            'aria-describedby': assistiveHintID
+        } : null;
+        const showAutoCompleteResultListItems = (options, multiple)=>options.map((option, index)=>{
+                const showFocused = -1 === focused ? selected === index : focused === index;
+                const iosPosinsetHtml = isIosDevice() ? /*#__PURE__*/ react.createElement(Base, {
+                    as: "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'
                     }
-                  )
-                }),
-                () => {
-                  this.props.onConfirm?.(this.state.selectedValues);
+                }, index + 1, " από ", options.length) : '';
+                return /*#__PURE__*/ react.createElement(AutoCompleteResultListItem, {
+                    isFocused: showFocused,
+                    isHovered: hovered,
+                    index: 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: 'object' == typeof option ? option?.value : option,
+                    "aria-posinset": index + 1,
+                    "aria-setsize": options.length
+                }, multiple ? /*#__PURE__*/ react.createElement(CheckboxItem, {
+                    value: option,
+                    checked: this.state.selectedValues.includes(option),
+                    onChange: ()=>{}
+                }, this.templateSuggestion(option)) : this.templateSuggestion(option), iosPosinsetHtml);
+            });
+        return /*#__PURE__*/ react.createElement(AutoCompleteContainer, {
+            onKeyDown: this.handleKeyDown,
+            width: width
+        }, /*#__PURE__*/ react.createElement(Status, {
+            id: id,
+            length: options.length,
+            queryLength: query.length,
+            minQueryLength: minLength,
+            selectedOption: this.templateInputValue(options[selected]),
+            selectedOptionIndex: selected,
+            validChoiceMade: validChoiceMade,
+            isInFocus: null !== this.state.focused,
+            tQueryTooShort: tStatusQueryTooShort,
+            tNoResults: tStatusNoResults,
+            tSelectedOption: tStatusSelectedOption,
+            tResults: tStatusResults
+        }), multiple && !autoselect ? /*#__PURE__*/ react.createElement(AutoCompleteMultipleInputContainer, {
+            isFocused: componentIsFocused,
+            numberOfSelected: this.props.numberOfSelected
+        }, /*#__PURE__*/ react.createElement(ChipContainer, null, this.state.selectedValues.map((value, index)=>/*#__PURE__*/ react.createElement(Chip, {
+                key: index,
+                onDelete: ()=>{
+                    this.setState((prevState)=>({
+                            selectedValues: prevState.selectedValues.filter((v)=>{
+                                if ('string' == typeof v) return v !== value;
+                                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__ */ React.createElement(NormalText, { fontWeight: "bold", margin: 0 }, "+", this.state.selectedValues.length - this.props.numberOfSelected)),
-      /* @__PURE__ */ React.createElement(
-        AutoCompleteMultipleInput,
-        {
-          "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: hintValue || placeholder,
-          ref: (inputElement) => {
-            this.elementReferences[-1] = inputElement;
-          },
-          role: "combobox",
-          required,
-          value: query
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          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: -1,
-                  validChoiceMade: false
+            }, 'string' == typeof value ? value : value.label.primary)), !componentIsFocused && 'number' == typeof this.props.numberOfSelected && this.state.selectedValues.length > this.props.numberOfSelected && /*#__PURE__*/ react.createElement(NormalText, {
+            fontWeight: "bold",
+            margin: 0
+        }, "+", this.state.selectedValues.length - this.props.numberOfSelected)), /*#__PURE__*/ react.createElement(AutoCompleteMultipleInput, {
+            "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: id,
+            onClick: (event)=>this.handleInputClick(event),
+            onBlur: (event)=>this.handleAutoCompleteBlur(event),
+            onChange: this.handleInputChange,
+            onFocus: this.handleInputFocus,
+            name: name,
+            placeholder: hintValue || placeholder,
+            ref: (inputElement)=>{
+                this.elementReferences[-1] = inputElement;
+            },
+            role: "combobox",
+            required: required,
+            value: query
+        }), /*#__PURE__*/ react.createElement(Button, {
+            id: `${id}__button-arrow`,
+            ref: (buttonElement)=>{
+                this.elementReferences['button-arrow'] = buttonElement;
+            },
+            variant: "link",
+            onClick: ()=>{
+                if (this.state.menuOpen) this.setState({
+                    menuOpen: false,
+                    focused: null
                 });
-              });
-            } else {
-              this.setState({
-                menuOpen: false,
-                focused: null
-              });
-            }
-          },
-          onBlur: (event) => this.handleAutoCompleteBlur(event)
-        },
-        /* @__PURE__ */ React.createElement(CaretIcon, { direction: "down", size: "md" })
-      ),
-      /* @__PURE__ */ React.createElement(
-        AutoCompleteResultList,
-        {
-          isVisible: menuIsVisible,
-          onMouseLeave: () => this.handleListMouseLeave(),
-          id: `${id}__listbox`,
-          role: "listbox"
-        },
-        /* @__PURE__ */ React.createElement(Checkbox, null, showAutoCompleteResultListItems(options, multiple)),
-        showNoOptionsFound && /* @__PURE__ */ React.createElement(AutoCompleteResultListItem, { empty: true }, tNoResults?.())
-      ),
-      /* @__PURE__ */ React.createElement(AutoCompleteAssistiveHint, { id: assistiveHintID }, tAssistiveHint?.())
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      AutoCompleteInputBase,
-      {
-        "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: hintValue || placeholder,
-        ref: (inputElement) => {
-          this.elementReferences[-1] = inputElement;
-        },
-        role: "combobox",
-        required,
-        value: query
-      }
-    ), /* @__PURE__ */ React.createElement(CaretIcon, { direction: "down", size: "md" }), /* @__PURE__ */ React.createElement(
-      AutoCompleteResultList,
-      {
-        isVisible: menuIsVisible,
-        onMouseLeave: () => this.handleListMouseLeave(),
-        id: `${id}__listbox`,
-        role: "listbox"
-      },
-      showAutoCompleteResultListItems(options, false),
-      showNoOptionsFound && /* @__PURE__ */ React.createElement(AutoCompleteResultListItem, { empty: true }, tNoResults?.())
-    ), /* @__PURE__ */ React.createElement(AutoCompleteAssistiveHint, { id: assistiveHintID }, tAssistiveHint?.())));
-  }
+                else source(query, (options)=>{
+                    const optionsAvailable = options.length > 0;
+                    this.setState({
+                        menuOpen: optionsAvailable,
+                        options,
+                        selected: -1,
+                        validChoiceMade: false
+                    });
+                });
+            },
+            onBlur: (event)=>this.handleAutoCompleteBlur(event)
+        }, /*#__PURE__*/ react.createElement(CaretIcon, {
+            direction: "down",
+            size: "md"
+        })), /*#__PURE__*/ react.createElement(AutoCompleteResultList, {
+            isVisible: menuIsVisible,
+            onMouseLeave: ()=>this.handleListMouseLeave(),
+            id: `${id}__listbox`,
+            role: "listbox"
+        }, /*#__PURE__*/ react.createElement(Checkbox, null, showAutoCompleteResultListItems(options, multiple)), showNoOptionsFound && /*#__PURE__*/ react.createElement(AutoCompleteResultListItem, {
+            empty: true
+        }, tNoResults?.())), /*#__PURE__*/ react.createElement(AutoCompleteAssistiveHint, {
+            id: assistiveHintID
+        }, tAssistiveHint?.())) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AutoCompleteInputBase, {
+            "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: id,
+            onClick: (event)=>this.handleInputClick(event),
+            onBlur: this.handleAutoCompleteBlur,
+            onChange: this.handleInputChange,
+            onFocus: this.handleInputFocus,
+            name: name,
+            placeholder: hintValue || placeholder,
+            ref: (inputElement)=>{
+                this.elementReferences[-1] = inputElement;
+            },
+            role: "combobox",
+            required: required,
+            value: query
+        }), /*#__PURE__*/ react.createElement(CaretIcon, {
+            direction: "down",
+            size: "md"
+        }), /*#__PURE__*/ react.createElement(AutoCompleteResultList, {
+            isVisible: menuIsVisible,
+            onMouseLeave: ()=>this.handleListMouseLeave(),
+            id: `${id}__listbox`,
+            role: "listbox"
+        }, showAutoCompleteResultListItems(options, false), showNoOptionsFound && /*#__PURE__*/ react.createElement(AutoCompleteResultListItem, {
+            empty: true
+        }, tNoResults?.())), /*#__PURE__*/ react.createElement(AutoCompleteAssistiveHint, {
+            id: assistiveHintID
+        }, tAssistiveHint?.())));
+    }
 }
-export {
-  AutoComplete,
-  AutoCompleteAssistiveHint,
-  AutoCompleteContainer,
-  AutoCompleteInputBase,
-  AutoCompleteMultipleInput,
-  AutoCompleteMultipleInputContainer,
-  AutoCompleteResultList,
-  AutoCompleteResultListItem,
-  AutoComplete as default
-};
-//# sourceMappingURL=index.js.map
+export { AutoComplete, AutoCompleteAssistiveHint, AutoCompleteContainer, AutoCompleteInputBase, AutoCompleteMultipleInput, AutoCompleteMultipleInputContainer, AutoCompleteResultList, AutoCompleteResultListItem, AutoComplete as default };