@elastic/eui 77.1.0 → 77.2.0

package/eui.d.ts

@@ -2582,8 +2582,7 @@ declare module '@elastic/eui/src/components/button/button_empty/button_empty' {
 	     * Object of props passed to the <span/> wrapping the button's content
 	     */
 	    contentProps?: CommonProps & EuiButtonContentType;
-	} type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>;
-	export type EuiButtonEmptyPropsForButton = PropsForButton<CommonEuiButtonEmptyProps>;
+	} type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>; type EuiButtonEmptyPropsForButton = PropsForButton<CommonEuiButtonEmptyProps>;
 	export type EuiButtonEmptyProps = ExclusiveUnion<EuiButtonEmptyPropsForAnchor, EuiButtonEmptyPropsForButton>;
 	export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps>;
 	export {};
@@ -3220,6 +3219,41 @@ declare module '@elastic/eui/src/components/form/described_form_group' {
 	export type { EuiDescribedFormGroupProps } from '@elastic/eui/src/components/form/described_form_group/described_form_group';
 	export { EuiDescribedFormGroup } from '@elastic/eui/src/components/form/described_form_group/described_form_group';
 
+}
+declare module '@elastic/eui/src/components/form/validatable_control/validatable_control' {
+	import { ReactElement, Ref, FunctionComponent } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export interface HTMLConstraintValidityElement extends Element {
+	    setCustomValidity: (error: string) => void;
+	}
+	export interface ReactElementWithRef extends ReactElement {
+	    ref?: Ref<HTMLConstraintValidityElement>;
+	}
+	/**
+	 * The `EuiValidatableControl` component should be used in scenarios where
+	 * we can render the validated `<input>` as its direct child.
+	 */
+	export interface EuiValidatableControlProps {
+	    isInvalid?: boolean;
+	    children: ReactElementWithRef;
+	}
+	export const EuiValidatableControl: FunctionComponent<CommonProps & EuiValidatableControlProps>;
+	/**
+	 * The `UseEuiValidatableControl` hook should be used in scenarios where
+	 * we *cannot* control where the validated `<input>` is rendered (e.g., ReactDatePicker)
+	 * and instead need to access the input via a ref and pass the element in directly
+	 */
+	export interface UseEuiValidatableControlProps {
+	    isInvalid?: boolean;
+	    controlEl: HTMLInputElement | HTMLConstraintValidityElement | null;
+	}
+	export const useEuiValidatableControl: ({ isInvalid, controlEl, }: UseEuiValidatableControlProps) => void;
+
+}
+declare module '@elastic/eui/src/components/form/validatable_control' {
+	export type { EuiValidatableControlProps, UseEuiValidatableControlProps, } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
+	export { EuiValidatableControl, useEuiValidatableControl, } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
+
 }
 declare module '@elastic/eui/src/components/form/form_control_layout/form_control_layout_clear_button' {
 	import { FunctionComponent, ButtonHTMLAttributes } from 'react';
@@ -3249,7 +3283,8 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	import { EuiFormControlLayoutCustomIconProps } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_custom_icon';
 	import { IconColor, IconType } from '@elastic/eui/src/components/icon';
 	import { DistributiveOmit } from '@elastic/eui/src/components/common';
-	export const ICON_SIDES: ['left', 'right']; type IconShape = DistributiveOmit<EuiFormControlLayoutCustomIconProps, 'type' | 'iconRef'> & {
+	export const ICON_SIDES: readonly ["left", "right"];
+	export type IconShape = DistributiveOmit<EuiFormControlLayoutCustomIconProps, 'type' | 'iconRef'> & {
 	    type: IconType;
 	    side?: typeof ICON_SIDES[number];
 	    color?: IconColor;
@@ -3257,6 +3292,8 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	};
 	export interface EuiFormControlLayoutIconsProps {
 	    icon?: IconType | IconShape;
+	    side?: typeof ICON_SIDES[number];
+	    iconsPosition?: 'absolute' | 'static';
 	    clear?: EuiFormControlLayoutClearButtonProps;
 	    isLoading?: boolean;
 	    isInvalid?: boolean;
@@ -3271,7 +3308,6 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	    renderClearButton(): JSX.Element | null;
 	    renderInvalidIcon(): JSX.Element | null;
 	}
-	export {};
 
 }
 declare module '@elastic/eui/src/components/form/form_label/form_label' {
@@ -3310,8 +3346,7 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	import React, { Component, HTMLAttributes, ReactElement, ReactNode } from 'react';
 	import { EuiFormControlLayoutIconsProps } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_icons';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { FormContextValue } from '@elastic/eui/src/components/form/eui_form_context';
-	export { ICON_SIDES } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_icons'; type StringOrReactElement = string | ReactElement; type PrependAppendType = StringOrReactElement | StringOrReactElement[];
+	import { FormContextValue } from '@elastic/eui/src/components/form/eui_form_context'; type StringOrReactElement = string | ReactElement; type PrependAppendType = StringOrReactElement | StringOrReactElement[];
 	export type EuiFormControlLayoutProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    /**
 	     * Creates an input group with element(s) coming before children.
@@ -3325,6 +3360,7 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	    append?: PrependAppendType;
 	    children?: ReactNode;
 	    icon?: EuiFormControlLayoutIconsProps['icon'];
+	    iconsPosition?: EuiFormControlLayoutIconsProps['iconsPosition'];
 	    clear?: EuiFormControlLayoutIconsProps['clear'];
 	    /**
 	     * Expand to fill 100% of the parent.
@@ -3350,10 +3386,13 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
 	    static contextType: React.Context<FormContextValue>;
 	    render(): JSX.Element;
+	    renderLeftIcons: () => JSX.Element | null;
+	    renderRightIcons: () => JSX.Element | null;
 	    renderSideNode(side: 'append' | 'prepend', nodes?: PrependAppendType, inputId?: string): JSX.Element | JSX.Element[] | undefined;
 	    createFormLabel(side: 'append' | 'prepend', string: string, inputId?: string): JSX.Element;
 	    createSideNode(side: 'append' | 'prepend', node: ReactElement, key: React.Key): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 	}
+	export {};
 
 }
 declare module '@elastic/eui/src/components/form/form_control_layout/form_control_layout_delimited' {
@@ -3384,41 +3423,6 @@ declare module '@elastic/eui/src/components/form/form_control_layout' {
 	export type { EuiFormControlLayoutDelimitedProps } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_delimited';
 	export { EuiFormControlLayoutDelimited } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_delimited';
 
-}
-declare module '@elastic/eui/src/components/form/validatable_control/validatable_control' {
-	import { ReactElement, Ref, FunctionComponent } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export interface HTMLConstraintValidityElement extends Element {
-	    setCustomValidity: (error: string) => void;
-	}
-	export interface ReactElementWithRef extends ReactElement {
-	    ref?: Ref<HTMLConstraintValidityElement>;
-	}
-	/**
-	 * The `EuiValidatableControl` component should be used in scenarios where
-	 * we can render the validated `<input>` as its direct child.
-	 */
-	export interface EuiValidatableControlProps {
-	    isInvalid?: boolean;
-	    children: ReactElementWithRef;
-	}
-	export const EuiValidatableControl: FunctionComponent<CommonProps & EuiValidatableControlProps>;
-	/**
-	 * The `UseEuiValidatableControl` hook should be used in scenarios where
-	 * we *cannot* control where the validated `<input>` is rendered (e.g., ReactDatePicker)
-	 * and instead need to access the input via a ref and pass the element in directly
-	 */
-	export interface UseEuiValidatableControlProps {
-	    isInvalid?: boolean;
-	    controlEl: HTMLInputElement | HTMLConstraintValidityElement | null;
-	}
-	export const useEuiValidatableControl: ({ isInvalid, controlEl, }: UseEuiValidatableControlProps) => void;
-
-}
-declare module '@elastic/eui/src/components/form/validatable_control' {
-	export type { EuiValidatableControlProps, UseEuiValidatableControlProps, } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
-	export { EuiValidatableControl, useEuiValidatableControl, } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
-
 }
 declare module '@elastic/eui/src/components/form/form_control_layout/_num_icons' {
 	/**
@@ -3445,8 +3449,8 @@ declare module '@elastic/eui/src/components/form/form_control_layout/_num_icons'
 declare module '@elastic/eui/src/components/form/field_number/field_number' {
 	import { InputHTMLAttributes, Ref, FunctionComponent } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	import { IconType } from '@elastic/eui/src/components/icon';
+	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	export type EuiFieldNumberProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'min' | 'max' | 'readOnly' | 'step'> & CommonProps & {
 	    icon?: IconType;
 	    isInvalid?: boolean;
@@ -5425,7 +5429,6 @@ declare module '@elastic/eui/src/components/form/range/range_input' {
 	import type { _SingleRangeValue, _SharedRangeInputSide } from '@elastic/eui/src/components/form/range/types';
 	export interface EuiRangeInputProps extends Omit<EuiFieldNumberProps, 'max' | 'min' | 'value' | 'step'>, Omit<_SingleRangeValue, 'onChange'>, _SharedRangeInputSide {
 	    autoSize?: boolean;
-	    digitTolerance: number;
 	}
 	export const EuiRangeInput: FunctionComponent<EuiRangeInputProps>;
 
@@ -13808,6 +13811,11 @@ declare module '@elastic/eui/src/components/date_picker/date_picker' {
 	     * **Use [EuiPopover](/#/layout/popover) values**: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'.
 	     */
 	    popoverPlacement?: PopoverAnchorPosition;
+	    /**
+	     * Completely removes form control layout wrapper and ignores
+	     * iconType. Best used inside EuiFormControlLayoutDelimited.
+	     */
+	    controlOnly?: boolean;
 	}
 	export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
 	export const EuiDatePicker: FunctionComponent<EuiDatePickerProps>;
@@ -14424,9 +14432,10 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/async_
 }
 declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	import { FocusEventHandler, FunctionComponent, ReactNode, ReactElement } from 'react';
