@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/popover/createOverlayPosition.ts

@@ -5,15 +5,15 @@
  * Ported from @react-aria/overlays useOverlayPosition.
  */
 
-import { createEffect, createSignal, onCleanup, type JSX } from 'solid-js';
-import { useLocale } from '../i18n';
+import { createEffect, createSignal, onCleanup, type JSX } from "solid-js";
+import { useLocale } from "../i18n";
 import {
   calculatePosition,
   getRect,
   type Placement,
   type PlacementAxis,
   type PositionResult,
-} from './calculatePosition';
+} from "./calculatePosition";
 
 export interface PositionProps {
   /**
@@ -94,6 +94,14 @@ export interface AriaPositionProps extends PositionProps {
    * @default 0
    */
   arrowBoundaryOffset?: number;
+  /**
+   * Overrides the target element's bounding rectangle. Useful for positioning relative to
+   * a specific point such as the mouse cursor (e.g. context menus) or text selection.
+   *
+   * @default target.getBoundingClientRect()
+   * @param target - The target element.
+   */
+  getTargetRect?: (target: Element) => DOMRect | null | undefined;
 }
 
 export interface PositionAria {
@@ -109,13 +117,13 @@ export interface PositionAria {
   updatePosition: () => void;
 }
 
-const visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
+const visualViewport = typeof document !== "undefined" ? window.visualViewport : null;
 
 function translateRTL(position: string, direction: string): string {
-  if (direction === 'rtl') {
-    return position.replace('start', 'right').replace('end', 'left');
+  if (direction === "rtl") {
+    return position.replace("start", "right").replace("end", "left");
   }
-  return position.replace('start', 'left').replace('end', 'right');
+  return position.replace("start", "left").replace("end", "right");
 }
 
 /**
@@ -131,11 +139,11 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
   const overlayRef = () => props.overlayRef();
   const arrowRef = () => props.arrowRef?.() ?? null;
   const scrollRef = () => props.scrollRef?.() ?? overlayRef();
-  const placement = () => (props.placement ?? 'bottom') as Placement;
+  const placement = () => (props.placement ?? "bottom") as Placement;
   const containerPadding = () => props.containerPadding ?? 12;
   const shouldFlip = () => props.shouldFlip ?? true;
   const boundaryElement = () =>
-    props.boundaryElement ?? (typeof document !== 'undefined' ? document.body : null);
+    props.boundaryElement ?? (typeof document !== "undefined" ? document.body : null);
   const offset = () => props.offset ?? 0;
   const crossOffset = () => props.crossOffset ?? 0;
   const shouldUpdatePosition = () => props.shouldUpdatePosition ?? true;
@@ -174,9 +182,9 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
     // Reset overlay's previous max height
     const overlay = overlayNode as HTMLElement;
     if (!maxHeight() && overlayNode) {
-      overlay.style.top = '0px';
-      overlay.style.bottom = '';
-      overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';
+      overlay.style.top = "0px";
+      overlay.style.bottom = "";
+      overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + "px";
     }
 
     const result = calculatePosition({
@@ -192,6 +200,7 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
       maxHeight: maxHeight(),
       arrowSize: arrowSize() ?? (arrowNode ? getRect(arrowNode, true).width : 0),
       arrowBoundaryOffset: arrowBoundaryOffset(),
+      targetRect: props.getTargetRect?.(targetNode),
     });
 
     if (!result.position) {
@@ -199,16 +208,16 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
     }
 
     // Apply styles directly for immediate positioning
-    overlay.style.top = '';
-    overlay.style.bottom = '';
-    overlay.style.left = '';
-    overlay.style.right = '';
+    overlay.style.top = "";
+    overlay.style.bottom = "";
+    overlay.style.left = "";
+    overlay.style.right = "";
 
     const pos = result.position as Record<string, number | undefined>;
     Object.keys(pos).forEach((key) => {
-      overlay.style.setProperty(key, pos[key] + 'px');
+      overlay.style.setProperty(key, pos[key] + "px");
     });
-    overlay.style.maxHeight = result.maxHeight != null ? result.maxHeight + 'px' : '';
+    overlay.style.maxHeight = result.maxHeight != null ? result.maxHeight + "px" : "";
 
     setPosition(result);
   };
@@ -240,10 +249,10 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
     if (!isOpen()) return;
 
     const handleResize = () => updatePosition();
-    window.addEventListener('resize', handleResize, false);
+    window.addEventListener("resize", handleResize, false);
 
     onCleanup(() => {
-      window.removeEventListener('resize', handleResize, false);
+      window.removeEventListener("resize", handleResize, false);
     });
   });
 
@@ -295,12 +304,12 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
       }
     };
 
-    visualViewport?.addEventListener('resize', onResize);
-    visualViewport?.addEventListener('scroll', onScroll);
+    visualViewport?.addEventListener("resize", onResize);
+    visualViewport?.addEventListener("scroll", onScroll);
 
     onCleanup(() => {
-      visualViewport?.removeEventListener('resize', onResize);
-      visualViewport?.removeEventListener('scroll', onScroll);
+      visualViewport?.removeEventListener("resize", onResize);
+      visualViewport?.removeEventListener("scroll", onScroll);
       clearTimeout(timeout);
     });
   });
@@ -325,35 +334,41 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
       }
     };
 
-    document.addEventListener('scroll', handleScroll, true);
+    document.addEventListener("scroll", handleScroll, true);
 
     onCleanup(() => {
-      document.removeEventListener('scroll', handleScroll, true);
+      document.removeEventListener("scroll", handleScroll, true);
     });
   });
 
   return {
     overlayProps: {
-      style: {
-        position: position() ? 'absolute' : 'fixed',
-        top: !position() ? 0 : undefined,
-        left: !position() ? 0 : undefined,
-        'z-index': 100000,
-        'max-height': position()?.maxHeight ?? '100vh',
-      } as JSX.CSSProperties,
+      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;
+      },
     },
     placement: () => position()?.placement ?? null,
     triggerAnchorPoint: () => position()?.triggerAnchorPoint ?? null,
     arrowProps: {
-      'aria-hidden': 'true',
-      role: 'presentation',
-      style: {
-        left: position()?.arrowOffsetLeft != null ? `${position()!.arrowOffsetLeft}px` : undefined,
-        top: position()?.arrowOffsetTop != null ? `${position()!.arrowOffsetTop}px` : undefined,
-      } as JSX.CSSProperties,
+      "aria-hidden": "true",
+      role: "presentation",
+      get style(): JSX.CSSProperties {
+        const current = position();
+        return {
+          left: current?.arrowOffsetLeft != null ? `${current.arrowOffsetLeft}px` : undefined,
+          top: current?.arrowOffsetTop != null ? `${current.arrowOffsetTop}px` : undefined,
+        };
+      },
     },
     updatePosition,
   };
 }
 
-export { type Placement, type PlacementAxis } from './calculatePosition';
+export { type Placement, type PlacementAxis } from "./calculatePosition";

package/src/popover/createPopover.ts

@@ -5,16 +5,16 @@
  * Ported from @react-aria/overlays usePopover.
  */
 
-import { createEffect, onCleanup, type JSX } from 'solid-js';
-import { createOverlay } from '../overlays/createOverlay';
+import { createEffect, onCleanup, type JSX } from "solid-js";
+import { createOverlay } from "../overlays/createOverlay";
 import {
   createOverlayPosition,
   type AriaPositionProps,
   type PlacementAxis,
-} from './createOverlayPosition';
-import { createPreventScroll } from '../overlays/createPreventScroll';
-import { ariaHideOutside, keepVisible } from '../overlays/ariaHideOutside';
-import { mergeProps } from '../utils/mergeProps';
+} from "./createOverlayPosition";
+import { createPreventScroll } from "../overlays/createPreventScroll";
+import { ariaHideOutside, keepVisible } from "../overlays/ariaHideOutside";
+import { mergeProps } from "../utils/mergeProps";
 
 export interface OverlayTriggerState {
   /** Whether the overlay is currently open. */
@@ -27,8 +27,10 @@ export interface OverlayTriggerState {
   toggle: () => void;
 }
 
-export interface AriaPopoverProps
-  extends Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {
+export interface AriaPopoverProps extends Omit<
+  AriaPositionProps,
+  "isOpen" | "onClose" | "targetRef" | "overlayRef"
+> {
   /**
    * The ref for the element which the popover positions itself with respect to.
    */
@@ -94,17 +96,14 @@ export interface PopoverAria {
  * Provides the behavior and accessibility implementation for a popover component.
  * A popover is an overlay element positioned relative to a trigger.
  */
-export function createPopover(
-  props: AriaPopoverProps,
-  state: OverlayTriggerState
-): PopoverAria {
+export function createPopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria {
   const triggerRef = () => props.triggerRef();
   const popoverRef = () => props.popoverRef();
   const groupRef = () => props.groupRef?.() ?? null;
   const isNonModal = () => props.isNonModal ?? false;
   const isKeyboardDismissDisabled = () => props.isKeyboardDismissDisabled ?? false;
   const shouldCloseOnInteractOutside = props.shouldCloseOnInteractOutside;
-  const isSubmenu = () => props.trigger === 'SubmenuTrigger';
+  const isSubmenu = () => props.trigger === "SubmenuTrigger";
 
   // Overlay behavior (dismiss handling)
   const { overlayProps, underlayProps } = createOverlay(
@@ -113,7 +112,9 @@ export function createPopover(
         return state.isOpen();
       },
       onClose: state.close,
-      shouldCloseOnBlur: true,
+      get shouldCloseOnBlur() {
+        return !isSubmenu();
+      },
       get isDismissable() {
         return !isNonModal() || isSubmenu();
       },
@@ -124,7 +125,7 @@ export function createPopover(
         return shouldCloseOnInteractOutside;
       },
     },
-    () => groupRef() ?? popoverRef()
+    () => groupRef() ?? popoverRef(),
   );
 
   // Overlay positioning
@@ -172,8 +173,32 @@ export function createPopover(
     }
   });
 
+  const merged = mergeProps(overlayProps, positionProps) as Record<string, unknown>;
+  const popoverProps = new Proxy(merged, {
+    get(target, key: string) {
+      if (key === "style") return positionProps.style;
+      return target[key];
+    },
+    has(target, key) {
+      return key in target;
+    },
+    ownKeys(target) {
+      return Reflect.ownKeys(target);
+    },
+    getOwnPropertyDescriptor(target, key) {
+      if (key === "style") {
+        return {
+          configurable: true,
+          enumerable: true,
+          get: () => positionProps.style,
+        };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, key);
+    },
+  });
+
   return {
-    popoverProps: mergeProps(overlayProps, positionProps),
+    popoverProps,
     arrowProps,
     underlayProps,
     placement,
@@ -181,4 +206,4 @@ export function createPopover(
   };
 }
 
-export { type PlacementAxis } from './createOverlayPosition';
+export { type PlacementAxis } from "./createOverlayPosition";

package/src/popover/index.ts

@@ -4,7 +4,7 @@ export {
   type AriaPopoverProps,
   type PopoverAria,
   type OverlayTriggerState,
-} from './createPopover';
+} from "./createPopover";
 
 // Overlay Position
 export {
@@ -12,7 +12,7 @@ export {
   type AriaPositionProps,
   type PositionProps,
   type PositionAria,
-} from './createOverlayPosition';
+} from "./createOverlayPosition";
 
 // Position calculation utilities
 export {
@@ -21,4 +21,4 @@ export {
   type PlacementAxis,
   type PositionOpts,
   type PositionResult,
-} from './calculatePosition';
+} from "./calculatePosition";

package/src/progress/createProgressBar.ts

@@ -8,16 +8,14 @@
  * This is a 1:1 port of @react-aria/progress's useProgressBar hook.
  */
 
-import { createLabel } from '../label/createLabel';
-import { mergeProps } from '../utils/mergeProps';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { createLabel } from "../label/createLabel";
+import { mergeProps } from "../utils/mergeProps";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
 
 export interface AriaProgressBarProps {
+  /** The element id. */
+  id?: string;
   /** The current value (controlled). */
   value?: number;
   /** The smallest value allowed for the input. @default 0 */
@@ -33,13 +31,13 @@ export interface AriaProgressBarProps {
   /** The content to display as the label. */
   label?: string;
   /** An accessibility label for this item. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
+  "aria-details"?: string;
 }
 
 export interface ProgressBarAria {
@@ -49,10 +47,6 @@ export interface ProgressBarAria {
   labelProps: Record<string, unknown>;
 }
 
-// ============================================
-// UTILITIES
-// ============================================
-
 function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
@@ -62,28 +56,33 @@ function getSafeRange(min: number, max: number): number {
   return Number.isFinite(range) && range > 0 ? range : 1;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for a progress bar component.
  * Progress bars show either determinate or indeterminate progress of an operation
  * over time.
  */
 export function createProgressBar(
-  props: MaybeAccessor<AriaProgressBarProps> = {}
+  props: MaybeAccessor<AriaProgressBarProps> = {},
 ): ProgressBarAria {
   const getProps = () => access(props);
 
   // Create label handling
   const { labelProps, fieldProps } = createLabel({
-    get label() { return getProps().label; },
-    get 'aria-label'() { return getProps()['aria-label']; },
-    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
+    get id() {
+      return getProps().id;
+    },
+    get label() {
+      return getProps().label;
+    },
+    get "aria-label"() {
+      return getProps()["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
+    },
     // Progress bar is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
-    labelElementType: 'span',
+    labelElementType: "span",
   });
 
   // Build progress bar props
@@ -93,7 +92,7 @@ export function createProgressBar(
     const minValue = p.minValue ?? 0;
     const maxValue = p.maxValue ?? 100;
     const isIndeterminate = p.isIndeterminate ?? false;
-    const formatOptions = p.formatOptions ?? { style: 'percent' as const };
+    const formatOptions = p.formatOptions ?? { style: "percent" as const };
 
     const clampedValue = clamp(value, minValue, maxValue);
     const percentage = (clampedValue - minValue) / getSafeRange(minValue, maxValue);
@@ -101,7 +100,7 @@ export function createProgressBar(
     // Format value label
     let valueLabel = p.valueLabel;
     if (!isIndeterminate && !valueLabel) {
-      const valueToFormat = formatOptions.style === 'percent' ? percentage : clampedValue;
+      const valueToFormat = formatOptions.style === "percent" ? percentage : clampedValue;
       try {
         const formatter = new Intl.NumberFormat(undefined, formatOptions);
         valueLabel = formatter.format(valueToFormat);
@@ -114,11 +113,11 @@ export function createProgressBar(
     const domProps = filterDOMProps(p as Record<string, unknown>, { labelable: true });
 
     return mergeProps(domProps, fieldProps as Record<string, unknown>, {
-      'aria-valuenow': isIndeterminate ? undefined : clampedValue,
-      'aria-valuemin': minValue,
-      'aria-valuemax': maxValue,
-      'aria-valuetext': isIndeterminate ? undefined : valueLabel,
-      role: 'progressbar',
+      "aria-valuenow": isIndeterminate ? undefined : clampedValue,
+      "aria-valuemin": minValue,
+      "aria-valuemax": maxValue,
+      "aria-valuetext": isIndeterminate ? undefined : valueLabel,
+      role: "progressbar",
     });
   };
 

package/src/progress/index.ts

@@ -2,4 +2,4 @@ export {
   createProgressBar,
   type AriaProgressBarProps,
   type ProgressBarAria,
-} from './createProgressBar';
+} from "./createProgressBar";