@elastic/eui 109.2.0 → 110.0.0-snapshot.1764684698664

package/test-env/components/page/page.js

@@ -15,7 +15,7 @@ var _global_styling = require("../../global_styling");
 var _page = require("./page.styles");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction"];
+var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,13 +34,16 @@ var EuiPage = exports.EuiPage = function EuiPage(_ref) {
     grow = _ref$grow === void 0 ? true : _ref$grow,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _page.euiPageStyles)(euiTheme);
   var padding = (0, _global_styling.useEuiPaddingCSS)()[paddingSize];
-  var stylesCSS = [styles.euiPage, styles[direction], grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
+  var backgroundColor = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var stylesCSS = [styles.euiPage, styles[direction], backgroundColor, grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
   var classes = (0, _classnames.default)('euiPage', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: stylesCSS,
@@ -65,6 +68,11 @@ EuiPage.propTypes = {
      * Flip to `column` when not including a sidebar.
      */
   direction: _propTypes.default.oneOf(["row", "column"]),
+  /**
+     * Defines the page background color.
+     * @default 'transparent'
+     */
+  color: _propTypes.default.oneOf(["plain", "transparent"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/page/page.styles.js

@@ -30,9 +30,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiPageStyles = exports.euiPageStyles = function euiPageStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiPage: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPage;"),
+    euiPage: /*#__PURE__*/(0, _react.css)("display:flex;flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPage;"),
     // Grow
     grow: _ref2,
     // Direction

package/test-env/components/page/page_header/page_header.js

@@ -15,7 +15,7 @@ var _global_styling = require("../../../global_styling");
 var _page_header_content = require("./page_header_content");
 var _page_header = require("./page_header.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
+var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "color", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,6 +30,8 @@ var EuiPageHeader = exports.EuiPageHeader = function EuiPageHeader(_ref) {
     _ref$paddingSize = _ref.paddingSize,
     paddingSize = _ref$paddingSize === void 0 ? 'none' : _ref$paddingSize,
     bottomBorder = _ref.bottomBorder,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     alignItems = _ref.alignItems,
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? true : _ref$responsive,
@@ -49,7 +51,8 @@ var EuiPageHeader = exports.EuiPageHeader = function EuiPageHeader(_ref) {
   var useTheme = (0, _services.useEuiTheme)();
   var styles = (0, _page_header.euiPageHeaderStyles)(useTheme);
   var inlinePadding = (0, _global_styling.useEuiPaddingCSS)('horizontal');
-  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border];
+  var backgroundColor = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, backgroundColor];
   var classes = (0, _classnames.default)('euiPageHeader', className);
   var contentProps = {
     restrictWidth: restrictWidth,
@@ -81,6 +84,11 @@ EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: _propTypes.default.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: _propTypes.default.oneOf(["plain", "transparent"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/page_template/outer/page_outer.js

@@ -30,8 +30,7 @@ var _EuiPageOuter = exports._EuiPageOuter = function _EuiPageOuter(_ref) {
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var themeContext = (0, _services.useEuiTheme)();
-  var styles = (0, _page_outer.euiPageOuterStyles)(themeContext);
+  var styles = _page_outer.euiPageOuterStyles;
   var isResponding = (0, _services.useIsWithinBreakpoints)(responsive);
   var cssStyles = [styles.euiPageOuter, styles[isResponding ? 'column' : direction], grow && styles.grow];
   return (0, _react2.jsx)("div", (0, _extends2.default)({

package/test-env/components/page_template/outer/page_outer.styles.js

@@ -13,39 +13,33 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "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__
-};
-var euiPageOuterStyles = exports.euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return {
-    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
-    ), ";;label:euiPageOuter;"),
-    // Grow
-    grow: _ref3,
-    // Direction
-    column: _ref2,
-    row: _ref
-  };
+var euiPageOuterStyles = exports.euiPageOuterStyles = {
+  euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;flex-shrink:0;", (0, _global_styling.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/test-env/components/page_template/page_template.js

@@ -108,7 +108,8 @@ var _EuiPageTemplate = exports._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.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
   /**
-         * Adds a white background and shadow to define the area.
+         * Adds a background and shadow to define the area.
          */
   panelled: _propTypes.default.bool,
   /**
@@ -313,6 +314,11 @@ _EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: _propTypes.default.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: _propTypes.default.oneOf(["plain", "transparent"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/search_bar/search_bar.js

@@ -255,15 +255,15 @@ var EuiSearchBar = exports.EuiSearchBar = /*#__PURE__*/function (_Component) {
 EuiSearchBar.propTypes = {
   onChange: _propTypes.default.func,
   /**
-     The initial query the bar will hold when first mounted
+     * The initial query the bar will hold when first mounted
      */
   defaultQuery: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.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.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.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.default.shape({
     name: _propTypes.default.string,
@@ -323,7 +323,7 @@ EuiSearchBar.propTypes = {
     }).isRequired, _propTypes.default.bool.isRequired])
   }),
   /**
-     An array of search filters. See {@link SearchFilterConfig}.
+     * An array of search filters. See {@link SearchFilterConfig}.
      */
   filters: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     type: _propTypes.default.oneOf(["is"]).isRequired,

package/test-env/components/selectable/selectable.js

@@ -85,6 +85,12 @@ var EuiSelectable = exports.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;
       }
@@ -460,8 +466,7 @@ var EuiSelectable = exports.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/test-env/services/string/to_initials.js

@@ -13,6 +13,8 @@ exports.toInitials = toInitials;
  * Side Public License, v 1.
  */
 
+var MAX_INITIALS = exports.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).
@@ -24,11 +26,20 @@ exports.toInitials = toInitials;
  * @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.
  */
-
-var MAX_INITIALS = exports.MAX_INITIALS = 2;
 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;
@@ -51,5 +62,16 @@ 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);
 }