primereact 10.9.1 → 10.9.3

package/treetable/treetable.esm.js

@@ -3,18 +3,18 @@ import * as React from 'react';
 import PrimeReact, { FilterMatchMode, PrimeReactContext, ariaLabel, localeOption, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { ObjectUtils, classNames, DomHandler, IconUtils } from 'primereact/utils';
-import { useMergeProps, useEventListener, useUnmountEffect, useUpdateEffect, useMountEffect } from 'primereact/hooks';
+import { useMergeProps, useUpdateEffect, useMountEffect, useEventListener, useUnmountEffect } from 'primereact/hooks';
 import { ArrowDownIcon } from 'primereact/icons/arrowdown';
 import { ArrowUpIcon } from 'primereact/icons/arrowup';
 import { SpinnerIcon } from 'primereact/icons/spinner';
 import { Paginator } from 'primereact/paginator';
 import { CheckIcon } from 'primereact/icons/check';
+import { Tooltip } from 'primereact/tooltip';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
 import { MinusIcon } from 'primereact/icons/minus';
 import { Ripple } from 'primereact/ripple';
 import { OverlayService } from 'primereact/overlayservice';
-import { Tooltip } from 'primereact/tooltip';
 import { SortAltIcon } from 'primereact/icons/sortalt';
 import { SortAmountDownIcon } from 'primereact/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt';
@@ -328,7 +328,7 @@ var classes$1 = {
     return {
       'p-highlight': isSelected(),
       'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
-      'p-row-odd': props.rowIndex % 2 !== 0
+      'p-row-odd': parseInt(String(props.rowIndex).split('_').pop(), 10) % 2 !== 0
     };
   },
   rowCheckbox: function rowCheckbox(_ref6) {
@@ -456,8 +456,228 @@ var TreeTableBase = ComponentBase.extend({
   }
 });
 
+var classes = {
+  box: 'p-checkbox-box',
+  input: 'p-checkbox-input',
+  icon: 'p-checkbox-icon',
+  root: function root(_ref) {
+    var props = _ref.props,
+      checked = _ref.checked,
+      context = _ref.context;
+    return classNames('p-checkbox p-component', {
+      'p-highlight': checked,
+      'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
+      'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+    });
+  }
+};
+var CheckboxBase = ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'Checkbox',
+    autoFocus: false,
+    checked: false,
+    className: null,
+    disabled: false,
+    falseValue: false,
+    icon: null,
+    id: null,
+    inputId: null,
+    inputRef: null,
+    invalid: false,
+    variant: null,
+    name: null,
+    onChange: null,
+    onContextMenu: null,
+    onMouseDown: null,
+    readOnly: false,
+    required: false,
+    style: null,
+    tabIndex: null,
+    tooltip: null,
+    tooltipOptions: null,
+    trueValue: true,
+    value: null,
+    children: undefined
+  },
+  css: {
+    classes: classes
+  }
+});
+
 function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
