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

[core] Use hidden prop for keepMounted elements #815

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

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Nov 12, 2024


Popup animations: https://deploy-preview-815--base-ui.netlify.app/experiments/tooltip

  • Prevents the need to apply CSS to use keepMounted by default
  • Styling animations is now the same as conditional rendering, so it's overall more consistent. They need to use [data-entering] and wait 1 frame as well, once hidden gets removed on open
  • inert is no longer necessary for these components
  • Fixes anchor positioning performance for keepMounted components, both on initial mount and for the lifetime of the mount

@atomiks atomiks added the core Infrastructure work going on behind the scenes label Nov 12, 2024
Comment on lines 22 to 24
if (transitionStatus !== 'entering') {
setTransitionStatus('entering');
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is necessary after the change, and also seems to fix the CSS Transition Group demo in the popups experiment. Likely should have been the case originally.

@mui-bot
Copy link

mui-bot commented Nov 12, 2024

Netlify deploy preview

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

Generated by 🚫 dangerJS against d869620

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 14, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 14, 2024
Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

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

Looks good overall. I have just some minor comments.

@@ -9,13 +9,15 @@ import type {
import { mergeReactProps } from '../../utils/mergeReactProps';
import { useAnchorPositioning } from '../../utils/useAnchorPositioning';
import type { GenericHTMLProps } from '../../utils/types';
import { getInertValue } from '../../utils/getInertValue';
Copy link
Member

Choose a reason for hiding this comment

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

Is getInertValue still used anywhere? If not, we can remove it.

@@ -26,7 +28,7 @@ export function usePopoverPositioner(
renderedSide,
renderedAlignment,
positionerContext,
} = useAnchorPositioning(params);
} = useAnchorPositioning({ ...params, mounted });
Copy link
Member

Choose a reason for hiding this comment

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

Destructuring the object manually could be faster at runtime.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants