@react-native-aria/listbox/lib/module/useOption.web.js

mono repo setup with bob

import { getItemCount } from '@react-stately/collections';
import { getItemId } from './utils';
import { isFocusVisible } from '@react-aria/interactions';
import { useHover, usePress } from '@react-native-aria/interactions';
import { isMac, isWebKit, mergeProps, useSlotId } from '@react-aria/utils';
import { useSelectableItem } from '@react-aria/selection';
import { useMapDomPropsToRN } from '@react-native-aria/utils';

/**
 * Provides the behavior and accessibility implementation for an option in a listbox.
 * See `useListBox` for more details about listboxes.
 * @param props - Props for the option.
 * @param state - State for the listbox, as returned by `useListState`.
 */
export function useOption(props, state, ref) {
  let {
    isSelected,
    isDisabled,
    key,
    shouldSelectOnPressUp,
    shouldFocusOnHover,
    isVirtualized,
    shouldUseVirtualFocus
  } = props;
  let labelId = useSlotId();
  let descriptionId = useSlotId();
  let _optionProps = {
    'role': 'option',
    'aria-disabled': isDisabled,
    'aria-selected': isSelected
  }; // Safari with VoiceOver on macOS misreads options with aria-labelledby or aria-label as simply "text".
  // We should not map slots to the label and description on Safari and instead just have VoiceOver read the textContent.
  // https://bugs.webkit.org/show_bug.cgi?id=209279

  if (!(isMac() && isWebKit())) {
    _optionProps['aria-label'] = props['aria-label'];
    _optionProps['aria-labelledby'] = labelId;
    _optionProps['aria-describedby'] = descriptionId;
  }

  if (isVirtualized) {
    //@ts-ignore
    _optionProps['aria-posinset'] = state.collection.getItem(key).index + 1;
    _optionProps['aria-setsize'] = getItemCount(state.collection);
  }

  let {
    itemProps
  } = useSelectableItem({
    selectionManager: state.selectionManager,
    //@ts-ignore
    key,
    ref,
    shouldSelectOnPressUp,
    isVirtualized,
    shouldUseVirtualFocus
  });
  let {
    pressProps
  } = usePress({ ...itemProps,
    isDisabled,
    preventFocusOnPress: shouldUseVirtualFocus
  });
  let {
    hoverProps
  } = useHover({
    isDisabled: isDisabled || !shouldFocusOnHover,

    onHoverStart() {
      if (!isFocusVisible()) {
        state.selectionManager.setFocused(true); //@ts-ignore

        state.selectionManager.setFocusedKey(key);
      }
    }

  }, ref); // Putting this as a last resort, after several hours of debugging.
  // Why?
  // tabListProps adds onMouseDown with preventDefault in useSelectableCollection.ts (React Aria) and react-native-web uses onClick for onPress.
  // This results in tab button not getting focused when clicked
  // See this example - https://codesandbox.io/s/issue-i-know-but-dont-know-why-1-ydyw5?file=/src/App.js

  const onMouseDown = e => e.stopPropagation();

  _optionProps = { ..._optionProps,
    ...mergeProps(pressProps, hoverProps),
    //@ts-ignore
    id: getItemId(state, key),
    onMouseDown
  };
  const optionProps = useMapDomPropsToRN(_optionProps, ref);
  return {
    optionProps,
    labelProps: {
      nativeID: labelId
    },
    descriptionProps: {
      nativeID: descriptionId
    }
  };
}
//# sourceMappingURL=useOption.web.js.map