emoji-picker-react 4.0.0-rc.20 → 4.0.0-rc.21

package/dist/hooks/useFilter.d.ts

@@ -1,5 +1,6 @@
 import { DataEmoji } from '../dataUtils/DataTypes';
 export declare function useClearSearch(): () => void;
+export declare function useAppendSearch(): (str: string) => void;
 export declare function useFilter(): {
     onChange: (nextValue: string) => void;
     searchTerm: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-rc.20",
+  "version": "4.0.0-rc.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/DomUtils/keyboardNavigation.ts

@@ -1,7 +1,6 @@
 import {
   elementCountInRow,
   elementIndexInRow,
-  firstVisibleElementInContainer,
   getElementInNextRow,
   getElementInPrevRow,
   getElementInRow,
@@ -12,6 +11,7 @@ import { focusElement } from './focusElement';
 import {
   allVisibleEmojis,
   closestCategory,
+  firstVisibleEmoji,
   lastVisibleEmoji,
   nextCategory,
   nextVisibleEmoji,
@@ -21,8 +21,14 @@ import {
 } from './selectors';
 
 export function focusFirstVisibleEmoji(parent: NullableElement) {
-  const allEmojis = allVisibleEmojis(parent);
-  focusElement(firstVisibleElementInContainer(parent, allEmojis));
+  focusElement(firstVisibleEmoji(parent));
+}
+
+export function focusAndClickFirstVisibleEmoji(parent: NullableElement) {
+  const firstEmoji = firstVisibleEmoji(parent);
+
+  focusElement(firstEmoji);
+  firstEmoji?.click();
 }
 
 export function focusLastVisibleEmoji(parent: NullableElement) {

package/src/DomUtils/selectors.ts

@@ -5,7 +5,7 @@ import {
 } from '../dataUtils/emojiSelectors';
 
 import { asSelectors, ClassNames } from './classNames';
-import { lastElementChild } from './lastElementChild';
+import { firstVisibleElementInContainer } from './elementPositionInRow';
 
 export type NullableElement = HTMLElement | null;
 
@@ -135,8 +135,8 @@ export function allVisibleEmojis(parent: NullableElement) {
 export function lastVisibleEmoji(element: NullableElement): NullableElement {
   if (!element) return null;
 
-  const last = lastElementChild(element);
-
+  const allEmojis = allVisibleEmojis(element);
+  const [last] = allEmojis.slice(-1);
   if (!last) {
     return null;
   }
@@ -181,9 +181,9 @@ export function firstVisibleEmoji(parent: NullableElement) {
     return null;
   }
 
-  const emoji = parent.querySelector(VisibleEmojiSelector);
+  const allEmojis = allVisibleEmojis(parent);
 
-  return emoji as HTMLElement;
+  return firstVisibleElementInContainer(parent, allEmojis);
 }
 
 export function prevCategory(element: NullableElement): NullableElement {

package/src/EmojiPickerReact.css

@@ -58,6 +58,9 @@
   /*  Emoji */
   --epr-emoji-size: 30px;
   --epr-emoji-padding: 5px;
+  --epr-emoji-fullsize: calc(
+    var(--epr-emoji-size) + var(--epr-emoji-padding) * 2
+  );
   --epr-emoji-hover-color: var(--epr-hover-bg-color);
   --epr-emoji-variation-indicator-color: var(--epr-picker-border-color);
   --epr-emoji-variation-indicator-color-hover: var(--epr-text-color);

package/src/components/body/EmojiCategory.css

@@ -1,3 +1,17 @@
+.EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-content {
+  position: relative;
+  padding: var(--epr-category-padding);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--epr-emoji-fullsize));
+  grid-gap: 0;
+  justify-content: space-between;
+}
+
+.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)) {
+  display: none;
+}
+
 .EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-label {
   position: sticky;
   top: 0;
@@ -20,22 +34,3 @@
   position: relative;
   opacity: 0.4;
 }
-
-.EmojiPickerReact li.epr-emoji-category {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  padding: var(--epr-category-padding);
-}
-
-.EmojiPickerReact li.epr-emoji-category:after {
-  content: '';
-  display: inline-block;
-  flex: 1;
-}
-
-.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)) {
-  display: none;
-}

