primereact 10.5.2 → 10.6.0

package/tree/tree.esm.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { PrimeReactContext, localeOption } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
-import { useMergeProps } from 'primereact/hooks';
+import { useMergeProps, useUpdateEffect as useUpdateEffect$1, useMountEffect } from 'primereact/hooks';
 import { SearchIcon } from 'primereact/icons/search';
 import { SpinnerIcon } from 'primereact/icons/spinner';
 import { classNames, DomHandler, ObjectUtils, IconUtils } from 'primereact/utils';
@@ -11,6 +11,7 @@ import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
 import { MinusIcon } from 'primereact/icons/minus';
 import { Ripple } from 'primereact/ripple';
+import { Tooltip } from 'primereact/tooltip';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -152,16 +153,7 @@ var useUpdateEffect = function useUpdateEffect(fn, deps) {
 };
 /* eslint-enable */
 
-var classes = {
-  container: 'p-tree-container',
-  loadingIcon: 'p-tree-loading-icon',
-  loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
-  searchIcon: 'p-tree-filter-icon',
-  emptyMessage: 'p-treenode p-tree-empty-message',
-  filterContainer: 'p-tree-filter-container',
-  input: 'p-tree-filter p-inputtext p-component',
-  header: 'p-tree-header',
-  footer: 'p-tree-footer',
+var classes$1 = {
   root: function root(_ref) {
     var props = _ref.props;
     return classNames('p-tree p-component', {
@@ -170,23 +162,18 @@ var classes = {
       'p-disabled': props.disabled
     });
   },
-  label: 'p-treenode-label',
-  checkboxIcon: 'p-checkbox-icon p-c',
-  checkboxContainer: 'p-checkbox p-component',
-  checkbox: function checkbox(_ref2) {
-    var props = _ref2.nodeProps,
-      checked = _ref2.checked,
-      partialChecked = _ref2.partialChecked;
-    return classNames('p-checkbox-box', {
-      'p-highlight': checked,
-      'p-indeterminate': partialChecked,
-      'p-disabled': props.disabled
+  loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
+  loadingIcon: 'p-tree-loading-icon',
+  filterContainer: 'p-tree-filter-container',
+  input: 'p-tree-filter p-inputtext p-component',
+  searchIcon: 'p-tree-filter-icon',
+  container: 'p-tree-container',
+  node: function node(_ref2) {
+    var isLeaf = _ref2.isLeaf;
+    return classNames('p-treenode', {
+      'p-treenode-leaf': isLeaf
     });
   },
-  nodeIcon: 'p-treenode-icon',
-  togglerIcon: 'p-tree-toggler-icon',
-  toggler: 'p-tree-toggler p-link',
-  droppoint: 'p-treenode-droppoint',
   content: function content(_ref3) {
     var props = _ref3.nodeProps,
       checked = _ref3.checked,
@@ -199,15 +186,22 @@ var classes = {
       'p-disabled': props.disabled
     });
   },
-  subgroup: 'p-treenode-children',
-  node: function node(_ref4) {
-    var isLeaf = _ref4.isLeaf;
-    return classNames('p-treenode', {
-      'p-treenode-leaf': isLeaf
+  toggler: 'p-tree-toggler p-link',
+  togglerIcon: 'p-tree-toggler-icon',
+  nodeCheckbox: function nodeCheckbox(_ref4) {
+    var partialChecked = _ref4.partialChecked;
+    return classNames({
+      'p-indeterminate': partialChecked
     });
-  }
+  },
+  nodeIcon: 'p-treenode-icon',
+  label: 'p-treenode-label',
+  subgroup: 'p-treenode-children',
+  emptyMessage: 'p-treenode p-tree-empty-message',
+  droppoint: 'p-treenode-droppoint',
+  header: 'p-tree-header',
+  footer: 'p-tree-footer'
 };
-var styles = "\n@layer primereact {\n    .p-tree-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        overflow: auto;\n    }\n\n    .p-treenode-children {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-treenode-selectable {\n        cursor: pointer;\n        user-select: none;\n    }\n\n    .p-tree-toggler {\n        cursor: pointer;\n        user-select: none;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-treenode-leaf > .p-treenode-content .p-tree-toggler {\n        visibility: hidden;\n    }\n\n    .p-treenode-content {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-tree-filter {\n        width: 100%;\n    }\n\n    .p-tree-filter-container {\n        position: relative;\n        display: block;\n        width: 100%;\n    }\n\n    .p-tree-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n\n    .p-tree-loading {\n        position: relative;\n        min-height: 4rem;\n    }\n\n    .p-tree .p-tree-loading-overlay {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n";
 var TreeBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Tree',
@@ -264,11 +258,218 @@ var TreeBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes,
-    styles: styles
+    classes: classes$1
   }
 });
 
+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;
+    return classNames('p-checkbox p-component', {
+      'p-highlight': checked,
+      'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
+      'p-variant-filled': props.variant === '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,
+    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$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(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 _CheckboxBase$setMeta = CheckboxBase.setMetaData({
+      props: props,
+      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() {
+    var _props$onFocus;
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
+  };
+  var _onBlur = function onBlur() {
+    var _props$onBlur;
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
+  };
+  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$1(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
+    })),
+    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$2({
+      id: props.inputId,
+      type: 'checkbox',
+      className: cx('input'),
+      name: props.name,
+      tabIndex: props.tabIndex,
+      onFocus: function onFocus(e) {
+        return _onFocus();
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur();
+      },
+      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$2({}, 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$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; }
@@ -331,13 +532,11 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
           node: props.node
         });
       }
-    } else {
-      if (props.onCollapse) {
-        props.onCollapse({
-          originalEvent: event,
-          node: props.node
-        });
-      }
+    } else if (props.onCollapse) {
+      props.onCollapse({
+        originalEvent: event,
+        node: props.node
+      });
     }
   };
   var findNextSiblingOfAncestor = function findNextSiblingOfAncestor(nodeElement) {
@@ -349,9 +548,8 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     if (childrenListElement) {
       var lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
       return findLastVisibleDescendant(lastChildElement);
-    } else {
-      return nodeElement;
     }
+    return nodeElement;
   };
   var getParentNodeElement = function getParentNodeElement(nodeElement) {
     var parentNodeElement = nodeElement.parentElement.parentElement;
@@ -377,7 +575,11 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
         var checked = isChecked();
         selectionKeys = props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {};
         if (checked) {
-          if (props.propagateSelectionDown) propagateDown(props.node, false, selectionKeys);else delete selectionKeys[props.node.key];
+          if (props.propagateSelectionDown) {
+            propagateDown(props.node, false, selectionKeys);
+          } else {
+            delete selectionKeys[props.node.key];
+          }
           if (props.propagateSelectionUp && props.onPropagateUp) {
             props.onPropagateUp({
               originalEvent: event,
@@ -392,9 +594,13 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
             });
           }
         } else {
-          if (props.propagateSelectionDown) propagateDown(props.node, true, selectionKeys);else selectionKeys[props.node.key] = {
-            checked: true
-          };
+          if (props.propagateSelectionDown) {
+            propagateDown(props.node, true, selectionKeys);
+          } else {
+            selectionKeys[props.node.key] = {
+              checked: true
+            };
+          }
           if (props.propagateSelectionUp && props.onPropagateUp) {
             props.onPropagateUp({
               originalEvent: event,
@@ -441,46 +647,42 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
               });
             }
           }
-        } else {
-          if (isSingleSelectionMode()) {
-            if (selected) {
-              selectionKeys = null;
-              if (props.onUnselect) {
-                props.onUnselect({
-                  originalEvent: event,
-                  node: props.node
-                });
-              }
-            } else {
-              selectionKeys = props.node.key;
-              if (props.onSelect) {
-                props.onSelect({
-                  originalEvent: event,
-                  node: props.node
-                });
-              }
+        } else if (isSingleSelectionMode()) {
+          if (selected) {
+            selectionKeys = null;
+            if (props.onUnselect) {
+              props.onUnselect({
+                originalEvent: event,
+                node: props.node
+              });
             }
           } else {
-            if (selected) {
-              selectionKeys = _objectSpread$1({}, props.selectionKeys);
-              delete selectionKeys[props.node.key];
-              if (props.onUnselect) {
-                props.onUnselect({
-                  originalEvent: event,
-                  node: props.node
-                });
-              }
-            } else {
-              selectionKeys = props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {};
-              selectionKeys[props.node.key] = true;
-              if (props.onSelect) {
-                props.onSelect({
-                  originalEvent: event,
-                  node: props.node
-                });
-              }
+            selectionKeys = props.node.key;
+            if (props.onSelect) {
+              props.onSelect({
+                originalEvent: event,
+                node: props.node
+              });
             }
           }
+        } else if (selected) {
+          selectionKeys = _objectSpread$1({}, props.selectionKeys);
+          delete selectionKeys[props.node.key];
+          if (props.onUnselect) {
+            props.onUnselect({
+              originalEvent: event,
+              node: props.node
+            });
+          }
+        } else {
+          selectionKeys = props.selectionKeys ? _objectSpread$1({}, props.selectionKeys) : {};
+          selectionKeys[props.node.key] = true;
+          if (props.onSelect) {
+            props.onSelect({
+              originalEvent: event,
+              node: props.node
+            });
+          }
         }
       }
       if (props.onSelectionChange) {
@@ -519,7 +721,9 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var onKeyDown = function onKeyDown(event) {
-    if (!isSameNode(event)) return;
+    if (!isSameNode(event)) {
+      return;
+    }
     switch (event.code) {
       case 'Tab':
         onTabKey();
@@ -548,14 +752,12 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     var listElement = nodeElement.children[1];
     if (listElement) {
       focusRowChange(nodeElement, listElement.children[0]);
+    } else if (nodeElement.nextElementSibling) {
+      focusRowChange(nodeElement, nodeElement.nextElementSibling);
     } else {
-      if (nodeElement.nextElementSibling) {
-        focusRowChange(nodeElement, nodeElement.nextElementSibling);
-      } else {
-        var nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
-        if (nextSiblingAncestor) {
-          focusRowChange(nodeElement, nextSiblingAncestor);
-        }
+      var nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
+      if (nextSiblingAncestor) {
+        focusRowChange(nodeElement, nextSiblingAncestor);
       }
     }
     event.preventDefault();
@@ -573,7 +775,9 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     event.preventDefault();
   };
   var onArrowRight = function onArrowRight(event) {
-    if (isLeaf || expanded) return;
+    if (isLeaf || expanded) {
+      return;
+    }
     event.currentTarget.tabIndex = -1;
     expand(event, true);
   };
@@ -652,7 +856,9 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var child = _step.value;
-        if (selectionKeys[child.key] && selectionKeys[child.key].checked) checkedChildCount++;
+        if (selectionKeys[child.key] && selectionKeys[child.key].checked) {
+          checkedChildCount++;
+        }
       }
     } catch (err) {
       _iterator.e(err);
@@ -690,10 +896,14 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var propagateDown = function propagateDown(node, check, selectionKeys) {
-    if (check) selectionKeys[node.key] = {
-      checked: true,
-      partialChecked: false
-    };else delete selectionKeys[node.key];
+    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);
@@ -701,7 +911,10 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var isSelected = function isSelected() {
-    if (props.selectionMode && props.selectionKeys) return isSingleSelectionMode() ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;else return false;
+    if (props.selectionMode && props.selectionKeys) {
+      return isSingleSelectionMode() ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
+    }
+    return false;
   };
   var isChecked = function isChecked() {
     return (props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false) || false;
@@ -826,26 +1039,24 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
   };
   var createCheckbox = function createCheckbox() {
     if (isCheckboxSelectionMode() && props.node.selectable !== false) {
+      var _props$isUnstyled;
       var checked = isChecked();
       var partialChecked = isPartialChecked();
-      var checkboxIconProps = mergeProps({
-        className: cx('checkboxIcon')
-      }, getPTOptions('checkboxIcon'));
-      var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, checkboxIconProps) : null;
-      var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$1({}, checkboxIconProps), props);
-      var checkboxContainerProps = mergeProps({
-        'aria-hidden': true,
-        className: cx('checkboxContainer')
-      }, getPTOptions('checkboxContainer'));
+      var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, null) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, null) : null;
+      var checkboxIcon = IconUtils.getJSXIcon(icon, {}, props);
       var checkboxProps = mergeProps({
-        className: cx('checkbox', {
-          checked: checked,
-          partialChecked: partialChecked,
-          nodeProps: props
+        className: cx('nodeCheckbox', {
+          partialChecked: partialChecked
         }),
-        role: 'checkbox'
-      }, getPTOptions('checkbox'));
-      return /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement("div", checkboxProps, checkboxIcon));
+        checked: checked || partialChecked,
+        icon: checkboxIcon,
+        tabIndex: -1,
+        unstyled: props === null || props === void 0 || (_props$isUnstyled = props.isUnstyled) === null || _props$isUnstyled === void 0 ? void 0 : _props$isUnstyled.call(props),
+        'data-p-checked': checked,
+        'data-p-partialchecked': partialChecked,
+        onChange: onClick
+      }, getPTOptions('nodeCheckbox'));
+      return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
     }
     return null;
   };
@@ -1136,7 +1347,8 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
         }
       }
       return result;
