@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/src/SearchField.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createMemo,
   onCleanup,
@@ -38,7 +39,10 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
+import { useAutocompleteInput } from "./Autocomplete";
 
 export interface SearchFieldRenderProps {
   /** Whether the search field is empty. */
@@ -244,7 +248,35 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
   const baseProps = (
     contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props
   ) as SearchFieldProps;
-  const mergedProps = withFormValidationBehavior(baseProps, formContext);
+
+  // When rendered inside an <Autocomplete>, the FieldInputContext (AutocompleteContext)
+  // controls the input's value and keyboard handling: value + onChange make the field's
+  // state controlled by the shared autocomplete state (which drives the collection
+  // filter), and onKeyDown/onFocus/onBlur chain the autocomplete's virtual-focus
+  // navigation into the input. This mirrors RAC's
+  // useContextProps(props, inputRef, FieldInputContext). The remaining passthroughs
+  // (aria-activedescendant/aria-controls/aria-autocomplete) and the input-ref
+  // registration are applied at the <input> in SearchFieldInput.
+  const autocompleteInput = useAutocompleteInput();
+  const autocompleteProps = autocompleteInput
+    ? ({
+        get value() {
+          return autocompleteInput.inputProps.value();
+        },
+        onChange: autocompleteInput.inputProps.onChange,
+        onKeyDown: autocompleteInput.inputProps
+          .onKeyDown as unknown as SearchFieldProps["onKeyDown"],
+        onFocus: autocompleteInput.inputProps.onFocus as unknown as SearchFieldProps["onFocus"],
+        onBlur: autocompleteInput.inputProps.onBlur as unknown as SearchFieldProps["onBlur"],
+      } as Partial<SearchFieldProps>)
+    : undefined;
+
+  const mergedProps = withFormValidationBehavior(
+    autocompleteProps
+      ? (mergeProps(baseProps, autocompleteProps) as SearchFieldProps)
+      : baseProps,
+    formContext,
+  );
 
   const [local, stateProps, ariaProps, rest] = splitProps(
     mergedProps,
@@ -456,7 +488,9 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SearchField",
@@ -544,6 +578,21 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
     const children = local.children;
     return typeof children === "function" ? children(childRenderValues) : children;
   };
+  // Provide the description / errorMessage props as `TextContext` slots (mirrors
+  // react-aria-components' SearchField), so a `<Text slot="description">` /
+  // `<Text slot="errorMessage">` child picks up the `id` its `aria-describedby`
+  // references. Additive: existing consumers reading these off
+  // `SearchFieldContext` are unaffected.
+  const textSlots = {
+    slots: {
+      get description() {
+        return searchFieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return searchFieldAria.errorMessageProps;
+      },
+    },
+  };
 
   return (
     <FieldErrorContext.Provider value={fieldErrorContext}>
@@ -559,7 +608,9 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
           data-required={ariaProps.isRequired || undefined}
           data-readonly={ariaProps.isReadOnly || undefined}
         >
-          {fieldChildren()}
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            {fieldChildren()}
+          </Provider>
         </div>
       </SearchFieldContext.Provider>
     </FieldErrorContext.Provider>
@@ -607,6 +658,15 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
     throw new Error("SearchFieldInput must be used within a SearchField");
   }
 
+  // Inside an <Autocomplete>, expose the ARIA attributes that identify the
+  // controlled collection and its virtually-focused option. value/onChange and the
+  // keyboard handlers are already merged upstream in SearchField(); here we only add
+  // the passthrough attributes that createTextField doesn't forward, and register the
+  // input element as the autocomplete inputRef so the beforeinput + reverse-path
+  // (aria-activedescendant mirror) listeners bind. Mirrors RAC's
+  // [InputContext, {...inputProps, ref: inputRef}].
+  const autocompleteInput = useAutocompleteInput();
+
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
   const { isHovered, hoverProps } = createHover({
@@ -645,12 +705,25 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
     return rest;
   };
 
+  const autocompleteInputAttrs = (): Record<string, unknown> => {
+    if (!autocompleteInput) {
+      return {};
+    }
+    const inputProps = autocompleteInput.inputProps;
+    return {
+      "aria-controls": inputProps["aria-controls"],
+      "aria-autocomplete": inputProps["aria-autocomplete"],
+      "aria-activedescendant": inputProps["aria-activedescendant"](),
+    };
+  };
+
   const mergedInputProps = () =>
     ({
       ...domProps,
       ...cleanInputProps(),
       ...cleanFocusProps(),
       ...cleanHoverProps(),
+      ...autocompleteInputAttrs(),
     }) as Record<string, unknown>;
 
   onMount(() => {
@@ -701,6 +774,7 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
       ref={(element) => {
         inputElement = element;
         context.setInputRef?.(element);
+        autocompleteInput?.inputRef(element);
         const ref = (domProps as { ref?: unknown }).ref;
         if (typeof ref === "function") {
           ref(element);
@@ -758,7 +832,9 @@ export function SearchFieldClearButton(props: SearchFieldClearButtonProps): JSX.
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SearchField-clear",

package/src/Select.tsx

@@ -186,11 +186,15 @@ export interface SelectTriggerRenderProps {
   isFocusVisible: boolean;
   /** Whether the trigger is hovered. */
   isHovered: boolean;
+  /** Whether the trigger is pressed. */
+  isPressed: boolean;
   /** Whether the trigger is disabled. */
   isDisabled: boolean;
 }
 
 export interface SelectTriggerProps extends SlotProps {
+  /** A ref callback/object for the underlying trigger button element. */
+  ref?: RefLike<HTMLButtonElement>;
   /** The children of the trigger. A function may be provided to receive render props. */
   children?: RenderChildren<SelectTriggerRenderProps>;
   /** The CSS className for the element. */
@@ -241,6 +245,8 @@ export interface SelectOptionRenderProps {
 }
 
 export interface SelectOptionProps<T> extends Omit<AriaOptionProps, "children" | "key">, SlotProps {
+  /** A ref callback/object for the underlying option element. */
+  ref?: RefLike<HTMLDivElement>;
   /** The unique key for the option. */
   id: Key;
   /** The item value. */
@@ -269,6 +275,7 @@ interface SelectContextValue<T> {
   isOpen: Accessor<boolean>;
   isFocused: Accessor<boolean>;
   isFocusVisible: Accessor<boolean>;
+  isPressed: Accessor<boolean>;
   isDisabled: Accessor<boolean>;
   placeholder?: string;
   items: T[];
@@ -398,8 +405,16 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     return clean as typeof ariaProps;
   });
 
-  const { labelProps, triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen } =
-    createSelect<T>(selectAriaProps, state);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    isFocused,
+    isFocusVisible,
+    isOpen,
+    isPressed,
+  } = createSelect<T>(selectAriaProps, state);
 
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
@@ -579,6 +594,17 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
 
     return (
       <>
+        <Show when={ariaProps.label}>
+          <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+        </Show>
+        {selectChildren}
+        {/*
+          The HiddenSelect (native `<select>` for form autofill/submission) renders
+          AFTER the trigger button, mirroring upstream RAC `Select` which emits
+          `{renderProps.children}` then `<HiddenSelect>` (Select.tsx:288-289). Order
+          matters for the DOM tab/focus trail: the visible button must precede the
+          form-only hidden control.
+        */}
         <div {...containerProps}>
           <select
             {...hiddenSelectProps}
@@ -652,10 +678,6 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
             />
           </Show>
         </div>
-        <Show when={ariaProps.label}>
-          <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
-        </Show>
-        {selectChildren}
       </>
     );
   };
@@ -711,6 +733,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
           isOpen,
           isFocused,
           isFocusVisible,
+          isPressed,
           isDisabled: resolveDisabled,
           placeholder: ariaProps.placeholder,
           items: stateProps.items,
@@ -731,17 +754,18 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
  * The trigger button for a select.
  */
 export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children", "ref"]);
 
   const context = useContext(SelectContext);
   if (!context) {
     throw new Error("SelectTrigger must be used within a Select");
   }
-  const { isOpen, isFocused, isFocusVisible, state } = context;
+  const { isOpen, isFocused, isFocusVisible, isPressed, state } = context;
   let triggerRef: HTMLButtonElement | undefined;
   const setTriggerRef = (el: HTMLButtonElement) => {
     triggerRef = el;
     context.setTriggerRef(el);
+    assignRef(local.ref, el);
   };
 
   createEffect(() => {
@@ -761,12 +785,15 @@ export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
     isHovered: isHovered(),
+    isPressed: isPressed(),
     isDisabled: state.isDisabled,
   }));
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Select-trigger",
@@ -871,7 +898,9 @@ export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children ?? defaultSelectValueChildren,
+      get children() {
+        return props.children ?? defaultSelectValueChildren;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Select-value",
@@ -922,6 +951,14 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     if (!isOpen()) {
       return;
     }
+    // On open the listbox takes collection focus. Upstream `useSelect` sets
+    // `menuProps.autoFocus = state.focusStrategy || true`, so the ListBox's
+    // `useSelectableCollection` auto-focuses on mount — setting the selection
+    // manager's `isFocused` true and focusing the selected option. Our
+    // `createListBox` reimplements keyboard nav inline (no `autoFocus` effect),
+    // so we set the manager focus here to match. Without it the selected option
+    // never paints its focus-visible background (`data-focused` stays unset).
+    state.selectionManager.setFocused(true);
     if (state.focusedKey() != null) {
       return;
     }
@@ -931,7 +968,7 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     }
   });
 
-  let listBoxRef: HTMLUListElement | undefined;
+  let listBoxRef: HTMLDivElement | undefined;
 
   createInteractOutside({
     ref: () => rootRef() ?? listBoxRef ?? null,
@@ -945,7 +982,14 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     },
   });
 
-  const { listBoxProps } = createListBox(
+  // Keep the hook result intact — destructuring `{ listBoxProps }` invokes the
+  // `get listBoxProps()` getter ONCE and freezes it (the Solid "destructuring a
+  // get-prop freezes reactivity" gotcha). The listbox `tabIndex` is computed from
+  // `focusedKey` (`focusedKey != null ? -1 : 0`); on open the effect above sets a
+  // focused key, so a frozen snapshot would leave the listbox tabbable (`0`) when
+  // upstream flips it to `-1`. Reading `listBoxHook.listBoxProps` per access keeps
+  // it reactive.
+  const listBoxHook = createListBox(
     {
       ...(menuProps as unknown as AriaListBoxProps),
       shouldSelectOnPressUp: true,
@@ -959,7 +1003,9 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
   );
 
   const renderValues = createMemo<SelectListBoxRenderProps>(() => ({
-    isFocused: state.isFocused(),
+    // Focus within the listbox itself (the selection manager's focus state),
+    // not the select-level trigger focus.
+    isFocused: state.selectionManager.isFocused,
   }));
 
   const renderProps = useRenderProps(
@@ -976,8 +1022,37 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     return rest;
   };
   const cleanListBoxProps = () => {
-    const { ref: _ref2, ...rest } = listBoxProps as Record<string, unknown>;
-    return rest;
+    const {
+      ref: _ref2,
+      "aria-activedescendant": _activeDescendant,
+      onFocus: _onFocus,
+      ...rest
+    } = listBoxHook.listBoxProps as Record<string, unknown>;
+    // Faithful Select listbox focus model: the focused option receives REAL DOM
+    // focus (the open effect above + `createSelectableItem`'s self-focus move
+    // `document.activeElement` onto it), mirroring upstream `useSelect`. So the
+    // listbox must (a) leave the tab sequence once an option is focused —
+    // `useSelectableCollection` uses `tabIndex = focusedKey == null ? 0 : -1`
+    // (useSelectableCollection.ts:687-690) — and (b) NOT expose
+    // `aria-activedescendant`, which is the virtual-focus channel upstream Select
+    // never uses. These are overridden here, not in the shared `createListBox`,
+    // because the standalone `ListBox` keeps its container-focus model (focus
+    // stays on the listbox, `aria-activedescendant` is its AT channel).
+    //
+    // We also drop `createListBox`'s container-focus TRAMPOLINE (`onFocus`): it
+    // marshals the first key when the container is focused with `focusedKey ==
+    // null`, which is exactly Select's deliberate click-open state (the open
+    // effect sets `isFocused` true but leaves `focusedKey` null when nothing is
+    // selected, so the first arrow enters the first item). Upstream's own
+    // trampoline no-ops in this case because it guards on `manager.isFocused`
+    // (already true); our shared guard uses `focusedKey == null` for the
+    // standalone ListBox, so we strip it here to preserve Select's faithful
+    // model. (Auto-selecting on focus under replace behavior would also toggle
+    // the first item selected on open — the bug this override prevents.)
+    return {
+      ...rest,
+      tabIndex: state.isDisabled ? undefined : state.focusedKey() != null ? -1 : 0,
+    };
   };
 
   const items = () => Array.from(state.collection());
@@ -997,20 +1072,25 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
   });
 
   const listBox = () => (
-    <ul
+    // Upstream RAC ListBox (and our own Menu.tsx) render a `<div role="listbox">`
+    // over `<div role="option">` rows, NOT `<ul>`/`<li>` — the collection is
+    // div-based for virtualization parity. `<ul>`/`<li>` here was a self-inflicted
+    // structural divergence surfaced by the Picker recertification (D5/D6/D8 saw
+    // `li[option]`/`ul[listbox]` where the React oracle sees `div`).
+    <div
       ref={(el) => (listBoxRef = el)}
       {...domProps}
       {...cleanMenuProps()}
       {...cleanListBoxProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-focused={state.isFocused() || undefined}
+      data-focused={state.selectionManager.isFocused || undefined}
       data-empty={state.collection().size === 0 || undefined}
     >
       {state.collection().size === 0 && local.renderEmptyState ? (
-        <li role="option" style={{ display: "contents" }} data-empty-state>
+        <div role="option" style={{ display: "contents" }} data-empty-state>
           {local.renderEmptyState()}
-        </li>
+        </div>
       ) : (
         <Show
           when={local.children}
@@ -1034,7 +1114,7 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
           {local.renderLoadMore?.()}
         </ListBoxLoadMoreItem>
       </Show>
-    </ul>
+    </div>
   );
 
   return (
@@ -1064,6 +1144,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
     "id",
     "item",
     "textValue",
+    "ref",
   ]);
 
   const context = useContext(SelectStateContext);
@@ -1072,6 +1153,11 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
   }
   const state = context as SelectState<T>;
   const selectContext = useContext(SelectContext) as SelectContextValue<T> | null;
+  const [ref, setRefSignal] = createSignal<HTMLDivElement | null>(null);
+  const setRef = (el: HTMLDivElement | null) => {
+    setRefSignal(el);
+    assignRef(local.ref, el as HTMLDivElement);
+  };
 
   const optionAria = createOption<T>(
     {
@@ -1126,6 +1212,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
         }
       },
     },
+    () => ref(),
   );
   const isOptionFocusVisible = () =>
     optionAria.isFocused() && (selectContext?.isFocusVisible() ?? optionAria.isFocusVisible());
@@ -1141,7 +1228,9 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Select-option",
@@ -1177,7 +1266,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
           selectOption();
         }
       });
