@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1,315 lines (1,302 loc) • 33.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 } 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 { jsxs, jsx } from 'react/jsx-runtime';
const PageLayoutContext = /*#__PURE__*/React.createContext({
padding: 'normal',
rowGap: 'normal',
columnGap: 'normal',
paneRef: {
current: null
},
contentRef: {
current: null
}
});
// TODO: refs
const Root = t0 => {
const $ = c(26);
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 contentRef = 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,
contentRef
};
$[2] = columnGap;
$[3] = padding;
$[4] = rowGap;
$[5] = t6;
} else {
t6 = $[5];
}
const memoizedContextValue = t6;
const t7 = `var(--spacing-${padding})`;
let t8;
if ($[6] !== style || $[7] !== t7) {
t8 = {
"--spacing": t7,
...style
};
$[6] = style;
$[7] = t7;
$[8] = t8;
} else {
t8 = $[8];
}
const t9 = t8;
let t10;
if ($[9] !== className) {
t10 = clsx(classes.PageLayoutRoot, className);
$[9] = className;
$[10] = t10;
} else {
t10 = $[10];
}
const t11 = slots.header;
let t12;
if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
t12 = clsx(classes.PageLayoutContent);
$[11] = t12;
} else {
t12 = $[11];
}
let t13;
if ($[12] !== rest) {
t13 = /*#__PURE__*/jsx("div", {
ref: contentRef,
className: t12,
children: rest
});
$[12] = rest;
$[13] = t13;
} else {
t13 = $[13];
}
let t14;
if ($[14] !== containerWidth || $[15] !== slots.footer || $[16] !== slots.header || $[17] !== t13) {
t14 = /*#__PURE__*/jsxs("div", {
className: classes.PageLayoutWrapper,
"data-width": containerWidth,
children: [t11, t13, slots.footer]
});
$[14] = containerWidth;
$[15] = slots.footer;
$[16] = slots.header;
$[17] = t13;
$[18] = t14;
} else {
t14 = $[18];
}
let t15;
if ($[19] !== t10 || $[20] !== t14 || $[21] !== t9) {
t15 = /*#__PURE__*/jsx("div", {
style: t9,
className: t10,
children: t14
});
$[19] = t10;
$[20] = t14;
$[21] = t9;
$[22] = t15;
} else {
t15 = $[22];
}
let t16;
if ($[23] !== memoizedContextValue || $[24] !== t15) {
t16 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
value: memoizedContextValue,
children: t15
});
$[23] = memoizedContextValue;
$[24] = t15;
$[25] = t16;
} else {
t16 = $[25];
}
return t16;
};
Root.displayName = 'PageLayout';
// ----------------------------------------------------------------------------
// Divider (internal)
const HorizontalDivider = 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;
};
const VerticalDivider = 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;
};
const DATA_DRAGGING_ATTR = 'data-dragging';
const isDragging = handle => {
return (handle === null || handle === void 0 ? void 0 : handle.getAttribute(DATA_DRAGGING_ATTR)) === 'true';
};
/**
* 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 = t0 => {
const $ = c(34);
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,
contentRef
} = React.useContext(PageLayoutContext);
let t2;
if ($[4] !== contentRef || $[5] !== handleRef) {
t2 = dragging => {
if (dragging) {
var _handleRef$current, _contentRef$current;
(_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.setAttribute(DATA_DRAGGING_ATTR, "true");
(_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.setAttribute(DATA_DRAGGING_ATTR, "true");
} else {
var _handleRef$current2, _contentRef$current2;
(_handleRef$current2 = handleRef.current) === null || _handleRef$current2 === void 0 ? void 0 : _handleRef$current2.removeAttribute(DATA_DRAGGING_ATTR);
(_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.removeAttribute(DATA_DRAGGING_ATTR);
}
};
$[4] = contentRef;
$[5] = handleRef;
$[6] = t2;
} else {
t2 = $[6];
}
const setDragging = t2;
let t3;
if ($[7] !== setDragging) {
t3 = event => {
if (event.button !== 0) {
return;
}
event.preventDefault();
const target = event.currentTarget;
target.setPointerCapture(event.pointerId);
stableOnDragStart.current(event.clientX);
setDragging(true);
};
$[7] = setDragging;
$[8] = t3;
} else {
t3 = $[8];
}
const handlePointerDown = t3;
let t4;
if ($[9] !== handleRef) {
t4 = event_0 => {
if (!isDragging(handleRef.current)) {
return;
}
event_0.preventDefault();
stableOnDrag.current(event_0.clientX, false);
};
$[9] = handleRef;
$[10] = t4;
} else {
t4 = $[10];
}
const handlePointerMove = t4;
let t5;
if ($[11] !== handleRef) {
t5 = event_1 => {
if (!isDragging(handleRef.current)) {
return;
}
event_1.preventDefault();
};
$[11] = handleRef;
$[12] = t5;
} else {
t5 = $[12];
}
const handlePointerUp = t5;
let t6;
if ($[13] !== handleRef || $[14] !== setDragging) {
t6 = () => {
if (!isDragging(handleRef.current)) {
return;
}
setDragging(false);
stableOnDragEnd.current();
};
$[13] = handleRef;
$[14] = setDragging;
$[15] = t6;
} else {
t6 = $[15];
}
const handleLostPointerCapture = t6;
let t7;
if ($[16] !== paneRef || $[17] !== setDragging) {
t7 = event_2 => {
if (event_2.key === "ArrowLeft" || event_2.key === "ArrowRight" || event_2.key === "ArrowUp" || event_2.key === "ArrowDown") {
event_2.preventDefault();
if (!paneRef.current) {
return;
}
const delta = event_2.key === "ArrowLeft" || event_2.key === "ArrowDown" ? -ARROW_KEY_STEP : ARROW_KEY_STEP;
setDragging(true);
stableOnDrag.current(delta, true);
}
};
$[16] = paneRef;
$[17] = setDragging;
$[18] = t7;
} else {
t7 = $[18];
}
const handleKeyDown = t7;
let t8;
if ($[19] !== setDragging) {
t8 = event_3 => {
if (event_3.key === "ArrowLeft" || event_3.key === "ArrowRight" || event_3.key === "ArrowUp" || event_3.key === "ArrowDown") {
event_3.preventDefault();
setDragging(false);
stableOnDragEnd.current();
}
};
$[19] = setDragging;
$[20] = t8;
} else {
t8 = $[20];
}
const handleKeyUp = t8;
const t9 = ariaValueNow !== undefined ? `Pane width ${ariaValueNow} pixels` : undefined;
let t10;
if ($[21] !== ariaValueMax || $[22] !== ariaValueMin || $[23] !== ariaValueNow || $[24] !== handleKeyDown || $[25] !== handleKeyUp || $[26] !== handleLostPointerCapture || $[27] !== handlePointerDown || $[28] !== handlePointerMove || $[29] !== handlePointerUp || $[30] !== handleRef || $[31] !== onDoubleClick || $[32] !== t9) {
t10 = /*#__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": t9,
tabIndex: 0,
onPointerDown: handlePointerDown,
onPointerMove: handlePointerMove,
onPointerUp: handlePointerUp,
onLostPointerCapture: handleLostPointerCapture,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
onDoubleClick: onDoubleClick
});
$[21] = ariaValueMax;
$[22] = ariaValueMin;
$[23] = ariaValueNow;
$[24] = handleKeyDown;
$[25] = handleKeyUp;
$[26] = handleLostPointerCapture;
$[27] = handlePointerDown;
$[28] = handlePointerMove;
$[29] = handlePointerUp;
$[30] = handleRef;
$[31] = onDoubleClick;
$[32] = t9;
$[33] = t10;
} else {
t10 = $[33];
}
return t10;
};
// ----------------------------------------------------------------------------
// 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(18);
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;
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] !== label || $[12] !== labelledBy || $[13] !== style || $[14] !== t10 || $[15] !== t5 || $[16] !== t6) {
t11 = /*#__PURE__*/jsx(Component, {
"aria-label": label,
"aria-labelledby": labelledBy,
style: style,
className: t5,
...t6,
children: t10
});
$[10] = Component;
$[11] = label;
$[12] = labelledBy;
$[13] = style;
$[14] = t10;
$[15] = t5;
$[16] = t6;
$[17] = t11;
} else {
t11 = $[17];
}
return t11;
};
Content.displayName = 'PageLayout.Content';
const overflowProps = {
tabIndex: 0,
role: 'region'
};
const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
const $ = c(92);
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
} = 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] !== minWidth || $[11] !== paneRef || $[12] !== resizable || $[13] !== width || $[14] !== widthStorageKey) {
t17 = {
width,
minWidth,
resizable,
widthStorageKey,
paneRef,
handleRef
};
$[10] = minWidth;
$[11] = paneRef;
$[12] = resizable;
$[13] = width;
$[14] = widthStorageKey;
$[15] = t17;
} else {
t17 = $[15];
}
const {
currentWidth,
currentWidthRef,
minPaneWidth,
maxPaneWidth,
getMaxPaneWidth,
saveWidth,
getDefaultWidth
} = usePaneWidth(t17);
useRefObjectAsForwardedRef(forwardRef, paneRef);
const hasOverflow = useOverflow(paneRef);
const paneId = useId(id);
let labelProp;
if ($[16] !== hasOverflow || $[17] !== label || $[18] !== 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;
}
}
}
$[16] = hasOverflow;
$[17] = label;
$[18] = labelledBy;
$[19] = labelProp;
} else {
labelProp = $[19];
}
let t18;
if ($[20] !== className) {
t18 = clsx(classes.PaneWrapper, className);
$[20] = className;
$[21] = t18;
} else {
t18 = $[21];
}
const t19 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
const t20 = `var(--spacing-${rowGap})`;
const t21 = `var(--spacing-${columnGap})`;
let t22;
if ($[22] !== style || $[23] !== t19 || $[24] !== t20 || $[25] !== t21) {
t22 = {
"--offset-header": t19,
"--spacing-row": t20,
"--spacing-column": t21,
...style
};
$[22] = style;
$[23] = t19;
$[24] = t20;
$[25] = t21;
$[26] = t22;
} else {
t22 = $[26];
}
const t23 = t22;
let t24;
if ($[27] !== responsiveHidden) {
t24 = getResponsiveAttributes("is-hidden", responsiveHidden);
$[27] = responsiveHidden;
$[28] = t24;
} else {
t24 = $[28];
}
let t25;
if ($[29] !== positionProp) {
t25 = getResponsiveAttributes("position", positionProp);
$[29] = positionProp;
$[30] = t25;
} else {
t25 = $[30];
}
const t26 = sticky || undefined;
let t27;
if ($[31] !== dividerProp || $[32] !== dividerVariant) {
t27 = isResponsiveValue(dividerProp) ? dividerProp : {
narrow: dividerVariant,
regular: "none"
};
$[31] = dividerProp;
$[32] = dividerVariant;
$[33] = t27;
} else {
t27 = $[33];
}
const t28 = `var(--spacing-${rowGap})`;
let t29;
if ($[34] !== t28) {
t29 = {
"--spacing": t28
};
$[34] = t28;
$[35] = t29;
} else {
t29 = $[35];
}
const t30 = t29;
let t31;
if ($[36] !== positionProp || $[37] !== t27 || $[38] !== t30) {
t31 = /*#__PURE__*/jsx(HorizontalDivider, {
variant: t27,
className: classes.PaneHorizontalDivider,
style: t30,
position: positionProp
});
$[36] = positionProp;
$[37] = t27;
$[38] = t30;
$[39] = t31;
} else {
t31 = $[39];
}
let t32;
if ($[40] !== hasOverflow) {
t32 = hasOverflow ? overflowProps : {};
$[40] = hasOverflow;
$[41] = t32;
} else {
t32 = $[41];
}
let t33;
if ($[42] !== id || $[43] !== paneId) {
t33 = id && {
id: paneId
};
$[42] = id;
$[43] = paneId;
$[44] = t33;
} else {
t33 = $[44];
}
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 ($[45] !== t35 || $[46] !== t36 || $[47] !== t37 || $[48] !== t38 || $[49] !== t39 || $[50] !== t40) {
t41 = {
"--spacing": t35,
"--pane-min-width": t36,
"--pane-max-width": t37,
"--pane-width-custom": t38,
"--pane-width-size": t39,
"--pane-width": t40
};
$[45] = t35;
$[46] = t36;
$[47] = t37;
$[48] = t38;
$[49] = t39;
$[50] = t40;
$[51] = t41;
} else {
t41 = $[51];
}
const t42 = t41;
let t43;
if ($[52] !== children || $[53] !== labelProp || $[54] !== paneRef || $[55] !== t32 || $[56] !== t33 || $[57] !== t34 || $[58] !== t42) {
t43 = /*#__PURE__*/jsx("div", {
ref: paneRef,
suppressHydrationWarning: true,
...t32,
...labelProp,
...t33,
className: classes.Pane,
"data-resizable": t34,
style: t42,
children: children
});
$[52] = children;
$[53] = labelProp;
$[54] = paneRef;
$[55] = t32;
$[56] = t33;
$[57] = t34;
$[58] = t42;
$[59] = t43;
} else {
t43 = $[59];
}
let t44;
if ($[60] !== dividerProp || $[61] !== dividerVariant || $[62] !== 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
};
$[60] = dividerProp;
$[61] = dividerVariant;
$[62] = resizable;
$[63] = t44;
} else {
t44 = $[63];
}
const t45 = `var(--spacing-${columnGap})`;
let t46;
if ($[64] !== t45) {
t46 = {
"--spacing": t45
};
$[64] = t45;
$[65] = t46;
} else {
t46 = $[65];
}
const t47 = t46;
let t48;
if ($[66] !== currentWidth || $[67] !== currentWidthRef || $[68] !== getDefaultWidth || $[69] !== getMaxPaneWidth || $[70] !== maxPaneWidth || $[71] !== minPaneWidth || $[72] !== paneRef || $[73] !== position || $[74] !== resizable || $[75] !== 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;
$[66] = currentWidth;
$[67] = currentWidthRef;
$[68] = getDefaultWidth;
$[69] = getMaxPaneWidth;
$[70] = maxPaneWidth;
$[71] = minPaneWidth;
$[72] = paneRef;
$[73] = position;
$[74] = resizable;
$[75] = saveWidth;
$[76] = t48;
} else {
t48 = $[76];
}
let t49;
if ($[77] !== positionProp || $[78] !== resizable || $[79] !== t44 || $[80] !== t47 || $[81] !== t48) {
t49 = /*#__PURE__*/jsx(VerticalDivider, {
variant: t44,
draggable: resizable,
position: positionProp,
className: classes.PaneVerticalDivider,
style: t47,
children: t48
});
$[77] = positionProp;
$[78] = resizable;
$[79] = t44;
$[80] = t47;
$[81] = t48;
$[82] = t49;
} else {
t49 = $[82];
}
let t50;
if ($[83] !== t18 || $[84] !== t23 || $[85] !== t24 || $[86] !== t25 || $[87] !== t26 || $[88] !== t31 || $[89] !== t43 || $[90] !== t49) {
t50 = /*#__PURE__*/jsxs("div", {
className: t18,
style: t23,
...t24,
...t25,
"data-sticky": t26,
children: [t31, t43, t49]
});
$[83] = t18;
$[84] = t23;
$[85] = t24;
$[86] = t25;
$[87] = t26;
$[88] = t31;
$[89] = t43;
$[90] = t49;
$[91] = t50;
} else {
t50 = $[91];
}
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 };