@procore/data-table 14.14.0 → 14.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Change Log
2
2
 
3
+ ## 14.15.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 089d469e4: Fixed header consistency in PDF exports when showTableHeaderOnEveryPage is enabled.
8
+ - 1362252da: Fix: Adjust SelectCell component size and render ExternalLink icon when the cell is not editable.
9
+ - 3f7456b1f: Added support for rendering symbols either before or after values in the number cell component.
10
+
11
+ ### Patch Changes
12
+
13
+ - 60721efab: Add displayAsPill property to determine to render PillCell
14
+
3
15
  ## 14.14.0
4
16
 
5
17
  ### Minor Changes
@@ -9,6 +9,7 @@ var coreIcons = require('@procore/core-icons');
9
9
  var classNames = require('classnames');
10
10
  var dateFns = require('date-fns');
11
11
  var labsFinancialsUtils = require('@procore/labs-financials-utils');
12
+ var format = require('@procore/labs-financials-utils/dist/format');
12
13
  var ulid$1 = require('ulid');
13
14
  var toastAlert = require('@procore/toast-alert');
14
15
  var ReactDOM = require('react-dom');
@@ -1423,7 +1424,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
1423
1424
  animation-iteration-count: infinite;
1424
1425
  animation-name: ag-shake-left-to-right;
1425
1426
  }
