ECHOES-1018 Allow onOpenChange for an uncontrolled Modal

Author: david-cho-lerat-sonarsource

src/components/modals/ModalTypes.ts

@@ -45,13 +45,18 @@ interface CommonProps {
    * Callback function triggered when the dialog is closed.
    */
   onClose?: VoidFunction;
-  /** An accessible title to be announced when the dialog is opened. */
+  /**
+   * Callback function triggered when the dialog state changes.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * An accessible title to be announced when the dialog is opened.
+   */
   title?: TextNodeOptional;
 }
 
 interface UncontrolledProps extends CommonProps {
   isOpen?: never;
-  onOpenChange?: never;
 }
 
 interface ControlledProps extends CommonProps {

src/components/modals/__tests__/Modal-test.tsx

@@ -41,6 +41,7 @@ it('should appear/disappear as expected', async () => {
 
 it('should allow to be controlled', async () => {
   const { user } = renderControlledModal();
+
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
   await user.click(screen.getByRole('button', { name: 'Toggle' }));
@@ -112,8 +113,31 @@ it("shouldn't have any a11y violation", async () => {
   await expect(container).toHaveNoA11yViolations();
 });
 
+it('should call onOpenChange for uncontrolled modal', async () => {
+  const onOpenChange = jest.fn();
+
+  const { user } = render(
+    <Modal
+      content="Modal content"
+      onOpenChange={onOpenChange}
+      secondaryButton={<Button>Close</Button>}
+      title="Test Modal">
+      <Button>Toggle</Button>
+    </Modal>,
+  );
+
+  expect(onOpenChange).not.toHaveBeenCalled();
+
+  await user.click(screen.getByRole('button', { name: 'Toggle' }));
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+
+  await user.click(screen.getByText('Close'));
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+
 function renderModal(args: Partial<ModalProps> = {}) {
   const { isOpen, onOpenChange, ...overrides } = args;
+
   return render(
     <Modal {...overrides}>
       <Button>Toggle</Button>

stories/Modal-stories.tsx

@@ -210,3 +210,25 @@ export const WithADropdownItemTrigger: Story = {
     </DropdownMenu>
   ),
 };
+
+export const UncontrolledWithOnOpenChange: Story = {
+  args: {
+    description: 'This is an uncontrolled modal using onOpenChange to alert open/close events.',
+    footerLink: 'link',
+    primaryButton: 'default',
+    secondaryButton: 'default',
+    title: 'Uncontrolled Modal with onOpenChange',
+  },
+
+  render: (args) => (
+    <Modal
+      content={<div>Modal content, anything can be set in there.</div>}
+      {...args}
+      onOpenChange={(open) => {
+        // eslint-disable-next-line no-alert
+        alert(`Modal open state changed: ${open}`);
+      }}>
+      <Button>Show Modal</Button>
+    </Modal>
+  ),
+};