npm - @procore/data-table - Versions diffs - 14.38.0 → 14.39.1 - Mend

@procore/data-table 14.38.0 → 14.39.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,19 @@
 # Change Log
+## 14.39.1
+### Patch Changes
+- 5688b5d: Improve performance for rendering column group headers
+- Updated dependencies [f67398f]
+  - @procore/labs-datetime-select@0.2.0
+## 14.39.0
+### Minor Changes
+- 3052b62: Adds onExpandOrCollapseAll prop for tracking expand/collapse state
 ## 14.38.0
 ### Minor Changes

package/dist/legacy/index.cjs CHANGED Viewed

@@ -56596,9 +56596,10 @@ var GenericHeaderRenderer = (props) => {
   const {
     columnApi,
     tableRef,
+    onExpandOrCollapseAll,
     onServerSideDataRequest,
-    showExpandCollapseAllToggle,
-    onTableConfigChange
+    onTableConfigChange,
+    showExpandCollapseAllToggle
   } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React80__default.default.useState(props.column.getSort());
@@ -56789,9 +56790,11 @@ var GenericHeaderRenderer = (props) => {
           }
         });
         setExpansionVariant("tierOne");
+        onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(true);
       } else {
         props.api.collapseAll();
         setExpansionVariant("closed");
+        onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(false);
       }
       return;
     }
@@ -56806,10 +56809,13 @@ var GenericHeaderRenderer = (props) => {
         props.api
       );
       setExpansionVariant(hasMoreExpandableNodes ? "tierOne" : "all");
+      onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(true);
     } else if (expansionVariant === "tierOne") {
       props.api.expandAll();
+      onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(true);
     } else {
       props.api.collapseAll();
+      onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(false);
     }
   }
   const tooltipText = {
@@ -56986,7 +56992,8 @@ var GenericHeaderRenderer = (props) => {
             "aria-label": tooltipText[expansionVariant],
             className: "expand-button",
             onClick: onExpandToggle,
-            role: "button"
+            role: "button",
+            "data-qa": "expand-or-collapse-all-button"
           },
           /* @__PURE__ */ React80__default.default.createElement(ExpansionVariantIcon, { size: "sm" })
         )
