box-ui-elements 23.4.0-beta.21 → 23.4.0-beta.23

package/src/elements/common/nav-router/__tests__/withNavRouter.test.tsx

@@ -1,41 +1,55 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
-import { createMemoryHistory } from 'history';
-import NavRouter from '../NavRouter';
+import { render } from '../../../../test-utils/testing-library';
 import withNavRouter from '../withNavRouter';
 import { WithNavRouterProps } from '../types';
 
+jest.mock('../NavRouter', () => ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="nav-router-wrapper">{children}</div>
+));
+
 type Props = {
     value?: string;
 };
 
 describe('src/eleemnts/common/nav-router/withNavRouter', () => {
-    const TestComponent = ({ value }: Props) => <div>{`Test ${value}`}</div>;
+    const TestComponent = ({ value }: Props) => <div data-testid="test-component">{`Test ${value}`}</div>;
     const WrappedComponent = withNavRouter(TestComponent);
 
-    const getWrapper = (props?: Props & WithNavRouterProps) => shallow(<WrappedComponent {...props} />);
+    const renderComponent = (props?: Props & WithNavRouterProps) => 
+        render(<WrappedComponent {...props} />);
 
     test('should wrap component with NavRouter', () => {
-        const wrapper = getWrapper();
+        const { getByTestId } = renderComponent();
+
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test undefined');
+        expect(getByTestId('nav-router-wrapper')).toBeInTheDocument();
+    });
 
-        expect(wrapper.find(NavRouter)).toBeTruthy();
-        expect(wrapper.find(TestComponent)).toBeTruthy();
+    test('should pass props to wrapped component', () => {
+        const { getByTestId } = renderComponent({ value: 'test-value' });
+
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test test-value');
     });
 
-    test('should provide the appropriate props to NavRouter and the wrapped component', () => {
-        const history = createMemoryHistory();
-        const initialEntries = ['foo'];
-        const value = 'foo';
-        const wrapper = getWrapper({
-            history,
-            initialEntries,
-            value,
+    describe('when routerDisabled feature flag is provided', () => {
+        test('should return unwrapped component when feature flag is true', () => {
+            const features = { routerDisabled: { value: true } };
+            const { getByTestId, queryByTestId } = renderComponent({ features });
+
+            expect(getByTestId('test-component')).toBeInTheDocument();
+            expect(getByTestId('test-component')).toHaveTextContent('Test undefined');
+            expect(queryByTestId('nav-router-wrapper')).not.toBeInTheDocument();
         });
 
-        const navRouter = wrapper.find(NavRouter);
-        expect(navRouter.prop('history')).toEqual(history);
-        expect(navRouter.prop('initialEntries')).toEqual(initialEntries);
+        test('should wrap component with NavRouter when feature flag is false', () => {
+            const features = { routerDisabled: { value: false } };
+            const { getByTestId } = renderComponent({ features });
 
-        expect(wrapper.find(TestComponent).prop('value')).toEqual(value);
+            expect(getByTestId('test-component')).toBeInTheDocument();
+            expect(getByTestId('test-component')).toHaveTextContent('Test undefined');
+            expect(getByTestId('nav-router-wrapper')).toBeInTheDocument();
+        });
     });
 });

package/src/elements/common/nav-router/types.ts

@@ -1,6 +1,8 @@
 import { History } from 'history';
+import { FeatureConfig } from '../feature-checking';
 
 export type WithNavRouterProps = {
+    features?: FeatureConfig;
     history?: History;
     initialEntries?: History.LocationDescriptor[];
 };

package/src/elements/common/nav-router/withNavRouter.js.flow

@@ -6,9 +6,14 @@
 
 import React from "react";
 import { History } from "history";
+import { type FeatureConfig } from '../feature-checking';
 import NavRouter from "./NavRouter";
+
 export type WithNavRouterProps = {
+  features?: FeatureConfig,
   history?: History,
+  initialEntries?: Array<any>,
   ...
 };
+
 declare export var withNavRouter: any; // /* NO PRINT IMPLEMENTED: ArrowFunction */ any

package/src/elements/common/nav-router/withNavRouter.tsx

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import NavRouter from './NavRouter';
 import { WithNavRouterProps } from './types';
+import { isFeatureEnabled } from '../feature-checking';
 
 const withNavRouter = <P extends object>(Component: React.ComponentType<P>): React.FC<P & WithNavRouterProps> => {
     function WithNavRouter({ history, initialEntries, ...rest }: P & WithNavRouterProps) {
+        const { features } = rest;
+        const isRouterDisabled = isFeatureEnabled(features, 'routerDisabled.value');
+        
+        if (isRouterDisabled) {
+            return <Component {...(rest as P)} />;
+        }
+
         return (
-            <NavRouter history={history} initialEntries={initialEntries}>
+            <NavRouter history={history} initialEntries={initialEntries} features={features}>
                 <Component {...(rest as P)} />
             </NavRouter>
         );

package/src/elements/common/routing/__tests__/withRouterAndRef.test.js

@@ -1,26 +1,78 @@
 // @flow
 import * as React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { mount } from 'enzyme';
+import { render } from '../../../../test-utils/testing-library';
 import withRouterAndRef from '../withRouterAndRef';
 
 describe('elements/common/routing/withRouterAndRef', () => {
     type Props = {
         value: string,
+        routerDisabled?: boolean,
     };
 
-    const TestComponent = React.forwardRef(({ value }: Props, ref) => <div ref={ref}>{value}</div>);
+    const TestComponent = React.forwardRef(({ value, staticContext, routerDisabled, ...props }: Props, ref) => (
+        <div ref={ref} data-testid="test-component" data-router-disabled={routerDisabled} {...props}>
+            {value}
+        </div>
+    ));
+    TestComponent.displayName = 'TestComponent';
+    
     const WithRouterComponent = withRouterAndRef(TestComponent);
 
-    test('should pass ref down to wrapped component', () => {
-        const ref = React.createRef();
-        const wrapper = mount(
-            <MemoryRouter>
-                <WithRouterComponent ref={ref} value="foo" />
-            </MemoryRouter>,
-        );
-        const referenced = wrapper.find('div').getDOMNode();
-        expect(ref.current).toEqual(referenced);
-        expect(referenced.innerHTML).toEqual('foo');
+    describe('router enabled (default)', () => {
+        test('should pass ref and router props to wrapped component', () => {
+            const ref = React.createRef();
+            const { getByTestId } = render(
+                <MemoryRouter initialEntries={['/test']}>
+                    <WithRouterComponent ref={ref} value="test" />
+                </MemoryRouter>,
+            );
+            
+            const element = getByTestId('test-component');
+            expect(ref.current).toBe(element);
+            expect(element).toHaveTextContent('test');
+            expect(element).not.toHaveAttribute('data-router-disabled');
+        });
+    });
+
+    describe('router disabled', () => {
+        test('should pass ref down to wrapped component without router', () => {
+            const ref = React.createRef();
+            const { getByTestId } = render(
+                <WithRouterComponent ref={ref} value="foo" routerDisabled />
+            );
+            
+            const element = getByTestId('test-component');
+            expect(ref.current).toBe(element);
+            expect(element).toHaveTextContent('foo');
+            expect(element).toHaveAttribute('data-router-disabled', 'true');
+        });
+
+        test('should render component directly without Route wrapper', () => {
+            const { getByTestId } = render(
+                <WithRouterComponent value="direct" routerDisabled />
+            );
+            
+            const element = getByTestId('test-component');
+            expect(element).toHaveTextContent('direct');
+            expect(element).toHaveAttribute('data-router-disabled', 'true');
+        });
+
+        test('should pass through all props including routerDisabled', () => {
+            const { getByTestId } = render(
+                <WithRouterComponent 
+                    value="test" 
+                    routerDisabled 
+                    data-custom="custom-value"
+                    className="test-class"
+                />
+            );
+            
+            const element = getByTestId('test-component');
+            expect(element).toHaveTextContent('test');
+            expect(element).toHaveAttribute('data-custom', 'custom-value');
+            expect(element).toHaveClass('test-class');
+            expect(element).toHaveAttribute('data-router-disabled', 'true');
+        });
     });
 });

package/src/elements/common/routing/withRouterAndRef.js

@@ -5,9 +5,17 @@ import { Route } from 'react-router-dom';
 // Basically a workaround for the fact that react-router's withRouter cannot forward ref's through
 // functional components. Use this instead to gain the benefits of withRouter but also ref forwarding
 export default function withRouterAndRef(Wrapped: React.ComponentType<any>) {
-    const WithRouterAndRef = React.forwardRef<Object, React.Ref<any>>((props, ref) => (
-        <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>
-    ));
+    const WithRouterAndRef = React.forwardRef<Object, React.Ref<any>>((props, ref) => {
+        const { routerDisabled } = props;
+        
+        // If router is disabled, return component directly without Route wrapper
+        if (routerDisabled) {
+            return <Wrapped ref={ref} {...props} />;
+        }
+        
+        // Default behavior: wrap with Route to get router props
+        return <Route>{routeProps => <Wrapped ref={ref} {...routeProps} {...props} />}</Route>;
+    });
     const name = Wrapped.displayName || Wrapped.name || 'Component';
     WithRouterAndRef.displayName = `withRouterAndRef(${name})`;
     return WithRouterAndRef;

package/src/elements/content-explorer/stories/tests/ContentExplorer-visual.stories.js

@@ -5,6 +5,7 @@ import ContentExplorer from '../../ContentExplorer';
 import { mockEmptyRootFolder, mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
 import mockSubfolder from '../../../common/__mocks__/mockSubfolder';
 import mockRecentItems from '../../../common/__mocks__/mockRecentItems';
+import { mockUserRequest } from '../../../common/__mocks__/mockRequests';
 
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 
@@ -227,10 +228,38 @@ export const closeCreateFolderDialog = {
 //     },
 // };
 
+const defaultHandlers = [
+    http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/69083462919`, () => {
+        return HttpResponse.json(mockRootFolder);
+    }),
+    http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/73426618530`, () => {
+        return HttpResponse.json(mockSubfolder);
+    }),
+    http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/74729718131`, () => {
+        return HttpResponse.json(mockEmptyRootFolder);
+    }),
+    http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/191354690948`, () => {
+        return new HttpResponse('Internal Server Error', { status: 500 });
+    }),
+    http.get(`${DEFAULT_HOSTNAME_API}/2.0/recent_items`, () => {
+        return HttpResponse.json(mockRecentItems);
+    }),
+];
+
 export const emptyState = {
     args: {
         rootFolderId: '74729718131',
     },
+    parameters: {
+        msw: {
+            handlers: [
+                ...defaultHandlers,
+                http.get(mockUserRequest.url, () => {
+                    return HttpResponse.json(mockUserRequest.response);
+                }),
+            ],
+        },
+    },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         await waitFor(() => {
@@ -271,23 +300,7 @@ export default {
     },
     parameters: {
         msw: {
-            handlers: [
-                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/69083462919`, () => {
-                    return HttpResponse.json(mockRootFolder);
-                }),
-                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/73426618530`, () => {
-                    return HttpResponse.json(mockSubfolder);
-                }),
-                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/74729718131`, () => {
-                    return HttpResponse.json(mockEmptyRootFolder);
-                }),
-                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/191354690948`, () => {
-                    return new HttpResponse('Internal Server Error', { status: 500 });
-                }),
-                http.get(`${DEFAULT_HOSTNAME_API}/2.0/recent_items`, () => {
-                    return HttpResponse.json(mockRecentItems);
-                }),
-            ],
+            handlers: defaultHandlers,
         },
     },
 };

package/src/elements/content-sidebar/ContentSidebar.js

@@ -349,6 +349,7 @@ class ContentSidebar extends React.Component<Props, State> {
             defaultView,
             detailsSidebarProps,
             docGenSidebarProps,
+            features,
             fileId,
             getPreview,
             getViewer,
@@ -382,7 +383,7 @@ class ContentSidebar extends React.Component<Props, State> {
         return (
             <Internationalize language={language} messages={messages}>
                 <APIContext.Provider value={(this.api: any)}>
-                    <NavRouter history={history} initialEntries={[initialPath]}>
+                    <NavRouter history={history} initialEntries={[initialPath]} features={features}>
                         <TooltipProvider>
                             <Sidebar
                                 activitySidebarProps={activitySidebarProps}

package/src/elements/content-sidebar/SidebarNavButton.js

@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { Button } from '@box/blueprint-web';
 import Tooltip from '../../components/tooltip/Tooltip';
 import { isLeftClick } from '../../utils/dom';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler, ViewTypeValues } from '../common/types/SidebarNavigation';
 import './SidebarNavButton.scss';
 
 type Props = {
@@ -18,10 +19,13 @@ type Props = {
     'data-testid'?: string,
     children: React.Node,
     elementId?: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isDisabled?: boolean,
     isOpen?: boolean,
-    onClick?: (sidebarView: string) => void,
-    sidebarView: string,
+    onClick?: (sidebarView: ViewTypeValues) => void,
+    routerDisabled?: boolean,
+    sidebarView: ViewTypeValues,
     tooltip: React.Node,
 };
 
@@ -31,13 +35,72 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
         'data-testid': dataTestId,
         children,
         elementId = '',
+        internalSidebarNavigation,
+        internalSidebarNavigationHandler,
         isDisabled,
         isOpen,
         onClick = noop,
+        routerDisabled = false,
         sidebarView,
         tooltip,
     } = props;
     const sidebarPath = `/${sidebarView}`;
+    const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
+
+    if (routerDisabled) {
+        // Mimic router behavior using internalSidebarNavigation
+        const isMatch = !!internalSidebarNavigation && internalSidebarNavigation.sidebar === sidebarView;
+        const isActiveValue = isMatch && !!isOpen;
+        
+        // Mimic isExactMatch: true when no extra navigation parameters are present
+        const hasExtraParams = internalSidebarNavigation && (
+            internalSidebarNavigation.versionId ||
+            internalSidebarNavigation.activeFeedEntryType ||
+            internalSidebarNavigation.activeFeedEntryId ||
+            internalSidebarNavigation.fileVersionId
+        );
+        const isExactMatch = isMatch && !hasExtraParams;
+        
+        const handleNavButtonClick = event => {
+            onClick(sidebarView);
+            
+            // Mimic router navigation behavior
+            if (internalSidebarNavigationHandler && !event.defaultPrevented && isLeftClick(event)) {
+                const replace = isExactMatch;
+                internalSidebarNavigationHandler({
+                    sidebar: sidebarView,
+                    open: true,
+                }, replace);
+            }
+        };
+
+        return (
+            <Tooltip position="middle-left" text={tooltip} isTabbable={false}>
+                <Button
+                    accessibleWhenDisabled={true}
+                    aria-controls={`${id}-content`}
+                    aria-label={tooltip}
+                    aria-selected={isActiveValue}
+                    className={classNames('bcs-NavButton', {
+                        'bcs-is-selected': isActiveValue,
+                        'bdl-is-disabled': isDisabled,
+                    })}
+                    data-resin-target={dataResinTarget}
+                    data-testid={dataTestId}
+                    ref={ref}
+                    id={id}
+                    disabled={isDisabled}
+                    onClick={handleNavButtonClick}
+                    role="tab"
+                    tabIndex={isActiveValue ? '0' : '-1'}
+                    type="button"
+                    variant="tertiary"
+                >
+                    {children}
+                </Button>
+            </Tooltip>
+        );
+    }
 
     return (
         <Route path={sidebarPath}>
@@ -45,7 +108,6 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
                 const isMatch = !!match;
                 const isActiveValue = isMatch && !!isOpen;
                 const isExactMatch = isMatch && match.isExact;
-                const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
 
                 const handleNavButtonClick = event => {
                     onClick(sidebarView);

package/src/elements/content-sidebar/SidebarToggle.js

@@ -8,23 +8,46 @@ import * as React from 'react';
 import { withRouter, type RouterHistory } from 'react-router-dom';
 import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {
-    history: RouterHistory,
+    history?: RouterHistory,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isOpen?: boolean,
+    routerDisabled?: boolean,
 };
 
-const SidebarToggle = ({ history, isOpen }: Props) => {
+const SidebarToggle = ({ 
+    history, 
+    internalSidebarNavigation,
+    internalSidebarNavigationHandler,
+    isOpen,
+    routerDisabled = false,
+}: Props) => {
+    const handleToggleClick = event => {
+        event.preventDefault();
+        
+        if (routerDisabled) {
+            // Use internal navigation handler when router is disabled
+            if (internalSidebarNavigationHandler && internalSidebarNavigation) {
+                internalSidebarNavigationHandler({
+                    ...internalSidebarNavigation,
+                    open: !isOpen,
+                }, true); // Always use replace for toggle
+            }
+        } else if (history) {
+            history.replace({ state: { open: !isOpen } });
+        }
+    };
+
     return (
         <SidebarToggleButton
             data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}
             data-testid="sidebartoggle"
             // $FlowFixMe
             isOpen={isOpen}
-            onClick={event => {
-                event.preventDefault();
-                history.replace({ state: { open: !isOpen } });
-            }}
+            onClick={handleToggleClick}
         />
     );
 };

package/src/elements/content-sidebar/__tests__/SidebarNavButton.test.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MemoryRouter, Router } from 'react-router-dom';
+// Using fireEvent for all click interactions instead of userEvent because 
+// userEvent.pointer with right-click doesn't reliably trigger onClick handlers
 import { render, screen, fireEvent } from '../../../test-utils/testing-library';
 import SidebarNavButton from '../SidebarNavButton';
 
@@ -197,7 +199,7 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
             renderWithRouter({ onClick: mockOnClick }, mockHistoryWithDifferentPath);
 
             const button = screen.getByText('Activity');
-            fireEvent.click(button, { button: 0 });
+            fireEvent.click(button);
 
             expect(mockOnClick).toBeCalledWith('activity');
             expect(mockHistoryPush).toBeCalledWith({
@@ -213,7 +215,7 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
             renderWithRouter({ onClick: mockOnClick });
 
             const button = screen.getByText('Activity');
-            fireEvent.click(button, { button: 0 });
+            fireEvent.click(button);
 
             expect(mockOnClick).toBeCalledWith('activity');
             expect(mockHistoryReplace).toBeCalledWith({
@@ -243,7 +245,6 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
 
             const button = screen.getByText('Activity');
 
-            // Prevent default on the button click
             button.addEventListener('click', e => e.preventDefault());
             fireEvent.click(button, { button: 0 });
 
@@ -253,3 +254,154 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
         });
     });
 });
+
+describe('elements/content-sidebar/SidebarNavButton - Router Disabled', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const defaultProps = {
+        routerDisabled: true,
+        tooltip: 'foo',
+        sidebarView: 'activity',
+        internalSidebarNavigation: { sidebar: 'skills' },
+    };
+
+    const renderWithoutRouter = ({ children = 'test button', ref, ...props }) =>
+        render(
+            <SidebarNavButton ref={ref} {...defaultProps} {...props}>
+                {children}
+            </SidebarNavButton>,
+        );
+
+    test('should render nav button properly', () => {
+        renderWithoutRouter({});
+        const button = screen.getByRole('tab');
+
+        expect(button).toHaveAttribute('aria-label', 'foo');
+        expect(button).toHaveAttribute('aria-selected', 'false');
+        expect(button).toHaveAttribute('aria-controls', 'activity-content');
+        expect(button).toHaveAttribute('role', 'tab');
+        expect(button).toHaveAttribute('tabindex', '-1');
+        expect(button).toHaveAttribute('type', 'button');
+        expect(button).toHaveAttribute('id', 'activity');
+        expect(button).toHaveClass('bcs-NavButton');
+        expect(button).not.toHaveClass('bcs-is-selected');
+        expect(button).toHaveTextContent('test button');
+    });
+
+    test.each`
+        internalSidebarNavigation                        | expected
+        ${null}                                         | ${false}
+        ${undefined}                                    | ${false}
+        ${{ sidebar: 'skills' }}                        | ${false}
+        ${{ sidebar: 'activity' }}                      | ${true}
+        ${{ sidebar: 'activity', versionId: '123' }}    | ${true}
+    `('should reflect active state ($expected) correctly based on internal navigation', ({ expected, internalSidebarNavigation }) => {
+        renderWithoutRouter({
+            internalSidebarNavigation,
+            isOpen: true,
+        });
+        const button = screen.getByRole('tab');
+
+        if (expected) {
+            expect(button).toHaveClass('bcs-is-selected');
+            expect(button).toHaveAttribute('aria-selected', 'true');
+            expect(button).toHaveAttribute('tabindex', '0');
+        } else {
+            expect(button).not.toHaveClass('bcs-is-selected');
+            expect(button).toHaveAttribute('aria-selected', 'false');
+            expect(button).toHaveAttribute('tabindex', '-1');
+        }
+    });
+
+    test('should call onClick with sidebarView when clicked', () => {
+        const mockOnClick = jest.fn();
+        const mockSidebarView = 'activity';
+
+        renderWithoutRouter({
+            onClick: mockOnClick,
+            sidebarView: mockSidebarView,
+        });
+        const button = screen.getByRole('tab');
+
+        fireEvent.click(button);
+        expect(mockOnClick).toBeCalledWith(mockSidebarView);
+    });
+
+    describe('navigation on click', () => {
+        const mockInternalSidebarNavigationHandler = jest.fn();
+
+        test('calls onClick handler and internalSidebarNavigationHandler with replace=false when not exact match', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity', versionId: '123' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+            fireEvent.click(button);
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).toBeCalledWith({
+                sidebar: 'activity',
+                open: true,
+            }, false);
+        });
+
+        test('calls internalSidebarNavigationHandler with replace=true when exact match', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+            fireEvent.click(button);
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).toBeCalledWith({
+                sidebar: 'activity',
+                open: true,
+            }, true);
+        });
+
+        test('does not call internalSidebarNavigationHandler on right click', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+            fireEvent.click(button, { button: 1 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).not.toBeCalled();
+        });
+
+        test('does not call internalSidebarNavigationHandler on prevented event', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+
+            button.addEventListener('click', e => e.preventDefault());
+            fireEvent.click(button, { button: 0 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).not.toBeCalled();
+        });
+    });
+});