@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/SelectionIndicator.tsx

@@ -2,22 +2,15 @@
  * Shared SelectionIndicator primitive for selected collection items.
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  splitProps,
-  useContext,
-  Show,
-} from 'solid-js';
+import { type JSX, createContext, createMemo, splitProps, useContext, Show } from "solid-js";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
   useRenderProps,
-} from './utils';
-import { SharedElement, useHasSharedElementTransitionScope } from './SharedElementTransition';
+} from "./utils";
+import { SharedElement, useHasSharedElementTransitionScope } from "./SharedElementTransition";
 
 export interface SelectionIndicatorContextValue {
   isSelected: () => boolean;
@@ -30,7 +23,8 @@ export interface SelectionIndicatorRenderProps {
   isSelected: boolean;
 }
 
-export interface SelectionIndicatorProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLSpanElement>, 'class' | 'style' | 'children'> {
+export interface SelectionIndicatorProps
+  extends SlotProps, Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class" | "style" | "children"> {
   /** Optional controlled selected state override. */
   isSelected?: boolean;
   /** Whether to keep mounted when not selected. */
@@ -47,7 +41,14 @@ export interface SelectionIndicatorProps extends SlotProps, Omit<JSX.HTMLAttribu
  * SelectionIndicator renders when its parent item is selected.
  */
 export function SelectionIndicator(props: SelectionIndicatorProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ['isSelected', 'shouldForceMount', 'children', 'class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, [
+    "isSelected",
+    "shouldForceMount",
+    "children",
+    "class",
+    "style",
+    "slot",
+  ]);
 
   const context = useContext(SelectionIndicatorContext);
   const hasSharedElementScope = useHasSharedElementTransitionScope();
@@ -63,13 +64,15 @@ export function SelectionIndicator(props: SelectionIndicatorProps): JSX.Element
       children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-SelectionIndicator',
+      defaultClassName: "solidaria-SelectionIndicator",
     },
-    renderValues
+    renderValues,
   );
 
   const sharedElementProps = createMemo(() => {
-    const { ref: _ref, ...rest } = domProps as JSX.HTMLAttributes<HTMLSpanElement> & { ref?: unknown };
+    const { ref: _ref, ...rest } = domProps as JSX.HTMLAttributes<HTMLSpanElement> & {
+      ref?: unknown;
+    };
     return rest;
   });
 

package/src/Separator.tsx

@@ -5,51 +5,42 @@
  * Port of react-aria-components/src/Separator.tsx
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  splitProps,
-} from 'solid-js';
-import { Dynamic } from 'solid-js/web';
+import { type JSX, createContext, createMemo, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import {
   createSeparator,
   type AriaSeparatorProps,
   type Orientation,
-} from '@proyecto-viviana/solidaria';
-import {
-  type SlotProps,
-  filterDOMProps,
-} from './utils';
+} from "@proyecto-viviana/solidaria";
+import { type SlotProps, filterDOMProps } from "./utils";
+
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
 
-// ============================================
-// TYPES
-// ============================================
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
 
 export interface SeparatorRenderProps {
   /** The orientation of the separator. */
   orientation: Orientation;
 }
 
-export interface SeparatorProps
-  extends AriaSeparatorProps,
-    SlotProps {
+export interface SeparatorProps extends AriaSeparatorProps, SlotProps {
   /** The CSS className for the element. A function may be provided to receive render props. */
   class?: string | ((renderProps: SeparatorRenderProps) => string);
   /** The inline style for the element. A function may be provided to receive render props. */
   style?: JSX.CSSProperties | ((renderProps: SeparatorRenderProps) => JSX.CSSProperties);
+  /** Ref for the underlying separator element. */
+  ref?: RefLike<HTMLElement>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export const SeparatorContext = createContext<SeparatorProps | null>(null);
 
-// ============================================
-// SEPARATOR COMPONENT
-// ============================================
-
 /**
  * A separator is a visual divider between two groups of content,
  * e.g. groups of menu items or sections of a page.
@@ -66,55 +57,61 @@ export const SeparatorContext = createContext<SeparatorProps | null>(null);
  * ```
  */
 export function Separator(props: SeparatorProps): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-  ]);
