@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/Toggletip/index.js

@@ -31,12 +31,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  */
 
 function ToggletipLabel(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'span' : _ref$as,
-      children = _ref.children,
-      customClassName = _ref.className;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--toggletip-label"), customClassName);
+  let {
+    as: BaseComponent = 'span',
+    children,
+    className: customClassName
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--toggletip-label`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, {
     className: className
   }, children);
@@ -62,7 +63,7 @@ ToggletipLabel.propTypes = {
 }; // Used to coordinate accessibility props between button and content along with
 // the actions to open and close the toggletip
 
-var ToggletipContext = /*#__PURE__*/React__default["default"].createContext();
+const ToggletipContext = /*#__PURE__*/React__default["default"].createContext();
 
 function useToggletip() {
   return React.useContext(ToggletipContext);
@@ -75,38 +76,36 @@ function useToggletip() {
 
 
 function Toggletip(_ref2) {
-  var align = _ref2.align,
-      as = _ref2.as,
-      customClassName = _ref2.className,
-      children = _ref2.children,
-      _ref2$defaultOpen = _ref2.defaultOpen,
-      defaultOpen = _ref2$defaultOpen === void 0 ? false : _ref2$defaultOpen;
-  var ref = React.useRef();
-
-  var _useState = React.useState(defaultOpen),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var prefix = usePrefix.usePrefix();
-  var id = useId.useId();
-  var className = cx__default["default"]("".concat(prefix, "--toggletip"), customClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggletip--open"), open));
-  var actions = {
-    toggle: function toggle() {
+  let {
+    align,
+    as,
+    className: customClassName,
+    children,
+    defaultOpen = false
+  } = _ref2;
+  const ref = React.useRef();
+  const [open, setOpen] = React.useState(defaultOpen);
+  const prefix = usePrefix.usePrefix();
+  const id = useId.useId();
+  const className = cx__default["default"](`${prefix}--toggletip`, customClassName, {
+    [`${prefix}--toggletip--open`]: open
+  });
+  const actions = {
+    toggle: () => {
       setOpen(!open);
     },
-    close: function close() {
+    close: () => {
       setOpen(false);
     }
   };
-  var value = {
+  const value = {
     buttonProps: {
       'aria-expanded': open,
       'aria-controls': id,
       onClick: actions.toggle
     },
     contentProps: {
-      id: id
+      id
     }
   };
 
@@ -114,7 +113,7 @@ function Toggletip(_ref2) {
     if (open && match.match(event, keys.Escape)) {
       actions.close(); // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
 
-      var button = ref.current.children[0];
+      const button = ref.current.children[0];
 
       if (button && button.type === 'button') {
         button.focus();
@@ -135,12 +134,12 @@ function Toggletip(_ref2) {
   } // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
 
 
-  useEvent.useWindowEvent('blur', function () {
+  useEvent.useWindowEvent('blur', () => {
     if (open) {
       actions.close();
     }
   });
-  useEvent.useWindowEvent('click', function (event) {
+  useEvent.useWindowEvent('click', event => {
     if (open && !ref.current.contains(event.target)) {
       actions.close();
     }
@@ -195,13 +194,14 @@ Toggletip.propTypes = {
  */
 
 function ToggletipButton(_ref3) {
-  var children = _ref3.children,
-      customClassName = _ref3.className,
-      _ref3$label = _ref3.label,
-      label = _ref3$label === void 0 ? 'Show information' : _ref3$label;
-  var toggletip = useToggletip();
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--toggletip-button"), customClassName);
+  let {
+    children,
+    className: customClassName,
+    label = 'Show information'
+  } = _ref3;
+  const toggletip = useToggletip();
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--toggletip-button`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, toggletip.buttonProps, {
     "aria-label": label,
     type: "button",
@@ -233,14 +233,16 @@ ToggletipButton.propTypes = {
  */
 
 function ToggletipContent(_ref4) {
-  var children = _ref4.children,
-      customClassName = _ref4.className;
-  var toggletip = useToggletip();
-  var prefix = usePrefix.usePrefix();
+  let {
+    children,
+    className: customClassName
+  } = _ref4;
+  const toggletip = useToggletip();
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
     className: customClassName
   }, toggletip.contentProps), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--toggletip-content")
+    className: `${prefix}--toggletip-content`
   }, children));
 }
 
