@elastic/eui 109.0.0 → 109.1.0

package/optimize/es/components/tool_tip/tool_tip.js

@@ -20,9 +20,11 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
+import { createRepositionOnScroll } from '../../services/popover/reposition_on_scroll';
 import { enqueueStateChange } from '../../services/react';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiComponentDefaultsContext } from '../provider/component_defaults';
 import { EuiToolTipPopover } from './tool_tip_popover';
 import { EuiToolTipAnchor } from './tool_tip_anchor';
 import { EuiToolTipArrow } from './tool_tip_arrow';
@@ -48,25 +50,15 @@ var DEFAULT_TOOLTIP_STYLES = {
   visibility: 'hidden'
 };
 export var EuiToolTip = /*#__PURE__*/function (_Component) {
-  function EuiToolTip() {
+  function EuiToolTip(props) {
     var _this;
     _classCallCheck(this, EuiToolTip);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, EuiToolTip, [].concat(args));
+    _this = _callSuper(this, EuiToolTip, [props]);
+    _defineProperty(_this, "repositionOnScroll", void 0);
     _defineProperty(_this, "_isMounted", false);
     _defineProperty(_this, "anchor", null);
     _defineProperty(_this, "popover", null);
     _defineProperty(_this, "timeoutId", void 0);
-    _defineProperty(_this, "state", {
-      visible: false,
-      hasFocus: false,
-      calculatedPosition: _this.props.position,
-      toolTipStyles: DEFAULT_TOOLTIP_STYLES,
-      arrowStyles: undefined,
-      id: _this.props.id || htmlIdGenerator()()
-    });
     _defineProperty(_this, "clearAnimationTimeout", function () {
       if (_this.timeoutId) {
         _this.timeoutId = clearTimeout(_this.timeoutId);
@@ -195,6 +187,21 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
         _this.props.onMouseOut(event);
       }
     });
+    _this.state = {
+      visible: false,
+      hasFocus: false,
+      calculatedPosition: _this.props.position,
+      toolTipStyles: DEFAULT_TOOLTIP_STYLES,
+      arrowStyles: undefined,
+      id: _this.props.id || htmlIdGenerator()()
+    };
+    _this.repositionOnScroll = createRepositionOnScroll(function () {
+      return {
+        repositionOnScroll: _this.props.repositionOnScroll,
+        componentDefaults: _this.context.EuiToolTip,
+        repositionFn: _this.positionToolTip
+      };
+    });
     return _this;
   }
   _inherits(EuiToolTip, _Component);
@@ -202,16 +209,14 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
-      if (this.props.repositionOnScroll) {
-        window.addEventListener('scroll', this.positionToolTip, true);
-      }
+      this.repositionOnScroll.subscribe();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.clearAnimationTimeout();
       this._isMounted = false;
-      window.removeEventListener('scroll', this.positionToolTip, true);
+      this.repositionOnScroll.cleanup();
     }
   }, {
     key: "componentDidUpdate",
@@ -221,13 +226,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       }
 
       // update scroll listener
