@proyecto-viviana/solidaria-components 0.2.4 → 0.2.9

package/src/VirtualizerLayouts.ts

@@ -0,0 +1,265 @@
+/**
+ * Layout primitives for solidaria-components Virtualizer.
+ *
+ * These are lightweight parity contracts inspired by RAC virtualizer layout APIs.
+ */
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface LayoutInfo {
+  key: string | number;
+  index: number;
+  rect: Rect;
+}
+
+export interface VirtualizerVisibleRange {
+  start: number;
+  end: number;
+  offsetTop: number;
+  offsetBottom: number;
+}
+
+export interface VirtualizerRangeContext {
+  itemCount: number;
+  scrollOffset: number;
+  viewportSize: number;
+  overscan: number;
+  viewportWidth?: number;
+}
+
+export interface DefaultVirtualizerLayoutOptions {
+  itemSize?: number;
+  overscan?: number;
+  viewportSize?: number;
+}
+
+export interface GridLayoutOptions extends DefaultVirtualizerLayoutOptions {
+  rowHeight?: number;
+  columnCount?: number;
+  viewportWidth?: number;
+}
+
+export interface WaterfallLayoutOptions extends GridLayoutOptions {
+  minColumnWidth?: number;
+  viewportWidth?: number;
+  gap?: number;
+}
+
+export interface VirtualizerLayoutInfoContext {
+  viewportWidth: number;
+}
+
+export interface VirtualizerDropTarget {
+  type: 'item' | 'root';
+  index: number;
+  position: 'before' | 'on' | 'after';
+  key?: string | number;
+  parentKey?: string | number | null;
+  level?: number;
+}
+
+function clampRange(itemCount: number, start: number, end: number, itemSize: number): VirtualizerVisibleRange {
+  const safeStart = Math.max(0, Math.min(start, itemCount));
+  const safeEnd = Math.max(safeStart, Math.min(end, itemCount));
+  return {
+    start: safeStart,
+    end: safeEnd,
+    offsetTop: safeStart * itemSize,
+    offsetBottom: Math.max(0, (itemCount - safeEnd) * itemSize),
+  };
+}
+
+export function calculateLinearVisibleRange(
+  itemCount: number,
+  scrollOffset: number,
+  viewportSize: number,
+  itemSize: number,
+  overscan: number
+): VirtualizerVisibleRange {
+  if (itemCount <= 0) return { start: 0, end: 0, offsetTop: 0, offsetBottom: 0 };
+  const safeItemSize = Math.max(1, itemSize);
+  const safeViewport = Math.max(1, viewportSize);
+  const safeOverscan = Math.max(0, overscan);
+  const start = Math.floor(scrollOffset / safeItemSize) - safeOverscan;
+  const visibleCount = Math.ceil(safeViewport / safeItemSize) + safeOverscan * 2;
+  return clampRange(itemCount, start, start + visibleCount, safeItemSize);
+}
+
+export class ListLayout {
+  getVisibleRange(
+    ctx: VirtualizerRangeContext,
+    options?: DefaultVirtualizerLayoutOptions
+  ): VirtualizerVisibleRange {
+    return calculateLinearVisibleRange(
+      ctx.itemCount,
+      ctx.scrollOffset,
+      ctx.viewportSize,
+      options?.itemSize ?? 40,
+      options?.overscan ?? ctx.overscan
+    );
+  }
+
+  getLayoutInfo(
+    index: number,
+    context: VirtualizerLayoutInfoContext,
+    options?: DefaultVirtualizerLayoutOptions
+  ): LayoutInfo {
+    const itemHeight = Math.max(1, options?.itemSize ?? 40);
+    return {
+      key: String(index),
+      index,
+      rect: {
+        x: 0,
+        y: index * itemHeight,
+        width: Math.max(0, context.viewportWidth),
+        height: itemHeight,
+      },
+    };
+  }
+
+  getDropTargetFromPoint(
+    point: Point,
+    itemCount: number,
+    options?: DefaultVirtualizerLayoutOptions
+  ): VirtualizerDropTarget | null {
+    if (itemCount <= 0) return { type: 'root', index: -1, position: 'on' };
+    const itemHeight = Math.max(1, options?.itemSize ?? 40);
+    if (point.y < 0) {
+      return { type: 'item', index: 0, position: 'before' };
+    }
+    const totalHeight = itemCount * itemHeight;
+    if (point.y >= totalHeight) {
+      return { type: 'item', index: itemCount - 1, position: 'after' };
+    }
+    const rawIndex = Math.floor(point.y / itemHeight);
+    const index = Math.max(0, Math.min(rawIndex, itemCount - 1));
+    const offsetWithinItem = Math.max(0, point.y - index * itemHeight);
+    const threshold = itemHeight / 3;
+    const position: VirtualizerDropTarget['position'] =
+      offsetWithinItem < threshold
+        ? 'before'
+        : offsetWithinItem > threshold * 2
+          ? 'after'
+          : 'on';
+    return { type: 'item', index, position };
+  }
+}
+
+export class TableLayout extends ListLayout {}
+
+export class GridLayout {
+  getVisibleRange(ctx: VirtualizerRangeContext, options?: GridLayoutOptions): VirtualizerVisibleRange {
+    if (ctx.itemCount <= 0) return { start: 0, end: 0, offsetTop: 0, offsetBottom: 0 };
+    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+    const columns = Math.max(1, options?.columnCount ?? 1);
+    const safeViewport = Math.max(1, ctx.viewportSize);
+    const safeOverscan = Math.max(0, options?.overscan ?? ctx.overscan);
+
+    const startRow = Math.max(0, Math.floor(ctx.scrollOffset / rowHeight) - safeOverscan);
+    const visibleRows = Math.ceil(safeViewport / rowHeight) + safeOverscan * 2;
+    const endRow = startRow + visibleRows;
+
+    const start = startRow * columns;
+    const end = Math.min(ctx.itemCount, endRow * columns);
+
+    const totalRows = Math.ceil(ctx.itemCount / columns);
+    const clampedStartRow = Math.floor(start / columns);
+    const renderedRows = Math.ceil((end - start) / columns);
+    const offsetTop = clampedStartRow * rowHeight;
+    const offsetBottom = Math.max(0, (totalRows - clampedStartRow - renderedRows) * rowHeight);
+
+    return { start, end, offsetTop, offsetBottom };
+  }
+
+  getLayoutInfo(index: number, context: VirtualizerLayoutInfoContext, options?: GridLayoutOptions): LayoutInfo {
+    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+    const columns = Math.max(1, options?.columnCount ?? 1);
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const width = Math.max(1, context.viewportWidth);
+    const cellWidth = Math.floor(width / columns);
+    return {
+      key: String(index),
+      index,
+      rect: {
+        x: col * cellWidth,
+        y: row * rowHeight,
+        width: cellWidth,
+        height: rowHeight,
+      },
+    };
+  }
+
+  getDropTargetFromPoint(
+    point: Point,
+    itemCount: number,
+    options?: GridLayoutOptions
+  ): VirtualizerDropTarget | null {
+    if (itemCount <= 0) return { type: 'root', index: -1, position: 'on' };
+    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
+    const columns = Math.max(1, options?.columnCount ?? 1);
+    const totalRows = Math.ceil(itemCount / columns);
+    const totalHeight = totalRows * rowHeight;
+    if (point.y < 0) {
+      return { type: 'item', index: 0, position: 'before' };
+    }
+    if (point.y >= totalHeight) {
+      return { type: 'item', index: itemCount - 1, position: 'after' };
+    }
+    const width = Math.max(1, options?.viewportWidth ?? 320);
+    const cellWidth = width / columns;
+    const row = Math.max(0, Math.floor(point.y / rowHeight));
+    const col = Math.max(0, Math.min(columns - 1, Math.floor(Math.max(0, point.x) / cellWidth)));
+    const index = Math.max(0, Math.min(itemCount - 1, row * columns + col));
+    const withinRow = Math.max(0, point.y - row * rowHeight);
+    const threshold = rowHeight / 3;
+    const position: VirtualizerDropTarget['position'] =
+      withinRow < threshold ? 'before' : withinRow > threshold * 2 ? 'after' : 'on';
+    return { type: 'item', index, position };
+  }
+}
+
+export class WaterfallLayout extends GridLayout {
+  override getVisibleRange(ctx: VirtualizerRangeContext, options?: WaterfallLayoutOptions): VirtualizerVisibleRange {
+    const width = Math.max(1, options?.viewportWidth ?? 320);
+    const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+    return super.getVisibleRange(ctx, { ...options, columnCount });
+  }
+
+  override getLayoutInfo(index: number, context: VirtualizerLayoutInfoContext, options?: WaterfallLayoutOptions): LayoutInfo {
+    const width = Math.max(1, options?.viewportWidth ?? context.viewportWidth);
+    const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+    return super.getLayoutInfo(index, context, { ...options, columnCount });
+  }
+
+  override getDropTargetFromPoint(
+    point: Point,
+    itemCount: number,
+    options?: WaterfallLayoutOptions
+  ): VirtualizerDropTarget | null {
+    const width = Math.max(1, options?.viewportWidth ?? 320);
+    const minColumnWidth = Math.max(1, options?.minColumnWidth ?? 200);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const columnCount = Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap)));
+    return super.getDropTargetFromPoint(point, itemCount, { ...options, columnCount });
+  }
+}

