emoji-picker-react 4.5.6 → 4.5.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/config/config.d.ts +4 -0
- package/dist/config/useConfig.d.ts +1 -0
- package/dist/emoji-picker-react.cjs.development.css +3 -3
- package/dist/emoji-picker-react.cjs.development.js +59 -9
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +62 -12
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/dist/hooks/useFilter.d.ts +1 -0
- package/package.json +1 -1
- package/src/DomUtils/selectors.ts +3 -3
- package/src/components/body/EmojiCategory.css +2 -0
- package/src/components/body/EmojiCategory.tsx +1 -1
- package/src/components/emoji/Emoji.css +4 -0
- package/src/components/footer/Preview.tsx +8 -7
- package/src/components/header/Search.css +10 -0
- package/src/components/header/Search.tsx +13 -1
- package/src/components/navigation/CategoryNavigation.tsx +13 -3
- package/src/config/config.ts +7 -0
- package/src/config/useConfig.ts +16 -0
- package/src/dataUtils/emojiSelectors.ts +7 -0
- package/src/hooks/useFilter.ts +10 -0
|
@@ -16872,6 +16872,13 @@ var allEmojisByUnified = {};
|
|
|
16872
16872
|
setTimeout(function () {
|
|
16873
16873
|
allEmojis.reduce(function (allEmojis, Emoji) {
|
|
16874
16874
|
allEmojis[emojiUnified(Emoji)] = Emoji;
|
|
16875
|
+
|
|
16876
|
+
if (emojiHasVariations(Emoji)) {
|
|
16877
|
+
emojiVariations(Emoji).forEach(function (variation) {
|
|
16878
|
+
allEmojis[variation] = Emoji;
|
|
16879
|
+
});
|
|
16880
|
+
}
|
|
16881
|
+
|
|
16875
16882
|
return allEmojis;
|
|
16876
16883
|
}, allEmojisByUnified);
|
|
16877
16884
|
});
|
|
@@ -16884,6 +16891,10 @@ function activeVariationFromUnified(unified) {
|
|
|
16884
16891
|
|
|
16885
16892
|
var KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
|
|
16886
16893
|
var DEFAULT_SEARCH_PLACEHOLDER = 'Search';
|
|
16894
|
+
var SEARCH_RESULTS_NO_RESULTS_FOUND = 'No results found';
|
|
16895
|
+
var SEARCH_RESULTS_SUFFIX = ' found. Use up and down arrow keys to navigate.';
|
|
16896
|
+
var SEARCH_RESULTS_ONE_RESULT_FOUND = '1 result' + SEARCH_RESULTS_SUFFIX;
|
|
16897
|
+
var SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND = '%n results' + SEARCH_RESULTS_SUFFIX;
|
|
16887
16898
|
function mergeConfig(userConfig) {
|
|
16888
16899
|
var _userConfig$previewCo, _config$customEmojis;
|
|
16889
16900
|
|
|
@@ -17092,6 +17103,17 @@ function getDimension(dimensionConfig) {
|
|
|
17092
17103
|
return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
|
|
17093
17104
|
}
|
|
17094
17105
|
|
|
17106
|
+
function useSearchResultsConfig(searchResultsCount) {
|
|
17107
|
+
var hasResults = searchResultsCount > 0;
|
|
17108
|
+
var isPlural = searchResultsCount > 1;
|
|
17109
|
+
|
|
17110
|
+
if (hasResults) {
|
|
17111
|
+
return isPlural ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString()) : SEARCH_RESULTS_ONE_RESULT_FOUND;
|
|
17112
|
+
}
|
|
17113
|
+
|
|
17114
|
+
return SEARCH_RESULTS_NO_RESULTS_FOUND;
|
|
17115
|
+
}
|
|
17116
|
+
|
|
17095
17117
|
function useDebouncedState(initialValue, delay) {
|
|
17096
17118
|
if (delay === void 0) {
|
|
17097
17119
|
delay = 0;
|
|
@@ -17446,7 +17468,7 @@ function emojiFromElement(element) {
|
|
|
17446
17468
|
return [];
|
|
17447
17469
|
}
|
|
17448
17470
|
|
|
17449
|
-
var emoji = emojiByUnified(originalUnified);
|
|
17471
|
+
var emoji = emojiByUnified(unified != null ? unified : originalUnified);
|
|
17450
17472
|
|
|
17451
17473
|
if (!emoji) {
|
|
17452
17474
|
return [];
|
|
@@ -18089,10 +18111,12 @@ function useFilter() {
|
|
|
18089
18111
|
var _useSearchTermState = useSearchTermState(),
|
|
18090
18112
|
searchTerm = _useSearchTermState[0];
|
|
18091
18113
|
|
|
18114
|
+
var statusSearchResults = getStatusSearchResults(filterRef.current, searchTerm);
|
|
18092
18115
|
return {
|
|
18093
18116
|
onChange: onChange,
|
|
18094
18117
|
searchTerm: searchTerm,
|
|
18095
|
-
SearchInputRef: SearchInputRef
|
|
18118
|
+
SearchInputRef: SearchInputRef,
|
|
18119
|
+
statusSearchResults: statusSearchResults
|
|
18096
18120
|
};
|
|
18097
18121
|
|
|
18098
18122
|
function onChange(inputValue) {
|
|
@@ -18206,6 +18230,14 @@ function getNormalizedSearchTerm(str) {
|
|
|
18206
18230
|
return str.trim().toLowerCase();
|
|
18207
18231
|
}
|
|
18208
18232
|
|
|
18233
|
+
function getStatusSearchResults(filterState, searchTerm) {
|
|
18234
|
+
var _Object$entries;
|
|
18235
|
+
|
|
18236
|
+
if (!(filterState != null && filterState[searchTerm])) return '';
|
|
18237
|
+
var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0;
|
|
18238
|
+
return useSearchResultsConfig(searchResultsCount);
|
|
18239
|
+
}
|
|
18240
|
+
|
|
18209
18241
|
function useIsEmojiHidden() {
|
|
18210
18242
|
var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
|
|
18211
18243
|
emojisThatFailedToLoad = _useEmojisThatFailedT[0];
|
|
@@ -18250,7 +18282,7 @@ function styleInject(css, ref) {
|
|
|
18250
18282
|
}
|
|
18251
18283
|
}
|
|
18252
18284
|
|
|
18253
|
-
var css_248z = ".EmojiPickerReact button.epr-emoji{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;height:var(--epr-emoji-fullsize);justify-content:center;max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);overflow:hidden;position:relative;width:var(--epr-emoji-fullsize)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:1px;content:\"\";display:block;height:0;position:absolute;right:0;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji .epr-emoji-img{max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);min-height:var(--epr-emoji-fullsize);min-width:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji .epr-emoji-native{padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji>*{align-self:center;display:block;justify-self:center}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.__EmojiPicker__.epr-emoji-img{font-size:0}.__EmojiPicker__.epr-emoji-native{align-self:center;font-family:Segoe UI Emoji,Segoe UI Symbol,Segoe UI,Apple Color Emoji,Twemoji Mozilla,Noto Color Emoji,Android Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);justify-self:center;letter-spacing:0;line-height:100%;position:relative;text-align:center}.EmojiPickerReact button.epr-emoji:hover>*{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus>*{background-color:var(--epr-focus-bg-color)}";
|
|
18285
|
+
var css_248z = ".EmojiPickerReact button.epr-emoji{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;height:var(--epr-emoji-fullsize);justify-content:center;max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);overflow:hidden;position:relative;width:var(--epr-emoji-fullsize)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:1px;content:\"\";display:block;height:0;position:absolute;right:0;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji .epr-emoji-img{max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);min-height:var(--epr-emoji-fullsize);min-width:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji .epr-emoji-native{padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji>*{align-self:center;display:block;justify-self:center}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.__EmojiPicker__.epr-emoji-img{font-size:0}.__EmojiPicker__.epr-emoji-native{align-self:center;font-family:Segoe UI Emoji,Segoe UI Symbol,Segoe UI,Apple Color Emoji,Twemoji Mozilla,Noto Color Emoji,Android Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);justify-self:center;letter-spacing:0;line-height:100%;position:relative;text-align:center}.EmojiPickerReact button.epr-emoji>*{transition:background-color .2s}.EmojiPickerReact button.epr-emoji:hover>*{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus>*{background-color:var(--epr-focus-bg-color)}";
|
|
18254
18286
|
styleInject(css_248z);
|
|
18255
18287
|
|
|
18256
18288
|
function Button(props) {
|
|
@@ -18390,7 +18422,7 @@ function ClickableEmoji(_ref) {
|
|
|
18390
18422
|
}));
|
|
18391
18423
|
}
|
|
18392
18424
|
|
|
18393
|
-
var css_248z$1 = ".EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;margin:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}";
|
|
18425
|
+
var css_248z$1 = ".EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;margin:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-size:16px;font-weight:700;height:var(--epr-category-label-height);margin:0;padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}";
|
|
18394
18426
|
styleInject(css_248z$1);
|
|
18395
18427
|
|
|
18396
18428
|
function EmojiCategory(_ref) {
|
|
@@ -18406,7 +18438,7 @@ function EmojiCategory(_ref) {
|
|
|
18406
18438
|
className: clsx(ClassNames.category, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx)),
|
|
18407
18439
|
"data-name": category,
|
|
18408
18440
|
"aria-label": categoryName
|
|
18409
|
-
}, createElement("
|
|
18441
|
+
}, createElement("h2", {
|
|
18410
18442
|
className: ClassNames.label
|
|
18411
18443
|
}, categoryName), createElement("div", {
|
|
18412
18444
|
className: ClassNames.categoryContent
|
|
@@ -19054,6 +19086,8 @@ function Preview() {
|
|
|
19054
19086
|
}, createElement(PreviewBody, null), createElement(Space, null), isSkinToneInPreview ? createElement(SkinTonePickerMenu, null) : null);
|
|
19055
19087
|
}
|
|
19056
19088
|
function PreviewBody() {
|
|
19089
|
+
var _previewEmoji$unified;
|
|
19090
|
+
|
|
19057
19091
|
var previewConfig = usePreviewConfig();
|
|
19058
19092
|
|
|
19059
19093
|
var _useState = useState(null),
|
|
@@ -19067,7 +19101,7 @@ function PreviewBody() {
|
|
|
19067
19101
|
|
|
19068
19102
|
var getEmojiUrl = useGetEmojiUrlConfig();
|
|
19069
19103
|
useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
|
|
19070
|
-
var emoji = emojiByUnified(previewEmoji == null ? void 0 : previewEmoji.originalUnified);
|
|
19104
|
+
var emoji = emojiByUnified((_previewEmoji$unified = previewEmoji == null ? void 0 : previewEmoji.unified) != null ? _previewEmoji$unified : previewEmoji == null ? void 0 : previewEmoji.originalUnified);
|
|
19071
19105
|
var show = emoji != null && previewEmoji != null;
|
|
19072
19106
|
return createElement(PreviewContent, null);
|
|
19073
19107
|
|
|
@@ -19202,26 +19236,33 @@ function CategoryNavigation() {
|
|
|
19202
19236
|
var CategoryNavigationRef = useCategoryNavigationRef();
|
|
19203
19237
|
var hideCustomCategory = useShouldHideCustomEmojis();
|
|
19204
19238
|
return createElement("div", {
|
|
19205
|
-
className:
|
|
19239
|
+
className: 'epr-category-nav',
|
|
19240
|
+
role: 'tablist',
|
|
19241
|
+
"aria-label": 'Category navigation',
|
|
19242
|
+
id: 'epr-category-nav-id',
|
|
19206
19243
|
ref: CategoryNavigationRef
|
|
19207
19244
|
}, categoriesConfig.map(function (categoryConfig) {
|
|
19208
19245
|
var _clsx;
|
|
19209
19246
|
|
|
19210
19247
|
var category = categoryFromCategoryConfig(categoryConfig);
|
|
19248
|
+
var isActiveCategory = category === activeCategory;
|
|
19211
19249
|
|
|
19212
19250
|
if (isCustomCategory(categoryConfig) && hideCustomCategory) {
|
|
19213
19251
|
return null;
|
|
19214
19252
|
}
|
|
19215
19253
|
|
|
19216
19254
|
return createElement(Button, {
|
|
19217
|
-
tabIndex: isSearchMode ? -1 : 0,
|
|
19218
|
-
className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] =
|
|
19255
|
+
tabIndex: isSearchMode || isActiveCategory ? -1 : 0,
|
|
19256
|
+
className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = isActiveCategory, _clsx)),
|
|
19219
19257
|
key: category,
|
|
19220
19258
|
onClick: function onClick() {
|
|
19221
19259
|
setActiveCategory(category);
|
|
19222
19260
|
scrollCategoryIntoView(category);
|
|
19223
19261
|
},
|
|
19224
|
-
"aria-label": categoryNameFromCategoryConfig(categoryConfig)
|
|
19262
|
+
"aria-label": categoryNameFromCategoryConfig(categoryConfig),
|
|
19263
|
+
"aria-selected": isActiveCategory,
|
|
19264
|
+
role: 'tab',
|
|
19265
|
+
"aria-controls": 'epr-category-nav-id'
|
|
19225
19266
|
});
|
|
19226
19267
|
}));
|
|
19227
19268
|
}
|
|
@@ -19229,7 +19270,7 @@ function CategoryNavigation() {
|
|
|
19229
19270
|
var css_248z$9 = ".EmojiPickerReact .epr-header .epr-header-overlay{padding:var(--epr-header-padding);z-index:var(--epr-header-overlay-z-index)}";
|
|
19230
19271
|
styleInject(css_248z$9);
|
|
19231
19272
|
|
|
19232
|
-
var css_248z$a = ".EmojiPickerReact .epr-search-container{display:block;flex:1;min-width:0}.EmojiPickerReact .epr-search-container input.epr-search{background-color:var(--epr-search-input-bg-color);border:1px solid var(--epr-search-input-bg-color);border-radius:var(--epr-search-input-border-radius);color:var(--epr-search-input-text-color);height:var(--epr-search-input-height);outline:none;padding:var(--epr-search-input-padding);transition:all .2s ease-in-out;width:100%}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-color:transparent;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' xml:space='preserve'%3E%3Cpath fill='%23868686' d='M6.98 13.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 8c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.4a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.2-.21.54 0 .74z'/%3E%3Cpath fill='%23868686' d='M10.15 18.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%233371B7' d='M6.98 33.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 28c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%233371B7' d='M10.15 38.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%23C0C0BF' d='M6.98 53.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 48c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%23C0C0BF' d='M10.15 58.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%236AA9DD' d='M6.98 73.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 68c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%236AA9DD' d='M10.15 78.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:20px;height:20px;width:20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search{align-items:center;border-radius:50%;display:flex;height:30px;justify-content:center;padding:0;position:absolute;right:var(--epr-search-bar-inner-padding);top:50%;transform:translateY(-50%);width:30px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus .epr-icn-clear-search,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover{background:var(--epr-hover-bg-color)}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-position-y:-40px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-60px}.EmojiPickerReact .epr-search-container .epr-icn-search{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' xml:space='preserve'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='M12 8.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 6.73 12 8.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='M12 28.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 26.73 12 28.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:20px;content:\"\";height:20px;left:var(--epr-search-bar-inner-padding);position:absolute;top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container input.epr-search::-moz-placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search::placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search:focus{background-color:var(--epr-search-input-bg-color-active);border:1px solid var(--epr-search-border-color)}";
|
|
19273
|
+
var css_248z$a = ".EmojiPickerReact .epr-search-container{display:block;flex:1;min-width:0}.EmojiPickerReact .epr-search-container .epr-status-visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.EmojiPickerReact .epr-search-container input.epr-search{background-color:var(--epr-search-input-bg-color);border:1px solid var(--epr-search-input-bg-color);border-radius:var(--epr-search-input-border-radius);color:var(--epr-search-input-text-color);height:var(--epr-search-input-height);outline:none;padding:var(--epr-search-input-padding);transition:all .2s ease-in-out;width:100%}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-color:transparent;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' xml:space='preserve'%3E%3Cpath fill='%23868686' d='M6.98 13.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 8c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.4a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.2-.21.54 0 .74z'/%3E%3Cpath fill='%23868686' d='M10.15 18.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%233371B7' d='M6.98 33.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 28c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%233371B7' d='M10.15 38.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%23C0C0BF' d='M6.98 53.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 48c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%23C0C0BF' d='M10.15 58.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%236AA9DD' d='M6.98 73.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 68c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%236AA9DD' d='M10.15 78.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:20px;height:20px;width:20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search{align-items:center;border-radius:50%;display:flex;height:30px;justify-content:center;padding:0;position:absolute;right:var(--epr-search-bar-inner-padding);top:50%;transform:translateY(-50%);width:30px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus .epr-icn-clear-search,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover{background:var(--epr-hover-bg-color)}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-position-y:-40px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-60px}.EmojiPickerReact .epr-search-container .epr-icn-search{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' xml:space='preserve'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='M12 8.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 6.73 12 8.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='M12 28.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 26.73 12 28.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:20px;content:\"\";height:20px;left:var(--epr-search-bar-inner-padding);position:absolute;top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container input.epr-search::-moz-placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search::placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search:focus{background-color:var(--epr-search-input-bg-color-active);border:1px solid var(--epr-search-border-color)}";
|
|
19233
19274
|
styleInject(css_248z$a);
|
|
19234
19275
|
|
|
19235
19276
|
function SearchContainer() {
|
|
@@ -19256,6 +19297,8 @@ function Search() {
|
|
|
19256
19297
|
var autoFocus = useAutoFocusSearchConfig();
|
|
19257
19298
|
|
|
19258
19299
|
var _useFilter = useFilter(),
|
|
19300
|
+
statusSearchResults = _useFilter.statusSearchResults,
|
|
19301
|
+
searchTerm = _useFilter.searchTerm,
|
|
19259
19302
|
_onChange = _useFilter.onChange;
|
|
19260
19303
|
|
|
19261
19304
|
var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
|
|
@@ -19271,6 +19314,7 @@ function Search() {
|
|
|
19271
19314
|
onFocus: closeAllOpenToggles,
|
|
19272
19315
|
className: "epr-search",
|
|
19273
19316
|
type: "text",
|
|
19317
|
+
"aria-controls": 'epr-search-id',
|
|
19274
19318
|
placeholder: placeholder,
|
|
19275
19319
|
onChange: function onChange(event) {
|
|
19276
19320
|
setInc(inc + 1);
|
|
@@ -19281,7 +19325,13 @@ function Search() {
|
|
|
19281
19325
|
});
|
|
19282
19326
|
},
|
|
19283
19327
|
ref: SearchInputRef
|
|
19284
|
-
}), createElement("div", {
|
|
19328
|
+
}), searchTerm ? createElement("div", {
|
|
19329
|
+
role: 'status',
|
|
19330
|
+
className: clsx('epr-status-search-results', 'epr-status-visually-hidden'),
|
|
19331
|
+
"aria-live": 'polite',
|
|
19332
|
+
id: 'epr-search-id',
|
|
19333
|
+
"aria-atomic": 'true'
|
|
19334
|
+
}, statusSearchResults) : null, createElement("div", {
|
|
19285
19335
|
className: "epr-icn-search"
|
|
19286
19336
|
}), createElement(Button, {
|
|
19287
19337
|
className: clsx('epr-btn-clear-search', 'epr-visible-on-search-only'),
|