@atlaskit/navigation-system/dist/cjs/ui/page-layout/root.js

The latest navigation system for Atlassian apps.

/* root.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Root = Root;
exports.gridRootId = exports.gridRootFitId = exports.gridRootChatFitId = void 0;
require("./root.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _openLayerObserver = require("@atlaskit/layering/open-layer-observer");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
var _layoutAreaSizingProvider = require("./layout-area-sizing-provider");
var _isSideNavShortcutEnabledProvider = require("./side-nav/is-side-nav-shortcut-enabled-provider");
var _sideNavElementProvider = require("./side-nav/side-nav-element-provider");
var _toggleButtonProvider = require("./side-nav/toggle-button-provider");
var _visibilityProvider = require("./side-nav/visibility-provider");
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); }
// ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
var gridRootFitId = exports.gridRootFitId = "".concat(gridRootId, "-fit");
var gridRootChatFitId = exports.gridRootChatFitId = "".concat(gridRootId, "-chat-fit");
var styles = {
  widthContainer: "_7cca15wb _1f38hx13 _1bsb1osq",
  mainSpace: "_82d6okmw _1cwmtye8 _7cca15wb _1f38hwoh _vchh1ntv _1bsb1raa",
  chatSpace: "_5to3grho _7cca15wb _1f381mry _1bsbjwgu",
  legacyRoot: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
  root: "_1cwmtye8 _1e0c11p5 _1tke1kxc _1bsb4nr3 _1lmcq9em _yv0ei47z _2z0516ab _12ag50j2 _71dl19sb _12fkqmyk _12qzrxre _1rqttswr _xkmggc7l _tyve87m4",
  safetyRail: "_1ciragmp",
  safetyRailWithTopLayer: "_1tvnagmp",
  panelUplift: "_1reozryt _18m9zryt"
};
function LayoutFitContainers(_ref) {
  var children = _ref.children;
  // CSS cannot use custom properties in a size-query condition. Query the
  // remaining capacity instead: these wrappers subtract configured minimums
  // and occupied tracks, while the actual grid keeps its original host width.
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-layout-width-container": "",
    className: (0, _runtime.ax)([styles.widthContainer])
  }, /*#__PURE__*/_react.default.createElement("style", {
    dangerouslySetInnerHTML: {
      __html: "@property --n_layoutW { syntax: '<length>'; inherits: true; initial-value: 0px; }"
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    id: gridRootFitId,
    className: (0, _runtime.ax)([styles.mainSpace])
  }, /*#__PURE__*/_react.default.createElement("div", {
    id: gridRootChatFitId,
    className: (0, _runtime.ax)([styles.chatSpace])
  }, children)));
}

/**
 * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
 * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
 */
function Root(_ref2) {
  var children = _ref2.children,
    xcss = _ref2.xcss,
    _ref2$UNSAFE_dangerou = _ref2.UNSAFE_dangerouslyHoistSlotSizes,
    UNSAFE_dangerouslyHoistSlotSizes = _ref2$UNSAFE_dangerou === void 0 ? false : _ref2$UNSAFE_dangerou,
    _ref2$skipLinksLabel = _ref2.skipLinksLabel,
    skipLinksLabel = _ref2$skipLinksLabel === void 0 ? (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:' : _ref2$skipLinksLabel,
    _ref2$skipLinksTrigge = _ref2.skipLinksTriggerLabel,
    skipLinksTriggerLabel = _ref2$skipLinksTrigge === void 0 ? 'Skip to' : _ref2$skipLinksTrigge,
    testId = _ref2.testId,
    defaultSideNavCollapsed = _ref2.defaultSideNavCollapsed,
    _ref2$isSideNavShortc = _ref2.isSideNavShortcutEnabled,
    isSideNavShortcutEnabled = _ref2$isSideNavShortc === void 0 ? false : _ref2$isSideNavShortc;
  var ref = (0, _react.useRef)(null);
  var isChatPanelLayoutEnabled = (0, _fg.fg)('platform-dst-chat-panel-layout');
  var LayoutProvider = isChatPanelLayoutEnabled ? _layoutAreaSizingProvider.LayoutAreaSizingProvider : _react.default.Fragment;
  var WidthContainer = isChatPanelLayoutEnabled ? LayoutFitContainers : _react.default.Fragment;
  // Top-layer surfaces are found through the DOM, so the observer is only needed when the gate is off.
  var LayerObserverProvider = (0, _fg.fg)('platform-dst-top-layer') ? _react.default.Fragment : _openLayerObserver.OpenLayerObserver;
  (0, _react.useEffect)(function () {
    if (process.env.NODE_ENV !== 'production') {
      var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
      var topLayerGateOn = (0, _fg.fg)('platform-dst-top-layer');
      if (ref.current) {
        Array.from(ref.current.children).forEach(function (child) {
          // Top-layer elements are allowed as direct children when the gate is on.
          var isTopLayerElement = topLayerGateOn && (child.tagName.toLowerCase() === 'dialog' || child.hasAttribute('popover'));
          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot') && !isTopLayerElement) {
            // eslint-disable-next-line no-console
            console.error("Page Layout Error\n\nThis element has been forcibly hidden:\n\n", child, "\n\nAn element was rendered as a child of the page layout root that isn't a page layout component! Resolve this error by moving it into a page layout component.\n\nThis message will not be displayed in production.\n");
          }
        });
      }
    }
  }, []);
  return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, {
    defaultCollapsed: defaultSideNavCollapsed
  }, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_sideNavElementProvider.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_isSideNavShortcutEnabledProvider.IsSideNavShortcutEnabledProvider, {
    isSideNavShortcutEnabled: isSideNavShortcutEnabled
  }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(LayoutProvider, isChatPanelLayoutEnabled ? {
    layoutRef: ref
  } : {}, /*#__PURE__*/_react.default.createElement(LayerObserverProvider, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
    value: UNSAFE_dangerouslyHoistSlotSizes
  }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
    label: skipLinksLabel,
    triggerLabel: skipLinksTriggerLabel,
    testId: testId
  }, /*#__PURE__*/_react.default.createElement(WidthContainer, null, /*#__PURE__*/_react.default.createElement("div", {
    ref: ref,
    className: (0, _runtime.ax)([isChatPanelLayoutEnabled ? styles.root : styles.legacyRoot, (0, _fg.fg)('platform-dst-motion-uplift-panel') && styles.panelUplift, (0, _fg.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
    id: gridRootId,
    "data-testid": testId
  }, children)))))))))));
}