@renderlesskit/react
Version:
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit
95 lines (94 loc) • 4.9 kB
TypeScript
import * as React from "react";
import { InputHTMLProps, InputOptions } from "reakit";
import { NumberInputStateReturn } from "./NumberInputState";
export declare type NumberInputOptions = InputOptions & Pick<Partial<NumberInputStateReturn>, "keepWithinRange"> & Pick<NumberInputStateReturn, "min" | "max" | "step" | "updateValue" | "increment" | "decrement" | "value" | "valueAsNumber" | "isOutOfRange" | "setCastedValue" | "inputRef" | "isInvalid" | "isDisabled" | "isReadOnly" | "isRequired"> & {
/**
* This controls the value update when you blur out of the input.
* - If `true` and the value is greater than `max`, the value will be reset to `max`
* - Else, the value remains the same.
*
* @default true
*/
clampValueOnBlur?: boolean;
/**
* If `true`, the input's value will change based on mouse wheel
*
* @default true
*/
allowMouseWheel?: boolean;
};
export declare type NumberInputHTMLProps = InputHTMLProps;
export declare type NumberInputProps = NumberInputOptions & NumberInputHTMLProps;
export declare const useNumberInput: {
(options?: NumberInputOptions | undefined, htmlProps?: InputHTMLProps | undefined, unstable_ignoreUseOptions?: boolean | undefined): InputHTMLProps;
unstable_propsAreEqual: (prev: import("reakit").RoleOptions & {
disabled?: boolean | undefined;
focusable?: boolean | undefined;
} & Pick<Partial<NumberInputStateReturn>, "keepWithinRange"> & Pick<NumberInputStateReturn, "step" | "value" | "isDisabled" | "isReadOnly" | "max" | "min" | "isRequired" | "increment" | "decrement" | "isInvalid" | "valueAsNumber" | "isOutOfRange" | "inputRef" | "updateValue" | "setCastedValue"> & {
/**
* This controls the value update when you blur out of the input.
* - If `true` and the value is greater than `max`, the value will be reset to `max`
* - Else, the value remains the same.
*
* @default true
*/
clampValueOnBlur?: boolean | undefined;
/**
* If `true`, the input's value will change based on mouse wheel
*
* @default true
*/
allowMouseWheel?: boolean | undefined;
} & React.HTMLAttributes<any> & React.RefAttributes<any> & {
wrapElement?: ((element: React.ReactNode) => React.ReactNode) | undefined;
} & {
disabled?: boolean | undefined;
} & React.InputHTMLAttributes<any>, next: import("reakit").RoleOptions & {
disabled?: boolean | undefined;
focusable?: boolean | undefined;
} & Pick<Partial<NumberInputStateReturn>, "keepWithinRange"> & Pick<NumberInputStateReturn, "step" | "value" | "isDisabled" | "isReadOnly" | "max" | "min" | "isRequired" | "increment" | "decrement" | "isInvalid" | "valueAsNumber" | "isOutOfRange" | "inputRef" | "updateValue" | "setCastedValue"> & {
/**
* This controls the value update when you blur out of the input.
* - If `true` and the value is greater than `max`, the value will be reset to `max`
* - Else, the value remains the same.
*
* @default true
*/
clampValueOnBlur?: boolean | undefined;
/**
* If `true`, the input's value will change based on mouse wheel
*
* @default true
*/
allowMouseWheel?: boolean | undefined;
} & React.HTMLAttributes<any> & React.RefAttributes<any> & {
wrapElement?: ((element: React.ReactNode) => React.ReactNode) | undefined;
} & {
disabled?: boolean | undefined;
} & React.InputHTMLAttributes<any>) => boolean;
__keys: readonly any[];
__useOptions: (options: NumberInputOptions, htmlProps: InputHTMLProps) => NumberInputOptions;
};
export declare const NumberInput: import("../system").Component<"input", import("reakit").RoleOptions & {
disabled?: boolean | undefined;
focusable?: boolean | undefined;
} & Pick<Partial<NumberInputStateReturn>, "keepWithinRange"> & Pick<NumberInputStateReturn, "step" | "value" | "isDisabled" | "isReadOnly" | "max" | "min" | "isRequired" | "increment" | "decrement" | "isInvalid" | "valueAsNumber" | "isOutOfRange" | "inputRef" | "updateValue" | "setCastedValue"> & {
/**
* This controls the value update when you blur out of the input.
* - If `true` and the value is greater than `max`, the value will be reset to `max`
* - Else, the value remains the same.
*
* @default true
*/
clampValueOnBlur?: boolean | undefined;
/**
* If `true`, the input's value will change based on mouse wheel
*
* @default true
*/
allowMouseWheel?: boolean | undefined;
} & React.HTMLAttributes<any> & React.RefAttributes<any> & {
wrapElement?: ((element: React.ReactNode) => React.ReactNode) | undefined;
} & {
disabled?: boolean | undefined;
} & React.InputHTMLAttributes<any>>;