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

Elastic UI Component Library

var _excluded = ["as", "onClose", "onActive", "session", "historyKey"];
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 _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; }
/*
 * 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 PropTypes from "prop-types";
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.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/#flyout-session-management)
     * documentation to learn more.
     * @default undefined (auto-inherit when nested, otherwise 'never')
     */
  session: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired, PropTypes.any.isRequired]),
  /**
     * Optional Symbol to scope flyout history. Only flyouts that receive the same Symbol reference share Back button and history; omit to get a unique group per session.
     * @default undefined (each session gets a unique key and does not share history)
     */
  historyKey: PropTypes.any,
  /**
     * Callback fired when the flyout becomes active/visible, which may happen programmatically from history navigation.
     */
  onActive: PropTypes.func,
  /**
     * The HTML element to render as the flyout container.
     */
  as: PropTypes.any
};
EuiFlyout.displayName = 'EuiFlyout';