@blockstack/ui/dist/tooltip/hooks.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
import { useState, useRef, useEffect, useCallback } from 'react';
import { mergeRefs, callAllHandlers } from '../utils/index.esm.js';
import '../hooks/use-controllable.esm.js';
import '../hooks/use-previous.esm.js';
import { useDisclosure } from '../hooks/use-disclosure.esm.js';
import '../hooks/use-latest-ref.esm.js';
import { useEventListener } from '../hooks/use-event-listener.esm.js';
import '../hooks/use-force-update.esm.js';
import { useId } from '../hooks/use-id.esm.js';
import { useMergeRefs } from '../hooks/use-merge-refs.esm.js';
import '../hooks/use-safe-layout-effect.esm.js';
import '../hooks/use-timeout.esm.js';
import '../hooks/use-theme.esm.js';
import '../hooks/use-color-mode.esm.js';
import { usePopper } from '../popper/index.esm.js';
import flushable from 'flushable';

var hideOperation;
var activeId = null;

function show(fn, delay) {
  var _hideOperation;

  var isHidePending = (_hideOperation = hideOperation) === null || _hideOperation === void 0 ? void 0 : _hideOperation.pending();

  if (isHidePending) {
    hideOperation.flush();
  }

  var showOperation = flushable(function () {
    return fn(isHidePending);
  }, isHidePending ? 0 : delay);
  return showOperation.cancel;
}

function hide(fn, delay) {
  hideOperation = flushable(function (flushed) {
    return fn(flushed);
  }, delay);
  return hideOperation.cancel;
}

function useTooltip(props) {
  if (props === void 0) {
    props = {};
  }

  var _props = props,
      _props$showDelay = _props.showDelay,
      showDelay = _props$showDelay === void 0 ? 200 : _props$showDelay,
      _props$hideDelay = _props.hideDelay,
      hideDelay = _props$hideDelay === void 0 ? 200 : _props$hideDelay,
      _props$hideOnClick = _props.hideOnClick,
      hideOnClick = _props$hideOnClick === void 0 ? false : _props$hideOnClick,
      onShow = _props.onShow,
      onHide = _props.onHide,
      hideOnMouseDown = _props.hideOnMouseDown,
      placement = _props.placement,
      id = _props.id,
      isOpenProp = _props.isOpen,
      defaultIsOpen = _props.defaultIsOpen,
      _props$arrowSize = _props.arrowSize,
      arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
      _label = _props.label;

  var _React$useState = useState(_label),
      label = _React$useState[0],
      setLabel = _React$useState[1];

  var labelIsUpToDate = _label === label;
  if (!labelIsUpToDate) setLabel(_label);

  var _useDisclosure = useDisclosure({
    isOpen: isOpenProp,
    defaultIsOpen: defaultIsOpen,
    onOpen: onShow,
    onClose: onHide
  }),
      isOpen = _useDisclosure.isOpen,
      open = _useDisclosure.onOpen,
      close = _useDisclosure.onClose;

  var popper = usePopper({
    forceUpdate: isOpen && labelIsUpToDate,
    placement: placement,
    arrowSize: arrowSize
  });
  var tooltipId = useId(id, 'tooltip');
  var ref = useRef(null);
  var triggerRef = useMergeRefs(ref, popper.reference.ref);
  var flushRef = useRef();
  useEffect(function () {
    return function () {
      var _flushRef$current;

      return (_flushRef$current = flushRef.current) === null || _flushRef$current === void 0 ? void 0 : _flushRef$current.call(flushRef);
    };
  }, []);
  var hideImmediately = useCallback(function () {
    var _flushRef$current2;

    (_flushRef$current2 = flushRef.current) === null || _flushRef$current2 === void 0 ? void 0 : _flushRef$current2.call(flushRef);
    close();
  }, [close]);
  var onClick = useCallback(function () {
    if (hideOnClick) {
      hideImmediately();
    }
  }, [hideOnClick, hideImmediately]);
  var onMouseDown = useCallback(function () {
    if (hideOnMouseDown) {
      hideImmediately();
    }
  }, [hideOnMouseDown, hideImmediately]);
  var showTooltip = useCallback(function () {
    var _flushRef$current3;

    (_flushRef$current3 = flushRef.current) === null || _flushRef$current3 === void 0 ? void 0 : _flushRef$current3.call(flushRef);

    if (tooltipId !== activeId) {
      hideImmediately();
    }

    activeId = tooltipId;

    if (!isOpen) {
      flushRef.current = show(function () {
        open();
      }, showDelay);
    }
  }, [isOpen, showDelay, open, tooltipId, hideImmediately]);
  var hideTooltip = useCallback(function () {
    var _flushRef$current4;

    (_flushRef$current4 = flushRef.current) === null || _flushRef$current4 === void 0 ? void 0 : _flushRef$current4.call(flushRef);
    activeId = null;

    if (isOpen) {
      flushRef.current = hide(function () {
        close();
      }, hideDelay);
    }
  }, [isOpen, hideDelay, close]);
  var onMouseOver = useCallback(function (event) {
    var isSelf = event.target === ref.current;

    if (isOpen && isSelf) {
      return;
    }

    showTooltip();
  }, [isOpen, showTooltip]);
  var onKeyDown = useCallback(function (event) {
    if (isOpen && event.key === 'Escape') {
      hideImmediately();
    }
  }, [isOpen, hideImmediately]);
  useEventListener('keydown', onKeyDown);
  return {
    isOpen: isOpen,
    show: open,
    hide: close,
    placement: popper.placement,
    getTriggerProps: function getTriggerProps(props) {
      if (props === void 0) {
        props = {};
      }

      return _objectSpread2({}, props, {
        ref: mergeRefs(props.ref, triggerRef),
        onMouseOut: callAllHandlers(props.onMouseOut, hideTooltip),
        onMouseOver: callAllHandlers(props.onMouseOver, onMouseOver),
        onClick: callAllHandlers(props.onClick, onClick),
        onMouseDown: callAllHandlers(props.onMouseDown, onMouseDown),
        onFocus: callAllHandlers(props.onFocus, showTooltip),
        onBlur: callAllHandlers(props.onBlur, hideTooltip),
        'aria-describedby': isOpen ? tooltipId : undefined
      });
    },
    getTooltipProps: function getTooltipProps(props) {
      if (props === void 0) {
        props = {};
      }

      return _objectSpread2({}, props, {
        id: tooltipId,
        role: 'tooltip',
        ref: mergeRefs(props.ref, popper.popper.ref),
        style: _objectSpread2({}, props.style, {}, popper.popper.style)
      });
    },
    getArrowProps: function getArrowProps(props) {
      if (props === void 0) {
        props = {};
      }

      return _objectSpread2({}, props, {
        ref: mergeRefs(props.ref, popper.arrow.ref),
        style: _objectSpread2({}, props.style, {}, popper.arrow.style)
      });
    }
  };
}

export { useTooltip };
//# sourceMappingURL=hooks.esm.js.map