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	5989b8e
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/67ab2d886931bf0008691730
😎 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	5989b8e
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/67ab2d88ace7c60008b051d7
😎 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

[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 87.27273% with 7 lines in your changes missing coverage. Please review.

Project coverage is 81.50%. Comparing base (a9a4285) to head (5989b8e).
Report is 11 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6775      +/-   ##
==========================================
+ Coverage   81.49%   81.50%   +0.01%     
==========================================
  Files         399      399              
  Lines       12978    12991      +13     
  Branches     4270     4282      +12     
==========================================
+ Hits        10576    10588      +12     
- Misses       2402     2403       +1     

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

[davidmenendez]

i think a bit more than what was needed was added in the last commit. i don't see the added benefit to the additional effects or refs. i think the only thing that was needed to fix the issue with the offset not being initially calculated when not present. just the inclusion of that example code i sent on friday

  const offsetRefHolder = useRef<number | null>(null);

  const handleResize = () => {
    if (containerRef.current) {
      const offset = offsetRef?.current?.offsetWidth || 0;
      if (offset && !offsetRefHolder.current) {
        offsetRefHolder.current = offset;
      }
      const newMax =
        containerRef.current.offsetWidth - (offsetRefHolder.current || 0);
      setMaxWidth(newMax);
    }
  };

if i'm missing something with the new implementation please let me know.

[davidmenendez]

i don't think that this effect is necessary. i don't think we need to include these new refs for hidden and visible items. if we can calculate these things on the fly then there's no real need to store them anywhere unless we're trying to cache the value.

[makafsal]

You're right, I've given a second look and refactored that.

[davidmenendez]

ok looks good! i think we're ready to move on

[devadula-nandan]

LGTM