-      if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
-        if (this.props.repositionOnScroll) {
-          window.addEventListener('scroll', this.positionToolTip, true);
-        } else {
-          window.removeEventListener('scroll', this.positionToolTip, true);
-        }
-      }
+      this.repositionOnScroll.update();
     }
   }, {
     key: "render",
@@ -289,6 +288,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
+_defineProperty(EuiToolTip, "contextType", EuiComponentDefaultsContext);
 _defineProperty(EuiToolTip, "defaultProps", {
   position: 'top',
   delay: 'regular',

package/optimize/es/global_styling/index.js

@@ -10,4 +10,5 @@ export * from './reset/global_styles';
 export * from './functions';
 export * from './variables';
 export * from './mixins';
-export * from './utility/animations';
+export * from './utility/animations';
+export { euiDisabledSelector } from './utility/selectors';

package/optimize/es/global_styling/mixins/_button.js

@@ -130,7 +130,7 @@ var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext)
         case 'fill':
           {
             var _buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
-            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : color !== 'disabled' ? euiThemeContext.euiTheme.colors.fullShade : '', ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'empty':

package/optimize/es/global_styling/utility/selectors.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export var euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";

package/optimize/es/services/focus_trap/focus_trap_pub_sub.js

@@ -0,0 +1,74 @@
+/*
+ * 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 listeners = new Set();
+
+/**
+ * Subscribes a listener function to be called whenever focus trap updates are published.
+ *
+ * @param listener The function to be called on updates.
+ * @returns A function that, when called, will unsubscribe the listener. Please remember
+ * to call this function for proper cleanup.
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   const unsubscribe = focusTrapPubSub.subscribe(() => {
+ *     console.log('focus trap updated');
+ *   });
+ *
+ *   return () => unsubscribe();
+ * }, []);
+ * ```
+ */
+var subscribe = function subscribe(listener) {
+  listeners.add(listener);
+  return function () {
+    return unsubscribe(listener);
+  };
+};
+
+/**
+ * Unsubscribes a listener from the focus trap PubSub service.
+ *
+ * @param listener The function to unsubscribe.
+ */
+var unsubscribe = function unsubscribe(listener) {
+  listeners.delete(listener);
+};
+
+/**
+ * Publishes an event to all subscribed listeners, signaling that
+ * components managing focus traps should re-evaluate their tracked elements.
+ */
+var publish = function publish() {
+  listeners.forEach(function (listener) {
+    return listener();
+  });
+};
+
+/**
+ * A lightweight, global PubSub service for loose coupling of components
+ * that need to interact with the same focus trap.
+ *
+ * This allows a component (like `EuiPopover`) to be rendered in a React Portal
+ * and still be included in the focus trap of another component (like `EuiFlyout`)
+ * without either component needing a direct reference to the other.
+ *
+ * How it works:
+ *
+ * 1. A container component (e.g., `EuiFlyout`) `subscribe`s to this service on mount.
+ * 2. An ephemeral component (e.g., `EuiPopover`) calls `publish` when its state
+ *    changes in a way that affects the DOM (e.g., opening, closing, unmounting).
+ * 3. The container component's subscribed callback fires, causing it to re-query
+ *    the DOM for any elements it should include in its focus trap.
+ */
+export var focusTrapPubSub = {
+  subscribe: subscribe,
+  unsubscribe: unsubscribe,
+  publish: publish
+};

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

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { focusTrapPubSub } from './focus_trap_pub_sub';

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

@@ -12,4 +12,5 @@ export * from './useForceRender';
 export * from './useLatest';
 export * from './useDeepEqual';
 export * from './useMouseMove';
-export * from './useUpdateEffect';
+export * from './useUpdateEffect';
+export { useEuiDisabledElement } from './useEuiDisabledElement';

package/optimize/es/services/hooks/useEuiDisabledElement.js

@@ -0,0 +1,192 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/*
+ * 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 { useCallback, useEffect, useRef } from 'react';
+import { keys } from '../../services/keys';
+var DISABLED_ELEMENT_EVENTS = {
+  click: 'onClick',
+  mousedown: 'onMouseDown',
+  mouseup: 'onMouseUp',
+  mouseenter: 'onMouseEnter',
+  mouseleave: 'onMouseLeave',
+  mouseout: 'onMouseOut',
+  mousemove: 'onMouseMove',
+  mouseover: 'onMouseOver',
+  pointerdown: 'onPointerDown',
+  pointerup: 'onPointerUp',
+  pointerenter: 'onPointerEnter',
+  pointerleave: 'onPointerLeave',
+  pointermove: 'onPointerMove',
+  pointerover: 'onPointerOver',
+  touchstart: 'onTouchStart',
+  touchend: 'onTouchEnd',
+  touchmove: 'onTouchMove',
+  keydown: 'onKeyDown',
+  keyup: 'onKeyUp',
+  keypress: 'onKeyPress',
+  submit: 'onSubmit'
+};
+var ALLOWED_KEY_EVENTS = [keys.TAB, keys.ESCAPE];
+var getReactEventHandlers = function getReactEventHandlers() {
+  return Object.values(DISABLED_ELEMENT_EVENTS).reduce(function (acc, curr) {
+    acc[curr] = undefined;
+    return acc;
+  }, {});
+};
+var UNSET_REACT_EVENT_HANDLERS = getReactEventHandlers();
+var useCustomDisabledEvents = function useCustomDisabledEvents() {
+  var elementMethodsRef = useRef(null);
+  var isAllowedKeyEvent = function isAllowedKeyEvent(event) {
+    return event instanceof KeyboardEvent && ALLOWED_KEY_EVENTS.includes(event.key);
+  };
+  var preventEvent = useCallback(function (event) {
+    if (isAllowedKeyEvent(event)) {
+      return;
+    }
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  var preventElementEvents = useCallback(function (element) {
+    if (elementMethodsRef.current) return;
+    var originalEvents = {
+      click: 'click' in element ? element.click : undefined,
+      dispatchEvent: element.dispatchEvent
+    };
+    try {
+      elementMethodsRef.current = originalEvents;
+
+      // Add prevention listeners
+      Object.keys(DISABLED_ELEMENT_EVENTS).forEach(function (eventType) {
+        element.addEventListener(eventType, preventEvent, {
+          capture: true
+        });
+      });
+      if ('click' in element && typeof element.click === 'function') {
+        element.click = function () {};
+      }
+      element.dispatchEvent = function (event) {
+        if (Object.keys(DISABLED_ELEMENT_EVENTS).includes(event.type)) {
+          if (isAllowedKeyEvent(event)) {
+            return originalEvents.dispatchEvent.call(element, event);
+          }
+          return false;
+        }
+        return originalEvents.dispatchEvent.call(element, event);
+      };
+    } catch (error) {
+      elementMethodsRef.current = null;
+    }
+  }, [preventEvent]);
+  var resetElementEvents = useCallback(function (element) {
+    if (!elementMethodsRef.current) return;
+    var _elementMethodsRef$cu = elementMethodsRef.current,
+      click = _elementMethodsRef$cu.click,
+      dispatchEvent = _elementMethodsRef$cu.dispatchEvent;
+    try {
+      // remove prevention listeners
+      Object.keys(DISABLED_ELEMENT_EVENTS).forEach(function (eventType) {
+        element.removeEventListener(eventType, preventEvent, {
+          capture: true
+        });
+      });
+
+      // restore click method
+      if (click && 'click' in element) {
+        element.click = click;
+      }
+
+      // restore dispatchEvent
+      element.dispatchEvent = dispatchEvent;
+    } catch (error) {}
+    elementMethodsRef.current = null;
+  }, [preventEvent]);
+  return {
+    preventElementEvents: preventElementEvents,
+    resetElementEvents: resetElementEvents
+  };
+};
+
+/**
+ * NOTE: Beta feature, may be changed or removed in the future
+ *
+ * Utility to apply either the native or a custom semantic disabled state.
+ *
+ * It applies `aria-disabled` instead of `disabled`  when `hasAriaDisabled=true`
+ * to ensure the element is semantically disabled while still focusable.
+ *
+ * It mimics the native `disabled` behavior by removing any programmatic mouse, pointer, touch
+ * or keyboard event handler but it differs to the native `disabled` behavior in that it preserves
+ * the focus, blur and tabIndex behavior.
+ */
+export var useEuiDisabledElement = function useEuiDisabledElement(_ref) {
+  var _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
+    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
+    onKeyDown = _ref.onKeyDown,
+    onKeyUp = _ref.onKeyUp,
+    onKeyPress = _ref.onKeyPress;
+  var elementRef = useRef(null);
+  var _useCustomDisabledEve = useCustomDisabledEvents(),
+    preventElementEvents = _useCustomDisabledEve.preventElementEvents,
+    resetElementEvents = _useCustomDisabledEve.resetElementEvents;
+  var shouldBeDisabled = hasAriaDisabled && isDisabled;
+  var setRef = useCallback(function (node) {
+    if (elementRef.current) {
+      resetElementEvents(elementRef.current);
+    }
+    elementRef.current = node;
+    if (node && shouldBeDisabled) {
+      preventElementEvents(node);
+    }
+  }, [shouldBeDisabled, preventElementEvents, resetElementEvents]);
+  useEffect(function () {
+    if (!elementRef.current) return;
+    if (shouldBeDisabled) {
+      preventElementEvents(elementRef.current);
+    } else {
+      resetElementEvents(elementRef.current);
+    }
+    return function () {
+      if (elementRef.current) {
+        resetElementEvents(elementRef.current);
+      }
+    };
+  }, [shouldBeDisabled, preventElementEvents, resetElementEvents]);
+  if (!hasAriaDisabled) {
+    return {
+      ref: setRef,
+      disabled: isDisabled
+    };
+  }
+  var onKeyboardEvent = function onKeyboardEvent(e, callback) {
+    if (ALLOWED_KEY_EVENTS.includes(e.key)) {
+      callback === null || callback === void 0 || callback(e);
+    }
+  };
+  var eventHandlers = shouldBeDisabled && _objectSpread(_objectSpread({}, UNSET_REACT_EVENT_HANDLERS), {}, {
+    onKeyDown: onKeyDown ? function (e) {
+      return onKeyboardEvent(e, onKeyDown);
+    } : undefined,
+    onKeyUp: onKeyUp ? function (e) {
+      return onKeyboardEvent(e, onKeyUp);
+    } : undefined,
+    onKeyPress: onKeyPress ? function (e) {
+      return onKeyboardEvent(e, onKeyPress);
+    } : undefined
+  });
+  return _objectSpread({
+    ref: setRef,
+    'aria-disabled': isDisabled ? true : undefined,
+    disabled: isDisabled ? undefined : false
+  }, eventHandlers);
+};

package/optimize/es/services/index.js

@@ -19,6 +19,7 @@ export * from './console';
 export * from './copy';
 export * from './emotion';
 export * from './findElement';
+export { focusTrapPubSub } from './focus_trap';
 export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';
 export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';

package/optimize/es/services/popover/reposition_on_scroll.js

@@ -0,0 +1,61 @@
+/*
+ * 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.
+ */
+
+/**
+ * Returns the value of the `repositionOnScroll` from the props, component's defaults context
+ * or default to `false`.
+ *
+ * @param args The arguments for `getRepositionOnScroll`. See {@link RepositionOnScrollArgs}.
+ * @returns The value of the `repositionOnScroll`.
+ */
+export var getRepositionOnScroll = function getRepositionOnScroll(args) {
+  var repositionOnScroll = args.repositionOnScroll,
+    componentDefaults = args.componentDefaults;
+  if (repositionOnScroll !== undefined) return repositionOnScroll;
+  if (componentDefaults && 'repositionOnScroll' in componentDefaults && typeof componentDefaults.repositionOnScroll === 'boolean') {
+    var contextValue = componentDefaults.repositionOnScroll;
+    return contextValue !== null && contextValue !== void 0 ? contextValue : false;
+  }
+  return false;
+};
+/**
+ * Creates a manager for handling `repositionOnScroll` logic in overlay components.
+ * This utility abstracts the adding, updating, and removing of window scroll event listeners.
+ *
+ * @param getArgs A function that returns the arguments for `getRepositionOnScroll`. See {@link RepositionOnScrollArgs}.
+ * @returns An object with `subscribe`, `update`, and `cleanup` methods to manage the scroll listener.
+ */
+export var createRepositionOnScroll = function createRepositionOnScroll(getArgs) {
+  var lastResolvedRepositionOnScroll;
+  var subscribe = function subscribe() {
+    var repositionOnScroll = getRepositionOnScroll(getArgs());
+    lastResolvedRepositionOnScroll = repositionOnScroll;
+    if (repositionOnScroll) {
+      window.addEventListener('scroll', getArgs().repositionFn, true);
+    }
+  };
+  var update = function update() {
+    var repositionOnScroll = getRepositionOnScroll(getArgs());
+    if (lastResolvedRepositionOnScroll !== repositionOnScroll) {
+      if (repositionOnScroll) {
+        window.addEventListener('scroll', getArgs().repositionFn, true);
+      } else {
+        window.removeEventListener('scroll', getArgs().repositionFn, true);
+      }
+      lastResolvedRepositionOnScroll = repositionOnScroll;
+    }
+  };
+  var cleanup = function cleanup() {
+    window.removeEventListener('scroll', getArgs().repositionFn, true);
+  };
+  return {
+    subscribe: subscribe,
+    update: update,
+    cleanup: cleanup
+  };
+};

package/optimize/es/test/cypress/index.d.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export {
+  registerEuiCypressMatchers,
+  setupEuiCypressMatchers,
+} from './matchers';

package/optimize/es/test/cypress/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { registerEuiCypressMatchers, setupEuiCypressMatchers } from './matchers';

package/optimize/es/test/cypress/matchers.d.ts

@@ -0,0 +1,20 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+declare global {
+  namespace Chai {
+    interface Assertion {
+      euiDisabled: Assertion;
+      euiEnabled: Assertion;
+    }
+  }
+}
+
+export declare const registerEuiCypressMatchers: () => void;
+export declare const setupEuiCypressMatchers: () => void;

package/optimize/es/test/cypress/matchers.js

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+/// <reference types="cypress" />
+
+export function registerEuiCypressMatchers() {
+  var chai = window.chai;
+  if (chai && !chai.__euiMatchersRegistered) {
+    chai.use(function (_chai) {
+      _chai.Assertion.addProperty('euiDisabled', function () {
+        var element = this._obj[0] || this._obj;
+        var hasDisabledAttribute = element.hasAttribute('disabled');
+        var hasAriaDisabled = element.getAttribute('aria-disabled') === 'true';
+        var isDisabled = hasDisabledAttribute || hasAriaDisabled;
+        this.assert(isDisabled, 'expected element to be EUI disabled (= have `disabled` attribute or `aria-disabled="true"`)', 'expected element not to be EUI disabled (= not have `disabled` attribute or `aria-disabled="true"`)', true, isDisabled);
+      });
+      _chai.Assertion.addProperty('euiEnabled', function () {
+        var element = this._obj[0] || this._obj;
+        var hasDisabledAttribute = element.hasAttribute('disabled');
+        var hasAriaDisabled = element.getAttribute('aria-disabled') === 'true';
+        var isDisabled = hasDisabledAttribute || hasAriaDisabled;
+        this.assert(!isDisabled, 'expected element to be EUI enabled (= not have `disabled` attribute or `aria-disabled="true"`)', 'expected element not to be EUI enabled (= have `disabled` attribute or `aria-disabled="true"`)', false, isDisabled);
+      });
+    });
+
+    // Mark as registered to prevent double registration
+    chai.__euiMatchersRegistered = true;
+  }
+}
+
+// Register matchers when support file loads
+export var setupEuiCypressMatchers = function setupEuiCypressMatchers() {
+  if (typeof window !== 'undefined') {
+    // Try to register immediately
+    if (window.chai) {
+      registerEuiCypressMatchers();
+    } else {
+      // Wait for chai to be available
+      var pollForChai = function pollForChai() {
+        if (window.chai) {
+          registerEuiCypressMatchers();
+        } else {
+          setTimeout(pollForChai, 10);
+        }
+      };
+      pollForChai();
+    }
+  }
+};

package/optimize/es/test/cypress/test_reposition_on_scroll.js

@@ -0,0 +1,63 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/*
+ * 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.
+ */
+
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
+
+import React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var testRepositionOnScroll = function testRepositionOnScroll(_ref) {
+  var shouldReposition = _ref.shouldReposition,
+    propValue = _ref.propValue,
+    componentDefaultValue = _ref.componentDefaultValue,
+    componentName = _ref.componentName,
+    triggerSelector = _ref.triggerSelector,
+    panelSelector = _ref.panelSelector,
+    renderComponent = _ref.renderComponent;
+  var repositionProps = {
+    repositionOnScroll: typeof propValue === 'boolean' ? propValue : undefined
+  };
+  var providerProps = typeof componentDefaultValue === 'boolean' ? {
+    providerProps: {
+      componentDefaults: _defineProperty({}, componentName, {
+        repositionOnScroll: componentDefaultValue
+      })
+    }
+  } : undefined;
+  cy.mount(___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    style: {
+      height: '200vh'
+    }
+  }), ___EmotionJSX("div", {
+    style: {
+      position: 'fixed',
+      bottom: '16px',
+      right: '16px'
+    }
+  }, renderComponent(repositionProps))), providerProps);
+  cy.get(triggerSelector).click();
+
+  // Wait for positioning to finish
+  cy.get(panelSelector).as('panel').should('exist').waitForPositionToSettle();
+  cy.get('@panel').then(function ($panel) {
+    var initialRect = $panel[0].getBoundingClientRect();
+    cy.scrollTo(0, 500);
+
+    // Wait for re-positioning to finish
+    cy.get('@panel').waitForPositionToSettle().then(function ($repositionedPanel) {
+      var finalRect = $repositionedPanel[0].getBoundingClientRect();
+      if (shouldReposition) {
+        expect(finalRect.top).to.equal(initialRect.top);
+      } else {
+        expect(finalRect.top).to.not.equal(initialRect.top);
+      }
+    });
+  });
+};