@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/Button.tsx

@@ -8,18 +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,
+  type HoverEvent,
   type PressEvent,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -27,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. */
@@ -49,28 +112,37 @@ export interface ButtonRenderProps {
   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.
@@ -91,15 +163,28 @@ export const ButtonContext = createContext<ButtonProps | null>(null);
  */
 export function Button(props: ButtonProps): JSX.Element {
   const contextProps = useContext(ButtonContext);
-  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ButtonProps;
+  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;
 
-  // Split props
   const [local, ariaProps] = splitProps(mergedProps, [
-    'children',
-    'class',
-    'style',
-    'slot',
-    'isPending',
+    "children",
+    "class",
+    "style",
+    "render",
+    "ref",
+    "slot",
+    "isPending",
+    "isPendingFocusable",
+    "onHoverStart",
+    "onHoverEnd",
+    "onHoverChange",
   ]);
 
   // Check if inside a DialogTrigger or PopoverTrigger - if so, toggle on press
@@ -113,30 +198,35 @@ 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;
   };
 
   const resolvePending = (): boolean => !!local.isPending;
+  const isPendingFocusable = () => local.isPendingFocusable !== false;
 
-  let buttonEl: HTMLButtonElement | undefined;
+  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 && !!buttonEl && dialogTriggerContext.triggerRef() === buttonEl;
+    !!dialogTriggerContext &&
+    !!resolvedButtonEl() &&
+    dialogTriggerContext.triggerRef() === resolvedButtonEl();
   const isPopoverTrigger = () =>
-    !!popoverTriggerContext && !!buttonEl && popoverTriggerContext.triggerRef() === buttonEl;
+    !!popoverTriggerContext &&
+    !!resolvedButtonEl() &&
+    popoverTriggerContext.triggerRef() === resolvedButtonEl();
 
-  // Wrap onPress to also toggle dialog/popover if this is a trigger button
   const handlePress = (e: PressEvent) => {
     if (resolvePending()) {
       return;
     }
-    // Call original onPress if provided
-    if (typeof ariaProps.onPress === 'function') {
+    if (typeof ariaProps.onPress === "function") {
       ariaProps.onPress(e);
     }
     // Toggle only when this exact button is the registered trigger element.
@@ -148,7 +238,6 @@ export function Button(props: ButtonProps): JSX.Element {
     }
   };
 
-  // Create button aria props
   const buttonAria = createButton({
     ...ariaProps,
     onPress: handlePress,
@@ -172,17 +261,17 @@ export function Button(props: ButtonProps): JSX.Element {
     },
   });
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return resolveDisabled() || resolvePending();
     },
+    onHoverStart: local.onHoverStart,
+    onHoverEnd: local.onHoverEnd,
+    onHoverChange: local.onHoverChange,
   });
 
-  // Render props values
   const renderValues = createMemo<ButtonRenderProps>(() => ({
     isHovered: isHovered(),
     isPressed: buttonAria.isPressed() && !resolvePending(),
@@ -192,19 +281,19 @@ export function Button(props: ButtonProps): JSX.Element {
     isPending: resolvePending(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       // Use merged children so ButtonContext can supply slot/default content.
-      children: local.children,
+      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(() => {
@@ -214,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;
@@ -232,51 +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) => {
-    buttonEl = el;
+    setResolvedButtonEl(el);
+    assignRef(local.ref, el);
 
-    // Call the focusable ref for autoFocus support
     buttonPropsRef?.(el);
     focusPropsRef?.(el);
     hoverPropsRef?.(el);
 
     // 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 };
 
-  return (
+    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 local.render ? (
+    local.render(customRootProps, customRenderValues)
+  ) : (
     <button
       ref={handleRef}
-      {...domProps()}
-      {...cleanButtonProps()}
-      {...cleanFocusProps()}
-      {...cleanHoverProps()}
-      type={
-        (buttonAria.buttonProps as Record<string, unknown>).type === 'submit' && resolvePending()
-          ? 'button'
-          : (buttonAria.buttonProps as Record<string, unknown>).type as
-              | 'button'
-              | 'submit'
-              | 'reset'
-              | undefined
-      }
+      {...rootProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-pressed={(buttonAria.isPressed() && !resolvePending()) || undefined}
-      data-hovered={isHovered() || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
-      data-disabled={resolveDisabled() || undefined}
-      data-pending={resolvePending() || 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>
   );
 }