emoji-picker-react 4.0.0-rc.8 → 4.0.0

package/dist/hooks/preloadEmoji.d.ts

@@ -1,4 +1,4 @@
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { EmojiStyle } from '../types/exposedTypes';
-export declare function preloadEmoji(emoji: DataEmoji, emojiStyle: EmojiStyle): void;
+export declare function preloadEmoji(emoji: undefined | DataEmoji, emojiStyle: EmojiStyle): void;
 export declare const preloadedEmojs: Set<string>;

package/dist/hooks/useActiveCategoryScrollDetection.d.ts

@@ -1,2 +1 @@
-import { ElementRef } from '../components/context/ElementRefContext';
-export declare function useActiveCategoryScrollDetection(bodyRef: ElementRef): void;
+export declare function useActiveCategoryScrollDetection(setActiveCategory: (category: string) => void): void;

package/dist/hooks/useCloseAllOpenToggles.d.ts

@@ -1,4 +1,2 @@
-export declare function useCloseAllOpenToggles(): {
-    closeAllOpenToggles: () => void;
-    dependencyArray: (boolean | import("../dataUtils/DataTypes").DataEmoji | null)[];
-};
+export declare function useCloseAllOpenToggles(): () => void;
+export declare function useHasOpenToggles(): () => boolean;

package/dist/hooks/useDebouncedState.d.ts

@@ -1 +1 @@
-export declare function useDebouncedState<T>(initialValue: T, delay?: number): [T, (value: T) => void];
+export declare function useDebouncedState<T>(initialValue: T, delay?: number): [T, (value: T) => Promise<T>];

package/dist/hooks/useDisallowMouseMove.d.ts

@@ -0,0 +1,4 @@
+export declare function useDisallowMouseMove(): () => void;
+export declare function useAllowMouseMove(): () => void;
+export declare function useIsMouseDisallowed(): () => boolean;
+export declare function useOnMouseMove(): void;

package/dist/hooks/useEmojiPreviewEvents.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PreviewEmoji } from '../components/footer/Preview';
+export declare function useEmojiPreviewEvents(allow: boolean, setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>): void;

package/dist/hooks/useFilter.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 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;
-    clearSearch: () => void;
-    SearchInputRef: import("react").RefObject<HTMLInputElement>;
+    SearchInputRef: import("../components/context/ElementRefContext").ElementRef<HTMLInputElement>;
 };
 export declare function useIsEmojiFiltered(): (unified: string) => boolean;
 export declare type FilterDict = Record<string, DataEmoji>;

package/dist/hooks/useFocus.d.ts

@@ -0,0 +1,3 @@
+export declare function useFocusSearchInput(): () => void;
+export declare function useFocusSkinTonePicker(): () => void;
+export declare function useFocusCategoryNavigation(): () => void;

package/dist/hooks/useInitialLoad.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare function useMarkInitialLoad(dispatch: React.Dispatch<React.SetStateAction<boolean>>): void;

package/dist/hooks/useIsEmojiHidden.d.ts

@@ -1,2 +1,8 @@
 import { DataEmoji } from '../dataUtils/DataTypes';
-export declare function useIsEmojiHidden(): (emoji: DataEmoji) => boolean;
+export declare function useIsEmojiHidden(): (emoji: DataEmoji) => IsHiddenReturn;
+declare type IsHiddenReturn = {
+    failedToLoad: boolean;
+    filteredOut: boolean;
+    hidden: boolean;
+};
+export {};

package/dist/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1 @@
+export declare function useKeyboardNavigation(): void;

package/dist/hooks/useMouseDownHandlers.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export declare function useMouseDownHandlers(BodyRef: React.MutableRefObject<HTMLElement | null>): void;
+import * as React from 'react';
+import { NullableElement } from '../DomUtils/selectors';
+export declare function useMouseDownHandlers(BodyRef: React.MutableRefObject<NullableElement>): void;

package/dist/hooks/useOnFocus.d.ts

@@ -0,0 +1 @@
+export declare function useOnFocus(): void;

package/dist/hooks/useScrollCategoryIntoView.d.ts

@@ -0,0 +1 @@
+export declare function useScrollCategoryIntoView(): (category: string) => void;

package/dist/hooks/useSetVariationPicker.d.ts

@@ -0,0 +1,2 @@
+import { NullableElement } from '../DomUtils/selectors';
+export default function useSetVariationPicker(): (element: NullableElement) => void;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { PickerConfig } from './config/config';
-import './EmojiPickerReact.css';
+export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
 export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData } from './types/exposedTypes';
 export interface Props extends PickerConfig {
 }
