@corvu/drawer/dist/index.d.ts

Unstyled, accessible and customizable UI primitives for SolidJS

import * as solid_js_web from 'solid-js/web';
import * as solid_js from 'solid-js';
import { ValidComponent, JSX, Accessor, Component } from 'solid-js';
import { CloseCorvuProps, CloseSharedElementProps, CloseElementProps, ContentCorvuProps, ContentSharedElementProps, ContentElementProps, DescriptionCorvuProps, DescriptionSharedElementProps, DescriptionElementProps, LabelCorvuProps, LabelSharedElementProps, LabelElementProps, OverlayCorvuProps, OverlaySharedElementProps, OverlayElementProps, RootChildrenProps, RootProps, TriggerCorvuProps, TriggerSharedElementProps, TriggerElementProps, PortalProps, ContextValue } from '@corvu/dialog';
export { ContextValue as DialogContextValue, Portal, PortalProps, useContext as useDialogContext } from '@corvu/dialog';
import { DynamicProps } from '@corvu/utils/dynamic';
export { DynamicProps } from '@corvu/utils/dynamic';
import { Size, Side } from '@corvu/utils';
export { Side, Size } from '@corvu/utils';

type DrawerCloseCorvuProps = CloseCorvuProps;
type DrawerCloseSharedElementProps<T extends ValidComponent = 'button'> = CloseSharedElementProps<T>;
type DrawerCloseElementProps = DrawerCloseSharedElementProps & {
    'data-corvu-drawer-close': '';
} & CloseElementProps;
type DrawerCloseProps<T extends ValidComponent = 'button'> = DrawerCloseCorvuProps & Partial<DrawerCloseSharedElementProps<T>>;
/** Close button that changes the open state to false when clicked.
 *
 * @data `data-corvu-drawer-close` - Present on every drawer close element.
 */
declare const DrawerClose: <T extends ValidComponent = "button">(props: DynamicProps<T, DrawerCloseProps<T>>) => solid_js.JSX.Element;

type DrawerContentCorvuProps = ContentCorvuProps;
type DrawerContentSharedElementProps<T extends ValidComponent = 'div'> = ContentSharedElementProps<T>;
type DrawerContentElementProps = DrawerContentSharedElementProps & {
    onPointerDown: JSX.EventHandlerUnion<HTMLElement, PointerEvent>;
    onTouchStart: JSX.EventHandlerUnion<HTMLElement, TouchEvent>;
    onTransitionEnd: JSX.EventHandlerUnion<HTMLElement, TransitionEvent>;
    'data-opening': '' | undefined;
    'data-closing': '' | undefined;
    'data-resizing': '' | undefined;
    'data-snapping': '' | undefined;
    'data-transitioning': '' | undefined;
    'data-corvu-drawer-content': '';
} & ContentElementProps;
type DrawerContentProps<T extends ValidComponent = 'div'> = DrawerContentCorvuProps & Partial<DrawerContentSharedElementProps<T>>;
/** Content of the drawer. Can be animated.
 *
 * @data `data-corvu-drawer-content` - Present on every drawer content element.
 * @data `data-open` - Present when the drawer is open.
 * @data `data-closed` - Present when the drawer is closed.
 * @data `data-transitioning` - Present when the drawer is transitioning (opening, closing or snapping).
 * @data `data-opening` - Present when the drawer is in the open transition.
 * @data `data-closing` - Present when the drawer is in the close transition.
 * @data `data-snapping` - Present when the drawer is transitioning after the user stops dragging.
 * @data `data-resizing` - Present when the drawer is transitioning after the size (width/height) changes. Only present if `transitionResize` is set to `true`.
 */
declare const DrawerContent: <T extends ValidComponent = "div">(props: DynamicProps<T, DrawerContentProps<T>>) => JSX.Element;

type DrawerDescriptionCorvuProps = DescriptionCorvuProps;
type DrawerDescriptionSharedElementProps<T extends ValidComponent = 'p'> = DescriptionSharedElementProps<T>;
type DrawerDescriptionElementProps = DrawerDescriptionSharedElementProps & {
    'data-corvu-drawer-description': '';
} & DescriptionElementProps;
type DrawerDescriptionProps<T extends ValidComponent = 'p'> = DrawerDescriptionCorvuProps & Partial<DrawerDescriptionSharedElementProps<T>>;
/** Description element to announce the drawer to accessibility tools.
 *
 * @data `data-corvu-drawer-description` - Present on every drawer description element.
 */
