primereact 9.4.0 → 9.6.0

package/dataview/dataview.cjs.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PrimeReact = require('primereact/api');
+var bars = require('primereact/icons/bars');
+var spinner = require('primereact/icons/spinner');
+var thlarge = require('primereact/icons/thlarge');
 var paginator = require('primereact/paginator');
 var ripple = require('primereact/ripple');
 var utils = require('primereact/utils');
-var bars = require('primereact/icons/bars');
-var thlarge = require('primereact/icons/thlarge');
-var spinner = require('primereact/icons/spinner');
+var componentbase = require('primereact/componentbase');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,45 +35,19 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
 
 function _arrayLikeToArray(arr, len) {
@@ -146,22 +121,48 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
 }
 
-var DataViewBase = {
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+var DataViewBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'DataView',
     id: null,
@@ -196,15 +197,9 @@ var DataViewBase = {
     itemTemplate: null,
     onPage: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, DataViewBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, DataViewBase.defaultProps);
   }
-};
-var DataViewLayoutOptionsBase = {
+});
+var DataViewLayoutOptionsBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'DataViewLayoutOptions',
     id: null,
@@ -215,17 +210,18 @@ var DataViewLayoutOptionsBase = {
     gridIcon: null,
     onChange: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, DataViewLayoutOptionsBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, DataViewLayoutOptionsBase.defaultProps);
   }
