emoji-picker-react 4.22.2 → 5.0.0

package/src/components/context/PickerContext.tsx

@@ -1,185 +1,660 @@
 import * as React from 'react';
 import { useState } from 'react';
 
+import { isJsdom } from '../../DomUtils/isJsdom';
 import {
+  useEmojiStyleConfig,
+  useGetEmojiUrlConfig,
+  useCustomEmojisConfig,
   useDefaultSkinToneConfig,
+  useSkinToneConfig,
+  useDefaultSearchValueConfig,
   useReactionsOpenConfig,
+  useSearchValueConfig,
 } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
+import {
+  addedIn,
+  emojiUnified,
+  emojiVariations,
+} from '../../dataUtils/emojiUtils';
+import { NATIVE_PROBE_BATCH } from '../../dataUtils/nativeEmojiSequenceSupport';
+import {
+  NativeEmojiProbe,
+  NativeEmojiSupport,
+  detectNativeEmojiSupport,
+  isNativeEmojiSupported,
+  nativeSupportSnapshot,
+} from '../../dataUtils/nativeEmojiSupport';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
-import { useDisallowedEmojis } from '../../hooks/useDisallowedEmojis';
 import { FilterDict } from '../../hooks/useFilter';
 import { useMarkInitialLoad } from '../../hooks/useInitialLoad';
-import { SkinTones } from '../../types/exposedTypes';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
+import { createActiveEmojiStore } from '../../state/activeEmojiStore';
+import { NavigationRegistry } from '../../state/navigationRegistry';
+import { isCustomEmoji } from '../../typeRefinements/typeRefinements';
+import { EmojiStyle, SkinTones } from '../../types/exposedTypes';
 
+import { usePickerMainRef } from './ElementRefContext';
 import { usePickerDataContext } from './PickerDataContext';
 
