@laerdal/life-react-components 1.11.0-dev.16 → 1.11.0-dev.17

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -27,43 +25,49 @@ var _HyperLink = require("../../HyperLink");
 
 var _reactResponsive = require("react-responsive");
 
+var _Button = require("../../Button");
+
 var _NavigationHelper = require("../../common/NavigationHelper");
 
 var _MenuItem = require("../../MenuItem");
 
 var _icons = require("../../icons");
 
-var _CommonStyles = require("./CommonStyles");
+var _rooks = require("rooks");
 
-var _ScrollableContainer = require("../../common/ScrollableContainer");
+var _jsxRuntime = require("react/jsx-runtime");
 
-var _MobileActionContainer = require("./MobileActionContainer");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
-var _jsxRuntime = require("react/jsx-runtime");
+var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+var HeaderNote = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  word-break: break-all;\n  ", "\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var HeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), _styles.COLORS.neutral_200);
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var ScrollableContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var MenuItemsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
 
-var MenuItemsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
+var MenuSectionContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_200);
 
-var MenuSectionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_200);
+var MenuSectionHeader = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_500));
 
-var MenuSectionHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_500));
+var MenuSectionList = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 
-var MenuSectionList = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PinnedContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
 
-var PinnedContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
+var FooterText = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
 
-var FooterText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+var FooterNote = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ParagraphSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
 
-var FooterNote = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ParagraphSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
+var FooterLink = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null));
 
-var FooterLink = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null));
+var FooterContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
 
-var FooterContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
+var ActionContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), _styles.COLORS.neutral_200, _styles.BREAKPOINTS.SMALL);
+
+var Wrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
 
 var MobileMenuContent = function MobileMenuContent(_ref) {
   var header = _ref.header,
@@ -79,10 +83,26 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
       navigate = _useNavigationHelper.navigate,
       isActiveRoute = _useNavigationHelper.isActiveRoute;
 
-  var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([header, footer, action, items]),
-      _useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
-      scrollContainerRef = _useScrollableContain2[0],
-      scrollable = _useScrollableContain2[1];
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      scrollable = _React$useState2[0],
+      setScrollable = _React$useState2[1];
+
+  var _useDimensionsRef = (0, _rooks.useDimensionsRef)({
+    updateOnResize: true
+  }),
+      _useDimensionsRef2 = (0, _slicedToArray2.default)(_useDimensionsRef, 3),
+      scrollContainerRef = _useDimensionsRef2[0],
+      dimensions = _useDimensionsRef2[1],
+      node = _useDimensionsRef2[2];
+
+  _react.default.useEffect(function () {
+    var _node$clientHeight, _node$scrollHeight;
+
+    var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
+    var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
+    setScrollable(scrollHeight > clientHeight);
+  }, [header, dimensions, node, footer, action, items]);
 
   var renderItem = function renderItem(item, index) {
     switch (item.type) {
@@ -137,14 +157,14 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
     }
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollableContainer, {
       ref: scrollContainerRef,
       className: scrollable ? 'scrollable' : '',
-      children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileHeaderContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderText, {
+      children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderText, {
           children: header.header
-        }), header.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.MobileHeaderNote, {
+        }), header.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderNote, {
           children: header.note
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemsContainer, {
@@ -179,7 +199,16 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
           children: footer.link.label
         })
       })]
