primereact 9.6.0 → 9.6.2

package/datatable/datatable.d.ts

@@ -291,15 +291,39 @@ interface DataTableContextMenuSelectionChangeEvent<TValue extends DataTableValue
     /**
      * Selection object.
      */
-    value: DataTableSelection<TValue>;
+    value: TValue;
 }
 
 /**
- * Custom selection change event.
+ * Custom multiple selection change event.
  * @see {@link DataTableProps.onSelectionChange}
  * @event
  */
-interface DataTableSelectionChangeEvent<TValue extends DataTableValueArray> {
+interface DataTableSelectionMultipleChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: TValue;
+    /**
+     * Type of the selection.
+     */
+    type?: 'multiple' | 'all' | 'checkbox' | 'row' | undefined;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom single selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionSingleChangeEvent<TValue extends DataTableValueArray> {
     /**
      * Browser event.
      */
@@ -307,11 +331,35 @@ interface DataTableSelectionChangeEvent<TValue extends DataTableValueArray> {
     /**
      * Selection object.
      */
-    value: DataTableSelection<TValue>;
+    value: TValue[number];
+    /**
+     * Type of the selection.
+     */
+    type?: 'single' | 'radio' | 'row';
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom cell selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionCellChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: DataTableCellSelection<TValue>;
     /**
      * Type of the selection.
      */
-    type?: string;
+    type?: 'cell';
     /**
      * Extra options.
      */
@@ -699,8 +747,6 @@ type DataTableCellSelection<TValue extends DataTableValueArray> = {
     value: TValue[number][keyof TValue[number]];
 };
 
-type DataTableSelection<TValue extends DataTableValueArray> = DataTableRowData<TValue> | DataTableRowDataArray<TValue> | DataTableCellSelection<TValue>;
-
 export declare type DataTablePassThroughType<T> = PassThroughType<T, DataTablePassThroughMethodOptions<DataTableValueArray>>;
 
 /**
@@ -887,7 +933,7 @@ export interface DataTablePassThroughOptions {
  * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface DataTableProps<TValue extends DataTableValueArray> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu' | 'ref' | 'value'> {
+interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu' | 'ref' | 'value'> {
     /**
      * Unique identifier of the element.
      */
@@ -910,11 +956,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * Icon to display in the checkbox.
      */
     checkIcon?: IconType<DataTableProps<TValue>> | undefined;
-    /**
-     * Whether to cell selection is enabled or not.
-     * @defaultValue false
-     */
-    cellSelection?: boolean | undefined;
     /**
      * Style class of the component.
      */
@@ -1215,11 +1256,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * @defaultValue true
      */
     selectOnEdit?: boolean | undefined;
-    /**
-     * Selected row in single mode or an array of values in multiple mode.
-     * @defaultValue true
-     */
-    selection?: DataTableSelection<TValue> | undefined;
     /**
      * When a selectable row is clicked on RadioButton and Checkbox selection, it automatically decides whether to focus on elements such as checkbox or radio.
      * @defaultValue true
@@ -1229,10 +1265,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * A field property from the row to add Select &#123;field&#125; and Unselect &#123;field&#125; ARIA labels to checkbox/radio buttons.
      */
     selectionAriaLabel?: string | undefined;
-    /**
-     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
-     */
-    selectionMode?: 'single' | 'multiple' | 'checkbox' | 'radiobutton' | undefined;
     /**
      * When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page.
      * @defaultValue false
@@ -1486,11 +1518,6 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
      * @param {DataTableSelectAllChangeEvent} event - Custom select all change event.
      */
     onSelectAllChange?(event: DataTableSelectAllChangeEvent): void;
-    /**
-     * Callback to invoke when selection changes.
-     * @param {DataTableSelectionChangeEvent<TValue>} event - Custom selection change event.
-     */
-    onSelectionChange?(event: DataTableSelectionChangeEvent<TValue>): void;
     /**
      * Callback to invoke on sort.
      * @param {DataTableStateEvent} event - Custom state event.
@@ -1551,6 +1578,71 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
     pt?: DataTablePassThroughOptions;
 }
 
+interface DataTablePropsSingle<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection?: false | undefined;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode?: 'single' | 'radiobutton' | undefined;
+    /**
+     * Selected single value.
+     */
+    selection?: TValue[number] | undefined | null;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionSingleChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TValue>): void;
+}
+
+interface DataTablePropsMultiple<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection?: false | undefined;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'multiple' | 'checkbox' | null;
+    /**
+     * Selected array of values.
+     */
+    selection: TValue;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionMultipleChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionMultipleChangeEvent<TValue>): void;
+}
+
+interface DataTablePropsCell<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection: true;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'single' | 'multiple';
+    /**
+     * Selected cells.
+     */
+    selection: DataTableCellSelection<TValue> | null;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionCellChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionCellChangeEvent<TValue>): void;
+}
+
+export type DataTableProps<TValue extends DataTableValueArray> = DataTablePropsSingle<TValue> | DataTablePropsMultiple<TValue> | DataTablePropsCell<TValue>;
+
 /**
  * **PrimeReact - DataTable<TValue**
  *

package/datatable/datatable.esm.js

@@ -570,7 +570,6 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
   }, getColumnPTOptions('hiddenInputWrapper'));
   var hiddenInputProps = mergeProps({
     name: name,
-    ref: inputRef,
     type: 'radio',
     checked: props.checked,
     onFocus: function onFocus(e) {
@@ -598,7 +597,9 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
   var radiobuttonIconProps = mergeProps({
     className: 'p-radiobutton-icon'
   }, getColumnPTOptions('radiobuttonIcon'));
-  return /*#__PURE__*/React.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", hiddenInputProps)), /*#__PURE__*/React.createElement("div", radiobuttonProps, /*#__PURE__*/React.createElement("div", radiobuttonIconProps)));
+  return /*#__PURE__*/React.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef
+  }, hiddenInputProps))), /*#__PURE__*/React.createElement("div", radiobuttonProps, /*#__PURE__*/React.createElement("div", radiobuttonIconProps)));
 });
 RowRadioButton.displayName = 'RowRadioButton';
 