+  const [local, ariaProps] = splitProps(props, ["class", "style", "ref", "slot"]);
 
-  // Determine the element type
   const elementType = createMemo(() => {
-    let element = ariaProps.elementType || 'hr';
+    let element = ariaProps.elementType || "hr";
     // If vertical and using hr, switch to div since hr is inherently horizontal
-    if (element === 'hr' && ariaProps.orientation === 'vertical') {
-      element = 'div';
+    if (element === "hr" && ariaProps.orientation === "vertical") {
+      element = "div";
     }
     return element;
   });
 
-  // Create separator aria props
   const separatorAria = createSeparator({
-    get orientation() { return ariaProps.orientation; },
-    get elementType() { return elementType(); },
-    get 'aria-label'() { return ariaProps['aria-label']; },
-    get 'aria-labelledby'() { return ariaProps['aria-labelledby']; },
-    get id() { return ariaProps.id; },
+    get orientation() {
+      return ariaProps.orientation;
+    },
+    get elementType() {
+      return ariaProps.elementType;
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"];
+    },
+    get "aria-describedby"() {
+      return ariaProps["aria-describedby"];
+    },
+    get "aria-details"() {
+      return ariaProps["aria-details"];
+    },
+    get id() {
+      return ariaProps.id;
+    },
   });
 
-  // Render props values
   const renderValues = createMemo<SeparatorRenderProps>(() => ({
-    orientation: ariaProps.orientation ?? 'horizontal',
+    orientation: ariaProps.orientation ?? "horizontal",
   }));
 
-  // Resolve class
   const resolvedClass = createMemo(() => {
     const cls = local.class;
-    if (typeof cls === 'function') {
+    if (typeof cls === "function") {
       return cls(renderValues());
     }
-    return cls ?? 'solidaria-Separator';
+    return cls ?? "solidaria-Separator";
   });
 
-  // Resolve style
   const resolvedStyle = createMemo(() => {
     const style = local.style;
-    if (typeof style === 'function') {
+    if (typeof style === "function") {
       return style(renderValues());
     }
     return style;
   });
 
-  // Filter DOM props
   const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
 
   return (
@@ -122,6 +119,7 @@ export function Separator(props: SeparatorProps): JSX.Element {
       component={elementType()}
       {...domProps()}
       {...separatorAria.separatorProps}
+      ref={(el: HTMLElement) => assignRef(local.ref, el)}
       class={resolvedClass()}
       style={resolvedStyle()}
       slot={local.slot}

package/src/SharedElementTransition.tsx

@@ -19,20 +19,20 @@ import {
   useContext,
   Show,
   on,
-} from 'solid-js';
+} from "solid-js";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type RenderChildren,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
 
-type SharedElementLifecycle = 'hidden' | 'entering' | 'visible' | 'exiting';
+type SharedElementLifecycle = "hidden" | "entering" | "visible" | "exiting";
 
 /** Safe wrapper — jsdom doesn't implement the Web Animations API. */
 function getAnimations(el: HTMLElement): Animation[] {
-  return typeof el.getAnimations === 'function' ? el.getAnimations() : [];
+  return typeof el.getAnimations === "function" ? el.getAnimations() : [];
 }
 
 interface Snapshot {
@@ -63,9 +63,7 @@ export function SharedElementTransition(props: SharedElementTransitionProps): JS
   };
 
   return (
-    <SharedElementContext.Provider value={scope}>
-      {props.children}
-    </SharedElementContext.Provider>
+    <SharedElementContext.Provider value={scope}>{props.children}</SharedElementContext.Provider>
   );
 }
 
@@ -74,8 +72,10 @@ export interface SharedElementRenderProps {
   isExiting: boolean;
 }
 
-export interface SharedElementPropsBase
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'> {
+export interface SharedElementPropsBase extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children" | "class" | "style" | "ref"
+> {
   children?: RenderChildren<SharedElementRenderProps>;
   class?: ClassNameOrFunction<SharedElementRenderProps>;
   style?: StyleOrFunction<SharedElementRenderProps>;
@@ -84,7 +84,7 @@ export interface SharedElementPropsBase
 export interface SharedElementProps extends SharedElementPropsBase {
   name: string;
   isVisible?: boolean;
-  ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement };
 }
 
 /**
@@ -94,15 +94,20 @@ export interface SharedElementProps extends SharedElementPropsBase {
 export function SharedElement(props: SharedElementProps): JSX.Element | null {
   const scope = useContext(SharedElementContext);
   if (!scope) {
-    throw new Error('<SharedElement> must be rendered inside a <SharedElementTransition>');
+    throw new Error("<SharedElement> must be rendered inside a <SharedElementTransition>");
   }
 
   const [local, domProps] = splitProps(props, [
-    'name', 'isVisible', 'children', 'class', 'style', 'ref',
+    "name",
+    "isVisible",
+    "children",
+    "class",
+    "style",
+    "ref",
   ]);
 
   const [lifecycle, setLifecycle] = createSignal<SharedElementLifecycle>(
-    local.isVisible === false ? 'hidden' : 'visible'
+    local.isVisible === false ? "hidden" : "visible",
   );
 
   let elementRef: HTMLDivElement | undefined;
@@ -112,99 +117,100 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
     elementRef = el;
     // Forward ref to consumer
     const userRef = local.ref;
-    if (typeof userRef === 'function') {
+    if (typeof userRef === "function") {
       userRef(el);
     } else if (userRef !== undefined) {
-      // Direct assignment for ref={myVar} pattern
-      (local as any).ref = el;
+      userRef.current = el;
     }
   };
 
   // Handle visibility transitions with FLIP animation
-  createEffect(on(
-    () => local.isVisible !== false,
-    (isVisible) => {
-      const name = local.name;
-      const element = elementRef;
+  createEffect(
+    on(
+      () => local.isVisible !== false,
+      (isVisible) => {
+        const name = local.name;
+        const element = elementRef;
 
-      if (frame != null) {
-        cancelAnimationFrame(frame);
-        frame = undefined;
-      }
+        if (frame != null) {
+          cancelAnimationFrame(frame);
+          frame = undefined;
+        }
 
-      if (isVisible && element) {
-        const prevSnapshot = scope.snapshots[name];
+        if (isVisible && element) {
+          const prevSnapshot = scope.snapshots[name];
 
-        if (prevSnapshot) {
-          // FLIP: Element is transitioning from a previous instance.
-          setLifecycle('visible');
-          const animations = getAnimations(element);
+          if (prevSnapshot) {
+            // FLIP: Element is transitioning from a previous instance.
+            setLifecycle("visible");
+            const animations = getAnimations(element);
 
-          // Set properties to animate from.
-          const values = prevSnapshot.style.map(([property, prevValue]) => {
-            const value = (element.style as any)[property];
-            if (property === 'translate') {
-              const prevRect = prevSnapshot.rect;
-              const currentRect = element.getBoundingClientRect();
-              const deltaX = prevRect.left - currentRect.left;
-              const deltaY = prevRect.top - currentRect.top;
-              element.style.translate = `${deltaX}px ${deltaY}px`;
-            } else {
-              (element.style as any)[property] = prevValue;
-            }
-            return [property, value] as [string, string];
-          });
+            // Set properties to animate from.
+            const values = prevSnapshot.style.map(([property, prevValue]) => {
+              const value = element.style.getPropertyValue(property);
+              if (property === "translate") {
+                const prevRect = prevSnapshot.rect;
+                const currentRect = element.getBoundingClientRect();
+                const deltaX = prevRect.left - currentRect.left;
+                const deltaY = prevRect.top - currentRect.top;
+                element.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
+              } else {
+                element.style.setProperty(property, prevValue);
+              }
+              return [property, value] as [string, string];
+            });
 
-          // Cancel any new animations triggered by these properties.
-          for (const a of getAnimations(element)) {
-            if (!animations.includes(a)) {
-              a.cancel();
+            // Cancel any new animations triggered by these properties.
+            for (const a of getAnimations(element)) {
+              if (!animations.includes(a)) {
+                a.cancel();
+              }
             }
-          }
 
-          // Remove overrides after one frame to animate to the current values.
-          frame = requestAnimationFrame(() => {
-            frame = undefined;
-            for (const [property, value] of values) {
-              (element.style as any)[property] = value;
+            // Remove overrides after one frame to animate to the current values.
+            frame = requestAnimationFrame(() => {
+              frame = undefined;
+              for (const [property, value] of values) {
+                element.style.setProperty(property, value);
+              }
+            });
+
+            delete scope.snapshots[name];
+          } else {
+            // No previous instance exists, apply the entering state.
+            queueMicrotask(() => setLifecycle("entering"));
+            frame = requestAnimationFrame(() => {
+              frame = undefined;
+              setLifecycle("visible");
+            });
+          }
+        } else if (!isVisible && element) {
+          // Wait a microtask to check if a snapshot still exists (meaning no new
+          // SharedElement consumed it), then enter exiting state.
+          queueMicrotask(() => {
+            if (scope.snapshots[name]) {
+              delete scope.snapshots[name];
+              setLifecycle("exiting");
+              // Wait for animations to finish before hiding.
+              Promise.all(getAnimations(element).map((a) => a.finished))
+                .then(() => setLifecycle("hidden"))
+                .catch(() => {});
+            } else {
+              // Snapshot was consumed by another instance, unmount immediately.
+              setLifecycle("hidden");
             }
           });
-
-          delete scope.snapshots[name];
-        } else {
-          // No previous instance exists, apply the entering state.
-          queueMicrotask(() => setLifecycle('entering'));
+        } else if (isVisible) {
+          // Element not yet in DOM, entering fresh
+          setLifecycle("entering");
           frame = requestAnimationFrame(() => {
             frame = undefined;
-            setLifecycle('visible');
+            setLifecycle("visible");
           });
         }
-      } else if (!isVisible && element) {
-        // Wait a microtask to check if a snapshot still exists (meaning no new
-        // SharedElement consumed it), then enter exiting state.
-        queueMicrotask(() => {
-          if (scope.snapshots[name]) {
-            delete scope.snapshots[name];
-            setLifecycle('exiting');
-            // Wait for animations to finish before hiding.
-            Promise.all(getAnimations(element).map(a => a.finished))
-              .then(() => setLifecycle('hidden'))
-              .catch(() => {});
-          } else {
-            // Snapshot was consumed by another instance, unmount immediately.
-            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)
   onCleanup(() => {
@@ -213,14 +219,14 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
     }
 
     const element = elementRef;
-    if (element && element.isConnected && !element.hasAttribute('data-exiting')) {
+    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') {
+      if (style.transitionProperty !== "none") {
         const transitionProperty = style.transitionProperty.split(/\s*,\s*/);
         scope.snapshots[local.name] = {
           rect: element.getBoundingClientRect(),
-          style: transitionProperty.map(p => [p, (style as any)[p]]),
+          style: transitionProperty.map((property) => [property, style.getPropertyValue(property)]),
         };
       }
     }
@@ -231,25 +237,25 @@ export function SharedElement(props: SharedElementProps): JSX.Element | null {
       children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-SharedElement',
+      defaultClassName: "solidaria-SharedElement",
     },
     () => ({
-      isEntering: lifecycle() === 'entering',
-      isExiting: lifecycle() === 'exiting',
-    })
+      isEntering: lifecycle() === "entering",
+      isExiting: lifecycle() === "exiting",
+    }),
   );
 
   const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
 
   return (
-    <Show when={lifecycle() !== 'hidden'}>
+    <Show when={lifecycle() !== "hidden"}>
       <div
         ref={setRef}
         {...filteredDomProps()}
         class={renderProps.class()}
         style={renderProps.style()}
-        data-entering={lifecycle() === 'entering' || undefined}
-        data-exiting={lifecycle() === 'exiting' || undefined}
+        data-entering={lifecycle() === "entering" || undefined}
+        data-exiting={lifecycle() === "exiting" || undefined}
       >
         {renderProps.renderChildren()}
       </div>