primereact 8.4.0 → 8.6.0

package/datatable/datatable.js

@@ -26,7 +26,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
   var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
   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];
 
@@ -39,7 +39,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
 
@@ -219,7 +218,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       tabIndex: tabIndex,
       onKeyDown: onKeyDown,
       onFocus: onFocus,
-      onBlur: onBlur
+      onBlur: onBlur,
+      "aria-label": props.ariaLabel
     }, /*#__PURE__*/React__namespace.createElement("span", {
       className: iconClassName
     })));
@@ -281,7 +281,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       onFocus: onFocus,
       onBlur: onBlur,
       onChange: onChange,
-      onKeyDown: onKeyDown
+      onKeyDown: onKeyDown,
+      "aria-label": props.ariaLabel
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: boxClassName,
       onClick: onClick,
@@ -852,15 +853,25 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           rowIndex: props.rowIndex,
           props: props.tableProps
         }) : true;
+        var label;
+
+        if (showSelection) {
+          var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
+          var ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
+          label = "".concat(props.selected ? PrimeReact.ariaLabel('unselectLabel') : PrimeReact.ariaLabel('selectLabel'), " ").concat(ariaLabelText);
+        }
+
         content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
           checked: props.selected,
           onChange: onRadioChange,
           tabIndex: props.tabIndex,
-          tableSelector: props.tableSelector
+          tableSelector: props.tableSelector,
+          ariaLabel: label
         }), selectionMode === 'multiple' && /*#__PURE__*/React__namespace.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, {
@@ -873,6 +884,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       } else if (expander) {
         var iconClassName = utils.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 = utils.ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
+
+        var _label = "".concat(props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
+
         var expanderProps = {
           onClick: onRowToggle,
           className: 'p-row-toggler p-link',
@@ -884,9 +902,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           type: "button",
           "aria-expanded": props.expanded,
           "aria-controls": ariaControls,
-          tabIndex: props.tabIndex
+          tabIndex: props.tabIndex,
+          "aria-label": _label
         }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: expanderProps.iconClassName
+          className: expanderProps.iconClassName,
+          "aria-hidden": "true"
         }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
 
         if (body) {
@@ -959,7 +979,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
             rowEditor: rowEditorProps
           });
         }
-      } else if (body && !editingState) {
+      } else if (body && (!editingState || !editor)) {
         content = body ? utils.ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
           field: field,
@@ -1366,6 +1386,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
             onEditingMetaChange: props.onEditingMetaChange,
             onRowToggle: props.onRowToggle,
             selection: props.selection,
+            selectionAriaLabel: props.tableProps.selectionAriaLabel,
             allowCellSelection: props.allowCellSelection,
             compareSelectionBy: props.compareSelectionBy,
             selectOnEdit: props.selectOnEdit,
@@ -1440,13 +1461,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     };
 
     var iconClassName = utils.classNames('p-row-toggler-icon', props.expanded ? props.expandedRowIcon : props.collapsedRowIcon);
+    var label = props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel');
     return /*#__PURE__*/React__namespace.createElement("button", {
       type: "button",
       onClick: onClick,
       className: "p-row-toggler p-link",
-      tabIndex: props.tabIndex
+      tabIndex: props.tabIndex,
+      "aria-label": label
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: iconClassName
+      className: iconClassName,
+      "aria-hidden": "true"
     }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
   RowTogglerButton.displayName = 'RowTogglerButton';
@@ -2464,19 +2488,27 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
     var createExpansion = function createExpansion(rowData, index, expanded, colSpan) {
       if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
-        var _content3 = utils.ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, {
-          index: index
-        });
-
         var id = "".concat(props.tableSelector, "_content_").concat(index, "_expanded");
+        var options = {
+          index: index,
+          customRendering: false
+        };
+
+        var _content3 = utils.ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options); // check if the user wants complete control of the rendering
+
+
+        if (!options.customRendering) {
+          _content3 = /*#__PURE__*/React__namespace.createElement("td", {
+            role: "cell",
+            colSpan: colSpan
+          }, _content3);
+        }
+
         return /*#__PURE__*/React__namespace.createElement("tr", {
           id: id,
           className: "p-datatable-row-expansion",
           role: "row"
-        }, /*#__PURE__*/React__namespace.createElement("td", {
-          role: "cell",
-          colSpan: colSpan
-        }, _content3));
+        }, _content3);
       }
 
       return null;
@@ -3072,6 +3104,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       }];
     };
 
+    var filterLabel = function filterLabel() {
+      return PrimeReact.localeOption('filter');
+    };
+
     var noFilterLabel = function noFilterLabel() {
       return PrimeReact.localeOption('noFilter');
     };
@@ -3171,6 +3207,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           'p-column-filter-menu-button-active': hasFilter()
         });
 
+        var label = filterLabel();
         return /*#__PURE__*/React__namespace.createElement("button", {
           ref: iconRef,
           type: "button",
@@ -3178,10 +3215,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           "aria-haspopup": true,
           "aria-expanded": overlayVisibleState,
           onClick: toggleMenu,
-          onKeyDown: onToggleButtonKeyDown
+          onKeyDown: onToggleButtonKeyDown,
+          "aria-label": label
         }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: "pi pi-filter-icon pi-filter"
-        }));
+          className: "pi pi-filter-icon pi-filter",
+          "aria-hidden": "true"
+        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
 
       return null;
@@ -3193,13 +3232,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           'p-hidden-space': !hasRowFilter()
         });
 
+        var clearLabel = clearButtonLabel();
         return /*#__PURE__*/React__namespace.createElement("button", {
           className: _className2,
           type: "button",
-          onClick: clearFilter
+          onClick: clearFilter,
+          "aria-label": clearLabel
         }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: "pi pi-filter-slash"
-        }));
+          className: "pi pi-filter-slash",
+          "aria-hidden": "true"
+        }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
 
       return null;
@@ -4325,7 +4367,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
         var dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
 
         var reviver = function reviver(key, value) {
-          return typeof value === "string" && dateFormat.test(value) ? new Date(value) : value;
+          return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
         };
 
         if (stateString) {
@@ -4893,7 +4935,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
       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;
@@ -4996,7 +5038,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
       if (columnSortable.current && columnSortFunction.current) {
         value = columnSortFunction.current({
-          rowData: value,
+          data: data,
           field: field,
           order: order
         });
@@ -5035,11 +5077,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
           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) {
@@ -5052,9 +5095,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
 
     var multisortField = function multisortField(data1, data2, multiSortMeta, index) {
       var value1 = utils.ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
-      var value2 = utils.ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
+      var value2 = utils.ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field); // check if they are equal handling dates and locales
 
-      if (value1 === value2) {
+      if (utils.ObjectUtils.compare(value1, value2, PrimeReact__default["default"].locale) === 0) {
         return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0;
       }
 
@@ -5352,7 +5395,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     };
 
     var closeEditingCell = function closeEditingCell() {
-      if (props.editMode !== "row") {
+      if (props.editMode !== 'row') {
         document.body.click();
       }
     };
@@ -5922,6 +5965,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, hooks, pagina
     dragSelection: false,
     cellSelection: false,
     selection: null,
+    selectionAriaLabel: null,
     onSelectionChange: null,
     contextMenuSelection: null,
     onContextMenuSelectionChange: null,