primereact/treetable/treetable.esm.js

PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import * as React from 'react';
import PrimeReact, { ariaLabel, localeOption, FilterMatchMode, FilterService } from 'primereact/api';
import { useEventListener, useUnmountEffect, useMountEffect } from 'primereact/hooks';
import { Paginator } from 'primereact/paginator';
import { DomHandler, ObjectUtils, classNames } from 'primereact/utils';
import { Ripple } from 'primereact/ripple';
import { OverlayService } from 'primereact/overlayservice';
import { InputText } from 'primereact/inputtext';
import { Tooltip } from 'primereact/tooltip';

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };
  return _extends.apply(this, arguments);
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _arrayLikeToArray$4(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;
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray$4(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}

function _unsupportedIterableToArray$4(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray$4(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$4(o, minLen);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$4(arr) || _nonIterableSpread();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$4(arr, i) || _nonIterableRest();
}

function _readOnlyError(name) {
  throw new TypeError("\"" + name + "\" is read-only");
}

var TreeTableBodyCell = function TreeTableBodyCell(props) {
  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      editingState = _React$useState2[0],
      setEditingState = _React$useState2[1];

  var elementRef = React.useRef(null);
  var keyHelperRef = React.useRef(null);
  var selfClick = React.useRef(false);
  var overlayEventListener = React.useRef(null);
  var tabIndexTimeout = React.useRef(null);

  var _useEventListener = useEventListener({
    type: 'click',
    listener: function listener(e) {
      if (!selfClick.current && isOutsideClicked(e.target)) {
        switchCellToViewMode(e);
      }

      selfClick.current = false;
    }
  }),
      _useEventListener2 = _slicedToArray(_useEventListener, 2),
      bindDocumentClickListener = _useEventListener2[0],
      unbindDocumentClickListener = _useEventListener2[1];

  var onClick = function onClick() {
    if (props.editor && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
      selfClick.current = true;
      setEditingState(true);
      bindDocumentClickListener();

      overlayEventListener.current = function (e) {
        if (!isOutsideClicked(e.target)) {
          selfClick.current = true;
        }
      };

      OverlayService.on('overlay-click', overlayEventListener.current);
    }
  };

  var onKeyDown = function onKeyDown(event) {
    if (event.which === 13 || event.which === 9) {
      switchCellToViewMode(event);
    }
  };

  var isOutsideClicked = function isOutsideClicked(target) {
    return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
  };

  var closeCell = function closeCell() {
    /* When using the 'tab' key, the focus event of the next cell is not called in IE. */
    setTimeout(function () {
      setEditingState(false);
      unbindDocumentClickListener();
      OverlayService.off('overlay-click', overlayEventListener.current);
      _readOnlyError("overlayEventListener");
    }, 1);
  };

  var onEditorFocus = function onEditorFocus(event) {
    onClick();
  };

  var switchCellToViewMode = function switchCellToViewMode(event) {
    if (props.cellEditValidator) {
      var valid = props.cellEditValidator({
        originalEvent: event,
        columnProps: props
      });

      if (valid) {
        closeCell();
      }
    } else {
      closeCell();
    }
  };

  React.useEffect(function () {
    if (elementRef.current && props.editor) {
      clearTimeout(tabIndexTimeout.current);

      if (editingState) {
        var focusable = DomHandler.findSingle(elementRef.current, 'input');

        if (focusable && document.activeElement !== focusable && !focusable.hasAttribute('data-isCellEditing')) {
          focusable.setAttribute('data-isCellEditing', true);
          focusable.focus();
        }

        keyHelperRef.current.tabIndex = -1;
      } else {
        tabIndexTimeout.current = setTimeout(function () {
          if (keyHelperRef.current) {
            keyHelperRef.current.setAttribute('tabindex', 0);
          }
        }, 50);
      }
    }
  });
  useUnmountEffect(function () {
    if (overlayEventListener.current) {
      OverlayService.off('overlay-click', overlayEventListener.current);
      overlayEventListener.current = null;
    }
  });
  var bodyClassName = ObjectUtils.getPropValue(props.bodyClassName, props.node.data, {
    field: props.field,
    rowIndex: props.rowIndex,
    props: props
  });
  var className = classNames(bodyClassName || props.className, {
    'p-editable-column': props.editor,
    'p-cell-editing': props.editor ? editingState : false
  });
  var style = props.bodyStyle || props.style;
  var content;

  if (editingState) {
    if (props.editor) content = ObjectUtils.getJSXElement(props.editor, {
      node: props.node,
      rowData: props.node.data,
      value: ObjectUtils.resolveFieldData(props.node.data, props.field),
      field: props.field,
      rowIndex: props.rowIndex,
      props: props
    });else throw new Error('Editor is not found on column.');
  } else {
    if (props.body) content = ObjectUtils.getJSXElement(props.body, props.node, {
      field: props.field,
      rowIndex: props.rowIndex,
      props: props
    });else content = ObjectUtils.resolveFieldData(props.node.data, props.field);
  }
  /* eslint-disable */


  var editorKeyHelper = props.editor && /*#__PURE__*/React.createElement("a", {
    tabIndex: 0,
    ref: keyHelperRef,
    className: "p-cell-editor-key-helper p-hidden-accessible",
    onFocus: onEditorFocus
  }, /*#__PURE__*/React.createElement("span", null));
  /* eslint-enable */

  return /*#__PURE__*/React.createElement("td", {
    ref: elementRef,
    className: className,
    style: style,
    onClick: onClick,
    onKeyDown: onKeyDown
  }, props.children, editorKeyHelper, content);
};
TreeTableBodyCell.displayName = 'TreeTableBodyCell';

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; }

function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
  var elementRef = React.useRef(null);
  var checkboxRef = React.useRef(null);
  var checkboxBoxRef = React.useRef(null);
  var nodeTouched = React.useRef(false);
  var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;

  var onTogglerClick = function onTogglerClick(event) {
    expanded ? collapse(event) : expand(event);
    event.preventDefault();
    event.stopPropagation();
  };

  var expand = function expand(event) {
    var expandedKeys = props.expandedKeys ? _objectSpread$2({}, props.expandedKeys) : {};
    expandedKeys[props.node.key] = true;
    props.onToggle({
      originalEvent: event,
      value: expandedKeys
    });
    invokeToggleEvents(event, true);
  };

  var collapse = function collapse(event) {
    var expandedKeys = _objectSpread$2({}, props.expandedKeys);

    delete expandedKeys[props.node.key];
    props.onToggle({
      originalEvent: event,
      value: expandedKeys
    });
    invokeToggleEvents(event, false);
  };

  var invokeToggleEvents = function invokeToggleEvents(event, expanded) {
    if (expanded) {
      if (props.onExpand) {
        props.onExpand({
          originalEvent: event,
          node: props.node
        });
      }
    } else {
      if (props.onCollapse) {
        props.onCollapse({
          originalEvent: event,
          node: props.node
        });
      }
    }
  };

  var onClick = function onClick(event) {
    if (props.onRowClick) {
      props.onRowClick(event, props.node);
    }

    nodeTouched.current = false;
  };

  var onTouchEnd = function onTouchEnd() {
    nodeTouched.current = true;
  };

  var onCheckboxChange = function onCheckboxChange(event) {
    var checked = isChecked();
    var selectionKeys = props.selectionKeys ? _objectSpread$2({}, props.selectionKeys) : {};

    if (checked) {
      if (props.propagateSelectionDown) propagateDown(props.node, false, selectionKeys);else delete selectionKeys[props.node.key];

      if (props.propagateSelectionUp && props.onPropagateUp) {
        props.onPropagateUp({
          originalEvent: event,
          check: false,
          selectionKeys: selectionKeys
        });
      }

      if (props.onUnselect) {
        props.onUnselect({
          originalEvent: event,
          node: props.node
        });
      }
    } else {
      if (props.propagateSelectionDown) propagateDown(props.node, true, selectionKeys);else selectionKeys[props.node.key] = {
        checked: true
      };

      if (props.propagateSelectionUp && props.onPropagateUp) {
        props.onPropagateUp({
          originalEvent: event,
          check: true,
          selectionKeys: selectionKeys
        });
      }

      if (props.onSelect) {
        props.onSelect({
          originalEvent: event,
          node: props.node
        });
      }
    }

    if (props.onSelectionChange) {
      props.onSelectionChange({
        originalEvent: event,
        value: selectionKeys
      });
    }

    DomHandler.clearSelection();
  };

  var onCheckboxFocus = function onCheckboxFocus() {
    DomHandler.addClass(checkboxBoxRef.current, 'p-focus');
    DomHandler.addClass(checkboxRef.current, 'p-checkbox-focused');
  };

  var onCheckboxBlur = function onCheckboxBlur() {
    DomHandler.removeClass(checkboxBoxRef.current, 'p-focus');
    DomHandler.removeClass(checkboxRef.current, 'p-checkbox-focused');
  };

  var propagateUp = function propagateUp(event) {
    var check = event.check;
    var selectionKeys = event.selectionKeys;
    var checkedChildCount = 0;
    var childPartialSelected = false;

    var _iterator = _createForOfIteratorHelper$3(props.node.children),
        _step;

    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var child = _step.value;
        if (selectionKeys[child.key] && selectionKeys[child.key].checked) checkedChildCount++;else if (selectionKeys[child.key] && selectionKeys[child.key].partialChecked) childPartialSelected = true;
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }

    if (check && checkedChildCount === props.node.children.length) {
      selectionKeys[props.node.key] = {
        checked: true,
        partialChecked: false
      };
    } else {
      if (!check) {
        delete selectionKeys[props.node.key];
      }

      if (childPartialSelected || checkedChildCount > 0 && checkedChildCount !== props.node.children.length) selectionKeys[props.node.key] = {
        checked: false,
        partialChecked: true
      };else selectionKeys[props.node.key] = {
        checked: false,
        partialChecked: false
      };
    }

    if (props.propagateSelectionUp && props.onPropagateUp) {
      props.onPropagateUp(event);
    }
  };

  var propagateDown = function propagateDown(node, check, selectionKeys) {
    if (check) selectionKeys[node.key] = {
      checked: true,
      partialChecked: false
    };else delete selectionKeys[node.key];

    if (node.children && node.children.length) {
      for (var i = 0; i < node.children.length; i++) {
        propagateDown(node.children[i], check, selectionKeys);
      }
    }
  };

  var onRightClick = function onRightClick(event) {
    DomHandler.clearSelection();

    if (props.onContextMenuSelectionChange) {
      props.onContextMenuSelectionChange({
        originalEvent: event,
        value: props.node.key
      });
    }

    if (props.onContextMenu) {
      props.onContextMenu({
        originalEvent: event,
        node: props.node
      });
    }
  };

  var onKeyDown = function onKeyDown(event) {
    if (event.target === elementRef.current) {
      var rowElement = event.currentTarget;

      switch (event.which) {
        //down arrow
        case 40:
          var nextRow = rowElement.nextElementSibling;

          if (nextRow) {
            nextRow.focus();
          }

          event.preventDefault();
          break;
        //up arrow

        case 38:
          var previousRow = rowElement.previousElementSibling;

          if (previousRow) {
            previousRow.focus();
          }

          event.preventDefault();
          break;
        //right arrow

        case 39:
          if (!expanded) {
            expand(event);
          }

          event.preventDefault();
          break;
        //left arrow

        case 37:
          if (expanded) {
            collapse(event);
          }

          event.preventDefault();
          break;
        //enter

        case 13:
          onClick(event);
          event.preventDefault();
          break;
      }
    }
  };

  var isSelected = function isSelected() {
    if ((props.selectionMode === 'single' || props.selectionMode === 'multiple') && props.selectionKeys) return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;else return false;
  };

  var isChecked = function isChecked() {
    return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false;
  };

  var isPartialChecked = function isPartialChecked() {
    return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
  };

  var createToggler = function createToggler() {
    var label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
    var iconClassName = classNames('p-treetable-toggler-icon pi pi-fw', {
      'pi-chevron-right': !expanded,
      'pi-chevron-down': expanded
    });
    var style = {
      marginLeft: props.level * 16 + 'px',
      visibility: props.node.leaf === false || props.node.children && props.node.children.length ? 'visible' : 'hidden'
    };
    return /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "p-treetable-toggler p-link p-unselectable-text",
      onClick: onTogglerClick,
      tabIndex: -1,
      style: style,
      "aria-label": label
    }, /*#__PURE__*/React.createElement("i", {
      className: iconClassName,
      "aria-hidden": "true"
    }), /*#__PURE__*/React.createElement(Ripple, null));
  };

  var createCheckbox = function createCheckbox() {
    if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
      var checked = isChecked();
      var partialChecked = isPartialChecked();

      var _className = classNames('p-checkbox-box', {
        'p-highlight': checked,
        'p-indeterminate': partialChecked
      });

      var icon = classNames('p-checkbox-icon p-c', {
        'pi pi-check': checked,
        'pi pi-minus': partialChecked
      });
      return /*#__PURE__*/React.createElement("div", {
        className: "p-checkbox p-treetable-checkbox p-component",
        ref: checkboxRef,
        onClick: onCheckboxChange,
        role: "checkbox",
        "aria-checked": checked
      }, /*#__PURE__*/React.createElement("div", {
        className: "p-hidden-accessible"
      }, /*#__PURE__*/React.createElement("input", {
        type: "checkbox",
        onFocus: onCheckboxFocus,
        onBlur: onCheckboxBlur
      })), /*#__PURE__*/React.createElement("div", {
        className: _className,
        ref: checkboxBoxRef
      }, /*#__PURE__*/React.createElement("span", {
        className: icon
      })));
    } else {
      return null;
    }
  };

  var createCell = function createCell(column) {
    var toggler, checkbox;

    if (column.props.expander) {
      toggler = createToggler();
      checkbox = createCheckbox();
    }

    return /*#__PURE__*/React.createElement(TreeTableBodyCell, _extends({
      key: column.props.columnKey || column.props.field
    }, column.props, {
      column: column,
      selectOnEdit: props.selectOnEdit,
      selected: isSelected(),
      node: props.node,
      rowIndex: props.rowIndex
    }), toggler, checkbox);
  };

  var createChildren = function createChildren() {
    if (expanded && props.node.children) {
      return props.node.children.map(function (childNode, index) {
        return /*#__PURE__*/React.createElement(TreeTableRow, {
          key: childNode.key || JSON.stringify(childNode.data),
          level: props.level + 1,
          rowIndex: props.rowIndex + '_' + index,
          node: childNode,
          columns: props.columns,
          expandedKeys: props.expandedKeys,
          selectOnEdit: props.selectOnEdit,
          onToggle: props.onToggle,
          onExpand: props.onExpand,
          onCollapse: props.onCollapse,
          selectionMode: props.selectionMode,
          selectionKeys: props.selectionKeys,
          onSelectionChange: props.onSelectionChange,
          metaKeySelection: props.metaKeySelection,
          onRowClick: props.onRowClick,
          onSelect: props.onSelect,
          onUnselect: props.onUnselect,
          propagateSelectionUp: props.propagateSelectionUp,
          propagateSelectionDown: props.propagateSelectionDown,
          onPropagateUp: propagateUp,
          rowClassName: props.rowClassName,
          contextMenuSelectionKey: props.contextMenuSelectionKey,
          onContextMenuSelectionChange: props.onContextMenuSelectionChange,
          onContextMenu: props.onContextMenu
        });
      });
    } else {
      return null;
    }
  };

  var cells = props.columns.map(createCell);
  var children = createChildren();
  var className = {
    'p-highlight': isSelected(),
    'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key
  };

  if (props.rowClassName) {
    var rowClassName = props.rowClassName(props.node);
    className = _objectSpread$2(_objectSpread$2({}, className), rowClassName);
  }

  className = classNames(className, props.node.className);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
    ref: elementRef,
    tabIndex: 0,
    className: className,
    style: props.node.style,
    onClick: onClick,
    onTouchEnd: onTouchEnd,
    onContextMenu: onRightClick,
    onKeyDown: onKeyDown
  }, cells), children);
});
TreeTableRow.displayName = 'TreeTableRow';

