@laerdal/life-react-components 1.11.0-dev.14 → 1.11.0-dev.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/Dropdown/DropdownFilter.cjs +18 -18
  2. package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
  3. package/dist/Dropdown/DropdownFilter.js +18 -18
  4. package/dist/Dropdown/DropdownFilter.js.map +1 -1
  5. package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +12 -2
  6. package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
  7. package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +2 -0
  8. package/dist/GlobalNavigationBar/mobile/CommonStyles.js +5 -2
  9. package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
  10. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +55 -0
  11. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -0
  12. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.d.ts +6 -0
  13. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +36 -0
  14. package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -0
  15. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +28 -51
  16. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
  17. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +25 -47
  18. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
  19. package/dist/GlobalNavigationBar/types.d.ts +3 -1
  20. package/dist/Switcher/MobileCustomMenuContent.cjs +49 -0
  21. package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -0
  22. package/dist/Switcher/MobileCustomMenuContent.d.ts +7 -0
  23. package/dist/Switcher/MobileCustomMenuContent.js +32 -0
  24. package/dist/Switcher/MobileCustomMenuContent.js.map +1 -0
  25. package/dist/Switcher/MobileSwitcherMenu.cjs +13 -4
  26. package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
  27. package/dist/Switcher/MobileSwitcherMenu.d.ts +5 -2
  28. package/dist/Switcher/MobileSwitcherMenu.js +12 -4
  29. package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
  30. package/dist/common/ScrollableContainer.cjs +44 -0
  31. package/dist/common/ScrollableContainer.cjs.map +1 -0
  32. package/dist/common/ScrollableContainer.d.ts +1 -0
  33. package/dist/common/ScrollableContainer.js +28 -0
  34. package/dist/common/ScrollableContainer.js.map +1 -0
  35. package/package.json +1 -1
package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
10
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
13
 
12
14
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -25,19 +27,25 @@ var _HyperLink = require("../../HyperLink");
25
27
 
26
28
  var _reactResponsive = require("react-responsive");
27
29
 
28
- var _Button = require("../../Button");
29
-
30
30
  var _NavigationHelper = require("../../common/NavigationHelper");
31
31
 
32
32
  var _MenuItem = require("../../MenuItem");
33
33
 
34
34
  var _icons = require("../../icons");
35
35
 
36
- var _rooks = require("rooks");
36
+ var _CommonStyles = require("./CommonStyles");
37
+
38
+ var _ScrollableContainer = require("../../common/ScrollableContainer");
39
+
40
+ var _MobileActionContainer = require("./MobileActionContainer");
37
41
 
38
42
  var _jsxRuntime = require("react/jsx-runtime");
39
43
 
40
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
44
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
45
+
46
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
47
+
48
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
41
49
 
42
50
  var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
43
51
 
@@ -45,29 +53,23 @@ var HeaderNote = _styledComponents.default.div(_templateObject2 || (_templateObj
45
53
 
46
54
  var HeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n display: flex;\n flex-direction: column;\n"])), _styles.COLORS.neutral_200);
47
55
 
48
- var ScrollableContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
49
-
50
- var MenuItemsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
56
+ var MenuItemsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
51
57
 
52
- var MenuSectionContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ", ";\n }\n"])), _styles.COLORS.neutral_200);
58
+ var MenuSectionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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);
53
59
 
54
- var MenuSectionHeader = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ", ";\n\n ", "\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_500));
60
+ var MenuSectionHeader = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (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));
55
61
 
56
- var MenuSectionList = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
62
+ var MenuSectionList = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
57
63
 
58
- var PinnedContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
64
+ var PinnedContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px solid ", ";\n"])), _styles.COLORS.neutral_200);
59
65
 
60
- var FooterText = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
66
+ var FooterText = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (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));
61
67
 
62
- var FooterNote = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", " {\n ", "\n }\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ParagraphSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
68
+ var FooterNote = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (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));
63
69
 
64
- var FooterLink = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null));
70
+ var FooterLink = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (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));
65
71
 
66
- var FooterContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_20, _styles.BREAKPOINTS.SMALL);
67
-
68
- var ActionContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n ", " {\n padding: 16px;\n }\n"])), _styles.COLORS.neutral_200, _styles.BREAKPOINTS.SMALL);
69
-
70
- var Wrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n"])));
72
+ var FooterContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (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);
71
73
 
72
74
  var MobileMenuContent = function MobileMenuContent(_ref) {
73
75
  var header = _ref.header,
@@ -83,26 +85,10 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
83
85
  navigate = _useNavigationHelper.navigate,
84
86
  isActiveRoute = _useNavigationHelper.isActiveRoute;
85
87
 
86
- var _React$useState = _react.default.useState(false),
87
- _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
88
- scrollable = _React$useState2[0],
89
- setScrollable = _React$useState2[1];
90
-
91
- var _useDimensionsRef = (0, _rooks.useDimensionsRef)({
92
- updateOnResize: true
93
- }),
94
- _useDimensionsRef2 = (0, _slicedToArray2.default)(_useDimensionsRef, 3),
95
- scrollContainerRef = _useDimensionsRef2[0],
96
- dimensions = _useDimensionsRef2[1],
97
- node = _useDimensionsRef2[2];
98
-
99
- _react.default.useEffect(function () {
100
- var _node$clientHeight, _node$scrollHeight;
101
-
102
- var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
103
- var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
104
- setScrollable(scrollHeight > clientHeight);
105
- }, [header, dimensions, node, footer, action, items]);
88
+ var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([header, footer, action, items]),
89
+ _useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
90
+ scrollContainerRef = _useScrollableContain2[0],
91
+ scrollable = _useScrollableContain2[1];
106
92
 
107
93
  var renderItem = function renderItem(item, index) {
108
94
  switch (item.type) {
@@ -157,8 +143,8 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
157
143
  }
158
144
  };
159
145
 
160
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
161
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollableContainer, {
146
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
147
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.ScrollableContainer, {
162
148
  ref: scrollContainerRef,
163
149
  className: scrollable ? 'scrollable' : '',
164
150
  children: [!!header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderContainer, {
@@ -199,16 +185,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
199
185
  children: footer.link.label
200
186
  })
201
187
  })]
