[utils] Enforce store state key/value types (#5423)

Author: jjenzz

packages/react/src/combobox/root/AriaCombobox.tsx

@@ -509,7 +509,18 @@ export function AriaCombobox<Value = any, Mode extends SelectionMode = 'none'>(
       selectedIndex?: number | null | undefined;
       type?: AriaCombobox.HighlightEventReason | undefined;
     }) => {
-      store.update(options);
+      const update = {} as Pick<StoreState, 'activeIndex' | 'selectedIndex'>;
+
+      if (options.activeIndex !== undefined) {
+        update.activeIndex = options.activeIndex;
+      }
+
+      if (options.selectedIndex !== undefined) {
+        update.selectedIndex = options.selectedIndex;
+      }
+
+      store.update(update);
+
       const activeIndexOption = options.activeIndex;
       if (activeIndexOption === undefined) {
         return;

packages/react/src/dialog/store/DialogStore.ts

@@ -10,7 +10,7 @@ import {
   PopupTriggerDataStore,
   PopupStoreState,
   PopupTriggerMap,
-  setPopupOpenState,
+  createPopupOpenState,
 } from '../../utils/popups';
 
 export type State<Payload> = PopupStoreState<Payload> & {
@@ -93,13 +93,7 @@ export class DialogStore<Payload> extends ReactStore<
 
     this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
 
-    const updatedState: Partial<State<Payload>> = {
-      open: nextOpen,
-    };
-
-    setPopupOpenState(updatedState, nextOpen, eventDetails.trigger);
-
-    this.update(updatedState);
+    this.update(createPopupOpenState(this.state, nextOpen, eventDetails.trigger));
   };
 }
 

packages/react/src/floating-ui-react/hooks/useFloatingRootContext.ts

@@ -6,7 +6,10 @@ import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { PopupTriggerMap } from '../../utils/popups';
 import type { BaseUIChangeEventDetails } from '../../internals/createBaseUIEventDetails';
 import { useFloatingParentNodeId } from '../components/FloatingTree';
-import { FloatingRootStore, type FloatingRootState } from '../components/FloatingRootStore';
+import {
+  FloatingRootStore,
+  type FloatingRootState as State,
+} from '../components/FloatingRootStore';
 import type { ReferenceType } from '../types';
 
 export interface UseFloatingRootContextOptions {
@@ -53,12 +56,11 @@ export function useFloatingRootContext(options: UseFloatingRootContextOptions):
   ).current;
 
   useIsoLayoutEffect(() => {
-    const valuesToSync: Writeable<Partial<FloatingRootState>> = {
-      open,
-      floatingId,
-    };
+    const valuesToSync = { open, floatingId } as Pick<
+      State,
+      'open' | 'floatingId' | 'referenceElement' | 'domReferenceElement' | 'floatingElement'
+    >;
 
-    // Only sync elements that are defined to avoid overwriting existing ones
     if (elements.reference !== undefined) {
       valuesToSync.referenceElement = elements.reference;
       valuesToSync.domReferenceElement = isElement(elements.reference) ? elements.reference : null;
@@ -76,5 +78,3 @@ export function useFloatingRootContext(options: UseFloatingRootContextOptions):
 
   return store;
 }
-
-type Writeable<T> = { -readonly [P in keyof T]: T[P] };

packages/react/src/floating-ui-react/hooks/useSyncedFloatingRootContext.ts

@@ -1,18 +1,26 @@
 'use client';
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { ReactStore } from '@base-ui/utils/store';
+import type { ReactStore } from '@base-ui/utils/store';
 import { isElement } from '@floating-ui/utils/dom';
 import { BaseUIChangeEventDetails } from '../../types';
 import { PopupStoreContext, PopupStoreSelectors, PopupStoreState } from '../../utils/popups';
 import { FloatingRootState, FloatingRootStore } from '../components/FloatingRootStore';
 
+/**
+ * Narrowed to the store members this hook uses so consumers do not need to provide
+ * unrelated store capabilities.
+ */
+export type SyncedFloatingRootContextStore<State extends PopupStoreState<unknown>> = Pick<
+  ReactStore<Readonly<State>, PopupStoreContext<never>, PopupStoreSelectors>,
+  'context' | 'state' | 'useState' | 'useSyncedValue'
+>;
+
 export interface UseSyncedFloatingRootContextOptions<
   State extends PopupStoreState<unknown>,
-  ContextEventDetails extends BaseUIChangeEventDetails<string>,
   OpenChangeEventDetails extends BaseUIChangeEventDetails<string>,
 > {
-  popupStore: ReactStore<State, PopupStoreContext<ContextEventDetails>, PopupStoreSelectors>;
+  popupStore: SyncedFloatingRootContextStore<State>;
   /**
    * Whether the Popup element is passed to Floating UI as the floating element instead of the default Positioner.
    */
@@ -29,11 +37,8 @@ export interface UseSyncedFloatingRootContextOptions<
  */
 export function useSyncedFloatingRootContext<
   State extends PopupStoreState<unknown>,
-  ContextEventDetails extends BaseUIChangeEventDetails<string>,
   OpenChangeEventDetails extends BaseUIChangeEventDetails<string>,
->(
-  options: UseSyncedFloatingRootContextOptions<State, ContextEventDetails, OpenChangeEventDetails>,
-): FloatingRootStore {
+>(options: UseSyncedFloatingRootContextOptions<State, OpenChangeEventDetails>): FloatingRootStore {
   const {
     popupStore,
     treatPopupAsFloatingElement = false,
@@ -75,12 +80,20 @@ export function useSyncedFloatingRootContext<
   popupStore.useSyncedValue('floatingId', floatingId as State['floatingId']);
 
   useIsoLayoutEffect(() => {
-    const valuesToSync: Partial<FloatingRootState> = {
+    const valuesToSync = {
       open,
       floatingId,
       referenceElement,
       floatingElement,
-    };
+    } as Pick<
+      FloatingRootState,
+      | 'open'
+      | 'floatingId'
+      | 'referenceElement'
+      | 'floatingElement'
+      | 'domReferenceElement'
+      | 'positionReference'
+    >;
 
     if (isElement(referenceElement)) {
       valuesToSync.domReferenceElement = referenceElement;

packages/react/src/menu/root/MenuRoot.tsx

@@ -37,7 +37,7 @@ import {
   attachPreventUnmountOnClose,
   FOCUSABLE_POPUP_PROPS,
   PayloadChildRenderFunction,
-  setPopupOpenState,
+  createPopupOpenState,
   PopupHandleAttachment,
   useImplicitActiveTrigger,
   useOpenStateTransitions,
@@ -301,20 +301,19 @@ export const MenuRoot = fastComponent(function MenuRoot<Payload>(props: MenuRoot
         (nativeEvent as MouseEvent).detail === 0;
       const isDismissClose = !nextOpen && (reason === REASONS.escapeKey || reason == null);
 
-      const updatedState: Partial<MenuStoreState<Payload>> = {
-        open: nextOpen,
-        openChangeReason: reason,
-      };
       openEventRef.current = eventDetails.event;
 
-      setPopupOpenState(
-        updatedState,
+      const popupOpenState = createPopupOpenState(
+        store.state,
         nextOpen,
         eventDetails.trigger,
         shouldPreventUnmountOnClose(),
-      );
+      ) as ReturnType<typeof createPopupOpenState> & {
+        openChangeReason: MenuRoot.ChangeEventReason;
+      };
 
-      store.update(updatedState);
+      popupOpenState.openChangeReason = reason;
+      store.update(popupOpenState);
 
       if (
         parent.type === 'menubar' &&

packages/react/src/menu/store/MenuStore.ts

@@ -18,7 +18,7 @@ import {
 
 export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
-  modal: boolean;
+  modal: boolean | undefined;
   openMethod: InteractionType | null;
   allowMouseEnter: boolean;
   highlightItemOnHover: boolean;

packages/react/src/menu/submenu-trigger/MenuSubmenuTrigger.tsx

@@ -67,7 +67,7 @@ export const MenuSubmenuTrigger = React.forwardRef(function MenuSubmenuTrigger(
 
       if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
         store.update({
-          activeTriggerId: thisTriggerId,
+          activeTriggerId: thisTriggerId ?? null,
           activeTriggerElement: element,
           closeDelay,
         });

packages/react/src/popover/store/PopoverStore.ts

@@ -16,7 +16,7 @@ import {
   PopupStoreState,
   PopupTriggerMap,
   type PopupTriggerStoreKeys,
-  setPopupOpenState,
+  createPopupOpenState,
 } from '../../utils/popups';
 import { PATIENT_CLICK_THRESHOLD } from '../../internals/constants';
 import type { AdaptiveOriginMiddleware } from '../../utils/adaptiveOriginConstants';
@@ -130,19 +130,17 @@ export class PopoverStore<Payload> extends ReactStore<
     this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
 
     const changeState = () => {
-      const updatedState: Partial<State<Payload>> = {
-        open: nextOpen,
-        openChangeReason: eventDetails.reason,
-      };
-
-      setPopupOpenState(
-        updatedState,
+      const popupOpenState = createPopupOpenState(
+        this.state,
         nextOpen,
         eventDetails.trigger,
         shouldPreventUnmountOnClose(),
-      );
+      ) as ReturnType<typeof createPopupOpenState> & {
+        openChangeReason: PopoverRoot.ChangeEventReason;
+      };
 
-      this.update(updatedState);
+      popupOpenState.openChangeReason = eventDetails.reason;
+      this.update(popupOpenState);
     };
 
     if (isHover) {

packages/react/src/preview-card/store/PreviewCardStore.ts

@@ -72,33 +72,28 @@ export class PreviewCardStore<Payload> extends ReactStore<
   ) => {
     const { inlineRectCoordsRef } = this.context;
 
-    applyPopupOpenChange<State<Payload>, PreviewCardRoot.ChangeEventDetails>(
-      this,
-      nextOpen,
-      eventDetails as PreviewCardRoot.ChangeEventDetails,
-      {
-        onBeforeDispatch() {
-          // Capture the hovered inline-rect coordinates so the card anchors to the
-          // exact point on the link that was hovered.
-          const event = eventDetails.event;
-          if (
-            nextOpen &&
-            eventDetails.reason === REASONS.triggerHover &&
-            eventDetails.trigger &&
-            'clientX' in event &&
-            'clientY' in event &&
-            inlineRectCoordsRef.current?.element !== eventDetails.trigger
-          ) {
-            updateInlineRectCoords(
-              inlineRectCoordsRef,
-              eventDetails.trigger,
-              event.clientX,
-              event.clientY,
-            );
-          }
-        },
+    applyPopupOpenChange(this, nextOpen, eventDetails as PreviewCardRoot.ChangeEventDetails, {
+      onBeforeDispatch() {
+        // Capture the hovered inline-rect coordinates so the card anchors to the
+        // exact point on the link that was hovered.
+        const event = eventDetails.event;
+        if (
+          nextOpen &&
+          eventDetails.reason === REASONS.triggerHover &&
+          eventDetails.trigger &&
+          'clientX' in event &&
+          'clientY' in event &&
+          inlineRectCoordsRef.current?.element !== eventDetails.trigger
+        ) {
+          updateInlineRectCoords(
+            inlineRectCoordsRef,
+            eventDetails.trigger,
+            event.clientX,
+            event.clientY,
+          );
+        }
       },
-    );
+    });
   };
 }
 

packages/react/src/toast/store.ts

@@ -123,10 +123,10 @@ export class ToastStore extends ReactStore<State, {}, typeof selectors> {
       return;
     }
 
-    const updates: Partial<State> = {
-      timeout,
-      limit,
-    };
+    const updates = { timeout, limit } as Pick<
+      State,
+      'timeout' | 'limit' | 'toasts' | 'toastMetadata'
+    >;
 
     if (limitChanged) {
       const newToasts = applyLimited(this.state.toasts, limit);
@@ -446,14 +446,16 @@ export class ToastStore extends ReactStore<State, {}, typeof selectors> {
   }
 
   private setToasts(newToasts: StoredToast[], clearInteraction: boolean = newToasts.length === 0) {
-    const updates: Partial<State> = {
+    const updates = {
       toasts: newToasts,
       toastMetadata: createToastMetadata(newToasts),
-    };
+    } as Pick<State, 'toasts' | 'toastMetadata' | 'hovering' | 'focused'>;
+
     if (clearInteraction) {
       updates.hovering = false;
       updates.focused = false;
     }
+
     this.update(updates);
   }