@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
59 lines (58 loc) • 4 kB
JavaScript
/* panel-layout-shell.tsx generated by @compiled/babel-plugin v3.0.2 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./panel-layout-shell.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useContext, useId } from 'react';
import { MainMinWidthContext } from './main-min-width-context';
// 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.
*/
export 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 = useContext(MainMinWidthContext);
var id = "local-panel-".concat(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: 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: _defineProperty(_defineProperty(_defineProperty({}, localPanelTrackWidthVar, "".concat(panelWidth, "px")), localPanelMinWidthVar, "".concat(panelMinWidth, "px")), '--p_lclPnlCompactW', "".concat(compactPanelWidth, "px")),
className: 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: ax([styles.mainContent])
}, children), panel));
}