@laerdal/life-react-components 1.8.0-dev.16 → 1.8.0-dev.18

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 (171) hide show
  1. package/dist/Dropdown/CommonStyling.cjs +1 -1
  2. package/dist/Dropdown/CommonStyling.cjs.map +1 -1
  3. package/dist/Dropdown/CommonStyling.js +1 -1
  4. package/dist/Dropdown/CommonStyling.js.map +1 -1
  5. package/dist/Dropdown/DropdownFilter.cjs +7 -3
  6. package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
  7. package/dist/Dropdown/DropdownFilter.js +7 -3
  8. package/dist/Dropdown/DropdownFilter.js.map +1 -1
  9. package/dist/GlobalNavigationBar/Actions.cjs +185 -0
  10. package/dist/GlobalNavigationBar/Actions.cjs.map +1 -0
  11. package/dist/GlobalNavigationBar/Actions.d.ts +13 -0
  12. package/dist/GlobalNavigationBar/Actions.js +160 -0
  13. package/dist/GlobalNavigationBar/Actions.js.map +1 -0
  14. package/dist/GlobalNavigationBar/Avatar.cjs +104 -0
  15. package/dist/GlobalNavigationBar/Avatar.cjs.map +1 -0
  16. package/dist/GlobalNavigationBar/Avatar.d.ts +15 -0
  17. package/dist/GlobalNavigationBar/Avatar.js +77 -0
  18. package/dist/GlobalNavigationBar/Avatar.js.map +1 -0
  19. package/dist/GlobalNavigationBar/{desktop/ExtendedMainMenu.cjs → ExtendedMainMenu.cjs} +9 -7
  20. package/dist/GlobalNavigationBar/ExtendedMainMenu.cjs.map +1 -0
  21. package/dist/GlobalNavigationBar/{desktop/ExtendedMainMenu.d.ts → ExtendedMainMenu.d.ts} +2 -2
  22. package/dist/GlobalNavigationBar/{desktop/ExtendedMainMenu.js → ExtendedMainMenu.js} +6 -6
  23. package/dist/GlobalNavigationBar/ExtendedMainMenu.js.map +1 -0
  24. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +176 -107
  25. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
  26. package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts +27 -13
  27. package/dist/GlobalNavigationBar/GlobalNavigationBar.js +176 -106
  28. package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
  29. package/dist/GlobalNavigationBar/Logo.cjs +5 -3
  30. package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
  31. package/dist/GlobalNavigationBar/Logo.js +1 -1
  32. package/dist/GlobalNavigationBar/Logo.js.map +1 -1
  33. package/dist/GlobalNavigationBar/{desktop/MainMenu.cjs → MainMenu.cjs} +21 -17
  34. package/dist/GlobalNavigationBar/MainMenu.cjs.map +1 -0
  35. package/dist/GlobalNavigationBar/MainMenu.d.ts +8 -0
  36. package/dist/GlobalNavigationBar/{desktop/MainMenu.js → MainMenu.js} +21 -17
  37. package/dist/GlobalNavigationBar/MainMenu.js.map +1 -0
  38. package/dist/GlobalNavigationBar/{desktop/RightSideNav.cjs → RightSideNav.cjs} +26 -22
  39. package/dist/GlobalNavigationBar/RightSideNav.cjs.map +1 -0
  40. package/dist/GlobalNavigationBar/RightSideNav.d.ts +8 -0
  41. package/dist/GlobalNavigationBar/RightSideNav.js +61 -0
  42. package/dist/GlobalNavigationBar/RightSideNav.js.map +1 -0
  43. package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs +112 -0
  44. package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs.map +1 -0
  45. package/dist/GlobalNavigationBar/UserMenu/MenuLink.d.ts +11 -0
  46. package/dist/GlobalNavigationBar/UserMenu/MenuLink.js +86 -0
  47. package/dist/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -0
  48. package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs +178 -0
  49. package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs.map +1 -0
  50. package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.d.ts +16 -0
  51. package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.js +146 -0
  52. package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -0
  53. package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs +168 -0
  54. package/dist/GlobalNavigationBar/UserMenu/UserMenu.cjs.map +1 -0
  55. package/dist/GlobalNavigationBar/UserMenu/UserMenu.d.ts +15 -0
  56. package/dist/GlobalNavigationBar/UserMenu/UserMenu.js +135 -0
  57. package/dist/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -0
  58. package/dist/GlobalNavigationBar/index.cjs +18 -15
  59. package/dist/GlobalNavigationBar/index.cjs.map +1 -1
  60. package/dist/GlobalNavigationBar/index.d.ts +2 -2
  61. package/dist/GlobalNavigationBar/index.js +2 -2
  62. package/dist/GlobalNavigationBar/index.js.map +1 -1
  63. package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +21 -15
  64. package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
  65. package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +6 -3
  66. package/dist/GlobalNavigationBar/mobile/CommonStyles.js +15 -14
  67. package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
  68. package/dist/GlobalNavigationBar/mobile/ExitMenuButton.cjs +49 -0
  69. package/dist/GlobalNavigationBar/mobile/ExitMenuButton.cjs.map +1 -0
  70. package/dist/GlobalNavigationBar/mobile/ExitMenuButton.d.ts +6 -0
  71. package/dist/GlobalNavigationBar/mobile/ExitMenuButton.js +27 -0
  72. package/dist/GlobalNavigationBar/mobile/ExitMenuButton.js.map +1 -0
  73. package/dist/GlobalNavigationBar/mobile/MobileActionMenu.cjs +91 -0
  74. package/dist/GlobalNavigationBar/mobile/MobileActionMenu.cjs.map +1 -0
  75. package/dist/GlobalNavigationBar/mobile/MobileActionMenu.d.ts +13 -0
  76. package/dist/GlobalNavigationBar/mobile/MobileActionMenu.js +70 -0
  77. package/dist/GlobalNavigationBar/mobile/MobileActionMenu.js.map +1 -0
  78. package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +221 -114
  79. package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
  80. package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts +25 -6
  81. package/dist/GlobalNavigationBar/mobile/MobileMenu.js +216 -113
  82. package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
  83. package/dist/MenuItem/MenuItem.cjs +10 -16
  84. package/dist/MenuItem/MenuItem.cjs.map +1 -1
  85. package/dist/MenuItem/MenuItem.d.ts +3 -3
  86. package/dist/MenuItem/MenuItem.js +8 -14
  87. package/dist/MenuItem/MenuItem.js.map +1 -1
  88. package/dist/ProfileButton/ProfileButton.cjs +11 -20
  89. package/dist/ProfileButton/ProfileButton.cjs.map +1 -1
  90. package/dist/ProfileButton/ProfileButton.d.ts +1 -3
  91. package/dist/ProfileButton/ProfileButton.js +10 -18
  92. package/dist/ProfileButton/ProfileButton.js.map +1 -1
  93. package/dist/Switcher/MobileSwitcherMenu.cjs +78 -24
  94. package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
  95. package/dist/Switcher/MobileSwitcherMenu.d.ts +5 -6
  96. package/dist/Switcher/MobileSwitcherMenu.js +70 -26
  97. package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
  98. package/dist/Tile/TileBody.cjs +1 -1
  99. package/dist/Tile/TileBody.cjs.map +1 -1
  100. package/dist/Tile/TileBody.js +1 -1
  101. package/dist/Tile/TileBody.js.map +1 -1
  102. package/dist/Tile/TileCommonItems.cjs +1 -1
  103. package/dist/Tile/TileCommonItems.cjs.map +1 -1
  104. package/dist/Tile/TileCommonItems.js +1 -1
  105. package/dist/Tile/TileCommonItems.js.map +1 -1
  106. package/dist/Tile/TileFooter.cjs +1 -1
  107. package/dist/Tile/TileFooter.cjs.map +1 -1
  108. package/dist/Tile/TileFooter.js +1 -1
  109. package/dist/Tile/TileFooter.js.map +1 -1
  110. package/dist/Tile/TileHeader.cjs +1 -1
  111. package/dist/Tile/TileHeader.cjs.map +1 -1
  112. package/dist/Tile/TileHeader.js +2 -2
  113. package/dist/Tile/TileHeader.js.map +1 -1
  114. package/dist/hooks/useClickOutside.cjs +2 -6
  115. package/dist/hooks/useClickOutside.cjs.map +1 -1
  116. package/dist/hooks/useClickOutside.d.ts +1 -1
  117. package/dist/hooks/useClickOutside.js +2 -6
  118. package/dist/hooks/useClickOutside.js.map +1 -1
  119. package/dist/index.cjs +8 -8
  120. package/dist/index.cjs.map +1 -1
  121. package/dist/index.d.ts +1 -1
  122. package/dist/index.js +1 -1
  123. package/dist/index.js.map +1 -1
  124. package/dist/types.cjs.map +1 -1
  125. package/dist/types.d.ts +32 -0
  126. package/dist/types.js.map +1 -1
  127. package/package.json +8 -10
  128. package/dist/GlobalNavigationBar/NavigationHelper.cjs +0 -38
  129. package/dist/GlobalNavigationBar/NavigationHelper.cjs.map +0 -1
  130. package/dist/GlobalNavigationBar/NavigationHelper.d.ts +0 -4
  131. package/dist/GlobalNavigationBar/NavigationHelper.js +0 -27
  132. package/dist/GlobalNavigationBar/NavigationHelper.js.map +0 -1
  133. package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +0 -127
  134. package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +0 -1
  135. package/dist/GlobalNavigationBar/desktop/DesktopActions.d.ts +0 -15
  136. package/dist/GlobalNavigationBar/desktop/DesktopActions.js +0 -98
  137. package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +0 -1
  138. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +0 -1
  139. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +0 -1
  140. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +0 -1
  141. package/dist/GlobalNavigationBar/desktop/MainMenu.d.ts +0 -8
  142. package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +0 -1
  143. package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +0 -1
  144. package/dist/GlobalNavigationBar/desktop/RightSideNav.d.ts +0 -8
  145. package/dist/GlobalNavigationBar/desktop/RightSideNav.js +0 -59
  146. package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +0 -1
  147. package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +0 -204
  148. package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +0 -1
  149. package/dist/GlobalNavigationBar/desktop/UserMenu.d.ts +0 -7
  150. package/dist/GlobalNavigationBar/desktop/UserMenu.js +0 -163
  151. package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +0 -1
  152. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +0 -221
  153. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +0 -1
  154. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.d.ts +0 -11
  155. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +0 -184
  156. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +0 -1
  157. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs +0 -160
  158. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +0 -1
  159. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.d.ts +0 -12
  160. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js +0 -139
  161. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +0 -1
  162. package/dist/GlobalNavigationBar/types.cjs +0 -6
  163. package/dist/GlobalNavigationBar/types.cjs.map +0 -1
  164. package/dist/GlobalNavigationBar/types.d.ts +0 -120
  165. package/dist/GlobalNavigationBar/types.js +0 -2
  166. package/dist/GlobalNavigationBar/types.js.map +0 -1
  167. package/dist/common/StackState.cjs +0 -47
  168. package/dist/common/StackState.cjs.map +0 -1
  169. package/dist/common/StackState.d.ts +0 -7
  170. package/dist/common/StackState.js +0 -30
  171. package/dist/common/StackState.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/GlobalNavigationBar/Actions.tsx"],"names":["MenuWrapper","styled","div","COLORS","white","BREAKPOINTS","SMALL","props","isInMobileMenu","MEDIUM","HeaderItem","ComponentTextStyle","Regular","black","Actions","actions","firstName","lastName","hideOnLowWidth","setShowUserMenu","useUserMenu","userRef","React","useRef","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","search","notification","language","settings","user","primary_500","apps","window","innerWidth"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { Search, GearSettings, Notification, Language, SwitchApp } from '../icons/systemicons/SystemIcons';\nimport Avatar, { AvatarContainer } from './Avatar';\nimport { ActionOptions } from '../types';\nimport {IconButton} from '../Button';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst MenuWrapper = styled.div<{ isInMobileMenu?: boolean }>`\n background-color: ${COLORS.white};\n display: flex;\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: ${(props) => (props.isInMobileMenu ? '48px' : '56px')};\n }\n ${BREAKPOINTS.MEDIUM} {\n height: ${(props) => (props.isInMobileMenu ? '48px' : '64px')};\n }\n`;\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n}\n\nconst HeaderItem = styled.div<HeaderItemProps>`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n padding: 0;\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n button {\n margin: 0;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: -1px;\n left: 20px;\n right: 20px;\n height: 3px;\n background-color: transparent;\n }\n`;\n\ntype Props = {\n firstName?: string;\n lastName?: string;\n actions?: ActionOptions;\n hideOnLowWidth?: boolean;\n isInMobileMenu?: boolean;\n setShowUserMenu: (open: boolean) => void;\n useUserMenu: boolean | undefined;\n};\n\nconst Actions = ({ actions, firstName, lastName, hideOnLowWidth, isInMobileMenu, setShowUserMenu, useUserMenu }: Props): React.ReactElement<Props> => {\n const userRef = React.useRef(null);\n\n const fireAction = (action: (() => void) | undefined, ref: React.MutableRefObject<HTMLButtonElement | null> | undefined = undefined) => {\n ref?.current?.blur();\n !!action && action();\n }\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n return (\n <MenuWrapper isInMobileMenu={isInMobileMenu}>\n <HeaderItem hideOnLowWidth={hideOnLowWidth || false} inMobileMenu={isInMobileMenu}>\n {actions?.search && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.search)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.search) : null)}>\n <Search size=\"24px\" />\n </IconButton>\n )}\n {actions?.notification && !isInMobileMenu && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.notification)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n <Notification size=\"24px\" />\n </IconButton>\n )}\n {actions?.language && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.language)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.language) : null)}>\n <Language size=\"24px\" />\n </IconButton>\n )}\n {actions?.settings && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.settings)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.settings) : null)}>\n <GearSettings size=\"24px\" />\n </IconButton>\n )}\n {firstName && lastName && !isInMobileMenu && (\n <AvatarContainer\n id=\"avatarContainer\"\n data-testid=\"testAvatarContainer\"\n ref={userRef}\n onClick={useUserMenu ? () => setShowUserMenu(true) : () => fireAction(actions?.user, userRef)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? (useUserMenu ? setShowUserMenu(true) : fireAction(actions?.user, userRef)) : null)}\n inMobileMenu={isInMobileMenu}\n hideOnLowWidth={hideOnLowWidth}>\n <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </AvatarContainer>\n )}\n {actions?.apps && !isInMobileMenu && window.innerWidth > 731 && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n id=\"globalNavAppsButton\"\n action={() => fireAction(actions?.apps)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.apps) : null)}>\n <SwitchApp size=\"24px\" />\n </IconButton>\n )}\n </HeaderItem>\n </MenuWrapper>\n );\n};\n\nexport default Actions;\n"],"file":"Actions.cjs"}
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { ActionOptions } from '../types';
3
+ declare type Props = {
4
+ firstName?: string;
5
+ lastName?: string;
6
+ actions?: ActionOptions;
7
+ hideOnLowWidth?: boolean;
8
+ isInMobileMenu?: boolean;
9
+ setShowUserMenu: (open: boolean) => void;
10
+ useUserMenu: boolean | undefined;
11
+ };
12
+ declare const Actions: ({ actions, firstName, lastName, hideOnLowWidth, isInMobileMenu, setShowUserMenu, useUserMenu }: Props) => React.ReactElement<Props>;
13
+ export default Actions;
@@ -0,0 +1,160 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
+ import _pt from "prop-types";
3
+
4
+ var _templateObject, _templateObject2;
5
+
6
+ import * as React from 'react';
7
+ import styled from 'styled-components';
8
+ import { COLORS, BREAKPOINTS } from '../styles';
9
+ import { Search, GearSettings, Notification, Language, SwitchApp } from '../icons/systemicons/SystemIcons';
10
+ import Avatar, { AvatarContainer } from './Avatar';
11
+ import { IconButton } from '../Button';
12
+ import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ var MenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n height: 48px;\n\n ", " {\n height: ", ";\n }\n ", " {\n height: ", ";\n }\n"])), COLORS.white, BREAKPOINTS.SMALL, function (props) {
16
+ return props.isInMobileMenu ? '48px' : '56px';
17
+ }, BREAKPOINTS.MEDIUM, function (props) {
18
+ return props.isInMobileMenu ? '48px' : '64px';
19
+ });
20
+ var HeaderItem = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n padding: 0;\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n button {\n margin: 0;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: -1px;\n left: 20px;\n right: 20px;\n height: 3px;\n background-color: transparent;\n }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
21
+
22
+ var Actions = function Actions(_ref) {
23
+ var actions = _ref.actions,
24
+ firstName = _ref.firstName,
25
+ lastName = _ref.lastName,
26
+ hideOnLowWidth = _ref.hideOnLowWidth,
27
+ isInMobileMenu = _ref.isInMobileMenu,
28
+ setShowUserMenu = _ref.setShowUserMenu,
29
+ useUserMenu = _ref.useUserMenu;
30
+ var userRef = React.useRef(null);
31
+
32
+ var fireAction = function fireAction(action) {
33
+ var _ref$current;
34
+
35
+ var ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
36
+ ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.blur();
37
+ !!action && action();
38
+ };
39
+
40
+ var isPressingEnter = function isPressingEnter(e) {
41
+ if (e.key === 'Enter') {
42
+ e.preventDefault();
43
+ e.stopPropagation();
44
+ return true;
45
+ }
46
+
47
+ return false;
48
+ };
49
+
50
+ return /*#__PURE__*/_jsx(MenuWrapper, {
51
+ isInMobileMenu: isInMobileMenu,
52
+ children: /*#__PURE__*/_jsxs(HeaderItem, {
53
+ hideOnLowWidth: hideOnLowWidth || false,
54
+ inMobileMenu: isInMobileMenu,
55
+ children: [(actions === null || actions === void 0 ? void 0 : actions.search) && /*#__PURE__*/_jsx(IconButton, {
56
+ variant: 'secondary',
57
+ shape: 'circular',
58
+ hideOnLowWidth: hideOnLowWidth || false,
59
+ isInMobileMenu: isInMobileMenu,
60
+ action: function action() {
61
+ return fireAction(actions === null || actions === void 0 ? void 0 : actions.search);
62
+ },
63
+ onKeyPress: function onKeyPress(e) {
64
+ return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.search) : null;
65
+ },
66
+ children: /*#__PURE__*/_jsx(Search, {
67
+ size: "24px"
68
+ })
69
+ }), (actions === null || actions === void 0 ? void 0 : actions.notification) && !isInMobileMenu && /*#__PURE__*/_jsx(IconButton, {
70
+ variant: 'secondary',
71
+ shape: 'circular',
72
+ hideOnLowWidth: hideOnLowWidth || false,
73
+ isInMobileMenu: isInMobileMenu,
74
+ action: function action() {
75
+ return fireAction(actions === null || actions === void 0 ? void 0 : actions.notification);
76
+ },
77
+ onKeyPress: function onKeyPress(e) {
78
+ return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.notification) : null;
79
+ },
80
+ children: /*#__PURE__*/_jsx(Notification, {
81
+ size: "24px"
82
+ })
83
+ }), (actions === null || actions === void 0 ? void 0 : actions.language) && /*#__PURE__*/_jsx(IconButton, {
84
+ variant: 'secondary',
85
+ shape: 'circular',
86
+ hideOnLowWidth: hideOnLowWidth || false,
87
+ isInMobileMenu: isInMobileMenu,
88
+ action: function action() {
89
+ return fireAction(actions === null || actions === void 0 ? void 0 : actions.language);
90
+ },
91
+ onKeyPress: function onKeyPress(e) {
92
+ return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.language) : null;
93
+ },
94
+ children: /*#__PURE__*/_jsx(Language, {
95
+ size: "24px"
96
+ })
97
+ }), (actions === null || actions === void 0 ? void 0 : actions.settings) && /*#__PURE__*/_jsx(IconButton, {
98
+ variant: 'secondary',
99
+ shape: 'circular',
100
+ hideOnLowWidth: hideOnLowWidth || false,
101
+ isInMobileMenu: isInMobileMenu,
102
+ action: function action() {
103
+ return fireAction(actions === null || actions === void 0 ? void 0 : actions.settings);
104
+ },
105
+ onKeyPress: function onKeyPress(e) {
106
+ return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.settings) : null;
107
+ },
108
+ children: /*#__PURE__*/_jsx(GearSettings, {
109
+ size: "24px"
110
+ })
111
+ }), firstName && lastName && !isInMobileMenu && /*#__PURE__*/_jsx(AvatarContainer, {
112
+ id: "avatarContainer",
113
+ "data-testid": "testAvatarContainer",
114
+ ref: userRef,
115
+ onClick: useUserMenu ? function () {
116
+ return setShowUserMenu(true);
117
+ } : function () {
118
+ return fireAction(actions === null || actions === void 0 ? void 0 : actions.user, userRef);
119
+ },
120
+ onKeyDown: function onKeyDown(e) {
121
+ return isPressingEnter(e) ? useUserMenu ? setShowUserMenu(true) : fireAction(actions === null || actions === void 0 ? void 0 : actions.user, userRef) : null;
122
+ },
123
+ inMobileMenu: isInMobileMenu,
124
+ hideOnLowWidth: hideOnLowWidth,
125
+ children: /*#__PURE__*/_jsx(Avatar, {
126
+ size: 36,
127
+ firstName: firstName,
128
+ lastName: lastName,
129
+ color: COLORS.primary_500,
130
+ profileMenuLink: "#TODO"
131
+ })
132
+ }), (actions === null || actions === void 0 ? void 0 : actions.apps) && !isInMobileMenu && window.innerWidth > 731 && /*#__PURE__*/_jsx(IconButton, {
133
+ variant: 'secondary',
134
+ shape: 'circular',
135
+ hideOnLowWidth: hideOnLowWidth || false,
136
+ isInMobileMenu: isInMobileMenu,
137
+ id: "globalNavAppsButton",
138
+ action: function action() {
139
+ return fireAction(actions === null || actions === void 0 ? void 0 : actions.apps);
140
+ },
141
+ onKeyPress: function onKeyPress(e) {
142
+ return isPressingEnter(e) ? fireAction(actions === null || actions === void 0 ? void 0 : actions.apps) : null;
143
+ },
144
+ children: /*#__PURE__*/_jsx(SwitchApp, {
145
+ size: "24px"
146
+ })
147
+ })]
148
+ })
149
+ });
150
+ };
151
+
152
+ Actions.propTypes = {
153
+ firstName: _pt.string,
154
+ lastName: _pt.string,
155
+ hideOnLowWidth: _pt.bool,
156
+ isInMobileMenu: _pt.bool,
157
+ setShowUserMenu: _pt.func.isRequired
158
+ };
159
+ export default Actions;
160
+ //# sourceMappingURL=Actions.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/GlobalNavigationBar/Actions.tsx"],"names":["React","styled","COLORS","BREAKPOINTS","Search","GearSettings","Notification","Language","SwitchApp","Avatar","AvatarContainer","IconButton","ComponentMStyling","ComponentTextStyle","MenuWrapper","div","white","SMALL","props","isInMobileMenu","MEDIUM","HeaderItem","Regular","black","Actions","actions","firstName","lastName","hideOnLowWidth","setShowUserMenu","useUserMenu","userRef","useRef","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","search","notification","language","settings","user","primary_500","apps","window","innerWidth"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS, BREAKPOINTS } from '../styles';\nimport { Search, GearSettings, Notification, Language, SwitchApp } from '../icons/systemicons/SystemIcons';\nimport Avatar, { AvatarContainer } from './Avatar';\nimport { ActionOptions } from '../types';\nimport {IconButton} from '../Button';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst MenuWrapper = styled.div<{ isInMobileMenu?: boolean }>`\n background-color: ${COLORS.white};\n display: flex;\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: ${(props) => (props.isInMobileMenu ? '48px' : '56px')};\n }\n ${BREAKPOINTS.MEDIUM} {\n height: ${(props) => (props.isInMobileMenu ? '48px' : '64px')};\n }\n`;\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n}\n\nconst HeaderItem = styled.div<HeaderItemProps>`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n padding: 0;\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n button {\n margin: 0;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: -1px;\n left: 20px;\n right: 20px;\n height: 3px;\n background-color: transparent;\n }\n`;\n\ntype Props = {\n firstName?: string;\n lastName?: string;\n actions?: ActionOptions;\n hideOnLowWidth?: boolean;\n isInMobileMenu?: boolean;\n setShowUserMenu: (open: boolean) => void;\n useUserMenu: boolean | undefined;\n};\n\nconst Actions = ({ actions, firstName, lastName, hideOnLowWidth, isInMobileMenu, setShowUserMenu, useUserMenu }: Props): React.ReactElement<Props> => {\n const userRef = React.useRef(null);\n\n const fireAction = (action: (() => void) | undefined, ref: React.MutableRefObject<HTMLButtonElement | null> | undefined = undefined) => {\n ref?.current?.blur();\n !!action && action();\n }\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n return (\n <MenuWrapper isInMobileMenu={isInMobileMenu}>\n <HeaderItem hideOnLowWidth={hideOnLowWidth || false} inMobileMenu={isInMobileMenu}>\n {actions?.search && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.search)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.search) : null)}>\n <Search size=\"24px\" />\n </IconButton>\n )}\n {actions?.notification && !isInMobileMenu && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.notification)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n <Notification size=\"24px\" />\n </IconButton>\n )}\n {actions?.language && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.language)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.language) : null)}>\n <Language size=\"24px\" />\n </IconButton>\n )}\n {actions?.settings && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n action={() => fireAction(actions?.settings)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.settings) : null)}>\n <GearSettings size=\"24px\" />\n </IconButton>\n )}\n {firstName && lastName && !isInMobileMenu && (\n <AvatarContainer\n id=\"avatarContainer\"\n data-testid=\"testAvatarContainer\"\n ref={userRef}\n onClick={useUserMenu ? () => setShowUserMenu(true) : () => fireAction(actions?.user, userRef)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? (useUserMenu ? setShowUserMenu(true) : fireAction(actions?.user, userRef)) : null)}\n inMobileMenu={isInMobileMenu}\n hideOnLowWidth={hideOnLowWidth}>\n <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </AvatarContainer>\n )}\n {actions?.apps && !isInMobileMenu && window.innerWidth > 731 && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={hideOnLowWidth || false}\n isInMobileMenu={isInMobileMenu}\n id=\"globalNavAppsButton\"\n action={() => fireAction(actions?.apps)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.apps) : null)}>\n <SwitchApp size=\"24px\" />\n </IconButton>\n )}\n </HeaderItem>\n </MenuWrapper>\n );\n};\n\nexport default Actions;\n"],"file":"Actions.js"}
@@ -0,0 +1,104 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.default = exports.AvatarContainer = void 0;
11
+
12
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var React = _interopRequireWildcard(require("react"));
17
+
18
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
+
20
+ var _styles = require("../styles");
21
+
22
+ var _common = require("../common");
23
+
24
+ var _jsxRuntime = require("react/jsx-runtime");
25
+
26
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
27
+
28
+ 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); }
29
+
30
+ 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; }
31
+
32
+ var LinkStyling = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &:focus {\n ", "\n }\n"])), _styles.focusStyles);
33
+ var ImageStyling = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background: ", ";\n }\n"])), _styles.COLORS.primary_700, _styles.COLORS.primary_800);
34
+
35
+ var AvatarLink = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n text-decoration: none;\n\n ", ";\n"])), function (props) {
36
+ return props.useInteractionStyling ? LinkStyling : '';
37
+ });
38
+
39
+ var AvatarImage = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n cursor: pointer;\n\n ", ";\n"])), function (props) {
40
+ return props.$color;
41
+ }, function (props) {
42
+ return props.size ? props.size : 48;
43
+ }, function (props) {
44
+ return props.size ? props.size : 48;
45
+ }, function (props) {
46
+ return props.size ? props.size : 48;
47
+ }, function (props) {
48
+ return props.useInteractionStyling ? ImageStyling : '';
49
+ });
50
+
51
+ var AvatarLetter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n color: white;\n font-weight: bold;\n text-transform: uppercase;\n display: inline-block;\n line-height: ", "px;\n"])), function (props) {
52
+ return props.size / 2 - 2;
53
+ }, function (props) {
54
+ return props.size ? props.size : 48;
55
+ });
56
+
57
+ var AvatarContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n flex-direction: column;\n align-self: center;\n margin-right: ", ";\n margin-left: ", ";\n display: ", ";\n\n ", " {\n display: flex;\n ", ";\n }\n"])), function (props) {
58
+ return props.inMobileMenu ? '6px' : '8px';
59
+ }, function (props) {
60
+ return props.inMobileMenu ? '0' : 'auto';
61
+ }, function (props) {
62
+ return props.hideOnLowWidth ? 'none' : 'flex';
63
+ }, _styles.BREAKPOINTS.MEDIUM, function (props) {
64
+ return !props.hidePadding ? 'padding: 6px;' : '';
65
+ });
66
+
67
+ exports.AvatarContainer = AvatarContainer;
68
+
69
+ var Avatar = function Avatar(_ref) {
70
+ var firstName = _ref.firstName,
71
+ lastName = _ref.lastName,
72
+ size = _ref.size,
73
+ color = _ref.color,
74
+ _ref$useInteractionSt = _ref.useInteractionStyling,
75
+ useInteractionStyling = _ref$useInteractionSt === void 0 ? true : _ref$useInteractionSt;
76
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarLink, {
77
+ size: size,
78
+ tabIndex: 0,
79
+ useInteractionStyling: useInteractionStyling,
80
+ onMouseDown: _common.defaultOnMouseDownHandler,
81
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarImage, {
82
+ size: size,
83
+ $color: color,
84
+ useInteractionStyling: useInteractionStyling,
85
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarLetter, {
86
+ "data-hj-suppress": true,
87
+ size: size,
88
+ children: [firstName[0], lastName[0]]
89
+ })
90
+ })
91
+ });
92
+ };
93
+
94
+ Avatar.propTypes = {
95
+ firstName: _propTypes.default.string.isRequired,
96
+ lastName: _propTypes.default.string.isRequired,
97
+ size: _propTypes.default.number.isRequired,
98
+ color: _propTypes.default.string.isRequired,
99
+ profileMenuLink: _propTypes.default.string.isRequired,
100
+ useInteractionStyling: _propTypes.default.bool
101
+ };
102
+ var _default = Avatar;
103
+ exports.default = _default;
104
+ //# sourceMappingURL=Avatar.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/GlobalNavigationBar/Avatar.tsx"],"names":["LinkStyling","css","focusStyles","ImageStyling","COLORS","primary_700","primary_800","AvatarLink","styled","div","props","useInteractionStyling","AvatarImage","$color","size","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","BREAKPOINTS","MEDIUM","hidePadding","Avatar","firstName","lastName","color","defaultOnMouseDownHandler","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport {COLORS, BREAKPOINTS, focusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst LinkStyling = css`\n &:focus {\n ${focusStyles}\n }\n`;\n\nconst ImageStyling = css`\n &:hover {\n background-color: ${COLORS.primary_700};\n }\n\n &:active {\n background: ${COLORS.primary_800};\n }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n text-decoration: none;\n\n ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n background-color: ${(props) => props.$color};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${(props) => (props.size ? props.size : 48)}px;\n height: ${(props) => (props.size ? props.size : 48)}px;\n width: ${(props) => (props.size ? props.size : 48)}px;\n cursor: pointer;\n\n ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n font-size: ${(props) => props.size / 2 - 2}px;\n color: white;\n font-weight: bold;\n text-transform: uppercase;\n display: inline-block;\n line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n flex-direction: column;\n align-self: center;\n margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n }\n`;\n\ninterface AvatarProps {\n firstName: string;\n lastName: string;\n size: number;\n color: string;\n profileMenuLink: string;\n useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n return (\n <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={defaultOnMouseDownHandler}>\n <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n <AvatarLetter data-hj-suppress size={size}>\n {firstName[0]}\n {lastName[0]}\n </AvatarLetter>\n </AvatarImage>\n </AvatarLink>\n );\n};\n\nexport default Avatar;\n"],"file":"Avatar.cjs"}
@@ -0,0 +1,15 @@
1
+ export declare const AvatarContainer: import("styled-components").StyledComponent<"div", any, {
2
+ hideOnLowWidth?: boolean | undefined;
3
+ inMobileMenu?: boolean | undefined;
4
+ hidePadding?: boolean | undefined;
5
+ }, never>;
6
+ interface AvatarProps {
7
+ firstName: string;
8
+ lastName: string;
9
+ size: number;
10
+ color: string;
11
+ profileMenuLink: string;
12
+ useInteractionStyling?: boolean;
13
+ }
14
+ declare const Avatar: ({ firstName, lastName, size, color, useInteractionStyling }: AvatarProps) => JSX.Element;
15
+ export default Avatar;
@@ -0,0 +1,77 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
+ import _pt from "prop-types";
3
+
4
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
5
+
6
+ import * as React from 'react';
7
+ import styled, { css } from 'styled-components';
8
+ import { COLORS, BREAKPOINTS, focusStyles } from '../styles';
9
+ import { defaultOnMouseDownHandler } from '../common';
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ var LinkStyling = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &:focus {\n ", "\n }\n"])), focusStyles);
13
+ var ImageStyling = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background: ", ";\n }\n"])), COLORS.primary_700, COLORS.primary_800);
14
+ var AvatarLink = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n text-decoration: none;\n\n ", ";\n"])), function (props) {
15
+ return props.useInteractionStyling ? LinkStyling : '';
16
+ });
17
+ var AvatarImage = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n cursor: pointer;\n\n ", ";\n"])), function (props) {
18
+ return props.$color;
19
+ }, function (props) {
20
+ return props.size ? props.size : 48;
21
+ }, function (props) {
22
+ return props.size ? props.size : 48;
23
+ }, function (props) {
24
+ return props.size ? props.size : 48;
25
+ }, function (props) {
26
+ return props.useInteractionStyling ? ImageStyling : '';
27
+ });
28
+ var AvatarLetter = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: ", "px;\n color: white;\n font-weight: bold;\n text-transform: uppercase;\n display: inline-block;\n line-height: ", "px;\n"])), function (props) {
29
+ return props.size / 2 - 2;
30
+ }, function (props) {
31
+ return props.size ? props.size : 48;
32
+ });
33
+ export var AvatarContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex-direction: column;\n align-self: center;\n margin-right: ", ";\n margin-left: ", ";\n display: ", ";\n\n ", " {\n display: flex;\n ", ";\n }\n"])), function (props) {
34
+ return props.inMobileMenu ? '6px' : '8px';
35
+ }, function (props) {
36
+ return props.inMobileMenu ? '0' : 'auto';
37
+ }, function (props) {
38
+ return props.hideOnLowWidth ? 'none' : 'flex';
39
+ }, BREAKPOINTS.MEDIUM, function (props) {
40
+ return !props.hidePadding ? 'padding: 6px;' : '';
41
+ });
42
+
43
+ var Avatar = function Avatar(_ref) {
44
+ var firstName = _ref.firstName,
45
+ lastName = _ref.lastName,
46
+ size = _ref.size,
47
+ color = _ref.color,
48
+ _ref$useInteractionSt = _ref.useInteractionStyling,
49
+ useInteractionStyling = _ref$useInteractionSt === void 0 ? true : _ref$useInteractionSt;
50
+ return /*#__PURE__*/_jsx(AvatarLink, {
51
+ size: size,
52
+ tabIndex: 0,
53
+ useInteractionStyling: useInteractionStyling,
54
+ onMouseDown: defaultOnMouseDownHandler,
55
+ children: /*#__PURE__*/_jsx(AvatarImage, {
56
+ size: size,
57
+ $color: color,
58
+ useInteractionStyling: useInteractionStyling,
59
+ children: /*#__PURE__*/_jsxs(AvatarLetter, {
60
+ "data-hj-suppress": true,
61
+ size: size,
62
+ children: [firstName[0], lastName[0]]
63
+ })
64
+ })
65
+ });
66
+ };
67
+
68
+ Avatar.propTypes = {
69
+ firstName: _pt.string.isRequired,
70
+ lastName: _pt.string.isRequired,
71
+ size: _pt.number.isRequired,
72
+ color: _pt.string.isRequired,
73
+ profileMenuLink: _pt.string.isRequired,
74
+ useInteractionStyling: _pt.bool
75
+ };
76
+ export default Avatar;
77
+ //# sourceMappingURL=Avatar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/GlobalNavigationBar/Avatar.tsx"],"names":["React","styled","css","COLORS","BREAKPOINTS","focusStyles","defaultOnMouseDownHandler","LinkStyling","ImageStyling","primary_700","primary_800","AvatarLink","div","props","useInteractionStyling","AvatarImage","$color","size","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","MEDIUM","hidePadding","Avatar","firstName","lastName","color","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport {COLORS, BREAKPOINTS, focusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst LinkStyling = css`\n &:focus {\n ${focusStyles}\n }\n`;\n\nconst ImageStyling = css`\n &:hover {\n background-color: ${COLORS.primary_700};\n }\n\n &:active {\n background: ${COLORS.primary_800};\n }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n text-decoration: none;\n\n ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n background-color: ${(props) => props.$color};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${(props) => (props.size ? props.size : 48)}px;\n height: ${(props) => (props.size ? props.size : 48)}px;\n width: ${(props) => (props.size ? props.size : 48)}px;\n cursor: pointer;\n\n ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n font-size: ${(props) => props.size / 2 - 2}px;\n color: white;\n font-weight: bold;\n text-transform: uppercase;\n display: inline-block;\n line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n flex-direction: column;\n align-self: center;\n margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n }\n`;\n\ninterface AvatarProps {\n firstName: string;\n lastName: string;\n size: number;\n color: string;\n profileMenuLink: string;\n useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n return (\n <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={defaultOnMouseDownHandler}>\n <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n <AvatarLetter data-hj-suppress size={size}>\n {firstName[0]}\n {lastName[0]}\n </AvatarLetter>\n </AvatarImage>\n </AvatarLink>\n );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
@@ -19,11 +19,13 @@ var React = _interopRequireWildcard(require("react"));
19
19
 
