How to use @reach/utils - 10 common examples

}
  };

  const inputValue =
    autocomplete && (state === NAVIGATING || state === INTERACTING)
      ? // When idle, we don't have a navigationValue on ArrowUp/Down
        navigationValue || controlledValue || value
      : controlledValue || value;

  return (
    
  );
});

const inputValue =
    autocomplete && (state === NAVIGATING || state === INTERACTING)
      ? // When idle, we don't have a navigationValue on ArrowUp/Down
        navigationValue || controlledValue || value
      : controlledValue || value;

  return (
    
  );
});

const Container = portal ? Popover : "div";

  const popupProps = portal
    ? {
        targetRef: inputRef,
        position: positionMatchWidth
      }
    : null;

  return (
    
  );
});

* We only need an array of refs for our triggers for keyboard navigation, and
   * we already know the index because we can constrain Accordion children to
   * only AccordionItems. So we shouldn't need to do any funky render dancing
   * here, just update the ref in the same order if the index changes.
   */
  const setFocusableTriggerRefs = useCallback(
    node => {
      if (node && !disabled) {
        focusableTriggerNodes.current[index] = node;
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [disabled, index]
  );

  const ref = useForkedRef(forwardedRef, ownRef, setFocusableTriggerRefs);

  function handleClick(event) {
    event.preventDefault();
    if (disabled) {
      return;
    }
    ownRef.current.focus();
    onSelectPanel(index);
  }

  function handleKeyDown(event) {
    const { key, ctrlKey } = event;
    const { current: focusNodes } = focusableTriggerNodes;
    const firstItem = focusNodes[0];
    const lastItem = focusNodes[focusNodes.length - 1];
    const nextItem = focusNodes[index + 1];

export const MenuButton = forwardRef(function MenuButton(
  { onKeyDown, onMouseDown, id, ...props },
  forwardedRef
) {
  const {
    buttonRef,
    menuId,
    state: { buttonId, isOpen },
    dispatch
  } = useMenuContext();
  const ref = useForkedRef(buttonRef, forwardedRef);

  useEffect(() => {
    let newButtonId = id != null ? id : makeId("menu-button", menuId);
    if (buttonId !== newButtonId) {
      dispatch({
        type: SET_BUTTON_ID,
        payload: newButtonId
      });
    }
  }, [buttonId, dispatch, id, menuId]);

  function handleKeyDown(event) {
    switch (event.key) {
      case "ArrowDown":
      case "ArrowUp":
        event.preventDefault(); // prevent scroll

export const MenuPopover = forwardRef(function MenuPopover(
  { children, onBlur, style, ...props },
  forwardedRef
) {
  const {
    buttonRef,
    dispatch,
    menuRef,
    popoverRef,
    state: { isOpen }
  } = useMenuContext();

  const ref = useForkedRef(popoverRef, forwardedRef);

  function handleBlur(event) {
    const { relatedTarget } = event;
    requestAnimationFrame(() => {
      // We on want to close only if focus rests outside the menu
      if (
        document.activeElement !== menuRef.current &&
        document.activeElement !== buttonRef.current &&
        popoverRef.current
      ) {
        if (
          !popoverRef.current.contains(relatedTarget || document.activeElement)
        ) {
          dispatch({ type: CLOSE_MENU });
        }
      }

value: controlledValue,
    ...props
  },
  forwardedRef
) {
  const {
    data: { navigationValue, value, lastActionType },
    inputRef,
    state,
    transition,
    listboxId,
    autocompletePropRef,
    openOnFocus
  } = useContext(ComboboxContext);

  const ref = useForkedRef(inputRef, forwardedRef);

  // Because we close the List on blur, we need to track if the blur is
  // caused by clicking inside the list, and if so, don't close the List.
  const selectOnClickRef = useRef(false);

  const handleKeyDown = useKeyDown();

  const handleBlur = useBlur();

  const isControlled = controlledValue != null;

  useLayoutEffect(() => {
    autocompletePropRef.current = autocomplete;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [autocomplete]);

ref: forwardedRef,
  DEBUG_STYLE
} = {}) {
  const id = useId(idProp);

  const [isVisible, setIsVisible] = useState(
    DEBUG_STYLE
      ? true
      : id === null
      ? false
      : context.id === id && state === VISIBLE
  );

  // hopefully they always pass a ref if they ever pass one
  const ownRef = useRef();
  const ref = useForkedRef(forwardedRef, ownRef);
  const triggerRect = useRect(ownRef, isVisible);

  useEffect(() => {
    return subscribe(() => {
      if (
        context.id === id &&
        (state === VISIBLE || state === LEAVING_VISIBLE)
      ) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    });
  }, [id]);

  useEffect(() => checkStyles("tooltip"));

};

  const handleMouseDown = () => {
    // Allow quick click from one tool to another
    if (context.id !== id) return;
    transition("mousedown");
  };

  const handleKeyDown = event => {
    if (event.key === "Enter" || event.key === " ") {
      transition("selectWithKeyboard");
    }
  };

  const trigger = {
    "aria-describedby": isVisible ? makeId("tooltip", id) : undefined,
    "data-reach-tooltip-trigger": "",
    ref,
    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
    onFocus: wrapEvent(onFocus, handleFocus),
    onBlur: wrapEvent(onBlur, handleBlur),
    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
    onMouseDown: wrapEvent(onMouseDown, handleMouseDown)
  };

  const tooltip = {
    id,
    triggerRect,
    isVisible
  };

*/
    navigationSelection: null
  };

  const [
    state,
    data,
    transition,
    { buttonRef, inputRef, listRef, mouseMovedRef, optionsRef, popoverRef }
  ] = useReducerMachine(stateChart, reducer, initialData);

  const id = useId(props.id);

  const listboxId = makeId("listbox", id);

  const buttonId = makeId("button", id);

  const ref = useForkedRef(inputRef, forwardedRef);

  // Parses our children to find the selected option.
  // See docblock on the function for more deets.
  const selectedNode = recursivelyFindChildByValue(children, value);

  const context = {
    buttonId,
    buttonRef,
    data,
    inputRef,
    instanceId: id,
    isExpanded: isExpanded(state),
    listboxId,
    listRef,