@procore/data-table 14.12.1 → 14.12.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 14.12.2
+
+### Patch Changes
+
+- 7ba11177c: When using an input or date editor and focusing on an element outside of the table, clear the cell focus and ensure that the new element is focused.
+
 ## 14.12.1
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -8028,7 +8028,7 @@ var InternalBooleanCellEditor = React76__default.default.forwardRef(({ columnDef
   return /* @__PURE__ */ React76__default.default.createElement(
     coreReact.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"),
@@ -8249,8 +8249,8 @@ var Editor = React76__default.default.forwardRef(
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
     }
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const defaultValue = eventKey ? value : labsFinancialsUtils.formatNumber(value, {
       ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
@@ -8693,8 +8693,8 @@ var DateCellRenderer = withDataTableRenderer(Renderer4, "date");
 var Editor2 = React76__default.default.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
     var _a, _b;
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event == null ? void 0 : event.target));
     }
     function onChange(date) {
       if (date) {
@@ -8767,8 +8767,8 @@ var DateTimeCellRenderer = withDataTableRenderer(Renderer5, "date");
 var Editor3 = React76__default.default.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
     var _a, _b;
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event == null ? void 0 : event.target));
     }
     function onChange(date) {
       if (date) {
@@ -53043,8 +53043,8 @@ var InternalNumberCellEditor = React76__default.default.forwardRef(({ columnDefi
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   return /* @__PURE__ */ React76__default.default.createElement(
     coreReact.Input,
@@ -53335,8 +53335,8 @@ var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
 var Editor4 = React76__default.default.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   var _a, _b, _c, _d, _e;
   const I18n = coreReact.useI18nContext();
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
@@ -53741,8 +53741,8 @@ var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React76__default.default.forwardRef(
   ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = coreReact.useI18nContext();
     const internalValue = eventKey ? value : ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
@@ -53815,8 +53815,8 @@ var Renderer12 = ({
 var Editor8 = React76__default.default.forwardRef(
   ({ columnDefinition, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = coreReact.useI18nContext();
     const internalValue = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
@@ -56070,7 +56070,14 @@ var DataTableCellEditor = React76__default.default.forwardRef(
             node.setDataValue(field, newValue);
             setCurrentValue(newValue);
           },
-          stopEditing,
+          stopEditing: (relatedTarget) => {
+            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table')) === null;
+            stopEditing(isRelatedTargetOutsideTable);
+            if (isRelatedTargetOutsideTable) {
+              api.clearFocusedCell();
+              relatedTarget.focus();
+            }
+          },
           tableApi: tableRef == null ? void 0 : tableRef.current,
           value: currentValue,
           ref: handleRefs(editorType)
@@ -56952,6 +56959,9 @@ function withDataTableRenderer(Component4, editorType) {
     }
   );
 }
+function ensureIsHTMLElement(element) {
+  return element instanceof HTMLElement ? element : null;
+}
 function getGroupNodes(params) {
   var _a, _b;
   const currentParentId = ((_b = (_a = params.node) == null ? void 0 : _a.parent) == null ? void 0 : _b.id) ?? "root";
@@ -57200,7 +57210,7 @@ var MultiSelectEditor = React76__default.default.forwardRef(({ columnDefinition,
     coreReact.MultiSelect,
     {
       beforeShow,
-      afterHide: stopEditing,
+      afterHide: () => stopEditing(),
       block: true,
       loading: isSearching || loading,
       getId: (option) => {
@@ -82346,6 +82356,7 @@ var Table = (props) => {
   return /* @__PURE__ */ React76__default.default.createElement(
     Spinner,
     {
+      "data-qa": "data-table-table",
       loading: loadingStatus.loading,
       label: loadingStatus.message,
       style: {

package/dist/legacy/index.d.cts

@@ -198,7 +198,7 @@ interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends Colum
     eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
-    stopEditing: () => void;
+    stopEditing: (relatedTarget?: HTMLElement | null) => void;
 }
 
 interface BooleanCellRendererParams {

package/dist/legacy/index.d.ts

@@ -198,7 +198,7 @@ interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends Colum
     eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
-    stopEditing: () => void;
+    stopEditing: (relatedTarget?: HTMLElement | null) => void;
 }
 
 interface BooleanCellRendererParams {

package/dist/legacy/index.js

@@ -8014,7 +8014,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"),
@@ -8235,8 +8235,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, {
       ...((_a = columnDefinition.cellEditorParams) == null ? void 0 : _a.formatConfig) ?? ((_b = columnDefinition.cellRendererParams) == null ? void 0 : _b.formatConfig) ?? {},
@@ -8679,8 +8679,8 @@ var DateCellRenderer = withDataTableRenderer(Renderer4, "date");
 var Editor2 = React76.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
     var _a, _b;
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event == null ? void 0 : event.target));
     }
     function onChange(date) {
       if (date) {
@@ -8753,8 +8753,8 @@ var DateTimeCellRenderer = withDataTableRenderer(Renderer5, "date");
 var Editor3 = React76.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
     var _a, _b;
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event == null ? void 0 : event.target));
     }
     function onChange(date) {
       if (date) {
@@ -53029,8 +53029,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,
@@ -53321,8 +53321,8 @@ var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
 var Editor4 = React76.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   var _a, _b, _c, _d, _e;
   const I18n = useI18nContext();
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
@@ -53727,8 +53727,8 @@ var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React76.forwardRef(
   ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = useI18nContext();
     const internalValue = eventKey ? value : ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
@@ -53801,8 +53801,8 @@ var Renderer12 = ({
 var Editor8 = React76.forwardRef(
   ({ columnDefinition, stopEditing, value }, ref) => {
     var _a, _b, _c, _d;
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = useI18nContext();
     const internalValue = ((_a = columnDefinition.getStringFormattedValue) == null ? void 0 : _a.call(columnDefinition, value)) ?? value;
@@ -56056,7 +56056,14 @@ var DataTableCellEditor = React76.forwardRef(
             node.setDataValue(field, newValue);
             setCurrentValue(newValue);
           },
-          stopEditing,
+          stopEditing: (relatedTarget) => {
+            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table')) === null;
+            stopEditing(isRelatedTargetOutsideTable);
+            if (isRelatedTargetOutsideTable) {
+              api.clearFocusedCell();
+              relatedTarget.focus();
+            }
+          },
           tableApi: tableRef == null ? void 0 : tableRef.current,
           value: currentValue,
           ref: handleRefs(editorType)
@@ -56938,6 +56945,9 @@ function withDataTableRenderer(Component4, editorType) {
     }
   );
 }
+function ensureIsHTMLElement(element) {
+  return element instanceof HTMLElement ? element : null;
+}
 function getGroupNodes(params) {
   var _a, _b;
   const currentParentId = ((_b = (_a = params.node) == null ? void 0 : _a.parent) == null ? void 0 : _b.id) ?? "root";
@@ -57186,7 +57196,7 @@ var MultiSelectEditor = React76.forwardRef(({ columnDefinition, value = [], setD
     MultiSelect,
     {
       beforeShow,
-      afterHide: stopEditing,
+      afterHide: () => stopEditing(),
       block: true,
       loading: isSearching || loading,
       getId: (option) => {
@@ -82332,6 +82342,7 @@ var Table = (props) => {
   return /* @__PURE__ */ React76.createElement(
     Spinner,
     {
+      "data-qa": "data-table-table",
       loading: loadingStatus.loading,
       label: loadingStatus.message,
       style: {

package/dist/modern/index.cjs

@@ -8025,7 +8025,7 @@ var InternalBooleanCellEditor = React76__default.default.forwardRef(({ columnDef
   return /* @__PURE__ */ React76__default.default.createElement(
     coreReact.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"),
@@ -8243,8 +8243,8 @@ var Editor = React76__default.default.forwardRef(
     if (isEmptyValue(value) && !columnDefinition.editable) {
       return null;
     }
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const defaultValue = eventKey ? value : labsFinancialsUtils.formatNumber(value, {
       ...columnDefinition.cellEditorParams?.formatConfig ?? columnDefinition.cellRendererParams?.formatConfig ?? {},
@@ -8682,8 +8682,8 @@ var Renderer4 = (props) => {
 var DateCellRenderer = withDataTableRenderer(Renderer4, "date");
 var Editor2 = React76__default.default.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event?.target));
     }
     function onChange(date) {
       if (date) {
@@ -8753,8 +8753,8 @@ var Renderer5 = (props) => {
 var DateTimeCellRenderer = withDataTableRenderer(Renderer5, "date");
 var Editor3 = React76__default.default.forwardRef(
   ({ columnDefinition, setDataValue, stopEditing, value }, ref) => {
-    function afterHide() {
-      stopEditing();
+    function afterHide(event) {
+      stopEditing(ensureIsHTMLElement(event?.target));
     }
     function onChange(date) {
       if (date) {
@@ -53026,8 +53026,8 @@ var InternalNumberCellEditor = React76__default.default.forwardRef(({ columnDefi
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
   }
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   return /* @__PURE__ */ React76__default.default.createElement(
     coreReact.Input,
@@ -53310,8 +53310,8 @@ var Renderer7 = ({
 var PercentCellRenderer = withDataTableRenderer(Renderer7, "input");
 var Editor4 = React76__default.default.forwardRef(({ columnDefinition, eventKey, stopEditing, value }, ref) => {
   const I18n = coreReact.useI18nContext();
-  function onBlur() {
-    stopEditing();
+  function onBlur(event) {
+    stopEditing(ensureIsHTMLElement(event.relatedTarget));
   }
   if (isEmptyValue(value) && !columnDefinition.editable) {
     return null;
@@ -53702,8 +53702,8 @@ var Renderer11 = ({
 var TextCellRenderer = withDataTableRenderer(Renderer11, "input");
 var Editor7 = React76__default.default.forwardRef(
   ({ columnDefinition, eventKey, stopEditing, value }, ref) => {
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = coreReact.useI18nContext();
     const internalValue = eventKey ? value : columnDefinition.getStringFormattedValue?.(value) ?? value;
@@ -53773,8 +53773,8 @@ var Renderer12 = ({
 };
 var Editor8 = React76__default.default.forwardRef(
   ({ columnDefinition, stopEditing, value }, ref) => {
-    function onBlur() {
-      stopEditing();
+    function onBlur(event) {
+      stopEditing(ensureIsHTMLElement(event.relatedTarget));
     }
     const I18n = coreReact.useI18nContext();
     const internalValue = columnDefinition.getStringFormattedValue?.(value) ?? value;
@@ -55984,7 +55984,14 @@ var DataTableCellEditor = React76__default.default.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)
@@ -56856,6 +56863,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 = {
@@ -57095,7 +57105,7 @@ var MultiSelectEditor = React76__default.default.forwardRef(({ columnDefinition,
     coreReact.MultiSelect,
     {
       beforeShow,
-      afterHide: stopEditing,
+      afterHide: () => stopEditing(),
       block: true,
       loading: isSearching || loading,
       getId: (option) => {
@@ -82145,6 +82155,7 @@ var Table = (props) => {
   return /* @__PURE__ */ React76__default.default.createElement(
     Spinner,
     {
+      "data-qa": "data-table-table",
       loading: loadingStatus.loading,
       label: loadingStatus.message,
       style: {

package/dist/modern/index.d.cts

@@ -198,7 +198,7 @@ interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends Colum
     eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
-    stopEditing: () => void;
+    stopEditing: (relatedTarget?: HTMLElement | null) => void;
 }
 
 interface BooleanCellRendererParams {

package/dist/modern/index.d.ts

@@ -198,7 +198,7 @@ interface DataTableCellEditorProps<TValue = any, TColumnDefinition extends Colum
     eventKey: string | null;
     ref?: ((instance: HTMLElement | null) => void) | React__default.MutableRefObject<HTMLElement | null> | null;
     setDataValue: (field: string, newValue: TValue) => void;
-    stopEditing: () => void;
+    stopEditing: (relatedTarget?: HTMLElement | null) => void;
 }
 
 interface BooleanCellRendererParams {

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) => {
@@ -82131,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.1",
+  "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",