gem-hunter

CSS class name.

Uniquely identifies this group within an application. Falls back to useId when not provided.

ℹ️ This value will also be assigned to the id and data-testid attributes; (an explicit data-testid prop will take precedence).

CSS properties.

⚠️ The default inline styles cannot be overridden, except for overflow.

Panel and Separator components that comprise this group.

Default layout for the Group.

ℹ️ This value allows layouts to be remembered between page reloads.

⚠️ 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.

This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group.

Disable resize functionality.

Ref attached to the root HTMLDivElement.

Exposes the following imperative API:

• getLayout(): Layout
• setLayout(layout: Layout): Layout

ℹ️ The useGroupRef and useGroupCallbackRef hooks are exported for convenience use in TypeScript projects.

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.

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.

ℹ️ The second argument contains meta information about the layout change. The isUserInteraction attribute signals whether the resize was caused by direct user input. It is true for resizes caused by pointer or keyboard input and false for other triggers (e.g. imperative API calls, initial mount, etc.) The requestedLayout attribute is the layout before constraints were applied for the current Group size; prefer it when persisting layouts.

Controls whether pointer dragging updates Panel 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.

Minimum size of the resizable hit target area (either Separator or Panel edge). This threshold ensures targets 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 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.

Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"

CSS class name.

⚠️ Class is applied to nested HTMLDivElement to avoid styles that interfere with Flex layout.

Uniquely identifies this panel within the parent group. Falls back to useId when not provided.

ℹ️ This prop is used to associate persisted group layouts with the original panel.

ℹ️ This value will also be assigned to the id and data-testid attributes; (an explicit data-testid prop will take precedence).

CSS properties.

⚠️ The default inline styles cannot be overridden, except for overflow.

Panel size when collapsed; defaults to 0%.

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 expand 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

This panel can be collapsed.

ℹ️ A collapsible panel will collapse when its size is less than the specified minSize

Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.

ℹ️ Interpretation rules:

• Numbers are interpreted as pixels (e.g. defaultSize={200} is 200 pixels)
• Strings without explicit units are interpreted as percentage (e.g. defaultSize="50" is 50 percent)
• Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation

⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation.

When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).

Ref attached to the root HTMLDivElement.

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.

Maximum size of Panel within its parent group; defaults to "100%".

ℹ️ Interpretation rules:

• Numbers are interpreted as pixels (e.g. maxSize={200} is 200 pixels)
• Strings without explicit units are interpreted as percentage (e.g. maxSize="50" is 50 percent)
• Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation

Minimum size of Panel within its parent group; defaults to 0%.

ℹ️ 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

Called when panel sizes change. @param panelSize Panel size (both as a percentage of the parent Group and in pixels) @param id Panel id (if one was provided as a prop) @param prevPanelSize Previous panel size (will be undefined on mount)

Exposes the following imperative API:

• collapse(): void
• expand(): void
• getSize(): PanelSize
• isCollapsed(): boolean
• resize(size: number | string): void

ℹ️ The usePanelRef and usePanelCallbackRef hooks are exported for convenience use in TypeScript projects.

CSS class name.

ℹ️ Use the data-separator attribute for custom hover and active styles

⚠️ The following properties cannot be overridden: flex-grow, flex-shrink

Uniquely identifies the separator within the parent group. Falls back to useId when not provided.

ℹ️ This value will also be assigned to the id and data-testid attributes; (an explicit data-testid prop will take precedence).

CSS properties.

ℹ️ Use the data-separator attribute for custom hover and active styles

⚠️ The following properties cannot be overridden: flex-grow, flex-shrink

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.

When true, double-clicking this Separator will not reset its Panel to its default size.

Ref attached to the root HTMLDivElement.

Overrides the Group default preview for this Separator when resizePreviewMode is "separator".

Grid columns; either the number of columns or an array of size constraints (one per column).

Grid rows; either the number of rows or an array of size constraints (one per row).

CSS class name.

Uniquely identifies this grid within an application. Falls back to useId when not provided.

ℹ️ This value will also be assigned to the id and data-testid attributes; (an explicit data-testid prop will take precedence).

CSS properties.

⚠️ Grid template and display properties are managed by the Grid and cannot be overridden.

Cell and Gridline components that comprise this grid.

⚠️ Cell and Gridline elements must be direct DOM children of their parent Grid element.

Default layout for either or both of the Grid's axes.

ℹ️ This value allows layouts to be remembered between page reloads.

This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for this grid.

Disable resize functionality.

Ref attached to the root HTMLDivElement.

