refactor(ActionBar): implement useOverflowItems hook in ActionBar

[makafsal]

Closes #6720

What did you change?

1. Implemented useOverflowItems hook in ActionBar
2. Fixed OverflowMenu issue
3. Fixed Actiobar width issue PageHeader

How did you test and verify your work?

Storybook
yarn test

[netlify]

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

Name	Link
🔨 Latest commit	e222ca7
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/67a5c8be4a96cc00087cd079
😎 Deploy Preview	https://deploy-preview-6775--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.

[netlify]

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

Name	Link
🔨 Latest commit	e222ca7
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/67a5c8bef7eb6c0008e5affb
😎 Deploy Preview	https://deploy-preview-6775--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.

[davidmenendez]

Screen.Recording.2025-01-29.at.8.43.37.AM.mov

looks like there's still something not quite right here. i'll take a look and help you to identify what's causing this stutter

also tests are failling

[davidmenendez]

an additional comment regarding the offset. i would take a second look at the changes you added and make sure that they are working correctly.

[davidmenendez]

looking great! got a few comments 👍 🚀

[davidmenendez]

great! looks like a test is failing. you just need to update the tests are this should be good to go.

[davidmenendez]

i figured out the solution to dealing with the offset ref not being defined. instead of passing that ref to ActionBarOverflowItems just wrap that component with a div that has the ref.

<div className="hidden-items" ref={offsetRef}>
  {hiddenItems && hiddenItems?.length > 0 && (
    ...
  )}
</div>

this should ensure the offset it set correctly and will make the hidden item sizing unnecessary.

Screen.Recording.2025-02-06.at.4.02.43.PM.mov

[makafsal]

i figured out the solution to dealing with the offset ref not being defined. instead of passing that ref to ActionBarOverflowItems just wrap that component with a div that has the ref.

<div className="hidden-items" ref={offsetRef}>
  {hiddenItems && hiddenItems?.length > 0 && (
    ...
  )}
</div>

this should ensure the offset it set correctly and will make the hidden item sizing unnecessary.

Screen.Recording.2025-02-06.at.4.02.43.PM.mov

I've tested this approach, but it is not working as expected in most of the cases.

Screen.Recording.2025-02-07.at.12.36.48.PM.mov

[codecov]

Codecov Report

Attention: Patch coverage is 65.71429% with 36 lines in your changes missing coverage. Please review.

Project coverage is 81.50%. Comparing base (c85b197) to head (e222ca7).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6775      +/-   ##
==========================================
- Coverage   81.51%   81.50%   -0.02%     
==========================================
  Files         399      399              
  Lines       12991    13003      +12     
  Branches     4275     4290      +15     
==========================================
+ Hits        10590    10598       +8     
- Misses       2401     2405       +4     

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