panelui-native 0.71.0 → 0.75.0

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

@@ -0,0 +1,244 @@
+/**
+ * The arithmetic a splitter runs while a seam is under a finger.
+ *
+ * Sizes are percentages of the whole splitter, never points, which is what
+ * makes a dragged layout survive a rotation or a window resize: the numbers
+ * mean the same thing at any container size, so nothing has to be re-measured
+ * and re-derived when one changes.
+ *
+ * It lives apart from the component for two reasons. It is the part with the
+ * edge cases — a pair of panels that cannot both honour their minimums, a
+ * collapse that has to decide between shut and its floor, a caller's sizes that
+ * do not add up — and it is the part that runs on the UI thread, where a wrong
+ * answer is a layout that sticks rather than an exception anybody sees.
+ */
+
+/** How small a panel may get before its neighbour stops taking room, in percent. */
+export const DEFAULT_MIN_SIZE = 10;
+/** How large a panel may get, in percent. */
+export const DEFAULT_MAX_SIZE = 100;
+
+export interface SplitterConstraint {
+  /** Smallest share the panel may hold while open, in percent. */
+  minSize: number;
+  /** Largest share the panel may hold, in percent. */
+  maxSize: number;
+  /** Whether dragging past the minimum shuts the panel instead of stopping. */
+  collapsible: boolean;
+  /** Share the panel holds while shut, in percent. */
+  collapsedSize: number;
+}
+
+export interface SplitterConstraintInput {
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  collapsedSize?: number;
+}
+
+function clamp(value: number, low: number, high: number): number {
+  'worklet';
+  return Math.min(Math.max(value, low), high);
+}
+
+function finite(value: number | undefined, fallback: number): number {
+  'worklet';
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+
+/** The smallest share a panel can hold at all — its floor once shut, or its minimum. */
+export function panelFloor(constraint: SplitterConstraint): number {
+  'worklet';
+  return constraint.collapsible ? constraint.collapsedSize : constraint.minSize;
+}
+
+/**
+ * Fills a panel's declared limits in, in an order that cannot contradict
+ * itself: the maximum is never below the minimum, and a collapsed size is never
+ * above the minimum it exists to sit below.
+ */
+export function normalizeConstraint(
+  input: SplitterConstraintInput | undefined
+): SplitterConstraint {
+  const minSize = clamp(finite(input?.minSize, DEFAULT_MIN_SIZE), 0, 100);
+  const maxSize = clamp(finite(input?.maxSize, DEFAULT_MAX_SIZE), minSize, 100);
+  const collapsible = input?.collapsible === true;
+  const collapsedSize = clamp(finite(input?.collapsedSize, 0), 0, minSize);
+  return { minSize, maxSize, collapsible, collapsedSize };
+}
+
+function total(layout: number[]): number {
+  'worklet';
+  let sum = 0;
+  for (let index = 0; index < layout.length; index += 1) sum += layout[index]!;
+  return sum;
+}
+
+/**
+ * Pushes a layout onto exactly 100, moving each panel by its share of the room
+ * it has left in the direction the correction is going. Panels already against
+ * a limit therefore absorb none of it, which is what keeps a correction from
+ * quietly undoing the limit it just honoured.
+ *
+ * Four passes, because clamping after each one can hand the next a smaller
+ * remainder rather than none; it converges long before that in practice, and
+ * the bound is what stops a contradictory set of limits from spinning.
+ */
+function settle(layout: number[], constraints: SplitterConstraint[]): number[] {
+  'worklet';
+  const next = layout.slice();
+
+  for (let pass = 0; pass < 4; pass += 1) {
+    const remainder = 100 - total(next);
+    if (Math.abs(remainder) < 1e-6) break;
+
+    let room = 0;
+    const headroom: number[] = [];
+    for (let index = 0; index < next.length; index += 1) {
+      const constraint = constraints[index]!;
+      const available =
+        remainder > 0
+          ? constraint.maxSize - next[index]!
+          : next[index]! - panelFloor(constraint);
+      headroom.push(Math.max(available, 0));
+      room += Math.max(available, 0);
+    }
+    if (room <= 1e-6) break;
+
+    for (let index = 0; index < next.length; index += 1) {
+      next[index] = clamp(
+        next[index]! + (remainder * headroom[index]!) / room,
+        panelFloor(constraints[index]!),
+        constraints[index]!.maxSize
+      );
+    }
+  }
+
+  // Minimums that add up to more than the whole cannot all be honoured. Scaling
+  // the whole layout down is the failure that stays legible: every panel is
+  // smaller than it asked for, rather than the last one being pushed out of the
+  // container where nobody can see that it is there at all.
+  const sum = total(next);
+  if (sum > 100 + 1e-6) {
+    for (let index = 0; index < next.length; index += 1) {
+      next[index] = (next[index]! * 100) / sum;
+    }
+  }
+
+  return next;
+}
+
+/**
+ * Turns whatever sizes a caller gave into one layout that adds up.
+ *
+ * Panels with no size of their own split what the sized ones left over, so a
+ * three-pane splitter that only pins its sidebar gets the sensible reading of
+ * that: the sidebar keeps its number and the other two share the rest.
+ */
+export function resolveLayout(
+  sizes: (number | undefined)[],
+  constraints: SplitterConstraint[]
+): number[] {
+  if (constraints.length === 0) return [];
+
+  let claimed = 0;
+  let unsized = 0;
+  for (let index = 0; index < constraints.length; index += 1) {
+    const size = sizes[index];
+    if (typeof size === 'number' && Number.isFinite(size)) {
+      claimed += clamp(size, 0, 100);
+    } else {
+      unsized += 1;
+    }
+  }
+
+  const share = unsized > 0 ? Math.max(100 - claimed, 0) / unsized : 0;
+  const layout: number[] = [];
+  for (let index = 0; index < constraints.length; index += 1) {
+    const size = sizes[index];
+    const raw =
+      typeof size === 'number' && Number.isFinite(size) ? clamp(size, 0, 100) : share;
+    layout.push(
+      clamp(raw, panelFloor(constraints[index]!), constraints[index]!.maxSize)
+    );
+  }
+
+  return settle(layout, constraints);
+}
+
+/**
+ * A panel's size once it is below its minimum: shut if it is collapsible and
+ * the drag has gone more than halfway there, and otherwise held at the minimum.
+ *
+ * The halfway point is what makes collapsing feel like a decision rather than
+ * an accident — a finger that grazes the minimum springs back, and one that
+ * keeps going shuts the panel.
+ */
+function snapDown(size: number, constraint: SplitterConstraint): number {
+  'worklet';
+  if (size >= constraint.minSize) return size;
+  if (!constraint.collapsible) return constraint.minSize;
+  return size < (constraint.collapsedSize + constraint.minSize) / 2
+    ? constraint.collapsedSize
+    : constraint.minSize;
+}
+
+/**
+ * Moves one seam, in percent, and hands back the whole layout.
+ *
+ * Only the two panels either side of the seam change: a drag borrows from its
+ * neighbour and nobody else, so the panels further along stay exactly where the
+ * reader left them.
+ *
+ * Collapsing is only ever offered to the panel being shrunk. Both sides could
+ * technically be past their minimum at once at the end of a long drag, and
+ * shutting the panel that is currently growing is never what the drag meant.
+ */
+export function resizeLayout(
+  layout: number[],
+  boundary: number,
+  delta: number,
+  constraints: SplitterConstraint[]
+): number[] {
+  'worklet';
+  const next = layout.slice();
+  if (boundary < 0 || boundary + 1 >= next.length) return next;
+  if (!Number.isFinite(delta)) return next;
+
+  const first = constraints[boundary];
+  const second = constraints[boundary + 1];
+  if (!first || !second) return next;
+
+  const pair = next[boundary]! + next[boundary + 1]!;
+  let intended = next[boundary]! + delta;
+
+  if (delta < 0) {
+    intended = snapDown(intended, first);
+  } else if (delta > 0) {
+    intended = pair - snapDown(pair - intended, second);
+  }
+
+  const low = Math.max(panelFloor(first), pair - second.maxSize);
+  const high = Math.min(first.maxSize, pair - panelFloor(second));
+  if (low > high) return next;
+
+  next[boundary] = clamp(intended, low, high);
+  next[boundary + 1] = pair - next[boundary]!;
+  return next;
+}
+
+/** Where a seam sits, in percent, measured from the start of the splitter. */
+export function layoutOffset(layout: number[], boundary: number): number {
+  'worklet';
+  let offset = 0;
+  for (let index = 0; index <= boundary && index < layout.length; index += 1) {
+    offset += layout[index]!;
+  }
+  return offset;
+}
+
+/** Whether a panel is currently shut rather than merely small. */
+export function isCollapsed(size: number, constraint: SplitterConstraint): boolean {
+  'worklet';
+  return constraint.collapsible && size <= constraint.collapsedSize + 1e-6;
+}

package/src/components/steps/index.tsx

@@ -38,12 +38,19 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type Text as RNText,
+  type ViewProps,
+} from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { CheckIcon } from '../../icons';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { Spinner } from '../spinner';
+import { stepsTriggerDisabled } from './steps-trigger';
 
 export type StepState = 'active' | 'completed' | 'inactive' | 'loading';
 export type StepsOrientation = 'horizontal' | 'vertical';