1426
- @keyframes _ag-shake-left-to-right_1c24o_369 {
1427
+ @keyframes _ag-shake-left-to-right_ye2ai_369 {
1427
1428
  from {
1428
1429
  padding-left: 6px;
1429
1430
  padding-right: 2px;
@@ -5424,7 +5425,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
5424
5425
  animation-iteration-count: infinite;
5425
5426
  animation-timing-function: linear;
5426
5427
  }
5427
- @keyframes _spin_1c24o_1 {
5428
+ @keyframes _spin_ye2ai_1 {
5428
5429
  from {
5429
5430
  transform: rotate(0deg);
5430
5431
  }
@@ -7509,10 +7510,15 @@ input[class^=ag-][type=range]:disabled {
7509
7510
  }
7510
7511
  .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active {
7511
7512
  background-color: #e4ecfb;
7512
- border-left: 4px solid #2066df;
7513
7513
  }
7514
- .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active > .ag-cell {
7515
- padding-left: 12px;
7514
+ .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active::before {
7515
+ background-color: #2066df;
7516
+ content: "";
7517
+ width: 4px;
7518
+ height: 100%;
7519
+ position: absolute;
7520
+ top: 0;
7521
+ left: 0;
7516
7522
  }
7517
7523
  .ag-theme-alpine.ag-theme-alpine .ag-row--dt-overdue span {
7518
7524
  color: #e61920;
@@ -7924,7 +7930,7 @@ input[class^=ag-][type=range]:disabled {
7924
7930
  padding-left: 16px;
7925
7931
  }
7926
7932
 
7927
- div._contextPanel_1c24o_7148 {
7933
+ div._contextPanel_ye2ai_7153 {
7928
7934
  width: 400px;
7929
7935
  transition: all ease 500ms;
7930
7936
  flex: 0 0 auto;
@@ -7933,7 +7939,7 @@ div._contextPanel_1c24o_7148 {
7933
7939
  border: 1px solid #d6dadc;
7934
7940
  display: flex;
7935
7941
  }
7936
- div._contextPanel--hidden_1c24o_7157 {
7942
+ div._contextPanel--hidden_ye2ai_7162 {
7937
7943
  border: none;
7938
7944
  overflow: hidden;
7939
7945
  padding: 0px;
@@ -7941,50 +7947,50 @@ div._contextPanel--hidden_1c24o_7157 {
7941
7947
  width: 0px;
7942
7948
  }
7943
7949
 
7944
- ._contextPanelWrapper_1c24o_7165 {
7950
+ ._contextPanelWrapper_ye2ai_7170 {
7945
7951
  position: relative;
7946
7952
  flex-grow: 1;
7947
7953
  }
7948
7954
 
7949
- ._contextPanelBody_1c24o_7170 {
7955
+ ._contextPanelBody_ye2ai_7175 {
7950
7956
  width: clamp(380px, 400px, 100%);
7951
7957
  }
7952
7958
 
7953
- ._contextPanel-stickyHeader_1c24o_7174 {
7959
+ ._contextPanel-stickyHeader_ye2ai_7179 {
7954
7960
  background-color: #ffffff;
7955
7961
  position: sticky;
7956
7962
  top: 0;
7957
7963
  z-index: 5;
7958
7964
  }
7959
7965
 
7960
- ._filters-list_1c24o_7181 {
7966
+ ._filters-list_ye2ai_7186 {
7961
7967
  padding: 0;
7962
7968
  margin: 0;
7963
7969
  }
7964
- ._filters-list_1c24o_7181 ol {
7970
+ ._filters-list_ye2ai_7186 ol {
7965
7971
  padding: 0;
7966
7972
  margin: 0;
7967
7973
  }
7968
7974
 
7969
- ._col-drag-column-icon_1c24o_7190 {
7975
+ ._col-drag-column-icon_ye2ai_7195 {
7970
7976
  color: #6a767c;
7971
7977
  }
7972
7978
 
7973
- ._tabular-nums_1c24o_7194 {
7979
+ ._tabular-nums_ye2ai_7199 {
7974
7980
  font-variant-numeric: tabular-nums;
7975
7981
  }`;
7976
7982
  document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
7977
7983
  var styles_default = {
7978
- "contextPanel": "_contextPanel_1c24o_7148",
7979
- "contextPanel--hidden": "_contextPanel--hidden_1c24o_7157",
7980
- "contextPanelWrapper": "_contextPanelWrapper_1c24o_7165",
7981
- "contextPanelBody": "_contextPanelBody_1c24o_7170",
7982
- "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1c24o_7174",
7983
- "filters-list": "_filters-list_1c24o_7181",
7984
- "col-drag-column-icon": "_col-drag-column-icon_1c24o_7190",
7985
- "tabular-nums": "_tabular-nums_1c24o_7194",
7986
- "ag-shake-left-to-right": "_ag-shake-left-to-right_1c24o_369",
7987
- "spin": "_spin_1c24o_1"
7984
+ "contextPanel": "_contextPanel_ye2ai_7153",
7985
+ "contextPanel--hidden": "_contextPanel--hidden_ye2ai_7162",
7986
+ "contextPanelWrapper": "_contextPanelWrapper_ye2ai_7170",
7987
+ "contextPanelBody": "_contextPanelBody_ye2ai_7175",
7988
+ "contextPanel-stickyHeader": "_contextPanel-stickyHeader_ye2ai_7179",
7989
+ "filters-list": "_filters-list_ye2ai_7186",
7990
+ "col-drag-column-icon": "_col-drag-column-icon_ye2ai_7195",
7991
+ "tabular-nums": "_tabular-nums_ye2ai_7199",
7992
+ "ag-shake-left-to-right": "_ag-shake-left-to-right_ye2ai_369",
7993
+ "spin": "_spin_ye2ai_1"
7988
7994
  };
7989
7995
 
7990
7996
  // src/utils/getCellValueTypographyProps.ts
@@ -8665,12 +8671,12 @@ var DateCellValue = ({
8665
8671
  value
8666
8672
  }) => {
8667
8673
  var _a, _b;
8668
- const { format } = coreReact.useDateTime();
8674
+ const { format: format2 } = coreReact.useDateTime();
8669
8675
  if (isGroup || isEmptyValue(value)) {
8670
8676
  return null;
8671
8677
  }
8672
8678
  const parsedValue = getDateObject(value);
8673
- const internalValue = parsedValue ? format(
8679
+ const internalValue = parsedValue ? format2(
8674
8680
  parsedValue,
8675
8681
  ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.dateFormatType) || "numeric-date"
8676
8682
  ) : void 0;
@@ -8739,12 +8745,12 @@ var DateTimeCellValue = ({
8739
8745
  value
8740
8746
  }) => {
8741
8747
  var _a, _b;
8742
- const { format } = coreReact.useDateTime();
8748
+ const { format: format2 } = coreReact.useDateTime();
8743
8749
  if (isGroup || isEmptyValue(value)) {
8744
8750
  return null;
8745
8751
  }
8746
8752
  const parsedValue = getDateObject2(value);
8747
- const internalValue = parsedValue ? format(
8753
+ const internalValue = parsedValue ? format2(
8748
8754
  parsedValue,
8749
8755
  ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.dateFormatType) || "abbr-weekday-abbr-date-at-time"
8750
8756
  ) : void 0;
@@ -16667,7 +16673,7 @@ var calculateOrdinal = (value) => {
16667
16673
  }
16668
16674
  return "th";
16669
16675
  };
16670
- function dateToFormattedString(date, format = "YYYY-MM-DD") {
16676
+ function dateToFormattedString(date, format2 = "YYYY-MM-DD") {
16671
16677
  const fullYear = padStartWidthZeros(date.getFullYear(), 4);
16672
16678
  const months = [
16673
16679
  "January",
@@ -16711,7 +16717,7 @@ function dateToFormattedString(date, format = "YYYY-MM-DD") {
16711
16717
  d: () => `${date.getDay()}`
16712
16718
  };
16713
16719
  const regexp = new RegExp(Object.keys(replace).join("|"), "g");
16714
- return format.replace(regexp, (match) => {
16720
+ return format2.replace(regexp, (match) => {
16715
16721
  if (match in replace) {
16716
16722
  return replace[match]();
16717
16723
  }
@@ -21354,14 +21360,14 @@ var DateFilterModelFormatter = class extends SimpleFilterModelFormatter {
21354
21360
  const isRange = type == SimpleFilter.IN_RANGE || numberOfInputs === 2;
21355
21361
  const dateFrom = parseDateTimeFromString(condition.dateFrom);
21356
21362
  const dateTo = parseDateTimeFromString(condition.dateTo);
21357
- const format = this.dateFilterParams.inRangeFloatingFilterDateFormat;
21363
+ const format2 = this.dateFilterParams.inRangeFloatingFilterDateFormat;
21358
21364
  if (isRange) {
21359
- const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format) : "null";
21360
- const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format) : "null";
21365
+ const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format2) : "null";
21366
+ const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format2) : "null";
21361
21367
  return `${formattedFrom}-${formattedTo}`;
21362
21368
  }
21363
21369
  if (dateFrom != null) {
21364
- return dateToFormattedString(dateFrom, format);
21370
+ return dateToFormattedString(dateFrom, format2);
21365
21371
  }
21366
21372
  return `${type}`;
21367
21373
  }
@@ -52984,7 +52990,27 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
52984
52990
  if (isGroup) {
52985
52991
  return /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps, className, weight: "semibold" }, value);
52986
52992
  }
52993
+ const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
52987
52994
  const URL = columnDefinition.cellRendererParams.getURL(value, data);
52995
+ if (isExternalLink && value && URL) {
52996
+ return /* @__PURE__ */ React76__default.default.createElement(
52997
+ coreReact.Typography,
52998
+ {
52999
+ ...typographyProps,
53000
+ className,
53001
+ style: { display: "flex", alignItems: "center", gap: "5px" }
53002
+ },
53003
+ internalValue,
53004
+ /* @__PURE__ */ React76__default.default.createElement(
53005
+ coreIcons.ExternalLink,
53006
+ {
53007
+ cursor: "pointer",
53008
+ size: "sm",
53009
+ onClick: () => window.open(URL, "_blank")
53010
+ }
53011
+ )
53012
+ );
53013
+ }
52988
53014
  return URL ? /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps, className }, /* @__PURE__ */ React76__default.default.createElement(coreReact.Link, { href: URL }, internalValue)) : /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps }, internalValue);
52989
53015
  };
52990
53016
  var LinkCellRenderer = withDataTableRenderer(
@@ -53013,9 +53039,10 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
53013
53039
  }
53014
53040
  return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null);
53015
53041
  }
53016
- const internalValue = labsFinancialsUtils.formatNumber(value, {
53042
+ const internalValue = format.format(value, {
53017
53043
  maxDecimalPrecision: 15,
53018
53044
  minDecimalPrecision: 0,
53045
+ shouldUseGtk: true,
53019
53046
  symbol: "",
53020
53047
  ...(_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.formatConfig
53021
53048
  });
@@ -53407,7 +53434,7 @@ var Renderer9 = ({
53407
53434
  rowPinned
53408
53435
  }) => {
53409
53436
  var _a, _b, _c, _d;
53410
- const { getColor } = columnDefinition.cellRendererParams;
53437
+ const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
53411
53438
  const I18n = coreReact.useI18nContext();
53412
53439
  if (isEmptyValue(value)) {
53413
53440
  if (isGroup) {
@@ -53433,7 +53460,7 @@ var Renderer9 = ({
53433
53460
  const typographyProps = getCellValueTypographyProps(
53434
53461
  (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.typographyProps
53435
53462
  );
53436
- if (isGroup || rowPinned && columnDefinition.aggFunc) {
53463
+ if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
53437
53464
  return /* @__PURE__ */ React76__default.default.createElement(coreReact.Typography, { ...typographyProps, weight: "semibold" }, label);
53438
53465
  }
53439
53466
  return /* @__PURE__ */ React76__default.default.createElement(coreReact.Pill, { color: getColor(value), className: cx10("pill-cell") }, label);
@@ -54872,8 +54899,8 @@ function transformToExcelStyles(excelDataFormats) {
54872
54899
  if (excelDataFormats === void 0) {
54873
54900
  return void 0;
54874
54901
  }
54875
- return excelDataFormats.map((format) => {
54876
- const { id, ...rest } = format;
54902
+ return excelDataFormats.map((format2) => {
54903
+ const { id, ...rest } = format2;
54877
54904
  return {
54878
54905
  id: toExcelCellClass(id),
54879
54906
  ...rest
@@ -55914,7 +55941,7 @@ var DataTableCellRenderer = ({
55914
55941
  value,
55915
55942
  setValue
55916
55943
  }) => {
55917
- var _a, _b, _c;
55944
+ var _a, _b, _c, _d, _e, _f;
55918
55945
  const { columnApi } = useInternalTableContext();
55919
55946
  const columnDefinition = transformToColumnDefinition(colDef);
55920
55947
  const validationOutput = ((_a = colDef.valueValidator) == null ? void 0 : _a.call(colDef, {
@@ -55949,6 +55976,8 @@ var DataTableCellRenderer = ({
55949
55976
  value
55950
55977
  };
55951
55978
  const hasValue = value !== void 0 && value !== null && value !== "";
55979
+ const isSelectCellComponent = ((_c = (_b = columnDefinition.cellEditor) == null ? void 0 : _b.render) == null ? void 0 : _c.displayName) === "SelectCellEditor";
55980
+ const URL = isSelectCellComponent && ((_d = columnDefinition == null ? void 0 : columnDefinition.cellRendererParams) == null ? void 0 : _d.getURL) ? columnDefinition.cellRendererParams.getURL(value) : null;
55952
55981
  const startEditing = React76.useCallback(
55953
55982
  () => api.startEditingCell({
55954
55983
  rowIndex: node.rowIndex,
@@ -55956,34 +55985,54 @@ var DataTableCellRenderer = ({
55956
55985
  }),
55957
55986
  [column2, node]
55958
55987
  );
55959
- return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76__default.default.createElement(coreReact.Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76__default.default.createElement(RowCheckbox, { api, data, node })), columnDefinition.editable ? /* @__PURE__ */ React76__default.default.createElement(
55960
- PseudoInlineEditorWrapper,
55961
- {
55962
- showArrow: editorType === "select",
55963
- onClick: startEditing,
55964
- onClear: ((_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.clearable) && hasValue ? () => {
55965
- setValue == null ? void 0 : setValue(null);
55966
- } : void 0,
55967
- showCalendar: editorType === "date",
55968
- rightAligned: colDef.type === "rightAligned",
55969
- hasValue,
55970
- alwaysShowEditors: (_c = columnDefinition.cellEditorParams) == null ? void 0 : _c.alwaysShowPseudoEditors,
55971
- ...validationOutput
55972
- },
55973
- /* @__PURE__ */ React76__default.default.createElement(Component4, { ...componentParams })
55974
- ) : /* @__PURE__ */ React76__default.default.createElement(
55975
- NonEditorWrapper,
55988
+ return /* @__PURE__ */ React76__default.default.createElement(React76__default.default.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76__default.default.createElement(coreReact.Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76__default.default.createElement(RowCheckbox, { api, data, node })), /* @__PURE__ */ React76__default.default.createElement(
55989
+ coreReact.Flex,
55976
55990
  {
55977
- rightAligned: colDef.type === "rightAligned",
55978
- ...validationOutput,
55979
- rowPinned: Boolean(componentParams.rowPinned),
55980
- isGroup: Boolean(componentParams.isGroup)
55991
+ gap: "5px",
55992
+ alignItems: "center",
55993
+ justifyContent: "center",
55994
+ style: { width: "100%" }
55981
55995
  },
55982
- /* @__PURE__ */ React76__default.default.createElement(
55983
- Component4,
55996
+ columnDefinition.editable ? /* @__PURE__ */ React76__default.default.createElement(
55997
+ PseudoInlineEditorWrapper,
55998
+ {
55999
+ showArrow: editorType === "select",
56000
+ onClick: startEditing,
56001
+ onClear: ((_e = columnDefinition.cellEditorParams) == null ? void 0 : _e.clearable) && hasValue ? () => {
56002
+ setValue == null ? void 0 : setValue(null);
56003
+ } : void 0,
56004
+ showCalendar: editorType === "date",
56005
+ rightAligned: colDef.type === "rightAligned",
56006
+ hasValue,
56007
+ alwaysShowEditors: (_f = columnDefinition.cellEditorParams) == null ? void 0 : _f.alwaysShowPseudoEditors,
56008
+ ...validationOutput
56009
+ },
56010
+ /* @__PURE__ */ React76__default.default.createElement(Component4, { ...componentParams })
56011
+ ) : /* @__PURE__ */ React76__default.default.createElement(
56012
+ NonEditorWrapper,
55984
56013
  {
55985
- ...componentParams,
55986
- tableRef: columnDefinition.cellRendererParams.tableRef
56014
+ rightAligned: colDef.type === "rightAligned",
56015
+ ...validationOutput,
56016
+ rowPinned: Boolean(componentParams.rowPinned),
56017
+ isGroup: Boolean(componentParams.isGroup)
56018
+ },
56019
+ /* @__PURE__ */ React76__default.default.createElement(
56020
+ Component4,
56021
+ {
56022
+ ...componentParams,
56023
+ tableRef: columnDefinition.cellRendererParams.tableRef
56024
+ }
56025
+ )
56026
+ ),
56027
+ URL && /* @__PURE__ */ React76__default.default.createElement(
56028
+ coreIcons.ExternalLink,
56029
+ {
56030
+ cursor: "pointer",
56031
+ size: "sm",
56032
+ onClick: (e) => {
56033
+ e.stopPropagation();
56034
+ window.open(URL, "_blank");
56035
+ }
55987
56036
  }
55988
56037
  )
55989
56038
  ));
@@ -61563,14 +61612,14 @@ var protection_default = protection;
61563
61612
  // ../../node_modules/@ag-grid-enterprise/excel-export/dist/esm/es6/excelExport/files/xml/styles/numberFormat.mjs
61564
61613
  var numberFormat = {
61565
61614
  getTemplate(styleProperties) {
61566
- const { format } = styleProperties.numberFormat;
61615
+ const { format: format2 } = styleProperties.numberFormat;
61567
61616
  return {
61568
61617
  name: "NumberFormat",
61569
61618
  properties: {
61570
61619
  prefixedAttributes: [{
61571
61620
  prefix: "ss:",
61572
61621
  map: {
61573
- Format: format
61622
+ Format: format2
61574
61623
  }
61575
61624
  }]
61576
61625
  }
@@ -63521,15 +63570,15 @@ var registerFill = (fill) => {
63521
63570
  }
63522
63571
  return pos;
63523
63572
  };
63524
- var registerNumberFmt = (format) => {
63525
- format = _.utf8_encode(format);
63526
- if (numberFormatMap[format]) {
63527
- return numberFormatMap[format];
63573
+ var registerNumberFmt = (format2) => {
63574
+ format2 = _.utf8_encode(format2);
63575
+ if (numberFormatMap[format2]) {
63576
+ return numberFormatMap[format2];
63528
63577
  }
63529
- let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format);
63578
+ let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format2);
63530
63579
  if (pos === -1) {
63531
63580
  pos = registeredNumberFmts.length + 164;
63532
- registeredNumberFmts.push({ formatCode: format, numFmtId: pos });
63581
+ registeredNumberFmts.push({ formatCode: format2, numFmtId: pos });
63533
63582
  } else {
63534
63583
  pos = registeredNumberFmts[pos].numFmtId;
63535
63584
  }
@@ -80606,6 +80655,7 @@ function generateHTMLString({
80606
80655
  clearTimeout(exportTimeoutId);
80607
80656
  }
80608
80657
  exportTimeoutId = setTimeout(() => {
80658
+ var _a2, _b2;
80609
80659
  const exportedDocument = document.implementation.createHTMLDocument();
80610
80660
  const printStylesElement = exportedDocument.createElement("style");
80611
80661
  tableContainer.querySelectorAll(
@@ -80684,44 +80734,73 @@ function generateHTMLString({
80684
80734
  if (exportedDocument.querySelector(".ag-header-container") && showTableHeaderOnEveryPage) {
80685
80735
  const tableHeaderStylesElement = exportedDocument.createElement("style");
80686
80736
  tableHeaderStylesElement.innerHTML = `
80737
+ /* Original header styles */
80687
80738
  .ag-header-container {
80688
80739
  height: ${TABLE_HEADER_HEIGHT}px;
80689
80740
  background: ${coreReact.colors.gray96};
80690
80741
  border-bottom: 1px solid #d6dadc;
80691
- break-before: page;
80742
+ }
80743
+ /* Cloned header styles */
80744
+ .paginated-header {
80745
+ height: ${TABLE_HEADER_HEIGHT}px;
80746
+ background: ${coreReact.colors.gray96};
80747
+ border-bottom: 1px solid #d6dadc;
80748
+ /* Ensure cloned headers start on a new page */
80749
+ page-break-before: always;
80692
80750
  }
80693
80751
  `;
80694
80752
  exportedDocument.head.appendChild(tableHeaderStylesElement);
80695
- const tableHeader = exportedDocument.querySelector(".ag-header-container").cloneNode(true);
80753
+ const tableHeaderElement = exportedDocument.querySelector(
80754
+ ".ag-header-container"
80755
+ );
80756
+ if (!tableHeaderElement) {
80757
+ return reject(new Error("Table header container not found."));
80758
+ }
80759
+ const tableHeader = tableHeaderElement.cloneNode(true);
80760
+ tableHeader.classList.add("paginated-header");
80696
80761
  const tableRowsContainer = exportedDocument.querySelector(
80697
80762
  ".ag-center-cols-container"
80698
80763
  );
80699
- const totalRows = tableRowsContainer.children.length;
80700
- const maxPageContentHeight = pageHeight - pageFormat.marginInPixels.top - pageFormat.marginInPixels.bottom;
80701
- let pageContentHeight = TABLE_HEADER_HEIGHT;
80702
- let currentPage = 1;
80703
- for (let index = 0; index < totalRows; index++) {
80704
- const getScaledRowHeight = (row3) => {
80705
- const scale = pageHeight / tableWidth;
80706
- let rowHeight2 = Number(row3.style.height.replace("px", ""));
80707
- if (scale < 1) {
80708
- rowHeight2 *= scale;
80764
+ if (!tableRowsContainer) {
80765
+ console.error("Table rows container not found.");
80766
+ return;
80767
+ }
80768
+ const allRows = Array.from(
80769
+ tableRowsContainer.children
80770
+ );
80771
+ tableRowsContainer.innerHTML = "";
80772
+ const maxPageContentHeight = pageHeight - (((_a2 = pageFormat.marginInPixels) == null ? void 0 : _a2.top) ?? DEFAULT_PAGE_MARGIN) - (((_b2 = pageFormat.marginInPixels) == null ? void 0 : _b2.bottom) ?? DEFAULT_PAGE_MARGIN) - TABLE_HEADER_HEIGHT;
80773
+ let currentPageContentHeight = 0;
80774
+ let rowsInCurrentPage = [];
80775
+ let isFirstPage = true;
80776
+ const appendPage = () => {
80777
+ if (rowsInCurrentPage.length > 0) {
80778
+ if (!isFirstPage) {
80779
+ tableRowsContainer.appendChild(tableHeader.cloneNode(true));
80780
+ } else {
80781
+ isFirstPage = false;
80709
80782
  }
80710
- return rowHeight2;
80711
- };
80712
- const row2 = tableRowsContainer.children[index + currentPage - 1];
80713
- const rowHeight = getScaledRowHeight(row2);
80714
- if (pageContentHeight + rowHeight >= maxPageContentHeight) {
80715
- tableRowsContainer.insertBefore(
80716
- tableHeader.cloneNode(true),
80717
- row2
80783
+ rowsInCurrentPage.forEach(
80784
+ (row2) => tableRowsContainer.appendChild(row2)
80718
80785
  );
80719
- currentPage += 1;
80720
- pageContentHeight = TABLE_HEADER_HEIGHT;
80721
- } else {
80722
- pageContentHeight += rowHeight;
80786
+ rowsInCurrentPage = [];
80787
+ currentPageContentHeight = 0;
80723
80788
  }
80724
- }
80789
+ };
80790
+ allRows.forEach((row2) => {
80791
+ let rowHeight = parseFloat(row2.style.height.replace("px", "")) || row2.offsetHeight;
80792
+ const scale = pageHeight / tableWidth;
80793
+ if (scale < 1) {
80794
+ rowHeight *= scale;
80795
+ }
80796
+ if (currentPageContentHeight + rowHeight > maxPageContentHeight) {
80797
+ appendPage();
80798
+ isFirstPage = false;
80799
+ }
80800
+ rowsInCurrentPage.push(row2);
80801
+ currentPageContentHeight += rowHeight;
80802
+ });
80803
+ appendPage();
80725
80804
  }
80726
80805
  resolve(exportedDocument.getElementsByTagName("html")[0].outerHTML);
80727
80806
  }, 2e3);
@@ -303,6 +303,7 @@ declare const GroupCellRenderer: React$1.FC<any>;
303
303
  interface LinkCellRendererParams<TValue> {
304
304
  typographyProps?: TypographyProps;
305
305
  getURL: (value: TValue, data: any) => string;
306
+ isExternalLink?: boolean;
306
307
  }
307
308
  type LinkCellColumnDefinition<TValue = any> = GranularRequired<ColumnDefinition<TValue, typeof LinkCellRenderer, LinkCellRendererParams<TValue>>, 'cellRendererParams'>;
308
309
  interface LinkCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, LinkCellColumnDefinition> {
@@ -385,6 +386,7 @@ declare const PercentCellEditor: React__default.ForwardRefExoticComponent<_ag_gr
385
386
  interface PillCellRendererParams<TValue> {
386
387
  getColor: (item: TValue) => PillColor;
387
388
  typographyProps?: TypographyProps;
389
+ displayAsPill?: boolean;
388
390
  }
389
391
  type PillCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof PillCellRenderer, PillCellRendererParams<TValue>, typeof PillSelectCellEditor, PillCellEditorParams<TValue>, TFilterOption, TFilterValue>, 'cellRendererParams'>;
390
392
  interface PillCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, PillCellColumnDefinition<TValue>> {
@@ -403,6 +405,7 @@ declare const PillSelectCellEditor: React__default.ForwardRefExoticComponent<_ag
403
405
 
404
406
  type SelectCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof SelectCellRenderer, {
405
407
  typographyProps?: TypographyProps;
408
+ getURL?: (value: TValue) => string | null;
406
409
  }, typeof SelectCellEditor, SelectCellEditorParams<TValue>, TFilterOption, TFilterValue, 'select', SelectBulkEditorParams>, 'cellEditor' | 'cellEditorParams'>;
407
410
  interface SelectCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, SelectCellColumnDefinition<TValue>> {
408
411
  }
@@ -303,6 +303,7 @@ declare const GroupCellRenderer: React$1.FC<any>;
303
303
  interface LinkCellRendererParams<TValue> {
304
304
  typographyProps?: TypographyProps;
305
305
  getURL: (value: TValue, data: any) => string;
306
+ isExternalLink?: boolean;
306
307
  }
307
308
  type LinkCellColumnDefinition<TValue = any> = GranularRequired<ColumnDefinition<TValue, typeof LinkCellRenderer, LinkCellRendererParams<TValue>>, 'cellRendererParams'>;
308
309
  interface LinkCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, LinkCellColumnDefinition> {
@@ -385,6 +386,7 @@ declare const PercentCellEditor: React__default.ForwardRefExoticComponent<_ag_gr
385
386
  interface PillCellRendererParams<TValue> {
386
387
  getColor: (item: TValue) => PillColor;
387
388
  typographyProps?: TypographyProps;
389
+ displayAsPill?: boolean;
388
390
  }
389
391
  type PillCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof PillCellRenderer, PillCellRendererParams<TValue>, typeof PillSelectCellEditor, PillCellEditorParams<TValue>, TFilterOption, TFilterValue>, 'cellRendererParams'>;
390
392
  interface PillCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, PillCellColumnDefinition<TValue>> {
@@ -403,6 +405,7 @@ declare const PillSelectCellEditor: React__default.ForwardRefExoticComponent<_ag
403
405
 
404
406
  type SelectCellColumnDefinition<TValue = any, TFilterOption = any, TFilterValue = number | string> = GranularRequired<ColumnDefinition<TValue, typeof SelectCellRenderer, {
405
407
  typographyProps?: TypographyProps;
408
+ getURL?: (value: TValue) => string | null;
406
409
  }, typeof SelectCellEditor, SelectCellEditorParams<TValue>, TFilterOption, TFilterValue, 'select', SelectBulkEditorParams>, 'cellEditor' | 'cellEditorParams'>;
407
410
  interface SelectCellRendererProps<TValue = any> extends DataTableCellRendererProps<TValue, SelectCellColumnDefinition<TValue>> {
408
411
  }