-    } else return value;
+    }
+    return value;
   };
   var onDrop = function onDrop(event) {
     var _dragState$current;
@@ -1147,8 +1359,16 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       var dragNodeParent = findNode(value, dragPaths);
       var dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
       var dropNode = findNode(value, event.path.split('-'));
-      if (dropNode.children) dropNode.children.push(dragNode);else dropNode.children = [dragNode];
-      if (dragNodeParent) dragNodeParent.children.splice(dragState.current.index, 1);else value.splice(dragState.current.index, 1);
+      if (dropNode.children) {
+        dropNode.children.push(dragNode);
+      } else {
+        dropNode.children = [dragNode];
+      }
+      if (dragNodeParent) {
+        dragNodeParent.children.splice(dragState.current.index, 1);
+      } else {
+        value.splice(dragState.current.index, 1);
+      }
       if (props.onDragDrop) {
         props.onDragDrop({
           originalEvent: event.originalEvent,
@@ -1171,12 +1391,22 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       var dropNodeParent = findNode(value, dropPaths);
       var dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
       var siblings = areSiblings(dragState.current.path, event.path);
-      if (dragNodeParent) dragNodeParent.children.splice(dragState.current.index, 1);else value.splice(dragState.current.index, 1);
+      if (dragNodeParent) {
+        dragNodeParent.children.splice(dragState.current.index, 1);
+      } else {
+        value.splice(dragState.current.index, 1);
+      }
       if (event.position < 0) {
         var dropIndex = siblings ? dragState.current.index > event.index ? event.index : event.index - 1 : event.index;
-        if (dropNodeParent) dropNodeParent.children.splice(dropIndex, 0, dragNode);else value.splice(dropIndex, 0, dragNode);
+        if (dropNodeParent) {
+          dropNodeParent.children.splice(dropIndex, 0, dragNode);
+        } else {
+          value.splice(dropIndex, 0, dragNode);
+        }
+      } else if (dropNodeParent) {
+        dropNodeParent.children.push(dragNode);
       } else {
-        if (dropNodeParent) dropNodeParent.children.push(dragNode);else value.push(dragNode);
+        value.push(dragNode);
       }
       if (props.onDragDrop) {
         props.onDragDrop({
@@ -1192,18 +1422,18 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
   var validateDrop = function validateDrop(dragPath, dropPath) {
     if (!dragPath) {
       return false;
-    } else {
-      //same node
-      if (dragPath === dropPath) {
-        return false;
-      }
+    }
 
-      //parent dropped on an descendant
-      if (dropPath.indexOf(dragPath) === 0) {
-        return false;
-      }
-      return true;
+    //same node
+    if (dragPath === dropPath) {
+      return false;
+    }
+
+    //parent dropped on an descendant
+    if (dropPath.indexOf(dragPath) === 0) {
+      return false;
     }
+    return true;
   };
   var validateDropNode = function validateDropNode(dragPath, dropPath) {
     var _validateDrop = validateDrop(dragPath, dropPath);
@@ -1213,9 +1443,8 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
         return false;
       }
       return true;
-    } else {
-      return false;
     }
+    return false;
   };
   var validateDropPoint = function validateDropPoint(event) {
     var _dragState$current2;
@@ -1226,26 +1455,26 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
         return false;
       }
       return true;
-    } else {
-      return false;
     }
+    return false;
   };
   var areSiblings = function areSiblings(path1, path2) {
-    if (path1.length === 1 && path2.length === 1) return true;else return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
+    if (path1.length === 1 && path2.length === 1) {
+      return true;
+    }
+    return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
   };
   var findNode = function findNode(value, path) {
     if (path.length === 0) {
       return null;
-    } else {
-      var index = parseInt(path[0], 10);
-      var nextSearchRoot = value.children ? value.children[index] : value[index];
-      if (path.length === 1) {
-        return nextSearchRoot;
-      } else {
-        path.shift();
-        return findNode(nextSearchRoot, path);
-      }
     }
+    var index = parseInt(path[0], 10);
+    var nextSearchRoot = value.children ? value.children[index] : value[index];
+    if (path.length === 1) {
+      return nextSearchRoot;
+    }
+    path.shift();
+    return findNode(nextSearchRoot, path);
   };
   var isNodeLeaf = function isNodeLeaf(node) {
     return node.leaf === false ? false : !(node.children && node.children.length);
@@ -1416,7 +1645,8 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       ptm: ptm,
       selectionKeys: props.selectionKeys,
       selectionMode: props.selectionMode,
-      togglerTemplate: props.togglerTemplate
+      togglerTemplate: props.togglerTemplate,
+      isUnstyled: isUnstyled
     });
   };
   var createEmptyMessageNode = function createEmptyMessageNode() {
@@ -1454,10 +1684,9 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       if (value.length > 0) {
         var rootNodes = createRootChildren(value);
         return createRootChildrenContainer(rootNodes);
-      } else {
-        var emptyMessageNode = createEmptyMessageNode();
-        return createRootChildrenContainer(emptyMessageNode);
       }
+      var emptyMessageNode = createEmptyMessageNode();
+      return createRootChildrenContainer(emptyMessageNode);
     }
     return null;
   };