@rws-aoa/react-library 3.6.4 → 3.6.6
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/_constants.js.map +1 -1
- package/dist/components/atoms/_menu/menu-item/MenuItem.d.ts.map +1 -1
- package/dist/components/atoms/_menu/menu-item/MenuItem.js +32 -26
- package/dist/components/atoms/_menu/menu-item/MenuItem.js.map +1 -1
- package/dist/components/atoms/_menu/user-menu/UserMenu.d.ts +1 -1
- package/dist/components/atoms/_menu/user-menu/UserMenu.d.ts.map +1 -1
- package/dist/components/atoms/_menu/user-menu/UserMenu.js +15 -14
- package/dist/components/atoms/_menu/user-menu/UserMenu.js.map +1 -1
- package/dist/components/atoms/button/Button.d.ts +4 -4
- package/dist/components/atoms/button/Button.d.ts.map +1 -1
- package/dist/components/atoms/button/Button.js +121 -119
- package/dist/components/atoms/button/Button.js.map +1 -1
- package/dist/components/atoms/icon-button/IconButton.d.ts +1 -1
- package/dist/components/atoms/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/atoms/icon-button/IconButton.js +6 -4
- package/dist/components/atoms/icon-button/IconButton.js.map +1 -1
- package/dist/components/atoms/input/Input.d.ts +2 -2
- package/dist/components/atoms/input/Input.js.map +1 -1
- package/dist/components/atoms/logo/Logo.d.ts +2 -2
- package/dist/components/atoms/logo/Logo.js.map +1 -1
- package/dist/components/atoms/no-permission/NoPermission.d.ts +1 -1
- package/dist/components/atoms/no-permission/NoPermission.js.map +1 -1
- package/dist/components/atoms/notification/Notification.d.ts +2 -2
- package/dist/components/atoms/notification/Notification.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Error.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Info.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Success.js.map +1 -1
- package/dist/components/atoms/notification/_icons/Warning.js.map +1 -1
- package/dist/components/atoms/section-header/SectionHeader.d.ts +2 -2
- package/dist/components/atoms/section-header/SectionHeader.d.ts.map +1 -1
- package/dist/components/atoms/section-header/SectionHeader.js +57 -35
- package/dist/components/atoms/section-header/SectionHeader.js.map +1 -1
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.d.ts +2 -2
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js +3 -3
- package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js.map +1 -1
- package/dist/components/atoms/selection-buttons/radio-button/RadioButton.d.ts +1 -1
- package/dist/components/atoms/selection-buttons/radio-button/RadioButton.d.ts.map +1 -1
- package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js.map +1 -1
- package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.d.ts +1 -1
- package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.d.ts.map +1 -1
- package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.js.map +1 -1
- package/dist/components/atoms/table/Table.d.ts +4 -4
- package/dist/components/atoms/table/Table.d.ts.map +1 -1
- package/dist/components/atoms/table/Table.js +31 -31
- package/dist/components/atoms/table/Table.js.map +1 -1
- package/dist/components/atoms/table/_QuickSearchToolbar.d.ts +2 -2
- package/dist/components/atoms/table/_QuickSearchToolbar.d.ts.map +1 -1
- package/dist/components/atoms/table/_QuickSearchToolbar.js +8 -1
- package/dist/components/atoms/table/_QuickSearchToolbar.js.map +1 -1
- package/dist/components/atoms/zero-width-space/ZeroWidthSpace.js.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.d.ts.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.js +24 -13
- package/dist/components/molecules/file-dropzone/FileDropzone.js.map +1 -1
- package/dist/components/molecules/file-table/FileTable.d.ts +4 -4
- package/dist/components/molecules/file-table/FileTable.js +17 -17
- package/dist/components/molecules/file-table/FileTable.js.map +1 -1
- package/dist/components/molecules/form-error/FormError.d.ts +2 -2
- package/dist/components/molecules/form-error/FormError.js.map +1 -1
- package/dist/components/molecules/form-modal/FormModal.d.ts +2 -2
- package/dist/components/molecules/form-modal/FormModal.d.ts.map +1 -1
- package/dist/components/molecules/form-modal/FormModal.js +10 -1
- package/dist/components/molecules/form-modal/FormModal.js.map +1 -1
- package/dist/components/molecules/modal/Modal.d.ts +1 -1
- package/dist/components/molecules/modal/Modal.d.ts.map +1 -1
- package/dist/components/molecules/modal/Modal.js.map +1 -1
- package/dist/components/molecules/modal-close-button/ModalCloseButton.js.map +1 -1
- package/dist/components/molecules/navigation-bar/NavigationBar.d.ts.map +1 -1
- package/dist/components/molecules/navigation-bar/NavigationBar.js +27 -16
- package/dist/components/molecules/navigation-bar/NavigationBar.js.map +1 -1
- package/dist/components/molecules/upload-button/UploadButton.d.ts +2 -2
- package/dist/components/molecules/upload-button/UploadButton.js +18 -18
- package/dist/components/molecules/upload-button/UploadButton.js.map +1 -1
- package/dist/components/organisms/content-page/ContentPage.d.ts +1 -1
- package/dist/components/organisms/content-page/ContentPage.d.ts.map +1 -1
- package/dist/components/organisms/content-page/ContentPage.js +6 -4
- package/dist/components/organisms/content-page/ContentPage.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +41 -41
package/dist/_constants.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_constants.js","sources":["../src/_constants.ts"],"sourcesContent":["import type { SxProps } from
|
|
1
|
+
{"version":3,"file":"_constants.js","sources":["../src/_constants.ts"],"sourcesContent":["import type { SxProps } from '@mui/material';\n\nexport const FontNormalSxProps = {\n fontFamily: 'var(--font-text)',\n fontSize: 'var(--font-size-text)',\n lineHeight: 'var(--font-lineheight-text)',\n fontStyle: 'normal',\n fontWeight: 'normal'\n} satisfies SxProps;\n\nexport function isExtensionAllowed(regExp: RegExp, fileName: string) {\n return regExp.test(fileName);\n}\n"],"names":["FontNormalSxProps","isExtensionAllowed","regExp","fileName"],"mappings":"AAEO,MAAMA,IAAoB;AAAA,EAC/B,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AACd;AAEgB,SAAAC,EAAmBC,GAAgBC,GAAkB;AAC5D,SAAAD,EAAO,KAAKC,CAAQ;AAC7B;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5G,UAAU,OAAO;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,KAAK,IAAI;AACP;;GAEG;AACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,8CAAgB,aAAa,KAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5G,UAAU,OAAO;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,KAAK,IAAI;AACP;;GAEG;AACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC5D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,8CAAgB,aAAa,KAAG,SAAS,CAuJ/D,CAAC"}
|
|
@@ -1,34 +1,36 @@
|
|
|
1
1
|
import { jsxs as u, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { memo as C, useState as s, createElement as
|
|
3
|
-
import { Home as
|
|
2
|
+
import { memo as C, useState as s, createElement as P } from "react";
|
|
3
|
+
import { Home as I, KeyboardArrowDown as S } from "@mui/icons-material";
|
|
4
4
|
import { MenuItem as x, Link as j, Typography as w, Popper as B } from "@mui/material";
|
|
5
5
|
import { Link as b } from "@tanstack/react-router";
|
|
6
|
-
import { m as
|
|
7
|
-
import { FontNormalSxProps as
|
|
6
|
+
import { m as h } from "../../../../chunks/index.DJYQ_-zP.js";
|
|
7
|
+
import { FontNormalSxProps as p } from "../../../../_constants.js";
|
|
8
8
|
const O = C((e) => {
|
|
9
|
-
var
|
|
10
|
-
const [
|
|
11
|
-
function
|
|
12
|
-
|
|
9
|
+
var i, g, d, m, c;
|
|
10
|
+
const [v, a] = s(null), [t, n] = s(!1);
|
|
11
|
+
function f(o) {
|
|
12
|
+
n(!0), a(o.currentTarget);
|
|
13
13
|
}
|
|
14
|
-
function
|
|
15
|
-
|
|
14
|
+
function l() {
|
|
15
|
+
n(!1), a(null);
|
|
16
16
|
}
|
|
17
17
|
function k() {
|
|
18
18
|
return e.page.externalPath ? { href: e.page.to } : { to: e.page.to };
|
|
19
19
|
}
|
|
20
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ P(
|
|
21
21
|
x,
|
|
22
22
|
{
|
|
23
23
|
...k(),
|
|
24
|
-
"aria-controls": (
|
|
25
|
-
"aria-expanded": (
|
|
26
|
-
"aria-haspopup": (
|
|
24
|
+
"aria-controls": (i = e.page.subItems) != null && i.length && t ? "submenu" : void 0,
|
|
25
|
+
"aria-expanded": (g = e.page.subItems) != null && g.length && t ? "true" : void 0,
|
|
26
|
+
"aria-haspopup": (d = e.page.subItems) != null && d.length ? "true" : "false",
|
|
27
|
+
"aria-label": e.page.label,
|
|
27
28
|
component: e.page.to && !e.page.externalPath ? b : j,
|
|
28
29
|
key: e.index,
|
|
29
30
|
onClick: () => e.setSelectedPage(e.index),
|
|
30
|
-
onMouseEnter: (o) =>
|
|
31
|
-
onMouseLeave: () =>
|
|
31
|
+
onMouseEnter: (o) => f(o),
|
|
32
|
+
onMouseLeave: () => l(),
|
|
33
|
+
role: "menuitem",
|
|
32
34
|
selected: e.selectedPage === e.index,
|
|
33
35
|
sx: {
|
|
34
36
|
height: "100%",
|
|
@@ -47,13 +49,15 @@ const O = C((e) => {
|
|
|
47
49
|
backgroundColor: "var(--color-rijks-yellow-hover)"
|
|
48
50
|
}
|
|
49
51
|
}
|
|
50
|
-
}
|
|
52
|
+
},
|
|
53
|
+
title: e.page.label
|
|
51
54
|
},
|
|
52
55
|
/* @__PURE__ */ u(
|
|
53
56
|
w,
|
|
54
57
|
{
|
|
58
|
+
"aria-hidden": !0,
|
|
55
59
|
component: "span",
|
|
56
|
-
sx:
|
|
60
|
+
sx: h(
|
|
57
61
|
{
|
|
58
62
|
display: "flex",
|
|
59
63
|
alignItems: "center",
|
|
@@ -61,23 +65,24 @@ const O = C((e) => {
|
|
|
61
65
|
marginRight: "5px"
|
|
62
66
|
}
|
|
63
67
|
},
|
|
64
|
-
|
|
68
|
+
p
|
|
65
69
|
),
|
|
66
70
|
variant: "body1",
|
|
67
71
|
children: [
|
|
68
|
-
e.index === 0 && /* @__PURE__ */ r(
|
|
72
|
+
e.index === 0 && /* @__PURE__ */ r(I, {}),
|
|
69
73
|
e.page.label,
|
|
70
|
-
(
|
|
74
|
+
(m = e.page.subItems) != null && m.length ? /* @__PURE__ */ r(S, {}) : null
|
|
71
75
|
]
|
|
72
76
|
}
|
|
73
77
|
),
|
|
74
78
|
e.page.subItems && /* @__PURE__ */ r(
|
|
75
79
|
B,
|
|
76
80
|
{
|
|
77
|
-
anchorEl:
|
|
81
|
+
anchorEl: v,
|
|
78
82
|
id: "submenu",
|
|
79
83
|
open: t,
|
|
80
84
|
placement: "bottom-start",
|
|
85
|
+
role: "menu",
|
|
81
86
|
sx: {
|
|
82
87
|
backgroundColor: "var(--color-bg-light)",
|
|
83
88
|
padding: "4px 0",
|
|
@@ -92,16 +97,17 @@ const O = C((e) => {
|
|
|
92
97
|
rgb(0 0 0 / 5%) 0 4px 6px -2px
|
|
93
98
|
`
|
|
94
99
|
},
|
|
95
|
-
children: (
|
|
100
|
+
children: (c = e.page.subItems) == null ? void 0 : c.map((o, y) => /* @__PURE__ */ u(
|
|
96
101
|
x,
|
|
97
102
|
{
|
|
103
|
+
"aria-label": o.label,
|
|
98
104
|
component: b,
|
|
99
105
|
disableRipple: !0,
|
|
100
106
|
divider: o.divider ?? !1,
|
|
101
107
|
onClick: (M) => {
|
|
102
|
-
M.stopPropagation(), e.setSelectedPage(e.index),
|
|
108
|
+
M.stopPropagation(), e.setSelectedPage(e.index), l();
|
|
103
109
|
},
|
|
104
|
-
sx:
|
|
110
|
+
sx: h(
|
|
105
111
|
{
|
|
106
112
|
":active": {
|
|
107
113
|
backgroundColor: "var(--color-bg-light)"
|
|
@@ -125,7 +131,7 @@ const O = C((e) => {
|
|
|
125
131
|
marginRight: "12px"
|
|
126
132
|
}
|
|
127
133
|
},
|
|
128
|
-
|
|
134
|
+
p
|
|
129
135
|
),
|
|
130
136
|
to: o.to,
|
|
131
137
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"sourcesContent":["import { Home as HomeIcon, KeyboardArrowDown as KeyboardArrowDownIcon } from \"@mui/icons-material\";\nimport { Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from \"@mui/material\";\nimport { Link } from \"@tanstack/react-router\";\nimport merge from \"lodash.merge\";\nimport { memo, useState, type Dispatch, type MouseEvent, type ReactNode, type SetStateAction } from \"react\";\nimport { FontNormalSxProps } from \"../../../../_constants\";\n\ninterface SubMenu {\n /**\n * Optional divider to be shown below menu item\n */\n divider?: boolean;\n /**\n * Optional icon to be displayed in front of the label\n */\n icon?: JSX.Element;\n /**\n * The label of the menu item\n */\n label: string;\n /**\n * The path that the menu item links to on click\n */\n to: string;\n}\n\ntype Menu =\n /**\n * The path that the menu item links to on click and the subitems shown on hover\n */\n | { subItems: SubMenu[]; to: string }\n /**\n * Subitems are required when there is no path that the menu item links to on click\n */\n | { subItems: SubMenu[]; to?: never }\n /**\n * The path that the menu item links to on click is required when there are no subitems on hover\n */\n | { subItems?: never; to: string };\n\nexport type AoaPage = Menu & {\n /**\n * Optional boolean to indicate if it's an external \"to\" path\n */\n externalPath?: boolean;\n /**\n * The label of the menu item\n */\n label: string;\n};\n\ninterface MenuItemProps {\n /**\n * Index of the current menu item. Home === 0\n */\n readonly index: number;\n /**\n * The Page object for this menu item\n */\n readonly page: AoaPage;\n /**\n * The currently active menu item\n */\n readonly selectedPage: number;\n /**\n * The function to update the active menu item\n */\n readonly setSelectedPage: Dispatch<SetStateAction<number>>;\n}\n\n/**\n * Constructs a menu item using pre-defined Rijks styling\n *\n * @param props - Props to pass to the menu item\n * @example\n * ```jsx\n * <AoaMenuItem\n * index={index}\n * page={{\n * label: \"Products\",\n * to: \"/products\",\n * subItems: [\n * {\n * label: \"Books\",\n * to: \"/books\",\n * icon: <BookIcon />,\n * }\n * ]\n * }}\n * selectedPage={selectedPage}\n * setSelectedPage={setSelectedPage}\n * />\n * ```\n */\nexport const AoaMenuItem = memo((props: MenuItemProps): ReactNode => {\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n const [open, setOpen] = useState(false);\n\n function handleMenuOpen(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) {\n setOpen(true);\n setAnchorEl(event.currentTarget);\n }\n\n function handleMenuClose() {\n setOpen(false);\n setAnchorEl(null);\n }\n\n function linkProps() {\n if (props.page.externalPath) {\n return { href: props.page.to };\n } else {\n return { to: props.page.to };\n }\n }\n\n return (\n <MUIMenuItem\n {...linkProps()}\n aria-controls={props.page.subItems?.length && open ? \"submenu\" : undefined}\n aria-expanded={props.page.subItems?.length && open ? \"true\" : undefined}\n aria-haspopup={props.page.subItems?.length ? \"true\" : \"false\"}\n component={props.page.to && !props.page.externalPath ? Link : MUILink}\n key={props.index}\n onClick={() => props.setSelectedPage(props.index)}\n onMouseEnter={(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => handleMenuOpen(event)}\n onMouseLeave={() => handleMenuClose()}\n selected={props.selectedPage === props.index}\n sx={{\n height: \"100%\",\n borderBottom: \"3px solid transparent\",\n padding: \"6px 20px 3px\",\n\n \":hover\": {\n backgroundColor: \"var(--color-rijks-yellow-hover)\",\n ...(props.page.to && {\n textDecoration: \"underline\"\n })\n },\n\n \"&.Mui-selected\": {\n backgroundColor: \"var(--color-rijks-yellow-light)\",\n borderBottomColor: \"var(--color-rijks-skyblue)\",\n \":hover\": {\n backgroundColor: \"var(--color-rijks-yellow-hover)\"\n }\n }\n }}\n >\n <Typography\n component=\"span\"\n sx={merge(\n {\n display: \"flex\",\n alignItems: \"center\",\n\n \"&.MuiSvgIcon-root\": {\n marginRight: \"5px\"\n }\n },\n FontNormalSxProps\n )}\n variant=\"body1\"\n >\n {props.index === 0 && <HomeIcon />}\n {props.page.label}\n {props.page.subItems?.length ? <KeyboardArrowDownIcon /> : null}\n </Typography>\n {props.page.subItems && (\n <Popper\n anchorEl={anchorEl}\n id=\"submenu\"\n open={open}\n placement=\"bottom-start\"\n sx={{\n backgroundColor: \"var(--color-bg-light)\",\n padding: \"4px 0\",\n borderRadius: \"6px\",\n marginTop: \"8px\",\n minWidth: \"180px\",\n color: \"var(--color-text)\",\n boxShadow: `\n rgb(255 255 255) 0 0 0 0,\n rgb(0 0 0 / 5%) 0 0 0 1px,\n rgb(0 0 0 / 10%) 0 10px 15px -3px,\n rgb(0 0 0 / 5%) 0 4px 6px -2px\n `\n }}\n >\n {props.page.subItems?.map((subItem, index) => (\n <MUIMenuItem\n component={Link}\n disableRipple\n divider={subItem.divider ?? false}\n key={index}\n onClick={(event) => {\n event.stopPropagation();\n props.setSelectedPage(props.index);\n handleMenuClose();\n }}\n sx={merge(\n {\n \":active\": {\n backgroundColor: \"var(--color-bg-light)\"\n },\n\n \"&.MuiMenuItem-divider\": {\n borderBottom: \"transparent\",\n position: \"relative\",\n marginBottom: \"16px\",\n\n \"::after\": {\n content: '\"\"',\n position: \"absolute\",\n bottom: \"-8px\",\n left: \"0\",\n width: \"100%\",\n borderBottom: \"1px solid rgba(0, 0, 0, 0.12)\"\n }\n },\n\n \"&.MuiSvgIcon-root\": {\n fontSize: \"var(--font-size-text)\",\n color: \"var(--color-rijks-grey-7)\",\n marginRight: \"12px\"\n }\n },\n FontNormalSxProps\n )}\n to={subItem.to}\n >\n {subItem.icon}\n {subItem.label}\n </MUIMenuItem>\n ))}\n </Popper>\n )}\n </MUIMenuItem>\n );\n});\n"],"names":["AoaMenuItem","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","linkProps","createElement","MUIMenuItem","_a","_b","_c","Link","MUILink","jsxs","Typography","merge","FontNormalSxProps","jsx","HomeIcon","_d","KeyboardArrowDownIcon","Popper","subItem","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/atoms/_menu/menu-item/MenuItem.tsx"],"sourcesContent":["import { Home as HomeIcon, KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';\nimport { Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from '@mui/material';\nimport { Link } from '@tanstack/react-router';\nimport merge from 'lodash.merge';\nimport { memo, useState, type Dispatch, type MouseEvent, type ReactNode, type SetStateAction } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\ninterface SubMenu {\n /**\n * Optional divider to be shown below menu item\n */\n divider?: boolean;\n /**\n * Optional icon to be displayed in front of the label\n */\n icon?: JSX.Element;\n /**\n * The label of the menu item\n */\n label: string;\n /**\n * The path that the menu item links to on click\n */\n to: string;\n}\n\ntype Menu =\n /**\n * The path that the menu item links to on click and the subitems shown on hover\n */\n | { subItems: SubMenu[]; to: string }\n /**\n * Subitems are required when there is no path that the menu item links to on click\n */\n | { subItems: SubMenu[]; to?: never }\n /**\n * The path that the menu item links to on click is required when there are no subitems on hover\n */\n | { subItems?: never; to: string };\n\nexport type AoaPage = Menu & {\n /**\n * Optional boolean to indicate if it's an external \"to\" path\n */\n externalPath?: boolean;\n /**\n * The label of the menu item\n */\n label: string;\n};\n\ninterface MenuItemProps {\n /**\n * Index of the current menu item. Home === 0\n */\n readonly index: number;\n /**\n * The Page object for this menu item\n */\n readonly page: AoaPage;\n /**\n * The currently active menu item\n */\n readonly selectedPage: number;\n /**\n * The function to update the active menu item\n */\n readonly setSelectedPage: Dispatch<SetStateAction<number>>;\n}\n\n/**\n * Constructs a menu item using pre-defined Rijks styling\n *\n * @param props - Props to pass to the menu item\n * @example\n * ```jsx\n * <AoaMenuItem\n * index={index}\n * page={{\n * label: \"Products\",\n * to: \"/products\",\n * subItems: [\n * {\n * label: \"Books\",\n * to: \"/books\",\n * icon: <BookIcon />,\n * }\n * ]\n * }}\n * selectedPage={selectedPage}\n * setSelectedPage={setSelectedPage}\n * />\n * ```\n */\nexport const AoaMenuItem = memo((props: MenuItemProps): ReactNode => {\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n const [open, setOpen] = useState(false);\n\n function handleMenuOpen(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) {\n setOpen(true);\n setAnchorEl(event.currentTarget);\n }\n\n function handleMenuClose() {\n setOpen(false);\n setAnchorEl(null);\n }\n\n function linkProps() {\n if (props.page.externalPath) {\n return { href: props.page.to };\n } else {\n return { to: props.page.to };\n }\n }\n\n return (\n <MUIMenuItem\n {...linkProps()}\n aria-controls={props.page.subItems?.length && open ? 'submenu' : undefined}\n aria-expanded={props.page.subItems?.length && open ? 'true' : undefined}\n aria-haspopup={props.page.subItems?.length ? 'true' : 'false'}\n aria-label={props.page.label}\n component={props.page.to && !props.page.externalPath ? Link : MUILink}\n key={props.index}\n onClick={() => props.setSelectedPage(props.index)}\n onMouseEnter={(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => handleMenuOpen(event)}\n onMouseLeave={() => handleMenuClose()}\n role='menuitem'\n selected={props.selectedPage === props.index}\n sx={{\n height: '100%',\n borderBottom: '3px solid transparent',\n padding: '6px 20px 3px',\n\n ':hover': {\n backgroundColor: 'var(--color-rijks-yellow-hover)',\n ...(props.page.to && {\n textDecoration: 'underline'\n })\n },\n\n '&.Mui-selected': {\n backgroundColor: 'var(--color-rijks-yellow-light)',\n borderBottomColor: 'var(--color-rijks-skyblue)',\n ':hover': {\n backgroundColor: 'var(--color-rijks-yellow-hover)'\n }\n }\n }}\n title={props.page.label}\n >\n <Typography\n aria-hidden\n component='span'\n sx={merge(\n {\n display: 'flex',\n alignItems: 'center',\n\n '&.MuiSvgIcon-root': {\n marginRight: '5px'\n }\n },\n FontNormalSxProps\n )}\n variant='body1'\n >\n {props.index === 0 && <HomeIcon />}\n {props.page.label}\n {props.page.subItems?.length ? <KeyboardArrowDownIcon /> : null}\n </Typography>\n {props.page.subItems && (\n <Popper\n anchorEl={anchorEl}\n id='submenu'\n open={open}\n placement='bottom-start'\n role='menu'\n sx={{\n backgroundColor: 'var(--color-bg-light)',\n padding: '4px 0',\n borderRadius: '6px',\n marginTop: '8px',\n minWidth: '180px',\n color: 'var(--color-text)',\n boxShadow: `\n rgb(255 255 255) 0 0 0 0,\n rgb(0 0 0 / 5%) 0 0 0 1px,\n rgb(0 0 0 / 10%) 0 10px 15px -3px,\n rgb(0 0 0 / 5%) 0 4px 6px -2px\n `\n }}\n >\n {props.page.subItems?.map((subItem, index) => (\n <MUIMenuItem\n aria-label={subItem.label}\n component={Link}\n disableRipple\n divider={subItem.divider ?? false}\n key={index}\n onClick={(event) => {\n event.stopPropagation();\n props.setSelectedPage(props.index);\n handleMenuClose();\n }}\n sx={merge(\n {\n ':active': {\n backgroundColor: 'var(--color-bg-light)'\n },\n\n '&.MuiMenuItem-divider': {\n borderBottom: 'transparent',\n position: 'relative',\n marginBottom: '16px',\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n bottom: '-8px',\n left: '0',\n width: '100%',\n borderBottom: '1px solid rgba(0, 0, 0, 0.12)'\n }\n },\n\n '&.MuiSvgIcon-root': {\n fontSize: 'var(--font-size-text)',\n color: 'var(--color-rijks-grey-7)',\n marginRight: '12px'\n }\n },\n FontNormalSxProps\n )}\n to={subItem.to}\n >\n {subItem.icon}\n {subItem.label}\n </MUIMenuItem>\n ))}\n </Popper>\n )}\n </MUIMenuItem>\n );\n});\n"],"names":["AoaMenuItem","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","linkProps","createElement","MUIMenuItem","_a","_b","_c","Link","MUILink","jsxs","Typography","merge","FontNormalSxProps","jsx","HomeIcon","_d","KeyboardArrowDownIcon","Popper","subItem","index"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,KAAK,MAAM;AACT;;GAEG;AACD;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE;AACjC;;GAEG;GACD;IAAE,OAAO,IAAI,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,WAAW,8CAAgB,aAAa,KAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,KAAK,MAAM;AACT;;GAEG;AACD;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE;AACjC;;GAEG;GACD;IAAE,OAAO,IAAI,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,WAAW,8CAAgB,aAAa,KAAG,SAAS,CAiF/D,CAAC"}
|
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
import { jsxs as t, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { Box as
|
|
3
|
-
import { Link as
|
|
2
|
+
import { Box as h, Typography as f, MenuItem as l, Avatar as g, Popper as b, Link as v } from "@mui/material";
|
|
3
|
+
import { Link as k } from "@tanstack/react-router";
|
|
4
4
|
import { m as C } from "../../../../chunks/index.DJYQ_-zP.js";
|
|
5
|
-
import { memo as M, useState as
|
|
6
|
-
import { FontNormalSxProps as
|
|
5
|
+
import { memo as M, useState as p } from "react";
|
|
6
|
+
import { FontNormalSxProps as m } from "../../../../_constants.js";
|
|
7
7
|
const S = M((r) => {
|
|
8
|
-
const [
|
|
9
|
-
function
|
|
8
|
+
const [s, i] = p(null), [n, a] = p(!1);
|
|
9
|
+
function d(e) {
|
|
10
10
|
a(!0), i(e.currentTarget);
|
|
11
11
|
}
|
|
12
12
|
function u() {
|
|
13
13
|
a(!1), i(null);
|
|
14
14
|
}
|
|
15
|
-
return /* @__PURE__ */ t(
|
|
16
|
-
r.username && /* @__PURE__ */ o(
|
|
15
|
+
return /* @__PURE__ */ t(h, { alignItems: "center", display: "flex", role: "menu", sx: { flexGrow: 0, minWidth: "fit-content" }, children: [
|
|
16
|
+
r.username && /* @__PURE__ */ o(f, { component: "span", sx: C({ marginRight: "16px" }, m), children: r.username }),
|
|
17
17
|
/* @__PURE__ */ t(
|
|
18
|
-
|
|
18
|
+
l,
|
|
19
19
|
{
|
|
20
20
|
"aria-controls": n ? "usermenu" : void 0,
|
|
21
21
|
"aria-expanded": n ? "true" : void 0,
|
|
22
22
|
"aria-haspopup": "true",
|
|
23
|
-
|
|
23
|
+
"aria-label": "User menu",
|
|
24
|
+
onMouseEnter: (e) => d(e),
|
|
24
25
|
onMouseLeave: () => u(),
|
|
25
26
|
sx: {
|
|
26
27
|
padding: 0,
|
|
@@ -33,7 +34,7 @@ const S = M((r) => {
|
|
|
33
34
|
/* @__PURE__ */ o(
|
|
34
35
|
b,
|
|
35
36
|
{
|
|
36
|
-
anchorEl:
|
|
37
|
+
anchorEl: s,
|
|
37
38
|
id: "usermenu",
|
|
38
39
|
open: n,
|
|
39
40
|
placement: "bottom-end",
|
|
@@ -52,15 +53,15 @@ const S = M((r) => {
|
|
|
52
53
|
`
|
|
53
54
|
},
|
|
54
55
|
children: r.settings.map((e, c) => /* @__PURE__ */ o(
|
|
55
|
-
|
|
56
|
+
l,
|
|
56
57
|
{
|
|
57
|
-
component: e.to ?
|
|
58
|
+
component: e.to ? k : v,
|
|
58
59
|
disableRipple: !0,
|
|
59
60
|
divider: e.divider ?? !1,
|
|
60
61
|
onClick: (x) => {
|
|
61
62
|
x.stopPropagation(), e.onClick && e.onClick(), a(!1);
|
|
62
63
|
},
|
|
63
|
-
sx: { ...
|
|
64
|
+
sx: { ...m },
|
|
64
65
|
to: e.to,
|
|
65
66
|
children: e.label
|
|
66
67
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.js","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"sourcesContent":["import { Avatar, Box, Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from
|
|
1
|
+
{"version":3,"file":"UserMenu.js","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"sourcesContent":["import { Avatar, Box, Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from '@mui/material';\nimport { Link } from '@tanstack/react-router';\nimport merge from 'lodash.merge';\nimport { memo, useState, type MouseEvent, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\ntype Action =\n /**\n * The path that the menu item links to on click\n */\n | { onClick?: never; to: string }\n /**\n * The onClick function for situations where you don't want to navigate to another page (e.g. logout)\n */\n | { onClick(): void; to?: never };\n\nexport type AoaSetting = Action & {\n /**\n * Optional divider to be shown below menu item\n */\n divider?: boolean;\n /**\n * The label of the menu item\n */\n label: string;\n};\n\ninterface UserMenuProps {\n /**\n * A list of the user menu items\n */\n readonly settings: AoaSetting[];\n /**\n * Username to be displayed on the left of the settings menu icon\n */\n readonly username?: string;\n}\n\n/**\n * Constructs a user menu using pre-defined Rijks styling\n *\n * @param props - Props to pass to the user menu\n * @example\n * ```jsx\n * <AoaUserMenu\n * settings={[\n * { label: \"Logout\", onClick: () => console.log(\"Logout\") }\n * ]}\n * />\n * ```\n */\n\nexport const AoaUserMenu = memo((props: UserMenuProps): ReactNode => {\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n const [open, setOpen] = useState(false);\n\n function handleMenuOpen(event: MouseEvent<HTMLLIElement, globalThis.MouseEvent>) {\n setOpen(true);\n setAnchorEl(event.currentTarget);\n }\n\n function handleMenuClose() {\n setOpen(false);\n setAnchorEl(null);\n }\n\n return (\n <Box alignItems='center' display='flex' role='menu' sx={{ flexGrow: 0, minWidth: 'fit-content' }}>\n {props.username && (\n <Typography component='span' sx={merge({ marginRight: '16px' }, FontNormalSxProps)}>\n {props.username}\n </Typography>\n )}\n <MUIMenuItem\n aria-controls={open ? 'usermenu' : undefined}\n aria-expanded={open ? 'true' : undefined}\n aria-haspopup='true'\n aria-label='User menu'\n onMouseEnter={(event) => handleMenuOpen(event)}\n onMouseLeave={() => handleMenuClose()}\n sx={{\n padding: 0,\n\n ':hover': {\n backgroundColor: 'transparent'\n }\n }}\n >\n <Avatar />\n <Popper\n anchorEl={anchorEl}\n id='usermenu'\n open={open}\n placement='bottom-end'\n sx={{\n backgroundColor: 'var(--color-bg-light)',\n padding: '4px 0',\n borderRadius: '6px',\n marginTop: '8px',\n minWidth: '120px',\n color: 'var(--color-text)',\n boxShadow: `\n rgb(255 255 255) 0 0 0 0,\n rgb(0 0 0 / 5%) 0 0 0 1px,\n rgb(0 0 0 / 10%) 0 10px 15px -3px,\n rgb(0 0 0 / 5%) 0 4px 6px -2px\n `\n }}\n >\n {props.settings.map((setting, index) => (\n <MUIMenuItem\n component={setting.to ? Link : MUILink}\n disableRipple\n divider={setting.divider ?? false}\n key={index}\n onClick={(event: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => {\n event.stopPropagation();\n if (setting.onClick) {\n setting.onClick();\n }\n\n setOpen(false);\n }}\n sx={{ ...FontNormalSxProps }}\n to={setting.to}\n >\n {setting.label}\n </MUIMenuItem>\n ))}\n </Popper>\n </MUIMenuItem>\n </Box>\n );\n});\n"],"names":["AoaUserMenu","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","jsxs","Box","jsx","Typography","merge","FontNormalSxProps","MUIMenuItem","Avatar","Popper","setting","index","Link","MUILink"],"mappings":";;;;;;AAoDa,MAAAA,IAAcC,EAAK,CAACC,MAAoC;AACnE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA6B,IAAI,GAC3D,CAACC,GAAMC,CAAO,IAAIF,EAAS,EAAK;AAEtC,WAASG,EAAeC,GAAyD;AAC/E,IAAAF,EAAQ,EAAI,GACZH,EAAYK,EAAM,aAAa;AAAA,EAAA;AAGjC,WAASC,IAAkB;AACzB,IAAAH,EAAQ,EAAK,GACbH,EAAY,IAAI;AAAA,EAAA;AAGlB,SACG,gBAAAO,EAAAC,GAAA,EAAI,YAAW,UAAS,SAAQ,QAAO,MAAK,QAAO,IAAI,EAAE,UAAU,GAAG,UAAU,cAC9E,GAAA,UAAA;AAAA,IAAAV,EAAM,YACL,gBAAAW,EAACC,GAAW,EAAA,WAAU,QAAO,IAAIC,EAAM,EAAE,aAAa,OAAO,GAAGC,CAAiB,GAC9E,YAAM,UACT;AAAA,IAEF,gBAAAL;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,iBAAeX,IAAO,aAAa;AAAA,QACnC,iBAAeA,IAAO,SAAS;AAAA,QAC/B,iBAAc;AAAA,QACd,cAAW;AAAA,QACX,cAAc,CAACG,MAAUD,EAAeC,CAAK;AAAA,QAC7C,cAAc,MAAMC,EAAgB;AAAA,QACpC,IAAI;AAAA,UACF,SAAS;AAAA,UAET,UAAU;AAAA,YACR,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAG,EAACK,GAAO,EAAA;AAAA,UACR,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,UAAAhB;AAAA,cACA,IAAG;AAAA,cACH,MAAAG;AAAA,cACA,WAAU;AAAA,cACV,IAAI;AAAA,gBACF,iBAAiB;AAAA,gBACjB,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMb;AAAA,cAEC,UAAMJ,EAAA,SAAS,IAAI,CAACkB,GAASC,MAC5B,gBAAAR;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,WAAWG,EAAQ,KAAKE,IAAOC;AAAAA,kBAC/B,eAAa;AAAA,kBACb,SAASH,EAAQ,WAAW;AAAA,kBAE5B,SAAS,CAACX,MAAgE;AACxE,oBAAAA,EAAM,gBAAgB,GAClBW,EAAQ,WACVA,EAAQ,QAAQ,GAGlBb,EAAQ,EAAK;AAAA,kBACf;AAAA,kBACA,IAAI,EAAE,GAAGS,EAAkB;AAAA,kBAC3B,IAAII,EAAQ;AAAA,kBAEX,UAAQA,EAAA;AAAA,gBAAA;AAAA,gBAZJC;AAAA,cAcR,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,CAAC;"}
|
|
@@ -4,14 +4,14 @@ interface CommonProps {
|
|
|
4
4
|
/**
|
|
5
5
|
* Data-qa tag for E2E test purposes
|
|
6
6
|
*/
|
|
7
|
-
|
|
7
|
+
'data-qa'?: string;
|
|
8
8
|
/**
|
|
9
9
|
* Defines the colour and style of the button
|
|
10
10
|
*/
|
|
11
|
-
type:
|
|
11
|
+
type: 'primary' | 'secondary' | 'text';
|
|
12
12
|
}
|
|
13
|
-
export type AoaButtonProps = Omit<MUIButtonProps<ButtonTypeMap[
|
|
14
|
-
readonly buttonType?: ButtonHTMLAttributes<HTMLButtonElement>[
|
|
13
|
+
export type AoaButtonProps = Omit<MUIButtonProps<ButtonTypeMap['defaultComponent'], CommonProps>, 'variant'> & {
|
|
14
|
+
readonly buttonType?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
17
|
* Constructs a button using pre-defined Rijks styling
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAE5G,OAAO,EAAQ,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,UAAU,WAAW;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;CACxC;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC7G,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACvE,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,+
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAE5G,OAAO,EAAQ,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,UAAU,WAAW;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;CACxC;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC7G,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;CACvE,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,+GACqD,cAAc,KAAG,SAAS,CA+JpG,CAAC"}
|
|
@@ -4,135 +4,137 @@ import { Button as d } from "@mui/material";
|
|
|
4
4
|
import { m as v } from "../../../chunks/index.DJYQ_-zP.js";
|
|
5
5
|
import { memo as u } from "react";
|
|
6
6
|
import { FontNormalSxProps as b } from "../../../_constants.js";
|
|
7
|
-
const f = u(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
color: "var(--color-text-light)",
|
|
25
|
-
cursor: "pointer",
|
|
26
|
-
display: "inline-flex",
|
|
27
|
-
lineHeight: "var(--font-lineheight-text)",
|
|
28
|
-
minHeight: 20,
|
|
29
|
-
padding: "12px 16px",
|
|
30
|
-
position: "relative",
|
|
31
|
-
textDecoration: "none",
|
|
32
|
-
textShadow: "none",
|
|
33
|
-
textTransform: "none",
|
|
34
|
-
verticalAlign: "middle",
|
|
35
|
-
":focus": {
|
|
36
|
-
outline: "2px dashed var(--color-text)",
|
|
37
|
-
outlineOffset: "3px",
|
|
38
|
-
boxShadow: "none"
|
|
39
|
-
},
|
|
40
|
-
// Styles that apply to contained (type === primary)
|
|
41
|
-
"&.MuiButton-contained": {
|
|
42
|
-
"&.MuiButton-colorPrimary": {
|
|
43
|
-
backgroundColor: "var(--color-primary)",
|
|
44
|
-
borderColor: "var(--color-primary)",
|
|
45
|
-
":hover, :active, :focus": {
|
|
46
|
-
backgroundColor: "var(--color-primary-hover)"
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
"&.MuiButton-colorError": {
|
|
50
|
-
backgroundColor: "var(--color-error)",
|
|
51
|
-
borderColor: "var(--color-error)",
|
|
52
|
-
":hover, :active, :focus": {
|
|
53
|
-
backgroundColor: "var(--color-error-hover)"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
"&.Mui-disabled": {
|
|
57
|
-
backgroundColor: "var(--color-disabled)",
|
|
58
|
-
borderColor: "var(--color-disabled)",
|
|
59
|
-
color: "var(--color-text-disabled)"
|
|
60
|
-
},
|
|
61
|
-
":hover, :active, :focus": {
|
|
62
|
-
color: "var(--color-text-light)"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
// Styles that apply to outlined (type === secondary)
|
|
66
|
-
"&.MuiButton-outlined": {
|
|
67
|
-
background: "none",
|
|
68
|
-
border: "1px solid var(--color-primary)",
|
|
7
|
+
const f = u(
|
|
8
|
+
({ type: o, startIcon: a, "data-qa": l, children: i, buttonType: n, ...e }) => {
|
|
9
|
+
let r = "contained";
|
|
10
|
+
return o === "text" && (r = "text"), o === "secondary" && (r = "outlined"), /* @__PURE__ */ t(
|
|
11
|
+
d,
|
|
12
|
+
{
|
|
13
|
+
...e,
|
|
14
|
+
"data-qa": l,
|
|
15
|
+
disableElevation: !0,
|
|
16
|
+
endIcon: o === "text" && /* @__PURE__ */ t(c, {}),
|
|
17
|
+
startIcon: o !== "text" && a,
|
|
18
|
+
sx: v(
|
|
19
|
+
{
|
|
20
|
+
// Styles that apply to all button types and colors
|
|
21
|
+
appearance: "none",
|
|
22
|
+
border: "1px solid",
|
|
23
|
+
borderRadius: 0,
|
|
69
24
|
boxSizing: "border-box",
|
|
70
|
-
"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
25
|
+
color: "var(--color-text-light)",
|
|
26
|
+
cursor: "pointer",
|
|
27
|
+
display: "inline-flex",
|
|
28
|
+
lineHeight: "var(--font-lineheight-text)",
|
|
29
|
+
minHeight: 20,
|
|
30
|
+
padding: "12px 16px",
|
|
31
|
+
position: "relative",
|
|
32
|
+
textDecoration: "none",
|
|
33
|
+
textShadow: "none",
|
|
34
|
+
textTransform: "none",
|
|
35
|
+
verticalAlign: "middle",
|
|
36
|
+
":focus": {
|
|
37
|
+
outline: "2px dashed var(--color-text)",
|
|
38
|
+
outlineOffset: "3px",
|
|
39
|
+
boxShadow: "none"
|
|
77
40
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
41
|
+
// Styles that apply to contained (type === primary)
|
|
42
|
+
"&.MuiButton-contained": {
|
|
43
|
+
"&.MuiButton-colorPrimary": {
|
|
44
|
+
backgroundColor: "var(--color-primary)",
|
|
45
|
+
borderColor: "var(--color-primary)",
|
|
46
|
+
":hover, :active, :focus": {
|
|
47
|
+
backgroundColor: "var(--color-primary-hover)"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"&.MuiButton-colorError": {
|
|
51
|
+
backgroundColor: "var(--color-error)",
|
|
52
|
+
borderColor: "var(--color-error)",
|
|
53
|
+
":hover, :active, :focus": {
|
|
54
|
+
backgroundColor: "var(--color-error-hover)"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
"&.Mui-disabled": {
|
|
58
|
+
backgroundColor: "var(--color-disabled)",
|
|
59
|
+
borderColor: "var(--color-disabled)",
|
|
60
|
+
color: "var(--color-text-disabled)"
|
|
61
|
+
},
|
|
81
62
|
":hover, :active, :focus": {
|
|
82
|
-
|
|
83
|
-
color: "var(--color-error-hover)"
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
":disabled": {
|
|
87
|
-
backgroundColor: "transparent",
|
|
88
|
-
borderColor: "var(--color-text-disabled)",
|
|
89
|
-
color: "var(--color-text-disabled)"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
// Styles that apply to text (type === text)
|
|
93
|
-
"&.MuiButton-text": {
|
|
94
|
-
background: "none",
|
|
95
|
-
borderColor: "transparent",
|
|
96
|
-
display: "inline-block",
|
|
97
|
-
textTransform: "uppercase",
|
|
98
|
-
fontWeight: "bold",
|
|
99
|
-
fontSize: "1.075rem",
|
|
100
|
-
verticalAlign: "middle",
|
|
101
|
-
"&.MuiButton-colorPrimary": {
|
|
102
|
-
color: "var(--color-primary)",
|
|
103
|
-
":hover": {
|
|
104
|
-
backgroundColor: "var(--color-rijks-skyblue-light)"
|
|
63
|
+
color: "var(--color-text-light)"
|
|
105
64
|
}
|
|
106
65
|
},
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
66
|
+
// Styles that apply to outlined (type === secondary)
|
|
67
|
+
"&.MuiButton-outlined": {
|
|
68
|
+
background: "none",
|
|
69
|
+
border: "1px solid var(--color-primary)",
|
|
70
|
+
boxSizing: "border-box",
|
|
71
|
+
"&.MuiButton-colorPrimary": {
|
|
72
|
+
color: "var(--color-primary)",
|
|
73
|
+
borderColor: "var(--color-primary)",
|
|
74
|
+
":hover, :active, :focus": {
|
|
75
|
+
borderColor: "var(--color-primary-hover)",
|
|
76
|
+
color: "var(--color-primary-hover)"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
"&.MuiButton-colorError": {
|
|
80
|
+
color: "var(--color-error)",
|
|
81
|
+
borderColor: "var(--color-error)",
|
|
82
|
+
":hover, :active, :focus": {
|
|
83
|
+
borderColor: "var(--color-error-hover)",
|
|
84
|
+
color: "var(--color-error-hover)"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
":disabled": {
|
|
88
|
+
backgroundColor: "transparent",
|
|
89
|
+
borderColor: "var(--color-text-disabled)",
|
|
90
|
+
color: "var(--color-text-disabled)"
|
|
111
91
|
}
|
|
112
92
|
},
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
93
|
+
// Styles that apply to text (type === text)
|
|
94
|
+
"&.MuiButton-text": {
|
|
95
|
+
background: "none",
|
|
96
|
+
borderColor: "transparent",
|
|
97
|
+
display: "inline-block",
|
|
98
|
+
textTransform: "uppercase",
|
|
99
|
+
fontWeight: "bold",
|
|
100
|
+
fontSize: "1.075rem",
|
|
101
|
+
verticalAlign: "middle",
|
|
102
|
+
"&.MuiButton-colorPrimary": {
|
|
103
|
+
color: "var(--color-primary)",
|
|
104
|
+
":hover": {
|
|
105
|
+
backgroundColor: "var(--color-rijks-skyblue-light)"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
"&.MuiButton-colorError": {
|
|
109
|
+
color: "var(--color-error)",
|
|
110
|
+
":hover": {
|
|
111
|
+
backgroundColor: "var(--color-rijks-red-1-light)"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
121
114
|
".MuiButton-endIcon": {
|
|
122
|
-
|
|
115
|
+
width: "1rem",
|
|
116
|
+
height: "1rem",
|
|
117
|
+
verticalAlign: "text-top"
|
|
118
|
+
},
|
|
119
|
+
":disabled": {
|
|
120
|
+
backgroundColor: "transparent",
|
|
121
|
+
color: "var(--color-text-disabled)",
|
|
122
|
+
".MuiButton-endIcon": {
|
|
123
|
+
fill: "var(--color-text-disabled)"
|
|
124
|
+
}
|
|
123
125
|
}
|
|
124
126
|
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
127
|
+
},
|
|
128
|
+
e.sx,
|
|
129
|
+
b
|
|
130
|
+
),
|
|
131
|
+
type: n,
|
|
132
|
+
variant: r,
|
|
133
|
+
children: i
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
);
|
|
136
138
|
export {
|
|
137
139
|
f as AoaButton
|
|
138
140
|
};
|