primereact 10.3.1 → 10.3.3

package/datatable/datatable.esm.js

@@ -2,8 +2,8 @@
 import * as React from 'react';
 import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, PrimeReactContext, FilterOperator, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
-import { ObjectUtils, classNames, mergeProps, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
-import { useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
+import { ObjectUtils, classNames, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
+import { useMergeProps, useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
 import { ArrowDownIcon } from 'primereact/icons/arrowdown';
 import { ArrowUpIcon } from 'primereact/icons/arrowup';
 import { SpinnerIcon } from 'primereact/icons/spinner';
@@ -687,6 +687,7 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -778,6 +779,7 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
   var inputRef = React.useRef(null);
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -876,6 +878,7 @@ RowRadioButton.displayName = 'RowRadioButton';
 function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BodyCell = /*#__PURE__*/React.memo(function (props) {
+  var mergeProps = useMergeProps();
   var _React$useState = React.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     editingState = _React$useState2[0],
@@ -1030,12 +1033,14 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         onCellEditCancel(params);
       }
       var valid = true;
-      if (cellEditValidator) {
+      if (!submit && cellEditValidator) {
         valid = cellEditValidator(params);
       }
       if (valid) {
         if (submit && onCellEditComplete) {
-          onCellEditComplete(params);
+          setTimeout(function () {
+            return onCellEditComplete(params);
+          });
         }
         closeCell(event);
       } else {
@@ -1176,21 +1181,18 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
   var _onKeyDown = function onKeyDown(event) {
     if (props.editMode !== 'row') {
-      if (event.which === 13 || event.which === 9) {
-        // tab || enter
+      if (event.code === 'Enter' || event.code === 'Tab') {
         switchCellToViewMode(event, true);
       }
-      if (event.which === 27) {
-        // escape
+      if (event.code === 'Escape') {
         switchCellToViewMode(event, false);
       }
     }
     if (props.allowCellSelection) {
       var target = event.target,
         cell = event.currentTarget;
-      switch (event.which) {
-        //left arrow
-        case 37:
+      switch (event.code) {
+        case 'ArrowLeft':
           var prevCell = findPrevSelectableCell(cell);
           if (prevCell) {
             changeTabIndex(cell, prevCell);
@@ -1198,9 +1200,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //right arrow
-        case 39:
+        case 'ArrowRight':
           var nextCell = findNextSelectableCell(cell);
           if (nextCell) {
             changeTabIndex(cell, nextCell);
@@ -1208,9 +1208,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //up arrow
-        case 38:
+        case 'ArrowUp':
           var upCell = findUpSelectableCell(cell);
           if (upCell) {
             changeTabIndex(cell, upCell);
@@ -1218,9 +1216,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //down arrow
-        case 40:
+        case 'ArrowDown':
           var downCell = findDownSelectableCell(cell);
           if (downCell) {
             changeTabIndex(cell, downCell);
@@ -1228,17 +1224,14 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //enter
-        case 13:
+        case 'Enter':
+        case 'NumpadEnter':
           if (event.shiftKey || event.ctrlKey) ; else if (!DomHandler.isClickable(target)) {
             _onClick(event);
             event.preventDefault();
           }
           break;
-
-        //space
-        case 32:
+        case 'Space':
           if (!DomHandler.isClickable(target) && !target.readOnly) {
             _onClick(event);
             event.preventDefault();
@@ -1506,6 +1499,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         var rowEditorSaveButtonProps = mergeProps({
           type: 'button',
           name: 'row-save',
+          'aria-label': ariaLabel('saveEdit'),
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex,
@@ -1514,6 +1508,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         var rowEditorCancelButtonProps = mergeProps({
           type: 'button',
           name: 'row-cancel',
+          'aria-label': ariaLabel('cancelEdit'),
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
@@ -1528,6 +1523,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         var rowEditorInitButtonProps = mergeProps({
           type: 'button',
           name: 'row-edit',
+          'aria-label': ariaLabel('editRow'),
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex,
@@ -1635,6 +1631,7 @@ BodyCell.displayName = 'BodyCell';
 function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BodyRow = /*#__PURE__*/React.memo(function (props) {
+  var mergeProps = useMergeProps();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     editingState = _React$useState2[0],
@@ -2092,6 +2089,7 @@ BodyRow.displayName = 'BodyRow';
 function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
+  var mergeProps = useMergeProps();
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
@@ -2142,6 +2140,7 @@ var _excluded = ["originalEvent"];
 function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var mergeProps = useMergeProps();
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
@@ -3193,6 +3192,7 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
     styleObjectState = _React$useState2[0],
     setStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -3283,6 +3283,7 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
     cx = _props$ptCallbacks.cx;
+  var mergeProps = useMergeProps();
   var getRowProps = function getRowProps(row) {
     return ColumnGroupBase.getCProps(row);
   };
@@ -3380,6 +3381,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var iconRef = React.useRef(null);
   var selfClick = React.useRef(false);
   var overlayEventListener = React.useRef(null);
+  var mergeProps = useMergeProps();
   var getColumnProp = function getColumnProp(name) {
     return ColumnBase.getCProp(props.column, name);
   };
@@ -4192,6 +4194,7 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -4284,6 +4287,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     setStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
   var prevColumn = usePrevious(props.column);
+  var mergeProps = useMergeProps();
   var parentMetaData = props.metaData,
     ptCallbacks = props.ptCallbacks,
     index = props.index;
@@ -4666,6 +4670,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     allSortableDisabledState = _React$useState4[0],
     setAllSortableDisabledState = _React$useState4[1];
+  var mergeProps = useMergeProps();
   var isSingleSort = props.sortMode === 'single';
   var isMultipleSort = props.sortMode === 'multiple';
   var isAllSortableDisabled = isSingleSort && allSortableDisabledState;
@@ -4911,6 +4916,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var context = React.useContext(PrimeReactContext);
+  var mergeProps = useMergeProps();
   var props = DataTableBase.getProps(inProps, context);
   var _React$useState = React.useState(props.first),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4996,6 +5002,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var dropPosition = React.useRef(null);
   var styleElement = React.useRef(null);
   var responsiveStyleElement = React.useRef(null);
+  var beforeResizeStyleElement = React.useRef(null);
   var columnWidthsState = React.useRef(null);
   var tableWidthState = React.useRef(null);
   var resizeColumn = React.useRef(null);
@@ -5369,6 +5376,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   };
   var onColumnResizeStart = function onColumnResizeStart(e) {
+    createBeforeResizeStyleElement();
     var event = e.originalEvent,
       column = e.column;
     var containerLeft = DomHandler.getOffset(elementRef.current).left;
@@ -5381,7 +5389,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var onColumnResize = function onColumnResize(event) {
     var containerLeft = DomHandler.getOffset(elementRef.current).left;
     elementRef.current.setAttribute('data-p-unselectable-text', true);
-    !ptCallbacks.isUnstyled() && DomHandler.addClass(elementRef.current, 'p-unselectable-text');
     resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
     resizeHelperRef.current.style.top = 0 + 'px';
     resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
@@ -5431,7 +5438,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     resizeColumn.current = null;
     resizeColumnElement.current = null;
     elementRef.current.setAttribute('data-p-unselectable-text', 'true');
-    !ptCallbacks.isUnstyled() && DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
+    destroyBeforeResizeStyleElement();
     unbindColumnResizeEvents();
   };
   var resizeTableCells = function resizeTableCells(newColumnWidth, nextColumnWidth) {
@@ -5620,6 +5627,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       dropPosition.current = null;
     }
   };
+  var createBeforeResizeStyleElement = function createBeforeResizeStyleElement() {
+    beforeResizeStyleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
+    var innerHTML = "\n[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] {\n    user-select:none;\n}\n        ");
+    beforeResizeStyleElement.current.innerHTML = innerHTML;
+  };
   var createStyleElement = function createStyleElement() {
     styleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
   };
@@ -5639,6 +5651,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var destroyStyleElement = function destroyStyleElement() {
     styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
   };
+  var destroyBeforeResizeStyleElement = function destroyBeforeResizeStyleElement() {
+    beforeResizeStyleElement.current = DomHandler.removeInlineStyle(beforeResizeStyleElement.current);
+  };
   var onPageChange = function onPageChange(e) {
     clearEditingMetaData();
     if (props.onPage) {
@@ -6216,6 +6231,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     unbindColumnResizeEvents();
     destroyStyleElement();
     destroyResponsiveStyle();
+    destroyBeforeResizeStyleElement();
   });
   React.useImperativeHandle(ref, function () {
     return {