@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/src/Meter.tsx

@@ -119,7 +119,9 @@ export function Meter(props: MeterProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Meter",

package/src/Modal.tsx

@@ -22,6 +22,8 @@ import {
   ariaHideOutside,
   FocusScope,
   useUNSAFE_PortalContext,
+  createEnterAnimation,
+  createExitAnimation,
 } from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
@@ -37,6 +39,7 @@ import {
   OverlayTriggerStateContext,
   type OverlayTriggerState,
 } from "./contexts";
+import { VisuallyHidden } from "./VisuallyHidden";
 
 /**
  * Internal context to signal that Modal is wrapped in ModalOverlay.
@@ -45,6 +48,13 @@ import {
 interface InternalModalContextValue {
   isDismissable?: boolean;
   isKeyboardDismissDisabled?: boolean;
+  // Upstream's ModalOverlay owns the modal element's ref so it can watch the
+  // modal surface's exit animation alongside the overlay's (both must finish
+  // before the overlay unmounts). ModalContent registers its element here.
+  setModalRef?: (element: HTMLElement | null) => void;
+  // Combined exit flag (overlay OR modal still exiting). Both the overlay and
+  // the modal surface carry `data-exiting` off this so they fade out together.
+  isExiting?: () => boolean;
 }
 
 const InternalModalContext = createContext<InternalModalContextValue | null>(null);
@@ -177,9 +187,34 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
     toggle,
   };
 
+  // Enter/exit animation state (mirrors upstream's ModalOverlayWithForwardRef +
+  // ModalOverlayInner). The overlay stays mounted here even while closed, so the
+  // enter animation is gated on `isOpen` (isReady) — otherwise it would resolve
+  // to "done entering" before the element ever mounts. Exit is watched for BOTH
+  // the overlay and the modal surface; the modal registers its element via
+  // InternalModalContext (setModalRef) so we can await its exit too.
+  let overlayRef!: HTMLDivElement;
+  // Signal-backed so the enter/exit effects re-run once the element mounts — a
+  // plain closure over `overlayRef` would read `null` if the effect fired first
+  // and, with no reactive dep on the ref, never recover (stuck `data-entering`).
+  const [overlayEl, setOverlayEl] = createSignal<HTMLElement | null>(null);
+  const overlayRefAccessor = () => overlayEl();
+  const registerOverlayRef = (element: HTMLDivElement) => {
+    overlayRef = element;
+    setOverlayEl(element);
+  };
+  const [modalEl, setModalEl] = createSignal<HTMLElement | null>(null);
+
+  const isOverlayEntering = createEnterAnimation(overlayRefAccessor, isOpen);
+  const isOverlayExiting = createExitAnimation(overlayRefAccessor, isOpen);
+  const isModalExiting = createExitAnimation(() => modalEl(), isOpen);
+  const overlayEntering = () => isOverlayEntering() || (local.isEntering ?? false);
+  const combinedExiting = () =>
+    isOverlayExiting() || isModalExiting() || (local.isExiting ?? false);
+
   const renderValues = createMemo<ModalRenderProps>(() => ({
-    isEntering: local.isEntering ?? false,
-    isExiting: local.isExiting ?? false,
+    isEntering: overlayEntering(),
+    isExiting: combinedExiting(),
   }));
 
   // Resolve render props - don't pass children, we'll render props.children directly
@@ -200,10 +235,11 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
   const internalModalContext: InternalModalContextValue = {
     isDismissable: local.isDismissable,
     isKeyboardDismissDisabled: local.isKeyboardDismissDisabled,
+    setModalRef: setModalEl,
+    isExiting: combinedExiting,
   };
   const portalContext = useUNSAFE_PortalContext();
   const portalContainer = () => portalContext.getContainer?.() ?? undefined;
-  let overlayRef!: HTMLDivElement;
 
   const isTopMostModalInOverlay = () => {
     pruneDisconnectedModals();
@@ -246,17 +282,17 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
   };
 
   return (
-    <Show when={isHydrated() && (isOpen() || local.isExiting)}>
+    <Show when={isHydrated() && (isOpen() || combinedExiting())}>
       <Portal mount={portalContainer()}>
         <OverlayTriggerStateContext.Provider value={state}>
           <InternalModalContext.Provider value={internalModalContext}>
             <div
               {...domProps()}
-              ref={overlayRef}
+              ref={registerOverlayRef}
               class={renderProps.class()}
               style={renderProps.style()}
-              data-entering={dataAttr(local.isEntering)}
-              data-exiting={dataAttr(local.isExiting)}
+              data-entering={dataAttr(overlayEntering())}
+              data-exiting={dataAttr(combinedExiting())}
               onPointerDown={handleOverlayPointerDown}
             >
               {resolveChildren()}
@@ -305,26 +341,17 @@ function ModalContentWithAutoOverlay(props: ModalProps): JSX.Element {
   // Check for InternalModalContext - if present, we're inside a ModalOverlay
   const internalContext = useContext(InternalModalContext);
 
-  // If wrapped in ModalOverlay, just render the content
+  // If wrapped in ModalOverlay, just render the content. ModalContent reads the
+  // overlay's InternalModalContext itself (via useContext), so nothing needs
+  // threading — in both branches ModalContent renders inside a provider.
   if (internalContext) {
-    return (
-      <ModalContent {...modalProps} internalContext={internalContext}>
-        {props.children}
-      </ModalContent>
-    );
+    return <ModalContent {...modalProps}>{props.children}</ModalContent>;
   }
 
-  // For standalone usage, wrap in ModalOverlay
-  const standaloneContext: InternalModalContextValue = {
-    isDismissable: overlayProps.isDismissable,
-    isKeyboardDismissDisabled: overlayProps.isKeyboardDismissDisabled,
-  };
-
+  // For standalone usage, wrap in ModalOverlay.
   return (
     <ModalOverlay {...overlayProps}>
-      <ModalContent {...modalProps} internalContext={standaloneContext}>
-        {props.children}
-      </ModalContent>
+      <ModalContent {...modalProps}>{props.children}</ModalContent>
     </ModalOverlay>
   );
 }
@@ -333,9 +360,7 @@ function ModalContentWithAutoOverlay(props: ModalProps): JSX.Element {
  * Internal component that renders the actual modal content.
  * Used by both standalone Modal and Modal wrapped in ModalOverlay.
  */
-function ModalContent(
-  props: ModalProps & { internalContext: InternalModalContextValue },
-): JSX.Element {
+function ModalContent(props: ModalProps): JSX.Element {
   if (isServer) {
     return <>{props.children}</>;
   }
@@ -351,19 +376,27 @@ function ModalContent(
     "isKeyboardDismissDisabled",
     "isEntering",
     "isExiting",
-    "internalContext",
   ]);
 
   let modalRef!: HTMLDivElement;
   const modalRefAccessor = () => modalRef ?? null;
+  // Signal-backed element for the enter animation, so the effect re-runs when
+  // the surface mounts (see the overlay's note); the plain `modalRef` var still
+  // backs the synchronous consumers (focus stack, interact-outside, aria-hide).
+  const [modalEl, setModalEl] = createSignal<HTMLElement | null>(null);
 
   // Get state from parent OverlayTriggerStateContext (provided by ModalOverlay)
   const parentState = useContext(OverlayTriggerStateContext);
 
+  // The overlay (auto or user-provided) always wraps this content, so it owns
+  // the InternalModalContext: dismissal settings, the modal-ref registration
+  // sink, and the combined exit flag.
+  const internalContext = useContext(InternalModalContext);
+
   // Get dismissable settings from internal context (set by ModalOverlay)
-  const isDismissable = () => local.internalContext?.isDismissable ?? local.isDismissable;
+  const isDismissable = () => internalContext?.isDismissable ?? local.isDismissable;
   const isKeyboardDismissDisabled = () =>
-    local.internalContext?.isKeyboardDismissDisabled ?? local.isKeyboardDismissDisabled;
+    internalContext?.isKeyboardDismissDisabled ?? local.isKeyboardDismissDisabled;
 
   // Determine if open from parent state
   const isOpen = (): boolean => {
@@ -371,6 +404,19 @@ function ModalContent(
     return parentState?.isOpen ?? false;
   };
 
+  // Register this element with the overlay so it can await the modal surface's
+  // exit animation (upstream threads modalRef down the same way). The overlay's
+  // combined exit flag drives this surface's `data-exiting`. The enter animation
+  // is local — the modal fades/slides in on its own timeline (delay 160 vs the
+  // overlay's 0).
+  const registerModalRef = (element: HTMLDivElement) => {
+    modalRef = element;
+    setModalEl(element);
+    internalContext?.setModalRef?.(element);
+  };
+  const isModalEntering = createEnterAnimation(() => modalEl(), isOpen);
+  const isModalExiting = () => internalContext?.isExiting?.() ?? local.isExiting ?? false;
+
   // Keep this modal in a global stack so nested modals dismiss in top-down order.
   createEffect(() => {
     if (!isOpen()) return;
@@ -457,7 +503,7 @@ function ModalContent(
 
     const hideOutside = () => {
       if (cancelled || !modalRef?.isConnected) return;
-      cleanup = ariaHideOutside([modalRef]);
+      cleanup = ariaHideOutside([modalRef], { shouldUseInert: true });
     };
 
     if (modalRef.isConnected) {
@@ -473,8 +519,8 @@ function ModalContent(
   });
 
   const renderValues = createMemo<ModalRenderProps>(() => ({
-    isEntering: local.isEntering ?? false,
-    isExiting: local.isExiting ?? false,
+    isEntering: isModalEntering(),
+    isExiting: isModalExiting(),
   }));
 
   const renderProps = useRenderProps(
@@ -499,33 +545,35 @@ function ModalContent(
   );
 
   return (
-    <FocusScope contain restoreFocus autoFocus>
+    // No autoFocus: react-aria's Overlay renders FocusScope with restoreFocus +
+    // contain only — initial focus is useDialog's job (it focuses the dialog
+    // element itself when nothing inside holds focus).
+    <FocusScope contain restoreFocus>
       <div
         {...domProps()}
-        ref={modalRef}
+        ref={registerModalRef}
         class={renderProps.class()}
         style={renderProps.style()}
-        data-entering={dataAttr(local.isEntering)}
-        data-exiting={dataAttr(local.isExiting)}
+        data-entering={dataAttr(isModalEntering())}
+        data-exiting={dataAttr(isModalExiting())}
       >
         <Show when={isDismissable()}>
-          <button
-            type="button"
-            aria-label="Dismiss"
-            tabIndex={-1}
-            onClick={close}
-            style={{
-              position: "absolute",
-              width: "1px",
-              height: "1px",
-              padding: 0,
-              margin: "-1px",
-              overflow: "hidden",
-              clip: "rect(0, 0, 0, 0)",
-              "white-space": "nowrap",
-              border: 0,
-            }}
-          />
+          {/* Faithful to react-aria's DismissButton: a bare button carrying
+              only `width/height: 1px` inside a VisuallyHidden `div` wrapper —
+              NOT the hidden styles inlined onto the button. The wrapper clips
+              it out of sight while the button keeps its intrinsic UA border-box,
+              which is exactly what upstream renders (and what D8 target-size
+              measures against the pair oracle). Inlining the reset onto the
+              button instead collapsed it to a 1x1 box, diverging from
+              upstream's ~16x6 sentinel. */}
+          <VisuallyHidden elementType="div">
+            <button
+              aria-label="Dismiss"
+              tabIndex={-1}
+              onClick={close}
+              style={{ width: "1px", height: "1px" }}
+            />
+          </VisuallyHidden>
         </Show>
         {renderProps.renderChildren()}
       </div>

package/src/NumberField.tsx

@@ -5,7 +5,14 @@
  * Port of react-aria-components/src/NumberField.tsx
  */
 
-import { type JSX, createContext, createMemo, splitProps, useContext } from "solid-js";
+import {
+  type JSX,
+  type Context,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+} from "solid-js";
 import {
   createNumberField,
   createButton,
@@ -22,7 +29,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 
 export interface NumberFieldRenderProps {
   /** Whether the number field is disabled. */
@@ -294,7 +303,9 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-NumberField",
@@ -366,6 +377,21 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
     },
     setInputRef,
   };
+  // Provide the description / errorMessage props as `TextContext` slots (mirrors
+  // react-aria-components' NumberField), so a `<Text slot="description">` /
+  // `<Text slot="errorMessage">` child picks up the `id` its `aria-describedby`
+  // references. Additive: existing consumers reading these off
+  // `NumberFieldContext` are unaffected.
+  const textSlots = {
+    slots: {
+      get description() {
+        return numberFieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return numberFieldAria.errorMessageProps;
+      },
+    },
+  };
 
   return (
     <NumberFieldStateContext.Provider value={state}>
@@ -379,7 +405,9 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
           data-required={ariaProps.isRequired || undefined}
           data-readonly={ariaProps.isReadOnly || undefined}
         >
-          {fieldChildren()}
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            {fieldChildren()}
+          </Provider>
         </div>
       </NumberFieldContext.Provider>
     </NumberFieldStateContext.Provider>
@@ -399,14 +427,25 @@ export function NumberFieldLabel(props: {
     throw new Error("NumberFieldLabel must be used within a NumberField");
   }
 
+  // Upstream RAC/S2 renders the NumberField label as a native `<label>` (the field's
+  // `labelElementType` is the default `'label'`), so `labelProps` carries `for=inputId`.
+  // This was a `<span>` — a self-inflicted divergence dropping the native for/label
+  // semantics; reverted to `<label>` to match the shipped React DOM byte-for-byte.
+  // (Mirror SearchFieldLabel: `labelProps` is typed for a generic element, so strip the
+  // `ref` and spread the rest onto the `<label>` intrinsic.)
+  const cleanLabelProps = () => {
+    const { ref: _ref, ...rest } = context.labelProps as Record<string, unknown>;
+    return rest;
+  };
+
   return (
-    <span
-      {...context.labelProps}
+    <label
+      {...cleanLabelProps()}
       class={props.class ?? "solidaria-NumberField-label"}
       style={props.style}
     >
       {props.children}
-    </span>
+    </label>
   );
 }
 
@@ -558,7 +597,9 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-NumberField-increment",
@@ -637,7 +678,9 @@ export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProp
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-NumberField-decrement",

package/src/Popover.tsx

@@ -24,6 +24,7 @@ import {
   FocusScope,
   useUNSAFE_PortalContext,
   visuallyHiddenStyles,
+  type AriaLabelingProps,
   type Placement,
   type PlacementAxis,
 } from "@proyecto-viviana/solidaria";
@@ -59,7 +60,7 @@ export interface PopoverRenderProps {
   isExiting: boolean;
 }
 
-export interface PopoverProps extends SlotProps {
+export interface PopoverProps extends SlotProps, AriaLabelingProps {
   /** The children of the component - can be JSX or render function. */
   children?: RenderChildren<PopoverRenderProps>;
   /** The CSS className for the element. */
@@ -111,6 +112,14 @@ export interface PopoverProps extends SlotProps {
    * A boundary element for placement calculations.
    */
   boundaryElement?: Element;
+  /**
+   * 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;
   /**
    * A ref for the popover arrow element.
    */
@@ -257,6 +266,7 @@ export function Popover(props: PopoverProps): JSX.Element {
     "shouldFlip",
     "maxHeight",
     "boundaryElement",
+    "getTargetRect",
     "arrowRef",
     "scrollRef",
     "isNonModal",
@@ -346,6 +356,9 @@ export function Popover(props: PopoverProps): JSX.Element {
       get boundaryElement() {
         return local.boundaryElement;
       },
+      get getTargetRect() {
+        return local.getTargetRect;
+      },
       get arrowRef() {
         return local.arrowRef;
       },
@@ -627,10 +640,33 @@ export function OverlayArrow(props: OverlayArrowProps): JSX.Element {
   const popoverContext = useContext(PopoverContext);
   const placement = () => popoverContext?.placement() ?? null;
 
-  const mergedStyle = () => {
+  // Mirror react-aria-components' OverlayArrow: the wrapper positions itself
+  // absolutely against the popover edge (`[placement]: '100%'`) and takes the
+  // cross-axis offset (`left`/`top`) from the overlay's computed `arrowProps`.
+  // No `aria-hidden`/`role="presentation"` — upstream leaves the arrow in the
+  // accessibility tree (the arrow SVG surfaces as an unlabeled `img`), matching
+  // S2's `<OverlayArrow className="">`. The styled layer therefore passes no
+  // positioning class of its own.
+  const mergedStyle = (): JSX.CSSProperties => {
+    const currentPlacement = placement();
+    // Mirror react-aria-components' OverlayArrow: the reported `arrowProps`
+    // offset (`left`/`top`) points at the arrow's CENTER, so the wrapper must be
+    // pulled back by half its size to center on that point — horizontally for
+    // top/bottom placements, vertically for left/right. Omitting this shifts the
+    // arrow off by half its width/height (a self-inflicted divergence).
+    const style: JSX.CSSProperties = {
+      position: "absolute",
+      transform:
+        currentPlacement === "top" || currentPlacement === "bottom"
+          ? "translateX(-50%)"
+          : "translateY(-50%)",
+    };
+    if (currentPlacement != null) {
+      (style as Record<string, string>)[currentPlacement] = "100%";
+    }
+
     const contextStyle = (popoverContext?.arrowProps() as Record<string, unknown> | undefined)
       ?.style as (JSX.CSSProperties & Record<string, unknown>) | undefined;
-    const style: JSX.CSSProperties = {};
     if (typeof contextStyle?.left === "string") {
       style.left = contextStyle.left;
     }
@@ -651,13 +687,7 @@ export function OverlayArrow(props: OverlayArrowProps): JSX.Element {
   };
 
   return (
-    <div
-      class={props.class}
-      style={mergedStyle()}
-      data-placement={placement()}
-      aria-hidden="true"
-      role="presentation"
-    >
+    <div class={props.class} style={mergedStyle()} data-placement={placement()}>
       {props.render ? props.render() : props.children}
     </div>
   );

package/src/ProgressBar.tsx

@@ -133,7 +133,9 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ProgressBar",