20
20
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
21
 
22
- var _styles = require("../../styles");
22
+ var _styles = require("../styles");
23
23
 
24
- var _Tabs = require("../../Tabs");
24
+ var _Tabs = require("../Tabs");
25
25
 
26
- var _index = require("../../index");
26
+ var _ = require("..");
27
+
28
+ var _zIndexes = require("../styles/z-indexes");
27
29
 
28
30
  var _jsxRuntime = require("react/jsx-runtime");
29
31
 
@@ -35,9 +37,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
35
37
 
36
38
  var flowDown = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
37
39
 
38
- var Menu = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ", ";\n box-sizing: border-box;\n display: none;\n right: -8px;\n min-width: 300px;\n -webkit-animation: ", " 0.2s ease-in-out;\n animation: ", " 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n z-index: ", ";\n\n top: 12px;\n ", " {\n top: 18px;\n }\n ", " {\n top: 24px;\n }\n\n .open & {\n display: block;\n }\n"])), _styles.COLORS.white, flowDown, flowDown, _styles.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
40
+ var Menu = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ", ";\n box-sizing: border-box;\n display: none;\n right: -8px;\n min-width: 300px;\n -webkit-animation: ", " 0.2s ease-in-out;\n animation: ", " 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n z-index: ", ";\n\n top: 12px;\n ", " {\n top: 18px;\n }\n ", " {\n top: 24px;\n }\n\n .open & {\n display: block;\n }\n"])), _styles.COLORS.white, flowDown, flowDown, _zIndexes.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
39
41
 
