@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -1,94 +1,146 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { SystemIcons } from '../../icons';
-import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
-import { useLocation } from 'react-router-dom';
-import { IconButton } from '../../Button';
-import { LaerdalLogo } from '../../assets';
-import MobileMenuHeader from './MobileMenuHeader';
-import MobileMenuContent from './MobileMenuContent';
-import { useStackState } from '../../common/StackState';
-import { useMediaMatch } from 'rooks';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
-var MobileFooter = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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"])), COLORS.neutral_200, ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var CustomContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"], ["\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 (_a) {
-    var _b, _c;
-    var show = _a.show, profile = _a.profile, buttons = _a.buttons, label = _a.label, header = _a.header, items = _a.items, footer = _a.footer, action = _a.action, onClose = _a.onClose;
-    var _d = useStackState(), reset = _d.reset, length = _d.length, push = _d.push, pop = _d.pop, peek = _d.peek;
-    var isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
-    var location = useLocation();
-    var onSubMenuOpen = function (menu) {
-        switch (menu === null || menu === void 0 ? void 0 : menu.type) {
-            case 'group':
-                push({
-                    header: {
-                        label: menu.label,
-                        buttons: menu.buttons,
-                    },
-                    content: {
-                        header: menu.header,
-                        items: menu.items,
-                        footer: menu.footer,
-                        action: menu.action,
-                    },
-                    footer: false,
-                });
-                break;
-            case 'custom':
-                push({
-                    header: {
-                        label: menu.label,
-                        buttons: menu.buttons,
-                    },
-                    customContent: menu.custom,
-                    footer: false,
-                });
-                break;
-            default:
-                break;
-        }
-    };
-    React.useEffect(function () {
-        onClose();
-    }, [location]);
-    React.useEffect(function () {
-        isMediumScreen && onClose();
-    }, [isMediumScreen]);
-    React.useEffect(function () {
-        setTimeout(function () {
-            reset({
-                footer: true,
-                header: {
-                    label: label,
-                    buttons: buttons,
-                },
-                content: {
-                    header: header,
-                    items: items,
-                    footer: footer,
-                    action: action,
-                },
-            });
-        }, 300);
-    }, [show]);
-    var current = peek();
-    var switcher = (_c = (_b = current === null || current === void 0 ? void 0 : current.header) === null || _b === void 0 ? void 0 : _b.buttons) === null || _c === void 0 ? void 0 : _c.find(function (a) { return a.type === 'switcher'; });
-    return (React.createElement(Wrapper, null,
-        React.createElement(MobileMenuHeader, { buttons: current === null || current === void 0 ? void 0 : current.header.buttons, onGoBack: length > 1 ? pop : undefined, onSubMenuOpen: onSubMenuOpen, profile: profile, label: current === null || current === void 0 ? void 0 : current.header.label, onClose: onClose }),
-        (current === null || current === void 0 ? void 0 : current.customContent) && React.createElement(CustomContent, null, current === null || current === void 0 ? void 0 : current.customContent()),
-        (current === null || current === void 0 ? void 0 : current.content) && (React.createElement(MobileMenuContent, { header: current === null || current === void 0 ? void 0 : current.content.header, items: current === null || current === void 0 ? void 0 : current.content.items, footer: current === null || current === void 0 ? void 0 : current.content.footer, action: current === null || current === void 0 ? void 0 : current.content.action, onSubMenuOpen: onSubMenuOpen })),
-        (current === null || current === void 0 ? void 0 : current.footer) && (React.createElement(MobileFooter, null,
-            React.createElement(LaerdalLogo, { height: '36px', width: '66px' }),
-            switcher && (React.createElement(React.Fragment, null,
-                React.createElement(SwitcherLabel, { className: 'globalNav-toggler', onClick: function () { return switcher.action && switcher.action() && onClose(); } }, label || 'Switch site'),
-                React.createElement(IconButton, { variant: 'secondary', shape: 'circular', id: "globalNavAppsButton", action: function () { return switcher.action && switcher.action() && onClose(); } },
-                    React.createElement(SystemIcons.SwitchApp, { size: "24px" }))))))));
-};
-export default MobileMenu;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import * as React from 'react';
+import styled from 'styled-components';
+import { SystemIcons } from '../../icons';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES } from '../../styles';
+import { useLocation } from 'react-router-dom';
+import { IconButton } from '../../Button';
+import { LaerdalLogo } from '../../assets';
+import MobileMenuHeader from './MobileMenuHeader';
+import MobileMenuContent from './MobileMenuContent';
+import { useStackState } from '../../common/StackState';
+import { useMediaMatch } from 'rooks';
+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"])), COLORS.neutral_200, ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+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({
+          header: {
+            label: menu.label,
+            buttons: menu.buttons
+          },
+          content: {
+            header: menu.header,
+            items: menu.items,
+            footer: menu.footer,
+            action: menu.action
+          },
+          footer: false
+        });
+        break;
+      case 'custom':
+        push({
+          header: {
+            label: menu.label,
+            buttons: menu.buttons
+          },
+          customContent: menu.custom,
+          footer: false
+        });
+        break;
+      default:
+        break;
+    }
+  };
+  React.useEffect(function () {
+    onClose();
+  }, [location]);
+  React.useEffect(function () {
+    isMediumScreen && onClose();
+  }, [isMediumScreen]);
+  React.useEffect(function () {
+    setTimeout(function () {
+      reset({
+        footer: true,
+        header: {
+          label: label,
+          buttons: buttons
+        },
+        content: {
+          header: header,
+          items: items,
+          footer: footer,
+          action: action
+        }
+      });
+    }, 300);
+  }, [show]);
+  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,
+      onGoBack: length > 1 ? pop : undefined,
+      onSubMenuOpen: onSubMenuOpen,
+      profile: profile,
+      label: current === null || current === void 0 ? void 0 : current.header.label,
+      onClose: onClose
+    }), (current === null || current === void 0 ? void 0 : current.customContent) && /*#__PURE__*/_jsx(CustomContent, {
+      children: current === null || current === void 0 ? void 0 : current.customContent()
+    }), (current === null || current === void 0 ? void 0 : current.content) && /*#__PURE__*/_jsx(MobileMenuContent, {
+      header: current === null || current === void 0 ? void 0 : current.content.header,
+      items: current === null || current === void 0 ? void 0 : current.content.items,
+      footer: current === null || current === void 0 ? void 0 : current.content.footer,
+      action: current === null || current === void 0 ? void 0 : current.content.action,
+      onSubMenuOpen: onSubMenuOpen
+    }), (current === null || current === void 0 ? void 0 : current.footer) && /*#__PURE__*/_jsxs(MobileFooter, {
+      children: [/*#__PURE__*/_jsx(LaerdalLogo, {
+        height: '36px',
+        width: '66px'
+      }), switcher && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SwitcherLabel, {
+          className: 'globalNav-toggler',
+          onClick: function onClick() {
+            return switcher.action && switcher.action() && onClose();
+          },
+          children: label || 'Switch site'
+        }), /*#__PURE__*/_jsx(IconButton, {
+          variant: 'secondary',
+          shape: 'circular',
+          id: "globalNavAppsButton",
+          action: function action() {
+            return switcher.action && switcher.action() && onClose();
+          },
+          children: /*#__PURE__*/_jsx(SystemIcons.SwitchApp, {
+            size: "24px"
+          })
+        })]
+      })]
+    })]
+  });
+};
+MobileMenu.propTypes = {
+  show: _pt.bool,
+  onClose: _pt.func.isRequired
+};
+export default MobileMenu;
+//# sourceMappingURL=MobileMenu.js.map