+	import { EuiFormControlLayoutDelimitedProps } from '@elastic/eui/src/components/form';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	export type EuiDatePickerRangeProps = CommonProps & {
+	export type EuiDatePickerRangeProps = CommonProps & Pick<EuiFormControlLayoutDelimitedProps, 'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append'> & {
 	    /**
 	     * Including any children will replace all innards with the provided children
 	     */
@@ -14447,22 +14456,10 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     * Won't apply any additional props to start and end date components
 	     */
 	    isCustom?: boolean;
-	    /**
-	     * Will color the range delimiter the `danger` color and pass through to each control
-	     */
-	    isInvalid?: boolean;
 	    /**
 	     * Passes through to each control
 	     */
 	    disabled?: boolean;
-	    /**
-	     * Passes through to each control
-	     */
-	    readOnly?: boolean;
-	    /**
-	     * Passes through to each control
-	     */
-	    fullWidth?: boolean;
 	    /**
 	     * Triggered whenever the start or end controls are blurred
 	     */
@@ -14762,6 +14759,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
 	    onRefreshChange: ApplyRefreshInterval;
 	    stopInterval: () => void;
 	    startInterval: (refreshInterval: number) => void;
+	    renderQuickSelect: () => JSX.Element;
 	    renderDatePickerRange: () => JSX.Element;
 	    handleClickUpdateButton: () => void;
 	    renderUpdateButton: () => JSX.Element | null;
@@ -15621,113 +15619,6 @@ declare module '@elastic/eui/src/components/image' {
 	export type { EuiImageProps } from '@elastic/eui/src/components/image/image_types';
 	export { EuiImage } from '@elastic/eui/src/components/image/image';
 
-}
-declare module '@elastic/eui/src/components/inline_edit/inline_edit_form' {
-	import { ReactNode, FunctionComponent } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiFieldTextProps } from '@elastic/eui/src/components/form';
-	import { EuiButtonEmptyProps } from '@elastic/eui/src/components/button';
-	import { EuiButtonEmptyPropsForButton } from '@elastic/eui/src/components/button/button_empty/button_empty';
-	export type EuiInlineEditCommonProps = CommonProps & {
-	    defaultValue: string;
-	    /**
-	     * Allow users to pass in a function that is called when the confirm button is clicked
-	     * The function should return a boolean flag that will determine if the value will be saved.
-	     * When the flag is true, the value will be saved. When the flag is false, the user will be
-	     * returned to editMode.
-	     */
-	    onConfirm?: () => boolean;
-	    /**
-	     * Form label that appears above the form control
-	     * This is required for accessibility because there is no visual label on the input
-	     */
-	    inputAriaLabel: string;
-	    /**
-	     * Aria-label for save button in editMode
-	     */
-	    saveButtonAriaLabel?: string;
-	    /**
-	     * Aria-label for cancel button in editMode
-	     */
-	    cancelButtonAriaLabel?: string;
-	    /**
-	     * Start in editMode
-	     */
-	    startWithEditOpen?: boolean;
-	    /**
-	     * Props that will be applied directly to the EuiEmptyButton displayed in readMode
-	     */
-	    readModeProps?: Omit<EuiButtonEmptyPropsForButton, 'onClick'>;
-	    /**
-	     * Props that will be applied directly to the EuiFieldText displayed in editMode
-	     */
-	    editModeProps?: EuiFieldTextProps;
-	};
-	export type EuiInlineEditFormProps = EuiInlineEditCommonProps & {
-	    /**
-	     * Form sizes
-	     */
-	    sizes: {
-	        compressed: boolean;
-	        buttonSize: EuiButtonEmptyProps['size'];
-	        iconSize: EuiButtonEmptyProps['iconSize'];
-	    };
-	    /**
-	     * Render prop that returns the read mode value as an arg
-	     */
-	    children: (readModeValue: ReactNode) => ReactNode;
-	};
-	export const SMALL_SIZE_FORM: {
-	    readonly iconSize: "s";
-	    readonly compressed: true;
-	    readonly buttonSize: "s";
-	};
-	export const MEDIUM_SIZE_FORM: {
-	    readonly iconSize: "m";
-	    readonly compressed: false;
-	    readonly buttonSize: "m";
-	};
-	export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps>;
-
-}
-declare module '@elastic/eui/src/components/inline_edit/inline_edit_text' {
-	import { FunctionComponent } from 'react';
-	import { EuiTextProps } from '@elastic/eui/src/components/text';
-	import { EuiInlineEditCommonProps } from '@elastic/eui/src/components/inline_edit/inline_edit_form';
-	export type EuiInlineEditTextSizes = Exclude<EuiTextProps['size'], 'relative'>;
-	export type EuiInlineEditTextProps = EuiInlineEditCommonProps & {
-	    /**
-	     * Text size level
-	     */
-	    size?: EuiInlineEditTextSizes;
-	};
-	export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps>;
-
-}
-declare module '@elastic/eui/src/components/inline_edit/inline_edit_title' {
-	import { FunctionComponent } from 'react';
-	import { EuiTitleSize } from '@elastic/eui/src/components/title';
-	import { EuiInlineEditCommonProps } from '@elastic/eui/src/components/inline_edit/inline_edit_form';
-	export const HEADINGS: readonly ["h1", "h2", "h3", "h4", "h5", "h6"]; type Heading = typeof HEADINGS[number];
-	export type EuiInlineEditTitleProps = EuiInlineEditCommonProps & {
-	    /**
-	     * Title size level
-	     */
-	    size?: EuiTitleSize;
-	    /**
-	     * Level of heading to be used for the title
-	     */
-	    heading: Heading;
-	};
-	export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps>;
-	export {};
-
-}
-declare module '@elastic/eui/src/components/inline_edit' {
-	export { EuiInlineEditText } from '@elastic/eui/src/components/inline_edit/inline_edit_text';
-	export { EuiInlineEditTitle } from '@elastic/eui/src/components/inline_edit/inline_edit_title';
-	export type { EuiInlineEditTextSizes } from '@elastic/eui/src/components/inline_edit/inline_edit_text';
-
 }
 declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -21487,7 +21378,6 @@ declare module '@elastic/eui/src/components' {
 	export * from '@elastic/eui/src/components/icon';
 	export * from '@elastic/eui/src/components/image';
 	export * from '@elastic/eui/src/components/inner_text';
-	export * from '@elastic/eui/src/components/inline_edit';
 	export * from '@elastic/eui/src/components/i18n';
 	export * from '@elastic/eui/src/components/loading';
 	export * from '@elastic/eui/src/components/key_pad_menu';
@@ -26231,13 +26121,6 @@ declare module '@elastic/eui/src/components/icon/assets/wrench' {
 	export const icon: ({ title, titleId, ...props }: React.SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
 	export {};
 
-}
-declare module '@elastic/eui/src/components/inline_edit/inline_edit.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiInlineEditStyles: ({ euiTheme }: UseEuiTheme) => {
-	    euiInlineEdit: import("@emotion/utils").SerializedStyles;
-	};
-
 }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -26573,6 +26456,7 @@ declare module '@elastic/eui' {
 "euiFilePicker.clearSelectedFiles": any;
 "euiFilePicker.removeSelected": any;
 "euiFormControlLayoutClearButton.label": any;
+"euiFormControlLayoutDelimited.delimiterLabel": any;
 "euiForm.addressFormErrors": any;
 "euiDualRange.sliderScreenReaderInstructions": any;
 "euiRange.sliderScreenReaderInstructions": any;
@@ -26582,8 +26466,6 @@ declare module '@elastic/eui' {
 "euiHeaderLinks.appNavigation": any;
 "euiImageButton.openFullScreen": any;
 "euiImageButton.closeFullScreen": any;
-"euiInlineEditForm.saveButtonAriaLabel": any;
-"euiInlineEditForm.cancelButtonAriaLabel": any;
 "euiLink.newTarget.screenReaderOnlyText": any;
 "euiLink.external.ariaLabel": any;
 "euiPinnableListGroup.pinExtraActionLabel": any;

package/i18ntokens.json

@@ -4805,6 +4805,24 @@
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_clear_button.tsx"
   },
+  {
+    "token": "euiFormControlLayoutDelimited.delimiterLabel",
+    "defString": "to",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 87,
+        "column": 27,
+        "index": 2215
+      },
+      "end": {
+        "line": 90,
+        "column": 3,
+        "index": 2291
+      }
+    },
+    "filepath": "src/components/form/form_control_layout/form_control_layout_delimited.tsx"
+  },
   {
     "token": "euiForm.addressFormErrors",
     "defString": "Please address the highlighted errors.",
@@ -4829,14 +4847,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 571,
+        "line": 568,
         "column": 6,
-        "index": 17705
+        "index": 17548
       },
       "end": {
-        "line": 574,
+        "line": 571,
         "column": 8,
-        "index": 17940
+        "index": 17783
       }
     },
     "filepath": "src/components/form/range/dual_range.tsx"
