@primer/react 38.6.0 → 38.6.1

package/dist/PageLayout/PageLayout.js

@@ -5,11 +5,11 @@ 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 { canUseDOM } from '../utils/environment.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({
@@ -18,6 +18,9 @@ const PageLayoutContext = /*#__PURE__*/React.createContext({
   columnGap: 'normal',
   paneRef: {
     current: null
+  },
+  contentRef: {
+    current: null
   }
 });
 
@@ -39,6 +42,7 @@ const Root = t0 => {
   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 : {
@@ -57,7 +61,8 @@ const Root = t0 => {
       padding,
       rowGap,
       columnGap,
-      paneRef
+      paneRef,
+      contentRef
     };
     $[2] = columnGap;
     $[3] = padding;
@@ -100,6 +105,7 @@ const Root = t0 => {
   let t13;
   if ($[12] !== rest) {
     t13 = /*#__PURE__*/jsx("div", {
+      ref: contentRef,
       className: t12,
       children: rest
     });
@@ -225,248 +231,259 @@ const HorizontalDivider = t0 => {
   return t8;
 };
 const VerticalDivider = t0 => {
-  const $ = c(40);
+  const $ = c(12);
   const {
     variant: t1,
-    draggable: t2,
+    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,
-    position,
-    className,
-    style
+    "aria-valuemin": ariaValueMin,
+    "aria-valuemax": ariaValueMax,
+    "aria-valuenow": ariaValueNow
   } = 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 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
+    paneRef,
+    contentRef
   } = React.useContext(PageLayoutContext);
-  const [minWidth, setMinWidth] = React.useState(0);
-  const [maxWidth, setMaxWidth] = React.useState(0);
-  const [currentWidth, setCurrentWidth] = React.useState(0);
+  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 ($[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);
+  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);
     };
-    $[0] = paneRef;
-    $[1] = t3;
+    $[7] = setDragging;
+    $[8] = t3;
   } else {
-    t3 = $[1];
+    t3 = $[8];
   }
+  const handlePointerDown = t3;
   let t4;
-  if ($[2] !== isDragging || $[3] !== isKeyboardDrag || $[4] !== paneRef) {
-    t4 = [paneRef, isKeyboardDrag, isDragging];
-    $[2] = isDragging;
-    $[3] = isKeyboardDrag;
-    $[4] = paneRef;
-    $[5] = 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 = $[5];
+    t4 = $[10];
   }
-  React.useEffect(t3, t4);
+  const handlePointerMove = t4;
   let t5;
-  let t6;
-  if ($[6] !== onDrag) {
-    t5 = () => {
-      stableOnDrag.current = onDrag;
+  if ($[11] !== handleRef) {
+    t5 = event_1 => {
+      if (!isDragging(handleRef.current)) {
+        return;
+      }
+      event_1.preventDefault();
     };
-    t6 = [onDrag];
-    $[6] = onDrag;
-    $[7] = t5;
-    $[8] = t6;
+    $[11] = handleRef;
+    $[12] = t5;
   } else {
-    t5 = $[7];
-    t6 = $[8];
+    t5 = $[12];
   }
-  React.useEffect(t5, t6);
-  let t7;
-  let t8;
-  if ($[9] !== onDragEnd) {
-    t7 = () => {
-      stableOnDragEnd.current = onDragEnd;
+  const handlePointerUp = t5;
+  let t6;
+  if ($[13] !== handleRef || $[14] !== setDragging) {
+    t6 = () => {
+      if (!isDragging(handleRef.current)) {
+        return;
+      }
+      setDragging(false);
+      stableOnDragEnd.current();
     };
-    t8 = [onDragEnd];
-    $[9] = onDragEnd;
-    $[10] = t7;
-    $[11] = t8;
+    $[13] = handleRef;
+    $[14] = setDragging;
+    $[15] = t6;
   } else {
-    t7 = $[10];
-    t8 = $[11];
+    t6 = $[15];
   }
-  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);
+  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 (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");
+        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);
       }
-      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] !== variant) {
-    t12 = getResponsiveAttributes("variant", variant);
-    $[21] = variant;
-    $[22] = t12;
+    $[16] = paneRef;
+    $[17] = setDragging;
+    $[18] = t7;
   } else {
-    t12 = $[22];
+    t7 = $[18];
   }
-  let t13;
-  if ($[23] !== position) {
-    t13 = getResponsiveAttributes("position", position);
-    $[23] = position;
-    $[24] = t13;
+  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 {
-    t13 = $[24];
+    t8 = $[20];
   }
-  let t14;
-  if ($[25] !== currentWidth || $[26] !== draggable || $[27] !== isDragging || $[28] !== isKeyboardDrag || $[29] !== maxWidth || $[30] !== minWidth || $[31] !== onDoubleClick || $[32] !== onDragStart) {
-    t14 = draggable ? /*#__PURE__*/jsx("div", {
+  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,
-      "data-dragging": isDragging || isKeyboardDrag,
       role: "slider",
       "aria-label": "Draggable pane splitter",
-      "aria-valuemin": minWidth,
-      "aria-valuemax": maxWidth,
-      "aria-valuenow": currentWidth,
-      "aria-valuetext": `Pane width ${currentWidth} pixels`,
+      "aria-valuemin": ariaValueMin,
+      "aria-valuemax": ariaValueMax,
+      "aria-valuenow": ariaValueNow,
+      "aria-valuetext": t9,
       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();
-        }
-      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onLostPointerCapture: handleLostPointerCapture,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
       onDoubleClick: onDoubleClick
-    }) : null;
-    $[25] = currentWidth;
-    $[26] = draggable;
-    $[27] = isDragging;
-    $[28] = isKeyboardDrag;
-    $[29] = maxWidth;
-    $[30] = minWidth;
-    $[31] = onDoubleClick;
-    $[32] = onDragStart;
-    $[33] = t14;
-  } else {
-    t14 = $[33];
-  }
-  let t15;
-  if ($[34] !== style || $[35] !== t11 || $[36] !== t12 || $[37] !== t13 || $[38] !== t14) {
-    t15 = /*#__PURE__*/jsx("div", {
-      className: t11,
-      ...t12,
-      ...t13,
-      style: style,
-      children: t14
     });
-    $[34] = style;
-    $[35] = t11;
-    $[36] = t12;
-    $[37] = t13;
-    $[38] = t14;
-    $[39] = t15;
+    $[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 {
-    t15 = $[39];
+    t10 = $[33];
   }
-  return t15;
+  return t10;
 };
 
 // ----------------------------------------------------------------------------
@@ -694,22 +711,6 @@ const Content = t0 => {
   return t11;
 };
 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'
@@ -797,48 +798,43 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     columnGap,
     paneRef
   } = React.useContext(PageLayoutContext);
-  const getDefaultPaneWidth = _temp;
+  const handleRef = React.useRef(null);
+  const dragStartClientXRef = React.useRef(0);
+  const dragStartWidthRef = React.useRef(0);
+  const dragMaxWidthRef = React.useRef(0);
   let t17;
-  if ($[10] !== width || $[11] !== widthStorageKey) {
-    t17 = () => {
-      if (!canUseDOM) {
-        return getDefaultPaneWidth(width);
-      }
-      let storedWidth;
-      try {
-        storedWidth = localStorage.getItem(widthStorageKey);
-      } catch (t18) {
-        storedWidth = null;
-      }
-      return storedWidth && !isNaN(Number(storedWidth)) ? Number(storedWidth) : getDefaultPaneWidth(width);
-    };
-    $[10] = width;
-    $[11] = widthStorageKey;
-    $[12] = t17;
-  } else {
-    t17 = $[12];
-  }
-  const [paneWidth, setPaneWidth] = React.useState(t17);
-  let t18;
-  if ($[13] !== widthStorageKey) {
-    t18 = width_1 => {
-      setPaneWidth(width_1);
-      try {
-        localStorage.setItem(widthStorageKey, width_1.toString());
-      } catch (t19) {
-      }
+  if ($[10] !== minWidth || $[11] !== paneRef || $[12] !== resizable || $[13] !== width || $[14] !== widthStorageKey) {
+    t17 = {
+      width,
+      minWidth,
+      resizable,
+      widthStorageKey,
+      paneRef,
+      handleRef
     };
-    $[13] = widthStorageKey;
-    $[14] = t18;
+    $[10] = minWidth;
+    $[11] = paneRef;
+    $[12] = resizable;
+    $[13] = width;
+    $[14] = widthStorageKey;
+    $[15] = t17;
   } else {
-    t18 = $[14];
+    t17 = $[15];
   }
-  const updatePaneWidth = t18;
+  const {
+    currentWidth,
+    currentWidthRef,
+    minPaneWidth,
+    maxPaneWidth,
+    getMaxPaneWidth,
+    saveWidth,
+    getDefaultWidth
+  } = usePaneWidth(t17);
   useRefObjectAsForwardedRef(forwardRef, paneRef);
   const hasOverflow = useOverflow(paneRef);
   const paneId = useId(id);
   let labelProp;
-  if ($[15] !== hasOverflow || $[16] !== label || $[17] !== labelledBy) {
+  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;
@@ -850,170 +846,171 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
         }
       }
     }
-    $[15] = hasOverflow;
-    $[16] = label;
-    $[17] = labelledBy;
-    $[18] = labelProp;
+    $[16] = hasOverflow;
+    $[17] = label;
+    $[18] = labelledBy;
+    $[19] = labelProp;
   } else {
-    labelProp = $[18];
+    labelProp = $[19];
   }
-  let t19;
-  if ($[19] !== className) {
-    t19 = clsx(classes.PaneWrapper, className);
-    $[19] = className;
-    $[20] = t19;
-  } else {
-    t19 = $[20];
-  }
-  const t20 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
-  const t21 = `var(--spacing-${rowGap})`;
-  const t22 = `var(--spacing-${columnGap})`;
-  let t23;
-  if ($[21] !== style || $[22] !== t20 || $[23] !== t21 || $[24] !== t22) {
-    t23 = {
-      "--offset-header": t20,
-      "--spacing-row": t21,
-      "--spacing-column": t22,
+  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
     };
-    $[21] = style;
-    $[22] = t20;
-    $[23] = t21;
-    $[24] = t22;
-    $[25] = t23;
+    $[22] = style;
+    $[23] = t19;
+    $[24] = t20;
+    $[25] = t21;
+    $[26] = t22;
   } else {
-    t23 = $[25];
+    t22 = $[26];
   }
-  const t24 = t23;
-  let t25;
-  if ($[26] !== responsiveHidden) {
-    t25 = getResponsiveAttributes("is-hidden", responsiveHidden);
-    $[26] = responsiveHidden;
-    $[27] = t25;
+  const t23 = t22;
+  let t24;
+  if ($[27] !== responsiveHidden) {
+    t24 = getResponsiveAttributes("is-hidden", responsiveHidden);
+    $[27] = responsiveHidden;
+    $[28] = t24;
   } else {
-    t25 = $[27];
+    t24 = $[28];
   }
-  let t26;
-  if ($[28] !== positionProp) {
-    t26 = getResponsiveAttributes("position", positionProp);
-    $[28] = positionProp;
-    $[29] = t26;
+  let t25;
+  if ($[29] !== positionProp) {
+    t25 = getResponsiveAttributes("position", positionProp);
+    $[29] = positionProp;
+    $[30] = t25;
   } else {
-    t26 = $[29];
+    t25 = $[30];
   }
-  const t27 = sticky || undefined;
-  let t28;
-  if ($[30] !== dividerProp || $[31] !== dividerVariant) {
-    t28 = isResponsiveValue(dividerProp) ? dividerProp : {
+  const t26 = sticky || undefined;
+  let t27;
+  if ($[31] !== dividerProp || $[32] !== dividerVariant) {
+    t27 = isResponsiveValue(dividerProp) ? dividerProp : {
       narrow: dividerVariant,
       regular: "none"
     };
-    $[30] = dividerProp;
-    $[31] = dividerVariant;
-    $[32] = t28;
+    $[31] = dividerProp;
+    $[32] = dividerVariant;
+    $[33] = t27;
   } else {
-    t28 = $[32];
+    t27 = $[33];
   }
-  const t29 = `var(--spacing-${rowGap})`;
-  let t30;
-  if ($[33] !== t29) {
-    t30 = {
-      "--spacing": t29
+  const t28 = `var(--spacing-${rowGap})`;
+  let t29;
+  if ($[34] !== t28) {
+    t29 = {
+      "--spacing": t28
     };
-    $[33] = t29;
-    $[34] = t30;
+    $[34] = t28;
+    $[35] = t29;
   } else {
-    t30 = $[34];
+    t29 = $[35];
   }
-  const t31 = t30;
-  let t32;
-  if ($[35] !== positionProp || $[36] !== t28 || $[37] !== t31) {
-    t32 = /*#__PURE__*/jsx(HorizontalDivider, {
-      variant: t28,
+  const t30 = t29;
+  let t31;
+  if ($[36] !== positionProp || $[37] !== t27 || $[38] !== t30) {
+    t31 = /*#__PURE__*/jsx(HorizontalDivider, {
+      variant: t27,
       className: classes.PaneHorizontalDivider,
-      style: t31,
+      style: t30,
       position: positionProp
     });
-    $[35] = positionProp;
-    $[36] = t28;
-    $[37] = t31;
-    $[38] = t32;
+    $[36] = positionProp;
+    $[37] = t27;
+    $[38] = t30;
+    $[39] = t31;
   } else {
-    t32 = $[38];
+    t31 = $[39];
   }
-  let t33;
-  if ($[39] !== hasOverflow) {
-    t33 = hasOverflow ? overflowProps : {};
-    $[39] = hasOverflow;
-    $[40] = t33;
+  let t32;
+  if ($[40] !== hasOverflow) {
+    t32 = hasOverflow ? overflowProps : {};
+    $[40] = hasOverflow;
+    $[41] = t32;
   } else {
-    t33 = $[40];
+    t32 = $[41];
   }
-  let t34;
-  if ($[41] !== id || $[42] !== paneId) {
-    t34 = id && {
+  let t33;
+  if ($[42] !== id || $[43] !== paneId) {
+    t33 = id && {
       id: paneId
     };
-    $[41] = id;
-    $[42] = paneId;
-    $[43] = t34;
-  } else {
-    t34 = $[43];
-  }
-  const t35 = resizable || undefined;
-  const t36 = `var(--spacing-${padding})`;
-  const t37 = isCustomWidthOptions(width) ? width.min : `${minWidth}px`;
-  const t38 = isCustomWidthOptions(width) ? width.max : "calc(100vw - var(--pane-max-width-diff))";
-  const t39 = isCustomWidthOptions(width) ? width.default : undefined;
-  const t40 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
-  const t41 = `${paneWidth}px`;
-  let t42;
-  if ($[44] !== t36 || $[45] !== t37 || $[46] !== t38 || $[47] !== t39 || $[48] !== t40 || $[49] !== t41) {
-    t42 = {
-      "--spacing": t36,
-      "--pane-min-width": t37,
-      "--pane-max-width": t38,
-      "--pane-width-custom": t39,
-      "--pane-width-size": t40,
-      "--pane-width": t41
+    $[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
     };
-    $[44] = t36;
-    $[45] = t37;
-    $[46] = t38;
-    $[47] = t39;
-    $[48] = t40;
-    $[49] = t41;
-    $[50] = t42;
-  } else {
-    t42 = $[50];
-  }
-  const t43 = t42;
-  let t44;
-  if ($[51] !== children || $[52] !== labelProp || $[53] !== paneRef || $[54] !== t33 || $[55] !== t34 || $[56] !== t35 || $[57] !== t43) {
-    t44 = /*#__PURE__*/jsx("div", {
+    $[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,
-      ...t33,
+      suppressHydrationWarning: true,
+      ...t32,
       ...labelProp,
-      ...t34,
+      ...t33,
       className: classes.Pane,
-      "data-resizable": t35,
-      style: t43,
+      "data-resizable": t34,
+      style: t42,
       children: children
     });
-    $[51] = children;
-    $[52] = labelProp;
-    $[53] = paneRef;
-    $[54] = t33;
-    $[55] = t34;
-    $[56] = t35;
-    $[57] = t43;
-    $[58] = t44;
-  } else {
-    t44 = $[58];
-  }
-  let t45;
-  if ($[59] !== dividerProp || $[60] !== dividerVariant || $[61] !== resizable) {
-    t45 = isResponsiveValue(dividerProp) ? {
+    $[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"
@@ -1021,115 +1018,140 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       narrow: "none",
       regular: resizable ? "line" : dividerVariant
     };
-    $[59] = dividerProp;
-    $[60] = dividerVariant;
-    $[61] = resizable;
-    $[62] = t45;
+    $[60] = dividerProp;
+    $[61] = dividerVariant;
+    $[62] = resizable;
+    $[63] = t44;
   } else {
-    t45 = $[62];
+    t44 = $[63];
   }
+  const t45 = `var(--spacing-${columnGap})`;
   let t46;
-  if ($[63] !== paneWidth || $[64] !== position || $[65] !== updatePaneWidth) {
-    t46 = (delta, t47) => {
-      const isKeyboard = t47 === undefined ? false : t47;
-      let deltaWithDirection;
-      if (isKeyboard) {
-        deltaWithDirection = delta;
-      } else {
-        deltaWithDirection = position === "end" ? -delta : delta;
-      }
-      updatePaneWidth(paneWidth + deltaWithDirection);
+  if ($[64] !== t45) {
+    t46 = {
+      "--spacing": t45
     };
-    $[63] = paneWidth;
-    $[64] = position;
-    $[65] = updatePaneWidth;
-    $[66] = t46;
-  } else {
-    t46 = $[66];
-  }
-  let t47;
-  if ($[67] !== paneRef || $[68] !== updatePaneWidth) {
-    t47 = () => {
-      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);
-    };
-    $[67] = paneRef;
-    $[68] = updatePaneWidth;
-    $[69] = t47;
+    $[64] = t45;
+    $[65] = t46;
   } else {
-    t47 = $[69];
+    t46 = $[65];
   }
+  const t47 = t46;
   let t48;
-  if ($[70] !== updatePaneWidth || $[71] !== width) {
-    t48 = () => updatePaneWidth(getDefaultPaneWidth(width));
-    $[70] = updatePaneWidth;
-    $[71] = width;
-    $[72] = t48;
-  } else {
-    t48 = $[72];
-  }
-  const t49 = `var(--spacing-${columnGap})`;
-  let t50;
-  if ($[73] !== t49) {
-    t50 = {
-      "--spacing": t49
-    };
-    $[73] = t49;
-    $[74] = t50;
-  } else {
-    t50 = $[74];
-  }
-  const t51 = t50;
-  let t52;
-  if ($[75] !== positionProp || $[76] !== resizable || $[77] !== t45 || $[78] !== t46 || $[79] !== t47 || $[80] !== t48 || $[81] !== t51) {
-    t52 = /*#__PURE__*/jsx(VerticalDivider, {
-      variant: t45,
+  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,
-      onDrag: t46,
-      onDragEnd: t47,
       position: positionProp,
-      onDoubleClick: t48,
       className: classes.PaneVerticalDivider,
-      style: t51
+      style: t47,
+      children: t48
     });
-    $[75] = positionProp;
-    $[76] = resizable;
-    $[77] = t45;
-    $[78] = t46;
-    $[79] = t47;
-    $[80] = t48;
-    $[81] = t51;
-    $[82] = t52;
-  } else {
-    t52 = $[82];
-  }
-  let t53;
-  if ($[83] !== t19 || $[84] !== t24 || $[85] !== t25 || $[86] !== t26 || $[87] !== t27 || $[88] !== t32 || $[89] !== t44 || $[90] !== t52) {
-    t53 = /*#__PURE__*/jsxs("div", {
-      className: t19,
-      style: t24,
+    $[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,
-      ...t26,
-      "data-sticky": t27,
-      children: [t32, t44, t52]
+      "data-sticky": t26,
+      children: [t31, t43, t49]
     });
-    $[83] = t19;
-    $[84] = t24;
-    $[85] = t25;
-    $[86] = t26;
-    $[87] = t27;
-    $[88] = t32;
-    $[89] = t44;
-    $[90] = t52;
-    $[91] = t53;
-  } else {
-    t53 = $[91];
-  }
-  return t53;
+    $[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';
 
@@ -1288,15 +1310,5 @@ Header.__SLOT__ = Symbol('PageLayout.Header');
 Content.__SLOT__ = Symbol('PageLayout.Content');
 Pane.__SLOT__ = Symbol('PageLayout.Pane');
 Footer.__SLOT__ = Symbol('PageLayout.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 };