@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/components/Tooltip/Tooltip.js

@@ -53,52 +53,43 @@ function Tooltip(_ref) {
     // This should be placed on the trigger in case the element is disabled
     onMouseEnter
   };
-
   function getChildEventHandlers(childProps) {
     const eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
     const eventHandlers = {};
     eventHandlerFunctions.forEach(functionName => {
       eventHandlers[functionName] = evt => {
         triggerProps[functionName]();
-
-        if (childProps !== null && childProps !== void 0 && childProps[functionName]) {
-          childProps === null || childProps === void 0 ? void 0 : childProps[functionName](evt);
+        if (childProps?.[functionName]) {
+          childProps?.[functionName](evt);
         }
       };
     });
     return eventHandlers;
   }
-
   if (label) {
     triggerProps['aria-labelledby'] = id;
   } else {
     triggerProps['aria-describedby'] = id;
   }
-
   function onKeyDown(event) {
     if (open && match.match(event, keys.Escape)) {
       event.stopPropagation();
       setOpen(false);
     }
-
     if (open && closeOnActivation && (match.match(event, keys.Enter) || match.match(event, keys.Space))) {
       setOpen(false);
     }
   }
-
   function onMouseEnter() {
     setOpen(true, enterDelayMs);
   }
-
   function onMouseLeave() {
     setOpen(false, leaveDelayMs);
   }
-
   useNoInteractiveChildren.useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
   React.useEffect(() => {
     if (containerRef !== null && containerRef.current) {
       const interactiveContent = useNoInteractiveChildren.getInteractiveContent(containerRef.current);
-
       if (!interactiveContent) {
         setOpen(false);
       }
@@ -113,7 +104,8 @@ function Tooltip(_ref) {
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, { ...triggerProps,
+  }), child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+    ...triggerProps,
     ...getChildEventHandlers(child.props)
   }) : null, /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
     "aria-hidden": "true",
@@ -123,33 +115,27 @@ function Tooltip(_ref) {
     role: "tooltip"
   }, label || description));
 }
-
 Tooltip.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
-
   /**
    * Pass in the child to which the tooltip will be applied
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
    */
   closeOnActivation: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the tooltip should be open when it first renders
    */
   defaultOpen: PropTypes__default["default"].bool,
-
   /**
    * Provide the description to be rendered inside of the Tooltip. The
    * description will use `aria-describedby` and will describe the child node
@@ -161,12 +147,10 @@ Tooltip.propTypes = {
    * description will not be used
    */
   description: PropTypes__default["default"].node,