Exposes the following imperative API:

• getLayout(): GridLayout
• getTrackById(axis: "column" | "row", id: string | number): GridTrackImperativeHandle
• getTrackByIndex(axis: "column" | "row", index: number): GridTrackImperativeHandle
• setLayout(layout: Partial<GridLayout>): GridLayout

ℹ️ The useGridRef and useGridCallbackRef hooks are exported for convenience use in TypeScript projects.

Called when the Grid'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.

Called after the Grid'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.

Minimum size of the resizable hit target area (either a Gridline or a Cell edge). This threshold ensures targets are large enough to avoid mis-clicks.

ℹ️ Refer to the Group prop of the same name for more information.

Index of the (first) column this cell occupies.

Index of the (first) row this cell occupies.

CSS class name.

Uniquely identifies this cell within the parent grid. Falls back to useId when not provided.

ℹ️ This value will also be assigned to the id and data-testid attributes; (an explicit data-testid prop will take precedence).

CSS properties.

⚠️ Grid placement properties are managed by the Cell and cannot be overridden.

Cell contents.

Number of columns this cell spans; defaults to 1.

Ref attached to the root HTMLDivElement.

Number of rows this cell spans; defaults to 1.

Column gridlines are vertical; they resize the columns on either side of them. Row gridlines are horizontal; they resize the rows on either side of them.

Gridline contents (e.g. a drag handle icon).

CSS class name.

ℹ️ Use the data-separator attribute for custom hover and active styles

When disabled, the gridline cannot be used to resize its neighboring tracks.

ℹ️ The tracks may still be resized indirectly (e.g. by an intersecting gridline or another boundary). To prevent a track from being resized at all, it needs to also be disabled.

Ref attached to the root HTMLDivElement.

CSS properties.

⚠️ Grid placement properties are managed by the gridline and cannot be overridden.

When type is "column", the gridline is rendered along the leading (left) edge of this column (between it and the previous column); must be greater than 0 and less than the number of columns. When type is "row", index of the first column the gridline is rendered alongside of; defaults to 0.

When type is "column", index of the first row the gridline is rendered alongside of; defaults to 0. When type is "row", the gridline is rendered along the leading (top) edge of this row (between it and the previous row); must be greater than 0 and less than the number of rows.

Number of rows a column gridline spans; defaults to all rows (starting from row).

ℹ️ Gridlines can span a subset of rows in order to avoid cells that span across the boundary they sit on; multiple gridlines can be rendered along the same boundary (e.g. above and below a spanning cell).

Number of columns a row gridline spans; defaults to all columns (starting from column).

ℹ️ Gridlines can span a subset of columns in order to avoid cells that span across the boundary they sit on; multiple gridlines can be rendered along the same boundary (e.g. before and after a spanning cell).

Initial layout of the workspace.

ℹ️ Splits and tabsets may omit their ids; they're assigned ids based on their position (see WorkspaceModelInput).

ℹ️ This value is only used when the Workspace mounts; use the imperative setModel method to replace it later.

Content of a tab.

ℹ️ Content is only re-rendered when its tab changes or this function does; a function created while rendering (e.g. an inline arrow function) re-renders the content of every tab whenever the Workspace's parent re-renders, so it should be memoized (e.g. with useCallback) when tab content is expensive to render.

CSS class name.

Uniquely identifies this workspace within an application. Falls back to useId when not provided.

ℹ️ This value will also be assigned to the id and data-testid attributes; (an explicit data-testid prop will take precedence).

CSS properties.

CSS class names for the elements the workspace renders within its root element:

• tabset: root element of a tabset (data-tabset)
• header: contains a tabset's tab list and toolbar (data-tabset-header)
• tabList: contains a tabset's tabs (data-tab-list)
• tab: passed to renderTab with the rest of a tab's props (data-tab)
• toolbar: contains the content returned by renderTabsetToolbar (data-tabset-toolbar)
• tabPanels: contains a tabset's tab content (data-tab-panels)
• tabContent: the element each tab's content is rendered into (data-tab-content)
• dropIndicator: shows where a dragged tab will be dropped within a tabset's panels (data-drop-indicator)
• dragPreview: follows the pointer while a tab is dragged (data-drag-preview)

ℹ️ Elements expose their state as data attributes (e.g. data-tab-selected), which can be used for styling. Elements within a tabset also have a data-tab-placement attribute (see tabPlacement).

ℹ️ Like the render props, this object is part of what tabsets re-render for; in large workspaces, define it outside of the component (or memoize it) rather than inline.

