@procore/data-table 14.46.1 → 14.46.2

package/dist/legacy/index.js

@@ -54325,7 +54325,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"
         })
@@ -54823,26 +54823,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,
@@ -54885,7 +54878,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,
@@ -55228,12 +55222,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,
@@ -55244,12 +55234,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;
@@ -55257,45 +55247,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
@@ -55560,6 +55574,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();
@@ -55570,6 +55585,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);
@@ -55582,20 +55607,47 @@ function GroupCaret(props) {
       );
     };
   }, []);
+  useEffect(() => {
+    var _a;
+    if (!props.node.isExpandable()) return;
+    const cell2 = (_a = buttonRef.current) == null ? void 0 : _a.closest(".ag-cell");
+    if (!cell2) return;
+    const handleCellKeyDown = (event) => {
+      var _a2;
+      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();
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.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
       }
     )
   );
@@ -56465,10 +56517,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;
@@ -56481,10 +56538,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;
 }
@@ -56634,6 +56696,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({
@@ -56786,6 +56849,30 @@ var GenericHeaderRenderer = (props) => {
     );
   }
   React80.useEffect(updateExpandedState);
+  React80.useEffect(() => {
+    var _a2;
+    if (!isExpandable) return;
+    const headerCell = (_a2 = headerCellRef.current) == null ? void 0 : _a2.closest(".ag-header-cell");
+    if (!headerCell) return;
+    const handleExpandKeyDown = (event) => {
+      var _a3;
+      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();
+      (_a3 = expandButtonRef.current) == null ? void 0 : _a3.click();
+    };
+    headerCell.addEventListener("keydown", handleExpandKeyDown, {
+      capture: true
+    });
+    return () => {
+      headerCell.removeEventListener("keydown", handleExpandKeyDown, {
+        capture: true
+      });
+    };
+  }, [isExpandable]);
   const [expansionVariant, setExpansionVariant] = React80.useState("closed");
   React80.useEffect(() => {
     var _a2;
@@ -57070,12 +57157,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" })
@@ -104671,11 +104767,10 @@ var ConfigurationColumns = React80.forwardRef(
         return columnDefs;
       }
       const columnDefinitionsMappedToDefs = columnDefinitions.map(
-        (colDef) => transformToColDef(
-          colDef,
+        (colDef) => transformToColDef(colDef, {
           enableGroupEditAndValidation,
           enableDynamicRowHeight
-        )
+        })
       );
       return toGroupedCols(columnDefinitionsMappedToDefs);
     });
@@ -104983,8 +105078,10 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
           autoGroupColumnDef: getDecoratedAutoGroupColDef(
             detailRowConfig.autoGroupColumnDefinition,
-            enableGroupEditAndValidation,
-            enableDynamicRowHeight,
+            {
+              enableGroupEditAndValidation,
+              enableDynamicRowHeight
+            },
             isRowSelectable,
             false,
             detailRowConfig.groupsAlwaysExpanded ?? false,
@@ -104996,11 +105093,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,
@@ -110155,11 +110251,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: (
@@ -110235,11 +110336,11 @@ var Table = (props) => {
     () => {
       var _a2;
       return (_a2 = internalTableContext.columnDefinitions) == null ? void 0 : _a2.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)
@@ -110541,8 +110642,10 @@ var Table = (props) => {
   const decoratedAutoGroupColDef = React80.useMemo(
     () => getDecoratedAutoGroupColDef(
       props == null ? void 0 : props.autoGroupColumnDefinition,
-      internalTableContext.enableGroupEditAndValidation,
-      internalTableContext.enableDynamicRowHeight,
+      {
+        enableGroupEditAndValidation: internalTableContext.enableGroupEditAndValidation,
+        enableDynamicRowHeight: internalTableContext.enableDynamicRowHeight
+      },
       isRowSelectable,
       props.siblingGroupsRowSelectionDisabled,
       props.groupsAlwaysExpanded ?? false,