@iamevan/react-resizable-panels 3.0.6

package/README.md

@@ -0,0 +1,260 @@
+# react-resizable-panels
+
+React components for resizable panel groups/layouts
+
+```jsx
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+<PanelGroup autoSaveId="example" direction="horizontal">
+  <Panel defaultSize={25}>
+    <SourcesExplorer />
+  </Panel>
+  <PanelResizeHandle />
+  <Panel>
+    <SourceViewer />
+  </Panel>
+  <PanelResizeHandle />
+  <Panel defaultSize={25}>
+    <Console />
+  </Panel>
+</PanelGroup>;
+```
+
+## If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)
+
+## Props
+
+### `PanelGroup`
+
+| prop         | type                         | description                                                      |
+| :----------- | :--------------------------- | :--------------------------------------------------------------- |
+| `autoSaveId` | `?string`                    | Unique id used to auto-save group arrangement via `localStorage` |
+| `children`   | `ReactNode`                  | Arbitrary React element(s)                                       |
+| `className`  | `?string`                    | Class name to attach to root element                             |
+| `direction`  | `"horizontal" \| "vertical"` | Group orientation                                                |
+| `id`         | `?string`                    | Group id; falls back to `useId` when not provided                |
+| `onLayout`   | `?(sizes: number[]) => void` | Called when group layout changes                                 |
+| `storage`    | `?PanelGroupStorage`         | Custom storage API; defaults to `localStorage` <sup>1</sup>      |
+| `style`      | `?CSSProperties`             | CSS style to attach to root element                              |
+| `tagName`    | `?string = "div"`            | HTML element tag name for root element                           |
+
+<sup>1</sup>: Storage API must define the following _synchronous_ methods:
+
+- `getItem: (name:string) => string`
+- `setItem: (name: string, value: string) => void`
+
+`PanelGroup` components also expose an imperative API for manual resizing:
+| method                        | description                                                      |
+| :---------------------------- | :--------------------------------------------------------------- |
+| `getId(): string`             | Gets the panel group's ID.                                       |
+| `getLayout(): number[]`       | Gets the panel group's current _layout_ (`[1 - 100, ...]`).      |
+| `setLayout(layout: number[])` | Resize panel group to the specified _layout_ (`[1 - 100, ...]`). |
+
+### `Panel`
+
+| prop            | type                      | description                                                                                   |
+| :-------------- | :------------------------ | :-------------------------------------------------------------------------------------------- |
+| `children`      | `ReactNode`               | Arbitrary React element(s)                                                                    |
+| `className`     | `?string`                 | Class name to attach to root element                                                          |
+| `collapsedSize` | `?number=0`               | Panel should collapse to this size                                                            |
+| `collapsible`   | `?boolean=false`          | Panel should collapse when resized beyond its `minSize`                                       |
+| `defaultSize`   | `?number`                 | Initial size of panel (numeric value between 1-100)                                           |
+| `id`            | `?string`                 | Panel id (unique within group); falls back to `useId` when not provided                       |
+| `maxSize`       | `?number = 100`           | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |
+| `minSize`       | `?number = 10`            | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |
+| `onCollapse`    | `?() => void`             | Called when panel is collapsed                                                                |
+| `onExpand`      | `?() => void`             | Called when panel is expanded                                                                 |
+| `onResize`      | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
+| `order`         | `?number`                 | Order of panel within group; required for groups with conditionally rendered panels           |
+| `style`         | `?CSSProperties`          | CSS style to attach to root element                                                           |
+| `tagName`       | `?string = "div"`         | HTML element tag name for root element                                                        |
+
+<sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
+
+`Panel` components also expose an imperative API for manual resizing:
+| method                   | description                                                                        |
+| :----------------------- | :--------------------------------------------------------------------------------- |
+| `collapse()`             | If panel is `collapsible`, collapse it fully.                                      |
+| `expand()`               | If panel is currently _collapsed_, expand it to its most recent size.              |
+| `getId(): string`        | Gets the ID of the panel.                                                          |
+| `getSize(): number`      | Gets the current size of the panel as a percentage (`1 - 100`).                    |
+| `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).               |
+| `isExpanded(): boolean`  | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`).       |
+| `resize(size: number)`   | Resize panel to the specified _percentage_ (`1 - 100`).                            |
+
+### `PanelResizeHandle`
+
+| prop             | type                                          | description                                                                     |
+| :--------------- | :-------------------------------------------- | :------------------------------------------------------------------------------ |
+| `children`       | `?ReactNode`                                  | Custom drag UI; can be any arbitrary React element(s)                           |
+| `className`      | `?string`                                     | Class name to attach to root element                                            |
+| `hitAreaMargins` | `?{ coarse: number = 15; fine: number = 5; }` | Allow this much margin when determining resizable handle hit detection          |
+| `disabled`       | `?boolean`                                    | Disable drag handle                                                             |
+| `id`             | `?string`                                     | Resize handle id (unique within group); falls back to `useId` when not provided |
+| `onDragging`     | `?(isDragging: boolean) => void`              | Called when group layout changes                                                |
+| `style`          | `?CSSProperties`                              | CSS style to attach to root element                                             |
+| `tagName`        | `?string = "div"`                             | HTML element tag name for root element                                          |
+
+---
+
+## FAQ
+
+### Can panel sizes be specified in pixels?
+
+No. Pixel-based constraints [added significant complexity](https://github.com/bvaughn/react-resizable-panels/pull/176) to the initialization and validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following [a pattern like this](https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416) but it is not officially supported by this library.
+
+### How can I fix layout/sizing problems with conditionally rendered panels?
+
+The `Panel` API doesn't _require_ `id` and `order` props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.
+
+```tsx
+<PanelGroup direction="horizontal">
+  {renderSideBar && (
+    <>
+      <Panel id="sidebar" minSize={25} order={1}>
+        <Sidebar />
+      </Panel>
+      <PanelResizeHandle />
+    </>
+  )}
+  <Panel minSize={25} order={2}>
+    <Main />
+  </Panel>
+</PanelGroup>
+```
+
+### Can I attach a ref to the DOM elements?
+
+No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:
+
+```tsx
+import {
+  getPanelElement,
+  getPanelGroupElement,
+  getResizeHandleElement,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from "react-resizable-panels";
+
+export function Example() {
+  const refs = useRef();
+
+  useEffect(() => {
+    const groupElement = getPanelGroupElement("group");
+    const leftPanelElement = getPanelElement("left-panel");
+    const rightPanelElement = getPanelElement("right-panel");
+    const resizeHandleElement = getResizeHandleElement("resize-handle");
+
+    // If you want to, you can store them in a ref to pass around
+    refs.current = {
+      groupElement,
+      leftPanelElement,
+      rightPanelElement,
+      resizeHandleElement,
+    };
+  }, []);
+
+  return (
+    <PanelGroup direction="horizontal" id="group">
+      <Panel id="left-panel">{/* ... */}</Panel>
+      <PanelResizeHandle id="resize-handle" />
+      <Panel id="right-panel">{/* ... */}</Panel>
+    </PanelGroup>
+  );
+}
+```
+
+### Why don't I see any resize UI?
+
+This likely means that you haven't applied any CSS to style the resize handles. By default, a resize handle is just an empty DOM element. To add styling, use the `className` or `style` props:
+
+```tsx
+// Tailwind example
+<PanelResizeHandle className="w-2 bg-blue-800" />
+```
+
+### Can panel sizes be persistent?
+
+Yes. Panel groups with an `autoSaveId` prop will automatically save and restore their layouts on mount.
+
+### How can I use persistent layouts with SSR?
+
+By default, this library uses `localStorage` to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in `localStorage`). The way to avoid this flicker is to also persist the layout with a cookie like so:
+
+#### Server component
+
+```tsx
+import ResizablePanels from "@/app/ResizablePanels";
+import { cookies } from "next/headers";
+
+export function ServerComponent() {
+  const layout = cookies().get("react-resizable-panels:layout");
+
+  let defaultLayout;
+  if (layout) {
+    defaultLayout = JSON.parse(layout.value);
+  }
+
+  return <ClientComponent defaultLayout={defaultLayout} />;
+}
+```
+
+#### Client component
+
+```tsx
+"use client";
+
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+export function ClientComponent({
+  defaultLayout = [33, 67],
+}: {
+  defaultLayout: number[] | undefined;
+}) {
+  const onLayout = (sizes: number[]) => {
+    document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
+  };
+
+  return (
+    <PanelGroup direction="horizontal" onLayout={onLayout}>
+      <Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
+      <PanelResizeHandle className="w-2 bg-blue-800" />
+      <Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
+    </PanelGroup>
+  );
+}
+```
+
+> [!NOTE]
+> Be sure to specify a `defaultSize` prop for **every** `Panel` component to avoid layout flicker.
+
+A demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).
+
+#### How can I set the [CSP `"nonce"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute?
+
+```js
+import { setNonce } from "react-resizable-panels";
+
+setNonce("your-nonce-value-here");
+```
+
+#### How can I disable global cursor styles?
+
+```js
+import { disableGlobalCursorStyles } from "react-resizable-panels";
+
+disableGlobalCursorStyles();
+```
+
+#### How can I override the global cursor styles?
+
+```js
+import { customizeGlobalCursorStyles, type CustomCursorStyleConfig } from "react-resizable-panels";
+
+function customCursor({ isPointerDown }: CustomCursorStyleConfig) {
+  return isPointerDown ? "grabbing" : "grab";
+}
+
+customizeGlobalCursorStyles(customCursor);
+```

