@elastic/eui/lib/components/flyout/use_flyout_z_index.js

Elastic UI Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useEuiFlyoutZIndex = void 0;
var _services = require("../../services");
/*
 * 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.
 */

/**
 * @internal
 */

var calculateZIndex = function calculateZIndex(baseLevel, isChildFlyout) {
  var level = Number(baseLevel);
  return {
    // Child flyouts slide in from below and need to have a lower z-index
    flyoutZIndex: isChildFlyout ? level - 1 : level,
    maskZIndex: level - 2
  };
};

/**
 * @internal
 */
var useEuiFlyoutZIndex = exports.useEuiFlyoutZIndex = function useEuiFlyoutZIndex(_ref) {
  var _ref$headerZindexLoca = _ref.headerZindexLocation,
    headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'below' : _ref$headerZindexLoca,
    isPushed = _ref.isPushed,
    managedFlyoutIndex = _ref.managedFlyoutIndex,
    isChildFlyout = _ref.isChildFlyout;
  var _useEuiTheme = (0, _services.useEuiTheme)(),
    euiTheme = _useEuiTheme.euiTheme;
  var baseLevel = Number(euiTheme.levels.flyout);

  // headerZindexLocation 'above' uses mask-level z-index so the flyout stacks
  // above fixed headers (which typically use a high z-index).
  if (!isPushed && headerZindexLocation === 'above') {
    baseLevel = Number(euiTheme.levels.mask);
  }
  baseLevel += managedFlyoutIndex;
  return calculateZIndex(baseLevel, isChildFlyout);
};