emoji-picker-react 4.6.2 → 4.6.4-rc.1

package/dist/hooks/preloadEmoji.d.ts

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

package/dist/hooks/useActiveCategoryScrollDetection.d.ts

@@ -1 +1 @@
-export declare function useActiveCategoryScrollDetection(setActiveCategory: (category: string) => void): void;
+export declare function useActiveCategoryScrollDetection(setActiveCategory: (category: string) => void): void;

package/dist/hooks/useCloseAllOpenToggles.d.ts

@@ -1,2 +1,2 @@
-export declare function useCloseAllOpenToggles(): () => void;
-export declare function useHasOpenToggles(): () => boolean;
+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) => Promise<T>];
+export declare function useDebouncedState<T>(initialValue: T, delay?: number): [T, (value: T) => Promise<T>];

package/dist/hooks/useDisallowMouseMove.d.ts

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

package/dist/hooks/useDisallowedEmojis.d.ts

@@ -1,3 +1,3 @@
-import { DataEmoji } from '../dataUtils/DataTypes';
-export declare function useDisallowedEmojis(): Record<string, boolean>;
-export declare function useIsEmojiDisallowed(): (emoji: DataEmoji) => boolean;
+import { DataEmoji } from '../dataUtils/DataTypes';
+export declare function useDisallowedEmojis(): Record<string, boolean>;
+export declare function useIsEmojiDisallowed(): (emoji: DataEmoji) => boolean;

package/dist/hooks/useEmojiPreviewEvents.d.ts

@@ -1,3 +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;
+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,12 +1,12 @@
-import { DataEmoji } from '../dataUtils/DataTypes';
-export declare function useClearSearch(): () => void;
-export declare function useAppendSearch(): (str: string) => void;
-export declare function useFilter(): {
-    onChange: (inputValue: string) => void;
-    searchTerm: string;
-    SearchInputRef: import("../components/context/ElementRefContext").ElementRef<HTMLInputElement>;
-    statusSearchResults: string;
-};
-export declare function useIsEmojiFiltered(): (unified: string) => boolean;
-export declare type FilterDict = Record<string, DataEmoji>;
-export declare function getNormalizedSearchTerm(str: string): string;
+import { DataEmoji } from '../dataUtils/DataTypes';
+export declare function useClearSearch(): () => void;
+export declare function useAppendSearch(): (str: string) => void;
+export declare function useFilter(): {
+    onChange: (inputValue: string) => void;
+    searchTerm: string;
+    SearchInputRef: import("../components/context/ElementRefContext").ElementRef<HTMLInputElement>;
+    statusSearchResults: string;
+};
+export declare function useIsEmojiFiltered(): (unified: string) => boolean;
+export type FilterDict = Record<string, DataEmoji>;
+export declare function getNormalizedSearchTerm(str: string): string;

package/dist/hooks/useFocus.d.ts

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

package/dist/hooks/useHideEmojisByUniocode.d.ts

@@ -1 +1 @@
-export declare function useIsUnicodeHidden(): (emojiUnified: string) => boolean;
+export declare function useIsUnicodeHidden(): (emojiUnified: string) => boolean;

package/dist/hooks/useInitialLoad.d.ts

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

package/dist/hooks/useIsEmojiHidden.d.ts

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

package/dist/hooks/useIsSearchMode.d.ts

@@ -1 +1 @@
-export default function useIsSearchMode(): boolean;
+export default function useIsSearchMode(): boolean;

package/dist/hooks/useKeyboardNavigation.d.ts

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

package/dist/hooks/useMouseDownHandlers.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-import { NullableElement } from '../DomUtils/selectors';
-export declare function useMouseDownHandlers(BodyRef: React.MutableRefObject<NullableElement>): 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

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

package/dist/hooks/useOnScroll.d.ts

@@ -1,2 +1,2 @@
-import { ElementRef } from '../components/context/ElementRefContext';
-export declare function useOnScroll(BodyRef: ElementRef): void;
+import { ElementRef } from '../components/context/ElementRefContext';
+export declare function useOnScroll(BodyRef: ElementRef): void;

package/dist/hooks/useScrollCategoryIntoView.d.ts

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

