@molecule/app-inline-edit-react 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +124 -0
  2. package/package.json +14 -8
package/README.md ADDED
@@ -0,0 +1,124 @@
1
+ <!--
2
+ AUTO-GENERATED — DO NOT EDIT THIS FILE.
3
+ Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
4
+ Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
5
+ To change this document, edit the module-level JSDoc in src/index.ts.
6
+ Generated: 2026-08-04T01:51:07.624Z
7
+ -->
8
+
9
+ # @molecule/app-inline-edit-react
10
+
11
+ > **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
12
+ > It is written to be read by coding agents as much as by people, and is generated from this
13
+ > package's source — edit `src/index.ts` JSDoc, not this file.
14
+
15
+ Click-to-edit inline field. Renders the value as text; on click (or
16
+ Tab + Enter) swaps in an `<Input>` or `<Textarea>` with Save/Cancel
17
+ buttons. Enter submits (Cmd/Ctrl+Enter for the textarea variant),
18
+ Escape cancels.
19
+
20
+ ## Quick Start
21
+
22
+ ```tsx
23
+ import { InlineEdit } from '@molecule/app-inline-edit-react'
24
+
25
+ const deal = { title: 'Acme renewal' }
26
+
27
+ <InlineEdit
28
+ value={deal.title}
29
+ onSubmit={async (next) => { console.log('save', next) }}
30
+ placeholder="Enter deal title"
31
+ />
32
+ ```
33
+
34
+ ## Type
35
+
36
+ `feature`
37
+
38
+ ## Installation
39
+
40
+ ```bash
41
+ npm install @molecule/app-inline-edit-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
42
+ npm install -D @types/react
43
+ ```
44
+
45
+ ## API
46
+
47
+ ### Interfaces
48
+
49
+ #### `InlineEditProps`
50
+
51
+ Props for {@link InlineEdit}.
52
+
53
+ ```typescript
54
+ interface InlineEditProps {
55
+ /** Current value. */
56
+ value: string
57
+ /** Called when the user commits a new value. Return a Promise to block the UI while saving. */
58
+ onSubmit: (next: string) => void | Promise<void>
59
+ /** Render mode for the editor. */
60
+ variant?: 'input' | 'textarea'
61
+ /** Renderer for the read state — defaults to plain text. */
62
+ renderRead?: (value: string) => ReactNode
63
+ /** Placeholder when value is empty. */
64
+ placeholder?: string
65
+ /** Extra classes. */
66
+ className?: string
67
+ }
68
+ ```
69
+
70
+ ### Functions
71
+
72
+ #### `InlineEdit(props)`
73
+
74
+ Click-to-edit text. Renders the value as text by default; on click
75
+ (or focus via tab + Enter), swaps in an `<Input>` / `<Textarea>` for
76
+ inline editing. Enter submits, Escape cancels.
77
+
78
+ Common in titles, descriptions, table cells where modal-based forms
79
+ would be heavyweight.
80
+
81
+ ```typescript
82
+ function InlineEdit({
83
+ value,
84
+ onSubmit,
85
+ variant = 'input',
86
+ renderRead,
87
+ placeholder,
88
+ className,
89
+ }: InlineEditProps): ReactNode
90
+ ```
91
+
92
+ - `props` — Component props (see {@link InlineEditProps}).
93
+
94
+ ## Injection Notes
95
+
96
+ ### Requirements
97
+
98
+ Peer dependencies:
99
+
100
+ - `@molecule/app-react` ^1.0.1
101
+ - `@molecule/app-ui` ^1.0.1
102
+ - `@molecule/app-ui-react` ^1.0.1
103
+ - `react` ^18.0.0 || ^19.0.0
104
+
105
+ ### Runtime Dependencies
106
+
107
+ - `@molecule/app-react`
108
+ - `@molecule/app-ui`
109
+ - `@molecule/app-ui-react`
110
+ - `react`
111
+
112
+ - Requires `@molecule/app-react`'s `I18nProvider` (`useTranslation()`
113
+ THROWS without it) and a bonded ClassMap; button labels come from the
114
+ `@molecule/app-locales-inline-edit` companion bond.
115
+ - Return a Promise from `onSubmit` to disable the buttons while saving.
116
+ If `onSubmit` REJECTS, the editor stays open with the draft intact but
117
+ the error is not displayed — catch and surface errors inside your
118
+ `onSubmit` (toast, form error, etc.).
119
+ - The draft re-syncs from `value` whenever the prop changes, including
120
+ mid-edit — avoid mutating `value` while the user is typing.
121
+
122
+ ## Translations
123
+
124
+ Translation strings are provided by `@molecule/app-locales-inline-edit`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@molecule/app-inline-edit-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Click-to-edit text + textarea + select with Save/Cancel",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -17,7 +17,8 @@
17
17
  }
18
18
  },
19
19
  "files": [
20
- "dist"
20
+ "dist",
21
+ "README.md"
21
22
  ],
22
23
  "keywords": [
23
24
  "molecule",
@@ -25,16 +26,21 @@
25
26
  "react"
26
27
  ],
27
28
  "license": "Apache-2.0",
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "https://github.com/molecule-dev/molecule.git",
32
+ "directory": "packages/app/features/inline-edit-react"
33
+ },
28
34
  "peerDependencies": {
29
- "@molecule/app-react": "^1.0.0",
30
- "@molecule/app-ui": "^1.0.0",
31
- "@molecule/app-ui-react": "^1.0.0",
35
+ "@molecule/app-react": "^1.0.1",
36
+ "@molecule/app-ui": "^1.0.1",
37
+ "@molecule/app-ui-react": "^1.0.1",
32
38
  "react": "^18.0.0 || ^19.0.0"
33
39
  },
34
40
  "devDependencies": {
35
- "@molecule/app-react": "1.0.0",
36
- "@molecule/app-ui": "1.0.0",
37
- "@molecule/app-ui-react": "1.0.0",
41
+ "@molecule/app-react": "1.0.1",
42
+ "@molecule/app-ui": "1.0.1",
43
+ "@molecule/app-ui-react": "1.0.1",
38
44
  "@types/node": "26.1.2",
39
45
  "@types/react": "19.2.17",
40
46
  "@types/react-dom": "19.2.3",