package/dist/declarations/src/Panel.d.ts

@@ -0,0 +1,70 @@
+import { ForwardedRef, HTMLAttributes, PropsWithChildren, ReactElement } from "react";
+export type PanelOnCollapse = () => void;
+export type PanelOnExpand = () => void;
+export type PanelOnResize = (size: number, prevSize: number | undefined) => void;
+export type PanelCallbacks = {
+    onCollapse?: PanelOnCollapse;
+    onExpand?: PanelOnExpand;
+    onResize?: PanelOnResize;
+};
+export type PanelConstraints = {
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+};
+export type PanelData = {
+    callbacks: PanelCallbacks;
+    constraints: PanelConstraints;
+    id: string;
+    idIsFromProps: boolean;
+    order: number | undefined;
+};
+export type ImperativePanelHandle = {
+    collapse: () => void;
+    expand: (minSize?: number) => void;
+    getId(): string;
+    getSize(): number;
+    isCollapsed: () => boolean;
+    isExpanded: () => boolean;
+    resize: (size: number) => void;
+};
+export type PanelProps<T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = Omit<HTMLAttributes<HTMLElementTagNameMap[T]>, "id" | "onResize"> & PropsWithChildren<{
+    className?: string;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: PanelOnCollapse;
+    onExpand?: PanelOnExpand;
+    onResize?: PanelOnResize;
+    order?: number;
+    style?: object;
+    tagName?: T;
+}>;
+export declare function PanelWithForwardedRef({ children, className: classNameFromProps, collapsedSize, collapsible, defaultSize, forwardedRef, id: idFromProps, maxSize, minSize, onCollapse, onExpand, onResize, order, style: styleFromProps, tagName: Type, ...rest }: PanelProps & {
+    forwardedRef: ForwardedRef<ImperativePanelHandle>;
+}): ReactElement;
+export declare namespace PanelWithForwardedRef {
+    var displayName: string;
+}
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLObjectElement | HTMLElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+    className?: string;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: PanelOnCollapse;
+    onExpand?: PanelOnExpand;
+    onResize?: PanelOnResize;
+    order?: number;
+    style?: object;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<ImperativePanelHandle>>;

