emoji-picker-react 4.3.0 → 4.4.0-rc.2

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

@@ -24,6 +24,9 @@ var ClassNames;
   ClassNames["emojiList"] = "epr-emoji-list";
   ClassNames["external"] = "__EmojiPicker__";
   ClassNames["emojiPicker"] = "EmojiPickerReact";
+  ClassNames["open"] = "epr-open";
+  ClassNames["vertical"] = "epr-vertical";
+  ClassNames["horizontal"] = "epr-horizontal";
 })(ClassNames || (ClassNames = {}));
 
 function asSelectors() {
@@ -232,6 +235,13 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   Categories["FLAGS"] = "flags";
 })(exports.Categories || (exports.Categories = {}));
 
+var SkinTonePickerLocation;
+
+(function (SkinTonePickerLocation) {
+  SkinTonePickerLocation["SEARCH"] = "SEARCH";
+  SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
+})(SkinTonePickerLocation || (SkinTonePickerLocation = {}));
+
 var CDN_URL_APPLE = 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/';
 var CDN_URL_FACEBOOK = 'https://cdn.jsdelivr.net/npm/emoji-datasource-facebook/img/facebook/64/';
 var CDN_URL_TWITTER = 'https://cdn.jsdelivr.net/npm/emoji-datasource-twitter/img/twitter/64/';
@@ -16777,9 +16787,11 @@ function mergeConfig(userConfig) {
   var categories = mergeCategoriesConfig(userConfig.categories, {
     suggestionMode: config.suggestedEmojisMode
   });
+  var skinTonePickerLocation = config.searchDisabled ? SkinTonePickerLocation.PREVIEW : config.skinTonePickerLocation;
   return _extends({}, config, {
     categories: categories,
-    previewConfig: previewConfig
+    previewConfig: previewConfig,
+    skinTonePickerLocation: skinTonePickerLocation
   });
 }
 function basePickerConfig() {
@@ -16798,7 +16810,9 @@ function basePickerConfig() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     event) {},
     previewConfig: _extends({}, basePreviewConfig),
+    searchDisabled: false,
     searchPlaceHolder: 'Search',
+    skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
     theme: exports.Theme.LIGHT,
@@ -16911,9 +16925,21 @@ function useEmojiVersionConfig() {
 
   return emojiVersion;
 }
-function useGetEmojiUrlConfig() {
+function useSearchDisabledConfig() {
   var _usePickerConfig14 = usePickerConfig(),
-      getEmojiUrl = _usePickerConfig14.getEmojiUrl;
+      searchDisabled = _usePickerConfig14.searchDisabled;
+
+  return searchDisabled;
+}
+function useSkinTonePickerLocationConfig() {
+  var _usePickerConfig15 = usePickerConfig(),
+      skinTonePickerLocation = _usePickerConfig15.skinTonePickerLocation;
+
+  return skinTonePickerLocation;
+}
+function useGetEmojiUrlConfig() {
+  var _usePickerConfig16 = usePickerConfig(),
+      getEmojiUrl = _usePickerConfig16.getEmojiUrl;
 
   return getEmojiUrl;
 }
@@ -18624,6 +18650,15 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }
 
+function useIsSkinToneInSearch() {
+  var skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+  return skinTonePickerLocationConfig === SkinTonePickerLocation.SEARCH;
+}
+function useIsSkinToneInPreview() {
+  var skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+  return skinTonePickerLocationConfig === SkinTonePickerLocation.PREVIEW;
+}
+
 var FlexDirection;
 
 (function (FlexDirection) {
@@ -18644,8 +18679,141 @@ function Flex(_ref) {
   }, children);
 }
 
