@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/TreeView/TreeNode.js

@@ -0,0 +1,325 @@
+/**
+ * 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, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { CaretDown } from '@carbon/icons-react';
+import cx from 'classnames';
+import uniqueId from '../../tools/uniqueId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { matches, match } from '../../internal/keyboard/match.js';
+import { ArrowLeft, ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["active", "children", "className", "depth", "disabled", "isExpanded", "label", "onNodeFocusEvent", "onSelect", "onToggle", "onTreeSelect", "renderIcon", "selected", "value"];
+function TreeNode(_ref) {
+  var _classNames, _objectSpread2$1;
+
+  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 = _objectWithoutProperties(_ref, _excluded);
+
+  var _useRef = useRef(rest.id || uniqueId()),
+      id = _useRef.current;
+
+  var _useState = useState(isExpanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var currentNode = useRef(null);
+  var currentNodeLabel = useRef(null);
+  var prefix = usePrefix();
+  var nodesWithProps = React__default.Children.map(children, function (node) {
+    if ( /*#__PURE__*/React__default.isValidElement(node)) {
+      return /*#__PURE__*/React__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(className, "".concat(prefix, "--tree-node"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--tree-node--active"), isActive), _defineProperty(_classNames, "".concat(prefix, "--tree-node--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--tree-node--selected"), isSelected), _defineProperty(_classNames, "".concat(prefix, "--tree-node--with-icon"), Icon), _defineProperty(_classNames, "".concat(prefix, "--tree-leaf-node"), !children), _defineProperty(_classNames, "".concat(prefix, "--tree-parent-node"), children), _classNames));
+  var toggleClasses = cx("".concat(prefix, "--tree-parent-node__toggle-icon"), _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 (matches(event, [ArrowLeft, ArrowRight, Enter])) {
+      event.stopPropagation();
+    }
+
+    if (match(event, 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(event, 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 (matches(event, [Enter, 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);
+  }
+
+  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 = _objectSpread2(_objectSpread2({}, rest), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, 'aria-current', isActive || null), _defineProperty(_objectSpread2$1, 'aria-selected', disabled ? null : isSelected), _defineProperty(_objectSpread2$1, 'aria-disabled', disabled), _defineProperty(_objectSpread2$1, "className", treeNodeClasses), _defineProperty(_objectSpread2$1, "id", id), _defineProperty(_objectSpread2$1, "onBlur", handleFocusEvent), _defineProperty(_objectSpread2$1, "onClick", handleClick), _defineProperty(_objectSpread2$1, "onFocus", handleFocusEvent), _defineProperty(_objectSpread2$1, "onKeyDown", handleKeyDown), _defineProperty(_objectSpread2$1, "ref", currentNode), _defineProperty(_objectSpread2$1, "role", 'treeitem'), _objectSpread2$1));
+
+  if (!children) {
+    return /*#__PURE__*/React__default.createElement("li", treeNodeProps, /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--tree-node__label"),
+      ref: currentNodeLabel
+    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+      className: "".concat(prefix, "--tree-node__icon")
+    }), label));
+  }
+
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    React__default.createElement("li", _extends({}, treeNodeProps, {
+      "aria-expanded": !!expanded
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--tree-node__label"),
+      ref: currentNodeLabel
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--tree-parent-node__toggle"),
+      disabled: disabled,
+      onClick: handleToggleClick
+    }, /*#__PURE__*/React__default.createElement(CaretDown, {
+      className: toggleClasses
+    })), /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--tree-node__label__details")
+    }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+      className: "".concat(prefix, "--tree-node__icon")
+    }), label)), expanded && /*#__PURE__*/React__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.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify the children of the TreeNode
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the TreeNode
+   */
+  className: PropTypes.string,
+
+  /**
+   * TreeNode depth to determine spacing, automatically calculated by default
+   */
+  depth: PropTypes.number,
+
+  /**
+   * Specify if the TreeNode is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify if the TreeNode is expanded (only applicable to parent nodes)
+   */
+  isExpanded: PropTypes.bool,
+
+  /**
+   * Rendered label for the TreeNode
+   */
+  label: PropTypes.node,
+
+  /**
+   * Callback function for when the node receives or loses focus
+   */
+  onNodeFocusEvent: PropTypes.func,
+
+  /**
+   * Callback function for when the node is selected
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Callback function for when a parent node is expanded or collapsed
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * Callback function for when any node in the tree is selected
+   */
+  onTreeSelect: PropTypes.func,
+
+  /**
+   * Optional prop to allow each node to have an associated icon.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Array containing all selected node IDs in the tree
+   */
+  selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+
+  /**
+   * Specify the value of the TreeNode
+   */
+  value: PropTypes.string
+};
+
+export { TreeNode as default };

