@elastic/eui 65.0.2 → 66.0.0

package/test-env/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -249,6 +249,12 @@ EuiPinnableListGroup.propTypes = {
          */
     buttonRef: _propTypes.default.any,
 
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: _propTypes.default.string,
+
     /**
        * Saves the pinned status and changes the visibility of the pin icon
        */
@@ -359,7 +365,13 @@ EuiPinnableListGroup.propTypes = {
          * Pass-through ref reference specifically for targeting
          * instances where the item content is rendered as a `button`
          */
-    buttonRef: _propTypes.default.any
+    buttonRef: _propTypes.default.any,
+
+    /**
+         * Text to be displayed in the tooltip when `showToolTip` is true.
+         * By default the text will be same as the label text.
+         */
+    toolTipText: _propTypes.default.string
   }).isRequired)]),
 
   /**

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

@@ -86,9 +86,7 @@ var EuiModal = function EuiModal(_ref) {
       color: "text",
       "aria-label": closeModal
     });
-  }), (0, _react2.jsx)("div", {
-    className: "euiModal__flex"
-  }, children))));
+  }), children)));
 };
 
 exports.EuiModal = EuiModal;

package/test-env/components/observer/mutation_observer/mutation_observer.js

@@ -63,7 +63,7 @@ var EuiMutationObserver = /*#__PURE__*/function (_EuiObserver) {
 exports.EuiMutationObserver = EuiMutationObserver;
 
 var makeMutationObserver = function makeMutationObserver(node, _observerOptions, callback) {
-  // IE11 and the MutationObserver polyfill used in Kibana (for Jest) implement
+  // The MutationObserver polyfill used in Kibana (for Jest) implements
   // an older spec in which specifying `attributeOldValue` or `attributeFilter`
   // without specifying `attributes` results in a `SyntaxError`.
   // The following logic patches the newer spec in which `attributes: true` can be

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

@@ -65,13 +65,17 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
       setInlineStyles = _useState2[1];
 
   (0, _react.useEffect)(function () {
+    var updatedStyles = _objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth));
+
     if (sticky) {
       var _document$body$datase;
 
       var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = (0, _typeof2.default)(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
-      setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth)), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)"))));
+      updatedStyles = _objectSpread(_objectSpread(_objectSpread({}, updatedStyles), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)")));
     }
+
+    setInlineStyles(updatedStyles);
   }, [style, sticky, themeContext.euiTheme.base, isResponding, minWidth]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: className,

package/test-env/components/table/table_row_cell.js

@@ -216,9 +216,8 @@ EuiTableRowCell.propTypes = {
     showOnHover: _propTypes.default.bool,
 
     /**
-       * Setting `textOnly` to `false` will break words unnecessarily on FF and
-       * IE.  To combat this problem on FF, wrap contents with the css utility
-       * `.eui-textBreakWord`.
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
        */
     textOnly: _propTypes.default.bool,
 
@@ -239,9 +238,8 @@ EuiTableRowCell.propTypes = {
   showOnHover: _propTypes.default.bool,
 
   /**
-     * Setting `textOnly` to `false` will break words unnecessarily on FF and
-     * IE.  To combat this problem on FF, wrap contents with the css utility
-     * `.eui-textBreakWord`.
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
   textOnly: _propTypes.default.bool,
 

package/test-env/components/tabs/tabbed_content/tabbed_content.js

@@ -135,24 +135,6 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(EuiTabbedContent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.addEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.tabsRef.current) {
-        // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
-        this.tabsRef.current.removeEventListener('focusout', this.removeFocus);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -180,7 +162,8 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
         ref: this.tabsRef,
         expand: expand,
         size: size,
-        onFocus: this.initializeFocus
+        onFocus: this.initializeFocus,
+        onBlur: this.removeFocus
       }, tabs.map(function (tab) {
         var id = tab.id,
             name = tab.name,

package/test-env/global_styling/mixins/_typography.js

@@ -45,7 +45,7 @@ var useEuiFontSize = function useEuiFontSize(scale, options) {
 exports.useEuiFontSize = useEuiFontSize;
 
 var euiTextBreakWord = function euiTextBreakWord() {
-  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other\n  word-break: break-word; // IE doesn't understand but that's ok\n";
+  return "\n  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container\n  word-break: break-word;\n";
 };
 /**
  * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.

package/test-env/services/theme/hooks.js

@@ -32,11 +32,14 @@ var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = (0, _react.useMemo)(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 
 exports.useEuiTheme = useEuiTheme;
@@ -47,17 +50,9 @@ var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return (0, _react2.jsx)(Component, (0, _extends2.default)({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/src/global_styling/utility/_utility.scss

@@ -1,15 +0,0 @@
-// This file utilizes !importants on purpose
-// sass-lint:disable no-important
-
-/**
-  * IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
-  * Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
-  * https://github.com/philipwalton/flexbugs/issues/104
-  */
-.euiIEFlexWrapFix {
-  @include internetExplorerOnly {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0%;
-  }
-}