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

Elastic UI Component Library

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["css", "side"];
/*
 * 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, { forwardRef } from 'react';
import { useEuiTheme } from '../../../services';
import { EuiManagedFlyout } from './flyout_managed';
import { useFlyoutManager } from './hooks';
import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_CHILD } from './const';
import { DEFAULT_SIDE } from '../const';

/**
 * Props for `EuiFlyoutChild`, a managed child flyout that pairs with a main flyout.
 *
 * Notes:
 * - `type`, `side`, and `level` are fixed by the component and thus omitted.
 */
import { jsx as ___EmotionJSX } from "@emotion/react";
/**
 * Managed child flyout that renders alongside or stacked over the main flyout,
 * depending on the current layout mode. Handles required managed flyout props.
 */
export var EuiFlyoutChild = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _sessions, _state$flyouts$find, _state$layoutMode;
  var customCss = _ref.css,
    _ref$side = _ref.side,
    side = _ref$side === void 0 ? DEFAULT_SIDE : _ref$side,
    props = _objectWithoutProperties(_ref, _excluded);
  var _useEuiTheme = useEuiTheme(),
    euiTheme = _useEuiTheme.euiTheme;

  // Performance: read context once and derive all needed values inline
  var context = useFlyoutManager();
  var state = context === null || context === void 0 ? void 0 : context.state;
  var sessions = state === null || state === void 0 ? void 0 : state.sessions;
  var currentSession = sessions ? (_sessions = sessions[sessions.length - 1]) !== null && _sessions !== void 0 ? _sessions : null : null;
  var mainFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId;
  var mainFlyout = mainFlyoutId ? (_state$flyouts$find = state === null || state === void 0 ? void 0 : state.flyouts.find(function (f) {
    return f.flyoutId === mainFlyoutId;
  })) !== null && _state$flyouts$find !== void 0 ? _state$flyouts$find : null : null;
  var mainWidth = mainFlyout === null || mainFlyout === void 0 ? void 0 : mainFlyout.width;
  var layoutMode = (_state$layoutMode = state === null || state === void 0 ? void 0 : state.layoutMode) !== null && _state$layoutMode !== void 0 ? _state$layoutMode : LAYOUT_MODE_SIDE_BY_SIDE;

  // Runtime validation: prevent orphan child flyouts
  if (!mainFlyout) {
    var errorMessage = 'EuiFlyoutChild must be used with an EuiFlyoutMain. ' + 'This usually means the main flyout was not rendered before the child flyout.';

    // In development, throw an error to catch the issue early
    if (process.env.NODE_ENV === 'development') {
      throw new Error(errorMessage);
    }

    // In production, log a warning and prevent rendering
    console.error('EuiFlyoutChild validation failed:', errorMessage);
    return null;
  }
  var style = {};
  if (mainWidth && layoutMode === LAYOUT_MODE_SIDE_BY_SIDE) {
    // Use the CSS custom property for synchronous tracking during resize.
    // Falls back to the pixel value from manager state when the variable
    // is not set (e.g. main flyout is not actively being resized).
    style = _defineProperty({}, side, "var(--euiFlyoutMainWidth, ".concat(mainWidth, "px)"));
  } else if (layoutMode === LAYOUT_MODE_STACKED) {
    style = {
      zIndex: Number(euiTheme.levels.flyout) + 2
    };
  }
  return ___EmotionJSX(EuiManagedFlyout, _extends({}, props, {
    ref: ref,
    style: style,
    level: LEVEL_CHILD,
    type: "overlay",
    ownFocus: false,
    side: side,
    css: customCss
  }));
});
EuiFlyoutChild.displayName = 'EuiFlyoutChild';