-};
+});
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DataViewLayoutOptions = /*#__PURE__*/React__namespace.memo(function (inProps) {
-  var props = DataViewLayoutOptionsBase.getProps(inProps);
+  var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+  var props = DataViewLayoutOptionsBase.getProps(inProps, context);
+  var _DataViewLayoutOption = DataViewLayoutOptionsBase.setMetaData({
+      props: props
+    }),
+    ptm = _DataViewLayoutOption.ptm;
   var changeLayout = function changeLayout(event, layoutMode) {
     props.onChange({
       originalEvent: event,
@@ -233,7 +229,6 @@ var DataViewLayoutOptions = /*#__PURE__*/React__namespace.memo(function (inProps
     });
     event.preventDefault();
   };
-  var otherProps = DataViewLayoutOptionsBase.getOtherProps(props);
   var className = utils.classNames('p-dataview-layout-options p-selectbutton p-buttonset', props.className);
   var buttonListClass = utils.classNames('p-button p-button-icon-only', {
     'p-highlight': props.layout === 'list'
@@ -241,36 +236,42 @@ var DataViewLayoutOptions = /*#__PURE__*/React__namespace.memo(function (inProps
   var buttonGridClass = utils.classNames('p-button p-button-icon-only', {
     'p-highlight': props.layout === 'grid'
   });
-  var listIcon = utils.IconUtils.getJSXIcon(props.listIcon || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, null), undefined, {
+  var listIconProps = utils.mergeProps(ptm('list'));
+  var gridIconProps = utils.mergeProps(ptm('grid'));
+  var listIcon = utils.IconUtils.getJSXIcon(props.listIcon || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, listIconProps), _objectSpread({}, listIconProps), {
     props: props
   });
-  var gridIcon = utils.IconUtils.getJSXIcon(props.gridIcon || /*#__PURE__*/React__namespace.createElement(thlarge.ThLargeIcon, null), undefined, {
+  var gridIcon = utils.IconUtils.getJSXIcon(props.gridIcon || /*#__PURE__*/React__namespace.createElement(thlarge.ThLargeIcon, gridIconProps), _objectSpread({}, gridIconProps), {
     props: props
   });
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  var rootProps = utils.mergeProps({
     id: props.id,
     style: props.style,
     className: className
-  }, otherProps), /*#__PURE__*/React__namespace.createElement("button", {
-    type: "button",
+  }, DataViewLayoutOptionsBase.getOtherProps(props), ptm('root'));
+  var listButtonProps = utils.mergeProps({
+    type: 'button',
     className: buttonListClass,
     onClick: function onClick(event) {
       return changeLayout(event, 'list');
     }
-  }, listIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
-    type: "button",
+  }, ptm('listButton'));
+  var gridButtonProps = utils.mergeProps({
+    type: 'button',
     className: buttonGridClass,
     onClick: function onClick(event) {
       return changeLayout(event, 'grid');
     }
-  }, gridIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+  }, ptm('gridButton'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("button", listButtonProps, listIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", gridButtonProps, gridIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
 });
 var DataViewItem = /*#__PURE__*/React__namespace.memo(function (props) {
   return props.template(props.item, props.layout);
 });
 var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var _classNames;
-  var props = DataViewBase.getProps(inProps);
+  var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+  var props = DataViewBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(props.first),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     firstState = _React$useState2[0],
@@ -279,6 +280,14 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     rowsState = _React$useState4[0],
     setRowsState = _React$useState4[1];
+  var _DataViewBase$setMeta = DataViewBase.setMetaData({
+      props: props,
+      state: {
+        first: firstState,
+        rows: rowsState
+      }
+    }),
+    ptm = _DataViewBase$setMeta.ptm;
   var elementRef = React__namespace.useRef(null);
   var first = props.onPage ? props.first : firstState;
   var rows = props.onPage ? props.rows : rowsState;
@@ -304,7 +313,8 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       leftContent: props.paginatorLeft,
       rightContent: props.paginatorRight,
       alwaysShow: props.alwaysShowPaginator,
-      dropdownAppendTo: props.paginatorDropdownAppendTo
+      dropdownAppendTo: props.paginatorDropdownAppendTo,
+      ptm: ptm('paginator')
     });
   };
   var onPageChange = function onPageChange(event) {
@@ -321,7 +331,7 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       value.sort(function (data1, data2) {
         var value1 = utils.ObjectUtils.resolveFieldData(data1, props.sortField);
         var value2 = utils.ObjectUtils.resolveFieldData(data2, props.sortField);
-        return utils.ObjectUtils.sort(value1, value2, props.sortOrder, PrimeReact__default["default"].locale, PrimeReact__default["default"].nullSortOrder);
+        return utils.ObjectUtils.sort(value1, value2, props.sortOrder, context && context.locale || PrimeReact__default["default"].locale, context && context.nullSortOrder || PrimeReact__default["default"].nullSortOrder);
       });
       return value;
     }
@@ -330,18 +340,19 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var createLoader = function createLoader() {
     if (props.loading) {
       var iconClassName = 'p-dataview-loading-icon';
-      var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
-        className: iconClassName,
-        spin: true
-      });
-      var loadingIcon = utils.IconUtils.getJSXIcon(icon, {
+      var loadingIconProps = utils.mergeProps({
         className: iconClassName
-      }, {
+      }, ptm('loadingIcon'));
+      var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
+        spin: true
+      }));
+      var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
         props: props
       });
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-dataview-loading-overlay p-component-overlay"
-      }, loadingIcon);
+      var loadingOverlayProps = utils.mergeProps({
+        className: 'p-dataview-loading-overlay p-component-overlay'
+      }, ptm('loadingOverlay'));
+      return /*#__PURE__*/React__namespace.createElement("div", loadingOverlayProps, loadingIcon);
     }
     return null;
   };
