@elastic/eui 110.0.0 → 111.0.0

package/optimize/es/components/flyout/manager/store.js

@@ -0,0 +1,113 @@
+/*
+ * 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 { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, goBack as goBackAction, goToFlyout as goToFlyoutAction, addUnmanagedFlyout as addUnmanagedFlyoutAction, closeUnmanagedFlyout as closeUnmanagedFlyoutAction } from './actions';
+import { flyoutManagerReducer, initialState } from './reducer';
+function createStore() {
+  var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var currentState = initial;
+  var listeners = new Set();
+  var getState = function getState() {
+    return currentState;
+  };
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      listeners.delete(listener);
+    };
+  };
+
+  // The onClick handlers won't execute until after store is fully assigned.
+  // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
+  var store;
+  var computeHistoryItems = function computeHistoryItems() {
+    var currentSessionIndex = currentState.sessions.length - 1;
+    var previousSessions = currentState.sessions.slice(0, currentSessionIndex);
+    return previousSessions.reverse().map(function (_ref) {
+      var title = _ref.title,
+        mainFlyoutId = _ref.mainFlyoutId;
+      return {
+        title: title,
+        onClick: function onClick() {
+          store.dispatch(goToFlyoutAction(mainFlyoutId));
+        }
+      };
+    });
+  };
+  var dispatch = function dispatch(action) {
+    var nextState = flyoutManagerReducer(currentState, action);
+    if (nextState !== currentState) {
+      var previousSessions = currentState.sessions;
+      currentState = nextState;
+
+      // Recompute history items eagerly if sessions changed
+      // This ensures stable references and avoids stale closures
+      if (nextState.sessions !== previousSessions) {
+        store.historyItems = computeHistoryItems();
+      }
+      listeners.forEach(function (l) {
+        l();
+      });
+    }
+  };
+  store = {
+    getState: getState,
+    subscribe: subscribe,
+    dispatch: dispatch,
+    addFlyout: function addFlyout(flyoutId, title, level, size) {
+      return dispatch(addFlyoutAction(flyoutId, title, level, size));
+    },
+    closeFlyout: function closeFlyout(flyoutId) {
+      return dispatch(closeFlyoutAction(flyoutId));
+    },
+    setActiveFlyout: function setActiveFlyout(flyoutId) {
+      return dispatch(setActiveFlyoutAction(flyoutId));
+    },
+    setFlyoutWidth: function setFlyoutWidth(flyoutId, width) {
+      return dispatch(setFlyoutWidthAction(flyoutId, width));
+    },
+    setPushPadding: function setPushPadding(side, width) {
+      return dispatch(setPushPaddingAction(side, width));
+    },
+    goBack: function goBack() {
+      return dispatch(goBackAction());
+    },
+    goToFlyout: function goToFlyout(flyoutId) {
+      return dispatch(goToFlyoutAction(flyoutId));
+    },
+    addUnmanagedFlyout: function addUnmanagedFlyout(flyoutId) {
+      return dispatch(addUnmanagedFlyoutAction(flyoutId));
+    },
+    closeUnmanagedFlyout: function closeUnmanagedFlyout(flyoutId) {
+      return dispatch(closeUnmanagedFlyoutAction(flyoutId));
+    },
+    historyItems: computeHistoryItems() // Initialize with current state
+  };
+  return store;
+}
+
+// Module-level singleton.  A necessary trade-off to avoid global namespace pollution or the need for a third-party library.
+var storeInstance = null;
+
+/**
+ * Returns a singleton store instance shared across all React roots within the same JS context.
+ * Uses module-level singleton to ensure deduplication even if modules are loaded twice.
+ */
+export function getFlyoutManagerStore() {
+  if (!storeInstance) {
+    storeInstance = createStore();
+  }
+  return storeInstance;
+}
+
+/**
+ * For testing purposes - allows resetting the store
+ */
+export function _resetFlyoutManagerStore() {
+  storeInstance = null;
+}

package/optimize/es/components/flyout/manager/types.js

@@ -0,0 +1 @@
+export {};

package/optimize/es/components/flyout/manager/validation.js

