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

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

export default function useValuedState({
  onChange,
  value,
  defaultValue,
}: Options): [boolean, ChangeEventHandler | undefined] {
  const handler = useRefCache(onChange);
  const [valued, enable, disable] = useToggle(() => {
    if (typeof value === "undefined") {
      return (
        typeof defaultValue === "number" || (defaultValue || "").length > 0
      );
    }

    // this isn't used for controlled components
    return false;
  });

  const handleChange = useCallback>(
    event => {
      const onChange = handler.current;
      if (onChange) {
        onChange(event);

const { exiting, style } = ripple;

  let timeout = propTimeout;
  let classNames = propClassNames;
  const context = useStatesConfigContext();
  if (typeof timeout === "undefined" || typeof classNames === "undefined") {
    if (typeof timeout === "undefined") {
      timeout = context.rippleTimeout;
    }

    if (typeof classNames === "undefined") {
      classNames = context.rippleClassNames;
    }
  }

  const ref = useRefCache({ ripple, entered, exited });
  const onEntered = useCallback(() => {
    const { ripple, entered } = ref.current;
    entered(ripple);
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onExited = useCallback(() => {
    const { ripple, exited } = ref.current;
    exited(ripple);
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (

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

export default function usePressedStates({
  handlers = {},
  disableSpacebarClick = false,
}: PressedStatesOptions = {}): ReturnValue {
  const [pressed, setPressed] = useState(false);
  const ref = useRefCache({ ...handlers, pressed });

  const handleKeyDown = useCallback(
    (event: React.KeyboardEvent) => {
      const { onKeyDown, pressed } = ref.current;
      if (onKeyDown) {
        onKeyDown(event);
      }

      const { key } = event;
      if (
        !pressed &&
        (key === "Enter" || (!disableSpacebarClick && key === " "))
      ) {
        setPressed(true);
      }
    },

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;
    }

export default function useInputState(
  defaultValue: DefaultValue,
  onChange?: ChangeEventHandler
): [string, ChangeEventHandler, ResetValue, SetValue] {
  const [value, setValue] = useState(defaultValue);
  const handlers = useRefCache({ onChange });

  const handleChange = useCallback(event => {
    const { onChange } = handlers.current;
    if (onChange) {
      onChange(event);
    }

    setValue(event.currentTarget.value);
  }, []);
  const reset = useCallback(() => {
    setValue(defaultValue);
  }, []);

  return [value, handleChange, reset, setValue];
}

export default function usePosition({
  position: determinedPosition,
  defaultPosition,
  threshold,
}: PositionOptions): PositionResult {
  const [position, setPosition] = useState(defaultPosition);
  const prevPosition = useRefCache(position);

  /**
   * This will only be used when the `determinedPosition` is undefined. When the container element
   * starts the tooltip "visibility" mode, this will be called so that we can best guess what
   * the position of the tooltip should be based on the current position of the container element
   * within the viewport. If this isn't done and the tooltip swaps position due to the positioning
   * logic, the animation will be reversed.
   */
  const setEstimatedPosition = useCallback(
    (container: HTMLElement) => {
      const { top, left } = container.getBoundingClientRect();

      let nextPosition = defaultPosition;
      const vh = getViewportSize("height");
      const vw = getViewportSize("width");
      switch (defaultPosition) {

export default function useVisiblityChange({
  onShow,
  onHide,
  visible,
  mode,
}: VisibilityChangeOptions): void {
  const handlers = useRefCache({ onShow, onHide });

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

    const { onShow, onHide } = handlers.current;
    if (onShow) {
      onShow(mode);
    }

    return () => {
      if (onHide) {
        onHide();
      }
    };

export default function useItemVisibility({
  horizontal = false,
  onClick: propOnClick,
  onKeyDown: propOnKeyDown,
  defaultVisible,
  defaultFocus: propDefaultFocus,
  onVisibilityChange,
}: ItemVisibilityOptions = {}): ReturnValue {
  const cache = useRefCache({
    horizontal,
    onClick: propOnClick,
    onKeyDown: propOnKeyDown,
  });
  const { visible, defaultFocus, hide, showWithFocus, toggle } = useVisibility({
    defaultVisible,
    defaultFocus: propDefaultFocus,
    onVisibilityChange,
  });

  const onClick = useCallback(
    (event: React.MouseEvent) => {
      const { onClick } = cache.current;
      if (onClick) {
        onClick(event);
      }