@arcblock/ux 2.7.5 → 2.7.7

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.
Files changed (4) hide show
  1. package/es/SessionManager/index.js +31 -26
  2. package/lib/SessionManager/index.js +54 -49
  3. package/package.json +4 -4
  4. package/src/SessionManager/index.jsx +17 -19
package/es/SessionManager/index.js CHANGED
@@ -2,14 +2,7 @@
2
2
  /* eslint-disable react/jsx-no-bind */
3
3
  import { useMemo, useRef, useState } from 'react';
4
4
  import PropTypes from 'prop-types';
5
- import IconButton from '@mui/material/IconButton';
6
- import MenuList from '@mui/material/MenuList';
7
- import MenuItem from '@mui/material/MenuItem';
8
- import SvgIcon from '@mui/material/SvgIcon';
9
- import Button from '@mui/material/Button';
10
- import Chip from '@mui/material/Chip';
11
- import Link from '@mui/material/Link';
12
- import CircularProgress from '@mui/material/CircularProgress';
5
+ import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, CircularProgress } from '@mui/material';
13
6
  import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
14
7
  import BindWalletIcon from '@mui/icons-material/Link';
15
8
  import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
@@ -157,12 +150,19 @@ function SessionManager({
157
150
  size: "medium",
158
151
  role: "button",
159
152
  "aria-label": "Login button",
160
- children: isFirstLoading ? /*#__PURE__*/_jsx(CircularProgress, {
161
- style: {
162
- width: size - 4,
163
- height: size - 4,
164
- color: dark ? '#fff' : ''
165
- }
153
+ children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
154
+ width: size,
155
+ height: size,
156
+ display: "flex",
157
+ justifyContent: "center",
158
+ alignItems: "center",
159
+ children: /*#__PURE__*/_jsx(CircularProgress, {
160
+ style: {
161
+ width: size - 4,
162
+ height: size - 4,
163
+ color: dark ? '#fff' : ''
164
+ }
165
+ })
166
166
  }) : /*#__PURE__*/_jsx(AccountIcon, {
167
167
  style: {
168
168
  width: size,
@@ -316,20 +316,25 @@ function SessionManager({
316
316
  })
317
317
  })]
318
318
  })]
