@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/TooltipIcon/TooltipIcon.js

@@ -0,0 +1,245 @@
+/**
+ * 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 setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var events = require('../../tools/events.js');
+var toggleClass = require('../../tools/toggleClass.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 _excluded = ["id", "className", "children", "direction", "disabled", "align", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "tooltipText"];
+var getInstanceId = setupGetInstanceId["default"]();
+
+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 = _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),
+      isHovered = _useState4[0],
+      setIsHovered = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      isFocused = _useState6[0],
+      setIsFocused = _useState6[1];
+
+  var tooltipRef = React.useRef(null);
+  var tooltipTimeout = React.useRef(null);
+  var tooltipId = id || "icon-tooltip-".concat(getInstanceId());
+  var tooltipTriggerClasses = cx__default["default"]("".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), className, (_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 || disabled), _rollupPluginBabelHelpers.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"));
+
+    _rollupPluginBabelHelpers.toConsumableArray(tooltipNode).map(function (node) {
+      toggleClass["default"](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;
+    }
+  };
+
+  React.useEffect(function () {
+    var handleEscKeyDown = function handleEscKeyDown(event) {
+      if (match.matches(event, [keys.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["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    disabled: disabled,
+    style: {
+      cursor: cursorStyle
+    }
+  }, rest, {
+    type: "button",
+    className: tooltipTriggerClasses,
+    "aria-describedby": tooltipId,
+    onMouseEnter: events.composeEventHandlers([onMouseEnter, handleMouseEnter]),
+    onMouseLeave: events.composeEventHandlers([onMouseLeave, handleMouseLeave]),
+    onFocus: events.composeEventHandlers([onFocus, handleFocus]),
+    onBlur: events.composeEventHandlers([onBlur, handleBlur]),
+    onClick: events.composeEventHandlers([handleClick, onClick])
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: tooltipRef,
+    onMouseEnter: handleMouseEnter,
+    className: "".concat(prefix, "--assistive-text"),
+    id: tooltipId
+  }, tooltipText), IconElement && /*#__PURE__*/React__default["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__default["default"].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__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the trigger node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the direction of the tooltip. Can be either top or bottom.
+   */
+  direction: PropTypes__default["default"].oneOf(['top', 'right', 'left', 'bottom']),
+
+  /**
+   * Specify whether the `<TooltipIcon>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * 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 `click` event.
+   */
+  onClick: 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,
+
+  /**
+   * Function called to override icon rendering.
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Provide the ARIA label for the tooltip.
+   * TODO: rename this prop (will be a breaking change)
+   */
+  tooltipText: PropTypes__default["default"].node.isRequired
+};
+TooltipIcon.defaultProps = {
+  direction: 'bottom',
+  align: 'center'
+};
+var TooltipIcon$1 = TooltipIcon;
+
+exports["default"] = TooltipIcon$1;

package/lib/components/TreeView/TreeNode.js

