@texaryn/react-mui 0.2.0 → 0.3.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 +42 -0
- package/dist/widgets/MuiArrayControl.d.ts.map +1 -1
- package/dist/widgets/MuiArrayControl.js +4 -3
- package/dist/widgets/MuiArrayControl.js.map +1 -1
- package/dist/widgets/MuiCheckbox.js +2 -2
- package/dist/widgets/MuiCheckbox.js.map +1 -1
- package/dist/widgets/MuiNumberInput.js +2 -2
- package/dist/widgets/MuiNumberInput.js.map +1 -1
- package/dist/widgets/MuiSelect.js +2 -2
- package/dist/widgets/MuiSelect.js.map +1 -1
- package/dist/widgets/MuiTextInput.js +2 -2
- package/dist/widgets/MuiTextInput.js.map +1 -1
- package/dist/widgets/MuiTextarea.js +2 -2
- package/dist/widgets/MuiTextarea.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,47 @@
|
|
|
1
1
|
# @texaryn/react-mui
|
|
2
2
|
|
|
3
|
+
## 0.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [89c44e5]
|
|
8
|
+
- Updated dependencies [43e4370]
|
|
9
|
+
- Updated dependencies [b2bb9d6]
|
|
10
|
+
- Updated dependencies [55ce8d6]
|
|
11
|
+
- Updated dependencies [a835e87]
|
|
12
|
+
- Updated dependencies [9b262d3]
|
|
13
|
+
- Updated dependencies [748b250]
|
|
14
|
+
- @texaryn/core@0.8.0
|
|
15
|
+
- @texaryn/react@0.4.1
|
|
16
|
+
|
|
17
|
+
## 0.3.0
|
|
18
|
+
|
|
19
|
+
### Minor Changes
|
|
20
|
+
|
|
21
|
+
- 04270e8: Give every array action control an accessible name that says which row it acts on.
|
|
22
|
+
|
|
23
|
+
Five buttons all announced as "Remove" leave a screen reader user guessing. Each now carries the current 1-based position and whatever schema titles exist, so "Remove Contact 2 from Contacts", degrading to "Remove item 2" when nothing is titled. Reorder controls read "Move up Contact 2 in Contacts", and the per-array control reads "Add item to Contacts". The visible words stay "Remove", "Up" and "Add", with the longer string in `aria-label`, which contains the visible text so speech input still works.
|
|
24
|
+
|
|
25
|
+
The row's own value is deliberately not used: it is mutable, often blank, frequently duplicated, and sometimes sensitive. The position is recomputed on every render rather than captured when a row is created, because a row survives a move while its position does not.
|
|
26
|
+
|
|
27
|
+
The add control is named from the item template rather than from the first row, so an empty array still says "Add Tag" where naming it matters most. That needed the template's annotations, which the projection did not carry: `NodeProjection.itemAnnotations` is new and optional, so an adapter that cannot supply it stays valid, and `ArrayMeta.itemTitle` carries the result to renderers.
|
|
28
|
+
|
|
29
|
+
React exposes the decision as `useArrayActions` so its three widget sets cannot drift, and the name builders are exported for custom widgets. Reorder-control parity is unchanged: the three React sets still expose no reorder button.
|
|
30
|
+
- c9b930f: Show a required field's requirement to a sighted user, without announcing it twice.
|
|
31
|
+
|
|
32
|
+
Required was conveyed only through `aria-required`, so a sighted user had nothing to tell a required field from an optional one. Every required label now carries a visible `(required)`.
|
|
33
|
+
|
|
34
|
+
Three channels carry that one fact and are deliberately kept separate. The visible label reads "Full Name (required)". The accessible name stays exactly "Full Name", because the indicator is `aria-hidden` and `aria-required` already reports the state; putting it in the name as well makes some screen readers say it twice. WCAG's Label in Name allows exactly this omission when the state is surfaced programmatically.
|
|
35
|
+
|
|
36
|
+
The indicator is the word rather than an asterisk, so nothing has to be explained elsewhere on the form. `field.label` and `fieldLabel()` still return the raw schema title: the decoration lives in the label rendering, so a visual convention does not become the canonical field title a custom widget sees. React exposes `FieldLabelContent` so its three widget sets cannot drift, and each binding exports `REQUIRED_INDICATOR` so a custom widget can match the wording.
|
|
37
|
+
|
|
38
|
+
### Patch Changes
|
|
39
|
+
|
|
40
|
+
- Updated dependencies [04270e8]
|
|
41
|
+
- Updated dependencies [c9b930f]
|
|
42
|
+
- @texaryn/core@0.7.0
|
|
43
|
+
- @texaryn/react@0.4.0
|
|
44
|
+
|
|
3
45
|
## 0.2.0
|
|
4
46
|
|
|
5
47
|
### Minor Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MuiArrayControl.d.ts","sourceRoot":"","sources":["../../src/widgets/MuiArrayControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAiB,MAAM,EAAE,MAAM,eAAe,CAAA;AAG1D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"MuiArrayControl.d.ts","sourceRoot":"","sources":["../../src/widgets/MuiArrayControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAiB,MAAM,EAAE,MAAM,eAAe,CAAA;AAG1D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,qBAsCjD;AAED,eAAO,MAAM,eAAe,uDAAiF,CAAA"}
|
|
@@ -3,15 +3,16 @@ import React from 'react';
|
|
|
3
3
|
import Stack from '@mui/material/Stack';
|
|
4
4
|
import Button from '@mui/material/Button';
|
|
5
5
|
import Box from '@mui/material/Box';
|
|
6
|
-
import { NodeRenderer, useFieldArray, useRendererContext } from '@texaryn/react';
|
|
6
|
+
import { NodeRenderer, useArrayActions, useFieldArray, useRendererContext } from '@texaryn/react';
|
|
7
7
|
function MuiArrayControlImpl({ node }) {
|
|
8
8
|
const containerNode = node;
|
|
9
9
|
const fieldArray = useFieldArray(containerNode.id);
|
|
10
10
|
const { document, registry } = useRendererContext();
|
|
11
|
+
const actions = useArrayActions(node);
|
|
11
12
|
return (_jsxs(Stack, { spacing: 2, children: [fieldArray.items.map((item, index) => {
|
|
12
13
|
const childNode = item.nodeId ? document.nodes[item.nodeId] : undefined;
|
|
13
|
-
return (_jsxs(Box, { children: [childNode ? (_jsx(NodeRenderer, { node: childNode, document: document, registry: registry })) : null, fieldArray.canRemove ? (_jsx(Button, { variant: "outlined", color: "error", size: "small", onClick: () => fieldArray.remove(index), children: "Remove" })) : null] }, item.id));
|
|
14
|
-
}), fieldArray.canAdd ? (_jsx(Box, { children: _jsx(Button, { variant: "contained", onClick: () => fieldArray.add(), children: "Add" }) })) : null] }));
|
|
14
|
+
return (_jsxs(Box, { children: [childNode ? (_jsx(NodeRenderer, { node: childNode, document: document, registry: registry })) : null, fieldArray.canRemove ? (_jsx(Button, { variant: "outlined", color: "error", size: "small", "aria-label": actions.removeName(index + 1, childNode), onClick: () => fieldArray.remove(index), children: "Remove" })) : null] }, item.id));
|
|
15
|
+
}), fieldArray.canAdd ? (_jsx(Box, { children: _jsx(Button, { variant: "contained", "aria-label": actions.addName, onClick: () => fieldArray.add(), children: "Add" }) })) : null] }));
|
|
15
16
|
}
|
|
16
17
|
export const MuiArrayControl = React.memo(MuiArrayControlImpl, (prev, next) => prev.node.id === next.node.id);
|
|
17
18
|
//# sourceMappingURL=MuiArrayControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MuiArrayControl.js","sourceRoot":"","sources":["../../src/widgets/MuiArrayControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,qBAAqB,CAAA;AACvC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,GAAG,MAAM,mBAAmB,CAAA;AAEnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MuiArrayControl.js","sourceRoot":"","sources":["../../src/widgets/MuiArrayControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,qBAAqB,CAAA;AACvC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,GAAG,MAAM,mBAAmB,CAAA;AAEnC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAMjG,SAAS,mBAAmB,CAAC,EAAE,IAAI,EAAe;IAChD,MAAM,aAAa,GAAG,IAAqB,CAAA;IAC3C,MAAM,UAAU,GAAG,aAAa,CAAC,aAAa,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE,CAAA;IACnD,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAE,CAAC,aACd,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACpC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;gBACvE,OAAO,CACL,MAAC,GAAG,eACD,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,YAAY,IAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1E,CAAC,CAAC,CAAC,IAAI,EACP,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CACtB,KAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,gBACA,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,SAAS,CAAC,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,uBAGhC,CACV,CAAC,CAAC,CAAC,IAAI,KAdA,IAAI,CAAC,EAAE,CAeX,CACP,CAAA;YACH,CAAC,CAAC,EACD,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,KAAC,GAAG,cACF,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,gBAAa,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,oBAE/E,GACL,CACP,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -4,12 +4,12 @@ import FormControl from '@mui/material/FormControl';
|
|
|
4
4
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
5
5
|
import Checkbox from '@mui/material/Checkbox';
|
|
6
6
|
import FormHelperText from '@mui/material/FormHelperText';
|
|
7
|
-
import { useFieldBinding } from '@texaryn/react';
|
|
7
|
+
import { FieldLabelContent, useFieldBinding } from '@texaryn/react';
|
|
8
8
|
import { helperContent } from './helper-text.js';
|
|
9
9
|
function MuiCheckboxImpl({ node }) {
|
|
10
10
|
const field = useFieldBinding(node);
|
|
11
11
|
const helperId = `${field.domCheckboxProps.id}-helper`;
|
|
12
|
-
return (_jsxs(FormControl, { error: field.invalid, disabled: field.disabled, children: [_jsx(FormControlLabel, { label: field.label, control: _jsx(Checkbox, { checked: field.domCheckboxProps.checked, onChange: field.domCheckboxProps.onChange, onBlur: field.domCheckboxProps.onBlur, slotProps: {
|
|
12
|
+
return (_jsxs(FormControl, { error: field.invalid, disabled: field.disabled, children: [_jsx(FormControlLabel, { label: _jsx(FieldLabelContent, { label: field.label, required: field.required }), control: _jsx(Checkbox, { checked: field.domCheckboxProps.checked, onChange: field.domCheckboxProps.onChange, onBlur: field.domCheckboxProps.onBlur, slotProps: {
|
|
13
13
|
input: {
|
|
14
14
|
id: field.domCheckboxProps.id,
|
|
15
15
|
name: field.domCheckboxProps.name,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MuiCheckbox.js","sourceRoot":"","sources":["../../src/widgets/MuiCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,2BAA2B,CAAA;AACnD,OAAO,gBAAgB,MAAM,gCAAgC,CAAA;AAC7D,OAAO,QAAQ,MAAM,wBAAwB,CAAA;AAC7C,OAAO,cAAc,MAAM,8BAA8B,CAAA;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MuiCheckbox.js","sourceRoot":"","sources":["../../src/widgets/MuiCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,2BAA2B,CAAA;AACnD,OAAO,gBAAgB,MAAM,gCAAgC,CAAA;AAC7D,OAAO,QAAQ,MAAM,wBAAwB,CAAA;AAC7C,OAAO,cAAc,MAAM,8BAA8B,CAAA;AAEzD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAMhD,SAAS,eAAe,CAAC,EAAE,IAAI,EAAe;IAC5C,MAAM,KAAK,GAAG,eAAe,CAAC,IAAiB,CAAC,CAAA;IAChD,MAAM,QAAQ,GAAG,GAAG,KAAK,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAEtD,OAAO,CACL,MAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,aACzD,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC1E,OAAO,EACL,KAAC,QAAQ,IACP,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,EACvC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EACzC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,EACrC,SAAS,EAAE;wBACT,KAAK,EAAE;4BACL,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,EAAE;4BAC7B,IAAI,EAAE,KAAK,CAAC,gBAAgB,CAAC,IAAI;4BACjC,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;4BAC5C,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;4BAC5C,cAAc,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS;4BAC1C,kBAAkB,EAAE,QAAQ;yBAC7B;qBACF,GACD,GAEJ,EACF,KAAC,cAAc,IAAC,EAAE,EAAE,QAAQ,YAAG,aAAa,CAAC,KAAK,CAAC,GAAkB,IACzD,CACf,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import TextField from '@mui/material/TextField';
|
|
4
|
-
import { useFieldBinding } from '@texaryn/react';
|
|
4
|
+
import { FieldLabelContent, useFieldBinding } from '@texaryn/react';
|
|
5
5
|
import { helperContent } from './helper-text.js';
|
|
6
6
|
function MuiNumberInputImpl({ node }) {
|
|
7
7
|
const field = useFieldBinding(node);
|
|
8
|
-
return (_jsx(TextField, { type: "number", id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, placeholder: field.placeholder, label: field.label, error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
8
|
+
return (_jsx(TextField, { type: "number", id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, placeholder: field.placeholder, label: _jsx(FieldLabelContent, { label: field.label, required: field.required }), error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
9
9
|
htmlInput: {
|
|
10
10
|
readOnly: field.readOnly,
|
|
11
11
|
'aria-required': field.required || undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MuiNumberInput.js","sourceRoot":"","sources":["../../src/widgets/MuiNumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MuiNumberInput.js","sourceRoot":"","sources":["../../src/widgets/MuiNumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAMhD,SAAS,kBAAkB,CAAC,EAAE,IAAI,EAAe;IAC/C,MAAM,KAAK,GAAG,eAAe,CAAC,IAAiB,CAAC,CAAA;IAEhD,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,EAC1B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,EAC9B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,EAChC,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,EACtC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC1E,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,EAChC,SAAS,QACT,SAAS,EAAE;YACT,SAAS,EAAE;gBACT,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;gBAC5C,cAAc,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS;aAC3C;SACF,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import TextField from '@mui/material/TextField';
|
|
4
4
|
import MenuItem from '@mui/material/MenuItem';
|
|
5
|
-
import { useFieldBinding } from '@texaryn/react';
|
|
5
|
+
import { FieldLabelContent, useFieldBinding } from '@texaryn/react';
|
|
6
6
|
import { helperContent } from './helper-text.js';
|
|
7
7
|
function MuiSelectImpl({ node }) {
|
|
8
8
|
const field = useFieldBinding(node);
|
|
9
9
|
const enumValues = node.enumValues ?? [];
|
|
10
|
-
return (_jsx(TextField, { select: true, id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, label: field.label, error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
10
|
+
return (_jsx(TextField, { select: true, id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, label: _jsx(FieldLabelContent, { label: field.label, required: field.required }), error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
11
11
|
// Screen readers see the combobox div, not MUI's aria-hidden native
|
|
12
12
|
// input, so the required state goes on the display element.
|
|
13
13
|
//
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MuiSelect.js","sourceRoot":"","sources":["../../src/widgets/MuiSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAC/C,OAAO,QAAQ,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MuiSelect.js","sourceRoot":"","sources":["../../src/widgets/MuiSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAC/C,OAAO,QAAQ,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAMhD,SAAS,aAAa,CAAC,EAAE,IAAI,EAAe;IAC1C,MAAM,KAAK,GAAG,eAAe,CAAC,IAAiB,CAAC,CAAA;IAChD,MAAM,UAAU,GAAI,IAAkB,CAAC,UAAU,IAAI,EAAE,CAAA;IAEvD,OAAO,CACL,KAAC,SAAS,IACR,MAAM,QACN,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,EAC1B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,EAC9B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,EAChC,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,EACtC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC1E,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,EAChC,SAAS,QACT,SAAS,EAAE;YACT,oEAAoE;YACpE,4DAA4D;YAC5D,EAAE;YACF,qEAAqE;YACrE,kEAAkE;YAClE,oEAAoE;YACpE,kEAAkE;YAClE,qBAAqB;YACrB,MAAM,EAAE;gBACN,kBAAkB,EAAE;oBAClB,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;oBAC5C,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;iBAC7C;aACF;SACF,YAEA,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC1B,KAAC,QAAQ,IAA4B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,YAC7D,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IADxB,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAExB,CACZ,CAAC,GACQ,CACb,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import TextField from '@mui/material/TextField';
|
|
4
|
-
import { useFieldBinding } from '@texaryn/react';
|
|
4
|
+
import { FieldLabelContent, useFieldBinding } from '@texaryn/react';
|
|
5
5
|
import { helperContent } from './helper-text.js';
|
|
6
6
|
function MuiTextInputImpl({ node }) {
|
|
7
7
|
const field = useFieldBinding(node);
|
|
8
|
-
return (_jsx(TextField, { id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, placeholder: field.placeholder, label: field.label, error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
8
|
+
return (_jsx(TextField, { id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, placeholder: field.placeholder, label: _jsx(FieldLabelContent, { label: field.label, required: field.required }), error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
9
9
|
htmlInput: {
|
|
10
10
|
readOnly: field.readOnly,
|
|
11
11
|
'aria-required': field.required || undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MuiTextInput.js","sourceRoot":"","sources":["../../src/widgets/MuiTextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MuiTextInput.js","sourceRoot":"","sources":["../../src/widgets/MuiTextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAMhD,SAAS,gBAAgB,CAAC,EAAE,IAAI,EAAe;IAC7C,MAAM,KAAK,GAAG,eAAe,CAAC,IAAiB,CAAC,CAAA;IAEhD,OAAO,CACL,KAAC,SAAS,IACR,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,EAC1B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,EAC9B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,EAChC,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,EACtC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC1E,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,EAChC,SAAS,QACT,SAAS,EAAE;YACT,SAAS,EAAE;gBACT,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;gBAC5C,cAAc,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS;aAC3C;SACF,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import TextField from '@mui/material/TextField';
|
|
4
|
-
import { useFieldBinding } from '@texaryn/react';
|
|
4
|
+
import { FieldLabelContent, useFieldBinding } from '@texaryn/react';
|
|
5
5
|
import { helperContent } from './helper-text.js';
|
|
6
6
|
function MuiTextareaImpl({ node }) {
|
|
7
7
|
const field = useFieldBinding(node);
|
|
8
|
-
return (_jsx(TextField, { multiline: true, minRows: 3, id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, placeholder: field.placeholder, label: field.label, error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
8
|
+
return (_jsx(TextField, { multiline: true, minRows: 3, id: field.domInputProps.id, name: field.domInputProps.name, value: field.domInputProps.value, onChange: field.domInputProps.onChange, onBlur: field.domInputProps.onBlur, disabled: field.disabled, placeholder: field.placeholder, label: _jsx(FieldLabelContent, { label: field.label, required: field.required }), error: field.invalid, helperText: helperContent(field), fullWidth: true, slotProps: {
|
|
9
9
|
htmlInput: {
|
|
10
10
|
readOnly: field.readOnly,
|
|
11
11
|
'aria-required': field.required || undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MuiTextarea.js","sourceRoot":"","sources":["../../src/widgets/MuiTextarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"MuiTextarea.js","sourceRoot":"","sources":["../../src/widgets/MuiTextarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAMhD,SAAS,eAAe,CAAC,EAAE,IAAI,EAAe;IAC5C,MAAM,KAAK,GAAG,eAAe,CAAC,IAAiB,CAAC,CAAA;IAEhD,OAAO,CACL,KAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,CAAC,EACV,EAAE,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE,EAC1B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,EAC9B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,EAChC,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,EACtC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,KAAK,EAAE,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC1E,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,EAChC,SAAS,QACT,SAAS,EAAE;YACT,SAAS,EAAE;gBACT,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;gBAC5C,cAAc,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS;aAC3C;SACF,GACD,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@texaryn/react-mui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Material UI v9 widgets for Texaryn: MUI components on top of @texaryn/react",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
"CHANGELOG.md"
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@texaryn/core": "^0.
|
|
44
|
+
"@texaryn/core": "^0.8.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@mui/material": "^9.0.0",
|
|
48
48
|
"react": ">=18.0.0",
|
|
49
|
-
"@texaryn/react": "^0.
|
|
49
|
+
"@texaryn/react": "^0.4.1"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@emotion/react": "^11.14.0",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"jsdom": "^25.0.0",
|
|
58
58
|
"react": "^19.0.0",
|
|
59
59
|
"react-dom": "^19.0.0",
|
|
60
|
-
"@texaryn/react": "0.
|
|
61
|
-
"@texaryn/schema-json": "0.
|
|
60
|
+
"@texaryn/react": "0.4.1",
|
|
61
|
+
"@texaryn/schema-json": "0.4.0"
|
|
62
62
|
},
|
|
63
63
|
"scripts": {
|
|
64
64
|
"build": "tsc --build"
|