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

package/src/components/flyout/__tests__/OverlayHeader.test.js

@@ -52,5 +52,30 @@ describe('components/flyout/OverlayHeader', () => {
             fireEvent.click(screen.getByRole('button'));
             expect(overlayClick).toHaveBeenCalledTimes(0);
         });
+
+        test.each([
+            {
+                isOverlayHeaderActionEnabled: false,
+                expectedCallCount: 0,
+                behavior: 'prevent default and stop propagation',
+            },
+            { isOverlayHeaderActionEnabled: true, expectedCallCount: 1, behavior: 'allow default and propagation' },
+        ])(
+            'should $behavior when isOverlayHeaderActionEnabled is $isOverlayHeaderActionEnabled',
+            ({ isOverlayHeaderActionEnabled, expectedCallCount }) => {
+                const overlayClick = jest.fn();
+
+                render(
+                    <div role="presentation" onClick={overlayClick}>
+                        <OverlayHeader isOverlayHeaderActionEnabled={isOverlayHeaderActionEnabled}>
+                            <p>Hi</p>
+                        </OverlayHeader>
+                    </div>,
+                );
+
+                fireEvent.click(screen.getByRole('button'));
+                expect(overlayClick).toHaveBeenCalledTimes(expectedCallCount);
+            },
+        );
     });
 });

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

@@ -6,13 +6,22 @@
 import * as React from 'react';
 import { MemoryRouter, Router } from 'react-router-dom';
 import type { RouterHistory } from 'react-router-dom';
+import { isFeatureEnabled, type FeatureConfig } from '../feature-checking';
 
 type Props = {
     children: React.Node,
+    features?: FeatureConfig,
     history?: RouterHistory,
+    initialEntries?: Array<any>,
 };
 
