primereact 10.7.0 → 10.8.1

package/datatable/datatable.d.ts

@@ -943,7 +943,15 @@ export interface DataTablePassThroughOptions {
     /**
      * Uses to pass attributes to the rowgroup footer's DOM element.
      */
-    rowgroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    rowGroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup toggler's DOM element.
+     */
+    rowGroupToggler?: DataTablePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup toggler icon's DOM element.
+     */
+    rowGroupTogglerIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the empty message's DOM element.
      */
@@ -1004,6 +1012,34 @@ export interface DataTablePassThroughOptions {
     hooks?: ComponentHooks;
 }
 
+/**
+ * Defines current options in DataTable bodyRow.
+ */
+export interface DataTableBodyRowContext {
+    selected: boolean;
+    selectable: boolean;
+    stripedRows: boolean;
+    index: number;
+}
+
+/**
+ * Defines current inline state in DataTable bodyRow.
+ */
+export interface DataTableBodyRowState {
+    editing: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method for bodyRow.
+ */
+export interface DataTableBodyRowPassThroughMethodOptions<TValue extends DataTableValueArray> {
+    hostName: string;
+    context: DataTableBodyRowContext;
+    parent: DataTablePassThroughMethodOptions<TValue>;
+    props: DataTableBaseProps<TValue>;
+    state: DataTableBodyRowState;
+}
+
 type SortOrder = 1 | 0 | -1 | null | undefined;
 
 /**
@@ -1068,7 +1104,7 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      * Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.
      * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
      */
-    dataKey?: string | undefined;
+    dataKey?: string | undefined | ((data: any) => string);
     /**
      * Default sort order of an unsorted column.
      * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)

package/datatable/datatable.esm.js

@@ -911,7 +911,7 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     props: props
   });
   var tabIndex = props.disabled ? null : '0';
-  var checkboxProps = mergeProps({
+  var checkboxProps = {
     role: 'checkbox',
     'aria-checked': props.checked,
     tabIndex: tabIndex,
@@ -919,8 +919,10 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     'aria-label': props.ariaLabel,
     checked: props.checked,
     icon: checkIcon,
-    disabled: props.disabled
-  }, getColumnPTOptions('rowCheckbox'));
+    disabled: props.disabled,
+    unstyled: props.unstyled,
+    pt: getColumnPTOptions('rowCheckbox')
+  };
   return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
 });
 RowCheckbox.displayName = 'RowCheckbox';
@@ -936,9 +938,9 @@ var classes = {
       'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
     });
   },
-  radiobuttonbox: 'p-radiobutton-box',
-  radiobuttoninput: 'p-radiobutton-input',
-  radiobuttonicon: 'p-radiobutton-icon'
+  box: 'p-radiobutton-box',
+  input: 'p-radiobutton-input',
+  icon: 'p-radiobutton-icon'
 };
 var RadioButtonBase = ComponentBase.extend({
   defaultProps: {
@@ -1095,19 +1097,19 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       readOnly: props.readonly,
       required: props.required,
       tabIndex: props.tabIndex,
-      className: cx('radiobuttoninput')
-    }, ariaProps), inProps.input, ptm('radiobuttoninput'));
+      className: cx('input')
+    }, ariaProps), inProps.input, ptm('input'));
     return /*#__PURE__*/React.createElement("input", _extends({
       ref: inputRef
     }, inputProps));
   };
   var createBoxElement = function createBoxElement() {
     var boxProps = mergeProps({
-      className: cx('radiobuttonbox')
-    }, inProps.box, ptm('radiobuttonbox'));
+      className: cx('box')
+    }, inProps.box, ptm('box'));
     var iconProps = mergeProps({
-      className: cx('radiobuttonicon')
-    }, inProps.icon, ptm('radiobuttonicon'));
+      className: cx('icon')
+    }, inProps.icon, ptm('icon'));
     return /*#__PURE__*/React.createElement("div", boxProps, /*#__PURE__*/React.createElement("div", iconProps));
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
@@ -1149,18 +1151,16 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
       props.onChange(event);
     }
   };
