@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/selection/createCollectionRowInteraction.ts

@@ -1,10 +1,25 @@
-import type { Accessor, JSX } from "solid-js";
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/gridlist/useGridListItem.ts
+
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   getActiveElement,
   getEventTarget,
   getFocusableTreeWalker,
   getScrollParent,
-  isTabbable,
+  isFocusable,
   nodeContains,
 } from "../utils/dom";
 import { focusSafely } from "../utils/focus";
@@ -16,12 +31,38 @@ interface CollectionRowInteractionOptions {
   ref: Accessor<HTMLElement | null>;
   keyboardNavigationBehavior: Accessor<KeyboardNavigationBehavior>;
   direction?: Accessor<"ltr" | "rtl">;
+  /**
+   * `"grid"` skips intra-row Left/Right so the collection can move between
+   * columns (S2 CardView `layout="grid"`).
+   */
+  layout?: Accessor<"stack" | "grid">;
+  /**
+   * Tree expansion/collapse runs in capture before intra-row arrow walking,
+   * matching RAC `handleTreeExpansionKeys`. Return true if the key was handled.
+   */
+  onBeforeArrowNavigation?: (event: KeyboardEvent) => boolean;
 }
 
 type CollectionRowInteractionProps<T extends HTMLElement> = JSX.HTMLAttributes<T> & {
   onKeyDownCapture?: JSX.EventHandler<T, KeyboardEvent>;
 };
 
+/**
+ * Nested ActionMenu / checkbox widgets in an arrow-nav row are focusable but
+ * `tabIndex=-1`, so `isTabbable` misses them. Walk to the nearest focusable
+ * ancestor inside the row (the event target is often an SVG inside the trigger).
+ */
+function isNestedFocusableChild(row: Element, target: Element): boolean {
+  let el: Element | null = target;
+  while (el && el !== row) {
+    if (isFocusable(el)) {
+      return true;
+    }
+    el = el.parentElement;
+  }
+  return false;
+}
+
 function lastFocusable(walker: TreeWalker): HTMLElement | null {
   let last: Node | null = null;
   let next: Node | null;
@@ -72,6 +113,7 @@ export function mergeCollectionRowInteractionProps<T extends HTMLElement>(
   const baseOnKeyDown = rowProps.onKeyDown as ((event: KeyboardEvent) => void) | undefined;
   const baseOnPointerDown = rowProps.onPointerDown as ((event: PointerEvent) => void) | undefined;
   const baseOnMouseDown = rowProps.onMouseDown as ((event: MouseEvent) => void) | undefined;
+  const baseOnClick = rowProps.onClick as ((event: MouseEvent) => void) | undefined;
 
   const onKeyDownCapture = (event: KeyboardEvent) => {
     const row = options.ref();
@@ -86,6 +128,18 @@ export function mergeCollectionRowInteractionProps<T extends HTMLElement>(
       return;
     }
 
+    if (options.onBeforeArrowNavigation?.(event)) {
+      return;
+    }
+
+    if (
+      options.layout?.() === "grid" &&
+      (event.key === "ArrowLeft" || event.key === "ArrowRight")
+    ) {
+      baseOnKeyDownCapture?.(event);
+      return;
+    }
+
     const direction = options.direction?.() ?? "ltr";
     const walker = getFocusableTreeWalker(row);
     walker.currentNode = activeElement;
@@ -181,7 +235,7 @@ export function mergeCollectionRowInteractionProps<T extends HTMLElement>(
   const onPointerDown = (event: PointerEvent) => {
     const row = options.ref();
     const target = getEventTarget<Element>(event);
-    if (row && target && target !== row && isTabbable(target)) {
+    if (row && target && target !== row && isNestedFocusableChild(row, target)) {
       event.stopPropagation();
       return;
     }
@@ -191,19 +245,34 @@ export function mergeCollectionRowInteractionProps<T extends HTMLElement>(
   const onMouseDown = (event: MouseEvent) => {
     const row = options.ref();
     const target = getEventTarget<Element>(event);
-    if (row && target && target !== row && isTabbable(target)) {
+    if (row && target && target !== row && isNestedFocusableChild(row, target)) {
       event.stopPropagation();
       return;
     }
     baseOnMouseDown?.(event);
   };
 
+  const onClick = (event: MouseEvent) => {
+    const row = options.ref();
+    const target = getEventTarget<Element>(event);
+    if (row && target && target !== row && isNestedFocusableChild(row, target)) {
+      return;
+    }
+    baseOnClick?.(event);
+  };
+
+  const captureHandler =
+    options.keyboardNavigationBehavior() === "arrow" ? onKeyDownCapture : baseOnKeyDownCapture;
+
   return {
     ...rowProps,
-    onKeyDownCapture:
-      options.keyboardNavigationBehavior() === "arrow" ? onKeyDownCapture : baseOnKeyDownCapture,
+    // Solid 2 has no capture JSX. The live binding is `bindCapture` in
+    // createGridListItem / createTreeItem. Keep the RAC name so unit tests
+    // can still invoke the handler off rowProps.
+    onKeyDownCapture: captureHandler,
     onKeyDown,
     onPointerDown,
     onMouseDown,
+    onClick,
   };
 }

package/src/selection/createScrollIntoViewOnFocus.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/selection/useSelectableCollection.ts
+
 /**
  * Reveals the virtually-focused collection item when the focused key changes via
  * keyboard navigation.
@@ -10,8 +24,8 @@
  * effect restores that behavior through our `scrollIntoViewport` util.
  */
 
-import { createEffect } from "solid-js";
-import { isServer } from "solid-js/web";
+import { createTrackedEffect } from "solid-js";
+import { isServer } from "@solidjs/web";
 import type { Key } from "@proyecto-viviana/solid-stately";
 import { getInteractionModality } from "../interactions/createInteractionModality";
 import { scrollIntoViewport } from "../utils";
@@ -35,13 +49,14 @@ export interface ScrollIntoViewOnFocusOptions {
 }
 
 export function createScrollIntoViewOnFocus(options: ScrollIntoViewOnFocusOptions): void {
-  if (isServer) return;
-
-  const getItemElement =
-    options.getItemElement ??
-    ((root, key) => root.querySelector<HTMLElement>(`[data-key="${key}"]`));
+  const getItemElement = isServer
+    ? undefined
+    : (options.getItemElement ??
+      ((root: HTMLElement, key: Key) => root.querySelector<HTMLElement>(`[data-key="${key}"]`)));
 
-  createEffect(() => {
+  // Register the same effect on SSR so subsequent hydration IDs stay aligned.
+  createTrackedEffect(() => {
+    if (isServer || !getItemElement) return;
     const key = options.focusedKey();
     if (key == null) return;
     if (options.isActive && !options.isActive()) return;