@aehrc/smart-forms-renderer 1.2.6 → 1.2.7
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/lib/components/FormComponents/ItemParts/ItemLabel.js +6 -6
- package/lib/components/FormComponents/ItemParts/ItemLabel.js.map +1 -1
- package/lib/components/FormComponents/ItemParts/RequiredAsterisk.js +4 -2
- package/lib/components/FormComponents/ItemParts/RequiredAsterisk.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FormComponents/ItemParts/ItemLabel.tsx +10 -10
- package/src/components/FormComponents/ItemParts/RequiredAsterisk.tsx +13 -3
|
@@ -42,12 +42,12 @@ const ItemLabel = memo(function ItemLabel(props) {
|
|
|
42
42
|
// Get styles from qItem._text
|
|
43
43
|
const stylesString = structuredDataCapture.getStyle(qItem._text);
|
|
44
44
|
const itemStyles = stylesString ? parseStyleToJs(stylesString) : {};
|
|
45
|
-
return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsx(Box, { position: "relative", display: "flex", flexGrow: 1, alignItems: "center", children: _jsxs(Typography, { id: 'label-' + qItem.linkId, component: component, variant: variant, htmlFor: qItem.type + '-' + qItem.linkId, color: textColor, sx: {
|
|
46
|
+
mt: 0.5,
|
|
47
|
+
flexGrow: 1,
|
|
48
|
+
...(parentStyles || {}),
|
|
49
|
+
...itemStyles
|
|
50
|
+
}, children: [required && requiredIndicatorPosition === 'start' ? (_jsx(RequiredAsterisk, { readOnly: readOnly, variant: variant, sx: { position: 'absolute', top: 4, left: -8 }, children: "*" })) : null, _jsx(ItemTextSwitcher, { qItem: qItem }), required && requiredIndicatorPosition === 'end' ? (_jsx(RequiredAsterisk, { readOnly: readOnly, variant: variant, children: "*" })) : null, displayFlyover !== '' ? (_jsx(Typography, { component: "span", sx: { ml: 0.75 }, children: _jsx(FlyoverItem, { displayFlyover: displayFlyover, readOnly: readOnly }) })) : null] }) }), _jsx(Box, { display: "flex", columnGap: 0.5, children: contextDisplayItems.map((item) => {
|
|
51
51
|
return _jsx(ContextDisplayItem, { displayItem: item }, item.linkId);
|
|
52
52
|
}) })] }));
|
|
53
53
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemLabel.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/ItemParts/ItemLabel.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAc,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,aAAa,CAAC;AAQxD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,SAAS,CAAC,KAAqB;IAC7D,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE/D,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAC7E,MAAM,yBAAyB,GAAG,sBAAsB,CAAC,GAAG,CAAC,yBAAyB,EAAE,CAAC;IAEzF,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IACnE,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAEtD,mEAAmE;IACnE,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAEpD,iDAAiD;IACjD,MAAM,iBAAiB,GAAG,mBAAmB,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAClG,MAAM,SAAS,GAAG,YAAY,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAEzF,8BAA8B;IAC9B,MAAM,YAAY,GAAG,qBAAqB,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO,CACL,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,aACpE,
|
|
1
|
+
{"version":3,"file":"ItemLabel.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/ItemParts/ItemLabel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Typography from '@mui/material/Typography';
|
|
3
3
|
import { useRendererConfigStore } from '../../../stores';
|
|
4
|
+
import { SrOnly } from '../SrOnly.styles';
|
|
4
5
|
function RequiredAsterisk(props) {
|
|
5
6
|
const { readOnly, children = '*', ...rest } = props;
|
|
6
7
|
const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
|
|
7
8
|
const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
|
|
8
|
-
return (_jsx(Typography, { component: "span", color: readOnly ? readOnlyTextColor : 'error',
|
|
9
|
+
return (_jsxs(_Fragment, { children: [_jsx(Typography, { component: "span", color: readOnly ? readOnlyTextColor : 'error', "aria-hidden": "true" // Hides visible asterisk from screen readers
|
|
10
|
+
, ...rest, children: children }), _jsx(SrOnly, { children: "Mandatory field" })] }));
|
|
9
11
|
}
|
|
10
12
|
export default RequiredAsterisk;
|
|
11
13
|
//# sourceMappingURL=RequiredAsterisk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RequiredAsterisk.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/ItemParts/RequiredAsterisk.tsx"],"names":[],"mappings":";AAmBA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"RequiredAsterisk.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/ItemParts/RequiredAsterisk.tsx"],"names":[],"mappings":";AAmBA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAM1C,SAAS,gBAAgB,CAAC,KAA4B;IACpD,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpD,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAE7E,MAAM,iBAAiB,GAAG,mBAAmB,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAElG,OAAO,CACL,8BACE,KAAC,UAAU,IACT,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,iBACjC,MAAM,CAAC,6CAA6C;qBAC5D,IAAI,YACP,QAAQ,GACE,EAGb,KAAC,MAAM,kCAAyB,IAC/B,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -60,16 +60,6 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
|
|
|
60
60
|
return (
|
|
61
61
|
<Box display="flex" alignItems="center" justifyContent="space-between">
|
|
62
62
|
<Box position="relative" display="flex" flexGrow={1} alignItems="center">
|
|
63
|
-
{/* Required asterisk position is in front of text */}
|
|
64
|
-
{required && requiredIndicatorPosition === 'start' ? (
|
|
65
|
-
<RequiredAsterisk
|
|
66
|
-
readOnly={readOnly}
|
|
67
|
-
variant={variant}
|
|
68
|
-
sx={{ position: 'absolute', top: 0, left: -8 }}>
|
|
69
|
-
*
|
|
70
|
-
</RequiredAsterisk>
|
|
71
|
-
) : null}
|
|
72
|
-
|
|
73
63
|
{/* Label typography */}
|
|
74
64
|
{/* Added 0.5 marginTop (4px) because item labels doesn't look in line with their fields */}
|
|
75
65
|
{/* flexGrow: 1 is important if xhtml and markdown rendering has width: 100% */}
|
|
@@ -85,6 +75,16 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
|
|
|
85
75
|
...(parentStyles || {}),
|
|
86
76
|
...itemStyles
|
|
87
77
|
}}>
|
|
78
|
+
{/* Required asterisk position is in front of text */}
|
|
79
|
+
{required && requiredIndicatorPosition === 'start' ? (
|
|
80
|
+
<RequiredAsterisk
|
|
81
|
+
readOnly={readOnly}
|
|
82
|
+
variant={variant}
|
|
83
|
+
sx={{ position: 'absolute', top: 4, left: -8 }}>
|
|
84
|
+
*
|
|
85
|
+
</RequiredAsterisk>
|
|
86
|
+
) : null}
|
|
87
|
+
|
|
88
88
|
<ItemTextSwitcher qItem={qItem} />
|
|
89
89
|
|
|
90
90
|
{/* Required asterisk position is behind text */}
|
|
@@ -19,6 +19,7 @@ import React from 'react';
|
|
|
19
19
|
import type { TypographyProps } from '@mui/material/Typography';
|
|
20
20
|
import Typography from '@mui/material/Typography';
|
|
21
21
|
import { useRendererConfigStore } from '../../../stores';
|
|
22
|
+
import { SrOnly } from '../SrOnly.styles';
|
|
22
23
|
|
|
23
24
|
interface RequiredAsteriskProps extends TypographyProps {
|
|
24
25
|
readOnly?: boolean;
|
|
@@ -32,9 +33,18 @@ function RequiredAsterisk(props: RequiredAsteriskProps) {
|
|
|
32
33
|
const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
|
|
33
34
|
|
|
34
35
|
return (
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
<>
|
|
37
|
+
<Typography
|
|
38
|
+
component="span"
|
|
39
|
+
color={readOnly ? readOnlyTextColor : 'error'}
|
|
40
|
+
aria-hidden="true" // Hides visible asterisk from screen readers
|
|
41
|
+
{...rest}>
|
|
42
|
+
{children}
|
|
43
|
+
</Typography>
|
|
44
|
+
|
|
45
|
+
{/* Screen-reader-only accessible label */}
|
|
46
|
+
<SrOnly>Mandatory field</SrOnly>
|
|
47
|
+
</>
|
|
38
48
|
);
|
|
39
49
|
}
|
|
40
50
|
|