declare const DrawerDescription: <T extends ValidComponent = "p">(props: DynamicProps<T, DrawerDescriptionProps<T>>) => solid_js.JSX.Element;

type DrawerContextValue = {
    /** An array of points to snap to. Can be either percentages of the total drawer height or CSS pixel values. */
    snapPoints: Accessor<Size[]>;
    /** Breakpoints between snap points. */
    breakPoints: Accessor<(Size | null)[]>;
    /** The point to snap to when the drawer opens. */
    defaultSnapPoint: Accessor<Size>;
    /** The active snap point. */
    activeSnapPoint: Accessor<Size>;
    /** Change the active snap point. */
    setActiveSnapPoint: (snapPoint: Size) => void;
    /** The side of the viewport the drawer appears. Is used to properly calculate dragging. */
    side: Accessor<Side>;
    /** Whether the drawer is currently being dragged by the user. */
    isDragging: Accessor<boolean>;
    /** Whether the drawer is currently transitioning to a snap point after the user stopped dragging or the drawer opens/closes. */
    isTransitioning: Accessor<boolean>;
    /** The transition state that the drawer is currently in. */
    transitionState: Accessor<'opening' | 'closing' | 'snapping' | 'resizing' | null>;
    /** How much the drawer is currently open. Can be > 1 depending on your `dampFunction`. */
    openPercentage: Accessor<number>;
    /** The current translate value applied to the drawer. Is the same for every side. */
    translate: Accessor<number>;
    /** After how many milliseconds the cached distance used for the velocity function should reset. */
    velocityCacheReset: Accessor<number>;
    /** Whether the user can skip snap points if the velocity is high enough. */
    allowSkippingSnapPoints: Accessor<boolean>;
    /** Whether the logic to handle dragging on scrollable elements is enabled. */
    handleScrollableElements: Accessor<boolean>;
    /** Whether the drawer watches for size changes and applies a fixed width/height for transitions. */
    transitionResize: Accessor<boolean>;
};
/** Context which exposes various properties to interact with the drawer. Optionally provide a contextId to access a keyed context. */
declare const useDrawerContext: (contextId?: string) => DrawerContextValue;

type DrawerLabelCorvuProps = LabelCorvuProps;
type DrawerLabelSharedElementProps<T extends ValidComponent = 'h2'> = LabelSharedElementProps<T>;
type DrawerLabelElementProps = DrawerLabelSharedElementProps & {
    'data-corvu-drawer-label': '';
} & LabelElementProps;
type DrawerLabelProps<T extends ValidComponent = 'h2'> = DrawerLabelCorvuProps & Partial<DrawerLabelSharedElementProps<T>>;
/** Label element to announce the drawer to accessibility tools.
 *
 * @data `data-corvu-drawer-label` - Present on every drawer label element.
 */
declare const DrawerLabel: <T extends ValidComponent = "h2">(props: DynamicProps<T, DrawerLabelProps<T>>) => solid_js.JSX.Element;

type DrawerOverlayCorvuProps = OverlayCorvuProps;
type DrawerOverlaySharedElementProps<T extends ValidComponent = 'div'> = OverlaySharedElementProps<T>;
type DrawerOverlayElementProps = DrawerOverlaySharedElementProps & {
    'data-closing': '' | undefined;
    'data-opening': '' | undefined;
    'data-resizing': '' | undefined;
    'data-snapping': '' | undefined;
    'data-transitioning': '' | undefined;
    'data-corvu-drawer-overlay': '';
} & OverlayElementProps;
type DrawerOverlayProps<T extends ValidComponent = 'div'> = DrawerOverlayCorvuProps & Partial<DrawerOverlaySharedElementProps<T>>;
/** Component which can be used to create a faded background. Can be animated.
 *
 * @data `data-corvu-drawer-overlay` - Present on every drawer overlay element.
 * @data `data-open` - Present when the drawer is open.
 * @data `data-closed` - Present when the drawer is closed.
 * @data `data-transitioning` - Present when the drawer is transitioning (opening, closing or snapping).
 * @data `data-opening` - Present when the drawer is in the open transition.
 * @data `data-closing` - Present when the drawer is in the close transition.
 * @data `data-snapping` - Present when the drawer is transitioning after the user stops dragging.
 * @data `data-resizing` - Present when the drawer is transitioning after the size (width/height) changes. Only present if `transitionResize` is set to `true`.
 */
