panelui-native 0.63.0 → 0.65.0

package/src/components/flow/index.tsx

@@ -48,6 +48,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -97,6 +98,15 @@ import {
   type FlowRect,
   type FlowSide,
 } from './flow-paths';
+import {
+  clampNodePosition,
+  FLOW_DELETE_ACTION,
+  FLOW_MOVE_ACTIONS,
+  getFlowConnectionActions,
+  moveNodePosition,
+  type FlowAccessibilityHandle,
+  type FlowAccessibilityNode,
+} from './flow-accessibility';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
@@ -167,13 +177,9 @@ export interface FlowConnection {
   targetHandle?: string;
 }
 
-interface HandleEntry {
-  key: string;
-  node: string;
-  id: string;
+interface HandleEntry extends FlowAccessibilityHandle {
   side: FlowSide;
   offset: number;
-  type: 'source' | 'target' | 'both';
 }
 
 interface FlowContextValue {
@@ -215,7 +221,7 @@ interface FlowContextValue {
   maxZoom: number;
   locked: boolean;
   setLocked: (locked: boolean) => void;
-  nodeIds: string[];
+  nodes: FlowAccessibilityNode[];
   /**
    * Which of `nodeIds` are containers rather than nodes. A group writes its box
    * into the same registry — that is what lets an edge name one and the minimap
@@ -224,7 +230,7 @@ interface FlowContextValue {
   groupIds: string[];
   handles: HandleEntry[];
   edges: { key: string; props: FlowEdgeProps }[];
-  registerNode: (id: string) => void;
+  registerNode: (id: string, label?: string) => void;
   unregisterNode: (id: string) => void;
   registerGroup: (id: string) => void;
   unregisterGroup: (id: string) => void;
@@ -232,8 +238,8 @@ interface FlowContextValue {
   unregisterHandle: (key: string) => void;
   registerEdge: (key: string, props: FlowEdgeProps) => void;
   unregisterEdge: (key: string) => void;
-  onConnect?: (connection: FlowConnection) => void;
-  isValidConnection?: (connection: FlowConnection) => boolean;
+  connectNodes: (connection: FlowConnection) => void;
+  canConnect: boolean;
   onNodeDragEnd?: (id: string, position: FlowNodePosition) => void;
   fitView: () => void;
   zoomBy: (factor: number) => void;
@@ -332,7 +338,7 @@ function FlowRoot({
   const size = useSharedValue({ width: 0, height: 0 });
 
   const [locked, setLocked] = useState(false);
-  const [nodeIds, setNodeIds] = useState<string[]>([]);
+  const [nodes, setNodes] = useState<FlowAccessibilityNode[]>([]);
   const [groupIds, setGroupIds] = useState<string[]>([]);
   const [handles, setHandles] = useState<HandleEntry[]>([]);
   const [edges, setEdges] = useState<{ key: string; props: FlowEdgeProps }[]>([]);
@@ -441,12 +447,12 @@ function FlowRoot({
     viewportChangeRef.current?.({ x, y, zoom: z });
   }, []);
 
-  const registerNode = useCallback((id: string) => {
-    setNodeIds((current) => (current.includes(id) ? current : [...current, id]));
+  const registerNode = useCallback((id: string, label = id) => {
+    setNodes((current) => [...current.filter((entry) => entry.id !== id), { id, label }]);
   }, []);
 
   const unregisterNode = useCallback((id: string) => {
-    setNodeIds((current) => current.filter((entry) => entry !== id));
+    setNodes((current) => current.filter((entry) => entry.id !== id));
   }, []);
 
   const registerGroup = useCallback((id: string) => {
@@ -476,6 +482,15 @@ function FlowRoot({
     setEdges((current) => current.filter((edge) => edge.key !== key));
   }, []);
 
+  const connectRef = useRef(onConnect);
+  connectRef.current = onConnect;
+  const validConnectionRef = useRef(isValidConnection);
+  validConnectionRef.current = isValidConnection;
+  const connectNodes = useCallback((next: FlowConnection) => {
+    if (validConnectionRef.current && !validConnectionRef.current(next)) return;
+    connectRef.current?.(next);
+  }, []);
+
   const fitView = useCallback(() => {
     const { width, height } = size.value;
     const all = Object.values(rects.value);
@@ -549,10 +564,10 @@ function FlowRoot({
   // mount has nothing to fit to yet. One frame later they do.
   const fitOnMount = useRef(fitViewOnMount);
   useEffect(() => {
-    if (!fitOnMount.current || nodeIds.length === 0) return;
+    if (!fitOnMount.current || nodes.length === 0) return;
     const timer = setTimeout(fitView, 32);
     return () => clearTimeout(timer);
-  }, [fitView, nodeIds.length]);
+  }, [fitView, nodes.length]);
 
   const panStart = useSharedValue({ x: 0, y: 0 });
   const pinchStart = useSharedValue({ zoom: 1, x: 0, y: 0 });
@@ -647,7 +662,7 @@ function FlowRoot({
       maxZoom,
       locked,
       setLocked,
-      nodeIds,
+      nodes,
       groupIds,
       handles,
       edges,
@@ -659,8 +674,8 @@ function FlowRoot({
       unregisterHandle,
       registerEdge,
       unregisterEdge,
-      onConnect,
-      isValidConnection,
+      connectNodes,
+      canConnect: Boolean(onConnect),
       onNodeDragEnd,
       fitView,
       zoomBy,
@@ -678,11 +693,11 @@ function FlowRoot({
       handles,
       registerEdge,
       unregisterEdge,
-      isValidConnection,
+      connectNodes,
       locked,
       maxZoom,
       minZoom,
-      nodeIds,
+      nodes,
       groupIds,
       onConnect,
       onNodeDragEnd,
@@ -856,7 +871,7 @@ function FlowBackground({
   const token = useCSSVariable('--color-muted-foreground');
   const tint = color ?? (typeof token === 'string' ? token : '#737373');
   // A pattern is referenced by id, and two canvases on one screen would collide.
-  const id = useRef(`panelui-flow-${Math.random().toString(36).slice(2, 7)}`).current;
+  const id = `panelui-flow-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   /*
    * The grid is a tile that follows the viewport in whole-cell steps.
@@ -972,6 +987,13 @@ export interface FlowNodeProps extends Omit<ViewProps, 'children'> {
   selected?: boolean;
   /** Tapping the node — separate from dragging it. */
   onPress?: () => void;
+  /**
+   * Delete the node when assistive technology requests the advertised Delete
+   * node action. No delete action is exposed when this is omitted.
+   */
+  onDelete?: () => void;
+  /** Graph points covered by each Move up, right, down or left accessibility action. */
+  accessibilityMoveStep?: number;
   /** Spoken name. Defaults to the node's id. */
   accessibilityLabel?: string;
   children?: ReactNode;
@@ -991,7 +1013,11 @@ function FlowNode({
   pinned = false,
   selected = false,
   onPress,
+  onDelete,
+  accessibilityMoveStep = 24,
   accessibilityLabel,
+  accessibilityActions,
+  onAccessibilityAction,
   children,
   ...props
 }: FlowNodeProps) {
@@ -1009,6 +1035,10 @@ function FlowNode({
     registerGroup,
     unregisterGroup,
     onNodeDragEnd,
+    nodes,
+    handles,
+    connectNodes,
+    canConnect,
   } = flow;
 
   /*
@@ -1018,13 +1048,13 @@ function FlowNode({
    * layer both need to know it is a container and not a card.
    */
   useEffect(() => {
-    registerNode(id);
+    registerNode(id, accessibilityLabel ?? id);
     registerGroup(id);
     return () => {
       unregisterNode(id);
       unregisterGroup(id);
     };
-  }, [id, registerGroup, registerNode, unregisterGroup, unregisterNode]);
+  }, [accessibilityLabel, id, registerGroup, registerNode, unregisterGroup, unregisterNode]);
 
   // Writing on every render would fight the drag, snapping a node back to the
   // position it was first given. Only an actual change to the prop moves it.
@@ -1065,11 +1095,70 @@ function FlowNode({
   );
 
   const start = useSharedValue({ x: 0, y: 0 });
-
   const pressRef = useRef(onPress);
   pressRef.current = onPress;
   const press = useCallback(() => pressRef.current?.(), []);
 
+  const moveNode = useCallback(
+    (actionName: string) => {
+      const rect = rects.value[id];
+      if (!rect) return;
+      const bounds = confine && group ? rects.value[group] : undefined;
+      const next = moveNodePosition(rect, bounds, actionName, accessibilityMoveStep);
+      if (!next) return;
+      setNodeRect(id, next);
+      dragEnd(next.x, next.y);
+    },
+    [accessibilityMoveStep, confine, dragEnd, group, id, rects, setNodeRect]
+  );
+
+  const connectionActions = useMemo(
+    () => (canConnect && !locked ? getFlowConnectionActions(id, nodes, handles) : []),
+    [canConnect, handles, id, locked, nodes]
+  );
+  const connectionByAction = useMemo(
+    () => new Map(connectionActions.map((entry) => [entry.name, entry.connection])),
+    [connectionActions]
+  );
+  const movable = draggable && !pinned && !locked;
+  const nodeActions = useMemo(
+    () => [
+      ...(onPress ? [{ name: 'activate' }] : []),
+      ...(movable ? FLOW_MOVE_ACTIONS : []),
+      ...connectionActions.map(({ name, label }) => ({ name, label })),
+      ...(onDelete ? [FLOW_DELETE_ACTION] : []),
+      ...(accessibilityActions ?? []),
+    ],
+    [accessibilityActions, connectionActions, movable, onDelete, onPress]
+  );
+
+  const handleAccessibilityAction = useCallback<
+    NonNullable<ViewProps['onAccessibilityAction']>
+  >(
+    (event) => {
+      const action = event.nativeEvent.actionName;
+      if (action === 'activate' && onPress) {
+        press();
+        return;
+      }
+      if (movable && FLOW_MOVE_ACTIONS.some((entry) => entry.name === action)) {
+        moveNode(action);
+        return;
+      }
+      const nextConnection = connectionByAction.get(action);
+      if (nextConnection) {
+        connectNodes(nextConnection);
+        return;
+      }
+      if (action === FLOW_DELETE_ACTION.name && onDelete) {
+        onDelete();
+        return;
+      }
+      onAccessibilityAction?.(event);
+    },
+    [connectNodes, connectionByAction, movable, moveNode, onAccessibilityAction, onDelete, onPress, press]
+  );
+
   const drag = useMemo(
     () =>
       Gesture.Pan()
@@ -1096,13 +1185,9 @@ function FlowNode({
            * would leave the edges drawn to a position the node never reached.
            */
           if (confine && group) {
-            const box = rects.value[group];
-            if (box) {
-              const maxX = box.x + box.width - rect.width;
-              const maxY = box.y + box.height - rect.height;
-              x = x < box.x ? box.x : x > maxX ? maxX : x;
-              y = y < box.y ? box.y : y > maxY ? maxY : y;
-            }
+            const next = clampNodePosition(rect, rects.value[group], { x, y });
+            x = next.x;
+            y = next.y;
           }
 
           rects.value = { ...rects.value, [id]: { ...rect, x, y } };
@@ -1158,6 +1243,8 @@ function FlowNode({
           accessibilityRole={onPress ? 'button' : 'none'}
           accessibilityLabel={accessibilityLabel ?? id}
           accessibilityState={{ selected }}
+          accessibilityActions={nodeActions}
+          onAccessibilityAction={handleAccessibilityAction}
           {...props}
         >
           {textChildren(children)}
@@ -1185,6 +1272,11 @@ export interface FlowHandleProps {
   /** Where along the face, 0–1. For more than one handle on a side. */
   offset?: number;
   className?: string;
+  /**
+   * Spoken handle name used in the parent node's connection actions. Defaults
+   * to the handle's id.
+   */
+  accessibilityLabel?: string;
   /** Draw nothing. The handle still anchors edges and still accepts a drop. */
   hidden?: boolean;
 }
@@ -1203,6 +1295,7 @@ function FlowHandle({
   type = 'both',
   offset = 0.5,
   className,
+  accessibilityLabel,
   hidden = false,
 }: FlowHandleProps) {
   const flow = useFlow('Flow.Handle');
@@ -1211,31 +1304,51 @@ function FlowHandle({
     throw new Error('Flow.Handle must be used within a <Flow.Node>');
   }
 
-  const { rects, zoom, connection, handles, locked, registerHandle, unregisterHandle } = flow;
+  const {
+    rects,
+    zoom,
+    connection,
+    handles,
+    locked,
+    registerHandle,
+    unregisterHandle,
+    connectNodes,
+  } = flow;
   const key = `${node}.${id}`;
 
   useEffect(() => {
-    registerHandle({ key, node, id, side: position, offset, type });
+    registerHandle({
+      key,
+      node,
+      id,
+      label: accessibilityLabel ?? id,
+      side: position,
+      offset,
+      type,
+    });
     return () => unregisterHandle(key);
-  }, [id, key, node, offset, position, registerHandle, type, unregisterHandle]);
-
-  const connectRef = useRef(flow.onConnect);
-  connectRef.current = flow.onConnect;
-  const validRef = useRef(flow.isValidConnection);
-  validRef.current = flow.isValidConnection;
+  }, [
+    accessibilityLabel,
+    id,
+    key,
+    node,
+    offset,
+    position,
+    registerHandle,
+    type,
+    unregisterHandle,
+  ]);
 
   const land = useCallback(
     (target: string, targetHandle: string | undefined) => {
-      const payload: FlowConnection = {
+      connectNodes({
         source: node,
         sourceHandle: id,
         target,
         targetHandle,
-      };
-      if (validRef.current && !validRef.current(payload)) return;
-      connectRef.current?.(payload);
+      });
     },
-    [id, node]
+    [connectNodes, id, node]
   );
 
   // A snapshot of what a drag can land on, rebuilt only when handles come and
@@ -1354,8 +1467,7 @@ function FlowHandle({
       <View
         collapsable={false}
         hitSlop={12}
-        accessibilityRole="button"
-        accessibilityLabel={`${position} connection point`}
+        accessible={false}
         style={placement}
         className={flowVariants().handle({ className })}
       />
@@ -1645,9 +1757,9 @@ function FlowGroup({
   } = flow;
 
   useEffect(() => {
-    registerNode(id);
+    registerNode(id, label ?? id);
     return () => unregisterNode(id);
-  }, [id, registerNode, unregisterNode]);
+  }, [id, label, registerNode, unregisterNode]);
 
   useEffect(() => {
     setNodeRect(id, {
@@ -1919,7 +2031,7 @@ function FlowMiniMap({
   height = 84,
   nodeColor,
 }: FlowMiniMapProps) {
-  const { rects, nodeIds, groupIds, translateX, translateY, zoom, size } =
+  const { rects, nodes, groupIds, translateX, translateY, zoom, size } =
     useFlow('Flow.MiniMap');
   const token = useCSSVariable('--color-muted-foreground');
   const tint = nodeColor ?? (typeof token === 'string' ? token : '#737373');
@@ -1999,7 +2111,7 @@ function FlowMiniMap({
         {/* Containers first and drawn as outlines, so the map reads the way
             the canvas does — boxes with things in them, rather than a wash of
             identical rectangles where the largest happens to be a group. */}
-        {nodeIds.map((id) => {
+        {nodes.map(({ id }) => {
           const group = groups.has(id);
           return (
             <MiniMapNode

package/src/components/form/use-form.ts

@@ -174,6 +174,8 @@ export function useForm<T extends Record<string, any>>({
   const validatorsRef = useRef<
     Partial<Record<keyof T, (value: any, values: T) => string | undefined | Promise<string | undefined>>>
   >({});
+  const validationOwnersRef = useRef<Partial<Record<keyof T, symbol>>>({});
+  const submissionLockedRef = useRef(false);
 
   const [state, dispatch] = useReducer(reducer<T>, {
     values: defaultValues,
@@ -196,31 +198,46 @@ export function useForm<T extends Record<string, any>>({
   const valuesRef = useRef(state.values);
   valuesRef.current = state.values;
 
-  const setFieldValue = useCallback(<K extends keyof T>(name: K, value: T[K]) => {
-    valuesRef.current = { ...valuesRef.current, [name]: value } as T;
-    dispatch({ type: 'SET_VALUE', name, value });
+  /* Only the latest owner of a field may commit validation state. A value,
+   * validator or manual-error change claims ownership too, invalidating any
+   * result that was calculated from the state before that change. */
+  const claimFieldValidation = useCallback(<K extends keyof T>(name: K) => {
+    const owner = Symbol();
+    validationOwnersRef.current[name] = owner;
+    return owner;
   }, []);
 
+  const setFieldValue = useCallback(
+    <K extends keyof T>(name: K, value: T[K]) => {
+      claimFieldValidation(name);
+      valuesRef.current = { ...valuesRef.current, [name]: value } as T;
+      dispatch({ type: 'SET_VALUE', name, value });
+    },
+    [claimFieldValidation]
+  );
+
   const setFieldTouched = useCallback(<K extends keyof T>(name: K, touched = true) => {
     dispatch({ type: 'SET_TOUCHED', name, touched });
   }, []);
 
   const setFieldError = useCallback(
     <K extends keyof T>(name: K, error: string | undefined) => {
+      claimFieldValidation(name);
       dispatch({ type: 'SET_ERROR', name, error });
     },
-    []
+    [claimFieldValidation]
   );
 
   const registerValidator = useCallback(
     <K extends keyof T>(name: K, validator?: Validator<T, K>) => {
+      claimFieldValidation(name);
       if (validator) {
         validatorsRef.current[name] = validator;
       } else {
         delete validatorsRef.current[name];
       }
     },
-    []
+    [claimFieldValidation]
   );
 
   const getFieldState = useCallback(
@@ -235,81 +252,100 @@ export function useForm<T extends Record<string, any>>({
   const validateField = useCallback(async <K extends keyof T>(name: K) => {
     const validator = validatorsRef.current[name];
     if (!validator) return true;
+    const owner = claimFieldValidation(name);
     const values = valuesRef.current;
     const error = await runValidator(name, validator, values);
-    dispatch({ type: 'SET_ERROR', name, error });
+    if (validationOwnersRef.current[name] === owner) {
+      dispatch({ type: 'SET_ERROR', name, error });
+    }
     return !error;
-  }, []);
+  }, [claimFieldValidation]);
 
   const handleSubmit = useCallback(async () => {
-    const values = valuesRef.current;
-    /*
-     * Every field the form knows of, which is not the same as every key of
-     * `defaultValues`: a field can register a validator under a name that was
-     * never declared there. Submitting only the declared ones meant such a
-     * field was never validated and never blocked anything, so a form of
-     * required-but-undeclared fields submitted itself while still empty.
-     *
-     * It is still a mistake to name a field that `defaultValues` does not
-     * declare — its value stays undefined and never reaches `onSubmit` —
-     * which is why `useField` says so. Validating it anyway is what turns
-     * that mistake into a visible error instead of a silent submit.
-     */
-    const names = Array.from(
-      new Set([...Object.keys(values), ...Object.keys(validatorsRef.current)])
-    ) as (keyof T)[];
-    dispatch({ type: 'TOUCH_ALL', names });
+    // Reducer state cannot guard two calls made before React renders again.
+    if (submissionLockedRef.current) return;
+    submissionLockedRef.current = true;
+    try {
+      const values = valuesRef.current;
+      /*
+       * Every field the form knows of, which is not the same as every key of
+       * `defaultValues`: a field can register a validator under a name that was
+       * never declared there. Submitting only the declared ones meant such a
+       * field was never validated and never blocked anything, so a form of
+       * required-but-undeclared fields submitted itself while still empty.
+       *
+       * It is still a mistake to name a field that `defaultValues` does not
+       * declare — its value stays undefined and never reaches `onSubmit` —
+       * which is why `useField` says so. Validating it anyway is what turns
+       * that mistake into a visible error instead of a silent submit.
+       */
+      const names = Array.from(
+        new Set([...Object.keys(values), ...Object.keys(validatorsRef.current)])
+      ) as (keyof T)[];
+      const validationOwners = new Map(
+        names.map((name) => [name, claimFieldValidation(name)] as const)
+      );
+      dispatch({ type: 'TOUCH_ALL', names });
 
-    const fieldErrorEntries = await Promise.all(
-      names.map(async (name) => {
-        const validator = validatorsRef.current[name];
-        const error = validator
-          ? await runValidator(name, validator, values)
-          : undefined;
-        return [name, error] as const;
-      })
-    );
+      const fieldErrorEntries = await Promise.all(
+        names.map(async (name) => {
+          const validator = validatorsRef.current[name];
+          const error = validator
+            ? await runValidator(name, validator, values)
+            : undefined;
+          return [name, error] as const;
+        })
+      );
 
-    /*
-     * Same reasoning as a field's rule, one level up: a cross-field check that
-     * throws must not take the screen, and must not let the submit through.
-     * It belongs to no single field, so it blocks without marking one — there
-     * is no field whose error line would be the honest place to put it.
-     */
-    let formErrors: FieldErrors<T> = {};
-    let formValidateThrew = false;
-    if (validate) {
-      try {
-        formErrors = await validate(values);
-      } catch (error) {
-        console.error(
-          '[PanelUI] The form-level validate() threw, so the form is being ' +
-            'treated as invalid and the submit was not run.',
-          error
-        );
-        formValidateThrew = true;
+      /*
+       * Same reasoning as a field's rule, one level up: a cross-field check that
+       * throws must not take the screen, and must not let the submit through.
+       * It belongs to no single field, so it blocks without marking one — there
+       * is no field whose error line would be the honest place to put it.
+       */
+      let formErrors: FieldErrors<T> = {};
+      let formValidateThrew = false;
+      if (validate) {
+        try {
+          formErrors = await validate(values);
+        } catch (error) {
+          console.error(
+            '[PanelUI] The form-level validate() threw, so the form is being ' +
+              'treated as invalid and the submit was not run.',
+            error
+          );
+          formValidateThrew = true;
+        }
       }
-    }
 
-    const cleared = Object.fromEntries(names.map((name) => [name, undefined]));
-    const nextErrors: FieldErrors<T> = {
-      ...cleared,
-      ...Object.fromEntries(fieldErrorEntries.filter(([, error]) => error !== undefined)),
-      ...formErrors,
-    };
-    dispatch({ type: 'SET_ERRORS', errors: nextErrors });
+      const cleared = Object.fromEntries(names.map((name) => [name, undefined]));
+      const nextErrors: FieldErrors<T> = {
+        ...cleared,
+        ...Object.fromEntries(fieldErrorEntries.filter(([, error]) => error !== undefined)),
+        ...formErrors,
+      };
+      const ownedErrors = Object.fromEntries(
+        names
+          .filter((name) => validationOwnersRef.current[name] === validationOwners.get(name))
+          .map((name) => [name, nextErrors[name]])
+      ) as FieldErrors<T>;
+      dispatch({ type: 'SET_ERRORS', errors: ownedErrors });
 
-    if (formValidateThrew || Object.values(nextErrors).some(Boolean)) return;
+      if (formValidateThrew || Object.values(nextErrors).some(Boolean)) return;
 
-    dispatch({ type: 'SUBMIT_START' });
-    try {
-      await onSubmit(values);
+      dispatch({ type: 'SUBMIT_START' });
+      try {
+        await onSubmit(values);
+      } finally {
+        dispatch({ type: 'SUBMIT_END' });
+      }
     } finally {
-      dispatch({ type: 'SUBMIT_END' });
+      submissionLockedRef.current = false;
     }
-  }, [validate, onSubmit]);
+  }, [claimFieldValidation, validate, onSubmit]);
 
   const reset = useCallback((values: T = defaultsRef.current) => {
+    validationOwnersRef.current = {};
     valuesRef.current = values;
     dispatch({ type: 'RESET', values });
   }, []);

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

@@ -42,6 +42,7 @@ import {
   isValidElement,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -402,9 +403,7 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
 ) {
   const [width, setWidth] = useState(0);
   const [activeCell, setActiveCellState] = useState<HeatmapCell | null>(null);
-  const clipId = useRef(
-    `panelui-heat-${Math.random().toString(36).slice(2, 9)}`
-  ).current;
+  const clipId = `panelui-heat-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const reveal = useSharedValue(0);
   const reducedMotion = useReducedMotion();