@procore/data-table 14.40.0 → 14.41.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 14.41.0
+
+### Minor Changes
+
+- f1804f1: Support using required and optional groups at the same time
+
+### Patch Changes
+
+- 83c2765: Fixed variable name conflicting with type name that leads to an error on storybook.
+- Updated dependencies [27c6ad8]
+  - @procore/toast-alert@5.1.2
+
 ## 14.40.0
 
 ### Minor Changes

package/dist/legacy/index.cjs

@@ -103539,13 +103539,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103557,7 +103557,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -112126,7 +112126,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80__default.default.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -112149,24 +112149,26 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80__default.default.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80__default.default.useCallback(() => {
     var _a;
-    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection([])) ?? [];
+    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80__default.default.useCallback(
     (newValue) => {
       var _a;
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection(fields)) ?? fields;
       if (!ramda.equals(selectedColumns, newValue)) {
-        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(fields);
+        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80__default.default.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112310,7 +112312,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80__default.default.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80__default.default.createElement(
     QuickFilters,

package/dist/legacy/index.d.cts

@@ -1452,6 +1452,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1485,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1523,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/legacy/index.d.ts

@@ -1452,6 +1452,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1485,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1523,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/legacy/index.js

@@ -103526,13 +103526,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103544,7 +103544,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -112113,7 +112113,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -112136,24 +112136,26 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80.useCallback(() => {
     var _a;
-    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection([])) ?? [];
+    (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80.useCallback(
     (newValue) => {
       var _a;
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = (modifyRowGroupFieldsOnSelection == null ? void 0 : modifyRowGroupFieldsOnSelection(fields)) ?? fields;
       if (!equals(selectedColumns, newValue)) {
-        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(fields);
+        (_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112297,7 +112299,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80.createElement(
     QuickFilters,

package/dist/modern/index.cjs

@@ -103427,13 +103427,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80__default.default.createElement(
         coreReact.Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103445,7 +103445,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -111900,7 +111900,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80__default.default.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -111923,22 +111923,24 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80__default.default.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80__default.default.useCallback(() => {
-    tableRef?.current?.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = modifyRowGroupFieldsOnSelection?.([]) ?? [];
+    tableRef?.current?.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80__default.default.useCallback(
     (newValue) => {
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = modifyRowGroupFieldsOnSelection?.(fields) ?? fields;
       if (!ramda.equals(selectedColumns, newValue)) {
-        tableRef?.current?.setRowGrouping(fields);
+        tableRef?.current?.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80__default.default.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112080,7 +112082,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80__default.default.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80__default.default.createElement(
     QuickFilters,

package/dist/modern/index.d.cts

@@ -1452,6 +1452,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1485,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1523,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/modern/index.d.ts

@@ -1452,6 +1452,7 @@ interface QuickControlsProps extends Omit<SearchProps, 'disabled'> {
     style?: React__default.CSSProperties;
     disabledSearch?: boolean;
     filterOverlayMatchesTriggerWidth?: boolean;
+    modifyRowGroupFieldsOnSelection?: (userSelection: string[]) => string[];
 }
 
 interface ActionButtonProps {
@@ -1484,6 +1485,7 @@ declare const _default$1: (({ analytics, children, columnDefinitions: _columnDef
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "selectionSSREnabled" | "modules">>;
@@ -1521,6 +1523,7 @@ declare const _default: (({ analytics, children, columnDefinitions: _columnDefin
             placeholder: string;
             selectedItemsPrefix?: string | undefined;
         };
+        modifyRowGroupFieldsOnSelection?: ((userSelection: string[]) => string[]) | undefined;
     }>;
     Search: React__default.FunctionComponent<SearchProps>;
     Table: React__default.FC<Omit<TableProps<any, any>, "rows" | "modules">>;

package/dist/modern/index.js

@@ -103414,13 +103414,13 @@ var BulkEditInput = (props) => {
       );
     case "peopleMultiSelect":
       const {
-        placeholder: MultiSelectBulkEditorParams,
-        ...PeopleBulkEditorParams
+        placeholder: peopleMultiSelectPlaceholder,
+        ...peopleMultiSelectParams
       } = props.editorParams;
       return /* @__PURE__ */ React80.createElement(
         Form.MultiSelect,
         {
-          ...PeopleBulkEditorParams,
+          ...peopleMultiSelectParams,
           beforeShow: getBulkEditorOptions,
           colWidth: 12,
           "data-qa": `data-table-bulk-edit-input-${props.name}`,
@@ -103432,7 +103432,7 @@ var BulkEditInput = (props) => {
           name: field.input.name,
           optionRenderer: personOptionRenderer(props.editorParams),
           options,
-          placeholder: personPlaceholder ?? placeholderForField
+          placeholder: peopleMultiSelectPlaceholder ?? placeholderForField
         }
       );
     case "radio":
@@ -111887,7 +111887,7 @@ var FiltersPanelButton = () => {
   }
   return /* @__PURE__ */ React80.createElement(ClientSideFiltersPanelToggleButton, null);
 };
-var RowGroupSelector = ({ localeText }) => {
+var RowGroupSelector = ({ localeText, modifyRowGroupFieldsOnSelection }) => {
   const {
     columnDefinitions: _columnDefinitions,
     columnApi,
@@ -111910,22 +111910,24 @@ var RowGroupSelector = ({ localeText }) => {
     });
   }, [columnDefinitions]);
   const selectedColumns = React80.useMemo(
-    () => mapColumnsToOptions(groupedColumns),
+    () => mapColumnsToOptions(groupedColumns.filter((col) => col.enableRowGroup)),
     [groupedColumns]
   );
   const onGroupedClear = React80.useCallback(() => {
-    tableRef?.current?.setRowGrouping([]);
-  }, [tableRef]);
+    const modifiedFields = modifyRowGroupFieldsOnSelection?.([]) ?? [];
+    tableRef?.current?.setRowGrouping(modifiedFields);
+  }, [tableRef, modifyRowGroupFieldsOnSelection]);
   const onGroupedRowChange = React80.useCallback(
     (newValue) => {
       const fields = newValue.map((val) => {
         return val.id;
       });
+      const modifiedFields = modifyRowGroupFieldsOnSelection?.(fields) ?? fields;
       if (!equals(selectedColumns, newValue)) {
-        tableRef?.current?.setRowGrouping(fields);
+        tableRef?.current?.setRowGrouping(modifiedFields);
       }
     },
-    [selectedColumns]
+    [selectedColumns, modifyRowGroupFieldsOnSelection]
   );
   React80.useEffect(() => {
     function onDisplayedColumnsChanged(event) {
@@ -112067,7 +112069,8 @@ var QuickControls = (props) => {
         reset: I18n.t("dataTable.tableSettings.reset"),
         placeholder: I18n.t("dataTable.tableSettings.selectColumnGroup"),
         selectedItemsPrefix: I18n.t("dataTable.tableSettings.groupBy")
-      }
+      },
+      modifyRowGroupFieldsOnSelection: props.modifyRowGroupFieldsOnSelection
     }
   ), /* @__PURE__ */ React80.createElement(ConfigPanelButton, null))), /* @__PURE__ */ React80.createElement(
     QuickFilters,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.40.0",
+  "version": "14.41.0",
   "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.0",
     "@procore/labs-group-by-select": "4.1.0",
-    "@procore/toast-alert": "^5.1.1",
+    "@procore/toast-alert": "^5.1.2",
     "@procore/web-sdk-storage": "^0.1.0",
     "classnames": "2.5.1",
     "date-fns": "2.29.1",
@@ -108,7 +108,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "^12.12.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.34.1",
+    "@procore/core-react": "^12.35.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",