@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/TreeView/TreeView.js

@@ -24,69 +24,60 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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,
-      _ref$multiselect = _ref.multiselect,
-      multiselect = _ref$multiselect === void 0 ? false : _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 ? 'sm' : _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];
+  let {
+    active: prespecifiedActive,
+    children,
+    className,
+    hideLabel = false,
+    label,
+    multiselect = false,
+    onSelect,
+    selected: preselected = [],
+    size = 'sm',
+    ...rest
+  } = _ref;
+  const {
+    current: treeId
+  } = React.useRef(rest.id || uniqueId["default"]());
+  const prefix = usePrefix.usePrefix();
+  const treeClasses = cx__default["default"](className, `${prefix}--tree`, {
+    [`${prefix}--tree--${size}`]: size !== 'default'
+  });
+  const treeRootRef = React.useRef(null);
+  const treeWalker = React.useRef(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current);
+  const [selected, setSelected] = React.useState(preselected);
+  const [active, setActive] = React.useState(prespecifiedActive);
 
   function resetNodeTabIndices() {
-    var _treeRootRef$current$, _treeRootRef$current;
+    var _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) {
+    Array.prototype.forEach.call((treeRootRef === null || treeRootRef === void 0 ? void 0 : (_treeRootRef$current = treeRootRef.current) === null || _treeRootRef$current === void 0 ? void 0 : _treeRootRef$current.querySelectorAll('[tabIndex="0"]')) ?? [], item => {
       item.tabIndex = -1;
     });
   }
 
   function handleTreeSelect(event) {
-    var node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var nodeId = node.id;
+    let node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const {
+      id: nodeId
+    } = node;
 
     if (multiselect && (event.metaKey || event.ctrlKey)) {
       if (!selected.includes(nodeId)) {
         setSelected(selected.concat(nodeId));
       } else {
-        setSelected(selected.filter(function (selectedId) {
-          return selectedId !== nodeId;
-        }));
+        setSelected(selected.filter(selectedId => selectedId !== nodeId));
       }
 
       onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, node);
     } else {
       setSelected([nodeId]);
       setActive(nodeId);
-      onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, _rollupPluginBabelHelpers.objectSpread2({
-        activeNodeId: nodeId
-      }, node));
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
+        activeNodeId: nodeId,
+        ...node
+      });
     }
   }
 
