@procore/data-table 14.46.1 → 14.46.2

package/dist/modern/index.js

@@ -54285,7 +54285,7 @@ function ServerSideNumberFilterRenderer({
       },
       {
         id: "isEqual",
-        label: I18n.t("options.isEqual", {
+        label: I18n.t("options.is_equal_to", {
           defaultValue: "Is Equal To",
           scope: "dataTable.filters.numberFilter"
         })
@@ -54772,26 +54772,19 @@ function serializeNode(node) {
     rowPinned: node.rowPinned
   };
 }
-function transformToColDef(colDefinition, enableGroupEditAndValidation, enableDynamicRowHeight) {
+function transformToColDef(colDefinition, tableOptions) {
   if (isNestedColumnDefinition(colDefinition)) {
     return {
       ...colDefinition,
       children: colDefinition.children.map(
-        (childColDefinition) => transformColumnDefinitionToColDef(
-          childColDefinition,
-          enableGroupEditAndValidation,
-          enableDynamicRowHeight
-        )
+        (childColDefinition) => transformColumnDefinitionToColDef(childColDefinition, tableOptions)
       )
     };
   }
-  return transformColumnDefinitionToColDef(
-    colDefinition,
-    enableGroupEditAndValidation,
-    enableDynamicRowHeight
-  );
+  return transformColumnDefinitionToColDef(colDefinition, tableOptions);
 }
-function transformColumnDefinitionToColDef(dataTableColumnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight) {
+function transformColumnDefinitionToColDef(dataTableColumnDefinition, tableOptions) {
+  const { enableGroupEditAndValidation, enableDynamicRowHeight } = tableOptions;
   const {
     aggFunc,
     bulkEditable,
@@ -54834,7 +54827,8 @@ function transformColumnDefinitionToColDef(dataTableColumnDefinition, enableGrou
   };
   const cellClassRules = {
     "invalid-cell": function isValid(params) {
-      const shouldValidate = !params.node.group && params.data && !params.data.isAggData || enableGroupEditAndValidation && (params.node.footer || params.node.group && !params.node.expanded);
+      const shouldValidateGroupHeader = tableOptions.enableGroupHeaderEdit && params.node.group;
+      const shouldValidate = !params.node.group && params.data && !params.data.isAggData || enableGroupEditAndValidation && (params.node.footer || params.node.group && !params.node.expanded) || shouldValidateGroupHeader;
       return (shouldValidate && valueValidator && !valueValidator({
         columnDefinition: transformToColumnDefinition(params.colDef),
         data: params.data,
@@ -55171,12 +55165,8 @@ function addAutoGroupParams(columnDefinition, isRowSelectable, siblingGroupsRowS
     }
   };
 }
-function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidation, enableDynamicRowHeight, isRowSelectable, siblingGroupsRowSelectionDisabled, groupsAlwaysExpanded, isDetailTable) {
-  const colDef = columnDefinition ? transformToColDef(
-    columnDefinition,
-    enableGroupEditAndValidation,
-    enableDynamicRowHeight
-  ) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
+function getDecoratedAutoGroupColDef(columnDefinition, tableOptions, isRowSelectable, siblingGroupsRowSelectionDisabled, groupsAlwaysExpanded, isDetailTable) {
+  const colDef = columnDefinition ? transformToColDef(columnDefinition, tableOptions) : DEFAULT_AUTO_GROUP_COLUMN_DEFINITION;
   return addAutoGroupParams(
     colDef,
     isRowSelectable,
@@ -55187,12 +55177,12 @@ function getDecoratedAutoGroupColDef(columnDefinition, enableGroupEditAndValidat
 }
 
 // src/CellRenderers/AutoGroupCell.scss
-var css5 = `._autoGroupCell_1qx8z_1 {
+var css5 = `._autoGroupCell_1h6pf_1 {
   height: 100%;
   width: 100%;
 }
 
-._indent_1qx8z_6 {
+._indent_1h6pf_6 {
   border-right: 1px solid #d6dadc;
   background: #f4f5f6;
   position: absolute;
@@ -55200,45 +55190,69 @@ var css5 = `._autoGroupCell_1qx8z_1 {
   bottom: -1px;
   width: 12px;
 }
-._indent_1qx8z_6._innermostLastIndent_1qx8z_14 {
+._indent_1h6pf_6._innermostLastIndent_1h6pf_14 {
   bottom: 0px;
 }
 
-._expandableCaret_1qx8z_18 {
+._expandableCaret_1h6pf_18 {
   margin-left: -8px;
   margin-right: 4px;
   width: 24px;
   flex-shrink: 0;
 }
 
-._expandCaret_1qx8z_25 {
+._expandableCaretButton_1h6pf_25 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin-left: -8px;
+  margin-right: 4px;
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+._expandableCaretButton_1h6pf_25:focus-visible {
+  outline: 2px solid #2066df;
+  outline-offset: 1px;
+}
+._expandableCaretButton_1h6pf_25:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+._expandCaret_1h6pf_48 {
   color: #2066df;
   cursor: pointer;
 }
 
-._collapseCaret_1qx8z_30 {
+._collapseCaret_1h6pf_53 {
   color: #75838a;
   cursor: pointer;
 }
 
-._value_1qx8z_35 {
+._value_1h6pf_58 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
 }
-._value_1qx8z_35._footer_1qx8z_40 {
+._value_1h6pf_58._footer_1h6pf_63 {
   color: #6a767c;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css5));
 var AutoGroupCell_default = {
-  "autoGroupCell": "_autoGroupCell_1qx8z_1",
-  "indent": "_indent_1qx8z_6",
-  "innermostLastIndent": "_innermostLastIndent_1qx8z_14",
-  "expandableCaret": "_expandableCaret_1qx8z_18",
-  "expandCaret": "_expandCaret_1qx8z_25",
-  "collapseCaret": "_collapseCaret_1qx8z_30",
-  "value": "_value_1qx8z_35",
-  "footer": "_footer_1qx8z_40"
+  "autoGroupCell": "_autoGroupCell_1h6pf_1",
+  "indent": "_indent_1h6pf_6",
+  "innermostLastIndent": "_innermostLastIndent_1h6pf_14",
+  "expandableCaret": "_expandableCaret_1h6pf_18",
+  "expandableCaretButton": "_expandableCaretButton_1h6pf_25",
+  "expandCaret": "_expandCaret_1h6pf_48",
+  "collapseCaret": "_collapseCaret_1h6pf_53",
+  "value": "_value_1h6pf_58",
+  "footer": "_footer_1h6pf_63"
 };
 
 // src/utils/rowSelectionHelpers.ts
@@ -55495,6 +55509,7 @@ var LevelIndents = (props) => {
 };
 function GroupCaret(props) {
   const mounted = React80.useRef(false);
+  const buttonRef = React80.useRef(null);
   const [expanded, setExpanded] = useState(props.node.expanded);
   const ExpandableCaret = expanded ? CaretDown : CaretRight;
   const I18n = useI18nContext();
@@ -55505,6 +55520,16 @@ function GroupCaret(props) {
       }, 0);
     }
   }
+  const handleToggle = () => {
+    props.api.setRowNodeExpanded(props.node, !expanded);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      handleToggle();
+    }
+  };
   useEffect(() => {
     mounted.current = true;
     props.api.addEventListener("rowGroupOpened", handleRowGroupToggle);
@@ -55517,20 +55542,45 @@ function GroupCaret(props) {
       );
     };
   }, []);
+  useEffect(() => {
+    if (!props.node.isExpandable()) return;
+    const cell2 = buttonRef.current?.closest(".ag-cell");
+    if (!cell2) return;
+    const handleCellKeyDown = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      if (!event.isTrusted) return;
+      const target = event.target;
+      if (target.closest("button") || target.closest("input")) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      buttonRef.current?.click();
+    };
+    cell2.addEventListener("keydown", handleCellKeyDown, { capture: true });
+    return () => {
+      cell2.removeEventListener("keydown", handleCellKeyDown, { capture: true });
+    };
+  }, []);
+  if (!props.node.isExpandable()) {
+    return /* @__PURE__ */ React80.createElement("div", { className: AutoGroupCell_default.expandableCaret });
+  }
   return /* @__PURE__ */ React80.createElement(
-    Box,
+    "button",
     {
+      type: "button",
+      ref: buttonRef,
+      "aria-expanded": expanded,
       "aria-label": I18n.t(
         `dataTable.groupCell.${expanded ? "collapse" : "expand"}`
       ),
-      className: AutoGroupCell_default.expandableCaret,
-      role: "button"
+      className: AutoGroupCell_default.expandableCaretButton,
+      onClick: handleToggle,
+      onKeyDown: handleKeyDown,
+      "data-qa": "group-expand-collapse"
     },
-    props.node.isExpandable() && /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React80.createElement(
       ExpandableCaret,
       {
-        className: expanded ? AutoGroupCell_default.collapseCaret : AutoGroupCell_default.expandCaret,
-        onClick: () => props.api.setRowNodeExpanded(props.node, !expanded)
+        className: expanded ? AutoGroupCell_default.collapseCaret : AutoGroupCell_default.expandCaret
       }
     )
   );
@@ -56387,10 +56437,15 @@ var css7 = `.data-table-container .ag-header-cell .data-table-header-menu {
   align-items: center;
   justify-content: center;
   background-color: #e3e6e8;
+  border: none;
   border-radius: 2px;
   cursor: pointer;
   margin-right: 8px;
 }
+.data-table-container .ag-header-cell .expand-button:focus-visible {
+  outline: 2px solid #2066df;
+  outline-offset: 1px;
+}
 .data-table-container .ag-header-group-cell-with-group .ag-header-cell-comp-wrapper {
   width: 100%;
   overflow: hidden;
@@ -56403,10 +56458,15 @@ var css7 = `.data-table-container .ag-header-cell .data-table-header-menu {
   align-items: center;
   justify-content: center;
   background-color: #e3e6e8;
+  border: none;
   border-radius: 2px;
   cursor: pointer;
   margin-left: auto;
 }
+.data-table-container .ag-header-group-cell-with-group .expand-button:focus-visible {
+  outline: 2px solid #2066df;
+  outline-offset: 1px;
+}
 .data-table-container .auto-column-expand-tooltip-content {
   width: 96px;
 }
@@ -56554,6 +56614,7 @@ var GenericHeaderRenderer = (props) => {
     I18n
   );
   const headerCellRef = useRef(null);
+  const expandButtonRef = useRef(null);
   const menuButtonRef = useRef(null);
   const headerCheckboxSelection = colDef.headerCheckboxSelection;
   const headerCheckboxSelectionEnabled = typeof headerCheckboxSelection === "function" ? headerCheckboxSelection({
@@ -56704,6 +56765,28 @@ var GenericHeaderRenderer = (props) => {
     );
   }
   React80.useEffect(updateExpandedState);
+  React80.useEffect(() => {
+    if (!isExpandable) return;
+    const headerCell = headerCellRef.current?.closest(".ag-header-cell");
+    if (!headerCell) return;
+    const handleExpandKeyDown = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      if (!event.isTrusted) return;
+      const target = event.target;
+      if (target.closest("button") || target.closest("input")) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      expandButtonRef.current?.click();
+    };
+    headerCell.addEventListener("keydown", handleExpandKeyDown, {
+      capture: true
+    });
+    return () => {
+      headerCell.removeEventListener("keydown", handleExpandKeyDown, {
+        capture: true
+      });
+    };
+  }, [isExpandable]);
   const [expansionVariant, setExpansionVariant] = React80.useState("closed");
   React80.useEffect(() => {
     const onExpandAllChange = (event) => {
@@ -56981,12 +57064,21 @@ var GenericHeaderRenderer = (props) => {
           overlay: /* @__PURE__ */ React80.createElement(Tooltip.Content, { className: "auto-column-expand-tooltip-content" }, tooltipText[expansionVariant])
         },
         /* @__PURE__ */ React80.createElement(
-          "div",
+          "button",
           {
+            type: "button",
+            ref: expandButtonRef,
+            "aria-expanded": expansionVariant !== "closed",
             "aria-label": tooltipText[expansionVariant],
             className: "expand-button",
             onClick: onExpandToggle,
-            role: "button",
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onExpandToggle(e);
+              }
+            },
             "data-qa": "expand-or-collapse-all-button"
           },
           /* @__PURE__ */ React80.createElement(ExpansionVariantIcon, { size: "sm" })
@@ -104542,11 +104634,10 @@ var ConfigurationColumns = React80.forwardRef(
         return columnDefs;
       }
       const columnDefinitionsMappedToDefs = columnDefinitions.map(
-        (colDef) => transformToColDef(
-          colDef,
+        (colDef) => transformToColDef(colDef, {
           enableGroupEditAndValidation,
           enableDynamicRowHeight
-        )
+        })
       );
       return toGroupedCols(columnDefinitionsMappedToDefs);
     });
@@ -104845,8 +104936,10 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
           autoGroupColumnDef: getDecoratedAutoGroupColDef(
             detailRowConfig.autoGroupColumnDefinition,
-            enableGroupEditAndValidation,
-            enableDynamicRowHeight,
+            {
+              enableGroupEditAndValidation,
+              enableDynamicRowHeight
+            },
             isRowSelectable,
             false,
             detailRowConfig.groupsAlwaysExpanded ?? false,
@@ -104858,11 +104951,10 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           },
           columnDefs: toGroupedCols(
             detailRowConfig.columnDefinitions.map(
-              (colDef) => transformToColDef(
-                colDef,
+              (colDef) => transformToColDef(colDef, {
                 enableGroupEditAndValidation,
-                colDef.autoHeight ?? enableDynamicRowHeight
-              )
+                enableDynamicRowHeight: colDef.autoHeight ?? enableDynamicRowHeight
+              })
             )
           ),
           groupsAlwaysExpanded: detailRowConfig.groupsAlwaysExpanded ?? false,
@@ -109995,11 +110087,16 @@ function getServerSideDatasource(onServerSideDataRequestCallbackRef, onEmptyResp
   };
 }
 var minimumColumnWidth = 140;
+function resolveGroupIncludeFooter(props, onSSDR) {
+  if (props.enableGroupHeaderEdit) return false;
+  if (!onSSDR && props.groupIncludeFooter === void 0) return true;
+  return props.groupIncludeFooter;
+}
 function useComputeAgGridProps(props) {
   const internalTableContext = useInternalTableContext();
   const onSSDR = internalTableContext.onServerSideDataRequest;
   return {
-    groupIncludeFooter: !onSSDR && props.groupIncludeFooter === void 0 ? true : props.groupIncludeFooter,
+    groupIncludeFooter: resolveGroupIncludeFooter(props, !!onSSDR),
     rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
     rowModelType: onSSDR ? "serverSide" : void 0,
     groupSelectsChildren: (
@@ -110072,11 +110169,11 @@ var Table = (props) => {
   });
   const decoratedColDefs = React80.useMemo(
     () => internalTableContext.columnDefinitions?.map((colDef) => {
-      const newColDef = transformToColDef(
-        colDef,
-        internalTableContext.enableGroupEditAndValidation,
-        internalTableContext.enableDynamicRowHeight
-      );
+      const newColDef = transformToColDef(colDef, {
+        enableGroupEditAndValidation: internalTableContext.enableGroupEditAndValidation,
+        enableDynamicRowHeight: internalTableContext.enableDynamicRowHeight,
+        enableGroupHeaderEdit: props.enableGroupHeaderEdit
+      });
       return {
         ...newColDef,
         editable: overrideEditable(colDef.editable)
@@ -110362,8 +110459,10 @@ var Table = (props) => {
   const decoratedAutoGroupColDef = React80.useMemo(
     () => getDecoratedAutoGroupColDef(
       props?.autoGroupColumnDefinition,
-      internalTableContext.enableGroupEditAndValidation,
-      internalTableContext.enableDynamicRowHeight,
+      {
+        enableGroupEditAndValidation: internalTableContext.enableGroupEditAndValidation,
+        enableDynamicRowHeight: internalTableContext.enableDynamicRowHeight
+      },
       isRowSelectable,
       props.siblingGroupsRowSelectionDisabled,
       props.groupsAlwaysExpanded ?? false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.46.1",
+  "version": "14.46.2",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "author": "Procore Technologies",
   "homepage": "https://github.com/procore/core/tree/main/packages/data-table",
@@ -77,7 +77,7 @@
     "@procore/error-pages": "^0.2.3",
     "@procore/labs-datetime-select": "^0.2.2",
     "@procore/labs-group-by-select": "4.1.0",
-    "@procore/toast-alert": "^5.1.2",
+    "@procore/toast-alert": "^5.1.3",
     "@procore/web-sdk-storage": "^0.1.0",
     "classnames": "2.5.1",
     "date-fns": "2.29.1",
@@ -108,7 +108,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "^12.17.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.47.1",
+    "@procore/core-react": "^12.48.2",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",
@@ -122,8 +122,8 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "13.1.5",
-    "@types/lodash.debounce": "4.0.7",
-    "@types/lodash.isequal": "4.5.0",
+    "@types/lodash.debounce": "4.0.9",
+    "@types/lodash.isequal": "4.5.8",
     "@types/ramda": "0.28.23",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",