@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Dialog.tsx

@@ -8,6 +8,7 @@
 import {
   type JSX,
   createContext,
+  createEffect,
   createMemo,
   createUniqueId,
   splitProps,
@@ -109,10 +110,18 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
     () => triggerRef
   )
 
+  const setTriggerRef = (el: HTMLElement | null) => {
+    if (!el) return
+    if (!triggerRef || !triggerRef.isConnected) {
+      triggerRef = el
+    }
+  }
+
   // Context value - memoized to avoid unnecessary re-renders
   const contextValue = createMemo(() => ({
     state,
     triggerRef: () => triggerRef,
+    setTriggerRef,
     triggerId,
   }))
 
@@ -154,8 +163,7 @@ export function Dialog(props: DialogProps): JSX.Element {
         return ariaProps['aria-label']
       },
       get 'aria-labelledby'() {
-        // Use provided labelledby, or fall back to trigger id if no title
-        return ariaProps['aria-labelledby'] ?? triggerContext?.triggerId
+        return ariaProps['aria-labelledby']
       },
       get 'aria-describedby'() {
         return ariaProps['aria-describedby']
@@ -172,7 +180,10 @@ export function Dialog(props: DialogProps): JSX.Element {
 
   const close = () => {
     local.onClose?.()
-    overlayState?.close()
+    if (overlayState) {
+      overlayState.close()
+      return
+    }
     triggerContext?.state.close()
   }
 
@@ -233,26 +244,46 @@ export function Heading(props: HeadingProps): JSX.Element {
   const dialogContext = useContext(DialogContext)
   const level = () => props.level ?? 2
   const id = () => dialogContext?.titleId
+  let headingRef: HTMLHeadingElement | undefined
+
+  createEffect(() => {
+    const el = headingRef
+    if (!el) return
+
+    const contextId = id()
+    if (contextId) {
+      el.id = contextId
+      return
+    }
+
+    if (!el.id) {
+      const dialog = el.closest('[role="dialog"],[role="alertdialog"]')
+      const labelledBy = dialog?.getAttribute('aria-labelledby')
+      if (labelledBy && !el.ownerDocument.getElementById(labelledBy)) {
+        el.id = labelledBy
+      }
+    }
+  })
 
   return (
     <Switch>
       <Match when={level() === 1}>
-        <h1 id={id()} class={props.class}>{props.children}</h1>
+        <h1 ref={headingRef} id={id()} class={props.class}>{props.children}</h1>
       </Match>
       <Match when={level() === 2}>
-        <h2 id={id()} class={props.class}>{props.children}</h2>
+        <h2 ref={headingRef} id={id()} class={props.class}>{props.children}</h2>
       </Match>
       <Match when={level() === 3}>
-        <h3 id={id()} class={props.class}>{props.children}</h3>
+        <h3 ref={headingRef} id={id()} class={props.class}>{props.children}</h3>
       </Match>
       <Match when={level() === 4}>
-        <h4 id={id()} class={props.class}>{props.children}</h4>
+        <h4 ref={headingRef} id={id()} class={props.class}>{props.children}</h4>
       </Match>
       <Match when={level() === 5}>
-        <h5 id={id()} class={props.class}>{props.children}</h5>
+        <h5 ref={headingRef} id={id()} class={props.class}>{props.children}</h5>
       </Match>
       <Match when={level() === 6}>
-        <h6 id={id()} class={props.class}>{props.children}</h6>
+        <h6 ref={headingRef} id={id()} class={props.class}>{props.children}</h6>
       </Match>
     </Switch>
   )

package/src/Disclosure.tsx

@@ -107,6 +107,7 @@ interface DisclosureContextValue {
 }
 
 export const DisclosureContext = createContext<DisclosureContextValue | null>(null);
+export const DisclosureStateContext = createContext<DisclosureState | null>(null);
 
 export function useDisclosureContext(): DisclosureContextValue | null {
   return useContext(DisclosureContext);
@@ -117,6 +118,7 @@ interface DisclosureGroupContextValue {
 }
 
 export const DisclosureGroupContext = createContext<DisclosureGroupContextValue | null>(null);
+export const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
 
 export function useDisclosureGroupContext(): DisclosureGroupContextValue | null {
   return useContext(DisclosureGroupContext);
@@ -160,17 +162,17 @@ export function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {
   ]);
 
   // Create group state
-  const state = createDisclosureGroupState({
+  const state = createDisclosureGroupState(() => ({
     allowsMultipleExpanded: local.allowsMultipleExpanded,
     isDisabled: local.isDisabled,
     expandedKeys: local.expandedKeys,
     defaultExpandedKeys: local.defaultExpandedKeys,
     onExpandedChange: local.onExpandedChange,
-  });
+  }));
 
   // Create group accessibility props
   const { groupProps } = createDisclosureGroup(
-    { isDisabled: local.isDisabled },
+    () => ({ isDisabled: local.isDisabled }),
     state
   );
 
@@ -199,17 +201,19 @@ export function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {
   const { ref: _ref, ...cleanGroupProps } = groupProps as Record<string, unknown>;
 
   return (
-    <DisclosureGroupContext.Provider value={contextValue}>
-      <div
-        {...domProps()}
-        {...cleanGroupProps}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={dataAttr(state.isDisabled)}
-      >
-        {props.children}
-      </div>
-    </DisclosureGroupContext.Provider>
+    <DisclosureGroupStateContext.Provider value={state}>
+      <DisclosureGroupContext.Provider value={contextValue}>
+        <div
+          {...domProps()}
+          {...cleanGroupProps}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={dataAttr(state.isDisabled)}
+        >
+          {props.children}
+        </div>
+      </DisclosureGroupContext.Provider>
+    </DisclosureGroupStateContext.Provider>
   );
 }
 
@@ -315,19 +319,21 @@ export function Disclosure(props: DisclosureProps): JSX.Element {
   };
 
   return (
-    <DisclosureContext.Provider value={contextValue}>
-      <DisclosurePanelRefContext.Provider value={setPanelRef}>
-        <div
-          {...domProps()}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-expanded={dataAttr(state.isExpanded())}
-          data-disabled={dataAttr(isDisabled())}
-        >
-          {props.children}
-        </div>
-      </DisclosurePanelRefContext.Provider>
-    </DisclosureContext.Provider>
+    <DisclosureStateContext.Provider value={state}>
+      <DisclosureContext.Provider value={contextValue}>
+        <DisclosurePanelRefContext.Provider value={setPanelRef}>
+          <div
+            {...domProps()}
+            class={renderProps.class()}
+            style={renderProps.style()}
+            data-expanded={dataAttr(state.isExpanded())}
+            data-disabled={dataAttr(isDisabled())}
+          >
+            {props.children}
+          </div>
+        </DisclosurePanelRefContext.Provider>
+      </DisclosureContext.Provider>
+    </DisclosureStateContext.Provider>
   );
 }
 

package/src/DragAndDrop.tsx

@@ -0,0 +1,334 @@
+/**
+ * Drag and drop composition helpers for solidaria-components.
+ *
+ * Compatibility target: react-aria-components DragAndDrop exports.
+ */
+
+import {
+  type JSX,
+  type Accessor,
+  createContext,
+  createMemo,
+  useContext,
+} from 'solid-js';
+import type {
+  DragTypes,
+  DropOperation,
+  DropTarget,
+  ItemDropTarget,
+  Key,
+} from '@proyecto-viviana/solid-stately';
+import type { DragAndDropHooks } from './useDragAndDrop';
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  dataAttr,
+} from './utils';
+
+export interface DragAndDropContextValue {
+  dragAndDropHooks?: DragAndDropHooks<unknown>;
+  dragState?: unknown;
+  dropState?: {
+    target?: DropTarget | null;
+    isDropTarget?: (target: DropTarget) => boolean;
+  };
+}
+
+export const DragAndDropContext = createContext<DragAndDropContextValue>({});
+
+export interface DropIndicatorRenderProps {
+  isDropTarget: boolean;
+}
+
+export interface DropIndicatorProps extends SlotProps {
+  target: ItemDropTarget;
+  children?: JSX.Element | ((props: DropIndicatorRenderProps) => JSX.Element);
+  class?: ClassNameOrFunction<DropIndicatorRenderProps>;
+  style?: StyleOrFunction<DropIndicatorRenderProps>;
+}
+
+interface DropIndicatorContextValue {
+  render: (props: DropIndicatorProps) => JSX.Element;
+}
+
+export const DropIndicatorContext = createContext<DropIndicatorContextValue | null>(null);
+
+function DefaultDropIndicator(props: DropIndicatorProps): JSX.Element {
+  const dnd = useContext(DragAndDropContext);
+  const isDropTarget = createMemo(() => {
+    const target = props.target;
+    return dnd.dropState?.isDropTarget?.(target) ?? false;
+  });
+
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: props.class,
+      style: props.style,
+      defaultClassName: 'solidaria-DropIndicator',
+    },
+    () => ({
+      isDropTarget: isDropTarget(),
+    })
+  );
+
+  return (
+    <div
+      role="option"
+      aria-disabled={true}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-drop-target={dataAttr(isDropTarget())}
+    >
+      {renderProps.renderChildren()}
+    </div>
+  );
+}
+
+export function DropIndicator(props: DropIndicatorProps): JSX.Element {
+  const context = useContext(DropIndicatorContext);
+  if (context) return context.render(props);
+  return <DefaultDropIndicator {...props} />;
+}
+
+export function useRenderDropIndicator(
+  hooksOrDropState?:
+    | Pick<DragAndDropHooks<unknown>, 'renderDropIndicator' | 'isVirtualDragging' | 'useDropIndicator'>
+    | {
+      target?: DropTarget | null;
+      isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+    },
+  maybeDropState?: {
+    target?: DropTarget | null;
+    isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+  }
+): ((target: ItemDropTarget) => JSX.Element | undefined) | undefined {
+  const looksLikeDropState = (
+    value: unknown
+  ): value is {
+    target?: DropTarget | null;
+    isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+  } => {
+    return Boolean(
+      value &&
+      typeof value === 'object' &&
+      ('isDropTarget' in (value as Record<string, unknown>) || 'target' in (value as Record<string, unknown>))
+    );
+  };
+
+  const dragAndDropHooks = looksLikeDropState(hooksOrDropState)
+    ? undefined
+    : hooksOrDropState;
+  const dropState = looksLikeDropState(hooksOrDropState) ? hooksOrDropState : maybeDropState;
+
+  // RAC only renders collection indicators when drop hooks are present.
+  if (dragAndDropHooks && !dragAndDropHooks.useDropIndicator) return undefined;
+  if (!dropState && !dragAndDropHooks?.renderDropIndicator) return undefined;
+
+  const targetsEqual = (a: DropTarget | null | undefined, b: DropTarget): boolean => {
+    if (!a) return false;
+    if (a.type !== b.type) return false;
+    if (a.type === 'root' && b.type === 'root') return true;
+    if (a.type !== 'item' || b.type !== 'item') return false;
+    return a.key === b.key && a.dropPosition === b.dropPosition;
+  };
+
+  return (target: ItemDropTarget) => {
+    const stateIsDropTarget = dropState?.isDropTarget;
+    const isTarget = typeof stateIsDropTarget === 'function'
+      ? stateIsDropTarget(target)
+      : stateIsDropTarget === true
+        ? targetsEqual(dropState?.target, target)
+        : false;
+    const isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.() ?? false;
+    if (!isTarget && !isVirtualDragging) return undefined;
+    return dragAndDropHooks?.renderDropIndicator
+      ? dragAndDropHooks.renderDropIndicator(target)
+      : <DropIndicator target={target} />;
+  };
+}
+
+type KeyAccessor = Key | null | undefined | Accessor<Key | null | undefined>;
+
+interface SelectionManagerLike {
+  focusedKey?: KeyAccessor;
+}
+
+interface CollectionLike {
+  getKeyAfter: (key: Key) => Key | null;
+  getItem: (key: Key) => { level?: number; type?: string } | null | undefined;
+}
+
+interface DroppableCollectionStateLike {
+  target?: DropTarget | null;
+}
+
+export interface VirtualRangeLike {
+  start: number;
+  end: number;
+  offsetTop: number;
+  offsetBottom: number;
+}
+
+export interface LayoutInfoProviderLike {
+  getLayoutInfo: (index: number) => { rect: { y: number; height: number } };
+}
+
+function resolveKey(value: KeyAccessor): Key | null | undefined {
+  if (typeof value === 'function') {
+    return (value as Accessor<Key | null | undefined>)();
+  }
+  return value;
+}
+
+function getAfterDropNormalizedKey(
+  target: ItemDropTarget,
+  collection?: CollectionLike
+): Key {
+  if (target.dropPosition !== 'after' || !collection) return target.key;
+
+  let nextKey = collection.getKeyAfter(target.key);
+  let lastDescendantKey: Key | null = null;
+
+  if (nextKey != null) {
+    const targetLevel = collection.getItem(target.key)?.level ?? 0;
+    while (nextKey != null) {
+      const node = collection.getItem(nextKey);
+      if (!node) break;
+      if (node.type && node.type !== 'item') {
+        nextKey = collection.getKeyAfter(nextKey);
+        continue;
+      }
+      if ((node.level ?? 0) <= targetLevel) break;
+      lastDescendantKey = nextKey;
+      nextKey = collection.getKeyAfter(nextKey);
+    }
+  }
+
+  return nextKey ?? lastDescendantKey ?? target.key;
+}
+
+export function getNormalizedDropTargetKey(
+  target: DropTarget | null | undefined,
+  collection?: CollectionLike
+): Key | null {
+  if (!target || target.type !== 'item') return null;
+  return getAfterDropNormalizedKey(target, collection);
+}
+
+export function useDndPersistedKeys(
+  selectionManager: SelectionManagerLike | null | undefined,
+  dragAndDropHooks?: Pick<DragAndDropHooks<unknown>, 'isVirtualDragging'>,
+  dropState?: DroppableCollectionStateLike,
+  collection?: CollectionLike
+): Accessor<Set<Key>> {
+  return createMemo(() => {
+    const focusedKey = resolveKey(selectionManager?.focusedKey);
+    let dropTargetKey: Key | null | undefined;
+
+    if (dragAndDropHooks?.isVirtualDragging?.() && dropState?.target?.type === 'item') {
+      dropTargetKey = getNormalizedDropTargetKey(dropState.target, collection) ?? undefined;
+    }
+
+    const keys = new Set<Key>();
+    if (focusedKey != null) keys.add(focusedKey);
+    if (dropTargetKey != null) keys.add(dropTargetKey);
+    return keys;
+  });
+}
+
+export function mergePersistedKeysIntoVirtualRange(
+  baseRange: VirtualRangeLike,
+  persistedIndexes: number[],
+  itemCount: number,
+  layoutInfoProvider: LayoutInfoProviderLike,
+  maxExtraItems = 60,
+  options?: {
+    forceIncludeIndexes?: number[];
+    forceIncludeMaxSpan?: number;
+    fallbackToForcedWindow?: boolean;
+  }
+): VirtualRangeLike {
+  const validPersistedIndexes = Array.from(
+    new Set(persistedIndexes.filter((index) => index >= 0 && index < itemCount))
+  ).sort((a, b) => a - b);
+  const forceIndexes = Array.from(
+    new Set((options?.forceIncludeIndexes ?? []).filter((index) => index >= 0 && index < itemCount))
+  );
+
+  if (itemCount <= 0) return baseRange;
+  if (validPersistedIndexes.length === 0 && forceIndexes.length === 0) return baseRange;
+
+  const baseSpan = Math.max(1, baseRange.end - baseRange.start);
+  const maxSpan = Math.max(baseSpan, baseSpan + maxExtraItems);
+
+  let start = baseRange.start;
+  let end = baseRange.end;
+
+  const distanceToBaseRange = (index: number): number => {
+    if (index < baseRange.start) return baseRange.start - index;
+    if (index >= baseRange.end) return index - (baseRange.end - 1);
+    return 0;
+  };
+
+  for (const index of validPersistedIndexes.sort((a, b) => distanceToBaseRange(a) - distanceToBaseRange(b))) {
+    const nextStart = Math.min(start, index);
+    const nextEnd = Math.max(end, index + 1);
+    if (nextEnd - nextStart <= maxSpan) {
+      start = nextStart;
+      end = nextEnd;
+    }
+  }
+
+  if (forceIndexes.length > 0) {
+    const forceMaxSpan = Math.max(maxSpan, options?.forceIncludeMaxSpan ?? Math.max(maxSpan, 300));
+    for (const index of forceIndexes) {
+      const nextStart = Math.min(start, index);
+      const nextEnd = Math.max(end, index + 1);
+      if (nextEnd - nextStart <= forceMaxSpan) {
+        start = nextStart;
+        end = nextEnd;
+      }
+    }
+
+    if (options?.fallbackToForcedWindow !== false) {
+      const missingForced = forceIndexes.filter((index) => index < start || index >= end);
+      if (missingForced.length > 0) {
+        const nearestForced = missingForced[0];
+        const forceMaxSpan = Math.max(maxSpan, options?.forceIncludeMaxSpan ?? Math.max(maxSpan, 300));
+        const windowSpan = Math.min(itemCount, Math.max(baseSpan, forceMaxSpan));
+        const centeredStart = Math.max(0, Math.min(itemCount - windowSpan, nearestForced - Math.floor(windowSpan / 2)));
+        start = centeredStart;
+        end = Math.min(itemCount, centeredStart + windowSpan);
+      }
+    }
+  }
+
+  if (start === baseRange.start && end === baseRange.end) return baseRange;
+
+  const startRect = start > 0 ? layoutInfoProvider.getLayoutInfo(start).rect : { y: 0, height: 0 };
+  const lastRect = layoutInfoProvider.getLayoutInfo(itemCount - 1).rect;
+  const endRect = end > 0 ? layoutInfoProvider.getLayoutInfo(end - 1).rect : { y: 0, height: 0 };
+
+  return {
+    start,
+    end,
+    offsetTop: Math.max(0, startRect.y),
+    offsetBottom: Math.max(0, (lastRect.y + lastRect.height) - (endRect.y + endRect.height)),
+  };
+}
+
+export type DropTargetDelegate = {
+  getDropTargetFromPoint: (
+    x: number,
+    y: number,
+    isValidDropTarget: (target: DropTarget) => boolean
+  ) => DropTarget | null;
+  getDropOperation: (
+    target: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[]
+  ) => DropOperation;
+};

package/src/DragPreview.tsx

@@ -0,0 +1,45 @@
+import { onCleanup, type JSX } from 'solid-js';
+import type { DragItem, DragPreviewRenderer } from '@proyecto-viviana/solid-stately';
+
+export interface DragPreviewProps {
+  ref?: { current: DragPreviewRenderer | null };
+  children: (items: DragItem[]) => JSX.Element | { element: JSX.Element; x?: number; y?: number } | null | undefined;
+}
+
+export function DragPreview(props: DragPreviewProps): JSX.Element {
+  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;
+  };
+
+  if (props.ref) {
+    const renderer: DragPreviewRenderer = (items, callback) => {
+      const rendered = props.children(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);
+    };
+
+    props.ref.current = renderer;
+    onCleanup(() => {
+      if (props.ref?.current === renderer) {
+        props.ref.current = null;
+      }
+    });
+  }
+
+  return null as unknown as JSX.Element;
+}