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

package/dist/hooks/useCloseAllOpenToggles.d.ts

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

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/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/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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-rc.19",
+  "version": "4.0.0-rc.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -14,7 +14,7 @@
     "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",
@@ -58,6 +58,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 +79,13 @@
     "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-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
 }

package/src/DomUtils/classNames.ts

@@ -2,5 +2,13 @@ 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',
+}
+
+export function asSelectors(...classNames: ClassNames[]): string {
+  return classNames.map(c => `.${c}`).join('');
 }

package/src/DomUtils/elementPositionInRow.ts

@@ -0,0 +1,169 @@
+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.floor((elementTop - parentTop) / elementHeight) - 1;
+}
+
+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 elementTop - parentTop + elementHeight < parentHeight;
+}
+
+function getRowElements(
+  elements: HTMLElement[],
+  row: number,
+  elementsInRow: number
+): HTMLElement[] {
+  if (row === -1) {
+    const lastRow = Math.floor(elements.length / 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/emojiElementRef.ts

@@ -1,6 +1,7 @@
 import { ClassNames } from './classNames';
+import { NullableElement } from './selectors';
 
-export type EmojiRef = { current: null | HTMLElement };
+export type EmojiRef = { current: NullableElement };
 
 export const emojiRef: Record<string, EmojiRef> = {};
 
@@ -29,13 +30,13 @@ export function showEmoji(unified: string): void {
   showElement(getEmojiRef(unified).current);
 }
 
-export function hideElement(element: HTMLElement | null): void {
+export function hideElement(element: NullableElement): void {
   if (!element) return;
   element.classList.add(ClassNames.hidden);
   element.classList.remove(ClassNames.visible);
 }
 
-export function showElement(element: HTMLElement | null): void {
+export function showElement(element: NullableElement): void {
   if (!element) return;
   element.classList.remove(ClassNames.hidden);
   element.classList.add(ClassNames.visible);

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/keyboardNavigation.ts

@@ -0,0 +1,159 @@
+import {
+  elementCountInRow,
+  elementIndexInRow,
+  getElementInNextRow,
+  getElementInPrevRow,
+  getElementInRow,
+  hasNextRow,
+  rowNumber
+} from './elementPositionInRow';
+import { focusElement } from './focusElement';
+import {
+  allVisibleEmojis,
+  closestCategory,
+  firstVisibleEmoji,
+  lastVisibleEmoji,
+  nextCategory,
+  nextVisibleEmoji,
+  NullableElement,
+  prevCategory,
+  prevVisibleEmoji
+} 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 category = closestCategory(element);
+  const indexInRow = elementIndexInRow(category, element);
+  const row = rowNumber(category, element);
+  const countInRow = elementCountInRow(category, element);
+
+  if (row === 0) {
+    const prevVisibleCategory = prevCategory(category);
+
+    if (!prevVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(
+      allVisibleEmojis(prevVisibleCategory),
+      -1, // last row
+      countInRow,
+      indexInRow
+    );
+  }
+
+  return getElementInPrevRow(
+    allVisibleEmojis(category),
+    row,
+    countInRow,
+    indexInRow
+  );
+}
+
+function visibleEmojiOneRowDown(element: HTMLElement) {
+  if (!element) {
+    return null;
+  }
+
+  const category = closestCategory(element);
+  const indexInRow = elementIndexInRow(category, element);
+  const row = rowNumber(category, element);
+  const countInRow = elementCountInRow(category, element);
+
+  if (!hasNextRow(category, element)) {
+    const nextVisibleCategory = nextCategory(category);
+
+    if (!nextVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(
+      allVisibleEmojis(nextVisibleCategory),
+      0,
+      countInRow,
+      indexInRow
+    );
+  }
+
+  const itemInNextRow = getElementInNextRow(
+    allVisibleEmojis(category),
+    row,
+    countInRow,
+    indexInRow
+  );
+
+  return itemInNextRow;
+}

package/src/DomUtils/scrollCategoryIntoView.ts

@@ -1,7 +1,8 @@
 import { scrollTo } from './scrollTo';
+import { NullableElement } from './selectors';
 
 export function scrollCategoryIntoView(
-  root: HTMLElement | null,
+  root: NullableElement,
   category: string
 ) {
   const $category = root?.querySelector(

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]
+  );
+}