@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
201 lines (198 loc) • 9.27 kB
JavaScript
/* top-nav.tsx generated by @compiled/babel-plugin v3.0.2 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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
*/
var 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(_ref) {
var children = _ref.children,
xcss = _ref.xcss,
heightProp = _ref.height,
_ref$skipLinkLabel = _ref.skipLinkLabel,
skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Top Bar' : _ref$skipLinkLabel,
testId = _ref.testId,
providedId = _ref.id,
customThemeConfig = _ref.customTheme;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
topNavElement = _useState2[0],
setTopNavElement = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
remProbe = _useState4[0],
setRemProbe = _useState4[1];
// Ref registration must also be non-urgent while navigation is hydrating.
// Otherwise its ancestor update can force a pending Suspense boundary to fall back.
var topNavRef = useCallback(function (element) {
startTransition(function () {
return setTopNavElement(element);
});
}, []);
var remProbeRef = useCallback(function (element) {
startTransition(function () {
return setRemProbe(element);
});
}, []);
var breakpoints = useMeasuredTopNavBreakpoints(topNavElement, remProbe);
var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
var id = useLayoutId({
providedId: providedId
});
useSkipLinkInternal({
id: id,
label: skipLinkLabel,
isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
});
var height = heightProp !== null && heightProp !== void 0 ? heightProp : fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
var 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(_ref2) {
var children = _ref2.children,
xcss = _ref2.xcss,
heightProp = _ref2.height,
_ref2$skipLinkLabel = _ref2.skipLinkLabel,
skipLinkLabel = _ref2$skipLinkLabel === void 0 ? 'Top Bar' : _ref2$skipLinkLabel,
testId = _ref2.testId,
providedId = _ref2.id,
customThemeConfig = _ref2.customTheme;
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
topNavElement = _useState6[0],
setTopNavElement = _useState6[1];
var _useState7 = useState(null),
_useState8 = _slicedToArray(_useState7, 2),
remProbe = _useState8[0],
setRemProbe = _useState8[1];
// Ref registration must also be non-urgent while navigation is hydrating.
// Otherwise its ancestor update can force a pending Suspense boundary to fall back.
var topNavRef = useCallback(function (element) {
startTransition(function () {
return setTopNavElement(element);
});
}, []);
var remProbeRef = useCallback(function (element) {
startTransition(function () {
return setRemProbe(element);
});
}, []);
var breakpoints = useMeasuredTopNavBreakpoints(topNavElement, remProbe);
var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
var id = useLayoutId({
providedId: providedId
});
useSkipLinkInternal({
id: id,
label: skipLinkLabel,
isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
});
var height = heightProp !== null && heightProp !== void 0 ? heightProp : fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
var customTheme = useCustomThemeNew(customThemeConfig);
var 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 var TopNav = componentWithFG('platform_dst_nav4_custom_theming_fhs_1', TopNavNew, TopNavOld);