@learningpool/ui 1.7.6 → 1.7.8

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 (16) hide show
  1. package/assets/Images.js +10 -1
  2. package/components/navigation/VerticalNavigation/VerticalNavigation.js +15 -36
  3. package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js +9 -18
  4. package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.d.ts +0 -33
  5. package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js +7 -18
  6. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js +1 -4
  7. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js +15 -35
  8. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js +10 -38
  9. package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +38 -58
  10. package/components/navigation/helpers.d.ts +22 -0
  11. package/components/navigation/helpers.js +59 -0
  12. package/package.json +1 -1
  13. package/types/utils/themeExtends.d.ts +15 -0
  14. package/types/utils/themeExtends.js +1 -0
  15. package/utils/theme.d.ts +8 -0
  16. package/utils/theme.js +10 -2
package/assets/Images.js CHANGED
@@ -13,7 +13,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import { createSvgIcon } from '@mui/material/utils';
14
14
  export var StreamSuiteLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8" }, { children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) })), 'StreamSuite');
15
15
  export var LearningPoolLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174" }, { children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) })), 'LearningPool');
16
- export var NotchSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-svg' }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), 'Notch');
16
+ // VerticleNavigation Notch SVG
17
+ //
18
+ // This SVG is used to create the cutout notch shape for the VerticleNavigation component.
19
+ // The shape is created using a CSS clip-path that points to the ID value below.
20
+ //
21
+ // Generally, image editing programs will output absolute path values for SVGs.
22
+ // Our notch element needs relative path values to work with 'objectBoundingBox'.
23
+ // So we use this tool to covert the absoulte paths to relative path values:
24
+ // https://yoksel.github.io/relative-clip-path/
25
+ export var NotchSVG = createSvgIcon(_jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: "M0.833,0.253 C0.949,0.227,1,0.164,1,0.094 V0 H0 v0.5 V1 h1 v-0.094 c0,-0.069,-0.051,-0.133,-0.167,-0.159 c-0.207,-0.045,-0.322,-0.145,-0.322,-0.247 C0.509,0.398,0.624,0.298,0.833,0.253" }) })), 'Notch');
17
26
  export var NotchMiniSVG = createSvgIcon(_jsxs("svg", __assign({ className: 'notch-mini-svg', width: "100%", height: "100%", viewBox: "0 0 15 26" }, { children: [_jsx("path", { d: "M15 13.09c0 4.456-3.358 8.069-7.5 8.069-4.142 0-7.5-3.613-7.5-8.07 0-4.456 3.358-8.068 7.5-8.068 4.142 0 7.5 3.612 7.5 8.069Z" }), _jsx("path", { d: "M7.333 26c.167-2.869-1.666-5.2-2.666-5.559H10L7.333 26ZM7.333 0C7.5 2.869 5.667 5.2 4.667 5.559H10L7.333 0Z" })] })), 'NotchMini');
18
27
  export var NotchExtendSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-extend-svg', viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" }) })), 'NotchExtend');
19
28
  export var NotchBackgroundSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-background-svg', viewBox: "0 0 25 865", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "#fff", fillRule: "evenodd", clipRule: "evenodd", d: "M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" }) })), 'NotchBackground');
package/components/navigation/VerticalNavigation/VerticalNavigation.js CHANGED
@@ -37,6 +37,7 @@ import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
37
37
  import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
38
38
  import { animated } from '@react-spring/web';
39
39
  import { defaultMessages } from '../../../lang/en-us';
40
+ import { getNavigationBackground, getNavigationContrastText } from '../helpers';
40
41
  var VerticalNavigation = function (props) {
41
42
  var _a;
42
43
  var theme = useTheme();
@@ -110,11 +111,7 @@ var VerticalNavigation = function (props) {
110
111
  background: 'transparent',
111
112
  fontSize: 0
112
113
  }
113
- }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: {
114
- backgroundColor: theme.palette.mode === 'dark'
115
- ? theme.palette.primary.main
116
- : theme.palette.background.paper
117
- } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
114
+ }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
118
115
  ? typeof logo === 'string'
119
116
  ? (_jsx("img", { src: logo, height: "".concat(logoHeight, "px"), width: "".concat(logoWidth, "px"), style: {
120
117
  marginInlineEnd: '16px'
@@ -124,20 +121,18 @@ var VerticalNavigation = function (props) {
124
121
  height: "".concat(logoHeight, "px"),
125
122
  width: "".concat(logoWidth, "px"),
126
123
  marginInlineEnd: '16px',
127
- fill: theme.palette.mode === 'dark'
128
- ? theme.palette.primary.contrastText
129
- : theme.palette.primary.main
124
+ fill: getNavigationContrastText(theme)
130
125
  } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", isDrawerOpen: isDrawerOpen,
131
126
  // @ts-expect-error
132
127
  component: animated.button, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
133
128
  ? (_jsx(ChevronLeft, { style: {
134
- fill: theme.palette.getContrastText(theme.palette.background.paper),
129
+ fill: getNavigationContrastText(theme),
135
130
  fontSize: '1.75rem',
136
131
  height: '1.75rem',
137
132
  width: '1.75rem'
138
133
  } }))
139
134
  : (_jsx(ChevronRight, { style: {
140
- fill: theme.palette.getContrastText(theme.palette.background.paper),
135
+ fill: getNavigationContrastText(theme),
141
136
  fontSize: '1.75rem',
142
137
  height: '1.75rem',
143
138
  width: '1.75rem'
@@ -160,9 +155,7 @@ var VerticalNavigation = function (props) {
160
155
  zIndex: 10
161
156
  } }, { children: [_jsx(NotchExtendSVG, { style: {
162
157
  display: 'block',
163
- fill: theme.palette.mode === 'dark'
164
- ? theme.palette.primary.main
165
- : theme.palette.background.paper,
158
+ fill: getNavigationBackground(theme),
166
159
  height: '165px',
167
160
  left: '-12px',
168
161
  padding: '0',
@@ -189,37 +182,23 @@ var VerticalNavigation = function (props) {
189
182
  height: '1.3rem',
190
183
  width: '1.3rem'
191
184
  } })) }))] }))] })), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsx("div", __assign({ className: 'wrapper', style: {
192
- backgroundColor: theme.palette.mode === 'dark'
193
- ? theme.palette.primary.main
194
- : theme.palette.background.paper,
185
+ backgroundColor: getNavigationBackground(theme),
195
186
  flex: '1 1px',
196
187
  marginTop: '-1px',
197
188
  overflow: 'auto',
198
- position: 'relative'
189
+ position: 'relative',
190
+ zIndex: 10
199
191
  } }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ style: {
200
192
  height: '100%',
201
193
  width: DRAWER_WIDTH.Expanded,
202
194
  marginTop: "-".concat(theme.spacing(0.5), " !important")
203
- } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: {
204
- backgroundColor: theme.palette.mode === 'dark'
205
- ? theme.palette.primary.main
206
- : theme.palette.background.paper
207
- } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: {
208
- width: DRAWER_WIDTH.Expanded,
209
- backgroundColor: theme.palette.mode === 'dark'
210
- ? theme.palette.primary.main
211
- : theme.palette.background.paper
212
- } }, { children: [hasStreamHome
195
+ } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
213
196
  ? (_jsx(VerticalNavigationItem, { label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: useFadeIn(animationCount, incrementAnimationCount) }))
214
- : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName
215
- ? (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
216
- // backgroundColor: mainTheme.colorButtonText,
217
- // color: mainTheme.colorButton,
218
- fontSize: '0.75rem',
219
- height: 32,
220
- width: 32
221
- } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, useFadeIn(animationCount, incrementAnimationCount)), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))
222
- : null] }))] })) }))] }))); };
197
+ : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
198
+ fontSize: '0.75rem',
199
+ height: 32,
200
+ width: 32
201
+ } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, useFadeIn(animationCount, incrementAnimationCount)), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))] }))] })) }))] }))); };
223
202
  return (_jsxs(StyledAside, __assign({ "aria-label": messages['site-navigation'] }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
224
203
  display: isPersistent ? 'none' : 'block'
225
204
  } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));
