@ankhorage/zora 25.8.13 → 25.8.15

package/web-dist/components/matrix-grid/MatrixGrid.js

@@ -110,7 +110,9 @@ function resolveMatrixGridContentSize(layout) {
 }
 
 // src/features/matrix-grid/application/resolveMatrixGridSelection.ts
-function resolveMatrixGridSelection(cells, selectedIds, cellId, anchorId, intent, mode) {
+function resolveMatrixGridSelection(cells, selectedIds, cellId, anchorId, intent, mode, protectedCellIds) {
+  if (protectedCellIds.has(cellId))
+    return selectedIds;
   if (mode === "single")
     return applySelectionIntent(selectedIds, cellId, "replace");
   if (intent !== "range")
@@ -119,7 +121,7 @@ function resolveMatrixGridSelection(cells, selectedIds, cellId, anchorId, intent
   const target = cells.find((cell) => cell.id === cellId);
   if (!anchor || !target)
     return applySelectionIntent(selectedIds, cellId, "replace");
-  return cells.filter((cell) => cell.rowIndex >= Math.min(anchor.rowIndex, target.rowIndex) && cell.rowIndex <= Math.max(anchor.rowIndex, target.rowIndex) && cell.columnIndex >= Math.min(anchor.columnIndex, target.columnIndex) && cell.columnIndex <= Math.max(anchor.columnIndex, target.columnIndex)).map((cell) => cell.id);
+  return cells.filter((cell) => !protectedCellIds.has(cell.id) && cell.rowIndex >= Math.min(anchor.rowIndex, target.rowIndex) && cell.rowIndex <= Math.max(anchor.rowIndex, target.rowIndex) && cell.columnIndex >= Math.min(anchor.columnIndex, target.columnIndex) && cell.columnIndex <= Math.max(anchor.columnIndex, target.columnIndex)).map((cell) => cell.id);
 }
 
 // src/features/matrix-grid/adapters/inbound/MatrixGridKeyboardProxy.web.tsx
@@ -214,13 +216,22 @@ function getAxisCoordinate2(entry, axis) {
 }
 
 // src/features/matrix-grid/adapters/inbound/useMatrixGridKeyboardFocus.ts
-function useMatrixGridKeyboardFocus(index, disabled, visibleIds, onNavigate) {
+function useMatrixGridKeyboardFocus(index, disabled, visibleIds, isNavigable, onNavigate) {
   const [focusedId, setFocusedId] = React.useState(null);
   const focusedRef = React.useRef(null);
   const pendingFocusRef = React.useRef(null);
   const cellRefs = React.useRef(new Map);
   const visibleIdSet = React.useMemo(() => new Set(visibleIds), [visibleIds]);
-  const tabStopId = focusedId !== null && visibleIdSet.has(focusedId) ? focusedId : visibleIds.find((id) => index.positionById.has(id));
+  const tabStopId = focusedId !== null && visibleIdSet.has(focusedId) && isNavigable(focusedId) ? focusedId : visibleIds.find((id) => index.positionById.has(id) && isNavigable(id));
+  React.useEffect(() => {
+    if (focusedRef.current !== null && !isNavigable(focusedRef.current)) {
+      focusedRef.current = null;
+      setFocusedId(null);
+    }
+    if (pendingFocusRef.current !== null && !isNavigable(pendingFocusRef.current)) {
+      pendingFocusRef.current = null;
+    }
+  }, [isNavigable]);
   const onFocus = React.useCallback((id) => {
     pendingFocusRef.current = null;
     focusedRef.current = id;
@@ -242,7 +253,7 @@ function useMatrixGridKeyboardFocus(index, disabled, visibleIds, onNavigate) {
       return false;
     }
     const originId = focusedRef.current ?? id;
-    const nextId = getMatrixGridNextFocusId(index, originId, key);
+    const nextId = resolveNextNavigableId(index, originId, key, isNavigable);
     if (nextId === null || nextId === originId)
       return true;
     focusedRef.current = nextId;
@@ -255,9 +266,19 @@ function useMatrixGridKeyboardFocus(index, disabled, visibleIds, onNavigate) {
       mounted.focus();
     }
     return true;
-  }, [disabled, index, onNavigate]);
+  }, [disabled, index, isNavigable, onNavigate]);
   return { focusedId, onFocus, onKeyDown, registerCell, tabStopId };
 }
+function resolveNextNavigableId(index, originId, key, isNavigable) {
+  let candidate = getMatrixGridNextFocusId(index, originId, key);
+  while (candidate !== null && candidate !== originId && !isNavigable(candidate)) {
+    const nextCandidate = getMatrixGridNextFocusId(index, candidate, key);
+    if (nextCandidate === candidate)
+      return originId;
+    candidate = nextCandidate;
+  }
+  return candidate;
+}
 
 // src/features/matrix-grid/adapters/inbound/MatrixGrid.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -270,6 +291,7 @@ function MatrixGridInner({
   onSelectionChange,
   onViewportChange,
   overscanPixels = 160,
+  protectedCellIds = [],
   readOnly = false,
   renderCell,
   selectedCellIds = [],
@@ -289,16 +311,18 @@ function MatrixGridInner({
   const cellPlacements = React2.useMemo(() => getVisibleMatrixCells(layout, cells, viewport, overscanPixels), [cells, layout, overscanPixels, viewport]);
   const [visibleIds, setVisibleIds] = React2.useState([]);
   const anchorId = React2.useRef(null);
+  const protectedCellIdSet = React2.useMemo(() => new Set(protectedCellIds), [protectedCellIds]);
+  const isNavigable = React2.useCallback((id) => !protectedCellIdSet.has(id), [protectedCellIdSet]);
   const handleViewportChange = React2.useCallback((proposal) => {
     if (controlledViewport === undefined)
       setUncontrolledViewport(proposal);
     onViewportChange?.(proposal);
   }, [controlledViewport, onViewportChange]);
   const activateCell = React2.useCallback((cell, event) => {
-    if (interactionPolicy === "passive" || readOnly)
+    if (interactionPolicy === "passive" || readOnly || protectedCellIdSet.has(cell.id))
       return;
     const intent = isRangeSelectionEvent(event) ? "range" : resolveSelectionEventIntent(event, "pointer");
-    onSelectionChange?.(resolveMatrixGridSelection(sparseIndex.entries, selectedCellIds, cell.id, anchorId.current, intent, selectionMode));
+    onSelectionChange?.(resolveMatrixGridSelection(sparseIndex.entries, selectedCellIds, cell.id, anchorId.current, intent, selectionMode, protectedCellIdSet));
     if (intent !== "range")
       anchorId.current = cell.id;
   }, [
@@ -307,7 +331,8 @@ function MatrixGridInner({
     readOnly,
     selectedCellIds,
     selectionMode,
-    sparseIndex.entries
+    sparseIndex.entries,
+    protectedCellIdSet
   ]);
   const handleKeyboardNavigation = React2.useCallback((targetId, originId, shiftKey) => {
     anchorId.current ??= originId;
@@ -317,7 +342,7 @@ function MatrixGridInner({
     if (cell)
       activateCell(getMatrixCellPlacement(layout, cell), { shiftKey: true });
   }, [activateCell, layout, sparseIndex]);
-  const keyboard = useMatrixGridKeyboardFocus(sparseIndex, interactionPolicy === "passive", visibleIds, handleKeyboardNavigation);
+  const keyboard = useMatrixGridKeyboardFocus(sparseIndex, interactionPolicy === "passive", visibleIds, isNavigable, handleKeyboardNavigation);
   const focusedPlacement = React2.useMemo(() => {
     const focusedCell = keyboard.focusedId === null ? undefined : sparseIndex.cellById.get(keyboard.focusedId);
     return focusedCell ? getMatrixCellPlacement(layout, focusedCell) : undefined;
@@ -339,7 +364,7 @@ function MatrixGridInner({
         const cell = cellById.get(item.id);
         if (!cell)
           return null;
-        return renderMatrixCell(cell, selectedCellIds, theme.semantics.neutral.divider, theme.colors.primary, renderCell, activateCell, keyboard, interactionPolicy === "passive", readOnly, testID);
+        return renderMatrixCell(cell, selectedCellIds, theme.semantics.neutral.divider, theme.colors.primary, renderCell, activateCell, keyboard, interactionPolicy === "passive", protectedCellIdSet.has(cell.id), readOnly, testID);
       },
       testID,
       viewport,
@@ -348,7 +373,7 @@ function MatrixGridInner({
     })
   });
 }
-function renderMatrixCell(cell, selectedCellIds, dividerColor, selectedColor, renderCell, activateCell, keyboard, passive, readOnly, testID) {
+function renderMatrixCell(cell, selectedCellIds, dividerColor, selectedColor, renderCell, activateCell, keyboard, passive, protectedCell, readOnly, testID) {
   const selected = selectedCellIds.includes(cell.id);
   const canInteract = keyboard.tabStopId === cell.id;
   return /* @__PURE__ */ jsx2(MatrixGridKeyboardProxy, {
@@ -357,7 +382,7 @@ function renderMatrixCell(cell, selectedCellIds, dividerColor, selectedColor, re
         return true;
       if (!["Enter", " "].includes(event.key))
         return false;
-      if (passive || readOnly)
+      if (passive || protectedCell || readOnly)
         return false;
       activateCell(cell, event);
       return true;
@@ -366,9 +391,9 @@ function renderMatrixCell(cell, selectedCellIds, dividerColor, selectedColor, re
       accessibilityActions: [{ name: "activate" }],
       accessibilityLabel: `Cell ${cell.id}`,
       accessibilityRole: "button",
-      accessibilityState: { disabled: passive, selected },
-      disabled: passive,
-      focusable: import_react_native.Platform.OS !== "web" || canInteract,
+      accessibilityState: { disabled: passive || protectedCell, selected },
+      disabled: passive || protectedCell,
+      focusable: !protectedCell && (import_react_native.Platform.OS !== "web" || canInteract),
       style: [
         styles.cell,
         {