@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/PageLayout/PageLayout.module.css.js

@@ -1,5 +1,31 @@
-import './PageLayout-3444a142.css';
-
-var classes = {"paneMaxWidthDiffBreakpoint":"1280","paneMaxWidthDiffDefault":"511","sidebarMaxWidthDiffDefault":"256","paneMaxWidthDiffWide":"959","PageLayoutRoot":"prc-PageLayout-PageLayoutRoot--KH-d","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-2BhU2","PageLayoutContent":"prc-PageLayout-PageLayoutContent-BneH9","HorizontalDivider":"prc-PageLayout-HorizontalDivider-JLVqp","VerticalDivider":"prc-PageLayout-VerticalDivider-9QRmK","Header":"prc-PageLayout-Header-0of-R","HeaderContent":"prc-PageLayout-HeaderContent-gdFfN","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-odAHl","ContentWrapper":"prc-PageLayout-ContentWrapper-gR9eG","Content":"prc-PageLayout-Content-xWL-A","PaneWrapper":"prc-PageLayout-PaneWrapper-pHPop","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-le57g","Pane":"prc-PageLayout-Pane-AyzHK","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-9tbnE","FooterWrapper":"prc-PageLayout-FooterWrapper-9cB8y","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-W-RaS","FooterContent":"prc-PageLayout-FooterContent-HUS0V","DraggableHandle":"prc-PageLayout-DraggableHandle-9s6B4","SidebarWrapper":"prc-PageLayout-SidebarWrapper-kLG4B","Sidebar":"prc-PageLayout-Sidebar-iciWg","SidebarVerticalDivider":"prc-PageLayout-SidebarVerticalDivider-0Rl0V"};
-
-export { classes as default };
+import "./PageLayout-3444a142.css";
+//#region src/PageLayout/PageLayout.module.css.js
+var PageLayout_module_css_default = {
+	"paneMaxWidthDiffBreakpoint": "1280",
+	"paneMaxWidthDiffDefault": "511",
+	"sidebarMaxWidthDiffDefault": "256",
+	"paneMaxWidthDiffWide": "959",
+	"PageLayoutRoot": "prc-PageLayout-PageLayoutRoot--KH-d",
+	"PageLayoutWrapper": "prc-PageLayout-PageLayoutWrapper-2BhU2",
+	"PageLayoutContent": "prc-PageLayout-PageLayoutContent-BneH9",
+	"HorizontalDivider": "prc-PageLayout-HorizontalDivider-JLVqp",
+	"VerticalDivider": "prc-PageLayout-VerticalDivider-9QRmK",
+	"Header": "prc-PageLayout-Header-0of-R",
+	"HeaderContent": "prc-PageLayout-HeaderContent-gdFfN",
+	"HeaderHorizontalDivider": "prc-PageLayout-HeaderHorizontalDivider-odAHl",
+	"ContentWrapper": "prc-PageLayout-ContentWrapper-gR9eG",
+	"Content": "prc-PageLayout-Content-xWL-A",
+	"PaneWrapper": "prc-PageLayout-PaneWrapper-pHPop",
+	"PaneVerticalDivider": "prc-PageLayout-PaneVerticalDivider-le57g",
+	"Pane": "prc-PageLayout-Pane-AyzHK",
+	"PaneHorizontalDivider": "prc-PageLayout-PaneHorizontalDivider-9tbnE",
+	"FooterWrapper": "prc-PageLayout-FooterWrapper-9cB8y",
+	"FooterHorizontalDivider": "prc-PageLayout-FooterHorizontalDivider-W-RaS",
+	"FooterContent": "prc-PageLayout-FooterContent-HUS0V",
+	"DraggableHandle": "prc-PageLayout-DraggableHandle-9s6B4",
+	"SidebarWrapper": "prc-PageLayout-SidebarWrapper-kLG4B",
+	"Sidebar": "prc-PageLayout-Sidebar-iciWg",
+	"SidebarVerticalDivider": "prc-PageLayout-SidebarVerticalDivider-0Rl0V"
+};
+//#endregion
+export { PageLayout_module_css_default as default };

package/dist/PageLayout/index.d.ts