package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js CHANGED
@@ -12,8 +12,7 @@ var __assign = (this && this.__assign) || function () {
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import React, { useEffect } from 'react';
14
14
  import { Box, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
15
- import Button from '@mui/material/Button';
16
- import { StyledBox, StyledBoxProfile, StyledButton, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton, StyledButtonGroup } from './VerticalNavigationAvatarStyles';
15
+ import { StyledBox, StyledBoxProfile, StyledButton, StyledAvatarName, StyledAvatar, StyledBoxProfileEdit, StyledListItemButton, StyledButtonGroup } from './VerticalNavigationAvatarStyles';
17
16
  import { useTheme } from '@mui/material/styles';
18
17
  import EditIcon from '@mui/icons-material/Edit';
19
18
  import LogoutIcon from '@mui/icons-material/Logout';
@@ -27,9 +26,9 @@ var AvatarPanel = function (props) {
27
26
  var theme = useTheme();
28
27
  var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization;
29
28
  var messages = __assign(__assign({}, defaultMessages), localization);
30
- useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
31
- avatarName
32
- ]);
29
+ useEffect(function () {
30
+ setAvatarInitials(handleAvatarInitials(avatarName));
31
+ }, [avatarName]);
33
32
  var _b = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _b[0], setAvatarInitials = _b[1];
34
33
  // First item starts at 70ms
35
34
  // see STAGGER_ITEMS_DELAY in helpers.js
@@ -43,34 +42,26 @@ var AvatarPanel = function (props) {
43
42
  alignItems: 'center',
44
43
  display: 'flex',
45
44
  flexDirection: 'column'
46
- } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginInlineEnd: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: messages.greeting })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ marginBottom: theme.spacing(2) }, useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : messages['view-profile'] })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : messages['edit-profile'], onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
45
+ } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginInlineEnd: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: messages.greeting })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ marginBottom: theme.spacing(2) }, useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : messages['view-profile'] })), avatarPanelOnClickEditProfile && (_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : messages['edit-profile'], onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
47
46
  alignItems: 'center',
48
47
  display: 'flex',
49
48
  flexDirection: 'column'
50
49
  } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
51
50
  marginBottom: theme.spacing(2),
52
51
  maxWidth: '14rem'
