@elastic/eui 112.2.0-snapshot.1770205951498 → 112.3.0

package/es/components/flyout/index.js

@@ -16,4 +16,7 @@ export { EuiFlyoutMenu } from './flyout_menu';
 
 // Hooks for using Manager-based flyouts
 export { useIsInManagedFlyout, useHasActiveSession } from './manager';
-export { useIsInsideParentFlyout } from './flyout_parent_context';
+export { useIsInsideParentFlyout } from './flyout_parent_context';
+
+// Flyout manager store (for cross-root state synchronization)
+export { getFlyoutManagerStore } from './manager';

package/es/components/flyout/manager/flyout_managed.js

@@ -22,8 +22,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
 import PropTypes from "prop-types";
+import { flushSync } from 'react-dom';
 import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { useResizeObserver } from '../../observer/resize_observer';
@@ -135,11 +136,25 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // Track if flyout was ever registered to avoid false positives on initial mount
   var wasRegisteredRef = useRef(false);
 
-  // Register with flyout manager context when open, remove when closed
+  // Track flyoutExistsInManager in a ref to avoid dependency loop
+  // The cleanup function needs the current value but shouldn't cause re-runs
+  var flyoutExistsInManagerRef = useRef(flyoutExistsInManager);
+
+  // Update ref when flyoutExistsInManager changes
   useEffect(function () {
+    flyoutExistsInManagerRef.current = flyoutExistsInManager;
+  }, [flyoutExistsInManager]);
+
+  // Register with flyout manager context when open, remove when closed
+  // Using useLayoutEffect to run synchronously before DOM updates
+  useLayoutEffect(function () {
     addFlyout(flyoutId, title, level, size);
     return function () {
-      closeFlyout(flyoutId);
+      // Only call closeFlyout if it wasn't already called via onClose
+      // This prevents duplicate removal when using Escape/X button
+      if (flyoutExistsInManagerRef.current) {
+        closeFlyout(flyoutId);
+      }
 
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
@@ -175,12 +190,6 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onActiveCallbackRef.current();
     }
   }, [currentSession, flyoutId, level]);
-  useEffect(function () {
-    return function () {
-      // Only remove from manager on component unmount, don't trigger close callback
-      closeFlyout(flyoutId);
-    };
-  }, [closeFlyout, flyoutId]);
 
   // Track width changes for flyouts
   var _useResizeObserver = useResizeObserver(isActive ? flyoutRef : null, 'width'),
@@ -188,8 +197,19 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // Pass the stabilized onClose callback to the flyout menu context
   var onClose = function onClose(e) {
-    var _onCloseCallbackRef$c2;
-    (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, e);
+    // CRITICAL: Update manager state FIRST before allowing React to unmount
+    // This prevents race conditions during portal → inline DOM transitions
+    // and ensures cascade close logic runs before DOM cleanup begins
+    // Using flushSync to force synchronous state update completion
+    flushSync(function () {
+      closeFlyout(flyoutId);
+    });
+
+    // trigger parent callback, unmounts the component
+    if (onCloseCallbackRef.current) {
+      var event = e || new MouseEvent('click');
+      onCloseCallbackRef.current(event);
+    }
   };
 
   // Update width in manager state when it changes

package/es/components/flyout/manager/index.js

@@ -14,6 +14,8 @@ export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActi
 /** Reducer and default state for the flyout manager. */
 export { flyoutManagerReducer, initialState } from './reducer';
 
+/** Flyout manager store singleton and types. */
+export { getFlyoutManagerStore } from './store';
 /** Provider component exposing the Flyout Manager API via context. */
 export { EuiFlyoutManager } from './provider';
 

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

@@ -8,10 +8,16 @@
 
 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';
+
+/**
+ * Events emitted by the flyout manager store for external consumers.
+ */
+
 function createStore() {
   var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
   var currentState = initial;
   var listeners = new Set();
+  var eventListeners = new Set();
   var getState = function getState() {
     return currentState;
   };
@@ -21,6 +27,17 @@ function createStore() {
       listeners.delete(listener);
     };
   };