-const NavRouter = ({ children, history, ...rest }: Props) => {
+const NavRouter = ({ children, features, history, ...rest }: Props) => {
+    const isRouterDisabled = isFeatureEnabled(features, 'routerDisabled.value');
+    
+    if (isRouterDisabled) {
+        return <>{children}</>;
+    }
+
     if (history) {
         return <Router history={history}>{children}</Router>;
     }

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

@@ -1,17 +1,23 @@
 import * as React from 'react';
 import { MemoryRouter, Router } from 'react-router';
 import { History } from 'history';
+import { isFeatureEnabled, type FeatureConfig } from '../feature-checking';
 
 type Props = {
     children: React.ReactNode;
+    features?: FeatureConfig;
     history?: History;
     initialEntries?: History.LocationDescriptor[];
 };
 
-const NavRouter = ({ children, history, ...rest }: Props) => {
+const NavRouter = ({ children, features, history, ...rest }: Props) => {
+    const isRouterDisabled = isFeatureEnabled(features, 'routerDisabled.value');
+    
+    if (isRouterDisabled) {
+        return <>{children}</>;
+    }
+
     if (history) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         return <Router history={history}>{children}</Router>;
     }
 

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/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__/SidebarToggle.test.js

@@ -1,23 +1,87 @@
 import * as React from 'react';
-import { shallow } from 'enzyme/build';
+import { render, screen, userEvent } from '../../../test-utils/testing-library';
 import { SidebarToggleComponent as SidebarToggle } from '../SidebarToggle';
 
 describe('elements/content-sidebar/SidebarToggle', () => {
     const historyMock = { replace: jest.fn() };
-    const getWrapper = (props = {}) => shallow(<SidebarToggle history={historyMock} {...props} />);
+    
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderSidebarToggle = (props = {}) => {
+        return render(<SidebarToggle history={historyMock} {...props} />);
+    };
 
     test.each`
-        isOpen   | location
+        isOpen   | expectedState
         ${true}  | ${{ state: { open: false } }}
         ${false} | ${{ state: { open: true } }}
-    `('should render and handle clicks correctly when isOpen is $isOpen', ({ isOpen, location }) => {
-        const event = { preventDefault: jest.fn() };
-        const wrapper = getWrapper({ isOpen });
+    `('should render and handle clicks correctly when isOpen is $isOpen', async ({ isOpen, expectedState }) => {
+        const user = userEvent();
+        renderSidebarToggle({ isOpen });
+        
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        expect(toggleButton).toBeInTheDocument();
+        
+        await user.click(toggleButton);
+        
+        expect(historyMock.replace).toHaveBeenCalledWith(expectedState);
+    });
+});
 
-        wrapper.simulate('click', event);
+describe('elements/content-sidebar/SidebarToggle - Router Disabled', () => {
+    const mockInternalSidebarNavigationHandler = jest.fn();
+    const defaultProps = {
+        routerDisabled: true,
+        internalSidebarNavigation: { sidebar: 'activity' },
+        internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+    };
 
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(historyMock.replace).toHaveBeenCalledWith(location);
-        expect(wrapper).toMatchSnapshot();
+    beforeEach(() => {
+        jest.clearAllMocks();
     });
+
+    const renderSidebarToggle = (props = {}) => {
+        return render(<SidebarToggle {...defaultProps} {...props} />);
+    };
+
+    test.each`
+        isOpen   | expectedNavigation
+        ${true}  | ${{ sidebar: 'activity', open: false }}
+        ${false} | ${{ sidebar: 'activity', open: true }}
+    `('should handle toggle clicks correctly when isOpen is $isOpen', async ({ isOpen, expectedNavigation }) => {
+        const user = userEvent();
+        renderSidebarToggle({ isOpen });
+
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        expect(toggleButton).toBeInTheDocument();
+        await user.click(toggleButton);
+
+        expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith(expectedNavigation, true);
+    });
+
+    test('should handle complex navigation state correctly', async () => {
+        const user = userEvent();
+        const complexNavigation = {
+            sidebar: 'activity',
+            versionId: '123',
+            activeFeedEntryType: 'comments',
+            activeFeedEntryId: '456',
+        };
+        
+        renderSidebarToggle({
+            isOpen: true,
+            internalSidebarNavigation: complexNavigation,
+        });
+
+        const toggleButton = screen.getByTestId('sidebartoggle');
+        await user.click(toggleButton);
+
+        expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith({
+            ...complexNavigation,
+            open: false,
+        }, true);
+    });
+
 });

package/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -344,6 +344,19 @@ export const SwitchEditingTemplateInstances: StoryObj<typeof MetadataSidebarRede
         fileId: '416047501580',
         metadataSidebarProps: defaultMetadataSidebarProps,
     },
+    parameters: {
+        msw: {
+            handlers: [
+                ...defaultMockHandlers,
+                http.get(`/2.0/files/416047501580`, () => {
+                    return HttpResponse.json(mockFileRequest.response);
+                }),
+                http.get(`/2.0/files/416047501580/metadata`, () => {
+                    return HttpResponse.json(mockMetadataInstances.response);
+                }),
+            ],
+        },
+    },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         // open and edit a new template
@@ -543,7 +556,7 @@ export const SuggestionForNewlyCreatedTemplateInstance: StoryObj<typeof Metadata
         const autofillButton = await canvas.findByRole('button', { name: 'Autofill' });
         userEvent.click(autofillButton);
 
-        const suggestion = await canvas.findByText('4/1/2024');
+        const suggestion = await canvas.findByText('4/1/2024', {}, { timeout: 5000 });
         expect(suggestion).toBeInTheDocument();
     },
 };

package/src/features/header-flyout/HeaderFlyout.js

@@ -20,6 +20,8 @@ type Props = FlyoutProps & {
     header?: React.Element<any>,
     /** Optional function to get the scrollRef in parent components */
     scrollRefFn?: any => any,
+    /** Are OverlayHeader actions enabled */
+    isOverlayHeaderActionEnabled?: boolean,
 };
 
 class HeaderFlyout extends React.Component<Props> {
@@ -30,7 +32,16 @@ class HeaderFlyout extends React.Component<Props> {
     };
 
     render() {
-        const { header, footer, flyoutButton, children, scrollRefFn, className, ...rest } = this.props;
+        const {
+            header,
+            footer,
+            flyoutButton,
+            children,
+            scrollRefFn,
+            className,
+            isOverlayHeaderActionEnabled = false,
+            ...rest
+        } = this.props;
 
         return (
             <Flyout
@@ -42,7 +53,9 @@ class HeaderFlyout extends React.Component<Props> {
             >
                 {flyoutButton}
                 <Overlay className="header-flyout-overlay">
-                    <OverlayHeader>{header && <h4 className="header-flyout-title">{header}</h4>}</OverlayHeader>
+                    <OverlayHeader isOverlayHeaderActionEnabled={isOverlayHeaderActionEnabled}>
+                        {header && <h4 className="header-flyout-title">{header}</h4>}
+                    </OverlayHeader>
                     <div className="header-flyout-list-container">
                         <div
                             className={classNames('flyout-list-container-body', {

package/src/features/header-flyout/__tests__/__snapshots__/HeaderFlyout.test.js.snap

@@ -21,7 +21,9 @@ exports[`components/core/header/components/HeaderFlyout render() should include
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader>
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    >
       <h4
         className="header-flyout-title"
       >
@@ -78,7 +80,9 @@ exports[`components/core/header/components/HeaderFlyout render() should render d
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader />
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    />
     <div
       className="header-flyout-list-container"
     >
@@ -123,7 +127,9 @@ exports[`components/core/header/components/HeaderFlyout render() should render t
   <Overlay
     className="header-flyout-overlay"
   >
-    <OverlayHeader />
+    <OverlayHeader
+      isOverlayHeaderActionEnabled={false}
+    />
     <div
       className="header-flyout-list-container"
     >