Fixes.

Author: novykh

src/components/drops/menu/README.md

@@ -18,12 +18,12 @@ interface MenuProps {
   children?: any
   dropProps?: DropProps
   items?: Item[]
-  renderItem?: RenderItemType
-  renderDropdown?: (props: {
+  Item?: RenderItemType
+  Dropdown?: (props: {
     items: Item[]
     value: string | number
     onItemClick: Function
-    renderItem: RenderItemType
+    Item: RenderItemType
   }) => JSX.Element
 
   [key: string]: any

src/components/drops/menu/dropdown.js

@@ -17,11 +17,12 @@ const Dropdown = ({
   itemProps,
   items,
   onItemClick,
-  renderItem,
+  Item,
   value,
   hasSearch,
   searchMargin = [4],
   gap = 0,
+  close,
   ...rest
 }) => {
   const [searchParams, setSearchParams] = useState("")
@@ -44,7 +45,6 @@ const Dropdown = ({
   )
 
   const ref = useRef()
-  const measuresRef = useRef({})
 
   const rowVirtualizer = useVirtualizer({
     count: filteredItems.length,
@@ -84,6 +84,7 @@ const Dropdown = ({
           minHeight: "100%",
           width: "100%",
           overflow: "auto",
+          minWidth: "300px",
         }}
       >
         <div
@@ -93,30 +94,32 @@ const Dropdown = ({
             position: "relative",
           }}
         >
-          {rowVirtualizer.getVirtualItems().map(virtualRow => (
-            <div
-              key={virtualRow.key}
-              data-index={virtualRow.index}
-              ref={rowVirtualizer.measureElement}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${virtualRow.start}px)`,
-                padding: gap * 2,
-                overflow: "hidden",
-              }}
-            >
-              {renderItem({
-                item: filteredItems[virtualRow.index],
-                index: virtualRow.index,
-                itemProps,
-                value,
-                onItemClick,
-              })}
-            </div>
-          ))}
+          {ref.current?.isConnected &&
+            rowVirtualizer.getVirtualItems().map(virtualRow => (
+              <div
+                key={virtualRow.key}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${virtualRow.start}px)`,
+                  padding: gap * 2,
+                  overflow: "hidden",
+                }}
+                data-index={virtualRow.index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <Item
+                  item={filteredItems[virtualRow.index]}
+                  index={virtualRow.index}
+                  itemProps={itemProps}
+                  value={value}
+                  onItemClick={onItemClick}
+                  close={close}
+                />
+              </div>
+            ))}
         </div>
       </div>
     </Container>

src/components/drops/menu/index.d.ts

@@ -31,12 +31,12 @@ export interface MenuProps {
     [key: string]: any
   }
   items?: Item[]
-  renderItem?: RenderItemType
-  renderDropdown?: (props: {
+  Item?: RenderItemType
+  Dropdown?: (props: {
     items: Item[]
     value: string | number
     onItemClick: Function
-    renderItem: RenderItemType
+    Item: RenderItemType
   }) => JSX.Element
 
   [key: string]: any

src/components/drops/menu/index.js

@@ -5,13 +5,9 @@ import getAncestors from "src/components/drops/mixins/getAncestors"
 import useForwardRef from "src/hooks/use-forward-ref"
 import useToggle from "src/hooks/use-toggle"
 import MenuButton from "./menuButton"
-import Dropdown from "./dropdown"
+import DefaultDropdown from "./dropdown"
 import DropdownItem from "./dropdownItem"
 
-const defaultRenderDropdown = props => <Dropdown {...props} />
-
-const defaultRenderItem = props => <DropdownItem {...props} />
-
 const Menu = forwardRef(
   (
     {
@@ -29,8 +25,8 @@ const Menu = forwardRef(
       dropdownProps,
       itemProps,
       items,
-      renderItem = defaultRenderItem,
-      renderDropdown = defaultRenderDropdown,
+      Item = DropdownItem,
+      Dropdown = DefaultDropdown,
       animation,
       hasSearch = false,
       ...rest
@@ -100,15 +96,16 @@ const Menu = forwardRef(
             target={ref.current}
             {...dropProps}
           >
-            {renderDropdown({
-              value,
-              onItemClick,
-              items,
-              itemProps,
-              renderItem,
-              hasSearch,
-              ...dropdownProps,
-            })}
+            <Dropdown
+              value={value}
+              onItemClick={onItemClick}
+              items={items}
+              itemProps={itemProps}
+              Item={Item}
+              hasSearch={hasSearch}
+              close={close}
+              {...dropdownProps}
+            />
           </Drop>
         )}
       </Fragment>

src/components/drops/menu/index.stories.js

@@ -53,25 +53,20 @@ story.add(
   subData
 )
 
+const ItemButton = ({ item, onItemClick }) => (
+  <Button key={item.value} label={item.label} onClick={onItemClick} />
+)
 story.add(
   "Render item",
-  () => (
-    <Simple
-      onOpen={action("open")}
-      onClose={action("close")}
-      renderItem={({ item, onItemClick }) => (
-        <Button key={item.value} label={item.label} onClick={onItemClick} />
-      )}
-    />
-  ),
+  () => <Simple onOpen={action("open")} onClose={action("close")} Item={ItemButton} />,
   subData
 )
 
 story.add(
   "Render dropdown",
   () => (
     <Simple
-      renderDropdown={({ value, onItemClick, items, renderItem }) => (
+      Dropdown={({ value, onItemClick, items, Item }) => (
         <Flex background="mainBackgroundDisabled" padding={[2]}>
           Characters are: {items.map(({ value }) => value).join(", ")}
         </Flex>

src/components/tableV2/core/fullTable.js

@@ -22,6 +22,7 @@ const FullTable = ({
   width,
   scrollParentRef,
   virtualizeOptions = {},
+  ...rest
 }) => {
   return (
     <Table
@@ -30,6 +31,7 @@ const FullTable = ({
       ref={tableRef}
       testPrefix={testPrefix}
       width={width}
+      {...rest}
     >
       <Table.Head data-testid={`netdata-table-head${testPrefix}`}>
         <Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>

src/components/tableV2/features/mainTable.js

@@ -16,6 +16,7 @@ const MainTable = ({
   onHoverRow,
   enableResize,
   scrollParentRef,
+  ...rest
 }) => {
   const headers = enableColumnPinning ? table.getCenterFlatHeaders() : table.getFlatHeaders()
 
@@ -36,6 +37,7 @@ const MainTable = ({
       disableClickRow={disableClickRow}
       flexRender={flexRender}
       tableRef={tableRef}
+      {...rest}
     />
   )
 }

src/components/tableV2/netdataTable.js

@@ -30,7 +30,7 @@ import useInfiniteScroll from "./hooks/useInfiniteScroll"
 const noop = () => {}
 
 const NetdataTable = ({
-  bulkActions = {},
+  bulkActions,
   columnPinningOptions = {},
   columnVisibility: initialColumnVisibility,
   data,
@@ -62,6 +62,7 @@ const NetdataTable = ({
   testPrefix = "",
   testPrefixCallback,
   virtualizeOptions = {},
+  ...rest
 }) => {
   const [isColumnDropdownVisible, setIsColumnDropdownVisible] = useState(false)
   const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility)
@@ -102,22 +103,25 @@ const NetdataTable = ({
 
   const makeActionsColumn = useMemo(() => makeRowActions({ rowActions, testPrefix }), [rowActions])
 
-  const renderBulkActions = () => [
-    makeBulkActions({
-      bulkActions,
-      columnPinning,
-      columnVisibilityOptions: {
-        handleAction: () => setIsColumnDropdownVisible(true),
-        isOpen: isColumnDropdownVisible,
-        onClose: () => setIsColumnDropdownVisible(false),
-        visible: enableColumnVisibility,
-      },
-      enableColumnPinning,
-      selectedRows: originalSelectedRows,
-      table,
-      testPrefix,
-    }),
-  ]
+  const renderBulkActions = () =>
+    bulkActions
+      ? [
+          makeBulkActions({
+            bulkActions,
+            columnPinning,
+            columnVisibilityOptions: {
+              handleAction: () => setIsColumnDropdownVisible(true),
+              isOpen: isColumnDropdownVisible,
+              onClose: () => setIsColumnDropdownVisible(false),
+              visible: enableColumnVisibility,
+            },
+            enableColumnPinning,
+            selectedRows: originalSelectedRows,
+            table,
+            testPrefix,
+          }),
+        ]
+      : null
 
   const makeSelectionColumn = enableSelection ? [makeRowSelection({ testPrefix })] : []
 
@@ -220,12 +224,14 @@ const NetdataTable = ({
   return (
     <SharedTableProvider>
       <Flex height="100%" overflow="hidden" width="100%" column>
-        <GlobalControls
-          bulkActions={renderBulkActions}
-          dataGa={dataGa}
-          handleSearch={onGlobalSearchChange ? handleGlobalSearch : null}
-          searchValue={globalFilter}
-        />
+        {onGlobalSearchChange || bulkActions ? (
+          <GlobalControls
+            bulkActions={renderBulkActions}
+            dataGa={dataGa}
+            handleSearch={onGlobalSearchChange ? handleGlobalSearch : null}
+            searchValue={globalFilter}
+          />
+        ) : null}
         <Flex
           ref={scrollParentRef}
           overflow={{ vertical: "auto", horizontal: "auto" }}
@@ -264,6 +270,7 @@ const NetdataTable = ({
             flexRender={flexRender}
             onHoverRow={onHoverRow}
             virtualizeOptions={virtualizeOptions}
+            {...rest}
           />
         </Flex>
         {enablePagination && makePagination({ table })}