@@ -0,0 +1,85 @@
+/*
+ * 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 { FLYOUT_SIZES } from '../const';
+import { LEVEL_CHILD } from './const';
+/**
+ * Checks if a size is a named size (s, m, l)
+ */
+export function isNamedSize(size) {
+  return FLYOUT_SIZES.includes(size);
+}
+
+/**
+ * Validates that a managed flyout only uses named sizes
+ */
+export function validateManagedFlyoutSize(size, flyoutId, level) {
+  if (level === LEVEL_CHILD && !isNamedSize(size)) {
+    var namedSizes = FLYOUT_SIZES.join(', ');
+    return {
+      type: 'INVALID_SIZE_TYPE',
+      message: "Child flyout ".concat(flyoutId, " must use a named size (").concat(namedSizes, "). Received: ").concat(size),
+      flyoutId: flyoutId,
+      level: level,
+      size: size
+    };
+  }
+  return null;
+}
+
+/**
+ * Validates size combinations for parent-child flyouts
+ */
+export function validateSizeCombination(parentSize, childSize) {
+  var sizes = [parentSize, childSize];
+
+  // Parent and child can't both be 'm'
+  if (sizes.every(function (s) {
+    return s === 'm';
+  })) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "m"'
+    };
+  }
+
+  // Parent and child can't both be 'fill'
+  if (sizes.every(function (s) {
+    return s === 'fill';
+  })) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "fill"'
+    };
+  }
+
+  // Flyout can't be 'l' if the other in the pair is not "fill"
+  if (sizes.includes('l') && !sizes.includes('fill')) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Flyouts cannot be size "l" unless the other flyout is "fill"'
+    };
+  }
+  return null;
+}
+
+/**
+ * Creates a user-friendly error message for validation errors
+ */
+export function createValidationErrorMessage(error) {
+  console.error(error);
+  var prefix = "EuiFlyout validation error";
+  switch (error.type) {
+    case 'INVALID_SIZE_TYPE':
+    case 'INVALID_SIZE_COMBINATION':
+    case 'INVALID_FLYOUT_MENU_TITLE':
+      return "".concat(prefix, ": ").concat(error.message);
+    default:
+      return "".concat(prefix, ": Unknown validation error");
+  }
+}

package/optimize/es/components/flyout/types.js

@@ -0,0 +1 @@
+export {};

package/optimize/es/components/flyout/use_flyout_resizable.js

@@ -0,0 +1,144 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/*
+ * 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, useMemo, useRef, useState } from 'react';
+import { keys } from '../../services';
+import { getPosition } from '../resizable_container/helpers';
+/**
+ * @internal
+ */
+export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
+  var enabled = _ref.enabled,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 0 : _ref$minWidth,
+    maxWidth = _ref.maxWidth,
+    onResize = _ref.onResize,
+    side = _ref.side,
+    _size = _ref.size;
+  var getFlyoutMinMaxWidth = useCallback(function (width) {
+    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
+    );
+  }, [minWidth, maxWidth]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    flyoutWidth = _useState2[0],
+    setFlyoutWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    callOnResize = _useState4[0],
+    setCallOnResize = _useState4[1];
+
+  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    flyoutRef = _useState6[0],
+    setFlyoutRef = _useState6[1];
+  useEffect(function () {
+    if (!enabled) return; // Don't measure when resizing is disabled
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
+
+  // Update flyout width when consumers pass in a new `size`
+  useEffect(function () {
+    if (!enabled) return; // Don't update width when resizing is disabled
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
+  }, [_size, getFlyoutMinMaxWidth, enabled]);
+
+  // Initial numbers to calculate from, on resize drag start
+  var initialWidth = useRef(0);
+  var initialMouseX = useRef(0);
+
+  // Account for flyout side and logical property direction
+  var direction = useMemo(function () {
+    var modifier = side === 'right' ? -1 : 1;
+    if (flyoutRef) {
+      var languageDirection = window.getComputedStyle(flyoutRef).direction;
+      if (languageDirection === 'rtl') modifier *= -1;
+    }
+    return modifier;
+  }, [side, flyoutRef]);
+  var onMouseMove = useCallback(function (e) {
+    if (!enabled) {
+      return;
+    }
+    var mouseOffset = getPosition(e, true) - initialMouseX.current;
+    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
+    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+  var onMouseUp = useCallback(function () {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = 0;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('touchmove', onMouseMove);
+    window.removeEventListener('touchend', onMouseUp);
+  }, [onMouseMove, enabled]);
+  var onMouseDown = useCallback(function (e) {
+    var _flyoutRef$offsetWidt;
+    setCallOnResize(false);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = getPosition(e, true);
+    initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
+
+    // Window event listeners instead of React events are used
+    // in case the user's mouse leaves the component
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchmove', onMouseMove);
+    window.addEventListener('touchend', onMouseUp);
+  }, [flyoutRef, onMouseMove, onMouseUp, enabled]);
+  var onKeyDown = useCallback(function (e) {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    var KEYBOARD_OFFSET = 10;
+    switch (e.key) {
+      case keys.ARROW_RIGHT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
+        });
+        break;
+      case keys.ARROW_LEFT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
+        });
+    }
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+
+  // To reduce unnecessary calls, only fire onResize callback:
+  // 1. After initial mount / on user width change events only
+  // 2. If not currently mouse dragging
+  useEffect(function () {
+    if (callOnResize && enabled) {
+      onResize === null || onResize === void 0 || onResize(flyoutWidth);
+    }
+  }, [onResize, callOnResize, flyoutWidth, enabled]);
+  var size = useMemo(function () {
+    return enabled ? flyoutWidth || _size : _size;
+  }, [enabled, flyoutWidth, _size]);
+  return {
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    setFlyoutRef: setFlyoutRef,
+    size: size
+  };
+};

package/optimize/es/components/flyout/use_flyout_z_index.js

@@ -0,0 +1,46 @@
+/*
+ * 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 { useEuiTheme } from '../../services';
+
+/**
+ * @internal
+ */
+
+var calculateZIndex = function calculateZIndex(baseLevel, isChildFlyout) {
+  var level = Number(baseLevel);
+  return {
+    // Child flyouts slide in from below and need to have a lower z-index
+    flyoutZIndex: isChildFlyout ? level - 1 : level,
+    maskZIndex: level - 2
+  };
+};
+
+/**
+ * @internal
+ */
+export var useEuiFlyoutZIndex = function useEuiFlyoutZIndex(_ref) {
+  var maskProps = _ref.maskProps,
+    isPushed = _ref.isPushed,
+    managedFlyoutIndex = _ref.managedFlyoutIndex,
+    isChildFlyout = _ref.isChildFlyout;
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var baseLevel = Number(euiTheme.levels.flyout);
+
+  // The default headerZindexLocation for EuiFlyout is "below"
+  // which is different from what EuiOverlayMask fallbacks to - see
+  // _flyout_overlay.tsx.
+  // We set z-index to mask level only when explicitly overridden
+  // via the maskProps prop
+  if (!isPushed && (maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) === 'above') {
+    baseLevel = Number(euiTheme.levels.mask);
+  }
+  baseLevel += managedFlyoutIndex;
+  return calculateZIndex(baseLevel, isChildFlyout);
+};

package/optimize/es/components/overlay_mask/overlay_mask.js

@@ -10,7 +10,7 @@ var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { keysOf } from '../common';
@@ -26,13 +26,17 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasRendered = useRef(false);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     overlayMaskNode = _useState2[0],
     setOverlayMaskNode = _useState2[1];
   var combinedMaskRef = useCombinedRefs([setOverlayMaskNode, maskRef]);
+  var handleAnimationEnd = useCallback(function () {
+    hasRendered.current = true;
+  }, []);
   var styles = useEuiMemoizedStyles(euiOverlayMaskStyles);
-  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
+  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], hasRendered.current && styles.noAnimation]);
   useEffect(function () {
     if (!overlayMaskNode) return;
     keysOf(rest).forEach(function (key) {
@@ -43,7 +47,13 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
         overlayMaskNode.setAttribute(key, rest[key]);
       }
     });
-  }, [overlayMaskNode]); // eslint-disable-line react-hooks/exhaustive-deps
+    overlayMaskNode.addEventListener('animationend', handleAnimationEnd, {
+      once: true
+    });
+    return function () {
+      overlayMaskNode.removeEventListener('animationend', handleAnimationEnd);
+    };
+  }, [overlayMaskNode, handleAnimationEnd]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Note: Use `classList.add/remove` instead of setting the entire `className`
   // so as not to override any existing classes set by `EuiPortal`

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

