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,10 +5,9 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  useMergedRefs,
-  useOverflow,
   SvgChevronRight,
   Box,
+  OverflowContainer,
   useWarningLogger,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
@@ -114,70 +113,40 @@ type BreadcrumbsProps = {
  */
 const BreadcrumbsComponent = React.forwardRef((props, ref) => {
   const {
-    children: items,
-    currentIndex = items.length - 1,
+    children: childrenProp,
+    currentIndex = React.Children.count(childrenProp) - 1,
     separator,
     overflowButton,
     className,
     ...rest
   } = props;
 
-  const [overflowRef, visibleCount] = useOverflow(items.length);
-  const refs = useMergedRefs(overflowRef, ref);
+  const items = React.useMemo(
+    () => React.Children.toArray(childrenProp),
+    [childrenProp],
+  );
 
   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 && (
-          <>
-            <Box as='li' className='iui-breadcrumbs-item'>
-              {overflowButton ? (
-                overflowButton(visibleCount)
-              ) : (
-                <Box as='span' className='iui-breadcrumbs-content'>
-                  …
-                </Box>
-              )}
-            </Box>
-            <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>
-            );
-          })}
-      </Box>
+      <OverflowContainer
+        as='ol'
+        itemsCount={items.length}
+        className='iui-breadcrumbs-list'
+      >
+        <BreadcrumbContent
+          currentIndex={currentIndex}
+          overflowButton={overflowButton}
+          separator={separator}
+        >
+          {items}
+        </BreadcrumbContent>
+      </OverflowContainer>
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'nav', BreadcrumbsProps>;
@@ -187,6 +156,58 @@ if (process.env.NODE_ENV === 'development') {
 
 // ----------------------------------------------------------------------------
 
+type BreadcrumbContentProps = Omit<BreadcrumbsProps, 'currentIndex'> & {
+  currentIndex: NonNullable<BreadcrumbsProps['currentIndex']>;
+};
+
+const BreadcrumbContent = (props: BreadcrumbContentProps) => {
+  const { children: items, currentIndex, overflowButton, separator } = props;
+  const { visibleCount } = OverflowContainer.useContext();
+
+  return (
+    <>
+      {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>
+          <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>
+          );
+        })}
+    </>
+  );
+};
+
+// ----------------------------------------------------------------------------
+
 const ListItem = ({
   item,
   isActive,

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, OverflowContainer } from '../../utils/index.js';
 import type {
   AnyString,
   PolymorphicForwardRefComponent,
@@ -172,6 +172,12 @@ const BaseGroup = React.forwardRef((props, forwardedRef) => {
 
 // ----------------------------------------------------------------------------
 
+type OverflowGroupProps = Pick<
+  ButtonGroupProps,
+  'children' | 'orientation' | 'overflowPlacement'
+> &
+  Required<Pick<ButtonGroupProps, 'overflowButton'>>;
+
 const OverflowGroup = React.forwardRef((props, forwardedRef) => {
   const {
     children: childrenProp,
@@ -186,14 +192,11 @@ const OverflowGroup = React.forwardRef((props, forwardedRef) => {
     [childrenProp],
   );
 
-  const [overflowRef, visibleCount] = useOverflow(
-    items.length,
-    !overflowButton,
-    orientation,
-  );
-
   return (
-    <BaseGroup
+    <OverflowContainer
+      as={BaseGroup}
+      itemsCount={items.length}
+      overflowOrientation={orientation}
       orientation={orientation}
       {...rest}
       className={cx(
@@ -203,40 +206,52 @@ const OverflowGroup = React.forwardRef((props, forwardedRef) => {
         },
         props.className,
       )}
-      ref={useMergedRefs(forwardedRef, overflowRef)}
+      ref={forwardedRef}
     >
-      {(() => {
-        if (!(visibleCount < items.length)) {
-          return items;
-        }
-
-        const overflowStart =
-          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)}
-          </>
-        );
-      })()}
-    </BaseGroup>
+      <OverflowGroupContent
+        overflowButton={overflowButton}
+        overflowPlacement={overflowPlacement}
+        items={items}
+      />
+    </OverflowContainer>
   );
-}) as PolymorphicForwardRefComponent<
-  'div',
-  Pick<
-    ButtonGroupProps,
-    'children' | 'orientation' | 'overflowButton' | 'overflowPlacement'
-  >
->;
+}) as PolymorphicForwardRefComponent<'div', OverflowGroupProps>;
+
+// ----------------------------------------------------------------------------
+
+type OverflowGroupContentProps = Pick<
+  OverflowGroupProps,
+  'overflowButton' | 'overflowPlacement'
+> & {
+  items: ReturnType<typeof React.Children.toArray>;
+};
+
+const OverflowGroupContent = (props: OverflowGroupContentProps) => {
+  const { overflowButton, overflowPlacement, items } = props;
+  const { visibleCount } = OverflowContainer.useContext();
+
+  const overflowStart =
+    overflowPlacement === 'start'
+      ? items.length - visibleCount
+      : visibleCount - 1;
+
+  if (!(visibleCount < items.length)) {
+    return items;
+  }
+
+  return (
+    <>
+      {overflowButton &&
+        overflowPlacement === 'start' &&
+        overflowButton(overflowStart)}
+
+      {overflowPlacement === 'start'
+        ? items.slice(overflowStart + 1)
+        : items.slice(0, Math.max(0, overflowStart))}
+
+      {overflowButton &&
+        overflowPlacement === 'end' &&
+        overflowButton(overflowStart)}
+    </>
+  );
+};

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/index.js';
 
 type SelectTagContainerProps = {
   /**
@@ -18,23 +18,42 @@ type SelectTagContainerProps = {
 /**
  */
 export const SelectTagContainer = React.forwardRef((props, ref) => {
-  const { tags, className, ...rest } = props;
+  const { tags: tagsProp, className, ...rest } = props;
 
-  const [containerRef, visibleCount] = useOverflow(tags.length);
-  const refs = useMergedRefs(ref, containerRef);
+  const tags = React.useMemo(
+    () => React.Children.toArray(tagsProp),
+    [tagsProp],
+  );
 
   return (
-    <Box
+    <OverflowContainer
+      itemsCount={tags.length}
       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>
+      <SelectTagContainerContent {...props} tags={tags} />
+    </OverflowContainer>
   );
 }) as PolymorphicForwardRefComponent<'div', SelectTagContainerProps>;
+
+// ----------------------------------------------------------------------------
+
+type SelectTagContainerContentProps = {
+  tags: ReturnType<typeof React.Children.toArray>;
+};
+
+const SelectTagContainerContent = (props: SelectTagContainerContentProps) => {
+  const { tags } = props;
+  const { visibleCount } = OverflowContainer.useContext();
+
+  return (
+    <>
+      {visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags}
+
+      <OverflowContainer.OverflowNode>
+        <SelectTag label={`+${tags.length - visibleCount + 1} item(s)`} />
+      </OverflowContainer.OverflowNode>
+    </>
+  );
+};