@procore/data-table 14.46.2 → 14.46.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 14.46.4
+
+### Patch Changes
+
+- d5bab3a: Add `headerClass` to `ColumnDefinition` as a typed prop (string, string[], or function). Previously worked at runtime via `...rest` passthrough but was absent from the type.
+
+## 14.46.3
+
+### Patch Changes
+
+- 05247ae: Fix inconsistent keyboard focus management across Filters, Configure, and Bulk Edit panels
+  - Move focus to the panel container on open and return focus to the trigger button on close
+  - Add `role="region"` and `aria-label` to panel containers for screen reader announcements
+  - Centralize focus logic in `useContextPanel` hook, removing scattered per-panel implementations
+- Updated dependencies [05247ae]
+  - @procore/toast-alert@5.2.0
+
 ## 14.46.2
 
 ### Patch Changes

package/dist/legacy/index.cjs

@@ -1402,7 +1402,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;
@@ -5403,7 +5403,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);
   }
@@ -7935,7 +7935,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;
@@ -7944,7 +7944,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;
@@ -7952,50 +7957,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
@@ -54783,6 +54788,7 @@ function transformToColumnDefinition(colDef = emptyObject) {
     getStringFormattedValue,
     columnHeaderParams: colDef.headerComponentParams,
     headerName: colDef.headerName,
+    headerClass: colDef.headerClass,
     hidden: colDef.hide,
     filterRenderer: colDef.filterRenderer,
     lockVisible: colDef.lockVisible,
@@ -58025,6 +58031,7 @@ var InternalTableContext = React80__default.default.createContext({
     hide: () => {
     },
     isVisible: false,
+    panelRef: React80__default.default.createRef(),
     show: () => {
     }
   },
@@ -59829,14 +59836,16 @@ var useRowSelectionState = () => {
 var BulkEditActionButton = (props) => {
   const { contextPanel } = useInternalTableContext();
   const i18n = coreReact.useI18nContext();
+  const buttonRef = React80__default.default.useRef(null);
   const editActionLabel = props.actionText ?? i18n.t("dataTable.bulkActions.editValues");
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Button,
     {
+      ref: buttonRef,
       "aria-label": i18n.t("dataTable.bulkActions.bulkEdit"),
       "data-qa": "bulkEditIcon",
       icon: /* @__PURE__ */ React80__default.default.createElement(coreIcons.Pencil, null),
-      onClick: () => contextPanel.show("bulkEdit"),
+      onClick: () => contextPanel.show("bulkEdit", buttonRef.current ?? void 0),
       variant: "tertiary"
     },
     props.showLabel && editActionLabel
@@ -104481,11 +104490,6 @@ var BulkEditPanel = ({}) => {
   const { contextPanel, suppressBulkEditToasts } = useInternalTableContext();
   const I18n = coreReact.useI18nContext();
   const bulkEditRef = React80__default.default.useRef(null);
-  const bodyRef = React80__default.default.useRef(null);
-  React80.useEffect(() => {
-    var _a;
-    (_a = bodyRef.current) == null ? void 0 : _a.focus();
-  }, []);
   return /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel, null, /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Panel.Header,
     {
@@ -104496,7 +104500,7 @@ var BulkEditPanel = ({}) => {
       }
     },
     /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Title, null, I18n.t("dataTable.bulkActions.editValues"))
-  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, { ref: bodyRef }, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
+  ), /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Body, null, /* @__PURE__ */ React80__default.default.createElement(coreReact.Panel.Section, null, /* @__PURE__ */ React80__default.default.createElement(
     BulkEdit,
     {
       ref: bulkEditRef,
@@ -104942,18 +104946,34 @@ var ConfigurationPanel = ({
 function useContextPanel() {
   const [content, setContent] = React80.useState();
   const visibility = coreReact.useVisibility({ afterHide: () => setContent(void 0) });
-  const show = React80.useCallback((panelContent) => {
-    setContent(panelContent);
-    visibility.show();
-  }, []);
+  const triggerRef = React80.useRef(null);
+  const panelRef = React80.useRef(null);
+  const show = React80.useCallback(
+    (panelContent, trigger) => {
+      triggerRef.current = trigger ?? null;
+      setContent(panelContent);
+      visibility.show();
+    },
+    []
+  );
   const hide = React80.useCallback(() => {
+    const trigger = triggerRef.current;
     setContent(void 0);
     visibility.hide();
+    trigger == null ? void 0 : trigger.focus();
+    triggerRef.current = null;
   }, []);
+  React80.useEffect(() => {
+    var _a;
+    if (content) {
+      (_a = panelRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [content]);
   return {
     content,
     hide,
     isVisible: visibility.isVisible,
+    panelRef,
     show
   };
 }
@@ -111273,9 +111293,26 @@ var ContextPanel = ({
   ...props
 }) => {
   const { contextPanel } = useInternalTableContext();
+  const I18n = coreReact.useI18nContext();
+  const cardRef = React80__default.default.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__default.default.useLayoutEffect(() => {
+    if (contextPanel.content && contextPanel.content !== "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Card,
     {
+      ref: cardRef,
+      tabIndex: -1,
+      role: "region",
+      "aria-label": ariaLabel,
       className: cx19("contextPanel", className, {
         "contextPanel--hidden": !contextPanel.isVisible || contextPanel.content === "filters"
       }),
@@ -111548,19 +111585,27 @@ var BaseFiltersPanel = ({
   onClearAllFilters = noop5,
   ...props
 }) => {
-  const ref = React80__default.default.useRef(null);
+  const cardRef = React80__default.default.useRef(null);
   const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
   const I18n = coreReact.useI18nContext();
   const hidden = !contextPanel.isVisible || contextPanel.content !== "filters";
   React80__default.default.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.inert = hidden;
+    if (contextPanel.content === "filters") {
+      contextPanel.panelRef.current = cardRef.current;
+    }
+  }, [contextPanel.content, contextPanel.panelRef]);
+  React80__default.default.useLayoutEffect(() => {
+    if (cardRef.current) {
+      cardRef.current.inert = hidden;
     }
   }, [hidden]);
   return /* @__PURE__ */ React80__default.default.createElement(
     coreReact.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
@@ -111615,6 +111660,7 @@ var ConfigPanelButton = () => {
   const { contextPanel } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const I18n = coreReact.useI18nContext();
+  const buttonRef = React80__default.default.useRef(null);
   return /* @__PURE__ */ React80__default.default.createElement(
     EmptyResultsControlTooltip,
     {
@@ -111624,12 +111670,13 @@ var ConfigPanelButton = () => {
     /* @__PURE__ */ React80__default.default.createElement(
       coreReact.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__default.default.createElement(
@@ -112806,27 +112853,12 @@ var SingleSelectQuickFilterRenderer = (props) => {
   return /* @__PURE__ */ React80__default.default.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 = coreReact.useI18nContext();
-  const { contextPanel, filtersBodyId, filtersPanelId } = useInternalTableContext();
+  const { contextPanel, filtersPanelId } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const buttonRef = React80__default.default.useRef(null);
   const isFiltersOpen = contextPanel.content === "filters";
-  const isMounted = React80__default.default.useRef(false);
-  React80__default.default.useEffect(() => {
-    var _a, _b;
-    if (!isMounted.current) {
-      isMounted.current = true;
-      return;
-    }
-    if (isFiltersOpen) {
-      const panel = filtersBodyId ? document.getElementById(filtersBodyId) : null;
-      (_a = panel == null ? void 0 : panel.querySelector(FOCUSABLE_SELECTOR2)) == null ? void 0 : _a.focus();
-    } else {
-      (_b = buttonRef.current) == null ? void 0 : _b.focus();
-    }
-  }, [isFiltersOpen, filtersBodyId]);
   if (!hasDefinedFilters) {
     return null;
   }
@@ -112847,7 +112879,7 @@ var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
         "aria-controls": filtersPanelId,
         onClick: () => {
           if (!isFiltersOpen) {
-            contextPanel.show("filters");
+            contextPanel.show("filters", buttonRef.current ?? void 0);
           } else {
             contextPanel.hide();
           }

package/dist/legacy/index.d.cts

@@ -502,6 +502,7 @@ interface ColumnDefinition<TValue = any, TRenderer = React.FC<ICellRendererParam
     getStringFormattedValue?: (value: TValue) => string;
     getFilterKeyCreator?: ColDef['keyCreator'];
     headerName?: string;
+    headerClass?: ColDef['headerClass'];
     columnHeaderParams?: {
         menuOptions?: MenuDropdownOption[];
         headerNode?: (props: {
@@ -724,7 +725,8 @@ interface ContextPanelApi {
     content?: ContextPanelContent;
     hide: () => void;
     isVisible: boolean;
-    show: (content: ContextPanelContent) => void;
+    panelRef: React.RefObject<HTMLElement>;
+    show: (content: ContextPanelContent, trigger?: HTMLElement) => void;
 }
 interface CustomFooterConfig {
     height?: RowSize;

package/dist/legacy/index.d.ts

@@ -502,6 +502,7 @@ interface ColumnDefinition<TValue = any, TRenderer = React.FC<ICellRendererParam
     getStringFormattedValue?: (value: TValue) => string;
     getFilterKeyCreator?: ColDef['keyCreator'];
     headerName?: string;
+    headerClass?: ColDef['headerClass'];
     columnHeaderParams?: {
         menuOptions?: MenuDropdownOption[];
         headerNode?: (props: {
@@ -724,7 +725,8 @@ interface ContextPanelApi {
     content?: ContextPanelContent;
     hide: () => void;
     isVisible: boolean;
-    show: (content: ContextPanelContent) => void;
+    panelRef: React.RefObject<HTMLElement>;
+    show: (content: ContextPanelContent, trigger?: HTMLElement) => void;
 }
 interface CustomFooterConfig {
     height?: RowSize;