emoji-picker-react 4.6.1-rc.1 → 4.6.1

package/dist/DomUtils/classNames.d.ts

@@ -21,4 +21,3 @@ export declare enum ClassNames {
     autoTheme = "epr-auto-theme"
 }
 export declare function asSelectors(...classNames: ClassNames[]): string;
-export declare function clsx(...args: any[]): string;

package/dist/emoji-picker-react.cjs.development.js

@@ -42,35 +42,6 @@ function asSelectors() {
     return "." + c;
   }).join('');
 }
-function clsx() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
-
-  var classes = args.reduce(function (classes, arg) {
-    if (typeof arg === 'string') {
-      classes.push(arg);
-    }
-
-    if (Array.isArray(arg)) {
-      classes.push(clsx.apply(void 0, arg));
-    }
-
-    if (typeof arg === 'object') {
-      Object.entries(arg).forEach(function (_ref) {
-        var key = _ref[0],
-            value = _ref[1];
-
-        if (value) {
-          classes.push(key);
-        }
-      });
-    }
-
-    return classes;
-  }, []);
-  return classes.filter(Boolean).join(' ');
-}
 
 var stylesheet = /*#__PURE__*/flairup.createSheet('epr');
 
@@ -18258,7 +18229,8 @@ function getStatusSearchResults(filterState, searchTerm) {
   var _Object$entries;
 
   if (!(filterState != null && filterState[searchTerm])) return '';
-  var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0;
+  var searchResultsCount = ((_Object$entries = Object.entries(filterState == null ? void 0 : filterState[searchTerm])) == null ? void 0 : _Object$entries.length) || 0; // eslint-disable-next-line react-hooks/rules-of-hooks
+
   return useSearchResultsConfig(searchResultsCount);
 }
 
