@procore/data-table 14.39.0 → 14.39.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

package/dist/legacy/index.cjs

@@ -57052,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,
     {
@@ -57076,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" })
     )
@@ -57169,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,
@@ -57189,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 };
 }

package/dist/legacy/index.js

@@ -57039,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,
     {
@@ -57063,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" })
     )
@@ -57156,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,
@@ -57176,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 };
 }

package/dist/modern/index.cjs

@@ -56966,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,
     {
@@ -56990,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" })
     )
@@ -57081,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,
@@ -57101,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 };
 }

package/dist/modern/index.js

@@ -56953,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,
     {
@@ -56977,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" })
     )
@@ -57068,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,
@@ -57088,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 };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.39.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.33.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",