package/es/components/TreeView/TreeView.js

@@ -0,0 +1,252 @@
+/**
+ * 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, defineProperty as _defineProperty, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import uniqueId from '../../tools/uniqueId.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { matches, match } from '../../internal/keyboard/match.js';
+import { ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
+
+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.enabled('enable-v11-release') ? 'sm' : 'default' : _ref$size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useRef = useRef(rest.id || uniqueId()),
+      treeId = _useRef.current;
+
+  var prefix = usePrefix();
+  var treeClasses = cx(className, "".concat(prefix, "--tree"), _defineProperty({}, "".concat(prefix, "--tree--").concat(size), size !== 'default'));
+  var treeRootRef = useRef(null);
+  var treeWalker = useRef(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current);
+
+  var _useState = useState(preselected),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = useState(prespecifiedActive),
+      _useState4 = _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.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.isValidElement(node)) {
+      return /*#__PURE__*/React__default.cloneElement(node, sharedNodeProps);
+    }
+  });
+
+  function handleKeyDown(event) {
+    event.stopPropagation();
+
+    if (matches(event, [ArrowUp, ArrowDown])) {
+      event.preventDefault();
+    }
+
+    treeWalker.current.currentNode = event.target;
+    var nextFocusNode;
+
+    if (match(event, ArrowUp)) {
+      nextFocusNode = treeWalker.current.previousNode();
+    }
+
+    if (match(event, ArrowDown)) {
+      nextFocusNode = treeWalker.current.nextNode();
+    }
+
+    if (nextFocusNode && nextFocusNode !== event.target) {
+      resetNodeTabIndices();
+      nextFocusNode.tabIndex = 0;
+      nextFocusNode.focus();
+    }
+
+    if (rest.onKeyDown) {
+      rest.onKeyDown(event);
+    }
+  }
+
+  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]);
+  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.createElement("label", {
+      id: labelId,
+      className: "".concat(prefix, "--label")
+    }, label);
+  };
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TreeLabel, null), /*#__PURE__*/React__default.createElement("ul", _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.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify the children of the TreeView
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the TreeView
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether or not the label should be hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Provide the label text that will be read by a screen reader
+   */
+  label: PropTypes.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.bool,
+
+  /**
+   * Callback function that is called when any node is selected
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Array representing all selected node IDs in the tree
+   */
+  selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+
+  /**
+   * Specify the size of the tree from a list of available sizes.
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['xs', 'sm']) : PropTypes.oneOf(['default', 'compact'])
+};
+
+export { TreeView as default };

package/es/components/TreeView/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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 TreeView from './TreeView.js';
+export { default } from './TreeView.js';
+import TreeNode from './TreeNode.js';
+export { default as TreeNode } from './TreeNode.js';
+
+TreeView.TreeNode = TreeNode;

package/es/components/UIShell/Content.js

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

package/es/components/UIShell/Header.js

@@ -0,0 +1,37 @@
+/**
+ * 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, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "children"];
+
+var Header = function Header(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--header"), customClassName);
+  return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
+    className: className
+  }), children);
+};
+
+Header.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
+  /**
+   * Optionally provide a custom class name that is applied to the underlying <header>
+   */
+  className: PropTypes.string
+});
+var Header$1 = Header;
+
+export { Header$1 as default };