@atlaskit/navigation-system/dist/es2019/ui/page-layout/top-nav/top-nav.js

The latest navigation system for Atlassian apps.

/* top-nav.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./top-nav.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { startTransition, useCallback, useContext, useState } from 'react';
import { componentWithFG } from '@atlaskit/platform-feature-flags-react/component-with-fg';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
import { useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme-new';
import { UNSAFE_topNavVar, topNavMountedVar } from '../constants';
import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
import { HoistCssVarToLocalGrid } from '../hoist-css-var-to-local-grid';
import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
import { useLayoutId } from '../use-layout-id';
import { TopNavElementContext } from './top-nav-element-context';
import { useMeasuredTopNavBreakpoints } from './use-measured-top-nav-breakpoints';

/**
 * 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
 */
const styles = {
  remProbe: "_kqswstnw _3um015vq _lcxvglyw _1bsb1j6v _4t3iidpf",
  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi",
  viewportLayout: "_1j8b18ax",
  container: "_18zridpf _1f38jrq2 _7cca15wb _1ul9idpf _1e0c1ule",
  containerLayout: "_zulpu2gc _18zrutpp _1e0c11p5 _yv0e14iv _4cvr1h6o _vchhusvi _4t3i1osq _1ul9idpf _1oae1txw _andq1wug _17hf1ris _1v3t1vi7 _121jglyw _dv901txw _17sxglyw _4gtwglyw _40201vi7 _1gd11txw _d6vu1bgi _1vdu11p5 _tyr51osq _t7c0glyw _f4az18ax _1nd111p5 _1py31ris _orr21txw _gaza1ris _e5ixp2n4 _8hhxp2n4 _pdk61txw _1x9fglyw"
};
/**
 * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
 */
function TopNavOld({
  children,
  xcss,
  height: heightProp,
  skipLinkLabel = 'Top Bar',
  testId,
  id: providedId,
  customTheme: customThemeConfig
}) {
  const [topNavElement, setTopNavElement] = useState(null);
  const [remProbe, setRemProbe] = useState(null);
  // Ref registration must also be non-urgent while navigation is hydrating.
  // Otherwise its ancestor update can force a pending Suspense boundary to fall back.
  const topNavRef = useCallback(element => {
    startTransition(() => setTopNavElement(element));
  }, []);
  const remProbeRef = useCallback(element => {
    startTransition(() => setRemProbe(element));
  }, []);
  const breakpoints = useMeasuredTopNavBreakpoints(topNavElement, remProbe);
  const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
  const id = useLayoutId({
    providedId
  });
  useSkipLinkInternal({
    id,
    label: skipLinkLabel,
    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
  });
  const height = heightProp !== null && heightProp !== void 0 ? heightProp : fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
  const customTheme = useCustomTheme(customThemeConfig);
  return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
    value: customTheme.isEnabled
  }, /*#__PURE__*/React.createElement("header", {
    ref: fg('platform-dst-chat-panel-layout') ? topNavRef : undefined,
    id: id,
    "data-layout-slot": true,
    className: ax([styles.root, fg('platform-dst-chat-panel-layout') ? styles.container : styles.viewportLayout, xcss]),
    "data-testid": testId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style: customTheme.isEnabled ? customTheme.style : undefined
  }, fg('platform-dst-chat-panel-layout') && /*#__PURE__*/React.createElement("span", {
    ref: remProbeRef,
    "aria-hidden": "true",
    className: ax([styles.remProbe])
  }), /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
    variableName: 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(DangerouslyHoistCssVarToDocumentRoot, {
    variableName: UNSAFE_topNavVar,
    value: height
  })
  // ------ END UNSAFE STYLES ------
  , fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(TopNavElementContext.Provider, {
    value: breakpoints
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.containerLayout])
  }, children)) : children));
}

/**
 * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
 */
function TopNavNew({
  children,
  xcss,
  height: heightProp,
  skipLinkLabel = 'Top Bar',
  testId,
  id: providedId,
  customTheme: customThemeConfig
}) {
  const [topNavElement, setTopNavElement] = useState(null);
  const [remProbe, setRemProbe] = useState(null);
  // Ref registration must also be non-urgent while navigation is hydrating.
  // Otherwise its ancestor update can force a pending Suspense boundary to fall back.
  const topNavRef = useCallback(element => {
    startTransition(() => setTopNavElement(element));
  }, []);
  const remProbeRef = useCallback(element => {
    startTransition(() => setRemProbe(element));
  }, []);
  const breakpoints = useMeasuredTopNavBreakpoints(topNavElement, remProbe);
  const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
  const id = useLayoutId({
    providedId
  });
  useSkipLinkInternal({
    id,
    label: skipLinkLabel,
    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
  });
  const height = heightProp !== null && heightProp !== void 0 ? heightProp : fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
  const customTheme = useCustomThemeNew(customThemeConfig);
  const hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
  return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
    value: customTheme.isEnabled
  }, /*#__PURE__*/React.createElement(HasDefaultBackgroundColorContext.Provider, {
    value: hasDefaultBackground
  }, /*#__PURE__*/React.createElement("header", {
    ref: fg('platform-dst-chat-panel-layout') ? topNavRef : undefined,
    id: id,
    "data-layout-slot": true,
    className: ax([styles.root, fg('platform-dst-chat-panel-layout') ? styles.container : styles.viewportLayout, xcss]),
    "data-testid": testId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style: customTheme.isEnabled ? customTheme.style : undefined
  }, fg('platform-dst-chat-panel-layout') && /*#__PURE__*/React.createElement("span", {
    ref: remProbeRef,
    "aria-hidden": "true",
    className: ax([styles.remProbe])
  }), /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
    variableName: 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(DangerouslyHoistCssVarToDocumentRoot, {
    variableName: UNSAFE_topNavVar,
    value: height
  })
  // ------ END UNSAFE STYLES ------
  , fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(TopNavElementContext.Provider, {
    value: breakpoints
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.containerLayout])
  }, children)) : children)));
}

/**
 * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
 */
export const TopNav = componentWithFG('platform_dst_nav4_custom_theming_fhs_1', TopNavNew, TopNavOld);