@arcblock/ux 2.7.16 → 2.7.17

package/es/SessionManager/account-item.js

@@ -60,7 +60,8 @@ export default function AccountItem({
     },
     className: "session-manager-menu-item",
     children: [/*#__PURE__*/_jsx(Avatar, {
-      did: account.did
+      did: account.did,
+      size: 42
     }), /*#__PURE__*/_jsxs(Box, {
       sx: {
         flex: 1,
@@ -79,14 +80,14 @@ export default function AccountItem({
         sx: {
           lineHeight: 1
         }
-      }), /*#__PURE__*/_jsxs(Typography, {
+      }), account.sourceAppPid && /*#__PURE__*/_jsxs(Typography, {
         variant: "caption",
-        children: [t('from'), ' ', account.provider === 'federated' ? /*#__PURE__*/_jsx(Link, {
+        children: [t('from'), ' ', /*#__PURE__*/_jsx(Link, {
           href: account.appUrl,
           target: "_blank",
           underline: "none",
           children: account.appName
-        }) : account.appName]
+        })]
       })]
     }), /*#__PURE__*/_jsx(Box, {
       className: "account-item-actions",

package/es/SessionManager/add-account-item.js

@@ -2,11 +2,11 @@ import { Icon } from '@iconify/react';
 import PropTypes from 'prop-types';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
-import isEmpty from 'lodash/isEmpty';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useRef } from 'react';
 import { translate } from '../Locale/util';
 import { translations } from './translation';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -27,36 +27,16 @@ export default function AddAccountItem({
       return appList;
     }
     const blocklet = window?.blocklet;
-    if (!blocklet) {
-      return appList;
+    const masterApp = getFederatedApp(blocklet);
+    const currentApp = getCurrentApp(blocklet);
+    if (currentApp) {
+      appList.push(currentApp);
     }
-    const currentApp = {
-      appId: blocklet.appId,
-      appName: blocklet.appName,
-      appDescription: blocklet.appDescription,
-      appLogo: blocklet.appLogo,
-      appPid: blocklet.appPid,
-      appUrl: blocklet.appUrl,
-      version: blocklet.version,
-      provider: 'wallet'
-    };
-    appList.push(currentApp);
-    const isFederatedMember = !isEmpty(blocklet.settings?.federated?.master);
-    if (isFederatedMember) {
-      const federatedMaster = blocklet.settings.federated.master;
-      const masterApp = {
-        appId: federatedMaster.appId,
-        appName: federatedMaster.appName,
-        appDescription: federatedMaster.appDescription,
-        appLogo: federatedMaster.appLogo,
-        appPid: federatedMaster.appPid,
-        appUrl: federatedMaster.appUrl,
-        version: federatedMaster.version,
-        provider: 'federated'
-      };
-      return [masterApp, currentApp];
+    if (masterApp && masterApp?.appId !== currentApp?.appId) {
+      appList.push(masterApp);
     }
-    return appList;
+    // NOTICE: masterApp 应该排在前面
+    return appList.reverse();
   }, [window.blocklet]);
   const _onAdd = useMemoizedFn(() => {
     if (apps.length <= 1) {
@@ -101,9 +81,11 @@ export default function AddAccountItem({
         vertical: 'top',
         horizontal: 'left'
       },
-      children: apps.map(app => /*#__PURE__*/_jsxs(MenuItem, {
+      children: apps.map(app => /*#__PURE__*/_jsx(MenuItem, {
         onClick: () => onAdd(app),
-        children: ["Connect with ", app.appName, " account"]
+        children: t('connectWithAccount', {
+          name: app.appName
+        })
       }, app.appId))
     }) : null]
   });

package/es/SessionManager/federated-login-detecter.js

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
 import { Icon } from '@iconify/react';
+import { useCreation, useReactive } from 'ahooks';
 import UserPopper from './user-popper';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
@@ -46,9 +47,12 @@ export default function FederatedLoginDetecter({
   dark,
   locale: _locale
 }) {
-  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
-  const siteInfo = session.federatedMaster?.site;
-  const userInfo = session.federatedMaster?.user;
+  const state = useReactive({
+    open: true
+  });
+  const federatedMaster = useCreation(() => {
+    return session.federatedMaster;
+  }, [session?.federatedMaster]);
   const localeList = Object.keys(translations);
   const locale = localeList.includes(_locale) ? _locale : localeList[0];
   const onLoginFederated = useCallback(() => {
@@ -56,37 +60,39 @@ export default function FederatedLoginDetecter({
       if (err) {
         Toast.error(err || translations[_locale].loginFederatedFailed);
       } else {
-        setFederatedLoginOpen(false);
+        state.open = false;
       }
     }, {
-      provider: 'federated',
-      mode: userInfo ? 'auto' : 'manual'
+      sourceAppPid: federatedMaster?.site?.appPid,
+      mode: federatedMaster?.user ? 'auto' : 'manual'
     });
-  }, [session, userInfo, _locale]);
+  }, [session, federatedMaster?.site?.appPid, federatedMaster?.user, _locale, state]);
   let appLogoUrl;
-  if (siteInfo) {
-    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+  if (federatedMaster?.site) {
+    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
     appLogoUrl.searchParams.set('imageFilter', 'resize');
     // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
     appLogoUrl.searchParams.set('w', '80');
     appLogoUrl.searchParams.set('h', '80');
   }
-  return siteInfo && /*#__PURE__*/_jsx(UserPopper, {
-    open: federatedLoginOpen,
+  return federatedMaster?.site && /*#__PURE__*/_jsx(UserPopper, {
+    open: state.open,
     anchorEl: anchorEl,
     dark: dark,
     autoClose: false,
-    onClose: () => setFederatedLoginOpen(false),
+    onClose: () => {
+      state.open = false;
+    },
     children: /*#__PURE__*/_jsxs(Box, {
       p: 2,
-      children: [siteInfo && /*#__PURE__*/_jsxs(Box, {
+      children: [federatedMaster.site && /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/_jsx(Box, {
           component: "img",
           mr: 2,
           src: appLogoUrl.href,
-          alt: siteInfo.appName,
+          alt: federatedMaster.site.appName,
           width: "30px",
           height: "30px"
         }), /*#__PURE__*/_jsx(Box, {
@@ -96,7 +102,7 @@ export default function FederatedLoginDetecter({
           children: translations[locale].useToConnect({
             master: /*#__PURE__*/_jsx(Box, {
               component: "a",
-              href: siteInfo.appUrl,
+              href: federatedMaster.site.appUrl,
               target: "_blank",
               sx: {
                 textDecoration: 'none',
@@ -104,22 +110,22 @@ export default function FederatedLoginDetecter({
                 color: 'primary.main',
                 fontSize: '1.2em'
               },
-              children: siteInfo.appName
+              children: federatedMaster.site.appName
             }),
             member: window.blocklet.appName
           })
         })]
-      }), siteInfo && userInfo && /*#__PURE__*/_jsx(Divider, {
+      }), federatedMaster?.site && federatedMaster?.user && /*#__PURE__*/_jsx(Divider, {
         style: {
           margin: '15px 0 10px 0'
         }
-      }), userInfo && /*#__PURE__*/_jsxs(Box, {
+      }), federatedMaster?.user && /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/_jsx(DidAvatar, {
           variant: "circle",
-          did: userInfo.did,
-          src: getUserAvatar(userInfo.avatar),
+          did: federatedMaster.user.did,
+          src: getUserAvatar(federatedMaster.user.avatar),
           size: 28,
           shape: "circle"
         }), /*#__PURE__*/_jsxs(Box, {
@@ -130,9 +136,9 @@ export default function FederatedLoginDetecter({
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(Box, {
               fontSize: 18,
-              children: userInfo.fullName
-            }), userInfo.role?.toUpperCase() && /*#__PURE__*/_jsx(Chip, {
-              label: userInfo.role?.toUpperCase(),
+              children: federatedMaster.user.fullName
+            }), federatedMaster.user.role?.toUpperCase() && /*#__PURE__*/_jsx(Chip, {
+              label: federatedMaster.user.role?.toUpperCase(),
               size: "small",
               variant: "outlined",
               sx: {
@@ -147,10 +153,10 @@ export default function FederatedLoginDetecter({
             })]
           }), /*#__PURE__*/_jsx(DidAddress, {
             responsive: false,
-            children: userInfo.did
+            children: federatedMaster.user.did
           })]
         })]
-      }), siteInfo && /*#__PURE__*/_jsx(Box, {
+      }), federatedMaster?.site && /*#__PURE__*/_jsx(Box, {
         display: "flex",
         justifyContent: "center",
         mt: 2,

package/es/SessionManager/index.js

@@ -2,11 +2,10 @@
 /* eslint-disable react/jsx-no-bind */
 import { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, CircularProgress, Divider } from '@mui/material';
+import { Box, IconButton, MenuList, Button, CircularProgress, Divider } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
-import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import noop from 'lodash/noop';
-import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
 import { useLatest, useMemoizedFn } from 'ahooks';
 import DidAvatar from '../Avatar';
 import { getUserAvatar, sleep } from '../Util';
@@ -18,7 +17,8 @@ import ManageAccounts from './manage-accounts';
 import ManageBlocklet from './manage-blocklet';
 import { translations } from './translation';
 import { getConnectedAccounts, getSourceProvider } from './utils';
-import useAccounts from './use-accounts';
+import useConfig from './use-config';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -41,12 +41,15 @@ function SessionManager({
   menuRender,
   dark,
   size,
+  showManageBlocklet,
   ...rest
 }) {
   const latestSession = useLatest(session);
   const {
-    connectAccount
-  } = useAccounts();
+    connectAccount,
+    config,
+    setConfig
+  } = useConfig();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -64,8 +67,6 @@ function SessionManager({
   const isFirstLoading = useMemo(() => {
     return session?.initialized === false && session?.loading === true;
   }, [session?.initialized, session?.loading]);
-
-  // const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -87,37 +88,18 @@ function SessionManager({
       return;
     }
     const blocklet = window?.blocklet;
-    if (!blocklet) {
-      return;
+    const currentApp = getCurrentApp(blocklet);
+    const masterApp = getFederatedApp(blocklet);
+    const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
+    if (targetApp) {
+      const loginAccount = {
+        did: latestSession.current.user.did,
+        avatar: latestSession.current.user.avatar,
+        provider: latestSession.current.provider,
+        ...targetApp
+      };
+      connectAccount(loginAccount);
     }
-    const currentApp = {
-      appId: blocklet.appId,
-      appPid: blocklet.appPid,
-      appName: blocklet.appName,
-      appDescription: blocklet.appDescription,
-      appLogo: blocklet.appLogo,
-      appUrl: blocklet.appUrl,
-      version: blocklet.version,
-      provider: 'wallet'
-    };
-    const federatedMaster = blocklet.settings?.federated?.master;
-    const masterApp = isEmpty(federatedMaster) ? null : {
-      appId: federatedMaster.appId,
-      appName: federatedMaster.appName,
-      appDescription: federatedMaster.appDescription,
-      appLogo: federatedMaster.appLogo,
-      appPid: federatedMaster.appPid,
-      appUrl: federatedMaster.appUrl,
-      version: federatedMaster.version,
-      provider: 'federated'
-    };
-    const loginAccount = {
-      did: latestSession.current.user.did,
-      avatar: latestSession.current.user.avatar,
-      provider: latestSession.current.provider,
-      ...(latestSession.current.provider === 'federated' ? masterApp : currentApp)
-    };
-    connectAccount(loginAccount);
   });
 
   // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
@@ -236,7 +218,7 @@ function SessionManager({
       user,
       provider
     } = session;
-    if (!isRawWalletAccount && provider !== 'federated') {
+    if (['auth0'].includes(provider)) {
       switchOAuthPassport(user);
     } else {
       close();
@@ -278,7 +260,7 @@ function SessionManager({
           session: session,
           size: size,
           locale: locale,
-          onEditUser: () => {
+          onSwitchProfile: () => {
             close();
             _onSwitchProfile();
           },
@@ -296,22 +278,25 @@ function SessionManager({
           onSwitchDid: onSwitchDid,
           connectAccount: _connectAccount,
           close: close,
-          hasBindAccount: hasBindAccount
-        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(ManageBlocklet, {
+          hasBindAccount: hasBindAccount,
+          onLogout: _onLogout,
+          expanded: config.expandAccount,
+          onExpand: value => {
+            const cloneConfig = cloneDeep(config);
+            cloneConfig.expandAccount = value;
+            setConfig(cloneConfig);
+          }
+        }), showManageBlocklet ? [/*#__PURE__*/_jsx(Divider, {}, "divider"), /*#__PURE__*/_jsx(ManageBlocklet, {
           menu: menu,
           menuRender: menuRender,
-          locale: locale
-        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
-          className: "session-manager-menu-item",
-          onClick: _onLogout,
-          disabled: disableLogout,
-          "aria-label": "Logout account",
-          "data-cy": "sessionManager-logout-trigger",
-          children: [/*#__PURE__*/_jsx(SvgIcon, {
-            component: DisconnectIcon,
-            className: "session-manager-menu-icon"
-          }), t('disconnect')]
-        })]
+          locale: locale,
+          expanded: config.expandBlocklet,
+          onExpand: value => {
+            const cloneConfig = cloneDeep(config);
+            cloneConfig.expandBlocklet = value;
+            setConfig(cloneConfig);
+          }
+        }, "manageBlocklet")] : null]
       })
     })]
   });
@@ -319,7 +304,7 @@ function SessionManager({
 SessionManager.propTypes = {
   session: PropTypes.shape({
     federatedMaster: PropTypes.object,
-    provider: PropTypes.oneOf(['wallet', 'federated', 'auth0', '']),
+    provider: PropTypes.oneOf(['wallet', 'auth0', '']),
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       role: PropTypes.string.isRequired,
@@ -363,7 +348,8 @@ SessionManager.propTypes = {
   menu: PropTypes.array,
   menuRender: PropTypes.func,
   dark: PropTypes.bool,
-  size: PropTypes.number
+  size: PropTypes.number,
+  showManageBlocklet: PropTypes.bool
 };
 SessionManager.defaultProps = {
   locale: 'en',
@@ -382,6 +368,7 @@ SessionManager.defaultProps = {
   onSwitchPassport: noop,
   onBindWallet: noop,
   dark: false,
-  size: 24
+  size: 24,
+  showManageBlocklet: true
 };
 export default SessionManager;

package/es/SessionManager/manage-accounts.js

@@ -1,10 +1,11 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
 import { useMemoizedFn, useUpdate } from 'ahooks';
-import { MenuItem } from '@mui/material';
+import { MenuItem, SvgIcon } from '@mui/material';
 import { Icon } from '@iconify/react';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import LinkIcon from '@iconify-icons/mdi/link';
+import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import AccountItem from './account-item';
 import MenuAccordion from './menu-accordion';
 import { translations } from './translation';
@@ -12,7 +13,7 @@ import { translate } from '../Locale/util';
 import { useConfirm } from '../Dialog/confirm';
 import { getSourceProvider } from './utils';
 import AddAccountItem from './add-account-item';
-import useAccounts from './use-accounts';
+import useConfig from './use-config';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +24,11 @@ export default function ManageAccounts({
   onSwitchDid,
   connectAccount,
   close,
-  hasBindAccount
+  hasBindAccount,
+  disableLogout,
+  onLogout,
+  expanded,
+  onExpand
 }) {
   const {
     bindOAuth,
@@ -37,9 +42,9 @@ export default function ManageAccounts({
     confirmHolder
   } = useConfirm();
   const {
-    accounts,
-    setAccounts
-  } = useAccounts();
+    deleteAccount,
+    config
+  } = useConfig();
   const update = useUpdate();
   const onChoose = useMemoizedFn((account, {
     active
@@ -53,7 +58,7 @@ export default function ManageAccounts({
       onSwitchDid(...args);
     }, {
       provider: account.provider,
-      providerMode: 'paramsFirst'
+      sourceAppPid: account.sourceAppPid
     });
   });
   const oauthConfigList = Object.entries(oauthConfigs).map(([key, value]) => {
@@ -75,11 +80,7 @@ export default function ManageAccounts({
       confirmButtonText: t('confirm'),
       cancelButtonText: t('cancel'),
       onConfirm(done) {
-        const findIndex = accounts.findIndex(item => item.did === account.did);
-        if (findIndex >= 0) {
-          accounts.splice(findIndex, 1);
-        }
-        setAccounts(accounts);
+        deleteAccount(account);
         update();
         done();
       }
@@ -92,8 +93,8 @@ export default function ManageAccounts({
       update();
       onSwitchDid(...args);
     }, {
-      provider: app.provider,
-      providerMode: 'paramsFirst'
+      sourceAppPid: app.sourceAppPid,
+      provider: app.provider
     });
   });
   function _onBindWallet() {
@@ -107,6 +108,8 @@ export default function ManageAccounts({
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(MenuAccordion, {
+      expanded: expanded,
+      onChange: onExpand,
       locale: locale,
       title: /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(AccountIcon, {
@@ -115,9 +118,9 @@ export default function ManageAccounts({
             width: 24,
             height: 24
           }
-        }), t('manageAccounts')]
+        }), t('accounts')]
       }),
-      children: [accounts.map(item => /*#__PURE__*/_jsx(AccountItem, {
+      children: [config.accounts.map(item => /*#__PURE__*/_jsx(AccountItem, {
         account: item,
         locale: locale,
         active: session.user.did === item.did,
@@ -126,7 +129,7 @@ export default function ManageAccounts({
       }, item.did)), /*#__PURE__*/_jsx(AddAccountItem, {
         locale: locale,
         onAdd: onAdd
-      }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
+      }), oauthConfigList.length > 0 && !hasBindAccount && /*#__PURE__*/_jsxs(MenuItem, {
         className: "session-manager-menu-item",
         onClick: _onBindWallet,
         "aria-label": !isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`,
@@ -137,6 +140,16 @@ export default function ManageAccounts({
           height: 24,
           className: "session-manager-menu-icon"
         }), !isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`]
+      }), /*#__PURE__*/_jsxs(MenuItem, {
+        className: "session-manager-menu-item",
+        onClick: onLogout,
+        disabled: disableLogout,
+        "aria-label": "Logout account",
+        "data-cy": "sessionManager-logout-trigger",
+        children: [/*#__PURE__*/_jsx(SvgIcon, {
+          component: DisconnectIcon,
+          className: "session-manager-menu-icon"
+        }), t('disconnect')]
       })]
     }), confirmHolder]
   });

package/es/SessionManager/manage-blocklet.js

@@ -13,20 +13,24 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function ManageBlocklet({
   menu,
   menuRender,
-  locale
+  locale,
+  expanded,
+  onExpand
 }) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
   return /*#__PURE__*/_jsxs(MenuAccordion, {
+    expanded: expanded,
     locale: locale,
+    onChange: onExpand,
     title: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: AppsIcon,
         width: 24,
         height: 24,
         className: "session-manager-menu-icon"
-      }), t('manageBlocklet')]
+      }), t('blocklet')]
     }),
     children: [Array.isArray(menu) && menu.map((menuItem, index) => {
       const {
@@ -54,9 +58,13 @@ export default function ManageBlocklet({
 ManageBlocklet.propTypes = {
   menu: PropTypes.array,
   menuRender: PropTypes.func,
-  locale: PropTypes.string.isRequired
+  locale: PropTypes.string.isRequired,
+  expanded: PropTypes.bool,
+  onExpand: PropTypes.func
 };
 ManageBlocklet.defaultProps = {
   menu: [],
-  menuRender: () => {}
+  menuRender: () => {},
+  expanded: true,
+  onExpand: () => {}
 };

package/es/SessionManager/menu-accordion.js

@@ -24,16 +24,21 @@ function isEmptyNode(node) {
 export default function MenuAccordion({
   title,
   children,
-  locale
+  locale,
+  expanded,
+  onChange
 }) {
   const isEmptyChildren = useCreation(() => isEmptyNode(children), [children]);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
   return /*#__PURE__*/_jsxs(Accordion, {
-    defaultExpanded: true,
+    expanded: expanded,
     disableGutters: true,
     elevation: 0,
+    onChange: (e, value) => {
+      onChange(value);
+    },
     sx: {
       '&.MuiAccordion-root:before': {
         content: 'unset'
@@ -50,7 +55,7 @@ export default function MenuAccordion({
         paddingLeft: '30px',
         '.session-manager-menu-item': {
           fontSize: '15px',
-          padding: '12px 20px',
+          padding: '12px 15px',
           whiteSpace: 'normal'
         },
         '.session-manager-menu-icon': {
@@ -88,8 +93,12 @@ export default function MenuAccordion({
 MenuAccordion.propTypes = {
   title: PropTypes.any.isRequired,
   children: PropTypes.any.isRequired,
-  locale: PropTypes.string
+  locale: PropTypes.string,
+  expanded: PropTypes.bool,
+  onChange: PropTypes.func
 };
 MenuAccordion.defaultProps = {
-  locale: 'en'
+  locale: 'en',
+  expanded: true,
+  onChange: () => {}
 };