@@ -94,8 +85,10 @@ function TreeView(_ref) {
     if (event.type === 'blur') {
       var _treeRootRef$current2;
 
-      var currentFocusedNode = event.relatedTarget,
-          prevFocusedNode = event.target;
+      const {
+        relatedTarget: currentFocusedNode,
+        target: prevFocusedNode
+      } = event;
 
       if (treeRootRef !== null && treeRootRef !== void 0 && (_treeRootRef$current2 = treeRootRef.current) !== null && _treeRootRef$current2 !== void 0 && _treeRootRef$current2.contains(currentFocusedNode)) {
         prevFocusedNode.tabIndex = -1;
@@ -106,25 +99,27 @@ function TreeView(_ref) {
       var _treeRootRef$current3;
 
       resetNodeTabIndices();
-      var _prevFocusedNode = event.relatedTarget,
-          _currentFocusedNode = event.target;
+      const {
+        relatedTarget: prevFocusedNode,
+        target: currentFocusedNode
+      } = event;
 
-      if (treeRootRef !== null && treeRootRef !== void 0 && (_treeRootRef$current3 = treeRootRef.current) !== null && _treeRootRef$current3 !== void 0 && _treeRootRef$current3.contains(_prevFocusedNode)) {
-        _prevFocusedNode.tabIndex = -1;
+      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;
+      currentFocusedNode.tabIndex = 0;
     }
   }
 
-  var focusTarget = false;
-  var nodesWithProps = React__default["default"].Children.map(children, function (node) {
-    var sharedNodeProps = {
-      active: active,
+  let focusTarget = false;
+  const nodesWithProps = React__default["default"].Children.map(children, node => {
+    const sharedNodeProps = {
+      active,
       depth: 0,
       onNodeFocusEvent: handleFocusEvent,
       onTreeSelect: handleTreeSelect,
-      selected: selected,
+      selected,
       tabIndex: !node.props.disabled && -1 || null
     };
 
@@ -150,7 +145,7 @@ function TreeView(_ref) {
     }
 
     treeWalker.current.currentNode = event.target;
-    var nextFocusNode;
+    let nextFocusNode;
 
     if (match.match(event, keys.ArrowUp)) {
       nextFocusNode = treeWalker.current.previousNode();
@@ -163,7 +158,7 @@ function TreeView(_ref) {
     if (match.matches(event, [keys.Home, keys.End, {
       code: 'KeyA'
     }])) {
-      var nodeIds = [];
+      const nodeIds = [];
 
       if (match.matches(event, [keys.Home, keys.End])) {
         if (multiselect && event.shiftKey && event.ctrlKey && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
@@ -209,16 +204,14 @@ function TreeView(_ref) {
     rest === null || rest === void 0 ? void 0 : (_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 ? void 0 : _rest$onKeyDown.call(rest, 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"))) {
+  React.useEffect(() => {
+    treeWalker.current = treeWalker.current ?? document.createTreeWalker(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: function (node) {
+        if (node.classList.contains(`${prefix}--tree-node--disabled`)) {
           return NodeFilter.FILTER_REJECT;
         }
 
-        if (node.matches("li.".concat(prefix, "--tree-node"))) {
+        if (node.matches(`li.${prefix}--tree-node`)) {
           return NodeFilter.FILTER_ACCEPT;
         }
 
@@ -227,27 +220,23 @@ function TreeView(_ref) {
     });
   }, [prefix]);
 
-  var useActiveAndSelectedOnMount = function useActiveAndSelectedOnMount() {
-    return React.useEffect(function () {
-      if (preselected.length) {
-        setSelected(preselected);
-      }
+  const useActiveAndSelectedOnMount = () => React.useEffect(() => {
+    if (preselected.length) {
+      setSelected(preselected);
+    }
 
-      if (prespecifiedActive) {
-        setActive(prespecifiedActive);
-      }
-    }, []);
-  };
+    if (prespecifiedActive) {
+      setActive(prespecifiedActive);
+    }
+  }, []);
 
   useActiveAndSelectedOnMount();
-  var labelId = "".concat(treeId, "__label");
-
-  var TreeLabel = function TreeLabel() {
-    return !hideLabel && /*#__PURE__*/React__default["default"].createElement("label", {
-      id: labelId,
-      className: "".concat(prefix, "--label")
-    }, label);
-  };
+  const labelId = `${treeId}__label`;
+
+  const TreeLabel = () => !hideLabel && /*#__PURE__*/React__default["default"].createElement("label", {
+    id: labelId,
+    className: `${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,

package/lib/components/UIShell/Content.js

@@ -9,7 +9,6 @@
 
 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');
@@ -21,19 +20,18 @@ 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);
+const Content = _ref => {
+  let {
+    className: customClassName,
+    children,
+    tagName,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--content`, customClassName);
+  return /*#__PURE__*/React__default["default"].createElement(tagName, { ...rest,
+    className
+  }, children);
 };
 
 Content.propTypes = {

package/lib/components/UIShell/Header.js

@@ -22,26 +22,30 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "children"];
-
-var Header = function Header(_ref) {
-  var customClassName = _ref.className,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--header"), customClassName);
+const Header = _ref => {
+  let {
+    className: customClassName,
+    children,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--header`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("header", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
 };
 
-Header.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+Header.propTypes = {
+  /**
+   * Required props for the accessibility label of the header
+   */
+  ...AriaPropTypes.AriaLabelPropType,
+
   /**
    * Optionally provide a custom class name that is applied to the underlying <header>
    */
   className: PropTypes__default["default"].string
-});
+};
 var Header$1 = Header;
 
 exports["default"] = Header$1;

package/lib/components/UIShell/HeaderContainer.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 
@@ -18,20 +17,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var HeaderContainer = function HeaderContainer(_ref) {
-  var isSideNavExpanded = _ref.isSideNavExpanded,
-      Children = _ref.render;
-
+const HeaderContainer = _ref => {
+  let {
+    isSideNavExpanded,
+    render: Children
+  } = _ref;
   //state for expandable sidenav
-  var _useState = React.useState(isSideNavExpanded),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isSideNavExpandedState = _useState2[0],
-      setIsSideNavExpandedState = _useState2[1];
-
-  var handleHeaderMenuButtonClick = React.useCallback(function () {
-    setIsSideNavExpandedState(function (prevIsSideNavExpanded) {
-      return !prevIsSideNavExpanded;
-    });
+  const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
+  const handleHeaderMenuButtonClick = React.useCallback(() => {
+    setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);
   return /*#__PURE__*/React__default["default"].createElement(Children, {
     isSideNavExpanded: isSideNavExpandedState,

package/lib/components/UIShell/HeaderGlobalAction.js

@@ -23,7 +23,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["aria-label", "aria-labelledby", "children", "className", "onClick", "isActive", "tooltipAlignment"];
 /**
  * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
  * essentially an Icon Button with an additional state to indicate whether it is
@@ -33,21 +32,24 @@ var _excluded = ["aria-label", "aria-labelledby", "children", "className", "onCl
  * Note: children passed to this component should be an Icon.
  */
 
-var HeaderGlobalAction = /*#__PURE__*/React__default["default"].forwardRef(function HeaderGlobalAction(_ref, ref) {
-  var _cx;
-
-  var ariaLabel = _ref['aria-label'],
-      ariaLabelledBy = _ref['aria-labelledby'],
-      children = _ref.children,
-      customClassName = _ref.className,
-      onClick = _ref.onClick,
-      isActive = _ref.isActive,
-      tooltipAlignment = _ref.tooltipAlignment,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__action"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--header__action--active"), isActive), _cx));
-  var accessibilityLabel = {
+const HeaderGlobalAction = /*#__PURE__*/React__default["default"].forwardRef(function HeaderGlobalAction(_ref, ref) {
+  let {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    children,
+    className: customClassName,
+    onClick,
+    isActive,
+    tooltipAlignment,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [customClassName]: !!customClassName,
+    [`${prefix}--header__action`]: true,
+    [`${prefix}--header__action--active`]: isActive
+  });
+  const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   };
@@ -62,7 +64,12 @@ var HeaderGlobalAction = /*#__PURE__*/React__default["default"].forwardRef(funct
     ref: ref
   }), children);
 });
-HeaderGlobalAction.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
+HeaderGlobalAction.propTypes = {
+  /**
+   * Required props for the accessibility label of the button
+   */
+  ...AriaPropTypes.AriaLabelPropType,
+
   /**
    * Provide a custom icon for this global action
    */
@@ -90,7 +97,7 @@ HeaderGlobalAction.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPl
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes__default["default"].oneOf(['start', 'center', 'end'])
-});
+};
 HeaderGlobalAction.displayName = 'HeaderGlobalAction';
 var HeaderGlobalAction$1 = HeaderGlobalAction;
 

package/lib/components/UIShell/HeaderGlobalBar.js

@@ -17,9 +17,7 @@ var wrapComponent = require('../../tools/wrapComponent.js');
 
 var HeaderGlobalBar = wrapComponent["default"]({
   name: 'HeaderGlobalBar',
-  className: function className(prefix) {
-    return "".concat(prefix, "--header__global");
-  },
+  className: prefix => `${prefix}--header__global`,
   type: 'div'
 });