-  var radioButtonProps = mergeProps({
+  var radioButtonProps = {
     role: 'radio',
     'aria-checked': props.checked,
     checked: props.checked,
     disabled: props.disabled,
     name: "".concat(props.tableSelector, "_dt_radio"),
     onChange: onChange,
-    input: getColumnPTOptions('radiobuttoninput'),
-    box: getColumnPTOptions('radiobuttonbox'),
-    icon: getColumnPTOptions('radiobuttonicon'),
-    unstyled: props.unstyled
-  }, getColumnPTOptions('radiobutton'));
+    unstyled: props.unstyled,
+    pt: getColumnPTOptions('rowRadioButton')
+  };
   return /*#__PURE__*/React.createElement(RadioButton, radioButtonProps);
 });
 RowRadioButton.displayName = 'RowRadioButton';
@@ -2451,7 +2451,8 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
-    cx = _props$ptCallbacks.cx;
+    cx = _props$ptCallbacks.cx,
+    isUnstyled = _props$ptCallbacks.isUnstyled;
   var _onClick = function onClick(event) {
     props.onClick({
       originalEvent: event,
@@ -2474,8 +2475,9 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
   };
   var rowGroupTogglerIconProps = mergeProps({
     className: cx('rowGroupTogglerIcon'),
-    'aria-hidden': true
-  }, getColumnPTOptions('rowGroupTogglerIcon'));
+    'aria-hidden': true,
+    unstyled: isUnstyled()
+  }, ptm('rowGroupTogglerIcon'), getColumnPTOptions('rowGroupTogglerIcon'));
   var icon = props.expanded ? props.expandedRowIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, rowGroupTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, rowGroupTogglerIconProps);
   var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$8({}, rowGroupTogglerIconProps), {
     props: props
@@ -2488,8 +2490,9 @@ var RowTogglerButton = /*#__PURE__*/React.memo(function (props) {
     },
     className: cx('rowGroupToggler'),
     tabIndex: props.tabIndex,
-    'aria-label': label
-  }, getColumnPTOptions('rowGroupToggler'));
+    'aria-label': label,
+    unstyled: isUnstyled()
+  }, ptm('rowGroupToggler'), getColumnPTOptions('rowGroupToggler'));
   return /*#__PURE__*/React.createElement("button", rowGroupTogglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
 });
 RowTogglerButton.displayName = 'RowTogglerButton';
@@ -2503,7 +2506,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
     cx = _props$ptCallbacks.cx,
-    isUnsyled = _props$ptCallbacks.isUnsyled;
+    isUnstyled = _props$ptCallbacks.isUnstyled;
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     rowGroupHeaderStyleObjectState = _React$useState2[0],
@@ -2822,32 +2825,20 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var selectRange = function selectRange(event) {
     var rangeStart;
     var rangeEnd;
-    var selectedSize;
     var isAllowCellSelection = allowCellSelection();
-    var index = ObjectUtils.findIndexInList(event.data, props.value, props.dataKey);
     if (rangeRowIndex.current > anchorRowIndex.current) {
       rangeStart = anchorRowIndex.current;
       rangeEnd = rangeRowIndex.current;
-      if (!isAllowCellSelection) {
-        selectedSize = rangeEnd - rangeStart;
-        rangeEnd = index;
-        rangeStart = index - selectedSize;
-      }
     } else if (rangeRowIndex.current < anchorRowIndex.current) {
       rangeStart = rangeRowIndex.current;
       rangeEnd = anchorRowIndex.current;
-      if (!isAllowCellSelection) {
-        selectedSize = rangeEnd - rangeStart;
-        rangeStart = index;
-        rangeEnd = index + selectedSize;
-      }
     } else {
       rangeStart = rangeEnd = rangeRowIndex.current;
     }
     return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
   };
   var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
-    var value = props.value;
+    var value = props.tableProps.value;
     var selection = [];
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
       var rangeRowData = value[i];