+  var subscribeToEvents = function subscribeToEvents(listener) {
+    eventListeners.add(listener);
+    return function () {
+      eventListeners.delete(listener);
+    };
+  };
+  var emitEvent = function emitEvent(event) {
+    eventListeners.forEach(function (listener) {
+      listener(event);
+    });
+  };
 
   // The onClick handlers won't execute until after store is fully assigned.
   // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
@@ -49,6 +66,19 @@ function createStore() {
       // This ensures stable references and avoids stale closures
       if (nextState.sessions !== previousSessions) {
         store.historyItems = computeHistoryItems();
+
+        // Detect removed sessions and emit CLOSE_SESSION events
+        var nextSessionIds = new Set(nextState.sessions.map(function (s) {
+          return s.mainFlyoutId;
+        }));
+        previousSessions.forEach(function (session) {
+          if (!nextSessionIds.has(session.mainFlyoutId)) {
+            emitEvent({
+              type: 'CLOSE_SESSION',
+              session: session
+            });
+          }
+        });
       }
       listeners.forEach(function (l) {
         l();
@@ -58,6 +88,7 @@ function createStore() {
   store = {
     getState: getState,
     subscribe: subscribe,
+    subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
     addFlyout: function addFlyout(flyoutId, title, level, size) {
       return dispatch(addFlyoutAction(flyoutId, title, level, size));

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

@@ -214,7 +214,7 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
           css: iconStyles,
           className: "euiFilePicker__icon",
           color: iconColor,
-          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'importAction',
+          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'upload',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), ___EmotionJSX("span", {

package/eui.d.ts

@@ -12278,6 +12278,49 @@ declare module '@elastic/eui/src/components/flyout/manager/reducer' {
 	 */
 	export function flyoutManagerReducer(state: EuiFlyoutManagerState | undefined, action: Action): EuiFlyoutManagerState;
 
+}
+declare module '@elastic/eui/src/components/flyout/manager/store' {
+	import type { EuiFlyoutLevel, EuiFlyoutManagerState, FlyoutSession } from '@elastic/eui/src/components/flyout/manager/types';
+	import type { Action } from '@elastic/eui/src/components/flyout/manager/actions';
+	type Listener = () => void;
+	/**
+	 * Events emitted by the flyout manager store for external consumers.
+	 */
+	export type FlyoutManagerEvent = {
+	    type: 'CLOSE_SESSION';
+	    session: FlyoutSession;
+	};
+	type EventListener = (event: FlyoutManagerEvent) => void;
+	export interface FlyoutManagerStore {
+	    getState: () => EuiFlyoutManagerState;
+	    subscribe: (listener: Listener) => () => void;
+	    subscribeToEvents: (listener: EventListener) => () => void;
+	    dispatch: (action: Action) => void;
+	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => void;
+	    closeFlyout: (flyoutId: string) => void;
+	    setActiveFlyout: (flyoutId: string | null) => void;
+	    setFlyoutWidth: (flyoutId: string, width: number) => void;
+	    setPushPadding: (side: 'left' | 'right', width: number) => void;
+	    goBack: () => void;
+	    goToFlyout: (flyoutId: string) => void;
+	    addUnmanagedFlyout: (flyoutId: string) => void;
+	    closeUnmanagedFlyout: (flyoutId: string) => void;
+	    historyItems: Array<{
+	        title: string;
+	        onClick: () => void;
+	    }>;
+	}
+	/**
+	 * 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(): FlyoutManagerStore;
+	/**
+	 * For testing purposes - allows resetting the store
+	 */
+	export function _resetFlyoutManagerStore(): void;
+	export {};
+
 }
 declare module '@elastic/eui/src/components/flyout/manager/selectors' {
 	export const useSession: (flyoutId?: string | null) => import ("@elastic/eui/src/components/flyout/manager/types").FlyoutSession | null;
@@ -12352,40 +12395,6 @@ declare module '@elastic/eui/src/components/flyout/manager/layout_mode' {
 	/** Current layout mode for managed flyouts (`side-by-side` or `stacked`). */
 	export const useFlyoutLayoutMode: () => EuiFlyoutLayoutMode;
 
-}
-declare module '@elastic/eui/src/components/flyout/manager/store' {
-	import type { EuiFlyoutLevel, EuiFlyoutManagerState } from '@elastic/eui/src/components/flyout/manager/types';
-	import type { Action } from '@elastic/eui/src/components/flyout/manager/actions';
-	type Listener = () => void;
-	export interface FlyoutManagerStore {
-	    getState: () => EuiFlyoutManagerState;
-	    subscribe: (listener: Listener) => () => void;
-	    dispatch: (action: Action) => void;
-	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => void;
-	    closeFlyout: (flyoutId: string) => void;
-	    setActiveFlyout: (flyoutId: string | null) => void;
-	    setFlyoutWidth: (flyoutId: string, width: number) => void;
-	    setPushPadding: (side: 'left' | 'right', width: number) => void;
-	    goBack: () => void;
-	    goToFlyout: (flyoutId: string) => void;
-	    addUnmanagedFlyout: (flyoutId: string) => void;
-	    closeUnmanagedFlyout: (flyoutId: string) => void;
-	    historyItems: Array<{
-	        title: string;
-	        onClick: () => void;
-	    }>;
-	}
-	/**
-	 * 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(): FlyoutManagerStore;
-	/**
-	 * For testing purposes - allows resetting the store
-	 */
-	export function _resetFlyoutManagerStore(): void;
-	export {};
-
 }
 declare module '@elastic/eui/src/components/flyout/manager/provider' {
 	import React from 'react';
@@ -13103,6 +13112,9 @@ declare module '@elastic/eui/src/components/flyout/manager' {
 	export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, setActivityStage as setActivityStageAction, } from '@elastic/eui/src/components/flyout/manager/actions';
 	/** Reducer and default state for the flyout manager. */
 	export { flyoutManagerReducer, initialState } from '@elastic/eui/src/components/flyout/manager/reducer';
+	/** Flyout manager store singleton and types. */
+	export { getFlyoutManagerStore, type FlyoutManagerStore, type FlyoutManagerEvent, } from '@elastic/eui/src/components/flyout/manager/store';
+	export type { EuiFlyoutManagerState, FlyoutSession } from '@elastic/eui/src/components/flyout/manager/types';
 	/** Provider component exposing the Flyout Manager API via context. */
 	export { EuiFlyoutManager } from '@elastic/eui/src/components/flyout/manager/provider';
 	/**
@@ -14197,6 +14209,7 @@ declare module '@elastic/eui/src/components/flyout' {
 	export { EuiFlyoutMenu } from '@elastic/eui/src/components/flyout/flyout_menu';
 	export { useIsInManagedFlyout, useHasActiveSession } from '@elastic/eui/src/components/flyout/manager';
 	export { useIsInsideParentFlyout } from '@elastic/eui/src/components/flyout/flyout_parent_context';
+	export { getFlyoutManagerStore, type FlyoutManagerStore, type FlyoutManagerEvent, type EuiFlyoutManagerState, type FlyoutSession, } from '@elastic/eui/src/components/flyout/manager';
 
 }
 declare module '@elastic/eui/src/components/provider/component_defaults/component_defaults' {

package/lib/components/flyout/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "euiFlyoutSlideInRight", {
     return _flyout2.euiFlyoutSlideInRight;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _manager.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "useHasActiveSession", {
   enumerable: true,
   get: function get() {

package/lib/components/flyout/manager/flyout_managed.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiManagedFlyout = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDom = require("react-dom");
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _resize_observer = require("../../observer/resize_observer");
@@ -142,11 +143,25 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   // Track if flyout was ever registered to avoid false positives on initial mount
   var wasRegisteredRef = (0, _react.useRef)(false);
 
-  // Register with flyout manager context when open, remove when closed
+  // Track flyoutExistsInManager in a ref to avoid dependency loop
+  // The cleanup function needs the current value but shouldn't cause re-runs
+  var flyoutExistsInManagerRef = (0, _react.useRef)(flyoutExistsInManager);
+
+  // Update ref when flyoutExistsInManager changes
   (0, _react.useEffect)(function () {
+    flyoutExistsInManagerRef.current = flyoutExistsInManager;
+  }, [flyoutExistsInManager]);
+
+  // Register with flyout manager context when open, remove when closed
+  // Using useLayoutEffect to run synchronously before DOM updates
+  (0, _react.useLayoutEffect)(function () {
     addFlyout(flyoutId, title, level, size);
     return function () {
-      closeFlyout(flyoutId);
+      // Only call closeFlyout if it wasn't already called via onClose
+      // This prevents duplicate removal when using Escape/X button
+      if (flyoutExistsInManagerRef.current) {
+        closeFlyout(flyoutId);
+      }
 
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
@@ -182,12 +197,6 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       onActiveCallbackRef.current();
     }
   }, [currentSession, flyoutId, level]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      // Only remove from manager on component unmount, don't trigger close callback
-      closeFlyout(flyoutId);
-    };
-  }, [closeFlyout, flyoutId]);
 
   // Track width changes for flyouts
   var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isActive ? flyoutRef : null, 'width'),
@@ -195,8 +204,19 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
 
   // Pass the stabilized onClose callback to the flyout menu context
   var onClose = function onClose(e) {
-    var _onCloseCallbackRef$c2;
-    (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, e);
+    // CRITICAL: Update manager state FIRST before allowing React to unmount
+    // This prevents race conditions during portal → inline DOM transitions
+    // and ensures cascade close logic runs before DOM cleanup begins
+    // Using flushSync to force synchronous state update completion
+    (0, _reactDom.flushSync)(function () {
+      closeFlyout(flyoutId);
+    });
+
+    // trigger parent callback, unmounts the component
+    if (onCloseCallbackRef.current) {
+      var event = e || new MouseEvent('click');
+      onCloseCallbackRef.current(event);
+    }
   };
 
   // Update width in manager state when it changes

package/lib/components/flyout/manager/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "flyoutManagerReducer", {
     return _reducer.flyoutManagerReducer;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _store.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "getWidthFromSize", {
   enumerable: true,
   get: function get() {
@@ -161,6 +167,7 @@ Object.defineProperty(exports, "usePushPaddingOffsets", {
 });
 var _actions = require("./actions");
 var _reducer = require("./reducer");
+var _store = require("./store");
 var _provider = require("./provider");
 var _hooks = require("./hooks");
 var _flyout_child = require("./flyout_child");

package/lib/components/flyout/manager/store.js

@@ -15,10 +15,15 @@ var _reducer = require("./reducer");
  * Side Public License, v 1.
  */
 
+/**
+ * Events emitted by the flyout manager store for external consumers.
+ */
+
 function createStore() {
   var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _reducer.initialState;
   var currentState = initial;
   var listeners = new Set();
+  var eventListeners = new Set();
   var getState = function getState() {
     return currentState;
   };
@@ -28,6 +33,17 @@ function createStore() {
       listeners.delete(listener);
     };
   };
+  var subscribeToEvents = function subscribeToEvents(listener) {
+    eventListeners.add(listener);
+    return function () {
+      eventListeners.delete(listener);
+    };
+  };
+  var emitEvent = function emitEvent(event) {
+    eventListeners.forEach(function (listener) {
+      listener(event);
+    });
+  };
 
   // The onClick handlers won't execute until after store is fully assigned.
   // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
@@ -56,6 +72,19 @@ function createStore() {
       // This ensures stable references and avoids stale closures
       if (nextState.sessions !== previousSessions) {
         store.historyItems = computeHistoryItems();
+
+        // Detect removed sessions and emit CLOSE_SESSION events
+        var nextSessionIds = new Set(nextState.sessions.map(function (s) {
+          return s.mainFlyoutId;
+        }));
+        previousSessions.forEach(function (session) {
+          if (!nextSessionIds.has(session.mainFlyoutId)) {
+            emitEvent({
+              type: 'CLOSE_SESSION',
+              session: session
+            });
+          }
+        });
       }
       listeners.forEach(function (l) {
         l();
@@ -65,6 +94,7 @@ function createStore() {
   store = {
     getState: getState,
     subscribe: subscribe,
+    subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
     addFlyout: function addFlyout(flyoutId, title, level, size) {
       return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size));

package/lib/components/form/file_picker/file_picker.js

@@ -221,7 +221,7 @@ var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Co
           css: iconStyles,
           className: "euiFilePicker__icon",
           color: iconColor,
-          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'importAction',
+          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'upload',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), (0, _react2.jsx)("span", {

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

@@ -16,4 +16,7 @@ export { EuiFlyoutMenu } from './flyout_menu';
 
 // Hooks for using Manager-based flyouts
 export { useIsInManagedFlyout, useHasActiveSession } from './manager';
-export { useIsInsideParentFlyout } from './flyout_parent_context';
+export { useIsInsideParentFlyout } from './flyout_parent_context';
+
+// Flyout manager store (for cross-root state synchronization)
+export { getFlyoutManagerStore } from './manager';

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

@@ -13,7 +13,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import { flushSync } from 'react-dom';
 import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { useResizeObserver } from '../../observer/resize_observer';
@@ -125,11 +126,25 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // Track if flyout was ever registered to avoid false positives on initial mount
   var wasRegisteredRef = useRef(false);
 
-  // Register with flyout manager context when open, remove when closed
+  // Track flyoutExistsInManager in a ref to avoid dependency loop
+  // The cleanup function needs the current value but shouldn't cause re-runs
+  var flyoutExistsInManagerRef = useRef(flyoutExistsInManager);
+
+  // Update ref when flyoutExistsInManager changes
   useEffect(function () {
+    flyoutExistsInManagerRef.current = flyoutExistsInManager;
+  }, [flyoutExistsInManager]);
+
+  // Register with flyout manager context when open, remove when closed
+  // Using useLayoutEffect to run synchronously before DOM updates
+  useLayoutEffect(function () {
     addFlyout(flyoutId, title, level, size);
     return function () {
-      closeFlyout(flyoutId);
+      // Only call closeFlyout if it wasn't already called via onClose
+      // This prevents duplicate removal when using Escape/X button
+      if (flyoutExistsInManagerRef.current) {
+        closeFlyout(flyoutId);
+      }
 
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
@@ -165,12 +180,6 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onActiveCallbackRef.current();
     }
   }, [currentSession, flyoutId, level]);
-  useEffect(function () {
-    return function () {
-      // Only remove from manager on component unmount, don't trigger close callback
-      closeFlyout(flyoutId);
-    };
-  }, [closeFlyout, flyoutId]);
 
   // Track width changes for flyouts
   var _useResizeObserver = useResizeObserver(isActive ? flyoutRef : null, 'width'),
@@ -178,8 +187,19 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // Pass the stabilized onClose callback to the flyout menu context
   var onClose = function onClose(e) {
-    var _onCloseCallbackRef$c2;
-    (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, e);
+    // CRITICAL: Update manager state FIRST before allowing React to unmount
+    // This prevents race conditions during portal → inline DOM transitions
+    // and ensures cascade close logic runs before DOM cleanup begins
+    // Using flushSync to force synchronous state update completion
+    flushSync(function () {
+      closeFlyout(flyoutId);
+    });
+
+    // trigger parent callback, unmounts the component
+    if (onCloseCallbackRef.current) {
+      var event = e || new MouseEvent('click');
+      onCloseCallbackRef.current(event);
+    }
   };
 
   // Update width in manager state when it changes

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

@@ -14,6 +14,8 @@ export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActi
 /** Reducer and default state for the flyout manager. */
 export { flyoutManagerReducer, initialState } from './reducer';
 
+/** Flyout manager store singleton and types. */
+export { getFlyoutManagerStore } from './store';
 /** Provider component exposing the Flyout Manager API via context. */
 export { EuiFlyoutManager } from './provider';
 

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

@@ -8,10 +8,16 @@
 
 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';
+
+/**
+ * Events emitted by the flyout manager store for external consumers.
+ */
+
 function createStore() {
   var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
   var currentState = initial;
   var listeners = new Set();
+  var eventListeners = new Set();
   var getState = function getState() {
     return currentState;
   };
@@ -21,6 +27,17 @@ function createStore() {
       listeners.delete(listener);
     };
   };
+  var subscribeToEvents = function subscribeToEvents(listener) {
+    eventListeners.add(listener);
+    return function () {
+      eventListeners.delete(listener);
+    };
+  };
+  var emitEvent = function emitEvent(event) {
+    eventListeners.forEach(function (listener) {
+      listener(event);
+    });
+  };
 
   // The onClick handlers won't execute until after store is fully assigned.
   // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
@@ -49,6 +66,19 @@ function createStore() {
       // This ensures stable references and avoids stale closures
       if (nextState.sessions !== previousSessions) {
         store.historyItems = computeHistoryItems();
+
+        // Detect removed sessions and emit CLOSE_SESSION events
+        var nextSessionIds = new Set(nextState.sessions.map(function (s) {
+          return s.mainFlyoutId;
+        }));
+        previousSessions.forEach(function (session) {
+          if (!nextSessionIds.has(session.mainFlyoutId)) {
+            emitEvent({
+              type: 'CLOSE_SESSION',
+              session: session
+            });
+          }
+        });
       }
       listeners.forEach(function (l) {
         l();
@@ -58,6 +88,7 @@ function createStore() {
   store = {
     getState: getState,
     subscribe: subscribe,
+    subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
     addFlyout: function addFlyout(flyoutId, title, level, size) {
       return dispatch(addFlyoutAction(flyoutId, title, level, size));

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

@@ -201,7 +201,7 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
           css: iconStyles,
           className: "euiFilePicker__icon",
           color: iconColor,
-          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'importAction',
+          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'upload',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), ___EmotionJSX("span", {

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

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "euiFlyoutSlideInRight", {
     return _flyout2.euiFlyoutSlideInRight;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _manager.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "useHasActiveSession", {
   enumerable: true,
   get: function get() {

package/optimize/lib/components/flyout/manager/flyout_managed.js

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _resize_observer = require("../../observer/resize_observer");
@@ -133,11 +134,25 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   // Track if flyout was ever registered to avoid false positives on initial mount
   var wasRegisteredRef = (0, _react.useRef)(false);
 
-  // Register with flyout manager context when open, remove when closed
+  // Track flyoutExistsInManager in a ref to avoid dependency loop
+  // The cleanup function needs the current value but shouldn't cause re-runs
+  var flyoutExistsInManagerRef = (0, _react.useRef)(flyoutExistsInManager);
+
+  // Update ref when flyoutExistsInManager changes
   (0, _react.useEffect)(function () {
+    flyoutExistsInManagerRef.current = flyoutExistsInManager;
+  }, [flyoutExistsInManager]);
+
+  // Register with flyout manager context when open, remove when closed
+  // Using useLayoutEffect to run synchronously before DOM updates
+  (0, _react.useLayoutEffect)(function () {
     addFlyout(flyoutId, title, level, size);
     return function () {
-      closeFlyout(flyoutId);
+      // Only call closeFlyout if it wasn't already called via onClose
+      // This prevents duplicate removal when using Escape/X button
+      if (flyoutExistsInManagerRef.current) {
+        closeFlyout(flyoutId);
+      }
 
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
@@ -173,12 +188,6 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       onActiveCallbackRef.current();
     }
   }, [currentSession, flyoutId, level]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      // Only remove from manager on component unmount, don't trigger close callback
-      closeFlyout(flyoutId);
-    };
-  }, [closeFlyout, flyoutId]);
 
   // Track width changes for flyouts
   var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isActive ? flyoutRef : null, 'width'),
@@ -186,8 +195,19 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
 
   // Pass the stabilized onClose callback to the flyout menu context
   var onClose = function onClose(e) {
-    var _onCloseCallbackRef$c2;
-    (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, e);
+    // CRITICAL: Update manager state FIRST before allowing React to unmount
+    // This prevents race conditions during portal → inline DOM transitions
+    // and ensures cascade close logic runs before DOM cleanup begins
+    // Using flushSync to force synchronous state update completion
+    (0, _reactDom.flushSync)(function () {
+      closeFlyout(flyoutId);
+    });
+
+    // trigger parent callback, unmounts the component
+    if (onCloseCallbackRef.current) {
+      var event = e || new MouseEvent('click');
+      onCloseCallbackRef.current(event);
+    }
   };
 
   // Update width in manager state when it changes

package/optimize/lib/components/flyout/manager/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "flyoutManagerReducer", {
     return _reducer.flyoutManagerReducer;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _store.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "getWidthFromSize", {
   enumerable: true,
   get: function get() {
@@ -161,6 +167,7 @@ Object.defineProperty(exports, "usePushPaddingOffsets", {
 });
 var _actions = require("./actions");
 var _reducer = require("./reducer");
+var _store = require("./store");
 var _provider = require("./provider");
 var _hooks = require("./hooks");
 var _flyout_child = require("./flyout_child");

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

@@ -15,10 +15,15 @@ var _reducer = require("./reducer");
  * Side Public License, v 1.
  */
 
+/**
+ * Events emitted by the flyout manager store for external consumers.
+ */
+
 function createStore() {
   var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _reducer.initialState;
   var currentState = initial;
   var listeners = new Set();
+  var eventListeners = new Set();
   var getState = function getState() {
     return currentState;
   };
@@ -28,6 +33,17 @@ function createStore() {
       listeners.delete(listener);
     };
   };
+  var subscribeToEvents = function subscribeToEvents(listener) {
+    eventListeners.add(listener);
+    return function () {
+      eventListeners.delete(listener);
+    };
+  };
+  var emitEvent = function emitEvent(event) {
+    eventListeners.forEach(function (listener) {
+      listener(event);
+    });
+  };
 
   // The onClick handlers won't execute until after store is fully assigned.
   // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
@@ -56,6 +72,19 @@ function createStore() {
       // This ensures stable references and avoids stale closures
       if (nextState.sessions !== previousSessions) {
         store.historyItems = computeHistoryItems();
+
+        // Detect removed sessions and emit CLOSE_SESSION events
+        var nextSessionIds = new Set(nextState.sessions.map(function (s) {
+          return s.mainFlyoutId;
+        }));
+        previousSessions.forEach(function (session) {
+          if (!nextSessionIds.has(session.mainFlyoutId)) {
+            emitEvent({
+              type: 'CLOSE_SESSION',
+              session: session
+            });
+          }
+        });
       }
       listeners.forEach(function (l) {
         l();
@@ -65,6 +94,7 @@ function createStore() {
   store = {
     getState: getState,
     subscribe: subscribe,
+    subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
     addFlyout: function addFlyout(flyoutId, title, level, size) {
       return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size));

package/optimize/lib/components/form/file_picker/file_picker.js

@@ -209,7 +209,7 @@ var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Co
           css: iconStyles,
           className: "euiFilePicker__icon",
           color: iconColor,
-          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'importAction',
+          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'upload',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), (0, _react2.jsx)("span", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "112.2.0-snapshot.1770205951498",
+  "version": "112.3.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -281,6 +281,5 @@
   ],
   "installConfig": {
     "hoistingLimits": "workspaces"
-  },
-  "stableVersion": "112.2.0"
+  }
 }

package/test-env/components/flyout/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "euiFlyoutSlideInRight", {
     return _flyout2.euiFlyoutSlideInRight;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _manager.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "useHasActiveSession", {
   enumerable: true,
   get: function get() {

package/test-env/components/flyout/manager/flyout_managed.js

@@ -12,6 +12,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDom = require("react-dom");
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _resize_observer = require("../../observer/resize_observer");
@@ -134,11 +135,25 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   // Track if flyout was ever registered to avoid false positives on initial mount
   var wasRegisteredRef = (0, _react.useRef)(false);
 
-  // Register with flyout manager context when open, remove when closed
+  // Track flyoutExistsInManager in a ref to avoid dependency loop
+  // The cleanup function needs the current value but shouldn't cause re-runs
+  var flyoutExistsInManagerRef = (0, _react.useRef)(flyoutExistsInManager);
+
+  // Update ref when flyoutExistsInManager changes
   (0, _react.useEffect)(function () {
+    flyoutExistsInManagerRef.current = flyoutExistsInManager;
+  }, [flyoutExistsInManager]);
+
+  // Register with flyout manager context when open, remove when closed
+  // Using useLayoutEffect to run synchronously before DOM updates
+  (0, _react.useLayoutEffect)(function () {
     addFlyout(flyoutId, title, level, size);
     return function () {
-      closeFlyout(flyoutId);
+      // Only call closeFlyout if it wasn't already called via onClose
+      // This prevents duplicate removal when using Escape/X button
+      if (flyoutExistsInManagerRef.current) {
+        closeFlyout(flyoutId);
+      }
 
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
@@ -174,12 +189,6 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       onActiveCallbackRef.current();
     }
   }, [currentSession, flyoutId, level]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      // Only remove from manager on component unmount, don't trigger close callback
-      closeFlyout(flyoutId);
-    };
-  }, [closeFlyout, flyoutId]);
 
   // Track width changes for flyouts
   var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isActive ? flyoutRef : null, 'width'),
@@ -187,8 +196,19 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
 
   // Pass the stabilized onClose callback to the flyout menu context
   var onClose = function onClose(e) {
-    var _onCloseCallbackRef$c2;
-    (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, e);
+    // CRITICAL: Update manager state FIRST before allowing React to unmount
+    // This prevents race conditions during portal → inline DOM transitions
+    // and ensures cascade close logic runs before DOM cleanup begins
+    // Using flushSync to force synchronous state update completion
+    (0, _reactDom.flushSync)(function () {
+      closeFlyout(flyoutId);
+    });
+
+    // trigger parent callback, unmounts the component
+    if (onCloseCallbackRef.current) {
+      var event = e || new MouseEvent('click');
+      onCloseCallbackRef.current(event);
+    }
   };
 
   // Update width in manager state when it changes

package/test-env/components/flyout/manager/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "flyoutManagerReducer", {
     return _reducer.flyoutManagerReducer;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _store.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "getWidthFromSize", {
   enumerable: true,
   get: function get() {
@@ -161,6 +167,7 @@ Object.defineProperty(exports, "usePushPaddingOffsets", {
 });
 var _actions = require("./actions");
 var _reducer = require("./reducer");
+var _store = require("./store");
 var _provider = require("./provider");
 var _hooks = require("./hooks");
 var _flyout_child = require("./flyout_child");

package/test-env/components/flyout/manager/store.js

@@ -15,10 +15,15 @@ var _reducer = require("./reducer");
  * Side Public License, v 1.
  */
 
+/**
+ * Events emitted by the flyout manager store for external consumers.
+ */
+
 function createStore() {
   var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _reducer.initialState;
   var currentState = initial;
   var listeners = new Set();
+  var eventListeners = new Set();
   var getState = function getState() {
     return currentState;
   };
@@ -28,6 +33,17 @@ function createStore() {
       listeners.delete(listener);
     };
   };
+  var subscribeToEvents = function subscribeToEvents(listener) {
+    eventListeners.add(listener);
+    return function () {
+      eventListeners.delete(listener);
+    };
+  };
+  var emitEvent = function emitEvent(event) {
+    eventListeners.forEach(function (listener) {
+      listener(event);
+    });
+  };
 
   // The onClick handlers won't execute until after store is fully assigned.
   // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
@@ -56,6 +72,19 @@ function createStore() {
       // This ensures stable references and avoids stale closures
       if (nextState.sessions !== previousSessions) {
         store.historyItems = computeHistoryItems();
+
+        // Detect removed sessions and emit CLOSE_SESSION events
+        var nextSessionIds = new Set(nextState.sessions.map(function (s) {
+          return s.mainFlyoutId;
+        }));
+        previousSessions.forEach(function (session) {
+          if (!nextSessionIds.has(session.mainFlyoutId)) {
+            emitEvent({
+              type: 'CLOSE_SESSION',
+              session: session
+            });
+          }
+        });
       }
       listeners.forEach(function (l) {
         l();
@@ -65,6 +94,7 @@ function createStore() {
   store = {
     getState: getState,
     subscribe: subscribe,
+    subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
     addFlyout: function addFlyout(flyoutId, title, level, size) {
       return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size));

package/test-env/components/form/file_picker/file_picker.js

@@ -210,7 +210,7 @@ var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Co
           css: iconStyles,
           className: "euiFilePicker__icon",
           color: iconColor,
-          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'importAction',
+          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'upload',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), (0, _react2.jsx)("span", {