package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js

@@ -1,89 +1,145 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, } from '../../styles';
-import { Size } from '../../types';
-import { HyperLink } from '../../HyperLink';
-import { useNavigationHelper } from '../../common/NavigationHelper';
-import { MenuItem } from '../../MenuItem';
-import { SystemIcons } from '../../icons';
-import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
-import { useScrollableContainer } from '../../common/ScrollableContainer';
-import { MobileActionContainer } from './MobileActionContainer';
-import { useMediaMatch } from "rooks";
-var MenuItemsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
-var MenuSectionContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"], ["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
-var MenuSectionHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
-var MenuSectionList = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var PinnedContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
-var FooterText = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
-var FooterNote = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", " {\n    ", "\n  }\n"], ["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-var FooterLink = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"], ["\n  a {\n    ", "\n    ", " {\n      ", "\n    }\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
-var FooterContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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"], ["\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 (_a) {
-    var header = _a.header, items = _a.items, footer = _a.footer, action = _a.action, onSubMenuOpen = _a.onSubMenuOpen;
-    var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
-    var _b = useNavigationHelper(), navigate = _b.navigate, isActiveRoute = _b.isActiveRoute;
-    var _c = useScrollableContainer([header, footer, action, items]), scrollContainerRef = _c[0], scrollable = _c[1];
-    var renderItem = function (item, index) {
-        switch (item.type) {
-            case 'section':
-                return (React.createElement(MenuSectionContainer, { key: index },
-                    item.label && React.createElement(MenuSectionHeader, null, item.label),
-                    React.createElement(MenuSectionList, null, item.items.map(function (item, index) { return renderItem(item, index); }))));
-            case 'group':
-                return (React.createElement(MenuItem, { key: index, id: 'menu-item-' + index, size: isSmallScreen ? Size.Medium : Size.Small, active: false, item: {
-                        value: item.label,
-                        disabled: item.disabled,
-                        icon: item.icon,
-                        displayLabel: item.label,
-                        noteLabel: item.note,
-                    }, iconRight: React.createElement(SystemIcons.ArrowDropRight, null), onClickHandler: function (e) {
-                        e.nativeEvent.stopImmediatePropagation();
-                        onSubMenuOpen && onSubMenuOpen(item);
-                    } }));
-            case 'item':
-            default:
-                return (React.createElement(MenuItem, { key: index, id: 'menu-item-' + index, active: !item.external && isActiveRoute(item.to, !!item.exact), size: isSmallScreen ? Size.Medium : Size.Small, item: {
-                        value: item.to,
-                        disabled: item.disabled,
-                        icon: item.icon,
-                        displayLabel: item.label,
-                        noteLabel: item.note,
-                    }, onClickHandler: function (e) {
-                        item.action && item.action(e);
-                        navigate(item.to, !!item.external);
-                    } }));
-        }
-    };
-    return (React.createElement(MobileMenuWrapper, null,
-        React.createElement(ScrollableContainer, { ref: scrollContainerRef, className: scrollable ? 'scrollable' : '' },
-            !!header && (React.createElement(MobileHeaderContainer, null,
-                React.createElement(MobileHeaderText, null, header.header),
-                header.note && React.createElement(MobileHeaderNote, null, header.note))),
-            React.createElement(MenuItemsContainer, null, 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(function (a) { return a.pinned; })) && (React.createElement(PinnedContainer, null,
-            React.createElement(MenuItemsContainer, null, items === null || items === void 0 ? void 0 : items.filter(function (a) { return !!a.pinned; }).map(function (item, index) { return renderItem(item, index); })))),
-        footer && (React.createElement(FooterContainer, null,
-            React.createElement(FooterText, null, footer.header),
-            footer.note && React.createElement(FooterNote, null, footer.note),
-            footer.link && (React.createElement(FooterLink, null,
-                React.createElement(HyperLink, { variant: 'default', id: footer.link.id, target: footer.link.target, onClick: footer.link.onClick, href: footer.link.href }, footer.link.label))))),
-        action && React.createElement(MobileActionContainer, __assign({}, action))));
-};
-export default MobileMenuContent;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_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(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) { _defineProperty(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; }
+import React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
+import { Size } from '../../types';
+import { HyperLink } from '../../HyperLink';
+import { useNavigationHelper } from '../../common/NavigationHelper';
+import { MenuItem } from '../../MenuItem';
+import { SystemIcons } from '../../icons';
+import { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
+import { useScrollableContainer } from '../../common/ScrollableContainer';
+import { MobileActionContainer } from './MobileActionContainer';
+import { useMediaMatch } from "rooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MenuItemsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 8px;\n"])));
+var MenuSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ", ";\n  }\n"])), COLORS.neutral_200);
+var MenuSectionHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 8px 16px 4px 16px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ", ";\n\n  ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
+var MenuSectionList = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+var PinnedContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
+var FooterText = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+var FooterNote = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.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;
+  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(function (item, index) {
+              return renderItem(item, index);
+            })
+          })]
+        }, index);
+      case 'group':
+        return /*#__PURE__*/_jsx(MenuItem, {
+          id: 'menu-item-' + index,
+          size: isSmallScreen ? Size.Medium : Size.Small,
+          active: false,
+          item: {
+            value: item.label,
+            disabled: item.disabled,
+            icon: item.icon,
+            displayLabel: item.label,
+            noteLabel: item.note
+          },
+          iconRight: /*#__PURE__*/_jsx(SystemIcons.ArrowDropRight, {}),
+          onClickHandler: function onClickHandler(e) {
+            e.nativeEvent.stopImmediatePropagation();
+            onSubMenuOpen && onSubMenuOpen(item);
+          }
+        }, index);
+      case 'item':
+      default:
+        return /*#__PURE__*/_jsx(MenuItem, {
+          id: 'menu-item-' + index,
+          active: !item.external && isActiveRoute(item.to, !!item.exact),
+          size: isSmallScreen ? Size.Medium : Size.Small,
+          item: {
+            value: item.to,
+            disabled: item.disabled,
+            icon: item.icon,
+            displayLabel: item.label,
+            noteLabel: item.note
+          },
+          onClickHandler: function onClickHandler(e) {
+            item.action && item.action(e);
+            navigate(item.to, !!item.external);
+          }
+        }, index);
+    }
+  };
+  return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
+    children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
+      ref: scrollContainerRef,
+      className: scrollable ? 'scrollable' : '',
+      children: [!!header && /*#__PURE__*/_jsxs(MobileHeaderContainer, {
+        children: [/*#__PURE__*/_jsx(MobileHeaderText, {
+          children: header.header
+        }), header.note && /*#__PURE__*/_jsx(MobileHeaderNote, {
+          children: header.note
+        })]
+      }), /*#__PURE__*/_jsx(MenuItemsContainer, {
+        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(function (a) {
+      return a.pinned;
+    })) && /*#__PURE__*/_jsx(PinnedContainer, {
+      children: /*#__PURE__*/_jsx(MenuItemsContainer, {
+        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, {
+        children: footer.header
+      }), footer.note && /*#__PURE__*/_jsx(FooterNote, {
+        children: footer.note
+      }), footer.link && /*#__PURE__*/_jsx(FooterLink, {
+        children: /*#__PURE__*/_jsx(HyperLink, {
+          variant: 'default',
+          id: footer.link.id,
+          target: footer.link.target,
+          onClick: footer.link.onClick,
+          href: footer.link.href,
+          children: footer.link.label
+        })
+      })]
+    }), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
+  });
+};
+MobileMenuContent.propTypes = {
+  items: _pt.array,
+  onSubMenuOpen: _pt.func
+};
+export default MobileMenuContent;
+//# sourceMappingURL=MobileMenuContent.js.map