@elastic/eui 94.3.0 → 94.4.1

package/lib/components/markdown_editor/plugins/markdown_tooltip/renderer.js

@@ -10,22 +10,31 @@ var _tool_tip = require("../../../tool_tip");
 var _icon = require("../../../icon");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/*
- * 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.
- */
-
+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.
+                                                                                                                                                                                                                                                                                           */
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "blrk0m-tooltipMarkdownRenderer",
+  styles: "transform:translateY(-1px);label:tooltipMarkdownRenderer;"
+} : {
+  name: "blrk0m-tooltipMarkdownRenderer",
+  styles: "transform:translateY(-1px);label:tooltipMarkdownRenderer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var tooltipMarkdownRenderer = function tooltipMarkdownRenderer(_ref) {
   var content = _ref.content,
     children = _ref.children;
   return (0, _react2.jsx)("span", null, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
     content: content
   }, (0, _react2.jsx)("span", null, (0, _react2.jsx)("strong", null, children), (0, _react2.jsx)(_icon.EuiIcon, {
-    type: "questionInCircle",
-    className: "euiMarkdownTooltip__icon"
+    type: "questionInCircle"
+    // This is to offset the tooltip icon, which isn't perfectly centered
+    ,
+    css: _ref2
   }))));
 };
 exports.tooltipMarkdownRenderer = tooltipMarkdownRenderer;

package/lib/components/selectable/selectable.js

