primereact 10.6.6 → 10.8.0

package/datatable/datatable.js

@@ -153,6 +153,19 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Column',
@@ -687,8 +700,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(PrimeReact$1.PrimeReactContext);
     var props = CheckboxBase.getProps(inProps, context);
+    var _React$useState = React__namespace.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
@@ -742,10 +762,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     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__namespace.useImperativeHandle(ref, function () {
@@ -891,8 +913,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       'aria-label': props.ariaLabel,
       checked: props.checked,
       icon: checkIcon,
-      disabled: props.disabled
-    }, getColumnPTOptions('rowCheckbox'));
+      disabled: props.disabled,
+      pt: getColumnPTOptions('rowCheckbox')
+    });
     return /*#__PURE__*/React__namespace.createElement(Checkbox, checkboxProps);
   });
   RowCheckbox.displayName = 'RowCheckbox';
@@ -1049,7 +1072,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       })),
       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 = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
       var inputProps = mergeProps(_objectSpread$b({
@@ -1065,7 +1091,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         required: props.required,
         tabIndex: props.tabIndex,
         className: cx('input')
-      }, ariaProps), ptm('input'));
+      }, ariaProps), inProps.input, ptm('input'));
       return /*#__PURE__*/React__namespace.createElement("input", _extends({
         ref: inputRef
       }, inputProps));
@@ -1073,10 +1099,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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__namespace.createElement("div", boxProps, /*#__PURE__*/React__namespace.createElement("div", iconProps));
     };
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -1124,8 +1150,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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__namespace.createElement(RadioButton, radioButtonProps);
   });
   RowRadioButton.displayName = 'RowRadioButton';
@@ -1150,7 +1178,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var keyHelperRef = React__namespace.useRef(null);
     var overlayEventListener = React__namespace.useRef(null);
     var selfClick = React__namespace.useRef(false);
-    var tabindexTimeout = React__namespace.useRef(null);
     var initFocusTimeout = React__namespace.useRef(null);
     var editingRowDataStateRef = React__namespace.useRef(null);
     var _props$ptCallbacks = props.ptCallbacks,
@@ -1187,7 +1214,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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 utils.ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
     };
     var cellEditValidateOnClose = function cellEditValidateOnClose() {
       return getColumnProp('cellEditValidateOnClose');
@@ -1331,14 +1358,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       }
     };
     var focusOnElement = function focusOnElement() {
-      clearTimeout(tabindexTimeout.current);
-      tabindexTimeout.current = setTimeout(function () {
-        if (editingState) {
-          var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.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' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.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);
@@ -1380,6 +1404,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       if (currentData) {
         utils.ObjectUtils.mutateFieldData(currentData, field, val);
       }
+      editingRowDataStateRef.current = editingRowData;
     };
     var _onClick = function onClick(event) {
       var params = getCellCallbackParams(event);
@@ -1572,14 +1597,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     }, [props.editMode, props.editing, editingState]);
     hooks.useUpdateEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
-        setEditingRowDataState(getEditingRowData());
+        var editingRowData = getEditingRowData();
+        setEditingRowDataState(editingRowData);
+        editingRowDataStateRef.current = editingRowData;
       }
     }, [props.editingMeta]);
-    React__namespace.useEffect(function () {
-      if (editingRowDataState) {
-        editingRowDataStateRef.current = editingRowDataState;
-      }
-    }, [editingRowDataState]);
     React__namespace.useEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
         var callbackParams = getCellCallbackParams();
@@ -1654,7 +1676,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         if (showSelection) {
           var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
           var ariaLabelText = utils.ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-          label = "".concat(props.selected ? PrimeReact$1.ariaLabel('unselectLabel') : PrimeReact$1.ariaLabel('selectLabel'), " ").concat(ariaLabelText);
+          label = "".concat(props.selected ? PrimeReact$1.ariaLabel('unselectRow') : PrimeReact$1.ariaLabel('selectRow'), " ").concat(ariaLabelText);
         }
         content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
           hostName: props.hostName,
@@ -1669,7 +1691,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           tableSelector: props.tableSelector,
           ariaLabel: label,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: props.unstyled
         }), selectionMode === 'multiple' && /*#__PURE__*/React__namespace.createElement(RowCheckbox, {
           hostName: props.hostName,
           column: props.column,
@@ -1683,7 +1706,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           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, {
@@ -1846,7 +1870,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         }, editorKeyHelperProps), /*#__PURE__*/React__namespace.createElement("span", editorKeyHelperLabelProps));
         /* eslint-enable */
       }
