Skip to content

Commit

Permalink
Revert "[popups] Add onCloseComplete callback" (mui#1306)
Browse files Browse the repository at this point in the history
atomiks authored Jan 8, 2025
1 parent 24301b6 commit 59c3810
Showing 27 changed files with 4 additions and 728 deletions.
4 changes: 0 additions & 4 deletions docs/reference/generated/alert-dialog-root.json
Original file line number Diff line number Diff line change
@@ -14,10 +14,6 @@
"onOpenChange": {
"type": "(open, event, reason) => void",
"description": "Event handler called when the dialog is opened or closed."
},
"onCloseComplete": {
"type": "function",
"description": "Event handler called after any exit animations finish when the dialog is closed."
}
},
"dataAttributes": {},
4 changes: 0 additions & 4 deletions docs/reference/generated/dialog-root.json
Original file line number Diff line number Diff line change
@@ -24,10 +24,6 @@
"type": "boolean",
"default": "true",
"description": "Whether the dialog should prevent outside clicks and lock page scroll when open."
},
"onCloseComplete": {
"type": "function",
"description": "Event handler called after any exit animations finish when the dialog is closed."
}
},
"dataAttributes": {},
4 changes: 0 additions & 4 deletions docs/reference/generated/menu-root.json
Original file line number Diff line number Diff line change
@@ -25,10 +25,6 @@
"default": "true",
"description": "Whether the menu should prevent outside clicks and lock page scroll when open."
},
"onCloseComplete": {
"type": "function",
"description": "Event handler called after any exit animations finish when the menu is closed."
},
"disabled": {
"type": "boolean",
"default": "false",
4 changes: 0 additions & 4 deletions docs/reference/generated/popover-root.json
Original file line number Diff line number Diff line change
@@ -15,10 +15,6 @@
"type": "(open, event, reason) => void",
"description": "Event handler called when the popover is opened or closed."
},
"onCloseComplete": {
"type": "function",
"description": "Event handler called after any exit animations finish when the popover is closed."
},
"openOnHover": {
"type": "boolean",
"default": "false",
4 changes: 0 additions & 4 deletions docs/reference/generated/preview-card-root.json
Original file line number Diff line number Diff line change
@@ -15,10 +15,6 @@
"type": "(open, event, reason) => void",
"description": "Event handler called when the preview card is opened or closed."
},
"onCloseComplete": {
"type": "function",
"description": "Event handler called after any exit animations finish when the preview card is closed."
},
"delay": {
"type": "number",
"default": "600",
4 changes: 0 additions & 4 deletions docs/reference/generated/select-root.json
Original file line number Diff line number Diff line change
@@ -42,10 +42,6 @@
"default": "true",
"description": "Whether the select should prevent outside clicks and lock page scroll when open."
},
"onCloseComplete": {
"type": "function",
"description": "Event handler called after any exit animations finish when the select menu is closed."
},
"disabled": {
"type": "boolean",
"default": "false",
4 changes: 0 additions & 4 deletions docs/reference/generated/tooltip-root.json
Original file line number Diff line number Diff line change
@@ -15,10 +15,6 @@
"type": "(open, event, reason) => void",
"description": "Event handler called when the tooltip is opened or closed."
},
"onCloseComplete": {
"type": "function",
"description": "Event handler called after any exit animations finish when the tooltip is closed."
},
"trackCursorAxis": {
"type": "'none' | 'x' | 'y' | 'both'",
"default": "'none'",
85 changes: 0 additions & 85 deletions packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx
Original file line number Diff line number Diff line change
@@ -132,89 +132,4 @@ describe('<AlertDialog.Root />', () => {
});
});
});

