@elastic/eui 110.0.0 → 111.1.0

package/lib/components/flyout/flyout.js

@@ -4,25 +4,42 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPES = exports.SIZES = exports.SIDES = exports.PADDING_SIZES = exports.EuiFlyout = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.EuiFlyout = void 0;
+Object.defineProperty(exports, "FLYOUT_PADDING_SIZES", {
+  enumerable: true,
+  get: function get() {
+    return _const2.FLYOUT_PADDING_SIZES;
+  }
+});
+Object.defineProperty(exports, "FLYOUT_SIDES", {
+  enumerable: true,
+  get: function get() {
+    return _const2.FLYOUT_SIDES;
+  }
+});
+Object.defineProperty(exports, "FLYOUT_SIZES", {
+  enumerable: true,
+  get: function get() {
+    return _const2.FLYOUT_SIZES;
+  }
+});
+Object.defineProperty(exports, "FLYOUT_TYPES", {
+  enumerable: true,
+  get: function get() {
+    return _const2.FLYOUT_TYPES;
+  }
+});
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _services = require("../../services");
-var _global_styling = require("../../global_styling");
-var _focus_trap = require("../focus_trap");
-var _overlay_mask = require("../overlay_mask");
-var _i18n = require("../i18n");
-var _resize_observer = require("../observer/resize_observer");
-var _portal = require("../portal");
-var _accessibility = require("../accessibility");
-var _flyout_close_button = require("./_flyout_close_button");
-var _flyout = require("./flyout.styles");
-var _flyout_child = require("./flyout_child");
-var _flyout_child_manager = require("./flyout_child_manager");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _component_defaults = require("../provider/component_defaults");
+var _flyout = require("./flyout.component");
+var _manager = require("./manager");
+var _flyout_menu_context = require("./flyout_menu_context");
+var _flyout_parent_context = require("./flyout_parent_context");
+var _const = require("./manager/const");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby"];
+var _const2 = require("./const");
+var _excluded = ["as", "onClose", "onActive", "session"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,386 +47,92 @@ var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonP
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-var TYPES = exports.TYPES = ['push', 'overlay'];
-var SIDES = exports.SIDES = ['left', 'right'];
-var SIZES = exports.SIZES = ['s', 'm', 'l'];
-/**
- * Custom type checker for named flyout sizes since the prop
- * `size` can also be CSSProperties['width'] (string | number)
- */
-function isEuiFlyoutSizeNamed(value) {
-  return SIZES.includes(value);
-}
-var PADDING_SIZES = exports.PADDING_SIZES = ['none', 's', 'm', 'l'];
-var defaultElement = 'div';
 var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
-    className = _usePropsWithComponen.className,
-    children = _usePropsWithComponen.children,
     as = _usePropsWithComponen.as,
-    _usePropsWithComponen2 = _usePropsWithComponen.hideCloseButton,
-    hideCloseButton = _usePropsWithComponen2 === void 0 ? false : _usePropsWithComponen2,
-    closeButtonProps = _usePropsWithComponen.closeButtonProps,
-    _usePropsWithComponen3 = _usePropsWithComponen.closeButtonPosition,
-    _closeButtonPosition = _usePropsWithComponen3 === void 0 ? 'inside' : _usePropsWithComponen3,
     onClose = _usePropsWithComponen.onClose,
-    _usePropsWithComponen4 = _usePropsWithComponen.ownFocus,
-    ownFocus = _usePropsWithComponen4 === void 0 ? true : _usePropsWithComponen4,
-    _usePropsWithComponen5 = _usePropsWithComponen.side,
-    side = _usePropsWithComponen5 === void 0 ? 'right' : _usePropsWithComponen5,
-    _usePropsWithComponen6 = _usePropsWithComponen.size,
-    size = _usePropsWithComponen6 === void 0 ? 'm' : _usePropsWithComponen6,
-    _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
-    paddingSize = _usePropsWithComponen7 === void 0 ? 'l' : _usePropsWithComponen7,
-    _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
-    maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
-    style = _usePropsWithComponen.style,
-    maskProps = _usePropsWithComponen.maskProps,
-    _usePropsWithComponen9 = _usePropsWithComponen.type,
-    type = _usePropsWithComponen9 === void 0 ? 'overlay' : _usePropsWithComponen9,
-    outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
-    _usePropsWithComponen10 = _usePropsWithComponen.pushMinBreakpoint,
-    pushMinBreakpoint = _usePropsWithComponen10 === void 0 ? 'l' : _usePropsWithComponen10,
-    _usePropsWithComponen11 = _usePropsWithComponen.pushAnimation,
-    pushAnimation = _usePropsWithComponen11 === void 0 ? false : _usePropsWithComponen11,
-    _focusTrapProps = _usePropsWithComponen.focusTrapProps,
-    _usePropsWithComponen12 = _usePropsWithComponen.includeFixedHeadersInFocusTrap,
-    includeFixedHeadersInFocusTrap = _usePropsWithComponen12 === void 0 ? true : _usePropsWithComponen12,
-    includeSelectorInFocusTrap = _usePropsWithComponen.includeSelectorInFocusTrap,
-    _ariaDescribedBy = _usePropsWithComponen['aria-describedby'],
+    onActive = _usePropsWithComponen.onActive,
+    session = _usePropsWithComponen.session,
     rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
-  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
-    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
-  var Element = as || defaultElement;
-  var maskRef = (0, _react.useRef)(null);
-
-  // Ref for the main flyout element to pass to context
-  var internalParentFlyoutRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isChildFlyoutOpen = _useState2[0],
-    setIsChildFlyoutOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)('side-by-side'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    childLayoutMode = _useState4[0],
-    setChildLayoutMode = _useState4[1];
-
-  // Check for child flyout
-  var childFlyoutElement = _react.default.Children.toArray(children).find(function (child) {
-    return /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _flyout_child.EuiFlyoutChild || child.type.displayName === 'EuiFlyoutChild');
-  });
-  var hasChildFlyout = !!childFlyoutElement;
-
-  // Validate props, determine close button position and set child flyout classes
-  var closeButtonPosition;
-  var childFlyoutClasses = [];
-  if (hasChildFlyout) {
-    if (side !== 'right') {
-      throw new Error('EuiFlyout: When an EuiFlyoutChild is present, the `side` prop of EuiFlyout must be "right".');
-    }
-    if (!isEuiFlyoutSizeNamed(size) || !['s', 'm'].includes(size)) {
-      throw new Error("EuiFlyout: When an EuiFlyoutChild is present, the `size` prop of EuiFlyout must be \"s\" or \"m\". Received \"".concat(size, "\"."));
-    }
-    if (_closeButtonPosition !== 'inside') {
-      throw new Error('EuiFlyout: When an EuiFlyoutChild is present, the `closeButtonPosition` prop of EuiFlyout must be "inside".');
-    }
-    closeButtonPosition = 'inside';
-    childFlyoutClasses = ['euiFlyout--hasChild', "euiFlyout--hasChild--".concat(childLayoutMode), "euiFlyout--hasChild--".concat(childFlyoutElement.props.size || 's')];
-  } else {
-    closeButtonPosition = _closeButtonPosition;
-  }
-  var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
-  var isPushed = type === 'push' && windowIsLargeEnoughToPush;
-
-  /**
-   * Setting up the refs on the actual flyout element in order to
-   * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element
-   */
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    resizeRef = _useState6[0],
-    setResizeRef = _useState6[1];
-  var setRef = (0, _services.useCombinedRefs)([setResizeRef, ref, internalParentFlyoutRef]);
-  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isPushed ? resizeRef : null, 'width'),
-    width = _useResizeObserver.width;
-  (0, _react.useEffect)(function () {
-    /**
-     * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
-     */
-    if (isPushed) {
-      var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
-      var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
-      document.body.style[paddingSide] = "".concat(width, "px");
-
-      // EUI doesn't use this css variable, but it is useful for consumers
-      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
-      return function () {
-        document.body.style[paddingSide] = '';
-        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
-      };
-    }
-  }, [isPushed, setGlobalCSSVariables, side, width]);
-
-  /**
-   * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
-   */
-  (0, _react.useEffect)(function () {
-    document.body.classList.add('euiBody--hasFlyout');
-    return function () {
-      // Remove the hasFlyout class when the flyout is unmounted
-      document.body.classList.remove('euiBody--hasFlyout');
-    };
-  }, []);
-
-  /**
-   * ESC key closes flyout (always?)
-   */
-  var onKeyDown = (0, _react.useCallback)(function (event) {
-    if (!isPushed && event.key === _services.keys.ESCAPE && !isChildFlyoutOpen) {
-      event.preventDefault();
-      onClose(event);
-    }
-  }, [onClose, isPushed, isChildFlyoutOpen]);
-
-  /**
-   * Set inline styles
-   */
-  var inlineStyles = (0, _react.useMemo)(function () {
-    var widthStyle = !isEuiFlyoutSizeNamed(size) && (0, _global_styling.logicalStyle)('width', size);
-    var maxWidthStyle = typeof maxWidth !== 'boolean' && (0, _global_styling.logicalStyle)('max-width', maxWidth);
-    return _objectSpread(_objectSpread(_objectSpread({}, style), widthStyle), maxWidthStyle);
-  }, [style, maxWidth, size]);
-  var styles = (0, _services.useEuiMemoizedStyles)(_flyout.euiFlyoutStyles);
-  var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], isEuiFlyoutSizeNamed(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
-  var classes = _classnames.default.apply(void 0, ['euiFlyout'].concat(_toConsumableArray(childFlyoutClasses), [className]));
+  var hasActiveSession = (0, _manager.useHasActiveSession)();
+  var isInsideParentFlyout = (0, _flyout_parent_context.useIsInsideParentFlyout)();
+  var isUnmanagedFlyout = (0, _react.useRef)(false);
 
   /*
-   * Trap focus even when `ownFocus={false}`, otherwise closing
-   * the flyout won't return focus to the originating button.
-   *
-   * Set `clickOutsideDisables={true}` when `ownFocus={false}`
-   * to allow non-keyboard users the ability to interact with
-   * elements outside the flyout.
-   *
-   * Set `onClickOutside={onClose}` when `ownFocus` and `type` are the defaults,
-   * or if `outsideClickCloses={true}` to close on clicks that target
-   * (both mousedown and mouseup) the overlay mask.
+   * Flyout routing logic:
+   * - session="start" → Main flyout (creates new session)
+   * - session="inherit" + active session → Child flyout (auto-joins, works across React roots!)
+   * - session="inherit" + no session → Standard flyout
+   * - session="never" → Standard flyout (explicit opt-out)
+   * - session=undefined + inside parent + active session → Child flyout (auto-inherit)
+   * - session=undefined + not inside parent → Standard flyout (default behavior)
    */
-  var flyoutToggle = (0, _react.useRef)(document.activeElement);
-  var _useState7 = (0, _react.useState)([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    focusTrapShards = _useState8[0],
-    setFocusTrapShards = _useState8[1];
-  var focusTrapSelectors = (0, _react.useMemo)(function () {
-    var selectors = [];
-    if (includeSelectorInFocusTrap) {
-      selectors = Array.isArray(includeSelectorInFocusTrap) ? includeSelectorInFocusTrap : [includeSelectorInFocusTrap];
-    }
-    if (includeFixedHeadersInFocusTrap) {
-      selectors.push('.euiHeader[data-fixed-header]');
-    }
-    return selectors;
-  }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
 
-  /**
-   * Finds the shards to include in the focus trap by querying by `focusTrapSelectors`.
-   *
-   * @param shouldAutoFocus Whether to auto-focus the flyout wrapper when the focus trap is activated.
-   * This is necessary because when a flyout is toggled from within a shard, the focus trap's `autoFocus`
-   * feature doesn't work. This logic manually focuses the flyout as a workaround.
-   */
-  var findShards = (0, _react.useCallback)(function () {
-    var shouldAutoFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    if (focusTrapSelectors.length > 0) {
-      var shardsEls = focusTrapSelectors.flatMap(function (selector) {
-        return Array.from(document.querySelectorAll(selector));
-      });
-      setFocusTrapShards(Array.from(shardsEls));
-      if (shouldAutoFocus) {
-        shardsEls.forEach(function (shard) {
-          if (shard.contains(flyoutToggle.current)) {
-            resizeRef === null || resizeRef === void 0 || resizeRef.focus();
-          }
-        });
+  // Determine effective session behavior when session is undefined
+  var effectiveSession = session === undefined && isInsideParentFlyout && hasActiveSession ? _const.SESSION_INHERIT : session !== null && session !== void 0 ? session : _const.SESSION_NEVER;
+  if (effectiveSession !== _const.SESSION_NEVER) {
+    if (effectiveSession === _const.SESSION_START) {
+      // session=start: create new session
+      if (isUnmanagedFlyout.current) {
+        // TODO: @tkajtoch - We need to find a better way to handle the missing event.
+        onClose === null || onClose === void 0 || onClose({});
+        return null;
       }
-    } else {
-      // Clear existing shards if necessary, e.g. switching to `false`
-      setFocusTrapShards(function (shards) {
-        return shards.length ? [] : shards;
-      });
+      return (0, _react2.jsx)(_manager.EuiFlyoutMain, _extends({}, rest, {
+        onClose: onClose,
+        onActive: onActive,
+        as: "div"
+      }));
     }
-  }, [focusTrapSelectors, resizeRef]);
-  (0, _react.useEffect)(function () {
-    // Auto-focus should only happen on initial flyout mount (or when the dependencies change)
-    // because it snaps focus to the flyout wrapper, which steals it from subsequently focused elements.
-    findShards(true);
-    var unsubscribe = _services.focusTrapPubSub.subscribe(function () {
-      return findShards();
-    });
-    return unsubscribe;
-  }, [findShards]);
-  var focusTrapProps = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
-      shards: [].concat(_toConsumableArray(focusTrapShards), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
-    });
-  }, [_focusTrapProps, focusTrapShards]);
 
-  /*
-   * Provide meaningful screen reader instructions/details
-   */
-  var hasOverlayMask = ownFocus && !isPushed;
-  var descriptionId = (0, _services.useGeneratedHtmlId)();
-  var ariaDescribedBy = (0, _classnames.default)(descriptionId, _ariaDescribedBy);
-  var screenReaderDescription = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-      id: descriptionId
-    }, hasOverlayMask ? (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiFlyout.screenReaderModalDialog",
-      default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
-    }) : (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiFlyout.screenReaderNonModalDialog",
-      default: "You are in a non-modal dialog. To close the dialog, press Escape."
-    }), ' ', focusTrapShards.length > 0 && (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiFlyout.screenReaderFocusTrapShards",
-      default: "You can still continue tabbing through other global page landmarks."
-    })));
-  }, [hasOverlayMask, descriptionId, focusTrapShards.length]);
-
-  /*
-   * Trap focus even when `ownFocus={false}`, otherwise closing
-   * the flyout won't return focus to the originating button.
-   *
-   * Set `clickOutsideDisables={true}` when `ownFocus={false}`
-   * to allow non-keyboard users the ability to interact with
-   * elements outside the flyout.
-   *
-   * Set `onClickOutside={onClose}` when `ownFocus` and `type` are the defaults,
-   * or if `outsideClickCloses={true}` to close on clicks that target
-   * (both mousedown and mouseup) the overlay mask.
-   */
-  var onClickOutside = (0, _react.useCallback)(function (event) {
-    // Do not close the flyout for any external click
-    if (outsideClickCloses === false) return undefined;
-    if (hasOverlayMask) {
-      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return onClose(event);
-    } else {
-      // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
+    // session=inherit: auto-join existing session as child
+    if (hasActiveSession && effectiveSession === _const.SESSION_INHERIT) {
+      return (0, _react2.jsx)(_manager.EuiFlyoutChild, _extends({}, rest, {
+        onClose: onClose,
+        onActive: onActive,
+        as: "div"
+      }));
     }
-    // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
-    return undefined;
-  }, [onClose, hasOverlayMask, outsideClickCloses]);
-  var closeButton = !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, _extends({}, closeButtonProps, {
-    onClose: onClose,
-    closeButtonPosition: closeButtonPosition,
-    side: side
-  }));
-
-  // render content within EuiFlyoutChildProvider if childFlyoutElement is present
-  var contentToRender = children;
-  if (hasChildFlyout && childFlyoutElement) {
-    contentToRender = (0, _react2.jsx)(_flyout_child_manager.EuiFlyoutChildProvider, {
-      parentSize: size,
-      parentFlyoutRef: internalParentFlyoutRef,
-      childElement: childFlyoutElement,
-      childrenToRender: children,
-      reportIsChildOpen: setIsChildFlyoutOpen,
-      reportChildLayoutMode: setChildLayoutMode
-    });
-  }
-  return (0, _react2.jsx)(EuiFlyoutWrapper, {
-    hasOverlayMask: hasOverlayMask,
-    maskProps: _objectSpread(_objectSpread({}, maskProps), {}, {
-      maskRef: (0, _services.useCombinedRefs)([maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef, maskRef])
-    }),
-    isPortalled: !isPushed
-  }, (0, _react2.jsx)(_services.EuiWindowEvent, {
-    event: "keydown",
-    handler: onKeyDown
-  }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
-    disabled: isPushed || ownFocus && isChildFlyoutOpen,
-    scrollLock: hasOverlayMask,
-    clickOutsideDisables: !ownFocus,
-    onClickOutside: onClickOutside
-  }, focusTrapProps), (0, _react2.jsx)(Element, _extends({
-    className: classes,
-    css: cssStyles,
-    style: inlineStyles,
-    ref: setRef
-  }, rest, {
-    role: !isPushed ? 'dialog' : rest.role,
-    "aria-modal": !isPushed || undefined,
-    tabIndex: !isPushed ? 0 : rest.tabIndex,
-    "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
-    "data-autofocus": !isPushed || undefined
-  }), !isPushed && screenReaderDescription, closeButton, contentToRender)));
-}
-// React.forwardRef interferes with the inferred element type
-// Casting to ensure correct element prop type checking for `as`
-// e.g., `href` is not on a `div`
-);
-// Recast to allow `displayName`
-EuiFlyout.displayName = 'EuiFlyout';
-
-/**
- * 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.
- */
-var EuiFlyoutWrapper = function EuiFlyoutWrapper(_ref) {
-  var children = _ref.children,
-    hasOverlayMask = _ref.hasOverlayMask,
-    maskProps = _ref.maskProps,
-    isPortalled = _ref.isPortalled;
-  if (hasOverlayMask) {
-    return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, _extends({
-      headerZindexLocation: "below"
-    }, maskProps), children);
-  } else if (isPortalled) {
-    return (0, _react2.jsx)(_portal.EuiPortal, null, children);
-  } else {
-    return (0, _react2.jsx)(_react.default.Fragment, null, children);
   }
