UEA-PRODEM

This commit is contained in:
2026-06-10 12:14:46 -03:00
parent f54126b9d8
commit 9947565694
5319 changed files with 148520 additions and 129332 deletions
+60 -4
View File
@@ -1,4 +1,4 @@
<img src="https://react-resizable-panels.vercel.app/og.svg" alt="react-resizable-panels logo" width="400" height="210" />
<img src="https://react-resizable-panels.vercel.app/og.png" alt="react-resizable-panels logo" width="400" height="210" />
`react-resizable-panels`: React components for resizable panel groups/layouts.
@@ -89,7 +89,8 @@ Falls back to <code>useId</code> when not provided.</p>
<td>defaultLayout</td>
<td><p>Default layout for the Group.</p>
<p>️ This value allows layouts to be remembered between page reloads.</p>
<p>⚠️ Refer to the documentation for how to avoid layout shift when using server components.</p>
<p>⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes.
Refer to the documentation for suggestions on how to minimize the impact of this.</p>
</td>
</tr>
<tr>
@@ -120,7 +121,29 @@ Use this prop to disable that behavior for Panels and Separators in this group.<
</tr>
<tr>
<td>onLayoutChange</td>
<td><p>Called when panel sizes change; receives a map of Panel id to size.</p>
<td><p>Called when the Group&#39;s layout is changing.</p>
<p>⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved.
For most cases, it is recommended to use the <code>onLayoutChanged</code> callback instead.</p>
</td>
</tr>
<tr>
<td>onLayoutChanged</td>
<td><p>Called after the Group&#39;s layout has been changed.</p>
<p>️ For layout changes caused by pointer events, this method is not called until the pointer has been released.
This method is recommended when saving layouts to some storage api.</p>
</td>
</tr>
<tr>
<td>resizeTargetMinimumSize</td>
<td><p>Minimum size of the resizable hit target area (either <code>Separator</code> or <code>Panel</code> edge)
This threshold ensures are large enough to avoid mis-clicks.</p>
<ul>
<li>Coarse inputs (typically a finger on a touchscreen) have reduced accuracy;
to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks.</li>
<li>Fine inputs (typically a mouse) can be smaller</li>
</ul>
<p>️ <a href="https://developer.apple.com/design/human-interface-guidelines/accessibility">Apple interface guidelines</a> suggest <code>20pt</code> (<code>27px</code>) on desktops and <code>28pt</code> (<code>37px</code>) for touch devices
In practice this seems to be much larger than many of their own applications use though.</p>
</td>
</tr>
<tr>
@@ -157,6 +180,8 @@ Panel elements always include the following attributes:
```
️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
⚠️ Panel elements must be direct DOM children of their parent Group elements.
<!-- Panel:description:end -->
#### Required props
@@ -211,11 +236,30 @@ Falls back to <code>useId</code> when not provided.</p>
<tr>
<td>defaultSize</td>
<td><p>Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.</p>
<p>⚠️ Percentage based sizes may cause slight layout shift when server-rendering.
For more information see the documentation.</p>
</td>
</tr>
<tr>
<td>disabled</td>
<td><p>When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).</p>
</td>
</tr>
<tr>
<td>elementRef</td>
<td><p>Ref attached to the root <code>HTMLDivElement</code>.</p>
</td>
</tr>
<tr>
<td>groupResizeBehavior</td>
<td><p>How should this Panel behave if the parent Group is resized?
Defaults to <code>preserve-relative-size</code>.</p>
<ul>
<li><code>preserve-relative-size</code>: Retain the current relative size (as a percentage of the Group)</li>
<li><code>preserve-pixel-size</code>: Retain its current size (in pixels)</li>
</ul>
<p>️ Panel min/max size constraints may impact this behavior.</p>
<p>⚠️ A Group must contain at least one Panel with <code>preserve-relative-size</code> resize behavior.</p>
</td>
</tr>
<tr>
@@ -259,7 +303,7 @@ Falls back to <code>useId</code> when not provided.</p>
<!-- Separator:description:begin -->
Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
Separators should be rendered as the direct child of a Group component.
⚠️ Separator elements must be direct DOM children of their parent Group elements.
Separator elements always include the following attributes:
@@ -309,6 +353,18 @@ Falls back to <code>useId</code> when not provided.</p>
<td><p>CSS properties.</p>
<p>️ Use the <code>data-separator</code> attribute for custom <em>hover</em> and <em>active</em> styles</p>
<p>⚠️ The following properties cannot be overridden: <code>flex-grow</code>, <code>flex-shrink</code></p>
</td>
</tr>
<tr>
<td>disabled</td>
<td><p>When disabled, the separator cannot be used to resize its neighboring panels.</p>
<p>️ The panels may still be resized indirectly (while other panels are being resized).
To prevent a panel from being resized at all, it needs to also be disabled.</p>
</td>
</tr>
<tr>
<td>disableDoubleClick</td>
<td><p>When true, double-clicking this <code>Separator</code> will not reset its <code>Panel</code> to its default size.</p>
</td>
</tr>
<tr>
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+87 -10
View File
@@ -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, orientation, style, ...rest }: GroupProps): JSX.Element;
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 namespace Group {
var displayName: string;
@@ -68,7 +68,8 @@ export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
*
* ️ This value allows layouts to be remembered between page reloads.
*
* ⚠️ Refer to the documentation for how to avoid layout shift when using server components.
* ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes.
* Refer to the documentation for suggestions on how to minimize the impact of this.
*/
defaultLayout?: Layout | undefined;
/**
@@ -83,7 +84,7 @@ export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
/**
* Ref attached to the root `HTMLDivElement`.
*/
elementRef?: Ref<HTMLDivElement> | undefined;
elementRef?: Ref<HTMLDivElement | null> | undefined;
/**
* Exposes the following imperative API:
* - `getLayout(): Layout`
@@ -91,7 +92,7 @@ export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
*
* ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
groupRef?: Ref<GroupImperativeHandle> | undefined;
groupRef?: Ref<GroupImperativeHandle | null> | undefined;
/**
* Uniquely identifies this group within an application.
* Falls back to `useId` when not provided.
@@ -100,9 +101,34 @@ export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
*/
id?: string | number | undefined;
/**
* Called when panel sizes change; receives a map of Panel id to size.
* Called when the Group's layout is changing.
*
* ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved.
* For most cases, it is recommended to use the `onLayoutChanged` callback instead.
*/
onLayoutChange?: (layout: Layout) => void | undefined;
/**
* Called after the Group's layout has been changed.
*
* ️ For layout changes caused by pointer events, this method is not called until the pointer has been released.
* This method is recommended when saving layouts to some storage api.
*/
onLayoutChanged?: (layout: Layout) => void | undefined;
/**
* Minimum size of the resizable hit target area (either `Separator` or `Panel` edge)
* This threshold ensures are large enough to avoid mis-clicks.
*
* - Coarse inputs (typically a finger on a touchscreen) have reduced accuracy;
* to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks.
* - Fine inputs (typically a mouse) can be smaller
*
* ️ [Apple interface guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility) suggest `20pt` (`27px`) on desktops and `28pt` (`37px`) for touch devices
* In practice this seems to be much larger than many of their own applications use though.
*/
resizeTargetMinimumSize?: {
coarse: number;
fine: number;
};
/**
* Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"
*/
@@ -115,6 +141,11 @@ export declare type GroupProps = HTMLAttributes<HTMLDivElement> & {
style?: CSSProperties | undefined;
};
/**
* Caches and returns matchMedia()'s computed value for "pointer:coarse"
*/
export declare function isCoarsePointer(): boolean;
/**
* Map of Panel id to flexGrow value;
*/
@@ -156,8 +187,10 @@ export declare type Orientation = "horizontal" | "vertical";
* ```
*
* ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
*
* ⚠️ Panel elements must be direct DOM children of their parent Group elements.
*/
export declare function Panel({ children, className, collapsedSize, collapsible, defaultSize, elementRef: elementRefProp, id: idProp, maxSize, minSize, onResize: onResizeUnstable, panelRef, style, ...rest }: PanelProps): JSX.Element;
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 namespace Panel {
var displayName: string;
@@ -234,12 +267,31 @@ export declare type PanelProps = BasePanelAttributes & {
collapsible?: boolean | undefined;
/**
* Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.
*
* ⚠️ Percentage based sizes may cause slight layout shift when server-rendering.
* For more information see the documentation.
*/
defaultSize?: number | string | undefined;
/**
* When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).
*/
disabled?: boolean | undefined;
/**
* Ref attached to the root `HTMLDivElement`.
*/
elementRef?: Ref<HTMLDivElement> | undefined;
elementRef?: Ref<HTMLDivElement | null> | undefined;
/**
* How should this Panel behave if the parent Group is resized?
* Defaults to `preserve-relative-size`.
*
* - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group)
* - `preserve-pixel-size`: Retain its current size (in pixels)
*
* ️ Panel min/max size constraints may impact this behavior.
*
* ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.
*/
groupResizeBehavior?: "preserve-relative-size" | "preserve-pixel-size" | undefined;
/**
* Uniquely identifies this panel within the parent group.
* Falls back to `useId` when not provided.
@@ -275,7 +327,7 @@ export declare type PanelProps = BasePanelAttributes & {
*
* ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
panelRef?: Ref<PanelImperativeHandle> | undefined;
panelRef?: Ref<PanelImperativeHandle | null> | undefined;
/**
* CSS properties.
*
@@ -292,7 +344,7 @@ export declare type PanelSize = {
/**
* Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
*
* Separators should be rendered as the direct child of a Group component.
* ⚠️ Separator elements must be direct DOM children of their parent Group elements.
*
* Separator elements always include the following attributes:
*
@@ -304,7 +356,7 @@ 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, elementRef: elementRefProp, id: idProp, style, ...rest }: SeparatorProps): JSX.Element;
export declare function Separator({ children, className, disabled, disableDoubleClick, elementRef: elementRefProp, id: idProp, style, ...rest }: SeparatorProps): JSX.Element;
export declare namespace Separator {
var displayName: string;
@@ -319,6 +371,17 @@ export declare type SeparatorProps = BaseSeparatorAttributes & {
* ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
*/
className?: string | undefined;
/**
* When disabled, the separator cannot be used to resize its neighboring panels.
*
* ️ The panels may still be resized indirectly (while other panels are being resized).
* To prevent a panel from being resized at all, it needs to also be disabled.
*/
disabled?: boolean | undefined;
/**
* When true, double-clicking this `Separator` will not reset its `Panel` to its default size.
*/
disableDoubleClick?: boolean;
/**
* Ref attached to the root `HTMLDivElement`.
*/
@@ -349,6 +412,8 @@ export declare type SizeUnit = "px" | "%" | "em" | "rem" | "vh" | "vw";
export declare function useDefaultLayout({ debounceSaveMs, panelIds, storage, ...rest }: {
/**
* Debounce save operation by the specified number of milliseconds; defaults to 100ms
*
* @deprecated Use the {@link onLayoutChanged} callback instead; it does not require debouncing
*/
debounceSaveMs?: number;
/**
@@ -377,8 +442,20 @@ export declare function useDefaultLayout({ debounceSaveMs, panelIds, storage, ..
*/
id: string;
})): {
/**
* Pass this value to `Group` as the `defaultLayout` prop.
*/
defaultLayout: Layout | undefined;
/**
* Attach this callback on the `Group` as the `onLayoutChange` prop.
*
* @deprecated Use the {@link onLayoutChanged} prop instead.
*/
onLayoutChange: (layout: Layout) => void | undefined;
/**
* Attach this callback on the `Group` as the `onLayoutChanged` prop.
*/
onLayoutChanged: (layout: Layout) => void | undefined;
};
/**
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+18 -11
View File
@@ -1,6 +1,6 @@
{
"name": "react-resizable-panels",
"version": "4.2.2",
"version": "4.11.2",
"type": "module",
"author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
"contributors": [
@@ -20,21 +20,24 @@
],
"scripts": {
"dev": "vite",
"dev:integrations": "pnpm run dev:integrations:next & pnpm run dev:integrations:vike & pnpm run dev:integrations:vite",
"dev:integrations": "pnpm run /^dev:integrations:.*/",
"dev:integrations:next": "pnpm -C integrations/next/ run dev",
"dev:integrations:vike": "pnpm -C integrations/vike/ run dev",
"dev:integrations:vite": "pnpm -C integrations/vite/ run dev",
"build": "pnpm run build:lib && pnpm run build:docs",
"build:docs": "TARGET=docs vite build",
"build:lib": "TARGET=lib vite build",
"compile": "pnpm run compile:docs && pnpm run compile:examples",
"build": "pnpm run /^build:.*/",
"build:docs": "cross-env TARGET=docs vite build",
"build:lib": "cross-env TARGET=lib vite build",
"compile": "pnpm run --sequential /^compile:.*/",
"compile:docs": "tsx ./scripts/compile-docs",
"compile:examples": "tsx ./scripts/compile-examples",
"compile:search-index": "tsx ./scripts/compile-search-index",
"compress:og-image": "tsx ./scripts/compress-og-image",
"e2e:install": "pnpm -C integrations/vite/ exec playwright install --with-deps",
"e2e:test": "pnpm -C integrations/vite/ run test",
"e2e:install": "pnpm -C integrations/tests exec playwright install --with-deps",
"e2e:test": "pnpm -C integrations/tests run test",
"e2e:test:main": "pnpm -C integrations/tests run test --project=chromium",
"e2e:test:popup": "pnpm -C integrations/tests run test --project=chromium:popup",
"lint": "eslint .",
"prerelease": "rm -rf dist && pnpm run build:lib",
"prerelease": "rimraf dist && pnpm run build:lib",
"prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
"prettier:ci": "prettier --check \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
"preview": "vite preview",
@@ -68,15 +71,17 @@
"@types/node": "^24.2.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.2.3",
"@types/sharp": "^0.32.0",
"@vitejs/plugin-react-swc": "^3.10.2",
"bytes": "^3.1.2",
"clsx": "^2.1.1",
"compression": "^1.8.1",
"concurrently": "^9.2.1",
"cross-env": "^10.1.0",
"csstype": "^3.1.3",
"eslint": "^9.30.1",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"eslint-plugin-sonarjs": "^3.0.6",
"express": "^5.1.0",
"globals": "^16.3.0",
"husky": "^9.1.7",
@@ -87,12 +92,14 @@
"postcss": "^8.5.6",
"prettier": "3.6.2",
"prettier-plugin-tailwindcss": "^0.7.1",
"puppeteer": "^24.38.0",
"react": "^19.2.3",
"react-docgen-typescript": "^2.4.0",
"react-dom": "^19.2.3",
"react-error-boundary": "^6.0.0",
"react-lib-tools": "^0.0.31",
"react-lib-tools": "0.0.53",
"react-router-dom": "^7.6.3",
"rimraf": "^6.1.2",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^6.0.3",
"rollup-preserve-directives": "^1.1.3",