@learningpool/ui 1.6.0-beta.8 → 1.6.0

package/components/landmarks/Header/Header.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface AdditionalButtonItemProps {
+    label: string;
+    onClick?: any;
+    icon?: React.ReactElement;
+    hide?: boolean;
+}
+interface BreadcrumbItemProps {
+    label: string;
+    href: string;
+    color?: string;
+}
+interface HeaderProps {
+    title: string;
+    titleComponent?: React.ElementType<any>;
+    maxCharactersPerLine?: number;
+    subtitle?: string;
+    callToAction?: any;
+    callToActionComponent?: 'button' | 'link' | string;
+    additionalButtons?: AdditionalButtonItemProps[];
+    isSticky?: boolean;
+    breadcrumbItems?: BreadcrumbItemProps[];
+    maxBreadcumbItems?: number;
+}
+declare const Header: (props: HeaderProps) => React.ReactElement;
+export default Header;

package/components/landmarks/Header/Header.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import useTheme from '@mui/material/styles/useTheme';
+import HeaderActionButtons from './HeaderActionButtons';
+import { StyledAdditionalButtonsContainer, StyledBreadcrumbs, StyledHeaderPrimary, StyledHeaderSecondary, StyledPaper } from './HeaderStyles';
+import { DEFAULT_MAX_CHARACTERS_PER_LINE } from '../../../utils/constants';
+var Header = function (props) {
+    var _a, _b;
+    var title = props.title, subtitle = props.subtitle, breadcrumbItems = props.breadcrumbItems, maxBreadcumbItems = props.maxBreadcumbItems, callToAction = props.callToAction, callToActionComponent = props.callToActionComponent, isSticky = props.isSticky, titleComponent = props.titleComponent, maxCharactersPerLine = props.maxCharactersPerLine, rest = __rest(props, ["title", "subtitle", "breadcrumbItems", "maxBreadcumbItems", "callToAction", "callToActionComponent", "isSticky", "titleComponent", "maxCharactersPerLine"]);
+    var additionalButtons = props.additionalButtons;
+    var theme = useTheme();
+    var isMediumAndUp = useMediaQuery(theme.breakpoints.up('md'));
+    useEffect(function () {
+        if (!callToAction) {
+            return;
+        }
+        callToAction.hide = isMediumAndUp;
+        // No additional buttons exist so CallToAction is the only item in the list
+        if (!additionalButtons || additionalButtons.length === 0) {
+            if (callToAction) {
+                additionalButtons = [];
+                additionalButtons.push(callToAction);
+                return;
+            }
+        }
+        // Additional buttons exist so add the CallToAction as the first item in the list
+        if (additionalButtons && additionalButtons.length > 0) {
+            var callToActionIndex = additionalButtons.indexOf(callToAction);
+            var hasCallToActionInArray = callToActionIndex !== -1;
+            if (!hasCallToActionInArray) {
+                // Add the CallToAction item to the top of the Menu
+                additionalButtons.splice(0, 0, callToAction);
+            }
+            if (hasCallToActionInArray) {
+                // Show or hide the CallToAction item based on 'isMediumAndUp'
+                additionalButtons[callToActionIndex].hide = callToAction.hide;
+            }
+        }
+    }, [props.additionalButtons, isMediumAndUp]);
+    return (_jsxs(StyledPaper, __assign({}, rest, { elevation: 0, className: "".concat(isSticky && 'is-sticky') }, { children: [_jsxs(StyledHeaderPrimary, { children: [breadcrumbItems && breadcrumbItems.length > 0 && (_jsx(StyledBreadcrumbs, __assign({ maxItems: maxBreadcumbItems !== null && maxBreadcumbItems !== void 0 ? maxBreadcumbItems : 2, "aria-label": 'breadcrumb', separator: theme.direction === 'ltr' ? '/' : '\\' }, { children: breadcrumbItems.map(function (breadcrumbItem) {
+                            var _a;
+                            return (_jsx(Link, __assign({ underline: 'hover', color: (_a = breadcrumbItem.color) !== null && _a !== void 0 ? _a : 'inherit', href: breadcrumbItem.href }, { children: breadcrumbItem.label })));
+                        }) }))), _jsx(Typography, __assign({ component: titleComponent !== null && titleComponent !== void 0 ? titleComponent : 'h1', 
+                        // Good support for 'ch' https://caniuse.com/ch-unit
+                        style: { maxWidth: "".concat(maxCharactersPerLine !== null && maxCharactersPerLine !== void 0 ? maxCharactersPerLine : DEFAULT_MAX_CHARACTERS_PER_LINE, "ch") } }, { children: title })), subtitle && (_jsx(Typography, __assign({ component: 'h2', variant: 'subtitle1', color: theme.palette.text.secondary, style: { maxWidth: "".concat(maxCharactersPerLine !== null && maxCharactersPerLine !== void 0 ? maxCharactersPerLine : DEFAULT_MAX_CHARACTERS_PER_LINE, "ch") } }, { children: subtitle })))] }), _jsxs(StyledHeaderSecondary, { children: [isMediumAndUp && callToAction && (callToActionComponent && callToActionComponent === 'link'
+                        ? _jsx(Button, __assign({ href: '#', startIcon: (_a = callToAction.icon) !== null && _a !== void 0 ? _a : null }, { children: callToAction.label }))
+                        : _jsx(Button, __assign({ startIcon: (_b = callToAction.icon) !== null && _b !== void 0 ? _b : null, variant: 'contained' }, { children: callToAction.label }))), additionalButtons && additionalButtons.length > 0 && (_jsx(StyledAdditionalButtonsContainer, { children: _jsx(HeaderActionButtons, { forceListView: true, options: additionalButtons }) }))] })] })));
+};
+export default Header;

