@limonify/zest-ui 0.3.2 → 0.4.0

package/src/combobox/store/ComboboxStore.ts

@@ -0,0 +1,249 @@
+import type { TextInput } from 'react-native';
+import { createSelector } from '../../store/createSelector';
+import { ReactStore } from '../../store/ReactStore';
+import { PopupTriggerMap } from '../../utils/popups/PopupTriggerMap';
+import type { ComboboxRoot } from '../root/ComboboxRoot';
+
+/**
+ * The items to filter and choose from: strings, or `{ value, label }` records
+ * for non-string values.
+ */
+export type ComboboxItems = ReadonlyArray<string | { value: unknown; label: string }>;
+
+export interface ComboboxItem {
+  value: unknown;
+  label: string;
+}
+
+/** Normalizes the `items` prop into `{ value, label }` records. */
+export function normalizeComboboxItems(items: ComboboxItems | undefined): ComboboxItem[] {
+  if (!items) {
+    return [];
+  }
+
+  return items.map((item) =>
+    typeof item === 'string' ? { value: item, label: item } : { value: item.value, label: item.label },
+  );
+}
+
+export type State = {
+  /**
+   * The uncontrolled open state. Read through the `open` selector, which
+   * resolves the controlled prop first.
+   */
+  open: boolean;
+  /**
+   * The controlled `open` prop, when provided.
+   */
+  openProp: boolean | undefined;
+  /**
+   * The uncontrolled selected value. Read through the `value` selector.
+   */
+  value: unknown;
+  /**
+   * The controlled `value` prop, when provided.
+   */
+  valueProp: unknown;
+  /**
+   * The uncontrolled input text. Read through the `inputValue` selector.
+   */
+  inputValue: string;
+  /**
+   * The controlled `inputValue` prop, when provided.
+   */
+  inputValueProp: string | undefined;
+  /**
+   * Every item, normalized.
+   */
+  items: ComboboxItem[];
+  /**
+   * `'combobox'` selects a value and shows its label; `'autocomplete'` is free
+   * text with suggestions, where the typed string is the value.
+   */
+  mode: 'combobox' | 'autocomplete';
+  disabled: boolean;
+  disablePointerDismissal: boolean;
+  /**
+   * Whether focusing the input opens the list.
+   */
+  openOnFocus: boolean;
+  /**
+   * The anchor's native node, carried across the portal boundary.
+   */
+  triggerNode: unknown;
+  /**
+   * The input's measured width, used to size the popup.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The input's measured height.
+   */
+  triggerHeight: number | undefined;
+  update: (() => void) | undefined;
+  /**
+   * Ref to the input element, for programmatic blur.
+   */
+  inputRef: React.RefObject<TextInput | null> | undefined;
+  /**
+   * The payload of the trigger the popup was opened by, handed to the root's
+   * children when they are a function.
+   */
+  payload: unknown;
+  /**
+   * The id of the trigger the popup is associated with, or `null` for none.
+   */
+  triggerId: string | null;
+  /**
+   * The controlled `triggerId` prop, when provided.
+   */
+  triggerIdProp: string | null | undefined;
+};
+
+type Context = {
+  onOpenChange:
+    | ((open: boolean, eventDetails: ComboboxRoot.ChangeEventDetails) => void)
+    | undefined;
+  onValueChange:
+    | ((value: any, eventDetails: ComboboxRoot.ChangeEventDetails) => void)
+    | undefined;
+  onInputValueChange:
+    | ((value: string, eventDetails: ComboboxRoot.ChangeEventDetails) => void)
+    | undefined;
+  /**
+   * Every trigger bound to this root, by id. A handle resolves `open(id)`
+   * through this, which is what lets an input rendered outside the root open it.
+   */
+  triggerNodes: PopupTriggerMap;
+};
+
+const selectors = {
+  open: createSelector((state: State) => state.openProp ?? state.open),
+  value: createSelector((state: State) =>
+    state.valueProp !== undefined ? state.valueProp : state.value,
+  ),
+  inputValue: createSelector((state: State) => state.inputValueProp ?? state.inputValue),
+  items: createSelector((state: State) => state.items),
+  mode: createSelector((state: State) => state.mode),
+  disabled: createSelector((state: State) => state.disabled),
+  disablePointerDismissal: createSelector((state: State) => state.disablePointerDismissal),
+  openOnFocus: createSelector((state: State) => state.openOnFocus),
+  triggerNode: createSelector((state: State) => state.triggerNode),
+  triggerWidth: createSelector((state: State) => state.triggerWidth),
+  triggerHeight: createSelector((state: State) => state.triggerHeight),
+  update: createSelector((state: State) => state.update),
+  inputRef: createSelector((state: State) => state.inputRef),
+  payload: createSelector((state: State) => state.payload),
+  triggerId: createSelector((state: State) => state.triggerIdProp ?? state.triggerId),
+};
+
+/**
+ * The store behind `Combobox.Root` and `Autocomplete.Root`.
+ *
+ * It follows the same controlled-prop and cancelable-event contract as the other
+ * popup families: every change fires its callback first and only commits the
+ * uncontrolled key when the consumer has not called `eventDetails.cancel()`.
+ */
+export class ComboboxStore extends ReactStore<Readonly<State>, Context, typeof selectors> {
+  constructor(initialState?: Partial<State>) {
+    super(
+      {
+        open: false,
+        openProp: undefined,
+        value: null,
+        valueProp: undefined,
+        inputValue: '',
+        inputValueProp: undefined,
+        items: [],
+        mode: 'combobox',
+        disabled: false,
+        disablePointerDismissal: false,
+        openOnFocus: true,
+        triggerNode: null,
+        triggerWidth: undefined,
+        triggerHeight: undefined,
+        update: undefined,
+        inputRef: undefined,
+        payload: undefined,
+        triggerId: null,
+        triggerIdProp: undefined,
+        ...initialState,
+      },
+      {
+        onOpenChange: undefined,
+        onValueChange: undefined,
+        onInputValueChange: undefined,
+        triggerNodes: new PopupTriggerMap(),
+      },
+      selectors,
+    );
+  }
+
+  public setOpen = (nextOpen: boolean, eventDetails: ComboboxRoot.ChangeEventDetails) => {
+    if (nextOpen === this.select('open')) {
+      return;
+    }
+
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+
+    if (eventDetails.isCanceled) {
+      return;
+    }
+
+    this.set('open', nextOpen);
+  };
+
+  public setValue = (nextValue: unknown, eventDetails: ComboboxRoot.ChangeEventDetails) => {
+    this.context.onValueChange?.(nextValue, eventDetails);
+
+    if (eventDetails.isCanceled) {
+      return;
+    }
+
+    this.set('value', nextValue);
+  };
+
+  public setInputValue = (nextValue: string, eventDetails: ComboboxRoot.ChangeEventDetails) => {
+    this.context.onInputValueChange?.(nextValue, eventDetails);
+
+    if (eventDetails.isCanceled) {
+      return;
+    }
+
+    this.set('inputValue', nextValue);
+  };
+
+  /**
+   * Reflects a value the consumer changed from outside into the input text.
+   *
+   * This is not a change the consumer made through the combobox, so it fires no
+   * callback — it writes the uncontrolled key directly.
+   */
+  public reflectInputValue = (nextValue: string) => {
+    this.set('inputValue', nextValue);
+  };
+
+  /**
+   * Selects an item: records the value, fills the input with its label, and
+   * closes the popup.
+   *
+   * One `eventDetails` object is shared by all three, so canceling in any
+   * handler stops the rest — the same contract the group components use.
+   */
+  public selectItem = (item: ComboboxItem, eventDetails: ComboboxRoot.ChangeEventDetails) => {
+    if (this.select('mode') === 'combobox') {
+      this.setValue(item.value, eventDetails);
+
+      if (eventDetails.isCanceled) {
+        return;
+      }
+    }
+
+    this.setInputValue(item.label, eventDetails);
+
+    if (eventDetails.isCanceled) {
+      return;
+    }
+
+    this.setOpen(false, eventDetails);
+  };
+}

