@elastic/eui 71.1.0 → 72.1.0

package/eui.d.ts

@@ -4587,7 +4587,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    /**
 	     * Object of props passed to EuiFocusTrap
 	     */
-	    focusTrapProps?: Pick<EuiFocusTrapProps, 'clickOutsideDisables' | 'noIsolation' | 'scrollLock' | 'shards'>;
+	    focusTrapProps?: Pick<EuiFocusTrapProps, 'clickOutsideDisables' | 'onClickOutside' | 'noIsolation' | 'scrollLock' | 'shards'>;
 	    /**
 	     * Show arrow indicating to originating button
 	     */
@@ -6433,6 +6433,29 @@ declare module '@elastic/eui/src/components/color_picker/color_picker' {
 	export const EuiColorPicker: FunctionComponent<EuiColorPickerProps>;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/color_picker/color_picker.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiColorPickerVariables: (euiThemeContext: UseEuiTheme) => {
+	    width: string;
+	};
+
+}
+declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiColorStopThumbStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStopThumb: import("@emotion/utils").SerializedStyles;
+	    isPopoverOpen: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiColorStopThumbPopoverStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStopThumbPopover: import("@emotion/utils").SerializedStyles;
+	    isLoadingPanel: import("@emotion/utils").SerializedStyles;
+	    hasFocus: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiColorStopStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStop: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb' {
 	import { FunctionComponent, CSSProperties } from 'react';
@@ -6473,6 +6496,25 @@ declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_
 	export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps>;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/color_picker/color_stops/color_stops.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiColorStopsStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStops: import("@emotion/utils").SerializedStyles;
+	    isEnabled: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	    isHoverDisabled: import("@emotion/utils").SerializedStyles;
+	    isReadOnly: import("@emotion/utils").SerializedStyles;
+	    isDragging: import("@emotion/utils").SerializedStyles;
+	    euiColorStops__track: import("@emotion/utils").SerializedStyles;
+	    euiColorStops__addTarget: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiColorStopsAddContainerStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStopsAddContainer: import("@emotion/utils").SerializedStyles;
+	    isEnabled: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/color_picker/color_stops/color_stops' {
 	import { FunctionComponent } from 'react';
