@carbon/react/lib/components/Tooltip/DefinitionTooltip.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var index = require('../Popover/index.js');
var keys = require('../../internal/keyboard/keys.js');
var match = require('../../internal/keyboard/match.js');
var useId = require('../../internal/useId.js');
var usePrefix = require('../../internal/usePrefix.js');
var deprecate = require('../../prop-types/deprecate.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const DefinitionTooltip = ({
  align = 'bottom',
  autoAlign,
  className,
  children,
  definition,
  defaultOpen = false,
  id,
  openOnHover,
  tooltipText,
  triggerClassName,
  ...rest
}) => {
  const [isOpen, setOpen] = React.useState(defaultOpen);
  const prefix = usePrefix.usePrefix();
  const tooltipId = useId.useFallbackId(id);
  function onKeyDown(event) {
    if (isOpen && match.match(event, keys.Escape)) {
      event.stopPropagation();
      setOpen(false);
    }
  }
  return /*#__PURE__*/React__default["default"].createElement(index.Popover, {
    align: align,
    className: className,
    autoAlign: autoAlign,
    dropShadow: false,
    highContrast: true,
    onMouseLeave: () => {
      setOpen(false);
    },
    onMouseEnter: () => {
      openOnHover ? setOpen(true) : null;
    },
    onFocus: () => {
      setOpen(true);
    },
    open: isOpen
  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
    className: cx__default["default"](`${prefix}--definition-term`, triggerClassName),
    "aria-controls": tooltipId,
    "aria-describedby": tooltipId,
    "aria-expanded": isOpen,
    onBlur: () => {
      setOpen(false);
    },
    onMouseDown: event => {
      // We use onMouseDown rather than onClick to make sure this triggers
      // before onFocus.
      if (event.button === 0) setOpen(!isOpen);
    },
    onKeyDown: onKeyDown,
    type: "button"
  }), children), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
    className: `${prefix}--definition-tooltip`,
    id: tooltipId
  }, tooltipText ?? definition));
};
DefinitionTooltip.propTypes = {
  /**
   * Specify how the trigger should align with the tooltip
   */
  align: PropTypes__default["default"].oneOf(['top', 'top-left',
  // deprecated use top-start instead
  'top-right',
  // deprecated use top-end instead

  'bottom', 'bottom-left',
  // deprecated use bottom-start instead
  'bottom-right',
  // deprecated use bottom-end instead

  'left', 'left-bottom',
  // deprecated use left-end instead
  'left-top',
  // deprecated use left-start instead

  'right', 'right-bottom',
  // deprecated use right-end instead
  'right-top',
  // deprecated use right-start instead

  // new values to match floating-ui
  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
  /**
   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
   */
  autoAlign: PropTypes__default["default"].bool,
  /**
   * The `children` prop will be used as the value that is being defined
   */
  children: PropTypes__default["default"].node.isRequired,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify whether the tooltip should be open when it first renders
   */
  defaultOpen: PropTypes__default["default"].bool,
  /**
   * The `definition` prop is used as the content inside of the tooltip that
   * appears when a user interacts with the element rendered by the `children`
   * prop
   */
  definition: PropTypes__default["default"].node.isRequired,
  /**
   * Provide a value that will be assigned as the id of the tooltip
   */
  id: PropTypes__default["default"].string,
  /**
   * Specifies whether or not the `DefinitionTooltip` should open on hover or not
   */
  openOnHover: PropTypes__default["default"].bool,
  /**
   * [Deprecated in v11] Please use the `definition` prop instead.
   *
   * Provide the text that will be displayed in the tooltip when it is rendered.
   */
  tooltipText: deprecate["default"](PropTypes__default["default"].node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
  /**
   * The CSS class name of the trigger element
   */
  triggerClassName: PropTypes__default["default"].string
};

exports.DefinitionTooltip = DefinitionTooltip;