@startlibs/form 1.1.3 → 1.2.0-rc.2

package/lib-yak/AutoComplete.mjs

@@ -0,0 +1,705 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+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 { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useRef, useState, useEffect } from 'react';
+import ContentEditableModule from 'react-contenteditable';
+import { useToggle, useEnsureRef, useRefState } from '@startlibs/core';
+import { Loading, Icon, ContextMenu, ListItem, Li } from '@startlibs/components';
+import { Errors, ErrorsItem, ErrorsCloseIcon, useProvideErrors } from './Errors.mjs';
+import { Field } from './Field.mjs';
+import { useInput } from './enhanceInput.mjs';
+import { getColor, callIfFunction, constrainEvent, _s, stopPropagation } from '@startlibs/utils';
+import { styled, css } from '@yak/react';
+import { darken } from 'polished';
+
+const _excluded = ["CompletedBox", "isEditable", "getLabel", "cancelEditable", "value", "remove", "index"],
+  _excluded2 = ["value", "confirmKeys", "index", "EditableInput", "confirmIfNewKeys", "confirmIfNew", "confirm", "remove"];
+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; }
+
+// Node/esbuild interop em .mjs devolve module.exports; Rollup devolve o default. Cobre os dois.
+const ContentEditable = ContentEditableModule.default || ContentEditableModule;
+const ua = navigator.userAgent.toLowerCase();
+const isSafari = ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0;
+const InputLoading = styled(Loading)`
+  bottom: 8px;
+  right: 0.6rem;
+  left: auto;
+  top: 50%;
+  transform: translate(-50%);
+`;
+const AutoCompleteInput = styled(yakDomTag("div")).attrs({
+  className: "styled-theme-text-input"
+})`
+  width: 100%;
+  font-size: 14px;
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  border-radius: 8px;
+  color: ${__yakProps => {
+  const v = getColor('gray60');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  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;
+  ${props => props.focused && css`
+    border-color: ${__yakProps => {
+  const v = getColor('gray180');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.075);
+  `}
+  ${props => props.hasErrors && css`
+    border-color: ${__yakProps => {
+  const v = getColor('alert');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}} !important;
+  `}
+  @media (max-width: 600px) {
+    padding: 0.25rem 1rem;
+    min-height: 42px;
+  }
+  ${props => props.withDropdown && css`
+    padding-right: 3rem;
+    @media (max-width: 600px) {
+      padding-right: 4rem;
+    }
+  `}
+  
+`;
+const AutoCompletePlaceholder = styled(yakDomTag("span"))`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: rgba(0,0,0,0.3);
+  left: 0.7rem;
+  right: 0.7rem;
+  @media (max-width: 600px) {
+    left: 1rem;
+    right: 1rem;
+  }
+`;
+const AutoCompleteTextboxDiv = styled(ContentEditable)`
+  display: inline-block;
+  outline: 0;
+  outline: none;
+  padding: 0 1px;
+  line-height: 130%;
+`;
+const AddedBox = styled(yakDomTag("span"))`
+  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ão depende de props; uma const de módulo com um css condicional (ternário)
+     não é um mixin válido pro yak ("not a valid css value or css mixin"). Em posição de
+     valor, uma arrow function comum (mesmo sem usar props) segue a mesma regra de qualquer
+     valor dinâmico (R3). */
+  vertical-align: ${() => isSafari ? '2px' : '-7px'};
+`;
+const RemoveIcon = styled(Icon)`
+  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: ${__yakProps => {
+  const v = getColor('gray120');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  &:hover {
+    background-color: ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    color: ${props => darken(0.05, getColor('alert')(props))};
+  }
+`;
+const AutoCompleteMenu = styled(ContextMenu)`
+  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;
+  ${ListItem} {
+      > * {
+        padding: 11px;
+      }
+  }
+`;
+const AutoCompleteError = styled(Errors)`
+  ${ErrorsItem} {
+    background: transparent;
+    border: none;
+    color: ${__yakProps => {
+  const v = getColor('alert');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    padding: 0;
+    margin-top: 0.5rem;
+    font-weight: 600;
+    ${ErrorsCloseIcon} {
+      display: none;
+    }
+  }
+`;
+const DropdownIconContainer = styled(Icon)`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 3rem;
+  height: 3rem;
+  bottom: -1px;
+  @media (max-width: 600px) {
+    height: 42px;
+  }
+  ${Icon} {
+    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: ${__yakProps => {
+  const v = getColor('gray90');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    &:hover, &:active {
+      background: rgba(0,0,0,0.15);
+    }
+  }
+`;
+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.setEl = ref => this.el = ref;
+    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]);
+  }
+
+  // Only a programmatic change (not the user typing) should move the caret to the end
+  getSnapshotBeforeUpdate() {
+    return this.props.value !== cleanText(this.el.innerText);
+  }
+  componentDidUpdate(oldProps, prevState, changedOutside) {
+    let rewritten = false;
+    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;');
+      rewritten = true;
+    }
+    if (this.props.value !== oldProps.value && (changedOutside || rewritten) && 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({
+      // stable ref: a new function each render makes ContentEditable re-render and jump the caret to the end
+      innerRef: this.setEl,
+      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