@learningpool/ui 1.8.6 → 1.8.7

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

@@ -20,10 +20,12 @@ import ToggleOffIcon from '@mui/icons-material/ToggleOff';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
 import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
 import { animated } from '@react-spring/web';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 var SwipeableTemporaryAvatar = function (props) {
     var _a;
     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 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 _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) {
@@ -50,7 +52,7 @@ var SwipeableTemporaryAvatar = function (props) {
     // 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: {
+    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
@@ -59,7 +61,7 @@ var SwipeableTemporaryAvatar = function (props) {
                     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 () {
                         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'

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

@@ -18,10 +18,12 @@ import { StreamSuiteLogo } from '../../../assets/Images';
 import { animated } from '@react-spring/web';
 import { useStaggerAnimation } 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);
@@ -41,30 +43,30 @@ export default function SwipeableTemporaryDrawer(props) {
     // 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
+    var list = function () { 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: 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) {
+                            } })), _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({ disablePadding: true, 
+                    return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, 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
+                            , __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: 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, 
+                                    , __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, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryList }, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(StyledListSecondaryItem, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryItem, 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: {
+                            , __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;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -38,12 +38,14 @@ import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
 import { animated } from '@react-spring/web';
 import { defaultMessages } from '../../../lang/en-us';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 import { getNavigationBackground, getNavigationContrastText } from '../helpers';
 var VerticalNavigation = function (props) {
     var _a;
     var theme = useTheme();
-    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName"]);
+    var items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, appRootID = props.appRootID, hasStreamHome = props.hasStreamHome, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, localization = props.localization, streamHomeAccessToken = props.streamHomeAccessToken, streamHomeApplications = props.streamHomeApplications, avatarName = props.avatarName, dataAttributes = props.dataAttributes, rest = __rest(props, ["items", "secondaryItems", "logo", "logoText", "logoOnClick", "appRootID", "hasStreamHome", "streamHomeApiKey", "streamHomeBaseUrl", "localization", "streamHomeAccessToken", "streamHomeApplications", "avatarName", "dataAttributes"]);
     var messages = __assign(__assign({}, defaultMessages), localization);
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : undefined;
     var hasAvatar = (_a = props === null || props === void 0 ? void 0 : props.hasAvatar) !== null && _a !== void 0 ? _a : true;
@@ -112,7 +114,7 @@ var VerticalNavigation = function (props) {
                 background: 'transparent',
                 fontSize: 0
             }
-        }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
+        }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) }, "data-id": dataIds.VerticalNavigationBrand }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
                                 ? typeof logo === 'string'
                                     ? (_jsx("img", { src: logo, height: "".concat(logoHeight, "px"), width: "".concat(logoWidth, "px"), style: {
                                             marginInlineEnd: '16px'
@@ -123,7 +125,7 @@ var VerticalNavigation = function (props) {
                                         width: "".concat(logoWidth, "px"),
                                         marginInlineEnd: '16px',
                                         fill: getNavigationContrastText(theme)
-                                    } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", isDrawerOpen: isDrawerOpen, 
+                                    } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationToggle }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", isDrawerOpen: isDrawerOpen, 
                         // @ts-expect-error
                         component: animated.button, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
                                 ? (_jsx(ChevronLeft, { style: {
@@ -182,25 +184,25 @@ var VerticalNavigation = function (props) {
                                             fontSize: '1.3rem',
                                             height: '1.3rem',
                                             width: '1.3rem'
-                                        } })) }))] }))] })), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsx("div", __assign({ className: 'wrapper', style: {
+                                        } })) }))] }))] })), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsx("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationPrimary, style: {
                     backgroundColor: getNavigationBackground(theme),
                     flex: '1 1px',
                     marginTop: '-1px',
                     overflow: 'auto',
                     position: 'relative',
                     zIndex: 10
-                } }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ style: {
+                } }, { children: _jsx(StyledNav, __assign({ tabIndex: -1, "aria-label": 'Primary' }, { children: _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationPrimaryList, style: {
                             height: '100%',
                             width: DRAWER_WIDTH.Expanded,
                             marginTop: "-".concat(theme.spacing(0.5), " !important")
-                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
-                                    ? (_jsx(VerticalNavigationItem, { label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: useFadeIn(animationCount, incrementAnimationCount) }))
-                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
+                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationPrimaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationSecondary, style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ "data-id": dataIds.VerticalNavigationSecondaryList, style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
+                                    ? (_jsx(VerticalNavigationItem, { "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: useFadeIn(animationCount, incrementAnimationCount) }))
+                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "data-id": dataIds.VerticalNavigationAvatarToggle, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
                                             fontSize: '0.75rem',
                                             height: 32,
                                             width: 32
                                         } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, useFadeIn(animationCount, incrementAnimationCount)), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))] }))] })) }))] }))); };
