npm - @laerdal/life-react-components - Versions diffs - 1.10.3-dev.19 → 1.10.3-dev.21 - Mend

@laerdal/life-react-components 1.10.3-dev.19 → 1.10.3-dev.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","MobileMenuHeaderWrapper","Breakpoints","MEDIUM","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","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","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.MEDIUM} {\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 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 case 'submenu':\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}>\n {item.icon}\n </IconButton>\n case 'action':\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 {item.icon}\n </IconButton>\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"],"file":"MobileMenuHeader.cjs"}
1	+ {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","MobileMenuHeaderWrapper","Breakpoints","MEDIUM","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"],"mappings":"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","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.MEDIUM} {\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"],"file":"MobileMenuHeader.cjs"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js CHANGED Viewed

@@ -1,6 +1,10 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+var _excluded = ["placement", "type", "action"],
+    _excluded2 = ["placement", "type", "icon", "menu"],
+    _excluded3 = ["placement", "type", "icon", "action"];
 var _templateObject, _templateObject2, _templateObject3;
@@ -55,42 +59,66 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
   };
   var renderItem = function renderItem(item, index) {
-    var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
     switch (item.type) {
       case 'profile':
-        return /*#__PURE__*/_jsx(ProfileButton, {
-          onClick: function onClick(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
-          },
-          icon: !profile && /*#__PURE__*/_jsx(SystemIcons.User, {}),
-          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 : '')
-        }, index);
+        {
+          var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
+          var placement = item.placement,
+              type = item.type,
+              action = item.action,
+              rest = _objectWithoutProperties(item, _excluded);
+          return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
+            onClick: function onClick(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
+            },
+            icon: !profile && /*#__PURE__*/_jsx(SystemIcons.User, {}),
+            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 : '')
+          }, rest), index);
+        }
       case 'submenu':
-        return /*#__PURE__*/_jsx(IconButton, {
-          disabled: item.disabled,
-          variant: 'secondary',
-          shape: 'circular',
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            onSubMenuOpen && onSubMenuOpen(item.menu);
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement = item.placement,
+              _type = item.type,
+              icon = item.icon,
+              menu = item.menu,
+              _rest = _objectWithoutProperties(item, _excluded2);
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            variant: 'secondary',
+            shape: 'circular',
+            action: function action(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              onSubMenuOpen && onSubMenuOpen(item.menu);
+            }
+          }, _rest), {}, {
+            children: item.icon
+          }), index);
+        }
       case 'action':
-        return /*#__PURE__*/_jsx(IconButton, {
-          disabled: item.disabled,
-          variant: 'secondary',
-          shape: 'circular',
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement2 = item.placement,
+              _type2 = item.type,
+              _icon = item.icon,
+              _action = item.action,
+              _rest2 = _objectWithoutProperties(item, _excluded3);
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            disabled: item.disabled,
+            variant: 'secondary',
+            shape: 'circular',
+            action: function action(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
+            }
+          }, _rest2), {}, {
+            children: item.icon
+          }), index);
+        }
     }
   };

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","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","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","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.MEDIUM} {\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 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 case 'submenu':\n return <IconButton key={index}\n disabled={item.disabled}\n variant={'secondary'}\n shape={'circular'}\n action={e => {\n e?.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item.menu)\n }}>\n {item.icon}\n </IconButton>\n case 'action':\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 {item.icon}\n </IconButton>\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"],"file":"MobileMenuHeader.js"}
1	+ {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","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"],"mappings":"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","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.MEDIUM} {\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"],"file":"MobileMenuHeader.js"}

package/dist/GlobalNavigationBar/types.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
 import React from 'react';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
+import { IconButtonProps } from '../Button/Iconbutton';
+import { ProfileButtonProps } from '../ProfileButton/ProfileButton';
+import { NavLinkProps } from 'react-router-dom';
 export interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {
     label: string;
     icon?: React.ReactElement;
@@ -32,30 +35,26 @@ export interface ProfileMenu {
     sections: MenuNavigationSection[];
     signOut?: MenuButton;
 }
-export interface MenuIconSubMenuButton {
+export interface MenuIconSubMenuButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {
     type: 'submenu';
     icon: React.ReactNode;
     menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;
     placement?: 'left' | 'right';
-    disabled?: boolean;
 }
-export interface MenuIconButton {
+export interface MenuIconButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {
     type: 'action';
     icon: React.ReactNode;
     action: (button?: EventTarget) => boolean | void;
     placement?: 'left' | 'right';
-    disabled?: boolean;
 }
-export interface MenuProfileButton {
+export interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {
     type: 'profile';
     action?: (button?: EventTarget) => boolean | void;
     placement?: 'left' | 'right';
-    disabled?: boolean;
 }
-export interface MenuSwitcherButton {
+export interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {
     type: 'switcher';
     placement?: 'left' | 'right';
-    disabled?: boolean;
     action?: (button?: EventTarget) => boolean | void;
 }
 export declare type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
@@ -93,7 +92,7 @@ export declare type MenuNavigationItem = {
     label: string;
     note?: string;
     pinned?: boolean;
-};
+} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;
 export interface MenuNavigationSection<T = MenuNavigationItem> {
     divider?: boolean;
     pinned?: boolean;

package/dist/ProfileButton/ProfileButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWO,IAAMC,sBAAsB,GAAGJ,0BAAOC,GAAV,8vBAM/BI,mCAN+B,EAOpB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BC,oBAAYC,MATiB,EAkB3BC,6BAlB2B,EAmBPR,SAAOS,WAnBA,EAsBjBT,SAAOU,WAtBU,EA6B3Bb,eA7B2B,EAqC3BA,eArC2B,CAA5B;;;;AA6CP,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTf,cAMS,QANTA,cAMS;AAAA,MALTgB,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEQ,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEP,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO6B,KAD1D;AAAA,gBAEGV;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEb,cAAxC;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB;AAP5B,OAQgBoB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEQ,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAET;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCjB,EAAAA,c;;eAiIaQ,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\~~ntype~~ ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n notificationVariant?: 'positive' \| 'critical';\n hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex,\n ...rest\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) \|\|\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) \|\| <>{icon}</>\n );\n };\n\n return (\n <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}\n {...rest}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </ProfileButtonContainer>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}
1	+ {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWO,IAAMC,sBAAsB,GAAGJ,0BAAOC,GAAV,8vBAM/BI,mCAN+B,EAOpB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BC,oBAAYC,MATiB,EAkB3BC,6BAlB2B,EAmBPR,SAAOS,WAnBA,EAsBjBT,SAAOU,WAtBU,EA6B3Bb,eA7B2B,EAqC3BA,eArC2B,CAA5B;;;;AA6CP,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTf,cAMS,QANTA,cAMS;AAAA,MALTgB,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEQ,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEP,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO6B,KAD1D;AAAA,gBAEGV;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEb,cAAxC;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB;AAP5B,OAQgBoB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEQ,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAET;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCjB,EAAAA,c;;eAiIaQ,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n notificationVariant?: 'positive' \| 'critical';\n hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex,\n ...rest\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) \|\|\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) \|\| <>{icon}</>\n );\n };\n\n return (\n <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}\n {...rest}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </ProfileButtonContainer>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}

