@elastic/eui 109.1.0 → 110.0.0-snapshot.1764684698664

package/eui.d.ts

@@ -1136,6 +1136,10 @@ declare module '@elastic/eui/src/global_styling/functions' {
 	export * from '@elastic/eui/src/global_styling/functions/size';
 	export * from '@elastic/eui/src/global_styling/functions/typography';
 
+}
+declare module '@elastic/eui/src/global_styling/utility/selectors' {
+	export const euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";
+
 }
 declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	import { type SerializedStyles } from '@emotion/react';
@@ -1387,6 +1391,10 @@ declare module '@elastic/eui/src/global_styling/mixins/_typography' {
 	 * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
 	 */
 	export const euiTextTruncate: (maxWidth?: CSSProperties["maxWidth"]) => string;
+	/**
+	 * Emotion CSS wrapper around `euiTextTruncate` style.
+	 */
+	export const euiTextTruncateCSS: (maxWidth?: CSSProperties["maxWidth"]) => import("@emotion/react").SerializedStyles;
 	/**
 	 * Fixed-width numbers for tabular data
 	 */
@@ -1514,10 +1522,6 @@ declare module '@elastic/eui/src/global_styling/utility/animations' {
 	export const euiAnimSlideX: (size: string) => import("@emotion/serialize").Keyframes;
 	export const euiAnimScale: import("@emotion/serialize").Keyframes;
 
-}
-declare module '@elastic/eui/src/global_styling/utility/selectors' {
-	export const euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";
-
 }
 declare module '@elastic/eui/src/global_styling' {
 	export * from '@elastic/eui/src/global_styling/reset/global_styles';
@@ -2049,6 +2053,12 @@ declare module '@elastic/eui/src/components/table/mobile/responsive_context' {
 	export const EuiTableIsResponsiveContext: import("react").Context<boolean>;
 	export const useEuiTableIsResponsive: () => boolean;
 
+}
+declare module '@elastic/eui/src/components/table/table_context' {
+	export const EuiTableVariantContext: import("react").Context<{
+	    hasBackground: boolean;
+	}>;
+
 }
 declare module '@elastic/eui/src/components/table/table.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -2073,6 +2083,7 @@ declare module '@elastic/eui/src/components/table/table.styles' {
 	        fixed: import("@emotion/react").SerializedStyles;
 	        auto: import("@emotion/react").SerializedStyles;
 	    };
+	    hasBackground: import("@emotion/react").SerializedStyles;
 	    /**
 	     * 1. The padding on the `.euiTableCellContent` div allows the ellipsis to show if the
 	     * content is truncated. If the padding was on the cell, the ellipsis would be cropped.
@@ -2109,8 +2120,14 @@ declare module '@elastic/eui/src/components/table/table' {
 	    responsiveBreakpoint?: EuiBreakpointSize | boolean;
 	    /**
 	     * Sets the table-layout CSS property
+	     * @default 'fixed'
 	     */
 	    tableLayout?: 'fixed' | 'auto';
+	    /**
+	     * Toggle the table's background
+	     * @default true
+	     */
+	    hasBackground?: boolean;
 	}
 	export const EuiTable: FunctionComponent<EuiTableProps>;
 
@@ -2496,7 +2513,10 @@ declare module '@elastic/eui/src/components/table/table_cells_shared.styles' {
 	    euiTableHeaderCell: import("@emotion/react").SerializedStyles;
 	    euiTableHeaderCell__content: import("@emotion/react").SerializedStyles;
 	    euiTableHeaderCell__button: import("@emotion/react").SerializedStyles;
-	    euiTableFooterCell: import("@emotion/react").SerializedStyles;
+	    euiTableFooterCell: {
+	        euiTableFooterCell: import("@emotion/react").SerializedStyles;
+	        hasBackground: import("@emotion/react").SerializedStyles;
+	    };
 	};
 	export const euiTableCellCheckboxStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTableHeaderCellCheckbox: import("@emotion/react").SerializedStyles;