@@ -6586,6 +6628,12 @@ declare module '@elastic/eui/src/services/color/manipulation' {
 	 * @param amount - Amount to change in absolute terms. 0-1.
 	 */
 	export const darken: (color: string, amount: number) => string;
+	/**
+	 * Returns the brighten value of a color. 0-100
+	 * @param color - Color to manipulate
+	 * @param amount - Amount to change in absolute terms. 0-1.
+	 */
+	export const brighten: (color: string, amount: number) => string;
 
 }
 declare module '@elastic/eui/src/services/color/contrast' {
@@ -7203,6 +7251,54 @@ declare module '@elastic/eui/src/services/format' {
 	export { formatNumber } from '@elastic/eui/src/services/format/format_number';
 	export { formatText } from '@elastic/eui/src/services/format/format_text';
 
+}
+declare module '@elastic/eui/src/services/hooks/useUpdateEffect' {
+	export const useUpdateEffect: (effect: Function, deps: unknown[]) => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useDependentState' {
+	
+	export function useDependentState<T>(valueFn: (previousState: undefined | T) => T, deps: unknown[]): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
+
+}
+declare module '@elastic/eui/src/services/hooks/useCombinedRefs' {
+	import { MutableRefObject, Ref } from 'react';
+	export const useCombinedRefs: <T>(refs: (Ref<T> | MutableRefObject<T | undefined> | undefined)[]) => (node: T) => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useForceRender' {
+	export const useForceRender: () => () => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useLatest' {
+	import { MutableRefObject } from 'react';
+	/**
+	 * Wraps the given `value` into a `MutableRefObject` and keeps the `current`
+	 * value up-to-date on every render cycle.
+	 */
+	export function useLatest<Value>(value: Value): MutableRefObject<Value | null>;
+
+}
+declare module '@elastic/eui/src/services/hooks/useMouseMove' {
+	import { MouseEvent, TouchEvent } from 'react';
+	export function isMouseEvent<T = HTMLDivElement>(event: MouseEvent<T> | TouchEvent<T>): event is MouseEvent<T>;
+	export function useMouseMove<T = HTMLDivElement>(handleChange: (location: {
+	    x: number;
+	    y: number;
+	}, isFirstInteraction?: boolean) => void, interactionConditional?: any): [
+	    (e: MouseEvent<T>) => void,
+	    (e: MouseEvent<T> | TouchEvent<T>, isFirstInteraction?: boolean) => void
+	];
+
+}
+declare module '@elastic/eui/src/services/hooks' {
+	export * from '@elastic/eui/src/services/hooks/useDependentState';
+	export * from '@elastic/eui/src/services/hooks/useCombinedRefs';
+	export * from '@elastic/eui/src/services/hooks/useForceRender';
+	export * from '@elastic/eui/src/services/hooks/useLatest';
+	export * from '@elastic/eui/src/services/hooks/useMouseMove';
+	export * from '@elastic/eui/src/services/hooks/useUpdateEffect';
+
 }
 declare module '@elastic/eui/src/services/paging/pager' {
 	export class Pager {
@@ -7286,50 +7382,6 @@ declare module '@elastic/eui/src/services/security/get_secure_rel_for_target' {
 declare module '@elastic/eui/src/services/security' {
 	export { getSecureRelForTarget } from '@elastic/eui/src/services/security/get_secure_rel_for_target';
 
-}
-declare module '@elastic/eui/src/services/string/to_initials' {
-	/**
-	 * This function calculates the initials/acronym for a given name.
-	 * It defaults to only 2 characters and will take the first character (of each word).
-	 * If only one word is supplied for the name, it will only pass back the first letter of the word,
-	 * unless forced to 2 letters by setting `initialsLength` to `2`.
-	 * It will pass back the characters with the same casing as the original string
-	 * unless otherwise specified.
-	 *
-	 * @param {string} name The full name of the item to turn into initials
-	 * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
-	 * @param {string} initials (Optional) Custom initials (max 2 characters)
-	 * @returns {string} True if the color is dark, false otherwise.
-	 */
-	export const MAX_INITIALS = 2;
-	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string | null;
-
-}
-declare module '@elastic/eui/src/services/string/to_case' {
-	/**
-	 * This function returns the same string with the first letter of the first word capitalized.
-	 *
-	 * @param {string} string The input string
-	 */
-	export function toSentenceCase(string: string): string;
-
-}
-declare module '@elastic/eui/src/services/string/slugify' {
-	/**
-	 * Lowercases input and replaces spaces with hyphens:
-	 * e.g. 'GridView Example' -> 'gridview-example'
-	 *
-	 * @param {string} string The starting string
-	 * @returns {string} Lowercase, dashed version of the starting staring
-	 */
-	export function slugify(str: string): string;
-
-}
-declare module '@elastic/eui/src/services/string' {
-	export { toInitials } from '@elastic/eui/src/services/string/to_initials';
-	export { toSentenceCase } from '@elastic/eui/src/services/string/to_case';
-	export { slugify } from '@elastic/eui/src/services/string/slugify';
-
 }
 declare module '@elastic/eui/src/services/sort/sort_direction' {
 	import PropTypes from 'prop-types'; const ASC: "asc"; const DESC: "desc";
@@ -7441,6 +7493,50 @@ declare module '@elastic/eui/src/services/sort' {
 	export { PropertySortType } from '@elastic/eui/src/services/sort/property_sort';
 	export { Comparators } from '@elastic/eui/src/services/sort/comparators';
 
+}
+declare module '@elastic/eui/src/services/string/to_initials' {
+	/**
+	 * This function calculates the initials/acronym for a given name.
+	 * It defaults to only 2 characters and will take the first character (of each word).
+	 * If only one word is supplied for the name, it will only pass back the first letter of the word,
+	 * unless forced to 2 letters by setting `initialsLength` to `2`.
+	 * It will pass back the characters with the same casing as the original string
+	 * unless otherwise specified.
+	 *
+	 * @param {string} name The full name of the item to turn into initials
+	 * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
+	 * @param {string} initials (Optional) Custom initials (max 2 characters)
+	 * @returns {string} True if the color is dark, false otherwise.
+	 */
+	export const MAX_INITIALS = 2;
+	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string | null;
+
+}
+declare module '@elastic/eui/src/services/string/to_case' {
+	/**
+	 * This function returns the same string with the first letter of the first word capitalized.
+	 *
+	 * @param {string} string The input string
+	 */
+	export function toSentenceCase(string: string): string;
+
+}
+declare module '@elastic/eui/src/services/string/slugify' {
+	/**
+	 * Lowercases input and replaces spaces with hyphens:
+	 * e.g. 'GridView Example' -> 'gridview-example'
+	 *
+	 * @param {string} string The starting string
+	 * @returns {string} Lowercase, dashed version of the starting staring
+	 */
+	export function slugify(str: string): string;
+
+}
+declare module '@elastic/eui/src/services/string' {
+	export { toInitials } from '@elastic/eui/src/services/string/to_initials';
+	export { toSentenceCase } from '@elastic/eui/src/services/string/to_case';
+	export { slugify } from '@elastic/eui/src/services/string/slugify';
+
 }
 declare module '@elastic/eui/src/services/transition/transition' {
 	export const getTransitionTimings: (element: Element) => {
@@ -7476,84 +7572,36 @@ declare module '@elastic/eui/src/services/window_event/window_event' {
 declare module '@elastic/eui/src/services/window_event' {
 	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event/window_event';
 
-}
-declare module '@elastic/eui/src/services/hooks/useUpdateEffect' {
-	export const useUpdateEffect: (effect: Function, deps: unknown[]) => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useDependentState' {
-	
-	export function useDependentState<T>(valueFn: (previousState: undefined | T) => T, deps: unknown[]): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
-
-}
-declare module '@elastic/eui/src/services/hooks/useCombinedRefs' {
-	import { MutableRefObject, Ref } from 'react';
-	export const useCombinedRefs: <T>(refs: (Ref<T> | MutableRefObject<T | undefined> | undefined)[]) => (node: T) => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useForceRender' {
-	export const useForceRender: () => () => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useLatest' {
-	import { MutableRefObject } from 'react';
-	/**
-	 * Wraps the given `value` into a `MutableRefObject` and keeps the `current`
-	 * value up-to-date on every render cycle.
-	 */
-	export function useLatest<Value>(value: Value): MutableRefObject<Value | null>;
-
-}
-declare module '@elastic/eui/src/services/hooks/useMouseMove' {
-	import { MouseEvent, TouchEvent } from 'react';
-	export function isMouseEvent<T = HTMLDivElement>(event: MouseEvent<T> | TouchEvent<T>): event is MouseEvent<T>;
-	export function useMouseMove<T = HTMLDivElement>(handleChange: (location: {
-	    x: number;
-	    y: number;
-	}, isFirstInteraction?: boolean) => void, interactionConditional?: any): [
-	    (e: MouseEvent<T>) => void,
-	    (e: MouseEvent<T> | TouchEvent<T>, isFirstInteraction?: boolean) => void
-	];
-
-}
-declare module '@elastic/eui/src/services/hooks' {
-	export * from '@elastic/eui/src/services/hooks/useDependentState';
-	export * from '@elastic/eui/src/services/hooks/useCombinedRefs';
-	export * from '@elastic/eui/src/services/hooks/useForceRender';
-	export * from '@elastic/eui/src/services/hooks/useLatest';
-	export * from '@elastic/eui/src/services/hooks/useMouseMove';
-	export * from '@elastic/eui/src/services/hooks/useUpdateEffect';
-
 }
 declare module '@elastic/eui/src/services' {
 	import * as keys from '@elastic/eui/src/services/keys';
-	export { keys };
 	export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId, } from '@elastic/eui/src/services/accessibility';
+	export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui/src/services/alignment';
 	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
-	export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/src/services/alignment';
+	export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui/src/services/breakpoint';
 	export type { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, } from '@elastic/eui/src/services/breakpoint';
+	export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin, } from '@elastic/eui/src/services/color';
 	export type { HSV } from '@elastic/eui/src/services/color';
-	export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, darken, makeHighContrastColor, makeDisabledContrastColor, wcagContrastMin, } from '@elastic/eui/src/services/color';
-	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
 	export { useColorPickerState, useColorStopsState } from '@elastic/eui/src/services/color_picker';
+	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
 	export * from '@elastic/eui/src/services/console';
 	export { copyToClipboard } from '@elastic/eui/src/services/copy_to_clipboard';
 	export * from '@elastic/eui/src/services/findElement';
-	export { formatAuto, formatBoolean, formatDate, formatNumber, formatText, dateFormatAliases, } from '@elastic/eui/src/services/format';
+	export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText, } from '@elastic/eui/src/services/format';
+	export * from '@elastic/eui/src/services/hooks';
 	export { isEvenlyDivisibleBy, isWithinRange } from '@elastic/eui/src/services/number';
 	export { Pager } from '@elastic/eui/src/services/paging';
+	export { calculatePopoverPosition, findPopoverPosition } from '@elastic/eui/src/services/popover';
 	export { Random } from '@elastic/eui/src/services/random';
 	export { getSecureRelForTarget } from '@elastic/eui/src/services/security';
-	export { toSentenceCase, toInitials, slugify } from '@elastic/eui/src/services/string';
-	export type { PropertySort, Direction } from '@elastic/eui/src/services/sort';
-	export { PropertySortType, SortDirectionType, SortDirection, SortableProperties, Comparators, } from '@elastic/eui/src/services/sort';
-	export { calculatePopoverPosition, findPopoverPosition } from '@elastic/eui/src/services/popover';
+	export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType, } from '@elastic/eui/src/services/sort';
+	export type { Direction, PropertySort } from '@elastic/eui/src/services/sort';
+	export { slugify, toInitials, toSentenceCase } from '@elastic/eui/src/services/string';
+	export * from '@elastic/eui/src/services/theme';
+	export { throttle } from '@elastic/eui/src/services/throttle';
 	export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame, } from '@elastic/eui/src/services/transition';
 	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event';
-	export * from '@elastic/eui/src/services/hooks';
-	export { throttle } from '@elastic/eui/src/services/throttle';
-	export * from '@elastic/eui/src/services/theme';
+	export { keys };
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_color' {
@@ -13479,11 +13527,18 @@ declare module '@elastic/eui/src/components/tabs/tabs' {
 	    children?: React.ReactNode;
 	} & React.RefAttributes<HTMLDivElement>>;
 
+}
+declare module '@elastic/eui/src/components/tabs/tabs_context' {
+	
+	import { EuiTabsProps } from '@elastic/eui/src/components/tabs/tabs';
+	export type EuiTabsContextValues = Required<Pick<EuiTabsProps, 'expand' | 'size'>>;
+	export const contextDefaults: EuiTabsContextValues;
+	export const EuiTabsContext: import("react").Context<Required<Pick<EuiTabsProps, "size" | "expand">>>;
+
 }
 declare module '@elastic/eui/src/components/tabs/tab' {
 	import { MouseEventHandler, AnchorHTMLAttributes, ButtonHTMLAttributes, FunctionComponent, ReactNode } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	import { EuiTabsProps, EuiTabsSizes } from '@elastic/eui/src/components/tabs/tabs';
 	export interface EuiTabProps extends CommonProps {
 	    isSelected?: boolean;
 	    disabled?: boolean;
@@ -13497,16 +13552,6 @@ declare module '@elastic/eui/src/components/tabs/tab' {
 	     * Will be excluded from interactive effects.
 	     */
 	    append?: ReactNode;
-	    /**
-	     * Evenly stretches each tab to fill the
-	     * horizontal space
-	     */
-	    expand?: EuiTabsProps['expand'];
-	    /**
-	     * Sizes affect both font size and overall size.
-	     * Only use the `xl` size when displayed as page titles.
-	     */
-	    size?: EuiTabsSizes;
 	} type EuiTabPropsForAnchor = EuiTabProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href'> & {
 	    href?: string;
 	    onClick?: MouseEventHandler<HTMLAnchorElement>;
@@ -13950,14 +13995,26 @@ declare module '@elastic/eui/src/components/date_picker/auto_refresh/refresh_int
 
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover' {
-	import { Component } from 'react';
+	import { FunctionComponent, ReactNode, ReactElement } from 'react';
+	import { EuiQuickSelect } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select';
+	import { EuiCommonlyUsedTimeRanges } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges';
+	import { EuiRecentlyUsed } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used';
+	import { EuiRefreshInterval } from '@elastic/eui/src/components/date_picker/auto_refresh/refresh_interval';
 	import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
 	import { DurationRange, ApplyRefreshInterval, ApplyTime, QuickSelect, QuickSelectPanel } from '@elastic/eui/src/components/date_picker/types';
+	export type CustomQuickSelectRenderOptions = {
+	    quickSelect: ReactElement<typeof EuiQuickSelect>;
+	    commonlyUsedRanges: ReactElement<typeof EuiCommonlyUsedTimeRanges>;
+	    recentlyUsedRanges: ReactElement<typeof EuiRecentlyUsed>;
+	    refreshInterval?: ReactElement<typeof EuiRefreshInterval>;
+	    customQuickSelectPanels?: ReactNode;
+	};
 	export interface EuiQuickSelectPopoverProps {
 	    applyRefreshInterval?: ApplyRefreshInterval;
 	    applyTime: ApplyTime;
 	    commonlyUsedRanges: DurationRange[];
 	    customQuickSelectPanels?: QuickSelectPanel[];
+	    customQuickSelectRender?: (options: CustomQuickSelectRenderOptions) => ReactNode;
 	    dateFormat: string;
 	    end: string;
 	    isDisabled: boolean;
@@ -13967,20 +14024,10 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_
 	    start: string;
 	    timeOptions: TimeOptions;
 	}
-	interface EuiQuickSelectPopoverState {
-	    isOpen: boolean;
+	export const EuiQuickSelectPopover: FunctionComponent<EuiQuickSelectPopoverProps>;
+	export const EuiQuickSelectPanels: FunctionComponent<Omit<EuiQuickSelectPopoverProps, 'isDisabled'> & {
 	    prevQuickSelect?: QuickSelect;
-	}
-	export class EuiQuickSelectPopover extends Component<EuiQuickSelectPopoverProps, EuiQuickSelectPopoverState> {
-	    state: EuiQuickSelectPopoverState;
-	    closePopover: () => void;
-	    togglePopover: () => void;
-	    applyTime: ApplyTime;
-	    renderDateTimeSections: () => JSX.Element;
-	    renderCustomQuickSelectPanels: () => JSX.Element[] | null;
-	    render(): JSX.Element;
-	}
-	export {};
+	}>;
 
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover' {
@@ -14182,13 +14229,14 @@ declare module '@elastic/eui/src/components/date_picker/auto_refresh/auto_refres
 
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_date_picker' {
-	import { Component, FocusEventHandler, FunctionComponent } from 'react';
+	import { Component, FocusEventHandler, FunctionComponent, ReactNode } from 'react';
 	import { LocaleSpecifier } from 'moment';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { ShortDate, Milliseconds, DurationRange, ApplyTime, ApplyRefreshInterval, QuickSelectPanel } from '@elastic/eui/src/components/date_picker/types';
 	import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
 	import { AsyncInterval } from '@elastic/eui/src/components/date_picker/super_date_picker/async_interval';
 	import { EuiSuperUpdateButtonProps } from '@elastic/eui/src/components/date_picker/super_date_picker/super_update_button';
+	import { CustomQuickSelectRenderOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover';
 	import { EuiDatePopoverContentProps } from '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content';
 	export interface OnTimeChangeProps extends DurationRange {
 	    isInvalid: boolean;
@@ -14200,6 +14248,12 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
 	export type EuiSuperDatePickerProps = CommonProps & {
 	    commonlyUsedRanges?: DurationRange[];
 	    customQuickSelectPanels?: QuickSelectPanel[];
+	    /**
+	     * An optional render prop function that allows customizing the display of the Quick Select menu.
+	     * This function passes all default quick select panels within an object, allowing you to
+	     * re-order panels, omit certain panels entirely, or pass in your own fully custom content.
+	     */
+	    customQuickSelectRender?: (options: CustomQuickSelectRenderOptions) => ReactNode;
 	    /**
 	     * Specifies the formatted used when displaying dates and/or datetimes
 	     */
@@ -15331,7 +15385,7 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_types' {
 	import { ComponentType, ReactNode } from 'react';
 	import { VFile } from 'vfile';
 	import { Node as UnistNode, Position as UnistPosition } from 'unist';
-	import { Parser } from 'remark-parse';
+	import { Parser } from 'remark-parse-no-trim';
 	import { VFileMessage } from 'vfile-message';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	export interface RemarkParser {
@@ -17946,9 +18000,10 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	     */
 	    searchValue: string;
 	    /**
-	     * Returns the array of options with altered checked state
+	     * Returns the array of options with altered checked state, the click/keyboard event,
+	     * and the option that triggered the click/keyboard event
 	     */
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent, clickedOption: EuiSelectableOption<T>) => void;
 	    /**
 	     * Custom render for the label portion of the option;
 	     * Takes (option, searchValue), returns ReactNode
@@ -18037,9 +18092,10 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    options: Array<EuiSelectableOption<T>>;
 	    /**
 	     * Passes back the altered `options` array with selected options having `checked: 'on'`.
-	     * Also passes back the React click/keyboard event as a second argument.
+	     * Also passes back the React click/keyboard event as a second argument,
+	     * and the option that triggered the onChange event as a third argument.
 	     */
-	    onChange?: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
+	    onChange?: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent, changedOption: EuiSelectableOption<T>) => void;
 	    /**
 	     * Passes back the current active option whenever the user changes the currently
 	     * highlighted option via keyboard navigation or searching.
@@ -18133,7 +18189,7 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    incrementActiveOptionIndex: (amount: number) => void;
 	    onSearchChange: (searchValue: string, visibleOptions: Array<EuiSelectableOption<T>>) => void;
 	    onContainerBlur: (e: React.FocusEvent) => void;
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent, clickedOption: EuiSelectableOption<T>) => void;
 	    scrollToItem: (index: number, align?: Align | undefined) => void;
 	    makeOptionId: (index?: number | undefined) => string;
 	    render(): JSX.Element;
@@ -25815,6 +25871,7 @@ declare module '@elastic/eui' {
 "euiPrettyInterval.daysShorthand": any;
 "euiPrettyInterval.off": any;
 "euiCommonlyUsedTimeRanges.legend": any;
+"euiQuickSelectPopover.buttonLabel": any;
 "euiQuickSelect.legendText": any;
 "euiQuickSelect.quickSelectTitle": any;
 "euiQuickSelect.previousLabel": any;