@@ -57045,18 +57052,14 @@ var GenericHeaderRenderer = (props) => {
 // src/GenericHeader/GenericColumnGroupHeader.tsx
 function GenericColumnGroupHeader(props) {
   const I18n = coreReact.useI18nContext();
-  const { expanded: initialExpanded, expandable } = props.columnGroup.providedColumnGroup;
-  const [isExpanded, setIsExpanded] = React80__default.default.useState(initialExpanded);
-  React80__default.default.useEffect(() => {
-    props.setExpanded(isExpanded);
-  }, [isExpanded]);
+  const { expanded, expandable } = props.columnGroup.providedColumnGroup;
   if (!props.displayName) {
     return null;
   }
   const tooltipText = I18n.t(
-    `dataTable.columnGroupToggle.${isExpanded ? "collapse" : "expand"}`
+    `dataTable.columnGroupToggle.${expanded ? "collapse" : "expand"}`
   );
-  const ExpansionVariantIcon = isExpanded ? coreIcons.CaretsIn : coreIcons.CaretsOut;
+  const ExpansionVariantIcon = expanded ? coreIcons.CaretsIn : coreIcons.CaretsOut;
   return /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, /* @__PURE__ */ React80__default.default.createElement("div", { className: "ag-header-group-cell-label", role: "presentation" }, /* @__PURE__ */ React80__default.default.createElement("span", { className: "ag-header-group-text", role: "presentation" }, props.displayName)), expandable && /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Tooltip,
     {
@@ -57069,7 +57072,7 @@ function GenericColumnGroupHeader(props) {
       {
         "aria-label": tooltipText,
         className: "expand-button",
-        onClick: () => setIsExpanded((v) => !v)
+        onClick: () => props.setExpanded(!expanded)
       },
       /* @__PURE__ */ React80__default.default.createElement(ExpansionVariantIcon, { size: "sm" })
     )
@@ -57162,13 +57165,6 @@ function CustomLoader(params) {
   }
   return /* @__PURE__ */ React80__default.default.createElement(LevelIndents, { level: params.node.level, lastRowInGroup: false });
 }
-var DefaultFrameworkComponents = {
-  agColumnHeader: GenericHeaderRenderer,
-  agLoadingCellRenderer: CustomLoader,
-  agColumnGroupHeader: GenericColumnGroupHeader,
-  loadingOverlayRenderer: Spinner,
-  emptyStateRenderer: EmptyState
-};
 function getFrameworkComponents(tableProps) {
   const headerMenuConfig = {
     suppressResetColumnsOption: tableProps.suppressResetColumnsOption || false,
@@ -57182,6 +57178,13 @@ function getFrameworkComponents(tableProps) {
     tableProps.onSelectAll,
     tableProps.selectionSSREnabled
   );
+  const DefaultFrameworkComponents = {
+    agColumnHeader: GenericHeaderRenderer,
+    agLoadingCellRenderer: CustomLoader,
+    agColumnGroupHeader: GenericColumnGroupHeader,
+    loadingOverlayRenderer: Spinner,
+    emptyStateRenderer: EmptyState
+  };
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
@@ -57846,6 +57849,8 @@ var InternalTableContext = React80__default.default.createContext({
   gridApi: void 0,
   localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
+  onExpandOrCollapseAll: () => {
+  },
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
   },
@@ -108988,6 +108993,7 @@ var DataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   showExpandCollapseAllToggle,
@@ -109238,6 +109244,7 @@ var DataTable = ({
         gridApi,
         initialTableConfig,
         onBulkEditUpdate,
+        onExpandOrCollapseAll,
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
@@ -112316,6 +112323,7 @@ var ClientSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
@@ -112332,8 +112340,9 @@ var ClientSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onTableConfigChange,
       showExpandCollapseAllToggle: true,
       translations: translations2,
       localStoragePersistenceKey,
@@ -116725,6 +116734,7 @@ var ServerSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   enableCellTextSelection,
@@ -116743,9 +116753,10 @@ var ServerSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
-      onServerSideDataRequest,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onServerSideDataRequest,
+      onTableConfigChange,
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,

package/dist/legacy/index.d.cts CHANGED Viewed

@@ -1145,8 +1145,16 @@ interface DataTableProps {
     filterGroups?: FilterGroup[];
     getRowId?: (params: GetRowIdParams) => string;
     initialTableConfig?: DataTableConfig;
-    onTableConfigChange?: (config: DataTableConfig) => void;
+    /**
+     * Callback invoked when the row group expand/collapse state changes via
+     * the Expand/Collapse toggle button. Use this to track the table's
+     * expand/collapse state.
+     * @param expanded - `true` when groups are expanded at any level, `false`
+     * when all groups are collapsed.
+     */
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onServerSideDataRequest?: (params: ServerSideGetRowsParams) => Promise<SuccessParams | void> | void;
+    onTableConfigChange?: (config: DataTableConfig) => void;
     grandTotalsLabelRenderer?: React.FunctionComponent<GrandTotalsLabelRendererProps>;
     /**
      * Callback after bulk edit action is performed.
@@ -1374,6 +1382,7 @@ interface InternalTableContext {
     onServerSideDataRequest?: DataTableProps['onServerSideDataRequest'];
     updateServerSideDataSource: (params: UpdateServerSideDataSourceParams) => void;
     localStoragePersistenceKey?: string;
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onTableConfigChange: () => void;
     rowHeight: RowSize;
     rowSelectionRef?: React__default.MutableRefObject<RowSelectionRef>;
@@ -1454,7 +1463,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1491,7 +1500,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/legacy/index.d.ts CHANGED Viewed

@@ -1145,8 +1145,16 @@ interface DataTableProps {
     filterGroups?: FilterGroup[];
     getRowId?: (params: GetRowIdParams) => string;
     initialTableConfig?: DataTableConfig;
-    onTableConfigChange?: (config: DataTableConfig) => void;
+    /**
+     * Callback invoked when the row group expand/collapse state changes via
+     * the Expand/Collapse toggle button. Use this to track the table's
+     * expand/collapse state.
+     * @param expanded - `true` when groups are expanded at any level, `false`
+     * when all groups are collapsed.
+     */
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onServerSideDataRequest?: (params: ServerSideGetRowsParams) => Promise<SuccessParams | void> | void;
+    onTableConfigChange?: (config: DataTableConfig) => void;
     grandTotalsLabelRenderer?: React.FunctionComponent<GrandTotalsLabelRendererProps>;
     /**
      * Callback after bulk edit action is performed.
@@ -1374,6 +1382,7 @@ interface InternalTableContext {
     onServerSideDataRequest?: DataTableProps['onServerSideDataRequest'];
     updateServerSideDataSource: (params: UpdateServerSideDataSourceParams) => void;
     localStoragePersistenceKey?: string;
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onTableConfigChange: () => void;
     rowHeight: RowSize;
     rowSelectionRef?: React__default.MutableRefObject<RowSelectionRef>;
@@ -1454,7 +1463,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1491,7 +1500,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/legacy/index.js CHANGED Viewed

@@ -56583,9 +56583,10 @@ var GenericHeaderRenderer = (props) => {
   const {
     columnApi,
     tableRef,
+    onExpandOrCollapseAll,
     onServerSideDataRequest,
-    showExpandCollapseAllToggle,
-    onTableConfigChange
+    onTableConfigChange,
+    showExpandCollapseAllToggle
   } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React80.useState(props.column.getSort());
@@ -56776,9 +56777,11 @@ var GenericHeaderRenderer = (props) => {
           }
         });
         setExpansionVariant("tierOne");
+        onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(true);
       } else {
         props.api.collapseAll();
         setExpansionVariant("closed");
+        onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(false);
       }
       return;
     }
@@ -56793,10 +56796,13 @@ var GenericHeaderRenderer = (props) => {
         props.api
       );
       setExpansionVariant(hasMoreExpandableNodes ? "tierOne" : "all");
+      onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(true);
     } else if (expansionVariant === "tierOne") {
       props.api.expandAll();
+      onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(true);
     } else {
       props.api.collapseAll();
+      onExpandOrCollapseAll == null ? void 0 : onExpandOrCollapseAll(false);
     }
   }
   const tooltipText = {
@@ -56973,7 +56979,8 @@ var GenericHeaderRenderer = (props) => {
             "aria-label": tooltipText[expansionVariant],
             className: "expand-button",
             onClick: onExpandToggle,
-            role: "button"
+            role: "button",
+            "data-qa": "expand-or-collapse-all-button"
           },
           /* @__PURE__ */ React80.createElement(ExpansionVariantIcon, { size: "sm" })
         )
@@ -57032,18 +57039,14 @@ var GenericHeaderRenderer = (props) => {
 // src/GenericHeader/GenericColumnGroupHeader.tsx
 function GenericColumnGroupHeader(props) {
   const I18n = useI18nContext();
-  const { expanded: initialExpanded, expandable } = props.columnGroup.providedColumnGroup;
-  const [isExpanded, setIsExpanded] = React80.useState(initialExpanded);
-  React80.useEffect(() => {
-    props.setExpanded(isExpanded);
-  }, [isExpanded]);
+  const { expanded, expandable } = props.columnGroup.providedColumnGroup;
   if (!props.displayName) {
     return null;
   }
   const tooltipText = I18n.t(
-    `dataTable.columnGroupToggle.${isExpanded ? "collapse" : "expand"}`
+    `dataTable.columnGroupToggle.${expanded ? "collapse" : "expand"}`
   );
-  const ExpansionVariantIcon = isExpanded ? CaretsIn : CaretsOut;
+  const ExpansionVariantIcon = expanded ? CaretsIn : CaretsOut;
   return /* @__PURE__ */ React80.createElement(React80.Fragment, null, /* @__PURE__ */ React80.createElement("div", { className: "ag-header-group-cell-label", role: "presentation" }, /* @__PURE__ */ React80.createElement("span", { className: "ag-header-group-text", role: "presentation" }, props.displayName)), expandable && /* @__PURE__ */ React80.createElement(
     Tooltip,
     {
@@ -57056,7 +57059,7 @@ function GenericColumnGroupHeader(props) {
       {
         "aria-label": tooltipText,
         className: "expand-button",
-        onClick: () => setIsExpanded((v) => !v)
+        onClick: () => props.setExpanded(!expanded)
       },
       /* @__PURE__ */ React80.createElement(ExpansionVariantIcon, { size: "sm" })
     )
@@ -57149,13 +57152,6 @@ function CustomLoader(params) {
   }
   return /* @__PURE__ */ React80.createElement(LevelIndents, { level: params.node.level, lastRowInGroup: false });
 }
-var DefaultFrameworkComponents = {
-  agColumnHeader: GenericHeaderRenderer,
-  agLoadingCellRenderer: CustomLoader,
-  agColumnGroupHeader: GenericColumnGroupHeader,
-  loadingOverlayRenderer: Spinner,
-  emptyStateRenderer: EmptyState
-};
 function getFrameworkComponents(tableProps) {
   const headerMenuConfig = {
     suppressResetColumnsOption: tableProps.suppressResetColumnsOption || false,
@@ -57169,6 +57165,13 @@ function getFrameworkComponents(tableProps) {
     tableProps.onSelectAll,
     tableProps.selectionSSREnabled
   );
+  const DefaultFrameworkComponents = {
+    agColumnHeader: GenericHeaderRenderer,
+    agLoadingCellRenderer: CustomLoader,
+    agColumnGroupHeader: GenericColumnGroupHeader,
+    loadingOverlayRenderer: Spinner,
+    emptyStateRenderer: EmptyState
+  };
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
@@ -57833,6 +57836,8 @@ var InternalTableContext = React80.createContext({
   gridApi: void 0,
   localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
+  onExpandOrCollapseAll: () => {
+  },
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
   },
@@ -108975,6 +108980,7 @@ var DataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   showExpandCollapseAllToggle,
@@ -109225,6 +109231,7 @@ var DataTable = ({
         gridApi,
         initialTableConfig,
         onBulkEditUpdate,
+        onExpandOrCollapseAll,
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
@@ -112303,6 +112310,7 @@ var ClientSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
@@ -112319,8 +112327,9 @@ var ClientSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onTableConfigChange,
       showExpandCollapseAllToggle: true,
       translations: translations2,
       localStoragePersistenceKey,
@@ -116712,6 +116721,7 @@ var ServerSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   enableCellTextSelection,
@@ -116730,9 +116740,10 @@ var ServerSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
-      onServerSideDataRequest,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onServerSideDataRequest,
+      onTableConfigChange,
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,

package/dist/modern/index.cjs CHANGED Viewed

@@ -56517,9 +56517,10 @@ var GenericHeaderRenderer = (props) => {
   const {
     columnApi,
     tableRef,
+    onExpandOrCollapseAll,
     onServerSideDataRequest,
-    showExpandCollapseAllToggle,
-    onTableConfigChange
+    onTableConfigChange,
+    showExpandCollapseAllToggle
   } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React80__default.default.useState(props.column.getSort());
@@ -56708,9 +56709,11 @@ var GenericHeaderRenderer = (props) => {
           }
         });
         setExpansionVariant("tierOne");
+        onExpandOrCollapseAll?.(true);
       } else {
         props.api.collapseAll();
         setExpansionVariant("closed");
+        onExpandOrCollapseAll?.(false);
       }
       return;
     }
@@ -56725,10 +56728,13 @@ var GenericHeaderRenderer = (props) => {
         props.api
       );
       setExpansionVariant(hasMoreExpandableNodes ? "tierOne" : "all");
+      onExpandOrCollapseAll?.(true);
     } else if (expansionVariant === "tierOne") {
       props.api.expandAll();
+      onExpandOrCollapseAll?.(true);
     } else {
       props.api.collapseAll();
+      onExpandOrCollapseAll?.(false);
     }
   }
   const tooltipText = {
@@ -56900,7 +56906,8 @@ var GenericHeaderRenderer = (props) => {
             "aria-label": tooltipText[expansionVariant],
             className: "expand-button",
             onClick: onExpandToggle,
-            role: "button"
+            role: "button",
+            "data-qa": "expand-or-collapse-all-button"
           },
           /* @__PURE__ */ React80__default.default.createElement(ExpansionVariantIcon, { size: "sm" })
         )
@@ -56959,18 +56966,14 @@ var GenericHeaderRenderer = (props) => {
 // src/GenericHeader/GenericColumnGroupHeader.tsx
 function GenericColumnGroupHeader(props) {
   const I18n = coreReact.useI18nContext();
-  const { expanded: initialExpanded, expandable } = props.columnGroup.providedColumnGroup;
-  const [isExpanded, setIsExpanded] = React80__default.default.useState(initialExpanded);
-  React80__default.default.useEffect(() => {
-    props.setExpanded(isExpanded);
-  }, [isExpanded]);
+  const { expanded, expandable } = props.columnGroup.providedColumnGroup;
   if (!props.displayName) {
     return null;
   }
   const tooltipText = I18n.t(
-    `dataTable.columnGroupToggle.${isExpanded ? "collapse" : "expand"}`
+    `dataTable.columnGroupToggle.${expanded ? "collapse" : "expand"}`
   );
-  const ExpansionVariantIcon = isExpanded ? coreIcons.CaretsIn : coreIcons.CaretsOut;
+  const ExpansionVariantIcon = expanded ? coreIcons.CaretsIn : coreIcons.CaretsOut;
   return /* @__PURE__ */ React80__default.default.createElement(React80__default.default.Fragment, null, /* @__PURE__ */ React80__default.default.createElement("div", { className: "ag-header-group-cell-label", role: "presentation" }, /* @__PURE__ */ React80__default.default.createElement("span", { className: "ag-header-group-text", role: "presentation" }, props.displayName)), expandable && /* @__PURE__ */ React80__default.default.createElement(
     coreReact.Tooltip,
     {
@@ -56983,7 +56986,7 @@ function GenericColumnGroupHeader(props) {
       {
         "aria-label": tooltipText,
         className: "expand-button",
-        onClick: () => setIsExpanded((v) => !v)
+        onClick: () => props.setExpanded(!expanded)
       },
       /* @__PURE__ */ React80__default.default.createElement(ExpansionVariantIcon, { size: "sm" })
     )
@@ -57074,13 +57077,6 @@ function CustomLoader(params) {
   }
   return /* @__PURE__ */ React80__default.default.createElement(LevelIndents, { level: params.node.level, lastRowInGroup: false });
 }
-var DefaultFrameworkComponents = {
-  agColumnHeader: GenericHeaderRenderer,
-  agLoadingCellRenderer: CustomLoader,
-  agColumnGroupHeader: GenericColumnGroupHeader,
-  loadingOverlayRenderer: Spinner,
-  emptyStateRenderer: EmptyState
-};
 function getFrameworkComponents(tableProps) {
   const headerMenuConfig = {
     suppressResetColumnsOption: tableProps.suppressResetColumnsOption || false,
@@ -57094,6 +57090,13 @@ function getFrameworkComponents(tableProps) {
     tableProps.onSelectAll,
     tableProps.selectionSSREnabled
   );
+  const DefaultFrameworkComponents = {
+    agColumnHeader: GenericHeaderRenderer,
+    agLoadingCellRenderer: CustomLoader,
+    agColumnGroupHeader: GenericColumnGroupHeader,
+    loadingOverlayRenderer: Spinner,
+    emptyStateRenderer: EmptyState
+  };
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
@@ -57744,6 +57747,8 @@ var InternalTableContext = React80__default.default.createContext({
   gridApi: void 0,
   localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
+  onExpandOrCollapseAll: () => {
+  },
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
   },
@@ -108837,6 +108842,7 @@ var DataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   showExpandCollapseAllToggle,
@@ -109083,6 +109089,7 @@ var DataTable = ({
         gridApi,
         initialTableConfig,
         onBulkEditUpdate,
+        onExpandOrCollapseAll,
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
@@ -112086,6 +112093,7 @@ var ClientSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
@@ -112102,8 +112110,9 @@ var ClientSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onTableConfigChange,
       showExpandCollapseAllToggle: true,
       translations: translations2,
       localStoragePersistenceKey,
@@ -116494,6 +116503,7 @@ var ServerSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   enableCellTextSelection,
@@ -116512,9 +116522,10 @@ var ServerSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
-      onServerSideDataRequest,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onServerSideDataRequest,
+      onTableConfigChange,
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,

package/dist/modern/index.d.cts CHANGED Viewed

@@ -1145,8 +1145,16 @@ interface DataTableProps {
     filterGroups?: FilterGroup[];
     getRowId?: (params: GetRowIdParams) => string;
     initialTableConfig?: DataTableConfig;
-    onTableConfigChange?: (config: DataTableConfig) => void;
+    /**
+     * Callback invoked when the row group expand/collapse state changes via
+     * the Expand/Collapse toggle button. Use this to track the table's
+     * expand/collapse state.
+     * @param expanded - `true` when groups are expanded at any level, `false`
+     * when all groups are collapsed.
+     */
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onServerSideDataRequest?: (params: ServerSideGetRowsParams) => Promise<SuccessParams | void> | void;
+    onTableConfigChange?: (config: DataTableConfig) => void;
     grandTotalsLabelRenderer?: React.FunctionComponent<GrandTotalsLabelRendererProps>;
     /**
      * Callback after bulk edit action is performed.
@@ -1374,6 +1382,7 @@ interface InternalTableContext {
     onServerSideDataRequest?: DataTableProps['onServerSideDataRequest'];
     updateServerSideDataSource: (params: UpdateServerSideDataSourceParams) => void;
     localStoragePersistenceKey?: string;
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onTableConfigChange: () => void;
     rowHeight: RowSize;
     rowSelectionRef?: React__default.MutableRefObject<RowSelectionRef>;
@@ -1454,7 +1463,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1491,7 +1500,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/modern/index.d.ts CHANGED Viewed

@@ -1145,8 +1145,16 @@ interface DataTableProps {
     filterGroups?: FilterGroup[];
     getRowId?: (params: GetRowIdParams) => string;
     initialTableConfig?: DataTableConfig;
-    onTableConfigChange?: (config: DataTableConfig) => void;
+    /**
+     * Callback invoked when the row group expand/collapse state changes via
+     * the Expand/Collapse toggle button. Use this to track the table's
+     * expand/collapse state.
+     * @param expanded - `true` when groups are expanded at any level, `false`
+     * when all groups are collapsed.
+     */
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onServerSideDataRequest?: (params: ServerSideGetRowsParams) => Promise<SuccessParams | void> | void;
+    onTableConfigChange?: (config: DataTableConfig) => void;
     grandTotalsLabelRenderer?: React.FunctionComponent<GrandTotalsLabelRendererProps>;
     /**
      * Callback after bulk edit action is performed.
@@ -1374,6 +1382,7 @@ interface InternalTableContext {
     onServerSideDataRequest?: DataTableProps['onServerSideDataRequest'];
     updateServerSideDataSource: (params: UpdateServerSideDataSourceParams) => void;
     localStoragePersistenceKey?: string;
+    onExpandOrCollapseAll?: (expanded: boolean) => void;
     onTableConfigChange: () => void;
     rowHeight: RowSize;
     rowSelectionRef?: React__default.MutableRefObject<RowSelectionRef>;
@@ -1454,7 +1463,7 @@ interface BulkActionProps {
     style?: React__default.CSSProperties;
 }
-declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
+declare const _default$1: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onTableConfigChange, translations, enableCellTextSelection, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<ClientSideDataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;
@@ -1491,7 +1500,7 @@ declare const MultiSelectQuickFilterRenderer: (props: FilterProps<any[]>) => Rea
 declare const SingleSelectQuickFilterRenderer: (props: FilterProps<any[]>) => React__default.JSX.Element;
-declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
+declare const _default: (({ analytics, children, columnDefinitions: _columnDefinitions, customBulkEditorFields, enableDynamicRowHeight, enableGroupEditAndValidation, filterGroups, getRowId, initialTableConfig: _initialTableConfig, onBulkEditUpdate, onExpandOrCollapseAll, onServerSideDataRequest, onTableConfigChange, enableCellTextSelection, showExpandCollapseAllToggle, translations, localStoragePersistenceKey, enableCDN, }: React__default.PropsWithChildren<DataTableProps>) => React__default.JSX.Element) & {
     BulkActions: React__default.FunctionComponent<React__default.PropsWithChildren<BulkActionProps>>;
     BulkEditActionButton: React__default.FunctionComponent<ActionButtonProps>;
     ConfigPanelButton: React__default.FC<{}>;

package/dist/modern/index.js CHANGED Viewed

@@ -56504,9 +56504,10 @@ var GenericHeaderRenderer = (props) => {
   const {
     columnApi,
     tableRef,
+    onExpandOrCollapseAll,
     onServerSideDataRequest,
-    showExpandCollapseAllToggle,
-    onTableConfigChange
+    onTableConfigChange,
+    showExpandCollapseAllToggle
   } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React80.useState(props.column.getSort());
@@ -56695,9 +56696,11 @@ var GenericHeaderRenderer = (props) => {
           }
         });
         setExpansionVariant("tierOne");
+        onExpandOrCollapseAll?.(true);
       } else {
         props.api.collapseAll();
         setExpansionVariant("closed");
+        onExpandOrCollapseAll?.(false);
       }
       return;
     }
@@ -56712,10 +56715,13 @@ var GenericHeaderRenderer = (props) => {
         props.api
       );
       setExpansionVariant(hasMoreExpandableNodes ? "tierOne" : "all");
+      onExpandOrCollapseAll?.(true);
     } else if (expansionVariant === "tierOne") {
       props.api.expandAll();
+      onExpandOrCollapseAll?.(true);
     } else {
       props.api.collapseAll();
+      onExpandOrCollapseAll?.(false);
     }
   }
   const tooltipText = {
@@ -56887,7 +56893,8 @@ var GenericHeaderRenderer = (props) => {
             "aria-label": tooltipText[expansionVariant],
             className: "expand-button",
             onClick: onExpandToggle,
-            role: "button"
+            role: "button",
+            "data-qa": "expand-or-collapse-all-button"
           },
           /* @__PURE__ */ React80.createElement(ExpansionVariantIcon, { size: "sm" })
         )
@@ -56946,18 +56953,14 @@ var GenericHeaderRenderer = (props) => {
 // src/GenericHeader/GenericColumnGroupHeader.tsx
 function GenericColumnGroupHeader(props) {
   const I18n = useI18nContext();
-  const { expanded: initialExpanded, expandable } = props.columnGroup.providedColumnGroup;
-  const [isExpanded, setIsExpanded] = React80.useState(initialExpanded);
-  React80.useEffect(() => {
-    props.setExpanded(isExpanded);
-  }, [isExpanded]);
+  const { expanded, expandable } = props.columnGroup.providedColumnGroup;
   if (!props.displayName) {
     return null;
   }
   const tooltipText = I18n.t(
-    `dataTable.columnGroupToggle.${isExpanded ? "collapse" : "expand"}`
+    `dataTable.columnGroupToggle.${expanded ? "collapse" : "expand"}`
   );
-  const ExpansionVariantIcon = isExpanded ? CaretsIn : CaretsOut;
+  const ExpansionVariantIcon = expanded ? CaretsIn : CaretsOut;
   return /* @__PURE__ */ React80.createElement(React80.Fragment, null, /* @__PURE__ */ React80.createElement("div", { className: "ag-header-group-cell-label", role: "presentation" }, /* @__PURE__ */ React80.createElement("span", { className: "ag-header-group-text", role: "presentation" }, props.displayName)), expandable && /* @__PURE__ */ React80.createElement(
     Tooltip,
     {
@@ -56970,7 +56973,7 @@ function GenericColumnGroupHeader(props) {
       {
         "aria-label": tooltipText,
         className: "expand-button",
-        onClick: () => setIsExpanded((v) => !v)
+        onClick: () => props.setExpanded(!expanded)
       },
       /* @__PURE__ */ React80.createElement(ExpansionVariantIcon, { size: "sm" })
     )
@@ -57061,13 +57064,6 @@ function CustomLoader(params) {
   }
   return /* @__PURE__ */ React80.createElement(LevelIndents, { level: params.node.level, lastRowInGroup: false });
 }
-var DefaultFrameworkComponents = {
-  agColumnHeader: GenericHeaderRenderer,
-  agLoadingCellRenderer: CustomLoader,
-  agColumnGroupHeader: GenericColumnGroupHeader,
-  loadingOverlayRenderer: Spinner,
-  emptyStateRenderer: EmptyState
-};
 function getFrameworkComponents(tableProps) {
   const headerMenuConfig = {
     suppressResetColumnsOption: tableProps.suppressResetColumnsOption || false,
@@ -57081,6 +57077,13 @@ function getFrameworkComponents(tableProps) {
     tableProps.onSelectAll,
     tableProps.selectionSSREnabled
   );
+  const DefaultFrameworkComponents = {
+    agColumnHeader: GenericHeaderRenderer,
+    agLoadingCellRenderer: CustomLoader,
+    agColumnGroupHeader: GenericColumnGroupHeader,
+    loadingOverlayRenderer: Spinner,
+    emptyStateRenderer: EmptyState
+  };
   DefaultFrameworkComponents["autoGroupCellRenderer"] = AutoGroupCellRenderer;
   return { ...DefaultFrameworkComponents, ...customFrameworkComponents };
 }
@@ -57731,6 +57734,8 @@ var InternalTableContext = React80.createContext({
   gridApi: void 0,
   localStoragePersistenceKey: void 0,
   onBulkEditUpdate: () => Promise.resolve(),
+  onExpandOrCollapseAll: () => {
+  },
   onServerSideDataRequest: void 0,
   onTableConfigChange: () => {
   },
@@ -108824,6 +108829,7 @@ var DataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   showExpandCollapseAllToggle,
@@ -109070,6 +109076,7 @@ var DataTable = ({
         gridApi,
         initialTableConfig,
         onBulkEditUpdate,
+        onExpandOrCollapseAll,
         onServerSideDataRequest,
         onTableConfigChange: internalOnTableConfigChange,
         rowSelectionRef,
@@ -112073,6 +112080,7 @@ var ClientSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onTableConfigChange,
   translations: translations2 = {},
   enableCellTextSelection,
@@ -112089,8 +112097,9 @@ var ClientSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onTableConfigChange,
       showExpandCollapseAllToggle: true,
       translations: translations2,
       localStoragePersistenceKey,
@@ -116481,6 +116490,7 @@ var ServerSideDataTable = ({
   getRowId,
   initialTableConfig: _initialTableConfig,
   onBulkEditUpdate,
+  onExpandOrCollapseAll,
   onServerSideDataRequest,
   onTableConfigChange,
   enableCellTextSelection,
@@ -116499,9 +116509,10 @@ var ServerSideDataTable = ({
       filterGroups,
       getRowId,
       initialTableConfig: _initialTableConfig,
-      onTableConfigChange,
-      onServerSideDataRequest,
       onBulkEditUpdate,
+      onExpandOrCollapseAll,
+      onServerSideDataRequest,
+      onTableConfigChange,
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.38.0",
+  "version": "14.39.1",
   "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",
@@ -75,7 +75,7 @@
   "dependencies": {
     "@procore/cdn-translations": "0.1.13",
     "@procore/error-pages": "^0.2.3",
-    "@procore/labs-datetime-select": "^0.1.3",
+    "@procore/labs-datetime-select": "^0.2.0",
     "@procore/labs-group-by-select": "4.1.0",
     "@procore/toast-alert": "^5.1.1",
     "@procore/web-sdk-storage": "^0.1.0",
@@ -106,19 +106,17 @@
     "@dotenvx/dotenvx": "1.6.4",
     "@ngneat/falso": "6.4.0",
     "@procore/core-css": "10.17.0",
-    "@procore/core-icons": "^12.11.0",
+    "@procore/core-icons": "^12.12.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.32.0",
+    "@procore/core-react": "^12.34.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",
     "@procore/labs-procore-environment": "5.0.1",
     "@procore/pseudolocalize": "^0.1.1",
-    "@procore/storybook-addon": "^4.0.0",
-    "@storybook/addon-docs": "^7.5.3",
-    "@storybook/manager-api": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@procore/storybook-addon": "^4.6.0",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react-webpack5": "^9.1.16",
     "@testing-library/cypress": "10.0.1",
     "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.4",
@@ -149,6 +147,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.0",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^9.1.16",
     "http-server": "^14.1.1",
     "jest": "29.5.0",
     "miragejs": "0.1.45",
@@ -163,7 +162,7 @@
     "sass": "1.57.1",
     "sass-loader": "13.2.0",
     "start-server-and-test": "1.15.4",
-    "storybook": "^7.5.3",
+    "storybook": "^9.1.17",
     "style-loader": "3.3.1",
     "styled-components": "6.1.18",
     "tsup": "^8.4.0",