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

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-## 15.0.0-cdn.0
+## 14.28.0-cdn.4
 
 ### Minor Changes
 
@@ -12,6 +12,19 @@
 - Updated dependencies [8baa7c3]
   - @procore/core-react@12.21.0-cdn.0
 
+## 14.28.0
+
+### Minor Changes
+
+- e6586a3: If a row is not selectable, make isRowSelected = false
+- 92682a0: Fix: ensure "Select All" checkbox stays visible and functional when the first column is hidden
+- 3f72970: Add placeholder implementation for MultiSelectCellRenderer component
+- 89c28a0: Prevent infinite requests when getRowId returns duplicate IDs in ServerSideDataTable.
+
+### Patch Changes
+
+- 5d92cf2: Fix Misalignment in Table Headers with Nested Column Definitions
+
 ## 14.27.1
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -1424,7 +1424,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;
@@ -5425,7 +5425,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);
   }
@@ -7680,6 +7680,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%;
@@ -7933,7 +7936,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;
@@ -7942,7 +7945,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;
@@ -7950,50 +7953,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
@@ -54371,6 +54374,9 @@ function useFilterState({
     },
     [gridApi]
   );
+  const filterableColumns = React80__default.default.useMemo(() => {
+    return columnDefinitions.filter((colDef) => !!colDef.filterRenderer).sort(sortColumnDefinitionsByFilterIndex);
+  }, [columnDefinitions]);
   const getFieldFilters = React80__default.default.useCallback(() => {
     return filterableColumns.map((column2) => {
       const filterInstance = getFieldFilter(column2.field);
@@ -54384,10 +54390,7 @@ function useFilterState({
         ...instanceOptions
       };
     }).filter((filter) => filter.instance !== void 0);
-  }, [getFieldFilter, gridApi]);
-  const filterableColumns = React80__default.default.useMemo(() => {
-    return columnDefinitions.filter((colDef) => !!colDef.filterRenderer).sort(sortColumnDefinitionsByFilterIndex);
-  }, [columnDefinitions]);
+  }, [getFieldFilter, gridApi, filterableColumns]);
   const filterEventFunction = function filterEventFunction2() {
     if (listenersEnabled.current) {
       const allFilters = getFieldFilters();
@@ -54503,6 +54506,10 @@ function ClientSideMultiSelectFilterRenderer({
   value = [],
   ...props
 }) {
+  const filterOptions = React80__default.default.useMemo(
+    () => (options ?? []).map((option) => option ?? ""),
+    [options]
+  );
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.MultiSelect,
     {
@@ -54518,8 +54525,8 @@ function ClientSideMultiSelectFilterRenderer({
         return getLabel((_a = columnDefinition.filterProps) == null ? void 0 : _a.getLabel, option);
       },
       onChange,
-      options,
-      value: ramda.intersection(value || [], options)
+      options: filterOptions,
+      value: ramda.intersection(value || [], filterOptions)
     }
   );
 }
@@ -57255,7 +57262,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;
@@ -57311,22 +57318,26 @@ var GenericHeaderRenderer = (props) => {
   }, []);
   React80__default.default.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;
@@ -57544,7 +57555,7 @@ var GenericHeaderRenderer = (props) => {
     }
     function updateSelectAllCheckbox(e) {
       var _a2;
-      if (e.source === "uiSelectAll") {
+      if (e && e.source === "uiSelectAll") {
         return;
       }
       const selectionState = props.api.getServerSideSelectionState();
@@ -57557,7 +57568,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 */);
@@ -57569,6 +57583,7 @@ var GenericHeaderRenderer = (props) => {
     }
     props.api.addEventListener(selectionChanged, updateSelectAllCheckbox);
     props.api.addEventListener(paginationChanged, updateSelectAllCheckbox);
+    updateSelectAllCheckbox();
     return () => {
       removeEventListenerFromGrid(
         selectionChanged,
@@ -57806,6 +57821,11 @@ function getGroupNodes(params) {
 function CustomLoader(params) {
   const I18n = coreReact.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__default.default.createElement(coreReact.Flex, { style: { paddingLeft: "16px" } }, /* @__PURE__ */ React80__default.default.createElement(
       LevelIndents,
@@ -58513,7 +58533,8 @@ var InternalTableContext = React80__default.default.createContext({
   },
   totalRowCount: 0,
   setTotalRowCount: () => {
-  }
+  },
+  hasDuplicateRowIds: false
 });
 var useInternalTableContext = () => React80__default.default.useContext(InternalTableContext);
 var prng = ulid$1.detectPrng(true);
@@ -105875,7 +105896,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",
@@ -106038,7 +106059,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",
@@ -106613,7 +106634,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",
@@ -106627,7 +106648,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.",
@@ -106673,14 +106694,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",
@@ -106790,7 +106811,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.",
@@ -106953,7 +106974,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.",
@@ -107771,7 +107792,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.",
@@ -107934,7 +107955,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",
@@ -109317,6 +109338,7 @@ var DataTable = ({
   );
   const [gridApi, setGridApi] = React80__default.default.useState();
   const [columnApi, setColumnApi] = React80__default.default.useState();
+  const [hasDuplicateRowIds, setHasDuplicateRowIds] = React80__default.default.useState(false);
   const searchStorage = useSearchStorage();
   const filterState = useFilterState({
     columnDefinitions: columns,
@@ -109394,7 +109416,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);
@@ -109489,7 +109513,8 @@ var DataTable = ({
         tableRef,
         totalRowCount,
         setTotalRowCount,
-        updateServerSideDataSource
+        updateServerSideDataSource,
+        hasDuplicateRowIds
       }
     },
     children
@@ -109500,12 +109525,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 {
@@ -110523,13 +110570,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__default.default.useMemo(
-    () => {
-      var _a2;
-      return (_a2 = options ?? []) == null ? void 0 : _a2.filter((option) => !!option);
-    },
-    [options]
-  );
+  const filterOptions = React80__default.default.useMemo(() => options ?? [], [options]);
   return /* @__PURE__ */ React80__default.default.createElement(coreReact.Box, { as: "li", display: "block", paddingBottom: "xl", style: { width: "100%" } }, filterHeading ? /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Label,
     {

package/dist/legacy/index.d.cts

@@ -1378,6 +1378,7 @@ interface InternalTableContext {
     getColumnDefinition: (field: string) => ColumnDefinition | undefined;
     totalRowCount: number;
     setTotalRowCount: React__default.Dispatch<React__default.SetStateAction<number>>;
+    hasDuplicateRowIds: boolean;
     setSelectedGroupIndex?: React__default.Dispatch<React__default.SetStateAction<string | null>>;
 }
 declare const InternalTableContext: React__default.Context<InternalTableContext>;

package/dist/legacy/index.d.ts

@@ -1378,6 +1378,7 @@ interface InternalTableContext {
     getColumnDefinition: (field: string) => ColumnDefinition | undefined;
     totalRowCount: number;
     setTotalRowCount: React__default.Dispatch<React__default.SetStateAction<number>>;
+    hasDuplicateRowIds: boolean;
     setSelectedGroupIndex?: React__default.Dispatch<React__default.SetStateAction<string | null>>;
 }
 declare const InternalTableContext: React__default.Context<InternalTableContext>;