@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/searchfield/createSearchField.ts

@@ -1,186 +0,0 @@
-/**
- * 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

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

package/src/select/createHiddenSelect.tsx

@@ -1,236 +0,0 @@
-/**
- * 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>
-  );
-}