+  var context = React.useContext(PrimeReactContext);
+  var props = CheckboxBase.getProps(inProps, context);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedState = _React$useState2[0],
+    setFocusedState = _React$useState2[1];
+  var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
+      props: props,
+      state: {
+        focused: focusedState
+      },
+      context: {
+        checked: props.checked === props.trueValue,
+        disabled: props.disabled
+      }
+    }),
+    ptm = _CheckboxBase$setMeta.ptm,
+    cx = _CheckboxBase$setMeta.cx,
+    isUnstyled = _CheckboxBase$setMeta.isUnstyled;
+  useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
+    name: 'checkbox'
+  });
+  var elementRef = React.useRef(null);
+  var inputRef = React.useRef(props.inputRef);
+  var isChecked = function isChecked() {
+    return props.checked === props.trueValue;
+  };
+  var _onChange = function onChange(event) {
+    if (props.disabled || props.readonly) {
+      return;
+    }
+    if (props.onChange) {
+      var _props$onChange;
+      var _checked = isChecked();
+      var value = _checked ? props.falseValue : props.trueValue;
+      var eventData = {
+        originalEvent: event,
+        value: props.value,
+        checked: value,
+        stopPropagation: function stopPropagation() {
+          event === null || event === void 0 || event.stopPropagation();
+        },
+        preventDefault: function preventDefault() {
+          event === null || event === void 0 || event.preventDefault();
+        },
+        target: {
+          type: 'checkbox',
+          name: props.name,
+          id: props.id,
+          value: props.value,
+          checked: value
+        }
+      };
+      props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
+
+      // do not continue if the user defined click wants to prevent
+      if (event.defaultPrevented) {
+        return;
+      }
+      DomHandler.focus(inputRef.current);
+    }
+  };
+  var _onFocus = function onFocus(event) {
+    var _props$onFocus;
+    setFocusedState(true);
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
+  };
+  var _onBlur = function onBlur(event) {
+    var _props$onBlur;
+    setFocusedState(false);
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
+      getElement: function getElement() {
+        return elementRef.current;
+      },
+      getInput: function getInput() {
+        return inputRef.current;
+      }
+    };
+  });
+  React.useEffect(function () {
+    ObjectUtils.combinedRefs(inputRef, props.inputRef);
+  }, [inputRef, props.inputRef]);
+  useUpdateEffect(function () {
+    inputRef.current.checked = isChecked();
+  }, [props.checked, props.trueValue]);
+  useMountEffect(function () {
+    if (props.autoFocus) {
+      DomHandler.focus(inputRef.current, props.autoFocus);
+    }
+  });
+  var checked = isChecked();
+  var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+  var otherProps = CheckboxBase.getOtherProps(props);
+  var rootProps = mergeProps({
+    id: props.id,
+    className: classNames(props.className, cx('root', {
+      checked: checked,
+      context: context
+    })),
+    style: props.style,
+    'data-p-highlight': checked,
+    'data-p-disabled': props.disabled,
+    onContextMenu: props.onContextMenu,
+    onMouseDown: props.onMouseDown
+  }, otherProps, ptm('root'));
+  var createInputElement = function createInputElement() {
+    var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+    var inputProps = mergeProps(_objectSpread$6({
+      id: props.inputId,
+      type: 'checkbox',
+      className: cx('input'),
+      name: props.name,
+      tabIndex: props.tabIndex,
+      onFocus: function onFocus(e) {
+        return _onFocus(e);
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur(e);
+      },
+      onChange: function onChange(e) {
+        return _onChange(e);
+      },
+      disabled: props.disabled,
+      readOnly: props.readOnly,
+      required: props.required,
+      'aria-invalid': props.invalid,
+      checked: checked
+    }, ariaProps), ptm('input'));
+    return /*#__PURE__*/React.createElement("input", _extends({
+      ref: inputRef
+    }, inputProps));
+  };
+  var createBoxElement = function createBoxElement() {
+    var iconProps = mergeProps({
+      className: cx('icon')
+    }, ptm('icon'));
+    var boxProps = mergeProps({
+      className: cx('box', {
+        checked: checked
+      }),
+      'data-p-highlight': checked,
+      'data-p-disabled': props.disabled
+    }, ptm('box'));
+    var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
+    var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$6({}, iconProps), {
+      props: props,
+      checked: checked
+    });
+    return /*#__PURE__*/React.createElement("div", boxProps, checkboxIcon);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    ref: elementRef
+  }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    target: elementRef,
+    content: props.tooltip,
+    pt: ptm('tooltip')
+  }, props.tooltipOptions)));
+}));
+Checkbox.displayName = 'Checkbox';
+
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TreeTableBodyCell = function TreeTableBodyCell(props) {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -518,7 +738,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
   };
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
-    return _objectSpread$6({
+    return _objectSpread$5({
       originalEvent: event
     }, params);
   };
@@ -700,226 +920,6 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
 };
 TreeTableBodyCell.displayName = 'TreeTableBodyCell';
 