202
- }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionContainer, {
203
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
204
- variant: 'secondary',
205
- size: isSmallScreen ? _types.Size.Medium : _types.Size.Small,
206
- disabled: action.disabled,
207
- icon: action.icon,
208
- onClick: action.action,
209
- children: action.label
210
- })
211
- })]
188
+ }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
212
189
  });
213
190
  };
214
191
 
package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","ScrollableContainer","Size","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","React","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n MenuButton,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuNavigationItemTypeGroup,\n MenuNavigationItemTypeItem,\n MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst ActionContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n header,\n items,\n footer,\n action,\n onSubMenuOpen\n }) => {\n\n const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n const [scrollable, setScrollable] = React.useState(false);\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [header, dimensions, node, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>\n {item.items.map((item, index) => renderItem(item, index))}\n </MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return <MenuItem key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight/>}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}/>\n case 'item':\n default:\n return (\n <MenuItem key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n );\n }\n }\n\n return (\n <Wrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {\n !!header &&\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n }\n <MenuItemsContainer>\n {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </ScrollableContainer>\n {\n items?.some(a => a.pinned) &&\n <PinnedContainer>\n <MenuItemsContainer>\n {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </PinnedContainer>\n\n }\n {\n footer &&\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link &&\n <FooterLink>\n <HyperLink variant={'default'}\n id={footer.link.id}\n target={footer.link.target}\n onClick={footer.link.onClick}\n href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n }\n </FooterContainer>\n }\n {\n action &&\n <ActionContainer>\n <Button variant={'secondary'}\n size={isSmallScreen ? Size.Medium : Size.Small}\n disabled={action.disabled}\n icon={action.icon}\n onClick={action.action}>\n {action.label}\n </Button>\n </ActionContainer>\n }\n </Wrapper>\n )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
1
+ {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["HeaderText","styled","div","ComponentTextStyle","Bold","COLORS","neutral_600","BREAKPOINTS","SMALL","HeaderNote","ParagraphTextStyle","Regular","HeaderContainer","neutral_200","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Size","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.cjs"}
package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js CHANGED
@@ -1,37 +1,40 @@
1
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
1
2
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
3
4
  import _pt from "prop-types";
4
5
 
5
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
6
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
7
+
8
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
9
+
10
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
6
11
 
7
12
  import React from 'react';
8
13
  import styled from 'styled-components';
9
- import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling, scrollBarStyling } from '../../styles';
14
+ import { BREAKPOINTS, COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ParagraphSStyling, ParagraphTextStyle, ParagraphXSStyling } from '../../styles';
10
15
  import { Size } from '../../types';
11
16
  import { HyperLink } from '../../HyperLink';
12
17
  import { useMediaQuery } from 'react-responsive';
13
- import { Button } from '../../Button';
14
18
  import { useNavigationHelper } from '../../common/NavigationHelper';
15
19
  import { MenuItem } from '../../MenuItem';
16
20
  import { SystemIcons } from '../../icons';
17
- import { useDimensionsRef } from 'rooks';
21
+ import { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';
22
+ import { useScrollableContainer } from '../../common/ScrollableContainer';
23
+ import { MobileActionContainer } from './MobileActionContainer';
18
24
  import { jsx as _jsx } from "react/jsx-runtime";
19
25
  import { jsxs as _jsxs } from "react/jsx-runtime";
20
26
  var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
21
27
  var HeaderNote = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n word-break: break-all;\n ", "\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
22
28
  var HeaderContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n display: flex;\n flex-direction: column;\n"])), COLORS.neutral_200);
23
- var ScrollableContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n\n"])), scrollBarStyling(Size.Small));
24
- var MenuItemsContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
25
- var MenuSectionContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ", ";\n }\n"])), COLORS.neutral_200);
26
- var MenuSectionHeader = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ", ";\n\n ", "\n"])), COLORS.neutral_20, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500));
27
- var MenuSectionList = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
28
- var PinnedContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
29
- var FooterText = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
30
- var FooterNote = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
31
- var FooterLink = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
32
- var FooterContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, COLORS.neutral_20, BREAKPOINTS.SMALL);
33
- var ActionContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n ", " {\n padding: 16px;\n }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
34
- var Wrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n"])));
29
+ var MenuItemsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n"])));
30
+ var MenuSectionContainer = styled.div(_templateObject5 || (_templateObject5 = _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);
31
+ var MenuSectionHeader = styled.div(_templateObject6 || (_templateObject6 = _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));
32
+ var MenuSectionList = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
33
+ var PinnedContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n"])), COLORS.neutral_200);
34
+ var FooterText = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
35
+ var FooterNote = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", " {\n ", "\n }\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600), BREAKPOINTS.SMALL, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
36
+ var FooterLink = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n a {\n ", "\n ", " {\n ", "\n }\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null), BREAKPOINTS.SMALL, ComponentSStyling(ComponentTextStyle.Bold, null));
37
+ var FooterContainer = styled.div(_templateObject12 || (_templateObject12 = _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);
35
38
 
36
39
  var MobileMenuContent = function MobileMenuContent(_ref) {
37
40
  var header = _ref.header,
@@ -47,26 +50,10 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
47
50
  navigate = _useNavigationHelper.navigate,
48
51
  isActiveRoute = _useNavigationHelper.isActiveRoute;
49
52
 
50
- var _React$useState = React.useState(false),
51
- _React$useState2 = _slicedToArray(_React$useState, 2),
52
- scrollable = _React$useState2[0],
53
- setScrollable = _React$useState2[1];
54
-
55
- var _useDimensionsRef = useDimensionsRef({
56
- updateOnResize: true
57
- }),
58
- _useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
59
- scrollContainerRef = _useDimensionsRef2[0],
60
- dimensions = _useDimensionsRef2[1],
61
- node = _useDimensionsRef2[2];
62
-
63
- React.useEffect(function () {
64
- var _node$clientHeight, _node$scrollHeight;
65
-
66
- var clientHeight = (_node$clientHeight = node === null || node === void 0 ? void 0 : node.clientHeight) !== null && _node$clientHeight !== void 0 ? _node$clientHeight : 0;
67
- var scrollHeight = (_node$scrollHeight = node === null || node === void 0 ? void 0 : node.scrollHeight) !== null && _node$scrollHeight !== void 0 ? _node$scrollHeight : 0;
68
- setScrollable(scrollHeight > clientHeight);
69
- }, [header, dimensions, node, footer, action, items]);
53
+ var _useScrollableContain = useScrollableContainer([header, footer, action, items]),
54
+ _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
55
+ scrollContainerRef = _useScrollableContain2[0],
56
+ scrollable = _useScrollableContain2[1];
70
57
 
71
58
  var renderItem = function renderItem(item, index) {
72
59
  switch (item.type) {
@@ -121,7 +108,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
121
108
  }
122
109
  };
123
110
 
124
- return /*#__PURE__*/_jsxs(Wrapper, {
111
+ return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
125
112
  children: [/*#__PURE__*/_jsxs(ScrollableContainer, {
126
113
  ref: scrollContainerRef,
127
114
  className: scrollable ? 'scrollable' : '',
@@ -163,16 +150,7 @@ var MobileMenuContent = function MobileMenuContent(_ref) {
163
150
  children: footer.link.label
164
151
  })
165
152
  })]
166
- }), action && /*#__PURE__*/_jsx(ActionContainer, {
167
- children: /*#__PURE__*/_jsx(Button, {
168
- variant: 'secondary',
169
- size: isSmallScreen ? Size.Medium : Size.Small,
170
- disabled: action.disabled,
171
- icon: action.icon,
172
- onClick: action.action,
173
- children: action.label
174
- })
175
- })]
153
+ }), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
176
154
  });
