@elastic/eui 88.5.0 → 88.5.2

package/eui.d.ts

@@ -8032,6 +8032,40 @@ declare module '@elastic/eui/src/services/breakpoint' {
 	export * from '@elastic/eui/src/services/breakpoint/current_breakpoint_hook';
 	export * from '@elastic/eui/src/services/breakpoint/is_within_hooks';
 
+}
+declare module '@elastic/eui/src/services/canvas/canvas_text_utils' {
+	import type { ExclusiveUnion } from '@elastic/eui/src/components/common';
+	export type CanvasTextParams = ExclusiveUnion<{
+	    container: HTMLElement;
+	}, {
+	    font: CanvasTextDrawingStyles['font'];
+	}>;
+	/**
+	 * Creates a temporary Canvas element for manipulating text & determining text width.
+	 *
+	 * To accurately measure text, canvas rendering requires either a container to
+	 * compute/derive font styles from, or a static font string (useful for usage
+	 * outside the DOM). Particular care should be applied when fallback fonts are
+	 * used, as more fallback fonts can lead to less precision.
+	 *
+	 * Please note that while canvas is more significantly more performant than DOM
+	 * measurement, there are subpixel to single digit pixel differences between
+	 * DOM and canvas measurement due to the different rendering engines used.
+	 */
+	export class CanvasTextUtils {
+	    context: CanvasRenderingContext2D;
+	    currentText: string;
+	    constructor({ font, container }: CanvasTextParams);
+	    computeFontFromElement: (element: HTMLElement) => string;
+	    get textWidth(): number;
+	    setTextToCheck: (text: string) => void;
+	}
+
+}
+declare module '@elastic/eui/src/services/canvas' {
+	export { CanvasTextUtils } from '@elastic/eui/src/services/canvas/canvas_text_utils';
+	export type { CanvasTextParams } from '@elastic/eui/src/services/canvas/canvas_text_utils';
+
 }
 declare module '@elastic/eui/src/services/color_picker/color_picker' {
 	interface colorStopsType {
@@ -8470,6 +8504,7 @@ declare module '@elastic/eui/src/services' {
 	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
 	export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui/src/services/breakpoint';
 	export type { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
+	export { CanvasTextUtils, type CanvasTextParams } from '@elastic/eui/src/services/canvas';
 	export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin, } from '@elastic/eui/src/services/color';
 	export type { HSV } from '@elastic/eui/src/services/color';
 	export { useColorPickerState, useColorStopsState } from '@elastic/eui/src/services/color_picker';
@@ -10704,6 +10739,18 @@ declare module '@elastic/eui/src/themes' {
 	export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from '@elastic/eui/src/themes/amsterdam/theme';
 	export * from '@elastic/eui/src/themes/amsterdam';
 
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCollapsibleNavBodyStyles: {
+	    euiCollapsibleNav__body: import("@emotion/utils").SerializedStyles;
+	    readonly isPushCollapsed: import("@emotion/utils").SerializedStyles;
+	    _isPushCollapsed: string;
+	};
+	export const euiCollapsibleNavFooterStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiCollapsibleNav__footer: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -10717,54 +10764,16 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	};
 
 }
-declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta' {
-	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiFlyoutProps } from '@elastic/eui/src/components/flyout';
-	export type EuiCollapsibleNavBetaProps = CommonProps & HTMLAttributes<HTMLElement> & Pick<EuiFlyoutProps, // Extend only specific flyout props - EuiCollapsibleNav is much less customizable than EuiFlyout
-	// Extend only specific flyout props - EuiCollapsibleNav is much less customizable than EuiFlyout
-	'side' | 'focusTrapProps' | 'includeFixedHeadersInFocusTrap'> & {
-	    /**
-	     * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavItem`s.
-	     * You may also want to use `EuiFlyoutBody` and `EuiFlyoutFooter` for organization.
-	     */
-	    children?: ReactNode;
-	    /**
-	     * Whether the navigation flyout should default to initially collapsed or expanded
-	     */
-	    initialIsCollapsed?: boolean;
-	    /**
-	     * Optional callback that fires when the user toggles the nav between
-	     * collapsed and uncollapsed states
-	     */
-	    onCollapseToggle?: (isCollapsed: boolean) => void;
-	    /**
-	     * Defaults to 248px wide. The navigation width determines behavior at
-	     * various responsive breakpoints.
-	     *
-	     * At larger screen sizes (at least 3x the width of the nav), the nav will
-	     * be able to be toggled between a docked full width nav and a collapsed
-	     * side bar that only shows the icon of each item.
-	     *
-	     * At under 3 times the width of the nav, the behavior will lose the collapsed
-	     * side bar behavior, and switch from a docked flyout to an overlay flyout only.
-	     *
-	     * If the page is under 1.5 times the width of the nav, the overlay will
-	     * take up the full width of the page.
-	     */
-	    width?: number;
-	    /**
-	     * Overlay flyouts are considered dialogs, and dialogs must have a label.
-	     * By default, a label of `Site menu` will be applied.
-	     *
-	     * If your usage of this component is not actually for site-wide navigation,
-	     * please set your own `aria-label` or `aria-labelledby`.
-	     *
-	     * @default 'Site menu'
-	     */
-	    'aria-label'?: string;
-	};
-	export const EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps>;
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_body_footer' {
+	import { EuiFlyoutBodyProps, EuiFlyoutFooterProps } from '@elastic/eui/src/components/flyout';
+	/**
+	 * These components are incredibly light wrappers around `EuiFlyoutBody`
+	 * and `EuiFlyoutFooter` with collapsible nav-specific styling/considerations.
+	 *
+	 * Note: They are not intended to be used standalone outside of EuiCollapsibleNav
+	 */
+	export const EuiCollapsibleNavBody: EuiFlyoutBodyProps;
+	export const EuiCollapsibleNavFooter: EuiFlyoutFooterProps;
 
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles' {
@@ -10790,8 +10799,14 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	export const euiCollapsibleNavItemTitleStyles: {
 	    euiCollapsibleNavItem__title: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiCollapsibleNavSubItemGroupTitleStyles: ({ euiTheme, }: UseEuiTheme) => {
-	    euiCollapsibleNavItem__groupTitle: import("@emotion/utils").SerializedStyles;
+	/**
+	 * Sub item groups
+	 */
+	export const euiCollapsibleNavSubItemsStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiCollapsibleNavItem__items: import("@emotion/utils").SerializedStyles;
+	    isGroup: import("@emotion/utils").SerializedStyles;
+	    isTopItem: import("@emotion/utils").SerializedStyles;
+	    isSubItem: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -10899,19 +10914,14 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	    isSelected: import("@emotion/utils").SerializedStyles;
 	    isSubItem: import("@emotion/utils").SerializedStyles;
 	    euiCollapsibleNavAccordion__arrow: import("@emotion/utils").SerializedStyles;
-	    children: {
-	        euiCollapsibleNavAccordion__children: import("@emotion/utils").SerializedStyles;
-	        isTopItem: import("@emotion/utils").SerializedStyles;
-	        isSubItem: import("@emotion/utils").SerializedStyles;
-	    };
 	};
 
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion' {
 	import { FunctionComponent, ReactNode } from 'react';
-	import { _SharedEuiCollapsibleNavItemProps, _EuiCollapsibleNavItemDisplayProps, EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavAccordionProps = Omit<_SharedEuiCollapsibleNavItemProps, 'items'> & _EuiCollapsibleNavItemDisplayProps & {
+	import { EuiCollapsibleNavSubItemProps, _SharedEuiCollapsibleNavItemProps, _EuiCollapsibleNavItemDisplayProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item'; type EuiCollapsibleNavAccordionProps = Omit<_SharedEuiCollapsibleNavItemProps, 'items'> & _EuiCollapsibleNavItemDisplayProps & {
 	    buttonContent: ReactNode;
-	    items: EuiCollapsibleNavItemProps[];
+	    items: EuiCollapsibleNavSubItemProps[];
 	};
 	/**
 	 * Internal nav accordion component.
@@ -10925,7 +10935,7 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { IconType, EuiIconProps } from '@elastic/eui/src/components/icon';
 	import { EuiLinkProps } from '@elastic/eui/src/components/link';
@@ -10940,8 +10950,8 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	    /**
 	     * When passed, an `EuiAccordion` with nested child item links will be rendered.
 	     *
-	     * Accepts any #EuiCollapsibleNavItem prop, and also accepts an
-	     * #EuiCollapsibleNavSubItemGroupTitle
+	     * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+	     * subitem content, pass an object with a `renderItem` callback.
 	     */
 	    items?: EuiCollapsibleNavSubItemProps[];
 	    /**
@@ -10980,14 +10990,10 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	     */
 	    iconProps?: Partial<EuiIconProps>;
 	} & _SharedEuiCollapsibleNavItemProps;
-	export type EuiCollapsibleNavSubItemGroupTitle = Pick<EuiCollapsibleNavItemProps, 'title' | 'titleElement'> & {
-	    /**
-	     * Pass this flag to seperate links by group title headings.
-	     * Strongly consider using the `titleElement` prop for accessibility.
-	     */
-	    isGroupTitle?: boolean;
+	export type EuiCollapsibleNavCustomSubItem = {
+	    renderItem: () => ReactNode;
 	};
-	export type EuiCollapsibleNavSubItemProps = ExclusiveUnion<EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemGroupTitle>;
+	export type EuiCollapsibleNavSubItemProps = ExclusiveUnion<EuiCollapsibleNavItemProps, EuiCollapsibleNavCustomSubItem>;
 	export type _EuiCollapsibleNavItemDisplayProps = {
 	    /**
 	     * Determines whether the item should render as a top-level nav item
@@ -10996,20 +11002,122 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	    isSubItem?: boolean;
 	};
 	/**
-	 * Sub-items can either be a group title, to visually separate sections
-	 * of nav links, or they can simply be more links or accordions
+	 * Internal subcomponent for title display
+	 */
+	export const EuiCollapsibleNavItemTitle: FunctionComponent<Pick<EuiCollapsibleNavItemProps, 'title' | 'titleElement' | 'icon' | 'iconProps'>>;
+	/**
+	 * Sub-items can either be a totally custom rendered item,
+	 * or they can simply be more links or accordions
 	 */
-	export const EuiCollapsibleNavSubItem: FunctionComponent<EuiCollapsibleNavSubItemProps>;
+	export const EuiCollapsibleNavSubItem: FunctionComponent<EuiCollapsibleNavSubItemProps>; type EuiCollapsibleNavSubItemsProps = HTMLAttributes<HTMLDivElement> & _EuiCollapsibleNavItemDisplayProps & {
+	    items: EuiCollapsibleNavSubItemProps[];
+	    isGroup?: boolean;
+	};
+	export const EuiCollapsibleNavSubItems: FunctionComponent<EuiCollapsibleNavSubItemsProps>;
 	/**
 	 * The actual exported component
 	 */
 	export const EuiCollapsibleNavItem: FunctionComponent<EuiCollapsibleNavItemProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCollapsibleNavGroupStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiCollapsibleNavGroup: import("@emotion/utils").SerializedStyles;
+	    isWrapper: import("@emotion/utils").SerializedStyles;
+	    euiCollapsibleNavGroup__title: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group' {
+	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiCollapsibleNavSubItemProps, EuiCollapsibleNavItemProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
+	export type EuiCollapsibleNavGroupProps = Omit<EuiCollapsibleNavItemProps, 'items' | 'accordionProps'> & {
+	    /**
+	     * Will render an array of `EuiCollapsibleNavItems`.
+	     *
+	     * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+	     * subitem content, pass an object with a `renderItem` callback.
+	     */
+	    items: EuiCollapsibleNavSubItemProps[];
+	    /**
+	     * Optional props to pass to the wrapping div
+	     */
+	    wrapperProps?: HTMLAttributes<HTMLDivElement> & CommonProps;
+	};
+	/**
+	 * This component should only ever be used as a **top-level component**, and not as a sub-item.
+	 * It also should **not** be used in the nav footer.
+	 */
+	export const EuiCollapsibleNavGroup: FunctionComponent<EuiCollapsibleNavGroupProps>;
+
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_group' {
+	export { EuiCollapsibleNavGroup } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group';
 
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item' {
-	export type { EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemProps, EuiCollapsibleNavSubItemGroupTitle, } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
+	export type { EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemProps, } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
 	export { EuiCollapsibleNavItem } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item';
 
+}
+declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta' {
+	import React, { HTMLAttributes, ReactNode } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiFlyoutProps } from '@elastic/eui/src/components/flyout';
+	export type EuiCollapsibleNavBetaProps = CommonProps & HTMLAttributes<HTMLElement> & Pick<EuiFlyoutProps, // Extend only specific flyout props - EuiCollapsibleNav is much less customizable than EuiFlyout
+	// Extend only specific flyout props - EuiCollapsibleNav is much less customizable than EuiFlyout
+	'side' | 'focusTrapProps' | 'includeFixedHeadersInFocusTrap'> & {
+	    /**
+	     * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavBeta.Item`s.
+	     * You will likely want to use `EuiCollapsibleNavBeta.Body` and `EuiCollapsibleNavBeta.Footer`
+	     * for organization.
+	     */
+	    children?: ReactNode;
+	    /**
+	     * Whether the navigation flyout should default to initially collapsed or expanded
+	     */
+	    initialIsCollapsed?: boolean;
+	    /**
+	     * Optional callback that fires when the user toggles the nav between
+	     * collapsed and uncollapsed states
+	     */
+	    onCollapseToggle?: (isCollapsed: boolean) => void;
+	    /**
+	     * Defaults to 248px wide. The navigation width determines behavior at
+	     * various responsive breakpoints.
+	     *
+	     * At larger screen sizes (at least 3x the width of the nav), the nav will
+	     * be able to be toggled between a docked full width nav and a collapsed
+	     * side bar that only shows the icon of each item.
+	     *
+	     * At under 3 times the width of the nav, the behavior will lose the collapsed
+	     * side bar behavior, and switch from a docked flyout to an overlay flyout only.
+	     *
+	     * If the page is under 1.5 times the width of the nav, the overlay will
+	     * take up the full width of the page.
+	     */
+	    width?: number;
+	    /**
+	     * Overlay flyouts are considered dialogs, and dialogs must have a label.
+	     * By default, a label of `Site menu` will be applied.
+	     *
+	     * If your usage of this component is not actually for site-wide navigation,
+	     * please set your own `aria-label` or `aria-labelledby`.
+	     *
+	     * @default 'Site menu'
+	     */
+	    'aria-label'?: string;
+	};
+	export const EuiCollapsibleNavBeta: React.FunctionComponent<EuiCollapsibleNavBetaProps> & {
+	    Body: import ("@elastic/eui/src/components/flyout").EuiFlyoutBodyProps;
+	    Footer: import ("@elastic/eui/src/components/flyout").EuiFlyoutFooterProps;
+	    Group: React.FunctionComponent<import ("@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group").EuiCollapsibleNavGroupProps>;
+	    Item: React.FunctionComponent<import ("@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item").EuiCollapsibleNavItemProps>;
+	};
+
 }
 declare module '@elastic/eui/src/components/collapsible_nav_beta' {
 	/**
@@ -11018,7 +11126,7 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta' {
 	 */
 	export type { EuiCollapsibleNavBetaProps } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta';
 	export { EuiCollapsibleNavBeta } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_beta';
-	export type { EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemProps, EuiCollapsibleNavSubItemGroupTitle, } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item';
+	export type { EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemProps, } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item';
 	export { EuiCollapsibleNavItem } from '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav_item';
 
 }
@@ -11374,36 +11482,11 @@ declare module '@elastic/eui/src/components/filter_group/filter_select_item' {
 
 }
 declare module '@elastic/eui/src/components/text_truncate/utils' {
-	import type { ExclusiveUnion } from '@elastic/eui/src/components/common'; type CanvasTextParams = ExclusiveUnion<{
-	    container: HTMLElement;
-	}, {
-	    font: CanvasTextDrawingStyles['font'];
-	}>; type TruncationParams = CanvasTextParams & {
+	import { CanvasTextParams, CanvasTextUtils } from '@elastic/eui/src/services/canvas'; type TruncationParams = CanvasTextParams & {
 	    fullText: string;
 	    ellipsis: string;
 	    availableWidth: number;
 	};
-	/**
-	 * Under the hood, a temporary Canvas element is created for manipulating text
-	 * & determining text width.
-	 *
-	 * To accurately measure text, canvas rendering requires either a container to
-	 * compute/derive font styles from, or a static font string (useful for usage
-	 * outside the DOM). Particular care should be applied when fallback fonts are
-	 * used, as more fallback fonts can lead to less precision.
-	 *
-	 * Please note that while canvas is more significantly more performant than DOM
-	 * measurement, there are subpixel to single digit pixel differences between
-	 * DOM and canvas measurement due to the different rendering engines used.
-	 */
-	export class CanvasTextUtils {
-	    context: CanvasRenderingContext2D;
-	    currentText: string;
-	    constructor({ font, container }: CanvasTextParams);
-	    computeFontFromElement: (element: HTMLElement) => string;
-	    get textWidth(): number;
-	    setTextToCheck: (text: string) => void;
-	}
 	/**
 	 * Utilities for truncating types at various positions, as well as
 	 * determining whether truncation is possible or even necessary.
@@ -11535,7 +11618,7 @@ declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
 declare module '@elastic/eui/src/components/text_truncate' {
 	export type { EuiTextTruncateProps, EuiTextTruncationTypes, } from '@elastic/eui/src/components/text_truncate/text_truncate';
 	export { EuiTextTruncate } from '@elastic/eui/src/components/text_truncate/text_truncate';
-	export { CanvasTextUtils, TruncationUtils } from '@elastic/eui/src/components/text_truncate/utils';
+	export { TruncationUtils } from '@elastic/eui/src/components/text_truncate/utils';
 
 }
 declare module '@elastic/eui/src/components/combo_box/types' {
@@ -11608,13 +11691,11 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input' {
 	import React, { Component, ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
-	import AutosizeInput from 'react-input-autosize';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { htmlIdGenerator } from '@elastic/eui/src/services';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape, OptionHandler, UpdatePositionHandler } from '@elastic/eui/src/components/combo_box/types';
 	export interface EuiComboBoxInputProps<T> extends CommonProps {
-	    autoSizeInputRef?: RefCallback<AutosizeInput & HTMLInputElement>;
 	    compressed: boolean;
 	    focusedOptionId?: string;
 	    fullWidth?: boolean;
@@ -11649,17 +11730,20 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    'aria-labelledby'?: string;
 	}
 	interface EuiComboBoxInputState {
+	    inputWidth: number;
 	    hasFocus: boolean;
 	}
 	export class EuiComboBoxInput<T> extends Component<EuiComboBoxInputProps<T>, EuiComboBoxInputState> {
 	    state: EuiComboBoxInputState;
+	    private widthUtils?;
+	    inputRefCallback: (el: HTMLInputElement) => void;
+	    updateInputSize: (inputValue: string) => void;
 	    updatePosition: () => void;
 	    onFocus: FocusEventHandler<HTMLInputElement>;
 	    onBlur: FocusEventHandler<HTMLInputElement>;
 	    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
 	    componentDidUpdate(prevProps: EuiComboBoxInputProps<T>): void;
 	    inputOnChange: ChangeEventHandler<HTMLInputElement>;
-	    inputRefCallback: (ref: HTMLInputElement & AutosizeInput) => void;
 	    render(): React.JSX.Element;
 	}
 	export {};
@@ -11845,7 +11929,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	 * from the tab order with tabindex={-1} so that we can control the keyboard navigation interface.
 	 */
 	import React, { Component, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, RefCallback } from 'react';
-	import AutosizeInput from 'react-input-autosize';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form';
 	import { EuiFilterSelectItemClass } from '@elastic/eui/src/components/filter_group/filter_select_item';
@@ -11992,8 +12075,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    rootId: (idSuffix?: string) => string;
 	    comboBoxRefInstance: RefInstance<HTMLDivElement>;
 	    comboBoxRefCallback: RefCallback<HTMLDivElement>;
-	    autoSizeInputRefInstance: RefInstance<AutosizeInput & HTMLDivElement>;
-	    autoSizeInputRefCallback: RefCallback<AutosizeInput & HTMLDivElement>;
 	    searchInputRefInstance: RefInstance<HTMLInputElement>;
 	    searchInputRefCallback: RefCallback<HTMLInputElement>;
 	    listRefInstance: RefInstance<HTMLDivElement>;

package/i18ntokens.json

@@ -455,14 +455,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 152,
+        "line": 151,
         "column": 27,
-        "index": 5056
+        "index": 5087
       },
       "end": {
-        "line": 155,
+        "line": 154,
         "column": 3,
-        "index": 5126
+        "index": 5157
       }
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_beta.tsx"
@@ -977,14 +977,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 984,
+        "line": 970,
         "column": 10,
-        "index": 28518
+        "index": 28029
       },
       "end": {
-        "line": 987,
+        "line": 973,
         "column": 11,
-        "index": 28643
+        "index": 28154
       }
     },
     "filepath": "src/components/combo_box/combo_box.tsx"

package/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -15,6 +15,9 @@ var _header = require("../header/header.styles");
 var _context = require("./context");
 var _collapsible_nav_button = require("./collapsible_nav_button");
 var _collapsible_nav_beta = require("./collapsible_nav_beta.styles");
+var _collapsible_nav_body_footer = require("./collapsible_nav_body_footer");
+var _collapsible_nav_group = require("./collapsible_nav_group");
+var _collapsible_nav_item = require("./collapsible_nav_item");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "children", "className", "initialIsCollapsed", "onCollapseToggle", "width", "side", "focusTrapProps"];
 /*
@@ -45,7 +48,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
+var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   var id = _ref.id,
     children = _ref.children,
     className = _ref.className,
@@ -166,8 +169,11 @@ var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     "aria-controls": flyoutID
   }), !hideFlyout && flyout);
 };
-exports.EuiCollapsibleNavBeta = EuiCollapsibleNavBeta;
-EuiCollapsibleNavBeta.propTypes = {
+
+/**
+ * Combined export with subcomponents
+ */
+_EuiCollapsibleNavBeta.propTypes = {
   className: _propTypes.default.string,
   /**
        * Overlay flyouts are considered dialogs, and dialogs must have a label.
@@ -182,8 +188,9 @@ EuiCollapsibleNavBeta.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-       * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavItem`s.
-       * You may also want to use `EuiFlyoutBody` and `EuiFlyoutFooter` for organization.
+       * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavBeta.Item`s.
+       * You will likely want to use `EuiCollapsibleNavBeta.Body` and `EuiCollapsibleNavBeta.Footer`
+       * for organization.
        */
   children: _propTypes.default.node,
   /**
@@ -210,4 +217,11 @@ EuiCollapsibleNavBeta.propTypes = {
        * take up the full width of the page.
        */
   width: _propTypes.default.number
-};
+};
+var EuiCollapsibleNavBeta = Object.assign(_EuiCollapsibleNavBeta, {
+  Body: _collapsible_nav_body_footer.EuiCollapsibleNavBody,
+  Footer: _collapsible_nav_body_footer.EuiCollapsibleNavFooter,
+  Group: _collapsible_nav_group.EuiCollapsibleNavGroup,
+  Item: _collapsible_nav_item.EuiCollapsibleNavItem
+});
+exports.EuiCollapsibleNavBeta = EuiCollapsibleNavBeta;

