panelui-native 0.62.0 → 0.65.0

package/src/components/sortable/index.tsx

@@ -89,6 +89,7 @@ import { useCSSVariable } from 'uniwind';
 import { GripVerticalIcon, IconColorProvider } from '../../icons';
 import { cn } from '../../utils/cn';
 import { impactKnock, selectionTick } from '../../utils/haptics';
+import { moveWithPinned, stepWithPinned } from './reorder';
 
 /**
  * Rows getting out of the way of the one being carried. Quick, because they
@@ -228,66 +229,6 @@ function slotCenter(
   return offset + (self === undefined ? 0 : (heights[self] ?? 0)) / 2;
 }
 
-/**
- * The order after a row has moved, with pinned rows left where they were.
- *
- * The move is applied first, to the whole list, so a carried row can be dragged
- * *past* a pinned one — refusing the move instead would make a pinned row a
- * wall, and a row that holds its place is not the same as a row nothing may
- * cross. The pinned ids are then put back at the indices they occupy in the
- * laid-out order, and everything else falls into the slots that are left, in
- * the order the move produced.
- *
- * `laid` rather than `list` is what the fixed indices are read from, because
- * that is the one order a pinned row is guaranteed to be correctly placed in:
- * it is where it was rendered, and holding its slot is the whole point.
- */
-function moveWithPinned(
-  list: readonly string[],
-  laid: readonly string[],
-  pinned: Record<string, boolean>,
-  id: string,
-  from: number,
-  to: number
-): string[] {
-  'worklet';
-  const moved = [...list];
-  moved.splice(from, 1);
-  moved.splice(to, 0, id);
-
-  const next: (string | undefined)[] = [];
-  let anyPinned = false;
-  for (let i = 0; i < moved.length; i += 1) next.push(undefined);
-  for (let i = 0; i < laid.length && i < next.length; i += 1) {
-    const at = laid[i];
-    if (at !== undefined && pinned[at]) {
-      next[i] = at;
-      anyPinned = true;
-    }
-  }
-  if (!anyPinned) return moved;
-
-  const free: string[] = [];
-  for (let i = 0; i < moved.length; i += 1) {
-    const at = moved[i];
-    if (at !== undefined && !pinned[at]) free.push(at);
-  }
-
-  const result: string[] = [];
-  let f = 0;
-  for (let i = 0; i < next.length; i += 1) {
-    const held = next[i];
-    if (held !== undefined) {
-      result.push(held);
-      continue;
-    }
-    const take = free[f];
-    f += 1;
-    if (take !== undefined) result.push(take);
-  }
-  return result;
-}
-
 /**
  * Where the dragged row belongs now, given where its edges have reached.
  *
@@ -563,16 +504,26 @@ function SortableRoot({
    * the transforms that were holding rows in their new slots are no longer
    * needed — the layout puts them there now. Both orders are reset together,
    * which is what makes the re-render after a drop invisible.
+   *
+   * During render, and not in an effect. An effect runs *after* the commit that
+   * moved the rows, so for the frame in between, the dropped row sat in its new
+   * slot still carrying the transform that had carried it there — drawn a whole
+   * row's height away from where it belongs, which is what the flash after a
+   * drop was. Written here it lands on the same commit as the reorder, and there
+   * is no frame in which the two disagree.
+   *
+   * Writing a shared value is not React state, so this is not a render with a
+   * side effect on the tree; the ref is only there to make it happen once per
+   * change of order rather than on every render of the screen around it.
    */
