primereact 8.5.0 → 8.6.0

package/datatable/datatable.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Column } from '../column';
 import { PaginatorTemplate } from '../paginator';
-import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller/virtualscroller';
+import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller/virtualscroller';
 
 type DataTableHeaderTemplateType = React.ReactNode | ((options: DataTableHeaderTemplateOptions) => React.ReactNode);
 
@@ -206,6 +206,7 @@ interface DataTableRowReorderParams {
 
 interface DataTableRowExpansionTemplate {
     index: number;
+    customRendering: boolean;
 }
 
 interface DataTableRowClassNameOptions {
@@ -235,131 +236,132 @@ interface DataTableRowEditValidatorOptions {
 export interface DataTableProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu' | 'ref'> {
     id?: string;
     value?: any[];
-    header?: DataTableHeaderTemplateType;
-    footer?: DataTableFooterTemplateType;
-    style?: object;
-    className?: string;
-    tableStyle?: object;
-    tableClassName?: string;
-    paginator?: boolean;
-    paginatorPosition?: DataTablePaginatorPositionType;
     alwaysShowPaginator?: boolean;
-    paginatorClassName?: string;
-    paginatorTemplate?: PaginatorTemplate;
-    paginatorLeft?: React.ReactNode;
-    paginatorRight?: React.ReactNode;
-    paginatorDropdownAppendTo?: DataTableAppendToType;
-    pageLinkSize?: number;
-    rowsPerPageOptions?: number[];
-    currentPageReportTemplate?: string;
-    first?: number;
-    rows?: number;
-    totalRecords?: number;
-    lazy?: boolean;
-    sortField?: string;
-    sortOrder?: DataTableSortOrderType;
-    multiSortMeta?: DataTableMultiSortMetaType;
-    sortMode?: DataTableSortModeType;
-    defaultSortOrder?: DataTableSortOrderType;
-    removableSort?: boolean;
-    emptyMessage?: DataTableEmptyMessageType;
-    selectionMode?: DataTableSelectionModeType;
-    dragSelection?: boolean;
+    autoLayout?: boolean;
+    breakpoint?: string;
     cellSelection?: boolean;
-    selection?: any | any[];
-    contextMenuSelection?: object;
+    className?: string;
+    collapsedRowIcon?: string;
+    columnResizeMode?: DataTableColumnResizeModeType;
     compareSelectionBy?: DataTableCompareSelectionByType;
+    contextMenuSelection?: object;
+    csvSeparator?: string;
+    currentPageReportTemplate?: string;
     dataKey?: string;
-    metaKeySelection?: boolean;
-    selectOnEdit?: boolean;
-    selectionPageOnly?: boolean;
-    selectionAutoFocus?: boolean;
-    showSelectAll?: boolean;
-    selectAll?: boolean;
-    headerColumnGroup?: React.ReactNode;
-    footerColumnGroup?: React.ReactNode;
+    defaultSortOrder?: DataTableSortOrderType;
+    dragSelection?: boolean;
+    editMode?: string;
+    editingRows?: any[] | DataTableEditingRows;
+    emptyMessage?: DataTableEmptyMessageType;
+    expandableRowGroups?: boolean;
+    expandedRowIcon?: string;
     expandedRows?: any[] | DataTableExpandedRows;
-    resizableColumns?: boolean;
-    columnResizeMode?: DataTableColumnResizeModeType;
-    reorderableColumns?: boolean;
-    reorderableRows?: boolean;
-    filters?: DataTableFilterMeta;
-    globalFilter?: DataTableGlobalFilterType;
+    exportFilename?: string;
     filterDelay?: number;
+    filterDisplay?: DataTableFilterDisplayType;
     filterLocale?: string;
-    scrollable?: boolean;
-    scrollHeight?: string;
-    scrollDirection?: DataTableScrollDirectionType;
-    virtualScrollerOptions?: VirtualScrollerProps;
-    frozenWidth?: string;
+    filters?: DataTableFilterMeta;
+    first?: number;
+    footer?: DataTableFooterTemplateType;
+    footerColumnGroup?: React.ReactNode;
     frozenValue?: any[];
-    csvSeparator?: string;
-    exportFilename?: string;
-    rowGroupMode?: string;
-    autoLayout?: boolean;
+    frozenWidth?: string;
+    globalFilter?: DataTableGlobalFilterType;
+    globalFilterFields?: string[];
+    groupRowsBy?: string;
+    header?: DataTableHeaderTemplateType;
+    headerColumnGroup?: React.ReactNode;
+    lazy?: boolean;
     loading?: boolean;
     loadingIcon?: string;
-    tabIndex?: number;
-    stateKey?: string;
-    stateStorage?: DataTableStateStorageType;
-    groupRowsBy?: string;
-    editMode?: string;
-    editingRows?: any[] | DataTableEditingRows;
-    expandableRowGroups?: boolean;
+    metaKeySelection?: boolean;
+    multiSortMeta?: DataTableMultiSortMetaType;
+    pageLinkSize?: number;
+    paginator?: boolean;
+    paginatorClassName?: string;
+    paginatorDropdownAppendTo?: DataTableAppendToType;
+    paginatorLeft?: React.ReactNode;
+    paginatorPosition?: DataTablePaginatorPositionType;
+    paginatorRight?: React.ReactNode;
+    paginatorTemplate?: PaginatorTemplate;
+    removableSort?: boolean;
+    reorderableColumns?: boolean;
+    reorderableRows?: boolean;
+    resizableColumns?: boolean;
+    responsiveLayout?: DataTableResponsiveLayoutType;
+    rowGroupFooterTemplate?: DataTableRowGroupFooterTemplateType;
+    rowGroupHeaderTemplate?: DataTableRowGroupHeaderTemplateType;
+    rowGroupMode?: string;
     rowHover?: boolean;
+    rows?: number;
+    rowsPerPageOptions?: number[];
+    scrollDirection?: DataTableScrollDirectionType;
+    scrollHeight?: string;
+    scrollable?: boolean;
+    selectAll?: boolean;
+    selectOnEdit?: boolean;
+    selection?: any | any[];
+    selectionAutoFocus?: boolean;
+    selectionAriaLabel?: string;
+    selectionMode?: DataTableSelectionModeType;
+    selectionPageOnly?: boolean;
     showGridlines?: boolean;
-    stripedRows?: boolean;
+    showSelectAll?: boolean;
     size?: DataTableSizeType;
-    responsiveLayout?: DataTableResponsiveLayoutType;
-    breakpoint?: string;
-    filterDisplay?: DataTableFilterDisplayType;
-    expandedRowIcon?: string;
-    collapsedRowIcon?: string;
-    globalFilterFields?: string[];
-    rowGroupHeaderTemplate?: DataTableRowGroupHeaderTemplateType;
-    rowGroupFooterTemplate?: DataTableRowGroupFooterTemplateType;
-    onSelectAllChange?(e: DataTableSelectAllChangeParams): void;
-    onRowEditComplete?(e: DataTableRowEditCompleteParams): void;
-    showSelectionElement?(data: any, options: DataTableShowSelectionElementOptions): boolean | undefined | null;
-    showRowReorderElement?(data: any, options: DataTableShowRowReorderElementOptions): boolean | undefined | null;
-    isDataSelectable?(e: DataTableDataSelectableParams): boolean | undefined | null;
-    onSelectionChange?(e: DataTableSelectionChangeParams): void;
-    onContextMenuSelectionChange?(e: DataTableSelectionChangeParams): void;
-    rowExpansionTemplate?(data: any, options: DataTableRowExpansionTemplate): React.ReactNode;
-    onRowToggle?(e: DataTableRowToggleParams): void;
-    rowClassName?(data: any, options: DataTableRowClassNameOptions): object | string;
+    sortField?: string;
+    sortMode?: DataTableSortModeType;
+    sortOrder?: DataTableSortOrderType;
+    stateKey?: string;
+    stateStorage?: DataTableStateStorageType;
+    stripedRows?: boolean;
+    style?: object;
+    tabIndex?: number;
+    tableClassName?: string;
+    tableStyle?: object;
+    totalRecords?: number;
+    virtualScrollerOptions?: VirtualScrollerProps;
     cellClassName?(value: any, options: DataTableCellClassNameOptions): object | string;
+    customRestoreState?(): object;
+    customSaveState?(state: object): void;
+    exportFunction?(e: DataTableExportFunctionParams): any;
+    isDataSelectable?(e: DataTableDataSelectableParams): boolean | undefined | null;
+    onAllRowsSelect?(e: DataTableSelectParams): void;
+    onAllRowsUnselect?(e: DataTableUnselectParams): void;
+    onCellClick?(e: DataTableCellClickEventParams): void;
+    onCellSelect?(e: DataTableSelectParams): void;
+    onCellUnselect?(e: DataTableUnselectParams): void;
+    onColReorder?(e: DataTableColReorderParams): void;
     onColumnResizeEnd?(e: DataTableColumnResizeEndParams): void;
     onColumnResizerClick?(e: DataTableColumnResizerClickParams): void;
     onColumnResizerDoubleClick?(e: DataTableColumnResizerClickParams): void;
-    onSort?(e: DataTablePFSEvent): void;
-    onPage?(e: DataTablePFSEvent): void;
+    onContextMenu?(e: DataTableRowEventParams): void;
+    onContextMenuSelectionChange?(e: DataTableSelectionChangeParams): void;
     onFilter?(e: DataTablePFSEvent): void;
-    onAllRowsSelect?(e: DataTableSelectParams): void;
-    onAllRowsUnselect?(e: DataTableUnselectParams): void;
+    onPage?(e: DataTablePFSEvent): void;
     onRowClick?(e: DataTableRowClickEventParams): void;
+    onRowCollapse?(e: DataTableRowEventParams): void;
     onRowDoubleClick?(e: DataTableRowClickEventParams): void;
-    onRowSelect?(e: DataTableSelectParams): void;
-    onRowUnselect?(e: DataTableUnselectParams): void;
+    onRowEditCancel?(e: DataTableRowEditParams): void;
+    onRowEditChange?(e: DataTableRowEditParams): void;
+    onRowEditComplete?(e: DataTableRowEditCompleteParams): void;
+    onRowEditInit?(e: DataTableRowEditParams): void;
+    onRowEditSave?(e: DataTableRowEditSaveParams): void;
     onRowExpand?(e: DataTableRowEventParams): void;
-    onRowCollapse?(e: DataTableRowEventParams): void;
-    onCellClick?(e: DataTableCellClickEventParams): void;
-    onCellSelect?(e: DataTableSelectParams): void;
-    onCellUnselect?(e: DataTableUnselectParams): void;
-    onContextMenu?(e: DataTableRowEventParams): void;
-    onColReorder?(e: DataTableColReorderParams): void;
     onRowReorder?(e: DataTableRowReorderParams): void;
+    onRowSelect?(e: DataTableSelectParams): void;
+    onRowToggle?(e: DataTableRowToggleParams): void;
+    onRowUnselect?(e: DataTableUnselectParams): void;
+    onSelectAllChange?(e: DataTableSelectAllChangeParams): void;
+    onSelectionChange?(e: DataTableSelectionChangeParams): void;
+    onSort?(e: DataTablePFSEvent): void;
+    onStateRestore?(state: object): void;
+    onStateSave?(state: object): void;
     onValueChange?(value: any[]): void;
+    rowClassName?(data: any, options: DataTableRowClassNameOptions): object | string;
     rowEditValidator?(data: any, options: DataTableRowEditValidatorOptions): boolean;
-    onRowEditInit?(e: DataTableRowEditParams): void;
-    onRowEditSave?(e: DataTableRowEditSaveParams): void;
-    onRowEditCancel?(e: DataTableRowEditParams): void;
-    onRowEditChange?(e: DataTableRowEditParams): void;
-    exportFunction?(e: DataTableExportFunctionParams): any;
-    customSaveState?(state: object): void;
-    customRestoreState?(): object;
-    onStateSave?(state: object): void;
-    onStateRestore?(state: object): void;
+    rowExpansionTemplate?(data: any, options: DataTableRowExpansionTemplate): React.ReactNode;
+    showRowReorderElement?(data: any, options: DataTableShowRowReorderElementOptions): boolean | undefined | null;
+    showSelectionElement?(data: any, options: DataTableShowSelectionElementOptions): boolean | undefined | null;
     children?: React.ReactNode;
 }
 

package/datatable/datatable.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { localeOption, FilterMatchMode, FilterOperator, FilterService } from 'primereact/api';
+import PrimeReact, { ariaLabel, localeOption, FilterMatchMode, FilterOperator, FilterService } from 'primereact/api';
 import { useEventListener, useUpdateEffect, useUnmountEffect, usePrevious, useMountEffect, useOverlayListener } from 'primereact/hooks';
 import { Paginator } from 'primereact/paginator';
 import { classNames, DomHandler, ObjectUtils, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
@@ -13,7 +13,7 @@ import { InputText } from 'primereact/inputtext';
 import { Portal } from 'primereact/portal';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -26,7 +26,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -206,7 +205,8 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     tabIndex: tabIndex,
     onKeyDown: onKeyDown,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur,
+    "aria-label": props.ariaLabel
   }, /*#__PURE__*/React.createElement("span", {
     className: iconClassName
   })));