319
- }), federatedAccount && !isEmpty(masterSiteInfo) && /*#__PURE__*/_jsxs(MenuItem, {
319
+ }), federatedAccount && !isEmpty(masterSiteInfo) && /*#__PURE__*/_jsx(MenuItem, {
320
320
  className: "session-manager-menu-item",
321
321
  "data-cy": "sessionManager-connectWithFederated",
322
- children: [/*#__PURE__*/_jsx(SvgIcon, {
323
- component: ConnectWithoutContactIcon,
324
- className: "session-manager-menu-icon"
325
- }), translation.connectedWith, /*#__PURE__*/_jsx(Link, {
326
- ml: 1,
327
- href: masterSiteInfo.appUrl,
328
- underline: "hover",
329
- target: "_blank",
330
- "aria-label": "Open federated master site url",
331
- children: masterSiteInfo.appName
332
- })]
322
+ children: /*#__PURE__*/_jsxs(Box, {
323
+ overflow: "hidden",
324
+ textOverflow: "ellipsis",
325
+ children: [/*#__PURE__*/_jsx(SvgIcon, {
326
+ component: ConnectWithoutContactIcon,
327
+ className: "session-manager-menu-icon"
328
+ }), translation.connectedWith, /*#__PURE__*/_jsx(Link, {
329
+ ml: 1,
330
+ href: masterSiteInfo.appUrl,
331
+ underline: "hover",
332
+ target: "_blank",
333
+ title: masterSiteInfo.appName,
334
+ "aria-label": "Open federated master site url",
335
+ children: masterSiteInfo.appName
336
+ })]
337
+ })
333
338
  }), Array.isArray(menu) && menu.map((menuItem, index) => {
334
339
  const {
335
340
  svgIcon,
package/lib/SessionManager/index.js CHANGED
@@ -6,16 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
10
- var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
11
- var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
12
- var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
13
- var _Button = _interopRequireDefault(require("@mui/material/Button"));
14
- var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
15
- var _Link = _interopRequireDefault(require("@mui/material/Link"));
16
- var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
9
+ var _material = require("@mui/material");
17
10
  var _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonOutline"));
18
- var _Link2 = _interopRequireDefault(require("@mui/icons-material/Link"));
11
+ var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
19
12
  var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKeyOutlined"));
20
13
  var _ConnectWithoutContact = _interopRequireDefault(require("@mui/icons-material/ConnectWithoutContact"));
21
14
  var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
@@ -154,7 +147,7 @@ function SessionManager(_ref) {
154
147
  const masterSiteInfo = (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : (_window$blocklet$sett = _window$blocklet.settings) === null || _window$blocklet$sett === void 0 ? void 0 : (_window$blocklet$sett2 = _window$blocklet$sett.federated) === null || _window$blocklet$sett2 === void 0 ? void 0 : _window$blocklet$sett2.master;
155
148
  if (!session.user) {
156
149
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
157
- children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, _objectSpread(_objectSpread({
150
+ children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
158
151
  ref: userAnchorRef,
159
152
  sx: [{
160
153
  borderRadius: '100vw'
@@ -168,13 +161,13 @@ function SessionManager(_ref) {
168
161
  "aria-label": "Login button"
169
162
  }, rest), {}, {
170
163
  "data-cy": "sessionManager-login",
171
- children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
164
+ children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
172
165
  style: {
173
166
  lineHeight: '25px'
174
167
  },
175
168
  children: translation.connect
176
169
  })]
177
- })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, _objectSpread(_objectSpread({
170
+ })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
178
171
  ref: userAnchorRef
179
172
  }, rest), {}, {
180
173
  onClick: _onLogin,
@@ -182,12 +175,19 @@ function SessionManager(_ref) {
182
175
  size: "medium",
183
176
  role: "button",
184
177
  "aria-label": "Login button",
185
- children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
186
- style: {
187
- width: size - 4,
188
- height: size - 4,
189
- color: dark ? '#fff' : ''
190
- }
178
+ children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
179
+ width: size,
180
+ height: size,
181
+ display: "flex",
182
+ justifyContent: "center",
183
+ alignItems: "center",
184
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
185
+ style: {
186
+ width: size - 4,
187
+ height: size - 4,
188
+ color: dark ? '#fff' : ''
189
+ }
190
+ })
191
191
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
192
192
  style: {
193
193
  width: size,
@@ -273,7 +273,7 @@ function SessionManager(_ref) {
273
273
  }
274
274
  }
275
275
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
276
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, _objectSpread(_objectSpread({
276
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
277
277
  ref: userAnchorRef,
278
278
  onClick: onToggleUser
279
279
  }, rest), {}, {
@@ -296,7 +296,7 @@ function SessionManager(_ref) {
296
296
  onClose: onCloseUser,
297
297
  anchorEl: userAnchorRef.current,
298
298
  dark: dark,
299
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuList.default, {
299
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
300
300
  sx: {
301
301
  p: 0
302
302
  },
@@ -308,7 +308,7 @@ function SessionManager(_ref) {
308
308
  "aria-label": "User info panel",
309
309
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
310
310
  children: session.user.fullName
311
- }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
311
+ }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
312
312
  label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role.toUpperCase()),
313
313
  size: "small",
314
314
  variant: "outlined",
@@ -316,7 +316,7 @@ function SessionManager(_ref) {
316
316
  height: 'auto',
317
317
  marginRight: 0
318
318
  },
319
- icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
319
+ icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
320
320
  component: _ShieldCheck.default,
321
321
  size: "small"
322
322
  })
@@ -344,32 +344,37 @@ function SessionManager(_ref) {
344
344
  })
345
345
  })]
346
346
  })]
