@procore/data-table 14.46.1 → 14.46.3

package/dist/modern/index.js

@@ -1387,7 +1387,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_1ern5_342 {
+@keyframes _ag-shake-left-to-right_pphrk_342 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5388,7 +5388,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_1ern5_1 {
+@keyframes _spin_pphrk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7920,7 +7920,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_1ern5_7159 {
+div._contextPanel_pphrk_7159 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7929,7 +7929,12 @@ div._contextPanel_1ern5_7159 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_1ern5_7168 {
+div._contextPanel_pphrk_7159:focus {
+  border-color: #2066df;
+  box-shadow: inset 0 0 1px 0 #2066df;
+  outline: none;
+}
+div._contextPanel--hidden_pphrk_7173 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7937,50 +7942,50 @@ div._contextPanel--hidden_1ern5_7168 {
   width: 0px;
 }
 
-._contextPanelWrapper_1ern5_7176 {
+._contextPanelWrapper_pphrk_7181 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_1ern5_7181 {
+._contextPanelBody_pphrk_7186 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_1ern5_7185 {
+._contextPanel-stickyHeader_pphrk_7190 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_1ern5_7192 {
+._filters-list_pphrk_7197 {
   padding: 0;
   margin: 0;
 }
-._filters-list_1ern5_7192 ol {
+._filters-list_pphrk_7197 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_1ern5_7201 {
+._col-drag-column-icon_pphrk_7206 {
   color: #6a767c;
 }
 
-._tabular-nums_1ern5_7205 {
+._tabular-nums_pphrk_7210 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_1ern5_7159",
-  "contextPanel--hidden": "_contextPanel--hidden_1ern5_7168",
-  "contextPanelWrapper": "_contextPanelWrapper_1ern5_7176",
-  "contextPanelBody": "_contextPanelBody_1ern5_7181",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_1ern5_7185",
-  "filters-list": "_filters-list_1ern5_7192",
-  "col-drag-column-icon": "_col-drag-column-icon_1ern5_7201",
-  "tabular-nums": "_tabular-nums_1ern5_7205",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_1ern5_342",
-  "spin": "_spin_1ern5_1"
+  "contextPanel": "_contextPanel_pphrk_7159",
+  "contextPanel--hidden": "_contextPanel--hidden_pphrk_7173",
+  "contextPanelWrapper": "_contextPanelWrapper_pphrk_7181",
+  "contextPanelBody": "_contextPanelBody_pphrk_7186",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_pphrk_7190",
+  "filters-list": "_filters-list_pphrk_7197",
+  "col-drag-column-icon": "_col-drag-column-icon_pphrk_7206",
+  "tabular-nums": "_tabular-nums_pphrk_7210",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_pphrk_342",
+  "spin": "_spin_pphrk_1"
 };
 
 // src/CellRenderers/BooleanCell.tsx
@@ -54285,7 +54290,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 +54777,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 +54832,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 +55170,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 +55182,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 +55195,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 +55514,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 +55525,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 +55547,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 +56442,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 +56463,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 +56619,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 +56770,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 +57069,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" })
@@ -57811,6 +57908,7 @@ var InternalTableContext = React80.createContext({
     hide: () => {
     },
     isVisible: false,
+    panelRef: React80.createRef(),
     show: () => {
     }
   },
@@ -59614,14 +59712,16 @@ var useRowSelectionState = () => {
 var BulkEditActionButton = (props) => {
   const { contextPanel } = useInternalTableContext();
   const i18n = useI18nContext();
+  const buttonRef = React80.useRef(null);
   const editActionLabel = props.actionText ?? i18n.t("dataTable.bulkActions.editValues");
   return /* @__PURE__ */ React80.createElement(
     Button,
     {
+      ref: buttonRef,
       "aria-label": i18n.t("dataTable.bulkActions.bulkEdit"),
       "data-qa": "bulkEditIcon",
       icon: /* @__PURE__ */ React80.createElement(Pencil, null),
-      onClick: () => contextPanel.show("bulkEdit"),
+      onClick: () => contextPanel.show("bulkEdit", buttonRef.current ?? void 0),
       variant: "tertiary"
     },
     props.showLabel && editActionLabel
@@ -104248,10 +104348,6 @@ var BulkEditPanel = ({}) => {
   const { contextPanel, suppressBulkEditToasts } = useInternalTableContext();
   const I18n = useI18nContext();
   const bulkEditRef = React80.useRef(null);
-  const bodyRef = React80.useRef(null);
-  useEffect(() => {
-    bodyRef.current?.focus();
-  }, []);
   return /* @__PURE__ */ React80.createElement(Panel, null, /* @__PURE__ */ React80.createElement(
     Panel.Header,
     {
@@ -104261,7 +104357,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80.createElement(Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80.createElement(Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
+  ), /* @__PURE__ */ React80.createElement(Panel.Body, null, /* @__PURE__ */ React80.createElement(Panel.Section, null, /* @__PURE__ */ React80.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -104542,11 +104638,10 @@ var ConfigurationColumns = React80.forwardRef(
         return columnDefs;
       }
       const columnDefinitionsMappedToDefs = columnDefinitions.map(
-        (colDef) => transformToColDef(
-          colDef,
+        (colDef) => transformToColDef(colDef, {
           enableGroupEditAndValidation,
           enableDynamicRowHeight
-        )
+        })
       );
       return toGroupedCols(columnDefinitionsMappedToDefs);
     });
@@ -104697,18 +104792,33 @@ var ConfigurationPanel = ({
 function useContextPanel() {
   const [content, setContent] = useState();
   const visibility = useVisibility({ afterHide: () => setContent(void 0) });
-  const show = useCallback((panelContent) => {
-    setContent(panelContent);
-    visibility.show();
-  }, []);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const show = useCallback(
+    (panelContent, trigger) => {
+      triggerRef.current = trigger ?? null;
+      setContent(panelContent);
+      visibility.show();
+    },
+    []
+  );
   const hide = useCallback(() => {
+    const trigger = triggerRef.current;
     setContent(void 0);
     visibility.hide();
+    trigger?.focus();
+    triggerRef.current = null;
   }, []);
+  useEffect(() => {
+    if (content) {
+      panelRef.current?.focus();
+    }
+  }, [content]);
   return {
     content,
     hide,
     isVisible: visibility.isVisible,
+    panelRef,
     show
   };
 }
@@ -104845,8 +104955,10 @@ var buildDetailRowsConfig_ = (detailRowConfig, {
           alwaysAggregateAtRootLevel: !isServerSideRowModel,
           autoGroupColumnDef: getDecoratedAutoGroupColDef(
             detailRowConfig.autoGroupColumnDefinition,
-            enableGroupEditAndValidation,
-            enableDynamicRowHeight,
+            {
+              enableGroupEditAndValidation,
+              enableDynamicRowHeight
+            },
             isRowSelectable,
             false,
             detailRowConfig.groupsAlwaysExpanded ?? false,
@@ -104858,11 +104970,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 +110106,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 +110188,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 +110478,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,
@@ -110964,9 +111082,26 @@ var ContextPanel = ({
   ...props
 }) => {
   const { contextPanel } = useInternalTableContext();
+  const I18n = useI18nContext();
+  const cardRef = React80.useRef(null);
+  const panelLabelKeys = {
+    configuration: "dataTable.tableSettings.tableSettings",
+    bulkEdit: "dataTable.bulkActions.editValues"
+  };
+  const panelLabel = contextPanel.content ? panelLabelKeys[contextPanel.content] : void 0;
+  const ariaLabel = panelLabel ? I18n.t(panelLabel) : void 0;
+  React80.useLayoutEffect(() => {
+    if (contextPanel.content && contextPanel.content !== "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
   return /* @__PURE__ */ React80.createElement(
     Card,
     {
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": ariaLabel,
       className: cx19("contextPanel", className, {
         "contextPanel--hidden": !contextPanel.isVisible || contextPanel.content === "filters"
       }),
@@ -111238,19 +111373,27 @@ var BaseFiltersPanel = ({
   onClearAllFilters = noop5,
   ...props
 }) => {
-  const ref = React80.useRef(null);
+  const cardRef = React80.useRef(null);
   const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
   const I18n = useI18nContext();
   const hidden = !contextPanel.isVisible || contextPanel.content !== "filters";
   React80.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.inert = hidden;
+    if (contextPanel.content === "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
+  React80.useLayoutEffect(() => {
+    if (cardRef.current) {
+      cardRef.current.inert = hidden;
     }
   }, [hidden]);
   return /* @__PURE__ */ React80.createElement(
     Card,
     {
-      ref,
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": I18n.t("dataTable.filters.filters"),
       style: { maxHeight: "100vh" },
       className: cx20("contextPanel", className, {
         "contextPanel--hidden": hidden
@@ -111304,6 +111447,7 @@ var ConfigPanelButton = () => {
   const { contextPanel } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const I18n = useI18nContext();
+  const buttonRef = React80.useRef(null);
   return /* @__PURE__ */ React80.createElement(
     EmptyResultsControlTooltip,
     {
@@ -111313,12 +111457,13 @@ var ConfigPanelButton = () => {
     /* @__PURE__ */ React80.createElement(
       ToggleButton,
       {
+        ref: buttonRef,
         disabled: hasNoContent,
         onClick: () => {
           if (contextPanel.content === "configuration") {
             contextPanel.hide();
           } else {
-            contextPanel.show("configuration");
+            contextPanel.show("configuration", buttonRef.current ?? void 0);
           }
         },
         icon: /* @__PURE__ */ React80.createElement(
@@ -112471,26 +112616,12 @@ var SingleSelectQuickFilterRenderer = (props) => {
   return /* @__PURE__ */ React80.createElement(ClientSideSingleSelectQuickFilter, { ...props });
 };
 var SingleSelectQuickFilterRenderer_default = SingleSelectQuickFilterRenderer;
-var FOCUSABLE_SELECTOR2 = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
   const I18n = useI18nContext();
-  const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
+  const { contextPanel, filtersPanelId } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const buttonRef = React80.useRef(null);
   const isFiltersOpen = contextPanel.content === "filters";
-  const isMounted = React80.useRef(false);
-  React80.useEffect(() => {
-    if (!isMounted.current) {
-      isMounted.current = true;
-      return;
-    }
-    if (isFiltersOpen) {
-      const panel = filtersBodyId ? document.getElementById(filtersBodyId) : null;
-      panel?.querySelector(FOCUSABLE_SELECTOR2)?.focus();
-    } else {
-      buttonRef.current?.focus();
-    }
-  }, [isFiltersOpen, filtersBodyId]);
   if (!hasDefinedFilters) {
     return null;
   }
@@ -112511,7 +112642,7 @@ var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
         "aria-controls": filtersPanelId,
         onClick: () => {
           if (!isFiltersOpen) {
-            contextPanel.show("filters");
+            contextPanel.show("filters", buttonRef.current ?? void 0);
           } else {
             contextPanel.hide();
           }