@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.7

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs

@@ -1,87 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _types = require("../../types");
-
 var _HyperLink = require("../../HyperLink");
-
 var _NavigationHelper = require("../../common/NavigationHelper");
-
 var _MenuItem = require("../../MenuItem");
-
 var _icons = require("../../icons");
-
 var _CommonStyles = require("./CommonStyles");
-
 var _ScrollableContainer = require("../../common/ScrollableContainer");
-
 var _MobileActionContainer = require("./MobileActionContainer");
-
 var _rooks = require("rooks");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 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); 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 = 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 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"])), _styles.COLORS.neutral_200);
-
 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(_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"])), _styles.COLORS.neutral_200);
-
 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(_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(_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"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
-
 var MobileMenuContent = function MobileMenuContent(_ref) {
   var header = _ref.header,
-      items = _ref.items,
-      footer = _ref.footer,
-      action = _ref.action,
-      onSubMenuOpen = _ref.onSubMenuOpen;
+    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;
-
+    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];
-
+    _useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
+    scrollContainerRef = _useScrollableContain2[0],
+    scrollable = _useScrollableContain2[1];
   var renderItem = function renderItem(item, index) {
     switch (item.type) {
       case 'section':
@@ -94,7 +60,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             })
           })]
         }, index);
-
       case 'group':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
           id: 'menu-item-' + index,
@@ -113,7 +78,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             onSubMenuOpen && onSubMenuOpen(item);
           }
         }, index);
-
       case 'item':
       default:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
@@ -134,7 +98,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
         }, index);
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
       ref: scrollContainerRef,
@@ -180,7 +143,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
     }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
   });
 };
-
 MobileMenuContent.propTypes = {
   items: _propTypes.default.array,
   onSubMenuOpen: _propTypes.default.func

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuContent.cjs","names":["MenuItemsContainer","styled","div","MenuSectionContainer","COLORS","neutral_200","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","PinnedContainer","FooterText","ComponentXSStyling","neutral_600","BREAKPOINTS","SMALL","FooterNote","ParagraphXSStyling","ParagraphTextStyle","Regular","ParagraphSStyling","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","useMediaMatch","replace","useNavigationHelper","navigate","isActiveRoute","useScrollableContainer","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"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"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 { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\nimport {useMediaMatch} from \"rooks\";\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 = useMediaMatch(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"],"mappings":"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"}
+{"version":3,"file":"MobileMenuContent.cjs","names":["MenuItemsContainer","styled","div","MenuSectionContainer","COLORS","neutral_200","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","PinnedContainer","FooterText","ComponentXSStyling","neutral_600","BREAKPOINTS","SMALL","FooterNote","ParagraphXSStyling","ParagraphTextStyle","Regular","ParagraphSStyling","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","useMediaMatch","replace","useNavigationHelper","navigate","isActiveRoute","useScrollableContainer","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"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"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 { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\nimport {useMediaMatch} from \"rooks\";\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 = useMediaMatch(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"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -2,13 +2,9 @@ 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); 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 = 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';
 import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling } from '../../styles';
@@ -32,24 +28,20 @@ var FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTempl
 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 MobileMenuContent = function MobileMenuContent(_ref) {
   var header = _ref.header,
-      items = _ref.items,
-      footer = _ref.footer,
-      action = _ref.action,
-      onSubMenuOpen = _ref.onSubMenuOpen;
+    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;
-
+    navigate = _useNavigationHelper.navigate,
+    isActiveRoute = _useNavigationHelper.isActiveRoute;
   var _useScrollableContain = useScrollableContainer([header, footer, action, items]),
-      _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
-      scrollContainerRef = _useScrollableContain2[0],
-      scrollable = _useScrollableContain2[1];
-
+    _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
+    scrollContainerRef = _useScrollableContain2[0],
+    scrollable = _useScrollableContain2[1];
   var renderItem = function renderItem(item, index) {
     switch (item.type) {
       case 'section':
@@ -62,7 +54,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             })
           })]
         }, index);
-
       case 'group':
         return /*#__PURE__*/_jsx(MenuItem, {
           id: 'menu-item-' + index,
@@ -81,7 +72,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
             onSubMenuOpen && onSubMenuOpen(item);
           }
         }, index);
-
       case 'item':
       default:
         return /*#__PURE__*/_jsx(MenuItem, {
@@ -102,7 +92,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
         }, index);
     }
   };
-
   return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
     children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
       ref: scrollContainerRef,
@@ -148,7 +137,6 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
     }), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
   });
 };
