primereact 10.6.6 → 10.8.0

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;
 
 /**
@@ -1081,7 +1117,7 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
     dragSelection?: boolean;
     /**
      * Defines editing mode, options are "cell" and "row".
-     * @defaultValue cell
+     * @defaultValue null
      */
     editMode?: string | undefined;
     /**

package/datatable/datatable.esm.js

@@ -159,6 +159,19 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
+var getStorage = function getStorage(stateStorageProp) {
+  switch (stateStorageProp) {
+    case 'local':
+      return window.localStorage;
+    case 'session':
+      return window.sessionStorage;
+    case 'custom':
+      return null;
+    default:
+      throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
+  }
+};
+
 var ColumnBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Column',
@@ -693,8 +706,15 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = CheckboxBase.getProps(inProps, context);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedState = _React$useState2[0],
+    setFocusedState = _React$useState2[1];
   var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
       props: props,
+      state: {
+        focused: focusedState
+      },
       context: {
         checked: props.checked === props.trueValue,
         disabled: props.disabled
@@ -748,10 +768,12 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
   var _onFocus = function onFocus() {
     var _props$onFocus;
+    setFocusedState(true);
     props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
   };
   var _onBlur = function onBlur() {
     var _props$onBlur;
+    setFocusedState(false);
     props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
   };
   React.useImperativeHandle(ref, function () {
@@ -897,8 +919,9 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     'aria-label': props.ariaLabel,
     checked: props.checked,
     icon: checkIcon,
-    disabled: props.disabled
-  }, getColumnPTOptions('rowCheckbox'));
+    disabled: props.disabled,
+    pt: getColumnPTOptions('rowCheckbox')
+  });
   return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
 });
 RowCheckbox.displayName = 'RowCheckbox';
@@ -1055,7 +1078,10 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     })),
     style: props.style,
     'data-p-checked': props.checked
-  }, RadioButtonBase.getOtherProps(props), ptm('root'));
+  }, otherProps, ptm('root'));
+  delete rootProps.input;
+  delete rootProps.box;
+  delete rootProps.icon;
   var createInputElement = function createInputElement() {
     var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
     var inputProps = mergeProps(_objectSpread$b({
@@ -1071,7 +1097,7 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       required: props.required,
       tabIndex: props.tabIndex,
       className: cx('input')
-    }, ariaProps), ptm('input'));
+    }, ariaProps), inProps.input, ptm('input'));
     return /*#__PURE__*/React.createElement("input", _extends({
       ref: inputRef
     }, inputProps));
@@ -1079,10 +1105,10 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var createBoxElement = function createBoxElement() {
     var boxProps = mergeProps({
       className: cx('box')
-    }, ptm('box'));
+    }, inProps.box, ptm('box'));
     var iconProps = mergeProps({
       className: cx('icon')
-    }, ptm('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({
@@ -1130,8 +1156,10 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
     checked: props.checked,
     disabled: props.disabled,
     name: "".concat(props.tableSelector, "_dt_radio"),
-    onChange: onChange
-  }, getColumnPTOptions('radiobutton'));
+    onChange: onChange,
+    unstyled: props.unstyled,
+    pt: getColumnPTOptions('rowRadioButton')
+  });
   return /*#__PURE__*/React.createElement(RadioButton, radioButtonProps);
 });
 RowRadioButton.displayName = 'RowRadioButton';
@@ -1156,7 +1184,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var keyHelperRef = React.useRef(null);
   var overlayEventListener = React.useRef(null);
   var selfClick = React.useRef(false);
-  var tabindexTimeout = React.useRef(null);
   var initFocusTimeout = React.useRef(null);
   var editingRowDataStateRef = React.useRef(null);
   var _props$ptCallbacks = props.ptCallbacks,
