@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/disclosure/createDisclosure.ts

@@ -6,15 +6,11 @@
  * Port of @react-aria/disclosure useDisclosure.
  */
 
-import { type JSX, createEffect } from 'solid-js';
-import { type DisclosureState } from '@proyecto-viviana/solid-stately';
-import { createId, canUseDOM } from '../ssr';
-import { createPress } from '../interactions/createPress';
-import { mergeProps } from '../utils/mergeProps';
-
-// ============================================
-// TYPES
-// ============================================
+import { type JSX, createEffect, onCleanup } from "solid-js";
+import { type DisclosureState } from "@proyecto-viviana/solid-stately";
+import { createId, canUseDOM } from "../ssr";
+import { createPress } from "../interactions/createPress";
+import { mergeProps } from "../utils/mergeProps";
 
 export interface AriaDisclosureProps {
   /** Whether the disclosure is disabled. */
@@ -26,11 +22,16 @@ export interface DisclosureAria {
   buttonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
   /** Props for the disclosure panel. */
   panelProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the disclosure trigger is currently pressed. */
+  isPressed: () => boolean;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
+export function getDisclosurePanelHiddenAttribute(
+  isExpanded: boolean,
+  hasDOM = canUseDOM,
+): true | undefined {
+  return hasDOM ? undefined : !isExpanded || undefined;
+}
 
 /**
  * Provides the behavior and accessibility implementation for a disclosure component.
@@ -66,65 +67,169 @@ export interface DisclosureAria {
 export function createDisclosure(
   props: AriaDisclosureProps | (() => AriaDisclosureProps),
   state: DisclosureState,
-  panelRef: () => HTMLElement | null
+  panelRef: () => HTMLElement | null,
 ): DisclosureAria {
   // Handle both plain object and accessor function patterns
-  const getProps = typeof props === 'function' ? props : () => props;
+  const getProps = typeof props === "function" ? props : () => props;
 
   const triggerId = createId();
   const panelId = createId();
 
-  // Handle panel visibility with hidden attribute
+  let raf: number | null = null;
+  let isExpandedRef: boolean | null = null;
+
+  const requestFrame = (callback: FrameRequestCallback): number => {
+    if (typeof requestAnimationFrame === "function") {
+      return requestAnimationFrame(callback);
+    }
+
+    return window.setTimeout(() => callback(performance.now()), 16);
+  };
+
+  const cancelFrame = (id: number) => {
+    if (typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(id);
+    } else {
+      window.clearTimeout(id);
+    }
+  };
+
+  const cancelPendingRaf = () => {
+    if (raf != null && canUseDOM) {
+      cancelFrame(raf);
+      raf = null;
+    }
+  };
+
+  const setPanelSize = (panel: HTMLElement, width: string, height: string) => {
+    panel.style.setProperty("--disclosure-panel-width", width);
+    panel.style.setProperty("--disclosure-panel-height", height);
+  };
+
+  const getPanelAnimations = (panel: HTMLElement): Animation[] => {
+    return typeof panel.getAnimations === "function" ? panel.getAnimations() : [];
+  };
+
+  // Handle browser find-in-page reveal for collapsed panels.
   createEffect(() => {
     if (!canUseDOM) return;
 
     const panel = panelRef();
     if (!panel) return;
 
-    if (state.isExpanded()) {
-      panel.removeAttribute('hidden');
-    } else {
-      // Use 'until-found' for find-in-page support where available
-      panel.setAttribute('hidden', 'until-found');
+    const handleBeforeMatch = () => {
+      cancelPendingRaf();
+      raf = requestFrame(() => {
+        if (panelRef() === panel) {
+          panel.setAttribute("hidden", "until-found");
+        }
+        raf = null;
+      });
+
+      state.toggle();
+    };
+
+    panel.addEventListener("beforematch", handleBeforeMatch);
+    onCleanup(() => {
+      panel.removeEventListener("beforematch", handleBeforeMatch);
+    });
+  });
+
+  // Handle panel visibility and animation sizing.
+  createEffect(() => {
+    if (!canUseDOM) return;
+
+    const panel = panelRef();
+    if (!panel) return;
+
+    const isExpanded = state.isExpanded();
+    cancelPendingRaf();
+
+    if (isExpandedRef === null || typeof panel.getAnimations !== "function") {
+      if (isExpanded) {
+        panel.removeAttribute("hidden");
+        setPanelSize(panel, "auto", "auto");
+      } else {
+        panel.setAttribute("hidden", "until-found");
+        setPanelSize(panel, "0px", "0px");
+      }
+    } else if (isExpanded !== isExpandedRef) {
+      if (isExpanded) {
+        panel.removeAttribute("hidden");
+        setPanelSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);
+
+        Promise.all(getPanelAnimations(panel).map((animation) => animation.finished))
+          .then(() => {
+            if (panelRef() === panel && state.isExpanded()) {
+              setPanelSize(panel, "auto", "auto");
+            }
+          })
+          .catch(() => {});
+      } else {
+        setPanelSize(panel, `${panel.scrollWidth}px`, `${panel.scrollHeight}px`);
+
+        // Force style recalculation before animating to zero.
+        window.getComputedStyle(panel).height;
+
+        setPanelSize(panel, "0px", "0px");
+
+        Promise.all(getPanelAnimations(panel).map((animation) => animation.finished))
+          .then(() => {
+            if (panelRef() === panel && !state.isExpanded()) {
+              panel.setAttribute("hidden", "until-found");
+            }
+          })
+          .catch(() => {});
+      }
     }
+
+    isExpandedRef = isExpanded;
   });
 
+  onCleanup(cancelPendingRaf);
+
   // Use createPress for proper interaction handling (matches Select/Menu pattern)
-  const { pressProps } = createPress({
+  const { pressProps, isPressed } = createPress({
     get isDisabled() {
       return getProps().isDisabled;
     },
-    onPress() {
-      state.toggle();
+    onPressStart(event) {
+      if (event.pointerType === "keyboard") {
+        state.toggle();
+      }
+    },
+    onPress(event) {
+      if (event.pointerType !== "keyboard") {
+        state.toggle();
+      }
     },
   });
 
   return {
+    isPressed,
     // Button props - merge with pressProps for consistent interaction handling
     // Using getter (not createMemo) to match createSelect pattern
     get buttonProps(): JSX.ButtonHTMLAttributes<HTMLButtonElement> {
       const p = getProps();
-      // Note: Don't add duplicate onKeyDown handler here!
-      // createPress already handles Enter/Space via its onPress callback.
-      // Adding another toggle call would double-toggle (toggle on keydown, toggle again on keyup).
       return mergeProps(
         pressProps as Record<string, unknown>,
         {
           id: triggerId,
-          type: 'button',
-          'aria-expanded': state.isExpanded(),
-          'aria-controls': panelId,
+          type: "button",
+          "aria-expanded": state.isExpanded(),
+          "aria-controls": panelId,
           disabled: p.isDisabled,
-        } as Record<string, unknown>
+        } as Record<string, unknown>,
       ) as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
     },
     // Panel props
     get panelProps(): JSX.HTMLAttributes<HTMLElement> {
       return {
         id: panelId,
-        role: 'region',
-        'aria-labelledby': triggerId,
-        hidden: !state.isExpanded() || undefined,
+        role: "group",
+        "aria-labelledby": triggerId,
+        "aria-hidden": !state.isExpanded(),
+        hidden: getDisclosurePanelHiddenAttribute(state.isExpanded()),
       };
     },
   };

package/src/disclosure/createDisclosureGroup.ts

@@ -6,13 +6,9 @@
  * Port of @react-aria/disclosure.
  */
 
-import { type JSX, createMemo } from 'solid-js';
-import { type DisclosureGroupState } from '@proyecto-viviana/solid-stately';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-
-// ============================================
-// TYPES
-// ============================================
+import { type JSX } from "solid-js";
+import { type DisclosureGroupState } from "@proyecto-viviana/solid-stately";
+import { type MaybeAccessor } from "../utils/reactivity";
 
 export interface AriaDisclosureGroupProps {
   /** Whether the disclosure group is disabled. */
@@ -24,10 +20,6 @@ export interface DisclosureGroupAria {
   groupProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides accessibility implementation for a group of disclosures (accordion).
  *
@@ -49,17 +41,12 @@ export interface DisclosureGroupAria {
  * ```
  */
 export function createDisclosureGroup(
-  props: MaybeAccessor<AriaDisclosureGroupProps>,
-  state: DisclosureGroupState
+  _props: MaybeAccessor<AriaDisclosureGroupProps>,
+  _state: DisclosureGroupState,
 ): DisclosureGroupAria {
-  const getProps = () => access(props);
-
-  const groupProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    role: 'group',
-    'aria-disabled': getProps().isDisabled || state.isDisabled || undefined,
-  }));
-
   return {
-    get groupProps() { return groupProps(); },
+    get groupProps() {
+      return {};
+    },
   };
 }

package/src/disclosure/index.ts

@@ -2,10 +2,10 @@ export {
   createDisclosure,
   type AriaDisclosureProps,
   type DisclosureAria,
-} from './createDisclosure';
+} from "./createDisclosure";
 
 export {
   createDisclosureGroup,
   type AriaDisclosureGroupProps,
   type DisclosureGroupAria,
-} from './createDisclosureGroup';
+} from "./createDisclosureGroup";

package/src/dnd/createDrag.ts

@@ -5,9 +5,9 @@
  * mouse, touch, and keyboard interactions.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import { createDragState } from '@proyecto-viviana/solid-stately';
-import type { AriaDragOptions, DragAria } from './types';
+import { createMemo, type Accessor } from "solid-js";
+import { createDragState } from "@proyecto-viviana/solid-stately";
+import type { AriaDragOptions, DragAria } from "./types";
 import {
   getTypes,
   writeToDataTransfer,
@@ -17,8 +17,8 @@ import {
   setGlobalAllowedDropOperations,
   setGlobalDropEffect,
   getGlobalDropEffect,
-} from './utils';
-import { setGlobalDraggingTypes } from './createDraggableCollection';
+} from "./utils";
+import { setGlobalDraggingTypes } from "./createDraggableCollection";
 
 /**
  * Creates ARIA props for a draggable element.
@@ -29,7 +29,6 @@ import { setGlobalDraggingTypes } from './createDraggableCollection';
 export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
   const getProps = createMemo(() => props());
 
-  // Create drag state
   const state = createDragState(() => ({
     getItems: getProps().getItems,
     getAllowedDropOperations: getProps().getAllowedDropOperations,
@@ -41,7 +40,6 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
     preview: getProps().preview,
   }));
 
-  // Track position for drag move
   let lastX = 0;
   let lastY = 0;
 
@@ -51,10 +49,8 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
 
     const p = getProps();
 
-    // Call state handler
     state.startDrag(e.clientX, e.clientY);
 
-    // Get items and write to data transfer
     const items = state.getItems();
     setGlobalDraggingTypes(getTypes(items));
     e.dataTransfer?.clearData?.();
@@ -62,7 +58,6 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
       writeToDataTransfer(e.dataTransfer, items);
     }
 
-    // Set allowed drop operations
     let allowed = DROP_OPERATION.all;
     const allowedOps = state.getAllowedDropOperations();
     if (allowedOps.length > 0) {
@@ -73,14 +68,14 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
     }
 
     setGlobalAllowedDropOperations(allowed);
-    const effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
+    const effectAllowed = EFFECT_ALLOWED[allowed] || "none";
     if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed =
-        (effectAllowed === 'cancel' ? 'none' : effectAllowed) as DataTransfer['effectAllowed'];
+      e.dataTransfer.effectAllowed = (
+        effectAllowed === "cancel" ? "none" : effectAllowed
+      ) as DataTransfer["effectAllowed"];
     }
 
-    // Handle custom preview
-    if (typeof p.preview?.current === 'function' && e.dataTransfer) {
+    if (typeof p.preview?.current === "function" && e.dataTransfer) {
       p.preview.current(items, (node, userX, userY) => {
         if (!node || !e.dataTransfer) return;
 
@@ -94,8 +89,8 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
           defaultY = size.height / 2;
         }
 
-        let offsetX = typeof userX === 'number' ? userX : defaultX;
-        let offsetY = typeof userY === 'number' ? userY : defaultY;
+        let offsetX = typeof userX === "number" ? userX : defaultX;
+        let offsetY = typeof userY === "number" ? userY : defaultY;
 
         offsetX = Math.max(0, Math.min(offsetX, size.width));
         offsetY = Math.max(0, Math.min(offsetY, size.height));
@@ -124,7 +119,7 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
   const onDragEnd = (e: DragEvent) => {
     e.stopPropagation();
 
-    let dropEffect: string = e.dataTransfer?.dropEffect ?? 'none';
+    let dropEffect: string = e.dataTransfer?.dropEffect ?? "none";
     // Chrome Android fix - use global drop effect
     if (getGlobalDropEffect()) {
       dropEffect = getGlobalDropEffect()!;
@@ -140,14 +135,14 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
 
   // Keyboard/screen reader drag initiation
   const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && e.target === e.currentTarget) {
+    if (e.key === "Enter" && e.target === e.currentTarget) {
       e.preventDefault();
       e.stopPropagation();
     }
   };
 
   const onKeyUp = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && e.target === e.currentTarget) {
+    if (e.key === "Enter" && e.target === e.currentTarget) {
       e.preventDefault();
       e.stopPropagation();
       // Would initiate keyboard-based drag mode
@@ -184,7 +179,6 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
       onDragEnd,
     };
 
-    // Add keyboard handlers if no separate drag button
     if (!p.hasDragButton) {
       baseProps.onKeyDown = onKeyDown;
       baseProps.onKeyUp = onKeyUp;
@@ -203,8 +197,8 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
     }
 
     return {
-      type: 'button' as const,
-      'aria-label': 'Drag',
+      type: "button" as const,
+      "aria-label": "Drag",
       onKeyDown,
       onKeyUp,
     };
@@ -212,10 +206,10 @@ export function createDrag(props: Accessor<AriaDragOptions>): DragAria {
 
   return {
     get dragProps() {
-      return dragProps() as DragAria['dragProps'];
+      return dragProps() as DragAria["dragProps"];
     },
     get dragButtonProps() {
-      return dragButtonProps() as DragAria['dragButtonProps'];
+      return dragButtonProps() as DragAria["dragButtonProps"];
     },
     get isDragging() {
       return state.isDragging;

package/src/dnd/createDraggableCollection.ts

@@ -5,9 +5,9 @@
  * component like ListBox, GridList, or Table.
  */
 
-import { createMemo, createEffect, onCleanup, type Accessor } from 'solid-js';
-import type { DraggableCollectionState } from '@proyecto-viviana/solid-stately';
-import { getTypes } from './utils';
+import { createMemo, createEffect, onCleanup, type Accessor } from "solid-js";
+import type { DraggableCollectionState } from "@proyecto-viviana/solid-stately";
+import { getTypes } from "./utils";
 
 // Global state for tracking the dragging collection
 let globalDraggingCollectionRef: HTMLElement | null = null;
@@ -57,7 +57,7 @@ export interface DraggableCollectionAria {
  */
 export function createDraggableCollection(
   options: DraggableCollectionOptions,
-  state: DraggableCollectionState
+  state: DraggableCollectionState,
 ): DraggableCollectionAria {
   const ref = createMemo(() => options.ref());
 

package/src/dnd/createDraggableItem.ts

@@ -4,12 +4,12 @@
  * Provides accessibility props for items that can be dragged from a collection.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
 import type {
   DraggableCollectionState,
   DragPreviewRenderer,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   getTypes,
   writeToDataTransfer,
@@ -19,8 +19,8 @@ import {
   setGlobalAllowedDropOperations,
   setGlobalDropEffect,
   getGlobalDropEffect,
-} from './utils';
-import { setGlobalDraggingTypes } from './createDraggableCollection';
+} from "./utils";
+import { setGlobalDraggingTypes } from "./createDraggableCollection";
 
 export interface DraggableItemOptions {
   /** The unique key of the item. */
@@ -51,7 +51,7 @@ export interface DraggableItemAria {
  */
 export function createDraggableItem(
   options: Accessor<DraggableItemOptions>,
-  state: DraggableCollectionState
+  state: DraggableCollectionState,
 ): DraggableItemAria {
   const getOptions = createMemo(() => options());
 
@@ -103,15 +103,16 @@ export function createDraggableItem(
     }
 
     setGlobalAllowedDropOperations(allowed);
-    const effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
+    const effectAllowed = EFFECT_ALLOWED[allowed] || "none";
     if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed =
-        (effectAllowed === 'cancel' ? 'none' : effectAllowed) as DataTransfer['effectAllowed'];
+      e.dataTransfer.effectAllowed = (
+        effectAllowed === "cancel" ? "none" : effectAllowed
+      ) as DataTransfer["effectAllowed"];
     }
 
     // Handle custom preview from item options or collection state.
     const preview = opts.preview ?? state.preview;
-    if (typeof preview?.current === 'function' && e.dataTransfer) {
+    if (typeof preview?.current === "function" && e.dataTransfer) {
       preview.current(items, (node, userX, userY) => {
         if (!node || !e.dataTransfer) return;
 
@@ -125,8 +126,8 @@ export function createDraggableItem(
           defaultY = size.height / 2;
         }
 
-        let offsetX = typeof userX === 'number' ? userX : defaultX;
-        let offsetY = typeof userY === 'number' ? userY : defaultY;
+        let offsetX = typeof userX === "number" ? userX : defaultX;
+        let offsetY = typeof userY === "number" ? userY : defaultY;
 
         offsetX = Math.max(0, Math.min(offsetX, size.width));
         offsetY = Math.max(0, Math.min(offsetY, size.height));
@@ -155,7 +156,7 @@ export function createDraggableItem(
   const onDragEnd = (e: DragEvent) => {
     e.stopPropagation();
 
-    let dropEffect: string = e.dataTransfer?.dropEffect ?? 'none';
+    let dropEffect: string = e.dataTransfer?.dropEffect ?? "none";
     // Chrome Android fix - use global drop effect
     if (getGlobalDropEffect()) {
       dropEffect = getGlobalDropEffect()!;
@@ -172,14 +173,14 @@ export function createDraggableItem(
 
   // Keyboard/screen reader drag initiation
   const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && e.target === e.currentTarget) {
+    if (e.key === "Enter" && e.target === e.currentTarget) {
       e.preventDefault();
       e.stopPropagation();
     }
   };
 
   const onKeyUp = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && e.target === e.currentTarget) {
+    if (e.key === "Enter" && e.target === e.currentTarget) {
       e.preventDefault();
       e.stopPropagation();
 
@@ -238,8 +239,8 @@ export function createDraggableItem(
     }
 
     return {
-      type: 'button' as const,
-      'aria-label': 'Drag',
+      type: "button" as const,
+      "aria-label": "Drag",
       onKeyDown,
       onKeyUp,
     };
@@ -247,10 +248,10 @@ export function createDraggableItem(
 
   return {
     get dragProps() {
-      return dragProps() as DraggableItemAria['dragProps'];
+      return dragProps() as DraggableItemAria["dragProps"];
     },
     get dragButtonProps() {
-      return dragButtonProps() as DraggableItemAria['dragButtonProps'];
+      return dragButtonProps() as DraggableItemAria["dragButtonProps"];
     },
     get isDragging() {
       return isDragging();