/* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TopNav = TopNav;
require("./top-nav.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
var _useCustomTheme = require("../../top-nav-items/themed/use-custom-theme");
var _constants = require("../constants");
var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
var _hoistUtils = require("../hoist-utils");
var _idUtils = require("../id-utils");
var _useSideNavVisibility2 = require("../side-nav/use-side-nav-visibility");
var _useOpenLayerCount = require("../use-open-layer-count");
var _excluded = ["backgroundColor"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * Styles for the container for the top nav items.
 *
 * The background and border are applied to a different element for z-indexing reasons:
 *
 * - The items sit above the expanded side nav
 * - The background sits below the expanded side nav
 */
var styles = {
  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
  fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
  fullHeightSidebarWithLayeringFixes: "_1pbycs5v _lcxv1wug _bfhkvuon _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x",
  fullHeightSidebarWithLayeringFixesAndOpenLayer: "_1pby11wp"
};

/**
 * Styles for the visible 'bar' of the top nav, including background and border.
 *
 * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
 */
var backgroundStyles = {
  root: "_nd5l8cbt _179ria51 _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
  sideNavExpanded: "_hyzqcs5v"
};

/**
 * Namespaces to check for open layers within the top nav.
 * When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
 *
 * Placed outside the component for stability, as the list is used as an effect dependency.
 */
var topNavOpenLayerNamespaces = [_constants.openLayerObserverTopNavStartNamespace, _constants.openLayerObserverTopNavMiddleNamespace, _constants.openLayerObserverTopNavEndNamespace];

/**
 * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
 */
function TopNav(_ref) {
  var children = _ref.children,
    xcss = _ref.xcss,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 48 : _ref$height,
    _ref$skipLinkLabel = _ref.skipLinkLabel,
    skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Top Bar' : _ref$skipLinkLabel,
    testId = _ref.testId,
    providedId = _ref.id,
    UNSAFE_theme = _ref.UNSAFE_theme;
  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
  var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
  var id = (0, _idUtils.useLayoutId)({
    providedId: providedId
  });
  (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
  var customTheme = (0, _useCustomTheme.useCustomTheme)(UNSAFE_theme);

  /**
   * Note: this is no longer the case when fg('platform-dst-side-nav-layering-fixes') is enabled.
   *
   * With the full height sidebar we have a foreground and background element,
   * so we need to apply the custom theme styles to the correct element.
   *
   * The foreground element should not have a background color,
   * and the background element doesn't need any of the other styles.
   */
  var _useMemo = (0, _react.useMemo)(function () {
      if (!customTheme.isEnabled) {
        return {
          backgroundStyle: undefined,
          foregroundStyle: undefined
        };
      }
      var _customTheme$style = customTheme.style,
        backgroundColor = _customTheme$style.backgroundColor,
        foregroundStyle = (0, _objectWithoutProperties2.default)(_customTheme$style, _excluded);
      return {
        backgroundStyle: {
          backgroundColor: backgroundColor
        },
        foregroundStyle: foregroundStyle
      };
    }, [customTheme]),
    backgroundStyle = _useMemo.backgroundStyle,
    foregroundStyle = _useMemo.foregroundStyle;
  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)(),
    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
  var hasOpenPopup = (0, _useOpenLayerCount.useHasOpenLayers)({
    namespaces: topNavOpenLayerNamespaces,
    type: 'popup'
  });
  return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
    value: customTheme.isEnabled
  }, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
    "data-layout-slot": true,
    "aria-hidden": true
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style: isFhsEnabled ? backgroundStyle : undefined,
    className: (0, _runtime.ax)([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
  }), /*#__PURE__*/React.createElement("header", {
    id: id,
    "data-layout-slot": true,
    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, hasOpenPopup && isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixesAndOpenLayer, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
    "data-testid": testId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style:
    // When the layering fixes are enabled, we no longer have separate elements for the foreground and background.
    isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
  }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
    variableName: _constants.topNavMountedVar,
    value: height
  }), dangerouslyHoistSlotSizes &&
  /*#__PURE__*/
  // ------ START UNSAFE STYLES ------
  // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
  // When they aren't needed anymore we can delete them wholesale.
  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
    variableName: _constants.UNSAFE_topNavVar,
    value: height
  })
  // ------ END UNSAFE STYLES ------
  , children));
}