-export declare function EmojiPicker(props: Props): JSX.Element;
+export default function EmojiPicker(props: Props): JSX.Element;

package/dist/types/exposedTypes.d.ts

@@ -6,6 +6,10 @@ export declare type EmojiClickData = {
     names: string[];
     getImageUrl: (emojiStyle: EmojiStyle) => string;
 };
+export declare enum SuggestionMode {
+    RECENT = "recent",
+    FREQUENT = "frequent"
+}
 export declare enum EmojiStyle {
     NATIVE = "native",
     APPLE = "apple",
@@ -27,7 +31,7 @@ export declare enum SkinTones {
     DARK = "1f3ff"
 }
 export declare enum Categories {
-    RECENTLY_USED = "recently_used",
+    SUGGESTED = "suggested",
     SMILEYS_PEOPLE = "smileys_people",
     ANIMALS_NATURE = "animals_nature",
     FOOD_DRINK = "food_drink",

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-rc.8",
+  "version": "4.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,11 +10,15 @@
   "engines": {
     "node": ">=10"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ealush/emoji-picker-react.git"
+  },
   "scripts": {
     "start": "tsdx watch",
     "build": "node ./scripts/prepare.js && tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "eslint ./src --ext .ts,.tsx",
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
@@ -26,7 +30,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "yarn lint"
     }
   },
   "prettier": {
@@ -58,6 +62,8 @@
     "@storybook/react": "^6.5.10",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
     "cssnano": "^5.1.13",
@@ -77,12 +83,14 @@
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.0.1",
     "tiny-invariant": "^1.2.0",
-    "tinykeys": "^1.4.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "clsx": "^1.2.1"
+    "clsx": "^1.2.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
 }

package/src/DomUtils/classNames.ts

@@ -2,5 +2,16 @@ export enum ClassNames {
   hiddenOnSearch = 'epr-hidden-on-search',
   searchActive = 'epr-search-active',
   hidden = 'epr-hidden',
-  visible = 'epr-visible'
+  visible = 'epr-visible',
+  active = 'epr-active',
+  emoji = 'epr-emoji',
+  category = 'epr-emoji-category',
+  label = 'epr-emoji-category-label',
+  categoryContent = 'epr-emoji-category-content',
+  emojiHasVariatios = 'epr-emoji-has-variations',
+  external = '__EmojiPicker__'
+}
+
+export function asSelectors(...classNames: ClassNames[]): string {
+  return classNames.map(c => `.${c}`).join('');
 }

package/src/DomUtils/elementPositionInRow.ts

@@ -0,0 +1,167 @@
+import { NullableElement } from './selectors';
+
+export function elementCountInRow(
+  parent: NullableElement,
+  element: NullableElement
+): number {
+  if (!parent || !element) {
+    return 0;
+  }
+
+  const parentWidth = parent.getBoundingClientRect().width;
+  const elementWidth = element.getBoundingClientRect().width;
+  return Math.floor(parentWidth / elementWidth);
+}
+
+export function elementIndexInRow(
+  parent: NullableElement,
+  element: NullableElement
+): number {
+  if (!parent || !element) {
+    return 0;
+  }
+
+  const elementWidth = element.getBoundingClientRect().width;
+  const elementLeft = element.getBoundingClientRect().left;
+  const parentLeft = parent.getBoundingClientRect().left;
+
+  return Math.floor((elementLeft - parentLeft) / elementWidth);
+}
+
+export function rowNumber(
+  parent: NullableElement,
+  element: NullableElement
+): number {
+  if (!parent || !element) {
+    return 0;
+  }
+
+  const elementHeight = element.getBoundingClientRect().height;
+  const elementTop = element.getBoundingClientRect().top;
+  const parentTop = parent.getBoundingClientRect().top;
+  return Math.round((elementTop - parentTop) / elementHeight);
+}
+
+export function hasNextRow(
+  parent: NullableElement,
+  element: NullableElement
+): boolean {
+  if (!parent || !element) {
+    return false;
+  }
+
+  const elementHeight = element.getBoundingClientRect().height;
+  const elementTop = element.getBoundingClientRect().top;
+  const parentTop = parent.getBoundingClientRect().top;
+  const parentHeight = parent.getBoundingClientRect().height;
+
+  return Math.round(elementTop - parentTop + elementHeight) < parentHeight;
+}
+
+function getRowElements(
+  elements: HTMLElement[],
+  row: number,
+  elementsInRow: number
+): HTMLElement[] {
+  if (row === -1) {
+    const lastRow = Math.floor((elements.length - 1) / elementsInRow);
+    const firstElementIndex = lastRow * elementsInRow;
+    const lastElementIndex = elements.length - 1;
+    return elements.slice(firstElementIndex, lastElementIndex + 1);
+  }
+
+  return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
+}
+
+function getNextRowElements(
+  allElements: HTMLElement[],
+  currentRow: number,
+  elementsInRow: number
+): HTMLElement[] {
+  const nextRow = currentRow + 1;
+
+  if (nextRow * elementsInRow > allElements.length) {
+    return [];
+  }
+
+  return getRowElements(allElements, nextRow, elementsInRow);
+}
+
+export function getElementInRow(
+  elements: HTMLElement[],
+  row: number,
+  elementsInRow: number,
+  indexInRow: number
+): NullableElement {
+  const rowElements = getRowElements(elements, row, elementsInRow);
+  // get element, default to last
+  return rowElements[indexInRow] || rowElements[rowElements.length - 1] || null;
+}
+
+export function getElementInNextRow(
+  allElements: HTMLElement[],
+  currentRow: number,
+  elementsInRow: number,
+  index: number
+): NullableElement {
+  const nextRowElements = getNextRowElements(
+    allElements,
+    currentRow,
+    elementsInRow
+  );
+
+  // return item in index, or last item in row
+  return (
+    nextRowElements[index] ||
+    nextRowElements[nextRowElements.length - 1] ||
+    null
+  );
+}
+
+export function getElementInPrevRow(
+  allElements: HTMLElement[],
+  currentRow: number,
+  elementsInRow: number,
+  index: number
+): NullableElement {
+  const prevRowElements = getRowElements(
+    allElements,
+    currentRow - 1,
+    elementsInRow
+  );
+
+  // default to last
+  return (
+    prevRowElements[index] ||
+    prevRowElements[prevRowElements.length - 1] ||
+    null
+  );
+}
+
+export function firstVisibleElementInContainer(
+  parent: NullableElement,
+  elements: HTMLElement[]
+): NullableElement {
+  if (!parent || !elements.length) {
+    return null;
+  }
+
+  const parentTop = parent.getBoundingClientRect().top;
+  const parentBottom = parent.getBoundingClientRect().bottom;
+
+  const visibleElements = elements.find(element => {
+    const elementTop = element.getBoundingClientRect().top;
+    const elementBottom = element.getBoundingClientRect().bottom;
+
+    return (
+      (elementTop >= parentTop && elementTop <= parentBottom) ||
+      (elementBottom >= parentTop && elementBottom <= parentBottom)
+    );
+  });
+
+  return visibleElements || null;
+}
+
+export function hasNextElementSibling(element: HTMLElement) {
+  return !!element.nextElementSibling;
+}

package/src/DomUtils/focusElement.ts

@@ -0,0 +1,35 @@
+import { NullableElement } from './selectors';
+
+export function focusElement(element: NullableElement) {
+  if (!element) {
+    return;
+  }
+
+  requestAnimationFrame(() => {
+    element.focus();
+  });
+}
+
+export function focusPrevElementSibling(element: NullableElement) {
+  if (!element) return;
+
+  const prev = element.previousElementSibling as HTMLElement;
+
+  focusElement(prev);
+}
+
+export function focusNextElementSibling(element: NullableElement) {
+  if (!element) return;
+
+  const next = element.nextElementSibling as HTMLElement;
+
+  focusElement(next);
+}
+
+export function focusFirstElementChild(element: NullableElement) {
+  if (!element) return;
+
+  const first = element.firstElementChild as HTMLElement;
+
+  focusElement(first);
+}

package/src/DomUtils/getActiveElement.ts

@@ -0,0 +1,5 @@
+import { NullableElement } from './selectors';
+
+export function getActiveElement() {
+  return document.activeElement as NullableElement;
+}

package/src/DomUtils/isDarkTheme.ts

@@ -0,0 +1,7 @@
+export function isSystemDarkTheme(): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
+}