-
 MobileMenuContent.propTypes = {
   items: _pt.array,
   onSubMenuOpen: _pt.func

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuContent.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useNavigationHelper","MenuItem","SystemIcons","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","useMediaMatch","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","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"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"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 { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\nimport {useMediaMatch} from \"rooks\";\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 = useMediaMatch(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"],"mappings":"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"}
+{"version":3,"file":"MobileMenuContent.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useNavigationHelper","MenuItem","SystemIcons","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","useMediaMatch","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","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"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"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 { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\nimport {useMediaMatch} from \"rooks\";\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 = useMediaMatch(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"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs

@@ -1,67 +1,42 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MobileMenuHeaderWrapper = exports.MobileMenuHeaderActions = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _breakpoints = _interopRequireDefault(require("../../styles/breakpoints"));
-
 var _Button = require("../../Button");
-
 var _icons = require("../../icons");
-
 var _styles = require("../../styles");
-
 var _ProfileButton = require("../../ProfileButton");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["placement", "type", "action"],
-    _excluded2 = ["placement", "type", "icon", "menu"],
-    _excluded3 = ["placement", "type", "icon", "action"];
-
+  _excluded2 = ["placement", "type", "icon", "menu"],
+  _excluded3 = ["placement", "type", "icon", "action"];
 var _templateObject, _templateObject2, _templateObject3;
-
 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 = 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"])));
-
 exports.MobileMenuHeaderActions = MobileMenuHeaderActions;
-
 var MobileMenuHeaderLabel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (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 MobileMenuHeaderWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ", " {\n    padding: 4px 8px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), _breakpoints.default.SMALL, _breakpoints.default.LARGE);
-
 exports.MobileMenuHeaderWrapper = MobileMenuHeaderWrapper;
-
 var MobileMenuHeader = function MobileMenuHeader(_ref) {
   var onGoBack = _ref.onGoBack,
-      onClose = _ref.onClose,
-      label = _ref.label,
-      profile = _ref.profile,
-      buttons = _ref.buttons,
-      onSubMenuOpen = _ref.onSubMenuOpen;
-
+    onClose = _ref.onClose,
+    label = _ref.label,
+    profile = _ref.profile,
+    buttons = _ref.buttons,
+    onSubMenuOpen = _ref.onSubMenuOpen;
   var buildProfileSubMenu = function buildProfileSubMenu() {
     var _profile$signOut, _profile$signOut2, _profile$signOut3, _profile$signOut4;
-
     return !!profile ? {
       type: 'group',
       label: profile.label,
@@ -83,17 +58,15 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
       })
     } : undefined;
   };
-
   var renderItem = function renderItem(item, index) {
     switch (item.type) {
       case 'profile':
         {
           var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
-
           var placement = item.placement,
-              type = item.type,
-              action = item.action,
-              rest = (0, _objectWithoutProperties2.default)(item, _excluded);
+            type = item.type,
+            action = item.action,
+            rest = (0, _objectWithoutProperties2.default)(item, _excluded);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
             onClick: function onClick(e) {
               e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
@@ -103,15 +76,13 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
             initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
           }, rest), index);
         }
-
       case 'submenu':
         {
           var _placement = item.placement,
-              _type = item.type,
-              icon = item.icon,
-              menu = item.menu,
-              _rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
-
+            _type = item.type,
+            icon = item.icon,
+            menu = item.menu,
+            _rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
             variant: 'secondary',
             shape: 'circular',
@@ -123,15 +94,13 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
             children: item.icon
           }), index);
         }
-
       case 'action':
         {
           var _placement2 = item.placement,
-              _type2 = item.type,
-              _icon = item.icon,
-              _action = item.action,
-              _rest2 = (0, _objectWithoutProperties2.default)(item, _excluded3);
-
+            _type2 = item.type,
+            _icon = item.icon,
+            _action = item.action,
+            _rest2 = (0, _objectWithoutProperties2.default)(item, _excluded3);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({
             disabled: item.disabled,
             variant: 'secondary',
@@ -146,7 +115,6 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
         }
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileMenuHeaderWrapper, {
     children: [onGoBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       action: function action(e) {
@@ -180,7 +148,6 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
     })]
   });
 };
-
 MobileMenuHeader.propTypes = {
   onGoBack: _propTypes.default.func,
   onClose: _propTypes.default.func.isRequired,

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

@@ -1 +1 @@
-{"version":3,"file":"MobileMenuHeader.cjs","names":["MobileMenuHeaderActions","styled","div","MobileMenuHeaderLabel","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","ComponentSStyling","MobileMenuHeaderWrapper","Breakpoints","LARGE","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.LARGE} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        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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"}
+{"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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"}