rsuite 6.1.2 → 6.2.0

package/cjs/Slider/useDrag.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DragProps {
     tooltip?: boolean;
     disabled?: boolean;

package/cjs/Slider/useDrag.js

@@ -25,8 +25,7 @@ const useDrag = props => {
 
   // Release the move event
   const releaseMoves = (0, _react.useCallback)(() => {
-    var _moveTracker$current;
-    (_moveTracker$current = moveTracker.current) === null || _moveTracker$current === void 0 || _moveTracker$current.releaseMoves();
+    moveTracker.current?.releaseMoves();
     moveTracker.current = null;
   }, []);
   const setTooltipPosition = (0, _react.useCallback)(() => {
@@ -39,18 +38,15 @@ const useDrag = props => {
     }
   }, [tooltip]);
   const handleDragMove = (0, _hooks.useEventCallback)((_deltaX, _deltaY, event) => {
-    var _moveTracker$current2;
-    if ((_moveTracker$current2 = moveTracker.current) !== null && _moveTracker$current2 !== void 0 && _moveTracker$current2.isDragging()) {
-      var _rootRef$current;
-      onDragMove === null || onDragMove === void 0 || onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);
+    if (moveTracker.current?.isDragging()) {
+      onDragMove?.(event, rootRef.current?.dataset);
       setTooltipPosition();
     }
   });
   const handleDragEnd = (0, _hooks.useEventCallback)(event => {
-    var _rootRef$current2;
     setActive(false);
     releaseMoves();
-    onDragEnd === null || onDragEnd === void 0 || onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);
+    onDragEnd?.(event, rootRef.current?.dataset);
   });
   const getMouseMoveTracker = (0, _react.useCallback)(() => {
     return moveTracker.current || new _PointerMoveTracker.default(document.body, {
@@ -60,15 +56,14 @@ const useDrag = props => {
     });
   }, [handleDragEnd, handleDragMove]);
   const onMoveStart = (0, _hooks.useEventCallback)(event => {
-    var _moveTracker$current3, _rootRef$current3;
     if (disabled) {
       return;
     }
     moveTracker.current = getMouseMoveTracker();
-    (_moveTracker$current3 = moveTracker.current) === null || _moveTracker$current3 === void 0 || _moveTracker$current3.captureMoves(event);
-    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 || _rootRef$current3.focus();
+    moveTracker.current?.captureMoves(event);
+    rootRef.current?.focus();
     setActive(true);
-    onDragStart === null || onDragStart === void 0 || onDragStart(event);
+    onDragStart?.(event);
   });
   const onMouseEnter = (0, _hooks.useEventCallback)(() => {
     setTooltipPosition();

package/cjs/Slider/utils.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const precisionMath: (value: any) => number;
-export declare function checkValue<T extends number | undefined | null>(value: T, min: number, max: number): number | T;
+export declare function checkValue<T extends number | undefined | null>(value: T, min: number, max: number): number | (T & undefined);
 export declare function getPosition(e: React.MouseEvent | React.TouchEvent): {
     pageX: number;
     pageY: number;

package/cjs/Slider/utils.js

@@ -20,7 +20,6 @@ function checkValue(value, min, max) {
   return value;
 }
 function getPosition(e) {
-  var _event, _event2;
   let event = 'touches' in e ? e.touches[0] : e;
 
   // For touchend event, we need to use `changedTouches` instead of `touches`
@@ -28,7 +27,7 @@ function getPosition(e) {
     event = e.changedTouches[0];
   }
   return {
-    pageX: ((_event = event) === null || _event === void 0 ? void 0 : _event.pageX) || 0,
-    pageY: ((_event2 = event) === null || _event2 === void 0 ? void 0 : _event2.pageY) || 0
+    pageX: event?.pageX || 0,
+    pageY: event?.pageY || 0
   };
 }

package/cjs/Steps/StepItem.js

@@ -22,7 +22,6 @@ const STEP_STATUS_ICON = {
  * @see https://rsuitejs.com/components/steps
  */
 const StepItem = (0, _utils.forwardRef)((props, ref) => {
-  var _STEP_STATUS_ICON$sta;
   const {
     as: Component = 'div',
     className,
@@ -48,7 +47,7 @@ const StepItem = (0, _utils.forwardRef)((props, ref) => {
     className: prefix('icon', {
       [`icon-${status}`]: status
     })
-  }, status ? (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber : stepNumber);
+  }, status ? STEP_STATUS_ICON[status] ?? stepNumber : stepNumber);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     className: classes,

package/cjs/Table/Table.d.ts

@@ -12,11 +12,11 @@ export interface CellProps<Row extends RowDataType> extends Omit<TableCellProps<
  *
  * @see https://rsuitejs.com/components/table/
  */
-declare const Table: (<Row extends RowDataType<any>, Key extends RowKeyType>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement) & {
+declare const Table: (<Row extends RowDataType, Key extends RowKeyType>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement) & {
     /**
      * The `Table.Cell` component  is used to display data in a table cell.
      */
-    Cell: <Row_1 extends RowDataType<any>, Key_1 extends RowKeyType>(props: import("rsuite-table/lib/Cell").InnerCellProps<Row_1, Key_1> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    Cell: <Row extends RowDataType, Key extends RowKeyType>(props: import("rsuite-table/lib/Cell").InnerCellProps<Row, Key> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
     /**
      * The `Table.Column` component  is used to define a column in a table.
      */
@@ -24,7 +24,7 @@ declare const Table: (<Row extends RowDataType<any>, Key extends RowKeyType>(pro
     /**
      * The `Table.HeaderCell` component  is used to define a header cell in a table.
      */
-    HeaderCell: <Row_2 extends RowDataType<any>, Key_2 extends RowKeyType>(props: import("rsuite-table").HeaderCellProps<Row_2, Key_2> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    HeaderCell: <Row extends RowDataType, Key extends RowKeyType>(props: import("rsuite-table").HeaderCellProps<Row, Key> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
     /**
      * The `Table.ColumnGroup` component  is used to define a column group in a table.
      */

package/cjs/Tabs/Tabs.js

@@ -17,7 +17,7 @@ var _hooks = require("../internals/hooks");
  */
 
 function getFocusableTabs(tablist) {
-  const tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');
+  const tabs = tablist?.querySelectorAll('[role=tab]');
   return Array.from(tabs).filter(tab => !(tab.getAttribute('aria-disabled') === 'true'));
 }
 function getFocusedTab(tablist) {
@@ -141,10 +141,9 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
   const tablistRef = _react.default.useRef(null);
   const handleSelect = (0, _hooks.useEventCallback)((eventKey, event) => {
     setActiveKey(eventKey);
-    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
+    onSelect?.(eventKey, event);
   });
   const handleKeyDown = (0, _hooks.useEventCallback)(event => {
-    var _getFocusableTabs;
     const target = event.target;
     if (target.getAttribute('role') !== 'tab') {
       return;
@@ -166,7 +165,7 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
         event.preventDefault();
         break;
       case 'Home':
-        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];
+        item = getFocusableTabs(tablistRef.current)?.[0];
         event.preventDefault();
         break;
       case 'End':

package/cjs/TimePicker/TimePicker.js

@@ -17,12 +17,12 @@ const TimePicker = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useCustom)('TimePicker', props);
   const locale = getLocale('DateTimeFormats');
   const defaultRanges = (0, _react.useMemo)(() => [{
-    label: locale === null || locale === void 0 ? void 0 : locale.now,
+    label: locale?.now,
     value: () => new Date()
   }], [locale]);
   return /*#__PURE__*/_react.default.createElement(_DatePicker.default, (0, _extends2.default)({
     ref: ref,
-    format: locale === null || locale === void 0 ? void 0 : locale.shortTimeFormat,
+    format: locale?.shortTimeFormat,
     ranges: defaultRanges
   }, propsWithDefaults));
 });

package/cjs/Timeline/Timeline.d.ts

@@ -7,6 +7,11 @@ export interface TimelineProps extends BoxProps {
     align?: 'left' | 'right' | 'alternate';
     /** Timeline endless **/
     endless?: boolean;
+    /**
+     * Reverse the order of Timeline items
+     * @version 6.2.0
+     **/
+    reverse?: boolean;
     /**
      * Whether an item is active (with highlighted dot).
      *
@@ -22,7 +27,7 @@ export interface TimelineProps extends BoxProps {
  */
 declare const Timeline: import("../internals/types").InternalRefForwardingComponent<"div", TimelineProps, never> & {
     Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./TimelineItem").TimelineItemProps, never> & Record<string, never>;
-    ACTIVE_FIRST: (index: number) => boolean;
+    ACTIVE_FIRST: (index: number) => index is 0;
     ACTIVE_LAST: (index: number, totalItemsCount: number) => boolean;
 };
 export default Timeline;

package/cjs/Timeline/Timeline.js

@@ -35,6 +35,7 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
     className,
     align = 'left',
     endless,
+    reverse,
     isItemActive = ACTIVE_LAST,
     ...rest
   } = propsWithDefaults;
@@ -43,23 +44,26 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const count = _utils.rch.count(children);
-  const withTime = (0, _some.default)(_react.default.Children.toArray(children), item => {
-    var _item$props;
-    return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;
-  });
+  const withTime = (0, _some.default)(_react.default.Children.toArray(children), item => item?.props?.time);
   const classes = merge(className, withPrefix(`align-${align}`, {
     endless,
-    'with-time': withTime
+    'with-time': withTime,
+    reverse
   }));
+  const childrenArray = _react.default.Children.toArray(children);
+  const orderedChildren = reverse ? [...childrenArray].reverse() : childrenArray;
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes
-  }, rest), _utils.rch.mapCloneElement(children, (_child, index) => ({
-    last: index + 1 === count,
-    INTERNAL_active: isItemActive(index, count),
-    align
-  })));
+  }, rest), orderedChildren.map((child, domIndex) => {
+    const logicalIndex = reverse ? count - 1 - domIndex : domIndex;
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      last: logicalIndex + 1 === count,
+      INTERNAL_active: isItemActive(logicalIndex, count),
+      align
+    });
+  }));
 }, SubcomponentsAndStaticMethods);
 Timeline.displayName = 'Timeline';
 var _default = exports.default = Timeline;

package/cjs/Toggle/Toggle.js

@@ -51,7 +51,7 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix({}));
   const inner = checked ? checkedChildren : unCheckedChildren;
-  const innerLabel = checked ? locale === null || locale === void 0 ? void 0 : locale.on : locale === null || locale === void 0 ? void 0 : locale.off;
+  const innerLabel = checked ? locale?.on : locale?.off;
   const labelId = (0, _hooks.useUniqueId)('rs-label');
   const innerId = inner ? labelId + '-inner' : undefined;
   const labelledby = label ? labelId : innerId;
@@ -64,7 +64,7 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
       checked
     } = e.target;
     setChecked(checked);
-    onChange === null || onChange === void 0 || onChange(checked, e);
+    onChange?.(checked, e);
   });
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, null, inner || innerLabel);

package/cjs/Tree/Tree.js

@@ -71,8 +71,8 @@ const Tree = (0, _utils.forwardRef)((props, ref) => {
   });
   const handleSelect = (0, _hooks.useEventCallback)((nodeData, nextValue, event) => {
     setValue(nextValue);
-    onSelect === null || onSelect === void 0 || onSelect(nodeData, nextValue, event);
-    onChange === null || onChange === void 0 || onChange(nextValue, event);
+    onSelect?.(nodeData, nextValue, event);
+    onChange?.(nextValue, event);
   });
   const treeContext = (0, _react.useMemo)(() => ({
     props: {

package/cjs/Tree/TreeNode.js

@@ -60,43 +60,42 @@ const TreeNode = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const labelStr = (0, _react.useMemo)(() => (0, _utils.stringifyReactNode)(label), [label]);
   const handleExpand = (0, _hooks.useEventCallback)(event => {
-    var _event$nativeEvent, _event$nativeEvent$st;
     // Stop propagation when using custom loading icon
-    event === null || event === void 0 || (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 || (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 || _event$nativeEvent$st.call(_event$nativeEvent);
+    event?.nativeEvent?.stopImmediatePropagation?.();
     event.stopPropagation();
-    onExpand === null || onExpand === void 0 || onExpand(nodeData, expanded);
+    onExpand?.(nodeData, expanded);
   });
   const handleSelect = (0, _hooks.useEventCallback)(event => {
     if (disabled) {
       return;
     }
-    onSelect === null || onSelect === void 0 || onSelect(nodeData, event);
+    onSelect?.(nodeData, event);
   });
   const handleDragStart = (0, _hooks.useEventCallback)(event => {
-    onDragStart === null || onDragStart === void 0 || onDragStart(nodeData, event);
+    onDragStart?.(nodeData, event);
   });
   const handleDragEnter = (0, _hooks.useEventCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
-    onDragEnter === null || onDragEnter === void 0 || onDragEnter(nodeData, event);
+    onDragEnter?.(nodeData, event);
   });
   const handleDragOver = (0, _hooks.useEventCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
-    onDragOver === null || onDragOver === void 0 || onDragOver(nodeData, event);
+    onDragOver?.(nodeData, event);
   });
   const handleDragLeave = (0, _hooks.useEventCallback)(event => {
     event.stopPropagation();
-    onDragLeave === null || onDragLeave === void 0 || onDragLeave(nodeData, event);
+    onDragLeave?.(nodeData, event);
   });
   const handleDragEnd = (0, _hooks.useEventCallback)(event => {
     event.stopPropagation();
-    onDragEnd === null || onDragEnd === void 0 || onDragEnd(nodeData, event);
+    onDragEnd?.(nodeData, event);
   });
   const handleDrop = (0, _hooks.useEventCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
-    onDrop === null || onDrop === void 0 || onDrop(nodeData, event);
+    onDrop?.(nodeData, event);
   });
   const classes = merge(className, withPrefix({
     disabled,
@@ -117,7 +116,7 @@ const TreeNode = (0, _utils.forwardRef)((props, ref) => {
     "aria-disabled": disabled,
     "aria-selected": active,
     "data-layer": layer,
-    "data-key": (nodeData === null || nodeData === void 0 ? void 0 : nodeData.refKey) || '',
+    "data-key": nodeData?.refKey || '',
     title: labelStr,
     className: classes,
     style: styles,

package/cjs/Tree/TreeView.js

@@ -87,7 +87,7 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const handleSearchCallback = (0, _hooks.useEventCallback)((value, _data, event) => {
-    onSearch === null || onSearch === void 0 || onSearch(value, event);
+    onSearch?.(value, event);
   });
   const {
     filteredData,
@@ -108,7 +108,7 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
     if (virtualized) {
       return transformation().filter(n => n.visible);
     }
-    return filteredData.map((dataItem, index) => render === null || render === void 0 ? void 0 : render(dataItem, index, 1)).filter(n => n);
+    return filteredData.map((dataItem, index) => render?.(dataItem, index, 1)).filter(n => n);
   };
   (0, _react.useEffect)(() => {
     setFilteredData(data, keyword);
@@ -167,8 +167,8 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
     const nextValue = nodeData[valueKey];
     const path = (0, _utils2.getPathTowardsItem)(nodeData, item => itemParentMap.get(item[valueKey]));
     setFocusItemValue(nextValue);
-    onSelect === null || onSelect === void 0 || onSelect(nodeData, nextValue, event);
-    onSelectItem === null || onSelectItem === void 0 || onSelectItem(nodeData, path);
+    onSelect?.(nodeData, nextValue, event);
+    onSelectItem?.(nodeData, path);
   });
   const selectActiveItem = (0, _hooks.useEventCallback)(event => {
     if ((0, _isNil.default)(focusItemValue)) return;
@@ -213,7 +213,7 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: prefix('group'),
         role: "group"
-      }, children === null || children === void 0 ? void 0 : children.map((child, i) => renderNode(child, i, layer)), showIndentLine && /*#__PURE__*/_react.default.createElement(_IndentLine.default, null)));
+      }, children?.map((child, i) => renderNode(child, i, layer)), showIndentLine && /*#__PURE__*/_react.default.createElement(_IndentLine.default, null)));
     }
     return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({
       ref: ref => saveTreeNodeRef(ref, node.refKey),

package/cjs/Tree/hooks/useExpandTree.js

@@ -55,7 +55,7 @@ function useExpandTree(data, props) {
       valueKey
     });
     setExpandItemValues(nextExpandItemValues);
-    onExpand === null || onExpand === void 0 || onExpand(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {
+    onExpand?.(nextExpandItemValues, node, (0, _Picker.createConcatChildrenFunction)(node, node[valueKey], {
       valueKey,
       childrenKey
     }));

package/cjs/Tree/hooks/useFlattenTree.js

@@ -91,27 +91,24 @@ function useFlattenTree(data, options) {
       }
       flattenTreeData(node[childrenKey], node, layer + 1);
     });
-    callback === null || callback === void 0 || callback(flattenedNodes.current);
+    callback?.(flattenedNodes.current);
     forceUpdate();
   }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);
   (0, _react.useEffect)(() => {
-    // when data is changed, should clear the flattenedNodes, avoid duplicate keys
     flattenedNodes.current = {};
     seenValues.current.clear();
     flattenTreeData(data);
+    if (multiple) {
+      updateTreeNodeCheckState(value);
+      forceUpdate();
+    }
   }, [data]);
   (0, _react.useEffect)(() => {
     if (multiple) {
       updateTreeNodeCheckState(value);
       forceUpdate();
     }
-
-    /**
-     * Add a dependency on data, because when loading data asynchronously through getChildren,
-     * data may change and the node status needs to be updated.
-     * @see https://github.com/rsuite/rsuite/issues/3973
-     */
-  }, [value, data]);
+  }, [value]);
   return flattenedNodes.current;
 }
 var _default = exports.default = useFlattenTree;

