@carbon/react 0.17.0 → 1.0.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;

package/lib/components/TreeView/TreeView.js

@@ -0,0 +1,281 @@
+/**
+ * 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 cx = require('classnames');
+var uniqueId = require('../../tools/uniqueId.js');
+var FeatureFlags = require('@carbon/feature-flags');
+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 }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["active", "children", "className", "hideLabel", "label", "multiselect", "onSelect", "selected", "size"];
+function TreeView(_ref) {
+  var prespecifiedActive = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$hideLabel = _ref.hideLabel,
+      hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+      label = _ref.label,
+      multiselect = _ref.multiselect,
+      onSelect = _ref.onSelect,
+      _ref$selected = _ref.selected,
+      preselected = _ref$selected === void 0 ? [] : _ref$selected,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? FeatureFlags__namespace.enabled('enable-v11-release') ? 'sm' : 'default' : _ref$size,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useRef = React.useRef(rest.id || uniqueId["default"]()),
+      treeId = _useRef.current;
+
+  var prefix = usePrefix.usePrefix();
+  var treeClasses = cx__default["default"](className, "".concat(prefix, "--tree"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tree--").concat(size), size !== 'default'));
+  var treeRootRef = React.useRef(null);
+  var treeWalker = React.useRef(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current);
+
+  var _useState = React.useState(preselected),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = React.useState(prespecifiedActive),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      active = _useState4[0],
+      setActive = _useState4[1];
+
+  function resetNodeTabIndices() {
+    var _treeRootRef$current$, _treeRootRef$current;
+
+    Array.prototype.forEach.call((_treeRootRef$current$ = treeRootRef === null || treeRootRef === void 0 ? void 0 : (_treeRootRef$current = treeRootRef.current) === null || _treeRootRef$current === void 0 ? void 0 : _treeRootRef$current.querySelectorAll('[tabIndex="0"]')) !== null && _treeRootRef$current$ !== void 0 ? _treeRootRef$current$ : [], function (item) {
+      item.tabIndex = -1;
+    });
+  }
+
+  function handleTreeSelect(event) {
+    var node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var nodeId = node.id;
+
+    if (multiselect && (event.metaKey || event.ctrlKey)) {
+      if (!selected.includes(nodeId)) {
+        setSelected(selected.concat(nodeId));
+      } else {
+        setSelected(selected.filter(function (selectedId) {
+          return selectedId !== nodeId;
+        }));
+      }
+    } else {
+      setSelected([nodeId]);
+      setActive(nodeId);
+    }
+
+    if (onSelect) {
+      onSelect(event, node);
+    }
+  }
+
+  function handleFocusEvent(event) {
+    if (event.type === 'blur') {
+      var _treeRootRef$current2;
+
+      var currentFocusedNode = event.relatedTarget,
+          prevFocusedNode = event.target;
+
+      if (treeRootRef !== null && treeRootRef !== void 0 && (_treeRootRef$current2 = treeRootRef.current) !== null && _treeRootRef$current2 !== void 0 && _treeRootRef$current2.contains(currentFocusedNode)) {
+        prevFocusedNode.tabIndex = -1;
+      }
+    }
+
+    if (event.type === 'focus') {
+      var _treeRootRef$current3;
+
+      resetNodeTabIndices();
+      var _prevFocusedNode = event.relatedTarget,
+          _currentFocusedNode = event.target;
+
+      if (treeRootRef !== null && treeRootRef !== void 0 && (_treeRootRef$current3 = treeRootRef.current) !== null && _treeRootRef$current3 !== void 0 && _treeRootRef$current3.contains(_prevFocusedNode)) {
+        _prevFocusedNode.tabIndex = -1;
+      }
+
+      _currentFocusedNode.tabIndex = 0;
+    }
+  }
+
+  var focusTarget = false;
+  var nodesWithProps = React__default["default"].Children.map(children, function (node) {
+    var sharedNodeProps = {
+      active: active,
+      depth: 0,
+      onNodeFocusEvent: handleFocusEvent,
+      onTreeSelect: handleTreeSelect,
+      selected: selected,
+      tabIndex: !node.props.disabled && -1 || null
+    };
+
+    if (!focusTarget && !node.props.disabled) {
+      sharedNodeProps.tabIndex = 0;
+      focusTarget = true;
+    }
+
+    if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
+      return /*#__PURE__*/React__default["default"].cloneElement(node, sharedNodeProps);
+    }
+  });
+
+  function handleKeyDown(event) {
+    event.stopPropagation();
+
+    if (match.matches(event, [keys.ArrowUp, keys.ArrowDown])) {
+      event.preventDefault();
+    }
+
+    treeWalker.current.currentNode = event.target;
+    var nextFocusNode;
+
+    if (match.match(event, keys.ArrowUp)) {
+      nextFocusNode = treeWalker.current.previousNode();
+    }
+
+    if (match.match(event, keys.ArrowDown)) {
+      nextFocusNode = treeWalker.current.nextNode();
+    }
+
+    if (nextFocusNode && nextFocusNode !== event.target) {
+      resetNodeTabIndices();
+      nextFocusNode.tabIndex = 0;
+      nextFocusNode.focus();
+    }
+
+    if (rest.onKeyDown) {
+      rest.onKeyDown(event);
+    }
+  }
+
+  React.useEffect(function () {
+    var _treeWalker$current;
+
+    treeWalker.current = (_treeWalker$current = treeWalker.current) !== null && _treeWalker$current !== void 0 ? _treeWalker$current : document.createTreeWalker(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: function acceptNode(node) {
+        if (node.classList.contains("".concat(prefix, "--tree-node--disabled"))) {
+          return NodeFilter.FILTER_REJECT;
+        }
+
+        if (node.matches("li.".concat(prefix, "--tree-node"))) {
+          return NodeFilter.FILTER_ACCEPT;
+        }
+
+        return NodeFilter.FILTER_SKIP;
+      }
+    });
+  }, [prefix]);
+  React.useEffect(function () {
+    if (preselected.length) {
+      setSelected(preselected);
+    }
+
+    if (prespecifiedActive) {
+      setActive(prespecifiedActive);
+    }
+  }, [preselected, prespecifiedActive]);
+  var labelId = "".concat(treeId, "__label");
+
+  var TreeLabel = function TreeLabel() {
+    return !hideLabel && /*#__PURE__*/React__default["default"].createElement("label", {
+      id: labelId,
+      className: "".concat(prefix, "--label")
+    }, label);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TreeLabel, null), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-label": hideLabel ? label : null,
+    "aria-labelledby": !hideLabel ? labelId : null,
+    "aria-multiselectable": multiselect || null,
+    className: treeClasses,
+    onKeyDown: handleKeyDown,
+    ref: treeRootRef,
+    role: "tree"
+  }), nodesWithProps));
+}
+TreeView.propTypes = {
+  /**
+   * Mark the active node in the tree, represented by its value
+   */
+  active: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify the children of the TreeView
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the TreeView
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether or not the label should be hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the label text that will be read by a screen reader
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify the selection mode of the tree.
+   * If `multiselect` is `false` then only one node can be selected at a time
+   */
+  multiselect: PropTypes__default["default"].bool,
+
+  /**
+   * Callback function that is called when any node is selected
+   */
+  onSelect: PropTypes__default["default"].func,
+
+  /**
+   * Array representing 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 size of the tree from a list of available sizes.
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['xs', 'sm']) : PropTypes__default["default"].oneOf(['default', 'compact'])
+};
+
+exports["default"] = TreeView;

package/lib/components/TreeView/index.js

@@ -0,0 +1,18 @@
+/**
+ * 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 TreeView = require('./TreeView.js');
+var TreeNode = require('./TreeNode.js');
+
+TreeView["default"].TreeNode = TreeNode["default"];
+
+exports["default"] = TreeView["default"];
+exports.TreeNode = TreeNode["default"];

package/lib/components/UIShell/Content.js

@@ -0,0 +1,60 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.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);
+
+var _excluded = ["className", "children", "tagName"];
+
+var Content = function Content(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      tagName = _ref.tagName,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--content"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement(tagName, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    className: className
+  }), children);
+};
+
+Content.propTypes = {
+  /**
+   * Provide children nodes to be rendered in the content container
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Optionally provide a custom class name that is applied to the container
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify the tag of the content node. Defaults to `main`
+   */
+  tagName: PropTypes__default["default"].string
+};
+Content.defaultProps = {
+  tagName: 'main'
+};
+var Content$1 = Content;
+
+exports["default"] = Content$1;