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

package/src/utils/dom.ts

@@ -1,20 +1,256 @@
+/*
+ * 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.
+ */
+
+/*
+ * Copyright 2024 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.
+ */
+
+/*
+ * Copyright 2021 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.
+ */
+
+/*
+ * Copyright 2025 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.
+ */
+
+/*
+ * Copyright 2023 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/focus/FocusScope.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/usePress.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/domHelpers.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/getScrollParent.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/getScrollParents.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/isElementVisible.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/isFocusable.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/isScrollable.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/keyboard.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/openLink.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/shadowdom/DOMFunctions.ts
+
 /**
  * DOM utilities for cross-browser compatibility.
- * Based on @react-aria/utils DOM utilities.
+ * Based on these pinned React Aria sources:
+ * - packages/react-aria/src/utils/domHelpers.ts
+ * - packages/react-aria/src/utils/shadowdom/DOMFunctions.ts
+ * - packages/react-aria/src/utils/isElementVisible.ts
+ * - packages/react-aria/src/utils/isFocusable.ts
+ * - packages/react-aria/src/interactions/usePress.ts
+ * - packages/react-aria/src/utils/openLink.tsx
+ * - packages/react-aria/src/utils/isScrollable.ts
+ * - packages/react-aria/src/utils/getScrollParent.ts
+ * - packages/react-aria/src/utils/getScrollParents.ts
+ * - packages/react-aria/src/utils/keyboard.tsx
+ * - packages/react-aria/src/focus/FocusScope.tsx
  */
 
+import { shadowDOM } from "@proyecto-viviana/solid-stately/private/flags/flags";
+import { isTestEnv } from "./env";
+import { focusWithoutScrolling } from "./focus";
+import { isFirefox, isIPad, isMac, isWebKit } from "./platform";
+
 /**
  * Gets the owner document of an element, or the global document.
+ * Accepts Window / Document / Node so window-target focus events resolve correctly.
  */
