@proyecto-viviana/solidaria 0.2.2 → 0.2.3

package/src/menu/createMenu.ts

@@ -0,0 +1,396 @@
+/**
+ * Provides the behavior and accessibility implementation for a menu component.
+ * A menu displays a list of actions or options that a user can choose.
+ * Based on @react-aria/menu useMenu.
+ */
+
+import { createEffect, onCleanup, type JSX, type Accessor } 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 { MenuState, Key, Collection } from '@proyecto-viviana/solid-stately';
+
+/**
+ * Default number of items to skip for page up/down when DOM measurement is not available.
+ */
+const DEFAULT_PAGE_SIZE = 10;
+
+/**
+ * Find the next non-disabled key in a collection.
+ */
+function findNextNonDisabledKey<T>(
+  collection: Collection<T>,
+  currentKey: Key | null,
+  direction: 'next' | 'prev',
+  isDisabled: (key: Key) => boolean,
+  wrap: boolean
+): Key | null {
+  const getNextKey = direction === 'next'
+    ? (key: Key) => collection.getKeyAfter(key)
+    : (key: Key) => collection.getKeyBefore(key);
+
+  const getFirstKey = direction === 'next'
+    ? () => collection.getFirstKey()
+    : () => collection.getLastKey();
+
+  let nextKey = currentKey != null ? getNextKey(currentKey) : getFirstKey();
+
+  // Skip disabled keys
+  while (nextKey != null && isDisabled(nextKey)) {
+    nextKey = getNextKey(nextKey);
+  }
+
+  // If we've reached the end and wrapping is enabled
+  if (nextKey == null && wrap) {
+    nextKey = getFirstKey();
+    // Skip disabled keys from the start
+    while (nextKey != null && isDisabled(nextKey)) {
+      nextKey = getNextKey(nextKey);
+    }
+  }
+
+  return nextKey;
+}
+
+export interface AriaMenuProps {
+  /** An ID for the menu. */
+  id?: string;
+  /** Whether the menu is disabled. */
+  isDisabled?: boolean;
+  /** The label for the menu. */
+  label?: JSX.Element;
+  /** An accessible label for the menu when no visible label is provided. */
+  'aria-label'?: string;
+  /** The ID of an element that labels the menu. */
+  'aria-labelledby'?: string;
+  /** The ID of an element that describes the menu. */
+  'aria-describedby'?: string;
+  /** Handler called when focus moves into the menu. */
+  onFocus?: (e: FocusEvent) => void;
+  /** Handler called when focus moves out of the menu. */
+  onBlur?: (e: FocusEvent) => void;
+  /** Handler called when the focus state changes. */
+  onFocusChange?: (isFocused: boolean) => void;
+  /** Handler called when an item is activated (pressed). */
+  onAction?: (key: Key) => void;
+  /** Handler called when the menu should close. */
+  onClose?: () => void;
+  /** Whether focus should automatically wrap around. */
+  shouldFocusWrap?: boolean;
+  /** Whether to auto-focus the first item when the menu opens. */
+  autoFocus?: boolean | 'first' | 'last';
+  /** Whether type-to-select is disabled. @default false */
+  disallowTypeAhead?: boolean;
+}
+
+export interface MenuAria {
+  /** Props for the menu element. */
+  menuProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the menu's label element (if any). */
+  labelProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+// Shared data between menu and menu items
+const menuData = new WeakMap<object, MenuData>();
+
+interface MenuData {
+  id: string;
+  onAction?: (key: Key) => void;
+  onClose?: () => void;
+}
+
+export function getMenuData(state: MenuState): MenuData | undefined {
+  return menuData.get(state);
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a menu component.
+ * A menu displays a list of actions or options that a user can choose.
+ */
+export function createMenu<T>(
+  props: MaybeAccessor<AriaMenuProps>,
+  state: MenuState<T>,
+  ref?: Accessor<HTMLElement | null>
+): MenuAria {
+  const getProps = () => access(props);
+  const id = createId(getProps().id);
+
+  // Development-time warning for missing accessibility labels
+  if (isDevEnv()) {
+    const p = getProps();
+    if (!p.label && !p['aria-label'] && !p['aria-labelledby']) {
+      console.warn(
+        '[solidaria] A Menu 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 });
+
+  // Share data with child menu items
+  createEffect(() => {
+    const p = getProps();
+    menuData.set(state, {
+      id,
+      onAction: p.onAction,
+      onClose: p.onClose,
+    });
+
+    onCleanup(() => {
+      menuData.delete(state);
+    });
+  });
+
+  // Handle focus within
+  const { focusWithinProps } = createFocusWithin({
+    onFocusWithin: (e) => getProps().onFocus?.(e),
+    onBlurWithin: (e) => getProps().onBlur?.(e),
+    onFocusWithinChange: (isFocused) => {
+      getProps().onFocusChange?.(isFocused);
+      state.setFocused(isFocused);
+    },
+  });
+
+  // Label handling
+  const { labelProps, fieldProps } = createLabel({
+    get id() {
+      return id;
+    },
+    get label() {
+      return getProps().label;
+    },
+    get 'aria-label'() {
+      return getProps()['aria-label'];
+    },
+    get 'aria-labelledby'() {
+      return getProps()['aria-labelledby'];
+    },
+    labelElementType: 'span',
+  });
+
+  // Type-to-select
+  const { typeSelectProps } = createTypeSelect({
+    collection: () => state.collection(),
+    focusedKey: () => state.focusedKey(),
+    onFocusedKeyChange: (key) => state.setFocusedKey(key),
+    isKeyDisabled: (key) => state.isDisabled(key),
+    get isDisabled() {
+      return getProps().disallowTypeAhead ?? false;
+    },
+  });
+
+  // Keyboard navigation
+  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {
+    if (getProps().isDisabled) return;
+
+    const collection = state.collection();
+    const p = getProps();
+    const wrap = p.shouldFocusWrap ?? false;
+
+    // Use state.isDisabled which properly checks the disabledKeys accessor
+    const isDisabled = (key: Key) => state.isDisabled(key);
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+        const currentKey = state.focusedKey();
+        const nextKey = findNextNonDisabledKey(collection, currentKey, 'next', isDisabled, wrap);
+        if (nextKey != null) {
+          state.setFocusedKey(nextKey);
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        const currentKey = state.focusedKey();
+        const prevKey = findNextNonDisabledKey(collection, currentKey, 'prev', isDisabled, wrap);
+        if (prevKey != null) {
+          state.setFocusedKey(prevKey);
+        }
+        break;
+      }
+      case 'Home': {
+        e.preventDefault();
+        // Find first non-disabled key
+        let firstKey = collection.getFirstKey();
+        while (firstKey != null && isDisabled(firstKey)) {
+          firstKey = collection.getKeyAfter(firstKey);
+        }
+        if (firstKey != null) {
+          state.setFocusedKey(firstKey);
+        }
+        break;
+      }
+      case 'End': {
+        e.preventDefault();
+        // Find last non-disabled key
+        let lastKey = collection.getLastKey();
+        while (lastKey != null && isDisabled(lastKey)) {
+          lastKey = collection.getKeyBefore(lastKey);
+        }
+        if (lastKey != null) {
+          state.setFocusedKey(lastKey);
+        }
+        break;
+      }
+      case ' ':
+      case 'Enter': {
+        e.preventDefault();
+        const focusedKey = state.focusedKey();
+        // Don't activate disabled items
+        if (focusedKey != null && !isDisabled(focusedKey)) {
+          p.onAction?.(focusedKey);
+          p.onClose?.();
+        }
+        break;
+      }
+      case 'Escape': {
+        e.preventDefault();
+        p.onClose?.();
+        break;
+      }
+      case 'PageDown': {
+        e.preventDefault();
+        const currentKey = state.focusedKey();
+        const el = ref?.();
+
+        if (el) {
+          // Use DOM measurements to calculate how many items fit in a page
+          const visibleHeight = el.clientHeight;
+          let traveled = 0;
+          let targetKey = currentKey;
+
+          while (targetKey != null && traveled < visibleHeight) {
+            const nextKey = collection.getKeyAfter(targetKey);
+            if (nextKey == null) break;
+
+            // Try to measure the item height
+            const itemElement = el.querySelector(`[data-key="${targetKey}"]`);
+            traveled += itemElement?.clientHeight ?? 32;
+
+            // Skip disabled items
+            if (!isDisabled(nextKey)) {
+              targetKey = nextKey;
+            } else {
+              // Skip over disabled items without counting them
+              const afterDisabled = findNextNonDisabledKey(collection, nextKey, 'next', isDisabled, false);
+              if (afterDisabled != null) {
+                targetKey = afterDisabled;
+              } else {
+                break;
+              }
+            }
+          }
+
+          if (targetKey != null && targetKey !== currentKey) {
+            state.setFocusedKey(targetKey);
+          }
+        } else {
+          // Fallback: move by DEFAULT_PAGE_SIZE items
+          let count = DEFAULT_PAGE_SIZE;
+          let targetKey = currentKey;
+
+          while (count > 0 && targetKey != null) {
+            const nextKey = findNextNonDisabledKey(collection, targetKey, 'next', isDisabled, false);
+            if (nextKey == null) break;
+            targetKey = nextKey;
+            count--;
+          }
+
+          if (targetKey != null) {
+            state.setFocusedKey(targetKey);
+          }
+        }
+        break;
+      }
+      case 'PageUp': {
+        e.preventDefault();
+        const currentKey = state.focusedKey();
+        const el = ref?.();
+
+        if (el) {
+          // Use DOM measurements to calculate how many items fit in a page
+          const visibleHeight = el.clientHeight;
+          let traveled = 0;
+          let targetKey = currentKey;
+
+          while (targetKey != null && traveled < visibleHeight) {
+            const prevKey = collection.getKeyBefore(targetKey);
+            if (prevKey == null) break;
+
+            // Try to measure the item height
+            const itemElement = el.querySelector(`[data-key="${targetKey}"]`);
+            traveled += itemElement?.clientHeight ?? 32;
+
+            // Skip disabled items
+            if (!isDisabled(prevKey)) {
+              targetKey = prevKey;
+            } else {
+              // Skip over disabled items without counting them
+              const beforeDisabled = findNextNonDisabledKey(collection, prevKey, 'prev', isDisabled, false);
+              if (beforeDisabled != null) {
+                targetKey = beforeDisabled;
+              } else {
+                break;
+              }
+            }
+          }
+
+          if (targetKey != null && targetKey !== currentKey) {
+            state.setFocusedKey(targetKey);
+          }
+        } else {
+          // Fallback: move by DEFAULT_PAGE_SIZE items
+          let count = DEFAULT_PAGE_SIZE;
+          let targetKey = currentKey;
+
+          while (count > 0 && targetKey != null) {
+            const prevKey = findNextNonDisabledKey(collection, targetKey, 'prev', isDisabled, false);
+            if (prevKey == null) break;
+            targetKey = prevKey;
+            count--;
+          }
+
+          if (targetKey != null) {
+            state.setFocusedKey(targetKey);
+          }
+        }
+        break;
+      }
+    }
+  };
+
+  return {
+    get labelProps() {
+      return labelProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get menuProps() {
+      const p = getProps();
+
+      const baseProps = mergeProps(
+        domProps(),
+        focusWithinProps as Record<string, unknown>,
+        fieldProps as Record<string, unknown>,
+        {
+          role: 'menu',
+          tabIndex: p.isDisabled ? undefined : 0,
+          'aria-disabled': p.isDisabled || undefined,
+          onKeyDown,
+        } 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 baseProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+  };
+}

package/src/menu/createMenuItem.ts

@@ -0,0 +1,149 @@
+/**
+ * Provides the behavior and accessibility implementation for a menu item.
+ * Based on @react-aria/menu useMenuItem.
+ */
+
+import { type JSX, type Accessor } from 'solid-js';
+import { createPress } from '../interactions/createPress';
+import { createHover } from '../interactions/createHover';
+import { createFocusRing } from '../interactions/createFocusRing';
+import { mergeProps } from '../utils/mergeProps';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import { getMenuData } from './createMenu';
+import type { MenuState, Key } from '@proyecto-viviana/solid-stately';
+
+export interface AriaMenuItemProps {
+  /** The unique key for the menu item. */
+  key: Key;
+  /** Whether the menu item is disabled. */
+  isDisabled?: boolean;
+  /** An accessible label for the menu item. */
+  'aria-label'?: string;
+  /** Handler called when the menu item is selected. */
+  onAction?: () => void;
+  /** Whether to close the menu when this item is selected. */
+  closeOnSelect?: boolean;
+}
+
+export interface MenuItemAria {
+  /** Props for the menu item element. */
+  menuItemProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the label text inside the menu item. */
+  labelProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the description text inside the menu item. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the keyboard shortcut inside the menu item. */
+  keyboardShortcutProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the menu item is currently focused. */
+  isFocused: Accessor<boolean>;
+  /** Whether the menu item is keyboard focused. */
+  isFocusVisible: Accessor<boolean>;
+  /** Whether the menu item is currently pressed. */
+  isPressed: Accessor<boolean>;
+  /** Whether the menu item is disabled. */
+  isDisabled: Accessor<boolean>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a menu item.
+ */
+export function createMenuItem<T>(
+  props: MaybeAccessor<AriaMenuItemProps>,
+  state: MenuState<T>,
+  _ref?: () => HTMLElement | null
+): MenuItemAria {
+  const getProps = () => access(props);
+
+  // Get shared data from menu
+  const getData = () => getMenuData(state);
+
+  // Computed states
+  const isDisabled: Accessor<boolean> = () => {
+    return getProps().isDisabled ?? state.isDisabled(getProps().key);
+  };
+
+  const isFocused: Accessor<boolean> = () => {
+    return state.focusedKey() === getProps().key;
+  };
+
+  // Handle press
+  const { pressProps, isPressed } = createPress({
+    get isDisabled() {
+      return isDisabled();
+    },
+    onPress() {
+      const p = getProps();
+      const key = p.key;
+      const data = getData();
+
+      // Call item-specific onAction
+      p.onAction?.();
+
+      // Call menu-level onAction
+      data?.onAction?.(key);
+
+      // Close menu if closeOnSelect is not explicitly false
+      if (p.closeOnSelect !== false) {
+        data?.onClose?.();
+      }
+    },
+  });
+
+  // Handle hover
+  const { hoverProps } = createHover({
+    get isDisabled() {
+      return isDisabled();
+    },
+    onHoverStart() {
+      state.setFocusedKey(getProps().key);
+    },
+  });
+
+  // Handle focus ring
+  const { isFocusVisible, focusProps } = createFocusRing();
+
+  // Generate unique IDs for label and description
+  const labelId = `${getProps().key}-label`;
+  const descriptionId = `${getProps().key}-desc`;
+  const keyboardId = `${getProps().key}-kbd`;
+
+  return {
+    get menuItemProps() {
+      const key = getProps().key;
+      const ariaLabel = getProps()['aria-label'];
+
+      return mergeProps(
+        pressProps as Record<string, unknown>,
+        hoverProps as Record<string, unknown>,
+        focusProps as Record<string, unknown>,
+        {
+          role: 'menuitem',
+          id: String(key),
+          'aria-disabled': isDisabled() || undefined,
+          'aria-label': ariaLabel,
+          'aria-labelledby': !ariaLabel ? labelId : undefined,
+          'aria-describedby': descriptionId,
+          tabIndex: isFocused() ? 0 : -1,
+          'data-focused': isFocused() || undefined,
+          'data-focus-visible': isFocusVisible() || undefined,
+          'data-pressed': isPressed() || undefined,
+          'data-disabled': isDisabled() || undefined,
+        } as Record<string, unknown>
+      ) as JSX.HTMLAttributes<HTMLElement>;
+    },
+    labelProps: {
+      id: labelId,
+    },
+    descriptionProps: {
+      id: descriptionId,
+    },
+    keyboardShortcutProps: {
+      id: keyboardId,
+      'aria-hidden': true,
+    },
+    isFocused,
+    isFocusVisible: () => isFocused() && isFocusVisible(),
+    isPressed,
+    isDisabled,
+  };
+}

package/src/menu/createMenuTrigger.ts

@@ -0,0 +1,88 @@
+/**
+ * Provides the behavior and accessibility implementation for a menu trigger.
+ * Based on @react-aria/menu useMenuTrigger.
+ */
+
+import { type JSX } from 'solid-js';
+import { createId } from '../ssr';
+import { access, type MaybeAccessor } from '../utils/reactivity';
+import type { OverlayTriggerState } from '@proyecto-viviana/solid-stately';
+
+export interface AriaMenuTriggerProps {
+  /** The type of menu that the menu trigger opens. */
+  type?: 'menu' | 'listbox';
+  /** Whether the menu trigger is disabled. */
+  isDisabled?: boolean;
+  /** An ID for the menu. */
+  id?: string;
+}
+
+export interface MenuTriggerAria {
+  /** Props for the menu trigger button. */
+  menuTriggerProps: JSX.HTMLAttributes<HTMLElement> & {
+    onPress: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+  };
+  /** Props for the menu element. */
+  menuProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a menu trigger.
+ */
+export function createMenuTrigger(
+  props: MaybeAccessor<AriaMenuTriggerProps>,
+  state: OverlayTriggerState
+): MenuTriggerAria {
+  const getProps = () => access(props);
+  const menuId = createId(getProps().id);
+
+  const onPress = () => {
+    if (!getProps().isDisabled) {
+      state.toggle();
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (getProps().isDisabled) return;
+
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+      case 'ArrowDown': {
+        e.preventDefault();
+        if (!state.isOpen()) {
+          state.open();
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        if (!state.isOpen()) {
+          state.open();
+        }
+        break;
+      }
+    }
+  };
+
+  return {
+    get menuTriggerProps() {
+      const p = getProps();
+      const type = p.type ?? 'menu';
+      const isOpen = state.isOpen();
+
+      return {
+        'aria-haspopup': type,
+        'aria-expanded': isOpen,
+        'aria-controls': isOpen ? menuId : undefined,
+        'aria-disabled': p.isDisabled || undefined,
+        onPress,
+        onKeyDown,
+      };
+    },
+    menuProps: {
+      id: menuId,
+    },
+  };
+}

package/src/menu/index.ts

@@ -0,0 +1,18 @@
+export {
+  createMenu,
+  getMenuData,
+  type AriaMenuProps,
+  type MenuAria,
+} from './createMenu';
+
+export {
+  createMenuItem,
+  type AriaMenuItemProps,
+  type MenuItemAria,
+} from './createMenuItem';
+
+export {
+  createMenuTrigger,
+  type AriaMenuTriggerProps,
+  type MenuTriggerAria,
+} from './createMenuTrigger';