@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/searchfield/createSearchField.ts

@@ -0,0 +1,186 @@
+/**
+ * Provides the behavior and accessibility implementation for a search field.
+ * A search field allows a user to enter and clear a search query.
+ * 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';
+
+export interface AriaSearchFieldProps extends Omit<AriaTextFieldProps, 'type'> {
+  /** 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'> {
+  /** Props for the input element. */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the clear button. */
+  clearButtonProps: {
+    'aria-label': string;
+    tabIndex: number;
+    disabled?: boolean;
+    onMouseDown: (e: MouseEvent) => void;
+    onClick: () => void;
+  };
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a search field.
+ */
+export function createSearchField(
+  props: MaybeAccessor<AriaSearchFieldProps>,
+  state: SearchFieldState,
+  inputRef?: () => HTMLInputElement | null
+): SearchFieldAria {
+  const getProps = () => access(props);
+
+  // Use createTextField for the base implementation
+  const textFieldAria = createTextField({
+    get value() {
+      return state.value();
+    },
+    get isDisabled() {
+      return getProps().isDisabled;
+    },
+    get isReadOnly() {
+      return getProps().isReadOnly;
+    },
+    get isRequired() {
+      return getProps().isRequired;
+    },
+    get isInvalid() {
+      return getProps().isInvalid;
+    },
+    get label() {
+      return getProps().label;
+    },
+    get 'aria-label'() {
+      return getProps()['aria-label'];
+    },
+    get 'aria-labelledby'() {
+      return getProps()['aria-labelledby'];
+    },
+    get 'aria-describedby'() {
+      return getProps()['aria-describedby'];
+    },
+    get description() {
+      return getProps().description;
+    },
+    get errorMessage() {
+      return getProps().errorMessage;
+    },
+    get placeholder() {
+      return getProps().placeholder;
+    },
+    get name() {
+      return getProps().name;
+    },
+    get autoFocus() {
+      return getProps().autoFocus;
+    },
+    get autoComplete() {
+      return getProps().autoComplete;
+    },
+    get maxLength() {
+      return getProps().maxLength;
+    },
+    get minLength() {
+      return getProps().minLength;
+    },
+    get pattern() {
+      return getProps().pattern;
+    },
+    type: 'search',
+    onChange: (value: string) => {
+      state.setValue(value);
+      getProps().onChange?.(value);
+    },
+  });
+
+  // Handle keyboard events for search field
+  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {
+    const p = getProps();
+
+    if (p.isDisabled || p.isReadOnly) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+      return;
+    }
+
+    if (e.key === 'Enter' && p.onSubmit) {
+      e.preventDefault();
+      p.onSubmit(state.value());
+    }
+
+    if (e.key === 'Escape') {
+      const currentValue = state.value();
+      const inputValue = inputRef?.()?.value ?? '';
+
+      // Only clear if there's a value
+      if (currentValue !== '' || inputValue !== '') {
+        e.preventDefault();
+        e.stopPropagation();
+        state.setValue('');
+        p.onClear?.();
+      }
+    }
+  };
+
+  // Handle clear button click
+  const onClearButtonClick = () => {
+    const p = getProps();
+    state.setValue('');
+    p.onClear?.();
+    // Focus the input after clearing
+    inputRef?.()?.focus();
+  };
+
+  // Prevent focus from leaving input on mobile when clicking clear button
+  const onClearButtonMouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+  };
+
+  return {
+    get labelProps() {
+      return textFieldAria.labelProps;
+    },
+    get inputProps() {
+      return mergeProps(
+        textFieldAria.inputProps as Record<string, unknown>,
+        {
+          onKeyDown,
+          // Clear defaultValue since it's handled by state
+          defaultValue: undefined,
+        } as Record<string, unknown>
+      ) as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+    get clearButtonProps() {
+      const p = getProps();
+      const isDisabled = p.isDisabled || p.isReadOnly;
+
+      return {
+        'aria-label': 'Clear search',
+        tabIndex: -1, // Exclude from tab order
+        disabled: isDisabled,
+        onMouseDown: onClearButtonMouseDown,
+        onClick: onClearButtonClick,
+      };
+    },
+    get descriptionProps() {
+      return textFieldAria.descriptionProps;
+    },
+    get errorMessageProps() {
+      return textFieldAria.errorMessageProps;
+    },
+    get isInvalid() {
+      return textFieldAria.isInvalid;
+    },
+  };
+}

package/src/searchfield/index.ts

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

package/src/select/createHiddenSelect.tsx

