@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.
@@ -3,10 +3,11 @@ import { uniqBy, prop, startsWith, mergeDeepRight, equals, omit, intersection, i
3
3
  import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, colors, Form, spacing, Switch, Panel, UNSAFE_StyledFilterTokenLabel, typographyWeights, SelectButton, StyledSelectButton, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Link, AvatarStack, Pill, Typeahead, Pagination, UNSAFE_FilterToken, UNSAFE_SuperSelect, Avatar, H3, Checkbox, useI18n, I18nContext, UNSAFE_useSuperSelectContext, DropdownFlyout, useVisibility, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
4
4
  import classnames from 'classnames/bind';
5
5
  import debounce5 from 'lodash.debounce';
6
- import { Error as Error$1, Grip, Pencil, Building, Clear, Calendar as Calendar$1, ArrowDown, ArrowUp, CaretDown, CaretRight, CaretsInVertical, CaretsOutVerticalWithLine, CaretsOutVertical, CaretsIn, CaretsOut } from '@procore/core-icons';
6
+ import { Error as Error$1, Grip, ExternalLink, Pencil, Building, Clear, Calendar as Calendar$1, ArrowDown, ArrowUp, CaretDown, CaretRight, CaretsInVertical, CaretsOutVerticalWithLine, CaretsOutVertical, CaretsIn, CaretsOut } from '@procore/core-icons';
7
7
  import classNames from 'classnames';
8
8
  import { isDate, parseISO, isSameDay, formatISO, isBefore } from 'date-fns';
9
9
  import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-financials-utils';
10
+ import { format } from '@procore/labs-financials-utils/dist/format';
10
11
  import { detectPrng, factory } from 'ulid';
11
12
  import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
12
13
  import ReactDOM, { createPortal } from 'react-dom';
@@ -1409,7 +1410,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
1409
1410
  animation-iteration-count: infinite;
1410
1411
  animation-name: ag-shake-left-to-right;
1411
1412
  }
