@carbon/react 1.85.0-rc.0 → 1.85.0

package/es/components/Slider/Slider.js

@@ -6,7 +6,7 @@
  */
 
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ArrowDown, ArrowLeft, ArrowUp, ArrowRight, Enter } from '../../internal/keyboard/keys.js';
@@ -24,7 +24,7 @@ import { throttle } from '../../node_modules/es-toolkit/dist/compat/function/thr
 import { Text } from '../Text/Text.js';
 
 const ThumbWrapper = ({
-  hasTooltip = false,
+  hasTooltip,
   className,
   style,
   children,
@@ -50,24 +50,6 @@ const ThumbWrapper = ({
     );
   }
 };
-ThumbWrapper.propTypes = {
-  /**
-   * The thumb node itself.
-   */
-  children: PropTypes.node,
-  /**
-   * CSS wrapper class names.
-   */
-  className: PropTypes.string,
-  /**
-   * Should the thumb show a tooltip with the current value?
-   */
-  hasTooltip: PropTypes.bool.isRequired,
-  /**
-   * Percentage offset for the select thumb value.
-   */
-  style: PropTypes.object
-};
 const translationIds = {
   autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
 };
@@ -86,27 +68,18 @@ function translateWithId(translationId, translationState) {
   return '';
 }
 const defaultFormatLabel = (value, label) => {
-  return typeof label === 'function' ? label(value) : `${value}${label}`;
+  return `${value}${label ?? ''}`;
 };
 
+// TODO: Assuming a 16ms throttle corresponds to 60 FPS, should it be halved,
+// since many systems can handle 120 FPS? If it doesn't correspond to 60 FPS,
+// what does it correspond to?
 /**
- * Minimum time between processed "drag" events.
- */
-const EVENT_THROTTLE = 16; // ms
-
-/**
- * Event types that trigger "drags".
+ * Minimum time between processed "drag" events in milliseconds.
  */
+const EVENT_THROTTLE = 16;
 const DRAG_EVENT_TYPES = new Set(['mousemove', 'touchmove']);
-
-/**
- * Event types that trigger a "drag" to stop.
- */
 const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
-
-/**
- * Distinguish two handles by lower and upper positions.
- */
 var HandlePosition = /*#__PURE__*/function (HandlePosition) {
   HandlePosition["LOWER"] = "lower";
   HandlePosition["UPPER"] = "upper";
@@ -123,7 +96,7 @@ class Slider extends PureComponent {
       needsOnRelease: false,
       isValid: true,
       isValidUpper: true,
-      activeHandle: null,
+      activeHandle: undefined,
       correctedValue: null,
       correctedPosition: null,
       isRtl: false
@@ -134,12 +107,15 @@ class Slider extends PureComponent {
     _defineProperty(this, "element", null);
     _defineProperty(this, "inputId", '');
     _defineProperty(this, "track", void 0);
+    _defineProperty(this, "handleDrag", event => {
+      if (event instanceof globalThis.MouseEvent || event instanceof globalThis.TouchEvent) {
+        this.onDrag(event);
+      }
+    });
     /**
      * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
      * started on somewhere other than the thumb without a corresponding "move"
      * event.
-     *
-     * @param {Event} evt The event.
      */
     _defineProperty(this, "onDragStart", evt => {
       // Do nothing if component is disabled
@@ -153,23 +129,23 @@ class Slider extends PureComponent {
       // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#notes
       evt.preventDefault();
 
-      // Register drag stop handlers
+      // Add drag stop handlers
       DRAG_STOP_EVENT_TYPES.forEach(element => {
         this.element?.ownerDocument.addEventListener(element, this.onDragStop);
       });
 
-      // Register drag handlers
+      // Add drag handlers
       DRAG_EVENT_TYPES.forEach(element => {
-        this.element?.ownerDocument.addEventListener(element, this.onDrag);
+        this.element?.ownerDocument.addEventListener(element, this.handleDrag);
       });
-      const clientX = this.getClientXFromEvent(evt);
+      const clientX = this.getClientXFromEvent(evt.nativeEvent);
       let activeHandle;
       if (this.hasTwoHandles()) {
         if (evt.target == this.thumbRef.current) {
           activeHandle = HandlePosition.LOWER;
         } else if (evt.target == this.thumbRefUpper.current) {
           activeHandle = HandlePosition.UPPER;
-        } else {
+        } else if (clientX) {
           const distanceToLower = this.calcDistanceToHandle(HandlePosition.LOWER, clientX);
           const distanceToUpper = this.calcDistanceToHandle(HandlePosition.UPPER, clientX);
           if (distanceToLower <= distanceToUpper) {
@@ -199,10 +175,10 @@ class Slider extends PureComponent {
 
       // Perform first recalculation since we probably didn't click exactly in the
       // middle of the thumb.
-      this.onDrag(evt, activeHandle);
+      this.onDrag(evt.nativeEvent, activeHandle);
     });
     /**
-     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+     * Removes "drag" and "drag stop" event handlers and calls sets the flag
      * indicating that the `onRelease` callback should be called.
      */
     _defineProperty(this, "onDragStop", () => {
@@ -218,7 +194,7 @@ class Slider extends PureComponent {
 
       // Remove drag handlers
       DRAG_EVENT_TYPES.forEach(element => {
-        this.element?.ownerDocument.removeEventListener(element, this.onDrag);
+        this.element?.ownerDocument.removeEventListener(element, this.handleDrag);
       });
 
       // Set needsOnRelease flag so event fires on next update.
@@ -232,12 +208,11 @@ class Slider extends PureComponent {
      * Handles a "drag" event by recalculating the value/thumb and setting state
      * accordingly.
      *
-     * @param {Event} evt The event.
-     * @param activeHandle
-     *   The first drag event call, we may have an explicit activeHandle value,
-     *   which is to be used before state is used.
+     * @param evt The event.
+     * @param activeHandle The first drag event call, we may have an explicit
+     * activeHandle value, which is to be used before state is used.
      */
-    _defineProperty(this, "_onDrag", (evt, activeHandle = null) => {
+    _defineProperty(this, "_onDrag", (evt, activeHandle) => {
       activeHandle = activeHandle ?? this.state.activeHandle;
       // Do nothing if component is disabled, or we have no event.
       if (this.props.disabled || this.props.readOnly || !evt) {
@@ -281,8 +256,6 @@ class Slider extends PureComponent {
     /**
      * Handles a `keydown` event by recalculating the value/thumb and setting
      * state accordingly.
-     *
-     * @param {Event} evt The event.
      */
     _defineProperty(this, "onKeyDown", evt => {
       // Do nothing if component is disabled, or we don't have a valid event
@@ -345,8 +318,6 @@ class Slider extends PureComponent {
      * Provides the two-way binding for the input field of the Slider. It also
      * Handles a change to the input field by recalculating the value/thumb and
      * setting state accordingly.
-     *
-     * @param {Event} evt The event.
      */
     _defineProperty(this, "onChange", evt => {
       // Do nothing if component is disabled
@@ -396,8 +367,6 @@ class Slider extends PureComponent {
     /**
      * Checks for validity of input value after clicking out of the input. It also
      * Handles state change to isValid state.
-     *
-     * @param {Event} evt The event.
      */
     _defineProperty(this, "onBlur", evt => {
       // Do nothing if we have no valid event, target, or value
@@ -410,12 +379,12 @@ class Slider extends PureComponent {
       this.processNewInputValue(evt.target);
       this.props.onBlur?.({
         value: targetValue,
-        handlePosition: evt.target?.dataset?.handlePosition
+        handlePosition: evt.target.dataset.handlePosition
       });
     });
     _defineProperty(this, "onInputKeyDown", evt => {
       // Do nothing if component is disabled, or we don't have a valid event.
-      if (this.props.disabled || this.props.readOnly) {
+      if (this.props.disabled || this.props.readOnly || !(evt.target instanceof HTMLInputElement)) {
         return;
       }
 
@@ -438,7 +407,7 @@ class Slider extends PureComponent {
       // When there are two handles, we'll also have the data-handle-position
       // attribute to consider the other value before settling on the validity to
       // set.
-      const handlePosition = input?.dataset?.handlePosition;
+      const handlePosition = input.dataset.handlePosition;
       if (handlePosition === HandlePosition.LOWER) {
         this.setState({
           isValid: validity
@@ -482,7 +451,7 @@ class Slider extends PureComponent {
         });
         if (handlePosition) {
           this.setValueLeftForHandle(handlePosition, {
-            value,
+            value: this.nearestStepValue(value),
             left
           });
         } else {
@@ -511,7 +480,7 @@ class Slider extends PureComponent {
       if (clientX) {
         const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
         return leftOffset / width;
-      } else if (value !== null && value !== undefined && range) {
+      } else if (value !== null && typeof value !== 'undefined' && range) {
         // Prevent NaN calculation if the range is 0.
         return range === 0 ? 0 : (value - this.props.min) / range;
       }
@@ -719,15 +688,15 @@ class Slider extends PureComponent {
     _defineProperty(this, "getHandleBoundingRect", handle => {
       let boundingRect;
       if (handle === HandlePosition.LOWER) {
-        boundingRect = this?.thumbRef?.current?.getBoundingClientRect();
+        boundingRect = this.thumbRef.current?.getBoundingClientRect();
       } else {
-        boundingRect = this?.thumbRefUpper?.current?.getBoundingClientRect();
+        boundingRect = this.thumbRefUpper.current?.getBoundingClientRect();
       }
       return boundingRect ?? new DOMRect();
     });
-    this.thumbRef = /*#__PURE__*/React.createRef();
-    this.thumbRefUpper = /*#__PURE__*/React.createRef();
-    this.filledTrackRef = /*#__PURE__*/React.createRef();
+    this.thumbRef = /*#__PURE__*/createRef();
+    this.thumbRefUpper = /*#__PURE__*/createRef();
+    this.filledTrackRef = /*#__PURE__*/createRef();
   }
 
   /**
@@ -829,7 +798,7 @@ class Slider extends PureComponent {
       value: this.props.value,
       useRawValue: true
     }));
-    if (this.props.unstable_valueUpper !== undefined) {
+    if (typeof this.props.unstable_valueUpper !== 'undefined') {
       const {
         value: valueUpper,
         left: leftUpper
@@ -870,7 +839,7 @@ class Slider extends PureComponent {
     return clientX;
   }
   hasTwoHandles() {
-    return this.state.valueUpper !== undefined;
+    return typeof this.state.valueUpper !== 'undefined';
   }
 
   // syncs invalid state and prop
@@ -879,49 +848,17 @@ class Slider extends PureComponent {
       isValid,
       isValidUpper
     } = state;
-    let derivedState = {};
+    const derivedState = {};
 
     // Will override state in favor of invalid prop
     if (props.invalid === true) {
-      if (isValid === true) {
-        derivedState = {
-          ...derivedState,
-          isValid: false
-        };
-      }
-      if (isValid === true) {
-        derivedState = {
-          ...derivedState,
-          isValid: false
-        };
-      }
-      if (isValidUpper === true) {
-        derivedState = {
-          ...derivedState,
-          isValidUpper: false
-        };
-      }
+      if (isValid === true) derivedState.isValid = false;
+      if (isValidUpper === true) derivedState.isValidUpper = false;
     } else if (props.invalid === false) {
-      if (isValid === false) {
-        derivedState = {
-          ...derivedState,
-          isValid: true
-        };
-      }
-      if (isValid === false) {
-        derivedState = {
-          ...derivedState,
-          isValid: true
-        };
-      }
-      if (isValidUpper === false) {
-        derivedState = {
-          ...derivedState,
-          isValidUpper: true
-        };
-      }
+      if (isValid === false) derivedState.isValid = true;
+      if (isValidUpper === false) derivedState.isValidUpper = true;
     }
-    return Object.entries(derivedState).length > 0 ? derivedState : null;
+    return Object.keys(derivedState).length ? derivedState : null;
   }
   render() {
     var _Fragment, _Fragment2, _Fragment3, _Fragment4;
@@ -930,15 +867,22 @@ class Slider extends PureComponent {
       unstable_ariaLabelInputUpper: ariaLabelInputUpper,
       className,
       hideTextInput = false,
-      id = this.inputId = this.inputId || `__carbon-slider_${Math.random().toString(36).substr(2)}`,
+      id = this.inputId = this.inputId ||
+      // TODO:
+      // 1. Why isn't `inputId` just set to this value instead of an empty
+      //    string?
+      // 2. Why this value instead of something else, like
+      //    `crypto.randomUUID()` or `useId()`?
+      `__carbon-slider_${Math.random().toString(36).substr(2)}`,
       min,
-      minLabel = '',
+      minLabel,
       max,
-      maxLabel = '',
+      maxLabel,
       formatLabel = defaultFormatLabel,
       labelText,
       hideLabel,
       step = 1,
+      // TODO: Other properties are deleted below. Why isn't this one?
       stepMultiplier: _stepMultiplier,
       inputType = 'number',
       invalidText,
@@ -966,8 +910,12 @@ class Slider extends PureComponent {
       correctedPosition,
       isRtl
     } = this.state;
-    const showWarning = !readOnly && warn || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
-    const showWarningUpper = !readOnly && warn || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
+    const showWarning = !readOnly && warn ||
+    // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
+    typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
+    const showWarningUpper = !readOnly && warn ||
+    // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
+    typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
     return /*#__PURE__*/React.createElement(PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {
@@ -1077,14 +1025,14 @@ class Slider extends PureComponent {
       }, other), /*#__PURE__*/React.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
-        label: `${formatLabel(value, '')}`,
+        label: formatLabel(value, undefined),
         align: "top"
       }, lowerThumbWrapperProps), /*#__PURE__*/React.createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
         id: twoHandles ? undefined : id,
         tabIndex: readOnly || disabled ? undefined : 0,
-        "aria-valuetext": `${formatLabel(value, '')}`,
+        "aria-valuetext": formatLabel(value, undefined),
         "aria-valuemax": twoHandles ? valueUpper : max,
         "aria-valuemin": min,
         "aria-valuenow": value,
@@ -1105,7 +1053,7 @@ class Slider extends PureComponent {
       }))) : undefined)), twoHandles ? /*#__PURE__*/React.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
-        label: `${formatLabel(valueUpper || 0, '')}`,
+        label: formatLabel(valueUpper ?? 0, undefined),
         align: "top"
       }, upperThumbWrapperProps), /*#__PURE__*/React.createElement("div", {
         className: upperThumbClasses,
@@ -1180,7 +1128,9 @@ class Slider extends PureComponent {
     });
   }
 }
-_defineProperty(Slider, "propTypes", {
+_defineProperty(Slider, "contextType", FeatureFlagContext);
+_defineProperty(Slider, "translationIds", Object.values(translationIds));
+Slider.propTypes = {
   /**
    * The `ariaLabel` for the `<input>`.
    */
@@ -1263,7 +1213,7 @@ _defineProperty(Slider, "propTypes", {
    */
   onChange: PropTypes.func,
   /**
-   * Provide an optional function to be called when a key is pressed in the number input
+   * Provide an optional function to be called when a key is pressed in the number input.
    */
   onInputKeyUp: PropTypes.func,
   /**
@@ -1318,8 +1268,6 @@ _defineProperty(Slider, "propTypes", {
    * Provide the text that is displayed when the Slider is in a warn state
    */
   warnText: PropTypes.node
-});
-_defineProperty(Slider, "contextType", FeatureFlagContext);
-Slider.translationIds = Object.values(translationIds);
+};
 
 export { Slider as default };

package/es/components/Tabs/usePressable.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type RefObject } from 'react';
+type UsePressableState = {
+    longPress: boolean;
+};
+type UsePressableOptions = {
+    onPress?: (state: UsePressableState) => void;
+    onPressIn?: () => void;
+    onPressOut?: (state: UsePressableState) => void;
+    onLongPress?: () => void;
+    delayLongPressMs?: number;
+};
+export declare const usePressable: (ref: RefObject<HTMLElement | null>, { onPress, onPressIn, onPressOut, onLongPress, delayLongPressMs, }?: UsePressableOptions) => void;
+export {};

package/es/components/Tabs/usePressable.js

@@ -7,26 +7,13 @@
 
 import { useRef, useState, useEffect } from 'react';
 
-/* istanbul ignore file */
-
-/**
- * @param {React.RefObject<HTMLElement | null>} ref
- *
- * @param {{
- *   onPress?(state: { longPress: boolean }): void,
- *   onPressIn?(): void,
- *   onPressOut?(): void,
- *   onLongPress?(): void,
- *   delayLongPressMs?: number,
- * }} options
- */
-function usePressable(ref, {
+const usePressable = (ref, {
   onPress,
   onPressIn,
   onPressOut,
   onLongPress,
   delayLongPressMs = 500
-} = {}) {
+} = {}) => {
   const savedOnPress = useRef(onPress);
   const savedOnPressIn = useRef(onPressIn);
   const savedOnPressOut = useRef(onPressOut);
@@ -49,55 +36,54 @@ function usePressable(ref, {
     savedOnLongPress.current = onLongPress;
   }, [onLongPress]);
   useEffect(() => {
-    const {
-      current: element
-    } = ref;
+    const element = ref.current;
+    if (!element) return;
 
     // Fired when a pointer becomes active buttons state.
-    function onPointerDown(event) {
+    const onPointerDown = event => {
       setPendingLongPress(true);
       savedOnPressIn.current?.();
       event.preventDefault();
-    }
+    };
 
     // Fired when a pointer is no longer active buttons state.
-    function onPointerUp() {
+    const onPointerUp = () => {
       setPendingLongPress(false);
       setLongPress(false);
       savedOnPressOut.current?.(state.current);
-    }
+    };
 
     // A browser fires this event if it concludes the pointer
     // will no longer be able to generate events (for example
     // the related device is deactivated).
-    function onPointerCancel() {
+    const onPointerCancel = () => {
       setPendingLongPress(false);
       setLongPress(false);
-      savedOnPressOut.current?.();
+      savedOnPressOut.current?.(state.current);
       state.current.longPress = false;
-    }
+    };
 
     // Fired when a pointer is moved out of the hit test
     // boundaries of an element. For pen devices, this event
     // is fired when the stylus leaves the hover range
     // detectable by the digitizer.
-    function onPointerLeave() {
+    const onPointerLeave = () => {
       setPendingLongPress(false);
       setLongPress(false);
-      savedOnPressOut.current?.();
+      savedOnPressOut.current?.(state.current);
       state.current.longPress = false;
-    }
-    function onClick() {
+    };
+    const onClick = () => {
       setLongPress(false);
       setPendingLongPress(false);
       savedOnPress.current?.(state.current);
       state.current.longPress = false;
-    }
+    };
 
     // Certain devices treat long press events as context menu triggers
-    function onContextMenu(event) {
+    const onContextMenu = event => {
       event.preventDefault();
-    }
+    };
     element.addEventListener('pointerdown', onPointerDown);
     element.addEventListener('pointerup', onPointerUp);
     element.addEventListener('pointercancel', onPointerCancel);
@@ -130,6 +116,6 @@ function usePressable(ref, {
       return savedOnLongPress.current?.();
     }
   }, [longPress]);
-}
+};
 
 export { usePressable };

package/es/components/Tooltip/Tooltip.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Popover, PopoverAlignment } from '../Popover';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 interface TooltipBaseProps {
@@ -15,7 +15,7 @@ interface TooltipBaseProps {
     /**
      * Pass in the child to which the tooltip will be applied
      */
-    children?: React.ReactElement<any>;
+    children?: React.ReactElement<JSX.IntrinsicElements[keyof JSX.IntrinsicElements]>;
     /**
      * Specify an optional className to be applied to the container node
      */

package/es/components/Tooltip/Tooltip.js

@@ -55,7 +55,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
 
   // An `aria-label` takes precedence over `aria-describedby`, but when it's
   // needed and the user doesn't specify one, the fallback `id` is used.
-  const labelledBy = hasAriaLabel ? null : hasLabel ? ariaLabelledBy ?? id : undefined;
+  const labelledBy = hasAriaLabel ? undefined : hasLabel ? ariaLabelledBy ?? id : undefined;
 
   // If `aria-label` is present, use any provided `aria-describedby`.
   // If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
@@ -175,7 +175,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
     open: open
   }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React.cloneElement(child, {
+  }, typeof child !== 'undefined' ? /*#__PURE__*/React.cloneElement(child, {
     ...triggerProps,
     ...getChildEventHandlers(child.props)
   }) : null), /*#__PURE__*/React.createElement(PopoverContent, {

package/es/components/TreeView/TreeNode.d.ts

@@ -78,6 +78,17 @@ export type TreeNodeProps = {
      * Optional: The URL the TreeNode is linking to
      */
     href?: string;
+    /**
+     *
+     * Specify how the trigger should align with the tooltip when text is truncated
+     */
+    align?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, 'onSelect'>;
 declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
@@ -152,5 +163,16 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
      * Optional: The URL the TreeNode is linking to
      */
     href?: string;
+    /**
+     *
+     * Specify how the trigger should align with the tooltip when text is truncated
+     */
+    align?: "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-end" | "left-start" | "right-end" | "right-start";
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
 } & Omit<React.LiHTMLAttributes<HTMLElement>, "onSelect"> & React.RefAttributes<HTMLElement>>;
 export default TreeNode;