package/cjs/Tree/hooks/useFocusTree.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TreeNode } from '../../internals/Tree/types';
 interface UseFocusTreeProps<T extends TreeNode> {
     filteredData: T[];
@@ -17,7 +16,7 @@ declare function useFocusTree(props: UseFocusTreeProps<TreeNode>): {
     focusTreeFirstNode: (...args: any[]) => any;
     focusItemValue: string | number | null | undefined;
     treeNodesRefs: {};
-    saveTreeNodeRef: (ref: any, refKey?: string | undefined) => void;
+    saveTreeNodeRef: (ref: any, refKey?: string) => void;
     setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<string | number | null | undefined>>;
     onTreeKeydown: (...args: any[]) => any;
 };

package/cjs/Tree/hooks/useFocusTree.js

@@ -65,7 +65,7 @@ function useFocusTree(props) {
     }
     if (focusedValue) {
       setFocusItemValue(focusedValue);
-      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+      onFocused?.(focusedValue);
     }
   });
   const handleLeftArrowEvent = (0, _hooks.useEventCallback)(() => {
@@ -73,13 +73,12 @@ function useFocusTree(props) {
       return;
     }
     const focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);
-    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    const expand = expandItemValues.includes(focusItem?.[valueKey]);
     const onFocusItem = () => {
-      var _focusItem$parent, _focusItem$parent2;
-      const focusedValue = focusItem === null || focusItem === void 0 || (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];
+      const focusedValue = focusItem?.parent?.[valueKey];
       setFocusItemValue(focusedValue);
-      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
-      (0, _utils.focusTreeNode)(focusItem === null || focusItem === void 0 || (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs);
+      onFocused?.(focusedValue);
+      (0, _utils.focusTreeNode)(focusItem?.parent?.refKey, treeNodesRefs);
     };
     (0, _utils.handleLeftArrow)({
       focusItem,
@@ -94,7 +93,7 @@ function useFocusTree(props) {
       return;
     }
     const focusItem = (0, _utils.getActiveItem)(focusItemValue, flattenedNodes, valueKey);
-    const expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    const expand = expandItemValues.includes(focusItem?.[valueKey]);
     const onFocusItem = () => handleFocusItem(_constants.KEY_VALUES.DOWN);
     (0, _utils.handleRightArrow)({
       focusItem,
@@ -109,7 +108,7 @@ function useFocusTree(props) {
     const focusedValue = (0, _utils.focusFirstItem)(focusProps);
     if (focusedValue) {
       setFocusItemValue(focusedValue);
-      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+      onFocused?.(focusedValue);
     }
   });
   const handleEndKey = (0, _hooks.useEventCallback)(() => {
@@ -117,7 +116,7 @@ function useFocusTree(props) {
     const focusedValue = (0, _utils.focusLastItem)(focusProps);
     if (focusedValue) {
       setFocusItemValue(focusedValue);
-      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+      onFocused?.(focusedValue);
     }
   });
   const onTreeKeydown = (0, _hooks.useEventCallback)(event => {
@@ -138,21 +137,20 @@ function useFocusTree(props) {
       container: treeViewRef.current
     });
     if (refKey) {
-      var _flattenedNodesRef$cu;
-      const node = (_flattenedNodesRef$cu = flattenedNodesRef.current) === null || _flattenedNodesRef$cu === void 0 ? void 0 : _flattenedNodesRef$cu[refKey];
+      const node = flattenedNodesRef.current?.[refKey];
       if (node) {
         setFocusItemValue(node[valueKey]);
-        onFocused === null || onFocused === void 0 || onFocused(node[valueKey]);
+        onFocused?.(node[valueKey]);
       }
     }
   }, [onFocused, valueKey]);
   (0, _react.useEffect)(() => {
-    const unregister = register === null || register === void 0 ? void 0 : register({
+    const unregister = register?.({
       focusTreeFirstNode,
       focusTreeActiveNode
     });
     return () => {
-      unregister === null || unregister === void 0 || unregister();
+      unregister?.();
     };
   }, []);
   (0, _react.useEffect)(() => {

package/cjs/Tree/hooks/useTreeDrag.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TREE_NODE_DROP_POSITION } from '../../internals/constants';
 import type { DropData } from '../types';
 interface TreeDragProps {

package/cjs/Tree/hooks/useTreeDrag.js

@@ -65,9 +65,8 @@ function createDragPreview(name, className) {
  * Removes the drag preview element from the DOM.
  */
 function removeDragPreview() {
-  var _dragPreview$parentNo, _dragPreview$parentNo2;
   const dragPreview = document.getElementById('rs-tree-drag-preview');
-  dragPreview === null || dragPreview === void 0 || (_dragPreview$parentNo = dragPreview.parentNode) === null || _dragPreview$parentNo === void 0 || (_dragPreview$parentNo2 = _dragPreview$parentNo.removeChild) === null || _dragPreview$parentNo2 === void 0 || _dragPreview$parentNo2.call(_dragPreview$parentNo, dragPreview);
+  dragPreview?.parentNode?.removeChild?.(dragPreview);
 }
 /**
  * Custom hook for handling tree node dragging.
@@ -106,7 +105,7 @@ function useTreeDrag(props) {
   const getDragNodeKeys = (0, _react.useCallback)(dragNode => {
     let dragNodeKeys = [dragNode[valueKey]];
     const traverse = data => {
-      if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+      if (data?.length > 0) {
         data.forEach(node => {
           dragNodeKeys = dragNodeKeys.concat([node[valueKey]]);
           if (node[childrenKey]) {
@@ -202,12 +201,11 @@ function useTreeDrag(props) {
   }, [createDragTreeDataFunction, dropNodePosition]);
   const handleDragStart = (0, _hooks.useEventCallback)((nodeData, event) => {
     if (draggable) {
-      var _event$dataTransfer;
       const dragMoverNode = createDragPreview((0, _utils.stringifyReactNode)(nodeData[labelKey]), prefix('drag-preview'));
-      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 || _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
+      event.dataTransfer?.setDragImage(dragMoverNode, 0, 0);
       setDragNodeKeys(getDragNodeKeys(nodeData));
       setDragNode(flattenedNodes[nodeData.refKey]);
-      onDragStart === null || onDragStart === void 0 || onDragStart(nodeData, event);
+      onDragStart?.(nodeData, event);
     }
   });
   const handleDragEnter = (0, _hooks.useEventCallback)((nodeData, event) => {
@@ -218,7 +216,7 @@ function useTreeDrag(props) {
       setDragOverNodeKey(nodeData[valueKey]);
       setDropNodePosition(calDropNodePosition(event, treeNodesRefs[nodeData.refKey]));
     }
-    onDragEnter === null || onDragEnter === void 0 || onDragEnter(nodeData, event);
+    onDragEnter?.(nodeData, event);
   });
   const handleDragOver = (0, _hooks.useEventCallback)((nodeData, event) => {
     if (dragNodeKeys.some(d => (0, _utils.shallowEqual)(d, nodeData[valueKey]))) {
@@ -230,24 +228,24 @@ function useTreeDrag(props) {
       if (lastDropNodePosition === dropNodePosition) return;
       setDropNodePosition(lastDropNodePosition);
     }
-    onDragOver === null || onDragOver === void 0 || onDragOver(nodeData, event);
+    onDragOver?.(nodeData, event);
   });
   const handleDragLeave = (0, _hooks.useEventCallback)((nodeData, event) => {
-    onDragLeave === null || onDragLeave === void 0 || onDragLeave(nodeData, event);
+    onDragLeave?.(nodeData, event);
   });
   const handleDragEnd = (0, _hooks.useEventCallback)((nodeData, event) => {
     removeDragPreview();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
-    onDragEnd === null || onDragEnd === void 0 || onDragEnd(nodeData, event);
+    onDragEnd?.(nodeData, event);
   });
   const handleDrop = (0, _hooks.useEventCallback)((nodeData, event) => {
     if (dragNodeKeys.some(d => (0, _utils.shallowEqual)(d, nodeData[valueKey]))) {
       console.error('Cannot drag a node to itself and its children');
     } else {
       const dropData = getDropData(nodeData);
-      onDrop === null || onDrop === void 0 || onDrop(dropData, event);
+      onDrop?.(dropData, event);
     }
     removeDragPreview();
     setDragNode(null);
@@ -263,7 +261,7 @@ function useTreeDrag(props) {
     onDrop: handleDrop
   };
   return {
-    dragNode: dragNode === null || dragNode === void 0 ? void 0 : dragNode.current,
+    dragNode: dragNode?.current,
     dragOverNodeKey,
     dropNodePosition,
     dragEvents

package/cjs/Tree/hooks/useTreeNodeProps.js

@@ -39,7 +39,7 @@ function useTreeNodeProps(props) {
     const {
       visible
     } = nodeData;
-    const draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};
+    const draggingNode = dragNode ?? {};
     const nodeValue = nodeData[valueKey];
     const nodeLabel = nodeData[labelKey];
     const children = nodeData[childrenKey];

package/cjs/Tree/hooks/useTreeSearch.js

@@ -39,21 +39,21 @@ function useTreeSearch(props) {
   }, [childrenKey, labelKey, searchBy]);
 
   // Use search keywords to filter options.
-  const [keyword, setSearchKeyword] = (0, _react.useState)(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
+  const [keyword, setSearchKeyword] = (0, _react.useState)(searchKeyword ?? '');
   const [filteredData, setFilteredData] = (0, _react.useState)(() => filterVisibleData(data, keyword));
   const handleSearch = (searchKeyword, event) => {
     const filteredData = filterVisibleData(data, searchKeyword);
     setFilteredData(filteredData);
     setSearchKeyword(searchKeyword);
     if (event) {
-      callback === null || callback === void 0 || callback(searchKeyword, filteredData, event);
+      callback?.(searchKeyword, filteredData, event);
     }
   };
   (0, _react.useEffect)(() => {
-    handleSearch(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
+    handleSearch(searchKeyword ?? '');
   }, [searchKeyword]);
   (0, _react.useEffect)(() => {
-    setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
+    setSearchKeyword(searchKeyword ?? '');
   }, [searchKeyword, setSearchKeyword]);
   const setVisibleData = (0, _react.useCallback)((data, searchKeyword) => {
     setFilteredData(filterVisibleData(data, searchKeyword));