How to use @react-md/wia-aria - 5 common examples

/>
      );
    } else if (!disablePressedFallback) {
      // if the ripple effect was disabled and the default pressed state interactions were
      // also not disabled, we can hook into it there
      const { pressed, eventHandlers } = usePressedStates(providedProps);
      handlers = eventHandlers;
      className = cn(className, {
        "rmd-states--pressed": pressed,
      });
    }

    if (props.id) {
      // if the element is "valid" and has an id, we can also start the keyboard focus only
      // states for the element by merging the class name
      className = cn(className, useKeyboardFocusedClassName(props.id));
    } else if (process.env.NODE_ENV !== "production") {
      console.error(
        "Found a component that does not have an `id` prop, but is wrapped `withStates`. " +
          "This component will be unable to have keyboard focus states applied until this is fixed."
      );
      console.error(new Error().stack);
    }

    // TODO: Look into a better way of fixing color pollution and adding ripples to the component.
    // The problem with this current approach is that if the composed component wraps the children
    // in other components/elements for styling, the ripples and color pollution fixes will not
    // work as expected and positioning will be wrong. The current workaround is to create another
    // wrapper for the "custom" component children and do the wrapping before passing to the WithStates
    // hoc. ListItem is a good example of this. Also has problems with Tooltips :/
    if (preventColorPollution) {
      // note that the `ripplesContainer` is NOT added to the color pollution fix children. if the

timeout={rippleTimeout}
        classNames={rippleClassNames}
      />
    );
  } else if (!disablePressedFallback) {
    // if the ripple effect was disabled and the default pressed state interactions were
    // also not disabled, we can hook into it there
    const { pressed, handlers: h } = usePressedStates(options);
    handlers = h;
    className = cn(className, { "rmd-states--pressed": pressed });
  }

  if (id) {
    // if the element is "valid" and has an id, we can also start the keyboard focus only
    // states for the element by merging the class name
    className = cn(className, useKeyboardFocusedClassName(id));
  }

  // "polyfill" the keyboard click events for elements that are supposed to behave like clickable
  // elements but really aren't. this will make sure to merge existing onKeyDown behaviors from
  // the ripple/pressed effects (if any) or the onKeyDown behavior from props
  if (enableKeyboardClick) {
    handlers = handlers || options.handlers || {};
    const { onKeyDown } = handlers;
    handlers.onKeyDown = (event: React.KeyboardEvent) => {
      if (onKeyDown) {
        onKeyDown(event);
      }

      if (!disableSpacebarClick && event.key === " ") {
        // need to prevent default behavior of screen scrolling
        event.preventDefault();

const handleKeyDown = (position: SheetPosition) => (
    event: React.KeyboardEvent
  ) => {
    const { key } = event;
    if (key === "ArrowUp") {
      event.preventDefault();
      show(position, false)(event);
    } else if (key === "ArrowDown") {
      event.preventDefault();
      show(position)(event);
    }
  };

  const hide = () => setVisible(false);
  const toggle = () => setVisible(prevVisible => !prevVisible);
  useScrollLock(visible);

  // const { containerProps, setActiveId } = useActiveDescendantState({
  //   // search: true,
  //   defaultActiveId: "",
  //   // incrementKeys: ["ArrowDown"],
  //   // decrementKeys: ["ArrowUp"],
  //   // jumpToFirstKeys: ["Home"],
  //   // jumpToLastKeys: ["End"],
  //   onKeyDown: event => {
  //     if (event.key === "Tab" || event.key === "Escape") {
  //       event.stopPropagation();
  //       hide();
  //     }
  //   },
  // });

> = allProps => {
  const { theme: t, themeType, buttonType, className, ...props } = allProps;
  return (
    
  );
};

const MenuItem: FunctionComponent = ({
  className,
  ...props
}) => {
  return (
    
  );
};