@carbon/react/es/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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { Popover, PopoverContent } from '../Popover/index.js';
import { Escape } from '../../internal/keyboard/keys.js';
import { match } from '../../internal/keyboard/match.js';
import { useFallbackId } from '../../internal/useId.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { deprecate } from '../../prop-types/deprecate.js';

const DefinitionTooltip = ({
  align = 'bottom',
  autoAlign,
  className,
  children,
  definition,
  defaultOpen = false,
  id,
  openOnHover,
  tooltipText,
  triggerClassName,
  ...rest
}) => {
  const [isOpen, setOpen] = useState(defaultOpen);
  const prefix = usePrefix();
  const tooltipId = useFallbackId(id);
  function onKeyDown(event) {
    if (isOpen && match(event, Escape)) {
      event.stopPropagation();
      setOpen(false);
    }
  }
  return /*#__PURE__*/React.createElement(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.createElement("button", _extends({}, rest, {
    className: cx(`${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.createElement(PopoverContent, {
    className: `${prefix}--definition-tooltip`,
    id: tooltipId
  }, tooltipText ?? definition));
};
DefinitionTooltip.propTypes = {
  /**
   * Specify how the trigger should align with the tooltip
   */
  align: PropTypes.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. Requires React v17+
   * @see https://github.com/carbon-design-system/carbon/issues/18714
   */
  autoAlign: PropTypes.bool,
  /**
   * The `children` prop will be used as the value that is being defined
   */
  children: PropTypes.node.isRequired,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes.string,
  /**
   * Specify whether the tooltip should be open when it first renders
   */
  defaultOpen: PropTypes.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.node.isRequired,
  /**
   * Provide a value that will be assigned as the id of the tooltip
   */
  id: PropTypes.string,
  /**
   * Specifies whether or not the `DefinitionTooltip` should open on hover or not
   */
  openOnHover: PropTypes.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(PropTypes.node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
  /**
   * The CSS class name of the trigger element
   */
  triggerClassName: PropTypes.string
};

export { DefinitionTooltip };