@limonify/zest-ui 0.1.5 → 0.3.0

package/src/popover/popup/PopoverPopup.tsx

@@ -2,8 +2,10 @@
 import { View } from 'react-native';
 import { usePopoverRootContext } from '../root/PopoverRootContext';
 import { usePopoverPositionerContext } from '../positioner/PopoverPositionerContext';
+import { usePopoverTransitionContext } from '../root/PopoverTransitionContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -15,12 +17,13 @@ export function PopoverPopup(componentProps: PopoverPopup.Props) {
 
   const store = usePopoverRootContext();
   const { side, align } = usePopoverPositionerContext();
+  const { transitionStatus } = usePopoverTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
   const titleElementId = store.useState('titleElementId');
   const descriptionElementId = store.useState('descriptionElementId');
 
-  const state: PopoverPopupState = { open, side, align };
+  const state: PopoverPopupState = { open, transitionStatus, side, align };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -45,6 +48,11 @@ export interface PopoverPopupState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the popover: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
   /**
    * The side the popup was actually placed on, after collision handling.
    */

package/src/popover/root/PopoverRoot.tsx

@@ -1,12 +1,14 @@
 'use client';
-import type * as React from 'react';
+import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
 import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
 import type { REASONS } from '../../utils/reasons';
 import { PopoverStore } from '../store/PopoverStore';
 import type { PopoverHandle } from '../store/PopoverHandle';
 import { PopoverRootContext } from './PopoverRootContext';
+import { PopoverTransitionContext } from './PopoverTransitionContext';
 
 /**
  * Groups all parts of the popover.
@@ -43,11 +45,21 @@ export function PopoverRoot<Payload = unknown>(props: PopoverRoot.Props<Payload>
 
   usePopupRootHandle({ store, handle, actionsRef });
 
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
   const payload = store.useState('payload') as Payload;
 
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
   return (
     <PopoverRootContext.Provider value={store}>
-      {typeof children === 'function' ? children(payload) : children}
+      <PopoverTransitionContext.Provider value={transitionContextValue}>
+        {typeof children === 'function' ? children(payload) : children}
+      </PopoverTransitionContext.Provider>
     </PopoverRootContext.Provider>
   );
 }

package/src/popover/root/PopoverTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface PopoverTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const PopoverTransitionContext = React.createContext<PopoverTransitionContext | undefined>(
+  undefined,
+);
+
+export function usePopoverTransitionContext() {
+  return React.useContext(PopoverTransitionContext);
+}

package/src/radio/index.ts

@@ -1,4 +1,5 @@
 export * as Radio from './index.parts';
 
+export { useRadioRootContext } from './root/RadioRootContext';
 export type * from './root/RadioRoot';
 export type * from './indicator/RadioIndicator';

package/src/radio-group/RadioGroup.tsx

@@ -53,7 +53,10 @@ export function RadioGroup<Value = any>(componentProps: RadioGroup.Props<Value>)
     },
   );
 
-  const state: RadioGroupState = { disabled, readOnly, required };
+  const state: RadioGroupState = React.useMemo(
+    () => ({ disabled, readOnly, required }),
+    [disabled, readOnly, required],
+  );
 
   const contextValue: RadioGroupContext<Value> = React.useMemo(
     () => ({

package/src/select/list/SelectList.tsx

@@ -18,7 +18,15 @@ export function SelectList(componentProps: SelectList.Props) {
   return useRenderElement(ScrollView, componentProps, {
     state,
     ref,
-    props: [{ accessibilityRole: 'list' as const, role: 'listbox' as const }, elementProps],
+    props: [
+      {
+        accessibilityRole: 'list' as const,
+        role: 'listbox' as const,
+        keyboardShouldPersistTaps: 'handled' as const,
+        keyboardDismissMode: 'on-drag' as const,
+      },
+      elementProps,
+    ],
   });
 }
 

package/src/select/popup/SelectPopup.tsx

@@ -2,9 +2,11 @@
 import { View } from 'react-native';
 import { useSelectRootContext } from '../root/SelectRootContext';
 import { useSelectPositionerContext } from '../positioner/SelectPositionerContext';
+import { useSelectTransitionContext } from '../root/SelectTransitionContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { CompositeList } from '../../internals/composite/list/CompositeList';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -16,10 +18,11 @@ export function SelectPopup(componentProps: SelectPopup.Props) {
 
   const store = useSelectRootContext();
   const { side, align } = useSelectPositionerContext();
+  const { transitionStatus } = useSelectTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
 
-  const state: SelectPopupState = { open, side, align };
+  const state: SelectPopupState = { open, transitionStatus, side, align };
 
   const element = useRenderElement(View, componentProps, {
     state,
@@ -39,8 +42,22 @@ export function SelectPopup(componentProps: SelectPopup.Props) {
 }
 
 export interface SelectPopupState {
+  /**
+   * Whether the select is currently open.
+   */
   open: boolean;
