primereact 10.6.6 → 10.7.0

package/column/column.d.ts

@@ -10,10 +10,8 @@
  */
 import * as React from 'react';
 import { FilterMatchMode } from '../api/api';
-import { ButtonPassThroughOptions } from '../button/button';
 import { ComponentHooks } from '../componentbase/componentbase';
 import { DataTablePassThroughOptions } from '../datatable/datatable';
-import { DropdownPassThroughOptions } from '../dropdown/dropdown';
 import { PassThroughOptions } from '../passthrough';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { IconType, PassThroughType } from '../utils/utils';
@@ -208,9 +206,8 @@ export interface ColumnPassThroughOptions {
     filterOperator?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterOperatorDropdown?: DropdownPassThroughOptions;
+    filterOperatorDropdown?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the filter constraints' DOM element.
      */
@@ -221,45 +218,44 @@ export interface ColumnPassThroughOptions {
     filterConstraint?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterMatchModeDropdown?: DropdownPassThroughOptions;
+    filterMatchModeDropdown?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the filter remove button container's DOM element.
      */
     filterRemove?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterRemoveButton?: DropdownPassThroughOptions;
+    filterRemoveButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the filter add rule's DOM element.
      */
     filterAddRule?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterAddRuleButton?: DropdownPassThroughOptions;
+    filterAddRuleButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the filter buttonbar's DOM element.
      */
     filterButtonbar?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
      */
-    filterClearButton?: ButtonPassThroughOptions;
+    filterClearButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
      */
-    filterApplyButton?: ButtonPassThroughOptions;
+    filterApplyButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the body cell's DOM element.
      */
     bodyCell?: ColumnPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the footer cell's DOM element.
+     */
+    footerCell?: ColumnPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
     /**
      * Uses to pass attributes to the rowgroup toggler's DOM element.
      */
@@ -312,6 +308,26 @@ export interface ColumnPassThroughOptions {
      * Uses to pass attributes to the row editor cancel icon's DOM element.
      */
     rowEditorCancelIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row reorder icon's DOM element.
+     */
+    rowReorderIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row radiobutton wrapper's DOM element.
+     */
+    radioButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the row radiobutton input's DOM element.
+     */
+    radioButtonInput?: ColumnPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the row radiobutton box's DOM element.
+     */
+    radioButtonBox?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the row radiobutton icon's DOM element.
+     */
+    radioButtonIcon?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Used to manage all lifecycle hooks
      * @see {@link ComponentHooks}

package/core/core.js

@@ -196,7 +196,7 @@ this.primereact.utils = (function (exports, React) {
     function DomHandler() {
       _classCallCheck(this, DomHandler);
     }
-    _createClass(DomHandler, null, [{
+    return _createClass(DomHandler, null, [{
       key: "innerWidth",
       value: function innerWidth(el) {
         if (el) {
@@ -1426,7 +1426,6 @@ this.primereact.utils = (function (exports, React) {
         return false;
       }
     }]);
-    return DomHandler;
   }();
   /**
    * All data- properties like data-test-id
@@ -1484,7 +1483,7 @@ this.primereact.utils = (function (exports, React) {
     function ObjectUtils() {
       _classCallCheck(this, ObjectUtils);
     }
-    _createClass(ObjectUtils, null, [{
+    return _createClass(ObjectUtils, null, [{
       key: "equals",
       value: function equals(obj1, obj2, field) {
         if (field && obj1 && _typeof(obj1) === 'object' && obj2 && _typeof(obj2) === 'object') {
@@ -2006,7 +2005,6 @@ this.primereact.utils = (function (exports, React) {
         }
       }
     }]);
-    return ObjectUtils;
   }();
 
   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; }
@@ -2015,7 +2013,7 @@ this.primereact.utils = (function (exports, React) {
     function IconUtils() {
       _classCallCheck(this, IconUtils);
     }
-    _createClass(IconUtils, null, [{
+    return _createClass(IconUtils, null, [{
       key: "getJSXIcon",
       value: function getJSXIcon(icon) {
         var iconProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -2038,7 +2036,6 @@ this.primereact.utils = (function (exports, React) {
         return content;
       }
     }]);
-    return IconUtils;
   }();
 
   function ownKeys$1(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; }
@@ -4497,7 +4494,8 @@ this.primereact.hooks = (function (exports, React, utils, PrimeReact) {
     PASSWORD: 700,
     CASCADE_SELECT: 800,
     SPLIT_BUTTON: 900,
-    SPEED_DIAL: 1000
+    SPEED_DIAL: 1000,
+    TOOLTIP: 1200
   };
 
   /**
@@ -5812,32 +5810,26 @@ this.primereact.csstransition = (function (exports, React, reactTransitionGroup,
       props.onEnter && props.onEnter(node, isAppearing); // component
       props.options && props.options.onEnter && props.options.onEnter(node, isAppearing); // user option
     };
-
     var onEntering = function onEntering(node, isAppearing) {
       props.onEntering && props.onEntering(node, isAppearing); // component
       props.options && props.options.onEntering && props.options.onEntering(node, isAppearing); // user option
     };
-
     var onEntered = function onEntered(node, isAppearing) {
       props.onEntered && props.onEntered(node, isAppearing); // component
       props.options && props.options.onEntered && props.options.onEntered(node, isAppearing); // user option
     };
-
     var onExit = function onExit(node) {
       props.onExit && props.onExit(node); // component
       props.options && props.options.onExit && props.options.onExit(node); // user option
     };
-
     var onExiting = function onExiting(node) {
       props.onExiting && props.onExiting(node); // component
       props.options && props.options.onExiting && props.options.onExiting(node); // user option
     };
-
     var onExited = function onExited(node) {
       props.onExited && props.onExited(node); // component
       props.options && props.options.onExited && props.options.onExited(node); // user option
     };
-
     hooks.useUpdateEffect(function () {
       if (disabled) {
         // no animation
@@ -9337,6 +9329,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, componentbase,
       autoZIndex: true,
       baseZIndex: 0,
       className: null,
+      closeOnEscape: false,
       content: null,
       disabled: false,
       event: null,
@@ -9407,6 +9400,13 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, componentbase,
     componentbase.useHandleStyle(TooltipBase.css.styles, isUnstyled, {
       name: 'tooltip'
     });
+    hooks.useGlobalOnEscapeKey({
+      callback: function callback() {
+        hide();
+      },
+      when: props.closeOnEscape,
+      priority: [hooks.ESC_KEY_HANDLING_PRIORITIES.TOOLTIP, 0]
+    });
     var elementRef = React__namespace.useRef(null);
     var textRef = React__namespace.useRef(null);
     var currentTargetRef = React__namespace.useRef(null);
@@ -9804,7 +9804,8 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, componentbase,
       };
     }, [visibleState]);
     hooks.useUpdateEffect(function () {
-      if (visibleState) {
+      var position = getPosition(currentTargetRef.current);
+      if (visibleState && position !== 'mouse') {
         applyDelay('updateDelay', function () {
           updateText(currentTargetRef.current, function () {
             align(currentTargetRef.current);
@@ -11012,6 +11013,61 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
     return obj;
   }
 
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
+      } finally {
+        try {
+          if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
+      }
+      return a;
+    }
+  }
+
+  function _arrayLikeToArray(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 _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(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(o, minLen);
+  }
+
+  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(arr, i) || _nonIterableRest();
+  }
+
   var classes = {
     box: 'p-checkbox-box',
     input: 'p-checkbox-input',
@@ -11067,8 +11123,15 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(api.PrimeReactContext);
     var props = CheckboxBase.getProps(inProps, context);
+    var _React$useState = React__namespace.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
@@ -11122,10 +11185,12 @@ this.primereact.checkbox = (function (exports, React, api, componentbase, hooks,
     };
     var _onFocus = function onFocus() {
       var _props$onFocus;
+      setFocusedState(true);
       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;
+      setFocusedState(false);
       props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
     };
     React__namespace.useImperativeHandle(ref, function () {
@@ -11525,6 +11590,7 @@ this.primereact.button = (function (exports, React, api, componentbase, hooks, u
     var rootProps = mergeProps({
       ref: elementRef,
       'aria-label': defaultAriaLabel,
+      'data-pc-autofocus': props.autoFocus,
       className: utils.classNames(props.className, cx('root', {
         size: size,
         disabled: disabled
@@ -12055,14 +12121,15 @@ this.primereact.inputnumber = (function (exports, React, PrimeReact, componentba
     var vertical = props.showButtons && props.buttonLayout === 'vertical';
     var inputMode = props.inputMode || (props.mode === 'decimal' && !props.minFractionDigits ? 'numeric' : 'decimal');
     var getOptions = function getOptions() {
+      var _props$minFractionDig, _props$maxFractionDig;
       return {
         localeMatcher: props.localeMatcher,
         style: props.mode,
         currency: props.currency,
         currencyDisplay: props.currencyDisplay,
         useGrouping: props.useGrouping,
-        minimumFractionDigits: props.minFractionDigits,
-        maximumFractionDigits: props.maxFractionDigits,
+        minimumFractionDigits: (_props$minFractionDig = props.minFractionDigits) !== null && _props$minFractionDig !== void 0 ? _props$minFractionDig : undefined,
+        maximumFractionDigits: (_props$maxFractionDig = props.maxFractionDigits) !== null && _props$maxFractionDig !== void 0 ? _props$maxFractionDig : undefined,
         roundingMode: props.roundingMode
       };
     };
@@ -12480,7 +12547,7 @@ this.primereact.inputnumber = (function (exports, React, PrimeReact, componentba
           if (_char2) {
             var _isDecimalSign = isDecimalSign(_char2);
             var _isMinusSign = isMinusSign(_char2);
-            if (event.code && (event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(_char2) >= 0 && Number(_char2) <= 9 || _isMinusSign || _isDecimalSign) {
+            if (Number(_char2) >= 0 && Number(_char2) <= 9 || _isMinusSign || _isDecimalSign) {
               insert(event, _char2, {
                 isDecimalSign: _isDecimalSign,
                 isMinusSign: _isMinusSign
@@ -14658,10 +14725,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
     };
     var onOptionSelect = function onOptionSelect(event, option) {
       var isHide = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var value = getOptionValue(option);
       selectItem({
         originalEvent: event,
-        option: value
+        option: option
       });
       isHide && hide();
     };
@@ -14944,8 +15010,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       }
     };
     var onEditableInputChange = function onEditableInputChange(event) {
+      !overlayVisibleState && show();
       var searchIndex = null;
-      if (event.target.value) {
+      if (event.target.value && visibleOptions) {
         searchIndex = visibleOptions.findIndex(function (item) {
           return getOptionLabel(item).toLocaleLowerCase().startsWith(event.target.value.toLocaleLowerCase());
         });
@@ -15151,10 +15218,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       }
     };
     var getOptionLabel = function getOptionLabel(option) {
-      return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : utils.ObjectUtils.resolveFieldData(option, 'label') || option;
+      var optionLabel = props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : utils.ObjectUtils.resolveFieldData(option, 'label');
+      return utils.ObjectUtils.isNotEmpty(optionLabel) ? optionLabel : option;
     };
     var getOptionValue = function getOptionValue(option) {
-      return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : utils.ObjectUtils.resolveFieldData(option, 'value') || option;
+      var optionValue = props.OptionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : utils.ObjectUtils.resolveFieldData(option, 'value');
+      return utils.ObjectUtils.isNotEmpty(optionValue) ? optionValue : option;
     };
     var getOptionRenderKey = function getOptionRenderKey(option) {
       return props.dataKey ? utils.ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
@@ -15327,7 +15396,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         }, ariaProps), ptm('input'));
         return /*#__PURE__*/React__namespace.createElement("input", _inputProps);
       }
-      var content = props.valueTemplate ? utils.ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
+      var content = props.valueTemplate ? utils.ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || props.emptyMessage || /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, "\xA0");
       var inputProps = mergeProps({
         ref: inputRef,
         className: cx('input', {
@@ -15706,6 +15775,15 @@ this.primereact.dialog = (function (exports, React, PrimeReact, componentbase, c
     var getTarget = function getTarget() {
       return firstFocusableElementRef.current && firstFocusableElementRef.current.parentElement;
     };
+
+    /**
+     * This method sets the auto focus on the first focusable element within the target element.
+     * It first tries to find a focusable element using the autoFocusSelector. If no such element is found,
+     * it then tries to find a focusable element using the firstFocusableSelector.
+     * If the autoFocus prop is set to true and a focusable element is found, it sets the focus on that element.
+     *
+     * @param {HTMLElement} target - The target element within which to find a focusable element.
+     */
     var setAutoFocus = function setAutoFocus(target) {
       var _ref = props || {},
         _ref$autoFocusSelecto = _ref.autoFocusSelector,
@@ -15714,7 +15792,9 @@ this.primereact.dialog = (function (exports, React, PrimeReact, componentbase, c
         firstFocusableSelector = _ref$firstFocusableSe === void 0 ? '' : _ref$firstFocusableSe,
         _ref$autoFocus = _ref.autoFocus,
         autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-      var focusableElement = utils.DomHandler.getFirstFocusableElement(target, "[autofocus]".concat(getComputedSelector(autoFocusSelector)));
+      var defaultAutoFocusSelector = "".concat(getComputedSelector(autoFocusSelector));
+      var computedAutoFocusSelector = "[autofocus]".concat(defaultAutoFocusSelector, ", [data-pc-autofocus='true']").concat(defaultAutoFocusSelector);
+      var focusableElement = utils.DomHandler.getFirstFocusableElement(target, computedAutoFocusSelector);
       autoFocus && !focusableElement && (focusableElement = utils.DomHandler.getFirstFocusableElement(target, getComputedSelector(firstFocusableSelector)));
       utils.DomHandler.focus(focusableElement);
     };
@@ -16336,7 +16416,9 @@ this.primereact.dialog = (function (exports, React, PrimeReact, componentbase, c
           'aria-label': ariaLabel,
           onClick: onClose,
           onKeyDown: function onKeyDown(ev) {
-            return ev.stopPropagation();
+            if (ev.key !== 'Escape') {
+              ev.stopPropagation();
+            }
           }
         }, ptm('closeButton'));
         return /*#__PURE__*/React__namespace.createElement("button", closeButtonProps, headerCloseIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
@@ -18083,8 +18165,15 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(api.PrimeReactContext);
     var props = CheckboxBase.getProps(inProps, context);
+    var _React$useState = React__namespace.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
@@ -18138,10 +18227,12 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
     };
     var _onFocus = function onFocus() {
       var _props$onFocus;
+      setFocusedState(true);
       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;
+      setFocusedState(false);
       props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
     };
     React__namespace.useImperativeHandle(ref, function () {
@@ -18757,18 +18848,18 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
       }
     };
     var onDropPointDragOver = function onDropPointDragOver(event) {
-      if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
+      if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
         event.dataTransfer.dropEffect = 'move';
         event.preventDefault();
       }
     };
     var onDropPointDragEnter = function onDropPointDragEnter(event) {
-      if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
+      if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
         utils.DomHandler.addClass(event.target, 'p-treenode-droppoint-active');
       }
     };
     var onDropPointDragLeave = function onDropPointDragLeave(event) {
-      if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
+      if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
         utils.DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
       }
     };
@@ -18787,19 +18878,19 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
       }
     };
     var onDragOver = function onDragOver(event) {
-      if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
+      if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
         event.dataTransfer.dropEffect = 'move';
         event.preventDefault();
         event.stopPropagation();
       }
     };
     var onDragEnter = function onDragEnter(event) {
-      if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
+      if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
         utils.DomHandler.addClass(contentRef.current, 'p-treenode-dragover');
       }
     };
     var onDragLeave = function onDragLeave(event) {
-      if (event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
+      if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
         var rect = event.currentTarget.getBoundingClientRect();
         if (event.nativeEvent.x > rect.left + rect.width || event.nativeEvent.x < rect.left || event.nativeEvent.y >= Math.floor(rect.top + rect.height) || event.nativeEvent.y < rect.top) {
           utils.DomHandler.removeClass(contentRef.current, 'p-treenode-dragover');