-export function PickerContextProvider({ children }: Props) {
-  const disallowedEmojis = useDisallowedEmojis();
-  const defaultSkinTone = useDefaultSkinToneConfig();
-  const reactionsDefaultOpen = useReactionsOpenConfig();
-  const { searchIndex } = usePickerDataContext();
+// One Root-scoped controller, narrowly sliced.
+//
+// The v4 provider exposed a single omnibus context whose value identity
+// changed for unrelated state, so every subscriber rerendered on every
+// update. This module still owns the same state (same hook names, same
+// defaults, same behavior) but splits it into one stable services context
+// plus narrow per-domain contexts. Each slice value is memoized on its own
+// state only, so a reactions toggle never rerenders search subscribers,
+// scroll/geometry work never rerenders search/category/preview/reactions
+// subscribers, and each Root instance is isolated by construction.
+//
+// Active hover/focus subscriptions are keyed by cell so only the previous
+// and next active cells rerender, while custom previews subscribe to the shared
+// slice could provide.
+//
+// Only React-16.8-compatible runtime APIs are used here; the React floor
+// scan (npm run check:react-floor) guards against newer hook APIs.
 
-  // Initialize the filter with the inititial dictionary
-  const filterRef = React.useRef<FilterState>(searchIndex);
-
-  React.useEffect(() => {
-    filterRef.current = searchIndex;
-  }, [searchIndex]);
-  const disallowClickRef = React.useRef<boolean>(false);
-  const disallowMouseRef = React.useRef<boolean>(false);
-  const disallowedEmojisRef =
-    React.useRef<Record<string, boolean>>(disallowedEmojis);
+type ReactState<T> = [T, React.Dispatch<React.SetStateAction<T>>];
 
-  const suggestedUpdateState = useDebouncedState(Date.now(), 200);
-  const searchTerm = useDebouncedState('', 100);
-  const skinToneFanOpenState = useState<boolean>(false);
-  const activeSkinTone = useState<SkinTones>(defaultSkinTone);
-  const activeCategoryState = useState<ActiveCategoryState>(null);
-  const emojisThatFailedToLoadState = useState<Set<string>>(new Set());
-  const emojiVariationPickerState = useState<DataEmoji | null>(null);
-  const reactionsModeState = useState(reactionsDefaultOpen);
-  const [isPastInitialLoad, setIsPastInitialLoad] = useState(false);
-  const visibleCategoriesState = useState<string[]>([]);
-  const emojiSizeState = useState<number | null>(null);
+// Memoize a state tuple on its state value alone. Setters from useState are
+// stable; debounced setters close over stable setState + timer ref, so any
+// captured instance behaves identically.
+function useSliceValue<T>(tuple: ReactState<T>): ReactState<T> {
+  const [state, setState] = tuple;
+  // setState from useState is stable; the value intentionally re-memoizes on
+  // state changes only.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useMemo(() => [state, setState] as ReactState<T>, [state]);
+}
 
-  useMarkInitialLoad(setIsPastInitialLoad);
+function useDebouncedSliceValue<T>(
+  tuple: [T, (value: T) => Promise<T>],
+): [T, (value: T) => Promise<T>] {
+  const [state, setState] = tuple;
+  // The debounced setter is functionally stable (stable setState + timer
+  // ref), so capturing it alongside the state value is safe.
 
-  return (
-    <PickerContext.Provider
-      value={{
-        activeCategoryState,
-        activeSkinTone,
-        disallowClickRef,
-        disallowMouseRef,
-        disallowedEmojisRef,
-        emojiVariationPickerState,
-        emojisThatFailedToLoadState,
-        filterRef,
-        isPastInitialLoad,
-        searchTerm,
-        skinToneFanOpenState,
-        suggestedUpdateState,
-        reactionsModeState,
-        visibleCategoriesState,
-        emojiSizeState,
-      }}
-    >
-      {children}
-    </PickerContext.Provider>
+  return React.useMemo(
+    () => [state, setState] as [T, (value: T) => Promise<T>],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state],
   );
 }
 
-type ReactState<T> = [T, React.Dispatch<React.SetStateAction<T>>];
+export interface PickerServices {
+  activeEmojiStore: ReturnType<typeof createActiveEmojiStore>;
+  filterRef: React.MutableRefObject<FilterState>;
+  filterQueryOrderRef: React.MutableRefObject<string[]>;
+  disallowClickRef: React.MutableRefObject<boolean>;
+  disallowMouseRef: React.MutableRefObject<boolean>;
+  navigationRegistry: NavigationRegistry;
+  requestNativeProbe: RequestNativeProbe;
+}
+
+const PickerServicesContext =
+  /* @__PURE__ */ React.createContext<PickerServices>({
+    activeEmojiStore: createActiveEmojiStore(),
+    filterRef: { current: {} },
+    filterQueryOrderRef: { current: [] },
+    disallowClickRef: { current: false },
+    disallowMouseRef: { current: false },
+    navigationRegistry: new NavigationRegistry(),
+    requestNativeProbe: () => undefined,
+  });
 
-const PickerContext = React.createContext<{
+const SearchSliceContext = /* @__PURE__ */ React.createContext<{
   searchTerm: [string, (term: string) => Promise<string>];
   suggestedUpdateState: [number, (term: number) => void];
-  activeCategoryState: ReactState<ActiveCategoryState>;
+}>({
+  searchTerm: ['', () => new Promise<string>(() => undefined)],
+  suggestedUpdateState: [Date.now(), () => {}],
+});
+
+// Raw input/display state for the search transition.
+// Kept separate from the debounced accepted query above so keystrokes only
+// rerender input subscribers, while commits flow through the query slice.
+const SearchInputSliceContext = /* @__PURE__ */ React.createContext<{
+  displayValue: ReactState<string>;
+  committedValue: ReactState<string>;
+  composing: ReactState<boolean>;
+}>({
+  displayValue: ['', () => {}],
+  committedValue: ['', () => {}],
+  composing: [false, () => {}],
+});
+
+const ReactionsSliceContext = /* @__PURE__ */ React.createContext<
+  ReactState<boolean>
+>([false, () => {}]);
+
+// Hovered/focused emoji (unified + original unified), written by the
+// Viewport's pointer/focus listeners and read by Preview and the public
+// useActiveEmoji hook. Its own slice: hover rerenders only its readers.
+export type ActiveEmojiState = null | {
+  unified: string;
+  originalUnified: string;
+};
+
+const VariationSliceContext = /* @__PURE__ */ React.createContext<
+  ReactState<DataEmoji | null>
+>([null, () => {}]);
+
+const SkinToneSliceContext = /* @__PURE__ */ React.createContext<{
   activeSkinTone: ReactState<SkinTones>;
-  emojisThatFailedToLoadState: ReactState<Set<string>>;
-  isPastInitialLoad: boolean;
-  emojiVariationPickerState: ReactState<DataEmoji | null>;
   skinToneFanOpenState: ReactState<boolean>;
-  filterRef: React.MutableRefObject<FilterState>;
-  disallowClickRef: React.MutableRefObject<boolean>;
-  disallowMouseRef: React.MutableRefObject<boolean>;
-  disallowedEmojisRef: React.MutableRefObject<Record<string, boolean>>;
-  reactionsModeState: ReactState<boolean>;
+}>({
+  activeSkinTone: [SkinTones.NEUTRAL, () => {}],
+  skinToneFanOpenState: [false, () => {}],
+});
+
+const ViewportSliceContext = /* @__PURE__ */ React.createContext<{
+  activeCategoryState: ReactState<ActiveCategoryState>;
   visibleCategoriesState: ReactState<Array<string>>;
   emojiSizeState: ReactState<number | null>;
 }>({
   activeCategoryState: [null, () => {}],
-  activeSkinTone: [SkinTones.NEUTRAL, () => {}],
-  disallowClickRef: { current: false },
-  disallowMouseRef: { current: false },
-  disallowedEmojisRef: { current: {} },
-  emojiVariationPickerState: [null, () => {}],
-  emojisThatFailedToLoadState: [new Set(), () => {}],
-  filterRef: { current: {} },
-  isPastInitialLoad: true,
-  searchTerm: ['', () => new Promise<string>(() => undefined)],
-  skinToneFanOpenState: [false, () => {}],
-  suggestedUpdateState: [Date.now(), () => {}],
-  reactionsModeState: [false, () => {}],
   visibleCategoriesState: [[], () => []],
   emojiSizeState: [null, () => {}],
 });
 
+const LoadSliceContext = /* @__PURE__ */ React.createContext<{
+  emojisThatFailedToLoadState: [Set<string>, (unified: string) => void];
+  isPastInitialLoad: boolean;
+}>({
+  emojisThatFailedToLoadState: [new Set(), () => {}],
+  isPastInitialLoad: true,
+});
+
+// Platform emoji support: a version prediction before paint, refined with
+// exact per-sequence results in the background, and refreshed on font
+// changes. `null` means "no filtering": before mount (SSR and the
+// hydration render), or for image emoji styles. An explicit emojiVersion
+// is an additional cap, not an opt-out.
+const NativeSupportContext =
+  /* @__PURE__ */ React.createContext<NativeEmojiSupport | null>(null);
+
+type RequestNativeProbe = (unifieds: string[]) => void;
+
+/**
+ * Asks for exact checks of identities about to be shown: grid cells in
+ * and near the viewport, their skin tone variants, and reaction choices.
+ */
+export function useRequestNativeProbe(): RequestNativeProbe {
+  return React.useContext(PickerServicesContext).requestNativeProbe;
+}
+
+function useNativeEmojiSupportState(): [
+  NativeEmojiSupport | null,
+  RequestNativeProbe,
+] {
+  const emojiStyle = useEmojiStyleConfig();
+  const { allEmojis } = usePickerDataContext();
+  const PickerMainRef = usePickerMainRef();
+  const shouldDetect = emojiStyle === EmojiStyle.NATIVE;
+  const [snapshot, setSnapshot] = useState<
+    [support: NativeEmojiSupport, data: DataEmoji[]] | null
+  >(null);
+  // Every identity shown in this Root's lifetime, re-checked when the
+  // font changes. Requests can arrive before detection starts.
+  const requestedRef = React.useRef(new Set<string>());
+  const requestRef = React.useRef<RequestNativeProbe>((unifieds) => {
+    unifieds.forEach((unified) => requestedRef.current.add(unified));
+  });
+  const request = React.useCallback<RequestNativeProbe>(
+    (unifieds) => requestRef.current(unifieds),
+    [],
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    if (!shouldDetect || isJsdom()) {
+      setSnapshot(null);
+      return;
+    }
+    // Probe with the font the picker actually renders native emojis in,
+    // so a consumer font (e.g. a country-flag polyfill set through
+    // --epr-emoji-font-family) is what gets measured.
+    const root = PickerMainRef.current;
+    const view = root?.ownerDocument.defaultView;
+    if (!root || !view) return;
+    const requested = requestedRef.current;
+    const inventory: [unified: string, version: number][] = [];
+    // The first emoji of each version in dataset order is its sample.
+    const samples = new Map<number, string>();
+    allEmojis.forEach((emoji) => {
+      if (isCustomEmoji(emoji)) return;
+      const unified = emojiUnified(emoji);
+      const version = addedIn(emoji);
+      if (!samples.has(version)) samples.set(version, unified);
+      [unified, ...emojiVariations(emoji)].forEach((id) =>
+        inventory.push([id, version]),
+      );
+    });
+    let previousFont: string | null = null;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let published: NativeEmojiSupport | null = null;
+    let detected: NativeEmojiProbe | undefined;
+    const pending = new Set<string>();
+    // A new snapshot rerenders the whole grid, so publish only when a
+    // verdict changes.
+    const publish = (next: NativeEmojiSupport) => {
+      const current = published;
+      if (
+        current &&
+        inventory.every(
+          ([unified, version]) =>
+            isNativeEmojiSupported(next, unified, version) ===
+            isNativeEmojiSupported(current, unified, version),
+        )
+      )
+        return;
+      published = next;
+      setSnapshot([next, allEmojis]);
+    };
+    // One canvas batch per task, so a fast scroll never blocks input.
+    const flush = () => {
+      timer = undefined;
+      if (!detected) return;
+      const batch = Array.from(pending).slice(0, NATIVE_PROBE_BATCH);
+      batch.forEach((unified) => pending.delete(unified));
+      detected.prime(batch);
+      // Publish once the backlog is checked, so a font refresh never
+      // flashes unchecked glyphs back to their prediction.
+      if (pending.size) timer = setTimeout(flush, 0);
+      else publish(nativeSupportSnapshot(detected, samples));
+    };
+    requestRef.current = (unifieds) => {
+      unifieds.forEach((unified) => {
+        requested.add(unified);
+        if (detected && !detected.has(unified)) pending.add(unified);
+      });
+      if (pending.size && timer === undefined) timer = setTimeout(flush, 0);
+    };
+    const probe = (refresh = false) => {
+      const customFont = view
+        .getComputedStyle(root)
+        .getPropertyValue('--epr-emoji-font-family')
+        .trim();
+      // Attribute changes often leave the computed font unchanged.
+      if (!refresh && customFont === previousFont) return;
+      previousFont = customFont;
+      clearTimeout(timer);
+      timer = undefined;
+      pending.clear();
+      const next = detectNativeEmojiSupport(
+        customFont || undefined,
+        refresh,
+        root.ownerDocument,
+      );
+      // An inconclusive probe filters nothing, just like the initial null.
+      // Avoid another synchronous full-grid render for this no-op result.
+      if (!('snapshot' in next)) {
+        detected = undefined;
+        published = null;
+        setSnapshot(null);
+        return;
+      }
+      detected = next;
+      // Publish before paint: cached exact results plus the prediction. A
+      // refresh after webfonts load keeps the current results on screen
+      // until the identities shown so far are checked again.
+      if (!refresh) publish(nativeSupportSnapshot(next, samples));
+      requestRef.current(Array.from(requested));
+      if (!pending.size) publish(nativeSupportSnapshot(next, samples));
+    };
+    probe();
+    // Any root or ancestor attribute can select another emoji font via CSS.
+    const observer = new view.MutationObserver(() => probe());
+    for (
+      let element: HTMLElement | null = root;
+      element;
+      element = element.parentElement
+    ) {
+      observer.observe(element, {
+        attributes: true,
+      });
+    }
+    const fonts = root.ownerDocument.fonts;
+    const refresh = () => probe(true);
+    fonts?.addEventListener('loadingdone', refresh);
+    return () => {
+      clearTimeout(timer);
+      detected = undefined;
+      observer.disconnect();
+      fonts?.removeEventListener('loadingdone', refresh);
+    };
+  }, [shouldDetect, PickerMainRef, allEmojis]);
+
+  // A snapshot belongs to the dataset it was computed for; a new dataset
+  // waits for its own layout-effect publication.
+  return [
+    shouldDetect && snapshot?.[1] === allEmojis ? snapshot[0] : null,
+    request,
+  ];
+}
+
+export function useNativeEmojiSupport(): NativeEmojiSupport | null {
+  return React.useContext(NativeSupportContext);
+}
+
+export function PickerContextProvider({ children }: Props) {
+  const [nativeSupport, requestNativeProbe] = useNativeEmojiSupportState();
+  const defaultSkinTone = useDefaultSkinToneConfig();
+  const reactionsDefaultOpen = useReactionsOpenConfig();
+  const defaultSearchValue = useDefaultSearchValueConfig();
+
+  // Per-Root query-result cache only. It never aliases shared snapshot
+  // state: query dicts are computed through the shared prepared core and
+  // stored here, bounded, so unmounting leaves nothing behind.
+  const filterRef = React.useRef<FilterState>({});
+  const filterQueryOrderRef = React.useRef<string[]>([]);
+  const { queryFilterDict } = usePickerDataContext();
+  const previousQueryBuilder = React.useRef(queryFilterDict);
+  if (previousQueryBuilder.current !== queryFilterDict) {
+    // Data can arrive after a user starts searching. Cached empty results
+    // must be rebuilt before descendants render the new dataset.
+    previousQueryBuilder.current = queryFilterDict;
+    filterRef.current = Object.fromEntries(
+      Object.keys(filterRef.current).map((query) => [
+        query,
+        queryFilterDict(query),
+      ]),
+    );
+  }
+  const disallowClickRef = React.useRef<boolean>(false);
+  const disallowMouseRef = React.useRef<boolean>(false);
+  const activeStoreRef = React.useRef<ReturnType<
+    typeof createActiveEmojiStore
+  > | null>(null);
+  if (!activeStoreRef.current)
+    activeStoreRef.current = createActiveEmojiStore();
+
+  const registryRef = React.useRef<NavigationRegistry | null>(null);
+  if (registryRef.current === null) {
+    registryRef.current = new NavigationRegistry();
+  }
+  React.useEffect(() => {
+    const registry = registryRef.current as NavigationRegistry;
+    // The registry object persists across remounts (ref-held), so revive
+    // it on every mount: without this, the unmount cleanup below leaves
+    // all generation-guarded navigation permanently dead after any
+    // remount (including the StrictMode double-mount).
+    registry.revive();
+    return () => {
+      // Root unmount invalidates pending materialize/scroll/focus work.
+      registry.dispose();
+    };
+  }, []);
+
+  const servicesValue = React.useMemo<PickerServices>(
+    () => ({
+      activeEmojiStore: activeStoreRef.current as ReturnType<
+        typeof createActiveEmojiStore
+      >,
+      filterRef,
+      filterQueryOrderRef,
+      disallowClickRef,
+      disallowMouseRef,
+      navigationRegistry: registryRef.current as NavigationRegistry,
+      requestNativeProbe,
+    }),
+    // All members are stable refs or callbacks; the identity never changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const searchTerm = useDebouncedSliceValue(useDebouncedState('', 100));
+  const suggestedUpdateState = useDebouncedSliceValue(
+    useDebouncedState(Date.now(), 200),
+  );
+  const searchValue = React.useMemo(
+    () => ({ searchTerm, suggestedUpdateState }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [searchTerm[0], suggestedUpdateState[0]],
+  );
+
+  // Accepted/display state. A controlled `searchValue` is the visible
+  // source of truth from the first paint (including SSR, where effects
+  // never run); `defaultSearchValue` is read once per mounted lifetime
+  // via the state initializer.
+  const searchValueConfig = useSearchValueConfig();
+  const initialAccepted = searchValueConfig ?? defaultSearchValue ?? '';
+  const displayState = useState<string>(initialAccepted);
+  const committedState = useState<string>(initialAccepted);
+  const composingState = useState<boolean>(false);
+  const searchInputValue = React.useMemo(
+    () => ({
+      displayValue: displayState as ReactState<string>,
+      committedValue: committedState as ReactState<string>,
+      composing: composingState as ReactState<boolean>,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [displayState[0], committedState[0], composingState[0]],
+  );
+
+  const reactionsModeState = useState(reactionsDefaultOpen);
+  const reactionsValue = useSliceValue(reactionsModeState);
+
+  const emojiVariationPickerState = useState<DataEmoji | null>(null);
+  const variationValue = useSliceValue(emojiVariationPickerState);
+
+  // Controlled `skinTone` is the visible source of truth; the setter still
+  // updates local state (harmless while controlled) so switching back to
+  // uncontrolled resumes from the last selection. Selection always reports
+  // through onSkinToneChange, which the skin tone picker calls itself.
+  const controlledSkinTone = useSkinToneConfig();
+  const [localSkinTone, setLocalSkinTone] =
+    useState<SkinTones>(defaultSkinTone);
+  const effectiveSkinTone = controlledSkinTone ?? localSkinTone;
+  const skinToneFanOpenState = useState<boolean>(false);
+  const skinToneValue = React.useMemo(
+    () => ({
+      activeSkinTone: [
+        effectiveSkinTone,
+        setLocalSkinTone,
+      ] as ReactState<SkinTones>,
+      skinToneFanOpenState: skinToneFanOpenState as ReactState<boolean>,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [effectiveSkinTone, skinToneFanOpenState[0]],
+  );
+
+  const activeCategoryState = useState<ActiveCategoryState>(null);
+  const emojiStyle = useEmojiStyleConfig();
+  const resolver = useGetEmojiUrlConfig();
+  const customEmojis = useCustomEmojisConfig();
+  // Each asset source owns its failure cache. Errors from older sources can
+  // only update their old cache; they never suppress the current assets.
+  const failedIds = React.useMemo(
+    () => new Set<string>(),
+    // The cache lifetime follows asset inputs, not the current failures.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [emojiStyle, resolver, customEmojis],
+  );
+  const [failureVersion, setFailureVersion] = useState({});
+  const setFailed = React.useCallback(
+    (unified: string) => {
+      failedIds.add(unified);
+      setFailureVersion({});
+    },
+    [failedIds],
+  );
+  const emojisThatFailedToLoadState: [Set<string>, (unified: string) => void] =
+    [failedIds, setFailed];
+  const visibleCategoriesState = useState<string[]>([]);
+  const emojiSizeState = useState<number | null>(null);
+  const viewportValue = React.useMemo(
+    () => ({
+      activeCategoryState:
+        activeCategoryState as ReactState<ActiveCategoryState>,
+      visibleCategoriesState: visibleCategoriesState as ReactState<
+        Array<string>
+      >,
+      emojiSizeState: emojiSizeState as ReactState<number | null>,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeCategoryState[0], visibleCategoriesState[0], emojiSizeState[0]],
+  );
+
+  const [isPastInitialLoad, setIsPastInitialLoad] = useState(false);
+  const loadValue = React.useMemo(
+    () => ({
+      emojisThatFailedToLoadState,
+      isPastInitialLoad,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [failedIds, failureVersion, setFailed, isPastInitialLoad],
+  );
+
+  useMarkInitialLoad(setIsPastInitialLoad);
+
+  return (
+    <PickerServicesContext.Provider value={servicesValue}>
+      <NativeSupportContext.Provider value={nativeSupport}>
+        <SearchSliceContext.Provider value={searchValue}>
+          <SearchInputSliceContext.Provider value={searchInputValue}>
+            <ReactionsSliceContext.Provider value={reactionsValue}>
+              <VariationSliceContext.Provider value={variationValue}>
+                <SkinToneSliceContext.Provider value={skinToneValue}>
+                  <ViewportSliceContext.Provider value={viewportValue}>
+                    <LoadSliceContext.Provider value={loadValue}>
+                      {children}
+                    </LoadSliceContext.Provider>
+                  </ViewportSliceContext.Provider>
+                </SkinToneSliceContext.Provider>
+              </VariationSliceContext.Provider>
+            </ReactionsSliceContext.Provider>
+          </SearchInputSliceContext.Provider>
+        </SearchSliceContext.Provider>
+      </NativeSupportContext.Provider>
+    </PickerServicesContext.Provider>
+  );
+}
+
 type Props = Readonly<{
   children: React.ReactNode;
 }>;
 
 export function useFilterRef() {
-  const { filterRef } = React.useContext(PickerContext);
+  const { filterRef } = React.useContext(PickerServicesContext);
   return filterRef;
 }
 
+export function useFilterQueryOrderRef() {
+  const { filterQueryOrderRef } = React.useContext(PickerServicesContext);
+  return filterQueryOrderRef;
+}
+
 export function useDisallowClickRef() {
-  const { disallowClickRef } = React.useContext(PickerContext);
+  const { disallowClickRef } = React.useContext(PickerServicesContext);
   return disallowClickRef;
 }
 
 export function useDisallowMouseRef() {
-  const { disallowMouseRef } = React.useContext(PickerContext);
+  const { disallowMouseRef } = React.useContext(PickerServicesContext);
   return disallowMouseRef;
 }
 
+export function useNavigationRegistry(): NavigationRegistry {
+  const { navigationRegistry } = React.useContext(PickerServicesContext);
+  return navigationRegistry;
+}
+
+export function useActiveEmojiState(): ReactState<ActiveEmojiState> {
+  const { activeEmojiStore: store } = React.useContext(PickerServicesContext);
+  const [value, setValue] = React.useState(store.get);
+  React.useEffect(() => {
+    const read = () => setValue(store.get());
+    const unsubscribe = store.subscribe(read);
+    read();
+    return unsubscribe;
+  }, [store]);
+  return [value, store.set];
+}
+
+export function useIsActiveEmoji(unified?: string): boolean {
+  const { activeEmojiStore: store } = React.useContext(PickerServicesContext);
+  const read = React.useCallback(
+    () => !!unified && store.get()?.unified === unified,
+    [store, unified],
+  );
+  const [active, setActive] = React.useState(read);
+  React.useEffect(() => {
+    const update = () => setActive(read());
+    const unsubscribe = store.subscribe(update, unified);
+    update();
+    return unsubscribe;
+  }, [store, unified, read]);
+  // The identity can change during virtualization before effects run.
+  return active && read();
+}
+
 export function useReactionsModeState() {
-  const { reactionsModeState } = React.useContext(PickerContext);
+  const reactionsModeState = React.useContext(ReactionsSliceContext);
   return reactionsModeState;
 }
 
 export function useSearchTermState() {
-  const { searchTerm } = React.useContext(PickerContext);
+  const { searchTerm } = React.useContext(SearchSliceContext);
   return searchTerm;
 }
 
+export function useSearchDisplayState() {
+  const { displayValue } = React.useContext(SearchInputSliceContext);
+  return displayValue;
+}
+
+export function useSearchCommittedState() {
+  const { committedValue } = React.useContext(SearchInputSliceContext);
+  return committedValue;
+}
+
+export function useSearchComposingState() {
+  const { composing } = React.useContext(SearchInputSliceContext);
+  return composing;
+}
+
 export function useActiveSkinToneState(): [
   SkinTones,
   (skinTone: SkinTones) => void,
 ] {
-  const { activeSkinTone } = React.useContext(PickerContext);
+  const { activeSkinTone } = React.useContext(SkinToneSliceContext);
   return activeSkinTone;
 }
 
 export function useEmojisThatFailedToLoadState() {
-  const { emojisThatFailedToLoadState } = React.useContext(PickerContext);
+  const { emojisThatFailedToLoadState } = React.useContext(LoadSliceContext);
   return emojisThatFailedToLoadState;
 }
 
 export function useIsPastInitialLoad(): boolean {
-  const { isPastInitialLoad } = React.useContext(PickerContext);
+  const { isPastInitialLoad } = React.useContext(LoadSliceContext);
   return isPastInitialLoad;
 }
 
 export function useEmojiVariationPickerState() {
-  const { emojiVariationPickerState } = React.useContext(PickerContext);
+  const emojiVariationPickerState = React.useContext(VariationSliceContext);
   return emojiVariationPickerState;
 }
 
 export function useSkinToneFanOpenState() {
-  const { skinToneFanOpenState } = React.useContext(PickerContext);
+  const { skinToneFanOpenState } = React.useContext(SkinToneSliceContext);
   return skinToneFanOpenState;
 }
 
-export function useDisallowedEmojisRef() {
-  const { disallowedEmojisRef } = React.useContext(PickerContext);
-  return disallowedEmojisRef;
-}
-
 export function useVisibleCategoriesState() {
-  const { visibleCategoriesState } = React.useContext(PickerContext);
+  const { visibleCategoriesState } = React.useContext(ViewportSliceContext);
   return visibleCategoriesState;
 }
 
 export function useEmojiSizeState() {
-  const { emojiSizeState } = React.useContext(PickerContext);
+  const { emojiSizeState } = React.useContext(ViewportSliceContext);
   return emojiSizeState;
 }
 
 export function useUpdateSuggested(): [number, () => void] {
-  const { suggestedUpdateState } = React.useContext(PickerContext);
+  const { suggestedUpdateState } = React.useContext(SearchSliceContext);
 
   const [suggestedUpdated, setsuggestedUpdate] = suggestedUpdateState;
   return [