@learningpool/ui 1.8.6 → 1.8.8

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

@@ -19,6 +19,7 @@ interface HeaderProps {
     callToActionComponent?: 'button' | 'link' | string;
     additionalButtons?: AdditionalButtonItemProps[];
     isSticky?: boolean;
+    dataAttributes?: any;
     breadcrumbItems?: BreadcrumbItemProps[];
     maxBreadcumbItems?: number;
 }

package/components/landmarks/Header/Header.js

@@ -30,12 +30,14 @@ 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';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 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 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, dataAttributes = props.dataAttributes, rest = __rest(props, ["title", "subtitle", "breadcrumbItems", "maxBreadcumbItems", "callToAction", "callToActionComponent", "isSticky", "titleComponent", "maxCharactersPerLine", "dataAttributes"]);
     var additionalButtons = props.additionalButtons;
     var theme = useTheme();
     var isMediumAndUp = useMediaQuery(theme.breakpoints.up('md'));
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     useEffect(function () {
         if (!callToAction) {
             return;
@@ -63,13 +65,13 @@ var Header = function (props) {
             }
         }
     }, [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) {
+    return (_jsxs(StyledPaper, __assign({}, rest, { elevation: 0, className: "".concat(isSticky && 'is-sticky'), "data-id": dataIds.HeaderContainer }, { 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' ? '/' : '\\', "data-id": dataIds.HeaderBreadcrumb }, { 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 }) }))] })] })));
+                        style: { maxWidth: "".concat(maxCharactersPerLine !== null && maxCharactersPerLine !== void 0 ? maxCharactersPerLine : DEFAULT_MAX_CHARACTERS_PER_LINE, "ch") }, "data-id": dataIds.HeaderTitle }, { 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") }, "data-id": dataIds.HeaderSubtitle }, { children: subtitle })))] }), _jsxs(StyledHeaderSecondary, __assign({ "data-id": dataIds.HeaderActions }, { children: [isMediumAndUp && callToAction && (callToActionComponent && callToActionComponent === 'link'
+                        ? _jsx(Button, __assign({ "data-id": dataIds.HeaderActionsMain, href: '#', startIcon: (_a = callToAction.icon) !== null && _a !== void 0 ? _a : null }, { children: callToAction.label }))
+                        : _jsx(Button, __assign({ "data-id": dataIds.HeaderActionsMain, startIcon: (_b = callToAction.icon) !== null && _b !== void 0 ? _b : null, variant: 'contained' }, { children: callToAction.label }))), additionalButtons && additionalButtons.length > 0 && (_jsx(StyledAdditionalButtonsContainer, { children: _jsx(HeaderActionButtons, { "data-id": dataIds.HeaderActionsSecondary, forceListView: true, options: additionalButtons }) }))] }))] })));
 };
 export default Header;

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