declare const DrawerOverlay: <T extends ValidComponent = "div">(props: DynamicProps<T, DrawerOverlayProps<T>>) => solid_js.JSX.Element;

type DrawerRootProps = {
    /**
     * An array of points to snap to. Can be either percentages of the total drawer height or CSS pixel values.
     * @defaultValue `[0, 1]`
     */
    snapPoints?: Size[];
    /**
     * Optionally override the default breakpoints between snap points. This list has to be the length of `snapPoints.length - 1`. Provide `null` for breakpoints you don't want to override.
     */
    breakPoints?: (Size | null)[];
    /**
     * The point to snap to when the drawer opens.
     * @defaultValue `1`
     */
    defaultSnapPoint?: Size;
    /**
     * The active snap point.
     */
    activeSnapPoint?: Size;
    /**
     * Callback fired when the active snap point changes.
     */
    onActiveSnapPointChange?: (activeSnapPoint: Size) => void;
    /**
     * The side of the viewport the drawer appears. Is used to properly calculate dragging.
     * @defaultValue `'bottom'`
     */
    side?: Side;
    /**
     * Function to create a dampened distance if the user tries to drag the drawer away from the last snap point.
     */
    dampFunction?: (distance: number) => number;
    /**
     * Function to calculate the velocity when the user stop dragging. This velocity modifier is used to calculate the point the drawer will snap to after release. You can disable velocity by always returning 1
     */
    velocityFunction?: (distance: number, time: number) => number;
    /**
     * After how many milliseconds the cached distance used for the velocity function should reset.
     * @defaultValue `200`
     */
    velocityCacheReset?: number;
    /**
     * Whether the user can skip snap points if the velocity is high enough.
     * @defaultValue `true`
     */
    allowSkippingSnapPoints?: boolean;
    /**
     * corvu drawers have logic to make dragging and scrolling work together. If you don't want this behavior or if you want to implement something yourself, you can disable it with this property.
     * @defaultValue `true`
     */
    handleScrollableElements?: boolean;
    /**
     * Whether the drawer should watch for size changes and apply a fixed width/height for transitions.
     * @defaultValue `false`
     */
    transitionResize?: boolean;
    /** @hidden */
    children: JSX.Element | ((props: DrawerRootChildrenProps & RootChildrenProps) => JSX.Element);
} & Omit<RootProps, 'children'>;
/** Props that are passed to the Root component children callback. */
type DrawerRootChildrenProps = {
    /** An array of points to snap to. Can be either percentages of the total drawer height or CSS pixel values. */
    snapPoints: Size[];
    /** Breakpoints between snap points. */
    breakPoints: (Size | null)[];
    /** The point to snap to when the drawer opens. */
    defaultSnapPoint: Size;
    /** The active snap point. */
    activeSnapPoint: Size;
    /** Set the current active snap point. */
    setActiveSnapPoint: (snapPoint: Size) => void;
    /** The side of the viewport the drawer appears. Is used to properly calculate dragging. */
    side: Side;
    /** Whether the drawer is currently being dragged by the user. */
    isDragging: boolean;
    /** Whether the drawer is currently transitioning to a snap point after the user stopped dragging or the drawer opens/closes. */
    isTransitioning: boolean;
    /** The transition state that the drawer is currently in. */
    transitionState: 'opening' | 'closing' | 'snapping' | 'resizing' | null;
    /** How much the drawer is currently open. Can be > 1 depending on your `dampFunction`. */
    openPercentage: number;
    /** The current translate value applied to the drawer. Is the same for every side. */
    translate: number;
    /** After how many milliseconds the cached distance used for the velocity function should reset. */
    velocityCacheReset: number;
    /** Whether the user can skip snap points if the velocity is high enough. */
    allowSkippingSnapPoints: boolean;
    /** Whether the logic to handle dragging on scrollable elements is enabled. */
    handleScrollableElements: boolean;
    /** Whether the drawer watches for size changes and applies a fixed width/height for transitions. */
    transitionResize: boolean;
};
/** Context wrapper for the drawer. Is required for every drawer you create. */
declare const DrawerRoot: Component<DrawerRootProps>;

