From 6d1e323b78bae2b9909d168e352fac70af668435 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Fri, 10 Apr 2020 18:03:27 +0300
Subject: [PATCH] Grafana UI: make menuPlacement customizable (#23499)

---
 .../src/components/Select/SelectBase.tsx      |  3 +-
 .../grafana-ui/src/components/Select/types.ts | 51 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 41adf0fa569..cba4a81e07c 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -86,6 +86,7 @@ export function SelectBase<T>({
   loadingMessage = 'Loading options...',
   maxMenuHeight = 300,
   menuPosition,
+  menuPlacement = 'auto',
   noOptionsMessage = 'No options found',
   onBlur,
   onChange,
@@ -158,7 +159,7 @@ export function SelectBase<T>({
     isSearchable,
     maxMenuHeight,
     menuIsOpen: isOpen,
-    menuPlacement: 'auto',
+    menuPlacement,
     menuPosition,
     menuShouldScrollIntoView: false,
     onBlur,
diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts
index ee63702b122..0e0267ed9af 100644
--- a/packages/grafana-ui/src/components/Select/types.ts
+++ b/packages/grafana-ui/src/components/Select/types.ts
@@ -5,43 +5,44 @@ import { FormInputSize } from '../Forms/types';
 export type SelectValue<T> = T | SelectableValue<T> | T[] | Array<SelectableValue<T>>;
 
 export interface SelectCommonProps<T> {
+  allowCustomValue?: boolean;
+  autoFocus?: boolean;
+  backspaceRemovesValue?: boolean;
   className?: string;
-  options?: Array<SelectableValue<T>>;
+  components?: any;
   defaultValue?: any;
-  inputValue?: string;
-  value?: SelectValue<T>;
+  disabled?: boolean;
+  formatCreateLabel?: (input: string) => string;
   getOptionLabel?: (item: SelectableValue<T>) => string;
   getOptionValue?: (item: SelectableValue<T>) => string;
-  onCreateOption?: (value: string) => void;
+  inputValue?: string;
+  isClearable?: boolean;
+  isLoading?: boolean;
+  isMulti?: boolean;
+  isOpen?: boolean;
+  isSearchable?: boolean;
+  maxMenuHeight?: number;
+  menuPlacement?: 'auto' | 'bottom' | 'top';
+  menuPosition?: 'fixed' | 'absolute';
+  noOptionsMessage?: string;
+  onBlur?: () => void;
   onChange: (value: SelectableValue<T>) => {} | void;
+  onCloseMenu?: () => void;
+  onCreateOption?: (value: string) => void;
   onInputChange?: (label: string) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  isSearchable?: boolean;
-  isClearable?: boolean;
-  autoFocus?: boolean;
-  openMenuOnFocus?: boolean;
-  onBlur?: () => void;
-  maxMenuHeight?: number;
-  isLoading?: boolean;
-  noOptionsMessage?: string;
-  isMulti?: boolean;
-  backspaceRemovesValue?: boolean;
-  isOpen?: boolean;
-  components?: any;
   onOpenMenu?: () => void;
-  onCloseMenu?: () => void;
-  tabSelectsValue?: boolean;
-  formatCreateLabel?: (input: string) => string;
-  allowCustomValue?: boolean;
-  width?: number;
-  size?: FormInputSize;
+  openMenuOnFocus?: boolean;
+  options?: Array<SelectableValue<T>>;
+  placeholder?: string;
   /** item to be rendered in front of the input */
   prefix?: JSX.Element | string | null;
   /** Use a custom element to control Select. A proper ref to the renderControl is needed if 'portal' isn't set to null*/
   renderControl?: ControlComponent<T>;
-  menuPosition?: 'fixed' | 'absolute';
+  size?: FormInputSize;
+  tabSelectsValue?: boolean;
+  value?: SelectValue<T>;
+  width?: number;
 }
 
 export interface SelectAsyncProps<T> {