@proyecto-viviana/solidaria-components 0.3.0 → 0.3.2

package/src/TextField.tsx

@@ -79,6 +79,7 @@ export interface TextFieldContextValue {
   isInvalid?: boolean;
   slots?: Record<string, TextFieldProps>;
   inputId?: string;
+  setInputId?: (id: string | undefined) => void;
 }
 
 export const TextFieldContext = createContext<TextFieldContextValue | null>(null);
@@ -204,6 +205,14 @@ export function Input(props: InputProps): JSX.Element {
   const context = useContext(TextFieldContext);
   let inputElement: HTMLInputElement | undefined;
 
+  createEffect(() => {
+    context?.setInputId?.(props.id);
+  });
+
+  onCleanup(() => {
+    context?.setInputId?.(undefined);
+  });
+
   // Merge context inputProps with local props (local props take precedence)
   const mergedProps = () => {
     if (context) {
@@ -291,6 +300,14 @@ export function TextArea(props: TextAreaProps): JSX.Element {
   const context = useContext(TextFieldContext);
   let textAreaElement: HTMLTextAreaElement | undefined;
 
+  createEffect(() => {
+    context?.setInputId?.(props.id);
+  });
+
+  onCleanup(() => {
+    context?.setInputId?.(undefined);
+  });
+
   // Merge context inputProps with local props (local props take precedence)
   // Note: TextArea uses inputProps from context since it's an input variant
   const mergedProps = () => {
@@ -396,6 +413,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
       errorMessageProps: _errorMessageProps,
       isInvalid: _isInvalid,
       slots: _slots,
+      setInputId: _setInputId,
       ...rest
     } = contextProps;
     return rest as TextFieldProps;
@@ -449,6 +467,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
       return ariaProps.isDisabled;
     },
   });
+  const [inputIdOverride, setInputIdOverride] = createSignal<string | undefined>();
 
   const renderValues = createMemo<TextFieldRenderProps>(() => ({
     isDisabled: ariaProps.isDisabled || false,
@@ -551,7 +570,10 @@ export function TextField(props: TextFieldProps): JSX.Element {
     // onMount effect would flip undefined->id post-mount and re-execute the Label
     // template — crashing hydration if the re-run lands mid-hydration (dev).
     get inputId() {
-      return (textFieldAria.inputProps as { id?: string }).id;
+      return inputIdOverride() ?? (textFieldAria.inputProps as { id?: string }).id;
+    },
+    setInputId(id: string | undefined) {
+      setInputIdOverride(id);
     },
   };
   // Resolve the render-prop children ONCE (untracked). Re-invoking it on a
@@ -559,10 +581,11 @@ export function TextField(props: TextFieldProps): JSX.Element {
   // throws a Hydration Mismatch (worst in dev, where slow unbundled modules widen
   // the hydration window). The children carry their own fine-grained reactivity
   // (render-value getters + <Show>s), so they update without being re-created.
-  const fieldChildren = untrack(() => {
-    const children = local.children;
-    return typeof children === "function" ? children(childRenderValues) : children;
-  });
+  const FieldChildren = () =>
+    untrack(() => {
+      const children = local.children;
+      return typeof children === "function" ? children(childRenderValues) : children;
+    });
   const rootProps = () =>
     ({
       ...domProps(),
@@ -581,7 +604,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
   const customRootProps = () =>
     ({
       ...rootProps(),
-      children: fieldChildren,
+      children: <FieldChildren />,
     }) as JSX.HTMLAttributes<HTMLDivElement>;
 
   return (
@@ -590,7 +613,9 @@ export function TextField(props: TextFieldProps): JSX.Element {
         {local.render ? (
           local.render(customRootProps(), renderValues())
         ) : (
-          <div {...rootProps()}>{fieldChildren}</div>
+          <div {...rootProps()}>
+            <FieldChildren />
+          </div>
         )}
       </TextFieldContext.Provider>
     </FieldErrorContext.Provider>

package/src/Toast.tsx

@@ -252,7 +252,13 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      // Lazy: the region content is gated behind `<Show when={isHydrated() && …}>`
+      // (Portal) below, so reading children must not instantiate templates during
+      // the component body (would walk getNextElement before the gate the server
+      // kept closed → hydration mismatch). See Popover for the full rationale.
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ToastRegion",

package/src/Tooltip.tsx

@@ -226,6 +226,40 @@ const TriggerWrapper: ParentComponent<{
 }> = (props) => {
   const child = () => props.children as JSX.Element;
   const [triggerElement, setTriggerElement] = createSignal<HTMLElement | null>(null);
+  const [wrapperElement, setWrapperElement] = createSignal<HTMLSpanElement | null>(null);
+  const getWrapperEventProps = () => {
+    const triggerProps = props.triggerProps as Record<string, unknown>;
+    const wrapperProps: Record<string, unknown> = {};
+    const eventPropNames = [
+      "onFocus",
+      "onBlur",
+      "onPointerEnter",
+      "onPointerLeave",
+      "onPointerOver",
+      "onPointerOut",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onTouchStart",
+      "onPointerDown",
+      "onKeyDown",
+    ];
+
+    for (const propName of eventPropNames) {
+      const handler = triggerProps[propName];
+      if (typeof handler === "function") {
+        wrapperProps[propName] = handler;
+      }
+    }
+
+    if (!wrapperProps.onPointerEnter && typeof triggerProps.onMouseEnter === "function") {
+      wrapperProps.onPointerEnter = triggerProps.onMouseEnter;
+    }
+    if (!wrapperProps.onPointerLeave && typeof triggerProps.onMouseLeave === "function") {
+      wrapperProps.onPointerLeave = triggerProps.onMouseLeave;
+    }
+
+    return wrapperProps as JSX.HTMLAttributes<HTMLSpanElement>;
+  };
 
   createEffect(() => {
     const element = triggerElement();
@@ -241,7 +275,9 @@ const TriggerWrapper: ParentComponent<{
       element.removeAttribute("aria-describedby");
     }
 
-    const listeners: Array<[string, EventListener]> = [];
+    const wrapper = wrapperElement();
+    const targets = Array.from(new Set([element, wrapper].filter(Boolean))) as HTMLElement[];
+    const listeners: Array<[HTMLElement, string, EventListener]> = [];
     const eventProps = [
       ["onFocus", "focus"],
       ["onBlur", "blur"],
@@ -257,17 +293,24 @@ const TriggerWrapper: ParentComponent<{
     ] as const;
 
     for (const [propName, eventName] of eventProps) {
-      const handler = triggerProps[propName];
+      let handler = triggerProps[propName];
+      if (!handler && propName === "onPointerEnter") {
+        handler = triggerProps.onMouseEnter;
+      } else if (!handler && propName === "onPointerLeave") {
+        handler = triggerProps.onMouseLeave;
+      }
       if (typeof handler === "function") {
         const listener = handler as EventListener;
-        element.addEventListener(eventName, listener);
-        listeners.push([eventName, listener]);
+        for (const target of targets) {
+          target.addEventListener(eventName, listener);
+          listeners.push([target, eventName, listener]);
+        }
       }
     }
 
     onCleanup(() => {
-      for (const [eventName, listener] of listeners) {
-        element.removeEventListener(eventName, listener);
+      for (const [target, eventName, listener] of listeners) {
+        target.removeEventListener(eventName, listener);
       }
       if (describedBy && element.getAttribute("aria-describedby") === describedBy) {
         element.removeAttribute("aria-describedby");
@@ -279,6 +322,8 @@ const TriggerWrapper: ParentComponent<{
   // However, display:contents makes getBoundingClientRect return zeros,
   // so we pass a ref callback that finds the first actual element child.
   const handleRef = (span: HTMLSpanElement) => {
+    setWrapperElement(span);
+
     const findElementChild = (el: Element): HTMLElement | null => {
       for (const child of el.children) {
         if (child instanceof HTMLElement) {
@@ -329,7 +374,7 @@ const TriggerWrapper: ParentComponent<{
   };
 
   return (
-    <span ref={handleRef} style={{ display: "contents" }}>
+    <span {...getWrapperEventProps()} ref={handleRef} style={{ display: "contents" }}>
       {child()}
     </span>
   );

package/src/utils.tsx

@@ -334,13 +334,17 @@ export function useIsHydrated(): Accessor<boolean> {
     return () => false;
   }
 
-  // On client, start false and switch to true after animation frame
-  // This ensures we're past the hydration phase
+  // On client, start false (so the first render matches the server, which
+  // emitted nothing for hydrated-gated content) and flip to true after mount.
   const [isHydrated, setIsHydrated] = createSignal(false);
 
-  // Use requestAnimationFrame to ensure we're past hydration
-  // onMount may not fire during hydration for matching DOM
-  requestAnimationFrame(() => {
+  // onMount runs in the effect phase — *after* the synchronous hydration pass
+  // has finished walking the server DOM — so flipping here renders the gated
+  // content as a fresh client-side update (Portal: no getNextElement walk, no
+  // mismatch), yet fires synchronously under `render()` (unit tests / pure CSR)
+  // where requestAnimationFrame would never run. This mirrors the component
+  // gate above and is strictly earlier than a rAF tick.
+  onMount(() => {
     setIsHydrated(true);
   });