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

package/src/popover/createOverlayPosition.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/overlays/useOverlayPosition.ts
+
 /**
  * Handles positioning overlays like popovers and menus relative to a trigger
  * element, and updating the position when the window resizes.
@@ -5,8 +19,10 @@
  * Ported from @react-aria/overlays useOverlayPosition.
  */
 
-import { createEffect, createSignal, onCleanup, type JSX } from "solid-js";
+import { createEffect, createSignal, createTrackedEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useLocale } from "../i18n";
+import { addEvent, getActiveElement, getPropagationTargets, isFocusWithin } from "../utils/dom";
 import {
   calculatePosition,
   getRect,
@@ -119,6 +135,11 @@ export interface PositionAria {
 
 const visualViewport = typeof document !== "undefined" ? window.visualViewport : null;
 
+interface ScrollAnchor {
+  type: "top" | "bottom";
+  offset: number;
+}
+
 function translateRTL(position: string, direction: string): string {
   if (direction === "rtl") {
     return position.replace("start", "right").replace("end", "left");
@@ -126,6 +147,32 @@ function translateRTL(position: string, direction: string): string {
   return position.replace("start", "left").replace("end", "right");
 }
 
+function overlayPositionStyle(current: PositionResult | null): JSX.CSSProperties {
+  if (!current) {
+    return {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      "z-index": 100000,
+      "max-height": "100vh",
+    };
+  }
+
+  const style: JSX.CSSProperties = {
+    position: "absolute",
+    "z-index": 100000,
+    "max-height": current.maxHeight != null ? `${current.maxHeight}px` : "100vh",
+  };
+  const pos = current.position as Record<string, number | undefined>;
+  for (const key of Object.keys(pos)) {
+    const value = pos[key];
+    if (value != null) {
+      (style as Record<string, string>)[key] = `${value}px`;
+    }
+  }
+  return style;
+}
+
 /**
  * Handles positioning overlays like popovers and menus relative to a trigger
  * element, and updating the position when the window resizes.
@@ -157,7 +204,7 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
   // Track the last scale to freeze overlay during pinch zoom
   let lastScale = visualViewport?.scale;
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (isOpen()) {
       lastScale = visualViewport?.scale;
     }
@@ -179,6 +226,23 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
     const scrollNode = scrollRef();
     const arrowNode = arrowRef();
 
+    // Determine a scroll anchor based on the focused element so a height
+    // change after repositioning keeps the focused row in the same place
+    // (RAC useOverlayPosition.ts:251-269).
+    let anchor: ScrollAnchor | null = null;
+    if (scrollNode && isFocusWithin(scrollNode)) {
+      const anchorRect = getActiveElement()?.getBoundingClientRect();
+      const scrollRect = scrollNode.getBoundingClientRect();
+      anchor = {
+        type: "top",
+        offset: (anchorRect?.top ?? 0) - scrollRect.top,
+      };
+      if (anchor.offset > scrollRect.height / 2) {
+        anchor.type = "bottom";
+        anchor.offset = (anchorRect?.bottom ?? 0) - scrollRect.bottom;
+      }
+    }
+
     // Reset overlay's previous max height
     const overlay = overlayNode as HTMLElement;
     if (!maxHeight() && overlayNode) {
@@ -219,71 +283,110 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
     });
     overlay.style.maxHeight = result.maxHeight != null ? result.maxHeight + "px" : "";
 
+    const activeElement = getActiveElement();
+    if (anchor && activeElement && scrollNode) {
+      const restoredRect = activeElement.getBoundingClientRect();
+      const scrollRect = scrollNode.getBoundingClientRect();
+      const newOffset = restoredRect[anchor.type] - scrollRect[anchor.type];
+      (scrollNode as HTMLElement).scrollTop += newOffset - anchor.offset;
+    }
+
     setPosition(result);
   };
 
-  // Update position when dependencies change
-  createEffect(() => {
-    // Track all dependencies
-    shouldUpdatePosition();
-    placement();
-    overlayRef();
-    targetRef();
-    arrowRef();
-    scrollRef();
-    containerPadding();
-    shouldFlip();
-    boundaryElement();
-    offset();
-    crossOffset();
-    isOpen();
-    maxHeight();
-    arrowBoundaryOffset();
-    arrowSize();
-
-    updatePosition();
-  });
+  // RAC useLayoutEffect(updatePosition, deps). Solid createEffect runs after
+  // this owner’s DOM (and refs) exist — createRenderEffect fires before refs
+  // and never re-runs for non-signal overlayRef. overlayProps.style must still
+  // spread the measured top/left; the previous `{ top: undefined }` after
+  // setPosition wiped the mutated coordinates and a later measure flipped to top.
+  //
+  // `setPosition` must run in apply: a tracked effect is an owned scope and
+  // drops the write, leaving the fallback `position: fixed` style forever.
+  createEffect(
+    () => {
+      const open = isOpen();
+      const overlay = overlayRef();
+      const target = targetRef();
+      shouldUpdatePosition();
+      placement();
+      arrowRef();
+      scrollRef();
+      containerPadding();
+      shouldFlip();
+      boundaryElement();
+      offset();
+      crossOffset();
+      direction();
+      maxHeight();
+      arrowBoundaryOffset();
+      arrowSize();
+      return [open, overlay, target] as const;
+    },
+    () => {
+      updatePosition();
+    },
+  );
 
   // Update position on window resize
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (!isOpen()) return;
 
     const handleResize = () => updatePosition();
     window.addEventListener("resize", handleResize, false);
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       window.removeEventListener("resize", handleResize, false);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   // Update position when overlay changes size using ResizeObserver
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const overlayNode = overlayRef();
     if (!overlayNode || !isOpen()) return;
 
     const resizeObserver = new ResizeObserver(() => updatePosition());
     resizeObserver.observe(overlayNode);
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       resizeObserver.disconnect();
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   // Update position when target changes size
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const targetNode = targetRef();
     if (!targetNode || !isOpen()) return;
 
     const resizeObserver = new ResizeObserver(() => updatePosition());
     resizeObserver.observe(targetNode);
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       resizeObserver.disconnect();
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   // Handle visual viewport resize (for iOS virtual keyboard)
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (!isOpen()) return;
 
     let timeout: ReturnType<typeof setTimeout>;
@@ -306,16 +409,24 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
 
     visualViewport?.addEventListener("resize", onResize);
     visualViewport?.addEventListener("scroll", onScroll);
+    const cleanupScroll = addEvent(getPropagationTargets(window), "scroll", onScroll);
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       visualViewport?.removeEventListener("resize", onResize);
       visualViewport?.removeEventListener("scroll", onScroll);
+      cleanupScroll();
       clearTimeout(timeout);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   // Close on scroll (when scrolling a parent of the trigger)
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const targetNode = targetRef();
     const closeHandler = onClose();
     if (!targetNode || !isOpen() || !closeHandler) return;
@@ -336,22 +447,19 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
 
     document.addEventListener("scroll", handleScroll, true);
 
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       document.removeEventListener("scroll", handleScroll, true);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   return {
     overlayProps: {
       get style(): JSX.CSSProperties {
-        const current = position();
-        return {
-          position: current ? "absolute" : "fixed",
-          top: !current ? 0 : undefined,
-          left: !current ? 0 : undefined,
-          "z-index": 100000,
-          "max-height": current?.maxHeight ?? "100vh",
-        } as JSX.CSSProperties;
+        return overlayPositionStyle(position());
       },
     },
     placement: () => position()?.placement ?? null,

package/src/popover/createPopover.ts

@@ -1,3 +1,17 @@
+/*
+ * 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/overlays/usePopover.ts
+
 /**
  * Provides the behavior and accessibility implementation for a popover component.
  * A popover is an overlay element positioned relative to a trigger.
@@ -5,7 +19,8 @@
  * Ported from @react-aria/overlays usePopover.
  */
 
-import { createEffect, onCleanup, type JSX } from "solid-js";
+import { createEffect } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createOverlay } from "../overlays/createOverlay";
 import {
   createOverlayPosition,
@@ -25,6 +40,8 @@ export interface OverlayTriggerState {
   close: () => void;
   /** Toggles the overlay's open state. */
   toggle: () => void;
+  /** Cursor position relative to the window viewport. */
+  point?: () => { x: number; y: number } | null;
 }
 
 export interface AriaPopoverProps extends Omit<
@@ -102,7 +119,7 @@ export function createPopover(props: AriaPopoverProps, state: OverlayTriggerStat
   const groupRef = () => props.groupRef?.() ?? null;
   const isNonModal = () => props.isNonModal ?? false;
   const isKeyboardDismissDisabled = () => props.isKeyboardDismissDisabled ?? false;
-  const shouldCloseOnInteractOutside = props.shouldCloseOnInteractOutside;
+  const shouldCloseOnInteractOutside = () => props.shouldCloseOnInteractOutside;
   const isSubmenu = () => props.trigger === "SubmenuTrigger";
 
   // Overlay behavior (dismiss handling)
@@ -113,7 +130,11 @@ export function createPopover(props: AriaPopoverProps, state: OverlayTriggerStat
       },
       onClose: state.close,
       get shouldCloseOnBlur() {
-        return !isSubmenu();
+        // RAC useOverlay has no extra document focusin listener — only
+        // onBlurWithin after focus has been inside. We still enable blur
+        // dismiss for modal popovers (FocusScope + programmatic focus-out
+        // tests). Submenus and PreviewTrigger race the trigger's own focus.
+        return !isSubmenu() && props.trigger !== "PreviewTrigger";
       },
       get isDismissable() {
         return !isNonModal() || isSubmenu();
@@ -121,8 +142,9 @@ export function createPopover(props: AriaPopoverProps, state: OverlayTriggerStat
       get isKeyboardDismissDisabled() {
         return isKeyboardDismissDisabled();
       },
-      get shouldCloseOnInteractOutside() {
-        return shouldCloseOnInteractOutside;
+      shouldCloseOnInteractOutside: (element: Element) => {
+        const filter = shouldCloseOnInteractOutside();
+        return filter ? filter(element) : true;
       },
     },
     () => groupRef() ?? popoverRef(),
@@ -135,7 +157,42 @@ export function createPopover(props: AriaPopoverProps, state: OverlayTriggerStat
     placement,
     triggerAnchorPoint,
   } = createOverlayPosition({
-    ...props,
+    get placement() {
+      return props.placement;
+    },
+    get containerPadding() {
+      return props.containerPadding;
+    },
+    get offset() {
+      return props.offset;
+    },
+    get crossOffset() {
+      return props.crossOffset;
+    },
+    get shouldFlip() {
+      return props.shouldFlip;
+    },
+    get maxHeight() {
+      return props.maxHeight;
+    },
+    get boundaryElement() {
+      return props.boundaryElement;
+    },
+    get arrowSize() {
+      return props.arrowSize;
+    },
+    get arrowBoundaryOffset() {
+      return props.arrowBoundaryOffset;
+    },
+    get shouldUpdatePosition() {
+      return props.shouldUpdatePosition;
+    },
+    get arrowRef() {
+      return props.arrowRef;
+    },
+    get scrollRef() {
+      return props.scrollRef;
+    },
     targetRef: triggerRef,
     overlayRef: popoverRef,
     get isOpen() {
@@ -144,6 +201,19 @@ export function createPopover(props: AriaPopoverProps, state: OverlayTriggerStat
     get onClose() {
       return isNonModal() && !isSubmenu() ? state.close : null;
     },
+    get getTargetRect() {
+      if (props.getTargetRect) {
+        return props.getTargetRect;
+      }
+
+      const point = state.point?.();
+      return point
+        ? () => {
+            const currentPoint = state.point?.();
+            return currentPoint ? new DOMRect(currentPoint.x, currentPoint.y, 0, 0) : null;
+          }
+        : undefined;
+    },
   });
 
   // Prevent scroll when modal popover is open
@@ -154,24 +224,19 @@ export function createPopover(props: AriaPopoverProps, state: OverlayTriggerStat
   });
 
   // Aria-hide outside elements
-  createEffect(() => {
-    if (state.isOpen() && popoverRef()) {
-      const element = groupRef() ?? popoverRef();
+  createEffect(
+    () => {
+      if (!state.isOpen()) return null;
+      return groupRef() ?? popoverRef() ?? null;
+    },
+    (element) => {
       if (!element) return;
-
-      let cleanup: (() => void) | undefined;
-
-      if (isNonModal()) {
-        cleanup = keepVisible(element);
-      } else {
-        cleanup = ariaHideOutside([element], { shouldUseInert: true });
-      }
-
-      onCleanup(() => {
-        cleanup?.();
-      });
-    }
-  });
+      const cleanup = isNonModal()
+        ? keepVisible(element)
+        : ariaHideOutside([element], { shouldUseInert: true });
+      return () => cleanup?.();
+    },
+  );
 
   const merged = mergeProps(overlayProps, positionProps) as Record<string, unknown>;
   const popoverProps = new Proxy(merged, {

package/src/progress/createProgressBar.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/progress/useProgressBar.ts
+
 /**
  * ProgressBar hook for Solidaria
  *
@@ -9,6 +23,7 @@
  */
 
 import { createLabel } from "../label/createLabel";
+import type { JSX } from "@solidjs/web";
 import { mergeProps } from "../utils/mergeProps";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { type MaybeAccessor, access } from "../utils/reactivity";
@@ -29,7 +44,7 @@ export interface AriaProgressBarProps {
   /** The display format of the value label. */
   formatOptions?: Intl.NumberFormatOptions;
   /** The content to display as the label. */
-  label?: string;
+  label?: JSX.Element;
   /** An accessibility label for this item. */
   "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
@@ -67,7 +82,7 @@ export function createProgressBar(
   const getProps = () => access(props);
 
   // Create label handling
-  const { labelProps, fieldProps } = createLabel({
+  const labelAria = createLabel({
     get id() {
       return getProps().id;
     },
@@ -112,7 +127,7 @@ export function createProgressBar(
 
     const domProps = filterDOMProps(p as Record<string, unknown>, { labelable: true });
 
-    return mergeProps(domProps, fieldProps as Record<string, unknown>, {
+    return mergeProps(domProps, labelAria.fieldProps as Record<string, unknown>, {
       "aria-valuenow": isIndeterminate ? undefined : clampedValue,
       "aria-valuemin": minValue,
       "aria-valuemax": maxValue,
@@ -126,7 +141,7 @@ export function createProgressBar(
       return getProgressBarProps();
     },
     get labelProps() {
-      return labelProps as Record<string, unknown>;
+      return labelAria.labelProps as Record<string, unknown>;
     },
   };
 }