+  /**
+   * The transition status of the select: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
+  /**
+   * The side the popup was actually placed on, after collision handling.
+   */
   side: Side;
+  /**
+   * The alignment the popup was actually placed with.
+   */
   align: Align;
 }
 

package/src/select/root/SelectRoot.tsx

@@ -1,10 +1,12 @@
 'use client';
-import type * as React from 'react';
+import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
 import type { REASONS } from '../../utils/reasons';
 import { SelectStore, type SelectItems } from '../store/SelectStore';
 import { SelectRootContext } from './SelectRootContext';
+import { SelectTransitionContext } from './SelectTransitionContext';
 
 /**
  * Groups all parts of the select.
@@ -52,7 +54,21 @@ export function SelectRoot<Value = any>(props: SelectRoot.Props<Value>) {
   store.useContextCallback('onValueChange', onValueChange);
   store.useSyncedValues({ disabled, readOnly, required, items, multiple });
 
-  return <SelectRootContext.Provider value={store}>{children}</SelectRootContext.Provider>;
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
+  return (
+    <SelectRootContext.Provider value={store}>
+      <SelectTransitionContext.Provider value={transitionContextValue}>
+        {children}
+      </SelectTransitionContext.Provider>
+    </SelectRootContext.Provider>
+  );
 }
 
 export interface SelectRootState {}

package/src/select/root/SelectTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface SelectTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const SelectTransitionContext = React.createContext<SelectTransitionContext | undefined>(
+  undefined,
+);
+
+export function useSelectTransitionContext() {
+  return React.useContext(SelectTransitionContext);
+}

package/src/separator/Separator.tsx

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import { View } from 'react-native';
 import type { ZestUIComponentProps, Orientation } from '../types';
 import { useRenderElement } from '../use-render/useRenderElement';
@@ -17,7 +18,10 @@ export function Separator(componentProps: Separator.Props) {
     ...elementProps
   } = componentProps;
 
-  const state: SeparatorState = { orientation };
+  const state: SeparatorState = React.useMemo(
+    () => ({ orientation }),
+    [orientation],
+  );
 
   const element = useRenderElement(View, componentProps, {
     state,

package/src/slider/thumb/SliderThumb.tsx

@@ -28,7 +28,7 @@ export function SliderThumb(componentProps: SliderThumb.Props) {
       ? { position: 'absolute' as const, bottom: `${percent}%` as const }
       : { position: 'absolute' as const, left: `${percent}%` as const };
 
-  const thumbState: SliderThumbState = { ...state, index, value };
+  const thumbState: SliderThumbState = { ...state, index, value, percent };
 
   return useRenderElement(View, componentProps, {
     state: thumbState,
@@ -73,6 +73,10 @@ export interface SliderThumbState extends SliderRootState {
    * This thumb's value.
    */
   value: number;