53
- } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount),
54
- // whileHover={motionWhileHover}
55
- // whileTap={motionWhileTap}
56
- disablePadding: true }, { children: _jsxs(StyledListItemButton
52
+ } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
57
53
  // TODO: figure out if these are links or buttons
58
54
  // @ts-expect-error
59
55
  , __assign({
60
56
  // TODO: figure out if these are links or buttons
61
57
  // @ts-expect-error
62
- component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
63
- minWidth: theme.spacing(5)
64
- } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledOutlineButton
58
+ component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: { minWidth: theme.spacing(5) } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledButton
65
59
  // @ts-expect-error
66
60
  , __assign({
67
61
  // @ts-expect-error
68
- component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true, color: 'primary', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
62
+ component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
69
63
  avatarPanelSettingItems.length > 0 &&
70
- avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount),
71
- // whileHover={motionWhileHover}
72
- // whileTap={motionWhileTap}
73
- disablePadding: true }, { children: _jsxs(StyledListItemButton
64
+ avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
74
65
  // TODO: figure out if these are links or buttons
75
66
  // @ts-expect-error
76
67
  , __assign({
package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.d.ts CHANGED
@@ -3274,39 +3274,6 @@ export declare const StyledAvatarName: import("@emotion/styled").StyledComponent
3274
3274
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
3275
3275
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
3276
3276
  }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3277
- export declare const StyledOutlineButton: import("@emotion/styled").StyledComponent<Pick<{
3278
- children?: import("react").ReactNode;
3279
- classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
3280
- color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
3281
- disabled?: boolean | undefined;
3282
- disableElevation?: boolean | undefined;
3283
- disableFocusRipple?: boolean | undefined;
3284
- endIcon?: import("react").ReactNode;
3285
- fullWidth?: boolean | undefined;
3286
- href?: string | undefined;
3287
- size?: "small" | "large" | "medium" | undefined;
3288
- startIcon?: import("react").ReactNode;
3289
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3290
- variant?: "text" | "outlined" | "contained" | undefined;
3291
- } & Omit<{
3292
- action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
3293
- centerRipple?: boolean | undefined;
3294
- children?: import("react").ReactNode;
3295
- classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
3296
- disabled?: boolean | undefined;
3297
- disableRipple?: boolean | undefined;
3298
- disableTouchRipple?: boolean | undefined;
3299
- focusRipple?: boolean | undefined;
3300
- focusVisibleClassName?: string | undefined;
3301
- LinkComponent?: import("react").ElementType<any> | undefined;
3302
- onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
3303
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3304
- tabIndex?: number | undefined;
3305
- TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
3306
- touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
3307
- }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
3308
- ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
3309
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon">, keyof import("@mui/material/OverridableComponent").CommonProps | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3310
3277
  export declare const StyledButtonGroup: import("@emotion/styled").StyledComponent<{
3311
3278
  children?: import("react").ReactNode;
3312
3279
  classes?: Partial<import("@mui/material").ButtonGroupClasses> | undefined;
package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js CHANGED
@@ -2,30 +2,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
+ /* eslint-disable indent */
5
6
  import { Avatar, Button, ButtonGroup, ListItemButton, Typography } from '../../../index';
6
7
  import { Drawer } from '@mui/material';
7
8
  import { styled } from '@mui/material/styles';
8
9
  import { animated } from '@react-spring/web';
9
- import { lighten, darken } from 'polished';
10
- import { VERTNAV_COLORS } from '../../../utils/constants';
10
+ import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
11
11
  export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiPaper-root {\n height: 100vh;\n border: none;\n z-index: 1;\n }\n"], ["\n .MuiPaper-root {\n height: 100vh;\n border: none;\n z-index: 1;\n }\n"])));
12
12
  export var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
13
- export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
14
- ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
15
- : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
16
- ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
17
- : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
13
+ export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
18
14
  export var StyledBoxProfile = styled(animated.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 2rem;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 2rem;\n"])));
19
15
  export var StyledBoxProfileEdit = styled(animated.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
20
16
  export var StyledAvatarName = styled(Typography)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 1.75rem;\n"], ["\n font-size: 1.75rem;\n"])));
21
- export var StyledOutlineButton = styled(Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
22
- export var StyledButtonGroup = styled(ButtonGroup)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n\n border-style: solid;\n border-left-width: ", ";\n border-right-width: ", ";\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n\n border-style: solid;\n border-left-width: ", ";\n border-right-width: ", ";\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'rtl' ? '1px' : 0; }, function (props) { return props.theme.direction === 'ltr' ? '1px' : 0; });
23
- export var StyledAvatar = styled(Avatar)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"], ["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
24
- ? props.theme.palette.primary.contrastText
25
- : props.theme.palette.primary.main; }, function (props) { return props.theme.palette.mode === 'dark'
26
- ? props.theme.palette.primary.main
27
- : props.theme.palette.primary.contrastText; });
28
- export var StyledListItemButton = styled(ListItemButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"], ["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
29
- ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
30
- : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); });
31
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
17
+ export var StyledButtonGroup = styled(ButtonGroup)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-style: solid;\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-style: solid;\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); });
18
+ export var StyledAvatar = styled(Avatar)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"], ["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); });
19
+ export var StyledListItemButton = styled(ListItemButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"], ["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"])), function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); });
20
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js CHANGED
@@ -89,10 +89,7 @@ var VerticalNavigationItem = function (props) {
89
89
  // @ts-expect-error
90
90
  component: Link, role: 'link', index: index, isDrawerOpen: isDrawerOpen, onClick: function (event) { return handleChildItemClick(event, childItem); } }, { children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
91
91
  '& .MuiTypography-root': {
92
- fontSize: '14px !important',
93
- color: theme.palette.mode === 'dark'
94
- ? theme.palette.primary.contrastText
95
- : theme.palette.getContrastText(theme.palette.background.paper)
92
+ fontSize: '14px !important'
96
93
  }
97
94
  } })] }), label) }))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
98
95
  };
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js CHANGED
@@ -2,11 +2,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
+ /* eslint-disable indent */
5
6
  import { List, ListItem, ListItemButton as SSListItemButton, Paper, Typography, ListItemText } from '../../../../index';
6
7
  import { styled } from '@mui/material/styles';
7
8
  import { NotchMiniSVG } from '../../../../assets/Images';
8
- import { lighten, darken } from 'polished';
9
- import { VERTNAV_COLORS } from '../../../../utils/constants';
9
+ import { getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../../helpers';
10
10
  export var DRAWER_WIDTH = {
11
11
  Collapsed: 60,
12
12
  Expanded: 300
@@ -18,51 +18,31 @@ export var FlyoutMenuPaper = styled(Paper, {
18
18
  : 'auto'; });
19
19
  export var FlyoutMenuWrap = styled('div', {
20
20
  shouldForwardProp: function (prop) { return prop !== 'open'; }
21
- })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
22
- ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
23
- : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
24
- ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
25
- : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
26
- ? "all\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut)
27
- : "all\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); });
21
+ })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
22
+ ? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
23
+ : "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); });
28
24
  export var FlyoutMenuList = styled(List, {
29
25
  shouldForwardProp: function (prop) { return prop !== 'open'; }
30
26
  })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n pointer-events: ", ";\n"], ["\n padding: ", ";\n pointer-events: ", ";\n"])), function (props) { return props.theme.spacing(1, 2); }, function (props) { return props.open ? 'auto' : 'none'; });
31
27
  export var FlyoutMenuHeader = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: bold;\n padding: 12px 0 0;\n padding-inline-end: ", ";\n padding-inline-start: ", ";\n text-align: ", ";\n"], ["\n font-weight: bold;\n padding: 12px 0 0;\n padding-inline-end: ", ";\n padding-inline-start: ", ";\n text-align: ", ";\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.spacing(3); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
32
28
  export var FlyoutMenuItem = styled(ListItem)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: transparent !important;\n font-size: 14px;\n padding: 0;\n white-space: normal;\n"], ["\n background: transparent !important;\n font-size: 14px;\n padding: 0;\n white-space: normal;\n"])));