function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(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$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(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$2(o, minLen); }

function _arrayLikeToArray$2(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; }
var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
  var isSingleSelectionMode = props.selectionMode === 'single';
  var isMultipleSelectionMode = props.selectionMode === 'multiple';

  var flattenizeTree = function flattenizeTree(nodes) {
    var rows = [];
    nodes = nodes || props.value;

    var _iterator = _createForOfIteratorHelper$2(nodes),
        _step;

    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var node = _step.value;
        rows.push(node.key);

        if (isExpandedKey(node.key)) {
          rows = rows.concat(flattenizeTree(node.children));
        }
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }

    return rows;
  };

  var isExpandedKey = function isExpandedKey(key) {
    return props.expandedKeys && !!props.expandedKeys[key];
  };

  var onRowClick = function onRowClick(event, node) {
    if (props.onRowClick) {
      props.onRowClick({
        originalEvent: event,
        node: node
      });
    }

    var targetNode = event.target.nodeName;

    if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable')) {
      return;
    }

    if ((isSingleSelectionMode || isMultipleSelectionMode) && node.selectable !== false) {
      var selectionKeys;
      var selected = isSelected(node);
      var metaSelection = props.metaKeySelection;
      var flatKeys = flattenizeTree();
      var rowIndex = flatKeys.findIndex(function (key) {
        return key === node.key;
      });

      if (isMultipleSelectionMode && event.shiftKey) {
        DomHandler.clearSelection(); // find first selected row

        var anchorRowIndex = flatKeys.findIndex(function (key) {
          return props.selectionKeys[key];
        });
        var rangeStart = Math.min(rowIndex, anchorRowIndex);
        var rangeEnd = Math.max(rowIndex, anchorRowIndex);
        selectionKeys = _objectSpread$1({}, props.selectionKeys);

        for (var i = rangeStart; i <= rangeEnd; i++) {
          var rowKey = flatKeys[i];
          selectionKeys[rowKey] = true;
        }
      } else {
        //anchorRowIndex = rowIndex;
        if (metaSelection) {
          var metaKey = event.metaKey || event.ctrlKey;

          if (selected && metaKey) {
            if (isSingleSelectionMode) {
              selectionKeys = null;
            } else {
              selectionKeys = _objectSpread$1({}, props.selectionKeys);
              delete selectionKeys[node.key];
            }

            if (props.onUnselect) {
              props.onUnselect({
                originalEvent: event,
                node: node
              });
            }
          } else {
            if (isSingleSelectionMode) {
              selectionKeys = node.key;
            } else if (isMultipleSelectionMode) {
              selectionKeys = !metaKey ? {} : props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {};
              selectionKeys[node.key] = true;
            }

            if (props.onSelect) {
              props.onSelect({
                originalEvent: event,
                node: node
              });
            }
          }
        } else {
          if (isSingleSelectionMode) {
            if (selected) {
              selectionKeys = null;

              if (props.onUnselect) {
                props.onUnselect({
                  originalEvent: event,
                  node: node
                });
              }
            } else {
              selectionKeys = node.key;

              if (props.onSelect) {
                props.onSelect({
                  originalEvent: event,
                  node: node
                });
              }
            }
          } else {
            if (selected) {
              selectionKeys = _objectSpread$1({}, props.selectionKeys);
              delete selectionKeys[node.key];

              if (props.onUnselect) {
                props.onUnselect({
                  originalEvent: event,
                  node: node
                });
              }
            } else {
              selectionKeys = props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {};
              selectionKeys[node.key] = true;

              if (props.onSelect) {
                props.onSelect({
                  originalEvent: event,
                  node: node
                });
              }
            }
          }
        }
      }

      if (props.onSelectionChange) {
        props.onSelectionChange({
          originalEvent: event,
          value: selectionKeys
        });
      }
    }
  };

  var isSelected = function isSelected(node) {
    if ((isSingleSelectionMode || isMultipleSelectionMode) && props.selectionKeys) return isSingleSelectionMode ? props.selectionKeys === node.key : props.selectionKeys[node.key] !== undefined;else return false;
  };

  var createRow = function createRow(node, index) {
    return /*#__PURE__*/React.createElement(TreeTableRow, {
      key: node.key || JSON.stringify(node.data),
      level: 0,
      rowIndex: index,
      selectOnEdit: props.selectOnEdit,
      node: node,
      columns: props.columns,
      expandedKeys: props.expandedKeys,
      onToggle: props.onToggle,
      onExpand: props.onExpand,
      onCollapse: props.onCollapse,
      selectionMode: props.selectionMode,
      selectionKeys: props.selectionKeys,
      onSelectionChange: props.onSelectionChange,
      metaKeySelection: props.metaKeySelection,
      onRowClick: onRowClick,
      onSelect: props.onSelect,
      onUnselect: props.onUnselect,
      propagateSelectionUp: props.propagateSelectionUp,
      propagateSelectionDown: props.propagateSelectionDown,
      rowClassName: props.rowClassName,
      contextMenuSelectionKey: props.contextMenuSelectionKey,
      onContextMenuSelectionChange: props.onContextMenuSelectionChange,
      onContextMenu: props.onContextMenu
    });
  };

  var createRows = function createRows() {
    if (props.paginator && !props.lazy) {
      var rpp = props.rows || 0;
      var startIndex = props.first || 0;
      var endIndex = startIndex + rpp;
      var rows = [];

      for (var i = startIndex; i < endIndex; i++) {
        var rowData = props.value[i];
        if (rowData) rows.push(createRow(props.value[i]));else break;
      }

      return rows;
    } else {
      return props.value.map(createRow);
    }
  };

  var createEmptyMessage = function createEmptyMessage() {
    if (props.loading) {
      return null;
    } else {
      var colSpan = props.columns ? props.columns.length : null;

      var _content = props.emptyMessage || localeOption('emptyMessage');

      return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
        className: "p-treetable-emptymessage",
        colSpan: colSpan
      }, _content));
    }
  };

  var content = props.value && props.value.length ? createRows() : createEmptyMessage();
  return /*#__PURE__*/React.createElement("tbody", {
    className: "p-treetable-tbody"
  }, content);
});
TreeTableBody.displayName = 'TreeTableBody';

