@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1,247 lines (1,233 loc) • 32.6 kB
JavaScript
import { c } from 'react-compiler-runtime';
import React, { useRef } from 'react';
import { clsx } from 'clsx';
import { useId } from '../hooks/useId.js';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
import { isResponsiveValue, useResponsiveValue } from '../hooks/useResponsiveValue.js';
import { useSlots } from '../hooks/useSlots.js';
import { canUseDOM } from '../utils/environment.js';
import { useOverflow } from '../hooks/useOverflow.js';
import { warning } from '../utils/warning.js';
import classes from './PageLayout.module.css.js';
import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import Box from '../Box/Box.js';
const PageLayoutContext = /*#__PURE__*/React.createContext({
padding: 'normal',
rowGap: 'normal',
columnGap: 'normal',
paneRef: {
current: null
}
});
// TODO: refs
const Root = t0 => {
const $ = c(27);
const {
containerWidth: t1,
padding: t2,
rowGap: t3,
columnGap: t4,
children,
sx,
className,
style,
_slotsConfig: slotsConfig
} = t0;
const containerWidth = t1 === undefined ? "xlarge" : t1;
const padding = t2 === undefined ? "normal" : t2;
const rowGap = t3 === undefined ? "normal" : t3;
const columnGap = t4 === undefined ? "normal" : t4;
const paneRef = useRef(null);
let t5;
if ($[0] !== slotsConfig) {
t5 = slotsConfig !== null && slotsConfig !== void 0 ? slotsConfig : {
header: Header,
footer: Footer
};
$[0] = slotsConfig;
$[1] = t5;
} else {
t5 = $[1];
}
const [slots, rest] = useSlots(children, t5);
let t6;
let t7;
if ($[2] !== columnGap || $[3] !== padding || $[4] !== rowGap) {
t7 = {
padding,
rowGap,
columnGap,
paneRef
};
$[2] = columnGap;
$[3] = padding;
$[4] = rowGap;
$[5] = t7;
} else {
t7 = $[5];
}
t6 = t7;
const memoizedContextValue = t6;
const t8 = `var(--spacing-${padding})`;
let t9;
if ($[6] !== style || $[7] !== t8) {
t9 = {
"--spacing": t8,
...style
};
$[6] = style;
$[7] = t8;
$[8] = t9;
} else {
t9 = $[8];
}
const t10 = t9;
let t11;
if ($[9] !== className) {
t11 = clsx(classes.PageLayoutRoot, className);
$[9] = className;
$[10] = t11;
} else {
t11 = $[10];
}
const t12 = slots.header;
let t13;
if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
t13 = clsx(classes.PageLayoutContent);
$[11] = t13;
} else {
t13 = $[11];
}
let t14;
if ($[12] !== rest) {
t14 = /*#__PURE__*/jsx("div", {
className: t13,
children: rest
});
$[12] = rest;
$[13] = t14;
} else {
t14 = $[13];
}
let t15;
if ($[14] !== containerWidth || $[15] !== slots.footer || $[16] !== slots.header || $[17] !== t14) {
t15 = /*#__PURE__*/jsxs("div", {
className: classes.PageLayoutWrapper,
"data-width": containerWidth,
children: [t12, t14, slots.footer]
});
$[14] = containerWidth;
$[15] = slots.footer;
$[16] = slots.header;
$[17] = t14;
$[18] = t15;
} else {
t15 = $[18];
}
let t16;
if ($[19] !== sx || $[20] !== t10 || $[21] !== t11 || $[22] !== t15) {
t16 = /*#__PURE__*/jsx(BoxWithFallback, {
style: t10,
sx: sx,
className: t11,
children: t15
});
$[19] = sx;
$[20] = t10;
$[21] = t11;
$[22] = t15;
$[23] = t16;
} else {
t16 = $[23];
}
let t17;
if ($[24] !== memoizedContextValue || $[25] !== t16) {
t17 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
value: memoizedContextValue,
children: t16
});
$[24] = memoizedContextValue;
$[25] = t16;
$[26] = t17;
} else {
t17 = $[26];
}
return t17;
};
Root.displayName = 'PageLayout';
// ----------------------------------------------------------------------------
// Divider (internal)
const HorizontalDivider = t0 => {
const $ = c(11);
const {
variant: t1,
sx,
className,
position,
style
} = t0;
const variant = t1 === undefined ? "none" : t1;
const {
padding
} = React.useContext(PageLayoutContext);
const responsiveVariant = useResponsiveValue(variant, "none");
let t2;
if ($[0] !== className) {
t2 = clsx(classes.HorizontalDivider, className);
$[0] = className;
$[1] = t2;
} else {
t2 = $[1];
}
const t3 = `var(--spacing-${padding})`;
let t4;
if ($[2] !== style || $[3] !== t3) {
t4 = {
"--spacing-divider": t3,
...style
};
$[2] = style;
$[3] = t3;
$[4] = t4;
} else {
t4 = $[4];
}
const t5 = t4;
let t6;
if ($[5] !== position || $[6] !== responsiveVariant || $[7] !== sx || $[8] !== t2 || $[9] !== t5) {
t6 = /*#__PURE__*/jsx(BoxWithFallback, {
sx: sx,
className: t2,
"data-variant": responsiveVariant,
"data-position": position,
style: t5
});
$[5] = position;
$[6] = responsiveVariant;
$[7] = sx;
$[8] = t2;
$[9] = t5;
$[10] = t6;
} else {
t6 = $[10];
}
return t6;
};
const VerticalDivider = t0 => {
const $ = c(37);
const {
variant: t1,
draggable: t2,
onDragStart,
onDrag,
onDragEnd,
onDoubleClick,
position,
className,
style,
sx
} = t0;
const variant = t1 === undefined ? "none" : t1;
const draggable = t2 === undefined ? false : t2;
const [isDragging, setIsDragging] = React.useState(false);
const [isKeyboardDrag, setIsKeyboardDrag] = React.useState(false);
const responsiveVariant = useResponsiveValue(variant, "none");
const stableOnDrag = React.useRef(onDrag);
const stableOnDragEnd = React.useRef(onDragEnd);
const {
paneRef
} = React.useContext(PageLayoutContext);
const [minWidth, setMinWidth] = React.useState(0);
const [maxWidth, setMaxWidth] = React.useState(0);
const [currentWidth, setCurrentWidth] = React.useState(0);
let t3;
if ($[0] !== paneRef) {
t3 = () => {
if (paneRef.current !== null) {
const paneStyles = getComputedStyle(paneRef.current);
const maxPaneWidthDiffPixels = paneStyles.getPropertyValue("--pane-max-width-diff");
const minWidthPixels = paneStyles.getPropertyValue("--pane-min-width");
const paneWidth = paneRef.current.getBoundingClientRect().width;
const maxPaneWidthDiff = Number(maxPaneWidthDiffPixels.split("px")[0]);
const minPaneWidth = Number(minWidthPixels.split("px")[0]);
const viewportWidth = window.innerWidth;
const maxPaneWidth = viewportWidth > maxPaneWidthDiff ? viewportWidth - maxPaneWidthDiff : viewportWidth;
setMinWidth(minPaneWidth);
setMaxWidth(maxPaneWidth);
setCurrentWidth(paneWidth || 0);
}
};
$[0] = paneRef;
$[1] = t3;
} else {
t3 = $[1];
}
let t4;
if ($[2] !== isDragging || $[3] !== isKeyboardDrag || $[4] !== paneRef) {
t4 = [paneRef, isKeyboardDrag, isDragging];
$[2] = isDragging;
$[3] = isKeyboardDrag;
$[4] = paneRef;
$[5] = t4;
} else {
t4 = $[5];
}
React.useEffect(t3, t4);
let t5;
let t6;
if ($[6] !== onDrag) {
t5 = () => {
stableOnDrag.current = onDrag;
};
t6 = [onDrag];
$[6] = onDrag;
$[7] = t5;
$[8] = t6;
} else {
t5 = $[7];
t6 = $[8];
}
React.useEffect(t5, t6);
let t7;
let t8;
if ($[9] !== onDragEnd) {
t7 = () => {
stableOnDragEnd.current = onDragEnd;
};
t8 = [onDragEnd];
$[9] = onDragEnd;
$[10] = t7;
$[11] = t8;
} else {
t7 = $[10];
t8 = $[11];
}
React.useEffect(t7, t8);
let t10;
let t9;
if ($[12] !== currentWidth || $[13] !== isDragging || $[14] !== isKeyboardDrag || $[15] !== maxWidth || $[16] !== minWidth) {
t9 = () => {
const handleDrag = function handleDrag(event) {
var _stableOnDrag$current;
(_stableOnDrag$current = stableOnDrag.current) === null || _stableOnDrag$current === void 0 ? void 0 : _stableOnDrag$current.call(stableOnDrag, event.movementX, false);
event.preventDefault();
};
const handleDragEnd = function handleDragEnd(event_0) {
var _stableOnDragEnd$curr;
setIsDragging(false);
(_stableOnDragEnd$curr = stableOnDragEnd.current) === null || _stableOnDragEnd$curr === void 0 ? void 0 : _stableOnDragEnd$curr.call(stableOnDragEnd);
event_0.preventDefault();
};
const handleKeyDrag = function handleKeyDrag(event_1) {
var _stableOnDrag$current2;
let delta;
if ((event_1.key === "ArrowLeft" || event_1.key === "ArrowDown") && currentWidth > minWidth) {
delta = -3;
} else {
if ((event_1.key === "ArrowRight" || event_1.key === "ArrowUp") && currentWidth < maxWidth) {
delta = 3;
} else {
return;
}
}
setCurrentWidth(currentWidth + delta);
(_stableOnDrag$current2 = stableOnDrag.current) === null || _stableOnDrag$current2 === void 0 ? void 0 : _stableOnDrag$current2.call(stableOnDrag, delta, true);
event_1.preventDefault();
};
const handleKeyDragEnd = function handleKeyDragEnd(event_2) {
var _stableOnDragEnd$curr2;
setIsKeyboardDrag(false);
(_stableOnDragEnd$curr2 = stableOnDragEnd.current) === null || _stableOnDragEnd$curr2 === void 0 ? void 0 : _stableOnDragEnd$curr2.call(stableOnDragEnd);
event_2.preventDefault();
};
if (isDragging || isKeyboardDrag) {
window.addEventListener("mousemove", handleDrag);
window.addEventListener("keydown", handleKeyDrag);
window.addEventListener("mouseup", handleDragEnd);
window.addEventListener("keyup", handleKeyDragEnd);
const body = document.body;
body === null || body === void 0 ? void 0 : body.setAttribute("data-page-layout-dragging", "true");
} else {
window.removeEventListener("mousemove", handleDrag);
window.removeEventListener("mouseup", handleDragEnd);
window.removeEventListener("keydown", handleKeyDrag);
window.removeEventListener("keyup", handleKeyDragEnd);
const body_0 = document.body;
body_0 === null || body_0 === void 0 ? void 0 : body_0.removeAttribute("data-page-layout-dragging");
}
return () => {
window.removeEventListener("mousemove", handleDrag);
window.removeEventListener("mouseup", handleDragEnd);
window.removeEventListener("keydown", handleKeyDrag);
window.removeEventListener("keyup", handleKeyDragEnd);
const body_1 = document.body;
body_1 === null || body_1 === void 0 ? void 0 : body_1.removeAttribute("data-page-layout-dragging");
};
};
t10 = [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth];
$[12] = currentWidth;
$[13] = isDragging;
$[14] = isKeyboardDrag;
$[15] = maxWidth;
$[16] = minWidth;
$[17] = t10;
$[18] = t9;
} else {
t10 = $[17];
t9 = $[18];
}
React.useEffect(t9, t10);
let t11;
if ($[19] !== className) {
t11 = clsx(classes.VerticalDivider, className);
$[19] = className;
$[20] = t11;
} else {
t11 = $[20];
}
let t12;
if ($[21] !== currentWidth || $[22] !== draggable || $[23] !== isDragging || $[24] !== isKeyboardDrag || $[25] !== maxWidth || $[26] !== minWidth || $[27] !== onDoubleClick || $[28] !== onDragStart) {
t12 = draggable ? /*#__PURE__*/jsx(Fragment, {
children: /*#__PURE__*/jsx(Box, {
sx: {
position: "absolute",
inset: "0 -2px",
cursor: "col-resize",
bg: isDragging || isKeyboardDrag ? "accent.fg" : "transparent",
transitionDelay: "0.1s",
"&:hover": {
bg: isDragging || isKeyboardDrag ? "accent.fg" : "neutral.muted"
}
},
role: "slider",
"aria-label": "Draggable pane splitter",
"aria-valuemin": minWidth,
"aria-valuemax": maxWidth,
"aria-valuenow": currentWidth,
"aria-valuetext": `Pane width ${currentWidth} pixels`,
tabIndex: 0,
onMouseDown: event_3 => {
if (event_3.button === 0) {
setIsDragging(true);
onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
}
},
onKeyDown: event_4 => {
if (event_4.key === "ArrowLeft" || event_4.key === "ArrowRight" || event_4.key === "ArrowUp" || event_4.key === "ArrowDown") {
setIsKeyboardDrag(true);
onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
}
},
onDoubleClick: onDoubleClick
})
}) : null;
$[21] = currentWidth;
$[22] = draggable;
$[23] = isDragging;
$[24] = isKeyboardDrag;
$[25] = maxWidth;
$[26] = minWidth;
$[27] = onDoubleClick;
$[28] = onDragStart;
$[29] = t12;
} else {
t12 = $[29];
}
let t13;
if ($[30] !== position || $[31] !== responsiveVariant || $[32] !== style || $[33] !== sx || $[34] !== t11 || $[35] !== t12) {
t13 = /*#__PURE__*/jsx(BoxWithFallback, {
sx: sx,
className: t11,
"data-variant": responsiveVariant,
"data-position": position,
style: style,
children: t12
});
$[30] = position;
$[31] = responsiveVariant;
$[32] = style;
$[33] = sx;
$[34] = t11;
$[35] = t12;
$[36] = t13;
} else {
t13 = $[36];
}
return t13;
};
// ----------------------------------------------------------------------------
// PageLayout.Header
const Header = t0 => {
const $ = c(27);
const {
"aria-label": label,
"aria-labelledby": labelledBy,
padding: t1,
divider: t2,
dividerWhenNarrow: t3,
hidden: t4,
children,
style,
sx,
className
} = t0;
const padding = t1 === undefined ? "none" : t1;
const divider = t2 === undefined ? "none" : t2;
const dividerWhenNarrow = t3 === undefined ? "inherit" : t3;
const hidden = t4 === undefined ? false : t4;
let t5;
if ($[0] !== divider || $[1] !== dividerWhenNarrow) {
t5 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
regular: divider,
narrow: dividerWhenNarrow
} : divider;
$[0] = divider;
$[1] = dividerWhenNarrow;
$[2] = t5;
} else {
t5 = $[2];
}
const dividerProp = t5;
const dividerVariant = useResponsiveValue(dividerProp, "none");
const isHidden = useResponsiveValue(hidden, false);
const {
rowGap
} = React.useContext(PageLayoutContext);
let t6;
if ($[3] !== className) {
t6 = clsx(classes.Header, className);
$[3] = className;
$[4] = t6;
} else {
t6 = $[4];
}
const t7 = `var(--spacing-${rowGap})`;
let t8;
if ($[5] !== style || $[6] !== t7) {
t8 = {
"--spacing": t7,
...style
};
$[5] = style;
$[6] = t7;
$[7] = t8;
} else {
t8 = $[7];
}
const t9 = t8;
const t10 = `var(--spacing-${padding})`;
let t11;
if ($[8] !== t10) {
t11 = {
"--spacing": t10
};
$[8] = t10;
$[9] = t11;
} else {
t11 = $[9];
}
const t12 = t11;
let t13;
if ($[10] !== children || $[11] !== t12) {
t13 = /*#__PURE__*/jsx("div", {
className: classes.HeaderContent,
style: t12,
children: children
});
$[10] = children;
$[11] = t12;
$[12] = t13;
} else {
t13 = $[12];
}
const t14 = `var(--spacing-${rowGap})`;
let t15;
if ($[13] !== t14) {
t15 = {
"--spacing": t14
};
$[13] = t14;
$[14] = t15;
} else {
t15 = $[14];
}
const t16 = t15;
let t17;
if ($[15] !== dividerVariant || $[16] !== t16) {
t17 = /*#__PURE__*/jsx(HorizontalDivider, {
variant: dividerVariant,
className: classes.HeaderHorizontalDivider,
style: t16
});
$[15] = dividerVariant;
$[16] = t16;
$[17] = t17;
} else {
t17 = $[17];
}
let t18;
if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t13 || $[23] !== t17 || $[24] !== t6 || $[25] !== t9) {
t18 = /*#__PURE__*/jsxs(BoxWithFallback, {
as: "header",
"aria-label": label,
"aria-labelledby": labelledBy,
hidden: isHidden,
sx: sx,
className: t6,
style: t9,
children: [t13, t17]
});
$[18] = isHidden;
$[19] = label;
$[20] = labelledBy;
$[21] = sx;
$[22] = t13;
$[23] = t17;
$[24] = t6;
$[25] = t9;
$[26] = t18;
} else {
t18 = $[26];
}
return t18;
};
Header.displayName = 'PageLayout.Header';
const Content = t0 => {
const $ = c(17);
const {
as: t1,
"aria-label": label,
"aria-labelledby": labelledBy,
width: t2,
padding: t3,
hidden: t4,
children,
sx,
className,
style
} = t0;
const as = t1 === undefined ? "main" : t1;
const width = t2 === undefined ? "full" : t2;
const padding = t3 === undefined ? "none" : t3;
const hidden = t4 === undefined ? false : t4;
const isHidden = useResponsiveValue(hidden, false);
let t5;
if ($[0] !== className) {
t5 = clsx(classes.ContentWrapper, className);
$[0] = className;
$[1] = t5;
} else {
t5 = $[1];
}
const t6 = `var(--spacing-${padding})`;
let t7;
if ($[2] !== t6) {
t7 = {
"--spacing": t6
};
$[2] = t6;
$[3] = t7;
} else {
t7 = $[3];
}
const t8 = t7;
let t9;
if ($[4] !== children || $[5] !== t8 || $[6] !== width) {
t9 = /*#__PURE__*/jsx("div", {
className: classes.Content,
"data-width": width,
style: t8,
children: children
});
$[4] = children;
$[5] = t8;
$[6] = width;
$[7] = t9;
} else {
t9 = $[7];
}
let t10;
if ($[8] !== as || $[9] !== isHidden || $[10] !== label || $[11] !== labelledBy || $[12] !== style || $[13] !== sx || $[14] !== t5 || $[15] !== t9) {
t10 = /*#__PURE__*/jsx(BoxWithFallback, {
as: as,
"aria-label": label,
"aria-labelledby": labelledBy,
style: style,
sx: sx,
className: t5,
"data-is-hidden": isHidden,
children: t9
});
$[8] = as;
$[9] = isHidden;
$[10] = label;
$[11] = labelledBy;
$[12] = style;
$[13] = sx;
$[14] = t5;
$[15] = t9;
$[16] = t10;
} else {
t10 = $[16];
}
return t10;
};
Content.displayName = 'PageLayout.Content';
// ----------------------------------------------------------------------------
// PageLayout.Pane
const isCustomWidthOptions = width => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
return width.default !== undefined;
};
const isPaneWidth = width => {
return ['small', 'medium', 'large'].includes(width);
};
const defaultPaneWidth = {
small: 256,
medium: 296,
large: 320
};
const overflowProps = {
tabIndex: 0,
role: 'region'
};
const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
const $ = c(82);
const {
"aria-label": label,
"aria-labelledby": labelledBy,
position: t1,
positionWhenNarrow: t2,
width: t3,
minWidth: t4,
padding: t5,
resizable: t6,
widthStorageKey: t7,
divider: t8,
dividerWhenNarrow: t9,
sticky: t10,
offsetHeader: t11,
hidden: t12,
children,
id,
sx,
className,
style
} = t0;
const responsivePosition = t1 === undefined ? "end" : t1;
const positionWhenNarrow = t2 === undefined ? "inherit" : t2;
const width = t3 === undefined ? "medium" : t3;
const minWidth = t4 === undefined ? 256 : t4;
const padding = t5 === undefined ? "none" : t5;
const resizable = t6 === undefined ? false : t6;
const widthStorageKey = t7 === undefined ? "paneWidth" : t7;
const responsiveDivider = t8 === undefined ? "none" : t8;
const dividerWhenNarrow = t9 === undefined ? "inherit" : t9;
const sticky = t10 === undefined ? false : t10;
const offsetHeader = t11 === undefined ? 0 : t11;
const responsiveHidden = t12 === undefined ? false : t12;
let t13;
if ($[0] !== positionWhenNarrow || $[1] !== responsivePosition) {
t13 = !isResponsiveValue(responsivePosition) && positionWhenNarrow !== "inherit" ? {
regular: responsivePosition,
narrow: positionWhenNarrow
} : responsivePosition;
$[0] = positionWhenNarrow;
$[1] = responsivePosition;
$[2] = t13;
} else {
t13 = $[2];
}
const positionProp = t13;
const position = useResponsiveValue(positionProp, "end");
let t14;
if ($[3] !== dividerWhenNarrow || $[4] !== responsiveDivider) {
t14 = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== "inherit" ? {
regular: responsiveDivider,
narrow: dividerWhenNarrow
} : responsiveDivider;
$[3] = dividerWhenNarrow;
$[4] = responsiveDivider;
$[5] = t14;
} else {
t14 = $[5];
}
const dividerProp = t14;
const dividerVariant = useResponsiveValue(dividerProp, "none");
const isHidden = useResponsiveValue(responsiveHidden, false);
const {
rowGap,
columnGap,
paneRef
} = React.useContext(PageLayoutContext);
const getDefaultPaneWidth = _temp;
let t15;
if ($[6] !== width || $[7] !== widthStorageKey) {
t15 = () => {
if (!canUseDOM) {
return getDefaultPaneWidth(width);
}
let storedWidth;
try {
storedWidth = localStorage.getItem(widthStorageKey);
} catch (t16) {
storedWidth = null;
}
return storedWidth && !isNaN(Number(storedWidth)) ? Number(storedWidth) : getDefaultPaneWidth(width);
};
$[6] = width;
$[7] = widthStorageKey;
$[8] = t15;
} else {
t15 = $[8];
}
const [paneWidth, setPaneWidth] = React.useState(t15);
let t16;
if ($[9] !== widthStorageKey) {
t16 = width_1 => {
setPaneWidth(width_1);
try {
localStorage.setItem(widthStorageKey, width_1.toString());
} catch (t17) {
}
};
$[9] = widthStorageKey;
$[10] = t16;
} else {
t16 = $[10];
}
const updatePaneWidth = t16;
useRefObjectAsForwardedRef(forwardRef, paneRef);
const hasOverflow = useOverflow(paneRef);
const paneId = useId(id);
let labelProp;
if ($[11] !== hasOverflow || $[12] !== label || $[13] !== labelledBy) {
labelProp = {};
if (hasOverflow) {
process.env.NODE_ENV !== "production" ? warning(label === undefined && labelledBy === undefined, "The <PageLayout.Pane> has overflow and `aria-label` or `aria-labelledby` has not been set. Please provide `aria-label` or `aria-labelledby` to <PageLayout.Pane> in order to label this region.") : void 0;
if (labelledBy) {
labelProp["aria-labelledby"] = labelledBy;
} else {
if (label) {
labelProp["aria-label"] = label;
}
}
}
$[11] = hasOverflow;
$[12] = label;
$[13] = labelledBy;
$[14] = labelProp;
} else {
labelProp = $[14];
}
let t17;
if ($[15] !== className) {
t17 = clsx(classes.PaneWrapper, className);
$[15] = className;
$[16] = t17;
} else {
t17 = $[16];
}
const t18 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
const t19 = `var(--spacing-${rowGap})`;
const t20 = `var(--spacing-${columnGap})`;
let t21;
if ($[17] !== style || $[18] !== t18 || $[19] !== t19 || $[20] !== t20) {
t21 = {
"--offset-header": t18,
"--spacing-row": t19,
"--spacing-column": t20,
...style
};
$[17] = style;
$[18] = t18;
$[19] = t19;
$[20] = t20;
$[21] = t21;
} else {
t21 = $[21];
}
const t22 = sticky || undefined;
let t23;
if ($[22] !== dividerVariant) {
t23 = {
narrow: dividerVariant,
regular: "none"
};
$[22] = dividerVariant;
$[23] = t23;
} else {
t23 = $[23];
}
const t24 = `var(--spacing-${rowGap})`;
let t25;
if ($[24] !== t24) {
t25 = {
"--spacing": t24
};
$[24] = t24;
$[25] = t25;
} else {
t25 = $[25];
}
const t26 = t25;
let t27;
if ($[26] !== position || $[27] !== t23 || $[28] !== t26) {
t27 = /*#__PURE__*/jsx(HorizontalDivider, {
variant: t23,
className: classes.PaneHorizontalDivider,
style: t26,
position: position
});
$[26] = position;
$[27] = t23;
$[28] = t26;
$[29] = t27;
} else {
t27 = $[29];
}
let t28;
if ($[30] !== hasOverflow) {
t28 = hasOverflow ? overflowProps : {};
$[30] = hasOverflow;
$[31] = t28;
} else {
t28 = $[31];
}
let t29;
if ($[32] !== id || $[33] !== paneId) {
t29 = id && {
id: paneId
};
$[32] = id;
$[33] = paneId;
$[34] = t29;
} else {
t29 = $[34];
}
const t30 = resizable || undefined;
const t31 = `var(--spacing-${padding})`;
const t32 = isCustomWidthOptions(width) ? width.min : `${minWidth}px`;
const t33 = isCustomWidthOptions(width) ? width.max : "calc(100vw - var(--pane-max-width-diff))";
const t34 = isCustomWidthOptions(width) ? width.default : undefined;
const t35 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
const t36 = `${paneWidth}px`;
let t37;
if ($[35] !== t31 || $[36] !== t32 || $[37] !== t33 || $[38] !== t34 || $[39] !== t35 || $[40] !== t36) {
t37 = {
"--spacing": t31,
"--pane-min-width": t32,
"--pane-max-width": t33,
"--pane-width-custom": t34,
"--pane-width-size": t35,
"--pane-width": t36
};
$[35] = t31;
$[36] = t32;
$[37] = t33;
$[38] = t34;
$[39] = t35;
$[40] = t36;
$[41] = t37;
} else {
t37 = $[41];
}
const t38 = t37;
let t39;
if ($[42] !== children || $[43] !== labelProp || $[44] !== paneRef || $[45] !== t28 || $[46] !== t29 || $[47] !== t30 || $[48] !== t38) {
t39 = /*#__PURE__*/jsx("div", {
ref: paneRef,
...t28,
...labelProp,
...t29,
className: classes.Pane,
"data-resizable": t30,
style: t38,
children: children
});
$[42] = children;
$[43] = labelProp;
$[44] = paneRef;
$[45] = t28;
$[46] = t29;
$[47] = t30;
$[48] = t38;
$[49] = t39;
} else {
t39 = $[49];
}
const t40 = resizable ? "line" : dividerVariant;
let t41;
if ($[50] !== t40) {
t41 = {
narrow: "none",
regular: t40
};
$[50] = t40;
$[51] = t41;
} else {
t41 = $[51];
}
let t42;
if ($[52] !== paneWidth || $[53] !== position || $[54] !== updatePaneWidth) {
t42 = (delta, t43) => {
const isKeyboard = t43 === undefined ? false : t43;
let deltaWithDirection;
if (isKeyboard) {
deltaWithDirection = delta;
} else {
deltaWithDirection = position === "end" ? -delta : delta;
}
updatePaneWidth(paneWidth + deltaWithDirection);
};
$[52] = paneWidth;
$[53] = position;
$[54] = updatePaneWidth;
$[55] = t42;
} else {
t42 = $[55];
}
let t43;
if ($[56] !== paneRef.current || $[57] !== updatePaneWidth) {
t43 = () => {
var _paneRef$current;
const paneRect = (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.getBoundingClientRect();
if (!paneRect) {
return;
}
updatePaneWidth(paneRect.width);
};
$[56] = paneRef.current;
$[57] = updatePaneWidth;
$[58] = t43;
} else {
t43 = $[58];
}
let t44;
if ($[59] !== updatePaneWidth || $[60] !== width) {
t44 = () => updatePaneWidth(getDefaultPaneWidth(width));
$[59] = updatePaneWidth;
$[60] = width;
$[61] = t44;
} else {
t44 = $[61];
}
const t45 = `var(--spacing-${columnGap})`;
let t46;
if ($[62] !== t45) {
t46 = {
"--spacing": t45
};
$[62] = t45;
$[63] = t46;
} else {
t46 = $[63];
}
const t47 = t46;
let t48;
if ($[64] !== position || $[65] !== resizable || $[66] !== t41 || $[67] !== t42 || $[68] !== t43 || $[69] !== t44 || $[70] !== t47) {
t48 = /*#__PURE__*/jsx(VerticalDivider, {
variant: t41,
draggable: resizable,
onDrag: t42,
onDragEnd: t43,
position: position,
onDoubleClick: t44,
className: classes.PaneVerticalDivider,
style: t47
});
$[64] = position;
$[65] = resizable;
$[66] = t41;
$[67] = t42;
$[68] = t43;
$[69] = t44;
$[70] = t47;
$[71] = t48;
} else {
t48 = $[71];
}
let t49;
if ($[72] !== isHidden || $[73] !== position || $[74] !== sx || $[75] !== t17 || $[76] !== t21 || $[77] !== t22 || $[78] !== t27 || $[79] !== t39 || $[80] !== t48) {
t49 = /*#__PURE__*/jsxs(BoxWithFallback, {
sx: sx,
className: t17,
style: t21,
"data-is-hidden": isHidden,
"data-position": position,
"data-sticky": t22,
children: [t27, t39, t48]
});
$[72] = isHidden;
$[73] = position;
$[74] = sx;
$[75] = t17;
$[76] = t21;
$[77] = t22;
$[78] = t27;
$[79] = t39;
$[80] = t48;
$[81] = t49;
} else {
t49 = $[81];
}
return t49;
});
Pane.displayName = 'PageLayout.Pane';
// ----------------------------------------------------------------------------
// PageLayout.Footer
const Footer = t0 => {
const $ = c(27);
const {
"aria-label": label,
"aria-labelledby": labelledBy,
padding: t1,
divider: t2,
dividerWhenNarrow: t3,
hidden: t4,
children,
sx,
className,
style
} = t0;
const padding = t1 === undefined ? "none" : t1;
const divider = t2 === undefined ? "none" : t2;
const dividerWhenNarrow = t3 === undefined ? "inherit" : t3;
const hidden = t4 === undefined ? false : t4;
let t5;
if ($[0] !== divider || $[1] !== dividerWhenNarrow) {
t5 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
regular: divider,
narrow: dividerWhenNarrow
} : divider;
$[0] = divider;
$[1] = dividerWhenNarrow;
$[2] = t5;
} else {
t5 = $[2];
}
const dividerProp = t5;
const dividerVariant = useResponsiveValue(dividerProp, "none");
const isHidden = useResponsiveValue(hidden, false);
const {
rowGap
} = React.useContext(PageLayoutContext);
let t6;
if ($[3] !== className) {
t6 = clsx(classes.FooterWrapper, className);
$[3] = className;
$[4] = t6;
} else {
t6 = $[4];
}
const t7 = `var(--spacing-${rowGap})`;
let t8;
if ($[5] !== style || $[6] !== t7) {
t8 = {
"--spacing": t7,
...style
};
$[5] = style;
$[6] = t7;
$[7] = t8;
} else {
t8 = $[7];
}
const t9 = t8;
const t10 = `var(--spacing-${rowGap})`;
let t11;
if ($[8] !== t10) {
t11 = {
"--spacing": t10
};
$[8] = t10;
$[9] = t11;
} else {
t11 = $[9];
}
const t12 = t11;
let t13;
if ($[10] !== dividerVariant || $[11] !== t12) {
t13 = /*#__PURE__*/jsx(HorizontalDivider, {
className: classes.FooterHorizontalDivider,
style: t12,
variant: dividerVariant
});
$[10] = dividerVariant;
$[11] = t12;
$[12] = t13;
} else {
t13 = $[12];
}
const t14 = `var(--spacing-${padding})`;
let t15;
if ($[13] !== t14) {
t15 = {
"--spacing": t14
};
$[13] = t14;
$[14] = t15;
} else {
t15 = $[14];
}
const t16 = t15;
let t17;
if ($[15] !== children || $[16] !== t16) {
t17 = /*#__PURE__*/jsx("div", {
className: classes.FooterContent,
style: t16,
children: children
});
$[15] = children;
$[16] = t16;
$[17] = t17;
} else {
t17 = $[17];
}
let t18;
if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t13 || $[23] !== t17 || $[24] !== t6 || $[25] !== t9) {
t18 = /*#__PURE__*/jsxs(BoxWithFallback, {
as: "footer",
"aria-label": label,
"aria-labelledby": labelledBy,
hidden: isHidden,
className: t6,
sx: sx,
style: t9,
children: [t13, t17]
});
$[18] = isHidden;
$[19] = label;
$[20] = labelledBy;
$[21] = sx;
$[22] = t13;
$[23] = t17;
$[24] = t6;
$[25] = t9;
$[26] = t18;
} else {
t18 = $[26];
}
return t18;
};
Footer.displayName = 'PageLayout.Footer';
// ----------------------------------------------------------------------------
// Export
const PageLayout = Object.assign(Root, {
Header,
Content,
Pane,
Footer
});
function _temp(width_0) {
if (isPaneWidth(width_0)) {
return defaultPaneWidth[width_0];
} else {
if (isCustomWidthOptions(width_0)) {
return Number(width_0.default.split("px")[0]);
}
}
return 0;
}
export { PageLayout };