347
- }), federatedAccount && !(0, _isEmpty.default)(masterSiteInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
347
+ }), federatedAccount && !(0, _isEmpty.default)(masterSiteInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
348
348
  className: "session-manager-menu-item",
349
349
  "data-cy": "sessionManager-connectWithFederated",
350
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
351
- component: _ConnectWithoutContact.default,
352
- className: "session-manager-menu-icon"
353
- }), translation.connectedWith, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
354
- ml: 1,
355
- href: masterSiteInfo.appUrl,
356
- underline: "hover",
357
- target: "_blank",
358
- "aria-label": "Open federated master site url",
359
- children: masterSiteInfo.appName
360
- })]
350
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
351
+ overflow: "hidden",
352
+ textOverflow: "ellipsis",
353
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
354
+ component: _ConnectWithoutContact.default,
355
+ className: "session-manager-menu-icon"
356
+ }), translation.connectedWith, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
357
+ ml: 1,
358
+ href: masterSiteInfo.appUrl,
359
+ underline: "hover",
360
+ target: "_blank",
361
+ title: masterSiteInfo.appName,
362
+ "aria-label": "Open federated master site url",
363
+ children: masterSiteInfo.appName
364
+ })]
365
+ })
361
366
  }), Array.isArray(menu) && menu.map((menuItem, index) => {
362
367
  const {
363
368
  svgIcon
364
369
  } = menuItem,
365
370
  menuProps = _objectWithoutProperties(menuItem, _excluded2);
366
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, _objectSpread(_objectSpread({
371
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, _objectSpread(_objectSpread({
367
372
  className: "session-manager-menu-item"
368
373
  }, _objectSpread(_objectSpread({}, menuProps), {}, {
369
374
  icon: undefined,
370
375
  label: undefined
371
376
  })), {}, {
372
- children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
377
+ children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
373
378
  component: svgIcon,
374
379
  className: "session-manager-menu-icon"
375
380
  }) : menuItem.icon, menuItem.label]
@@ -379,60 +384,60 @@ function SessionManager(_ref) {
379
384
  menuItem: 'session-manager-menu-item',
380
385
  menuIcon: 'session-manager-menu-icon'
381
386
  }
382
- }), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
387
+ }), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
383
388
  component: "a",
384
389
  className: "session-manager-menu-item",
385
390
  "data-cy": "sessionManager-openInWallet",
386
391
  href: "https://www.abtwallet.io/",
387
392
  "aria-label": translation.openInWallet,
388
393
  target: "_blank",
389
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
394
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
390
395
  component: _OpenIn.default,
391
396
  className: "session-manager-menu-icon"
392
397
  }), translation.openInWallet]
393
- }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
398
+ }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
394
399
  className: "session-manager-menu-item",
395
400
  onClick: _onSwitchDid,
396
401
  "aria-label": translation.switchDid,
397
402
  "data-cy": "sessionManager-switch-trigger",
398
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
403
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
399
404
  component: _Switch.default,
400
405
  className: "session-manager-menu-icon"
401
406
  }), translation.switchDid]
402
- }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
407
+ }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
403
408
  className: "session-manager-menu-item",
404
409
  onClick: _onSwitchProfile,
405
410
  "aria-label": translation.switchProfile,
406
411
  "data-cy": "sessionManager-switch-profile-trigger",
407
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
412
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
408
413
  component: _PersonOutline.default,
409
414
  className: "session-manager-menu-icon"
410
415
  }), translation.switchProfile]
411
- }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
416
+ }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
412
417
  className: "session-manager-menu-item",
413
418
  onClick: _onSwitchPassport,
414
419
  "aria-label": translation.switchPassport,
415
420
  "data-cy": "sessionManager-switch-passport-trigger",
416
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
421
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
417
422
  component: _VpnKeyOutlined.default,
418
423
  className: "session-manager-menu-icon"
419
424
  }), translation.switchPassport]
420
- }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
425
+ }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
421
426
  className: "session-manager-menu-item",
422
427
  onClick: _onBindWallet,
423
428
  "aria-label": !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty),