@@ -293,7 +300,7 @@ const StepsItem = forwardRef<View, StepsItemProps>(
 );
 StepsItem.displayName = 'Steps.Item';
 
-export interface StepsTriggerProps extends ViewProps {
+export interface StepsTriggerProps extends PressableProps {
   className?: string;
   children?: ReactNode;
 }
@@ -308,11 +315,23 @@ const STATE_WORDS: Record<StepState, string> = {
 
 /** Makes its item selectable. Omit it for a read-only stepper. */
 const StepsTrigger = forwardRef<View, StepsTriggerProps>(
-  ({ className, children, ...props }, ref) => {
+  (
+    {
+      className,
+      children,
+      disabled,
+      onPress,
+      accessibilityState,
+      accessibilityValue,
+      ...props
+    },
+    ref
+  ) => {
     const { setActiveStep, orientation } = useSteps('Steps.Trigger');
     const { step, state, isDisabled } = useStepItem('Steps.Trigger');
     const placement = useContext(StepPositionContext);
-    const { trigger } = stepsVariants({ orientation, state, isDisabled });
+    const triggerDisabled = stepsTriggerDisabled(isDisabled, disabled);
+    const { trigger } = stepsVariants({ orientation, state, isDisabled: triggerDisabled });
 
     /*
      * Said as a value rather than a label, because the label is the step's own
@@ -327,13 +346,20 @@ const StepsTrigger = forwardRef<View, StepsTriggerProps>(
     return (
       <Pressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
-        accessibilityState={{ disabled: isDisabled, selected: state === 'active' }}
-        accessibilityValue={{ text: position }}
-        disabled={isDisabled}
-        onPress={() => setActiveStep(step)}
+        accessibilityState={{
+          ...accessibilityState,
+          disabled: triggerDisabled,
+          selected: state === 'active',
+        }}
+        accessibilityValue={{ ...accessibilityValue, text: position }}
+        disabled={triggerDisabled}
+        onPress={(event) => {
+          onPress?.(event);
+          setActiveStep(step);
+        }}
         className={trigger({ className })}
-        {...props}
       >
         {textChildren(children)}
       </Pressable>

package/src/components/steps/steps-trigger.ts

@@ -0,0 +1,6 @@
+export function stepsTriggerDisabled(
+  itemDisabled: boolean,
+  triggerDisabled: boolean | null | undefined
+): boolean {
+  return itemDisabled || !!triggerDisabled;
+}

package/src/components/table/index.tsx

@@ -414,10 +414,10 @@ const TableRow = forwardRef<View, TableRowProps>(
       return (
         <View
           ref={ref}
+          {...(props as ViewProps)}
           role="row"
           accessibilityState={{ disabled: !!disabled, selected: !!selected }}
           className={classes}
-          {...(props as ViewProps)}
         >
           {cells}
         </View>
@@ -427,6 +427,7 @@ const TableRow = forwardRef<View, TableRowProps>(
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         // A row you can act on is a button first: announcing it as a row would
         // hide the fact that it does anything.
         accessibilityRole="button"
@@ -434,7 +435,6 @@ const TableRow = forwardRef<View, TableRowProps>(
         disabled={disabled}
         onPress={onPress}
         className={classes}
-        {...props}
       >
         {cells}
       </AnimatedPressable>

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

@@ -64,6 +64,7 @@ import { Text } from '../../primitives/text';
 import { selectionTick } from '../../utils/haptics';
 import { Chip, type ChipSize, type ChipVariant } from '../chip';
 import { Label } from '../label';
+import { reconcileMarkedTag, type MarkedTag } from './tag-input-state';
 
 /** Matches Input and Combobox, so the three read as the same control focused. */
 const FOCUS_DURATION = 150;
@@ -298,18 +299,18 @@ export const TagInput = forwardRef<TextInput, TagInputProps>(
      * itself, because with `allowDuplicates` two tags can read the same and
      * marking "the last one" has to mean the last one.
      */
-    const [marked, setMarked] = useState<number | null>(null);
+    const [marked, setMarked] = useState<MarkedTag | null>(null);
 
     const overflowing = max !== undefined && tags.length > max;
     const invalid = !!errorMessage || overflowing;
     const interactive = !disabled && !readOnly;
 
-    // The list can be emptied from outside, which would leave the mark pointing
-    // past the end of it — and a stale mark is a tag deleted by a backspace
-    // meant for the one that used to be there.
+    // A controlled list can be replaced or reordered between the two
+    // backspaces. Keep the mark only while the exact tag it armed still owns
+    // that slot, so a key press aimed at the old value cannot delete the new one.
     useEffect(() => {
-      if (marked !== null && marked >= tags.length) setMarked(null);
-    }, [marked, tags.length]);
+      setMarked((current) => reconcileMarkedTag(current, tags));
+    }, [tags]);
 
     const setText = useCallback(
       (next: string) => {
@@ -418,14 +419,15 @@ export const TagInput = forwardRef<TextInput, TagInputProps>(
         // what it always means, and the tags are none of its business.
         if (text.length > 0 || tags.length === 0) return;
 
-        if (marked !== null && marked < tags.length) {
-          removeAt(marked);
+        if (marked !== null && reconcileMarkedTag(marked, tags)) {
+          removeAt(marked.index);
           setMarked(null);
           return;
         }
-        setMarked(tags.length - 1);
+        const index = tags.length - 1;
+        setMarked({ index, tag: tags[index]! });
       },
-      [onKeyPress, text.length, tags.length, marked, removeAt]
+      [onKeyPress, text.length, tags, marked, removeAt]
     );
 
     const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(
@@ -541,7 +543,7 @@ export const TagInput = forwardRef<TextInput, TagInputProps>(
                     // The marked tag turns destructive rather than growing an
                     // outline: it is about to be deleted, and that is the one
                     // colour in the theme that already means exactly that.
-                    variant={marked === index ? 'destructive' : chipVariant}
+                    variant={marked?.index === index ? 'destructive' : chipVariant}
                     onClose={interactive ? () => removeAt(index) : undefined}
                     closeLabel={`Remove ${tag}`}
                     haptics={haptics}

package/src/components/tag-input/tag-input-state.ts

@@ -0,0 +1,18 @@
+/** The exact slot a first Backspace armed for removal. */
+export interface MarkedTag {
+  index: number;
+  tag: string;
+}
+
+/**
+ * Keeps an armed removal only while the same tag still occupies the same slot.
+ * Controlled fields can replace or reorder their value between key presses;
+ * a mark from the old value must never authorize deleting the new one.
+ */
+export function reconcileMarkedTag(
+  marked: MarkedTag | null,
+  tags: readonly string[]
+): MarkedTag | null {
+  if (marked === null) return null;
+  return tags[marked.index] === marked.tag ? marked : null;
+}

package/src/components/textarea/index.tsx

@@ -39,6 +39,7 @@ import type { KeyboardAvoidanceMode } from '../../hooks/use-keyboard-avoidance';
 import { KeyboardAvoider } from '../../primitives/keyboard-avoider';
 import { Text } from '../../primitives/text';
 import { Label } from '../label';
+import { textareaIsDisabled } from './textarea-disabled';
 
 /** Long enough to read as a transition, short enough not to lag a fast tab. */
 const FOCUS_DURATION = 150;
@@ -183,6 +184,8 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
       onFocus,
       onBlur,
       onContentSizeChange,
+      editable,
+      accessibilityState,
       style,
       ...props
     },
@@ -190,6 +193,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
   ) => {
     const [focused, setFocused] = useState(false);
     const invalid = !!errorMessage;
+    const isDisabled = textareaIsDisabled(disabled, editable);
 
     const metrics = METRICS[size];
     /* Both paddings plus the lines themselves — the box a row count asks for. */
@@ -225,7 +229,7 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
     const slots = textareaVariants({
       variant,
       size,
-      disabled: !!disabled,
+      disabled: isDisabled,
       over,
     });
 
@@ -320,19 +324,19 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(
     const body = (
       <>
         {label ? (
-          <Label isRequired={isRequired} isInvalid={invalid} isDisabled={!!disabled}>
+          <Label isRequired={isRequired} isInvalid={invalid} isDisabled={isDisabled}>
             {label}
           </Label>
         ) : null}
         <AnimatedTextInput
           ref={ref}
           multiline
-          editable={!disabled}
+          editable={!isDisabled}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onContentSizeChange={handleContentSizeChange}
           accessibilityLabel={label}
-          accessibilityState={{ disabled: !!disabled }}
+          accessibilityState={{ ...accessibilityState, disabled: isDisabled }}
           aria-required={isRequired}
           aria-invalid={invalid}
           className={slots.field({ className })}

package/src/components/textarea/textarea-disabled.ts

@@ -0,0 +1,6 @@
+export function textareaIsDisabled(
+  disabled: boolean | undefined,
+  editable: boolean | undefined
+): boolean {
+  return !!disabled || editable === false;
+}