@elastic/eui 93.2.0 → 93.3.0

package/eui.d.ts

@@ -1520,7 +1520,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_states' {
 declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	import { CSSProperties } from 'react';
 	import { _FontScaleOptions } from '@elastic/eui/src/global_styling/functions/typography';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
 	import { _EuiThemeFontScale } from '@elastic/eui/src/global_styling/variables/typography';
 	export type EuiThemeFontSize = {
 	    fontSize: CSSProperties['fontSize'];
@@ -1544,7 +1544,6 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	 * Fixed-width numbers for tabular data
 	 */
 	export const euiNumberFormat: ({ euiTheme }: UseEuiTheme) => string;
-	export const useEuiNumberFormat: () => string;
 
 }
 declare module '@elastic/eui/src/services/breakpoint/_sorting' {
@@ -1662,7 +1661,6 @@ declare module '@elastic/eui/src/components/title/title.styles' {
 	    color: CSSProperties['color'];
 	};
 	export const euiTitle: (euiThemeContext: UseEuiTheme, scale?: EuiTitleSize, options?: _FontScaleOptions | undefined) => EuiThemeTitle;
-	export const useEuiTitle: (scale: EuiTitleSize, options?: _FontScaleOptions | undefined) => EuiThemeTitle;
 	/**
 	 * Styles
 	 */
@@ -1705,8 +1703,6 @@ declare module '@elastic/eui/src/components/title' {
 }
 declare module '@elastic/eui/src/components/link/link.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiLinkHoverCSS: () => string;
-	export const euiLinkFocusCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
 	export const euiLinkCSS: (euiThemeContext: UseEuiTheme) => string;
 	export const euiLinkStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiLink: import("@emotion/utils").SerializedStyles;
@@ -1788,7 +1784,7 @@ declare module '@elastic/eui/src/components/text/text_color' {
 
 }
 declare module '@elastic/eui/src/components/text/text_align.styles' {
-	export const euiTextAlignStyles: () => {
+	export const euiTextAlignStyles: {
 	    euiTextAlign: import("@emotion/utils").SerializedStyles;
 	    left: import("@emotion/utils").SerializedStyles;
 	    right: import("@emotion/utils").SerializedStyles;
@@ -2640,7 +2636,7 @@ declare module '@elastic/eui/src/components/icon/icon' {
 	import React, { PureComponent, ComponentType, SVGAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { typeToPathMap } from '@elastic/eui/src/components/icon/icon_map';
-	import { WithEuiThemeProps } from '@elastic/eui/src/services';
+	import { WithEuiStylesMemoizerProps } from '@elastic/eui/src/services';
 	export { COLORS } from '@elastic/eui/src/components/icon/named_colors';
 	import { NamedColor } from '@elastic/eui/src/components/icon/named_colors';
 	export const TYPES: ("string" | "number" | "function" | "search" | "link" | "at" | "article" | "menu" | "filter" | "image" | "stop" | "key" | "temperature" | "color" | "email" | "list" | "user" | "alert" | "document" | "grid" | "copy" | "scale" | "wordWrap" | "grab" | "help" | "invert" | "spaces" | "dot" | "warning" | "error" | "download" | "accessibility" | "aggregate" | "analyzeEvent" | "annotation" | "apps" | "arrowStart" | "arrowEnd" | "asterisk" | "beaker" | "bell" | "bellSlash" | "beta" | "bolt" | "branch" | "branchUser" | "broom" | "brush" | "bug" | "bullseye" | "calendar" | "check" | "checkInCircleFilled" | "cheer" | "clock" | "cloudDrizzle" | "cloudStormy" | "cloudSunny" | "cluster" | "compute" | "console" | "container" | "continuityAbove" | "continuityAboveBelow" | "continuityBelow" | "continuityWithin" | "cross" | "crosshairs" | "currency" | "cut" | "database" | "desktop" | "diff" | "discuss" | "documentEdit" | "documentation" | "documents" | "dotInCircle" | "doubleArrowLeft" | "doubleArrowRight" | "editorDistributeHorizontal" | "editorDistributeVertical" | "editorItemAlignBottom" | "editorItemAlignCenter" | "editorItemAlignLeft" | "editorItemAlignMiddle" | "editorItemAlignRight" | "editorItemAlignTop" | "editorPositionBottomLeft" | "editorPositionBottomRight" | "editorPositionTopLeft" | "editorPositionTopRight" | "empty" | "endpoint" | "eql" | "eraser" | "esqlVis" | "exit" | "expand" | "expandMini" | "eye" | "filterExclude" | "filterIgnore" | "filterInclude" | "filterInCircle" | "flag" | "fold" | "frameNext" | "framePrevious" | "fullScreenExit" | "gear" | "glasses" | "globe" | "grabOmnidirectional" | "gradient" | "heart" | "heatmap" | "home" | "iInCircle" | "index" | "indexTemporary" | "infinity" | "inputOutput" | "inspect" | "ip" | "keyboard" | "kubernetesNode" | "kubernetesPod" | "launch" | "layers" | "lettering" | "lineDashed" | "lineDotted" | "lineSolid" | "lock" | "lockOpen" | "magnet" | "magnifyWithExclamation" | "magnifyWithMinus" | "magnifyWithPlus" | "memory" | "menuDown" | "menuLeft" | "menuRight" | "menuUp" | "merge" | "minimize" | "minus" | "mobile" | "moon" | "namespace" | "nested" | "node" | "offline" | "online" | "package" | "pageSelect" | "pagesSelect" | "palette" | "partial" | "pause" | "payment" | "pencil" | "percent" | "pin" | "pipeBreaks" | "pipeNoBreaks" | "pivot" | "play" | "playFilled" | "plus" | "popout" | "push" | "quote" | "refresh" | "reporter" | "save" | "securitySignal" | "securitySignalDetected" | "securitySignalResolved" | "sessionViewer" | "shard" | "share" | "snowflake" | "sortAscending" | "sortDescending" | "sortLeft" | "sortRight" | "sortable" | "sparkles" | "starPlusEmpty" | "starPlusFilled" | "stats" | "storage" | "submodule" | "sun" | "symlink" | "tableOfContents" | "tag" | "tear" | "timeline" | "timelineWithArrow" | "timeRefresh" | "timeslider" | "training" | "transitionLeftIn" | "transitionLeftOut" | "transitionTopIn" | "transitionTopOut" | "trash" | "unfold" | "unlink" | "userAvatar" | "users" | "vector" | "videoPlayer" | "wordWrapDisabled" | "wrench" | "tokenAlias" | "tokenAnnotation" | "tokenArray" | "tokenBinary" | "tokenBoolean" | "tokenClass" | "tokenCompletionSuggester" | "tokenConstant" | "tokenDate" | "tokenElement" | "tokenEnum" | "tokenEnumMember" | "tokenEvent" | "tokenException" | "tokenField" | "tokenFile" | "tokenFlattened" | "tokenFunction" | "tokenGeo" | "tokenHistogram" | "tokenInterface" | "tokenIP" | "tokenJoin" | "tokenKey" | "tokenKeyword" | "tokenMethod" | "tokenMetricCounter" | "tokenMetricGauge" | "tokenModule" | "tokenNamespace" | "tokenNested" | "tokenNull" | "tokenNumber" | "tokenObject" | "tokenOperator" | "tokenPackage" | "tokenParameter" | "tokenPercolator" | "tokenProperty" | "tokenRange" | "tokenRankFeature" | "tokenRankFeatures" | "tokenRepo" | "tokenSearchType" | "tokenShape" | "tokenString" | "tokenStruct" | "tokenSymbol" | "tokenTag" | "tokenText" | "tokenTokenCount" | "tokenVariable" | "tokenVectorDense" | "tokenVectorSparse" | "addDataApp" | "advancedSettingsApp" | "agentApp" | "apmApp" | "apmTrace" | "appSearchApp" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "auditbeatApp" | "boxesHorizontal" | "boxesVertical" | "canvasApp" | "casesApp" | "classificationJob" | "codeApp" | "consoleApp" | "controlsHorizontal" | "controlsVertical" | "copyClipboard" | "createAdvancedJob" | "createMultiMetricJob" | "createPopulationJob" | "createSingleMetricJob" | "crossClusterReplicationApp" | "dashboardApp" | "dataVisualizer" | "devToolsApp" | "discoverApp" | "editorAlignCenter" | "editorAlignLeft" | "editorAlignRight" | "editorBold" | "editorChecklist" | "editorCodeBlock" | "editorComment" | "editorHeading" | "editorItalic" | "editorLink" | "editorOrderedList" | "editorRedo" | "editorStrike" | "editorTable" | "editorUnderline" | "editorUndo" | "editorUnorderedList" | "emsApp" | "exportAction" | "eyeClosed" | "faceHappy" | "faceNeutral" | "faceSad" | "filebeatApp" | "fleetApp" | "folderCheck" | "folderClosed" | "folderExclamation" | "folderOpen" | "fullScreen" | "gisApp" | "grabHorizontal" | "graphApp" | "grokApp" | "heartbeatApp" | "importAction" | "indexClose" | "indexEdit" | "indexFlush" | "indexManagementApp" | "indexMapping" | "indexOpen" | "indexPatternApp" | "indexRollupApp" | "indexRuntime" | "indexSettings" | "kqlField" | "kqlFunction" | "kqlOperand" | "kqlSelector" | "kqlValue" | "lensApp" | "listAdd" | "logoAWS" | "logoAWSMono" | "logoAerospike" | "logoApache" | "logoAppSearch" | "logoAzure" | "logoAzureMono" | "logoBeats" | "logoBusinessAnalytics" | "logoCeph" | "logoCloud" | "logoCloudEnterprise" | "logoCode" | "logoCodesandbox" | "logoCouchbase" | "logoDocker" | "logoDropwizard" | "logoElastic" | "logoElasticStack" | "logoElasticsearch" | "logoEnterpriseSearch" | "logoEtcd" | "logoGCP" | "logoGCPMono" | "logoGithub" | "logoGmail" | "logoGolang" | "logoGoogleG" | "logoHAproxy" | "logoIBM" | "logoIBMMono" | "logoKafka" | "logoKibana" | "logoKubernetes" | "logoLogging" | "logoLogstash" | "logoMaps" | "logoMemcached" | "logoMetrics" | "logoMongodb" | "logoMySQL" | "logoNginx" | "logoObservability" | "logoOsquery" | "logoPhp" | "logoPostgres" | "logoPrometheus" | "logoRabbitmq" | "logoRedis" | "logoSecurity" | "logoSiteSearch" | "logoSketch" | "logoSlack" | "logoUptime" | "logoVulnerabilityManagement" | "logoWebhook" | "logoWindows" | "logoWorkplaceSearch" | "logsApp" | "logstashFilter" | "logstashIf" | "logstashInput" | "logstashOutput" | "logstashQueue" | "machineLearningApp" | "managementApp" | "mapMarker" | "metricbeatApp" | "metricsApp" | "minusInCircle" | "minusInCircleFilled" | "monitoringApp" | "newChat" | "notebookApp" | "outlierDetectionJob" | "packetbeatApp" | "paperClip" | "pinFilled" | "pipelineApp" | "plusInCircle" | "plusInCircleFilled" | "questionInCircle" | "recentlyViewedApp" | "regressionJob" | "reportingApp" | "returnKey" | "savedObjectsApp" | "searchProfilerApp" | "securityAnalyticsApp" | "securityApp" | "sortDown" | "sortUp" | "spacesApp" | "sqlApp" | "starEmpty" | "starEmptySpace" | "starFilled" | "starFilledSpace" | "starMinusEmpty" | "starMinusFilled" | "stopFilled" | "stopSlash" | "swatchInput" | "tableDensityCompact" | "tableDensityExpanded" | "tableDensityNormal" | "timelionApp" | "upgradeAssistantApp" | "uptimeApp" | "usersRolesApp" | "visArea" | "visAreaStacked" | "visBarHorizontal" | "visBarHorizontalStacked" | "visBarVertical" | "visBarVerticalStacked" | "visGauge" | "visGoal" | "visLine" | "visMapCoordinate" | "visMapRegion" | "visMetric" | "visPie" | "visTable" | "visTagCloud" | "visText" | "visTimelion" | "visVega" | "visVisualBuilder" | "visualizeApp" | "vulnerabilityManagementApp" | "watchesApp" | "workplaceSearchApp" | "tokenDenseVector")[];
@@ -2690,9 +2686,9 @@ declare module '@elastic/eui/src/components/icon/icon' {
 	export const appendIconComponentCache: (iconTypeToIconComponentMap: {
 	    [iconType: string]: React.ComponentType<{}>;
 	}) => void;
-	export class EuiIconClass extends PureComponent<EuiIconProps & WithEuiThemeProps, State> {
+	export class EuiIconClass extends PureComponent<EuiIconProps & WithEuiStylesMemoizerProps, State> {
 	    isMounted: boolean;
-	    constructor(props: EuiIconProps & WithEuiThemeProps);
+	    constructor(props: EuiIconProps & WithEuiStylesMemoizerProps);
 	    componentDidMount(): void;
 	    componentDidUpdate(prevProps: EuiIconProps): void;
 	    componentWillUnmount(): void;
@@ -2700,7 +2696,7 @@ declare module '@elastic/eui/src/components/icon/icon' {
 	    onIconLoad: () => void;
 	    render(): React.JSX.Element;
 	}
-	export const EuiIcon: React.ForwardRefExoticComponent<Omit<EuiIconProps, "theme"> & React.RefAttributes<Omit<EuiIconProps, "theme">>>;
+	export const EuiIcon: React.ForwardRefExoticComponent<Omit<EuiIconProps, "stylesMemoizer"> & React.RefAttributes<Omit<EuiIconProps, "stylesMemoizer">>>;
 
 }
 declare module '@elastic/eui/src/components/icon' {
@@ -3243,10 +3239,12 @@ declare module '@elastic/eui/src/components/form/field_number' {
 
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' {
+	import { type SerializedStyles } from '@emotion/react';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const BUTTON_COLORS: readonly ["text", "accent", "primary", "success", "warning", "danger"];
 	export type _EuiButtonColor = (typeof BUTTON_COLORS)[number];
-	export type _EuiButtonDisplay = 'base' | 'fill' | 'empty';
+	export const BUTTON_DISPLAYS: readonly ["base", "fill", "empty"];
+	export type _EuiButtonDisplay = (typeof BUTTON_DISPLAYS)[number];
 	export interface _EuiButtonOptions {
 	    display?: _EuiButtonDisplay;
 	}
@@ -3285,20 +3283,12 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 	 * @param options Button display type
 	 * @returns An object of `_EuiButtonColor` keys including `disabled`
 	 */
-	export const useEuiButtonColorCSS: (options?: _EuiButtonOptions) => {
-	    text: 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;
-	    disabled: import("@emotion/utils").SerializedStyles;
-	};
+	export const useEuiButtonColorCSS: (options?: _EuiButtonOptions) => Record<"text" | "disabled" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
 	/**
 	 * Creates the translate animation when button is in focus.
 	 * @returns string
 	 */
-	export const useEuiButtonFocusCSS: () => string;
+	export const useEuiButtonFocusCSS: () => any;
 	/**
 	 * Map of `size` props to various sizings/scales
 	 * that should remain consistent across all buttons
@@ -3629,16 +3619,16 @@ declare module '@elastic/eui/src/components/button/button_empty' {
 
 }
 declare module '@elastic/eui/src/components/button/button_icon/button_icon.styles' {
+	import { type SerializedStyles } from '@emotion/react';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	import { _EuiButtonColor } from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button';
 	export const euiButtonIconStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiButtonIcon: import("@emotion/utils").SerializedStyles;
-	    isDisabled: import("@emotion/utils").SerializedStyles;
-	    xs: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
+	    euiButtonIcon: SerializedStyles;
+	    isDisabled: SerializedStyles;
+	    xs: SerializedStyles;
+	    s: SerializedStyles;
+	    m: SerializedStyles;
 	};
-	export const _emptyHoverStyles: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor) => import("@emotion/utils").SerializedStyles;
+	export const _emptyHoverStyles: (euiThemeContext: UseEuiTheme) => Record<"text" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/components/button/button_icon/button_icon' {
@@ -3822,7 +3812,7 @@ declare module '@elastic/eui/src/components/button/button_group/button_group_but
 }
 declare module '@elastic/eui/src/components/button/button_group/button_group.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiButtonGroupStyles: () => {
+	export const euiButtonGroupStyles: {
 	    euiButtonGroup: import("@emotion/utils").SerializedStyles;
 	    fullWidth: import("@emotion/utils").SerializedStyles;
 	};
@@ -8263,7 +8253,15 @@ declare module '@elastic/eui/src/services/theme/style_memoization' {
 	 * Hook that memoizes the returned values of components style fns/generators
 	 * per-theme
 	 */
-	export const useEuiMemoizedStyles: <T extends (theme: UseEuiTheme) => StylesMaps>(styleGenerator: T) => ReturnType<T>;
+	export const useEuiMemoizedStyles: <T extends (theme: UseEuiTheme) => StylesMaps>(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">>>;
 	export {};
 
 }
@@ -8299,7 +8297,7 @@ declare module '@elastic/eui/src/services/theme' {
 	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 } from '@elastic/eui/src/services/theme/style_memoization';
+	export { useEuiMemoizedStyles, withEuiStylesMemoizer, type WithEuiStylesMemoizerProps, } 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';
@@ -9810,12 +9808,14 @@ declare module '@elastic/eui/src/components/breadcrumbs/breadcrumb' {
 	     */
 	    'aria-current'?: AriaAttributes['aria-current'];
 	    /**
-	     * Creates a breadcrumb that toggles a popover dialog
+	     * Creates a breadcrumb that toggles a popover dialog. Takes any rendered node(s),
+	     * or a render function that will pass callback allowing you to close the
+	     * breadcrumb popover from within your popover content.
 	     *
 	     * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
 	     * click behavior should only trigger a popover.
 	     */
-	    popoverContent?: ReactNode;
+	    popoverContent?: ReactNode | ((closePopover: () => void) => ReactNode);
 	    /**
 	     * Allows customizing the popover if necessary. Accepts any props that
 	     * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
@@ -13657,6 +13657,12 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * as its only argument.
 	     */
 	    renderCellValue: EuiDataGridCellProps['renderCellValue'];
+	    /**
+	     * An optional object of props passed to the `renderCellValue` component.
+	     * This API exists to make it easier to define your `renderCellValue` function
+	     * component statically, and not rerender due to other dependent state.
+	     */
+	    cellContext?: EuiDataGridCellProps['cellContext'];
 	    /**
 	     * An optional function that can be used to completely customize the rendering of cell popovers.
 	     *
@@ -13821,6 +13827,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    rowCount: number;
 	    visibleRows: EuiDataGridVisibleRows;
 	    renderCellValue: EuiDataGridCellProps['renderCellValue'];
+	    cellContext?: EuiDataGridCellProps['cellContext'];
 	    renderCellPopover?: EuiDataGridCellProps['renderCellPopover'];
 	    renderFooterCellValue?: EuiDataGridCellProps['renderCellValue'];
 	    renderCustomGridBody?: EuiDataGridProps['renderCustomGridBody'];
@@ -13949,7 +13956,8 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * Accepts any props that `EuiPopover` accepts, except for `button` and `closePopover`.
 	     */
 	    setCellPopoverProps: (props: Omit<EuiPopoverProps, 'button' | 'closePopover'>) => void;
-	}
+	} type CellContext = Omit<Record<string, any>, keyof EuiDataGridCellValueElementProps>; type CellPropsWithContext = CellContext & EuiDataGridCellValueElementProps;
+	export type RenderCellValue = ((props: CellPropsWithContext) => ReactNode) | ComponentClass<CellPropsWithContext>;
 	export interface EuiDataGridCellProps {
 	    rowIndex: number;
 	    visibleRowIndex: number;
@@ -13962,7 +13970,8 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    isExpandable: boolean;
 	    className?: string;
 	    popoverContext: DataGridCellPopoverContextShape;
-	    renderCellValue: ((props: EuiDataGridCellValueElementProps) => ReactNode) | ComponentClass<EuiDataGridCellValueElementProps>;
+	    renderCellValue: RenderCellValue;
+	    cellContext?: CellContext;
 	    renderCellPopover?: JSXElementConstructor<EuiDataGridCellPopoverElementProps> | ((props: EuiDataGridCellPopoverElementProps) => ReactNode);
 	    setRowHeight?: (height: number) => void;
 	    getRowHeight?: (rowIndex: number) => number;
@@ -14828,7 +14837,7 @@ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell' {
 }
 declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper' {
 	import { FunctionComponent } from 'react';
-	import { EuiDataGridCellProps, EuiDataGridBodyProps, EuiDataGridHeaderRowProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; type CellProps = Pick<EuiDataGridCellProps, 'colIndex' | 'visibleRowIndex' | 'style' | 'renderCellValue' | 'renderCellPopover' | 'interactiveCellId' | 'rowHeightsOptions' | 'rowHeightUtils' | 'rowManager' | 'setRowHeight'> & Pick<EuiDataGridBodyProps, 'schema' | 'schemaDetectors' | 'pagination' | 'columns' | 'leadingControlColumns' | 'trailingControlColumns' | 'visibleColCount'> & Pick<EuiDataGridHeaderRowProps, 'columnWidths' | 'defaultColumnWidth'> & Partial<EuiDataGridCellProps>;
+	import { EuiDataGridCellProps, EuiDataGridBodyProps, EuiDataGridHeaderRowProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; type CellProps = Pick<EuiDataGridCellProps, 'colIndex' | 'visibleRowIndex' | 'style' | 'renderCellValue' | 'cellContext' | 'renderCellPopover' | 'interactiveCellId' | 'rowHeightsOptions' | 'rowHeightUtils' | 'rowManager' | 'setRowHeight'> & Pick<EuiDataGridBodyProps, 'schema' | 'schemaDetectors' | 'pagination' | 'columns' | 'leadingControlColumns' | 'trailingControlColumns' | 'visibleColCount'> & Pick<EuiDataGridHeaderRowProps, 'columnWidths' | 'defaultColumnWidth'> & Partial<EuiDataGridCellProps>;
 	/**
 	 * A DRY wrapper used by both custom and virtualized grid cells.
 	 * It grabs context,  determines the type of cell being rendered
@@ -14853,7 +14862,7 @@ declare module '@elastic/eui/src/components/datagrid/body/footer/data_grid_foote
 	    schema: import ("@elastic/eui/src/components/datagrid/data_grid_types").EuiDataGridSchema;
 	    columnWidths: import ("@elastic/eui/src/components/datagrid/data_grid_types").EuiDataGridColumnWidths;
 	    defaultColumnWidth?: number | null | undefined;
-	    renderCellValue: ((props: import ("@elastic/eui/src/components/datagrid/data_grid_types").EuiDataGridCellValueElementProps) => React.ReactNode) | React.ComponentClass<import ("@elastic/eui/src/components/datagrid/data_grid_types").EuiDataGridCellValueElementProps, any>;
+	    renderCellValue: import ("@elastic/eui/src/components/datagrid/data_grid_types").RenderCellValue;
 	    renderCellPopover?: React.JSXElementConstructor<import ("@elastic/eui/src/components/datagrid/data_grid_types").EuiDataGridCellPopoverElementProps> | ((props: import ("@elastic/eui/src/components/datagrid/data_grid_types").EuiDataGridCellPopoverElementProps) => React.ReactNode) | undefined;
 	    interactiveCellId: string;
 	    visibleRowIndex?: number | undefined;

package/i18ntokens.json

@@ -275,14 +275,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 155,
+        "line": 157,
         "column": 27,
-        "index": 4628
+        "index": 4839
       },
       "end": {
-        "line": 158,
+        "line": 160,
         "column": 3,
-        "index": 4738
+        "index": 4949
       }
     },
     "filepath": "src/components/breadcrumbs/breadcrumb.tsx"
@@ -293,14 +293,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 233,
+        "line": 238,
         "column": 20,
-        "index": 6945
+        "index": 7303
       },
       "end": {
-        "line": 236,
+        "line": 241,
         "column": 3,
-        "index": 7038
+        "index": 7396
       }
     },
     "filepath": "src/components/breadcrumbs/breadcrumb.tsx"
@@ -941,14 +941,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 119,
+        "line": 121,
         "column": 10,
-        "index": 3528
+        "index": 3572
       },
       "end": {
-        "line": 127,
+        "line": 129,
         "column": 12,
-        "index": 3819
+        "index": 3863
       }
     },
     "filepath": "src/components/datagrid/body/cell/data_grid_cell.tsx"
@@ -959,14 +959,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 131,
+        "line": 133,
         "column": 14,
-        "index": 3898
+        "index": 3942
       },
       "end": {
-        "line": 134,
+        "line": 136,
         "column": 16,
-        "index": 4051
+        "index": 4095
       }
     },
     "filepath": "src/components/datagrid/body/cell/data_grid_cell.tsx"
@@ -2273,14 +2273,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 342,
+        "line": 343,
         "column": 22,
-        "index": 9566
+        "index": 9585
       },
       "end": {
-        "line": 346,
+        "line": 347,
         "column": 5,
-        "index": 9738
+        "index": 9757
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -2291,14 +2291,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 347,
+        "line": 348,
         "column": 27,
-        "index": 9767
+        "index": 9786
       },
       "end": {
-        "line": 351,
+        "line": 352,
         "column": 5,
-        "index": 9908
+        "index": 9927
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -2309,14 +2309,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 476,
+        "line": 478,
         "column": 18,
-        "index": 15363
+        "index": 15428
       },
       "end": {
-        "line": 479,
+        "line": 481,
         "column": 20,
-        "index": 15516
+        "index": 15581
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -5045,14 +5045,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 39,
+        "line": 42,
         "column": 24,
-        "index": 1389
+        "index": 1528
       },
       "end": {
-        "line": 42,
+        "line": 45,
         "column": 3,
-        "index": 1461
+        "index": 1600
       }
     },
     "filepath": "src/components/link/external_link_icon.tsx"
@@ -5063,14 +5063,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 58,
+        "line": 61,
         "column": 12,
-        "index": 1805
+        "index": 1911
       },
       "end": {
-        "line": 61,
+        "line": 64,
         "column": 14,
-        "index": 1956
+        "index": 2062
       }
     },
     "filepath": "src/components/link/external_link_icon.tsx"

package/lib/components/breadcrumbs/breadcrumb.js

@@ -116,11 +116,12 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
       css: cssStyles
     };
     if (isPopoverBreadcrumb) {
+      var _closePopover = function _closePopover() {
+        return setIsPopoverOpen(false);
+      };
       return (0, _react2.jsx)(_popover.EuiPopover, _extends({}, popoverProps, {
         isOpen: isPopoverOpen,
-        closePopover: function closePopover() {
-          return setIsPopoverOpen(false);
-        },
+        closePopover: _closePopover,
         css: !isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper,
         button: (0, _react2.jsx)(_link.EuiLink, _extends({}, baseProps, {
           color: linkColor,
@@ -137,7 +138,7 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
           size: "s",
           "aria-label": " - ".concat(popoverAriaLabel)
         }))
-      }), popoverContent);
+      }), typeof popoverContent === 'function' ? popoverContent(_closePopover) : popoverContent);
     } else if (isInteractiveBreadcrumb) {
       return (0, _react2.jsx)(_link.EuiLink, _extends({}, baseProps, styleProps, {
         color: linkColor,
@@ -179,12 +180,14 @@ EuiBreadcrumbContent.propTypes = {
        */
   "aria-current": _propTypes.default.any,
   /**
-       * Creates a breadcrumb that toggles a popover dialog
+       * Creates a breadcrumb that toggles a popover dialog. Takes any rendered node(s),
+       * or a render function that will pass callback allowing you to close the
+       * breadcrumb popover from within your popover content.
        *
        * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
        * click behavior should only trigger a popover.
        */
-  popoverContent: _propTypes.default.node,
+  popoverContent: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.func.isRequired]),
   /**
        * Allows customizing the popover if necessary. Accepts any props that
        * [EuiPopover](/#/layout/popover) accepts, except for props that control state.

package/lib/components/breadcrumbs/breadcrumbs.js

@@ -149,12 +149,14 @@ EuiBreadcrumbs.propTypes = {
          */
     "aria-current": _propTypes.default.any,
     /**
-         * Creates a breadcrumb that toggles a popover dialog
+         * Creates a breadcrumb that toggles a popover dialog. Takes any rendered node(s),
+         * or a render function that will pass callback allowing you to close the
+         * breadcrumb popover from within your popover content.
          *
          * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
          * click behavior should only trigger a popover.
          */
-    popoverContent: _propTypes.default.node,
+    popoverContent: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.func.isRequired]),
     /**
          * Allows customizing the popover if necessary. Accepts any props that
          * [EuiPopover](/#/layout/popover) accepts, except for props that control state.

package/lib/components/button/button_display/_button_display.js

@@ -82,8 +82,7 @@ var EuiButtonDisplay = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref)
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _button_display.euiButtonDisplayStyles)(theme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_display.euiButtonDisplayStyles);
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
     isLoading: isLoading,

package/lib/components/button/button_empty/button_empty.js

@@ -74,8 +74,7 @@ var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: 'empty'
   });
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _button_empty.euiButtonEmptyStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_empty.euiButtonEmptyStyles);
   var cssStyles = [styles.euiButtonEmpty, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], flush && styles.flush, flush && styles[flush], isDisabled && styles.isDisabled];
   var classes = (0, _classnames.default)('euiButtonEmpty', className);
   var contentClassNames = (0, _classnames.default)('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);

package/lib/components/button/button_group/button_group.js

@@ -48,10 +48,8 @@ var EuiButtonGroup = function EuiButtonGroup(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'single' : _ref$type,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var wrapperStyles = (0, _button_group.euiButtonGroupStyles)();
-  var wrapperCssStyles = [wrapperStyles.euiButtonGroup, isFullWidth && wrapperStyles.fullWidth];
-  var styles = (0, _button_group.euiButtonGroupButtonsStyles)(euiTheme);
+  var wrapperCssStyles = [_button_group.euiButtonGroupStyles.euiButtonGroup, isFullWidth && _button_group.euiButtonGroupStyles.fullWidth];
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_group.euiButtonGroupButtonsStyles);
   var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles[buttonSize]];
   var classes = (0, _classnames.default)('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled

package/lib/components/button/button_group/button_group.styles.js

@@ -14,19 +14,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "jl0hie-fullWidth",
-  styles: "display:block;label:fullWidth;"
-} : {
-  name: "jl0hie-fullWidth",
-  styles: "display:block;label:fullWidth;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiButtonGroupStyles = function euiButtonGroupStyles() {
-  return {
-    euiButtonGroup: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
-    fullWidth: _ref
-  };
+var euiButtonGroupStyles = {
+  euiButtonGroup: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
+  fullWidth: process.env.NODE_ENV === "production" ? {
+    name: "jl0hie-fullWidth",
+    styles: "display:block;label:fullWidth;"
+  } : {
+    name: "jl0hie-fullWidth",
+    styles: "display:block;label:fullWidth;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };
 exports.euiButtonGroupStyles = euiButtonGroupStyles;
 var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {

package/lib/components/button/button_icon/button_icon.js

@@ -52,7 +52,6 @@ var EuiButtonIcon = function EuiButtonIcon(_ref) {
     isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiThemeContext = (0, _services.useEuiTheme)();
   var isDisabled = (0, _button_display.isButtonDisabled)({
     isDisabled: _isDisabled || disabled,
     href: href,
@@ -67,9 +66,9 @@ var EuiButtonIcon = function EuiButtonIcon(_ref) {
     display: display
   });
   var buttonFocusStyle = (0, _button.useEuiButtonFocusCSS)();
-  var emptyHoverStyles = display === 'empty' && !isDisabled && (0, _button_icon._emptyHoverStyles)(euiThemeContext, color);
-  var styles = (0, _button_icon.euiButtonIconStyles)(euiThemeContext);
-  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], buttonFocusStyle, emptyHoverStyles, isDisabled && styles.isDisabled];
+  var emptyHoverStyles = (0, _services.useEuiMemoizedStyles)(_button_icon._emptyHoverStyles);
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_icon.euiButtonIconStyles);
+  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], buttonFocusStyle, display === 'empty' && !isDisabled && emptyHoverStyles[color], isDisabled && styles.isDisabled];
   var classes = (0, _classnames.default)('euiButtonIcon', className);
 
   // Add an icon to the button if one exists.

package/lib/components/button/button_icon/button_icon.styles.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,6 +9,11 @@ var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
 var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
 var _button_display = require("../button_display/_button_display.styles");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -35,7 +41,9 @@ var euiButtonIconStyles = function euiButtonIconStyles(euiThemeContext) {
   };
 };
 exports.euiButtonIconStyles = euiButtonIconStyles;
-var _emptyHoverStyles = function _emptyHoverStyles(euiThemeContext, color) {
-  return /*#__PURE__*/(0, _react.css)("&:hover{background-color:", (0, _button.euiButtonEmptyColor)(euiThemeContext, color).backgroundColor, ";}");
+var _emptyHoverStyles = function _emptyHoverStyles(euiThemeContext) {
+  return _button.BUTTON_COLORS.reduce(function (styles, color) {
+    return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, color, /*#__PURE__*/(0, _react.css)("&:hover{background-color:", (0, _button.euiButtonEmptyColor)(euiThemeContext, color).backgroundColor, ";}")));
+  }, {});
 };
 exports._emptyHoverStyles = _emptyHoverStyles;