@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/FormComponents/GroupItem/GroupHeading.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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, { memo } from 'react';
+import { Box, Divider } from '@mui/material';
+import { QGroupHeadingTypography } from '../Typography.styles';
+import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getContextDisplays } from '../../../utils/tabs';
+import ContextDisplayItem from '../ItemParts/ContextDisplayItem';
+import LabelText from '../ItemParts/ItemLabelText';
+
+interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  tabIsMarkedAsComplete?: boolean;
+}
+
+const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
+  const { qItem, tabIsMarkedAsComplete, isRepeated } = props;
+
+  const contextDisplayItems = getContextDisplays(qItem);
+
+  if (isRepeated) {
+    return null;
+  }
+
+  return (
+    <>
+      <Box display="flex" alignItems="center" justifyContent="space-between">
+        <QGroupHeadingTypography variant="h6" isTabHeading={tabIsMarkedAsComplete !== undefined}>
+          <LabelText qItem={qItem} />
+        </QGroupHeadingTypography>
+
+        <Box display="flex" columnGap={0.5}>
+          {contextDisplayItems.map((item) => {
+            return <ContextDisplayItem key={item.linkId} displayItem={item} />;
+          })}
+        </Box>
+      </Box>
+      {qItem.text ? <Divider sx={{ mt: 1, mb: 1.5 }} light /> : null}
+    </>
+  );
+});
+
+export default GroupHeading;

package/src/components/FormComponents/GroupItem/GroupItem.styles.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { Card, styled } from '@mui/material';
+
+export const GroupCard = styled(Card, {
+  shouldForwardProp: (prop) => prop !== 'elevation' && prop !== 'isRepeated'
+})<{ elevation: number; isRepeated: boolean }>(({ elevation, isRepeated }) => ({
+  paddingTop: '20px',
+  paddingBottom: '20px',
+  paddingLeft: elevation === 1 ? '26px' : '24px',
+  paddingRight: elevation === 1 ? '26px' : '24px',
+  marginBottom: isRepeated ? 0 : '28px'
+}));

package/src/components/FormComponents/GroupItem/GroupItem.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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, { useMemo } from 'react';
+import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { QGroupContainerBox } from '../../Box.styles';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
+import useHidden from '../../../hooks/useHidden';
+import type { Tabs } from '../../../interfaces/tab.interface';
+import GroupHeading from './GroupHeading';
+import { GroupCard } from './GroupItem.styles';
+import NextTabButtonWrapper from './NextTabButtonWrapper';
+import GroupItemSwitcher from './GroupItemSwitcher';
+
+interface GroupItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  groupCardElevation: number;
+  tabIsMarkedAsComplete?: boolean;
+  tabs?: Tabs;
+  currentTabIndex?: number;
+  goToNextTab?: (nextTabIndex: number) => unknown;
+}
+
+function GroupItem(props: GroupItemProps) {
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    groupCardElevation,
+    tabIsMarkedAsComplete,
+    tabs,
+    currentTabIndex,
+    onQrItemChange
+  } = props;
+
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  const qItems = qItem.item;
+  const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const qrItems = qrGroup.item;
+
+  // Event Handlers
+  function handleQrItemChange(newQrItem: QuestionnaireResponseItem) {
+    const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
+    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    onQrItemChange(updatedQrGroup);
+  }
+
+  function handleQrRepeatGroupChange(qrRepeatGroup: QrRepeatGroup) {
+    const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
+    updateQrGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
+    onQrItemChange(updatedQrGroup);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load group, something has gone terribly wrong.</>;
+  }
+
+  // If an item has multiple answers, it is a repeat group
+  const qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
+    getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+
+  return (
+    <QGroupContainerBox
+      cardElevation={groupCardElevation}
+      isRepeated={isRepeated}
+      data-test="q-item-group-box">
+      <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
+        <GroupHeading
+          qItem={qItem}
+          tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+          isRepeated={isRepeated}
+        />
+        {qItems.map((qItem: QuestionnaireItem, i) => {
+          const qrItemOrItems = qrItemsByIndex[i];
+
+          return (
+            <GroupItemSwitcher
+              key={qItem.linkId}
+              qItem={qItem}
+              qrItemOrItems={qrItemOrItems}
+              groupCardElevation={groupCardElevation}
+              onQrItemChange={handleQrItemChange}
+              onQrRepeatGroupChange={handleQrRepeatGroupChange}
+            />
+          );
+        })}
+
+        {/* Next tab button at the end of each tab group */}
+        <NextTabButtonWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+      </GroupCard>
+    </QGroupContainerBox>
+  );
+}
+
+export default GroupItem;

package/src/components/FormComponents/GroupItem/GroupItemSwitcher.tsx

