@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/SharedElementTransition.tsx

@@ -0,0 +1,258 @@
+/**
+ * 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'> {
+  children?: RenderChildren<SharedElementRenderProps>;
+  class?: ClassNameOrFunction<SharedElementRenderProps>;
+  style?: StyleOrFunction<SharedElementRenderProps>;
+}
+
+export interface SharedElementProps extends SharedElementPropsBase {
+  name: string;
+  isVisible?: boolean;
+  ref?: HTMLDivElement | ((el: HTMLDivElement) => void);
+}
+
+/**
+ * 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) {
+      // Direct assignment for ref={myVar} pattern
+      (local as any).ref = 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 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];
+          });
+
+          // 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;
+            }
+          });
+
+          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(p => [p, (style as any)[p]]),
+        };
+      }
+    }
+  });
+
+  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>
+  );
+}

package/src/Slider.tsx

@@ -94,7 +94,7 @@ export interface SliderTrackRenderProps {
   orientation: SliderOrientation;
 }
 
-export interface SliderTrackProps extends SlotProps {
+export interface SliderTrackProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children'> {
   /** The children of the track. */
   children?: RenderChildren<SliderTrackRenderProps>;
   /** The CSS className for the element. */
@@ -120,7 +120,7 @@ export interface SliderThumbRenderProps {
   valuePercent: number;
 }
 
-export interface SliderThumbProps extends SlotProps {
+export interface SliderThumbProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children'> {
   /** The children of the thumb. */
   children?: RenderChildren<SliderThumbRenderProps>;
   /** The CSS className for the element. */
@@ -136,7 +136,7 @@ export interface SliderOutputRenderProps {
   formattedValue: string;
 }
 
-export interface SliderOutputProps extends SlotProps {
+export interface SliderOutputProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLElement>, 'class' | 'style' | 'children'> {
   /** The children of the output. */
   children?: RenderChildren<SliderOutputRenderProps>;
   /** The CSS className for the element. */
@@ -160,6 +160,9 @@ interface SliderContextValue {
 }
 
 export const SliderContext = createContext<SliderContextValue | null>(null);
+export const SliderStateContext = SliderContext;
+export const SliderTrackContext = SliderContext;
+export const SliderOutputContext = SliderContext;
 
 // ============================================
 // COMPONENTS
@@ -298,7 +301,7 @@ export function Slider(props: SliderProps): JSX.Element {
  * The track element of a slider.
  */
 export function SliderTrack(props: SliderTrackProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   const context = useContext(SliderContext);
   if (!context) {
@@ -341,6 +344,7 @@ export function SliderTrack(props: SliderTrackProps): JSX.Element {
 
   return (
     <div
+      {...domProps}
       ref={setTrackRef}
       {...cleanTrackProps()}
       class={renderProps.class()}
@@ -358,7 +362,7 @@ export function SliderTrack(props: SliderTrackProps): JSX.Element {
  * The thumb element of a slider.
  */
 export function SliderThumb(props: SliderThumbProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   const context = useContext(SliderContext);
   if (!context) {
@@ -422,6 +426,7 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
 
   return (
     <div
+      {...domProps}
       {...cleanThumbProps()}
       {...cleanFocusProps()}
       {...cleanHoverProps()}
@@ -442,7 +447,7 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
  * The output element of a slider, displaying the current value.
  */
 export function SliderOutput(props: SliderOutputProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   const context = useContext(SliderContext);
   if (!context) {
@@ -469,6 +474,10 @@ export function SliderOutput(props: SliderOutputProps): JSX.Element {
   );
 
   // Clean props
+  const cleanDomProps = () => {
+    const { ref: _ref, ...rest } = domProps as Record<string, unknown>;
+    return rest;
+  };
   const cleanOutputProps = () => {
     const { ref: _ref, ...rest } = outputProps as Record<string, unknown>;
     return rest;
@@ -485,6 +494,7 @@ export function SliderOutput(props: SliderOutputProps): JSX.Element {
 
   return (
     <output
+      {...cleanDomProps()}
       {...cleanOutputProps()}
       class={renderProps.class()}
       style={renderProps.style()}