@elastic/eui 88.5.4 → 89.0.0

package/optimize/es/components/popover/popover.js

@@ -27,7 +27,7 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { focusable } from 'tabbable';
 import { EuiFocusTrap } from '../focus_trap';
-import { cascadingMenuKeys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator } from '../../services';
+import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiPortal } from '../portal';
 import { EuiMutationObserver } from '../observer/mutation_observer';
@@ -124,7 +124,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       }, closingTransitionTime);
     });
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
-      if (event.key === cascadingMenuKeys.ESCAPE) {
+      if (event.key === keys.ESCAPE) {
         _this.onEscapeKey(event);
       }
     });

package/optimize/es/components/table/table_row_cell.js

@@ -12,9 +12,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { Fragment } from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT, useIsWithinBreakpoints } from '../../services';
+import { isObject } from '../../services/predicate';
+import { EuiTextBlockTruncate } from '../text_truncate';
 import { resolveWidthAsStyle } from './utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableRowCell = function EuiTableRowCell(_ref) {
@@ -49,7 +51,7 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
     'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
     'euiTableCellContent--showOnHover': showOnHover,
-    'euiTableCellContent--truncateText': truncateText,
+    'euiTableCellContent--truncateText': truncateText === true,
     // We're doing this rigamarole instead of creating `euiTableCellContent--textOnly` for BWC
     // purposes for the time-being.
     'euiTableCellContent--overflowingContent': textOnly !== true
@@ -69,7 +71,7 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
   });
   var widthValue = useIsWithinBreakpoints(['xs', 's']) && mobileOptions.width ? mobileOptions.width : width;
   var styleObj = resolveWidthAsStyle(style, widthValue);
-  function modifyChildren(children) {
+  var modifyChildren = useCallback(function (children) {
     var modifiedChildren = children;
     if (textOnly === true) {
       modifiedChildren = ___EmotionJSX("span", {
@@ -82,8 +84,14 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
         });
       });
     }
+    if (isObject(truncateText) && truncateText.lines) {
+      modifiedChildren = ___EmotionJSX(EuiTextBlockTruncate, {
+        lines: truncateText.lines,
+        cloneElement: true
+      }, modifiedChildren);
+    }
     return modifiedChildren;
-  }
+  }, [childClasses, textOnly, truncateText]);
   var childrenNode = modifyChildren(children);
   var hideForMobileClasses = 'euiTableRowCell--hideForMobile';
   var showForMobileClasses = 'euiTableRowCell--hideForDesktop';
@@ -103,7 +111,7 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
       className: cellClasses
     }, sharedProps), mobileOptions.header && ___EmotionJSX("div", {
       className: "euiTableRowCell__mobileHeader ".concat(showForMobileClasses)
-    }, mobileOptions.header), mobileOptions.render ? ___EmotionJSX(Fragment, null, ___EmotionJSX("div", {
+    }, mobileOptions.header), mobileOptions.render ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
       className: "".concat(mobileContentClasses, " ").concat(showForMobileClasses)
     }, modifyChildren(mobileOptions.render)), ___EmotionJSX("div", {
       className: "".concat(contentClasses, " ").concat(hideForMobileClasses)

package/optimize/es/components/text_truncate/index.js

@@ -7,4 +7,5 @@
  */
 
 export { EuiTextTruncate } from './text_truncate';
+export { EuiTextBlockTruncate } from './text_block_truncate';
 export { TruncationUtils } from './utils';

package/optimize/es/components/text_truncate/text_block_truncate.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "style", "lines", "cloneElement"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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.
+ */
+
+import React, { isValidElement, useMemo } from 'react';
+import { css } from '@emotion/react';
+import classNames from 'classnames';
+import { cloneElementWithCss } from '../../services';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var styles = {
+  euiTextBlockTruncate: process.env.NODE_ENV === "production" ? {
+    name: "1cfm3ge-euiTextBlockTruncate",
+    styles: "display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:0;overflow:hidden;label:euiTextBlockTruncate;"
+  } : {
+    name: "1cfm3ge-euiTextBlockTruncate",
+    styles: "display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:0;overflow:hidden;label:euiTextBlockTruncate;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+export var EuiTextBlockTruncate = function EuiTextBlockTruncate(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    lines = _ref.lines,
+    cloneElement = _ref.cloneElement,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiTextBlockTruncate', className);
+  var cssStyles = styles.euiTextBlockTruncate;
+  var inlineStyles = useMemo(function () {
+    return _objectSpread({
+      WebkitLineClamp: lines
+    }, style);
+  }, [lines, style]);
+  if ( /*#__PURE__*/isValidElement(children) && cloneElement) {
+    return cloneElementWithCss(children, {
+      css: cssStyles,
+      style: _objectSpread(_objectSpread({}, children.props.style), inlineStyles),
+      className: classNames(children.props.className, classes)
+    });
+  } else {
+    return ___EmotionJSX("div", _extends({
+      className: classes,
+      css: cssStyles,
+      style: inlineStyles
+    }, rest), children);
+  }
+};

package/optimize/es/global_styling/reset/global_styles.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -37,12 +40,20 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * This font reset sets all our base font/typography related properties
    * that are needed to override browser-specific element settings.
    */
-  var fontReset = "\n    font-family: ".concat(font.family, ";\n    font-size: ", "".concat(font.scale[font.body.scale] * base, "px"), ";\n    line-height: ").concat(base / (font.scale[font.body.scale] * base), ";\n    font-weight: ").concat(font.weight[font.body.weight], ";\n  ");
+  var fontBodyScale = font.scale[font.body.scale];
+  var fontReset = {
+    fontFamily: font.family,
+    fontSize: "".concat(font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale).concat(font.defaultUnits),
+    lineHeight: base / (fontBodyScale * base),
+    fontWeight: font.weight[font.body.weight]
+  };
 
   /**
    * Final styles
    */
-  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", logicalCSS('height', '100%'), " background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", logicalCSS('height', '100%'), " background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", _objectSpread(_objectSpread({}, fontReset), {}, {
+    fontSize: '1rem' // Inherit from html root
+  }), ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });

