ece-docs-components 1.0.90 → 1.0.91
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/components/Breadcrumb.js +32 -17
- package/dist/cjs/components/Breadcrumb.js.map +1 -1
- package/dist/cjs/components/Button.js +14 -0
- package/dist/cjs/components/Button.js.map +1 -1
- package/dist/cjs/components/Input.js +2 -2
- package/dist/cjs/components/Input.js.map +1 -1
- package/dist/cjs/components/RichTextArea.js +1 -1
- package/dist/cjs/components/RichTextArea.js.map +1 -1
- package/dist/cjs/components/Select.js +7 -3
- package/dist/cjs/components/Select.js.map +1 -1
- package/dist/cjs/node_modules/domhandler/lib/index.js +1 -1
- package/dist/cjs/node_modules/html-dom-parser/lib/index.js +1 -1
- package/dist/esm/components/Breadcrumb.js +33 -18
- package/dist/esm/components/Breadcrumb.js.map +1 -1
- package/dist/esm/components/Button.js +14 -0
- package/dist/esm/components/Button.js.map +1 -1
- package/dist/esm/components/Input.js +2 -2
- package/dist/esm/components/Input.js.map +1 -1
- package/dist/esm/components/RichTextArea.js +1 -1
- package/dist/esm/components/RichTextArea.js.map +1 -1
- package/dist/esm/components/Select.js +7 -3
- package/dist/esm/components/Select.js.map +1 -1
- package/package.json +1 -1
|
@@ -40,7 +40,7 @@ const DropdownButton = material.styled("button")(({ theme }) => ({
|
|
|
40
40
|
borderColor: `${theme.palette.dark.main}4D`,
|
|
41
41
|
},
|
|
42
42
|
[theme.breakpoints.down("sm")]: {
|
|
43
|
-
width:
|
|
43
|
+
width: "100%",
|
|
44
44
|
padding: theme.spacing(0.75, 1),
|
|
45
45
|
gap: theme.spacing(0.5),
|
|
46
46
|
},
|
|
@@ -92,8 +92,8 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
92
92
|
const { scrollLeft, scrollWidth, clientWidth } = el;
|
|
93
93
|
const atStart = scrollLeft === 0;
|
|
94
94
|
const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
|
|
95
|
-
const left = atStart ?
|
|
96
|
-
const right = atEnd ?
|
|
95
|
+
const left = atStart ? "black" : "transparent";
|
|
96
|
+
const right = atEnd ? "black" : "transparent";
|
|
97
97
|
const mask = `linear-gradient(to right, ${left}, black 30px, black calc(100% - 30px), ${right})`;
|
|
98
98
|
el.style.maskImage = mask;
|
|
99
99
|
el.style.webkitMaskImage = mask;
|
|
@@ -103,11 +103,11 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
103
103
|
if (!el)
|
|
104
104
|
return;
|
|
105
105
|
updateMask(el); // set on mount
|
|
106
|
-
el.addEventListener(
|
|
107
|
-
return () => el.removeEventListener(
|
|
106
|
+
el.addEventListener("scroll", () => updateMask(el));
|
|
107
|
+
return () => el.removeEventListener("scroll", () => updateMask(el));
|
|
108
108
|
}, []);
|
|
109
109
|
React.useEffect(() => {
|
|
110
|
-
endRef.current?.scrollIntoView({ behavior:
|
|
110
|
+
endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
111
111
|
}, [items]);
|
|
112
112
|
const handleNavigation = (path) => {
|
|
113
113
|
if (onNavigate) {
|
|
@@ -143,13 +143,22 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
143
143
|
minWidth: 0,
|
|
144
144
|
scrollbarWidth: "none",
|
|
145
145
|
"&::-webkit-scrollbar": { display: "none" },
|
|
146
|
-
}, children: items.map((item) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, {}), jsxRuntime.jsx(material.Typography, {
|
|
147
|
-
|
|
146
|
+
}, children: items.map((item) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(iconsMaterial.ChevronRightRounded, {}), item.label === currentItem ? (jsxRuntime.jsx(material.Typography, { sx: {
|
|
147
|
+
fontWeight: 700,
|
|
148
|
+
whiteSpace: "nowrap",
|
|
149
|
+
}, children: item?.label ?? "" })) : (jsxRuntime.jsx(material.Link
|
|
150
|
+
// href={item.href as string}
|
|
151
|
+
, {
|
|
152
|
+
// href={item.href as string}
|
|
153
|
+
underline: item.label === currentItem ? "none" : "always", onClick: () => {
|
|
154
|
+
if (item.label !== currentItem)
|
|
155
|
+
handleNavigation(item.href);
|
|
148
156
|
}, sx: {
|
|
149
|
-
|
|
157
|
+
'&:hover': { cursor: 'pointer' },
|
|
150
158
|
color: theme.palette.dark.main,
|
|
159
|
+
fontWeight: 500,
|
|
151
160
|
whiteSpace: "nowrap",
|
|
152
|
-
}, children: item?.label ?? "" }), jsxRuntime.jsx("div", { ref: endRef })] }, item.label))) }), jsxRuntime.jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
161
|
+
}, children: item?.label ?? "" })), jsxRuntime.jsx("div", { ref: endRef })] }, item.label))) }), jsxRuntime.jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
153
162
|
}
|
|
154
163
|
return (jsxRuntime.jsxs(material.Box, { component: "nav", sx: {
|
|
155
164
|
display: "inline-flex",
|
|
@@ -168,16 +177,22 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
168
177
|
"& .MuiBreadcrumbs-separator": {
|
|
169
178
|
color: `${theme.palette.dark.main}66`,
|
|
170
179
|
},
|
|
171
|
-
}, children: items.map((item) => (jsxRuntime.jsx(material.Typography, { sx: {
|
|
180
|
+
}, children: items.map((item) => (item.label === currentItem ? (jsxRuntime.jsx(material.Typography, { sx: {
|
|
181
|
+
fontWeight: 700,
|
|
182
|
+
whiteSpace: "nowrap",
|
|
183
|
+
}, children: item?.label ?? "" })) : (jsxRuntime.jsx(material.Link
|
|
184
|
+
// href={item.href as string}
|
|
185
|
+
, {
|
|
186
|
+
// href={item.href as string}
|
|
187
|
+
underline: item.label === currentItem ? "none" : "always", onClick: () => {
|
|
188
|
+
if (item.label !== currentItem)
|
|
189
|
+
handleNavigation(item.href);
|
|
190
|
+
}, sx: {
|
|
191
|
+
'&:hover': { cursor: 'pointer' },
|
|
172
192
|
color: theme.palette.dark.main,
|
|
173
193
|
fontWeight: 500,
|
|
174
|
-
px: { xs: 0.5, sm: 1 },
|
|
175
|
-
// minWidth: 0,
|
|
176
194
|
whiteSpace: "nowrap",
|
|
177
|
-
|
|
178
|
-
textOverflow: "ellipsis",
|
|
179
|
-
cursor: item.href ? "pointer" : "default",
|
|
180
|
-
}, onClick: () => item.href && handleNavigation(item.href), children: item.label }, item.label))) }), jsxRuntime.jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
195
|
+
}, children: item?.label ?? "" })))) }), jsxRuntime.jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
181
196
|
};
|
|
182
197
|
|
|
183
198
|
exports.Breadcrumb = Breadcrumb;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\r\nimport {\r\n Box,\r\n Breadcrumbs as MuiBreadcrumbs,\r\n Typography,\r\n IconButton,\r\n Menu,\r\n MenuItem,\r\n styled,\r\n useMediaQuery,\r\n} from \"@mui/material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport {\r\n HomeRounded,\r\n ExpandMoreRounded,\r\n ChevronRightRounded,\r\n} from \"@mui/icons-material\";\r\n\r\ninterface BreadcrumbItem {\r\n label: string;\r\n href?: string;\r\n}\r\n\r\ninterface BreadcrumbProps {\r\n items: BreadcrumbItem[];\r\n currentItem: string;\r\n dropdownItems?: BreadcrumbItem[];\r\n onItemSelect?: (item: BreadcrumbItem) => void;\r\n onNavigate?: (path: string) => void;\r\n}\r\n\r\nconst HomeButton = styled(IconButton)(({ theme }) => ({\r\n width: 40,\r\n height: 40,\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n flexShrink: 0,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n opacity: 0.8,\r\n },\r\n}));\r\n\r\nconst DropdownButton = styled(\"button\")(({ theme }) => ({\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"space-between\",\r\n gap: theme.spacing(1),\r\n padding: theme.spacing(0.75, 2),\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n backgroundColor: \"#fff\",\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n cursor: \"pointer\",\r\n transition: \"border-color 0.2s\",\r\n fontSize: \"0.875rem\",\r\n \"&:hover\": {\r\n borderColor: `${theme.palette.dark.main}4D`,\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: '100%',\r\n padding: theme.spacing(0.75, 1),\r\n gap: theme.spacing(0.5),\r\n },\r\n}));\r\n\r\nconst StyledMenu = styled(Menu)(({ theme }) => ({\r\n \"& .MuiPaper-root\": {\r\n marginTop: theme.spacing(1),\r\n width: \"auto\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\",\r\n },\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n boxShadow:\r\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\r\n },\r\n}));\r\n\r\nconst StyledMenuItem = styled(MenuItem, {\r\n shouldForwardProp: (prop) => prop !== \"isActive\",\r\n})<{ isActive?: boolean }>(({ theme, isActive }) => ({\r\n padding: theme.spacing(1.25, 2),\r\n fontSize: \"0.875rem\",\r\n color: isActive ? theme.palette.primary.main : \"#4D3019\",\r\n fontWeight: isActive ? 500 : 400,\r\n backgroundColor: isActive ? \"#F5F1ED\" : \"transparent\",\r\n whiteSpace: \"normal\",\r\n wordBreak: \"break-word\",\r\n display: \"block\",\r\n \"&:hover\": {\r\n backgroundColor: \"#F5F1ED\",\r\n },\r\n}));\r\n\r\nconst DropdownMenu = ({\r\n dropdownItems,\r\n currentItem,\r\n anchorEl,\r\n isDropdownOpen,\r\n handleDropdownToggle,\r\n handleClose,\r\n handleItemClick,\r\n}: {\r\n dropdownItems: BreadcrumbItem[];\r\n currentItem: string;\r\n anchorEl: HTMLElement | null;\r\n isDropdownOpen: boolean;\r\n handleDropdownToggle: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n handleClose: () => void;\r\n handleItemClick: (item: BreadcrumbItem) => void;\r\n}) => {\r\n return dropdownItems.length > 0 ? (\r\n <Box sx={{ position: \"relative\", flexShrink: 0 }}>\r\n <DropdownButton type=\"button\" onClick={handleDropdownToggle}>\r\n In this section...\r\n <ExpandMoreRounded\r\n sx={{\r\n fontSize: 20,\r\n transition: \"transform 0.2s\",\r\n transform: isDropdownOpen ? \"rotate(180deg)\" : \"rotate(0deg)\",\r\n }}\r\n />\r\n </DropdownButton>\r\n\r\n <StyledMenu\r\n anchorEl={anchorEl}\r\n open={isDropdownOpen}\r\n onClose={handleClose}\r\n disableScrollLock\r\n >\r\n {dropdownItems.map((item, index) => (\r\n <StyledMenuItem\r\n key={index}\r\n onClick={() => handleItemClick(item)}\r\n isActive={item.label === currentItem}\r\n >\r\n {item.label}\r\n </StyledMenuItem>\r\n ))}\r\n </StyledMenu>\r\n </Box>\r\n ) : null;\r\n};\r\n\r\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\r\n items,\r\n currentItem,\r\n dropdownItems = [],\r\n onItemSelect,\r\n onNavigate,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\r\n const isDropdownOpen = Boolean(anchorEl);\r\n const isMobile = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const scrollMask = useRef<HTMLDivElement>(null);\r\n const endRef = useRef<HTMLDivElement>(null);\r\n \r\n const updateMask = (el: { style?: any; scrollLeft?: any; scrollWidth?: any; clientWidth?: any; }) => {\r\n const { scrollLeft, scrollWidth, clientWidth } = el;\r\n const atStart = scrollLeft === 0;\r\n const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;\r\n\r\n const left = atStart ? 'black' : 'transparent';\r\n const right = atEnd ? 'black' : 'transparent';\r\n\r\n const mask = `linear-gradient(to right, ${left}, black 30px, black calc(100% - 30px), ${right})`;\r\n el.style.maskImage = mask;\r\n el.style.webkitMaskImage = mask;\r\n };\r\n\r\n useEffect(() => {\r\n const el = scrollMask.current;\r\n if (!el) return;\r\n updateMask(el); // set on mount\r\n el.addEventListener('scroll', () => updateMask(el));\r\n return () => el.removeEventListener('scroll', () => updateMask(el));\r\n }, []);\r\n\r\n useEffect(() => {\r\n endRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n }, [items]);\r\n\r\n\r\n const handleNavigation = (path: string) => {\r\n if (onNavigate) {\r\n onNavigate(path);\r\n } else {\r\n window.location.href = path;\r\n }\r\n };\r\n\r\n const handleDropdownToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => setAnchorEl(null);\r\n\r\n const handleHomeClick = () => handleNavigation(\"/\");\r\n const handleItemClick = (item: BreadcrumbItem) => {\r\n onItemSelect?.(item);\r\n handleClose();\r\n if (item.href) handleNavigation(item.href);\r\n };\r\n \r\n if (items.length < 1) {\r\n return;\r\n }\r\n\r\n if (isMobile) {\r\n\r\n return (\r\n <Box\r\n display=\"flex\"\r\n flexDirection=\"column\"\r\n gap={2}\r\n >\r\n <Box\r\n ref={scrollMask}\r\n component=\"nav\"\r\n sx={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"start\",\r\n flexWrap: \"nowrap\",\r\n overflowX: \"auto\",\r\n textOverflow: \"ellipsis\",\r\n minWidth: 0,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n {items.map((item) => (\r\n <Fragment key={item.label}>\r\n <ChevronRightRounded />\r\n <Typography\r\n onClick={() => {\r\n handleNavigation(item.href as string);\r\n }}\r\n sx={{\r\n fontWeight: 500,\r\n color: theme.palette.dark.main,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Typography>\r\n <div ref={endRef}/>\r\n </Fragment>\r\n ))}\r\n </Box>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n }\r\n\r\n return (\r\n <Box\r\n component=\"nav\"\r\n sx={{\r\n display: \"inline-flex\",\r\n justifyContent: \"start\",\r\n alignItems: \"center\",\r\n // flexWrap: \"nowrap\",\r\n gap: 1,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n <HomeButton aria-label=\"Home\" onClick={handleHomeClick}>\r\n <HomeRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\r\n </HomeButton>\r\n <MuiBreadcrumbs\r\n separator=\"/\"\r\n sx={{\r\n display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"initial\",\r\n // width: \"fit-content\",\r\n flexShrink: 2,\r\n \"& .MuiBreadcrumbs-separator\": {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n }}\r\n >\r\n {items.map((item) => (\r\n <Typography\r\n key={item.label}\r\n sx={{\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n px: { xs: 0.5, sm: 1 },\r\n // minWidth: 0,\r\n whiteSpace: \"nowrap\",\r\n // overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n cursor: item.href ? \"pointer\" : \"default\",\r\n }}\r\n onClick={() => item.href && handleNavigation(item.href)}\r\n >\r\n {item.label}\r\n </Typography>\r\n ))}\r\n </MuiBreadcrumbs>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n};\r\n"],"names":["styled","IconButton","Menu","MenuItem","_jsxs","Box","_jsx","ExpandMoreRounded","useTheme","useState","useMediaQuery","useRef","useEffect","Fragment","ChevronRightRounded","Typography","HomeRounded","MuiBreadcrumbs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\r\nimport {\r\n Box,\r\n Breadcrumbs as MuiBreadcrumbs,\r\n Typography,\r\n IconButton,\r\n Menu,\r\n MenuItem,\r\n styled,\r\n useMediaQuery,\r\n Link,\r\n} from \"@mui/material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport {\r\n HomeRounded,\r\n ExpandMoreRounded,\r\n ChevronRightRounded,\r\n} from \"@mui/icons-material\";\r\n\r\ninterface BreadcrumbItem {\r\n label: string;\r\n href?: string;\r\n}\r\n\r\ninterface BreadcrumbProps {\r\n items: BreadcrumbItem[];\r\n currentItem: string;\r\n dropdownItems?: BreadcrumbItem[];\r\n onItemSelect?: (item: BreadcrumbItem) => void;\r\n onNavigate?: (path: string) => void;\r\n}\r\n\r\nconst HomeButton = styled(IconButton)(({ theme }) => ({\r\n width: 40,\r\n height: 40,\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n flexShrink: 0,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n opacity: 0.8,\r\n },\r\n}));\r\n\r\nconst DropdownButton = styled(\"button\")(({ theme }) => ({\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"space-between\",\r\n gap: theme.spacing(1),\r\n padding: theme.spacing(0.75, 2),\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n backgroundColor: \"#fff\",\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n cursor: \"pointer\",\r\n transition: \"border-color 0.2s\",\r\n fontSize: \"0.875rem\",\r\n \"&:hover\": {\r\n borderColor: `${theme.palette.dark.main}4D`,\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\",\r\n padding: theme.spacing(0.75, 1),\r\n gap: theme.spacing(0.5),\r\n },\r\n}));\r\n\r\nconst StyledMenu = styled(Menu)(({ theme }) => ({\r\n \"& .MuiPaper-root\": {\r\n marginTop: theme.spacing(1),\r\n width: \"auto\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\",\r\n },\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n boxShadow:\r\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\r\n },\r\n}));\r\n\r\nconst StyledMenuItem = styled(MenuItem, {\r\n shouldForwardProp: (prop) => prop !== \"isActive\",\r\n})<{ isActive?: boolean }>(({ theme, isActive }) => ({\r\n padding: theme.spacing(1.25, 2),\r\n fontSize: \"0.875rem\",\r\n color: isActive ? theme.palette.primary.main : \"#4D3019\",\r\n fontWeight: isActive ? 500 : 400,\r\n backgroundColor: isActive ? \"#F5F1ED\" : \"transparent\",\r\n whiteSpace: \"normal\",\r\n wordBreak: \"break-word\",\r\n display: \"block\",\r\n \"&:hover\": {\r\n backgroundColor: \"#F5F1ED\",\r\n },\r\n}));\r\n\r\nconst DropdownMenu = ({\r\n dropdownItems,\r\n currentItem,\r\n anchorEl,\r\n isDropdownOpen,\r\n handleDropdownToggle,\r\n handleClose,\r\n handleItemClick,\r\n}: {\r\n dropdownItems: BreadcrumbItem[];\r\n currentItem: string;\r\n anchorEl: HTMLElement | null;\r\n isDropdownOpen: boolean;\r\n handleDropdownToggle: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n handleClose: () => void;\r\n handleItemClick: (item: BreadcrumbItem) => void;\r\n}) => {\r\n return dropdownItems.length > 0 ? (\r\n <Box sx={{ position: \"relative\", flexShrink: 0 }}>\r\n <DropdownButton type=\"button\" onClick={handleDropdownToggle}>\r\n In this section...\r\n <ExpandMoreRounded\r\n sx={{\r\n fontSize: 20,\r\n transition: \"transform 0.2s\",\r\n transform: isDropdownOpen ? \"rotate(180deg)\" : \"rotate(0deg)\",\r\n }}\r\n />\r\n </DropdownButton>\r\n\r\n <StyledMenu\r\n anchorEl={anchorEl}\r\n open={isDropdownOpen}\r\n onClose={handleClose}\r\n disableScrollLock\r\n >\r\n {dropdownItems.map((item, index) => (\r\n <StyledMenuItem\r\n key={index}\r\n onClick={() => handleItemClick(item)}\r\n isActive={item.label === currentItem}\r\n >\r\n {item.label}\r\n </StyledMenuItem>\r\n ))}\r\n </StyledMenu>\r\n </Box>\r\n ) : null;\r\n};\r\n\r\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\r\n items,\r\n currentItem,\r\n dropdownItems = [],\r\n onItemSelect,\r\n onNavigate,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\r\n const isDropdownOpen = Boolean(anchorEl);\r\n const isMobile = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const scrollMask = useRef<HTMLDivElement>(null);\r\n const endRef = useRef<HTMLDivElement>(null);\r\n\r\n const updateMask = (el: {\r\n style?: any;\r\n scrollLeft?: any;\r\n scrollWidth?: any;\r\n clientWidth?: any;\r\n }) => {\r\n const { scrollLeft, scrollWidth, clientWidth } = el;\r\n const atStart = scrollLeft === 0;\r\n const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;\r\n\r\n const left = atStart ? \"black\" : \"transparent\";\r\n const right = atEnd ? \"black\" : \"transparent\";\r\n\r\n const mask = `linear-gradient(to right, ${left}, black 30px, black calc(100% - 30px), ${right})`;\r\n el.style.maskImage = mask;\r\n el.style.webkitMaskImage = mask;\r\n };\r\n\r\n useEffect(() => {\r\n const el = scrollMask.current;\r\n if (!el) return;\r\n updateMask(el); // set on mount\r\n el.addEventListener(\"scroll\", () => updateMask(el));\r\n return () => el.removeEventListener(\"scroll\", () => updateMask(el));\r\n }, []);\r\n\r\n useEffect(() => {\r\n endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\r\n }, [items]);\r\n\r\n const handleNavigation = (path: string) => {\r\n if (onNavigate) {\r\n onNavigate(path);\r\n } else {\r\n window.location.href = path;\r\n }\r\n };\r\n\r\n const handleDropdownToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => setAnchorEl(null);\r\n\r\n const handleHomeClick = () => handleNavigation(\"/\");\r\n const handleItemClick = (item: BreadcrumbItem) => {\r\n onItemSelect?.(item);\r\n handleClose();\r\n if (item.href) handleNavigation(item.href);\r\n };\r\n\r\n if (items.length < 1) {\r\n return;\r\n }\r\n\r\n if (isMobile) {\r\n return (\r\n <Box display=\"flex\" flexDirection=\"column\" gap={2}>\r\n <Box\r\n ref={scrollMask}\r\n component=\"nav\"\r\n sx={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"start\",\r\n flexWrap: \"nowrap\",\r\n overflowX: \"auto\",\r\n textOverflow: \"ellipsis\",\r\n minWidth: 0,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n {items.map((item) => (\r\n <Fragment key={item.label}>\r\n <ChevronRightRounded />\r\n {item.label === currentItem ? (\r\n <Typography\r\n sx={{\r\n fontWeight: 700,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Typography>\r\n ) : (\r\n <Link\r\n // href={item.href as string}\r\n underline={item.label === currentItem ? \"none\" : \"always\"}\r\n onClick={() => {\r\n if (item.label !== currentItem)\r\n handleNavigation(item.href as string);\r\n }}\r\n sx={{\r\n '&:hover': { cursor: 'pointer' },\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Link>\r\n )}\r\n <div ref={endRef} />\r\n </Fragment>\r\n ))}\r\n </Box>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n }\r\n\r\n return (\r\n <Box\r\n component=\"nav\"\r\n sx={{\r\n display: \"inline-flex\",\r\n justifyContent: \"start\",\r\n alignItems: \"center\",\r\n // flexWrap: \"nowrap\",\r\n gap: 1,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n <HomeButton aria-label=\"Home\" onClick={handleHomeClick}>\r\n <HomeRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\r\n </HomeButton>\r\n <MuiBreadcrumbs\r\n separator=\"/\"\r\n sx={{\r\n display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"initial\",\r\n // width: \"fit-content\",\r\n flexShrink: 2,\r\n \"& .MuiBreadcrumbs-separator\": {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n }}\r\n >\r\n {items.map((item) => (\r\n item.label === currentItem ? (\r\n <Typography\r\n sx={{\r\n fontWeight: 700,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Typography>\r\n ) : (\r\n <Link\r\n // href={item.href as string}\r\n underline={item.label === currentItem ? \"none\" : \"always\"}\r\n onClick={() => {\r\n if (item.label !== currentItem)\r\n handleNavigation(item.href as string);\r\n }}\r\n sx={{\r\n '&:hover': { cursor: 'pointer' },\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Link>\r\n )\r\n ))}\r\n </MuiBreadcrumbs>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n};\r\n"],"names":["styled","IconButton","Menu","MenuItem","_jsxs","Box","_jsx","ExpandMoreRounded","useTheme","useState","useMediaQuery","useRef","useEffect","Fragment","ChevronRightRounded","Typography","Link","HomeRounded","MuiBreadcrumbs"],"mappings":"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"}
|
|
@@ -10,6 +10,18 @@ const StyledButton = styles.styled(material.Button, {
|
|
|
10
10
|
shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',
|
|
11
11
|
})(({ theme, customVariant, customSize }) => {
|
|
12
12
|
const currentTheme = theme.palette;
|
|
13
|
+
// Map each variant to its background color
|
|
14
|
+
const variantBackgrounds = {
|
|
15
|
+
primary: currentTheme.primary.main,
|
|
16
|
+
secondary: currentTheme.secondary.main,
|
|
17
|
+
outline: currentTheme.light.main,
|
|
18
|
+
'marked-read': 'rgb(163, 217, 119)', // use solid equiv for contrast calc
|
|
19
|
+
'mark-read': currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,
|
|
20
|
+
danger: '#D32F2F',
|
|
21
|
+
};
|
|
22
|
+
const currentBg = variantBackgrounds[customVariant] ?? currentTheme.primary.main;
|
|
23
|
+
// Returns '#fff' or '#000' based on WCAG contrast ratio
|
|
24
|
+
const disabledTextColor = theme.palette.getContrastText(currentBg);
|
|
13
25
|
// Size styles
|
|
14
26
|
const sizeStyles = {
|
|
15
27
|
sm: {
|
|
@@ -39,7 +51,9 @@ const StyledButton = styles.styled(material.Button, {
|
|
|
39
51
|
},
|
|
40
52
|
'&.Mui-disabled': {
|
|
41
53
|
opacity: 0.5,
|
|
54
|
+
color: disabledTextColor,
|
|
42
55
|
cursor: 'not-allowed',
|
|
56
|
+
pointerEvents: 'auto',
|
|
43
57
|
},
|
|
44
58
|
...sizeStyles[customSize],
|
|
45
59
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';\r\nimport { styled } from '@mui/material/styles';\r\nimport { ArticleRounded, FactCheckRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface CustomButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst StyledButton = styled(MuiButton, {\r\n shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',\r\n})<{ customVariant: string; customSize: string }>(({ theme, customVariant, customSize }) => {\r\n const currentTheme = theme.palette;\r\n\r\n // Size styles\r\n const sizeStyles = {\r\n sm: {\r\n padding: '6px 12px',\r\n fontSize: '0.875rem',\r\n },\r\n md: {\r\n padding: '10px 16px',\r\n fontSize: '1rem',\r\n },\r\n lg: {\r\n padding: '12px 24px',\r\n fontSize: '1.125rem',\r\n },\r\n };\r\n\r\n const baseStyles = {\r\n fontWeight: 500,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n textTransform: 'none' as const,\r\n transition: 'all 0.2s',\r\n boxShadow: 'none',\r\n border: '2px solid transparent',\r\n '&:hover': {\r\n boxShadow: 'none',\r\n },\r\n '&.Mui-disabled': {\r\n opacity: 0.5,\r\n cursor: 'not-allowed',\r\n },\r\n ...sizeStyles[customSize as keyof typeof sizeStyles],\r\n };\r\n\r\n // Variant styles\r\n const variantStyles = {\r\n primary: {\r\n backgroundColor: currentTheme.primary.main,\r\n color: currentTheme.custom?.primaryButtonTextColor || '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.primary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n secondary: {\r\n backgroundColor: currentTheme.secondary.main,\r\n color: currentTheme.dark.main,\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.secondary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n outline: {\r\n backgroundColor: currentTheme.light.main,\r\n borderColor: 'rgba(77, 48, 25, 0.2)', // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(77, 48, 25, 0.05)',\r\n borderColor: 'rgba(77, 48, 25, 0.3)',\r\n },\r\n },\r\n 'marked-read': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.1)',\r\n fontSize: '14px',\r\n border: '1px solid',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.markedRead.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.2)',\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n 'mark-read': {\r\n backgroundColor: currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,\r\n border: '1px solid',\r\n fontSize: '14px',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.custom?.markAsReadBorderColor || currentTheme.secondary.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n opacity: 0.9,\r\n },\r\n },\r\n danger: {\r\n backgroundColor: '#D32F2F',\r\n color: '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: '#B71C1C',\r\n opacity: 0.9,\r\n },\r\n },\r\n };\r\n\r\n return {\r\n ...baseStyles,\r\n ...variantStyles[customVariant as keyof typeof variantStyles],\r\n };\r\n});\r\n\r\nexport const Button: React.FC<CustomButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n children,\r\n endIcon,\r\n fullWidth = false,\r\n ...props\r\n}) => {\r\n // Logic for special end icons per variant\r\n const getEndIcon = () => {\r\n const theme = useTheme();\r\n if (variant === 'mark-read') {\r\n return (\r\n <ArticleRounded sx={{ fontSize: 22, color: theme.palette.custom.iconColor }} />\r\n );\r\n }\r\n\r\n if (variant === 'marked-read') {\r\n return <FactCheckRounded sx={{ fontSize: 22, color: '#5a9c1a' }} />;\r\n }\r\n\r\n return endIcon || null;\r\n };\r\n\r\n return (\r\n <StyledButton\r\n customVariant={variant}\r\n customSize={size}\r\n fullWidth={fullWidth}\r\n disableRipple\r\n endIcon={getEndIcon()}\r\n {...props}\r\n >\r\n {children}\r\n </StyledButton>\r\n );\r\n};\r\n"],"names":["styled","MuiButton","useTheme","_jsx","ArticleRounded","FactCheckRounded"],"mappings":";;;;;;;;AAWA,MAAM,YAAY,GAAGA,aAAM,CAACC,eAAS,EAAE;AACrC,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,IAAI,KAAK,eAAe,IAAI,IAAI,KAAK,YAAY;CAC/E,CAAC,CAAgD,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,KAAI;AACzF,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO;;AAGlC,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,QAAQ,EAAE,UAAU;AACrB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,QAAQ,EAAE,MAAM;AACjB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,QAAQ,EAAE,UAAU;AACrB,SAAA;KACF;AAED,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,UAAU,EAAE,GAAG;QACf,YAAY,EAAE,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK;cAC/C,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;cACrC,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;AACtC,QAAA,aAAa,EAAE,MAAe;AAC9B,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,SAAS,EAAE;AACT,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;AACD,QAAA,gBAAgB,EAAE;AAChB,YAAA,OAAO,EAAE,GAAG;AACZ,YAAA,MAAM,EAAE,aAAa;AACtB,SAAA;
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';\r\nimport { styled } from '@mui/material/styles';\r\nimport { ArticleRounded, FactCheckRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface CustomButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst StyledButton = styled(MuiButton, {\r\n shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',\r\n})<{ customVariant: string; customSize: string }>(({ theme, customVariant, customSize }) => {\r\n const currentTheme = theme.palette;\r\n\r\n // Map each variant to its background color\r\n const variantBackgrounds: Record<string, string> = {\r\n primary: currentTheme.primary.main,\r\n secondary: currentTheme.secondary.main,\r\n outline: currentTheme.light.main,\r\n 'marked-read': 'rgb(163, 217, 119)', // use solid equiv for contrast calc\r\n 'mark-read': currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,\r\n danger: '#D32F2F',\r\n };\r\n\r\n const currentBg = variantBackgrounds[customVariant] ?? currentTheme.primary.main;\r\n\r\n // Returns '#fff' or '#000' based on WCAG contrast ratio\r\n const disabledTextColor = theme.palette.getContrastText(currentBg);\r\n\r\n // Size styles\r\n const sizeStyles = {\r\n sm: {\r\n padding: '6px 12px',\r\n fontSize: '0.875rem',\r\n },\r\n md: {\r\n padding: '10px 16px',\r\n fontSize: '1rem',\r\n },\r\n lg: {\r\n padding: '12px 24px',\r\n fontSize: '1.125rem',\r\n },\r\n };\r\n\r\n const baseStyles = {\r\n fontWeight: 500,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n textTransform: 'none' as const,\r\n transition: 'all 0.2s',\r\n boxShadow: 'none',\r\n border: '2px solid transparent',\r\n '&:hover': {\r\n boxShadow: 'none',\r\n },\r\n '&.Mui-disabled': {\r\n opacity: 0.5,\r\n color: disabledTextColor,\r\n cursor: 'not-allowed',\r\n pointerEvents: 'auto',\r\n },\r\n\r\n ...sizeStyles[customSize as keyof typeof sizeStyles],\r\n };\r\n\r\n // Variant styles\r\n const variantStyles = {\r\n primary: {\r\n backgroundColor: currentTheme.primary.main,\r\n color: currentTheme.custom?.primaryButtonTextColor || '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.primary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n secondary: {\r\n backgroundColor: currentTheme.secondary.main,\r\n color: currentTheme.dark.main,\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.secondary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n outline: {\r\n backgroundColor: currentTheme.light.main,\r\n borderColor: 'rgba(77, 48, 25, 0.2)', // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(77, 48, 25, 0.05)',\r\n borderColor: 'rgba(77, 48, 25, 0.3)',\r\n },\r\n },\r\n 'marked-read': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.1)',\r\n fontSize: '14px',\r\n border: '1px solid',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.markedRead.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.2)',\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n 'mark-read': {\r\n backgroundColor: currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,\r\n border: '1px solid',\r\n fontSize: '14px',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.custom?.markAsReadBorderColor || currentTheme.secondary.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n opacity: 0.9,\r\n },\r\n },\r\n danger: {\r\n backgroundColor: '#D32F2F',\r\n color: '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: '#B71C1C',\r\n opacity: 0.9,\r\n },\r\n },\r\n };\r\n\r\n return {\r\n ...baseStyles,\r\n ...variantStyles[customVariant as keyof typeof variantStyles],\r\n };\r\n});\r\n\r\nexport const Button: React.FC<CustomButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n children,\r\n endIcon,\r\n fullWidth = false,\r\n ...props\r\n}) => {\r\n // Logic for special end icons per variant\r\n const getEndIcon = () => {\r\n const theme = useTheme();\r\n if (variant === 'mark-read') {\r\n return (\r\n <ArticleRounded sx={{ fontSize: 22, color: theme.palette.custom.iconColor }} />\r\n );\r\n }\r\n\r\n if (variant === 'marked-read') {\r\n return <FactCheckRounded sx={{ fontSize: 22, color: '#5a9c1a' }} />;\r\n }\r\n\r\n return endIcon || null;\r\n };\r\n\r\n return (\r\n <StyledButton\r\n customVariant={variant}\r\n customSize={size}\r\n fullWidth={fullWidth}\r\n disableRipple\r\n endIcon={getEndIcon()}\r\n {...props}\r\n >\r\n {children}\r\n </StyledButton>\r\n );\r\n};\r\n"],"names":["styled","MuiButton","useTheme","_jsx","ArticleRounded","FactCheckRounded"],"mappings":"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"}
|
|
@@ -57,9 +57,9 @@ const StyledTextField = material.styled(material.TextField, {
|
|
|
57
57
|
},
|
|
58
58
|
// Target the actual input element for padding
|
|
59
59
|
'& .MuiInputBase-input': {
|
|
60
|
-
padding: theme.spacing(1,
|
|
60
|
+
padding: theme.spacing(1, 1.5),
|
|
61
61
|
[theme.breakpoints.up('sm')]: {
|
|
62
|
-
padding: theme.spacing(1.25,
|
|
62
|
+
padding: theme.spacing(1.25, 2),
|
|
63
63
|
},
|
|
64
64
|
},
|
|
65
65
|
'& .MuiFormHelperText-root': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, TextField, TextFieldProps, InputLabel } from '@mui/material';\r\n\r\ninterface InputProps extends Omit<TextFieldProps, 'variant' | 'error'> {\r\n error?: string;\r\n}\r\n\r\nconst InputWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nexport const StyledLabel = styled(InputLabel)(({ theme }) => ({\r\n fontSize: '0.875rem',\r\n fontWeight: 500,\r\n color: theme.palette.dark.main,\r\n marginBottom: theme.spacing(0.75),\r\n display: 'block',\r\n position: 'static',\r\n transform: 'none',\r\n '&.Mui-focused': {\r\n color: theme.palette.dark.main,\r\n },\r\n}));\r\n\r\nconst StyledTextField = styled(TextField, {\r\n shouldForwardProp: (prop) => !['errorMessage'].includes(prop as string),\r\n})<{ errorMessage?: string }>(({ theme, errorMessage }) => ({\r\n width: '100%',\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n minWidth: 0,\r\n height: 48,\r\n padding: 0, // Remove padding from root\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiInputBase-input': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: `${theme.palette.dark.main}33`,\r\n },\r\n },\r\n },\r\n // Target the actual input element for padding\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1,
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, TextField, TextFieldProps, InputLabel } from '@mui/material';\r\n\r\ninterface InputProps extends Omit<TextFieldProps, 'variant' | 'error'> {\r\n error?: string;\r\n}\r\n\r\nconst InputWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nexport const StyledLabel = styled(InputLabel)(({ theme }) => ({\r\n fontSize: '0.875rem',\r\n fontWeight: 500,\r\n color: theme.palette.dark.main,\r\n marginBottom: theme.spacing(0.75),\r\n display: 'block',\r\n position: 'static',\r\n transform: 'none',\r\n '&.Mui-focused': {\r\n color: theme.palette.dark.main,\r\n },\r\n}));\r\n\r\nconst StyledTextField = styled(TextField, {\r\n shouldForwardProp: (prop) => !['errorMessage'].includes(prop as string),\r\n})<{ errorMessage?: string }>(({ theme, errorMessage }) => ({\r\n width: '100%',\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n minWidth: 0,\r\n height: 48,\r\n padding: 0, // Remove padding from root\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiInputBase-input': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: `${theme.palette.dark.main}33`,\r\n },\r\n },\r\n },\r\n // Target the actual input element for padding\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1, 1.5),\r\n [theme.breakpoints.up('sm')]: {\r\n padding: theme.spacing(1.25, 2),\r\n },\r\n },\r\n '& .MuiFormHelperText-root': {\r\n marginTop: theme.spacing(0.75),\r\n fontSize: '0.875rem',\r\n color: errorMessage ? theme.palette.error.main : `${theme.palette.dark.main}99`,\r\n },\r\n}));\r\n\r\nexport const Input: React.FC<InputProps> = ({\r\n error,\r\n fullWidth = false,\r\n id,\r\n label,\r\n ...props\r\n}) => {\r\n const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n return (\r\n <InputWrapper sx={{ ...(!fullWidth && { width: 'auto' }) }}>\r\n {label && (\r\n <StyledLabel htmlFor={inputId}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledTextField\r\n id={inputId}\r\n error={!!error}\r\n helperText={error || props.helperText}\r\n errorMessage={error}\r\n fullWidth={fullWidth}\r\n variant=\"outlined\"\r\n {...props}\r\n />\r\n </InputWrapper>\r\n );\r\n};\r\n"],"names":["styled","InputLabel","TextField","_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ const StyledTextarea = material.styled('textarea', {
|
|
|
19
19
|
fontSize: '1rem',
|
|
20
20
|
minWidth: 0,
|
|
21
21
|
border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,
|
|
22
|
-
padding: theme.spacing(1,
|
|
22
|
+
padding: theme.spacing(1, 1.5),
|
|
23
23
|
fontFamily: theme.typography.fontFamily,
|
|
24
24
|
outline: 'none',
|
|
25
25
|
transition: 'border-color 0.2s',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextArea.js","sources":["../../../../src/components/RichTextArea.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, InputLabel } from '@mui/material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface RichTextAreaProps {\r\n error?: string;\r\n value: string;\r\n label?: string;\r\n fullWidth?: boolean;\r\n id?: string;\r\n onChange: (question: any, value: string) => void;\r\n question: any;\r\n helperText?: string;\r\n rows?: number;\r\n disabled?: boolean;\r\n placeholder?: string;\r\n}\r\n\r\nconst AreaWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nconst StyledTextarea = styled('textarea', {\r\n shouldForwardProp: (prop) => !['error'].includes(prop as string),\r\n})<{ error?: string }>(({ theme, error }) => ({\r\n width: '100%',\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n color: theme.palette.dark.main,\r\n fontSize: '1rem',\r\n minWidth: 0,\r\n border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,\r\n padding: theme.spacing(1,
|
|
1
|
+
{"version":3,"file":"RichTextArea.js","sources":["../../../../src/components/RichTextArea.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, InputLabel } from '@mui/material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface RichTextAreaProps {\r\n error?: string;\r\n value: string;\r\n label?: string;\r\n fullWidth?: boolean;\r\n id?: string;\r\n onChange: (question: any, value: string) => void;\r\n question: any;\r\n helperText?: string;\r\n rows?: number;\r\n disabled?: boolean;\r\n placeholder?: string;\r\n}\r\n\r\nconst AreaWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nconst StyledTextarea = styled('textarea', {\r\n shouldForwardProp: (prop) => !['error'].includes(prop as string),\r\n})<{ error?: string }>(({ theme, error }) => ({\r\n width: '100%',\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n color: theme.palette.dark.main,\r\n fontSize: '1rem',\r\n minWidth: 0,\r\n border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,\r\n padding: theme.spacing(1, 1.5),\r\n fontFamily: theme.typography.fontFamily,\r\n outline: 'none',\r\n transition: 'border-color 0.2s',\r\n '&:focus': {\r\n borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&:hover': {\r\n borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&:disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n resize: 'vertical',\r\n}));\r\n\r\nconst HelperText = styled('div')<{ error?: string }>(({ theme, error }) => ({\r\n marginTop: theme.spacing(0.75),\r\n fontSize: '0.875rem',\r\n color: error ? theme.palette.error.main : `${theme.palette.dark.main}99`,\r\n}));\r\n\r\nexport const RichTextArea: React.FC<RichTextAreaProps> = ({\r\n error,\r\n value,\r\n label,\r\n fullWidth = false,\r\n id,\r\n onChange,\r\n question,\r\n helperText,\r\n rows = 4,\r\n disabled,\r\n placeholder,\r\n}) => {\r\n const inputId = id || `richtextarea-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n return (\r\n <AreaWrapper sx={{ ...(!fullWidth && { width: 'auto' }) }}>\r\n {label && (\r\n <StyledLabel htmlFor={inputId}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledTextarea\r\n id={inputId}\r\n error={error}\r\n value={value || ''}\r\n rows={rows}\r\n onChange={(e) => onChange(question, e.target.value)}\r\n disabled={disabled}\r\n placeholder={placeholder}\r\n />\r\n {(error || helperText) && (\r\n <HelperText error={error}>\r\n {error || helperText}\r\n </HelperText>\r\n )}\r\n </AreaWrapper>\r\n );\r\n};\r\n"],"names":["styled","_jsxs","_jsx","StyledLabel"],"mappings":"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"}
|
|
@@ -57,9 +57,13 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
|
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
return (jsxRuntime.jsxs(material.FormControl, { fullWidth: fullWidth, error: !!error, className: className, children: [label && (jsxRuntime.jsx(Input.StyledLabel, { htmlFor: selectId, shrink: false, children: label })), jsxRuntime.jsx(StyledSelect, { id: selectId, name: name, value: value || '', onChange: handleChange, disabled: disabled, error: !!error, IconComponent: iconsMaterial.ExpandMoreRounded, MenuProps: {
|
|
60
|
+
MenuListProps: {
|
|
61
|
+
sx: {
|
|
62
|
+
paddingBottom: 0,
|
|
63
|
+
},
|
|
64
|
+
},
|
|
60
65
|
PaperProps: {
|
|
61
66
|
sx: {
|
|
62
|
-
mt: 1,
|
|
63
67
|
borderRadius: 2,
|
|
64
68
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
65
69
|
},
|
|
@@ -71,9 +75,9 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
|
|
|
71
75
|
backgroundColor: `${theme.palette.primary.main}1A`,
|
|
72
76
|
},
|
|
73
77
|
'&.Mui-selected': {
|
|
74
|
-
backgroundColor:
|
|
78
|
+
backgroundColor: 'transparent',
|
|
75
79
|
'&:hover': {
|
|
76
|
-
backgroundColor: `${theme.palette.primary.main}
|
|
80
|
+
backgroundColor: `${theme.palette.primary.main}1A`,
|
|
77
81
|
},
|
|
78
82
|
},
|
|
79
83
|
}, children: option.label }, option.value))) }), error && (jsxRuntime.jsx(material.FormHelperText, { sx: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface SelectProps {\r\n label?: string;\r\n error?: string;\r\n helperText?: string;\r\n fullWidth?: boolean;\r\n options: { value: string; label: string }[];\r\n value?: string;\r\n onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n name?: string;\r\n}\r\n\r\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n '& .MuiInputBase-root, &.MuiOutlinedInput-root': {\r\n height: 48,\r\n padding: 0,\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiSelect-select': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n '& .MuiSelect-icon': {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n}));\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n label,\r\n error,\r\n helperText,\r\n fullWidth = false,\r\n options,\r\n className = '',\r\n id,\r\n value,\r\n onChange,\r\n disabled,\r\n name,\r\n}) => {\r\n const theme = useTheme();\r\n const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n const handleChange = (event: any) => {\r\n if (onChange) {\r\n // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\r\n const syntheticEvent = {\r\n target: {\r\n value: event.target.value,\r\n name: name || '',\r\n },\r\n currentTarget: event.currentTarget,\r\n } as React.ChangeEvent<HTMLSelectElement>;\r\n onChange(syntheticEvent);\r\n }\r\n };\r\n\r\n return (\r\n <FormControl \r\n fullWidth={fullWidth} \r\n error={!!error}\r\n className={className}\r\n >\r\n {label && (\r\n <StyledLabel htmlFor={selectId} shrink={false}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledSelect\r\n id={selectId}\r\n name={name}\r\n value={value || ''}\r\n onChange={handleChange}\r\n disabled={disabled}\r\n error={!!error}\r\n IconComponent={ExpandMoreRounded}\r\n MenuProps={{\r\n
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface SelectProps {\r\n label?: string;\r\n error?: string;\r\n helperText?: string;\r\n fullWidth?: boolean;\r\n options: { value: string; label: string }[];\r\n value?: string;\r\n onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n name?: string;\r\n}\r\n\r\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n '& .MuiInputBase-root, &.MuiOutlinedInput-root': {\r\n height: 48,\r\n padding: 0,\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiSelect-select': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n '& .MuiSelect-icon': {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n}));\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n label,\r\n error,\r\n helperText,\r\n fullWidth = false,\r\n options,\r\n className = '',\r\n id,\r\n value,\r\n onChange,\r\n disabled,\r\n name,\r\n}) => {\r\n const theme = useTheme();\r\n const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n const handleChange = (event: any) => {\r\n if (onChange) {\r\n // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\r\n const syntheticEvent = {\r\n target: {\r\n value: event.target.value,\r\n name: name || '',\r\n },\r\n currentTarget: event.currentTarget,\r\n } as React.ChangeEvent<HTMLSelectElement>;\r\n onChange(syntheticEvent);\r\n }\r\n };\r\n\r\n return (\r\n <FormControl \r\n fullWidth={fullWidth} \r\n error={!!error}\r\n className={className}\r\n >\r\n {label && (\r\n <StyledLabel htmlFor={selectId} shrink={false}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledSelect\r\n id={selectId}\r\n name={name}\r\n value={value || ''}\r\n onChange={handleChange}\r\n disabled={disabled}\r\n error={!!error}\r\n IconComponent={ExpandMoreRounded}\r\n MenuProps={{\r\n MenuListProps: {\r\n sx: {\r\n paddingBottom: 0,\r\n },\r\n },\r\n PaperProps: {\r\n sx: {\r\n borderRadius: 2,\r\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\r\n },\r\n },\r\n }}\r\n >\r\n {options.map((option) => (\r\n <MenuItem \r\n key={option.value} \r\n value={option.value}\r\n sx={{\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n '&:hover': {\r\n backgroundColor: `${theme.palette.primary.main}1A`,\r\n },\r\n '&.Mui-selected': {\r\n backgroundColor: 'transparent',\r\n '&:hover': {\r\n backgroundColor: `${theme.palette.primary.main}1A`,\r\n },\r\n },\r\n }}\r\n >\r\n {option.label}\r\n </MenuItem>\r\n ))}\r\n </StyledSelect>\r\n {error && (\r\n <FormHelperText\r\n sx={{\r\n mt: 0.75,\r\n fontSize: '0.875rem',\r\n color: theme.palette.accent.main,\r\n }}\r\n >\r\n {error}\r\n </FormHelperText>\r\n )}\r\n {helperText && !error && (\r\n <FormHelperText\r\n sx={{\r\n mt: 0.75,\r\n fontSize: '0.875rem',\r\n color: `${theme.palette.dark.main}99`,\r\n }}\r\n >\r\n {helperText}\r\n </FormHelperText>\r\n )}\r\n </FormControl>\r\n );\r\n};"],"names":["styled","MuiSelect","useTheme","_jsxs","FormControl","_jsx","StyledLabel","ExpandMoreRounded","MenuItem","FormHelperText"],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,GAAGA,eAAM,CAACC,eAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM;AAC5D,IAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;IACzC,YAAY,EAAE,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK;UAC/C,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;UACrC,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;AACtC,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,IAAA,+CAA+C,EAAE;AAC/C,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACD,IAAA,oCAAoC,EAAE;QACpC,WAAW,EAAE,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,CAAA,EAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AAC/E,QAAA,WAAW,EAAE,CAAC;AACf,KAAA;AACD,IAAA,0CAA0C,EAAE;QAC1C,WAAW,EAAE,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;AAC3E,QAAA,WAAW,EAAE,CAAC;AACf,KAAA;AACD,IAAA,gDAAgD,EAAE;AAChD,QAAA,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;AAC5E,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AAC/C,QAAA,qBAAqB,EAAE;YACrB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AACrC,YAAA,MAAM,EAAE,aAAa;AACtB,SAAA;AACF,KAAA;AACD,IAAA,mBAAmB,EAAE;QACnB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AACtC,KAAA;AACF,CAAA,CAAC,CAAC;AAEI,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,KAAK,EACL,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,SAAS,GAAG,EAAE,EACd,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,KAAI;AACH,IAAA,MAAM,KAAK,GAAGC,sBAAQ,EAAE;IACxB,MAAM,QAAQ,GAAG,EAAE,IAAI,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;AAE1E,IAAA,MAAM,YAAY,GAAG,CAAC,KAAU,KAAI;QAClC,IAAI,QAAQ,EAAE;;AAEZ,YAAA,MAAM,cAAc,GAAG;AACrB,gBAAA,MAAM,EAAE;AACN,oBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;oBACzB,IAAI,EAAE,IAAI,IAAI,EAAE;AACjB,iBAAA;gBACD,aAAa,EAAE,KAAK,CAAC,aAAa;aACK;YACzC,QAAQ,CAAC,cAAc,CAAC;QAC1B;AACF,IAAA,CAAC;AAED,IAAA,QACEC,eAAA,CAACC,oBAAW,EAAA,EACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,SAAS,EAAE,SAAS,EAAA,QAAA,EAAA,CAEnB,KAAK,KACJC,cAAA,CAACC,iBAAW,IAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAA,QAAA,EAC1C,KAAK,GACM,CACf,EACDD,cAAA,CAAC,YAAY,EAAA,EACX,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,aAAa,EAAEE,+BAAiB,EAChC,SAAS,EAAE;AACT,oBAAA,aAAa,EAAE;AACb,wBAAA,EAAE,EAAE;AACF,4BAAA,aAAa,EAAE,CAAC;AACjB,yBAAA;AACF,qBAAA;AACD,oBAAA,UAAU,EAAE;AACV,wBAAA,EAAE,EAAE;AACF,4BAAA,YAAY,EAAE,CAAC;AACf,4BAAA,SAAS,EAAE,uEAAuE;AACnF,yBAAA;AACF,qBAAA;iBACF,EAAA,QAAA,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBF,eAACG,iBAAQ,EAAA,EAEP,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,EAAE,EAAE;AACF,wBAAA,QAAQ,EAAE,MAAM;AAChB,wBAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,wBAAA,SAAS,EAAE;4BACT,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAA,EAAA,CAAI;AACnD,yBAAA;AACD,wBAAA,gBAAgB,EAAE;AAChB,4BAAA,eAAe,EAAE,aAAa;AAC9B,4BAAA,SAAS,EAAE;gCACT,eAAe,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAA,EAAA,CAAI;AACnD,6BAAA;AACF,yBAAA;AACF,qBAAA,EAAA,QAAA,EAEA,MAAM,CAAC,KAAK,IAhBR,MAAM,CAAC,KAAK,CAiBR,CACZ,CAAC,EAAA,CACW,EACd,KAAK,KACJH,eAACI,uBAAc,EAAA,EACb,EAAE,EAAE;AACF,oBAAA,EAAE,EAAE,IAAI;AACR,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI;AACjC,iBAAA,EAAA,QAAA,EAEA,KAAK,EAAA,CACS,CAClB,EACA,UAAU,IAAI,CAAC,KAAK,KACnBJ,cAAA,CAACI,uBAAc,EAAA,EACb,EAAE,EAAE;AACF,oBAAA,EAAE,EAAE,IAAI;AACR,oBAAA,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AACtC,iBAAA,EAAA,QAAA,EAEA,UAAU,EAAA,CACI,CAClB,CAAA,EAAA,CACW;AAElB;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, useRef, useEffect, Fragment } from 'react';
|
|
3
|
-
import { styled, IconButton, Menu, MenuItem, useMediaQuery, Box, Typography, Breadcrumbs } from '@mui/material';
|
|
3
|
+
import { styled, IconButton, Menu, MenuItem, useMediaQuery, Box, Typography, Link, Breadcrumbs } from '@mui/material';
|
|
4
4
|
import { useTheme } from '../ThemeProvider.js';
|
|
5
5
|
import { ChevronRightRounded, HomeRounded, ExpandMoreRounded } from '@mui/icons-material';
|
|
6
6
|
|
|
@@ -38,7 +38,7 @@ const DropdownButton = styled("button")(({ theme }) => ({
|
|
|
38
38
|
borderColor: `${theme.palette.dark.main}4D`,
|
|
39
39
|
},
|
|
40
40
|
[theme.breakpoints.down("sm")]: {
|
|
41
|
-
width:
|
|
41
|
+
width: "100%",
|
|
42
42
|
padding: theme.spacing(0.75, 1),
|
|
43
43
|
gap: theme.spacing(0.5),
|
|
44
44
|
},
|
|
@@ -90,8 +90,8 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
90
90
|
const { scrollLeft, scrollWidth, clientWidth } = el;
|
|
91
91
|
const atStart = scrollLeft === 0;
|
|
92
92
|
const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
|
|
93
|
-
const left = atStart ?
|
|
94
|
-
const right = atEnd ?
|
|
93
|
+
const left = atStart ? "black" : "transparent";
|
|
94
|
+
const right = atEnd ? "black" : "transparent";
|
|
95
95
|
const mask = `linear-gradient(to right, ${left}, black 30px, black calc(100% - 30px), ${right})`;
|
|
96
96
|
el.style.maskImage = mask;
|
|
97
97
|
el.style.webkitMaskImage = mask;
|
|
@@ -101,11 +101,11 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
101
101
|
if (!el)
|
|
102
102
|
return;
|
|
103
103
|
updateMask(el); // set on mount
|
|
104
|
-
el.addEventListener(
|
|
105
|
-
return () => el.removeEventListener(
|
|
104
|
+
el.addEventListener("scroll", () => updateMask(el));
|
|
105
|
+
return () => el.removeEventListener("scroll", () => updateMask(el));
|
|
106
106
|
}, []);
|
|
107
107
|
useEffect(() => {
|
|
108
|
-
endRef.current?.scrollIntoView({ behavior:
|
|
108
|
+
endRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
109
109
|
}, [items]);
|
|
110
110
|
const handleNavigation = (path) => {
|
|
111
111
|
if (onNavigate) {
|
|
@@ -141,13 +141,22 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
141
141
|
minWidth: 0,
|
|
142
142
|
scrollbarWidth: "none",
|
|
143
143
|
"&::-webkit-scrollbar": { display: "none" },
|
|
144
|
-
}, children: items.map((item) => (jsxs(Fragment, { children: [jsx(ChevronRightRounded, {}), jsx(Typography, {
|
|
145
|
-
|
|
144
|
+
}, children: items.map((item) => (jsxs(Fragment, { children: [jsx(ChevronRightRounded, {}), item.label === currentItem ? (jsx(Typography, { sx: {
|
|
145
|
+
fontWeight: 700,
|
|
146
|
+
whiteSpace: "nowrap",
|
|
147
|
+
}, children: item?.label ?? "" })) : (jsx(Link
|
|
148
|
+
// href={item.href as string}
|
|
149
|
+
, {
|
|
150
|
+
// href={item.href as string}
|
|
151
|
+
underline: item.label === currentItem ? "none" : "always", onClick: () => {
|
|
152
|
+
if (item.label !== currentItem)
|
|
153
|
+
handleNavigation(item.href);
|
|
146
154
|
}, sx: {
|
|
147
|
-
|
|
155
|
+
'&:hover': { cursor: 'pointer' },
|
|
148
156
|
color: theme.palette.dark.main,
|
|
157
|
+
fontWeight: 500,
|
|
149
158
|
whiteSpace: "nowrap",
|
|
150
|
-
}, children: item?.label ?? "" }), jsx("div", { ref: endRef })] }, item.label))) }), jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
159
|
+
}, children: item?.label ?? "" })), jsx("div", { ref: endRef })] }, item.label))) }), jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
151
160
|
}
|
|
152
161
|
return (jsxs(Box, { component: "nav", sx: {
|
|
153
162
|
display: "inline-flex",
|
|
@@ -166,16 +175,22 @@ const Breadcrumb = ({ items, currentItem, dropdownItems = [], onItemSelect, onNa
|
|
|
166
175
|
"& .MuiBreadcrumbs-separator": {
|
|
167
176
|
color: `${theme.palette.dark.main}66`,
|
|
168
177
|
},
|
|
169
|
-
}, children: items.map((item) => (jsx(Typography, { sx: {
|
|
178
|
+
}, children: items.map((item) => (item.label === currentItem ? (jsx(Typography, { sx: {
|
|
179
|
+
fontWeight: 700,
|
|
180
|
+
whiteSpace: "nowrap",
|
|
181
|
+
}, children: item?.label ?? "" })) : (jsx(Link
|
|
182
|
+
// href={item.href as string}
|
|
183
|
+
, {
|
|
184
|
+
// href={item.href as string}
|
|
185
|
+
underline: item.label === currentItem ? "none" : "always", onClick: () => {
|
|
186
|
+
if (item.label !== currentItem)
|
|
187
|
+
handleNavigation(item.href);
|
|
188
|
+
}, sx: {
|
|
189
|
+
'&:hover': { cursor: 'pointer' },
|
|
170
190
|
color: theme.palette.dark.main,
|
|
171
191
|
fontWeight: 500,
|
|
172
|
-
px: { xs: 0.5, sm: 1 },
|
|
173
|
-
// minWidth: 0,
|
|
174
192
|
whiteSpace: "nowrap",
|
|
175
|
-
|
|
176
|
-
textOverflow: "ellipsis",
|
|
177
|
-
cursor: item.href ? "pointer" : "default",
|
|
178
|
-
}, onClick: () => item.href && handleNavigation(item.href), children: item.label }, item.label))) }), jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
193
|
+
}, children: item?.label ?? "" })))) }), jsx(DropdownMenu, { dropdownItems: dropdownItems, currentItem: currentItem, anchorEl: anchorEl, isDropdownOpen: isDropdownOpen, handleDropdownToggle: handleDropdownToggle, handleClose: handleClose, handleItemClick: handleItemClick })] }));
|
|
179
194
|
};
|
|
180
195
|
|
|
181
196
|
export { Breadcrumb };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\r\nimport {\r\n Box,\r\n Breadcrumbs as MuiBreadcrumbs,\r\n Typography,\r\n IconButton,\r\n Menu,\r\n MenuItem,\r\n styled,\r\n useMediaQuery,\r\n} from \"@mui/material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport {\r\n HomeRounded,\r\n ExpandMoreRounded,\r\n ChevronRightRounded,\r\n} from \"@mui/icons-material\";\r\n\r\ninterface BreadcrumbItem {\r\n label: string;\r\n href?: string;\r\n}\r\n\r\ninterface BreadcrumbProps {\r\n items: BreadcrumbItem[];\r\n currentItem: string;\r\n dropdownItems?: BreadcrumbItem[];\r\n onItemSelect?: (item: BreadcrumbItem) => void;\r\n onNavigate?: (path: string) => void;\r\n}\r\n\r\nconst HomeButton = styled(IconButton)(({ theme }) => ({\r\n width: 40,\r\n height: 40,\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n flexShrink: 0,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n opacity: 0.8,\r\n },\r\n}));\r\n\r\nconst DropdownButton = styled(\"button\")(({ theme }) => ({\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"space-between\",\r\n gap: theme.spacing(1),\r\n padding: theme.spacing(0.75, 2),\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n backgroundColor: \"#fff\",\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n cursor: \"pointer\",\r\n transition: \"border-color 0.2s\",\r\n fontSize: \"0.875rem\",\r\n \"&:hover\": {\r\n borderColor: `${theme.palette.dark.main}4D`,\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: '100%',\r\n padding: theme.spacing(0.75, 1),\r\n gap: theme.spacing(0.5),\r\n },\r\n}));\r\n\r\nconst StyledMenu = styled(Menu)(({ theme }) => ({\r\n \"& .MuiPaper-root\": {\r\n marginTop: theme.spacing(1),\r\n width: \"auto\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\",\r\n },\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n boxShadow:\r\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\r\n },\r\n}));\r\n\r\nconst StyledMenuItem = styled(MenuItem, {\r\n shouldForwardProp: (prop) => prop !== \"isActive\",\r\n})<{ isActive?: boolean }>(({ theme, isActive }) => ({\r\n padding: theme.spacing(1.25, 2),\r\n fontSize: \"0.875rem\",\r\n color: isActive ? theme.palette.primary.main : \"#4D3019\",\r\n fontWeight: isActive ? 500 : 400,\r\n backgroundColor: isActive ? \"#F5F1ED\" : \"transparent\",\r\n whiteSpace: \"normal\",\r\n wordBreak: \"break-word\",\r\n display: \"block\",\r\n \"&:hover\": {\r\n backgroundColor: \"#F5F1ED\",\r\n },\r\n}));\r\n\r\nconst DropdownMenu = ({\r\n dropdownItems,\r\n currentItem,\r\n anchorEl,\r\n isDropdownOpen,\r\n handleDropdownToggle,\r\n handleClose,\r\n handleItemClick,\r\n}: {\r\n dropdownItems: BreadcrumbItem[];\r\n currentItem: string;\r\n anchorEl: HTMLElement | null;\r\n isDropdownOpen: boolean;\r\n handleDropdownToggle: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n handleClose: () => void;\r\n handleItemClick: (item: BreadcrumbItem) => void;\r\n}) => {\r\n return dropdownItems.length > 0 ? (\r\n <Box sx={{ position: \"relative\", flexShrink: 0 }}>\r\n <DropdownButton type=\"button\" onClick={handleDropdownToggle}>\r\n In this section...\r\n <ExpandMoreRounded\r\n sx={{\r\n fontSize: 20,\r\n transition: \"transform 0.2s\",\r\n transform: isDropdownOpen ? \"rotate(180deg)\" : \"rotate(0deg)\",\r\n }}\r\n />\r\n </DropdownButton>\r\n\r\n <StyledMenu\r\n anchorEl={anchorEl}\r\n open={isDropdownOpen}\r\n onClose={handleClose}\r\n disableScrollLock\r\n >\r\n {dropdownItems.map((item, index) => (\r\n <StyledMenuItem\r\n key={index}\r\n onClick={() => handleItemClick(item)}\r\n isActive={item.label === currentItem}\r\n >\r\n {item.label}\r\n </StyledMenuItem>\r\n ))}\r\n </StyledMenu>\r\n </Box>\r\n ) : null;\r\n};\r\n\r\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\r\n items,\r\n currentItem,\r\n dropdownItems = [],\r\n onItemSelect,\r\n onNavigate,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\r\n const isDropdownOpen = Boolean(anchorEl);\r\n const isMobile = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const scrollMask = useRef<HTMLDivElement>(null);\r\n const endRef = useRef<HTMLDivElement>(null);\r\n \r\n const updateMask = (el: { style?: any; scrollLeft?: any; scrollWidth?: any; clientWidth?: any; }) => {\r\n const { scrollLeft, scrollWidth, clientWidth } = el;\r\n const atStart = scrollLeft === 0;\r\n const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;\r\n\r\n const left = atStart ? 'black' : 'transparent';\r\n const right = atEnd ? 'black' : 'transparent';\r\n\r\n const mask = `linear-gradient(to right, ${left}, black 30px, black calc(100% - 30px), ${right})`;\r\n el.style.maskImage = mask;\r\n el.style.webkitMaskImage = mask;\r\n };\r\n\r\n useEffect(() => {\r\n const el = scrollMask.current;\r\n if (!el) return;\r\n updateMask(el); // set on mount\r\n el.addEventListener('scroll', () => updateMask(el));\r\n return () => el.removeEventListener('scroll', () => updateMask(el));\r\n }, []);\r\n\r\n useEffect(() => {\r\n endRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n }, [items]);\r\n\r\n\r\n const handleNavigation = (path: string) => {\r\n if (onNavigate) {\r\n onNavigate(path);\r\n } else {\r\n window.location.href = path;\r\n }\r\n };\r\n\r\n const handleDropdownToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => setAnchorEl(null);\r\n\r\n const handleHomeClick = () => handleNavigation(\"/\");\r\n const handleItemClick = (item: BreadcrumbItem) => {\r\n onItemSelect?.(item);\r\n handleClose();\r\n if (item.href) handleNavigation(item.href);\r\n };\r\n \r\n if (items.length < 1) {\r\n return;\r\n }\r\n\r\n if (isMobile) {\r\n\r\n return (\r\n <Box\r\n display=\"flex\"\r\n flexDirection=\"column\"\r\n gap={2}\r\n >\r\n <Box\r\n ref={scrollMask}\r\n component=\"nav\"\r\n sx={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"start\",\r\n flexWrap: \"nowrap\",\r\n overflowX: \"auto\",\r\n textOverflow: \"ellipsis\",\r\n minWidth: 0,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n {items.map((item) => (\r\n <Fragment key={item.label}>\r\n <ChevronRightRounded />\r\n <Typography\r\n onClick={() => {\r\n handleNavigation(item.href as string);\r\n }}\r\n sx={{\r\n fontWeight: 500,\r\n color: theme.palette.dark.main,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Typography>\r\n <div ref={endRef}/>\r\n </Fragment>\r\n ))}\r\n </Box>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n }\r\n\r\n return (\r\n <Box\r\n component=\"nav\"\r\n sx={{\r\n display: \"inline-flex\",\r\n justifyContent: \"start\",\r\n alignItems: \"center\",\r\n // flexWrap: \"nowrap\",\r\n gap: 1,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n <HomeButton aria-label=\"Home\" onClick={handleHomeClick}>\r\n <HomeRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\r\n </HomeButton>\r\n <MuiBreadcrumbs\r\n separator=\"/\"\r\n sx={{\r\n display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"initial\",\r\n // width: \"fit-content\",\r\n flexShrink: 2,\r\n \"& .MuiBreadcrumbs-separator\": {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n }}\r\n >\r\n {items.map((item) => (\r\n <Typography\r\n key={item.label}\r\n sx={{\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n px: { xs: 0.5, sm: 1 },\r\n // minWidth: 0,\r\n whiteSpace: \"nowrap\",\r\n // overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n cursor: item.href ? \"pointer\" : \"default\",\r\n }}\r\n onClick={() => item.href && handleNavigation(item.href)}\r\n >\r\n {item.label}\r\n </Typography>\r\n ))}\r\n </MuiBreadcrumbs>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n};\r\n"],"names":["_jsxs","_jsx","MuiBreadcrumbs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Breadcrumb.js","sources":["../../../../src/components/Breadcrumb.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\r\nimport {\r\n Box,\r\n Breadcrumbs as MuiBreadcrumbs,\r\n Typography,\r\n IconButton,\r\n Menu,\r\n MenuItem,\r\n styled,\r\n useMediaQuery,\r\n Link,\r\n} from \"@mui/material\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport {\r\n HomeRounded,\r\n ExpandMoreRounded,\r\n ChevronRightRounded,\r\n} from \"@mui/icons-material\";\r\n\r\ninterface BreadcrumbItem {\r\n label: string;\r\n href?: string;\r\n}\r\n\r\ninterface BreadcrumbProps {\r\n items: BreadcrumbItem[];\r\n currentItem: string;\r\n dropdownItems?: BreadcrumbItem[];\r\n onItemSelect?: (item: BreadcrumbItem) => void;\r\n onNavigate?: (path: string) => void;\r\n}\r\n\r\nconst HomeButton = styled(IconButton)(({ theme }) => ({\r\n width: 40,\r\n height: 40,\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n flexShrink: 0,\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.secondary.main || theme.palette.accent.main,\r\n opacity: 0.8,\r\n },\r\n}));\r\n\r\nconst DropdownButton = styled(\"button\")(({ theme }) => ({\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"space-between\",\r\n gap: theme.spacing(1),\r\n padding: theme.spacing(0.75, 2),\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n backgroundColor: \"#fff\",\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n cursor: \"pointer\",\r\n transition: \"border-color 0.2s\",\r\n fontSize: \"0.875rem\",\r\n \"&:hover\": {\r\n borderColor: `${theme.palette.dark.main}4D`,\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\",\r\n padding: theme.spacing(0.75, 1),\r\n gap: theme.spacing(0.5),\r\n },\r\n}));\r\n\r\nconst StyledMenu = styled(Menu)(({ theme }) => ({\r\n \"& .MuiPaper-root\": {\r\n marginTop: theme.spacing(1),\r\n width: \"auto\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\",\r\n },\r\n borderRadius:\r\n (typeof theme.shape.borderRadius === \"string\"\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n border: `1px solid ${theme.palette.dark.main}33`,\r\n boxShadow:\r\n \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\r\n },\r\n}));\r\n\r\nconst StyledMenuItem = styled(MenuItem, {\r\n shouldForwardProp: (prop) => prop !== \"isActive\",\r\n})<{ isActive?: boolean }>(({ theme, isActive }) => ({\r\n padding: theme.spacing(1.25, 2),\r\n fontSize: \"0.875rem\",\r\n color: isActive ? theme.palette.primary.main : \"#4D3019\",\r\n fontWeight: isActive ? 500 : 400,\r\n backgroundColor: isActive ? \"#F5F1ED\" : \"transparent\",\r\n whiteSpace: \"normal\",\r\n wordBreak: \"break-word\",\r\n display: \"block\",\r\n \"&:hover\": {\r\n backgroundColor: \"#F5F1ED\",\r\n },\r\n}));\r\n\r\nconst DropdownMenu = ({\r\n dropdownItems,\r\n currentItem,\r\n anchorEl,\r\n isDropdownOpen,\r\n handleDropdownToggle,\r\n handleClose,\r\n handleItemClick,\r\n}: {\r\n dropdownItems: BreadcrumbItem[];\r\n currentItem: string;\r\n anchorEl: HTMLElement | null;\r\n isDropdownOpen: boolean;\r\n handleDropdownToggle: (e: React.MouseEvent<HTMLButtonElement>) => void;\r\n handleClose: () => void;\r\n handleItemClick: (item: BreadcrumbItem) => void;\r\n}) => {\r\n return dropdownItems.length > 0 ? (\r\n <Box sx={{ position: \"relative\", flexShrink: 0 }}>\r\n <DropdownButton type=\"button\" onClick={handleDropdownToggle}>\r\n In this section...\r\n <ExpandMoreRounded\r\n sx={{\r\n fontSize: 20,\r\n transition: \"transform 0.2s\",\r\n transform: isDropdownOpen ? \"rotate(180deg)\" : \"rotate(0deg)\",\r\n }}\r\n />\r\n </DropdownButton>\r\n\r\n <StyledMenu\r\n anchorEl={anchorEl}\r\n open={isDropdownOpen}\r\n onClose={handleClose}\r\n disableScrollLock\r\n >\r\n {dropdownItems.map((item, index) => (\r\n <StyledMenuItem\r\n key={index}\r\n onClick={() => handleItemClick(item)}\r\n isActive={item.label === currentItem}\r\n >\r\n {item.label}\r\n </StyledMenuItem>\r\n ))}\r\n </StyledMenu>\r\n </Box>\r\n ) : null;\r\n};\r\n\r\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\r\n items,\r\n currentItem,\r\n dropdownItems = [],\r\n onItemSelect,\r\n onNavigate,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\r\n const isDropdownOpen = Boolean(anchorEl);\r\n const isMobile = useMediaQuery(theme.breakpoints.down(\"sm\"));\r\n const scrollMask = useRef<HTMLDivElement>(null);\r\n const endRef = useRef<HTMLDivElement>(null);\r\n\r\n const updateMask = (el: {\r\n style?: any;\r\n scrollLeft?: any;\r\n scrollWidth?: any;\r\n clientWidth?: any;\r\n }) => {\r\n const { scrollLeft, scrollWidth, clientWidth } = el;\r\n const atStart = scrollLeft === 0;\r\n const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;\r\n\r\n const left = atStart ? \"black\" : \"transparent\";\r\n const right = atEnd ? \"black\" : \"transparent\";\r\n\r\n const mask = `linear-gradient(to right, ${left}, black 30px, black calc(100% - 30px), ${right})`;\r\n el.style.maskImage = mask;\r\n el.style.webkitMaskImage = mask;\r\n };\r\n\r\n useEffect(() => {\r\n const el = scrollMask.current;\r\n if (!el) return;\r\n updateMask(el); // set on mount\r\n el.addEventListener(\"scroll\", () => updateMask(el));\r\n return () => el.removeEventListener(\"scroll\", () => updateMask(el));\r\n }, []);\r\n\r\n useEffect(() => {\r\n endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\r\n }, [items]);\r\n\r\n const handleNavigation = (path: string) => {\r\n if (onNavigate) {\r\n onNavigate(path);\r\n } else {\r\n window.location.href = path;\r\n }\r\n };\r\n\r\n const handleDropdownToggle = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => setAnchorEl(null);\r\n\r\n const handleHomeClick = () => handleNavigation(\"/\");\r\n const handleItemClick = (item: BreadcrumbItem) => {\r\n onItemSelect?.(item);\r\n handleClose();\r\n if (item.href) handleNavigation(item.href);\r\n };\r\n\r\n if (items.length < 1) {\r\n return;\r\n }\r\n\r\n if (isMobile) {\r\n return (\r\n <Box display=\"flex\" flexDirection=\"column\" gap={2}>\r\n <Box\r\n ref={scrollMask}\r\n component=\"nav\"\r\n sx={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"start\",\r\n flexWrap: \"nowrap\",\r\n overflowX: \"auto\",\r\n textOverflow: \"ellipsis\",\r\n minWidth: 0,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n {items.map((item) => (\r\n <Fragment key={item.label}>\r\n <ChevronRightRounded />\r\n {item.label === currentItem ? (\r\n <Typography\r\n sx={{\r\n fontWeight: 700,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Typography>\r\n ) : (\r\n <Link\r\n // href={item.href as string}\r\n underline={item.label === currentItem ? \"none\" : \"always\"}\r\n onClick={() => {\r\n if (item.label !== currentItem)\r\n handleNavigation(item.href as string);\r\n }}\r\n sx={{\r\n '&:hover': { cursor: 'pointer' },\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Link>\r\n )}\r\n <div ref={endRef} />\r\n </Fragment>\r\n ))}\r\n </Box>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n }\r\n\r\n return (\r\n <Box\r\n component=\"nav\"\r\n sx={{\r\n display: \"inline-flex\",\r\n justifyContent: \"start\",\r\n alignItems: \"center\",\r\n // flexWrap: \"nowrap\",\r\n gap: 1,\r\n scrollbarWidth: \"none\",\r\n \"&::-webkit-scrollbar\": { display: \"none\" },\r\n }}\r\n >\r\n <HomeButton aria-label=\"Home\" onClick={handleHomeClick}>\r\n <HomeRounded sx={{ fontSize: 20, color: \"#4D3019\" }} />\r\n </HomeButton>\r\n <MuiBreadcrumbs\r\n separator=\"/\"\r\n sx={{\r\n display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n flexWrap: \"initial\",\r\n // width: \"fit-content\",\r\n flexShrink: 2,\r\n \"& .MuiBreadcrumbs-separator\": {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n }}\r\n >\r\n {items.map((item) => (\r\n item.label === currentItem ? (\r\n <Typography\r\n sx={{\r\n fontWeight: 700,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Typography>\r\n ) : (\r\n <Link\r\n // href={item.href as string}\r\n underline={item.label === currentItem ? \"none\" : \"always\"}\r\n onClick={() => {\r\n if (item.label !== currentItem)\r\n handleNavigation(item.href as string);\r\n }}\r\n sx={{\r\n '&:hover': { cursor: 'pointer' },\r\n color: theme.palette.dark.main,\r\n fontWeight: 500,\r\n whiteSpace: \"nowrap\",\r\n }}\r\n >\r\n {item?.label ?? \"\"}\r\n </Link>\r\n )\r\n ))}\r\n </MuiBreadcrumbs>\r\n <DropdownMenu\r\n dropdownItems={dropdownItems}\r\n currentItem={currentItem}\r\n anchorEl={anchorEl}\r\n isDropdownOpen={isDropdownOpen}\r\n handleDropdownToggle={handleDropdownToggle}\r\n handleClose={handleClose}\r\n handleItemClick={handleItemClick}\r\n />\r\n </Box>\r\n );\r\n};\r\n"],"names":["_jsxs","_jsx","MuiBreadcrumbs"],"mappings":";;;;;;AAgCA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AACpD,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,MAAM,EAAE,EAAE;IACV,YAAY,EACV,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK;UACjC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;UACrC,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;AACxC,IAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI;AAC1E,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,SAAS,EAAE;AACT,QAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI;AAC1E,QAAA,OAAO,EAAE,GAAG;AACb,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AACtD,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,eAAe;AAC/B,IAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IAC/B,YAAY,EACV,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK;UACjC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;UACrC,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;IACxC,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AAChD,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,UAAU,EAAE,mBAAmB;AAC/B,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,SAAS,EAAE;QACT,WAAW,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AAC5C,KAAA;IACD,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;AAC9B,QAAA,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;AAC/B,QAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AACxB,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AAC9C,IAAA,kBAAkB,EAAE;AAClB,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,QAAA,KAAK,EAAE,MAAM;QACb,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;AAC9B,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;QACD,YAAY,EACV,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK;cACjC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;cACrC,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;QACxC,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AAChD,QAAA,SAAS,EACP,yEAAyE;AAC5E,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,EAAE;IACtC,iBAAiB,EAAE,CAAC,IAAI,KAAK,IAAI,KAAK,UAAU;CACjD,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM;IACnD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;AAC/B,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,KAAK,EAAE,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,GAAG,SAAS;IACxD,UAAU,EAAE,QAAQ,GAAG,GAAG,GAAG,GAAG;IAChC,eAAe,EAAE,QAAQ,GAAG,SAAS,GAAG,aAAa;AACrD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,SAAS,EAAE;AACT,QAAA,eAAe,EAAE,SAAS;AAC3B,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CAAC,EACpB,aAAa,EACb,WAAW,EACX,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,WAAW,EACX,eAAe,GAShB,KAAI;AACH,IAAA,OAAO,aAAa,CAAC,MAAM,GAAG,CAAC,IAC7BA,IAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CAC9CA,KAAC,cAAc,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAAA,oBAAA,EAEzDC,IAAC,iBAAiB,EAAA,EAChB,EAAE,EAAE;AACF,4BAAA,QAAQ,EAAE,EAAE;AACZ,4BAAA,UAAU,EAAE,gBAAgB;4BAC5B,SAAS,EAAE,cAAc,GAAG,gBAAgB,GAAG,cAAc;AAC9D,yBAAA,EAAA,CACD,CAAA,EAAA,CACa,EAEjBA,GAAA,CAAC,UAAU,EAAA,EACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAA,IAAA,EAAA,QAAA,EAEhB,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC7BA,GAAA,CAAC,cAAc,EAAA,EAEb,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,EACpC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,EAAA,QAAA,EAEnC,IAAI,CAAC,KAAK,EAAA,EAJN,KAAK,CAKK,CAClB,CAAC,EAAA,CACS,CAAA,EAAA,CACT,IACJ,IAAI;AACV,CAAC;AAEM,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,WAAW,EACX,aAAa,GAAG,EAAE,EAClB,YAAY,EACZ,UAAU,GACX,KAAI;AACH,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;AAClE,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,QAAQ,CAAC;AACxC,IAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC5D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE3C,IAAA,MAAM,UAAU,GAAG,CAAC,EAKnB,KAAI;QACH,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,EAAE;AACnD,QAAA,MAAM,OAAO,GAAG,UAAU,KAAK,CAAC;QAChC,MAAM,KAAK,GAAG,UAAU,GAAG,WAAW,IAAI,WAAW,GAAG,CAAC;QAEzD,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa;QAC9C,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,aAAa;AAE7C,QAAA,MAAM,IAAI,GAAG,CAAA,0BAAA,EAA6B,IAAI,CAAA,uCAAA,EAA0C,KAAK,GAAG;AAChG,QAAA,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI;AACzB,QAAA,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI;AACjC,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO;AAC7B,QAAA,IAAI,CAAC,EAAE;YAAE;AACT,QAAA,UAAU,CAAC,EAAE,CAAC,CAAC;AACf,QAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,UAAU,CAAC,EAAE,CAAC,CAAC;AACnD,QAAA,OAAO,MAAM,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,UAAU,CAAC,EAAE,CAAC,CAAC;IACrE,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAC1E,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,gBAAgB,GAAG,CAAC,IAAY,KAAI;QACxC,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,IAAI,CAAC;QAClB;aAAO;AACL,YAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI;QAC7B;AACF,IAAA,CAAC;AAED,IAAA,MAAM,oBAAoB,GAAG,CAAC,KAA0C,KAAI;AAC1E,QAAA,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC;AAClC,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC,IAAI,CAAC;IAE3C,MAAM,eAAe,GAAG,MAAM,gBAAgB,CAAC,GAAG,CAAC;AACnD,IAAA,MAAM,eAAe,GAAG,CAAC,IAAoB,KAAI;AAC/C,QAAA,YAAY,GAAG,IAAI,CAAC;AACpB,QAAA,WAAW,EAAE;QACb,IAAI,IAAI,CAAC,IAAI;AAAE,YAAA,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5C,IAAA,CAAC;AAED,IAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACpB;IACF;IAEA,IAAI,QAAQ,EAAE;AACZ,QAAA,QACED,IAAA,CAAC,GAAG,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAC/CC,GAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,KAAK,EACf,EAAE,EAAE;AACF,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,OAAO,EAAE,MAAM;AACf,wBAAA,aAAa,EAAE,KAAK;AACpB,wBAAA,UAAU,EAAE,OAAO;AACnB,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,SAAS,EAAE,MAAM;AACjB,wBAAA,YAAY,EAAE,UAAU;AACxB,wBAAA,QAAQ,EAAE,CAAC;AACX,wBAAA,cAAc,EAAE,MAAM;AACtB,wBAAA,sBAAsB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC5C,qBAAA,EAAA,QAAA,EAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACdD,IAAA,CAAC,QAAQ,eACPC,GAAA,CAAC,mBAAmB,EAAA,EAAA,CAAG,EACtB,IAAI,CAAC,KAAK,KAAK,WAAW,IACzBA,GAAA,CAAC,UAAU,EAAA,EACT,EAAE,EAAE;AACF,oCAAA,UAAU,EAAE,GAAG;AACf,oCAAA,UAAU,EAAE,QAAQ;AACrB,iCAAA,EAAA,QAAA,EAEA,IAAI,EAAE,KAAK,IAAI,EAAE,EAAA,CACP,KAEbA,GAAA,CAAC;;;;AAEC,gCAAA,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,EACzD,OAAO,EAAE,MAAK;AACZ,oCAAA,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW;AAC5B,wCAAA,gBAAgB,CAAC,IAAI,CAAC,IAAc,CAAC;gCACzC,CAAC,EACD,EAAE,EAAE;AACF,oCAAA,SAAS,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;AAChC,oCAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,oCAAA,UAAU,EAAE,GAAG;AACf,oCAAA,UAAU,EAAE,QAAQ;iCACrB,EAAA,QAAA,EAEA,IAAI,EAAE,KAAK,IAAI,EAAE,GACb,CACR,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,MAAM,GAAI,CAAA,EAAA,EA7BP,IAAI,CAAC,KAAK,CA8Bd,CACZ,CAAC,EAAA,CACE,EACNA,GAAA,CAAC,YAAY,EAAA,EACX,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAAA,CAChC,CAAA,EAAA,CACE;IAEV;IAEA,QACED,KAAC,GAAG,EAAA,EACF,SAAS,EAAC,KAAK,EACf,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,cAAc,EAAE,OAAO;AACvB,YAAA,UAAU,EAAE,QAAQ;;AAEpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,cAAc,EAAE,MAAM;AACtB,YAAA,sBAAsB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;AAC5C,SAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EAAY,MAAM,EAAC,OAAO,EAAE,eAAe,EAAA,QAAA,EACpDA,IAAC,WAAW,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAAI,EAAA,CAC5C,EACbA,GAAA,CAACC,WAAc,IACb,SAAS,EAAC,GAAG,EACb,EAAE,EAAE;AACF,oBAAA,OAAO,EAAE,aAAa;AACtB,oBAAA,aAAa,EAAE,KAAK;AACpB,oBAAA,QAAQ,EAAE,SAAS;;AAEnB,oBAAA,UAAU,EAAE,CAAC;AACb,oBAAA,6BAA6B,EAAE;wBAC7B,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI;AACtC,qBAAA;iBACF,EAAA,QAAA,EAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACd,IAAI,CAAC,KAAK,KAAK,WAAW,IACxBD,GAAA,CAAC,UAAU,EAAA,EACT,EAAE,EAAE;AACF,wBAAA,UAAU,EAAE,GAAG;AACf,wBAAA,UAAU,EAAE,QAAQ;AACrB,qBAAA,EAAA,QAAA,EAEA,IAAI,EAAE,KAAK,IAAI,EAAE,EAAA,CACP,KAEbA,GAAA,CAAC;;;;AAEC,oBAAA,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,EACzD,OAAO,EAAE,MAAK;AACZ,wBAAA,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW;AAC5B,4BAAA,gBAAgB,CAAC,IAAI,CAAC,IAAc,CAAC;oBACzC,CAAC,EACD,EAAE,EAAE;AACF,wBAAA,SAAS,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;AAChC,wBAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC9B,wBAAA,UAAU,EAAE,GAAG;AACf,wBAAA,UAAU,EAAE,QAAQ;qBACrB,EAAA,QAAA,EAEA,IAAI,EAAE,KAAK,IAAI,EAAE,EAAA,CACb,CACR,CACF,CAAC,EAAA,CACa,EACjBA,GAAA,CAAC,YAAY,IACX,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAAA,CAChC,CAAA,EAAA,CACE;AAEV;;;;"}
|
|
@@ -8,6 +8,18 @@ const StyledButton = styled(Button$1, {
|
|
|
8
8
|
shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',
|
|
9
9
|
})(({ theme, customVariant, customSize }) => {
|
|
10
10
|
const currentTheme = theme.palette;
|
|
11
|
+
// Map each variant to its background color
|
|
12
|
+
const variantBackgrounds = {
|
|
13
|
+
primary: currentTheme.primary.main,
|
|
14
|
+
secondary: currentTheme.secondary.main,
|
|
15
|
+
outline: currentTheme.light.main,
|
|
16
|
+
'marked-read': 'rgb(163, 217, 119)', // use solid equiv for contrast calc
|
|
17
|
+
'mark-read': currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,
|
|
18
|
+
danger: '#D32F2F',
|
|
19
|
+
};
|
|
20
|
+
const currentBg = variantBackgrounds[customVariant] ?? currentTheme.primary.main;
|
|
21
|
+
// Returns '#fff' or '#000' based on WCAG contrast ratio
|
|
22
|
+
const disabledTextColor = theme.palette.getContrastText(currentBg);
|
|
11
23
|
// Size styles
|
|
12
24
|
const sizeStyles = {
|
|
13
25
|
sm: {
|
|
@@ -37,7 +49,9 @@ const StyledButton = styled(Button$1, {
|
|
|
37
49
|
},
|
|
38
50
|
'&.Mui-disabled': {
|
|
39
51
|
opacity: 0.5,
|
|
52
|
+
color: disabledTextColor,
|
|
40
53
|
cursor: 'not-allowed',
|
|
54
|
+
pointerEvents: 'auto',
|
|
41
55
|
},
|
|
42
56
|
...sizeStyles[customSize],
|
|
43
57
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';\r\nimport { styled } from '@mui/material/styles';\r\nimport { ArticleRounded, FactCheckRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface CustomButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst StyledButton = styled(MuiButton, {\r\n shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',\r\n})<{ customVariant: string; customSize: string }>(({ theme, customVariant, customSize }) => {\r\n const currentTheme = theme.palette;\r\n\r\n // Size styles\r\n const sizeStyles = {\r\n sm: {\r\n padding: '6px 12px',\r\n fontSize: '0.875rem',\r\n },\r\n md: {\r\n padding: '10px 16px',\r\n fontSize: '1rem',\r\n },\r\n lg: {\r\n padding: '12px 24px',\r\n fontSize: '1.125rem',\r\n },\r\n };\r\n\r\n const baseStyles = {\r\n fontWeight: 500,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n textTransform: 'none' as const,\r\n transition: 'all 0.2s',\r\n boxShadow: 'none',\r\n border: '2px solid transparent',\r\n '&:hover': {\r\n boxShadow: 'none',\r\n },\r\n '&.Mui-disabled': {\r\n opacity: 0.5,\r\n cursor: 'not-allowed',\r\n },\r\n ...sizeStyles[customSize as keyof typeof sizeStyles],\r\n };\r\n\r\n // Variant styles\r\n const variantStyles = {\r\n primary: {\r\n backgroundColor: currentTheme.primary.main,\r\n color: currentTheme.custom?.primaryButtonTextColor || '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.primary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n secondary: {\r\n backgroundColor: currentTheme.secondary.main,\r\n color: currentTheme.dark.main,\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.secondary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n outline: {\r\n backgroundColor: currentTheme.light.main,\r\n borderColor: 'rgba(77, 48, 25, 0.2)', // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(77, 48, 25, 0.05)',\r\n borderColor: 'rgba(77, 48, 25, 0.3)',\r\n },\r\n },\r\n 'marked-read': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.1)',\r\n fontSize: '14px',\r\n border: '1px solid',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.markedRead.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.2)',\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n 'mark-read': {\r\n backgroundColor: currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,\r\n border: '1px solid',\r\n fontSize: '14px',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.custom?.markAsReadBorderColor || currentTheme.secondary.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n opacity: 0.9,\r\n },\r\n },\r\n danger: {\r\n backgroundColor: '#D32F2F',\r\n color: '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: '#B71C1C',\r\n opacity: 0.9,\r\n },\r\n },\r\n };\r\n\r\n return {\r\n ...baseStyles,\r\n ...variantStyles[customVariant as keyof typeof variantStyles],\r\n };\r\n});\r\n\r\nexport const Button: React.FC<CustomButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n children,\r\n endIcon,\r\n fullWidth = false,\r\n ...props\r\n}) => {\r\n // Logic for special end icons per variant\r\n const getEndIcon = () => {\r\n const theme = useTheme();\r\n if (variant === 'mark-read') {\r\n return (\r\n <ArticleRounded sx={{ fontSize: 22, color: theme.palette.custom.iconColor }} />\r\n );\r\n }\r\n\r\n if (variant === 'marked-read') {\r\n return <FactCheckRounded sx={{ fontSize: 22, color: '#5a9c1a' }} />;\r\n }\r\n\r\n return endIcon || null;\r\n };\r\n\r\n return (\r\n <StyledButton\r\n customVariant={variant}\r\n customSize={size}\r\n fullWidth={fullWidth}\r\n disableRipple\r\n endIcon={getEndIcon()}\r\n {...props}\r\n >\r\n {children}\r\n </StyledButton>\r\n );\r\n};\r\n"],"names":["MuiButton","_jsx"],"mappings":";;;;;;AAWA,MAAM,YAAY,GAAG,MAAM,CAACA,QAAS,EAAE;AACrC,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,IAAI,KAAK,eAAe,IAAI,IAAI,KAAK,YAAY;CAC/E,CAAC,CAAgD,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,KAAI;AACzF,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO;;AAGlC,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,QAAQ,EAAE,UAAU;AACrB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,QAAQ,EAAE,MAAM;AACjB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,QAAQ,EAAE,UAAU;AACrB,SAAA;KACF;AAED,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,UAAU,EAAE,GAAG;QACf,YAAY,EAAE,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK;cAC/C,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;cACrC,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;AACtC,QAAA,aAAa,EAAE,MAAe;AAC9B,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,SAAS,EAAE;AACT,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;AACD,QAAA,gBAAgB,EAAE;AAChB,YAAA,OAAO,EAAE,GAAG;AACZ,YAAA,MAAM,EAAE,aAAa;AACtB,SAAA;
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';\r\nimport { styled } from '@mui/material/styles';\r\nimport { ArticleRounded, FactCheckRounded } from '@mui/icons-material';\r\nimport { useTheme } from '../ThemeProvider';\r\n\r\ninterface CustomButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {\r\n variant?: 'primary' | 'secondary' | 'outline' | 'marked-read' | 'mark-read' | 'danger';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst StyledButton = styled(MuiButton, {\r\n shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'customSize',\r\n})<{ customVariant: string; customSize: string }>(({ theme, customVariant, customSize }) => {\r\n const currentTheme = theme.palette;\r\n\r\n // Map each variant to its background color\r\n const variantBackgrounds: Record<string, string> = {\r\n primary: currentTheme.primary.main,\r\n secondary: currentTheme.secondary.main,\r\n outline: currentTheme.light.main,\r\n 'marked-read': 'rgb(163, 217, 119)', // use solid equiv for contrast calc\r\n 'mark-read': currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,\r\n danger: '#D32F2F',\r\n };\r\n\r\n const currentBg = variantBackgrounds[customVariant] ?? currentTheme.primary.main;\r\n\r\n // Returns '#fff' or '#000' based on WCAG contrast ratio\r\n const disabledTextColor = theme.palette.getContrastText(currentBg);\r\n\r\n // Size styles\r\n const sizeStyles = {\r\n sm: {\r\n padding: '6px 12px',\r\n fontSize: '0.875rem',\r\n },\r\n md: {\r\n padding: '10px 16px',\r\n fontSize: '1rem',\r\n },\r\n lg: {\r\n padding: '12px 24px',\r\n fontSize: '1.125rem',\r\n },\r\n };\r\n\r\n const baseStyles = {\r\n fontWeight: 500,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n textTransform: 'none' as const,\r\n transition: 'all 0.2s',\r\n boxShadow: 'none',\r\n border: '2px solid transparent',\r\n '&:hover': {\r\n boxShadow: 'none',\r\n },\r\n '&.Mui-disabled': {\r\n opacity: 0.5,\r\n color: disabledTextColor,\r\n cursor: 'not-allowed',\r\n pointerEvents: 'auto',\r\n },\r\n\r\n ...sizeStyles[customSize as keyof typeof sizeStyles],\r\n };\r\n\r\n // Variant styles\r\n const variantStyles = {\r\n primary: {\r\n backgroundColor: currentTheme.primary.main,\r\n color: currentTheme.custom?.primaryButtonTextColor || '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.primary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n secondary: {\r\n backgroundColor: currentTheme.secondary.main,\r\n color: currentTheme.dark.main,\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: currentTheme.secondary.main,\r\n opacity: 0.9,\r\n },\r\n },\r\n outline: {\r\n backgroundColor: currentTheme.light.main,\r\n borderColor: 'rgba(77, 48, 25, 0.2)', // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(77, 48, 25, 0.05)',\r\n borderColor: 'rgba(77, 48, 25, 0.3)',\r\n },\r\n },\r\n 'marked-read': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.1)',\r\n fontSize: '14px',\r\n border: '1px solid',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.markedRead.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n backgroundColor: 'rgba(163, 217, 119, 0.2)',\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n 'mark-read': {\r\n backgroundColor: currentTheme.custom?.markAsReadBackgroundColor || currentTheme.accent.main,\r\n border: '1px solid',\r\n fontSize: '14px',\r\n padding: '2px 8px',\r\n borderColor: currentTheme.custom?.markAsReadBorderColor || currentTheme.secondary.main, // Visible border\r\n color: currentTheme.dark.main,\r\n '&:hover': {\r\n opacity: 0.9,\r\n },\r\n },\r\n danger: {\r\n backgroundColor: '#D32F2F',\r\n color: '#FFFFFF',\r\n borderColor: 'transparent', // Transparent border\r\n boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\r\n '&:hover': {\r\n backgroundColor: '#B71C1C',\r\n opacity: 0.9,\r\n },\r\n },\r\n };\r\n\r\n return {\r\n ...baseStyles,\r\n ...variantStyles[customVariant as keyof typeof variantStyles],\r\n };\r\n});\r\n\r\nexport const Button: React.FC<CustomButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n children,\r\n endIcon,\r\n fullWidth = false,\r\n ...props\r\n}) => {\r\n // Logic for special end icons per variant\r\n const getEndIcon = () => {\r\n const theme = useTheme();\r\n if (variant === 'mark-read') {\r\n return (\r\n <ArticleRounded sx={{ fontSize: 22, color: theme.palette.custom.iconColor }} />\r\n );\r\n }\r\n\r\n if (variant === 'marked-read') {\r\n return <FactCheckRounded sx={{ fontSize: 22, color: '#5a9c1a' }} />;\r\n }\r\n\r\n return endIcon || null;\r\n };\r\n\r\n return (\r\n <StyledButton\r\n customVariant={variant}\r\n customSize={size}\r\n fullWidth={fullWidth}\r\n disableRipple\r\n endIcon={getEndIcon()}\r\n {...props}\r\n >\r\n {children}\r\n </StyledButton>\r\n );\r\n};\r\n"],"names":["MuiButton","_jsx"],"mappings":"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"}
|
|
@@ -55,9 +55,9 @@ const StyledTextField = styled(TextField, {
|
|
|
55
55
|
},
|
|
56
56
|
// Target the actual input element for padding
|
|
57
57
|
'& .MuiInputBase-input': {
|
|
58
|
-
padding: theme.spacing(1,
|
|
58
|
+
padding: theme.spacing(1, 1.5),
|
|
59
59
|
[theme.breakpoints.up('sm')]: {
|
|
60
|
-
padding: theme.spacing(1.25,
|
|
60
|
+
padding: theme.spacing(1.25, 2),
|
|
61
61
|
},
|
|
62
62
|
},
|
|
63
63
|
'& .MuiFormHelperText-root': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, TextField, TextFieldProps, InputLabel } from '@mui/material';\r\n\r\ninterface InputProps extends Omit<TextFieldProps, 'variant' | 'error'> {\r\n error?: string;\r\n}\r\n\r\nconst InputWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nexport const StyledLabel = styled(InputLabel)(({ theme }) => ({\r\n fontSize: '0.875rem',\r\n fontWeight: 500,\r\n color: theme.palette.dark.main,\r\n marginBottom: theme.spacing(0.75),\r\n display: 'block',\r\n position: 'static',\r\n transform: 'none',\r\n '&.Mui-focused': {\r\n color: theme.palette.dark.main,\r\n },\r\n}));\r\n\r\nconst StyledTextField = styled(TextField, {\r\n shouldForwardProp: (prop) => !['errorMessage'].includes(prop as string),\r\n})<{ errorMessage?: string }>(({ theme, errorMessage }) => ({\r\n width: '100%',\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n minWidth: 0,\r\n height: 48,\r\n padding: 0, // Remove padding from root\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiInputBase-input': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: `${theme.palette.dark.main}33`,\r\n },\r\n },\r\n },\r\n // Target the actual input element for padding\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1,
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, TextField, TextFieldProps, InputLabel } from '@mui/material';\r\n\r\ninterface InputProps extends Omit<TextFieldProps, 'variant' | 'error'> {\r\n error?: string;\r\n}\r\n\r\nconst InputWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nexport const StyledLabel = styled(InputLabel)(({ theme }) => ({\r\n fontSize: '0.875rem',\r\n fontWeight: 500,\r\n color: theme.palette.dark.main,\r\n marginBottom: theme.spacing(0.75),\r\n display: 'block',\r\n position: 'static',\r\n transform: 'none',\r\n '&.Mui-focused': {\r\n color: theme.palette.dark.main,\r\n },\r\n}));\r\n\r\nconst StyledTextField = styled(TextField, {\r\n shouldForwardProp: (prop) => !['errorMessage'].includes(prop as string),\r\n})<{ errorMessage?: string }>(({ theme, errorMessage }) => ({\r\n width: '100%',\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n minWidth: 0,\r\n height: 48,\r\n padding: 0, // Remove padding from root\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: errorMessage ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiInputBase-input': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: `${theme.palette.dark.main}33`,\r\n },\r\n },\r\n },\r\n // Target the actual input element for padding\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1, 1.5),\r\n [theme.breakpoints.up('sm')]: {\r\n padding: theme.spacing(1.25, 2),\r\n },\r\n },\r\n '& .MuiFormHelperText-root': {\r\n marginTop: theme.spacing(0.75),\r\n fontSize: '0.875rem',\r\n color: errorMessage ? theme.palette.error.main : `${theme.palette.dark.main}99`,\r\n },\r\n}));\r\n\r\nexport const Input: React.FC<InputProps> = ({\r\n error,\r\n fullWidth = false,\r\n id,\r\n label,\r\n ...props\r\n}) => {\r\n const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n return (\r\n <InputWrapper sx={{ ...(!fullWidth && { width: 'auto' }) }}>\r\n {label && (\r\n <StyledLabel htmlFor={inputId}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledTextField\r\n id={inputId}\r\n error={!!error}\r\n helperText={error || props.helperText}\r\n errorMessage={error}\r\n fullWidth={fullWidth}\r\n variant=\"outlined\"\r\n {...props}\r\n />\r\n </InputWrapper>\r\n );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@ const StyledTextarea = styled('textarea', {
|
|
|
17
17
|
fontSize: '1rem',
|
|
18
18
|
minWidth: 0,
|
|
19
19
|
border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,
|
|
20
|
-
padding: theme.spacing(1,
|
|
20
|
+
padding: theme.spacing(1, 1.5),
|
|
21
21
|
fontFamily: theme.typography.fontFamily,
|
|
22
22
|
outline: 'none',
|
|
23
23
|
transition: 'border-color 0.2s',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextArea.js","sources":["../../../../src/components/RichTextArea.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, InputLabel } from '@mui/material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface RichTextAreaProps {\r\n error?: string;\r\n value: string;\r\n label?: string;\r\n fullWidth?: boolean;\r\n id?: string;\r\n onChange: (question: any, value: string) => void;\r\n question: any;\r\n helperText?: string;\r\n rows?: number;\r\n disabled?: boolean;\r\n placeholder?: string;\r\n}\r\n\r\nconst AreaWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nconst StyledTextarea = styled('textarea', {\r\n shouldForwardProp: (prop) => !['error'].includes(prop as string),\r\n})<{ error?: string }>(({ theme, error }) => ({\r\n width: '100%',\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n color: theme.palette.dark.main,\r\n fontSize: '1rem',\r\n minWidth: 0,\r\n border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,\r\n padding: theme.spacing(1,
|
|
1
|
+
{"version":3,"file":"RichTextArea.js","sources":["../../../../src/components/RichTextArea.tsx"],"sourcesContent":["import React from 'react';\r\nimport { styled, InputLabel } from '@mui/material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface RichTextAreaProps {\r\n error?: string;\r\n value: string;\r\n label?: string;\r\n fullWidth?: boolean;\r\n id?: string;\r\n onChange: (question: any, value: string) => void;\r\n question: any;\r\n helperText?: string;\r\n rows?: number;\r\n disabled?: boolean;\r\n placeholder?: string;\r\n}\r\n\r\nconst AreaWrapper = styled('div')(({ theme }) => ({\r\n width: '100%',\r\n}));\r\n\r\nconst StyledTextarea = styled('textarea', {\r\n shouldForwardProp: (prop) => !['error'].includes(prop as string),\r\n})<{ error?: string }>(({ theme, error }) => ({\r\n width: '100%',\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n color: theme.palette.dark.main,\r\n fontSize: '1rem',\r\n minWidth: 0,\r\n border: `2px solid ${error ? theme.palette.error.main : `${theme.palette.dark.main}33`}`,\r\n padding: theme.spacing(1, 1.5),\r\n fontFamily: theme.typography.fontFamily,\r\n outline: 'none',\r\n transition: 'border-color 0.2s',\r\n '&:focus': {\r\n borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&:hover': {\r\n borderColor: error ? theme.palette.error.main : theme.palette.primary.main,\r\n },\r\n '&:disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n resize: 'vertical',\r\n}));\r\n\r\nconst HelperText = styled('div')<{ error?: string }>(({ theme, error }) => ({\r\n marginTop: theme.spacing(0.75),\r\n fontSize: '0.875rem',\r\n color: error ? theme.palette.error.main : `${theme.palette.dark.main}99`,\r\n}));\r\n\r\nexport const RichTextArea: React.FC<RichTextAreaProps> = ({\r\n error,\r\n value,\r\n label,\r\n fullWidth = false,\r\n id,\r\n onChange,\r\n question,\r\n helperText,\r\n rows = 4,\r\n disabled,\r\n placeholder,\r\n}) => {\r\n const inputId = id || `richtextarea-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n return (\r\n <AreaWrapper sx={{ ...(!fullWidth && { width: 'auto' }) }}>\r\n {label && (\r\n <StyledLabel htmlFor={inputId}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledTextarea\r\n id={inputId}\r\n error={error}\r\n value={value || ''}\r\n rows={rows}\r\n onChange={(e) => onChange(question, e.target.value)}\r\n disabled={disabled}\r\n placeholder={placeholder}\r\n />\r\n {(error || helperText) && (\r\n <HelperText error={error}>\r\n {error || helperText}\r\n </HelperText>\r\n )}\r\n </AreaWrapper>\r\n );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -55,9 +55,13 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
|
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
57
|
return (jsxs(FormControl, { fullWidth: fullWidth, error: !!error, className: className, children: [label && (jsx(StyledLabel, { htmlFor: selectId, shrink: false, children: label })), jsx(StyledSelect, { id: selectId, name: name, value: value || '', onChange: handleChange, disabled: disabled, error: !!error, IconComponent: ExpandMoreRounded, MenuProps: {
|
|
58
|
+
MenuListProps: {
|
|
59
|
+
sx: {
|
|
60
|
+
paddingBottom: 0,
|
|
61
|
+
},
|
|
62
|
+
},
|
|
58
63
|
PaperProps: {
|
|
59
64
|
sx: {
|
|
60
|
-
mt: 1,
|
|
61
65
|
borderRadius: 2,
|
|
62
66
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
63
67
|
},
|
|
@@ -69,9 +73,9 @@ const Select = ({ label, error, helperText, fullWidth = false, options, classNam
|
|
|
69
73
|
backgroundColor: `${theme.palette.primary.main}1A`,
|
|
70
74
|
},
|
|
71
75
|
'&.Mui-selected': {
|
|
72
|
-
backgroundColor:
|
|
76
|
+
backgroundColor: 'transparent',
|
|
73
77
|
'&:hover': {
|
|
74
|
-
backgroundColor: `${theme.palette.primary.main}
|
|
78
|
+
backgroundColor: `${theme.palette.primary.main}1A`,
|
|
75
79
|
},
|
|
76
80
|
},
|
|
77
81
|
}, children: option.label }, option.value))) }), error && (jsx(FormHelperText, { sx: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface SelectProps {\r\n label?: string;\r\n error?: string;\r\n helperText?: string;\r\n fullWidth?: boolean;\r\n options: { value: string; label: string }[];\r\n value?: string;\r\n onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n name?: string;\r\n}\r\n\r\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n '& .MuiInputBase-root, &.MuiOutlinedInput-root': {\r\n height: 48,\r\n padding: 0,\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiSelect-select': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n '& .MuiSelect-icon': {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n}));\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n label,\r\n error,\r\n helperText,\r\n fullWidth = false,\r\n options,\r\n className = '',\r\n id,\r\n value,\r\n onChange,\r\n disabled,\r\n name,\r\n}) => {\r\n const theme = useTheme();\r\n const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n const handleChange = (event: any) => {\r\n if (onChange) {\r\n // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\r\n const syntheticEvent = {\r\n target: {\r\n value: event.target.value,\r\n name: name || '',\r\n },\r\n currentTarget: event.currentTarget,\r\n } as React.ChangeEvent<HTMLSelectElement>;\r\n onChange(syntheticEvent);\r\n }\r\n };\r\n\r\n return (\r\n <FormControl \r\n fullWidth={fullWidth} \r\n error={!!error}\r\n className={className}\r\n >\r\n {label && (\r\n <StyledLabel htmlFor={selectId} shrink={false}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledSelect\r\n id={selectId}\r\n name={name}\r\n value={value || ''}\r\n onChange={handleChange}\r\n disabled={disabled}\r\n error={!!error}\r\n IconComponent={ExpandMoreRounded}\r\n MenuProps={{\r\n
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { FormControl, InputLabel, Select as MuiSelect, MenuItem, FormHelperText, styled } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { ExpandMoreRounded } from '@mui/icons-material';\r\nimport { StyledLabel } from './Input';\r\n\r\ninterface SelectProps {\r\n label?: string;\r\n error?: string;\r\n helperText?: string;\r\n fullWidth?: boolean;\r\n options: { value: string; label: string }[];\r\n value?: string;\r\n onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\r\n disabled?: boolean;\r\n className?: string;\r\n id?: string;\r\n name?: string;\r\n}\r\n\r\nconst StyledSelect = styled(MuiSelect)(({ theme, error }) => ({\r\n backgroundColor: theme.palette.light.main,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n '& .MuiInputBase-root, &.MuiOutlinedInput-root': {\r\n height: 48,\r\n padding: 0,\r\n },\r\n '& .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : `${theme.palette.dark.main}33`,\r\n borderWidth: 2,\r\n },\r\n '&:hover .MuiOutlinedInput-notchedOutline': {\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n borderWidth: 2,\r\n },\r\n '&.Mui-focused .MuiOutlinedInput-notchedOutline': {\r\n borderWidth: 2,\r\n borderColor: error ? theme.palette.accent.main : theme.palette.primary.main,\r\n },\r\n '&.Mui-disabled': {\r\n backgroundColor: `${theme.palette.dark.main}0D`,\r\n '& .MuiSelect-select': {\r\n color: `${theme.palette.dark.main}80`,\r\n cursor: 'not-allowed',\r\n },\r\n },\r\n '& .MuiSelect-icon': {\r\n color: `${theme.palette.dark.main}66`,\r\n },\r\n}));\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n label,\r\n error,\r\n helperText,\r\n fullWidth = false,\r\n options,\r\n className = '',\r\n id,\r\n value,\r\n onChange,\r\n disabled,\r\n name,\r\n}) => {\r\n const theme = useTheme();\r\n const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n const handleChange = (event: any) => {\r\n if (onChange) {\r\n // Create a synthetic event that matches React.ChangeEvent<HTMLSelectElement>\r\n const syntheticEvent = {\r\n target: {\r\n value: event.target.value,\r\n name: name || '',\r\n },\r\n currentTarget: event.currentTarget,\r\n } as React.ChangeEvent<HTMLSelectElement>;\r\n onChange(syntheticEvent);\r\n }\r\n };\r\n\r\n return (\r\n <FormControl \r\n fullWidth={fullWidth} \r\n error={!!error}\r\n className={className}\r\n >\r\n {label && (\r\n <StyledLabel htmlFor={selectId} shrink={false}>\r\n {label}\r\n </StyledLabel>\r\n )}\r\n <StyledSelect\r\n id={selectId}\r\n name={name}\r\n value={value || ''}\r\n onChange={handleChange}\r\n disabled={disabled}\r\n error={!!error}\r\n IconComponent={ExpandMoreRounded}\r\n MenuProps={{\r\n MenuListProps: {\r\n sx: {\r\n paddingBottom: 0,\r\n },\r\n },\r\n PaperProps: {\r\n sx: {\r\n borderRadius: 2,\r\n boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\r\n },\r\n },\r\n }}\r\n >\r\n {options.map((option) => (\r\n <MenuItem \r\n key={option.value} \r\n value={option.value}\r\n sx={{\r\n fontSize: '1rem',\r\n color: theme.palette.dark.main,\r\n '&:hover': {\r\n backgroundColor: `${theme.palette.primary.main}1A`,\r\n },\r\n '&.Mui-selected': {\r\n backgroundColor: 'transparent',\r\n '&:hover': {\r\n backgroundColor: `${theme.palette.primary.main}1A`,\r\n },\r\n },\r\n }}\r\n >\r\n {option.label}\r\n </MenuItem>\r\n ))}\r\n </StyledSelect>\r\n {error && (\r\n <FormHelperText\r\n sx={{\r\n mt: 0.75,\r\n fontSize: '0.875rem',\r\n color: theme.palette.accent.main,\r\n }}\r\n >\r\n {error}\r\n </FormHelperText>\r\n )}\r\n {helperText && !error && (\r\n <FormHelperText\r\n sx={{\r\n mt: 0.75,\r\n fontSize: '0.875rem',\r\n color: `${theme.palette.dark.main}99`,\r\n }}\r\n >\r\n {helperText}\r\n </FormHelperText>\r\n )}\r\n </FormControl>\r\n );\r\n};"],"names":["MuiSelect","_jsxs","_jsx"],"mappings":"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"}
|