@procore/data-table 14.12.0 → 14.12.2

package/dist/modern/index.js

@@ -8011,7 +8011,7 @@ var InternalBooleanCellEditor = React76.forwardRef(({ columnDefinition, setDataV
   return /* @__PURE__ */ React76.createElement(
     Select,
     {
-      afterHide: stopEditing,
+      afterHide: () => stopEditing(),
       block: true,
       className: cx("input-cell"),
       label: value ? I18n.t("dataTable.cells.booleanCell.options.yes") : I18n.t("dataTable.cells.booleanCell.options.no"),
@@ -8229,8 +8229,8 @@ var Editor = React76.forwardRef(
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
     }
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const defaultValue = eventKey ? value : formatNumber(value, {
       ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
@@ -8668,8 +8668,8 @@ var Renderer4 = (props) => {
 var DateCellRenderer = withDataTableRenderer(Renderer4, "date");
 var Editor2 = React76.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event?.target));
     }
     function onChange(date) {
       if (date) {
@@ -8739,8 +8739,8 @@ var Renderer5 = (props) => {
 var DateTimeCellRenderer = withDataTableRenderer(Renderer5, "date");
 var Editor3 = React76.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event?.target));
     }
     function onChange(date) {
       if (date) {
@@ -53012,8 +53012,8 @@ var InternalNumberCellEditor = React76.forwardRef(({ columnDefinition, stopEditi
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   return /* @__PURE__ */ React76.createElement(
     Input,
@@ -53296,8 +53296,8 @@ var Renderer7 = ({
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
 var Editor4 = React76.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   const I18n = useI18nContext();
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
@@ -53688,8 +53688,8 @@ var Renderer11 = ({
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React76.forwardRef(
   ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = useI18nContext();
     const internalValue = eventKey ? value : columnDefinition.getStringFormattedValue?.(value) ?? value;
@@ -53759,8 +53759,8 @@ var Renderer12 = ({
 };
 var Editor8 = React76.forwardRef(
   ({ columnDefinition, stopEditing, value }, ref) => {
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = useI18nContext();
     const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
@@ -55970,7 +55970,14 @@ var DataTableCellEditor = React76.forwardRef(
             node.setDataValue(field, newValue);
             setCurrentValue(newValue);
           },
-          stopEditing,
+          stopEditing: (relatedTarget) => {
+            const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table') === null;
+            stopEditing(isRelatedTargetOutsideTable);
+            if (isRelatedTargetOutsideTable) {
+              api.clearFocusedCell();
+              relatedTarget.focus();
+            }
+          },
           tableApi: tableRef?.current,
           value: currentValue,
           ref: handleRefs(editorType)
@@ -56842,6 +56849,9 @@ function withDataTableRenderer(Component4, editorType) {
     }
   );
 }
+function ensureIsHTMLElement(element) {
+  return element instanceof HTMLElement ? element : null;
+}
 function getGroupNodes(params) {
   const currentParentId = params.node?.parent?.id ?? "root";
   let groupNodes = {
@@ -57081,7 +57091,7 @@ var MultiSelectEditor = React76.forwardRef(({ columnDefinition, value = [], setD
     MultiSelect,
     {
       beforeShow,
-      afterHide: stopEditing,
+      afterHide: () => stopEditing(),
       block: true,
       loading: isSearching || loading,
       getId: (option) => {
@@ -77998,8 +78008,9 @@ var de_DE_default = {
         title: "Aktuell gibt es keine anzuzeigenden Elemente.",
         itemsTitle: "Aktuell gibt es keine anzuzeigenden %{itemsLabel}",
         tooltip: "Die Schaltfl\xE4che %{featureName} wird aktiviert, sobald Sie dem Feld %{tableName} Informationen hinzuf\xFCgen.",
+        searchTooltip: "Die Suche wird aktiviert, sobald Sie Informationen zu den %{tableName}",
         featureFilter: "Filtern",
-        featureSearch: "Suchen",
+        featureQuickFilter: "Schnell-Filter",
         featureGroupBy: "Gruppieren nach",
         featureConfigure: "Konfigurieren",
         tableNameFallback: "Tabelle"
@@ -78125,6 +78136,10 @@ var de_DE_default = {
         single: "Einzeln",
         range: "Bereich"
       }
+    },
+    groupCell: {
+      expand: "Gruppe erweitern",
+      collapse: "Gruppe ausblenden"
     }
   }
 };
@@ -78143,8 +78158,9 @@ var en_AU_default = {
         title: "There Are No Items to Display Right Now",
         itemsTitle: "There Are No %{itemsLabel} to Display Right Now",
         tooltip: "The %{featureName} button will be enabled once you add information to the %{tableName}",
+        searchTooltip: "Search will be enabled once you add information to the %{tableName}",
         featureFilter: "Filter",
-        featureSearch: "Search",
+        featureQuickFilter: "Quick Filter",
         featureGroupBy: "Group By",
         featureConfigure: "Configure",
         tableNameFallback: "Table"
@@ -78270,6 +78286,10 @@ var en_AU_default = {
         single: "Single",
         range: "Range"
       }
+    },
+    groupCell: {
+      expand: "Expand group",
+      collapse: "Collapse group"
     }
   }
 };
@@ -78288,8 +78308,9 @@ var en_CA_default = {
         title: "There Are No Items to Display Right Now",
         itemsTitle: "There Are No %{itemsLabel} to Display Right Now",
         tooltip: "The %{featureName} button will be enabled once you add information to the %{tableName}",
+        searchTooltip: "Search will be enabled once you add information to the %{tableName}",
         featureFilter: "Filter",
-        featureSearch: "Search",
+        featureQuickFilter: "Quick Filter",
         featureGroupBy: "Group By",
         featureConfigure: "Configure",
         tableNameFallback: "Table"
@@ -78415,6 +78436,10 @@ var en_CA_default = {
         single: "Single",
         range: "Range"
       }
+    },
+    groupCell: {
+      expand: "Expand group",
+      collapse: "Collapse group"
     }
   }
 };
@@ -78433,8 +78458,9 @@ var en_GB_default = {
         title: "There Are No Items to Display Right Now",
         itemsTitle: "There Are No %{itemsLabel} to Display Right Now",
         tooltip: "The %{featureName} button will be enabled once you add information to the %{tableName}",
+        searchTooltip: "Search will be enabled once you add information to the %{tableName}",
         featureFilter: "Filter",
-        featureSearch: "Search",
+        featureQuickFilter: "Quick Filter",
         featureGroupBy: "Group By",
         featureConfigure: "Configure",
         tableNameFallback: "Table"
@@ -78560,6 +78586,10 @@ var en_GB_default = {
         single: "Single",
         range: "Range"
       }
+    },
+    groupCell: {
+      expand: "Expand group",
+      collapse: "Collapse group"
     }
   }
 };
@@ -78728,8 +78758,9 @@ var es_ES_default = {
         title: "No hay elementos 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 a\xF1ada informaci\xF3n a la %{tableName}",
+        searchTooltip: "La b\xFAsqueda se habilitar\xE1 una vez que agregue informaci\xF3n a %{tableName}",
         featureFilter: "Filtro",
-        featureSearch: "Buscar",
+        featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
         featureConfigure: "Configurar",
         tableNameFallback: "tabla"
@@ -78855,6 +78886,10 @@ var es_ES_default = {
         single: "\xDAnica",
         range: "Rango"
       }
+    },
+    groupCell: {
+      expand: "Expandir grupo",
+      collapse: "Contraer grupo"
     }
   }
 };
@@ -78873,8 +78908,9 @@ var es_default = {
         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}",
+        searchTooltip: "La b\xFAsqueda se habilitar\xE1 una vez que agregue informaci\xF3n a %{tableName}",
         featureFilter: "Filtro",
-        featureSearch: "Buscar",
+        featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
         featureConfigure: "Configurar",
         tableNameFallback: "tabla"
@@ -79000,6 +79036,10 @@ var es_default = {
         single: "\xDAnico",
         range: "Intervalo"
       }
+    },
+    groupCell: {
+      expand: "Expandir grupo",
+      collapse: "Colapsar grupo"
     }
   }
 };
@@ -79018,8 +79058,9 @@ var fr_CA_default = {
         title: "Il n'y a aucun item \xE0 afficher pour le moment",
         itemsTitle: "Il n'y a pas de %{itemsLabel} \xE0 afficher pour le moment",
         tooltip: "Le bouton %{featureName} sera activ\xE9 une fois que vous aurez ajout\xE9 des informations au %{tableName}",
+        searchTooltip: "La recherche sera activ\xE9e une fois que vous aurez ajout\xE9 de l'information au %{tableName}",
         featureFilter: "Filtre",
-        featureSearch: "Rechercher",
+        featureQuickFilter: "Filtre rapide",
         featureGroupBy: "Regrouper par",
         featureConfigure: "Configurer",
         tableNameFallback: "tableau"
@@ -79106,9 +79147,9 @@ var fr_CA_default = {
       configure: "Configurer"
     },
     rowGroupToggle: {
-      expandTierOne: "Ouvrez les premiers groupes du tableau.",
+      expandTierOne: "Ouvrir les premiers groupes du tableau.",
       expandAll: "Ouvrez tous les groupes du tableau.",
-      collapseAll: "Fermez tous les groupes du tableau."
+      collapseAll: "Fermer tous les groupes du tableau."
     },
     columnGroupToggle: {
       collapse: "R\xE9duire le groupe de colonnes",
@@ -79145,6 +79186,10 @@ var fr_CA_default = {
         single: "Seul",
         range: "Intervalle"
       }
+    },
+    groupCell: {
+      expand: "D\xE9velopper le groupe",
+      collapse: "R\xE9duire le groupe"
     }
   }
 };
@@ -79163,8 +79208,9 @@ var fr_FR_default = {
         title: "Aucun \xE9l\xE9ment \xE0 afficher pour l'instant",
         itemsTitle: "Aucun %{itemsLabel} \xE0 afficher pour l'instant",
         tooltip: "Le bouton %{featureName} sera activ\xE9 une fois que vous aurez ajout\xE9 des informations au tableau %{tableName}",
+        searchTooltip: "La recherche sera activ\xE9e une fois que vous aurez ajout\xE9 des informations au %{tableName}",
         featureFilter: "Filtrer",
-        featureSearch: "Rechercher",
+        featureQuickFilter: "Filtre rapide",
         featureGroupBy: "Regrouper par",
         featureConfigure: "Configurer",
         tableNameFallback: "Tableau"
@@ -79290,6 +79336,10 @@ var fr_FR_default = {
         single: "Unique",
         range: "Plage"
       }
+    },
+    groupCell: {
+      expand: "D\xE9velopper le groupe",
+      collapse: "R\xE9duire le groupe"
     }
   }
 };
@@ -79308,8 +79358,9 @@ var is_IS_default = {
         title: "\xDEa\xF0 eru engir hlutir til a\xF0 s\xFDna n\xFAna",
         itemsTitle: "\xDEa\xF0 eru engin %{itemsLabel} til a\xF0 s\xFDna n\xFAna",
         tooltip: "%{featureName} hnappurinn ver\xF0ur virkur \xFEegar \xFE\xFA b\xE6tir uppl\xFDsingum vi\xF0 %{tableName}",
+        searchTooltip: "Leit ver\xF0ur virkju\xF0 \xFEegar \xFE\xFA b\xE6tir uppl\xFDsingum vi\xF0 %{tableName}",
         featureFilter: "S\xEDa",
-        featureSearch: "Leita\xF0u",
+        featureQuickFilter: "Flj\xF3tleg s\xEDa",
         featureGroupBy: "H\xF3pur eftir",
         featureConfigure: "Stilla",
         tableNameFallback: "Tafla"
@@ -79435,6 +79486,10 @@ var is_IS_default = {
         single: "Einhleypur",
         range: "Svi\xF0"
       }
+    },
+    groupCell: {
+      expand: "St\xE6kka h\xF3pinn",
+      collapse: "Hrunh\xF3pur"
     }
   }
 };
@@ -79453,8 +79508,9 @@ var ja_JP_default = {
         title: "\u73FE\u5728\u3001\u8868\u793A\u3059\u308B\u9805\u76EE\u304C\u3042\u308A\u307E\u305B\u3093",
         itemsTitle: "\u73FE\u5728\u3001\u8868\u793A\u3059\u308B%{itemsLabel}\u304C\u3042\u308A\u307E\u305B\u3093",
         tooltip: "\u60C5\u5831\u3092%{tableName}\u306B\u8FFD\u52A0\u3059\u308B\u3068\u3001[%{featureName}]\u30DC\u30BF\u30F3\u304C\u6709\u52B9\u306B\u306A\u308A\u307E\u3059",
+        searchTooltip: "%{tableName}\u306B\u60C5\u5831\u3092\u8FFD\u52A0\u3059\u308B\u3068\u691C\u7D22\u304C\u6709\u52B9\u306B\u306A\u308A\u307E\u3059",
         featureFilter: "\u30D5\u30A3\u30EB\u30BF\u30FC",
-        featureSearch: "\u691C\u7D22",
+        featureQuickFilter: "\u30AF\u30A4\u30C3\u30AF\u30D5\u30A3\u30EB\u30BF\u30FC",
         featureGroupBy: "\u30B0\u30EB\u30FC\u30D7\u5316",
         featureConfigure: "\u69CB\u6210",
         tableNameFallback: "\u8868"
@@ -79580,6 +79636,10 @@ var ja_JP_default = {
         single: "\u5358\u72EC",
         range: "\u7BC4\u56F2"
       }
+    },
+    groupCell: {
+      expand: "\u30B0\u30EB\u30FC\u30D7\u3092\u5C55\u958B\u3059\u308B",
+      collapse: "\u30B0\u30EB\u30FC\u30D7\u3092\u6298\u308A\u305F\u305F\u3080"
     }
   }
 };
@@ -79748,8 +79808,9 @@ var pt_BR_default = {
         title: "N\xE3o H\xE1 Itens para Exibir Agora",
         itemsTitle: "N\xE3o H\xE1 %{itemsLabel} para Exibir Agora",
         tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es ao %{tableName}",
+        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 tabela %{tableName}",
         featureFilter: "Filtrar",
-        featureSearch: "Pesquisar",
+        featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
         featureConfigure: "Configurar",
         tableNameFallback: "tabela"
@@ -79875,6 +79936,10 @@ var pt_BR_default = {
         single: "\xDAnico",
         range: "Intervalo"
       }
+    },
+    groupCell: {
+      expand: "Expandir grupo",
+      collapse: "Recolher grupo"
     }
   }
 };
@@ -79893,8 +79958,9 @@ var th_TH_default = {
         title: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E08\u0E30\u0E41\u0E2A\u0E14\u0E07\u0E43\u0E19\u0E02\u0E13\u0E30\u0E19\u0E35\u0E49",
         itemsTitle: "\u0E44\u0E21\u0E48\u0E21\u0E35 %{itemsLabel} \u0E17\u0E35\u0E48\u0E08\u0E30\u0E41\u0E2A\u0E14\u0E07\u0E1C\u0E25\u0E43\u0E19\u0E02\u0E13\u0E30\u0E19\u0E35\u0E49",
         tooltip: "\u0E1B\u0E38\u0E48\u0E21 %{featureName} \u0E08\u0E30\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E40\u0E21\u0E37\u0E48\u0E2D\u0E04\u0E38\u0E13\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E25\u0E07\u0E43\u0E19 %{tableName}",
+        searchTooltip: "\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E08\u0E30\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E40\u0E21\u0E37\u0E48\u0E2D\u0E04\u0E38\u0E13\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E25\u0E07\u0E43\u0E19 %{tableName}",
         featureFilter: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07",
-        featureSearch: "\u0E04\u0E49\u0E19\u0E2B\u0E32",
+        featureQuickFilter: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E14\u0E48\u0E27\u0E19",
         featureGroupBy: "\u0E41\u0E1A\u0E48\u0E07\u0E01\u0E25\u0E38\u0E48\u0E21\u0E15\u0E32\u0E21",
         featureConfigure: "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E04\u0E48\u0E32",
         tableNameFallback: "\u0E15\u0E32\u0E23\u0E32\u0E07"
@@ -80020,6 +80086,10 @@ var th_TH_default = {
         single: "\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27",
         range: "\u0E41\u0E19\u0E27"
       }
+    },
+    groupCell: {
+      expand: "\u0E02\u0E22\u0E32\u0E22\u0E01\u0E25\u0E38\u0E48\u0E21",
+      collapse: "\u0E01\u0E32\u0E23\u0E22\u0E38\u0E1A\u0E01\u0E25\u0E38\u0E48\u0E21"
     }
   }
 };