@@ -360,25 +371,28 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var createEmptyMessage = function createEmptyMessage() {
     if (!props.loading) {
       var _content = props.emptyMessage || PrimeReact.localeOption('emptyMessage');
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-col-12 col-12 p-dataview-emptymessage"
-      }, _content);
+      var emptyMessageProps = utils.mergeProps({
+        className: 'p-col-12 col-12 p-dataview-emptymessage'
+      }, ptm('emptyMessage'));
+      return /*#__PURE__*/React__namespace.createElement("div", emptyMessageProps, _content);
     }
     return null;
   };
   var createHeader = function createHeader() {
     if (props.header) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-dataview-header"
-      }, props.header);
+      var headerProps = utils.mergeProps({
+        className: 'p-dataview-header'
+      }, ptm('header'));
+      return /*#__PURE__*/React__namespace.createElement("div", headerProps, props.header);
     }
     return null;
   };
   var createFooter = function createFooter() {
     if (props.footer) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-dataview-footer"
-      }, props.footer);
+      var footerProps = utils.mergeProps({
+        className: 'p-dataview-footer'
+      }, ptm('footer'));
+      return /*#__PURE__*/React__namespace.createElement("div", footerProps, props.footer);
     }
     return null;
   };
@@ -416,11 +430,13 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var gridClassName = utils.classNames('p-grid grid', {
       'p-nogutter grid-nogutter': !props.gutter
     });
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-dataview-content"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    var gridProps = utils.mergeProps({
       className: gridClassName
-    }, items));
+    }, ptm('grid'));
+    var contentProps = utils.mergeProps({
+      className: 'p-dataview-content'
+    }, ptm('content'));
+    return /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement("div", gridProps, items));
   };
   var processData = function processData() {
     var data = props.value;
@@ -438,7 +454,6 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     };
   });
   var data = processData();
-  var otherProps = DataViewBase.getOtherProps(props);
   var className = utils.classNames('p-dataview p-component', (_classNames = {}, _defineProperty(_classNames, "p-dataview-".concat(props.layout), !!props.layout), _defineProperty(_classNames, 'p-dataview-loading', props.loading), _classNames), props.className);
   var loader = createLoader();
   var topPaginator = createTopPaginator();
@@ -446,12 +461,13 @@ var DataView = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var header = createHeader();
   var footer = createFooter();
   var content = createContent(data);
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  var rootProps = utils.mergeProps({
     id: props.id,
     ref: elementRef,
     style: props.style,
     className: className
-  }, otherProps), loader, header, topPaginator, content, bottomPaginator, footer);
+  }, DataViewBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, loader, header, topPaginator, content, bottomPaginator, footer);
 }));
 DataViewLayoutOptions.displayName = 'DataViewLayoutOptions';
 DataViewItem.displayName = 'DataViewItem';