package/src/combobox/value/ComboboxValue.tsx

@@ -13,7 +13,8 @@ import type { ZestUIComponentProps } from '../../types';
 export function ComboboxValue(componentProps: ComboboxValue.Props) {
   const { render, className, style, children, ref, ...elementProps } = componentProps;
 
-  const { inputValue } = useComboboxRootContext();
+  const store = useComboboxRootContext();
+  const inputValue = store.useState('inputValue');
 
   const state: ComboboxValueState = { value: inputValue };
 

package/src/context-menu/positioner/ContextMenuPositioner.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
 import { useMenuRootContext } from '../../menu/root/MenuRootContext';
 import { useMenuPortalContext } from '../../menu/portal/MenuPortalContext';
 import { MenuPositionerContext } from '../../menu/positioner/MenuPositionerContext';
@@ -15,31 +15,97 @@ const NO_ARROW = { current: null };
  * Positions the context menu popup at the point the long press landed.
  * Renders a `<View>`.
  *
- * Unlike `Menu.Positioner`, it anchors to a screen point rather than a trigger
- * element, so there is no collision-aware floating-ui pass — the popup is placed
- * directly at the press coordinates.
+ * Unlike `Menu.Positioner` it anchors to a screen point rather than a trigger
+ * element, so it does not go through `useAnchorPositioning`: floating-ui
+ * measures a real node, and there is no node here. Collision handling is
+ * therefore its own — the popup flips to the other side of the press point when
+ * it would otherwise run off the screen, and is kept `collisionPadding` inside
+ * the edges. `side` and `align` on state report where it actually landed.
  */
 export function ContextMenuPositioner(componentProps: ContextMenuPositioner.Props) {
-  const { render, className, style, ref, ...elementProps } = componentProps;
+  const {
+    render,
+    className,
+    collisionPadding = 5,
+    style,
+    ref,
+    ...elementProps
+  } = componentProps;
 
   useMenuPortalContext();
   const store = useMenuRootContext();
   const { anchor } = useContextMenuRootContext();
 
   const open = store.useState('open');
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  // The popup's own size, which only exists after it has been laid out. Until
+  // then it is placed at the press point unflipped, exactly as before.
+  const [size, setSize] = React.useState<{ width: number; height: number } | undefined>(undefined);
+
+  const onLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setSize((previous) =>
+      previous?.width === width && previous?.height === height ? previous : { width, height },
+    );
+  }, []);
+
+  // A closed menu remeasures when it reopens somewhere else, so stale geometry
+  // never decides the first frame of the next open.
+  React.useEffect(() => {
+    if (!open) {
+      setSize(undefined);
+    }
+  }, [open]);
+
+  const placement = React.useMemo(() => {
+    if (size === undefined) {
+      return { left: anchor.x, top: anchor.y, side: 'bottom' as Side, align: 'start' as Align };
+    }
 
-  const state: ContextMenuPositionerState = { open, side: 'bottom', align: 'start' };
+    const flipHorizontally = anchor.x + size.width > screenWidth - collisionPadding;
+    const flipVertically = anchor.y + size.height > screenHeight - collisionPadding;
+
+    const rawLeft = flipHorizontally ? anchor.x - size.width : anchor.x;
+    const rawTop = flipVertically ? anchor.y - size.height : anchor.y;
+
+    // Clamping matters when the popup is larger than the space on either side:
+    // flipping alone would just move the overflow to the opposite edge.
+    const maxLeft = Math.max(collisionPadding, screenWidth - size.width - collisionPadding);
+    const maxTop = Math.max(collisionPadding, screenHeight - size.height - collisionPadding);
+
+    return {
+      left: Math.min(Math.max(rawLeft, collisionPadding), maxLeft),
+      top: Math.min(Math.max(rawTop, collisionPadding), maxTop),
+      side: (flipVertically ? 'top' : 'bottom') as Side,
+      align: (flipHorizontally ? 'end' : 'start') as Align,
+    };
+  }, [anchor.x, anchor.y, size, screenWidth, screenHeight, collisionPadding]);
+
+  const state: ContextMenuPositionerState = {
+    open,
+    side: placement.side,
+    align: placement.align,
+  };
 
   const contextValue: MenuPositionerContext = React.useMemo(
-    () => ({ side: 'bottom', align: 'start', arrowRef: NO_ARROW, arrowStyles: {} }),
-    [],
+    () => ({
+      side: placement.side,
+      align: placement.align,
+      arrowRef: NO_ARROW,
+      arrowStyles: {},
+    }),
+    [placement.side, placement.align],
   );
 
   const element = useRenderElement(View, componentProps, {
     state,
     ref,
     props: [
-      { style: { position: 'absolute' as const, left: anchor.x, top: anchor.y } },
+      {
+        style: { position: 'absolute' as const, left: placement.left, top: placement.top },
+        onLayout,
+      },
       elementProps,
     ],
   });