424
429
  "data-cy": "sessionManager-bind-trigger",
425
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
426
- component: _Link2.default,
430
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
431
+ component: _Link.default,
427
432
  className: "session-manager-menu-icon"
428
433
  }), !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty)]
429
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
434
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
430
435
  className: "session-manager-menu-item",
431
436
  onClick: _onLogout,
432
437
  disabled: disableLogout,
433
438
  "aria-label": "Logout account",
434
439
  "data-cy": "sessionManager-logout-trigger",
435
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
440
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
436
441
  component: _Disconnect.default,
437
442
  className: "session-manager-menu-icon"
438
443
  }), translation.disconnect]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.7.5",
3
+ "version": "2.7.7",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -314,11 +314,11 @@
314
314
  "peerDependencies": {
315
315
  "react": ">=18.1.0"
316
316
  },
317
- "gitHead": "5821ccc5b51c313ef45426587eb2357ffe951834",
317
+ "gitHead": "d19cd8e69d486c96874c72218037d972322ffacc",
318
318
  "dependencies": {
319
319
  "@arcblock/did-motif": "^1.1.13",
320
- "@arcblock/icons": "^2.7.5",
321
- "@arcblock/react-hooks": "^2.7.5",
320
+ "@arcblock/icons": "^2.7.7",
321
+ "@arcblock/react-hooks": "^2.7.7",
322
322
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
323
323
  "@emotion/react": "^11.10.4",
324
324
  "@emotion/styled": "^11.10.4",
package/src/SessionManager/index.jsx CHANGED
@@ -2,14 +2,7 @@
2
2
  /* eslint-disable react/jsx-no-bind */
3
3
  import { useMemo, useRef, useState } from 'react';
4
4
  import PropTypes from 'prop-types';
5
- import IconButton from '@mui/material/IconButton';
6
- import MenuList from '@mui/material/MenuList';
7
- import MenuItem from '@mui/material/MenuItem';
8
- import SvgIcon from '@mui/material/SvgIcon';
9
- import Button from '@mui/material/Button';
10
- import Chip from '@mui/material/Chip';
11
- import Link from '@mui/material/Link';
12
- import CircularProgress from '@mui/material/CircularProgress';
5
+ import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, CircularProgress } from '@mui/material';
13
6
  import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
14
7
  import BindWalletIcon from '@mui/icons-material/Link';
15
8
  import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
@@ -152,7 +145,9 @@ function SessionManager({
152
145
  role="button"
153
146
  aria-label="Login button">
154
147
  {isFirstLoading ? (
155
- <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
148
+ <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
149
+ <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
150
+ </Box>
156
151
  ) : (
157
152
  <AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
158
153
  )}
@@ -281,16 +276,19 @@ function SessionManager({
281
276
  </div>
282
277
  {federatedAccount && !isEmpty(masterSiteInfo) && (
283
278
  <MenuItem className="session-manager-menu-item" data-cy="sessionManager-connectWithFederated">
284
- <SvgIcon component={ConnectWithoutContactIcon} className="session-manager-menu-icon" />
285
- {translation.connectedWith}
286
- <Link
287
- ml={1}
288
- href={masterSiteInfo.appUrl}
289
- underline="hover"
290
- target="_blank"
291
- aria-label="Open federated master site url">
292
- {masterSiteInfo.appName}
293
- </Link>
279
+ <Box overflow="hidden" textOverflow="ellipsis">
280
+ <SvgIcon component={ConnectWithoutContactIcon} className="session-manager-menu-icon" />
281
+ {translation.connectedWith}
282
+ <Link
283
+ ml={1}
284
+ href={masterSiteInfo.appUrl}
285
+ underline="hover"
286
+ target="_blank"
287
+ title={masterSiteInfo.appName}
288
+ aria-label="Open federated master site url">
289
+ {masterSiteInfo.appName}
290
+ </Link>
291
+ </Box>
294
292
  </MenuItem>
295
293
  )}
296
294
  {Array.isArray(menu) &&