@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/Button.tsx

@@ -8,16 +8,23 @@
 import {
   type JSX,
   createContext,
+  createEffect,
   createMemo,
+  createSignal,
   splitProps,
   useContext,
-} from 'solid-js';
+} from "solid-js";
 import {
+  announce,
   createButton,
   createFocusRing,
   createHover,
+  createId,
+  mergeProps,
   type AriaButtonProps,
-} from '@proyecto-viviana/solidaria';
+  type HoverEvent,
+  type PressEvent,
+} from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -25,12 +32,70 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-import { DialogTriggerContext, PopoverTriggerContext } from './contexts';
+} from "./utils";
+import { DialogTriggerContext, PopoverTriggerContext } from "./contexts";
+import { ProgressBarContext } from "./ProgressBar";
 
-// ============================================
-// TYPES
-// ============================================
+type RefLike<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(el);
+  } else {
+    ref.current = el;
+  }
+}
+
+function createLiveButtonRenderProps(values: () => ButtonRenderProps): ButtonRenderProps {
+  return {
+    get isHovered() {
+      return values().isHovered;
+    },
+    get isPressed() {
+      return values().isPressed;
+    },
+    get isFocused() {
+      return values().isFocused;
+    },
+    get isFocusVisible() {
+      return values().isFocusVisible;
+    },
+    get isDisabled() {
+      return values().isDisabled;
+    },
+    get isPending() {
+      return values().isPending;
+    },
+  };
+}
+
+function createLiveCustomRootProps(
+  getProps: () => JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  getChildren: () => JSX.Element,
+  ref: (el: HTMLButtonElement) => void,
+): JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  const props = {} as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  const keys = new Set([...Object.keys(getProps()), "children", "ref"]);
+
+  for (const key of keys) {
+    Object.defineProperty(props, key, {
+      enumerable: true,
+      configurable: true,
+      get() {
+        if (key === "children") {
+          return getChildren();
+        }
+        if (key === "ref") {
+          return ref;
+        }
+        return (getProps() as Record<string, unknown>)[key];
+      },
+    });
+  }
+
+  return props;
+}
 
 export interface ButtonRenderProps {
   /** Whether the button is currently hovered with a mouse. */
@@ -43,28 +108,41 @@ export interface ButtonRenderProps {
   isFocusVisible: boolean;
   /** Whether the button is disabled. */
   isDisabled: boolean;
+  /** Whether the button is currently in a pending state. */
+  isPending: boolean;
 }
 
-export interface ButtonProps
-  extends Omit<AriaButtonProps, 'children'>,
-    SlotProps {
+export interface ButtonProps extends Omit<AriaButtonProps, "children">, SlotProps {
   /** The children of the component. A function may be provided to receive render props. */
   children?: RenderChildren<ButtonRenderProps>;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<ButtonRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<ButtonRenderProps>;
+  /** Custom renderer for the outer button element. */
+  render?: (
+    props: JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    renderProps: ButtonRenderProps,
+  ) => JSX.Element;
+  /** Ref for the underlying button element. */
+  ref?: RefLike<HTMLButtonElement>;
+  /** Whether the button is in a pending state. */
+  isPending?: boolean;
+  /** Keeps pending buttons focusable by using aria-disabled without a native disabled attribute. */
+  isPendingFocusable?: boolean;
+  /** Handler called when hover starts. */
+  onHoverStart?: (e: HoverEvent) => void;
+  /** Handler called when hover ends. */
+  onHoverEnd?: (e: HoverEvent) => void;
+  /** Handler called when hover state changes. */
+  onHoverChange?: (isHovered: boolean) => void;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
-export const ButtonContext = createContext<ButtonProps | null>(null);
+export interface ButtonContextValue extends ButtonProps {
+  slots?: Record<string, ButtonProps>;
+}
 
-// ============================================
-// COMPONENT
-// ============================================
+export const ButtonContext = createContext<ButtonContextValue | null>(null);
 
 /**
  * A button allows a user to perform an action.
@@ -84,12 +162,29 @@ export const ButtonContext = createContext<ButtonProps | null>(null);
  * ```
  */
 export function Button(props: ButtonProps): JSX.Element {
-  // Split props
-  const [local, ariaProps] = splitProps(props, [
-    'children',
-    'class',
-    'style',
-    'slot',
+  const contextProps = useContext(ButtonContext);
+  const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+  const contextBaseProps = createMemo<ButtonProps>(() => {
+    if (!contextProps) return {};
+    const { slots: _slots, ...rest } = contextProps;
+    return rest;
+  });
+  const mergedProps = (
+    contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props
+  ) as ButtonProps;
+
+  const [local, ariaProps] = splitProps(mergedProps, [
+    "children",
+    "class",
+    "style",
+    "render",
+    "ref",
+    "slot",
+    "isPending",
+    "isPendingFocusable",
+    "onHoverStart",
+    "onHoverEnd",
+    "onHoverChange",
   ]);
 
   // Check if inside a DialogTrigger or PopoverTrigger - if so, toggle on press
@@ -103,79 +198,102 @@ export function Button(props: ButtonProps): JSX.Element {
   // Helper to resolve isDisabled (handles both boolean and Accessor<boolean>)
   const resolveDisabled = (): boolean => {
     const disabled = ariaProps.isDisabled;
-    if (typeof disabled === 'function') {
+    if (typeof disabled === "function") {
       return disabled();
     }
     return !!disabled;
   };
 
-  // Determine if this button should act as a dialog/popover trigger
-  // We only toggle if:
-  // 1. We have DialogTriggerContext or PopoverTriggerContext (we're inside a trigger)
-  // 2. AND there is NO onPress handler (the trigger button typically has no onPress,
-  //    while close buttons inside dialogs have onPress={close})
-  // This heuristic works because:
-  // - Trigger buttons: don't have onPress, should toggle
-  // - Close buttons: have onPress={close}, should NOT toggle (just call onPress)
-  const isDialogTrigger = () => dialogTriggerContext && !ariaProps.onPress;
-  const isPopoverTrigger = () => popoverTriggerContext && !ariaProps.onPress;
-
-  // Wrap onPress to also toggle dialog/popover if this is a trigger button
-  const handlePress = (e: any) => {
-    // Call original onPress if provided
-    if (typeof ariaProps.onPress === 'function') {
+  const resolvePending = (): boolean => !!local.isPending;
+  const isPendingFocusable = () => local.isPendingFocusable !== false;
+
+  const [resolvedButtonEl, setResolvedButtonEl] = createSignal<HTMLButtonElement | null>(null);
+  const buttonId = createId((ariaProps as Record<string, unknown>).id as string | undefined);
+  const progressId = createId();
+
+  // Explicit trigger ownership: a button toggles overlays only when it is the
+  // registered trigger element for the surrounding trigger context.
+  const isDialogTrigger = () =>
+    !!dialogTriggerContext &&
+    !!resolvedButtonEl() &&
+    dialogTriggerContext.triggerRef() === resolvedButtonEl();
+  const isPopoverTrigger = () =>
+    !!popoverTriggerContext &&
+    !!resolvedButtonEl() &&
+    popoverTriggerContext.triggerRef() === resolvedButtonEl();
+
+  const handlePress = (e: PressEvent) => {
+    if (resolvePending()) {
+      return;
+    }
+    if (typeof ariaProps.onPress === "function") {
       ariaProps.onPress(e);
     }
-    // Toggle dialog only if this is a trigger button (has no onPress handler)
+    // Toggle only when this exact button is the registered trigger element.
     if (isDialogTrigger()) {
       dialogTriggerContext!.state.toggle();
     }
-    // Toggle popover only if this is a trigger button (has no onPress handler)
     if (isPopoverTrigger()) {
       popoverTriggerContext!.state.toggle();
     }
   };
 
-  // Create button aria props
   const buttonAria = createButton({
     ...ariaProps,
     onPress: handlePress,
+    get onPressStart() {
+      return resolvePending() ? undefined : ariaProps.onPressStart;
+    },
+    get onPressEnd() {
+      return resolvePending() ? undefined : ariaProps.onPressEnd;
+    },
+    get onPressUp() {
+      return resolvePending() ? undefined : ariaProps.onPressUp;
+    },
+    get onPressChange() {
+      return resolvePending() ? undefined : ariaProps.onPressChange;
+    },
+    get onClick() {
+      return resolvePending() ? undefined : ariaProps.onClick;
+    },
     get isDisabled() {
-      return resolveDisabled();
+      return resolveDisabled() || resolvePending();
     },
   });
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
-      return resolveDisabled();
+      return resolveDisabled() || resolvePending();
     },
+    onHoverStart: local.onHoverStart,
+    onHoverEnd: local.onHoverEnd,
+    onHoverChange: local.onHoverChange,
   });
 
-  // Render props values
   const renderValues = createMemo<ButtonRenderProps>(() => ({
     isHovered: isHovered(),
-    isPressed: buttonAria.isPressed(),
+    isPressed: buttonAria.isPressed() && !resolvePending(),
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
     isDisabled: resolveDisabled(),
+    isPending: resolvePending(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      // Use merged children so ButtonContext can supply slot/default content.
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Button',
+      defaultClassName: "solidaria-Button",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
   // Remove onClick from DOM props - it's already handled by createPress
   // This matches React Aria Components behavior (Button.tsx line 144: delete DOMProps.onClick)
   const domProps = createMemo(() => {
@@ -185,12 +303,16 @@ export function Button(props: ButtonProps): JSX.Element {
     return filtered;
   });
 
-  // Extract refs from props to combine them manually
-  const buttonPropsRef = (buttonAria.buttonProps as Record<string, unknown>).ref as ((el: HTMLElement) => void) | undefined;
-  const focusPropsRef = (focusProps as Record<string, unknown>).ref as ((el: HTMLElement) => void) | undefined;
-  const hoverPropsRef = (hoverProps as Record<string, unknown>).ref as ((el: HTMLElement) => void) | undefined;
+  const buttonPropsRef = (buttonAria.buttonProps as Record<string, unknown>).ref as
+    | ((el: HTMLElement) => void)
+    | undefined;
+  const focusPropsRef = (focusProps as Record<string, unknown>).ref as
+    | ((el: HTMLElement) => void)
+    | undefined;
+  const hoverPropsRef = (hoverProps as Record<string, unknown>).ref as
+    | ((el: HTMLElement) => void)
+    | undefined;
 
-  // Remove ref from spread props to avoid type conflicts
   const cleanButtonProps = () => {
     const { ref: _ref1, ...rest } = buttonAria.buttonProps as Record<string, unknown>;
     return rest;
@@ -203,36 +325,155 @@ export function Button(props: ButtonProps): JSX.Element {
     const { ref: _ref3, ...rest } = hoverProps as Record<string, unknown>;
     return rest;
   };
+  const ariaLabelledBy = createMemo(() => {
+    const labelledBy = cleanButtonProps()["aria-labelledby"] as string | undefined;
+    if (!resolvePending()) {
+      return labelledBy;
+    }
+
+    if (labelledBy) {
+      return `${labelledBy} ${progressId}`;
+    }
+
+    if (cleanButtonProps()["aria-label"]) {
+      return `${buttonId} ${progressId}`;
+    }
+
+    return labelledBy;
+  });
 
-  // Ref callback that combines all refs
   const handleRef = (el: HTMLButtonElement) => {
-    // Call the focusable ref for autoFocus support
+    setResolvedButtonEl(el);
+    assignRef(local.ref, el);
+
     buttonPropsRef?.(el);
     focusPropsRef?.(el);
     hoverPropsRef?.(el);
 
-    // If this button is a popover trigger, register it
-    if (isPopoverTrigger() && popoverTriggerContext?.setTriggerRef) {
+    // Register trigger ownership for surrounding trigger contexts.
+    if (dialogTriggerContext?.setTriggerRef) {
+      if (!el.id) {
+        el.id = dialogTriggerContext.triggerId;
+      }
+      dialogTriggerContext.setTriggerRef(el);
+    }
+    if (popoverTriggerContext?.setTriggerRef) {
       popoverTriggerContext.setTriggerRef(el);
     }
   };
+  const buttonType = () =>
+    (buttonAria.buttonProps as Record<string, unknown>).type === "submit" && resolvePending()
+      ? "button"
+      : ((buttonAria.buttonProps as Record<string, unknown>).type as
+          | "button"
+          | "submit"
+          | "reset"
+          | undefined);
+  const triggerAriaProps = () => {
+    const dialogTriggerProps = dialogTriggerContext?.triggerProps;
+    if (dialogTriggerProps && isDialogTrigger()) {
+      const next: Record<string, unknown> = {};
+      for (const name of ["aria-haspopup", "aria-expanded", "aria-controls"]) {
+        if (dialogTriggerProps[name] != null) {
+          next[name] = dialogTriggerProps[name];
+        }
+      }
+      return next;
+    }
+
+    const triggerProps = popoverTriggerContext?.triggerProps;
+    if (!triggerProps || !isPopoverTrigger()) {
+      return {};
+    }
+
+    const next: Record<string, unknown> = {};
+    for (const name of ["aria-haspopup", "aria-expanded", "aria-controls"]) {
+      if (triggerProps[name] != null) {
+        next[name] = triggerProps[name];
+      }
+    }
+    return next;
+  };
+  const disablePendingInteractions = (props: Record<string, unknown>) => {
+    if (!resolvePending()) {
+      return props;
+    }
+
+    const next = { ...props };
+    for (const key of Object.keys(next)) {
+      if (key.startsWith("on") && !key.includes("Focus") && !key.includes("Blur")) {
+        next[key] = undefined;
+      }
+    }
+    next.href = undefined;
+    next.target = undefined;
+    return next;
+  };
+  const dataState = (value: boolean) => (value ? "true" : undefined);
+  const buttonChildren = () => renderProps.renderChildren();
+  const buttonContent = () => (
+    <ProgressBarContext.Provider value={{ id: progressId }}>
+      {buttonChildren()}
+    </ProgressBarContext.Provider>
+  );
+  let wasPending = resolvePending();
+  createEffect(() => {
+    const pending = resolvePending();
+    const message = { "aria-labelledby": ariaLabelledBy() || buttonId };
+
+    if (!wasPending && isFocused() && pending) {
+      announce(message, "assertive");
+    } else if (wasPending && isFocused() && !pending) {
+      announce(message, "assertive");
+    }
+
+    wasPending = pending;
+  });
+  const rootProps = () =>
+    ({
+      ...domProps(),
+      ...disablePendingInteractions(cleanButtonProps()),
+      ...triggerAriaProps(),
+      ...cleanFocusProps(),
+      ...cleanHoverProps(),
+      type: buttonType(),
+      id: buttonId,
+      class: renderProps.class(),
+      style: renderProps.style(),
+      slot: local.slot,
+      disabled: resolvePending() && isPendingFocusable() ? undefined : cleanButtonProps().disabled,
+      "aria-labelledby": ariaLabelledBy(),
+      "aria-disabled": resolvePending()
+        ? "true"
+        : (cleanButtonProps()["aria-disabled"] ?? ariaProps["aria-disabled"]),
+      "data-pressed": dataState(buttonAria.isPressed() && !resolvePending()),
+      "data-hovered": dataState(isHovered()),
+      "data-focused": dataState(isFocused()),
+      "data-focus-visible": dataState(isFocusVisible()),
+      "data-disabled": dataState(resolveDisabled()),
+      "data-pending": dataState(resolvePending()),
+    }) as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  const customRootProps = createLiveCustomRootProps(rootProps, buttonContent, handleRef);
+  const customRenderValues = createLiveButtonRenderProps(renderValues);
 
-  return (
+  return local.render ? (
+    local.render(customRootProps, customRenderValues)
+  ) : (
     <button
       ref={handleRef}
-      {...domProps()}
-      {...cleanButtonProps()}
-      {...cleanFocusProps()}
-      {...cleanHoverProps()}
+      {...rootProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-pressed={buttonAria.isPressed() || undefined}
-      data-hovered={isHovered() || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
-      data-disabled={resolveDisabled() || undefined}
+      attr:data-pressed={(rootProps() as Record<string, unknown>)["data-pressed"] as string}
+      attr:data-hovered={(rootProps() as Record<string, unknown>)["data-hovered"] as string}
+      attr:data-focused={(rootProps() as Record<string, unknown>)["data-focused"] as string}
+      attr:data-focus-visible={
+        (rootProps() as Record<string, unknown>)["data-focus-visible"] as string
+      }
+      attr:data-disabled={(rootProps() as Record<string, unknown>)["data-disabled"] as string}
+      attr:data-pending={(rootProps() as Record<string, unknown>)["data-pending"] as string}
     >
-      {renderProps.renderChildren()}
+      {buttonContent()}
     </button>
   );
 }