package/src/components/body/EmojiCategory.tsx

@@ -34,7 +34,7 @@ export function EmojiCategory({
       data-name={category}
     >
       <div className="epr-emoji-category-label">{categoryName}</div>
-      {children}
+      <div className="epr-emoji-category-content">{children}</div>
     </li>
   );
 }

package/src/hooks/useEmojiPreviewEvents.ts

@@ -22,6 +22,10 @@ export function useEmojiPreviewEvents(
     }
     const bodyRef = BodyRef.current;
 
+    bodyRef?.addEventListener('keydown', onEscape, {
+      passive: true
+    });
+
     bodyRef?.addEventListener('mouseover', onMouseOver, {
       passive: true
     });
@@ -51,14 +55,28 @@ export function useEmojiPreviewEvents(
         originalUnified
       });
     }
-    function onLeave() {
+    function onLeave(e?: FocusEvent | MouseEvent) {
+      if (e) {
+        const button = buttonFromTarget(e.target as HTMLElement);
+
+        if (button) {
+          return;
+        }
+      }
+
       setPreviewEmoji(null);
     }
+    function onEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setPreviewEmoji(null);
+      }
+    }
     return () => {
       bodyRef?.removeEventListener('mouseover', onMouseOver);
       bodyRef?.removeEventListener('mouseout', onLeave);
       bodyRef?.removeEventListener('focus', onEnter, true);
       bodyRef?.removeEventListener('blur', onLeave, true);
+      bodyRef?.removeEventListener('keydown', onEscape);
     };
   }, [BodyRef, allow, setPreviewEmoji]);
 

package/src/hooks/useFilter.ts

