@corvu-next/resizable 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Jasmin Noetzli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,304 @@
+import * as _solidjs_web from '@solidjs/web';
+import { ValidComponent, JSX } from '@solidjs/web';
+import { Accessor, Setter } from 'solid-js';
+import { Size } from '@corvu-next/utils';
+export { Size } from '@corvu-next/utils';
+import { Ref, ElementOf } from '@corvu-next/utils/dom';
+import { DynamicProps } from '@corvu-next/utils/dynamic';
+export { DynamicProps } from '@corvu-next/utils/dynamic';
+
+type ResizeStrategy = 'preceding' | 'following' | 'both';
+
+type ResizableContextValue = {
+    /** The orientation of the resizable. */
+    orientation: Accessor<'horizontal' | 'vertical'>;
+    /** The sizes of the panels. */
+    sizes: Accessor<number[]>;
+    /** Change the sizes of the panels. */
+    setSizes: Setter<number[]>;
+    /** The delta to use when resizing with arrow keys. */
+    keyboardDelta: Accessor<Size>;
+    /** Whether to handle the cursor style when resizing. */
+    handleCursorStyle: Accessor<boolean>;
+    /** Resize a panel to a specific size with the given strategy. */
+    resize: (panelIndex: number, size: Size, strategy?: ResizeStrategy) => void;
+    /** Collapse a panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    collapse: (panelIndex: number, strategy?: ResizeStrategy) => void;
+    /** Expand a panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    expand: (panelIndex: number, strategy?: ResizeStrategy) => void;
+};
+/** Context which exposes various properties to interact with the resizable. Optionally provide a contextId to access a keyed context. */
+declare const useResizableContext: (contextId?: string) => ResizableContextValue;
+
+type ResizableHandleCorvuProps = {
+    /**
+     * Whether the handle is allowed to intersect with another handle at its start (Left/Top of the handle)
+     * @defaultValue `true`
+     */
+    startIntersection?: boolean;
+    /**
+     * Whether the handle is allowed to intersect with another handle at its end (Right/Bottom of the handle)
+     * @defaultValue `true`
+     */
+    endIntersection?: boolean;
+    /**
+     * Whether Alt key resize mode is enabled. Set to `'only'` to make it the default  and only way to resize.
+     * @defaultValue `true`
+     */
+    altKey?: boolean | 'only';
+    /**
+     * Callback fired when the handle starts being dragged. Can be prevented by calling `event.preventDefault`.
+     */
+    onHandleDragStart?: (event: PointerEvent) => void;
+    /**
+     * Callback fired when the handle is being dragged. Can be prevented by calling `event.preventDefault`.
+     */
+    onHandleDrag?: (event: CustomEvent) => void;
+    /**
+     * Callback fired when the handle stops being dragged.
+     */
+    onHandleDragEnd?: (event: PointerEvent | TouchEvent | MouseEvent) => void;
+    /**
+     * The `id` of the resizable context to use.
+     */
+    contextId?: string;
+};
+type ResizableHandleSharedElementProps<T extends ValidComponent = 'button'> = {
+    ref: Ref<ElementOf<T>>;
+    style: string | JSX.CSSProperties;
+    disabled: boolean | undefined;
+    onBlur: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
+    onFocus: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
+    onKeyDown: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
+    onKeyUp: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
+    onMouseEnter: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
+    onMouseLeave: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
+    onPointerDown: JSX.EventHandlerUnion<ElementOf<T>, PointerEvent>;
+    children: JSX.Element;
+};
+type ResizableHandleElementProps = ResizableHandleSharedElementProps & {
+    role: 'separator';
+    'aria-controls': string | undefined;
+    'aria-orientation': 'horizontal' | 'vertical';
+    'aria-valuemax': number | undefined;
+    'aria-valuemin': number | undefined;
+    'aria-valuenow': number | undefined;
+    'data-active': '' | undefined;
+    'data-dragging': '' | undefined;
+    'data-orientation': 'horizontal' | 'vertical';
+    'data-corvu-resizable-handle': '';
+};
+type ResizableHandleProps<T extends ValidComponent = 'button'> = ResizableHandleCorvuProps & Partial<ResizableHandleSharedElementProps<T>>;
+/** Resizable handle.
+ *
+ * @data `data-corvu-resizable-handle` - Present on every resizable handle.
+ * @data `data-active` - Present when the handle is active.
+ * @data `data-dragging` - Present when the handle is being dragged.
+ * @data `data-orientation` - The orientation of the resizable.
+ */
+declare const ResizableHandle: <T extends ValidComponent = "button">(props: DynamicProps<T, ResizableHandleProps<T>>) => JSX.Element;
+
+type ResizablePanelCorvuProps = {
+    /**
+     * The initial size of the panel. If the panel is rendered on the server, this should be a percentage to avoid layout shifts.
+     */
+    initialSize?: Size;
+    /**
+     * The minimum size of the panel.
+     * @defaultValue 0
+     */
+    minSize?: Size;
+    /**
+     * The maximum size of the panel.
+     * @defaultValue 1
+     */
+    maxSize?: Size;
+    /**
+     * Whether the panel is collapsible.
+     * @defaultValue `false`
+     */
+    collapsible?: boolean;
+    /**
+     * The size the panel should collapse to.
+     * @defaultValue 0
+     */
+    collapsedSize?: Size;
+    /**
+     * How much the user has to "overdrag" for the panel to collapse.
+     * @defaultValue 0.05
+     */
+    collapseThreshold?: Size;
+    /**
+     * Callback fired when the panel is resized.
+     * @param size - The new size of the panel.
+     */
+    onResize?: (size: number) => void;
+    /**
+     * Callback fired when the panel is collapsed.
+     * @param size - The new size of the panel.
+     */
+    onCollapse?: (size: number) => void;
+    /**
+     * Callback fired when the panel is expanded.
+     * @param size - The new size of the panel.
+     */
+    onExpand?: (size: number) => void;
+    /**
+     * The `id` of the resizable context to use.
+     */
+    contextId?: string;
+    /**
+     * The `id` attribute of the resizable panel element.
+     * @defaultValue `createUniqueId()`
+     */
+    panelId?: string;
+};
+type ResizablePanelSharedElementProps<T extends ValidComponent = 'div'> = {
+    ref: Ref<ElementOf<T>>;
+    style: string | JSX.CSSProperties;
+    children: JSX.Element | ((props: ResizablePanelChildrenProps) => JSX.Element);
+};
+type ResizablePanelElementProps = ResizablePanelSharedElementProps & {
+    id: string;
+    'data-collapsed': '' | undefined;
+    'data-expanded': '' | undefined;
+    'data-orientation': 'horizontal' | 'vertical';
+    'data-corvu-resizable-panel': '';
+};
+type ResizablePanelProps<T extends ValidComponent = 'div'> = ResizablePanelCorvuProps & Partial<ResizablePanelSharedElementProps<T>>;
+type ResizablePanelChildrenProps = {
+    /** The current size of the panel. */
+    size: number;
+    /** The minimum size of the panel. */
+    minSize: Size;
+    /** The maximum size of the panel. */
+    maxSize: Size;
+    /** Whether the panel is collapsible. */
+    collapsible: boolean;
+    /** The size the panel should collapse to. */
+    collapsedSize: Size;
+    /** How much the user has to "overdrag" for the panel to collapse. */
+    collapseThreshold: Size;
+    /** Whether the panel is currently collapsed. */
+    collapsed: boolean;
+    /** Resize the panel to a specific size with the given strategy. */
+    resize: (size: Size, strategy?: ResizeStrategy) => void;
+    /** Collapse the panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    collapse: (strategy?: ResizeStrategy) => void;
+    /** Expand the panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    expand: (strategy?: ResizeStrategy) => void;
+    /** The `id` attribute of the resizable panel element. */
+    panelId: string;
+};
+/** Resizable panel.
+ *
+ * @data `data-corvu-resizable-panel` - Present on every resizable panel.
+ * @data `data-orientation` - The orientation of the resizable.
+ * @data `data-collapsed` - Present if the panel is currently collapsed.
+ * @data `data-expanded` - Present if the panel is currently expanded. Only present on panels that are collapsible.
+ */
+declare const ResizablePanel: <T extends ValidComponent = "div">(props: DynamicProps<T, ResizablePanelProps<T>>) => JSX.Element;
+
+type ResizablePanelContextValue = {
+    /** The current size of the panel. */
+    size: Accessor<number>;
+    /** The minimum size of the panel. */
+    minSize: Accessor<Size | null>;
+    /** The maximum size of the panel. */
+    maxSize: Accessor<Size | null>;
+    /** Whether the panel is collapsible. */
+    collapsible: Accessor<boolean>;
+    /** The size the panel should collapse to. */
+    collapsedSize: Accessor<Size>;
+    /** How much the user has to "overdrag" for the panel to collapse. */
+    collapseThreshold: Accessor<Size>;
+    /** Whether the panel is currently collapsed. */
+    collapsed: Accessor<boolean>;
+    /** Resize the panel to a specific size with the given strategy. */
+    resize: (size: Size, strategy?: ResizeStrategy) => void;
+    /** Collapse the panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    collapse: (strategy?: ResizeStrategy) => void;
+    /** Expand the panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    expand: (strategy?: ResizeStrategy) => void;
+    /** The `id` attribute of the resizable panel element. */
+    panelId: Accessor<string>;
+};
+/** Context which exposes various properties to interact with a resizable panel. Optionally provide a contextId to access a keyed context. */
+declare const useResizablePanelContext: (contextId?: string) => ResizablePanelContextValue;
+
+type ResizableRootCorvuProps = {
+    /**
+     * The orientation of the resizable.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Panel sizes in percentage.
+     */
+    sizes?: number[];
+    /**
+     * Callback fired when the panel sizes change.
+     */
+    onSizesChange?: (sizes: number[]) => void;
+    /**
+     * Initial panel sizes. Gets overridden by the `initialSize` prop on `<Panel />` components.
+     */
+    initialSizes?: Size[];
+    /**
+     * The delta to use when resizing with arrow keys.
+     * @defaultValue 0.1
+     */
+    keyboardDelta?: Size;
+    /**
+     * Whether to handle the cursor style when resizing.
+     * @defaultValue true
+     */
+    handleCursorStyle?: boolean;
+    /**
+     * The `id` of the resizable context to use.
+     */
+    contextId?: string;
+};
+type ResizableRootSharedElementProps<T extends ValidComponent = 'div'> = {
+    ref: Ref<ElementOf<T>>;
+    style: string | JSX.CSSProperties;
+    children: JSX.Element | ((props: ResizableRootChildrenProps) => JSX.Element);
+};
+type ResizableRootElementProps = ResizableRootSharedElementProps & {
+    'data-orientation': 'horizontal' | 'vertical';
+    'data-corvu-resizable-root': '';
+};
+type ResizableRootProps<T extends ValidComponent = 'div'> = ResizableRootCorvuProps & Partial<ResizableRootSharedElementProps<T>>;
+type ResizableRootChildrenProps = {
+    /** The orientation of the resizable. */
+    orientation: 'vertical' | 'horizontal';
+    /** The sizes of the panels. */
+    sizes: number[];
+    /** Change the sizes of the panels. */
+    setSizes: Setter<number[]>;
+    /** The delta to use when resizing with arrow keys. */
+    keyboardDelta: Size;
+    /** Whether to handle the cursor style when resizing. */
+    handleCursorStyle: boolean;
+    /** Resize a panel to a specific size with the given strategy. */
+    resize: (panelIndex: number, size: Size, strategy?: ResizeStrategy) => void;
+    /** Collapse a panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    collapse: (panelIndex: number, strategy?: ResizeStrategy) => void;
+    /** Expand a panel with the given strategy. Only works if `collapsible` is set to `true`. */
+    expand: (panelIndex: number, strategy?: ResizeStrategy) => void;
+};
+/** Wrapper for the resizable.
+ *
+ * @data `data-corvu-resizable-root` - Present on every resizable root element.
+ * @data `data-orientation` - The orientation of the resizable.
+ */
+declare const ResizableRoot: <T extends ValidComponent = "div">(props: DynamicProps<T, ResizableRootProps<T>>) => JSX.Element;
+
+declare const Resizable: (<T extends _solidjs_web.ValidComponent = "div">(props: DynamicProps<T, ResizableRootProps<T>>) => _solidjs_web.JSX.Element) & {
+    Panel: <T extends _solidjs_web.ValidComponent = "div">(props: DynamicProps<T, ResizablePanelProps<T>>) => _solidjs_web.JSX.Element;
+    Handle: <T extends _solidjs_web.ValidComponent = "button">(props: DynamicProps<T, ResizableHandleProps<T>>) => _solidjs_web.JSX.Element;
+    useContext: (contextId?: string) => ResizableContextValue;
+    usePanelContext: (contextId?: string) => ResizablePanelContextValue;
+};
+
+export { type ResizableContextValue as ContextValue, ResizableHandle as Handle, type ResizableHandleCorvuProps as HandleCorvuProps, type ResizableHandleElementProps as HandleElementProps, type ResizableHandleProps as HandleProps, type ResizableHandleSharedElementProps as HandleSharedElementProps, ResizablePanel as Panel, type ResizablePanelChildrenProps as PanelChildrenProps, type ResizablePanelContextValue as PanelContextValue, type ResizablePanelCorvuProps as PanelCorvuProps, type ResizablePanelElementProps as PanelElementProps, type ResizablePanelProps as PanelProps, type ResizablePanelSharedElementProps as PanelSharedElementProps, type ResizeStrategy, ResizableRoot as Root, type ResizableRootChildrenProps as RootChildrenProps, type ResizableRootCorvuProps as RootCorvuProps, type ResizableRootElementProps as RootElementProps, type ResizableRootProps as RootProps, type ResizableRootSharedElementProps as RootSharedElementProps, Resizable as default, useResizableContext as useContext, useResizablePanelContext as usePanelContext };