panelui-native 0.71.0 → 0.75.0

package/src/components/color-picker/index.tsx

@@ -71,6 +71,7 @@ import {
   View,
   type AccessibilityActionEvent,
   type LayoutChangeEvent,
+  type ViewStyle,
 } from 'react-native';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -107,6 +108,7 @@ import {
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
 import { Popover, type PopoverContentProps } from '../popover';
+import { enabledColorPickerAction } from './color-picker-accessibility';
 
 /** Settles a thumb that was moved by something other than a finger. */
 const TIMING = { duration: 140 } as const;
@@ -585,7 +587,10 @@ const ColorPickerArea = forwardRef<View, ColorPickerAreaProps>(
     };
 
     const onAccessibilityAction = (event: AccessibilityActionEvent) => {
-      const action = event.nativeEvent.actionName;
+      const action = enabledColorPickerAction(
+        event.nativeEvent.actionName,
+        ctx.disabled
+      );
       if (action === 'increment') nudge('saturation', 1);
       else if (action === 'decrement') nudge('saturation', -1);
       else if (action === 'brighter') nudge('brightness', 1);
@@ -663,8 +668,8 @@ interface ChannelTrackProps {
   /** What fills the track — a hue ramp, or a masked translucency ramp. */
   children: ReactNode;
   gesture: ReturnType<typeof Gesture.Race>;
-  thumbStyle: ReturnType<typeof useAnimatedStyle>;
-  thumbFillStyle: ReturnType<typeof useAnimatedStyle>;
+  thumbStyle: ReturnType<typeof useAnimatedStyle<ViewStyle>>;
+  thumbFillStyle: ReturnType<typeof useAnimatedStyle<ViewStyle>>;
   onLayout: (event: LayoutChangeEvent) => void;
   size: ColorPickerSize;
   className?: string;
@@ -828,8 +833,12 @@ const ColorPickerHue = forwardRef<View, ColorPickerHueProps>(
         disabled={ctx.disabled}
         accessibilityValue={{ min: 0, max: 360, now: announced, text: `${announced}°` }}
         onAccessibilityAction={(event) => {
-          if (event.nativeEvent.actionName === 'increment') nudge(1);
-          else if (event.nativeEvent.actionName === 'decrement') nudge(-1);
+          const action = enabledColorPickerAction(
+            event.nativeEvent.actionName,
+            ctx.disabled
+          );
+          if (action === 'increment') nudge(1);
+          else if (action === 'decrement') nudge(-1);
         }}
       >
         <LinearGradient
@@ -947,8 +956,12 @@ const ColorPickerAlpha = forwardRef<View, ColorPickerAlphaProps>(
           text: `${announced}%`,
         }}
         onAccessibilityAction={(event) => {
-          if (event.nativeEvent.actionName === 'increment') nudge(1);
-          else if (event.nativeEvent.actionName === 'decrement') nudge(-1);
+          const action = enabledColorPickerAction(
+            event.nativeEvent.actionName,
+            ctx.disabled
+          );
+          if (action === 'increment') nudge(1);
+          else if (action === 'decrement') nudge(-1);
         }}
       >
         <Checkerboard />
@@ -1503,8 +1516,12 @@ const ColorPickerBrightness = forwardRef<View, ColorPickerBrightnessProps>(
           text: `${announced}%`,
         }}
         onAccessibilityAction={(event) => {
-          if (event.nativeEvent.actionName === 'increment') nudge(1);
-          else if (event.nativeEvent.actionName === 'decrement') nudge(-1);
+          const action = enabledColorPickerAction(
+            event.nativeEvent.actionName,
+            ctx.disabled
+          );
+          if (action === 'increment') nudge(1);
+          else if (action === 'decrement') nudge(-1);
         }}
       >
         <LinearGradient
@@ -1666,7 +1683,10 @@ const ColorPickerWheel = forwardRef<View, ColorPickerWheelProps>(
     };
 
     const onAccessibilityAction = (event: AccessibilityActionEvent) => {
-      const action = event.nativeEvent.actionName;
+      const action = enabledColorPickerAction(
+        event.nativeEvent.actionName,
+        ctx.disabled
+      );
       if (action === 'increment') nudge('hue', 1);
       else if (action === 'decrement') nudge('hue', -1);
       else if (action === 'saturate') nudge('saturation', 1);

package/src/components/date-time-picker/index.tsx

@@ -84,6 +84,9 @@ const DEFAULT_PLACEHOLDER = 'Pick a date and time';
  */
 const PANEL_WIDTH = 308;
 
+/** A stable rule that makes every calendar day unavailable while disabled. */
+const DISABLE_ALL_DATES = () => true;
+
 /** How a `Date` is written on the closed trigger. */
 function describe(
   value: Date,
@@ -204,18 +207,23 @@ function DateTimePickerRoot({
 
   const setOpen = useCallback(
     (next: boolean) => {
+      if (disabled && next) return;
       if (!isOpenControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
-    [isOpenControlled, onOpenChange]
+    [disabled, isOpenControlled, onOpenChange]
   );
 
   const commit = useCallback(
     (next: Date) => {
+      // A controlled caller can keep the panel mounted or open while disabled.
+      // Guard the value boundary as well as the visible controls so a stale
+      // press cannot commit during the same render that disables the picker.
+      if (disabled) return;
       if (!isValueControlled) setInternalValue(next);
       onValueChange?.(next);
     },
-    [isValueControlled, onValueChange]
+    [disabled, isValueControlled, onValueChange]
   );
 
   /*
@@ -281,7 +289,7 @@ function DateTimePickerRoot({
         mode="single"
         selected={value}
         onSelect={handleDay}
-        disabled={disabledDates}
+        disabled={disabled ? DISABLE_ALL_DATES : disabledDates}
         minDate={minDate}
         maxDate={maxDate}
         startMonth={minDate}

package/src/components/drawer/index.tsx

@@ -66,14 +66,11 @@ import {
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  Easing,
   SlideInDown,
   SlideInLeft,
   SlideInRight,
   SlideInUp,
-  SlideOutDown,
-  SlideOutLeft,
-  SlideOutRight,
-  SlideOutUp,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
@@ -96,6 +93,9 @@ import {
 import { cn } from '../../utils/cn';
 
 const SPRING = { damping: 24, stiffness: 300, mass: 0.7 } as const;
+/** How long the panel takes to leave, whether by a drag or a press. */
+const EXIT_DURATION = 200;
+
 /** How far a drag has to travel outward before releasing it dismisses. */
 const DISMISS_DISTANCE = 80;
 /** A flick this fast dismisses regardless of how far it got. */
@@ -375,9 +375,11 @@ function DrawerContent({
         const velocity =
           (horizontal ? event.velocityX : event.velocityY) * outward;
         if (travel.value > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY) {
-          travel.value = withTiming(extent, { duration: 180 }, (finished) => {
-            if (finished) runOnJS(close)();
-          });
+          // Straight to the exit, without finishing the slide first. The exit
+          // starts from wherever `travel` is and carries it the rest of the
+          // way, so driving it to `extent` here would be the same distance
+          // animated twice.
+          runOnJS(close)();
         } else {
           travel.value = withSpring(0, SPRING);
         }
@@ -433,12 +435,38 @@ function DrawerContent({
     bottom: SlideInDown,
   }[physical];
 
-  const exiting = {
-    left: SlideOutLeft,
-    right: SlideOutRight,
-    top: SlideOutUp,
-    bottom: SlideOutDown,
-  }[physical];
+  /*
+   * The slide out is written by hand, because the panel is not always at rest
+   * when it starts.
+   *
+   * A preset animates from the view's *layout* position and applies its own
+   * transform, which overrides the one the drag was already using. So a
+   * swipe-dismiss played twice: the gesture carried the panel off-screen, and
+   * then the exit put it back at zero and slid it out again. Seeding the
+   * initial transform from `travel` makes the two one animation — the exit
+   * picks the panel up wherever the finger left it and carries it the rest of
+   * the way. A press on the close button or the backdrop leaves `travel` at
+   * zero, so that path is the same slide it always was.
+   */
+  const exiting = useCallback(() => {
+    'worklet';
+    const shift = extent * outward;
+    const from = travel.value * outward;
+    const timing = { duration: EXIT_DURATION, easing: Easing.out(Easing.quad) };
+
+    return {
+      initialValues: {
+        transform: horizontal
+          ? [{ translateX: from }, { translateY: 0 }]
+          : [{ translateX: 0 }, { translateY: from }],
+      },
+      animations: {
+        transform: horizontal
+          ? [{ translateX: withTiming(shift, timing) }, { translateY: 0 }]
+          : [{ translateX: 0 }, { translateY: withTiming(shift, timing) }],
+      },
+    };
+  }, [extent, horizontal, outward, travel]);
 
   /*
    * The inset and the panel's own padding stack rather than compete.
@@ -499,7 +527,7 @@ function DrawerContent({
                   .damping(24)
                   .stiffness(260)
                   .mass(0.7)}
-                exiting={exiting.duration(200)}
+                exiting={exiting}
                 accessibilityViewIsModal
                 className={panelVariants({ side, className })}
                 {...props}

package/src/components/fab/index.tsx

@@ -85,7 +85,10 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { useBackHandler } from '../../hooks/use-back-handler';
-import { AnimatedPressable } from '../../primitives/animated-pressable';
+import {
+  AnimatedPressable,
+  type AnimatedPressableProps,
+} from '../../primitives/animated-pressable';
 import { Scrim } from '../../primitives/scrim';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
@@ -180,7 +183,9 @@ function anchor(placement: FabPlacement, offset: number) {
  * Fab
  * -------------------------------------------------------------------------- */
 
-export interface FabProps extends Omit<ViewProps, 'children'>, FabVariantProps {
+export interface FabProps
+  extends Omit<AnimatedPressableProps, 'children' | 'style' | 'disabled'>,
+    Omit<FabVariantProps, 'disabled'> {
   className?: string;
   /** The glyph. Sized by you — this is the one thing that should not guess. */
   icon?: ReactNode;
@@ -201,7 +206,8 @@ export interface FabProps extends Omit<ViewProps, 'children'>, FabVariantProps {
   placement?: FabPlacement;
   /** Distance from the edges when `placement` is set, in points. */
   offset?: number;
-  onPress?: () => void;
+  /** Placement-aware view style. Press-state styling belongs in `className`. */
+  style?: ViewProps['style'];
   disabled?: boolean;
   /**
    * A tick on press. Off by default — needs the optional `expo-haptics`, and
@@ -231,33 +237,37 @@ const FabRoot = forwardRef<View, FabProps>(
     },
     ref
   ) => {
+    const isDisabled = Boolean(disabled);
     const { root, label } = fabVariants({
       size,
       variant,
       extended: extended && !!children,
-      disabled,
+      disabled: isDisabled,
     });
 
     const themed = useCSSVariable(CONTENT_COLOR_VAR[variant ?? 'primary']);
     const contentColor =
       typeof themed === 'string' ? themed : undefined;
 
-    const handlePress = useCallback(() => {
-      if (haptics) selectionTick();
-      onPress?.();
-    }, [haptics, onPress]);
+    const handlePress = useCallback<NonNullable<AnimatedPressableProps['onPress']>>(
+      (event) => {
+        if (haptics) selectionTick();
+        onPress?.(event);
+      },
+      [haptics, onPress]
+    );
 
     return (
       <IconColorProvider color={contentColor}>
         <AnimatedPressable
           ref={ref}
+          {...props}
           accessibilityRole="button"
-          accessibilityState={{ disabled }}
-          disabled={disabled}
+          accessibilityState={{ disabled: isDisabled }}
+          disabled={isDisabled}
           onPress={handlePress}
           className={root({ className })}
           style={[placement ? anchor(placement, offset) : null, style]}
-          {...props}
         >
           {icon}
           {extended && children ? (

package/src/components/flow/index.tsx

@@ -1254,6 +1254,7 @@ function FlowNode({
     <FlowNodeContext.Provider value={id}>
       <GestureDetector gesture={gesture}>
         <Animated.View
+          {...props}
           collapsable={false}
           onLayout={onLayout}
           style={[{ position: 'absolute', top: 0, left: 0 }, style]}
@@ -1267,7 +1268,6 @@ function FlowNode({
           accessibilityState={{ selected }}
           accessibilityActions={nodeActions}
           onAccessibilityAction={handleAccessibilityAction}
-          {...props}
         >
           {textChildren(children)}
         </Animated.View>

package/src/components/frame/index.tsx

@@ -398,7 +398,7 @@ const FrameRow = forwardRef<View, FrameRowProps>(
 
     if (!onPress) {
       return (
-        <View ref={ref} className={classes} {...(props as ViewProps)}>
+        <View ref={ref} {...(props as ViewProps)} className={classes}>
           {body}
         </View>
       );
@@ -407,10 +407,10 @@ const FrameRow = forwardRef<View, FrameRowProps>(
     return (
       <Pressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         onPress={onPress}
         className={classes}
-        {...props}
       >
         {body}
       </Pressable>

package/src/components/grid-item/index.tsx

@@ -334,9 +334,9 @@ const GridItemRoot = forwardRef<View, GridItemProps>(
       return (
         <View
           ref={ref}
+          {...(props as ViewProps)}
           accessibilityState={{ disabled: !!disabled }}
           className={root({ className })}
-          {...(props as ViewProps)}
         >
           {textChildren(children)}
         </View>
@@ -346,12 +346,12 @@ const GridItemRoot = forwardRef<View, GridItemProps>(
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{ disabled: !!disabled }}
         disabled={disabled}
         onPress={onPress}
         className={root({ className })}
-        {...props}
       >
         {textChildren(children)}
       </AnimatedPressable>

package/src/components/heatmap-chart/index.tsx

@@ -628,7 +628,13 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
                 <Svg width={grid.width} height={grid.height} style={StyleSheet.absoluteFill}>
                   <Defs>
                     <ClipPath id={clipId}>
-                      <AnimatedRect x={0} y={0} height={grid.height} animatedProps={clipProps} />
+                      <AnimatedRect
+                        x={0}
+                        y={0}
+                        width={grid.width}
+                        height={grid.height}
+                        animatedProps={clipProps}
+                      />
                     </ClipPath>
                   </Defs>
                   <G clipPath={`url(#${clipId})`}>

package/src/components/hex-chart/index.tsx

@@ -534,7 +534,13 @@ const HexChartRoot = forwardRef<HexChartHandle, HexChartProps>(function HexChart
                         animatedProps={ellipseProps}
                       />
                     ) : (
-                      <AnimatedRect x={0} y={0} height={height} animatedProps={rectProps} />
+                      <AnimatedRect
+                          x={0}
+                          y={0}
+                          width={width}
+                          height={height}
+                          animatedProps={rectProps}
+                        />
                     )}
                   </ClipPath>
                 </Defs>

package/src/components/input/index.tsx

@@ -59,6 +59,7 @@ import { IconColorProvider } from '../../icons';
 import { KeyboardAvoider } from '../../primitives/keyboard-avoider';
 import { Text, textChildren } from '../../primitives/text';
 import { Label } from '../label';
+import { inputContentPadding } from './input-content-padding';
 
 /** Long enough to read as a transition, short enough not to lag a fast tab. */
 const FOCUS_DURATION = 150;
@@ -303,6 +304,9 @@ export const Input = forwardRef<TextInput, InputProps>(
       setEndWidth(event.nativeEvent.layout.width);
     }, []);
 
+    const startPadding = inputContentPadding(startWidth, !!startContent);
+    const endPadding = inputContentPadding(endWidth, !!endContent);
+
     /*
      * The content is quieter than the value. An icon at the same weight as the
      * text reads as part of what was typed, and the placeholder colour is
@@ -325,8 +329,8 @@ export const Input = forwardRef<TextInput, InputProps>(
           borderStyle,
           // Only the side that has content, and only once it has been
           // measured — a 0 here would wipe out the field's own padding.
-          startWidth ? { paddingStart: startWidth } : null,
-          endWidth ? { paddingEnd: endWidth } : null,
+          startPadding ? { paddingStart: startPadding } : null,
+          endPadding ? { paddingEnd: endPadding } : null,
           // Caller styles come last so InputGroup can pad the field around its
           // decorators, but never last enough to drop the animated border.
           style,

package/src/components/input/input-content-padding.ts

@@ -0,0 +1,3 @@
+export function inputContentPadding(width: number, present: boolean): number | undefined {
+  return present && width > 0 && Number.isFinite(width) ? width : undefined;
+}

package/src/components/input-group/index.tsx

@@ -11,7 +11,6 @@ import {
   useCallback,
   useContext,
   useMemo,
-  useState,
   type ReactNode,
 } from 'react';
 import {
@@ -23,6 +22,12 @@ import {
 import { tv } from 'tailwind-variants';
 import { Input, type InputProps } from '../input';
 import { textChildren } from '../../primitives/text';
+import {
+  useInputGroupDecoratorMeasurement,
+  useInputGroupMeasurements,
+  type InputGroupDecoratorOwner,
+  type InputGroupDecoratorSide,
+} from './input-group-measurements';
 
 const inputGroupVariants = tv({
   slots: {
@@ -41,8 +46,15 @@ interface InputGroupState {
   isDisabled: boolean;
   prefixWidth: number;
   suffixWidth: number;
-  setPrefixWidth: (width: number) => void;
-  setSuffixWidth: (width: number) => void;
+  measureDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner,
+    width: number
+  ) => void;
+  removeDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner
+  ) => void;
 }
 
 const InputGroupContext = createContext<InputGroupState | null>(null);
@@ -61,12 +73,24 @@ export interface InputGroupProps extends ViewProps {
 const InputGroupRoot = forwardRef<View, InputGroupProps>(
   ({ className, isDisabled = false, children, ...props }, ref) => {
     const { root } = inputGroupVariants();
-    const [prefixWidth, setPrefixWidth] = useState(0);
-    const [suffixWidth, setSuffixWidth] = useState(0);
+    const { prefixWidth, suffixWidth, measureDecorator, removeDecorator } =
+      useInputGroupMeasurements();
 
     const value = useMemo<InputGroupState>(
-      () => ({ isDisabled, prefixWidth, suffixWidth, setPrefixWidth, setSuffixWidth }),
-      [isDisabled, prefixWidth, suffixWidth]
+      () => ({
+        isDisabled,
+        prefixWidth,
+        suffixWidth,
+        measureDecorator,
+        removeDecorator,
+      }),
+      [
+        isDisabled,
+        prefixWidth,
+        suffixWidth,
+        measureDecorator,
+        removeDecorator,
+      ]
     );
 
     return (
@@ -97,14 +121,18 @@ function createDecorator(side: 'prefix' | 'suffix') {
     ({ className, isDecorative = false, onLayout, children, ...props }, ref) => {
       const group = useInputGroup();
       const slots = inputGroupVariants({ isDisabled: group?.isDisabled ?? false });
-      const setWidth = side === 'prefix' ? group?.setPrefixWidth : group?.setSuffixWidth;
+      const measure = useInputGroupDecoratorMeasurement(
+        side,
+        group?.measureDecorator,
+        group?.removeDecorator
+      );
 
       const handleLayout = useCallback(
         (event: LayoutChangeEvent) => {
-          setWidth?.(event.nativeEvent.layout.width);
+          measure(event.nativeEvent.layout.width);
           onLayout?.(event);
         },
-        [setWidth, onLayout]
+        [measure, onLayout]
       );
 
       return (
@@ -146,8 +174,13 @@ const InputGroupInput = forwardRef<TextInput, InputGroupInputProps>(
         style={[
           // Only override padding on the side that actually has a decorator —
           // a 0 here would wipe out the field's default horizontal padding.
-          group?.prefixWidth ? { paddingLeft: group.prefixWidth } : null,
-          group?.suffixWidth ? { paddingRight: group.suffixWidth } : null,
+          //
+          // `paddingStart`/`paddingEnd`, not left/right: the decorators are
+          // inset with `start-0`/`end-0`, so under `Direction dir="rtl"` Yoga
+          // moves them to the other edge. Physical padding stays where it was
+          // written and leaves the value running underneath them.
+          group?.prefixWidth ? { paddingStart: group.prefixWidth } : null,
+          group?.suffixWidth ? { paddingEnd: group.suffixWidth } : null,
           style,
         ]}
         {...props}

package/src/components/input-group/input-group-measurements.ts

@@ -0,0 +1,98 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+export type InputGroupDecoratorSide = 'prefix' | 'suffix';
+export type InputGroupDecoratorOwner = symbol;
+
+type Widths = Record<InputGroupDecoratorSide, number>;
+type Registries = Record<
+  InputGroupDecoratorSide,
+  Map<InputGroupDecoratorOwner, number>
+>;
+
+export interface InputGroupMeasurements {
+  prefixWidth: number;
+  suffixWidth: number;
+  measureDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner,
+    width: number
+  ) => void;
+  removeDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner
+  ) => void;
+}
+
+type MeasureDecorator = InputGroupMeasurements['measureDecorator'];
+type RemoveDecorator = InputGroupMeasurements['removeDecorator'];
+
+const emptyWidths = (): Widths => ({ prefix: 0, suffix: 0 });
+
+function measuredWidth(registry: Map<InputGroupDecoratorOwner, number>) {
+  let width = 0;
+  for (const candidate of registry.values()) width = Math.max(width, candidate);
+  return width;
+}
+
+/** Keeps measured padding tied to the decorators that are still mounted. */
+export function useInputGroupMeasurements(): InputGroupMeasurements {
+  const registries = useRef<Registries>({ prefix: new Map(), suffix: new Map() });
+  const [widths, setWidths] = useState<Widths>(emptyWidths);
+
+  const commitWidth = useCallback((side: InputGroupDecoratorSide) => {
+    const width = measuredWidth(registries.current[side]);
+    setWidths((current) =>
+      current[side] === width ? current : { ...current, [side]: width }
+    );
+  }, []);
+
+  const measureDecorator = useCallback(
+    (side: InputGroupDecoratorSide, owner: InputGroupDecoratorOwner, width: number) => {
+      const registry = registries.current[side];
+      if (Number.isFinite(width) && width > 0) registry.set(owner, width);
+      else registry.delete(owner);
+      commitWidth(side);
+    },
+    [commitWidth]
+  );
+
+  const removeDecorator = useCallback(
+    (side: InputGroupDecoratorSide, owner: InputGroupDecoratorOwner) => {
+      if (!registries.current[side].delete(owner)) return;
+      commitWidth(side);
+    },
+    [commitWidth]
+  );
+
+  return {
+    prefixWidth: widths.prefix,
+    suffixWidth: widths.suffix,
+    measureDecorator,
+    removeDecorator,
+  };
+}
+
+/** Gives one mounted decorator an owner token and unregisters only that owner. */
+export function useInputGroupDecoratorMeasurement(
+  side: InputGroupDecoratorSide,
+  measureDecorator: MeasureDecorator | undefined,
+  removeDecorator: RemoveDecorator | undefined
+) {
+  const owner = useRef<InputGroupDecoratorOwner>(Symbol(side));
+  const width = useRef(0);
+
+  useLayoutEffect(() => {
+    // Re-register the last layout if React replays effects in Strict Mode or
+    // the decorator moves between InputGroup providers.
+    if (width.current > 0) measureDecorator?.(side, owner.current, width.current);
+    return () => removeDecorator?.(side, owner.current);
+  }, [measureDecorator, removeDecorator, side]);
+
+  return useCallback(
+    (nextWidth: number) => {
+      width.current = nextWidth;
+      measureDecorator?.(side, owner.current, nextWidth);
+    },
+    [measureDecorator, side]
+  );
+}

package/src/components/item/index.tsx

@@ -148,21 +148,21 @@ const ItemRoot = forwardRef<View, ItemProps>(
     const body = !onPress ? (
       <View
         ref={ref}
+        {...(props as ViewProps)}
         accessibilityState={{ disabled: !!disabled }}
         className={root({ className })}
-        {...(props as ViewProps)}
       >
         {textChildren(children)}
       </View>
     ) : (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{ disabled: !!disabled }}
         disabled={disabled}
         onPress={onPress}
         className={root({ className })}
-        {...props}
       >
         {textChildren(children)}
       </AnimatedPressable>