@@ -1,3 +1,4 @@
+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
@@ -12,8 +13,16 @@ 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;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 forwards;animation-iteration-count:1;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;")
+    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;"),
+    noAnimation: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;"
+    } : {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    })
   };
 };

package/optimize/es/components/provider/provider.js

@@ -17,6 +17,7 @@ import { EuiCacheProvider } from './cache';
 import { EuiSystemDefaultsProvider } from './system_defaults';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
 import { EuiComponentDefaultsProvider } from './component_defaults';
+import { EuiFlyoutManager } from '../flyout/manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
@@ -79,5 +80,5 @@ export var EuiProvider = function EuiProvider(_ref) {
     children: Utilities && ___EmotionJSX(Utilities, null)
   })), ___EmotionJSX(EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, children)))));
+  }, ___EmotionJSX(EuiFlyoutManager, null, children))))));
 };

package/optimize/lib/components/collapsible_nav/collapsible_nav.js

@@ -92,6 +92,7 @@ var EuiCollapsibleNav = exports.EuiCollapsibleNav = function EuiCollapsibleNav(_
   });
   var flyout = (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({
     id: flyoutID,
+    session: "never",
     css: cssStyles,
     className: classes
     // Flyout props we set different defaults for

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -157,6 +157,7 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   }, rest, {
     // EuiCollapsibleNav is significantly less permissive than EuiFlyout
     id: flyoutID,
+    session: "never",
     css: cssStyles,
     className: classes,
     size: width,

package/optimize/lib/components/flyout/_flyout_overlay.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutOverlay = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _css = require("@emotion/css");
+var _overlay_mask = require("../overlay_mask");
+var _portal = require("../portal");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * 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 getEuiFlyoutOverlayStyles = function getEuiFlyoutOverlayStyles(zIndex) {
+  /*
+  This needs to have !important to override the default EuiOverlayMask
+  z-index based on the headerZindexLocation prop. Using the style attribute
+  doesn't work since EuiOverlayMask requires a string style prop that
+  causes React errors in the test environment.
+  */
+  return /*#__PURE__*/(0, _css.css)("z-index:", zIndex, "!important;;label:getEuiFlyoutOverlayStyles;");
+};
+
+/**
+ * Light wrapper for conditionally rendering portals or overlay masks:
+ *  - If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
+ *  - Otherwise still wrap within an EuiPortal so it appends to the bottom of the window.
+ * Push flyouts have no overlay OR portal behavior.
+ *
+ * @internal
+ */
+var EuiFlyoutOverlay = exports.EuiFlyoutOverlay = function EuiFlyoutOverlay(_ref) {
+  var children = _ref.children,
+    isPushed = _ref.isPushed,
+    maskProps = _ref.maskProps,
+    hasOverlayMask = _ref.hasOverlayMask,
+    maskZIndex = _ref.maskZIndex;
+  var styles = (0, _react.useMemo)(function () {
+    return getEuiFlyoutOverlayStyles(maskZIndex);
+  }, [maskZIndex]);
+  var content = children;
+  if (!isPushed || hasOverlayMask) {
+    content = (0, _react2.jsx)(_portal.EuiPortal, null, content);
+  }
+  var classes = (0, _css.cx)(maskProps === null || maskProps === void 0 ? void 0 : maskProps.className, styles);
+  return (0, _react2.jsx)(_react.default.Fragment, null, hasOverlayMask && (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, (0, _extends2.default)({
+    headerZindexLocation: "below"
+  }, maskProps, {
+    className: classes
+  })), content);
+};

package/optimize/lib/components/flyout/_flyout_resize_button.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutResizeButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _services = require("../../services");
+var _resizable_container = require("../resizable_container");
+var _flyout_resize_button = require("./_flyout_resize_button.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["type", "side", "ownFocus", "isPushed"];
+/*
+ * 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 EuiFlyoutResizeButton = exports.EuiFlyoutResizeButton = function EuiFlyoutResizeButton(_ref) {
+  var type = _ref.type,
+    side = _ref.side,
+    ownFocus = _ref.ownFocus,
+    isPushed = _ref.isPushed,
+    resizableButtonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasOverlay = ownFocus && type === 'overlay';
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_resize_button.euiFlyoutResizeButtonStyles);
+  var cssStyles = [styles.root, styles[type][side], !hasOverlay && styles.noOverlay.root, !hasOverlay && styles.noOverlay[side]];
+  return (0, _react2.jsx)(_resizable_container.EuiResizableButton, (0, _extends2.default)({
+    isHorizontal: true,
+    indicator: "border",
+    css: cssStyles
+  }, resizableButtonProps));
+};

package/{lib/components/flyout/flyout_resizable.styles.js → optimize/lib/components/flyout/_flyout_resize_button.styles.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFlyoutResizableButtonStyles = void 0;
+exports.euiFlyoutResizeButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 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)."; } /*
@@ -30,25 +30,25 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "1cw850z-noOverlay",
-  styles: "margin-inline:0;label:noOverlay;"
+  name: "10l1ho9-root",
+  styles: "margin-inline:0;label:root;"
 } : {
-  name: "1cw850z-noOverlay",
-  styles: "margin-inline:0;label:noOverlay;",
+  name: "10l1ho9-root",
+  styles: "margin-inline:0;label:root;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "1gfwqnd-euiFlyoutResizableButton",
-  styles: "position:absolute;label:euiFlyoutResizableButton;"
+  name: "1yicr0l-root",
+  styles: "position:absolute;label:root;"
 } : {
-  name: "1gfwqnd-euiFlyoutResizableButton",
-  styles: "position:absolute;label:euiFlyoutResizableButton;",
+  name: "1yicr0l-root",
+  styles: "position:absolute;label:root;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFlyoutResizableButtonStyles = exports.euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref5) {
+var euiFlyoutResizeButtonStyles = exports.euiFlyoutResizeButtonStyles = function euiFlyoutResizeButtonStyles(_ref5) {
   var euiTheme = _ref5.euiTheme;
   return {
-    euiFlyoutResizableButton: _ref4,
+    root: _ref4,
     overlay: {
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), ";;label:left;"),
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), ";;label:right;")
@@ -58,7 +58,7 @@ var euiFlyoutResizableButtonStyles = exports.euiFlyoutResizableButtonStyles = fu
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thick)), ";;label:right;")
     },
     noOverlay: {
-      noOverlay: _ref3,
+      root: _ref3,
       left: _ref2,
       right: _ref
     }