@itwin/itwinui-react
Version:
A react component library for iTwinUI
46 lines (45 loc) • 2.27 kB
TypeScript
import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import type { InputProps } from '../Input/Input.js';
/**
* Input component with various additional decorations.
* You can add icons, buttons and other various subcomponents to it.
*
* If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
*
* @example
* <InputWithDecorations>
* <InputWithDecorations.Input />
* <InputWithDecorations.Icon>
* <SvgAdd />
* </InputWithDecorations.Icon>
* </InputWithDecorations>
*/
export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | keyof import("../../utils/index.js").InputFlexContainerProps> & import("../../utils/index.js").InputFlexContainerProps & {
as?: "div" | undefined;
}> & {
/**
* Subcomponent to include input in your InputWithDecorations
*/
Input: PolymorphicForwardRefComponent<"input", InputProps>;
/**
* Subcomponent to include button in your InputWithDecorations
*
* Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
* in `InputWithDecorations`.
*/
Button: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
} & {
as?: "button" | undefined;
}>;
/**
* Subcomponent to include button in your InputWithDecorations.
*
* Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
* in `InputWithDecorations`.
*/
Icon: PolymorphicForwardRefComponent<"span", Omit<import("../Icon/Icon.js").IconProps, "padded"> & {
padded?: import("../Icon/Icon.js").IconProps["padded"];
}>;
};