emoji-picker-react 4.5.7 → 4.5.9

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.
@@ -1,4 +1,4 @@
1
- import React__default, { useRef, createElement, createContext, createRef, useContext, useState, useMemo, useEffect, useCallback, Fragment, memo, Component } from 'react';
1
+ import React__default, { useRef, createElement, createContext, createRef, useContext, useState, useEffect, useMemo, useCallback, Fragment, memo, Component } from 'react';
2
2
 
3
3
  var ClassNames;
4
4
 
@@ -16891,6 +16891,10 @@ function activeVariationFromUnified(unified) {
16891
16891
 
16892
16892
  var KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
16893
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;
16894
16898
  function mergeConfig(userConfig) {
16895
16899
  var _userConfig$previewCo, _config$customEmojis;
16896
16900
 
@@ -16947,14 +16951,30 @@ function PickerConfigProvider(_ref) {
16947
16951
  var children = _ref.children,
16948
16952
  config = _objectWithoutPropertiesLoose(_ref, _excluded);
16949
16953
 
16954
+ var mergedConfig = useSetConfig(config);
16955
+ return createElement(ConfigContext.Provider, {
16956
+ value: mergedConfig
16957
+ }, children);
16958
+ }
16959
+ function useSetConfig(config) {
16960
+ var _config$customEmojis2;
16961
+
16950
16962
  var _React$useState = useState(function () {
16951
16963
  return mergeConfig(config);
16952
16964
  }),
16953
- mergedConfig = _React$useState[0];
16965
+ mergedConfig = _React$useState[0],
16966
+ setMergedConfig = _React$useState[1];
16954
16967
 
16955
- return createElement(ConfigContext.Provider, {
16956
- value: mergedConfig
16957
- }, children);
16968
+ useEffect(function () {
16969
+ var _config$customEmojis, _mergedConfig$customE;
16970
+
16971
+ if (((_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length) !== ((_mergedConfig$customE = mergedConfig.customEmojis) == null ? void 0 : _mergedConfig$customE.length)) {
16972
+ setMergedConfig(mergeConfig(config));
16973
+ } // not gonna...
16974
+ // eslint-disable-next-line react-hooks/exhaustive-deps
16975
+
16976
+ }, [(_config$customEmojis2 = config.customEmojis) == null ? void 0 : _config$customEmojis2.length]);
16977
+ return mergedConfig;
16958
16978
  }
16959
16979
  function usePickerConfig() {
16960
16980
  return useContext(ConfigContext);
@@ -17099,6 +17119,17 @@ function getDimension(dimensionConfig) {
17099
17119
  return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
17100
17120
  }
17101
17121
 
17122
+ function useSearchResultsConfig(searchResultsCount) {
17123
+ var hasResults = searchResultsCount > 0;
17124
+ var isPlural = searchResultsCount > 1;
17125
+
17126
+ if (hasResults) {
17127
+ return isPlural ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString()) : SEARCH_RESULTS_ONE_RESULT_FOUND;
17128
+ }
17129
+
17130
+ return SEARCH_RESULTS_NO_RESULTS_FOUND;
17131
+ }
17132
+
17102
17133
  function useDebouncedState(initialValue, delay) {
17103
17134
  if (delay === void 0) {
17104
17135
  delay = 0;
@@ -18096,10 +18127,12 @@ function useFilter() {
18096
18127
  var _useSearchTermState = useSearchTermState(),
18097
18128
  searchTerm = _useSearchTermState[0];
18098
18129
 
18130
+ var statusSearchResults = getStatusSearchResults(filterRef.current, searchTerm);
18099
18131
  return {
18100
18132
  onChange: onChange,
18101
18133
  searchTerm: searchTerm,
18102
- SearchInputRef: SearchInputRef
18134
+ SearchInputRef: SearchInputRef,
18135
+ statusSearchResults: statusSearchResults
18103
18136
  };
18104
18137
 
18105
18138
  function onChange(inputValue) {
@@ -18213,6 +18246,14 @@ function getNormalizedSearchTerm(str) {
18213
18246
  return str.trim().toLowerCase();
18214
18247
  }
18215
18248
 
18249
+ function getStatusSearchResults(filterState, searchTerm) {
18250
+ var _Object$entries;
18251
+
18252
+ if (!(filterState != null && filterState[searchTerm])) return '';
18253
+ var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0;
18254
+ return useSearchResultsConfig(searchResultsCount);
18255
+ }
18256
+
18216
18257
  function useIsEmojiHidden() {
18217
18258
  var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
18218
18259
  emojisThatFailedToLoad = _useEmojisThatFailedT[0];
@@ -18397,7 +18438,7 @@ function ClickableEmoji(_ref) {
18397
18438
  }));
18398
18439
  }
18399
18440
 
18400
- 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)}";
18441
+ 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)}";
18401
18442
  styleInject(css_248z$1);
18402
18443
 
18403
18444
  function EmojiCategory(_ref) {
@@ -18413,7 +18454,7 @@ function EmojiCategory(_ref) {
18413
18454
  className: clsx(ClassNames.category, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx)),
18414
18455
  "data-name": category,
18415
18456
  "aria-label": categoryName
18416
- }, createElement("div", {
18457
+ }, createElement("h2", {
18417
18458
  className: ClassNames.label
18418
18459
  }, categoryName), createElement("div", {
18419
18460
  className: ClassNames.categoryContent
@@ -19211,26 +19252,33 @@ function CategoryNavigation() {
19211
19252
  var CategoryNavigationRef = useCategoryNavigationRef();
19212
19253
  var hideCustomCategory = useShouldHideCustomEmojis();
19213
19254
  return createElement("div", {
19214
- className: "epr-category-nav",
19255
+ className: 'epr-category-nav',
19256
+ role: 'tablist',
19257
+ "aria-label": 'Category navigation',
19258
+ id: 'epr-category-nav-id',
19215
19259
  ref: CategoryNavigationRef
19216
19260
  }, categoriesConfig.map(function (categoryConfig) {
19217
19261
  var _clsx;
19218
19262
 
19219
19263
  var category = categoryFromCategoryConfig(categoryConfig);
19264
+ var isActiveCategory = category === activeCategory;
19220
19265
 
19221
19266
  if (isCustomCategory(categoryConfig) && hideCustomCategory) {
19222
19267
  return null;
19223
19268
  }
19224
19269
 
19225
19270
  return createElement(Button, {
19226
- tabIndex: isSearchMode ? -1 : 0,
19227
- className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = category === activeCategory, _clsx)),
19271
+ tabIndex: isSearchMode || isActiveCategory ? -1 : 0,
19272
+ className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = isActiveCategory, _clsx)),
19228
19273
  key: category,
19229
19274
  onClick: function onClick() {
19230
19275
  setActiveCategory(category);
19231
19276
  scrollCategoryIntoView(category);
19232
19277
  },
19233
- "aria-label": categoryNameFromCategoryConfig(categoryConfig)
19278
+ "aria-label": categoryNameFromCategoryConfig(categoryConfig),
19279
+ "aria-selected": isActiveCategory,
19280
+ role: 'tab',
19281
+ "aria-controls": 'epr-category-nav-id'
19234
19282
  });
19235
19283
  }));
19236
19284
  }