@@ -2938,7 +2929,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     if (props.dragSelection && !dragSelectionHelper.current) {
       dragSelectionHelper.current = document.createElement('div');
       dragSelectionHelper.current.setAttribute('p-datatable-drag-selection-helper', 'true');
-      !isUnsyled && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
+      !isUnstyled() && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
       initialDragPosition.current = {
         x: event.clientX,
         y: event.clientY
@@ -3066,7 +3057,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
   var onRowMouseDown = function onRowMouseDown(e) {
     var event = e.originalEvent;
-    if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
+    if (!isUnstyled() && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
+      event.currentTarget.draggable = true;
+      event.target.draggable = false;
+    } else if (isUnstyled() && DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') {
       event.currentTarget.draggable = true;
       event.target.draggable = false;
     } else {
@@ -3158,26 +3152,26 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       var prevRowElement = rowElement.previousElementSibling;
       if (pageY < rowMidY) {
         rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-        !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+        !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
         droppedRowIndex.current = index;
         if (prevRowElement) {
           prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
-          !isUnsyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+          !isUnstyled() && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
         } else {
           rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
-          !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+          !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
         }
       } else {
         if (prevRowElement) {
           prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-          !isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+          !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
         } else {
           rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
-          !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+          !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
         }
         droppedRowIndex.current = index + 1;
         rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
-        !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+        !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
       }
     }
     event.preventDefault();
@@ -3188,12 +3182,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     var prevRowElement = rowElement.previousElementSibling;
     if (prevRowElement) {
       prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-      !isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+      !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
     }
     rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-    !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+    !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
     rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
-    !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+    !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
   };
   var onRowDragEnd = function onRowDragEnd(e) {
     var event = e.originalEvent;
@@ -3369,7 +3363,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         collapsedRowIcon: props.collapsedRowIcon,
         ptCallbacks: props.ptCallbacks,
         metaData: props.metaData,
-        unstyled: props.unstyled
+        unstyled: isUnstyled()
       });
       var options = {
         index: rowIndex,
@@ -3475,7 +3469,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         virtualScrollerOptions: props.virtualScrollerOptions,
         ptCallbacks: props.ptCallbacks,
         metaData: props.metaData,
-        unstyled: props.unstyled
+        unstyled: isUnstyled()
       });
     }
   };
@@ -3839,18 +3833,20 @@ _defineProperty(PrimeReact, "filterMatchModeOptions", {
 _defineProperty(PrimeReact, "changeTheme", function (currentTheme, newTheme, linkElementId, callback) {
   var _linkElement$parentNo;
   var linkElement = document.getElementById(linkElementId);
-  var cloneLinkElement = linkElement.cloneNode(true);
+  if (!linkElement) {
+    throw Error("Element with id ".concat(linkElementId, " not found."));
+  }
   var newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
-  cloneLinkElement.setAttribute('id', linkElementId + '-clone');
-  cloneLinkElement.setAttribute('href', newThemeUrl);
-  cloneLinkElement.addEventListener('load', function () {
-    linkElement.remove();
-    cloneLinkElement.setAttribute('id', linkElementId);
+  var newLinkElement = document.createElement('link');
+  newLinkElement.setAttribute('rel', 'stylesheet');
+  newLinkElement.setAttribute('id', linkElementId);
+  newLinkElement.setAttribute('href', newThemeUrl);
+  newLinkElement.addEventListener('load', function () {
     if (callback) {
       callback();
     }
   });
-  (_linkElement$parentNo = linkElement.parentNode) === null || _linkElement$parentNo === void 0 || _linkElement$parentNo.insertBefore(cloneLinkElement, linkElement.nextSibling);
+  (_linkElement$parentNo = linkElement.parentNode) === null || _linkElement$parentNo === void 0 || _linkElement$parentNo.replaceChild(newLinkElement, linkElement);
 });
 
 var locales = {
@@ -5013,7 +5009,7 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     props: props
   });
   var tabIndex = props.disabled ? null : 0;
-  var headerCheckboxProps = mergeProps({
+  var headerCheckboxProps = {
     role: 'checkbox',
     'aria-checked': props.checked,
     'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
@@ -5021,8 +5017,10 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     onChange: onChange,
     icon: checkIcon,
     checked: props.checked,
-    disabled: props.disabled
-  }, getColumnPTOptions('headerCheckbox'));
+    disabled: props.disabled,
+    unstyled: props.unstyled,
+    pt: getColumnPTOptions('headerCheckbox')
+  };
   return /*#__PURE__*/React.createElement(Checkbox, headerCheckboxProps);
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
@@ -7059,8 +7057,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         className: ptCallbacks.cx('loadingIcon')
       }, ptCallbacks.ptm('loadingIcon'));
       var icon = props.loadingIcon || /*#__PURE__*/React.createElement(SpinnerIcon, _extends({}, loadingIconProps, {
-        spin: true,
-        unstyled: props.unstyled
+        spin: true
       }));
       var loadingIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
         props: props