@@ -17,6 +17,7 @@ interface MobileNavigationProps {
     isAvatarOpen?: boolean;
     hideAvatarInitials?: boolean;
     showNotchIndicator?: boolean;
+    dataAttributes?: any;
     hasSearch?: boolean;
     searchPanelPlaceholder?: string;
     searchPanelDefaultValue?: string;

package/components/navigation/MobileNavigation/MobileNavigation.js

@@ -34,9 +34,10 @@ import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
 import { handleAvatarInitials } from '../../../utils/helpers';
 import { useSpring, animated, useSpringRef, config } from '@react-spring/web';
 import { useCurrentWidth } from '../../../utils/hooks';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 var MobileNavigation = function (props) {
     var _a, _b, _c;
-    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 items = props.items, secondaryItems = props.secondaryItems, hideAvatarInitials = props.hideAvatarInitials, dataAttributes = props.dataAttributes, hasSearch = props.hasSearch, hasAvatar = props.hasAvatar, showNotchIndicator = props.showNotchIndicator, rest = __rest(props, ["items", "secondaryItems", "hideAvatarInitials", "dataAttributes", "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;
@@ -45,6 +46,7 @@ var MobileNavigation = function (props) {
     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 _g = React.useState(0), value = _g[0], setValue = _g[1];
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction');
     var _h = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _h[0], setMobileNavDirection = _h[1];
     var _j = React.useState(0), mobileNotchPosition = _j[0], setMobileNotchPosition = _j[1];
@@ -160,15 +162,15 @@ var MobileNavigation = function (props) {
     var MobileNavigationPaperAnimation = useSpring(animationConfig.MobileNavigationPaper);
     var MobileNavigationAnimation = useSpring(animationConfig.MobileNavigation);
     var MobileNavigationButtonAnimation = useSpring(animationConfig.MobileNavigationButton);
-    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))), _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({ "data-id": dataIds.MobileNavSearchPanel, isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }, rest))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({ "data-id": dataIds.MobileNavAvatarPanel, isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }, rest))), _jsxs(StyledPaper, __assign({ elevation: 3, 
                 // @ts-expect-error
-                component: animated.div, style: MobileNavigationPaperAnimation, ref: navBarRef }, { children: [showNotchIndicator && _jsx(NotchIndicator, __assign({}, animationConfig.MobileNavigationNotch)), _jsxs(StyledBottomNavigation, __assign({ value: value, 
+                component: animated.div, style: MobileNavigationPaperAnimation, ref: navBarRef, "data-id": dataIds.MobileNavContainer }, { children: [showNotchIndicator && _jsx(NotchIndicator, __assign({}, animationConfig.MobileNavigationNotch)), _jsxs(StyledBottomNavigation, __assign({ value: value, 
                         // @ts-expect-error
-                        component: animated.div, style: __assign({ flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row' }, MobileNavigationAnimation) }, { children: [_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleX, { isOpen: isDrawerOpen }), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
+                        component: animated.div, style: __assign({ flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row' }, MobileNavigationAnimation) }, { children: [_jsx(StyledBottomNavigationAction, { "data-id": dataIds.MobileNavDrawerToggle, icon: _jsx(ToggleX, { isOpen: isDrawerOpen }), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
                                 // @ts-expect-error
-                                component: animated.div, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: __assign({ marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial', marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto' }, MobileNavigationButtonAnimation) }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleSearchX, { isOpen: isSearchOpen }), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
+                                component: animated.div, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: __assign({ marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial', marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto' }, MobileNavigationButtonAnimation) }), hasSearch && (_jsx(StyledBottomNavigationAction, { "data-id": dataIds.MobileNavSearchToggle, icon: _jsx(ToggleSearchX, { isOpen: isSearchOpen }), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
                                 // @ts-expect-error
-                                component: animated.div, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation })), hasAvatar && (_jsx(StyledBottomNavigationAction, { onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}), 
+                                component: animated.div, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation })), hasAvatar && (_jsx(StyledBottomNavigationAction, { "data-id": dataIds.MobileNavAvatarToggle, onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}), 
                                 // @ts-expect-error
                                 component: animated.button, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation }))] }))] }))] }));
 };

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