@@ -640,7 +640,7 @@ EuiSelectable.propTypes = {
        * 'on' to indicate inclusion, 'off' to indicate exclusion,
        * or 'mixed' to indicate inclusion for some.
        */
-    checked: _propTypes.default.oneOf(["on", "off", "mixed", undefined]),
+    checked: _propTypes.default.any,
     disabled: _propTypes.default.bool,
     /**
        * Node to add between the selection icon and the label
@@ -670,7 +670,15 @@ EuiSelectable.propTypes = {
        * Note: when searching, custom truncation props are ignored. The highlighted search
        * text will always take precedence.
        */
-    truncationProps: _propTypes.default.any
+    truncationProps: _propTypes.default.any,
+    /**
+       * Optional custom tooltip content for the button
+       */
+    toolTipContent: _propTypes.default.node,
+    /**
+       * Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
+       */
+    toolTipProps: _propTypes.default.any
   }).isRequired).isRequired,
   /**
        * Passes back the altered `options` array with selected options having `checked: 'on'`.

package/lib/components/selectable/selectable_list/selectable_list.js

@@ -52,6 +52,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, EuiSelectableList);
     _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "animationFrameId", void 0);
+    // counter for tracking list renders and ensuring rerenders
+    _defineProperty(_assertThisInitialized(_this), "listRowRerender", 0);
     _defineProperty(_assertThisInitialized(_this), "listRef", null);
     _defineProperty(_assertThisInitialized(_this), "listBoxRef", null);
     _defineProperty(_assertThisInitialized(_this), "setListRef", function (ref) {
@@ -176,7 +179,6 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           event.persist(); // NOTE: This is needed for React v16 backwards compatibility
           _this.onAddOrRemoveOption(option, event);
         },
-        ref: ref ? ref.bind(null, index) : undefined,
         isFocused: isFocused,
         title: searchableLabel || label,
         checked: checked,
@@ -277,7 +279,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       _this.focusBadgeOffset = _this.props.onFocusBadge === false ? 0 : 46;
 
       // Wait a tick for the listbox ref to update before proceeding
-      requestAnimationFrame(function () {
+      _this.animationFrameId = requestAnimationFrame(function () {
         var scrollbarOffset = _this.listBoxRef ? containerWidth - _this.listBoxRef.offsetWidth : 0;
         _this.setState({
           defaultOptionWidth: containerWidth - scrollbarOffset - paddingOffset - checkedIconOffset
@@ -429,13 +431,47 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(EuiSelectableList, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // ensure requestAnimationFrame is canceled on unmount as
+      // it could potentially run on a next tick otherwise
+      if (this.animationFrameId !== undefined) {
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = undefined;
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      var _this$props9 = this.props,
+        allowExclusions = _this$props9.allowExclusions,
+        showIcons = _this$props9.showIcons,
+        paddingSize = _this$props9.paddingSize,
+        textWrap = _this$props9.textWrap,
+        onFocusBadge = _this$props9.onFocusBadge,
+        searchable = _this$props9.searchable;
+
+      // using shouldComponentUpdate to determine needed rerender before actual rerender
+      // without needing state updates or lagging behind on updates
+      if (nextProps.allowExclusions !== allowExclusions || nextProps.showIcons !== showIcons || nextProps.paddingSize !== paddingSize || nextProps.textWrap !== textWrap || nextProps.onFocusBadge !== onFocusBadge || nextProps.searchable !== searchable) {
+        this.listRowRerender += 1;
+      }
+      return true;
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props9 = this.props,
-        isVirtualized = _this$props9.isVirtualized,
-        activeOptionIndex = _this$props9.activeOptionIndex,
-        visibleOptions = _this$props9.visibleOptions,
-        options = _this$props9.options;
+      var _this$props10 = this.props,
+        isVirtualized = _this$props10.isVirtualized,
+        activeOptionIndex = _this$props10.activeOptionIndex,
+        visibleOptions = _this$props10.visibleOptions,
+        options = _this$props10.options,
+        allowExclusions = _this$props10.allowExclusions,
+        showIcons = _this$props10.showIcons,
+        paddingSize = _this$props10.paddingSize,
+        textWrap = _this$props10.textWrap,
+        onFocusBadge = _this$props10.onFocusBadge,
+        searchable = _this$props10.searchable;
       if (prevProps.activeOptionIndex !== activeOptionIndex) {
         var makeOptionId = this.props.makeOptionId;
         if (this.listBoxRef && this.props.searchable !== true) {
@@ -467,41 +503,48 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           itemData: _objectSpread({}, optionArray)
         }, this.calculateAriaSetAttrs(optionArray)));
       }
+
+      // ensure that ListRow updates based on item props
+      if (isVirtualized) {
+        if (prevProps.allowExclusions !== allowExclusions || prevProps.showIcons !== showIcons || prevProps.paddingSize !== paddingSize || prevProps.textWrap !== textWrap || prevProps.onFocusBadge !== onFocusBadge || prevProps.searchable !== searchable) {
+          this.forceVirtualizedListRowRerender();
+        }
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props10 = this.props,
-        className = _this$props10.className,
-        options = _this$props10.options,
-        searchValue = _this$props10.searchValue,
-        onOptionClick = _this$props10.onOptionClick,
-        renderOption = _this$props10.renderOption,
-        forcedHeight = _this$props10.height,
-        windowProps = _this$props10.windowProps,
-        rowHeight = _this$props10.rowHeight,
-        activeOptionIndex = _this$props10.activeOptionIndex,
-        makeOptionId = _this$props10.makeOptionId,
-        showIcons = _this$props10.showIcons,
-        singleSelection = _this$props10.singleSelection,
-        visibleOptions = _this$props10.visibleOptions,
-        allowExclusions = _this$props10.allowExclusions,
-        bordered = _this$props10.bordered,
-        paddingSize = _this$props10.paddingSize,
-        searchable = _this$props10.searchable,
-        onFocusBadge = _this$props10.onFocusBadge,
-        listId = _this$props10.listId,
-        setActiveOptionIndex = _this$props10.setActiveOptionIndex,
-        ariaLabel = _this$props10['aria-label'],
-        ariaLabelledby = _this$props10['aria-labelledby'],
-        ariaDescribedby = _this$props10['aria-describedby'],
-        role = _this$props10.role,
-        isPreFiltered = _this$props10.isPreFiltered,
-        isVirtualized = _this$props10.isVirtualized,
-        textWrap = _this$props10.textWrap,
-        truncationProps = _this$props10.truncationProps,
-        rest = _objectWithoutProperties(_this$props10, _excluded3);
+      var _this$props11 = this.props,
+        className = _this$props11.className,
+        options = _this$props11.options,
+        searchValue = _this$props11.searchValue,
+        onOptionClick = _this$props11.onOptionClick,
+        renderOption = _this$props11.renderOption,
+        forcedHeight = _this$props11.height,
+        windowProps = _this$props11.windowProps,
+        rowHeight = _this$props11.rowHeight,
+        activeOptionIndex = _this$props11.activeOptionIndex,
+        makeOptionId = _this$props11.makeOptionId,
+        showIcons = _this$props11.showIcons,
+        singleSelection = _this$props11.singleSelection,
+        visibleOptions = _this$props11.visibleOptions,
+        allowExclusions = _this$props11.allowExclusions,
+        bordered = _this$props11.bordered,
+        paddingSize = _this$props11.paddingSize,
+        searchable = _this$props11.searchable,
+        onFocusBadge = _this$props11.onFocusBadge,
+        listId = _this$props11.listId,
+        setActiveOptionIndex = _this$props11.setActiveOptionIndex,
+        ariaLabel = _this$props11['aria-label'],
+        ariaLabelledby = _this$props11['aria-labelledby'],
+        ariaDescribedby = _this$props11['aria-describedby'],
+        role = _this$props11.role,
+        isPreFiltered = _this$props11.isPreFiltered,
+        isVirtualized = _this$props11.isVirtualized,
+        textWrap = _this$props11.textWrap,
+        truncationProps = _this$props11.truncationProps,
+        rest = _objectWithoutProperties(_this$props11, _excluded3);
       var heightIsFull = forcedHeight === 'full';
       var classes = (0, _classnames.default)('euiSelectableList', {
         'euiSelectableList-fullHeight': heightIsFull,
@@ -519,7 +562,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         ref: this.setListBoxRef
       }, this.state.optionArray.map(function (_, index) {
         return /*#__PURE__*/_react.default.createElement(_this2.ListRow, {
-          key: index,
+          key: "".concat(index, "-").concat(_this2.listRowRerender),
           data: _this2.state.optionArray,
           index: index
         }, null);