package/dist/ProfileButton/ProfileButton.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
 import * as React from 'react';
+export declare type ProfileButtonProps = {
+    portraitSrc?: string;
+    icon?: React.ReactNode;
+    initials?: string;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    notificationVariant?: 'positive' | 'critical';
+    hideOnLowWidth?: boolean;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
 export declare const ProfileButtonContainer: import("styled-components").StyledComponent<"div", any, {
     hideOnLowWidth?: boolean | undefined;
 }, never>;

package/dist/ProfileButton/ProfileButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","ProfileButtonContainer","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","Bold","white","Medium"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAWA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAV,gvBAM/BN,uBAN+B,EAOpB,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BR,WAAW,CAACS,MATiB,EAkB3BZ,iBAlB2B,EAmBPH,MAAM,CAACgB,WAnBA,EAsBjBhB,MAAM,CAACiB,WAtBU,EA6B3BR,eA7B2B,EAqC3BA,eArC2B,CAA5B;AA6CP,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTZ,cAMS,QANTA,cAMS;AAAA,MALTa,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACyB,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACkC,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEV,cAAxC;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB;AAP5B,OAQgBiB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACiC,MAA5B;AAAoC,UAAA,OAAO,EAAEP;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,aAAsB,U,EAAa,U;AACnCd,EAAAA,c;;AAiIF,eAAeM,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\~~ntype~~ ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n notificationVariant?: 'positive' \| 'critical';\n hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex,\n ...rest\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) \|\|\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) \|\| <>{icon}</>\n );\n };\n\n return (\n <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}\n {...rest}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </ProfileButtonContainer>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}
1	+ {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","ProfileButtonContainer","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","Bold","white","Medium"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAWA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAV,gvBAM/BN,uBAN+B,EAOpB,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BR,WAAW,CAACS,MATiB,EAkB3BZ,iBAlB2B,EAmBPH,MAAM,CAACgB,WAnBA,EAsBjBhB,MAAM,CAACiB,WAtBU,EA6B3BR,eA7B2B,EAqC3BA,eArC2B,CAA5B;AA6CP,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTZ,cAMS,QANTA,cAMS;AAAA,MALTa,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACyB,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACkC,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEV,cAAxC;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB;AAP5B,OAQgBiB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACiC,MAA5B;AAAoC,UAAA,OAAO,EAAEP;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,aAAsB,U,EAAa,U;AACnCd,EAAAA,c;;AAiIF,eAAeM,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n notificationVariant?: 'positive' \| 'critical';\n hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex,\n ...rest\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) \|\|\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) \|\| <>{icon}</>\n );\n };\n\n return (\n <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}\n {...rest}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </ProfileButtonContainer>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.10.3-dev.19",
+  "version": "1.10.3-dev.21",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [