panelui-native 0.75.1 → 0.77.0

package/src/components/plot/index.tsx

@@ -97,7 +97,9 @@ import Svg, {
   Rect,
 } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { Text } from '../../primitives/text';
+import { finiteChartNumber } from '../../primitives/finite-chart';
 import {
   areaPath,
   bandOf,
@@ -260,7 +262,7 @@ export function usePlotCursor(): { activeIndex: number; activePoint: PlotDatum |
   };
 }
 
-export interface PlotProps extends ViewProps {
+export interface PlotProps extends ViewProps, ChartAccessibilityProps<PlotDatum> {
   className?: string;
   /** The rows. Each one is a position along the x-axis. */
   data: PlotDatum[];
@@ -339,6 +341,11 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
     xScale: xScaleProp,
     curve = 'monotone',
     onActiveIndexChange,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelForDatum,
+    onAccessibilityDatumPress,
     compact = false,
     children,
     ...props
@@ -411,9 +418,9 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
    */
   const seriesKeys = useMemo(() => series.map(([key]) => key), [series]);
   const extent = useMemo<[number, number]>(() => {
-    const lowPin = yDomain?.[0];
-    const highPin = yDomain?.[1];
-    if (typeof lowPin === 'number' && typeof highPin === 'number') {
+    const lowPin = finiteChartNumber(yDomain?.[0]);
+    const highPin = finiteChartNumber(yDomain?.[1]);
+    if (lowPin !== undefined && highPin !== undefined) {
       return [lowPin, highPin];
     }
 
@@ -421,8 +428,8 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
     let max = -Infinity;
     for (const row of data) {
       for (const key of seriesKeys) {
-        const value = row[key];
-        if (typeof value !== 'number' || Number.isNaN(value)) continue;
+        const value = finiteChartNumber(row[key]);
+        if (value === undefined) continue;
         if (value < min) min = value;
         if (value > max) max = value;
       }
@@ -432,8 +439,8 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
       // Nothing to measure. Fall back to whatever was pinned, and to a unit
       // domain when nothing was — dividing by a span of zero is how a mark
       // ends up drawn at infinity.
-      const low = typeof lowPin === 'number' ? lowPin : 0;
-      const high = typeof highPin === 'number' ? highPin : low + 1;
+      const low = lowPin ?? 0;
+      const high = highPin ?? low + 1;
       return [low, high];
     }
 
@@ -477,8 +484,8 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
     const derivedHigh = nice ? niceHigh : max + headroom * highRoom;
 
     return [
-      typeof lowPin === 'number' ? lowPin : derivedLow,
-      typeof highPin === 'number' ? highPin : derivedHigh,
+      lowPin ?? derivedLow,
+      highPin ?? derivedHigh,
     ];
   }, [data, yDomain, seriesKeys, hasBars, nice]);
 
@@ -619,7 +626,26 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
     <PlotContext.Provider value={context}>
       <View {...props} style={props.style} className={cn('w-full', className)}>
         {header}
-        <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+        <ChartAccessibilityData
+          chart="Plot"
+          data={data}
+          disabled={accessible === false || status === 'loading'}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityLabelForDatum={accessibilityLabelForDatum}
+          onAccessibilityDatumPress={onAccessibilityDatumPress}
+          valueOf={(datum) => [
+            [xDataKey, datum[xDataKey]],
+            ...seriesKeys.map((key) => [key, datum[key]] as [string, unknown]),
+          ]}
+        />
+        <View
+          onLayout={onLayout}
+          style={{ aspectRatio }}
+          className="w-full"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
           {plot.width > 0 ? (
             <>
               <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>

package/src/components/search-bar/index.tsx

@@ -294,28 +294,31 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(
 
     const handleSubmit = useCallback(
       (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+        if (disabled) return;
         // A return key is somebody saying they are done waiting, so the
         // pending pause is spent rather than waited out.
         flushSearchBarDebounce(debounceTimerRef, debouncedRef.current, text);
         onSubmit?.(text);
         onSubmitEditing?.(event);
       },
-      [onSubmit, onSubmitEditing, text]
+      [disabled, onSubmit, onSubmitEditing, text]
     );
 
     const handleClear = useCallback(() => {
+      if (disabled) return;
       setText('');
       onClear?.();
       // The keyboard stays: clearing a query is the start of the next one.
       // Android takes focus away with the press, so it is asked back.
       inputRef.current?.focus();
-    }, [onClear, setText]);
+    }, [disabled, onClear, setText]);
 
     const handleCancel = useCallback(() => {
+      if (disabled) return;
       setText('');
       inputRef.current?.blur();
       onCancel?.();
-    }, [onCancel, setText]);
+    }, [disabled, onCancel, setText]);
 
     /*
      * Cancel's width is measured once and driven from a shared value, so the
@@ -426,8 +429,11 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(
           <AnimatedPressable
             onLayout={handleCancelLayout}
             onPress={handleCancel}
+            disabled={disabled}
+            focusable={!disabled}
             hitSlop={8}
             accessibilityRole="button"
+            accessibilityState={{ disabled: !!disabled }}
             className={slots.cancelButton()}
           >
             <Text className={slots.cancelLabel()}>{cancelLabel}</Text>

package/src/components/select/index.tsx

@@ -440,7 +440,7 @@ function SelectRoot({
       // A picker fills the width of the row it sits in and reports its own
       // height — a menu is a compact button, a wheel a full rotor, and the
       // platform is the only thing that knows which by how much.
-      <Host matchContents={{ vertical: true }}>
+      <Host matchContents={{ vertical: true }} ignoreSafeArea="keyboard">
         <Picker
           selectedValue={value ?? firstEnabled?.value ?? ''}
           onValueChange={(next: string) => onValueChange(next)}

package/src/components/slider/index.tsx

@@ -567,7 +567,7 @@ export const Slider = forwardRef<View, SliderProps>(
           {/* A slider has no intrinsic width — it fills whatever it is given —
               so the width comes from ordinary layout and only the height is
               matched to the platform's content. */}
-          <Host matchContents={{ vertical: true }}>
+          <Host matchContents={{ vertical: true }} ignoreSafeArea="keyboard">
             <NativeSlider
               value={value}
               onValueChange={(next: number) => {

package/src/components/split-view/index.tsx

@@ -56,10 +56,10 @@ import {
   DEFAULT_MIN_HEIGHT,
   clamp,
   nearestSnapIndex,
-  normalizeSnapIndex,
   resolveLength,
   resolveSnapPoints,
 } from './split-view-math';
+import { useSplitViewIndexLifecycle } from './split-view-lifecycle';
 
 /** Settles the pane onto a snap point without overshooting past its limits. */
 const SPRING = {
@@ -189,14 +189,16 @@ function SplitViewRoot({
     [pointsKey]
   );
 
-  const controlled = snapIndexProp !== undefined;
-  const [internalIndex, setInternalIndex] = useState(() =>
-    normalizeSnapIndex(defaultSnapIndex, 1)
-  );
-  const snapIndex = normalizeSnapIndex(
-    controlled ? snapIndexProp : internalIndex,
-    points.length || 1
-  );
+  const {
+    index: snapIndex,
+    requestIndex,
+    requestToken,
+  } = useSplitViewIndexLifecycle({
+    snapIndex: snapIndexProp,
+    defaultSnapIndex,
+    count: points.length,
+    onSnapIndexChange,
+  });
 
   const onSnapRef = useRef(onSnap);
   onSnapRef.current = onSnap;
@@ -207,30 +209,15 @@ function SplitViewRoot({
   }, []);
 
   /*
-   * Moving the seam is one function whether a drag, a press or a screen reader
-   * asked for it — the alternative is three places that each have to remember
-   * to spring, to report, and to leave a controlled caller's index alone.
+   * Every modality makes the same request. The synchronization effect below
+   * moves only to the index the owner accepts, then reports that settlement.
    */
   const moveTo = useCallback(
-    (index: number, options?: { animated?: boolean }) => {
-      const target = points[index];
-      if (target === undefined) return;
-
-      if (!controlled) setInternalIndex(index);
-      onSnapIndexChange?.(index);
-
-      const finish = () => report(index, target);
-      if (options?.animated === false || !animate) {
-        topHeight.value = target;
-        finish();
-        return;
-      }
-      topHeight.value = withSpring(target, SPRING, (finished) => {
-        'worklet';
-        if (finished) runOnJS(finish)();
-      });
+    (index: number) => {
+      if (points[index] === undefined) return;
+      requestIndex(index);
     },
-    [animate, controlled, onSnapIndexChange, points, report, topHeight]
+    [points, requestIndex]
   );
 
   const snapTo = useCallback((index: number) => moveTo(index), [moveTo]);
@@ -260,11 +247,15 @@ function SplitViewRoot({
       report(snapIndex, target);
       return;
     }
-    topHeight.value = withSpring(target, SPRING);
+    const finish = () => report(snapIndex, target);
+    topHeight.value = withSpring(target, SPRING, (finished) => {
+      'worklet';
+      if (finished) runOnJS(finish)();
+    });
     // Only when the resolved layout moves — a re-render that changes nothing
     // must not restart a spring the reader is watching.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [points, snapIndex, animate, animateOnMount]);
+  }, [points, snapIndex, animate, animateOnMount, requestToken]);
 
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
@@ -471,6 +462,7 @@ function SplitViewDragArea({
   return (
     <GestureDetector gesture={pan}>
       <View
+        {...props}
         accessible
         accessibilityRole="adjustable"
         accessibilityLabel={accessibilityLabel}
@@ -493,7 +485,6 @@ function SplitViewDragArea({
         }
         className={dragArea({ className })}
         onLayout={handleLayout}
-        {...props}
       >
         {children}
       </View>

package/src/components/split-view/split-view-lifecycle.ts

@@ -0,0 +1,43 @@
+import { useCallback, useState } from 'react';
+
+function normalizeIndex(index: number, count: number): number {
+  if (!Number.isFinite(index) || count <= 0) return 0;
+  return Math.max(0, Math.min(Math.round(index), count - 1));
+}
+
+interface SplitViewIndexLifecycleOptions {
+  snapIndex: number | undefined;
+  defaultSnapIndex: number;
+  count: number;
+  onSnapIndexChange?: (index: number) => void;
+}
+
+/** Keeps requested indices intact until the measured snap-point list exists. */
+export function useSplitViewIndexLifecycle({
+  snapIndex,
+  defaultSnapIndex,
+  count,
+  onSnapIndexChange,
+}: SplitViewIndexLifecycleOptions) {
+  const controlled = snapIndex !== undefined;
+  const [internalIndex, setInternalIndex] = useState(defaultSnapIndex);
+  // Every request must settle, including one that resolves to the current index
+  // after a drag and a controlled request its owner rejects.
+  const [requestToken, setRequestToken] = useState(0);
+
+  const index = normalizeIndex(
+    controlled ? snapIndex : internalIndex,
+    count || 1
+  );
+
+  const requestIndex = useCallback(
+    (next: number) => {
+      if (!controlled) setInternalIndex(next);
+      setRequestToken((token) => token + 1);
+      onSnapIndexChange?.(next);
+    },
+    [controlled, onSnapIndexChange]
+  );
+
+  return { index, requestIndex, requestToken };
+}

package/src/components/splitter/index.tsx

@@ -58,6 +58,7 @@ import {
   isCollapsed,
   layoutOffset,
   normalizeConstraint,
+  resetLayout,
   resizeLayout,
   resolveLayout,
   type SplitterConstraint,
@@ -388,6 +389,7 @@ function SplitterHandle({
   disabled,
   withGrip = true,
   accessibilityLabel = 'Resize panels',
+  style,
   ...props
 }: SplitterHandleProps) {
   const context = useSplitter('Splitter.Handle');
@@ -468,17 +470,10 @@ function SplitterHandle({
    * they already have between them.
    */
   const reset = useCallback(() => {
-    const pair = boundary >= 0 ? boundary : 0;
-    const next = layout.value.slice();
-    const room = (next[pair] ?? 0) + (next[pair + 1] ?? 0);
-    const first = initial[pair] ?? 0;
-    const span = first + (initial[pair + 1] ?? 0);
-    if (span <= 0) return;
-    next[pair] = (first / span) * room;
-    next[pair + 1] = room - next[pair]!;
+    const next = resetLayout(layout.value, initial, boundary, constraints);
     layout.value = next;
     commit(next);
-  }, [boundary, commit, initial, layout]);
+  }, [boundary, commit, constraints, initial, layout]);
 
   const doubleTap = useMemo(
     () =>
@@ -548,6 +543,7 @@ function SplitterHandle({
   return (
     <GestureDetector gesture={gesture}>
       <Animated.View
+        {...props}
         accessible
         accessibilityRole="adjustable"
         accessibilityLabel={accessibilityLabel}
@@ -556,8 +552,7 @@ function SplitterHandle({
         accessibilityActions={frozen ? undefined : [{ name: 'increment' }, { name: 'decrement' }]}
         onAccessibilityAction={frozen ? undefined : onAccessibilityAction}
         className={handle({ className })}
-        style={animatedStyle}
-        {...props}
+        style={[style, animatedStyle]}
       >
         <View className={line()} />
         {withGrip ? <View className={grip()} /> : null}
@@ -582,6 +577,7 @@ export {
   layoutOffset,
   normalizeConstraint,
   panelFloor,
+  resetLayout,
   resizeLayout,
   resolveLayout,
   type SplitterConstraint,

package/src/components/splitter/splitter-math.ts

@@ -227,6 +227,34 @@ export function resizeLayout(
   return next;
 }
 
+/** Restores one pair's initial ratio without escaping its current constraints. */
+export function resetLayout(
+  layout: number[],
+  initial: number[],
+  boundary: number,
+  constraints: SplitterConstraint[]
+): number[] {
+  const next = layout.slice();
+  if (boundary < 0 || boundary + 1 >= next.length) return next;
+
+  const pair = next[boundary]! + next[boundary + 1]!;
+  const first = initial[boundary];
+  const second = initial[boundary + 1];
+  if (
+    !Number.isFinite(pair) ||
+    typeof first !== 'number' ||
+    !Number.isFinite(first) ||
+    typeof second !== 'number' ||
+    !Number.isFinite(second) ||
+    first + second <= 0
+  ) {
+    return next;
+  }
+
+  const target = (first / (first + second)) * pair;
+  return resizeLayout(next, boundary, target - next[boundary]!, constraints);
+}
+
 /** Where a seam sits, in percent, measured from the start of the splitter. */
 export function layoutOffset(layout: number[], boundary: number): number {
   'worklet';

package/src/components/switch/index.tsx

@@ -128,7 +128,7 @@ export const Switch = forwardRef<View, SwitchProps>(
         // so the host is left to follow it. Pinning the host to a number
         // instead is what leaves the control laid out against a box it never
         // agreed to, and settling into it a frame later.
-        <Host matchContents>
+        <Host matchContents ignoreSafeArea="keyboard">
           <NativeSwitch
             value={value}
             onValueChange={(next: boolean) => onValueChange?.(next)}

package/src/components/tabs/index.tsx

@@ -778,7 +778,7 @@ function TabsList({ className, scrollable = false, children, ...props }: TabsLis
   }, [scrollable, activeLayout?.x, activeLayout]);
 
   const row = (
-    <View accessibilityRole="tablist" className={cn(list(), className)} {...props}>
+    <View {...props} accessibilityRole="tablist" className={cn(list(), className)}>
       {/* Nothing to slide: in `expanding` every tab draws its own pill, and the
           open one is the shape that moves. */}
       {variant === 'expanding' ? null : <TabsIndicator />}