emoji-picker-react 4.0.0-rc.10 → 4.0.0-rc.13

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
@@ -24,46 +38,47 @@ npm install emoji-picker-react
 - Different emoji sets (Google, Apple, Facebook, Twitter)
 - Native Emoji support
 
-## Config Props
+# Props
+
+The following props are accepted by them 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:
+- `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;
+  ```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`.
 
-* _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 +86,63 @@ 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`.
 
-- _showPreview_: `boolean` - Whether to show the preview of the selected emoji. Defaults to `true`.
+- `showPreview`: `boolean` - Whether to show the preview of the selected emoji. 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:
 
-```
-  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'
+  - 'recently_used',
+  - '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: 'recently_used',
+      name: 'Recently Used'
+    },
+    {
+      category: 'smileys_people',
+      name: 'Faces...'
+    }
+  ];
+  ```
+
+# Troubleshooting
+
+## 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 }
+);
 ```
 
-For a more in-depth configuration, you can pass an array with category config:
+## Vite
 
-```ts
-[{
-  category: Categories.RECENTLY_USED;
-  name: "Recently Used";
-}, {
-  category: Categories.SMILEYS_PEOPLE;
-  name: "Faces...";
-}]
+For reference, if you only need to shim global, you can add
+
+```html
+<script>
+  window.global = window;
+</script>
 ```

package/dist/DomUtils/isDarkTheme.d.ts

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

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

@@ -16,6 +16,7 @@ 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 useUpdateRecentlyUsed(): [number, () => void];
 export declare type FilterState = Record<string, FilterDict>;
 declare type ActiveCategoryState = null | string;
 export {};

package/dist/config/config.d.ts

@@ -7,7 +7,7 @@ export declare function mergeConfig(userConfig?: PickerConfig): {
     skinTonesDisabled: boolean;
     autoFocusSearch: boolean;
     emojiStyle: EmojiStyle;
-    onEmojiClick: (event: MouseEvent, emoji: EmojiClickData) => void;
+    onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
     showPreview: boolean;
     theme: Theme;
 };
@@ -19,7 +19,7 @@ export declare type PickerConfigInternal = {
     autoFocusSearch: boolean;
     emojiStyle: EmojiStyle;
     categories: CategoriesConfig;
-    onEmojiClick: (event: MouseEvent, emoji: EmojiClickData) => void;
+    onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
     showPreview: boolean;
     theme: Theme;
 };

package/dist/config/useConfig.d.ts

