@procore/data-table 14.28.0-cdn.2 → 14.28.0

package/dist/legacy/index.js

@@ -10,7 +10,6 @@ import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-fi
 import styled4, { css as css$1 } from 'styled-components';
 import { format } from '@procore/labs-financials-utils/dist/format';
 import { detectPrng, factory } from 'ulid';
-import { isCDNFeatureFlagEnabled, useRequestTranslations } from '@procore/cdn-translations';
 import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
 import ReactDOM, { createPortal } from 'react-dom';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
@@ -1411,7 +1410,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_1ajw9_369 {
+@keyframes _ag-shake-left-to-right_if78k_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5412,7 +5411,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1ajw9_1 {
+@keyframes _spin_if78k_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7667,6 +7666,9 @@ input[class^=ag-][type=range]:disabled {
 .ag-theme-alpine.ag-theme-alpine .ag-icon-tree-open::before {
   content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8px' height='4px'><path d='M0 0H8L4 4L0 0Z' fill='%232066DF'/></svg>");
 }
+.ag-theme-alpine.ag-theme-alpine .ag-header-cell-resize {
+  right: -5px;
+}
 .ag-theme-alpine.ag-theme-alpine .ag-header-cell-resize::after {
   width: 1px;
   height: 100%;
@@ -7920,7 +7922,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1ajw9_7156 {
+div._contextPanel_if78k_7159 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7929,7 +7931,7 @@ div._contextPanel_1ajw9_7156 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1ajw9_7165 {
+div._contextPanel--hidden_if78k_7168 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7937,50 +7939,50 @@ div._contextPanel--hidden_1ajw9_7165 {
   width: 0px;
 }
 
-._contextPanelWrapper_1ajw9_7173 {
+._contextPanelWrapper_if78k_7176 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1ajw9_7178 {
+._contextPanelBody_if78k_7181 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1ajw9_7182 {
+._contextPanel-stickyHeader_if78k_7185 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1ajw9_7189 {
+._filters-list_if78k_7192 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1ajw9_7189 ol {
+._filters-list_if78k_7192 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1ajw9_7198 {
+._col-drag-column-icon_if78k_7201 {
   color: #6a767c;
 }
 
-._tabular-nums_1ajw9_7202 {
+._tabular-nums_if78k_7205 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1ajw9_7156",
-  "contextPanel--hidden": "_contextPanel--hidden_1ajw9_7165",
-  "contextPanelWrapper": "_contextPanelWrapper_1ajw9_7173",
-  "contextPanelBody": "_contextPanelBody_1ajw9_7178",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1ajw9_7182",
-  "filters-list": "_filters-list_1ajw9_7189",
-  "col-drag-column-icon": "_col-drag-column-icon_1ajw9_7198",
-  "tabular-nums": "_tabular-nums_1ajw9_7202",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1ajw9_369",
-  "spin": "_spin_1ajw9_1"
+  "contextPanel": "_contextPanel_if78k_7159",
+  "contextPanel--hidden": "_contextPanel--hidden_if78k_7168",
+  "contextPanelWrapper": "_contextPanelWrapper_if78k_7176",
+  "contextPanelBody": "_contextPanelBody_if78k_7181",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_if78k_7185",
+  "filters-list": "_filters-list_if78k_7192",
+  "col-drag-column-icon": "_col-drag-column-icon_if78k_7201",
+  "tabular-nums": "_tabular-nums_if78k_7205",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_if78k_369",
+  "spin": "_spin_if78k_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -54358,6 +54360,9 @@ function useFilterState({
     },
     [gridApi]
   );
+  const filterableColumns = React80.useMemo(() => {
+    return columnDefinitions.filter((colDef) => !!colDef.filterRenderer).sort(sortColumnDefinitionsByFilterIndex);
+  }, [columnDefinitions]);
   const getFieldFilters = React80.useCallback(() => {
     return filterableColumns.map((column2) => {
       const filterInstance = getFieldFilter(column2.field);
@@ -54371,10 +54376,7 @@ function useFilterState({
         ...instanceOptions
       };
     }).filter((filter) => filter.instance !== void 0);
-  }, [getFieldFilter, gridApi]);
-  const filterableColumns = React80.useMemo(() => {
-    return columnDefinitions.filter((colDef) => !!colDef.filterRenderer).sort(sortColumnDefinitionsByFilterIndex);
-  }, [columnDefinitions]);
+  }, [getFieldFilter, gridApi, filterableColumns]);
   const filterEventFunction = function filterEventFunction2() {
     if (listenersEnabled.current) {
       const allFilters = getFieldFilters();
@@ -54490,6 +54492,10 @@ function ClientSideMultiSelectFilterRenderer({
   value = [],
   ...props
 }) {
+  const filterOptions = React80.useMemo(
+    () => (options ?? []).map((option) => option ?? ""),
+    [options]
+  );
   return /* @__PURE__ */ React80.createElement(
     MultiSelect,
     {
@@ -54505,8 +54511,8 @@ function ClientSideMultiSelectFilterRenderer({
         return getLabel((_a = columnDefinition.filterProps) == null ? void 0 : _a.getLabel, option);
       },
       onChange,
-      options,
-      value: intersection(value || [], options)
+      options: filterOptions,
+      value: intersection(value || [], filterOptions)
     }
   );
 }
@@ -57242,7 +57248,7 @@ var SortComponent = (props) => {
   return null;
 };
 var isRowSelected = (rowNode) => {
-  return Boolean(rowNode.selectable ? rowNode.isSelected() : true);
+  return Boolean(rowNode.selectable ? rowNode.isSelected() : false);
 };
 var GenericHeaderRenderer = (props) => {
   var _a;
@@ -57298,22 +57304,26 @@ var GenericHeaderRenderer = (props) => {
   }, []);
   React80.useEffect(() => {
     function calculatePosition() {
-      const columns = props.columnApi.getColumnState();
-      if (!(columns == null ? void 0 : columns.length)) {
+      const visibleColumns = props.columnApi.getAllDisplayedColumns();
+      if (!(visibleColumns == null ? void 0 : visibleColumns.length))
         return;
-      }
-      if (columns[0].colId === colId) {
-        setIsFirstColumn(true);
-      } else {
-        setIsFirstColumn(false);
-      }
+      const isCurrentFirst = visibleColumns[0].getColId() === colId;
+      setIsFirstColumn(isCurrentFirst);
     }
     props.api.addEventListener("columnMoved", calculatePosition);
+    props.api.addEventListener("columnPinned", calculatePosition);
+    props.api.addEventListener("columnVisible", calculatePosition);
     calculatePosition();
     return () => {
       removeEventListenerFromGrid("columnMoved", calculatePosition, props.api);
+      removeEventListenerFromGrid("columnPinned", calculatePosition, props.api);
+      removeEventListenerFromGrid(
+        "columnVisible",
+        calculatePosition,
+        props.api
+      );
     };
-  }, []);
+  }, [colId, props.api]);
   const onSortToggled = (event) => {
     var _a2, _b, _c;
     let currentSort = null;
@@ -57531,7 +57541,7 @@ var GenericHeaderRenderer = (props) => {
     }
     function updateSelectAllCheckbox(e) {
       var _a2;
-      if (e.source === "uiSelectAll") {
+      if (e && e.source === "uiSelectAll") {
         return;
       }
       const selectionState = props.api.getServerSideSelectionState();
@@ -57544,7 +57554,10 @@ var GenericHeaderRenderer = (props) => {
       );
       const isPagination = Boolean(props.api.paginationGetRowCount());
       const currentRows = getCurrentRows(props.api, isPagination);
-      const isAllSelected = isPagination ? currentRows.length && currentRows.every(isRowSelected) : isSelectionStateSelectAll;
+      const selectableRows = currentRows.filter(
+        (rowNode) => rowNode.selectable
+      );
+      const isAllSelected = isPagination ? selectableRows.length > 0 && selectableRows.every(isRowSelected) : isSelectionStateSelectAll;
       const isPartialSelected = isPagination ? !isAllSelected && currentRows.some(isRowSelected) : isSelectionStatePartialSelected;
       if (isAllSelected) {
         setSelectAll("all" /* All */);
@@ -57556,6 +57569,7 @@ var GenericHeaderRenderer = (props) => {
     }
     props.api.addEventListener(selectionChanged, updateSelectAllCheckbox);
     props.api.addEventListener(paginationChanged, updateSelectAllCheckbox);
+    updateSelectAllCheckbox();
     return () => {
       removeEventListenerFromGrid(
         selectionChanged,
@@ -57793,6 +57807,11 @@ function getGroupNodes(params) {
 function CustomLoader(params) {
   const I18n = useI18nContext();
   const groupNodes = getGroupNodes(params);
+  const internalTableContext = useInternalTableContext();
+  const hasDuplicateRowIds = internalTableContext.hasDuplicateRowIds ?? false;
+  if (hasDuplicateRowIds) {
+    return null;
+  }
   if (params.node === groupNodes.firstLoading) {
     return /* @__PURE__ */ React80.createElement(Flex, { style: { paddingLeft: "16px" } }, /* @__PURE__ */ React80.createElement(
       LevelIndents,
@@ -58500,7 +58519,8 @@ var InternalTableContext = React80.createContext({
   },
   totalRowCount: 0,
   setTotalRowCount: () => {
-  }
+  },
+  hasDuplicateRowIds: false
 });
 var useInternalTableContext = () => React80.useContext(InternalTableContext);
 var prng = detectPrng(true);
@@ -105862,7 +105882,7 @@ var en_AU_default = {
       autoSizeAllColumns: "Autosize all columns",
       hideColumn: "Hide column",
       resetColumns: "Reset columns",
-      unGroupBy: "Un-Group by {{label}}",
+      unGroupBy: "Un-group by {{label}}",
       groupBy: "Group by {{label}}"
     },
     grandTotals: "Grand totals",
@@ -106025,7 +106045,7 @@ var en_CA_default = {
       autoSizeAllColumns: "Autosize all columns",
       hideColumn: "Hide column",
       resetColumns: "Reset columns",
-      unGroupBy: "Un-Group by {{label}}",
+      unGroupBy: "Un-group by {{label}}",
       groupBy: "Group by {{label}}"
     },
     grandTotals: "Grand totals",
@@ -106600,7 +106620,7 @@ var es_default = {
         description: "Una vez que su equipo cree \xEDtems, podr\xE1 acceder a ellos aqu\xED. ",
         title: "No hay \xEDtems para mostrar en este momento",
         itemsTitle: "No hay %{itemsLabel} para mostrar en este momento",
-        tooltip: "El bot\xF3n %{featureName} se habilitar\xE1 una vez que agregue informaci\xF3n al %{tableName}",
+        tooltip: "El bot\xF3n %{featureName} se habilitar\xE1 una vez que agregue informaci\xF3n a la %{tableName}.",
         searchTooltip: "La b\xFAsqueda se habilitar\xE1 una vez que agregue informaci\xF3n a %{tableName}",
         featureFilter: "Filtro",
         featureQuickFilter: "Filtro r\xE1pido",
@@ -106614,7 +106634,7 @@ var es_default = {
       bulkEdit: "Edici\xF3n masiva",
       cancel: "Cancelar",
       editValues: "Editar valores",
-      error: "Lo sentimos, no se pudieron actualizar los \xEDtems. Vuelva a intentarlo.",
+      error: "Lo sentimos, no se pudieron actualizar los \xEDtems. Int\xE9ntelo de nuevo.",
       placeholderForField: "Ingrese %{fieldName}",
       selection: "%{count} %{number} seleccionado",
       success: "Los \xEDtems se actualizaron correctamente.",
@@ -106660,14 +106680,14 @@ var es_default = {
       }
     },
     loading: {
-      initial: "Cargando informaci\xF3n.",
+      initial: "Cargando informaci\xF3n...",
       secondary: "Cargando informaci\xF3n. Gracias por su paciencia."
     },
     menuOptions: {
       sortMenuItem: {
         label: "Ordenar por esta columna",
-        sortAscItem: "Ordenar columna ascendente",
-        sortDescItem: "Ordenar columna descendente",
+        sortAscItem: "Ordenar columna - Ascendente",
+        sortDescItem: "Ordenar columna - Descendente",
         sortResetItem: "Columna no ordenada"
       },
       expandAllGroups: "Expandir todos los grupos",
@@ -106777,7 +106797,7 @@ var fr_CA_default = {
       bulkEdit: "Modifier en bloc",
       cancel: "Annuler",
       editValues: "Modifier les valeurs",
-      error: "D\xE9sol\xE9, les items n'ont pas pu \xEAtre mis \xE0 jour. R\xE9essayer.",
+      error: "D\xE9sol\xE9, les items n'ont pas pu \xEAtre mis \xE0 jour. Veuillez r\xE9essayer.",
       placeholderForField: "Entrez %{fieldName}",
       selection: "%{count} %{number} s\xE9lectionn\xE9",
       success: "Les items ont \xE9t\xE9 mis \xE0 jour avec succ\xE8s.",
@@ -106940,7 +106960,7 @@ var fr_FR_default = {
       bulkEdit: "Modifier en masse",
       cancel: "Annuler",
       editValues: "Modifier les valeurs",
-      error: "D\xE9sol\xE9, les \xE9l\xE9ments n'ont pas pu \xEAtre mis \xE0 jour. R\xE9essayez.",
+      error: "D\xE9sol\xE9, les \xE9l\xE9ments n'ont pas pu \xEAtre mis \xE0 jour. Veuillez r\xE9essayer.",
       placeholderForField: "Saisissez %{fieldName}",
       selection: "%{count} %{number} s\xE9lectionn\xE9",
       success: "Les \xE9l\xE9ments ont bien \xE9t\xE9 mis \xE0 jour.",
@@ -107758,7 +107778,7 @@ var pt_BR_default = {
       bulkEdit: "Edi\xE7\xE3o em Massa",
       cancel: "Cancelar",
       editValues: "Editar Valores",
-      error: "Lamentamos, mas n\xE3o foi poss\xEDvel atualizar os itens. Tente novamente.",
+      error: "Sentimos muito, mas n\xE3o foi poss\xEDvel atualizar os itens. Tente novamente.",
       placeholderForField: "Digite %{fieldName}",
       selection: "%{count} %{number} selecionado",
       success: "Os itens foram atualizados com sucesso.",
@@ -107921,7 +107941,7 @@ var th_TH_default = {
       bulkEdit: "\u0E01\u0E32\u0E23\u0E41\u0E01\u0E49\u0E44\u0E02\u0E41\u0E1A\u0E1A\u0E01\u0E25\u0E38\u0E48\u0E21",
       cancel: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",
       editValues: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E04\u0E48\u0E32",
-      error: "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E44\u0E14\u0E49 \u0E42\u0E1B\u0E23\u0E14\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07",
+      error: "\u0E02\u0E2D\u0E2D\u0E20\u0E31\u0E22 \u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E44\u0E14\u0E49 \u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07.",
       placeholderForField: "\u0E1B\u0E49\u0E2D\u0E19 %{fieldName}",
       selection: "%{count} %{number} \u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01",
       success: "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08\u0E41\u0E25\u0E49\u0E27",
@@ -109219,8 +109239,7 @@ var DataTable = ({
   showExpandCollapseAllToggle,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey,
-  enableCDN
+  localStoragePersistenceKey
 }) => {
   const initialTableConfig = localStoragePersistenceKey && storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
   const onServerSideDataRequestRef = React80.useRef(onServerSideDataRequest);
@@ -109232,28 +109251,14 @@ var DataTable = ({
   );
   const contextPanel = useContextPanel();
   const clientI18n = useI18nContext();
-  const isCDNEnabled = isCDNFeatureFlagEnabled(clientI18n, enableCDN);
-  const cdnTranslations = useRequestTranslations(
-    {
-      locale: clientI18n.locale,
-      type: "file",
-      absolute_file_path: (locale) => `core/packages/data-table/src/locales/${locale}`
-    },
-    { en: translations.en, pseudo: translations.pseudo },
-    {
-      oldTranslations: translations,
-      enableCDN: isCDNEnabled
-    }
-  );
   const internalI18n = useI18n({
-    locale: clientI18n.locale,
+    ...clientI18n,
     translations: mergeDeepLeft(
       mergeDeepLeft(clientI18n.translations, {
         [clientI18n.locale]: translations2
       }),
-      cdnTranslations.translations
-    ),
-    enableCDN: isCDNEnabled
+      translations
+    )
   });
   const rowSelectionRef = React80.useRef({
     affectedRows: {},
@@ -109304,6 +109309,7 @@ var DataTable = ({
   );
   const [gridApi, setGridApi] = React80.useState();
   const [columnApi, setColumnApi] = React80.useState();
+  const [hasDuplicateRowIds, setHasDuplicateRowIds] = React80.useState(false);
   const searchStorage = useSearchStorage();
   const filterState = useFilterState({
     columnDefinitions: columns,
@@ -109381,7 +109387,9 @@ var DataTable = ({
           gridApi == null ? void 0 : gridApi.hideOverlay.bind(gridApi),
           filterStorage.filtersState,
           searchStorage.searchValue,
-          setTotalRowCount
+          setTotalRowCount,
+          setHasDuplicateRowIds,
+          getRowId
         )
       );
       gridApi == null ? void 0 : gridApi.paginationGoToPage(0);
@@ -109476,7 +109484,8 @@ var DataTable = ({
         tableRef,
         totalRowCount,
         setTotalRowCount,
-        updateServerSideDataSource
+        updateServerSideDataSource,
+        hasDuplicateRowIds
       }
     },
     children
@@ -109487,12 +109496,34 @@ var rowDragMoveEvent;
 var rowDragEndEvent;
 function getServerSideDatasource(onServerSideDataRequestCallbackRef, onEmptyResponseCallback = () => {
 }, onNonEmptyResponseCallback = () => {
-}, filters, search, setTotalRowCount) {
+}, filters, search, setTotalRowCount, setHasDuplicateRowIds, getRowId) {
   return {
     getRows: async (params) => {
       if (onServerSideDataRequestCallbackRef.current) {
         const { request, success, fail } = params;
         const onSuccess = (loadSuccessParams) => {
+          const { rowData } = loadSuccessParams;
+          if (rowData && Array.isArray(rowData) && getRowId) {
+            const uniqueRowIds = /* @__PURE__ */ new Set();
+            for (const row2 of rowData) {
+              const id = getRowId({
+                data: row2,
+                level: 0,
+                api: {},
+                columnApi: {},
+                context: {}
+              });
+              if (uniqueRowIds.has(id)) {
+                setHasDuplicateRowIds(true);
+                logger.error(
+                  "Duplicate row IDs detected in rowData. Check getRowId() to ensure it returns unique IDs."
+                );
+                fail();
+                return;
+              }
+              uniqueRowIds.add(id);
+            }
+          }
           if (!loadSuccessParams.rowCount && request.groupKeys.length === 0) {
             onEmptyResponseCallback();
           } else {
@@ -110510,13 +110541,7 @@ function ClientSideFilterInner(props) {
   var _a, _b;
   const { Component: Component4, columnDefinition, onChange, options, value } = props;
   const filterHeading = ((_b = (_a = columnDefinition.filterProps) == null ? void 0 : _a.getFilterHeadingText) == null ? void 0 : _b.call(_a, columnDefinition)) ?? columnDefinition.headerName;
-  const filterOptions = React80.useMemo(
-    () => {
-      var _a2;
-      return (_a2 = options ?? []) == null ? void 0 : _a2.filter((option) => !!option);
-    },
-    [options]
-  );
+  const filterOptions = React80.useMemo(() => options ?? [], [options]);
   return /* @__PURE__ */ React80.createElement(Box, { as: "li", display: "block", paddingBottom: "xl", style: { width: "100%" } }, filterHeading ? /* @__PURE__ */ React80.createElement(
     Label$1,
     {
@@ -112489,8 +112514,7 @@ var ClientSideDataTable = ({
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
-  localStoragePersistenceKey,
-  enableCDN
+  localStoragePersistenceKey
 }) => {
   return /* @__PURE__ */ React80.createElement(
     DataTable,
@@ -112508,8 +112532,7 @@ var ClientSideDataTable = ({
       translations: translations2,
       localStoragePersistenceKey,
       customBulkEditorFields,
-      enableCellTextSelection,
-      enableCDN
+      enableCellTextSelection
     },
     children
   );
@@ -116970,8 +116993,7 @@ var ServerSideDataTable = ({
   enableCellTextSelection,
   showExpandCollapseAllToggle,
   translations: translations2 = {},
-  localStoragePersistenceKey,
-  enableCDN
+  localStoragePersistenceKey
 }) => {
   return /* @__PURE__ */ React80.createElement(
     DataTable,
@@ -116990,8 +117012,7 @@ var ServerSideDataTable = ({
       translations: translations2,
       customBulkEditorFields,
       enableCellTextSelection,
-      localStoragePersistenceKey,
-      enableCDN
+      localStoragePersistenceKey
     },
     children
   );