+  /**
+   * This thumb's position as a percentage (0-100) of the track.
+   */
+  percent: number;
 }
 
 export interface SliderThumbProps extends ZestUIComponentProps<typeof View, SliderThumbState> {

package/src/switch/index.ts

@@ -1,4 +1,5 @@
 export * as Switch from './index.parts';
 
+export { useSwitchRootContext } from './root/SwitchRootContext';
 export type * from './root/SwitchRoot';
 export type * from './thumb/SwitchThumb';

package/src/tabs/tab/TabsTab.tsx

@@ -41,7 +41,10 @@ export function TabsTab(componentProps: TabsTab.Props) {
 
   const tabPanelId = getTabPanelIdByValue(value);
 
-  const state: TabsTabState = { disabled, active, orientation, tabActivationDirection, pressed };
+  const state: TabsTabState = React.useMemo(
+    () => ({ disabled, active, orientation, tabActivationDirection, pressed }),
+    [disabled, active, orientation, tabActivationDirection, pressed],
+  );
 
   return useRenderElement(Pressable, componentProps, {
     state,

package/src/toggle/Toggle.tsx

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import { Pressable, type GestureResponderEvent } from 'react-native';
 import { useControlled } from '../hooks/useControlled';
 import { useId } from '../hooks/useId';
@@ -65,7 +66,10 @@ export function Toggle<Value extends string = string>(componentProps: Toggle.Pro
 
   const { getButtonProps } = useButton({ disabled });
 
-  const state: ToggleState = { disabled, pressed };
+  const state: ToggleState = React.useMemo(
+    () => ({ disabled, pressed }),
+    [disabled, pressed],
+  );
 
   return useRenderElement(Pressable, componentProps, {
     state,

package/src/toggle-group/ToggleGroup.tsx

@@ -69,7 +69,10 @@ export function ToggleGroup<Value extends string = string>(
     },
   );
 
-  const state: ToggleGroupState = { disabled, multiple, orientation };
+  const state: ToggleGroupState = React.useMemo(
+    () => ({ disabled, multiple, orientation }),
+    [disabled, multiple, orientation],
+  );
 
   const contextValue: ToggleGroupContext<Value> = React.useMemo(
     () => ({

package/src/tooltip/popup/TooltipPopup.tsx

@@ -2,8 +2,10 @@
 import { View } from 'react-native';
 import { useTooltipRootContext } from '../root/TooltipRootContext';
 import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext';
+import { useTooltipTransitionContext } from '../root/TooltipTransitionContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -15,10 +17,11 @@ export function TooltipPopup(componentProps: TooltipPopup.Props) {
 
   const store = useTooltipRootContext();
   const { side, align } = useTooltipPositionerContext();
+  const { transitionStatus } = useTooltipTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
 
-  const state: TooltipPopupState = { open, side, align };
+  const state: TooltipPopupState = { open, transitionStatus, side, align };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -26,6 +29,7 @@ export function TooltipPopup(componentProps: TooltipPopup.Props) {
     props: [
       {
         role: 'tooltip' as const,
+        accessibilityRole: 'tooltip' as const,
         // Claim the touch responder so presses inside the popup don't reach the
         // portal's dismissal surface.
         onStartShouldSetResponder: () => true,
@@ -36,8 +40,22 @@ export function TooltipPopup(componentProps: TooltipPopup.Props) {
 }
 
 export interface TooltipPopupState {
+  /**
+   * Whether the tooltip is currently open.
+   */
   open: boolean;
+  /**
+   * The transition status of the tooltip: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
+  /**
+   * The side the popup was actually placed on, after collision handling.
+   */
   side: Side;
+  /**
+   * The alignment the popup was actually placed with.
+   */
   align: Align;
 }
 

package/src/tooltip/root/TooltipRoot.tsx

@@ -1,10 +1,12 @@
 'use client';
-import type * as React from 'react';
+import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
 import type { REASONS } from '../../utils/reasons';
 import { TooltipStore } from '../store/TooltipStore';
 import { TooltipRootContext } from './TooltipRootContext';
+import { TooltipTransitionContext } from './TooltipTransitionContext';
 
 /**
  * Groups all parts of the tooltip.
@@ -26,7 +28,21 @@ export function TooltipRoot(props: TooltipRoot.Props) {
   store.useControlledProp('openProp', open);
   store.useContextCallback('onOpenChange', onOpenChange);
 
-  return <TooltipRootContext.Provider value={store}>{children}</TooltipRootContext.Provider>;
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
+  return (
+    <TooltipRootContext.Provider value={store}>
+      <TooltipTransitionContext.Provider value={transitionContextValue}>
+        {children}
+      </TooltipTransitionContext.Provider>
+    </TooltipRootContext.Provider>
+  );
 }
 
 export interface TooltipRootState {}

package/src/tooltip/root/TooltipTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface TooltipTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const TooltipTransitionContext = React.createContext<TooltipTransitionContext | undefined>(
+  undefined,
+);
+
+export function useTooltipTransitionContext() {
+  return React.useContext(TooltipTransitionContext);
+}