@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
209 lines (206 loc) • 11.1 kB
JavaScript
/* top-nav.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TopNav = void 0;
require("./top-nav.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _componentWithFg = require("@atlaskit/platform-feature-flags-react/component-with-fg");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
var _hasDefaultBackgroundColorContext = require("../../top-nav-items/themed/has-default-background-color-context");
var _useCustomTheme = require("../../top-nav-items/themed/use-custom-theme");
var _useCustomThemeNew = require("../../top-nav-items/themed/use-custom-theme-new");
var _constants = require("../constants");
var _dangerouslyHoistCssVarToDocumentRoot = require("../dangerously-hoist-css-var-to-document-root");
var _hoistCssVarToLocalGrid = require("../hoist-css-var-to-local-grid");
var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
var _useLayoutId = require("../use-layout-id");
var _topNavElementContext = require("./top-nav-element-context");
var _useMeasuredTopNavBreakpoints = require("./use-measured-top-nav-breakpoints");
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 = {
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 = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
topNavElement = _useState2[0],
setTopNavElement = _useState2[1];
var _useState3 = (0, _react.useState)(null),
_useState4 = (0, _slicedToArray2.default)(_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 = (0, _react.useCallback)(function (element) {
(0, _react.startTransition)(function () {
return setTopNavElement(element);
});
}, []);
var remProbeRef = (0, _react.useCallback)(function (element) {
(0, _react.startTransition)(function () {
return setRemProbe(element);
});
}, []);
var breakpoints = (0, _useMeasuredTopNavBreakpoints.useMeasuredTopNavBreakpoints)(topNavElement, remProbe);
var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
var id = (0, _useLayoutId.useLayoutId)({
providedId: providedId
});
(0, _useSkipLinkInternal.useSkipLinkInternal)({
id: id,
label: skipLinkLabel,
isHidden: (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')
});
var height = heightProp !== null && heightProp !== void 0 ? heightProp : (0, _fg.fg)('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
var customTheme = (0, _useCustomTheme.useCustomTheme)(customThemeConfig);
return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
value: customTheme.isEnabled
}, /*#__PURE__*/React.createElement("header", {
ref: (0, _fg.fg)('platform-dst-chat-panel-layout') ? topNavRef : undefined,
id: id,
"data-layout-slot": true,
className: (0, _runtime.ax)([styles.root, (0, _fg.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
}, (0, _fg.fg)('platform-dst-chat-panel-layout') && /*#__PURE__*/React.createElement("span", {
ref: remProbeRef,
"aria-hidden": "true",
className: (0, _runtime.ax)([styles.remProbe])
}), /*#__PURE__*/React.createElement(_hoistCssVarToLocalGrid.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(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
variableName: _constants.UNSAFE_topNavVar,
value: height
})
// ------ END UNSAFE STYLES ------
, (0, _fg.fg)('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(_topNavElementContext.TopNavElementContext.Provider, {
value: breakpoints
}, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.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 = (0, _react.useState)(null),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
topNavElement = _useState6[0],
setTopNavElement = _useState6[1];
var _useState7 = (0, _react.useState)(null),
_useState8 = (0, _slicedToArray2.default)(_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 = (0, _react.useCallback)(function (element) {
(0, _react.startTransition)(function () {
return setTopNavElement(element);
});
}, []);
var remProbeRef = (0, _react.useCallback)(function (element) {
(0, _react.startTransition)(function () {
return setRemProbe(element);
});
}, []);
var breakpoints = (0, _useMeasuredTopNavBreakpoints.useMeasuredTopNavBreakpoints)(topNavElement, remProbe);
var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
var id = (0, _useLayoutId.useLayoutId)({
providedId: providedId
});
(0, _useSkipLinkInternal.useSkipLinkInternal)({
id: id,
label: skipLinkLabel,
isHidden: (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')
});
var height = heightProp !== null && heightProp !== void 0 ? heightProp : (0, _fg.fg)('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
var customTheme = (0, _useCustomThemeNew.useCustomThemeNew)(customThemeConfig);
var hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
value: customTheme.isEnabled
}, /*#__PURE__*/React.createElement(_hasDefaultBackgroundColorContext.HasDefaultBackgroundColorContext.Provider, {
value: hasDefaultBackground
}, /*#__PURE__*/React.createElement("header", {
ref: (0, _fg.fg)('platform-dst-chat-panel-layout') ? topNavRef : undefined,
id: id,
"data-layout-slot": true,
className: (0, _runtime.ax)([styles.root, (0, _fg.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
}, (0, _fg.fg)('platform-dst-chat-panel-layout') && /*#__PURE__*/React.createElement("span", {
ref: remProbeRef,
"aria-hidden": "true",
className: (0, _runtime.ax)([styles.remProbe])
}), /*#__PURE__*/React.createElement(_hoistCssVarToLocalGrid.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(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
variableName: _constants.UNSAFE_topNavVar,
value: height
})
// ------ END UNSAFE STYLES ------
, (0, _fg.fg)('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(_topNavElementContext.TopNavElementContext.Provider, {
value: breakpoints
}, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.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.
*/
var TopNav = exports.TopNav = (0, _componentWithFg.componentWithFG)('platform_dst_nav4_custom_theming_fhs_1', TopNavNew, TopNavOld);