ece-docs-components 1.0.54 → 1.0.56
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.
- package/dist/cjs/_virtual/index8.js +2 -2
- package/dist/cjs/_virtual/index9.js +2 -2
- package/dist/cjs/components/Header.js +200 -53
- package/dist/cjs/components/Header.js.map +1 -1
- package/dist/cjs/components/NoteBox.js +0 -1
- package/dist/cjs/components/NoteBox.js.map +1 -1
- package/dist/cjs/node_modules/domutils/lib/index.js +1 -1
- package/dist/cjs/node_modules/style-to-object/cjs/index.js +1 -1
- package/dist/esm/_virtual/index6.js +2 -2
- package/dist/esm/_virtual/index7.js +2 -2
- package/dist/esm/_virtual/index8.js +2 -2
- package/dist/esm/_virtual/index9.js +2 -2
- package/dist/esm/components/Header.d.ts +1 -0
- package/dist/esm/components/Header.js +202 -55
- package/dist/esm/components/Header.js.map +1 -1
- package/dist/esm/components/NoteBox.js +0 -1
- package/dist/esm/components/NoteBox.js.map +1 -1
- package/dist/esm/node_modules/domutils/lib/index.js +1 -1
- package/dist/esm/node_modules/htmlparser2/dist/commonjs/index.js +1 -1
- package/dist/esm/node_modules/react-property/lib/index.js +1 -1
- package/dist/esm/node_modules/style-to-object/cjs/index.js +1 -1
- package/package.json +1 -1
|
@@ -3,15 +3,26 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var material = require('@mui/material');
|
|
6
|
-
require('../ThemeProvider.js');
|
|
6
|
+
var ThemeProvider = require('../ThemeProvider.js');
|
|
7
7
|
var iconsMaterial = require('@mui/icons-material');
|
|
8
8
|
var PopoverMenu = require('./PopoverMenu.js');
|
|
9
9
|
var PrimaryLogo_Variation_Cream = require('../images/PrimaryLogo_Variation_Cream.svg.js');
|
|
10
10
|
|
|
11
|
+
function renderDescription(desc) {
|
|
12
|
+
if (!desc)
|
|
13
|
+
return null;
|
|
14
|
+
const lines = desc.split(/\r?\n/).filter(line => line.trim().length > 0);
|
|
15
|
+
const bulletLines = lines.filter(line => line.trim().startsWith("* "));
|
|
16
|
+
const nonBulletLines = lines.filter(line => !line.trim().startsWith("* "));
|
|
17
|
+
return (jsxRuntime.jsxs("div", { style: { fontSize: 14, lineHeight: 1.5 }, children: [nonBulletLines.length > 0 && (jsxRuntime.jsx("div", { style: {
|
|
18
|
+
whiteSpace: "pre-line",
|
|
19
|
+
marginBottom: bulletLines.length > 0 ? 6 : 0, // spacing above bullets
|
|
20
|
+
}, children: nonBulletLines.join("\n") })), bulletLines.length > 0 && (jsxRuntime.jsx("ul", { style: { margin: 0, paddingLeft: 18 }, children: bulletLines.map((line, idx) => (jsxRuntime.jsx("li", { children: line.trim().replace(/^\*\s*/, "") }, idx))) }))] }));
|
|
21
|
+
}
|
|
11
22
|
const StyledHeader = material.styled(material.Box)(({ theme }) => ({
|
|
12
23
|
display: 'flex',
|
|
13
24
|
alignItems: 'center',
|
|
14
|
-
justifyContent: '
|
|
25
|
+
justifyContent: 'flex-start',
|
|
15
26
|
backgroundColor: theme.palette.primary.main, // var(--color-primary)
|
|
16
27
|
[theme.breakpoints.up('md')]: {
|
|
17
28
|
gap: theme.spacing(4), // md:gap-4
|
|
@@ -55,7 +66,7 @@ const StyledLogoSvg = material.styled(PrimaryLogo_Variation_Cream.ReactComponent
|
|
|
55
66
|
`;
|
|
56
67
|
const StyledSearchContainer = material.styled(material.Box)(({ theme }) => ({
|
|
57
68
|
flex: 1,
|
|
58
|
-
maxWidth: '
|
|
69
|
+
maxWidth: '45rem',
|
|
59
70
|
margin: theme.spacing(0, 2), // mx-8
|
|
60
71
|
position: 'relative',
|
|
61
72
|
}));
|
|
@@ -125,6 +136,7 @@ const StyledSearchIcon = material.styled(material.Box)(({ theme }) => ({
|
|
|
125
136
|
},
|
|
126
137
|
}));
|
|
127
138
|
const StyledUserContainer = material.styled(material.Box)(({ theme }) => ({
|
|
139
|
+
marginLeft: 'auto',
|
|
128
140
|
display: 'flex',
|
|
129
141
|
alignItems: 'center',
|
|
130
142
|
gap: theme.spacing(3), // md:gap-3
|
|
@@ -168,13 +180,72 @@ const StyledUserName = material.styled(material.Typography)(({ theme }) => ({
|
|
|
168
180
|
display: 'none'
|
|
169
181
|
},
|
|
170
182
|
}));
|
|
171
|
-
const Header = ({ userName = 'John Doe', userInitials = 'JD', toggleMenu, signOut, search, onResultClick, signUpStatus, }) => {
|
|
183
|
+
const Header = ({ userName = 'John Doe', userInitials = 'JD', toggleMenu, signOut, search, onResultClick, signUpStatus, resetKey, }) => {
|
|
184
|
+
const theme = ThemeProvider.useTheme();
|
|
172
185
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
173
186
|
const [searchQuery, setSearchQuery] = React.useState('');
|
|
174
187
|
const [results, setResults] = React.useState([]);
|
|
175
188
|
const [openDropdown, setOpenDropdown] = React.useState(false);
|
|
176
|
-
const
|
|
189
|
+
const isMdUp = material.useMediaQuery(theme.breakpoints.up('md'));
|
|
190
|
+
const [mobileSearchOpen, setMobileSearchOpen] = React.useState(false);
|
|
191
|
+
const desktopInputRef = React.useRef(null);
|
|
192
|
+
const mobileInputRef = React.useRef(null);
|
|
193
|
+
const desktopFieldRef = React.useRef(null);
|
|
194
|
+
const [isSearching, setIsSearching] = React.useState(false);
|
|
195
|
+
const headerRef = React.useRef(null);
|
|
196
|
+
const isActive = signUpStatus === 'Active';
|
|
197
|
+
const mobileResultsPaperRef = React.useRef(null);
|
|
198
|
+
const [mobileResultLimit, setMobileResultLimit] = React.useState(5);
|
|
199
|
+
const searchSeqRef = React.useRef(0);
|
|
177
200
|
const debounceRef = React.useRef(undefined);
|
|
201
|
+
const maxVisibleResults = isMdUp ? 5 : 3;
|
|
202
|
+
const approxItemHeight = 80;
|
|
203
|
+
// Start at 5 each time results open/change on mobile
|
|
204
|
+
React.useLayoutEffect(() => {
|
|
205
|
+
if (isMdUp)
|
|
206
|
+
return;
|
|
207
|
+
if (!mobileSearchOpen || !openDropdown)
|
|
208
|
+
return;
|
|
209
|
+
setMobileResultLimit(5);
|
|
210
|
+
}, [isMdUp, mobileSearchOpen, openDropdown, results]);
|
|
211
|
+
// If the dropdown would run off-screen, reduce how many results we render
|
|
212
|
+
React.useLayoutEffect(() => {
|
|
213
|
+
if (isMdUp)
|
|
214
|
+
return;
|
|
215
|
+
if (!mobileSearchOpen || !openDropdown)
|
|
216
|
+
return;
|
|
217
|
+
const raf = requestAnimationFrame(() => {
|
|
218
|
+
const el = mobileResultsPaperRef.current;
|
|
219
|
+
if (!el)
|
|
220
|
+
return;
|
|
221
|
+
const rect = el.getBoundingClientRect();
|
|
222
|
+
const overflowPx = rect.bottom - window.innerHeight;
|
|
223
|
+
if (overflowPx > 0) {
|
|
224
|
+
setMobileResultLimit((n) => Math.max(1, n - 1));
|
|
225
|
+
}
|
|
226
|
+
});
|
|
227
|
+
return () => cancelAnimationFrame(raf);
|
|
228
|
+
}, [isMdUp, mobileSearchOpen, openDropdown, mobileResultLimit]);
|
|
229
|
+
const closeMobileSearch = () => {
|
|
230
|
+
setMobileSearchOpen(false);
|
|
231
|
+
setSearchQuery('');
|
|
232
|
+
setResults([]);
|
|
233
|
+
setOpenDropdown(false);
|
|
234
|
+
window.clearTimeout(debounceRef.current);
|
|
235
|
+
};
|
|
236
|
+
const toggleMobileSearch = () => {
|
|
237
|
+
setMobileSearchOpen(prev => {
|
|
238
|
+
const next = !prev;
|
|
239
|
+
if (!next) {
|
|
240
|
+
// cancelling
|
|
241
|
+
closeMobileSearch();
|
|
242
|
+
return false;
|
|
243
|
+
}
|
|
244
|
+
// opening
|
|
245
|
+
setTimeout(() => mobileInputRef.current?.focus(), 0);
|
|
246
|
+
return true;
|
|
247
|
+
});
|
|
248
|
+
};
|
|
178
249
|
const handleOpen = (event) => {
|
|
179
250
|
setAnchorEl(event.currentTarget);
|
|
180
251
|
};
|
|
@@ -182,75 +253,151 @@ const Header = ({ userName = 'John Doe', userInitials = 'JD', toggleMenu, signOu
|
|
|
182
253
|
setAnchorEl(null);
|
|
183
254
|
};
|
|
184
255
|
const runSearch = async (term) => {
|
|
185
|
-
if (!search) {
|
|
256
|
+
if (!search || !term.trim()) {
|
|
257
|
+
searchSeqRef.current += 1;
|
|
258
|
+
setIsSearching(false);
|
|
186
259
|
setResults([]);
|
|
187
260
|
setOpenDropdown(false);
|
|
188
261
|
return;
|
|
189
262
|
}
|
|
190
|
-
const
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
263
|
+
const seq = ++searchSeqRef.current;
|
|
264
|
+
setIsSearching(true);
|
|
265
|
+
try {
|
|
266
|
+
const res = await Promise.resolve(search(term.trim()));
|
|
267
|
+
if (seq !== searchSeqRef.current)
|
|
268
|
+
return; // Fixes debounce race condition causing old searches to appear after newer
|
|
269
|
+
const list = Array.isArray(res) ? res : [];
|
|
270
|
+
setResults(list);
|
|
271
|
+
setOpenDropdown(true); // display dropdown no matter what, if no results will display no results message
|
|
272
|
+
}
|
|
273
|
+
finally {
|
|
274
|
+
if (seq === searchSeqRef.current)
|
|
275
|
+
setIsSearching(false);
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
const handleKeyDown = (e) => {
|
|
279
|
+
if (e.key === 'Enter') {
|
|
280
|
+
e.preventDefault();
|
|
281
|
+
runSearch(searchQuery);
|
|
282
|
+
}
|
|
283
|
+
};
|
|
284
|
+
const handleSearchChange = (value) => {
|
|
285
|
+
setSearchQuery(value);
|
|
286
|
+
window.clearTimeout(debounceRef.current);
|
|
287
|
+
if (!value.trim()) {
|
|
288
|
+
runSearch(''); // Immediately run if no search to guarantee removal of listed results
|
|
194
289
|
return;
|
|
195
290
|
}
|
|
196
|
-
|
|
197
|
-
const list = Array.isArray(res) ? res : [];
|
|
198
|
-
setResults(list);
|
|
199
|
-
setOpenDropdown(list.length > 0);
|
|
291
|
+
debounceRef.current = window.setTimeout(() => runSearch(value), 150);
|
|
200
292
|
};
|
|
201
293
|
const handleSearchClick = (e) => {
|
|
202
294
|
e.preventDefault();
|
|
203
295
|
runSearch(searchQuery);
|
|
204
296
|
};
|
|
297
|
+
React.useEffect(() => {
|
|
298
|
+
// When parent says the route changed (resetKey changes), reset search UI
|
|
299
|
+
closeMobileSearch();
|
|
300
|
+
}, [resetKey]);
|
|
205
301
|
React.useEffect(() => {
|
|
206
302
|
const handler = (e) => {
|
|
207
|
-
const
|
|
208
|
-
|
|
303
|
+
const t = e.target;
|
|
304
|
+
const inDesktop = desktopInputRef.current?.parentElement?.contains(t);
|
|
305
|
+
const inMobile = mobileInputRef.current?.parentElement?.contains(t);
|
|
306
|
+
if (!inDesktop && !inMobile) {
|
|
209
307
|
setOpenDropdown(false);
|
|
210
308
|
}
|
|
211
309
|
};
|
|
212
310
|
document.addEventListener('click', handler);
|
|
213
311
|
return () => document.removeEventListener('click', handler);
|
|
214
312
|
}, []);
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
313
|
+
const mobileResultsToShow = results.slice(0, mobileResultLimit);
|
|
314
|
+
const ResultsList = ({ items, mode, paperRef, onPick, }) => {
|
|
315
|
+
const isDesktop = mode === 'desktop';
|
|
316
|
+
return (jsxRuntime.jsx(material.Paper, { ref: paperRef, elevation: 0, sx: {
|
|
317
|
+
mt: 1,
|
|
318
|
+
border: '1px solid #4D3019',
|
|
319
|
+
boxShadow: 'none',
|
|
320
|
+
backgroundColor: '#FEFDF7',
|
|
321
|
+
...(isDesktop
|
|
322
|
+
? {
|
|
323
|
+
maxHeight: items.length > maxVisibleResults
|
|
324
|
+
? maxVisibleResults * approxItemHeight
|
|
325
|
+
: 'auto',
|
|
326
|
+
borderRadius: '12px',
|
|
327
|
+
overflowX: 'hidden',
|
|
328
|
+
overflowY: items.length > maxVisibleResults ? 'auto' : 'hidden',
|
|
329
|
+
pb: 1.5,
|
|
330
|
+
}
|
|
331
|
+
: {
|
|
332
|
+
overflow: 'hidden', // no scroll, no scrollbar
|
|
333
|
+
pb: 0,
|
|
334
|
+
}),
|
|
335
|
+
}, children: jsxRuntime.jsx(material.List, { dense: true, disablePadding: true, children: items.map((item, index) => (jsxRuntime.jsx(material.ListItemButton, { alignItems: "flex-start", onClick: () => onPick(item), sx: {
|
|
336
|
+
py: 1.5,
|
|
337
|
+
px: 2,
|
|
338
|
+
backgroundColor: '#FEFDF7',
|
|
339
|
+
// dividers only on mobile (your current mobile styling)
|
|
340
|
+
...(isDesktop
|
|
341
|
+
? {}
|
|
342
|
+
: {
|
|
343
|
+
borderBottom: index === items.length - 1
|
|
344
|
+
? 'none'
|
|
345
|
+
: '1px solid rgba(77,48,25,0.18)',
|
|
346
|
+
}),
|
|
347
|
+
'&:hover': { backgroundColor: '#F9F0FC' },
|
|
348
|
+
'&:hover .search-result-title': {
|
|
349
|
+
textDecoration: 'underline',
|
|
350
|
+
color: '#AD46FF',
|
|
351
|
+
},
|
|
352
|
+
}, children: jsxRuntime.jsx(material.ListItemText, { primary: item.label, secondary: renderDescription(item.description), primaryTypographyProps: {
|
|
353
|
+
className: 'search-result-title',
|
|
354
|
+
fontWeight: 700,
|
|
355
|
+
fontSize: '16px',
|
|
356
|
+
color: '#4D3019',
|
|
357
|
+
}, secondaryTypographyProps: { component: 'div', mt: 1 } }) }, index))) }) }));
|
|
358
|
+
};
|
|
359
|
+
return (jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsxs(StyledHeader, { ref: headerRef, children: [isActive && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.IconButton, { disableRipple: true, onClick: toggleMenu, sx: { display: { xs: 'block', md: 'none' } }, size: "large", children: jsxRuntime.jsx(iconsMaterial.MenuRounded, { sx: { fontSize: 32, color: 'white' } }) }), jsxRuntime.jsx(material.Divider, { orientation: "vertical", sx: {
|
|
360
|
+
color: '#FFFFFF',
|
|
361
|
+
borderRightWidth: 2,
|
|
362
|
+
display: { xs: 'block', md: 'none' },
|
|
363
|
+
} })] })), jsxRuntime.jsx(StyledLogoWrapper, { children: jsxRuntime.jsx(StyledLogoIcon, { children: jsxRuntime.jsx(StyledLogoSvg, {}) }) }), isActive && isMdUp && (jsxRuntime.jsxs(StyledSearchContainer, { children: [jsxRuntime.jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, value: searchQuery, inputRef: desktopInputRef, ref: desktopFieldRef, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: handleKeyDown, InputProps: {
|
|
364
|
+
endAdornment: (jsxRuntime.jsxs(material.InputAdornment, { position: "end", children: [jsxRuntime.jsx(material.Box, { sx: { mr: 1 }, children: isSearching ? jsxRuntime.jsx(material.CircularProgress, { size: 24 }) : null }), jsxRuntime.jsx(StyledSearchButton, { onClick: handleSearchClick, children: jsxRuntime.jsx(StyledSearchIcon, { children: jsxRuntime.jsx(iconsMaterial.SearchRounded, {}) }) })] })),
|
|
365
|
+
} }), jsxRuntime.jsx(material.Popper, { open: openDropdown && !!desktopFieldRef.current, anchorEl: desktopFieldRef.current, placement: "bottom-start", style: { zIndex: 1300, width: desktopFieldRef.current?.offsetWidth }, children: !isSearching && results.length === 0 ? (jsxRuntime.jsx(material.Paper, { elevation: 0, sx: {
|
|
366
|
+
mt: 1,
|
|
367
|
+
border: '1px solid #4D3019',
|
|
368
|
+
boxShadow: 'none',
|
|
369
|
+
backgroundColor: '#FEFDF7',
|
|
370
|
+
borderRadius: '12px',
|
|
371
|
+
px: 2,
|
|
372
|
+
py: 1.5,
|
|
373
|
+
}, children: jsxRuntime.jsx(material.Typography, { sx: { fontSize: '14px', color: '#4D3019' }, children: "No results found" }) })) : (jsxRuntime.jsx(ResultsList, { mode: "desktop", items: results, onPick: (item) => {
|
|
239
374
|
onResultClick?.(item);
|
|
240
375
|
setOpenDropdown(false);
|
|
241
|
-
}, children: jsxRuntime.jsx(
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
376
|
+
} })) })] })), jsxRuntime.jsxs(StyledUserContainer, { children: [isActive && !isMdUp && (jsxRuntime.jsx(StyledSearchButton, { disableRipple: true, onClick: toggleMobileSearch, sx: {
|
|
377
|
+
display: { xs: 'flex', md: 'none' },
|
|
378
|
+
backgroundColor: '#ffffff83',
|
|
379
|
+
}, children: jsxRuntime.jsx(StyledSearchIcon, { children: jsxRuntime.jsx(iconsMaterial.SearchRounded, {}) }) })), jsxRuntime.jsxs(material.IconButton, { onClick: handleOpen, disableRipple: true, children: [jsxRuntime.jsx(StyledAvatar, { children: jsxRuntime.jsx(StyledAvatarText, { children: userInitials }) }), jsxRuntime.jsx(StyledUserName, { children: userName })] })] }), jsxRuntime.jsx(PopoverMenu.default, { anchorEl: anchorEl, onClose: handleClose, signOut: () => {
|
|
380
|
+
signOut();
|
|
381
|
+
handleClose();
|
|
382
|
+
} })] }), !isMdUp && (jsxRuntime.jsx(material.Collapse, { in: isActive && mobileSearchOpen, unmountOnExit: true, timeout: 200, children: jsxRuntime.jsxs(material.Box, { sx: {
|
|
383
|
+
display: { xs: 'block', md: 'none' },
|
|
384
|
+
backgroundColor: theme.palette.primary.main,
|
|
385
|
+
px: 2,
|
|
386
|
+
pt: 1.5,
|
|
387
|
+
pb: 2,
|
|
388
|
+
}, children: [jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', gap: 1, alignItems: 'center' }, children: [jsxRuntime.jsx(StyledTextField, { placeholder: "Search for a policy", variant: "outlined", fullWidth: true, value: searchQuery, inputRef: mobileInputRef, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: handleKeyDown, InputProps: {
|
|
389
|
+
endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: isSearching ? jsxRuntime.jsx(material.CircularProgress, { size: 18 }) : null }))
|
|
390
|
+
} }), jsxRuntime.jsx(material.IconButton, { onClick: closeMobileSearch, sx: { color: theme.palette.light.main }, children: jsxRuntime.jsx(iconsMaterial.CloseRounded, {}) })] }), openDropdown && (jsxRuntime.jsx(material.Box, { sx: { mx: -2 }, children: !isSearching && results.length === 0 && searchQuery.trim() ? (jsxRuntime.jsx(material.Paper, { elevation: 0, sx: {
|
|
391
|
+
mt: 1,
|
|
392
|
+
border: '1px solid #4D3019',
|
|
393
|
+
boxShadow: 'none',
|
|
394
|
+
backgroundColor: '#FEFDF7',
|
|
395
|
+
px: 2,
|
|
396
|
+
py: 1.5,
|
|
397
|
+
}, children: jsxRuntime.jsx(material.Typography, { sx: { fontSize: '14px', color: '#4D3019' }, children: "No results found" }) })) : (mobileResultsToShow.length > 0 && (jsxRuntime.jsx(ResultsList, { mode: "mobile", items: mobileResultsToShow, paperRef: mobileResultsPaperRef, onPick: (item) => {
|
|
398
|
+
onResultClick?.(item);
|
|
399
|
+
setOpenDropdown(false);
|
|
400
|
+
} }))) }))] }) }))] }));
|
|
254
401
|
};
|
|
255
402
|
|
|
256
403
|
exports.Header = Header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["import React, { ChangeEvent } from 'react';\r\nimport {\r\n Box,\r\n styled,\r\n Typography,\r\n TextField,\r\n IconButton,\r\n Divider,\r\n Popper,\r\n Paper,\r\n List,\r\n ListItemText,\r\n ListItemButton,\r\n} from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { MenuRounded, SearchRounded } from '@mui/icons-material';\r\nimport PopoverMenu from './PopoverMenu';\r\nimport { ReactComponent as Logo } from '../images/PrimaryLogo_Variation_Cream.svg';\r\n\r\ntype SignUpStatus = 'Withdrawn' | 'Onboarding' | 'Active' | 'In Review';\r\ninterface HeaderProps {\r\n userName?: string;\r\n userInitials?: string;\r\n toggleMenu: () => void;\r\n signOut: () => void;\r\n search?: (query: string) => Promise<HeaderSearchResult[]> | HeaderSearchResult[];\r\n onResultClick?: (result: HeaderSearchResult) => void;\r\n signUpStatus: SignUpStatus;\r\n}\r\n\r\nexport interface HeaderSearchResult {\r\n label: string;\r\n description?: string;\r\n value: string;\r\n}\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\r\n [theme.breakpoints.up('md')]: {\r\n gap: theme.spacing(4), // md:gap-4\r\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n padding: 0, // px-4 py-3\r\n },\r\n}));\r\n\r\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(1.5),\r\n gap: theme.spacing(2),\r\n height: '64px', \r\n}));\r\n\r\n\r\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n}));\r\n\r\n\r\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 700, // font-bold\r\n letterSpacing: '0.05em', // tracking-wide\r\n fontSize: '1.5rem', // text-2xl\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '1.25rem', // sm:text-xl\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.125rem', // text-lg\r\n },\r\n}));\r\n\r\nconst StyledLogoSvg = styled(Logo)`\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n`;\r\n\r\n\r\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\r\n flex: 1,\r\n maxWidth: '32rem', // max-w-2xl\r\n margin: theme.spacing(0, 2), // mx-8\r\n position: 'relative',\r\n}));\r\n\r\nconst StyledTextField = styled(TextField)(({ theme }) => ({\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n borderRadius: '9999px', // rounded-full\r\n fontSize: '1rem', // text-base\r\n [theme.breakpoints.down('md')]: {\r\n paddingRight: theme.spacing(5), // sm:pr-10\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n },\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1.5, 3), // px-4 py-2\r\n [theme.breakpoints.up('md')]: {\r\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(1.5, 2.5), // sm:px-5\r\n },\r\n },\r\n '& .MuiInputBase-input::placeholder': {\r\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\r\n opacity: 1,\r\n },\r\n '& .MuiInputBase-root:focus-within': {\r\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\r\n outlineOffset: 0,\r\n },\r\n}));\r\n\r\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'static',\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.primary.main,\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n marginRight: theme.spacing(1),\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(0.5),\r\n },\r\n '&:hover': {\r\n opacity: 0.9,\r\n backgroundColor: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\r\n display: 'flex', \r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n width: '100%',\r\n height: '100%',\r\n '& svg': {\r\n fontSize: '1.5rem',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.25rem',\r\n },\r\n },\r\n}));\r\n\r\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(3), // md:gap-3\r\n [theme.breakpoints.down('md')]: {\r\n gap: 0,\r\n },\r\n}));\r\n\r\nconst StyledAvatar = styled(Box)(({ theme }) => ({\r\n width: theme.spacing(6), // md:w-12\r\n height: theme.spacing(6), // md:h-12\r\n borderRadius: '50%', // rounded-full\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5), // sm:w-10\r\n height: theme.spacing(5), // sm:h-10\r\n }\r\n}));\r\n\r\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n fontWeight: 700, // font-bold\r\n fontSize: '1.125rem', // text-lg\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n}));\r\n\r\nconst StyledUserName = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 500, // font-medium\r\n marginLeft: theme.spacing(1),\r\n fontSize: '1.125rem', // text-lg\r\n display: 'none', // hidden\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'inline', // sm:inline\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n display: 'none'\r\n },\r\n}));\r\n\r\nexport const Header: React.FC<HeaderProps> = ({\r\n userName = 'John Doe',\r\n userInitials = 'JD',\r\n toggleMenu,\r\n signOut,\r\n search,\r\n onResultClick,\r\n signUpStatus,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\r\n const [searchQuery, setSearchQuery] = React.useState('');\r\n const [results, setResults] = React.useState<HeaderSearchResult[]>([]);\r\n const [openDropdown, setOpenDropdown] = React.useState(false);\r\n const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n const debounceRef = React.useRef<number | undefined>(undefined);\r\n\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const runSearch = async (term: string) => {\r\n if (!search) {\r\n setResults([]);\r\n setOpenDropdown(false);\r\n return;\r\n }\r\n\r\n const trimmed = term.trim();\r\n if (!trimmed) {\r\n setResults([]);\r\n setOpenDropdown(false);\r\n return;\r\n }\r\n\r\n const res = await Promise.resolve(search(trimmed));\r\n const list = Array.isArray(res) ? res : [];\r\n setResults(list);\r\n setOpenDropdown(list.length > 0);\r\n };\r\n\r\n const handleSearchClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\r\n e.preventDefault();\r\n runSearch(searchQuery);\r\n };\r\n\r\n\r\n React.useEffect(() => {\r\n const handler = (e: MouseEvent) => {\r\n const anchor = inputRef.current?.parentElement;\r\n if (anchor && !anchor.contains(e.target as Node)) {\r\n setOpenDropdown(false);\r\n }\r\n };\r\n document.addEventListener('click', handler);\r\n return () => document.removeEventListener('click', handler);\r\n }, []);\r\n\r\n return (\r\n <StyledHeader>\r\n {signUpStatus === 'Active' && (\r\n <>\r\n <IconButton\r\n disableRipple\r\n onClick={toggleMenu}\r\n sx={{ display: { xs: 'block', md: 'none' } }}\r\n size=\"large\"\r\n >\r\n <MenuRounded sx={{ fontSize: 32, color: 'white' }} />\r\n </IconButton>\r\n\r\n <Divider\r\n orientation=\"vertical\"\r\n sx={{\r\n color: '#FFFFFF',\r\n borderRightWidth: 2,\r\n display: { xs: 'block', md: 'none' },\r\n }}\r\n />\r\n </>\r\n )}\r\n\r\n <StyledLogoWrapper>\r\n <StyledLogoIcon>\r\n <StyledLogoSvg />\r\n </StyledLogoIcon>\r\n </StyledLogoWrapper>\r\n\r\n {/* Search input for md+ screens */}\r\n {signUpStatus === 'Active' && (\r\n <StyledSearchContainer>\r\n <StyledTextField\r\n placeholder=\"Search for a policy\"\r\n variant=\"outlined\"\r\n fullWidth\r\n value={searchQuery}\r\n inputRef={inputRef}\r\n onChange={(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const value = event.target.value;\r\n setSearchQuery(value);\r\n\r\n window.clearTimeout(debounceRef.current);\r\n debounceRef.current = window.setTimeout(() => {\r\n runSearch(value);\r\n }, 300); // 300ms debounce\r\n }}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter') {\r\n handleSearchClick;\r\n }\r\n }}\r\n sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}\r\n InputProps={{\r\n endAdornment: (\r\n <StyledSearchButton onClick={handleSearchClick}>\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n ),\r\n }}\r\n />\r\n\r\n {/* 🔽 Dropdown with results */}\r\n <Popper\r\n open={openDropdown && results.length > 0}\r\n anchorEl={inputRef.current}\r\n placement=\"bottom-start\"\r\n style={{\r\n zIndex: 1300,\r\n width: inputRef.current?.offsetWidth,\r\n }}\r\n >\r\n <Paper\r\n elevation={3}\r\n sx={{\r\n mt: 1,\r\n borderRadius: 2,\r\n maxHeight: 320,\r\n overflowY: 'auto',\r\n }}\r\n >\r\n <List dense disablePadding>\r\n {results.map((item, index) => (\r\n <ListItemButton\r\n key={index}\r\n onClick={() => {\r\n onResultClick?.(item);\r\n setOpenDropdown(false);\r\n }}\r\n >\r\n <ListItemText\r\n primary={item.label}\r\n secondary={item.description}\r\n primaryTypographyProps={{\r\n fontWeight: 700,\r\n fontSize: '0.95rem',\r\n }}\r\n secondaryTypographyProps={{\r\n fontSize: '0.85rem',\r\n mt: 0.25,\r\n }}\r\n />\r\n </ListItemButton>\r\n ))}\r\n </List>\r\n </Paper>\r\n </Popper>\r\n </StyledSearchContainer>\r\n )}\r\n\r\n <StyledUserContainer>\r\n {/* Search button only visible on XS screens (you can wire this up later) */}\r\n {signUpStatus === 'Active' && (\r\n <StyledSearchButton\r\n disableRipple\r\n sx={{\r\n display: { xs: 'flex', md: 'none' },\r\n backgroundColor: '#ffffff83',\r\n }}\r\n >\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n )}\r\n <IconButton onClick={handleOpen} disableRipple>\r\n <StyledAvatar>\r\n <StyledAvatarText>{userInitials}</StyledAvatarText>\r\n </StyledAvatar>\r\n <StyledUserName>{userName}</StyledUserName>\r\n </IconButton>\r\n </StyledUserContainer>\r\n\r\n <PopoverMenu\r\n anchorEl={anchorEl}\r\n onClose={handleClose}\r\n signOut={() => {\r\n signOut();\r\n handleClose();\r\n }}\r\n />\r\n </StyledHeader>\r\n );\r\n};"],"names":["styled","Box","Typography","Logo","TextField","IconButton","_jsxs","_Fragment","_jsx","MenuRounded","Divider","SearchRounded","Popper","Paper","List","ListItemButton","ListItemText","PopoverMenu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["import React, { ChangeEvent } from 'react';\r\nimport {\r\n Box,\r\n styled,\r\n Typography,\r\n TextField,\r\n IconButton,\r\n Divider,\r\n Popper,\r\n Paper,\r\n List,\r\n ListItemText,\r\n ListItemButton,\r\n Collapse,\r\n useMediaQuery,\r\n CircularProgress,\r\n InputAdornment,\r\n} from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { MenuRounded, SearchRounded, CloseRounded } from '@mui/icons-material';\r\nimport PopoverMenu from './PopoverMenu';\r\nimport { ReactComponent as Logo } from '../images/PrimaryLogo_Variation_Cream.svg';\r\n\r\ntype SignUpStatus = 'Withdrawn' | 'Onboarding' | 'Active' | 'In Review';\r\ninterface HeaderProps {\r\n userName?: string;\r\n userInitials?: string;\r\n toggleMenu: () => void;\r\n signOut: () => void;\r\n search?: (query: string) => Promise<HeaderSearchResult[]> | HeaderSearchResult[];\r\n onResultClick?: (result: HeaderSearchResult) => void;\r\n signUpStatus: SignUpStatus;\r\n resetKey?: string | number;\r\n}\r\n\r\nexport interface HeaderSearchResult {\r\n label: string;\r\n description?: string;\r\n value: string;\r\n}\r\n\r\nfunction renderDescription(desc: string): React.ReactNode {\r\n if (!desc) return null;\r\n\r\n const lines = desc.split(/\\r?\\n/).filter(line => line.trim().length > 0);\r\n\r\n const bulletLines = lines.filter(line => line.trim().startsWith(\"* \"));\r\n const nonBulletLines = lines.filter(line => !line.trim().startsWith(\"* \"));\r\n\r\n return (\r\n <div style={{ fontSize: 14, lineHeight: 1.5 }}>\r\n {nonBulletLines.length > 0 && (\r\n <div\r\n style={{\r\n whiteSpace: \"pre-line\",\r\n marginBottom: bulletLines.length > 0 ? 6 : 0, // spacing above bullets\r\n }}\r\n >\r\n {nonBulletLines.join(\"\\n\")}\r\n </div>\r\n )}\r\n\r\n {bulletLines.length > 0 && (\r\n <ul style={{ margin: 0, paddingLeft: 18 }}>\r\n {bulletLines.map((line, idx) => (\r\n <li key={idx}>\r\n {line.trim().replace(/^\\*\\s*/, \"\")}\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start',\r\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\r\n [theme.breakpoints.up('md')]: {\r\n gap: theme.spacing(4), // md:gap-4\r\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n padding: 0, // px-4 py-3\r\n },\r\n}));\r\n\r\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(1.5),\r\n gap: theme.spacing(2),\r\n height: '64px', \r\n}));\r\n\r\n\r\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n}));\r\n\r\n\r\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 700, // font-bold\r\n letterSpacing: '0.05em', // tracking-wide\r\n fontSize: '1.5rem', // text-2xl\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '1.25rem', // sm:text-xl\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.125rem', // text-lg\r\n },\r\n}));\r\n\r\nconst StyledLogoSvg = styled(Logo)`\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n`;\r\n\r\n\r\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\r\n flex: 1,\r\n maxWidth: '45rem',\r\n margin: theme.spacing(0, 2), // mx-8\r\n position: 'relative',\r\n}));\r\n\r\nconst StyledTextField = styled(TextField)(({ theme }) => ({\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n borderRadius: '9999px', // rounded-full\r\n fontSize: '1rem', // text-base\r\n [theme.breakpoints.down('md')]: {\r\n paddingRight: theme.spacing(5), // sm:pr-10\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n },\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1.5, 3), // px-4 py-2\r\n [theme.breakpoints.up('md')]: {\r\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(1.5, 2.5), // sm:px-5\r\n },\r\n },\r\n '& .MuiInputBase-input::placeholder': {\r\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\r\n opacity: 1,\r\n },\r\n '& .MuiInputBase-root:focus-within': {\r\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\r\n outlineOffset: 0,\r\n },\r\n}));\r\n\r\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'static',\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.primary.main,\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n marginRight: theme.spacing(1),\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(0.5),\r\n },\r\n '&:hover': {\r\n opacity: 0.9,\r\n backgroundColor: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\r\n display: 'flex', \r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n width: '100%',\r\n height: '100%',\r\n '& svg': {\r\n fontSize: '1.5rem',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.25rem',\r\n },\r\n },\r\n}));\r\n\r\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\r\n marginLeft: 'auto',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(3), // md:gap-3\r\n [theme.breakpoints.down('md')]: {\r\n gap: 0,\r\n },\r\n}));\r\n\r\nconst StyledAvatar = styled(Box)(({ theme }) => ({\r\n width: theme.spacing(6), // md:w-12\r\n height: theme.spacing(6), // md:h-12\r\n borderRadius: '50%', // rounded-full\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5), // sm:w-10\r\n height: theme.spacing(5), // sm:h-10\r\n }\r\n}));\r\n\r\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n fontWeight: 700, // font-bold\r\n fontSize: '1.125rem', // text-lg\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n}));\r\n\r\nconst StyledUserName = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 500, // font-medium\r\n marginLeft: theme.spacing(1),\r\n fontSize: '1.125rem', // text-lg\r\n display: 'none', // hidden\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'inline', // sm:inline\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n display: 'none'\r\n },\r\n}));\r\n\r\nexport const Header: React.FC<HeaderProps> = ({\r\n userName = 'John Doe',\r\n userInitials = 'JD',\r\n toggleMenu,\r\n signOut,\r\n search,\r\n onResultClick,\r\n signUpStatus,\r\n resetKey,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\r\n const [searchQuery, setSearchQuery] = React.useState('');\r\n const [results, setResults] = React.useState<HeaderSearchResult[]>([]);\r\n const [openDropdown, setOpenDropdown] = React.useState(false);\r\n\r\n const isMdUp = useMediaQuery(theme.breakpoints.up('md'));\r\n const [mobileSearchOpen, setMobileSearchOpen] = React.useState(false);\r\n\r\n const desktopInputRef = React.useRef<HTMLInputElement | null>(null);\r\n const mobileInputRef = React.useRef<HTMLInputElement | null>(null);\r\n const desktopFieldRef = React.useRef<HTMLDivElement | null>(null);\r\n\r\n\r\n const [isSearching, setIsSearching] = React.useState(false);\r\n const headerRef = React.useRef<HTMLDivElement | null>(null);\r\n const isActive = signUpStatus === 'Active';\r\n\r\n const mobileResultsPaperRef = React.useRef<HTMLDivElement | null>(null);\r\n const [mobileResultLimit, setMobileResultLimit] = React.useState(5);\r\n\r\n const searchSeqRef = React.useRef(0);\r\n const debounceRef = React.useRef<number | undefined>(undefined);\r\n const maxVisibleResults = isMdUp ? 5 : 3;\r\n const approxItemHeight = 80; \r\n\r\n // Start at 5 each time results open/change on mobile\r\n React.useLayoutEffect(() => {\r\n if (isMdUp) return;\r\n if (!mobileSearchOpen || !openDropdown) return;\r\n setMobileResultLimit(5);\r\n }, [isMdUp, mobileSearchOpen, openDropdown, results]);\r\n\r\n // If the dropdown would run off-screen, reduce how many results we render\r\n React.useLayoutEffect(() => {\r\n if (isMdUp) return;\r\n if (!mobileSearchOpen || !openDropdown) return;\r\n\r\n const raf = requestAnimationFrame(() => {\r\n const el = mobileResultsPaperRef.current;\r\n if (!el) return;\r\n\r\n const rect = el.getBoundingClientRect();\r\n const overflowPx = rect.bottom - window.innerHeight;\r\n\r\n if (overflowPx > 0) {\r\n setMobileResultLimit((n) => Math.max(1, n - 1));\r\n }\r\n });\r\n\r\n return () => cancelAnimationFrame(raf);\r\n}, [isMdUp, mobileSearchOpen, openDropdown, mobileResultLimit]);\r\n\r\n\r\n const closeMobileSearch = () => {\r\n setMobileSearchOpen(false);\r\n setSearchQuery('');\r\n setResults([]);\r\n setOpenDropdown(false);\r\n window.clearTimeout(debounceRef.current);\r\n };\r\n\r\n const toggleMobileSearch = () => {\r\n setMobileSearchOpen(prev => {\r\n const next = !prev;\r\n if (!next) {\r\n // cancelling\r\n closeMobileSearch();\r\n return false;\r\n }\r\n // opening\r\n setTimeout(() => mobileInputRef.current?.focus(), 0);\r\n return true;\r\n });\r\n };\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const runSearch = async (term: string) => {\r\n if (!search || !term.trim()) {\r\n searchSeqRef.current += 1;\r\n setIsSearching(false);\r\n setResults([]);\r\n setOpenDropdown(false);\r\n return;\r\n }\r\n\r\n const seq = ++searchSeqRef.current;\r\n setIsSearching(true);\r\n try {\r\n const res = await Promise.resolve(search(term.trim()));\r\n\r\n if (seq !== searchSeqRef.current) return; // Fixes debounce race condition causing old searches to appear after newer\r\n\r\n const list = Array.isArray(res) ? res : [];\r\n setResults(list);\r\n setOpenDropdown(true); // display dropdown no matter what, if no results will display no results message\r\n } finally {\r\n if (seq === searchSeqRef.current) setIsSearching(false);\r\n }\r\n };\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n runSearch(searchQuery);\r\n }\r\n };\r\n\r\n const handleSearchChange = (value: string) => {\r\n setSearchQuery(value);\r\n\r\n window.clearTimeout(debounceRef.current);\r\n\r\n if (!value.trim()) {\r\n runSearch(''); // Immediately run if no search to guarantee removal of listed results\r\n return;\r\n }\r\n\r\n debounceRef.current = window.setTimeout(() => runSearch(value), 150);\r\n };\r\n\r\n const handleSearchClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\r\n e.preventDefault();\r\n runSearch(searchQuery);\r\n };\r\n\r\n React.useEffect(() => {\r\n // When parent says the route changed (resetKey changes), reset search UI\r\n closeMobileSearch();\r\n }, [resetKey]);\r\n\r\n React.useEffect(() => {\r\n const handler = (e: MouseEvent) => {\r\n const t = e.target as Node;\r\n\r\n const inDesktop = desktopInputRef.current?.parentElement?.contains(t);\r\n const inMobile = mobileInputRef.current?.parentElement?.contains(t);\r\n\r\n if (!inDesktop && !inMobile) {\r\n setOpenDropdown(false);\r\n }\r\n };\r\n\r\n document.addEventListener('click', handler);\r\n return () => document.removeEventListener('click', handler);\r\n }, []);\r\n\r\n const mobileResultsToShow = results.slice(0, mobileResultLimit);\r\n\r\n type ResultsMode = 'desktop' | 'mobile';\r\n\r\n const ResultsList = ({\r\n items,\r\n mode,\r\n paperRef,\r\n onPick,\r\n }: {\r\n items: HeaderSearchResult[];\r\n mode: ResultsMode;\r\n paperRef?: React.Ref<HTMLDivElement>;\r\n onPick: (item: HeaderSearchResult) => void;\r\n }) => {\r\n const isDesktop = mode === 'desktop';\r\n return (\r\n <Paper\r\n ref={paperRef}\r\n elevation={0}\r\n \r\n sx={{\r\n mt: 1,\r\n border: '1px solid #4D3019',\r\n boxShadow: 'none',\r\n backgroundColor: '#FEFDF7',\r\n\r\n ...(isDesktop\r\n ? {\r\n maxHeight:\r\n items.length > maxVisibleResults\r\n ? maxVisibleResults * approxItemHeight\r\n : 'auto',\r\n borderRadius: '12px',\r\n overflowX: 'hidden',\r\n overflowY: items.length > maxVisibleResults ? 'auto' : 'hidden',\r\n pb: 1.5,\r\n }\r\n : {\r\n overflow: 'hidden', // no scroll, no scrollbar\r\n pb: 0,\r\n }),\r\n }}\r\n >\r\n <List dense disablePadding>\r\n {items.map((item, index) => (\r\n <ListItemButton\r\n key={index}\r\n alignItems=\"flex-start\"\r\n onClick={() => onPick(item)}\r\n sx={{\r\n py: 1.5,\r\n px: 2,\r\n backgroundColor: '#FEFDF7',\r\n\r\n // dividers only on mobile (your current mobile styling)\r\n ...(isDesktop\r\n ? {}\r\n : {\r\n borderBottom:\r\n index === items.length - 1\r\n ? 'none'\r\n : '1px solid rgba(77,48,25,0.18)',\r\n }),\r\n\r\n '&:hover': { backgroundColor: '#F9F0FC' },\r\n '&:hover .search-result-title': {\r\n textDecoration: 'underline',\r\n color: '#AD46FF',\r\n },\r\n }}\r\n >\r\n <ListItemText\r\n primary={item.label}\r\n secondary={renderDescription(item.description!)}\r\n primaryTypographyProps={{\r\n className: 'search-result-title',\r\n fontWeight: 700,\r\n fontSize: '16px',\r\n color: '#4D3019',\r\n }}\r\n secondaryTypographyProps={{ component: 'div', mt: 1 }}\r\n />\r\n </ListItemButton>\r\n ))}\r\n </List>\r\n </Paper>\r\n );\r\n };\r\n\r\n\r\n return (\r\n <Box>\r\n <StyledHeader ref={headerRef}>\r\n {isActive && (\r\n <>\r\n <IconButton\r\n disableRipple\r\n onClick={toggleMenu}\r\n sx={{ display: { xs: 'block', md: 'none' } }}\r\n size=\"large\"\r\n >\r\n <MenuRounded sx={{ fontSize: 32, color: 'white' }} />\r\n </IconButton>\r\n\r\n <Divider\r\n orientation=\"vertical\"\r\n sx={{\r\n color: '#FFFFFF',\r\n borderRightWidth: 2,\r\n display: { xs: 'block', md: 'none' },\r\n }}\r\n />\r\n </>\r\n )}\r\n\r\n <StyledLogoWrapper>\r\n <StyledLogoIcon>\r\n <StyledLogoSvg />\r\n </StyledLogoIcon>\r\n </StyledLogoWrapper>\r\n\r\n {/* Desktop search only */}\r\n {isActive && isMdUp && (\r\n <StyledSearchContainer>\r\n <StyledTextField\r\n placeholder=\"Search for a policy\"\r\n variant=\"outlined\"\r\n fullWidth\r\n value={searchQuery}\r\n inputRef={desktopInputRef}\r\n ref={desktopFieldRef}\r\n onChange={(e) => handleSearchChange(e.target.value)}\r\n onKeyDown={handleKeyDown}\r\n InputProps={{\r\n endAdornment: (\r\n <InputAdornment position=\"end\">\r\n <Box sx = {{ mr: 1}}>\r\n {isSearching ? <CircularProgress size={24} /> : null} \r\n </Box>\r\n <StyledSearchButton onClick={handleSearchClick}>\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n </InputAdornment>\r\n ),\r\n }}\r\n />\r\n\r\n <Popper\r\n open={openDropdown && !!desktopFieldRef.current}\r\n anchorEl={desktopFieldRef.current}\r\n placement=\"bottom-start\"\r\n style={{ zIndex: 1300, width: desktopFieldRef.current?.offsetWidth }}\r\n >\r\n {!isSearching && results.length === 0 ? (\r\n <Paper\r\n elevation={0}\r\n sx={{\r\n mt: 1,\r\n border: '1px solid #4D3019',\r\n boxShadow: 'none',\r\n backgroundColor: '#FEFDF7',\r\n borderRadius: '12px',\r\n px: 2,\r\n py: 1.5,\r\n }}\r\n >\r\n <Typography sx={{ fontSize: '14px', color: '#4D3019' }}>\r\n No results found\r\n </Typography>\r\n </Paper>\r\n ) : (\r\n <ResultsList\r\n mode=\"desktop\"\r\n items={results}\r\n onPick={(item) => {\r\n onResultClick?.(item);\r\n setOpenDropdown(false);\r\n }}\r\n />\r\n )}\r\n </Popper>\r\n </StyledSearchContainer>\r\n )}\r\n\r\n <StyledUserContainer>\r\n {/* Mobile search button only */}\r\n {isActive && !isMdUp && (\r\n <StyledSearchButton\r\n disableRipple\r\n onClick={toggleMobileSearch}\r\n sx={{\r\n display: { xs: 'flex', md: 'none' },\r\n backgroundColor: '#ffffff83',\r\n }}\r\n >\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n )}\r\n\r\n <IconButton onClick={handleOpen} disableRipple>\r\n <StyledAvatar>\r\n <StyledAvatarText>{userInitials}</StyledAvatarText>\r\n </StyledAvatar>\r\n <StyledUserName>{userName}</StyledUserName>\r\n </IconButton>\r\n </StyledUserContainer>\r\n\r\n <PopoverMenu\r\n anchorEl={anchorEl}\r\n onClose={handleClose}\r\n signOut={() => {\r\n signOut();\r\n handleClose();\r\n }}\r\n />\r\n </StyledHeader>\r\n\r\n {/* Mobile panel only */}\r\n {!isMdUp && (\r\n <Collapse in={isActive && mobileSearchOpen} unmountOnExit timeout={200}>\r\n <Box\r\n sx={{\r\n display: { xs: 'block', md: 'none' },\r\n backgroundColor: theme.palette.primary.main,\r\n px: 2,\r\n pt: 1.5,\r\n pb: 2,\r\n }}\r\n >\r\n <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>\r\n <StyledTextField\r\n placeholder=\"Search for a policy\"\r\n variant=\"outlined\"\r\n fullWidth\r\n value={searchQuery}\r\n inputRef={mobileInputRef}\r\n onChange={(e) => handleSearchChange(e.target.value)}\r\n onKeyDown={handleKeyDown}\r\n InputProps={{\r\n endAdornment: (\r\n <InputAdornment position=\"end\">\r\n {isSearching ? <CircularProgress size={18} /> : null}\r\n </InputAdornment>\r\n )\r\n }}\r\n />\r\n\r\n <IconButton onClick={closeMobileSearch} sx={{ color: theme.palette.light.main }}>\r\n <CloseRounded />\r\n </IconButton>\r\n </Box>\r\n {openDropdown && (\r\n <Box sx={{ mx: -2 }}>\r\n {!isSearching && results.length === 0 && searchQuery.trim() ? (\r\n <Paper\r\n elevation={0}\r\n sx={{\r\n mt: 1,\r\n border: '1px solid #4D3019',\r\n boxShadow: 'none',\r\n backgroundColor: '#FEFDF7',\r\n px: 2,\r\n py: 1.5,\r\n }}\r\n >\r\n <Typography sx={{ fontSize: '14px', color: '#4D3019' }}>\r\n No results found\r\n </Typography>\r\n </Paper>\r\n ) : (\r\n mobileResultsToShow.length > 0 && (\r\n <ResultsList\r\n mode=\"mobile\"\r\n items={mobileResultsToShow}\r\n paperRef={mobileResultsPaperRef}\r\n onPick={(item) => {\r\n onResultClick?.(item);\r\n setOpenDropdown(false);\r\n }}\r\n />\r\n )\r\n )}\r\n </Box>\r\n )}\r\n </Box>\r\n </Collapse>\r\n )}\r\n </Box>\r\n );\r\n};"],"names":["_jsxs","_jsx","styled","Box","Typography","Logo","TextField","IconButton","useTheme","useMediaQuery","Paper","List","ListItemButton","ListItemText","_Fragment","MenuRounded","Divider","InputAdornment","CircularProgress","SearchRounded","Popper","PopoverMenu","Collapse","CloseRounded"],"mappings":"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"}
|
|
@@ -99,7 +99,6 @@ const NoteBox = ({ status, requirementType, label, note, children, className = '
|
|
|
99
99
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
100
100
|
// Map current status
|
|
101
101
|
const variableState = variableProcessing.mapStatusToVariableState(status);
|
|
102
|
-
console.log("HELLO", status, requirementType);
|
|
103
102
|
const requirementTypeState = variableProcessing.mapRequirementTypeToState(requirementType);
|
|
104
103
|
const style = variableState
|
|
105
104
|
? statusConfig[variableState]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\nimport { RequirementType, VariableState } from '../types/variable';\r\nimport { mapRequirementTypeToState, mapStatusToVariableState } from '../helpers/variableProcessing';\r\n\r\ninterface NoteBoxProps {\r\n status?: string; // Use only status now\r\n requirementType?: string;\r\n label?: string;\r\n note?: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n onEditClick?: () => void;\r\n}\r\n\r\n// Status based color configs (from Modal)\r\nconst statusConfig: {\r\n [key in VariableState]: {\r\n highlight: string;\r\n highlightSelected: string;\r\n label: string;\r\n alertVariant?: \"error\" | \"info\";\r\n }\r\n} = {\r\n Accepted: {\r\n highlight: '#EDF9CD',\r\n highlightSelected: '#DBF59A',\r\n label: 'Accepted',\r\n },\r\n Pending: {\r\n highlight: '#F5E2FF',\r\n highlightSelected: '#EBC7FF',\r\n label: 'Pending',\r\n alertVariant: 'info',\r\n },\r\n 'Action Required': {\r\n highlight: '#FBEEEE',\r\n highlightSelected: '#FFBCB3',\r\n label: 'ActionRequired',\r\n alertVariant: 'error',\r\n },\r\n 'Declined': {\r\n highlight: '#FFF6D1',\r\n highlightSelected: '#FDE58E',\r\n label: 'Declined',\r\n },\r\n 'Not Started': {\r\n highlight: '#f8c97cff',\r\n highlightSelected: '#F5A623',\r\n label: 'Not Started',\r\n },\r\n Draft: {\r\n highlight: '#FFEACD',\r\n highlightSelected: '#FFC365',\r\n label: 'Draft',\r\n },\r\n};\r\n\r\nconst NoteContainer = styled(Box)({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n shouldForwardProp: (prop) =>\r\n prop !== 'isHovered' &&\r\n prop !== 'highlightColor' &&\r\n prop !== 'highlightSelectedColor'\r\n})<{\r\n isHovered: boolean;\r\n highlightColor: string;\r\n highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n '&:hover .edit-button': {\r\n opacity: 1,\r\n },\r\n '& .highlight-span': {\r\n background: isHovered ? highlightSelectedColor : highlightColor,\r\n padding: '2px 4px',\r\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n boxDecorationBreak: 'clone',\r\n WebkitBoxDecorationBreak: 'clone',\r\n transition: 'background 0.2s ease',\r\n cursor: 'pointer',\r\n fontSize: '1rem',\r\n wordWrap: 'break-word',\r\n overflowWrap: 'break-word',\r\n display: 'inline',\r\n color: '#4D3019',\r\n },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n top: 0,\r\n right: 0,\r\n transform: 'translate(-50%, -50%)',\r\n position: 'relative',\r\n width: 20,\r\n height: 20,\r\n marginRight: -20,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: '#4D3019',\r\n opacity: 0,\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n '&:hover': {\r\n backgroundColor: '#4D3019',\r\n transform: 'translate(-50%, -50%) scale(1.1)',\r\n },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n status,\r\n requirementType,\r\n label,\r\n note,\r\n children,\r\n className = '',\r\n onEditClick,\r\n}) => {\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n // Map current status\r\n const variableState = mapStatusToVariableState(status!!);\r\n console.log(\"HELLO\", status, requirementType);\r\n const requirementTypeState = mapRequirementTypeToState(requirementType!!)\r\n\r\n const style = variableState\r\n ? statusConfig[variableState]\r\n : {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n };\r\n\r\n\r\n const reqTypeConfig = {\r\n Default: {\r\n color: '#F5A623',\r\n highlight: '#f3bf6bff',\r\n highlightSelected: '#F5A623',\r\n label: 'Mandatory',\r\n },\r\n Optional: {\r\n color: '#F5D76E',\r\n highlight: '#f3e2a5ff',\r\n highlightSelected: '#F5D76E',\r\n label: 'Optional',\r\n },\r\n };\r\n\r\n\r\n const requirementTypeStyle = requirementTypeState ? reqTypeConfig[requirementTypeState] :\r\n {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n };;\r\n\r\n \r\n return (\r\n <NoteContainer className={className}>\r\n {/* Alert for note when status matches and note available */}\r\n {variableState && style.alertVariant && note && (\r\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\r\n {note}\r\n </Alert>\r\n )}\r\n\r\n {/* Highlighted content box */}\r\n <HighlightWrapper\r\n isHovered={isHovered}\r\n highlightColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlight : style.highlight}\r\n highlightSelectedColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlightSelected : style.highlightSelected}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n >\r\n <span className=\"highlight-span\" style={{display:'inline'}}>{children}</span>\r\n <EditButton\r\n className=\"edit-button\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n size=\"small\"\r\n >\r\n {variableState === VariableState.Accepted\r\n ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} />\r\n : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n </EditButton>\r\n </HighlightWrapper>\r\n </NoteContainer>\r\n );\r\n};\r\n"],"names":["styled","Box","IconButton","useState","mapStatusToVariableState","mapRequirementTypeToState","_jsxs","_jsx","Alert","VariableState","CheckRounded","EditRounded"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\nimport { RequirementType, VariableState } from '../types/variable';\r\nimport { mapRequirementTypeToState, mapStatusToVariableState } from '../helpers/variableProcessing';\r\n\r\ninterface NoteBoxProps {\r\n status?: string; // Use only status now\r\n requirementType?: string;\r\n label?: string;\r\n note?: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n onEditClick?: () => void;\r\n}\r\n\r\n// Status based color configs (from Modal)\r\nconst statusConfig: {\r\n [key in VariableState]: {\r\n highlight: string;\r\n highlightSelected: string;\r\n label: string;\r\n alertVariant?: \"error\" | \"info\";\r\n }\r\n} = {\r\n Accepted: {\r\n highlight: '#EDF9CD',\r\n highlightSelected: '#DBF59A',\r\n label: 'Accepted',\r\n },\r\n Pending: {\r\n highlight: '#F5E2FF',\r\n highlightSelected: '#EBC7FF',\r\n label: 'Pending',\r\n alertVariant: 'info',\r\n },\r\n 'Action Required': {\r\n highlight: '#FBEEEE',\r\n highlightSelected: '#FFBCB3',\r\n label: 'ActionRequired',\r\n alertVariant: 'error',\r\n },\r\n 'Declined': {\r\n highlight: '#FFF6D1',\r\n highlightSelected: '#FDE58E',\r\n label: 'Declined',\r\n },\r\n 'Not Started': {\r\n highlight: '#f8c97cff',\r\n highlightSelected: '#F5A623',\r\n label: 'Not Started',\r\n },\r\n Draft: {\r\n highlight: '#FFEACD',\r\n highlightSelected: '#FFC365',\r\n label: 'Draft',\r\n },\r\n};\r\n\r\nconst NoteContainer = styled(Box)({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n shouldForwardProp: (prop) =>\r\n prop !== 'isHovered' &&\r\n prop !== 'highlightColor' &&\r\n prop !== 'highlightSelectedColor'\r\n})<{\r\n isHovered: boolean;\r\n highlightColor: string;\r\n highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n '&:hover .edit-button': {\r\n opacity: 1,\r\n },\r\n '& .highlight-span': {\r\n background: isHovered ? highlightSelectedColor : highlightColor,\r\n padding: '2px 4px',\r\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n boxDecorationBreak: 'clone',\r\n WebkitBoxDecorationBreak: 'clone',\r\n transition: 'background 0.2s ease',\r\n cursor: 'pointer',\r\n fontSize: '1rem',\r\n wordWrap: 'break-word',\r\n overflowWrap: 'break-word',\r\n display: 'inline',\r\n color: '#4D3019',\r\n },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n top: 0,\r\n right: 0,\r\n transform: 'translate(-50%, -50%)',\r\n position: 'relative',\r\n width: 20,\r\n height: 20,\r\n marginRight: -20,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: '#4D3019',\r\n opacity: 0,\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n '&:hover': {\r\n backgroundColor: '#4D3019',\r\n transform: 'translate(-50%, -50%) scale(1.1)',\r\n },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n status,\r\n requirementType,\r\n label,\r\n note,\r\n children,\r\n className = '',\r\n onEditClick,\r\n}) => {\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n // Map current status\r\n const variableState = mapStatusToVariableState(status!!);\r\n const requirementTypeState = mapRequirementTypeToState(requirementType!!)\r\n\r\n const style = variableState\r\n ? statusConfig[variableState]\r\n : {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n };\r\n\r\n\r\n const reqTypeConfig = {\r\n Default: {\r\n color: '#F5A623',\r\n highlight: '#f3bf6bff',\r\n highlightSelected: '#F5A623',\r\n label: 'Mandatory',\r\n },\r\n Optional: {\r\n color: '#F5D76E',\r\n highlight: '#f3e2a5ff',\r\n highlightSelected: '#F5D76E',\r\n label: 'Optional',\r\n },\r\n };\r\n\r\n\r\n const requirementTypeStyle = requirementTypeState ? reqTypeConfig[requirementTypeState] :\r\n {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n };;\r\n\r\n \r\n return (\r\n <NoteContainer className={className}>\r\n {/* Alert for note when status matches and note available */}\r\n {variableState && style.alertVariant && note && (\r\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\r\n {note}\r\n </Alert>\r\n )}\r\n\r\n {/* Highlighted content box */}\r\n <HighlightWrapper\r\n isHovered={isHovered}\r\n highlightColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlight : style.highlight}\r\n highlightSelectedColor={variableState === VariableState.NotStarted? requirementTypeStyle.highlightSelected : style.highlightSelected}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n >\r\n <span className=\"highlight-span\" style={{display:'inline'}}>{children}</span>\r\n <EditButton\r\n className=\"edit-button\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n size=\"small\"\r\n >\r\n {variableState === VariableState.Accepted\r\n ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} />\r\n : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n </EditButton>\r\n </HighlightWrapper>\r\n </NoteContainer>\r\n );\r\n};\r\n"],"names":["styled","Box","IconButton","useState","mapStatusToVariableState","mapRequirementTypeToState","_jsxs","_jsx","Alert","VariableState","CheckRounded","EditRounded"],"mappings":"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"}
|