@@ -670,7 +713,7 @@ EuiSelectableList.propTypes = {
        * 'on' to indicate inclusion, 'off' to indicate exclusion,
        * or 'mixed' to indicate inclusion for some.
        */
-    checked: _propTypes.default.oneOf(["on", "off", "mixed", undefined]),
+    checked: _propTypes.default.any,
     disabled: _propTypes.default.bool,
     /**
        * Node to add between the selection icon and the label
@@ -700,7 +743,15 @@ EuiSelectableList.propTypes = {
        * Note: when searching, custom truncation props are ignored. The highlighted search
        * text will always take precedence.
        */
-    truncationProps: _propTypes.default.any
+    truncationProps: _propTypes.default.any,
+    /**
+       * Optional custom tooltip content for the button
+       */
+    toolTipContent: _propTypes.default.node,
+    /**
+       * Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
+       */
+    toolTipProps: _propTypes.default.any
   }).isRequired).isRequired,
   /**
      * Filtered options list (if applicable)
@@ -714,14 +765,16 @@ EuiSelectableList.propTypes = {
     label: _propTypes.default.string,
     searchableLabel: _propTypes.default.string,
     key: _propTypes.default.string,
-    checked: _propTypes.default.oneOf(["on", "off", "mixed", undefined]),
+    checked: _propTypes.default.any,
     disabled: _propTypes.default.bool,
     prepend: _propTypes.default.node,
     append: _propTypes.default.node,
     ref: _propTypes.default.func,
     data: _propTypes.default.shape({}),
     textWrap: _propTypes.default.oneOf(["truncate", "wrap"]),
-    truncationProps: _propTypes.default.any
+    truncationProps: _propTypes.default.any,
+    toolTipContent: _propTypes.default.node,
+    toolTipProps: _propTypes.default.any
   }).isRequired),
   /**
      * Search value to highlight on the option render