package/dist/declarations/src/PanelGroup.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, HTMLAttributes, PropsWithChildren } from "react";
+import { Direction } from "./types.js";
+export type ImperativePanelGroupHandle = {
+    getId: () => string;
+    getLayout: () => number[];
+    setLayout: (layout: number[]) => void;
+};
+export type PanelGroupStorage = {
+    getItem(name: string): string | null;
+    setItem(name: string, value: string): void;
+};
+export type PanelGroupOnLayout = (layout: number[]) => void;
+export type PanelGroupProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & PropsWithChildren<{
+    autoSaveId?: string | null;
+    className?: string;
+    direction: Direction;
+    id?: string | null;
+    keyboardResizeBy?: number | null;
+    onLayout?: PanelGroupOnLayout | null;
+    storage?: PanelGroupStorage;
+    style?: CSSProperties;
+    tagName?: keyof HTMLElementTagNameMap;
+    dir?: "auto" | "ltr" | "rtl" | undefined;
+}>;
+export declare const PanelGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
+    autoSaveId?: string | null;
+    className?: string;
+    direction: Direction;
+    id?: string | null;
+    keyboardResizeBy?: number | null;
+    onLayout?: PanelGroupOnLayout | null;
+    storage?: PanelGroupStorage;
+    style?: CSSProperties;
+    tagName?: keyof HTMLElementTagNameMap;
+    dir?: "auto" | "ltr" | "rtl" | undefined;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<ImperativePanelGroupHandle>>;

package/dist/declarations/src/PanelResizeHandle.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, HTMLAttributes, PropsWithChildren, ReactElement } from "react";
+import { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
+export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
+export type ResizeHandlerState = "drag" | "hover" | "inactive";
+export type PanelResizeHandleProps = Omit<HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onBlur" | "onClick" | "onFocus" | "onPointerDown" | "onPointerUp"> & PropsWithChildren<{
+    className?: string;
+    disabled?: boolean;
+    hitAreaMargins?: PointerHitAreaMargins;
+    id?: string | null;
+    onBlur?: () => void;
+    onClick?: () => void;
+    onDragging?: PanelResizeHandleOnDragging;
+    onFocus?: () => void;
+    onPointerDown?: () => void;
+    onPointerUp?: () => void;
+    style?: CSSProperties;
+    tabIndex?: number;
+    tagName?: keyof HTMLElementTagNameMap;
+}>;
+export declare function PanelResizeHandle({ children, className: classNameFromProps, disabled, hitAreaMargins, id: idFromProps, onBlur, onClick, onDragging, onFocus, onPointerDown, onPointerUp, style: styleFromProps, tabIndex, tagName: Type, ...rest }: PanelResizeHandleProps): ReactElement;
+export declare namespace PanelResizeHandle {
+    var displayName: string;
+}

package/dist/declarations/src/PanelResizeHandleRegistry.d.ts

@@ -0,0 +1,19 @@
+import { Direction, ResizeEvent } from "./types.js";
+export type ResizeHandlerAction = "down" | "move" | "up";
+export type SetResizeHandlerState = (action: ResizeHandlerAction, isActive: boolean, event: ResizeEvent | null) => void;
+export type PointerHitAreaMargins = {
+    coarse: number;
+    fine: number;
+};
+export type ResizeHandlerData = {
+    direction: Direction;
+    element: HTMLElement;
+    hitAreaMargins: PointerHitAreaMargins;
+    setResizeHandlerState: SetResizeHandlerState;
+};
+export declare const EXCEEDED_HORIZONTAL_MIN = 1;
+export declare const EXCEEDED_HORIZONTAL_MAX = 2;
+export declare const EXCEEDED_VERTICAL_MIN = 4;
+export declare const EXCEEDED_VERTICAL_MAX = 8;
+export declare function registerResizeHandle(resizeHandleId: string, element: HTMLElement, direction: Direction, hitAreaMargins: PointerHitAreaMargins, setResizeHandlerState: SetResizeHandlerState): () => void;
+export declare function reportConstraintsViolation(resizeHandleId: string, flag: number): void;

