[popups] `actionsRef` prop by atomiks · Pull Request #1236 · mui/base-ui

atomiks · 2024-12-27T04:15:59Z

JavaScript animations page. I focused on Motion fairly exclusively. The actionsRef prop holds imperative methods, currently just unmount. action.current.unmount() is for when animating opacity doesn't work in other libraries for the most part, as opacity: 0.9999 is really the simplest solution.

Motion experiments

Remove keepMounted on portal child parts Remove unused imports Remove keepMounted prop in tests

mui-bot · 2024-12-27T04:19:16Z

Netlify deploy preview

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

Generated by 🚫 dangerJS against 49bf54c

atomiks · 2024-12-27T06:12:07Z

packages/react/src/utils/useAfterExitAnimation.tsx

  const openRef = useLatestRef(open);

-  useEnhancedEffect(() => {
+  React.useEffect(() => {


Change to regular useEffect as the timing lets Motion know the exit animation styles have been applied inside a single requestAnimationFrame when checking for element.getAnimations() when keepMounted=true

atomiks · 2024-12-27T06:15:49Z

packages/react/src/popover/root/usePopoverRoot.ts

+    onFinished: handleUnmount,
  });

+  React.useImperativeHandle(params.unmountRef, () => ({ unmount: handleUnmount }), [handleUnmount]);


An API with a bunch of imperative methods could be useful in general, not just for this, so it could be named something more generic to future-proof it. This concept may be similar to using hooks, or component stores as in Ariakit. One difference is you can't "read" values in render, it's just for accessing internal methods/state inside event handlers & effects (since it's a ref).

👍
A couple of Material UI components use this pattern and call the prop action (like https://github.com/mui/material-ui/blob/master/packages/mui-material/src/ButtonBase/ButtonBase.d.ts#L13)

Signed-off-by: atomiks <cc.glows@gmail.com>

netlify · 2025-01-10T00:09:29Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`b7a095f`
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67b3d81a006112000850349b
😎 Deploy Preview	https://deploy-preview-1236--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

michaldudak · 2025-02-05T09:32:13Z

packages/react/src/dialog/root/useDialogRoot.ts

+  /**
+   * A ref to imperative actions.
+   */
+  action?: React.RefObject<{ unmount: () => void }>;


The type of the ref should be exported so it's easy for consumers to pass a correct type to React.useRef

Hmm, how should it be exported? Like Dialog.ActionsRef?

Yeah, should be fine like that.

packages/react/src/menu/root/MenuRoot.test.tsx

michaldudak · 2025-02-05T09:37:48Z

packages/react/src/menu/root/MenuRoot.tsx

 *
 * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
 */
-const MenuRoot: React.FC<MenuRoot.Props> = function MenuRoot(props) {


The explicit type definition was added in #705. Make sure the types are still generated correctly.

Right, I just noticed that DialogRoot didn't have this definition, but MenuRoot did. When I checked if the Root accepted arbitrary props it didn't (TS errors). However, based on the issues, I realize this may be exclusive to consumers of the built dist files, and not our dev environment. Do you remember if there was a difference there? (If so, Dialog must currently have this issue 🤔)

Yeah, DialogRoot has the same issue - it has propTypes in its built type definitions:

declare const DialogRoot: { (props: DialogRoot.Props): React.JSX.Element; propTypes: any; };

Fixed Roots that were missing it here

Co-authored-by: Michał Dudak <michal.dudak@gmail.com> Signed-off-by: atomiks <cc.glows@gmail.com>

mj12albert · 2025-02-08T03:21:36Z

🤔 I wonder if this is a viable method for cleanly closing menus in this situation: #1349 (comment)

Signed-off-by: atomiks <cc.glows@gmail.com>

atomiks added 3 commits December 24, 2024 17:31

[popups] Require Portal part

7a73a79

Remove keepMounted on portal child parts Remove unused imports Remove keepMounted prop in tests

Fix experiment

7b415f1

Remove conditional returns in backdrops

2d41b5e

atomiks added the core label Dec 27, 2024

atomiks force-pushed the fix/js-anim branch from d610efb to aaa7df6 Compare December 27, 2024 04:19

[POC] Unmount ref

9a0860a

atomiks force-pushed the fix/js-anim branch from aaa7df6 to 9a0860a Compare December 27, 2024 04:27

atomiks commented Dec 27, 2024

View reviewed changes

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 2, 2025

ummountRef -> action

befe34c

atomiks force-pushed the fix/js-anim branch from bfe610a to befe34c Compare January 7, 2025 07:44

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 7, 2025

Merge branch 'master' into fix/js-anim

5a8731f

Signed-off-by: atomiks <cc.glows@gmail.com>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 7, 2025

lockfile

c5b4936

atomiks changed the title ~~[POC] unmountRef prop~~ [POC] action prop Jan 7, 2025

Merge branch 'master' into fix/js-anim

49bf54c

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

Merge branch 'master' into fix/js-anim

5016515

Signed-off-by: atomiks <cc.glows@gmail.com>

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

atomiks added 2 commits January 10, 2025 11:11

Update

f098d2c

Add action for all popups

a8db50d

atomiks changed the title ~~[POC] action prop~~ [popups] action prop Jan 10, 2025

atomiks added 3 commits January 10, 2025 11:38

Require manual open check

aa84338

Merge branch 'master' into fix/js-anim

154ee1e

Fix warning

4fd1541

Merge

f190f91

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 5, 2025

atomiks added 5 commits February 5, 2025 19:28

Merge

95a1052

proptypes

6c818ea

Remove stale file

deb808a

Check for params.action

45dd76e

Fix Menu test

1886b8f

michaldudak reviewed Feb 5, 2025

View reviewed changes

packages/react/src/menu/root/MenuRoot.test.tsx Outdated Show resolved Hide resolved

michaldudak reviewed Feb 5, 2025

View reviewed changes

atomiks and others added 2 commits February 5, 2025 20:46

Update packages/react/src/menu/root/MenuRoot.test.tsx

8fcc4ba

Co-authored-by: Michał Dudak <michal.dudak@gmail.com> Signed-off-by: atomiks <cc.glows@gmail.com>

Rename to actions ref

8678ac1

atomiks changed the title ~~[popups] action prop~~ [popups] actionsRef prop Feb 5, 2025

Export Actions type

8ddf7f0

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 5, 2025

michaldudak approved these changes Feb 5, 2025

View reviewed changes

Merge

b939a3a

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 6, 2025

atomiks added 3 commits February 6, 2025 17:06

pnpm-lock

6aee360

Add missing actionsRef tests

1641f5f

Merge branch 'master' into fix/js-anim

e69ca40

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 13, 2025

Merge branch 'master' into fix/js-anim

b7a095f

Signed-off-by: atomiks <cc.glows@gmail.com>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 18, 2025

atomiks enabled auto-merge (squash) February 18, 2025 00:51

atomiks disabled auto-merge February 18, 2025 00:52

atomiks merged commit 961fd3e into mui:master Feb 18, 2025
20 of 21 checks passed

oliviertassinari added internal Behind-the-scenes enhancement. Formerly called “core”. and removed core labels Aug 2, 2025

Uh oh!

Conversation

atomiks commented Dec 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Dec 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Uh oh!

atomiks Dec 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

atomiks Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mj12albert commented Feb 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

atomiks commented Dec 27, 2024 •

edited

Loading

mui-bot commented Dec 27, 2024 •

edited

Loading

atomiks Dec 27, 2024 •

edited

Loading

netlify bot commented Jan 10, 2025 •

edited

Loading

atomiks Feb 5, 2025 •

edited

Loading