@@ -0,0 +1,150 @@
+/*
+ * 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 type {
+  PropsWithQrItemChangeHandler,
+  PropsWithQrRepeatGroupChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { isSpecificItemControl } from '../../../utils/itemControl';
+import QItemGroupTable from '../Tables/QItemGroupTable';
+import RepeatGroup from '../RepeatGroup/RepeatGroup';
+import { isRepeatItemAndNotCheckbox } from '../../../utils/qItem';
+import RepeatItem from '../RepeatItem/RepeatItem';
+import SingleItem from '../SingleItem/SingleItem';
+import useHidden from '../../../hooks/useHidden';
+import GroupItem from './GroupItem';
+import GridGroup from '../GridGroup/GridGroup';
+
+interface GroupItemSwitcherProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithQrRepeatGroupChangeHandler {
+  qItem: QuestionnaireItem;
+  qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
+  groupCardElevation: number;
+}
+
+function GroupItemSwitcher(props: GroupItemSwitcherProps) {
+  const { qItem, qrItemOrItems, groupCardElevation, onQrItemChange, onQrRepeatGroupChange } = props;
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  // If there are multiple answers
+  const hasMultipleAnswers = Array.isArray(qrItemOrItems);
+  if (hasMultipleAnswers) {
+    const qrItems = qrItemOrItems;
+
+    // qItem should always be either a repeatGroup or a groupTable item
+    // groupTables item have qItem.repeats = true and qItem.type = 'group' as well
+    if (!qItem.repeats || qItem.type !== 'group') {
+      return <>Something went wrong here</>;
+    }
+
+    if (isSpecificItemControl(qItem, 'gtable')) {
+      return (
+        <QItemGroupTable
+          qItem={qItem}
+          qrItems={qrItems}
+          groupCardElevation={groupCardElevation + 1}
+          onQrRepeatGroupChange={onQrRepeatGroupChange}
+        />
+      );
+    }
+
+    return (
+      <RepeatGroup
+        qItem={qItem}
+        qrItems={qrItems}
+        groupCardElevation={groupCardElevation + 1}
+        onQrRepeatGroupChange={onQrRepeatGroupChange}
+      />
+    );
+  }
+
+  // If there is only one answer
+  const qrItem = qrItemOrItems;
+  const itemIsGrid = isSpecificItemControl(qItem, 'grid');
+  if (itemIsGrid) {
+    return (
+      <GridGroup
+        qItem={qItem}
+        qrItem={qrItem}
+        groupCardElevation={groupCardElevation}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
+  const itemRepeatsAndIsNotCheckbox = isRepeatItemAndNotCheckbox(qItem);
+  if (itemRepeatsAndIsNotCheckbox) {
+    if (qItem.type === 'group') {
+      // If qItem is RepeatGroup or a groupTable item in this decision branch,
+      // their qrItem array should always be empty
+      if (isSpecificItemControl(qItem, 'gtable')) {
+        return (
+          <QItemGroupTable
+            qItem={qItem}
+            qrItems={[]}
+            groupCardElevation={groupCardElevation + 1}
+            onQrRepeatGroupChange={onQrRepeatGroupChange}
+          />
+        );
+      }
+
+      return (
+        <RepeatGroup
+          qItem={qItem}
+          qrItems={[]}
+          groupCardElevation={groupCardElevation + 1}
+          onQrRepeatGroupChange={onQrRepeatGroupChange}
+        />
+      );
+    }
+
+    return <RepeatItem qItem={qItem} qrItem={qrItem} onQrItemChange={onQrItemChange} />;
+  }
+
+  // if qItem is not a repeating question or is a checkbox
+  if (qItem.type === 'group') {
+    return (
+      <GroupItem
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={false}
+        groupCardElevation={groupCardElevation + 1}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
+  // Defaults to a normal QItemSwitcher
+  return (
+    <SingleItem
+      qItem={qItem}
+      qrItem={qrItem}
+      isRepeated={false}
+      isTabled={false}
+      onQrItemChange={onQrItemChange}
+    />
+  );
+}
+
+export default GroupItemSwitcher;

package/src/components/FormComponents/GroupItem/NextTabButton.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { Button } from '@mui/material';
+import Iconify from '../../Iconify/Iconify';
+
+interface NextTabButtonProps {
+  isDisabled: boolean;
+  onNextTabClick: () => void;
+}
+
+function NextTabButton(props: NextTabButtonProps) {
+  const { isDisabled, onNextTabClick } = props;
+
+  return (
+    <Button
+      variant="contained"
+      size="small"
+      endIcon={<Iconify icon="material-symbols:arrow-forward" />}
+      disabled={isDisabled}
+      color="secondary"
+      onClick={onNextTabClick}>
+      Next tab
+    </Button>
+  );
+}
+
+export default NextTabButton;

package/src/components/FormComponents/GroupItem/NextTabButtonWrapper.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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, { memo } from 'react';
+import { Box } from '@mui/material';
+import { findNumOfVisibleTabs, getNextVisibleTabIndex } from '../../../utils/tabs';
+import type { Tabs } from '../../../interfaces/tab.interface';
+import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
+import NextTabButton from './NextTabButton';
+
+interface NextTabButtonWrapperProps {
+  currentTabIndex?: number;
+  tabs?: Tabs;
+}
+
+const NextTabButtonWrapper = memo(function NextTabWrapper(props: NextTabButtonWrapperProps) {
+  const { currentTabIndex, tabs } = props;
+
+  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
+  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
+  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+  const switchTab = useQuestionnaireStore((state) => state.switchTab);
+
+  const tabsNotDefined = currentTabIndex === undefined || tabs === undefined;
+
+  function handleNextTabClick() {
+    if (tabsNotDefined) {
+      return;
+    }
+
+    const nextVisibleTabIndex = getNextVisibleTabIndex({
+      tabs,
+      currentTabIndex,
+      enableWhenIsActivated,
+      enableWhenItems,
+      enableWhenExpressions
+    });
+    switchTab(nextVisibleTabIndex);
+
+    // Scroll to top of page
+    window.scrollTo(0, 0);
+  }
+
+  if (tabsNotDefined) {
+    return null;
+  }
+
+  if (currentTabIndex === Object.keys(tabs).length - 1) {
+    return null;
+  }
+
+  const buttonIsDisabled =
+    findNumOfVisibleTabs(tabs, enableWhenIsActivated, enableWhenItems, enableWhenExpressions) <= 1;
+
+  return (
+    <Box display="flex" flexDirection="row-reverse" mt={3}>
+      <NextTabButton isDisabled={buttonIsDisabled} onNextTabClick={handleNextTabClick} />
+    </Box>
+  );
+});
+
+export default NextTabButtonWrapper;

package/src/components/FormComponents/IntegerItem/IntegerField.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 { InputAdornment } from '@mui/material';
+import { StandardTextField } from '../Textfield.styles';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+
+interface IntegerFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  value: number;
+  feedback: string;
+  displayPrompt: string;
+  displayUnit: string;
+  entryFormat: string;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onInputChange: (value: string) => void;
+}
+
+function IntegerField(props: IntegerFieldProps) {
+  const {
+    linkId,
+    value,
+    feedback,
+    displayPrompt,
+    displayUnit,
+    entryFormat,
+    readOnly,
+    calcExpUpdated,
+    isTabled,
+    onInputChange
+  } = props;
+
+  return (
+    <StandardTextField
+      id={linkId}
+      value={value.toString()}
+      error={!!feedback}
+      onChange={(event) => onInputChange(event.target.value)}
+      disabled={readOnly}
+      label={displayPrompt}
+      placeholder={entryFormat}
+      fullWidth
+      isTabled={isTabled}
+      size="small"
+      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position={'end'}>
+            <FadingCheckIcon fadeIn={calcExpUpdated} />
+            {displayUnit}
+          </InputAdornment>
+        )
+      }}
+      data-test="q-item-integer-field"
+    />
+  );
+}
+
+export default IntegerField;

package/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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, { useCallback, useState } from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import useValidationError from '../../../hooks/useValidationError';
+import debounce from 'lodash.debounce';
+import { createEmptyQrItemWithUnit } from '../../../utils/qrItem';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import IntegerField from './IntegerField';
+import useIntegerCalculatedExpression from '../../../hooks/useIntegerCalculatedExpression';
+import { parseValidInteger } from '../../../utils/parseInputs';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+
+interface IntegerItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function IntegerItem(props: IntegerItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const {
+    displayUnit,
+    displayPrompt,
+    displayInstructions,
+    readOnly,
+    entryFormat,
+    regexValidation,
+    maxLength
+  } = useRenderingExtensions(qItem);
+
+  // Init input value
+  let valueInteger = 0;
+  if (qrItem?.answer) {
+    if (qrItem?.answer[0].valueInteger) {
+      valueInteger = qrItem.answer[0].valueInteger;
+    }
+    if (qrItem?.answer[0].valueDecimal) {
+      valueInteger = Math.round(qrItem.answer[0].valueDecimal);
+    }
+  }
+  const [value, setValue] = useState(valueInteger);
+
+  // Perform validation checks
+  const feedback = useValidationError(value.toString(), regexValidation, maxLength);
+
+  // Process calculated expressions
+  const { calcExpUpdated } = useIntegerCalculatedExpression({
+    qItem: qItem,
+    inputValue: value,
+    displayUnit: displayUnit,
+    setInputValue: (newValue) => {
+      setValue(newValue);
+    },
+    onQrItemChange: onQrItemChange
+  });
+
+  // Event handlers
+  function handleInputChange(newInput: string) {
+    const newValue = parseValidInteger(newInput);
+
+    setValue(newValue);
+    updateQrItemWithDebounce(newValue);
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateQrItemWithDebounce = useCallback(
+    debounce((newValue: number) => {
+      onQrItemChange({
+        ...createEmptyQrItemWithUnit(qItem, displayUnit),
+        answer: [{ valueInteger: newValue }]
+      });
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem, displayUnit]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  if (isRepeated) {
+    return (
+      <IntegerField
+        linkId={qItem.linkId}
+        value={value}
+        feedback={feedback}
+        displayPrompt={displayPrompt}
+        displayUnit={displayUnit}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
+        isTabled={isTabled}
+        onInputChange={handleInputChange}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-integer-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <IntegerField
+          linkId={qItem.linkId}
+          value={value}
+          feedback={feedback}
+          displayPrompt={displayPrompt}
+          displayUnit={displayUnit}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          isTabled={isTabled}
+          onInputChange={handleInputChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default IntegerItem;