@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/TooltipDefinition/TooltipDefinition.js

@@ -0,0 +1,167 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { composeEventHandlers } from '../../tools/events.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["id", "className", "triggerClassName", "children", "direction", "align", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "tooltipText"];
+var getInstanceId = setupGetInstanceId();
+
+var TooltipDefinition = function TooltipDefinition(_ref) {
+  var _cx;
+
+  var id = _ref.id,
+      className = _ref.className,
+      triggerClassName = _ref.triggerClassName,
+      children = _ref.children,
+      direction = _ref.direction,
+      align = _ref.align,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      tooltipText = _ref.tooltipText,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      allowTooltipVisibility = _useState2[0],
+      setAllowTooltipVisibility = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      tooltipVisible = _useState4[0],
+      setTooltipVisible = _useState4[1];
+
+  var tooltipId = id || "definition-tooltip-".concat(getInstanceId());
+  var tooltipClassName = cx("".concat(prefix, "--tooltip--definition"), "".concat(prefix, "--tooltip--a11y"), className);
+  var tooltipTriggerClasses = cx("".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), "".concat(prefix, "--tooltip__trigger--definition"), triggerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tooltip--").concat(direction), direction), _defineProperty(_cx, "".concat(prefix, "--tooltip--align-").concat(align), align), _defineProperty(_cx, "".concat(prefix, "--tooltip--hidden"), !allowTooltipVisibility), _defineProperty(_cx, "".concat(prefix, "--tooltip--visible"), tooltipVisible), _cx));
+  var debounceTooltipVisible = debounce(function () {
+    return setTooltipVisible(false);
+  }, 100);
+
+  var handleFocus = function handleFocus() {
+    debounceTooltipVisible.cancel();
+    setAllowTooltipVisibility(true);
+    setTooltipVisible(true);
+  };
+
+  var handleBlur = debounceTooltipVisible;
+
+  var handleMouseEnter = function handleMouseEnter() {
+    debounceTooltipVisible.cancel();
+    setAllowTooltipVisibility(true);
+    setTooltipVisible(true);
+  };
+
+  var handleMouseLeave = debounceTooltipVisible;
+  useEffect(function () {
+    var handleEscKeyDown = function handleEscKeyDown(event) {
+      if (matches(event, [Escape])) {
+        setAllowTooltipVisibility(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleEscKeyDown);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
+    className: tooltipClassName,
+    onMouseEnter: composeEventHandlers([onMouseEnter, handleMouseEnter]),
+    onMouseLeave: composeEventHandlers([onMouseLeave, handleMouseLeave])
+  }), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: tooltipTriggerClasses,
+    "aria-describedby": tooltipId,
+    onFocus: composeEventHandlers([onFocus, handleFocus]),
+    onBlur: composeEventHandlers([onBlur, handleBlur])
+  }, children), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--assistive-text"),
+    id: tooltipId,
+    role: "tooltip"
+  }, tooltipText));
+};
+
+TooltipDefinition.propTypes = {
+  /**
+   * Specify the alignment (to the trigger button) of the tooltip.
+   * Can be one of: start, center, or end.
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify the tooltip trigger text that is rendered to the UI for the user to
+   * interact with in order to display the tooltip.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the direction of the tooltip. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Optionally specify a custom id for the tooltip. If one is not provided, we
+   * generate a unique id for you.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The event handler for the `blur` event.
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * The event handler for the `focus` event.
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * The event handler for the `mouseenter` event.
+   */
+  onMouseEnter: PropTypes.func,
+
+  /**
+   * The event handler for the `mouseleave` event.
+   */
+  onMouseLeave: PropTypes.func,
+
+  /**
+   * Provide the text that will be displayed in the tooltip when it is rendered.
+   * TODO: rename this prop (will be a breaking change)
+   */
+  tooltipText: PropTypes.node.isRequired,
+
+  /**
+   * The CSS class name of the trigger element
+   */
+  triggerClassName: PropTypes.string
+};
+TooltipDefinition.defaultProps = {
+  direction: 'bottom',
+  align: 'start'
+};
+var TooltipDefinition$1 = TooltipDefinition;
+
+export { TooltipDefinition$1 as default };

package/es/components/TooltipIcon/TooltipIcon.js