-    }) as JSX.EventHandler<HTMLLIElement, MouseEvent>;
+    }) as JSX.EventHandler<HTMLDivElement, MouseEvent>;
     return rest;
   };
   const selectOption = () => {
@@ -1199,7 +1288,10 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
 
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <li
+      {/* `<div role="option">`, not `<li>` — see the SelectListBox note; upstream
+          RAC options are div-based. */}
+      <div
+        ref={setRef}
         {...cleanOptionProps()}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -1215,7 +1307,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
         ) : (
           renderProps.renderChildren()
         )}
-      </li>
+      </div>
     </SelectionIndicatorContext.Provider>
   );
 }
@@ -1254,8 +1346,12 @@ function createSelectListStateAdapter<T>(state: SelectState<T>): ListState<T> {
 
   return {
     collection: state.collection,
-    isFocused: state.isFocused,
-    setFocused: state.setFocused,
+    selectionManager: state.selectionManager,
+    // Collection-level focus (the selection manager's), not the select-level
+    // trigger focus — upstream listbox internals only ever read
+    // state.selectionManager.isFocused.
+    isFocused: () => state.selectionManager.isFocused,
+    setFocused: (isFocused) => state.selectionManager.setFocused(isFocused),
     focusedKey: state.focusedKey,
     setFocusedKey: (key) => state.setFocusedKey(key ?? null),
     childFocusStrategy: () => null,

package/src/SelectionIndicator.tsx

@@ -61,7 +61,9 @@ export function SelectionIndicator(props: SelectionIndicatorProps): JSX.Element
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SelectionIndicator",