-
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes__default["default"].number,
-
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
@@ -177,7 +161,6 @@ Tooltip.propTypes = {
    * used
    */
   label: PropTypes__default["default"].node,
-
   /**
    * Specify the duration in milliseconds to delay before hiding the tooltip
    */

package/lib/components/TreeView/TreeNode.js

@@ -75,13 +75,11 @@ function TreeNode(_ref) {
   const toggleClasses = cx__default["default"](`${prefix}--tree-parent-node__toggle-icon`, {
     [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded
   });
-
   function handleToggleClick(event) {
     if (disabled) {
       return;
     }
-
-    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
+    onToggle?.(event, {
       id,
       isExpanded: !expanded,
       label,
@@ -89,53 +87,41 @@ function TreeNode(_ref) {
     });
     setExpanded(!expanded);
   }
-
   function handleClick(event) {
     event.stopPropagation();
-
     if (!disabled) {
-      var _rest$onClick;
-
-      onTreeSelect === null || onTreeSelect === void 0 ? void 0 : onTreeSelect(event, {
+      onTreeSelect?.(event, {
         id,
         label,
         value
       });
-      onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(event, {
+      onNodeSelect?.(event, {
         id,
         label,
         value
       });
-      rest === null || rest === void 0 ? void 0 : (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
+      rest?.onClick?.(event);
     }
   }
-
   function handleKeyDown(event) {
-    var _rest$onKeyDown;
-
     if (disabled) {
       return;
     }
-
     if (match.matches(event, [keys.ArrowLeft, keys.ArrowRight, keys.Enter])) {
       event.stopPropagation();
     }
-
     if (match.match(event, keys.ArrowLeft)) {
       const findParentTreeNode = node => {
         if (node.classList.contains(`${prefix}--tree-parent-node`)) {
           return node;
         }
-
         if (node.classList.contains(`${prefix}--tree`)) {
           return null;
         }
-
         return findParentTreeNode(node.parentNode);
       };
-
       if (children && expanded) {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
+        onToggle?.(event, {
           id,
           isExpanded: false,
           label,
@@ -143,16 +129,13 @@ function TreeNode(_ref) {
         });
         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();
+        findParentTreeNode(currentNode.current.parentNode)?.focus();
       }
     }
-
     if (children && match.match(event, keys.ArrowRight)) {
       if (expanded) {
         /**
@@ -161,7 +144,7 @@ function TreeNode(_ref) {
          */
         currentNode.current.lastChild.firstChild.focus();
       } else {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
+        onToggle?.(event, {
           id,
           isExpanded: true,
           label,
@@ -170,31 +153,21 @@ function TreeNode(_ref) {
         setExpanded(true);
       }
     }
-
     if (match.matches(event, [keys.Enter, keys.Space])) {
       event.preventDefault();
       handleClick(event);
     }
-
-    rest === null || rest === void 0 ? void 0 : (_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 ? void 0 : _rest$onKeyDown.call(rest, event);
+    rest?.onKeyDown?.(event);
   }
-
   function handleFocusEvent(event) {
     if (event.type === 'blur') {
-      var _rest$onBlur;
-
-      rest === null || rest === void 0 ? void 0 : (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 ? void 0 : _rest$onBlur.call(rest, event);
+      rest?.onBlur?.(event);
     }
-
     if (event.type === 'focus') {
-      var _rest$onFocus;
-
-      rest === null || rest === void 0 ? void 0 : (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, event);
+      rest?.onFocus?.(event);
     }
-
-    onNodeFocusEvent === null || onNodeFocusEvent === void 0 ? void 0 : onNodeFocusEvent(event);
+    onNodeFocusEvent?.(event);
   }
-
   React.useEffect(() => {
     /**
      * Negative margin shifts node to align with the left side boundary of the
@@ -211,31 +184,28 @@ function TreeNode(_ref) {
       // parent node with icon
       if (children && Icon) {
         return depth + 1 + depth * 0.5;
-      } // parent node without icon
-
-
+      }
+      // parent node without icon
       if (children) {
         return depth + 1;
-      } // leaf node with icon
-
-
+      }
+      // leaf node with icon
       if (Icon) {
         return depth + 2 + depth * 0.5;
-      } // leaf node without icon
-
-
+      }
+      // leaf node without icon
       return depth + 2.5;
     };
-
     if (currentNodeLabel.current) {
       currentNodeLabel.current.style.marginLeft = `-${calcOffset()}rem`;
       currentNodeLabel.current.style.paddingLeft = `${calcOffset()}rem`;
-    } // sync props and state
-
+    }
 
+    // sync props and state
     setExpanded(isExpanded);
   }, [children, depth, Icon, isExpanded]);
-  const treeNodeProps = { ...rest,
+  const treeNodeProps = {
+    ...rest,
     ['aria-current']: isActive || null,
     ['aria-selected']: disabled ? null : isSelected,
     ['aria-disabled']: disabled,
@@ -248,7 +218,6 @@ function TreeNode(_ref) {
     ref: currentNode,
     role: 'treeitem'
   };
-
   if (!children) {
     return /*#__PURE__*/React__default["default"].createElement("li", treeNodeProps, /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--tree-node__label`,
@@ -257,7 +226,6 @@ function TreeNode(_ref) {
       className: `${prefix}--tree-node__icon`
     }), label));
   }
-
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
@@ -287,68 +255,55 @@ 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
    */

package/lib/components/TreeView/TreeView.js

@@ -45,73 +45,57 @@ function TreeView(_ref) {
     [`${prefix}--tree--${size}`]: size !== 'default'
   });
   const treeRootRef = React.useRef(null);
-  const treeWalker = React.useRef(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current);
+  const treeWalker = React.useRef(treeRootRef?.current);
   const [selected, setSelected] = React.useState(preselected);
   const [active, setActive] = React.useState(prespecifiedActive);
-
   function resetNodeTabIndices() {
-    var _treeRootRef$current;
-
-    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 => {
+    Array.prototype.forEach.call(treeRootRef?.current?.querySelectorAll('[tabIndex="0"]') ?? [], item => {
       item.tabIndex = -1;
     });
   }
-
   function handleTreeSelect(event) {
     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(selectedId => selectedId !== nodeId));
       }
-
-      onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, node);
+      onSelect?.(event, node);
     } else {
       setSelected([nodeId]);
       setActive(nodeId);
-      onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
+      onSelect?.(event, {
         activeNodeId: nodeId,
         ...node
       });
     }
   }
-
   function handleFocusEvent(event) {
     if (event.type === 'blur') {
-      var _treeRootRef$current2;
-
       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)) {
+      if (treeRootRef?.current?.contains(currentFocusedNode)) {
         prevFocusedNode.tabIndex = -1;
       }
     }
-
     if (event.type === 'focus') {
-      var _treeRootRef$current3;
-
       resetNodeTabIndices();
       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)) {
+      if (treeRootRef?.current?.contains(prevFocusedNode)) {
         prevFocusedNode.tabIndex = -1;
       }
-
       currentFocusedNode.tabIndex = 0;
     }
   }
-
   let focusTarget = false;
   const nodesWithProps = React__default["default"].Children.map(children, node => {
     const sharedNodeProps = {
@@ -122,122 +106,90 @@ function TreeView(_ref) {
       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) {
-    var _rest$onKeyDown;
-
     event.stopPropagation();
-
     if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End, {
       code: 'KeyA'
     }])) {
       event.preventDefault();
     }
-
     treeWalker.current.currentNode = event.target;
     let nextFocusNode;
-
     if (match.match(event, keys.ArrowUp)) {
       nextFocusNode = treeWalker.current.previousNode();
     }
-
     if (match.match(event, keys.ArrowDown)) {
       nextFocusNode = treeWalker.current.nextNode();
     }
-
     if (match.matches(event, [keys.Home, keys.End, {
       code: 'KeyA'
     }])) {
       const nodeIds = [];
-
       if (match.matches(event, [keys.Home, keys.End])) {
         if (multiselect && event.shiftKey && event.ctrlKey && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
-          var _treeWalker$current$c;
-
-          nodeIds.push((_treeWalker$current$c = treeWalker.current.currentNode) === null || _treeWalker$current$c === void 0 ? void 0 : _treeWalker$current$c.id);
+          nodeIds.push(treeWalker.current.currentNode?.id);
         }
-
         while (match.match(event, keys.Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
           nextFocusNode = treeWalker.current.currentNode;
-
           if (multiselect && event.shiftKey && event.ctrlKey && !nextFocusNode.getAttribute('aria-disabled')) {
-            var _nextFocusNode;
-
-            nodeIds.push((_nextFocusNode = nextFocusNode) === null || _nextFocusNode === void 0 ? void 0 : _nextFocusNode.id);
+            nodeIds.push(nextFocusNode?.id);
           }
         }
       }
-
       if (match.match(event, {
         code: 'KeyA'
       }) && event.ctrlKey) {
         treeWalker.current.currentNode = treeWalker.current.root;
-
         while (treeWalker.current.nextNode()) {
           if (!treeWalker.current.currentNode.getAttribute('aria-disabled')) {
-            var _treeWalker$current$c2;
-
-            nodeIds.push((_treeWalker$current$c2 = treeWalker.current.currentNode) === null || _treeWalker$current$c2 === void 0 ? void 0 : _treeWalker$current$c2.id);
+            nodeIds.push(treeWalker.current.currentNode?.id);
           }
         }
       }
-
       setSelected(selected.concat(nodeIds));
     }
-
     if (nextFocusNode && nextFocusNode !== event.target) {
       resetNodeTabIndices();
       nextFocusNode.tabIndex = 0;
       nextFocusNode.focus();
     }
-
-    rest === null || rest === void 0 ? void 0 : (_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 ? void 0 : _rest$onKeyDown.call(rest, event);
+    rest?.onKeyDown?.(event);
   }
-
   React.useEffect(() => {
-    treeWalker.current = treeWalker.current ?? document.createTreeWalker(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current, NodeFilter.SHOW_ELEMENT, {
+    treeWalker.current = treeWalker.current ?? document.createTreeWalker(treeRootRef?.current, NodeFilter.SHOW_ELEMENT, {
       acceptNode: function (node) {
         if (node.classList.contains(`${prefix}--tree-node--disabled`)) {
           return NodeFilter.FILTER_REJECT;
         }
-
         if (node.matches(`li.${prefix}--tree-node`)) {
           return NodeFilter.FILTER_ACCEPT;
         }
-
         return NodeFilter.FILTER_SKIP;
       }
     });
   }, [prefix]);
-
   const useActiveAndSelectedOnMount = () => React.useEffect(() => {
     if (preselected.length) {
       setSelected(preselected);
     }
-
     if (prespecifiedActive) {
       setActive(prespecifiedActive);
     }
   }, []);
-
   useActiveAndSelectedOnMount();
   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,
     "aria-labelledby": !hideLabel ? labelId : null,
@@ -253,43 +205,35 @@ 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,
-
   /**
    * **[Experimental]** 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.
    */

package/lib/components/UIShell/Content.js

@@ -29,22 +29,20 @@ const Content = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--content`, customClassName);
-  return /*#__PURE__*/React__default["default"].createElement(tagName, { ...rest,
+  return /*#__PURE__*/React__default["default"].createElement(tagName, {
+    ...rest,
     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`
    */

package/lib/components/UIShell/Header.js

@@ -34,13 +34,11 @@ const Header = _ref => {
     className: className
   }), children);
 };
-
 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>
    */