[popups] `actionsRef` prop #1236

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 onFinished = useEventCallback(onFinishedParam);
  const runOnceAnimationsFinish = useAnimationsFinished(animatedElementRef);
  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

  });

+  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 <[email protected]>

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

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`e69ca40`
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67a5b283b72dd60008190b94
😎 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

@@ -13,7 +13,7 @@ import type { OpenChangeReason } from '../../utils/translateOpenChangeReason';
 *
 * 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 <[email protected]> Signed-off-by: atomiks <[email protected]>

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

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

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 Infrastructure work going on behind the scenes 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 <[email protected]>

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 <[email protected]>

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

atomiks added 3 commits January 20, 2025 18:36

Tests

8dc3265

Add nativeEvent for mergeReactProps test

77987ed

Lint

3c836fb

atomiks marked this pull request as ready for review January 20, 2025 07:46

atomiks requested a review from colmtuite as a code owner January 20, 2025 07:46

atomiks added 2 commits January 27, 2025 15:35

Polish animation page

0af3006

Merge branch 'master' into fix/js-anim

516d53f

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

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 <[email protected]> Signed-off-by: atomiks <[email protected]>

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[popups] `actionsRef` prop #1236

[popups] `actionsRef` prop #1236

atomiks commented Dec 27, 2024 •

edited

Loading

mui-bot commented Dec 27, 2024 •

edited

Loading

atomiks Dec 27, 2024 •

edited

Loading

atomiks Dec 27, 2024

michaldudak Jan 2, 2025

netlify bot commented Jan 10, 2025 •

edited

Loading

michaldudak Feb 5, 2025

atomiks Feb 5, 2025

michaldudak Feb 5, 2025

michaldudak Feb 5, 2025

atomiks Feb 5, 2025 •

edited

Loading

michaldudak Feb 5, 2025

atomiks Feb 5, 2025

mj12albert commented Feb 8, 2025

		});

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

[popups] actionsRef prop #1236

Are you sure you want to change the base?

[popups] actionsRef prop #1236

Conversation

atomiks commented Dec 27, 2024 • edited Loading

mui-bot commented Dec 27, 2024 • edited Loading

Netlify deploy preview

atomiks Dec 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Jan 10, 2025 • edited Loading

✅ Deploy Preview for base-ui ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atomiks Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mj12albert commented Feb 8, 2025

[popups] `actionsRef` prop #1236

[popups] `actionsRef` prop #1236

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