@@ -1193,7 +1220,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var field = getColumnProp('field') || "field_".concat(props.index);
   var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
   var isEditable = function isEditable() {
-    return getColumnProp('editor');
+    return ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
   };
   var cellEditValidateOnClose = function cellEditValidateOnClose() {
     return getColumnProp('cellEditValidateOnClose');
@@ -1337,14 +1364,11 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var focusOnElement = function focusOnElement() {
-    clearTimeout(tabindexTimeout.current);
-    tabindexTimeout.current = setTimeout(function () {
-      if (editingState) {
-        var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
-        focusableEl && focusableEl.focus();
-      }
-      keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
-    }, 1);
+    if (editingState) {
+      var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+      focusableEl && focusableEl.focus();
+    }
+    keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
   };
   var focusOnInit = function focusOnInit() {
     clearTimeout(initFocusTimeout.current);
@@ -1386,6 +1410,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     if (currentData) {
       ObjectUtils.mutateFieldData(currentData, field, val);
     }
+    editingRowDataStateRef.current = editingRowData;
   };
   var _onClick = function onClick(event) {
     var params = getCellCallbackParams(event);
@@ -1578,14 +1603,11 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   }, [props.editMode, props.editing, editingState]);
   useUpdateEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
-      setEditingRowDataState(getEditingRowData());
+      var editingRowData = getEditingRowData();
+      setEditingRowDataState(editingRowData);
+      editingRowDataStateRef.current = editingRowData;
     }
   }, [props.editingMeta]);
-  React.useEffect(function () {
-    if (editingRowDataState) {
-      editingRowDataStateRef.current = editingRowDataState;
-    }
-  }, [editingRowDataState]);
   React.useEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       var callbackParams = getCellCallbackParams();
@@ -1660,7 +1682,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       if (showSelection) {
         var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
         var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-        label = "".concat(props.selected ? ariaLabel$1('unselectLabel') : ariaLabel$1('selectLabel'), " ").concat(ariaLabelText);
+        label = "".concat(props.selected ? ariaLabel$1('unselectRow') : ariaLabel$1('selectRow'), " ").concat(ariaLabelText);
       }
       content = showSelection && /*#__PURE__*/React.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
         hostName: props.hostName,
@@ -1675,7 +1697,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         tableSelector: props.tableSelector,
         ariaLabel: label,
         ptCallbacks: props.ptCallbacks,
-        metaData: props.metaData
+        metaData: props.metaData,
+        unstyled: props.unstyled
       }), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(RowCheckbox, {
         hostName: props.hostName,
         column: props.column,
@@ -1689,7 +1712,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         ariaLabel: label,
         checkIcon: props.checkIcon,
         ptCallbacks: props.ptCallbacks,
-        metaData: props.metaData
+        metaData: props.metaData,
+        unstyled: props.unstyled
       }));
     } else if (rowReorder) {
       var showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, {
@@ -1852,7 +1876,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       }, editorKeyHelperProps), /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
       /* eslint-enable */
     }
-
     var bodyCellProps = mergeProps({
       style: style,
       className: classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', {
@@ -2336,7 +2359,8 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           value: props.value,
           virtualScrollerOptions: props.virtualScrollerOptions,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: props.unstyled
         });
       }
       return null;
@@ -2415,7 +2439,6 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
   }, getBodyRowPTOptions('bodyRow'), {
     className: classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
   });
-
   return /*#__PURE__*/React.createElement("tr", rowProps, content);
 });
 BodyRow.displayName = 'BodyRow';
@@ -2427,7 +2450,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,
@@ -2450,8 +2474,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
@@ -2464,8 +2489,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';
@@ -2479,7 +2505,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],
@@ -2914,7 +2940,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
@@ -3042,7 +3068,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 {
@@ -3123,7 +3152,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       event.dataTransfer.setData('text', 'b'); // For firefox
     }
   };
-
   var onRowDragOver = function onRowDragOver(e) {
     var event = e.originalEvent,
       index = e.index;
@@ -3135,26 +3163,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();
@@ -3165,12 +3193,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;
@@ -3345,7 +3373,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon,
         ptCallbacks: props.ptCallbacks,
-        metaData: props.metaData
+        metaData: props.metaData,
+        unstyled: isUnstyled()
       });
       var options = {
         index: rowIndex,
@@ -3450,7 +3479,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         value: props.value,
         virtualScrollerOptions: props.virtualScrollerOptions,
         ptCallbacks: props.ptCallbacks,
-        metaData: props.metaData
+        metaData: props.metaData,
+        unstyled: isUnstyled()
       });
     }
   };
