@procore/data-table 14.14.0 → 14.15.0

package/dist/modern/index.js

@@ -3,10 +3,11 @@ import { uniqBy, prop, startsWith, mergeDeepRight, equals, omit, intersection, i
 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';
 import classnames from 'classnames/bind';
 import debounce5 from 'lodash.debounce';
-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';
+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';
 import classNames from 'classnames';
 import { isDate, parseISO, isSameDay, formatISO, isBefore } from 'date-fns';
 import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-financials-utils';
+import { format } from '@procore/labs-financials-utils/dist/format';
 import { detectPrng, factory } from 'ulid';
 import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -1407,7 +1408,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_1c24o_369 {
+@keyframes _ag-shake-left-to-right_ye2ai_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5408,7 +5409,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1c24o_1 {
+@keyframes _spin_ye2ai_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7493,10 +7494,15 @@ input[class^=ag-][type=range]:disabled {
 }
 .ag-theme-alpine.ag-theme-alpine .ag-row--dt-active {
   background-color: #e4ecfb;
-  border-left: 4px solid #2066df;
 }
-.ag-theme-alpine.ag-theme-alpine .ag-row--dt-active > .ag-cell {
-  padding-left: 12px;
+.ag-theme-alpine.ag-theme-alpine .ag-row--dt-active::before {
+  background-color: #2066df;
+  content: "";
+  width: 4px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 .ag-theme-alpine.ag-theme-alpine .ag-row--dt-overdue span {
   color: #e61920;
@@ -7908,7 +7914,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1c24o_7148 {
+div._contextPanel_ye2ai_7153 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7917,7 +7923,7 @@ div._contextPanel_1c24o_7148 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1c24o_7157 {
+div._contextPanel--hidden_ye2ai_7162 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7925,50 +7931,50 @@ div._contextPanel--hidden_1c24o_7157 {
   width: 0px;
 }
 
-._contextPanelWrapper_1c24o_7165 {
+._contextPanelWrapper_ye2ai_7170 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1c24o_7170 {
+._contextPanelBody_ye2ai_7175 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1c24o_7174 {
+._contextPanel-stickyHeader_ye2ai_7179 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1c24o_7181 {
+._filters-list_ye2ai_7186 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1c24o_7181 ol {
+._filters-list_ye2ai_7186 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1c24o_7190 {
+._col-drag-column-icon_ye2ai_7195 {
   color: #6a767c;
 }
 
-._tabular-nums_1c24o_7194 {
+._tabular-nums_ye2ai_7199 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1c24o_7148",
-  "contextPanel--hidden": "_contextPanel--hidden_1c24o_7157",
-  "contextPanelWrapper": "_contextPanelWrapper_1c24o_7165",
-  "contextPanelBody": "_contextPanelBody_1c24o_7170",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1c24o_7174",
-  "filters-list": "_filters-list_1c24o_7181",
-  "col-drag-column-icon": "_col-drag-column-icon_1c24o_7190",
-  "tabular-nums": "_tabular-nums_1c24o_7194",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1c24o_369",
-  "spin": "_spin_1c24o_1"
+  "contextPanel": "_contextPanel_ye2ai_7153",
+  "contextPanel--hidden": "_contextPanel--hidden_ye2ai_7162",
+  "contextPanelWrapper": "_contextPanelWrapper_ye2ai_7170",
+  "contextPanelBody": "_contextPanelBody_ye2ai_7175",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_ye2ai_7179",
+  "filters-list": "_filters-list_ye2ai_7186",
+  "col-drag-column-icon": "_col-drag-column-icon_ye2ai_7195",
+  "tabular-nums": "_tabular-nums_ye2ai_7199",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_ye2ai_369",
+  "spin": "_spin_ye2ai_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -8642,12 +8648,12 @@ var DateCellValue = ({
   isGroup,
   value
 }) => {
-  const { format } = useDateTime();
+  const { format: format2 } = useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject(value);
-  const internalValue = parsedValue ? format(
+  const internalValue = parsedValue ? format2(
     parsedValue,
     columnDefinition.cellRendererParams?.dateFormatType || "numeric-date"
   ) : void 0;
@@ -8713,12 +8719,12 @@ var DateTimeCellValue = ({
   isGroup,
   value
 }) => {
-  const { format } = useDateTime();
+  const { format: format2 } = useDateTime();
   if (isGroup || isEmptyValue(value)) {
     return null;
   }
   const parsedValue = getDateObject2(value);
-  const internalValue = parsedValue ? format(
+  const internalValue = parsedValue ? format2(
     parsedValue,
     columnDefinition.cellRendererParams?.dateFormatType || "abbr-weekday-abbr-date-at-time"
   ) : void 0;
@@ -16639,7 +16645,7 @@ var calculateOrdinal = (value) => {
   }
   return "th";
 };
-function dateToFormattedString(date, format = "YYYY-MM-DD") {
+function dateToFormattedString(date, format2 = "YYYY-MM-DD") {
   const fullYear = padStartWidthZeros(date.getFullYear(), 4);
   const months = [
     "January",
@@ -16683,7 +16689,7 @@ function dateToFormattedString(date, format = "YYYY-MM-DD") {
     d: () => `${date.getDay()}`
   };
   const regexp = new RegExp(Object.keys(replace).join("|"), "g");
-  return format.replace(regexp, (match) => {
+  return format2.replace(regexp, (match) => {
     if (match in replace) {
       return replace[match]();
     }
@@ -21326,14 +21332,14 @@ var DateFilterModelFormatter = class extends SimpleFilterModelFormatter {
     const isRange = type == SimpleFilter.IN_RANGE || numberOfInputs === 2;
     const dateFrom = parseDateTimeFromString(condition.dateFrom);
     const dateTo = parseDateTimeFromString(condition.dateTo);
-    const format = this.dateFilterParams.inRangeFloatingFilterDateFormat;
+    const format2 = this.dateFilterParams.inRangeFloatingFilterDateFormat;
     if (isRange) {
-      const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format) : "null";
-      const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format) : "null";
+      const formattedFrom = dateFrom !== null ? dateToFormattedString(dateFrom, format2) : "null";
+      const formattedTo = dateTo !== null ? dateToFormattedString(dateTo, format2) : "null";
       return `${formattedFrom}-${formattedTo}`;
     }
     if (dateFrom != null) {
-      return dateToFormattedString(dateFrom, format);
+      return dateToFormattedString(dateFrom, format2);
     }
     return `${type}`;
   }
@@ -52955,7 +52961,27 @@ var InternalLinkCellRenderer = ({ columnDefinition, isGroup, data, rowHeight, va
   if (isGroup) {
     return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className, weight: "semibold" }, value);
   }
+  const isExternalLink = columnDefinition.cellRendererParams.isExternalLink ?? false;
   const URL = columnDefinition.cellRendererParams.getURL(value, data);
+  if (isExternalLink && value && URL) {
+    return /* @__PURE__ */ React76.createElement(
+      Typography,
+      {
+        ...typographyProps,
+        className,
+        style: { display: "flex", alignItems: "center", gap: "5px" }
+      },
+      internalValue,
+      /* @__PURE__ */ React76.createElement(
+        ExternalLink,
+        {
+          cursor: "pointer",
+          size: "sm",
+          onClick: () => window.open(URL, "_blank")
+        }
+      )
+    );
+  }
   return URL ? /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, className }, /* @__PURE__ */ React76.createElement(Link, { href: URL }, internalValue)) : /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps }, internalValue);
 };
 var LinkCellRenderer = withDataTableRenderer(
@@ -52983,9 +53009,10 @@ var InternalNumberCellRenderer = ({ columnDefinition, rowPinned, isGroup, value
     }
     return /* @__PURE__ */ React76.createElement(React76.Fragment, null);
   }
-  const internalValue = formatNumber(value, {
+  const internalValue = format(value, {
     maxDecimalPrecision: 15,
     minDecimalPrecision: 0,
+    shouldUseGtk: true,
     symbol: "",
     ...columnDefinition.cellRendererParams?.formatConfig
   });
@@ -53366,7 +53393,7 @@ var Renderer9 = ({
   value,
   rowPinned
 }) => {
-  const { getColor } = columnDefinition.cellRendererParams;
+  const { getColor, displayAsPill } = columnDefinition.cellRendererParams;
   const I18n = useI18nContext();
   if (isEmptyValue(value)) {
     if (isGroup) {
@@ -53392,7 +53419,7 @@ var Renderer9 = ({
   const typographyProps = getCellValueTypographyProps(
     columnDefinition.cellRendererParams?.typographyProps
   );
-  if (isGroup || rowPinned && columnDefinition.aggFunc) {
+  if ((isGroup || rowPinned && columnDefinition.aggFunc) && !displayAsPill) {
     return /* @__PURE__ */ React76.createElement(Typography, { ...typographyProps, weight: "semibold" }, label);
   }
   return /* @__PURE__ */ React76.createElement(Pill, { color: getColor(value), className: cx10("pill-cell") }, label);
@@ -54796,8 +54823,8 @@ function transformToExcelStyles(excelDataFormats) {
   if (excelDataFormats === void 0) {
     return void 0;
   }
-  return excelDataFormats.map((format) => {
-    const { id, ...rest } = format;
+  return excelDataFormats.map((format2) => {
+    const { id, ...rest } = format2;
     return {
       id: toExcelCellClass(id),
       ...rest
@@ -55853,6 +55880,8 @@ var DataTableCellRenderer = ({
     value
   };
   const hasValue = value !== void 0 && value !== null && value !== "";
+  const isSelectCellComponent = columnDefinition.cellEditor?.render?.displayName === "SelectCellEditor";
+  const URL = isSelectCellComponent && columnDefinition?.cellRendererParams?.getURL ? columnDefinition.cellRendererParams.getURL(value) : null;
   const startEditing = useCallback(
     () => api.startEditingCell({
       rowIndex: node.rowIndex,
@@ -55860,34 +55889,54 @@ var DataTableCellRenderer = ({
     }),
     [column2, node]
   );
-  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(
-    PseudoInlineEditorWrapper,
-    {
-      showArrow: editorType === "select",
-      onClick: startEditing,
-      onClear: columnDefinition.cellEditorParams?.clearable && hasValue ? () => {
-        setValue?.(null);
-      } : void 0,
-      showCalendar: editorType === "date",
-      rightAligned: colDef.type === "rightAligned",
-      hasValue,
-      alwaysShowEditors: columnDefinition.cellEditorParams?.alwaysShowPseudoEditors,
-      ...validationOutput
-    },
-    /* @__PURE__ */ React76.createElement(Component4, { ...componentParams })
-  ) : /* @__PURE__ */ React76.createElement(
-    NonEditorWrapper,
+  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(
+    Flex,
     {
-      rightAligned: colDef.type === "rightAligned",
-      ...validationOutput,
-      rowPinned: Boolean(componentParams.rowPinned),
-      isGroup: Boolean(componentParams.isGroup)
+      gap: "5px",
+      alignItems: "center",
+      justifyContent: "center",
+      style: { width: "100%" }
     },
-    /* @__PURE__ */ React76.createElement(
-      Component4,
+    columnDefinition.editable ? /* @__PURE__ */ React76.createElement(
+      PseudoInlineEditorWrapper,
+      {
+        showArrow: editorType === "select",
+        onClick: startEditing,
+        onClear: columnDefinition.cellEditorParams?.clearable && hasValue ? () => {
+          setValue?.(null);
+        } : void 0,
+        showCalendar: editorType === "date",
+        rightAligned: colDef.type === "rightAligned",
+        hasValue,
+        alwaysShowEditors: columnDefinition.cellEditorParams?.alwaysShowPseudoEditors,
+        ...validationOutput
+      },
+      /* @__PURE__ */ React76.createElement(Component4, { ...componentParams })
+    ) : /* @__PURE__ */ React76.createElement(
+      NonEditorWrapper,
       {
-        ...componentParams,
-        tableRef: columnDefinition.cellRendererParams.tableRef
+        rightAligned: colDef.type === "rightAligned",
+        ...validationOutput,
+        rowPinned: Boolean(componentParams.rowPinned),
+        isGroup: Boolean(componentParams.isGroup)
+      },
+      /* @__PURE__ */ React76.createElement(
+        Component4,
+        {
+          ...componentParams,
+          tableRef: columnDefinition.cellRendererParams.tableRef
+        }
+      )
+    ),
+    URL && /* @__PURE__ */ React76.createElement(
+      ExternalLink,
+      {
+        cursor: "pointer",
+        size: "sm",
+        onClick: (e) => {
+          e.stopPropagation();
+          window.open(URL, "_blank");
+        }
       }
     )
   ));
@@ -61429,14 +61478,14 @@ var protection_default = protection;
 // ../../node_modules/@ag-grid-enterprise/excel-export/dist/esm/es6/excelExport/files/xml/styles/numberFormat.mjs
 var numberFormat = {
   getTemplate(styleProperties) {
-    const { format } = styleProperties.numberFormat;
+    const { format: format2 } = styleProperties.numberFormat;
     return {
       name: "NumberFormat",
       properties: {
         prefixedAttributes: [{
           prefix: "ss:",
           map: {
-            Format: format
+            Format: format2
           }
         }]
       }
@@ -63387,15 +63436,15 @@ var registerFill = (fill) => {
   }
   return pos;
 };
-var registerNumberFmt = (format) => {
-  format = _.utf8_encode(format);
-  if (numberFormatMap[format]) {
-    return numberFormatMap[format];
+var registerNumberFmt = (format2) => {
+  format2 = _.utf8_encode(format2);
+  if (numberFormatMap[format2]) {
+    return numberFormatMap[format2];
   }
-  let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format);
+  let pos = registeredNumberFmts.findIndex((currentFormat) => currentFormat.formatCode === format2);
   if (pos === -1) {
     pos = registeredNumberFmts.length + 164;
-    registeredNumberFmts.push({ formatCode: format, numFmtId: pos });
+    registeredNumberFmts.push({ formatCode: format2, numFmtId: pos });
   } else {
     pos = registeredNumberFmts[pos].numFmtId;
   }
@@ -80515,44 +80564,73 @@ function generateHTMLString({
         if (exportedDocument.querySelector(".ag-header-container") && showTableHeaderOnEveryPage) {
           const tableHeaderStylesElement = exportedDocument.createElement("style");
           tableHeaderStylesElement.innerHTML = `
+            /* Original header styles */
             .ag-header-container {
               height: ${TABLE_HEADER_HEIGHT}px;
               background: ${colors.gray96};
               border-bottom: 1px solid #d6dadc;
-              break-before: page;
+            }
+            /* Cloned header styles */
+            .paginated-header {
+              height: ${TABLE_HEADER_HEIGHT}px;
+              background: ${colors.gray96};
+              border-bottom: 1px solid #d6dadc;
+              /* Ensure cloned headers start on a new page */
+              page-break-before: always;
             }
           `;
           exportedDocument.head.appendChild(tableHeaderStylesElement);
-          const tableHeader = exportedDocument.querySelector(".ag-header-container").cloneNode(true);
+          const tableHeaderElement = exportedDocument.querySelector(
+            ".ag-header-container"
+          );
+          if (!tableHeaderElement) {
+            return reject(new Error("Table header container not found."));
+          }
+          const tableHeader = tableHeaderElement.cloneNode(true);
+          tableHeader.classList.add("paginated-header");
           const tableRowsContainer = exportedDocument.querySelector(
             ".ag-center-cols-container"
           );
-          const totalRows = tableRowsContainer.children.length;
-          const maxPageContentHeight = pageHeight - pageFormat.marginInPixels.top - pageFormat.marginInPixels.bottom;
-          let pageContentHeight = TABLE_HEADER_HEIGHT;
-          let currentPage = 1;
-          for (let index = 0; index < totalRows; index++) {
-            const getScaledRowHeight = (row3) => {
-              const scale = pageHeight / tableWidth;
-              let rowHeight2 = Number(row3.style.height.replace("px", ""));
-              if (scale < 1) {
-                rowHeight2 *= scale;
+          if (!tableRowsContainer) {
+            console.error("Table rows container not found.");
+            return;
+          }
+          const allRows = Array.from(
+            tableRowsContainer.children
+          );
+          tableRowsContainer.innerHTML = "";
+          const maxPageContentHeight = pageHeight - (pageFormat.marginInPixels?.top ?? DEFAULT_PAGE_MARGIN) - (pageFormat.marginInPixels?.bottom ?? DEFAULT_PAGE_MARGIN) - TABLE_HEADER_HEIGHT;
+          let currentPageContentHeight = 0;
+          let rowsInCurrentPage = [];
+          let isFirstPage = true;
+          const appendPage = () => {
+            if (rowsInCurrentPage.length > 0) {
+              if (!isFirstPage) {
+                tableRowsContainer.appendChild(tableHeader.cloneNode(true));
+              } else {
+                isFirstPage = false;
               }
-              return rowHeight2;
-            };
-            const row2 = tableRowsContainer.children[index + currentPage - 1];
-            const rowHeight = getScaledRowHeight(row2);
-            if (pageContentHeight + rowHeight >= maxPageContentHeight) {
-              tableRowsContainer.insertBefore(
-                tableHeader.cloneNode(true),
-                row2
+              rowsInCurrentPage.forEach(
+                (row2) => tableRowsContainer.appendChild(row2)
               );
-              currentPage += 1;
-              pageContentHeight = TABLE_HEADER_HEIGHT;
-            } else {
-              pageContentHeight += rowHeight;
+              rowsInCurrentPage = [];
+              currentPageContentHeight = 0;
             }
-          }
+          };
+          allRows.forEach((row2) => {
+            let rowHeight = parseFloat(row2.style.height.replace("px", "")) || row2.offsetHeight;
+            const scale = pageHeight / tableWidth;
+            if (scale < 1) {
+              rowHeight *= scale;
+            }
+            if (currentPageContentHeight + rowHeight > maxPageContentHeight) {
+              appendPage();
+              isFirstPage = false;
+            }
+            rowsInCurrentPage.push(row2);
+            currentPageContentHeight += rowHeight;
+          });
+          appendPage();
         }
         resolve(exportedDocument.getElementsByTagName("html")[0].outerHTML);
       }, 2e3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.14.0",
+  "version": "14.15.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -111,7 +111,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.2.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.11.0",
+    "@procore/core-react": "12.12.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "3.0.1",