react-mentions
Version:
React mentions input
1,188 lines (1,031 loc) • 86 kB
JavaScript
import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
import _extends from '@babel/runtime/helpers/esm/extends';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import React, { Children, useState, useEffect } from 'react';
import invariant from 'invariant';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import useStyles, { inline } from 'substyle';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
// escape RegExp special characters https://stackoverflow.com/a/9310752/5142490
var escapeRegex = function escapeRegex(str) {
return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
};
var PLACEHOLDERS = {
id: '__id__',
display: '__display__'
};
var findPositionOfCapturingGroup = function findPositionOfCapturingGroup(markup, parameterName) {
invariant(parameterName === 'id' || parameterName === 'display', "Second arg must be either \"id\" or \"display\", got: \"".concat(parameterName, "\"")); // find positions of placeholders in the markup
var indexDisplay = markup.indexOf(PLACEHOLDERS.display);
var indexId = markup.indexOf(PLACEHOLDERS.id); // set indices to null if not found
if (indexDisplay < 0) indexDisplay = null;
if (indexId < 0) indexId = null; // markup must contain one of the mandatory placeholders
invariant(indexDisplay !== null || indexId !== null, "The markup '".concat(markup, "' does not contain either of the placeholders '__id__' or '__display__'"));
if (indexDisplay !== null && indexId !== null) {
// both placeholders are used, return 0 or 1 depending on the position of the requested parameter
return parameterName === 'id' && indexId <= indexDisplay || parameterName === 'display' && indexDisplay <= indexId ? 0 : 1;
} // just one placeholder is being used, we'll use the captured string for both parameters
return 0;
};
var combineRegExps = function combineRegExps(regExps) {
var serializedRegexParser = /^\/(.+)\/(\w+)?$/;
return new RegExp(regExps.map(function (regex) {
var _serializedRegexParse = serializedRegexParser.exec(regex.toString()),
_serializedRegexParse2 = _slicedToArray(_serializedRegexParse, 3),
regexString = _serializedRegexParse2[1],
regexFlags = _serializedRegexParse2[2];
invariant(!regexFlags, "RegExp flags are not supported. Change /".concat(regexString, "/").concat(regexFlags, " into /").concat(regexString, "/"));
return "(".concat(regexString, ")");
}).join('|'), 'g');
};
var countPlaceholders = function countPlaceholders(markup) {
var count = 0;
if (markup.indexOf('__id__') >= 0) count++;
if (markup.indexOf('__display__') >= 0) count++;
return count;
};
var emptyFn = function emptyFn() {}; // Finds all occurrences of the markup in the value and calls the `markupIteratee` callback for each of them.
// The optional `textIteratee` callback is called for each plain text ranges in between these markup occurrences.
var iterateMentionsMarkup = function iterateMentionsMarkup(value, config, markupIteratee) {
var textIteratee = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : emptyFn;
var regex = combineRegExps(config.map(function (c) {
return c.regex;
}));
var accOffset = 2; // first is whole match, second is the for the capturing group of first regexp component
var captureGroupOffsets = config.map(function (_ref) {
var markup = _ref.markup;
var result = accOffset; // + 1 is for the capturing group we add around each regexp component in combineRegExps
accOffset += countPlaceholders(markup) + 1;
return result;
});
var match;
var start = 0;
var currentPlainTextIndex = 0; // detect all mention markup occurrences in the value and iterate the matches
while ((match = regex.exec(value)) !== null) {
var offset = captureGroupOffsets.find(function (o) {
return !!match[o];
}); // eslint-disable-line no-loop-func
var mentionChildIndex = captureGroupOffsets.indexOf(offset);
var _config$mentionChildI = config[mentionChildIndex],
markup = _config$mentionChildI.markup,
displayTransform = _config$mentionChildI.displayTransform;
var idPos = offset + findPositionOfCapturingGroup(markup, 'id');
var displayPos = offset + findPositionOfCapturingGroup(markup, 'display');
var id = match[idPos];
var display = displayTransform(id, match[displayPos]);
var substr = value.substring(start, match.index);
textIteratee(substr, start, currentPlainTextIndex);
currentPlainTextIndex += substr.length;
markupIteratee(match[0], match.index, currentPlainTextIndex, id, display, mentionChildIndex, start);
currentPlainTextIndex += display.length;
start = regex.lastIndex;
}
if (start < value.length) {
textIteratee(value.substring(start), start, currentPlainTextIndex);
}
};
var getPlainText = function getPlainText(value, config) {
var result = '';
iterateMentionsMarkup(value, config, function (match, index, plainTextIndex, id, display) {
result += display;
}, function (plainText) {
result += plainText;
});
return result;
};
// in the marked up value string.
// If the passed character index lies inside a mention, the value of `inMarkupCorrection` defines the
// correction to apply:
// - 'START' to return the index of the mention markup's first char (default)
// - 'END' to return the index after its last char
// - 'NULL' to return null
var mapPlainTextIndex = function mapPlainTextIndex(value, config, indexInPlainText) {
var inMarkupCorrection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'START';
if (typeof indexInPlainText !== 'number') {
return indexInPlainText;
}
var result;
var textIteratee = function textIteratee(substr, index, substrPlainTextIndex) {
if (result !== undefined) return;
if (substrPlainTextIndex + substr.length >= indexInPlainText) {
// found the corresponding position in the current plain text range
result = index + indexInPlainText - substrPlainTextIndex;
}
};
var markupIteratee = function markupIteratee(markup, index, mentionPlainTextIndex, id, display, childIndex, lastMentionEndIndex) {
if (result !== undefined) return;
if (mentionPlainTextIndex + display.length > indexInPlainText) {
// found the corresponding position inside current match,
// return the index of the first or after the last char of the matching markup
// depending on whether the `inMarkupCorrection`
if (inMarkupCorrection === 'NULL') {
result = null;
} else {
result = index + (inMarkupCorrection === 'END' ? markup.length : 0);
}
}
};
iterateMentionsMarkup(value, config, markupIteratee, textIteratee); // when a mention is at the end of the value and we want to get the caret position
// at the end of the string, result is undefined
return result === undefined ? value.length : result;
};
var spliceString = function spliceString(str, start, end, insert) {
return str.substring(0, start) + insert + str.substring(end);
};
// guided by the textarea text selection ranges before and after the change
var applyChangeToValue = function applyChangeToValue(value, plainTextValue, _ref, config) {
var selectionStartBefore = _ref.selectionStartBefore,
selectionEndBefore = _ref.selectionEndBefore,
selectionEndAfter = _ref.selectionEndAfter;
var oldPlainTextValue = getPlainText(value, config);
var lengthDelta = oldPlainTextValue.length - plainTextValue.length;
if (selectionStartBefore === 'undefined') {
selectionStartBefore = selectionEndAfter + lengthDelta;
}
if (selectionEndBefore === 'undefined') {
selectionEndBefore = selectionStartBefore;
} // Fixes an issue with replacing combined characters for complex input. Eg like acented letters on OSX
if (selectionStartBefore === selectionEndBefore && selectionEndBefore === selectionEndAfter && oldPlainTextValue.length === plainTextValue.length) {
selectionStartBefore = selectionStartBefore - 1;
} // extract the insertion from the new plain text value
var insert = plainTextValue.slice(selectionStartBefore, selectionEndAfter); // handling for Backspace key with no range selection
var spliceStart = Math.min(selectionStartBefore, selectionEndAfter);
var spliceEnd = selectionEndBefore;
if (selectionStartBefore === selectionEndAfter) {
// handling for Delete key with no range selection
spliceEnd = Math.max(selectionEndBefore, selectionStartBefore + lengthDelta);
}
var mappedSpliceStart = mapPlainTextIndex(value, config, spliceStart, 'START');
var mappedSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, 'END');
var controlSpliceStart = mapPlainTextIndex(value, config, spliceStart, 'NULL');
var controlSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, 'NULL');
var willRemoveMention = controlSpliceStart === null || controlSpliceEnd === null;
var newValue = spliceString(value, mappedSpliceStart, mappedSpliceEnd, insert);
if (!willRemoveMention) {
// test for auto-completion changes
var controlPlainTextValue = getPlainText(newValue, config);
if (controlPlainTextValue !== plainTextValue) {
// some auto-correction is going on
// find start of diff
spliceStart = 0;
while (plainTextValue[spliceStart] === controlPlainTextValue[spliceStart]) {
spliceStart++;
} // extract auto-corrected insertion
insert = plainTextValue.slice(spliceStart, selectionEndAfter); // find index of the unchanged remainder
spliceEnd = oldPlainTextValue.lastIndexOf(plainTextValue.substring(selectionEndAfter)); // re-map the corrected indices
mappedSpliceStart = mapPlainTextIndex(value, config, spliceStart, 'START');
mappedSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, 'END');
newValue = spliceString(value, mappedSpliceStart, mappedSpliceEnd, insert);
}
}
return newValue;
};
// returns a the index of of the first char of the mention in the plain text.
// If indexInPlainText does not lie inside a mention, returns indexInPlainText.
var findStartOfMentionInPlainText = function findStartOfMentionInPlainText(value, config, indexInPlainText) {
var result = indexInPlainText;
var foundMention = false;
var markupIteratee = function markupIteratee(markup, index, mentionPlainTextIndex, id, display, childIndex, lastMentionEndIndex) {
if (mentionPlainTextIndex <= indexInPlainText && mentionPlainTextIndex + display.length > indexInPlainText) {
result = mentionPlainTextIndex;
foundMention = true;
}
};
iterateMentionsMarkup(value, config, markupIteratee);
if (foundMention) {
return result;
}
};
var getMentions = function getMentions(value, config) {
var mentions = [];
iterateMentionsMarkup(value, config, function (match, index, plainTextIndex, id, display, childIndex, start) {
mentions.push({
id: id,
display: display,
childIndex: childIndex,
index: index,
plainTextIndex: plainTextIndex
});
});
return mentions;
};
var getSuggestionHtmlId = function getSuggestionHtmlId(prefix, id) {
return "".concat(prefix, "-").concat(id);
};
var countSuggestions = function countSuggestions(suggestions) {
return Object.values(suggestions).reduce(function (acc, _ref) {
var results = _ref.results;
return acc + results.length;
}, 0);
};
var getEndOfLastMention = function getEndOfLastMention(value, config) {
var mentions = getMentions(value, config);
var lastMention = mentions[mentions.length - 1];
return lastMention ? lastMention.plainTextIndex + lastMention.display.length : 0;
};
var markupToRegex = function markupToRegex(markup) {
var escapedMarkup = escapeRegex(markup);
var charAfterDisplay = markup[markup.indexOf(PLACEHOLDERS.display) + PLACEHOLDERS.display.length];
var charAfterId = markup[markup.indexOf(PLACEHOLDERS.id) + PLACEHOLDERS.id.length];
return new RegExp(escapedMarkup.replace(PLACEHOLDERS.display, "([^".concat(escapeRegex(charAfterDisplay || ''), "]+?)")).replace(PLACEHOLDERS.id, "([^".concat(escapeRegex(charAfterId || ''), "]+?)")));
};
var readConfigFromChildren = function readConfigFromChildren(children) {
return Children.toArray(children).map(function (_ref) {
var _ref$props = _ref.props,
markup = _ref$props.markup,
regex = _ref$props.regex,
displayTransform = _ref$props.displayTransform;
return {
markup: markup,
regex: regex ? coerceCapturingGroups(regex, markup) : markupToRegex(markup),
displayTransform: displayTransform || function (id, display) {
return display || id;
}
};
});
}; // make sure that the custom regex defines the correct number of capturing groups
var coerceCapturingGroups = function coerceCapturingGroups(regex, markup) {
var numberOfGroups = new RegExp(regex.toString() + '|').exec('').length - 1;
var numberOfPlaceholders = countPlaceholders(markup);
invariant(numberOfGroups === numberOfPlaceholders, "Number of capturing groups in RegExp ".concat(regex.toString(), " (").concat(numberOfGroups, ") does not match the number of placeholders in the markup '").concat(markup, "' (").concat(numberOfPlaceholders, ")"));
return regex;
};
var makeMentionsMarkup = function makeMentionsMarkup(markup, id, display) {
return markup.replace(PLACEHOLDERS.id, id).replace(PLACEHOLDERS.display, display);
};
// This contains all the latin letters and the regex that match these letters with diacritics
// https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
var lettersDiacritics = [{
base: 'A',
letters: /(A|Ⓐ|Ａ|À|Á|Â|Ầ|Ấ|Ẫ|Ẩ|Ã|Ā|Ă|Ằ|Ắ|Ẵ|Ẳ|Ȧ|Ǡ|Ä|Ǟ|Ả|Å|Ǻ|Ǎ|Ȁ|Ȃ|Ạ|Ậ|Ặ|Ḁ|Ą|Ⱥ|Ɐ|[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F])/g
}, {
base: 'AA',
letters: /(Ꜳ|[\uA732])/g
}, {
base: 'AE',
letters: /(Æ|Ǽ|Ǣ|[\u00C6\u01FC\u01E2])/g
}, {
base: 'AO',
letters: /(Ꜵ|[\uA734])/g
}, {
base: 'AU',
letters: /(Ꜷ|[\uA736])/g
}, {
base: 'AV',
letters: /(Ꜹ|Ꜻ|[\uA738\uA73A])/g
}, {
base: 'AY',
letters: /(Ꜽ|[\uA73C])/g
}, {
base: 'B',
letters: /(B|Ⓑ|Ｂ|Ḃ|Ḅ|Ḇ|Ƀ|Ƃ|Ɓ|[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181])/g
}, {
base: 'C',
letters: /(C|Ⓒ|Ｃ|Ć|Ĉ|Ċ|Č|Ç|Ḉ|Ƈ|Ȼ|Ꜿ|[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E])/g
}, {
base: 'D',
letters: /(D|Ⓓ|Ｄ|Ḋ|Ď|Ḍ|Ḑ|Ḓ|Ḏ|Đ|Ƌ|Ɗ|Ɖ|Ꝺ|Ð|[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779\u00D0])/g
}, {
base: 'DZ',
letters: /(DZ|DŽ|[\u01F1\u01C4])/g
}, {
base: 'Dz',
letters: /(Dz|Dž|[\u01F2\u01C5])/g
}, {
base: 'E',
letters: /(E|Ⓔ|Ｅ|È|É|Ê|Ề|Ế|Ễ|Ể|Ẽ|Ē|Ḕ|Ḗ|Ĕ|Ė|Ë|Ẻ|Ě|Ȅ|Ȇ|Ẹ|Ệ|Ȩ|Ḝ|Ę|Ḙ|Ḛ|Ɛ|Ǝ|[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E])/g
}, {
base: 'F',
letters: /(F|Ⓕ|Ｆ|Ḟ|Ƒ|Ꝼ|[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B])/g
}, {
base: 'G',
letters: /(G|Ⓖ|Ｇ|Ǵ|Ĝ|Ḡ|Ğ|Ġ|Ǧ|Ģ|Ǥ|Ɠ|Ꞡ|Ᵹ|Ꝿ|[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E])/g
}, {
base: 'H',
letters: /(H|Ⓗ|Ｈ|Ĥ|Ḣ|Ḧ|Ȟ|Ḥ|Ḩ|Ḫ|Ħ|Ⱨ|Ⱶ|Ɥ|[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D])/g
}, {
base: 'I',
letters: /(I|Ⓘ|Ｉ|Ì|Í|Î|Ĩ|Ī|Ĭ|İ|Ï|Ḯ|Ỉ|Ǐ|Ȉ|Ȋ|Ị|Į|Ḭ|Ɨ|[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197])/g
}, {
base: 'J',
letters: /(J|Ⓙ|Ｊ|Ĵ|Ɉ|[\u004A\u24BF\uFF2A\u0134\u0248])/g
}, {
base: 'K',
letters: /(K|Ⓚ|Ｋ|Ḱ|Ǩ|Ḳ|Ķ|Ḵ|Ƙ|Ⱪ|Ꝁ|Ꝃ|Ꝅ|Ꞣ|[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2])/g
}, {
base: 'L',
letters: /(L|Ⓛ|Ｌ|Ŀ|Ĺ|Ľ|Ḷ|Ḹ|Ļ|Ḽ|Ḻ|Ł|Ƚ|Ɫ|Ⱡ|Ꝉ|Ꝇ|Ꞁ|[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780])/g
}, {
base: 'LJ',
letters: /(LJ|[\u01C7])/g
}, {
base: 'Lj',
letters: /(Lj|[\u01C8])/g
}, {
base: 'M',
letters: /(M|Ⓜ|Ｍ|Ḿ|Ṁ|Ṃ|Ɱ|Ɯ|[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C])/g
}, {
base: 'N',
letters: /(N|Ⓝ|Ｎ|Ǹ|Ń|Ñ|Ṅ|Ň|Ṇ|Ņ|Ṋ|Ṉ|Ƞ|Ɲ|Ꞑ|Ꞥ|Ŋ|[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4\u014A])/g
}, {
base: 'NJ',
letters: /(NJ|[\u01CA])/g
}, {
base: 'Nj',
letters: /(Nj|[\u01CB])/g
}, {
base: 'O',
letters: /(O|Ⓞ|Ｏ|Ò|Ó|Ô|Ồ|Ố|Ỗ|Ổ|Õ|Ṍ|Ȭ|Ṏ|Ō|Ṑ|Ṓ|Ŏ|Ȯ|Ȱ|Ö|Ȫ|Ỏ|Ő|Ǒ|Ȍ|Ȏ|Ơ|Ờ|Ớ|Ỡ|Ở|Ợ|Ọ|Ộ|Ǫ|Ǭ|Ø|Ǿ|Ɔ|Ɵ|Ꝋ|Ꝍ|[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C])/g
}, {
base: 'OE',
letters: /(Œ|[\u0152])/g
}, {
base: 'OI',
letters: /(Ƣ|[\u01A2])/g
}, {
base: 'OO',
letters: /(Ꝏ|[\uA74E])/g
}, {
base: 'OU',
letters: /(Ȣ|[\u0222])/g
}, {
base: 'P',
letters: /(P|Ⓟ|Ｐ|Ṕ|Ṗ|Ƥ|Ᵽ|Ꝑ|Ꝓ|Ꝕ|[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754])/g
}, {
base: 'Q',
letters: /(Q|Ⓠ|Ｑ|Ꝗ|Ꝙ|Ɋ|[\u0051\u24C6\uFF31\uA756\uA758\u024A])/g
}, {
base: 'R',
letters: /(R|Ⓡ|Ｒ|Ŕ|Ṙ|Ř|Ȑ|Ȓ|Ṛ|Ṝ|Ŗ|Ṟ|Ɍ|Ɽ|Ꝛ|Ꞧ|Ꞃ|[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782])/g
}, {
base: 'S',
letters: /(S|Ⓢ|Ｓ|ẞ|Ś|Ṥ|Ŝ|Ṡ|Š|Ṧ|Ṣ|Ṩ|Ș|Ş|Ȿ|Ꞩ|Ꞅ|[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784])/g
}, {
base: 'T',
letters: /(T|Ⓣ|Ｔ|Ṫ|Ť|Ṭ|Ț|Ţ|Ṱ|Ṯ|Ŧ|Ƭ|Ʈ|Ⱦ|Ꞇ|[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786])/g
}, {
base: 'TH',
letters: /(Þ|[\u00DE])/g
}, {
base: 'TZ',
letters: /(Ꜩ|[\uA728])/g
}, {
base: 'U',
letters: /(U|Ⓤ|Ｕ|Ù|Ú|Û|Ũ|Ṹ|Ū|Ṻ|Ŭ|Ü|Ǜ|Ǘ|Ǖ|Ǚ|Ủ|Ů|Ű|Ǔ|Ȕ|Ȗ|Ư|Ừ|Ứ|Ữ|Ử|Ự|Ụ|Ṳ|Ų|Ṷ|Ṵ|Ʉ|[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244])/g
}, {
base: 'V',
letters: /(V|Ⓥ|Ｖ|Ṽ|Ṿ|Ʋ|Ꝟ|Ʌ|[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245])/g
}, {
base: 'VY',
letters: /(Ꝡ|[\uA760])/g
}, {
base: 'W',
letters: /(W|Ⓦ|Ｗ|Ẁ|Ẃ|Ŵ|Ẇ|Ẅ|Ẉ|Ⱳ|[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72])/g
}, {
base: 'X',
letters: /(X|Ⓧ|Ｘ|Ẋ|Ẍ|[\u0058\u24CD\uFF38\u1E8A\u1E8C])/g
}, {
base: 'Y',
letters: /(Y|Ⓨ|Ｙ|Ỳ|Ý|Ŷ|Ỹ|Ȳ|Ẏ|Ÿ|Ỷ|Ỵ|Ƴ|Ɏ|Ỿ|[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE])/g
}, {
base: 'Z',
letters: /(Z|Ⓩ|Ｚ|Ź|Ẑ|Ż|Ž|Ẓ|Ẕ|Ƶ|Ȥ|Ɀ|Ⱬ|Ꝣ|[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762])/g
}, {
base: 'a',
letters: /(a|ⓐ|ａ|ẚ|à|á|â|ầ|ấ|ẫ|ẩ|ã|ā|ă|ằ|ắ|ẵ|ẳ|ȧ|ǡ|ä|ǟ|ả|å|ǻ|ǎ|ȁ|ȃ|ạ|ậ|ặ|ḁ|ą|ⱥ|ɐ|[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250])/g
}, {
base: 'aa',
letters: /(ꜳ|[\uA733])/g
}, {
base: 'ae',
letters: /(æ|ǽ|ǣ|[\u00E6\u01FD\u01E3])/g
}, {
base: 'ao',
letters: /(ꜵ|[\uA735])/g
}, {
base: 'au',
letters: /(ꜷ|[\uA737])/g
}, {
base: 'av',
letters: /(ꜹ|ꜻ|[\uA739\uA73B])/g
}, {
base: 'ay',
letters: /(ꜽ|[\uA73D])/g
}, {
base: 'b',
letters: /(b|ⓑ|ｂ|ḃ|ḅ|ḇ|ƀ|ƃ|ɓ|[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253])/g
}, {
base: 'c',
letters: /(c|ⓒ|ｃ|ć|ĉ|ċ|č|ç|ḉ|ƈ|ȼ|ꜿ|ↄ|[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184])/g
}, {
base: 'd',
letters: /(d|ⓓ|ｄ|ḋ|ď|ḍ|ḑ|ḓ|ḏ|đ|ƌ|ɖ|ɗ|ꝺ|ð|[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A\u00F0])/g
}, {
base: 'dz',
letters: /(dz|dž|[\u01F3\u01C6])/g
}, {
base: 'e',
letters: /(e|ⓔ|ｅ|è|é|ê|ề|ế|ễ|ể|ẽ|ē|ḕ|ḗ|ĕ|ė|ë|ẻ|ě|ȅ|ȇ|ẹ|ệ|ȩ|ḝ|ę|ḙ|ḛ|ɇ|ɛ|ǝ|[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD])/g
}, {
base: 'f',
letters: /(f|ⓕ|ｆ|ḟ|ƒ|ꝼ|[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C])/g
}, {
base: 'g',
letters: /(g|ⓖ|ｇ|ǵ|ĝ|ḡ|ğ|ġ|ǧ|ģ|ǥ|ɠ|ꞡ|ᵹ|ꝿ|[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F])/g
}, {
base: 'h',
letters: /(h|ⓗ|ｈ|ĥ|ḣ|ḧ|ȟ|ḥ|ḩ|ḫ|ẖ|ħ|ⱨ|ⱶ|ɥ|[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265])/g
}, {
base: 'hv',
letters: /(ƕ|[\u0195])/g
}, {
base: 'i',
letters: /(i|ⓘ|ｉ|ì|í|î|ĩ|ī|ĭ|ï|ḯ|ỉ|ǐ|ȉ|ȋ|ị|į|ḭ|ɨ|ı|[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131])/g
}, {
base: 'ij',
letters: /(ij|[\u0133])/g
}, {
base: 'j',
letters: /(j|ⓙ|ｊ|ĵ|ǰ|ɉ|[\u006A\u24D9\uFF4A\u0135\u01F0\u0249])/g
}, {
base: 'k',
letters: /(k|ⓚ|ｋ|ḱ|ǩ|ḳ|ķ|ḵ|ƙ|ⱪ|ꝁ|ꝃ|ꝅ|ꞣ|[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3])/g
}, {
base: 'l',
letters: /(l|ⓛ|ｌ|ŀ|ĺ|ľ|ḷ|ḹ|ļ|ḽ|ḻ|ł|ƚ|ɫ|ⱡ|ꝉ|ꞁ|ꝇ|[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u0142\u019A\u026B\u2C61\uA749\uA781\uA747])/g
}, {
base: 'lj',
letters: /(lj|[\u01C9])/g
}, {
base: 'm',
letters: /(m|ⓜ|ｍ|ḿ|ṁ|ṃ|ɱ|ɯ|[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F])/g
}, {
base: 'n',
letters: /(n|ⓝ|ｎ|ǹ|ń|ñ|ṅ|ň|ṇ|ņ|ṋ|ṉ|ƞ|ɲ|ʼn|ꞑ|ꞥ|ŋ|[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5\u014B])/g
}, {
base: 'nj',
letters: /(nj|[\u01CC])/g
}, {
base: 'o',
letters: /(o|ⓞ|ｏ|ò|ó|ô|ồ|ố|ỗ|ổ|õ|ṍ|ȭ|ṏ|ō|ṑ|ṓ|ŏ|ȯ|ȱ|ö|ȫ|ỏ|ő|ǒ|ȍ|ȏ|ơ|ờ|ớ|ỡ|ở|ợ|ọ|ộ|ǫ|ǭ|ø|ǿ|ɔ|ꝋ|ꝍ|ɵ|[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275])/g
}, {
base: 'oe',
letters: /(œ|[\u0153])/g
}, {
base: 'oi',
letters: /(ƣ|[\u01A3])/g
}, {
base: 'ou',
letters: /(ȣ|[\u0223])/g
}, {
base: 'oo',
letters: /(ꝏ|[\uA74F])/g
}, {
base: 'p',
letters: /(p|ⓟ|ｐ|ṕ|ṗ|ƥ|ᵽ|ꝑ|ꝓ|ꝕ|[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755])/g
}, {
base: 'q',
letters: /(q|ⓠ|ｑ|ɋ|ꝗ|ꝙ|[\u0071\u24E0\uFF51\u024B\uA757\uA759])/g
}, {
base: 'r',
letters: /(r|ⓡ|ｒ|ŕ|ṙ|ř|ȑ|ȓ|ṛ|ṝ|ŗ|ṟ|ɍ|ɽ|ꝛ|ꞧ|ꞃ|[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783])/g
}, {
base: 's',
letters: /(s|ⓢ|ｓ|ś|ṥ|ŝ|ṡ|š|ṧ|ṣ|ṩ|ș|ş|ȿ|ꞩ|ꞅ|ẛ|ſ|[\u0073\u24E2\uFF53\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B\u017F])/g
}, {
base: 'ss',
letters: /(ß|[\u00DF])/g
}, {
base: 't',
letters: /(t|ⓣ|ｔ|ṫ|ẗ|ť|ṭ|ț|ţ|ṱ|ṯ|ŧ|ƭ|ʈ|ⱦ|ꞇ|[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787])/g
}, {
base: 'th',
letters: /(þ|[\u00FE])/g
}, {
base: 'tz',
letters: /(ꜩ|[\uA729])/g
}, {
base: 'u',
letters: /(u|ⓤ|ｕ|ù|ú|û|ũ|ṹ|ū|ṻ|ŭ|ü|ǜ|ǘ|ǖ|ǚ|ủ|ů|ű|ǔ|ȕ|ȗ|ư|ừ|ứ|ữ|ử|ự|ụ|ṳ|ų|ṷ|ṵ|ʉ|[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289])/g
}, {
base: 'v',
letters: /(v|ⓥ|ｖ|ṽ|ṿ|ʋ|ꝟ|ʌ|[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C])/g
}, {
base: 'vy',
letters: /(ꝡ|[\uA761])/g
}, {
base: 'w',
letters: /(w|ⓦ|ｗ|ẁ|ẃ|ŵ|ẇ|ẅ|ẘ|ẉ|ⱳ|[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73])/g
}, {
base: 'x',
letters: /(x|ⓧ|ｘ|ẋ|ẍ|[\u0078\u24E7\uFF58\u1E8B\u1E8D])/g
}, {
base: 'y',
letters: /(y|ⓨ|ｙ|ỳ|ý|ŷ|ỹ|ȳ|ẏ|ÿ|ỷ|ẙ|ỵ|ƴ|ɏ|ỿ|[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF])/g
}, {
base: 'z',
letters: /(z|ⓩ|ｚ|ź|ẑ|ż|ž|ẓ|ẕ|ƶ|ȥ|ɀ|ⱬ|ꝣ|[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763])/g
}];
var removeAccents = function removeAccents(str) {
var formattedStr = str;
lettersDiacritics.forEach(function (letterDiacritics) {
formattedStr = formattedStr.replace(letterDiacritics.letters, letterDiacritics.base);
});
return formattedStr;
};
var normalizeString = function normalizeString(str) {
return removeAccents(str).toLowerCase();
};
var getSubstringIndex = function getSubstringIndex(str, substr, ignoreAccents) {
if (!ignoreAccents) {
return str.toLowerCase().indexOf(substr.toLowerCase());
}
return normalizeString(str).indexOf(normalizeString(substr));
};
var isIE = function isIE() {
return !!document.documentMode;
};
var isNumber = function isNumber(val) {
return typeof val === 'number';
};
var keys = function keys(obj) {
return obj === Object(obj) ? Object.keys(obj) : [];
};
var omit = function omit(obj) {
var _ref;
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
rest[_key - 1] = arguments[_key];
}
var keys = (_ref = []).concat.apply(_ref, rest);
return Object.keys(obj).reduce(function (acc, k) {
if (obj.hasOwnProperty(k) && !keys.includes(k) && obj[k] !== undefined) {
acc[k] = obj[k];
}
return acc;
}, {});
};
var _excluded = ["style", "className", "classNames"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function createDefaultStyle(defaultStyle, getModifiers) {
var enhance = function enhance(ComponentToWrap) {
var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
var style = _ref.style,
className = _ref.className,
classNames = _ref.classNames,
rest = _objectWithoutProperties(_ref, _excluded);
var modifiers = getModifiers ? getModifiers(rest) : undefined;
var styles = useStyles(defaultStyle, {
style: style,
className: className,
classNames: classNames
}, modifiers);
return /*#__PURE__*/React.createElement(ComponentToWrap, _extends({}, rest, {
style: styles
}));
};
var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
return /*#__PURE__*/React.forwardRef(function (props, ref) {
return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
ref: ref
}));
});
};
return enhance;
}
var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
if (!usedKeys.hasOwnProperty(id)) {
usedKeys[id] = 0;
} else {
usedKeys[id]++;
}
return id + '_' + usedKeys[id];
};
function Highlighter(_ref) {
var selectionStart = _ref.selectionStart,
selectionEnd = _ref.selectionEnd,
_ref$value = _ref.value,
value = _ref$value === void 0 ? '' : _ref$value,
onCaretPositionChange = _ref.onCaretPositionChange,
containerRef = _ref.containerRef,
children = _ref.children,
singleLine = _ref.singleLine,
style = _ref.style;
var _useState = useState({
left: undefined,
top: undefined
}),
_useState2 = _slicedToArray(_useState, 2),
position = _useState2[0],
setPosition = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
caretElement = _useState4[0],
setCaretElement = _useState4[1];
useEffect(function () {
notifyCaretPosition();
});
var notifyCaretPosition = function notifyCaretPosition() {
if (!caretElement) {
return;
}
var offsetLeft = caretElement.offsetLeft,
offsetTop = caretElement.offsetTop;
if (position.left === offsetLeft && position.top === offsetTop) {
return;
}
var newPosition = {
left: offsetLeft,
top: offsetTop
};
setPosition(newPosition);
onCaretPositionChange(newPosition);
};
var config = readConfigFromChildren(children);
var caretPositionInMarkup;
if (selectionEnd === selectionStart) {
caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
}
var resultComponents = [];
var componentKeys = {};
var components = resultComponents;
var substringComponentKey = 0;
var textIteratee = function textIteratee(substr, index, indexInPlainText) {
// check whether the caret element has to be inserted inside the current plain substring
if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
// if yes, split substr at the caret position and insert the caret component
var splitIndex = caretPositionInMarkup - index;
components.push(renderSubstring(substr.substring(0, splitIndex), substringComponentKey)); // add all following substrings and mention components as children of the caret component
components = [renderSubstring(substr.substring(splitIndex), substringComponentKey)];
} else {
components.push(renderSubstring(substr, substringComponentKey));
}
substringComponentKey++;
};
var mentionIteratee = function mentionIteratee(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
var key = _generateComponentKey(componentKeys, id);
components.push(getMentionComponentForMatch(id, display, mentionChildIndex, key));
};
var renderSubstring = function renderSubstring(string, key) {
// set substring span to hidden, so that Emojis are not shown double in Mobile Safari
return /*#__PURE__*/React.createElement("span", _extends({}, style('substring'), {
key: key
}), string);
};
var getMentionComponentForMatch = function getMentionComponentForMatch(id, display, mentionChildIndex, key) {
var props = {
id: id,
display: display,
key: key
};
var child = Children.toArray(children)[mentionChildIndex];
return /*#__PURE__*/React.cloneElement(child, props);
};
var renderHighlighterCaret = function renderHighlighterCaret(children) {
return /*#__PURE__*/React.createElement("span", _extends({}, style('caret'), {
ref: setCaretElement,
key: "caret"
}), children);
};
iterateMentionsMarkup(value, config, mentionIteratee, textIteratee); // append a span containing a space, to ensure the last text line has the correct height
components.push(' ');
if (components !== resultComponents) {
// if a caret component is to be rendered, add all components that followed as its children
resultComponents.push(renderHighlighterCaret(components));
}
return /*#__PURE__*/React.createElement("div", _extends({}, style, {
ref: containerRef
}), resultComponents);
}
Highlighter.propTypes = {
selectionStart: PropTypes.number,
selectionEnd: PropTypes.number,
value: PropTypes.string.isRequired,
onCaretPositionChange: PropTypes.func.isRequired,
containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
})]),
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
};
var styled = createDefaultStyle({
position: 'relative',
boxSizing: 'border-box',
width: '100%',
color: 'transparent',
overflow: 'hidden',
whiteSpace: 'pre-wrap',
wordWrap: 'break-word',
border: '1px solid transparent',
textAlign: 'start',
'&singleLine': {
whiteSpace: 'pre',
wordWrap: null
},
substring: {
visibility: 'hidden'
}
}, function (props) {
return {
'&singleLine': props.singleLine
};
});
var Highlighter$1 = styled(Highlighter);
function Suggestion(_ref) {
var id = _ref.id,
focused = _ref.focused,
ignoreAccents = _ref.ignoreAccents,
index = _ref.index,
onClick = _ref.onClick,
onMouseEnter = _ref.onMouseEnter,
query = _ref.query,
renderSuggestion = _ref.renderSuggestion,
suggestion = _ref.suggestion,
style = _ref.style,
className = _ref.className,
classNames = _ref.classNames;
var rest = {
onClick: onClick,
onMouseEnter: onMouseEnter
};
var renderContent = function renderContent() {
var display = getDisplay();
var highlightedDisplay = renderHighlightedDisplay(display);
if (renderSuggestion) {
return renderSuggestion(suggestion, query, highlightedDisplay, index, focused);
}
return highlightedDisplay;
};
var getDisplay = function getDisplay() {
if (typeof suggestion === 'string') {
return suggestion;
}
var id = suggestion.id,
display = suggestion.display;
if (id === undefined || !display) {
return id;
}
return display;
};
var renderHighlightedDisplay = function renderHighlightedDisplay(display) {
var i = getSubstringIndex(display, query, ignoreAccents);
if (i === -1) {
return /*#__PURE__*/React.createElement("span", style('display'), display);
}
return /*#__PURE__*/React.createElement("span", style('display'), display.substring(0, i), /*#__PURE__*/React.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
};
return /*#__PURE__*/React.createElement("li", _extends({
id: id,
role: "option",
"aria-selected": focused
}, rest, style), renderContent());
}
Suggestion.propTypes = {
id: PropTypes.string.isRequired,
query: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
ignoreAccents: PropTypes.bool,
suggestion: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
display: PropTypes.string
})]).isRequired,
renderSuggestion: PropTypes.func,
focused: PropTypes.bool
};
var styled$1 = createDefaultStyle({
cursor: 'pointer'
}, function (props) {
return {
'&focused': props.focused
};
});
var Suggestion$1 = styled$1(Suggestion);
function LoadingIndicator(_ref) {
var style = _ref.style,
className = _ref.className,
classNames = _ref.classNames;
var styles = useStyles(defaultstyle, {
style: style,
className: className,
classNames: classNames
});
var spinnerStyles = styles('spinner');
return /*#__PURE__*/React.createElement("div", styles, /*#__PURE__*/React.createElement("div", spinnerStyles, /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element1'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element2'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element3'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element4'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element5']))));
}
var defaultstyle = {};
function SuggestionsOverlay(_ref) {
var id = _ref.id,
_ref$suggestions = _ref.suggestions,
suggestions = _ref$suggestions === void 0 ? {} : _ref$suggestions,
a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel,
focusIndex = _ref.focusIndex,
position = _ref.position,
left = _ref.left,
right = _ref.right,
top = _ref.top,
scrollFocusedIntoView = _ref.scrollFocusedIntoView,
isLoading = _ref.isLoading,
isOpened = _ref.isOpened,
_ref$onSelect = _ref.onSelect,
onSelect = _ref$onSelect === void 0 ? function () {
return null;
} : _ref$onSelect,
ignoreAccents = _ref.ignoreAccents,
containerRef = _ref.containerRef,
children = _ref.children,
style = _ref.style,
customSuggestionsContainer = _ref.customSuggestionsContainer,
onMouseDown = _ref.onMouseDown,
onMouseEnter = _ref.onMouseEnter;
var _useState = useState(undefined),
_useState2 = _slicedToArray(_useState, 2),
ulElement = _useState2[0],
setUlElement = _useState2[1];
useEffect(function () {
if (!ulElement || ulElement.offsetHeight >= ulElement.scrollHeight || !scrollFocusedIntoView) {
return;
}
var scrollTop = ulElement.scrollTop;
var _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(),
top = _ulElement$children$f.top,
bottom = _ulElement$children$f.bottom;
var _ulElement$getBoundin = ulElement.getBoundingClientRect(),
topContainer = _ulElement$getBoundin.top;
top = top - topContainer + scrollTop;
bottom = bottom - topContainer + scrollTop;
if (top < scrollTop) {
ulElement.scrollTop = top;
} else if (bottom > ulElement.offsetHeight) {
ulElement.scrollTop = bottom - ulElement.offsetHeight;
}
}, [focusIndex, scrollFocusedIntoView, ulElement]);
var renderSuggestions = function renderSuggestions() {
var suggestionsToRender = /*#__PURE__*/React.createElement("ul", _extends({
ref: setUlElement,
id: id,
role: "listbox",
"aria-label": a11ySuggestionsListLabel
}, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
var results = _ref2.results,
queryInfo = _ref2.queryInfo;
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
return renderSuggestion(result, queryInfo, accResults.length + index);
})));
}, []));
if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
return suggestionsToRender;
};
var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
var isFocused = index === focusIndex;
var childIndex = queryInfo.childIndex,
query = queryInfo.query;
var renderSuggestion = Children.toArray(children)[childIndex].props.renderSuggestion;
return /*#__PURE__*/React.createElement(Suggestion$1, {
style: style('item'),
key: "".concat(childIndex, "-").concat(getID(result)),
id: getSuggestionHtmlId(id, index),
query: query,
index: index,
ignoreAccents: ignoreAccents,
renderSuggestion: renderSuggestion,
suggestion: result,
focused: isFocused,
onClick: function onClick() {
return select(result, queryInfo);
},
onMouseEnter: function onMouseEnter() {
return handleMouseEnter(index);
}
});
};
var renderLoadingIndicator = function renderLoadingIndicator() {
if (!isLoading) {
return;
}
return /*#__PURE__*/React.createElement(LoadingIndicator, {
style: style('loadingIndicator')
});
};
var handleMouseEnter = function handleMouseEnter(index, ev) {
if (onMouseEnter) {
onMouseEnter(index);
}
};
var select = function select(suggestion, queryInfo) {
onSelect(suggestion, queryInfo);
};
var getID = function getID(suggestion) {
if (typeof suggestion === 'string') {
return suggestion;
}
return suggestion.id;
};
if (!isOpened) {
return null;
}
return /*#__PURE__*/React.createElement("div", _extends({}, inline({
position: position || 'absolute',
left: left,
right: right,
top: top
}, style), {
onMouseDown: onMouseDown,
ref: containerRef
}), renderSuggestions(), renderLoadingIndicator());
}
SuggestionsOverlay.propTypes = {
id: PropTypes.string.isRequired,
suggestions: PropTypes.object.isRequired,
a11ySuggestionsListLabel: PropTypes.string,
focusIndex: PropTypes.number,
position: PropTypes.string,
left: PropTypes.number,
right: PropTypes.number,
top: PropTypes.number,
scrollFocusedIntoView: PropTypes.bool,
isLoading: PropTypes.bool,
isOpened: PropTypes.bool.isRequired,
onSelect: PropTypes.func,
ignoreAccents: PropTypes.bool,
customSuggestionsContainer: PropTypes.func,
containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
})])
};
var styled$2 = createDefaultStyle({
zIndex: 1,
backgroundColor: 'white',
marginTop: 14,
minWidth: 100,
list: {
margin: 0,
padding: 0,
listStyleType: 'none'
}
});
var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var makeTriggerRegex = function makeTriggerRegex(trigger) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (trigger instanceof RegExp) {
return trigger;
} else {
var allowSpaceInQuery = options.allowSpaceInQuery;
var escapedTriggerChar = escapeRegex(trigger); // first capture group is the part to be replaced on completion
// second capture group is for extracting the search query
return new RegExp("(?:^|\\s)(".concat(escapedTriggerChar, "([^").concat(allowSpaceInQuery ? '' : '\\s').concat(escapedTriggerChar, "]*))$"));
}
};
var getDataProvider = function getDataProvider(data, ignoreAccents) {
if (data instanceof Array) {
// if data is an array, create a function to query that
return function (query, callback) {
var results = [];
for (var i = 0, l = data.length; i < l; ++i) {
var display = data[i].display || data[i].id;
if (getSubstringIndex(display, query, ignoreAccents) >= 0) {
results.push(data[i]);
}
}
return results;
};
} else {
// expect data to be a query function
return data;
}
};
var KEY = {
TAB: 9,
RETURN: 13,
ESC: 27,
UP: 38,
DOWN: 40
};
var isComposing = false;
var propTypes = {
/**
* If set to `true` a regular text input element will be rendered
* instead of a textarea
*/
singleLine: PropTypes.bool,
allowSpaceInQuery: PropTypes.bool,
allowSuggestionsAboveCursor: PropTypes.bool,
forceSuggestionsAboveCursor: PropTypes.bool,
ignoreAccents: PropTypes.bool,
a11ySuggestionsListLabel: PropTypes.string,
value: PropTypes.string,
onKeyDown: PropTypes.func,
customSuggestionsContainer: PropTypes.func,
onSelect: PropTypes.func,
onBlur: PropTy