[EuiSuperDatePicker] Add customQuickSelectRender prop

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, ReactNode, ReactElement } from 'react';
 
 import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
@@ -33,6 +33,11 @@ export interface EuiQuickSelectPopoverProps {
   applyTime: ApplyTime;
   commonlyUsedRanges: DurationRange[];
   customQuickSelectPanels?: QuickSelectPanel[];
+  customQuickSelectRender?: (
+    commonlyUsedTimes: ReactElement<typeof EuiCommonlyUsedTimeRanges>,
+    recentlyUsedTimes: ReactElement<typeof EuiRecentlyUsed>,
+    customQuickSelectPanels?: ReactElement<QuickSelectPanel[]>
+  ) => ReactNode;
   dateFormat: string;
   end: string;
   isDisabled: boolean;
@@ -92,31 +97,59 @@ export class EuiQuickSelectPopover extends Component<
       recentlyUsedRanges,
       start,
       timeOptions,
+      customQuickSelectRender,
     } = this.props;
     const { prevQuickSelect } = this.state;
 
-    return (
-      <Fragment>
-        <EuiQuickSelect
-          applyTime={this.applyTime}
-          start={start}
-          end={end}
-          prevQuickSelect={prevQuickSelect}
-          timeOptions={timeOptions}
-        />
+    const commonlyUsedRangesElement = (
+      <>
         {commonlyUsedRanges.length > 0 && <EuiHorizontalRule margin="s" />}
         <EuiCommonlyUsedTimeRanges
           applyTime={this.applyTime}
           commonlyUsedRanges={commonlyUsedRanges}
         />
+      </>
+    );
+
+    const recentlyUsedRangesElement = (
+      <>
         {recentlyUsedRanges.length > 0 && <EuiHorizontalRule margin="s" />}
         <EuiRecentlyUsed
           applyTime={this.applyTime}
           commonlyUsedRanges={commonlyUsedRanges}
           dateFormat={dateFormat}
           recentlyUsedRanges={recentlyUsedRanges}
         />
-        {this.renderCustomQuickSelectPanels()}
+      </>
+    );
+
+    const customQuickSelectPanelsElement = (
+      <>{this.renderCustomQuickSelectPanels()}</>
+    );
+
+    return (
+      <Fragment>
+        <EuiQuickSelect
+          applyTime={this.applyTime}
+          start={start}
+          end={end}
+          prevQuickSelect={prevQuickSelect}
+          timeOptions={timeOptions}
+        />
+
+        {customQuickSelectRender ? (
+          customQuickSelectRender(
+            commonlyUsedRangesElement,
+            recentlyUsedRangesElement,
+            customQuickSelectPanelsElement
+          )
+        ) : (
+          <>
+            {commonlyUsedRangesElement}
+            {recentlyUsedRangesElement}
+            {customQuickSelectPanelsElement}
+          </>
+        )}
       </Fragment>
     );
   };

src/components/date_picker/super_date_picker/super_date_picker.tsx

@@ -6,7 +6,13 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, FocusEventHandler, FunctionComponent } from 'react';
+import React, {
+  Component,
+  FocusEventHandler,
+  FunctionComponent,
+  ReactNode,
+  ReactElement,
+} from 'react';
 import classNames from 'classnames';
 import moment, { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named
 import dateMath from '@elastic/datemath';
@@ -43,6 +49,9 @@ import {
   EuiAutoRefreshButton,
 } from '../auto_refresh/auto_refresh';
 
+import { EuiCommonlyUsedTimeRanges } from './quick_select_popover/commonly_used_time_ranges';
+import { EuiRecentlyUsed } from './quick_select_popover/recently_used';
+
 export interface OnTimeChangeProps extends DurationRange {
   isInvalid: boolean;
   isQuickSelection: boolean;
@@ -56,6 +65,15 @@ export type EuiSuperDatePickerProps = CommonProps & {
   commonlyUsedRanges?: DurationRange[];
   customQuickSelectPanels?: QuickSelectPanel[];
 
+  /**
+   * A function that allows the Quick Select panels to render in a custom order
+   */
+  customQuickSelectRender?: (
+    commonlyUsedTimes: ReactElement<typeof EuiCommonlyUsedTimeRanges>,
+    recentlyUsedTimes: ReactElement<typeof EuiRecentlyUsed>,
+    customQuickSelectPanels?: ReactElement<QuickSelectPanel[]>
+  ) => ReactNode;
+
   /**
    * Specifies the formatted used when displaying dates and/or datetimes
    */
@@ -536,6 +554,7 @@ export class EuiSuperDatePickerInternal extends Component<
       commonlyUsedRanges,
       timeOptions,
       customQuickSelectPanels,
+      customQuickSelectRender,
       dateFormat,
       end,
       isAutoRefreshOnly,
@@ -575,6 +594,7 @@ export class EuiSuperDatePickerInternal extends Component<
         applyTime={this.applyQuickTime}
         commonlyUsedRanges={commonlyUsedRanges}
         customQuickSelectPanels={customQuickSelectPanels}
+        customQuickSelectRender={customQuickSelectRender}
         dateFormat={dateFormat}
         end={end}
         isDisabled={isDisabled}