goobs-frontend 0.9.25 → 0.9.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.25",
+  "version": "0.9.27",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "@emotion/styled": "^11",
     "@mui/icons-material": "^7",
     "@mui/material": "^7",
-    "@storybook/addon-links": "^8",
+    "@storybook/addon-links": "^9",
     "@types/lodash": "^4",
     "formik": "^2",
     "highlight.js": "^11",
@@ -41,30 +41,30 @@
     "slate-dom": "^0.114",
     "slate-history": "^0.113",
     "slate-react": "^0.114",
-    "storybook": "^8",
+    "storybook": "^9",
     "zod": "^3",
     "zod-formik-adapter": "^1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3",
+    "@chromatic-com/storybook": "^4",
     "@next/eslint-plugin-next": "^15",
     "@storybook/addon-essentials": "^8",
     "@storybook/addon-interactions": "^8",
-    "@storybook/addon-onboarding": "^8",
+    "@storybook/addon-onboarding": "^9",
     "@storybook/blocks": "^8",
-    "@storybook/nextjs": "^8",
-    "@storybook/react": "^8",
+    "@storybook/nextjs": "^9",
+    "@storybook/react": "^9",
     "@storybook/test": "^8",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8",
     "@typescript-eslint/parser": "^8",
-    "chromatic": "^11",
+    "chromatic": "^12",
     "eslint": "^9",
     "eslint-config-next": "^15",
     "eslint-config-prettier": "^10",
     "eslint-plugin-prettier": "^5",
-    "eslint-plugin-storybook": "^0.12",
+    "eslint-plugin-storybook": "^9",
     "prettier": "^3",
     "react": "^19",
     "react-dom": "^19",

package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx

@@ -38,26 +38,36 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
   // If we're mobile, just render a single dropdown + "select all" checkbox
   if (isMobile) {
     const mobileOptions = allColumns.map(col => ({
-      value: col.headerName ?? col.field,
+      value: col.headerName ?? col.field, // Use headerName for display consistency
     }))
 
     // Find the currently-selected column as an object
     const currentMobileChoice =
-      mobileOptions.find(opt => opt.value === selectedOverflowField) || null
+      mobileOptions.find(opt => {
+        // Find by matching either headerName or field
+        const matchingColumn = allColumns.find(
+          c => c.field === selectedOverflowField
+        )
+        return (
+          matchingColumn &&
+          opt.value === (matchingColumn.headerName ?? matchingColumn.field)
+        )
+      }) || (mobileOptions.length > 0 ? mobileOptions[0] : null)
 
     const handleMobileChange = (value: { value: string } | null) => {
       if (value && value.value) {
-        // Try to find a column with matching headerName first
+        // Find the column that matches the selected headerName/field
         const matchingColumn = allColumns.find(
-          col => col.headerName === value.value || col.field === value.value
+          col => (col.headerName ?? col.field) === value.value
         )
-
-        // If found, use its field property, otherwise use the value directly
+        if (matchingColumn) {
+          setSelectedOverflowField(matchingColumn.field)
+        }
+      } else {
+        // Default to first column if no selection
         setSelectedOverflowField(
-          matchingColumn ? matchingColumn.field : value.value
+          allColumns.length > 0 ? allColumns[0].field : ''
         )
-      } else {
-        setSelectedOverflowField('')
       }
     }
 
@@ -84,13 +94,16 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
         {/* One cell for the single dropdown containing all columns */}
         <TableCell
           sx={{
-            width: 275,
+            // Match the data cell width for consistency
+            width: '100%',
+            minWidth: 200,
+            maxWidth: '100%',
             boxSizing: 'border-box',
             overflow: 'visible',
             position: 'relative',
-            zIndex: 100, // Increased z-index for mobile dropdown
-            // If you want no left padding on mobile header as well:
+            zIndex: 100,
             paddingLeft: 0,
+            paddingRight: 8,
           }}
         >
           <SearchableDropdown
@@ -107,6 +120,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
             style={{
               marginBottom: 0,
               marginTop: 0,
+              width: '100%',
             }}
           />
         </TableCell>
@@ -176,7 +190,18 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
                 options={overflowDesktopColumns.map(oc => ({
                   value: oc.headerName ?? oc.field,
                 }))}
-                defaultValue={selectedOverflowField}
+                defaultValue={
+                  selectedOverflowField
+                    ? // Find the matching column's display name
+                      (overflowDesktopColumns.find(
+                        oc => oc.field === selectedOverflowField
+                      )?.headerName ?? selectedOverflowField)
+                    : // If no selection yet, use the first option's value
+                      overflowDesktopColumns.length > 0
+                      ? (overflowDesktopColumns[0].headerName ??
+                        overflowDesktopColumns[0].field)
+                      : ''
+                }
                 onChange={handleOverflowChange}
                 backgroundcolor={white.main}
                 fontcolor="black"