-    return (_jsxs(StyledAside, __assign({ "aria-label": messages['site-navigation'] }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
+    return (_jsxs(StyledAside, __assign({ "aria-label": messages['site-navigation'], "data-id": dataIds.VerticalNavigationContainer }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
                     display: isPersistent ? 'none' : 'block'
                 } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));
 };

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -21,11 +21,13 @@ import { Person, Settings } from '@mui/icons-material';
 import { animated } from '@react-spring/web';
 import { FlyoutMenuItemText } from './VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles';
 import { defaultMessages } from '../../../lang/en-us';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 var AvatarPanel = function (props) {
     var _a;
     var theme = useTheme();
-    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization;
+    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes;
     var messages = __assign(__assign({}, defaultMessages), localization);
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     useEffect(function () {
         setAvatarInitials(handleAvatarInitials(avatarName));
     }, [avatarName]);
@@ -38,7 +40,7 @@ var AvatarPanel = function (props) {
             // @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(isAvatarOpen, animationCount, incrementAnimationCount)), onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : messages.logout }))), _jsxs(Box, __assign({ style: {
+                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(isAvatarOpen, animationCount, incrementAnimationCount)), onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : messages.logout }))), _jsxs(Box, __assign({ "data-id": dataIds.VerticalNavigationAvatarProfile, style: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
@@ -46,10 +48,10 @@ var AvatarPanel = function (props) {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
-                } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
+                } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: {
                             marginBottom: theme.spacing(2),
                             maxWidth: '14rem'
-                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
+                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
                             // TODO: figure out if these are links or buttons
                             // @ts-expect-error
                             , __assign({ 
@@ -59,9 +61,9 @@ var AvatarPanel = function (props) {
                     // @ts-expect-error
                     , __assign({ 
                         // @ts-expect-error
-                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
+                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
                             avatarPanelSettingItems.length > 0 &&
-                            avatarPanelSettingItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            avatarPanelSettingItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem, component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
                                 , __assign({ 
@@ -69,6 +71,6 @@ var AvatarPanel = function (props) {
                                     // @ts-expect-error
                                     component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                 minWidth: theme.spacing(5)
-                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index))); }) }))] })), _jsx(Box, __assign({ className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
+                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index))); }) }))] })), _jsx(Box, __assign({ "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
 };
 export default AvatarPanel;

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

@@ -7,6 +7,7 @@ export interface IVerticalNavigationItemFlyoutMenuProps {
     hasFlyout?: boolean;
     content?: React.ReactElement;
     style?: any;
+    dataAttributes?: any;
     fullHeightFlyout?: boolean;
     anchorEl?: null | HTMLElement;
     open?: boolean;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js

@@ -13,10 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Link } from '../../../../index';
 import { FullHeightFlyoutMenuPaper, FullHeightFlyoutMenuWrapper, FlyoutNotchMask, NotchMini, FlyoutMenuHeader, FlyoutMenuPaper, FlyoutMenuWrap, FlyoutMenuList, FlyoutMenuButton, FlyoutMenuItem, FlyoutMenuItemText } from './VerticalNavigationItemFlyoutMenuStyles';
+import { defaultAttributes } from '../../../../utils/dataAttributes';
 var VerticalNavigationItemFlyoutMenu = forwardRef(function (props, ref) {
-    var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, open = props.open, parentItemRef = props.parentItemRef, content = props.content, anchorEl = props.anchorEl, setAnchorEl = props.setAnchorEl, setIsFlyoutHovered = props.setIsFlyoutHovered;
+    var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, open = props.open, parentItemRef = props.parentItemRef, dataAttributes = props.dataAttributes, content = props.content, anchorEl = props.anchorEl, setAnchorEl = props.setAnchorEl, setIsFlyoutHovered = props.setIsFlyoutHovered;
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     if (fullHeightFlyout && content) {
-        return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel" }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
+        return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel", "data-id": dataIds.VerticalNavigationAvatarPanel }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
     }
     var handleKeyDown = function (event) {
         if (!event) {
@@ -32,10 +34,10 @@ var VerticalNavigationItemFlyoutMenu = forwardRef(function (props, ref) {
             }, CLOSE_SUBMENU_DELAY);
         }
     };
-    return (_jsx(FlyoutMenuPaper, __assign({ ref: ref, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setIsFlyoutHovered(true); }, onMouseLeave: function () { return setIsFlyoutHovered(false); }, onFocus: function () { return setIsFlyoutHovered(true); }, onBlur: function () { return setIsFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
+    return (_jsx(FlyoutMenuPaper, __assign({ ref: ref, "data-id": dataIds.VerticalNavigationFlyout, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setIsFlyoutHovered(true); }, onMouseLeave: function () { return setIsFlyoutHovered(false); }, onFocus: function () { return setIsFlyoutHovered(true); }, onBlur: function () { return setIsFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem }, { children: _jsx(FlyoutMenuButton
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: Link, role: 'link', onClick: childItem.onClick, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); } }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }, "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
+                            component: Link, role: 'link', onClick: childItem.onClick, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); } }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }), "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
 });
 export default VerticalNavigationItemFlyoutMenu;

package/components/stream/AppSwitcher/AppSwitcher.d.ts

@@ -13,6 +13,7 @@ interface IProps {
     isAppSwitcherOpen?: boolean;
     setIsAppSwitcherOpen?: any;
     isDrawerOpen?: boolean;
+    dataAttributes?: any;
 }
 declare const AppSwitcher: {
     (props: IProps): ReactElement | null;

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -55,9 +55,10 @@ import AppSwitcherItem, { LogoVariants } from './AppSwitcherItem';
 import { AppListHeader, AppListItem, AppOrganisationCount, StyledSVG, BackButton, MenuContent, OrganisationLink, OrganisationList, SearchBox, SearchContent, SelectedOrganisation, AppSwitcherPanel } from './AppSwitcherStyles';
 import { Constants } from './constants';
 import { DRAWER_WIDTH } from '../../navigation/VerticalNavigation/VerticalNavigationStyles';
+import { defaultAttributes } from '../../../utils/dataAttributes';
 var AppSwitcher = function (props) {
     var _a;
-    var isAppSwitcherOpen = props.isAppSwitcherOpen, setIsAppSwitcherOpen = props.setIsAppSwitcherOpen, isDrawerOpen = props.isDrawerOpen, localization = props.localization, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
+    var isAppSwitcherOpen = props.isAppSwitcherOpen, setIsAppSwitcherOpen = props.setIsAppSwitcherOpen, isDrawerOpen = props.isDrawerOpen, localization = props.localization, dataAttributes = props.dataAttributes, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
     var token = props.token;
     // Holds the applications which are displayed.
     var _c = useState([]), applications = _c[0], setApplications = _c[1];
@@ -70,6 +71,7 @@ var AppSwitcher = function (props) {
     // Stores any org filter text (on the second tab).
     var _g = useState(''), searchString = _g[0], setSearchString = _g[1];
     var messages = __assign(__assign({}, defaultMessages), localization);
+    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
     /**
      * Handles closing of the application dialog.
@@ -264,20 +266,20 @@ var AppSwitcher = function (props) {
     return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
             display: isAppSwitcherOpen ? 'block' : 'none',
             left: isDrawerOpen ? DRAWER_WIDTH.Expanded : DRAWER_WIDTH.Collapsed - 3
-        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown }, { children: [activeTab === Constants.Tabs.ListApplications
-                ? (_jsxs("div", { children: [_jsxs(AppListHeader, { children: [_jsx("svg", { children: _jsx("image", { xlinkHref: "".concat(Constants.AssetsUrl, "suite/logo/latest/icon.svg"), width: "24", height: "24" }) }), messages['your-apps']] }), _jsx(MenuContent, __assign({ style: {
+        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer }, { children: [activeTab === Constants.Tabs.ListApplications
+                ? (_jsxs("div", { children: [_jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [_jsx("svg", { children: _jsx("image", { xlinkHref: "".concat(Constants.AssetsUrl, "suite/logo/latest/icon.svg"), width: "24", height: "24" }) }), messages['your-apps']] })), _jsx(MenuContent, __assign({ style: {
                                 display: activeTab === 1 ? 'flex' : 'none'
-                            } }, { children: applications.map(function (_a) {
+                            }, "data-id": dataIds.AppSwitcherList }, { children: applications.map(function (_a) {
                                 var applicationId = _a.applicationId, applicationName = _a.applicationName, shortName = _a.shortName, customName = _a.customName, internalName = _a.internalName, url = _a.url, children = _a.children;
-                                return (_jsxs(AppListItem, { children: [url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, customName: customName, url: url, handleGoToAppClick: handleGoToAppClick })), !url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, customName: customName, handleGoToAppClick: handleGoToAppClick, applicationId: applicationId })), children && (_jsx(AppOrganisationCount, { children: children.length }))] }, applicationId));
+                                return (_jsxs(AppListItem, __assign({ "data-id": dataIds.AppSwitcherItem }, { children: [url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, customName: customName, url: url, handleGoToAppClick: handleGoToAppClick })), !url && (_jsx(AppSwitcherItem, { internalName: internalName, shortName: shortName, customName: customName, handleGoToAppClick: handleGoToAppClick, applicationId: applicationId })), children && (_jsx(AppOrganisationCount, __assign({ "data-id": dataIds.AppSwitcherOrgCount }, { children: children.length })))] }), applicationId));
                             }) }))] }))
                 : null, activeTab === Constants.Tabs.ListOrgs
                 ? (_jsxs(SearchContent, __assign({ style: {
                         display: activeTab === 2 ? 'flex' : 'none'
-                    } }, { children: [_jsxs(BackButton, __assign({ onClick: function () {
+                    }, "data-id": dataIds.AppSwitcherOrgPanel }, { children: [_jsxs(BackButton, __assign({ onClick: function () {
                                 setActiveTab(Constants.Tabs.ListApplications);
                                 setSearchString('');
-                            } }, { children: [_jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon" }, { children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })), messages['back-to']] })), _jsxs(SelectedOrganisation, { children: [renderApplicationLogo(activeApplication === null || activeApplication === void 0 ? void 0 : activeApplication.internalName, LogoVariants.Solid), _jsx("span", { children: activeApplication ? activeApplication.applicationName : '' })] }), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search }), _jsx(OrganisationList, { children: filteredOrgs === null || filteredOrgs === void 0 ? void 0 : filteredOrgs.filter(function (o) { return o.name.toLowerCase().includes(searchString.toLowerCase()); }).map(function (org, i) { return (_jsxs(OrganisationLink, __assign({ href: org.url, target: "_blank" }, { children: [org.name, _jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon" }, { children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }))] }), i)); }) })] })))
+                            }, "data-id": dataIds.AppSwitcherOrgBackButton }, { children: [_jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon" }, { children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })), messages['back-to']] })), _jsxs(SelectedOrganisation, __assign({ "data-id": dataIds.AppSwitcherOrgHeader }, { children: [renderApplicationLogo(activeApplication === null || activeApplication === void 0 ? void 0 : activeApplication.internalName, LogoVariants.Solid), _jsx("span", { children: activeApplication ? activeApplication.applicationName : '' })] })), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search, "data-id": dataIds.AppSwitcherOrgSearch }), _jsx(OrganisationList, __assign({ "data-id": dataIds.AppSwitcherOrgList }, { children: filteredOrgs === null || filteredOrgs === void 0 ? void 0 : filteredOrgs.filter(function (o) { return o.name.toLowerCase().includes(searchString.toLowerCase()); }).map(function (org, i) { return (_jsxs(OrganisationLink, __assign({ href: org.url, target: "_blank", "data-id": dataIds.AppSwitcherOrgItem }, { children: [org.name, _jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon" }, { children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }))] }), i)); }) }))] })))
                 : null] })));
 };
 AppSwitcher.propTypes = {

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.8.6",
+  "version": "1.8.7",
   "private": false,
   "main": "index.js",
   "module": "index.js",

package/types/components/navigation/VerticalNavigationAvatar.d.ts

@@ -8,6 +8,7 @@ export interface IAvatarPanelProps {
     editProfileText?: string;
     isAvatarOpen: boolean;
     localization?: any;
+    dataAttributes?: any;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;

package/utils/dataAttributes.d.ts

@@ -0,0 +1,57 @@
+export declare const defaultAttributes: {
+    VerticalNavigationContainer: string;
+    VerticalNavigationBrand: string;
+    VerticalNavigationToggle: string;
+    VerticalNavigationPrimary: string;
+    VerticalNavigationPrimaryList: string;
+    VerticalNavigationPrimaryListItem: string;
+    VerticalNavigationSecondary: string;
+    VerticalNavigationSecondaryList: string;
+    VerticalNavigationSecondaryListItem: string;
+    VerticalNavigationFlyout: string;
+    VerticalNavigationFlyoutList: string;
+    VerticalNavigationFlyoutListItem: string;
+    VerticalNavigationAppSwitcherToggle: string;
+    VerticalNavigationAvatarToggle: string;
+    VerticalNavigationAvatarPanel: string;
+    VerticalNavigationAvatarProfile: string;
+    VerticalNavigationAvatarList: string;
+    VerticalNavigationAvatarListItem: string;
+    VerticalNavigationAvatarFootnote: string;
+    MobileNavContainer: string;
+    MobileNavDrawerToggle: string;
+    MobileNavDrawerPanel: string;
+    MobileNavDrawerBrand: string;
+    MobileNavDrawerPrimaryList: string;
+    MobileNavDrawerPrimaryItem: string;
+    MobileNavDrawerPrimaryChildList: string;
+    MobileNavDrawerPrimaryChildItem: string;
+    MobileNavDrawerSecondaryList: string;
+    MobileNavDrawerSecondaryItem: string;
+    MobileNavSearchToggle: string;
+    MobileNavSearchPanel: string;
+    MobileNavSearchForm: string;
+    MobileNavAvatarToggle: string;
+    MobileNavAvatarPanel: string;
+    MobileNavAvatarProfile: string;
+    MobileNavAvatarList: string;
+    MobileNavAvatarItem: string;
+    AppSwitcherContainer: string;
+    AppSwitcherHeader: string;
+    AppSwitcherList: string;
+    AppSwitcherItem: string;
+    AppSwitcherOrgCount: string;
+    AppSwitcherOrgPanel: string;
+    AppSwitcherOrgBackButton: string;
+    AppSwitcherOrgHeader: string;
+    AppSwitcherOrgSearch: string;
+    AppSwitcherOrgList: string;
+    AppSwitcherOrgItem: string;
+    HeaderContainer: string;
+    HeaderBreadcrumb: string;
+    HeaderTitle: string;
+    HeaderSubtitle: string;
+    HeaderActions: string;
+    HeaderActionsMain: string;
+    HeaderActionsSecondary: string;
+};

package/utils/dataAttributes.js

@@ -0,0 +1,61 @@
+export var defaultAttributes = {
+    // VerticalNavigation data IDs
+    VerticalNavigationContainer: 'vertnav-container',
+    VerticalNavigationBrand: 'vertnav-brand',
+    VerticalNavigationToggle: 'vertnav-toggle',
+    VerticalNavigationPrimary: 'vertnav-primary',
+    VerticalNavigationPrimaryList: 'vertnav-primary-list',
+    VerticalNavigationPrimaryListItem: 'vertnav-primary-list-item',
+    VerticalNavigationSecondary: 'vertnav-secondary',
+    VerticalNavigationSecondaryList: 'vertnav-secondary-list',
+    VerticalNavigationSecondaryListItem: 'vertnav-secondary-list-item',
+    VerticalNavigationFlyout: 'vertnav-flyout',
+    VerticalNavigationFlyoutList: 'vertnav-flyout-list',
+    VerticalNavigationFlyoutListItem: 'vertnav-flyout-list-item',
+    VerticalNavigationAppSwitcherToggle: 'vertnav-appSwitcher-toggle',
+    VerticalNavigationAvatarToggle: 'vertnav-avatar-toggle',
+    VerticalNavigationAvatarPanel: 'vertnav-avatar-panel',
+    VerticalNavigationAvatarProfile: 'vertnav-avatar-profile',
+    VerticalNavigationAvatarList: 'vertnav-avatar-list',
+    VerticalNavigationAvatarListItem: 'vertnav-avatar-list-item',
+    VerticalNavigationAvatarFootnote: 'vertnav-avatar-footnote',
+    // MobileNavigation data IDs
+    MobileNavContainer: 'mobilenav-container',
+    MobileNavDrawerToggle: 'mobilenav-drawer-toggle',
+    MobileNavDrawerPanel: 'mobilenav-drawer-panel',
+    MobileNavDrawerBrand: 'mobilenav-drawer-brand',
+    MobileNavDrawerPrimaryList: 'mobilenav-drawer-primary-list',
+    MobileNavDrawerPrimaryItem: 'mobilenav-drawer-primary-item',
+    MobileNavDrawerPrimaryChildList: 'mobilenav-drawer-primary-child-list',
+    MobileNavDrawerPrimaryChildItem: 'mobilenav-drawer-primary-child-item',
+    MobileNavDrawerSecondaryList: 'mobilenav-drawer-secondary-list',
+    MobileNavDrawerSecondaryItem: 'mobilenav-drawer-secondary-item',
+    MobileNavSearchToggle: 'mobilenav-search-toggle',
+    MobileNavSearchPanel: 'mobilenav-search-panel',
+    MobileNavSearchForm: 'mobilenav-search-form',
+    MobileNavAvatarToggle: 'mobilenav-avatar-toggle',
+    MobileNavAvatarPanel: 'mobilenav-avatar-panel',
+    MobileNavAvatarProfile: 'mobilenav-avatar-profile',
+    MobileNavAvatarList: 'mobilenav-avatar-list',
+    MobileNavAvatarItem: 'mobilenav-avatar-item',
+    // AppSwitcher data IDs
+    AppSwitcherContainer: 'appswitcher-container',
+    AppSwitcherHeader: 'appswitcher-header',
+    AppSwitcherList: 'appswitcher-list',
+    AppSwitcherItem: 'appswitcher-item',
+    AppSwitcherOrgCount: 'appswitcher-org-count',
+    AppSwitcherOrgPanel: 'appswitcher-org-panel',
+    AppSwitcherOrgBackButton: 'appswitcher-org-back-button',
+    AppSwitcherOrgHeader: 'appswitcher-org-header',
+    AppSwitcherOrgSearch: 'appswitcher-org-search',
+    AppSwitcherOrgList: 'appswitcher-org-list',
+    AppSwitcherOrgItem: 'appswitcher-org-item',
+    // Header data IDs
+    HeaderContainer: 'header-container',
+    HeaderBreadcrumb: 'header-breadcrumb',
+    HeaderTitle: 'header-title',
+    HeaderSubtitle: 'header-subtitle',
+    HeaderActions: 'header-actions',
+    HeaderActionsMain: 'header-actions-main',
+    HeaderActionsSecondary: 'header-actions-secondary'
+};