box-ui-elements 23.4.0-beta.17 → 23.4.0-beta.19

package/es/elements/content-sidebar/versions/VersionsSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"VersionsSidebar.js","names":["React","FormattedMessage","Route","InlineError","messages","SidebarContent","VersionsMenu","BackButton","DEFAULT_FETCH_END","LoadingIndicatorWrapper","MAX_VERSIONS","VersionsSidebar","_ref","error","isLoading","parentName","versions","rest","_objectWithoutProperties","_excluded","showLimit","length","showVersions","showEmpty","showError","createElement","history","className","title","Fragment","onClick","push","versionsTitle","crawlerPosition","versionServerError","versionsEmpty","_extends","versionMaxEntries","values","maxVersions"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsSidebar.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Sidebar component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { Route } from 'react-router-dom';\nimport type { MessageDescriptor } from 'react-intl';\nimport InlineError from '../../../components/inline-error';\nimport messages from './messages';\nimport SidebarContent from '../SidebarContent';\nimport VersionsMenu from './VersionsMenu';\nimport { BackButton } from '../../common/nav-button';\nimport { DEFAULT_FETCH_END } from '../../../constants';\nimport { LoadingIndicatorWrapper } from '../../../components/loading-indicator';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport './VersionsSidebar.scss';\n\nconst MAX_VERSIONS = DEFAULT_FETCH_END;\n\ntype Props = {\n    error?: MessageDescriptor,\n    fileId: string,\n    isLoading: boolean,\n    parentName: string,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => {\n    const showLimit = versions.length >= MAX_VERSIONS;\n    const showVersions = !!versions.length;\n    const showEmpty = !isLoading && !showVersions;\n    const showError = !!error;\n\n    return (\n        <Route>\n            {({ history }) => (\n                <SidebarContent\n                    className=\"bcs-Versions\"\n                    data-resin-component=\"preview\"\n                    data-resin-feature=\"versions\"\n                    title={\n                        <>\n                            <BackButton data-resin-target=\"back\" onClick={() => history.push(`/${parentName}`)} />\n                            <FormattedMessage {...messages.versionsTitle} />\n                        </>\n                    }\n                >\n                    <LoadingIndicatorWrapper\n                        className=\"bcs-Versions-content\"\n                        crawlerPosition=\"top\"\n                        isLoading={isLoading}\n                    >\n                        {showError && (\n                            <InlineError title={<FormattedMessage {...messages.versionServerError} />}>\n                                <FormattedMessage {...error} />\n                            </InlineError>\n                        )}\n\n                        {showEmpty && (\n                            <div className=\"bcs-Versions-empty\">\n                                <FormattedMessage {...messages.versionsEmpty} />\n                            </div>\n                        )}\n\n                        {showVersions && (\n                            <div className=\"bcs-Versions-menu\" data-testid=\"bcs-Versions-menu\">\n                                <VersionsMenu versions={versions} {...rest} />\n                            </div>\n                        )}\n                        {showLimit && (\n                            <div className=\"bcs-Versions-maxEntries\" data-testid=\"max-versions\">\n                                <FormattedMessage\n                                    {...messages.versionMaxEntries}\n                                    values={{\n                                        maxVersions: MAX_VERSIONS,\n                                    }}\n                                />\n                            </div>\n                        )}\n                    </LoadingIndicatorWrapper>\n                </SidebarContent>\n            )}\n        </Route>\n    );\n};\n\nexport default VersionsSidebar;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,KAAK,QAAQ,kBAAkB;AAExC,OAAOC,WAAW,MAAM,kCAAkC;AAC1D,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,YAAY,MAAM,gBAAgB;AACzC,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,uBAAuB,QAAQ,uCAAuC;AAE/E,OAAO,wBAAwB;AAE/B,MAAMC,YAAY,GAAGF,iBAAiB;AAYtC,MAAMG,eAAe,GAAGC,IAAA,IAAgE;EAAA,IAA/D;MAAEC,KAAK;MAAEC,SAAS;MAAEC,UAAU;MAAEC;IAAyB,CAAC,GAAAJ,IAAA;IAAbK,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EACtE,MAAMC,SAAS,GAAGJ,QAAQ,CAACK,MAAM,IAAIX,YAAY;EACjD,MAAMY,YAAY,GAAG,CAAC,CAACN,QAAQ,CAACK,MAAM;EACtC,MAAME,SAAS,GAAG,CAACT,SAAS,IAAI,CAACQ,YAAY;EAC7C,MAAME,SAAS,GAAG,CAAC,CAACX,KAAK;EAEzB,oBACIb,KAAA,CAAAyB,aAAA,CAACvB,KAAK,QACD,CAAC;IAAEwB;EAAQ,CAAC,kBACT1B,KAAA,CAAAyB,aAAA,CAACpB,cAAc;IACXsB,SAAS,EAAC,cAAc;IACxB,wBAAqB,SAAS;IAC9B,sBAAmB,UAAU;IAC7BC,KAAK,eACD5B,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA6B,QAAA,qBACI7B,KAAA,CAAAyB,aAAA,CAAClB,UAAU;MAAC,qBAAkB,MAAM;MAACuB,OAAO,EAAEA,CAAA,KAAMJ,OAAO,CAACK,IAAI,CAAC,IAAIhB,UAAU,EAAE;IAAE,CAAE,CAAC,eACtFf,KAAA,CAAAyB,aAAA,CAACxB,gBAAgB,EAAKG,QAAQ,CAAC4B,aAAgB,CACjD;EACL,gBAEDhC,KAAA,CAAAyB,aAAA,CAAChB,uBAAuB;IACpBkB,SAAS,EAAC,sBAAsB;IAChCM,eAAe,EAAC,KAAK;IACrBnB,SAAS,EAAEA;EAAU,GAEpBU,SAAS,iBACNxB,KAAA,CAAAyB,aAAA,CAACtB,WAAW;IAACyB,KAAK,eAAE5B,KAAA,CAAAyB,aAAA,CAACxB,gBAAgB,EAAKG,QAAQ,CAAC8B,kBAAqB;EAAE,gBACtElC,KAAA,CAAAyB,aAAA,CAACxB,gBAAgB,EAAKY,KAAQ,CACrB,CAChB,EAEAU,SAAS,iBACNvB,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAC;EAAoB,gBAC/B3B,KAAA,CAAAyB,aAAA,CAACxB,gBAAgB,EAAKG,QAAQ,CAAC+B,aAAgB,CAC9C,CACR,EAEAb,YAAY,iBACTtB,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAC,mBAAmB;IAAC,eAAY;EAAmB,gBAC9D3B,KAAA,CAAAyB,aAAA,CAACnB,YAAY,EAAA8B,QAAA;IAACpB,QAAQ,EAAEA;EAAS,GAAKC,IAAI,CAAG,CAC5C,CACR,EACAG,SAAS,iBACNpB,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAC,yBAAyB;IAAC,eAAY;EAAc,gBAC/D3B,KAAA,CAAAyB,aAAA,CAACxB,gBAAgB,EAAAmC,QAAA,KACThC,QAAQ,CAACiC,iBAAiB;IAC9BC,MAAM,EAAE;MACJC,WAAW,EAAE7B;IACjB;EAAE,EACL,CACA,CAEY,CACb,CAEjB,CAAC;AAEhB,CAAC;AAED,eAAeC,eAAe","ignoreList":[]}
+{"version":3,"file":"VersionsSidebar.js","names":["React","FormattedMessage","Route","InlineError","messages","SidebarContent","VersionsMenu","BackButton","DEFAULT_FETCH_END","LoadingIndicatorWrapper","MAX_VERSIONS","VersionsSidebar","_ref","error","isLoading","parentName","versions","rest","_objectWithoutProperties","_excluded","showLimit","length","showVersions","showEmpty","showError","createElement","history","className","title","Fragment","onClick","push","versionsTitle","crawlerPosition","versionServerError","versionsEmpty","_extends","versionMaxEntries","values","maxVersions"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsSidebar.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Sidebar component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { Route } from 'react-router-dom';\nimport type { MessageDescriptor } from 'react-intl';\nimport InlineError from '../../../components/inline-error';\nimport messages from './messages';\nimport SidebarContent from '../SidebarContent';\nimport VersionsMenu from './VersionsMenu';\nimport BackButton from '../../common/back-button';\nimport { DEFAULT_FETCH_END } from '../../../constants';\nimport { LoadingIndicatorWrapper } from '../../../components/loading-indicator';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport './VersionsSidebar.scss';\n\nconst MAX_VERSIONS = DEFAULT_FETCH_END;\n\ntype Props = {\n    error?: MessageDescriptor,\n    fileId: string,\n    isLoading: boolean,\n    parentName: string,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => {\n    const showLimit = versions.length >= MAX_VERSIONS;\n    const showVersions = !!versions.length;\n    const showEmpty = !isLoading && !showVersions;\n    const showError = !!error;\n\n    return (\n        <Route>\n            {({ history }) => (\n                <SidebarContent\n                    className=\"bcs-Versions\"\n                    data-resin-component=\"preview\"\n                    data-resin-feature=\"versions\"\n                    title={\n                        <>\n                            <BackButton data-resin-target=\"back\" onClick={() => history.push(`/${parentName}`)} />\n                            <FormattedMessage {...messages.versionsTitle} />\n                        </>\n                    }\n                >\n                    <LoadingIndicatorWrapper\n                        className=\"bcs-Versions-content\"\n                        crawlerPosition=\"top\"\n                        isLoading={isLoading}\n                    >\n                        {showError && (\n                            <InlineError title={<FormattedMessage {...messages.versionServerError} />}>\n                                <FormattedMessage {...error} />\n                            </InlineError>\n                        )}\n\n                        {showEmpty && (\n                            <div className=\"bcs-Versions-empty\">\n                                <FormattedMessage {...messages.versionsEmpty} />\n                            </div>\n                        )}\n\n                        {showVersions && (\n                            <div className=\"bcs-Versions-menu\" data-testid=\"bcs-Versions-menu\">\n                                <VersionsMenu versions={versions} {...rest} />\n                            </div>\n                        )}\n                        {showLimit && (\n                            <div className=\"bcs-Versions-maxEntries\" data-testid=\"max-versions\">\n                                <FormattedMessage\n                                    {...messages.versionMaxEntries}\n                                    values={{\n                                        maxVersions: MAX_VERSIONS,\n                                    }}\n                                />\n                            </div>\n                        )}\n                    </LoadingIndicatorWrapper>\n                </SidebarContent>\n            )}\n        </Route>\n    );\n};\n\nexport default VersionsSidebar;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.17",
+    "version": "23.4.0-beta.19",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -137,7 +137,7 @@
         "@box/frontend": "^11.0.1",
         "@box/item-icon": "^0.9.83",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.112.0",
+        "@box/metadata-editor": "^0.115.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^1.6.1",
@@ -306,7 +306,7 @@
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/item-icon": "^0.9.83",
-        "@box/metadata-editor": "^0.112.0",
+        "@box/metadata-editor": "^0.115.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@hapi/address": "^2.1.4",
         "axios": "^0.30.0",

package/src/elements/common/{nav-button → back-button}/__tests__/BackButton.test.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, screen, userEvent } from '../../../../test-utils/testing-library';
 import { BackButton } from '..';
 
-describe('elements/common/nav-button/BackButton', () => {
+describe('elements/common/back-button/BackButton', () => {
     const mockOnClick = jest.fn();
 
     beforeEach(() => {

package/src/elements/common/{nav-button → back-button}/index.js

@@ -1,2 +1,2 @@
 export { default as BackButton } from './BackButton';
-export { default } from './NavButton';
+export { default } from './BackButton';

package/{es/elements/common/types/SidebarNavigation.flow.js.flow → src/elements/common/types/SidebarNavigation.js.flow}

@@ -1,5 +1,8 @@
 /* @flow */
 
+// flow version is simplified compared to Type Script due to difficult to resolve problems with Union Types
+// Type Script works better with Union Types
+
 export const ViewType = Object.freeze({
     BOXAI: 'boxai',
     SKILLS: 'skills',
@@ -18,30 +21,13 @@ export const FeedEntryType = Object.freeze({
 export type ViewTypeValues = $Values<typeof ViewType>;
 export type FeedEntryTypeValues = $Values<typeof FeedEntryType>;
 
-type VersionSidebarView = {
-    sidebar: 'activity' | 'details',
-    versionId: string,
-};
-
-export type ActivityAnnotationsSidebarView = {
-    sidebar: 'activity',
-    activeFeedEntryType: 'annotations',
-    fileVersionId: string,
-    activeFeedEntryId: string,
+export type SidebarNavigation = {
+    sidebar: ViewTypeValues,
+    versionId?: string,
+    activeFeedEntryType?: FeedEntryTypeValues,
+    activeFeedEntryId?: string,
+    fileVersionId?: string,
 };
-type ActivityCommentsSidebarView = {
-    sidebar: 'activity',
-    activeFeedEntryType: 'comments' | 'tasks',
-    activeFeedEntryId: string,
-};
-
-export type SidebarNavigation =
-    | {|
-          sidebar: ViewTypeValues,
-      |}
-    | VersionSidebarView
-    | ActivityCommentsSidebarView
-    | ActivityAnnotationsSidebarView;
 
 export type InternalSidebarNavigation = SidebarNavigation & {
     open: boolean,

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

@@ -7,8 +7,10 @@
 import * as React from 'react';
 import { Route } from 'react-router-dom';
 import noop from 'lodash/noop';
-import NavButton from '../common/nav-button';
+import classNames from 'classnames';
+import { Button } from '@box/blueprint-web';
 import Tooltip from '../../components/tooltip/Tooltip';
+import { isLeftClick } from '../../utils/dom';
 import './SidebarNavButton.scss';
 
 type Props = {
@@ -37,45 +39,50 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
     } = props;
     const sidebarPath = `/${sidebarView}`;
 
-    const handleNavButtonClick = () => {
-        onClick(sidebarView);
-    };
-
     return (
         <Route path={sidebarPath}>
-            {({ match }) => {
+            {({ match, history }) => {
                 const isMatch = !!match;
-                const isActive = () => isMatch && !!isOpen;
-                const isActiveValue = isActive();
+                const isActiveValue = isMatch && !!isOpen;
                 const isExactMatch = isMatch && match.isExact;
                 const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
 
+                const handleNavButtonClick = event => {
+                    onClick(sidebarView);
+
+                    if (!event.defaultPrevented && isLeftClick(event)) {
+                        const method = isExactMatch ? history.replace : history.push;
+                        method({
+                            pathname: sidebarPath,
+                            state: { open: true },
+                        });
+                    }
+                };
+
                 return (
                     <Tooltip position="middle-left" text={tooltip} isTabbable={false}>
-                        <NavButton
-                            activeClassName="bcs-is-selected"
-                            aria-selected={isActiveValue}
+                        <Button
+                            accessibleWhenDisabled={true}
                             aria-controls={`${id}-content`}
                             aria-label={tooltip}
-                            className="bcs-NavButton"
+                            aria-selected={isActiveValue}
+                            className={classNames('bcs-NavButton', {
+                                'bcs-is-selected': isActiveValue,
+                                'bdl-is-disabled': isDisabled,
+                            })}
                             data-resin-target={dataResinTarget}
                             data-testid={dataTestId}
-                            getDOMRef={ref}
+                            ref={ref}
                             id={id}
-                            isActive={isActive}
-                            isDisabled={isDisabled}
+                            disabled={isDisabled}
                             onClick={handleNavButtonClick}
-                            replace={isExactMatch}
                             role="tab"
                             tabIndex={isActiveValue ? '0' : '-1'}
-                            to={{
-                                pathname: sidebarPath,
-                                state: { open: true },
-                            }}
                             type="button"
+                            variant="tertiary"
                         >
                             {children}
-                        </NavButton>
+                        </Button>
                     </Tooltip>
                 );
             }}

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

@@ -3,6 +3,8 @@
 
 .bcs .bcs-NavButton {
     @include bdl-SidebarNavButton;
+    
+    border-radius: 0;
 
     &::before {
         position: absolute;
@@ -21,6 +23,11 @@
         }
     }
 
+    // Style disabled buttons with proper visual feedback
+    &[aria-disabled="true"] {
+        cursor: default;
+    }
+
     &.bcs-is-selected {
         &::before {
             background-color: $blue;
@@ -30,6 +37,12 @@
             fill: $blue;
         }
     }
+    
+    // Blueprint button focus override
+    &:not(:disabled)[data-focus-visible] {
+        border-radius: var(--radius-1);
+        box-shadow: 0 0 0 var(--border-2) var(--outline-focus-on-light);
+    }
 }
 
 @include breakpoint($medium-screen) {

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

@@ -1,26 +1,40 @@
 import * as React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { mount } from 'enzyme';
-import { render, screen, fireEvent } from '@testing-library/react';
-import PlainButton from '../../../components/plain-button';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { render, screen, fireEvent } from '../../../test-utils/testing-library';
 import SidebarNavButton from '../SidebarNavButton';
-import Tooltip from '../../../components/tooltip/Tooltip';
 
 describe('elements/content-sidebar/SidebarNavButton', () => {
-    const getWrapper = ({ children, ...props }, path = '/') =>
-        mount(
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderWrapper = ({ children, ref, ...props }, path = '/') =>
+        render(
             <MemoryRouter initialEntries={[path]}>
-                <SidebarNavButton {...props}>{children}</SidebarNavButton>
+                <SidebarNavButton ref={ref} {...props}>
+                    {children}
+                </SidebarNavButton>
             </MemoryRouter>,
         );
-    const getButton = wrapper => wrapper.find(PlainButton).first();
 
     test('should render nav button properly', () => {
-        const wrapper = getWrapper({ tooltip: 'foo' });
-        const button = getButton(wrapper);
+        renderWrapper({
+            tooltip: 'foo',
+            sidebarView: 'activity',
+            children: 'test button',
+        });
+        const button = screen.getByRole('tab');
 
-        expect(wrapper.find(Tooltip).prop('text')).toBe('foo');
-        expect(button.hasClass('bcs-is-selected')).toBe(false);
+        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`
@@ -33,11 +47,20 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
             isOpen,
             sidebarView: 'activity',
             tooltip: 'foo',
+            children: 'test button',
         };
-        const wrapper = getWrapper(props, '/activity');
-        const button = getButton(wrapper);
+        renderWrapper(props, '/activity');
+        const button = screen.getByRole('tab');
 
-        expect(button.hasClass('bcs-is-selected')).toBe(expected);
+        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.each`
@@ -48,26 +71,185 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
         ${'/activity/test'} | ${true}
         ${'/skills'}        | ${false}
     `('should reflect active state ($expected) correctly based on active path', ({ expected, path }) => {
-        const wrapper = getWrapper({ isOpen: true, sidebarView: 'activity' }, path);
-        const button = getButton(wrapper);
+        renderWrapper(
+            {
+                isOpen: true,
+                sidebarView: 'activity',
+                tooltip: 'foo',
+                children: 'test button',
+            },
+            path,
+        );
+        const button = screen.getByRole('tab');
 
-        expect(button.hasClass('bcs-is-selected')).toBe(expected);
+        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';
 
-        render(
-            <MemoryRouter initialEntries={['/']}>
-                <SidebarNavButton onClick={mockOnClick} sidebarView={mockSidebarView}>
-                    button
-                </SidebarNavButton>
-            </MemoryRouter>,
-        );
+        renderWrapper({
+            onClick: mockOnClick,
+            sidebarView: mockSidebarView,
+            tooltip: 'test',
+            children: 'button',
+        });
         const button = screen.getByText('button');
 
         fireEvent.click(button);
         expect(mockOnClick).toBeCalledWith(mockSidebarView);
     });
+
+    test.each`
+        isDisabled   | expected
+        ${true}      | ${true}
+        ${false}     | ${false}
+        ${undefined} | ${false}
+    `('should apply bdl-is-disabled class when isDisabled is $isDisabled', ({ isDisabled, expected }) => {
+        const content = 'Activity';
+        renderWrapper({
+            isDisabled,
+            sidebarView: 'activity',
+            tooltip: 'Activity',
+            children: content,
+        });
+
+        const button = screen.getByRole('tab');
+        if (expected) {
+            expect(button).toHaveClass('bdl-is-disabled');
+        } else {
+            expect(button).not.toHaveClass('bdl-is-disabled');
+        }
+    });
+
+    test.each`
+        elementId    | sidebarView   | expectedId            | expectedAriaControls
+        ${undefined} | ${'activity'} | ${'activity'}         | ${'activity-content'}
+        ${''}        | ${'activity'} | ${'activity'}         | ${'activity-content'}
+        ${'sidebar'} | ${'activity'} | ${'sidebar_activity'} | ${'sidebar_activity-content'}
+        ${'main'}    | ${'skills'}   | ${'main_skills'}      | ${'main_skills-content'}
+    `(
+        'should generate correct id and aria-controls with elementId=$elementId and sidebarView=$sidebarView',
+        ({ elementId, sidebarView, expectedId, expectedAriaControls }) => {
+            renderWrapper({
+                elementId,
+                sidebarView,
+                tooltip: 'test',
+                children: 'test button',
+            });
+
+            const button = screen.getByRole('tab');
+            expect(button).toHaveAttribute('id', expectedId);
+            expect(button).toHaveAttribute('aria-controls', expectedAriaControls);
+        },
+    );
+
+    test('should forward ref to the Button', () => {
+        const ref = React.createRef();
+
+        renderWrapper({
+            ref,
+            sidebarView: 'activity',
+            tooltip: 'test',
+            children: 'test button',
+        });
+
+        const button = screen.getByRole('tab');
+        expect(ref.current).toBe(button);
+    });
+
+    describe('navigation on click', () => {
+        const mockHistoryPush = jest.fn();
+        const mockHistoryReplace = jest.fn();
+        const mockHistory = {
+            push: mockHistoryPush,
+            replace: mockHistoryReplace,
+            listen: jest.fn(),
+            location: { pathname: '/activity' },
+        };
+
+        const renderWithRouter = (props, history = mockHistory) => {
+            return render(
+                <Router history={history}>
+                    <SidebarNavButton sidebarView="activity" tooltip="test" {...props}>
+                        Activity
+                    </SidebarNavButton>
+                </Router>,
+            );
+        };
+
+        test('calls onClick handler and history.push on left click when not exact match', () => {
+            const mockOnClick = jest.fn();
+            const mockHistoryWithDifferentPath = {
+                ...mockHistory,
+                location: { pathname: '/activity/versions' },
+            };
+
+            renderWithRouter({ onClick: mockOnClick }, mockHistoryWithDifferentPath);
+
+            const button = screen.getByText('Activity');
+            fireEvent.click(button, { button: 0 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockHistoryPush).toBeCalledWith({
+                pathname: '/activity',
+                state: { open: true },
+            });
+            expect(mockHistoryReplace).not.toBeCalled();
+        });
+
+        test('calls history.replace on left click when exact match', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithRouter({ onClick: mockOnClick });
+
+            const button = screen.getByText('Activity');
+            fireEvent.click(button, { button: 0 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockHistoryReplace).toBeCalledWith({
+                pathname: '/activity',
+                state: { open: true },
+            });
+            expect(mockHistoryPush).not.toBeCalled();
+        });
+
+        test('does not call history.push on right click', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithRouter({ onClick: mockOnClick });
+
+            const button = screen.getByText('Activity');
+            fireEvent.click(button, { button: 1 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockHistoryPush).not.toBeCalled();
+            expect(mockHistoryReplace).not.toBeCalled();
+        });
+
+        test('does not call history.push on prevented event', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithRouter({ onClick: mockOnClick });
+
+            const button = screen.getByText('Activity');
+
+            // Prevent default on the button click
+            button.addEventListener('click', e => e.preventDefault());
+            fireEvent.click(button, { button: 0 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockHistoryPush).not.toBeCalled();
+            expect(mockHistoryReplace).not.toBeCalled();
+        });
+    });
 });

package/src/elements/content-sidebar/versions/StaticVersionSidebar.js

@@ -10,7 +10,7 @@ import { Route } from 'react-router-dom';
 
 import BoxDrive140 from '../../../illustration/BoxDrive140';
 
-import { BackButton } from '../../common/nav-button';
+import BackButton from '../../common/back-button';
 import PrimaryButton from '../../../components/primary-button';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import VersionsMenu from './VersionsMenu';

package/src/elements/content-sidebar/versions/VersionsGroup.js

@@ -7,11 +7,14 @@
 import * as React from 'react';
 import VersionsList from './VersionsList';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsGroup.scss';
 
 type Props = {
     fileId: string,
     heading: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,

package/src/elements/content-sidebar/versions/VersionsList.js

@@ -8,33 +8,51 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import VersionsItem from './VersionsItem';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsList.scss';
 
 type Props = {
     currentId?: string,
     fileId: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,
 };
 
-const VersionsList = ({ currentId, versions, ...rest }: Props) => (
-    <ul className="bcs-VersionsList">
-        {versions.map(version => (
-            <li className="bcs-VersionsList-item" key={version.id}>
-                <Route
-                    render={({ match }) => (
-                        <VersionsItem
-                            isCurrent={currentId === version.id}
-                            isSelected={match.params.versionId === version.id}
-                            version={version}
-                            {...rest}
-                        />
-                    )}
+const VersionsList = ({ currentId, internalSidebarNavigation, routerDisabled = false, versions, ...rest }: Props) => {
+    const renderVersionItemWithoutRouter = (version: BoxItemVersion) => (
+        <VersionsItem
+            isCurrent={currentId === version.id}
+            isSelected={internalSidebarNavigation?.versionId === version.id}
+            version={version}
+            {...rest}
+        />
+    );
+
+    const renderVersionItemWithRouter = (version: BoxItemVersion) => (
+        <Route
+            render={({ match }) => (
+                <VersionsItem
+                    isCurrent={currentId === version.id}
+                    isSelected={match.params.versionId === version.id}
+                    version={version}
+                    {...rest}
                 />
-            </li>
-        ))}
-    </ul>
-);
+            )}
+        />
+    );
+
+    return (
+        <ul className="bcs-VersionsList">
+            {versions.map(version => (
+                <li className="bcs-VersionsList-item" key={version.id}>
+                    {routerDisabled ? renderVersionItemWithoutRouter(version) : renderVersionItemWithRouter(version)}
+                </li>
+            ))}
+        </ul>
+    );
+};
 
 export default VersionsList;

package/src/elements/content-sidebar/versions/VersionsMenu.js

@@ -11,11 +11,14 @@ import * as util from '../../../utils/datetime';
 import messages from './messages';
 import VersionsGroup from './VersionsGroup';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsMenu.scss';
 
 type Props = {
     fileId: string,
     intl: any,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,

package/src/elements/content-sidebar/versions/VersionsSidebar.js

@@ -12,7 +12,7 @@ import InlineError from '../../../components/inline-error';
 import messages from './messages';
 import SidebarContent from '../SidebarContent';
 import VersionsMenu from './VersionsMenu';
-import { BackButton } from '../../common/nav-button';
+import BackButton from '../../common/back-button';
 import { DEFAULT_FETCH_END } from '../../../constants';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import type { BoxItemVersion } from '../../../common/types/core';

package/src/elements/content-sidebar/versions/__tests__/StaticVersionSidebar.test.js

@@ -3,13 +3,11 @@ import { MemoryRouter, Route } from 'react-router-dom';
 import { render, screen, userEvent } from '../../../../test-utils/testing-library';
 import StaticVersionSidebar from '../StaticVersionSidebar';
 
-jest.mock('../../../common/nav-button', () => ({
-    BackButton: ({ onClick, 'data-resin-target': dataResinTarget }) => (
-        <button type="button" onClick={onClick} data-resin-target={dataResinTarget} data-testid="back-button">
-            Back
-        </button>
-    ),
-}));
+jest.mock('../../../common/back-button', () => ({ onClick, 'data-resin-target': dataResinTarget }) => (
+    <button type="button" onClick={onClick} data-resin-target={dataResinTarget} data-testid="back-button">
+        Back
+    </button>
+));
 
 jest.mock('../VersionsMenu', () => ({ versions, fileId, versionCount, versionLimit }) => (
     <div data-testid="versions-menu">