@@ -11,6 +11,7 @@ export interface ISwipeableTemporaryAvatarProps {
     setIsAvatarOpen?: any;
     mobileNavDirection?: string;
     setMobileNavDirection?: any;
+    dataAttributes?: any;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
@@ -18,13 +27,15 @@ import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
 import ToggleOffIcon from '@mui/icons-material/ToggleOff';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
-import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
+import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { animated } from '@react-spring/web';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 var SwipeableTemporaryAvatar = function (props) {
-    var _a;
+    var _a, _b, _c, _d;
     var theme = useTheme();
-    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];
+    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, dataAttributes = props.dataAttributes;
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
+    var _e = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _e[0], setIsOpen = _e[1];
     React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
     var handleOpenState = function (open) {
         setIsOpen(open);
@@ -40,30 +51,42 @@ var SwipeableTemporaryAvatar = function (props) {
             handleOpenState(open);
         };
     };
-    var _c = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _c[0], setAvatarInitials = _c[1];
+    var _f = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
     useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
     var handleOnClickSwitchDirection = function () {
         setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
         avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
     };
-    // First item starts at 70ms
-    // see STAGGER_ITEMS_DELAY in helpers.js
-    var animationCount = 1;
-    var incrementAnimationCount = function () { return animationCount++; };
-    return (_jsx(StyledSwipeableAvatar, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
+    // Workaround to handle the react-spring calls without
+    // adding additional hook calls on prop or state changes
+    // --
+    // Store the total possible number of animations in a ref
+    // this way the number of hook calls never changes
+    // --
+    // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
+    var additionalItems = [
+        'avatarPanelOnClickLogout',
+        'avatarName',
+        'avatarPanelOnClickViewProfile',
+        'avatarPanelOnClickMainAction',
+        'mobileNavDirection'
+    ];
+    var totalItems = __spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), additionalItems, true);
+    var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isAvatarOpen); }));
+    return (_jsx(StyledSwipeableAvatar, __assign({ "data-id": dataIds.MobileNavAvatarPanel, anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
             keepMounted: true
         } }, { children: _jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
                 // @ts-expect-error
                 , __assign({ 
                     // @ts-expect-error
-                    component: animated.button, style: __assign({ left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto', position: 'absolute', right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1), top: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)), onClick: function () {
+                    component: animated.button, style: __assign({ left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto', position: 'absolute', right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1), top: theme.spacing(1) }, animationRefs.current[0]), onClick: function () {
                         handleOpenState(false);
                         avatarPanelOnClickLogout();
-                    }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ style: {
+                    }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ "data-id": dataIds.MobileNavAvatarProfile, style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
-                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount) }, { 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({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
+                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: animationRefs.current[1] }, { 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({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, animationRefs.current[2]) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
                                             handleOpenState(false);
                                             avatarPanelOnClickViewProfile();
                                         } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(StyledOutlineButton, __assign({ size: 'medium', variant: 'outlined', color: 'inherit', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
@@ -77,10 +100,7 @@ var SwipeableTemporaryAvatar = function (props) {
                                 marginInlineStart: '3rem',
                                 marginBottom: theme.spacing(2),
                                 maxWidth: '18rem'
-                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
-                                // whileHover={motionWhileHover}
-                                // whileTap={motionWhileTap}
-                                disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[index + 2], disablePadding: true }, { children: _jsxs(StyledListItemButton
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
                                 , __assign({ 
@@ -95,29 +115,26 @@ var SwipeableTemporaryAvatar = function (props) {
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: animated.button, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
+                            component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], disablePadding: true, variant: 'outlined', color: 'inherit', 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: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
-                                        // whileHover={motionWhileHover}
-                                        // whileTap={motionWhileTap}
-                                        disablePadding: true }, { children: _jsxs(StyledListItemButton
-                                        // TODO: figure out if these are links or buttons
-                                        // @ts-expect-error
-                                        , __assign({ 
+                                    avatarPanelSettingItems.map(function (avatarMenuItem, index) {
+                                        var _a;
+                                        return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
                                             // TODO: figure out if these are links or buttons
                                             // @ts-expect-error
-                                            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: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
-                                    // whileHover={motionWhileHover}
-                                    // whileTap={motionWhileTap}
-                                    disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                            , __assign({ 
+                                                // TODO: figure out if these are links or buttons
+                                                // @ts-expect-error
+                                                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: animated.div, style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4], disablePadding: true }, { children: _jsxs(StyledListItemButton
                                     // TODO: figure out if these are links or buttons
                                     // @ts-expect-error
                                     , __assign({ 

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

@@ -20,5 +20,6 @@ export interface ISwipeableTemporaryDrawerProps {
     logoOnClick?: any;
     label: string;
     children?: ISwipeableTemporaryDrawerProps[];
+    dataAttributes?: any;
 }
 export default function SwipeableTemporaryDrawer(props: ISwipeableTemporaryDrawerProps): JSX.Element;

package/components/navigation/MobileNavigation/MobileNavigationDrawer.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
@@ -16,12 +25,14 @@ import { List, ListItemText } from '../../../index';
 import { StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider, StyledListSecondaryItem, StyledDrawerLogo, StyledDrawerLogoText, StyledListSecondaryList, StyledListItemText, StyledListSecondaryButton, StyledChildList, StyledChildListItem, StyledChildListItemText, StyledListItemButton, StyledChildListItemButton } from './MobileNavigationDrawerStyles';
 import { StreamSuiteLogo } from '../../../assets/Images';
 import { animated } from '@react-spring/web';
-import { useStaggerAnimation } from '../../../utils/helpers';
+import { useFadeIn } from '../../../utils/helpers';
 import { getOffsetNavigationContrastText } from '../helpers';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 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;
+    var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, dataAttributes = props.dataAttributes;
     var theme = useTheme();
     var _a = React.useState(isDrawerOpen !== null && isDrawerOpen !== void 0 ? isDrawerOpen : false), isOpen = _a[0], setIsOpen = _a[1];
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     React.useEffect(function () { return handleOpenState(isDrawerOpen); }, [isDrawerOpen]);
     var handleOpenState = function (open) {
         setIsOpen(open);
@@ -37,34 +48,46 @@ export default function SwipeableTemporaryDrawer(props) {
             handleOpenState(open);
         };
     };
-    // First item starts at 70ms
-    // see STAGGER_ITEMS_DELAY in helpers.js
-    var animationCount = 1;
-    var incrementAnimationCount = function () { return animationCount++; };
-    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, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: [logo
-                        ? typeof logo === 'string'
-                            ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
-                            : logo
-                        : (_jsx(StreamSuiteLogo, { style: {
-                                fill: getOffsetNavigationContrastText(theme)
-                            } })), _jsx(StyledDrawerLogoText, __assign({ variant: 'body1' }, { children: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))] })), _jsx(List, { children: items && items.length > 0 && items.map(function (item, index) {
-                    var label = item.label, children = item.children;
-                    return (_jsxs(StyledListItem, __assign({ disablePadding: true, 
-                        // @ts-expect-error
-                        component: animated.li, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledListItemButton
-                            // whileHover={{ scale: 1.02 }}
-                            // whileTap={{ scale: 0.95 }}
-                            , __assign({}, item, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, { children: _jsx(StyledChildListItemButton
-                                    // whileHover={{ scale: 1.02 }}
-                                    // whileTap={{ scale: 0.95 }}
-                                    , __assign({}, childItem, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }, childItem.label)); }) })))] }), label));
-                }) }), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, __assign({ style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(StyledListSecondaryItem, __assign({ disablePadding: true, 
+    // Workaround to handle the react-spring calls without
+    // adding additional hook calls on prop or state changes
+    // --
+    // Store the total possible number of animations in a ref
+    // this way the number of hook calls never changes
+    // --
+    // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
+    var additionalItems = ['logo', 'divider'];
+    var totalItems = __spreadArray(__spreadArray(__spreadArray([], items !== null && items !== void 0 ? items : [], true), secondaryItems !== null && secondaryItems !== void 0 ? secondaryItems : [], true), additionalItems, true);
+    var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isOpen); }));
+    var list = function () {
+        var _a;
+        return (_jsxs(StyledBox, __assign({ onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false) }, { children: [_jsxs(StyledDrawerLogo, __assign({ "data-id": dataIds.MobileNavDrawerBrand, onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, style: animationRefs.current[0] }, { children: [logo
+                            ? typeof logo === 'string'
+                                ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
+                                : logo
+                            : (_jsx(StreamSuiteLogo, { style: {
+                                    fill: getOffsetNavigationContrastText(theme)
+                                } })), _jsx(StyledDrawerLogoText, __assign({ variant: 'body1' }, { children: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))] })), _jsx(List, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryList }, { children: items && items.length > 0 && items.map(function (item, index) {
+                        var label = item.label, children = item.children;
+                        return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
                             // @ts-expect-error
-                            component: animated.li, style: useStaggerAnimation(isDrawerOpen, animationCount, incrementAnimationCount) }, { children: _jsx(StyledListSecondaryButton
-                            // whileHover={{ scale: 1.02 }}
-                            // whileTap={{ scale: 0.95, boxShadow: '0 6px 15px rgb(36 37 38 / 0%);' }}
-                            , __assign({}, item, { children: _jsx(ListItemText, { primary: item.label }) })) }), item.label)); }) })] }))] }))); };
-    return (_jsx("aside", { children: _jsx(StyledSwipeableDrawer, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleDrawer(false), hideBackdrop: true, ModalProps: {
+                            component: animated.li, style: animationRefs.current[index] }, { children: [_jsx(StyledListItemButton
+                                // whileHover={{ scale: 1.02 }}
+                                // whileTap={{ scale: 0.95 }}
+                                , __assign({}, item, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildItem }, { children: _jsx(StyledChildListItemButton
+                                        // whileHover={{ scale: 1.02 }}
+                                        // whileTap={{ scale: 0.95 }}
+                                        , __assign({}, childItem, { children: _jsx(StyledChildListItemText, { primary: childItem.label }, childItem.label) })) }), childItem.label)); }) })))] }), label));
+                    }) })), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, __assign({ style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + 1] }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryList }, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
+                                var _a;
+                                return (_jsx(StyledListSecondaryItem, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryItem, disablePadding: true, 
+                                    // @ts-expect-error
+                                    component: animated.li, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + index + 2] }, { children: _jsx(StyledListSecondaryButton
+                                    // whileHover={{ scale: 1.02 }}
+                                    // whileTap={{ scale: 0.95, boxShadow: '0 6px 15px rgb(36 37 38 / 0%);' }}
+                                    , __assign({}, item, { children: _jsx(ListItemText, { primary: item.label }) })) }), item.label));
+                            }) }))] }))] })));
+    };
+    return (_jsx("aside", { children: _jsx(StyledSwipeableDrawer, __assign({ "data-id": dataIds.MobileNavDrawerPanel, anchor: 'bottom', open: isOpen, onClose: toggleDrawer(false), hideBackdrop: true, ModalProps: {
                 keepMounted: true
             } }, { children: list() })) }));
 }

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