package/src/VisuallyHidden.tsx

@@ -7,35 +7,21 @@
 
 import { type JSX, type ParentProps, splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
+import { createVisuallyHidden, mergeProps } from '@proyecto-viviana/solidaria';
 
 // ============================================
 // TYPES
 // ============================================
 
-export interface VisuallyHiddenProps extends ParentProps {
+export interface VisuallyHiddenProps extends ParentProps, JSX.HTMLAttributes<HTMLElement> {
   /** The element type to render. @default 'span' */
   elementType?: keyof JSX.IntrinsicElements;
   /** Whether the element should be focusable when focused. */
   isFocusable?: boolean;
+  /** Inline style object merged with visually hidden styles. */
+  style?: JSX.CSSProperties;
 }
 
-// ============================================
-// STYLES
-// ============================================
-
-const visuallyHiddenStyles: JSX.CSSProperties = {
-  border: '0',
-  clip: 'rect(0 0 0 0)',
-  'clip-path': 'inset(50%)',
-  height: '1px',
-  margin: '-1px',
-  overflow: 'hidden',
-  padding: '0',
-  position: 'absolute',
-  width: '1px',
-  'white-space': 'nowrap',
-};
-
 // ============================================
 // COMPONENT
 // ============================================
@@ -44,15 +30,23 @@ const visuallyHiddenStyles: JSX.CSSProperties = {
  * VisuallyHidden hides its children visually, while keeping content visible to screen readers.
  */
 export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element {
-  const [local, others] = splitProps(props, ['elementType', 'isFocusable']);
+  const [local, others] = splitProps(props, ['elementType', 'isFocusable', 'style']);
+  const { visuallyHiddenProps } = createVisuallyHidden(() => ({
+    style: local.style,
+    isFocusable: local.isFocusable,
+  }));
 
   const elementType = () => local.elementType ?? 'span';
+  const mergedProps = () =>
+    mergeProps<Record<string, unknown>>(
+      others as unknown as Record<string, unknown>,
+      visuallyHiddenProps() as unknown as Record<string, unknown>
+    );
 
   return (
     <Dynamic
       component={elementType()}
-      style={visuallyHiddenStyles}
-      {...others}
+      {...mergedProps()}
     >
       {props.children}
     </Dynamic>

package/src/contexts.ts

@@ -35,6 +35,7 @@ export function useOverlayTriggerState(): OverlayTriggerState | null {
 export interface DialogTriggerContextValue {
   state: StatelyOverlayTriggerState
   triggerRef: () => HTMLElement | null
+  setTriggerRef: (el: HTMLElement | null) => void
   triggerId: string
 }