-
       var bodyCellProps = mergeProps({
         style: style,
         className: utils.classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', {
@@ -2330,7 +2353,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
             value: props.value,
             virtualScrollerOptions: props.virtualScrollerOptions,
             ptCallbacks: props.ptCallbacks,
-            metaData: props.metaData
+            metaData: props.metaData,
+            unstyled: props.unstyled
           });
         }
         return null;
@@ -2409,7 +2433,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     }, getBodyRowPTOptions('bodyRow'), {
       className: utils.classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
     });
-
     return /*#__PURE__*/React__namespace.createElement("tr", rowProps, content);
   });
   BodyRow.displayName = 'BodyRow';
@@ -2421,7 +2444,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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,
@@ -2444,8 +2468,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     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__namespace.createElement(chevrondown.ChevronDownIcon, rowGroupTogglerIconProps) : props.collapsedRowIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, rowGroupTogglerIconProps);
     var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$8({}, rowGroupTogglerIconProps), {
       props: props
@@ -2458,8 +2483,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       },
       className: cx('rowGroupToggler'),
       tabIndex: props.tabIndex,
-      'aria-label': label
-    }, getColumnPTOptions('rowGroupToggler'));
+      'aria-label': label,
+      unstyled: isUnstyled()
+    }, ptm('rowGroupToggler'), getColumnPTOptions('rowGroupToggler'));
     return /*#__PURE__*/React__namespace.createElement("button", rowGroupTogglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
   RowTogglerButton.displayName = 'RowTogglerButton';
@@ -2473,7 +2499,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
       cx = _props$ptCallbacks.cx,
-      isUnsyled = _props$ptCallbacks.isUnsyled;
+      isUnstyled = _props$ptCallbacks.isUnstyled;
     var _React$useState = React__namespace.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowGroupHeaderStyleObjectState = _React$useState2[0],
@@ -2908,7 +2934,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       if (props.dragSelection && !dragSelectionHelper.current) {
         dragSelectionHelper.current = document.createElement('div');
         dragSelectionHelper.current.setAttribute('p-datatable-drag-selection-helper', 'true');
-        !isUnsyled && utils.DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
+        !isUnstyled() && utils.DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
         initialDragPosition.current = {
           x: event.clientX,
           y: event.clientY
@@ -3036,7 +3062,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     };
     var onRowMouseDown = function onRowMouseDown(e) {
       var event = e.originalEvent;
-      if (!isUnsyled && utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
+      if (!isUnstyled() && utils.DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
+        event.currentTarget.draggable = true;
+        event.target.draggable = false;
+      } else if (isUnstyled() && utils.DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') {
         event.currentTarget.draggable = true;
         event.target.draggable = false;
       } else {
@@ -3117,7 +3146,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         event.dataTransfer.setData('text', 'b'); // For firefox
       }
     };
-
     var onRowDragOver = function onRowDragOver(e) {
       var event = e.originalEvent,
         index = e.index;
@@ -3129,26 +3157,26 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         var prevRowElement = rowElement.previousElementSibling;
         if (pageY < rowMidY) {
           rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-          !isUnsyled && utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+          !isUnstyled() && utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
           droppedRowIndex.current = index;
           if (prevRowElement) {
             prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
-            !isUnsyled && utils.DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+            !isUnstyled() && utils.DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
           } else {
             rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
-            !isUnsyled && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+            !isUnstyled() && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
           }
         } else {
           if (prevRowElement) {
             prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-            !isUnsyled && utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+            !isUnstyled() && utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
           } else {
             rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
-            !isUnsyled && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+            !isUnstyled() && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
           }
           droppedRowIndex.current = index + 1;
           rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
-          !isUnsyled && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+          !isUnstyled() && utils.DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
         }
       }
       event.preventDefault();
@@ -3159,12 +3187,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       var prevRowElement = rowElement.previousElementSibling;
       if (prevRowElement) {
         prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-        !isUnsyled && utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+        !isUnstyled() && utils.DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
       }
       rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
-      !isUnsyled && utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+      !isUnstyled() && utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
       rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
-      !isUnsyled && utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+      !isUnstyled() && utils.DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
     };
     var onRowDragEnd = function onRowDragEnd(e) {
       var event = e.originalEvent;
@@ -3339,7 +3367,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           expandedRowIcon: props.expandedRowIcon,
           collapsedRowIcon: props.collapsedRowIcon,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: isUnstyled()
         });
         var options = {
           index: rowIndex,
@@ -3444,7 +3473,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           value: props.value,
           virtualScrollerOptions: props.virtualScrollerOptions,
           ptCallbacks: props.ptCallbacks,
-          metaData: props.metaData
+          metaData: props.metaData,
+          unstyled: isUnstyled()
         });
       }
     };
