feat: Make Breadcrumb group component responsive

[fralongo]

Description

• Breadcrumbs adjust to the available space, as opposed to the viewport size.
• they will always occupy one line
• items that are shorter than a MIN_WIDTH will not shrink and truncate
• items that longer than a MIN_WIDTH will shrink and truncate until they reach the MIN_WIDTH.
  • The longer an item, the faster it will shrink. This creates a balance in the length of truncated items
• When all items have reached the MIN_WIDTH, some of the items will be collapsed into a dropdown.
  • the collapsing behavior will start with the second item on the left (in LTR applications), to prioritize immediate visibility for the last items, that are supposed to be closer in context to the current page
• When the last item is truncated it becomes focusable to allow for the display of the tooltip with keyboard

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates. N/A
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md. N/A
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests? Yes
• Changes are covered with new/existing integration tests? Yes

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

Attention: Patch coverage is 99.10714% with 1 line in your changes missing coverage. Please review.

Project coverage is 95.92%. Comparing base (f014c5b) to head (f37ceed).
Report is 17 commits behind head on main.

Files with missing lines	Patch %	Lines
src/breadcrumb-group/item/item.tsx	93.75%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2671      +/-   ##
==========================================
+ Coverage   95.79%   95.92%   +0.12%     
==========================================
  Files         744      745       +1     
  Lines       20569    20658      +89     
  Branches     6964     6663     -301     
==========================================
+ Hits        19705    19817     +112     
- Misses        808      833      +25     
+ Partials       56        8      -48     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[just-boris]

You have a double render loop here. After calling setItemsWidth, this effect is called second time, because it tracks itemsWidths value which got just changed.

[just-boris]

Suggested solution

setItemsWidths(oldWidths => {
  if (
    !areArrayEqual(newItemsWidths.ghost, oldWidths.ghost) ||
    !areArrayEqual(newItemsWidths.real, oldWidths.real)
  ) {
    return newItemsWidths;
  } else {
    return oldWidths
  }
})

[just-boris]

This should be rect.borderBoxWidth to incorporate inner paddings, if there are any