Inline edit

Exports

Import these components from @mbsw/ui.

InlineEdit

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

InlineEdit

InlineEdit props
Prop	Type	Requirement
`actions`	`ReactNode`	Optional
`cancelLabel`	`string`	Optional
`clearLabel`	`string`	Optional
`defaultEditing`	`boolean`	Optional
`defaultValue`	`string`	Optional
`disabled`	`boolean`	Optional
`editLabel`	`string`	Optional
`editing`	`boolean`	Optional
`invalid`	`boolean`	Optional
`line`	`'single' \| 'multi'`	Optional
`onCancel`	`((value: string) => void)`	Optional
`onCommit`	`((value: string) => void)`	Optional
`onEditingChange`	`((editing: boolean) => void)`	Optional
`onValueChange`	`((value: string) => void)`	Optional
`placeholder`	`string`	Optional
`size`	`'lg' \| 'md' \| 'sm'`	Optional
`value`	`string`	Optional
`variant`	`'default' \| 'semibold'`	Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type HTMLAttributes, type ReactNode } from 'react';

export type InlineEditSize = 'lg' | 'md' | 'sm';

export type InlineEditLine = 'single' | 'multi';

export type InlineEditVariant = 'default' | 'semibold';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type InlineEditProps = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> & DataAttributes & {
    actions?: ReactNode;
    cancelLabel?: string;
    clearLabel?: string;
    defaultEditing?: boolean;
    defaultValue?: string;
    disabled?: boolean;
    editLabel?: string;
    editing?: boolean;
    invalid?: boolean;
    line?: InlineEditLine;
    onCancel?: (value: string) => void;
    onCommit?: (value: string) => void;
    onEditingChange?: (editing: boolean) => void;
    onValueChange?: (value: string) => void;
    placeholder?: string;
    size?: InlineEditSize;
    value?: string;
    variant?: InlineEditVariant;
};

export declare const InlineEdit: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & DataAttributes & {
    actions?: ReactNode;
    cancelLabel?: string;
    clearLabel?: string;
    defaultEditing?: boolean;
    defaultValue?: string;
    disabled?: boolean;
    editLabel?: string;
    editing?: boolean;
    invalid?: boolean;
    line?: InlineEditLine;
    onCancel?: (value: string) => void;
    onCommit?: (value: string) => void;
    onEditingChange?: (editing: boolean) => void;
    onValueChange?: (value: string) => void;
    placeholder?: string;
    size?: InlineEditSize;
    value?: string;
    variant?: InlineEditVariant;
} & import("react").RefAttributes<HTMLDivElement>>;