feat(tearsheet): implement enable-presence feature

[makafsal]

Closes #8293

What did you change?

Implemented the enable-presence and a feature flag to enable it.

How did you test and verify your work?

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

More details can be found in the pull request section of
our contributing docs.

[netlify]

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	743b18e
🔍 Latest deploy log	https://app.netlify.com/projects/ibm-products-web-components/deploys/698066063faf960008492052
😎 Deploy Preview	https://deploy-preview-8822--ibm-products-web-components.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 project configuration.

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	743b18e
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-for-ibm-products/deploys/6980660663e6dc0008c06265
😎 Deploy Preview	https://deploy-preview-8822--carbon-for-ibm-products.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 project configuration.

[codecov]

Codecov Report

❌ Patch coverage is 64.42308% with 37 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.17%. Comparing base (e084c63) to head (743b18e).
⚠️ Report is 25 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8822      +/-   ##
==========================================
- Coverage   80.57%   80.17%   -0.41%     
==========================================
  Files         426      428       +2     
  Lines       19541    19593      +52     
  Branches     4278     4274       -4     
==========================================
- Hits        15746    15709      -37     
- Misses       3795     3884      +89     

Components	Coverage Δ
ibm-products	82.03% <64.42%> (-0.29%)	⬇️
ibm-products-web-components	77.85% <ø> (-0.57%)	⬇️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[amal-k-joy]

Nice work 🎉 🎉

[szinta]

LGTM. Just a few comments related to copyright text and story duplication.

[timfuhrmann]

Are you also planning to implement an equivalent to ComposedModalPresence? While having the tearsheet not mount when it's closed is nice, it alone is not really helping, since the consuming component and all of it's states are still going to remain mounted.

With ComposedModalPresence you are able to wrap you components to move that boundary of what is actually unmounted to another level. In case we do not get something like this for the tearsheet, it kind of defeats the purpose of enable-presence, as its goal never was to just not have it in the DOM, but to be able to benefit from the react component lifecycle using the tearsheet.

It would be extremely helpful if you could achieve a similar dev experience to what carbon is offering.

[makafsal]

Are you also planning to implement an equivalent to ComposedModalPresence? While having the tearsheet not mount when it's closed is nice, it alone is not really helping, since the consuming component and all of it's states are still going to remain mounted.

With ComposedModalPresence you are able to wrap you components to move that boundary of what is actually unmounted to another level. In case we do not get something like this for the tearsheet, it kind of defeats the purpose of enable-presence, as its goal never was to just not have it in the DOM, but to be able to benefit from the react component lifecycle using the tearsheet.

It would be extremely helpful if you could achieve a similar dev experience to what carbon is offering.

Good point - the limitation you’re calling out is real. enable-presence is now only controls the Tearsheet’s own DOM presence and does not reset consumer state the way ComposedModalPresence does in Carbon.

We did explore using ComposedModalPresence directly with Tearsheet, but it breaks Tearsheet animations because Tearsheet does not participate in Carbon’s presence contract (presence context consumption and exit coordination). As a result, presence has no way to know when the Tearsheet’s exit animation completes and unmounts immediately.

That said, we agree with the underlying goal. Providing a Tearsheet-specific presence boundary that allows consumers to opt into full lifecycle reset—similar in spirit to ComposedModalPresence-is a valid improvement area and something we can revisit with a dedicated implementation rather than direct reuse.

@amal-k-joy I'm moving this PR back to draft until the rework is complete.

[amal-k-joy]

Are you also planning to implement an equivalent to ComposedModalPresence? While having the tearsheet not mount when it's closed is nice, it alone is not really helping, since the consuming component and all of it's states are still going to remain mounted.
With ComposedModalPresence you are able to wrap you components to move that boundary of what is actually unmounted to another level. In case we do not get something like this for the tearsheet, it kind of defeats the purpose of enable-presence, as its goal never was to just not have it in the DOM, but to be able to benefit from the react component lifecycle using the tearsheet.
It would be extremely helpful if you could achieve a similar dev experience to what carbon is offering.

Good point - the limitation you’re calling out is real. enable-presence is now only controls the Tearsheet’s own DOM presence and does not reset consumer state the way ComposedModalPresence does in Carbon.

We did explore using ComposedModalPresence directly with Tearsheet, but it breaks Tearsheet animations because Tearsheet does not participate in Carbon’s presence contract (presence context consumption and exit coordination). As a result, presence has no way to know when the Tearsheet’s exit animation completes and unmounts immediately.

That said, we agree with the underlying goal. Providing a Tearsheet-specific presence boundary that allows consumers to opt into full lifecycle reset—similar in spirit to ComposedModalPresence-is a valid improvement area and something we can revisit with a dedicated implementation rather than direct reuse.

@amal-k-joy I'm moving this PR back to draft until the rework is complete.

@timfuhrmann @makafsal ,
Do you think changes or improvements to the current ComposedModalPresence in Carbon would help enable Tearsheet to consume it as well?

[timfuhrmann]

I am not sure if making changes to ComposedModalPresence would help, curious to here what you might suggest though.

What I was thinking though, that the Tearsheet implements its own TearsheetPresence, almost identical to the ComposedModalPresence, but not using it, with its own context etc.

Both of these internal carbon utils should be sufficient to achieve a similar outcome:

• https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/usePresenceContext.ts
• https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/usePresence.ts

However, since they are not exposed by carbon yet, we would either have to ask for it or copy/paste.

Happy to hear your thought or create a first draft to get started, just let me know.

[makafsal]

@timfuhrmann Yeah, those hooks are almost identical, but in Tearsheet, the entry/exit animations are implemented using the transition property, not animation. In Carbon hooks implementation, it uses getAnimations, and the Tearsheet hook getComputedStyle to track the entry/exit animation.