@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/menu/createMenu.ts

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

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

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

@@ -1,18 +0,0 @@
-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';