primereact 10.2.1 → 10.3.1

package/treetable/treetable.d.ts

@@ -620,9 +620,9 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
     defaultSortOrder?: 1 | 0 | -1 | undefined | null;
     /**
      * Text to display when there is no data.
-     * @defaultValue No records found
+     * @defaultValue No results found
      */
-    emptyMessage?: string | undefined;
+    emptyMessage?: string | React.ReactNode | ((props: TreeTableProps) => React.ReactNode) | undefined;
     /**
      * An array of keys to represent the state of the tree expansion state in controlled mode.
      */
@@ -733,7 +733,7 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Content for the left side of the paginator.
      */

package/treetable/treetable.esm.js

@@ -239,7 +239,7 @@ var ColumnBase = ComponentBase.extend({
   }
 });
 
-var styles = "\n@layer primereact {\n    .p-treetable {\n        position: relative;\n    }\n    \n    .p-treetable > .p-treetable-wrapper {\n        overflow: auto;\n    }\n    \n    .p-treetable table {\n        border-collapse: collapse;\n        width: 100%;\n        table-layout: fixed;\n    }\n    \n    .p-treetable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n    \n    .p-treetable-selectable .p-treetable-tbody > tr {\n        cursor: pointer;\n    }\n    \n    .p-treetable-toggler {\n        cursor: pointer;\n        user-select: none;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        vertical-align: middle;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-treetable-toggler + .p-checkbox {\n        vertical-align: middle;\n    }\n    \n    .p-treetable-toggler + .p-checkbox + span {\n        vertical-align: middle;\n    }\n    \n    /* Resizable */\n    .p-treetable-resizable > .p-treetable-wrapper {\n        overflow-x: auto;\n    }\n    \n    .p-treetable-resizable .p-treetable-thead > tr > th,\n    .p-treetable-resizable .p-treetable-tfoot > tr > td,\n    .p-treetable-resizable .p-treetable-tbody > tr > td {\n        overflow: hidden;\n    }\n    \n    .p-treetable-resizable .p-resizable-column {\n        background-clip: padding-box;\n        position: relative;\n    }\n    \n    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n    \n    .p-treetable .p-column-resizer {\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n    \n    .p-treetable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n    \n    /* Scrollable */\n    .p-treetable-scrollable-wrapper {\n        position: relative;\n    }\n    .p-treetable-scrollable-header,\n    .p-treetable-scrollable-footer {\n        overflow: hidden;\n        border: 0 none;\n    }\n    \n    .p-treetable-scrollable-body {\n        overflow: auto;\n        position: relative;\n    }\n    \n    .p-treetable-virtual-table {\n        position: absolute;\n    }\n    \n    /* Frozen Columns */\n    .p-treetable-frozen-view .p-treetable-scrollable-body {\n        overflow: hidden;\n    }\n    \n    .p-treetable-unfrozen-view {\n        position: absolute;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Reorder */\n    .p-treetable-reorder-indicator-up,\n    .p-treetable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n    \n    /* Loader */\n    .p-treetable .p-treetable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n\n    /* Alignment */\n    .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,\n    .p-treetable .p-treetable-tbody > tr > td.p-align-left,\n    .p-treetable .p-treetable-tfoot > tr > td.p-align-left {\n        text-align: left;\n        justify-content: flex-start;\n    }\n\n    .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,\n    .p-treetable .p-treetable-tbody > tr > td.p-align-right,\n    .p-treetable .p-treetable-tfoot > tr > td.p-align-right {\n        text-align: right;\n        justify-content: flex-end;\n    }\n\n    .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,\n    .p-treetable .p-treetable-tbody > tr > td.p-align-center,\n    .p-treetable .p-treetable-tfoot > tr > td.p-align-center {\n        text-align: center;\n        justify-content: center;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-treetable {\n        position: relative;\n    }\n    \n    .p-treetable > .p-treetable-wrapper {\n        overflow: auto;\n    }\n    \n    .p-treetable table {\n        border-collapse: collapse;\n        width: 100%;\n        table-layout: fixed;\n    }\n    \n    .p-treetable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n    \n    .p-treetable-selectable .p-treetable-tbody > tr {\n        cursor: pointer;\n    }\n    \n    .p-treetable-toggler {\n        cursor: pointer;\n        user-select: none;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        vertical-align: middle;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-treetable-toggler + .p-checkbox {\n        vertical-align: middle;\n    }\n    \n    .p-treetable-toggler + .p-checkbox + span {\n        vertical-align: middle;\n    }\n    \n    /* Resizable */\n    .p-treetable-resizable > .p-treetable-wrapper {\n        overflow-x: auto;\n    }\n    \n    .p-treetable-resizable .p-treetable-thead > tr > th,\n    .p-treetable-resizable .p-treetable-tfoot > tr > td,\n    .p-treetable-resizable .p-treetable-tbody > tr > td {\n        overflow: hidden;\n    }\n    \n    .p-treetable-resizable .p-resizable-column {\n        background-clip: padding-box;\n        position: relative;\n    }\n    \n    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n    \n    .p-treetable .p-column-resizer {\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n    \n    .p-treetable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n    \n    /* Scrollable */\n    .p-treetable-scrollable-wrapper {\n        position: relative;\n    }\n    .p-treetable-scrollable-header,\n    .p-treetable-scrollable-footer {\n        overflow: hidden;\n        border: 0 none;\n    }\n    \n    .p-treetable-scrollable-body {\n        overflow: auto;\n        position: relative;\n    }\n    \n    .p-treetable-virtual-table {\n        position: absolute;\n    }\n    \n    /* Frozen Columns */\n    .p-treetable-frozen-view .p-treetable-scrollable-body {\n        overflow: hidden;\n    }\n    \n    .p-treetable-unfrozen-view {\n        position: absolute;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Reorder */\n    .p-treetable-reorder-indicator-up,\n    .p-treetable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n    \n    /* Loader */\n    .p-treetable .p-treetable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var props = _ref.props,
@@ -259,8 +259,8 @@ var classes = {
   header: 'p-treetable-header',
   footer: 'p-treetable-footer',
   resizeHelper: 'p-column-resizer-helper',
-  reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
-  reorderIndicatorDown: 'p-treetable-reorder-indicator-down',
+  reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
+  reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
   wrapper: 'p-treetable-wrapper',
   table: function table(_ref2) {
     var props = _ref2.props;
@@ -277,32 +277,31 @@ var classes = {
   emptyMessage: 'p-treetable-emptymessage',
   bodyCell: function bodyCell(_ref3) {
     var props = _ref3.bodyProps,
-      editingState = _ref3.editingState;
-    return classNames({
+      editingState = _ref3.editingState,
+      align = _ref3.align;
+    return classNames(_defineProperty({
       'p-editable-column': props.editor,
       'p-cell-editing': props.editor ? editingState : false
-    });
+    }, "p-align-".concat(align), !!align));
   },
   sortBadge: 'p-sortable-column-badge',
   headerTitle: 'p-column-title',
-  headerContent: 'p-column-header-content',
   headerCell: function headerCell(_ref4) {
     var props = _ref4.headerProps,
       frozen = _ref4.frozen,
       column = _ref4.column,
       options = _ref4.options,
       getColumnProp = _ref4.getColumnProp,
-      sorted = _ref4.sorted,
-      align = _ref4.align;
+      sorted = _ref4.sorted;
     return options.filterOnly ? classNames('p-filter-column', {
       'p-frozen-column': frozen
-    }) : classNames(_defineProperty({
+    }) : classNames({
       'p-sortable-column': getColumnProp(column, 'sortable'),
       'p-highlight': sorted,
       'p-frozen-column': frozen,
       'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
       'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen
-    }, "p-align-".concat(align), !!align));
+    });
   },
   columnResizer: 'p-column-resizer p-clickable',
   sortIcon: 'p-sortable-column-icon',
@@ -404,9 +403,9 @@ var TreeTableBase = ComponentBase.extend({
     propagateSelectionDown: true,
     propagateSelectionUp: true,
     removableSort: false,
+    reorderableColumns: false,
     reorderIndicatorDownIcon: null,
     reorderIndicatorUpIcon: null,
-    reorderableColumns: false,
     resizableColumns: false,
     rowClassName: null,
     rowHover: false,
@@ -419,8 +418,8 @@ var TreeTableBase = ComponentBase.extend({
     selectionMode: null,
     showGridlines: false,
     sortField: null,
-    sortIcon: null,
     sortMode: 'single',
+    sortIcon: null,
     sortOrder: null,
     stripedRows: false,
     style: null,
@@ -649,11 +648,13 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
   var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
   /* eslint-disable */
   var editorKeyHelper = props.editor && /*#__PURE__*/React.createElement("a", editorKeyHelperProps, /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
+  var align = getColumnProp('align');
   /* eslint-enable */
   var bodyCellProps = mergeProps({
     className: classNames(bodyClassName || props.className, cx('bodyCell', {
       bodyProps: props,
-      editingState: editingState
+      editingState: editingState,
+      align: align
     })),
     style: style,
     onClick: function onClick(e) {
@@ -1395,7 +1396,9 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
       return null;
     } else {
       var colSpan = props.columns ? props.columns.length : null;
-      var _content = props.emptyMessage || localeOption('emptyMessage');
+      var _content = ObjectUtils.getJSXElement(props.emptyMessage, {
+        props: props.tableProps
+      }) || localeOption('emptyMessage');
       var emptyMessageProps = mergeProps({
         className: cx('emptyMessage')
       }, getPTOptions('emptyMessage'));
@@ -1548,7 +1551,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   var onHeaderClick = function onHeaderClick(event, column) {
     if (getColumnProp(column, 'sortable')) {
       var targetNode = event.target;
-      if (DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon') {
+      if (DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' || DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]')) {
         props.onSort({
           originalEvent: event,
           sortField: getColumnProp(column, 'sortField') || getColumnProp(column, 'field'),
@@ -1764,7 +1767,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       var multipleSorted = multiSortMetaData !== null;
       var sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
       var _frozen = getColumnProp(column, 'frozen');
-      var align = getColumnProp(column, 'alignHeader') || getColumnProp(column, 'align');
+      var align = getColumnProp(column, 'alignHeader');
       var sortOrder = 0;
       if (singleSorted) sortOrder = props.sortOrder;else if (multipleSorted) sortOrder = multiSortMetaData.order;
       var sortIconElement = createSortIcon(column, sorted, sortOrder);
@@ -1823,7 +1826,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       }));
       var headerContentProps = mergeProps({
         className: cx('headerContent')
-      }, getColumnPTOptions('headerContent'));
+      }, getColumnPTOptions(column, 'headerContent'));
       var header = /*#__PURE__*/React.createElement("div", headerContentProps, title, sortIconElement, sortBadge, filterElement);
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: column.columnKey || column.field || options.index
@@ -1954,25 +1957,28 @@ var TreeTableScrollableView = /*#__PURE__*/React.memo(function (props) {
     var frozenView = elementRef.current.previousElementSibling;
     var frozenScrollBody;
     if (frozenView) {
-      frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
+      frozenScrollBody = DomHandler.findSingle(frozenView, '[data-pc-section="scrollablebody"]');
     }
-    scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+    scrollHeaderBoxRef.current.style.transform = "translateX(-".concat(scrollBodyRef.current.scrollLeft, "px)");
     if (scrollFooterBoxRef.current) {
-      scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+      scrollFooterBoxRef.current.style.transform = "translateX(-".concat(scrollBodyRef.current.scrollLeft, "px)");
     }
     if (frozenScrollBody) {
       frozenScrollBody.scrollTop = scrollBodyRef.current.scrollTop;
     }
   };
   useMountEffect(function () {
+    var el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');
+    el = el.length > 1 ? el[1] : el[0];
+    var scrollBarWidth = DomHandler.calculateScrollbarWidth(el);
     if (!props.frozen) {
-      var scrollBarWidth = DomHandler.calculateScrollbarWidth();
-      scrollHeaderBoxRef.current.style.marginRight = scrollBarWidth + 'px';
+      var _scrollBarWidth = DomHandler.calculateScrollbarWidth();
+      scrollHeaderBoxRef.current.style.marginRight = _scrollBarWidth + 'px';
       if (scrollFooterBoxRef.current) {
-        scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
+        scrollFooterBoxRef.current.style.marginRight = _scrollBarWidth + 'px';
       }
     } else {
-      scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
+      scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
     }
   });
   React.useEffect(function () {
@@ -2266,7 +2272,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var sortNodes = function sortNodes(data) {
     var value = _toConsumableArray(data);
-    if (columnSortable.current && columnSortable.current === 'custom' && columnSortFunction.current) {
+    if (columnSortable.current && columnSortFunction.current) {
       value = columnSortFunction.current({
         data: data,
         field: getSortField(),
@@ -2397,9 +2403,9 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         if (newColumnWidth > 15 && nextColumnWidth > 15) {
           if (props.scrollable) {
             var scrollableView = findParentScrollableView(resizeColumn.current);
-            var scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-body-table');
-            var scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table');
-            var scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table');
+            var scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablebodytable"]');
+            var scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollableheadertable"]');
+            var scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablefootertable"]');
             var resizeColumnIndex = DomHandler.index(resizeColumn.current);
             resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
             resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
@@ -2414,9 +2420,9 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       } else if (props.columnResizeMode === 'expand') {
         if (props.scrollable) {
           var _scrollableView = findParentScrollableView(resizeColumn.current);
-          var _scrollableBodyTable = DomHandler.findSingle(_scrollableView, 'table.p-treetable-scrollable-body-table');
-          var _scrollableHeaderTable = DomHandler.findSingle(_scrollableView, 'table.p-treetable-scrollable-header-table');
-          var _scrollableFooterTable = DomHandler.findSingle(_scrollableView, 'table.p-treetable-scrollable-footer-table');
+          var _scrollableBodyTable = DomHandler.findSingle(_scrollableView, 'table[data-pc-section="scrollablebodytable"]');
+          var _scrollableHeaderTable = DomHandler.findSingle(_scrollableView, 'table[data-pc-section="scrollableheadertable"]');
+          var _scrollableFooterTable = DomHandler.findSingle(_scrollableView, 'table[data-pc-section="scrollablefootertable"]');
           _scrollableBodyTable.style.width = _scrollableBodyTable.offsetWidth + delta + 'px';
           _scrollableHeaderTable.style.width = _scrollableHeaderTable.offsetWidth + delta + 'px';
           if (_scrollableFooterTable) {
@@ -2917,39 +2923,39 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createTableBody = function createTableBody(value, columns) {
     return /*#__PURE__*/React.createElement(TreeTableBody, {
       hostName: "TreeTable",
-      value: value,
-      originalOptions: props.value,
       checkboxIcon: props.checkboxIcon,
       columns: columns,
+      contextMenuSelectionKey: props.contextMenuSelectionKey,
+      emptyMessage: props.emptyMessage,
       expandedKeys: getExpandedKeys(),
-      selectOnEdit: props.selectOnEdit,
-      onToggle: onToggle,
-      togglerTemplate: props.togglerTemplate,
-      onExpand: props.onExpand,
-      onCollapse: props.onCollapse,
-      paginator: props.paginator,
       first: getFirst(),
-      rows: getRows(),
-      selectionMode: props.selectionMode,
-      selectionKeys: props.selectionKeys,
-      onSelectionChange: props.onSelectionChange,
+      lazy: props.lazy,
+      loading: props.loading,
+      metaData: metaData,
       metaKeySelection: props.metaKeySelection,
+      onCollapse: props.onCollapse,
+      onContextMenu: props.onContextMenu,
+      onContextMenuSelectionChange: props.onContextMenuSelectionChange,
+      onExpand: props.onExpand,
       onRowClick: props.onRowClick,
       onRowMouseEnter: props.onRowMouseEnter,
       onRowMouseLeave: props.onRowMouseLeave,
       onSelect: props.onSelect,
+      onSelectionChange: props.onSelectionChange,
+      onToggle: onToggle,
       onUnselect: props.onUnselect,
-      propagateSelectionUp: props.propagateSelectionUp,
+      originalOptions: props.value,
+      paginator: props.paginator,
       propagateSelectionDown: props.propagateSelectionDown,
-      lazy: props.lazy,
-      rowClassName: props.rowClassName,
-      emptyMessage: props.emptyMessage,
-      loading: props.loading,
-      contextMenuSelectionKey: props.contextMenuSelectionKey,
-      onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-      onContextMenu: props.onContextMenu,
+      propagateSelectionUp: props.propagateSelectionUp,
       ptCallbacks: ptCallbacks,
-      metaData: metaData
+      rowClassName: props.rowClassName,
+      rows: getRows(),
+      selectOnEdit: props.selectOnEdit,
+      selectionKeys: props.selectionKeys,
+      selectionMode: props.selectionMode,
+      togglerTemplate: props.togglerTemplate,
+      value: value
     });
   };
   var createPaginator = function createPaginator(position, totalRecords) {