33
- export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n text-align: ", ";\n"], ["\n text-align: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
29
+ export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n text-align: ", ";\n"], ["\n color: ", ";\n text-align: ", ";\n"])), function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
34
30
  export var FlyoutMenuButton = styled(SSListItemButton, {
35
31
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
36
- })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", ";\n padding: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: ", ";\n right: ", ";\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"], ["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", ";\n padding: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: ", ";\n right: ", ";\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"
32
+ })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all ", "ms ", ";\n padding: ", ";\n width: 100%;\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"], ["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all ", "ms ", ";\n padding: ", ";\n width: 100%;\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"
37
33
  // FullHeight
38
- ])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) {
39
- return props.theme.palette.mode === 'dark'
40
- ? 'rgba(255, 255, 255, 0.5)'
41
- : props.theme.palette.primary.main;
42
- }, function (props) { return props.theme.direction === 'ltr' ? '5px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '5px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
43
- return props.theme.palette.mode === 'dark'
44
- ? props.theme.palette.primary.dark
45
- : '#E6EAF0';
46
- });
34
+ ])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.2); });
47
35
  // FullHeight
48
36
  export var FullHeightFlyoutMenuPaper = styled(Paper, {
49
37
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open'; }
50
38
  })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: transparent none;\n box-shadow: none;\n height: 100%;\n left: ", ";\n right: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n top: 0;\n transition: ", ";\n z-index: 1;\n"], ["\n background: transparent none;\n box-shadow: none;\n height: 100%;\n left: ", ";\n right: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n top: 0;\n transition: ", ";\n z-index: 1;\n"])), function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open
51
- ? "all\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut)
52
- : "all\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); });
39
+ ? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
40
+ : "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); });
53
41
  export var FullHeightFlyoutMenuWrapper = styled('div', {
54
42
  shouldForwardProp: function (prop) { return prop !== 'open'; }
55
- })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
56
- ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
57
- : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
58
- ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
59
- : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
60
- ? "all\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut)
61
- : "all\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
62
- export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n content: '';\n display: block;\n height: 80px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 65px;\n width: 80px;\n z-index: -1;\n"], ["\n background-color: ", ";\n content: '';\n display: block;\n height: 80px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 65px;\n width: 80px;\n z-index: -1;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
63
- ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
64
- : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
65
- export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"], ["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
66
- ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
67
- : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? '-12px' : 0; }, function (props) { return props.theme.direction === 'rtl' ? '-12px' : 0; });
43
+ })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
44
+ ? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
45
+ : "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
46
+ export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n content: '';\n display: block;\n height: 82px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 63px;\n width: 80px;\n z-index: -1;\n"], ["\n background-color: ", ";\n content: '';\n display: block;\n height: 82px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 63px;\n width: 80px;\n z-index: -1;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
47
+ export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"], ["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '-12px' : 0; }, function (props) { return props.theme.direction === 'rtl' ? '-12px' : 0; });
68
48
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js CHANGED
@@ -2,9 +2,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
+ /* eslint-disable indent */
5
6
  import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon } from '../../../../index';
6
7
  import { styled } from '@mui/material/styles';
7
8
  import { ArrowRight } from '@mui/icons-material';
