@aehrc/smart-forms-renderer 0.7.2 → 0.8.1

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -16,7 +16,10 @@
  */
 
 import React, { useState } from 'react';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -28,16 +31,19 @@ import RepeatField from './RepeatField';
 import Collapse from '@mui/material/Collapse';
 import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface RepeatItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface RepeatItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function RepeatItem(props: RepeatItemProps) {
-  const { qItem, qrItem, onQrItemChange } = props;
+  const { qItem, qrItem, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayInstructions } = useRenderingExtensions(qItem);
 
   const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
@@ -84,7 +90,7 @@ function RepeatItem(props: RepeatItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <TransitionGroup>
           {repeatAnswers.map(({ nanoId, answer }, index) => {
             const repeatAnswerQrItem = createEmptyQrItem(qItem);
@@ -99,6 +105,7 @@ function RepeatItem(props: RepeatItemProps) {
                   qrItem={repeatAnswerQrItem}
                   answer={answer}
                   numOfRepeatAnswers={repeatAnswers.length}
+                  parentIsReadOnly={parentIsReadOnly}
                   onDeleteAnswer={() => handleDeleteItem(index)}
                   onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
                 />
@@ -108,7 +115,7 @@ function RepeatItem(props: RepeatItemProps) {
         </TransitionGroup>
       </ItemFieldGrid>
 
-      <AddItemButton repeatAnswers={repeatAnswers} onAddItem={handleAddItem} />
+      <AddItemButton repeatAnswers={repeatAnswers} readOnly={readOnly} onAddItem={handleAddItem} />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -20,22 +20,28 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
 import SingleItemSwitcher from './SingleItemSwitcher';
 import useHidden from '../../../hooks/useHidden';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface SingleItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+    props;
 
   const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
 
@@ -49,6 +55,7 @@ function SingleItem(props: SingleItemProps) {
     [updateEnableWhenItem, onQrItemChange, qItem.linkId]
   );
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
     return null;
@@ -60,6 +67,8 @@ function SingleItem(props: SingleItemProps) {
       qrItem={qrItem}
       isRepeated={isRepeated}
       isTabled={isTabled}
+      textShown={textShown}
+      parentIsReadOnly={readOnly}
       onQrItemChange={handleQrItemChange}
     />
   );

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -23,7 +23,9 @@ import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import StringItem from '../StringItem/StringItem';
 import BooleanItem from '../BooleanItem/BooleanItem';
@@ -39,13 +41,16 @@ import UrlItem from '../UrlItem/UrlItem';
 interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItemSwitcher(props: SingleItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+    props;
 
   switch (qItem.type) {
     case 'string':
@@ -55,6 +60,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -65,6 +71,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -75,6 +82,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -85,6 +93,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -95,6 +104,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -104,6 +114,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -116,6 +127,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -126,6 +138,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -136,6 +149,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          textShown={textShown}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -146,6 +161,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          textShown={textShown}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -156,6 +173,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -19,6 +19,7 @@ import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -32,23 +33,24 @@ import StringField from './StringField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface StringItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 function StringItem(props: StringItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -111,7 +113,7 @@ function StringItem(props: StringItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <StringField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/Tables/AddRowButton.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interface';
+
+interface AddItemButtonProps {
+  repeatGroups: RepeatGroupSingle[];
+  readOnly: boolean;
+  onAddItem: () => void;
+}
+
+function AddRowButton(props: AddItemButtonProps) {
+  const { repeatGroups, readOnly, onAddItem } = props;
+
+  const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === null || readOnly;
+
+  return (
+    <Box display="flex" flexDirection="row-reverse">
+      <Button
+        variant="contained"
+        size="small"
+        startIcon={<AddIcon />}
+        disabled={isDisabled}
+        onClick={onAddItem}
+        data-test="button-add-repeat-item">
+        Add Row
+      </Button>
+    </Box>
+  );
+}
+
+export default AddRowButton;

package/src/components/FormComponents/Tables/DeleteRowButton.tsx

@@ -26,13 +26,14 @@ import type { QuestionnaireResponseItem } from 'fhir/r4';
 interface DeleteRowButtonProps {
   nullableQrItem: QuestionnaireResponseItem | null;
   numOfRows: number;
+  readOnly: boolean;
   onDeleteItem: () => void;
 }
 
 function DeleteRowButton(props: DeleteRowButtonProps) {
-  const { nullableQrItem, numOfRows, onDeleteItem } = props;
+  const { nullableQrItem, numOfRows, readOnly, onDeleteItem } = props;
 
-  const isDisabled = nullableQrItem === null || numOfRows === 1;
+  const isDisabled = nullableQrItem === null || numOfRows === 1 || readOnly;
   return (
     <DeleteButtonTableCell>
       <Tooltip title="Delete item">

package/src/components/FormComponents/Tables/{QItemGroupTable.tsx → GroupTable.tsx}

@@ -18,10 +18,8 @@
 import React, { useMemo, useState } from 'react';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -29,28 +27,33 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
-
-import AddIcon from '@mui/icons-material/Add';
-import QItemGroupTableRow from './QItemGroupTableRow';
+import GroupTableRow from './GroupTableRow';
 import { HeaderTableCell } from './Table.styles';
 import { QGroupContainerBox } from '../../Box.styles';
 import { mapQItemsIndex } from '../../../utils/mapItem';
-import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrRepeatGroupChangeHandler
+} from '../../../interfaces/renderProps.interface';
 import useInitialiseGroupTable from '../../../hooks/useInitialiseGroupTable';
 import { nanoid } from 'nanoid';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import DeleteRowButton from './DeleteRowButton';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import cloneDeep from 'lodash.clonedeep';
+import AddRowButton from './AddRowButton';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface Props extends PropsWithQrRepeatGroupChangeHandler {
+interface Props extends PropsWithQrRepeatGroupChangeHandler, PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItems: QuestionnaireResponseItem[];
   groupCardElevation: number;
 }
 
-function QItemGroupTable(props: Props) {
-  const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+function GroupTable(props: Props) {
+  const { qItem, qrItems, groupCardElevation, parentIsReadOnly, onQrRepeatGroupChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const initialisedGroupTables = useInitialiseGroupTable(qrItems);
 
@@ -119,8 +122,11 @@ function QItemGroupTable(props: Props) {
     <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
       {groupCardElevation !== 1 ? (
         <>
-          <Typography fontSize={13} variant="h6">
-            <LabelWrapper qItem={qItem} />
+          <Typography
+            fontSize={13}
+            variant="h6"
+            color={readOnly ? 'text.secondary' : 'text.primary'}>
+            <LabelWrapper qItem={qItem} readOnly={readOnly} />
           </Typography>
           <Divider sx={{ my: 1 }} light />
         </>
@@ -128,15 +134,7 @@ function QItemGroupTable(props: Props) {
       <TableContainer component={Paper} elevation={groupCardElevation}>
         <Table>
           <caption>
-            <Stack direction="row" justifyContent="end">
-              <Button
-                variant="contained"
-                size="small"
-                startIcon={<AddIcon />}
-                onClick={handleAddRow}>
-                Add Row
-              </Button>
-            </Stack>
+            <AddRowButton repeatGroups={tableRows} readOnly={readOnly} onAddItem={handleAddRow} />
           </caption>
           <TableHead>
             <TableRow>
@@ -155,15 +153,17 @@ function QItemGroupTable(props: Props) {
 
               return (
                 <TableRow key={nanoId}>
-                  <QItemGroupTableRow
+                  <GroupTableRow
                     qItem={qItem}
                     qrItem={answeredQrItem}
                     qItemsIndexMap={qItemsIndexMap}
+                    parentIsReadOnly={parentIsReadOnly}
                     onQrItemChange={(newQrGroup) => handleRowChange(newQrGroup, index)}
                   />
                   <DeleteRowButton
                     nullableQrItem={nullableQrItem}
                     numOfRows={tableRows.length}
+                    readOnly={readOnly}
                     onDeleteItem={() => handleDeleteRow(index)}
                   />
                 </TableRow>
@@ -176,4 +176,4 @@ function QItemGroupTable(props: Props) {
   );
 }
 
-export default QItemGroupTable;
+export default GroupTable;

package/src/components/FormComponents/Tables/{QItemGroupTableRow.tsx → GroupTableRow.tsx}

@@ -22,15 +22,18 @@ import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import { StandardTableCell } from './Table.styles';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 
-interface Props extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   qItemsIndexMap: Record<string, number>;
 }
 
-function QItemGroupTableRow(props: Props) {
-  const { qItem, qrItem, qItemsIndexMap, onQrItemChange } = props;
+function GroupTableRow(props: Props) {
+  const { qItem, qrItem, qItemsIndexMap, parentIsReadOnly, onQrItemChange } = props;
 
   const rowItems = qItem.item;
   const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
@@ -65,6 +68,7 @@ function QItemGroupTableRow(props: Props) {
               qrItem={qrItem}
               isRepeated={true}
               isTabled={true}
+              parentIsReadOnly={parentIsReadOnly}
               onQrItemChange={handleQrRowItemChange}
             />
           </StandardTableCell>
@@ -74,4 +78,4 @@ function QItemGroupTableRow(props: Props) {
   );
 }
 
-export default QItemGroupTableRow;
+export default GroupTableRow;

package/src/components/FormComponents/Tables/index.ts

@@ -15,4 +15,4 @@
  * limitations under the License.
  */
 
-export { default as GroupTable } from './QItemGroupTable';
+export { default as GroupTable } from './GroupTable';

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -18,6 +18,7 @@
 import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -31,23 +32,24 @@ import TextField from './TextField';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface TextItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+    PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function TextItem(props: TextItemProps) {
-  const { qItem, qrItem, isRepeated, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -109,7 +111,7 @@ function TextItem(props: TextItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-text-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <TextField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -29,21 +30,22 @@ import TimeField from './TimeField';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface TimeItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function TimeItem(props: TimeItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
-  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayPrompt, displayInstructions, entryFormat } = useRenderingExtensions(qItem);
 
   // Init input value
   let timeString: string | null = null;
@@ -77,7 +79,7 @@ function TimeItem(props: TimeItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <TimeField
           value={timeDayJs}
           displayPrompt={displayPrompt}

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -19,6 +19,7 @@ import React, { useCallback, useState } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -30,23 +31,24 @@ import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import UrlField from './UrlField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface UrlItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 function UrlItem(props: UrlItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -98,7 +100,7 @@ function UrlItem(props: UrlItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <UrlField
           linkId={qItem.linkId}
           input={input}

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -61,7 +61,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
     <Grid container spacing={2}>
       <TabContext value={currentTab.toString()}>
         <Grid item xs={12} md={3.5} lg={3} xl={2.75}>
-          <FormBodyTabListWrapper qFormItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
+          <FormBodyTabListWrapper topLevelItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
         </Grid>
 
         <Grid item xs={12} md={8.5} lg={9} xl={9.25}>