@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/useDragAndDrop.ts

@@ -0,0 +1,367 @@
+/**
+ * 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,18 +7,15 @@ import {
   type JSX,
   type Accessor,
   type FlowComponent,
+  type ParentComponent,
   createContext,
   useContext,
   createMemo,
   createSignal,
   onMount,
   Show,
-} from 'solid-js';
-import { isServer } from 'solid-js/web';
-
-// ============================================
-// TYPES
-// ============================================
+} from "solid-js";
+import { isServer } from "solid-js/web";
 
 /**
  * Render props pattern - children can be a function that receives state
@@ -55,9 +52,7 @@ export interface SlotProps {
   slot?: string;
 }
 
-// ============================================
-// RENDER PROPS
-// ============================================
+export const DEFAULT_SLOT = "default";
 
 /**
  * Return type for useRenderProps
@@ -95,44 +90,54 @@ export interface RenderPropsResult<T> {
  */
 export function useRenderProps<T extends object>(
   props: RenderPropsBase<T> & { defaultClassName?: string },
-  values: Accessor<T>
+  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(() => {
     const currentValues = values();
-    return typeof className === 'function'
+    return typeof className === "function"
       ? className(currentValues)
-      : className ?? defaultClassName;
+      : (className ?? defaultClassName);
   });
 
   const computedStyle = createMemo(() => {
     const currentValues = values();
-    return typeof style === 'function'
-      ? style(currentValues)
-      : style;
+    return typeof style === "function" ? style(currentValues) : style;
   });
 
   // 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();
-      return typeof children === 'function'
-        ? children(currentValues)
-        : children;
+      const children = props.children;
+      return typeof children === "function" ? children(currentValues) : children;
+    },
+    get children() {
+      return props.children;
     },
-    children,
     values,
   };
 }
 
-// ============================================
-// CONTEXT UTILITIES
-// ============================================
+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 value that can be null or the actual value
@@ -149,32 +154,45 @@ export function createSlottedContext<T>() {
 /**
  * Use context with null check
  */
-export function useSlottedContext<T>(context: ReturnType<typeof createContext<T | null>>): T | null {
+export function useSlottedContext<T>(
+  context: ReturnType<typeof createContext<T | null>>,
+): T | null {
   return useContext(context);
 }
 
-// ============================================
-// DATA ATTRIBUTES
-// ============================================
+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;
+};
 
 /**
  * Converts boolean state values to data attributes
  */
-export function dataAttr(value: boolean | undefined): '' | undefined {
-  return value ? '' : undefined;
+export function dataAttr(value: boolean | undefined): "" | undefined {
+  return value ? "" : undefined;
 }
 
 /**
  * Creates data attributes from render props
  */
 export function createDataAttributes<T extends Record<string, boolean | string | undefined>>(
-  values: T
+  values: T,
 ): Record<string, string | undefined> {
   const result: Record<string, string | undefined> = {};
 
   for (const [key, value] of Object.entries(values)) {
-    if (typeof value === 'boolean') {
-      result[`data-${camelToKebab(key)}`] = value ? '' : undefined;
+    if (typeof value === "boolean") {
+      result[`data-${camelToKebab(key)}`] = value ? "" : undefined;
     } else if (value !== undefined) {
       result[`data-${camelToKebab(key)}`] = value;
     }
@@ -184,13 +202,9 @@ export function createDataAttributes<T extends Record<string, boolean | string |
 }
 
 function camelToKebab(str: string): string {
-  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
 
-// ============================================
-// PROPS UTILITIES
-// ============================================
-
 /**
  * Remove data attributes from props (for internal use)
  */
@@ -198,7 +212,7 @@ export function removeDataAttributes<T extends Record<string, unknown>>(props: T
   const result: Record<string, unknown> = {};
 
   for (const [key, value] of Object.entries(props)) {
-    if (!key.startsWith('data-')) {
+    if (!key.startsWith("data-")) {
       result[key] = value;
     }
   }
@@ -215,14 +229,25 @@ export function removeDataAttributes<T extends Record<string, unknown>>(props: T
  */
 export function filterDOMProps<R extends object = Record<string, unknown>>(
   props: object,
-  options: { global?: boolean } = {}
+  options: { global?: boolean } = {},
 ): R {
   const { global = false } = options;
   const result: Record<string, unknown> = {};
 
   const globalAttrs = new Set([
-    'id', 'class', 'style', 'tabIndex', 'role', 'title', 'lang', 'dir',
-    'hidden', 'draggable', 'accessKey', 'contentEditable', 'spellcheck',
+    "id",
+    "class",
+    "style",
+    "tabIndex",
+    "role",
+    "title",
+    "lang",
+    "dir",
+    "hidden",
+    "draggable",
+    "accessKey",
+    "contentEditable",
+    "spellcheck",
   ]);
 
   const ariaAttrs = /^aria-/;
@@ -232,12 +257,10 @@ export function filterDOMProps<R extends object = Record<string, unknown>>(
   for (const key in props) {
     if (
       Object.prototype.hasOwnProperty.call(props, key) &&
-      (
-        (global && globalAttrs.has(key)) ||
+      ((global && globalAttrs.has(key)) ||
         ariaAttrs.test(key) ||
         dataAttrs.test(key) ||
-        eventHandlers.test(key)
-      )
+        eventHandlers.test(key))
     ) {
       result[key] = (props as Record<string, unknown>)[key];
     }
@@ -246,10 +269,6 @@ export function filterDOMProps<R extends object = Record<string, unknown>>(
   return result as R;
 }
 
-// ============================================
-// CLIENT-ONLY UTILITIES
-// ============================================
-
 export interface ClientOnlyProps {
   /** The children to render only on the client */
   children: JSX.Element;