@startlibs/form 1.0.12 → 1.1.0

package/lib/AutoComplete.mjs

@@ -0,0 +1,550 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import _isString from 'lodash/fp/isString';
+import _filter from 'lodash/fp/filter';
+import _concat from 'lodash/fp/concat';
+import _set from 'lodash/fp/set';
+import _flow from 'lodash/fp/flow';
+import _without from 'lodash/fp/without';
+import _isEqual from 'lodash/fp/isEqual';
+import _last from 'lodash/fp/last';
+import React, { useRef, useState, useEffect } from 'react';
+import ContentEditable from 'react-contenteditable';
+import { useToggle, useEnsureRef, useRefState } from '@startlibs/core';
+import { Icon, ContextMenu, Loading, Li } from '@startlibs/components';
+import { Errors, useProvideErrors } from './Errors.mjs';
+import { Field } from './Field.mjs';
+import { useInput } from './enhanceInput.mjs';
+import { getColor, media, customTheme, callIfFunction, constrainEvent, _s, stopPropagation } from '@startlibs/utils';
+import styled, { css } from 'styled-components';
+import { darken } from 'polished';
+
+const _excluded = ["CompletedBox", "isEditable", "getLabel", "cancelEditable", "value", "remove", "index"],
+  _excluded2 = ["value", "confirmKeys", "index", "EditableInput", "confirmIfNewKeys", "confirmIfNew", "confirm", "remove"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const ua = navigator.userAgent.toLowerCase();
+const isSafari = ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0;
+const InputLoading = /*#__PURE__*/styled(Loading).withConfig({
+  displayName: "AutoComplete__InputLoading",
+  componentId: "sc-g0526o-0"
+})(["bottom:8px;right:0.6rem;left:auto;top:50%;transform:translate(-50%);"]);
+const AutoCompleteInput = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AutoComplete__AutoCompleteInput",
+  componentId: "sc-g0526o-1"
+})(["width:100%;font-size:14px;border:1px solid ", ";border-radius:8px;color:", ";cursor:text;background:white;position:relative;outline:0;outline:none;min-height:3rem;line-height:28px;padding:0.25rem 0.7rem;display:flex;align-items:center;flex-wrap:wrap;", " ", " ", " ", " ", ""], getColor('gray210'), getColor('gray60'), props => props.focused && "\n    border-color: ".concat(getColor('gray180'), ";\n    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.075);\n  "), props => props.hasErrors && css(["border-color:", " !important;"], getColor('alert')), media.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 0.25rem 1rem;\n    min-height: 42px;\n  "]))), props => props.withDropdown && css(["padding-right:3rem;", ""], media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-right: 4rem;\n    "])))), customTheme('TextInput'));
+const AutoCompletePlaceholder = /*#__PURE__*/styled.span.withConfig({
+  displayName: "AutoComplete__AutoCompletePlaceholder",
+  componentId: "sc-g0526o-2"
+})(["position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;color:rgba(0,0,0,0.3);left:0.7rem;right:0.7rem;", ""], media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    left: 1rem;\n    right: 1rem;\n  "]))));
+const AutoCompleteTextboxDiv = /*#__PURE__*/styled(ContentEditable).withConfig({
+  displayName: "AutoComplete__AutoCompleteTextboxDiv",
+  componentId: "sc-g0526o-3"
+})(["display:inline-block;outline:0;outline:none;padding:0 1px;line-height:130%;"]);
+const AddedBox = /*#__PURE__*/styled.span.withConfig({
+  displayName: "AutoComplete__AddedBox",
+  componentId: "sc-g0526o-4"
+})(["background-color:rgb(230,230,230);padding:5px 2rem 5px 0.75rem;border-radius:12px;font-size:13px;position:relative;margin-left:-3px;margin-right:9px;white-space:nowrap;cursor:default;line-height:normal;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", ""], isSafari ? "\n    vertical-align: 2px;\n    " : "\n    vertical-align: -7px;\n  ");
+const RemoveIcon = /*#__PURE__*/styled(Icon).withConfig({
+  displayName: "AutoComplete__RemoveIcon",
+  componentId: "sc-g0526o-5"
+})(["width:20px;height:20px;border-radius:50%;display:inline-block;position:absolute;top:50%;line-height:20px;transform:translateY(-50%);right:2px;font-size:14px;text-align:center;cursor:pointer;color:", ";:hover{background-color:", ";color:", ";}"], getColor('gray120'), getColor('gray210'), props => darken(0.05, getColor('alert')(props)));
+const AutoCompleteMenu = /*#__PURE__*/styled(ContextMenu).withConfig({
+  displayName: "AutoComplete__AutoCompleteMenu",
+  componentId: "sc-g0526o-6"
+})(["box-shadow:0 2px 3px 1px rgba(0,0,0,0.2),0 0px 0px 1px rgba(0,0,0,0.05);max-height:22rem;overflow:auto;", "{> *{padding:11px;}}"], ContextMenu.ListItem);
+const AutoCompleteError = /*#__PURE__*/styled(Errors).withConfig({
+  displayName: "AutoComplete__AutoCompleteError",
+  componentId: "sc-g0526o-7"
+})(["", "{background:transparent;border:none;color:", ";padding:0;margin-top:0.5rem;font-weight:600;", "{display:none;}}"], Errors.Item, getColor('alert'), Errors.CloseIcon);
+const DropdownIconContainer = /*#__PURE__*/styled(Icon).withConfig({
+  displayName: "AutoComplete__DropdownIconContainer",
+  componentId: "sc-g0526o-8"
+})(["position:absolute;right:0;bottom:0;width:3rem;height:3rem;bottom:-1px;", " ", "{position:absolute;width:2rem;height:2rem;line-height:2rem;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.1);border-radius:50%;text-align:center;cursor:pointer;color:", ";:hover,:active{background:rgba(0,0,0,0.15);}}"], media.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: 42px;\n  "]))), Icon, getColor('gray90'));
+const focusBeforeLast = e => {
+  if (e.target && e.target !== e.currentTarget) return;
+  const el = [].slice.call(e.currentTarget.querySelectorAll('div[contenteditable]')).slice(-1)[0];
+  if (!el) return;
+  el.focus();
+  if (!el.firstChild) {
+    const node = document.createTextNode('');
+    el.appendChild(node);
+  }
+  setSelectionRange(el.firstChild, el.textContent.length + 1);
+};
+const setSelectionRange = function (input, selectionStart) {
+  let range = document.createRange();
+  let sel = window.getSelection();
+  range.setStart(input, Math.max(selectionStart - 1, 0));
+  sel.removeAllRanges();
+  sel.addRange(range);
+};
+const AutoComplete = /*#__PURE__*/React.forwardRef((_ref, outerRef) => {
+  let {
+    path,
+    AutoCompleteLi = Li,
+    CompletedBox = _ref2 => {
+      let {
+        label,
+        remove,
+        value
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(AddedBox, {
+        title: label
+      }, label, /*#__PURE__*/React.createElement(RemoveIcon, {
+        icon: "x",
+        onMouseUp: constrainEvent(remove)
+      }));
+    },
+    EditableInput = props => /*#__PURE__*/React.createElement(AutoCompleteTextboxDiv, props),
+    getLabel = v => v,
+    minQueryLength = 3,
+    ignoreCase = true,
+    autoSelect,
+    autoSelectEquals,
+    fetchLimit = 6,
+    deleteOnBackspace = true,
+    fetchSuggestions: rawFetchSuggestions,
+    validation = value => ({
+      success: value.trim()
+    }),
+    transform,
+    withDropdown,
+    autoFocus,
+    clickOpensWhenEmpty,
+    tabIndex = 1,
+    confirmIfNewKeys = [],
+    confirmKeys = ['Enter', ','],
+    confirmIfValueKeys = ['Tab'],
+    placeholder,
+    className,
+    getListItem = getLabel,
+    onAddValue,
+    getUniqueKey,
+    translatable = true,
+    withoutField,
+    fieldClassName,
+    bellowDescText,
+    mandatory,
+    descText,
+    helpText,
+    label,
+    value,
+    setValue,
+    raw
+  } = _ref;
+  const autoCompleteBox = useToggle();
+  const hoverIndex = useToggle();
+  const isLoading = useToggle();
+  const cancelEditable = useRef();
+  const [formValue, _setFormValue, {
+    hasErrors
+  }] = useInput({
+    path,
+    transform,
+    value,
+    setValue
+  }, raw);
+  const formValueRef = useRef(formValue);
+  formValueRef.current = formValue;
+  const [localFormValue, setLocalFormValue] = useState(_last(formValue) === "" ? formValue : formValue.concat(""));
+  const setFormValue = updater => {
+    _setFormValue(updater);
+    setLocalFormValue(updater);
+    formValueRef.current = typeof updater === 'function' ? updater(formValueRef.current) : updater;
+  };
+  const lastIsEditable = _isEqual(localFormValue, formValue);
+  const [ErrorProvider, errorUtils] = useProvideErrors();
+  const hooksRef = useEnsureRef(outerRef);
+  const ref = useRef();
+  const queries = useRefState([]);
+  const suggestionsFetchCache = useRefState({});
+  const suggestionsLabelMapCache = useRefState({});
+  const lastSuggestionQuery = useRefState('');
+  const [autoCompleteList, setAutoCompleteList] = useState([]);
+  const getValue = () => formValueRef.current || [];
+  const shouldFocusInput = useToggle();
+  const recentlyAdded = useRefState(false);
+  useEffect(() => {
+    if (autoFocus) {
+      focusInput();
+    }
+  }, []);
+  const focusInput = () => shouldFocusInput.openWith(i => i + 1);
+  useEffect(() => {
+    if (shouldFocusInput.isOpen) focusBeforeLast({
+      currentTarget: ref.current,
+      target: ref.current
+    });
+  }, [shouldFocusInput.isOpen]);
+  const editableIsEmpty = () => !lastIsEditable || lastIsEditable && !formValue[formValue.length - 1];
+  const ignoreCaseIfNeeded = s => ignoreCase ? (s || '').toLowerCase() : s;
+  const refreshSuggestions = function () {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let justFetch = arguments.length > 1 ? arguments[1] : undefined;
+    let dropdownFetch = arguments.length > 2 ? arguments[2] : undefined;
+    if ((value.length >= minQueryLength || dropdownFetch) && rawFetchSuggestions) {
+      queries.set([value]);
+      const removeEditable = list => lastIsEditable ? list.slice(0, -1) : list;
+      return isLoading.wait(Promise.resolve(fetchSuggestions(ignoreCaseIfNeeded(value))).then(list => {
+        const noRepeatedList = list.filter(v => !removeEditable(getValue()).find(_ => getLabel(v) === getLabel(_)));
+        if (justFetch) {
+          return noRepeatedList;
+        }
+        const index = queries.get().indexOf(value);
+        if (index >= 0) {
+          queries.set(q => q.slice(index + 1));
+          if (!autoSelect && !(autoSelectEquals && noRepeatedList.slice(0, 1).find(v => ignoreCaseIfNeeded(getLabel(v)) === ignoreCaseIfNeeded(value)))) {
+            hoverIndex.openWith(-1);
+          } else {
+            hoverIndex.openWith(0);
+          }
+          autoCompleteBox.open();
+          setAutoCompleteList(noRepeatedList);
+        }
+      }));
+    } else {
+      hoverIndex.openWith(-1);
+      setAutoCompleteList([]);
+      return Promise.resolve([]);
+    }
+  };
+  const fetchSuggestions = s => {
+    const prevQuery = lastSuggestionQuery.get();
+    lastSuggestionQuery.set(s);
+    if (suggestionsFetchCache.get()[s]) {
+      return suggestionsFetchCache.get()[s];
+    } else {
+      const lastFetch = suggestionsFetchCache.get()[ignoreCaseIfNeeded(prevQuery)];
+      if (s.indexOf(ignoreCaseIfNeeded(prevQuery)) >= 0 && lastFetch && lastFetch.length < fetchLimit) {
+        return suggestionsFetchCache.get()[s] = lastFetch.map(getLabel).filter(_ => ignoreCaseIfNeeded(_).indexOf(ignoreCaseIfNeeded(s)) >= 0).map(_ => suggestionsLabelMapCache.get()()[ignoreCaseIfNeeded(_)]);
+      } else {
+        const fetch = Promise.resolve(rawFetchSuggestions(s));
+        fetch.then(list => {
+          suggestionsFetchCache[ignoreCaseIfNeeded(s)] = list;
+          list.forEach(suggestion => suggestionsLabelMapCache.get()[ignoreCaseIfNeeded(getLabel(suggestion))] = suggestionsLabelMapCache.get()[ignoreCaseIfNeeded(getLabel(suggestion))] || suggestion);
+        });
+        return fetch;
+      }
+    }
+  };
+  useEffect(() => {
+    if (!lastIsEditable) {
+      if (recentlyAdded.get() !== cancelEditable.current) {
+        setFormValue(_without([cancelEditable.current], formValue).concat(""));
+      } else {
+        setLocalFormValue(_last(formValue) === "" ? formValue : formValue.concat(""));
+      }
+      cancelEditable.current = null;
+    }
+  }, [lastIsEditable]);
+  useEffect(() => {
+    refreshSuggestions(lastIsEditable ? getValue().slice(-1)[0] : '');
+    if (recentlyAdded.get()) {
+      recentlyAdded.set(false);
+      callIfFunction(onAddValue, formValue, setFormValue);
+    }
+  }, [formValue]);
+  const confirmIfNew = (index, newValue) => {
+    refreshSuggestions(newValue, true).then(list => {
+      if (!list.length) {
+        confirm(index, newValue);
+      } else {
+        onChange(index, newValue);
+      }
+    });
+  };
+  const confirm = (index, newValue) => {
+    if (autoCompleteList.length && hoverIndex.isOpen >= 0) {
+      addValue(autoCompleteList[hoverIndex.isOpen]);
+    } else {
+      confirmValue(index, newValue);
+    }
+  };
+  const confirmValue = (index, newValue, fromBlur) => {
+    if (!newValue) {
+      return;
+    }
+    const suggestedValue = suggestionsLabelMapCache[ignoreCaseIfNeeded(newValue || '').trim()];
+    if (suggestedValue) {
+      addValue(suggestedValue, fromBlur);
+      return;
+    }
+    const {
+      success,
+      errors
+    } = validation(newValue);
+    if (errors) {
+      errorUtils.setErrors({
+        errors
+      });
+    } else {
+      addValue(success, fromBlur);
+    }
+  };
+  const onChange = (index, value) => {
+    errorUtils.clearErrors();
+    setFormValue(_s.set([index], value));
+  };
+  const addValue = (value, fromBlur) => {
+    const index = Math.max(lastIsEditable ? getValue().length - 1 : getValue().length, 0);
+    recentlyAdded.set((formValue === null || formValue === void 0 ? void 0 : formValue[index]) || "");
+    setFormValue(_flow(_set([index], value), _concat(_concat.placeholder, "")));
+    if (!fromBlur) {
+      focusInput();
+    }
+  };
+  const remove = index => {
+    setFormValue(_flow(_s.unset(index), _filter(_ => _ !== undefined)));
+    focusInput();
+  };
+  const onBlur = e => {
+    autoCompleteBox.close();
+    const v = getValue().slice(-1)[0];
+    if (lastIsEditable) {
+      const {
+        errors
+      } = validation(v);
+      const firstIsEqual = autoCompleteList.slice(0, 1).find(item => ignoreCaseIfNeeded(getLabel(item)) === ignoreCaseIfNeeded(v));
+      if (v && autoSelect && (autoCompleteList.length === 1 || firstIsEqual) && errors) {
+        addValue(autoCompleteList[0], true);
+      } else if (autoSelectEquals && firstIsEqual) {
+        addValue(autoCompleteList[0], true);
+      } else {
+        confirmValue(getValue().length - 1, v, true);
+      }
+    } else if (autoCompleteList.length) {
+      setAutoCompleteList([]);
+    }
+  };
+  React.useImperativeHandle(hooksRef, () => ({
+    addValue,
+    confirm,
+    remove
+  }), [formValue]);
+  const validValue = formValue || [''];
+  const uniqueKeyLabel = {};
+  const _getUniqueKey = value => {
+    if (getUniqueKey) {
+      return getUniqueKey(value);
+    }
+    const label = getLabel(value);
+    const uid = uniqueKeyLabel[label] = (uniqueKeyLabel[label] || 0) + 1;
+    return label + uid;
+  };
+  const tryOpenSuggestions = e => {
+    if (autoCompleteBox.get()) {
+      stopPropagation(onBlur)(e);
+    } else {
+      errorUtils.clearErrors();
+      refreshSuggestions(lastIsEditable ? getValue().slice(-1)[0] : '', false, true);
+      focusInput();
+    }
+  };
+  const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AutoCompleteInput, {
+    onKeyDown: e => e.key === ' ' && e.stopPropagation(),
+    className: className,
+    ref: ref,
+    onFocus: () => {
+      if (autoCompleteList.length) autoCompleteBox.open();else if (withDropdown && editableIsEmpty()) refreshSuggestions(undefined, undefined, true);
+    },
+    hasErrors: errorUtils.errors.length > 0 || hasErrors,
+    onBlur: onBlur,
+    onClick: e => {
+      focusBeforeLast(e);
+      if (editableIsEmpty() && !isLoading.isOpen) {
+        refreshSuggestions(undefined, undefined, true);
+      }
+    },
+    focused: autoCompleteBox.isOpen,
+    withDropdown: withDropdown
+  }, /*#__PURE__*/React.createElement("span", null, '\u200b'), validValue.map((v, i) => /*#__PURE__*/React.createElement(ValueItem, {
+    value: v,
+    index: i,
+    cancelEditable: v => {
+      cancelEditable.current = v;
+    },
+    isEditable: lastIsEditable && validValue.length === i + 1,
+    confirmKeys: confirmKeys,
+    confirmIfValueKeys: confirmIfValueKeys,
+    deleteOnBackspace: deleteOnBackspace,
+    EditableInput: EditableInput,
+    key: lastIsEditable && validValue.length === i + 1 ? '$$editable$$' : _getUniqueKey(v),
+    onChange: onChange,
+    remove: remove,
+    confirm: confirm,
+    getLabel: getLabel,
+    tabIndex: tabIndex,
+    confirmIfNew: confirmIfNew,
+    confirmIfNewKeys: confirmIfNewKeys,
+    CompletedBox: CompletedBox
+  })), /*#__PURE__*/React.createElement("span", null, '\u200b'), (!formValue || !formValue.join('')) && placeholder && /*#__PURE__*/React.createElement(AutoCompletePlaceholder, {
+    onClick: e => ref.current.click()
+  }, placeholder), withDropdown && !isLoading.isOpen && /*#__PURE__*/React.createElement(DropdownIconContainer, {
+    onClick: tryOpenSuggestions
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "arrow-down"
+  }))), autoCompleteBox.isOpen !== false && !errorUtils.errors.length && autoCompleteList.length > 0 && /*#__PURE__*/React.createElement(AutoCompleteMenu, {
+    hoverIndex: hoverIndex.isOpen,
+    autoHover: autoSelect,
+    onClick: constrainEvent(),
+    onHover: hoverIndex.openWith,
+    my: "top left",
+    at: "bottom left",
+    fill: true
+  }, autoCompleteList.map(value => /*#__PURE__*/React.createElement(AutoCompleteLi, {
+    className: !translatable ? 'notranslate' : null,
+    key: _getUniqueKey(value),
+    label: getListItem(value),
+    onMouseDown: e => e.preventDefault(),
+    onClick: () => addValue(value)
+  }))), /*#__PURE__*/React.createElement(ErrorProvider, {
+    value: errorUtils
+  }, /*#__PURE__*/React.createElement(AutoCompleteError, null)));
+  return withoutField ? input : /*#__PURE__*/React.createElement(Field, {
+    bellowDescText: bellowDescText,
+    className: fieldClassName,
+    value: formValue,
+    mandatory: mandatory,
+    descText: descText,
+    helpText: helpText,
+    label: label,
+    labelClick: focusInput
+  }, isLoading.isOpen && /*#__PURE__*/React.createElement(InputLoading, {
+    absolute: true,
+    size: 24
+  }), input);
+});
+AutoComplete.AddedBox = AddedBox;
+AutoComplete.RemoveIcon = RemoveIcon;
+AutoComplete.AutoCompleteTextboxDiv = AutoCompleteTextboxDiv;
+const cleanText = text => {
+  const clean = text.replace('\u200b', '').replace(/\n/g, ' ').replace(/\s+/g, ' ');
+  return clean.trim() ? clean : '';
+};
+const ValueItem = _ref3 => {
+  let {
+      CompletedBox,
+      isEditable,
+      getLabel,
+      cancelEditable,
+      value,
+      remove,
+      index
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  const isEditing = useToggle(isEditable);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  useEffect(() => () => {
+    if (isEditing.isOpen) {
+      cancelEditable(valueRef.current);
+    }
+  }, []);
+  return isEditing.isOpen ? /*#__PURE__*/React.createElement(AutoCompleteTextbox, _extends({}, props, {
+    value: value,
+    index: index,
+    remove: remove
+  })) : /*#__PURE__*/React.createElement(CompletedBox, {
+    label: getLabel(value),
+    value: value,
+    remove: () => remove(index)
+  });
+};
+class AutoCompleteTextbox extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      value: this.props.value
+    };
+    this.deletePrev = () => this.props.index > 0 && this.props.remove(this.props.index - 1);
+    this.onKeyDown = e => {
+      const range = window.getSelection().getRangeAt(0);
+      if (this.props.confirmIfNewKeys.indexOf(e.key) >= 0) {
+        e.preventDefault();
+        const text = range.startContainer.textContent;
+        this.props.confirmIfNew(this.props.index, cleanText((text.slice(0, range.startOffset) + '\uFFFD' + text.slice(range.startOffset)).replace('\uFFFD', e.key)));
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.stopPropagation();
+      } else if (this.props.confirmKeys.indexOf(e.key) >= 0 || this.props.confirmIfValueKeys.indexOf(e.key) >= 0) {
+        if (this.props.confirmKeys.indexOf(e.key) >= 0) {
+          e.preventDefault();
+        }
+        if (this.props.value) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.props.confirm(this.props.index, this.props.value);
+        }
+      } else if (e.key === 'Backspace' && this.props.deleteOnBackspace) {
+        if (e.target.textContent !== '\u200b' || !range.collapsed) {
+          if (range.startContainer.previousSibling) {
+            if (range.startContainer.previousSibling.textContent.length) {
+              return;
+            }
+          } else if (range.startOffset > 0) {
+            return;
+          }
+        }
+        e.preventDefault();
+        this.deletePrev();
+      }
+    };
+    this.onChange = evt => {
+      this.props.onChange(this.props.index, cleanText(evt.currentTarget.isContentEditable ? evt.currentTarget.innerText : evt.target.value));
+    };
+    this.onPaste = ev => {
+      ev.preventDefault();
+      const text = ev.clipboardData.getData('text');
+      document.execCommand('insertText', false, text);
+    };
+  }
+  shouldComponentUpdate(nextProps) {
+    const event = new CustomEvent('portalReposition');
+    setTimeout(() => window.dispatchEvent(event), 1);
+    if (this.el.innerHTML === '<br>' || !this.el.innerHTML) {
+      this.props.onChange(this.props.index, '');
+    }
+    return nextProps.value !== cleanText(this.el.innerText) || !!Object.keys(nextProps).find(k => nextProps[k] !== this.props[k]);
+  }
+  componentDidUpdate(oldProps) {
+    if (this.props.value.slice(-1) === ' ' && /\S/.test(this.el.textContent.slice(-1))) {
+      // does not have blank space as last
+      this.el.innerHTML = this.props.value.replace(/\s/, '&nbsp;');
+    }
+    if (this.props.value !== oldProps.value && document.activeElement === this.el) {
+      setSelectionRange(this.el.firstChild || this.el, this.el.textContent.length + 1);
+    }
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        value,
+        confirmKeys,
+        index,
+        EditableInput,
+        confirmIfNewKeys,
+        confirmIfNew,
+        confirm,
+        remove
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded2);
+    const valueOrBlank = /*android fix, not needed? value || */_isString(value) && value ? value : '\u200b';
+    const props = _objectSpread(_objectSpread({
+      innerRef: ref => this.el = ref,
+      onKeyDown: this.onKeyDown,
+      onPaste: this.onPaste,
+      value: value,
+      index: index,
+      html: valueOrBlank.replace(/\s$/, '&nbsp;')
+    }, rest), {}, {
+      onChange: this.onChange
+    });
+    return typeof EditableInput === 'function' ? EditableInput(props) : /*#__PURE__*/React.createElement(EditableInput, props);
+  }
+}
+
+export { AutoComplete, AutoCompleteTextbox };
+//# sourceMappingURL=AutoComplete.mjs.map