@elastic/eui 109.0.0 → 109.1.0-snapshot.1763390960850

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

@@ -134,7 +134,7 @@ var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext)
         case 'fill':
           {
             var _buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
-            displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.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__*/(0, _react.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/lib/global_styling/utility/selectors.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDisabledSelector = void 0;
+/*
+ * 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 euiDisabledSelector = exports.euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";

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

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.focusTrapPubSub = void 0;
+/*
+ * 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.
+ */
+var focusTrapPubSub = exports.focusTrapPubSub = {
+  subscribe: subscribe,
+  unsubscribe: unsubscribe,
+  publish: publish
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "focusTrapPubSub", {
+  enumerable: true,
+  get: function get() {
+    return _focus_trap_pub_sub.focusTrapPubSub;
+  }
+});
+var _focus_trap_pub_sub = require("./focus_trap_pub_sub");

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

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useEuiDisabledElement: true
+};
+Object.defineProperty(exports, "useEuiDisabledElement", {
+  enumerable: true,
+  get: function get() {
+    return _useEuiDisabledElement.useEuiDisabledElement;
+  }
+});
 var _useDependentState = require("./useDependentState");
 Object.keys(_useDependentState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useDependentState[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_useDependentState).forEach(function (key) {
 var _useCombinedRefs = require("./useCombinedRefs");
 Object.keys(_useCombinedRefs).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useCombinedRefs[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_useCombinedRefs).forEach(function (key) {
 var _useForceRender = require("./useForceRender");
 Object.keys(_useForceRender).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useForceRender[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_useForceRender).forEach(function (key) {
 var _useLatest = require("./useLatest");
 Object.keys(_useLatest).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useLatest[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_useLatest).forEach(function (key) {
 var _useDeepEqual = require("./useDeepEqual");
 Object.keys(_useDeepEqual).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useDeepEqual[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +75,7 @@ Object.keys(_useDeepEqual).forEach(function (key) {
 var _useMouseMove = require("./useMouseMove");
 Object.keys(_useMouseMove).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useMouseMove[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +87,7 @@ Object.keys(_useMouseMove).forEach(function (key) {
 var _useUpdateEffect = require("./useUpdateEffect");
 Object.keys(_useUpdateEffect).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useUpdateEffect[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -79,4 +95,5 @@ Object.keys(_useUpdateEffect).forEach(function (key) {
       return _useUpdateEffect[key];
     }
   });
-});
+});
+var _useEuiDisabledElement = require("./useEuiDisabledElement");

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

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiDisabledElement = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _keys = require("../../services/keys");
+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) { (0, _defineProperty2.default)(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.
+ */
+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.keys.TAB, _keys.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 = (0, _react.useRef)(null);
+  var isAllowedKeyEvent = function isAllowedKeyEvent(event) {
+    return event instanceof KeyboardEvent && ALLOWED_KEY_EVENTS.includes(event.key);
+  };
+  var preventEvent = (0, _react.useCallback)(function (event) {
+    if (isAllowedKeyEvent(event)) {
+      return;
+    }
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  var preventElementEvents = (0, _react.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 = (0, _react.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.
+ */
+var useEuiDisabledElement = exports.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 = (0, _react.useRef)(null);
+  var _useCustomDisabledEve = useCustomDisabledEvents(),
+    preventElementEvents = _useCustomDisabledEve.preventElementEvents,
+    resetElementEvents = _useCustomDisabledEve.resetElementEvents;
+  var shouldBeDisabled = hasAriaDisabled && isDisabled;
+  var setRef = (0, _react.useCallback)(function (node) {
+    if (elementRef.current) {
+      resetElementEvents(elementRef.current);
+    }
+    elementRef.current = node;
+    if (node && shouldBeDisabled) {
+      preventElementEvents(node);
+    }
+  }, [shouldBeDisabled, preventElementEvents, resetElementEvents]);
+  (0, _react.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/lib/services/index.js

@@ -63,6 +63,7 @@ var _exportNames = {
   wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
+  focusTrapPubSub: true,
   dateFormatAliases: true,
   formatAuto: true,
   formatBoolean: true,
@@ -330,6 +331,12 @@ Object.defineProperty(exports, "findPopoverPosition", {
     return _popover.findPopoverPosition;
   }
 });
+Object.defineProperty(exports, "focusTrapPubSub", {
+  enumerable: true,
+  get: function get() {
+    return _focus_trap.focusTrapPubSub;
+  }
+});
 Object.defineProperty(exports, "formatAuto", {
   enumerable: true,
   get: function get() {
@@ -657,6 +664,7 @@ Object.keys(_findElement).forEach(function (key) {
     }
   });
 });
+var _focus_trap = require("./focus_trap");
 var _format = require("./format");
 var _hooks = require("./hooks");
 Object.keys(_hooks).forEach(function (key) {

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRepositionOnScroll = exports.createRepositionOnScroll = void 0;
+/*
+ * 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`.
+ */
+var getRepositionOnScroll = exports.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.
+ */
+var createRepositionOnScroll = exports.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/lib/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/lib/test/cypress/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "registerEuiCypressMatchers", {
+  enumerable: true,
+  get: function get() {
+    return _matchers.registerEuiCypressMatchers;
+  }
+});
+Object.defineProperty(exports, "setupEuiCypressMatchers", {
+  enumerable: true,
+  get: function get() {
+    return _matchers.setupEuiCypressMatchers;
+  }
+});
+var _matchers = require("./matchers");

package/optimize/lib/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/lib/test/cypress/matchers.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerEuiCypressMatchers = registerEuiCypressMatchers;
+exports.setupEuiCypressMatchers = void 0;
+/*
+ * 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" />
+
+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
+var setupEuiCypressMatchers = exports.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/lib/test/cypress/test_reposition_on_scroll.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testRepositionOnScroll = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+/*
+ * 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" />
+
+var testRepositionOnScroll = exports.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: (0, _defineProperty2.default)({}, componentName, {
+        repositionOnScroll: componentDefaultValue
+      })
+    }
+  } : undefined;
+  cy.mount((0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+    style: {
+      height: '200vh'
+    }
+  }), (0, _react2.jsx)("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);
+      }
+    });
+  });
+};