react-resizable-panels 4.0.0-alpha.1 → 4.0.0-alpha.2

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

@@ -11,11 +11,13 @@ import { SetStateAction } from 'react';
  * A Group wraps a set of resizable Panel components.
  * Group content can be resized _horizontally_ or _vertically_.
  *
- * For unit testing purposes, Group elements always include the following data attributes:
+ * Group elements always include the following data attributes:
  *
  * ```html
- * <div data-group="your-group-id">
+ * <div data-group data-testid="your-group-id">
  * ```
+ *
+ * ℹ️ [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, groupRef, id: idProp, onLayoutChange: onLayoutChangeUnstable, orientation, style }: GroupProps): JSX.Element;
 
@@ -133,11 +135,13 @@ export declare type Orientation = "horizontal" | "vertical";
  * - Font sizes (em, rem)
  * - Viewport sizes (vh, vw)
  *
- * For unit testing purposes, Panel elements always include the following data attributes:
+ * Panel elements always include the following data attributes:
  *
  * ```html
- * <div data-panel="your-panel-id">
+ * <div data-panel data-testid="your-panel-id">
  * ```
+ *
+ * ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
  */
 export declare function Panel({ children, className, collapsedSize, collapsible, defaultSize, elementRef, id: idProp, maxSize, minSize, onResize: onResizeUnstable, panelRef, style }: PanelProps): JSX.Element;
 
@@ -256,11 +260,13 @@ export declare type PanelSize = {
  *
  * Separators should be rendered as the direct child of a Group component.
  *
- * For unit testing purposes, Separator elements always include the following data attributes:
+ * Separator elements always include the following data attributes and role:
  *
  * ```html
- * <div data-separator="your-separator-id" role="separator" />
+ * <div data-separator data-testid="your-separator-id" role="separator" />
  * ```
+ *
+ * ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
  */
 export declare function Separator({ children, className, elementRef, id: idProp, style }: SeparatorProps): JSX.Element;
 
@@ -268,7 +274,7 @@ export declare type SeparatorProps = PropsWithChildren<{
     /**
      * CSS class name.
      *
-     * ℹ️ Use the `data-separator-state` attribute for custom _hover_ and _active_ styles
+     * ℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles
      *
      * ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
      */
@@ -287,7 +293,7 @@ export declare type SeparatorProps = PropsWithChildren<{
     /**
      * CSS properties.
      *
-     * ℹ️ Use the `data-separator-state` attribute for custom _hover_ and _active_ styles
+     * ℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles
      *
      * ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
      */