@aehrc/smart-forms-renderer 1.2.6 → 1.2.8
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/GroupItem/GroupHeading.js +1 -1
- package/lib/components/FormComponents/GroupItem/GroupHeading.js.map +1 -1
- 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/lib/components/Tabs/FormBodySingleTab.js +6 -1
- package/lib/components/Tabs/FormBodySingleTab.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FormComponents/GroupItem/GroupHeading.tsx +8 -9
- package/src/components/FormComponents/ItemParts/ItemLabel.tsx +10 -10
- package/src/components/FormComponents/ItemParts/RequiredAsterisk.tsx +13 -3
- package/src/components/Tabs/FormBodySingleTab.tsx +28 -8
|
@@ -36,7 +36,7 @@ const GroupHeading = memo(function GroupHeading(props) {
|
|
|
36
36
|
// Get text color from parent styles if available
|
|
37
37
|
const textColor = parentStyles?.color ||
|
|
38
38
|
(readOnly && (!isTabHeading || !isPageHeading) ? 'text.secondary' : 'text.primary');
|
|
39
|
-
return (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", children: [
|
|
39
|
+
return (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", children: [_jsx(Box, { position: "relative", display: "flex", flexGrow: 1, alignItems: "center", children: _jsxs(Typography, { component: getHeadingTag(groupCardElevation), variant: "groupHeading", color: textColor, display: "flex", alignItems: "center", sx: { flexGrow: 1, ...(parentStyles || {}) }, children: [required && requiredIndicatorPosition === 'start' ? (_jsx(RequiredAsterisk, { sx: { position: 'absolute', top: 0, left: -8 }, children: "*" })) : null, _jsx(ItemTextSwitcher, { qItem: qItem }), required && requiredIndicatorPosition === 'end' ? (_jsx(RequiredAsterisk, { readOnly: readOnly, variant: "groupHeading", 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) => {
|
|
40
40
|
return _jsx(ContextDisplayItem, { displayItem: item }, item.linkId);
|
|
41
41
|
}) })] }) }));
|
|
42
42
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupHeading.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/GroupItem/GroupHeading.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAc,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AACjE,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAW9D,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,YAAY,CAAC,KAAwB;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,YAAY,EACb,GAAG,KAAK,CAAC;IAEV,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,MAAM,YAAY,GAAG,qBAAqB,KAAK,SAAS,CAAC;IACzD,MAAM,aAAa,GAAG,sBAAsB,KAAK,SAAS,CAAC;IAE3D,iDAAiD;IACjD,MAAM,SAAS,GACb,YAAY,EAAE,KAAK;QACnB,CAAC,QAAQ,IAAI,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAEtF,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,aAClD,
|
|
1
|
+
{"version":3,"file":"GroupHeading.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/GroupItem/GroupHeading.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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"}
|
|
@@ -24,10 +24,15 @@ import { useQuestionnaireStore, useRendererConfigStore } from '../../stores';
|
|
|
24
24
|
import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
|
|
25
25
|
import { useFocusTabHeading } from '../../hooks/useFocusTabHeading';
|
|
26
26
|
import useDisplayCqfAndCalculatedExpression from '../../hooks/useDisplayCqfAndCalculatedExpression';
|
|
27
|
+
import RequiredAsterisk from '../FormComponents/ItemParts/RequiredAsterisk';
|
|
28
|
+
import useRenderingExtensions from '../../hooks/useRenderingExtensions';
|
|
27
29
|
const FormBodySingleTab = memo(function FormBodySingleTab(props) {
|
|
28
30
|
const { qItem, contextDisplayItems, selected, tabLabel, listIndex } = props;
|
|
29
31
|
const switchTab = useQuestionnaireStore.use.switchTab();
|
|
30
32
|
const disableHeadingFocusOnTabSwitch = useRendererConfigStore.use.disableHeadingFocusOnTabSwitch();
|
|
33
|
+
const requiredIndicatorPosition = useRendererConfigStore.use.requiredIndicatorPosition();
|
|
34
|
+
const { required } = useRenderingExtensions(qItem);
|
|
35
|
+
const readOnly = qItem.readOnly ?? false;
|
|
31
36
|
const focusHeading = useFocusTabHeading();
|
|
32
37
|
// Get aria-label text if available
|
|
33
38
|
const itemTextAriaLabel = useDisplayCqfAndCalculatedExpression(qItem, 'item._text.aria-label') ?? undefined;
|
|
@@ -41,7 +46,7 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props) {
|
|
|
41
46
|
}, 100); // Small delay to ensure panel is rendered
|
|
42
47
|
}
|
|
43
48
|
}
|
|
44
|
-
return (_jsx(_Fragment, { children: _jsx(ListItemButton, { selected: selected, sx: { my: 0.1, minHeight: '36px' }, onClick: handleTabClick, children: _jsx(ListItemText, { primary: _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, { id: `tab-${listIndex}`, component: "span", fontWeight: 600, fontSize: "0.8125rem", "aria-label": itemTextAriaLabel, children: tabLabel }), _jsx(Box, { display: "flex", minHeight: 24, minWidth: 24, ml: 1, children: contextDisplayItems.map((item) => {
|
|
49
|
+
return (_jsx(_Fragment, { children: _jsx(ListItemButton, { selected: selected, sx: { my: 0.1, minHeight: '36px' }, onClick: handleTabClick, children: _jsx(ListItemText, { primary: _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 0.25, children: [required && requiredIndicatorPosition === 'start' ? (_jsx(RequiredAsterisk, { children: "*" })) : null, _jsx(Typography, { id: `tab-${listIndex}`, component: "span", fontWeight: 600, fontSize: "0.8125rem", "aria-label": itemTextAriaLabel, children: tabLabel }), required && requiredIndicatorPosition === 'end' ? (_jsx(RequiredAsterisk, { readOnly: readOnly, variant: "groupHeading", children: "*" })) : null] }), _jsx(Box, { display: "flex", minHeight: 24, minWidth: 24, ml: 1, children: contextDisplayItems.map((item) => {
|
|
45
50
|
return _jsx(ContextDisplayItem, { displayItem: item }, item.linkId);
|
|
46
51
|
}) })] }) }) }) }));
|
|
47
52
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormBodySingleTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/FormBodySingleTab.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAc,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAE7E,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,oCAAoC,MAAM,kDAAkD,CAAC;
|
|
1
|
+
{"version":3,"file":"FormBodySingleTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/FormBodySingleTab.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -64,15 +64,6 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
|
|
|
64
64
|
<>
|
|
65
65
|
<Box display="flex" alignItems="center" width="100%">
|
|
66
66
|
<Box position="relative" display="flex" flexGrow={1} alignItems="center">
|
|
67
|
-
{/* Required asterisk position is in front of text */}
|
|
68
|
-
{required && requiredIndicatorPosition === 'start' ? (
|
|
69
|
-
<RequiredAsterisk
|
|
70
|
-
sx={{ position: 'absolute', top: 0, left: -8 }} // Adjust top and left values as needed
|
|
71
|
-
>
|
|
72
|
-
*
|
|
73
|
-
</RequiredAsterisk>
|
|
74
|
-
) : null}
|
|
75
|
-
|
|
76
67
|
{/* Group Heading typography */}
|
|
77
68
|
{/* flexGrow: 1 is important if xhtml and markdown rendering has width: 100% */}
|
|
78
69
|
<Typography
|
|
@@ -82,6 +73,14 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
|
|
|
82
73
|
display="flex"
|
|
83
74
|
alignItems="center"
|
|
84
75
|
sx={{ flexGrow: 1, ...(parentStyles || {}) }}>
|
|
76
|
+
{/* Required asterisk position is in front of text */}
|
|
77
|
+
{required && requiredIndicatorPosition === 'start' ? (
|
|
78
|
+
<RequiredAsterisk
|
|
79
|
+
sx={{ position: 'absolute', top: 0, left: -8 }} // Adjust top and left values as needed
|
|
80
|
+
>
|
|
81
|
+
*
|
|
82
|
+
</RequiredAsterisk>
|
|
83
|
+
) : null}
|
|
85
84
|
<ItemTextSwitcher qItem={qItem} />
|
|
86
85
|
|
|
87
86
|
{/* Required asterisk position is behind text */}
|
|
@@ -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
|
|
|
@@ -25,6 +25,8 @@ import type { QuestionnaireItem } from 'fhir/r4';
|
|
|
25
25
|
import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
|
|
26
26
|
import { useFocusTabHeading } from '../../hooks/useFocusTabHeading';
|
|
27
27
|
import useDisplayCqfAndCalculatedExpression from '../../hooks/useDisplayCqfAndCalculatedExpression';
|
|
28
|
+
import RequiredAsterisk from '../FormComponents/ItemParts/RequiredAsterisk';
|
|
29
|
+
import useRenderingExtensions from '../../hooks/useRenderingExtensions';
|
|
28
30
|
|
|
29
31
|
interface FormBodySingleTabProps {
|
|
30
32
|
qItem: QuestionnaireItem;
|
|
@@ -40,6 +42,10 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
|
|
|
40
42
|
const switchTab = useQuestionnaireStore.use.switchTab();
|
|
41
43
|
const disableHeadingFocusOnTabSwitch =
|
|
42
44
|
useRendererConfigStore.use.disableHeadingFocusOnTabSwitch();
|
|
45
|
+
const requiredIndicatorPosition = useRendererConfigStore.use.requiredIndicatorPosition();
|
|
46
|
+
|
|
47
|
+
const { required } = useRenderingExtensions(qItem);
|
|
48
|
+
const readOnly = qItem.readOnly ?? false;
|
|
43
49
|
|
|
44
50
|
const focusHeading = useFocusTabHeading();
|
|
45
51
|
|
|
@@ -68,14 +74,28 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
|
|
|
68
74
|
<ListItemText
|
|
69
75
|
primary={
|
|
70
76
|
<Box display="flex" alignItems="center" justifyContent="space-between">
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
77
|
+
<Box display="flex" gap={0.25}>
|
|
78
|
+
{/* Required asterisk position is in front of text */}
|
|
79
|
+
{required && requiredIndicatorPosition === 'start' ? (
|
|
80
|
+
<RequiredAsterisk>*</RequiredAsterisk>
|
|
81
|
+
) : null}
|
|
82
|
+
<Typography
|
|
83
|
+
id={`tab-${listIndex}`}
|
|
84
|
+
component="span"
|
|
85
|
+
fontWeight={600}
|
|
86
|
+
fontSize="0.8125rem"
|
|
87
|
+
aria-label={itemTextAriaLabel}>
|
|
88
|
+
{tabLabel}
|
|
89
|
+
</Typography>
|
|
90
|
+
|
|
91
|
+
{/* Required asterisk position is behind text */}
|
|
92
|
+
{required && requiredIndicatorPosition === 'end' ? (
|
|
93
|
+
<RequiredAsterisk readOnly={readOnly} variant="groupHeading">
|
|
94
|
+
*
|
|
95
|
+
</RequiredAsterisk>
|
|
96
|
+
) : null}
|
|
97
|
+
</Box>
|
|
98
|
+
|
|
79
99
|
<Box display="flex" minHeight={24} minWidth={24} ml={1}>
|
|
80
100
|
{contextDisplayItems.map((item) => {
|
|
81
101
|
return <ContextDisplayItem key={item.linkId} displayItem={item} />;
|