var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
  var createFooterCell = function createFooterCell(column, index) {
    return /*#__PURE__*/React.createElement("td", {
      key: column.field || index,
      className: column.props.footerClassName || column.props.className,
      style: column.props.footerStyle || column.props.style,
      rowSpan: column.props.rowSpan,
      colSpan: column.props.colSpan
    }, column.props.footer);
  };

  var createFooterRow = function createFooterRow(row, index) {
    var rowColumns = React.Children.toArray(row.props.children);
    var rowFooterCells = rowColumns.map(createFooterCell);
    return /*#__PURE__*/React.createElement("tr", {
      key: index
    }, rowFooterCells);
  };

  var createColumnGroup = function createColumnGroup() {
    var rows = React.Children.toArray(props.columnGroup.props.children);
    return rows.map(createFooterRow);
  };

  var createColumns = function createColumns(columns) {
    if (columns) {
      var headerCells = columns.map(createFooterCell);
      return /*#__PURE__*/React.createElement("tr", null, headerCells);
    } else {
      return null;
    }
  };

  var hasFooter = function hasFooter() {
    if (props.columnGroup) {
      return true;
    } else {
      for (var i = 0; i < props.columns.length; i++) {
        if (props.columns[i].props.footer) {
          return true;
        }
      }
    }

    return false;
  };

  var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);

  if (hasFooter()) {
    return /*#__PURE__*/React.createElement("tfoot", {
      className: "p-treetable-tfoot"
    }, content);
  } else {
    return null;
  }
});
TreeTableFooter.displayName = 'TreeTableFooter';

