ref(menuListItem): Add tooltip props (#37079)

static/app/components/forms/selectOption.tsx

@@ -4,7 +4,6 @@ import {ClassNames} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import MenuListItem from 'sentry/components/menuListItem';
-import Tooltip from 'sentry/components/tooltip';
 import {IconCheckmark} from 'sentry/icons';
 import {defined} from 'sentry/utils';
 
@@ -26,14 +25,7 @@ function SelectOption(props: Props) {
     innerRef,
   } = props;
   const {showDividers} = selectProps;
-  const {
-    value,
-    tooltip,
-    tooltipOptions = {delay: 500},
-    selectionMode,
-    priority,
-    ...itemProps
-  } = data;
+  const {value, selectionMode, priority, ...itemProps} = data;
 
   const isMultiple = defined(selectionMode) ? selectionMode === 'multiple' : isMulti;
 
@@ -44,41 +36,39 @@ function SelectOption(props: Props) {
   return (
     <ClassNames>
       {({cx}) => (
-        <Tooltip skipWrapper title={tooltip} {...tooltipOptions}>
-          <MenuListItem
-            {...itemProps}
-            {...innerProps}
-            ref={innerRef}
-            className={cx({
-              option: true,
-              'option--is-disabled': isDisabled,
-              'option--is-focused': isFocused,
-              'option--is-selected': isSelected,
-            })}
-            as="div"
-            value={value}
-            label={label}
-            isDisabled={isDisabled}
-            isFocused={isFocused}
-            showDivider={showDividers}
-            priority={itemPriority}
-            innerWrapProps={{'data-test-id': value}}
-            labelProps={{as: typeof label === 'string' ? 'p' : 'div'}}
-            leadingItems={
-              <Fragment>
-                <CheckWrap isMultiple={isMultiple} isSelected={isSelected}>
-                  {isSelected && (
-                    <IconCheckmark
-                      size={isMultiple ? 'xs' : 'sm'}
-                      color={isMultiple ? 'white' : undefined}
-                    />
-                  )}
-                </CheckWrap>
-                {data.leadingItems}
-              </Fragment>
-            }
-          />
-        </Tooltip>
+        <MenuListItem
+          {...itemProps}
+          {...innerProps}
+          ref={innerRef}
+          className={cx({
+            option: true,
+            'option--is-disabled': isDisabled,
+            'option--is-focused': isFocused,
+            'option--is-selected': isSelected,
+          })}
+          as="div"
+          value={value}
+          label={label}
+          isDisabled={isDisabled}
+          isFocused={isFocused}
+          showDivider={showDividers}
+          priority={itemPriority}
+          innerWrapProps={{'data-test-id': value}}
+          labelProps={{as: typeof label === 'string' ? 'p' : 'div'}}
+          leadingItems={
+            <Fragment>
+              <CheckWrap isMultiple={isMultiple} isSelected={isSelected}>
+                {isSelected && (
+                  <IconCheckmark
+                    size={isMultiple ? 'xs' : 'sm'}
+                    color={isMultiple ? 'white' : undefined}
+                  />
+                )}
+              </CheckWrap>
+              {data.leadingItems}
+            </Fragment>
+          }
+        />
       )}
     </ClassNames>
   );

static/app/components/menuListItem.tsx

@@ -2,6 +2,7 @@ import {forwardRef as reactForwardRef} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
+import Tooltip, {InternalTooltipProps} from 'sentry/components/tooltip';
 import space from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import {Theme} from 'sentry/utils/theme';
@@ -40,6 +41,16 @@ export type MenuListItemProps = {
    * Whether to show a line divider below this item
    */
   showDivider?: boolean;
+  /**
+   * Optional tooltip that appears when the use hovers over the item. This is
+   * not very visible - if possible, add additional text via the `details`
+   * prop instead.
+   */
+  tooltip?: React.ReactNode;
+  /**
+   * Additional props to be passed into <Tooltip />.
+   */
+  tooltipOptions?: Omit<InternalTooltipProps, 'children' | 'title' | 'className'>;
   /*
    * Items to be added to the right of the label.
    */
@@ -81,46 +92,53 @@ function BaseMenuListItem({
   innerWrapProps = {},
   labelProps = {},
   detailsProps = {},
+  tooltip,
+  tooltipOptions = {delay: 500},
   forwardRef,
   ...props
 }: Props) {
   return (
     <MenuItemWrap as={as} ref={forwardRef} {...props}>
-      <InnerWrap
-        isDisabled={isDisabled}
-        isFocused={isFocused}
-        priority={priority}
-        {...innerWrapProps}
-      >
-        {leadingItems && (
-          <LeadingItems
-            isDisabled={isDisabled}
-            spanFullHeight={leadingItemsSpanFullHeight}
-          >
-            {leadingItems}
-          </LeadingItems>
-        )}
-        <ContentWrap isFocused={isFocused} showDivider={defined(details) || showDivider}>
-          <LabelWrap>
-            <Label aria-hidden="true" {...labelProps}>
-              {label}
-            </Label>
-            {details && (
-              <Details isDisabled={isDisabled} priority={priority} {...detailsProps}>
-                {details}
-              </Details>
-            )}
-          </LabelWrap>
-          {trailingItems && (
-            <TrailingItems
+      <Tooltip skipWrapper title={tooltip} {...tooltipOptions}>
+        <InnerWrap
+          isDisabled={isDisabled}
+          isFocused={isFocused}
+          priority={priority}
+          {...innerWrapProps}
+        >
+          {leadingItems && (
+            <LeadingItems
               isDisabled={isDisabled}
-              spanFullHeight={trailingItemsSpanFullHeight}
+              spanFullHeight={leadingItemsSpanFullHeight}
             >
-              {trailingItems}
-            </TrailingItems>
+              {leadingItems}
+            </LeadingItems>
           )}
-        </ContentWrap>
-      </InnerWrap>
+          <ContentWrap
+            isFocused={isFocused}
+            showDivider={defined(details) || showDivider}
+          >
+            <LabelWrap>
+              <Label aria-hidden="true" {...labelProps}>
+                {label}
+              </Label>
+              {details && (
+                <Details isDisabled={isDisabled} priority={priority} {...detailsProps}>
+                  {details}
+                </Details>
+              )}
+            </LabelWrap>
+            {trailingItems && (
+              <TrailingItems
+                isDisabled={isDisabled}
+                spanFullHeight={trailingItemsSpanFullHeight}
+              >
+                {trailingItems}
+              </TrailingItems>
+            )}
+          </ContentWrap>
+        </InnerWrap>
+      </Tooltip>
     </MenuItemWrap>
   );
 }

static/app/types/core.tsx

@@ -6,7 +6,6 @@
  */
 import type {getInterval} from 'sentry/components/charts/utils';
 import {MenuListItemProps} from 'sentry/components/menuListItem';
-import type {InternalTooltipProps} from 'sentry/components/tooltip';
 import type {API_ACCESS_SCOPES} from 'sentry/constants';
 
 /**
@@ -50,8 +49,6 @@ export type SelectValue<T> = MenuListItemProps & {
   label: string | number | React.ReactElement;
   value: T;
   disabled?: boolean;
-  tooltip?: React.ReactNode;
-  tooltipOptions?: Omit<InternalTooltipProps, 'children' | 'title' | 'className'>;
 };
 
 /**