Chore: Use forwardRef in ButtonSelect (#22042)

* forwardRef to ButtonSelect

* Remove innerRef prop

* Use styleFactory

packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx

@@ -4,9 +4,10 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
 import { ButtonSize } from '../../Button/types';
 import { SelectCommonProps, SelectBase, CustomControlProps } from './SelectBase';
 import { css } from 'emotion';
-import { useTheme } from '../../../themes';
+import { stylesFactory, useTheme } from '../../../themes';
 import { Icon } from '../../Icon/Icon';
 import { IconType } from '../../Icon/types';
+import { GrafanaTheme } from '@grafana/data';
 
 interface ButtonSelectProps<T> extends Omit<SelectCommonProps<T>, 'renderControl' | 'size' | 'prefix'> {
   icon?: IconType;
@@ -17,12 +18,11 @@ interface ButtonSelectProps<T> extends Omit<SelectCommonProps<T>, 'renderControl
 interface SelectButtonProps extends Omit<ButtonProps, 'icon'> {
   icon?: IconType;
   isOpen?: boolean;
-  innerRef: any;
 }
 
-const SelectButton: React.FC<SelectButtonProps> = ({ icon, children, isOpen, innerRef, ...buttonProps }) => {
+const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProps>(
-  const theme = useTheme();
+  ({ icon, children, isOpen, ...buttonProps }, ref) => {
-  const styles = {
+    const getStyles = stylesFactory((theme: GrafanaTheme) => ({
       wrapper: css`
         display: flex;
         align-items: center;
@@ -39,11 +39,12 @@ const SelectButton: React.FC<SelectButtonProps> = ({ icon, children, isOpen, inn
         margin-right: -${theme.spacing.sm};
         height: 100%;
       `,
-  };
+    }));
+    const styles = getStyles(useTheme());
     const buttonIcon = `fa fa-${icon}`;
     const caretIcon = isOpen ? 'caret-up' : 'caret-down';
     return (
-    <Button {...buttonProps} ref={innerRef} icon={buttonIcon}>
+      <Button {...buttonProps} ref={ref} icon={buttonIcon}>
         <span className={styles.wrapper}>
           <span>{children}</span>
           <span className={styles.caretWrap}>
@@ -52,7 +53,8 @@ const SelectButton: React.FC<SelectButtonProps> = ({ icon, children, isOpen, inn
         </span>
       </Button>
     );
-};
+  }
+);
 
 export function ButtonSelect<T>({
   placeholder,
@@ -76,7 +78,7 @@ export function ButtonSelect<T>({
       {...selectProps}
       renderControl={React.forwardRef<any, CustomControlProps<T>>(({ onBlur, onClick, value, isOpen }, ref) => {
         return (
-          <SelectButton {...buttonProps} innerRef={ref} onBlur={onBlur} onClick={onClick} isOpen={isOpen}>
+          <SelectButton {...buttonProps} ref={ref} onBlur={onBlur} onClick={onClick} isOpen={isOpen}>
             {value ? value.label : placeholder}
           </SelectButton>
         );