package/lib/components/collapsible_nav_beta/collapsible_nav_beta.styles.js

@@ -8,21 +8,15 @@ var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _themes = require("../../themes");
 var _header = require("../header/header.styles");
-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
-                                                                                                                                                                                                                                                                                           * 2.0 and the Server Side Public License, v 1; you may not use this file except
-                                                                                                                                                                                                                                                                                           * 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: "1adm1dw-isPushCollapsed",
-  styles: "&,.euiFlyoutBody__overflow{scrollbar-width:none;&::-webkit-scrollbar{display:none;}};label:isPushCollapsed;"
-} : {
-  name: "1adm1dw-isPushCollapsed",
-  styles: "&,.euiFlyoutBody__overflow{scrollbar-width:none;&::-webkit-scrollbar{display:none;}};label:isPushCollapsed;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
+var _collapsible_nav_body_footer = require("./collapsible_nav_body_footer.styles");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
 var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
 
@@ -32,13 +26,11 @@ var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeC
   var defaultHeaderHeight = (0, _header.euiHeaderVariables)(euiThemeContext).height;
   var fixedHeaderOffset = "var(--euiFixedHeadersOffset, ".concat(defaultHeaderHeight, ")");
   return {
-    euiCollapsibleNavBeta: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', fixedHeaderOffset), (0, _global_styling.euiYScroll)(euiThemeContext, {
-      height: 'inherit'
-    }), (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), ".euiFlyoutBody{", (0, _global_styling.logicalCSS)('min-height', '50%'), ";}.euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;"),
+    euiCollapsibleNavBeta: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', fixedHeaderOffset), (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), ";;label:euiCollapsibleNavBeta;"),
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";;label:left;"),
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";;label:right;"),
     isPush: /*#__PURE__*/(0, _react.css)((0, _themes.euiShadowFlat)(euiThemeContext), ";;label:isPush;"),
-    isPushCollapsed: _ref,
+    isPushCollapsed: /*#__PURE__*/(0, _react.css)(_collapsible_nav_body_footer.euiCollapsibleNavBodyStyles._isPushCollapsed, ";;label:isPushCollapsed;"),
     isOverlayFullWidth: /*#__PURE__*/(0, _react.css)("&.euiFlyout{", (0, _global_styling.logicalCSS)('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };
 };