@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/Disclosure.tsx

@@ -14,7 +14,7 @@ import {
   createSignal,
   splitProps,
   useContext,
-} from 'solid-js';
+} from "solid-js";
 import {
   createDisclosureState,
   createDisclosureGroupState,
@@ -22,11 +22,13 @@ import {
   type DisclosureGroupState,
   type DisclosureStateProps,
   type DisclosureGroupStateProps,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   createDisclosure,
   createDisclosureGroup,
-} from '@proyecto-viviana/solidaria';
+  createFocusRing,
+  mergeProps,
+} from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -34,17 +36,31 @@ import {
   useRenderProps,
   filterDOMProps,
   dataAttr,
-} from './utils';
+} from "./utils";
 
-// ============================================
-// TYPES
-// ============================================
+type RefLike<T> = T | ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) {
+    return;
+  }
+
+  if (typeof ref === "function") {
+    (ref as (el: T) => void)(el);
+  } else if (typeof ref === "object" && "current" in ref) {
+    ref.current = el;
+  }
+}
 
 export interface DisclosureRenderProps {
   /** Whether the disclosure is expanded. */
   isExpanded: boolean;
+  /** Whether the disclosure has keyboard focus within. */
+  isFocusVisibleWithin: boolean;
   /** Whether the disclosure is disabled. */
   isDisabled: boolean;
+  /** The disclosure state. */
+  state: DisclosureState;
 }
 
 export interface DisclosureGroupRenderProps {
@@ -63,6 +79,8 @@ export interface DisclosureProps extends DisclosureStateProps {
   isDisabled?: boolean;
   /** A unique identifier for the disclosure (used in groups). */
   id?: string;
+  /** A ref for the disclosure root element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
 export interface DisclosureGroupProps extends DisclosureGroupStateProps {
@@ -72,30 +90,40 @@ export interface DisclosureGroupProps extends DisclosureGroupStateProps {
   class?: ClassNameOrFunction<DisclosureGroupRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<DisclosureGroupRenderProps>;
+  /** A ref for the disclosure group root element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
-export interface DisclosureTriggerProps {
+export interface DisclosureTriggerProps extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children" | "class" | "style" | "type" | "ref"
+> {
   /** The children of the trigger. */
   children?: JSX.Element;
   /** The CSS className for the element. */
   class?: string;
   /** The inline style for the element. */
   style?: JSX.CSSProperties;
+  /** A ref for the trigger button element. */
+  ref?: RefLike<HTMLButtonElement>;
 }
 
-export interface DisclosurePanelProps {
+export interface DisclosurePanelProps extends Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "children" | "class" | "style" | "role" | "ref"
+> {
   /** The children of the panel. */
   children?: RenderChildren<DisclosureRenderProps>;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<DisclosureRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<DisclosureRenderProps>;
+  /** The accessibility role for the disclosure panel. */
+  role?: "group" | "region";
+  /** A ref for the panel element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 interface DisclosureContextValue {
   state: DisclosureState;
   isDisabled: () => boolean;
@@ -103,10 +131,12 @@ interface DisclosureContextValue {
   disclosureAria: {
     readonly buttonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
     readonly panelProps: JSX.HTMLAttributes<HTMLElement>;
+    readonly isPressed: () => boolean;
   };
 }
 
 export const DisclosureContext = createContext<DisclosureContextValue | null>(null);
+export const DisclosureStateContext = createContext<DisclosureState | null>(null);
 
 export function useDisclosureContext(): DisclosureContextValue | null {
   return useContext(DisclosureContext);
@@ -117,15 +147,12 @@ interface DisclosureGroupContextValue {
 }
 
 export const DisclosureGroupContext = createContext<DisclosureGroupContextValue | null>(null);
+export const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
 
 export function useDisclosureGroupContext(): DisclosureGroupContextValue | null {
   return useContext(DisclosureGroupContext);
 }
 
-// ============================================
-// DISCLOSURE GROUP (Accordion)
-// ============================================
-
 /**
  * DisclosureGroup manages a group of Disclosure components.
  * Use this to create an accordion where only one item can be expanded at a time.
@@ -150,31 +177,28 @@ export function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {
   // the context provider renders causes them to evaluate outside the context.
   // See: https://github.com/solidjs/solid/issues/182
   const [local, rest] = splitProps(props, [
-    'class',
-    'style',
-    'allowsMultipleExpanded',
-    'isDisabled',
-    'expandedKeys',
-    'defaultExpandedKeys',
-    'onExpandedChange',
+    "class",
+    "style",
+    "allowsMultipleExpanded",
+    "isDisabled",
+    "expandedKeys",
+    "defaultExpandedKeys",
+    "onExpandedChange",
+    "ref",
   ]);
 
   // 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 },
-    state
-  );
+  const { groupProps } = createDisclosureGroup(() => ({ isDisabled: local.isDisabled }), state);
 
-  // Render props values
   const renderValues = createMemo<DisclosureGroupRenderProps>(() => ({
     isDisabled: state.isDisabled,
   }));
@@ -184,39 +208,38 @@ export function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-DisclosureGroup',
+      defaultClassName: "solidaria-DisclosureGroup",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
 
-  // Context value
   const contextValue: DisclosureGroupContextValue = { state };
 
   // Extract ref from groupProps to avoid type conflicts
   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
+          ref={(el) => assignRef(local.ref, el)}
+          {...domProps()}
+          {...cleanGroupProps}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={dataAttr(state.isDisabled)}
+        >
+          {props.children}
+        </div>
+      </DisclosureGroupContext.Provider>
+    </DisclosureGroupStateContext.Provider>
   );
 }
 
-// ============================================
-// DISCLOSURE
-// ============================================
-
 /**
  * Disclosure is a widget that can be toggled to show or hide content.
  *
@@ -234,13 +257,14 @@ export function Disclosure(props: DisclosureProps): JSX.Element {
   // the context provider renders causes them to evaluate outside the context.
   // See: https://github.com/solidjs/solid/issues/182
   const [local, rest] = splitProps(props, [
-    'class',
-    'style',
-    'isDisabled',
-    'isExpanded',
-    'defaultExpanded',
-    'onExpandedChange',
-    'id',
+    "class",
+    "style",
+    "isDisabled",
+    "isExpanded",
+    "defaultExpanded",
+    "onExpandedChange",
+    "id",
+    "ref",
   ]);
 
   // Check if we're inside a DisclosureGroup
@@ -280,13 +304,17 @@ export function Disclosure(props: DisclosureProps): JSX.Element {
   const disclosureAria = createDisclosure(
     () => ({ isDisabled: isDisabled() }),
     state,
-    panelRef  // Pass the accessor directly
+    panelRef, // Pass the accessor directly
   );
+  const { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = createFocusRing({
+    within: true,
+  });
 
-  // Render props values
   const renderValues = createMemo<DisclosureRenderProps>(() => ({
     isExpanded: state.isExpanded(),
+    isFocusVisibleWithin: isFocusVisibleWithin(),
     isDisabled: isDisabled(),
+    state,
   }));
 
   // Resolve render props - don't pass children, we'll render props.children directly
@@ -294,50 +322,53 @@ export function Disclosure(props: DisclosureProps): JSX.Element {
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Disclosure',
+      defaultClassName: "solidaria-Disclosure",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
 
   // Context value - pass the disclosureAria object with getters intact
   const contextValue: DisclosureContextValue = {
     state,
-    isDisabled,  // Pass the accessor function, not the value
+    isDisabled, // Pass the accessor function, not the value
     disclosureAria,
   };
 
-  // Setter for panel ref
   const setPanelRef = (el: HTMLElement | null) => {
     setPanelRefSignal(el);
   };
 
   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
+            ref={(el) => assignRef(local.ref, el)}
+            {...mergeProps(
+              domProps() as Record<string, unknown>,
+              focusWithinProps as Record<string, unknown>,
+            )}
+            class={renderProps.class()}
+            style={renderProps.style()}
+            data-expanded={dataAttr(state.isExpanded())}
+            data-disabled={dataAttr(isDisabled())}
+            data-focus-visible-within={dataAttr(isFocusVisibleWithin())}
+          >
+            {props.children}
+          </div>
+        </DisclosurePanelRefContext.Provider>
+      </DisclosureContext.Provider>
+    </DisclosureStateContext.Provider>
   );
 }
 
 // Internal context to pass panel ref setter
 const DisclosurePanelRefContext = createContext<((el: HTMLElement | null) => void) | null>(null);
 
-// ============================================
-// DISCLOSURE TRIGGER
-// ============================================
-
 /**
  * DisclosureTrigger is the button that toggles the disclosure.
  * Pattern matches SelectTrigger for consistency.
@@ -346,7 +377,7 @@ export function DisclosureTrigger(props: DisclosureTriggerProps): JSX.Element {
   // Get context - now safe because parent uses lazy children evaluation
   const context = useContext(DisclosureContext);
   if (!context) {
-    throw new Error('DisclosureTrigger must be used within a Disclosure');
+    throw new Error("DisclosureTrigger must be used within a Disclosure");
   }
 
   const { state, disclosureAria, isDisabled } = context;
@@ -360,80 +391,102 @@ export function DisclosureTrigger(props: DisclosureTriggerProps): JSX.Element {
     const { ref: _ref, ...rest } = disclosureAria.buttonProps as Record<string, unknown>;
     return rest;
   };
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const [local, rest] = splitProps(props, ["children", "class", "style", "ref"]);
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
+  const cleanFocusProps = () => {
+    const { ref: _ref, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
 
   return (
     <button
-      {...getButtonProps()}
+      {...mergeProps(domProps() as Record<string, unknown>, getButtonProps(), cleanFocusProps())}
+      ref={(el) => assignRef(local.ref, el)}
       type="button"
-      class={props.class}
-      style={props.style}
+      class={local.class}
+      style={local.style}
       data-expanded={dataAttr(isExpanded())}
       data-disabled={dataAttr(isDisabled())}
+      data-pressed={dataAttr(disclosureAria.isPressed())}
+      data-focused={dataAttr(isFocused())}
+      data-focus-visible={dataAttr(isFocusVisible())}
     >
-      {props.children}
+      {local.children}
     </button>
   );
 }
 
-// ============================================
-// DISCLOSURE PANEL
-// ============================================
-
 /**
  * DisclosurePanel contains the content that is shown/hidden.
  */
 export function DisclosurePanel(props: DisclosurePanelProps): JSX.Element {
   // Get context - now safe because parent uses lazy children evaluation
   const context = useContext(DisclosureContext);
+  if (!context) {
+    throw new Error("DisclosurePanel must be used within a Disclosure");
+  }
   const panelRefSetter = useContext(DisclosurePanelRefContext);
 
-  const [local, rest] = splitProps(props, ['class', 'style']);
+  const [local, rest] = splitProps(props, ["class", "style", "role", "ref"]);
+  const { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = createFocusRing({
+    within: true,
+  });
 
   // Reactive accessors
-  const isExpanded = () => context?.state.isExpanded() ?? false;
-  const isDisabled = () => context?.isDisabled() ?? false;
+  const isExpanded = () => context.state.isExpanded();
+  const isDisabled = () => context.isDisabled();
 
-  // Render props values
   const renderValues = createMemo<DisclosureRenderProps>(() => ({
     isExpanded: isExpanded(),
+    isFocusVisibleWithin: isFocusVisibleWithin(),
     isDisabled: isDisabled(),
+    state: context.state,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-DisclosurePanel',
+      defaultClassName: "solidaria-DisclosurePanel",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
 
   // Get panelProps from the getter each time - this ensures reactivity
   // IMPORTANT: Call the getter fresh each render to get updated hidden attribute, etc.
   const getPanelProps = () => {
-    if (!context) return { id: undefined, role: 'region', 'aria-labelledby': undefined, hidden: true };
     const { ref: _ref, ...rest } = context.disclosureAria.panelProps as Record<string, unknown>;
     return rest;
   };
 
   return (
     <div
-      {...domProps()}
+      {...mergeProps(
+        domProps() as Record<string, unknown>,
+        focusWithinProps as Record<string, unknown>,
+      )}
       {...getPanelProps()}
-      ref={(el) => panelRefSetter?.(el)}
+      ref={(el) => {
+        panelRefSetter?.(el);
+        assignRef(local.ref, el);
+      }}
+      role={local.role ?? "group"}
       class={renderProps.class()}
       style={renderProps.style()}
       data-expanded={dataAttr(isExpanded())}
+      data-focus-visible-within={dataAttr(isFocusVisibleWithin())}
     >
       {renderProps.renderChildren()}
     </div>
   );
 }
 
-// Re-export state types for convenience
 export type { DisclosureState, DisclosureGroupState };