9
+ import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground } from '../../helpers';
8
10
  export var DRAWER_WIDTH = {
9
11
  Collapsed: 60,
10
12
  Expanded: 300
@@ -15,54 +17,24 @@ var ICON = {
15
17
  };
16
18
  export var ListItem = styled(SSListItem, {
17
19
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
18
- })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n color: ", ";\n flex-direction: column;\n min-height: ", "px;\n padding: 0 !important;\n transition: width\n ", "ms\n ", "\n ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"], ["\n align-items: flex-start;\n color: ", ";\n flex-direction: column;\n min-height: ", "px;\n padding: 0 !important;\n transition: width\n ", "ms\n ", "\n ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
19
- ? props.theme.palette.primary.contrastText
20
- : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
20
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n color: ", ";\n flex-direction: column;\n min-height: ", "px;\n padding: 0 !important;\n transition: width ", "ms ", " ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"], ["\n align-items: flex-start;\n color: ", ";\n flex-direction: column;\n min-height: ", "px;\n padding: 0 !important;\n transition: width ", "ms ", " ", ";\n width: ", "px;\n\n .MuiListItemIcon-root: {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root .MuiTypography-root: {\n white-space: normal;\n }\n"])), function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
21
21
  export var ListItemButton = styled(SSListItemButton, {
22
22
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
23
- })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: flex-start !important;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", "\n 0ms !important;\n padding: 0;\n padding-inline-end: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n\n left: ", ";\n right: ", ";\n\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus-visible:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: ", ";\n }\n\n :focus-visible {\n background-color: ", ";\n }\n\n :active {\n background-color: transparent\n }\n"], ["\n align-items: flex-start !important;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", "\n 0ms !important;\n padding: 0;\n padding-inline-end: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n\n left: ", ";\n right: ", ";\n\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus-visible:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: ", ";\n }\n\n :focus-visible {\n background-color: ", ";\n }\n\n :active {\n background-color: transparent\n }\n"])), function (props) {
24
- return props.theme.palette.mode === 'dark'
25
- ? props.theme.palette.primary.main
26
- : props.theme.palette.background.paper;
27
- }, function (props) {
28
- return props.theme.palette.mode === 'dark'
29
- ? props.theme.palette.primary.contrastText
30
- : props.theme.palette.getContrastText(props.theme.palette.background.paper);
31
- }, ICON.Height + 8, function (props) { return props.isDrawerOpen
32
- ? 'auto'
33
- : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) {
34
- return props.theme.palette.mode === 'dark'
35
- ? 'rgba(255, 255, 255, 0.5)'
36
- : props.theme.palette.primary.main;
37
- }, function (props) { return props.theme.direction === 'ltr' ? '3px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '3px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
38
- return props.theme.palette.mode === 'dark'
39
- ? props.theme.palette.primary.main
40
- : props.theme.palette.background.paper;
41
- }, function (props) {
42
- return props.theme.palette.mode === 'dark'
43
- ? props.theme.palette.primary.dark
44
- : '#E6EAF0';
45
- });
23
+ })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: flex-start !important;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-transform: none;\n transition: all ", "ms ", " 0ms !important;\n padding: 0;\n padding-inline-end: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: ", ";\n right: ", ";\n transition: all ", "ms ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover,\n :focus-visible {\n background-color: ", ";\n }\n\n :hover:before,\n :focus-visible:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :active {\n background-color: transparent;\n }\n"], ["\n align-items: flex-start !important;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-transform: none;\n transition: all ", "ms ", " 0ms !important;\n padding: 0;\n padding-inline-end: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: ", ";\n right: ", ";\n transition: all ", "ms ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover,\n :focus-visible {\n background-color: ", ";\n }\n\n :hover:before,\n :focus-visible:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :active {\n background-color: transparent;\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? 'auto' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '3px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '3px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? getOffsetNavigationBackground(props.theme) : 'transparent'; });
46
24
  export var ListItemButtonChild = styled(SSListItemButton, {
47
25
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
48
- })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n min-height: none;\n max-height: none;\n text-decoration: none;\n text-transform: none;\n transition: max-height\n ", "ms\n ", "\n 0ms !important;\n padding: 0;\n width: 100%;\n\n .MuiTypography-root: {\n font-size: .9rem;\n opacity: ", ";\n transition: opacity\n ", "ms\n ", "\n ", "s !important;\n }\n\n .MuiListItemText-root: {\n padding: .25rem .5rem;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n min-height: none;\n max-height: none;\n text-decoration: none;\n text-transform: none;\n transition: max-height\n ", "ms\n ", "\n 0ms !important;\n padding: 0;\n width: 100%;\n\n .MuiTypography-root: {\n font-size: .9rem;\n opacity: ", ";\n transition: opacity\n ", "ms\n ", "\n ", "s !important;\n }\n\n .MuiListItemText-root: {\n padding: .25rem .5rem;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
49
- ? 'rgba(255, 255, 255, 0.75)'
50
- : 'rgba(0, 0, 0, 0.75)'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
26
+ })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n min-height: none;\n max-height: none;\n text-decoration: none;\n text-transform: none;\n transition: max-height ", "ms ", " 0ms !important;\n padding: 0;\n width: 100%;\n\n :hover,\n :focus-visible {\n background-color: ", ";\n }\n\n .MuiTypography-root: {\n font-size: .9rem;\n opacity: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n }\n\n .MuiListItemText-root: {\n padding: .25rem .5rem;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n min-height: none;\n max-height: none;\n text-decoration: none;\n text-transform: none;\n transition: max-height ", "ms ", " 0ms !important;\n padding: 0;\n width: 100%;\n\n :hover,\n :focus-visible {\n background-color: ", ";\n }\n\n .MuiTypography-root: {\n font-size: .9rem;\n opacity: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n }\n\n .MuiListItemText-root: {\n padding: .25rem .5rem;\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
51
27
  export var ListItemAvatar = styled(ListItemButton, {
52
28
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
53
- })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n min-height: 52px;\n max-height: ", ";\n transition: max-height\n ", "ms\n ", "\n 0ms !important;\n\n .MuiListItemIcon-root {\n justify-content: center;\n margin: 0;\n min-width: 0;\n }\n\n .MuiAvatar-root {\n height: 32px;\n width: 32px;\n }\n"], ["\n align-items: center;\n min-height: 52px;\n max-height: ", ";\n transition: max-height\n ", "ms\n ", "\n 0ms !important;\n\n .MuiListItemIcon-root {\n justify-content: center;\n margin: 0;\n min-width: 0;\n }\n\n .MuiAvatar-root {\n height: 32px;\n width: 32px;\n }\n"])), function (props) { return props.isDrawerOpen
54
- ? '200px'
55
- : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
56
- export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n height: ", "px;\n justify-content: center;\n margin-top: 0 !important;\n min-width: ", ";\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n min-width: ", "px;\n width: ", "px;\n }\n"], ["\n align-items: center;\n color: ", ";\n height: ", "px;\n justify-content: center;\n margin-top: 0 !important;\n min-width: ", ";\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n min-width: ", "px;\n width: ", "px;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
57
- ? props.theme.palette.primary.contrastText
58
- : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, ICON.Width, ICON.Width, ICON.Width + 8, ICON.Width + 8);
29
+ })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n min-height: 52px;\n max-height: ", ";\n transition: max-height ", "ms ", " 0ms !important;\n\n .MuiListItemIcon-root {\n justify-content: center;\n margin: 0;\n min-width: 0;\n }\n\n .MuiAvatar-root {\n height: 32px;\n width: 32px;\n }\n"], ["\n align-items: center;\n min-height: 52px;\n max-height: ", ";\n transition: max-height ", "ms ", " 0ms !important;\n\n .MuiListItemIcon-root {\n justify-content: center;\n margin: 0;\n min-width: 0;\n }\n\n .MuiAvatar-root {\n height: 32px;\n width: 32px;\n }\n"])), function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
30
+ export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n height: ", "px;\n justify-content: center;\n margin-top: 0 !important;\n min-width: ", ";\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n min-width: ", "px;\n width: ", "px;\n }\n"], ["\n align-items: center;\n color: ", ";\n height: ", "px;\n justify-content: center;\n margin-top: 0 !important;\n min-width: ", ";\n width: ", ";\n\n [theme.breakpoints.up('sm')] {\n min-width: ", "px;\n width: ", "px;\n }\n"])), function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, ICON.Width, ICON.Width, ICON.Width + 8, ICON.Width + 8);
59
31
  export var ListItemText = styled(SSListItemText, {
60
32
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
61
- })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity\n ", "ms\n ", "\n ", "s !important;\n white-space: normal;\n width: auto;\n"], ["\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity\n ", "ms\n ", "\n ", "s !important;\n white-space: normal;\n width: auto;\n"])), function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
33
+ })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"], ["\n color: ", ";\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
62
34
  export var StyledExpandLess = styled(ArrowRight, {
63
35
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
64
- })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity\n ", "ms\n ", "\n 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity\n ", "ms\n ", "\n 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
36
+ })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", "ms ", " 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", "ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
65
37
  export var StyledExpandMore = styled(ArrowRight, {
66
38
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
67
- })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity\n ", "ms\n ", "\n 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity\n ", "ms\n ", "\n 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
39
+ })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", " 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.easing.easeOut; });
68
40
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js CHANGED
@@ -2,10 +2,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
+ /* eslint-disable indent */
5
6
  import Drawer from '@mui/material/Drawer';
6
7
  import { Box, IconButton } from '../../../index';
7
8
  import { styled } from '@mui/material/styles';
8
9
  import { animated } from '@react-spring/web';
