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

A capability of UI to be disabled.

/// <reference types="react" />
import { Factory, CssKnownProps, CssRule, CssStyleCollection, CssVars } from '@cssfn/core';
import { SemanticProps } from '@reusable-ui/semantics';
import { AccessibilityProps } from '@reusable-ui/accessibilities';
export interface DisableableVars {
    filter: any;
    anim: any;
}
export declare const ifEnabled: (styles: CssStyleCollection) => CssRule;
export declare const ifEnabling: (styles: CssStyleCollection) => CssRule;
export declare const ifDisabling: (styles: CssStyleCollection) => CssRule;
export declare const ifDisabled: (styles: CssStyleCollection) => CssRule;
export declare const ifEnable: (styles: CssStyleCollection) => CssRule;
export declare const ifDisable: (styles: CssStyleCollection) => CssRule;
export declare const ifEnablingDisable: (styles: CssStyleCollection) => CssRule;
export interface DisableableStuff {
    disableableRule: Factory<CssRule>;
    disableableVars: CssVars<DisableableVars>;
}
export interface DisableableConfig {
    filterDisable?: CssKnownProps['filter'];
    animEnable?: CssKnownProps['animation'];
    animDisable?: CssKnownProps['animation'];
}
/**
 * Adds a capability of UI to be disabled.
 * @param config  A configuration of `disableableRule`.
 * @returns A `DisableableStuff` represents a disableable state.
 */
export declare const usesDisableable: (config?: DisableableConfig) => DisableableStuff;
export interface DisableableProps extends Partial<Pick<AccessibilityProps, 'enabled' | 'inheritEnabled'>> {
}
export declare const enum DisableableState {
    Disabled = 0,
    Disabling = 1,
    Enabling = 2,
    Enabled = 3
}
export interface DisableableApi<TElement extends Element = HTMLElement> {
    enabled: boolean;
    disabled: boolean;
    state: DisableableState;
    class: string | null;
    props: {
        disabled: true;
    } | {
        'aria-disabled': true;
    } | null;
    handleAnimationStart: React.AnimationEventHandler<TElement>;
    handleAnimationEnd: React.AnimationEventHandler<TElement>;
    handleAnimationCancel: React.AnimationEventHandler<TElement>;
}
export declare const useDisableable: <TElement extends Element = HTMLElement>(props: DisableableProps & SemanticProps) => DisableableApi<TElement>;