feat(TagOverflow): overflow tooltip variants

[szinta]

Closes #4090

Support overflow content variants. Variants are "read-only tags" and "interactive tags."

What did you change?

1. TagOverflowPopover and TagoverflowModal components updated to render read-only or interactive tags based on overflowType prop
2. Alignment of both Additional content Popover and Truncation tooltip are set based on overflowAlign prop.
3. Text wrap/truncation applied as per design recommendations

How did you test and verify your work?

Storybook

[netlify]

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

Name	Link
🔨 Latest commit	1872e29
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/665565e1c5f3bd000982483a
😎 Deploy Preview	https://deploy-preview-5249--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.

[davidmenendez]

looking good! just a few comments

[davidmenendez]

additionally, this isn't specifically related to the PR, but i wanted to make a note of this. the getFilteredItems could be optimized using the array filter method. consider something like this:

const getFilteredItems = () => {
  if (open && search) {
    const filteredTags = allTags.filter((tag) => {
      return tag.label
        ?.toLocaleLowerCase()
        ?.includes(search.toLocaleLowerCase());
    });
    return filteredTags;
  }
  return allTags;
};

i didn't see data-search in the props anywhere, so i omitted it from this code haha. but yeah this code is slightly nicer because it doesn't rely on pushing items to other arrays. the filter method returns a shallow copy already!

[szinta]

additionally, this isn't specifically related to the PR, but i wanted to make a note of this. the getFilteredItems could be optimized using the array filter method. consider something like this:

const getFilteredItems = () => {
  if (open && search) {
    const filteredTags = allTags.filter((tag) => {
      return tag.label
        ?.toLocaleLowerCase()
        ?.includes(search.toLocaleLowerCase());
    });
    return filteredTags;
  }
  return allTags;
};

i didn't see data-search in the props anywhere, so i omitted it from this code haha. but yeah this code is slightly nicer because it doesn't rely on pushing items to other arrays. the filter method returns a shallow copy already!

Thanks for suggesting this optimisation. I have updated the code.