@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -12,34 +12,39 @@ import MobileMenuHeader from './MobileMenuHeader';
 import MobileMenuContent from './MobileMenuContent';
 import { useStackState } from '../../common/StackState';
 import { useMediaMatch } from 'rooks';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
-const SwitcherLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
-const MobileFooter = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ", ";\n\n  ", "\n  ", " {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ", "\n  }\n"])), props => COLORS.getColor('neutral_200', props.theme), props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)), BREAKPOINTS.SMALL, props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)));
-const CustomContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
-const MobileMenu = _ref => {
-  var _current$header;
-  let {
-    show,
-    profile,
-    buttons,
-    label,
-    header,
-    items,
-    footer,
-    action,
-    onClose
-  } = _ref;
-  const {
-    reset,
-    length,
-    push,
-    pop,
-    peek
-  } = useStackState();
-  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
-  const location = useLocation();
-  const onSubMenuOpen = menu => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 320px;\n  z-index: ", ";\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ", " {\n    width: 400px;\n  }\n"])), Z_INDEXES.off_canvas, BREAKPOINTS.SMALL);
+var SwitcherLabel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
+var MobileFooter = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ", ";\n\n  ", "\n  ", " {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ", "\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
+}, BREAKPOINTS.SMALL, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
+});
+var CustomContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+var MobileMenu = function MobileMenu(_ref) {
+  var _current$header, _current$header$butto;
+  var show = _ref.show,
+    profile = _ref.profile,
+    buttons = _ref.buttons,
+    label = _ref.label,
+    header = _ref.header,
+    items = _ref.items,
+    footer = _ref.footer,
+    action = _ref.action,
+    onClose = _ref.onClose;
+  var _useStackState = useStackState(),
+    reset = _useStackState.reset,
+    length = _useStackState.length,
+    push = _useStackState.push,
+    pop = _useStackState.pop,
+    peek = _useStackState.peek;
+  var isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
+  var location = useLocation();
+  var onSubMenuOpen = function onSubMenuOpen(menu) {
     switch (menu === null || menu === void 0 ? void 0 : menu.type) {
       case 'group':
         push({
@@ -70,14 +75,14 @@ const MobileMenu = _ref => {
         break;
     }
   };
-  React.useEffect(() => {
+  React.useEffect(function () {
     onClose();
   }, [location]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     isMediumScreen && onClose();
   }, [isMediumScreen]);
-  React.useEffect(() => {
-    setTimeout(() => {
+  React.useEffect(function () {
+    setTimeout(function () {
       reset({
         footer: true,
         header: {
@@ -93,8 +98,10 @@ const MobileMenu = _ref => {
       });
     }, 300);
   }, [show]);
-  const current = peek();
-  const switcher = current === null || current === void 0 || (_current$header = current.header) === null || _current$header === void 0 || (_current$header = _current$header.buttons) === null || _current$header === void 0 ? void 0 : _current$header.find(a => a.type === 'switcher');
+  var current = peek();
+  var switcher = current === null || current === void 0 ? void 0 : (_current$header = current.header) === null || _current$header === void 0 ? void 0 : (_current$header$butto = _current$header.buttons) === null || _current$header$butto === void 0 ? void 0 : _current$header$butto.find(function (a) {
+    return a.type === 'switcher';
+  });
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [/*#__PURE__*/_jsx(MobileMenuHeader, {
       buttons: current === null || current === void 0 ? void 0 : current.header.buttons,
@@ -118,13 +125,17 @@ const MobileMenu = _ref => {
       }), switcher && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(SwitcherLabel, {
           className: 'globalNav-toggler',
-          onClick: () => switcher.action && switcher.action() && onClose(),
+          onClick: function onClick() {
+            return switcher.action && switcher.action() && onClose();
+          },
           children: label || 'Switch site'
         }), /*#__PURE__*/_jsx(IconButton, {
           variant: 'secondary',
           shape: 'circular',
           id: "globalNavAppsButton",
-          action: () => switcher.action && switcher.action() && onClose(),
+          action: function action() {
+            return switcher.action && switcher.action() && onClose();
+          },
           children: /*#__PURE__*/_jsx(SystemIcons.SwitchApp, {
             size: "24px"
           })

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.js","names":["React","styled","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","off_canvas","SMALL","SwitcherLabel","_templateObject2","MobileFooter","_templateObject3","props","getColor","theme","Bold","CustomContent","_templateObject4","MobileMenu","_ref","_current$header","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","children","onGoBack","undefined","height","width","className","onClick","variant","shape","id","SwitchApp","size","propTypes","_pt","bool","func","isRequired"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../../icons';\r\nimport { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { IconButton } from '../../Button';\r\nimport { LaerdalLogo } from '../../assets';\r\nimport {\r\n  MenuAccountInfo,\r\n  MenuButton,\r\n  MenuNavigationItemTypeGroup,\r\n  MenuGroupFooter,\r\n  MenuGroupHeader,\r\n  MenuIconButton,\r\n  MenuNavigationItemTypeItem,\r\n  MobileNavigationMenuProps,\r\n  ProfileMenu,\r\n  MenuNavigationItemTypeSection,\r\n  MobileMenuButtonTypes,\r\n  MenuSwitcherButton,\r\n  MenuNavigationCustomSubMenu,\r\n} from '../types';\r\nimport MobileMenuHeader from './MobileMenuHeader';\r\nimport MobileMenuContent from './MobileMenuContent';\r\nimport { useStackState } from '../../common/StackState';\r\nimport { useMediaMatch } from 'rooks';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 320px;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n`;\r\n\r\nconst SwitcherLabel = styled.div`\r\n  margin-left: auto;\r\n`;\r\n\r\nconst MobileFooter = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  height: 48px;\r\n\r\n  padding: 0 4px 0 16px;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: 56px;\r\n    padding: 4px 8px 4px 16px;\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nconst CustomContent = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\ntype Props = MobileNavigationMenuProps & {\r\n  profile?: ProfileMenu;\r\n  show?: boolean;\r\n  onClose: () => void;\r\n};\r\n\r\ninterface MenuState {\r\n  header: {\r\n    label?: string;\r\n    buttons?: MobileMenuButtonTypes[];\r\n  };\r\n  content?: {\r\n    header?: MenuGroupHeader;\r\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\r\n    footer?: MenuGroupFooter;\r\n    action?: MenuButton;\r\n  };\r\n  customContent?: () => React.ReactNode;\r\n  footer?: boolean;\r\n}\r\n\r\nconst MobileMenu = ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => {\r\n  const { reset, length, push, pop, peek } = useStackState<MenuState>();\r\n\r\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  const location = useLocation();\r\n\r\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\r\n    switch (menu?.type) {\r\n      case 'group':\r\n        push({\r\n          header: {\r\n            label: menu.label,\r\n            buttons: menu.buttons,\r\n          },\r\n          content: {\r\n            header: menu.header,\r\n            items: menu.items,\r\n            footer: menu.footer,\r\n            action: menu.action,\r\n          },\r\n          footer: false,\r\n        });\r\n        break;\r\n      case 'custom':\r\n        push({\r\n          header: {\r\n            label: menu.label,\r\n            buttons: menu.buttons,\r\n          },\r\n          customContent: menu.custom,\r\n          footer: false,\r\n        });\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    onClose();\r\n  }, [location]);\r\n\r\n  React.useEffect(() => {\r\n    isMediumScreen && onClose();\r\n  }, [isMediumScreen]);\r\n\r\n  React.useEffect(() => {\r\n    setTimeout(() => {\r\n      reset({\r\n        footer: true,\r\n        header: {\r\n          label: label,\r\n          buttons: buttons,\r\n        },\r\n        content: {\r\n          header: header,\r\n          items: items,\r\n          footer: footer,\r\n          action: action,\r\n        },\r\n      });\r\n    }, 300);\r\n  }, [show]);\r\n\r\n  const current = peek();\r\n\r\n  const switcher = current?.header?.buttons?.find((a) => a.type === 'switcher') as MenuSwitcherButton;\r\n\r\n  return (\r\n    <Wrapper>\r\n      <MobileMenuHeader\r\n        buttons={current?.header.buttons}\r\n        onGoBack={length > 1 ? pop : undefined}\r\n        onSubMenuOpen={onSubMenuOpen}\r\n        profile={profile}\r\n        label={current?.header.label}\r\n        onClose={onClose}\r\n      />\r\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\r\n      {current?.content && (\r\n        <MobileMenuContent\r\n          header={current?.content.header}\r\n          items={current?.content.items}\r\n          footer={current?.content.footer}\r\n          action={current?.content.action}\r\n          onSubMenuOpen={onSubMenuOpen}\r\n        />\r\n      )}\r\n\r\n      {current?.footer && (\r\n        <MobileFooter>\r\n          <LaerdalLogo height={'36px'} width={'66px'} />\r\n          {switcher && (\r\n            <>\r\n              <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>\r\n                {label || 'Switch site'}\r\n              </SwitcherLabel>\r\n              <IconButton variant={'secondary'} shape={'circular'} id=\"globalNavAppsButton\" action={() => switcher.action && switcher.action() && onClose()}>\r\n                <SystemIcons.SwitchApp size=\"24px\"/>\r\n              </IconButton>\r\n            </>\r\n          )}\r\n        </MobileFooter>\r\n      )}\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default MobileMenu;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MobileMenu.js","names":["React","styled","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","off_canvas","SMALL","SwitcherLabel","_templateObject2","MobileFooter","_templateObject3","props","getColor","theme","Bold","CustomContent","_templateObject4","MobileMenu","_ref","_current$header","_current$header$butto","show","profile","buttons","label","header","items","footer","action","onClose","_useStackState","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","children","onGoBack","undefined","height","width","className","onClick","variant","shape","id","SwitchApp","size","propTypes","_pt","bool","func","isRequired"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../../icons';\r\nimport { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';\r\nimport { useLocation } from 'react-router-dom';\r\nimport { IconButton } from '../../Button';\r\nimport { LaerdalLogo } from '../../assets';\r\nimport {\r\n  MenuAccountInfo,\r\n  MenuButton,\r\n  MenuNavigationItemTypeGroup,\r\n  MenuGroupFooter,\r\n  MenuGroupHeader,\r\n  MenuIconButton,\r\n  MenuNavigationItemTypeItem,\r\n  MobileNavigationMenuProps,\r\n  ProfileMenu,\r\n  MenuNavigationItemTypeSection,\r\n  MobileMenuButtonTypes,\r\n  MenuSwitcherButton,\r\n  MenuNavigationCustomSubMenu,\r\n} from '../types';\r\nimport MobileMenuHeader from './MobileMenuHeader';\r\nimport MobileMenuContent from './MobileMenuContent';\r\nimport { useStackState } from '../../common/StackState';\r\nimport { useMediaMatch } from 'rooks';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 320px;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n`;\r\n\r\nconst SwitcherLabel = styled.div`\r\n  margin-left: auto;\r\n`;\r\n\r\nconst MobileFooter = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  height: 48px;\r\n\r\n  padding: 0 4px 0 16px;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    height: 56px;\r\n    padding: 4px 8px 4px 16px;\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nconst CustomContent = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\ntype Props = MobileNavigationMenuProps & {\r\n  profile?: ProfileMenu;\r\n  show?: boolean;\r\n  onClose: () => void;\r\n};\r\n\r\ninterface MenuState {\r\n  header: {\r\n    label?: string;\r\n    buttons?: MobileMenuButtonTypes[];\r\n  };\r\n  content?: {\r\n    header?: MenuGroupHeader;\r\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\r\n    footer?: MenuGroupFooter;\r\n    action?: MenuButton;\r\n  };\r\n  customContent?: () => React.ReactNode;\r\n  footer?: boolean;\r\n}\r\n\r\nconst MobileMenu = ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => {\r\n  const { reset, length, push, pop, peek } = useStackState<MenuState>();\r\n\r\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\r\n\r\n  const location = useLocation();\r\n\r\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\r\n    switch (menu?.type) {\r\n      case 'group':\r\n        push({\r\n          header: {\r\n            label: menu.label,\r\n            buttons: menu.buttons,\r\n          },\r\n          content: {\r\n            header: menu.header,\r\n            items: menu.items,\r\n            footer: menu.footer,\r\n            action: menu.action,\r\n          },\r\n          footer: false,\r\n        });\r\n        break;\r\n      case 'custom':\r\n        push({\r\n          header: {\r\n            label: menu.label,\r\n            buttons: menu.buttons,\r\n          },\r\n          customContent: menu.custom,\r\n          footer: false,\r\n        });\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    onClose();\r\n  }, [location]);\r\n\r\n  React.useEffect(() => {\r\n    isMediumScreen && onClose();\r\n  }, [isMediumScreen]);\r\n\r\n  React.useEffect(() => {\r\n    setTimeout(() => {\r\n      reset({\r\n        footer: true,\r\n        header: {\r\n          label: label,\r\n          buttons: buttons,\r\n        },\r\n        content: {\r\n          header: header,\r\n          items: items,\r\n          footer: footer,\r\n          action: action,\r\n        },\r\n      });\r\n    }, 300);\r\n  }, [show]);\r\n\r\n  const current = peek();\r\n\r\n  const switcher = current?.header?.buttons?.find((a) => a.type === 'switcher') as MenuSwitcherButton;\r\n\r\n  return (\r\n    <Wrapper>\r\n      <MobileMenuHeader\r\n        buttons={current?.header.buttons}\r\n        onGoBack={length > 1 ? pop : undefined}\r\n        onSubMenuOpen={onSubMenuOpen}\r\n        profile={profile}\r\n        label={current?.header.label}\r\n        onClose={onClose}\r\n      />\r\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\r\n      {current?.content && (\r\n        <MobileMenuContent\r\n          header={current?.content.header}\r\n          items={current?.content.items}\r\n          footer={current?.content.footer}\r\n          action={current?.content.action}\r\n          onSubMenuOpen={onSubMenuOpen}\r\n        />\r\n      )}\r\n\r\n      {current?.footer && (\r\n        <MobileFooter>\r\n          <LaerdalLogo height={'36px'} width={'66px'} />\r\n          {switcher && (\r\n            <>\r\n              <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>\r\n                {label || 'Switch site'}\r\n              </SwitcherLabel>\r\n              <IconButton variant={'secondary'} shape={'circular'} id=\"globalNavAppsButton\" action={() => switcher.action && switcher.action() && onClose()}>\r\n                <SystemIcons.SwitchApp size=\"24px\"/>\r\n              </IconButton>\r\n            </>\r\n          )}\r\n        </MobileFooter>\r\n      )}\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default MobileMenu;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+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"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
@@ -23,38 +24,60 @@ var _rooks = require("rooks");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const 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"])));
-const 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"])), props => _styles.COLORS.getColor('neutral_200', props.theme));
-const 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"])), props => _styles.COLORS.getColor('neutral_20', props.theme), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme)));
-const MenuSectionList = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
-const PinnedContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid ", ";\n"])), props => _styles.COLORS.getColor('neutral_200', props.theme));
-const FooterText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme)), _styles.BREAKPOINTS.SMALL, props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme)));
-const FooterNote = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme)), _styles.BREAKPOINTS.SMALL, props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme)));
-const 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));
-const 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"])), props => _styles.COLORS.getColor('neutral_200', props.theme), props => _styles.COLORS.getColor('neutral_20', props.theme), _styles.BREAKPOINTS.SMALL);
-const MobileMenuContent = _ref => {
-  let {
-    header,
-    items,
-    footer,
-    action,
-    onSubMenuOpen
-  } = _ref;
-  const isSmallScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.SMALL.replace('@media ', ''));
-  const {
-    navigate,
-    isActiveRoute
-  } = (0, _NavigationHelper.useNavigationHelper)();
-  const [scrollContainerRef, scrollable] = (0, _ScrollableContainer.useScrollableContainer)([header, footer, action, items]);
-  const renderItem = (item, index) => {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(_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"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
+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"])), function (props) {
+  return _styles.COLORS.getColor('neutral_20', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_500', props.theme));
+});
+var MenuSectionList = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PinnedContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  border-top: 1px solid ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
+var FooterText = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
+}, _styles.BREAKPOINTS.SMALL, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
+});
+var FooterNote = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+}, _styles.BREAKPOINTS.SMALL, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+});
+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(_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"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_20', props.theme);
+}, _styles.BREAKPOINTS.SMALL);
+var MobileMenuContent = function MobileMenuContent(_ref) {
+  var header = _ref.header,
+    items = _ref.items,
+    footer = _ref.footer,
+    action = _ref.action,
+    onSubMenuOpen = _ref.onSubMenuOpen;
+  var isSmallScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.SMALL.replace('@media ', ''));
+  var _useNavigationHelper = (0, _NavigationHelper.useNavigationHelper)(),
+    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 renderItem = function renderItem(item, index) {
     switch (item.type) {
       case 'section':
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuSectionContainer, {
           children: [item.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionHeader, {
             children: item.label
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuSectionList, {
-            children: item.items.map((item, index) => renderItem(item, index))
+            children: item.items.map(function (item, index) {
+              return renderItem(item, index);
+            })
           })]
         }, index);
       case 'group':
@@ -70,7 +93,7 @@ const MobileMenuContent = _ref => {
             noteLabel: item.note
           },
           iconRight: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropRight, {}),
-          onClickHandler: e => {
+          onClickHandler: function onClickHandler(e) {
             e.nativeEvent.stopImmediatePropagation();
             onSubMenuOpen && onSubMenuOpen(item);
           }
@@ -88,7 +111,7 @@ const MobileMenuContent = _ref => {
             displayLabel: item.label,
             noteLabel: item.note
           },
-          onClickHandler: e => {
+          onClickHandler: function onClickHandler(e) {
             item.action && item.action(e);
             navigate(item.to, !!item.external);
           }
@@ -106,11 +129,21 @@ const MobileMenuContent = _ref => {
           children: header.note
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(a => !a.pinned).map((item, index) => renderItem(item, index))
+        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
+          return !a.pinned;
+        }).map(function (item, index) {
+          return renderItem(item, index);
+        })
       })]
-    }), (items === null || items === void 0 ? void 0 : items.some(a => a.pinned)) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedContainer, {
+    }), (items === null || items === void 0 ? void 0 : items.some(function (a) {
+      return a.pinned;
+    })) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PinnedContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))
+        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
+          return !!a.pinned;
+        }).map(function (item, index) {
+          return renderItem(item, index);
+        })
       })
     }), footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(FooterContainer, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FooterText, {
@@ -131,8 +164,9 @@ const MobileMenuContent = _ref => {
   });
 };
 MobileMenuContent.propTypes = {
-  items: _propTypes.default.array,
-  onSubMenuOpen: _propTypes.default.func
+  items: _propTypes["default"].array,
+  onSubMenuOpen: _propTypes["default"].func
 };
-var _default = exports.default = MobileMenuContent;
+var _default = MobileMenuContent;
+exports["default"] = _default;
 //# sourceMappingURL=MobileMenuContent.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuContent.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_types","_HyperLink","_NavigationHelper","_MenuItem","_icons","_CommonStyles","_ScrollableContainer","_MobileActionContainer","_rooks","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","MenuItemsContainer","styled","div","_taggedTemplateLiteral2","MenuSectionContainer","props","COLORS","getColor","theme","MenuSectionHeader","ComponentSStyling","ComponentTextStyle","Bold","MenuSectionList","PinnedContainer","FooterText","ComponentXSStyling","BREAKPOINTS","SMALL","FooterNote","Regular","FooterLink","FooterContainer","MobileMenuContent","_ref","header","items","footer","action","onSubMenuOpen","isSmallScreen","useMediaMatch","replace","navigate","isActiveRoute","useNavigationHelper","scrollContainerRef","scrollable","useScrollableContainer","renderItem","item","index","type","jsxs","children","label","jsx","map","MenuItem","id","size","Size","Medium","Small","active","value","disabled","icon","displayLabel","noteLabel","note","iconRight","SystemIcons","ArrowDropRight","onClickHandler","nativeEvent","stopImmediatePropagation","external","to","exact","MobileMenuWrapper","ScrollableContainer","ref","className","MobileHeaderContainer","MobileHeaderText","MobileHeaderNote","a","pinned","some","link","HyperLink","variant","target","onClick","href","MobileActionContainer","propTypes","_propTypes","array","func","_default","exports"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\r\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n} from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { HyperLink } from '../../HyperLink';\r\nimport { useNavigationHelper } from '../../common/NavigationHelper';\r\nimport { MenuItem } from '../../MenuItem';\r\nimport { SystemIcons } from '../../icons';\r\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\r\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\r\nimport { MobileActionContainer } from './MobileActionContainer';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst MenuItemsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  padding: 8px;\r\n`;\r\n\r\nconst MenuSectionContainer = styled.div`\r\n  padding-bottom: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n\r\n  &.divider {\r\n    border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\nconst MenuSectionHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 16px 4px 16px;\r\n  box-sizing: border-box;\r\n  min-height: 32px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nconst MenuSectionList = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n\r\nconst PinnedContainer = styled.div`\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst FooterText = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterNote = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterLink = styled.div`\r\n  a {\r\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n    ${BREAKPOINTS.SMALL} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n  }\r\n`;\r\n\r\nconst FooterContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileMenuContentProps {\r\n  header?: MenuGroupHeader;\r\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\r\n  footer?: MenuGroupFooter;\r\n  action?: MenuButton;\r\n\r\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\r\n}\r\n\r\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  const { navigate, isActiveRoute } = useNavigationHelper();\r\n\r\n  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\r\n\r\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\r\n    switch (item.type) {\r\n      case 'section':\r\n        return (\r\n          <MenuSectionContainer key={index}>\r\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\r\n            <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\r\n          </MenuSectionContainer>\r\n        );\r\n      case 'group':\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            active={false}\r\n            item={{\r\n              value: item.label,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            iconRight={<SystemIcons.ArrowDropRight />}\r\n            onClickHandler={(e) => {\r\n              e.nativeEvent.stopImmediatePropagation();\r\n              onSubMenuOpen && onSubMenuOpen(item);\r\n            }}\r\n          />\r\n        );\r\n      case 'item':\r\n      default:\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            active={!item.external && isActiveRoute(item.to, !!item.exact)}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            item={{\r\n              value: item.to,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            onClickHandler={(e) => {\r\n              item.action && item.action(e);\r\n              navigate(item.to, !!item.external);\r\n            }}\r\n          />\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <MobileMenuWrapper>\r\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\r\n        {!!header && (\r\n          <MobileHeaderContainer>\r\n            <MobileHeaderText>{header.header}</MobileHeaderText>\r\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\r\n          </MobileHeaderContainer>\r\n        )}\r\n        <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n      </ScrollableContainer>\r\n      {items?.some((a) => a.pinned) && (\r\n        <PinnedContainer>\r\n          <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n        </PinnedContainer>\r\n      )}\r\n      {footer && (\r\n        <FooterContainer>\r\n          <FooterText>{footer.header}</FooterText>\r\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\r\n          {footer.link && (\r\n            <FooterLink>\r\n              <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\r\n                {footer.link.label}\r\n              </HyperLink>\r\n            </FooterLink>\r\n          )}\r\n        </FooterContainer>\r\n      )}\r\n      {action && <MobileActionContainer {...action} />}\r\n    </MobileMenuWrapper>\r\n  );\r\n};\r\n\r\nexport default MobileMenuContent;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MobileMenuContent.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_types","_HyperLink","_NavigationHelper","_MenuItem","_icons","_CommonStyles","_ScrollableContainer","_MobileActionContainer","_rooks","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","MenuItemsContainer","styled","div","_taggedTemplateLiteral2","MenuSectionContainer","props","COLORS","getColor","theme","MenuSectionHeader","ComponentSStyling","ComponentTextStyle","Bold","MenuSectionList","PinnedContainer","FooterText","ComponentXSStyling","BREAKPOINTS","SMALL","FooterNote","Regular","FooterLink","FooterContainer","MobileMenuContent","_ref","header","items","footer","action","onSubMenuOpen","isSmallScreen","useMediaMatch","replace","_useNavigationHelper","useNavigationHelper","navigate","isActiveRoute","_useScrollableContain","useScrollableContainer","_useScrollableContain2","_slicedToArray2","scrollContainerRef","scrollable","renderItem","item","index","type","jsxs","children","label","jsx","map","MenuItem","id","size","Size","Medium","Small","active","value","disabled","icon","displayLabel","noteLabel","note","iconRight","SystemIcons","ArrowDropRight","onClickHandler","nativeEvent","stopImmediatePropagation","external","to","exact","MobileMenuWrapper","ScrollableContainer","ref","className","MobileHeaderContainer","MobileHeaderText","MobileHeaderNote","a","pinned","some","link","HyperLink","variant","target","onClick","href","MobileActionContainer","propTypes","_propTypes","array","func","_default","exports"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"sourcesContent":["import React from 'react';\r\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n} from '../../styles';\r\nimport { Size } from '../../types';\r\nimport { HyperLink } from '../../HyperLink';\r\nimport { useNavigationHelper } from '../../common/NavigationHelper';\r\nimport { MenuItem } from '../../MenuItem';\r\nimport { SystemIcons } from '../../icons';\r\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\r\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\r\nimport { MobileActionContainer } from './MobileActionContainer';\r\nimport {useMediaMatch} from \"rooks\";\r\n\r\nconst MenuItemsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  padding: 8px;\r\n`;\r\n\r\nconst MenuSectionContainer = styled.div`\r\n  padding-bottom: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n\r\n  &.divider {\r\n    border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\nconst MenuSectionHeader = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 16px 4px 16px;\r\n  box-sizing: border-box;\r\n  min-height: 32px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nconst MenuSectionList = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n\r\nconst PinnedContainer = styled.div`\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst FooterText = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterNote = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nconst FooterLink = styled.div`\r\n  a {\r\n    ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n    ${BREAKPOINTS.SMALL} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n    }\r\n  }\r\n`;\r\n\r\nconst FooterContainer = styled.div`\r\n  padding: 8px 16px;\r\n  box-sizing: border-box;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    padding: 16px;\r\n  }\r\n`;\r\n\r\ninterface MobileMenuContentProps {\r\n  header?: MenuGroupHeader;\r\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\r\n  footer?: MenuGroupFooter;\r\n  action?: MenuButton;\r\n\r\n  onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\r\n}\r\n\r\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\r\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\r\n\r\n  const { navigate, isActiveRoute } = useNavigationHelper();\r\n\r\n  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\r\n\r\n  const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\r\n    switch (item.type) {\r\n      case 'section':\r\n        return (\r\n          <MenuSectionContainer key={index}>\r\n            {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\r\n            <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\r\n          </MenuSectionContainer>\r\n        );\r\n      case 'group':\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            active={false}\r\n            item={{\r\n              value: item.label,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            iconRight={<SystemIcons.ArrowDropRight />}\r\n            onClickHandler={(e) => {\r\n              e.nativeEvent.stopImmediatePropagation();\r\n              onSubMenuOpen && onSubMenuOpen(item);\r\n            }}\r\n          />\r\n        );\r\n      case 'item':\r\n      default:\r\n        return (\r\n          <MenuItem\r\n            key={index}\r\n            id={'menu-item-' + index}\r\n            active={!item.external && isActiveRoute(item.to, !!item.exact)}\r\n            size={isSmallScreen ? Size.Medium : Size.Small}\r\n            item={{\r\n              value: item.to,\r\n              disabled: item.disabled,\r\n              icon: item.icon,\r\n              displayLabel: item.label,\r\n              noteLabel: item.note,\r\n            }}\r\n            onClickHandler={(e) => {\r\n              item.action && item.action(e);\r\n              navigate(item.to, !!item.external);\r\n            }}\r\n          />\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <MobileMenuWrapper>\r\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\r\n        {!!header && (\r\n          <MobileHeaderContainer>\r\n            <MobileHeaderText>{header.header}</MobileHeaderText>\r\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\r\n          </MobileHeaderContainer>\r\n        )}\r\n        <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n      </ScrollableContainer>\r\n      {items?.some((a) => a.pinned) && (\r\n        <PinnedContainer>\r\n          <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\r\n        </PinnedContainer>\r\n      )}\r\n      {footer && (\r\n        <FooterContainer>\r\n          <FooterText>{footer.header}</FooterText>\r\n          {footer.note && <FooterNote>{footer.note}</FooterNote>}\r\n          {footer.link && (\r\n            <FooterLink>\r\n              <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\r\n                {footer.link.label}\r\n              </HyperLink>\r\n            </FooterLink>\r\n          )}\r\n        </FooterContainer>\r\n      )}\r\n      {action && <MobileActionContainer {...action} />}\r\n    </MobileMenuWrapper>\r\n  );\r\n};\r\n\r\nexport default MobileMenuContent;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -1,4 +1,5 @@
 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;
@@ -16,38 +17,61 @@ import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWr
 import { useScrollableContainer } from '../../common/ScrollableContainer';
 import { MobileActionContainer } from './MobileActionContainer';
 import { useMediaMatch } from "rooks";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MenuItemsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
-const 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"])), props => COLORS.getColor('neutral_200', props.theme));
-const 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"])), props => COLORS.getColor('neutral_20', props.theme), props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme)));
-const MenuSectionList = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-const PinnedContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), props => COLORS.getColor('neutral_200', props.theme));
-const FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), props => ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)), BREAKPOINTS.SMALL, props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)));
-const FooterNote = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)), BREAKPOINTS.SMALL, props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)));
-const FooterLink = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
-const 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"])), props => COLORS.getColor('neutral_200', props.theme), props => COLORS.getColor('neutral_20', props.theme), BREAKPOINTS.SMALL);
-const MobileMenuContent = _ref => {
-  let {
-    header,
-    items,
-    footer,
-    action,
-    onSubMenuOpen
-  } = _ref;
-  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
-  const {
-    navigate,
-    isActiveRoute
-  } = useNavigationHelper();
-  const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);
-  const renderItem = (item, index) => {
+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"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
+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"])), function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_500', props.theme));
+});
+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"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
+var FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
+}, BREAKPOINTS.SMALL, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
+});
+var FooterNote = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), function (props) {
+  return ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+}, BREAKPOINTS.SMALL, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+});
+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"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+}, BREAKPOINTS.SMALL);
+var MobileMenuContent = function MobileMenuContent(_ref) {
+  var header = _ref.header,
+    items = _ref.items,
+    footer = _ref.footer,
+    action = _ref.action,
+    onSubMenuOpen = _ref.onSubMenuOpen;
+  var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
+  var _useNavigationHelper = useNavigationHelper(),
+    navigate = _useNavigationHelper.navigate,
+    isActiveRoute = _useNavigationHelper.isActiveRoute;
+  var _useScrollableContain = useScrollableContainer([header, footer, action, items]),
+    _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
+    scrollContainerRef = _useScrollableContain2[0],
+    scrollable = _useScrollableContain2[1];
+  var renderItem = function renderItem(item, index) {
     switch (item.type) {
       case 'section':
         return /*#__PURE__*/_jsxs(MenuSectionContainer, {
           children: [item.label && /*#__PURE__*/_jsx(MenuSectionHeader, {
             children: item.label
           }), /*#__PURE__*/_jsx(MenuSectionList, {
-            children: item.items.map((item, index) => renderItem(item, index))
+            children: item.items.map(function (item, index) {
+              return renderItem(item, index);
+            })
           })]
         }, index);
       case 'group':
@@ -63,7 +87,7 @@ const MobileMenuContent = _ref => {
             noteLabel: item.note
           },
           iconRight: /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {}),
-          onClickHandler: e => {
+          onClickHandler: function onClickHandler(e) {
             e.nativeEvent.stopImmediatePropagation();
             onSubMenuOpen && onSubMenuOpen(item);
           }
@@ -81,7 +105,7 @@ const MobileMenuContent = _ref => {
             displayLabel: item.label,
             noteLabel: item.note
           },
-          onClickHandler: e => {
+          onClickHandler: function onClickHandler(e) {
             item.action && item.action(e);
             navigate(item.to, !!item.external);
           }
@@ -99,11 +123,21 @@ const MobileMenuContent = _ref => {
           children: header.note
         })]
       }), /*#__PURE__*/_jsx(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(a => !a.pinned).map((item, index) => renderItem(item, index))
+        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
+          return !a.pinned;
+        }).map(function (item, index) {
+          return renderItem(item, index);
+        })
       })]
-    }), (items === null || items === void 0 ? void 0 : items.some(a => a.pinned)) && /*#__PURE__*/_jsx(PinnedContainer, {
+    }), (items === null || items === void 0 ? void 0 : items.some(function (a) {
+      return a.pinned;
+    })) && /*#__PURE__*/_jsx(PinnedContainer, {
       children: /*#__PURE__*/_jsx(MenuItemsContainer, {
-        children: items === null || items === void 0 ? void 0 : items.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))
+        children: items === null || items === void 0 ? void 0 : items.filter(function (a) {
+          return !!a.pinned;
+        }).map(function (item, index) {
+          return renderItem(item, index);
+        })
       })
     }), footer && /*#__PURE__*/_jsxs(FooterContainer, {
       children: [/*#__PURE__*/_jsx(FooterText, {