fix(Pageheader,Tearsheet,Notifications): resolves CSP violations

[AlexanderMelox]

Closes #6190

This PR resolves CSP violation issues

What did you change?

Moved inline styles to useIsomorphicEffect

How did you test and verify your work?

Storybook

[netlify]

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

Name	Link
🔨 Latest commit	89183a7
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/67339f6cd222a200088acda4
😎 Deploy Preview	https://deploy-preview-6340--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 site configuration.

[netlify]

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

Name	Link
🔨 Latest commit	89183a7
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/67339f6ccaf0bf0008168f51
😎 Deploy Preview	https://deploy-preview-6340--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 site configuration.

[AlexanderMelox]

Everything is good, just having issues getting this TS type error

[matthewgallo]

I think I found a way to work around this with the following added to page header:

interface HTMLElementStyled extends HTMLElement {
  style: CSSStyleDeclaration;
}
const headerRef = (ref || localHeaderRef) as MutableRefObject<HTMLElementStyled>;

I just extended HTMLElement because when using it directly, I kept getting this read only error. Ideally you could just use HTMLSectionElement since the ref is being passed to a <section> but that doesn't exist 😱

[AlexanderMelox]

Interesting, thank you! Matt to the rescue 🛟

[AlexanderMelox]

Should we remove depracted props test? or keep them and still update them?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.62%. Comparing base (a4465ff) to head (89183a7).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6340      +/-   ##
==========================================
+ Coverage   79.61%   79.62%   +0.01%     
==========================================
  Files         394      394              
  Lines       12858    12870      +12     
  Branches     4263     4266       +3     
==========================================
+ Hits        10237    10248      +11     
- Misses       2621     2622       +1     

Components	Coverage Δ
ibm-products	∅ <ø> (∅)
ibm-products-web-components	∅ <ø> (∅)