package/optimize/es/services/accessibility/index.js

@@ -6,7 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { accessibleClickKeys } from './accessible_click_keys';
-export { cascadingMenuKeys } from './cascading_menu_keys';
-export { comboBoxKeys } from './combo_box_keys';
 export { htmlIdGenerator, useGeneratedHtmlId } from './html_id_generator';

package/optimize/es/services/index.js

@@ -8,7 +8,7 @@
 
 // Export all keys under a `keys` named variable
 import * as keys from './keys';
-export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
+export { htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
 export { CanvasTextUtils } from './canvas';

package/optimize/es/test/rtl/component_helpers.d.ts

@@ -8,3 +8,5 @@ export declare const waitForEuiPopoverClose: () => Promise<void>;
 
 export declare const waitForEuiToolTipVisible: () => Promise<void>;
 export declare const waitForEuiToolTipHidden: () => Promise<void>;
+
+export declare const showEuiComboBoxOptions: () => Promise<void>;

package/optimize/es/test/rtl/component_helpers.js

@@ -9,7 +9,8 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
  */
 
 import '@testing-library/jest-dom';
-import { waitFor } from '@testing-library/react';
+import { waitFor, fireEvent } from '@testing-library/react';
+import { screen } from './custom_render';
 
 /**
  * Ensure the EuiPopover being tested is open/closed before continuing
@@ -110,4 +111,31 @@ export var waitForEuiToolTipHidden = /*#__PURE__*/function () {
   return function waitForEuiToolTipHidden() {
     return _ref4.apply(this, arguments);
   };
+}();
+
+/**
+ * Doot doo
+ */
+export var showEuiComboBoxOptions = /*#__PURE__*/function () {
+  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          fireEvent.click(screen.getByTestSubject('comboBoxToggleListButton'));
+          _context5.next = 3;
+          return waitForEuiPopoverOpen();
+        case 3:
+          _context5.next = 5;
+          return waitFor(function () {
+            expect(screen.getByRole('listbox')).toBeInTheDocument();
+          });
+        case 5:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return function showEuiComboBoxOptions() {
+    return _ref5.apply(this, arguments);
+  };
 }();

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -18,7 +18,7 @@ var _collapsible_nav_accordion = require("./collapsible_nav_accordion");
 var _collapsible_nav_link = require("./collapsible_nav_link");
 var _collapsible_nav_item = require("./collapsible_nav_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "children"],
+var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "accordionProps", "children"],
   _excluded2 = ["renderItem", "className"],
   _excluded3 = ["items", "isSubItem", "isGroup", "className"],
   _excluded4 = ["className"];
@@ -44,6 +44,7 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
     icon = _ref.icon,
     iconProps = _ref.iconProps,
     items = _ref.items,
+    accordionProps = _ref.accordionProps,
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var headerContent = (0, _react2.jsx)(EuiCollapsibleNavItemTitle, {
@@ -56,7 +57,8 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
   if (isAccordion) {
     return (0, _react2.jsx)(_collapsible_nav_accordion.EuiCollapsibleNavAccordion, (0, _extends2.default)({
       buttonContent: headerContent,
-      items: items
+      items: items,
+      accordionProps: accordionProps
     }, props, {
       isSubItem: isSubItem
     }));

package/optimize/lib/components/color_picker/index.js

@@ -27,12 +27,6 @@ Object.defineProperty(exports, "EuiColorPickerSwatch", {
     return _color_picker_swatch.EuiColorPickerSwatch;
   }
 });
-Object.defineProperty(exports, "EuiColorStops", {
-  enumerable: true,
-  get: function get() {
-    return _color_stops.EuiColorStops;
-  }
-});
 Object.defineProperty(exports, "EuiHue", {
   enumerable: true,
   get: function get() {
@@ -49,6 +43,5 @@ var _color_picker = require("./color_picker");
 var _color_picker_swatch = require("./color_picker_swatch");
 var _hue = require("./hue");
 var _saturation = require("./saturation");
-var _color_stops = require("./color_stops");
 var _color_palette_picker = require("./color_palette_picker");
 var _color_palette_display = require("./color_palette_display");