@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/link/createLink.ts

@@ -8,17 +8,13 @@
  * This is a 1:1 port of @react-aria/link's useLink hook.
  */
 
-import { type Accessor } from 'solid-js';
-import { createPress } from '../interactions/createPress';
-import { createFocusable } from '../interactions/createFocusable';
-import { mergeProps } from '../utils/mergeProps';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { type PressEvent } from '../interactions/PressEvent';
-
-// ============================================
-// TYPES
-// ============================================
+import { type Accessor } from "solid-js";
+import { createPress } from "../interactions/createPress";
+import { createFocusable } from "../interactions/createFocusable";
+import { mergeProps } from "../utils/mergeProps";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import { type PressEvent } from "../interactions/PressEvent";
 
 export interface AriaLinkProps {
   /** Whether the link is disabled. */
@@ -41,21 +37,25 @@ export interface AriaLinkProps {
   ping?: string;
   /** Referrer policy for fetches initiated by this link. */
   referrerPolicy?:
-    | ''
-    | 'no-referrer'
-    | 'no-referrer-when-downgrade'
-    | 'origin'
-    | 'origin-when-cross-origin'
-    | 'same-origin'
-    | 'strict-origin'
-    | 'strict-origin-when-cross-origin'
-    | 'unsafe-url';
+    | ""
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "origin-when-cross-origin"
+    | "same-origin"
+    | "strict-origin"
+    | "strict-origin-when-cross-origin"
+    | "unsafe-url";
   /** Handler that is called when the press is released over the target. */
   onPress?: (e: PressEvent) => void;
   /** Handler that is called when a press interaction starts. */
   onPressStart?: (e: PressEvent) => void;
   /** Handler that is called when a press interaction ends. */
   onPressEnd?: (e: PressEvent) => void;
+  /** Handler that is called when a press is released over the target. */
+  onPressUp?: (e: PressEvent) => void;
+  /** Handler that is called when the press state changes. */
+  onPressChange?: (isPressed: boolean) => void;
   /** Handler that is called when the element is clicked. */
   onClick?: (e: MouseEvent) => void;
   /** Handler that is called when the element receives focus. */
@@ -71,13 +71,15 @@ export interface AriaLinkProps {
   /** Whether to autofocus the element. */
   autoFocus?: boolean;
   /** Indicates the current "page" or state within a set of related elements. */
-  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+  "aria-current"?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean;
   /** Defines a string value that labels the current element. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** Identifies the element (or elements) that provide a detailed description. */
+  "aria-details"?: string;
 }
 
 export interface LinkAria {
@@ -87,40 +89,62 @@ export interface LinkAria {
   isPressed: Accessor<boolean>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a link component.
  * A link allows a user to navigate to another page or resource within a web page
  * or application.
  */
-export function createLink(
-  props: MaybeAccessor<AriaLinkProps> = {}
-): LinkAria {
+export function createLink(props: MaybeAccessor<AriaLinkProps> = {}): LinkAria {
   const getProps = () => access(props);
 
   const isDisabled = () => getProps().isDisabled ?? false;
-  const elementType = () => getProps().elementType ?? 'a';
+  const elementType = () => getProps().elementType ?? "a";
 
   // Create press handling
   const { pressProps, isPressed } = createPress({
-    get isDisabled() { return isDisabled(); },
-    get onPress() { return getProps().onPress; },
-    get onPressStart() { return getProps().onPressStart; },
-    get onPressEnd() { return getProps().onPressEnd; },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get onPress() {
+      return getProps().onPress;
+    },
+    get onPressStart() {
+      return getProps().onPressStart;
+    },
+    get onPressEnd() {
+      return getProps().onPressEnd;
+    },
+    get onPressUp() {
+      return getProps().onPressUp;
+    },
+    get onPressChange() {
+      return getProps().onPressChange;
+    },
   });
 
   // Create focusable handling
   const { focusableProps } = createFocusable({
-    get isDisabled() { return isDisabled(); },
-    get autoFocus() { return getProps().autoFocus; },
-    get onFocus() { return getProps().onFocus; },
-    get onBlur() { return getProps().onBlur; },
-    get onFocusChange() { return getProps().onFocusChange; },
-    get onKeyDown() { return getProps().onKeyDown; },
-    get onKeyUp() { return getProps().onKeyUp; },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get autoFocus() {
+      return getProps().autoFocus;
+    },
+    get onFocus() {
+      return getProps().onFocus;
+    },
+    get onBlur() {
+      return getProps().onBlur;
+    },
+    get onFocusChange() {
+      return getProps().onFocusChange;
+    },
+    get onKeyDown() {
+      return getProps().onKeyDown;
+    },
+    get onKeyUp() {
+      return getProps().onKeyUp;
+    },
   });
 
   // Build link props
@@ -132,29 +156,32 @@ export function createLink(
     let baseProps: Record<string, unknown> = {};
 
     // If not an <a>, add role and tabIndex
-    if (elType !== 'a') {
+    if (elType !== "a") {
       baseProps = {
-        role: 'link',
+        role: "link",
         tabIndex: disabled ? undefined : 0,
       };
     }
 
     // ARIA attributes
     const ariaProps: Record<string, unknown> = {
-      'aria-disabled': disabled || undefined,
+      "aria-disabled": disabled || undefined,
     };
 
-    if (p['aria-current'] !== undefined) {
-      ariaProps['aria-current'] = p['aria-current'];
+    if (p["aria-current"] !== undefined) {
+      ariaProps["aria-current"] = p["aria-current"];
+    }
+    if (p["aria-label"]) {
+      ariaProps["aria-label"] = p["aria-label"];
     }
-    if (p['aria-label']) {
-      ariaProps['aria-label'] = p['aria-label'];
+    if (p["aria-labelledby"]) {
+      ariaProps["aria-labelledby"] = p["aria-labelledby"];
     }
-    if (p['aria-labelledby']) {
-      ariaProps['aria-labelledby'] = p['aria-labelledby'];
+    if (p["aria-describedby"]) {
+      ariaProps["aria-describedby"] = p["aria-describedby"];
     }
-    if (p['aria-describedby']) {
-      ariaProps['aria-describedby'] = p['aria-describedby'];
+    if (p["aria-details"]) {
+      ariaProps["aria-details"] = p["aria-details"];
     }
 
     // Handle onClick - prevent default navigation when appropriate
@@ -178,13 +205,13 @@ export function createLink(
     return mergeProps(
       filterDOMProps(p as Record<string, unknown>, {
         labelable: true,
-        isLink: elType === 'a',
+        isLink: elType === "a",
       }),
       baseProps,
       ariaProps,
       focusableProps as Record<string, unknown>,
       pressProps as Record<string, unknown>,
-      { onClick }
+      { onClick },
     );
   };
 

package/src/link/index.ts

@@ -1 +1 @@
-export { createLink, type AriaLinkProps, type LinkAria } from './createLink';
+export { createLink, type AriaLinkProps, type LinkAria } from "./createLink";

package/src/listbox/createListBox.ts

@@ -4,16 +4,16 @@
  * Based on @react-aria/listbox useListBox.
  */
 
-import { createEffect, onCleanup, type JSX } from 'solid-js';
-import { createFocusWithin } from '../interactions/createFocusWithin';
-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 { isDevEnv } from '../utils/env';
-import type { ListState, Key } from '@proyecto-viviana/solid-stately';
+import { createEffect, onCleanup, type JSX } from "solid-js";
+import { createFocusWithin } from "../interactions/createFocusWithin";
+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 { isDevEnv } from "../utils/env";
+import type { ListState, Key } from "@proyecto-viviana/solid-stately";
 
 export interface AriaListBoxProps {
   /** An ID for the listbox. */
@@ -23,11 +23,11 @@ export interface AriaListBoxProps {
   /** The label for the listbox. */
   label?: JSX.Element;
   /** An accessible label for the listbox when no visible label is provided. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the listbox. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the listbox. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Handler called when focus moves into the listbox. */
   onFocus?: (e: FocusEvent) => void;
   /** Handler called when focus moves out of the listbox. */
@@ -42,8 +42,46 @@ export interface AriaListBoxProps {
   shouldSelectOnPressUp?: boolean;
   /** Whether to focus items on hover. */
   shouldFocusOnHover?: boolean;
+  /** Whether the listbox uses virtual scrolling. */
+  isVirtualized?: boolean;
+  /** Whether options should use virtual focus instead of receiving DOM focus. */
+  shouldUseVirtualFocus?: boolean;
+  /** The behavior of links in the collection. */
+  linkBehavior?: "action" | "selection" | "override" | "none";
+  /**
+   * Unstable upstream override that forces items with actions to prefer
+   * selection or action behavior.
+   */
+  UNSTABLE_itemBehavior?: "selection" | "action";
+  /**
+   * Whether keyboard focus movement should also update selection in single selection mode.
+   * @default true
+   */
+  shouldSelectOnFocus?: boolean;
   /** Whether type-to-select is disabled. @default false */
   disallowTypeAhead?: boolean;
+  /**
+   * The primary orientation of the items. In a horizontal listbox the Left/Right
+   * arrows navigate the list (the block-axis Up/Down arrows still work); in a
+   * vertical listbox Left/Right are no-ops, matching upstream's
+   * `ListKeyboardDelegate` for a `stack` layout.
+   * @default "vertical"
+   */
+  orientation?: "vertical" | "horizontal";
+  /**
+   * The text direction, used to resolve the horizontal navigation axis. In a
+   * horizontal listbox, RTL flips Left/Right (Right=previous, Left=next).
+   * @default "ltr"
+   */
+  direction?: "ltr" | "rtl";
+  /**
+   * Whether pressing the Escape key should clear selection in the listbox or not.
+   * Most experiences should not modify this option as it eliminates a keyboard
+   * user's ability to easily clear selection. Only use if the escape key is being
+   * handled externally or should not trigger selection clearing contextually.
+   * @default "clearSelection"
+   */
+  escapeKeyBehavior?: "clearSelection" | "none";
 }
 
 export interface ListBoxAria {
@@ -61,35 +99,50 @@ interface ListBoxData {
   onAction?: (key: Key) => void;
   shouldSelectOnPressUp?: boolean;
   shouldFocusOnHover?: boolean;
+  isVirtualized?: boolean;
+  shouldUseVirtualFocus?: boolean;
   isDisabled?: boolean;
+  linkBehavior?: "action" | "selection" | "override" | "none";
+  UNSTABLE_itemBehavior?: "selection" | "action";
 }
 
 export function getListBoxData(state: ListState): ListBoxData | undefined {
   return listBoxData.get(state);
 }
 
+/**
+ * Whether a key should be skipped during keyboard navigation. Disabled keys only
+ * block navigation under `disabledBehavior: "all"` (the default); under
+ * `"selection"` they stay focusable (selection is still blocked elsewhere).
+ * Mirrors `ListKeyboardDelegate.isDisabled` in React Aria, which gates the skip
+ * on the resolved `disabledBehavior` from the selection manager.
+ */
+function isNavigationDisabled<T>(state: ListState<T>, key: Key): boolean {
+  return state.isDisabled(key) && state.disabledBehavior() === "all";
+}
+
 function findNextEnabledKey<T>(
   state: ListState<T>,
   currentKey: Key | null,
-  direction: 'next' | 'prev',
-  wrap: boolean
+  direction: "next" | "prev",
+  wrap: boolean,
 ): Key | null {
   const collection = state.collection();
-  const getAdjacentKey = direction === 'next'
-    ? (key: Key) => collection.getKeyAfter(key)
-    : (key: Key) => collection.getKeyBefore(key);
-  const getBoundaryKey = direction === 'next'
-    ? () => collection.getFirstKey()
-    : () => collection.getLastKey();
+  const getAdjacentKey =
+    direction === "next"
+      ? (key: Key) => collection.getKeyAfter(key)
+      : (key: Key) => collection.getKeyBefore(key);
+  const getBoundaryKey =
+    direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey();
 
   let key = currentKey != null ? getAdjacentKey(currentKey) : getBoundaryKey();
-  while (key != null && state.isDisabled(key)) {
+  while (key != null && isNavigationDisabled(state, key)) {
     key = getAdjacentKey(key);
   }
 
   if (key == null && wrap) {
     key = getBoundaryKey();
-    while (key != null && state.isDisabled(key)) {
+    while (key != null && isNavigationDisabled(state, key)) {
       key = getAdjacentKey(key);
     }
   }
@@ -104,7 +157,7 @@ function findNextEnabledKey<T>(
 export function createListBox<T>(
   props: MaybeAccessor<AriaListBoxProps>,
   state: ListState<T>,
-  _ref?: () => HTMLElement | null
+  _ref?: () => HTMLElement | null,
 ): ListBoxAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -112,24 +165,35 @@ export function createListBox<T>(
   // Development-time warning for missing accessibility labels
   if (isDevEnv()) {
     const p = getProps();
-    if (!p.label && !p['aria-label'] && !p['aria-labelledby']) {
+    if (!p.label && !p["aria-label"] && !p["aria-labelledby"]) {
       console.warn(
-        '[solidaria] A ListBox requires an aria-label or aria-labelledby attribute for accessibility.'
+        "[solidaria] A ListBox requires an aria-label or aria-labelledby attribute for accessibility.",
       );
     }
   }
 
   // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+  const domProps = () =>
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
 
   const updateSharedData = () => {
     const p = getProps();
+    const selectionBehavior = state.selectionBehavior();
+    let linkBehavior = p.linkBehavior ?? (selectionBehavior === "replace" ? "action" : "override");
+    if (selectionBehavior === "toggle" && linkBehavior === "action") {
+      linkBehavior = "override";
+    }
+
     listBoxData.set(state, {
       id,
       onAction: p.onAction,
       shouldSelectOnPressUp: p.shouldSelectOnPressUp,
       shouldFocusOnHover: p.shouldFocusOnHover,
+      isVirtualized: p.isVirtualized,
+      shouldUseVirtualFocus: p.shouldUseVirtualFocus,
       isDisabled: p.isDisabled,
+      linkBehavior,
+      UNSTABLE_itemBehavior: p.UNSTABLE_itemBehavior,
     });
   };
 
@@ -151,7 +215,10 @@ export function createListBox<T>(
     onBlurWithin: (e) => getProps().onBlur?.(e),
     onFocusWithinChange: (isFocused) => {
       getProps().onFocusChange?.(isFocused);
-      state.setFocused(isFocused);
+      // Collection focus lives on the selection manager (upstream tracks it in
+      // useSelectableCollection); the ListState-level setFocused may be a
+      // widget-level focus state (e.g. Select's trigger focus).
+      state.selectionManager.setFocused(isFocused);
     },
   });
 
@@ -163,13 +230,13 @@ export function createListBox<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",
   });
 
   // Type-to-select
@@ -190,84 +257,145 @@ export function createListBox<T>(
 
     const collection = state.collection();
     const shouldWrap = p.shouldFocusWrap ?? false;
+    const shouldSelectOnFocus = p.shouldSelectOnFocus ?? true;
 
     switch (e.key) {
-      case 'ArrowDown': {
-        e.preventDefault();
-        const nextKey = findNextEnabledKey(state, state.focusedKey(), 'next', shouldWrap);
+      case "ArrowDown": {
+        // Only consume the key once a target exists. Mirrors
+        // useSelectableCollection (ArrowDown, 211-225): preventDefault is called
+        // inside `if (nextKey != null)`, so at the last item without wrap the
+        // arrow is left alone to bubble (e.g. to scroll an enclosing region).
+        const nextKey = findNextEnabledKey(state, state.focusedKey(), "next", shouldWrap);
         if (nextKey != null) {
+          e.preventDefault();
           state.setFocusedKey(nextKey);
-          if (!e.shiftKey && state.selectionMode() === 'single') {
+          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(nextKey);
-          } else if (e.shiftKey && state.selectionMode() === 'multiple') {
+          } else if (e.shiftKey && state.selectionMode() === "multiple") {
             state.extendSelection(nextKey, collection);
           }
         }
         break;
       }
-      case 'ArrowUp': {
-        e.preventDefault();
-        const prevKey = findNextEnabledKey(state, state.focusedKey(), 'prev', shouldWrap);
+      case "ArrowUp": {
+        const prevKey = findNextEnabledKey(state, state.focusedKey(), "prev", shouldWrap);
         if (prevKey != null) {
+          e.preventDefault();
           state.setFocusedKey(prevKey);
-          if (!e.shiftKey && state.selectionMode() === 'single') {
+          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(prevKey);
-          } else if (e.shiftKey && state.selectionMode() === 'multiple') {
+          } else if (e.shiftKey && state.selectionMode() === "multiple") {
             state.extendSelection(prevKey, collection);
           }
         }
         break;
       }
-      case 'Home': {
+      case "ArrowRight":
+      case "ArrowLeft": {
+        // Horizontal orientation promotes the inline axis to the primary
+        // navigation axis. Upstream's ListKeyboardDelegate strips
+        // getKeyLeftOf/getKeyRightOf for a vertical stack, so Left/Right stay
+        // no-ops there; in a horizontal stack they move prev/next, flipped
+        // under RTL (Right=next, Left=prev in LTR).
+        if (p.orientation !== "horizontal") break;
+        const isRtl = p.direction === "rtl";
+        const forward = e.key === "ArrowRight" ? !isRtl : isRtl;
+        const focusedKey = state.focusedKey();
+        // With nothing focused, both directions enter at the first item,
+        // mirroring upstream's getFirstKey() fallback for Left and Right.
+        const nextKey =
+          focusedKey != null
+            ? findNextEnabledKey(state, focusedKey, forward ? "next" : "prev", shouldWrap)
+            : findNextEnabledKey(state, null, "next", false);
+        // As with the block axis, only swallow the key when it moves focus
+        // (useSelectableCollection ArrowLeft/Right, 243-280).
+        if (nextKey != null) {
+          e.preventDefault();
+          state.setFocusedKey(nextKey);
+          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
+            state.replaceSelection(nextKey);
+          } else if (e.shiftKey && state.selectionMode() === "multiple") {
+            state.extendSelection(nextKey, collection);
+          }
+        }
+        break;
+      }
+      case "Home": {
+        // Mirror useSelectableCollection (Home, 283-285): with nothing focused,
+        // Shift+Home has no anchor to extend a selection from, so leave the
+        // event alone (no focus move, no preventDefault).
+        if (state.focusedKey() == null && e.shiftKey) break;
         e.preventDefault();
-        const firstKey = findNextEnabledKey(state, null, 'next', false);
+        const firstKey = findNextEnabledKey(state, null, "next", false);
         if (firstKey != null) {
           state.setFocusedKey(firstKey);
-          if (e.ctrlKey && e.shiftKey && state.selectionMode() === 'multiple') {
+          if (e.ctrlKey && e.shiftKey && state.selectionMode() === "multiple") {
             // Select from current to first
             state.extendSelection(firstKey, collection);
-          } else if (!e.shiftKey && state.selectionMode() === 'single') {
+          } else if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(firstKey);
           }
         }
         break;
       }
-      case 'End': {
+      case "End": {
+        // Mirror useSelectableCollection (End, 300-302): same anchor guard as Home.
+        if (state.focusedKey() == null && e.shiftKey) break;
         e.preventDefault();
-        const lastKey = findNextEnabledKey(state, null, 'prev', false);
+        const lastKey = findNextEnabledKey(state, null, "prev", false);
         if (lastKey != null) {
           state.setFocusedKey(lastKey);
-          if (e.ctrlKey && e.shiftKey && state.selectionMode() === 'multiple') {
+          if (e.ctrlKey && e.shiftKey && state.selectionMode() === "multiple") {
             // Select from current to last
             state.extendSelection(lastKey, collection);
-          } else if (!e.shiftKey && state.selectionMode() === 'single') {
+          } else if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(lastKey);
           }
         }
         break;
       }
-      case ' ':
-      case 'Enter': {
+      case " ":
+      case "Enter": {
+        if (e.target !== e.currentTarget) {
+          break;
+        }
+
         e.preventDefault();
         const focusedKey = state.focusedKey();
-        if (focusedKey != null && !state.isDisabled(focusedKey)) {
-          if (state.selectionMode() !== 'none') {
+        // Activation is gated on the navigation-disabled check, not the raw
+        // one: under disabledBehavior "selection" a focusable disabled option
+        // still fires onAction, mirroring useSelectableItem's allowsActions
+        // (manager.isDisabled is gated on "all"). Selection stays blocked —
+        // toggleSelection self-guards on the raw disabled check.
+        if (focusedKey != null && !isNavigationDisabled(state, focusedKey)) {
+          if (state.selectionMode() !== "none") {
             state.toggleSelection(focusedKey);
           }
           p.onAction?.(focusedKey);
         }
         break;
       }
-      case 'a': {
-        if ((e.ctrlKey || e.metaKey) && state.selectionMode() === 'multiple') {
+      case "a": {
+        if ((e.ctrlKey || e.metaKey) && state.selectionMode() === "multiple") {
           e.preventDefault();
           state.selectAll();
         }
         break;
       }
-      case 'Escape': {
-        e.preventDefault();
-        if (!state.disallowEmptySelection()) {
+      case "Escape": {
+        // Mirror useSelectableCollection (Escape, 352-362): only clear the
+        // selection — and swallow the event — when escapeKeyBehavior is
+        // 'clearSelection', there is actually a selection to clear, and empty
+        // selection is allowed. With escapeKeyBehavior 'none', or otherwise,
+        // leave Escape alone so an enclosing overlay (popover, dialog, combobox)
+        // can handle it.
+        if (
+          (p.escapeKeyBehavior ?? "clearSelection") === "clearSelection" &&
+          !state.disallowEmptySelection() &&
+          !state.isEmpty()
+        ) {
+          e.stopPropagation();
+          e.preventDefault();
           state.clearSelection();
         }
         break;
@@ -288,18 +416,22 @@ export function createListBox<T>(
         focusWithinProps as Record<string, unknown>,
         fieldProps as Record<string, unknown>,
         {
-          role: 'listbox',
+          role: "listbox",
           tabIndex: p.isDisabled ? undefined : 0,
-          'aria-disabled': p.isDisabled || undefined,
-          'aria-multiselectable': selectionMode === 'multiple' ? true : undefined,
-          'aria-activedescendant': state.focusedKey() != null ? String(state.focusedKey()) : undefined,
+          "aria-disabled": p.isDisabled || undefined,
+          "aria-multiselectable": selectionMode === "multiple" ? true : undefined,
+          "aria-activedescendant":
+            state.focusedKey() != null ? String(state.focusedKey()) : undefined,
           onKeyDown,
-        }
+        },
       );
 
       // 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>;