describe.skipIf(isJSDOM)('prop: onCloseComplete', () => {
it('is called on close when there is no exit animation defined', async () => {
let onCloseCompleteCalled = false;
function notifyonCloseComplete() {
onCloseCompleteCalled = true;
}

function Test() {
const [open, setOpen] = React.useState(true);
return (
<div>
<button onClick={() => setOpen(false)}>Close</button>
<AlertDialog.Root open={open} onCloseComplete={notifyonCloseComplete}>
<AlertDialog.Portal>
<AlertDialog.Popup data-testid="popup" />
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
);
}

const { user } = await render(<Test />);

const closeButton = screen.getByText('Close');
await user.click(closeButton);

await waitFor(() => {
expect(screen.queryByTestId('popup')).to.equal(null);
});

expect(onCloseCompleteCalled).to.equal(true);
});

it('is called on close when the exit animation finishes', async () => {
globalThis.BASE_UI_ANIMATIONS_DISABLED = false;

let onCloseCompleteCalled = false;
function notifyonCloseComplete() {
onCloseCompleteCalled = true;
}

function Test() {
const style = `
@keyframes test-anim {
to {
opacity: 0;
}
}
.animation-test-indicator[data-ending-style] {
animation: test-anim 50ms;
}
`;

const [open, setOpen] = React.useState(true);

return (
<div>
{/* eslint-disable-next-line react/no-danger */}
<style dangerouslySetInnerHTML={{ __html: style }} />
<button onClick={() => setOpen(false)}>Close</button>
<AlertDialog.Root open={open} onCloseComplete={notifyonCloseComplete}>
<AlertDialog.Portal>
<AlertDialog.Popup className="animation-test-indicator" data-testid="popup" />
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
);
}

const { user } = await render(<Test />);

expect(screen.getByTestId('popup')).not.to.equal(null);

const closeButton = screen.getByText('Close');
await user.click(closeButton);

await waitFor(() => {
expect(screen.queryByTestId('popup')).to.equal(null);
});

expect(onCloseCompleteCalled).to.equal(true);
});
});
});
7 changes: 1 addition & 6 deletions packages/react/src/alert-dialog/root/AlertDialogRoot.tsx
Original file line number Diff line number Diff line change
@@ -12,15 +12,14 @@ import { useDialogRoot } from '../../dialog/root/useDialogRoot';
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogRoot: React.FC<AlertDialogRoot.Props> = function AlertDialogRoot(props) {
const { children, defaultOpen = false, onOpenChange, open, onCloseComplete } = props;
const { children, defaultOpen = false, onOpenChange, open } = props;

const parentDialogRootContext = React.useContext(AlertDialogRootContext);

const dialogRoot = useDialogRoot({
open,
defaultOpen,
onOpenChange,
onCloseComplete,
modal: true,
dismissible: false,
onNestedDialogClose: parentDialogRootContext?.onNestedDialogClose,
@@ -61,10 +60,6 @@ AlertDialogRoot.propTypes /* remove-proptypes */ = {
* @default false
*/
defaultOpen: PropTypes.bool,
/**
* Event handler called after any exit animations finish when the dialog is closed.
*/
onCloseComplete: PropTypes.func,
/**
* Event handler called when the dialog is opened or closed.
*/
85 changes: 0 additions & 85 deletions packages/react/src/dialog/root/DialogRoot.test.tsx
Original file line number Diff line number Diff line change
@@ -584,89 +584,4 @@ describe('<Dialog.Root />', () => {
});
});
});

