@procore/data-table 14.46.2 → 14.46.4

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
@@ -54720,6 +54725,7 @@ function transformToColumnDefinition(colDef = emptyObject) {
     getStringFormattedValue,
     columnHeaderParams: colDef.headerComponentParams,
     headerName: colDef.headerName,
+    headerClass: colDef.headerClass,
     hidden: colDef.hide,
     filterRenderer: colDef.filterRenderer,
     lockVisible: colDef.lockVisible,
@@ -57903,6 +57909,7 @@ var InternalTableContext = React80.createContext({
     hide: () => {
     },
     isVisible: false,
+    panelRef: React80.createRef(),
     show: () => {
     }
   },
@@ -59706,14 +59713,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
@@ -104340,10 +104349,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,
     {
@@ -104353,7 +104358,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,
@@ -104788,18 +104793,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
   };
 }
@@ -111063,9 +111083,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"
       }),
@@ -111337,19 +111374,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
@@ -111403,6 +111448,7 @@ var ConfigPanelButton = () => {
   const { contextPanel } = useInternalTableContext();
   const hasNoContent = useTableHasNoContent();
   const I18n = useI18nContext();
+  const buttonRef = React80.useRef(null);
   return /* @__PURE__ */ React80.createElement(
     EmptyResultsControlTooltip,
     {
@@ -111412,12 +111458,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(
@@ -112570,26 +112617,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;
   }
@@ -112610,7 +112643,7 @@ var FiltersPanelToggleButton = ({ hasDefinedFilters }) => {
         "aria-controls": filtersPanelId,
         onClick: () => {
           if (!isFiltersOpen) {
-            contextPanel.show("filters");
+            contextPanel.show("filters", buttonRef.current ?? void 0);
           } else {
             contextPanel.hide();
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.46.2",
+  "version": "14.46.4",
   "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.3",
+    "@procore/toast-alert": "^5.2.0",
     "@procore/web-sdk-storage": "^0.1.0",
     "classnames": "2.5.1",
     "date-fns": "2.29.1",
@@ -106,9 +106,9 @@
     "@dotenvx/dotenvx": "1.6.4",
     "@ngneat/falso": "6.4.0",
     "@procore/core-css": "10.17.0",
-    "@procore/core-icons": "^12.17.0",
+    "@procore/core-icons": "^12.18.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.48.2",
+    "@procore/core-react": "^12.49.1",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",
@@ -161,7 +161,7 @@
     "safe-json-stringify": "^1.2.0",
     "sass": "1.57.1",
     "sass-loader": "13.2.0",
-    "start-server-and-test": "2.1.5",
+    "start-server-and-test": "3.0.5",
     "storybook": "^9.1.17",
     "style-loader": "3.3.1",
     "styled-components": "6.1.18",