Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[popups] onOpenChangeComplete prop #1305

Open
wants to merge 16 commits into
base: master
Choose a base branch
from

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Jan 8, 2025

Closes #1208

New alternative to #1235 to support both symmetric open/close cases, which has a more intuitive API.

  • Reworks useAfterExitAnimation to support both open/close animations
  • onOpenChangeComplete is called with open: boolean

@mui-bot
Copy link

mui-bot commented Jan 8, 2025

Netlify deploy preview

https://deploy-preview-1305--base-ui.netlify.app/

Generated by 🚫 dangerJS against 30d8bad

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 8, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 10, 2025
Copy link

netlify bot commented Jan 10, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit ca3823b
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/6780847a864eef0008694eee
😎 Deploy Preview https://deploy-preview-1305--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 10, 2025

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit f7b81f5
🔍 Latest deploy log https://app.netlify.com/sites/base-ui/deploys/6791e423a882570008600e5e
😎 Deploy Preview https://deploy-preview-1305--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Jan 14, 2025
@atomiks atomiks force-pushed the feat/onOpenChangeComplete branch from 05afb45 to aec975d Compare January 14, 2025 00:37
@atomiks atomiks changed the title [popups] Rename onCloseComplete to onOpenChangeComplete [popups] onOpenChangeComplete prop Jan 14, 2025
@atomiks atomiks marked this pull request as ready for review January 14, 2025 02:08
@zannager zannager added component: dialog This is the name of the generic UI component, not the React module! component: popover The React component. labels Jan 15, 2025
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 22, 2025
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 23, 2025
* Calls the provided function when the CSS open animation or transition completes.
*/
export function useOpenChangeComplete(parameters: useOpenChangeComplete.Parameters) {
const { open, change = 'close', ref, onComplete: onCompleteParam } = parameters;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may be a bit more readable if this change param didn't have a default, but it probably doesn't matter outside of looking at this code in Github

anyway I tested onOpenChangeComplete in a bunch of our hero demos and it works well (they all use CSS transitions) 👍

CC @michaldudak to review the implementation as well 🙏

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was a small optimization since it's called in many of the root components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: dialog This is the name of the generic UI component, not the React module! component: popover The React component.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Dialog, Popover] Provide a callback for open/close completion
4 participants