Locks the arrangement: tabs cannot be resized, dragged, dropped, or closed by the user. Selecting tabs and maximizing tabsets still work.

ℹ️ This prop overrides the disableClose and disableDrag flags of individual tabs.

Prevents tabs from being dropped onto some (or all) targets.

Functions are called when the target under the pointer changes; returning true rejects the target.

Ref attached to the root HTMLDivElement.

What happens to the content of tabs that are not selected. Can be a function to choose per tab (e.g. based on its data).

• "keep-mounted": content stays mounted (and its effects keep running)
• "activity": content stays mounted but is rendered within a hidden React <Activity> boundary, so its effects are unmounted; requires React 19.2 (falls back to "keep-mounted" otherwise)
• "unmount": content is unmounted

ℹ️ Moving a tab never remounts its content.

⚠️ Its React state is preserved, but its elements are moved within the document, which resets some browser state: iframes are reloaded, playing media is paused, and focused elements are blurred.

Called after the model has changed (e.g. a tab was moved, selected, or closed, or a tabset was resized).

ℹ️ For changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving models to some storage api.

Content of the element that follows the pointer while a tab is being dragged. Defaults to the tab's title (or id).

Content shown in the panels of a tabset that has no tabs (e.g. "Drag a tab here"): the root tabset of an empty workspace, or a tabset with the keepWhenEmpty flag.

Separator rendered between the children of a split. Should return a Separator (or null for no separator); defaults to an unstyled Separator.

Renders a tab (within its tabset's tab list). Spread props onto the returned element: they make it a tab (its role and ARIA attributes, keyboard and pointer handling, and data attributes), and attach a ref that dragging and keyboard focus depend on.

renderTab={(tab, props) => (
  <div {...props}>
    {tab.title}
    <TabCloseButton />
  </div>
)}

Individual props can be overridden or wrapped, e.g. to confirm before the Delete key closes a tab (call props.onKeyDown for other keys).

⚠️ Merge className and style rather than replacing them (e.g. style={{ ...props.style, padding: 4 }}): they include the tab entries of the classNames and styles props, and style includes the touch-action that touch dragging depends on.

ℹ️ Pointer and keyboard events from interactive descendants (button elements, role="button", or elements with a data-tab-ignore attribute) are ignored, so clicking a button within a tab doesn't select or drag it.

ℹ️ When this prop is not provided, tabs show their title (or id) followed by a TabCloseButton.

Content shown after a tabset's tab list (e.g. buttons to add a tab or maximize the tabset).

ℹ️ The useParentTabset and useParentTabsetState hooks can be used within this content.

Controls whether pointer dragging updates sizes immediately, or renders overlay separator previews until the pointer is released.

Render the content of selected tabs on the server. Can be a function to choose per tab (e.g. based on its data).

Tab content is rendered through portals (so that moving a tab doesn't remount it), which React can't render on the server. Content opted into server rendering is rendered inline instead, then moved into a portal once hydration has finished.

⚠️ That move remounts the content once (e.g. resetting its state and re-running its effects), so this is best suited to content that is cheap to mount and benefits from being in the server-rendered HTML.

ℹ️ This prop has no effect for workspaces that are not server rendered.

CSS properties for the elements the workspace renders within its root element (see classNames).

Where tabs are placed relative to tab content.

Tabs placed on the left or right are stacked ("vertical"): this determines how a dropped tab's position is found and which arrow keys move focus between tabs.

ℹ️ Elements within a tabset have a data-tab-placement attribute, which can be used for styling (e.g. rotating tabs on the left or right).

ℹ️ Tabsets can override this with the tabPlacement field of their model node.

Minimum height of each tabset's content area (not including its header).

ℹ️ Tabsets can override this with the minHeight field of their model node.

ℹ️ Interpretation rules:

• Strings must specify a unit: "px", "em", "rem", "vh", or "vw" (e.g. tabsetMinHeight: "200px")
• Percentages (and strings without units) are not allowed

Minimum width of each tabset's content area (not including its header).

ℹ️ Tabsets can override this with the minWidth field of their model node.

ℹ️ Interpretation rules:

• Strings must specify a unit: "px", "em", "rem", "vh", or "vw" (e.g. tabsetMinWidth: "200px")
• Percentages (and strings without units) are not allowed

Exposes the imperative API (see WorkspaceImperativeHandle).

ℹ️ The useWorkspaceRef and useWorkspaceCallbackRef hooks are exported for convenience use in TypeScript projects.