package/components/landmarks/Header/HeaderActionButtons.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const HeaderActionButtons: (props: any) => JSX.Element | null;
+export default HeaderActionButtons;

package/components/landmarks/Header/HeaderActionButtons.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Icon from '@mui/material/Icon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+var MAX_ICONS = 0;
+var HeaderActionButtons = function (props) {
+    var options = props.options, styles = props.styles, forceListView = props.forceListView;
+    var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var handleClick = function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setAnchorEl(null);
+    };
+    var handleOptionClick = function (event, option) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        option === null || option === void 0 ? void 0 : option.onClick();
+        handleClose(event);
+    };
+    if (!options) {
+        console.log('Did you mean to pass items using the `options` parameter?');
+        return null;
+    }
+    // Show icon buttons if less than MAX_ICONS
+    if (options.length <= MAX_ICONS && !forceListView) {
+        return (_jsx("div", __assign({ style: styles }, { children: options.map(function (option) {
+                var label = option.label, icon = option.icon, onClick = option.onClick;
+                var handleOptionClick = onClick;
+                return (_jsx(Tooltip, __assign({ title: label, "aria-label": label, placement: 'bottom', enterDelay: 500, enterNextDelay: 50, leaveDelay: 50, disableInteractive: true }, { children: _jsx(IconButton, __assign({ size: 'small', "aria-label": label, onClick: handleOptionClick }, { children: _jsx(Icon, { children: icon }) })) }), label));
+            }) })));
+    }
+    // Show menu and v-ellipsis if more than MAX_ICONS
+    return (_jsxs("div", __assign({ style: styles }, { children: [_jsx(IconButton, __assign({ "aria-label": 'more', "aria-haspopup": 'true', onClick: handleClick }, { children: _jsx(MoreVertIcon, {}) })), _jsx(Menu, __assign({ id: 'actionButtonMenu', anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                }, 
+                // getContentAnchorEl={null}
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center'
+                } }, { children: options.map(function (option) {
+                    var label = option.label, isDisabled = option.isDisabled, actionKey = option.actionKey, hide = option.hide;
+                    if (hide) {
+                        return null;
+                    }
+                    return (_jsx(MenuItem, __assign({ onClick: function (event) { return handleOptionClick(event, option); }, "aria-label": label, disabled: isDisabled }, { children: label }), actionKey));
+                }) }))] })));
+};
+export default HeaderActionButtons;

