",
+ "cssComponent": false
+}
diff --git a/docs/translations/api-docs/account-popover-footer/account-popover-footer.json b/docs/translations/api-docs/account-popover-footer/account-popover-footer.json
new file mode 100644
index 00000000000..f93d4cbd8c7
--- /dev/null
+++ b/docs/translations/api-docs/account-popover-footer/account-popover-footer.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/api-docs/account-popover-header/account-popover-header.json b/docs/translations/api-docs/account-popover-header/account-popover-header.json
new file mode 100644
index 00000000000..f93d4cbd8c7
--- /dev/null
+++ b/docs/translations/api-docs/account-popover-header/account-popover-header.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/api-docs/account-preview/account-preview.json b/docs/translations/api-docs/account-preview/account-preview.json
new file mode 100644
index 00000000000..8724209a3a9
--- /dev/null
+++ b/docs/translations/api-docs/account-preview/account-preview.json
@@ -0,0 +1,16 @@
+{
+ "componentDescription": "The AccountPreview component displays user account information.",
+ "propDescriptions": {
+ "handleClick": { "description": "The handler used when the preview is expanded" },
+ "open": { "description": "The state of the Account popover" },
+ "slotProps": { "description": "The props used for each slot inside." },
+ "slots": { "description": "The components used for each slot inside." },
+ "variant": { "description": "The type of account details to display." }
+ },
+ "classDescriptions": {},
+ "slotDescriptions": {
+ "avatar": "The component used for the Avatar",
+ "avatarIconButton": "The component used for the avatar icon button in the condensed variant",
+ "moreIconButton": "The component used for the overflow icon button in the expanded variant"
+ }
+}
diff --git a/docs/translations/api-docs/account/account.json b/docs/translations/api-docs/account/account.json
index 58620d755a2..de7187c1fcc 100644
--- a/docs/translations/api-docs/account/account.json
+++ b/docs/translations/api-docs/account/account.json
@@ -7,7 +7,9 @@
},
"classDescriptions": {},
"slotDescriptions": {
- "menuItems": "The component used for the custom menu items.",
+ "popover": "The component used for the account popover menu",
+ "popoverContent": "The component used for the content of account popover",
+ "preview": "The component used for the account preview",
"signInButton": "The component used for the sign in button.",
"signOutButton": "The component used for the sign out button."
}
diff --git a/docs/translations/api-docs/sign-in-button/sign-in-button.json b/docs/translations/api-docs/sign-in-button/sign-in-button.json
new file mode 100644
index 00000000000..18077dbb50a
--- /dev/null
+++ b/docs/translations/api-docs/sign-in-button/sign-in-button.json
@@ -0,0 +1,301 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {},
+ "classDescriptions": {
+ "colorError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"error\""
+ },
+ "colorInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"info\""
+ },
+ "colorInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"inherit\""
+ },
+ "colorPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"primary\""
+ },
+ "colorSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"secondary\""
+ },
+ "colorSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"success\""
+ },
+ "colorWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"warning\""
+ },
+ "contained": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\""
+ },
+ "containedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "disabled": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disabled={true}"
+ },
+ "disableElevation": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disableElevation={true}"
+ },
+ "endIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the endIcon element",
+ "conditions": "supplied"
+ },
+ "focusVisible": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the ButtonBase root element",
+ "conditions": "the button is keyboard focused"
+ },
+ "fullWidth": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "fullWidth={true}"
+ },
+ "icon": { "description": "Styles applied to the icon element if supplied" },
+ "iconSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"large\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"small\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlined": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\""
+ },
+ "outlinedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "root": { "description": "Styles applied to the root element." },
+ "sizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\""
+ },
+ "sizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\""
+ },
+ "sizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\""
+ },
+ "startIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the startIcon element",
+ "conditions": "supplied"
+ },
+ "text": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\""
+ },
+ "textError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ }
+ }
+}
diff --git a/docs/translations/api-docs/sign-out-button/sign-out-button.json b/docs/translations/api-docs/sign-out-button/sign-out-button.json
new file mode 100644
index 00000000000..18077dbb50a
--- /dev/null
+++ b/docs/translations/api-docs/sign-out-button/sign-out-button.json
@@ -0,0 +1,301 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {},
+ "classDescriptions": {
+ "colorError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"error\""
+ },
+ "colorInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"info\""
+ },
+ "colorInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"inherit\""
+ },
+ "colorPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"primary\""
+ },
+ "colorSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"secondary\""
+ },
+ "colorSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"success\""
+ },
+ "colorWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"warning\""
+ },
+ "contained": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\""
+ },
+ "containedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "disabled": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disabled={true}"
+ },
+ "disableElevation": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disableElevation={true}"
+ },
+ "endIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the endIcon element",
+ "conditions": "supplied"
+ },
+ "focusVisible": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the ButtonBase root element",
+ "conditions": "the button is keyboard focused"
+ },
+ "fullWidth": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "fullWidth={true}"
+ },
+ "icon": { "description": "Styles applied to the icon element if supplied" },
+ "iconSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"large\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"small\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlined": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\""
+ },
+ "outlinedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "root": { "description": "Styles applied to the root element." },
+ "sizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\""
+ },
+ "sizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\""
+ },
+ "sizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\""
+ },
+ "startIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the startIcon element",
+ "conditions": "supplied"
+ },
+ "text": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\""
+ },
+ "textError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ }
+ }
+}
diff --git a/packages/toolpad-core/src/Account/Account.tsx b/packages/toolpad-core/src/Account/Account.tsx
index 7ea40743f0e..b4aace2f797 100644
--- a/packages/toolpad-core/src/Account/Account.tsx
+++ b/packages/toolpad-core/src/Account/Account.tsx
@@ -1,33 +1,33 @@
import * as React from 'react';
-import { styled } from '@mui/material/styles';
import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
import Popover from '@mui/material/Popover';
import Divider from '@mui/material/Divider';
-import Button, { ButtonProps } from '@mui/material/Button';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Logout from '@mui/icons-material/Logout';
-import { Typography } from '@mui/material';
-import { SessionAvatar } from './SessionAvatar';
+import Stack from '@mui/material/Stack';
+import { SignInButton } from './SignInButton';
+import { SignOutButton } from './SignOutButton';
+import { AccountPreview, AccountPreviewProps } from './AccountPreview';
+import { AccountPopoverHeader } from './AccountPopoverHeader';
+import { AccountPopoverFooter } from './AccountPopoverFooter';
import { SessionContext, AuthenticationContext } from '../AppProvider/AppProvider';
-import DEFAULT_LOCALE_TEXT from '../shared/locales/en';
-
-const AccountInfoContainer = styled('div')(({ theme }) => ({
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'space-between',
- padding: theme.spacing(2),
- gap: theme.spacing(2),
-}));
-
-const SignOutContainer = styled('div')(({ theme }) => ({
- display: 'flex',
- flexDirection: 'row',
- padding: theme.spacing(1),
- justifyContent: 'flex-end',
-}));
+import { LocaleProvider, useLocaleText } from '../shared/locales/LocaleContext';
export interface AccountSlots {
+ /**
+ * The component used for the account preview
+ * @default AccountPreview
+ */
+ preview?: React.ElementType;
+ /**
+ * The component used for the account popover menu
+ * @default Popover
+ */
+ popover?: React.ElementType;
+ /**
+ * The component used for the content of account popover
+ * @default Stack
+ */
+ popoverContent?: React.ElementType;
/**
* The component used for the sign in button.
* @default Button
@@ -35,14 +35,9 @@ export interface AccountSlots {
signInButton?: React.ElementType;
/**
* The component used for the sign out button.
- * @default MenuItem
+ * @default Button
*/
signOutButton?: React.ElementType;
- /**
- * The component used for the custom menu items.
- * @default null
- */
- menuItems?: React.ElementType;
}
export interface AccountProps {
@@ -54,15 +49,16 @@ export interface AccountProps {
* The props used for each slot inside.
*/
slotProps?: {
- signInButton?: ButtonProps;
- signOutButton?: ButtonProps;
- iconButton?: IconButtonProps;
+ preview?: AccountPreviewProps;
+ popover?: React.ComponentProps;
+ popoverContent?: React.ComponentProps;
+ signInButton?: React.ComponentProps;
+ signOutButton?: React.ComponentProps;
};
/**
* The labels for the account component.
- * @default DEFAULT_LOCALE_TEXT
*/
- localeText?: typeof DEFAULT_LOCALE_TEXT;
+ localeText?: Partial>;
}
/**
*
@@ -77,132 +73,101 @@ export interface AccountProps {
* - [Account API](https://mui.com/toolpad/core/api/account)
*/
function Account(props: AccountProps) {
- const { slots, slotProps, localeText = DEFAULT_LOCALE_TEXT } = props;
- const [anchorEl, setAnchorEl] = React.useState(null);
+ const { localeText } = props;
+ const { slots, slotProps } = props;
+ const [anchorEl, setAnchorEl] = React.useState(null);
const session = React.useContext(SessionContext);
const authentication = React.useContext(AuthenticationContext);
const open = Boolean(anchorEl);
- const handleClick = (event: React.MouseEvent) => {
+
+ const handleClick = (event: React.MouseEvent) => {
setAnchorEl(event.currentTarget);
};
+
const handleClose = () => {
setAnchorEl(null);
};
+
if (!authentication) {
return null;
}
if (!session?.user) {
- return slots?.signInButton ? (
-
- ) : (
-
+ return (
+
+ {slots?.signInButton ? (
+
+ ) : (
+
+ )}
+
);
}
+
return (
-
-