primereact 8.7.3 → 9.0.0-beta.1

package/csstransition/csstransition.d.ts

@@ -1,8 +1,38 @@
+/**
+ *
+ * CSSTransition component wraps [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API.
+ * It allows us to easily manage animations. All PrimeReact components use this component.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/dropdown/)
+ *
+ * @module csstransition
+ *
+ */
 import * as React from 'react';
 import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
 
+/**
+ * Defines valid properties in [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API. In addition to these, all properties of HTMLElement can be used in this component.
+ * @group Properties
+ */
 export type CSSTransitionProps<Ref extends undefined | HTMLElement = undefined> = ReactCSSTransitionProps<Ref> & {
-    disabled?: boolean;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
 };
 
+/**
+ * **PrimeReact - CSSTransition**
+ *
+ * _CSSTransition component wraps [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API.
+ * It allows us to easily manage animations. All PrimeReact components use this component._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/dropdown/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class CSSTransition<Ref extends undefined | HTMLElement> extends React.Component<CSSTransitionProps<Ref>, any> {}

package/datascroller/datascroller.d.ts

@@ -1,29 +1,115 @@
+/**
+ *
+ * DataScroller displays data with on demand loading using scroll.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/datascroller/)
+ *
+ * @module datascroller
+ *
+ */
 import * as React from 'react';
 
-type DataScrollerEmptyMessageType = React.ReactNode | ((props: DataScrollerProps) => React.ReactNode);
-
-interface DataScrollerLazyLoadParams {
+/**
+ * Custom lazy event.
+ * @see {@link DataScrollerProps.onLazyLoad}
+ * @event
+ */
+interface DataScrollerLazyLoadEvents {
+    /**
+     * First row offset
+     */
     first: number;
+    /**
+     * Number of rows per page
+     */
     rows: number;
 }
 
+/**
+ * Defines valid properties in DataScroller component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface DataScrollerProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    buffer?: number;
-    children?: React.ReactNode;
-    emptyMessage?: DataScrollerEmptyMessageType;
-    footer?: React.ReactNode;
-    header?: React.ReactNode;
-    inline?: boolean;
-    lazy?: boolean;
-    loader?: boolean;
-    rows?: number;
-    scrollHeight?: string;
-    value?: any[];
-    itemTemplate?(item: any): React.ReactNode;
-    onLazyLoad?(e: DataScrollerLazyLoadParams): void;
+    /**
+     * Number of buffer size.
+     * @defaultValue 0.9
+     */
+    buffer?: number | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Text to display when there is no data.
+     * @defaultValue No records found
+     */
+    emptyMessage?: React.ReactNode | ((props: DataScrollerProps) => React.ReactNode);
+    /**
+     * Label of footer.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Label of header.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Defines if the event target to listen the scroll event is the element itself.
+     * @defaultValue false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Determines whether data is loaded by a target element.
+     */
+    loader?: boolean | undefined;
+    /**
+     * Number of rows to fetch in a load event.
+     */
+    rows?: number | undefined;
+    /**
+     * Max height of the content area in inline mode.
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * An array of objects to display.
+     */
+    value?: any[] | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for it.
+     * @param {*} item - Current item
+     */
+    itemTemplate?(item: any): React.ReactNode | undefined;
+    /**
+     * Callback to invoke in lazy mode to load new data.
+     * @param {DataScrollerLazyLoadEvents} event - Custom lazy event
+     */
+    onLazyLoad?(event: DataScrollerLazyLoadEvents): void;
 }
 
+/**
+ * **PrimeReact - DataScroller**
+ *
+ * _DataScroller displays data with on demand loading using scroll._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/datascroller/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class DataScroller extends React.Component<DataScrollerProps, any> {
+    /**
+     * Used to load data manually
+     */
     public load(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }

package/datatable/datatable.cjs.js

@@ -218,7 +218,8 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space') {
+    if (event.code === 'Space' || event.key === ' ') {
+      // event.key is for Android support
       onClick(event);
       event.preventDefault();
     }
@@ -272,7 +273,8 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space') {
+    if (event.code === 'Space' || event.key === ' ') {
+      // event.key is for Android support
       onClick(event);
       event.preventDefault();
     }
@@ -339,7 +341,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     return props.column ? props.column.props[prop] : null;
   };
   var field = getColumnProp('field') || "field_".concat(props.index);