@@ -1,4 +1,4 @@
-import { EmojiClickData, EmojiStyle, SkinTones } from '../types/exposedTypes';
+import { EmojiClickData, EmojiStyle, SkinTones, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
@@ -6,6 +6,6 @@ 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 useOnEmojiClickConfig(): (emoji: EmojiClickData, event: MouseEvent) => void;
 export declare function useShowPreviewConfig(): boolean;
-export declare function useThemeConfig(): string;
+export declare function useThemeConfig(): Theme;

package/dist/emoji-picker-react.cjs.development.js

@@ -200,8 +200,8 @@ function basePickerConfig() {
     defaultSkinTone: exports.SkinTones.NEUTRAL,
     emojiStyle: exports.EmojiStyle.APPLE,
     onEmojiClick: function defaultOnClickHandler( // @ts-ignore
-    event, // @ts-ignore
-    emoji) {},
+    emoji, // @ts-ignore
+    event) {},
     searchPlaceHolder: 'Search',
     showPreview: true,
     skinTonesDisabled: false,
@@ -223,6 +223,14 @@ function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
 
+function isSystemDarkTheme() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 function useSearchPlaceHolderConfig() {
   var _usePickerConfig = usePickerConfig(),
       searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
@@ -275,6 +283,10 @@ function useThemeConfig() {
   var _usePickerConfig9 = usePickerConfig(),
       theme = _usePickerConfig9.theme;
 
+  if (theme === exports.Theme.AUTO) {
+    return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
+  }
+
   return theme;
 }
 
@@ -15474,6 +15486,7 @@ function PickerContextProvider(_ref) {
 
   var filterRef = React.useRef(alphaNumericEmojiIndex);
   var disallowClickRef = React.useRef(false);
+  var recentlyUsedUpdateState = useDebouncedState(Date.now(), 250);
   var searchTerm = useDebouncedState('', 100);
   var skinToneFanOpenState = React.useState(false);
   var activeSkinTone = React.useState(defaultSkinTone);
@@ -15488,6 +15501,7 @@ function PickerContextProvider(_ref) {
   useMarkInitialLoad(setIsPastInitialLoad);
   return React.createElement(PickerContext.Provider, {
     value: {
+      recentlyUsedUpdateState: recentlyUsedUpdateState,
       filterRef: filterRef,
       searchTerm: searchTerm,
       activeCategoryState: activeCategoryState,
@@ -15501,6 +15515,7 @@ function PickerContextProvider(_ref) {
   }, children);
 }
 var PickerContext = /*#__PURE__*/React.createContext({
+  recentlyUsedUpdateState: [/*#__PURE__*/Date.now(), function () {}],
   searchTerm: ['', function () {}],
   activeCategoryState: [null, function () {}],
   activeSkinTone: [exports.SkinTones.NEUTRAL, function () {}],
@@ -15581,6 +15596,16 @@ function useSkinToneFanOpenState() {
 
   return skinToneFanOpenState;
 }
+function useUpdateRecentlyUsed() {
+  var _React$useContext10 = React.useContext(PickerContext),
+      recentlyUsedUpdateState = _React$useContext10.recentlyUsedUpdateState;
+
+  var recentlyUsedUpdated = recentlyUsedUpdateState[0],
+      setRecentlyUsedUpdate = recentlyUsedUpdateState[1];
+  return [recentlyUsedUpdated, function updateRecentlyUsed() {
+    setRecentlyUsedUpdate(Date.now());
+  }];
+}
 
 function useActiveCategoryScrollDetection(bodyRef) {
   var _useActiveCategorySta = useActiveCategoryState(),
@@ -15755,11 +15780,9 @@ function setRecentlyUsed(emoji, skinTone) {
   nextList.length = Math.min(nextList.length, 14);
 
   try {
-    setTimeout(function () {
-      var _window3;
+    var _window3;
 
-      (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(RECENTLY_USED_LS_KEY, JSON.stringify(nextList)); // Prevents the change from being seen immediately.
-    }, 10);
+    (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(RECENTLY_USED_LS_KEY, JSON.stringify(nextList)); // Prevents the change from being seen immediately.
   } catch (_unused2) {// ignore
   }
 }
@@ -15826,6 +15849,10 @@ function useMouseDownHandlers(BodyRef) {
 
   var onEmojiClick = useOnEmojiClickConfig();
   var emojiStyle = useEmojiStyleConfig();
+
+  var _useUpdateRecentlyUse = useUpdateRecentlyUsed(),
+      updateRecentlyUsed = _useUpdateRecentlyUse[1];
+
   React.useEffect(function () {
     if (!BodyRef.current) {
       return;
@@ -15862,8 +15889,9 @@ function useMouseDownHandlers(BodyRef) {
 
     var unified = emojiUnified(emoji);
     var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
+    updateRecentlyUsed();
     setRecentlyUsed(emoji, skinToneToUse);
-    onEmojiClick(event, emojiClickOutput(emoji, skinToneToUse));
+    onEmojiClick(emojiClickOutput(emoji, skinToneToUse), event);
   }
 
   function onMouseDown(event) {
@@ -15892,7 +15920,7 @@ function useMouseDownHandlers(BodyRef) {
       closeAllOpenToggles();
       setAnchoredEmojiRef(event.target);
       setEmojiVariationPicker(emoji);
-    }, 250);
+    }, 500);
   }
 
   function onMouseUp() {
@@ -16252,10 +16280,15 @@ function EmojiCategory(_ref) {
 function RecentlyUsed(_ref) {
   var categoryConfig = _ref.categoryConfig;
 
+  var _useUpdateRecentlyUse = useUpdateRecentlyUsed(),
+      recentlyUsedUpdated = _useUpdateRecentlyUse[0];
+
   var _useSearchTermState = useSearchTermState(),
       searchTerm = _useSearchTermState[0];
 
-  var recentlyUsed = getRecentlyUsed();
+  var recentlyUsed = React.useMemo(function () {
+    return getRecentlyUsed();
+  }, [recentlyUsedUpdated]);
   var emojiStyle = useEmojiStyleConfig();
 
   if (searchTerm) {