-export function getOwnerDocument(el: Element | null | undefined): Document {
-  return el?.ownerDocument ?? document;
+export function getOwnerDocument(target?: EventTarget | null): Document {
+  if (isWindow(target)) {
+    return target.document;
+  }
+
+  if (isDocument(target)) {
+    return target;
+  }
+
+  return (target as Node | null | undefined)?.ownerDocument ?? document;
 }
 
 /**
  * Gets the owner window of an element, or the global window.
  */
-export function getOwnerWindow(el: Element | null | undefined): Window & typeof globalThis {
-  return getOwnerDocument(el).defaultView ?? window;
+export function getOwnerWindow(target?: EventTarget | null): Window & typeof globalThis {
+  const ownerDocument = getOwnerDocument(target);
+  return (ownerDocument?.defaultView as (Window & typeof globalThis) | null) ?? window;
+}
+
+function isNode(value: unknown): value is Node {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "nodeType" in value &&
+    typeof (value as Node).nodeType === "number"
+  );
+}
+
+function isWindow(value: unknown): value is Window & typeof globalThis {
+  return typeof value === "object" && value != null && "window" in value && value.window === value;
+}
+
+function isDocument(value: unknown): value is Document {
+  return isNode(value) && value.nodeType === 9;
+}
+
+/**
+ * Type guard that checks if a value is a ShadowRoot.
+ */
+export function isShadowRoot(value: unknown): value is ShadowRoot {
+  // 11 = DOCUMENT_FRAGMENT_NODE
+  return isNode(value) && value.nodeType === 11 && "host" in value;
+}
+
+/**
+ * Attaches an event listener on target(s) and returns a cleanup function.
+ * Mirrors @react-aria/utils `addEvent`.
+ */
+export function addEvent(
+  target: EventTarget | EventTarget[] | null,
+  event: string,
+  listener?: EventListenerOrEventListenerObject | null,
+  options?: boolean | AddEventListenerOptions,
+): () => void {
+  if (listener == null || target == null) {
+    return () => {};
+  }
+
+  const eventTargets = Array.isArray(target) ? target : [target];
+
+  for (const eventTarget of eventTargets) {
+    eventTarget.addEventListener(event, listener, options);
+  }
+
+  return () => {
+    for (const eventTarget of eventTargets) {
+      eventTarget.removeEventListener(event, listener, options);
+    }
+  };
+}
+
+/**
+ * Returns the set of event targets a listener must be attached to in order to
+ * globally observe an event.
+ *
+ * @param from - The target element to start from.
+ * @param to - The element to stop at when bubbling. @default getOwnerWindow(from)
+ *   `to` is generally going to be either `document` or `window`, but
+ *   it can be any intermediate node.
+ * @returns [global, ...shadowRoots]
+ */
+export function getPropagationTargets(
+  from: EventTarget | null | undefined,
+  to?: Document | Window | Element | null,
+): EventTarget[] {
+  // If `to` is coming from a ref, its type technically allows `null`.
+  // In practice, this function will generally be called from within an effect.
+  // If the ref has not resolved by that point, then a coding error has been made.
+  // Better to return an empty array than `[window]`, which may appear to work
+  // in the light DOM, but fail in the shadow DOM.
+  if (to === null) {
+    return [];
+  }
+  to = to ?? getOwnerWindow(from);
+  const targets: EventTarget[] = [to];
+  if (!shadowDOM() || !from || from === to) {
+    return targets;
+  }
+
+  // The root `to` itself lives in. The event already reaches `to` once
+  // it is inside this root, so we must NOT collect this root or anything above
+  // it — only the shadow roots strictly between `refNode` and `to`.
+  // `window` has no getRootNode; its boundary is the document, which the walk
+  // reaches naturally (the document is not a ShadowRoot, so the loop exits).
+  if (!("getRootNode" in from) || typeof (from as Node).getRootNode !== "function") {
+    return targets;
+  }
+  const toRoot = "getRootNode" in to ? (to as Node).getRootNode() : null;
+  let current: Node | null = (from as Node).getRootNode() ?? null;
+  while (isShadowRoot(current) && current !== toRoot) {
+    targets.push(current);
+    current = current.host.getRootNode();
+  }
+
+  return targets;
+}
+
+/**
+ * Sets a CSS property on an element and returns a cleanup function.
+ * Property names are kebab-case (`scrollbar-gutter`, `padding-right`), matching
+ * @react-aria/utils `setStyle` which uses `style.setProperty`.
+ */
+export function setStyle(
+  target: HTMLElement | HTMLElement[] | null,
+  property: string,
+  value: string,
+  priority?: string,
+): () => void {
+  if (target == null) {
+    return () => {};
+  }
+
+  const restore: Array<() => void> = [];
+  const styleTargets = Array.isArray(target) ? target : [target];
+
+  for (const styleTarget of styleTargets) {
+    const initialValue = styleTarget.style.getPropertyValue(property);
+    const initialPriority = styleTarget.style.getPropertyPriority(property);
+
+    styleTarget.style.setProperty(property, value, priority);
+
+    restore.unshift(() => {
+      if (initialValue) {
+        styleTarget.style.setProperty(property, initialValue, initialPriority);
+      } else {
+        styleTarget.style.removeProperty(property);
+      }
+    });
+  }
+
+  return () => {
+    for (const cleanup of restore) {
+      cleanup();
+    }
+  };
 }
 
 /**
@@ -26,20 +262,20 @@ export function nodeContains(parent: Node | null, child: Node | null): boolean {
     return false;
   }
 
-  // Standard contains check
-  if (parent.contains(child)) {
-    return true;
-  }
-
-  // Check if child is in a shadow root
+  // Walk the composed tree so slotted elements and nodes in nested shadow roots
+  // are treated as descendants of their rendered ancestors.
   let node: Node | null = child;
   while (node) {
     if (node === parent) {
       return true;
     }
 
-    // Check shadow root host
-    if ((node as ShadowRoot).host) {
+    if (
+      typeof (node as HTMLSlotElement).assignedElements !== "function" &&
+      (node as HTMLSlotElement).assignedSlot?.parentNode
+    ) {
+      node = (node as HTMLSlotElement).assignedSlot!.parentNode;
+    } else if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && (node as ShadowRoot).host) {
       node = (node as ShadowRoot).host;
     } else {
       node = node.parentNode;
@@ -332,30 +568,75 @@ export function shouldPreventDefaultUp(target: Element): boolean {
   return true;
 }
 
+/** The modifier keys `openLink` carries onto the click it synthesizes. */
+export interface LinkModifiers {
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  shiftKey?: boolean;
+}
+
 /**
- * Opens a link, supporting both same-window and new-window navigation.
- * Used for keyboard activation of links with Space key (which doesn't natively open links).
+ * Opens a link by dispatching the click the browser would have produced, so the
+ * link's own `target`, `rel`, `download` and any router listening for clicks all
+ * still apply. Used for keyboard activation of links, and for elements that act
+ * as links without being one.
+ *
+ * 1:1 with `openLink` in @react-aria/utils: it never navigates itself.
  */
-export function openLink(target: HTMLAnchorElement, event: Event, allowOpener = false): void {
-  const { href, target: linkTarget, rel } = target;
-  (openLink as { isOpening?: boolean }).isOpening = true;
-
-  // Handle modifier keys for open-in-new-tab behavior
-  const keyEvent = event as KeyboardEvent;
-  const shouldOpenInNewTab =
-    linkTarget === "_blank" ||
-    keyEvent?.metaKey ||
-    keyEvent?.ctrlKey ||
-    keyEvent?.shiftKey ||
-    keyEvent?.altKey;
-
-  if (shouldOpenInNewTab) {
-    const features = !allowOpener && rel?.includes("noopener") ? "noopener" : undefined;
-    window.open(href, linkTarget || "_blank", features);
-  } else {
-    window.location.href = href;
+export function openLink(
+  target: HTMLAnchorElement,
+  modifiers: LinkModifiers,
+  setOpening = true,
+): void {
+  let { metaKey, ctrlKey } = modifiers;
+  const { altKey, shiftKey } = modifiers;
+
+  // Firefox does not recognize keyboard events as a user action by default, and
+  // the popup blocker will prevent links with target="_blank" from opening.
+  // However, it does allow the event if the Command/Control key is held, which
+  // opens the link in a background tab. This seems like the best we can do.
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=257870 and
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=746640.
+  if (
+    !isWebKit() &&
+    isFirefox() &&
+    (window as Window & { event?: Event }).event?.type?.startsWith("key") &&
+    target.target === "_blank"
+  ) {
+    if (isMac()) {
+      metaKey = true;
+    } else {
+      ctrlKey = true;
+    }
   }
 
+  // WebKit does not support firing click events with modifier keys, but does
+  // support keyboard events.
+  // https://github.com/WebKit/WebKit/blob/c03d0ac6e6db178f90923a0a63080b5ca210d25f/Source/WebCore/html/HTMLAnchorElement.cpp#L184
+  const event =
+    isWebKit() && isMac() && !isIPad() && !isTestEnv()
+      ? // keyIdentifier is a non-standard property, but it's what WebKit expects.
+        (new KeyboardEvent("keydown", {
+          keyIdentifier: "Enter",
+          metaKey,
+          ctrlKey,
+          altKey,
+          shiftKey,
+        } as KeyboardEventInit) as Event)
+      : new MouseEvent("click", {
+          metaKey,
+          ctrlKey,
+          altKey,
+          shiftKey,
+          detail: 1,
+          bubbles: true,
+          cancelable: true,
+        });
+
+  (openLink as { isOpening?: boolean }).isOpening = setOpening;
+  focusWithoutScrolling(target);
+  target.dispatchEvent(event);
   (openLink as { isOpening?: boolean }).isOpening = false;
 }
 

package/src/utils/domAttrs.ts

@@ -0,0 +1,84 @@
+/**
+ * Solid 2 maps boolean `true` to an empty attribute (`disabled=""`) and omits
+ * `false`. ARIA state attributes need the literals `"true"` / `"false"`.
+ */
+
+const ARIA_TRUE_FALSE = new Set([
+  "aria-expanded",
+  "aria-selected",
+  "aria-checked",
+  "aria-pressed",
+  "aria-current",
+  "aria-haspopup",
+  "aria-hidden",
+  "aria-disabled",
+  "aria-invalid",
+  "aria-required",
+  "aria-readonly",
+  "aria-multiline",
+  "aria-multiselectable",
+  "aria-busy",
+  "aria-modal",
+]);
+
+/** Native enumerated true/false attributes (not HTML boolean attributes). */
+const ENUMERATED_TRUE_FALSE = new Set([
+  "draggable",
+  "spellcheck",
+  "spellCheck",
+  "contenteditable",
+  "contentEditable",
+]);
+
+const ATTR_KEY_ALIASES: Record<string, string> = {
+  contentEditable: "contenteditable",
+  spellCheck: "spellcheck",
+  htmlFor: "for",
+};
+
+/** Map React/Solid JSX names onto the DOM attribute Solid 2 will emit. */
+export function canonicalAttrKey(key: string): string {
+  return ATTR_KEY_ALIASES[key] ?? key;
+}
+
+export function ariaTrueFalse(value: boolean): "true" | "false" {
+  return value ? "true" : "false";
+}
+
+export function attrTrue(value: boolean | undefined | null): "true" | undefined {
+  return value ? "true" : undefined;
+}
+
+/** Keep string DOM ids; drop Solid 2 `RemoveAttribute` (`false`). */
+export function attrString(value: unknown): string | undefined {
+  return typeof value === "string" ? value : undefined;
+}
+
+export function isAriaTrue(value: unknown): boolean {
+  return value === true || value === "true";
+}
+
+/** Map boolean aria/data values so Solid 2 does not emit empty attributes. */
+export function coerceDomBoolean(key: string, value: unknown): unknown {
+  if (typeof value !== "boolean") return value;
+  const attr = ATTR_KEY_ALIASES[key] ?? key;
+  if (ENUMERATED_TRUE_FALSE.has(key) || ENUMERATED_TRUE_FALSE.has(attr)) {
+    return value ? "true" : "false";
+  }
+  if (attr.startsWith("data-")) return value ? "true" : undefined;
+  if (attr.startsWith("aria-")) {
+    if (ARIA_TRUE_FALSE.has(attr)) return value ? "true" : "false";
+    return value ? "true" : undefined;
+  }
+  return value;
+}
+
+/** Coerce boolean aria/data/enumerated values on a plain props object. */
+export function coerceDomRecord<T extends Record<string, unknown>>(record: T): T {
+  const next: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(record)) {
+    const attr = canonicalAttrKey(key);
+    next[attr] = coerceDomBoolean(key, value);
+  }
+  return next as T;
+}

package/src/utils/env.ts

@@ -2,6 +2,8 @@
  * Environment detection utilities.
  * These avoid direct references to process.env which can cause TypeScript issues in browser environments.
  * Compatible with Node.js and Vite environments.
+ *
+ * This is a local runtime helper. It has no direct React Aria counterpart.
  */
 
 type ImportMetaWithEnv = ImportMeta & {

package/src/utils/events.ts

@@ -1,6 +1,39 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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/interactions/utils.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/chain.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/isVirtualEvent.ts
+
 /**
  * Event utilities for detecting virtual clicks and event handling.
- * Based on @react-aria/utils event utilities.
+ * Based on these pinned React Aria sources:
+ * - packages/react-aria/src/utils/isVirtualEvent.ts
+ * - packages/react-aria/src/utils/chain.ts
+ * - packages/react-aria/src/interactions/utils.ts
+ *
+ * createMouseEvent is a local event adapter.
  */
 
 import { isAndroid } from "./platform";
@@ -33,10 +66,13 @@ export function isVirtualPointerEvent(event: PointerEvent): boolean {
   // If the pointer size is zero, then we assume it's from a screen reader.
   // Android TalkBack double tap will sometimes return a event with width and height of 1
   // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
-  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0.
+  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
+  // Talkback double tap from Windows Firefox touch screen press
   return (
     (!isAndroid() && event.width === 0 && event.height === 0) ||
-    (event.width === 1 &&
+    (isAndroid() &&
+      event.width === 1 &&
       event.height === 1 &&
       event.pressure === 0 &&
       event.detail === 0 &&

package/src/utils/filterDOMProps.ts

@@ -1,8 +1,22 @@
+/*
+ * 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/utils/filterDOMProps.ts
+
 /**
  * filterDOMProps for Solidaria
  *
  * Filters out all props that aren't valid DOM props.
- * This is a 1:1 port of @react-aria/utils filterDOMProps.
+ * Ported from packages/react-aria/src/utils/filterDOMProps.ts.
  */
 
 const DOMPropNames = new Set(["id"]);
@@ -108,7 +122,25 @@ export function filterDOMProps<T extends object>(
         propNames?.has(prop) ||
         propRe.test(prop))
     ) {
-      (filteredProps as Record<string, unknown>)[prop] = props[prop];
+      const descriptor = Object.getOwnPropertyDescriptor(props, prop);
+      if (descriptor && (descriptor.get || descriptor.set)) {
+        // React props are plain values, so upstream copies them; Solid keeps the getter.
+        const defined: PropertyDescriptor = {
+          enumerable: true,
+          configurable: true,
+        };
+        if (descriptor.get) {
+          defined.get = () => descriptor.get!.call(props);
+        }
+        if (descriptor.set) {
+          defined.set = (value: unknown) => {
+            descriptor.set!.call(props, value);
+          };
+        }
+        Object.defineProperty(filteredProps, prop, defined);
+      } else {
+        (filteredProps as Record<string, unknown>)[prop] = (props as Record<string, unknown>)[prop];
+      }
     }
   }