@reusable-ui/interactable/dist/interactable.d.ts

Adds an interactive feel to a UI.

import { default as React } from 'react';
import { Factory, CssKnownProps, CssRule, CssStyleCollection, CssVars } from '@cssfn/core';
import { AccessibilityProps } from '@reusable-ui/accessibilities';
import { FocusableApi } from '@reusable-ui/focusable';
export interface InteractableVars {
    filter: any;
    anim: any;
}
export declare const ifArrived: (styles: CssStyleCollection) => CssRule;
export declare const ifArriving: (styles: CssStyleCollection) => CssRule;
export declare const ifLeaving: (styles: CssStyleCollection) => CssRule;
export declare const ifLeaved: (styles: CssStyleCollection) => CssRule;
export declare const ifArrive: (styles: CssStyleCollection) => CssRule;
export declare const ifLeave: (styles: CssStyleCollection) => CssRule;
export declare const ifArriveLeaving: (styles: CssStyleCollection) => CssRule;
export interface InteractableStuff {
    interactableRule: Factory<CssRule>;
    interactableVars: CssVars<InteractableVars>;
}
export interface InteractableConfig {
    filterArrive?: CssKnownProps['filter'];
    animArrive?: CssKnownProps['animation'];
    animLeave?: CssKnownProps['animation'];
}
/**
 * Adds an interactive feel to a UI.
 * @param config  A configuration of `interactableRule`.
 * @returns A `InteractableStuff` represents an interactable state.
 */
export declare const usesInteractable: (config?: InteractableConfig) => InteractableStuff;
export interface InteractableProps extends Partial<Pick<AccessibilityProps, 'enabled' | 'inheritEnabled'>> {
    arrived?: boolean;
}
export declare const enum InteractableState {
    /**
     * Note: We use `Leaved` instead of `Left` to distinguish between `Left|Right|Top|Bottom` vs verb-3 of `Leave` => `Left`.
     */
    Leaved = 0,
    Leaving = 1,
    Arriving = 2,
    Arrived = 3
}
export interface InteractableApi<TElement extends Element = HTMLElement> {
    arrived: boolean;
    state: InteractableState;
    class: string | null;
    handleMouseEnter: React.MouseEventHandler<TElement>;
    handleMouseLeave: React.MouseEventHandler<TElement>;
    handleAnimationStart: React.AnimationEventHandler<TElement>;
    handleAnimationEnd: React.AnimationEventHandler<TElement>;
    handleAnimationCancel: React.AnimationEventHandler<TElement>;
}
export declare const useInteractable: <TElement extends Element = HTMLElement>(props: InteractableProps, focusableApi: FocusableApi<TElement>) => InteractableApi<TElement>;