@limonify/zest-ui 0.1.1 → 0.1.3

package/src/menu/portal/MenuPortal.tsx

@@ -31,7 +31,7 @@ export function MenuPortal(props: MenuPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/popover/portal/PopoverPortal.tsx

@@ -33,7 +33,7 @@ export function PopoverPortal(props: PopoverPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/select/portal/SelectPortal.tsx

@@ -27,7 +27,7 @@ export function SelectPortal(props: SelectPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {

package/src/switch/thumb/SwitchThumb.tsx

@@ -2,29 +2,64 @@
 import { View } from 'react-native';
 import { useSwitchRootContext } from '../root/SwitchRootContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
+import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
+import { useTransitionStatus, type TransitionStatus } from '../../internals/useTransitionStatus';
 import type { SwitchRootState } from '../root/SwitchRoot';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
- * Renders a `<View>`.
+ * Renders a `<View>`, or nothing when the switch is unchecked.
+ *
+ * Follows the animation contract: with `keepMounted`, the thumb stays mounted
+ * while unchecked and publishes `transitionStatus` so the consumer can animate
+ * it out. Without it, the thumb unmounts the moment it unchecks — React Native
+ * cannot report when an exit animation finished.
  */
 export function SwitchThumb(componentProps: SwitchThumb.Props) {
-  const { render, className, style, ref, ...elementProps } = componentProps;
+  const { render, className, style, keepMounted = false, ref, ...elementProps } = componentProps;
 
-  const state = useSwitchRootContext();
+  const rootState = useSwitchRootContext();
+
+  const { mounted, transitionStatus, setMounted } = useTransitionStatus(rootState.checked);
+
+  // Nothing reports when an exit animation finished, so a thumb that isn't
+  // kept mounted is unmounted the moment it unchecks.
+  useIsoLayoutEffect(() => {
+    if (!rootState.checked && mounted && !keepMounted) {
+      setMounted(false);
+    }
+  }, [rootState.checked, mounted, keepMounted, setMounted]);
+
+  const state: SwitchThumbState = { ...rootState, transitionStatus };
+
+  const shouldRender = keepMounted || mounted;
 
   return useRenderElement(View, componentProps, {
     state,
     ref,
+    enabled: shouldRender,
     props: elementProps,
   });
 }
 
-export interface SwitchThumbState extends SwitchRootState {}
+export interface SwitchThumbState extends SwitchRootState {
+  /**
+   * The transition status of the thumb, for driving enter/exit animations.
+   */
+  transitionStatus: TransitionStatus;
+}
 
 export interface SwitchThumbProps
-  extends ZestUIComponentProps<typeof View, SwitchThumbState> {}
+  extends ZestUIComponentProps<typeof View, SwitchThumbState> {
+  /**
+   * Whether to keep the element mounted when the switch is unchecked.
+   *
+   * Required to animate the thumb out; without it, it unmounts on uncheck.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+}
 
 export namespace SwitchThumb {
   export type State = SwitchThumbState;

package/src/toast/root/ToastRoot.tsx

@@ -6,6 +6,7 @@ import { useToastProviderContext } from '../provider/ToastProviderContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
 import { useStableCallback } from '../../hooks/useStableCallback';
+import { AnimationFrame } from '../../hooks/useAnimationFrame';
 import type { ZestUIComponentProps } from '../../types';
 import type { ToastObject } from '../useToastManager';
 import { ToastRootContext } from './ToastRootContext';
@@ -23,12 +24,17 @@ export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
  * `transitionStatus`, its stacking `offsetY`/`index`, and how far a swipe has
  * travelled, and the consumer turns those into a transform.
  *
- * Nothing in React Native reports that a closing animation finished, so a closed
- * toast would otherwise sit in the list forever. `removeOnClose` (on by default)
- * drops it the moment it closes, which is what a consumer who does not animate
- * wants. To animate the exit, set `removeOnClose={false}`, drive the exit from
- * `state.transitionStatus === 'ending'`, and call `useToastManager().remove(id)`
- * when it finishes. This is the same lever as `Collapsible.Panel`'s `keepMounted`.
+ * **Enter:** `transitionStatus` starts as `'starting'` (auto-clears to
+ * `undefined` after one frame). Key off `state.transitionStatus === 'starting'`
+ * to trigger a slide-in or fade-in animation.
+ *
+ * **Exit:** `removeOnClose` (on by default) drops the toast the moment it
+ * closes — the right default for a consumer who does not animate. To animate
+ * the exit, set `removeOnClose={false}`, drive the exit from
+ * `state.transitionStatus === 'ending'` using `state.measuredHeight` as the
+ * starting value (the animation target is `0`), and call
+ * `useToastManager().remove(id)` when the animation finishes.
+ * This is the same lever as `Collapsible.Panel`'s `keepMounted`.
  */
 export function ToastRoot(componentProps: ToastRoot.Props) {
   const {
@@ -64,13 +70,26 @@ export function ToastRoot(componentProps: ToastRoot.Props) {
     }
   }, [removeOnClose, toast.transitionStatus, toast.id, store]);
 
+  // `transitionStatus` starts as `'starting'` and stays that way forever.
+  // Auto-clear it after one frame so the consumer can react to `'starting'`
+  // for an enter animation without repeatedly re-triggering.
+  useIsoLayoutEffect(() => {
+    if (toast.transitionStatus === 'starting') {
+      const frame = AnimationFrame.request(() => {
+        store.updateToastInternal(toast.id, { transitionStatus: undefined });
+      });
+      return () => AnimationFrame.cancel(frame);
+    }
+    return undefined;
+  }, [toast.transitionStatus, toast.id, store]);
+
   const handleLayout = useStableCallback((event: LayoutChangeEvent) => {
     const { height } = event.nativeEvent.layout;
 
     // A closing toast reports a height of 0 through the store; measuring it again
     // here would undo that and leave a gap in the stack.
     if (toast.transitionStatus !== 'ending' && height !== toast.height) {
-      store.updateToastInternal(toast.id, { height });
+      store.updateToastInternal(toast.id, { height, measuredHeight: height });
     }
   });
 
@@ -124,6 +143,7 @@ export function ToastRoot(componentProps: ToastRoot.Props) {
       visibleIndex,
       offsetY,
       height: toast.height ?? 0,
+      measuredHeight: toast.measuredHeight ?? toast.height ?? 0,
       swiping,
       swipeMovement,
       swipeDirection,
@@ -137,6 +157,7 @@ export function ToastRoot(componentProps: ToastRoot.Props) {
       visibleIndex,
       offsetY,
       toast.height,
+      toast.measuredHeight,
       swiping,
       swipeMovement,
       swipeDirection,
@@ -192,8 +213,9 @@ function getDisplacement(
 
 export interface ToastRootState {
   /**
-   * The toast's transition status: `'starting'` as it arrives, `'ending'` once it
-   * is closing.
+   * The toast's transition status: `'starting'` as it arrives (auto-clears to
+   * `undefined` after one frame for enter animation), `'ending'` once it is
+   * closing.
    */
   transitionStatus: 'starting' | 'ending' | undefined;
   /**
@@ -227,6 +249,12 @@ export interface ToastRootState {
    * The toast's measured height.
    */
   height: number;
+  /**
+   * The last measured height before the toast closed, preserved for the
+   * consumer to use as the starting value for an exit animation.
+   * Falls back to `height` when no close has occurred yet.
+   */
+  measuredHeight: number;
   /**
    * Whether a swipe is currently in progress.
    */

package/src/toast/store.ts

@@ -301,7 +301,7 @@ export class ToastStore extends ReactStore<State, {}, typeof selectors> {
 
     const endingToasts = toasts.map((item) =>
       closeAll || item.id === toastId
-        ? { ...item, transitionStatus: 'ending' as const, height: 0 }
+        ? { ...item, transitionStatus: 'ending' as const, height: 0, measuredHeight: item.height }
         : item,
     );
     const newToasts = applyLimited(endingToasts, limit);

package/src/toast/useToastManager.ts

@@ -70,6 +70,13 @@ export interface ToastObject<Data extends object> {
    * The height of the toast.
    */
   height?: number | undefined;
+  /**
+   * The last measured height of the toast, captured at the moment it closes.
+   * Unlike `height` (which is set to `0` on close for stack collapse), this
+   * preserves the value so the consumer can use it as the starting point for
+   * an exit animation.
+   */
+  measuredHeight?: number | undefined;
   /**
    * Callback function to be called when the toast is closed.
    */

package/src/tooltip/portal/TooltipPortal.tsx

@@ -38,7 +38,7 @@ export function TooltipPortal(props: TooltipPortal.Props) {
       <Modal
         transparent
         visible={open}
-        animationType="none"
+        animationType="fade"
         statusBarTranslucent
         navigationBarTranslucent
         onRequestClose={(event: NativeSyntheticEvent<unknown>) => {