@elastic/eui 112.2.0 → 112.3.0

package/optimize/es/components/markdown_editor/markdown_editor_toolbar.js

@@ -8,6 +8,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import React, { useContext, forwardRef } from 'react';
+import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../services';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
@@ -86,7 +87,8 @@ var EuiMarkdownEditorToolbarButton = function EuiMarkdownEditorToolbarButton(_re
   }));
 };
 export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var markdownActions = _ref2.markdownActions,
+  var className = _ref2.className,
+    markdownActions = _ref2.markdownActions,
     viewMode = _ref2.viewMode,
     onClickPreview = _ref2.onClickPreview,
     uiPlugins = _ref2.uiPlugins,
@@ -95,6 +97,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
   var _useContext = useContext(EuiMarkdownContext),
     openPluginEditor = _useContext.openPluginEditor,
     readOnly = _useContext.readOnly;
+  var classes = classNames('euiMarkdownEditorToolbar', className);
   var handleMdButtonClick = function handleMdButtonClick(mdButtonId) {
     var actionResult = markdownActions.do(mdButtonId);
     if (actionResult !== true) openPluginEditor(actionResult);
@@ -105,7 +108,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
   return ___EmotionJSX("div", {
     ref: ref,
     css: styles.euiMarkdownEditorToolbar,
-    className: "euiMarkdownEditorToolbar",
+    className: classes,
     "data-test-subj": "euiMarkdownEditorToolbar"
   }, ___EmotionJSX("div", {
     css: styles.euiMarkdownEditorToolbar__buttons,

package/optimize/lib/components/date_picker/super_date_picker/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   AsyncInterval: true,
   EuiSuperDatePicker: true,
   EuiSuperUpdateButton: true,
+  useEuiTimeWindow: true,
   PrettyDuration: true,
   usePrettyDuration: true
 };
@@ -34,6 +35,12 @@ Object.defineProperty(exports, "PrettyDuration", {
     return _pretty_duration.PrettyDuration;
   }
 });
+Object.defineProperty(exports, "useEuiTimeWindow", {
+  enumerable: true,
+  get: function get() {
+    return _time_window_buttons.useEuiTimeWindow;
+  }
+});
 Object.defineProperty(exports, "usePrettyDuration", {
   enumerable: true,
   get: function get() {
@@ -67,4 +74,5 @@ Object.keys(_quick_select_popover).forEach(function (key) {
 var _async_interval = require("./async_interval");
 var _super_date_picker = require("./super_date_picker");
 var _super_update_button = require("./super_update_button");
+var _time_window_buttons = require("./time_window_buttons");
 var _pretty_duration = require("./pretty_duration");

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/optimize/lib/components/icon/assets/server.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+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; }
+var EuiIconServer = function EuiIconServer(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M4.5 11a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1Zm7.5 1H7v-1h5v1ZM4.5 7a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1ZM12 8H7V7h5v1ZM4.5 3a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1ZM12 4H7V3h5v1Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M13 1a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1v1h-1v-1H4v1H3v-1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h10ZM3 13h10v-3H3v3Zm0-4h10V6H3v3Zm0-4h10V2H3v3Z"
+  }));
+};
+var icon = exports.icon = EuiIconServer;

package/optimize/lib/components/icon/icon.js

@@ -31,10 +31,10 @@ var _named_colors = require("./named_colors");
 var _icon = require("./icon.styles");
 var _react3 = require("@emotion/react");
 var _excluded = ["type", "size", "color", "className", "tabIndex", "title", "role", "onIconLoad", "style", "stylesMemoizer", "aria-hidden", "titleId"];
-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; }
 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; }
+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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -102,17 +102,7 @@ var EuiIconClass = exports.EuiIconClass = /*#__PURE__*/function (_PureComponent)
         _this.onIconLoad();
         return;
       }
-      (function (specifier) {
-        return new Promise(function (r) {
-          return r("".concat(specifier));
-        }).then(function (s) {
-          return _interopRequireWildcard(require(s));
-        });
-      })( /* webpackChunkName: "icon.[request]" */
-      // It's important that we don't use a template string here, it
-      // stops webpack from building a dynamic require context.
-      // eslint-disable-next-line prefer-template
-      './assets/' + _icon_map.typeToPathMap[iconType]).then(function (_ref) {
+      _icon_map.typeToPathMap[iconType]().then(function (_ref) {
         var icon = _ref.icon;
         iconComponentCache[iconType] = icon;
         (0, _react2.enqueueStateChange)(function () {