@@ -268,7 +268,8 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
     onFocus: onFocus,
     onBlur: onBlur,
     onChange: onChange,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    "aria-label": props.ariaLabel
   })), /*#__PURE__*/React.createElement("div", {
     className: boxClassName,
     onClick: onClick,
@@ -839,15 +840,25 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         rowIndex: props.rowIndex,
         props: props.tableProps
       }) : true;
+      var label;
+
+      if (showSelection) {
+        var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
+        var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
+        label = "".concat(props.selected ? ariaLabel('unselectLabel') : ariaLabel('selectLabel'), " ").concat(ariaLabelText);
+      }
+
       content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
         checked: props.selected,
         onChange: onRadioChange,
         tabIndex: props.tabIndex,
-        tableSelector: props.tableSelector
+        tableSelector: props.tableSelector,
+        ariaLabel: label
       }), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(RowCheckbox, {
         checked: props.selected,
         onChange: onCheckboxChange,
-        tabIndex: props.tabIndex
+        tabIndex: props.tabIndex,
+        ariaLabel: label
       }));
     } else if (rowReorder) {
       var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
@@ -860,6 +871,13 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     } else if (expander) {
       var iconClassName = classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
       var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
+
+      var _ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
+
+      var _ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
+
+      var _label = "".concat(props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
+
       var expanderProps = {
         onClick: onRowToggle,
         className: 'p-row-toggler p-link',
@@ -871,9 +889,11 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         type: "button",
         "aria-expanded": props.expanded,
         "aria-controls": ariaControls,
-        tabIndex: props.tabIndex
+        tabIndex: props.tabIndex,
+        "aria-label": _label
       }, /*#__PURE__*/React.createElement("span", {
-        className: expanderProps.iconClassName
+        className: expanderProps.iconClassName,
+        "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement(Ripple, null));
 
       if (body) {
@@ -946,7 +966,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           rowEditor: rowEditorProps
         });
       }
-    } else if (body && !editingState) {
+    } else if (body && (!editingState || !editor)) {
       content = body ? ObjectUtils.getJSXElement(body, props.rowData, {
         column: props.column,
         field: field,
@@ -1353,6 +1373,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           onEditingMetaChange: props.onEditingMetaChange,
           onRowToggle: props.onRowToggle,
           selection: props.selection,
+          selectionAriaLabel: props.tableProps.selectionAriaLabel,
           allowCellSelection: props.allowCellSelection,
           compareSelectionBy: props.compareSelectionBy,
           selectOnEdit: props.selectOnEdit,
@@ -1427,13 +1448,16 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
   };
 
   var iconClassName = classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
+  var label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onClick,
     className: "p-row-toggler p-link",
-    tabIndex: props.tabIndex
+    tabIndex: props.tabIndex,
+    "aria-label": label
   }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName
+    className: iconClassName,
+    "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement(Ripple, null));
 });
 RowTogglerButton.displayName = 'RowTogglerButton';