type DrawerTriggerCorvuProps = TriggerCorvuProps;
type DrawerTriggerSharedElementProps<T extends ValidComponent = 'button'> = TriggerSharedElementProps<T>;
type DrawerTriggerElementProps = DrawerTriggerSharedElementProps & {
    'data-corvu-drawer-trigger': '';
} & TriggerElementProps;
type DrawerTriggerProps<T extends ValidComponent = 'button'> = DrawerTriggerCorvuProps & Partial<DrawerTriggerSharedElementProps<T>>;
/** Button that changes the open state of the drawer when clicked.
 *
 * @data `data-corvu-drawer-trigger` - Present on every drawer trigger element.
 * @data `data-open` - Present when the drawer is open.
 * @data `data-closed` - Present when the drawer is closed.
 */
declare const DrawerTrigger: <T extends ValidComponent = "button">(props: DynamicProps<T, DrawerTriggerProps<T>>) => solid_js.JSX.Element;

declare const Drawer: solid_js.Component<DrawerRootProps> & {
    Trigger: <T extends solid_js.ValidComponent = "button">(props: DynamicProps<T, DrawerTriggerProps<T>>) => solid_js.JSX.Element;
    Portal: (props: PortalProps & solid_js.ComponentProps<typeof solid_js_web.Portal>) => solid_js.JSX.Element;
    Overlay: <T extends solid_js.ValidComponent = "div">(props: DynamicProps<T, DrawerOverlayProps<T>>) => solid_js.JSX.Element;
    Content: <T extends solid_js.ValidComponent = "div">(props: DynamicProps<T, DrawerContentProps<T>>) => solid_js.JSX.Element;
    Label: <T extends solid_js.ValidComponent = "h2">(props: DynamicProps<T, DrawerLabelProps<T>>) => solid_js.JSX.Element;
    Description: <T extends solid_js.ValidComponent = "p">(props: DynamicProps<T, DrawerDescriptionProps<T>>) => solid_js.JSX.Element;
    Close: <T extends solid_js.ValidComponent = "button">(props: DynamicProps<T, DrawerCloseProps<T>>) => solid_js.JSX.Element;
    useContext: (contextId?: string) => DrawerContextValue;
    useDialogContext: (contextId?: string) => ContextValue;
};

export { DrawerClose as Close, type DrawerCloseCorvuProps as CloseCorvuProps, type DrawerCloseElementProps as CloseElementProps, type DrawerCloseProps as CloseProps, type DrawerCloseSharedElementProps as CloseSharedElementProps, DrawerContent as Content, type DrawerContentCorvuProps as ContentCorvuProps, type DrawerContentElementProps as ContentElementProps, type DrawerContentProps as ContentProps, type DrawerContentSharedElementProps as ContentSharedElementProps, type DrawerContextValue as ContextValue, DrawerDescription as Description, type DrawerDescriptionCorvuProps as DescriptionCorvuProps, type DrawerDescriptionElementProps as DescriptionElementProps, type DrawerDescriptionProps as DescriptionProps, type DrawerDescriptionSharedElementProps as DescriptionSharedElementProps, DrawerLabel as Label, type DrawerLabelCorvuProps as LabelCorvuProps, type DrawerLabelElementProps as LabelElementProps, type DrawerLabelProps as LabelProps, type DrawerLabelSharedElementProps as LabelSharedElementProps, DrawerOverlay as Overlay, type DrawerOverlayCorvuProps as OverlayCorvuProps, type DrawerOverlayElementProps as OverlayElementProps, type DrawerOverlayProps as OverlayProps, type DrawerOverlaySharedElementProps as OverlaySharedElementProps, DrawerRoot as Root, type DrawerRootChildrenProps as RootChildrenProps, type DrawerRootProps as RootProps, DrawerTrigger as Trigger, type DrawerTriggerCorvuProps as TriggerCorvuProps, type DrawerTriggerElementProps as TriggerElementProps, type DrawerTriggerProps as TriggerProps, type DrawerTriggerSharedElementProps as TriggerSharedElementProps, Drawer as default, useDrawerContext as useContext };