emoji-picker-react 4.0.0-rc.11 → 4.0.0-rc.12

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/emoji-picker-react.cjs.development.js

@@ -15486,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);
@@ -15500,6 +15501,7 @@ function PickerContextProvider(_ref) {
   useMarkInitialLoad(setIsPastInitialLoad);
   return React.createElement(PickerContext.Provider, {
     value: {
+      recentlyUsedUpdateState: recentlyUsedUpdateState,
       filterRef: filterRef,
       searchTerm: searchTerm,
       activeCategoryState: activeCategoryState,
@@ -15513,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 () {}],
@@ -15593,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(),
@@ -15767,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
   }
 }
@@ -15838,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;
@@ -15874,6 +15889,7 @@ function useMouseDownHandlers(BodyRef) {
 
     var unified = emojiUnified(emoji);
     var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
+    updateRecentlyUsed();
     setRecentlyUsed(emoji, skinToneToUse);
     onEmojiClick(event, emojiClickOutput(emoji, skinToneToUse));
   }
@@ -15904,7 +15920,7 @@ function useMouseDownHandlers(BodyRef) {
       closeAllOpenToggles();
       setAnchoredEmojiRef(event.target);
       setEmojiVariationPicker(emoji);
-    }, 250);
+    }, 500);
   }
 
   function onMouseUp() {
@@ -16264,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) {