function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(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$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(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$1(o, minLen); }

function _arrayLikeToArray$1(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; }
var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
  var filterTimeout = React.useRef(null);

  var onHeaderClick = function onHeaderClick(event, column) {
    if (column.props.sortable) {
      var targetNode = event.target;

      if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title') || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
        props.onSort({
          originalEvent: event,
          sortField: column.props.sortField || column.props.field,
          sortFunction: column.props.sortFunction,
          sortable: column.props.sortable
        });
        DomHandler.clearSelection();
      }
    }
  };

  var onHeaderMouseDown = function onHeaderMouseDown(event, column) {
    if (props.reorderableColumns && column.props.reorderable) {
      if (event.target.nodeName !== 'INPUT') event.currentTarget.draggable = true;else if (event.target.nodeName === 'INPUT') event.currentTarget.draggable = false;
    }
  };

  var onHeaderKeyDown = function onHeaderKeyDown(event, column) {
    if (event.key === 'Enter') {
      onHeaderClick(event, column);
      event.preventDefault();
    }
  };

  var getMultiSortMetaDataIndex = function getMultiSortMetaDataIndex(column) {
    if (props.multiSortMeta) {
      for (var i = 0; i < props.multiSortMeta.length; i++) {
        if (props.multiSortMeta[i].field === column.props.field) {
          return i;
        }
      }
    }

    return -1;
  };

  var onResizerMouseDown = function onResizerMouseDown(event, column) {
    if (props.resizableColumns && props.onResizeStart) {
      props.onResizeStart({
        originalEvent: event,
        columnEl: event.target.parentElement,
        column: column
      });
    }
  };

  var _onDragStart = function onDragStart(event, column) {
    if (props.onDragStart) {
      props.onDragStart({
        originalEvent: event,
        column: column
      });
    }
  };

  var _onDragOver = function onDragOver(event, column) {
    if (props.onDragOver) {
      props.onDragOver({
        originalEvent: event,
        column: column
      });
    }
  };

  var _onDragLeave = function onDragLeave(event, column) {
    if (props.onDragLeave) {
      props.onDragLeave({
        originalEvent: event,
        column: column
      });
    }
  };

  var _onDrop = function onDrop(event, column) {
    if (props.onDrop) {
      props.onDrop({
        originalEvent: event,
        column: column
      });
    }
  };

  var onFilterInput = function onFilterInput(e, column) {
    if (column.props.filter && props.onFilter) {
      if (filterTimeout.current) {
        clearTimeout(filterTimeout.current);
      }

      var filterValue = e.target.value;
      filterTimeout.current = setTimeout(function () {
        props.onFilter({
          value: filterValue,
          field: column.props.field,
          matchMode: column.props.filterMatchMode || 'startsWith'
        });
        filterTimeout.current = null;
      }, props.filterDelay);
    }
  };

  var hasColumnFilter = function hasColumnFilter(columns) {
    if (columns) {
      var _iterator = _createForOfIteratorHelper$1(columns),
          _step;

      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var col = _step.value;

          if (col.props.filter) {
            return true;
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
    }

    return false;
  };

  var getAriaSort = function getAriaSort(column, sorted, sortOrder) {
    if (column.props.sortable) {
      var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-down' : 'pi-sort-up' : 'pi-sort';
      if (sortIcon === 'pi-sort-down') return 'descending';else if (sortIcon === 'pi-sort-up') return 'ascending';else return 'none';
    } else {
      return null;
    }
  };

  var getColumnProp = function getColumnProp(column) {
    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }

    return column ? typeof args[0] === 'string' ? column.props[args[0]] : (args[0] || column).props[args[1]] : null;
  };

  var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
    if (column.props.sortable) {
      var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
      var sortIconClassName = classNames('p-sortable-column-icon', 'pi pi-fw', sortIcon);
      return /*#__PURE__*/React.createElement("span", {
        className: sortIconClassName
      });
    } else {
      return null;
    }
  };

  var createResizer = function createResizer(column) {
    if (props.resizableColumns) {
      return /*#__PURE__*/React.createElement("span", {
        className: "p-column-resizer p-clickable",
        onMouseDown: function onMouseDown(e) {
          return onResizerMouseDown(e, column);
        }
      });
    } else {
      return null;
    }
  };

  var createSortBadge = function createSortBadge(sortMetaDataIndex) {
    if (sortMetaDataIndex !== -1 && props.multiSortMeta && props.multiSortMeta.length > 1) {
      return /*#__PURE__*/React.createElement("span", {
        className: "p-sortable-column-badge"
      }, sortMetaDataIndex + 1);
    }

    return null;
  };

  var createHeaderCell = function createHeaderCell(column, options) {
    var filterElement;

    if (column.props.filter && options.renderFilter) {
      filterElement = column.props.filterElement || /*#__PURE__*/React.createElement(InputText, {
        onInput: function onInput(e) {
          return onFilterInput(e, column);
        },
        type: props.filterType,
        defaultValue: props.filters && props.filters[column.props.field] ? props.filters[column.props.field].value : null,
        className: "p-column-filter",
        placeholder: column.props.filterPlaceholder,
        maxLength: column.props.filterMaxLength
      });
    }

    if (options.filterOnly) {
      return /*#__PURE__*/React.createElement("th", {
        key: column.props.columnKey || column.props.field || options.index,
        className: classNames('p-filter-column', column.props.filterHeaderClassName),
        style: column.props.filterHeaderStyle || column.props.style,
        rowSpan: column.props.rowSpan,
        colSpan: column.props.colSpan
      }, filterElement);
    } else {
      var headerCellRef = /*#__PURE__*/React.createRef(null);
      var sortMetaDataIndex = getMultiSortMetaDataIndex(column);
      var multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
      var singleSorted = column.props.field === props.sortField;
      var multipleSorted = multiSortMetaData !== null;
      var sorted = column.props.sortable && (singleSorted || multipleSorted);
      var sortOrder = 0;
      if (singleSorted) sortOrder = props.sortOrder;else if (multipleSorted) sortOrder = multiSortMetaData.order;
      var sortIconElement = createSortIcon(column, sorted, sortOrder);
      var ariaSortData = getAriaSort(column, sorted, sortOrder);
      var sortBadge = createSortBadge(sortMetaDataIndex);
      var className = classNames(column.props.headerClassName || column.props.className, {
        'p-sortable-column': column.props.sortable,
        'p-highlight': sorted,
        'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable')
      });
      var headerTooltip = column.props.headerTooltip;
      var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
      var resizer = createResizer(column);
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", {
        ref: headerCellRef,
        key: column.columnKey || column.field || options.index,
        className: className,
        style: column.props.headerStyle || column.props.style,
        tabIndex: column.props.sortable ? props.tabIndex : null,
        onClick: function onClick(e) {
          return onHeaderClick(e, column);
        },
        onMouseDown: function onMouseDown(e) {
          return onHeaderMouseDown(e, column);
        },
        onKeyDown: function onKeyDown(e) {
          return onHeaderKeyDown(e, column);
        },
        rowSpan: column.props.rowSpan,
        colSpan: column.props.colSpan,
        "aria-sort": ariaSortData,
        onDragStart: function onDragStart(e) {
          return _onDragStart(e, column);
        },
        onDragOver: function onDragOver(e) {
          return _onDragOver(e, column);
        },
        onDragLeave: function onDragLeave(e) {
          return _onDragLeave(e, column);
        },
        onDrop: function onDrop(e) {
          return _onDrop(e, column);
        }
      }, resizer, /*#__PURE__*/React.createElement("span", {
        className: "p-column-title"
      }, column.props.header), sortIconElement, sortBadge, filterElement), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
        target: headerCellRef,
        content: headerTooltip
      }, column.props.headerTooltipOptions)));
    }
  };

  var createHeaderRow = function createHeaderRow(row, index) {
    var rowColumns = React.Children.toArray(row.props.children);
    var rowHeaderCells = rowColumns.map(function (col, i) {
      return createHeaderCell(col, {
        index: i,
        filterOnly: false,
        renderFilter: true
      });
    });
    return /*#__PURE__*/React.createElement("tr", {
      key: index
    }, rowHeaderCells);
  };

  var createColumnGroup = function createColumnGroup() {
    var rows = React.Children.toArray(props.columnGroup.props.children);
    return rows.map(createHeaderRow);
  };

  var createColumns = function createColumns(columns) {
    if (columns) {
      if (hasColumnFilter(columns)) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
          return createHeaderCell(col, {
            index: i,
            filterOnly: false,
            renderFilter: false
          });
        })), /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
          return createHeaderCell(col, {
            index: i,
            filterOnly: true,
            renderFilter: true
          });
        })));
      } else {
        return /*#__PURE__*/React.createElement("tr", null, columns.map(function (col, i) {
          return createHeaderCell(col, {
            index: i,
            filterOnly: false,
            renderFilter: false
          });
        }));
      }
    } else {
      return null;
    }
  };

  var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
  return /*#__PURE__*/React.createElement("thead", {
    className: "p-treetable-thead"
  }, content);
});
TreeTableHeader.displayName = 'TreeTableHeader';

