@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1,401 lines (1,389 loc) • 35.3 kB
JavaScript
import { c } from 'react-compiler-runtime';
import React, { useRef, memo } from 'react';
import { clsx } from 'clsx';
import { useId } from '../hooks/useId.js';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
import { useSlots } from '../hooks/useSlots.js';
import { useOverflow } from '../hooks/useOverflow.js';
import { warning } from '../utils/warning.js';
import { getResponsiveAttributes } from '../internal/utils/getResponsiveAttributes.js';
import classes from './PageLayout.module.css.js';
import { usePaneWidth, isCustomWidthOptions, isPaneWidth, updateAriaValues, ARROW_KEY_STEP } from './usePaneWidth.js';
import { setDraggingStyles, removeDraggingStyles } from './paneUtils.js';
import { jsxs, jsx } from 'react/jsx-runtime';
const isArrowKey = key => key === 'ArrowLeft' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowDown';
const isShrinkKey = key => key === 'ArrowLeft' || key === 'ArrowDown';
const PageLayoutContext = /*#__PURE__*/React.createContext({
padding: 'normal',
rowGap: 'normal',
columnGap: 'normal',
paneRef: {
current: null
},
contentWrapperRef: {
current: null
}
});
// TODO: refs
const Root = t0 => {
const $ = c(22);
const {
containerWidth: t1,
padding: t2,
rowGap: t3,
columnGap: t4,
children,
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);
const contentWrapperRef = 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;
if ($[2] !== columnGap || $[3] !== padding || $[4] !== rowGap) {
t6 = {
padding,
rowGap,
columnGap,
paneRef,
contentWrapperRef
};
$[2] = columnGap;
$[3] = padding;
$[4] = rowGap;
$[5] = t6;
} else {
t6 = $[5];
}
const memoizedContextValue = t6;
const t7 = slots.header;
let t8;
if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
t8 = clsx(classes.PageLayoutContent);
$[6] = t8;
} else {
t8 = $[6];
}
let t9;
if ($[7] !== rest) {
t9 = /*#__PURE__*/jsx("div", {
className: t8,
children: rest
});
$[7] = rest;
$[8] = t9;
} else {
t9 = $[8];
}
let t10;
if ($[9] !== containerWidth || $[10] !== slots.footer || $[11] !== slots.header || $[12] !== t9) {
t10 = /*#__PURE__*/jsxs("div", {
className: classes.PageLayoutWrapper,
"data-width": containerWidth,
children: [t7, t9, slots.footer]
});
$[9] = containerWidth;
$[10] = slots.footer;
$[11] = slots.header;
$[12] = t9;
$[13] = t10;
} else {
t10 = $[13];
}
let t11;
if ($[14] !== className || $[15] !== padding || $[16] !== style || $[17] !== t10) {
t11 = /*#__PURE__*/jsx(RootWrapper, {
style: style,
padding: padding,
className: className,
children: t10
});
$[14] = className;
$[15] = padding;
$[16] = style;
$[17] = t10;
$[18] = t11;
} else {
t11 = $[18];
}
let t12;
if ($[19] !== memoizedContextValue || $[20] !== t11) {
t12 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
value: memoizedContextValue,
children: t11
});
$[19] = memoizedContextValue;
$[20] = t11;
$[21] = t12;
} else {
t12 = $[21];
}
return t12;
};
const RootWrapper = /*#__PURE__*/memo(t0 => {
const $ = c(9);
const {
style,
padding,
children,
className
} = t0;
const t1 = `var(--spacing-${padding})`;
let t2;
if ($[0] !== style || $[1] !== t1) {
t2 = {
"--spacing": t1,
...style
};
$[0] = style;
$[1] = t1;
$[2] = t2;
} else {
t2 = $[2];
}
const t3 = t2;
let t4;
if ($[3] !== className) {
t4 = clsx(classes.PageLayoutRoot, className);
$[3] = className;
$[4] = t4;
} else {
t4 = $[4];
}
let t5;
if ($[5] !== children || $[6] !== t3 || $[7] !== t4) {
t5 = /*#__PURE__*/jsx("div", {
style: t3,
className: t4,
children: children
});
$[5] = children;
$[6] = t3;
$[7] = t4;
$[8] = t5;
} else {
t5 = $[8];
}
return t5;
});
Root.displayName = 'PageLayout';
// ----------------------------------------------------------------------------
// Divider (internal)
const HorizontalDivider = /*#__PURE__*/memo(t0 => {
const $ = c(14);
const {
variant: t1,
className,
position,
style
} = t0;
const variant = t1 === undefined ? "none" : t1;
const {
padding
} = React.useContext(PageLayoutContext);
let t2;
if ($[0] !== className) {
t2 = clsx(classes.HorizontalDivider, className);
$[0] = className;
$[1] = t2;
} else {
t2 = $[1];
}
let t3;
if ($[2] !== variant) {
t3 = getResponsiveAttributes("variant", variant);
$[2] = variant;
$[3] = t3;
} else {
t3 = $[3];
}
let t4;
if ($[4] !== position) {
t4 = getResponsiveAttributes("position", position);
$[4] = position;
$[5] = t4;
} else {
t4 = $[5];
}
const t5 = `var(--spacing-${padding})`;
let t6;
if ($[6] !== style || $[7] !== t5) {
t6 = {
"--spacing-divider": t5,
...style
};
$[6] = style;
$[7] = t5;
$[8] = t6;
} else {
t6 = $[8];
}
const t7 = t6;
let t8;
if ($[9] !== t2 || $[10] !== t3 || $[11] !== t4 || $[12] !== t7) {
t8 = /*#__PURE__*/jsx("div", {
className: t2,
...t3,
...t4,
style: t7
});
$[9] = t2;
$[10] = t3;
$[11] = t4;
$[12] = t7;
$[13] = t8;
} else {
t8 = $[13];
}
return t8;
});
HorizontalDivider.displayName = 'HorizontalDivider';
const VerticalDivider = /*#__PURE__*/memo(t0 => {
const $ = c(12);
const {
variant: t1,
position,
className,
style,
children
} = t0;
const variant = t1 === undefined ? "none" : t1;
let t2;
if ($[0] !== className) {
t2 = clsx(classes.VerticalDivider, className);
$[0] = className;
$[1] = t2;
} else {
t2 = $[1];
}
let t3;
if ($[2] !== variant) {
t3 = getResponsiveAttributes("variant", variant);
$[2] = variant;
$[3] = t3;
} else {
t3 = $[3];
}
let t4;
if ($[4] !== position) {
t4 = getResponsiveAttributes("position", position);
$[4] = position;
$[5] = t4;
} else {
t4 = $[5];
}
let t5;
if ($[6] !== children || $[7] !== style || $[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
t5 = /*#__PURE__*/jsx("div", {
className: t2,
...t3,
...t4,
style: style,
children: children
});
$[6] = children;
$[7] = style;
$[8] = t2;
$[9] = t3;
$[10] = t4;
$[11] = t5;
} else {
t5 = $[11];
}
return t5;
});
VerticalDivider.displayName = 'VerticalDivider';
/**
* DragHandle - handles all pointer and keyboard interactions for resizing
* ARIA values are set in JSX for SSR accessibility,
* then updated via DOM manipulation during drag for performance
*/
const DragHandle = /*#__PURE__*/memo(function DragHandle(t0) {
const $ = c(35);
const {
handleRef,
onDragStart,
onDrag,
onDragEnd,
onDoubleClick,
"aria-valuemin": ariaValueMin,
"aria-valuemax": ariaValueMax,
"aria-valuenow": ariaValueNow
} = t0;
const stableOnDragStart = React.useRef(onDragStart);
const stableOnDrag = React.useRef(onDrag);
const stableOnDragEnd = React.useRef(onDragEnd);
let t1;
if ($[0] !== onDrag || $[1] !== onDragEnd || $[2] !== onDragStart) {
t1 = () => {
stableOnDragStart.current = onDragStart;
stableOnDrag.current = onDrag;
stableOnDragEnd.current = onDragEnd;
};
$[0] = onDrag;
$[1] = onDragEnd;
$[2] = onDragStart;
$[3] = t1;
} else {
t1 = $[3];
}
React.useEffect(t1);
const {
paneRef,
contentWrapperRef
} = React.useContext(PageLayoutContext);
const isDraggingRef = React.useRef(false);
let t2;
if ($[4] !== contentWrapperRef || $[5] !== handleRef || $[6] !== paneRef) {
t2 = () => {
if (isDraggingRef.current) {
return;
}
setDraggingStyles({
handle: handleRef.current,
pane: paneRef.current,
contentWrapper: contentWrapperRef.current
});
isDraggingRef.current = true;
};
$[4] = contentWrapperRef;
$[5] = handleRef;
$[6] = paneRef;
$[7] = t2;
} else {
t2 = $[7];
}
const startDragging = t2;
let t3;
if ($[8] !== contentWrapperRef || $[9] !== handleRef || $[10] !== paneRef) {
t3 = () => {
if (!isDraggingRef.current) {
return;
}
removeDraggingStyles({
handle: handleRef.current,
pane: paneRef.current,
contentWrapper: contentWrapperRef.current
});
isDraggingRef.current = false;
};
$[8] = contentWrapperRef;
$[9] = handleRef;
$[10] = paneRef;
$[11] = t3;
} else {
t3 = $[11];
}
const endDragging = t3;
let t4;
if ($[12] !== startDragging) {
t4 = event => {
if (event.button !== 0) {
return;
}
event.preventDefault();
const target = event.currentTarget;
try {
target.setPointerCapture(event.pointerId);
} catch {}
stableOnDragStart.current(event.clientX);
startDragging();
};
$[12] = startDragging;
$[13] = t4;
} else {
t4 = $[13];
}
const handlePointerDown = t4;
const rafIdRef = React.useRef(null);
const pendingClientXRef = React.useRef(null);
let t5;
if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
t5 = event_0 => {
if (!isDraggingRef.current) {
return;
}
event_0.preventDefault();
pendingClientXRef.current = event_0.clientX;
if (rafIdRef.current === null) {
rafIdRef.current = requestAnimationFrame(() => {
rafIdRef.current = null;
if (pendingClientXRef.current !== null) {
stableOnDrag.current(pendingClientXRef.current, false);
pendingClientXRef.current = null;
}
});
}
};
$[14] = t5;
} else {
t5 = $[14];
}
const handlePointerMove = t5;
let t6;
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
t6 = event_1 => {
if (!isDraggingRef.current) {
return;
}
event_1.preventDefault();
};
$[15] = t6;
} else {
t6 = $[15];
}
const handlePointerUp = t6;
let t7;
if ($[16] !== endDragging) {
t7 = () => {
if (!isDraggingRef.current) {
return;
}
if (rafIdRef.current !== null) {
cancelAnimationFrame(rafIdRef.current);
rafIdRef.current = null;
pendingClientXRef.current = null;
}
endDragging();
stableOnDragEnd.current();
};
$[16] = endDragging;
$[17] = t7;
} else {
t7 = $[17];
}
const handleLostPointerCapture = t7;
let t8;
if ($[18] !== startDragging) {
t8 = event_2 => {
if (!isArrowKey(event_2.key)) {
return;
}
event_2.preventDefault();
const delta = isShrinkKey(event_2.key) ? -ARROW_KEY_STEP : ARROW_KEY_STEP;
if (!isDraggingRef.current) {
startDragging();
}
stableOnDrag.current(delta, true);
};
$[18] = startDragging;
$[19] = t8;
} else {
t8 = $[19];
}
const handleKeyDown = t8;
let t9;
if ($[20] !== endDragging) {
t9 = event_3 => {
if (!isArrowKey(event_3.key)) {
return;
}
event_3.preventDefault();
endDragging();
stableOnDragEnd.current();
};
$[20] = endDragging;
$[21] = t9;
} else {
t9 = $[21];
}
const handleKeyUp = t9;
let t10;
let t11;
if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
t10 = () => () => {
if (rafIdRef.current !== null) {
cancelAnimationFrame(rafIdRef.current);
rafIdRef.current = null;
}
};
t11 = [];
$[22] = t10;
$[23] = t11;
} else {
t10 = $[22];
t11 = $[23];
}
React.useEffect(t10, t11);
const t12 = ariaValueNow !== undefined ? `Pane width ${ariaValueNow} pixels` : undefined;
let t13;
if ($[24] !== ariaValueMax || $[25] !== ariaValueMin || $[26] !== ariaValueNow || $[27] !== handleKeyDown || $[28] !== handleKeyUp || $[29] !== handleLostPointerCapture || $[30] !== handlePointerDown || $[31] !== handleRef || $[32] !== onDoubleClick || $[33] !== t12) {
t13 = /*#__PURE__*/jsx("div", {
ref: handleRef,
className: classes.DraggableHandle,
role: "slider",
"aria-label": "Draggable pane splitter",
"aria-valuemin": ariaValueMin,
"aria-valuemax": ariaValueMax,
"aria-valuenow": ariaValueNow,
"aria-valuetext": t12,
tabIndex: 0,
onPointerDown: handlePointerDown,
onPointerMove: handlePointerMove,
onPointerUp: handlePointerUp,
onLostPointerCapture: handleLostPointerCapture,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
onDoubleClick: onDoubleClick
});
$[24] = ariaValueMax;
$[25] = ariaValueMin;
$[26] = ariaValueNow;
$[27] = handleKeyDown;
$[28] = handleKeyUp;
$[29] = handleLostPointerCapture;
$[30] = handlePointerDown;
$[31] = handleRef;
$[32] = onDoubleClick;
$[33] = t12;
$[34] = t13;
} else {
t13 = $[34];
}
return t13;
});
// ----------------------------------------------------------------------------
// PageLayout.Header
const Header = t0 => {
const $ = c(28);
const {
"aria-label": label,
"aria-labelledby": labelledBy,
padding: t1,
divider: t2,
dividerWhenNarrow: t3,
hidden: t4,
children,
style,
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 {
rowGap
} = React.useContext(PageLayoutContext);
let t6;
if ($[3] !== hidden) {
t6 = getResponsiveAttributes("hidden", hidden);
$[3] = hidden;
$[4] = t6;
} else {
t6 = $[4];
}
let t7;
if ($[5] !== className) {
t7 = clsx(classes.Header, className);
$[5] = className;
$[6] = t7;
} else {
t7 = $[6];
}
const t8 = `var(--spacing-${rowGap})`;
let t9;
if ($[7] !== style || $[8] !== t8) {
t9 = {
"--spacing": t8,
...style
};
$[7] = style;
$[8] = t8;
$[9] = t9;
} else {
t9 = $[9];
}
const t10 = t9;
const t11 = `var(--spacing-${padding})`;
let t12;
if ($[10] !== t11) {
t12 = {
"--spacing": t11
};
$[10] = t11;
$[11] = t12;
} else {
t12 = $[11];
}
const t13 = t12;
let t14;
if ($[12] !== children || $[13] !== t13) {
t14 = /*#__PURE__*/jsx("div", {
className: classes.HeaderContent,
style: t13,
children: children
});
$[12] = children;
$[13] = t13;
$[14] = t14;
} else {
t14 = $[14];
}
const t15 = `var(--spacing-${rowGap})`;
let t16;
if ($[15] !== t15) {
t16 = {
"--spacing": t15
};
$[15] = t15;
$[16] = t16;
} else {
t16 = $[16];
}
const t17 = t16;
let t18;
if ($[17] !== dividerProp || $[18] !== t17) {
t18 = /*#__PURE__*/jsx(HorizontalDivider, {
variant: dividerProp,
className: classes.HeaderHorizontalDivider,
style: t17
});
$[17] = dividerProp;
$[18] = t17;
$[19] = t18;
} else {
t18 = $[19];
}
let t19;
if ($[20] !== label || $[21] !== labelledBy || $[22] !== t10 || $[23] !== t14 || $[24] !== t18 || $[25] !== t6 || $[26] !== t7) {
t19 = /*#__PURE__*/jsxs("header", {
"aria-label": label,
"aria-labelledby": labelledBy,
...t6,
className: t7,
style: t10,
children: [t14, t18]
});
$[20] = label;
$[21] = labelledBy;
$[22] = t10;
$[23] = t14;
$[24] = t18;
$[25] = t6;
$[26] = t7;
$[27] = t19;
} else {
t19 = $[27];
}
return t19;
};
Header.displayName = 'PageLayout.Header';
const Content = t0 => {
const $ = c(19);
const {
as: t1,
"aria-label": label,
"aria-labelledby": labelledBy,
width: t2,
padding: t3,
hidden: t4,
children,
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 Component = as;
const {
contentWrapperRef
} = React.useContext(PageLayoutContext);
let t5;
if ($[0] !== className) {
t5 = clsx(classes.ContentWrapper, className);
$[0] = className;
$[1] = t5;
} else {
t5 = $[1];
}
let t6;
if ($[2] !== hidden) {
t6 = getResponsiveAttributes("is-hidden", hidden);
$[2] = hidden;
$[3] = t6;
} else {
t6 = $[3];
}
const t7 = `var(--spacing-${padding})`;
let t8;
if ($[4] !== t7) {
t8 = {
"--spacing": t7
};
$[4] = t7;
$[5] = t8;
} else {
t8 = $[5];
}
const t9 = t8;
let t10;
if ($[6] !== children || $[7] !== t9 || $[8] !== width) {
t10 = /*#__PURE__*/jsx("div", {
className: classes.Content,
"data-width": width,
style: t9,
children: children
});
$[6] = children;
$[7] = t9;
$[8] = width;
$[9] = t10;
} else {
t10 = $[9];
}
let t11;
if ($[10] !== Component || $[11] !== contentWrapperRef || $[12] !== label || $[13] !== labelledBy || $[14] !== style || $[15] !== t10 || $[16] !== t5 || $[17] !== t6) {
t11 = /*#__PURE__*/jsx(Component, {
ref: contentWrapperRef,
"aria-label": label,
"aria-labelledby": labelledBy,
style: style,
className: t5,
...t6,
children: t10
});
$[10] = Component;
$[11] = contentWrapperRef;
$[12] = label;
$[13] = labelledBy;
$[14] = style;
$[15] = t10;
$[16] = t5;
$[17] = t6;
$[18] = t11;
} else {
t11 = $[18];
}
return t11;
};
Content.displayName = 'PageLayout.Content';
const overflowProps = {
tabIndex: 0,
role: 'region'
};
const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
const $ = c(93);
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,
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;
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;
let t15;
if ($[6] !== positionProp) {
t15 = isResponsiveValue(positionProp) ? "end" : positionProp;
$[6] = positionProp;
$[7] = t15;
} else {
t15 = $[7];
}
const position = t15;
let t16;
if ($[8] !== dividerProp) {
t16 = isResponsiveValue(dividerProp) ? "none" : dividerProp;
$[8] = dividerProp;
$[9] = t16;
} else {
t16 = $[9];
}
const dividerVariant = t16;
const {
rowGap,
columnGap,
paneRef,
contentWrapperRef
} = React.useContext(PageLayoutContext);
const handleRef = React.useRef(null);
const dragStartClientXRef = React.useRef(0);
const dragStartWidthRef = React.useRef(0);
const dragMaxWidthRef = React.useRef(0);
let t17;
if ($[10] !== contentWrapperRef || $[11] !== minWidth || $[12] !== paneRef || $[13] !== resizable || $[14] !== width || $[15] !== widthStorageKey) {
t17 = {
width,
minWidth,
resizable,
widthStorageKey,
paneRef,
handleRef,
contentWrapperRef
};
$[10] = contentWrapperRef;
$[11] = minWidth;
$[12] = paneRef;
$[13] = resizable;
$[14] = width;
$[15] = widthStorageKey;
$[16] = t17;
} else {
t17 = $[16];
}
const {
currentWidth,
currentWidthRef,
minPaneWidth,
maxPaneWidth,
getMaxPaneWidth,
saveWidth,
getDefaultWidth
} = usePaneWidth(t17);
useRefObjectAsForwardedRef(forwardRef, paneRef);
const hasOverflow = useOverflow(paneRef);
const paneId = useId(id);
let labelProp;
if ($[17] !== hasOverflow || $[18] !== label || $[19] !== 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;
}
}
}
$[17] = hasOverflow;
$[18] = label;
$[19] = labelledBy;
$[20] = labelProp;
} else {
labelProp = $[20];
}
let t18;
if ($[21] !== className) {
t18 = clsx(classes.PaneWrapper, className);
$[21] = className;
$[22] = t18;
} else {
t18 = $[22];
}
const t19 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
const t20 = `var(--spacing-${rowGap})`;
const t21 = `var(--spacing-${columnGap})`;
let t22;
if ($[23] !== style || $[24] !== t19 || $[25] !== t20 || $[26] !== t21) {
t22 = {
"--offset-header": t19,
"--spacing-row": t20,
"--spacing-column": t21,
...style
};
$[23] = style;
$[24] = t19;
$[25] = t20;
$[26] = t21;
$[27] = t22;
} else {
t22 = $[27];
}
const t23 = t22;
let t24;
if ($[28] !== responsiveHidden) {
t24 = getResponsiveAttributes("is-hidden", responsiveHidden);
$[28] = responsiveHidden;
$[29] = t24;
} else {
t24 = $[29];
}
let t25;
if ($[30] !== positionProp) {
t25 = getResponsiveAttributes("position", positionProp);
$[30] = positionProp;
$[31] = t25;
} else {
t25 = $[31];
}
const t26 = sticky || undefined;
let t27;
if ($[32] !== dividerProp || $[33] !== dividerVariant) {
t27 = isResponsiveValue(dividerProp) ? dividerProp : {
narrow: dividerVariant,
regular: "none"
};
$[32] = dividerProp;
$[33] = dividerVariant;
$[34] = t27;
} else {
t27 = $[34];
}
const t28 = `var(--spacing-${rowGap})`;
let t29;
if ($[35] !== t28) {
t29 = {
"--spacing": t28
};
$[35] = t28;
$[36] = t29;
} else {
t29 = $[36];
}
const t30 = t29;
let t31;
if ($[37] !== positionProp || $[38] !== t27 || $[39] !== t30) {
t31 = /*#__PURE__*/jsx(HorizontalDivider, {
variant: t27,
className: classes.PaneHorizontalDivider,
style: t30,
position: positionProp
});
$[37] = positionProp;
$[38] = t27;
$[39] = t30;
$[40] = t31;
} else {
t31 = $[40];
}
let t32;
if ($[41] !== hasOverflow) {
t32 = hasOverflow ? overflowProps : {};
$[41] = hasOverflow;
$[42] = t32;
} else {
t32 = $[42];
}
let t33;
if ($[43] !== id || $[44] !== paneId) {
t33 = id && {
id: paneId
};
$[43] = id;
$[44] = paneId;
$[45] = t33;
} else {
t33 = $[45];
}
const t34 = resizable || undefined;
const t35 = `var(--spacing-${padding})`;
const t36 = isCustomWidthOptions(width) ? width.min : `${minWidth}px`;
const t37 = isCustomWidthOptions(width) ? width.max : "calc(100vw - var(--pane-max-width-diff))";
const t38 = isCustomWidthOptions(width) ? width.default : undefined;
const t39 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
const t40 = `${currentWidth}px`;
let t41;
if ($[46] !== t35 || $[47] !== t36 || $[48] !== t37 || $[49] !== t38 || $[50] !== t39 || $[51] !== t40) {
t41 = {
"--spacing": t35,
"--pane-min-width": t36,
"--pane-max-width": t37,
"--pane-width-custom": t38,
"--pane-width-size": t39,
"--pane-width": t40
};
$[46] = t35;
$[47] = t36;
$[48] = t37;
$[49] = t38;
$[50] = t39;
$[51] = t40;
$[52] = t41;
} else {
t41 = $[52];
}
const t42 = t41;
let t43;
if ($[53] !== children || $[54] !== labelProp || $[55] !== paneRef || $[56] !== t32 || $[57] !== t33 || $[58] !== t34 || $[59] !== t42) {
t43 = /*#__PURE__*/jsx("div", {
ref: paneRef,
suppressHydrationWarning: true,
...t32,
...labelProp,
...t33,
className: classes.Pane,
"data-resizable": t34,
style: t42,
children: children
});
$[53] = children;
$[54] = labelProp;
$[55] = paneRef;
$[56] = t32;
$[57] = t33;
$[58] = t34;
$[59] = t42;
$[60] = t43;
} else {
t43 = $[60];
}
let t44;
if ($[61] !== dividerProp || $[62] !== dividerVariant || $[63] !== resizable) {
t44 = isResponsiveValue(dividerProp) ? {
narrow: "none",
regular: resizable ? "line" : dividerProp.regular || "none",
wide: resizable ? "line" : dividerProp.wide || dividerProp.regular || "none"
} : {
narrow: "none",
regular: resizable ? "line" : dividerVariant
};
$[61] = dividerProp;
$[62] = dividerVariant;
$[63] = resizable;
$[64] = t44;
} else {
t44 = $[64];
}
const t45 = `var(--spacing-${columnGap})`;
let t46;
if ($[65] !== t45) {
t46 = {
"--spacing": t45
};
$[65] = t45;
$[66] = t46;
} else {
t46 = $[66];
}
const t47 = t46;
let t48;
if ($[67] !== currentWidth || $[68] !== currentWidthRef || $[69] !== getDefaultWidth || $[70] !== getMaxPaneWidth || $[71] !== maxPaneWidth || $[72] !== minPaneWidth || $[73] !== paneRef || $[74] !== position || $[75] !== resizable || $[76] !== saveWidth) {
t48 = resizable ? /*#__PURE__*/jsx(DragHandle, {
handleRef: handleRef,
"aria-valuemin": minPaneWidth,
"aria-valuemax": maxPaneWidth,
"aria-valuenow": currentWidth,
onDragStart: clientX => {
var _paneRef$current$getB, _paneRef$current;
dragStartClientXRef.current = clientX;
dragStartWidthRef.current = (_paneRef$current$getB = (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.getBoundingClientRect().width) !== null && _paneRef$current$getB !== void 0 ? _paneRef$current$getB : currentWidthRef.current;
dragMaxWidthRef.current = getMaxPaneWidth();
},
onDrag: (value, isKeyboard) => {
const maxWidth = isKeyboard ? getMaxPaneWidth() : dragMaxWidthRef.current;
if (isKeyboard) {
const delta = value;
const newWidth = Math.max(minPaneWidth, Math.min(maxWidth, currentWidthRef.current + delta));
if (newWidth !== currentWidthRef.current) {
var _paneRef$current2;
currentWidthRef.current = newWidth;
(_paneRef$current2 = paneRef.current) === null || _paneRef$current2 === void 0 ? void 0 : _paneRef$current2.style.setProperty("--pane-width", `${newWidth}px`);
updateAriaValues(handleRef.current, {
current: newWidth,
max: maxWidth
});
}
} else {
if (paneRef.current) {
const deltaX = value - dragStartClientXRef.current;
const directedDelta = position === "end" ? -deltaX : deltaX;
const newWidth_0 = dragStartWidthRef.current + directedDelta;
const clampedWidth = Math.max(minPaneWidth, Math.min(maxWidth, newWidth_0));
if (Math.round(clampedWidth) !== Math.round(currentWidthRef.current)) {
paneRef.current.style.setProperty("--pane-width", `${clampedWidth}px`);
currentWidthRef.current = clampedWidth;
updateAriaValues(handleRef.current, {
current: Math.round(clampedWidth),
max: maxWidth
});
}
}
}
},
onDragEnd: () => {
saveWidth(currentWidthRef.current);
},
onDoubleClick: () => {
const resetWidth = getDefaultWidth();
if (paneRef.current) {
paneRef.current.style.setProperty("--pane-width", `${resetWidth}px`);
currentWidthRef.current = resetWidth;
updateAriaValues(handleRef.current, {
current: resetWidth
});
}
saveWidth(resetWidth);
}
}) : null;
$[67] = currentWidth;
$[68] = currentWidthRef;
$[69] = getDefaultWidth;
$[70] = getMaxPaneWidth;
$[71] = maxPaneWidth;
$[72] = minPaneWidth;
$[73] = paneRef;
$[74] = position;
$[75] = resizable;
$[76] = saveWidth;
$[77] = t48;
} else {
t48 = $[77];
}
let t49;
if ($[78] !== positionProp || $[79] !== resizable || $[80] !== t44 || $[81] !== t47 || $[82] !== t48) {
t49 = /*#__PURE__*/jsx(VerticalDivider, {
variant: t44,
draggable: resizable,
position: positionProp,
className: classes.PaneVerticalDivider,
style: t47,
children: t48
});
$[78] = positionProp;
$[79] = resizable;
$[80] = t44;
$[81] = t47;
$[82] = t48;
$[83] = t49;
} else {
t49 = $[83];
}
let t50;
if ($[84] !== t18 || $[85] !== t23 || $[86] !== t24 || $[87] !== t25 || $[88] !== t26 || $[89] !== t31 || $[90] !== t43 || $[91] !== t49) {
t50 = /*#__PURE__*/jsxs("div", {
className: t18,
style: t23,
...t24,
...t25,
"data-sticky": t26,
children: [t31, t43, t49]
});
$[84] = t18;
$[85] = t23;
$[86] = t24;
$[87] = t25;
$[88] = t26;
$[89] = t31;
$[90] = t43;
$[91] = t49;
$[92] = t50;
} else {
t50 = $[92];
}
return t50;
});
Pane.displayName = 'PageLayout.Pane';
// ----------------------------------------------------------------------------
// PageLayout.Footer
const Footer = t0 => {
const $ = c(28);
const {
"aria-label": label,
"aria-labelledby": labelledBy,
padding: t1,
divider: t2,
dividerWhenNarrow: t3,
hidden: t4,
children,
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 {
rowGap
} = React.useContext(PageLayoutContext);
let t6;
if ($[3] !== hidden) {
t6 = getResponsiveAttributes("hidden", hidden);
$[3] = hidden;
$[4] = t6;
} else {
t6 = $[4];
}
let t7;
if ($[5] !== className) {
t7 = clsx(classes.FooterWrapper, className);
$[5] = className;
$[6] = t7;
} else {
t7 = $[6];
}
const t8 = `var(--spacing-${rowGap})`;
let t9;
if ($[7] !== style || $[8] !== t8) {
t9 = {
"--spacing": t8,
...style
};
$[7] = style;
$[8] = t8;
$[9] = t9;
} else {
t9 = $[9];
}
const t10 = t9;
const t11 = `var(--spacing-${rowGap})`;
let t12;
if ($[10] !== t11) {
t12 = {
"--spacing": t11
};
$[10] = t11;
$[11] = t12;
} else {
t12 = $[11];
}
const t13 = t12;
let t14;
if ($[12] !== dividerProp || $[13] !== t13) {
t14 = /*#__PURE__*/jsx(HorizontalDivider, {
className: classes.FooterHorizontalDivider,
style: t13,
variant: dividerProp
});
$[12] = dividerProp;
$[13] = t13;
$[14] = t14;
} else {
t14 = $[14];
}
const t15 = `var(--spacing-${padding})`;
let t16;
if ($[15] !== t15) {
t16 = {
"--spacing": t15
};
$[15] = t15;
$[16] = t16;
} else {
t16 = $[16];
}
const t17 = t16;
let t18;
if ($[17] !== children || $[18] !== t17) {
t18 = /*#__PURE__*/jsx("div", {
className: classes.FooterContent,
style: t17,
children: children
});
$[17] = children;
$[18] = t17;
$[19] = t18;
} else {
t18 = $[19];
}
let t19;
if ($[20] !== label || $[21] !== labelledBy || $[22] !== t10 || $[23] !== t14 || $[24] !== t18 || $[25] !== t6 || $[26] !== t7) {
t19 = /*#__PURE__*/jsxs("footer", {
"aria-label": label,
"aria-labelledby": labelledBy,
...t6,
className: t7,
style: t10,
children: [t14, t18]
});
$[20] = label;
$[21] = labelledBy;
$[22] = t10;
$[23] = t14;
$[24] = t18;
$[25] = t6;
$[26] = t7;
$[27] = t19;
} else {
t19 = $[27];
}
return t19;
};
Footer.displayName = 'PageLayout.Footer';
// ----------------------------------------------------------------------------
// Export
const PageLayout = Object.assign(Root, {
__SLOT__: Symbol('PageLayout'),
Header,
Content,
Pane: Pane,
Footer
});
Header.__SLOT__ = Symbol('PageLayout.Header');
Content.__SLOT__ = Symbol('PageLayout.Content');
Pane.__SLOT__ = Symbol('PageLayout.Pane');
Footer.__SLOT__ = Symbol('PageLayout.Footer');
export { PageLayout };