X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/3456de80d25dfb480133bd8afd9f51cdb1d942ee..bfa2055c4184c1fe7d56936cf5af4d57cc6fcb22:/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx

diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
index e63225b05f..de1acf1eea 100644
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
@@ -4,9 +4,9 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
-import classnames from 'classnames'
+import classnames from 'classnames';
 import { ArvadosTheme } from 'common/custom-theme';
-import { OverflowMenu } from './ms-toolbar-overflow-menu';
+import { OverflowMenu, OverflowChild } from './ms-toolbar-overflow-menu';
 
 type CssRules = 'visible' | 'inVisible' | 'toolbarWrapper' | 'overflowStyle';
 
@@ -35,8 +35,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
 });
 
-export const IntersectionObserverWrapper = withStyles(styles)((props: any & WithStyles<CssRules>) => {
-  const { classes, children} = props
+type WrapperProps = {
+    children: OverflowChild[];
+};
+
+export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperProps & WithStyles<CssRules>) => {
+    const { classes, children } = props;
 
     const navRef = useRef<any>(null);
     const [visibilityMap, setVisibilityMap] = useState({});
@@ -78,21 +82,24 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: any & With
     }, []);
 
     return (
-      <div className={classes.toolbarWrapper} ref={navRef}>
-      {React.Children.map(children, (child) => {
-        return React.cloneElement(child, {
-          className: classnames(child.props.className, {
-            [classes.visible]: !!visibilityMap[child.props["data-targetid"]],
-            [classes.inVisible]: !visibilityMap[child.props["data-targetid"]]
-          })
-        });
-      })}
-      <OverflowMenu
-        visibilityMap={visibilityMap}
-        className={classes.overflowStyle}
-      >
-        {children}
-      </OverflowMenu>
-    </div>
+        <div
+            className={classes.toolbarWrapper}
+            ref={navRef}
+        >
+            {React.Children.map(children, (child) => {
+                return React.cloneElement(child, {
+                    className: classnames(child.props.className, {
+                        [classes.visible]: !!visibilityMap[child.props['data-targetid']],
+                        [classes.inVisible]: !visibilityMap[child.props['data-targetid']],
+                    }),
+                });
+            })}
+            <OverflowMenu
+                visibilityMap={visibilityMap}
+                className={classes.overflowStyle}
+            >
+                {children}
+            </OverflowMenu>
+        </div>
     );
 });