primereact 10.6.5 → 10.6.6

package/README.md

@@ -44,7 +44,7 @@ export default function MyComponent() {
 
 ## Theming
 
-PrimeReact has two theming has modes; styled or unstyled.
+PrimeReact has two theming modes; styled or unstyled.
 
 **Styled Mode**
 

package/api/api.d.ts

@@ -729,6 +729,14 @@ export declare function localeOption(key: string, locale: string): any;
  */
 export declare function localeOptions(locale: string): object;
 
+/**
+ * Finds an ARIA label in the locale by key and replaces options if provided.
+ * @param {string} ariaKey - Key of the ARIA label to look up in the locale.
+ * @param {Object} options - JSON options like { page: 2, user: "John", role: "Admin" }.
+ * @returns {string} The ARIA label with replaced values.
+ */
+export declare function ariaLabel(ariaKey: string, options: any): string;
+
 // Locale Options
 export interface LocaleOptions {
     /**

package/chart/chart.d.ts

@@ -45,11 +45,7 @@ export interface ChartPassThroughOptions {
  * Defines valid properties in Chart component.
  * @group Properties
  */
-export interface ChartProps {
-    /**
-     * Unique identifier of the element.
-     */
-    id?: string | undefined;
+export interface ChartProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'content' | 'pt'> {
     /**
      * Type of the chart.
      */
@@ -74,14 +70,6 @@ export interface ChartProps {
      * Height of the chart in non-responsive mode.
      */
     height?: string | undefined;
-    /**
-     * Inline style of the element.
-     */
-    style?: React.CSSProperties | undefined;
-    /**
-     * Style class of the element.
-     */
-    className?: string | undefined;
     /**
      * ARIA label for the chart canvas. Defaults to options.plugins.title.text if available.
      * @default options.plugins.title.text

package/column/column.d.ts

@@ -808,6 +808,12 @@ export interface ColumnProps {
      * Inline style of the body.
      */
     bodyStyle?: React.CSSProperties | undefined;
+    /**
+     * When enabled and cellEditorValidator is set, force to call cellEditorValidator
+     * before cell editor is closed. If cellEditorValidator returns false, editor stays open.
+     * @defaultValue false
+     */
+    cellEditValidateOnClose?: boolean | undefined;
     /**
      * Event to trigger the validation, possible values are "click" and "blur".
      * @defaultValue click

package/core/core.js

@@ -6090,7 +6090,7 @@ this.primereact.keyfilter = (function (exports, utils) {
       if (validateOnly || utils.DomHandler.isAndroid()) {
         return;
       }
-      if (e.ctrlKey || e.altKey) {
+      if (e.ctrlKey || e.altKey || e.metaKey) {
         return;
       }
       this.validateKey(e, e.key, keyfilter);
@@ -9377,7 +9377,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, componentbase,
       _React$useState2 = _slicedToArray(_React$useState, 2),
       visibleState = _React$useState2[0],
       setVisibleState = _React$useState2[1];
-    var _React$useState3 = React__namespace.useState(props.position),
+    var _React$useState3 = React__namespace.useState(props.position || 'right'),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       positionState = _React$useState4[0],
       setPositionState = _React$useState4[1];
@@ -9792,7 +9792,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, componentbase,
         bindWindowResizeListener();
         bindOverlayScrollListener();
       } else {
-        setPositionState(props.position);
+        setPositionState(props.position || 'right');
         setClassNameState('');
         currentTargetRef.current = null;
         containerSize.current = null;
@@ -10704,7 +10704,29 @@ this.primereact.virtualscroller = (function (exports, React, api, hooks, spinner
       }
     }, [numToleratedItemsState]);
     hooks.useUpdateEffect(function () {
-      if (!prevProps.items || prevProps.items.length !== (props.items || []).length) {
+      // Check if the previous/current rows array exists
+      var prevRowsExist = prevProps.items !== undefined && prevProps.items !== null;
+      var currentRowsExist = props.items !== undefined && props.items !== null;
+
+      // Get the length of the previous/current rows array, or 0 if it doesn't exist
+      var prevRowsLength = prevRowsExist ? prevProps.items.length : 0;
+      var currentRowsLength = currentRowsExist ? props.items.length : 0;
+
+      // Check if the length of the rows arrays has changed
+      var valuesChanged = prevRowsLength !== currentRowsLength;
+
+      // If both is true, we also need to check the lengths of the first element (assuming it's a matrix)
+      if (both && !valuesChanged) {
+        // Get the length of the columns or 0
+        var prevColumnsLength = prevRowsExist && prevProps.items.length > 0 ? prevProps.items[0].length : 0;
+        var currentColumnsLength = currentRowsExist && props.items.length > 0 ? props.items[0].length : 0;
+
+        // Check if the length of the columns has changed
+        valuesChanged = prevColumnsLength !== currentColumnsLength;
+      }
+
+      // If the previous items array doesn't exist or if any values have changed, call the init function
+      if (!prevRowsExist || valuesChanged) {
         init();
       }
       var loading = loadingState;
@@ -12308,7 +12330,7 @@ this.primereact.inputnumber = (function (exports, React, PrimeReact, componentba
       if (props.onKeyDown) {
         props.onKeyDown(event);
 
-        // do not continue if the user defined event wants to prevent
+        // Do not continue if the user-defined event wants to prevent
         if (event.defaultPrevented) {
           return;
         }
@@ -12352,7 +12374,6 @@ this.primereact.inputnumber = (function (exports, React, PrimeReact, componentba
 
         //enter and tab
         case 'Tab':
-        case 'NumpadEnter':
         case 'Enter':
         case 'NumpadEnter':
           newValueStr = validateValue(parseValue(inputValue));
@@ -12456,13 +12477,15 @@ this.primereact.inputnumber = (function (exports, React, PrimeReact, componentba
         default:
           event.preventDefault();
           var _char2 = event.key;
-          var _isDecimalSign = isDecimalSign(_char2);
-          var _isMinusSign = isMinusSign(_char2);
-          if ((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(_char2) >= 0 && Number(_char2) <= 9 || _isMinusSign || _isDecimalSign) {
-            insert(event, _char2, {
-              isDecimalSign: _isDecimalSign,
-              isMinusSign: _isMinusSign
-            });
+          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) {
+              insert(event, _char2, {
+                isDecimalSign: _isDecimalSign,
+                isMinusSign: _isMinusSign
+              });
+            }
           }
           break;
       }
@@ -12565,7 +12588,9 @@ this.primereact.inputnumber = (function (exports, React, PrimeReact, componentba
       var newValueStr;
       if (sign.isMinusSign) {
         var isNewMinusSign = minusCharIndex === -1;
-        if (isNewMinusSign && (selectionStart === 0 || selectionStart === currencyCharIndex + 1)) {
+
+        // #6522 - Selected negative value can't be overwritten with a minus ('-') symbol
+        if (selectionStart === 0 || selectionStart === currencyCharIndex + 1) {
           newValueStr = inputValue;
           if (isNewMinusSign || selectionEnd !== 0) {
             newValueStr = insertText(inputValue, text, 0, selectionEnd);
@@ -12935,7 +12960,7 @@ this.primereact.inputnumber = (function (exports, React, PrimeReact, componentba
     hooks.useUpdateEffect(function () {
       constructParser();
       changeValue();
-    }, [props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]);
+    }, [_locale, props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]);
     hooks.useUpdateEffect(function () {
       changeValue();
     }, [props.value]);
@@ -14165,7 +14190,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       if (selected) {
         var checkIconProps = mergeProps({
           className: cx('checkIcon')
-        }, getPTOptions('checIcon'));
+        }, getPTOptions('checkIcon'));
         return /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkIconProps);
       }
       var blankIconProps = mergeProps({
@@ -14252,7 +14277,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
       };
       style = _objectSpread$1(_objectSpread$1({}, style), option.style);
-      if (option.group && props.optionGroupLabel) {
+      if (option.group && option.optionGroup && props.optionGroupLabel) {
         var optionGroupLabel = props.optionGroupLabel;
         var groupContent = props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
         var key = index + '_' + props.getOptionGroupRenderKey(option);
@@ -15126,7 +15151,7 @@ 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');
+      return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : utils.ObjectUtils.resolveFieldData(option, 'label') || option;
     };
     var getOptionValue = function getOptionValue(option) {
       return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : utils.ObjectUtils.resolveFieldData(option, 'value') || option;
@@ -15788,7 +15813,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, componentbase, c
     },
     transition: 'p-dialog'
   };
-  var styles = "\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n    \n    .p-dialog-visible {\n        display: flex;\n    }\n    \n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n    \n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n    \n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n    \n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n    \n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n    \n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n    \n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n    \n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n    \n    .p-dialog-enter-done {\n        transform: none;\n    }\n    \n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    \n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n    \n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n    \n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n    \n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n    \n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n    \n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n    \n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n    \n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n    \n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n    \n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n    \n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }        \n}\n";
+  var styles = "\n@layer primereact {\n    .p-dialog-mask {\n        background-color: transparent;\n        transition-property: background-color;\n    }\n\n    .p-dialog-visible {\n        display: flex;\n    }\n\n    .p-dialog-mask.p-component-overlay {\n        pointer-events: auto;\n    }\n\n    .p-dialog {\n        display: flex;\n        flex-direction: column;\n        pointer-events: auto;\n        max-height: 90%;\n        transform: scale(1);\n        position: relative;\n    }\n\n    .p-dialog-content {\n        overflow-y: auto;\n        flex-grow: 1;\n    }\n\n    .p-dialog-header {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n    }\n\n    .p-dialog-footer {\n        flex-shrink: 0;\n    }\n\n    .p-dialog .p-dialog-header-icons {\n        display: flex;\n        align-items: center;\n        align-self: flex-start;\n        flex-shrink: 0;\n    }\n\n    .p-dialog .p-dialog-header-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-dialog .p-dialog-title {\n        flex-grow: 1;\n    }\n\n    /* Fluid */\n    .p-fluid .p-dialog-footer .p-button {\n        width: auto;\n    }\n\n    /* Animation */\n    /* Center */\n    .p-dialog-enter {\n        opacity: 0;\n        transform: scale(0.7);\n    }\n\n    .p-dialog-enter-active {\n        opacity: 1;\n        transform: scale(1);\n        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    }\n\n    .p-dialog-enter-done {\n        transform: none;\n    }\n\n    .p-dialog-exit-active {\n        opacity: 0;\n        transform: scale(0.7);\n        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    /* Top, Bottom, Left, Right, Top* and Bottom* */\n    .p-dialog-top .p-dialog,\n    .p-dialog-bottom .p-dialog,\n    .p-dialog-left .p-dialog,\n    .p-dialog-right .p-dialog,\n    .p-dialog-top-left .p-dialog,\n    .p-dialog-top-right .p-dialog,\n    .p-dialog-bottom-left .p-dialog,\n    .p-dialog-bottom-right .p-dialog {\n        margin: 0.75em;\n    }\n\n    .p-dialog-top .p-dialog-enter,\n    .p-dialog-top .p-dialog-exit-active {\n        transform: translate3d(0px, -100%, 0px);\n    }\n\n    .p-dialog-bottom .p-dialog-enter,\n    .p-dialog-bottom .p-dialog-exit-active {\n        transform: translate3d(0px, 100%, 0px);\n    }\n\n    .p-dialog-left .p-dialog-enter,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-enter,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-enter,\n    .p-dialog-bottom-left .p-dialog-exit-active {\n        transform: translate3d(-100%, 0px, 0px);\n    }\n\n    .p-dialog-right .p-dialog-enter,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-enter,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-enter,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transform: translate3d(100%, 0px, 0px);\n    }\n\n    .p-dialog-top .p-dialog-enter-active,\n    .p-dialog-bottom .p-dialog-enter-active,\n    .p-dialog-left .p-dialog-enter-active,\n    .p-dialog-top-left .p-dialog-enter-active,\n    .p-dialog-bottom-left .p-dialog-enter-active,\n    .p-dialog-right .p-dialog-enter-active,\n    .p-dialog-top-right .p-dialog-enter-active,\n    .p-dialog-bottom-right .p-dialog-enter-active {\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 0.3s ease-out;\n    }\n\n    .p-dialog-top .p-dialog-exit-active,\n    .p-dialog-bottom .p-dialog-exit-active,\n    .p-dialog-left .p-dialog-exit-active,\n    .p-dialog-top-left .p-dialog-exit-active,\n    .p-dialog-bottom-left .p-dialog-exit-active,\n    .p-dialog-right .p-dialog-exit-active,\n    .p-dialog-top-right .p-dialog-exit-active,\n    .p-dialog-bottom-right .p-dialog-exit-active {\n        transition: all 0.3s ease-out;\n    }\n\n    /* Maximize */\n    .p-dialog-maximized {\n        transition: none;\n        transform: none;\n        margin: 0;\n        width: 100vw !important;\n        height: 100vh !important;\n        max-height: 100%;\n        top: 0px !important;\n        left: 0px !important;\n    }\n\n    .p-dialog-maximized .p-dialog-content {\n        flex-grow: 1;\n    }\n\n    .p-confirm-dialog .p-dialog-content {\n        display: flex;\n        align-items: center;\n    }\n\n    /* Resizable */\n    .p-dialog .p-resizable-handle {\n        position: absolute;\n        font-size: 0.1px;\n        display: block;\n        cursor: se-resize;\n        width: 12px;\n        height: 12px;\n        right: 1px;\n        bottom: 1px;\n    }\n\n    .p-dialog-draggable .p-dialog-header {\n        cursor: move;\n    }\n}\n";
   var inlineStyles = {
     mask: function mask(_ref6) {
       var props = _ref6.props;
@@ -16141,7 +16166,6 @@ this.primereact.dialog = (function (exports, React, PrimeReact, componentbase, c
       }
     };
     var onExited = function onExited() {
-      props.onHide && props.onHide();
       dragging.current = false;
       utils.ZIndexUtils.clear(maskRef.current);
       setMaskVisibleState(false);
@@ -16310,7 +16334,10 @@ this.primereact.dialog = (function (exports, React, PrimeReact, componentbase, c
           type: 'button',
           className: cx('closeButton'),
           'aria-label': ariaLabel,
-          onClick: onClose
+          onClick: onClose,
+          onKeyDown: function onKeyDown(ev) {
+            return ev.stopPropagation();
+          }
         }, ptm('closeButton'));
         return /*#__PURE__*/React__namespace.createElement("button", closeButtonProps, headerCloseIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
@@ -17321,7 +17348,7 @@ this.primereact.paginator = (function (exports, React, api, componentbase, hooks
             },
             page: pageLink - 1,
             currentPage: props.page,
-            totalPages: props.pageCount,
+            totalPages: props.totalPages,
             ariaLabel: api.ariaLabel('pageLabel', {
               page: pageLink
             }),
@@ -18281,14 +18308,33 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
         });
       }
     };
+    var findNextNonDroppointSibling = function findNextNonDroppointSibling(nodeElement) {
+      var nextNodeSibling = nodeElement.nextSibling;
+      if (nextNodeSibling) {
+        var isNextDropPoint = nextNodeSibling.getAttribute('data-pc-section') === 'droppoint';
+        if (isNextDropPoint) {
+          //skip drop point and return next elemnt
+          if (nextNodeSibling.nextElementSibling) {
+            return nextNodeSibling.nextElementSibling;
+          } else {
+            //nothing after droppoint go outside
+            return null;
+          }
+        }
+        return nextNodeSibling;
+      }
+      return null;
+    };
     var findNextSiblingOfAncestor = function findNextSiblingOfAncestor(nodeElement) {
       var parentNodeElement = getParentNodeElement(nodeElement);
-      return parentNodeElement ? parentNodeElement.nextElementSibling || findNextSiblingOfAncestor(parentNodeElement) : null;
+      return parentNodeElement ? findNextNonDroppointSibling(parentNodeElement) || findNextSiblingOfAncestor(parentNodeElement) : null;
     };
     var findLastVisibleDescendant = function findLastVisibleDescendant(nodeElement) {
       var childrenListElement = nodeElement.children[1];
       if (childrenListElement) {
-        var lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
+        //skip droppoint
+        var offset = props.dragdropScope ? 2 : 1;
+        var lastChildElement = childrenListElement.children[childrenListElement.children.length - offset];
         return findLastVisibleDescendant(lastChildElement);
       }
       return nodeElement;
@@ -18492,10 +18538,11 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
     var onArrowDown = function onArrowDown(event) {
       var nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
       var listElement = nodeElement.children[1];
+      var nextElement = getNextElement(nodeElement);
       if (listElement) {
-        focusRowChange(nodeElement, listElement.children[0]);
-      } else if (nodeElement.nextElementSibling) {
-        focusRowChange(nodeElement, nodeElement.nextElementSibling);
+        focusRowChange(nodeElement, props.dragdropScope ? listElement.children[1] : listElement.children[0]);
+      } else if (nextElement) {
+        focusRowChange(nodeElement, nextElement);
       } else {
         var nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
         if (nextSiblingAncestor) {
@@ -18504,10 +18551,25 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
       }
       event.preventDefault();
     };
+    var getPreviousElement = function getPreviousElement(element) {
+      var prev = element.previousElementSibling;
+      if (prev) {
+        return !props.dragdropScope ? prev : prev.previousElementSibling;
+      }
+      return null;
+    };
+    var getNextElement = function getNextElement(element) {
+      var next = element.nextElementSibling;
+      if (next) {
+        return !props.dragdropScope ? next : next.nextElementSibling;
+      }
+      return null;
+    };
     var onArrowUp = function onArrowUp(event) {
       var nodeElement = event.target;
-      if (nodeElement.previousElementSibling) {
-        focusRowChange(nodeElement, nodeElement.previousElementSibling, findLastVisibleDescendant(nodeElement.previousElementSibling));
+      var previous = getPreviousElement(nodeElement);
+      if (previous) {
+        focusRowChange(nodeElement, previous, findLastVisibleDescendant(previous));
       } else {
         var parentNodeElement = getParentNodeElement(nodeElement);
         if (parentNodeElement) {
@@ -19054,7 +19116,9 @@ this.primereact.tree = (function (exports, React, api, componentbase, hooks, sea
           if (nodeElement) {
             nodeElement.tabIndex = '-1';
           }
-          var childElement = listElement.children[0];
+
+          //skip droppoint
+          var childElement = props.dragdropScope ? listElement.children[1] : listElement.children[0];
           if (childElement) {
             childElement.tabIndex = '0';
             childElement.focus();