package/src/DomUtils/keyboardNavigation.ts

@@ -0,0 +1,161 @@
+import {
+  elementCountInRow,
+  elementIndexInRow,
+  getElementInNextRow,
+  getElementInPrevRow,
+  getElementInRow,
+  hasNextRow,
+  rowNumber
+} from './elementPositionInRow';
+import { focusElement } from './focusElement';
+import {
+  allVisibleEmojis,
+  closestCategory,
+  firstVisibleEmoji,
+  lastVisibleEmoji,
+  nextCategory,
+  nextVisibleEmoji,
+  NullableElement,
+  prevCategory,
+  prevVisibleEmoji,
+  closestCategoryContent
+} from './selectors';
+
+export function focusFirstVisibleEmoji(parent: NullableElement) {
+  focusElement(firstVisibleEmoji(parent));
+}
+
+export function focusAndClickFirstVisibleEmoji(parent: NullableElement) {
+  const firstEmoji = firstVisibleEmoji(parent);
+
+  focusElement(firstEmoji);
+  firstEmoji?.click();
+}
+
+export function focusLastVisibleEmoji(parent: NullableElement) {
+  focusElement(lastVisibleEmoji(parent));
+}
+
+export function focusNextVisibleEmoji(element: NullableElement) {
+  if (!element) {
+    return;
+  }
+
+  const next = nextVisibleEmoji(element);
+
+  if (!next) {
+    return focusFirstVisibleEmoji(nextCategory(element));
+  }
+
+  focusElement(next);
+}
+
+export function focusPrevVisibleEmoji(element: NullableElement) {
+  if (!element) {
+    return;
+  }
+
+  const prev = prevVisibleEmoji(element);
+
+  if (!prev) {
+    return focusLastVisibleEmoji(prevCategory(element));
+  }
+
+  focusElement(prev);
+}
+
+export function focusVisibleEmojiOneRowUp(
+  element: NullableElement,
+  exitUp: () => void
+) {
+  if (!element) {
+    return;
+  }
+
+  const prev = visibleEmojiOneRowUp(element);
+
+  if (!prev) {
+    return exitUp();
+  }
+
+  focusElement(prev);
+}
+
+export function focusVisibleEmojiOneRowDown(element: NullableElement) {
+  if (!element) {
+    return;
+  }
+
+  const next = visibleEmojiOneRowDown(element);
+
+  return focusElement(next);
+}
+
+function visibleEmojiOneRowUp(element: HTMLElement) {
+  if (!element) {
+    return null;
+  }
+
+  const categoryContent = closestCategoryContent(element);
+  const category = closestCategory(categoryContent);
+  const indexInRow = elementIndexInRow(categoryContent, element);
+  const row = rowNumber(categoryContent, element);
+  const countInRow = elementCountInRow(categoryContent, element);
+
+  if (row === 0) {
+    const prevVisibleCategory = prevCategory(category);
+
+    if (!prevVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(
+      allVisibleEmojis(prevVisibleCategory),
+      -1, // last row
+      countInRow,
+      indexInRow
+    );
+  }
+
+  return getElementInPrevRow(
+    allVisibleEmojis(categoryContent),
+    row,
+    countInRow,
+    indexInRow
+  );
+}
+
+function visibleEmojiOneRowDown(element: HTMLElement) {
+  if (!element) {
+    return null;
+  }
+
+  const categoryContent = closestCategoryContent(element);
+  const category = closestCategory(categoryContent);
+  const indexInRow = elementIndexInRow(categoryContent, element);
+  const row = rowNumber(categoryContent, element);
+  const countInRow = elementCountInRow(categoryContent, element);
+  if (!hasNextRow(categoryContent, element)) {
+    const nextVisibleCategory = nextCategory(category);
+
+    if (!nextVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(
+      allVisibleEmojis(nextVisibleCategory),
+      0,
+      countInRow,
+      indexInRow
+    );
+  }
+
+  const itemInNextRow = getElementInNextRow(
+    allVisibleEmojis(categoryContent),
+    row,
+    countInRow,
+    indexInRow
+  );
+
+  return itemInNextRow;
+}

package/src/DomUtils/scrollTo.ts

@@ -1,4 +1,10 @@
-export function scrollTo(root: HTMLElement | null, top: number = 0) {
+import { useCallback } from 'react';
+
+import { useBodyRef } from '../components/context/ElementRefContext';
+
+import { NullableElement } from './selectors';
+
+export function scrollTo(root: NullableElement, top: number = 0) {
   const $eprBody = root ? root.querySelector('.epr-body') : null;
 
   if (!root || !$eprBody) {
@@ -9,3 +15,18 @@ export function scrollTo(root: HTMLElement | null, top: number = 0) {
     $eprBody.scrollTop = top + 1;
   });
 }
+
+export function useScrollTo() {
+  const BodyRef = useBodyRef();
+
+  return useCallback(
+    (top: number) => {
+      requestAnimationFrame(() => {
+        if (BodyRef.current) {
+          BodyRef.current.scrollTop = top;
+        }
+      });
+    },
+    [BodyRef]
+  );
+}