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

package/dist/modern/index.js

@@ -1409,7 +1409,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;
@@ -5410,7 +5410,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);
   }
@@ -7665,6 +7665,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%;
@@ -7918,7 +7921,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;
@@ -7927,7 +7930,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;
@@ -7935,50 +7938,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
@@ -54309,6 +54312,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);
@@ -54322,10 +54328,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();
@@ -54436,6 +54439,10 @@ function ClientSideMultiSelectFilterRenderer({
   value = [],
   ...props
 }) {
+  const filterOptions = React80.useMemo(
+    () => (options ?? []).map((option) => option ?? ""),
+    [options]
+  );
   return /* @__PURE__ */ React80.createElement(
     MultiSelect,
     {
@@ -54449,8 +54456,8 @@ function ClientSideMultiSelectFilterRenderer({
         return getLabel(columnDefinition.filterProps?.getLabel, option);
       },
       onChange,
-      options,
-      value: intersection(value || [], options)
+      options: filterOptions,
+      value: intersection(value || [], filterOptions)
     }
   );
 }
@@ -57141,7 +57148,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) => {
   const colDef = props.column.getColDef();
@@ -57196,22 +57203,26 @@ var GenericHeaderRenderer = (props) => {
   }, []);
   React80.useEffect(() => {
     function calculatePosition() {
-      const columns = props.columnApi.getColumnState();
-      if (!columns?.length) {
+      const visibleColumns = props.columnApi.getAllDisplayedColumns();
+      if (!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) => {
     let currentSort = null;
     if (Array.from(checkbox.current?.parentElement?.children || []).includes(
@@ -57423,7 +57434,7 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox(e) {
-      if (e.source === "uiSelectAll") {
+      if (e && e.source === "uiSelectAll") {
         return;
       }
       const selectionState = props.api.getServerSideSelectionState();
@@ -57436,7 +57447,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 */);
@@ -57448,6 +57462,7 @@ var GenericHeaderRenderer = (props) => {
     }
     props.api.addEventListener(selectionChanged, updateSelectAllCheckbox);
     props.api.addEventListener(paginationChanged, updateSelectAllCheckbox);
+    updateSelectAllCheckbox();
     return () => {
       removeEventListenerFromGrid(
         selectionChanged,
@@ -57682,6 +57697,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,
@@ -58370,7 +58390,8 @@ var InternalTableContext = React80.createContext({
   },
   totalRowCount: 0,
   setTotalRowCount: () => {
-  }
+  },
+  hasDuplicateRowIds: false
 });
 var useInternalTableContext = () => React80.useContext(InternalTableContext);
 var prng = detectPrng(true);
@@ -105696,7 +105717,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",
@@ -105859,7 +105880,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",
@@ -106434,7 +106455,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",
@@ -106448,7 +106469,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.",
@@ -106494,14 +106515,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",
@@ -106611,7 +106632,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.",
@@ -106774,7 +106795,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.",
@@ -107592,7 +107613,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.",
@@ -107755,7 +107776,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",
@@ -109124,6 +109145,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,
@@ -109199,7 +109221,9 @@ var DataTable = ({
           gridApi?.hideOverlay.bind(gridApi),
           filterStorage.filtersState,
           searchStorage.searchValue,
-          setTotalRowCount
+          setTotalRowCount,
+          setHasDuplicateRowIds,
+          getRowId
         )
       );
       gridApi?.paginationGoToPage(0);
@@ -109292,7 +109316,8 @@ var DataTable = ({
         tableRef,
         totalRowCount,
         setTotalRowCount,
-        updateServerSideDataSource
+        updateServerSideDataSource,
+        hasDuplicateRowIds
       }
     },
     children
@@ -109303,12 +109328,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 {
@@ -110292,10 +110339,7 @@ function isLastColumnInGroup(params) {
 function ClientSideFilterInner(props) {
   const { Component: Component4, columnDefinition, onChange, options, value } = props;
   const filterHeading = columnDefinition.filterProps?.getFilterHeadingText?.(columnDefinition) ?? columnDefinition.headerName;
-  const filterOptions = React80.useMemo(
-    () => (options ?? [])?.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,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.28.0-cdn.2",
+  "version": "14.28.0-cdn.4",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -79,7 +79,7 @@
     "styled-components": ">= 5.1.1 < 6"
   },
   "dependencies": {
-    "@procore/cdn-translations": "0.1.0",
+    "@procore/cdn-translations": "0.1.2",
     "@procore/error-pages": "0.2.1",
     "@procore/labs-datetime-select": "0.1.1",
     "@procore/labs-group-by-select": "4.0.0",
@@ -114,7 +114,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.6.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.21.0-cdn.2",
+    "@procore/core-react": "12.21.0-cdn.4",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",