@@ -3808,18 +3838,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
   _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 = {
@@ -4041,6 +4073,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     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,
@@ -4049,7 +4090,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         firstFocusableSelector = _ref$firstFocusableSe === void 0 ? '' : _ref$firstFocusableSe,
         _ref$autoFocus = _ref.autoFocus,
         autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
-      var focusableElement = utils.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 = utils.DomHandler.getFirstFocusableElement(target, computedAutoFocusSelector);
       autoFocus && !focusableElement && (focusableElement = utils.DomHandler.getFirstFocusableElement(target, getComputedSelector(firstFocusableSelector)));
       utils.DomHandler.focus(focusableElement);
     };
@@ -5165,7 +5208,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         column: props.column
       });
     };
-    var onResizerMouseDown = function onResizerMouseDown(event) {
+    var onResizeStart = function onResizeStart(event) {
       props.onColumnResizeStart({
         originalEvent: event,
         column: props.column
@@ -5202,7 +5245,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         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);
@@ -5262,7 +5308,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           onChange: props.onColumnCheckboxChange,
           disabled: props.empty,
           ptCallbacks: ptCallbacks,
-          metaData: parentMetaData
+          metaData: parentMetaData,
+          unstyled: props.unstyled
         });
       }
       return null;
@@ -5620,19 +5667,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
   });
   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; }
@@ -5741,29 +5775,40 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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 = hooks.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 = hooks.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 = hooks.useEventListener({
+        type: 'touchmove',
+        listener: columnResizeStartListener
+      }),
+      _useEventListener6 = _slicedToArray(_useEventListener5, 2),
+      bindDocumentTouchMoveListener = _useEventListener6[0],
+      unbindDocumentTouchMoveListener = _useEventListener6[1];
+    var _useEventListener7 = hooks.useEventListener({
+        type: 'touchend',
+        listener: columnResizeEndListener
+      }),
+      _useEventListener8 = _slicedToArray(_useEventListener7, 2),
+      bindDocumentTouchEndListener = _useEventListener8[0],
+      unbindDocumentTouchEndListener = _useEventListener8[1];
     var isCustomStateStorage = function isCustomStateStorage() {
       return props.stateStorage === 'custom';
     };
@@ -6099,7 +6144,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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) {
@@ -6107,7 +6152,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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() {
@@ -6178,10 +6223,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
     var bindColumnResizeEvents = function bindColumnResizeEvents() {
       bindDocumentMouseMoveListener();
       bindDocumentMouseUpListener();
+      bindDocumentTouchMoveListener();
+      bindDocumentTouchEndListener();
     };
     var unbindColumnResizeEvents = function unbindColumnResizeEvents() {
       unbindDocumentMouseMoveListener();
       unbindDocumentMouseUpListener();
+      unbindDocumentTouchMoveListener();
+      unbindDocumentTouchEndListener();
     };
     var onColumnHeaderMouseDown = function onColumnHeaderMouseDown(e) {
       utils.DomHandler.clearSelection();
@@ -6247,7 +6296,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
       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;
@@ -7179,7 +7227,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         value: props.frozenValue,
         virtualScrollerOptions: options,
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       });
       var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
         hostName: "DataTable",
@@ -7262,7 +7311,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         virtualScrollerContentRef: contentRef,
         virtualScrollerOptions: options,
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       });
       var spacerBody = utils.ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React__namespace.createElement(TableBody, {
         hostName: "DataTable",
@@ -7271,7 +7321,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         },
         className: "p-datatable-virtualscroller-spacer",
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       }) : null;
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body, spacerBody);
     };
@@ -7283,7 +7334,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
         columns: columns,
         footerColumnGroup: props.footerColumnGroup,
         ptCallbacks: ptCallbacks,
-        metaData: metaData
+        metaData: metaData,
+        unstyled: props.unstyled
       });
     };
     var createContent = function createContent(processedData, columns, selectionModeInColumn, empty) {
@@ -7318,6 +7370,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact$1, componentba
           parent: metaData
         },
         showSpacer: false,
+        unstyled: props.unstyled,
         contentTemplate: function contentTemplate(options) {
           var ref = function ref(el) {
             tableRef.current = el;