# Rename Documentation

## Installation

```bash
jsrepo add ui/rename
```

## Components

### Root

Inline rename component that toggles between a text view and an input for editing.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| id | string | - | false | false | The unique id for the underlying element and input. |
| this | "a" | "abbr" | "address" | "b" | "bdi" | "bdo" | "blockquote" | "cite" | "code" | "data" | "dd" | "del" | "dfn" | "dt" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hgroup" | "i" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "mark" | "nav" | "noscript" | "p" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "section" | "small" | "span" | "strong" | "sub" | "summary" | "sup" | "time" | "title" | "u" | "var" | - | false | false | The tag name to render in view mode. |
| mode | "edit" | "view" | view | false | true | The current mode of the component. |
| blurBehavior | "exit" | "none" | - | false | false | What to do on input blur in edit mode. |
| fallbackSelectionBehavior | "start" | "end" | "all" | end | false | false | How should the selection be set on focus when it cannot be detected. |
| value | string | - | true | true | The accepted value of the input. |
| class | string | - | false | false | Classes applied to both input and text. |
| inputClass | string | - | false | false | Classes applied to the input element. |
| textClass | string | - | false | false | Classes applied to the text element. |
| onSave | (value: string) => boolean | Promise<boolean> | - | false | false | Called when saving. Return true to accept the value, false to keep invalid state. |
| onCancel | () => void | Promise<void> | - | false | false | Called when cancelling edit mode. |
| validate | (value: string) => boolean | () => true | false | false | Validation function used to determine invalid state while editing. |

### Provider

Context provider enabling external Edit/Cancel/Save buttons to control the current Rename input.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|


### Edit

Button that switches the current Rename input into edit mode.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| child | Snippet<[{ edit: () => void }]> | - | false | false | Custom component to render instead of the default button. |

### Cancel

Button that cancels editing and returns to view mode.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| child | Snippet<[{ cancel: () => void }]> | - | false | false | Custom component to render instead of the default button. |

### Save

Button that triggers save on the current Rename input.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| child | Snippet<[{ save: () => void }]> | - | false | false | Custom component to render instead of the default button. |