fix(Toolbar): recalculate overflow elements on children change (#4383)

Fixes #4357

Author: Lukas742

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

@@ -13,7 +13,8 @@ import {
   ToolbarSeparator,
   ToolbarSpacer,
   ToolbarStyle,
-  OverflowToolbarToggleButton
+  OverflowToolbarToggleButton,
+  ToolbarPropTypes
 } from '../..';
 import { ButtonDesign, ToolbarDesign } from '../../enums';
 import { cssVarToRgb, cypressPassThroughTestsFactory, mountWithCustomTagName } from '@/cypress/support/utils';
@@ -490,6 +491,49 @@ describe('Toolbar', () => {
     cy.findByTestId('tb').should('have.css', 'boxShadow', 'rgb(0, 112, 242) 0px 0px 0px 2px inset');
   });
 
+  it('recalc on children change', () => {
+    const TestComp = (props: ToolbarPropTypes) => {
+      const [actions, setActions] = useState([]);
+      return (
+        <>
+          <button
+            onClick={() => {
+              setActions([
+                <Button key="0">Button</Button>,
+                <Button key="1">Button</Button>,
+                <Button key="2">Button</Button>,
+                <Button key="3">Button</Button>,
+                <Button key="4">Button</Button>,
+                <Button key="5">Button</Button>,
+                <Button key="6">Button</Button>,
+                <Button key="7">Button</Button>
+              ]);
+            }}
+          >
+            add
+          </button>
+          <button
+            onClick={() => {
+              setActions([]);
+            }}
+          >
+            remove
+          </button>
+          <Toolbar {...props}>{actions}</Toolbar>
+        </>
+      );
+    };
+    const overflowChange = cy.spy().as('overflowChange');
+    cy.mount(<TestComp onOverflowChange={overflowChange} style={{ width: '200px' }} />);
+
+    cy.get('[ui5-toggle-button]').should('not.exist');
+    cy.findByText('add').click();
+    cy.get('[ui5-toggle-button]').should('be.visible');
+    cy.findByText('remove').click();
+    cy.get('[ui5-toggle-button]').should('not.exist');
+    cy.get('@overflowChange').should('have.been.calledOnce');
+  });
+
   mountWithCustomTagName(Toolbar);
   cypressPassThroughTestsFactory(Toolbar);
 });

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

@@ -263,6 +263,12 @@ const Toolbar = forwardRef<HTMLDivElement, ToolbarPropTypes>((props, ref) => {
     };
   }, [calculateVisibleItems]);
 
+  useEffect(() => {
+    if (Children.count(children) > 0) {
+      calculateVisibleItems();
+    }
+  }, [children]);
+
   useIsomorphicLayoutEffect(() => {
     calculateVisibleItems();
   }, [calculateVisibleItems]);