@elastic/eui 109.2.0 → 110.0.0

package/es/components/page_template/outer/page_outer.styles.js

@@ -9,39 +9,33 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../../global_styling';
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;"
-} : {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;"
-} : {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;"
-} : {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return {
-    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
-    ), ";;label:euiPageOuter;"),
-    // Grow
-    grow: _ref3,
-    // Direction
-    column: _ref2,
-    row: _ref
-  };
+export var euiPageOuterStyles = {
+  euiPageOuter: /*#__PURE__*/css("display:flex;flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+  ), ";;label:euiPageOuter;"),
+  // Grow
+  grow: process.env.NODE_ENV === "production" ? {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;"
+  } : {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  // Direction
+  column: process.env.NODE_ENV === "production" ? {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;"
+  } : {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  row: process.env.NODE_ENV === "production" ? {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;"
+  } : {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };

package/es/components/page_template/page_template.js

@@ -108,7 +108,8 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
       header: {
         restrictWidth: restrictWidth,
         paddingSize: paddingSize,
-        bottomBorder: headerBottomBorder
+        bottomBorder: headerBottomBorder,
+        color: panelled === false ? 'transparent' : 'plain'
       },
       section: {
         restrictWidth: restrictWidth,
@@ -165,7 +166,7 @@ _EuiPageTemplate.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
   /**
-         * Adds a white background and shadow to define the area.
+         * Adds a background and shadow to define the area.
          */
   panelled: PropTypes.bool,
   /**
@@ -313,6 +314,11 @@ _EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: PropTypes.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: PropTypes.oneOf(["plain", "transparent"]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/search_bar/search_bar.js

@@ -37,6 +37,12 @@ import { Query } from './query';
 import { euiSearchBar__searchHolder, euiSearchBar__filtersHolder } from './search_bar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export { Query, AST as Ast } from './query';
+
+/**
+ * When `searchFormat` is 'text', `query` is null and the search is performed
+ * on the `queryText` directly without EQL parsing
+ */
+
 var parseQuery = function parseQuery(query, props) {
   var _props$box, _props$box2;
   var schema = undefined;
@@ -242,15 +248,15 @@ _defineProperty(EuiSearchBar, "Query", Query);
 EuiSearchBar.propTypes = {
   onChange: PropTypes.func,
   /**
-     The initial query the bar will hold when first mounted
+     * The initial query the bar will hold when first mounted
      */
   defaultQuery: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
   /**
-     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: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
   /**
-     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: PropTypes.shape({
     name: PropTypes.string,
@@ -310,7 +316,7 @@ EuiSearchBar.propTypes = {
     }).isRequired, PropTypes.bool.isRequired])
   }),
   /**
-     An array of search filters. See {@link SearchFilterConfig}.
+     * An array of search filters. See {@link SearchFilterConfig}.
      */
   filters: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     type: PropTypes.oneOf(["is"]).isRequired,

package/es/components/selectable/selectable.js

@@ -91,6 +91,12 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
         _this.preventOnFocus = false;
         return;
       }
+      if (event && _this.props.searchable && event.target === _this.inputRef) {
+        _this.setState({
+          isFocused: true
+        });
+        return;
+      }
       if (!_this.state.visibleOptions.length || _this.state.activeOptionIndex != null) {
         return;
       }
@@ -466,8 +472,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
           onChange: _this2.onSearchChange,
           listId: _this2.optionsListRef.current ? _this2.listId : undefined // Only pass the listId if it exists on the page
           ,
-          "aria-activedescendant": _this2.makeOptionId(activeOptionIndex) // the current faux-focused option
-          ,
+          "aria-activedescendant": activeOptionIndex != null ? _this2.makeOptionId(activeOptionIndex) : undefined,
           placeholder: placeholderName,
           isPreFiltered: !!isPreFiltered,
           optionMatcher: optionMatcher,

package/es/services/string/to_initials.js

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+export var 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).
@@ -17,11 +19,20 @@
  * @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 var MAX_INITIALS = 2;
 export function toInitials(name, initialsLength, initials) {
+  // If `initials` provided, check if it's a single emoji
+  // in order to support complex, "multi-character" ones
+  if (initials && typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    var segmenter = new Intl.Segmenter('en', {
+      granularity: 'grapheme'
+    });
+    var segments = Array.from(segmenter.segment(initials));
+    if (segments.length === 1 && isEmoji(segments[0].segment)) {
+      return segments[0].segment;
+    }
+  }
+
   // Calculate the number of initials to show, maxing out at MAX_INITIALS
   var calculatedInitialsLength = initials ? initials.split('').length : name.split(' ').length;
   calculatedInitialsLength = calculatedInitialsLength > MAX_INITIALS ? MAX_INITIALS : calculatedInitialsLength;
@@ -44,5 +55,16 @@ export function toInitials(name, initialsLength, initials) {
       calculatedInitials = name.substring(0, calculatedInitialsLength);
     }
   }
-  return calculatedInitials;
+  return calculatedInitials || '';
+}
+function isEmoji(str) {
+  /**
+   * The \p escape sequence allows matching a character based on its Unicode properties
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape
+   * @see https://www.unicode.org/Public/UCD/latest/ucd/emoji/emoji-data.txt
+   * @see https://www.unicode.org/reports/tr51/#Definitions
+   * @see https://util.unicode.org/UnicodeJsps/character.jsp?a=1F440&B1=Show
+   */
+  var emojiRegex = /(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDFF\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFF]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])/;
+  return emojiRegex.test(str);
 }

package/eui.d.ts

@@ -8916,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).
@@ -8927,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' {
@@ -18421,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'> & {
 	    /**
@@ -18857,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';
 
@@ -21926,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>;
 
@@ -22133,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>;
 
@@ -22279,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;
@@ -22342,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;
 	    /**
@@ -24637,6 +24651,15 @@ declare module '@elastic/eui/src/components/search_bar/search_bar' {
 	    queryText: string;
 	    error: null;
 	}
+	/**
+	 * When `searchFormat` is 'text', `query` is null and the search is performed
+	 * on the `queryText` directly without EQL parsing
+	 */
+	interface ArgsWithPlainText {
+	    query: null;
+	    queryText: string;
+	    error: null;
+	}
 	interface ArgsWithError {
 	    query: null;
 	    queryText: string;
@@ -24648,26 +24671,26 @@ declare module '@elastic/eui/src/components/search_bar/search_bar' {
 	    flags?: string[];
 	    recognizedFields?: string[];
 	}
-	export type EuiSearchBarOnChangeArgs = ArgsWithQuery | ArgsWithError;
+	export type EuiSearchBarOnChangeArgs = ArgsWithQuery | ArgsWithPlainText | ArgsWithError;
 	type HintPopOverProps = Partial<Pick<EuiInputPopoverProps, 'isOpen' | 'closePopover' | 'fullWidth' | 'disableFocusTrap' | 'panelClassName' | 'panelPaddingSize' | 'panelStyle' | 'panelProps' | 'popoverScreenReaderText' | 'repositionOnScroll' | 'zIndex' | 'data-test-subj'>>;
 	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[];
 	    /**
@@ -25754,17 +25777,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;
 	    /**
@@ -25772,6 +25794,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).
@@ -25831,7 +25854,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[];