@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/useDragAndDrop.ts

@@ -5,9 +5,9 @@
  * state and aria primitives.
  */
 
-import type { Accessor, JSX } from 'solid-js';
-import { DragPreview } from './DragPreview';
-import { ListDropTargetDelegate } from './ListDropTargetDelegate';
+import type { Accessor, JSX } from "solid-js";
+import { DragPreview } from "./DragPreview";
+import { ListDropTargetDelegate } from "./ListDropTargetDelegate";
 import {
   createDraggableCollection,
   createDraggableItem,
@@ -24,7 +24,7 @@ import {
   type DroppableItemOptions,
   type DroppableItemAria,
   type DropTargetDelegate as AriaDropTargetDelegate,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createDraggableCollectionState,
   createDroppableCollectionState,
@@ -37,42 +37,51 @@ import {
   type DroppableCollectionProps,
   type DroppableCollectionState,
   type DroppableCollectionStateOptions,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 
-interface DraggableCollectionStateOpts<T = object>
-  extends Omit<DraggableCollectionStateOptions<T>, 'getItems'> {
+interface DraggableCollectionStateOpts<T = object> extends Omit<
+  DraggableCollectionStateOptions<T>,
+  "getItems"
+> {
   items?: T[];
 }
 
 interface DragHooks<T = object> {
-  useDraggableCollectionState?: (props: DraggableCollectionStateOpts<T>) => DraggableCollectionState;
+  useDraggableCollectionState?: (
+    props: DraggableCollectionStateOpts<T>,
+  ) => DraggableCollectionState;
   useDraggableCollection?: (
-    props: Omit<DraggableCollectionOptions, 'ref'>,
+    props: Omit<DraggableCollectionOptions, "ref">,
     state: DraggableCollectionState,
-    ref: Accessor<HTMLElement | null>
+    ref: Accessor<HTMLElement | null>,
   ) => DraggableCollectionAria;
-  useDraggableItem?: (props: DraggableItemOptions, state: DraggableCollectionState) => DraggableItemAria;
+  useDraggableItem?: (
+    props: DraggableItemOptions,
+    state: DraggableCollectionState,
+  ) => DraggableItemAria;
   DragPreview?: typeof DragPreview;
-  renderDragPreview?: DragAndDropOptions<T>['renderDragPreview'];
+  renderDragPreview?: DragAndDropOptions<T>["renderDragPreview"];
   isVirtualDragging?: () => boolean;
 }
 
 interface DropHooks {
-  useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState;
+  useDroppableCollectionState?: (
+    props: DroppableCollectionStateOptions,
+  ) => DroppableCollectionState;
   useDroppableCollection?: (
-    props: Omit<DroppableCollectionOptions, 'ref'>,
+    props: Omit<DroppableCollectionOptions, "ref">,
     state: DroppableCollectionState,
-    ref: Accessor<HTMLElement | null>
+    ref: Accessor<HTMLElement | null>,
   ) => DroppableCollectionAria;
   useDroppableItem?: (
-    options: Omit<DroppableItemOptions, 'ref'>,
+    options: Omit<DroppableItemOptions, "ref">,
     state: DroppableCollectionState,
-    ref: Accessor<HTMLElement | null>
+    ref: Accessor<HTMLElement | null>,
   ) => DroppableItemAria;
   useDropIndicator?: (
     props: { target: DropTarget },
     state: DroppableCollectionState,
-    ref: Accessor<HTMLElement | null>
+    ref: Accessor<HTMLElement | null>,
   ) => {
     dropIndicatorProps: JSX.HTMLAttributes<HTMLElement>;
     isDropTarget: boolean;
@@ -91,16 +100,15 @@ export interface DragAndDrop<T = object> {
 }
 
 export interface DragAndDropOptions<T = object>
-  extends Partial<Omit<DraggableCollectionProps<T>, 'preview'>>,
-    Partial<DroppableCollectionProps> {
+  extends Partial<Omit<DraggableCollectionProps<T>, "preview">>, Partial<DroppableCollectionProps> {
   /**
    * Optional keyboard delegate forwarded to the collection droppable hook.
    */
-  keyboardDelegate?: DroppableCollectionOptions['keyboardDelegate'];
+  keyboardDelegate?: DroppableCollectionOptions["keyboardDelegate"];
   /**
    * Optional keydown handler composed with collection droppable keyboard behavior.
    */
-  onKeyDown?: DroppableCollectionOptions['onKeyDown'];
+  onKeyDown?: DroppableCollectionOptions["onKeyDown"];
   /**
    * A function that returns the items being dragged.
    * If omitted, draggable hooks are not added.
@@ -109,7 +117,9 @@ export interface DragAndDropOptions<T = object>
   /**
    * Optional custom drag preview renderer.
    */
-  renderDragPreview?: (items: DragItem[]) => JSX.Element | { element: JSX.Element; x: number; y: number };
+  renderDragPreview?: (
+    items: DragItem[],
+  ) => JSX.Element | { element: JSX.Element; x: number; y: number };
   /**
    * Optional drop indicator renderer for collection components.
    */
@@ -149,39 +159,44 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
     dropTargetDelegate,
   } = options;
 
-  const isDraggable = typeof getItems === 'function';
-  const isDroppable = Boolean(onDrop || onInsert || onItemDrop || onReorder || onMove || onRootDrop);
+  const isDraggable = typeof getItems === "function";
+  const isDroppable = Boolean(
+    onDrop || onInsert || onItemDrop || onReorder || onMove || onRootDrop,
+  );
 
   const hooks: DragAndDropHooks<T> = {};
-  const hasDom = typeof HTMLElement !== 'undefined';
+  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;
+    return typeof value === "object" && (value as { nodeType?: number }).nodeType === 1;
   };
-  const resolvedPreview = options.preview ?? (
-    renderDragPreview
+  const resolvedPreview =
+    options.preview ??
+    (renderDragPreview
       ? {
-          current: (items: DragItem[], callback: (node: HTMLElement | null, x?: number, y?: number) => void) => {
+          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
-            ) {
+            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);
+              callback(
+                isElementNode(previewValue.element) ? previewValue.element : null,
+                previewValue.x,
+                previewValue.y,
+              );
               return;
             }
             callback(isElementNode(rendered) ? rendered : null);
           },
         }
-      : undefined
-  );
+      : undefined);
 
   if (isDraggable && getItems) {
     hooks.useDraggableCollectionState = (props: DraggableCollectionStateOpts<T>) => {
@@ -189,7 +204,8 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
         onDragStart: options.onDragStart ?? props.onDragStart,
         onDragMove: options.onDragMove ?? props.onDragMove,
         onDragEnd: options.onDragEnd ?? props.onDragEnd,
-        getAllowedDropOperations: options.getAllowedDropOperations ?? props.getAllowedDropOperations,
+        getAllowedDropOperations:
+          options.getAllowedDropOperations ?? props.getAllowedDropOperations,
         isDisabled: options.isDisabled ?? props.isDisabled,
         preview: resolvedPreview ?? props.preview,
         getItems: (keys) => {
@@ -199,9 +215,9 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
       }));
     };
     hooks.useDraggableCollection = (
-      props: Omit<DraggableCollectionOptions, 'ref'>,
+      props: Omit<DraggableCollectionOptions, "ref">,
       state: DraggableCollectionState,
-      ref: Accessor<HTMLElement | null>
+      ref: Accessor<HTMLElement | null>,
     ) => createDraggableCollection({ ...props, ref }, state);
     hooks.useDraggableItem = (props, state) => createDraggableItem(() => props, state);
     hooks.DragPreview = DragPreview;
@@ -229,17 +245,19 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
       }));
     };
     hooks.useDroppableCollection = (
-      props: Omit<DroppableCollectionOptions, 'ref'>,
+      props: Omit<DroppableCollectionOptions, "ref">,
       state: DroppableCollectionState,
-      ref: Accessor<HTMLElement | null>
+      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(
+      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,
@@ -249,7 +267,7 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
           isDisabled: options.isDisabled ?? props.isDisabled,
           onDropActivate: (e) => {
             (options.onDropActivate ?? props.onDropActivate)?.({
-              type: 'dropactivate',
+              type: "dropactivate",
               target: e.target,
               x: e.x,
               y: e.y,
@@ -257,7 +275,7 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
           },
           onDrop: (e) => {
             (options.onDrop ?? props.onDrop)?.({
-              type: 'drop',
+              type: "drop",
               target: e.target,
               x: e.x,
               y: e.y,
@@ -267,7 +285,7 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
           },
           onRootDrop: options.onRootDrop ?? props.onRootDrop,
           onItemDrop: (e) => {
-            if (e.target.type === 'item') {
+            if (e.target.type === "item") {
               (options.onItemDrop ?? props.onItemDrop)?.({
                 items: e.items,
                 target: e.target,
@@ -277,7 +295,7 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
             }
           },
           onInsert: (e) => {
-            if (e.target.type === 'item') {
+            if (e.target.type === "item") {
               (options.onInsert ?? props.onInsert)?.({
                 items: e.items,
                 target: e.target,
@@ -286,7 +304,7 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
             }
           },
           onReorder: (e) => {
-            if (e.target.type === 'item') {
+            if (e.target.type === "item") {
               (options.onReorder ?? props.onReorder)?.({
                 keys: e.keys,
                 target: e.target,
@@ -295,7 +313,7 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
             }
           },
           onMove: (e) => {
-            if (e.target.type === 'item') {
+            if (e.target.type === "item") {
               (options.onMove ?? props.onMove)?.({
                 keys: e.keys,
                 target: e.target,
@@ -304,37 +322,35 @@ export function useDragAndDrop<T = object>(options: DragAndDropOptions<T> = {}):
             }
           },
         }),
-        state
-      ));
+        state,
+      );
     };
     hooks.useDroppableItem = (
-      props: Omit<DroppableItemOptions, 'ref'>,
+      props: Omit<DroppableItemOptions, "ref">,
       state: DroppableCollectionState,
-      ref: Accessor<HTMLElement | null>
+      ref: Accessor<HTMLElement | null>,
     ) => createDroppableItem(() => ({ ...props, ref }), state);
     hooks.useDropIndicator = (
       props: { target: DropTarget },
       state: DroppableCollectionState,
-      _ref: Accessor<HTMLElement | null>
+      _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' &&
+        (target.type === "root" ||
+          (activeTarget.type === "item" &&
+            target.type === "item" &&
             activeTarget.key === target.key &&
-            activeTarget.dropPosition === target.dropPosition
-          ));
+            activeTarget.dropPosition === target.dropPosition));
       return {
         dropIndicatorProps: {
-          role: 'option',
-          'aria-disabled': true,
-          'aria-hidden': isDropTarget ? undefined : 'true',
+          role: "option",
+          "aria-disabled": true,
+          "aria-hidden": isDropTarget ? undefined : "true",
           tabIndex: -1,
-          'data-drop-target': isDropTarget ? '' : undefined,
+          "data-drop-target": isDropTarget ? "" : undefined,
         },
         isDropTarget,
         isHidden: !isDropTarget,

package/src/utils.tsx

@@ -14,12 +14,8 @@ import {
   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
@@ -56,11 +52,7 @@ export interface SlotProps {
   slot?: string;
 }
 
-export const DEFAULT_SLOT = 'default';
-
-// ============================================
-// RENDER PROPS
-// ============================================
+export const DEFAULT_SLOT = "default";
 
 /**
  * Return type for useRenderProps
@@ -98,25 +90,23 @@ export interface RenderPropsResult<T> {
  */
 export function useRenderProps<T extends object>(
   props: RenderPropsBase<T> & { defaultClassName?: string },
-  values: Accessor<T>
+  values: Accessor<T>,
 ): RenderPropsResult<T> {
   // 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;
+  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
@@ -127,18 +117,18 @@ export function useRenderProps<T extends object>(
     renderChildren: () => {
       const currentValues = values();
       const children = props.children;
-      return typeof children === 'function'
-        ? children(currentValues)
-        : children;
+      return typeof children === "function" ? children(currentValues) : children;
+    },
+    get children() {
+      return props.children;
     },
-    get children() { return props.children; },
     values,
   };
 }
 
 export function composeRenderProps<T extends object>(
   base: RenderPropsBase<T> | undefined,
-  override: RenderPropsBase<T> | undefined
+  override: RenderPropsBase<T> | undefined,
 ): RenderPropsBase<T> {
   if (!base) return override ?? {};
   if (!override) return base;
@@ -149,10 +139,6 @@ export function composeRenderProps<T extends object>(
   };
 }
 
-// ============================================
-// CONTEXT UTILITIES
-// ============================================
-
 /**
  * Context value that can be null or the actual value
  */
@@ -168,14 +154,16 @@ 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);
 }
 
 export function useContextProps<TProps extends object, TRef>(
   props: TProps,
   ref: TRef,
-  context?: ContextValue<Partial<TProps>>
+  context?: ContextValue<Partial<TProps>>,
 ): [TProps, TRef] {
   if (!context) return [props, ref];
   return [{ ...(context as TProps), ...props }, ref];
@@ -187,28 +175,24 @@ export const Provider: ParentComponent<{
   return props.children;
 };
 
-// ============================================
-// DATA ATTRIBUTES
-// ============================================
-
 /**
  * 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;
     }
@@ -218,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)
  */
@@ -232,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;
     }
   }
@@ -249,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-/;
@@ -266,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];
     }
@@ -280,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;
@@ -349,13 +334,17 @@ export function useIsHydrated(): Accessor<boolean> {
     return () => false;
   }
 
-  // On client, start false and switch to true after animation frame
-  // This ensures we're past the hydration phase
+  // On client, start false (so the first render matches the server, which
+  // emitted nothing for hydrated-gated content) and flip to true after mount.
   const [isHydrated, setIsHydrated] = createSignal(false);
 
-  // Use requestAnimationFrame to ensure we're past hydration
-  // onMount may not fire during hydration for matching DOM
-  requestAnimationFrame(() => {
+  // onMount runs in the effect phase — *after* the synchronous hydration pass
+  // has finished walking the server DOM — so flipping here renders the gated
+  // content as a fresh client-side update (Portal: no getNextElement walk, no
+  // mismatch), yet fires synchronously under `render()` (unit tests / pure CSR)
+  // where requestAnimationFrame would never run. This mirrors the component
+  // gate above and is strictly earlier than a rAF tick.
+  onMount(() => {
     setIsHydrated(true);
   });
 

package/src/virtualizer/Layout.ts

@@ -1,4 +1,4 @@
-import type { Key } from '@proyecto-viviana/solid-stately';
+import type { Key } from "@proyecto-viviana/solid-stately";
 
 export interface InvalidationContext<O = unknown> {
   contentChanged?: boolean;
@@ -10,7 +10,10 @@ export interface InvalidationContext<O = unknown> {
 }
 
 export class Point {
-  constructor(public x = 0, public y = 0) {}
+  constructor(
+    public x = 0,
+    public y = 0,
+  ) {}
   copy(): Point {
     return new Point(this.x, this.y);
   }
@@ -49,7 +52,7 @@ export class Rect {
     public x = 0,
     public y = 0,
     public width = 0,
-    public height = 0
+    public height = 0,
   ) {}
 
   get maxX(): number {
@@ -81,30 +84,15 @@ export class Rect {
   }
 
   intersects(rect: Rect): boolean {
-    return (
-      this.x <= rect.maxX &&
-      rect.x <= this.maxX &&
-      this.y <= rect.maxY &&
-      rect.y <= this.maxY
-    );
+    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
-    );
+    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
-    );
+    return this.x <= point.x && this.y <= point.y && this.maxX >= point.x && this.maxY >= point.y;
   }
 
   union(other: Rect): Rect {
@@ -150,7 +138,11 @@ export class LayoutInfo {
   zIndex = 0;
   allowOverflow = false;
 
-  constructor(public type: string, public key: Key, public rect: Rect) {}
+  constructor(
+    public type: string,
+    public key: Key,
+    public rect: Rect,
+  ) {}
 
   copy(): LayoutInfo {
     const copy = new LayoutInfo(this.type, this.key, this.rect.copy());