@proyecto-viviana/solidaria 0.2.8 → 0.4.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();
@@ -289,15 +344,21 @@ export function createSelect<T>(
 
   // Handle focus events
   const handleFocus = (e: FocusEvent) => {
-    state.setFocused(true);
     getProps().onFocus?.(e);
     getProps().onFocusChange?.(true);
+    state.setFocused(true);
   };
 
   const handleBlur = (e: FocusEvent) => {
-    state.setFocused(false);
+    // Focus moving into the open listbox is not a select blur; the menu's own
+    // onBlur clears the state when focus leaves the listbox entirely.
+    if (state.isOpen()) {
+      return;
+    }
+
     getProps().onBlur?.(e);
     getProps().onFocusChange?.(false);
+    state.setFocused(false);
   };
 
   return {
@@ -316,27 +377,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,10 +412,20 @@ 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,
+        onBlur: (e: FocusEvent) => {
+          // Only a blur that leaves the listbox entirely blurs the select.
+          if ((e.currentTarget as Node | null)?.contains(e.relatedTarget as Node)) {
+            return;
+          }
+
+          getProps().onBlur?.(e);
+          getProps().onFocusChange?.(false);
+          state.setFocused(false);
+        },
       } as JSX.HTMLAttributes<HTMLElement>;
     },
     get descriptionProps() {

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/DOMLayoutDelegate.ts

@@ -0,0 +1,102 @@
+/**
+ * DOMLayoutDelegate - reads layout information for collection items directly
+ * from the DOM, used by {@link ListKeyboardDelegate} for page up/down
+ * navigation. Based on @react-aria/selection's `DOMLayoutDelegate`.
+ *
+ * React → Solid adaptation: the layout delegate captures a Solid ref accessor
+ * (`() => HTMLElement | null`) instead of a React `RefObject`; everything else
+ * is a faithful port.
+ */
+
+import type { Accessor } from "solid-js";
+import type { Key } from "@proyecto-viviana/solid-stately";
+import { getItemElement } from "./utils";
+
+/** A rectangle in the collection's scroll coordinate space. */
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** The size of the collection's scrollable content. */
+export interface Size {
+  width: number;
+  height: number;
+}
+
+/**
+ * Provides layout information about the items in a collection. By default this
+ * is read from the DOM (see {@link DOMLayoutDelegate}), but a virtualized
+ * collection can supply its own implementation. Mirrors @react-types/shared's
+ * `LayoutDelegate`, scoped to the members that selection navigation consumes.
+ */
+export interface LayoutDelegate {
+  /** Returns the rectangle for the item with the given key, in scroll coordinates. */
+  getItemRect(key: Key): Rect | null;
+  /** Returns the total size of the scrollable content. */
+  getContentSize(): Size;
+  /** Returns the currently visible rectangle (the scroll viewport). */
+  getVisibleRect(): Rect;
+  /** Returns the keys between two keys (inclusive), if known without walking the collection. */
+  getKeyRange?(from: Key, to: Key): Key[];
+  /** Returns the key spatially to the left of the given key, if known. */
+  getKeyLeftOf?(key: Key): Key | null;
+  /** Returns the key spatially to the right of the given key, if known. */
+  getKeyRightOf?(key: Key): Key | null;
+  /** Returns the key spatially above the given key, if known. */
+  getKeyAbove?(key: Key): Key | null;
+  /** Returns the key spatially below the given key, if known. */
+  getKeyBelow?(key: Key): Key | null;
+}
+
+/**
+ * A {@link LayoutDelegate} that measures items via the DOM.
+ */
+export class DOMLayoutDelegate implements LayoutDelegate {
+  private ref: Accessor<HTMLElement | null>;
+
+  constructor(ref: Accessor<HTMLElement | null>) {
+    this.ref = ref;
+  }
+
+  getItemRect(key: Key): Rect | null {
+    const container = this.ref();
+    if (!container) {
+      return null;
+    }
+    const item = key != null ? getItemElement(this.ref, key) : null;
+    if (!item) {
+      return null;
+    }
+
+    const containerRect = container.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+
+    return {
+      x: itemRect.left - containerRect.left - container.clientLeft + container.scrollLeft,
+      y: itemRect.top - containerRect.top - container.clientTop + container.scrollTop,
+      width: itemRect.width,
+      height: itemRect.height,
+    };
+  }
+
+  getContentSize(): Size {
+    const container = this.ref();
+    return {
+      width: container?.scrollWidth ?? 0,
+      height: container?.scrollHeight ?? 0,
+    };
+  }
+
+  getVisibleRect(): Rect {
+    const container = this.ref();
+    return {
+      x: container?.scrollLeft ?? 0,
+      y: container?.scrollTop ?? 0,
+      width: container?.clientWidth ?? 0,
+      height: container?.clientHeight ?? 0,
+    };
+  }
+}