@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

package/src/components/FormComponents/DecimalItem/DecimalField.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 FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import { StandardTextField } from '../Textfield.styles';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+
+interface DecimalFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  input: string;
+  feedback: string;
+  displayPrompt: string;
+  displayUnit: string;
+  entryFormat: string;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onInputChange: (value: string) => void;
+}
+
+function DecimalField(props: DecimalFieldProps) {
+  const {
+    linkId,
+    input,
+    feedback,
+    displayPrompt,
+    displayUnit,
+    entryFormat,
+    readOnly,
+    calcExpUpdated,
+    isTabled,
+    onInputChange
+  } = props;
+
+  return (
+    <StandardTextField
+      id={linkId}
+      value={input}
+      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-decimal-field"
+    />
+  );
+}
+
+export default DecimalField;

package/src/components/FormComponents/DecimalItem/DecimalItem.js

@@ -0,0 +1,80 @@
+/*
+ * 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 useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValidationError from '../../../hooks/useValidationError';
+import debounce from 'lodash.debounce';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { createEmptyQrItemWithUnit } from '../../../utils/qrItem';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import DecimalField from './DecimalField';
+import { parseDecimalStringToFloat, parseDecimalStringWithPrecision } from '../../../utils/parseInputs';
+import { getDecimalPrecision } from '../../../utils/itemControl';
+import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
+function DecimalItem(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    // Get additional rendering extensions
+    const precision = getDecimalPrecision(qItem);
+    const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat, regexValidation, maxLength } = useRenderingExtensions(qItem);
+    // Init input value
+    let valueDecimal = 0.0;
+    let initialInput = '0';
+    if (qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer) {
+        if (qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer[0].valueDecimal) {
+            valueDecimal = qrItem.answer[0].valueDecimal;
+        }
+        if (qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer[0].valueInteger) {
+            valueDecimal = qrItem.answer[0].valueInteger;
+        }
+        initialInput = precision ? valueDecimal.toFixed(precision) : valueDecimal.toString();
+    }
+    const [input, setInput] = useState(initialInput);
+    // Perform validation checks
+    const feedback = useValidationError(input, regexValidation, maxLength);
+    // Process calculated expressions
+    const { calcExpUpdated } = useDecimalCalculatedExpression({
+        qItem: qItem,
+        inputValue: input,
+        displayUnit: displayUnit,
+        precision: precision,
+        setInputValue: (newInput) => {
+            setInput(newInput);
+        },
+        onQrItemChange: onQrItemChange
+    });
+    // Event handlers
+    function handleInputChange(newInput) {
+        const parsedNewInput = parseDecimalStringWithPrecision(newInput, precision);
+        setInput(parsedNewInput);
+        updateQrItemWithDebounce(parsedNewInput);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const updateQrItemWithDebounce = useCallback(debounce((parsedNewInput) => {
+        onQrItemChange(Object.assign(Object.assign({}, createEmptyQrItemWithUnit(qItem, displayUnit)), { answer: precision
+                ? [{ valueDecimal: parseDecimalStringToFloat(parsedNewInput, precision) }]
+                : [{ valueDecimal: parseFloat(parsedNewInput) }] }));
+    }, DEBOUNCE_DURATION), [onQrItemChange, qItem, displayUnit, precision]); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+    if (isRepeated) {
+        return (React.createElement(DecimalField, { linkId: qItem.linkId, input: input, feedback: feedback, displayPrompt: displayPrompt, displayUnit: displayUnit, entryFormat: entryFormat, readOnly: readOnly, calcExpUpdated: calcExpUpdated, isTabled: isTabled, onInputChange: handleInputChange }));
+    }
+    return (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-decimal-box" },
+        React.createElement(ItemFieldGrid, { qItem: qItem, displayInstructions: displayInstructions },
+            React.createElement(DecimalField, { linkId: qItem.linkId, input: input, feedback: feedback, displayPrompt: displayPrompt, displayUnit: displayUnit, entryFormat: entryFormat, readOnly: readOnly, calcExpUpdated: calcExpUpdated, isTabled: isTabled, onInputChange: handleInputChange }))));
+}
+export default DecimalItem;
+//# sourceMappingURL=DecimalItem.js.map

package/src/components/FormComponents/DecimalItem/DecimalItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecimalItem.js","sourceRoot":"","sources":["DecimalItem.tsx"],"names":[],"mappings":"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"}

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -0,0 +1,152 @@
+/*
+ * 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 { FullWidthFormComponentBox } from '../../Box.styles';
+import useValidationError from '../../../hooks/useValidationError';
+import debounce from 'lodash.debounce';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { createEmptyQrItemWithUnit } from '../../../utils/qrItem';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import DecimalField from './DecimalField';
+import {
+  parseDecimalStringToFloat,
+  parseDecimalStringWithPrecision
+} from '../../../utils/parseInputs';
+import { getDecimalPrecision } from '../../../utils/itemControl';
+import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
+
+interface DecimalItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function DecimalItem(props: DecimalItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const precision = getDecimalPrecision(qItem);
+  const {
+    displayUnit,
+    displayPrompt,
+    displayInstructions,
+    readOnly,
+    entryFormat,
+    regexValidation,
+    maxLength
+  } = useRenderingExtensions(qItem);
+
+  // Init input value
+  let valueDecimal = 0.0;
+  let initialInput = '0';
+  if (qrItem?.answer) {
+    if (qrItem?.answer[0].valueDecimal) {
+      valueDecimal = qrItem.answer[0].valueDecimal;
+    }
+
+    if (qrItem?.answer[0].valueInteger) {
+      valueDecimal = qrItem.answer[0].valueInteger;
+    }
+
+    initialInput = precision ? valueDecimal.toFixed(precision) : valueDecimal.toString();
+  }
+  const [input, setInput] = useState(initialInput);
+
+  // Perform validation checks
+  const feedback = useValidationError(input, regexValidation, maxLength);
+
+  // Process calculated expressions
+  const { calcExpUpdated } = useDecimalCalculatedExpression({
+    qItem: qItem,
+    inputValue: input,
+    displayUnit: displayUnit,
+    precision: precision,
+    setInputValue: (newInput) => {
+      setInput(newInput);
+    },
+    onQrItemChange: onQrItemChange
+  });
+
+  // Event handlers
+  function handleInputChange(newInput: string) {
+    const parsedNewInput: string = parseDecimalStringWithPrecision(newInput, precision);
+
+    setInput(parsedNewInput);
+    updateQrItemWithDebounce(parsedNewInput);
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateQrItemWithDebounce = useCallback(
+    debounce((parsedNewInput: string) => {
+      onQrItemChange({
+        ...createEmptyQrItemWithUnit(qItem, displayUnit),
+        answer: precision
+          ? [{ valueDecimal: parseDecimalStringToFloat(parsedNewInput, precision) }]
+          : [{ valueDecimal: parseFloat(parsedNewInput) }]
+      });
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem, displayUnit, precision]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  if (isRepeated) {
+    return (
+      <DecimalField
+        linkId={qItem.linkId}
+        input={input}
+        feedback={feedback}
+        displayPrompt={displayPrompt}
+        displayUnit={displayUnit}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
+        isTabled={isTabled}
+        onInputChange={handleInputChange}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-decimal-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <DecimalField
+          linkId={qItem.linkId}
+          input={input}
+          feedback={feedback}
+          displayPrompt={displayPrompt}
+          displayUnit={displayUnit}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          isTabled={isTabled}
+          onInputChange={handleInputChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default DecimalItem;

package/src/components/FormComponents/DisplayItem/DisplayInstructions.js

@@ -0,0 +1,26 @@
+/*
+ * 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 { Typography } from '@mui/material';
+import { DisplayInstructionsWrapper } from './DisplayInstructions.styles';
+const DisplayInstructions = memo(function DisplayInstructions(props) {
+    const { displayInstructions } = props;
+    return displayInstructions ? (React.createElement(DisplayInstructionsWrapper, null,
+        React.createElement(Typography, { variant: "caption", fontSize: 10.5 }, displayInstructions))) : null;
+});
+export default DisplayInstructions;
+//# sourceMappingURL=DisplayInstructions.js.map

package/src/components/FormComponents/DisplayItem/DisplayInstructions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayInstructions.js","sourceRoot":"","sources":["DisplayInstructions.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAM1E,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,mBAAmB,CAAC,KAA+B;IAC3F,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAEtC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAC3B,oBAAC,0BAA0B;QACzB,oBAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,IACzC,mBAAmB,CACT,CACc,CAC9B,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/src/components/FormComponents/DisplayItem/DisplayInstructions.styles.js

@@ -0,0 +1,23 @@
+/*
+ * 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 { Box, styled } from '@mui/material';
+export const DisplayInstructionsWrapper = styled(Box)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    textTransform: 'capitalize',
+    marginBottom: '8px'
+}));
+//# sourceMappingURL=DisplayInstructions.styles.js.map

package/src/components/FormComponents/DisplayItem/DisplayInstructions.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayInstructions.styles.js","sourceRoot":"","sources":["DisplayInstructions.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;IACnC,aAAa,EAAE,YAAY;IAC3B,YAAY,EAAE,KAAK;CACpB,CAAC,CAAC,CAAC"}

package/src/components/FormComponents/DisplayItem/DisplayInstructions.styles.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { Box, styled } from '@mui/material';
+
+export const DisplayInstructionsWrapper = styled(Box)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textTransform: 'capitalize',
+  marginBottom: '8px'
+}));

package/src/components/FormComponents/DisplayItem/DisplayInstructions.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { Typography } from '@mui/material';
+import { DisplayInstructionsWrapper } from './DisplayInstructions.styles';
+
+interface DisplayInstructionsProps {
+  displayInstructions: string;
+}
+
+const DisplayInstructions = memo(function DisplayInstructions(props: DisplayInstructionsProps) {
+  const { displayInstructions } = props;
+
+  return displayInstructions ? (
+    <DisplayInstructionsWrapper>
+      <Typography variant="caption" fontSize={10.5}>
+        {displayInstructions}
+      </Typography>
+    </DisplayInstructionsWrapper>
+  ) : null;
+});
+
+export default DisplayInstructions;

package/src/components/FormComponents/DisplayItem/DisplayItem.js

@@ -0,0 +1,31 @@
+/*
+ * 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 { FullWidthFormComponentBox } from '../../Box.styles';
+import { isSpecificItemControl } from '../../../utils/itemControl';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+const DisplayItem = memo(function DisplayItem(props) {
+    const { qItem } = props;
+    const isContextDisplay = isSpecificItemControl(qItem, 'context-display');
+    if (isContextDisplay) {
+        return null;
+    }
+    return (React.createElement(FullWidthFormComponentBox, null,
+        React.createElement(LabelWrapper, { qItem: qItem })));
+});
+export default DisplayItem;
+//# sourceMappingURL=DisplayItem.js.map

package/src/components/FormComponents/DisplayItem/DisplayItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayItem.js","sourceRoot":"","sources":["DisplayItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,YAAY,MAAM,+BAA+B,CAAC;AAMzD,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,WAAW,CAAC,KAAuB;IACnE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACzE,IAAI,gBAAgB,EAAE;QACpB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,yBAAyB;QACxB,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CACJ,CAC7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/src/components/FormComponents/DisplayItem/DisplayItem.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, { memo } from 'react';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import { isSpecificItemControl } from '../../../utils/itemControl';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface DisplayItemProps {
+  qItem: QuestionnaireItem;
+}
+
+const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
+  const { qItem } = props;
+
+  const isContextDisplay = isSpecificItemControl(qItem, 'context-display');
+  if (isContextDisplay) {
+    return null;
+  }
+
+  return (
+    <FullWidthFormComponentBox>
+      <LabelWrapper qItem={qItem} />
+    </FullWidthFormComponentBox>
+  );
+});
+
+export default DisplayItem;

package/src/components/FormComponents/GridGroup/GridGroup.js

@@ -0,0 +1,58 @@
+/*
+ * 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 { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import useHidden from '../../../hooks/useHidden';
+import { QGroupContainerBox } from '../../Box.styles';
+import { Divider, Paper, TableContainer, Typography } from '@mui/material';
+import { mapQItemsIndex } from '../../../utils/mapItem';
+import GridTable from './GridTable';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+function GridGroup(props) {
+    const { qItem, qrItem, groupCardElevation, onQrItemChange } = props;
+    const qRowItems = qItem.item;
+    const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+    const qrRowItems = qrGroup.item;
+    const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+    const columnLabels = useMemo(() => { var _a, _b; return (_b = (_a = qRowItems === null || qRowItems === void 0 ? void 0 : qRowItems[0].item) === null || _a === void 0 ? void 0 : _a.map((firstItem) => { var _a; return (_a = firstItem.text) !== null && _a !== void 0 ? _a : ' '; })) !== null && _b !== void 0 ? _b : []; }, [qRowItems]);
+    const itemIsHidden = useHidden(qItem);
+    if (itemIsHidden) {
+        return null;
+    }
+    if (!qRowItems || !qrRowItems) {
+        return React.createElement(React.Fragment, null, "Unable to load group, something has gone terribly wrong.");
+    }
+    // Check if there are row within the grid
+    if (qRowItems.length === 0) {
+        return null;
+    }
+    // Event Handlers
+    function handleRowChange(newQrItem) {
+        const updatedQrGroup = Object.assign({}, qrGroup);
+        updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+        onQrItemChange(updatedQrGroup);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QGroupContainerBox, { cardElevation: groupCardElevation, isRepeated: false, py: 3 },
+            React.createElement(Typography, { fontSize: 13, variant: "h6" },
+                React.createElement(LabelWrapper, { qItem: qItem })),
+            React.createElement(Divider, { sx: { my: 1 }, light: true }),
+            React.createElement(TableContainer, { component: Paper, elevation: groupCardElevation },
+                React.createElement(GridTable, { qItems: qRowItems, qrItems: qrRowItems, qItemsIndexMap: qItemsIndexMap, columnLabels: columnLabels, onQrItemChange: handleRowChange })))));
+}
+export default GridGroup;
+//# sourceMappingURL=GridGroup.js.map

package/src/components/FormComponents/GridGroup/GridGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridGroup.js","sourceRoot":"","sources":["GridGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,YAAY,MAAM,+BAA+B,CAAC;AAQzD,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,kBAAkB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEpE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC;IAC7B,MAAM,OAAO,GAAG,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAEhC,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAErE,MAAM,YAAY,GAAa,OAAO,CACpC,GAAG,EAAE,eAAC,OAAA,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAC,EAAE,IAAI,0CAAE,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,WAAC,OAAA,MAAA,SAAS,CAAC,IAAI,mCAAI,GAAG,CAAA,EAAA,CAAC,mCAAI,EAAE,CAAA,EAAA,EAC1E,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,YAAY,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,YAAY,EAAE;QAChB,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;QAC7B,OAAO,qGAA6D,CAAC;KACtE;IAED,yCAAyC;IACzC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;QAC1B,OAAO,IAAI,CAAC;KACb;IAED,iBAAiB;IACjB,SAAS,eAAe,CAAC,SAAoC;QAC3D,MAAM,cAAc,qBAAmC,OAAO,CAAE,CAAC;QACjE,aAAa,CAAC,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC;QAC/D,cAAc,CAAC,cAAc,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,CACL;QACE,oBAAC,kBAAkB,IAAC,aAAa,EAAE,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;YAC7E,oBAAC,UAAU,IAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAC,IAAI;gBACpC,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CACnB;YACb,oBAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,KAAK,SAAG;YAEhC,oBAAC,cAAc,IAAC,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB;gBAC7D,oBAAC,SAAS,IACR,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,UAAU,EACnB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,eAAe,GAC/B,CACa,CACE,CACpB,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}