@@ -4847,14 +4865,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 184,
+        "line": 182,
         "column": 6,
-        "index": 4950
+        "index": 4833
       },
       "end": {
-        "line": 187,
+        "line": 185,
         "column": 8,
-        "index": 5127
+        "index": 5010
       }
     },
     "filepath": "src/components/form/range/range.tsx"
@@ -4967,42 +4985,6 @@
     },
     "filepath": "src/components/image/image_button.tsx"
   },
-  {
-    "token": "euiInlineEditForm.saveButtonAriaLabel",
-    "defString": "Save edit",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 105,
-        "column": 37,
-        "index": 3359
-      },
-      "end": {
-        "line": 108,
-        "column": 3,
-        "index": 3435
-      }
-    },
-    "filepath": "src/components/inline_edit/inline_edit_form.tsx"
-  },
-  {
-    "token": "euiInlineEditForm.cancelButtonAriaLabel",
-    "defString": "Cancel edit",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 109,
-        "column": 39,
-        "index": 3476
-      },
-      "end": {
-        "line": 112,
-        "column": 3,
-        "index": 3556
-      }
-    },
-    "filepath": "src/components/inline_edit/inline_edit_form.tsx"
-  },
   {
     "token": "euiLink.newTarget.screenReaderOnlyText",
     "defString": "(opens in a new tab or window)",