diff --git a/packages/compat/src/components/Toolbar/Toolbar.cy.tsx b/packages/compat/src/components/Toolbar/Toolbar.cy.tsx
index a68db4ca792..3d6f3530774 100644
--- a/packages/compat/src/components/Toolbar/Toolbar.cy.tsx
+++ b/packages/compat/src/components/Toolbar/Toolbar.cy.tsx
@@ -622,6 +622,45 @@ describe('Toolbar', () => {
cy.get('[data-component-name="ToolbarOverflowPopoverContent"]').should('have.attr', 'role', 'menu');
});
+ it('no overflow button for spacer- or separator-only children', () => {
+ cy.mount(
+
+
+
+
+ ,
+ { strict: false }
+ );
+ cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('exist');
+
+ cy.mount(
+
+
+
+ ,
+ { strict: false }
+ );
+ cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('not.exist');
+ cy.mount(
+
+
+
+
+ ,
+ { strict: false }
+ );
+ cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('not.exist');
+ cy.mount(
+
+
+
+
+ ,
+ { strict: false }
+ );
+ cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('not.exist');
+ });
+
mountWithCustomTagName(Toolbar);
cypressPassThroughTestsFactory(Toolbar);
});
diff --git a/packages/compat/src/components/Toolbar/index.tsx b/packages/compat/src/components/Toolbar/index.tsx
index 657dbe03eea..b4fdd74e16d 100644
--- a/packages/compat/src/components/Toolbar/index.tsx
+++ b/packages/compat/src/components/Toolbar/index.tsx
@@ -32,6 +32,8 @@ export interface ToolbarPropTypes extends Omit((props, ref) => {
const childrenWithRef = useMemo(() => {
controlMetaData.current = [];
- return flatChildren.map((item, index) => {
+ let hasOnlySpacersOrSeparators = true;
+ const enrichedChildren = flatChildren.map((item, index) => {
const itemRef: RefObject = createRef();
// @ts-expect-error: if type is not defined, it's not a spacer
const isSpacer = item?.type?.displayName === 'ToolbarSpacer';
+ // @ts-expect-error: if type is not defined, it's not a separator
+ const isSeparator = item?.type?.displayName === 'ToolbarSeparator';
controlMetaData.current.push({
ref: itemRef,
isSpacer
});
+ if (!isSpacer && !isSeparator) {
+ hasOnlySpacersOrSeparators = false;
+ }
if (isSpacer) {
return item;
}
@@ -210,7 +218,15 @@ const Toolbar = forwardRef((props, ref) => {
);
});
- }, [flatChildren, controlMetaData, classNames.childContainer]);
+
+ if (hasOnlySpacersOrSeparators) {
+ return enrichedChildren.filter(
+ // @ts-expect-error: if type is not defined, it's not a separator or spacer
+ (item) => item?.type?.displayName !== 'ToolbarSpacer' && item?.type?.displayName === 'ToolbarSeparator'
+ );
+ }
+ return enrichedChildren;
+ }, [flatChildren, controlMetaData]);
const overflowNeeded =
(lastVisibleIndex || lastVisibleIndex === 0) &&