@limonify/zest-ui 0.3.1 → 0.4.0

package/src/select/store/SelectStore.ts

@@ -1,5 +1,6 @@
 import { createSelector } from '../../store/createSelector';
 import { ReactStore } from '../../store/ReactStore';
+import { PopupTriggerMap } from '../../utils/popups/PopupTriggerMap';
 import type { SelectRoot } from '../root/SelectRoot';
 
 /**
@@ -101,6 +102,7 @@ export type State = {
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
+  disablePointerDismissal: boolean;
   /**
    * The anchor's native node, carried across the portal boundary.
    */
@@ -111,11 +113,37 @@ export type State = {
    */
   labelId: string | undefined;
   update: (() => void) | undefined;
+  /**
+   * The trigger's measured width, used to size the popup.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The trigger's measured height.
+   */
+  triggerHeight: number | undefined;
+  /**
+   * The payload of the trigger the select was opened by, handed to the root's
+   * children when they are a function.
+   */
+  payload: unknown;
+  /**
+   * The id of the trigger the select is associated with, or `null` for none.
+   */
+  triggerId: string | null;
+  /**
+   * The controlled `triggerId` prop, when provided.
+   */
+  triggerIdProp: string | null | undefined;
 };
 
 type Context = {
   onValueChange: ((value: any, eventDetails: SelectRoot.ChangeEventDetails) => void) | undefined;
   onOpenChange: ((open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void) | undefined;
+  /**
+   * Every trigger bound to this select, by id. A handle resolves `open(id)`
+   * through this, which is what lets a trigger rendered outside the root open it.
+   */
+  triggerNodes: PopupTriggerMap;
 };
 
 const selectors = {
@@ -132,6 +160,11 @@ const selectors = {
   triggerNode: createSelector((state: State) => state.triggerNode),
   labelId: createSelector((state: State) => state.labelId),
   update: createSelector((state: State) => state.update),
+  triggerWidth: createSelector((state: State) => state.triggerWidth),
+  triggerHeight: createSelector((state: State) => state.triggerHeight),
+  disablePointerDismissal: createSelector((state: State) => state.disablePointerDismissal),
+  payload: createSelector((state: State) => state.payload),
+  triggerId: createSelector((state: State) => state.triggerIdProp ?? state.triggerId),
 };
 
 export class SelectStore extends ReactStore<Readonly<State>, Context, typeof selectors> {
@@ -148,12 +181,22 @@ export class SelectStore extends ReactStore<Readonly<State>, Context, typeof sel
         disabled: false,
         readOnly: false,
         required: false,
+        disablePointerDismissal: false,
         triggerNode: null,
         labelId: undefined,
         update: undefined,
+        triggerWidth: undefined,
+        triggerHeight: undefined,
+        payload: undefined,
+        triggerId: null,
+        triggerIdProp: undefined,
         ...initialState,
       },
-      { onValueChange: undefined, onOpenChange: undefined },
+      {
+        onValueChange: undefined,
+        onOpenChange: undefined,
+        triggerNodes: new PopupTriggerMap(),
+      },
       selectors,
     );
   }

package/src/select/trigger/SelectTrigger.tsx

@@ -1,10 +1,16 @@
 'use client';
 import * as React from 'react';
-import { Pressable, type GestureResponderEvent } from 'react-native';
-import { useSelectRootContext } from '../root/SelectRootContext';
+import { Pressable, type GestureResponderEvent, type LayoutChangeEvent } from 'react-native';
+import { SelectRootContext } from '../root/SelectRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useButton } from '../../internals/use-button/useButton';
+import { useFieldControlRegistration } from '../../internals/field/useFieldControlRegistration';
+import { useId } from '../../hooks/useId';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
+import { usePopupHandleStore } from '../../utils/popups/usePopupHandleStore';
+import type { SelectHandle } from '../store/SelectHandle';
+import type { SelectStore } from '../store/SelectStore';
 import type { ZestUIComponentProps } from '../../types';
 import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
 import { REASONS } from '../../utils/reasons';
@@ -12,18 +18,42 @@ import { REASONS } from '../../utils/reasons';
 /**
  * A button that opens the select popup, and the element it is positioned against.
  * Renders a `<Pressable>`.
+ *
+ * Pass a `handle` to render a trigger outside of its `Select.Root`: there is no
+ * context reaching across, so the handle is what connects the two.
  */
