@proyecto-viviana/solidaria-components 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solidaria-components",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Pre-wired headless components for SolidJS - port of react-aria-components",
   "keywords": [
     "accessibility",

package/src/Button.tsx

@@ -97,6 +97,44 @@ function createLiveCustomRootProps(
   return props;
 }
 
+const buttonAriaOverrideProps = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-details",
+  "aria-haspopup",
+  "aria-expanded",
+  "aria-controls",
+  "aria-pressed",
+  "aria-current",
+  "aria-disabled",
+] as const;
+
+function createForwardedAriaButtonProps(
+  source: AriaButtonProps,
+  overrides: AriaButtonProps,
+): AriaButtonProps {
+  const result = {} as AriaButtonProps;
+
+  for (const key in source) {
+    Object.defineProperty(result, key, {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return (source as Record<string, unknown>)[key];
+      },
+    });
+  }
+
+  for (const key in overrides) {
+    const descriptor = Object.getOwnPropertyDescriptor(overrides, key);
+    if (!descriptor) continue;
+    Object.defineProperty(result, key, { ...descriptor, enumerable: true, configurable: true });
+  }
+
+  return result;
+}
+
 export interface ButtonRenderProps {
   /** Whether the button is currently hovered with a mouse. */
   isHovered: boolean;
@@ -238,28 +276,29 @@ export function Button(props: ButtonProps): JSX.Element {
     }
   };
 
-  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() || resolvePending();
-    },
-  });
+  const buttonAria = createButton(
+    createForwardedAriaButtonProps(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() || resolvePending();
+      },
+    }),
+  );
 
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
@@ -394,6 +433,13 @@ export function Button(props: ButtonProps): JSX.Element {
     }
     return next;
   };