-  useEffect(() => {
+  const applied = useRef(key);
+  if (applied.current !== key) {
+    applied.current = key;
     order.value = value;
     rendered.value = value;
     translate.value = 0;
     lift.value = 0;
-    // `value` is covered by `key`; depending on the array itself would fire
-    // this on every render of the screen around it.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, order, rendered, translate, lift]);
+  }
 
   const indices = useMemo(() => {
     const map = new Map<string, number>();
@@ -750,15 +701,22 @@ function SortableRoot({
       const current = rendered.value.indexOf(id);
       if (current < 0) return;
 
-      const to = current + delta;
-      if (to < 0 || to >= rendered.value.length) return;
+      const next = stepWithPinned(
+        rendered.value,
+        rendered.value,
+        pinned.value,
+        id,
+        current,
+        delta
+      );
+      const to = next.indexOf(id);
+      if (to === current) return;
 
-      const next = reorderItems(rendered.value, current, to);
       order.value = next;
       if (haptics) selectionTick();
       onReorder?.(next, { id, from: current, to });
     },
-    [haptics, onReorder, order, rendered]
+    [haptics, onReorder, order, pinned, rendered]
   );
 
   const context = useMemo<SortableContextValue>(

package/src/components/sortable/reorder.ts

@@ -0,0 +1,88 @@
+type PinnedItems = Readonly<Record<string, boolean>>;
+
+/**
+ * Move one item, then restore pinned items to the slots in `laid`.
+ *
+ * Restoring after the move lets an item cross a pin instead of turning that
+ * slot into a wall. The laid-out order is the source of truth because it is
+ * the last arrangement the caller rendered and therefore the one whose pins
+ * are known to be in their promised positions.
+ */
+export function moveWithPinned(
+  list: readonly string[],
+  laid: readonly string[],
+  pinned: PinnedItems,
+  id: string,
+  from: number,
+  to: number
+): string[] {
+  'worklet';
+  if (
+    from === to ||
+    from < 0 ||
+    from >= list.length ||
+    to < 0 ||
+    to >= list.length ||
+    list[from] !== id ||
+    pinned[id]
+  ) {
+    return [...list];
+  }
+
+  const moved = [...list];
+  moved.splice(from, 1);
+  moved.splice(to, 0, id);
+
+  const next: (string | undefined)[] = [];
+  let anyPinned = false;
+  for (let i = 0; i < moved.length; i += 1) next.push(undefined);
+  for (let i = 0; i < laid.length && i < next.length; i += 1) {
+    const at = laid[i];
+    if (at !== undefined && pinned[at]) {
+      next[i] = at;
+      anyPinned = true;
+    }
+  }
+  if (!anyPinned) return moved;
+
+  const free: string[] = [];
+  for (let i = 0; i < moved.length; i += 1) {
+    const at = moved[i];
+    if (at !== undefined && !pinned[at]) free.push(at);
+  }
+
+  const result: string[] = [];
+  let freeIndex = 0;
+  for (let i = 0; i < next.length; i += 1) {
+    const held = next[i];
+    if (held !== undefined) {
+      result.push(held);
+      continue;
+    }
+    const take = free[freeIndex];
+    freeIndex += 1;
+    if (take !== undefined) result.push(take);
+  }
+  return result;
+}
+
+/** Move by one available slot, stepping past pinned slots that would be a no-op. */
+export function stepWithPinned(
+  list: readonly string[],
+  laid: readonly string[],
+  pinned: PinnedItems,
+  id: string,
+  from: number,
+  delta: number
+): string[] {
+  'worklet';
+  const direction = Math.sign(delta);
+  if (direction === 0) return [...list];
+
+  for (let to = from + direction; to >= 0 && to < list.length; to += direction) {
+    const next = moveWithPinned(list, laid, pinned, id, from, to);
+    if (next.indexOf(id) !== from) return next;
+  }
+
+  return [...list];
+}

package/src/components/swipe/index.tsx

@@ -258,10 +258,13 @@ const actionVariants = tv({
     color: {
       default: { root: 'bg-muted-foreground', label: 'text-background' },
       primary: { root: 'bg-primary', label: 'text-primary-foreground' },
-      success: { root: 'bg-success', label: 'text-white' },
-      warning: { root: 'bg-warning', label: 'text-white' },
-      info: { root: 'bg-info', label: 'text-white' },
-      destructive: { root: 'bg-destructive', label: 'text-white' },
+      success: { root: 'bg-success', label: 'text-success-solid-foreground' },
+      warning: { root: 'bg-warning', label: 'text-warning-solid-foreground' },
+      info: { root: 'bg-info', label: 'text-info-solid-foreground' },
+      destructive: {
+        root: 'bg-destructive',
+        label: 'text-destructive-solid-foreground',
+      },
     },
   },
   defaultVariants: {

package/src/components/switch/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useEffect } from 'react';
-import { Pressable, View } from 'react-native';
+import { Pressable, View, type PressableProps } from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedStyle,
@@ -10,6 +10,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { useDirectionSign } from '../../hooks/use-direction';
 import { getNativeUI } from '../../native';
 import { selectionTick } from '../../utils/haptics';
+import { useFieldLabelledBy } from '../field';
 
 const SPRING = { damping: 18, stiffness: 250, mass: 0.5 } as const;
 
@@ -35,7 +36,22 @@ const switchVariants = tv({
 
 const TRAVEL: Record<'sm' | 'md', number> = { sm: 16, md: 20 };
 
-export interface SwitchProps extends VariantProps<typeof switchVariants> {
+/**
+ * Room around each track so the target reaches 48dp on both axes.
+ *
+ * Slop rather than a bigger box, because a box is layout: a switch sized to
+ * its target would stand 48dp tall in every row it has ever been placed in,
+ * and the tracks are only 24 and 28 tall. The `md` track is already 48 wide,
+ * which is why the horizontal figures differ between the two sizes.
+ */
+const SWITCH_HIT_SLOP: Record<'sm' | 'md', { top: number; bottom: number; left: number; right: number }> = {
+  sm: { top: 12, bottom: 12, left: 4, right: 4 },
+  md: { top: 10, bottom: 10, left: 0, right: 0 },
+};
+
+export interface SwitchProps
+  extends VariantProps<typeof switchVariants>,
+    Pick<PressableProps, 'accessibilityLabel' | 'accessibilityHint' | 'accessibilityLabelledBy'> {
   className?: string;
   value: boolean;
   onValueChange?: (value: boolean) => void;
@@ -48,7 +64,7 @@ export interface SwitchProps extends VariantProps<typeof switchVariants> {
    * `className` and `size` are ignored.
    */
   native?: boolean;
-  /** Text label drawn beside the control. Native mode only. */
+  /** Names the control to assistive technology; native mode also draws it. */
   label?: string;
   /**
    * Tick the haptic engine each time the switch is flipped — a toggle you feel
@@ -65,7 +81,19 @@ export interface SwitchProps extends VariantProps<typeof switchVariants> {
  */
 export const Switch = forwardRef<View, SwitchProps>(
   (
-    { className, value, onValueChange, disabled, size = 'md', native, label, haptics },
+    {
+      className,
+      value,
+      onValueChange,
+      disabled,
+      size = 'md',
+      native,
+      label,
+      haptics,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelledBy,
+    },
     ref
   ) => {
     const progress = useSharedValue(value ? 1 : 0);
@@ -75,6 +103,9 @@ export const Switch = forwardRef<View, SwitchProps>(
     const sign = useDirectionSign();
     const nativeUI = native ? getNativeUI() : null;
     const slots = switchVariants({ size, disabled: !!disabled });
+    // React Native's labelled-by relationship is Android-only. `label` or an
+    // explicit accessibilityLabel remains the portable name on iOS.
+    const fieldLabelledBy = useFieldLabelledBy();
 
     useEffect(() => {
       progress.value = withSpring(value ? 1 : 0, SPRING);
@@ -101,7 +132,7 @@ export const Switch = forwardRef<View, SwitchProps>(
           <NativeSwitch
             value={value}
             onValueChange={(next: boolean) => onValueChange?.(next)}
-            label={label}
+            label={label ?? accessibilityLabel}
             disabled={disabled}
           />
         </Host>
@@ -113,12 +144,17 @@ export const Switch = forwardRef<View, SwitchProps>(
         ref={ref}
         accessibilityRole="switch"
         accessibilityState={{ checked: value, disabled: !!disabled }}
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityHint={accessibilityHint}
+        accessibilityLabelledBy={
+          accessibilityLabelledBy ?? (accessibilityLabel || label ? undefined : fieldLabelledBy)
+        }
         disabled={disabled}
         onPress={() => {
           if (haptics) selectionTick();
           onValueChange?.(!value);
         }}
-        hitSlop={8}
+        hitSlop={SWITCH_HIT_SLOP[size]}
       >
         <View className={slots.track({ className })}>
           <Animated.View style={activeTrackStyle} className={slots.activeTrack()} />

package/src/components/time-picker/accessibility.ts

@@ -0,0 +1,24 @@
+/** Resolve a standard adjustable action without wrapping past either bound. */
+export function indexForAccessibilityAction(
+  index: number,
+  length: number,
+  actionName: string,
+  disabled = false
+): number | undefined {
+  const direction = actionName === 'increment' ? 1 : actionName === 'decrement' ? -1 : 0;
+  if (disabled || direction === 0 || length <= 0) return undefined;
+
+  const next = Math.min(Math.max(index + direction, 0), length - 1);
+  return next === index ? undefined : next;
+}
+
+/** Keep the numeric adjustable range aligned with the values the face offers. */
+export function accessibilityValueForIndex(index: number, length: number, text: string) {
+  const max = Math.max(0, length - 1);
+  return {
+    min: 0,
+    max,
+    now: Math.min(Math.max(index, 0), max),
+    text,
+  };
+}

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

@@ -55,6 +55,7 @@ import {
 import {
   ScrollView,
   View,
+  type AccessibilityActionEvent,
   type NativeScrollEvent,
   type NativeSyntheticEvent,
 } from 'react-native';
@@ -74,6 +75,10 @@ import { ClockIcon } from '../../icons';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
+import {
+  accessibilityValueForIndex,
+  indexForAccessibilityAction,
+} from './accessibility';
 import {
   clampTime,
   displayHour,
@@ -398,6 +403,20 @@ function Column<T>({
 
   const selectedItem = items[index];
 
+  const onAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const next = indexForAccessibilityAction(
+        index,
+        items.length,
+        event.nativeEvent.actionName,
+        disabled
+      );
+      if (next === undefined) return;
+      onIndexChange(next);
+    },
+    [disabled, index, items.length, onIndexChange]
+  );
+
   return (
     <Animated.ScrollView
       ref={ref}
@@ -426,7 +445,12 @@ function Column<T>({
       removeClippedSubviews={false}
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel}
-      accessibilityValue={selectedItem ? { text: label(selectedItem) } : undefined}
+      accessibilityState={{ disabled }}
+      accessibilityValue={
+        selectedItem ? accessibilityValueForIndex(index, items.length, label(selectedItem)) : undefined
+      }
+      accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+      onAccessibilityAction={onAccessibilityAction}
     >
       {items.map((item, i) => (
         <ColumnRow key={i} offset={offset} index={i} selected={i === index}>
@@ -930,6 +954,21 @@ function RulerFace({
     [width]
   );
 
+  const onAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const next = indexForAccessibilityAction(
+        index,
+        times.length,
+        event.nativeEvent.actionName,
+        disabled
+      );
+      if (next === undefined) return;
+      const time = times[next];
+      if (time) onValueChange(time);
+    },
+    [disabled, index, onValueChange, times]
+  );
+
   return (
     <View className={readout === 'none' ? undefined : 'gap-4'}>
       {readout === 'none' ? null : (
@@ -955,7 +994,14 @@ function RulerFace({
           onMomentumScrollEnd={onMomentumEnd}
           accessibilityRole="adjustable"
           accessibilityLabel="Time"
-          accessibilityValue={{ text: formatTime(value, { hourCycle, locale }) }}
+          accessibilityState={{ disabled }}
+          accessibilityValue={accessibilityValueForIndex(
+            index,
+            times.length,
+            formatTime(value, { hourCycle, locale })
+          )}
+          accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+          onAccessibilityAction={onAccessibilityAction}
         >
           {/*
             No numbers under the ticks. The readout above already says the