@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/src/utils/dom.ts

@@ -63,38 +63,153 @@ export function getEventTarget<T extends EventTarget>(event: Event): T | null {
   return event.target as T | null;
 }
 
-/**
- * Checks if an element is a valid focusable element.
- */
-export function isFocusable(element: Element): boolean {
-  // Check if element is disabled
-  if ((element as HTMLInputElement).disabled) {
+// Ports @react-aria/utils `isElementVisible`/`isFocusable`/`isTabbable` (v3.34.1,
+// the version paired with our pinned RAC 1.19.0) so focusability matches upstream:
+// a candidate must match the focusable selector AND not be inside an `inert`
+// subtree AND be visible (unless `skipVisibilityCheck`). The previous `isFocusable`
+// was a simplified tagName/tabindex check with no visibility or `inert` filtering.
+// Owner-window lookups go through `getOwnerWindow`, which falls back to the global
+// window, so these stay robust on detached documents (`defaultView === null`).
+
+const supportsCheckVisibility =
+  typeof Element !== "undefined" && "checkVisibility" in Element.prototype;
+
+// Solid clones templates with the document that is global at creation time, so a
+// node portaled into another document (e.g. an iframe) keeps its original realm's
+// prototype even though `getOwnerWindow` now resolves to the other document's
+// window. Upstream React creates portal nodes with the container's `ownerDocument`,
+// so its single `instanceof getOwnerWindow(element)` check suffices; we also accept
+// the global realm's constructors so cross-document focus scopes still recognize
+// real elements. In the common same-realm case this is identical to upstream.
+function isHTMLOrSVGElement(element: Element): element is HTMLElement | SVGElement {
+  const windowObject = getOwnerWindow(element);
+  return (
+    element instanceof windowObject.HTMLElement ||
+    element instanceof windowObject.SVGElement ||
+    (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) ||
+    (typeof SVGElement !== "undefined" && element instanceof SVGElement)
+  );
+}
+
+function isStyleVisible(element: Element): boolean {
+  if (!isHTMLOrSVGElement(element)) {
     return false;
   }
 
-  // Check native focusable elements
-  const tagName = element.tagName.toLowerCase();
-  if (["input", "select", "textarea", "button", "a", "area"].includes(tagName)) {
-    // For anchor elements, they must have href to be focusable
-    if (tagName === "a" || tagName === "area") {
-      return element.hasAttribute("href");
-    }
-    return true;
+  const { display, visibility } = element.style;
+
+  let isVisible = display !== "none" && visibility !== "hidden" && visibility !== "collapse";
+
+  if (isVisible) {
+    const { getComputedStyle } = getOwnerWindow(element);
+    const { display: computedDisplay, visibility: computedVisibility } = getComputedStyle(element);
+
+    isVisible =
+      computedDisplay !== "none" &&
+      computedVisibility !== "hidden" &&
+      computedVisibility !== "collapse";
   }
 
-  // A negative tabIndex is not tabbable, but it is still programmatically focusable.
-  // React Aria's focusable selector includes all tabindex values for this reason.
-  const tabIndex = element.getAttribute("tabindex");
-  if (tabIndex != null) {
-    return true;
+  return isVisible;
+}
+
+function isAttributeVisible(element: Element, childElement?: Element): boolean {
+  return (
+    !element.hasAttribute("hidden") &&
+    // Ignore HiddenSelect when tree walking.
+    !element.hasAttribute("data-react-aria-prevent-focus") &&
+    (element.nodeName === "DETAILS" && childElement && childElement.nodeName !== "SUMMARY"
+      ? element.hasAttribute("open")
+      : true)
+  );
+}
+
+/**
+ * Whether an element is visible, and so eligible for focus. Adapted from
+ * @react-aria/utils, which adapts testing-library/jest-dom and
+ * vue-test-utils-next (MIT): uses `checkVisibility` when supported, otherwise
+ * walks computed style and visibility-affecting attributes up the ancestor chain.
+ */
+export function isElementVisible(element: Element, childElement?: Element): boolean {
+  if (supportsCheckVisibility) {
+    return (
+      element.checkVisibility({ visibilityProperty: true }) &&
+      !element.closest("[data-react-aria-prevent-focus]")
+    );
   }
 
-  // Check for contenteditable
-  if (
-    element.hasAttribute("contenteditable") &&
-    element.getAttribute("contenteditable") !== "false"
-  ) {
-    return true;
+  return (
+    element.nodeName !== "#comment" &&
+    isStyleVisible(element) &&
+    isAttributeVisible(element, childElement) &&
+    (!element.parentElement || isElementVisible(element.parentElement, element))
+  );
+}
+
+const focusableElements = [
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "a[href]",
+  "area[href]",
+  "summary",
+  "iframe",
+  "object",
+  "embed",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable^="false"])',
+  "permission",
+];
+
+const FOCUSABLE_ELEMENT_SELECTOR =
+  focusableElements.join(":not([hidden]),") + ",[tabindex]:not([disabled]):not([hidden])";
+
+focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
+
+/**
+ * Checks if an element is a valid focusable element: it matches the focusable
+ * selector, is not inside an `inert` subtree, and is visible. A negative tabindex
+ * is programmatically focusable (matched here) but not tabbable. `skipVisibilityCheck`
+ * lets callers (e.g. the press-path `preventFocus` ancestor walk) skip the
+ * `isElementVisible` step, which also avoids touching layout on detached documents.
+ */
+export function isFocusable(
+  element: Element,
+  options?: { skipVisibilityCheck?: boolean },
+): boolean {
+  return (
+    element.matches(FOCUSABLE_ELEMENT_SELECTOR) &&
+    !isInert(element) &&
+    (options?.skipVisibilityCheck || isElementVisible(element))
+  );
+}
+
+/**
+ * Checks if an element is tabbable (reachable via the Tab key): focusable,
+ * visible, not inert, and not `tabindex="-1"`.
+ */
+export function isTabbable(element: Element): boolean {
+  return (
+    element.matches(TABBABLE_ELEMENT_SELECTOR) && isElementVisible(element) && !isInert(element)
+  );
+}
+
+function isInert(element: Element): boolean {
+  let node: Element | null = element;
+  while (node != null) {
+    // Realm-tolerant HTMLElement check (see isHTMLOrSVGElement): Solid-portaled
+    // nodes keep their creating realm's prototype, so also accept the global one.
+    const isHTMLElement =
+      node instanceof getOwnerWindow(node).HTMLElement ||
+      (typeof HTMLElement !== "undefined" && node instanceof HTMLElement);
+    if (isHTMLElement && (node as HTMLElement).inert) {
+      return true;
+    }
+
+    node = node.parentElement;
   }
 
   return false;
@@ -285,6 +400,30 @@ export function getScrollParent(node: Element, checkForOverflow?: boolean): Elem
   return scrollableNode || document.scrollingElement || document.documentElement;
 }
 
+/**
+ * Gets every scrollable ancestor of an element, from the nearest up to (and
+ * including) the document scrolling element.
+ * @param node - The starting element
+ * @param checkForOverflow - If true, only include parents that actually overflow
+ */
+export function getScrollParents(node: Element, checkForOverflow?: boolean): Element[] {
+  const parentElements: Element[] = [];
+  const root = document.scrollingElement || document.documentElement;
+  let current: Element | null = node;
+
+  while (current) {
+    if (isScrollable(current, checkForOverflow)) {
+      parentElements.push(current);
+    }
+    if (current === root) {
+      break;
+    }
+    current = current.parentElement;
+  }
+
+  return parentElements;
+}
+
 /**
  * Checks if an element will open a virtual keyboard when focused.
  * Used for iOS Safari scroll handling.
@@ -332,3 +471,54 @@ export function willOpenKeyboard(target: Element | null): boolean {
 
   return false;
 }
+
+/**
+ * Returns the deepest active element, descending through open shadow roots.
+ * Mirrors @react-aria/utils' `getActiveElement`.
+ */
+export function getActiveElement(doc: Document = document): Element | null {
+  let activeElement = doc.activeElement;
+  while (activeElement?.shadowRoot?.activeElement) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+  return activeElement;
+}
+
+/**
+ * Whether the (deepest) active element is `element` or is contained within it.
+ * Mirrors @react-aria/utils' `isFocusWithin`.
+ */
+export function isFocusWithin(element: Element): boolean {
+  const activeElement = getActiveElement(getOwnerDocument(element));
+  return !!activeElement && nodeContains(element, activeElement);
+}
+
+/**
+ * Creates a `TreeWalker` that visits the focusable (or, when `tabbable`, the
+ * tabbable) descendants of `root`, skipping invisible and inert elements.
+ * Mirrors @react-aria/focus's `getFocusableTreeWalker`, minus the focus-scope
+ * containment filter (we don't model nested scopes here). Used to treat a
+ * selectable collection as a single tab stop.
+ */
+export function getFocusableTreeWalker(
+  root: Element,
+  opts?: { tabbable?: boolean; from?: Node },
+): TreeWalker {
+  const accept = (node: Element) => (opts?.tabbable ? isTabbable(node) : isFocusable(node));
+  const walker = getOwnerDocument(root).createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(node) {
+      // Skip nodes inside the optional starting node.
+      if (opts?.from?.contains(node)) {
+        return NodeFilter.FILTER_REJECT;
+      }
+      if (accept(node as Element)) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      return NodeFilter.FILTER_SKIP;
+    },
+  });
+  if (opts?.from) {
+    walker.currentNode = opts.from;
+  }
+  return walker;
+}

package/src/utils/index.ts

@@ -21,6 +21,8 @@ export {
   nodeContains,
   getEventTarget,
   isFocusable,
+  isTabbable,
+  isElementVisible,
   isValidKeyboardEvent,
   isValidInputKey,
   isHTMLAnchorLink,
@@ -29,9 +31,12 @@ export {
   openLink,
   isScrollable,
   getScrollParent,
+  getScrollParents,
   willOpenKeyboard,
 } from "./dom";
 
+export { scrollIntoView, scrollIntoViewport } from "./scrollIntoView";
+
 export {
   areRectanglesOverlapping,
   getPointClientRect,
@@ -51,6 +56,7 @@ export {
 } from "./events";
 
 export { disableTextSelection, restoreTextSelection } from "./textSelection";
+export { isCtrlKeyPressed } from "./keyboard";
 
 export { focusWithoutScrolling, focusSafely, preventFocus } from "./focus";
 
@@ -68,3 +74,5 @@ export {
   getDescriptionNodeCount,
   clearDescriptionNodes,
 } from "./createDescription";
+
+export { createEnterAnimation, createExitAnimation, type ElementAccessor } from "./animation";

package/src/utils/keyboard.ts

@@ -0,0 +1,25 @@
+/**
+ * Keyboard / modifier-key helpers.
+ * Based on @react-aria/utils' keyboard utilities.
+ */
+
+import { isMac } from "./platform";
+
+/** The modifier-key fields consulted by {@link isCtrlKeyPressed}. */
+interface ModifierKeyEvent {
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+}
+
+/**
+ * Returns whether the platform's non-contiguous selection modifier is pressed:
+ * the Command key on macOS, the Control key elsewhere. Mirrors
+ * `@react-aria/utils`' `isCtrlKeyPressed`.
+ */
+export function isCtrlKeyPressed(e: ModifierKeyEvent): boolean {
+  if (isMac()) {
+    return e.metaKey === true;
+  }
+
+  return e.ctrlKey === true;
+}

package/src/utils/mergeProps.ts

@@ -44,7 +44,14 @@ export function mergeProps<R extends object = Record<string, unknown>, T extends
         key[2] === key[2]?.toUpperCase()
       ) {
         setResultValue(key, chainHandlers(existingValue as Function, value as Function));
-      } else if (key === "class" || key === "className") {
+      } else if (
+        (key === "class" || key === "className" || key === "UNSAFE_className") &&
+        typeof existingValue === "string" &&
+        typeof value === "string"
+      ) {
+        // Join only when both sides are plain strings (react-aria mergeProps
+        // semantics); a render-prop class function must pass through intact,
+        // not be coerced to its source text.
         setResultValue(key, mergeClassNames(existingValue, value));
       } else if (
         key === "style" &&

package/src/utils/scrollIntoView.ts

@@ -0,0 +1,181 @@
+/**
+ * Scroll-into-view utilities.
+ * Based on @react-aria/utils scrollIntoView (react-aria/src/utils/scrollIntoView.ts).
+ */
+
+import { getScrollParents } from "./dom";
+import { isIOS } from "./platform";
+import { isTestEnv } from "./env";
+
+interface ScrollIntoViewOpts {
+  /** The position to align items along the block axis in. */
+  block?: ScrollLogicalPosition;
+  /** The position to align items along the inline axis in. */
+  inline?: ScrollLogicalPosition;
+}
+
+interface ScrollIntoViewportOpts {
+  /** The optional containing element of the target to be centered in the viewport. */
+  containingElement?: Element | null;
+}
+
+/**
+ * Scrolls `scrollView` so that `element` is visible.
+ * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
+ * but doesn't affect parents above `scrollView`.
+ */
+export function scrollIntoView(
+  scrollView: HTMLElement,
+  element: HTMLElement,
+  opts: ScrollIntoViewOpts = {},
+): void {
+  const { block = "nearest", inline = "nearest" } = opts;
+
+  if (scrollView === element) {
+    return;
+  }
+
+  let y = scrollView.scrollTop;
+  let x = scrollView.scrollLeft;
+
+  const target = element.getBoundingClientRect();
+  const view = scrollView.getBoundingClientRect();
+  const itemStyle = window.getComputedStyle(element);
+  const viewStyle = window.getComputedStyle(scrollView);
+  const root = document.scrollingElement || document.documentElement;
+  const isRoot = scrollView === root;
+
+  const viewTop = scrollView === root ? 0 : view.top;
+  const viewBottom = scrollView === root ? scrollView.clientHeight : view.bottom;
+  const viewLeft = scrollView === root ? 0 : view.left;
+  const viewRight = scrollView === root ? scrollView.clientWidth : view.right;
+
+  const scrollMarginTop = parseFloat(itemStyle.scrollMarginTop) || 0;
+  const scrollMarginBottom = parseFloat(itemStyle.scrollMarginBottom) || 0;
+  const scrollMarginLeft = parseFloat(itemStyle.scrollMarginLeft) || 0;
+  const scrollMarginRight = parseFloat(itemStyle.scrollMarginRight) || 0;
+
+  const scrollPaddingTop = parseFloat(viewStyle.scrollPaddingTop) || 0;
+  const scrollPaddingBottom = parseFloat(viewStyle.scrollPaddingBottom) || 0;
+  const scrollPaddingLeft = parseFloat(viewStyle.scrollPaddingLeft) || 0;
+  const scrollPaddingRight = parseFloat(viewStyle.scrollPaddingRight) || 0;
+
+  const borderTopWidth = parseFloat(viewStyle.borderTopWidth) || 0;
+  const borderBottomWidth = parseFloat(viewStyle.borderBottomWidth) || 0;
+  const borderLeftWidth = parseFloat(viewStyle.borderLeftWidth) || 0;
+  const borderRightWidth = parseFloat(viewStyle.borderRightWidth) || 0;
+
+  const scrollAreaTop = target.top - scrollMarginTop;
+  const scrollAreaBottom = target.bottom + scrollMarginBottom;
+  const scrollAreaLeft = target.left - scrollMarginLeft;
+  const scrollAreaRight = target.right + scrollMarginRight;
+
+  const scrollBarOffsetX = scrollView === root ? 0 : borderLeftWidth + borderRightWidth;
+  const scrollBarOffsetY = scrollView === root ? 0 : borderTopWidth + borderBottomWidth;
+  const scrollBarWidth =
+    scrollView === root ? 0 : scrollView.offsetWidth - scrollView.clientWidth - scrollBarOffsetX;
+  const scrollBarHeight =
+    scrollView === root ? 0 : scrollView.offsetHeight - scrollView.clientHeight - scrollBarOffsetY;
+
+  const scrollPortTop = viewTop + (isRoot ? 0 : borderTopWidth) + scrollPaddingTop;
+  const scrollPortBottom =
+    viewBottom - (isRoot ? 0 : borderBottomWidth) - scrollPaddingBottom - scrollBarHeight;
+  let scrollPortLeft = viewLeft + (isRoot ? 0 : borderLeftWidth) + scrollPaddingLeft;
+  let scrollPortRight = viewRight - (isRoot ? 0 : borderRightWidth) - scrollPaddingRight;
+
+  // IOS always positions the scrollbar on the right ¯\_(ツ)_/¯
+  if (viewStyle.direction === "rtl" && !isIOS()) {
+    scrollPortLeft += scrollBarWidth;
+  } else {
+    scrollPortRight -= scrollBarWidth;
+  }
+
+  const shouldScrollBlock = scrollAreaTop < scrollPortTop || scrollAreaBottom > scrollPortBottom;
+  const shouldScrollInline = scrollAreaLeft < scrollPortLeft || scrollAreaRight > scrollPortRight;
+
+  if (shouldScrollBlock && block === "start") {
+    y += scrollAreaTop - scrollPortTop;
+  } else if (shouldScrollBlock && block === "center") {
+    y += (scrollAreaTop + scrollAreaBottom) / 2 - (scrollPortTop + scrollPortBottom) / 2;
+  } else if (shouldScrollBlock && block === "end") {
+    y += scrollAreaBottom - scrollPortBottom;
+  } else if (shouldScrollBlock && block === "nearest") {
+    const start = scrollAreaTop - scrollPortTop;
+    const end = scrollAreaBottom - scrollPortBottom;
+    y += Math.abs(start) <= Math.abs(end) ? start : end;
+  }
+
+  if (shouldScrollInline && inline === "start") {
+    x += scrollAreaLeft - scrollPortLeft;
+  } else if (shouldScrollInline && inline === "center") {
+    x += (scrollAreaLeft + scrollAreaRight) / 2 - (scrollPortLeft + scrollPortRight) / 2;
+  } else if (shouldScrollInline && inline === "end") {
+    x += scrollAreaRight - scrollPortRight;
+  } else if (shouldScrollInline && inline === "nearest") {
+    const start = scrollAreaLeft - scrollPortLeft;
+    const end = scrollAreaRight - scrollPortRight;
+    x += Math.abs(start) <= Math.abs(end) ? start : end;
+  }
+
+  if (isTestEnv()) {
+    scrollView.scrollLeft = x;
+    scrollView.scrollTop = y;
+    return;
+  }
+
+  scrollView.scrollTo({ left: x, top: y });
+}
+
+/**
+ * Scrolls the `targetElement` so it is visible in the viewport. Accepts an optional
+ * `opts.containingElement` that will be centered in the viewport prior to scrolling the
+ * targetElement into view. If scrolling is prevented on the body (e.g. targetElement is in a
+ * popover), this will only scroll the scroll parents of the targetElement up to but not including
+ * the body itself.
+ */
+export function scrollIntoViewport(
+  targetElement: Element | null,
+  opts: ScrollIntoViewportOpts = {},
+): void {
+  const { containingElement } = opts;
+  if (targetElement && targetElement.isConnected) {
+    const root = document.scrollingElement || document.documentElement;
+    const isScrollPrevented = window.getComputedStyle(root).overflow === "hidden";
+    if (!isScrollPrevented) {
+      const { left: originalLeft, top: originalTop } = targetElement.getBoundingClientRect();
+
+      // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
+      // won't cause a scroll if the element is already focused and doesn't behave consistently when an element is partially out of view horizontally vs vertically
+      targetElement?.scrollIntoView?.({ block: "nearest" });
+      const { left: newLeft, top: newTop } = targetElement.getBoundingClientRect();
+      // Account for sub pixel differences from rounding
+      if (Math.abs(originalLeft - newLeft) > 1 || Math.abs(originalTop - newTop) > 1) {
+        containingElement?.scrollIntoView?.({ block: "center", inline: "center" });
+        targetElement.scrollIntoView?.({ block: "nearest" });
+      }
+    } else {
+      const { left: originalLeft, top: originalTop } = targetElement.getBoundingClientRect();
+
+      // If scrolling is prevented, we don't want to scroll the body since it might move the overlay partially offscreen and the user can't scroll it back into view.
+      let scrollParents = getScrollParents(targetElement, true);
+      for (const scrollParent of scrollParents) {
+        scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
+      }
+      const { left: newLeft, top: newTop } = targetElement.getBoundingClientRect();
+      // Account for sub pixel differences from rounding
+      if (Math.abs(originalLeft - newLeft) > 1 || Math.abs(originalTop - newTop) > 1) {
+        scrollParents = containingElement ? getScrollParents(containingElement, true) : [];
+        // scroll containing element into view first, then rescroll target element into view like the non chrome flow above
+        for (const scrollParent of scrollParents) {
+          scrollIntoView(scrollParent as HTMLElement, containingElement as HTMLElement, {
+            block: "center",
+            inline: "center",
+          });
+        }
+        for (const scrollParent of getScrollParents(targetElement, true)) {
+          scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
+        }
+      }
+    }
+  }
+}