@@ -3814,18 +3844,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 = {
@@ -4047,6 +4079,15 @@ var FocusTrap = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.fo
   var getTarget = function getTarget() {
     return firstFocusableElementRef.current && firstFocusableElementRef.current.parentElement;
   };
+
+  /**
+   * This method sets the auto focus on the first focusable element within the target element.
+   * It first tries to find a focusable element using the autoFocusSelector. If no such element is found,
+   * it then tries to find a focusable element using the firstFocusableSelector.
+   * If the autoFocus prop is set to true and a focusable element is found, it sets the focus on that element.
+   *
+   * @param {HTMLElement} target - The target element within which to find a focusable element.
+   */
   var setAutoFocus = function setAutoFocus(target) {
     var _ref = props || {},
       _ref$autoFocusSelecto = _ref.autoFocusSelector,
@@ -4055,7 +4096,9 @@ var FocusTrap = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.fo
       firstFocusableSelector = _ref$firstFocusableSe === void 0 ? '' : _ref$firstFocusableSe,
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-    var focusableElement = DomHandler.getFirstFocusableElement(target, "[autofocus]".concat(getComputedSelector(autoFocusSelector)));
+    var defaultAutoFocusSelector = "".concat(getComputedSelector(autoFocusSelector));
+    var computedAutoFocusSelector = "[autofocus]".concat(defaultAutoFocusSelector, ", [data-pc-autofocus='true']").concat(defaultAutoFocusSelector);
+    var focusableElement = DomHandler.getFirstFocusableElement(target, computedAutoFocusSelector);
     autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(target, getComputedSelector(firstFocusableSelector)));
     DomHandler.focus(focusableElement);
   };
@@ -5171,7 +5214,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       column: props.column
     });
   };