package/dataview/dataview.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/paginator"),n=require("primereact/ripple"),a=require("primereact/utils"),o=require("primereact/icons/bars"),l=require("primereact/icons/thlarge"),i=require("primereact/icons/spinner");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=s(e),p=u(t);function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function f(e,t){if("object"!==m(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==m(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function g(e){var t=f(e,"string");return"symbol"===m(t)?t:String(t)}function d(e,t,r){return(t=g(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function v(e){if(Array.isArray(e))return y(e)}function b(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function P(e,t){if(e){if("string"==typeof e)return y(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?y(e,t):void 0}}function h(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(e){if(Array.isArray(e))return e}function O(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,o,l,i=[],u=!0,s=!1;try{if(o=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=o.call(r)).done)&&(i.push(n.value),i.length!==t);u=!0);}catch(e){s=!0,a=e}finally{try{if(!u&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(s)throw a}}return i}}function N(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function j(e,t){return w(e)||O(e,t)||P(e,t)||N()}function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},S.apply(this,arguments)}var E={defaultProps:{__TYPE:"DataView",id:null,header:null,footer:null,value:null,layout:"list",dataKey:null,rows:null,first:0,totalRecords:null,paginator:!1,paginatorPosition:"bottom",alwaysShowPaginator:!0,paginatorClassName:null,paginatorTemplate:"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",paginatorLeft:null,paginatorRight:null,paginatorDropdownAppendTo:null,pageLinkSize:5,rowsPerPageOptions:null,currentPageReportTemplate:"({currentPage} of {totalPages})",emptyMessage:null,sortField:null,sortOrder:null,style:null,className:null,lazy:!1,loading:!1,loadingIcon:null,gutter:!1,itemTemplate:null,onPage:null,children:void 0},getProps:function(e){return a.ObjectUtils.getMergedProps(e,E.defaultProps)},getOtherProps:function(e){return a.ObjectUtils.getDiffProps(e,E.defaultProps)}},I={defaultProps:{__TYPE:"DataViewLayoutOptions",id:null,style:null,className:null,layout:null,listIcon:null,gridIcon:null,onChange:null,children:void 0},getProps:function(e){return a.ObjectUtils.getMergedProps(e,I.defaultProps)},getOtherProps:function(e){return a.ObjectUtils.getDiffProps(e,I.defaultProps)}},D=c.memo((function(e){var t=I.getProps(e),r=function(e,r){t.onChange({originalEvent:e,value:r}),e.preventDefault()},i=I.getOtherProps(t),u=a.classNames("p-dataview-layout-options p-selectbutton p-buttonset",t.className),s=a.classNames("p-button p-button-icon-only",{"p-highlight":"list"===t.layout}),p=a.classNames("p-button p-button-icon-only",{"p-highlight":"grid"===t.layout}),m=a.IconUtils.getJSXIcon(t.listIcon||c.createElement(o.BarsIcon,null),void 0,{props:t}),f=a.IconUtils.getJSXIcon(t.gridIcon||c.createElement(l.ThLargeIcon,null),void 0,{props:t});return c.createElement("div",S({id:t.id,style:t.style,className:u},i),c.createElement("button",{type:"button",className:s,onClick:function(e){return r(e,"list")}},m,c.createElement(n.Ripple,null)),c.createElement("button",{type:"button",className:p,onClick:function(e){return r(e,"grid")}},f,c.createElement(n.Ripple,null)))})),T=c.memo((function(e){return e.template(e.item,e.layout)})),L=c.memo(c.forwardRef((function(e,n){var o,l=E.getProps(e),u=j(c.useState(l.first),2),s=u[0],m=u[1],f=j(c.useState(l.rows),2),g=f[0],y=f[1],w=c.useRef(null),O=l.onPage?l.first:s,N=l.onPage?l.rows:g,I=function(e){return l.dataKey?a.ObjectUtils.resolveFieldData(e,l.dataKey):null},D=function(){return l.totalRecords?l.totalRecords:l.value?l.value.length:0},L=function(e){var t=a.classNames("p-paginator-"+e,l.paginatorClassName),n=D();return c.createElement(r.Paginator,{first:O,rows:N,pageLinkSize:l.pageLinkSize,className:t,onPageChange:R,template:l.paginatorTemplate,totalRecords:n,rowsPerPageOptions:l.rowsPerPageOptions,currentPageReportTemplate:l.currentPageReportTemplate,leftContent:l.paginatorLeft,rightContent:l.paginatorRight,alwaysShow:l.alwaysShowPaginator,dropdownAppendTo:l.paginatorDropdownAppendTo})},R=function(e){l.onPage?l.onPage(e):(m(e.first),y(e.rows))},U=function(){if(l.value){var e=v(t=l.value)||b(t)||P(t)||h();return e.sort((function(e,t){var r=a.ObjectUtils.resolveFieldData(e,l.sortField),n=a.ObjectUtils.resolveFieldData(t,l.sortField);return a.ObjectUtils.sort(r,n,l.sortOrder,p.default.locale,p.default.nullSortOrder)})),e}var t;return null},k=function(){if(!l.loading){var e=l.emptyMessage||t.localeOption("emptyMessage");return c.createElement("div",{className:"p-col-12 col-12 p-dataview-emptymessage"},e)}return null},A=function(e){if(a.ObjectUtils.isNotEmpty(e)){if(l.paginator){for(var t=l.lazy?0:O,r=D(),n=Math.min(N+t,r),o=[],i=t;i<n;i++){var u=e[i];u&&o.push(c.createElement(T,{key:I(e)||i,template:l.itemTemplate,layout:l.layout,item:u}))}return o}return e.map((function(e,t){return c.createElement(T,{key:I(e)||t,template:l.itemTemplate,layout:l.layout,item:e})}))}return k()};c.useImperativeHandle(n,(function(){return{props:l,getElement:function(){return w.current}}}));var C,M,q=function(){var e=l.value;return a.ObjectUtils.isNotEmpty(e)&&l.sortField&&(e=U()),e}(),F=E.getOtherProps(l),V=a.classNames("p-dataview p-component",(d(o={},"p-dataview-".concat(l.layout),!!l.layout),d(o,"p-dataview-loading",l.loading),o),l.className),_=function(){if(l.loading){var e="p-dataview-loading-icon",t=a.IconUtils.getJSXIcon(l.loadingIcon||c.createElement(i.SpinnerIcon,{className:e,spin:!0}),{className:e},{props:l});return c.createElement("div",{className:"p-dataview-loading-overlay p-component-overlay"},t)}return null}(),x=!l.paginator||"bottom"===l.paginatorPosition&&"both"!==l.paginatorPosition?null:L("top"),z=!l.paginator||"top"===l.paginatorPosition&&"both"!==l.paginatorPosition?null:L("bottom"),J=l.header?c.createElement("div",{className:"p-dataview-header"},l.header):null,K=l.footer?c.createElement("div",{className:"p-dataview-footer"},l.footer):null,X=(C=A(q),M=a.classNames("p-grid grid",{"p-nogutter grid-nogutter":!l.gutter}),c.createElement("div",{className:"p-dataview-content"},c.createElement("div",{className:M},C)));return c.createElement("div",S({id:l.id,ref:w,style:l.style,className:V},F),_,J,x,X,z,K)})));D.displayName="DataViewLayoutOptions",T.displayName="DataViewItem",L.displayName="DataView",exports.DataView=L,exports.DataViewItem=T,exports.DataViewLayoutOptions=D;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/icons/bars"),n=require("primereact/icons/spinner"),a=require("primereact/icons/thlarge"),o=require("primereact/paginator"),i=require("primereact/ripple"),l=require("primereact/utils"),u=require("primereact/componentbase");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var p=c(e),m=s(t);function g(){return g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},g.apply(this,arguments)}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function d(e){if(Array.isArray(e))return f(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function v(e,t){if(e){if("string"==typeof e)return f(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}function b(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function P(e){if(Array.isArray(e))return e}function w(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,o,i,l=[],u=!0,s=!1;try{if(o=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=o.call(r)).done)&&(l.push(n.value),l.length!==t);u=!0);}catch(e){s=!0,a=e}finally{try{if(!u&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw a}}return l}}function O(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function h(e,t){return P(e)||w(e,t)||v(e,t)||O()}function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}function S(e,t){if("object"!==j(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==j(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function N(e){var t=S(e,"string");return"symbol"===j(t)?t:String(t)}function E(e,t,r){return(t=N(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var I=u.ComponentBase.extend({defaultProps:{__TYPE:"DataView",id:null,header:null,footer:null,value:null,layout:"list",dataKey:null,rows:null,first:0,totalRecords:null,paginator:!1,paginatorPosition:"bottom",alwaysShowPaginator:!0,paginatorClassName:null,paginatorTemplate:"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",paginatorLeft:null,paginatorRight:null,paginatorDropdownAppendTo:null,pageLinkSize:5,rowsPerPageOptions:null,currentPageReportTemplate:"({currentPage} of {totalPages})",emptyMessage:null,sortField:null,sortOrder:null,style:null,className:null,lazy:!1,loading:!1,loadingIcon:null,gutter:!1,itemTemplate:null,onPage:null,children:void 0}}),D=u.ComponentBase.extend({defaultProps:{__TYPE:"DataViewLayoutOptions",id:null,style:null,className:null,layout:null,listIcon:null,gridIcon:null,onChange:null,children:void 0}});function T(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function C(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?T(Object(r),!0).forEach((function(t){E(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):T(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var R=p.memo((function(e){var n=p.useContext(t.PrimeReactContext),o=D.getProps(e,n),u=D.setMetaData({props:o}).ptm,s=function(e,t){o.onChange({originalEvent:e,value:t}),e.preventDefault()},c=l.classNames("p-dataview-layout-options p-selectbutton p-buttonset",o.className),m=l.classNames("p-button p-button-icon-only",{"p-highlight":"list"===o.layout}),g=l.classNames("p-button p-button-icon-only",{"p-highlight":"grid"===o.layout}),f=l.mergeProps(u("list")),d=l.mergeProps(u("grid")),y=l.IconUtils.getJSXIcon(o.listIcon||p.createElement(r.BarsIcon,f),C({},f),{props:o}),v=l.IconUtils.getJSXIcon(o.gridIcon||p.createElement(a.ThLargeIcon,d),C({},d),{props:o}),b=l.mergeProps({id:o.id,style:o.style,className:c},D.getOtherProps(o),u("root")),P=l.mergeProps({type:"button",className:m,onClick:function(e){return s(e,"list")}},u("listButton")),w=l.mergeProps({type:"button",className:g,onClick:function(e){return s(e,"grid")}},u("gridButton"));return p.createElement("div",b,p.createElement("button",P,y,p.createElement(i.Ripple,null)),p.createElement("button",w,v,p.createElement(i.Ripple,null)))})),L=p.memo((function(e){return e.template(e.item,e.layout)})),k=p.memo(p.forwardRef((function(e,r){var a,i=p.useContext(t.PrimeReactContext),u=I.getProps(e,i),s=h(p.useState(u.first),2),c=s[0],f=s[1],P=h(p.useState(u.rows),2),w=P[0],O=P[1],j=I.setMetaData({props:u,state:{first:c,rows:w}}).ptm,S=p.useRef(null),N=u.onPage?u.first:c,D=u.onPage?u.rows:w,T=function(e){return u.dataKey?l.ObjectUtils.resolveFieldData(e,u.dataKey):null},R=function(){return u.totalRecords?u.totalRecords:u.value?u.value.length:0},k=function(e){var t=l.classNames("p-paginator-"+e,u.paginatorClassName),r=R();return p.createElement(o.Paginator,{first:N,rows:D,pageLinkSize:u.pageLinkSize,className:t,onPageChange:x,template:u.paginatorTemplate,totalRecords:r,rowsPerPageOptions:u.rowsPerPageOptions,currentPageReportTemplate:u.currentPageReportTemplate,leftContent:u.paginatorLeft,rightContent:u.paginatorRight,alwaysShow:u.alwaysShowPaginator,dropdownAppendTo:u.paginatorDropdownAppendTo,ptm:j("paginator")})},x=function(e){u.onPage?u.onPage(e):(f(e.first),O(e.rows))},A=function(){if(u.value){var e=d(t=u.value)||y(t)||v(t)||b();return e.sort((function(e,t){var r=l.ObjectUtils.resolveFieldData(e,u.sortField),n=l.ObjectUtils.resolveFieldData(t,u.sortField);return l.ObjectUtils.sort(r,n,u.sortOrder,i&&i.locale||m.default.locale,i&&i.nullSortOrder||m.default.nullSortOrder)})),e}var t;return null},M=function(){if(!u.loading){var e=u.emptyMessage||t.localeOption("emptyMessage"),r=l.mergeProps({className:"p-col-12 col-12 p-dataview-emptymessage"},j("emptyMessage"));return p.createElement("div",r,e)}return null},U=function(e){if(l.ObjectUtils.isNotEmpty(e)){if(u.paginator){for(var t=u.lazy?0:N,r=R(),n=Math.min(D+t,r),a=[],o=t;o<n;o++){var i=e[o];i&&a.push(p.createElement(L,{key:T(e)||o,template:u.itemTemplate,layout:u.layout,item:i}))}return a}return e.map((function(e,t){return p.createElement(L,{key:T(e)||t,template:u.itemTemplate,layout:u.layout,item:e})}))}return M()};p.useImperativeHandle(r,(function(){return{props:u,getElement:function(){return S.current}}}));var q,F,V,_,z=function(){var e=u.value;return l.ObjectUtils.isNotEmpty(e)&&u.sortField&&(e=A()),e}(),B=l.classNames("p-dataview p-component",(E(a={},"p-dataview-".concat(u.layout),!!u.layout),E(a,"p-dataview-loading",u.loading),a),u.className),J=function(){if(u.loading){var e=l.mergeProps({className:"p-dataview-loading-icon"},j("loadingIcon")),t=u.loadingIcon||p.createElement(n.SpinnerIcon,g({},e,{spin:!0})),r=l.IconUtils.getJSXIcon(t,C({},e),{props:u}),a=l.mergeProps({className:"p-dataview-loading-overlay p-component-overlay"},j("loadingOverlay"));return p.createElement("div",a,r)}return null}(),K=!u.paginator||"bottom"===u.paginatorPosition&&"both"!==u.paginatorPosition?null:k("top"),X=!u.paginator||"top"===u.paginatorPosition&&"both"!==u.paginatorPosition?null:k("bottom"),Y=function(){if(u.header){var e=l.mergeProps({className:"p-dataview-header"},j("header"));return p.createElement("div",e,u.header)}return null}(),H=function(){if(u.footer){var e=l.mergeProps({className:"p-dataview-footer"},j("footer"));return p.createElement("div",e,u.footer)}return null}(),$=(q=U(z),F=l.classNames("p-grid grid",{"p-nogutter grid-nogutter":!u.gutter}),V=l.mergeProps({className:F},j("grid")),_=l.mergeProps({className:"p-dataview-content"},j("content")),p.createElement("div",_,p.createElement("div",V,q))),G=l.mergeProps({id:u.id,ref:S,style:u.style,className:B},I.getOtherProps(u),j("root"));return p.createElement("div",G,J,Y,K,$,X,H)})));R.displayName="DataViewLayoutOptions",L.displayName="DataViewItem",k.displayName="DataView",exports.DataView=k,exports.DataViewItem=L,exports.DataViewLayoutOptions=R;

package/dataview/dataview.d.ts

@@ -8,8 +8,111 @@
  *
  */
 import * as React from 'react';
-import { PaginatorTemplate } from '../paginator';
-import { IconType } from '../utils/utils';
+import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type DataViewPassThroughType<T> = PassThroughType<T, DataViewPassThroughMethodOptions>;
+export declare type DataViewLayoutOptionsPassThroughType<T> = PassThroughType<T, DataViewLayoutOptionsPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewPassThroughMethodOptions {
+    props: DataViewProps;
+    state: DataViewState;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewLayoutOptionsPassThroughMethodOptions {
+    props: DataViewLayoutOptionsProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewProps.pt}
+ */
+export interface DataViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptions}
+     */
+    paginator?: PaginatorPassThroughOptions;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: DataViewPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the grid's DOM element.
+     */
+    grid?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in DataView component.
+ */
+export interface DataViewState {
+    /**
+     * Current index of first record as a number.
+     */
+    first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    rows: number;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewLayoutOptionsProps.pt}
+ */
+export interface DataViewLayoutOptionsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewLayoutOptionsPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list button's DOM element.
+     */
+    listButton?: DataViewLayoutOptionsPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the list icon's DOM element.
+     */
+    listIcon?: DataViewLayoutOptionsPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the grid button's DOM element.
+     */
+    gridButton?: DataViewLayoutOptionsPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the grid icon's DOM element.
+     */
+    gridIcon?: DataViewLayoutOptionsPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+}
 
 /**
  * Custom page event.