@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/es/components/flyout/flyout.js

@@ -29,7 +29,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React, { useEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -223,20 +223,28 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return selectors;
   }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
-  useEffect(function () {
+
+  /**
+   * Finds the shards to include in the focus trap by querying by `focusTrapSelectors`.
+   *
+   * @param shouldAutoFocus Whether to auto-focus the flyout wrapper when the focus trap is activated.
+   * This is necessary because when a flyout is toggled from within a shard, the focus trap's `autoFocus`
+   * feature doesn't work. This logic manually focuses the flyout as a workaround.
+   */
+  var findShards = useCallback(function () {
+    var shouldAutoFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     if (focusTrapSelectors.length > 0) {
       var shardsEls = focusTrapSelectors.flatMap(function (selector) {
         return Array.from(document.querySelectorAll(selector));
       });
       setFocusTrapShards(Array.from(shardsEls));
-
-      // Flyouts that are toggled from shards do not have working
-      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
-      shardsEls.forEach(function (shard) {
-        if (shard.contains(flyoutToggle.current)) {
-          resizeRef === null || resizeRef === void 0 || resizeRef.focus();
-        }
-      });
+      if (shouldAutoFocus) {
+        shardsEls.forEach(function (shard) {
+          if (shard.contains(flyoutToggle.current)) {
+            resizeRef === null || resizeRef === void 0 || resizeRef.focus();
+          }
+        });
+      }
     } else {
       // Clear existing shards if necessary, e.g. switching to `false`
       setFocusTrapShards(function (shards) {
@@ -244,6 +252,15 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
   }, [focusTrapSelectors, resizeRef]);
+  useEffect(function () {
+    // Auto-focus should only happen on initial flyout mount (or when the dependencies change)
+    // because it snaps focus to the flyout wrapper, which steals it from subsequently focused elements.
+    findShards(true);
+    var unsubscribe = focusTrapPubSub.subscribe(function () {
+      return findShards();
+    });
+    return unsubscribe;
+  }, [findShards]);
   var focusTrapProps = useMemo(function () {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
       shards: [].concat(_toConsumableArray(focusTrapShards), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))

package/es/components/form/file_picker/file_picker.styles.js

@@ -43,7 +43,7 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
     fontSize = _euiFontSize.fontSize,
     lineHeight = _euiFontSize.lineHeight;
   return {
-    euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : formVariables.borderHovered, ";--euiFormControlStateStyle:solid;}&:focus-within{", highContrastModeStyles(euiThemeContext, {
+    euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : euiTheme.colors.borderInteractiveFormsHoverProminent, ";--euiFormControlStateStyle:", highContrastMode ? 'solid' : 'dashed', ";}&:focus-within{", highContrastModeStyles(euiThemeContext, {
       forced: "\n              ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderFocused), "\n            ")
     }), ";};label:euiFilePicker;"),
     isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.borderStrongSuccess, ";--euiFormControlStateStyle:", highContrastMode === 'forced' ? 'solid' : 'dashed', ";background-color:", euiTheme.components.forms.backgroundDropping, ";;label:isDroppingFile;"),
@@ -62,8 +62,8 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
         forced: "\n                  text-decoration: underline;\n                "
       }), ";}.euiFilePicker__icon{transform:scale(1.05);}}};label:largeInteractive;")
     },
-    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", formVariables.borderColor, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
-    disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
+    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", euiTheme.colors.borderBaseProminent, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    disabled: /*#__PURE__*/css(formStyles.disabled, "--euiFormControlStateColor:transparent;;label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

package/es/components/form/form_control_button/form_control_button.js

@@ -100,13 +100,6 @@ EuiFormControlButton.propTypes = {
   fullWidth: PropTypes.bool,
   href: PropTypes.string,
   onClick: PropTypes.func,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,
@@ -145,10 +138,23 @@ EuiFormControlButton.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   /**
        * Defines the button label when used like an input in combination with `placeholder`
        */

package/es/components/header/header_links/header_link.js

@@ -33,13 +33,6 @@ export var EuiHeaderLink = function EuiHeaderLink(_ref) {
 EuiHeaderLink.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,
@@ -78,10 +71,23 @@ EuiHeaderLink.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   /**
      * Simple prop to update color based on active state.
      * Can be overridden with `color`

package/es/components/header/header_section/header_section_item_button.js

@@ -174,13 +174,6 @@ ref) {
 EuiHeaderSectionItemButton.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,
@@ -219,10 +212,23 @@ EuiHeaderSectionItemButton.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   /**
        * Inserts the node into a EuiBadgeNotification and places it appropriately against the button.
        * Or pass `true` to render a simple dot

package/es/components/icon/assets/boxes_vertical.js

@@ -27,7 +27,7 @@ var EuiIconBoxesVertical = function EuiIconBoxesVertical(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M8 12a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm0-6a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm0-6a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z"
+    d: "M6 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 8a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-1 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
   }));
 };
 export var icon = EuiIconBoxesVertical;

package/es/components/icon/assets/checkInCircleFilled.js

@@ -27,8 +27,7 @@ var EuiIconCheckInCircleFilled = function EuiIconCheckInCircleFilled(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm3.65-10.857L6.91 9.8 4.35 7.286a.5.5 0 0 0-.7.714l2.909 2.857a.5.5 0 0 0 .7 0l5.091-5a.5.5 0 1 0-.7-.714Z"
+    d: "M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1ZM7 9.293 5.354 7.646l-.708.708L7 10.707l4.354-4.353-.707-.708L7 9.293Z"
   }));
 };
 export var icon = EuiIconCheckInCircleFilled;

package/es/components/icon/assets/errorFilled.js

@@ -27,8 +27,7 @@ var EuiIconErrorFilled = function EuiIconErrorFilled(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"
+    d: "M10.392 1.005a1 1 0 0 1 .608.288L14.707 5a1 1 0 0 1 .293.707v4.586a1 1 0 0 1-.293.707L11 14.707a1 1 0 0 1-.707.293H5.707a1 1 0 0 1-.634-.227L5 14.707 1.293 11a1 1 0 0 1-.288-.608L1 10.293V5.707A1 1 0 0 1 1.293 5L5 1.293A1 1 0 0 1 5.707 1h4.586l.099.005ZM8 7.293 5.354 4.646l-.708.708L7.293 8l-2.647 2.646.708.707L8 8.707l2.646 2.646.707-.707L8.707 8l2.646-2.646-.707-.708L8 7.293Z"
   }));
 };
 export var icon = EuiIconErrorFilled;

package/es/components/icon/assets/paper_clip.js

@@ -27,7 +27,7 @@ var EuiIconPaperClip = function EuiIconPaperClip(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M9.84 2.019 3.046 8.57c-.987.952-1.133 2.517-.199 3.516.951 1.021 2.58 1.106 3.64.19.034-.03.068-.061.1-.092l5.655-5.452a.484.484 0 0 0 0-.703.53.53 0 0 0-.729 0L5.92 11.421c-.572.551-1.505.657-2.131.163a1.455 1.455 0 0 1-.118-2.211l6.899-6.651a2.646 2.646 0 0 1 3.644 0 2.422 2.422 0 0 1 0 3.513L7.3 12.901c-1.333 1.285-3.497 1.493-4.95.336-1.54-1.22-1.764-3.411-.5-4.897a3.33 3.33 0 0 1 .238-.252l5.78-5.572a.484.484 0 0 0 0-.703.53.53 0 0 0-.73 0l-5.78 5.572a4.36 4.36 0 0 0 0 6.324c2.188 2.109 5.202 1.31 6.66-.095l6.925-6.676a3.39 3.39 0 0 0 0-4.92C13.534.66 11.25.66 9.841 2.019z"
+    d: "M7 11c0 .423.105.648.229.771.123.124.348.229.771.229.423 0 .648-.105.771-.229.124-.123.229-.348.229-.771V5h1v6c0 .577-.145 1.102-.521 1.479C9.102 12.854 8.577 13 8 13c-.577 0-1.102-.145-1.479-.521C6.145 12.101 6 11.577 6 11V4c0-.719.215-1.468.716-2.046C7.226 1.364 7.996 1 9 1c1.005 0 1.773.365 2.284.954.5.578.716 1.327.716 2.046v7c0 1.103-.345 2.11-1.043 2.845C10.255 14.583 9.242 15 8 15c-1.242 0-2.255-.417-2.957-1.155C4.345 13.11 4 12.103 4 11V4h1v7c0 .897.279 1.64.768 2.155C6.253 13.666 6.99 14 8 14c1.01 0 1.747-.334 2.232-.845.49-.515.768-1.258.768-2.155V4c0-.531-.16-1.032-.472-1.392C10.227 2.26 9.745 2 9 2s-1.227.26-1.528.608C7.16 2.968 7 3.47 7 4v7Z"
   }));
 };
 export var icon = EuiIconPaperClip;

package/es/components/icon/assets/streams_wired.js

@@ -22,17 +22,18 @@ var EuiIconStreamsWired = function EuiIconStreamsWired(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
+    fill: "none",
     viewBox: "0 0 16 16",
     "aria-labelledby": titleId
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5v1c0 .564-.19 1.082-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.501 2.501 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8h-.504c.315.418.504.936.504 1.5v1A1.5 1.5 0 0 0 9 12h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5v-1A1.5 1.5 0 0 0 5 8H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 5.5v-1A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 11a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 1a1.5 1.5 0 1 1-1.413 2H11.5A1.5 1.5 0 0 0 10 4.5V6a2.49 2.49 0 0 1-.504 1.5H9.5l-.048.06a2.58 2.58 0 0 1-.352.36c-.01.01-.021.017-.032.025a2.496 2.496 0 0 1-.142.108l-.043.03c-.055.036-.11.07-.168.103l-.047.024c-.057.03-.115.06-.175.085-.018.008-.036.014-.055.021A2.475 2.475 0 0 1 7.5 8.5h-.504c.315.418.504.936.504 1.5v1.5A1.5 1.5 0 0 0 9 13h3.087a1.5 1.5 0 1 1 0 1H9a2.5 2.5 0 0 1-2.5-2.5V10A1.5 1.5 0 0 0 5 8.5H3.913a1.5 1.5 0 1 1 0-1H7.5A1.5 1.5 0 0 0 9 6V4.5A2.5 2.5 0 0 1 11.5 2h.587A1.5 1.5 0 0 1 13.5 1Zm0 12a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm-11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm11-5.5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }), ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M13.5 6a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425A1.5 1.5 0 0 1 13.5 6Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M13.5 6.5a1.5 1.5 0 1 1-1.413 2H9.948c.293-.287.536-.625.714-1h1.425a1.5 1.5 0 0 1 1.413-1Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
     clipRule: "evenodd"
   }));
 };

package/es/components/icon/assets/warningFilled.js

@@ -27,8 +27,7 @@ var EuiIconWarningFilled = function EuiIconWarningFilled(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M8 1a1 1 0 0 1 .864.496l7 12A1 1 0 0 1 15 15H1a1 1 0 0 1-.864-1.504l7-12A1 1 0 0 1 8 1Zm.9 4.995-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995a.905.905 0 1 1 1.8 0ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+    d: "M8 1a1 1 0 0 1 .863.496l7 12A1 1 0 0 1 15 15H1a1 1 0 0 1-.864-1.504l7-12A1 1 0 0 1 8 1Zm0 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-.5-6v5h1V5h-1Z"
   }));
 };
 export var icon = EuiIconWarningFilled;

package/es/components/icon/icon_map.js

@@ -54,8 +54,7 @@ export var typeToPathMap = {
   changePointDetection: 'change_point_detection',
   check: 'check',
   checkCircle: 'checkCircle',
-  checkInCircleFilled: 'checkCircle',
-  // NOTE: To be deprecated in favor of `checkCircle`
+  checkInCircleFilled: 'checkInCircleFilled',
   cheer: 'cheer',
   classificationJob: 'ml_classification_job',
   clickLeft: 'clickLeft',
@@ -160,8 +159,7 @@ export var typeToPathMap = {
   eql: 'eql',
   eraser: 'eraser',
   error: 'error',
-  errorFilled: 'error',
-  // NOTE: To be deprecated in favor of `error`
+  errorFilled: 'errorFilled',
   esqlVis: 'esqlVis',
   exit: 'exit',
   expand: 'expand',
@@ -500,8 +498,7 @@ export var typeToPathMap = {
   visualizeApp: 'app_visualize',
   vulnerabilityManagementApp: 'app_vulnerability_management',
   warning: 'warning',
-  warningFilled: 'warning',
-  // NOTE: To be deprecated in favor of `warning`
+  warningFilled: 'warningFilled',
   watchesApp: 'app_watches',
   web: 'web',
   wordWrap: 'wordWrap',

package/es/components/list_group/list_group.js

@@ -189,7 +189,6 @@ EuiListGroup.propTypes = {
       color: PropTypes.any,
       "aria-label": PropTypes.string,
       "aria-labelledby": PropTypes.string,
-      isDisabled: PropTypes.bool,
       /**
          * Overall size of button.
          * Matches the sizes of other EuiButtons
@@ -219,6 +218,19 @@ EuiListGroup.propTypes = {
       className: PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any,
+      /**
+         * Controls the disabled behavior via the native `disabled` attribute.
+         */
+      isDisabled: PropTypes.bool,
+      /**
+         * NOTE: Beta feature, may be changed or removed in the future
+         *
+         * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+         * This results in a semantically disabled button without the default browser handling of the disabled state.
+         *
+         * Use e.g. when a disabled button should have a tooltip.
+         */
+      hasAriaDisabled: PropTypes.bool,
       buttonRef: PropTypes.any
     }),
     /**

package/es/components/list_group/list_group_item.js

@@ -274,7 +274,6 @@ EuiListGroupItem.propTypes = {
     color: PropTypes.any,
     "aria-label": PropTypes.string,
     "aria-labelledby": PropTypes.string,
-    isDisabled: PropTypes.bool,
     /**
        * Overall size of button.
        * Matches the sizes of other EuiButtons
@@ -304,6 +303,19 @@ EuiListGroupItem.propTypes = {
     className: PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any,
+    /**
+       * Controls the disabled behavior via the native `disabled` attribute.
+       */
+    isDisabled: PropTypes.bool,
+    /**
+       * NOTE: Beta feature, may be changed or removed in the future
+       *
+       * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+       * This results in a semantically disabled button without the default browser handling of the disabled state.
+       *
+       * Use e.g. when a disabled button should have a tooltip.
+       */
+    hasAriaDisabled: PropTypes.bool,
     buttonRef: PropTypes.any
   }),
   /**

package/es/components/list_group/list_group_item_extra_action.js

@@ -54,7 +54,6 @@ EuiListGroupItemExtraAction.propTypes = {
   color: PropTypes.any,
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,
-  isDisabled: PropTypes.bool,
   /**
      * Overall size of button.
      * Matches the sizes of other EuiButtons
@@ -84,6 +83,19 @@ EuiListGroupItemExtraAction.propTypes = {
   className: PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   buttonRef: PropTypes.any,
   parentIsDisabled: PropTypes.bool
 };

package/es/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -168,7 +168,6 @@ EuiPinnableListGroup.propTypes = {
       color: PropTypes.any,
       "aria-label": PropTypes.string,
       "aria-labelledby": PropTypes.string,
-      isDisabled: PropTypes.bool,
       /**
          * Overall size of button.
          * Matches the sizes of other EuiButtons
@@ -198,6 +197,19 @@ EuiPinnableListGroup.propTypes = {
       className: PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any,
+      /**
+         * Controls the disabled behavior via the native `disabled` attribute.
+         */
+      isDisabled: PropTypes.bool,
+      /**
+         * NOTE: Beta feature, may be changed or removed in the future
+         *
+         * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+         * This results in a semantically disabled button without the default browser handling of the disabled state.
+         *
+         * Use e.g. when a disabled button should have a tooltip.
+         */
+      hasAriaDisabled: PropTypes.bool,
       buttonRef: PropTypes.any
     }),
     /**
@@ -301,7 +313,6 @@ EuiPinnableListGroup.propTypes = {
       color: PropTypes.any,
       "aria-label": PropTypes.string,
       "aria-labelledby": PropTypes.string,
-      isDisabled: PropTypes.bool,
       size: PropTypes.any,
       iconSize: PropTypes.any,
       isSelected: PropTypes.bool,
@@ -310,6 +321,8 @@ EuiPinnableListGroup.propTypes = {
       className: PropTypes.string,
       "data-test-subj": PropTypes.string,
       css: PropTypes.any,
+      isDisabled: PropTypes.bool,
+      hasAriaDisabled: PropTypes.bool,
       buttonRef: PropTypes.any
     }),
     /**

package/es/components/overlay_mask/overlay_mask.styles.js

@@ -12,7 +12,7 @@ export var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;", logicalCSS('padding-bottom', '10vh'), " animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
     belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
   };

package/es/components/pagination/pagination_button.js

@@ -71,13 +71,6 @@ export var EuiPaginationButton = function EuiPaginationButton(_ref) {
 EuiPaginationButton.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,
@@ -116,10 +109,23 @@ EuiPaginationButton.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   isActive: PropTypes.bool,
   pageIndex: PropTypes.number.isRequired,
   totalPages: PropTypes.number

package/es/components/popover/popover.js

@@ -41,17 +41,19 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { focusable } from 'tabbable';
 import { EuiFocusTrap } from '../focus_trap';
-import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator } from '../../services';
+import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator, focusTrapPubSub } from '../../services';
 import { setMultipleRefs } from '../../services/hooks/useCombinedRefs';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiPortal } from '../portal';
 import { EuiMutationObserver } from '../observer/mutation_observer';
 import { findPopoverPosition, getElementZIndex } from '../../services/popover';
+import { createRepositionOnScroll } from '../../services/popover/reposition_on_scroll';
 import { EuiI18n } from '../i18n';
 import { EuiOutsideClickDetector } from '../outside_click_detector';
 import { EuiPopoverArrow } from './popover_arrow';
 import { euiPopoverStyles } from './popover.styles';
 import { EuiPopoverPanel } from './popover_panel';
+import { EuiComponentDefaultsContext } from '../provider/component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var popoverAnchorPosition = ['upCenter', 'upLeft', 'upRight', 'downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'];
 var anchorPositionToPopoverPositionMap = {
@@ -103,7 +105,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, EuiPopover);
     _this = _callSuper(this, EuiPopover, [props]);
-    _defineProperty(_this, "respositionTimeout", void 0);
+    _defineProperty(_this, "repositionOnScroll", void 0);
+    _defineProperty(_this, "repositionTimeout", void 0);
     _defineProperty(_this, "strandedFocusTimeout", void 0);
     _defineProperty(_this, "closingTransitionTimeout", void 0);
     _defineProperty(_this, "closingTransitionAnimationFrame", void 0);
@@ -182,12 +185,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         }),
         durationMatch = _Array$prototype$slic.durationMatch,
         delayMatch = _Array$prototype$slic.delayMatch;
-      clearTimeout(_this.respositionTimeout);
-      _this.respositionTimeout = window.setTimeout(function () {
+      clearTimeout(_this.repositionTimeout);
+      _this.repositionTimeout = window.setTimeout(function () {
         _this.setState({
           isOpenStable: true
         }, function () {
           _this.positionPopoverFixed();
+          focusTrapPubSub.publish();
         });
       }, durationMatch + delayMatch);
     });
@@ -297,6 +301,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       // once a stable position has been found, keep the contents on that side
       isOpenStable: false // wait for any initial opening transitions to finish before marking as stable
     };
+    _this.repositionOnScroll = createRepositionOnScroll(function () {
+      return {
+        repositionOnScroll: _this.props.repositionOnScroll,
+        componentDefaults: _this.context.EuiPopover,
+        repositionFn: _this.positionPopoverFixed
+      };
+    });
     return _this;
   }
   _inherits(EuiPopover, _Component);
@@ -314,9 +325,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           _this2.onOpenPopover();
         });
       }
-      if (this.props.repositionOnScroll) {
-        window.addEventListener('scroll', this.positionPopoverFixed, true);
-      }
+      this.repositionOnScroll.subscribe();
     }
   }, {
     key: "componentDidUpdate",
@@ -333,13 +342,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       }
 
       // update scroll listener
-      if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
-        if (this.props.repositionOnScroll) {
-          window.addEventListener('scroll', this.positionPopoverFixed, true);
-        } else {
-          window.removeEventListener('scroll', this.positionPopoverFixed, true);
-        }
-      }
+      this.repositionOnScroll.update();
 
       // The popover is being closed.
       if (prevProps.isOpen && !this.props.isOpen) {
@@ -349,17 +352,19 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           _this3.setState({
             isClosing: false
           });
+          focusTrapPubSub.publish();
         }, closingTransitionTime);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      window.removeEventListener('scroll', this.positionPopoverFixed, true);
-      clearTimeout(this.respositionTimeout);
+      this.repositionOnScroll.cleanup();
+      clearTimeout(this.repositionTimeout);
       clearTimeout(this.strandedFocusTimeout);
       clearTimeout(this.closingTransitionTimeout);
       cancelAnimationFrame(this.closingTransitionAnimationFrame);
+      focusTrapPubSub.publish();
     }
   }, {
     key: "render",
@@ -532,6 +537,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
+_defineProperty(EuiPopover, "contextType", EuiComponentDefaultsContext);
 _defineProperty(EuiPopover, "defaultProps", {
   isOpen: false,
   ownFocus: true,

package/es/components/provider/component_defaults/component_defaults.js

@@ -66,7 +66,17 @@ EuiComponentDefaultsProvider.propTypes = {
        * Provide a global configuration for `EuiFlyout`s.
        * Defaults will be inherited by all `EuiFlyout`s.
        */
-    EuiFlyout: PropTypes.any
+    EuiFlyout: PropTypes.any,
+    /**
+       * Provide a global configuration for `EuiPopover`s.
+       * Defaults will be inherited by every `EuiPopover`.
+       */
+    EuiPopover: PropTypes.any,
+    /**
+       * Provide a global configuration for `EuiToolTip`s.
+       * Defaults will be inherited by every `EuiToolTip`.
+       */
+    EuiToolTip: PropTypes.any
   })
 };
 export var useComponentDefaults = function useComponentDefaults() {
@@ -121,5 +131,15 @@ EuiProviderComponentDefaultsProps.propTypes = {
      * Provide a global configuration for `EuiFlyout`s.
      * Defaults will be inherited by all `EuiFlyout`s.
      */
-  EuiFlyout: PropTypes.any
+  EuiFlyout: PropTypes.any,
+  /**
+     * Provide a global configuration for `EuiPopover`s.
+     * Defaults will be inherited by every `EuiPopover`.
+     */
+  EuiPopover: PropTypes.any,
+  /**
+     * Provide a global configuration for `EuiToolTip`s.
+     * Defaults will be inherited by every `EuiToolTip`.
+     */
+  EuiToolTip: PropTypes.any
 };