@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/radio/createRadioGroupState.ts

@@ -7,13 +7,9 @@
  * This is a 1:1 port of @react-stately/radio's useRadioGroupState.
  */
 
-import { createSignal, Accessor, untrack } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { createId } from '../ssr';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, Accessor, untrack } from "solid-js";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import { createId } from "../ssr";
 
 export interface RadioGroupProps {
   /** The current selected value (controlled). */
@@ -37,7 +33,7 @@ export interface RadioGroupProps {
   /** The label for the radio group. */
   label?: string;
   /** Orientation of the radio group. */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: "horizontal" | "vertical";
   /** Handler that is called when the radio group receives focus. */
   onFocus?: (e: FocusEvent) => void;
   /** Handler that is called when the radio group loses focus. */
@@ -78,10 +74,6 @@ export interface RadioGroupState {
   setLastFocusedValue(value: string | null): void;
 }
 
-// ============================================
-// INTERNAL: SolidJS-specific sync mechanism
-// ============================================
-
 /**
  * Internal WeakMap to store sync version accessors for each radio group state.
  * This is used by createRadio to trigger DOM sync when native radio behavior
@@ -92,31 +84,23 @@ export interface RadioGroupState {
  */
 export const radioGroupSyncVersion: WeakMap<RadioGroupState, Accessor<number>> = new WeakMap();
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for a radio group component.
  * Provides a name for the group, and manages selection and focus state.
  */
-export function createRadioGroupState(
-  props: MaybeAccessor<RadioGroupProps> = {}
-): RadioGroupState {
+export function createRadioGroupState(props: MaybeAccessor<RadioGroupProps> = {}): RadioGroupState {
   const getProps = () => access(props);
 
   // Get initial props using untrack to avoid setting up dependencies
   // This ensures we capture the initial defaultValue without reactivity issues
   const initialProps = untrack(() => getProps());
 
-  // Generate name - preserved for backward compatibility
-  // React Aria now generates the name instead of stately
+  // Preserved for backward compatibility. React Aria now generates the name instead of stately.
   const name = initialProps.name || `radio-group-${createId()}`;
 
-  // Create internal signal for uncontrolled mode
   // Initialize with defaultValue only (not value, which is for controlled mode)
   const [internalValue, setInternalValue] = createSignal<string | null>(
-    initialProps.defaultValue ?? null
+    initialProps.defaultValue ?? null,
   );
   const [lastFocusedValue, setLastFocusedValueInternal] = createSignal<string | null>(null);
 
@@ -125,26 +109,20 @@ export function createRadioGroupState(
   // from our reactive state (e.g., clicking a radio unchecks siblings in the DOM)
   const [syncVersion, setSyncVersion] = createSignal(0);
 
-  // Determine if controlled - must be reactive to handle dynamic props
   const isControlled = () => getProps().value !== undefined;
 
-  // Get current value - reactive for both controlled and uncontrolled modes
   const selectedValue: Accessor<string | null> = () => {
     const p = getProps();
-    // In controlled mode, always read from props.value reactively
-    // In uncontrolled mode, read from internal signal
     if (p.value !== undefined) {
       return p.value ?? null;
     }
     return internalValue();
   };
 
-  // Check if invalid
   const isInvalid = () => {
     return getProps().isInvalid ?? false;
   };
 
-  // Set value
   function setSelectedValue(value: string | null): void {
     const p = getProps();
     if (p.isReadOnly || p.isDisabled) {
@@ -167,7 +145,6 @@ export function createRadioGroupState(
     }
   }
 
-  // Set last focused value
   function setLastFocusedValue(value: string | null): void {
     setLastFocusedValueInternal(value);
   }
@@ -193,7 +170,6 @@ export function createRadioGroupState(
     },
   };
 
-  // Store syncVersion in internal WeakMap (not part of public API)
   // This maintains API parity with React-Aria while supporting SolidJS's reactivity needs
   radioGroupSyncVersion.set(state, syncVersion);
 

package/src/radio/index.ts

@@ -1,10 +1,9 @@
-// Re-export state from solid-stately
 export {
   createRadioGroupState,
   radioGroupSyncVersion,
   type RadioGroupProps,
   type RadioGroupState,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 
 // ARIA hooks (solidaria-specific)
 // Radio Group
@@ -13,11 +12,7 @@ export {
   radioGroupData,
   type AriaRadioGroupProps,
   type RadioGroupAria,
-} from './createRadioGroup';
+} from "./createRadioGroup";
 
 // Radio
-export {
-  createRadio,
-  type AriaRadioProps,
-  type RadioAria,
-} from './createRadio';
+export { createRadio, type AriaRadioProps, type RadioAria } from "./createRadio";

package/src/searchfield/createSearchField.ts

@@ -4,25 +4,25 @@
  * Based on @react-aria/searchfield useSearchField.
  */
 
-import { type JSX } from 'solid-js';
-import { createTextField, type AriaTextFieldProps, type TextFieldAria } from '../textfield';
-import { mergeProps } from '../utils';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import type { SearchFieldState } from '@proyecto-viviana/solid-stately';
+import { type JSX } from "solid-js";
+import { createTextField, type AriaTextFieldProps, type TextFieldAria } from "../textfield";
+import { mergeProps } from "../utils";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import type { SearchFieldState } from "@proyecto-viviana/solid-stately";
 
-export interface AriaSearchFieldProps extends Omit<AriaTextFieldProps, 'type'> {
+export interface AriaSearchFieldProps extends AriaTextFieldProps {
   /** Handler that is called when the user submits the search (pressing Enter). */
   onSubmit?: (value: string) => void;
   /** Handler that is called when the clear button is pressed or Escape clears the field. */
   onClear?: () => void;
 }
 
-export interface SearchFieldAria extends Omit<TextFieldAria, 'inputProps'> {
+export interface SearchFieldAria extends Omit<TextFieldAria, "inputProps"> {
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
   /** Props for the clear button. */
   clearButtonProps: {
-    'aria-label': string;
+    "aria-label": string;
     tabIndex: number;
     disabled?: boolean;
     onMouseDown: (e: MouseEvent) => void;
@@ -36,10 +36,19 @@ export interface SearchFieldAria extends Omit<TextFieldAria, 'inputProps'> {
 export function createSearchField(
   props: MaybeAccessor<AriaSearchFieldProps>,
   state: SearchFieldState,
-  inputRef?: () => HTMLInputElement | null
+  inputRef?: () => HTMLInputElement | null,
 ): SearchFieldAria {
   const getProps = () => access(props);
 
+  const setValue = (value: string) => {
+    if (state.value() === value) {
+      return;
+    }
+
+    state.setValue(value);
+    getProps().onChange?.(value);
+  };
+
   // Use createTextField for the base implementation
   const textFieldAria = createTextField({
     get value() {
@@ -60,14 +69,14 @@ export function createSearchField(
     get label() {
       return getProps().label;
     },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
+    get "aria-label"() {
+      return getProps()["aria-label"];
     },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
     },
-    get 'aria-describedby'() {
-      return getProps()['aria-describedby'];
+    get "aria-describedby"() {
+      return getProps()["aria-describedby"];
     },
     get description() {
       return getProps().description;
@@ -81,15 +90,30 @@ export function createSearchField(
     get name() {
       return getProps().name;
     },
+    get form() {
+      return getProps().form;
+    },
+    get validationBehavior() {
+      return getProps().validationBehavior ?? "native";
+    },
+    get type() {
+      return getProps().type ?? "search";
+    },
     get autoFocus() {
       return getProps().autoFocus;
     },
+    get excludeFromTabOrder() {
+      return getProps().excludeFromTabOrder;
+    },
     get autoComplete() {
       return getProps().autoComplete;
     },
     get inputMode() {
       return getProps().inputMode;
     },
+    get enterKeyHint() {
+      return getProps().enterKeyHint;
+    },
     get autoCorrect() {
       return getProps().autoCorrect;
     },
@@ -150,11 +174,7 @@ export function createSearchField(
     get onInput() {
       return getProps().onInput;
     },
-    type: 'search',
-    onChange: (value: string) => {
-      state.setValue(value);
-      getProps().onChange?.(value);
-    },
+    onChange: setValue,
   });
 
   // Handle keyboard events for search field
@@ -162,26 +182,30 @@ export function createSearchField(
     const p = getProps();
 
     if (p.isDisabled || p.isReadOnly) {
-      if (e.key === 'Enter') {
+      if (e.key === "Enter") {
         e.preventDefault();
       }
       return;
     }
 
-    if (e.key === 'Enter' && p.onSubmit) {
+    if (e.key === "Enter" && p.onSubmit) {
       e.preventDefault();
       p.onSubmit(state.value());
     }
 
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       const currentValue = state.value();
-      const inputValue = inputRef?.()?.value ?? '';
+      const inputValue = inputRef?.()?.value ?? "";
 
       // Only clear if there's a value
-      if (currentValue !== '' || inputValue !== '') {
+      if (currentValue !== "" || inputValue !== "") {
         e.preventDefault();
         e.stopPropagation();
-        state.setValue('');
+        const input = inputRef?.();
+        if (input) {
+          input.value = "";
+        }
+        setValue("");
         p.onClear?.();
       }
     }
@@ -191,7 +215,11 @@ export function createSearchField(
   const onClearButtonClick = () => {
     const p = getProps();
     if (p.isDisabled || p.isReadOnly) return;
-    state.setValue('');
+    const input = inputRef?.();
+    if (input) {
+      input.value = "";
+    }
+    setValue("");
     p.onClear?.();
     // Focus the input after clearing
     inputRef?.()?.focus();
@@ -213,7 +241,7 @@ export function createSearchField(
           // Clear defaultValue since it's handled by state
           defaultValue: undefined,
         } as Record<string, unknown>,
-        textFieldAria.inputProps as Record<string, unknown>
+        textFieldAria.inputProps as Record<string, unknown>,
       ) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
     get clearButtonProps() {
@@ -221,7 +249,7 @@ export function createSearchField(
       const isDisabled = p.isDisabled || p.isReadOnly;
 
       return {
-        'aria-label': 'Clear search',
+        "aria-label": "Clear search",
         tabIndex: -1, // Exclude from tab order
         disabled: isDisabled,
         onMouseDown: onClearButtonMouseDown,

package/src/searchfield/index.ts

@@ -1,2 +1,2 @@
-export { createSearchField } from './createSearchField';
-export type { AriaSearchFieldProps, SearchFieldAria } from './createSearchField';
+export { createSearchField } from "./createSearchField";
+export type { AriaSearchFieldProps, SearchFieldAria } from "./createSearchField";

package/src/select/createHiddenSelect.tsx

@@ -3,12 +3,12 @@
  * Based on @react-aria/select useHiddenSelect.
  */
 
-import { type JSX, type Accessor, For, createEffect, onCleanup } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { createFormValidation } from '../form/createFormValidation';
-import type { SelectState, Key, FormValidationState } from '@proyecto-viviana/solid-stately';
+import { type JSX, type Accessor, For, createEffect, onCleanup } from "solid-js";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { createFormValidation } from "../form/createFormValidation";
+import type { SelectState, Key, FormValidationState } from "@proyecto-viviana/solid-stately";
 
-export type ValidationBehavior = 'aria' | 'native';
+export type ValidationBehavior = "aria" | "native";
 
 export interface AriaHiddenSelectProps<T> {
   /** The state object for the select. */
@@ -45,7 +45,7 @@ export interface HiddenSelectAria {
  * This is used for native form submission and accessibility on mobile devices.
  */
 export function createHiddenSelect<T>(
-  props: MaybeAccessor<AriaHiddenSelectProps<T>>
+  props: MaybeAccessor<AriaHiddenSelectProps<T>>,
 ): HiddenSelectAria {
   const getProps = () => access(props);
 
@@ -66,17 +66,17 @@ export function createHiddenSelect<T>(
       p.state.setSelectedKey(defaultKey);
     };
 
-    form.addEventListener('reset', handleReset);
+    form.addEventListener("reset", handleReset);
 
     onCleanup(() => {
-      form.removeEventListener('reset', handleReset);
+      form.removeEventListener("reset", handleReset);
     });
   });
 
   // Set up form validation handler for native validation
   createEffect(() => {
     const p = getProps();
-    if (!selectRef || p.validationBehavior !== 'native' || !p.validationState) return;
+    if (!selectRef || p.validationBehavior !== "native" || !p.validationState) return;
 
     createFormValidation(
       {
@@ -84,31 +84,39 @@ export function createHiddenSelect<T>(
         focus: () => p.triggerRef?.()?.focus(),
       },
       p.validationState,
-      () => selectRef
+      () => selectRef,
     );
   });
 
   return {
     get containerProps() {
       return {
-        'aria-hidden': true,
-        'data-a11y-ignore': 'aria-hidden-focus',
+        "aria-hidden": true,
+        "data-a11y-ignore": "aria-hidden-focus",
       } as JSX.HTMLAttributes<HTMLDivElement>;
     },
     get selectProps() {
       const p = getProps();
       const state = p.state;
       const selectedKey = state.selectedKey();
-      const selectedKeys = typeof state.selectedKeys === 'function'
-        ? state.selectedKeys()
-        : (selectedKey != null ? new Set([selectedKey]) : new Set<Key>());
-      const validationBehavior = p.validationBehavior ?? 'aria';
-      const isMultiple = typeof state.selectionMode === 'function' && state.selectionMode() === 'multiple';
+      const selectedKeys =
+        typeof state.selectedKeys === "function"
+          ? state.selectedKeys()
+          : selectedKey != null
+            ? new Set([selectedKey])
+            : new Set<Key>();
+      const validationBehavior = p.validationBehavior ?? "aria";
+      const isMultiple =
+        typeof state.selectionMode === "function" && state.selectionMode() === "multiple";
       const multipleValue =
-        selectedKeys === 'all' ? Array.from(state.collection()).map((item) => String(item.key)) : Array.from(selectedKeys).map(String);
+        selectedKeys === "all"
+          ? Array.from(state.collection()).map((item) => String(item.key))
+          : Array.from(selectedKeys).map(String);
 
       return {
-        ref: (el: HTMLSelectElement) => { selectRef = el; },
+        ref: (el: HTMLSelectElement) => {
+          selectRef = el;
+        },
         tabIndex: -1,
         autoComplete: p.autoComplete,
         disabled: p.isDisabled ?? state.isDisabled,
@@ -116,12 +124,12 @@ export function createHiddenSelect<T>(
         name: p.name,
         form: p.form,
         // Add required attribute for native form validation
-        required: validationBehavior === 'native' && p.isRequired,
-        value: isMultiple ? multipleValue : (selectedKey != null ? String(selectedKey) : ''),
+        required: validationBehavior === "native" && p.isRequired,
+        value: isMultiple ? multipleValue : selectedKey != null ? String(selectedKey) : "",
         onChange: (e: Event) => {
           const target = e.target as HTMLSelectElement;
           if (isMultiple) {
-            if (typeof state.setSelectedKeys === 'function') {
+            if (typeof state.setSelectedKeys === "function") {
               state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value as Key));
             } else {
               const first = target.selectedOptions[0]?.value;
@@ -132,18 +140,18 @@ export function createHiddenSelect<T>(
           }
         },
         style: {
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
-          width: '100%',
-          height: '100%',
+          width: "100%",
+          height: "100%",
           opacity: 0,
-          'font-size': '16px', // Prevents zoom on iOS
-          border: 'none',
-          cursor: 'default',
+          "font-size": "16px", // Prevents zoom on iOS
+          border: "none",
+          cursor: "default",
           margin: 0,
           padding: 0,
-          'pointer-events': 'none',
+          "pointer-events": "none",
         },
       } as JSX.SelectHTMLAttributes<HTMLSelectElement>;
     },
@@ -151,20 +159,20 @@ export function createHiddenSelect<T>(
       const p = getProps();
       const state = p.state;
       const selectedKey = state.selectedKey();
-      const validationBehavior = p.validationBehavior ?? 'aria';
+      const validationBehavior = p.validationBehavior ?? "aria";
 
       // For native validation with required, use type="text" with display:none
       // so the browser will validate it on form submit
-      const useTextInput = validationBehavior === 'native' && p.isRequired;
+      const useTextInput = validationBehavior === "native" && p.isRequired;
 
       return {
-        type: useTextInput ? 'text' : 'hidden',
+        type: useTextInput ? "text" : "hidden",
         name: p.name,
         form: p.form,
-        value: selectedKey != null ? String(selectedKey) : '',
+        value: selectedKey != null ? String(selectedKey) : "",
         disabled: p.isDisabled ?? state.isDisabled,
         required: useTextInput ? p.isRequired : undefined,
-        style: useTextInput ? { display: 'none' } : undefined,
+        style: useTextInput ? { display: "none" } : undefined,
       } as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
   };
@@ -230,11 +238,14 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {
 
   const collection = () => props.state.collection();
   const selectedKey = () => props.state.selectedKey();
-  const selectedKeys = () => typeof props.state.selectedKeys === 'function'
-    ? props.state.selectedKeys()
-    : (selectedKey() != null ? new Set([selectedKey() as Key]) : new Set<Key>());
-  const isMultiple = () => typeof props.state.selectionMode === 'function'
-    && props.state.selectionMode() === 'multiple';
+  const selectedKeys = () =>
+    typeof props.state.selectedKeys === "function"
+      ? props.state.selectedKeys()
+      : selectedKey() != null
+        ? new Set([selectedKey() as Key])
+        : new Set<Key>();
+  const isMultiple = () =>
+    typeof props.state.selectionMode === "function" && props.state.selectionMode() === "multiple";
 
   return (
     <div {...containerProps}>
@@ -246,11 +257,13 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {
             {(item) => (
               <option
                 value={String(item.key)}
-                selected={isMultiple()
-                  ? selectedKeys() === 'all'
-                    ? true
-                    : (selectedKeys() as Set<Key>).has(item.key)
-                  : item.key === selectedKey()}
+                selected={
+                  isMultiple()
+                    ? selectedKeys() === "all"
+                      ? true
+                      : (selectedKeys() as Set<Key>).has(item.key)
+                    : item.key === selectedKey()
+                }
               >
                 {item.textValue}
               </option>