1412
- @keyframes _ag-shake-left-to-right_1c24o_369 {
1413
+ @keyframes _ag-shake-left-to-right_ye2ai_369 {
1413
1414
  from {
1414
1415
  padding-left: 6px;
1415
1416
  padding-right: 2px;
@@ -5410,7 +5411,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
5410
5411
  animation-iteration-count: infinite;
5411
5412
  animation-timing-function: linear;
5412
5413
  }
5413
- @keyframes _spin_1c24o_1 {
5414
+ @keyframes _spin_ye2ai_1 {
5414
5415
  from {
5415
5416
  transform: rotate(0deg);
5416
5417
  }
@@ -7495,10 +7496,15 @@ input[class^=ag-][type=range]:disabled {
7495
7496
  }
7496
7497
  .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active {
7497
7498
  background-color: #e4ecfb;
7498
- border-left: 4px solid #2066df;
7499
7499
  }
7500
- .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active > .ag-cell {
7501
- padding-left: 12px;
7500
+ .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active::before {
7501
+ background-color: #2066df;
7502
+ content: "";
7503
+ width: 4px;
7504
+ height: 100%;
7505
+ position: absolute;
7506
+ top: 0;
7507
+ left: 0;
7502
7508
  }
7503
7509
  .ag-theme-alpine.ag-theme-alpine .ag-row--dt-overdue span {
7504
7510
  color: #e61920;
@@ -7910,7 +7916,7 @@ input[class^=ag-][type=range]:disabled {
7910
7916
  padding-left: 16px;
7911
7917
  }
7912
7918
 
7913
- div._contextPanel_1c24o_7148 {
7919
+ div._contextPanel_ye2ai_7153 {
7914
7920
  width: 400px;
7915
7921
  transition: all ease 500ms;
7916
7922
  flex: 0 0 auto;
@@ -7919,7 +7925,7 @@ div._contextPanel_1c24o_7148 {
7919
7925
  border: 1px solid #d6dadc;
7920
7926
  display: flex;
7921
7927
  }
7922
- div._contextPanel--hidden_1c24o_7157 {
7928
+ div._contextPanel--hidden_ye2ai_7162 {
7923
7929
  border: none;
7924
7930
  overflow: hidden;
7925
7931
  padding: 0px;
@@ -7927,50 +7933,50 @@ div._contextPanel--hidden_1c24o_7157 {
7927
7933
  width: 0px;
7928
7934
  }
7929
7935
 
7930
- ._contextPanelWrapper_1c24o_7165 {
7936
+ ._contextPanelWrapper_ye2ai_7170 {
7931
7937
  position: relative;
7932
7938
  flex-grow: 1;
7933
7939
  }
7934
7940
 
7935
- ._contextPanelBody_1c24o_7170 {
7941
+ ._contextPanelBody_ye2ai_7175 {
7936
7942
  width: clamp(380px, 400px, 100%);
7937
7943
  }
7938
7944
 
7939
- ._contextPanel-stickyHeader_1c24o_7174 {
7945
+ ._contextPanel-stickyHeader_ye2ai_7179 {
7940
7946
  background-color: #ffffff;
7941
7947
  position: sticky;
7942
7948
  top: 0;
7943
7949
  z-index: 5;
7944
7950
  }
7945
7951
 
7946
- ._filters-list_1c24o_7181 {
7952
+ ._filters-list_ye2ai_7186 {
7947
7953
  padding: 0;
7948
7954
  margin: 0;
7949
7955
  }
7950
- ._filters-list_1c24o_7181 ol {
7956
+ ._filters-list_ye2ai_7186 ol {
7951
7957
  padding: 0;
7952
7958
  margin: 0;
7953
7959
  }
7954
7960
 
7955
- ._col-drag-column-icon_1c24o_7190 {
7961
+ ._col-drag-column-icon_ye2ai_7195 {
7956
7962
  color: #6a767c;
7957
7963
  }
7958
7964
 
7959
- ._tabular-nums_1c24o_7194 {
7965
+ ._tabular-nums_ye2ai_7199 {
7960
7966
  font-variant-numeric: tabular-nums;
7961
7967
  }`;
7962
7968
  document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
7963
7969
  var styles_default = {
7964
- "contextPanel": "_contextPanel_1c24o_7148",
7965
- "contextPanel--hidden": "_contextPanel--hidden_1c24o_7157",
7966
- "contextPanelWrapper": "_contextPanelWrapper_1c24o_7165",
7967
- "contextPanelBody": "_contextPanelBody_1c24o_7170",
7968
- "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1c24o_7174",
7969
- "filters-list": "_filters-list_1c24o_7181",
7970
- "col-drag-column-icon": "_col-drag-column-icon_1c24o_7190",
7971
- "tabular-nums": "_tabular-nums_1c24o_7194",
7972
- "ag-shake-left-to-right": "_ag-shake-left-to-right_1c24o_369",
7973
- "spin": "_spin_1c24o_1"
7970
+ "contextPanel": "_contextPanel_ye2ai_7153",
7971
+ "contextPanel--hidden": "_contextPanel--hidden_ye2ai_7162",
7972
+ "contextPanelWrapper": "_contextPanelWrapper_ye2ai_7170",
7973
+ "contextPanelBody": "_contextPanelBody_ye2ai_7175",
7974
+ "contextPanel-stickyHeader": "_contextPanel-stickyHeader_ye2ai_7179",
7975
+ "filters-list": "_filters-list_ye2ai_7186",
7976
+ "col-drag-column-icon": "_col-drag-column-icon_ye2ai_7195",
7977
+ "tabular-nums": "_tabular-nums_ye2ai_7199",
7978
+ "ag-shake-left-to-right": "_ag-shake-left-to-right_ye2ai_369",
7979
+ "spin": "_spin_ye2ai_1"
7974
7980
  };
7975
7981
 
7976
7982
  // src/utils/getCellValueTypographyProps.ts
@@ -8651,12 +8657,12 @@ var DateCellValue = ({
8651
8657
  value
8652
8658
  }) => {
8653
8659
  var _a, _b;
8654
- const { format } = useDateTime();
8660
+ const { format: format2 } = useDateTime();
8655
8661
  if (isGroup || isEmptyValue(value)) {
8656
8662
  return null;
8657
8663
  }
8658
8664
  const parsedValue = getDateObject(value);
8659
- const internalValue = parsedValue ? format(
8665
+ const internalValue = parsedValue ? format2(
8660
8666
  parsedValue,
8661
8667
  ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.dateFormatType) || "numeric-date"
8662
8668
  ) : void 0;
@@ -8725,12 +8731,12 @@ var DateTimeCellValue = ({
8725
8731
  value
8726
8732
  }) => {
8727
8733
  var _a, _b;
8728
- const { format } = useDateTime();
8734
+ const { format: format2 } = useDateTime();
8729
8735
  if (isGroup || isEmptyValue(value)) {
8730
8736
  return null;
8731
8737
  }
8732
8738
  const parsedValue = getDateObject2(value);
8733
- const internalValue = parsedValue ? format(
8739
+ const internalValue = parsedValue ? format2(
8734
8740
  parsedValue,
8735
8741
  ((_a = columnDefinition.cellRendererParams) == null ? void 0 : _a.dateFormatType) || "abbr-weekday-abbr-date-at-time"
8736
8742
  ) : void 0;
@@ -16653,7 +16659,7 @@ var calculateOrdinal = (value) => {
16653
16659
  }
16654
16660
  return "th";
16655
16661
  };
16656
- function dateToFormattedString(date, format = "YYYY-MM-DD") {
16662
+ function dateToFormattedString(date, format2 = "YYYY-MM-DD") {
16657
16663
  const fullYear = padStartWidthZeros(date.getFullYear(), 4);
16658
16664
  const months = [
16659
16665
  "January",
@@ -16697,7 +16703,7 @@ function dateToFormattedString(date, format = "YYYY-MM-DD") {
16697
16703
  d: () => `${date.getDay()}`
16698
16704
  };
16699
16705
  const regexp = new RegExp(Object.keys(replace).join("|"), "g");
16700
- return format.replace(regexp, (match) => {
16706
+ return format2.replace(regexp, (match) => {
16701
16707
  if (match in replace) {
16702
16708
  return replace[match]();
16703
16709
  }
@@ -21340,14 +21346,14 @@ var DateFilterModelFormatter = class extends SimpleFilterModelFormatter {
21340
21346
  const isRange = type == SimpleFilter.IN_RANGE || numberOfInputs === 2;
21341
21347
  const dateFrom = parseDateTimeFromString(condition.dateFrom);
21342
21348
  const dateTo = parseDateTimeFromString(condition.dateTo);
21343
- const format = this.dateFilterParams.inRangeFloatingFilterDateFormat;
21349
+ const format2 = this.dateFilterParams.inRangeFloatingFilterDateFormat;
21344
21350
  if (isRange) {
21345
- const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format) : "null";
21346
- const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format) : "null";
21351
+ const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format2) : "null";
21352
+ const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format2) : "null";
21347
21353
  return `${formattedFrom}-${formattedTo}`;
21348
21354
  }
21349
21355
  if (dateFrom != null) {
21350
- return dateToFormattedString(dateFrom, format);
21356
+ return dateToFormattedString(dateFrom, format2);
21351
21357
  }
21352
21358
  return `${type}`;
21353
21359
  }
@@ -52970,7 +52976,27 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
52970
52976
  if (isGroup) {
52971
52977
  return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className, weight: "semibold" }, value);
52972
52978
  }
52979
+ const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
52973
52980
  const URL = columnDefinition.cellRendererParams.getURL(value, data);
52981
+ if (isExternalLink && value && URL) {
52982
+ return /* @__PURE__ */ React76.createElement(
52983
+ Typography,
52984
+ {
52985
+ ...typographyProps,
52986
+ className,
52987
+ style: { display: "flex", alignItems: "center", gap: "5px" }
52988
+ },
52989
+ internalValue,
52990
+ /* @__PURE__ */ React76.createElement(
52991
+ ExternalLink,
52992
+ {
52993
+ cursor: "pointer",
52994
+ size: "sm",
52995
+ onClick: () => window.open(URL, "_blank")
52996
+ }
52997
+ )
52998
+ );
52999
+ }
52974
53000
  return URL ? /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className }, /* @__PURE__ */ React76.createElement(Link, { href: URL }, internalValue)) : /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps }, internalValue);
52975
53001
  };
52976
53002
  var LinkCellRenderer = withDataTableRenderer(
@@ -52999,9 +53025,10 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
52999
53025
  }
53000
53026
  return /* @__PURE__ */ React76.createElement(React76.Fragment, null);
53001
53027
  }
53002
- const internalValue = formatNumber(value, {
53028
+ const internalValue = format(value, {
53003
53029
  maxDecimalPrecision: 15,
53004
53030
  minDecimalPrecision: 0,
53031
+ shouldUseGtk: true,
53005
53032
  symbol: "",
53006
53033
  ...(_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.formatConfig
53007
53034
  });
@@ -53393,7 +53420,7 @@ var Renderer9 = ({
53393
53420
  rowPinned
53394
53421
  }) => {
53395
53422
  var _a, _b, _c, _d;
53396
- const { getColor } = columnDefinition.cellRendererParams;
53423
+ const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
53397
53424
  const I18n = useI18nContext();
53398
53425
  if (isEmptyValue(value)) {
53399
53426
  if (isGroup) {
@@ -53419,7 +53446,7 @@ var Renderer9 = ({
53419
53446
  const typographyProps = getCellValueTypographyProps(
53420
53447
  (_d = columnDefinition.cellRendererParams) == null ? void 0 : _d.typographyProps
53421
53448
  );
53422
- if (isGroup || rowPinned && columnDefinition.aggFunc) {
53449
+ if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
53423
53450
  return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, weight: "semibold" }, label);
53424
53451
  }
53425
53452
  return /* @__PURE__ */ React76.createElement(Pill, { color: getColor(value), className: cx10("pill-cell") }, label);
@@ -54858,8 +54885,8 @@ function transformToExcelStyles(excelDataFormats) {
54858
54885
  if (excelDataFormats === void 0) {
54859
54886
  return void 0;
54860
54887
  }
54861
- return excelDataFormats.map((format) => {
54862
- const { id, ...rest } = format;
54888
+ return excelDataFormats.map((format2) => {
54889
+ const { id, ...rest } = format2;
54863
54890
  return {
54864
54891
  id: toExcelCellClass(id),
54865
54892
  ...rest
@@ -55900,7 +55927,7 @@ var DataTableCellRenderer = ({
55900
55927
  value,
55901
55928
  setValue
55902
55929
  }) => {
55903
- var _a, _b, _c;
55930
+ var _a, _b, _c, _d, _e, _f;
55904
55931
  const { columnApi } = useInternalTableContext();
55905
55932
  const columnDefinition = transformToColumnDefinition(colDef);
55906
55933
  const validationOutput = ((_a = colDef.valueValidator) == null ? void 0 : _a.call(colDef, {
@@ -55935,6 +55962,8 @@ var DataTableCellRenderer = ({
55935
55962
  value
55936
55963
  };
55937
55964
  const hasValue = value !== void 0 && value !== null && value !== "";
55965
+ const isSelectCellComponent = ((_c = (_b = columnDefinition.cellEditor) == null ? void 0 : _b.render) == null ? void 0 : _c.displayName) === "SelectCellEditor";
55966
+ const URL = isSelectCellComponent && ((_d = columnDefinition == null ? void 0 : columnDefinition.cellRendererParams) == null ? void 0 : _d.getURL) ? columnDefinition.cellRendererParams.getURL(value) : null;
55938
55967
  const startEditing = useCallback(
55939
55968
  () => api.startEditingCell({
55940
55969
  rowIndex: node.rowIndex,
@@ -55942,34 +55971,54 @@ var DataTableCellRenderer = ({
55942
55971
  }),
55943
55972
  [column2, node]
55944
55973
  );
55945
- return /* @__PURE__ */ React76.createElement(React76.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76.createElement(Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76.createElement(RowCheckbox, { api, data, node })), columnDefinition.editable ? /* @__PURE__ */ React76.createElement(
55946
- PseudoInlineEditorWrapper,
55947
- {
55948
- showArrow: editorType === "select",
55949
- onClick: startEditing,
55950
- onClear: ((_b = columnDefinition.cellEditorParams) == null ? void 0 : _b.clearable) && hasValue ? () => {
55951
- setValue == null ? void 0 : setValue(null);
55952
- } : void 0,
55953
- showCalendar: editorType === "date",
55954
- rightAligned: colDef.type === "rightAligned",
55955
- hasValue,
55956
- alwaysShowEditors: (_c = columnDefinition.cellEditorParams) == null ? void 0 : _c.alwaysShowPseudoEditors,
55957
- ...validationOutput
55958
- },
55959
- /* @__PURE__ */ React76.createElement(Component4, { ...componentParams })
55960
- ) : /* @__PURE__ */ React76.createElement(
55961
- NonEditorWrapper,
55974
+ return /* @__PURE__ */ React76.createElement(React76.Fragment, null, shouldDisplayRowCheckbox(columnApi, column2, node) && /* @__PURE__ */ React76.createElement(Box, { paddingLeft: "sm" }, /* @__PURE__ */ React76.createElement(RowCheckbox, { api, data, node })), /* @__PURE__ */ React76.createElement(
55975
+ Flex,
55962
55976
  {
55963
- rightAligned: colDef.type === "rightAligned",
55964
- ...validationOutput,
55965
- rowPinned: Boolean(componentParams.rowPinned),
55966
- isGroup: Boolean(componentParams.isGroup)
55977
+ gap: "5px",
55978
+ alignItems: "center",
55979
+ justifyContent: "center",
55980
+ style: { width: "100%" }
55967
55981
  },
55968
- /* @__PURE__ */ React76.createElement(
55969
- Component4,
55982
+ columnDefinition.editable ? /* @__PURE__ */ React76.createElement(
55983
+ PseudoInlineEditorWrapper,
55984
+ {
55985
+ showArrow: editorType === "select",
55986
+ onClick: startEditing,
55987
+ onClear: ((_e = columnDefinition.cellEditorParams) == null ? void 0 : _e.clearable) && hasValue ? () => {
55988
+ setValue == null ? void 0 : setValue(null);
55989
+ } : void 0,
55990
+ showCalendar: editorType === "date",
55991
+ rightAligned: colDef.type === "rightAligned",
55992
+ hasValue,
55993
+ alwaysShowEditors: (_f = columnDefinition.cellEditorParams) == null ? void 0 : _f.alwaysShowPseudoEditors,
55994
+ ...validationOutput
55995
+ },
55996
+ /* @__PURE__ */ React76.createElement(Component4, { ...componentParams })
55997
+ ) : /* @__PURE__ */ React76.createElement(
55998
+ NonEditorWrapper,
55970
55999
  {
55971
- ...componentParams,
55972
- tableRef: columnDefinition.cellRendererParams.tableRef
56000
+ rightAligned: colDef.type === "rightAligned",
56001
+ ...validationOutput,
56002
+ rowPinned: Boolean(componentParams.rowPinned),
56003
+ isGroup: Boolean(componentParams.isGroup)
56004
+ },
56005
+ /* @__PURE__ */ React76.createElement(
56006
+ Component4,
56007
+ {
56008
+ ...componentParams,
56009
+ tableRef: columnDefinition.cellRendererParams.tableRef
56010
+ }
56011
+ )
56012
+ ),
56013
+ URL && /* @__PURE__ */ React76.createElement(
56014
+ ExternalLink,
56015
+ {
56016
+ cursor: "pointer",
56017
+ size: "sm",
56018
+ onClick: (e) => {
56019
+ e.stopPropagation();
56020
+ window.open(URL, "_blank");
56021
+ }
55973
56022
  }
55974
56023
  )
55975
56024
  ));
@@ -61549,14 +61598,14 @@ var protection_default = protection;
61549
61598
  // ../../node_modules/@ag-grid-enterprise/excel-export/dist/esm/es6/excelExport/files/xml/styles/numberFormat.mjs
61550
61599
  var numberFormat = {
61551
61600
  getTemplate(styleProperties) {
61552
- const { format } = styleProperties.numberFormat;
61601
+ const { format: format2 } = styleProperties.numberFormat;
61553
61602
  return {
61554
61603
  name: "NumberFormat",
61555
61604
  properties: {
61556
61605
  prefixedAttributes: [{
61557
61606
  prefix: "ss:",
61558
61607
  map: {
61559
- Format: format
61608
+ Format: format2
61560
61609
  }
61561
61610
  }]
61562
61611
  }
@@ -63507,15 +63556,15 @@ var registerFill = (fill) => {
63507
63556
  }
63508
63557
  return pos;
63509
63558
  };
63510
- var registerNumberFmt = (format) => {
63511
- format = _.utf8_encode(format);
63512
- if (numberFormatMap[format]) {
63513
- return numberFormatMap[format];
63559
+ var registerNumberFmt = (format2) => {
63560
+ format2 = _.utf8_encode(format2);
63561
+ if (numberFormatMap[format2]) {
63562
+ return numberFormatMap[format2];
63514
63563
  }
63515
- let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format);
63564
+ let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format2);
63516
63565
  if (pos === -1) {
63517
63566
  pos = registeredNumberFmts.length + 164;
63518
- registeredNumberFmts.push({ formatCode: format, numFmtId: pos });
63567
+ registeredNumberFmts.push({ formatCode: format2, numFmtId: pos });
63519
63568
  } else {
63520
63569
  pos = registeredNumberFmts[pos].numFmtId;
63521
63570
  }
@@ -80592,6 +80641,7 @@ function generateHTMLString({
80592
80641
  clearTimeout(exportTimeoutId);
80593
80642
  }
80594
80643
  exportTimeoutId = setTimeout(() => {
80644
+ var _a2, _b2;
80595
80645
  const exportedDocument = document.implementation.createHTMLDocument();
80596
80646
  const printStylesElement = exportedDocument.createElement("style");
80597
80647
  tableContainer.querySelectorAll(
@@ -80670,44 +80720,73 @@ function generateHTMLString({
80670
80720
  if (exportedDocument.querySelector(".ag-header-container") && showTableHeaderOnEveryPage) {
80671
80721
  const tableHeaderStylesElement = exportedDocument.createElement("style");
80672
80722
  tableHeaderStylesElement.innerHTML = `
80723
+ /* Original header styles */
80673
80724
  .ag-header-container {
80674
80725
  height: ${TABLE_HEADER_HEIGHT}px;
80675
80726
  background: ${colors.gray96};
80676
80727
  border-bottom: 1px solid #d6dadc;
80677
- break-before: page;
80728
+ }
80729
+ /* Cloned header styles */
80730
+ .paginated-header {
80731
+ height: ${TABLE_HEADER_HEIGHT}px;
80732
+ background: ${colors.gray96};
80733
+ border-bottom: 1px solid #d6dadc;
80734
+ /* Ensure cloned headers start on a new page */
80735
+ page-break-before: always;
80678
80736
  }
80679
80737
  `;
80680
80738
  exportedDocument.head.appendChild(tableHeaderStylesElement);
80681
- const tableHeader = exportedDocument.querySelector(".ag-header-container").cloneNode(true);
80739
+ const tableHeaderElement = exportedDocument.querySelector(
80740
+ ".ag-header-container"
80741
+ );
80742
+ if (!tableHeaderElement) {
80743
+ return reject(new Error("Table header container not found."));
80744
+ }
80745
+ const tableHeader = tableHeaderElement.cloneNode(true);
80746
+ tableHeader.classList.add("paginated-header");
80682
80747
  const tableRowsContainer = exportedDocument.querySelector(
80683
80748
  ".ag-center-cols-container"
80684
80749
  );
80685
- const totalRows = tableRowsContainer.children.length;
80686
- const maxPageContentHeight = pageHeight - pageFormat.marginInPixels.top - pageFormat.marginInPixels.bottom;
80687
- let pageContentHeight = TABLE_HEADER_HEIGHT;
80688
- let currentPage = 1;
80689
- for (let index = 0; index < totalRows; index++) {
80690
- const getScaledRowHeight = (row3) => {
80691
- const scale = pageHeight / tableWidth;
80692
- let rowHeight2 = Number(row3.style.height.replace("px", ""));
80693
- if (scale < 1) {
80694
- rowHeight2 *= scale;
80750
+ if (!tableRowsContainer) {
80751
+ console.error("Table rows container not found.");
80752
+ return;
80753
+ }
80754
+ const allRows = Array.from(
80755
+ tableRowsContainer.children
80756
+ );
80757
+ tableRowsContainer.innerHTML = "";
80758
+ 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;
80759
+ let currentPageContentHeight = 0;
80760
+ let rowsInCurrentPage = [];
80761
+ let isFirstPage = true;
80762
+ const appendPage = () => {
80763
+ if (rowsInCurrentPage.length > 0) {
80764
+ if (!isFirstPage) {
80765
+ tableRowsContainer.appendChild(tableHeader.cloneNode(true));
80766
+ } else {
80767
+ isFirstPage = false;
80695
80768
  }
80696
- return rowHeight2;
80697
- };
80698
- const row2 = tableRowsContainer.children[index + currentPage - 1];
80699
- const rowHeight = getScaledRowHeight(row2);
80700
- if (pageContentHeight + rowHeight >= maxPageContentHeight) {
80701
- tableRowsContainer.insertBefore(
80702
- tableHeader.cloneNode(true),
80703
- row2
80769
+ rowsInCurrentPage.forEach(
80770
+ (row2) => tableRowsContainer.appendChild(row2)
80704
80771
  );
80705
- currentPage += 1;
80706
- pageContentHeight = TABLE_HEADER_HEIGHT;
80707
- } else {
80708
- pageContentHeight += rowHeight;
80772
+ rowsInCurrentPage = [];
80773
+ currentPageContentHeight = 0;
80709
80774
  }
80710
- }
80775
+ };
80776
+ allRows.forEach((row2) => {
80777
+ let rowHeight = parseFloat(row2.style.height.replace("px", "")) || row2.offsetHeight;
80778
+ const scale = pageHeight / tableWidth;
80779
+ if (scale < 1) {
80780
+ rowHeight *= scale;
80781
+ }
80782
+ if (currentPageContentHeight + rowHeight > maxPageContentHeight) {
80783
+ appendPage();
80784
+ isFirstPage = false;
80785
+ }
80786
+ rowsInCurrentPage.push(row2);
80787
+ currentPageContentHeight += rowHeight;
80788
+ });
80789
+ appendPage();
80711
80790
  }
80712
80791
  resolve(exportedDocument.getElementsByTagName("html")[0].outerHTML);
80713
80792
  }, 2e3);