@@ -53,12 +119,26 @@ export function ContextMenuPositioner(componentProps: ContextMenuPositioner.Prop
 
 export interface ContextMenuPositionerState {
   open: boolean;
+  /**
+   * `'bottom'` when the popup hangs below the press point, `'top'` when it was
+   * flipped above it to stay on screen.
+   */
   side: Side;
+  /**
+   * `'start'` when the popup extends right of the press point, `'end'` when it
+   * was flipped to its left.
+   */
   align: Align;
 }
 
 export interface ContextMenuPositionerProps
-  extends ZestUIComponentProps<typeof View, ContextMenuPositionerState> {}
+  extends ZestUIComponentProps<typeof View, ContextMenuPositionerState> {
+  /**
+   * How much space to keep between the popup and the edges of the screen.
+   * @default 5
+   */
+  collisionPadding?: number | undefined;
+}
 
 export namespace ContextMenuPositioner {
   export type State = ContextMenuPositionerState;

package/src/context-menu/root/ContextMenuRoot.tsx

@@ -43,4 +43,12 @@ export interface ContextMenuRootProps
 export namespace ContextMenuRoot {
   export type State = ContextMenuRootState;
   export type Props = ContextMenuRootProps;
+  /**
+   * A context menu is a menu, so it reuses the menu's action and event
+   * contracts — a consumer should not have to reach for `Menu.Root`'s types to
+   * type a `ContextMenu.Root` handler.
+   */
+  export type Actions = MenuRoot.Actions;
+  export type ChangeEventReason = MenuRoot.ChangeEventReason;
+  export type ChangeEventDetails = MenuRoot.ChangeEventDetails;
 }

package/src/dialog/backdrop/DialogBackdrop.tsx

@@ -16,8 +16,10 @@ export function DialogBackdrop(componentProps: DialogBackdrop.Props) {
 
   const store = useDialogRootContext();
   const open = store.useState('open');
+  const nested = store.useState('nested');
+  const nestedDialogOpen = store.useState('nestedDialogOpen');
 
-  const state: DialogBackdropState = { open };
+  const state: DialogBackdropState = { open, nested, nestedDialogOpen };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -39,6 +41,15 @@ export interface DialogBackdropState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * Whether this dialog is rendered inside another dialog's tree.
+   */
+  nested: boolean;
+  /**
+   * Whether a dialog nested inside this one is open — a backdrop usually wants
+   * to darken further while it is.
+   */
+  nestedDialogOpen: boolean;
 }
 
 export interface DialogBackdropProps

package/src/dialog/popup/DialogPopup.tsx

@@ -12,9 +12,9 @@ import { useDialogPopupProps } from './useDialogPopupProps';
 export function DialogPopup(componentProps: DialogPopup.Props) {
   const { render, className, style, ref, ...elementProps } = componentProps;
 
-  const { open, transitionStatus, props } = useDialogPopupProps();
+  const { open, transitionStatus, nested, nestedDialogOpen, props } = useDialogPopupProps();
 
-  const state: DialogPopupState = { open, transitionStatus };
+  const state: DialogPopupState = { open, transitionStatus, nested, nestedDialogOpen };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -33,6 +33,15 @@ export interface DialogPopupState {
    * to `undefined` after one frame), `'ending'` once it is closing.
    */
   transitionStatus: TransitionStatus;
+  /**
+   * Whether this dialog is rendered inside another dialog's tree.
+   */
+  nested: boolean;
+  /**
+   * Whether a dialog nested inside this one is open — the cue to scale or dim
+   * this popup, which the web version drives with a CSS variable.
+   */
+  nestedDialogOpen: boolean;
 }
 
 export interface DialogPopupProps extends ZestUIComponentProps<typeof View, DialogPopupState> {}

package/src/dialog/popup/useDialogPopupProps.ts

@@ -16,10 +16,14 @@ export function useDialogPopupProps() {
   const titleElementId = store.useState('titleElementId');
   const descriptionElementId = store.useState('descriptionElementId');
   const role = store.useState('role');
+  const nested = store.useState('nested');
+  const nestedDialogOpen = store.useState('nestedDialogOpen');
 
   return {
     store,
     open,
+    nested,
+    nestedDialogOpen,
     transitionStatus: transitionContext?.transitionStatus,
     props: {
       role,

package/src/dialog/root/DialogNestingContext.ts

@@ -0,0 +1,27 @@
+'use client';
+import * as React from 'react';
+
+export interface DialogNestingContext {
+  /**
+   * Called by a nested root as it opens and closes, so the parent can keep a
+   * count of how many of its descendants are open.
+   */
+  onNestedOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Lets a dialog know it has a dialog above it, and lets a parent know one of its
+ * descendants is open.
+ *
+ * On the web Base UI counts nested dialogs so the one underneath can be scaled
+ * back or dimmed. React Native has no CSS to express that, so the count reaches
+ * the consumer the way everything else does: as `nested` and `nestedDialogOpen`
+ * on the popup and backdrop state.
+ */
+export const DialogNestingContext = React.createContext<DialogNestingContext | undefined>(
+  undefined,
+);
+
+export function useDialogNestingContext() {
+  return React.useContext(DialogNestingContext);
+}

package/src/dialog/root/useRenderDialogRoot.tsx

@@ -3,8 +3,10 @@ import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
 import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { DialogStore } from '../store/DialogStore';
 import type { DialogRootProps } from './DialogRoot';
+import { DialogNestingContext, useDialogNestingContext } from './DialogNestingContext';
 import { DialogRootContext } from './DialogRootContext';
 import { DialogTransitionContext } from './DialogTransitionContext';
 
@@ -36,6 +38,9 @@ export function useRenderDialogRoot<Payload = unknown>(
   const disablePointerDismissal = isAlertDialog || disablePointerDismissalProp;
   const role: 'dialog' | 'alertdialog' = isAlertDialog ? 'alertdialog' : 'dialog';
 
+  const parent = useDialogNestingContext();
+  const nested = parent !== undefined;
+
   const store = useRefWithInit(
     () =>
       new DialogStore({
@@ -45,19 +50,42 @@ export function useRenderDialogRoot<Payload = unknown>(
         role,
         triggerId: defaultTriggerId,
         triggerIdProp: triggerId,
+        nested,
       }),
   ).current;
 
   store.useControlledProp('openProp', open);
   store.useControlledProp('triggerIdProp', triggerId);
   store.useContextCallback('onOpenChange', onOpenChange);
-  store.useSyncedValues({ disablePointerDismissal, role });
+  store.useSyncedValues({ disablePointerDismissal, role, nested });
 
   usePopupRootHandle({ store, handle, actionsRef });
 
   const resolvedOpen = store.useState('open');
   const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
 
+  // Tell the dialog above this one whether it now has an open descendant. The
+  // cleanup is what keeps the parent's count right when this root unmounts
+  // while still open.
+  React.useEffect(() => {
+    if (parent === undefined || !resolvedOpen) {
+      return undefined;
+    }
+
+    parent.onNestedOpenChange(true);
+
+    return () => {
+      parent.onNestedOpenChange(false);
+    };
+  }, [parent, resolvedOpen]);
+
+  const onNestedOpenChange = useStableCallback((open: boolean) => {
+    store.setNestedOpen(open);
+    // A dialog two levels down is still nested inside this one's parent, so the
+    // count propagates all the way up.
+    parent?.onNestedOpenChange(open);
+  });
+
   const payload = store.useState('payload') as Payload;
 
   const transitionContextValue = React.useMemo(
@@ -65,10 +93,17 @@ export function useRenderDialogRoot<Payload = unknown>(
     [transitionStatus],
   );
 
+  const nestingContextValue = React.useMemo(
+    () => ({ onNestedOpenChange }),
+    [onNestedOpenChange],
+  );
+
   return (
     <DialogRootContext.Provider value={store}>
       <DialogTransitionContext.Provider value={transitionContextValue}>
-        {typeof children === 'function' ? children(payload) : children}
+        <DialogNestingContext.Provider value={nestingContextValue}>
+          {typeof children === 'function' ? children(payload) : children}
+        </DialogNestingContext.Provider>
       </DialogTransitionContext.Provider>
     </DialogRootContext.Provider>
   );

package/src/dialog/store/DialogStore.ts

@@ -35,6 +35,15 @@ export type State = {
    * The controlled `triggerId` prop, when provided.
    */
   triggerIdProp: string | null | undefined;
+  /**
+   * Whether this dialog is itself rendered inside another dialog's tree.
+   */
+  nested: boolean;
+  /**
+   * How many dialogs nested inside this one are currently open. A count rather
+   * than a flag because siblings can overlap while one animates out.
+   */
+  nestedOpenCount: number;
 };
 
 type Context<Reason extends string> = {
@@ -56,6 +65,8 @@ const selectors = {
   descriptionElementId: createSelector((state: State) => state.descriptionElementId),
   disablePointerDismissal: createSelector((state: State) => state.disablePointerDismissal),
   role: createSelector((state: State) => state.role),
+  nested: createSelector((state: State) => state.nested),
+  nestedDialogOpen: createSelector((state: State) => state.nestedOpenCount > 0),
 };
 
 /**
@@ -67,8 +78,7 @@ const selectors = {
  * `DialogRootContext` erases it to `any` (the same trick the group components
  * use) so the parts stay non-generic.
  *
- * TODO(later): nested dialog counting, openMethod interaction typing,
- * transitions (`mounted`/`transitionStatus`), handles/payloads.
+ * TODO(later): openMethod interaction typing.
  */
 export class DialogStore<Reason extends string = DialogRootChangeEventReason> extends ReactStore<
   Readonly<State>,
@@ -87,6 +97,8 @@ export class DialogStore<Reason extends string = DialogRootChangeEventReason> ex
         payload: undefined,
         triggerId: null,
         triggerIdProp: undefined,
+        nested: false,
+        nestedOpenCount: 0,
         ...initialState,
       },
       { onOpenChange: undefined, triggerNodes: new PopupTriggerMap() },
@@ -107,4 +119,14 @@ export class DialogStore<Reason extends string = DialogRootChangeEventReason> ex
 
     this.set('open', nextOpen);
   };
+
+  /**
+   * Records that a dialog nested inside this one opened or closed.
+   *
+   * Increments rather than assigns, so two descendants closing out of order
+   * cannot leave the count stuck above zero.
+   */
+  public setNestedOpen = (open: boolean) => {
+    this.set('nestedOpenCount', Math.max(0, this.state.nestedOpenCount + (open ? 1 : -1)));
+  };
 }

package/src/drawer/index.parts.ts

@@ -1,5 +1,5 @@
 export { DrawerRoot as Root } from './root/DrawerRoot';
-export { createDrawerHandle as createHandle } from './handle';
+export { createDrawerHandle as createHandle, type DrawerHandle as Handle } from './handle';
 export { DrawerPopup as Popup } from './popup/DrawerPopup';
 export { DrawerSwipeArea as SwipeArea } from './swipe-area/DrawerSwipeArea';