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

Elastic UI Component Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.EuiFlyoutChild = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _services = require("../../../services");
var _flyout_managed = require("./flyout_managed");
var _hooks = require("./hooks");
var _const = require("./const");
var _const2 = require("../const");
var _react2 = require("@emotion/react");
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.
 */
/**
 * 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.
 */
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; }
/**
 * Managed child flyout that renders alongside or stacked over the main flyout,
 * depending on the current layout mode. Handles required managed flyout props.
 */
var EuiFlyoutChild = exports.EuiFlyoutChild = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var _sessions, _state$flyouts$find, _state$layoutMode;
  var customCss = _ref.css,
    _ref$side = _ref.side,
    side = _ref$side === void 0 ? _const2.DEFAULT_SIDE : _ref$side,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var _useEuiTheme = (0, _services.useEuiTheme)(),
    euiTheme = _useEuiTheme.euiTheme;

  // Performance: read context once and derive all needed values inline
  var context = (0, _hooks.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 : _const.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 === _const.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 = (0, _defineProperty2.default)({}, side, "var(--euiFlyoutMainWidth, ".concat(mainWidth, "px)"));
  } else if (layoutMode === _const.LAYOUT_MODE_STACKED) {
    style = {
      zIndex: Number(euiTheme.levels.flyout) + 2
    };
  }
  return (0, _react2.jsx)(_flyout_managed.EuiManagedFlyout, (0, _extends2.default)({}, props, {
    ref: ref,
    style: style,
    level: _const.LEVEL_CHILD,
    type: "overlay",
    ownFocus: false,
    side: side,
    css: customCss
  }));
});
EuiFlyoutChild.displayName = 'EuiFlyoutChild';