package/components/landmarks/Header/HeaderStyles.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "outlined" | "elevation" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBreadcrumbs: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").BreadcrumbsClasses> | undefined;
+    expandText?: string | undefined;
+    itemsAfterCollapse?: number | undefined;
+    itemsBeforeCollapse?: number | undefined;
+    maxItems?: number | undefined;
+    separator?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "separator" | "sx" | "expandText" | "itemsAfterCollapse" | "itemsBeforeCollapse" | "maxItems"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledHeaderPrimary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("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")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledHeaderSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("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")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledAdditionalButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("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")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("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")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/landmarks/Header/HeaderStyles.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Box, Paper } from '../../../index';
+import { Breadcrumbs, styled } from '@mui/material';
+export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  position: relative;\n  width: 100%;\n\n  &.is-sticky {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  position: relative;\n  width: 100%;\n\n  &.is-sticky {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledBreadcrumbs = styled(Breadcrumbs)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  margin-bottom: 0.5rem;\n\n  ol {\n    flex-direction: ", ";\n  }\n"], ["\n  font-size: ", ";\n  margin-bottom: 0.5rem;\n\n  ol {\n    flex-direction: ", ";\n  }\n"])), function (props) { return props.theme.typography.subtitle2.fontSize; }, function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledHeaderPrimary = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  padding: 1rem;\n  padding-inline-start: 2rem;\n\n  h1,\n  h4 {\n    font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n    text-align: ", ";\n  }\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  padding: 1rem;\n  padding-inline-start: 2rem;\n\n  h1,\n  h4 {\n    font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n    text-align: ", ";\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'flex-start' : 'flex-end'; }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
+export var StyledHeaderSecondary = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-end;\n  padding: 1rem;\n  padding-inline-end: 2rem;\n\n  button,\n  a {\n    white-space: nowrap;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-end;\n  padding: 1rem;\n  padding-inline-end: 2rem;\n\n  button,\n  a {\n    white-space: nowrap;\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledAdditionalButtonsContainer = styled(Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-inline-start: ", ";\n  margin-inline-end: ", ";\n"], ["\n  margin-inline-start: ", ";\n  margin-inline-end: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? '0.5rem' : '0'; }, function (props) { return props.theme.direction === 'rtl' ? '0.5rem' : '0'; });
+export var StyledBox = styled(Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { return props.theme.palette.background.default; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/components/navigation/MobileNavigation/MobileNavigation.d.ts

@@ -15,8 +15,6 @@ interface MobileNavigationProps {
     isDrawerOpen?: boolean;
     isSearchOpen?: boolean;
     isAvatarOpen?: boolean;
-    isPersistent?: boolean;
-    setIsPersistent?: any;
     hideAvatarInitials?: boolean;
     showNotchIndicator?: boolean;
     hasSearch?: boolean;
@@ -24,6 +22,7 @@ interface MobileNavigationProps {
     searchPanelDefaultValue?: string;
     searchPanelOnClickSearch?: any;
     hasAvatar?: boolean;
+    avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;
     avatarPanelOnClickViewProfile?: any;

package/components/navigation/MobileNavigation/MobileNavigation.js

@@ -20,42 +20,33 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { Person, PersonOutline } from '@mui/icons-material';
-import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation, StyledNotchSVG, StyledNotchShadow, StyledNotchShadowMask } from './MobileNavigationStyles';
+import { Person } from '@mui/icons-material';
+import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation } from './MobileNavigationStyles';
 import { StyledAvatar } from './MobileNavigationAvatarStyles';
 import SwipeableTemporaryDrawer from './MobileNavigationDrawer';
 import SwipeableTemporarySearch from './MobileNavigationSearch';
 import SwipeableTemporaryAvatar from './MobileNavigationAvatar';
-import { ToggleX } from './MobileNavigationToggleX';
-import { ToggleSearchX } from './MobileNavigationToggleSearchX';
-import { useCurrentWidth } from '../../../utils/hooks';
-import { slice } from 'lodash';
+import NotchIndicator from './MobileNavigationNotchIndicator';
+import ToggleX from './MobileNavigationToggleX';
+import ToggleSearchX from './MobileNavigationToggleSearchX';
 import { motion } from 'framer-motion';
 import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
 import { handleAvatarInitials } from '../../../utils/helpers';
 var MobileNavigation = function (props) {
-    var _a, _b, _c;
+    var _a, _b;
     var items = props.items, secondaryItems = props.secondaryItems, hideAvatarInitials = props.hideAvatarInitials, hasSearch = props.hasSearch, hasAvatar = props.hasAvatar, showNotchIndicator = props.showNotchIndicator, rest = __rest(props, ["items", "secondaryItems", "hideAvatarInitials", "hasSearch", "hasAvatar", "showNotchIndicator"]);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var propIsSearchOpen = typeof (props === null || props === void 0 ? void 0 : props.isSearchOpen) === 'boolean' ? props.isSearchOpen : undefined;
     var propIsAvatarOpen = typeof (props === null || props === void 0 ? void 0 : props.isAvatarOpen) === 'boolean' ? props.isAvatarOpen : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
-    var _d = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _d[0], setIsDrawerOpen = _d[1];
-    var _e = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _e[0], setIsSearchOpen = _e[1];
-    var _f = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _f[0], setIsAvatarOpen = _f[1];
-    var maxMobilePrimaryItems = 3;
-    var priorityItems = slice(items, 0, maxMobilePrimaryItems);
-    var _g = React.useState(0), value = _g[0], setValue = _g[1];
-    var _h = React.useState(0), mobileNotchPosition = _h[0], setMobileNotchPosition = _h[1];
-    var windowWidth = useCurrentWidth();
+    var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
+    var _d = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _d[0], setIsSearchOpen = _d[1];
+    var _e = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _e[0], setIsAvatarOpen = _e[1];
+    var _f = React.useState(0), value = _f[0], setValue = _f[1];
     var currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction');
-    var _j = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _j[0], setMobileNavDirection = _j[1];
-    useEffect(function () {
-        window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection);
-        positionMobileNotch();
-    }, [mobileNavDirection]);
+    var _g = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _g[0], setMobileNavDirection = _g[1];
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
     useEffect(function () { return setIsSearchOpen(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false); }, [propIsSearchOpen]);
     useEffect(function () { return setIsAvatarOpen(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false); }, [propIsAvatarOpen]);
@@ -69,7 +60,7 @@ var MobileNavigation = function (props) {
         }
         hideNotch();
     }, [isDrawerOpen, isSearchOpen, isAvatarOpen]);
-    var _k = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _k[0], setAvatarInitials = _k[1];
+    var _h = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _h[0], setAvatarInitials = _h[1];
     var toggleDrawer = function (open, action) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -90,6 +81,7 @@ var MobileNavigation = function (props) {
             }
             case MOBILE_NAV_PANEL_TYPES.AVATAR: {
                 setIsAvatarOpen(open !== null && open !== void 0 ? open : !isAvatarOpen);
+                setValue(2);
                 break;
             }
             default: {
@@ -99,22 +91,6 @@ var MobileNavigation = function (props) {
             }
         }
     }; };
-    var NOTCH = {
-        Height: 50,
-        Width: 50
-    };
-    var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item');
-    var positionMobileNotch = function () {
-        var _a;
-        var selectedDOMRect = (_a = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
-    };
-    useEffect(function () { return positionMobileNotch(); }, [
-        value,
-        windowWidth,
-        // Fix notch position if scrollbar is hidden/shown
-        (_c = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()
-    ]);
     var variantsPaper = {
         open: {
             opacity: 1
@@ -134,50 +110,21 @@ var MobileNavigation = function (props) {
             }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({}, rest, { isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({}, rest, { isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }))), _jsxs(StyledPaper, __assign({ elevation: 3, 
+    return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({ isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }, rest))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({ isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }, rest))), _jsx(StyledPaper, __assign({ elevation: 3, 
                 // @ts-expect-error
-                component: motion.div, animate: 'open', variants: variantsPaper, initial: { opacity: 0 }, transition: {
-                // when: 'beforeChildren'
-                } }, { children: [showNotchIndicator &&
-                        _jsxs(motion.div, __assign({ style: { zIndex: '-1' }, initial: {
-                                opacity: 0,
-                                x: -75,
-                                y: 100
-                            }, animate: {
-                                opacity: 1,
-                                x: mobileNotchPosition,
-                                y: value < 0 ? 100 : -2
-                            }, transition: {
-                                x: {
-                                    // duration: 0.5,
-                                    type: 'spring',
-                                    // mass: 0.5,
-                                    bounce: 0.25
-                                    // stiffness: 50
-                                },
-                                y: {
-                                    delay: 0.25,
-                                    // duration: 0.5,
-                                    type: 'spring',
-                                    // mass: 0.5,
-                                    bounce: 0
-                                }
-                                // duration: 0.5
-                            } }, { children: [_jsx(StyledNotchShadow, {}), _jsx(StyledNotchSVG, __assign({ viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx(motion.path, { 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" }) })), _jsx(StyledNotchShadowMask, {})] })), _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); }, 
-                        // @ts-expect-error
-                        component: motion.div, animate: 'open', variants: variantsContainer, style: {
-                            flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row'
-                        } }, { children: [_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleX, {}), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
-                                // @ts-expect-error
-                                component: motion.div, animate: isDrawerOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: {
-                                    marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
-                                    marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto'
-                                } }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleSearchX, {}), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
-                                // @ts-expect-error
-                                component: motion.div, animate: isSearchOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' })), hasAvatar && (_jsx(StyledBottomNavigationAction, { onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials
-                                    ? _jsx(StyledAvatar, { children: avatarInitials })
-                                    : value === (priorityItems ? priorityItems.length + 1 : 1) ? _jsx(Person, {}) : _jsx(PersonOutline, {}), 
-                                // @ts-expect-error
-                                component: motion.button, variants: variantsButtons, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' }))] }))] }))] }));
+                component: motion.div, animate: 'open', variants: variantsPaper, initial: { opacity: 0 } }, { children: _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); }, 
+                    // @ts-expect-error
+                    component: motion.div, animate: 'open', variants: variantsContainer, style: {
+                        flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row'
+                    } }, { children: [_jsx(StyledBottomNavigationAction, { icon: (_jsxs(_Fragment, { children: [_jsx(ToggleX, {}), showNotchIndicator && value === 0 && _jsx(NotchIndicator, {})] })), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
+                            // @ts-expect-error
+                            component: motion.div, animate: isDrawerOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: {
+                                marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
+                                marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto'
+                            } }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: (_jsxs(_Fragment, { children: [_jsx(ToggleSearchX, {}), showNotchIndicator && value === 1 && _jsx(NotchIndicator, {})] })), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
+                            // @ts-expect-error
+                            component: motion.div, animate: isSearchOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' })), hasAvatar && (_jsx(StyledBottomNavigationAction, { onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: (_jsxs(_Fragment, { children: [!hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}), showNotchIndicator && value === 2 && _jsx(NotchIndicator, {})] })), 
+                            // @ts-expect-error
+                            component: motion.button, variants: variantsButtons, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' }))] })) }))] }));
 };
 export default MobileNavigation;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.d.ts

@@ -7,11 +7,11 @@ export interface IAvatarMenuItemProps {
 export interface ISwipeableTemporaryAvatarProps {
     avatarName: string;
     editProfileText?: string;
-    logoutText?: string;
     isAvatarOpen: boolean;
     setIsAvatarOpen?: any;
     mobileNavDirection?: string;
     setMobileNavDirection?: any;
+    avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;
     avatarPanelOnClickViewProfile?: any;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { Box, ButtonGroup, IconButton, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
+import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
 import { StyledSwipeableAvatar, StyledBox, StyledBoxProfile, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton } from './MobileNavigationAvatarStyles';
 import { useTheme } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
@@ -24,7 +24,7 @@ import { handleAvatarInitials } from '../../../utils/helpers';
 var SwipeableTemporaryAvatar = function (props) {
     var _a;
     var theme = useTheme();
-    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString;
+    var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, avatarPanelLogoutString = props.avatarPanelLogoutString, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString;
     var _b = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _b[0], setIsOpen = _b[1];
     React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
     var handleOpenState = function (open) {
@@ -49,7 +49,7 @@ var SwipeableTemporaryAvatar = function (props) {
     };
     return (_jsx(StyledSwipeableAvatar, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
             keepMounted: true
-        } }, { children: _jsxs(StyledBox, __assign({ animate: isAvatarOpen ? 'open' : 'closed', variants: motionParent }, { children: [avatarPanelOnClickLogout && (_jsx(IconButton
+        } }, { children: _jsxs(StyledBox, __assign({ animate: isAvatarOpen ? 'open' : 'closed', variants: motionParent }, { children: [avatarPanelOnClickLogout && (_jsx(Button
                 // @ts-expect-error
                 , __assign({ 
                     // @ts-expect-error
@@ -58,14 +58,23 @@ var SwipeableTemporaryAvatar = function (props) {
                         position: 'absolute',
                         right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
                         top: theme.spacing(1)
-                    }, onClick: avatarPanelOnClickLogout }, { children: _jsx(LogoutIcon, {}) }))), _jsxs(Box, __assign({ style: {
+                    }, onClick: function () {
+                        handleOpenState(false);
+                        avatarPanelOnClickLogout();
+                    }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
                     } }, { children: [_jsxs(StyledBoxProfile, __assign({ variants: motionFadeInUp }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ variants: motionFadeInUp, style: {
                                 flexDirection: 'row',
                                 marginBottom: theme.spacing(1)
-                            } }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: avatarPanelOnClickViewProfile }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
+                            } }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: function () {
+                                            handleOpenState(false);
+                                            avatarPanelOnClickViewProfile();
+                                        } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
+                                            handleOpenState(false);
+                                            avatarPanelOnClickEditProfile();
+                                        } }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
@@ -79,13 +88,19 @@ var SwipeableTemporaryAvatar = function (props) {
                                 , __assign({ 
                                     // TODO: figure out if these are links or buttons
                                     // @ts-expect-error
-                                    component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                    component: Link, role: 'link', onClick: function () {
+                                        handleOpenState(false);
+                                        avatarMenuItem.onClick();
+                                    } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                 minWidth: theme.spacing(5)
                                             } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledOutlineButton
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: motion.button, variants: motionFadeInUp, disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: avatarPanelOnClickMainAction }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
+                            component: motion.button, variants: motionFadeInUp, disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: function () {
+                                handleOpenState(false);
+                                avatarPanelOnClickMainAction();
+                            } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
                                     avatarPanelSettingItems.length > 0 &&
                                     avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
                                         // TODO: figure out if these are links or buttons
@@ -93,7 +108,10 @@ var SwipeableTemporaryAvatar = function (props) {
                                         , __assign({ 
                                             // TODO: figure out if these are links or buttons
                                             // @ts-expect-error
-                                            component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                            component: Link, role: 'link', onClick: function () {
+                                                handleOpenState(false);
+                                                avatarMenuItem.onClick();
+                                            } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                         minWidth: theme.spacing(5)
                                                     } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
                                     // TODO: figure out if these are links or buttons

package/components/navigation/MobileNavigation/MobileNavigationDrawer.js

@@ -17,14 +17,13 @@ import { StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider, Styled
 import { StreamSuiteLogo } from '../../../assets/Images';
 import { motion } from 'framer-motion';
 export default function SwipeableTemporaryDrawer(props) {
-    var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, children = props.children;
+    var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick;
     var theme = useTheme();
     var _a = React.useState(isDrawerOpen !== null && isDrawerOpen !== void 0 ? isDrawerOpen : false), isOpen = _a[0], setIsOpen = _a[1];
     React.useEffect(function () { return handleOpenState(isDrawerOpen); }, [isDrawerOpen]);
     var handleOpenState = function (open) {
         setIsOpen(open);
         setIsDrawerOpen(open);
-        console.log(children);
     };
     var toggleDrawer = function (open) {
         return function (event) {
@@ -108,7 +107,7 @@ export default function SwipeableTemporaryDrawer(props) {
     };
     var list = function () { return (_jsxs(StyledBox, __assign({ onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false) }, { children: [_jsxs(StyledDrawerLogo, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, animate: isDrawerOpen ? 'open' : 'closed', variants: variantsLogo, whileHover: { scale: 1.02 }, whileTap: { scale: 0.95 } }, { children: [logo
                         ? typeof logo === 'string'
-                            ? (_jsx("img", { height: '38', width: '38', src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
+                            ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
                             : logo
                         : (_jsx(StreamSuiteLogo, { style: {
                                 fill: theme.palette.mode === 'dark'
@@ -132,7 +131,7 @@ export default function SwipeableTemporaryDrawer(props) {
                                     // @ts-expect-error
                                     , __assign({ 
                                         // @ts-expect-error
-                                        component: motion.button, variants: variantsLi, whileHover: { scale: 1.02 }, whileTap: { scale: 0.95 } }, item, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }), childItem.label)); }) })))] }), label));
+                                        component: motion.button, variants: variantsLi, whileHover: { scale: 1.02 }, whileTap: { scale: 0.95 } }, childItem, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }), childItem.label)); }) })))] }), label));
                 }) })), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(motion.div, __assign({ animate: isDrawerOpen ? 'open' : 'closed', variants: variantsDivider }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList
                     // @ts-expect-error
                     , __assign({