-  var editingKey = props.dataKey ? props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
+  var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
   var _useEventListener = hooks.useEventListener({
       type: 'click',
       listener: function listener(e) {
@@ -366,7 +368,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     return props.compareSelectionBy === 'equals' ? data === props.rowData : utils.ObjectUtils.equals(data, props.rowData, props.dataKey);
   };
   var equals = function equals(selectedCell) {
-    return (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
+    return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
   };
   var isOutsideClicked = function isOutsideClicked(target) {
     return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
@@ -501,14 +503,14 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       var align = getColumnProp('alignFrozen');
       if (align === 'right') {
         var right = 0;
-        var next = elementRef.current.nextElementSibling;
+        var next = elementRef.current && elementRef.current.nextElementSibling;
         if (next) {
           right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
         }
         styleObject['right'] = right + 'px';
       } else {
         var left = 0;
-        var prev = elementRef.current.previousElementSibling;
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
         if (prev) {
           left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
         }
@@ -524,7 +526,10 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     setEditingRowDataState(editingRowData);
 
     // update editing meta for complete methods on row mode
-    props.editingMeta[editingKey].data[field] = val;
+    var currentData = getEditingRowData();
+    if (currentData) {
+      currentData[field] = val;
+    }
   };
   var onClick = function onClick(event) {
     var params = getCellCallbackParams(event);
@@ -1491,7 +1496,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     return null;
   };
   var getRowKey = function getRowKey(rowData, index) {
-    return props.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, props.dataKey) + '_' + index : index;
+    return props.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
   };
   var shouldRenderRowGroupHeader = function shouldRenderRowGroupHeader(value, rowData, i) {
     var currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
@@ -1968,14 +1973,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     var event = e.originalEvent;
     if (droppedRowIndex.current != null) {
       var dropIndex = draggedRowIndex.current > droppedRowIndex.current ? droppedRowIndex.current : droppedRowIndex.current === 0 ? 0 : droppedRowIndex.current - 1;
-      var val = _toConsumableArray(props.value);
+      var val = _toConsumableArray(props.tableProps.value);
       utils.ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
       if (props.onRowReorder) {
         props.onRowReorder({
           originalEvent: event,
           value: val,
           dragIndex: draggedRowIndex.current,
-          dropIndex: droppedRowIndex.current
+          dropIndex: dropIndex
         });
       }
     }
@@ -3101,7 +3106,8 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space') {
+    if (event.code === 'Space' || event.key === ' ') {
+      // event.key is for Android support
       onClick(event);
       event.preventDefault();
     }
@@ -3983,7 +3989,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       return props.selectAll;
     } else {
       var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-      var val = props.frozenValue ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
+      var val = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
       var selectableVal = getSelectableData(val);
       return selectableVal && props.selection && selectableVal.every(function (sv) {
         return props.selection.some(function (s) {
@@ -4144,7 +4150,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
         });
       }) : [];
       if (checked) {
-        selection = props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
+        selection = utils.ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
         selection = getSelectableData(selection);
         props.onAllRowsSelect && props.onAllRowsSelect({
           originalEvent: originalEvent,
@@ -4492,6 +4498,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var globalMatch = false;
       var localFiltered = false;
       for (var prop in filters) {
+        if (prop === 'null') {
+          continue;
+        }
         if (Object.prototype.hasOwnProperty.call(filters, prop) && prop !== 'global') {
           localFiltered = true;
           var filterField = prop;
@@ -4783,8 +4792,11 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   hooks.useUpdateEffect(function () {
     if (props.globalFilter) {
       filter(props.globalFilter, 'global', props.globalFilterMatchMode);
+    } else {
+      // #3819 was filtering but now reset filter state
+      setFiltersState(props.filters);
     }
-  }, [props.globalFilter]);
+  }, [props.globalFilter, props.globalFilterMatchMode]);
   hooks.useUnmountEffect(function () {
     unbindColumnResizeEvents();
     destroyStyleElement();
@@ -4888,7 +4900,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       contentRef = options.contentRef,
       className = options.className;
       options.itemSize;
-    var frozenBody = props.frozenValue && /*#__PURE__*/React__namespace.createElement(TableBody, {
+    var frozenBody = utils.ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
       ref: frozenBodyRef,
       value: props.frozenValue,
       className: "p-datatable-frozen-tbody",