@@ -5,6 +5,7 @@ interface ISwipeableTemporarySearch {
     searchPanelPlaceholder?: string;
     searchPanelDefaultValue?: string;
     searchPanelOnClickSearch?: any;
+    dataAttributes?: any;
 }
 export default function SwipeableTemporarySearch(props: ISwipeableTemporarySearch): JSX.Element;
 export {};

package/components/navigation/MobileNavigation/MobileNavigationSearch.js

@@ -15,10 +15,12 @@ import { FormControl, InputAdornment, Stack, IconButton } from '../../../index';
 import { StyledBox, StyledSwipeableSearch, StyledOutlinedInput, StyledOutlinedInputLabel } from './MobileNavigationSearchStyles';
 import Search from '@mui/icons-material/Search';
 import { animated, config, useSpring } from '@react-spring/web';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 export default function SwipeableTemporarySearch(props) {
-    var isSearchOpen = props.isSearchOpen, setIsSearchOpen = props.setIsSearchOpen, searchPanelPlaceholder = props.searchPanelPlaceholder, searchPanelDefaultValue = props.searchPanelDefaultValue, searchPanelOnClickSearch = props.searchPanelOnClickSearch;
+    var isSearchOpen = props.isSearchOpen, setIsSearchOpen = props.setIsSearchOpen, searchPanelPlaceholder = props.searchPanelPlaceholder, searchPanelDefaultValue = props.searchPanelDefaultValue, searchPanelOnClickSearch = props.searchPanelOnClickSearch, dataAttributes = props.dataAttributes;
     var _a = React.useState(isSearchOpen !== null && isSearchOpen !== void 0 ? isSearchOpen : false), isOpen = _a[0], setIsOpen = _a[1];
     var _b = React.useState(searchPanelDefaultValue !== null && searchPanelDefaultValue !== void 0 ? searchPanelDefaultValue : ''), searchValue = _b[0], setSearchValue = _b[1];
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     React.useEffect(function () { return handleOpenState(isSearchOpen); }, [isSearchOpen]);
     var handleOpenState = function (open) {
         setIsOpen(open);
@@ -42,7 +44,7 @@ export default function SwipeableTemporarySearch(props) {
         // Pass search value into the onClick function
         searchPanelOnClickSearch && searchPanelOnClickSearch(searchValue);
     };
-    return (_jsx(StyledSwipeableSearch, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleSearch(false), onOpen: toggleSearch(true), swipeAreaWidth: 44, variant: 'persistent', ModalProps: {
+    return (_jsx(StyledSwipeableSearch, __assign({ "data-id": dataIds.MobileNavSearchPanel, anchor: 'bottom', open: isOpen, onClose: toggleSearch(false), onOpen: toggleSearch(true), swipeAreaWidth: 44, variant: 'persistent', ModalProps: {
             keepMounted: true
         } }, { children: _jsx(StyledBox, { children: _jsx(Stack, __assign({ spacing: 2 }, { children: _jsx(animated.div, __assign({ style: useSpring({
                         from: { opacity: 0, y: 10 },
@@ -50,5 +52,5 @@ export default function SwipeableTemporarySearch(props) {
                         delay: isSearchOpen ? 100 : 0,
                         reverse: !isSearchOpen,
                         config: __assign(__assign({}, config.default), { mass: 1 })
-                    }) }, { children: _jsxs(FormControl, __assign({ fullWidth: true, variant: 'outlined', color: 'secondary' }, { children: [_jsx(StyledOutlinedInputLabel, __assign({ htmlFor: 'mobile-nav-search' }, { children: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search' })), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: _jsx(IconButton, __assign({ "aria-label": 'Search', edge: 'end', onClick: handleSearch }, { children: _jsx(Search, {}) })) })), onKeyDown: handleSearch, value: searchValue, onChange: function (event) { var _a; return setSearchValue((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); } })] })) })) })) }) })));
+                    }) }, { children: _jsxs(FormControl, __assign({ fullWidth: true, variant: 'outlined', color: 'secondary', "data-id": dataIds.MobileNavSearchForm }, { children: [_jsx(StyledOutlinedInputLabel, __assign({ htmlFor: 'mobile-nav-search' }, { children: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search' })), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: _jsx(IconButton, __assign({ "aria-label": 'Search', edge: 'end', onClick: handleSearch }, { children: _jsx(Search, {}) })) })), onKeyDown: handleSearch, value: searchValue, onChange: function (event) { var _a; return setSearchValue((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); } })] })) })) })) }) })));
 }

package/components/navigation/VerticalNavigation/VerticalNavigation.d.ts

@@ -17,6 +17,7 @@ interface VerticalNavigationProps {
     setIsPersistent?: any;
     appRootID?: string;
     localization?: any;
+    dataAttributes?: any;
     hasAvatar?: boolean;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;