Add CHANGELOG, fix issues when running build:release

Author: ziyiz-amzn

CHANGELOG.md

@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 
 ### Changed
+- Add support for React 19.
+- Migrate storybook to v8.
+- Migrate Jest to v29.
+- Rewrite PopOver component using floating-ui
 
 ### Fixed
 

src/components/ui/PopOver/index.tsx

@@ -168,13 +168,13 @@ export const PopOver: FC<React.PropsWithChildren<PopOverProps>> = ({
   const buttonProps = {
     ref: refs.setReference,
     className: classnames(className, 'ch-popover-toggle'),
-    onClick: handlePopOverClick,
     'data-menu': isSubMenu ? 'submenu' : null,
     'aria-label': a11yLabel,
     'aria-haspopup': true,
     'aria-expanded': isOpen,
     'data-testid': 'popover-toggle',
     ...getReferenceProps(),
+    onClick: handlePopOverClick,
   };
 
   return (

src/theme/themes.stories.tsx

@@ -1,3 +1,6 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider } from 'styled-components';

tst/components/ui/PopOver/index.test.tsx

@@ -270,8 +270,9 @@ describe('PopOver', () => {
     const toggle = getByTestId('popover-toggle');
     click(toggle);
     const option1 = getByTestId('option 1');
+    const menu = getByTestId('menu');
     act(() => {
-      fireEvent.keyDown(document.activeElement || document.body, {
+      fireEvent.keyDown(menu, {
         key: 'ArrowDown',
         keyCode: 40,
         which: 40,
@@ -314,4 +315,132 @@ describe('PopOver', () => {
     });
     await waitFor(() => expect(menu).not.toBeInTheDocument());
   });
+
+  describe('handlePopOverClick', () => {
+    it('should call onPopOverClick with false when popover is opened (isOpen was false)', async () => {
+      const onPopOverClick = jest.fn();
+      const component = (
+        <PopOver
+          renderButton={popOverButton}
+          children={testChild}
+          a11yLabel="test-label"
+          onPopOverClick={onPopOverClick}
+        />
+      );
+      const { getByTestId } = renderWithTheme(lightTheme, component);
+      const toggle = getByTestId('popover-toggle');
+      
+      click(toggle);
+      
+      await waitFor(() => {
+        expect(onPopOverClick).toHaveBeenCalledWith(false);
+        expect(onPopOverClick).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('should call onPopOverClick with true when popover is closed (isOpen was true)', async () => {
+      const onPopOverClick = jest.fn();
+      const component = (
+        <PopOver
+          renderButton={popOverButton}
+          children={testChild}
+          a11yLabel="test-label"
+          onPopOverClick={onPopOverClick}
+        />
+      );
+      const { getByTestId } = renderWithTheme(lightTheme, component);
+      const toggle = getByTestId('popover-toggle');
+      
+      // First click to open
+      click(toggle);
+      // Second click to close
+      click(toggle);
+      
+      await waitFor(() => {
+        expect(onPopOverClick).toHaveBeenNthCalledWith(1, false); // First call when opening
+        expect(onPopOverClick).toHaveBeenNthCalledWith(2, true);  // Second call when closing
+        expect(onPopOverClick).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    it('should toggle isOpen state without calling onPopOverClick when callback is not provided', () => {
+      const component = (
+        <PopOver
+          renderButton={popOverButton}
+          children={testChild}
+          a11yLabel="test-label"
+        />
+      );
+      const { getByTestId, queryByTestId } = renderWithTheme(lightTheme, component);
+      const toggle = getByTestId('popover-toggle');
+      
+      // Initially closed
+      expect(queryByTestId('menu')).not.toBeInTheDocument();
+      
+      // Click to open
+      click(toggle);
+      expect(queryByTestId('menu')).toBeInTheDocument();
+      
+      // Click to close
+      click(toggle);
+      expect(queryByTestId('menu')).not.toBeInTheDocument();
+    });
+
+    it('should properly toggle state multiple times and call onPopOverClick with correct values', async () => {
+      const onPopOverClick = jest.fn();
+      const component = (
+        <PopOver
+          renderButton={popOverButton}
+          children={testChild}
+          a11yLabel="test-label"
+          onPopOverClick={onPopOverClick}
+        />
+      );
+      const { getByTestId, queryByTestId } = renderWithTheme(lightTheme, component);
+      const toggle = getByTestId('popover-toggle');
+      
+      // Initial state: closed
+      expect(queryByTestId('menu')).not.toBeInTheDocument();
+      
+      // First click: open
+      click(toggle);
+      await waitFor(() => {
+        expect(queryByTestId('menu')).toBeInTheDocument();
+        expect(onPopOverClick).toHaveBeenNthCalledWith(1, false);
+      });
+      
+      // Second click: close
+      click(toggle);
+      await waitFor(() => {
+        expect(queryByTestId('menu')).not.toBeInTheDocument();
+        expect(onPopOverClick).toHaveBeenNthCalledWith(2, true);
+      });
+      
+      // Third click: open again
+      click(toggle);
+      await waitFor(() => {
+        expect(queryByTestId('menu')).toBeInTheDocument();
+        expect(onPopOverClick).toHaveBeenNthCalledWith(3, false);
+        expect(onPopOverClick).toHaveBeenCalledTimes(3);
+      });
+    });
+
+    it('should not throw error when onPopOverClick is undefined', () => {
+      const component = (
+        <PopOver
+          renderButton={popOverButton}
+          children={testChild}
+          a11yLabel="test-label"
+          onPopOverClick={undefined}
+        />
+      );
+      const { getByTestId } = renderWithTheme(lightTheme, component);
+      const toggle = getByTestId('popover-toggle');
+      
+      expect(() => {
+        click(toggle);
+      }).not.toThrow();
+    });
+  });
+
 });