-export function SelectTrigger(componentProps: SelectTrigger.Props) {
+export function SelectTrigger<Payload = unknown>(componentProps: SelectTrigger.Props<Payload>) {
   const {
     render,
     className,
     style,
     disabled: disabledProp = false,
+    handle,
+    nativeID: idProp,
+    payload,
     ref,
     ...elementProps
   } = componentProps;
 
-  const store = useSelectRootContext();
+  const rootStore = React.useContext(SelectRootContext);
+  const handleStore = usePopupHandleStore(handle);
+
+  // A trigger inside a root uses that root; a detached one follows its handle,
+  // which resolves to the attached root's store or to an inert fallback.
+  const store = (handleStore ?? rootStore) as SelectStore | undefined;
+
+  if (store === undefined) {
+    throw new Error(
+      'Zest: Select.Trigger must be placed within <Select.Root>, or given a `handle` it shares with one.',
+    );
+  }
+
+  const id = useId(idProp ?? undefined);
+
+  // The trigger is the element assistive tech announces, so the field's label
+  // and messages attach here rather than to the root.
+  const { fieldProps } = useFieldControlRegistration();
+
   const open = store.useState('open');
   const rootDisabled = store.useState('disabled');
   const readOnly = store.useState('readOnly');
@@ -36,14 +66,31 @@ export function SelectTrigger(componentProps: SelectTrigger.Props) {
 
   const { getButtonProps } = useButton({ disabled });
 
+  const triggerRef = React.useRef<unknown>(null);
   const anchorRef = React.useCallback(
     (node: unknown) => {
+      triggerRef.current = node;
       store.set('triggerNode', node);
     },
     [store],
   );
   const mergedRef = useMergedRefs(ref, anchorRef);
 
+  // Registering into whichever store is current is what lets a handle resolve
+  // `open(id)`. The effect re-runs when the handle swaps stores, migrating the
+  // registration to the root that just attached.
+  useIsoLayoutEffect(() => {
+    if (id === undefined) {
+      return undefined;
+    }
+
+    store.context.triggerNodes.add(id, triggerRef.current);
+
+    return () => {
+      store.context.triggerNodes.delete(id);
+    };
+  }, [store, id]);
+
   const state: SelectTriggerState = { disabled, open, pressed, readOnly, required };
 
   return useRenderElement(Pressable, componentProps, {
@@ -51,11 +98,19 @@ export function SelectTrigger(componentProps: SelectTrigger.Props) {
     ref: mergedRef,
     props: [
       {
+        nativeID: id,
         onPress(event: GestureResponderEvent) {
           if (readOnly) {
             return;
           }
 
+          if (payload !== undefined) {
+            store.set('payload', payload);
+          }
+          if (id !== undefined) {
+            store.set('triggerId', id);
+          }
+
           store.setOpen(!open, createChangeEventDetails(REASONS.triggerPress, event));
         },
         onPressIn() {
@@ -64,15 +119,22 @@ export function SelectTrigger(componentProps: SelectTrigger.Props) {
         onPressOut() {
           setPressed(false);
         },
-        onLayout() {
+        onLayout(event: LayoutChangeEvent) {
+          const { width, height } = event.nativeEvent.layout;
+          store.set('triggerWidth', width);
+          store.set('triggerHeight', height);
           store.state.update?.();
         },
         accessibilityRole: 'combobox' as const,
-        accessibilityLabelledBy: labelId,
         accessibilityState: { expanded: open, disabled: disabled || undefined },
         'aria-haspopup': 'listbox' as const,
         'aria-readonly': readOnly || undefined,
         'aria-required': required || undefined,
+        ...fieldProps,
+        // A surrounding `Field.Label` names the control; `Select.Label` is the
+        // fallback for a select that stands on its own.
+        accessibilityLabelledBy: fieldProps.accessibilityLabelledBy ?? labelId,
+        'aria-labelledby': fieldProps['aria-labelledby'] ?? labelId,
       },
       elementProps,
       getButtonProps,
@@ -88,16 +150,27 @@ export interface SelectTriggerState {
   required: boolean;
 }
 
-export interface SelectTriggerProps
+export interface SelectTriggerProps<Payload = unknown>
   extends ZestUIComponentProps<typeof Pressable, SelectTriggerState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
   disabled?: boolean | undefined;
+  /**
+   * A handle shared with a `Select.Root`, which is what lets this trigger live
+   * outside of it. Create one with `Select.createHandle()`.
+   *
+   * The trigger's `nativeID` is the id a handle's `open(triggerId)` resolves.
+   */
+  handle?: SelectHandle<Payload> | undefined;
+  /**
+   * A payload handed to the root's children when they are a function.
+   */
+  payload?: Payload | undefined;
 }
 
 export namespace SelectTrigger {
   export type State = SelectTriggerState;
-  export type Props = SelectTriggerProps;
+  export type Props<TPayload = unknown> = SelectTriggerProps<TPayload>;
 }

package/src/slider/root/SliderRoot.tsx

@@ -5,6 +5,7 @@ import { useControlled } from '../../hooks/useControlled';
 import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { useRenderElement } from '../../use-render/useRenderElement';
+import { useFieldControlRegistration } from '../../internals/field/useFieldControlRegistration';
 import { clamp } from '../../utils/clamp';
 import type { ZestUIComponentProps, Orientation } from '../../types';
 import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
@@ -24,7 +25,7 @@ export function SliderRoot<Value extends number | readonly number[] = number>(
   const {
     className,
     defaultValue,
-    disabled = false,
+    disabled: disabledProp = false,
     format,
     locale,
     max = 100,
@@ -41,6 +42,12 @@ export function SliderRoot<Value extends number | readonly number[] = number>(
     ...elementProps
   } = componentProps;
 
+  const { fieldDisabled, markChanged, markTouched } = useFieldControlRegistration({
+    initialValue: defaultValue ?? value,
+  });
+
+  const disabled = disabledProp || fieldDisabled;
+
   // A range slider is just a slider whose value is an array; remember which
   // shape the consumer used so callbacks hand back the same one.
   const isRange = Array.isArray(value ?? defaultValue);
@@ -123,6 +130,7 @@ export function SliderRoot<Value extends number | readonly number[] = number>(
 
       valuesRef.current = nextValues;
       setValuesState(nextValues);
+      markChanged(fromArray(nextValues, isRange));
     },
   );
 
@@ -154,6 +162,8 @@ export function SliderRoot<Value extends number | readonly number[] = number>(
 
   const commitValue = useStableCallback((eventDetails: SliderRoot.ChangeEventDetails) => {
     onValueCommitted?.(fromArray(valuesRef.current, isRange) as Value, eventDetails);
+    // Releasing the thumb is the end of the interaction — a slider's blur.
+    markTouched(fromArray(valuesRef.current, isRange));
   });
 
   const state: SliderRootState = React.useMemo(

package/src/slider/thumb/SliderThumb.tsx

@@ -2,6 +2,7 @@
 import { View } from 'react-native';
 import { useSliderRootContext } from '../root/SliderRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
+import { useFieldControlRegistration } from '../../internals/field/useFieldControlRegistration';
 import { formatNumber } from '../../utils/formatNumber';
 import type { SliderRootState } from '../root/SliderRoot';
 import type { ZestUIComponentProps } from '../../types';
@@ -20,6 +21,10 @@ export function SliderThumb(componentProps: SliderThumb.Props) {
   const { disabled, format, labelId, locale, max, min, orientation, state, values } =
     useSliderRootContext();
 
+  // The thumb is what assistive tech announces and adjusts, so a surrounding
+  // field's label and messages attach here rather than to the root.
+  const { fieldProps } = useFieldControlRegistration();
+
   const value = values[index] ?? min;
   const percent = max === min ? 0 : ((value - min) / (max - min)) * 100;
 
@@ -37,7 +42,6 @@ export function SliderThumb(componentProps: SliderThumb.Props) {
       {
         style: positionStyle,
         accessibilityRole: 'adjustable' as const,
-        accessibilityLabelledBy: labelId,
         accessibilityState: { disabled: disabled || undefined },
         accessibilityValue: {
           min,
@@ -46,6 +50,11 @@ export function SliderThumb(componentProps: SliderThumb.Props) {
           text: formatValue(value, format, locale),
         },
         'aria-orientation': orientation,
+        ...fieldProps,
+        // A surrounding `Field.Label` names the control; `Slider.Label` is the
+        // fallback for a slider that stands on its own.
+        accessibilityLabelledBy: fieldProps.accessibilityLabelledBy ?? labelId,
+        'aria-labelledby': fieldProps['aria-labelledby'] ?? labelId,
       },
       elementProps,
     ],

package/src/switch/root/SwitchRoot.tsx

@@ -35,7 +35,9 @@ export function SwitchRoot(componentProps: SwitchRoot.Props) {
     ...elementProps
   } = componentProps;
 
-  const { fieldDisabled, fieldProps, validateField } = useFieldControlRegistration();
+  const { fieldDisabled, fieldProps, markChanged, markTouched } = useFieldControlRegistration({
+    initialValue: defaultChecked ?? checkedProp ?? false,
+  });
 
   const disabled = disabledProp || fieldDisabled;
 
@@ -78,7 +80,8 @@ export function SwitchRoot(componentProps: SwitchRoot.Props) {
           }
 
           setCheckedState(nextChecked);
-          validateField(nextChecked);
+          markChanged(nextChecked);
+          markTouched(nextChecked);
         },
         accessibilityRole: 'switch' as const,
         accessibilityState: {

package/src/tabs/tab/TabsTab.tsx

@@ -7,7 +7,7 @@ import { useButton } from '../../internals/use-button/useButton';
 import { useCompositeListItem } from '../../internals/composite/list/useCompositeListItem';
 import type { CompositeItemLayout } from '../../internals/composite/list/CompositeListContext';
 import { useTabsRootContext } from '../root/TabsRootContext';
-import type { TabsRoot } from '../root/TabsRoot';
+import type { TabsRoot, TabsRootState } from '../root/TabsRoot';
 import type { ZestUIComponentProps } from '../../types';
 import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
 import { REASONS } from '../../utils/reasons';
@@ -106,7 +106,7 @@ export interface TabsTabMetadata {
   layout?: CompositeItemLayout | undefined;
 }
 
-export interface TabsTabState {
+export interface TabsTabState extends TabsRootState {
   /**
    * Whether the component should ignore user interaction.
    */
@@ -115,14 +115,6 @@ export interface TabsTabState {
    * Whether the component is active.
    */
   active: boolean;
-  /**
-   * The component orientation.
-   */
-  orientation: TabsRoot.Orientation;
-  /**
-   * The direction used for tab activation.
-   */
-  tabActivationDirection: TabsTab.ActivationDirection;
   /**
    * Whether the tab is currently pressed.
    */

package/src/tooltip/popup/TooltipPopup.tsx

@@ -20,8 +20,17 @@ export function TooltipPopup(componentProps: TooltipPopup.Props) {
   const { transitionStatus } = useTooltipTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
+  const triggerWidth = store.useState('triggerWidth');
+  const triggerHeight = store.useState('triggerHeight');
 
-  const state: TooltipPopupState = { open, transitionStatus, side, align };
+  const state: TooltipPopupState = {
+    open,
+    transitionStatus,
+    side,
+    align,
+    triggerWidth,
+    triggerHeight,
+  };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -57,6 +66,16 @@ export interface TooltipPopupState {
    * The alignment the popup was actually placed with.
    */
   align: Align;
+  /**
+   * The trigger's measured width, available for consumers to size the popup
+   * against its anchor. This is the React Native equivalent of the web's
+   * `--anchor-width` CSS variable.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The trigger's measured height.
+   */
+  triggerHeight: number | undefined;
 }
 
 export interface TooltipPopupProps extends ZestUIComponentProps<typeof View, TooltipPopupState> {}

package/src/tooltip/positioner/TooltipPositioner.tsx

@@ -38,6 +38,8 @@ export function TooltipPositioner(componentProps: TooltipPositioner.Props) {
   useTooltipPortalContext();
   const store = useTooltipRootContext();
   const open = store.useState('open');
+  const triggerWidth = store.useState('triggerWidth');
+  const triggerHeight = store.useState('triggerHeight');
   const triggerNode = store.useState('triggerNode');
 
   const positioning = useAnchorPositioning({
@@ -69,6 +71,8 @@ export function TooltipPositioner(componentProps: TooltipPositioner.Props) {
     open,
     side: positioning.side,
     align: positioning.align,
+    triggerWidth,
+    triggerHeight,
   };
 
   const contextValue: TooltipPositionerContext = React.useMemo(
@@ -101,6 +105,16 @@ export interface TooltipPositionerState {
   open: boolean;
   side: Side;
   align: Align;
+  /**
+   * The trigger's measured width, available for consumers to size the popup
+   * against its anchor. This is the React Native equivalent of the web's
+   * `--anchor-width` CSS variable.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The trigger's measured height.
+   */
+  triggerHeight: number | undefined;
 }
 
 export interface TooltipPositionerProps

package/src/tooltip/store/TooltipStore.ts

@@ -9,6 +9,15 @@ export type State = {
    * The anchor's native node, carried across the portal boundary.
    */
   triggerNode: unknown;
+  /**
+   * The trigger's measured width, the React Native counterpart of the web's
+   * `--anchor-width` CSS variable.
+   */
+  triggerWidth: number | undefined;
+  /**
+   * The trigger's measured height.
+   */
+  triggerHeight: number | undefined;
   update: (() => void) | undefined;
 };
 
@@ -19,13 +28,23 @@ type Context = {
 const selectors = {
   open: createSelector((state: State) => state.openProp ?? state.open),
   triggerNode: createSelector((state: State) => state.triggerNode),
+  triggerWidth: createSelector((state: State) => state.triggerWidth),
+  triggerHeight: createSelector((state: State) => state.triggerHeight),
   update: createSelector((state: State) => state.update),
 };
 
 export class TooltipStore extends ReactStore<Readonly<State>, Context, typeof selectors> {
   constructor(initialState?: Partial<State>) {
     super(
-      { open: false, openProp: undefined, triggerNode: null, update: undefined, ...initialState },
+      {
+        open: false,
+        openProp: undefined,
+        triggerNode: null,
+        triggerWidth: undefined,
+        triggerHeight: undefined,
+        update: undefined,
+        ...initialState,
+      },
       { onOpenChange: undefined },
       selectors,
     );

package/src/tooltip/trigger/TooltipTrigger.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { Pressable, type GestureResponderEvent } from 'react-native';
+import { Pressable, type GestureResponderEvent, type LayoutChangeEvent } from 'react-native';
 import { useTooltipRootContext } from '../root/TooltipRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
@@ -61,7 +61,10 @@ export function TooltipTrigger(componentProps: TooltipTrigger.Props) {
         onPressOut() {
           setPressed(false);
         },
-        onLayout() {
+        onLayout(event: LayoutChangeEvent) {
+          const { width, height } = event.nativeEvent.layout;
+          store.set('triggerWidth', width);
+          store.set('triggerHeight', height);
           store.state.update?.();
         },
         accessibilityState: { expanded: open, disabled: disabled || undefined },

package/lib/combobox/root/useComboboxRoot.d.ts

@@ -1,29 +0,0 @@
-import type { ZestNativeEvent } from '../../utils/createChangeEventDetails';
-import { ComboboxRootContext, type ComboboxItem } from './ComboboxRootContext';
-export type ComboboxItems = ReadonlyArray<string | {
-    value: unknown;
-    label: string;
-}>;
-export interface UseComboboxRootParameters {
-    mode: 'combobox' | 'autocomplete';
-    items: ComboboxItems | undefined;
-    value?: unknown;
-    defaultValue?: unknown;
-    onValueChange?: ((value: unknown) => void) | undefined;
-    inputValue?: string | undefined;
-    defaultInputValue?: string | undefined;
-    onInputValueChange?: ((value: string) => void) | undefined;
-    open?: boolean | undefined;
-    defaultOpen?: boolean | undefined;
-    onOpenChange?: ((open: boolean, event?: ZestNativeEvent) => void) | undefined;
-    openOnFocus?: boolean | undefined;
-    filter?: ((item: ComboboxItem, query: string) => boolean) | undefined;
-    disabled: boolean;
-}
-/**
- * The state behind `Combobox.Root` and `Autocomplete.Root`: the resolved item
- * list, the filtered view of it, the input text, the selection, and the open
- * state — plus the anchor plumbing the popup needs.
- */
-export declare function useComboboxRoot(parameters: UseComboboxRootParameters): ComboboxRootContext;
-//# sourceMappingURL=useComboboxRoot.d.ts.map

package/lib/combobox/root/useComboboxRoot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useComboboxRoot.d.ts","sourceRoot":"","sources":["../../../src/combobox/root/useComboboxRoot.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAYtF,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,UAAU,GAAG,cAAc,CAAC;IAClC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,kBAAkB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9E,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IACtE,QAAQ,EAAE,OAAO,CAAC;CACnB;AAKD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,yBAAyB,GAAG,mBAAmB,CAgJ1F"}