@@ -5703,13 +5723,18 @@ declare module '@elastic/eui/src/components/table/table_row.styles' {
 	    euiTableRow: import("@emotion/react").SerializedStyles;
 	    desktop: {
 	        desktop: import("@emotion/react").SerializedStyles;
-	        expanded: import("@emotion/react").SerializedStyles;
+	        expanded: {
+	            expanded: import("@emotion/react").SerializedStyles;
+	            hasBackground: string;
+	        };
 	        clickable: import("@emotion/react").SerializedStyles;
 	        selected: import("@emotion/react").SerializedStyles;
 	        checkboxOffset: import("@emotion/react").SerializedStyles;
 	    };
 	    mobile: {
 	        mobile: import("@emotion/react").SerializedStyles;
+	        hasBorder: string;
+	        hasBackground: import("@emotion/react").SerializedStyles;
 	        selected: import("@emotion/react").SerializedStyles;
 	        /**
 	         * Left column offset (no border)
@@ -7369,6 +7394,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
 	    /**
 	     * Alignment of the popover and arrow relative to the button
+	     * @default downLeft
 	     */
 	    anchorPosition?: PopoverAnchorPosition;
 	    /**
@@ -7398,6 +7424,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    focusTrapProps?: Partial<EuiFocusTrapProps>;
 	    /**
 	     * Show arrow indicating to originating button
+	     * @default false
 	     */
 	    hasArrow?: boolean;
 	    /**
@@ -7475,6 +7502,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    zIndex?: number;
 	    /**
 	     * Distance away from the anchor that the popover will render
+	     * @default 4 (0 when `hasArrow=true`)
 	     */
 	    offset?: number;
 	    /**
@@ -8888,6 +8916,7 @@ declare module '@elastic/eui/src/services/sort' {
 
 }
 declare module '@elastic/eui/src/services/string/to_initials' {
+	export const MAX_INITIALS = 2;
 	/**
 	 * This function calculates the initials/acronym for a given name.
 	 * It defaults to only 2 characters and will take the first character (of each word).
@@ -8899,10 +8928,8 @@ declare module '@elastic/eui/src/services/string/to_initials' {
 	 * @param {string} name The full name of the item to turn into initials
 	 * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
 	 * @param {string} initials (Optional) Custom initials (max 2 characters)
-	 * @returns {string} True if the color is dark, false otherwise.
 	 */
-	export const MAX_INITIALS = 2;
-	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string | null;
+	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string;
 
 }
 declare module '@elastic/eui/src/services/string/to_case' {
@@ -18393,7 +18420,12 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
 	 * `customRender` render function.
 	 */
 	type TimeZoneCustomDisplayRenderOptions = {
+	    /** Name with UTC offset and an icon */
 	    nameDisplay?: ReactNode;
+	    /** UTC offset in hours, in plain text e.g. UTC+1 */
+	    utcOffset?: string;
+	    /** Time zone name e.g. Europe/Brussels */
+	    timeZoneName?: string;
 	};
 	export type EuiTimeZoneDisplayProps = ComponentPropsWithoutRef<'div'> & {
 	    /**
@@ -18556,7 +18588,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
 	    isQuickSelectOnly: import("@emotion/react").SerializedStyles;
 	    euiSuperDatePicker__range: import("@emotion/react").SerializedStyles;
 	    euiSuperDatePicker__rangeInput: import("@emotion/react").SerializedStyles;
-	    euiSuperDatePicker__prettyFormat: import("@emotion/react").SerializedStyles;
+	    euiSuperDatePicker__prettyDurationTooltip: import("@emotion/react").SerializedStyles;
 	    states: {
 	        euiSuperDatePicker__formControlLayout: import("@emotion/react").SerializedStyles;
 	        default: import("@emotion/react").SerializedStyles;
@@ -18829,6 +18861,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_
 	export { EuiQuickSelectPopover } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover';
 	export type { EuiQuickSelectProps } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select';
 	export { EuiQuickSelect } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select';
+	export { EuiQuickSelectPanel } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel';
 	export type { EuiRecentlyUsedProps } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used';
 	export { EuiRecentlyUsed } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used';
 
@@ -21898,6 +21931,11 @@ declare module '@elastic/eui/src/components/page/page' {
 	     * Flip to `column` when not including a sidebar.
 	     */
 	    direction?: 'row' | 'column';
+	    /**
+	     * Defines the page background color.
+	     * @default 'transparent'
+	     */
+	    color?: 'plain' | 'transparent';
 	}
 	export const EuiPage: FunctionComponent<EuiPageProps>;
 
@@ -22105,6 +22143,11 @@ declare module '@elastic/eui/src/components/page/page_header/page_header' {
 	     * Adjust the overall padding.
 	     */
 	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Define the header background color
+	     * @default 'transparent'
+	     */
+	    color?: 'plain' | 'transparent';
 	}
 	export const EuiPageHeader: FunctionComponent<EuiPageHeaderProps>;
 
@@ -22251,8 +22294,7 @@ declare module '@elastic/eui/src/components/page' {
 
 }
 declare module '@elastic/eui/src/components/page_template/outer/page_outer.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiPageOuterStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiPageOuterStyles: {
 	    euiPageOuter: import("@emotion/react").SerializedStyles;
 	    grow: import("@emotion/react").SerializedStyles;
 	    column: import("@emotion/react").SerializedStyles;
@@ -22314,7 +22356,7 @@ declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
 	     */
 	    component?: T;
 	    /**
-	     * Adds a white background and shadow to define the area.
+	     * Adds a background and shadow to define the area.
 	     */
 	    panelled?: boolean;
 	    /**
@@ -24625,21 +24667,21 @@ declare module '@elastic/eui/src/components/search_bar/search_bar' {
 	export interface EuiSearchBarProps extends CommonProps {
 	    onChange?: (args: EuiSearchBarOnChangeArgs) => void | boolean;
 	    /**
-	     The initial query the bar will hold when first mounted
+	     * The initial query the bar will hold when first mounted
 	     */
 	    defaultQuery?: QueryType;
 	    /**
-	     If you wish to use the search bar as a controlled component, continuously pass the query via this prop.
+	     * If you wish to use the search bar as a controlled component, continuously pass the query via this prop.
 	     */
 	    query?: QueryType;
 	    /**
-	     Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search.
+	     * Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search.
 	     */
 	    box?: EuiFieldSearchProps & {
 	        schema?: SchemaType | boolean;
 	    };
 	    /**
-	     An array of search filters. See {@link SearchFilterConfig}.
+	     * An array of search filters. See {@link SearchFilterConfig}.
 	     */
 	    filters?: SearchFilterConfig[];
 	    /**
@@ -25386,7 +25428,8 @@ declare module '@elastic/eui/src/components/tour/tour_step' {
 	     */
 	    title: ReactNode;
 	    /**
-	     * Extra visual indication of step location
+	     * Extra visual indication of step location.
+	     * It does not apply when `hasArrow=false`
 	     */
 	    decoration?: 'none' | 'beacon';
 	    /**
@@ -25706,12 +25749,15 @@ declare module '@elastic/eui/src/components/basic_table/in_memory_table' {
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiTablePaginationProps } from '@elastic/eui/src/components/table/table_pagination';
 	import { EuiComponentDefaults } from '@elastic/eui/src/components/provider/component_defaults';
-	interface onChangeArgument {
+	export interface EuiInMemoryTableSearchBarOnChangeArgs {
 	    query: Query | null;
 	    queryText: string;
 	    error: Error | null;
 	}
-	export type Search = boolean | EuiSearchBarProps;
+	export interface EuiInMemoryTableSearchBarProps extends Omit<EuiSearchBarProps, 'onChange'> {
+	    onChange?: (args: EuiInMemoryTableSearchBarOnChangeArgs) => void | boolean;
+	}
+	export type Search = boolean | EuiInMemoryTableSearchBarProps;
 	interface PaginationOptions extends EuiTablePaginationProps {
 	    pageSizeOptions?: number[];
 	    initialPageIndex?: number;
@@ -25725,17 +25771,16 @@ declare module '@elastic/eui/src/components/basic_table/in_memory_table' {
 	}
 	type Sorting = boolean | SortingOptions;
 	type InMemoryTableProps<T extends object> = Omit<EuiBasicTableProps<T>, 'pagination' | 'sorting' | 'noItemsMessage' | 'onChange'> & {
-	    /**
-	     * Message to display if table is empty
-	     * @deprecated Use `noItemsMessage` instead.
-	     */
-	    message?: ReactNode;
 	    /**
 	     * Message to display if table is empty
 	     */
 	    noItemsMessage?: ReactNode;
 	    /**
-	     * Configures {@link Search}.
+	     * Configures the search bar. Can be `true` for defaults,
+	     * or an {@link EuiSearchBarProps} object.
+	     *
+	     * When `searchFormat="text"`, `query` and `defaultQuery` must be strings
+	     * ({@link Query} objects are ignored).
 	     */
 	    search?: Search;
 	    /**
@@ -25743,6 +25788,7 @@ declare module '@elastic/eui/src/components/basic_table/in_memory_table' {
 	     *
 	     * However, certain special characters (such as quotes, parentheses, and colons)
 	     * are reserved for EQL syntax and will error if used.
+	     *
 	     * If your table does not require filter search and instead requires searching for certain
 	     * symbols, use a plain `text` search format instead (note that filters will be ignored
 	     * in this format).
@@ -25802,7 +25848,7 @@ declare module '@elastic/eui/src/components/basic_table/in_memory_table' {
 	        search?: Search;
 	    };
 	    search?: Search;
-	    query: Query | null;
+	    query: Query | string | null;
 	    pageIndex: number;
 	    pageSize?: number;
 	    pageSizeOptions?: number[];
@@ -25820,7 +25866,7 @@ declare module '@elastic/eui/src/components/basic_table/in_memory_table' {
 	    static getDerivedStateFromProps<T extends object>(nextProps: EuiInMemoryTableProps<T>, prevState: State<T>): State<T> | null;
 	    constructor(props: EuiInMemoryTableProps<T>, context: EuiComponentDefaults);
 	    onTableChange: ({ page, sort }: Criteria<T>) => void;
-	    onQueryChange: ({ query, queryText, error }: onChangeArgument) => void;
+	    onQueryChange: ({ query, queryText, error, }: EuiInMemoryTableSearchBarOnChangeArgs) => void;
 	    onPlainTextSearch: (searchValue: string) => void;
 	    renderSearchBar(): React.JSX.Element | undefined;
 	    resolveSearchSchema(): SchemaType;
@@ -25837,7 +25883,7 @@ declare module '@elastic/eui/src/components/basic_table/in_memory_table' {
 declare module '@elastic/eui/src/components/basic_table' {
 	export type { EuiBasicTableProps, EuiBasicTableColumn, Criteria, CriteriaWithPagination, } from '@elastic/eui/src/components/basic_table/basic_table';
 	export { EuiBasicTable } from '@elastic/eui/src/components/basic_table/basic_table';
-	export type { EuiInMemoryTableProps, Search } from '@elastic/eui/src/components/basic_table/in_memory_table';
+	export type { EuiInMemoryTableProps, EuiInMemoryTableSearchBarOnChangeArgs, EuiInMemoryTableSearchBarProps, Search, } from '@elastic/eui/src/components/basic_table/in_memory_table';
 	export { EuiInMemoryTable } from '@elastic/eui/src/components/basic_table/in_memory_table';
 	export type { EuiTableDataType, EuiTableFooterProps, EuiTableFieldDataColumnType, EuiTableComputedColumnType, EuiTableActionsColumnType, EuiTableSelectionType, EuiTableSortingType, } from '@elastic/eui/src/components/basic_table/table_types';
 	export type { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';

package/lib/components/basic_table/basic_table.js

@@ -26,7 +26,7 @@ var _delay_render = require("../delay_render");
 var _accessibility2 = require("../../services/accessibility");
 var _basic_table = require("./basic_table.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions", "nameTooltip"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -376,6 +376,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         tableCaption = _this$props2.tableCaption,
         rowHeader = _this$props2.rowHeader,
         tableLayout = _this$props2.tableLayout,
+        hasBackground = _this$props2.hasBackground,
         rest = _objectWithoutProperties(_this$props2, _excluded);
       var classes = (0, _classnames.default)('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -393,6 +394,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         compressed = _this$props3.compressed,
         responsiveBreakpoint = _this$props3.responsiveBreakpoint,
         tableLayout = _this$props3.tableLayout,
+        hasBackground = _this$props3.hasBackground,
         loading = _this$props3.loading;
       return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
@@ -401,6 +403,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         tableLayout: tableLayout,
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
+        hasBackground: hasBackground,
         css: loading && _basic_table.safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }