@wordpress/components/build/ui/tooltip/component.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _reakit = require("reakit");

var _context = require("../context");

var _context2 = require("./context");

var _content = _interopRequireDefault(require("./content"));

var _styles = require("./styles");

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
 * @param {import('react').Ref<any>} forwardedRef
 */
function Tooltip(props, forwardedRef) {
  const {
    animated = true,
    animationDuration = 160,
    baseId,
    children,
    content,
    focusable = true,
    gutter = 4,
    id,
    modal = true,
    placement,
    visible = false,
    shortcut,
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'Tooltip');
  const tooltip = (0, _reakit.useTooltipState)({
    animated: animated ? animationDuration : undefined,
    baseId: baseId || id,
    gutter,
    placement,
    visible,
    ...otherProps
  });
  const contextProps = (0, _element.useMemo)(() => ({
    tooltip
  }), [tooltip]);
  return (0, _element.createElement)(_context2.TooltipContext.Provider, {
    value: contextProps
  }, content && (0, _element.createElement)(_content.default, {
    unstable_portal: modal,
    ref: forwardedRef
  }, content, shortcut && (0, _element.createElement)(_styles.TooltipShortcut, {
    shortcut: shortcut
  })), children && (0, _element.createElement)(_reakit.TooltipReference, (0, _extends2.default)({}, tooltip, children.props, {
    // @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)
    ref: children === null || children === void 0 ? void 0 : children.ref
  }), referenceProps => {
    if (!focusable) {
      referenceProps.tabIndex = undefined;
    }

    return (0, _element.cloneElement)(children, referenceProps);
  }));
}
/**
 * `Tooltip` is a component that provides context for a user interface element.
 *
 * @example
 * ```jsx
 * import { Tooltip, Text } from `@wordpress/components/ui`;
 *
 * function Example() {
 * 	return (
 * 		<Tooltip content="Code is Poetry">
 * 			<Text>WordPress.org</Text>
 * 		</Tooltip>
 * 	)
 * }
 * ```
 */


const ConnectedTooltip = (0, _context.contextConnect)(Tooltip, 'Tooltip');
var _default = ConnectedTooltip;
exports.default = _default;
//# sourceMappingURL=component.js.map