goobs-frontend 0.9.26 → 0.9.27

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 (11) hide show
  1. package/package.json +9 -9
  2. package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx +26 -12
  3. package/src/components/DataGrid/Table/Rows/index.tsx +1095 -26
  4. package/src/components/DataGrid/Table/index.tsx +23 -5
  5. package/src/components/DataGrid/index.tsx +8 -5
  6. package/src/components/DataGrid/types/index.ts +10 -0
  7. package/src/components/Field/Dropdown/Searchable/index.tsx +633 -149
  8. package/src/components/Nav/VerticalVariant/subSubViewNav/list.tsx +46 -3
  9. package/src/components/Nav/VerticalVariant/subViewNav/list.tsx +46 -3
  10. package/src/components/Nav/VerticalVariant/viewNav/index.tsx +46 -3
  11. package/src/components/Nav/index.tsx +544 -78
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "goobs-frontend",
3
- "version": "0.9.26",
3
+ "version": "0.9.27",
4
4
  "type": "module",
5
5
  "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
6
6
  "license": "MIT",
@@ -27,7 +27,7 @@
27
27
  "@emotion/styled": "^11",
28
28
  "@mui/icons-material": "^7",
29
29
  "@mui/material": "^7",
30
- "@storybook/addon-links": "^8",
30
+ "@storybook/addon-links": "^9",
31
31
  "@types/lodash": "^4",
32
32
  "formik": "^2",
33
33
  "highlight.js": "^11",
@@ -41,30 +41,30 @@
41
41
  "slate-dom": "^0.114",
42
42
  "slate-history": "^0.113",
43
43
  "slate-react": "^0.114",
44
- "storybook": "^8",
44
+ "storybook": "^9",
45
45
  "zod": "^3",
46
46
  "zod-formik-adapter": "^1"
47
47
  },
48
48
  "devDependencies": {
49
- "@chromatic-com/storybook": "^3",
49
+ "@chromatic-com/storybook": "^4",
50
50
  "@next/eslint-plugin-next": "^15",
51
51
  "@storybook/addon-essentials": "^8",
52
52
  "@storybook/addon-interactions": "^8",
53
- "@storybook/addon-onboarding": "^8",
53
+ "@storybook/addon-onboarding": "^9",
54
54
  "@storybook/blocks": "^8",
55
- "@storybook/nextjs": "^8",
56
- "@storybook/react": "^8",
55
+ "@storybook/nextjs": "^9",
56
+ "@storybook/react": "^9",
57
57
  "@storybook/test": "^8",
58
58
  "@types/react": "^19",
59
59
  "@types/react-dom": "^19",
60
60
  "@typescript-eslint/eslint-plugin": "^8",
61
61
  "@typescript-eslint/parser": "^8",
62
- "chromatic": "^11",
62
+ "chromatic": "^12",
63
63
  "eslint": "^9",
64
64
  "eslint-config-next": "^15",
65
65
  "eslint-config-prettier": "^10",
66
66
  "eslint-plugin-prettier": "^5",
67
- "eslint-plugin-storybook": "^0.12",
67
+ "eslint-plugin-storybook": "^9",
68
68
  "prettier": "^3",
69
69
  "react": "^19",
70
70
  "react-dom": "^19",
package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx CHANGED
@@ -38,26 +38,36 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
38
38
  // If we're mobile, just render a single dropdown + "select all" checkbox
39
39
  if (isMobile) {
40
40
  const mobileOptions = allColumns.map(col => ({
41
- value: col.headerName ?? col.field,
41
+ value: col.headerName ?? col.field, // Use headerName for display consistency
42
42
  }))
43
43
 
44
44
  // Find the currently-selected column as an object
45
45
  const currentMobileChoice =
46
- mobileOptions.find(opt => opt.value === selectedOverflowField) || null
46
+ mobileOptions.find(opt => {
47
+ // Find by matching either headerName or field
48
+ const matchingColumn = allColumns.find(
49
+ c => c.field === selectedOverflowField
50
+ )
51
+ return (
52
+ matchingColumn &&
53
+ opt.value === (matchingColumn.headerName ?? matchingColumn.field)
54
+ )
55
+ }) || (mobileOptions.length > 0 ? mobileOptions[0] : null)
47
56
 
48
57
  const handleMobileChange = (value: { value: string } | null) => {
49
58
  if (value && value.value) {
50
- // Try to find a column with matching headerName first
59
+ // Find the column that matches the selected headerName/field
51
60
  const matchingColumn = allColumns.find(
52
- col => col.headerName === value.value || col.field === value.value
61
+ col => (col.headerName ?? col.field) === value.value
53
62
  )
54
-
55
- // If found, use its field property, otherwise use the value directly
63
+ if (matchingColumn) {
64
+ setSelectedOverflowField(matchingColumn.field)
65
+ }
66
+ } else {
67
+ // Default to first column if no selection
56
68
  setSelectedOverflowField(
57
- matchingColumn ? matchingColumn.field : value.value
69
+ allColumns.length > 0 ? allColumns[0].field : ''
58
70
  )
59
- } else {
60
- setSelectedOverflowField('')
61
71
  }
62
72
  }
63
73
 
@@ -84,13 +94,16 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
84
94
  {/* One cell for the single dropdown containing all columns */}
85
95
  <TableCell
86
96
  sx={{
87
- width: 275,
97
+ // Match the data cell width for consistency
98
+ width: '100%',
99
+ minWidth: 200,
100
+ maxWidth: '100%',
88
101
  boxSizing: 'border-box',
89
102
  overflow: 'visible',
90
103
  position: 'relative',
91
- zIndex: 100, // Increased z-index for mobile dropdown
92
- // If you want no left padding on mobile header as well:
104
+ zIndex: 100,
93
105
  paddingLeft: 0,
106
+ paddingRight: 8,
94
107
  }}
95
108
  >
96
109
  <SearchableDropdown
@@ -107,6 +120,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
107
120
  style={{
108
121
  marginBottom: 0,
109
122
  marginTop: 0,
123
+ width: '100%',
110
124
  }}
111
125
  />
112
126
  </TableCell>