@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

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,41 +275,24 @@ 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(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SharedElement",

package/src/Slider.tsx

@@ -12,6 +12,7 @@ import {
   createHover,
   mergeProps,
   type AriaSliderProps,
+  type HoverEvents,
 } from "@proyecto-viviana/solidaria";
 import {
   createSliderState,
@@ -124,6 +125,32 @@ export interface SliderThumbProps
   style?: StyleOrFunction<SliderThumbRenderProps>;
 }
 
+export interface SliderFillRenderProps {
+  /** Whether the slider is disabled. */
+  isDisabled: boolean;
+  /** Whether the slider fill is currently hovered with a mouse. */
+  isHovered: boolean;
+  /** The value as a percent (0-1). */
+  valuePercent: number;
+  /** The orientation. */
+  orientation: SliderOrientation;
+}
+
+export interface SliderFillProps
+  extends
+    SlotProps,
+    HoverEvents,
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
+  /** The offset from which to start the fill. Defaults to the slider's minValue. */
+  offset?: number;
+  /** The children of the fill. */
+  children?: RenderChildren<SliderFillRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<SliderFillRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<SliderFillRenderProps>;
+}
+
 export interface SliderOutputRenderProps {
   /** The current value. */
   value: number;
@@ -156,6 +183,7 @@ interface SliderContextValue {
 export const SliderContext = createContext<SliderContextValue | null>(null);
 export const SliderStateContext = SliderContext;
 export const SliderTrackContext = SliderContext;
+export const SliderFillContext = SliderContext;
 export const SliderOutputContext = SliderContext;
 
 /**
@@ -252,7 +280,9 @@ export function Slider(props: SliderProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider",
@@ -363,7 +393,9 @@ export function SliderTrack(props: SliderTrackProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider-track",
@@ -431,7 +463,9 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider-thumb",
@@ -467,22 +501,131 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
       cleanFocusProps() as Record<string, unknown>,
     ) as JSX.InputHTMLAttributes<HTMLInputElement>;
 
+  return (
+    <>
+      <VisuallyHidden>
+        <input ref={setInputRef} {...mergedInputProps()} />
+      </VisuallyHidden>
+      <div
+        {...domProps}
+        {...cleanThumbProps()}
+        {...cleanHoverProps()}
+        class={renderProps.class()}
+        style={mergedStyle()}
+        data-disabled={state.isDisabled || undefined}
+        data-dragging={state.isDragging() || undefined}
+        data-focused={isFocused() || state.isFocused() || undefined}
+        data-focus-visible={isFocusVisible() || undefined}
+        data-hovered={isHovered() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    </>
+  );
+}
+
+/** Clamp a value between min and max (mirror of upstream's number/clamp). */
+function clampFill(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * The fill element of a slider, displaying the selected range.
+ *
+ * Port of react-aria-components `SliderFill` (RAC 1.18). Upstream reads the
+ * array-based `SliderState` (`values`/`getThumbPercent`); our `SliderState` is
+ * single-value, so this fills from `offset` (default the slider's minValue, i.e.
+ * 0%) to the current value — the single-thumb branch of upstream's math, using
+ * the same `(v - min) / (max - min)` percent formula the state itself uses.
+ */
+export function SliderFill(props: SliderFillProps): JSX.Element {
+  const [local, domProps] = splitProps(props, [
+    "class",
+    "style",
+    "slot",
+    "offset",
+    "children",
+    "onHoverStart",
+    "onHoverEnd",
+    "onHoverChange",
+  ]);
+
+  const context = useContext(SliderContext);
+  if (!context) {
+    throw new Error("SliderFill must be used within a Slider");
+  }
+
+  const { state } = context;
+
+  const { isHovered, hoverProps } = createHover(() => ({
+    onHoverStart: local.onHoverStart,
+    onHoverEnd: local.onHoverEnd,
+    onHoverChange: local.onHoverChange,
+  }));
+
+  // Percent (0-100) of an arbitrary value within the track — mirrors
+  // SliderState.getValuePercent's formula for a value other than the current one.
+  const percentOf = (value: number) => {
+    const range = state.maxValue - state.minValue;
+    return range === 0 ? 0 : ((value - state.minValue) / range) * 100;
+  };
+
+  const offset = () =>
+    local.offset != null ? clampFill(local.offset, state.minValue, state.maxValue) : state.minValue;
+  const start = () => percentOf(offset());
+  const end = () => state.getValuePercent() * 100;
+  const startPercent = () => Math.min(start(), end());
+  const sizePercent = () => Math.max(0, Math.max(start(), end()) - startPercent());
+
+  const renderValues = createMemo<SliderFillRenderProps>(() => ({
+    isDisabled: state.isDisabled,
+    isHovered: isHovered(),
+    valuePercent: state.getValuePercent(),
+    orientation: state.orientation,
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      get children() {
+        return props.children;
+      },
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-Slider-fill",
+    },
+    renderValues,
+  );
+
+  // useRenderProps has no defaultStyle; merge the positioning style with the
+  // user's, mirroring upstream SliderFill's defaultStyle (and SliderTrack here).
+  const mergedStyle = (): JSX.CSSProperties => {
+    const fillStyle: JSX.CSSProperties =
+      state.orientation === "vertical"
+        ? {
+            position: "absolute",
+            bottom: `${startPercent()}%`,
+            height: `${sizePercent()}%`,
+            width: "100%",
+          }
+        : {
+            position: "absolute",
+            "inset-inline-start": `${startPercent()}%`,
+            width: `${sizePercent()}%`,
+            height: "100%",
+          };
+    return { ...fillStyle, ...(renderProps.style() || {}) };
+  };
+
   return (
     <div
       {...domProps}
-      {...cleanThumbProps()}
-      {...cleanHoverProps()}
+      {...hoverProps}
       class={renderProps.class()}
       style={mergedStyle()}
-      data-disabled={state.isDisabled || undefined}
-      data-dragging={state.isDragging() || undefined}
-      data-focused={isFocused() || state.isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
       data-hovered={isHovered() || undefined}
+      data-disabled={state.isDisabled || undefined}
+      data-orientation={state.orientation}
     >
-      <VisuallyHidden>
-        <input ref={setInputRef} {...mergedInputProps()} />
-      </VisuallyHidden>
       {renderProps.renderChildren()}
     </div>
   );
@@ -508,7 +651,9 @@ export function SliderOutput(props: SliderOutputProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Slider-output",
@@ -547,4 +692,5 @@ export function SliderOutput(props: SliderOutputProps): JSX.Element {
 
 Slider.Track = SliderTrack;
 Slider.Thumb = SliderThumb;
+Slider.Fill = SliderFill;
 Slider.Output = SliderOutput;

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>