@neo4j-ndl/react/lib/types/inline-edit/InlineEdit.d.ts

React implementation of Neo4j Design System

/**
 *
 *  Copyright (c) "Neo4j"
 *  Neo4j Sweden AB [http://neo4j.com]
 *
 *  This file is part of Neo4j.
 *
 *  Neo4j is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import { type ComponentPropsWithoutRef, type InputHTMLAttributes, type ReactNode } from 'react';
import { type TooltipObjectProps } from '../_common/input/types';
import { type PolymorphicForwardRefExoticComponent } from '../_common/types';
import { Typography } from '../typography';
import { type TypographyVariants } from '../typography/types';
export interface InlineEditProps {
    /** Label text */
    label?: ReactNode;
    /**
     * The variant of the typography component
     * @default subheading-medium
     */
    variant?: TypographyVariants;
    /**
     * The default user input/value.
     * This value is updated and saved by onConfirm.
     */
    defaultValue: string;
    /**
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Error message to be displayed
     * This can also be provided by the validation callback
     * @default undefined
     */
    errorText?: ReactNode;
    /**
     * If edit pencil icon will be visible
     * @default false
     */
    hasEditIcon?: boolean;
    /**
     * If the input is in editing mode
     * Used in a stateless inline edit
     * @default undefined
     */
    isEditing?: boolean;
    /** Callback when confirm icon button is pressed */
    onConfirm?: (value: string) => void;
    /** Callback when cancel icon button is pressed */
    onCancel?: () => void;
    /**
     * If the input should close on blur
     * @default false
     */
    isCancellingOnBlur?: boolean;
    /**
     * Custom validation callback.
     * If provided:
     * 2. The string value will be displayed if the callback returns a string
     * 3. The onConfirm callback will be called if the callback returns `true`
     */
    validate?: (value: string) => Promise<true | string> | true | string;
    /** Pass props to the underlying Tip component in error states (use with caution) */
    tooltipProps?: TooltipObjectProps;
    /** Edit's input props */
    inputProps?: InputHTMLAttributes<HTMLInputElement>;
    /** View mode Typography's props */
    typographyProps?: ComponentPropsWithoutRef<typeof Typography>;
    /** Placeholder text for when the input is empty */
    placeholder?: string;
}
export declare const InlineEdit: PolymorphicForwardRefExoticComponent<'div', InlineEditProps>;