From 675457fb101f5181c4985d4c99ae9ec06f77dffa Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 8 Jul 2024 10:32:15 +0100
Subject: [PATCH] Select: Better styling for virtualized group separators
 (#90127)

* better styling for group separators

* update comment

* revert back to 37
---
 .../src/components/Select/SelectMenu.tsx      | 28 ++++++++-----------
 .../src/components/Select/getSelectStyles.ts  |  3 --
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index 4513229a4b9..73fda63e4b6 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -3,7 +3,7 @@ import { max } from 'lodash';
 import { RefCallback, useEffect, useMemo, useRef } from 'react';
 import * as React from 'react';
 import { MenuListProps } from 'react-select';
-import { VariableSizeList as List } from 'react-window';
+import { FixedSizeList as List } from 'react-window';
 
 import { SelectableValue, toIconName } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -36,10 +36,8 @@ export const SelectMenu = ({ children, maxHeight, innerRef, innerProps }: React.
 SelectMenu.displayName = 'SelectMenu';
 
 const VIRTUAL_LIST_ITEM_HEIGHT = 37;
-const VIRTUAL_DIVIDER_HEIGHT = 1;
 const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 8;
 const VIRTUAL_LIST_PADDING = 8;
-const DIVIDER_KEY = 'divider';
 // Some list items have icons or checkboxes so we need some extra width
 const VIRTUAL_LIST_WIDTH_EXTRA = 36;
 
@@ -91,8 +89,16 @@ export const VirtualizedSelectMenu = ({
       });
       return [
         childWithoutChildren,
-        ...child.props.children,
-        <div key={`${DIVIDER_KEY}-${flattenedOptions[index].label}`} className={styles.virtualizedSeparator} />,
+        ...child.props.children.slice(0, -1),
+        // add a bottom divider to the last item in the category
+        React.cloneElement(child.props.children.at(-1), {
+          innerProps: {
+            style: {
+              borderBottom: `1px solid ${theme.colors.border.weak}`,
+              height: VIRTUAL_LIST_ITEM_HEIGHT,
+            },
+          },
+        }),
       ];
     }
     return [child];
@@ -103,15 +109,6 @@ export const VirtualizedSelectMenu = ({
     longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER + VIRTUAL_LIST_PADDING * 2 + VIRTUAL_LIST_WIDTH_EXTRA;
   const heightEstimate = Math.min(flattenedChildren.length * VIRTUAL_LIST_ITEM_HEIGHT, maxHeight);
 
-  const getRowHeight = (rowIndex: number) => {
-    const row = flattenedChildren[rowIndex];
-    if (row.key.includes(DIVIDER_KEY)) {
-      return VIRTUAL_DIVIDER_HEIGHT;
-    }
-
-    return VIRTUAL_LIST_ITEM_HEIGHT;
-  };
-
   return (
     <List
       ref={listRef}
@@ -120,8 +117,7 @@ export const VirtualizedSelectMenu = ({
       width={widthEstimate}
       aria-label="Select options menu"
       itemCount={flattenedChildren.length}
-      itemSize={getRowHeight}
-      estimatedItemSize={VIRTUAL_LIST_ITEM_HEIGHT}
+      itemSize={VIRTUAL_LIST_ITEM_HEIGHT}
     >
       {({ index, style }) => <div style={{ ...style, overflow: 'hidden' }}>{flattenedChildren[index]}</div>}
     </List>
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 7ba10c5ea45..a75b79417a3 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -163,8 +163,5 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
         borderBottom: `1px solid ${theme.colors.border.weak}`,
       },
     }),
-    virtualizedSeparator: css({
-      borderTop: `1px solid ${theme.colors.border.weak}`,
-    }),
   };
 });