package/dist/declarations/src/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const DATA_ATTRIBUTES: {
+    readonly group: "data-panel-group";
+    readonly groupDirection: "data-panel-group-direction";
+    readonly groupId: "data-panel-group-id";
+    readonly panel: "data-panel";
+    readonly panelCollapsible: "data-panel-collapsible";
+    readonly panelId: "data-panel-id";
+    readonly panelSize: "data-panel-size";
+    readonly resizeHandle: "data-resize-handle";
+    readonly resizeHandleActive: "data-resize-handle-active";
+    readonly resizeHandleEnabled: "data-panel-resize-handle-enabled";
+    readonly resizeHandleId: "data-panel-resize-handle-id";
+    readonly resizeHandleState: "data-resize-handle-state";
+};
+export declare const PRECISION = 10;

package/dist/declarations/src/hooks/usePanelGroupContext.d.ts

@@ -0,0 +1,4 @@
+export declare function usePanelGroupContext(): {
+    direction: "horizontal" | "vertical" | undefined;
+    groupId: string | undefined;
+};

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,23 @@
+import { Panel } from "./Panel.js";
+import { PanelGroup } from "./PanelGroup.js";
+import { PanelResizeHandle } from "./PanelResizeHandle.js";
+import { DATA_ATTRIBUTES } from "./constants.js";
+import { usePanelGroupContext } from "./hooks/usePanelGroupContext.js";
+import { assert } from "./utils/assert.js";
+import { setNonce } from "./utils/csp.js";
+import { customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles } from "./utils/cursor.js";
+import { getPanelElement } from "./utils/dom/getPanelElement.js";
+import { getPanelElementsForGroup } from "./utils/dom/getPanelElementsForGroup.js";
+import { getPanelGroupElement } from "./utils/dom/getPanelGroupElement.js";
+import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement.js";
+import { getResizeHandleElementIndex } from "./utils/dom/getResizeHandleElementIndex.js";
+import { getResizeHandleElementsForGroup } from "./utils/dom/getResizeHandleElementsForGroup.js";
+import { getResizeHandlePanelIds } from "./utils/dom/getResizeHandlePanelIds.js";
+import { getIntersectingRectangle } from "./utils/rects/getIntersectingRectangle.js";
+import { intersects } from "./utils/rects/intersects.js";
+import type { ImperativePanelHandle, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps } from "./Panel.js";
+import type { ImperativePanelGroupHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage } from "./PanelGroup.js";
+import type { PanelResizeHandleOnDragging, PanelResizeHandleProps } from "./PanelResizeHandle.js";
+import type { PointerHitAreaMargins } from "./PanelResizeHandleRegistry.js";
+import type { CustomCursorStyleConfig } from "./utils/cursor.js";
+export { ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelGroupStorage, PanelOnCollapse, PanelOnExpand, PanelOnResize, PanelProps, PanelResizeHandleOnDragging, PanelResizeHandleProps, PointerHitAreaMargins, Panel, PanelGroup, PanelResizeHandle, usePanelGroupContext, assert, getIntersectingRectangle, intersects, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, setNonce, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, CustomCursorStyleConfig, DATA_ATTRIBUTES, };

package/dist/declarations/src/types.d.ts

@@ -0,0 +1,3 @@
+export type Direction = "horizontal" | "vertical";
+export type ResizeEvent = KeyboardEvent | PointerEvent | MouseEvent;
+export type ResizeHandler = (event: ResizeEvent) => void;

package/dist/declarations/src/utils/assert.d.ts