40
- var MenuSection = _styledComponents.default.li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ", ";\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n"])), _styles.COLORS.neutral_100);
42
+ var MenuSection = _styledComponents.default.li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ", ";\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n"])), _styles.COLORS.neutral_100);
41
43
 
42
44
  var MenuSectionList = _styledComponents.default.ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0;\n padding: 0 2px;\n"])));
43
45
 
@@ -68,7 +70,7 @@ var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
68
70
  requiredLine: n.label,
69
71
  to: n.to,
70
72
  disabled: n.disabled,
71
- onClick: n.action,
73
+ onClick: n.onClick,
72
74
  exact: n.exact
73
75
  };
74
76
  });
@@ -82,7 +84,7 @@ var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
82
84
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
83
85
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.VerticalTabs, {
84
86
  entries: entries,
85
- size: _index.Size.Medium
87
+ size: _.Size.Medium
86
88
  }, "ExtendedMenu")
87
89
  })
88
90
  })
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["flowDown","keyframes","Menu","styled","ul","COLORS","white","Z_INDEXES","dropdown","BREAKPOINTS","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","React","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAGA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,QAAQ,OAAGC,2BAAH,oNAAd;;AAWA,IAAMC,IAAI,GAAGC,0BAAOC,EAAV,gjBAIYC,eAAOC,KAJnB,EASaN,QATb,EAUKA,QAVL,EAcGO,oBAAUC,QAdb,EAiBNC,oBAAYC,KAjBN,EAoBND,oBAAYE,MApBN,CAAV;;AA6BA,IAAMC,WAAW,GAAGT,0BAAOU,EAAV,oZAOCR,eAAOS,WAPR,CAAjB;;AAqBA,IAAMC,eAAe,GAAGZ,0BAAOC,EAAV,6IAArB;;AAWA,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BC,KAAK,CAACC,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBT,QAAAA,eAAe;AAChB;AACF;;AAEDU,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACP,eAAD,CAXH;AAaAE,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGZ,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEa,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAhB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACZ,iBAAD,CALH;AAOA,sBACE,qBAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB,gBAA5D;AAAA,2BACE,qBAAC,WAAD;AAAA,6BACE,qBAAC,eAAD;AAAA,+BACE,qBAAC,kBAAD;AAAiC,UAAA,OAAO,EAAEI,OAA1C;AAAmD,UAAA,IAAI,EAAEkB,OAAKC;AAA9D,WAAkB,cAAlB;AADF;AADF;AADF,IADF;AASD,CA/BD;;;AAJEvB,EAAAA,e;AACAC,EAAAA,iB;;eAoCaF,gB","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { NavOption } from '../types';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { VerticalTabs } from '../Tabs';\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\nimport { Size } from '..';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: -8px;\n min-width: 300px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n z-index: ${Z_INDEXES.dropdown};\n\n top: 12px;\n ${BREAKPOINTS.SMALL} {\n top: 18px;\n }\n ${BREAKPOINTS.MEDIUM} {\n top: 24px;\n }\n\n .open & {\n display: block;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0 2px;\n`;\n\ntype Props = {\n clickMenuAction: () => void;\n navigationOptions: NavOption[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n React.useEffect(() => {\n const list = navigationOptions?.map(n => {\n return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\n }) as VerticalTabEntry[];\n setEntries(list);\n }, [navigationOptions]);\n\n return (\n <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MenuSection>\n <MenuSectionList>\n <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default ExtendedMainMenu;\n"],"file":"ExtendedMainMenu.cjs"}
@@ -1,7 +1,7 @@
1
- import { MenuNavigationItemTypeItem } from '../../index';
1
+ import { NavOption } from '../types';
2
2
  declare type Props = {
3
3
  clickMenuAction: () => void;
4
- navigationOptions: MenuNavigationItemTypeItem[];
4
+ navigationOptions: NavOption[];
5
5
  };