10
+ import { darken, lighten } from 'polished';
11
+ import { VERTNAV_COLORS } from '../../../utils/constants';
12
+ import { getNavigationBackground, getNavigationContrastText } from '../helpers';
9
13
  export var DRAWER_WIDTH = {
10
14
  Collapsed: 60,
11
15
  Expanded: 300
@@ -19,71 +23,47 @@ export var NOTCH = {
19
23
  };
20
24
  export var DrawerHeader = styled(animated.div, {
21
25
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
22
- })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n justify-content: flex-start;\n overflow: hidden;\n min-height: 56px !important;\n padding: ", " 10px 0;\n transition: ", "\n 250ms;\n\n width: ", ";\n\n @media (min-width: ", ") {\n min-height: 64px !important;\n width: ", ";\n };\n\n .MuiListItemIcon-root {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root {\n align-items: center !important;\n color: ", ";\n display: flex;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-dransform: none;\n transition: max-height\n ", "ms\n ", ";\n padding: 0;\n width: 100%;\n\n [theme.breakpoints.up('sm')] {\n max-height: ", ";\n }\n }\n\n .MuiListItemText-root .MuiTypography-root {\n white-space: normal;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n justify-content: flex-start;\n overflow: hidden;\n min-height: 56px !important;\n padding: ", " 10px 0;\n transition: ", "\n 250ms;\n\n width: ", ";\n\n @media (min-width: ", ") {\n min-height: 64px !important;\n width: ", ";\n };\n\n .MuiListItemIcon-root {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root {\n align-items: center !important;\n color: ", ";\n display: flex;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-dransform: none;\n transition: max-height\n ", "ms\n ", ";\n padding: 0;\n width: 100%;\n\n [theme.breakpoints.up('sm')] {\n max-height: ", ";\n }\n }\n\n .MuiListItemText-root .MuiTypography-root {\n white-space: normal;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
23
- ? props.theme.palette.primary.main
24
- : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.isDrawerOpen
25
- ? "width\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut, "\n 0")
26
- : "width\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) {
27
- return props.theme.palette.mode === 'dark'
28
- ? props.theme.palette.primary.contrastText
29
- : props.theme.palette.getContrastText(props.theme.palette.background.paper);
30
- }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
26
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n justify-content: flex-start;\n overflow: hidden;\n min-height: 56px !important;\n padding: ", " 10px 0;\n transition: ", " 250ms;\n width: ", ";\n\n @media (min-width: ", ") {\n min-height: 64px !important;\n width: ", ";\n }\n\n .MuiListItemIcon-root {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root {\n align-items: center !important;\n color: ", ";\n display: flex;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-dransform: none;\n transition: max-height ", "ms ", ";\n padding: 0;\n width: 100%;\n\n [theme.breakpoints.up('sm')] {\n max-height: ", ";\n }\n }\n\n .MuiListItemText-root .MuiTypography-root {\n white-space: normal;\n }\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n justify-content: flex-start;\n overflow: hidden;\n min-height: 56px !important;\n padding: ", " 10px 0;\n transition: ", " 250ms;\n width: ", ";\n\n @media (min-width: ", ") {\n min-height: 64px !important;\n width: ", ";\n }\n\n .MuiListItemIcon-root {\n margin: ", " 0 0;\n }\n\n .MuiListItemText-root {\n align-items: center !important;\n color: ", ";\n display: flex;\n min-height: ", "px;\n max-height: ", ";\n text-decoration: none;\n text-dransform: none;\n transition: max-height ", "ms ", ";\n padding: 0;\n width: 100%;\n\n [theme.breakpoints.up('sm')] {\n max-height: ", ";\n }\n }\n\n .MuiListItemText-root .MuiTypography-root {\n white-space: normal;\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.isDrawerOpen
27
+ ? "width ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut, " 0")
28
+ : "width ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.isDrawerOpen
29
+ ? DRAWER_WIDTH.Expanded
30
+ : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
31
31
  export var DrawerToggle = styled(IconButton, {
32
32
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
33
- })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n transition: all\n ", "ms\n ", ";\n left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 5.5px)) rotate(", ");\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"], ["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n transition: all\n ", "ms\n ", ";\n left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 5.5px)) rotate(", ");\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
34
- export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
35
- ? props.theme.palette.primary.main
36
- : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
33
+ })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n transition: all ", "ms ", ";\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"], ["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n transition: all ", "ms ", ";\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
34
+ export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(0.5); });
37
35
  export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