-    }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
+    }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        variant: 'secondary',
+        size: isSmallScreen ? _types.Size.Medium : _types.Size.Small,
+        disabled: action.disabled,
+        icon: action.icon,
+        onClick: action.action,
+        children: action.label
+      })
+    })]
   });
 };
 

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["MenuItemsContainer","styled","div","MenuSectionContainer","COLORS","neutral_200","MenuSectionHeader","neutral_20","ComponentTextStyle","Bold","neutral_500","MenuSectionList","PinnedContainer","FooterText","neutral_600","BREAKPOINTS","SMALL","FooterNote","ParagraphTextStyle","Regular","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Size","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n  const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n  const { navigate, isActiveRoute } = useNavigationHelper();\n\n  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return (\n          <MenuItem\n            key={index}\n            id={'menu-item-' + index}\n            size={isSmallScreen ? Size.Medium : Size.Small}\n            active={false}\n            item={{\n              value: item.label,\n              disabled: item.disabled,\n              icon: item.icon,\n              displayLabel: item.label,\n              noteLabel: item.note,\n            }}\n            iconRight={<SystemIcons.ArrowDropRight />}\n            onClickHandler={(e) => {\n              e.nativeEvent.stopImmediatePropagation();\n              onSubMenuOpen && onSubMenuOpen(item);\n            }}\n          />\n        );\n      case 'item':\n      default:\n        return (\n          <MenuItem\n            key={index}\n            id={'menu-item-' + index}\n            active={!item.external && isActiveRoute(item.to, !!item.exact)}\n            size={isSmallScreen ? Size.Medium : Size.Small}\n            item={{\n              value: item.to,\n              disabled: item.disabled,\n              icon: item.icon,\n              displayLabel: item.label,\n              noteLabel: item.note,\n            }}\n            onClickHandler={(e) => {\n              item.action && item.action(e);\n              navigate(item.to, !!item.external);\n            }}\n          />\n        );\n    }\n  };\n\n  return (\n    <MobileMenuWrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {!!header && (\n          <MobileHeaderContainer>\n            <MobileHeaderText>{header.header}</MobileHeaderText>\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n          </MobileHeaderContainer>\n        )}\n        <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n      </ScrollableContainer>\n      {items?.some((a) => a.pinned) && (\n        <PinnedContainer>\n          <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n        </PinnedContainer>\n      )}\n      {footer && (\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link && (\n            <FooterLink>\n              <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          )}\n        </FooterContainer>\n      )}\n      {action && <MobileActionContainer {...action} />}\n    </MobileMenuWrapper>\n  );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
+{"version":3,"file":"MobileMenuContent.cjs","names":["HeaderText","styled","div","ComponentSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","ComponentMStyling","HeaderNote","ParagraphXSStyling","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","ScrollableContainer","scrollBarStyling","Size","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","ComponentXSStyling","FooterNote","ParagraphSStyling","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","useMediaQuery","query","replace","useNavigationHelper","navigate","isActiveRoute","React","useState","scrollable","setScrollable","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  word-break: break-all;\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={(e) => {\n                      item.action && item.action(e);\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -1,37 +1,37 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
 import React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling } from '../../styles';
+import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling, scrollBarStyling } from '../../styles';
 import { Size } from '../../types';
 import { HyperLink } from '../../HyperLink';
 import { useMediaQuery } from 'react-responsive';
+import { Button } from '../../Button';
 import { useNavigationHelper } from '../../common/NavigationHelper';
 import { MenuItem } from '../../MenuItem';
 import { SystemIcons } from '../../icons';
-import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
-import { useScrollableContainer } from '../../common/ScrollableContainer';
-import { MobileActionContainer } from './MobileActionContainer';
+import { useDimensionsRef } from 'rooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var MenuItemsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
-var MenuSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
-var MenuSectionHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
-var MenuSectionList = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var PinnedContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
-var FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var FooterNote = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
-var FooterLink = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
-var FooterContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
+var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var HeaderNote = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
+var HeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), COLORS.neutral_200);
+var ScrollableContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n\n"])), scrollBarStyling(Size.Small));
+var MenuItemsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
+var MenuSectionContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
+var MenuSectionHeader = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
+var MenuSectionList = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PinnedContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var FooterText = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var FooterNote = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
+var FooterLink = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
+var FooterContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
+var ActionContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
+var Wrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
 
 var MobileMenuContent = function MobileMenuContent(_ref) {
   var header = _ref.header,
@@ -47,10 +47,26 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
       navigate = _useNavigationHelper.navigate,
       isActiveRoute = _useNavigationHelper.isActiveRoute;
 
-  var _useScrollableContain = useScrollableContainer([header, footer, action, items]),
-      _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
-      scrollContainerRef = _useScrollableContain2[0],
-      scrollable = _useScrollableContain2[1];
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      scrollable = _React$useState2[0],
+      setScrollable = _React$useState2[1];
+
+  var _useDimensionsRef = useDimensionsRef({
+    updateOnResize: true
+  }),
+      _useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
+      scrollContainerRef = _useDimensionsRef2[0],
+      dimensions = _useDimensionsRef2[1],
+      node = _useDimensionsRef2[2];
+
+  React.useEffect(function () {
+    var _node$clientHeight, _node$scrollHeight;
+
+    var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
+    var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
+    setScrollable(scrollHeight > clientHeight);
+  }, [header, dimensions, node, footer, action, items]);
 
   var renderItem = function renderItem(item, index) {
     switch (item.type) {
@@ -105,14 +121,14 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
     }
   };
 
-  return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
+  return /*#__PURE__*/_jsxs(Wrapper, {
     children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
       ref: scrollContainerRef,
       className: scrollable ? 'scrollable' : '',
-      children: [!!header && /*#__PURE__*/_jsxs(MobileHeaderContainer, {
-        children: [/*#__PURE__*/_jsx(MobileHeaderText, {
+      children: [!!header && /*#__PURE__*/_jsxs(HeaderContainer, {
+        children: [/*#__PURE__*/_jsx(HeaderText, {
           children: header.header
-        }), header.note && /*#__PURE__*/_jsx(MobileHeaderNote, {
+        }), header.note && /*#__PURE__*/_jsx(HeaderNote, {
           children: header.note
         })]
       }), /*#__PURE__*/_jsx(MenuItemsContainer, {
@@ -147,7 +163,16 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
           children: footer.link.label
         })
       })]
-    }), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
+    }), action && /*#__PURE__*/_jsx(ActionContainer, {
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: 'secondary',
+        size: isSmallScreen ? Size.Medium : Size.Small,
+        disabled: action.disabled,
+        icon: action.icon,
+        onClick: action.action,
+        children: action.label
+      })
+    })]
   });
 };
 

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useMediaQuery","useNavigationHelper","MenuItem","SystemIcons","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","MenuItemsContainer","div","MenuSectionContainer","neutral_200","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","PinnedContainer","FooterText","neutral_600","SMALL","FooterNote","Regular","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n  const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n  const { navigate, isActiveRoute } = useNavigationHelper();\n\n  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return (\n          <MenuItem\n            key={index}\n            id={'menu-item-' + index}\n            size={isSmallScreen ? Size.Medium : Size.Small}\n            active={false}\n            item={{\n              value: item.label,\n              disabled: item.disabled,\n              icon: item.icon,\n              displayLabel: item.label,\n              noteLabel: item.note,\n            }}\n            iconRight={<SystemIcons.ArrowDropRight />}\n            onClickHandler={(e) => {\n              e.nativeEvent.stopImmediatePropagation();\n              onSubMenuOpen && onSubMenuOpen(item);\n            }}\n          />\n        );\n      case 'item':\n      default:\n        return (\n          <MenuItem\n            key={index}\n            id={'menu-item-' + index}\n            active={!item.external && isActiveRoute(item.to, !!item.exact)}\n            size={isSmallScreen ? Size.Medium : Size.Small}\n            item={{\n              value: item.to,\n              disabled: item.disabled,\n              icon: item.icon,\n              displayLabel: item.label,\n              noteLabel: item.note,\n            }}\n            onClickHandler={(e) => {\n              item.action && item.action(e);\n              navigate(item.to, !!item.external);\n            }}\n          />\n        );\n    }\n  };\n\n  return (\n    <MobileMenuWrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {!!header && (\n          <MobileHeaderContainer>\n            <MobileHeaderText>{header.header}</MobileHeaderText>\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n          </MobileHeaderContainer>\n        )}\n        <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n      </ScrollableContainer>\n      {items?.some((a) => a.pinned) && (\n        <PinnedContainer>\n          <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n        </PinnedContainer>\n      )}\n      {footer && (\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link && (\n            <FooterLink>\n              <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          )}\n        </FooterContainer>\n      )}\n      {action && <MobileActionContainer {...action} />}\n    </MobileMenuWrapper>\n  );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
+{"version":3,"file":"MobileMenuContent.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MenuButton,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuNavigationItemTypeGroup,\n  MenuNavigationItemTypeItem,\n  MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n  BREAKPOINTS,\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n  ParagraphXSStyling,\n  scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst HeaderNote = styled.div`\n  word-break: break-all;\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n\n`;\n\nconst MenuItemsContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n  border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nconst FooterNote = styled.div`\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  }\n`;\nconst FooterLink = styled.div`\n  a {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n    ${BREAKPOINTS.SMALL} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n`;\n\nconst FooterContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\nconst Wrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n  header?: MenuGroupHeader;\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n                                                                              header,\n                                                                              items,\n                                                                              footer,\n                                                                              action,\n                                                                              onSubMenuOpen\n                                                                            }) => {\n\n  const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  const [scrollable, setScrollable] = React.useState(false);\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n  React.useEffect(() => {\n    const clientHeight = node?.clientHeight ?? 0;\n    const scrollHeight = node?.scrollHeight ?? 0;\n    setScrollable(scrollHeight > clientHeight);\n  }, [header, dimensions, node, footer, action, items]);\n\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n    switch (item.type) {\n      case 'section':\n        return (\n          <MenuSectionContainer key={index}>\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n            <MenuSectionList>\n              {item.items.map((item, index) => renderItem(item, index))}\n            </MenuSectionList>\n          </MenuSectionContainer>\n        );\n      case 'group':\n        return <MenuItem key={index}\n                         id={'menu-item-' + index}\n                         size={isSmallScreen ? Size.Medium : Size.Small}\n                         active={false}\n                         item={{\n                           value: item.label,\n                           disabled: item.disabled,\n                           icon: item.icon,\n                           displayLabel: item.label,\n                           noteLabel: item.note,\n                         }}\n                         iconRight={<SystemIcons.ArrowDropRight/>}\n                         onClickHandler={(e) => {\n                           e.nativeEvent.stopImmediatePropagation();\n                           onSubMenuOpen && onSubMenuOpen(item);\n                         }}/>\n      case 'item':\n      default:\n        return (\n          <MenuItem key={index}\n                    id={'menu-item-' + index}\n                    active={!item.external && isActiveRoute(item.to, !!item.exact)}\n                    size={isSmallScreen ? Size.Medium : Size.Small}\n                    item={{\n                      value: item.to,\n                      disabled: item.disabled,\n                      icon: item.icon,\n                      displayLabel: item.label,\n                      noteLabel: item.note,\n                    }}\n                    onClickHandler={(e) => {\n                      item.action && item.action(e);\n                      navigate(item.to, !!item.external);\n                    }}/>\n        );\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {\n          !!header &&\n          <HeaderContainer>\n            <HeaderText>{header.header}</HeaderText>\n            {header.note && <HeaderNote>{header.note}</HeaderNote>}\n          </HeaderContainer>\n        }\n        <MenuItemsContainer>\n          {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n        </MenuItemsContainer>\n      </ScrollableContainer>\n      {\n        items?.some(a => a.pinned) &&\n        <PinnedContainer>\n          <MenuItemsContainer>\n            {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n          </MenuItemsContainer>\n        </PinnedContainer>\n\n      }\n      {\n        footer &&\n        <FooterContainer>\n          <FooterText>{footer.header}</FooterText>\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\n          {footer.link &&\n            <FooterLink>\n              <HyperLink variant={'default'}\n                         id={footer.link.id}\n                         target={footer.link.target}\n                         onClick={footer.link.onClick}\n                         href={footer.link.href}>\n                {footer.link.label}\n              </HyperLink>\n            </FooterLink>\n          }\n        </FooterContainer>\n      }\n      {\n        action &&\n        <ActionContainer>\n          <Button variant={'secondary'}\n                  size={isSmallScreen ? Size.Medium : Size.Small}\n                  disabled={action.disabled}\n                  icon={action.icon}\n                  onClick={action.action}>\n            {action.label}\n          </Button>\n        </ActionContainer>\n      }\n    </Wrapper>\n  )\n};\n\nexport default MobileMenuContent;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs

@@ -37,9 +37,9 @@ var _excluded = ["placement", "type", "action"],
 
 var _templateObject, _templateObject2, _templateObject3;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 var MobileMenuHeaderActions = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n"])));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","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"],"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.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"],"file":"MobileMenuHeader.cjs"}
+{"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":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js

@@ -8,9 +8,9 @@ var _excluded = ["placement", "type", "action"],
 
 var _templateObject, _templateObject2, _templateObject3;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 import React from 'react';
 import styled from 'styled-components';