@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/useDragAndDrop.ts

@@ -0,0 +1,351 @@
+/**
+ * Drag and drop compatibility hook for collection components.
+ *
+ * Mirrors RAC's `useDragAndDrop` shape while delegating to Solid
+ * state and aria primitives.
+ */
+
+import type { Accessor, JSX } from 'solid-js';
+import { DragPreview } from './DragPreview';
+import { ListDropTargetDelegate } from './ListDropTargetDelegate';
+import {
+  createDraggableCollection,
+  createDraggableItem,
+  createDroppableCollection,
+  createDroppableItem,
+  getGlobalDraggingCollectionRef,
+  getGlobalDraggingKeys,
+  type DraggableCollectionOptions,
+  type DraggableCollectionAria,
+  type DraggableItemOptions,
+  type DraggableItemAria,
+  type DroppableCollectionOptions,
+  type DroppableCollectionAria,
+  type DroppableItemOptions,
+  type DroppableItemAria,
+  type DropTargetDelegate as AriaDropTargetDelegate,
+} from '@proyecto-viviana/solidaria';
+import {
+  createDraggableCollectionState,
+  createDroppableCollectionState,
+  type DragItem,
+  type DragPreviewRenderer,
+  type DraggableCollectionProps,
+  type DraggableCollectionState,
+  type DraggableCollectionStateOptions,
+  type DropTarget,
+  type DroppableCollectionProps,
+  type DroppableCollectionState,
+  type DroppableCollectionStateOptions,
+} from '@proyecto-viviana/solid-stately';
+
+interface DraggableCollectionStateOpts<T = object>
+  extends Omit<DraggableCollectionStateOptions<T>, 'getItems'> {
+  items?: T[];
+}
+
+interface DragHooks<T = object> {
+  useDraggableCollectionState?: (props: DraggableCollectionStateOpts<T>) => DraggableCollectionState;
+  useDraggableCollection?: (
+    props: Omit<DraggableCollectionOptions, 'ref'>,
+    state: DraggableCollectionState,
+    ref: Accessor<HTMLElement | null>
+  ) => DraggableCollectionAria;
+  useDraggableItem?: (props: DraggableItemOptions, state: DraggableCollectionState) => DraggableItemAria;
+  DragPreview?: typeof DragPreview;
+  renderDragPreview?: DragAndDropOptions<T>['renderDragPreview'];
+  isVirtualDragging?: () => boolean;
+}
+
+interface DropHooks {
+  useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState;
+  useDroppableCollection?: (
+    props: Omit<DroppableCollectionOptions, 'ref'>,
+    state: DroppableCollectionState,
+    ref: Accessor<HTMLElement | null>
+  ) => DroppableCollectionAria;
+  useDroppableItem?: (
+    options: Omit<DroppableItemOptions, 'ref'>,
+    state: DroppableCollectionState,
+    ref: Accessor<HTMLElement | null>
+  ) => DroppableItemAria;
+  useDropIndicator?: (
+    props: { target: DropTarget },
+    state: DroppableCollectionState,
+    ref: Accessor<HTMLElement | null>
+  ) => {
+    dropIndicatorProps: JSX.HTMLAttributes<HTMLElement>;
+    isDropTarget: boolean;
+    isHidden: boolean;
+  };
+  renderDropIndicator?: (target: DropTarget) => JSX.Element;
+  dropTargetDelegate?: AriaDropTargetDelegate;
+  ListDropTargetDelegate?: typeof ListDropTargetDelegate;
+}
+
+export type DragAndDropHooks<T = object> = DragHooks<T> & DropHooks;
+
+export interface DragAndDrop<T = object> {
+  /** Drag and drop hooks for the collection element. */
+  dragAndDropHooks: DragAndDropHooks<T>;
+}
+
+export interface DragAndDropOptions<T = object>
+  extends Partial<Omit<DraggableCollectionProps<T>, 'preview'>>,
+    Partial<DroppableCollectionProps> {
+  /**
+   * Optional keyboard delegate forwarded to the collection droppable hook.
+   */
+  keyboardDelegate?: DroppableCollectionOptions['keyboardDelegate'];
+  /**
+   * Optional keydown handler composed with collection droppable keyboard behavior.
+   */
+  onKeyDown?: DroppableCollectionOptions['onKeyDown'];
+  /**
+   * A function that returns the items being dragged.
+   * If omitted, draggable hooks are not added.
+   */
+  getItems?: (keys: Set<string | number>, items: T[]) => DragItem[];
+  /**
+   * Optional custom drag preview renderer.
+   */
+  renderDragPreview?: (items: DragItem[]) => JSX.Element | { element: JSX.Element; x: number; y: number };
+  /**
+   * Optional drop indicator renderer for collection components.
+   */
+  renderDropIndicator?: (target: DropTarget) => JSX.Element;
+  /**
+   * Optional custom drop target delegate.
+   */
+  dropTargetDelegate?: AriaDropTargetDelegate;
+  /**
+   * Optional drag preview ref.
+   */
+  preview?: { current: DragPreviewRenderer | null };
+  /**
+   * Optional item snapshot used by draggable state `getItems`.
+   */
+  items?: T[];
+  /**
+   * Disable both drag and drop behavior.
+   */
+  isDisabled?: boolean;
+}
+
+/**
+ * Provides hooks to enable drag-and-drop behavior for collection components.
+ */
+export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}): DragAndDrop<T> {
+  const {
+    getItems,
+    onDrop,
+    onInsert,
+    onItemDrop,
+    onReorder,
+    onMove,
+    onRootDrop,
+    renderDragPreview,
+    renderDropIndicator,
+    dropTargetDelegate,
+  } = options;
+
+  const isDraggable = typeof getItems === 'function';
+  const isDroppable = Boolean(onDrop || onInsert || onItemDrop || onReorder || onMove || onRootDrop);
+
+  const hooks: DragAndDropHooks<T> = {};
+  const hasDom = typeof HTMLElement !== 'undefined';
+  const isElementNode = (value: unknown): value is HTMLElement => {
+    if (!value) return false;
+    if (hasDom && value instanceof HTMLElement) return true;
+    return typeof value === 'object' && (value as { nodeType?: number }).nodeType === 1;
+  };
+  const resolvedPreview = options.preview ?? (
+    renderDragPreview
+      ? {
+          current: (items: DragItem[], callback: (node: HTMLElement | null, x?: number, y?: number) => void) => {
+            const rendered = renderDragPreview(items);
+            if (!rendered) {
+              callback(null);
+              return;
+            }
+            if (
+              typeof rendered === 'object' &&
+              rendered !== null &&
+              'element' in rendered
+            ) {
+              const previewValue = rendered as { element: unknown; x?: number; y?: number };
+              callback(isElementNode(previewValue.element) ? previewValue.element : null, previewValue.x, previewValue.y);
+              return;
+            }
+            callback(isElementNode(rendered) ? rendered : null);
+          },
+        }
+      : undefined
+  );
+
+  if (isDraggable && getItems) {
+    hooks.useDraggableCollectionState = (props: DraggableCollectionStateOpts<T>) => {
+      return createDraggableCollectionState<T>(() => ({
+        onDragStart: options.onDragStart ?? props.onDragStart,
+        onDragMove: options.onDragMove ?? props.onDragMove,
+        onDragEnd: options.onDragEnd ?? props.onDragEnd,
+        getAllowedDropOperations: options.getAllowedDropOperations ?? props.getAllowedDropOperations,
+        isDisabled: options.isDisabled ?? props.isDisabled,
+        preview: resolvedPreview ?? props.preview,
+        getItems: (keys) => {
+          const sourceItems = props.items ?? options.items ?? [];
+          return getItems(keys, sourceItems);
+        },
+      }));
+    };
+    hooks.useDraggableCollection = (
+      props: Omit<DraggableCollectionOptions, 'ref'>,
+      state: DraggableCollectionState,
+      ref: Accessor<HTMLElement | null>
+    ) => createDraggableCollection({ ...props, ref }, state);
+    hooks.useDraggableItem = (props, state) => createDraggableItem(() => props, state);
+    hooks.DragPreview = DragPreview;
+    hooks.renderDragPreview = renderDragPreview;
+    hooks.isVirtualDragging = () =>
+      getGlobalDraggingCollectionRef() != null || getGlobalDraggingKeys().size > 0;
+  }
+
+  if (isDroppable) {
+    hooks.useDroppableCollectionState = (props: DroppableCollectionStateOptions) => {
+      return createDroppableCollectionState(() => ({
+        acceptedDragTypes: options.acceptedDragTypes ?? props.acceptedDragTypes,
+        getDropOperation: options.getDropOperation ?? props.getDropOperation,
+        onDropEnter: options.onDropEnter ?? props.onDropEnter,
+        onDropActivate: options.onDropActivate ?? props.onDropActivate,
+        onDropExit: options.onDropExit ?? props.onDropExit,
+        onDrop: options.onDrop ?? props.onDrop,
+        onInsert: options.onInsert ?? props.onInsert,
+        onRootDrop: options.onRootDrop ?? props.onRootDrop,
+        onItemDrop: options.onItemDrop ?? props.onItemDrop,
+        onReorder: options.onReorder ?? props.onReorder,
+        onMove: options.onMove ?? props.onMove,
+        shouldAcceptItemDrop: options.shouldAcceptItemDrop ?? props.shouldAcceptItemDrop,
+        isDisabled: options.isDisabled ?? props.isDisabled,
+      }));
+    };
+    hooks.useDroppableCollection = (
+      props: Omit<DroppableCollectionOptions, 'ref'>,
+      state: DroppableCollectionState,
+      ref: Accessor<HTMLElement | null>
+    ) => {
+      const acceptedDragTypes = (options.acceptedDragTypes ?? props.acceptedDragTypes);
+      const normalizedAcceptedDragTypes = acceptedDragTypes === 'all'
+        ? 'all'
+        : acceptedDragTypes?.filter((type): type is string | symbol =>
+          typeof type === 'string' || typeof type === 'symbol');
+      return (
+      createDroppableCollection(
+        () => ({
+          ref,
+          dropTargetDelegate: options.dropTargetDelegate ?? props.dropTargetDelegate,
+          keyboardDelegate: options.keyboardDelegate ?? props.keyboardDelegate,
+          onKeyDown: options.onKeyDown ?? props.onKeyDown,
+          acceptedDragTypes: normalizedAcceptedDragTypes,
+          isDisabled: options.isDisabled ?? props.isDisabled,
+          onDropActivate: (e) => {
+            (options.onDropActivate ?? props.onDropActivate)?.({
+              type: 'dropactivate',
+              target: e.target,
+              x: e.x,
+              y: e.y,
+            });
+          },
+          onDrop: (e) => {
+            (options.onDrop ?? props.onDrop)?.({
+              type: 'drop',
+              target: e.target,
+              x: e.x,
+              y: e.y,
+              items: e.items,
+              dropOperation: e.dropOperation,
+            });
+          },
+          onRootDrop: options.onRootDrop ?? props.onRootDrop,
+          onItemDrop: (e) => {
+            if (e.target.type === 'item') {
+              (options.onItemDrop ?? props.onItemDrop)?.({
+                items: e.items,
+                target: e.target,
+                dropOperation: e.dropOperation,
+                isInternal: e.isInternal,
+              });
+            }
+          },
+          onInsert: (e) => {
+            if (e.target.type === 'item') {
+              (options.onInsert ?? props.onInsert)?.({
+                items: e.items,
+                target: e.target,
+                dropOperation: e.dropOperation,
+              });
+            }
+          },
+          onReorder: (e) => {
+            if (e.target.type === 'item') {
+              (options.onReorder ?? props.onReorder)?.({
+                keys: e.keys,
+                target: e.target,
+                dropOperation: e.dropOperation,
+              });
+            }
+          },
+          onMove: (e) => {
+            if (e.target.type === 'item') {
+              (options.onMove ?? props.onMove)?.({
+                keys: e.keys,
+                target: e.target,
+                dropOperation: e.dropOperation,
+              });
+            }
+          },
+        }),
+        state
+      ));
+    };
+    hooks.useDroppableItem = (
+      props: Omit<DroppableItemOptions, 'ref'>,
+      state: DroppableCollectionState,
+      ref: Accessor<HTMLElement | null>
+    ) => createDroppableItem(() => ({ ...props, ref }), state);
+    hooks.useDropIndicator = (
+      props: { target: DropTarget },
+      state: DroppableCollectionState,
+      _ref: Accessor<HTMLElement | null>
+    ) => {
+      const target = props.target;
+      const activeTarget = state.target;
+      const isDropTarget =
+        activeTarget?.type === target.type &&
+        (target.type === 'root'
+          || (
+            activeTarget.type === 'item' &&
+            target.type === 'item' &&
+            activeTarget.key === target.key &&
+            activeTarget.dropPosition === target.dropPosition
+          ));
+      return {
+        dropIndicatorProps: {
+          role: 'option',
+          'aria-disabled': true,
+          'aria-hidden': isDropTarget ? undefined : 'true',
+          tabIndex: -1,
+          'data-drop-target': isDropTarget ? '' : undefined,
+        },
+        isDropTarget,
+        isHidden: !isDropTarget,
+      };
+    };
+    hooks.renderDropIndicator = renderDropIndicator;
+    hooks.dropTargetDelegate = dropTargetDelegate;
+    hooks.ListDropTargetDelegate = ListDropTargetDelegate;
+  }
+
+  return {
+    dragAndDropHooks: hooks,
+  };
+}

