fix(Toolbar - compat): prevent empty overflow popover (#7185)

If only `ToolbarSeparator` or `ToolbarSpacer` components are passed to
the `Toolbar`, the components won't be rendered to prevent an empty
overflow popover to show up if the width of the Toolbar is very small.

Author: Lukas742

packages/main/src/components/Toolbar/Toolbar.cy.tsx

@@ -615,6 +615,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(
+      <Toolbar style={{ width: '0px' }}>
+        <ToolbarSpacer />
+        <Button>Button</Button>
+        <ToolbarSeparator />
+      </Toolbar>,
+      { strict: false }
+    );
+    cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('exist');
+
+    cy.mount(
+      <Toolbar style={{ width: '0px' }}>
+        <ToolbarSpacer />
+        <ToolbarSeparator />
+      </Toolbar>,
+      { strict: false }
+    );
+    cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('not.exist');
+    cy.mount(
+      <Toolbar style={{ width: '0px' }}>
+        <ToolbarSpacer />
+        <ToolbarSpacer />
+        <ToolbarSpacer />
+      </Toolbar>,
+      { strict: false }
+    );
+    cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('not.exist');
+    cy.mount(
+      <Toolbar style={{ width: '0px' }}>
+        <ToolbarSeparator />
+        <ToolbarSeparator />
+        <ToolbarSeparator />
+      </Toolbar>,
+      { strict: false }
+    );
+    cy.get('[data-component-name="ToolbarOverflowButtonContainer"]').should('not.exist');
+  });
+
   mountWithCustomTagName(Toolbar);
   cypressPassThroughTestsFactory(Toolbar);
 });

packages/main/src/components/Toolbar/index.tsx

@@ -29,6 +29,8 @@ export interface ToolbarPropTypes extends Omit<CommonProps, 'onClick' | 'childre
    * __Note:__ Although this prop accepts all `ReactNode` types, it is strongly recommended to not pass `string`, `number` or a React Portal to it.
    *
    * __Note:__ Only components displayed inside the Toolbar are supported as children, i.e. elements positioned outside the normal flow of the document (like dialogs or popovers), can cause undesired behavior.
+   *
+   * __Note:__ If only `ToolbarSpacer`s or `ToolbarSeparator`s are added to the Toolbar, the components will not be rendered.
    */
   children?: ReactNode | ReactNode[];
   /**
@@ -188,14 +190,20 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
   const childrenWithRef = useMemo(() => {
     controlMetaData.current = [];
 
-    return flatChildren.map((item, index) => {
+    let hasOnlySpacersOrSeparators = true;
+    const enrichedChildren = flatChildren.map((item, index) => {
       const itemRef: RefObject<HTMLDivElement> = 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<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
         </div>
       );
     });
-  }, [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) &&