@engie-group/fluid-design-system-react/lib/components/input-search/NJInputSearch.d.ts

Fluid Design System React

import { Scale } from '@engie-group/fluid-types';
import React, { HTMLAttributes, InputHTMLAttributes, RefObject } from 'react';
import { DistributiveOmit } from '../../utils/typeHelpers';
import { NJButtonProps } from '../button/NJButton';
type InputSearchRefs = {
    /**
     * Ref to the reset button element, displayed when the input is filled.
     */
    resetButtonRef?: RefObject<HTMLButtonElement>;
    /**
     * Ref to the button element, displayed next to the input.
     */
    buttonRef?: RefObject<HTMLButtonElement & HTMLAnchorElement>;
};
export type NJInputSearchProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & Pick<InputHTMLAttributes<HTMLInputElement>, 'value' | 'placeholder'> & InputSearchRefs & {
    /**
     * Function called on input change
     * @param e event
     * @param value value
     */
    onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>, value: NJInputSearchProps['value']) => void;
    /**
     * Return search value on enter
     * */
    onEnterKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>, value: NJInputSearchProps['value']) => void;
    /**
     * Options if you want to show a button next to the search input
     */
    buttonOptions?: DistributiveOmit<NJButtonProps, 'scale' | 'variant' | 'emphasis' | 'iconClassName' | 'icon'>;
    /**
     * Size of the Search component
     */
    scale?: Extract<Scale, 'sm' | 'md' | 'lg' | 'xl'>;
    /**
     * Whether the input is disabled
     */
    disabled?: boolean;
};
export declare const NJInputSearch: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder"> & InputSearchRefs & {
    /**
     * Function called on input change
     * @param e event
     * @param value value
     */
    onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>, value: NJInputSearchProps["value"]) => void;
    /**
     * Return search value on enter
     * */
    onEnterKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>, value: NJInputSearchProps["value"]) => void;
    /**
     * Options if you want to show a button next to the search input
     */
    buttonOptions?: DistributiveOmit<NJButtonProps, "scale" | "variant" | "emphasis" | "iconClassName" | "icon">;
    /**
     * Size of the Search component
     */
    scale?: Extract<Scale, "sm" | "md" | "lg" | "xl">;
    /**
     * Whether the input is disabled
     */
    disabled?: boolean;
} & React.RefAttributes<HTMLInputElement>>;
export {};