6
6
  declare const ExtendedMainMenu: ({ clickMenuAction, navigationOptions }: Props) => JSX.Element;
7
7
  export default ExtendedMainMenu;
@@ -6,14 +6,14 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
6
6
 
7
7
  import * as React from 'react';
8
8
  import styled, { keyframes } from 'styled-components';
9
- import { BREAKPOINTS, COLORS } from '../../styles';
10
- import { VerticalTabs } from '../../Tabs';
11
- import { Size } from '../../index';
12
- import { Z_INDEXES } from '../../styles';
9
+ import { BREAKPOINTS, COLORS } from '../styles';
10
+ import { VerticalTabs } from '../Tabs';
11
+ import { Size } from '..';
12
+ import { Z_INDEXES } from '../styles/z-indexes';
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
14
  var flowDown = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
15
15
  var Menu = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ", ";\n box-sizing: border-box;\n display: none;\n right: -8px;\n min-width: 300px;\n -webkit-animation: ", " 0.2s ease-in-out;\n animation: ", " 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n z-index: ", ";\n\n top: 12px;\n ", " {\n top: 18px;\n }\n ", " {\n top: 24px;\n }\n\n .open & {\n display: block;\n }\n"])), COLORS.white, flowDown, flowDown, Z_INDEXES.dropdown, BREAKPOINTS.SMALL, BREAKPOINTS.MEDIUM);