+  const directAriaProps = () => {
+    const next: Record<string, unknown> = {};
+    for (const name of buttonAriaOverrideProps) {
+      next[name] = (ariaProps as Record<string, unknown>)[name];
+    }
+    return next;
+  };
   const disablePendingInteractions = (props: Record<string, unknown>) => {
     if (!resolvePending()) {
       return props;
@@ -433,6 +479,7 @@ export function Button(props: ButtonProps): JSX.Element {
     ({
       ...domProps(),
       ...disablePendingInteractions(cleanButtonProps()),
+      ...directAriaProps(),
       ...triggerAriaProps(),
       ...cleanFocusProps(),
       ...cleanHoverProps(),

package/src/ComboBox.tsx

@@ -9,6 +9,7 @@ import {
   type JSX,
   type Accessor,
   createContext,
+  createEffect,
   createMemo,
   onCleanup,
   splitProps,
@@ -290,6 +291,7 @@ export interface ComboBoxOptionProps<T>
 
 interface ComboBoxContextValue<T> {
   state: ComboBoxState<T>;
+  listState: ListState<T>;
   inputProps: () => JSX.InputHTMLAttributes<HTMLInputElement>;
   buttonProps: () => JSX.HTMLAttributes<HTMLElement>;
   listBoxProps: () => JSX.HTMLAttributes<HTMLElement>;
@@ -308,13 +310,31 @@ interface ComboBoxContextValue<T> {
   setTriggerRef: (el: HTMLElement | null) => void;
   listBoxRef: () => HTMLElement | null;
   setListBoxRef: (el: HTMLElement | null) => void;
+  registerOptionAction: (key: Key, action: (() => void) | undefined) => void;
+  runOptionAction: (key: Key) => void;
   slots?: Record<string, Partial<ComboBoxProps<T>>>;
 }
 
+type InputKeyboardEvent = KeyboardEvent & {
+  currentTarget: HTMLInputElement;
+  target: Element;
+};
+
 export const ComboBoxContext = createContext<ComboBoxContextValue<unknown> | null>(null);
 export const ComboBoxStateContext = createContext<ComboBoxState<unknown> | null>(null);
 export const ComboBoxValueContext = ComboBoxContext;
 
+function callInputKeyDown(
+  handler: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent> | undefined,
+  event: InputKeyboardEvent,
+) {
+  if (typeof handler === "function") {
+    handler(event);
+  } else if (handler) {
+    handler[0](handler[1], event);
+  }
+}
+
 /**
  * A combobox combines a text input with a listbox, allowing users to filter a list of options.
  */
@@ -360,6 +380,10 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
   let buttonRef: HTMLElement | null = null;
   let triggerRef: HTMLElement | null = null;
   let listBoxRef: HTMLElement | null = null;
+  const optionActions = new Map<Key, () => void>();
+  const runOptionAction = (key: Key) => {
+    optionActions.get(key)?.();
+  };
 
   const state = createComboBoxState<T>({
     get items() {
@@ -441,6 +465,7 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
       return ariaProps.isRequired;
     },
   });
+  const listState = createComboBoxListStateAdapter(state);
 
   const effectiveFormValue = createMemo<"key" | "text">(() => {
     if (stateProps.allowsCustomValue) {
@@ -472,6 +497,28 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
     () => listBoxRef,
   );
 
+  const getInputProps = () => {
+    const inputProps = comboBoxAria.inputProps;
+    const originalOnKeyDown = inputProps.onKeyDown;
+
+    return {
+      ...inputProps,
+      onKeyDown: (event: InputKeyboardEvent) => {
+        const focusedKey = state.focusedKey();
+        const shouldRunAction =
+          event.key === "Enter" &&
+          state.isOpen() &&
+          focusedKey != null &&
+          !state.isKeyDisabled(focusedKey);
+        const optionAction = shouldRunAction ? optionActions.get(focusedKey) : undefined;
+
+        callInputKeyDown(originalOnKeyDown, event);
+
+        optionAction?.();
+      },
+    } as JSX.InputHTMLAttributes<HTMLInputElement>;
+  };
+
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return ariaProps.isDisabled;
@@ -519,9 +566,13 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
       value={
         {
           state,
-          inputProps: () => comboBoxAria.inputProps,
+          listState,
+          inputProps: getInputProps,
           buttonProps: () => comboBoxAria.buttonProps,
-          listBoxProps: () => comboBoxAria.listBoxProps,
+          listBoxProps: () => ({
+            ...comboBoxAria.listBoxProps,
+            onAction: runOptionAction,
+          }),
           labelProps: () => comboBoxAria.labelProps,
           descriptionProps: () => comboBoxAria.descriptionProps,
           errorMessageProps: () => comboBoxAria.errorMessageProps,
@@ -545,6 +596,14 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
           setListBoxRef: (el) => {
             listBoxRef = el;
           },
+          registerOptionAction: (key, action) => {
+            if (action) {
+              optionActions.set(key, action);
+            } else {
+              optionActions.delete(key);
+            }
+          },
+          runOptionAction,
           slots: local.slots,
         } as ComboBoxContextValue<unknown>
       }
@@ -850,7 +909,7 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
     throw new Error("ComboBoxListBox must be used within a ComboBox");
   }
   const context = rawContext as ComboBoxContextValue<T>;
-  const { state: comboBoxState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
+  const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
   const state = comboBoxState;
 
   let listBoxRef: HTMLUListElement | undefined;
@@ -880,7 +939,7 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
   // Create listbox aria props using ComboBoxState's ListState-compatible interface
   const { listBoxProps } = createListBox(
     context.listBoxProps as unknown as AriaListBoxProps,
-    createComboBoxListStateAdapter(state),
+    listState,
   );
 
   const renderValues = createMemo<ComboBoxListBoxRenderProps>(() => ({
@@ -976,15 +1035,24 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
 
   const stateContext = useContext(ComboBoxStateContext);
   const comboBoxContext = useContext(ComboBoxContext);
-  if (!stateContext) {
+  if (!stateContext || !comboBoxContext) {
     throw new Error("ComboBoxOption must be used within a ComboBox");
   }
   const state = stateContext as ComboBoxState<T>;
+  const listState = (comboBoxContext as ComboBoxContextValue<T>).listState;
   const optionId = () => {
     const listBoxId = getComboBoxData(state as ComboBoxState<unknown>)?.listBoxId;
     return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
   };
 
+  createEffect(() => {
+    const key = local.id;
+    comboBoxContext?.registerOptionAction(key, local.onAction);
+    onCleanup(() => {
+      comboBoxContext?.registerOptionAction(key, undefined);
+    });
+  });
+
   // Create option aria props using ComboBoxState's ListState-compatible interface
   const optionAria = createOption<T>(
     {
@@ -998,9 +1066,6 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
       get "aria-label"() {
         return ariaProps["aria-label"];
       },
-      get onAction() {
-        return local.onAction;
-      },
       shouldSelectOnPressUp: true,
       shouldFocusOnHover: true,
       shouldUseVirtualFocus: true,
@@ -1014,8 +1079,11 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
       get onHoverChange() {
         return ariaProps.onHoverChange;
       },
+      get onAction() {
+        return local.onAction;
+      },
     },
-    createComboBoxListStateAdapter(state),
+    listState,
   );
 
   const isOptionFocusVisible = () =>

package/src/DatePicker.tsx

@@ -39,6 +39,7 @@ import {
   type CalendarState,
   type RangeCalendarState,
   type DateFieldStateProps,
+  type DatePickerStateOptions,
   type CalendarDate,
   type DateValue,
   type RangeCalendarStateProps,
@@ -349,11 +350,65 @@ function DatePickerInner<T extends DateValue = CalendarDate>(
   const [triggerRef, setTriggerRef] = createSignal<HTMLElement | null>(null);
   const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);
 
-  // Unified state using createDatePickerState as single source of truth
-  const datePickerState = createDatePickerState<T>({
-    ...(stateProps as unknown as import("@proyecto-viviana/solid-stately").DatePickerStateOptions<T>),
-    shouldCloseOnSelect: local.shouldCloseOnSelect,
-  });
+  // Unified state using createDatePickerState as single source of truth.
+  // Use getters here so controlled props keep tracking after splitProps.
+  const datePickerStateProps = {
+    get value() {
+      return stateProps.value;
+    },
+    get defaultValue() {
+      return stateProps.defaultValue;
+    },
+    get onChange() {
+      return stateProps.onChange;
+    },
+    get minValue() {
+      return stateProps.minValue;
+    },
+    get maxValue() {
+      return stateProps.maxValue;
+    },
+    get isDisabled() {
+      return stateProps.isDisabled;
+    },
+    get isReadOnly() {
+      return stateProps.isReadOnly;
+    },
+    get isRequired() {
+      return stateProps.isRequired;
+    },
+    get granularity() {
+      return stateProps.granularity;
+    },
+    get hourCycle() {
+      return stateProps.hourCycle;
+    },
+    get hideTimeZone() {
+      return stateProps.hideTimeZone;
+    },
+    get placeholderValue() {
+      return stateProps.placeholderValue;
+    },
+    get shouldCloseOnSelect() {
+      return local.shouldCloseOnSelect;
+    },
+    get defaultOpen() {
+      return stateProps.defaultOpen;
+    },
+    get isOpen() {
+      return stateProps.isOpen;
+    },
+    get onOpenChange() {
+      return stateProps.onOpenChange;
+    },
+    get isDateUnavailable() {
+      return stateProps.isDateUnavailable;
+    },
+    get validationState() {
+      return stateProps.validationState;
+    },
+  } satisfies DatePickerStateOptions<T>;
+  const datePickerState = createDatePickerState<T>(datePickerStateProps);
 
   const overlayState = {
     get isOpen() {

package/src/Menu.tsx

@@ -373,6 +373,7 @@ export function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
   const triggerId = createUniqueId();
   const menuId = createUniqueId();
   let hoverTimeout: number | undefined;
+  let hasPointerHover = false;
   const delay = () => props.delay ?? 200;
 
   const clearHoverTimeout = () => {
@@ -387,6 +388,16 @@ export function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
     state.open();
   };
 
+  const queueOpenSubmenu = () => {
+    clearHoverTimeout();
+    const open = () => state.open();
+    if (typeof queueMicrotask === "function") {
+      queueMicrotask(open);
+    } else {
+      Promise.resolve().then(open);
+    }
+  };
+
   const scheduleOpen = () => {
     clearHoverTimeout();
     hoverTimeout = window.setTimeout(() => {
@@ -395,6 +406,28 @@ export function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
     }, delay());
   };
 
+  const schedulePointerOpen = (event: PointerEvent) => {
+    hasPointerHover = true;
+    if (event.isTrusted === false) {
+      queueOpenSubmenu();
+      return;
+    }
+
+    scheduleOpen();
+  };
+
+  const openFromMouseHover = () => {
+    if (state.isOpen()) {
+      return;
+    }
+
+    if (hasPointerHover) {
+      scheduleOpen();
+    } else {
+      queueOpenSubmenu();
+    }
+  };
+
   onCleanup(clearHoverTimeout);
 
   const menuTriggerContext = createMemo<MenuTriggerContextValue>(() => ({
@@ -430,17 +463,22 @@ export function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
     props: () => ({
       id: triggerId,
       "aria-haspopup": "menu",
-      "aria-expanded": state.isOpen() || undefined,
-      "aria-controls": state.isOpen() ? menuId : undefined,
+      get "aria-expanded"() {
+        return state.isOpen() || undefined;
+      },
+      get "aria-controls"() {
+        return state.isOpen() ? menuId : undefined;
+      },
       onPointerEnter: (event: PointerEvent) => {
         if (event.pointerType === "touch") return;
-        scheduleOpen();
+        schedulePointerOpen(event);
       },
       onPointerOver: (event: PointerEvent) => {
         if (event.pointerType === "touch") return;
-        scheduleOpen();
+        schedulePointerOpen(event);
       },
-      onMouseEnter: () => scheduleOpen(),
+      onMouseEnter: openFromMouseHover,
+      onMouseOver: openFromMouseHover,
       onKeyDown: (event: KeyboardEvent) => {
         if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
           event.preventDefault();
@@ -1028,6 +1066,11 @@ export function Menu<T>(props: MenuProps<T>): JSX.Element {
       dndDropIndicator(index, position) ??
       parentCollectionRenderer?.renderDropIndicator?.(index, position),
   }));
+  const menuItemContextValue = createMemo<MenuItemContextValue>(() =>
+    local.shouldCloseOnSelect !== undefined
+      ? { closeOnSelect: local.shouldCloseOnSelect }
+      : {},
+  );
   const menuListChildren = () => (
     <SharedElementTransition>
       {state.collection().size === 0 && !usesStaticChildren() && local.renderEmptyState ? (
@@ -1156,7 +1199,7 @@ export function Menu<T>(props: MenuProps<T>): JSX.Element {
           <StaticMenuCollectionContext.Provider
             value={usesStaticChildren() ? staticCollectionContext : null}
           >
-            <MenuItemContext.Provider value={{ closeOnSelect: local.shouldCloseOnSelect }}>
+            <MenuItemContext.Provider value={menuItemContextValue()}>
               <CollectionRendererContext.Provider value={collectionRenderer()}>
                 <>
                   <Show when={ariaProps.label}>

package/src/NumberField.tsx

@@ -525,9 +525,19 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
   }
 
   const isDisabled = () => context.isDisabled || !context.state.canIncrement();
+  const pressButtonProps = () => {
+    const {
+      onClick: _onClick,
+      disabled: _disabled,
+      type: _type,
+      tabIndex: _tabIndex,
+      ...rest
+    } = context.incrementButtonProps as Record<string, unknown>;
+    return rest;
+  };
 
   const buttonAria = createButton({
-    ...(context.incrementButtonProps as Record<string, unknown>),
+    ...pressButtonProps(),
     elementType: "div",
     get isDisabled() {
       return isDisabled();
@@ -594,9 +604,19 @@ export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProp
   }
 
   const isDisabled = () => context.isDisabled || !context.state.canDecrement();
+  const pressButtonProps = () => {
+    const {
+      onClick: _onClick,
+      disabled: _disabled,
+      type: _type,
+      tabIndex: _tabIndex,
+      ...rest
+    } = context.decrementButtonProps as Record<string, unknown>;
+    return rest;
+  };
 
   const buttonAria = createButton({
-    ...(context.decrementButtonProps as Record<string, unknown>),
+    ...pressButtonProps(),
     elementType: "div",
     get isDisabled() {
       return isDisabled();

package/src/Popover.tsx

@@ -480,6 +480,14 @@ export function Popover(props: PopoverProps): JSX.Element {
   };
 
   const shouldBeDialog = () => !local.isNonModal || resolvedTrigger() === "SubmenuTrigger";
+  const shouldContainFocus = () => {
+    if (!shouldBeDialog()) {
+      return false;
+    }
+
+    const trigger = resolvedTrigger();
+    return trigger !== "MenuTrigger" && trigger !== "SubmenuTrigger";
+  };
   const portalContext = useUNSAFE_PortalContext();
   const portalContainer = () => {
     if (isSubPopover()) {
@@ -547,7 +555,7 @@ export function Popover(props: PopoverProps): JSX.Element {
     <PopoverContext.Provider
       value={{ placement: popoverAria.placement, arrowProps: () => popoverAria.arrowProps }}
     >
-      <FocusScope contain={shouldBeDialog()} restoreFocus>
+      <FocusScope contain={shouldContainFocus()} restoreFocus>
         <div
           {...domProps()}
           {...cleanPopoverProps()}

package/src/TagGroup.tsx

@@ -365,6 +365,7 @@ export function Tag(props: TagProps): JSX.Element {
       get key() {
         return local.id;
       },
+      role: "row",
       get isDisabled() {
         return local.isDisabled || groupContext?.isDisabled;
       },

package/src/TextField.tsx

@@ -79,6 +79,7 @@ export interface TextFieldContextValue {
   isInvalid?: boolean;
   slots?: Record<string, TextFieldProps>;
   inputId?: string;
+  setInputId?: (id: string | undefined) => void;
 }
 
 export const TextFieldContext = createContext<TextFieldContextValue | null>(null);
@@ -204,6 +205,14 @@ export function Input(props: InputProps): JSX.Element {
   const context = useContext(TextFieldContext);
   let inputElement: HTMLInputElement | undefined;
 
+  createEffect(() => {
+    context?.setInputId?.(props.id);
+  });
+
+  onCleanup(() => {
+    context?.setInputId?.(undefined);
+  });
+
   // Merge context inputProps with local props (local props take precedence)
   const mergedProps = () => {
     if (context) {
@@ -291,6 +300,14 @@ export function TextArea(props: TextAreaProps): JSX.Element {
   const context = useContext(TextFieldContext);
   let textAreaElement: HTMLTextAreaElement | undefined;
 
+  createEffect(() => {
+    context?.setInputId?.(props.id);
+  });
+
+  onCleanup(() => {
+    context?.setInputId?.(undefined);
+  });
+
   // Merge context inputProps with local props (local props take precedence)
   // Note: TextArea uses inputProps from context since it's an input variant
   const mergedProps = () => {
@@ -396,6 +413,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
       errorMessageProps: _errorMessageProps,
       isInvalid: _isInvalid,
       slots: _slots,
+      setInputId: _setInputId,
       ...rest
     } = contextProps;
     return rest as TextFieldProps;
@@ -449,6 +467,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
       return ariaProps.isDisabled;
     },
   });
+  const [inputIdOverride, setInputIdOverride] = createSignal<string | undefined>();
 
   const renderValues = createMemo<TextFieldRenderProps>(() => ({
     isDisabled: ariaProps.isDisabled || false,
@@ -551,7 +570,10 @@ export function TextField(props: TextFieldProps): JSX.Element {
     // onMount effect would flip undefined->id post-mount and re-execute the Label
     // template — crashing hydration if the re-run lands mid-hydration (dev).
     get inputId() {
-      return (textFieldAria.inputProps as { id?: string }).id;
+      return inputIdOverride() ?? (textFieldAria.inputProps as { id?: string }).id;
+    },
+    setInputId(id: string | undefined) {
+      setInputIdOverride(id);
     },
   };
   // Resolve the render-prop children ONCE (untracked). Re-invoking it on a
@@ -559,10 +581,11 @@ export function TextField(props: TextFieldProps): JSX.Element {
   // throws a Hydration Mismatch (worst in dev, where slow unbundled modules widen
   // the hydration window). The children carry their own fine-grained reactivity
   // (render-value getters + <Show>s), so they update without being re-created.
-  const fieldChildren = untrack(() => {
-    const children = local.children;
-    return typeof children === "function" ? children(childRenderValues) : children;
-  });
+  const FieldChildren = () =>
+    untrack(() => {
+      const children = local.children;
+      return typeof children === "function" ? children(childRenderValues) : children;
+    });
   const rootProps = () =>
     ({
       ...domProps(),
@@ -581,7 +604,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
   const customRootProps = () =>
     ({
       ...rootProps(),
-      children: fieldChildren,
+      children: <FieldChildren />,
     }) as JSX.HTMLAttributes<HTMLDivElement>;
 
   return (
@@ -590,7 +613,9 @@ export function TextField(props: TextFieldProps): JSX.Element {
         {local.render ? (
           local.render(customRootProps(), renderValues())
         ) : (
-          <div {...rootProps()}>{fieldChildren}</div>
+          <div {...rootProps()}>
+            <FieldChildren />
+          </div>
         )}
       </TextFieldContext.Provider>
     </FieldErrorContext.Provider>