-var classes = {
-  box: 'p-checkbox-box',
-  input: 'p-checkbox-input',
-  icon: 'p-checkbox-icon',
-  root: function root(_ref) {
-    var props = _ref.props,
-      checked = _ref.checked,
-      context = _ref.context;
-    return classNames('p-checkbox p-component', {
-      'p-highlight': checked,
-      'p-disabled': props.disabled,
-      'p-invalid': props.invalid,
-      'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
-    });
-  }
-};
-var CheckboxBase = ComponentBase.extend({
-  defaultProps: {
-    __TYPE: 'Checkbox',
-    autoFocus: false,
-    checked: false,
-    className: null,
-    disabled: false,
-    falseValue: false,
-    icon: null,
-    id: null,
-    inputId: null,
-    inputRef: null,
-    invalid: false,
-    variant: null,
-    name: null,
-    onChange: null,
-    onContextMenu: null,
-    onMouseDown: null,
-    readOnly: false,
-    required: false,
-    style: null,
-    tabIndex: null,
-    tooltip: null,
-    tooltipOptions: null,
-    trueValue: true,
-    value: null,
-    children: undefined
-  },
-  css: {
-    classes: classes
-  }
-});
-
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var mergeProps = useMergeProps();
-  var context = React.useContext(PrimeReactContext);
-  var props = CheckboxBase.getProps(inProps, context);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
-  var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
-      props: props,
-      state: {
-        focused: focusedState
-      },
-      context: {
-        checked: props.checked === props.trueValue,
-        disabled: props.disabled
-      }
-    }),
-    ptm = _CheckboxBase$setMeta.ptm,
-    cx = _CheckboxBase$setMeta.cx,
-    isUnstyled = _CheckboxBase$setMeta.isUnstyled;
-  useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
-    name: 'checkbox'
-  });
-  var elementRef = React.useRef(null);
-  var inputRef = React.useRef(props.inputRef);
-  var isChecked = function isChecked() {
-    return props.checked === props.trueValue;
-  };
-  var _onChange = function onChange(event) {
-    if (props.disabled || props.readonly) {
-      return;
-    }
-    if (props.onChange) {
-      var _props$onChange;
-      var _checked = isChecked();
-      var value = _checked ? props.falseValue : props.trueValue;
-      var eventData = {
-        originalEvent: event,
-        value: props.value,
-        checked: value,
-        stopPropagation: function stopPropagation() {
-          event === null || event === void 0 || event.stopPropagation();
-        },
-        preventDefault: function preventDefault() {
-          event === null || event === void 0 || event.preventDefault();
-        },
-        target: {
-          type: 'checkbox',
-          name: props.name,
-          id: props.id,
-          value: props.value,
-          checked: value
-        }
-      };
-      props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
-
-      // do not continue if the user defined click wants to prevent
-      if (event.defaultPrevented) {
-        return;
-      }
-      DomHandler.focus(inputRef.current);
-    }
-  };
-  var _onFocus = function onFocus(event) {
-    var _props$onFocus;
-    setFocusedState(true);
-    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
-  };
-  var _onBlur = function onBlur(event) {
-    var _props$onBlur;
-    setFocusedState(false);
-    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, event);
-  };
-  React.useImperativeHandle(ref, function () {
-    return {
-      props: props,
-      focus: function focus() {
-        return DomHandler.focus(inputRef.current);
-      },
-      getElement: function getElement() {
-        return elementRef.current;
-      },
-      getInput: function getInput() {
-        return inputRef.current;
-      }
-    };
-  });
-  React.useEffect(function () {
-    ObjectUtils.combinedRefs(inputRef, props.inputRef);
-  }, [inputRef, props.inputRef]);
-  useUpdateEffect(function () {
-    inputRef.current.checked = isChecked();
-  }, [props.checked, props.trueValue]);
-  useMountEffect(function () {
-    if (props.autoFocus) {
-      DomHandler.focus(inputRef.current, props.autoFocus);
-    }
-  });
-  var checked = isChecked();
-  var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-  var otherProps = CheckboxBase.getOtherProps(props);
-  var rootProps = mergeProps({
-    id: props.id,
-    className: classNames(props.className, cx('root', {
-      checked: checked,
-      context: context
-    })),
-    style: props.style,
-    'data-p-highlight': checked,
-    'data-p-disabled': props.disabled,
-    onContextMenu: props.onContextMenu,
-    onMouseDown: props.onMouseDown
-  }, otherProps, ptm('root'));
-  var createInputElement = function createInputElement() {
-    var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
-    var inputProps = mergeProps(_objectSpread$5({
-      id: props.inputId,
-      type: 'checkbox',
-      className: cx('input'),
-      name: props.name,
-      tabIndex: props.tabIndex,
-      onFocus: function onFocus(e) {
-        return _onFocus(e);
-      },
-      onBlur: function onBlur(e) {
-        return _onBlur(e);
-      },
-      onChange: function onChange(e) {
-        return _onChange(e);
-      },
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      required: props.required,
-      'aria-invalid': props.invalid,
-      checked: checked
-    }, ariaProps), ptm('input'));
-    return /*#__PURE__*/React.createElement("input", _extends({
-      ref: inputRef
-    }, inputProps));
-  };
-  var createBoxElement = function createBoxElement() {
-    var iconProps = mergeProps({
-      className: cx('icon')
-    }, ptm('icon'));
-    var boxProps = mergeProps({
-      className: cx('box', {
-        checked: checked
-      }),
-      'data-p-highlight': checked,
-      'data-p-disabled': props.disabled
-    }, ptm('box'));
-    var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
-    var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$5({}, iconProps), {
-      props: props,
-      checked: checked
-    });
-    return /*#__PURE__*/React.createElement("div", boxProps, checkboxIcon);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    ref: elementRef
-  }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    target: elementRef,
-    content: props.tooltip,
-    pt: ptm('tooltip')
-  }, props.tooltipOptions)));
-}));
-Checkbox.displayName = 'Checkbox';
-
 function _createForOfIteratorHelper$3(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$3(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); }
 function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -2774,28 +2774,27 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
     multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
   };
