@elastic/eui
Version:
Elastic UI Component Library
1,274 lines (1,234 loc) • 1.12 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/accessible_click_keys' {
export const accessibleClickKeys: {
Enter: string;
" ": string;
};
}
declare module '@elastic/eui/src/services/accessibility/cascading_menu_keys' {
export const cascadingMenuKeys: {
ARROW_DOWN: string;
ARROW_LEFT: string;
ARROW_RIGHT: string;
ARROW_UP: string;
ESCAPE: string;
TAB: string;
};
}
declare module '@elastic/eui/src/services/accessibility/combo_box_keys' {
export const comboBoxKeys: {
ARROW_DOWN: string;
ARROW_UP: string;
ENTER: string;
ESCAPE: string;
TAB: string;
};
}
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 { accessibleClickKeys } from '@elastic/eui/src/services/accessibility/accessible_click_keys';
export { cascadingMenuKeys } from '@elastic/eui/src/services/accessibility/cascading_menu_keys';
export { comboBoxKeys } from '@elastic/eui/src/services/accessibility/combo_box_keys';
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, SFC } 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, 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 SFC<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 EuiThemeFontSizeMeasurements: readonly ["rem", "px", "em"];
export type _EuiThemeFontSizeMeasurement = (typeof EuiThemeFontSizeMeasurements)[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;
/**
* 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';
/**
* NOTE: These were quick conversions of their Sass counterparts.
* The commented out keys have not been established as necessary yet.
*/
export interface _EuiThemeFocusOutline {
/**
* A single CSS property: value
*/
[key: string]: ColorModeSwitch;
}
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'];
}
}
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 { 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;
};
}
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} coloMode - `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 euiPaletteComplimentary: (steps: number) => EuiPalette;
export const euiPaletteNegative: (steps: number) => EuiPalette;
export const euiPalettePositive: (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/components/color_picker/utils' {
import chroma, { ColorSpaces } from 'chroma-js';
import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops';
export const getEventPosition: (location: {
x: number;
y: number;
}, container: HTMLElement) => {
left: number;
top: number;
width: number;
height: number;
};
export const HEX_FALLBACK = "";
export const HSV_FALLBACK: ColorSpaces['hsv'];
export const RGB_FALLBACK: ColorSpaces['rgba'];
export const RGB_JOIN = ", ";
export const parseColor: (input?: string | null | undefined) => string | number[] | null;
export const chromaValid: (color: string | number[]) => boolean;
export const getChromaColor: (input?: string | null | undefined, allowOpacity?: boolean) => chroma.Color | null;
export const getLinearGradient: (palette: string[] | ColorStop[]) => string;
export const getFixedLinearGradient: (palette: string[] | ColorStop[]) => {
color: string;
width: string;
}[];
}
declare module '@elastic/eui/src/components/form/range/utils' {
export const EUI_THUMB_SIZE = 16;
export const calculateThumbPosition: (value: number, min: number, max: number, width: number, thumbSize?: number) => number;
}
declare module '@elastic/eui/src/components/color_picker/color_stops/utils' {
import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb';
export const removeStop: (colorStops: ColorStop[], index: number) => ColorStop[];
export const addDefinedStop: (colorStops: ColorStop[], stop: ColorStop['stop'], color?: ColorStop['color']) => ColorStop[];
export const addStop: (colorStops: ColorStop[], color: string | undefined, max: number) => ColorStop[];
export const isColorInvalid: (color: string, showAlpha?: boolean) => boolean;
export const isStopInvalid: (stop: ColorStop['stop']) => boolean;
export const isInvalid: (colorStops: ColorStop[], showAlpha?: boolean) => boolean;
export const calculateScale: (trackWidth: number) => number;
export const getStopFromMouseLocation: (location: {
x: number;
y: number;
}, ref: HTMLDivElement, min: number, max: number) => number;
export const getPositionFromStop: (stop: ColorStop['stop'], ref: HTMLDivElement, min: number, max: number) => number;
}
declare module '@elastic/eui/src/global_styling/mixins/_color' {
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';
}
export const euiBackgroundColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
export const useEuiBackgroundColor: (color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
export const useEuiBackgroundColorCSS: () => {
transparent: import("@emotion/utils").SerializedStyles;
plain: import("@emotion/utils").SerializedStyles;
subdued: import("@emotion/utils").SerializedStyles;
accent: import("@emotion/utils").SerializedStyles;
primary: import("@emotion/utils").SerializedStyles;
success: import("@emotion/utils").SerializedStyles;
warning: import("@emotion/utils").SerializedStyles;
danger: import("@emotion/utils").SerializedStyles;
};
}
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" | "top" | "bottom" | "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": string;
"border-top-right-radius": string;
"border-bottom-left-radius": string;
"border-bottom-right-radius": string;
_shorthands: string[];
};
export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "bottom" | "horizontal" | "vertical" | "max-height" | "max-width" | "min-height" | "min-width" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "overflow-x" | "overflow-y" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius")[];
export type LogicalProperties = (typeof LOGICAL_PROPERTIES)[number];
/**
*
* @param property A string that is a valid CSS logical property
* @param value String to output as the property value
* @returns `string` Returns the logical CSS property version for the given `property: value` pair
*/
export const logicalCSS: (property: LogicalProperties, value?: any) => string;
/**
* Some logical properties are not yet fully supported by all browsers.
* For those cases, we should use the old property as a fallback for
* browsers missing support, while allowing supporting browsers to use
* the logical properties.
*
* Examples:
* https://caniuse.com/?search=overflow-block
* https://caniuse.com/mdn-css_properties_float_flow_relative_values
*/
export const logicalCSSWithFallback: (property: LogicalProperties, value?: any) => string;
/**
*
* @param property A string that is a valid CSS logical property
* @param value String to output as the property value
* @returns `object` Returns the logical CSS property version for the given `property: value` pair
*/
export const logicalStyle: (property: LogicalProperties, value?: any) => {
[x: string]: any;
};
/**
* Given a style object with any amount of unknown CSS properties,
* find ones that can be converted to logical properties and convert them
*
* @param styleObject - A React object of camelCased styles
* @returns `object`
*/
export const logicalStyles: (styleObject: CSSProperties) => Record<string, string | number | undefined>;
/**
*
* @param width A string value for the LTR width
* @param height A string value for the LTR height
* @returns `string` Returns the logical CSS properties for height and width
*/
export const logicalSizeCSS: (width: any, height?: any) => string;
/**
*
* @param width A string value for the LTR width
* @param height A string value for the LTR height
* @returns `object` Returns the logical CSS properties for height and width
*/
export const logicalSizeStyle: (width: any, height: any) => {
[x: string]: any;
};
export const logicalText: {
'text-align': {
left: string;
center: string;
right: string;
};
};
export const LOGICAL_TEXT_ALIGNMENT: ("left" | "right" | "center")[];
export type LogicalText = (typeof LOGICAL_TEXT_ALIGNMENT)[number];
/**
*
* @param property A string that is a valid CSS logical property
* @param value String to output as the property value
* @returns `string` Returns the logical CSS property version for the given `property: value` pair
*/
export const logicalTextAlignCSS: (value: LogicalText) => string;
/**
*
* @param property A string that is a valid CSS logical property
* @param value String to output as the property value
* @returns `object` Returns the logical CSS property version for the given `property: value` pair
*/
export const logicalTextAlignStyle: (value: LogicalText) => {
textAlign: string;
};
}
declare module '@elastic/eui/src/global_styling/functions/logical_shorthands' {
export const LOGICAL_SHORTHANDS: string[];
export type LogicalShorthands = (typeof LOGICAL_SHORTHANDS)[number];
/**
* Unfortunately, shorthand properties that describe boxes
* (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box)
* do not currently automatically respond to logical changes in display direction
* (@see https://github.com/w3c/csswg-drafts/issues/1282)
*
* This utility is essentially a stop-gap for those shorthand properties,
* converting them to corresponding longer logical `-inline` and `-block` properties
*
* 🗑 NOTE: This file is in a separate util file from logicals.ts due to its relatively
* convoluted logic, & to make deleting it easier when an official CSS spec is implemented.
*/
export const logicalShorthandCSS: (property: LogicalShorthands, value: string | number) => string;
/**
* Logical border radius is unfortunately a very special case as it handles corners
* and not sides (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#corners_of_a_box)
* and does not have `-inline` or `-block` shorthands.
*
* It also needs to account for `/` syntax (horizontal vs vertical radii)
* @see https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
*/
export const logicalBorderRadiusCSS: (value: string, ignoreZeroes?: boolean) => string;
}
declare module '@elastic/eui/src/global_styling/functions/math' {
type ValueTypes = string | number | undefined;
export const mathWithUnits: (values: ValueTypes | ValueTypes[], callback: (...args: number[]) => number, unit?: string) => string;
export {};
}
declare module '@elastic/eui/src/global_styling/functions/size' {
/**
* Calculates the `px` value based on a scale multiplier
* @param scale - The font scale multiplier
* *
* @param themeOrBase - Theme base value
* *
* @returns string - Rem unit aligned to baseline
*/
export const sizeToPixel: (scale?: number) => (themeOrBase: number | {
[key: string]: any;
base: number;
}) => string;
}
declare module '@elastic/eui/src/services/theme/warning' {
type LEVELS = 'log' | 'warn' | 'error';
export const setEuiDevProviderWarning: (level: LEVELS | undefined) => LEVELS | undefined;
export const getEuiDevProviderWarning: () => LEVELS | undefined;
export const emitEuiProviderWarning: (providerMessage: string) => void;
export {};
}
declare module '@elastic/eui/src/services/theme/hooks' {
import React from 'react';
import { EuiThemeColorModeStandard, EuiThemeModifications, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
/**
* Hook for function components
*/
export interface UseEuiTheme<T extends {} = {}> {
euiTheme: EuiThemeComputed<T>;
colorMode: EuiThemeColorModeStandard;
modifications: EuiThemeModifications<T>;
}
export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
/**
* HOC for class components
*/
export interface WithEuiThemeProps<P extends {} = {}> {
theme: UseEuiTheme<P>;
}
export const withEuiTheme: <T extends