@laerdal/life-react-components 2.1.0-dev.3 → 2.1.1-dev.2
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/AuthPage/AuthPage.d.ts +1 -1
- package/dist/Banners/Banner.d.ts +1 -1
- package/dist/Banners/OverviewBanner.d.ts +1 -1
- package/dist/Breadcrumb/Breadcrumb.d.ts +1 -1
- package/dist/Button/Iconbutton.cjs +6 -4
- package/dist/Button/Iconbutton.cjs.map +1 -1
- package/dist/Button/Iconbutton.d.ts +1 -0
- package/dist/Button/Iconbutton.js +6 -4
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +1 -1
- package/dist/Card/HorizontalCard/types.d.ts +4 -4
- package/dist/Chips/ChipTypes.d.ts +2 -2
- package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.d.ts +1 -1
- package/dist/ChipsInput/ChipDropdownInput.js.map +1 -1
- package/dist/ChipsInput/ChipInput.cjs +13 -2
- package/dist/ChipsInput/ChipInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipInput.js +14 -3
- package/dist/ChipsInput/ChipInput.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +1 -0
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +1 -0
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/ChipsInput/ChipInputTypes.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputTypes.d.ts +2 -1
- package/dist/ChipsInput/ChipInputTypes.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.d.ts +3 -3
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs +1 -1
- package/dist/Dropdown/CommonStyling.cjs.map +1 -1
- package/dist/Dropdown/CommonStyling.js +1 -1
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.d.ts +3 -3
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +13 -7
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
- package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts +3 -2
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js +13 -7
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +3 -12
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.d.ts +1 -0
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +3 -12
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.d.ts +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +4 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +4 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +3 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js +3 -0
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js +3 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +7 -7
- package/dist/Image/ImageWithFallbacks.d.ts +1 -1
- package/dist/InputFields/Label.d.ts +1 -1
- package/dist/InputFields/QuickSearch.d.ts +1 -1
- package/dist/InputFields/ResponsiveComponentWrapper.d.ts +1 -1
- package/dist/InputFields/SearchBar.d.ts +1 -1
- package/dist/InputFields/components/SearchBarInput.d.ts +1 -1
- package/dist/InputFields/types.d.ts +3 -3
- package/dist/List/ListRow.d.ts +1 -1
- package/dist/LoadingIndicator/LoadingIndicator.d.ts +1 -1
- package/dist/MiniProductCard/MiniProductCard.d.ts +1 -1
- package/dist/Modals/Modal.d.ts +1 -1
- package/dist/Modals/ModalContainer.d.ts +2 -2
- package/dist/Modals/ModalTypes.d.ts +1 -1
- package/dist/NavItem/NavItem.d.ts +1 -1
- package/dist/Paginator/Paginator.d.ts +1 -1
- package/dist/Popover/Popover.d.ts +4 -4
- package/dist/ProfileButton/ProfileButton.d.ts +1 -1
- package/dist/QuizButton/QuizButton.d.ts +1 -1
- package/dist/SideMenu/types.d.ts +3 -3
- package/dist/SkipToContent/SkipToContent.d.ts +1 -1
- package/dist/Table/TableTypes.d.ts +4 -4
- package/dist/Tabs/TabLink.d.ts +1 -1
- package/dist/Tabs/Tabs.d.ts +1 -1
- package/dist/Tag/Tag.cjs +1 -1
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.d.ts +2 -2
- package/dist/Tag/Tag.js +1 -1
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tile/TileTypes.d.ts +8 -8
- package/dist/Toasters/Toast.d.ts +2 -2
- package/dist/Toasters/ToastContext.d.ts +2 -2
- package/dist/assets/index.d.ts +1 -1
- package/dist/icons/index.d.ts +2 -2
- package/dist/styles/typography.d.ts +2 -2
- package/package.json +10 -13
|
@@ -14,8 +14,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
14
14
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
15
|
var _Button = require("../../Button");
|
|
16
16
|
var _SystemIcons = require("../../icons/systemicons/SystemIcons");
|
|
17
|
-
var _ProfileButton = require("../../ProfileButton");
|
|
18
|
-
var _icons = require("../../icons");
|
|
19
17
|
var _styles = require("../../styles");
|
|
20
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
19
|
var _excluded = ["placement", "type", "action"],
|
|
@@ -28,6 +26,7 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
|
|
|
28
26
|
var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
29
27
|
var buttons = _ref.buttons,
|
|
30
28
|
user = _ref.user,
|
|
29
|
+
profileComponent = _ref.profileComponent,
|
|
31
30
|
onShowUserMenu = _ref.onShowUserMenu;
|
|
32
31
|
var _React$useState = _react.default.useState([]),
|
|
33
32
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
@@ -54,20 +53,11 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
54
53
|
switch (item.type) {
|
|
55
54
|
case 'profile':
|
|
56
55
|
{
|
|
57
|
-
var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
|
|
58
56
|
var placement = item.placement,
|
|
59
57
|
type = item.type,
|
|
60
58
|
action = item.action,
|
|
61
59
|
rest = (0, _objectWithoutProperties2.default)(item, _excluded);
|
|
62
|
-
return
|
|
63
|
-
ref: elRefs[index],
|
|
64
|
-
hideOnLowWidth: true,
|
|
65
|
-
onClick: function onClick(e) {
|
|
66
|
-
item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
|
|
67
|
-
},
|
|
68
|
-
icon: !user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
|
|
69
|
-
initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
|
|
70
|
-
}, rest), index);
|
|
60
|
+
return profileComponent;
|
|
71
61
|
}
|
|
72
62
|
case 'action':
|
|
73
63
|
{
|
|
@@ -119,6 +109,7 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
119
109
|
});
|
|
120
110
|
DesktopActions.propTypes = {
|
|
121
111
|
buttons: _propTypes.default.array,
|
|
112
|
+
profileComponent: _propTypes.default.node,
|
|
122
113
|
onShowUserMenu: _propTypes.default.func.isRequired
|
|
123
114
|
};
|
|
124
115
|
var _default = DesktopActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","LARGE","DesktopActions","React","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","
|
|
1
|
+
{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","LARGE","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","icon","e","target"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n align-items: center;\n\n display: none;\n\n ${BREAKPOINTS.LARGE} {\n display: flex;\n }\n`;\n\n\ninterface DesktopActionsProps {\n buttons?: DesktopMenuButtonTypes[];\n user?: MenuAccountInfo;\n profileComponent?: React.ReactNode\n onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n buttons,\n user,\n profileComponent,\n onShowUserMenu\n }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n const length = buttons?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => ({\n buttons: elRefs.map((r, index) => ({\n ref: r,\n type: buttons?.[index]?.type,\n }))\n }), [elRefs, buttons]);\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return profileComponent;\n\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'switcher': {\n const {placement, type, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n id=\"globalNavAppsButton\"\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n }\n }\n }\n\n return (\n <Wrapper>\n {buttons?.map((item, index) => renderItem(item, index))}\n </Wrapper>\n )\n});\n\n\nexport default DesktopActions;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAGA;AAAyC;AAAA;EAAA;EAAA;AAAA;AAAA;AAAA;AAEzC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,uKAKtBC,mBAAW,CAACC,KAAK,CAGpB;AAcD,IAAOC,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAKwBC,GAAiC,EAAK;EAAA,IAJ5DC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;IACHC,gBAAgB,QAAhBA,gBAAgB;IACjBC,cAAc,QAAdA,cAAc;EAGvD,sBAA4BN,cAAK,CAACO,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAA7EC,MAAM;IAAEC,SAAS;EAExB,IAAMC,MAAM,GAAG,CAAAP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEO,MAAM,KAAI,CAAC;EAEnCV,cAAK,CAACW,SAAS,CAAC,YAAM;IACpBF,SAAS,CAACG,KAAK,CAACF,MAAM,IAAI,CAAC,CAAC,CAACG,IAAI,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC;MAAA,oBAAMd,cAAK,CAACe,SAAS,EAAqB;IAAA,EAAC,CAAC;EAC1F,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZV,cAAK,CAACgB,mBAAmB,CAACd,GAAG,EAAE;IAAA,OAAO;MACpCC,OAAO,EAAEK,MAAM,CAACM,GAAG,CAAC,UAACG,CAAC,EAAEC,KAAK;QAAA;QAAA,OAAM;UACjChB,GAAG,EAAEe,CAAC;UACNE,IAAI,EAAEhB,OAAO,aAAPA,OAAO,yCAAPA,OAAO,CAAGe,KAAK,CAAC,mDAAhB,eAAkBC;QAC1B,CAAC;MAAA,CAAC;IACJ,CAAC;EAAA,CAAC,EAAE,CAACX,MAAM,EAAEL,OAAO,CAAC,CAAC;EAEtB,IAAMiB,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAA2B,EAAEH,KAAa,EAAK;IACjE,QAAQG,IAAI,CAACF,IAAI;MACf,KAAK,SAAS;QAAE;UACd,IAAOG,SAAS,GAA2BD,IAAI,CAAxCC,SAAS;YAAEH,IAAI,GAAqBE,IAAI,CAA7BF,IAAI;YAAEI,MAAM,GAAaF,IAAI,CAAvBE,MAAM;YAAKC,IAAI,0CAAIH,IAAI;UAC/C,OAAOhB,gBAAgB;QAEzB;MACA,KAAK,QAAQ;QAAE;UACb,IAAOiB,UAAS,GAAiCD,IAAI,CAA9CC,SAAS;YAAEH,KAAI,GAA2BE,IAAI,CAAnCF,IAAI;YAAEM,IAAI,GAAqBJ,IAAI,CAA7BI,IAAI;YAAEF,OAAM,GAAaF,IAAI,CAAvBE,MAAM;YAAKC,KAAI,0CAAIH,IAAI;UACrD,oBAAO,qBAAC,kBAAU;YACC,GAAG,EAAEb,MAAM,CAACU,KAAK,CAAE;YACnB,OAAO,EAAE,WAAY;YACrB,KAAK,EAAE,UAAW;YAClB,cAAc,EAAE,IAAK;YACrB,MAAM,EAAE,gBAAAQ,CAAC;cAAA,OAAIL,IAAI,CAACE,MAAM,IAAIF,IAAI,CAACE,MAAM,CAACG,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,MAAM,CAAC;YAAA;UAAC,GAC/CH,KAAI;YAAA,UACxBH,IAAI,CAACI;UAAI,IAPYP,KAAK,CAQhB;QACf;MACA,KAAK,UAAU;QAAE;UACf,IAAOI,WAAS,GAA2BD,IAAI,CAAxCC,SAAS;YAAEH,MAAI,GAAqBE,IAAI,CAA7BF,IAAI;YAAEI,QAAM,GAAaF,IAAI,CAAvBE,MAAM;YAAKC,MAAI,0CAAIH,IAAI;UAC/C,oBAAO,qBAAC,kBAAU;YACC,GAAG,EAAEb,MAAM,CAACU,KAAK,CAAE;YACnB,OAAO,EAAE,WAAY;YACrB,KAAK,EAAE,UAAW;YAClB,cAAc,EAAE,IAAK;YACrB,EAAE,EAAC,qBAAqB;YACxB,MAAM,EAAE,gBAAAQ,CAAC;cAAA,OAAIL,IAAI,CAACE,MAAM,IAAIF,IAAI,CAACE,MAAM,CAACG,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,MAAM,CAAC;YAAA;UAAC,GAC/CH,MAAI;YAAA,uBACzB,qBAAC,sBAAS;cAAC,IAAI,EAAC;YAAM;UAAE,IARFN,KAAK,CAShB;QACf;IAAC;EAEL,CAAC;EAED,oBACE,qBAAC,OAAO;IAAA,UACLf,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEW,GAAG,CAAC,UAACO,IAAI,EAAEH,KAAK;MAAA,OAAKE,UAAU,CAACC,IAAI,EAAEH,KAAK,CAAC;IAAA;EAAC,EAC/C;AAEd,CAAC,CAAC;AAAC;EAxEDf,OAAO;EAEPE,gBAAgB;EAChBC,cAAc;AAAA;AAAA,eAwEDP,cAAc;AAAA"}
|
|
@@ -3,6 +3,7 @@ import { MenuAccountInfo, DesktopMenuButtonTypes } from '../types';
|
|
|
3
3
|
interface DesktopActionsProps {
|
|
4
4
|
buttons?: DesktopMenuButtonTypes[];
|
|
5
5
|
user?: MenuAccountInfo;
|
|
6
|
+
profileComponent?: React.ReactNode;
|
|
6
7
|
onShowUserMenu: () => void;
|
|
7
8
|
}
|
|
8
9
|
export interface DesktopActionsRef {
|
|
@@ -13,14 +13,13 @@ import React from 'react';
|
|
|
13
13
|
import styled from 'styled-components';
|
|
14
14
|
import { IconButton } from '../../Button';
|
|
15
15
|
import { SwitchApp } from '../../icons/systemicons/SystemIcons';
|
|
16
|
-
import { ProfileButton } from '../../ProfileButton';
|
|
17
|
-
import { SystemIcons } from '../../icons';
|
|
18
16
|
import { BREAKPOINTS } from '../../styles';
|
|
19
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
18
|
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n\n display: none;\n\n ", " {\n display: flex;\n }\n"])), BREAKPOINTS.LARGE);
|
|
21
19
|
var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
22
20
|
var buttons = _ref.buttons,
|
|
23
21
|
user = _ref.user,
|
|
22
|
+
profileComponent = _ref.profileComponent,
|
|
24
23
|
onShowUserMenu = _ref.onShowUserMenu;
|
|
25
24
|
var _React$useState = React.useState([]),
|
|
26
25
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -47,20 +46,11 @@ var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
47
46
|
switch (item.type) {
|
|
48
47
|
case 'profile':
|
|
49
48
|
{
|
|
50
|
-
var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
|
|
51
49
|
var placement = item.placement,
|
|
52
50
|
type = item.type,
|
|
53
51
|
action = item.action,
|
|
54
52
|
rest = _objectWithoutProperties(item, _excluded);
|
|
55
|
-
return
|
|
56
|
-
ref: elRefs[index],
|
|
57
|
-
hideOnLowWidth: true,
|
|
58
|
-
onClick: function onClick(e) {
|
|
59
|
-
item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
|
|
60
|
-
},
|
|
61
|
-
icon: !user && /*#__PURE__*/_jsx(SystemIcons.User, {}),
|
|
62
|
-
initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
|
|
63
|
-
}, rest), index);
|
|
53
|
+
return profileComponent;
|
|
64
54
|
}
|
|
65
55
|
case 'action':
|
|
66
56
|
{
|
|
@@ -112,6 +102,7 @@ var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
112
102
|
});
|
|
113
103
|
DesktopActions.propTypes = {
|
|
114
104
|
buttons: _pt.array,
|
|
105
|
+
profileComponent: _pt.node,
|
|
115
106
|
onShowUserMenu: _pt.func.isRequired
|
|
116
107
|
};
|
|
117
108
|
export default DesktopActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","SwitchApp","
|
|
1
|
+
{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","SwitchApp","BREAKPOINTS","Wrapper","div","LARGE","DesktopActions","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","icon","e","target"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n align-items: center;\n\n display: none;\n\n ${BREAKPOINTS.LARGE} {\n display: flex;\n }\n`;\n\n\ninterface DesktopActionsProps {\n buttons?: DesktopMenuButtonTypes[];\n user?: MenuAccountInfo;\n profileComponent?: React.ReactNode\n onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst DesktopActions = React.forwardRef(({\n buttons,\n user,\n profileComponent,\n onShowUserMenu\n }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n const length = buttons?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => ({\n buttons: elRefs.map((r, index) => ({\n ref: r,\n type: buttons?.[index]?.type,\n }))\n }), [elRefs, buttons]);\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return profileComponent;\n\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'switcher': {\n const {placement, type, action, ...rest} = item;\n return <IconButton key={index}\n ref={elRefs[index]}\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={true}\n id=\"globalNavAppsButton\"\n action={e => item.action && item.action(e?.target)}\n {...rest}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n }\n }\n }\n\n return (\n <Wrapper>\n {buttons?.map((item, index) => renderItem(item, index))}\n </Wrapper>\n )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
19
19
|
var _templateObject, _templateObject2;
|
|
20
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
22
|
-
var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display:
|
|
22
|
+
var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: none;\n margin: auto 0 auto auto;\n align-items: center;\n height: 56px;\n\n a {\n text-decoration: none;\n }\n\n ", " {\n display: flex;\n }\n\n ", " {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n"])), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
|
|
23
23
|
var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 40px;\n margin: 0 8px;\n\n ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
|
|
24
24
|
var RightSideNav = function RightSideNav(_ref) {
|
|
25
25
|
var items = _ref.items,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RightSideNav.cjs","names":["NavContainer","styled","div","BREAKPOINTS","
|
|
1
|
+
{"version":3,"file":"RightSideNav.cjs","names":["NavContainer","styled","div","BREAKPOINTS","MEDIUM","LARGE","SecondaryButton","Button","ComponentMStyling","ComponentTextStyle","Bold","RightSideNav","items","action","getNavItem","item","disabled","label","NavLink","to","defaultOnMouseDownHandler","e","reverse","map","no"],"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../../NavItem';\nimport {BREAKPOINTS, ComponentTextStyle} from '../../styles';\nimport {Button} from '../../Button';\nimport {ComponentMStyling} from '../../styles';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuButton, MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div`\n display: none;\n margin: auto 0 auto auto;\n align-items: center;\n height: 56px;\n\n a {\n text-decoration: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n height: 40px;\n margin: 0 8px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n items?: MenuNavigationItemTypeItem[];\n action?: MenuButton;\n};\n\nconst RightSideNav = ({items, action}: Props): React.ReactElement<Props> => {\n const getNavItem = (item: MenuNavigationItemTypeItem) => {\n if (item?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={item?.label}>\n {item?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n to={item?.to || ''}\n key={item?.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e:React.MouseEvent) => item.action && item.action(e)}>\n {item?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {items?.reverse().map(no => getNavItem(no))}\n\n {\n action &&\n <SecondaryButton variant=\"secondary\" onClick={action?.action}>\n {action.label}\n </SecondaryButton>\n }\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAuD;AAAA;AAAA;AAAA;AAGvD,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,0WAU3BC,mBAAW,CAACC,MAAM,EAIlBD,mBAAW,CAACE,KAAK,CAUpB;AAED,IAAMC,eAAe,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC,qIAIlC,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAE,OAAO,CAAC,CACtD;AAOD,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA0D;EAAA,IAArDC,KAAK,QAALA,KAAK;IAAEC,MAAM,QAANA,MAAM;EAClC,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAgC,EAAK;IACvD,IAAIA,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEC,QAAQ,EAAE;MAClB,oBACE,qBAAC,gBAAO;QAAC,EAAE,EAAET,cAAO;QAAC,SAAS,EAAC,UAAU;QAAA,UACtCQ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE;MAAK,GADiCF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,CAEhD;IAEd,CAAC,MAAM;MACL,oBACE,qBAAC,gBAAO;QACN,EAAE,EAAEC,uBAAQ;QACZ,EAAE,EAAE,CAAAH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,EAAE,KAAI,EAAG;QAEnB,WAAW,EAAEC,iCAA0B;QACvC,OAAO,EAAE,iBAACC,CAAkB;UAAA,OAAKN,IAAI,CAACF,MAAM,IAAIE,IAAI,CAACF,MAAM,CAACQ,CAAC,CAAC;QAAA,CAAC;QAAA,UAC9DN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE;MAAK,GAHPF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,CAIR;IAEd;EACF,CAAC;EACD,oBACE,sBAAC,YAAY;IAAA,WACVL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,OAAO,EAAE,CAACC,GAAG,CAAC,UAAAC,EAAE;MAAA,OAAIV,UAAU,CAACU,EAAE,CAAC;IAAA,EAAC,EAGzCX,MAAM,iBACN,qBAAC,eAAe;MAAC,OAAO,EAAC,WAAW;MAAC,OAAO,EAAEA,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEA,MAAO;MAAA,UAC1DA,MAAM,CAACI;IAAK,EACG;EAAA,EAEP;AAEnB,CAAC;AAAC;EArCAL,KAAK;AAAA;AAAA,eAuCQD,YAAY;AAAA"}
|
|
@@ -11,7 +11,7 @@ import { ComponentMStyling } from '../../styles';
|
|
|
11
11
|
import { defaultOnMouseDownHandler } from '../../common';
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display:
|
|
14
|
+
var NavContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n margin: auto 0 auto auto;\n align-items: center;\n height: 56px;\n\n a {\n text-decoration: none;\n }\n\n ", " {\n display: flex;\n }\n\n ", " {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n"])), BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
|
|
15
15
|
var SecondaryButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 40px;\n margin: 0 8px;\n\n ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, 'unset'));
|
|
16
16
|
var RightSideNav = function RightSideNav(_ref) {
|
|
17
17
|
var items = _ref.items,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RightSideNav.js","names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","defaultOnMouseDownHandler","NavContainer","div","
|
|
1
|
+
{"version":3,"file":"RightSideNav.js","names":["React","styled","NavLink","NavItem","BREAKPOINTS","ComponentTextStyle","Button","ComponentMStyling","defaultOnMouseDownHandler","NavContainer","div","MEDIUM","LARGE","SecondaryButton","Bold","RightSideNav","items","action","getNavItem","item","disabled","label","to","e","reverse","map","no"],"sources":["../../../src/GlobalNavigationBar/desktop/RightSideNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\n\nimport {NavItem} from '../../NavItem';\nimport {BREAKPOINTS, ComponentTextStyle} from '../../styles';\nimport {Button} from '../../Button';\nimport {ComponentMStyling} from '../../styles';\nimport {defaultOnMouseDownHandler} from '../../common';\nimport {MenuButton, MenuNavigationItemTypeItem} from '../types';\n\nconst NavContainer = styled.div`\n display: none;\n margin: auto 0 auto auto;\n align-items: center;\n height: 56px;\n\n a {\n text-decoration: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n button,\n div {\n &:hover {\n cursor: pointer;\n }\n }\n`;\n\nconst SecondaryButton = styled(Button)`\n height: 40px;\n margin: 0 8px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, 'unset')}\n`;\n\ntype Props = {\n items?: MenuNavigationItemTypeItem[];\n action?: MenuButton;\n};\n\nconst RightSideNav = ({items, action}: Props): React.ReactElement<Props> => {\n const getNavItem = (item: MenuNavigationItemTypeItem) => {\n if (item?.disabled) {\n return (\n <NavItem as={Button} className=\"disabled\" key={item?.label}>\n {item?.label}\n </NavItem>\n );\n } else {\n return (\n <NavItem\n as={NavLink}\n to={item?.to || ''}\n key={item?.label}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e:React.MouseEvent) => item.action && item.action(e)}>\n {item?.label}\n </NavItem>\n );\n }\n };\n return (\n <NavContainer>\n {items?.reverse().map(no => getNavItem(no))}\n\n {\n action &&\n <SecondaryButton variant=\"secondary\" onClick={action?.action}>\n {action.label}\n </SecondaryButton>\n }\n </NavContainer>\n );\n};\n\nexport default RightSideNav;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,OAAO,QAAO,kBAAkB;AAExC,SAAQC,OAAO,QAAO,eAAe;AACrC,SAAQC,WAAW,EAAEC,kBAAkB,QAAO,cAAc;AAC5D,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,iBAAiB,QAAO,cAAc;AAC9C,SAAQC,yBAAyB,QAAO,cAAc;AAAC;AAAA;AAGvD,IAAMC,YAAY,GAAGR,MAAM,CAACS,GAAG,4VAU3BN,WAAW,CAACO,MAAM,EAIlBP,WAAW,CAACQ,KAAK,CAUpB;AAED,IAAMC,eAAe,GAAGZ,MAAM,CAACK,MAAM,CAAC,uHAIlCC,iBAAiB,CAACF,kBAAkB,CAACS,IAAI,EAAE,OAAO,CAAC,CACtD;AAOD,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA0D;EAAA,IAArDC,KAAK,QAALA,KAAK;IAAEC,MAAM,QAANA,MAAM;EAClC,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAgC,EAAK;IACvD,IAAIA,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEC,QAAQ,EAAE;MAClB,oBACE,KAAC,OAAO;QAAC,EAAE,EAAEd,MAAO;QAAC,SAAS,EAAC,UAAU;QAAA,UACtCa,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE;MAAK,GADiCF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,CAEhD;IAEd,CAAC,MAAM;MACL,oBACE,KAAC,OAAO;QACN,EAAE,EAAEnB,OAAQ;QACZ,EAAE,EAAE,CAAAiB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,EAAE,KAAI,EAAG;QAEnB,WAAW,EAAEd,yBAA0B;QACvC,OAAO,EAAE,iBAACe,CAAkB;UAAA,OAAKJ,IAAI,CAACF,MAAM,IAAIE,IAAI,CAACF,MAAM,CAACM,CAAC,CAAC;QAAA,CAAC;QAAA,UAC9DJ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE;MAAK,GAHPF,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,CAIR;IAEd;EACF,CAAC;EACD,oBACE,MAAC,YAAY;IAAA,WACVL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEQ,OAAO,EAAE,CAACC,GAAG,CAAC,UAAAC,EAAE;MAAA,OAAIR,UAAU,CAACQ,EAAE,CAAC;IAAA,EAAC,EAGzCT,MAAM,iBACN,KAAC,eAAe;MAAC,OAAO,EAAC,WAAW;MAAC,OAAO,EAAEA,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEA,MAAO;MAAA,UAC1DA,MAAM,CAACI;IAAK,EACG;EAAA,EAEP;AAEnB,CAAC;AAAC;EArCAL,KAAK;AAAA;AAuCP,eAAeD,YAAY"}
|
|
@@ -48,15 +48,17 @@ var UserMenu = function UserMenu(_ref) {
|
|
|
48
48
|
navigate = _useNavigationHelper.navigate,
|
|
49
49
|
isActiveRoute = _useNavigationHelper.isActiveRoute;
|
|
50
50
|
React.useEffect(function () {
|
|
51
|
+
var _document;
|
|
51
52
|
if (!onHideUserMenu) return;
|
|
52
53
|
function handleKeyPress(e) {
|
|
53
54
|
if (e.key === 'Escape' || e.key === 'Esc') {
|
|
54
55
|
onHideUserMenu();
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
|
-
document.addEventListener('keydown', handleKeyPress, false);
|
|
58
|
+
(_document = document) === null || _document === void 0 ? void 0 : _document.addEventListener('keydown', handleKeyPress, false);
|
|
58
59
|
return function () {
|
|
59
|
-
|
|
60
|
+
var _document2;
|
|
61
|
+
(_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.removeEventListener('keydown', handleKeyPress, false);
|
|
60
62
|
};
|
|
61
63
|
}, [onHideUserMenu]);
|
|
62
64
|
var renderItem = function renderItem(item, section, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.cjs","names":["UserMenuScrollContainer","styled","div","UserMenuPinnedContainer","UserMenuWrapper","COLORS","white","Z_INDEXES","off_canvas","Breakpoints","MEDIUM","flowDown","BOXSHADOWS","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","UserMenuSectionListStyling","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","ComponentLStyling","neutral_600","UserSectionInfoEmail","ComponentXSStyling","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","useNavigationHelper","navigate","isActiveRoute","React","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Size","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UserMenu.cjs","names":["UserMenuScrollContainer","styled","div","UserMenuPinnedContainer","UserMenuWrapper","COLORS","white","Z_INDEXES","off_canvas","Breakpoints","MEDIUM","flowDown","BOXSHADOWS","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","UserMenuSectionListStyling","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","ComponentLStyling","neutral_600","UserSectionInfoEmail","ComponentXSStyling","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","useNavigationHelper","navigate","isActiveRoute","React","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Size","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document?.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document?.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
@@ -39,15 +39,17 @@ var UserMenu = function UserMenu(_ref) {
|
|
|
39
39
|
navigate = _useNavigationHelper.navigate,
|
|
40
40
|
isActiveRoute = _useNavigationHelper.isActiveRoute;
|
|
41
41
|
React.useEffect(function () {
|
|
42
|
+
var _document;
|
|
42
43
|
if (!onHideUserMenu) return;
|
|
43
44
|
function handleKeyPress(e) {
|
|
44
45
|
if (e.key === 'Escape' || e.key === 'Esc') {
|
|
45
46
|
onHideUserMenu();
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
|
-
document.addEventListener('keydown', handleKeyPress, false);
|
|
49
|
+
(_document = document) === null || _document === void 0 ? void 0 : _document.addEventListener('keydown', handleKeyPress, false);
|
|
49
50
|
return function () {
|
|
50
|
-
|
|
51
|
+
var _document2;
|
|
52
|
+
(_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.removeEventListener('keydown', handleKeyPress, false);
|
|
51
53
|
};
|
|
52
54
|
}, [onHideUserMenu]);
|
|
53
55
|
var renderItem = function renderItem(item, section, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n BOXSHADOWS,\n COLORS,\n ComponentLStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n width: 320px;\n\n position: absolute;\n\n &.show {\n display: block;\n }\n\n top: 0;\n right: 0;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n flex-flow: column;\n\n\n ${Breakpoints.MEDIUM} {\n flex-flow: initial;\n top: initial;\n right: initial;\n height: initial;\n animation: ${flowDown} 0.2s ease-in-out;\n box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n border-radius: 8px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n padding: 24px 0;\n }\n`;\n\n\nconst MenuSection = styled.div`\n padding: 4px 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n align-items: center;\n justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 24px 4px 24px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n pointer-events: none;\n\n button {\n padding: 0 !important;\n }\n\n button > div {\n width: 48px !important;\n height: 48px !important;\n border-radius: 50% !important;\n }\n`;\n\nconst UserSectionInfo = styled.div`\n padding: 2px 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n word-break: break-all;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n padding: 2px 0;\n display: flex;\n align-items: center;\n gap: 4px;\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst UserSection = styled.div`\n display: flex;\n flex-direction: row;\n padding: 0 24px 8px 24px;\n gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n show?: boolean;\n onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n React.useEffect(() => {\n if (!onHideUserMenu) return;\n\n function handleKeyPress(e: any) {\n if (e.key === 'Escape' || e.key === 'Esc') {\n onHideUserMenu();\n }\n }\n\n document?.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document?.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [onHideUserMenu]);\n\n const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n <MenuItem key={index}\n id={`profile_${index}`}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n\n return (\n <UserMenuWrapper onClick={onHideUserMenu}\n className={show ? 'show' : ''}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <UserMenuScrollContainer>\n <UserSection>\n <UserSectionAvatar>\n <ProfileButton onClick={() => {\n }}\n tabIndex={-1}\n initials={user.firstName[0] + user.lastName[0]}/>\n </UserSectionAvatar>\n <UserSectionInfo>\n <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n {\n user.link &&\n <HyperLink variant={'default'}\n href={user.link.href}\n target={user.link.target}\n id={user.link.id}\n onClick={user.link.onClick}>\n <UserSectionInfoLink>\n <span>\n {user.link.label}\n </span>\n {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n </UserSectionInfoLink>\n </HyperLink>\n }\n </UserSectionInfo>\n </UserSection>\n {\n sections.filter(a => !a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n </UserMenuScrollContainer>\n <UserMenuPinnedContainer>\n {\n sections.filter(a => !!a.pinned).map((section, index) =>\n <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n <MenuSectionList key={index}>\n {section.items.map((item, index) => renderItem(item, section, index))}\n </MenuSectionList>\n </MenuSection>\n )\n }\n {\n signOut &&\n <SignOutActionWrapper>\n <Button width={'272px'}\n variant=\"secondary\"\n icon={<SystemIcons.Logout/>}\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut?.action();\n }}>\n {signOut?.label}\n </Button>\n </SignOutActionWrapper>\n }\n </UserMenuPinnedContainer>\n </UserMenuWrapper>\n );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
|
|
@@ -127,6 +127,9 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
127
127
|
}), switcher && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
128
128
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitcherLabel, {
|
|
129
129
|
className: 'globalNav-toggler',
|
|
130
|
+
onClick: function onClick() {
|
|
131
|
+
return switcher.action && switcher.action() && onClose();
|
|
132
|
+
},
|
|
130
133
|
children: "Switch site"
|
|
131
134
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
132
135
|
variant: 'secondary',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n MenuAccountInfo,\n MenuButton,\n MenuNavigationItemTypeGroup,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuIconButton,\n MenuNavigationItemTypeItem,\n MobileNavigationMenuProps,\n ProfileMenu,\n MenuNavigationItemTypeSection,\n MobileMenuButtonTypes,\n MenuSwitcherButton,\n MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\nconst SwitcherLabel = styled.div`\n margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 48px;\n\n padding: 0 4px 0 16px;\n border-top: 1px solid ${COLORS.neutral_200};\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n padding: 4px 8px 4px 16px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nconst CustomContent = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n profile?: ProfileMenu;\n show?: boolean;\n onClose: () => void;\n};\n\ninterface MenuState {\n header: {\n label?: string;\n buttons?: MobileMenuButtonTypes[];\n }\n content?: {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n },\n customContent?: () => React.ReactNode;\n footer?: boolean;\n}\n\nconst MobileMenu = ({\n show,\n profile,\n buttons,\n label,\n header,\n items,\n footer,\n action,\n onClose,\n }: Props) => {\n\n const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n const location = useLocation();\n\n const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n switch (menu?.type) {\n case 'group':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n content: {\n header: menu.header,\n items: menu.items,\n footer: menu.footer,\n action: menu.action\n },\n footer: false\n });\n break;\n case 'custom':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n customContent: menu.custom,\n footer: false\n });\n break;\n default:\n break;\n }\n\n };\n\n React.useEffect(() => {\n onClose();\n }, [location]);\n\n React.useEffect(() => {\n isMediumScreen && onClose()\n }, [isMediumScreen]);\n\n React.useEffect(() => {\n setTimeout(() => {\n reset({\n footer: true,\n header: {\n label: label,\n buttons: buttons,\n },\n content: {\n header: header,\n items: items,\n footer: footer,\n action: action\n }\n })\n }, 300)\n }, [show])\n\n\n const current = peek();\n\n const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n return (\n <Wrapper>\n <MobileMenuHeader buttons={current?.header.buttons}\n onGoBack={length > 1 ? pop : undefined}\n onSubMenuOpen={onSubMenuOpen}\n profile={profile}\n label={current?.header.label}\n onClose={onClose}/>\n {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n {current?.content && <MobileMenuContent header={current?.content.header}\n items={current?.content.items}\n footer={current?.content.footer}\n action={current?.content.action}\n onSubMenuOpen={onSubMenuOpen}/>}\n\n {\n current?.footer &&\n <MobileFooter>\n <LaerdalLogo height={'36px'} width={'66px'}/>\n {switcher &&\n <>\n <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n id=\"globalNavAppsButton\"\n action={() => switcher.action && switcher.action() && onClose()}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n </>\n }\n\n </MobileFooter>\n }\n </Wrapper>\n );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n MenuAccountInfo,\n MenuButton,\n MenuNavigationItemTypeGroup,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuIconButton,\n MenuNavigationItemTypeItem,\n MobileNavigationMenuProps,\n ProfileMenu,\n MenuNavigationItemTypeSection,\n MobileMenuButtonTypes,\n MenuSwitcherButton,\n MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n width: 320px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n ${BREAKPOINTS.SMALL} {\n width: 400px;\n }\n`;\n\nconst SwitcherLabel = styled.div`\n margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 48px;\n\n padding: 0 4px 0 16px;\n border-top: 1px solid ${COLORS.neutral_200};\n\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n padding: 4px 8px 4px 16px;\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nconst CustomContent = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n profile?: ProfileMenu;\n show?: boolean;\n onClose: () => void;\n};\n\ninterface MenuState {\n header: {\n label?: string;\n buttons?: MobileMenuButtonTypes[];\n }\n content?: {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n },\n customContent?: () => React.ReactNode;\n footer?: boolean;\n}\n\nconst MobileMenu = ({\n show,\n profile,\n buttons,\n label,\n header,\n items,\n footer,\n action,\n onClose,\n }: Props) => {\n\n const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n const location = useLocation();\n\n const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n switch (menu?.type) {\n case 'group':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n content: {\n header: menu.header,\n items: menu.items,\n footer: menu.footer,\n action: menu.action\n },\n footer: false\n });\n break;\n case 'custom':\n push({\n header: {\n label: menu.label,\n buttons: menu.buttons,\n },\n customContent: menu.custom,\n footer: false\n });\n break;\n default:\n break;\n }\n\n };\n\n React.useEffect(() => {\n onClose();\n }, [location]);\n\n React.useEffect(() => {\n isMediumScreen && onClose()\n }, [isMediumScreen]);\n\n React.useEffect(() => {\n setTimeout(() => {\n reset({\n footer: true,\n header: {\n label: label,\n buttons: buttons,\n },\n content: {\n header: header,\n items: items,\n footer: footer,\n action: action\n }\n })\n }, 300)\n }, [show])\n\n\n const current = peek();\n\n const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n return (\n <Wrapper>\n <MobileMenuHeader buttons={current?.header.buttons}\n onGoBack={length > 1 ? pop : undefined}\n onSubMenuOpen={onSubMenuOpen}\n profile={profile}\n label={current?.header.label}\n onClose={onClose}/>\n {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n {current?.content && <MobileMenuContent header={current?.content.header}\n items={current?.content.items}\n footer={current?.content.footer}\n action={current?.content.action}\n onSubMenuOpen={onSubMenuOpen}/>}\n\n {\n current?.footer &&\n <MobileFooter>\n <LaerdalLogo height={'36px'} width={'66px'}/>\n {switcher &&\n <>\n <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>Switch site</SwitcherLabel>\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n id=\"globalNavAppsButton\"\n action={() => switcher.action && switcher.action() && onClose()}>\n <SwitchApp size=\"24px\"/>\n </IconButton>\n </>\n }\n\n </MobileFooter>\n }\n </Wrapper>\n );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
|
|
@@ -119,6 +119,9 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
119
119
|
}), switcher && /*#__PURE__*/_jsxs(_Fragment, {
|
|
120
120
|
children: [/*#__PURE__*/_jsx(SwitcherLabel, {
|
|
121
121
|
className: 'globalNav-toggler',
|
|
122
|
+
onClick: function onClick() {
|
|
123
|
+
return switcher.action && switcher.action() && onClose();
|
|
124
|
+
},
|
|
122
125
|
children: "Switch site"
|
|
123
126
|
}), /*#__PURE__*/_jsx(IconButton, {
|
|
124
127
|
variant: 'secondary',
|