New OverflowContainer wrapper around useOverflow

.changeset/light-poems-trade.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+`iui-breadcrumbs-list` now stretches to the width of `iui-breadcrumbs`.

packages/itwinui-css/src/breadcrumbs/breadcrumbs.scss

@@ -20,6 +20,7 @@
   list-style-type: none;
   user-select: none;
   block-size: 100%;
+  inline-size: 100%;
 }
 
 .iui-breadcrumbs-item {

packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx

@@ -5,15 +5,14 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  useMergedRefs,
-  useOverflow,
   SvgChevronRight,
   Box,
   createWarningLogger,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
+import { OverflowContainer } from '../../utils/components/OverflowContainer.js';
 
 const logWarning = createWarningLogger();
 
@@ -124,62 +123,63 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
 
-  const [overflowRef, visibleCount] = useOverflow(items);
-  const refs = useMergedRefs(overflowRef, ref);
-
   return (
     <Box
       as='nav'
       className={cx('iui-breadcrumbs', className)}
-      ref={refs}
+      ref={ref}
       aria-label='Breadcrumb'
       {...rest}
     >
-      <Box as='ol' className='iui-breadcrumbs-list'>
-        {visibleCount > 1 && (
-          <>
-            <ListItem item={items[0]} isActive={currentIndex === 0} />
-            <Separator separator={separator} />
-          </>
-        )}
-        {items.length - visibleCount > 0 && (
+      <OverflowContainer as='ol' className='iui-breadcrumbs-list' items={items}>
+        {(visibleCount) => (
           <>
-            <Box as='li' className='iui-breadcrumbs-item'>
-              {overflowButton ? (
-                overflowButton(visibleCount)
-              ) : (
-                <Box as='span' className='iui-breadcrumbs-content'>
-                  …
+            {visibleCount > 1 && (
+              <>
+                <ListItem item={items[0]} isActive={currentIndex === 0} />
+                <Separator separator={separator} />
+              </>
+            )}
+            {items.length - visibleCount > 0 && (
+              <>
+                <Box as='li' className='iui-breadcrumbs-item'>
+                  {overflowButton ? (
+                    overflowButton(visibleCount)
+                  ) : (
+                    <Box as='span' className='iui-breadcrumbs-content'>
+                      …
+                    </Box>
+                  )}
                 </Box>
-              )}
-            </Box>
-            <Separator separator={separator} />
+                <Separator separator={separator} />
+              </>
+            )}
+            {items
+              .slice(
+                visibleCount > 1
+                  ? items.length - visibleCount + 1
+                  : items.length - 1,
+              )
+              .map((_, _index) => {
+                const index =
+                  visibleCount > 1
+                    ? 1 + (items.length - visibleCount) + _index
+                    : items.length - 1;
+                return (
+                  <React.Fragment key={index}>
+                    <ListItem
+                      item={items[index]}
+                      isActive={currentIndex === index}
+                    />
+                    {index < items.length - 1 && (
+                      <Separator separator={separator} />
+                    )}
+                  </React.Fragment>
+                );
+              })}
           </>
         )}
-        {items
-          .slice(
-            visibleCount > 1
-              ? items.length - visibleCount + 1
-              : items.length - 1,
-          )
-          .map((_, _index) => {
-            const index =
-              visibleCount > 1
-                ? 1 + (items.length - visibleCount) + _index
-                : items.length - 1;
-            return (
-              <React.Fragment key={index}>
-                <ListItem
-                  item={items[index]}
-                  isActive={currentIndex === index}
-                />
-                {index < items.length - 1 && (
-                  <Separator separator={separator} />
-                )}
-              </React.Fragment>
-            );
-          })}
-      </Box>
+      </OverflowContainer>
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'nav', BreadcrumbsProps>;

packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
+import { Box } from '../../utils/index.js';
 import type {
   AnyString,
   PolymorphicForwardRefComponent,
@@ -14,6 +14,7 @@ import {
   CompositeItem,
   FloatingDelayGroup,
 } from '@floating-ui/react';
+import { OverflowContainer } from '../../utils/components/OverflowContainer.js';
 
 // ----------------------------------------------------------------------------
 
@@ -172,6 +173,7 @@ const BaseGroup = React.forwardRef((props, forwardedRef) => {
 
 // ----------------------------------------------------------------------------
 
+/** Note: If `overflowButton == null`, it behaves like a `BaseGroup`. */
 const OverflowGroup = React.forwardRef((props, forwardedRef) => {
   const {
     children: childrenProp,
@@ -186,14 +188,12 @@ const OverflowGroup = React.forwardRef((props, forwardedRef) => {
     [childrenProp],
   );
 
-  const [overflowRef, visibleCount] = useOverflow(
-    items,
-    !overflowButton,
-    orientation,
-  );
-
-  return (
-    <BaseGroup
+  return overflowButton != null ? (
+    <OverflowContainer
+      as={BaseGroup}
+      items={items}
+      overflowOrientation={orientation}
+      overflowLocation={overflowPlacement}
       orientation={orientation}
       {...rest}
       className={cx(
@@ -203,34 +203,21 @@ const OverflowGroup = React.forwardRef((props, forwardedRef) => {
         },
         props.className,
       )}
-      ref={useMergedRefs(forwardedRef, overflowRef)}
-    >
-      {(() => {
-        if (!(visibleCount < items.length)) {
-          return items;
-        }
-
-        const overflowStart =
+      ref={forwardedRef}
+      overflowTag={(visibleCount) => {
+        const firstOverflowingIndex =
           overflowPlacement === 'start'
             ? items.length - visibleCount
             : visibleCount - 1;
 
-        return (
-          <>
-            {overflowButton &&
-              overflowPlacement === 'start' &&
-              overflowButton(overflowStart)}
-
-            {overflowPlacement === 'start'
-              ? items.slice(overflowStart + 1)
-              : items.slice(0, Math.max(0, overflowStart))}
-
-            {overflowButton &&
-              overflowPlacement === 'end' &&
-              overflowButton(overflowStart)}
-          </>
-        );
-      })()}
+        return overflowButton(firstOverflowingIndex);
+      }}
+    >
+      {items}
+    </OverflowContainer>
+  ) : (
+    <BaseGroup orientation={orientation} ref={forwardedRef} {...rest}>
+      {childrenProp}
     </BaseGroup>
   );
 }) as PolymorphicForwardRefComponent<

packages/itwinui-react/src/core/Select/SelectTagContainer.tsx

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { SelectTag } from './SelectTag.js';
+import { OverflowContainer } from '../../utils/components/OverflowContainer.js';
 
 type SelectTagContainerProps = {
   /**
@@ -20,21 +20,17 @@ type SelectTagContainerProps = {
 export const SelectTagContainer = React.forwardRef((props, ref) => {
   const { tags, className, ...rest } = props;
 
-  const [containerRef, visibleCount] = useOverflow(tags);
-  const refs = useMergedRefs(ref, containerRef);
-
   return (
-    <Box
+    <OverflowContainer
+      items={tags}
+      overflowTag={(visibleCount) => (
+        <SelectTag label={`+${tags.length - (visibleCount - 1)} item(s)`} /> // -1 to account for the overflowTag
+      )}
       className={cx('iui-select-tag-container', className)}
-      ref={refs}
+      ref={ref}
       {...rest}
     >
-      <>
-        {visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags}
-        {visibleCount < tags.length && (
-          <SelectTag label={`+${tags.length - visibleCount + 1} item(s)`} />
-        )}
-      </>
-    </Box>
+      {tags}
+    </OverflowContainer>
   );
 }) as PolymorphicForwardRefComponent<'div', SelectTagContainerProps>;