package/dist/hooks/useSetVariationPicker.d.ts

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

package/dist/hooks/useShouldHideCustomEmojis.d.ts

@@ -1 +1 @@
-export declare function useShouldHideCustomEmojis(): boolean;
+export declare function useShouldHideCustomEmojis(): boolean;

package/dist/hooks/useShouldShowSkinTonePicker.d.ts

@@ -1,4 +1,4 @@
-import { SkinTonePickerLocation } from '../types/exposedTypes';
-export declare function useShouldShowSkinTonePicker(): (location: SkinTonePickerLocation) => boolean;
-export declare function useIsSkinToneInSearch(): boolean;
-export declare function useIsSkinToneInPreview(): boolean;
+import { SkinTonePickerLocation } from '../types/exposedTypes';
+export declare function useShouldShowSkinTonePicker(): (location: SkinTonePickerLocation) => boolean;
+export declare function useIsSkinToneInSearch(): boolean;
+export declare function useIsSkinToneInPreview(): boolean;

package/dist/index.d.ts

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

package/dist/typeRefinements/typeRefinements.d.ts

@@ -1,5 +1,5 @@
-import { CategoryConfig, CustomCategoryConfig } from '../config/categoryConfig';
-import { CustomEmoji } from '../config/customEmojiConfig';
-import { DataEmoji } from '../dataUtils/DataTypes';
-export declare function isCustomCategory(category: CategoryConfig | CustomCategoryConfig): category is CustomCategoryConfig;
-export declare function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji;
+import { CategoryConfig, CustomCategoryConfig } from '../config/categoryConfig';
+import { CustomEmoji } from '../config/customEmojiConfig';
+import { DataEmoji } from '../dataUtils/DataTypes';
+export declare function isCustomCategory(category: CategoryConfig | CustomCategoryConfig): category is CustomCategoryConfig;
+export declare function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji;

package/dist/types/exposedTypes.d.ts

@@ -1,50 +1,50 @@
-export declare type EmojiClickData = {
-    activeSkinTone: SkinTones;
-    unified: string;
-    unifiedWithoutSkinTone: string;
-    emoji: string;
-    names: string[];
-    imageUrl: string;
-    getImageUrl: (emojiStyle?: EmojiStyle) => string;
-    isCustom: boolean;
-};
-export declare enum SuggestionMode {
-    RECENT = "recent",
-    FREQUENT = "frequent"
-}
-export declare enum EmojiStyle {
-    NATIVE = "native",
-    APPLE = "apple",
-    TWITTER = "twitter",
-    GOOGLE = "google",
-    FACEBOOK = "facebook"
-}
-export declare enum Theme {
-    DARK = "dark",
-    LIGHT = "light",
-    AUTO = "auto"
-}
-export declare enum SkinTones {
-    NEUTRAL = "neutral",
-    LIGHT = "1f3fb",
-    MEDIUM_LIGHT = "1f3fc",
-    MEDIUM = "1f3fd",
-    MEDIUM_DARK = "1f3fe",
-    DARK = "1f3ff"
-}
-export declare enum Categories {
-    SUGGESTED = "suggested",
-    CUSTOM = "custom",
-    SMILEYS_PEOPLE = "smileys_people",
-    ANIMALS_NATURE = "animals_nature",
-    FOOD_DRINK = "food_drink",
-    TRAVEL_PLACES = "travel_places",
-    ACTIVITIES = "activities",
-    OBJECTS = "objects",
-    SYMBOLS = "symbols",
-    FLAGS = "flags"
-}
-export declare enum SkinTonePickerLocation {
-    SEARCH = "SEARCH",
-    PREVIEW = "PREVIEW"
-}
+export type EmojiClickData = {
+    activeSkinTone: SkinTones;
+    unified: string;
+    unifiedWithoutSkinTone: string;
+    emoji: string;
+    names: string[];
+    imageUrl: string;
+    getImageUrl: (emojiStyle?: EmojiStyle) => string;
+    isCustom: boolean;
+};
+export declare enum SuggestionMode {
+    RECENT = "recent",
+    FREQUENT = "frequent"
+}
+export declare enum EmojiStyle {
+    NATIVE = "native",
+    APPLE = "apple",
+    TWITTER = "twitter",
+    GOOGLE = "google",
+    FACEBOOK = "facebook"
+}
+export declare enum Theme {
+    DARK = "dark",
+    LIGHT = "light",
+    AUTO = "auto"
+}
+export declare enum SkinTones {
+    NEUTRAL = "neutral",
+    LIGHT = "1f3fb",
+    MEDIUM_LIGHT = "1f3fc",
+    MEDIUM = "1f3fd",
+    MEDIUM_DARK = "1f3fe",
+    DARK = "1f3ff"
+}
+export declare enum Categories {
+    SUGGESTED = "suggested",
+    CUSTOM = "custom",
+    SMILEYS_PEOPLE = "smileys_people",
+    ANIMALS_NATURE = "animals_nature",
+    FOOD_DRINK = "food_drink",
+    TRAVEL_PLACES = "travel_places",
+    ACTIVITIES = "activities",
+    OBJECTS = "objects",
+    SYMBOLS = "symbols",
+    FLAGS = "flags"
+}
+export declare enum SkinTonePickerLocation {
+    SEARCH = "SEARCH",
+    PREVIEW = "PREVIEW"
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.2",
+  "version": "4.6.4-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -95,9 +95,12 @@
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^5.0.0"
   },
   "dependencies": {
-    "flairup": "0.0.7"
+    "flairup": "0.0.12"
+  },
+  "resolutions": {
+    "typescript": "^5.0.0"
   }
 }