+function Space(_ref) {
+  var className = _ref.className,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style;
+  return React.createElement("div", {
+    style: _extends({
+      flex: 1
+    }, style),
+    className: clsx(className)
+  });
+}
+
+function Absolute(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      style = _ref.style;
+  return React.createElement("div", {
+    style: _extends({}, style, {
+      position: 'absolute'
+    }),
+    className: className
+  }, children);
+}
+
+function Relative(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      style = _ref.style;
+  return React.createElement("div", {
+    style: _extends({}, style, {
+      position: 'relative'
+    }),
+    className: className
+  }, children);
+}
+
+var ITEM_SIZE = 28;
+function SkinTonePickerMenu() {
+  return React.createElement(Relative, {
+    style: {
+      height: ITEM_SIZE
+    }
+  }, React.createElement(Absolute, {
+    style: {
+      bottom: 0,
+      right: 0
+    }
+  }, React.createElement(SkinTonePicker, {
+    direction: SkinTonePickerDirection.VERTICAL
+  })));
+}
+function SkinTonePicker(_ref) {
+  var _clsx;
+
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? SkinTonePickerDirection.HORIZONTAL : _ref$direction;
+  var SkinTonePickerRef = useSkinTonePickerRef();
+  var isDisabled = useSkinTonesDisabledConfig();
+
+  var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
+      isOpen = _useSkinToneFanOpenSt[0],
+      setIsOpen = _useSkinToneFanOpenSt[1];
+
+  var _useActiveSkinToneSta = useActiveSkinToneState(),
+      activeSkinTone = _useActiveSkinToneSta[0],
+      setActiveSkinTone = _useActiveSkinToneSta[1];
+
+  var closeAllOpenToggles = useCloseAllOpenToggles();
+  var focusSearchInput = useFocusSearchInput();
+
+  if (isDisabled) {
+    return null;
+  }
+
+  var fullWidth = ITEM_SIZE * skinToneVariations.length + "px";
+  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)),
+    style: vertical ? {
+      flexBasis: expandedSize,
+      height: expandedSize
+    } : {
+      flexBasis: expandedSize
+    }
+  }, React.createElement("div", {
+    className: "epr-skin-tone-select",
+    ref: SkinTonePickerRef
+  }, skinToneVariations.map(function (skinToneVariation, i) {
+    var _clsx2;
+
+    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)')
+      },
+      onClick: function onClick() {
+        if (isOpen) {
+          setActiveSkinTone(skinToneVariation);
+          focusSearchInput();
+        } else {
+          setIsOpen(true);
+        }
+
+        closeAllOpenToggles();
+      },
+      key: skinToneVariation,
+      className: clsx("epr-tone-" + skinToneVariation, 'epr-tone', (_clsx2 = {}, _clsx2[ClassNames.active] = active, _clsx2)),
+      tabIndex: isOpen ? 0 : -1,
+      "aria-pressed": active,
+      "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
+    });
+  })));
+}
+var SkinTonePickerDirection;
+
+(function (SkinTonePickerDirection) {
+  SkinTonePickerDirection["VERTICAL"] = "epr-vertical";
+  SkinTonePickerDirection["HORIZONTAL"] = "epr-horizontal";
+})(SkinTonePickerDirection || (SkinTonePickerDirection = {}));
+
 function Preview() {
   var previewConfig = usePreviewConfig();
+  var isSkinToneInPreview = useIsSkinToneInPreview();
+
+  if (!previewConfig.showPreview) {
+    return null;
+  }
+
+  return React.createElement(Flex, {
+    className: "epr-preview"
+  }, React.createElement(PreviewBody, null), React.createElement(Space, null), isSkinToneInPreview ? React.createElement(SkinTonePickerMenu, null) : null);
+}
+function PreviewBody() {
+  var previewConfig = usePreviewConfig();
 
   var _useState = React.useState(null),
       previewEmoji = _useState[0],
@@ -18658,16 +18826,9 @@ function Preview() {
 
   var getEmojiUrl = useGetEmojiUrlConfig();
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
-
-  if (!previewConfig.showPreview) {
-    return null;
-  }
-
   var emoji = emojiByUnified(previewEmoji == null ? void 0 : previewEmoji.originalUnified);
   var show = emoji != null && previewEmoji != null;
-  return React.createElement(Flex, {
-    className: "epr-preview"
-  }, React.createElement(PreviewContent, null));
+  return React.createElement(PreviewContent, null);
 
   function PreviewContent() {
     var defaultEmoji = asEmoji(variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji));
@@ -18692,17 +18853,6 @@ function Preview() {
   }
 }
 
-function Relative(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  return React.createElement("div", {
-    style: {
-      position: 'relative'
-    },
-    className: className
-  }, children);
-}
-
 function categoryNameFromDom($category) {
   var _$category$getAttribu;
 
@@ -18811,6 +18961,18 @@ function CategoryNavigation() {
   }));
 }
 
