@proyecto-viviana/solidaria-components 0.4.0 → 0.5.0

package/src/SharedElementTransition.tsx

@@ -13,9 +13,11 @@ import {
   createContext,
   createEffect,
   createMemo,
+  createRenderEffect,
   createSignal,
   onCleanup,
   splitProps,
+  untrack,
   useContext,
   Show,
   on,
@@ -110,11 +112,16 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
     local.isVisible === false ? "hidden" : "visible",
   );
 
-  let elementRef: HTMLDivElement | undefined;
+  // The mounted div, tracked as a signal so the FLIP-read effect below REACTS to
+  // it appearing. React guarantees `ref.current` is committed before the layout
+  // effect body runs; Solid gives no such ordering between the `<Show>`'s
+  // insertion render-effect and a plain createEffect, so we make the read depend
+  // on the element instead of racing its mount (see READ PHASE).
+  const [element, setElement] = createSignal<HTMLDivElement | undefined>();
   let frame: number | undefined;
 
   const setRef = (el: HTMLDivElement) => {
-    elementRef = el;
+    setElement(el);
     // Forward ref to consumer
     const userRef = local.ref;
     if (typeof userRef === "function") {
@@ -124,44 +131,112 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
     }
   };
 
-  // Handle visibility transitions with FLIP animation
-  createEffect(
+  // Store a geometry + transition-style snapshot of the currently-mounted
+  // element, so a sibling SharedElement with the same `name` can FLIP from it.
+  // Mirrors upstream's layout-effect *cleanup*
+  // (react-aria-components/src/SharedElementTransition.tsx), which runs for
+  // every `isVisible` flip — not only on unmount.
+  const storeSnapshot = () => {
+    const el = untrack(element);
+    if (el && el.isConnected && !el.hasAttribute("data-exiting")) {
+      // Store a snapshot of the rectangle and computed style for transitioning properties.
+      const style = window.getComputedStyle(el);
+      if (style.transitionProperty !== "none") {
+        const transitionProperty = style.transitionProperty.split(/\s*,\s*/);
+        scope.snapshots[local.name] = {
+          rect: el.getBoundingClientRect(),
+          style: transitionProperty.map((property) => [property, style.getPropertyValue(property)]),
+        };
+      }
+    }
+  };
+
+  // MOUNT-IN-RENDER — mirrors upstream's render-phase
+  // `if (isVisible && state === 'hidden') setState('visible')`. Promoting a
+  // hidden element to visible in the render phase mounts its div (via the
+  // `<Show>` below) BEFORE the FLIP-read createEffect runs, so the incoming
+  // element is in the DOM to be measured and translated. Without this the
+  // incoming element's ref is still null when the read effect fires and it can
+  // only enter fresh — never FLIP. Keyed on `isVisible` (untracked lifecycle
+  // read) so it cannot loop.
+  createRenderEffect(
+    on(
+      () => local.isVisible !== false,
+      (isVisible) => {
+        if (isVisible && untrack(lifecycle) === "hidden") {
+          setLifecycle("visible");
+        }
+      },
+    ),
+  );
+
+  // STORE PHASE — a render effect runs before user effects within a Solid
+  // batch, exactly as React runs all layout-effect destroys before any create.
+  // The cleanup registered here fires on the *next* `isVisible` change (and on
+  // disposal), capturing the outgoing snapshot BEFORE any sibling's FLIP-read
+  // createEffect below runs — React's two-phase commit. Only the cleanup
+  // registered while VISIBLE stores (an outgoing element); an incoming
+  // element's prior cleanup was registered while hidden and must not clobber
+  // the outgoing snapshot. This mirrors React closing over `element =
+  // ref.current`, which is null while hidden.
+  createRenderEffect(
     on(
       () => local.isVisible !== false,
       (isVisible) => {
+        onCleanup(() => {
+          if (isVisible) {
+            storeSnapshot();
+          }
+        });
+      },
+    ),
+  );
+
+  // READ PHASE — mirrors upstream's layout-effect body, which reads the freshly
+  // committed `ref.current`. Keying on the `element` signal (not just isVisible)
+  // makes this run only once the incoming div is actually mounted: when isVisible
+  // flips true the mount-in-render effect above mounts the div, `setRef` sets the
+  // signal, and this effect runs with `el` present — never against a null ref.
+  // (Solid batches, so an isVisible flip + the resulting mount coalesce into one
+  // run with the mounted element.) There is therefore no "element not yet in DOM"
+  // fresh-enter branch: with no committed div there is nothing to measure, so we
+  // wait — exactly as React never runs the body before commit.
+  createEffect(
+    on(
+      [() => local.isVisible !== false, element] as const,
+      ([isVisible, el]) => {
         const name = local.name;
-        const element = elementRef;
 
         if (frame != null) {
           cancelAnimationFrame(frame);
           frame = undefined;
         }
 
-        if (isVisible && element) {
+        if (isVisible && el) {
           const prevSnapshot = scope.snapshots[name];
 
           if (prevSnapshot) {
             // FLIP: Element is transitioning from a previous instance.
             setLifecycle("visible");
-            const animations = getAnimations(element);
+            const animations = getAnimations(el);
 
             // Set properties to animate from.
             const values = prevSnapshot.style.map(([property, prevValue]) => {
-              const value = element.style.getPropertyValue(property);
+              const value = el.style.getPropertyValue(property);
               if (property === "translate") {
                 const prevRect = prevSnapshot.rect;
-                const currentRect = element.getBoundingClientRect();
+                const currentRect = el.getBoundingClientRect();
                 const deltaX = prevRect.left - currentRect.left;
                 const deltaY = prevRect.top - currentRect.top;
-                element.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
+                el.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
               } else {
-                element.style.setProperty(property, prevValue);
+                el.style.setProperty(property, prevValue);
               }
               return [property, value] as [string, string];
             });
 
             // Cancel any new animations triggered by these properties.
-            for (const a of getAnimations(element)) {
+            for (const a of getAnimations(el)) {
               if (!animations.includes(a)) {
                 a.cancel();
               }
@@ -171,7 +246,7 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
             frame = requestAnimationFrame(() => {
               frame = undefined;
               for (const [property, value] of values) {
-                element.style.setProperty(property, value);
+                el.style.setProperty(property, value);
               }
             });
 
@@ -184,7 +259,7 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
               setLifecycle("visible");
             });
           }
-        } else if (!isVisible && element) {
+        } else if (!isVisible && el) {
           // Wait a microtask to check if a snapshot still exists (meaning no new
           // SharedElement consumed it), then enter exiting state.
           queueMicrotask(() => {
@@ -192,7 +267,7 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
               delete scope.snapshots[name];
               setLifecycle("exiting");
               // Wait for animations to finish before hiding.
-              Promise.all(getAnimations(element).map((a) => a.finished))
+              Promise.all(getAnimations(el).map((a) => a.finished))
                 .then(() => setLifecycle("hidden"))
                 .catch(() => {});
             } else {
@@ -200,36 +275,17 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
               setLifecycle("hidden");
             }
           });
-        } else if (isVisible) {
-          // Element not yet in DOM, entering fresh
-          setLifecycle("entering");
-          frame = requestAnimationFrame(() => {
-            frame = undefined;
-            setLifecycle("visible");
-          });
         }
       },
     ),
   );
 
-  // Capture snapshot on cleanup (unmount)
+  // Cancel any pending FLIP frame on disposal. The snapshot store lives in the
+  // render-effect cleanup above, which also fires on disposal.
   onCleanup(() => {
     if (frame != null) {
       cancelAnimationFrame(frame);
     }
-
-    const element = elementRef;
-    if (element && element.isConnected && !element.hasAttribute("data-exiting")) {
-      // Store a snapshot of the rectangle and computed style for transitioning properties.
-      const style = window.getComputedStyle(element);
-      if (style.transitionProperty !== "none") {
-        const transitionProperty = style.transitionProperty.split(/\s*,\s*/);
-        scope.snapshots[local.name] = {
-          rect: element.getBoundingClientRect(),
-          style: transitionProperty.map((property) => [property, style.getPropertyValue(property)]),
-        };
-      }
-    }
   });
 
   const renderProps = useRenderProps(

package/src/StepList.tsx

@@ -240,12 +240,6 @@ export function Step(props: StepProps): JSX.Element {
     }
   };
 
-  const stepStateText = () => {
-    if (isSelected()) return "Current";
-    if (isCompleted()) return "Completed";
-    return "Not completed";
-  };
-
   return (
     <li
       {...domProps}
@@ -263,7 +257,6 @@ export function Step(props: StepProps): JSX.Element {
         tabIndex={selectable() ? 0 : undefined}
         onClick={handleClick}
         on:keydown={handleKeyDown}
-        aria-label={`Step ${local.stepNumber}: ${local.item.label}, ${stepStateText()}`}
       >
         {local.children}
       </a>

package/src/Table.tsx

@@ -50,6 +50,7 @@ import {
   type ColumnSize,
   type GridNode,
   type DropTarget,
+  type Collection,
 } from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
@@ -523,6 +524,8 @@ export const TableColumnResizeStateContext = createContext<{
 interface TableRowContextValue {
   rowKey: Key;
   rowNode: GridNode<unknown>;
+  /** The row's resolved disabled state, so a child selection checkbox can gate on it. */
+  isRowDisabled: boolean;
   getCellColumnKey(cellId: string, explicitId?: Key): Key | undefined;
 }
 
@@ -622,7 +625,12 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
   const collection = () => state.collection;
   const parentCollectionRenderer = useCollectionRenderer<T>();
 
-  const { gridProps } = createTable<T>(
+  // Keep the hook's return object (do NOT destructure `gridProps`): the grid's
+  // sort-description `aria-describedby` is emitted via a `createDescription`
+  // effect that resolves its id AFTER the first render, so `gridProps` must be
+  // read reactively through the getter. Destructuring would freeze the initial
+  // (describedby-less) snapshot. Mirrors how columnHeader/row aria is consumed.
+  const tableAria = createTable<T>(
     () => ({
       id: ariaProps.id,
       "aria-label": ariaProps["aria-label"],
@@ -665,7 +673,7 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
   });
 
   const cleanGridProps = () => {
-    const { ref: _ref1, ...rest } = gridProps as Record<string, unknown>;
+    const { ref: _ref1, ...rest } = tableAria.gridProps as Record<string, unknown>;
     return rest;
   };
   const cleanFocusProps = () => {
@@ -757,8 +765,11 @@ export function Table<T extends object>(props: TableProps<T>): JSX.Element {
           getKeyPageBelow: (key) => state.collection.getKeyAfter?.(key) ?? null,
           getKeyPageAbove: (key) => state.collection.getKeyBefore?.(key) ?? null,
         },
+        // TableCollection carries a wider node.type union (GridNode's 'cell'/
+        // 'column') than the narrow Collection option, but is structurally a
+        // valid Collection for navigate()/focus restoration — cast at the seam.
         get collection() {
-          return state.collection;
+          return state.collection as unknown as Collection;
         },
         get selectedKeys() {
           return state.selectedKeys;
@@ -1735,6 +1746,9 @@ export function TableRow<T extends object>(props: TableRowProps<T>): JSX.Element
   const rowContextValue: TableRowContextValue = {
     rowKey: rowKey(),
     rowNode: rowNode(),
+    get isRowDisabled() {
+      return isDisabled();
+    },
     getCellColumnKey(cellId, explicitId) {
       if (explicitId === "__selection__") {
         return explicitId;
@@ -2152,9 +2166,10 @@ export function TableSelectionCheckbox(props: TableSelectionCheckboxProps): JSX.
   }
 
   const { state } = context;
+  const rowContext = useContext(TableRowContext);
 
   const selectionCheckboxAria = createTableSelectionCheckbox<object>(
-    () => ({ key: props.rowKey }),
+    () => ({ key: props.rowKey, isRowDisabled: rowContext?.isRowDisabled }),
     () => state as TableState<object, TableCollection<object>>,
   );
 

package/src/Tabs.tsx

@@ -610,6 +610,7 @@ function TabInner(props: {
         onPointerDown={tabAria.tabProps.onPointerDown}
         onClick={tabAria.tabProps.onClick}
         onFocus={tabAria.tabProps.onFocus}
+        onFocusIn={tabAria.tabProps.onFocusIn}
         onBlur={tabAria.tabProps.onBlur}
         {...hoverProps}
         data-selected={tabAria.isSelected() || undefined}

package/src/TagGroup.tsx

@@ -18,7 +18,12 @@ import {
   For,
   Show,
 } from "solid-js";
-import { createTagGroup, createTag, type AriaTagGroupProps } from "@proyecto-viviana/solidaria";
+import {
+  createTagGroup,
+  createTag,
+  useLocale,
+  type AriaTagGroupProps,
+} from "@proyecto-viviana/solidaria";
 import {
   createListState,
   type ListState,
@@ -31,9 +36,11 @@ import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
+  type RefLike,
   useRenderProps,
   filterDOMProps,
   dataAttr,
+  mergeRefs,
 } from "./utils";
 import { SharedElementTransition } from "./SharedElementTransition";
 import {
@@ -140,6 +147,8 @@ export interface TagProps extends SlotProps {
   class?: ClassNameOrFunction<TagRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<TagRenderProps>;
+  /** A ref to the tag's DOM element (merged with the internal collection ref). */
+  ref?: RefLike<HTMLDivElement>;
   /** Handler called when the tag is activated. */
   onAction?: (key: Key) => void;
 }
@@ -254,6 +263,11 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
     },
   });
 
+  // The tag group navigates on the inline axis, so ArrowLeft/ArrowRight flip
+  // under RTL. Thread the resolved layout direction into the hook (mirrors
+  // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).
+  const locale = useLocale();
+
   // Create tag group accessibility props
   const tagGroupAria = createTagGroup(
     {
@@ -272,6 +286,9 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
       get onRemove() {
         return local.onRemove;
       },
+      get direction() {
+        return locale().direction;
+      },
     },
     state,
     gridRef,
@@ -312,18 +329,20 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
           {...tagGroupAria.gridProps}
           class={renderProps.class()}
           style={renderProps.style()}
-          onFocus={() => {
+          // Track focus-within via the BUBBLING focusin/focusout pair (not the
+          // non-bubbling focus/blur the hook's trampoline uses) so this render-prop
+          // signal never clobbers `gridProps.onFocus` — the container focus
+          // trampoline that marshals entry onto the first/last row.
+          onFocusIn={() => {
             setIsFocused(true);
-            state.setFocused(true);
           }}
-          onBlur={(e) => {
+          onFocusOut={(e) => {
             const nextTarget = e.relatedTarget as Node | null;
             if (nextTarget && e.currentTarget.contains(nextTarget)) {
               return;
             }
 
             setIsFocused(false);
-            state.setFocused(false);
           }}
           data-empty={dataAttr(local.items.length === 0)}
           data-focused={dataAttr(isFocused())}
@@ -351,6 +370,7 @@ export function Tag(props: TagProps): JSX.Element {
     "isDisabled",
     "textValue",
     "onAction",
+    "ref",
   ]);
 
   const state = useContext(TagListStateContext);
@@ -433,7 +453,7 @@ export function Tag(props: TagProps): JSX.Element {
         }}
       >
         <div
-          ref={setTagRef}
+          ref={mergeRefs(setTagRef, local.ref)}
           {...domProps()}
           {...tagAria.rowProps}
           class={renderProps.class()}

package/src/Text.tsx

@@ -1,5 +1,5 @@
 import { type JSX, createContext, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from "./utils";
 
 export interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {
@@ -28,12 +28,13 @@ export function Text(props: TextProps): JSX.Element {
   // are rendered explicitly; everything else (notably the slotted `id`) is spread.
   const [local, domProps] = splitProps(merged, ["elementType", "class", "children", "slot", "ref"]);
   return (
-    <Dynamic
-      component={local.elementType ?? "span"}
+    <ElementTag
       class={local.class ?? "solidaria-Text"}
       {...filterDOMProps(domProps, { global: true })}
+      // last, so a stray `tag` in the spread can never redirect the element
+      tag={local.elementType ?? "span"}
     >
       {local.children}
-    </Dynamic>
+    </ElementTag>
   );
 }

package/src/TextField.tsx

@@ -531,7 +531,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
   };
 
   const domProps = createMemo(() => {
-    const filtered = filterDOMProps(ariaProps, { global: true });
+    const filtered = filterDOMProps(ariaProps, { global: true, events: false });
     delete (filtered as Record<string, unknown>).id;
     return filtered;
   });