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

The latest navigation system for Atlassian apps.

/* panel-layout-shell.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.PanelLayoutShell = PanelLayoutShell;
require("./panel-layout-shell.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _mainMinWidthContext = require("./main-min-width-context");
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); }
// The grid uses runtime CSS variables and container sizing outside @atlaskit/css's bounded values.
var localPanelTrackWidthVar = '--p_lclPnlTrackW';
var localPanelResizingVar = '--p_lclPnlRsz';
var localPanelMinWidthVar = '--p_lclPnlMinW';
var styles = {
  container: "_1f38177r _7cca15wb _4t3i1osq _1bsb1osq",
  layout: "_1reo1wug _18m91wug _1e0c11p5 _7cca15wb _1lmc1m6a _yv0ei47z _2z05hkll _4t3i1osq _1bsb1osq",
  mainContent: "_nd5l1gzg _1reo1wug _18m91wug _1e0c1txw _4t3i1osq _19121cl4",
  panelUplift: "_1reo15vq _18m915vq",
  unmeasured: "_evra4a59 _1lmcc53r _yv0eggl6 _129o1uuk _peezi77x",
  managedInline: "_1uwq15vq _82e815vq _f8374a59 _1l7c1wug _vleg1orf",
  managedOverlay: "_1uwq15vq _82e815vq _f8371m6a _vlegi47z _1l7chkll",
  panelClosed: "_f8371m6a _vlegi47z _1l7chkll"
};
/**
 * Grid and scrolling for Main and its local panel. Use inside navigation's Root and Main.
 */
function PanelLayoutShell(_ref) {
  var children = _ref.children,
    panel = _ref.panel,
    isPanelOpen = _ref.isPanelOpen,
    panelWidth = _ref.panelWidth,
    compactPanelWidth = _ref.compactPanelWidth,
    _ref$panelMinWidth = _ref.panelMinWidth,
    panelMinWidth = _ref$panelMinWidth === void 0 ? 320 : _ref$panelMinWidth,
    mode = _ref.mode,
    layoutRef = _ref.layoutRef,
    _ref$shouldClipOverfl = _ref.shouldClipOverflow,
    shouldClipOverflow = _ref$shouldClipOverfl === void 0 ? false : _ref$shouldClipOverfl,
    testId = _ref.testId;
  var mainMinWidth = (0, _react.useContext)(_mainMinWidthContext.MainMinWidthContext);
  var id = "local-panel-".concat((0, _react.useId)().replace(/[^a-zA-Z0-9_-]/g, '_'));
  // CSS query conditions cannot read custom properties. Only the numeric minimums and
  // instance selector are generated here; this rule is removed after the first measurement,
  // so live resizing never rewrites stylesheet text. The named container is local to this shell.
  var inlineQuery = "@container local-panel-layout (min-width: ".concat(mainMinWidth + panelMinWidth, "px)");
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _runtime.ax)([styles.container])
  }, mode === undefined && isPanelOpen &&
  /*#__PURE__*/
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Instance-scoped SSR query supports caller-defined minimums; CSS variables are not allowed in query conditions.
  React.createElement("style", null, "".concat(inlineQuery, " {\n\t\t\t\t\t#").concat(id, " {\n\t\t\t\t\t\t--p_lclPnlSsrAreas: var(--p_lclPnlSsrInlineAreas);\n\t\t\t\t\t\t--p_lclPnlSsrColumns: minmax(0, 1fr) min(var(--p_lclPnlSsrPreferredW), calc(100% - ").concat(mainMinWidth, "px));\n\t\t\t\t\t\t--p_lclPnlSsrArea: panel;\n\t\t\t\t\t\t--p_lclPnlSsrWidth: 100%;\n\t\t\t\t\t\t--p_lclPnlSsrBackground: ", "var(--ds-surface, #FFFFFF)", ";\n\t\t\t\t\t\t--p_lclPnlSsrShadow: none;\n\t\t\t\t\t\t--p_lclPnlSsrBorder: ", "var(--ds-border-width, 1px)", " solid ", "var(--ds-border, #0B120E24)", ";\n\t\t\t\t\t}\n\t\t\t\t}")), /*#__PURE__*/React.createElement("div", {
    id: id,
    "data-testid": testId,
    ref: layoutRef,
    style: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, localPanelTrackWidthVar, "".concat(panelWidth, "px")), localPanelMinWidthVar, "".concat(panelMinWidth, "px")), '--p_lclPnlCompactW', "".concat(compactPanelWidth, "px")),
    className: (0, _runtime.ax)([styles.layout, mode === undefined && isPanelOpen && styles.unmeasured, shouldClipOverflow && styles.panelUplift, mode === 'inline' && styles.managedInline, mode === 'overlay' && styles.managedOverlay, !isPanelOpen && styles.panelClosed])
  }, /*#__PURE__*/React.createElement("div", {
    className: (0, _runtime.ax)([styles.mainContent])
  }, children), panel));
}