@@ -80038,8 +80108,9 @@ var zh_SG_default = {
         title: "\u5F53\u524D\u6CA1\u6709\u53EF\u663E\u793A\u7684\u9879",
         itemsTitle: "\u5F53\u524D\u6CA1\u6709\u53EF\u663E\u793A\u7684%{itemsLabel}",
         tooltip: "\u4F60\u5C06\u4FE1\u606F\u6DFB\u52A0\u5230 %{tableName} \u540E\uFF0C\u7CFB\u7EDF\u5C06\u542F\u7528%{featureName}\u6309\u94AE",
+        searchTooltip: "\u4E00\u65E6\u60A8\u5C06\u4FE1\u606F\u6DFB\u52A0\u5230%{tableName}\u641C\u7D22\u529F\u80FD\u5C31\u4F1A\u542F\u7528",
         featureFilter: "\u7B5B\u9009\u5668",
-        featureSearch: "\u641C\u7D22",
+        featureQuickFilter: "\u5FEB\u901F\u7B5B\u9009",
         featureGroupBy: "\u5206\u7EC4\u4F9D\u636E",
         featureConfigure: "\u914D\u7F6E",
         tableNameFallback: "\u8868\u683C"
@@ -80165,6 +80236,10 @@ var zh_SG_default = {
         single: "\u5355\u4E2A",
         range: "\u8303\u56F4"
       }
+    },
+    groupCell: {
+      expand: "\u5C55\u5F00\u7EC4",
+      collapse: "\u6298\u53E0\u7EC4"
     }
   }
 };