var TreeTableScrollableView = /*#__PURE__*/React.memo(function (props) {
  var elementRef = React.useRef(null);
  var scrollHeaderRef = React.useRef(null);
  var scrollHeaderBoxRef = React.useRef(null);
  var scrollBodyRef = React.useRef(null);
  var scrollTableRef = React.useRef(null);
  var scrollFooterRef = React.useRef(null);
  var scrollFooterBoxRef = React.useRef(null);

  var setScrollHeight = function setScrollHeight() {
    if (props.scrollHeight) {
      if (props.scrollHeight.indexOf('%') !== -1) {
        var datatableContainer = findDataTableContainer(elementRef.current);
        scrollBodyRef.current.style.visibility = 'hidden';
        scrollBodyRef.current.style.height = '100px'; //temporary height to calculate static height

        var containerHeight = DomHandler.getOuterHeight(datatableContainer);
        var relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(props.scrollHeight, 10) / 100;
        var staticHeight = containerHeight - 100; //total height of headers, footers, paginators

        var scrollBodyHeight = relativeHeight - staticHeight;
        scrollBodyRef.current.style.height = 'auto';
        scrollBodyRef.current.style.maxHeight = scrollBodyHeight + 'px';
        scrollBodyRef.current.style.visibility = 'visible';
      } else {
        scrollBodyRef.current.style.maxHeight = props.scrollHeight;
      }
    }
  };

  var findDataTableContainer = function findDataTableContainer(element) {
    if (element) {
      var el = element;

      while (el && !DomHandler.hasClass(el, 'p-treetable')) {
        el = el.parentElement;
      }

      return el;
    } else {
      return null;
    }
  };

  var onHeaderScroll = function onHeaderScroll() {
    scrollHeaderRef.current.scrollLeft = 0;
  };

  var onBodyScroll = function onBodyScroll() {
    var frozenView = elementRef.current.previousElementSibling;
    var frozenScrollBody;

    if (frozenView) {
      frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
    }

    scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';

    if (scrollFooterBoxRef.current) {
      scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
    }

    if (frozenScrollBody) {
      frozenScrollBody.scrollTop = scrollBodyRef.current.scrollTop;
    }
  };

  useMountEffect(function () {
    if (!props.frozen) {
      var scrollBarWidth = DomHandler.calculateScrollbarWidth();
      scrollHeaderBoxRef.current.style.marginRight = scrollBarWidth + 'px';

      if (scrollFooterBoxRef.current) {
        scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
      }
    } else {
      scrollBodyRef.current.style.paddingBottom = D