177
155
  };
178
156
 
package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","scrollBarStyling","Size","HyperLink","useMediaQuery","Button","useNavigationHelper","MenuItem","SystemIcons","useDimensionsRef","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","ScrollableContainer","Small","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","ActionContainer","Wrapper","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","useState","scrollable","setScrollable","updateOnResize","scrollContainerRef","dimensions","node","useEffect","clientHeight","scrollHeight","renderItem","item","index","type","label","map","Medium","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AASA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SACEC,WADF,EAEEC,MAFF,EAGEC,iBAHF,EAIEC,iBAJF,EAKEC,kBALF,EAMEC,kBANF,EAOEC,iBAPF,EAQEC,kBARF,EASEC,kBATF,EAUEC,gBAVF,QAWO,cAXP;AAYA,SAAQC,IAAR,QAAmB,aAAnB;AACA,SAAQC,SAAR,QAAwB,iBAAxB;AACA,SAAQC,aAAR,QAA4B,kBAA5B;AACA,SAAQC,MAAR,QAAqB,cAArB;AACA,SAAQC,mBAAR,QAAkC,+BAAlC;AACA,SAAQC,QAAR,QAAuB,gBAAvB;AACA,SAAQC,WAAR,QAA0B,aAA1B;AACA,SAAQC,gBAAR,QAA+B,OAA/B;;;AAGA,IAAMC,UAAU,GAAGnB,MAAM,CAACoB,GAAV,yGACZhB,iBAAiB,CAACC,kBAAkB,CAACgB,IAApB,EAA0BnB,MAAM,CAACoB,WAAjC,CADL,EAEZrB,WAAW,CAACsB,KAFA,EAGVpB,iBAAiB,CAACE,kBAAkB,CAACgB,IAApB,EAA0BnB,MAAM,CAACoB,WAAjC,CAHP,CAAhB;AAMA,IAAME,UAAU,GAAGxB,MAAM,CAACoB,GAAV,4GAEZX,kBAAkB,CAACD,kBAAkB,CAACiB,OAApB,EAA6BvB,MAAM,CAACoB,WAApC,CAFN,CAAhB;AAKA,IAAMI,eAAe,GAAG1B,MAAM,CAACoB,GAAV,+NAIQlB,MAAM,CAACyB,WAJf,CAArB;AAUA,IAAMC,mBAAmB,GAAG5B,MAAM,CAACoB,GAAV,4TAYrBV,gBAAgB,CAACC,IAAI,CAACkB,KAAN,CAZK,CAAzB;AAoBA,IAAMC,kBAAkB,GAAG9B,MAAM,CAACoB,GAAV,kKAAxB;AAOA,IAAMW,oBAAoB,GAAG/B,MAAM,CAACoB,GAAV,sNAOElB,MAAM,CAACyB,WAPT,CAA1B;AAWA,IAAMK,iBAAiB,GAAGhC,MAAM,CAACoB,GAAV,wOAMDlB,MAAM,CAAC+B,UANN,EAQnB7B,iBAAiB,CAACC,kBAAkB,CAACgB,IAApB,EAA0BnB,MAAM,CAACgC,WAAjC,CARE,CAAvB;AAWA,IAAMC,eAAe,GAAGnC,MAAM,CAACoB,GAAV,sHAArB;AAMA,IAAMgB,eAAe,GAAGpC,MAAM,CAACoB,GAAV,yGACKlB,MAAM,CAACyB,WADZ,CAArB;AAIA,IAAMU,UAAU,GAAGrC,MAAM,CAACoB,GAAV,6GACZd,kBAAkB,CAACD,kBAAkB,CAACgB,IAApB,EAA0BnB,MAAM,CAACoB,WAAjC,CADN,EAEZrB,WAAW,CAACsB,KAFA,EAGVnB,iBAAiB,CAACC,kBAAkB,CAACgB,IAApB,EAA0BnB,MAAM,CAACoB,WAAjC,CAHP,CAAhB;AAMA,IAAMgB,UAAU,GAAGtC,MAAM,CAACoB,GAAV,6GACZX,kBAAkB,CAACD,kBAAkB,CAACiB,OAApB,EAA6BvB,MAAM,CAACoB,WAApC,CADN,EAEZrB,WAAW,CAACsB,KAFA,EAGVhB,iBAAiB,CAACC,kBAAkB,CAACiB,OAApB,EAA6BvB,MAAM,CAACoB,WAApC,CAHP,CAAhB;AAMA,IAAMiB,UAAU,GAAGvC,MAAM,CAACoB,GAAV,iIAEVd,kBAAkB,CAACD,kBAAkB,CAACgB,IAApB,EAA0B,IAA1B,CAFR,EAGVpB,WAAW,CAACsB,KAHF,EAIRnB,iBAAiB,CAACC,kBAAkB,CAACgB,IAApB,EAA0B,IAA1B,CAJT,CAAhB;AASA,IAAMmB,eAAe,GAAGxC,MAAM,CAACoB,GAAV,mQAGKlB,MAAM,CAACyB,WAHZ,EAMLzB,MAAM,CAAC+B,UANF,EAQjBhC,WAAW,CAACsB,KARK,CAArB;AAaA,IAAMkB,eAAe,GAAGzC,MAAM,CAACoB,GAAV,8OAGKlB,MAAM,CAACyB,WAHZ,EAOjB1B,WAAW,CAACsB,KAPK,CAArB;AAYA,IAAMmB,OAAO,GAAG1C,MAAM,CAACoB,GAAV,+LAAb;;AAkBA,IAAMuB,iBAAkE,GAAG,SAArEA,iBAAqE,OAMO;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADJC,aACI,QADJA,aACI;AAEhF,MAAMC,aAAa,GAAGpC,aAAa,CAAC;AAACqC,IAAAA,KAAK,EAAEjD,WAAW,CAACsB,KAAZ,CAAkB4B,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;AAAR,GAAD,CAAnC;;AAEA,6BAAkCpC,mBAAmB,EAArD;AAAA,MAAOqC,QAAP,wBAAOA,QAAP;AAAA,MAAiBC,aAAjB,wBAAiBA,aAAjB;;AAEA,wBAAoCtD,KAAK,CAACuD,QAAN,CAAe,KAAf,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,0BAA+CtC,gBAAgB,CAAC;AAACuC,IAAAA,cAAc,EAAE;AAAjB,GAAD,CAA/D;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;AAAA,MAAuCC,IAAvC;;AAEA7D,EAAAA,KAAK,CAAC8D,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAMC,YAAY,yBAAGF,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEE,YAAT,mEAAyB,CAA3C;AACA,QAAMC,YAAY,yBAAGH,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEG,YAAT,mEAAyB,CAA3C;AACAP,IAAAA,aAAa,CAACO,YAAY,GAAGD,YAAhB,CAAb;AACD,GAJD,EAIG,CAAClB,MAAD,EAASe,UAAT,EAAqBC,IAArB,EAA2Bd,MAA3B,EAAmCC,MAAnC,EAA2CF,KAA3C,CAJH;;AAMA,MAAMmB,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAiGC,KAAjG,EAAmH;AACpI,YAAQD,IAAI,CAACE,IAAb;AACE,WAAK,SAAL;AACE,4BACE,MAAC,oBAAD;AAAA,qBACGF,IAAI,CAACG,KAAL,iBAAc,KAAC,iBAAD;AAAA,sBAAoBH,IAAI,CAACG;AAAzB,YADjB,eAEE,KAAC,eAAD;AAAA,sBACGH,IAAI,CAACpB,KAAL,CAAWwB,GAAX,CAAe,UAACJ,IAAD,EAAOC,KAAP;AAAA,qBAAiBF,UAAU,CAACC,IAAD,EAAOC,KAAP,CAA3B;AAAA,aAAf;AADH,YAFF;AAAA,WAA2BA,KAA3B,CADF;;AAQF,WAAK,OAAL;AACE,4BAAO,KAAC,QAAD;AACU,UAAA,EAAE,EAAE,eAAeA,KAD7B;AAEU,UAAA,IAAI,EAAEjB,aAAa,GAAGtC,IAAI,CAAC2D,MAAR,GAAiB3D,IAAI,CAACkB,KAFnD;AAGU,UAAA,MAAM,EAAE,KAHlB;AAIU,UAAA,IAAI,EAAE;AACJ0C,YAAAA,KAAK,EAAEN,IAAI,CAACG,KADR;AAEJI,YAAAA,QAAQ,EAAEP,IAAI,CAACO,QAFX;AAGJC,YAAAA,IAAI,EAAER,IAAI,CAACQ,IAHP;AAIJC,YAAAA,YAAY,EAAET,IAAI,CAACG,KAJf;AAKJO,YAAAA,SAAS,EAAEV,IAAI,CAACW;AALZ,WAJhB;AAWU,UAAA,SAAS,eAAE,KAAC,WAAD,CAAa,cAAb,KAXrB;AAYU,UAAA,cAAc,EAAE,wBAACC,CAAD,EAAO;AACrBA,YAAAA,CAAC,CAACC,WAAF,CAAcC,wBAAd;AACA/B,YAAAA,aAAa,IAAIA,aAAa,CAACiB,IAAD,CAA9B;AACD;AAfX,WAAeC,KAAf,CAAP;;AAgBF,WAAK,MAAL;AACA;AACE,4BACE,KAAC,QAAD;AACU,UAAA,EAAE,EAAE,eAAeA,KAD7B;AAEU,UAAA,MAAM,EAAE,CAACD,IAAI,CAACe,QAAN,IAAkB3B,aAAa,CAACY,IAAI,CAACgB,EAAN,EAAU,CAAC,CAAChB,IAAI,CAACiB,KAAjB,CAFjD;AAGU,UAAA,IAAI,EAAEjC,aAAa,GAAGtC,IAAI,CAAC2D,MAAR,GAAiB3D,IAAI,CAACkB,KAHnD;AAIU,UAAA,IAAI,EAAE;AACJ0C,YAAAA,KAAK,EAAEN,IAAI,CAACgB,EADR;AAEJT,YAAAA,QAAQ,EAAEP,IAAI,CAACO,QAFX;AAGJC,YAAAA,IAAI,EAAER,IAAI,CAACQ,IAHP;AAIJC,YAAAA,YAAY,EAAET,IAAI,CAACG,KAJf;AAKJO,YAAAA,SAAS,EAAEV,IAAI,CAACW;AALZ,WAJhB;AAWU,UAAA,cAAc,EAAE,wBAACC,CAAD,EAAO;AACrBZ,YAAAA,IAAI,CAAClB,MAAL,IAAekB,IAAI,CAAClB,MAAL,CAAY8B,CAAZ,CAAf;AACAzB,YAAAA,QAAQ,CAACa,IAAI,CAACgB,EAAN,EAAU,CAAC,CAAChB,IAAI,CAACe,QAAjB,CAAR;AACD;AAdX,WAAed,KAAf,CADF;AA7BJ;AA+CD,GAhDD;;AAkDA,sBACE,MAAC,OAAD;AAAA,4BACE,MAAC,mBAAD;AAAqB,MAAA,GAAG,EAAER,kBAA1B;AAAqD,MAAA,SAAS,EAAEH,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,iBAEI,CAAC,CAACX,MAAF,iBACA,MAAC,eAAD;AAAA,gCACE,KAAC,UAAD;AAAA,oBAAaA,MAAM,CAACA;AAApB,UADF,EAEGA,MAAM,CAACgC,IAAP,iBAAe,KAAC,UAAD;AAAA,oBAAahC,MAAM,CAACgC;AAApB,UAFlB;AAAA,QAHJ,eAQE,KAAC,kBAAD;AAAA,kBACG/B,KADH,aACGA,KADH,uBACGA,KAAK,CAAEsC,MAAP,CAAc,UAAAC,CAAC;AAAA,iBAAI,CAACA,CAAC,CAACC,MAAP;AAAA,SAAf,EAA8BhB,GAA9B,CAAkC,UAACJ,IAAD,EAAOC,KAAP;AAAA,iBAAiBF,UAAU,CAACC,IAAD,EAAOC,KAAP,CAA3B;AAAA,SAAlC;AADH,QARF;AAAA,MADF,EAcI,CAAArB,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEyC,IAAP,CAAY,UAAAF,CAAC;AAAA,aAAIA,CAAC,CAACC,MAAN;AAAA,KAAb,mBACA,KAAC,eAAD;AAAA,6BACE,KAAC,kBAAD;AAAA,kBACGxC,KADH,aACGA,KADH,uBACGA,KAAK,CAAEsC,MAAP,CAAc,UAAAC,CAAC;AAAA,iBAAI,CAAC,CAACA,CAAC,CAACC,MAAR;AAAA,SAAf,EAA+BhB,GAA/B,CAAmC,UAACJ,IAAD,EAAOC,KAAP;AAAA,iBAAiBF,UAAU,CAACC,IAAD,EAAOC,KAAP,CAA3B;AAAA,SAAnC;AADH;AADF,MAfJ,EAuBIpB,MAAM,iBACN,MAAC,eAAD;AAAA,8BACE,KAAC,UAAD;AAAA,kBAAaA,MAAM,CAACF;AAApB,QADF,EAEGE,MAAM,CAAC8B,IAAP,iBAAe,KAAC,UAAD;AAAA,kBAAa9B,MAAM,CAAC8B;AAApB,QAFlB,EAGG9B,MAAM,CAACyC,IAAP,iBACC,KAAC,UAAD;AAAA,+BACE,KAAC,SAAD;AAAW,UAAA,OAAO,EAAE,SAApB;AACW,UAAA,EAAE,EAAEzC,MAAM,CAACyC,IAAP,CAAYC,EAD3B;AAEW,UAAA,MAAM,EAAE1C,MAAM,CAACyC,IAAP,CAAYE,MAF/B;AAGW,UAAA,OAAO,EAAE3C,MAAM,CAACyC,IAAP,CAAYG,OAHhC;AAIW,UAAA,IAAI,EAAE5C,MAAM,CAACyC,IAAP,CAAYI,IAJ7B;AAAA,oBAKG7C,MAAM,CAACyC,IAAP,CAAYnB;AALf;AADF,QAJJ;AAAA,MAxBJ,EAyCIrB,MAAM,iBACN,KAAC,eAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,OAAO,EAAE,WAAjB;AACQ,QAAA,IAAI,EAAEE,aAAa,GAAGtC,IAAI,CAAC2D,MAAR,GAAiB3D,IAAI,CAACkB,KADjD;AAEQ,QAAA,QAAQ,EAAEkB,MAAM,CAACyB,QAFzB;AAGQ,QAAA,IAAI,EAAEzB,MAAM,CAAC0B,IAHrB;AAIQ,QAAA,OAAO,EAAE1B,MAAM,CAACA,MAJxB;AAAA,kBAKGA,MAAM,CAACqB;AALV;AADF,MA1CJ;AAAA,IADF;AAuDD,CA/HD;;;AAPEvB,EAAAA,K;AAIAG,EAAAA,a;;AAoIF,eAAeL,iBAAf","sourcesContent":["import React from 'react';\nimport {\n MenuButton,\n MenuGroupFooter,\n MenuGroupHeader,\n MenuNavigationItemTypeGroup,\n MenuNavigationItemTypeItem,\n MenuNavigationItemTypeSection\n} from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling\n} from '../../styles';\nimport {Size} from '../../types';\nimport {HyperLink} from '../../HyperLink';\nimport {useMediaQuery} from 'react-responsive';\nimport {Button} from '../../Button';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {MenuItem} from '../../MenuItem';\nimport {SystemIcons} from '../../icons';\nimport {useDimensionsRef} from 'rooks';\n\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\n\nconst ScrollableContainer = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 100%;\n\n &.scrollable {\n margin-right: 6px;\n padding-right: 10px;\n }\n\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 8px;\n }\n\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst ActionContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n box-sizing: border-box;\n flex-flow: column;\n display: flex;\n flex: 1;\n overflow: hidden;\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({\n header,\n items,\n footer,\n action,\n onSubMenuOpen\n }) => {\n\n const isSmallScreen = useMediaQuery({query: BREAKPOINTS.SMALL.replace('@media ', '')});\n\n const {navigate, isActiveRoute} = useNavigationHelper();\n\n const [scrollable, setScrollable] = React.useState(false);\n\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n\n React.useEffect(() => {\n const clientHeight = node?.clientHeight ?? 0;\n const scrollHeight = node?.scrollHeight ?? 0;\n setScrollable(scrollHeight > clientHeight);\n }, [header, dimensions, node, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>\n {item.items.map((item, index) => renderItem(item, index))}\n </MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return <MenuItem key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight/>}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}/>\n case 'item':\n default:\n return (\n <MenuItem key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}/>\n );\n }\n }\n\n return (\n <Wrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {\n !!header &&\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n }\n <MenuItemsContainer>\n {items?.filter(a => !a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </ScrollableContainer>\n {\n items?.some(a => a.pinned) &&\n <PinnedContainer>\n <MenuItemsContainer>\n {items?.filter(a => !!a.pinned).map((item, index) => renderItem(item, index))}\n </MenuItemsContainer>\n </PinnedContainer>\n\n }\n {\n footer &&\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link &&\n <FooterLink>\n <HyperLink variant={'default'}\n id={footer.link.id}\n target={footer.link.target}\n onClick={footer.link.onClick}\n href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n }\n </FooterContainer>\n }\n {\n action &&\n <ActionContainer>\n <Button variant={'secondary'}\n size={isSmallScreen ? Size.Medium : Size.Small}\n disabled={action.disabled}\n icon={action.icon}\n onClick={action.action}>\n {action.label}\n </Button>\n </ActionContainer>\n }\n </Wrapper>\n )\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
1
+ {"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuContent.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ParagraphSStyling","ParagraphTextStyle","ParagraphXSStyling","Size","HyperLink","useMediaQuery","useNavigationHelper","MenuItem","SystemIcons","MobileMenuWrapper","ScrollableContainer","useScrollableContainer","MobileActionContainer","HeaderText","div","Bold","neutral_600","SMALL","HeaderNote","Regular","HeaderContainer","neutral_200","MenuItemsContainer","MenuSectionContainer","MenuSectionHeader","neutral_20","neutral_500","MenuSectionList","PinnedContainer","FooterText","FooterNote","FooterLink","FooterContainer","MobileMenuContent","header","items","footer","action","onSubMenuOpen","isSmallScreen","query","replace","navigate","isActiveRoute","scrollContainerRef","scrollable","renderItem","item","index","type","label","map","Medium","Small","value","disabled","icon","displayLabel","noteLabel","note","e","nativeEvent","stopImmediatePropagation","external","to","exact","filter","a","pinned","some","link","id","target","onClick","href"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MenuButton, MenuGroupFooter, MenuGroupHeader, MenuNavigationItemTypeGroup, MenuNavigationItemTypeItem, MenuNavigationItemTypeSection } from '../types';\nimport styled from 'styled-components';\nimport {\n BREAKPOINTS,\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n ParagraphXSStyling,\n scrollBarStyling,\n} from '../../styles';\nimport { Size } from '../../types';\nimport { HyperLink } from '../../HyperLink';\nimport { useMediaQuery } from 'react-responsive';\nimport { Button } from '../../Button';\nimport { useNavigationHelper } from '../../common/NavigationHelper';\nimport { MenuItem } from '../../MenuItem';\nimport { SystemIcons } from '../../icons';\nimport { useDimensionsRef } from 'rooks';\nimport { MobileMenuWrapper, ScrollableContainer } from './CommonStyles';\nimport { useScrollableContainer } from '../../common/ScrollableContainer';\nimport { MobileActionContainer } from './MobileActionContainer';\n\nconst HeaderText = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst HeaderNote = styled.div`\n word-break: break-all;\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderContainer = styled.div`\n margin: 0 24px;\n padding-bottom: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n`;\n\nconst MenuItemsContainer = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n padding: 8px;\n`;\n\nconst MenuSectionContainer = styled.div`\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n width: 100%;\n\n &.divider {\n border-top: 1px solid ${COLORS.neutral_200};\n }\n`;\n\nconst MenuSectionHeader = styled.div`\n display: flex;\n align-items: center;\n padding: 8px 16px 4px 16px;\n box-sizing: border-box;\n min-height: 32px;\n background-color: ${COLORS.neutral_20};\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst PinnedContainer = styled.div`\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FooterText = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n`;\nconst FooterNote = styled.div`\n ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n ${BREAKPOINTS.SMALL} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\nconst FooterLink = styled.div`\n a {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n ${BREAKPOINTS.SMALL} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n }\n`;\n\nconst FooterContainer = styled.div`\n padding: 8px 16px;\n box-sizing: border-box;\n border-top: 1px solid ${COLORS.neutral_200};\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n\n ${BREAKPOINTS.SMALL} {\n padding: 16px;\n }\n`;\n\ninterface MobileMenuContentProps {\n header?: MenuGroupHeader;\n items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n footer?: MenuGroupFooter;\n action?: MenuButton;\n\n onSubMenuOpen?: (item: MenuNavigationItemTypeGroup) => void;\n}\n\nconst MobileMenuContent: React.FunctionComponent<MobileMenuContentProps> = ({ header, items, footer, action, onSubMenuOpen }) => {\n const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n const { navigate, isActiveRoute } = useNavigationHelper();\n\n const [scrollContainerRef, scrollable] = useScrollableContainer([header, footer, action, items]);\n\n const renderItem = (item: MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection, index: number) => {\n switch (item.type) {\n case 'section':\n return (\n <MenuSectionContainer key={index}>\n {item.label && <MenuSectionHeader>{item.label}</MenuSectionHeader>}\n <MenuSectionList>{item.items.map((item, index) => renderItem(item, index))}</MenuSectionList>\n </MenuSectionContainer>\n );\n case 'group':\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n size={isSmallScreen ? Size.Medium : Size.Small}\n active={false}\n item={{\n value: item.label,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n iconRight={<SystemIcons.ArrowDropRight />}\n onClickHandler={(e) => {\n e.nativeEvent.stopImmediatePropagation();\n onSubMenuOpen && onSubMenuOpen(item);\n }}\n />\n );\n case 'item':\n default:\n return (\n <MenuItem\n key={index}\n id={'menu-item-' + index}\n active={!item.external && isActiveRoute(item.to, !!item.exact)}\n size={isSmallScreen ? Size.Medium : Size.Small}\n item={{\n value: item.to,\n disabled: item.disabled,\n icon: item.icon,\n displayLabel: item.label,\n noteLabel: item.note,\n }}\n onClickHandler={(e) => {\n item.action && item.action(e);\n navigate(item.to, !!item.external);\n }}\n />\n );\n }\n };\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {!!header && (\n <HeaderContainer>\n <HeaderText>{header.header}</HeaderText>\n {header.note && <HeaderNote>{header.note}</HeaderNote>}\n </HeaderContainer>\n )}\n <MenuItemsContainer>{items?.filter((a) => !a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </ScrollableContainer>\n {items?.some((a) => a.pinned) && (\n <PinnedContainer>\n <MenuItemsContainer>{items?.filter((a) => !!a.pinned).map((item, index) => renderItem(item, index))}</MenuItemsContainer>\n </PinnedContainer>\n )}\n {footer && (\n <FooterContainer>\n <FooterText>{footer.header}</FooterText>\n {footer.note && <FooterNote>{footer.note}</FooterNote>}\n {footer.link && (\n <FooterLink>\n <HyperLink variant={'default'} id={footer.link.id} target={footer.link.target} onClick={footer.link.onClick} href={footer.link.href}>\n {footer.link.label}\n </HyperLink>\n </FooterLink>\n )}\n </FooterContainer>\n )}\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n\nexport default MobileMenuContent;\n"],"file":"MobileMenuContent.js"}
package/dist/GlobalNavigationBar/types.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface MenuButton {
12
12
  icon?: React.ReactNode;
13
13
  action: () => void;
14
14
  disabled?: boolean;
15
+ isLoading?: boolean;
16
+ variant?: 'primary' | 'secondary';
15
17
  }
16
18
  export interface MenuGroupFooter {
17
19
  header: string;
@@ -73,7 +75,7 @@ export interface DesktopNavigationMenuProps {
73
75
  action?: MenuButton;
74
76
  reverseRightSideOrder?: boolean;
75
77
  }
76
- export interface MenuNavigationGroup<T = (MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup)> {
78
+ export interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {
77
79
  label: string;
78
80
  note?: string;
79
81
  buttons?: MobileMenuButtonTypes[];
package/dist/Switcher/MobileCustomMenuContent.cjs ADDED
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.MobileCustomMenuContent = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var _react = _interopRequireDefault(require("react"));
17
+
18
+ var _ScrollableContainer = require("../common/ScrollableContainer");
19
+
20
+ var _CommonStyles = require("../GlobalNavigationBar/mobile/CommonStyles");
21
+
22
+ var _MobileActionContainer = require("../GlobalNavigationBar/mobile/MobileActionContainer");
23
+
24
+ var _jsxRuntime = require("react/jsx-runtime");
25
+
26
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
27
+
28
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
29
+
30
+ var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
31
+ var action = _ref.action,
32
+ children = _ref.children;
33
+
34
+ var _useScrollableContain = (0, _ScrollableContainer.useScrollableContainer)([children]),
35
+ _useScrollableContain2 = (0, _slicedToArray2.default)(_useScrollableContain, 2),
36
+ scrollContainerRef = _useScrollableContain2[0],
37
+ scrollable = _useScrollableContain2[1];
38
+
39
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyles.MobileMenuWrapper, {
40
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyles.ScrollableContainer, {
41
+ ref: scrollContainerRef,
42
+ className: scrollable ? 'scrollable' : '',
43
+ children: children
44
+ }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileActionContainer.MobileActionContainer, _objectSpread({}, action))]
45
+ });
46
+ };
47
+
48
+ exports.MobileCustomMenuContent = MobileCustomMenuContent;
49
+ //# sourceMappingURL=MobileCustomMenuContent.cjs.map
package/dist/Switcher/MobileCustomMenuContent.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["MobileCustomMenuContent","action","children","scrollContainerRef","scrollable"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAMO,IAAMA,uBAA8E,GAAG,SAAjFA,uBAAiF,OAA0B;AAAA,MAAvBC,MAAuB,QAAvBA,MAAuB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AACtH,8BAAyC,iDAAuB,CAACA,QAAD,CAAvB,CAAzC;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;;AAEA,sBACE,sBAAC,+BAAD;AAAA,4BACE,qBAAC,iCAAD;AAAqB,MAAA,GAAG,EAAED,kBAA1B;AAAqD,MAAA,SAAS,EAAEC,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,gBACGF;AADH,MADF,EAIGD,MAAM,iBAAI,qBAAC,4CAAD,oBAA2BA,MAA3B,EAJb;AAAA,IADF;AAQD,CAXM","sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton } from '../GlobalNavigationBar';\nimport { MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ action, children }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"file":"MobileCustomMenuContent.cjs"}
package/dist/Switcher/MobileCustomMenuContent.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { MenuButton } from '../GlobalNavigationBar';
3
+ interface MobileCustomMenuContentProps {
4
+ action?: MenuButton;
5
+ }
6
+ export declare const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps>;
7
+ export {};
package/dist/Switcher/MobileCustomMenuContent.js ADDED
@@ -0,0 +1,32 @@
1
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
+ import _pt from "prop-types";
4
+
5
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
6
+
7
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
8
+
9
+ import React from 'react';
10
+ import { useScrollableContainer } from '../common/ScrollableContainer';
11
+ import { MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';
12
+ import { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ export var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
16
+ var action = _ref.action,
17
+ children = _ref.children;
18
+
19
+ var _useScrollableContain = useScrollableContainer([children]),
20
+ _useScrollableContain2 = _slicedToArray(_useScrollableContain, 2),
21
+ scrollContainerRef = _useScrollableContain2[0],
22
+ scrollable = _useScrollableContain2[1];
23
+
24
+ return /*#__PURE__*/_jsxs(MobileMenuWrapper, {
25
+ children: [/*#__PURE__*/_jsx(ScrollableContainer, {
26
+ ref: scrollContainerRef,
27
+ className: scrollable ? 'scrollable' : '',
28
+ children: children
29
+ }), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
30
+ });
31
+ };
32
+ //# sourceMappingURL=MobileCustomMenuContent.js.map
package/dist/Switcher/MobileCustomMenuContent.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"names":["React","useScrollableContainer","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","action","children","scrollContainerRef","scrollable"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,+BAAvC;AAEA,SAASC,iBAAT,EAA4BC,mBAA5B,QAAuD,4CAAvD;AACA,SAASC,qBAAT,QAAsC,qDAAtC;;;AAMA,OAAO,IAAMC,uBAA8E,GAAG,SAAjFA,uBAAiF,OAA0B;AAAA,MAAvBC,MAAuB,QAAvBA,MAAuB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AACtH,8BAAyCN,sBAAsB,CAAC,CAACM,QAAD,CAAD,CAA/D;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,UAA3B;;AAEA,sBACE,MAAC,iBAAD;AAAA,4BACE,KAAC,mBAAD;AAAqB,MAAA,GAAG,EAAED,kBAA1B;AAAqD,MAAA,SAAS,EAAEC,UAAU,GAAG,YAAH,GAAkB,EAA5F;AAAA,gBACGF;AADH,MADF,EAIGD,MAAM,iBAAI,KAAC,qBAAD,oBAA2BA,MAA3B,EAJb;AAAA,IADF;AAQD,CAXM","sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton } from '../GlobalNavigationBar';\nimport { MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ action, children }) => {\n const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n return (\n <MobileMenuWrapper>\n <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n {children}\n </ScrollableContainer>\n {action && <MobileActionContainer {...action} />}\n </MobileMenuWrapper>\n );\n};\n"],"file":"MobileCustomMenuContent.js"}
package/dist/Switcher/MobileSwitcherMenu.cjs CHANGED
@@ -23,6 +23,8 @@ var _MobileMenuHeader = _interopRequireDefault(require("../GlobalNavigationBar/m
23
23
 
24
24
  var _MobileMenuContent = _interopRequireDefault(require("../GlobalNavigationBar/mobile/MobileMenuContent"));
25
25
 
26
+ var _MobileCustomMenuContent = require("./MobileCustomMenuContent");
27
+
26
28
  var _jsxRuntime = require("react/jsx-runtime");
27
29
 
28
30
  var _templateObject;
@@ -38,7 +40,9 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
38
40
  header = _ref.header,
39
41
  note = _ref.note,
40
42
  onMenuClose = _ref.onMenuClose,
41
- items = _ref.items;
43
+ customContent = _ref.customContent,
44
+ items = _ref.items,
45
+ footerAction = _ref.footerAction;
42
46
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
43
47
  role: "menu",
44
48
  "aria-labelledby": "UserMenuButton",
@@ -46,12 +50,16 @@ var MobileSwitcherMenu = function MobileSwitcherMenu(_ref) {
46
50
  onGoBack: onMenuClose,
47
51
  label: label,
48
52
  onClose: onMenuClose
49
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuContent.default, {
53
+ }), items && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileMenuContent.default, {
50
54
  header: {
51
55
  header: header,
52
56
  note: note
53
57
  },
54
- items: items
58
+ items: items,
59
+ action: footerAction
60
+ }), customContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileCustomMenuContent.MobileCustomMenuContent, {
61
+ action: footerAction,
62
+ children: customContent
55
63
  })]
56
64
  });
57
65
  };
@@ -61,7 +69,8 @@ MobileSwitcherMenu.propTypes = {
61
69
  header: _propTypes.default.string.isRequired,
62
70
  note: _propTypes.default.string,
63
71
  onMenuClose: _propTypes.default.func.isRequired,
64
- items: _propTypes.default.array
72
+ items: _propTypes.default.array,
73
+ customContent: _propTypes.default.node
65
74
  };
66
75
  var _default = MobileSwitcherMenu;
67
76
  exports.default = _default;