+function SearchContainer() {
+  var searchDisabled = useSearchDisabledConfig();
+  var isSkinToneInSearch = useIsSkinToneInSearch();
+
+  if (searchDisabled) {
+    return null;
+  }
+
+  return React.createElement(Flex, {
+    className: "epr-header-overlay"
+  }, React.createElement(Search, null), isSkinToneInSearch ? React.createElement(SkinTonePicker, null) : null);
+}
 function Search() {
   var _useState = React.useState(0),
       inc = _useState[0],
@@ -18870,65 +19032,10 @@ function CssSearch(_ref) {
   return React.createElement("style", null, "\n        " + CSS_SEARCH_SELECTOR + " " + asSelectors(ClassNames.category) + ":not(:has(" + searchQuery + ")) {\n        display: none;\n      }\n\n        " + CSS_SEARCH_SELECTOR + " button" + asSelectors(ClassNames.emoji) + ":not(" + searchQuery + ") {\n        display: none;\n      }\n  ");
 }
 
-function SkinTonePicker() {
-  var SkinTonePickerRef = useSkinTonePickerRef();
-  var isDisabled = useSkinTonesDisabledConfig();
-
-  var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
-      isOpen = _useSkinToneFanOpenSt[0],
-      setIsOpen = _useSkinToneFanOpenSt[1];
-
-  var _useActiveSkinToneSta = useActiveSkinToneState(),
-      activeSkinTone = _useActiveSkinToneSta[0],
-      setActiveSkinTone = _useActiveSkinToneSta[1];
-
-  var closeAllOpenToggles = useCloseAllOpenToggles();
-  var focusSearchInput = useFocusSearchInput();
-
-  if (isDisabled) {
-    return null;
-  }
-
-  return React.createElement(Relative, {
-    className: clsx('epr-skin-tones', {
-      open: isOpen
-    })
-  }, React.createElement("div", {
-    className: "epr-skin-tone-select",
-    ref: SkinTonePickerRef
-  }, skinToneVariations.map(function (skinToneVariation, i) {
-    var _clsx;
-
-    var active = skinToneVariation === activeSkinTone;
-    return React.createElement(Button, {
-      style: {
-        transform: clsx("translateX(-" + i * (isOpen ? 28 : 0) + "px)", isOpen && active && 'scale(1.3)')
-      },
-      onClick: function onClick() {
-        if (isOpen) {
-          setActiveSkinTone(skinToneVariation);
-          focusSearchInput();
-        } else {
-          setIsOpen(true);
-        }
-
-        closeAllOpenToggles();
-      },
-      key: skinToneVariation,
-      className: clsx("epr-tone-" + skinToneVariation, 'epr-tone', (_clsx = {}, _clsx[ClassNames.active] = active, _clsx)),
-      tabIndex: isOpen ? 0 : -1,
-      "aria-pressed": active,
-      "aria-label": "Skin tone " + skinTonesNamed[skinToneVariation]
-    });
-  })));
-}
-
 function Header() {
   return React.createElement(Relative, {
     className: "epr-header"
-  }, React.createElement(Flex, {
-    className: "epr-header-overlay"
-  }, React.createElement(Search, null), React.createElement(SkinTonePicker, null)), React.createElement(CategoryNavigation, null));
+  }, React.createElement(SearchContainer, null), React.createElement(CategoryNavigation, null));
 }
 
 function getActiveElement() {
@@ -19010,12 +19117,17 @@ function useSearchInputKeyboardEvents() {
       setSkinToneFanOpenState = _useSkinToneFanOpenSt[1];
 
   var goDownFromSearchInput = useGoDownFromSearchInput();
+  var isSkinToneInSearch = useIsSkinToneInSearch();
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
 
       switch (key) {
         case KeyboardEvents.ArrowRight:
+          if (!isSkinToneInSearch) {
+            return;
+          }
+
           event.preventDefault();
           setSkinToneFanOpenState(true);
           focusSkinTonePicker();
@@ -19057,48 +19169,82 @@ function useSkinTonePickerKeyboardEvents() {
       isOpen = _useSkinToneFanOpenSt2[0],
       setIsOpen = _useSkinToneFanOpenSt2[1];
 
+  var isSkinToneInPreview = useIsSkinToneInPreview();
+  var isSkinToneInSearch = useIsSkinToneInSearch();
   var onType = useOnType();
   var onKeyDown = React.useMemo(function () {
-    return function onKeyDown(event) {
-      var key = event.key;
+    return (// eslint-disable-next-line complexity
+      function onKeyDown(event) {
+        var key = event.key;
 
-      switch (key) {
-        case KeyboardEvents.ArrowLeft:
-          event.preventDefault();
+        if (isSkinToneInSearch) {
+          switch (key) {
+            case KeyboardEvents.ArrowLeft:
+              event.preventDefault();
 
-          if (!isOpen) {
-            return focusSearchInput();
-          }
+              if (!isOpen) {
+                return focusSearchInput();
+              }
 
-          focusNextSkinTone(focusSearchInput);
-          break;
+              focusNextSkinTone(focusSearchInput);
+              break;
 
-        case KeyboardEvents.ArrowRight:
-          event.preventDefault();
+            case KeyboardEvents.ArrowRight:
+              event.preventDefault();
 
-          if (!isOpen) {
-            return focusSearchInput();
-          }
+              if (!isOpen) {
+                return focusSearchInput();
+              }
 
-          focusPrevSkinTone();
-          break;
+              focusPrevSkinTone();
+              break;
 
-        case KeyboardEvents.ArrowDown:
-          event.preventDefault();
+            case KeyboardEvents.ArrowDown:
+              event.preventDefault();
+
+              if (isOpen) {
+                setIsOpen(false);
+              }
+
+              goDownFromSearchInput();
+              break;
 
-          if (isOpen) {
-            setIsOpen(false);
+            default:
+              onType(event);
+              break;
           }
+        }
 
-          goDownFromSearchInput();
-          break;
+        if (isSkinToneInPreview) {
+          switch (key) {
+            case KeyboardEvents.ArrowUp:
+              event.preventDefault();
 
-        default:
-          onType(event);
-          break;
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+
+              focusNextSkinTone(focusSearchInput);
+              break;
+
+            case KeyboardEvents.ArrowDown:
+              event.preventDefault();
+
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+
+              focusPrevSkinTone();
+              break;
+
+            default:
+              onType(event);
+              break;
+          }
+        }
       }
-    };
-  }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]);
+    );
+  }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType, isSkinToneInPreview, isSkinToneInSearch]);
   React.useEffect(function () {
     var current = SkinTonePickerRef.current;