@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/select/createSelect.ts

@@ -4,16 +4,16 @@
  * Based on @react-aria/select useSelect.
  */
 
-import { type JSX, type Accessor, createEffect, onCleanup } from 'solid-js';
-import { createPress } from '../interactions/createPress';
-import { createFocusRing } from '../interactions/createFocusRing';
-import { createLabel } from '../label/createLabel';
-import { createTypeSelect } from '../selection/createTypeSelect';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { SelectState, CollectionNode } from '@proyecto-viviana/solid-stately';
+import { type JSX, type Accessor, createEffect, onCleanup } from "solid-js";
+import { createPress } from "../interactions/createPress";
+import { createFocusRing } from "../interactions/createFocusRing";
+import { createLabel } from "../label/createLabel";
+import { createTypeSelect } from "../selection/createTypeSelect";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { mergeProps } from "../utils/mergeProps";
+import { createId } from "../ssr";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import type { SelectState, CollectionNode } from "@proyecto-viviana/solid-stately";
 
 export interface AriaSelectProps {
   /** An ID for the select. */
@@ -22,14 +22,16 @@ export interface AriaSelectProps {
   isDisabled?: boolean;
   /** Whether the select is required. */
   isRequired?: boolean;
+  /** Whether the select is invalid. */
+  isInvalid?: boolean;
   /** The label for the select. */
   label?: JSX.Element;
   /** An accessible label for the select when no visible label is provided. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the select. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the select. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Placeholder text when no option is selected. */
   placeholder?: string;
   /** Whether the select should be auto-focused. */
@@ -42,8 +44,14 @@ export interface AriaSelectProps {
   onFocusChange?: (isFocused: boolean) => void;
   /** The name of the select, used when submitting an HTML form. */
   name?: string;
+  /** Associates the hidden native select with a form element by id. */
+  form?: string;
   /** Whether type-to-select is disabled. @default false */
   disallowTypeAhead?: boolean;
+  /** Whether the select can open when its collection is empty. @default false */
+  allowsEmptyCollection?: boolean;
+  /** Whether validation should use ARIA attributes or native browser validation. */
+  validationBehavior?: "aria" | "native";
 }
 
 export interface SelectAria<T> {
@@ -86,7 +94,7 @@ export function getSelectData(state: SelectState): SelectData | undefined {
 export function createSelect<T>(
   props: MaybeAccessor<AriaSelectProps>,
   state: SelectState<T>,
-  _ref?: () => HTMLElement | null
+  _ref?: () => HTMLElement | null,
 ): SelectAria<T> {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -119,13 +127,13 @@ export function createSelect<T>(
     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"];
     },
-    labelElementType: 'span',
+    labelElementType: "span",
   });
 
   // Focus ring for keyboard focus styling
@@ -139,14 +147,8 @@ export function createSelect<T>(
   const isFocused = state.isFocused;
 
   // Handle press on trigger
-  const { pressProps } = createPress({
-    get isDisabled() {
-      return getProps().isDisabled ?? state.isDisabled;
-    },
-    onPress() {
-      state.toggle();
-    },
-  });
+  const canOpen = () =>
+    getProps().allowsEmptyCollection || state.collection().getFirstKey() != null;
 
   // Helper to check if key is disabled
   const isKeyDisabled = (key: string | number): boolean => {
@@ -155,14 +157,17 @@ export function createSelect<T>(
   };
 
   // Helper to find the next non-disabled key.
-  const findNextKey = (fromKey: string | number | null, direction: 'forward' | 'backward'): string | number | null => {
+  const findNextKey = (
+    fromKey: string | number | null,
+    direction: "forward" | "backward",
+  ): string | number | null => {
     const collection = state.collection();
-    const getAdjacent = direction === 'forward'
-      ? (k: string | number) => collection.getKeyAfter(k)
-      : (k: string | number) => collection.getKeyBefore(k);
-    const getBoundary = direction === 'forward'
-      ? () => collection.getFirstKey()
-      : () => collection.getLastKey();
+    const getAdjacent =
+      direction === "forward"
+        ? (k: string | number) => collection.getKeyAfter(k)
+        : (k: string | number) => collection.getKeyBefore(k);
+    const getBoundary =
+      direction === "forward" ? () => collection.getFirstKey() : () => collection.getLastKey();
 
     let key = fromKey == null ? getBoundary() : getAdjacent(fromKey);
     while (key != null && isKeyDisabled(key)) {
@@ -172,6 +177,42 @@ export function createSelect<T>(
     return key;
   };
 
+  const focusKeyForOpen = (): string | number | null => {
+    const selectedKey = state.selectedKey();
+    if (selectedKey != null && !isKeyDisabled(selectedKey)) {
+      return selectedKey;
+    }
+    return findNextKey(null, "forward");
+  };
+
+  const openWithFocus = () => {
+    if (state.isOpen() || !canOpen()) {
+      return;
+    }
+    state.open();
+    const focusKey = focusKeyForOpen();
+    if (focusKey != null) {
+      state.setFocusedKey(focusKey);
+    }
+  };
+
+  const { pressProps } = createPress({
+    get isDisabled() {
+      return getProps().isDisabled ?? state.isDisabled;
+    },
+    onPress(e) {
+      if (e.pointerType === "keyboard") {
+        return;
+      }
+
+      if (state.isOpen()) {
+        state.close();
+      } else {
+        openWithFocus();
+      }
+    },
+  });
+
   // Type-to-select - for Select, typing directly selects items when closed
   const { typeSelectProps } = createTypeSelect({
     collection: () => state.collection(),
@@ -187,7 +228,9 @@ export function createSelect<T>(
     },
     isKeyDisabled,
     get isDisabled() {
-      return Boolean((getProps().disallowTypeAhead ?? false) || getProps().isDisabled || state.isDisabled);
+      return Boolean(
+        (getProps().disallowTypeAhead ?? false) || getProps().isDisabled || state.isDisabled,
+      );
     },
   });
 
@@ -198,20 +241,28 @@ export function createSelect<T>(
     const currentKey = state.focusedKey() ?? state.selectedKey();
 
     switch (e.key) {
-      case 'Enter':
-      case ' ':
+      case "Enter":
+      case " ":
         e.preventDefault();
-        state.toggle();
+        if (state.isOpen()) {
+          state.close();
+        } else {
+          openWithFocus();
+        }
         break;
 
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
         if (!state.isOpen()) {
+          if (!canOpen()) {
+            return;
+          }
           // ArrowDown: Open the dropdown and focus first/selected item
           state.open();
-          const focusKey = currentKey != null && !isKeyDisabled(currentKey)
-            ? currentKey
-            : findNextKey(currentKey, 'forward');
+          const focusKey =
+            currentKey != null && !isKeyDisabled(currentKey)
+              ? currentKey
+              : findNextKey(currentKey, "forward");
           if (focusKey) {
             state.setFocusedKey(focusKey);
           }
@@ -219,14 +270,18 @@ export function createSelect<T>(
         // When open, navigation is handled by the listbox
         break;
 
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
         if (!state.isOpen()) {
+          if (!canOpen()) {
+            return;
+          }
           // ArrowUp: Open the dropdown and focus last/selected item
           state.open();
-          const focusKey = currentKey != null && !isKeyDisabled(currentKey)
-            ? currentKey
-            : findNextKey(currentKey, 'backward');
+          const focusKey =
+            currentKey != null && !isKeyDisabled(currentKey)
+              ? currentKey
+              : findNextKey(currentKey, "backward");
           if (focusKey) {
             state.setFocusedKey(focusKey);
           }
@@ -234,51 +289,51 @@ export function createSelect<T>(
         // When open, navigation is handled by the listbox
         break;
 
-      case 'ArrowRight':
+      case "ArrowRight":
         // ArrowRight: Select next option (for horizontal keyboard navigation pattern)
         if (!state.isOpen()) {
           e.preventDefault();
-          const nextKey = findNextKey(currentKey, 'forward');
+          const nextKey = findNextKey(currentKey, "forward");
           if (nextKey != null) {
             state.setSelectedKey(nextKey);
           }
         }
         break;
 
-      case 'ArrowLeft':
+      case "ArrowLeft":
         // ArrowLeft: Select previous option (for horizontal keyboard navigation pattern)
         if (!state.isOpen()) {
           e.preventDefault();
-          const prevKey = findNextKey(currentKey, 'backward');
+          const prevKey = findNextKey(currentKey, "backward");
           if (prevKey != null) {
             state.setSelectedKey(prevKey);
           }
         }
         break;
 
-      case 'Home':
+      case "Home":
         // Home: Select first option
         if (!state.isOpen()) {
           e.preventDefault();
-          const firstKey = findNextKey(null, 'forward');
+          const firstKey = findNextKey(null, "forward");
           if (firstKey != null) {
             state.setSelectedKey(firstKey);
           }
         }
         break;
 
-      case 'End':
+      case "End":
         // End: Select last option
         if (!state.isOpen()) {
           e.preventDefault();
-          const lastKey = findNextKey(null, 'backward');
+          const lastKey = findNextKey(null, "backward");
           if (lastKey != null) {
             state.setSelectedKey(lastKey);
           }
         }
         break;
 
-      case 'Escape':
+      case "Escape":
         if (state.isOpen()) {
           e.preventDefault();
           state.close();
@@ -316,27 +371,29 @@ export function createSelect<T>(
         fieldProps as Record<string, unknown>,
         {
           id: buttonId,
-          role: 'combobox',
-          type: 'button',
+          type: "button",
           tabIndex: isDisabled ? undefined : 0,
-          'aria-haspopup': 'listbox',
-          'aria-expanded': isOpen,
-          'aria-controls': isOpen ? listBoxId : undefined,
-          'aria-disabled': isDisabled || undefined,
-          'aria-required': p.isRequired || undefined,
-          'aria-describedby': p['aria-describedby'] || undefined,
+          "aria-haspopup": "listbox",
+          "aria-expanded": isOpen,
+          "aria-controls": isOpen ? listBoxId : undefined,
+          "aria-disabled": isDisabled || undefined,
+          "aria-required": p.isRequired || undefined,
+          "aria-describedby": p["aria-describedby"] || undefined,
           onKeyDown,
           onFocus: handleFocus,
           onBlur: handleBlur,
-          'data-open': isOpen || undefined,
-          'data-disabled': isDisabled || undefined,
-          'data-focus-visible': isFocusVisible() || undefined,
-        } as Record<string, unknown>
+          "data-open": isOpen || undefined,
+          "data-disabled": isDisabled || undefined,
+          "data-focus-visible": isFocusVisible() || undefined,
+        } as Record<string, unknown>,
       );
 
       // Add type-select props if enabled
       if (!p.disallowTypeAhead) {
-        return mergeProps(baseProps, typeSelectProps as Record<string, unknown>) as JSX.HTMLAttributes<HTMLElement>;
+        return mergeProps(
+          baseProps,
+          typeSelectProps as Record<string, unknown>,
+        ) as JSX.HTMLAttributes<HTMLElement>;
       }
 
       return baseProps as JSX.HTMLAttributes<HTMLElement>;
@@ -349,9 +406,9 @@ export function createSelect<T>(
     get menuProps() {
       return {
         id: listBoxId,
-        role: 'listbox',
-        'aria-labelledby': buttonId,
-        'aria-multiselectable': state.selectionMode() === 'multiple' ? true : undefined,
+        role: "listbox",
+        "aria-labelledby": buttonId,
+        "aria-multiselectable": state.selectionMode() === "multiple" ? true : undefined,
         tabIndex: -1,
       } as JSX.HTMLAttributes<HTMLElement>;
     },

package/src/select/index.ts

@@ -1,9 +1,4 @@
-export {
-  createSelect,
-  getSelectData,
-  type AriaSelectProps,
-  type SelectAria,
-} from './createSelect';
+export { createSelect, getSelectData, type AriaSelectProps, type SelectAria } from "./createSelect";
 
 export {
   createHiddenSelect,
@@ -11,4 +6,4 @@ export {
   type AriaHiddenSelectProps,
   type HiddenSelectAria,
   type HiddenSelectProps,
-} from './createHiddenSelect.jsx';
+} from "./createHiddenSelect.jsx";

package/src/selection/createTypeSelect.ts

@@ -6,8 +6,8 @@
  * item text values. Supports multi-character search with debouncing.
  */
 
-import type { JSX, Accessor } from 'solid-js';
-import type { Key, Collection, CollectionNode } from '@proyecto-viviana/solid-stately';
+import type { JSX, Accessor } from "solid-js";
+import type { Key, Collection, CollectionNode } from "@proyecto-viviana/solid-stately";
 
 /**
  * Controls how long to wait before clearing the typeahead buffer.
@@ -53,7 +53,7 @@ function getStringForKey(key: string): string {
   if (key.length === 1 || !/^[A-Z]/i.test(key)) {
     return key;
   }
-  return '';
+  return "";
 }
 
 /**
@@ -64,14 +64,14 @@ function getKeyForSearch<T>(
   collection: Collection<T>,
   search: string,
   fromKey: Key | null,
-  isKeyDisabled?: (key: Key) => boolean
+  isKeyDisabled?: (key: Key) => boolean,
 ): Key | null {
   const searchLower = search.toLowerCase();
 
   // Collect all items in order
   const items: CollectionNode<T>[] = [];
   for (const item of collection) {
-    if (item.type === 'item') {
+    if (item.type === "item") {
       items.push(item);
     }
   }
@@ -81,7 +81,7 @@ function getKeyForSearch<T>(
   // Find the starting index
   let startIndex = 0;
   if (fromKey != null) {
-    const fromIndex = items.findIndex(item => item.key === fromKey);
+    const fromIndex = items.findIndex((item) => item.key === fromKey);
     if (fromIndex !== -1) {
       // Start searching from the item AFTER the current one
       startIndex = (fromIndex + 1) % items.length;
@@ -99,7 +99,7 @@ function getKeyForSearch<T>(
     }
 
     // Check if the text value starts with the search string
-    const textValue = item.textValue || '';
+    const textValue = item.textValue || "";
     if (textValue.toLowerCase().startsWith(searchLower)) {
       return item.key;
     }
@@ -125,7 +125,7 @@ function getKeyForSearch<T>(
 export function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAria {
   // Create mutable state object to persist across keystrokes
   const state: TypeSelectState = {
-    search: '',
+    search: "",
     timeout: undefined,
   };
 
@@ -147,13 +147,13 @@ export function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAr
     }
 
     // Don't start search with space (common action key)
-    if (state.search.length === 0 && character === ' ') {
+    if (state.search.length === 0 && character === " ") {
       return;
     }
 
     // If there's already search text and the user types a space,
     // prevent it from triggering selection and include it in the search
-    if (character === ' ' && state.search.trim().length > 0) {
+    if (character === " " && state.search.trim().length > 0) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -183,7 +183,7 @@ export function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAr
       clearTimeout(state.timeout);
     }
     state.timeout = setTimeout(() => {
-      state.search = '';
+      state.search = "";
     }, TYPEAHEAD_DEBOUNCE_WAIT_MS);
   };
 

package/src/selection/index.ts

@@ -3,4 +3,4 @@
  * in collection components.
  */
 
-export { createTypeSelect, type TypeSelectOptions, type TypeSelectAria } from './createTypeSelect';
+export { createTypeSelect, type TypeSelectOptions, type TypeSelectAria } from "./createTypeSelect";

package/src/separator/createSeparator.ts

@@ -5,15 +5,11 @@
  * e.g. groups of menu items or sections of a page.
  */
 
-import type { JSX } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { filterDOMProps } from '../utils';
+import type { JSX } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import { filterDOMProps } from "../utils";
 
-// ============================================
-// TYPES
-// ============================================
-
-export type Orientation = 'horizontal' | 'vertical';
+export type Orientation = "horizontal" | "vertical";
 
 export interface AriaSeparatorProps {
   /**
@@ -27,9 +23,13 @@ export interface AriaSeparatorProps {
    */
   elementType?: string;
   /** An accessibility label for the separator. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element(s) that labels the separator. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
+  /** Identifies the element(s) that describes the separator. */
+  "aria-describedby"?: string;
+  /** Identifies the element(s) that provide a detailed description. */
+  "aria-details"?: string;
   /** The element's unique identifier. */
   id?: string;
 }
@@ -39,39 +39,34 @@ export interface SeparatorAria {
   separatorProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// CREATE SEPARATOR
-// ============================================
-
 /**
  * Provides the accessibility implementation for a separator.
  * A separator is a visual divider between two groups of content,
  * e.g. groups of menu items or sections of a page.
  */
-export function createSeparator(
-  props: MaybeAccessor<AriaSeparatorProps> = {}
-): SeparatorAria {
+export function createSeparator(props: MaybeAccessor<AriaSeparatorProps> = {}): SeparatorAria {
   const getSeparatorProps = (): JSX.HTMLAttributes<HTMLElement> => {
     const p = access(props);
     const domProps = filterDOMProps(p as Record<string, unknown>, { labelable: true });
 
     // if orientation is horizontal, aria-orientation default is horizontal, so we leave it undefined
     // if it's vertical, we need to specify it
-    let ariaOrientation: 'vertical' | undefined;
-    if (p.orientation === 'vertical') {
-      ariaOrientation = 'vertical';
+    let ariaOrientation: "vertical" | undefined;
+    if (p.orientation === "vertical") {
+      ariaOrientation = "vertical";
     }
 
-    // hr elements implicitly have role = separator and a horizontal orientation
-    if (p.elementType !== 'hr') {
+    if (p.elementType !== "hr") {
       return {
         ...domProps,
-        role: 'separator',
-        'aria-orientation': ariaOrientation,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
       };
     }
 
-    return domProps;
+    return {
+      ...domProps,
+    };
   };
 
   return {

package/src/separator/index.ts

@@ -3,4 +3,4 @@ export {
   type AriaSeparatorProps,
   type SeparatorAria,
   type Orientation,
-} from './createSeparator';
+} from "./createSeparator";