@carbon/react 1.0.0-rc.0 → 1.0.0

package/es/components/TooltipIcon/TooltipIcon.js

@@ -1,235 +0,0 @@
-/**
- * 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 };

package/es/tools/createPropAdapter.js

@@ -1,63 +0,0 @@
-/**
- * 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 { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
-
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Create an adapter that converts an object of props with potentially deprecated
- * prop names to the replacement prop names in a newer version. Useful for guarding
- * against breaking changes when a prop has been renamed
- *
- * @param {Array} spec - an array of options which specify a text or regex
- * matcher alongside a replacement if there is a match
- * @returns {Function}
- */
-function createPropAdapter(spec) {
-  // if props aren't passed in we should default the prop to empty object
-  return function () {
-    var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var output = {};
-    Object.keys(input).forEach(function (key) {
-      var match = spec.find(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 1),
-            regex = _ref2[0];
-
-        return key.match(regex);
-      });
-
-      if (match) {
-        var _match = _slicedToArray(match, 2),
-            regex = _match[0],
-            replacer = _match[1];
-
-        output[key.replace(regex, replacer)] = input[key];
-        return;
-      }
-
-      output[key] = input[key];
-    });
-    return output;
-  };
-}
-/**
- * TODO: REMOVE IN v11
- * props staring with "default..." were changed to "initial..." in Downshift v3
- *
- * @see https://github.com/downshift-js/downshift/releases/tag/v3.0.0
- */
-
-
-var mapDownshiftProps = createPropAdapter([[/^default/g, 'initial']]);
-
-export { mapDownshiftProps };

package/lib/components/TooltipDefinition/TooltipDefinition.js

@@ -1,178 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var debounce = require('lodash.debounce');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
-var events = require('../../tools/events.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-
-var _excluded = ["id", "className", "triggerClassName", "children", "direction", "align", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "tooltipText"];
-var getInstanceId = setupGetInstanceId["default"]();
-
-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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useState = React.useState(true),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      allowTooltipVisibility = _useState2[0],
-      setAllowTooltipVisibility = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      tooltipVisible = _useState4[0],
-      setTooltipVisible = _useState4[1];
-
-  var tooltipId = id || "definition-tooltip-".concat(getInstanceId());
-  var tooltipClassName = cx__default["default"]("".concat(prefix, "--tooltip--definition"), "".concat(prefix, "--tooltip--a11y"), className);
-  var tooltipTriggerClasses = cx__default["default"]("".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), "".concat(prefix, "--tooltip__trigger--definition"), triggerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tooltip--").concat(direction), direction), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tooltip--align-").concat(align), align), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tooltip--hidden"), !allowTooltipVisibility), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tooltip--visible"), tooltipVisible), _cx));
-  var debounceTooltipVisible = debounce__default["default"](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;
-  React.useEffect(function () {
-    var handleEscKeyDown = function handleEscKeyDown(event) {
-      if (match.matches(event, [keys.Escape])) {
-        setAllowTooltipVisibility(false);
-      }
-    };
-
-    document.addEventListener('keydown', handleEscKeyDown);
-    return function () {
-      return document.removeEventListener('keydown', handleEscKeyDown);
-    };
-  }, []);
-  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: tooltipClassName,
-    onMouseEnter: events.composeEventHandlers([onMouseEnter, handleMouseEnter]),
-    onMouseLeave: events.composeEventHandlers([onMouseLeave, handleMouseLeave])
-  }), /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: tooltipTriggerClasses,
-    "aria-describedby": tooltipId,
-    onFocus: events.composeEventHandlers([onFocus, handleFocus]),
-    onBlur: events.composeEventHandlers([onBlur, handleBlur])
-  }, children), /*#__PURE__*/React__default["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__default["default"].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__default["default"].node.isRequired,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Specify the direction of the tooltip. Can be either top or bottom.
-   */
-  direction: PropTypes__default["default"].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__default["default"].string,
-
-  /**
-   * The event handler for the `blur` event.
-   */
-  onBlur: PropTypes__default["default"].func,
-
-  /**
-   * The event handler for the `focus` event.
-   */
-  onFocus: PropTypes__default["default"].func,
-
-  /**
-   * The event handler for the `mouseenter` event.
-   */
-  onMouseEnter: PropTypes__default["default"].func,
-
-  /**
-   * The event handler for the `mouseleave` event.
-   */
-  onMouseLeave: PropTypes__default["default"].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__default["default"].node.isRequired,
-
-  /**
-   * The CSS class name of the trigger element
-   */
-  triggerClassName: PropTypes__default["default"].string
-};
-TooltipDefinition.defaultProps = {
-  direction: 'bottom',
-  align: 'start'
-};
-var TooltipDefinition$1 = TooltipDefinition;
-
-exports["default"] = TooltipDefinition$1;