@texaryn/react 0.1.0-alpha.0 → 0.1.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.
- package/CHANGELOG.md +39 -0
- package/README.md +288 -0
- package/dist/components/ErrorSummary.d.ts +2 -0
- package/dist/components/ErrorSummary.d.ts.map +1 -0
- package/dist/components/ErrorSummary.js +13 -0
- package/dist/components/ErrorSummary.js.map +1 -0
- package/dist/components/FieldErrors.d.ts +8 -0
- package/dist/components/FieldErrors.d.ts.map +1 -0
- package/dist/components/FieldErrors.js +10 -0
- package/dist/components/FieldErrors.js.map +1 -0
- package/dist/hooks/use-field.d.ts +1 -0
- package/dist/hooks/use-field.d.ts.map +1 -1
- package/dist/hooks/use-field.js +4 -2
- package/dist/hooks/use-field.js.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/props/field-props.d.ts +4 -2
- package/dist/props/field-props.d.ts.map +1 -1
- package/dist/props/field-props.js +13 -12
- package/dist/props/field-props.js.map +1 -1
- package/dist/widgets/Checkbox.d.ts.map +1 -1
- package/dist/widgets/Checkbox.js +3 -3
- package/dist/widgets/Checkbox.js.map +1 -1
- package/dist/widgets/NumberInput.d.ts.map +1 -1
- package/dist/widgets/NumberInput.js +3 -3
- package/dist/widgets/NumberInput.js.map +1 -1
- package/dist/widgets/Select.d.ts.map +1 -1
- package/dist/widgets/Select.js +3 -3
- package/dist/widgets/Select.js.map +1 -1
- package/dist/widgets/TextInput.d.ts.map +1 -1
- package/dist/widgets/TextInput.js +3 -3
- package/dist/widgets/TextInput.js.map +1 -1
- package/dist/widgets/Textarea.d.ts.map +1 -1
- package/dist/widgets/Textarea.js +3 -3
- package/dist/widgets/Textarea.js.map +1 -1
- package/package.json +5 -4
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# @texaryn/react
|
|
2
|
+
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9bcc0b2: Apply the `placeholder` UI hint. The compiler now carries it onto the field node and `getInputProps` emits it, so text, number and textarea widgets render the placeholder that the hint has documented since the first alpha.
|
|
8
|
+
- Updated dependencies [9bcc0b2]
|
|
9
|
+
- @texaryn/core@0.1.1
|
|
10
|
+
|
|
11
|
+
## 0.1.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- afa1f81: Add display-policy-aware error presentation. Core runtime computes `showErrors` per node (`touched && invalid`) and maintains a reactive `visibleErrors` aggregate. React prop getters set `aria-invalid` and error-linked `aria-describedby` only when `showErrors` is true. New `FieldErrors` component replaces inline error rendering in all default widgets. New standalone `ErrorSummary` component subscribes to `visibleErrors`.
|
|
16
|
+
- 18f74ea: First public alpha: JSON Schema to React form pipeline.
|
|
17
|
+
|
|
18
|
+
Schema evaluation, IR compiler, headless runtime, React bindings, default widgets, and prop getters.
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies [afa1f81]
|
|
23
|
+
- Updated dependencies [e8807f4]
|
|
24
|
+
- Updated dependencies [65d58b2]
|
|
25
|
+
- Updated dependencies [18f74ea]
|
|
26
|
+
- @texaryn/core@0.1.0
|
|
27
|
+
|
|
28
|
+
## 0.1.0-alpha.0
|
|
29
|
+
|
|
30
|
+
### Minor Changes
|
|
31
|
+
|
|
32
|
+
- 18f74ea: First public alpha: JSON Schema to React form pipeline.
|
|
33
|
+
|
|
34
|
+
Schema evaluation, IR compiler, headless runtime, React bindings, default widgets, and prop getters.
|
|
35
|
+
|
|
36
|
+
### Patch Changes
|
|
37
|
+
|
|
38
|
+
- Updated dependencies [18f74ea]
|
|
39
|
+
- @texaryn/core@0.1.0-alpha.0
|
package/README.md
ADDED
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
# @texaryn/react
|
|
2
|
+
|
|
3
|
+
React bindings, hooks, prop getters, renderer components, and default widgets for Texaryn.
|
|
4
|
+
|
|
5
|
+
> Status: pre-1.0. Public APIs may change before 1.0.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @texaryn/core @texaryn/schema-json @texaryn/react react react-dom
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`@texaryn/react` requires React 18 or newer.
|
|
14
|
+
|
|
15
|
+
## Quick start
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { createRoot } from 'react-dom/client'
|
|
19
|
+
import { createJsonSchemaAdapter } from '@texaryn/schema-json'
|
|
20
|
+
import {
|
|
21
|
+
FormProvider,
|
|
22
|
+
FormRoot,
|
|
23
|
+
createDefaultRegistry,
|
|
24
|
+
useForm,
|
|
25
|
+
} from '@texaryn/react'
|
|
26
|
+
|
|
27
|
+
const schema = {
|
|
28
|
+
$schema: 'https://json-schema.org/draft/2020-12/schema',
|
|
29
|
+
type: 'object',
|
|
30
|
+
title: 'Profile',
|
|
31
|
+
properties: {
|
|
32
|
+
name: { type: 'string', title: 'Name' },
|
|
33
|
+
age: { type: 'integer', title: 'Age', minimum: 18 },
|
|
34
|
+
},
|
|
35
|
+
required: ['name'],
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const adapter = await createJsonSchemaAdapter(schema)
|
|
39
|
+
const registry = createDefaultRegistry()
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
const form = useForm(adapter, {
|
|
43
|
+
initialData: {
|
|
44
|
+
name: '',
|
|
45
|
+
age: 18,
|
|
46
|
+
},
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<FormProvider value={form.runtime}>
|
|
51
|
+
<FormRoot registry={registry} />
|
|
52
|
+
<pre>{JSON.stringify(form.data, null, 2)}</pre>
|
|
53
|
+
</FormProvider>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
createRoot(document.getElementById('root')!).render(<App />)
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
React observes the Texaryn runtime. It does not evaluate JSON Schema or own the canonical form state.
|
|
61
|
+
|
|
62
|
+
## Main APIs
|
|
63
|
+
|
|
64
|
+
### `useForm(port, options?)`
|
|
65
|
+
|
|
66
|
+
Creates a Texaryn runtime for a React component and subscribes to its top-level stores.
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
const form = useForm(port, {
|
|
70
|
+
initialData,
|
|
71
|
+
hints,
|
|
72
|
+
onSubmit,
|
|
73
|
+
})
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
It returns:
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
interface UseFormReturn {
|
|
80
|
+
runtime: FormRuntime
|
|
81
|
+
document: UIDocument
|
|
82
|
+
data: unknown
|
|
83
|
+
submission: SubmissionState
|
|
84
|
+
dispatch(command: Command): void
|
|
85
|
+
getNodeState(nodeId: NodeId): NodeState | undefined
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
The runtime is destroyed automatically when the hook unmounts.
|
|
90
|
+
|
|
91
|
+
### `FormProvider`
|
|
92
|
+
|
|
93
|
+
Provides a `FormRuntime` to renderer components and hooks:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<FormProvider value={form.runtime}>
|
|
97
|
+
<FormRoot registry={registry} />
|
|
98
|
+
</FormProvider>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
`useFormContext()` returns the current runtime.
|
|
102
|
+
|
|
103
|
+
### `FormRoot`
|
|
104
|
+
|
|
105
|
+
Renders the root node of the current `UIDocument` using a renderer registry:
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
<FormRoot registry={registry} />
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### `NodeRenderer`
|
|
112
|
+
|
|
113
|
+
Renders an individual semantic UI node and resolves the matching widget through the registry.
|
|
114
|
+
|
|
115
|
+
## Field hooks
|
|
116
|
+
|
|
117
|
+
The package exports:
|
|
118
|
+
|
|
119
|
+
- `useField`
|
|
120
|
+
- `useFieldArray`
|
|
121
|
+
- `useStore`
|
|
122
|
+
|
|
123
|
+
These hooks bridge React subscriptions to the runtime's framework-neutral stores and commands.
|
|
124
|
+
|
|
125
|
+
## Prop getters
|
|
126
|
+
|
|
127
|
+
For custom widgets and design systems, Texaryn exports accessible prop helpers:
|
|
128
|
+
|
|
129
|
+
- `getInputProps`
|
|
130
|
+
- `getLabelProps`
|
|
131
|
+
- `getErrorProps`
|
|
132
|
+
- `getDescriptionProps`
|
|
133
|
+
|
|
134
|
+
They translate semantic field state into DOM-facing props without moving form behavior into React components. `getInputProps` also carries the field's `placeholder` hint, so any widget that spreads its result onto an input shows it.
|
|
135
|
+
|
|
136
|
+
## Error display
|
|
137
|
+
|
|
138
|
+
`useField` returns `showErrors`, which is `true` only once a field is both touched and invalid. Widgets use it to decide whether to render inline errors:
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
import { FieldErrors } from '@texaryn/react'
|
|
142
|
+
|
|
143
|
+
<FieldErrors node={node} errors={errors} showErrors={showErrors} />
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
`ErrorSummary` reads the runtime's `visibleErrors` store and renders a jump-linked list of every currently visible error above the form:
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
import { ErrorSummary } from '@texaryn/react'
|
|
150
|
+
|
|
151
|
+
<FormProvider value={form.runtime}>
|
|
152
|
+
<ErrorSummary />
|
|
153
|
+
<FormRoot registry={registry} />
|
|
154
|
+
</FormProvider>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
All default widgets already render `FieldErrors` internally, so most applications only need to add `ErrorSummary`.
|
|
158
|
+
|
|
159
|
+
## Submission
|
|
160
|
+
|
|
161
|
+
`useForm` exposes the runtime's `submission` state and a `dispatch` function. Start a submission by dispatching `Submit`:
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
<button
|
|
165
|
+
type="button"
|
|
166
|
+
disabled={
|
|
167
|
+
form.submission.status === 'validating' ||
|
|
168
|
+
form.submission.status === 'submitting'
|
|
169
|
+
}
|
|
170
|
+
onClick={() => form.dispatch({ type: 'Submit' })}
|
|
171
|
+
>
|
|
172
|
+
Submit
|
|
173
|
+
</button>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
`form.submission.status` moves through `idle`, `validating`, `submitting`, and `submitted`. An invalid validation result returns the status to `idle` and updates node errors without setting `form.submission.error`. The error is set only when the validator throws or rejects, or when `onSubmit` throws or rejects; the status returns to `idle` in those cases too:
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
{form.submission.error != null && (
|
|
180
|
+
<p>{String(form.submission.error)}</p>
|
|
181
|
+
)}
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
React does not own the submission lifecycle. It only observes the `submission` store that `@texaryn/core` computes; see the [`@texaryn/core` README](../core/README.md#submission-lifecycle) for the full snapshot semantics.
|
|
185
|
+
|
|
186
|
+
## Default widgets
|
|
187
|
+
|
|
188
|
+
`createDefaultRegistry()` registers the built-in React widgets:
|
|
189
|
+
|
|
190
|
+
- `TextInput`
|
|
191
|
+
- `NumberInput`
|
|
192
|
+
- `Checkbox`
|
|
193
|
+
- `Select`
|
|
194
|
+
- `Textarea`
|
|
195
|
+
- `ObjectLayout`
|
|
196
|
+
- `ArrayControl`
|
|
197
|
+
|
|
198
|
+
```ts
|
|
199
|
+
import { createDefaultRegistry } from '@texaryn/react'
|
|
200
|
+
|
|
201
|
+
const registry = createDefaultRegistry()
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
The default registry is intentionally small. Applications can supply their own registry and widget components for a product or design system.
|
|
205
|
+
|
|
206
|
+
## Custom rendering
|
|
207
|
+
|
|
208
|
+
The renderer boundary is registry-based. React components are selected from semantic node information rather than from JSON Schema keywords directly.
|
|
209
|
+
|
|
210
|
+
This keeps the dependency direction clear:
|
|
211
|
+
|
|
212
|
+
```text
|
|
213
|
+
@texaryn/schema-json
|
|
214
|
+
|
|
|
215
|
+
v
|
|
216
|
+
@texaryn/core
|
|
217
|
+
|
|
|
218
|
+
v
|
|
219
|
+
@texaryn/react
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
The schema adapter interprets data semantics. The core compiles and runs the form. React renders the result.
|
|
223
|
+
|
|
224
|
+
## Public exports
|
|
225
|
+
|
|
226
|
+
### Hooks
|
|
227
|
+
|
|
228
|
+
- `useStore`
|
|
229
|
+
- `useForm`
|
|
230
|
+
- `UseFormReturn`
|
|
231
|
+
- `useField`
|
|
232
|
+
- `UseFieldReturn`
|
|
233
|
+
- `useFieldArray`
|
|
234
|
+
- `UseFieldArrayReturn`
|
|
235
|
+
- `useFormContext`
|
|
236
|
+
|
|
237
|
+
### Context and rendering
|
|
238
|
+
|
|
239
|
+
- `FormContext`
|
|
240
|
+
- `FormProvider`
|
|
241
|
+
- `FormRoot`
|
|
242
|
+
- `FormRootProps`
|
|
243
|
+
- `NodeRenderer`
|
|
244
|
+
- `NodeRendererProps`
|
|
245
|
+
- `useRendererContext`
|
|
246
|
+
- `WidgetComponent`
|
|
247
|
+
- `RendererContextValue`
|
|
248
|
+
|
|
249
|
+
### Error display
|
|
250
|
+
|
|
251
|
+
- `FieldErrors`
|
|
252
|
+
- `FieldErrorsProps`
|
|
253
|
+
- `ErrorSummary`
|
|
254
|
+
|
|
255
|
+
### Prop getters
|
|
256
|
+
|
|
257
|
+
- `getInputProps`
|
|
258
|
+
- `getLabelProps`
|
|
259
|
+
- `getErrorProps`
|
|
260
|
+
- `getDescriptionProps`
|
|
261
|
+
- `InputProps`
|
|
262
|
+
- `LabelProps`
|
|
263
|
+
- `ErrorProps`
|
|
264
|
+
- `DescriptionProps`
|
|
265
|
+
- `FieldState`
|
|
266
|
+
|
|
267
|
+
### Widgets
|
|
268
|
+
|
|
269
|
+
- `TextInput`
|
|
270
|
+
- `NumberInput`
|
|
271
|
+
- `Checkbox`
|
|
272
|
+
- `Select`
|
|
273
|
+
- `Textarea`
|
|
274
|
+
- `ObjectLayout`
|
|
275
|
+
- `ArrayControl`
|
|
276
|
+
- `createDefaultRegistry`
|
|
277
|
+
|
|
278
|
+
## Related packages
|
|
279
|
+
|
|
280
|
+
- [`@texaryn/core`](../core/README.md), runtime and renderer contracts
|
|
281
|
+
- [`@texaryn/schema-json`](../schema-json/README.md), JSON Schema adapter
|
|
282
|
+
- [`@texaryn/demo`](../demo/README.md), repository demo application
|
|
283
|
+
|
|
284
|
+
See the [repository README](../../README.md) for the complete architecture.
|
|
285
|
+
|
|
286
|
+
## License
|
|
287
|
+
|
|
288
|
+
Apache-2.0
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorSummary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorSummary.tsx"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,uCAuB3B"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useFormContext } from '../context.js';
|
|
3
|
+
import { useStore } from '../hooks/use-store.js';
|
|
4
|
+
import { makeId } from '../props/field-props.js';
|
|
5
|
+
export function ErrorSummary() {
|
|
6
|
+
const runtime = useFormContext();
|
|
7
|
+
const visibleErrors = useStore(runtime.visibleErrors);
|
|
8
|
+
if (visibleErrors.length === 0) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
return (_jsx("div", { role: "alert", children: _jsx("ul", { children: visibleErrors.map((entry) => (_jsxs("li", { children: [_jsx("a", { href: `#${makeId(entry.nodeId, 'input')}`, children: entry.fieldTitle ?? entry.pointer ?? entry.nodeId }), ': ', entry.errors.map((error) => error.message ?? error.keyword).join(', ')] }, entry.nodeId))) }) }));
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=ErrorSummary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../src/components/ErrorSummary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,cAAc,EAAE,CAAA;IAChC,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;IAErD,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,cAAK,IAAI,EAAC,OAAO,YACf,uBACG,aAAa,CAAC,GAAG,CAAC,CAAC,KAAmB,EAAE,EAAE,CAAC,CAC1C,yBACE,YAAG,IAAI,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,YACzC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,GAChD,EACH,IAAI,EACJ,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KALhE,KAAK,CAAC,MAAM,CAMhB,CACN,CAAC,GACC,GACD,CACP,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FieldNode, ValidationError } from '@texaryn/core';
|
|
2
|
+
export interface FieldErrorsProps {
|
|
3
|
+
node: FieldNode;
|
|
4
|
+
errors: ValidationError[];
|
|
5
|
+
showErrors: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare function FieldErrors({ node, errors, showErrors }: FieldErrorsProps): import("react").JSX.Element | null;
|
|
8
|
+
//# sourceMappingURL=FieldErrors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldErrors.d.ts","sourceRoot":"","sources":["../../src/components/FieldErrors.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAG/D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,UAAU,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,gBAAgB,sCAczE"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { getErrorProps } from '../props/index.js';
|
|
3
|
+
export function FieldErrors({ node, errors, showErrors }) {
|
|
4
|
+
if (!showErrors || errors.length === 0) {
|
|
5
|
+
return null;
|
|
6
|
+
}
|
|
7
|
+
const errorProps = getErrorProps(node);
|
|
8
|
+
return (_jsx("div", { ...errorProps, children: errors.map((error, index) => (_jsx("div", { children: error.message ?? error.keyword }, index))) }));
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=FieldErrors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldErrors.js","sourceRoot":"","sources":["../../src/components/FieldErrors.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAQjD,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAoB;IACxE,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;IAEtC,OAAO,CACL,iBAAS,UAAU,YAChB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,wBAAkB,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAtC,KAAK,CAAwC,CACxD,CAAC,GACE,CACP,CAAA;AACH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-field.d.ts","sourceRoot":"","sources":["../../src/hooks/use-field.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAI5D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAC9B,MAAM,IAAI,IAAI,CAAA;CACf;
|
|
1
|
+
{"version":3,"file":"use-field.d.ts","sourceRoot":"","sources":["../../src/hooks/use-field.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAI5D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAC9B,MAAM,IAAI,IAAI,CAAA;CACf;AAcD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,cAAc,CA0BvD"}
|
package/dist/hooks/use-field.js
CHANGED
|
@@ -11,6 +11,7 @@ const FALLBACK_DIRTY = createStore(false);
|
|
|
11
11
|
const FALLBACK_TOUCHED = createStore(false);
|
|
12
12
|
const FALLBACK_VISIBLE = createStore(true);
|
|
13
13
|
const FALLBACK_DISABLED = createStore(false);
|
|
14
|
+
const FALLBACK_SHOW_ERRORS = createStore(false);
|
|
14
15
|
const FALLBACK_VALIDATION_STATUS = createStore('idle');
|
|
15
16
|
export function useField(nodeId) {
|
|
16
17
|
const runtime = useFormContext();
|
|
@@ -21,11 +22,12 @@ export function useField(nodeId) {
|
|
|
21
22
|
const touched = useStore(nodeState?.touched ?? FALLBACK_TOUCHED);
|
|
22
23
|
const visible = useStore(nodeState?.visible ?? FALLBACK_VISIBLE);
|
|
23
24
|
const disabled = useStore(nodeState?.disabled ?? FALLBACK_DISABLED);
|
|
24
|
-
|
|
25
|
+
const showErrors = useStore(nodeState?.showErrors ?? FALLBACK_SHOW_ERRORS);
|
|
26
|
+
// Subscribed for re-render parity with the other seven node stores, even
|
|
25
27
|
// though validation status is not part of this hook's return value.
|
|
26
28
|
useStore(nodeState?.validationStatus ?? FALLBACK_VALIDATION_STATUS);
|
|
27
29
|
const onChange = useCallback((newValue) => { runtime.dispatch({ type: 'SetValue', nodeId, value: newValue }); }, [runtime, nodeId]);
|
|
28
30
|
const onBlur = useCallback(() => { runtime.dispatch({ type: 'SetTouched', nodeId }); }, [runtime, nodeId]);
|
|
29
|
-
return { value, errors, dirty, touched, visible, disabled, onChange, onBlur };
|
|
31
|
+
return { value, errors, dirty, touched, visible, disabled, showErrors, onChange, onBlur };
|
|
30
32
|
}
|
|
31
33
|
//# sourceMappingURL=use-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-field.js","sourceRoot":"","sources":["../../src/hooks/use-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"use-field.js","sourceRoot":"","sources":["../../src/hooks/use-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAczC,qEAAqE;AACrE,oEAAoE;AACpE,uEAAuE;AACvE,MAAM,cAAc,GAAG,WAAW,CAAU,SAAS,CAAC,CAAA;AACtD,MAAM,eAAe,GAAG,WAAW,CAAoB,EAAE,CAAC,CAAA;AAC1D,MAAM,cAAc,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;AACzC,MAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;AAC3C,MAAM,gBAAgB,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;AAC1C,MAAM,iBAAiB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;AAC5C,MAAM,oBAAoB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;AAC/C,MAAM,0BAA0B,GAAG,WAAW,CAA2C,MAAM,CAAC,CAAA;AAEhG,MAAM,UAAU,QAAQ,CAAC,MAAc;IACrC,MAAM,OAAO,GAAG,cAAc,EAAE,CAAA;IAChC,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;IAE9C,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,KAAK,IAAI,cAAc,CAAC,CAAA;IAC1D,MAAM,MAAM,GAAG,QAAQ,CAAC,SAAS,EAAE,MAAM,IAAI,eAAe,CAAC,CAAA;IAC7D,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,KAAK,IAAI,cAAc,CAAC,CAAA;IAC1D,MAAM,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,OAAO,IAAI,gBAAgB,CAAC,CAAA;IAChE,MAAM,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,OAAO,IAAI,gBAAgB,CAAC,CAAA;IAChE,MAAM,QAAQ,GAAG,QAAQ,CAAC,SAAS,EAAE,QAAQ,IAAI,iBAAiB,CAAC,CAAA;IACnE,MAAM,UAAU,GAAG,QAAQ,CAAC,SAAS,EAAE,UAAU,IAAI,oBAAoB,CAAC,CAAA;IAC1E,yEAAyE;IACzE,oEAAoE;IACpE,QAAQ,CAAC,SAAS,EAAE,gBAAgB,IAAI,0BAA0B,CAAC,CAAA;IAEnE,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAAiB,EAAE,EAAE,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA,CAAC,CAAC,EAC1F,CAAC,OAAO,EAAE,MAAM,CAAC,CAClB,CAAA;IAED,MAAM,MAAM,GAAG,WAAW,CACxB,GAAG,EAAE,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,CAAA,CAAC,CAAC,EAC1D,CAAC,OAAO,EAAE,MAAM,CAAC,CAClB,CAAA;IAED,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAA;AAC3F,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,9 @@ export { FormRoot } from './components/FormRoot.js';
|
|
|
12
12
|
export type { FormRootProps } from './components/FormRoot.js';
|
|
13
13
|
export { NodeRenderer } from './components/NodeRenderer.js';
|
|
14
14
|
export type { NodeRendererProps } from './components/NodeRenderer.js';
|
|
15
|
+
export { FieldErrors } from './components/FieldErrors.js';
|
|
16
|
+
export type { FieldErrorsProps } from './components/FieldErrors.js';
|
|
17
|
+
export { ErrorSummary } from './components/ErrorSummary.js';
|
|
15
18
|
export { useRendererContext } from './components/renderer-context.js';
|
|
16
19
|
export type { WidgetComponent, RendererContextValue } from './components/renderer-context.js';
|
|
17
20
|
export { TextInput, NumberInput, Checkbox, Select, Textarea, ObjectLayout, ArrayControl, createDefaultRegistry, } from './widgets/index.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACnG,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxG,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAC7F,OAAO,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,qBAAqB,GACtB,MAAM,oBAAoB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACnG,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxG,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAC7F,OAAO,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,qBAAqB,GACtB,MAAM,oBAAoB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -6,6 +6,8 @@ export { FormContext, FormProvider, useFormContext } from './context.js';
|
|
|
6
6
|
export { getInputProps, getLabelProps, getErrorProps, getDescriptionProps } from './props/index.js';
|
|
7
7
|
export { FormRoot } from './components/FormRoot.js';
|
|
8
8
|
export { NodeRenderer } from './components/NodeRenderer.js';
|
|
9
|
+
export { FieldErrors } from './components/FieldErrors.js';
|
|
10
|
+
export { ErrorSummary } from './components/ErrorSummary.js';
|
|
9
11
|
export { useRendererContext } from './components/renderer-context.js';
|
|
10
12
|
export { TextInput, NumberInput, Checkbox, Select, Textarea, ObjectLayout, ArrayControl, createDefaultRegistry, } from './widgets/index.js';
|
|
11
13
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEnG,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAErE,OAAO,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,qBAAqB,GACtB,MAAM,oBAAoB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEnG,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAErE,OAAO,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,qBAAqB,GACtB,MAAM,oBAAoB,CAAA"}
|
|
@@ -14,6 +14,7 @@ export interface FieldState {
|
|
|
14
14
|
touched: boolean;
|
|
15
15
|
visible: boolean;
|
|
16
16
|
disabled: boolean;
|
|
17
|
+
showErrors: boolean;
|
|
17
18
|
onChange: (value: unknown) => void;
|
|
18
19
|
onBlur: () => void;
|
|
19
20
|
}
|
|
@@ -26,8 +27,9 @@ export interface InputProps extends Record<string, unknown> {
|
|
|
26
27
|
value: unknown;
|
|
27
28
|
disabled: boolean;
|
|
28
29
|
'aria-required': boolean;
|
|
29
|
-
'aria-invalid'
|
|
30
|
+
'aria-invalid'?: boolean;
|
|
30
31
|
'aria-describedby'?: string;
|
|
32
|
+
placeholder?: string;
|
|
31
33
|
onChange: (value: unknown) => void;
|
|
32
34
|
onBlur: () => void;
|
|
33
35
|
}
|
|
@@ -44,7 +46,6 @@ export interface LabelProps extends Record<string, unknown> {
|
|
|
44
46
|
export interface ErrorProps extends Record<string, unknown> {
|
|
45
47
|
id: string;
|
|
46
48
|
role: 'alert';
|
|
47
|
-
'aria-live': 'polite';
|
|
48
49
|
}
|
|
49
50
|
/**
|
|
50
51
|
* HTML/ARIA attributes for a description element
|
|
@@ -52,6 +53,7 @@ export interface ErrorProps extends Record<string, unknown> {
|
|
|
52
53
|
export interface DescriptionProps extends Record<string, unknown> {
|
|
53
54
|
id: string;
|
|
54
55
|
}
|
|
56
|
+
export declare function makeId(nodeId: string, suffix: string): string;
|
|
55
57
|
/**
|
|
56
58
|
* getInputProps: Returns ARIA-correct props for an input element
|
|
57
59
|
* Includes id, name, value, disabled, aria-required, aria-invalid, aria-describedby
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-props.d.ts","sourceRoot":"","sources":["../../src/props/field-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,EAAE,KAAK,CAAC;QAAE,eAAe,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAA;IAC9G,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;IACjB,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"field-props.d.ts","sourceRoot":"","sources":["../../src/props/field-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,EAAE,KAAK,CAAC;QAAE,eAAe,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAA;IAC9G,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;IACjB,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,OAAO,CAAA;CACd;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,EAAE,EAAE,MAAM,CAAA;CACX;AAED,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,GAAG,UAAU,CAiCjF;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,UAAU,CAKzD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,UAAU,CAKzD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,SAAS,GAAG,gBAAgB,CAIrE"}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* Generate deterministic element ID from NodeId
|
|
3
|
-
*/
|
|
4
|
-
function makeId(nodeId, suffix) {
|
|
1
|
+
export function makeId(nodeId, suffix) {
|
|
5
2
|
return `texaryn-${nodeId}-${suffix}`;
|
|
6
3
|
}
|
|
7
4
|
/**
|
|
@@ -10,27 +7,32 @@ function makeId(nodeId, suffix) {
|
|
|
10
7
|
*/
|
|
11
8
|
export function getInputProps(node, fieldState) {
|
|
12
9
|
const id = makeId(node.id, 'input');
|
|
13
|
-
const hasErrors = fieldState.errors.length > 0;
|
|
14
10
|
const hasDescription = Boolean(node.annotations?.description);
|
|
15
|
-
// Build aria-describedby from
|
|
11
|
+
// Build aria-describedby from description and error IDs, in that order
|
|
16
12
|
const describedByIds = [];
|
|
17
|
-
if (hasErrors) {
|
|
18
|
-
describedByIds.push(makeId(node.id, 'error'));
|
|
19
|
-
}
|
|
20
13
|
if (hasDescription) {
|
|
21
14
|
describedByIds.push(makeId(node.id, 'description'));
|
|
22
15
|
}
|
|
23
|
-
|
|
16
|
+
if (fieldState.showErrors && fieldState.errors.length > 0) {
|
|
17
|
+
describedByIds.push(makeId(node.id, 'error'));
|
|
18
|
+
}
|
|
19
|
+
const props = {
|
|
24
20
|
id,
|
|
25
21
|
name: node.dataPointer || node.id,
|
|
26
22
|
value: fieldState.value,
|
|
27
23
|
disabled: fieldState.disabled,
|
|
28
24
|
'aria-required': Boolean(node.constraints?.required),
|
|
29
|
-
'aria-invalid': hasErrors,
|
|
30
25
|
'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
|
|
31
26
|
onChange: fieldState.onChange,
|
|
32
27
|
onBlur: fieldState.onBlur,
|
|
33
28
|
};
|
|
29
|
+
if (fieldState.showErrors && fieldState.errors.length > 0) {
|
|
30
|
+
props['aria-invalid'] = true;
|
|
31
|
+
}
|
|
32
|
+
if (node.placeholder != null) {
|
|
33
|
+
props.placeholder = node.placeholder;
|
|
34
|
+
}
|
|
35
|
+
return props;
|
|
34
36
|
}
|
|
35
37
|
/**
|
|
36
38
|
* getLabelProps: Returns ARIA-correct props for a label element
|
|
@@ -48,7 +50,6 @@ export function getErrorProps(node) {
|
|
|
48
50
|
return {
|
|
49
51
|
id: makeId(node.id, 'error'),
|
|
50
52
|
role: 'alert',
|
|
51
|
-
'aria-live': 'polite',
|
|
52
53
|
};
|
|
53
54
|
}
|
|
54
55
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-props.js","sourceRoot":"","sources":["../../src/props/field-props.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"field-props.js","sourceRoot":"","sources":["../../src/props/field-props.ts"],"names":[],"mappings":"AAwDA,MAAM,UAAU,MAAM,CAAC,MAAc,EAAE,MAAc;IACnD,OAAO,WAAW,MAAM,IAAI,MAAM,EAAE,CAAA;AACtC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,IAAe,EAAE,UAAsB;IACnE,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IACnC,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;IAE7D,uEAAuE;IACvE,MAAM,cAAc,GAAa,EAAE,CAAA;IACnC,IAAI,cAAc,EAAE,CAAC;QACnB,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC,CAAA;IACrD,CAAC;IACD,IAAI,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC1D,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,MAAM,KAAK,GAAe;QACxB,EAAE;QACF,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,EAAE;QACjC,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;QACpD,kBAAkB,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;QACpF,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,MAAM,EAAE,UAAU,CAAC,MAAM;KAC1B,CAAA;IAED,IAAI,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC1D,KAAK,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA;IAC9B,CAAC;IAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;QAC7B,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAA;IACtC,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,IAAe;IAC3C,OAAO;QACL,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;QAC5B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;KAClC,CAAA;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,IAAe;IAC3C,OAAO;QACL,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;QAC5B,IAAI,EAAE,OAAO;KACd,CAAA;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAe;IACjD,OAAO;QACL,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC;KACnC,CAAA;AACH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/widgets/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/widgets/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;AAKtD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,qBA2B1C;AAED,eAAO,MAAM,QAAQ,gDAGpB,CAAA"}
|
package/dist/widgets/Checkbox.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { useField } from '../hooks/use-field.js';
|
|
4
|
-
import { getInputProps, getLabelProps,
|
|
4
|
+
import { getInputProps, getLabelProps, getDescriptionProps } from '../props/index.js';
|
|
5
|
+
import { FieldErrors } from '../components/FieldErrors.js';
|
|
5
6
|
function CheckboxImpl({ node }) {
|
|
6
7
|
const fieldNode = node;
|
|
7
8
|
const field = useField(fieldNode.id);
|
|
8
9
|
const { value, onChange, ...inputProps } = getInputProps(fieldNode, field);
|
|
9
10
|
const labelProps = getLabelProps(fieldNode);
|
|
10
|
-
const errorProps = getErrorProps(fieldNode);
|
|
11
11
|
const descriptionProps = getDescriptionProps(fieldNode);
|
|
12
12
|
const label = fieldNode.annotations.title ?? fieldNode.dataPointer ?? fieldNode.id;
|
|
13
13
|
const handleChange = (event) => {
|
|
14
14
|
onChange(event.target.checked);
|
|
15
15
|
};
|
|
16
|
-
return (_jsxs("div", { children: [_jsx("input", { ...inputProps, type: "checkbox", checked: Boolean(value), onChange: handleChange }), _jsx("label", { ...labelProps, children: label }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null,
|
|
16
|
+
return (_jsxs("div", { children: [_jsx("input", { ...inputProps, type: "checkbox", checked: Boolean(value), onChange: handleChange }), _jsx("label", { ...labelProps, children: label }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null, _jsx(FieldErrors, { node: fieldNode, errors: field.errors, showErrors: field.showErrors })] }));
|
|
17
17
|
}
|
|
18
18
|
export const Checkbox = React.memo(CheckboxImpl, (prev, next) => prev.node.id === next.node.id);
|
|
19
19
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/widgets/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/widgets/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAM1D,SAAS,YAAY,CAAC,EAAE,IAAI,EAAe;IACzC,MAAM,SAAS,GAAG,IAAiB,CAAA;IACnC,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC1E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IAC3C,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACvD,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,EAAE,CAAA;IAElF,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,OAAO,CACL,0BACE,mBACM,UAAU,EACd,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EACvB,QAAQ,EAAE,YAAY,GACtB,EACF,mBAAW,UAAU,YAAG,KAAK,GAAS,EACrC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CACnC,iBAAS,gBAAgB,YAAG,SAAS,CAAC,WAAW,CAAC,WAAW,GAAO,CACrE,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,GAAI,IAChF,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAChC,YAAY,EACZ,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAC9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/widgets/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/widgets/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;AAKtD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,qBA4B7C;AAED,eAAO,MAAM,WAAW,mDAGvB,CAAA"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { useField } from '../hooks/use-field.js';
|
|
4
|
-
import { getInputProps, getLabelProps,
|
|
4
|
+
import { getInputProps, getLabelProps, getDescriptionProps } from '../props/index.js';
|
|
5
|
+
import { FieldErrors } from '../components/FieldErrors.js';
|
|
5
6
|
function NumberInputImpl({ node }) {
|
|
6
7
|
const fieldNode = node;
|
|
7
8
|
const field = useField(fieldNode.id);
|
|
8
9
|
const { value, onChange, ...inputProps } = getInputProps(fieldNode, field);
|
|
9
10
|
const labelProps = getLabelProps(fieldNode);
|
|
10
|
-
const errorProps = getErrorProps(fieldNode);
|
|
11
11
|
const descriptionProps = getDescriptionProps(fieldNode);
|
|
12
12
|
const label = fieldNode.annotations.title ?? fieldNode.dataPointer ?? fieldNode.id;
|
|
13
13
|
const handleChange = (event) => {
|
|
14
14
|
const raw = event.target.value;
|
|
15
15
|
onChange(raw === '' ? undefined : Number(raw));
|
|
16
16
|
};
|
|
17
|
-
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("input", { ...inputProps, type: "number", value: typeof value === 'number' ? value : value == null ? '' : String(value), onChange: handleChange }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null,
|
|
17
|
+
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("input", { ...inputProps, type: "number", value: typeof value === 'number' ? value : value == null ? '' : String(value), onChange: handleChange }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null, _jsx(FieldErrors, { node: fieldNode, errors: field.errors, showErrors: field.showErrors })] }));
|
|
18
18
|
}
|
|
19
19
|
export const NumberInput = React.memo(NumberInputImpl, (prev, next) => prev.node.id === next.node.id);
|
|
20
20
|
//# sourceMappingURL=NumberInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/widgets/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/widgets/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAM1D,SAAS,eAAe,CAAC,EAAE,IAAI,EAAe;IAC5C,MAAM,SAAS,GAAG,IAAiB,CAAA;IACnC,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC1E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IAC3C,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACvD,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,EAAE,CAAA;IAElF,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;QAC9B,QAAQ,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;IAChD,CAAC,CAAA;IAED,OAAO,CACL,0BACE,mBAAW,UAAU,YAAG,KAAK,GAAS,EACtC,mBACM,UAAU,EACd,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7E,QAAQ,EAAE,YAAY,GACtB,EACD,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CACnC,iBAAS,gBAAgB,YAAG,SAAS,CAAC,WAAW,CAAC,WAAW,GAAO,CACrE,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,GAAI,IAChF,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CACnC,eAAe,EACf,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAC9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/widgets/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/widgets/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;AAKtD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,qBAkCxC;AAED,eAAO,MAAM,MAAM,8CAGlB,CAAA"}
|
package/dist/widgets/Select.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { useField } from '../hooks/use-field.js';
|
|
4
|
-
import { getInputProps, getLabelProps,
|
|
4
|
+
import { getInputProps, getLabelProps, getDescriptionProps } from '../props/index.js';
|
|
5
|
+
import { FieldErrors } from '../components/FieldErrors.js';
|
|
5
6
|
function SelectImpl({ node }) {
|
|
6
7
|
const fieldNode = node;
|
|
7
8
|
const field = useField(fieldNode.id);
|
|
8
9
|
const { value, onChange, ...inputProps } = getInputProps(fieldNode, field);
|
|
9
10
|
const labelProps = getLabelProps(fieldNode);
|
|
10
|
-
const errorProps = getErrorProps(fieldNode);
|
|
11
11
|
const descriptionProps = getDescriptionProps(fieldNode);
|
|
12
12
|
const label = fieldNode.annotations.title ?? fieldNode.dataPointer ?? fieldNode.id;
|
|
13
13
|
const enumValues = fieldNode.enumValues ?? [];
|
|
@@ -15,7 +15,7 @@ function SelectImpl({ node }) {
|
|
|
15
15
|
const selected = enumValues.find((option) => String(option.value) === event.target.value);
|
|
16
16
|
onChange(selected ? selected.value : event.target.value);
|
|
17
17
|
};
|
|
18
|
-
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("select", { ...inputProps, value: value == null ? '' : String(value), onChange: handleChange, children: enumValues.map((option) => (_jsx("option", { value: String(option.value), children: option.title ?? String(option.value) }, String(option.value)))) }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null,
|
|
18
|
+
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("select", { ...inputProps, value: value == null ? '' : String(value), onChange: handleChange, children: enumValues.map((option) => (_jsx("option", { value: String(option.value), children: option.title ?? String(option.value) }, String(option.value)))) }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null, _jsx(FieldErrors, { node: fieldNode, errors: field.errors, showErrors: field.showErrors })] }));
|
|
19
19
|
}
|
|
20
20
|
export const Select = React.memo(SelectImpl, (prev, next) => prev.node.id === next.node.id);
|
|
21
21
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/widgets/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/widgets/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAM1D,SAAS,UAAU,CAAC,EAAE,IAAI,EAAe;IACvC,MAAM,SAAS,GAAG,IAAiB,CAAA;IACnC,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC1E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IAC3C,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACvD,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,EAAE,CAAA;IAClF,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,IAAI,EAAE,CAAA;IAE7C,MAAM,YAAY,GAAG,CAAC,KAA2C,EAAE,EAAE;QACnE,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QACzF,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC1D,CAAC,CAAA;IAED,OAAO,CACL,0BACE,mBAAW,UAAU,YAAG,KAAK,GAAS,EACtC,oBACM,UAAU,EACd,KAAK,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE,YAAY,YAErB,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC1B,iBAAmC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,YAC3D,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAD1B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAExB,CACV,CAAC,GACK,EACR,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CACnC,iBAAS,gBAAgB,YAAG,SAAS,CAAC,WAAW,CAAC,WAAW,GAAO,CACrE,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,GAAI,IAChF,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAC9B,UAAU,EACV,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAC9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/widgets/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/widgets/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;AAKtD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,qBAuB3C;AAED,eAAO,MAAM,SAAS,iDAGrB,CAAA"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { useField } from '../hooks/use-field.js';
|
|
4
|
-
import { getInputProps, getLabelProps,
|
|
4
|
+
import { getInputProps, getLabelProps, getDescriptionProps } from '../props/index.js';
|
|
5
|
+
import { FieldErrors } from '../components/FieldErrors.js';
|
|
5
6
|
function TextInputImpl({ node }) {
|
|
6
7
|
const fieldNode = node;
|
|
7
8
|
const field = useField(fieldNode.id);
|
|
8
9
|
const { value, onChange, ...inputProps } = getInputProps(fieldNode, field);
|
|
9
10
|
const labelProps = getLabelProps(fieldNode);
|
|
10
|
-
const errorProps = getErrorProps(fieldNode);
|
|
11
11
|
const descriptionProps = getDescriptionProps(fieldNode);
|
|
12
12
|
const label = fieldNode.annotations.title ?? fieldNode.dataPointer ?? fieldNode.id;
|
|
13
|
-
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("input", { ...inputProps, type: "text", value: typeof value === 'string' ? value : value == null ? '' : String(value), onChange: (event) => onChange(event.target.value) }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null,
|
|
13
|
+
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("input", { ...inputProps, type: "text", value: typeof value === 'string' ? value : value == null ? '' : String(value), onChange: (event) => onChange(event.target.value) }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null, _jsx(FieldErrors, { node: fieldNode, errors: field.errors, showErrors: field.showErrors })] }));
|
|
14
14
|
}
|
|
15
15
|
export const TextInput = React.memo(TextInputImpl, (prev, next) => prev.node.id === next.node.id);
|
|
16
16
|
//# sourceMappingURL=TextInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/widgets/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/widgets/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAM1D,SAAS,aAAa,CAAC,EAAE,IAAI,EAAe;IAC1C,MAAM,SAAS,GAAG,IAAiB,CAAA;IACnC,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC1E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IAC3C,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACvD,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,EAAE,CAAA;IAElF,OAAO,CACL,0BACE,mBAAW,UAAU,YAAG,KAAK,GAAS,EACtC,mBACM,UAAU,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7E,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GACjD,EACD,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CACnC,iBAAS,gBAAgB,YAAG,SAAS,CAAC,WAAW,CAAC,WAAW,GAAO,CACrE,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,GAAI,IAChF,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CACjC,aAAa,EACb,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAC9C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/widgets/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/widgets/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,eAAe,CAAA;AAKtD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,qBAsB1C;AAED,eAAO,MAAM,QAAQ,gDAGpB,CAAA"}
|
package/dist/widgets/Textarea.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { useField } from '../hooks/use-field.js';
|
|
4
|
-
import { getInputProps, getLabelProps,
|
|
4
|
+
import { getInputProps, getLabelProps, getDescriptionProps } from '../props/index.js';
|
|
5
|
+
import { FieldErrors } from '../components/FieldErrors.js';
|
|
5
6
|
function TextareaImpl({ node }) {
|
|
6
7
|
const fieldNode = node;
|
|
7
8
|
const field = useField(fieldNode.id);
|
|
8
9
|
const { value, onChange, ...inputProps } = getInputProps(fieldNode, field);
|
|
9
10
|
const labelProps = getLabelProps(fieldNode);
|
|
10
|
-
const errorProps = getErrorProps(fieldNode);
|
|
11
11
|
const descriptionProps = getDescriptionProps(fieldNode);
|
|
12
12
|
const label = fieldNode.annotations.title ?? fieldNode.dataPointer ?? fieldNode.id;
|
|
13
|
-
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("textarea", { ...inputProps, value: typeof value === 'string' ? value : value == null ? '' : String(value), onChange: (event) => onChange(event.target.value) }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null,
|
|
13
|
+
return (_jsxs("div", { children: [_jsx("label", { ...labelProps, children: label }), _jsx("textarea", { ...inputProps, value: typeof value === 'string' ? value : value == null ? '' : String(value), onChange: (event) => onChange(event.target.value) }), fieldNode.annotations.description ? (_jsx("div", { ...descriptionProps, children: fieldNode.annotations.description })) : null, _jsx(FieldErrors, { node: fieldNode, errors: field.errors, showErrors: field.showErrors })] }));
|
|
14
14
|
}
|
|
15
15
|
export const Textarea = React.memo(TextareaImpl, (prev, next) => prev.node.id === next.node.id);
|
|
16
16
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/widgets/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/widgets/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAM1D,SAAS,YAAY,CAAC,EAAE,IAAI,EAAe;IACzC,MAAM,SAAS,GAAG,IAAiB,CAAA;IACnC,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC1E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;IAC3C,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACvD,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,EAAE,CAAA;IAElF,OAAO,CACL,0BACE,mBAAW,UAAU,YAAG,KAAK,GAAS,EACtC,sBACM,UAAU,EACd,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7E,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GACjD,EACD,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CACnC,iBAAS,gBAAgB,YAAG,SAAS,CAAC,WAAW,CAAC,WAAW,GAAO,CACrE,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,GAAI,IAChF,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAChC,YAAY,EACZ,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAC9C,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@texaryn/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React bindings, hooks, prop getters, and default widgets for Texaryn",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,10 +25,11 @@
|
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
"files": [
|
|
28
|
-
"dist"
|
|
28
|
+
"dist",
|
|
29
|
+
"CHANGELOG.md"
|
|
29
30
|
],
|
|
30
31
|
"dependencies": {
|
|
31
|
-
"@texaryn/core": "0.1.
|
|
32
|
+
"@texaryn/core": "0.1.1"
|
|
32
33
|
},
|
|
33
34
|
"peerDependencies": {
|
|
34
35
|
"react": ">=18.0.0"
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
"jsdom": "^25.0.0",
|
|
40
41
|
"react": "^19.0.0",
|
|
41
42
|
"react-dom": "^19.0.0",
|
|
42
|
-
"@texaryn/schema-json": "0.1.
|
|
43
|
+
"@texaryn/schema-json": "0.1.1"
|
|
43
44
|
},
|
|
44
45
|
"scripts": {
|
|
45
46
|
"build": "tsc --build"
|