emoji-picker-react 4.6.15 → 4.7.1

package/README.md

@@ -2,14 +2,19 @@
 
 ![Picker](https://user-images.githubusercontent.com/11255103/192167134-8205eb89-a71d-4463-8f3a-940e844917d5.gif)
 
+## Usage as a Reactions Picker
 
-____
+![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)
+
+![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/38a9c652-ee2e-43d4-b0e6-33735f1bcbe7)
+
+---
 
 _If you enjoy using emoji-picker-react<br/>
 You should also consider trying:<br/>
 <img src="https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png" height="16"/> [Vest validation framework](https://vestjs.dev).<br/>_
 
-____
+---
 
 ## What to know before using
 
@@ -21,7 +26,7 @@ ____
 npm install emoji-picker-react
 ```
 
-## Usage:
+## Usage
 
 ```jsx
 import EmojiPicker from 'emoji-picker-react';
@@ -35,7 +40,7 @@ function App() {
 }
 ```
 
-## Shout Outs!
+## Shout Outs
 
 |                                                                                                 Component Design 🎨                                                                                                 |
 | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
@@ -53,33 +58,37 @@ function App() {
 - Different emoji sets (Google, Apple, Facebook, Twitter)
 - Native Emoji support
 - Emoji Component To Render Emojis in your app
+- Reactions Picker
 
 # Props
 
 The following props are accepted by them picker:
 
-| 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.                                                                                       |
-| searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                |
-| skinTonePickerLocation | string                                                 | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                 |
-| emojiVersion           | `string`                                               | -          | Allows displaying emojis up to a certain version for compatibility.                                                                        |
-| `className`            | `string`                                               | -          | Adds a class name to the root element of the picker. |
-| `width`                | `number`/`string`                                      | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.   |
-| `height`               | `number`/`string`                                      | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
-| `style`                | `React.CSSProperties`                                  | `{}`       | Adds inline style to the root element of the picker. |
-| getEmojiUrl            | `Function`                                             | -          | Allows to customize the emoji url and provide your own image host.                                                                         |
-| categories             | `Array`                                                | -          | Allows full config over ordering, naming and display of categories.                                                                        |
-| customEmojis           | `Array<{names: string[], imgUrl: string, id: string}>` | -          | Allows adding custom emojis to the picker.                                                                                                 |
+| 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.                                                                                                       |
+| searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                                |
+| skinTonePickerLocation | string                                                 | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                                 |
+| emojiVersion           | `string`                                               | -          | Allows displaying emojis up to a certain version for compatibility.                                                                                        |
+| `className`            | `string`                                               | -          | Adds a class name to the root element of the picker.                                                                                                       |
+| `width`                | `number`/`string`                                      | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.                   |
+| `height`               | `number`/`string`                                      | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string.                 |
+| `style`                | `React.CSSProperties`                                  | `{}`       | Adds inline style to the root element of the picker.                                                                                                       |
+| getEmojiUrl            | `Function`                                             | -          | Allows to customize the emoji url and provide your own image host.                                                                                         |
+| categories             | `Array`                                                | -          | Allows full config over ordering, naming and display of categories.                                                                                        |
+| customEmojis           | `Array<{names: string[], imgUrl: string, id: string}>` | -          | Allows adding custom emojis to the picker.                                                                                                                 |
+| reactionsDefaultOpen   | `boolean`                                              | `false`    | Controls whether the reactions picker is on the initial mount instead of the main picker component.                                                        |
+| reactions              | string[]                                               | -          | Controls the reactions to display in the reactions picker. Takes unified emoji ids                                                                         |
+| onReactionClick        | `Function`                                             | -          | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
 
 ## Full details
 
@@ -113,10 +122,14 @@ The following props are accepted by them picker:
   ```
 
 * `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:
+- `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:
 
   - ✋ 'neutral'
   - ✋🏻 '1f3fb'
@@ -190,6 +203,7 @@ import { SkinTones } from 'emoji-picker-react';
   ```
 
 - `emojiVersion`: `string` - Allows displaying emojis up to a certain version for compatibility. The passed version will be parsed as a float and each emoji will be tested against it. Common values are:
+
   - `"0.6"`
   - `"1.0"`
   - `"2.0"`
@@ -197,7 +211,7 @@ import { SkinTones } from 'emoji-picker-react';
   - `"4.0"`
   - `"5.0"`
 
-* `getEmojiUrl`: `(unified: string, emojiStyle: EmojiStyle) => string` - Allows to customize the emoji url and provide your own image host. The function receives the emoji unified and the emoji style as parameters. The function should return the url of the emoji image.
+- `getEmojiUrl`: `(unified: string, emojiStyle: EmojiStyle) => string` - Allows to customize the emoji url and provide your own image host. The function receives the emoji unified and the emoji style as parameters. The function should return the url of the emoji image.
 
 ## Custom Emojis
 
@@ -207,7 +221,7 @@ id: Unique identifier for each of the custom emojis
 names: an array of string identifiers, will be used both for display, search and indexing.
 imgUrl: URL for the emoji image
 
-### Usage Example:
+### Usage Example
 
 ```jsx
 <Picker
@@ -246,6 +260,22 @@ Here are some additional things to keep in mind about custom emojis:
 - The location or name of the Custom category can be controlled via the categories prop.
 - The custom emojis will be indexed by their id property. This means that you can search for custom emojis by their id or names.
 
+## Reactions Picker
+
+![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)
+
+![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/38a9c652-ee2e-43d4-b0e6-33735f1bcbe7)
+
+The picker can be used as a reactions picker. To use it as a reactions picker, you should set the reactionsDefaultOpen prop to true. This will cause the picker to the reactions picker on the initial mount instead of the main picker component.
+
+To customize the reactions, you should pass an array of unified emoji ids to the reactions prop.
+
+The reactions picker uses the same event handlers, and the same css variables for customizations.
+
+```jsx
+<Picker reactionsDefaultOpen={true} onReactionClick={handleReaction} />
+```
+
 # Customization
 
 ## Custom Picker Width and Height

package/dist/components/Reactions/BtnPlus.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function BtnPlus(): JSX.Element;

package/dist/components/Reactions/DEFAULT_REACTIONS.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_REACTIONS: string[];

package/dist/components/Reactions/Reactions.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Reactions(): JSX.Element | null;

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

@@ -8,6 +8,7 @@ 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 useReactionsRef(): ElementRef<HTMLUListElement>;
 export declare function useSearchInputRef(): ElementRef<HTMLInputElement>;
 export declare function useSkinTonePickerRef(): ElementRef<HTMLDivElement>;
 export declare function useCategoryNavigationRef(): ElementRef<HTMLDivElement>;

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

@@ -10,6 +10,7 @@ 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 useDisallowMouseRef(): React.MutableRefObject<boolean>;
+export declare function useReactionsModeState(): ReactState<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>>;

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

@@ -7,6 +7,7 @@ declare type ClickableEmojiButtonProps = Readonly<{
     children: React.ReactNode;
     hasVariations: boolean;
     unified?: string;
+    round?: boolean;
 }>;
-export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children }: ClickableEmojiButtonProps): JSX.Element;
+export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, round }: ClickableEmojiButtonProps): JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ declare type ClickableEmojiProps = Readonly<BaseEmojiProps & {
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
+    round?: boolean;
 }>;
