@elastic/eui/optimize/es/components/flyout/flyout.js

Elastic UI Component Library

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["as", "onClose", "onActive", "session", "historyKey"];
/*
 * 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 React, { useRef, forwardRef } from 'react';
import { usePropsWithComponentDefaults } from '../provider/component_defaults';
import { EuiFlyoutComponent } from './flyout.component';
import { EuiFlyoutChild, EuiFlyoutMain, useHasActiveSession } from './manager';
import { EuiFlyoutMenuContext } from './flyout_menu_context';
import { useIsInsideParentFlyout } from './flyout_parent_context';
import { SESSION_INHERIT, SESSION_NEVER, SESSION_START } from './manager/const';
import { jsx as ___EmotionJSX } from "@emotion/react";
export { FLYOUT_SIDES, FLYOUT_PADDING_SIZES, FLYOUT_SIZES, FLYOUT_TYPES, FLYOUT_MENU_DISPLAY_MODES } from './const';
export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
    as = _usePropsWithComponen.as,
    onClose = _usePropsWithComponen.onClose,
    onActive = _usePropsWithComponen.onActive,
    session = _usePropsWithComponen.session,
    historyKey = _usePropsWithComponen.historyKey,
    rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
  var hasActiveSession = useHasActiveSession();
  var isInsideParentFlyout = useIsInsideParentFlyout();
  var isUnmanagedFlyout = useRef(false);

  /*
   * 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)
   */

  // Determine effective session behavior when session is undefined
  var effectiveSession = session === undefined && isInsideParentFlyout && hasActiveSession ? SESSION_INHERIT : session !== null && session !== void 0 ? session : SESSION_NEVER;
  if (effectiveSession !== SESSION_NEVER) {
    if (effectiveSession === 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;
      }
      return ___EmotionJSX(EuiFlyoutMain, _extends({}, rest, {
        historyKey: historyKey,
        onClose: onClose,
        onActive: onActive,
        as: "div",
        ref: ref
      }));
    }

    // session=inherit: auto-join existing session as child
    if (hasActiveSession && effectiveSession === SESSION_INHERIT) {
      return ___EmotionJSX(EuiFlyoutChild, _extends({}, rest, {
        historyKey: historyKey,
        onClose: onClose,
        onActive: onActive,
        as: "div",
        ref: ref
      }));
    }
  }
  isUnmanagedFlyout.current = true;
  return ___EmotionJSX(EuiFlyoutMenuContext.Provider, {
    value: {
      onClose: onClose
    }
  }, ___EmotionJSX(EuiFlyoutComponent, _extends({}, rest, {
    onClose: onClose,
    as: as,
    ref: ref
  })));
});
EuiFlyout.displayName = 'EuiFlyout';