@@ -81746,10 +81821,27 @@ var Table = (props) => {
     },
     [columnApi, internalTableContext]
   );
-  const onColumnResized = React76.useCallback(() => {
-    internalTableContext.onTableConfigChange();
-    setHeaderHeight();
-  }, [internalTableContext.onTableConfigChange]);
+  const onColumnResized = React76.useCallback(
+    (params) => {
+      internalTableContext.onTableConfigChange();
+      setHeaderHeight();
+      if (wrapperRef.current && params.column) {
+        const { columnApi: columnApi2, column: column2 } = params;
+        const tableWidth = wrapperRef.current.clientWidth;
+        const columnState = columnApi2.getColumnState();
+        const pinnedColumns = columnState.filter(
+          (column3) => column3.pinned
+        );
+        const totalPinnedWidth = pinnedColumns.reduce(
+          (acc, column3) => acc + column3.width,
+          0
+        );
+        const currentPinnedColumnMaxWidth = tableWidth - totalPinnedWidth + column2.actualWidth - 50;
+        column2.maxWidth = currentPinnedColumnMaxWidth;
+      }
+    },
+    [internalTableContext.onTableConfigChange]
+  );
   const onDisplayedColumnsChanged = React76.useCallback(
     (event) => {
       if (props.onRowDragEnd) {
@@ -82049,6 +82141,7 @@ var Table = (props) => {
   return /* @__PURE__ */ React76.createElement(
     Spinner,
     {
+      "data-qa": "data-table-table",
       loading: loadingStatus.loading,
       label: loadingStatus.message,
       style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.12.0",
+  "version": "14.12.2",
   "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.1.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.8.1",
+    "@procore/core-react": "12.9.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "3.0.1",