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

package/README.md

@@ -6,7 +6,7 @@ An emoji picker component for React applications.
 
 ## What to know before using
 
-- This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client.
+- This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client. See troubleshooting section for more information.
 
 ## Installation
 
@@ -14,6 +14,20 @@ An emoji picker component for React applications.
 npm install emoji-picker-react
 ```
 
+## Usage:
+
+```jsx
+import EmojiPicker from 'emoji-picker-react';
+
+function App() {
+  return (
+    <div>
+      <EmojiPicker />
+    </div>
+  );
+}
+```
+
 ## Features
 
 - Custom click handler
@@ -23,47 +37,68 @@ npm install emoji-picker-react
 - Skin tone change
 - Different emoji sets (Google, Apple, Facebook, Twitter)
 - Native Emoji support
+- Emoji Component To Render Emojis in your app
+
+# Props
+
+The following props are accepted by them picker:
 
-## Config Props
+| Prop                | Type     | Default    | Description                                                                                                       |
+| ------------------- | -------- | ---------- | ----------------------------------------------------------------------------------------------------------------- |
+| onEmojiClick        | function |            | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
+| autoFocusSearch     | boolean  | `true`     | Controls the auto focus of the search input.                                                                      |
+| Theme               | string   | `light`    | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.                                 |
+| emojiStyle          | string   | `apple`    | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.              |
+| defaultSkinTone     | string   | `neutral`  | Controls the default skin tone.                                                                                   |
+| lazyLoadEmojis      | boolean  | `false`    | Controls whether the emojis are loaded lazily or not.                                                             |
+| previewConfig       | object   | `{}`       | Controls the preview of the emoji. See below for more information.                                                |
+| searchPlaceholder   | string   | `Search`   | Controls the placeholder of the search input.                                                                     |
+| suggestedEmojisMode | string   | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                  |
+| skinTonesDisabled   | boolean  | `false`    | Controls whether the skin tones are disabled or not.                                                              |
+| `width`             | number   | `350`      | Controls the width of the picker.                                                                                 |
+| `height`            | number   | `450`      | Controls the height of the picker.                                                                                |
 
-- _onEmojiClick_ `(event: MouseEvent, emoji: EmojiClickData) => void` - Callback function when an emoji is clicked. The callback receives the event and the emoji data. The emoji data is comprised of the following properties:
+## Full details
 
-  ```ts{
-  activeSkinTone: SkinTones;
-  unified: string;
-  unifiedWithoutSkinTone: string;
-  emoji: string;
-  names: string[];
-  getImageUrl: (emojiStyle: EmojiStyle) => string;
+- `onEmojiClick`: `(emojiData: EmojiClickData, event: MouseEvent) => void` - Callback function when an emoji is clicked. The callback receives the event and the emoji data. The emoji data is comprised of the following properties:
+
+  ```ts
+  {
+    activeSkinTone: SkinTones;
+    unified: string;
+    unifiedWithoutSkinTone: string;
+    emoji: string;
+    names: string[];
+    getImageUrl: (emojiStyle: EmojiStyle) => string;
   }
   ```
 
-- _theme_ `Theme` - The theme of the picker. Can be either `light` or `dark`. Default is `light`.
+- `theme`: `Theme` - The theme of the picker. Can be `light`, `dark` or auto. Default is `light`.
   The `Theme` enum can be imported from the package.
 
   ```ts
   import { Theme } from 'emoji-picker-react';
   ```
 
-- _emojiStyle_ `EmojiStyle` - The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. Default is `apple`.
+- `emojiStyle`: `EmojiStyle` - The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. Default is `apple`.
   The `EmojiStyle` enum can be imported from the package.
 
   ```ts
   import { EmojiStyle } from 'emoji-picker-react';
   ```
 
-* _autoFocusSearch_: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
+* `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
+*
+* `lazyLoadEmojis`: `boolean` - Whether to lazy load the emojis. Defaults to `false`.
 
-* _defaultSkinTone_: `SkinTones` - The default skin tone to use when an emoji is clicked. Defaults to `SkinTones.Neutral`. Possible skin tones are:
+* `defaultSkinTone`: `SkinTones` - The default skin tone to use when an emoji is clicked. Defaults to `SkinTones.Neutral`. Possible skin tones are:
 
-```
-  ✋ NEUTRAL = 'neutral'
-  ✋🏻 LIGHT = '1f3fb'
-  ✋🏼 MEDIUM_LIGHT = '1f3fc'
-  ✋🏽 MEDIUM = '1f3fd'
-  ✋🏾 MEDIUM_DARK = '1f3fe'
-  ✋🏿 DARK = '1f3ff'
-```
+  - ✋ 'neutral'
+  - ✋🏻 '1f3fb'
+  - ✋🏼 '1f3fc'
+  - ✋🏽 '1f3fd'
+  - ✋🏾 '1f3fe'
+  - ✋🏿 '1f3ff'
 
 The skin tones typescript enum can be imported directly from the package:
 
@@ -71,35 +106,133 @@ The skin tones typescript enum can be imported directly from the package:
 import { SkinTones } from 'emoji-picker-react';
 ```
 
-- _skinTonesDisabled_: `boolean` - Whether to disable the skin tone selection. Defaults to `false`.
+- `skinTonesDisabled`: `boolean` - Whether to disable the skin tone selection. Defaults to `false`.
+
+- `previewConfig`: `PreviewConfig` - Full control over the Preview component, either to show/hide it, change the default emoji or the default caption.
 
-- _showPreview_: `boolean` - Whether to show the preview of the selected emoji. Defaults to `true`.
+```ts
+{
+  defaultEmoji: string; // defaults to: "1f60a"
+  defaultCaption: string; // defaults to: "What's your mood?"
+  showPreview: boolean; // defaults to: true
+}
+```
 
-- _searchPlaceholder_: `string` - The placeholder text for the search input. Defaults to `Search`.
+- `searchPlaceholder`: `string` - The placeholder text for the search input. Defaults to `Search`.
 
 - categories: Allows full config over ordering, naming and display of categories.
   To only sort/omit categories, you can simply pass an array of category names to display:
 
+  - 'suggested',
+  - 'smileys_people',
+  - 'animals_nature',
+  - 'food_drink',
+  - 'travel_places',
+  - 'activities',
+  - 'objects',
+  - 'symbols',
+  - 'flags'
+
+  For a more in-depth configuration, you can pass an array with category config:
+
+  ```ts
+  [
+    {
+      category: 'suggested',
+      name: 'Recently Used'
+    },
+    {
+      category: 'smileys_people',
+      name: 'Faces...'
+    }
+  ];
+  ```
+
+- `suggestedEmojisMode`: `SuggestedEmojisMode` - The mode to use for the suggested emojis. Can be either `recent` or `frequent`. Defaults to `recent`.
+  The `SuggestionMode` enum can be imported from the package.
+
+  ```ts
+  import { SuggestionMode } from 'emoji-picker-react';
+  ```
+
+# Customization
+
+## Custom Picker Width and Height
+
+To customize the dimensions of the picker, use the `height` and `width` props:
+
+```jsx
+<EmojiPicker height={500} width={400} />
 ```
-  RECENTLY_USED = 'recently_used',
-  SMILEYS_PEOPLE = 'smileys_people',
-  ANIMALS_NATURE = 'animals_nature',
-  FOOD_DRINK = 'food_drink',
-  TRAVEL_PLACES = 'travel_places',
-  ACTIVITIES = 'activities',
-  OBJECTS = 'objects',
-  SYMBOLS = 'symbols',
-  FLAGS = 'flags'
+
+## CSS Variables
+
+The picker can be customized via css variables. The root selector for the picker is `.EmojiPickerReact`, when overriding, make sure to provide a more specific selector.
+
+In dark mode, the specific selector is `.EmojiPickerReact.epr-dark-theme`.
+
+The list of possible variables is quite extensive, but the main ones you may want to override are:
+
+- `--epr-emoji-size`: The size of the emojis.
+- `--epr-emoji-gap`: The space between emojis.
+
+- `--epr-hover-bg-color` Hovered emoji background color.
+- `--epr-bg-color`: The background color of the picker. When changing it, you should also change `--epr-category-label-bg-color` as they are usually the same color.
+- `--epr-text-color`: The text color in the picker.
+
+# Rendering Output Emojis in Your App
+
+The picker exports an `Emoji` component. The emoji component is the same used within the picker, so it will render the same way as the emojis in the picker. You can choose to render emojis either as native, or as images.
+
+## Props
+
+| Name         | Type         | Default            | Description                                                                                 |
+| ------------ | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |
+| `unified`    | string       | ""                 | The unified code of the emoji.                                                              |
+| `size`       | number       | 32                 | The size of the emoji.                                                                      |
+| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
+| `lazyLoad`   | boolean      | `false`            | Whether to lazy load the emoji. image                                                       |
+
+```js
+import { Emoji, EmojiStyle } from 'emoji-picker-react';
+
+export function MyApp() {
+  return (
+    <p>
+      My Favorite emoji is:
+      <Emoji unified="1f423" size="25" />
+    </p>
+  );
+}
 ```
 
-For a more in-depth configuration, you can pass an array with category config:
+# Troubleshooting
 
-```ts
-[{
-  category: Categories.RECENTLY_USED;
-  name: "Recently Used";
-}, {
-  category: Categories.SMILEYS_PEOPLE;
-  name: "Faces...";
-}]
+## Error Boundary
+
+emoji-picker-react has a top-level error boundary, trying to catch rendering errors. It won't catch server side related errors, or event handlers errors. If an error is caught, the picker will not render, and a console error will be logged.
+
+## Next.js
+
+To avoid errors such as "document is not defined" on the server side, you should make sure the library is only imported on the client side. Here is how to do that:
+
+```javascript
+import dynamic from 'next/dynamic';
+
+const Picker = dynamic(
+  () => {
+    return import('emoji-picker-react');
+  },
+  { ssr: false }
+);
+```
+
+## Vite
+
+For reference, if you only need to shim global, you can add
+
+```html
+<script>
+  window.global = window;
+</script>
 ```

package/dist/DomUtils/classNames.d.ts

@@ -2,5 +2,13 @@ export declare 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 declare function asSelectors(...classNames: ClassNames[]): string;

package/dist/DomUtils/elementPositionInRow.d.ts

@@ -0,0 +1,10 @@
+import { NullableElement } from './selectors';
+export declare function elementCountInRow(parent: NullableElement, element: NullableElement): number;
+export declare function elementIndexInRow(parent: NullableElement, element: NullableElement): number;
+export declare function rowNumber(parent: NullableElement, element: NullableElement): number;
+export declare function hasNextRow(parent: NullableElement, element: NullableElement): boolean;
+export declare function getElementInRow(elements: HTMLElement[], row: number, elementsInRow: number, indexInRow: number): NullableElement;
+export declare function getElementInNextRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
+export declare function getElementInPrevRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
+export declare function firstVisibleElementInContainer(parent: NullableElement, elements: HTMLElement[]): NullableElement;
+export declare function hasNextElementSibling(element: HTMLElement): boolean;

package/dist/DomUtils/focusElement.d.ts

@@ -0,0 +1,5 @@
+import { NullableElement } from './selectors';
+export declare function focusElement(element: NullableElement): void;
+export declare function focusPrevElementSibling(element: NullableElement): void;
+export declare function focusNextElementSibling(element: NullableElement): void;
+export declare function focusFirstElementChild(element: NullableElement): void;

package/dist/DomUtils/getActiveElement.d.ts

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

package/dist/DomUtils/isDarkTheme.d.ts

@@ -0,0 +1 @@
+export declare function isSystemDarkTheme(): boolean;

package/dist/DomUtils/keyboardNavigation.d.ts

@@ -0,0 +1,8 @@
+import { NullableElement } from './selectors';
+export declare function focusFirstVisibleEmoji(parent: NullableElement): void;
+export declare function focusAndClickFirstVisibleEmoji(parent: NullableElement): void;
+export declare function focusLastVisibleEmoji(parent: NullableElement): void;
+export declare function focusNextVisibleEmoji(element: NullableElement): void;
+export declare function focusPrevVisibleEmoji(element: NullableElement): void;
+export declare function focusVisibleEmojiOneRowUp(element: NullableElement, exitUp: () => void): void;
+export declare function focusVisibleEmojiOneRowDown(element: NullableElement): void;

package/dist/DomUtils/scrollTo.d.ts

@@ -1 +1,3 @@
-export declare function scrollTo(root: HTMLElement | null, top?: number): void;
+import { NullableElement } from './selectors';
+export declare function scrollTo(root: NullableElement, top?: number): void;
+export declare function useScrollTo(): (top: number) => void;

package/dist/DomUtils/selectors.d.ts

@@ -1,12 +1,25 @@
 import { DataEmoji } from '../dataUtils/DataTypes';
-export declare function buttonFromEmoji(emojiElement: HTMLElement | null): HTMLButtonElement | null;
-export declare function emojiFromElement(element: HTMLElement | null): DataEmoji | undefined;
-export declare function isEmojiElement(element: HTMLElement | null): boolean;
-export declare function closestCategory(element: HTMLElement | null): HTMLElement | null;
-export declare function categoryLabelFromCategory(category: HTMLElement | null): HTMLElement | null;
-export declare function closestCategoryLabel(element: null | HTMLElement): HTMLElement | null;
-export declare function elementHeight(element: HTMLElement | null): number;
-export declare function emojiTrueOffsetTop(element: HTMLElement | null): number;
-export declare function emojiTruOffsetLeft(element: HTMLElement | null): number;
-export declare function unifiedFromEmojiElement(emoji: HTMLElement | null): string | null;
-export declare function originalUnifiedFromEmojiElement(emoji: HTMLElement | null): string | null;
+export declare type NullableElement = HTMLElement | null;
+export declare const EmojiButtonSelector: string;
+export declare const VisibleEmojiSelector: string;
+export declare function buttonFromTarget(emojiElement: NullableElement): HTMLButtonElement | null;
+export declare function emojiFromElement(element: NullableElement): [DataEmoji, string] | [];
+export declare function isEmojiElement(element: NullableElement): boolean;
+export declare function categoryLabelFromCategory(category: NullableElement): NullableElement;
+export declare function closestCategoryLabel(element: NullableElement): NullableElement;
+export declare function elementHeight(element: NullableElement): number;
+export declare function emojiTrueOffsetTop(element: NullableElement): number;
+export declare function emojiTruOffsetLeft(element: NullableElement): number;
+export declare function unifiedFromEmojiElement(emoji: NullableElement): string | null;
+export declare function originalUnifiedFromEmojiElement(emoji: NullableElement): string | null;
+export declare function isVisibleEmoji(element: HTMLElement): boolean;
+export declare function isHidden(element: NullableElement): boolean;
+export declare function allVisibleEmojis(parent: NullableElement): HTMLElement[];
+export declare function lastVisibleEmoji(element: NullableElement): NullableElement;
+export declare function nextVisibleEmoji(element: HTMLElement): NullableElement;
+export declare function prevVisibleEmoji(element: HTMLElement): NullableElement;
+export declare function firstVisibleEmoji(parent: NullableElement): NullableElement;
+export declare function prevCategory(element: NullableElement): NullableElement;
+export declare function nextCategory(element: NullableElement): NullableElement;
+export declare function closestCategory(element: NullableElement): NullableElement;
+export declare function closestCategoryContent(element: NullableElement): NullableElement;

package/dist/EmojiPickerReact.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { PickerConfig } from './config/config';
+import './EmojiPickerReact.css';
+export interface Props extends PickerConfig {
+}
+export default function EmojiPicker(props: Props): JSX.Element;

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export default class ErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+}, {
+    hasError: boolean;
+}> {
+    constructor(props: {
+        children: React.ReactNode;
+    });
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: any): void;
+    render(): number | boolean | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactFragment | null | undefined;
+}

package/dist/components/body/{RecentlyUsed.d.ts → Suggested.d.ts}

@@ -3,5 +3,5 @@ import { CategoryConfig } from '../../config/categoryConfig';
 declare type Props = Readonly<{
     categoryConfig: CategoryConfig;
 }>;
-export declare function RecentlyUsed({ categoryConfig }: Props): JSX.Element | null;
+export declare function Suggested({ categoryConfig }: Props): JSX.Element;
 export {};

package/dist/components/context/ElementRefContext.d.ts

@@ -1,17 +1,14 @@
 import * as React from 'react';
+import { NullableElement } from '../../DomUtils/selectors';
 export declare function ElementRefContextProvider({ children }: {
     children: React.ReactNode;
 }): JSX.Element;
-export declare type ElementRef = React.MutableRefObject<HTMLElement | null>;
-declare type ElementRefs = {
-    PickerMainRef: ElementRef;
-    AnchoredEmojiRef: ElementRef;
-    BodyRef: React.MutableRefObject<HTMLElement | null>;
-};
-declare type ElementRefKeys = keyof ElementRefs;
-export declare function useElementRef(key: ElementRefKeys): ElementRef | React.MutableRefObject<HTMLElement | null>;
-export declare function usePickerMainRef(): ElementRef | React.MutableRefObject<HTMLElement | null>;
-export declare function useAnchoredEmojiRef(): ElementRef | React.MutableRefObject<HTMLElement | null>;
-export declare function useSetAnchoredEmojiRef(): (target: null | HTMLElement) => void;
-export declare function useBodyRef(): React.MutableRefObject<HTMLDivElement | null>;
-export {};
+export declare type ElementRef<E extends HTMLElement = HTMLElement> = React.MutableRefObject<E | null>;
+export declare function usePickerMainRef(): ElementRef<HTMLElement>;
+export declare function useAnchoredEmojiRef(): ElementRef<HTMLElement>;
+export declare function useSetAnchoredEmojiRef(): (target: NullableElement) => void;
+export declare function useBodyRef(): ElementRef<HTMLDivElement>;
+export declare function useSearchInputRef(): ElementRef<HTMLInputElement>;
+export declare function useSkinTonePickerRef(): ElementRef<HTMLDivElement>;
+export declare function useCategoryNavigationRef(): ElementRef<HTMLDivElement>;
+export declare function useVariationPickerRef(): ElementRef<HTMLDivElement>;

package/dist/components/context/PickerContext.d.ts

@@ -9,13 +9,13 @@ declare type Props = Readonly<{
 }>;
 export declare function useFilterRef(): React.MutableRefObject<Record<string, Record<string, DataEmoji>>>;
 export declare function useDisallowClickRef(): React.MutableRefObject<boolean>;
-export declare function useSearchTermState(): [string, (term: string) => void];
-export declare function useActiveCategoryState(): [ActiveCategoryState, (nextActive: string) => void, (nextActive: string) => void];
+export declare function useDisallowMouseRef(): React.MutableRefObject<boolean>;
+export declare function useSearchTermState(): [string, (term: string) => Promise<string>];
 export declare function useActiveSkinToneState(): [SkinTones, (skinTone: SkinTones) => void];
 export declare function useEmojisThatFailedToLoadState(): ReactState<Set<string>>;
 export declare function useIsPastInitialLoad(): boolean;
 export declare function useEmojiVariationPickerState(): ReactState<DataEmoji | null>;
 export declare function useSkinToneFanOpenState(): ReactState<boolean>;
+export declare function useUpdateSuggested(): [number, () => void];
 export declare type FilterState = Record<string, FilterDict>;
-declare type ActiveCategoryState = null | string;
 export {};

package/dist/components/emoji/Emoji.d.ts

@@ -1,16 +1,20 @@
 /// <reference types="react" />
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { EmojiRef } from '../../DomUtils/emojiElementRef';
 import { EmojiStyle } from '../../types/exposedTypes';
 import './Emoji.css';
-declare type Props = Readonly<{
+declare type ClickableEmojiProps = Readonly<BaseProps & {
     hidden?: boolean;
-    emojiStyle: EmojiStyle;
+    showVariations?: boolean;
+    hiddenOnSearch?: boolean;
     emoji: DataEmoji;
+}>;
+declare type BaseProps = {
+    emoji?: DataEmoji;
+    emojiStyle: EmojiStyle;
     unified: string;
-    showVariations?: boolean;
     size?: number;
-    emojiRef?: EmojiRef;
-}>;
-export declare function Emoji({ emoji, unified, hidden, emojiStyle, showVariations, size, emojiRef }: Props): JSX.Element;
+    lazyLoad?: boolean;
+};
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad }: ClickableEmojiProps): JSX.Element;
+export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad }: BaseProps): JSX.Element;
 export {};

package/dist/components/emoji/ExportedEmoji.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { EmojiStyle } from '../../types/exposedTypes';
+export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad }: {
+    unified: string;
+    emojiStyle?: EmojiStyle;
+    size?: number;
+    lazyLoad?: boolean;
+}): JSX.Element | null;

package/dist/components/footer/Preview.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import './Preview.css';
 export declare function Preview(): JSX.Element | null;
-export declare type HoveredEmoji = null | {
+export declare type PreviewEmoji = null | {
     unified: string;
     originalUnified: string;
 };

package/dist/config/categoryConfig.d.ts

@@ -1,6 +1,7 @@
-import { Categories } from '../types/exposedTypes';
+import { Categories, SuggestionMode } from '../types/exposedTypes';
 export { Categories };
-export declare const baseCategoriesConfig: CategoryConfig[];
+export declare const SuggestedRecent: CategoryConfig;
+export declare function baseCategoriesConfig(modifiers?: Record<Categories, CategoryConfig>): CategoriesConfig;
 export declare function categoryFromCategoryConfig(category: CategoryConfig): Categories;
 export declare function categoryNameFromCategoryConfig(category: CategoryConfig): string;
 export declare type CategoriesConfig = CategoryConfig[];
@@ -9,4 +10,7 @@ export declare type CategoryConfig = {
     name: string;
 };
 export declare type UserCategoryConfig = Array<Categories | CategoryConfig>;
-export declare function mergeCategoriesConfig(userCategoriesConfig?: UserCategoryConfig): CategoriesConfig;
+export declare function mergeCategoriesConfig(userCategoriesConfig?: UserCategoryConfig, modifiers?: CategoryConfigModifiers): CategoriesConfig;
+declare type CategoryConfigModifiers = {
+    suggestionMode?: SuggestionMode;
+};

package/dist/config/config.d.ts

@@ -1,16 +1,6 @@
-import { EmojiClickData, EmojiStyle, SkinTones, Theme } from '../types/exposedTypes';
+import { EmojiClickData, EmojiStyle, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
-export declare function mergeConfig(userConfig?: PickerConfig): {
-    categories: CategoriesConfig;
-    searchPlaceHolder: string;
-    defaultSkinTone: SkinTones;
-    skinTonesDisabled: boolean;
-    autoFocusSearch: boolean;
-    emojiStyle: EmojiStyle;
-    onEmojiClick: (event: MouseEvent, emoji: EmojiClickData) => void;
-    showPreview: boolean;
-    theme: Theme;
-};
+export declare function mergeConfig(userConfig?: PickerConfig): PickerConfigInternal;
 export declare function basePickerConfig(): PickerConfigInternal;
 export declare type PickerConfigInternal = {
     searchPlaceHolder: string;
@@ -19,8 +9,21 @@ export declare type PickerConfigInternal = {
     autoFocusSearch: boolean;
     emojiStyle: EmojiStyle;
     categories: CategoriesConfig;
-    onEmojiClick: (event: MouseEvent, emoji: EmojiClickData) => void;
-    showPreview: boolean;
+    onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
     theme: Theme;
+    suggestedEmojisMode: SuggestionMode;
+    lazyLoadEmojis: boolean;
+    previewConfig: PreviewConfig;
+    height: number;
+    width: number;
+};
+export declare type PreviewConfig = {
+    defaultEmoji: string;
+    defaultCaption: string;
+    showPreview: boolean;
 };
-export declare type PickerConfig = Partial<PickerConfigInternal>;
+declare type ConfigExternal = {
+    previewConfig: Partial<PreviewConfig>;
+} & Omit<PickerConfigInternal, 'previewConfig'>;
+export declare type PickerConfig = Partial<ConfigExternal>;
+export {};

package/dist/config/useConfig.d.ts

@@ -1,11 +1,18 @@
-import { EmojiClickData, EmojiStyle, SkinTones } from '../types/exposedTypes';
+import { EmojiClickData, EmojiStyle, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
+import { PreviewConfig } from './config';
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useSkinTonesDisabledConfig(): boolean;
 export declare function useEmojiStyleConfig(): EmojiStyle;
 export declare function useAutoFocusSearchConfig(): boolean;
 export declare function useCategoriesConfig(): CategoriesConfig;
-export declare function useOnEmojiClickConfig(): (event: MouseEvent, emoji: EmojiClickData) => void;
-export declare function useShowPreviewConfig(): boolean;
-export declare function useThemeConfig(): string;
+export declare function useOnEmojiClickConfig(): (emoji: EmojiClickData, event: MouseEvent) => void;
+export declare function usePreviewConfig(): PreviewConfig;
+export declare function useThemeConfig(): Theme;
+export declare function useSuggestedEmojisModeConfig(): SuggestionMode;
+export declare function useLazyLoadEmojisConfig(): boolean;
+export declare function usePickerSizeConfig(): {
+    height: number;
+    width: number;
+};

package/dist/data/skinToneVariations.d.ts

@@ -1,3 +1,5 @@
 import { SkinTones } from '../types/exposedTypes';
 declare const skinToneVariations: SkinTones[];
+export declare const skinTonesNamed: Record<string, string>;
+export declare const skinTonesMapped: Record<string, string>;
 export default skinToneVariations;

package/dist/dataUtils/emojiSelectors.d.ts

@@ -1,8 +1,9 @@
-import { Categories } from './../config/categoryConfig';
-import { DataEmoji, DataEmojis } from './DataTypes';
+import { Categories } from '../config/categoryConfig';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
+import { DataEmoji, DataEmojis } from './DataTypes';
 export declare function emojiNames(emoji: DataEmoji): string[];
 export declare function emojiName(emoji: DataEmoji): string;
+export declare function unifiedWithoutSkinTone(unified: string): string;
 export declare function emojiUrl(emojiStyle: EmojiStyle, emoji: DataEmoji, skinTone?: string): string;
 export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
 export declare function emojisByCategory(category: Categories): DataEmojis;

package/dist/dataUtils/suggested.d.ts

@@ -0,0 +1,11 @@
+import { SkinTones, SuggestionMode } from '../types/exposedTypes';
+import { DataEmoji } from './DataTypes';
+declare type SuggestedItem = {
+    unified: string;
+    original: string;
+    count: number;
+};
+declare type Suggested = SuggestedItem[];
+export declare function getsuggested(mode?: SuggestionMode): Suggested;
+export declare function setsuggested(emoji: DataEmoji, skinTone: SkinTones): void;
+export {};