@@ -1,3 +1,2 @@
-export * from './PageLayout';
-export { defaultPaneWidth } from './usePaneWidth';
-//# sourceMappingURL=index.d.ts.map
+import { PageLayout, PageLayoutContentProps, PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneBaseProps, PageLayoutPaneProps, PageLayoutProps, PageLayoutSidebarBaseProps, PageLayoutSidebarProps } from "./PageLayout.js";
+export { PageLayout, PageLayoutContentProps, PageLayoutFooterProps, PageLayoutHeaderProps, PageLayoutPaneBaseProps, PageLayoutPaneProps, PageLayoutProps, PageLayoutSidebarBaseProps, PageLayoutSidebarProps };

package/dist/PageLayout/paneUtils.js

@@ -1,34 +1,20 @@
-const DATA_DRAGGING_ATTR = 'data-dragging';
-
+//#region src/PageLayout/paneUtils.ts
+const DATA_DRAGGING_ATTR = "data-dragging";
 /** Apply visual feedback and performance optimizations during drag */
-function setDraggingStyles({
-  handle,
-  pane,
-  contentWrapper
-}) {
-  // Handle visual feedback (must be inline for instant response)
-  // Use CSS variable to control ::before pseudo-element background color.
-  // This avoids cascade conflicts between inline styles and pseudo-element backgrounds.
-  handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--bg-color', 'var(--bgColor-accent-emphasis)');
-  handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--drag-opacity', '1');
-  handle === null || handle === void 0 ? void 0 : handle.style.setProperty('--draggable-handle--transition', 'none');
-
-  // Set attribute for CSS containment (O(1) direct selector, not descendant)
-  pane === null || pane === void 0 ? void 0 : pane.setAttribute(DATA_DRAGGING_ATTR, 'true');
-  contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.setAttribute(DATA_DRAGGING_ATTR, 'true');
+function setDraggingStyles({ handle, pane, contentWrapper }) {
+	handle === null || handle === void 0 || handle.style.setProperty("--draggable-handle--bg-color", "var(--bgColor-accent-emphasis)");
+	handle === null || handle === void 0 || handle.style.setProperty("--draggable-handle--drag-opacity", "1");
+	handle === null || handle === void 0 || handle.style.setProperty("--draggable-handle--transition", "none");
+	pane === null || pane === void 0 || pane.setAttribute(DATA_DRAGGING_ATTR, "true");
+	contentWrapper === null || contentWrapper === void 0 || contentWrapper.setAttribute(DATA_DRAGGING_ATTR, "true");
 }
-
 /** Remove drag styles and restore normal state */
-function removeDraggingStyles({
-  handle,
-  pane,
-  contentWrapper
-}) {
-  handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--bg-color');
-  handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--drag-opacity');
-  handle === null || handle === void 0 ? void 0 : handle.style.removeProperty('--draggable-handle--transition');
-  pane === null || pane === void 0 ? void 0 : pane.removeAttribute(DATA_DRAGGING_ATTR);
-  contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.removeAttribute(DATA_DRAGGING_ATTR);
+function removeDraggingStyles({ handle, pane, contentWrapper }) {
+	handle === null || handle === void 0 || handle.style.removeProperty("--draggable-handle--bg-color");
+	handle === null || handle === void 0 || handle.style.removeProperty("--draggable-handle--drag-opacity");
+	handle === null || handle === void 0 || handle.style.removeProperty("--draggable-handle--transition");
+	pane === null || pane === void 0 || pane.removeAttribute(DATA_DRAGGING_ATTR);
+	contentWrapper === null || contentWrapper === void 0 || contentWrapper.removeAttribute(DATA_DRAGGING_ATTR);
 }
-
+//#endregion
 export { removeDraggingStyles, setDraggingStyles };

package/dist/PageLayout/usePaneWidth.d.ts

@@ -1,99 +1,18 @@
-import React from 'react';
+import React from "react";
+
+//#region src/PageLayout/usePaneWidth.d.ts
 type Measurement = `${number}px`;
-export type CustomWidthOptions = {
-    min: Measurement;
-    default: Measurement;
-    max: Measurement;
+type CustomWidthOptions = {
+  min: Measurement;
+  default: Measurement;
+  max: Measurement;
 };
-export type PaneWidth = 'small' | 'medium' | 'large';
+type PaneWidth = 'small' | 'medium' | 'large';
 /**
  * Width value for the pane - defines constraints and defaults only.
  * - `PaneWidth`: Preset size ('small' | 'medium' | 'large')
  * - `CustomWidthOptions`: Explicit min/default/max constraints
  */
-export type PaneWidthValue = PaneWidth | CustomWidthOptions;
-export type UsePaneWidthOptions = {
-    width: PaneWidthValue;
-    minWidth: number;
-    resizable: boolean;
-    /** localStorage key for persisting width. When undefined, localStorage is not used. */
-    widthStorageKey?: string;
-    paneRef: React.RefObject<HTMLDivElement | null>;
-    handleRef: React.RefObject<HTMLDivElement | null>;
-    contentWrapperRef: React.RefObject<HTMLDivElement | null>;
-    /**
-     * When true, custom max width values are capped to the viewport-based max.
-     * This prevents overflow in non-wrapping flex layouts (e.g., Sidebar).
-     * @default false
-     */
-    constrainToViewport?: boolean;
-    /** Callback fired when a resize operation ends (drag release or keyboard key up) */
-    onResizeEnd?: (width: number) => void;
-    /** Current/controlled width value in pixels (used instead of internal state; default from `width` is still used for reset) */
-    currentWidth?: number;
-};
-export type UsePaneWidthResult = {
-    /** Current width for React state (used in ARIA attributes) */
-    currentWidth: number;
-    /** Mutable ref tracking width during drag operations */
-    currentWidthRef: React.MutableRefObject<number>;
-    /** Minimum allowed pane width */
-    minPaneWidth: number;
-    /** Maximum allowed pane width (updates on viewport resize) */
-    maxPaneWidth: number;
-    /** Calculate current max width constraint */
-    getMaxPaneWidth: () => number;
-    /** Persist width to localStorage and sync React state */
-    saveWidth: (value: number) => void;
-    /** Reset to default width */
-    getDefaultWidth: () => number;
-};
-/**
- * Default value for --pane-max-width-diff CSS variable.
- * Imported from CSS to ensure JS fallback matches the CSS default.
- */
-export declare const DEFAULT_MAX_WIDTH_DIFF: number;
-/**
- * Default value for --sidebar-max-width-diff CSS variable.
- * Unlike --pane-max-width-diff, this is constant across all viewport sizes.
- */
-export declare const DEFAULT_SIDEBAR_MAX_WIDTH_DIFF: number;
-/**
- * Default max pane width for SSR when viewport is unknown.
- * Updated to actual value in layout effect before paint.
- */
-export declare const SSR_DEFAULT_MAX_WIDTH = 600;
-/**
- * Pixel increment for keyboard arrow key resizing.
- * @see https://github.com/github/accessibility/issues/5101#issuecomment-1822870655
- */
-export declare const ARROW_KEY_STEP = 3;
-/** Default widths for preset size options */
-export declare const defaultPaneWidth: Record<PaneWidth, number>;
-export declare const isCustomWidthOptions: (width: PaneWidthValue) => width is CustomWidthOptions;
-export declare const isPaneWidth: (width: PaneWidthValue) => width is PaneWidth;
-export declare const getDefaultPaneWidth: (w: PaneWidthValue) => number;
-/**
- * Derives the --pane-max-width-diff value from viewport width alone.
- * Avoids the expensive getComputedStyle call that forces a synchronous layout recalc.
- * The CSS only defines two breakpoint-dependent values, so a simple width check is equivalent.
- */
-export declare function getMaxWidthDiffFromViewport(): number;
-export declare const updateAriaValues: (handle: HTMLElement | null, values: {
-    current?: number;
-    min?: number;
-    max?: number;
-}) => void;
-/**
- * Manages pane width state with storage persistence and viewport constraints.
- * Handles initialization from storage, clamping on viewport resize, and provides
- * functions to save and reset width.
- *
- * Storage behavior:
- * - When `resizable` is `true` and `onResizeEnd` is not provided: Uses localStorage
- * - When `onResizeEnd` is provided: Calls the callback instead of localStorage
- * - When `resizable` is `false` or `undefined`: Not resizable, no persistence
- */
-export declare function usePaneWidth({ width, minWidth, resizable, widthStorageKey, paneRef, handleRef, contentWrapperRef, constrainToViewport, onResizeEnd, currentWidth: controlledWidth, }: UsePaneWidthOptions): UsePaneWidthResult;
-export {};
-//# sourceMappingURL=usePaneWidth.d.ts.map
+type PaneWidthValue = PaneWidth | CustomWidthOptions;
+//#endregion
+export { CustomWidthOptions, PaneWidth, PaneWidthValue };