-  var sortSingle = function sortSingle(data) {
-    return _sortNodes(data);
-  };
-  var _sortNodes = function sortNodes(data) {
+  var _sortSingle = function sortSingle(_ref) {
+    var data = _ref.data,
+      field = _ref.field,
+      order = _ref.order;
     var value = _toConsumableArray(data);
     if (columnSortable.current && columnSortFunction.current) {
       value = columnSortFunction.current({
         data: data,
-        field: getSortField(),
-        order: getSortOrder()
+        field: field,
+        order: order
       });
     } else {
       // performance optimization to prevent resolving field data in each loop
       var lookupMap = new Map();
-      var sortField = getSortField();
       var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
       var _iterator = _createForOfIteratorHelper(data),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var node = _step.value;
-          lookupMap.set(node.data, ObjectUtils.resolveFieldData(node.data, sortField));
+          lookupMap.set(node.data, ObjectUtils.resolveFieldData(node.data, field));
         }
       } catch (err) {
         _iterator.e(err);
@@ -2805,24 +2804,24 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       value.sort(function (node1, node2) {
         var value1 = lookupMap.get(node1.data);
         var value2 = lookupMap.get(node2.data);
-        return compareValuesOnSort(value1, value2, comparator, getSortOrder());
+        return compareValuesOnSort(value1, value2, comparator, order);
       });
       for (var i = 0; i < value.length; i++) {
         if (value[i].children && value[i].children.length) {
-          value[i].children = _sortNodes(value[i].children);
+          value[i].children = _sortSingle({
+            data: value[i].children,
+            field: field,
+            order: order
+          });
         }
       }
     }
     return value;
   };
-  var sortMultiple = function sortMultiple(data) {
-    var multiSortMeta = getMultiSortMeta();
-    if (multiSortMeta) {
-      return _sortMultipleNodes(data, multiSortMeta);
-    }
-    return data;
-  };
-  var _sortMultipleNodes = function sortMultipleNodes(data, multiSortMeta) {
+  var _sortMultiple = function sortMultiple(_ref2) {
+    var data = _ref2.data,
+      _ref2$multiSortMeta = _ref2.multiSortMeta,
+      multiSortMeta = _ref2$multiSortMeta === void 0 ? [] : _ref2$multiSortMeta;
     var value = _toConsumableArray(data);
     var comparator = ObjectUtils.localeComparator(context && context.locale || PrimeReact.locale);
     value.sort(function (node1, node2) {
@@ -2830,7 +2829,10 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     });
     for (var i = 0; i < value.length; i++) {
       if (value[i].children && value[i].children.length) {
-        value[i].children = _sortMultipleNodes(value[i].children, multiSortMeta);
+        value[i].children = _sortMultiple({
+          data: value[i].children,
+          multiSortMeta: multiSortMeta
+        });
       }
     }
     return value;
@@ -2889,10 +2891,10 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     filters = filters || props.filters;
     var cloned = {};
     if (filters) {
-      Object.entries(filters).forEach(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-          prop = _ref2[0],
-          value = _ref2[1];
+      Object.entries(filters).forEach(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          prop = _ref4[0],
+          value = _ref4[1];
         cloned[prop] = value;
       });
     } else {
@@ -3391,12 +3393,12 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }
     }
   };
-  var isFilterMatched = function isFilterMatched(node, _ref3) {
-    var filterField = _ref3.filterField,
-      filterValue = _ref3.filterValue,
-      filterConstraint = _ref3.filterConstraint,
-      isStrictMode = _ref3.isStrictMode,
-      options = _ref3.options;
+  var isFilterMatched = function isFilterMatched(node, _ref5) {
+    var filterField = _ref5.filterField,
+      filterValue = _ref5.filterValue,
+      filterConstraint = _ref5.filterConstraint,
+      isStrictMode = _ref5.isStrictMode,
+      options = _ref5.options;
     var matched = false;
     var dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
     if (filterConstraint(dataFieldValue, filterValue, props.filterLocale, options)) {
@@ -3421,6 +3423,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       if (data && data.length) {
         var filters = localState && localState.filters || getFilters();
         var sortField = localState && localState.sortField || getSortField();
+        var sortOrder = localState && localState.sortOrder || getSortOrder();
         var multiSortMeta = localState && localState.multiSortMeta || getMultiSortMeta();
         var columns = getColumns();
         var sortColumn = columns.find(function (col) {
@@ -3435,9 +3438,16 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         }
         if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
           if (props.sortMode === 'single') {
-            data = sortSingle(data);
+            data = _sortSingle({
+              data: data,
+              field: sortField,
+              order: sortOrder
+            });
           } else if (props.sortMode === 'multiple') {
-            data = sortMultiple(data);
+            data = _sortMultiple({
+              data: data,
+              multiSortMeta: multiSortMeta
+            });
           }
         }
       }