describe.skipIf(isJSDOM)('prop: onCloseComplete', () => {
it('is called on close when there is no exit animation defined', async () => {
let onCloseCompleteCalled = false;
function notifyonCloseComplete() {
onCloseCompleteCalled = true;
}

function Test() {
const [open, setOpen] = React.useState(true);
return (
<div>
<button onClick={() => setOpen(false)}>Close</button>
<Dialog.Root open={open} onCloseComplete={notifyonCloseComplete}>
<Dialog.Portal>
<Dialog.Popup data-testid="popup" />
</Dialog.Portal>
</Dialog.Root>
</div>
);
}

const { user } = await render(<Test />);

const closeButton = screen.getByText('Close');
await user.click(closeButton);

await waitFor(() => {
expect(screen.queryByTestId('popup')).to.equal(null);
});

expect(onCloseCompleteCalled).to.equal(true);
});

it('is called on close when the exit animation finishes', async () => {
globalThis.BASE_UI_ANIMATIONS_DISABLED = false;

let onCloseCompleteCalled = false;
function notifyonCloseComplete() {
onCloseCompleteCalled = true;
}

function Test() {
const style = `
@keyframes test-anim {
to {
opacity: 0;
}
}
.animation-test-indicator[data-ending-style] {
animation: test-anim 50ms;
}
`;

const [open, setOpen] = React.useState(true);

return (
<div>
{/* eslint-disable-next-line react/no-danger */}
<style dangerouslySetInnerHTML={{ __html: style }} />
<button onClick={() => setOpen(false)}>Close</button>
<Dialog.Root open={open} onCloseComplete={notifyonCloseComplete}>
<Dialog.Portal>
<Dialog.Popup className="animation-test-indicator" data-testid="popup" />
</Dialog.Portal>
</Dialog.Root>
</div>
);
}

const { user } = await render(<Test />);

expect(screen.getByTestId('popup')).not.to.equal(null);

const closeButton = screen.getByText('Close');
await user.click(closeButton);

await waitFor(() => {
expect(screen.queryByTestId('popup')).to.equal(null);
});

expect(onCloseCompleteCalled).to.equal(true);
});
});
});
6 changes: 0 additions & 6 deletions packages/react/src/dialog/root/DialogRoot.tsx
Original file line number Diff line number Diff line change
@@ -19,7 +19,6 @@ const DialogRoot = function DialogRoot(props: DialogRoot.Props) {
modal = true,
onOpenChange,
open,
onCloseComplete,
} = props;

const parentDialogRootContext = useOptionalDialogRootContext();
@@ -30,7 +29,6 @@ const DialogRoot = function DialogRoot(props: DialogRoot.Props) {
onOpenChange,
modal,
dismissible,
onCloseComplete,
onNestedDialogClose: parentDialogRootContext?.onNestedDialogClose,
onNestedDialogOpen: parentDialogRootContext?.onNestedDialogOpen,
});
@@ -81,10 +79,6 @@ DialogRoot.propTypes /* remove-proptypes */ = {
* @default true
*/
modal: PropTypes.bool,
/**
* Event handler called after any exit animations finish when the dialog is closed.
*/
onCloseComplete: PropTypes.func,
/**
* Event handler called when the dialog is opened or closed.
*/
9 changes: 1 addition & 8 deletions packages/react/src/dialog/root/useDialogRoot.ts
Original file line number Diff line number Diff line change
@@ -31,7 +31,6 @@ export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.R
onNestedDialogOpen,
onOpenChange: onOpenChangeParameter,
open: openParam,
onCloseComplete,
} = params;

const [open, setOpenUnwrapped] = useControlled({
@@ -65,7 +64,6 @@ export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.R
animatedElementRef: popupRef,
onFinished() {
setMounted(false);
onCloseComplete?.();
},
});

@@ -195,10 +193,6 @@ export interface SharedParameters {
event: Event | undefined,
reason: OpenChangeReason | undefined,
) => void;
/**
* Event handler called after any exit animations finish when the dialog is closed.
*/
onCloseComplete?: () => void;
/**
* Determines whether the dialog should close on outside clicks.
* @default true
@@ -207,8 +201,7 @@ export interface SharedParameters {
}

export namespace useDialogRoot {
export interface Parameters
extends RequiredExcept<SharedParameters, 'open' | 'onOpenChange' | 'onCloseComplete'> {
export interface Parameters extends RequiredExcept<SharedParameters, 'open' | 'onOpenChange'> {
/**
* Callback to invoke when a nested dialog is opened.
*/
Loading
Oops, something went wrong.

0 comments on commit 59c3810

Please sign in to comment.