react-resizable-panels 4.12.4 → 4.13.0

package/dist/react-resizable-panels.d.ts

@@ -23,7 +23,7 @@ declare type BaseSeparatorAttributes = Omit<HTMLAttributes<HTMLDivElement>, "rol
  *
  * ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
  */
-export declare function Group({ children, className, defaultLayout, disableCursor, disabled, elementRef: elementRefProp, groupRef, id: idProp, onLayoutChange: onLayoutChangeUnstable, onLayoutChanged: onLayoutChangedUnstable, orientation, resizeTargetMinimumSize, style, ...rest }: GroupProps): JSX.Element;
+export declare function Group({ children, className, defaultLayout, disableCursor, disabled, elementRef: elementRefProp, groupRef, id: idProp, onLayoutChange: onLayoutChangeUnstable, onLayoutChanged: onLayoutChangedUnstable, orientation, resizePreviewMode, resizeTargetMinimumSize, style, ...rest }: GroupProps): JSX.Element;
 
 export declare namespace Group {
     var displayName: string;
@@ -119,6 +119,15 @@ export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
      * and false for other triggers (e.g. imperative API calls, initial mount, etc.)
      */
     onLayoutChanged?: (layout: Layout, meta: LayoutChangedMeta) => void;
+    /**
+     * Controls whether pointer dragging updates `Panel`s sizes immediately,
+     * or renders overlay separator previews until the pointer is released.
+     *
+     * Defaults to `"panel"` (immediate resizing); `"separator"` defers resizing until release.
+     *
+     * Customize previews using the `SeparatorOverlay` component.
+     */
+    resizePreviewMode?: ResizePreviewMode | undefined;
     /**
      * Minimum size of the resizable hit target area (either `Separator` or `Panel` edge)
      * This threshold ensures are large enough to avoid mis-clicks.
@@ -141,7 +150,7 @@ export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * CSS properties.
      *
-     * ⚠️ The following styles cannot be overridden: `display`, `flex-direction`, `flex-wrap`, and `overflow`.
+     * ⚠️ The default inline styles cannot be overridden, except for [`overflow`](https://react-resizable-panels.vercel.app/examples/overflow).
      */
     style?: CSSProperties | undefined;
 };
@@ -211,7 +220,7 @@ export declare type Orientation = "horizontal" | "vertical";
  *
  * ⚠️ Panel elements must be direct DOM children of their parent Group elements.
  */
-export declare function Panel({ children, className, collapsedSize, collapsible, defaultSize, disabled, elementRef: elementRefProp, groupResizeBehavior, id: idProp, maxSize, minSize, onResize: onResizeUnstable, panelRef, style, ...rest }: PanelProps): JSX.Element;
+export declare function Panel({ children, className, collapsedSize, collapsedThreshold, collapsible, defaultSize, disabled, elementRef: elementRefProp, groupResizeBehavior, id: idProp, maxSize, minSize, onResize: onResizeUnstable, panelRef, style, ...rest }: PanelProps): JSX.Element;
 
 export declare namespace Panel {
     var displayName: string;
@@ -280,6 +289,20 @@ export declare type PanelProps = BasePanelAttributes & {
      * Panel size when collapsed; defaults to 0%.
      */
     collapsedSize?: number | string | undefined;
+    /**
+     * Distance a collapsible panel must be resized past its `minSize` to collapse,
+     * or past its `collapsedSize` to expand.
+     * Defaults to half the distance between `collapsedSize` and `minSize`.
+     *
+     * For example if a panel declares `collapsedSize="5%"`, `collapsedThreshold="5%"`, and `minSize="25%"`,
+     * it will collapse when resized below 20% and expands when resized above 10%.
+     *
+     * ℹ️ Interpretation rules:
+     * - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels)
+     * - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent)
+     * - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
+     */
+    collapsedThreshold?: number | string | undefined;
     /**
      * This panel can be collapsed.
      *
@@ -367,7 +390,7 @@ export declare type PanelProps = BasePanelAttributes & {
     /**
      * CSS properties.
      *
-     * ⚠️ Style is applied to nested `HTMLDivElement` to avoid styles that interfere with Flex layout.
+     * ⚠️ The default inline styles cannot be overridden, except for [`overflow`](https://react-resizable-panels.vercel.app/examples/overflow).
      */
     style?: CSSProperties | undefined;
 };
@@ -377,6 +400,8 @@ export declare type PanelSize = {
     inPixels: number;
 };
 
+declare type ResizePreviewMode = "panel" | "separator";
+
 /**
  * Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
  *
@@ -392,12 +417,29 @@ export declare type PanelSize = {
  *
  * ℹ️ In addition to the attributes shown above, separator also renders all required [WAI-ARIA properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role#associated_wai-aria_roles_states_and_properties).
  */
-export declare function Separator({ children, className, disabled, disableDoubleClick, elementRef: elementRefProp, id: idProp, style, ...rest }: SeparatorProps): JSX.Element;
+export declare function Separator({ children, className, disabled, disableDoubleClick, elementRef: elementRefProp, id: idProp, preview, style, ...rest }: SeparatorProps): JSX.Element;
 
 export declare namespace Separator {
     var displayName: string;
 }
 
+/**
+ * Customizes separator previews when resizePreviewMode is "separator".
+ * Render within a `Group` to style all overlay previews, or pass to an individual `Separator` to style its overlay preview.
+ *
+ * Use `data-separator-overlay="active"` to style the separator being dragged,
+ * or `data-separator-overlay="inactive"` for separators moved indirectly.
+ *
+ * Set `width` (horizontal groups) or `height` (vertical groups) using `style` or `className`.
+ */
+export declare function SeparatorOverlay(props: SeparatorOverlayProps): null;
+
+export declare namespace SeparatorOverlay {
+    var displayName: string;
+}
+
+export declare type SeparatorOverlayProps = HTMLAttributes<HTMLDivElement>;
+
 export declare type SeparatorProps = BaseSeparatorAttributes & {
     /**
      * CSS class name.
@@ -429,6 +471,10 @@ export declare type SeparatorProps = BaseSeparatorAttributes & {
      * ℹ️ This value will also be assigned to the `data-separator` attribute.
      */
     id?: string | number | undefined;
+    /**
+     * Overrides the `Group` default preview for this `Separator` when `resizePreviewMode` is "separator".
+     */
+    preview?: ReactNode;
     /**
      * CSS properties.
      *