38
- export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: backgroundColor\n ", "ms\n ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
39
- ? props.theme.palette.primary.main
40
- : props.theme.palette.background.paper; }, function (props) {
41
- return props.theme.palette.mode === 'dark'
42
- ? 'rgba(255, 255, 255, 0.12) transparent'
43
- : 'rgba(0, 0, 0, 0.12) transparent';
44
- }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
45
- return props.theme.palette.mode === 'dark'
46
- ? 'rgba(255, 255, 255, 0.24) transparent'
47
- : 'rgba(0, 0, 0, 0.24) transparent';
48
- }, function (props) {
49
- return props.theme.palette.mode === 'dark'
50
- ? 'rgba(255, 255, 255, 0.12)'
51
- : 'rgba(0, 0, 0, 0.12)';
52
- }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
53
- return props.theme.palette.mode === 'dark'
54
- ? 'rgba(255, 255, 255, 0.24)'
55
- : 'rgba(0, 0, 0, 0.24)';
56
- });
57
- export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"])), function (props) { return props.theme.palette.mode === 'dark'
58
- ? props.theme.palette.primary.main
59
- : props.theme.palette.background.paper; });
36
+ export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color ", "ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color ", "ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
37
+ ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 2, props.theme.palette.navigation.background)
38
+ : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 2, props.theme.palette.navigation.background); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
39
+ ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 3, props.theme.palette.navigation.background)
40
+ : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 3, props.theme.palette.navigation.background); }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
41
+ ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 2, props.theme.palette.navigation.background)
42
+ : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 2, props.theme.palette.navigation.background); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
43
+ ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 3, props.theme.palette.navigation.background)
44
+ : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 3, props.theme.palette.navigation.background); });
45
+ export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"])), function (props) { return getNavigationBackground(props.theme); });
60
46
  export var StyledDivider = styled('div', {
61
47
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
62
- })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: '';\n display: block;\n height: 2px;\n margin: auto;\n transition: all\n ", "ms\n ", ";\n width: 66%;\n }\n"], ["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: '';\n display: block;\n height: 2px;\n margin: auto;\n transition: all\n ", "ms\n ", ";\n width: 66%;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
63
- ? props.theme.palette.primary.main
64
- : props.theme.palette.background.paper; }, function (props) {
65
- return props.theme.palette.mode === 'dark'
66
- ? 'rgba(255, 255, 255, 0.075)'
67
- : 'rgba(0, 0, 0, 0.075)';
68
- }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
48
+ })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: \"\";\n display: block;\n height: 2px;\n margin: auto;\n transition: all ", "ms ", ";\n width: 66%;\n }\n"], ["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: \"\";\n display: block;\n height: 2px;\n margin: auto;\n transition: all ", "ms ", ";\n width: 66%;\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
49
+ ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.navigation.background)
50
+ : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.navigation.background); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
69
51
  export var DrawerShadow = styled(Box, {
70
52
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
71
- })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: rgba(0,0,0,0.125);\n content: '';\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n right: ", ";\n position: fixed;\n top: 0;\n transition-duration: ", "ms;\n transition-property: left right;\n transition-timing-function: ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n right: ", ";\n }\n"], ["\n background: rgba(0,0,0,0.125);\n content: '';\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n right: ", ";\n position: fixed;\n top: 0;\n transition-duration: ", "ms;\n transition-property: left right;\n transition-timing-function: ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n right: ", ";\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px") : 0; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px") : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px") : 0; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px") : 0; });
72
- export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -", ";\n position: relative;\n transition: width\n ", "ms\n ", ";\n width: 100%;\n z-index: 9;\n"], ["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -", ";\n position: relative;\n transition: width\n ", "ms\n ", ";\n width: 100%;\n z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
73
- export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"], ["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
74
- ? props.theme.palette.primary.main
75
- : props.theme.palette.background.paper; });
76
- export var NotchBackgroundClip = styled(Box)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n transform: rotate(", ");\n width: 45px;\n"], ["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n transform: rotate(", ");\n width: 45px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
77
- ? props.theme.palette.primary.main
78
- : props.theme.palette.background.paper; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; });
79
- export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n height: 90px;\n position: absolute;\n left: ", ";\n right: ", ";\n top: -2px;\n width: calc(100% - ", "px);\n"], ["\n background-color: ", ";\n height: 90px;\n position: absolute;\n left: ", ";\n right: ", ";\n top: -2px;\n width: calc(100% - ", "px);\n"])), function (props) { return props.theme.palette.mode === 'dark'
80
- ? props.theme.palette.primary.main
81
- : props.theme.palette.background.paper; }, function (props) { return props.theme.direction === 'rtl' ? "".concat(NOTCH.Width, "px") : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(NOTCH.Width, "px") : 'auto'; }, NOTCH.Width);
53
+ })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: rgba(0, 0, 0, 0.125);\n content: \"\";\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n right: ", ";\n position: fixed;\n top: 0;\n transition-duration: ", "ms;\n transition-property: left right;\n transition-timing-function: ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n right: ", ";\n }\n"], ["\n background: rgba(0, 0, 0, 0.125);\n content: \"\";\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n right: ", ";\n position: fixed;\n top: 0;\n transition-duration: ", "ms;\n transition-property: left right;\n transition-timing-function: ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n right: ", ";\n }\n"])), function (props) { return props.theme.direction === 'ltr'
54
+ ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px")
55
+ : 0; }, function (props) { return props.theme.direction === 'rtl'
56
+ ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px")
57
+ : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.direction === 'ltr'
58
+ ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
59
+ : 0; }, function (props) { return props.theme.direction === 'rtl'
60
+ ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
61
+ : 0; });
62
+ export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -3px;\n position: relative;\n transition: width ", "ms ", ";\n width: 100%;\n z-index: 9;\n"], ["\n display: flex;\n justify-content: flex-end;\n height: auto;\n margin-top: -3px;\n position: relative;\n transition: width ", "ms ", ";\n width: 100%;\n z-index: 9;\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
63
+ export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"], ["\n background-color: ", ";\n flex: 1;\n height: auto;\n width: auto;\n"])), function (props) { return getNavigationBackground(props.theme); });
64
+ export var NotchBackgroundClip = styled(Box)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n transform: rotate(", ");\n width: 45px;\n"], ["\n background-color: ", ";\n clip-path: url(\"#notch\");\n display: flex;\n height: 85px;\n transform: rotate(", ");\n width: 45px;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return (props.theme.direction === 'rtl' ? '180deg' : 0); });
65
+ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n height: 90px;\n position: absolute;\n left: ", ";\n right: ", ";\n top: -2px;\n width: calc(100% - ", "px);\n"], ["\n background-color: ", ";\n height: 90px;\n position: absolute;\n left: ", ";\n right: ", ";\n top: -2px;\n width: calc(100% - ", "px);\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'rtl' ? "".concat(NOTCH.Width, "px") : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(NOTCH.Width, "px") : 'auto'; }, NOTCH.Width);
82
66
  export var StyledDrawer = styled(Drawer, {
83
67
  shouldForwardProp: function (prop) { return prop !== 'open'; }
84
- })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width\n ", "ms\n ", ";\n white-space: nowrap;\n width: ", ";\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n left: ", ";\n right: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible !important;\n width: ", ";\n }\n"], ["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width\n ", "ms\n ", ";\n white-space: nowrap;\n width: ", ";\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n left: ", ";\n right: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width\n ", "ms\n ", ";\n visibility: visible !important;\n width: ", ";\n }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
85
- return props.theme.palette.mode === 'dark'
86
- ? props.theme.palette.primary.contrastText
87
- : props.theme.palette.getContrastText(props.theme.palette.background.paper);
88
- }, function (props) { return props.theme.direction === 'ltr' ? 0 : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? 0 : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
68
+ })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width ", "ms ", ";\n white-space: nowrap;\n width: ", ";\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n left: ", ";\n right: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width ", "ms ", ";\n visibility: visible !important;\n width: ", ";\n }\n"], ["\n box-shadow: none;\n box-sizing: border-box;\n flexshrink: 0;\n overflow-x: visible;\n transition: width ", "ms ", ";\n white-space: nowrap;\n width: ", ";\n\n .MuiDrawer-paper {\n background: transparent none;\n border: 0;\n box-shadow: none;\n color: ", ";\n left: ", ";\n right: ", ";\n overflow: visible !important;\n overflow-x: visible;\n transform: translateX(0) !important;\n transition: width ", "ms ", ";\n visibility: visible !important;\n width: ", ";\n }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return (props.theme.direction === 'ltr' ? 0 : 'auto'); }, function (props) { return (props.theme.direction === 'rtl' ? 0 : 'auto'); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
89
69
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/components/navigation/helpers.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Return the background color for the navigation
3
+ * @returns string
4
+ */
5
+ export declare const getNavigationBackground: (theme: any) => any;
6
+ /**
7
+ * Returns the contrast color for the navigation
8
+ * @returns string
9
+ */
10
+ export declare const getNavigationContrastText: (theme: any) => any;
11
+ /**
12
+ * Return a darkened or lightened background color for the navigation
13
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
14
+ * @returns string
15
+ */
16
+ export declare const getOffsetNavigationBackground: (theme: any, colorAdjustAmount?: number) => string;
17
+ /**
18
+ * Return a darkened or lightened contrast color for the navigation
19
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
20
+ * @returns string
21
+ */
22
+ export declare const getOffsetNavigationContrastText: (theme: any, colorAdjustAmount?: number) => any;
package/components/navigation/helpers.js ADDED
@@ -0,0 +1,59 @@
1
+ import { darken, lighten, getLuminance } from 'polished';
2
+ var DEFAULT_COLOR_ADJUST_AMOUNT = 0.1;
3
+ /**
4
+ * Return the background color for the navigation
5
+ * @returns string
6
+ */
7
+ export var getNavigationBackground = function (theme) {
8
+ var _a;
9
+ return (_a = theme.palette.navigation.background) !== null && _a !== void 0 ? _a : theme.palette.background.paper;
10
+ };
11
+ /**
12
+ * Returns the contrast color for the navigation
13
+ * @returns string
14
+ */
15
+ export var getNavigationContrastText = function (theme) {
16
+ var _a;
17
+ var palette = theme.palette;
18
+ // Use background property if navigation properties arent set
19
+ if (!palette.navigation.contrastText && !palette.navigation.background) {
20
+ return palette.getContrastText(palette.background.paper);
21
+ }
22
+ return (_a = palette.navigation.contrastText) !== null && _a !== void 0 ? _a : palette.getContrastText(palette.navigation.background);
23
+ };
24
+ /**
25
+ * Return a darkened or lightened background color for the navigation
26
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
27
+ * @returns string
28
+ */
29
+ export var getOffsetNavigationBackground = function (theme, colorAdjustAmount) {
30
+ var palette = theme.palette;
31
+ var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
32
+ // Use background property if navigation property isnt set
33
+ if (!palette.navigation.background) {
34
+ return getLuminance(palette.background.paper) > 0.5
35
+ ? darken(adjustAmount, palette.background.paper)
36
+ : lighten(adjustAmount, palette.background.paper);
37
+ }
38
+ return getLuminance(palette.navigation.background) > 0.5
39
+ ? darken(adjustAmount, palette.navigation.background)
40
+ : lighten(adjustAmount, palette.navigation.background);
41
+ };
42
+ /**
43
+ * Return a darkened or lightened contrast color for the navigation
44
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
45
+ * @returns string
46
+ */
47
+ export var getOffsetNavigationContrastText = function (theme, colorAdjustAmount) {
48
+ var palette = theme.palette;
49
+ var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
50
+ // Use background property if navigation property isnt set
51
+ if (!palette.navigation.background) {
52
+ return getLuminance(palette.background.paper) > 0.5
53
+ ? palette.getContrastText(darken(adjustAmount, palette.background.paper))
54
+ : palette.getContrastText(lighten(adjustAmount, palette.background.paper));
55
+ }
56
+ return getLuminance(palette.navigation.background) > 0.5
57
+ ? palette.getContrastText(darken(adjustAmount, palette.navigation.background))
58
+ : palette.getContrastText(lighten(adjustAmount, palette.navigation.background));
59
+ };
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.7.6",
12
+ "version": "1.7.8",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",
package/types/utils/themeExtends.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ declare module '@mui/material/styles' {
2
+ interface Palette {
3
+ navigation: {
4
+ background: string;
5
+ contrastText: string;
6
+ };
7
+ }
8
+ interface PaletteOptions {
9
+ navigation?: {
10
+ background?: string;
11
+ contrastText?: string;
12
+ };
13
+ }
14
+ }
15
+ export {};
package/types/utils/themeExtends.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/utils/theme.d.ts CHANGED
@@ -55,6 +55,10 @@ export declare const lightTheme: {
55
55
  text: {
56
56
  primary: string;
57
57
  };
58
+ navigation: {
59
+ background: string;
60
+ };
61
+ contrastThreshold: number;
58
62
  };
59
63
  };
60
64
  export declare const darkTheme: {
@@ -79,6 +83,10 @@ export declare const darkTheme: {
79
83
  text: {
80
84
  primary: string;
81
85
  };
86
+ navigation: {
87
+ background: string;
88
+ };
89
+ contrastThreshold: number;
82
90
  };
83
91
  };
84
92
  export declare const motion: {
package/utils/theme.js CHANGED
@@ -41,7 +41,11 @@ export var lightTheme = {
41
41
  divider: 'rgba(0, 0, 0, 0.075)',
42
42
  text: {
43
43
  primary: 'rgba(0,0,0,0.95)'
44
- }
44
+ },
45
+ navigation: {
46
+ background: '#fff'
47
+ },
48
+ contrastThreshold: 4.5
45
49
  }
46
50
  };
47
51
  export var darkTheme = {
@@ -50,7 +54,11 @@ export var darkTheme = {
50
54
  divider: 'rgba(255, 255, 255, 0.075)',
51
55
  text: {
52
56
  primary: 'rgba(255,255,255,0.95)'
53
- }
57
+ },
58
+ navigation: {
59
+ background: '#212121'
60
+ },
61
+ contrastThreshold: 4.5
54
62
  }
55
63
  };
56
64
  export var motion = {