@@ -18,7 +18,6 @@ import {
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
 
-
 function useSetFilterRef() {
   const filterRef = useFilterRef();
 
@@ -45,6 +44,20 @@ export function useClearSearch() {
   };
 }
 
+export function useAppendSearch() {
+  const SearchInputRef = useSearchInputRef();
+  const [, setSearchTerm] = useSearchTermState();
+
+  return function appendSearch(str: string) {
+    if (SearchInputRef.current) {
+      SearchInputRef.current.value = SearchInputRef.current.value + str;
+      setSearchTerm(SearchInputRef.current.value);
+    }
+
+    setSearchTerm(str);
+  };
+}
+
 export function useFilter() {
   const SearchInputRef = useSearchInputRef();
   const filterRef = useFilterRef();

package/src/hooks/useKeyboardNavigation.ts

@@ -7,6 +7,7 @@ import {
 } from '../DomUtils/focusElement';
 import { getActiveElement } from '../DomUtils/getActiveElement';
 import {
+  focusAndClickFirstVisibleEmoji,
   focusFirstVisibleEmoji,
   focusNextVisibleEmoji,
   focusPrevVisibleEmoji,
@@ -25,7 +26,7 @@ import {
 import { useSkinToneFanOpenState } from '../components/context/PickerContext';
 
 import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
-import { useClearSearch } from './useFilter';
+import { useAppendSearch, useClearSearch } from './useFilter';
 import {
   useFocusCategoryNavigation,
   useFocusSearchInput,
@@ -38,7 +39,8 @@ enum KeyboardEvents {
   ArrowUp = 'ArrowUp',
   ArrowLeft = 'ArrowLeft',
   ArrowRight = 'ArrowRight',
-  Escape = 'Escape'
+  Escape = 'Escape',
+  Enter = 'Enter'
 }
 
 export function useKeyboardNavigation() {
@@ -63,7 +65,7 @@ function usePickerMainKeyboardEvents() {
       function onKeyDown(event: KeyboardEvent) {
         const { key } = event;
 
-        if (key === 'Escape') {
+        if (key === KeyboardEvents.Escape) {
           event.preventDefault();
           clearSearch();
           closeAllOpenToggles();
@@ -92,6 +94,7 @@ function usePickerMainKeyboardEvents() {
 function useSearchInputKeyboardEvents() {
   const focusSkinTonePicker = useFocusSkinTonePicker();
   const PickerMainRef = usePickerMainRef();
+  const BodyRef = useBodyRef();
   const SearchInputRef = useSearchInputRef();
   const [, setSkinToneFanOpenState] = useSkinToneFanOpenState();
   const goDownFromSearchInput = useGoDownFromSearchInput();
@@ -111,9 +114,18 @@ function useSearchInputKeyboardEvents() {
             event.preventDefault();
             goDownFromSearchInput();
             break;
+          case KeyboardEvents.Enter:
+            event.preventDefault();
+            focusAndClickFirstVisibleEmoji(BodyRef.current);
+            break;
         }
       },
-    [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState]
+    [
+      focusSkinTonePicker,
+      goDownFromSearchInput,
+      setSkinToneFanOpenState,
+      BodyRef
+    ]
   );
 
   useEffect(() => {
@@ -137,6 +149,7 @@ function useSkinTonePickerKeyboardEvents() {
   const SearchInputRef = useSearchInputRef();
   const goDownFromSearchInput = useGoDownFromSearchInput();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
+  const onType = useOnType();
 
   const onKeyDown = useMemo(
     () =>
@@ -165,9 +178,12 @@ function useSkinTonePickerKeyboardEvents() {
             }
             goDownFromSearchInput();
             break;
+          default:
+            onType(event);
+            break;
         }
       },
-    [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput]
+    [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]
   );
 
   useEffect(() => {
@@ -189,6 +205,7 @@ function useCategoryNavigationKeyboardEvents() {
   const focusSearchInput = useFocusSearchInput();
   const CategoryNavigationRef = useCategoryNavigationRef();
   const BodyRef = useBodyRef();
+  const onType = useOnType();
 
   const onKeyDown = useMemo(
     () =>
@@ -212,9 +229,12 @@ function useCategoryNavigationKeyboardEvents() {
             event.preventDefault();
             focusFirstVisibleEmoji(BodyRef.current);
             break;
+          default:
+            onType(event);
+            break;
         }
       },
-    [BodyRef, focusSearchInput]
+    [BodyRef, focusSearchInput, onType]
   );
 
   useEffect(() => {
@@ -236,6 +256,8 @@ function useBodyKeyboardEvents() {
   const BodyRef = useBodyRef();
   const goUpFromBody = useGoUpFromBody();
 
+  const onType = useOnType();
+
   const onKeyDown = useMemo(
     () =>
       function onKeyDown(event: KeyboardEvent) {
@@ -260,9 +282,12 @@ function useBodyKeyboardEvents() {
             event.preventDefault();
             focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
             break;
+          default:
+            onType(event);
+            break;
         }
       },
-    [goUpFromBody]
+    [goUpFromBody, onType]
   );
 
   useEffect(() => {
@@ -335,3 +360,30 @@ function focusPrevSkinTone() {
 
   focusPrevElementSibling(currentSkinTone);
 }
+
+function useOnType() {
+  const appendSearch = useAppendSearch();
+  const focusSearchInput = useFocusSearchInput();
+  const closeAllOpenToggles = useCloseAllOpenToggles();
+
+  return function onType(event: KeyboardEvent) {
+    const { key } = event;
+
+    if (hasModifier(event)) {
+      return;
+    }
+
+    if (key.match(/(^[a-zA-Z0-9]$){1}/)) {
+      event.preventDefault();
+      closeAllOpenToggles();
+      focusSearchInput();
+      appendSearch(key);
+    }
+  };
+}
+
+function hasModifier(event: KeyboardEvent): boolean {
+  const { metaKey, ctrlKey, altKey } = event;
+
+  return metaKey || ctrlKey || altKey;
+}

package/dist/DomUtils/lastElementChild.d.ts

@@ -1,2 +0,0 @@
-import { NullableElement } from './selectors';
-export declare function lastElementChild(element: NullableElement): NullableElement;

package/src/DomUtils/lastElementChild.ts

@@ -1,7 +0,0 @@
-import { NullableElement } from './selectors';
-
-export function lastElementChild(element: NullableElement) {
-  if (!element) return null;
-
-  return element.lastElementChild as HTMLElement;
-}