@laerdal/life-react-components 2.0.1-dev.25 → 2.0.1-dev.26
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/GlobalNavigationBar/GlobalNavigationBar.cjs +6 -12
- package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
- package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts +1 -2
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js +6 -12
- package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +12 -3
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.d.ts +0 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +12 -3
- package/dist/GlobalNavigationBar/desktop/DesktopActions.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 +2 -3
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
- package/dist/Tag/Tag.cjs +3 -5
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.js +3 -5
- package/dist/Tag/Tag.js.map +1 -1
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ var _rooks = require("rooks");
|
|
|
27
27
|
var _common = require("../common");
|
|
28
28
|
var _utils = require("../utils/utils");
|
|
29
29
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
30
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
30
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
31
31
|
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); }
|
|
32
32
|
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; }
|
|
33
33
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -37,8 +37,7 @@ var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObje
|
|
|
37
37
|
var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
|
|
38
38
|
var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.XSMALL, HamburgerButton);
|
|
39
39
|
var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
|
|
40
|
-
var
|
|
41
|
-
var UserMenuWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
|
|
40
|
+
var UserMenuWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
|
|
42
41
|
return props.offsetRight && (0, _utils.hasWindow)() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
|
|
43
42
|
});
|
|
44
43
|
/**
|
|
@@ -57,8 +56,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
|
|
|
57
56
|
testId = _ref.testId,
|
|
58
57
|
_ref$useMaxWidth = _ref.useMaxWidth,
|
|
59
58
|
useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
|
|
60
|
-
maxWidth = _ref.maxWidth
|
|
61
|
-
profileComponent = _ref.profileComponent;
|
|
59
|
+
maxWidth = _ref.maxWidth;
|
|
62
60
|
var _React$useState = React.useState(false),
|
|
63
61
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
64
62
|
showMobileMenu = _React$useState2[0],
|
|
@@ -123,16 +121,13 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
|
|
|
123
121
|
return a.pinned;
|
|
124
122
|
}),
|
|
125
123
|
action: desktop === null || desktop === void 0 ? void 0 : desktop.action
|
|
126
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileWrapper, {
|
|
127
|
-
children: !!profileComponent && profileComponent
|
|
128
124
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DesktopActions.default, {
|
|
129
125
|
ref: actionsRef,
|
|
130
126
|
buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons,
|
|
131
127
|
onShowUserMenu: function onShowUserMenu() {
|
|
132
128
|
return setShowUserMenu(!showUserMenu);
|
|
133
129
|
},
|
|
134
|
-
user: profile === null || profile === void 0 ? void 0 : profile.user
|
|
135
|
-
profileComponent: profileComponent
|
|
130
|
+
user: profile === null || profile === void 0 ? void 0 : profile.user
|
|
136
131
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(HamburgerButton, {
|
|
137
132
|
hidden: !isAuthenticated,
|
|
138
133
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
@@ -161,7 +156,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
|
|
|
161
156
|
onClose: function onClose() {
|
|
162
157
|
return setShowMobileMenu(false);
|
|
163
158
|
},
|
|
164
|
-
profile:
|
|
159
|
+
profile: profile
|
|
165
160
|
}))
|
|
166
161
|
})
|
|
167
162
|
}), (desktop === null || desktop === void 0 ? void 0 : (_desktop$buttons = desktop.buttons) === null || _desktop$buttons === void 0 ? void 0 : _desktop$buttons.some(function (a) {
|
|
@@ -189,8 +184,7 @@ GlobalNavigationBar.propTypes = {
|
|
|
189
184
|
to: _propTypes.default.string,
|
|
190
185
|
showBetaTag: _propTypes.default.bool
|
|
191
186
|
}),
|
|
192
|
-
testId: _propTypes.default.string
|
|
193
|
-
profileComponent: _propTypes.default.node
|
|
187
|
+
testId: _propTypes.default.string
|
|
194
188
|
};
|
|
195
189
|
var _default = GlobalNavigationBar;
|
|
196
190
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst MobileWrapper = styled.div`\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n\n profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n profileComponent\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <MobileWrapper>\n {!!profileComponent && profileComponent }\n </MobileWrapper>\n\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}\n profileComponent= {profileComponent}\n />\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={!profileComponent ? profile : undefined}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
|
|
@@ -14,12 +14,11 @@ type GlobalNavigationBarProps = {
|
|
|
14
14
|
mobile?: MobileNavigationMenuProps;
|
|
15
15
|
desktop?: DesktopNavigationMenuProps;
|
|
16
16
|
testId?: string;
|
|
17
|
-
profileComponent?: React.ReactNode;
|
|
18
17
|
};
|
|
19
18
|
/**
|
|
20
19
|
* @param props
|
|
21
20
|
* @constructor
|
|
22
21
|
* @description This component is a global navigation header bar
|
|
23
22
|
*/
|
|
24
|
-
declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth,
|
|
23
|
+
declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
|
|
25
24
|
export default GlobalNavigationBar;
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
import _pt from "prop-types";
|
|
5
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6
|
|
5
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
8
|
import * as React from 'react';
|
|
@@ -30,8 +30,7 @@ var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTempla
|
|
|
30
30
|
var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " button {\n height: 56px;\n }\n\n ", " {\n display: none;\n }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
|
|
31
31
|
var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n ", " {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ", " {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.XSMALL, HamburgerButton);
|
|
32
32
|
var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ", ";\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ", " 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ", " 0.3s ease-in-out;\n }\n\n ", " {\n visibility: hidden !important;\n }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
|
|
33
|
-
var
|
|
34
|
-
var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
|
|
33
|
+
var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n position: absolute;\n\n ", " {\n top: 56px;\n right: ", ";\n }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
|
|
35
34
|
return props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
|
|
36
35
|
});
|
|
37
36
|
/**
|
|
@@ -50,8 +49,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
|
|
|
50
49
|
testId = _ref.testId,
|
|
51
50
|
_ref$useMaxWidth = _ref.useMaxWidth,
|
|
52
51
|
useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
|
|
53
|
-
maxWidth = _ref.maxWidth
|
|
54
|
-
profileComponent = _ref.profileComponent;
|
|
52
|
+
maxWidth = _ref.maxWidth;
|
|
55
53
|
var _React$useState = React.useState(false),
|
|
56
54
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
57
55
|
showMobileMenu = _React$useState2[0],
|
|
@@ -116,16 +114,13 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
|
|
|
116
114
|
return a.pinned;
|
|
117
115
|
}),
|
|
118
116
|
action: desktop === null || desktop === void 0 ? void 0 : desktop.action
|
|
119
|
-
}), /*#__PURE__*/_jsx(MobileWrapper, {
|
|
120
|
-
children: !!profileComponent && profileComponent
|
|
121
117
|
}), /*#__PURE__*/_jsx(DesktopActions, {
|
|
122
118
|
ref: actionsRef,
|
|
123
119
|
buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons,
|
|
124
120
|
onShowUserMenu: function onShowUserMenu() {
|
|
125
121
|
return setShowUserMenu(!showUserMenu);
|
|
126
122
|
},
|
|
127
|
-
user: profile === null || profile === void 0 ? void 0 : profile.user
|
|
128
|
-
profileComponent: profileComponent
|
|
123
|
+
user: profile === null || profile === void 0 ? void 0 : profile.user
|
|
129
124
|
}), /*#__PURE__*/_jsx(HamburgerButton, {
|
|
130
125
|
hidden: !isAuthenticated,
|
|
131
126
|
children: /*#__PURE__*/_jsx(IconButton, {
|
|
@@ -154,7 +149,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
|
|
|
154
149
|
onClose: function onClose() {
|
|
155
150
|
return setShowMobileMenu(false);
|
|
156
151
|
},
|
|
157
|
-
profile:
|
|
152
|
+
profile: profile
|
|
158
153
|
}))
|
|
159
154
|
})
|
|
160
155
|
}), (desktop === null || desktop === void 0 ? void 0 : (_desktop$buttons = desktop.buttons) === null || _desktop$buttons === void 0 ? void 0 : _desktop$buttons.some(function (a) {
|
|
@@ -182,8 +177,7 @@ GlobalNavigationBar.propTypes = {
|
|
|
182
177
|
to: _pt.string,
|
|
183
178
|
showBetaTag: _pt.bool
|
|
184
179
|
}),
|
|
185
|
-
testId: _pt.string
|
|
186
|
-
profileComponent: _pt.node
|
|
180
|
+
testId: _pt.string
|
|
187
181
|
};
|
|
188
182
|
export default GlobalNavigationBar;
|
|
189
183
|
//# sourceMappingURL=GlobalNavigationBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst MobileWrapper = styled.div`\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n\n profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n profileComponent\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <MobileWrapper>\n {!!profileComponent && profileComponent }\n </MobileWrapper>\n\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}\n profileComponent= {profileComponent}\n />\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={!profileComponent ? profile : undefined}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n DesktopNavigationMenuProps, MenuProfileButton,\n MobileNavigationMenuProps,\n ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n background: white;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n\n z-index: ${Z_INDEXES.sticky_menu};\n position: relative;\n\n height: 48px;\n\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n height: 64px;\n }\n\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n\n @media print {\n border-bottom: none;\n }\n`;\n\nconst RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n ${BREAKPOINTS.SMALL} button {\n height: 56px;\n }\n\n ${BREAKPOINTS.LARGE} {\n display: none;\n }\n`;\n\nconst RightSide = styled.div`\n display: flex;\n align-items: center;\n\n ${BREAKPOINTS.XSMALL} {\n margin: 0 0 0 auto;\n }\n\n &.reverse {\n ${HamburgerButton} {\n order: -1;\n }\n\n flex-direction: row-reverse;\n }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n position: fixed;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n z-index: ${Z_INDEXES.backdrop};\n visibility: hidden;\n\n &.open {\n visibility: visible;\n animation: ${fadeIn} 0.3s ease-in-out;\n }\n\n &.closed {\n visibility: hidden;\n animation: ${fadeOut} 0.3s ease-in-out;\n }\n\n ${BREAKPOINTS.LARGE} {\n visibility: hidden !important;\n }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n background-color: ${COLORS.white};\n display: flex;\n position: absolute;\n\n ${BREAKPOINTS.LARGE} {\n top: 56px;\n right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n }\n`;\n\n\ntype GlobalNavigationBarProps = {\n isAuthenticated?: boolean;\n useMaxWidth?: boolean;\n maxWidth?: number;\n\n name?: string;\n logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n profile?: ProfileMenu;\n\n mobile?: MobileNavigationMenuProps;\n desktop?: DesktopNavigationMenuProps;\n\n testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n name,\n isAuthenticated,\n logo,\n profile,\n mobile,\n desktop,\n testId,\n useMaxWidth = true,\n maxWidth,\n }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n const actionsRef = React.useRef<DesktopActionsRef>(null);\n const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n const rightSideRef = React.useRef(null);\n const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n React.useEffect(() => {\n if (!profileButtonRef.current) return;\n\n const handleResize = () => {\n const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n setAvatarRight(profileRightOffset || 0);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [profileButtonRef.current]);\n\n\n return (\n <>\n <HeaderWrapper data-testid={testId}>\n <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n <RowLayout>\n <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n {\n isAuthenticated &&\n <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n }\n <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n ref={rightSideRef}>\n <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n <DesktopActions ref={actionsRef}\n buttons={desktop?.buttons}\n onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n user={profile?.user}/>\n <HamburgerButton hidden={!isAuthenticated}>\n <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n ref={mobileMenuButtonRef}\n shape={'circular'}\n variant={'secondary'}>\n <Menu size=\"24px\"/>\n </IconButton>\n </HamburgerButton>\n </RightSide>\n </RowLayout>\n </PageWidth>\n </HeaderWrapper>\n <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n <MobileMenuWrapper ref={mobileMenuRef}\n role=\"menu\"\n aria-labelledby=\"UserMenuButton\">\n <MobileMenu {...mobile}\n show={showMobileMenu}\n onClose={() => setShowMobileMenu(false)}\n profile={profile}/>\n </MobileMenuWrapper>\n </MobileMenuBackdrop>\n {\n desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n <UserMenuWrapper ref={userMenuRef}\n offsetRight={avatarRight}\n data-testid=\"testUserMenuWrapper\">\n <UserMenu {...profile}\n show={showUserMenu}\n onHideUserMenu={() => setShowUserMenu(false)}/>\n </UserMenuWrapper>\n }\n </>\n );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":";;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,QAAQ,MAAM,oBAAoB;AACzC,SAAQC,SAAS,QAAO,YAAY;AACpC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,OAAOC,YAAY,MAAM,wBAAwB;AACjD,OAAOC,UAAU,MAAM,qBAAqB;AAC5C,SAAQC,IAAI,QAAO,kCAAkC;AACrD,OAAOC,QAAQ,MAAM,oBAAoB;AACzC,SAAQC,MAAM,EAAEC,OAAO,EAAEH,IAAI,IAAII,iBAAiB,QAAO,uBAAuB;AAChF,SAAQC,SAAS,QAAO,WAAW;AAMnC,SAAQC,UAAU,QAAO,WAAW;AACpC,OAAOC,cAAc,MAA2B,0BAA0B;AAC1E,SAAQC,oBAAoB,QAAO,OAAO;AAC1C,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,SAASC,SAAS,QAAQ,gBAAgB;AAAC;AAAA;AAAA;AAE3C,IAAMC,aAAa,GAAGnB,MAAM,CAACoB,MAAM,4ZAGNhB,MAAM,CAACiB,WAAW,EAElCR,SAAS,CAACS,WAAW,EAK9BjB,WAAW,CAACkB,KAAK,EAIjBlB,WAAW,CAACmB,KAAK,CAWpB;AAED,IAAMC,SAAS,GAAGzB,MAAM,CAAC0B,GAAG,mHAG3B;AAGD,IAAMC,eAAe,GAAG3B,MAAM,CAAC0B,GAAG,wJAC9BrB,WAAW,CAACkB,KAAK,EAIjBlB,WAAW,CAACmB,KAAK,CAGpB;AAED,IAAMI,SAAS,GAAG5B,MAAM,CAAC0B,GAAG,6PAIxBrB,WAAW,CAACwB,MAAM,EAKhBF,eAAe,CAMpB;AAED,IAAMG,kBAAkB,GAAG9B,MAAM,CAAC0B,GAAG,ueASxBb,SAAS,CAACkB,QAAQ,EAKdrB,MAAM,EAKNC,OAAO,EAGpBN,WAAW,CAACmB,KAAK,CAGpB;AAED,IAAMQ,eAAe,GAAGhC,MAAM,CAAC0B,GAAG,iMACZtB,MAAM,CAAC6B,KAAK,EAI9B5B,WAAW,CAACmB,KAAK,EAER,UAACU,KAAK;EAAA,OAAMA,KAAK,CAACC,WAAW,IAAIjB,SAAS,EAAE,aAAMkB,MAAM,CAACC,UAAU,GAAGH,KAAK,CAACC,WAAW,GAAG,GAAG,UAAO,KAAK;AAAA,CAAC,CAEtH;AAmBD;AACA;AACA;AACA;AACA;AACA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAmB,OAUkF;EAAA;EAAA,IAT5EC,IAAI,QAAJA,IAAI;IACJC,eAAe,QAAfA,eAAe;IACfC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,wBACNC,WAAW;IAAXA,WAAW,iCAAG,IAAI;IAClBC,QAAQ,QAARA,QAAQ;EAErC,sBAA4ChD,KAAK,CAACiD,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA1DC,cAAc;IAAEC,iBAAiB;EACxC,IAAMC,iBAAiB,GAAGnC,oBAAoB,CAACiC,cAAc,CAAC;EAE9D,uBAAwClD,KAAK,CAACiD,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAtDI,YAAY;IAAEC,eAAe;EAEpC,IAAMC,UAAU,GAAGvD,KAAK,CAACwD,MAAM,CAAoB,IAAI,CAAC;EACxD,IAAMC,gBAAgB,GAAGzD,KAAK,CAACwD,MAAM,EAA4F;EACjIC,gBAAgB,CAACC,OAAO,GAAGH,UAAU,aAAVA,UAAU,8CAAVA,UAAU,CAAEG,OAAO,iFAAnB,oBAAqBC,OAAO,oFAA5B,sBAA8BC,IAAI,CAAC,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACC,IAAI,KAAK,SAAS;EAAA,EAAC,qFAA7D,uBAA+DC,GAAG,2DAAlE,uBAAoEL,OAAO;EAEtG,IAAMM,mBAAmB,GAAGhE,KAAK,CAACwD,MAAM,CAAoB,IAAI,CAAC;EAEjE,IAAMS,YAAY,GAAGjE,KAAK,CAACwD,MAAM,CAAC,IAAI,CAAC;EACvC,uBAAsCxD,KAAK,CAACiD,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAxDiB,WAAW;IAAEC,cAAc;EAGlC,IAAMC,WAAW,GAAGlD,kBAAkB,CAAC;IAAA,OAAMoC,eAAe,CAAC,KAAK,CAAC;EAAA,GAAE,CAACG,gBAAgB,CAAC,CAAC;EACxF,IAAMY,aAAa,GAAGnD,kBAAkB,CAAC;IAAA,OAAMiC,iBAAiB,CAAC,KAAK,CAAC;EAAA,GAAE,CAACa,mBAAmB,CAAC,CAAC;EAE/FhE,KAAK,CAACsE,SAAS,CAAC,YAAM;IACpB,IAAI,CAACb,gBAAgB,CAACC,OAAO,EAAE;IAE/B,IAAMa,YAAY,GAAG,SAAfA,YAAY,GAAS;MAAA;MACzB,IAAMC,kBAAkB,4BAAGf,gBAAgB,CAACC,OAAO,oFAAxB,sBAA0Be,qBAAqB,EAAE,2DAAjD,uBAAmDC,KAAK;MACnFP,cAAc,CAACK,kBAAkB,IAAI,CAAC,CAAC;IACzC,CAAC;IAEDD,YAAY,EAAE;IACdlC,MAAM,CAACsC,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAMlC,MAAM,CAACuC,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,CAACd,gBAAgB,CAACC,OAAO,CAAC,CAAC;EAG9B,oBACE;IAAA,wBACE,KAAC,aAAa;MAAC,eAAaZ,MAAO;MAAA,uBACjC,KAAC,SAAS;QAAC,WAAW,EAAEC,WAAY;QAAC,QAAQ,EAAEC,QAAS;QAAA,uBACtD,MAAC,SAAS;UAAA,wBACR,KAAC,IAAI;YAAC,IAAI,EAAER,IAAI,IAAI,EAAG;YAAC,WAAW,EAAEE,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEmC,WAAY;YAAC,OAAO,EAAEnC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC,OAAQ;YAAC,EAAE,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEqC;UAAG,EAAE,EAE7FtC,eAAe,iBACf,KAAC,QAAQ;YAAC,KAAK,EAAE,CAAAI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEmC,KAAK,CAACC,MAAM,CAAC,UAAApB,CAAC;cAAA,OAAI,CAACA,CAAC,CAACqB,MAAM;YAAA,EAAC,KAAI,EAAG;YAAC,YAAY,EAAEjB;UAAa,EAAE,eAE7F,MAAC,SAAS;YAAC,SAAS,YAAKpB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEsC,qBAAqB,GAAG,SAAS,GAAG,EAAE,CAAG;YAChE,GAAG,EAAElB,YAAa;YAAA,wBAC3B,KAAC,YAAY;cAAC,KAAK,EAAEpB,OAAO,aAAPA,OAAO,yCAAPA,OAAO,CAAEmC,KAAK,mDAAd,eAAgBC,MAAM,CAAC,UAAApB,CAAC;gBAAA,OAAIA,CAAC,CAACqB,MAAM;cAAA,EAAE;cAAC,MAAM,EAAErC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEuC;YAAO,EAAE,eACtF,KAAC,cAAc;cAAC,GAAG,EAAE7B,UAAW;cAChB,OAAO,EAAEV,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEc,OAAQ;cAC1B,cAAc,EAAE;gBAAA,OAAML,eAAe,CAAC,CAACD,YAAY,CAAC;cAAA,CAAC;cACrD,IAAI,EAAEV,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE0C;YAAK,EAAE,eACtC,KAAC,eAAe;cAAC,MAAM,EAAE,CAAC5C,eAAgB;cAAA,uBACxC,KAAC,UAAU;gBAAC,MAAM,EAAE;kBAAA,OAAMU,iBAAiB,CAAC,CAACD,cAAc,CAAC;gBAAA,CAAC;gBACjD,GAAG,EAAEc,mBAAoB;gBACzB,KAAK,EAAE,UAAW;gBAClB,OAAO,EAAE,WAAY;gBAAA,uBAC/B,KAAC,IAAI;kBAAC,IAAI,EAAC;gBAAM;cAAE;YACR,EACG;UAAA,EACR;QAAA;MACF;IACF,EACE,eAChB,KAAC,kBAAkB;MAAC,SAAS,EAAEd,cAAc,GAAG,MAAM,GAAG,CAACG,YAAY,IAAID,iBAAiB,GAAG,QAAQ,GAAG,EAAG;MAAA,uBAC1G,KAAC,iBAAiB;QAAC,GAAG,EAAEiB,aAAc;QACnB,IAAI,EAAC,MAAM;QACX,mBAAgB,gBAAgB;QAAA,uBACjD,KAAC,UAAU,kCAAKzB,MAAM;UACV,IAAI,EAAEM,cAAe;UACrB,OAAO,EAAE;YAAA,OAAMC,iBAAiB,CAAC,KAAK,CAAC;UAAA,CAAC;UACxC,OAAO,EAAER;QAAQ;MAAE;IACb,EACD,EAEnB,CAAAE,OAAO,aAAPA,OAAO,2CAAPA,OAAO,CAAEc,OAAO,qDAAhB,iBAAkB2B,IAAI,CAAC,UAAAzB,CAAC;MAAA,OAAIA,CAAC,CAACC,IAAI,KAAK,SAAS;IAAA,EAAC,KAAI,CAAC,CAACnB,OAAO,iBAC9D,KAAC,eAAe;MAAC,GAAG,EAAEyB,WAAY;MACjB,WAAW,EAAEF,WAAY;MACzB,eAAY,qBAAqB;MAAA,uBAChD,KAAC,QAAQ,kCAAKvB,OAAO;QACX,IAAI,EAAEU,YAAa;QACnB,cAAc,EAAE;UAAA,OAAMC,eAAe,CAAC,KAAK,CAAC;QAAA;MAAC;IAAE,EACzC;EAAA,EAEnB;AAEP,CAAC;AAAC;EAlHAb,eAAe;EACfM,WAAW;EACXC,QAAQ;EAERR,IAAI;EACJE,IAAI;IAAKoC,OAAO;IAAeC,EAAE;IAAWF,WAAW;EAAA;EAOvD/B,MAAM;AAAA;AAwGR,eAAeP,mBAAmB"}
|
|
@@ -14,6 +14,8 @@ 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");
|
|
17
19
|
var _styles = require("../../styles");
|
|
18
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
21
|
var _excluded = ["placement", "type", "action"],
|
|
@@ -26,7 +28,6 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
|
|
|
26
28
|
var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
27
29
|
var buttons = _ref.buttons,
|
|
28
30
|
user = _ref.user,
|
|
29
|
-
profileComponent = _ref.profileComponent,
|
|
30
31
|
onShowUserMenu = _ref.onShowUserMenu;
|
|
31
32
|
var _React$useState = _react.default.useState([]),
|
|
32
33
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
@@ -53,11 +54,20 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
53
54
|
switch (item.type) {
|
|
54
55
|
case 'profile':
|
|
55
56
|
{
|
|
57
|
+
var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
|
|
56
58
|
var placement = item.placement,
|
|
57
59
|
type = item.type,
|
|
58
60
|
action = item.action,
|
|
59
61
|
rest = (0, _objectWithoutProperties2.default)(item, _excluded);
|
|
60
|
-
return
|
|
62
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
|
|
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);
|
|
61
71
|
}
|
|
62
72
|
case 'action':
|
|
63
73
|
{
|
|
@@ -109,7 +119,6 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
109
119
|
});
|
|
110
120
|
DesktopActions.propTypes = {
|
|
111
121
|
buttons: _propTypes.default.array,
|
|
112
|
-
profileComponent: _propTypes.default.node,
|
|
113
122
|
onShowUserMenu: _propTypes.default.func.isRequired
|
|
114
123
|
};
|
|
115
124
|
var _default = DesktopActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","LARGE","DesktopActions","React","forwardRef","ref","buttons","user","
|
|
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","e","target","firstName","charAt","lastName","icon"],"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 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 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 <ProfileButton key={index}\n ref={elRefs[index]}\n hideOnLowWidth={true}\n onClick={e => {\n item.action ? item.action(e?.target) : onShowUserMenu()\n }}\n icon={!user && <SystemIcons.User/>}\n initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\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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"}
|
|
@@ -3,7 +3,6 @@ import { MenuAccountInfo, DesktopMenuButtonTypes } from '../types';
|
|
|
3
3
|
interface DesktopActionsProps {
|
|
4
4
|
buttons?: DesktopMenuButtonTypes[];
|
|
5
5
|
user?: MenuAccountInfo;
|
|
6
|
-
profileComponent?: React.ReactNode;
|
|
7
6
|
onShowUserMenu: () => void;
|
|
8
7
|
}
|
|
9
8
|
export interface DesktopActionsRef {
|
|
@@ -13,13 +13,14 @@ 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';
|
|
16
18
|
import { BREAKPOINTS } from '../../styles';
|
|
17
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
20
|
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n\n display: none;\n\n ", " {\n display: flex;\n }\n"])), BREAKPOINTS.LARGE);
|
|
19
21
|
var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
20
22
|
var buttons = _ref.buttons,
|
|
21
23
|
user = _ref.user,
|
|
22
|
-
profileComponent = _ref.profileComponent,
|
|
23
24
|
onShowUserMenu = _ref.onShowUserMenu;
|
|
24
25
|
var _React$useState = React.useState([]),
|
|
25
26
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -46,11 +47,20 @@ var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
46
47
|
switch (item.type) {
|
|
47
48
|
case 'profile':
|
|
48
49
|
{
|
|
50
|
+
var _user$firstName$charA, _user$firstName, _user$lastName$charAt, _user$lastName;
|
|
49
51
|
var placement = item.placement,
|
|
50
52
|
type = item.type,
|
|
51
53
|
action = item.action,
|
|
52
54
|
rest = _objectWithoutProperties(item, _excluded);
|
|
53
|
-
return
|
|
55
|
+
return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
|
|
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);
|
|
54
64
|
}
|
|
55
65
|
case 'action':
|
|
56
66
|
{
|
|
@@ -102,7 +112,6 @@ var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
102
112
|
});
|
|
103
113
|
DesktopActions.propTypes = {
|
|
104
114
|
buttons: _pt.array,
|
|
105
|
-
profileComponent: _pt.node,
|
|
106
115
|
onShowUserMenu: _pt.func.isRequired
|
|
107
116
|
};
|
|
108
117
|
export default DesktopActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","SwitchApp","BREAKPOINTS","Wrapper","div","LARGE","DesktopActions","forwardRef","ref","buttons","user","
|
|
1
|
+
{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","SwitchApp","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","LARGE","DesktopActions","forwardRef","ref","buttons","user","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"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 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 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 <ProfileButton key={index}\n ref={elRefs[index]}\n hideOnLowWidth={true}\n onClick={e => {\n item.action ? item.action(e?.target) : onShowUserMenu()\n }}\n icon={!user && <SystemIcons.User/>}\n initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\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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"}
|
|
@@ -67,14 +67,14 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
|
|
|
67
67
|
type = item.type,
|
|
68
68
|
action = item.action,
|
|
69
69
|
rest = (0, _objectWithoutProperties2.default)(item, _excluded);
|
|
70
|
-
|
|
70
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
|
|
71
71
|
onClick: function onClick(e) {
|
|
72
72
|
e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
|
|
73
73
|
item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
|
|
74
74
|
},
|
|
75
75
|
icon: !profile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
|
|
76
76
|
initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
|
|
77
|
-
}, rest), index);
|
|
77
|
+
}, rest), index);
|
|
78
78
|
}
|
|
79
79
|
case 'submenu':
|
|
80
80
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileMenuHeader.cjs","names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","ComponentSStyling","MobileMenuHeaderWrapper","Breakpoints","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.LARGE} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n if(!!profile)\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n else return <></>\n \n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MobileMenuHeader.cjs","names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","ComponentSStyling","MobileMenuHeaderWrapper","Breakpoints","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.LARGE} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":";;;;;;;;;;;AAAA;AAMA;AACA;AACA;AACA;AACA;AACA;AAAkD;AAAA;EAAA;EAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,uBAAuB,GAAGC,yBAAM,CAACC,GAAG,yKAKhD;AAAC;AACF,IAAMC,qBAAqB,GAAGF,yBAAM,CAACC,GAAG,yHACpC,IAAAE,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC,EAC/DC,mBAAW,CAACC,KAAK,EACf,IAAAC,yBAAiB,EAACN,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC,CAEnE;AAEM,IAAMI,uBAAuB,GAAGX,yBAAM,CAACC,GAAG,0PAM7CW,oBAAW,CAACH,KAAK,EAIjBG,oBAAW,CAACC,KAAK,CAGpB;AAAA;AAcD,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAgE,OAOU;EAAA,IANJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,aAAa,QAAbA,aAAa;EAGvF,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB;IAAA;IAAA,OAAS,CAAC,CAACH,OAAO,GAAG;MAC5CI,IAAI,EAAE,OAAO;MACbL,KAAK,EAAEC,OAAO,CAACD,KAAK;MACpBM,MAAM,EAAE;QACNA,MAAM,EAAEL,OAAO,CAACM,IAAI,CAACC,SAAS,GAAG,GAAG,GAAGP,OAAO,CAACM,IAAI,CAACE,QAAQ;QAC5DC,IAAI,EAAET,OAAO,CAACM,IAAI,CAACI,KAAK;QACxBC,IAAI,EAAEX,OAAO,CAACM,IAAI,CAACK;MACrB,CAAC;MACDC,MAAM,EAAE;QACNb,KAAK,sBAAEC,OAAO,CAACa,OAAO,qDAAf,iBAAiBd,KAAK;QAC7Ba,MAAM,uBAAEZ,OAAO,CAACa,OAAO,sDAAf,kBAAiBD,MAAM;QAC/BE,IAAI,uBAAEd,OAAO,CAACa,OAAO,sDAAf,kBAAiBC,IAAI;QAC3BC,QAAQ,uBAAEf,OAAO,CAACa,OAAO,sDAAf,kBAAiBE;MAC7B,CAAC;MACDC,KAAK,EAAEhB,OAAO,CAACiB,QAAQ,CAACC,GAAG,CAAC,UAAAC,CAAC;QAAA,uCAASA,CAAC;UAAEf,IAAI,EAAE;QAAS;MAAA,CAAE;IAC5D,CAAC,GAAkCgB,SAAS;EAAA;EAE5C,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAA2B,EAAEC,KAAa,EAAK;IACjE,QAAQD,IAAI,CAAClB,IAAI;MACf,KAAK,SAAS;QAAE;UAAA;UACd,IAAOoB,SAAS,GAA2BF,IAAI,CAAxCE,SAAS;YAAEpB,IAAI,GAAqBkB,IAAI,CAA7BlB,IAAI;YAAEQ,MAAM,GAAaU,IAAI,CAAvBV,MAAM;YAAKa,IAAI,0CAAIH,IAAI;UAC/C,oBAAO,qBAAC,4BAAa;YACC,OAAO,EAAE,iBAAAI,CAAC,EAAI;cACZA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,WAAW,CAACC,wBAAwB,EAAE;cACzCN,IAAI,CAACV,MAAM,GAAGU,IAAI,CAACV,MAAM,CAACc,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEG,MAAM,CAAC,IAAI/B,OAAO,EAAE,GAAGI,aAAa,IAAIA,aAAa,CAACC,mBAAmB,EAAE,CAAC;YAC3G,CAAE;YACF,IAAI,EAAE,CAACH,OAAO,iBAAI,qBAAC,kBAAW,CAAC,IAAI,KAAG;YACtC,QAAQ,EAAE,0BAACA,OAAO,aAAPA,OAAO,wCAAPA,OAAO,CAAEM,IAAI,4EAAb,cAAeC,SAAS,2DAAxB,uBAA0BuB,MAAM,CAAC,CAAC,CAAC,yEAAI,EAAE,8BAAK9B,OAAO,aAAPA,OAAO,yCAAPA,OAAO,CAAEM,IAAI,4EAAb,eAAeE,QAAQ,0DAAvB,sBAAyBsB,MAAM,CAAC,CAAC,CAAC,yEAAI,EAAE;UAAE,GAC/FL,IAAI,GAPHF,KAAK,CAOC;QACnC;MACA,KAAK,SAAS;QAAE;UACd,IAAOC,UAAS,GAA+BF,IAAI,CAA5CE,SAAS;YAAEpB,KAAI,GAAyBkB,IAAI,CAAjClB,IAAI;YAAEU,IAAI,GAAmBQ,IAAI,CAA3BR,IAAI;YAAEiB,IAAI,GAAaT,IAAI,CAArBS,IAAI;YAAKN,KAAI,0CAAIH,IAAI;UAEnD,oBAAO,qBAAC,kBAAU;YACC,OAAO,EAAE,WAAY;YACrB,KAAK,EAAE,UAAW;YAClB,MAAM,EAAE,gBAAAI,CAAC,EAAI;cACXA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,WAAW,CAACC,wBAAwB,EAAE;cACzC1B,aAAa,IAAIA,aAAa,CAACoB,IAAI,CAACS,IAAI,CAAC;YAC3C;UAAE,GACEN,KAAI;YAAA,UACxBH,IAAI,CAACR;UAAI,IARYS,KAAK,CAShB;QACf;MACA,KAAK,QAAQ;QAAE;UACb,IAAOC,WAAS,GAAiCF,IAAI,CAA9CE,SAAS;YAAEpB,MAAI,GAA2BkB,IAAI,CAAnClB,IAAI;YAAEU,KAAI,GAAqBQ,IAAI,CAA7BR,IAAI;YAAEF,OAAM,GAAaU,IAAI,CAAvBV,MAAM;YAAKa,MAAI,0CAAIH,IAAI;UACrD,oBAAO,qBAAC,kBAAU;YACC,QAAQ,EAAEA,IAAI,CAACP,QAAS;YACxB,OAAO,EAAE,WAAY;YACrB,KAAK,EAAE,UAAW;YAClB,MAAM,EAAE,gBAAAW,CAAC,EAAI;cACXA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,WAAW,CAACC,wBAAwB,EAAE;cACzCN,IAAI,CAACV,MAAM,IAAIU,IAAI,CAACV,MAAM,CAACc,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEG,MAAM,CAAC,IAAI/B,OAAO,EAAE;YACpD;UAAE,GACE2B,MAAI;YAAA,UACxBH,IAAI,CAACR;UAAI,IATYS,KAAK,CAUhB;QACf;IAAC;EAEL,CAAC;EAED,oBACE,sBAAC,uBAAuB;IAAA,WAEpB1B,QAAQ,iBACR,qBAAC,kBAAU;MAAC,MAAM,EAAE,gBAAA6B,CAAC,EAAI;QACvBA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,WAAW,CAACC,wBAAwB,EAAE;QACzC/B,QAAQ,EAAE;MACZ,CAAE;MACU,OAAO,EAAE,WAAY;MACrB,KAAK,EAAE,UAAW;MAAA,uBAC5B,qBAAC,kBAAW,CAAC,aAAa;IAAE,EACjB,EAGbI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE+B,MAAM,CAAC,UAAAb,CAAC;MAAA,OAAIA,CAAC,CAACK,SAAS,KAAK,MAAM;IAAA,EAAC,CAACN,GAAG,CAACG,UAAU,CAAC,EAG5DtB,KAAK,iBACL,qBAAC,qBAAqB;MAAA,UAAEA;IAAK,EAAyB,eAExD,sBAAC,uBAAuB;MAAA,WAEpBE,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE+B,MAAM,CAAC,UAAAb,CAAC;QAAA,OAAIA,CAAC,CAACK,SAAS,KAAK,MAAM;MAAA,EAAC,CAACN,GAAG,CAACG,UAAU,CAAC,EAI5DvB,OAAO,iBACP;QAAK,KAAK,EAAE;UAACmC,UAAU,EAAE;QAAK,CAAE;QAAA,uBAC9B,qBAAC,kBAAU;UAAC,OAAO,EAAE,WAAY;UACrB,MAAM,EAAE,gBAAAP,CAAC,EAAI;YACXA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,WAAW,CAACC,wBAAwB,EAAE;YACzC9B,OAAO,EAAE;UACX,CAAE;UACF,KAAK,EAAE,UAAW;UAAA,uBAC5B,qBAAC,kBAAW,CAAC,KAAK;QAAE;MACT,EACT;IAAA,EAEgB;EAAA,EAEF;AAE9B,CAAC;AAAC;EA3HAD,QAAQ;EACRC,OAAO;EACPC,KAAK;EAGLE,OAAO;EAEPC,aAAa;AAAA;AAAA,eAuHAN,gBAAgB;AAAA"}
|
|
@@ -16,7 +16,6 @@ import { SystemIcons } from '../../icons';
|
|
|
16
16
|
import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
|
|
17
17
|
import { ProfileButton } from '../../ProfileButton';
|
|
18
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
20
19
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
20
|
export var MobileMenuHeaderActions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n"])));
|
|
22
21
|
var MobileMenuHeaderLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
|
|
@@ -60,14 +59,14 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
|
|
|
60
59
|
type = item.type,
|
|
61
60
|
action = item.action,
|
|
62
61
|
rest = _objectWithoutProperties(item, _excluded);
|
|
63
|
-
|
|
62
|
+
return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
|
|
64
63
|
onClick: function onClick(e) {
|
|
65
64
|
e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
|
|
66
65
|
item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
|
|
67
66
|
},
|
|
68
67
|
icon: !profile && /*#__PURE__*/_jsx(SystemIcons.User, {}),
|
|
69
68
|
initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
|
|
70
|
-
}, rest), index);
|
|
69
|
+
}, rest), index);
|
|
71
70
|
}
|
|
72
71
|
case 'submenu':
|
|
73
72
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileMenuHeader.js","names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.LARGE} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n if(!!profile)\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n else return <></>\n \n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MobileMenuHeader.js","names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n MobileMenuButtonTypes,\n MenuNavigationItemTypeGroup,\n ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n flex: 1;\n justify-content: flex-end;\n display: flex;\n flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 4px;\n\n ${Breakpoints.SMALL} {\n padding: 4px 8px;\n }\n\n ${Breakpoints.LARGE} {\n display: none;\n }\n`\n\ninterface MobileMenuHeaderProps {\n onGoBack?: () => void;\n onClose: () => void;\n label?: string;\n\n profile?: ProfileMenu\n buttons?: MobileMenuButtonTypes[];\n\n onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n onGoBack,\n onClose,\n label,\n profile,\n buttons,\n onSubMenuOpen\n }) => {\n\n const buildProfileSubMenu = () => !!profile ? {\n type: 'group',\n label: profile.label,\n header: {\n header: profile.user.firstName + ' ' + profile.user.lastName,\n note: profile.user.email,\n link: profile.user.link\n },\n action: {\n label: profile.signOut?.label,\n action: profile.signOut?.action,\n icon: profile.signOut?.icon,\n disabled: profile.signOut?.disabled\n },\n items: profile.sections.map(a => ({...a, type: 'section'}))\n } as MenuNavigationItemTypeGroup : undefined\n\n const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n switch (item.type) {\n case 'profile': {\n const {placement, type, action, ...rest} = item;\n return <ProfileButton key={index}\n onClick={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n }}\n icon={!profile && <SystemIcons.User/>}\n initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n {...rest}/>\n }\n case 'submenu': {\n const {placement, type, icon, menu, ...rest} = item;\n\n return <IconButton key={index}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n case 'action': {\n const {placement, type, icon, action, ...rest} = item;\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n item.action && item.action(e?.target) && onClose();\n }}\n {...rest}>\n {item.icon}\n </IconButton>\n }\n }\n }\n\n return (\n <MobileMenuHeaderWrapper>\n {\n onGoBack &&\n <IconButton action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onGoBack();\n }}\n variant={'secondary'}\n shape={'circular'}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n {\n buttons?.filter(a => a.placement === 'left').map(renderItem)\n }\n {\n label &&\n <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n }\n <MobileMenuHeaderActions>\n {\n buttons?.filter(a => a.placement !== 'left').map(renderItem)\n }\n\n {\n onClose &&\n <div style={{marginLeft: '8px'}}>\n <IconButton variant={'secondary'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onClose();\n }}\n shape={'circular'}>\n <SystemIcons.Close/>\n </IconButton>\n </div>\n }\n </MobileMenuHeaderActions>\n\n </MobileMenuHeaderWrapper>\n )\n};\n\n\nexport default MobileMenuHeader;\n"],"mappings":"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"}
|
package/dist/Tag/Tag.cjs
CHANGED
|
@@ -20,13 +20,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
20
20
|
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; }
|
|
21
21
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
22
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n justify-content: center;\n min-width: ", ";\n border-radius: 2px;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
|
|
23
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ", ";\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
|
|
24
24
|
return props.isLabelPresent ? '64px' : '';
|
|
25
25
|
}, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.correct_100, _.COLORS.correct_600, _.COLORS.warning_100, _.COLORS.warning_600, _.COLORS.critical_100, _.COLORS.critical_600, _.COLORS.accent1_100, _.COLORS.accent1_600, _.COLORS.accent2_100, _.COLORS.accent2_600);
|
|
26
|
-
var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
27
|
-
var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
28
|
-
return props.icon ? "4px 8px 4px 0" : "4px 8px";
|
|
29
|
-
}, (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
|
|
26
|
+
var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n"])));
|
|
27
|
+
var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
|
|
30
28
|
var Tag = function Tag(_ref) {
|
|
31
29
|
var label = _ref.label,
|
|
32
30
|
icon = _ref.icon,
|
package/dist/Tag/Tag.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","
|
|
1
|
+
{"version":3,"file":"Tag.cjs","names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpE,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,6sBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCC,QAAM,CAACC,WAAW,EAC7BD,QAAM,CAACE,WAAW,EAGPF,QAAM,CAACG,WAAW,EAC7BH,QAAM,CAACI,WAAW,EAGPJ,QAAM,CAACK,WAAW,EAC7BL,QAAM,CAACM,WAAW,EAGPN,QAAM,CAACO,YAAY,EAC9BP,QAAM,CAACQ,YAAY,EAGRR,QAAM,CAACS,WAAW,EAC7BT,QAAM,CAACU,WAAW,EAGPV,QAAM,CAACW,WAAW,EAC7BX,QAAM,CAACY,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGjB,yBAAM,CAACC,GAAG,6LAQ/B;AAED,IAAMiB,aAAa,GAAGlB,yBAAM,CAACC,GAAG,+MAM5B,IAAAkB,oBAAkB,EAACC,oBAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,sBAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,qBAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,4BALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAAA,eAwBlFH,GAAG;AAAA"}
|
package/dist/Tag/Tag.js
CHANGED
|
@@ -11,13 +11,11 @@ import styled from 'styled-components';
|
|
|
11
11
|
import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n justify-content: center;\n min-width: ", ";\n border-radius: 2px;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
|
|
14
|
+
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ", ";\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
|
|
15
15
|
return props.isLabelPresent ? '64px' : '';
|
|
16
16
|
}, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
|
|
17
|
-
var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
18
|
-
var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
19
|
-
return props.icon ? "4px 8px 4px 0" : "4px 8px";
|
|
20
|
-
}, ComponentXSStyling(ComponentTextStyle.Bold, null));
|
|
17
|
+
var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n"])));
|
|
18
|
+
var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
|
|
21
19
|
var Tag = function Tag(_ref) {
|
|
22
20
|
var label = _ref.label,
|
|
23
21
|
icon = _ref.icon,
|
package/dist/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","
|
|
1
|
+
{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","Bold","Tag","label","icon","variant","className","rest","cls"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n padding: 4px;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n align-items: center;\n justify-content: center;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n box-sizing: border-box;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n display: flex;\n width: 16px;\n height: 16px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n height: 16px;\n padding: 0 4px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,IAAI;AAAC;AAAA;AAEpE,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,+rBAQb,UAAAC,KAAK;EAAA,OAAEA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,EAAE;AAAA,GAKhCN,MAAM,CAACO,WAAW,EAC7BP,MAAM,CAACQ,WAAW,EAGPR,MAAM,CAACS,WAAW,EAC7BT,MAAM,CAACU,WAAW,EAGPV,MAAM,CAACW,WAAW,EAC7BX,MAAM,CAACY,WAAW,EAGPZ,MAAM,CAACa,YAAY,EAC9Bb,MAAM,CAACc,YAAY,EAGRd,MAAM,CAACe,WAAW,EAC7Bf,MAAM,CAACgB,WAAW,EAGPhB,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,CAG9B;AAED,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAG,+KAQ/B;AAED,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAG,iMAM5BF,kBAAkB,CAACD,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC,CACpD;AAWD,IAAMC,GAAsC,GAAG,SAAzCA,GAAsC,OAA6D;EAAA,IAAxDC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAC,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACjG,IAAMC,GAAG,aAAMF,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,cAAID,OAAO,CAAE;EAC3C,oBACE,MAAC,SAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,cAAc,EAAE,CAAC,CAACF,KAAM;IAAC,SAAS,EAAEK;EAAI,GAAKD,IAAI;IAAA,WAC3EH,IAAI,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEC,OAAQ;MAAC,eAAa,eAAgB;MAAA,UAClED;IAAI,EACS,EAEjBD,KAAK,iBAAI,KAAC,aAAa;MAAC,OAAO,EAAEE,OAAQ;MAAC,IAAI,EAAED,IAAK;MAAA,UACjDD;IAAK,EACQ;EAAA,GAER;AAEhB,CAAC;AAAC;EAnBAA,KAAK;EACLC,IAAI;EACJC,OAAO,aALiB,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,UAAU,EAAG,SAAS,EAAG,SAAS;AAAA;AAwBjG,eAAeH,GAAG"}
|