react-resizable-panels 4.0.0-alpha.3 → 4.0.0-alpha.4

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

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { Dispatch } from 'react';
+import { HTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { RefObject } from 'react';
@@ -14,12 +14,12 @@ import { SetStateAction } from 'react';
  * Group elements always include the following data attributes:
  *
  * ```html
- * <div data-group data-testid="your-group-id">
+ * <div data-group data-testid="group-id-prop" id="group-id-prop">
  * ```
  *
  * ℹ️ [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;
+export declare function Group({ children, className, defaultLayout, disableCursor, disabled, elementRef, groupRef, id: idProp, onLayoutChange: onLayoutChangeUnstable, orientation, style, ...rest }: GroupProps): JSX.Element;
 
 /**
  * Imperative Group API.
@@ -46,7 +46,7 @@ declare interface GroupImperativeHandle {
     }) => Layout;
 }
 
-export declare type GroupProps = {
+export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Panel and Separator components that comprise this group.
      */
@@ -138,12 +138,12 @@ export declare type Orientation = "horizontal" | "vertical";
  * Panel elements always include the following data attributes:
  *
  * ```html
- * <div data-panel data-testid="your-panel-id">
+ * <div data-panel data-testid="panel-id-prop" id="panel-id-prop">
  * ```
  *
  * ℹ️ [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;
+export declare function Panel({ children, className, collapsedSize, collapsible, defaultSize, elementRef, id: idProp, maxSize, minSize, onResize: onResizeUnstable, panelRef, style, ...rest }: PanelProps): JSX.Element;
 
 /**
  * Imperative Panel API
@@ -184,7 +184,7 @@ declare interface PanelImperativeHandle {
     resize: (size: number | string) => void;
 }
 
-export declare type PanelProps = PropsWithChildren<{
+export declare type PanelProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * CSS class name.
      *
@@ -248,7 +248,7 @@ export declare type PanelProps = PropsWithChildren<{
      * ⚠️ Style is applied to nested `HTMLDivElement` to avoid styles that interfere with Flex layout.
      */
     style?: CSSProperties | undefined;
-}>;
+};
 
 export declare type PanelSize = {
     asPercentage: number;
@@ -263,14 +263,16 @@ export declare type PanelSize = {
  * Separator elements always include the following data attributes and role:
  *
  * ```html
- * <div data-separator data-testid="your-separator-id" role="separator" />
+ * <div data-separator data-testid="separator-id-prop" id="separator-id-prop" role="separator">
  * ```
  *
  * ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
+ *
+ * ℹ️ 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, elementRef, id: idProp, style }: SeparatorProps): JSX.Element;
+export declare function Separator({ children, className, elementRef, id: idProp, style, ...rest }: SeparatorProps): JSX.Element;
 
-export declare type SeparatorProps = PropsWithChildren<{
+export declare type SeparatorProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * CSS class name.
      *
@@ -298,7 +300,7 @@ export declare type SeparatorProps = PropsWithChildren<{
      * ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
      */
     style?: CSSProperties | undefined;
-}>;
+};
 
 export declare type SizeUnit = "px" | "%" | "em" | "rem" | "vh" | "vw";