react-native-layout-dnd 0.1.0-alpha.1 → 0.1.0-alpha.2

package/src/components/DndProvider.tsx

@@ -226,6 +226,7 @@ export function DndProvider<T>({
   onDragEnd,
   onDragSettled,
   onValidationError,
+  onValidationChange,
   onDiagnostic,
   responseTimeoutMs,
   getGridItemLayout,
@@ -312,6 +313,53 @@ export function DndProvider<T>({
     },
     [reportSettled],
   );
+  // Issues of the value and options (from the coordinator) and of mounted
+  // adapters and handles (by owner), published together as one list. A new
+  // value reaches the adapters over several synchronous commits, so the list
+  // is read once they are done; intermediate lists are never published.
+  const issues = useRef(
+    new Map<string, { key: string; issues: LayoutValidationIssue[] }>(),
+  );
+  const sessionIssues = useRef<LayoutValidationIssue[]>([]);
+  const validation = useRef({
+    published: '[]',
+    queued: false,
+    onChange: onValidationChange,
+  }).current;
+  const mounted = useRef(true);
+  const publishValidation = useCallback(() => {
+    if (!mounted.current || validation.queued) return;
+    validation.queued = true;
+    (
+      globalThis as typeof globalThis & {
+        queueMicrotask(callback: () => void): void;
+      }
+    ).queueMicrotask(() => {
+      validation.queued = false;
+      if (!mounted.current) return;
+      const current = [
+        ...sessionIssues.current,
+        ...Array.from(issues.current.keys())
+          .sort()
+          .flatMap(owner => issues.current.get(owner)!.issues),
+      ];
+      const key = JSON.stringify(current);
+      if (key === validation.published) return;
+      validation.published = key;
+      try {
+        validation.onChange?.(current);
+      } catch (error) {
+        console.error('[LayoutDnD] Validation callback failed', error);
+      }
+    });
+  }, [validation]);
+  const reportSessionIssues = useCallback(
+    (next: LayoutValidationIssue[]) => {
+      sessionIssues.current = next;
+      publishValidation();
+    },
+    [publishValidation],
+  );
   const [coordinator] = useState(
     () =>
       new DndSessionCoordinator({
@@ -321,6 +369,7 @@ export function DndProvider<T>({
         onDragStart,
         onDragEnd: endSession,
         onValidationError,
+        onValidationChange: reportSessionIssues,
         onDiagnostic,
         responseTimeoutMs,
         getGridItemLayout,
@@ -380,9 +429,7 @@ export function DndProvider<T>({
   const nextHandleId = useRef(0);
   const [gestureRegistry] = useState(createDndGestureRegistry);
   const registry = useRef(new Map<object, RegisteredList>());
-  const issues = useRef(new Map<string, string>());
   const observer = useRef(onValidationError);
-  const mounted = useRef(true);
   const handlePublication = useRef({
     queued: false,
     generation: 0,
@@ -648,11 +695,12 @@ export function DndProvider<T>({
   const reportIssues = useCallback(
     (owner: string, next: LayoutValidationIssue[]) => {
       const key = JSON.stringify(next);
-      const old = issues.current.get(owner);
-      if (next.length) issues.current.set(owner, key);
+      const old = issues.current.get(owner)?.key;
+      if (next.length) issues.current.set(owner, { key, issues: next });
       else issues.current.delete(owner);
       if (!mounted.current) return;
       setRegistryInvalid(issues.current.size > 0);
+      publishValidation();
       if (next.length && old !== key) {
         coordinator.cancel('disabled');
         try {
@@ -662,7 +710,7 @@ export function DndProvider<T>({
         }
       }
     },
-    [coordinator],
+    [coordinator, publishValidation],
   );
   useLayoutEffect(() => {
     mounted.current = true;
@@ -677,6 +725,7 @@ export function DndProvider<T>({
         targetSession.set({ ...current, policyRevision: nextPolicyRevision });
     });
     observer.current = onValidationError;
+    validation.onChange = onValidationChange;
     if (
       currentConfig.current.dragAxis !== dragAxis ||
       currentConfig.current.delayMs !== activation?.delayMs
@@ -695,6 +744,7 @@ export function DndProvider<T>({
       onDragStart,
       onDragEnd: endSession,
       onValidationError,
+      onValidationChange: reportSessionIssues,
       onDiagnostic,
       responseTimeoutMs,
       getGridItemLayout,

package/src/components/GridController.tsx

@@ -58,6 +58,7 @@ export function GridController<T>({
   onDragStart,
   onDragEnd,
   onValidationError,
+  onValidationChange,
   onDiagnostic,
   searchBudget,
   activation,
@@ -130,6 +131,61 @@ export function GridController<T>({
     [onValidationError, valueValid],
   );
 
+  // The current list: the value's own issues while it is invalid, otherwise
+  // the provider's (zone geometry, handles, options) in grid API codes.
+  const providerIssues = useRef<LayoutValidationIssue[]>([]);
+  // Both sources settle at the end of the provider's commits; publish once.
+  const validation = useRef({
+    valueIssues: converted.issues,
+    onChange: onValidationChange,
+    published: '[]',
+    queued: false,
+    active: true,
+  }).current;
+  const publishValidation = useCallback(() => {
+    if (!validation.active || validation.queued) return;
+    validation.queued = true;
+    (
+      globalThis as typeof globalThis & {
+        queueMicrotask(callback: () => void): void;
+      }
+    ).queueMicrotask(() => {
+      validation.queued = false;
+      if (!validation.active) return;
+      const current = validation.valueIssues.length
+        ? validation.valueIssues
+        : gridIssues(providerIssues.current);
+      const key = JSON.stringify(current);
+      if (key === validation.published) return;
+      validation.published = key;
+      try {
+        validation.onChange?.(current);
+      } catch (error) {
+        console.error('[LayoutDnD] Validation callback failed', error);
+      }
+    });
+  }, [validation]);
+  useEffect(() => {
+    validation.active = true;
+    return () => {
+      validation.active = false;
+    };
+  }, [validation]);
+  useEffect(() => {
+    validation.valueIssues = converted.issues;
+    validation.onChange = onValidationChange;
+    publishValidation();
+  }, [converted.issues, onValidationChange, publishValidation, validation]);
+  const handleProviderChange = useCallback(
+    (issues: LayoutValidationIssue[]) => {
+      providerIssues.current = issues;
+      // A resolved issue that comes back is new again for onValidationError.
+      if (issues.length === 0) lastProviderIssues.current = null;
+      publishValidation();
+    },
+    [publishValidation],
+  );
+
   const handleChange = useCallback(
     (next: DndValue<T>, proposal: DndProposal<T>) => {
       pendingProposal.current = proposal;
@@ -194,6 +250,7 @@ export function GridController<T>({
       onDragStart={onDragStart}
       onDragSettled={handleEnd}
       onValidationError={handleProviderIssues}
+      onValidationChange={handleProviderChange}
       onDiagnostic={onDiagnostic}
       searchBudget={searchBudget}
       activation={activation}

package/src/components/SortableGrid.tsx

@@ -20,6 +20,11 @@ import {
 import type { GridItemRenderArgs, SortableGridProps } from './dndTypes';
 import { presentationRect } from '../runtime/dndPresentation';
 import { getCellGeometry, itemRect } from '../pointer/geometry';
+import {
+  readCommittedSize,
+  sameViewSize,
+  type ViewSize,
+} from '../runtime/committedSize';
 
 function GridCellContent<T>({
   item,
@@ -191,9 +196,12 @@ export function SortableGrid<T>({
     };
   }, []);
   const ref = useAnimatedRef();
-  const [size, setSize] = useState<{ width: number; height: number } | null>(
-    null,
-  );
+  // Last known native size: onLayout, or the committed layout read below.
+  const [size, setSize] = useState<ViewSize | null>(null);
+  // Size read from the latest commit that changed size-related inputs.
+  const committedSize = useRef<ViewSize | null>(null);
+  // Key of a misfit confirmed against native layout; such cells are hidden.
+  const [clipped, setClipped] = useState<string | null>(null);
   const zone = snapshot.zone;
   const display = snapshot.display;
   const revision = snapshot.revision;
@@ -216,10 +224,45 @@ export function SortableGrid<T>({
     };
   });
   const pixelRatio = PixelRatio.get();
-  const cells =
+  const fitted =
     zone?.kind === 'grid' && size
       ? getCellGeometry(zone, geometry, size.width, size.height, pixelRatio)
       : null;
+  // When props and the view size change in one commit (rotation), `size` is
+  // still the previous one here. Fixed cells do not depend on it, so keep
+  // them mounted at their new positions; the layout effect decides fit
+  // against this commit's native size.
+  const unfitted =
+    !fitted && zone?.kind === 'grid' && size
+      ? getCellGeometry(
+          zone,
+          geometry,
+          size.width,
+          size.height,
+          pixelRatio,
+          false,
+        )
+      : null;
+  const misfitKey =
+    unfitted && size && zone?.kind === 'grid'
+      ? JSON.stringify([
+          geometry.rowGap,
+          geometry.columnGap,
+          geometry.padding.top,
+          geometry.padding.right,
+          geometry.padding.bottom,
+          geometry.padding.left,
+          unfitted.cellWidth,
+          unfitted.cellHeight,
+          zone.rows,
+          zone.columns,
+          size.width,
+          size.height,
+          pixelRatio,
+        ])
+      : null;
+  const fits = fitted !== null;
+  const cells = fitted ?? (misfitKey !== clipped ? unfitted : null);
   // Compare values so mutating a geometry object in place cannot preserve stale
   // hit-test coordinates. Registered geometry never aliases caller-owned values.
   const geometryKey = cells
@@ -268,7 +311,19 @@ export function SortableGrid<T>({
     [snapshot.items],
   );
   useLayoutEffect(() => {
-    const invalid = zone?.kind !== 'grid' || (size !== null && !measured);
+    // Fabric has laid out this commit already. A size newer than the last
+    // onLayout event re-renders synchronously, before paint, with that size.
+    // Other commits, such as drag previews, skip the native read.
+    const next = readCommittedSize(ref.current);
+    committedSize.current = next;
+    if (next && !sameViewSize(next, size)) setSize(next);
+  }, [ref, size, style, zone, geometry, measured]);
+  useLayoutEffect(() => {
+    // The re-render scheduled above validates; never mix the new props with
+    // the previous size.
+    if (committedSize.current && !sameViewSize(committedSize.current, size))
+      return;
+    const invalid = zone?.kind !== 'grid' || (size !== null && !fits);
     reportIssues(
       `grid:${zoneId}`,
       invalid
@@ -285,10 +340,12 @@ export function SortableGrid<T>({
           ]
         : [],
     );
-    if (zone?.kind !== 'grid' || !measured) {
+    if (zone?.kind !== 'grid' || !fits || !measured) {
       unregisterZone(zoneId, identity);
+      if (misfitKey) setClipped(misfitKey);
       return;
     }
+    setClipped(null);
     registerZone(
       {
         kind: 'grid',
@@ -328,6 +385,8 @@ export function SortableGrid<T>({
     ref,
     measured,
     size,
+    fits,
+    misfitKey,
     registerZone,
     unregisterZone,
     reportIssues,

package/src/components/SortableList.tsx

@@ -50,6 +50,11 @@ import {
   type DndZonePresentation,
 } from '../runtime/dndPresentation';
 import type { RetainSlotsRule } from '../runtime/dndRenderStore';
+import {
+  readCommittedSize,
+  sameViewSize,
+  type ViewSize,
+} from '../runtime/committedSize';
 import type { ListItemRenderArgs, SortableListProps } from './dndTypes';
 import { useListCellMotion } from '../pointer/listCellMotion';
 
@@ -447,7 +452,12 @@ export function SortableList<T>({
     typeof itemSize === 'function' ? false : virtualized ? retainSlots : true,
   );
   const identity = useRef({}).current;
-  const [viewportSize, setViewportSize] = useState({ width: 0, height: 0 });
+  // Last known native viewport: onLayout, or the committed layout read below.
+  const [viewportSize, setViewportSize] = useState<ViewSize>({
+    width: 0,
+    height: 0,
+  });
+  const committedViewport = useRef<ViewSize | null>(null);
   const [measurementVersion, setMeasurementVersion] = useState(0);
   const zone = snapshot.zone;
   const displayZone = snapshot.display;
@@ -520,6 +530,26 @@ export function SortableList<T>({
     // frame. Its newer version must not be acknowledged by this older render.
   }, [measurements, renderedMeasurementVersion]);
   const scrollRef = useAnimatedRef<ScrollView>();
+  useLayoutEffect(() => {
+    // Fabric has laid out this commit already. A viewport newer than the last
+    // onLayout event re-renders synchronously, before paint, so cells never
+    // combine new props with the previous cross size. Other commits, such as
+    // drag previews, skip the native read.
+    const next = readCommittedSize(scrollRef.current);
+    committedViewport.current = next;
+    if (next && !sameViewSize(next, viewportSize)) setViewportSize(next);
+  }, [
+    scrollRef,
+    viewportSize,
+    style,
+    orientation,
+    virtualized,
+    itemSize,
+    estimatedItemSize,
+    gap,
+    paddingStart,
+    paddingEnd,
+  ]);
   const offset = useSharedValue(0);
   const { motion, animation, presentation, committedRevision } = runtime;
   // Virtual cells position their content with a React-committed slot offset
@@ -728,6 +758,12 @@ export function SortableList<T>({
     );
   });
   useLayoutEffect(() => {
+    // The re-render scheduled with this commit's viewport registers instead.
+    if (
+      committedViewport.current &&
+      !sameViewSize(committedViewport.current, viewportSize)
+    )
+      return;
     if (!base?.valid || !display?.valid || !validScroll || !windowing.valid) {
       unregisterZone(zoneId, identity);
       return;
@@ -771,6 +807,7 @@ export function SortableList<T>({
     virtualized,
     prepareDisplay,
     items,
+    viewportSize,
   ]);
   useLayoutEffect(
     () => () => {

package/src/components/gridTypes.ts

@@ -63,7 +63,13 @@ export type GridControllerProps<T> = Omit<ViewProps, 'children'> & {
   onDragStart?(event: DragStartEvent): void;
   /** Fires once the drag preview has settled into its cell, or at once when nothing animates. */
   onDragEnd?(event: DragEndEvent): void;
+  /** New issues only; it is not called when issues are resolved. */
   onValidationError?(issues: ValidationIssue[]): void;
+  /**
+   * The complete current issue list whenever it changes, `[]` once every
+   * issue is resolved. Not called while the list stays empty.
+   */
+  onValidationChange?(issues: ValidationIssue[]): void;
   /** Optional JS-only observation. Exceptions are ignored; omit to disable timing. */
   onDiagnostic?(event: GridDiagnosticEvent): void;
   /** Defaults to 10,000 bounded search steps. */

package/src/controller/dndSession.ts

@@ -104,7 +104,13 @@ export type DndSessionOptions<T> = {
   canDrop?(proposal: DndProposal<T>): DropDecision;
   onDragStart?(event: DragStartEvent): void;
   onDragEnd?(event: DndDragEndEvent<T>): void;
+  /** New issues only; it is not called when issues are resolved. */
   onValidationError?(issues: LayoutValidationIssue[]): void;
+  /**
+   * The complete current issue list whenever it changes, `[]` once every
+   * issue is resolved. Not called while the list stays empty.
+   */
+  onValidationChange?(issues: LayoutValidationIssue[]): void;
   /** Optional JS-only observation. Exceptions are ignored; omit to disable timing. */
   onDiagnostic?(event: GridDiagnosticEvent): void;
   responseTimeoutMs?: number;
@@ -324,6 +330,7 @@ function checkOptions<T>(options: DndSessionOptions<T>) {
       'onDragStart',
       'onDragEnd',
       'onValidationError',
+      'onValidationChange',
       'getGridItemLayout',
     ].some(key => {
       const callback = options[key as keyof DndSessionOptions<T>];
@@ -558,6 +565,13 @@ export class DndSessionCoordinator<T> extends SessionCore<
             reportCallbackError(error);
           }
         }
+        if (typeof options.onValidationChange === 'function') {
+          try {
+            options.onValidationChange(checked.issues);
+          } catch (error) {
+            reportCallbackError(error);
+          }
+        }
       }
     });
   }

package/src/pointer/geometry.ts

@@ -108,6 +108,9 @@ export function getCellGeometry(
   width: number,
   height: number,
   pixelRatio = 1,
+  // false: fixed cells even when they overflow the viewport. Renderers use it
+  // to keep cells mounted until a misfit is confirmed against native layout.
+  requireFit = true,
 ): CellGeometry | null {
   'worklet';
   if (
@@ -170,6 +173,7 @@ export function getCellGeometry(
   return Number.isFinite(requiredWidth) &&
     Number.isFinite(requiredHeight) &&
     (geometry.mode !== 'fixed' ||
+      !requireFit ||
       (requiredWidth - width < pixelSize &&
         requiredHeight - height < pixelSize)) &&
     Number.isFinite(cellWidth) &&

package/src/runtime/committedSize.ts

@@ -0,0 +1,65 @@
+export type ViewSize = { width: number; height: number };
+
+type MeasurableHost = {
+  measureLayout(
+    relativeTo: unknown,
+    onSuccess: (x: number, y: number, width: number, height: number) => void,
+    onFail?: () => void,
+  ): void;
+  getNativeScrollRef?(): unknown;
+};
+
+function hostOf(instance: unknown): MeasurableHost | null {
+  const candidate = instance as Partial<MeasurableHost> | null | undefined;
+  const host =
+    typeof candidate?.getNativeScrollRef === 'function'
+      ? (candidate.getNativeScrollRef() as Partial<MeasurableHost> | null)
+      : candidate;
+  return host && typeof host.measureLayout === 'function'
+    ? (host as MeasurableHost)
+    : null;
+}
+
+/**
+ * The size the latest React commit gave a host view, read from a layout
+ * effect. Fabric commits and lays out the shadow tree before layout effects
+ * run and answers a self-relative `measureLayout` synchronously, with the
+ * same untransformed frame that onLayout later reports. Props that change in
+ * the same commit as the view size can therefore be validated against that
+ * size instead of the previous onLayout event.
+ *
+ * Returns null when no answer arrives synchronously or the view has no
+ * layout (unmounted, `display: 'none'`, a renderer without the API); callers
+ * keep their onLayout size then.
+ */
+export function readCommittedSize(instance: unknown): ViewSize | null {
+  const host = hostOf(instance);
+  if (!host) return null;
+  let size = null as ViewSize | null;
+  try {
+    host.measureLayout(
+      host,
+      (_x, _y, width, height) => {
+        size = { width, height };
+      },
+      () => {},
+    );
+  } catch {
+    return null;
+  }
+  // An answer that arrives after this returns is ignored.
+  const result = size;
+  return result &&
+    Number.isFinite(result.width) &&
+    Number.isFinite(result.height) &&
+    result.width >= 0 &&
+    result.height >= 0
+    ? result
+    : null;
+}
+
+export function sameViewSize(a: ViewSize | null, b: ViewSize | null): boolean {
+  return (
+    a === b || (!!a && !!b && a.width === b.width && a.height === b.height)
+  );
+}