@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/src/Color.tsx

@@ -28,6 +28,7 @@ import {
   createFocusRing,
   createHover,
   mergeProps,
+  useLocale,
   type AriaColorSliderOptions,
   type AriaColorAreaOptions,
   type AriaColorWheelOptions,
@@ -233,7 +234,11 @@ export function ColorSlider(props: ColorSliderProps): JSX.Element {
     ],
   );
 
-  // Create color slider state
+  const locale = useLocale();
+
+  // Create color slider state. The locale drives the thumb value label's
+  // channel-value formatting (e.g. hue "50°" vs ar-AE "50 درجة"), mirroring
+  // RAC ColorSlider passing `useLocale().locale` into useColorSliderState.
   const state = createColorSliderState(() => ({
     value: stateProps.value ?? pickerContext?.value,
     defaultValue: stateProps.defaultValue,
@@ -243,6 +248,7 @@ export function ColorSlider(props: ColorSliderProps): JSX.Element {
     colorSpace: stateProps.colorSpace,
     orientation: ariaProps.orientation,
     isDisabled: ariaProps.isDisabled,
+    locale: locale().locale,
   }));
 
   let trackRef: HTMLDivElement | undefined;
@@ -288,7 +294,9 @@ export function ColorSlider(props: ColorSliderProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSlider",
@@ -422,7 +430,9 @@ export function ColorSliderTrack(props: ColorSliderTrackProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSlider-track",
@@ -494,7 +504,9 @@ export function ColorSliderThumb(props: ColorSliderThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSlider-thumb",
@@ -739,7 +751,9 @@ export function ColorArea(props: ColorAreaProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorArea",
@@ -825,7 +839,9 @@ export function ColorAreaGradient(props: ColorAreaGradientProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorArea-gradient",
@@ -895,7 +911,9 @@ export function ColorAreaThumb(props: ColorAreaThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorArea-thumb",
@@ -1144,7 +1162,9 @@ export function ColorWheel(props: ColorWheelProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorWheel",
@@ -1211,7 +1231,9 @@ export function ColorWheelTrack(props: ColorWheelTrackProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorWheel-track",
@@ -1281,7 +1303,9 @@ export function ColorWheelThumb(props: ColorWheelThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorWheel-thumb",
@@ -1548,7 +1572,9 @@ export function ColorField(props: ColorFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorField",
@@ -1677,7 +1703,9 @@ export function ColorFieldInput(props: ColorFieldInputProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorField-input",
@@ -1790,7 +1818,9 @@ export function ColorSwatch(props: ColorSwatchProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSwatch",
@@ -1958,7 +1988,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorPicker",
@@ -2089,11 +2121,10 @@ export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
     () => ({
       id: local.id,
       "aria-label":
-        local["aria-label"] ?? (!local["aria-labelledby"] ? "Color swatch picker" : undefined),
+        local["aria-label"] ?? (!local["aria-labelledby"] ? "Color swatches" : undefined),
       "aria-labelledby": local["aria-labelledby"],
       "aria-describedby": local["aria-describedby"],
       "aria-details": local["aria-details"],
-      shouldFocusWrap: true,
     }),
     state,
   );
@@ -2221,32 +2252,28 @@ export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
     let nextKey: Key | null = null;
     switch (e.key) {
       case "ArrowDown":
-        nextKey = getGridKeyBelow(listbox, initialKey) ?? getBoundaryEnabledKey("next");
+        nextKey = getGridKeyBelow(listbox, initialKey);
         break;
       case "ArrowUp":
-        nextKey = getGridKeyAbove(listbox, initialKey) ?? getBoundaryEnabledKey("prev");
+        nextKey = getGridKeyAbove(listbox, initialKey);
         break;
       case "ArrowRight":
-        nextKey =
-          getGridKeyRightOf(initialKey) ??
-          (resolveDirection() === "rtl"
-            ? getBoundaryEnabledKey("prev")
-            : getBoundaryEnabledKey("next"));
+        nextKey = getGridKeyRightOf(initialKey);
         break;
       case "ArrowLeft":
-        nextKey =
-          getGridKeyLeftOf(initialKey) ??
-          (resolveDirection() === "rtl"
-            ? getBoundaryEnabledKey("next")
-            : getBoundaryEnabledKey("prev"));
+        nextKey = getGridKeyLeftOf(initialKey);
         break;
     }
 
-    if (nextKey == null) return false;
-
-    state.setFocusedKey(nextKey);
-    if (state.selectionMode() === "single") {
-      state.replaceSelection(nextKey);
+    // Mirror react-aria's grid keyboard delegate: an arrow in grid layout is
+    // always consumed (blocking the linear ListBox handler and page scroll),
+    // but focus only moves when the delegate yields a next key. With
+    // shouldFocusWrap unset (upstream default false) there is no wrap, so arrows
+    // stop dead at the grid's edges. Selection is not mutated on arrow — under
+    // the default 'toggle' selection behavior focus moves without selecting, and
+    // Enter/Space commits (handled by createSelectableItem).
+    if (nextKey != null) {
+      state.setFocusedKey(nextKey);
     }
 
     e.preventDefault();
@@ -2266,12 +2293,18 @@ export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
     getListBoxKeyDown()?.(e);
   };
 
-  createEffect(() => {
-    const key = selectedKey();
-    if (key) {
-      state.setFocusedKey(key);
-    }
-  });
+  // NB: we deliberately do NOT seed `state.setFocusedKey(selectedKey())` at rest.
+  // Upstream's RAC `<ListBox>` (which `AriaColorSwatchPicker` is) keeps
+  // `focusedKey == null` until the collection is focused — the listbox CONTAINER
+  // is the roving tabstop (`tabIndex 0`), and `useSelectableCollection`'s onFocus
+  // navigates to `firstSelectedKey` on entry (mirrored by `createListBox`'s
+  // `onListBoxFocus`). Pre-seeding focusedKey to the selected swatch made the
+  // selected option the rest tabstop instead (container `tabIndex -1`) — a
+  // self-inflicted divergence — and, because our `createFocusWithin` only flips
+  // `manager.setFocused(true)` on CONTAINER focus (Solid's `onFocus` is
+  // non-bubbling), it also routed entry through a direct option focus that never
+  // set `isFocused`, so arrow keys could not pull real DOM focus. Letting the
+  // container be the tabstop restores both.
 
   const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
   const domProps = createMemo(() =>
@@ -2361,13 +2394,20 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.El
     onCleanup(() => context.unregisterItem(itemKey));
   });
 
+  const [optionRef, setOptionRef] = createSignal<HTMLElement | null>(null);
+
   const optionAria = createOption(
     () => ({
       key: key(),
       isDisabled: ariaProps.isDisabled,
-      "aria-label": ariaProps["aria-label"] ?? textValue(),
+      // No aria-label: the option is named by its content (the child swatch's
+      // role="img" aria-label), mirroring upstream ColorSwatchPickerItem which
+      // sets only textValue (typeahead, threaded via registerItem above) and
+      // never an aria-label.
+      "aria-label": ariaProps["aria-label"],
     }),
     context.state,
+    optionRef,
   );
 
   const renderValues = createMemo<ColorSwatchPickerItemRenderProps>(() => ({
@@ -2381,7 +2421,9 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.El
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSwatchPickerItem",
@@ -2399,6 +2441,7 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.El
 
   return (
     <div
+      ref={setOptionRef}
       {...mergeProps(domProps(), cleanOptionProps())}
       class={renderProps.class()}
       style={renderProps.style()}

package/src/ComboBox.tsx

@@ -8,9 +8,11 @@
 import {
   type JSX,
   type Accessor,
+  type Context,
   createContext,
   createEffect,
   createMemo,
+  createSignal,
   onCleanup,
   splitProps,
   useContext,
@@ -24,7 +26,9 @@ import {
   getComboBoxData,
   createHover,
   createInteractOutside,
+  createScrollIntoViewOnFocus,
   mergeProps,
+  isFocusVisible as isGlobalFocusVisible,
   type AriaComboBoxProps,
   type AriaListBoxProps,
   type AriaOptionProps,
@@ -45,7 +49,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
@@ -234,6 +240,8 @@ export interface ComboBoxValueProps extends SlotProps {
 }
 
 export interface ComboBoxButtonProps extends SlotProps {
+  /** A ref to the underlying button element. */
+  ref?: RefLike<HTMLButtonElement>;
   /** The children of the button. */
   children?: RenderChildren<ComboBoxButtonRenderProps>;
   /** The CSS className for the element. */
@@ -273,6 +281,8 @@ export interface ComboBoxOptionRenderProps {
 
 export interface ComboBoxOptionProps<T>
   extends Omit<AriaOptionProps, "children" | "key">, SlotProps {
+  /** A ref to the underlying option element. */
+  ref?: RefLike<HTMLElement>;
   /** The unique key for the option. */
   id: Key;
   /** The item value. */
@@ -561,6 +571,17 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
       ? (local.children as (values: ComboBoxRenderProps) => JSX.Element)(renderValues())
       : local.children;
 
+  const textSlots = {
+    slots: {
+      get description() {
+        return comboBoxAria.descriptionProps;
+      },
+      get errorMessage() {
+        return comboBoxAria.errorMessageProps;
+      },
+    },
+  };
+
   return (
     <ComboBoxContext.Provider
       value={
@@ -571,7 +592,12 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
           buttonProps: () => comboBoxAria.buttonProps,
           listBoxProps: () => ({
             ...comboBoxAria.listBoxProps,
-            onAction: runOptionAction,
+            onAction: undefined,
+            shouldUseVirtualFocus: true,
+            shouldSelectOnPressUp: true,
+            shouldFocusOnHover: true,
+            linkBehavior: "selection",
+            UNSTABLE_itemBehavior: "action",
           }),
           labelProps: () => comboBoxAria.labelProps,
           descriptionProps: () => comboBoxAria.descriptionProps,
@@ -637,7 +663,9 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
               value={state.selectedKey()?.toString() ?? ""}
             />
           </Show>
-          <ComboBoxChildren />
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            <ComboBoxChildren />
+          </Provider>
         </div>
       </ComboBoxStateContext.Provider>
     </ComboBoxContext.Provider>
@@ -683,10 +711,13 @@ export function ComboBoxDescription(props: ComboBoxDescriptionProps): JSX.Elemen
     return rest;
   };
 
+  // Upstream renders the description via `<Text slot="description">`, and RAC's
+  // `Text` defaults to `elementType="span"` (Text.tsx:24) — so the help text is a
+  // `<span>`, not a `<div>`. Match it (mirrors the TextField port's same revert).
   return (
-    <div {...domProps} {...cleanDescriptionProps()} class={local.class} style={local.style}>
+    <span {...domProps} {...cleanDescriptionProps()} class={local.class} style={local.style}>
       {local.children}
-    </div>
+    </span>
   );
 }
 
@@ -706,10 +737,12 @@ export function ComboBoxErrorMessage(props: ComboBoxErrorMessageProps): JSX.Elem
     return rest;
   };
 
+  // Same as the description: upstream's error is `<Text slot="errorMessage">`,
+  // a `<span>` (RAC Text default elementType). Match it.
   return (
-    <div {...domProps} {...cleanErrorMessageProps()} class={local.class} style={local.style}>
+    <span {...domProps} {...cleanErrorMessageProps()} class={local.class} style={local.style}>
       {local.children}
-    </div>
+    </span>
   );
 }
 
@@ -742,7 +775,9 @@ export function ComboBoxInput(props: ComboBoxInputProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ComboBox-input",
@@ -805,7 +840,9 @@ export function ComboBoxValue(props: ComboBoxValueProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-ComboBox-value",
@@ -838,7 +875,7 @@ export function ComboBoxValue(props: ComboBoxValueProps): JSX.Element {
  * The trigger button for a combobox.
  */
 export function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children", "ref"]);
 
   const context = useContext(ComboBoxContext);
   if (!context) {
@@ -862,7 +899,9 @@ export function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ComboBox-button",
@@ -882,7 +921,10 @@ export function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element {
   return (
     <button
       {...domProps}
-      ref={(el) => setButtonRef(el)}
+      ref={(el) => {
+        setButtonRef(el);
+        assignRef(local.ref, el);
+      }}
       {...cleanButtonProps()}
       {...cleanHoverProps()}
       class={renderProps.class()}
@@ -912,7 +954,16 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
   const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
   const state = comboBoxState;
 
-  let listBoxRef: HTMLUListElement | undefined;
+  let listBoxRef: HTMLElement | undefined;
+
+  // Reveal the activedescendant-focused option on keyboard navigation while the
+  // listbox is open. Real DOM focus stays on the input, so the browser won't
+  // natively scroll an off-screen focused option into view.
+  createScrollIntoViewOnFocus({
+    focusedKey: () => state.focusedKey(),
+    isActive: () => isOpen(),
+    ref: () => listBoxRef ?? null,
+  });
 
   createInteractOutside({
     ref: () => listBoxRef ?? null,
@@ -979,7 +1030,7 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
     );
   };
 
-  const setListBoxElement = (el: HTMLUListElement) => {
+  const setListBoxElement = (el: HTMLElement) => {
     listBoxRef = el;
     setListBoxRef(el);
   };
@@ -990,7 +1041,10 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
 
   return (
     <Show when={isOpen()}>
-      <ul
+      {/* `<div role="listbox">`, not `<ul>` — upstream RAC ListBox (and our own
+          Select/ListBox) render div-over-div rows; the `role` comes from the
+          spread listbox aria props (createListBox), not the element tag. */}
+      <div
         {...domProps}
         ref={setListBoxElement}
         {...cleanContextProps()}
@@ -1014,7 +1068,7 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
             }}
           </For>
         </Show>
-      </ul>
+      </div>
     </Show>
   );
 }
@@ -1031,6 +1085,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
     "item",
     "textValue",
     "onAction",
+    "ref",
   ]);
 
   const stateContext = useContext(ComboBoxStateContext);
@@ -1040,6 +1095,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
   }
   const state = stateContext as ComboBoxState<T>;
   const listState = (comboBoxContext as ComboBoxContextValue<T>).listState;
+  const [ref, setRef] = createSignal<HTMLElement | null>(null);
   const optionId = () => {
     const listBoxId = getComboBoxData(state as ComboBoxState<unknown>)?.listBoxId;
     return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
@@ -1084,11 +1140,22 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
       },
     },
     listState,
+    () => ref(),
   );
 
-  const isOptionFocusVisible = () =>
-    optionAria.isFocusVisible() ||
-    (optionAria.isFocused() && (comboBoxContext?.isFocusVisible() ?? false));
+  // Mirror upstream `useOption` exactly (useOption.ts:172):
+  //   isFocusVisible = isFocused && selectionManager.isFocused && isFocusVisible()
+  // where `isFocusVisible()` is the GLOBAL interaction-modality singleton read as
+  // a render-time snapshot (NOT the input's focus ring, and NOT the option's own
+  // createFocusRing — the option div never receives real DOM focus under virtual
+  // focus, so its ring never lights). `optionAria.isFocused()` already folds in
+  // `selectionManager.isFocused()` (createSelectableItem.ts:239), so the upstream
+  // three-term product collapses to these two. Reading the global singleton off
+  // the `isFocused` dependency gives the same non-reactive snapshot semantics as
+  // React (mouse/hover focus → pointer modality → no ring; keyboard nav → keyboard
+  // modality → ring), which the earlier input-ring OR-branch got wrong (it lit the
+  // option ring whenever the input ring was on).
+  const isOptionFocusVisible = () => optionAria.isFocused() && isGlobalFocusVisible();
 
   const renderValues = createMemo<ComboBoxOptionRenderProps>(() => ({
     isSelected: optionAria.isSelected(),
@@ -1101,7 +1168,9 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ComboBox-option",
@@ -1120,7 +1189,13 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
 
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <li
+      {/* `<div role="option">`, not `<li>` — see the ComboBoxListBox note; the
+          `role` comes from the spread option aria props (createOption). */}
+      <div
+        ref={(el) => {
+          setRef(el);
+          assignRef(local.ref, el);
+        }}
         {...cleanOptionProps()}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -1132,7 +1207,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
         data-disabled={optionAria.isDisabled() || undefined}
       >
         {renderProps.renderChildren()}
-      </li>
+      </div>
     </SelectionIndicatorContext.Provider>
   );
 }
@@ -1260,6 +1335,7 @@ function createComboBoxListStateAdapter<T>(state: ComboBoxState<T>): ListState<T
 
   return {
     collection: state.collection,
+    selectionManager: state.selectionManager,
     isFocused: state.isFocused,
     setFocused: state.setFocused,
     focusedKey: state.focusedKey,