UEA-PRODEM
This commit is contained in:
+60
-4
@@ -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'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'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>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+87
-10
@@ -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;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
+1646
-1259
File diff suppressed because it is too large
Load Diff
+1
-1
File diff suppressed because one or more lines are too long
+18
-11
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user