-export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl }: ClickableEmojiProps): JSX.Element;
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, round }: ClickableEmojiProps): JSX.Element;
 export {};

package/dist/config/config.d.ts

@@ -32,6 +32,8 @@ export declare type PickerConfigInternal = {
     skinTonePickerLocation: SkinTonePickerLocation;
     unicodeToHide: Set<string>;
     customEmojis: CustomEmoji[];
+    reactionsDefaultOpen: boolean;
+    reactions: string[];
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;
@@ -40,8 +42,10 @@ export declare type PreviewConfig = {
 };
 declare type ConfigExternal = {
     previewConfig: Partial<PreviewConfig>;
-    onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
+    onEmojiClick: MouseDownEvent;
+    onReactionClick: MouseDownEvent;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 export declare type PickerConfig = Partial<ConfigExternal>;
 export declare type PickerDimensions = string | number;
+export declare type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;
 export {};

package/dist/config/mutableConfig.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { EmojiClickData } from '../types/exposedTypes';
+import { MouseDownEvent } from './config';
 export declare type MutableConfig = {
-    onEmojiClick?: (emoji: EmojiClickData, event: MouseEvent) => void;
+    onEmojiClick?: MouseDownEvent;
+    onReactionClick?: MouseDownEvent;
 };
 export declare const MutableConfigContext: React.Context<React.MutableRefObject<MutableConfig>>;
 export declare function useMutableConfig(): React.MutableRefObject<MutableConfig>;

package/dist/config/useConfig.d.ts

@@ -3,6 +3,10 @@ import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, Suggesti
 import { CategoriesConfig } from './categoryConfig';
 import { PreviewConfig } from './config';
 import { CustomEmoji } from './customEmojiConfig';
+export declare enum MOUSE_EVENT_SOURCE {
+    REACTIONS = "reactions",
+    PICKER = "picker"
+}
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useSkinTonesDisabledConfig(): boolean;
@@ -10,16 +14,18 @@ export declare function useEmojiStyleConfig(): EmojiStyle;
 export declare function useAutoFocusSearchConfig(): boolean;
 export declare function useCategoriesConfig(): CategoriesConfig;
 export declare function useCustomEmojisConfig(): CustomEmoji[];
-export declare function useOnEmojiClickConfig(): (emoji: EmojiClickData, event: MouseEvent) => void;
+export declare function useOnEmojiClickConfig(mouseEventSource: MOUSE_EVENT_SOURCE): (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 useClassNameConfig(): string;
 export declare function useStyleConfig(): React.CSSProperties;
+export declare function useReactionsOpenConfig(): boolean;
 export declare function useEmojiVersionConfig(): string | null;
 export declare function useSearchDisabledConfig(): boolean;
 export declare function useSkinTonePickerLocationConfig(): SkinTonePickerLocation;
 export declare function useUnicodeToHide(): Set<string>;
+export declare function useReactionsConfig(): string[];
 export declare function useGetEmojiUrlConfig(): (unified: string, style: EmojiStyle) => string;
 export declare function useSearchResultsConfig(searchResultsCount: number): string;