@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
74 lines (73 loc) • 3.74 kB
JavaScript
/* panel-layout-shell.tsx generated by @compiled/babel-plugin v3.0.2 */
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.
const localPanelTrackWidthVar = '--p_lclPnlTrackW';
const localPanelResizingVar = '--p_lclPnlRsz';
const localPanelMinWidthVar = '--p_lclPnlMinW';
const 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({
children,
panel,
isPanelOpen,
panelWidth,
compactPanelWidth,
panelMinWidth = 320,
mode,
layoutRef,
shouldClipOverflow = false,
testId
}) {
const mainMinWidth = useContext(MainMinWidthContext);
const id = `local-panel-${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.
const inlineQuery = `@container local-panel-layout (min-width: ${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, `${inlineQuery} {
#${id} {
--p_lclPnlSsrAreas: var(--p_lclPnlSsrInlineAreas);
--p_lclPnlSsrColumns: minmax(0, 1fr) min(var(--p_lclPnlSsrPreferredW), calc(100% - ${mainMinWidth}px));
--p_lclPnlSsrArea: panel;
--p_lclPnlSsrWidth: 100%;
--p_lclPnlSsrBackground: ${"var(--ds-surface, #FFFFFF)"};
--p_lclPnlSsrShadow: none;
--p_lclPnlSsrBorder: ${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"};
}
}`), /*#__PURE__*/React.createElement("div", {
id: id,
"data-testid": testId,
ref: layoutRef,
style: {
// These runtime track widths are shared with the panel splitter.
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
[localPanelTrackWidthVar]: `${panelWidth}px`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
[localPanelMinWidthVar]: `${panelMinWidth}px`,
'--p_lclPnlCompactW': `${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));
}