-  var onResizerMouseDown = function onResizerMouseDown(event) {
+  var onResizeStart = function onResizeStart(event) {
     props.onColumnResizeStart({
       originalEvent: event,
       column: props.column
@@ -5208,7 +5251,10 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       var columnResizerProps = mergeProps({
         className: cx('columnResizer'),
         onMouseDown: function onMouseDown(e) {
-          return onResizerMouseDown(e);
+          return onResizeStart(e);
+        },
+        onTouchStart: function onTouchStart(e) {
+          return onResizeStart(e);
         },
         onClick: function onClick(e) {
           return onResizerClick(e);
@@ -5268,7 +5314,8 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
         onChange: props.onColumnCheckboxChange,
         disabled: props.empty,
         ptCallbacks: ptCallbacks,
-        metaData: parentMetaData
+        metaData: parentMetaData,
+        unstyled: props.unstyled
       });
     }
     return null;
@@ -5626,19 +5673,6 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
 });
 TableHeader.displayName = 'TableHeader';
 
-var getStorage = function getStorage(stateStorageProp) {
-  switch (stateStorageProp) {
-    case 'local':
-      return window.localStorage;
-    case 'session':
-      return window.sessionStorage;
-    case 'custom':
-      return null;
-    default:
-      throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
-  }
-};
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -5747,29 +5781,40 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     setRowsState(props.rows);
     setD_rowsState(props.rows);
   }
+  var columnResizeStartListener = function columnResizeStartListener(event) {
+    return columnResizing.current && onColumnResize(event);
+  };
+  var columnResizeEndListener = function columnResizeEndListener() {
+    return columnResizing.current && (columnResizing.current = false, onColumnResizeEnd());
+  };
   var _useEventListener = useEventListener({
       type: 'mousemove',
-      listener: function listener(event) {
-        if (columnResizing.current) {
-          onColumnResize(event);
-        }
-      }
+      listener: columnResizeStartListener
     }),
     _useEventListener2 = _slicedToArray(_useEventListener, 2),
     bindDocumentMouseMoveListener = _useEventListener2[0],
     unbindDocumentMouseMoveListener = _useEventListener2[1];
   var _useEventListener3 = useEventListener({
       type: 'mouseup',
-      listener: function listener() {
-        if (columnResizing.current) {
-          columnResizing.current = false;
-          onColumnResizeEnd();
-        }
-      }
+      listener: columnResizeEndListener
     }),
     _useEventListener4 = _slicedToArray(_useEventListener3, 2),
     bindDocumentMouseUpListener = _useEventListener4[0],
     unbindDocumentMouseUpListener = _useEventListener4[1];
+  var _useEventListener5 = useEventListener({
+      type: 'touchmove',
+      listener: columnResizeStartListener
+    }),
+    _useEventListener6 = _slicedToArray(_useEventListener5, 2),
+    bindDocumentTouchMoveListener = _useEventListener6[0],
+    unbindDocumentTouchMoveListener = _useEventListener6[1];
+  var _useEventListener7 = useEventListener({
+      type: 'touchend',
+      listener: columnResizeEndListener
+    }),
+    _useEventListener8 = _slicedToArray(_useEventListener7, 2),
+    bindDocumentTouchEndListener = _useEventListener8[0],
+    unbindDocumentTouchEndListener = _useEventListener8[1];
   var isCustomStateStorage = function isCustomStateStorage() {
     return props.stateStorage === 'custom';
   };
@@ -6105,7 +6150,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     resizeColumn.current = column;
     resizeColumnElement.current = event.currentTarget.parentElement;
     columnResizing.current = true;
-    lastResizeHelperX.current = event.pageX - containerLeft + elementRef.current.scrollLeft;
+    lastResizeHelperX.current = (event.type === 'touchstart' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft;
     bindColumnResizeEvents();
   };
   var onColumnResize = function onColumnResize(event) {
@@ -6113,7 +6158,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     elementRef.current.setAttribute('data-p-unselectable-text', true);
     resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
     resizeHelperRef.current.style.top = 0 + 'px';
-    resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
+    resizeHelperRef.current.style.left = (event.type === 'touchmove' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft + 'px';
     resizeHelperRef.current.style.display = 'block';
   };
   var onColumnResizeEnd = function onColumnResizeEnd() {
@@ -6184,10 +6229,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var bindColumnResizeEvents = function bindColumnResizeEvents() {
     bindDocumentMouseMoveListener();
     bindDocumentMouseUpListener();
+    bindDocumentTouchMoveListener();
+    bindDocumentTouchEndListener();
   };
   var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
     unbindDocumentMouseMoveListener();
     unbindDocumentMouseUpListener();
+    unbindDocumentTouchMoveListener();
+    unbindDocumentTouchEndListener();
   };
   var onColumnHeaderMouseDown = function onColumnHeaderMouseDown(e) {
     DomHandler.clearSelection();
@@ -6253,7 +6302,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     draggedColumnElement.current = findParentHeader(event.currentTarget);
     event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
   };
-
   var onColumnHeaderDragOver = function onColumnHeaderDragOver(e) {
     var event = e.originalEvent,
       column = e.column;
@@ -7185,7 +7233,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       value: props.frozenValue,
       virtualScrollerOptions: options,
       ptCallbacks: ptCallbacks,
-      metaData: metaData
+      metaData: metaData,
+      unstyled: props.unstyled
     });
     var body = /*#__PURE__*/React.createElement(TableBody, {
       hostName: "DataTable",
@@ -7268,7 +7317,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       virtualScrollerContentRef: contentRef,
       virtualScrollerOptions: options,
       ptCallbacks: ptCallbacks,
-      metaData: metaData
+      metaData: metaData,
+      unstyled: props.unstyled
     });
     var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React.createElement(TableBody, {
       hostName: "DataTable",
@@ -7277,7 +7327,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       },
       className: "p-datatable-virtualscroller-spacer",
       ptCallbacks: ptCallbacks,
-      metaData: metaData
+      metaData: metaData,
+      unstyled: props.unstyled
     }) : null;
     return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body, spacerBody);
   };
@@ -7289,7 +7340,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       columns: columns,
       footerColumnGroup: props.footerColumnGroup,
       ptCallbacks: ptCallbacks,
-      metaData: metaData
+      metaData: metaData,
+      unstyled: props.unstyled
     });
   };
   var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
@@ -7324,6 +7376,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         parent: metaData
       },
       showSpacer: false,
+      unstyled: props.unstyled,
       contentTemplate: function contentTemplate(options) {
         var ref = function ref(el) {
           tableRef.current = el;