panelui-native 0.53.0 → 0.56.0

package/src/components/sortable/index.tsx

@@ -583,18 +583,32 @@ function SortableRoot({
 
   const indexOf = useCallback((id: string) => indices.get(id) ?? -1, [indices]);
 
+  /*
+   * Both maps are accumulated in a ref and then published, rather than built by
+   * reading the shared value back and spreading it. Every row reports its
+   * layout in the same batch on mount, and a write to `.value` is not visible
+   * to the next read in that batch — so a read-modify-write there has all the
+   * rows spreading the same empty map and only the last one surviving. A list
+   * that knows one row's height puts every slot a gap apart, and the first
+   * drag drops the row at the end of the list.
+   */
+  const measuredHeights = useRef<Record<string, number>>({});
+  const pinnedFlags = useRef<Record<string, boolean>>({});
+
   const measured = useCallback(
     (id: string, height: number) => {
-      if (heights.value[id] === height) return;
-      heights.value = { ...heights.value, [id]: height };
+      if (measuredHeights.current[id] === height) return;
+      measuredHeights.current = { ...measuredHeights.current, [id]: height };
+      heights.value = measuredHeights.current;
     },
     [heights]
   );
 
   const setPinned = useCallback(
     (id: string, next: boolean) => {
-      if (Boolean(pinned.value[id]) === next) return;
-      pinned.value = { ...pinned.value, [id]: next };
+      if (Boolean(pinnedFlags.current[id]) === next) return;
+      pinnedFlags.current = { ...pinnedFlags.current, [id]: next };
+      pinned.value = pinnedFlags.current;
     },
     [pinned]
   );
@@ -1031,10 +1045,15 @@ function SortableItem({
          * drop unreported; `seq` is what tells the two cases apart, because
          * the only interruption that should be ignored is the row being picked
          * up again.
+         *
+         * `activeId` is checked as well as `seq` because reporting the drop is
+         * itself what interrupts the spring: the caller applies the reorder,
+         * and the reset that follows puts `translate` back to rest, which ends
+         * the animation and calls this a second time under the same `seq`.
          */
         const land = () => {
           'worklet';
-          if (dragSeq.value !== seq) return;
+          if (dragSeq.value !== seq || activeId.value === null) return;
           activeId.value = null;
           runOnJS(notifySettled)(id);
         };
@@ -1142,17 +1161,27 @@ function SortableItem({
    * no way to discover it from the row. Moving by whole slots is published as
    * an accessibility action instead, which is the only path to reordering for
    * someone who is not dragging anything.
+   *
+   * The actions sit wherever the drag does. A handle list keeps them on the
+   * grip, which is an element in its own right; put here they would never be
+   * offered, because the actions of a view that is not itself an accessibility
+   * element are not reachable, and a row full of text is not one. A long-press
+   * list has no grip and gives the whole row to the drag, so the row becomes
+   * the element — which is what a screen reader wants from a row in any case.
    */
-  const a11y = locked
-    ? undefined
-    : [
+  const carriesActions = activation === 'longPress' && !locked;
+
+  const a11y = carriesActions
+    ? [
         { name: 'moveUp', label: 'Move up' },
         { name: 'moveDown', label: 'Move down' },
-      ];
+      ]
+    : undefined;
 
   const row = (
     <Animated.View
       onLayout={onLayout}
+      accessible={carriesActions}
       accessibilityActions={a11y}
       onAccessibilityAction={(event) => {
         if (event.nativeEvent.actionName === 'moveUp') step(id, -1);
@@ -1224,7 +1253,7 @@ function SortableHandle({
   accessibilityLabel = 'Drag to reorder',
   ...props
 }: SortableHandleProps) {
-  const { activation, disabled: rootDisabled } = useSortableRoot('Sortable.Handle');
+  const { activation, disabled: rootDisabled, step } = useSortableRoot('Sortable.Handle');
   const item = useContext(SortableItemContext);
 
   /*
@@ -1235,17 +1264,44 @@ function SortableHandle({
   const muted = useCSSVariable('--color-muted-foreground');
   const tint = typeof muted === 'string' ? muted : undefined;
 
+  const locked = rootDisabled || item?.disabled;
+
+  /*
+   * `adjustable` promises an element that answers a swipe up or down, and the
+   * promise was never kept: the grip published the role and nothing else, so
+   * the one part of a row a screen reader could reach did nothing at all.
+   * Moving by whole slots is what it was always meant to do. The same move is
+   * offered as a named action too, because a swipe says nothing about which
+   * way the row is going to travel.
+   */
+  const move = (delta: number) => {
+    if (locked || !item) return;
+    step(item.id, delta);
+  };
+
   const glyph = (
     <View
       accessible
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel}
-      accessibilityState={{ disabled: rootDisabled || item?.disabled }}
-      className={cn(
-        'items-center justify-center px-2 py-1.5',
-        (rootDisabled || item?.disabled) && 'opacity-40',
-        className
-      )}
+      accessibilityState={{ disabled: locked }}
+      accessibilityValue={item ? { text: `Position ${item.index + 1}` } : undefined}
+      accessibilityActions={
+        locked
+          ? undefined
+          : [
+              { name: 'increment' },
+              { name: 'decrement' },
+              { name: 'moveUp', label: 'Move up' },
+              { name: 'moveDown', label: 'Move down' },
+            ]
+      }
+      onAccessibilityAction={(event) => {
+        const action = event.nativeEvent.actionName;
+        if (action === 'increment' || action === 'moveUp') move(-1);
+        if (action === 'decrement' || action === 'moveDown') move(1);
+      }}
+      className={cn('items-center justify-center px-2 py-1.5', locked && 'opacity-40', className)}
       {...props}
     >
       <IconColorProvider color={tint}>

package/src/components/steps/index.tsx

@@ -14,10 +14,24 @@
  * Steps does not own your flow: it reflects whatever step your app says is
  * active. Pass `value` to control it, or `defaultValue` to let it manage
  * its own.
+ *
+ * The connectors are the component's job, not yours. The root counts the items
+ * it holds and each one draws the connector to the next, so a stepper is just
+ * its steps — there is no separator to forget, mis-order, or leave dangling
+ * past the last stop. An item that contains its own `Steps.Separator` keeps it
+ * and gets no second one, so hand-placed connectors still work; `separators`
+ * turns the automatic ones off wholesale.
+ *
+ * Knowing the count is also what lets a step say where it sits. A screen reader
+ * reaching the middle of a wizard hears "Payment, step 2 of 3, completed" —
+ * the position and the state, which are the two things the circle and its fill
+ * convey to everyone else.
  */
 import {
+  Children,
   createContext,
   forwardRef,
+  isValidElement,
   useCallback,
   useContext,
   useMemo,
@@ -91,6 +105,7 @@ interface StepsContextValue {
   activeStep: number;
   setActiveStep: (step: number) => void;
   orientation: StepsOrientation;
+  separators: boolean;
 }
 
 interface StepItemContextValue {
@@ -100,8 +115,23 @@ interface StepItemContextValue {
   isLoading: boolean;
 }
 
+/**
+ * Where an item sits among its siblings, published by the root.
+ *
+ * Deliberately not the item's own `step` prop: that is the author's numbering
+ * of the flow and may skip, repeat or start anywhere, while the connector and
+ * the "2 of 3" announcement both need the position in the row as rendered.
+ * Absent when an item is used outside a root that maps its children, which is
+ * why every reader of it has a fallback.
+ */
+interface StepPositionContextValue {
+  position: number;
+  total: number;
+}
+
 const StepsContext = createContext<StepsContextValue | null>(null);
 const StepItemContext = createContext<StepItemContextValue | null>(null);
+const StepPositionContext = createContext<StepPositionContextValue | null>(null);
 
 function useSteps(component: string): StepsContextValue {
   const context = useContext(StepsContext);
@@ -127,6 +157,13 @@ export interface StepsProps extends ViewProps {
   value?: number;
   onValueChange?: (value: number) => void;
   orientation?: StepsOrientation;
+  /**
+   * Draw the connector between one item and the next. On by default — an item
+   * that holds its own `Steps.Separator` is left alone either way, so this is
+   * for a stepper that wants no connectors at all rather than for one that
+   * places them by hand.
+   */
+  separators?: boolean;
   children?: ReactNode;
 }
 
@@ -138,6 +175,7 @@ const StepsRoot = forwardRef<View, StepsProps>(
       value,
       onValueChange,
       orientation = 'horizontal',
+      separators = true,
       children,
       ...props
     },
@@ -156,16 +194,37 @@ const StepsRoot = forwardRef<View, StepsProps>(
     );
 
     const context = useMemo(
-      () => ({ activeStep, setActiveStep, orientation }),
-      [activeStep, setActiveStep, orientation]
+      () => ({ activeStep, setActiveStep, orientation, separators }),
+      [activeStep, setActiveStep, orientation, separators]
     );
 
     const { root } = stepsVariants({ orientation });
 
+    /*
+     * Items are counted here rather than registered by each one on mount,
+     * because the count has to be right on the first frame: a connector that
+     * appears after the last item and disappears once the registrations land
+     * is a visible flicker on every mount. Reading the children gives the whole
+     * row at once, and a Provider adds no host view, so wrapping an item in one
+     * leaves the flex layout exactly as it was.
+     */
+    const nodes = Children.toArray(textChildren(children));
+    const total = nodes.filter((node) => isValidElement(node) && node.type === StepsItem).length;
+    let position = -1;
+
     return (
       <StepsContext.Provider value={context}>
         <View ref={ref} className={root({ className })} {...props}>
-          {textChildren(children)}
+          {nodes.map((node) => {
+            if (!isValidElement(node) || node.type !== StepsItem) return node;
+            position += 1;
+            const placement = { position, total };
+            return (
+              <StepPositionContext.Provider key={node.key ?? position} value={placement}>
+                {node}
+              </StepPositionContext.Provider>
+            );
+          })}
         </View>
       </StepsContext.Provider>
     );
@@ -190,7 +249,8 @@ const StepsItem = forwardRef<View, StepsItemProps>(
     { className, step, completed = false, disabled = false, loading = false, children, ...props },
     ref
   ) => {
-    const { activeStep, orientation } = useSteps('Steps.Item');
+    const { activeStep, orientation, separators } = useSteps('Steps.Item');
+    const placement = useContext(StepPositionContext);
 
     const isLoading = loading && step === activeStep;
     const state: StepState =
@@ -209,10 +269,23 @@ const StepsItem = forwardRef<View, StepsItemProps>(
 
     const { item } = stepsVariants({ orientation, state });
 
+    /*
+     * The last item has nothing to connect to, and one placed by hand is the
+     * author's — adding a second beside it would double the line rather than
+     * replace it. Only the top level is inspected, which is where a connector
+     * has to be anyway: it is a sibling of the trigger, not something buried
+     * inside it.
+     */
+    const isLast = placement ? placement.position === placement.total - 1 : true;
+    const hasOwnSeparator = Children.toArray(children).some(
+      (child) => isValidElement(child) && child.type === StepsSeparator
+    );
+
     return (
       <StepItemContext.Provider value={context}>
         <View ref={ref} className={item({ className })} {...props}>
           {textChildren(children)}
+          {separators && !isLast && !hasOwnSeparator ? <StepsSeparator /> : null}
         </View>
       </StepItemContext.Provider>
     );
@@ -225,18 +298,38 @@ export interface StepsTriggerProps extends ViewProps {
   children?: ReactNode;
 }
 
+/** What each state is called when a screen reader reaches the step. */
+const STATE_WORDS: Record<StepState, string> = {
+  completed: 'completed',
+  active: 'current step',
+  loading: 'in progress',
+  inactive: 'not started',
+};
+
 /** Makes its item selectable. Omit it for a read-only stepper. */
 const StepsTrigger = forwardRef<View, StepsTriggerProps>(
   ({ className, children, ...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 });
 
+    /*
+     * Said as a value rather than a label, because the label is the step's own
+     * title and the circle beside it — text the trigger already merges. An
+     * `accessibilityLabel` here would replace all of that with the position,
+     * trading the name of the step for its number; a value is read after it.
+     */
+    const position = placement
+      ? `step ${placement.position + 1} of ${placement.total}, ${STATE_WORDS[state]}`
+      : STATE_WORDS[state];
+
     return (
       <Pressable
         ref={ref}
         accessibilityRole="button"
         accessibilityState={{ disabled: isDisabled, selected: state === 'active' }}
+        accessibilityValue={{ text: position }}
         disabled={isDisabled}
         onPress={() => setActiveStep(step)}
         className={trigger({ className })}
@@ -310,11 +403,13 @@ export interface StepsSeparatorProps extends ViewProps {
 }
 
 /**
- * The connector between two steps. Fills with the primary colour once the
- * step before it is complete.
+ * The connector between two steps. Fills with the primary colour once the step
+ * before it is complete.
  *
- * Place it inside a Steps.Item so it can read that item's state — the
- * separator after step 1 goes solid when step 1 is done.
+ * Every item draws one automatically, so this is only worth writing to dress a
+ * particular connector — an item that holds its own keeps it and gets no
+ * second. It belongs inside a `Steps.Item` either way, so it can read that
+ * item's state: the connector after step 1 goes solid when step 1 is done.
  */
 const StepsSeparator = forwardRef<View, StepsSeparatorProps>(
   ({ className, ...props }, ref) => {