@@ -0,0 +1 @@
+export declare function assert(expectedCondition: any, message: string): asserts expectedCondition;

package/dist/declarations/src/utils/csp.d.ts

@@ -0,0 +1,2 @@
+export declare function getNonce(): string | null;
+export declare function setNonce(value: string | null): void;

package/dist/declarations/src/utils/cursor.d.ts

@@ -0,0 +1,18 @@
+type CursorState = "horizontal" | "intersection" | "vertical";
+export type CustomCursorStyleConfig = {
+    exceedsHorizontalMaximum: boolean;
+    exceedsHorizontalMinimum: boolean;
+    exceedsVerticalMaximum: boolean;
+    exceedsVerticalMinimum: boolean;
+    intersectsHorizontalDragHandle: boolean;
+    intersectsVerticalDragHandle: boolean;
+    isPointerDown: boolean;
+};
+type GetCustomCursorStyleFunction = (config: CustomCursorStyleConfig) => string;
+export declare function customizeGlobalCursorStyles(callback: GetCustomCursorStyleFunction | null): void;
+export declare function disableGlobalCursorStyles(): void;
+export declare function enableGlobalCursorStyles(): void;
+export declare function getCursorStyle(state: CursorState, constraintFlags: number, isPointerDown: boolean): string;
+export declare function resetGlobalCursorStyle(): void;
+export declare function setGlobalCursorStyle(state: CursorState, constraintFlags: number, isPointerDown: boolean): void;
+export {};

package/dist/declarations/src/utils/dom/getPanelElement.d.ts

@@ -0,0 +1 @@
+export declare function getPanelElement(id: string, scope?: ParentNode | HTMLElement): HTMLElement | null;

package/dist/declarations/src/utils/dom/getPanelElementsForGroup.d.ts

@@ -0,0 +1 @@
+export declare function getPanelElementsForGroup(groupId: string, scope?: ParentNode | HTMLElement): HTMLElement[];

package/dist/declarations/src/utils/dom/getPanelGroupElement.d.ts

@@ -0,0 +1 @@
+export declare function getPanelGroupElement(id: string, rootElement?: ParentNode | HTMLElement): HTMLElement | null;

package/dist/declarations/src/utils/dom/getResizeHandleElement.d.ts

@@ -0,0 +1 @@
+export declare function getResizeHandleElement(id: string, scope?: ParentNode | HTMLElement): HTMLElement | null;

package/dist/declarations/src/utils/dom/getResizeHandleElementIndex.d.ts

@@ -0,0 +1 @@
+export declare function getResizeHandleElementIndex(groupId: string, id: string, scope?: ParentNode | HTMLElement): number | null;

package/dist/declarations/src/utils/dom/getResizeHandleElementsForGroup.d.ts

@@ -0,0 +1 @@
+export declare function getResizeHandleElementsForGroup(groupId: string, scope?: ParentNode | HTMLElement): HTMLElement[];

package/dist/declarations/src/utils/dom/getResizeHandlePanelIds.d.ts

@@ -0,0 +1,2 @@
+import { PanelData } from "../../Panel.js";
+export declare function getResizeHandlePanelIds(groupId: string, handleId: string, panelsArray: PanelData[], scope?: ParentNode | HTMLElement): [idBefore: string | null, idAfter: string | null];

package/dist/declarations/src/utils/rects/getIntersectingRectangle.d.ts

@@ -0,0 +1,2 @@
+import { Rectangle } from "./types.js";
+export declare function getIntersectingRectangle(rectOne: Rectangle, rectTwo: Rectangle, strict: boolean): Rectangle;

package/dist/declarations/src/utils/rects/intersects.d.ts

@@ -0,0 +1,2 @@
+import { Rectangle } from "./types.js";
+export declare function intersects(rectOne: Rectangle, rectTwo: Rectangle, strict: boolean): boolean;

package/dist/declarations/src/utils/rects/types.d.ts

@@ -0,0 +1,6 @@
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}