@@ -0,0 +1,335 @@
+/**
+ * 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 React = require('react');
+var PropTypes = require('prop-types');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var uniqueId = require('../../tools/uniqueId.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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["active", "children", "className", "depth", "disabled", "isExpanded", "label", "onNodeFocusEvent", "onSelect", "onToggle", "onTreeSelect", "renderIcon", "selected", "value"];
+function TreeNode(_ref) {
+  var _classNames, _objectSpread2;
+
+  var active = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      depth = _ref.depth,
+      disabled = _ref.disabled,
+      isExpanded = _ref.isExpanded,
+      label = _ref.label,
+      onNodeFocusEvent = _ref.onNodeFocusEvent,
+      onNodeSelect = _ref.onSelect,
+      onToggle = _ref.onToggle,
+      onTreeSelect = _ref.onTreeSelect,
+      Icon = _ref.renderIcon,
+      selected = _ref.selected,
+      value = _ref.value,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useRef = React.useRef(rest.id || uniqueId["default"]()),
+      id = _useRef.current;
+
+  var _useState = React.useState(isExpanded),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var currentNode = React.useRef(null);
+  var currentNodeLabel = React.useRef(null);
+  var prefix = usePrefix.usePrefix();
+  var nodesWithProps = React__default["default"].Children.map(children, function (node) {
+    if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
+      return /*#__PURE__*/React__default["default"].cloneElement(node, {
+        active: active,
+        depth: depth + 1,
+        disabled: disabled,
+        onTreeSelect: onTreeSelect,
+        selected: selected,
+        tabIndex: !node.props.disabled && -1 || null
+      });
+    }
+  });
+  var isActive = active === id;
+  var isSelected = selected.includes(id);
+  var treeNodeClasses = cx__default["default"](className, "".concat(prefix, "--tree-node"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tree-node--active"), isActive), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tree-node--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tree-node--selected"), isSelected), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tree-node--with-icon"), Icon), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tree-leaf-node"), !children), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tree-parent-node"), children), _classNames));
+  var toggleClasses = cx__default["default"]("".concat(prefix, "--tree-parent-node__toggle-icon"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tree-parent-node__toggle-icon--expanded"), expanded));
+
+  function handleToggleClick(event) {
+    if (onToggle) {
+      onToggle(event, {
+        id: id,
+        isExpanded: !expanded,
+        label: label,
+        value: value
+      });
+    }
+
+    setExpanded(!expanded);
+  }
+
+  function handleClick(event) {
+    event.stopPropagation();
+
+    if (!disabled) {
+      if (onTreeSelect) {
+        onTreeSelect(event, {
+          id: id,
+          label: label,
+          value: value
+        });
+      }
+
+      if (onNodeSelect) {
+        onNodeSelect(event, {
+          id: id,
+          label: label,
+          value: value
+        });
+      }
+
+      if (rest.onClick) {
+        rest.onClick(event);
+      }
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (match.matches(event, [keys.ArrowLeft, keys.ArrowRight, keys.Enter])) {
+      event.stopPropagation();
+    }
+
+    if (match.match(event, keys.ArrowLeft)) {
+      var findParentTreeNode = function findParentTreeNode(node) {
+        if (node.classList.contains("".concat(prefix, "--tree-parent-node"))) {
+          return node;
+        }
+
+        if (node.classList.contains("".concat(prefix, "--tree"))) {
+          return null;
+        }
+
+        return findParentTreeNode(node.parentNode);
+      };
+
+      if (children && expanded) {
+        onToggle(event, {
+          id: id,
+          isExpanded: false,
+          label: label,
+          value: value
+        });
+        setExpanded(false);
+      } else {
+        var _findParentTreeNode;
+
+        /**
+         * When focus is on a leaf node or a closed parent node, move focus to
+         * its parent node (unless its depth is level 1)
+         */
+        (_findParentTreeNode = findParentTreeNode(currentNode.current.parentNode)) === null || _findParentTreeNode === void 0 ? void 0 : _findParentTreeNode.focus();
+      }
+    }
+
+    if (children && match.match(event, keys.ArrowRight)) {
+      if (expanded) {
+        /**
+         * When focus is on an expanded parent node, move focus to the first
+         * child node
+         */
+        currentNode.current.lastChild.firstChild.focus();
+      } else {
+        onToggle(event, {
+          id: id,
+          isExpanded: true,
+          label: label,
+          value: value
+        });
+        setExpanded(true);
+      }
+    }
+
+    if (match.matches(event, [keys.Enter, keys.Space])) {
+      event.preventDefault();
+      handleClick(event);
+    }
+
+    if (rest.onKeyDown) {
+      rest.onKeyDown(event);
+    }
+  }
+
+  function handleFocusEvent(event) {
+    if (event.type === 'blur' && rest.onBlur) {
+      rest.onBlur(event);
+    }
+
+    if (event.type === 'focus' && rest.onFocus) {
+      rest.onFocus(event);
+    }
+
+    onNodeFocusEvent && onNodeFocusEvent(event);
+  }
+
+  React.useEffect(function () {
+    /**
+     * Negative margin shifts node to align with the left side boundary of the
+     * tree
+     * Dynamically calculate padding to recreate tree node indentation
+     * - parent nodes have (depth + 1rem) left padding
+     * - leaf nodes have (depth + 2.5rem) left padding without icons (because
+     *   of expand icon + spacing)
+     * - leaf nodes have (depth + 2rem) left padding with icons (because of
+     *   reduced spacing between the expand icon and the node icon + label)
+     */
+    var calcOffset = function calcOffset() {
+      // parent node
+      if (children) {
+        return depth + 1;
+      } // leaf node with icon
+
+
+      if (Icon) {
+        return depth + 2;
+      } // leaf node without icon
+
+
+      return depth + 2.5;
+    };
+
+    if (currentNodeLabel.current) {
+      currentNodeLabel.current.style.marginLeft = "-".concat(calcOffset(), "rem");
+      currentNodeLabel.current.style.paddingLeft = "".concat(calcOffset(), "rem");
+    } // sync props and state
+
+
+    setExpanded(isExpanded);
+  }, [children, depth, Icon, isExpanded]);
+
+  var treeNodeProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, (_objectSpread2 = {}, _rollupPluginBabelHelpers.defineProperty(_objectSpread2, 'aria-current', isActive || null), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, 'aria-selected', disabled ? null : isSelected), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, 'aria-disabled', disabled), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "className", treeNodeClasses), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "id", id), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "onBlur", handleFocusEvent), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "onClick", handleClick), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "onFocus", handleFocusEvent), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "onKeyDown", handleKeyDown), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "ref", currentNode), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "role", 'treeitem'), _objectSpread2));
+
+  if (!children) {
+    return /*#__PURE__*/React__default["default"].createElement("li", treeNodeProps, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--tree-node__label"),
+      ref: currentNodeLabel
+    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: "".concat(prefix, "--tree-node__icon")
+    }), label));
+  }
+
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
+      "aria-expanded": !!expanded
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--tree-node__label"),
+      ref: currentNodeLabel
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(prefix, "--tree-parent-node__toggle"),
+      disabled: disabled,
+      onClick: handleToggleClick
+    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretDown, {
+      className: toggleClasses
+    })), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(prefix, "--tree-node__label__details")
+    }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: "".concat(prefix, "--tree-node__icon")
+    }), label)), expanded && /*#__PURE__*/React__default["default"].createElement("ul", {
+      role: "group",
+      className: "".concat(prefix, "--tree-node__children")
+    }, nodesWithProps))
+  );
+}
+TreeNode.propTypes = {
+  /**
+   * The value of the active node in the tree
+   */
+  active: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify the children of the TreeNode
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the TreeNode
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * TreeNode depth to determine spacing, automatically calculated by default
+   */
+  depth: PropTypes__default["default"].number,
+
+  /**
+   * Specify if the TreeNode is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if the TreeNode is expanded (only applicable to parent nodes)
+   */
+  isExpanded: PropTypes__default["default"].bool,
+
+  /**
+   * Rendered label for the TreeNode
+   */
+  label: PropTypes__default["default"].node,
+
+  /**
+   * Callback function for when the node receives or loses focus
+   */
+  onNodeFocusEvent: PropTypes__default["default"].func,
+
+  /**
+   * Callback function for when the node is selected
+   */
+  onSelect: PropTypes__default["default"].func,
+
+  /**
+   * Callback function for when a parent node is expanded or collapsed
+   */
+  onToggle: PropTypes__default["default"].func,
+
+  /**
+   * Callback function for when any node in the tree is selected
+   */
+  onTreeSelect: PropTypes__default["default"].func,
+
+  /**
+   * Optional prop to allow each node to have an associated icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Array containing all selected node IDs in the tree
+   */
+  selected: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])),
+
+  /**
+   * Specify the value of the TreeNode
+   */
+  value: PropTypes__default["default"].string
+};
+
+exports["default"] = TreeNode;