@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/Tooltip/Tooltip.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useEffect } from 'react';
@@ -17,55 +17,38 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen", "closeOnActivation"];
-
 function Tooltip(_ref) {
-  var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'top' : _ref$align,
-      customClassName = _ref.className,
-      children = _ref.children,
-      label = _ref.label,
-      description = _ref.description,
-      _ref$enterDelayMs = _ref.enterDelayMs,
-      enterDelayMs = _ref$enterDelayMs === void 0 ? 100 : _ref$enterDelayMs,
-      _ref$leaveDelayMs = _ref.leaveDelayMs,
-      leaveDelayMs = _ref$leaveDelayMs === void 0 ? 300 : _ref$leaveDelayMs,
-      _ref$defaultOpen = _ref.defaultOpen,
-      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-      _ref$closeOnActivatio = _ref.closeOnActivation,
-      closeOnActivation = _ref$closeOnActivatio === void 0 ? false : _ref$closeOnActivatio,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var containerRef = useRef(null);
-  var tooltipRef = useRef(null);
-
-  var _useDelayedState = useDelayedState(defaultOpen),
-      _useDelayedState2 = _slicedToArray(_useDelayedState, 2),
-      open = _useDelayedState2[0],
-      setOpen = _useDelayedState2[1];
-
-  var id = useId('tooltip');
-  var prefix = usePrefix();
-  var child = React__default.Children.only(children);
-  var triggerProps = {
-    onFocus: function onFocus() {
-      return setOpen(true);
-    },
-    onBlur: function onBlur() {
-      return setOpen(false);
-    },
-    onClick: function onClick() {
-      return closeOnActivation && setOpen(false);
-    },
+  let {
+    align = 'top',
+    className: customClassName,
+    children,
+    label,
+    description,
+    enterDelayMs = 100,
+    leaveDelayMs = 300,
+    defaultOpen = false,
+    closeOnActivation = false,
+    ...rest
+  } = _ref;
+  const containerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const [open, setOpen] = useDelayedState(defaultOpen);
+  const id = useId('tooltip');
+  const prefix = usePrefix();
+  const child = React__default.Children.only(children);
+  const triggerProps = {
+    onFocus: () => setOpen(true),
+    onBlur: () => setOpen(false),
+    onClick: () => closeOnActivation && setOpen(false),
     // This should be placed on the trigger in case the element is disabled
-    onMouseEnter: onMouseEnter
+    onMouseEnter
   };
 
   function getChildEventHandlers(childProps) {
-    var eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
-    var eventHandlers = {};
-    eventHandlerFunctions.forEach(function (functionName) {
-      eventHandlers[functionName] = function (evt) {
+    const eventHandlerFunctions = ['onFocus', 'onBlur', 'onClick', 'onMouseEnter'];
+    const eventHandlers = {};
+    eventHandlerFunctions.forEach(functionName => {
+      eventHandlers[functionName] = evt => {
         triggerProps[functionName]();
 
         if (childProps !== null && childProps !== void 0 && childProps[functionName]) {
@@ -102,9 +85,9 @@ function Tooltip(_ref) {
   }
 
   useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
-  useEffect(function () {
+  useEffect(() => {
     if (containerRef !== null && containerRef.current) {
-      var interactiveContent = getInteractiveContent(containerRef.current);
+      const interactiveContent = getInteractiveContent(containerRef.current);
 
       if (!interactiveContent) {
         setOpen(false);
@@ -113,16 +96,18 @@ function Tooltip(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(Popover, _extends({}, rest, {
     align: align,
-    className: cx("".concat(prefix, "--tooltip"), customClassName),
+    className: cx(`${prefix}--tooltip`, customClassName),
     dropShadow: false,
     highContrast: true,
     onKeyDown: onKeyDown,
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, triggerProps), getChildEventHandlers(child.props))) : null, /*#__PURE__*/React__default.createElement(PopoverContent, {
+  }), child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, { ...triggerProps,
+    ...getChildEventHandlers(child.props)
+  }) : null, /*#__PURE__*/React__default.createElement(PopoverContent, {
     "aria-hidden": "true",
-    className: "".concat(prefix, "--tooltip-content"),
+    className: `${prefix}--tooltip-content`,
     id: id,
     ref: tooltipRef,
     role: "tooltip"

package/es/components/TreeView/TreeNode.js

@@ -5,7 +5,7 @@
  * 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 { 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';
@@ -15,53 +15,56 @@ 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) {
+  let {
+    active,
+    children,
+    className,
+    depth,
+    disabled,
+    isExpanded,
+    label,
+    onNodeFocusEvent,
+    onSelect: onNodeSelect,
+    onToggle,
+    onTreeSelect,
+    renderIcon: Icon,
+    selected,
+    value,
+    ...rest
+  } = _ref;
+  const {
+    current: id
+  } = useRef(rest.id || uniqueId());
+  const [expanded, setExpanded] = useState(isExpanded);
+  const currentNode = useRef(null);
+  const currentNodeLabel = useRef(null);
+  const prefix = usePrefix();
+  const nodesWithProps = React__default.Children.map(children, node => {
     if ( /*#__PURE__*/React__default.isValidElement(node)) {
       return /*#__PURE__*/React__default.cloneElement(node, {
-        active: active,
+        active,
         depth: depth + 1,
-        disabled: disabled,
-        onTreeSelect: onTreeSelect,
-        selected: selected,
+        disabled,
+        onTreeSelect,
+        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));
+  const isActive = active === id;
+  const isSelected = selected.includes(id);
+  const treeNodeClasses = cx(className, `${prefix}--tree-node`, {
+    [`${prefix}--tree-node--active`]: isActive,
+    [`${prefix}--tree-node--disabled`]: disabled,
+    [`${prefix}--tree-node--selected`]: isSelected,
+    [`${prefix}--tree-node--with-icon`]: Icon,
+    [`${prefix}--tree-leaf-node`]: !children,
+    [`${prefix}--tree-parent-node`]: children
+  });
+  const toggleClasses = cx(`${prefix}--tree-parent-node__toggle-icon`, {
+    [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded
+  });
 
   function handleToggleClick(event) {
     if (disabled) {
@@ -69,10 +72,10 @@ function TreeNode(_ref) {
     }
 
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
-      id: id,
+      id,
       isExpanded: !expanded,
-      label: label,
-      value: value
+      label,
+      value
     });
     setExpanded(!expanded);
   }
@@ -84,14 +87,14 @@ function TreeNode(_ref) {
       var _rest$onClick;
 
       onTreeSelect === null || onTreeSelect === void 0 ? void 0 : onTreeSelect(event, {
-        id: id,
-        label: label,
-        value: value
+        id,
+        label,
+        value
       });
       onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(event, {
-        id: id,
-        label: label,
-        value: value
+        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);
     }
@@ -109,12 +112,12 @@ function TreeNode(_ref) {
     }
 
     if (match(event, ArrowLeft)) {
-      var findParentTreeNode = function findParentTreeNode(node) {
-        if (node.classList.contains("".concat(prefix, "--tree-parent-node"))) {
+      const findParentTreeNode = node => {
+        if (node.classList.contains(`${prefix}--tree-parent-node`)) {
           return node;
         }
 
-        if (node.classList.contains("".concat(prefix, "--tree"))) {
+        if (node.classList.contains(`${prefix}--tree`)) {
           return null;
         }
 
@@ -123,10 +126,10 @@ function TreeNode(_ref) {
 
       if (children && expanded) {
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
-          id: id,
+          id,
           isExpanded: false,
-          label: label,
-          value: value
+          label,
+          value
         });
         setExpanded(false);
       } else {
@@ -149,10 +152,10 @@ function TreeNode(_ref) {
         currentNode.current.lastChild.firstChild.focus();
       } else {
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, {
-          id: id,
+          id,
           isExpanded: true,
-          label: label,
-          value: value
+          label,
+          value
         });
         setExpanded(true);
       }
@@ -182,26 +185,32 @@ function TreeNode(_ref) {
     onNodeFocusEvent === null || onNodeFocusEvent === void 0 ? void 0 : onNodeFocusEvent(event);
   }
 
-  useEffect(function () {
+  useEffect(() => {
     /**
      * Negative margin shifts node to align with the left side boundary of the
      * tree
      * Dynamically calculate padding to recreate tree node indentation
+     * - parent nodes with icon have (depth + 1rem + depth * 0.5) left padding
      * - 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
+     * - leaf nodes have (depth + 2rem + depth * 0.5) left padding with icons (because of
      *   reduced spacing between the expand icon and the node icon + label)
      */
-    var calcOffset = function calcOffset() {
-      // parent node
+    const calcOffset = () => {
+      // parent node with icon
+      if (children && Icon) {
+        return depth + 1 + depth * 0.5;
+      } // parent node without icon
+
+
       if (children) {
         return depth + 1;
       } // leaf node with icon
 
 
       if (Icon) {
-        return depth + 2;
+        return depth + 2 + depth * 0.5;
       } // leaf node without icon
 
 
@@ -209,22 +218,33 @@ function TreeNode(_ref) {
     };
 
     if (currentNodeLabel.current) {
-      currentNodeLabel.current.style.marginLeft = "-".concat(calcOffset(), "rem");
-      currentNodeLabel.current.style.paddingLeft = "".concat(calcOffset(), "rem");
+      currentNodeLabel.current.style.marginLeft = `-${calcOffset()}rem`;
+      currentNodeLabel.current.style.paddingLeft = `${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));
+  const treeNodeProps = { ...rest,
+    ['aria-current']: isActive || null,
+    ['aria-selected']: disabled ? null : isSelected,
+    ['aria-disabled']: disabled,
+    className: treeNodeClasses,
+    id,
+    onBlur: handleFocusEvent,
+    onClick: handleClick,
+    onFocus: handleFocusEvent,
+    onKeyDown: handleKeyDown,
+    ref: currentNode,
+    role: 'treeitem'
+  };
 
   if (!children) {
     return /*#__PURE__*/React__default.createElement("li", treeNodeProps, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--tree-node__label"),
+      className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
-      className: "".concat(prefix, "--tree-node__icon")
+      className: `${prefix}--tree-node__icon`
     }), label));
   }
 
@@ -234,21 +254,21 @@ function TreeNode(_ref) {
     React__default.createElement("li", _extends({}, treeNodeProps, {
       "aria-expanded": !!expanded
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--tree-node__label"),
+      className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(prefix, "--tree-parent-node__toggle"),
+      className: `${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")
+      className: `${prefix}--tree-node__label__details`
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
-      className: "".concat(prefix, "--tree-node__icon")
+      className: `${prefix}--tree-node__icon`
     }), label)), expanded && /*#__PURE__*/React__default.createElement("ul", {
       role: "group",
-      className: "".concat(prefix, "--tree-node__children")
+      className: `${prefix}--tree-node__children`
     }, nodesWithProps))
   );
 }

package/es/components/TreeView/TreeView.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -14,69 +14,60 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowUp, ArrowDown, Home, End } 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,
-      _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 = _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];
+  let {
+    active: prespecifiedActive,
+    children,
+    className,
+    hideLabel = false,
+    label,
+    multiselect = false,
+    onSelect,
+    selected: preselected = [],
+    size = 'sm',
+    ...rest
+  } = _ref;
+  const {
+    current: treeId
+  } = useRef(rest.id || uniqueId());
+  const prefix = usePrefix();
+  const treeClasses = cx(className, `${prefix}--tree`, {
+    [`${prefix}--tree--${size}`]: size !== 'default'
+  });
+  const treeRootRef = useRef(null);
+  const treeWalker = useRef(treeRootRef === null || treeRootRef === void 0 ? void 0 : treeRootRef.current);
+  const [selected, setSelected] = useState(preselected);
+  const [active, setActive] = 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, _objectSpread2({
-        activeNodeId: nodeId
-      }, node));
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
+        activeNodeId: nodeId,
+        ...node
+      });
     }
   }
 
@@ -84,8 +75,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;
@@ -96,25 +89,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.Children.map(children, function (node) {
-    var sharedNodeProps = {
-      active: active,
+  let focusTarget = false;
+  const nodesWithProps = React__default.Children.map(children, node => {
+    const sharedNodeProps = {
+      active,
       depth: 0,
       onNodeFocusEvent: handleFocusEvent,
       onTreeSelect: handleTreeSelect,
-      selected: selected,
+      selected,
       tabIndex: !node.props.disabled && -1 || null
     };
 
@@ -140,7 +135,7 @@ function TreeView(_ref) {
     }
 
     treeWalker.current.currentNode = event.target;
-    var nextFocusNode;
+    let nextFocusNode;
 
     if (match(event, ArrowUp)) {
       nextFocusNode = treeWalker.current.previousNode();
@@ -153,7 +148,7 @@ function TreeView(_ref) {
     if (matches(event, [Home, End, {
       code: 'KeyA'
     }])) {
-      var nodeIds = [];
+      const nodeIds = [];
 
       if (matches(event, [Home, End])) {
         if (multiselect && event.shiftKey && event.ctrlKey && !treeWalker.current.currentNode.getAttribute('aria-disabled')) {
@@ -199,16 +194,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);
   }
 
-  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"))) {
+  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;
         }
 
@@ -217,27 +210,23 @@ function TreeView(_ref) {
     });
   }, [prefix]);
 
-  var useActiveAndSelectedOnMount = function useActiveAndSelectedOnMount() {
-    return useEffect(function () {
-      if (preselected.length) {
-        setSelected(preselected);
-      }
+  const useActiveAndSelectedOnMount = () => 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.createElement("label", {
-      id: labelId,
-      className: "".concat(prefix, "--label")
-    }, label);
-  };
+  const labelId = `${treeId}__label`;
+
+  const TreeLabel = () => !hideLabel && /*#__PURE__*/React__default.createElement("label", {
+    id: labelId,
+    className: `${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,