@@ -262,10 +264,12 @@ ToggletipContent.propTypes = {
  */
 
 function ToggletipActions(_ref5) {
-  var children = _ref5.children,
-      customClassName = _ref5.className;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--toggletip-actions"), customClassName);
+  let {
+    children,
+    className: customClassName
+  } = _ref5;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--toggletip-actions`, customClassName);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, children);

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -26,29 +26,22 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["align", "className", "children", "definition", "defaultOpen", "id", "openOnHover", "tooltipText", "triggerClassName"];
-
-var DefinitionTooltip = function DefinitionTooltip(_ref) {
-  var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'bottom-left' : _ref$align,
-      className = _ref.className,
-      children = _ref.children,
-      definition = _ref.definition,
-      _ref$defaultOpen = _ref.defaultOpen,
-      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-      id = _ref.id,
-      openOnHover = _ref.openOnHover,
-      tooltipText = _ref.tooltipText,
-      triggerClassName = _ref.triggerClassName,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var _useState = React.useState(defaultOpen),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
-
-  var prefix = usePrefix.usePrefix();
-  var tooltipId = useId.useFallbackId(id);
+const DefinitionTooltip = _ref => {
+  let {
+    align = 'bottom-left',
+    className,
+    children,
+    definition,
+    defaultOpen = false,
+    id,
+    openOnHover,
+    tooltipText,
+    triggerClassName,
+    ...rest
+  } = _ref;
+  const [isOpen, setOpen] = React.useState(defaultOpen);
+  const prefix = usePrefix.usePrefix();
+  const tooltipId = useId.useFallbackId(id);
 
   function onKeyDown(event) {
     if (isOpen && match.match(event, keys.Escape)) {
@@ -62,29 +55,29 @@ var DefinitionTooltip = function DefinitionTooltip(_ref) {
     className: className,
     dropShadow: false,
     highContrast: true,
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: () => {
       setOpen(false);
     },
-    onMouseEnter: function onMouseEnter() {
+    onMouseEnter: () => {
       openOnHover ? setOpen(true) : null;
     },
     open: isOpen
   }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"]("".concat(prefix, "--definition-term"), triggerClassName),
+    className: cx__default["default"](`${prefix}--definition-term`, triggerClassName),
     "aria-controls": tooltipId,
     "aria-expanded": isOpen,
-    onBlur: function onBlur() {
+    onBlur: () => {
       setOpen(false);
     },
-    onClick: function onClick() {
+    onClick: () => {
       setOpen(!isOpen);
     },
     onKeyDown: onKeyDown,
     type: "button"
   }), children), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
-    className: "".concat(prefix, "--definition-tooltip"),
+    className: `${prefix}--definition-tooltip`,
     id: tooltipId
-  }, tooltipText !== null && tooltipText !== void 0 ? tooltipText : definition));
+  }, tooltipText ?? definition));
 };
 
 DefinitionTooltip.propTypes = {

package/lib/components/Tooltip/Tooltip.js

@@ -27,55 +27,38 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var containerRef = React.useRef(null);
-  var tooltipRef = React.useRef(null);
-
-  var _useDelayedState = useDelayedState.useDelayedState(defaultOpen),
-      _useDelayedState2 = _rollupPluginBabelHelpers.slicedToArray(_useDelayedState, 2),
-      open = _useDelayedState2[0],
-      setOpen = _useDelayedState2[1];
-
-  var id = useId.useId('tooltip');
-  var prefix = usePrefix.usePrefix();
-  var child = React__default["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 = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+  const [open, setOpen] = useDelayedState.useDelayedState(defaultOpen);
+  const id = useId.useId('tooltip');
+  const prefix = usePrefix.usePrefix();
+  const child = React__default["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]) {
@@ -112,9 +95,9 @@ function Tooltip(_ref) {
   }
 
   useNoInteractiveChildren.useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (containerRef !== null && containerRef.current) {
-      var interactiveContent = useNoInteractiveChildren.getInteractiveContent(containerRef.current);
+      const interactiveContent = useNoInteractiveChildren.getInteractiveContent(containerRef.current);
 
       if (!interactiveContent) {
         setOpen(false);
@@ -123,16 +106,18 @@ function Tooltip(_ref) {
   });
   return /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
     align: align,
-    className: cx__default["default"]("".concat(prefix, "--tooltip"), customClassName),
+    className: cx__default["default"](`${prefix}--tooltip`, customClassName),
     dropShadow: false,
     highContrast: true,
     onKeyDown: onKeyDown,
     onMouseLeave: onMouseLeave,
     open: open,
     ref: containerRef
-  }), child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, triggerProps), getChildEventHandlers(child.props))) : null, /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
+  }), child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, { ...triggerProps,
+    ...getChildEventHandlers(child.props)
+  }) : null, /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
     "aria-hidden": "true",
-    className: "".concat(prefix, "--tooltip-content"),
+    className: `${prefix}--tooltip-content`,
     id: id,
     ref: tooltipRef,
     role: "tooltip"

package/lib/components/TreeView/TreeNode.js

@@ -25,53 +25,56 @@ 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) {
+  let {
+    active,
+    children,
+    className,
+    depth,
+    disabled,
+    isExpanded,
+    label,
+    onNodeFocusEvent,
+    onSelect: onNodeSelect,
+    onToggle,
+    onTreeSelect,
+    renderIcon: Icon,
+    selected,
+    value,
+    ...rest
+  } = _ref;
+  const {
+    current: id
+  } = React.useRef(rest.id || uniqueId["default"]());
+  const [expanded, setExpanded] = React.useState(isExpanded);
+  const currentNode = React.useRef(null);
+  const currentNodeLabel = React.useRef(null);
+  const prefix = usePrefix.usePrefix();
+  const nodesWithProps = React__default["default"].Children.map(children, node => {
     if ( /*#__PURE__*/React__default["default"].isValidElement(node)) {
       return /*#__PURE__*/React__default["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__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));
+  const isActive = active === id;
+  const isSelected = selected.includes(id);
+  const treeNodeClasses = cx__default["default"](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__default["default"](`${prefix}--tree-parent-node__toggle-icon`, {
+    [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded
+  });
 
   function handleToggleClick(event) {
     if (disabled) {
@@ -79,10 +82,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);
   }
@@ -94,14 +97,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);
     }
@@ -119,12 +122,12 @@ function TreeNode(_ref) {
     }
 
     if (match.match(event, keys.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;
         }
 
@@ -133,10 +136,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 {
@@ -159,10 +162,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);
       }
@@ -192,26 +195,32 @@ function TreeNode(_ref) {
     onNodeFocusEvent === null || onNodeFocusEvent === void 0 ? void 0 : onNodeFocusEvent(event);
   }
 
-  React.useEffect(function () {
+  React.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
 
 
@@ -219,22 +228,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 = _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));
+  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["default"].createElement("li", treeNodeProps, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--tree-node__label"),
+      className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: "".concat(prefix, "--tree-node__icon")
+      className: `${prefix}--tree-node__icon`
     }), label));
   }
 
@@ -244,21 +264,21 @@ function TreeNode(_ref) {
     React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, treeNodeProps, {
       "aria-expanded": !!expanded
     }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--tree-node__label"),
+      className: `${prefix}--tree-node__label`,
       ref: currentNodeLabel
     }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(prefix, "--tree-parent-node__toggle"),
+      className: `${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")
+      className: `${prefix}--tree-node__label__details`
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
-      className: "".concat(prefix, "--tree-node__icon")
+      className: `${prefix}--tree-node__icon`
     }), label)), expanded && /*#__PURE__*/React__default["default"].createElement("ul", {
       role: "group",
-      className: "".concat(prefix, "--tree-node__children")
+      className: `${prefix}--tree-node__children`
     }, nodesWithProps))
   );
 }