@@ -1291,7 +1292,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     if (!isRowEditor && editor) {
       var editorKeyHelperProps = mergeProps({
         tabIndex: '0',
-        ref: keyHelperRef,
         className: 'p-cell-editor-key-helper p-hidden-accessible',
         onFocus: function onFocus(e) {
           return onEditorFocus(e);
@@ -1299,12 +1299,13 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       }, getColumnPTOptions('editorKeyHelperLabel'));
       var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
       /* eslint-disable */
-      editorKeyHelper = /*#__PURE__*/React.createElement("a", editorKeyHelperProps, /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
+      editorKeyHelper = /*#__PURE__*/React.createElement("a", _extends({
+        ref: keyHelperRef
+      }, editorKeyHelperProps), /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
       /* eslint-enable */
     }
 
     var bodyCellProps = mergeProps({
-      ref: elementRef,
       style: style,
       className: className,
       rowSpan: props.rowSpan,
@@ -1326,7 +1327,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         return _onMouseUp(e);
       }
     }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
-    return /*#__PURE__*/React.createElement("td", bodyCellProps, editorKeyHelper, title, content);
+    return /*#__PURE__*/React.createElement("td", _extends({
+      ref: elementRef
+    }, bodyCellProps), editorKeyHelper, title, content);
   };
   return getVirtualScrollerOption('loading') ? createLoading() : createElement();
 });
@@ -2758,11 +2761,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var content = props.empty ? createEmptyContent() : createContent();
   var ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody';
   var tbodyProps = mergeProps({
-    ref: refCallback,
     style: props.style,
     className: props.className
   }, getColumnPTOptions(ptKey));
-  return /*#__PURE__*/React.createElement("tbody", tbodyProps, content);
+  return /*#__PURE__*/React.createElement("tbody", _extends({
+    ref: refCallback
+  }, tbodyProps), content);
 }));
 TableBody.displayName = 'TableBody';
 
@@ -2858,14 +2862,15 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
     props: props.tableProps
   });
   var footerCellProps = mergeProps({
-    ref: elementRef,
     style: style,
     className: className,
     role: 'cell',
     colSpan: colSpan,
     rowSpan: rowSpan
   }, getColumnPTOptions('footerCell'), getColumnPTOptions('root'));
-  return /*#__PURE__*/React.createElement("td", footerCellProps, content);
+  return /*#__PURE__*/React.createElement("td", _extends({
+    ref: elementRef
+  }, footerCellProps), content);
 });
 FooterCell.displayName = 'FooterCell';
 
