primereact 10.0.2 → 10.0.3

package/datatable/datatable.d.ts

@@ -433,6 +433,23 @@ interface DataTableRowMouseEvent extends Omit<DataTableRowEvent, 'originalEvent'
     index: number;
 }
 
+/**
+ * Custom row pointer event.
+ * @see {@link DataTableProps.onRowPointerDown}, {@link DataTableProps.onRowPointerUp}
+ * @extends DataTableRowMouseEvent
+ * @event
+ */
+interface DataTableRowPointerEvent extends Omit<DataTableRowEvent, 'originalEvent'> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.PointerEvent<HTMLElement>;
+    /**
+     * Clicked row data index
+     */
+    index: number;
+}
+
 /**
  * Custom row click event.
  * @see {@link DataTableProps.onRowClick}, {@link DataTableProps.onRowDoubleClick}
@@ -1498,6 +1515,16 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      * @param {DataTableRowClickEvent} event - Custom click event.
      */
     onRowDoubleClick?(event: DataTableRowClickEvent): void;
+    /**
+     * Callback to invoke when a row pointerDown event occurs.
+     * @param {DataTableRowPointerEvent} event - Custom click event.
+     */
+    onRowPointerDown?(event: DataTableRowPointerEvent): void;
+    /**
+     * Callback to invoke when a row pointerUp event occurs.
+     * @param {DataTableRowPointerEvent} event - Custom click event.
+     */
+    onRowPointerUp?(event: DataTableRowPointerEvent): void;
     /**
      * Callback to invoke when the cancel icon is clicked on row editing mode.
      * @param {DataTableRowEditEvent} event - Custom row edit event.

package/datatable/datatable.esm.js

@@ -252,7 +252,7 @@ var ColumnBase = ComponentBase.extend({
 
 function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var styles = "\n@layer primereact {\n    .p-datatable {\n        position: relative;\n    }\n    \n    .p-datatable > .p-datatable-wrapper {\n        overflow: auto;\n    }\n    \n    .p-datatable-table {\n        border-spacing: 0px;\n        width: 100%;\n    }\n    \n    .p-datatable .p-sortable-disabled {\n        cursor: auto;\n    }\n    \n    .p-datatable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n    \n    .p-datatable .p-sortable-column .p-column-title,\n    .p-datatable .p-sortable-column .p-sortable-column-icon,\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        vertical-align: middle;\n    }\n    \n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-datatable-selectable .p-selectable-row,\n    .p-datatable-selectable-cell .p-selectable-cell {\n        cursor: pointer;\n    }\n    \n    .p-datatable-drag-selection-helper {\n        position: absolute;\n        z-index: 99999999;\n    }\n    \n    /* Scrollable */\n    .p-datatable-scrollable > .p-datatable-wrapper {\n        position: relative;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-thead {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n        position: sticky;\n        z-index: 1;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-tfoot {\n        position: sticky;\n        bottom: 0;\n        z-index: 1;\n    }\n    \n    .p-datatable-scrollable .p-frozen-column {\n        position: sticky;\n        background: inherit;\n    }\n    \n    .p-datatable-scrollable th.p-frozen-column {\n        z-index: 1;\n    }\n    \n    .p-datatable-flex-scrollable {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n    \n    .p-datatable-flex-scrollable > .p-datatable-wrapper {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        height: 100%;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n        position: sticky;\n        z-index: 1;\n    }\n    \n    /* Resizable */\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n        overflow: hidden;\n        white-space: nowrap;\n    }\n    \n    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n        background-clip: padding-box;\n        position: relative;\n    }\n    \n    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n    \n    .p-datatable .p-column-resizer {\n        display: block;\n        position: absolute !important;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n    \n    .p-datatable .p-column-header-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-datatable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n    \n    .p-datatable .p-row-editor-init,\n    .p-datatable .p-row-editor-save,\n    .p-datatable .p-row-editor-cancel {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Expand */\n    .p-datatable .p-row-toggler {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Reorder */\n    .p-datatable-reorder-indicator-up,\n    .p-datatable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n    \n    .p-reorderable-column,\n    .p-datatable-reorderablerow-handle {\n        cursor: move;\n    }\n    \n    /* Loader */\n    .p-datatable .p-datatable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n    \n    /* Filter */\n    .p-column-filter-row {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n    \n    .p-column-filter-menu {\n        display: inline-flex;\n        margin-left: auto;\n    }\n    \n    .p-column-filter-row .p-column-filter-element {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n    \n    .p-column-filter-menu-button,\n    .p-column-filter-clear-button {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-column-filter-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n    \n    .p-column-filter-row-items {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n    \n    .p-column-filter-row-item {\n        cursor: pointer;\n    }\n    \n    .p-column-filter-add-button,\n    .p-column-filter-remove-button {\n        justify-content: center;\n    }\n    \n    .p-column-filter-add-button .p-button-label,\n    .p-column-filter-remove-button .p-button-label {\n        flex-grow: 0;\n    }\n    \n    .p-column-filter-buttonbar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n        width: auto;\n    }\n    \n    /* Responsive */\n    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n        display: none;\n    }\n    \n    /* VirtualScroller */\n    .p-datatable-virtualscroller-spacer {\n        display: flex;\n    }\n    \n    .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n        transform: none !important;\n        min-height: 0;\n        position: sticky;\n        top: 0;\n        left: 0;\n    }\n    \n    /* Alignment */\n    .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n        text-align: left;\n        justify-content: flex-start;\n    }\n    \n    .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n        text-align: right;\n        justify-content: flex-end;\n    }\n    \n    .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n        text-align: center;\n        justify-content: center;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-datatable {\n        position: relative;\n    }\n\n    .p-datatable > .p-datatable-wrapper {\n        overflow: auto;\n    }\n\n    .p-datatable-table {\n        border-spacing: 0px;\n        width: 100%;\n    }\n\n    .p-datatable .p-sortable-disabled {\n        cursor: auto;\n    }\n\n    .p-datatable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n\n    .p-datatable .p-sortable-column .p-column-title,\n    .p-datatable .p-sortable-column .p-sortable-column-icon,\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        vertical-align: middle;\n    }\n\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-datatable-selectable .p-selectable-row,\n    .p-datatable-selectable-cell .p-selectable-cell {\n        cursor: pointer;\n    }\n\n    .p-datatable-drag-selection-helper {\n        position: absolute;\n        z-index: 99999999;\n    }\n\n    /* Scrollable */\n    .p-datatable-scrollable > .p-datatable-wrapper {\n        position: relative;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-thead {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n        position: sticky;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tfoot {\n        position: sticky;\n        bottom: 0;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable .p-frozen-column {\n        position: sticky;\n        background: inherit;\n    }\n\n    .p-datatable-scrollable th.p-frozen-column {\n        z-index: 1;\n    }\n\n    .p-datatable-flex-scrollable {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    .p-datatable-flex-scrollable > .p-datatable-wrapper {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        height: 100%;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n        position: sticky;\n        z-index: 1;\n    }\n\n    /* Resizable */\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n        overflow: hidden;\n        white-space: nowrap;\n    }\n\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n        background-clip: padding-box;\n        position: relative;\n    }\n\n    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n\n    .p-datatable .p-column-resizer {\n        display: block;\n        position: absolute !important;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n\n    .p-datatable .p-column-header-content {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-datatable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n\n    .p-datatable .p-row-editor-init,\n    .p-datatable .p-row-editor-save,\n    .p-datatable .p-row-editor-cancel {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Expand */\n    .p-datatable .p-row-toggler {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Reorder */\n    .p-datatable-reorder-indicator-up,\n    .p-datatable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n\n    .p-reorderable-column,\n    .p-datatable-reorderablerow-handle {\n        cursor: move;\n    }\n\n    /* Loader */\n    .p-datatable .p-datatable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n\n    /* Filter */\n    .p-column-filter-row {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n\n    .p-column-filter-menu {\n        display: inline-flex;\n        margin-left: auto;\n    }\n\n    .p-column-filter-row .p-column-filter-element {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n\n    .p-column-filter-menu-button,\n    .p-column-filter-clear-button {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-column-filter-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n\n    .p-column-filter-row-items {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-column-filter-row-item {\n        cursor: pointer;\n    }\n\n    .p-column-filter-add-button,\n    .p-column-filter-remove-button {\n        justify-content: center;\n    }\n\n    .p-column-filter-add-button .p-button-label,\n    .p-column-filter-remove-button .p-button-label {\n        flex-grow: 0;\n    }\n\n    .p-column-filter-buttonbar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n        width: auto;\n    }\n\n    /* Responsive */\n    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n        display: none;\n    }\n\n    /* VirtualScroller */\n    .p-datatable-virtualscroller-spacer {\n        display: flex;\n    }\n\n    .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n        transform: none !important;\n        min-height: 0;\n        position: sticky;\n        top: 0;\n        left: 0;\n    }\n\n    /* Alignment */\n    .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n        text-align: left;\n        justify-content: flex-start;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n        text-align: right;\n        justify-content: flex-end;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n        text-align: center;\n        justify-content: center;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var props = _ref.props,
@@ -566,6 +566,8 @@ var DataTableBase = ComponentBase.extend({
     onRowClick: null,
     onRowCollapse: null,
     onRowDoubleClick: null,
+    onRowPointerDown: null,
+    onRowPointerUp: null,
     onRowEditCancel: null,
     onRowEditChange: null,
     onRowEditComplete: null,
@@ -720,7 +722,7 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     if (!props.disabled) {
       setFocusedState(true);
       props.onChange(event);
-      event.stopPropagation();
+      event.preventDefault();
     }
   };
   var _onKeyDown = function onKeyDown(event) {
@@ -1274,6 +1276,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       data: props.rowData
     });
     event.preventDefault();
+    event.stopPropagation();
   };
   var onRowEditInit = function onRowEditInit(event) {
     props.onRowEditInit({
@@ -1737,6 +1740,20 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       index: props.rowIndex
     });
   };
+  var _onPointerDown = function onPointerDown(event) {
+    props.onRowPointerDown({
+      originalEvent: event,
+      data: props.rowData,
+      index: props.rowIndex
+    });
+  };
+  var _onPointerUp = function onPointerUp(event) {
+    props.onRowPointerUp({
+      originalEvent: event,
+      data: props.rowData,
+      index: props.rowIndex
+    });
+  };
   var onRightClick = function onRightClick(event) {
     props.onRowRightClick({
       originalEvent: event,
@@ -2026,6 +2043,12 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     onDoubleClick: function onDoubleClick(e) {
       return _onDoubleClick(e);
     },
+    onPointerDown: function onPointerDown(e) {
+      return _onPointerDown(e);
+    },
+    onPointerUp: function onPointerUp(e) {
+      return _onPointerUp(e);
+    },
     onContextMenu: function onContextMenu(e) {
       return onRightClick(e);
     },
@@ -2569,7 +2592,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
   };
   var onRowClick = function onRowClick(event) {
-    if (allowCellSelection() || !allowSelection(event)) {
+    if (allowCellSelection() || !allowSelection(event) || event.defaultPrevented) {
       return;
     }
     props.onRowClick && props.onRowClick(event);
@@ -2608,11 +2631,29 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       props.onRowDoubleClick(e);
     }
   };
+  var onRowPointerDown = function onRowPointerDown(e) {
+    var event = e.originalEvent;
+    if (DomHandler.isClickable(event.target)) {
+      return;
+    }
+    if (props.onRowPointerDown) {
+      props.onRowPointerDown(e);
+    }
+  };
+  var onRowPointerUp = function onRowPointerUp(e) {
+    var event = e.originalEvent;
+    if (DomHandler.isClickable(event.target)) {
+      return;
+    }
+    if (props.onRowPointerUp) {
+      props.onRowPointerUp(e);
+    }
+  };
   var onRowRightClick = function onRowRightClick(event) {
-    var isMultiSelection = isCheckboxSelectionModeInColumn && ObjectUtils.isEmpty(props.selection);
-    var data = isMultiSelection ? event.data : props.selection;
     if (props.onContextMenu || props.onContextMenuSelectionChange) {
-      if (!ObjectUtils.isEmpty(props.selection)) DomHandler.clearSelection();
+      var hasSelection = ObjectUtils.isNotEmpty(props.selection);
+      var data = hasSelection ? props.selection : event.data;
+      if (hasSelection) DomHandler.clearSelection();
       if (props.onContextMenuSelectionChange) {
         props.onContextMenuSelectionChange({
           originalEvent: event.originalEvent,
@@ -2997,6 +3038,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         onRadioChange: onRadioChange,
         onRowClick: onRowClick,
         onRowDoubleClick: onRowDoubleClick,
+        onRowPointerDown: onRowPointerDown,
+        onRowPointerUp: onRowPointerUp,
         onRowDragEnd: onRowDragEnd,
         onRowDragLeave: onRowDragLeave,
         onRowDragOver: onRowDragOver,
@@ -3794,42 +3837,45 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
   };
   var createMenuButton = function createMenuButton() {
-    if (showMenuButton()) {
-      var filterIconProps = mergeProps({
-        'aria-hidden': true
-      }, getColumnPTOptions('filterIcon'));
-      var icon = props.filterIcon || /*#__PURE__*/React.createElement(FilterIcon, filterIconProps);
-      var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, filterIconProps), {
-        props: props
-      });
-      var label = filterLabel();
-      var filterMenuButtonProps = mergeProps({
-        type: 'button',
-        className: cx('filterMenuButton', {
-          overlayVisibleState: overlayVisibleState,
-          hasFilter: hasFilter
-        }),
-        'aria-haspopup': true,
-        'aria-expanded': overlayVisibleState,
-        onClick: function onClick(e) {
-          return toggleMenu();
-        },
-        onKeyDown: function onKeyDown(e) {
-          return onToggleButtonKeyDown(e);
-        },
-        'aria-label': label
-      }, getColumnPTOptions('filterMenuButton', {
-        context: {
-          active: hasFilter()
-        }
-      }));
-      return /*#__PURE__*/React.createElement("button", _extends({
-        ref: iconRef
-      }, filterMenuButtonProps), columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
+    if (!showMenuButton()) {
+      return null;
     }
-    return null;
+    var filterIconProps = mergeProps({
+      'aria-hidden': true
+    }, getColumnPTOptions('filterIcon'));
+    var icon = props.filterIcon || /*#__PURE__*/React.createElement(FilterIcon, filterIconProps);
+    var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, filterIconProps), {
+      props: props
+    });
+    var label = filterLabel();
+    var filterMenuButtonProps = mergeProps({
+      type: 'button',
+      className: cx('filterMenuButton', {
+        overlayVisibleState: overlayVisibleState,
+        hasFilter: hasFilter
+      }),
+      'aria-haspopup': true,
+      'aria-expanded': overlayVisibleState,
+      onClick: function onClick(e) {
+        return toggleMenu();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return onToggleButtonKeyDown(e);
+      },
+      'aria-label': label
+    }, getColumnPTOptions('filterMenuButton', {
+      context: {
+        active: hasFilter()
+      }
+    }));
+    return /*#__PURE__*/React.createElement("button", _extends({
+      ref: iconRef
+    }, filterMenuButtonProps), columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
   };
   var createClearButton = function createClearButton() {
+    if (!showMenuButton()) {
+      return null;
+    }
     var filterClearIconProps = mergeProps({
       'aria-hidden': true
     }, getColumnPTOptions('filterClearIcon'));
@@ -4541,19 +4587,20 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var rowSpan = getColumnProp('rowSpan');
     var ariaSort = getAriaSort(sortMeta);
     var headerTooltip = getColumnProp('headerTooltip');
+    var headerClassName = getColumnProp('headerClassName');
     var hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
     var headerTooltipOptions = getColumnProp('headerTooltipOptions');
     var resizer = createResizer();
     var header = createHeader(sortMeta);
     var headerCellProps = mergeProps({
-      className: cx('headerCell', {
+      className: classNames(headerClassName, cx('headerCell', {
         headerProps: props,
         frozen: frozen,
         sortMeta: sortMeta,
         align: align,
         _isSortableDisabled: _isSortableDisabled,
         getColumnProp: getColumnProp
-      }),
+      })),
       style: style,
       role: 'columnheader',
       onClick: function onClick(e) {
@@ -6320,6 +6367,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       onRowClick: props.onRowClick,
       onRowCollapse: props.onRowCollapse,
       onRowDoubleClick: props.onRowDoubleClick,
+      onRowPointerDown: props.onRowPointerDown,
+      onRowPointerUp: props.onRowPointerUp,
       onRowEditCancel: props.onRowEditCancel,
       onRowEditChange: props.onRowEditChange,
       onRowEditComplete: props.onRowEditComplete,
@@ -6379,6 +6428,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       tabIndex: props.tabIndex,
       onRowClick: props.onRowClick,
       onRowDoubleClick: props.onRowDoubleClick,
+      onRowPointerDown: props.onRowPointerDown,
+      onRowPointerUp: props.onRowPointerUp,
       onRowMouseEnter: props.onRowMouseEnter,
       onRowMouseLeave: props.onRowMouseLeave,
       onCellClick: props.onCellClick,