[utils] Add infrastructure to support nested stores

packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx

@@ -104,7 +104,7 @@ export const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
       },
       elementProps,
     ],
-    ref: [forwardedRef, store.context.popupRef, store.getElementSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
     stateAttributesMapping,
   });
 

packages/react/src/alert-dialog/viewport/AlertDialogViewport.tsx

@@ -59,7 +59,7 @@ export const AlertDialogViewport = React.forwardRef(function AlertDialogViewport
   return useRenderElement('div', componentProps, {
     enabled: shouldRender,
     state,
-    ref: [forwardedRef, store.getElementSetter('viewportElement')],
+    ref: [forwardedRef, store.useStateSetter('viewportElement')],
     stateAttributesMapping,
     props: [
       {

packages/react/src/dialog/popup/DialogPopup.tsx

@@ -107,7 +107,7 @@ export const DialogPopup = React.forwardRef(function DialogPopup(
       },
       elementProps,
     ],
-    ref: [forwardedRef, store.context.popupRef, store.getElementSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
     stateAttributesMapping,
   });
 

packages/react/src/dialog/viewport/DialogViewport.tsx

@@ -59,7 +59,7 @@ export const DialogViewport = React.forwardRef(function DialogViewport(
   return useRenderElement('div', componentProps, {
     enabled: shouldRender,
     state,
-    ref: [forwardedRef, store.getElementSetter('viewportElement')],
+    ref: [forwardedRef, store.useStateSetter('viewportElement')],
     stateAttributesMapping,
     props: [
       {

packages/react/src/tooltip/popup/TooltipPopup.tsx

@@ -95,7 +95,7 @@ export const TooltipPopup = React.forwardRef(function TooltipPopup(
 
   const element = useRenderElement('div', componentProps, {
     state,
-    ref: [forwardedRef, store.context.popupRef, store.getElementSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
     props: [
       popupProps,
       transitionStatus === 'starting' ? DISABLED_TRANSITIONS_STYLE : EMPTY_OBJECT,

packages/react/src/tooltip/positioner/TooltipPositioner.tsx

@@ -123,7 +123,7 @@ export const TooltipPositioner = React.forwardRef(function TooltipPositioner(
   const element = useRenderElement('div', componentProps, {
     state,
     props: [positioner.props, elementProps],
-    ref: [forwardedRef, store.getElementSetter('positionerElement')],
+    ref: [forwardedRef, store.useStateSetter('positionerElement')],
     stateAttributesMapping: popupStateMapping,
   });
 

packages/react/test/index.ts

@@ -1,4 +1,4 @@
+export * from '@base-ui-components/utils/testUtils';
 export { createRenderer } from './createRenderer';
 export { describeConformance } from './describeConformance';
 export { popupConformanceTests } from './popupConformanceTests';
-export * from './utils';

packages/utils/src/store/ReactStore.spec.ts

@@ -0,0 +1,96 @@
+import { expectType } from '../testUtils';
+import { createSelector } from './createSelector';
+import { ReactStore } from './ReactStore';
+
+interface TestState {
+  count: number | undefined;
+  text: string;
+}
+
+const selectors = {
+  count: createSelector((state: TestState) => state.count),
+  text: createSelector((state: TestState) => state.text),
+  textLongerThan(state: TestState, length: number) {
+    return state.text.length > length;
+  },
+  textLengthBetween(state: TestState, minLength: number, maxLength: number) {
+    return state.text.length >= minLength && state.text.length <= maxLength;
+  },
+};
+
+const store = new ReactStore<TestState, Record<string, never>, typeof selectors>(
+  { count: 0, text: '' },
+  undefined,
+  selectors,
+);
+
+const count = store.select('count');
+expectType<number | undefined, typeof count>(count);
+
+const text = store.select('text');
+expectType<string, typeof text>(text);
+
+const isTextLongerThan5 = store.select('textLongerThan', 5);
+expectType<boolean, typeof isTextLongerThan5>(isTextLongerThan5);
+
+const isTextLengthBetween3And10 = store.select('textLengthBetween', 3, 10);
+expectType<boolean, typeof isTextLengthBetween3And10>(isTextLengthBetween3And10);
+
+const countReactive = store.useState('count');
+expectType<number | undefined, typeof countReactive>(countReactive);
+
+const textReactive = store.useState('text');
+expectType<string, typeof textReactive>(textReactive);
+
+const isTextLongerThan7Reactive = store.useState('textLongerThan', 7);
+expectType<boolean, typeof isTextLongerThan7Reactive>(isTextLongerThan7Reactive);
+
+const isTextLengthBetween2And8Reactive = store.useState('textLengthBetween', 2, 8);
+expectType<boolean, typeof isTextLengthBetween2And8Reactive>(isTextLengthBetween2And8Reactive);
+
+// incorrect calls:
+
+// @ts-expect-error
+store.select();
+// @ts-expect-error
+store.select('count', 1);
+// @ts-expect-error
+store.select('textLongerThan');
+// @ts-expect-error
+store.select('textLengthBetween', 1);
+// @ts-expect-error
+store.select('textLongerThan', 2, 3);
+
+// @ts-expect-error
+store.useState();
+// @ts-expect-error
+store.useState('count', 1);
+// @ts-expect-error
+store.useState('textLongerThan');
+// @ts-expect-error
+store.useState('textLengthBetween', 1);
+// @ts-expect-error
+store.useState('textLongerThan', 2, 3);
+
+const unsubscribeFromCount = store.observe('count', (newValue, oldValue) => {
+  expectType<number | undefined, typeof newValue>(newValue);
+  expectType<number | undefined, typeof oldValue>(oldValue);
+});
+expectType<() => void, typeof unsubscribeFromCount>(unsubscribeFromCount);
+
+const unsubscribeFromSelector = store.observe(
+  (state) => state.text.length,
+  (newValue, oldValue) => {
+    expectType<number, typeof newValue>(newValue);
+    expectType<number, typeof oldValue>(oldValue);
+  },
+);
+expectType<() => void, typeof unsubscribeFromSelector>(unsubscribeFromSelector);
+
+// @ts-expect-error listener must match selector return type
+store.observe(
+  (state) => state.text.length,
+  (newValue: string) => {
+    expectType<string, typeof newValue>(newValue);
+  },
+);