package/src/components/body/Body.tsx

@@ -28,7 +28,7 @@ export function Body() {
 const styles = stylesheet.create({
   body: {
     '.': ClassNames.scrollBody,
-    flex: 1,
+    flex: '1',
     overflowY: 'scroll',
     overflowX: 'hidden',
     position: 'relative'

package/src/components/body/EmojiList.tsx

@@ -1,6 +1,8 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   Categories,
   CategoryConfig,
@@ -25,14 +27,12 @@ import { ClickableEmoji } from '../emoji/Emoji';
 import { EmojiCategory } from './EmojiCategory';
 import { Suggested } from './Suggested';
 
-import './EmojiList.css';
-
 export function EmojiList() {
   const categories = useCategoriesConfig();
   const renderdCategoriesCountRef = React.useRef(0);
 
   return (
-    <ul className={ClassNames.emojiList}>
+    <ul className={cx(styles.emojiList)}>
       {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
@@ -124,3 +124,12 @@ function RenderCategory({
     </EmojiCategory>
   );
 }
+
+const styles = stylesheet.create({
+  emojiList: {
+    '.': ClassNames.emojiList,
+    listStyle: 'none',
+    margin: '0',
+    padding: '0'
+  }
+});

package/src/components/main/PickerMain.tsx

@@ -2,6 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useClassNameConfig,
   useStyleConfig,
@@ -14,8 +15,6 @@ import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
 import { PickerContextProvider } from '../context/PickerContext';
 
-import './PickerMain.css';
-
 type Props = Readonly<{
   children: React.ReactNode;
 }>;
@@ -47,8 +46,7 @@ function PickerRootElement({ children }: RootProps) {
   return (
     <aside
       className={cx(
-        ClassNames.emojiPicker,
-        'epr-main',
+        styles.main,
         {
           [ClassNames.searchActive]: searchModeActive,
           [ClassNames.darkTheme]: theme === Theme.DARK,
@@ -63,3 +61,16 @@ function PickerRootElement({ children }: RootProps) {
     </aside>
   );
 }
+
+const styles = stylesheet.create({
+  main: {
+    '.': ['epr-main', ClassNames.emojiPicker],
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: 'var(--epr-picker-border-radius)',
+    borderColor: 'var(--epr-picker-border-color)'
+  }
+});

package/src/components/body/EmojiList.css

@@ -1,5 +0,0 @@
-.EmojiPickerReact ul.epr-emoji-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}

package/src/components/main/PickerMain.css

@@ -1,9 +0,0 @@
-aside.EmojiPickerReact.epr-main {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--epr-picker-border-radius);
-  border-color: var(--epr-picker-border-color);
-}