@@ -19238,7 +19286,7 @@ function CategoryNavigation() {
19238
19286
  var css_248z$9 = ".EmojiPickerReact .epr-header .epr-header-overlay{padding:var(--epr-header-padding);z-index:var(--epr-header-overlay-z-index)}";
19239
19287
  styleInject(css_248z$9);
19240
19288
 
19241
- 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)}";
19289
+ 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)}";
19242
19290
  styleInject(css_248z$a);
19243
19291
 
19244
19292
  function SearchContainer() {
@@ -19265,6 +19313,8 @@ function Search() {
19265
19313
  var autoFocus = useAutoFocusSearchConfig();
19266
19314
 
19267
19315
  var _useFilter = useFilter(),
19316
+ statusSearchResults = _useFilter.statusSearchResults,
19317
+ searchTerm = _useFilter.searchTerm,
19268
19318
  _onChange = _useFilter.onChange;
19269
19319
 
19270
19320
  var input = SearchInputRef == null ? void 0 : SearchInputRef.current;
@@ -19280,6 +19330,7 @@ function Search() {
19280
19330
  onFocus: closeAllOpenToggles,
19281
19331
  className: "epr-search",
19282
19332
  type: "text",
19333
+ "aria-controls": 'epr-search-id',
19283
19334
  placeholder: placeholder,
19284
19335
  onChange: function onChange(event) {
19285
19336
  setInc(inc + 1);
@@ -19290,7 +19341,13 @@ function Search() {
19290
19341
  });
19291
19342
  },
19292
19343
  ref: SearchInputRef
19293
- }), createElement("div", {
19344
+ }), searchTerm ? createElement("div", {
19345
+ role: 'status',
19346
+ className: clsx('epr-status-search-results', 'epr-status-visually-hidden'),
19347
+ "aria-live": 'polite',
19348
+ id: 'epr-search-id',
19349
+ "aria-atomic": 'true'
19350
+ }, statusSearchResults) : null, createElement("div", {
19294
19351
  className: "epr-icn-search"
19295
19352
  }), createElement(Button, {
19296
19353
  className: clsx('epr-btn-clear-search', 'epr-visible-on-search-only'),
@@ -19845,7 +19902,11 @@ function EmojiPicker(props) {
19845
19902
 
19846
19903
 
19847
19904
  var EmojiPickerReact = /*#__PURE__*/memo(EmojiPicker, function (prev, next) {
19848
- return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.height === next.height && prev.width === next.width && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation;
19905
+ var _prev$customEmojis, _next$customEmojis;
19906
+
19907
+ var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
19908
+ var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
19909
+ return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.height === next.height && prev.width === next.width && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
19849
19910
  });
19850
19911
 
19851
19912
  var ErrorBoundary = /*#__PURE__*/function (_React$Component) {