@@ -2451,19 +2475,27 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 
   var createExpansion = function createExpansion(rowData, index, expanded, colSpan) {
     if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
-      var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, {
-        index: index
-      });
-
       var id = "".concat(props.tableSelector, "_content_").concat(index, "_expanded");
+      var options = {
+        index: index,
+        customRendering: false
+      };
+
+      var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options); // check if the user wants complete control of the rendering
+
+
+      if (!options.customRendering) {
+        _content3 = /*#__PURE__*/React.createElement("td", {
+          role: "cell",
+          colSpan: colSpan
+        }, _content3);
+      }
+
       return /*#__PURE__*/React.createElement("tr", {
         id: id,
         className: "p-datatable-row-expansion",
         role: "row"
-      }, /*#__PURE__*/React.createElement("td", {
-        role: "cell",
-        colSpan: colSpan
-      }, _content3));
+      }, _content3);
     }
 
     return null;
@@ -3059,6 +3091,10 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     }];
   };
 
+  var filterLabel = function filterLabel() {
+    return localeOption('filter');
+  };
+
   var noFilterLabel = function noFilterLabel() {
     return localeOption('noFilter');
   };
@@ -3158,6 +3194,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         'p-column-filter-menu-button-active': hasFilter()
       });
 
+      var label = filterLabel();
       return /*#__PURE__*/React.createElement("button", {
         ref: iconRef,
         type: "button",
@@ -3165,10 +3202,12 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         "aria-haspopup": true,
         "aria-expanded": overlayVisibleState,
         onClick: toggleMenu,
-        onKeyDown: onToggleButtonKeyDown
+        onKeyDown: onToggleButtonKeyDown,
+        "aria-label": label
       }, /*#__PURE__*/React.createElement("span", {
-        className: "pi pi-filter-icon pi-filter"
-      }));
+        className: "pi pi-filter-icon pi-filter",
+        "aria-hidden": "true"
+      }), /*#__PURE__*/React.createElement(Ripple, null));
     }
 
     return null;