package/src/utils.tsx

@@ -7,6 +7,7 @@ import {
   type JSX,
   type Accessor,
   type FlowComponent,
+  type ParentComponent,
   createContext,
   useContext,
   createMemo,
@@ -55,6 +56,8 @@ export interface SlotProps {
   slot?: string;
 }
 
+export const DEFAULT_SLOT = 'default';
+
 // ============================================
 // RENDER PROPS
 // ============================================
@@ -97,7 +100,9 @@ export function useRenderProps<T extends object>(
   props: RenderPropsBase<T> & { defaultClassName?: string },
   values: Accessor<T>
 ): RenderPropsResult<T> {
-  const { children, class: className, style, defaultClassName = '' } = props;
+  // Don't destructure children — access lazily to avoid eager evaluation
+  // that would trigger child component creation before context providers mount.
+  const { class: className, style, defaultClassName = '' } = props;
 
   // Compute class and style eagerly (they don't depend on context)
   const computedClass = createMemo(() => {
@@ -115,21 +120,35 @@ export function useRenderProps<T extends object>(
   });
 
   // Return object with explicit function for rendering children
-  // This avoids the getter pattern that causes SSR issues
+  // Children are accessed lazily during render (inside context providers)
   return {
     class: computedClass,
     style: computedStyle,
     renderChildren: () => {
       const currentValues = values();
+      const children = props.children;
       return typeof children === 'function'
         ? children(currentValues)
         : children;
     },
-    children,
+    get children() { return props.children; },
     values,
   };
 }
 
+export function composeRenderProps<T extends object>(
+  base: RenderPropsBase<T> | undefined,
+  override: RenderPropsBase<T> | undefined
+): RenderPropsBase<T> {
+  if (!base) return override ?? {};
+  if (!override) return base;
+  return {
+    children: override.children ?? base.children,
+    class: override.class ?? base.class,
+    style: override.style ?? base.style,
+  };
+}
+
 // ============================================
 // CONTEXT UTILITIES
 // ============================================
@@ -153,6 +172,21 @@ export function useSlottedContext<T>(context: ReturnType<typeof createContext<T
   return useContext(context);
 }
 
+export function useContextProps<TProps extends object, TRef>(
+  props: TProps,
+  ref: TRef,
+  context?: ContextValue<Partial<TProps>>
+): [TProps, TRef] {
+  if (!context) return [props, ref];
+  return [{ ...(context as TProps), ...props }, ref];
+}
+
+export const Provider: ParentComponent<{
+  values: Array<[ReturnType<typeof createContext<unknown>>, unknown]>;
+}> = (props) => {
+  return props.children;
+};
+
 // ============================================
 // DATA ATTRIBUTES
 // ============================================

package/src/virtualizer/Layout.ts

@@ -0,0 +1,200 @@
+import type { Key } from '@proyecto-viviana/solid-stately';
+
+export interface InvalidationContext<O = unknown> {
+  contentChanged?: boolean;
+  offsetChanged?: boolean;
+  sizeChanged?: boolean;
+  itemSizeChanged?: boolean;
+  layoutOptionsChanged?: boolean;
+  layoutOptions?: O;
+}
+
+export class Point {
+  constructor(public x = 0, public y = 0) {}
+  copy(): Point {
+    return new Point(this.x, this.y);
+  }
+  equals(point: Point): boolean {
+    return this.x === point.x && this.y === point.y;
+  }
+  isOrigin(): boolean {
+    return this.x === 0 && this.y === 0;
+  }
+}
+
+export class Size {
+  width: number;
+  height: number;
+
+  constructor(width = 0, height = 0) {
+    this.width = Math.max(0, width);
+    this.height = Math.max(0, height);
+  }
+
+  copy(): Size {
+    return new Size(this.width, this.height);
+  }
+
+  equals(other: Size): boolean {
+    return this.width === other.width && this.height === other.height;
+  }
+
+  get area(): number {
+    return this.width * this.height;
+  }
+}
+
+export class Rect {
+  constructor(
+    public x = 0,
+    public y = 0,
+    public width = 0,
+    public height = 0
+  ) {}
+
+  get maxX(): number {
+    return this.x + this.width;
+  }
+
+  get maxY(): number {
+    return this.y + this.height;
+  }
+
+  get area(): number {
+    return this.width * this.height;
+  }
+
+  get topLeft(): Point {
+    return new Point(this.x, this.y);
+  }
+
+  get topRight(): Point {
+    return new Point(this.maxX, this.y);
+  }
+
+  get bottomLeft(): Point {
+    return new Point(this.x, this.maxY);
+  }
+
+  get bottomRight(): Point {
+    return new Point(this.maxX, this.maxY);
+  }
+
+  intersects(rect: Rect): boolean {
+    return (
+      this.x <= rect.maxX &&
+      rect.x <= this.maxX &&
+      this.y <= rect.maxY &&
+      rect.y <= this.maxY
+    );
+  }
+
+  containsRect(rect: Rect): boolean {
+    return (
+      this.x <= rect.x &&
+      this.y <= rect.y &&
+      this.maxX >= rect.maxX &&
+      this.maxY >= rect.maxY
+    );
+  }
+
+  containsPoint(point: Point): boolean {
+    return (
+      this.x <= point.x &&
+      this.y <= point.y &&
+      this.maxX >= point.x &&
+      this.maxY >= point.y
+    );
+  }
+
+  union(other: Rect): Rect {
+    const x = Math.min(this.x, other.x);
+    const y = Math.min(this.y, other.y);
+    const width = Math.max(this.maxX, other.maxX) - x;
+    const height = Math.max(this.maxY, other.maxY) - y;
+    return new Rect(x, y, width, height);
+  }
+
+  intersection(other: Rect): Rect {
+    if (!this.intersects(other)) {
+      return new Rect(0, 0, 0, 0);
+    }
+    const x = Math.max(this.x, other.x);
+    const y = Math.max(this.y, other.y);
+    const width = Math.min(this.maxX, other.maxX) - x;
+    const height = Math.min(this.maxY, other.maxY) - y;
+    return new Rect(x, y, width, height);
+  }
+
+  copy(): Rect {
+    return new Rect(this.x, this.y, this.width, this.height);
+  }
+
+  equals(rect: Rect): boolean {
+    return (
+      this.x === rect.x &&
+      this.y === rect.y &&
+      this.width === rect.width &&
+      this.height === rect.height
+    );
+  }
+}
+
+export class LayoutInfo {
+  parentKey: Key | null = null;
+  content: unknown = null;
+  estimatedSize = false;
+  isSticky = false;
+  opacity = 1;
+  transform: string | null = null;
+  zIndex = 0;
+  allowOverflow = false;
+
+  constructor(public type: string, public key: Key, public rect: Rect) {}
+
+  copy(): LayoutInfo {
+    const copy = new LayoutInfo(this.type, this.key, this.rect.copy());
+    copy.parentKey = this.parentKey;
+    copy.content = this.content;
+    copy.estimatedSize = this.estimatedSize;
+    copy.isSticky = this.isSticky;
+    copy.opacity = this.opacity;
+    copy.transform = this.transform;
+    copy.zIndex = this.zIndex;
+    copy.allowOverflow = this.allowOverflow;
+    return copy;
+  }
+}
+
+interface VirtualizerLike {
+  visibleRect: Rect;
+}
+
+export abstract class Layout<T extends object = object, O = unknown> {
+  virtualizer: VirtualizerLike | null = null;
+
+  abstract getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+  abstract getLayoutInfo(key: Key): LayoutInfo | null;
+  abstract getContentSize(): Size;
+
+  shouldInvalidate(newRect: Rect, oldRect: Rect): boolean {
+    return newRect.width !== oldRect.width || newRect.height !== oldRect.height;
+  }
+
+  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
+    return newOptions !== oldOptions;
+  }
+
+  update(_context: InvalidationContext<O>): void {}
+
+  updateItemSize?(_key: Key, _size: Size): boolean;
+  getDropTargetLayoutInfo?(_target: unknown): LayoutInfo | null;
+
+  protected getItemRect(key: Key): Rect | null {
+    return this.getLayoutInfo(key)?.rect ?? null;
+  }
+
+  getVisibleRect(): Rect {
+    return this.virtualizer?.visibleRect ?? new Rect();
+  }
+}