@digigov/ui 2.0.0-f2d82d25 → 2.0.0-rc.0

package/form/AutoComplete/index.js

@@ -1,622 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { Component } from 'react';
-import AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
-import AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
-import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
-import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
-import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
-import AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
-import { CaretIcon } from '@digigov/react-icons/CaretIcon';
-import Status from '@digigov/ui/form/AutoComplete/Status';
-import { isIosDevice, keyCodes, isPrintableKeyCode } from '@digigov/ui/form/AutoComplete/utils';
-var AutoComplete = /*#__PURE__*/function (_Component) {
-  _inherits(AutoComplete, _Component);
-  function AutoComplete(props) {
-    var _this;
-    _classCallCheck(this, AutoComplete);
-    _this = _callSuper(this, AutoComplete, [props]);
-    _this.elementReferences = {};
-    _this.$pollInput = void 0;
-    _this.state = {
-      focused: null,
-      hovered: null,
-      menuOpen: false,
-      options: props.defaultValue ? [props.defaultValue] : [],
-      query: props.defaultValue,
-      validChoiceMade: false,
-      selected: null,
-      ariaHint: true
-    };
-    _this.handleComponentBlur = _this.handleComponentBlur.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleUpArrow = _this.handleUpArrow.bind(_assertThisInitialized(_this));
-    _this.handleDownArrow = _this.handleDownArrow.bind(_assertThisInitialized(_this));
-    _this.handleEnter = _this.handleEnter.bind(_assertThisInitialized(_this));
-    _this.handlePrintableKey = _this.handlePrintableKey.bind(_assertThisInitialized(_this));
-    _this.handleListMouseLeave = _this.handleListMouseLeave.bind(_assertThisInitialized(_this));
-    _this.handleOptionBlur = _this.handleOptionBlur.bind(_assertThisInitialized(_this));
-    _this.handleOptionClick = _this.handleOptionClick.bind(_assertThisInitialized(_this));
-    _this.handleOptionFocus = _this.handleOptionFocus.bind(_assertThisInitialized(_this));
-    _this.handleOptionMouseDown = _this.handleOptionMouseDown.bind(_assertThisInitialized(_this));
-    _this.handleOptionMouseEnter = _this.handleOptionMouseEnter.bind(_assertThisInitialized(_this));
-    _this.handleInputBlur = _this.handleInputBlur.bind(_assertThisInitialized(_this));
-    _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
-    _this.handleInputFocus = _this.handleInputFocus.bind(_assertThisInitialized(_this));
-    _this.pollInputElement = _this.pollInputElement.bind(_assertThisInitialized(_this));
-    _this.getDirectInputChanges = _this.getDirectInputChanges.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(AutoComplete, [{
-    key: "isQueryAnOption",
-    value: function isQueryAnOption(query, options) {
-      var _this2 = this;
-      return options.map(function (entry) {
-        return _this2.templateInputValue(entry).toLowerCase();
-      }).indexOf(query.toLowerCase()) !== -1;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.pollInputElement();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      clearTimeout(this.$pollInput);
-    }
-
-    // Applications like Dragon NaturallySpeaking will modify the
-    // `input` field by directly changing its `.value`. These events
-    // don't trigger our JavaScript event listeners, so we need to poll
-    // to handle when and if they occur.
-  }, {
-    key: "pollInputElement",
-    value: function pollInputElement() {
-      var _this3 = this;
-      this.getDirectInputChanges();
-      this.$pollInput = setTimeout(function () {
-        _this3.pollInputElement();
-      }, 100);
-    }
-  }, {
-    key: "getDirectInputChanges",
-    value: function getDirectInputChanges() {
-      var inputReference = this.elementReferences[-1];
-      var queryHasChanged = inputReference && inputReference.value !== this.state.query;
-      if (queryHasChanged) {
-        this.handleInputChange({
-          target: {
-            value: inputReference.value
-          }
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
-      var focused = this.state.focused;
-      var componentLostFocus = focused === null;
-      var focusedChanged = prevState.focused !== focused;
-      var focusDifferentElement = focusedChanged && !componentLostFocus;
-      if (focusDifferentElement) {
-        this.elementReferences[focused].focus();
-      }
-      var focusedInput = focused === -1;
-      var componentGainedFocus = focusedChanged && prevState.focused === null;
-      var selectAllText = focusedInput && componentGainedFocus;
-      if (selectAllText) {
-        var inputElement = this.elementReferences[focused];
-        inputElement.setSelectionRange(0, inputElement.value.length);
-      }
-    }
-  }, {
-    key: "hasAutoselect",
-    value: function hasAutoselect() {
-      return isIosDevice() ? false : this.props.autoselect;
-    }
-
-    // This template is used when converting from a state.options object into a state.query.
-  }, {
-    key: "templateInputValue",
-    value: function templateInputValue(value) {
-      var inputValueTemplate = this.props.templates && this.props.templates.inputValue;
-      return inputValueTemplate ? inputValueTemplate(value) : value;
-    }
-
-    // This template is used when displaying results / suggestions.
-  }, {
-    key: "templateSuggestion",
-    value: function templateSuggestion(value) {
-      var suggestionTemplate = this.props.templates && this.props.templates.suggestion;
-      return suggestionTemplate ? suggestionTemplate(value) : value;
-    }
-  }, {
-    key: "handleComponentBlur",
-    value: function handleComponentBlur(newState) {
-      var _this$state = this.state,
-        options = _this$state.options,
-        query = _this$state.query,
-        selected = _this$state.selected;
-      var newQuery;
-      if (this.props.confirmOnBlur) {
-        var _this$props$onConfirm, _this$props;
-        newQuery = newState.query || query;
-        (_this$props$onConfirm = (_this$props = this.props).onConfirm) === null || _this$props$onConfirm === void 0 ? void 0 : _this$props$onConfirm.call(_this$props, options[selected]);
-      } else {
-        newQuery = query;
-      }
-      this.setState({
-        focused: null,
-        menuOpen: newState.menuOpen || false,
-        query: newQuery,
-        selected: null,
-        validChoiceMade: this.isQueryAnOption(newQuery, options)
-      });
-    }
-  }, {
-    key: "handleListMouseLeave",
-    value: function handleListMouseLeave() {
-      this.setState({
-        hovered: null
-      });
-    }
-  }, {
-    key: "handleOptionBlur",
-    value: function handleOptionBlur(event, index) {
-      var _this$state2 = this.state,
-        focused = _this$state2.focused,
-        menuOpen = _this$state2.menuOpen,
-        options = _this$state2.options,
-        selected = _this$state2.selected;
-      var focusingOutsideComponent = event.relatedTarget === null;
-      var focusingInput = event.relatedTarget === this.elementReferences[-1];
-      var focusingAnotherOption = focused !== index && focused !== -1;
-      var blurComponent = !focusingAnotherOption && focusingOutsideComponent || !(focusingAnotherOption || focusingInput);
-      if (blurComponent) {
-        var keepMenuOpen = menuOpen && isIosDevice();
-        this.handleComponentBlur({
-          menuOpen: keepMenuOpen,
-          query: this.templateInputValue(options[selected])
-        });
-      }
-    }
-  }, {
-    key: "handleInputBlur",
-    value: function handleInputBlur() {
-      var _this$state3 = this.state,
-        focused = _this$state3.focused,
-        menuOpen = _this$state3.menuOpen,
-        options = _this$state3.options,
-        query = _this$state3.query,
-        selected = _this$state3.selected;
-      var focusingAnOption = focused !== -1;
-      if (!focusingAnOption) {
-        var keepMenuOpen = menuOpen && isIosDevice();
-        var newQuery = isIosDevice() ? query : this.templateInputValue(options[selected]);
-        this.handleComponentBlur({
-          menuOpen: keepMenuOpen,
-          query: newQuery
-        });
-      }
-    }
-  }, {
-    key: "handleInputChange",
-    value: function handleInputChange(event) {
-      var _this4 = this;
-      var _this$props2 = this.props,
-        minLength = _this$props2.minLength,
-        source = _this$props2.source,
-        showAllValues = _this$props2.showAllValues;
-      var autoselect = this.hasAutoselect();
-      var query = event.target.value;
-      var queryEmpty = query.length === 0;
-      var queryChanged = this.state.query.length !== query.length;
-      var queryLongEnough = query.length >= minLength;
-      this.setState({
-        query: query,
-        ariaHint: queryEmpty
-      });
-      var searchForOptions = showAllValues || !queryEmpty && queryChanged && queryLongEnough;
-      if (searchForOptions) {
-        source(query, function (options) {
-          var optionsAvailable = options.length > 0;
-          _this4.setState({
-            menuOpen: optionsAvailable,
-            options: options,
-            selected: autoselect && optionsAvailable ? 0 : -1,
-            validChoiceMade: false
-          });
-        });
-      } else if (queryEmpty || !queryLongEnough) {
-        this.setState({
-          menuOpen: false,
-          options: []
-        });
-      }
-    }
-  }, {
-    key: "handleInputClick",
-    value: function handleInputClick(event) {
-      this.handleInputChange(event);
-    }
-  }, {
-    key: "handleInputFocus",
-    value: function handleInputFocus() {
-      var _this$state4 = this.state,
-        query = _this$state4.query,
-        validChoiceMade = _this$state4.validChoiceMade,
-        options = _this$state4.options;
-      var minLength = this.props.minLength;
-      var shouldReopenMenu = !validChoiceMade && query.length >= minLength && options.length > 0;
-      if (shouldReopenMenu) {
-        this.setState(function (_ref) {
-          var menuOpen = _ref.menuOpen;
-          return {
-            focused: -1,
-            menuOpen: shouldReopenMenu || menuOpen,
-            selected: -1
-          };
-        });
-      } else {
-        this.setState({
-          focused: -1
-        });
-      }
-    }
-  }, {
-    key: "handleOptionFocus",
-    value: function handleOptionFocus(index) {
-      this.setState({
-        focused: index,
-        hovered: null,
-        selected: index
-      });
-    }
-  }, {
-    key: "handleOptionMouseEnter",
-    value: function handleOptionMouseEnter(index) {
-      // iOS Safari prevents click event if mouseenter adds hover background colour
-      // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4
-      if (!isIosDevice()) {
-        this.setState({
-          hovered: index
-        });
-      }
-    }
-  }, {
-    key: "handleOptionClick",
-    value: function handleOptionClick(index) {
-      var _this$props$onConfirm2, _this$props3;
-      var selectedOption = this.state.options[index];
-      var newQuery = this.templateInputValue(selectedOption);
-      (_this$props$onConfirm2 = (_this$props3 = this.props).onConfirm) === null || _this$props$onConfirm2 === void 0 ? void 0 : _this$props$onConfirm2.call(_this$props3, selectedOption);
-      this.setState({
-        focused: -1,
-        hovered: null,
-        menuOpen: false,
-        query: newQuery,
-        selected: -1,
-        validChoiceMade: true
-      });
-      this.forceUpdate();
-    }
-  }, {
-    key: "handleOptionMouseDown",
-    value: function handleOptionMouseDown(event) {
-      // Safari triggers focusOut before click, but if you
-      // preventDefault on mouseDown, you can stop that from happening.
-      // If this is removed, clicking on an option in Safari will trigger
-      // `handleOptionBlur`, which closes the menu, and the click will
-      // trigger on the element underneath instead.
-      // See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery
-      event.preventDefault();
-    }
-  }, {
-    key: "handleUpArrow",
-    value: function handleUpArrow(event) {
-      event.preventDefault();
-      var _this$state5 = this.state,
-        menuOpen = _this$state5.menuOpen,
-        selected = _this$state5.selected;
-      var isNotAtTop = selected !== -1;
-      var allowMoveUp = isNotAtTop && menuOpen;
-      if (allowMoveUp) {
-        this.handleOptionFocus(selected - 1);
-      }
-    }
-  }, {
-    key: "handleDownArrow",
-    value: function handleDownArrow(event) {
-      var _this5 = this;
-      event.preventDefault();
-      // if not open, open
-      if (this.props.showAllValues && this.state.menuOpen === false) {
-        event.preventDefault();
-        this.props.source('', function (options) {
-          _this5.setState({
-            menuOpen: true,
-            options: options,
-            selected: 0,
-            focused: 0,
-            hovered: null
-          });
-        });
-      } else if (this.state.menuOpen === true) {
-        var _this$state6 = this.state,
-          menuOpen = _this$state6.menuOpen,
-          _options = _this$state6.options,
-          selected = _this$state6.selected;
-        var isNotAtBottom = selected !== _options.length - 1;
-        var allowMoveDown = isNotAtBottom && menuOpen;
-        if (allowMoveDown) {
-          this.handleOptionFocus(selected + 1);
-        }
-      }
-    }
-  }, {
-    key: "handleSpace",
-    value: function handleSpace(event) {
-      var _this6 = this;
-      // if not open, open
-      if (this.props.showAllValues && this.state.menuOpen === false && this.state.query === '') {
-        event.preventDefault();
-        this.props.source('', function (options) {
-          _this6.setState({
-            menuOpen: true,
-            options: options
-          });
-        });
-      }
-      var focusIsOnOption = this.state.focused !== -1;
-      if (focusIsOnOption) {
-        event.preventDefault();
-        this.handleOptionClick(this.state.focused);
-      }
-    }
-  }, {
-    key: "handleEnter",
-    value: function handleEnter(event) {
-      if (this.state.menuOpen) {
-        event.preventDefault();
-        var hasSelectedOption = this.state.selected >= 0;
-        if (hasSelectedOption) {
-          this.handleOptionClick(this.state.selected);
-        }
-      }
-    }
-  }, {
-    key: "handlePrintableKey",
-    value: function handlePrintableKey(event) {
-      var inputElement = this.elementReferences[-1];
-      var eventIsOnInput = event.target === inputElement;
-      if (!eventIsOnInput) {
-        // FIXME: This would be better if it was in componentDidUpdate,
-        // but using setState to trigger that seems to not work correctly
-        // in preact@8.1.0.
-        inputElement.focus();
-      }
-    }
-  }, {
-    key: "handleKeyDown",
-    value: function 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
-          });
-          break;
-        default:
-          if (isPrintableKeyCode(event.keyCode)) {
-            this.handlePrintableKey(event);
-          }
-          break;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this7 = this;
-      var _this$props4 = this.props,
-        id = _this$props4.id,
-        width = _this$props4.width,
-        displayMenu = _this$props4.displayMenu,
-        minLength = _this$props4.minLength,
-        name = _this$props4.name,
-        placeholder = _this$props4.placeholder,
-        required = _this$props4.required,
-        showAllValues = _this$props4.showAllValues,
-        tNoResults = _this$props4.tNoResults,
-        tStatusQueryTooShort = _this$props4.tStatusQueryTooShort,
-        tStatusNoResults = _this$props4.tStatusNoResults,
-        tStatusSelectedOption = _this$props4.tStatusSelectedOption,
-        tStatusResults = _this$props4.tStatusResults,
-        tAssistiveHint = _this$props4.tAssistiveHint,
-        DropdownArrow = _this$props4.dropdownArrow;
-      var _this$state7 = this.state,
-        focused = _this$state7.focused,
-        hovered = _this$state7.hovered,
-        menuOpen = _this$state7.menuOpen,
-        options = _this$state7.options,
-        query = _this$state7.query,
-        selected = _this$state7.selected,
-        ariaHint = _this$state7.ariaHint,
-        validChoiceMade = _this$state7.validChoiceMade;
-      var autoselect = this.hasAutoselect();
-      var inputFocused = focused === -1;
-      var noOptionsAvailable = options.length === 0;
-      var queryNotEmpty = query.length !== 0;
-      var queryLongEnough = query.length >= minLength;
-      var showNoOptionsFound = this.props.showNoOptionsFound && inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
-      var componentIsFocused = focused !== null;
-      var dropdownArrowClassName = "ds-autocomplete__dropdown-arrow-down";
-      var optionFocused = focused !== -1 && focused !== null;
-      var menuIsVisible = menuOpen || showNoOptionsFound;
-      var selectedOptionText = this.templateInputValue(options[selected]);
-      var optionBeginsWithQuery = selectedOptionText && selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
-      var hintValue = optionBeginsWithQuery && autoselect ? query + selectedOptionText.substr(query.length) : '';
-      var assistiveHintID = id + '__assistiveHint';
-      var ariaDescribedProp = ariaHint ? {
-        'aria-describedby': assistiveHintID
-      } : null;
-      return /*#__PURE__*/React.createElement(AutoCompleteWrapper, {
-        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: this.state.focused !== null,
-        tQueryTooShort: tStatusQueryTooShort,
-        tNoResults: tStatusNoResults,
-        tSelectedOption: tStatusSelectedOption,
-        tResults: tStatusResults
-      }), hintValue && /*#__PURE__*/React.createElement(AutoCompleteInputTypeahead, {
-        value: hintValue
-      }), /*#__PURE__*/React.createElement(AutoCompleteInput, _extends({
-        "aria-expanded": menuOpen ? 'true' : 'false',
-        "aria-activedescendant": optionFocused ? "".concat(id, "__option--").concat(focused) : '',
-        "aria-owns": "".concat(id, "__listbox"),
-        "aria-autocomplete": this.hasAutoselect() ? 'both' : 'list'
-      }, ariaDescribedProp, {
-        autoComplete: "off",
-        isFocused: componentIsFocused,
-        showAllValues: this.props.showAllValues,
-        id: id,
-        onClick: function onClick(event) {
-          return _this7.handleInputClick(event);
-        },
-        onBlur: this.handleInputBlur,
-        onChange: this.handleInputChange,
-        onFocus: this.handleInputFocus,
-        name: name,
-        placeholder: placeholder,
-        ref: function ref(inputElement) {
-          _this7.elementReferences[-1] = inputElement;
-        },
-        role: "combobox",
-        required: required,
-        value: query
-      })), showNoOptionsFound || showAllValues && !menuOpen && DropdownArrow && /*#__PURE__*/React.createElement(DropdownArrow, {
-        type: "button",
-        onClick: function onClick() {
-          _this7.elementReferences[-1].focus();
-          _this7.handleInputChange({
-            target: {
-              value: query
-            }
-          });
-        },
-        className: dropdownArrowClassName
-      }), /*#__PURE__*/React.createElement(AutoCompleteResultList, {
-        displayMenu: displayMenu,
-        isVisible: menuIsVisible,
-        onMouseLeave: function onMouseLeave() {
-          return _this7.handleListMouseLeave();
-        },
-        id: "".concat(id, "__listbox"),
-        role: "listbox"
-      }, options.map(function (option, index) {
-        var showFocused = focused === -1 ? selected === index : focused === index;
-        var iosPosinsetHtml = isIosDevice() ? /*#__PURE__*/React.createElement("span", {
-          id: "".concat(id, "__option-suffix--").concat(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 ", options.length) : '';
-        return /*#__PURE__*/React.createElement(AutoCompleteResultListItem, {
-          isFocused: showFocused,
-          isHovered: hovered,
-          index: index,
-          "aria-selected": focused === index ? 'true' : 'false',
-          key: index,
-          onBlur: function onBlur(event) {
-            return _this7.handleOptionBlur(event, index);
-          },
-          onClick: function onClick() {
-            return _this7.handleOptionClick(index);
-          },
-          onMouseDown: _this7.handleOptionMouseDown,
-          onMouseEnter: function onMouseEnter() {
-            return _this7.handleOptionMouseEnter(index);
-          },
-          ref: function ref(optionEl) {
-            _this7.elementReferences[index] = optionEl;
-          },
-          role: "option",
-          tabIndex: -1,
-          "aria-posinset": index + 1,
-          "aria-setsize": options.length
-        }, _this7.templateSuggestion(option), " ", iosPosinsetHtml);
-      }), showNoOptionsFound && /*#__PURE__*/React.createElement(AutoCompleteResultListItem, {
-        empty: true
-      }, tNoResults === null || tNoResults === void 0 ? void 0 : tNoResults())), /*#__PURE__*/React.createElement(AutoCompleteAssistiveHint, {
-        id: assistiveHintID
-      }, tAssistiveHint === null || tAssistiveHint === void 0 ? void 0 : tAssistiveHint()));
-    }
-  }]);
-  return AutoComplete;
-}(Component);
-AutoComplete.defaultProps = {
-  width: '33.3%',
-  autoselect: false,
-  defaultValue: '',
-  displayMenu: 'overlay',
-  minLength: 0,
-  name: 'ds-input-autocomplete',
-  placeholder: '',
-  onConfirm: function onConfirm() {
-    return;
-  },
-  confirmOnBlur: false,
-  showNoOptionsFound: true,
-  showAllValues: false,
-  required: false,
-  tNoResults: function tNoResults() {
-    return 'No results found';
-  },
-  tAssistiveHint: function tAssistiveHint() {
-    return '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.';
-  },
-  dropdownArrow: function dropdownArrow(props) {
-    return /*#__PURE__*/React.createElement(CaretIcon, _extends({
-      direction: "down",
-      size: "sm"
-    }, props));
-  }
-};
-export { AutoComplete as default };
-export { AutoComplete, AutoCompleteInput, AutoCompleteInputTypeahead, AutoCompleteResultList, AutoCompleteResultListItem, AutoCompleteWrapper, AutoCompleteAssistiveHint };

package/form/AutoComplete/index.mdx

@@ -1,77 +0,0 @@
----
-id: auto-complete
-title: AutoComplete
----
-
-Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
-through, select from large collections of options and help services get more consistent data.
-
-## Usage
-
-### How to import
-
-```bash
-import AutoComplete from '@digigov/ui/form/AutoComplete';
-```
-
-### AutoComplete
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
-
-### AutoComplete with auto select
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
-
-### AutoComplete with inline style
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
-
-### AutoComplete with default value
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
-
-### AutoComplete with placeholder
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
-
-### AutoComplete with all option's values
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
-
-### AutoComplete with min length
-
-This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithMinLength.tsx"
-/>
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="AutoComplete" />