@@ -3180,13 +3219,16 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         'p-hidden-space': !hasRowFilter()
       });
 
+      var clearLabel = clearButtonLabel();
       return /*#__PURE__*/React.createElement("button", {
         className: _className2,
         type: "button",
-        onClick: clearFilter
+        onClick: clearFilter,
+        "aria-label": clearLabel
       }, /*#__PURE__*/React.createElement("span", {
-        className: "pi pi-filter-slash"
-      }));
+        className: "pi pi-filter-slash",
+        "aria-hidden": "true"
+      }), /*#__PURE__*/React.createElement(Ripple, null));
     }
 
     return null;
@@ -4880,7 +4922,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var eventMeta;
     columnSortable.current = column.props.sortable;
     columnSortFunction.current = column.props.sortFunction;
-    columnField.current = column.props.sortField;
+    columnField.current = sortField;
 
     if (props.sortMode === 'multiple') {
       var metaKey = event.metaKey || event.ctrlKey;
@@ -4983,7 +5025,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     if (columnSortable.current && columnSortFunction.current) {
       value = columnSortFunction.current({
-        rowData: value,
+        data: data,
         field: field,
         order: order
       });
@@ -5022,11 +5064,12 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return meta.field === columnField.current;
       });
       var field = columnField.current;
-      var order = meta ? meta.order : defaultSortOrder;
+      var order = meta ? meta.order : props.defaultSortOrder;
       value = columnSortFunction.current({
-        rowData: value,
+        data: data,
         field: field,
-        order: order
+        order: order,
+        multiSortMeta: multiSortMeta
       });
     } else {
       value.sort(function (data1, data2) {
@@ -5039,9 +5082,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var multisortField = function multisortField(data1, data2, multiSortMeta, index) {
     var value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
-    var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
+    var value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field); // check if they are equal handling dates and locales
 
-    if (value1 === value2) {
+    if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) {
       return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0;
     }
 
@@ -5909,6 +5952,7 @@ DataTable.defaultProps = {
   dragSelection: false,
   cellSelection: false,
   selection: null,
+  selectionAriaLabel: null,
   onSelectionChange: null,
   contextMenuSelection: null,
   onContextMenuSelectionChange: null,