@yamada-ui/react/dist/types/components/editable/use-editable.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { PropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import { FieldProps } from "../field/field.js";
import * as react890 from "react";

//#region src/components/editable/use-editable.d.ts
interface EditableContext extends Omit<UseEditableReturn, "getRootProps" | "onCancel" | "onEdit" | "onSubmit" | "value"> {}
declare const EditableContext: react890.Context<EditableContext>, useEditableContext: () => EditableContext;
interface UseEditableProps extends FieldProps {
  /**
   * The initial value of the Editable in both edit & preview mode.
   */
  defaultValue?: string;
  /**
   * The placeholder text when the value is empty.
   */
  placeholder?: string;
  /**
   * If `true`, the read only view, has a `tabIndex` set to `0`
   * so it can receive focus via the keyboard or click.
   *
   * @default true
   */
  previewFocusable?: boolean;
  /**
   * If `true`, the input's text will be highlighted on focus.
   *
   * @default true
   */
  selectAllOnFocus?: boolean;
  /**
   * If `true`, the Editable will start with edit mode by default.
   */
  startWithEditView?: boolean;
  /**
   * If `true`, it'll update the value onBlur and turn off the edit mode.
   *
   * @default true
   */
  submitOnBlur?: boolean;
  /**
   * The value of the Editable in both edit & preview mode.
   */
  value?: string;
  /**
   * Callback invoked when user cancels input with the `Esc` key.
   * It provides the last confirmed value as argument.
   */
  onCancel?: (preValue: string) => void;
  /**
   * A callback invoked when user changes input.
   */
  onChange?: (value: string) => void;
  /**
   * A callback invoked once the user enters edit mode.
   */
  onEdit?: () => void;
  /**
   * A callback invoked when user confirms value with `enter` key or by blurring input.
   */
  onSubmit?: (value: string) => void;
}
declare const useEditable: (props?: UseEditableProps) => {
  editing: boolean;
  value: string;
  getCancelProps: PropGetter<"button", undefined, undefined>;
  getControlProps: PropGetter<"div", undefined, undefined>;
  getEditProps: PropGetter<"button", undefined, undefined>;
  getInputProps: PropGetter<"input", undefined, undefined>;
  getPreviewProps: PropGetter<"span", undefined, undefined>;
  getRootProps: PropGetter<"div", undefined, undefined>;
  getSubmitProps: PropGetter<"button", undefined, undefined>;
  getTextareaProps: PropGetter<"textarea", undefined, undefined>;
  onCancel: () => void;
  onEdit: () => void;
  onSubmit: () => void;
};
type UseEditableReturn = ReturnType<typeof useEditable>;
//#endregion
export { EditableContext, UseEditableProps, UseEditableReturn, useEditable, useEditableContext };
//# sourceMappingURL=use-editable.d.ts.map