@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/SelectionIndicator.tsx

@@ -0,0 +1,108 @@
+/**
+ * Shared SelectionIndicator primitive for selected collection items.
+ */
+
+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";
+
+export interface SelectionIndicatorContextValue {
+  isSelected: () => boolean;
+}
+
+export const SelectionIndicatorContext = createContext<SelectionIndicatorContextValue | null>(null);
+
+export interface SelectionIndicatorRenderProps {
+  /** Whether the parent item is selected. */
+  isSelected: boolean;
+}
+
+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. */
+  shouldForceMount?: boolean;
+  /** The children content. */
+  children?: RenderChildren<SelectionIndicatorRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<SelectionIndicatorRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<SelectionIndicatorRenderProps>;
+}
+
+/**
+ * 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 context = useContext(SelectionIndicatorContext);
+  const hasSharedElementScope = useHasSharedElementTransitionScope();
+  const isSelected = () => local.isSelected ?? context?.isSelected() ?? false;
+  const isVisible = () => local.shouldForceMount || isSelected();
+
+  const renderValues = createMemo<SelectionIndicatorRenderProps>(() => ({
+    isSelected: isSelected(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-SelectionIndicator",
+    },
+    renderValues,
+  );
+
+  const sharedElementProps = createMemo(() => {
+    const { ref: _ref, ...rest } = domProps as JSX.HTMLAttributes<HTMLSpanElement> & {
+      ref?: unknown;
+    };
+    return rest;
+  });
+
+  if (hasSharedElementScope) {
+    return (
+      <SharedElement
+        {...sharedElementProps()}
+        name="SelectionIndicator"
+        isVisible={isVisible()}
+        aria-hidden="true"
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-selected={isSelected() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </SharedElement>
+    );
+  }
+
+  return (
+    <Show when={isVisible()}>
+      <span
+        {...domProps}
+        aria-hidden="true"
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-selected={isSelected() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </span>
+    </Show>
+  );
+}

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

@@ -0,0 +1,264 @@
+/**
+ * SharedElementTransition primitives for solidaria-components.
+ *
+ * Provides FLIP-based shared element animations when elements move between
+ * parents within a scope. Captures geometry snapshots on unmount and applies
+ * transition animations on mount.
+ *
+ * Parity target: react-aria-components/src/SharedElementTransition.tsx
+ */
+
+import {
+  type JSX,
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  splitProps,
+  useContext,
+  Show,
+  on,
+} from "solid-js";
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  useRenderProps,
+  filterDOMProps,
+} from "./utils";
+
+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() : [];
+}
+
+interface Snapshot {
+  rect: DOMRect;
+  style: [string, string][];
+}
+
+interface SharedElementScope {
+  snapshots: { [name: string]: Snapshot };
+}
+
+const SharedElementContext = createContext<SharedElementScope | null>(null);
+
+export function useHasSharedElementTransitionScope(): boolean {
+  return useContext(SharedElementContext) != null;
+}
+
+export interface SharedElementTransitionProps {
+  children?: JSX.Element;
+}
+
+/**
+ * A scope for SharedElements, which animate between parents.
+ */
+export function SharedElementTransition(props: SharedElementTransitionProps): JSX.Element {
+  const scope: SharedElementScope = {
+    snapshots: {},
+  };
+
+  return (
+    <SharedElementContext.Provider value={scope}>{props.children}</SharedElementContext.Provider>
+  );
+}
+
+export interface SharedElementRenderProps {
+  isEntering: boolean;
+  isExiting: boolean;
+}
+
+export interface SharedElementPropsBase extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children" | "class" | "style" | "ref"
+> {
+  children?: RenderChildren<SharedElementRenderProps>;
+  class?: ClassNameOrFunction<SharedElementRenderProps>;
+  style?: StyleOrFunction<SharedElementRenderProps>;
+}
+
+export interface SharedElementProps extends SharedElementPropsBase {
+  name: string;
+  isVisible?: boolean;
+  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement };
+}
+
+/**
+ * An element that animates between its old and new position when moving
+ * between parents within a SharedElementTransition scope.
+ */
+export function SharedElement(props: SharedElementProps): JSX.Element | null {
+  const scope = useContext(SharedElementContext);
+  if (!scope) {
+    throw new Error("<SharedElement> must be rendered inside a <SharedElementTransition>");
+  }
+
+  const [local, domProps] = splitProps(props, [
+    "name",
+    "isVisible",
+    "children",
+    "class",
+    "style",
+    "ref",
+  ]);
+
+  const [lifecycle, setLifecycle] = createSignal<SharedElementLifecycle>(
+    local.isVisible === false ? "hidden" : "visible",
+  );
+
+  let elementRef: HTMLDivElement | undefined;
+  let frame: number | undefined;
+
+  const setRef = (el: HTMLDivElement) => {
+    elementRef = el;
+    // Forward ref to consumer
+    const userRef = local.ref;
+    if (typeof userRef === "function") {
+      userRef(el);
+    } else if (userRef !== undefined) {
+      userRef.current = el;
+    }
+  };
+
+  // Handle visibility transitions with FLIP animation
+  createEffect(
+    on(
+      () => local.isVisible !== false,
+      (isVisible) => {
+        const name = local.name;
+        const element = elementRef;
+
+        if (frame != null) {
+          cancelAnimationFrame(frame);
+          frame = undefined;
+        }
+
+        if (isVisible && element) {
+          const prevSnapshot = scope.snapshots[name];
+
+          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.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();
+              }
+            }
+
+            // 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");
+            }
+          });
+        } else if (isVisible) {
+          // Element not yet in DOM, entering fresh
+          setLifecycle("entering");
+          frame = requestAnimationFrame(() => {
+            frame = undefined;
+            setLifecycle("visible");
+          });
+        }
+      },
+    ),
+  );
+
+  // Capture snapshot on cleanup (unmount)
+  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,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-SharedElement",
+    },
+    () => ({
+      isEntering: lifecycle() === "entering",
+      isExiting: lifecycle() === "exiting",
+    }),
+  );
+
+  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+
+  return (
+    <Show when={lifecycle() !== "hidden"}>
+      <div
+        ref={setRef}
+        {...filteredDomProps()}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-entering={lifecycle() === "entering" || undefined}
+        data-exiting={lifecycle() === "exiting" || undefined}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    </Show>
+  );
+}