@map-colonies/react-components 3.12.0 → 3.12.2

package/dist/autocomplete/autocomplete.js

@@ -1,478 +1,478 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutocompleteWithDefauls = void 0;
-/* eslint-disable */
-var react_1 = __importStar(require("react"));
-var textarea_caret_1 = __importDefault(require("textarea-caret"));
-var get_input_selection_1 = __importStar(require("get-input-selection"));
-require("./autocomplete.css");
-var KEY_UP = 38;
-var KEY_DOWN = 40;
-var KEY_RETURN = 13;
-var KEY_ENTER = 14;
-var KEY_ESCAPE = 27;
-var KEY_TAB = 9;
-var OPTION_LIST_Y_OFFSET = 10;
-var OPTION_LIST_MIN_WIDTH = 100;
-var Autocomplete = function (props) {
-    var _a;
-    var _b = react_1.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : ''), recentValue = _b[0], setRecentValue = _b[1];
-    var _c = react_1.useState(false), enableSpaceRemovers = _c[0], setEnableSpaceRemovers = _c[1];
-    var _d = react_1.useState({
-        helperVisible: false,
-        left: 0,
-        right: 0,
-        trigger: '',
-        matchLength: 0,
-        matchStart: 0,
-        options: [],
-        selection: 0,
-        top: 0,
-        value: '',
-        caret: 0,
-        width: 'unset',
-    }), state = _d[0], setState = _d[1];
-    var refInput = react_1.useRef(null);
-    react_1.useEffect(function () {
-        window.addEventListener('resize', handleResize);
-        return function () {
-            try {
-                window.removeEventListener('resize', handleResize);
-            }
-            catch (e) {
-                console.log('WINDOW "resize" remove listener failed', e);
-            }
-        };
-    }, []);
-    react_1.useEffect(function () {
-        if (typeof props.value !== 'undefined') {
-            setRecentValue(props.value);
-        }
-        if (typeof props.defaultValue !== 'undefined') {
-            setRecentValue(props.defaultValue);
-        }
-    }, [props.value, props.defaultValue]);
-    react_1.useEffect(function () {
-        var options = props.options;
-        var caret = state.caret;
-        // if (options.length !== prevProps.options.length) {
-        updateHelper(recentValue, caret, options);
-        // }
-    }, [props]);
-    var getMatch = function (str, caret, providedOptions) {
-        var trigger = props.trigger, matchAny = props.matchAny, regex = props.regex;
-        var re = new RegExp(regex);
-        var triggers = trigger;
-        if (!Array.isArray(triggers)) {
-            triggers = new Array(trigger);
-        }
-        triggers.sort();
-        var providedOptionsObject = {};
-        if (Array.isArray(providedOptions)) {
-            triggers.forEach(function (triggerStr) {
-                providedOptionsObject[triggerStr] = providedOptions;
-            });
-        }
-        var triggersMatch = arrayTriggerMatch(triggers, re);
-        var slugData = {};
-        for (var triggersIndex = 0; triggersIndex < triggersMatch.length; triggersIndex++) {
-            var _a = triggersMatch[triggersIndex], triggerStr = _a.triggerStr, triggerMatch = _a.triggerMatch, triggerLength = _a.triggerLength;
-            var _loop_1 = function (i) {
-                var substr = str.substring(i, caret);
-                var match = substr.match(re);
-                var matchStart = -1;
-                if (triggerLength > 0) {
-                    var triggerIdx = triggerMatch ? i : i - triggerLength + 1;
-                    if (triggerIdx < 0) {
-                        return "break";
-                    }
-                    if (isTrigger(triggerStr, str, triggerIdx)) {
-                        matchStart = triggerIdx + triggerLength;
-                    }
-                    if (!match && matchStart < 0) {
-                        return "break";
-                    }
-                }
-                else {
-                    if (match && i > 0) {
-                        return "continue";
-                    }
-                    matchStart = i === 0 && match ? 0 : i + 1;
-                    if (caret - matchStart === 0) {
-                        return "break";
-                    }
-                }
-                if (matchStart >= 0) {
-                    var triggerOptions = providedOptionsObject[triggerStr];
-                    if (!Array.isArray(triggerOptions)) {
-                        return "continue";
-                    }
-                    var matchedSlug_1 = str.substring(matchStart, caret);
-                    var options = triggerOptions.filter(function (slug) {
-                        var idx = slug.toLowerCase().indexOf(matchedSlug_1.toLowerCase());
-                        return idx !== -1 && (matchAny || idx === 0);
-                    });
-                    var currTrigger = triggerStr;
-                    var matchLength = matchedSlug_1.length;
-                    if (slugData === {}) {
-                        slugData = {
-                            trigger: currTrigger,
-                            matchStart: matchStart,
-                            matchLength: matchLength,
-                            options: options,
-                        };
-                    }
-                    else {
-                        slugData = __assign(__assign({}, slugData), { trigger: currTrigger, matchStart: matchStart,
-                            matchLength: matchLength,
-                            options: options });
-                    }
-                }
-            };
-            for (var i = caret - 1; i >= 0; --i) {
-                var state_1 = _loop_1(i);
-                if (state_1 === "break")
-                    break;
-            }
-        }
-        return slugData;
-    };
-    var arrayTriggerMatch = function (triggers, re) {
-        var triggersMatch = triggers.map(function (trigger) { return ({
-            triggerStr: trigger,
-            triggerMatch: trigger.match(re),
-            triggerLength: trigger.length,
-        }); });
-        return triggersMatch;
-    };
-    var isTrigger = function (trigger, str, i) {
-        if (!trigger || !trigger.length) {
-            return true;
-        }
-        if (str.substr(i, trigger.length) === trigger) {
-            return true;
-        }
-        return false;
-    };
-    var handleChange = function (e) {
-        var onChange = props.onChange, options = props.options, spaceRemovers = props.spaceRemovers, spacer = props.spacer, value = props.value;
-        var old = recentValue;
-        var str = e.target.value;
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        var caret = get_input_selection_1.default(getInputElement(e.target)).end;
-        if (!str.length) {
-            updateState(__assign(__assign({}, state), { helperVisible: false }));
-        }
-        setRecentValue(str);
-        updateState(__assign(__assign({}, state), { caret: caret, value: e.target.value }));
-        if (!str.length || !caret) {
-            return onChange(e.target.value);
-        }
-        // '@wonderjenny ,|' -> '@wonderjenny, |'
-        if (enableSpaceRemovers &&
-            spaceRemovers.length &&
-            str.length > 2 &&
-            spacer.length) {
-            for (var i = 0; i < Math.max(old.length, str.length); ++i) {
-                if (old[i] !== str[i]) {
-                    if (i >= 2 &&
-                        str[i - 1] === spacer &&
-                        spaceRemovers.indexOf(str[i - 2]) === -1 &&
-                        spaceRemovers.indexOf(str[i]) !== -1 &&
-                        getMatch(str.substring(0, i - 2), caret - 3, options) !== {}) {
-                        var newValue = "" + str.slice(0, i - 1) + str.slice(i, i + 1) + str.slice(i - 1, i) + str.slice(i + 1);
-                        updateCaretPosition(i + 1);
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        if (refInput.current !== null) {
-                            refInput.current.value = newValue;
-                        }
-                        if (!value) {
-                            updateState(__assign(__assign({}, state), { value: newValue }));
-                        }
-                        return onChange(newValue);
-                    }
-                    break;
-                }
-            }
-            setEnableSpaceRemovers(false);
-        }
-        updateHelper(str, caret, options);
-        // if (!value) {
-        //   updateState({
-        //     ...state,
-        //     value: e.target.value
-        //   });
-        // }
-        return onChange(e.target.value);
-    };
-    var getInputElement = function (parent) {
-        if (parent !== undefined) {
-            if (parent.children.length > 0) {
-                var innerTextAreas = parent.getElementsByTagName('textarea');
-                if (innerTextAreas.length > 0) {
-                    return innerTextAreas[0];
-                }
-                var innerInputs = parent.getElementsByTagName('input');
-                if (innerInputs.length > 0) {
-                    return innerInputs[0];
-                }
-            }
-            else {
-                return parent;
-            }
-        }
-        return undefined;
-    };
-    var handleKeyDown = function (event) {
-        var helperVisible = state.helperVisible, options = state.options, selection = state.selection;
-        var onKeyDown = props.onKeyDown, passThroughEnter = props.passThroughEnter;
-        if (helperVisible) {
-            switch (event.keyCode) {
-                case KEY_ESCAPE:
-                    event.preventDefault();
-                    resetHelper();
-                    break;
-                case KEY_UP:
-                    event.preventDefault();
-                    updateState(__assign(__assign({}, state), { selection: (options.length + selection - 1) % options.length }));
-                    break;
-                case KEY_DOWN:
-                    event.preventDefault();
-                    updateState(__assign(__assign({}, state), { selection: (selection + 1) % options.length }));
-                    break;
-                case KEY_ENTER:
-                case KEY_RETURN:
-                    if (!passThroughEnter) {
-                        event.preventDefault();
-                    }
-                    handleSelection(selection);
-                    break;
-                case KEY_TAB:
-                    handleSelection(selection);
-                    break;
-                default:
-                    onKeyDown(event);
-                    break;
-            }
-        }
-        else {
-            onKeyDown(event);
-        }
-    };
-    var handleResize = function () {
-        updateState(__assign(__assign({}, state), { helperVisible: false }));
-    };
-    var handleSelection = function (idx) {
-        var spacer = props.spacer, onSelect = props.onSelect, changeOnSelect = props.changeOnSelect;
-        var matchStart = state.matchStart, matchLength = state.matchLength, options = state.options, trigger = state.trigger;
-        var slug = options[idx];
-        var value = recentValue;
-        var part1 = value.substring(0, matchStart - trigger.length);
-        var part2 = value.substring(matchStart + matchLength);
-        var event = { target: refInput.current };
-        var changedStr = changeOnSelect(trigger, slug);
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (event.target !== null) {
-            event.target.value = "" + part1 + changedStr + spacer + part2;
-        }
-        handleChange(event);
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (event.target !== null) {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            onSelect(event.target.value);
-        }
-        resetHelper();
-        updateCaretPosition(part1.length + changedStr.length + 1);
-        setEnableSpaceRemovers(true);
-    };
-    var updateCaretPosition = function (caret) {
-        updateState(__assign(__assign({}, state), { caret: caret }));
-        var input = getInputElement(refInput.current);
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        get_input_selection_1.setCaretPosition(input, caret);
-    };
-    var updateState = function (val) {
-        setTimeout(function () {
-            setState(__assign({}, val));
-        }, 0);
-    };
-    var updateHelper = function (str, caret, options) {
-        var parent = refInput.current;
-        if (refInput.current === null) {
-            return;
-        }
-        var input = getInputElement(parent);
-        if (input === undefined) {
-            return;
-        }
-        var parentRect = parent.getBoundingClientRect();
-        var slug = getMatch(str, caret, options);
-        if (Object.keys(slug).length > 0 && input !== null) {
-            var caretPos = textarea_caret_1.default(input, caret);
-            var rect = input.getBoundingClientRect();
-            var minChars = props.minChars, onRequestOptions = props.onRequestOptions, requestOnlyIfNoOptions = props.requestOnlyIfNoOptions, mode = props.mode;
-            var top_1, left = void 0, right = void 0, width = 'unset';
-            if (mode === 'assist') {
-                top_1 =
-                    parent === input
-                        ? caretPos.top + input.offsetTop
-                        : caretPos.top + parentRect.top;
-                left = Math.min(caretPos.left + input.offsetLeft - OPTION_LIST_Y_OFFSET, input.offsetLeft + rect.width - OPTION_LIST_MIN_WIDTH);
-            }
-            else {
-                top_1 = parentRect.top + parent.offsetHeight;
-                left = parent.offsetLeft;
-                right = parent.offsetLeft - parent.offsetWidth;
-                width = parentRect.width + "px";
-            }
-            if (slug.matchLength >= minChars &&
-                (slug.options.length > 1 ||
-                    (slug.options.length === 1 &&
-                        slug.options[0].length !== slug.matchLength))) {
-                updateState(__assign(__assign(__assign({}, state), { value: str, helperVisible: true, top: top_1,
-                    left: left,
-                    right: right,
-                    width: width }), slug));
-            }
-            else {
-                if (!requestOnlyIfNoOptions || !slug.options.length) {
-                    onRequestOptions(str.substr(slug.matchStart, slug.matchLength));
-                }
-                resetHelper();
-            }
-        }
-        else {
-            resetHelper();
-        }
-    };
-    var resetHelper = function () {
-        var timeDelay = 100;
-        setTimeout(function () {
-            updateState(__assign(__assign({}, state), { helperVisible: false, selection: 0 }));
-        }, timeDelay);
-    };
-    var renderAutocompleteList = function () {
-        var helperVisible = state.helperVisible, left = state.left, right = state.right, matchStart = state.matchStart, matchLength = state.matchLength, options = state.options, selection = state.selection, top = state.top, value = state.value, width = state.width;
-        if (!helperVisible) {
-            return null;
-        }
-        var maxOptions = props.maxOptions, offsetX = props.offsetX, offsetY = props.offsetY, direction = props.direction;
-        if (options.length === 0) {
-            return null;
-        }
-        if (selection >= options.length) {
-            updateState(__assign(__assign({}, state), { selection: 0 }));
-            return null;
-        }
-        var optionNumber = maxOptions === 0 ? options.length : maxOptions;
-        var helperOptions = options
-            .slice(0, optionNumber)
-            .map(function (val, idx) {
-            var highlightStart = val
-                .toLowerCase()
-                .indexOf(value.substr(matchStart, matchLength).toLowerCase());
-            return (react_1.default.createElement("li", { className: idx === selection ? 'active' : undefined, key: val, onClick: function () {
-                    handleSelection(idx);
-                }, onMouseEnter: function () {
-                    updateState(__assign(__assign({}, state), { selection: idx }));
-                } },
-                val.slice(0, highlightStart),
-                react_1.default.createElement("strong", null, val.substr(highlightStart, matchLength)),
-                val.slice(highlightStart + matchLength)));
-        });
-        var horizontalPosition = direction === 'ltr'
-            ? { left: left + offsetX }
-            : { right: right + offsetX };
-        return (react_1.default.createElement("ul", { className: "react-autocomplete-input", style: __assign(__assign({}, horizontalPosition), { top: top + offsetY, width: width }) }, helperOptions));
-    };
-    var Component = props.Component, ComponentProps = props.ComponentProps, defaultValue = props.defaultValue, disabled = props.disabled, onBlur = props.onBlur, value = props.value, rest = __rest(props, ["Component", "ComponentProps", "defaultValue", "disabled", "onBlur", "value"]);
-    var propagated = Object.assign({}, rest);
-    Object.keys(props).forEach(function (k) {
-        delete propagated[k];
-    });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.cloneElement(Component, __assign(__assign({ disabled: disabled, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, ref: refInput, value: recentValue }, propagated), ComponentProps)),
-        renderAutocompleteList()));
-};
-var defaultProps = {
-    Component: react_1.default.createElement("textarea", null),
-    ComponentProps: {},
-    defaultValue: undefined,
-    disabled: false,
-    maxOptions: 6,
-    onBlur: function (evt) { },
-    onChange: function (val) { },
-    onKeyDown: function (evt) { },
-    onRequestOptions: function (val) { },
-    onSelect: function (val) { },
-    changeOnSelect: function (trigger, slug) {
-        return "" + trigger + slug;
-    },
-    options: [],
-    regex: '^[A-Za-z0-9\\-_]+$',
-    matchAny: false,
-    minChars: 0,
-    requestOnlyIfNoOptions: true,
-    spaceRemovers: [',', '.', '!', '?'],
-    spacer: ' ',
-    trigger: '@',
-    offsetX: 0,
-    offsetY: 0,
-    value: undefined,
-    passThroughEnter: false,
-    mode: 'assist',
-    direction: 'ltr',
-};
-var AutocompleteWithDefauls = function (props) {
-    var compProps = __assign(__assign({}, defaultProps), props);
-    if (props.mode === 'autocomplete') {
-        compProps = __assign(__assign({}, compProps), { trigger: '', regex: '.', spacer: '' });
-    }
-    return react_1.default.createElement(Autocomplete, __assign({}, compProps));
-};
-exports.AutocompleteWithDefauls = AutocompleteWithDefauls;
-exports.default = exports.AutocompleteWithDefauls;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteWithDefauls = void 0;
+/* eslint-disable */
+var react_1 = __importStar(require("react"));
+var textarea_caret_1 = __importDefault(require("textarea-caret"));
+var get_input_selection_1 = __importStar(require("get-input-selection"));
+require("./autocomplete.css");
+var KEY_UP = 38;
+var KEY_DOWN = 40;
+var KEY_RETURN = 13;
+var KEY_ENTER = 14;
+var KEY_ESCAPE = 27;
+var KEY_TAB = 9;
+var OPTION_LIST_Y_OFFSET = 10;
+var OPTION_LIST_MIN_WIDTH = 100;
+var Autocomplete = function (props) {
+    var _a;
+    var _b = react_1.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : ''), recentValue = _b[0], setRecentValue = _b[1];
+    var _c = react_1.useState(false), enableSpaceRemovers = _c[0], setEnableSpaceRemovers = _c[1];
+    var _d = react_1.useState({
+        helperVisible: false,
+        left: 0,
+        right: 0,
+        trigger: '',
+        matchLength: 0,
+        matchStart: 0,
+        options: [],
+        selection: 0,
+        top: 0,
+        value: '',
+        caret: 0,
+        width: 'unset',
+    }), state = _d[0], setState = _d[1];
+    var refInput = react_1.useRef(null);
+    react_1.useEffect(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            try {
+                window.removeEventListener('resize', handleResize);
+            }
+            catch (e) {
+                console.log('WINDOW "resize" remove listener failed', e);
+            }
+        };
+    }, []);
+    react_1.useEffect(function () {
+        if (typeof props.value !== 'undefined') {
+            setRecentValue(props.value);
+        }
+        if (typeof props.defaultValue !== 'undefined') {
+            setRecentValue(props.defaultValue);
+        }
+    }, [props.value, props.defaultValue]);
+    react_1.useEffect(function () {
+        var options = props.options;
+        var caret = state.caret;
+        // if (options.length !== prevProps.options.length) {
+        updateHelper(recentValue, caret, options);
+        // }
+    }, [props]);
+    var getMatch = function (str, caret, providedOptions) {
+        var trigger = props.trigger, matchAny = props.matchAny, regex = props.regex;
+        var re = new RegExp(regex);
+        var triggers = trigger;
+        if (!Array.isArray(triggers)) {
+            triggers = new Array(trigger);
+        }
+        triggers.sort();
+        var providedOptionsObject = {};
+        if (Array.isArray(providedOptions)) {
+            triggers.forEach(function (triggerStr) {
+                providedOptionsObject[triggerStr] = providedOptions;
+            });
+        }
+        var triggersMatch = arrayTriggerMatch(triggers, re);
+        var slugData = {};
+        for (var triggersIndex = 0; triggersIndex < triggersMatch.length; triggersIndex++) {
+            var _a = triggersMatch[triggersIndex], triggerStr = _a.triggerStr, triggerMatch = _a.triggerMatch, triggerLength = _a.triggerLength;
+            var _loop_1 = function (i) {
+                var substr = str.substring(i, caret);
+                var match = substr.match(re);
+                var matchStart = -1;
+                if (triggerLength > 0) {
+                    var triggerIdx = triggerMatch ? i : i - triggerLength + 1;
+                    if (triggerIdx < 0) {
+                        return "break";
+                    }
+                    if (isTrigger(triggerStr, str, triggerIdx)) {
+                        matchStart = triggerIdx + triggerLength;
+                    }
+                    if (!match && matchStart < 0) {
+                        return "break";
+                    }
+                }
+                else {
+                    if (match && i > 0) {
+                        return "continue";
+                    }
+                    matchStart = i === 0 && match ? 0 : i + 1;
+                    if (caret - matchStart === 0) {
+                        return "break";
+                    }
+                }
+                if (matchStart >= 0) {
+                    var triggerOptions = providedOptionsObject[triggerStr];
+                    if (!Array.isArray(triggerOptions)) {
+                        return "continue";
+                    }
+                    var matchedSlug_1 = str.substring(matchStart, caret);
+                    var options = triggerOptions.filter(function (slug) {
+                        var idx = slug.toLowerCase().indexOf(matchedSlug_1.toLowerCase());
+                        return idx !== -1 && (matchAny || idx === 0);
+                    });
+                    var currTrigger = triggerStr;
+                    var matchLength = matchedSlug_1.length;
+                    if (slugData === {}) {
+                        slugData = {
+                            trigger: currTrigger,
+                            matchStart: matchStart,
+                            matchLength: matchLength,
+                            options: options,
+                        };
+                    }
+                    else {
+                        slugData = __assign(__assign({}, slugData), { trigger: currTrigger, matchStart: matchStart,
+                            matchLength: matchLength,
+                            options: options });
+                    }
+                }
+            };
+            for (var i = caret - 1; i >= 0; --i) {
+                var state_1 = _loop_1(i);
+                if (state_1 === "break")
+                    break;
+            }
+        }
+        return slugData;
+    };
+    var arrayTriggerMatch = function (triggers, re) {
+        var triggersMatch = triggers.map(function (trigger) { return ({
+            triggerStr: trigger,
+            triggerMatch: trigger.match(re),
+            triggerLength: trigger.length,
+        }); });
+        return triggersMatch;
+    };
+    var isTrigger = function (trigger, str, i) {
+        if (!trigger || !trigger.length) {
+            return true;
+        }
+        if (str.substr(i, trigger.length) === trigger) {
+            return true;
+        }
+        return false;
+    };
+    var handleChange = function (e) {
+        var onChange = props.onChange, options = props.options, spaceRemovers = props.spaceRemovers, spacer = props.spacer, value = props.value;
+        var old = recentValue;
+        var str = e.target.value;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        var caret = get_input_selection_1.default(getInputElement(e.target)).end;
+        if (!str.length) {
+            updateState(__assign(__assign({}, state), { helperVisible: false }));
+        }
+        setRecentValue(str);
+        updateState(__assign(__assign({}, state), { caret: caret, value: e.target.value }));
+        if (!str.length || !caret) {
+            return onChange(e.target.value);
+        }
+        // '@wonderjenny ,|' -> '@wonderjenny, |'
+        if (enableSpaceRemovers &&
+            spaceRemovers.length &&
+            str.length > 2 &&
+            spacer.length) {
+            for (var i = 0; i < Math.max(old.length, str.length); ++i) {
+                if (old[i] !== str[i]) {
+                    if (i >= 2 &&
+                        str[i - 1] === spacer &&
+                        spaceRemovers.indexOf(str[i - 2]) === -1 &&
+                        spaceRemovers.indexOf(str[i]) !== -1 &&
+                        getMatch(str.substring(0, i - 2), caret - 3, options) !== {}) {
+                        var newValue = "" + str.slice(0, i - 1) + str.slice(i, i + 1) + str.slice(i - 1, i) + str.slice(i + 1);
+                        updateCaretPosition(i + 1);
+                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                        if (refInput.current !== null) {
+                            refInput.current.value = newValue;
+                        }
+                        if (!value) {
+                            updateState(__assign(__assign({}, state), { value: newValue }));
+                        }
+                        return onChange(newValue);
+                    }
+                    break;
+                }
+            }
+            setEnableSpaceRemovers(false);
+        }
+        updateHelper(str, caret, options);
+        // if (!value) {
+        //   updateState({
+        //     ...state,
+        //     value: e.target.value
+        //   });
+        // }
+        return onChange(e.target.value);
+    };
+    var getInputElement = function (parent) {
+        if (parent !== undefined) {
+            if (parent.children.length > 0) {
+                var innerTextAreas = parent.getElementsByTagName('textarea');
+                if (innerTextAreas.length > 0) {
+                    return innerTextAreas[0];
+                }
+                var innerInputs = parent.getElementsByTagName('input');
+                if (innerInputs.length > 0) {
+                    return innerInputs[0];
+                }
+            }
+            else {
+                return parent;
+            }
+        }
+        return undefined;
+    };
+    var handleKeyDown = function (event) {
+        var helperVisible = state.helperVisible, options = state.options, selection = state.selection;
+        var onKeyDown = props.onKeyDown, passThroughEnter = props.passThroughEnter;
+        if (helperVisible) {
+            switch (event.keyCode) {
+                case KEY_ESCAPE:
+                    event.preventDefault();
+                    resetHelper();
+                    break;
+                case KEY_UP:
+                    event.preventDefault();
+                    updateState(__assign(__assign({}, state), { selection: (options.length + selection - 1) % options.length }));
+                    break;
+                case KEY_DOWN:
+                    event.preventDefault();
+                    updateState(__assign(__assign({}, state), { selection: (selection + 1) % options.length }));
+                    break;
+                case KEY_ENTER:
+                case KEY_RETURN:
+                    if (!passThroughEnter) {
+                        event.preventDefault();
+                    }
+                    handleSelection(selection);
+                    break;
+                case KEY_TAB:
+                    handleSelection(selection);
+                    break;
+                default:
+                    onKeyDown(event);
+                    break;
+            }
+        }
+        else {
+            onKeyDown(event);
+        }
+    };
+    var handleResize = function () {
+        updateState(__assign(__assign({}, state), { helperVisible: false }));
+    };
+    var handleSelection = function (idx) {
+        var spacer = props.spacer, onSelect = props.onSelect, changeOnSelect = props.changeOnSelect;
+        var matchStart = state.matchStart, matchLength = state.matchLength, options = state.options, trigger = state.trigger;
+        var slug = options[idx];
+        var value = recentValue;
+        var part1 = value.substring(0, matchStart - trigger.length);
+        var part2 = value.substring(matchStart + matchLength);
+        var event = { target: refInput.current };
+        var changedStr = changeOnSelect(trigger, slug);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (event.target !== null) {
+            event.target.value = "" + part1 + changedStr + spacer + part2;
+        }
+        handleChange(event);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (event.target !== null) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            onSelect(event.target.value);
+        }
+        resetHelper();
+        updateCaretPosition(part1.length + changedStr.length + 1);
+        setEnableSpaceRemovers(true);
+    };
+    var updateCaretPosition = function (caret) {
+        updateState(__assign(__assign({}, state), { caret: caret }));
+        var input = getInputElement(refInput.current);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        get_input_selection_1.setCaretPosition(input, caret);
+    };
+    var updateState = function (val) {
+        setTimeout(function () {
+            setState(__assign({}, val));
+        }, 0);
+    };
+    var updateHelper = function (str, caret, options) {
+        var parent = refInput.current;
+        if (refInput.current === null) {
+            return;
+        }
+        var input = getInputElement(parent);
+        if (input === undefined) {
+            return;
+        }
+        var parentRect = parent.getBoundingClientRect();
+        var slug = getMatch(str, caret, options);
+        if (Object.keys(slug).length > 0 && input !== null) {
+            var caretPos = textarea_caret_1.default(input, caret);
+            var rect = input.getBoundingClientRect();
+            var minChars = props.minChars, onRequestOptions = props.onRequestOptions, requestOnlyIfNoOptions = props.requestOnlyIfNoOptions, mode = props.mode;
+            var top_1, left = void 0, right = void 0, width = 'unset';
+            if (mode === 'assist') {
+                top_1 =
+                    parent === input
+                        ? caretPos.top + input.offsetTop
+                        : caretPos.top + parentRect.top;
+                left = Math.min(caretPos.left + input.offsetLeft - OPTION_LIST_Y_OFFSET, input.offsetLeft + rect.width - OPTION_LIST_MIN_WIDTH);
+            }
+            else {
+                top_1 = parentRect.top + parent.offsetHeight;
+                left = parent.offsetLeft;
+                right = parent.offsetLeft - parent.offsetWidth;
+                width = parentRect.width + "px";
+            }
+            if (slug.matchLength >= minChars &&
+                (slug.options.length > 1 ||
+                    (slug.options.length === 1 &&
+                        slug.options[0].length !== slug.matchLength))) {
+                updateState(__assign(__assign(__assign({}, state), { value: str, helperVisible: true, top: top_1,
+                    left: left,
+                    right: right,
+                    width: width }), slug));
+            }
+            else {
+                if (!requestOnlyIfNoOptions || !slug.options.length) {
+                    onRequestOptions(str.substr(slug.matchStart, slug.matchLength));
+                }
+                resetHelper();
+            }
+        }
+        else {
+            resetHelper();
+        }
+    };
+    var resetHelper = function () {
+        var timeDelay = 100;
+        setTimeout(function () {
+            updateState(__assign(__assign({}, state), { helperVisible: false, selection: 0 }));
+        }, timeDelay);
+    };
+    var renderAutocompleteList = function () {
+        var helperVisible = state.helperVisible, left = state.left, right = state.right, matchStart = state.matchStart, matchLength = state.matchLength, options = state.options, selection = state.selection, top = state.top, value = state.value, width = state.width;
+        if (!helperVisible) {
+            return null;
+        }
+        var maxOptions = props.maxOptions, offsetX = props.offsetX, offsetY = props.offsetY, direction = props.direction;
+        if (options.length === 0) {
+            return null;
+        }
+        if (selection >= options.length) {
+            updateState(__assign(__assign({}, state), { selection: 0 }));
+            return null;
+        }
+        var optionNumber = maxOptions === 0 ? options.length : maxOptions;
+        var helperOptions = options
+            .slice(0, optionNumber)
+            .map(function (val, idx) {
+            var highlightStart = val
+                .toLowerCase()
+                .indexOf(value.substr(matchStart, matchLength).toLowerCase());
+            return (react_1.default.createElement("li", { className: idx === selection ? 'active' : undefined, key: val, onClick: function () {
+                    handleSelection(idx);
+                }, onMouseEnter: function () {
+                    updateState(__assign(__assign({}, state), { selection: idx }));
+                } },
+                val.slice(0, highlightStart),
+                react_1.default.createElement("strong", null, val.substr(highlightStart, matchLength)),
+                val.slice(highlightStart + matchLength)));
+        });
+        var horizontalPosition = direction === 'ltr'
+            ? { left: left + offsetX }
+            : { right: right + offsetX };
+        return (react_1.default.createElement("ul", { className: "react-autocomplete-input", style: __assign(__assign({}, horizontalPosition), { top: top + offsetY, width: width }) }, helperOptions));
+    };
+    var Component = props.Component, ComponentProps = props.ComponentProps, defaultValue = props.defaultValue, disabled = props.disabled, onBlur = props.onBlur, value = props.value, rest = __rest(props, ["Component", "ComponentProps", "defaultValue", "disabled", "onBlur", "value"]);
+    var propagated = Object.assign({}, rest);
+    Object.keys(props).forEach(function (k) {
+        delete propagated[k];
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.cloneElement(Component, __assign(__assign({ disabled: disabled, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, ref: refInput, value: recentValue }, propagated), ComponentProps)),
+        renderAutocompleteList()));
+};
+var defaultProps = {
+    Component: react_1.default.createElement("textarea", null),
+    ComponentProps: {},
+    defaultValue: undefined,
+    disabled: false,
+    maxOptions: 6,
+    onBlur: function (evt) { },
+    onChange: function (val) { },
+    onKeyDown: function (evt) { },
+    onRequestOptions: function (val) { },
+    onSelect: function (val) { },
+    changeOnSelect: function (trigger, slug) {
+        return "" + trigger + slug;
+    },
+    options: [],
+    regex: '^[A-Za-z0-9\\-_]+$',
+    matchAny: false,
+    minChars: 0,
+    requestOnlyIfNoOptions: true,
+    spaceRemovers: [',', '.', '!', '?'],
+    spacer: ' ',
+    trigger: '@',
+    offsetX: 0,
+    offsetY: 0,
+    value: undefined,
+    passThroughEnter: false,
+    mode: 'assist',
+    direction: 'ltr',
+};
+var AutocompleteWithDefauls = function (props) {
+    var compProps = __assign(__assign({}, defaultProps), props);
+    if (props.mode === 'autocomplete') {
+        compProps = __assign(__assign({}, compProps), { trigger: '', regex: '.', spacer: '' });
+    }
+    return react_1.default.createElement(Autocomplete, __assign({}, compProps));
+};
+exports.AutocompleteWithDefauls = AutocompleteWithDefauls;
+exports.default = exports.AutocompleteWithDefauls;