@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/dialog/types.ts

@@ -1,19 +1,19 @@
-/**
- * Type definitions for dialog accessibility hooks
- */
-
-export interface DOMProps {
-  /** The element's unique identifier. */
-  id?: string;
-}
-
-export interface AriaLabelingProps {
-  /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
-  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
-}
+/**
+ * Type definitions for dialog accessibility hooks
+ */
+
+export interface DOMProps {
+  /** The element's unique identifier. */
+  id?: string;
+}
+
+export interface AriaLabelingProps {
+  /** Defines a string value that labels the current element. */
+  "aria-label"?: string;
+  /** Identifies the element (or elements) that labels the current element. */
+  "aria-labelledby"?: string;
+  /** Identifies the element (or elements) that describes the object. */
+  "aria-describedby"?: string;
+  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
+  "aria-details"?: string;
+}

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,12 +6,9 @@
  * Port of @react-aria/disclosure.
  */
 
-import { type JSX, createMemo } from 'solid-js';
-import { type DisclosureGroupState } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// 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. */
@@ -23,10 +20,6 @@ export interface DisclosureGroupAria {
   groupProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides accessibility implementation for a group of disclosures (accordion).
  *
@@ -48,15 +41,12 @@ export interface DisclosureGroupAria {
  * ```
  */
 export function createDisclosureGroup(
-  props: AriaDisclosureGroupProps,
-  state: DisclosureGroupState
+  _props: MaybeAccessor<AriaDisclosureGroupProps>,
+  _state: DisclosureGroupState,
 ): DisclosureGroupAria {
-  const groupProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({
-    role: 'group',
-    'aria-disabled': props.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";