How to use the @react-md/utils.useTimeout function in @react-md/utils

export function useKeyboardState({
  mode,
  showTooltip,
  hideTooltip,
  delay,
  initiated,
  setInitiated,
  onFocus,
  onBlur,
  onKeyDown,
  setEstimatedPosition,
}: KeyboardOptions): KeyboardResult {
  const handlers = useRefCache({ onFocus, onBlur, onKeyDown });
  const isWindowBlurred = useRef(false);

  const [start, stop] = useTimeout(() => {
    if (initiated.current === "keyboard") {
      showTooltip();
    }
  }, delay);

  const handleFocus = useCallback(
    (event: React.FocusEvent) => {
      const { onFocus } = handlers.current;
      if (onFocus) {
        onFocus(event);
      }

      // if the entire browser window was blurred, we don't want to show the tooltip
      // on the next focus event since it is confusing to see a tooltip appear again
      // after re-focusing a window.
      if (isWindowBlurred.current) {

export function useTooltipHoverModeState(
  defaultDelay: number,
  delayTimeout: number
): TooltipHoverModeState {
  const [delay, setDelay] = useState(defaultDelay);
  const delayRef = useRefCache(delay);

  const disable = useCallback(() => {
    if (delayRef.current === 0) {
      setDelay(defaultDelay);
    }
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultDelay]);

  const [start, stop] = useTimeout(disable, delayTimeout);
  const enable = useCallback(() => {
    stop();
    if (delayRef.current !== 0) {
      setDelay(0);
    }
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stop]);

  return {
    delay,
    enable,
    startDisableTimer: start,
  };
}

},
    [duplicates]
  );

  const popMessageDispatch = useCallback(() => {
    dispatch(popMessage());
  }, []);

  const resetQueueDispatch = useCallback>(() => {
    dispatch(resetQueue());
    return queueRef.current;
  }, []);
  const [visible, showMessage, hideMessage] = useToggle(
    defaultQueue.length > 0
  );
  const [startTimer, stopTimer, restartTimer] = useTimeout(
    hideMessage,
    timeout
  );

  useEffect(() => {
    // this effect will handle all the "logic" for transitioning between each message along with the
    // message priority updates.
    const [message, nextMessage] = queue;
    if (!message) {
      return;
    }

    const prevQueue = queueRef.current;
    const [prevMessage] = prevQueue;
    if (
      message.messagePriority !== "immediate" &&

export function useTooltipDelayState(
  defaultDelay: number,
  delayTimeout: number
) {
  const [delay, setDelay] = useState(defaultDelay);
  const delayRef = useRef(delay);
  useEffect(() => {
    delayRef.current = delay;
  });

  const disable = useCallback(() => {
    if (delayRef.current === 0) {
      setDelay(defaultDelay);
    }
  }, [defaultDelay]);
  const { start, stop } = useTimeout(disable, delayTimeout);
  const startTimer = useCallback(() => {
    start();
  }, []);
  const enable = useCallback(() => {
    stop();
    if (delayRef.current !== 0) {
      setDelay(0);
    }
  }, []);

  return {
    delay,
    enable,
    disable,
    startTimer,
  };

}: MouseOptions): MouseResult {
  const handlers = useRefCache({ onMouseEnter, onMouseLeave });

  let isHoverModeable = useTooltipHoverModeEnabled();
  if (typeof disableHoverMode === "boolean") {
    isHoverModeable = !disableHoverMode;
  }

  let delay = useTooltipHoverModeDelay();
  if (!isHoverModeable) {
    delay = propDelay;
  }

  const hoverModeActions = useTooltipHoverModeActions();

  const [start, stop] = useTimeout(() => {
    if (initiated.current === "mouse") {
      showTooltip();

      if (isHoverModeable) {
        hoverModeActions.enable();
      }
    }
  }, delay);

  const handleMouseEnter = useCallback(
    (event: React.MouseEvent) => {
      const { onMouseEnter } = handlers.current;
      if (onMouseEnter) {
        onMouseEnter(event);
      }

const AsyncSwitchExample: FC = () => {
  const [loading, setLoading] = useState(false);
  const [checked, setChecked] = useState(false);
  const [fail, handleFailChange] = useCheckboxState(false);
  const [start] = useTimeout(() => {
    setLoading(false);
    if (fail) {
      setChecked(prevChecked => !prevChecked);
    }
  }, 5000);

  return (

export function useTouchState({
  mode,
  visible,
  showTooltip,
  hideTooltip,
  delay,
  setInitiated,
  onTouchStart,
  onTouchMove,
  onContextMenu,
  setEstimatedPosition,
}: TouchOptions): TouchResult {
  const touched = useRef(false);
  const handlers = useRefCache({ onTouchStart, onTouchMove, onContextMenu });

  const [start, stop] = useTimeout(() => {
    touched.current = false;
    hideTooltip();
  }, delay);

  useEffect(() => {
    if (!visible) {
      return;
    }

    if (mode !== "touch") {
      touched.current = false;
      return;
    }

    const cb = (): void => {
      start();