@@ -0,0 +1,236 @@
+/**
+ * Provides a hidden native select element for form integration.
+ * 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 { createFormReset } from '../form/createFormReset';
+import { createFormValidation } from '../form/createFormValidation';
+import type { SelectState, Key, FormValidationState } from '@proyecto-viviana/solid-stately';
+
+export type ValidationBehavior = 'aria' | 'native';
+
+export interface AriaHiddenSelectProps<T> {
+  /** The state object for the select. */
+  state: SelectState<T>;
+  /** The name attribute for the hidden select. */
+  name?: string;
+  /** Whether the select is disabled. */
+  isDisabled?: boolean;
+  /** Whether the select is required. */
+  isRequired?: boolean;
+  /** Describes the type of autocomplete functionality the select should provide. */
+  autoComplete?: string;
+  /** The `form` attribute to associate the select with a form by ID. */
+  form?: string;
+  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
+  validationBehavior?: ValidationBehavior;
+  /** A ref to the trigger element for focus on validation error. */
+  triggerRef?: Accessor<HTMLElement | null>;
+  /** Form validation state (optional, for native validation). */
+  validationState?: FormValidationState;
+}
+
+export interface HiddenSelectAria {
+  /** Props for the container element. */
+  containerProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the hidden select element. */
+  selectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
+  /** Props for the hidden input element (for form submission). */
+  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}
+
+/**
+ * Provides the accessibility implementation for a hidden select.
+ * This is used for native form submission and accessibility on mobile devices.
+ */
+export function createHiddenSelect<T>(
+  props: MaybeAccessor<AriaHiddenSelectProps<T>>
+): HiddenSelectAria {
+  const getProps = () => access(props);
+
+  // Track the select element for form reset/validation
+  let selectRef: HTMLSelectElement | undefined;
+
+  // Set up form reset handler
+  createEffect(() => {
+    const p = getProps();
+    if (!selectRef) return;
+
+    const form = selectRef.form;
+    if (!form) return;
+
+    const handleReset = () => {
+      // Reset to default selected key (first key or null)
+      const defaultKey = p.state.collection().getFirstKey();
+      p.state.setSelectedKey(defaultKey);
+    };
+
+    form.addEventListener('reset', handleReset);
+
+    onCleanup(() => {
+      form.removeEventListener('reset', handleReset);
+    });
+  });
+
+  // Set up form validation handler for native validation
+  createEffect(() => {
+    const p = getProps();
+    if (!selectRef || p.validationBehavior !== 'native' || !p.validationState) return;
+
+    createFormValidation(
+      {
+        validationBehavior: p.validationBehavior,
+        focus: () => p.triggerRef?.()?.focus(),
+      },
+      p.validationState,
+      () => selectRef
+    );
+  });
+
+  return {
+    get containerProps() {
+      return {
+        '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 validationBehavior = p.validationBehavior ?? 'aria';
+
+      return {
+        ref: (el: HTMLSelectElement) => { selectRef = el; },
+        tabIndex: -1,
+        autoComplete: p.autoComplete,
+        disabled: p.isDisabled ?? state.isDisabled,
+        name: p.name,
+        form: p.form,
+        // Add required attribute for native form validation
+        required: validationBehavior === 'native' && p.isRequired,
+        value: selectedKey != null ? String(selectedKey) : '',
+        onChange: (e: Event) => {
+          const target = e.target as HTMLSelectElement;
+          state.setSelectedKey(target.value as Key);
+        },
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          opacity: 0,
+          'font-size': '16px', // Prevents zoom on iOS
+          border: 'none',
+          cursor: 'default',
+          margin: 0,
+          padding: 0,
+          'pointer-events': 'none',
+        },
+      } as JSX.SelectHTMLAttributes<HTMLSelectElement>;
+    },
+    get inputProps() {
+      const p = getProps();
+      const state = p.state;
+      const selectedKey = state.selectedKey();
+      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;
+
+      return {
+        type: useTextInput ? 'text' : 'hidden',
+        name: p.name,
+        form: p.form,
+        value: selectedKey != null ? String(selectedKey) : '',
+        disabled: p.isDisabled ?? state.isDisabled,
+        required: useTextInput ? p.isRequired : undefined,
+        style: useTextInput ? { display: 'none' } : undefined,
+      } as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+  };
+}
+
+export interface HiddenSelectProps<T> {
+  /** The state object for the select. */
+  state: SelectState<T>;
+  /** The name attribute for the hidden select. */
+  name?: string;
+  /** Whether the select is disabled. */
+  isDisabled?: boolean;
+  /** Whether the select is required. */
+  isRequired?: boolean;
+  /** A ref to the trigger element. */
+  triggerRef?: () => HTMLElement | null;
+  /** Label for the select. */
+  label?: string;
+  /** Describes the type of autocomplete functionality the select should provide. */
+  autoComplete?: string;
+  /** The `form` attribute to associate the select with a form by ID. */
+  form?: string;
+  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */
+  validationBehavior?: ValidationBehavior;
+  /** Form validation state (optional, for native validation). */
+  validationState?: FormValidationState;
+}
+
+/**
+ * A component that renders a hidden native select for form submission.
+ * This is useful on mobile devices where native select behavior is preferred.
+ */
+export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {
+  const { containerProps, selectProps } = createHiddenSelect({
+    get state() {
+      return props.state;
+    },
+    get name() {
+      return props.name;
+    },
+    get isDisabled() {
+      return props.isDisabled;
+    },
+    get isRequired() {
+      return props.isRequired;
+    },
+    get autoComplete() {
+      return props.autoComplete;
+    },
+    get form() {
+      return props.form;
+    },
+    get validationBehavior() {
+      return props.validationBehavior;
+    },
+    get triggerRef() {
+      return props.triggerRef;
+    },
+    get validationState() {
+      return props.validationState;
+    },
+  });
+
+  const collection = () => props.state.collection();
+  const selectedKey = () => props.state.selectedKey();
+
+  return (
+    <div {...containerProps}>
+      <label>
+        {props.label}
+        <select {...selectProps}>
+          <option />
+          <For each={Array.from(collection())}>
+            {(item) => (
+              <option value={String(item.key)} selected={item.key === selectedKey()}>
+                {item.textValue}
+              </option>
+            )}
+          </For>
+        </select>
+      </label>
+    </div>
+  );
+}