@elastic/eui
Version:
Elastic UI Component Library
1,248 lines (1,201 loc) • 1.35 MB
TypeScript
declare module '@elastic/eui/src/services/keys' {
export const ENTER = "Enter";
export const SPACE = " ";
export const ESCAPE = "Escape";
export const TAB = "Tab";
export const BACKSPACE = "Backspace";
export const F2 = "F2";
export const ALT = "Alt";
export const SHIFT = "Shift";
export const CTRL = "Control";
export const META = "Meta";
export const ARROW_DOWN = "ArrowDown";
export const ARROW_UP = "ArrowUp";
export const ARROW_LEFT = "ArrowLeft";
export const ARROW_RIGHT = "ArrowRight";
export const PAGE_UP = "PageUp";
export const PAGE_DOWN = "PageDown";
export const END = "End";
export const HOME = "Home";
export enum keys {
ENTER = "Enter",
SPACE = " ",
ESCAPE = "Escape",
TAB = "Tab",
BACKSPACE = "Backspace",
F2 = "F2",
ALT = "Alt",
SHIFT = "Shift",
CTRL = "Control",
META = "Meta",
ARROW_DOWN = "ArrowDown",
ARROW_UP = "ArrowUp",
ARROW_LEFT = "ArrowLeft",
ARROW_RIGHT = "ArrowRight",
PAGE_UP = "PageUp",
PAGE_DOWN = "PageDown",
END = "End",
HOME = "Home"
}
}
declare module '@elastic/eui/src/services/accessibility/html_id_generator' {
/**
* This function returns a function to generate ids.
* This can be used to generate unique, but predictable ids to pair labels
* with their inputs. It takes an optional prefix as a parameter. If you don't
* specify it, it generates a random id prefix. If you specify a custom prefix
* it should begin with an letter to be HTML4 compliant.
*/
export function htmlIdGenerator(idPrefix?: string): (idSuffix?: string) => string;
/**
* Generates a memoized ID that remains static until component unmount.
* This prevents IDs from being re-randomized on every component update.
*/
export type UseGeneratedHtmlIdOptions = {
/**
* Optional prefix to prepend to the generated ID
*/
prefix?: string;
/**
* Optional suffix to append to the generated ID
*/
suffix?: string;
/**
* Optional conditional ID to use instead of a randomly generated ID.
* Typically used by EUI components where IDs can be passed in as custom props
*/
conditionalId?: string;
};
export const useGeneratedHtmlId: ({ prefix, suffix, conditionalId, }?: UseGeneratedHtmlIdOptions) => string;
}
declare module '@elastic/eui/src/services/accessibility' {
export { htmlIdGenerator, useGeneratedHtmlId } from '@elastic/eui/src/services/accessibility/html_id_generator';
}
declare module '@elastic/eui/src/services/alignment' {
export const LEFT_ALIGNMENT = "left";
export const RIGHT_ALIGNMENT = "right";
export const CENTER_ALIGNMENT = "center";
export type HorizontalAlignment = 'left' | 'right' | 'center';
}
declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
export const EuiThemeBreakpoints: readonly ["xs", "s", "m", "l", "xl"];
export type _EuiThemeBreakpoint = string;
export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number> & {
/** - Default value: 0 */
xs: number;
/** - Default value: 575 */
s: number;
/** - Default value: 768 */
m: number;
/** - Default value: 992 */
l: number;
/** - Default value: 1200 */
xl: number;
};
}
declare module '@elastic/eui/src/components/common' {
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, Component, FunctionComponent, JSXElementConstructor, MouseEventHandler } from 'react';
import { Interpolation, Theme } from '@emotion/react';
export interface CommonProps {
className?: string;
'aria-label'?: string;
'data-test-subj'?: string;
css?: Interpolation<Theme>;
}
export type NoArgCallback<T> = () => T;
export const assertNever: (x: never) => never;
/**
* XOR for some properties applied to a type
* (XOR is one of these but not both or neither)
*
* Usage: OneOf<typeToExtend, one | but | not | multiple | of | these | are | required>
*
* To require aria-label or aria-labelledby but not both
* Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
*/
export type OneOf<T, K extends keyof T> = Omit<T, K> & {
[k in K]: Pick<Required<T>, k> & {
[k1 in Exclude<K, k>]?: never;
};
}[K];
/**
* Wraps Object.keys with proper typescript definition of the resulting array
*/
export function keysOf<T extends object, K extends keyof T>(obj: T): K[];
/**
* Like `keyof typeof`, but for getting values instead of keys
* ValueOf<typeof {key1: 'value1', key2: 'value2'}>
* Results in `'value1' | 'value2'`
*/
export type ValueOf<T> = T[keyof T];
export type PropsOf<C> = C extends FunctionComponent<infer SFCProps> ? SFCProps : C extends FunctionComponent<infer FunctionProps> ? FunctionProps : C extends Component<infer ComponentProps> ? ComponentProps : never;
export type PropsOfElement<C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, ComponentProps<C>>; type ExtractDefaultProps<T> = T extends {
defaultProps: infer D;
} ? D : never; type ExtractProps<C extends new (...args: any) => any, IT = InstanceType<C>> = IT extends Component<infer P> ? P : never;
/**
* Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
* we can't directly export the props definition as the defaulted values are not made optional,
* because it isn't processed by LibraryManagedAttributes. To get around this, we:
* - remove the props which have default values applied
* - export (Props - Defaults) & Partial<Defaults>
*/
export type ApplyClassComponentDefaults<C extends new (...args: any) => any, D = ExtractDefaultProps<C>, P = ExtractProps<C>> = Omit<P, keyof D> & {
[K in keyof D]?: K extends keyof P ? P[K] : never;
}; type UnionKeys<T> = T extends any ? keyof T : never;
export type DistributivePick<T, K extends UnionKeys<T>> = T extends any ? Pick<T, Extract<keyof T, K>> : never;
export type DistributiveOmit<T, K extends UnionKeys<T>> = T extends any ? Omit<T, Extract<keyof T, K>> : never; type RecursiveDistributiveOmit<T, K extends PropertyKey> = T extends any ? T extends object ? RecursiveOmit<T, K> : T : never;
export type RecursiveOmit<T, K extends PropertyKey> = Omit<{
[P in keyof T]: RecursiveDistributiveOmit<T[P], K>;
}, K>;
/**
* Returns member keys in U not present in T set to never
* T = { 'one', 'two', 'three' }
* U = { 'three', 'four', 'five' }
* returns { 'four': never, 'five': never }
*/
export type DisambiguateSet<T, U> = {
[P in Exclude<keyof T, keyof U>]?: never;
};
/**
* Allow either T or U, preventing any additional keys of the other type from being present
*/
export type ExclusiveUnion<T, U> = T | U extends object ? (DisambiguateSet<T, U> & U) | (DisambiguateSet<U, T> & T) : T | U;
/**
* For components that conditionally render <button> or <a>
* Convenience types for extending base props (T) and
* element-specific props (P) with standard clickable properties
*
* These will likely be used together, along with `ExclusiveUnion`:
*
* type AnchorLike = PropsForAnchor<BaseProps>
* type ButtonLike = PropsForButton<BaseProps>
* type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
* const Component: FunctionComponent<ComponentProps> ...
*/
export type PropsForAnchor<T, P = {}> = T & {
href?: string;
onClick?: MouseEventHandler<HTMLAnchorElement>;
} & AnchorHTMLAttributes<HTMLAnchorElement> & P;
export type PropsForButton<T, P = {}> = T & {
onClick?: MouseEventHandler<HTMLButtonElement>;
} & ButtonHTMLAttributes<HTMLButtonElement> & P;
/**
* Replaces all properties on any type as optional, includes nested types
*
* @example
* ```ts
* interface Person {
* name: string;
* age?: number;
* spouse: Person;
* children: Person[];
* }
* type PartialPerson = RecursivePartial<Person>;
* // results in
* interface PartialPerson {
* name?: string;
* age?: number;
* spouse?: RecursivePartial<Person>;
* children?: RecursivePartial<Person>[]
* }
* ```
*/
export type RecursivePartial<T> = {
[P in keyof T]?: T[P] extends NonAny[] ? T[P] : T[P] extends readonly NonAny[] ? T[P] : T[P] extends Array<infer U> ? Array<RecursivePartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<RecursivePartial<U>> : T[P] extends Set<infer V> ? Set<RecursivePartial<V>> : T[P] extends Map<infer K, infer V> ? Map<K, RecursivePartial<V>> : T[P] extends NonAny ? T[P] : RecursivePartial<T[P]>;
}; type NonAny = number | boolean | string | symbol | null;
export {};
}
declare module '@elastic/eui/src/global_styling/variables/animations' {
import { CSSProperties } from 'react';
/**
* A constant storing the `prefers-reduced-motion` media query
* so that when it is turned off, animations are not run.
*/
export const euiCanAnimate = "@media screen and (prefers-reduced-motion: no-preference)";
/**
* A constant storing the `prefers-reduced-motion` media query that will
* only apply the content if the setting is off (reduce).
*/
export const euiCantAnimate = "@media screen and (prefers-reduced-motion: reduce)";
/**
* Speeds / Durations / Delays
*/
export const EuiThemeAnimationSpeeds: readonly ["extraFast", "fast", "normal", "slow", "extraSlow"];
export type _EuiThemeAnimationSpeed = (typeof EuiThemeAnimationSpeeds)[number];
export type _EuiThemeAnimationSpeeds = {
/** - Default value: 90ms */
extraFast: CSSProperties['animationDuration'];
/** - Default value: 150ms */
fast: CSSProperties['animationDuration'];
/** - Default value: 250ms */
normal: CSSProperties['animationDuration'];
/** - Default value: 350ms */
slow: CSSProperties['animationDuration'];
/** - Default value: 500ms */
extraSlow: CSSProperties['animationDuration'];
};
/**
* Easings / Timing functions
*/
export const EuiThemeAnimationEasings: readonly ["bounce", "resistance"];
export type _EuiThemeAnimationEasing = (typeof EuiThemeAnimationEasings)[number];
export type _EuiThemeAnimationEasings = Record<_EuiThemeAnimationEasing, CSSProperties['animationTimingFunction']>;
export type _EuiThemeAnimation = _EuiThemeAnimationEasings & _EuiThemeAnimationSpeeds;
}
declare module '@elastic/eui/src/global_styling/variables/borders' {
import { CSSProperties } from 'react';
import { ColorModeSwitch } from '@elastic/eui/src/services/theme/types';
export interface _EuiThemeBorderWidthValues {
/**
* Thinnest width for border
* - Default value: 1px
*/
thin: CSSProperties['borderWidth'];
/**
* Thickest width for border
* - Default value: 2px
*/
thick: CSSProperties['borderWidth'];
}
export interface _EuiThemeBorderRadiusValues {
/**
* Primary corner radius size
* - Default value: 6px
*/
medium: CSSProperties['borderRadius'];
/**
* Small corner radius size
* - Default value: 4px
*/
small: CSSProperties['borderRadius'];
}
export interface _EuiThemeBorderColorValues {
/**
* Color for all borders; Default is `colors.lightShade`
*/
color: ColorModeSwitch;
}
export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues {
/**
* Varied thicknesses for borders
*/
width: _EuiThemeBorderWidthValues;
/**
* Varied border radii
*/
radius: _EuiThemeBorderRadiusValues;
}
export interface _EuiThemeBorderTypes {
/**
* Full `border` property string computed using `border.width.thin` and `border.color`
* - Default value: 1px solid [colors.lightShade]
*/
thin: CSSProperties['border'];
/**
* Full `border` property string computed using `border.width.thick` and `border.color`
* - Default value: 2px solid [colors.lightShade]
*/
thick: CSSProperties['border'];
/**
* Full editable style `border` property string computed using `border.width.thick` and `border.color`
* - Default value: 2px dotted [colors.lightShade]
*/
editable: CSSProperties['border'];
}
export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes;
}
declare module '@elastic/eui/src/global_styling/variables/colors' {
import { ColorModeSwitch, StrictColorModeSwitch } from '@elastic/eui/src/services/theme/types';
/**
* Top 5 colors
*/
export type _EuiThemeBrandColors = {
/**
* Main brand color and used for most **call to actions** like buttons and links.
*/
primary: ColorModeSwitch;
/**
* Pulls attention to key indicators like **notifications** or number of selections.
*/
accent: ColorModeSwitch;
/**
* Used for **positive** messages/graphics and additive actions.
*/
success: ColorModeSwitch;
/**
* Used for **warnings** and actions that have a potential to be destructive.
*/
warning: ColorModeSwitch;
/**
* Used for **negative** messages/graphics like errors and destructive actions.
*/
danger: ColorModeSwitch;
};
/**
* Every brand color must have a contrast computed text equivelant
*/
export type _EuiThemeBrandTextColors = {
/**
* Typically computed against `colors.primary`
*/
primaryText: ColorModeSwitch;
/**
* Typically computed against `colors.accent`
*/
accentText: ColorModeSwitch;
/**
* Typically computed against `colors.success`
*/
successText: ColorModeSwitch;
/**
* Typically computed against `colors.warning`
*/
warningText: ColorModeSwitch;
/**
* Typically computed against `colors.danger`
*/
dangerText: ColorModeSwitch;
};
export type _EuiThemeShadeColors = {
/**
* Used as the background color of primary **page content and panels** including modals and flyouts.
*/
emptyShade: ColorModeSwitch;
/**
* Used to lightly shade areas that contain **secondary content** or contain panel-like components.
*/
lightestShade: ColorModeSwitch;
/**
* Used for most **borders** and dividers (horizontal rules).
*/
lightShade: ColorModeSwitch;
/**
* The middle gray for all themes; this is the base for `colors.subdued`.
*/
mediumShade: ColorModeSwitch;
/**
* Slightly subtle graphic color
*/
darkShade: ColorModeSwitch;
/**
* Used as the **text** color and the background color for **inverted components** like tooltips and the control bar.
*/
darkestShade: ColorModeSwitch;
/**
* The opposite of `emptyShade`
*/
fullShade: ColorModeSwitch;
};
export type _EuiThemeTextColors = {
/**
* Computed against `colors.darkestShade`
*/
text: ColorModeSwitch;
/**
* Computed against `colors.text`
*/
title: ColorModeSwitch;
/**
* Computed against `colors.mediumShade`
*/
subduedText: ColorModeSwitch;
/**
* Computed against `colors.primaryText`
*/
link: ColorModeSwitch;
};
export type _EuiThemeSpecialColors = {
/**
* The background color for the **whole window (body)** and is a computed value of `colors.lightestShade`.
* Provides denominator (background) value for **contrast calculations**.
*/
body: ColorModeSwitch;
/**
* Used to **highlight text** when matching against search strings
*/
highlight: ColorModeSwitch;
/**
* Computed against `colors.darkestShade`
*/
disabled: ColorModeSwitch;
/**
* Computed against `colors.disabled`
*/
disabledText: ColorModeSwitch;
/**
* The base color for shadows that gets `transparentized`
* at a value based on the `colorMode` and then layered.
*/
shadow: ColorModeSwitch;
};
export type _EuiThemeConstantColors = {
/**
* Purest **white**
*/
ghost: string;
/**
* Purest **black**
*/
ink: string;
};
export type _EuiThemeColorsMode = _EuiThemeBrandColors & _EuiThemeBrandTextColors & _EuiThemeShadeColors & _EuiThemeSpecialColors & _EuiThemeTextColors;
export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & _EuiThemeConstantColors;
}
declare module '@elastic/eui/src/global_styling/variables/size' {
export type _EuiThemeBase = number;
export const EuiThemeSizes: readonly ["xxs", "xs", "s", "m", "base", "l", "xl", "xxl", "xxxl", "xxxxl"];
export type _EuiThemeSize = (typeof EuiThemeSizes)[number];
export type _EuiThemeSizes = {
/** - Default value: 2px */
xxs: string;
/** - Default value: 4px */
xs: string;
/** - Default value: 8px */
s: string;
/** - Default value: 12px */
m: string;
/** - Default value: 16px */
base: string;
/** - Default value: 24px */
l: string;
/** - Default value: 32px */
xl: string;
/** - Default value: 40px */
xxl: string;
/** - Default value: 48px */
xxxl: string;
/** - Default value: 64px */
xxxxl: string;
};
}
declare module '@elastic/eui/src/global_styling/variables/typography' {
import { CSSProperties } from 'react';
/**
* Font units of measure
*/
export const EuiThemeFontUnits: readonly ["rem", "px", "em"];
export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number];
export const EuiThemeFontScales: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
export type _EuiThemeFontScale = (typeof EuiThemeFontScales)[number];
export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>;
export type _EuiThemeFontBase = {
/**
* The whole font family stack for all parts of the UI.
* We encourage only customizing the first font in the stack.
*/
family: string;
/**
* The font family used for monospace UI elements like EuiCode
*/
familyCode?: string;
/**
* The font family used for serif UI elements like blockquotes within EuiText
*/
familySerif?: string;
/**
* Controls advanced features OpenType fonts.
* https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
*/
featureSettings?: string;
/**
* Sets the default units used for font size & line height set by UI components
* like EuiText or EuiTitle. Defaults to `rem`.
*
* NOTE: This may overridden by some internal usages, e.g.
* EuiText's `relative` size which must use `em`.
*
* @default 'rem'
*/
defaultUnits: _EuiThemeFontUnit;
/**
* A computed number that is 1/4 of `base`
*/
baseline: number;
/**
* Establishes the ideal line-height percentage, but it is the `baseline` integer that establishes the final pixel/rem value
*/
lineHeightMultiplier: number;
};
export const EuiThemeFontWeights: readonly ["light", "regular", "medium", "semiBold", "bold"];
export type _EuiThemeFontWeight = (typeof EuiThemeFontWeights)[number];
export type _EuiThemeFontWeights = {
/** - Default value: 300 */
light: CSSProperties['fontWeight'];
/** - Default value: 400 */
regular: CSSProperties['fontWeight'];
/** - Default value: 500 */
medium: CSSProperties['fontWeight'];
/** - Default value: 600 */
semiBold: CSSProperties['fontWeight'];
/** - Default value: 700 */
bold: CSSProperties['fontWeight'];
};
/**
* Body / Base styles
*/
export interface _EuiThemeBody {
/**
* A sizing key from one of the font scales to set as the base body font-size
*/
scale: _EuiThemeFontScale;
/**
* A font weight key for setting the base body weight
*/
weight: keyof _EuiThemeFontWeights;
}
/**
* Title styles
*/
export interface _EuiThemeTitle {
/**
* A font weight key for setting the base weight for titles and headings
*/
weight: keyof _EuiThemeFontWeights;
}
export type _EuiThemeFont = _EuiThemeFontBase & {
scale: _EuiThemeFontScales;
/**
* @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information
*/
weight: _EuiThemeFontWeights;
body: _EuiThemeBody;
title: _EuiThemeTitle;
};
}
declare module '@elastic/eui/src/global_styling/variables/states' {
import { ColorModeSwitch } from '@elastic/eui/src/services/theme/types';
import { CSSProperties } from 'react';
export interface _EuiThemeFocus {
/**
* Default color of the focus ring, some components may override this property
* - Default value: currentColor
*/
color: ColorModeSwitch;
/**
* Thickness of the outline
* - Default value: 2px
*/
width: CSSProperties['borderWidth'];
/**
* Used to transparentize the focus background color
* - Default value: { LIGHT: 0.1, DARK: 0.2 }
*/
transparency: ColorModeSwitch<number>;
/**
* Default focus background color. Not all components set a background color on focus
* - Default value: `colors.primary` computed with `focus.transparency`
*/
backgroundColor: ColorModeSwitch;
}
}
declare module '@elastic/eui/src/global_styling/variables/levels' {
import { CSSProperties } from 'react';
/**
* Z-Index
*
* Remember that z-index is relative to parent and based on the stacking context.
* z-indexes only compete against other z-indexes when they exist as children of
* that shared parent.
*
* That means a popover with a settings of 2, will still show above a modal
* with a setting of 100, if it is within that modal and not besides it.
*
* Generally that means it's a good idea to consider things added to this file
* as competitive only as siblings.
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
*/
export const EuiThemeLevels: readonly ["toast", "modal", "mask", "navigation", "menu", "header", "flyout", "maskBelowHeader", "content"];
export type _EuiThemeLevel = (typeof EuiThemeLevels)[number];
export type _EuiThemeLevels = {
/** - Default value: 9000 */
toast: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 8000 */
modal: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 6000 */
mask: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 6000 */
navigation: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 2000 */
menu: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 1000 */
header: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 1000 */
flyout: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 1000 */
maskBelowHeader: NonNullable<CSSProperties['zIndex']>;
/** - Default value: 0 */
content: NonNullable<CSSProperties['zIndex']>;
};
}
declare module '@elastic/eui/src/services/theme/types' {
import type { CSSObject } from '@emotion/react';
import { RecursivePartial, ValueOf } from '@elastic/eui/src/components/common';
import { _EuiThemeAnimation } from '@elastic/eui/src/global_styling/variables/animations';
import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
import { _EuiThemeBorder } from '@elastic/eui/src/global_styling/variables/borders';
import { _EuiThemeColors } from '@elastic/eui/src/global_styling/variables/colors';
import { _EuiThemeBase, _EuiThemeSizes } from '@elastic/eui/src/global_styling/variables/size';
import { _EuiThemeFont } from '@elastic/eui/src/global_styling/variables/typography';
import { _EuiThemeFocus } from '@elastic/eui/src/global_styling/variables/states';
import { _EuiThemeLevels } from '@elastic/eui/src/global_styling/variables/levels';
export const COLOR_MODES_STANDARD: {
readonly light: "LIGHT";
readonly dark: "DARK";
};
export const COLOR_MODES_INVERSE: "INVERSE";
export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE;
export type EuiThemeColorModeStandard = ValueOf<typeof COLOR_MODES_STANDARD>;
export type EuiThemeColorMode = 'light' | 'dark' | EuiThemeColorModeStandard | 'inverse' | EuiThemeColorModeInverse;
export type ColorModeSwitch<T = string> = {
[key in EuiThemeColorModeStandard]: T;
} | T;
export type StrictColorModeSwitch<T = string> = {
[key in EuiThemeColorModeStandard]: T;
};
export type EuiThemeShape = {
colors: _EuiThemeColors;
/** - Default value: 16 */
base: _EuiThemeBase;
/**
* @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information
*/
size: _EuiThemeSizes;
font: _EuiThemeFont;
border: _EuiThemeBorder;
focus: _EuiThemeFocus;
animation: _EuiThemeAnimation;
breakpoint: _EuiThemeBreakpoints;
levels: _EuiThemeLevels;
};
export type EuiThemeSystem<T = {}> = {
root: EuiThemeShape & T;
model: EuiThemeShape & T;
key: string;
};
export type EuiThemeModifications<T = {}> = RecursivePartial<EuiThemeShape & T>;
export type ComputedThemeShape<T, P = string | number | bigint | boolean | null | undefined> = T extends P | ColorModeSwitch<infer X> ? T extends ColorModeSwitch<X> ? X extends P ? X : {
[K in keyof (X & Exclude<T, keyof X | keyof StrictColorModeSwitch>)]: ComputedThemeShape<(X & Exclude<T, keyof X | keyof StrictColorModeSwitch>)[K], P>;
} : T : {
[K in keyof T]: ComputedThemeShape<T[K], P>;
};
export type EuiThemeComputed<T = {}> = ComputedThemeShape<EuiThemeShape & T> & {
themeName: string;
};
export type EuiThemeNested = {
isGlobalTheme: boolean;
hasDifferentColorFromGlobalTheme: boolean;
bodyColor: string;
colorClassName: string;
setGlobalCSSVariables: Function;
globalCSSVariables?: CSSObject;
setNearestThemeCSSVariables: Function;
themeCSSVariables?: CSSObject;
};
}
declare module '@elastic/eui/src/services/theme/utils' {
import { EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeShape, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
export const DEFAULT_COLOR_MODE: "LIGHT";
/**
* Returns whether the provided color mode is `inverse`
* @param {string} colorMode - `light`, `dark`, or `inverse`
*/
export const isInverseColorMode: (colorMode?: string | undefined) => colorMode is "INVERSE";
/**
* Returns the color mode configured in the current EuiThemeProvider.
* Returns the parent color mode if none is explicity set.
* @param {string} colorMode - `light`, `dark`, or `inverse`
* @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback
*/
export const getColorMode: (colorMode?: EuiThemeColorMode | undefined, parentColorMode?: EuiThemeColorModeStandard | undefined) => EuiThemeColorModeStandard;
/**
* Returns a value at a given path on an object.
* If `colorMode` is provided, will scope the value to the appropriate color mode key (LIGHT\DARK)
* @param {object} model - Object
* @param {string} _path - Dot-notated string to a path on the object
* @param {string} colorMode - `light` or `dark`
*/
export const getOn: (model: {
[key: string]: any;
}, _path: string, colorMode?: EuiThemeColorModeStandard | undefined) => {
[key: string]: any;
} | undefined;
/**
* Sets a value at a given path on an object.
* @param {object} model - Object
* @param {string} _path - Dot-notated string to a path on the object
* @param {any} string - The value to set
*/
export const setOn: (model: {
[key: string]: any;
}, _path: string, value: any) => boolean;
/**
* Creates a class to store the `computer` method and its eventual parameters.
* Allows for on-demand computation with up-to-date parameters via `getValue` method.
* @constructor
* @param {function} computer - Function to be computed
* @param {string | array} dependencies - Dependencies passed to the `computer` as parameters
*/
export class Computed<T> {
computer: (...values: any[]) => T;
dependencies: string | string[];
constructor(computer: (...values: any[]) => T, dependencies?: string | string[]);
/**
* Executes the `computer` method with the current state of the theme
* by taking into account previously computed values and modifications.
* @param {Proxy | object} base - Computed or uncomputed theme
* @param {Proxy | object} modifications - Theme value overrides
* @param {object} working - Partially computed theme
* @param {string} colorMode - `light` or `dark`
*/
getValue(base: EuiThemeSystem | EuiThemeShape, modifications: import ("@elastic/eui").RecursivePartial<EuiThemeShape> | undefined, working: EuiThemeComputed, colorMode: EuiThemeColorModeStandard): T;
}
/**
* Returns a Class (`Computed`) that stores the arbitrary computer method
* and references to its optional dependecies.
* @param {function} computer - Arbitrary method to be called at compute time.
* @param {string | array} dependencies - Values that will be provided to `computer` at compute time.
*/
export function computed<T>(computer: (value: EuiThemeComputed) => T): T;
export function computed<T>(computer: (value: any[]) => T, dependencies: string[]): T;
export function computed<T>(computer: (value: any) => T, dependencies: string): T;
/**
* Takes an uncomputed theme, and computes and returns all values taking
* into consideration value overrides and configured color mode.
* Overrides take precedence, and only values in the current color mode
* are computed and returned.
* @param {Proxy} base - Object to transform into Proxy
* @param {Proxy | object} over - Unique identifier or name
* @param {string} colorMode - `light` or `dark`
*/
export const getComputed: <T = EuiThemeShape>(base: EuiThemeSystem<T>, over: Partial<EuiThemeSystem<T>>, colorMode: EuiThemeColorModeStandard) => EuiThemeComputed<T>;
/**
* Builds a Proxy with a custom `handler` designed to self-reference values
* and prevent arbitrary value overrides.
* @param {object} model - Object to transform into Proxy
* @param {string} key - Unique identifier or name
*/
export const buildTheme: <T extends {}>(model: T, key: string) => {
model: T;
root: T;
key: string;
};
/**
* Deeply merges two objects, using `source` values whenever possible.
* @param {object} _target - Object with fallback values
* @param {object} source - Object with desired values
*/
export const mergeDeep: (_target: {
[key: string]: any;
}, source?: {
[key: string]: any;
}) => {
[key: string]: any;
};
}
declare module '@elastic/eui/src/services/color/is_color_dark' {
/**
* This function calculates if the specified color is "dark", which usually means
* you need light text if you use it as a background color to fulfill WCAG contrast
* requirement.
* The color must be specified via its red, green and blue value in the range of
* 0 to 255.
* The formula is based on this Stackoverflow answer: https://stackoverflow.com/a/3943023
* which itself is based upon the WCAG recommendation for color contrast.
*
* @param {number} red The red component in the range 0 to 255
* @param {number} green The green component in the range 0 to 255
* @param {number} blue The blue component in the range 0 to 255
* @returns {boolean} True if the color is dark, false otherwise.
*/
export function isColorDark(red: number, green: number, blue: number): boolean;
}
declare module '@elastic/eui/src/services/color/is_valid_hex' {
export function isValidHex(hex: string): boolean;
}
declare module '@elastic/eui/src/services/color/color_types' {
export type rgbDef = [number, number, number];
export interface HSV {
h: number;
s: number;
v: number;
}
export interface RGB {
r: number;
g: number;
b: number;
}
export type HEX = string;
}
declare module '@elastic/eui/src/services/color/hex_to_rgb' {
import { rgbDef } from '@elastic/eui/src/services/color/color_types';
export function hexToRgb(hex: string): rgbDef;
}
declare module '@elastic/eui/src/services/color/rgb_to_hsv' {
import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
export function rgbToHsv({ r, g, b }: RGB): HSV;
}
declare module '@elastic/eui/src/services/color/hex_to_hsv' {
import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
export function hexToHsv(hex: HEX): HSV;
}
declare module '@elastic/eui/src/services/color/hsv_to_rgb' {
import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
export function hsvToRgb({ h, s, v }: HSV): RGB;
}
declare module '@elastic/eui/src/services/color/rgb_to_hex' {
export function rgbToHex(rgb: string): string;
}
declare module '@elastic/eui/src/services/color/hsv_to_hex' {
import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
export function hsvToHex({ h, s, v }: HSV): HEX;
}
declare module '@elastic/eui/src/services/color/luminance_and_contrast' {
import { rgbDef } from '@elastic/eui/src/services/color/color_types';
export function calculateLuminance(r: number, g: number, b: number): number;
export function calculateContrast(rgb1: rgbDef, rgb2: rgbDef): number;
}
declare module '@elastic/eui/src/services/color/color_palette' {
export const MID_COLOR_STOP = "#EBEFF5";
/**
* This function takes an array of colors and returns an array of interpolated
* colors based on the number of steps/len needed for use in UI elements such as charts.
* Derived from https://github.com/gka/palettes (Unlicensed)
*/
export function colorPalette(
/**
* The main color code or array of codes
*/
colors: string[],
/**
* The number of colors in the resulting array (default 10)
*/
len?: number,
/**
* Forces color interpolation to be calculated separately for each half (default false)
*/
diverging?: boolean,
/**
* Uses a more static interpolation for non-continuous spectrums
*/
categorical?: boolean): string[];
}
declare module '@elastic/eui/src/services/color/eui_palettes' {
export type EuiPalette = string[];
export interface EuiPaletteColorBlindProps {
/**
* How many variations of the series is needed
*/
rotations?: number;
/**
* Order similar colors as `group`s or just `append` each variation
*/
order?: 'append' | 'group';
/**
* Specifies if the direction of the color variations
*/
direction?: 'lighter' | 'darker' | 'both';
/**
* Use the default sort order, or re-sort them based on the color wheel (natural)
*/
sortBy?: 'default' | 'natural';
/**
* Shift the sorting order by a certain number when used in conjunction with `'natural'` `sortBy`.
* Defaults to a number close to green.
*/
sortShift?: string;
}
export const euiPaletteColorBlind: ({ rotations, order, direction, sortBy, sortShift, }?: EuiPaletteColorBlindProps) => EuiPalette;
/**
* Color blind palette with text is meant for use when text is applied on top of the color.
* It increases the brightness of the color to give the text more contrast.
*/
export const euiPaletteColorBlindBehindText: (paletteProps?: EuiPaletteColorBlindProps) => string[];
export const euiPaletteForLightBackground: () => EuiPalette;
export const euiPaletteForDarkBackground: () => EuiPalette;
export const euiPaletteForStatus: (steps: number) => EuiPalette;
export const euiPaletteForTemperature: (steps: number) => EuiPalette;
export const euiPaletteComplementary: (steps: number) => EuiPalette;
export const euiPaletteRed: (steps: number) => EuiPalette;
export const euiPaletteGreen: (steps: number) => EuiPalette;
export const euiPaletteCool: (steps: number) => EuiPalette;
export const euiPaletteWarm: (steps: number) => EuiPalette;
export const euiPaletteGray: (steps: number) => EuiPalette;
}
declare module '@elastic/eui/src/services/color/visualization_colors' {
export const VISUALIZATION_COLORS: import ("@elastic/eui/src/services/color/eui_palettes").EuiPalette;
export const DEFAULT_VISUALIZATION_COLOR: string;
}
declare module '@elastic/eui/src/global_styling/mixins/_color' {
import { SerializedStyles } from '@emotion/react';
import { UseEuiTheme } from '@elastic/eui/src/services';
export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
export type _EuiBackgroundColor = (typeof BACKGROUND_COLORS)[number];
export interface _EuiBackgroundColorOptions {
/**
* Use `opaque` for containers of unknown content.
* Use `transparent` for interactive states like hover and focus.
*/
method?: 'opaque' | 'transparent';
}
/**
* @returns A single background color with optional alpha transparency
*/
export const euiBackgroundColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
export const useEuiBackgroundColor: (color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
export const useEuiBackgroundColorCSS: () => Record<"transparent" | "plain" | "subdued" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
/**
* Border colors
*/
export const euiBorderColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor) => string;
export const useEuiBorderColorCSS: () => Record<"transparent" | "plain" | "subdued" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
}
declare module '@elastic/eui/src/services/emotion/clone_element' {
import React from 'react';
/**
* React.cloneElement does not work if the cloned element does not already have the
* `css` prop - as a result, we need to use `jsx()` to manually clone the element
* See https://github.com/emotion-js/emotion/issues/1404
*/
export const cloneElementWithCss: (element: any, props: any, cssOrder?: 'before' | 'after') => React.ReactElement;
}
declare module '@elastic/eui/src/services/emotion/prefixer' {
import { type Element } from 'stylis';
/**
* This is a stylis plugin which handles auto-prefixing CSS output by Emotion.
*
* *Please note*: EUI/Elastic targets latest evergreen browsers for support only.
* @see https://www.elastic.co/support/matrix#matrix_browsers
*/
export const euiStylisPrefixer: (element: Element) => void;
}
declare module '@elastic/eui/src/services/emotion' {
export * from '@elastic/eui/src/services/emotion/clone_element';
export * from '@elastic/eui/src/services/emotion/prefixer';
}
declare module '@elastic/eui/src/services/emotion/css' {
/**
* This custom instance is needed for internal EUI components to call
* `@emotion/css` with EUI's custom prefixer plugin
* @see https://emotion.sh/docs/@emotion/css#custom-instances
*
* NOTE: Usage is currently being beta tested internally,
* and is not yet intended to be a public export
*/
export const css: {
(template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): string;
(...args: import("@emotion/serialize").CSSInterpolation[]): string;
}, cx: (...classNames: import("@emotion/css/create-instance").ClassNamesArg[]) => string, cache: import("@emotion/utils").EmotionCache;
}
declare module '@elastic/eui/src/services/theme/emotion' {
import { FunctionComponent, PropsWithChildren } from 'react';
/**
* @see https://emotion.sh/docs/theming
* This Emotion theme provider is added for *consumer usage* & convenience only.
*
* EUI should stick to using our own context/`useEuiTheme` internally
* instead of Emotion's shorthand `css={theme => {}}` API. If consumers
* set their own theme via <ThemeProvider>; EUI's styles should continue
* working as-is.
*/
export const EuiEmotionThemeProvider: FunctionComponent<PropsWithChildren<{}>>;
}
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'; type Refs<T> = Array<Ref<T> | MutableRefObject<T | undefined> | undefined>;
export const useCombinedRefs: <T>(refs: Refs<T>) => (node: T) => void;
/**
* Non-hook util for setting multiple refs/ref types.
* Useful for non-functional components
*/
export const setMultipleRefs: <T>(refs: Refs<T>, node: T) => void;
export {};
}
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/useDeepEqual' {
/**
* This hook is mostly a performance concern for third-party objs/arrays that EUI
* has no control over and may not be correctly memoized (i.e., will create a new
* reference on every rerender unless passed through this hook).
*/
export const useDeepEqual: <T = any[] | Record<string, any> | undefined>(object: T) => T;
}
declare module '@elastic/eui/src/services/throttle' {
export const throttle: (fn: (...args: any[]) => void, wait?: number) => (...args: any[]) => void;
}
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/useDeepEqual';
export * from '@elastic/eui/src/services/hooks/useMouseMove';
export * from '@elastic/eui/src/services/hooks/useUpdateEffect';
}
declare module '@elastic/eui/src/services/theme/warning' {
type LEVELS = 'log' | 'warn' | 'error'; type ProviderCallback = (message: string | Error) => void; let providerWarning: LEVELS | ProviderCallback | undefined;
export const setEuiDevProviderWarning: (warningType: typeof providerWarning) => LEVELS | ProviderCallback | undefined;
export const getEuiDevProviderWarning: () => LEVELS | ProviderCallback | undefined;
export const emitEuiProviderWarning: (providerMessage: string) => void;
export {};
}
declare module '@elastic/eui/src/services/theme/style_memoization' {
import React, { FunctionComponent, PropsWithChildren } from 'react';
import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks'; type StylesMap = Record<string, any>; type MemoizedStylesMap = WeakMap<Function, StylesMap>;
export const EuiThemeMemoizedStylesContext: React.Context<MemoizedStylesMap>;
export const EuiThemeMemoizedStylesProvider: FunctionComponent<PropsWithChildren>;
/**
* Hook that memoizes the returned values of components style fns/generators
* per-theme
*/
export const useEuiMemoizedStyles: <T extends (theme: UseEuiTheme) => StylesMap>(stylesGenerator: T) => ReturnType<T>;
/**
* HOC for class components
* Syntax is mostly copied from withEuiTheme HOC
*/
export interface WithEuiStylesMemoizerProps {
stylesMemoizer: typeof useEuiMemoizedStyles;
}
export const withEuiStylesMemoizer: <T extends {} = {}>(Component: React.ComponentType<T & WithEuiStylesMemoizerProps>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "stylesMemoizer">> & React.RefAttributes<Omit<T, "stylesMemoizer">>>;
/**
* Render prop alternative for complex class components
* Most useful for scenarios where a HOC may interfere with typing
*/
export const RenderWithEuiStylesMemoizer: ({ children, }: {
children: (stylesMemoizer: typeof useEuiMemoizedStyles) => React.ReactElement;
}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export {};
}
declare module '@elastic/eui/src/services/theme/provider' {
import React, { PropsWithChildren, HTMLAttributes } from 'react';
import type { CommonProps } from '@elastic/eui/src/components/common';
import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types';
export interface EuiThemeProviderProps<T> extends PropsWithChildren {
theme?: EuiThemeSystem<T>;
colorMode?: EuiThemeColorMode;
modify?: EuiThemeModifications<T>;
children: any;
/**
* Nested theme providers will receive a wrapping `span` tag in order to correctly
* set the default text `color` that all nested children will inherit.
*
* If an extra wrapper is not desired, pass `{ cloneElement: true }`.
* This requires a **single** child component that the correct color class can be passed to.
*
* The parent level `EuiProvider`/`EuiThemeProvider` will **not** render a wrapper element, as
* the default inherited text color will be set on the page `body`.
*/
wrapperProps?: HTMLAttributes<HTMLElement> & CommonProps & {
cloneElement?: boolean;
};
}
export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, wrapperProps, }: EuiThemeProviderProps<T>) => React.JSX.Element;
}
declare module '@elastic/eui/src/services/theme' {
export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables, } from '@elastic/eui/src/services/theme/hooks';
export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
export { EuiThemeProvider } from '@elastic/eui/src/services/theme/provider';
export { useEuiMemoizedStyles, withEuiStylesMemoizer, type WithEuiStylesMemoizerProps, RenderWithEuiStylesMemoizer, } from '@elastic/eui/src/services/theme/style_memoization';
export { getEuiDevProviderWarning, setEuiDevProviderWarning } from '@elastic/eui/src/services/theme/warning';
export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed, } from '@elastic/eui/src/services/theme/utils';
export type { ComputedThemeShape, EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeComputed, EuiThemeModifications, EuiThemeShape, EuiThemeSystem, } from '@elastic/eui/src/services/theme/types';
export { COLOR_MODES_STANDARD } from '@elastic/eui/src/services/theme/types';
}
declare module '@elastic/eui/src/global_styling/functions/logicals' {
import { CSSProperties } from 'react';
/**
* EUI utilizes logical CSS properties to enable directional writing-modes.
* To encourage use of logical properties, we provide a few helper utilities to
* convert certain directional properties to logical properties.
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
*/
export const logicalSide: {
left: string;
right: string;
top: string;
bottom: string;
horizontal: string;
vertical: string;
};
export const LOGICAL_SIDES: ("left" | "right" | "bottom" | "top" | "horizontal" | "vertical")[];
export type LogicalSides = (typeof LOGICAL_SIDES)[number];
export const logicals: {
height: string;
width: string;
"max-height": string;
"max-width": string;
"min-height": string;
"min-width": string;
top: string;
right: string;
bottom: string;
left: string;
horizontal: string;
vertical: string;
"margin-left": string;
"margin-right": string;
"margin-top": string;
"margin-bottom": string;
"margin-horizontal": string;
"margin-vertical": string;
"padding-left": string;
"padding-right": string;
"padding-top": string;
"padding-bottom": string;
"padding-horizontal": string;
"padding-vertical": string;
"overflow-x": string;
"overflow-y": string;
"border-horizontal": string;
"border-horizontal-color": string;
"border-horizontal-width": string;
"border-horizontal-style": string;
"border-vertical": string;
"border-vertical-color": string;
"border-vertical-width": string;
"border-vertical-style": string;
"border-bottom": string;
"border-bottom-color": string;
"border-bottom-style": string;
"border-bottom-width": string;
"border-top": string;
"border-top-color": string;
"border-top-style": string;
"border-top-width": string;
"border-right": string;
"border-right-color": string;
"border-right-style": string;
"border-right-width": string;
"border-left": string;
"border-left-color": string;
"border-left-style": string;
"border-left-width": string;
"border-top-left-radius": s