@@ -3404,7 +3409,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       });
       var label = filterLabel();
       var filterMenuButtonProps = mergeProps({
-        ref: iconRef,
         type: 'button',
         className: _className,
         'aria-haspopup': true,
@@ -3417,7 +3421,9 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         },
         'aria-label': label
       }, getColumnPTOptions('filterMenuButton'));
-      return /*#__PURE__*/React.createElement("button", filterMenuButtonProps, columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      return /*#__PURE__*/React.createElement("button", _extends({
+        ref: iconRef
+      }, filterMenuButtonProps), columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -3646,7 +3652,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     });
     var items = props.display === 'row' ? createRowItems() : createItems();
     var filterOverlayProps = mergeProps({
-      ref: overlayRef,
       style: style,
       className: className,
       onKeyDown: function onKeyDown(e) {
@@ -3672,7 +3677,9 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
       onExited: onOverlayExited
-    }, /*#__PURE__*/React.createElement("div", filterOverlayProps, filterHeader, items, filterFooter)));
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      ref: overlayRef
+    }, filterOverlayProps), filterHeader, items, filterFooter)));
   };
   var className = classNames('p-column-filter p-fluid', {
     'p-column-filter-row': props.display === 'row',
@@ -4086,7 +4093,6 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var resizer = createResizer();
     var header = createHeader(sortMeta);
     var headerCellProps = mergeProps({
-      ref: elementRef,
       className: className,
       style: style,
       role: 'columnheader',
@@ -4116,7 +4122,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       rowSpan: rowSpan,
       'aria-sort': ariaSort
     }, getColumnPTOptions('headerCell'), getColumnPTOptions('root'));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", headerCellProps, resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", _extends({
+      ref: elementRef
+    }, headerCellProps), resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
       target: elementRef,
       content: headerTooltip
     }, headerTooltipOptions, {
@@ -5527,7 +5535,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return data;
   };
   useMountEffect(function () {
-    attributeSelector.current = UniqueComponentId();
+    if (elementRef.current) {
+      attributeSelector.current = UniqueComponentId();
+      elementRef.current.setAttribute(attributeSelector.current, '');
+    }
 
     //setFiltersState(cloneFilters(props.filters)); // Github #4248
     setD_filtersState(cloneFilters(props.filters));
@@ -5539,7 +5550,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   });
   useUpdateEffect(function () {
-    elementRef.current.setAttribute(attributeSelector.current, '');
     if (props.responsiveLayout === 'stack' && !props.scrollable) {
       createResponsiveStyle();
     }
@@ -5879,13 +5889,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
     var virtualScrollerOptions = props.virtualScrollerOptions || {};
     var wrapperProps = mergeProps({
-      ref: wrapperRef,
       className: 'p-datatable-wrapper',
       style: {
         maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
       }
     }, ptCallbacks.ptm('wrapper'));
-    return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement(VirtualScroller, _extends({
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: wrapperRef
+    }, wrapperProps), /*#__PURE__*/React.createElement(VirtualScroller, _extends({
       ref: virtualScrollerRef
     }, virtualScrollerOptions, {
       items: processedData,
@@ -5969,13 +5980,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createResizeHelper = function createResizeHelper() {
     if (props.resizableColumns) {
       var resizeHelperProps = mergeProps({
-        ref: resizeHelperRef,
         className: 'p-column-resizer-helper',
         style: {
           display: 'none'
         }
       }, ptCallbacks.ptm('resizeHelper'));
-      return /*#__PURE__*/React.createElement("div", resizeHelperProps);
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: resizeHelperRef
+      }, resizeHelperProps));
     }
     return null;
   };
@@ -6041,13 +6053,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var resizeHelper = createResizeHelper();
   var reorderIndicators = createReorderIndicators();
   var rootProps = mergeProps({
-    ref: elementRef,
     id: props.id,
     className: className,
     style: props.style,
     'data-scrollselectors': '.p-datatable-wrapper'
   }, DataTableBase.getOtherProps(props), ptCallbacks.ptm('root'));
-  return /*#__PURE__*/React.createElement("div", rootProps, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: elementRef
+  }, rootProps), loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
 });
 DataTable.displayName = 'DataTable';