@proyecto-viviana/solidaria-components 0.3.0 → 0.3.2

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/solidaria-components",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Pre-wired headless components for SolidJS - port of react-aria-components",
   "keywords": [
     "accessibility",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.8.0",
-    "@proyecto-viviana/solidaria": "0.3.0",
-    "@proyecto-viviana/solid-stately": "0.3.0"
+    "@proyecto-viviana/solid-stately": "0.3.0",
+    "@proyecto-viviana/solidaria": "0.3.0"
   },
   "devDependencies": {
     "solid-js": "^1.9.11"

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/Modal.tsx

@@ -479,7 +479,14 @@ function ModalContent(
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      // Lazy: the modal content is gated behind `<Show when={isHydrated() && …}>`
+      // (Portal) below, so it must not be instantiated during the component body.
+      // An eager `children: props.children` would build the content template (and
+      // walk getNextElement) before the gate — content the server never emitted →
+      // hydration mismatch. See Popover for the full rationale.
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Modal",

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

@@ -407,7 +407,16 @@ export function Popover(props: PopoverProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      // Read children lazily. The popover content is gated behind
+      // `<Show when={isHydrated() && …}>` below, so it must NOT be instantiated
+      // during the component body. An eager `children: props.children` reads the
+      // child getter at object-construction time, building the content template
+      // (and walking `getNextElement`) before the gate — which the server, with
+      // the gate closed, never emitted → hydration mismatch. The getter defers
+      // the read until `renderChildren()` runs inside the gated overlay.
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Popover",
@@ -471,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()) {
@@ -538,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;
       },