@proyecto-viviana/solidaria-components 0.3.1 → 0.4.0

package/src/Color.tsx

@@ -288,7 +288,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 +424,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 +498,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 +745,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 +833,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 +905,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 +1156,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 +1225,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 +1297,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 +1566,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 +1697,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 +1812,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 +1982,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",
@@ -2381,7 +2407,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",

package/src/ComboBox.tsx

@@ -8,8 +8,11 @@
 import {
   type JSX,
   type Accessor,
+  type Context,
   createContext,
+  createEffect,
   createMemo,
+  createSignal,
   onCleanup,
   splitProps,
   useContext,
@@ -23,6 +26,7 @@ import {
   getComboBoxData,
   createHover,
   createInteractOutside,
+  createScrollIntoViewOnFocus,
   mergeProps,
   type AriaComboBoxProps,
   type AriaListBoxProps,
@@ -44,7 +48,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
@@ -290,6 +296,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 +315,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 +385,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 +470,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 +502,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;
@@ -514,14 +566,34 @@ 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={
         {
           state,
-          inputProps: () => comboBoxAria.inputProps,
+          listState,
+          inputProps: getInputProps,
           buttonProps: () => comboBoxAria.buttonProps,
-          listBoxProps: () => comboBoxAria.listBoxProps,
+          listBoxProps: () => ({
+            ...comboBoxAria.listBoxProps,
+            onAction: undefined,
+            shouldUseVirtualFocus: true,
+            shouldSelectOnPressUp: true,
+            shouldFocusOnHover: true,
+            linkBehavior: "selection",
+            UNSTABLE_itemBehavior: "action",
+          }),
           labelProps: () => comboBoxAria.labelProps,
           descriptionProps: () => comboBoxAria.descriptionProps,
           errorMessageProps: () => comboBoxAria.errorMessageProps,
@@ -545,6 +617,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>
       }
@@ -578,7 +658,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,7 +765,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",
@@ -746,7 +830,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",
@@ -803,7 +889,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",
@@ -850,11 +938,20 @@ 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;
 
+  // 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,
     onInteractOutside: (e) => {
@@ -880,7 +977,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 +1073,25 @@ 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 [ref, setRef] = createSignal<HTMLLIElement | null>(null);
   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 +1105,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 +1118,12 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
       get onHoverChange() {
         return ariaProps.onHoverChange;
       },
+      get onAction() {
+        return local.onAction;
+      },
     },
-    createComboBoxListStateAdapter(state),
+    listState,
+    () => ref(),
   );
 
   const isOptionFocusVisible = () =>
@@ -1033,7 +1141,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",
@@ -1053,6 +1163,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
       <li
+        ref={setRef}
         {...cleanOptionProps()}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -1192,6 +1303,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,

package/src/DateField.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createEffect,
   createMemo,
@@ -39,7 +40,9 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import { HiddenDateInput } from "./HiddenDateInput";
 import { FormContext, type FormProps } from "./Form";
 import {
@@ -309,6 +312,17 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
     formContext?.validationBehavior ??
     "native";
 
+  const textSlots = {
+    slots: {
+      get description() {
+        return fieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return fieldAria.errorMessageProps;
+      },
+    },
+  };
+
   return (
     <DateFieldStateContext.Provider value={state as unknown as DateFieldState<DateValue>}>
       <DateFieldContext.Provider
@@ -332,7 +346,9 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
           data-required={dataAttr(state.isRequired())}
           data-invalid={dataAttr(state.isInvalid())}
         >
-          {local.children as JSX.Element}
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            {local.children as JSX.Element}
+          </Provider>
         </div>
         <Show when={(rest as Record<string, unknown>).name}>
           <HiddenDateInput
@@ -428,7 +444,9 @@ export function DateSegment(props: DateSegmentProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DateSegment",