16
- var MenuSection = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ", ";\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n"])), COLORS.neutral_100);
16
+ var MenuSection = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ", ";\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n"])), COLORS.neutral_100);
17
17
  var MenuSectionList = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n list-style: none;\n margin: 0;\n padding: 0 2px;\n"])));
18
18
 
19
19
  var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
@@ -43,7 +43,7 @@ var ExtendedMainMenu = function ExtendedMainMenu(_ref) {
43
43
  requiredLine: n.label,
44
44
  to: n.to,
45
45
  disabled: n.disabled,
46
- onClick: n.action,
46
+ onClick: n.onClick,
47
47
  exact: n.exact
48
48
  };
49
49
  });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/GlobalNavigationBar/ExtendedMainMenu.tsx"],"names":["React","styled","keyframes","BREAKPOINTS","COLORS","VerticalTabs","Size","Z_INDEXES","flowDown","Menu","ul","white","dropdown","SMALL","MEDIUM","MenuSection","li","neutral_100","MenuSectionList","ExtendedMainMenu","clickMenuAction","navigationOptions","useState","entries","setEntries","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","list","map","n","requiredLine","label","to","disabled","onClick","exact","Medium"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,SAAjB,QAAkC,mBAAlC;AAGA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,SAA7B;AAEA,SAASC,IAAT,QAAqB,IAArB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAEA,IAAMC,QAAQ,GAAGN,SAAH,qMAAd;AAWA,IAAMO,IAAI,GAAGR,MAAM,CAACS,EAAV,kiBAIYN,MAAM,CAACO,KAJnB,EASaH,QATb,EAUKA,QAVL,EAcGD,SAAS,CAACK,QAdb,EAiBNT,WAAW,CAACU,KAjBN,EAoBNV,WAAW,CAACW,MApBN,CAAV;AA6BA,IAAMC,WAAW,GAAGd,MAAM,CAACe,EAAV,sYAOCZ,MAAM,CAACa,WAPR,CAAjB;AAqBA,IAAMC,eAAe,GAAGjB,MAAM,CAACS,EAAV,+HAArB;;AAWA,IAAMS,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAmD;AAAA,MAAhDC,eAAgD,QAAhDA,eAAgD;AAAA,MAA/BC,iBAA+B,QAA/BA,iBAA+B;;AAC1E,wBAA8BrB,KAAK,CAACsB,QAAN,CAAmC,EAAnC,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACAxB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBR,QAAAA,eAAe;AAChB;AACF;;AAEDS,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,eAAD,CAXH;AAaApB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,YAAM;AACpB,QAAMO,IAAI,GAAGX,iBAAH,aAAGA,iBAAH,uBAAGA,iBAAiB,CAAEY,GAAnB,CAAuB,UAAAC,CAAC,EAAI;AACvC,aAAO;AAAEC,QAAAA,YAAY,EAAED,CAAC,CAACE,KAAlB;AAAyBC,QAAAA,EAAE,EAAEH,CAAC,CAACG,EAA/B;AAAmCC,QAAAA,QAAQ,EAAEJ,CAAC,CAACI,QAA/C;AAAyDC,QAAAA,OAAO,EAAEL,CAAC,CAACK,OAApE;AAA6EC,QAAAA,KAAK,EAAEN,CAAC,CAACM;AAAtF,OAAP;AACD,KAFY,CAAb;AAGAhB,IAAAA,UAAU,CAACQ,IAAD,CAAV;AACD,GALD,EAKG,CAACX,iBAAD,CALH;AAOA,sBACE,KAAC,IAAD;AAAM,IAAA,OAAO,EAAED,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB,gBAA5D;AAAA,2BACE,KAAC,WAAD;AAAA,6BACE,KAAC,eAAD;AAAA,+BACE,KAAC,YAAD;AAAiC,UAAA,OAAO,EAAEG,OAA1C;AAAmD,UAAA,IAAI,EAAEjB,IAAI,CAACmC;AAA9D,WAAkB,cAAlB;AADF;AADF;AADF,IADF;AASD,CA/BD;;;AAJErB,EAAAA,e;AACAC,EAAAA,iB;;AAoCF,eAAeF,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { NavOption } from '../types';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { VerticalTabs } from '../Tabs';\nimport { VerticalTabEntry } from '../Tabs/VerticalTabs';\nimport { Size } from '..';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: -8px;\n min-width: 300px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n z-index: ${Z_INDEXES.dropdown};\n\n top: 12px;\n ${BREAKPOINTS.SMALL} {\n top: 18px;\n }\n ${BREAKPOINTS.MEDIUM} {\n top: 24px;\n }\n\n .open & {\n display: block;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0 2px;\n`;\n\ntype Props = {\n clickMenuAction: () => void;\n navigationOptions: NavOption[];\n};\n\nconst ExtendedMainMenu = ({ clickMenuAction, navigationOptions }: Props) => {\n const [entries, setEntries] = React.useState<VerticalTabEntry[]>([]);\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n React.useEffect(() => {\n const list = navigationOptions?.map(n => {\n return { requiredLine: n.label, to: n.to, disabled: n.disabled, onClick: n.onClick, exact: n.exact };\n }) as VerticalTabEntry[];\n setEntries(list);\n }, [navigationOptions]);\n\n return (\n <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <MenuSection>\n <MenuSectionList>\n <VerticalTabs key=\"ExtendedMenu\" entries={entries} size={Size.Medium} />\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default ExtendedMainMenu;\n"],"file":"ExtendedMainMenu.js"}