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) &&