@workday/canvas-kit-react/dist/commonjs/text-input/lib/InputGroup.d.ts

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
export declare const useInputGroupModel: (<TT_Special_Generic>(config?: (Partial<{}> & {} & {}) | undefined) => {
    state: {
        inputRef: React.RefObject<HTMLInputElement>;
    };
    events: {};
}) & import("@workday/canvas-kit-react/common").ModelExtras<{}, {}, {
    inputRef: React.RefObject<HTMLInputElement>;
}, {}, {
    state: {
        inputRef: React.RefObject<HTMLInputElement>;
    };
    events: {};
}>;
export declare const inputGroupInnerStencil: import("@workday/canvas-kit-styling").Stencil<{
    pointerEvents: {
        _: ({ pointerEvents }: {
            insetInlineStart: string;
            insetInlineEnd: string;
            width: string;
            height: string;
            pointerEvents: string;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            pointerEvents: string;
        };
    };
}, {}, {
    /**
     * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
     * on your own.
     */
    insetInlineStart: string;
    /**
     * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
     * on your own.
     */
    insetInlineEnd: string;
    width: "--cnvs-sys-space-x10";
    height: "--cnvs-sys-space-x10";
    /**
     * Some inner input group elements are decoration only and should not have pointer events
     */
    pointerEvents: string;
}, never, never>;
export declare const useInputGroupInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
    state: {
        inputRef: React.RefObject<HTMLInputElement>;
    };
    events: {};
}, {
    readonly ref: (instance: unknown) => void;
    readonly placeholder: "";
}>;
export declare const inputGroupInputStencil: import("@workday/canvas-kit-styling").Stencil<{
    paddingInlineStart: {
        _: ({ paddingInlineStart }: {
            paddingInlineStart: string;
            paddingInlineEnd: string;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            paddingInlineStart: string;
        };
    };
    paddingInlineEnd: {
        _: ({ paddingInlineEnd }: {
            paddingInlineStart: string;
            paddingInlineEnd: string;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            paddingInlineEnd: string;
        };
    };
}, {}, {
    paddingInlineStart: string;
    paddingInlineEnd: string;
}, never, never>;
export declare const useClearButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
    state: {
        inputRef: React.RefObject<HTMLInputElement>;
    };
    events: {};
}, {
    readonly role: "presentation";
    readonly tabIndex: -1;
    readonly icon: import("@workday/design-assets-types").CanvasSystemIcon;
    readonly size: "small";
    readonly onMouseDown: (event: React.MouseEvent) => void;
    readonly onClick: () => void;
}>;
export declare const inputGroupStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
/**
 * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
 * elements. The inner start and end elements are usually icons or icon buttons visually represented
 * inside the input. The `InputGroup` will add padding to the input so the icons/buttons display
 * correctly. This component uses `React.Children.map` and `React.cloneElement` from the
 * [React.Children](https://react.dev/reference/react/Children) API. This means all children must be
 * `InputGroup.*` components. Any other direct children will cause issues. You can add different
 * elements/components inside the {@link InputGroupInnerStart InputGroup.InnerStart} and
 * {@link InputGroupInnerEnd InputGroup.InnerEnd} subcomponents.
 *
 * ```tsx
 * <InputGroup>
 *   <InputGroup.InnerStart as={SystemIcon} pointerEvents="none" icon={searchIcon} />
 *   <InputGroup.Input />
 *   <InputGroup.InnerEnd>
 *     <TertiaryButton tabIndex={-1} icon={xIcon} size="small" />
 *   </InputGroup.InnerEnd>
 * </InputGroup>
 * ```
 */
export declare const InputGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps & Partial<{}> & {} & {}, {
    state: {
        inputRef: React.RefObject<HTMLInputElement>;
    };
    events: {};
}> & {
    /**
     * A component to show inside and at the start of the input. The input's padding will be
     * adjusted by the `InputGroup` to not overlap with this element. Use `width` to adjust the
     * width offset. The width defaults to 40px which is the correct width for icons or icon
     * buttons.
     */
    InnerStart: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
        state: {
            inputRef: React.RefObject<HTMLInputElement>;
        };
        events: {};
    }>;
    /**
     * The input to render. By default, this is a {@link TextInput}. Use the `as` prop to change the
     * component to be rendered.
     */
    Input: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInput").TextInputProps> & {
        ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
    }, Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
        state: {
            inputRef: React.RefObject<HTMLInputElement>;
        };
        events: {};
    }>;
    /**
     * A component to show inside and at the end of the input. The input's padding will be adjusted
     * by the `InputGroup` to not overlap with this element. Use `width` to adjust the width offset.
     * The width defaults to 40px which is the correct width for icons or icon buttons within the
     * input.
     */
    InnerEnd: import("@workday/canvas-kit-react/common").ElementComponentM<"div", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps, {
        state: {
            inputRef: React.RefObject<HTMLInputElement>;
        };
        events: {};
    }>;
    /**
     * A component that can be added to an input group that will clear the input. It will only render
     * when the input has a value and will fade when a value is entered.
     */
    ClearButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").TertiaryButtonProps>, import("@workday/canvas-kit-react/button").TertiaryButtonProps, {
        state: {
            inputRef: React.RefObject<HTMLInputElement>;
        };
        events: {};
    }>;
};
//# sourceMappingURL=InputGroup.d.ts.map