+  isUnmanagedFlyout.current = true;
+  return (0, _react2.jsx)(_flyout_menu_context.EuiFlyoutMenuContext.Provider, {
+    value: {
+      onClose: onClose
+    }
+  }, (0, _react2.jsx)(_flyout.EuiFlyoutComponent, _extends({}, rest, {
+    onClose: onClose,
+    as: as,
+    ref: ref
+  })));
+});
+EuiFlyout.propTypes = {
+  /**
+     * Controls the way the session is managed for this flyout.
+     * - `start`: Creates a new flyout session. Use this for the main flyout.
+     * - `inherit`: Inherits an existing session if one is active, otherwise functions as a standard flyout.
+     * - `never`: Disregards session management and always functions as a standard flyout.
+     *
+     * When the `session` prop is undefined (not set), the flyout will automatically inherit from
+     * a parent flyout if it's nested inside one. Otherwise, it defaults to `never`.
+     *
+     * Check out [EuiFlyout session management](https://eui.elastic.co/docs/components/containers/flyout/session-management)
+     * documentation to learn more.
+     * @default undefined (auto-inherit when nested, otherwise 'never')
+     */
+  session: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
+  /**
+     * Callback fired when the flyout becomes active/visible, which may happen programmatically from history navigation.
+     */
+  onActive: _propTypes.default.func,
+  /**
+     * The HTML element to render as the flyout container.
+     */
+  as: _propTypes.default.any
 };
-EuiFlyoutWrapper.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  hasOverlayMask: _propTypes.default.bool.isRequired,
-  maskProps: _propTypes.default.shape({
-    /**
-       * ReactNode to render as this component's content
-       */
-    children: _propTypes.default.node,
-    /**
-       * Should the mask visually sit above or below the EuiHeader (controlled by z-index)
-       */
-    headerZindexLocation: _propTypes.default.oneOf(["above", "below"]),
-    /**
-       * React ref to be passed to the wrapping container
-       */
-    maskRef: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired])
-  }).isRequired,
-  isPortalled: _propTypes.default.bool.isRequired
-};
+EuiFlyout.displayName = 'EuiFlyout';