@@ -18283,12 +18255,12 @@ function Button(props) {
   return React.createElement("button", Object.assign({
     type: "button"
   }, props, {
-    className: clsx('epr-btn', props.className)
+    className: flairup.cx('epr-btn', props.className)
   }), props.children);
 }
 
 function ClickableEmojiButton(_ref) {
-  var _clsx;
+  var _cx;
 
   var emojiNames = _ref.emojiNames,
       unified = _ref.unified,
@@ -18299,7 +18271,7 @@ function ClickableEmojiButton(_ref) {
       hasVariations = _ref.hasVariations,
       children = _ref.children;
   return React.createElement(Button, {
-    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden && !hiddenOnSearch, _clsx[ClassNames.emojiHasVariations] = hasVariations && showVariations, _clsx)),
+    className: flairup.cx(ClassNames.emoji, (_cx = {}, _cx[ClassNames.hidden] = hidden, _cx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx[ClassNames.emojiHasVariations] = hasVariations && showVariations, _cx)),
     "data-unified": unified,
     "aria-label": emojiNames[0],
     "data-full-name": emojiNames
@@ -18316,7 +18288,7 @@ function EmojiImg(_ref) {
   return React.createElement("img", {
     src: imgUrl,
     alt: emojiName,
-    className: clsx(ClassNames.external, 'epr-emoji-img'),
+    className: flairup.cx(ClassNames.external, 'epr-emoji-img'),
     loading: lazyLoad ? 'lazy' : 'eager',
     onError: onError,
     style: style
@@ -18327,7 +18299,7 @@ function NativeEmoji(_ref) {
   var unified = _ref.unified,
       style = _ref.style;
   return React.createElement("span", {
-    className: clsx(ClassNames.external, 'epr-emoji-native'),
+    className: flairup.cx(ClassNames.external, 'epr-emoji-native'),
     "data-unified": unified,
     style: style
   }, parseNativeEmoji(unified));
@@ -18417,7 +18389,7 @@ function ClickableEmoji(_ref) {
 }
 
 function EmojiCategory(_ref) {
-  var _clsx;
+  var _cx;
 
   var categoryConfig = _ref.categoryConfig,
       children = _ref.children,
@@ -18426,7 +18398,7 @@ function EmojiCategory(_ref) {
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return React.createElement("li", {
-    className: clsx(ClassNames.category, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx)),
+    className: flairup.cx(ClassNames.category, (_cx = {}, _cx[ClassNames.hidden] = hidden, _cx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _cx)),
     "data-name": category,
     "aria-label": categoryName
   }, React.createElement("h2", {
@@ -18716,7 +18688,7 @@ function EmojiVariationPicker() {
 
   return React.createElement("div", {
     ref: VariationPickerRef,
-    className: clsx(ClassNames.variationPicker, {
+    className: flairup.cx(ClassNames.variationPicker, {
       visible: visible,
       'pointing-up': getMenuDirection() === Direction.Down
     }),
@@ -18930,7 +18902,7 @@ function Flex(_ref) {
       direction = _ref$direction === void 0 ? FlexDirection.ROW : _ref$direction;
   return React.createElement("div", {
     style: _extends({}, style),
-    className: clsx('Flex', className, direction)
+    className: flairup.cx('Flex', className, direction)
   }, children);
 }
 
@@ -18942,7 +18914,7 @@ function Space(_ref) {
     style: _extends({
       flex: 1
     }, style),
-    className: clsx(className)
+    className: flairup.cx(className)
   });
 }
 
@@ -18986,7 +18958,7 @@ function SkinTonePickerMenu() {
   })));
 }
 function SkinTonePicker(_ref) {
-  var _clsx;
+  var _cx;
 
   var _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? SkinTonePickerDirection.HORIZONTAL : _ref$direction;
@@ -19012,7 +18984,7 @@ function SkinTonePicker(_ref) {
   var expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
   var vertical = direction === SkinTonePickerDirection.VERTICAL;
   return React.createElement(Relative, {
-    className: clsx('epr-skin-tones', direction, (_clsx = {}, _clsx[ClassNames.open] = isOpen, _clsx)),
+    className: flairup.cx('epr-skin-tones', direction, (_cx = {}, _cx[ClassNames.open] = isOpen, _cx)),
     style: vertical ? {
       flexBasis: expandedSize,
       height: expandedSize
@@ -19023,12 +18995,12 @@ function SkinTonePicker(_ref) {
     className: "epr-skin-tone-select",
     ref: SkinTonePickerRef
   }, skinToneVariations.map(function (skinToneVariation, i) {
-    var _clsx2;
+    var _cx2;
 
     var active = skinToneVariation === activeSkinTone;
     return React.createElement(Button, {
       style: {
-        transform: clsx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
+        transform: flairup.cx(vertical ? "translateY(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)" : "translateX(-" + i * (isOpen ? ITEM_SIZE : 0) + "px)", isOpen && active && 'scale(1.3)')
       },
       onClick: function onClick() {
         if (isOpen) {
@@ -19041,7 +19013,7 @@ function SkinTonePicker(_ref) {
         closeAllOpenToggles();
       },
       key: skinToneVariation,
-      className: clsx("epr-tone-" + skinToneVariation, 'epr-tone', (_clsx2 = {}, _clsx2[ClassNames.active] = active, _clsx2)),
+      className: flairup.cx("epr-tone-" + skinToneVariation, 'epr-tone', (_cx2 = {}, _cx2[ClassNames.active] = active, _cx2)),
       tabIndex: isOpen ? 0 : -1,
       "aria-pressed": active,
       "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
@@ -19215,13 +19187,13 @@ function CategoryNavigation() {
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
   return React.createElement("div", {
-    className: 'epr-category-nav',
-    role: 'tablist',
-    "aria-label": 'Category navigation',
-    id: 'epr-category-nav-id',
+    className: "epr-category-nav",
+    role: "tablist",
+    "aria-label": "Category navigation",
+    id: "epr-category-nav-id",
     ref: CategoryNavigationRef
   }, categoriesConfig.map(function (categoryConfig) {
-    var _clsx;
+    var _cx;
 
     var category = categoryFromCategoryConfig(categoryConfig);
     var isActiveCategory = category === activeCategory;
@@ -19232,7 +19204,7 @@ function CategoryNavigation() {
 
     return React.createElement(Button, {
       tabIndex: isSearchMode || isActiveCategory ? -1 : 0,
-      className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = isActiveCategory, _clsx)),
+      className: flairup.cx('epr-cat-btn', "epr-icn-" + category, (_cx = {}, _cx[ClassNames.active] = isActiveCategory, _cx)),
       key: category,
       onClick: function onClick() {
         setActiveCategory(category);
@@ -19240,8 +19212,8 @@ function CategoryNavigation() {
       },
       "aria-label": categoryNameFromCategoryConfig(categoryConfig),
       "aria-selected": isActiveCategory,
-      role: 'tab',
-      "aria-controls": 'epr-category-nav-id'
+      role: "tab",
+      "aria-controls": "epr-category-nav-id"
     });
   }));
 }
@@ -19318,14 +19290,14 @@ function Search() {
     ref: SearchInputRef
   }), searchTerm ? React.createElement("div", {
     role: "status",
-    className: clsx('epr-status-search-results', 'epr-status-visually-hidden'),
+    className: flairup.cx('epr-status-search-results', 'epr-status-visually-hidden'),
     "aria-live": "polite",
     id: "epr-search-id",
     "aria-atomic": "true"
   }, statusSearchResults) : null, React.createElement("div", {
     className: "epr-icn-search"
   }), React.createElement(Button, {
-    className: clsx('epr-btn-clear-search', 'epr-visible-on-search-only'),
+    className: flairup.cx('epr-btn-clear-search', 'epr-visible-on-search-only'),
     onClick: clearSearch,
     "aria-label": "Clear",
     title: "Clear"
@@ -19831,7 +19803,7 @@ function PickerMain(_ref) {
 }
 
 function PickerRootElement(_ref2) {
-  var _clsx;
+  var _cx;
 
   var children = _ref2.children;
   var theme = useThemeConfig();
@@ -19842,7 +19814,7 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   return React.createElement("aside", {
-    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx[ClassNames.darkTheme] = theme === exports.Theme.DARK, _clsx[ClassNames.autoTheme] = theme === exports.Theme.AUTO, _clsx), className),
+    className: flairup.cx(ClassNames.emojiPicker, 'epr-main', (_cx = {}, _cx[ClassNames.searchActive] = searchModeActive, _cx[ClassNames.darkTheme] = theme === exports.Theme.DARK, _cx[ClassNames.autoTheme] = theme === exports.Theme.AUTO, _cx), className),
     ref: PickerMainRef,
     style: style
   }, children);