@@ -0,0 +1,235 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { composeEventHandlers } from '../../tools/events.js';
+import toggleClass from '../../tools/toggleClass.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["id", "className", "children", "direction", "disabled", "align", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "tooltipText"];
+var getInstanceId = setupGetInstanceId();
+
+var TooltipIcon = function TooltipIcon(_ref) {
+  var _cx;
+
+  var id = _ref.id,
+      className = _ref.className,
+      children = _ref.children,
+      direction = _ref.direction,
+      disabled = _ref.disabled,
+      align = _ref.align,
+      onClick = _ref.onClick,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      IconElement = _ref.renderIcon,
+      tooltipText = _ref.tooltipText,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      allowTooltipVisibility = _useState2[0],
+      setAllowTooltipVisibility = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isHovered = _useState4[0],
+      setIsHovered = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isFocused = _useState6[0],
+      setIsFocused = _useState6[1];
+
+  var tooltipRef = useRef(null);
+  var tooltipTimeout = useRef(null);
+  var tooltipId = id || "icon-tooltip-".concat(getInstanceId());
+  var tooltipTriggerClasses = cx("".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tooltip--").concat(direction), direction), _defineProperty(_cx, "".concat(prefix, "--tooltip--align-").concat(align), align), _defineProperty(_cx, "".concat(prefix, "--tooltip--hidden"), !allowTooltipVisibility || disabled), _defineProperty(_cx, "".concat(prefix, "--tooltip--visible"), isHovered), _cx));
+
+  var closeTooltips = function closeTooltips(evt) {
+    var _document;
+
+    var tooltipNode = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelectorAll(".".concat(prefix, "--tooltip--a11y"));
+
+    _toConsumableArray(tooltipNode).map(function (node) {
+      toggleClass(node, "".concat(prefix, "--tooltip--hidden"), node !== evt.currentTarget);
+    });
+  };
+
+  var handleFocus = function handleFocus(evt) {
+    closeTooltips(evt);
+    setIsFocused(true);
+    setAllowTooltipVisibility(true);
+  };
+
+  var handleBlur = function handleBlur() {
+    setIsHovered(false);
+    setIsFocused(false);
+    setAllowTooltipVisibility(false);
+  };
+
+  var handleMouseEnter = function handleMouseEnter(evt) {
+    if (!disabled) {
+      tooltipTimeout.current && clearTimeout(tooltipTimeout.current);
+
+      if (evt.target === tooltipRef.current) {
+        setAllowTooltipVisibility(true);
+        return;
+      }
+
+      closeTooltips(evt);
+      setAllowTooltipVisibility(true);
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    if (!isFocused) {
+      tooltipTimeout.current = setTimeout(function () {
+        setAllowTooltipVisibility(false);
+        setIsHovered(false);
+      }, 100);
+    }
+  };
+
+  var handleClick = function handleClick(evt) {
+    setAllowTooltipVisibility(false); // Prevent clicks on the tooltip from triggering the button click event
+
+    if (evt.target === tooltipRef.current) {
+      evt.preventDefault();
+      return;
+    }
+  };
+
+  useEffect(function () {
+    var handleEscKeyDown = function handleEscKeyDown(event) {
+      if (matches(event, [Escape])) {
+        setAllowTooltipVisibility(false);
+        setIsHovered(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleEscKeyDown);
+    };
+  }, []);
+  var cursorStyle;
+
+  if (disabled) {
+    cursorStyle = 'not-allowed';
+  } else {
+    cursorStyle = onClick ? 'pointer' : 'default';
+  }
+
+  return /*#__PURE__*/React__default.createElement("button", _extends({
+    disabled: disabled,
+    style: {
+      cursor: cursorStyle
+    }
+  }, rest, {
+    type: "button",
+    className: tooltipTriggerClasses,
+    "aria-describedby": tooltipId,
+    onMouseEnter: composeEventHandlers([onMouseEnter, handleMouseEnter]),
+    onMouseLeave: composeEventHandlers([onMouseLeave, handleMouseLeave]),
+    onFocus: composeEventHandlers([onFocus, handleFocus]),
+    onBlur: composeEventHandlers([onBlur, handleBlur]),
+    onClick: composeEventHandlers([handleClick, onClick])
+  }), /*#__PURE__*/React__default.createElement("span", {
+    ref: tooltipRef,
+    onMouseEnter: handleMouseEnter,
+    className: "".concat(prefix, "--assistive-text"),
+    id: tooltipId
+  }, tooltipText), IconElement && /*#__PURE__*/React__default.createElement(IconElement, null), !IconElement && children);
+};
+
+TooltipIcon.propTypes = {
+  /**
+   * Specify the alignment (to the trigger button) of the tooltip.
+   * Can be one of: start, center, or end.
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify an icon as children that will be used as the tooltip trigger. This
+   * can be an icon from our Icon component, or a custom SVG element.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the trigger node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the direction of the tooltip. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'right', 'left', 'bottom']),
+
+  /**
+   * Specify whether the `<TooltipIcon>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Optionally specify a custom id for the tooltip. If one is not provided, we
+   * generate a unique id for you.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The event handler for the `blur` event.
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * The event handler for the `click` event.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The event handler for the `focus` event.
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * The event handler for the `mouseenter` event.
+   */
+  onMouseEnter: PropTypes.func,
+
+  /**
+   * The event handler for the `mouseleave` event.
+   */
+  onMouseLeave: PropTypes.func,
+
+  /**
+   * Function called to override icon rendering.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Provide the ARIA label for the tooltip.
+   * TODO: rename this prop (will be a breaking change)
+   */
+  tooltipText: PropTypes.node.isRequired
+};
+TooltipIcon.defaultProps = {
+  direction: 'bottom',
+  align: 'center'
+};
+var TooltipIcon$1 = TooltipIcon;
+
+export { TooltipIcon$1 as default };