@aehrc/smart-forms-renderer 0.3.0 → 0.4.0

package/src/components/FormComponents/QItemChoice/QItemChoice.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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 { QItemChoiceControl } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import QItemChoiceRadioAnswerOption from './QItemChoiceRadioAnswerOption';
+import QItemChoiceSelectAnswerOption from './QItemChoiceSelectAnswerOption';
+import QItemChoiceCheckboxAnswerOption from './QItemChoiceCheckboxAnswerOption';
+import QItemChoiceAutocomplete from './QItemChoiceAutocomplete';
+import QItemChoiceSelectAnswerValueSet from './QItemChoiceSelectAnswerValueSet';
+import { getChoiceControlType, getChoiceOrientation } from '../../../utils/choice';
+import QItemChoiceRadioAnswerValueSet from './QItemChoiceRadioAnswerValueSet';
+import QItemChoiceCheckboxAnswerValueSet from './QItemChoiceCheckboxAnswerValueSet';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoice(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const orientation = getChoiceOrientation(qItem);
+  const choiceControlType = getChoiceControlType(qItem);
+
+  switch (choiceControlType) {
+    case QItemChoiceControl.Radio:
+      if (qItem.answerOption) {
+        return (
+          <QItemChoiceRadioAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      } else {
+        return (
+          <QItemChoiceRadioAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      }
+    case QItemChoiceControl.Checkbox:
+      if (qItem.answerOption) {
+        return (
+          <QItemChoiceCheckboxAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      } else {
+        return (
+          <QItemChoiceCheckboxAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      }
+    case QItemChoiceControl.Autocomplete:
+      return (
+        <QItemChoiceAutocomplete
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case QItemChoiceControl.Select:
+      if (qItem.answerOption) {
+        return (
+          <QItemChoiceSelectAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      } else {
+        return (
+          <QItemChoiceSelectAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+    default:
+      return null;
+  }
+}
+
+export default QItemChoice;

package/src/components/FormComponents/QItemChoice/QItemChoiceAutocomplete.js

@@ -0,0 +1,85 @@
+/*
+ * 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, { useState } from 'react';
+import { Autocomplete, CircularProgress, Fade, Grid, Tooltip } from '@mui/material';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import SearchIcon from '@mui/icons-material/Search';
+import useDebounce from '../../../hooks/useDebounce';
+import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
+import InfoIcon from '@mui/icons-material/Info';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorIcon from '@mui/icons-material/Error';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { getTerminologyServerUrl } from '../../../utils/valueSet';
+import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+function QItemChoiceAutocomplete(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    const qrChoice = qrItem !== null && qrItem !== void 0 ? qrItem : createEmptyQrItem(qItem);
+    // Init input value
+    let valueCoding;
+    if (qrChoice.answer) {
+        valueCoding = qrChoice.answer[0].valueCoding;
+    }
+    // Get additional rendering extensions
+    const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } = useRenderingExtensions(qItem);
+    // Query ontoserver for options
+    const maxList = 10;
+    const [input, setInput] = useState('');
+    const debouncedInput = useDebounce(input, AUTOCOMPLETE_DEBOUNCE_DURATION);
+    const answerValueSetUrl = qItem.answerValueSet;
+    const terminologyServerUrl = getTerminologyServerUrl(qItem);
+    const { options, loading, feedback } = useTerminologyServerQuery(answerValueSetUrl, maxList, input, debouncedInput, terminologyServerUrl);
+    if (!answerValueSetUrl)
+        return null;
+    // Event handlers
+    function handleValueChange(_, newValue) {
+        if (newValue === null) {
+            setInput('');
+            onQrItemChange(createEmptyQrItem(qItem));
+            return;
+        }
+        onQrItemChange(Object.assign(Object.assign({}, createEmptyQrItem(qItem)), { answer: [{ valueCoding: newValue }] }));
+    }
+    const choiceAutocomplete = (React.createElement(React.Fragment, null,
+        React.createElement(Autocomplete, { id: qItem.id, value: valueCoding !== null && valueCoding !== void 0 ? valueCoding : null, placeholder: entryFormat, options: options, getOptionLabel: (option) => `${option.display}`, isOptionEqualToValue: (option, value) => option.id === value.id, loading: loading, loadingText: 'Fetching results...', clearOnEscape: true, autoHighlight: true, onChange: handleValueChange, sx: { maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }, filterOptions: (x) => x, renderInput: (params) => (React.createElement(StandardTextField, Object.assign({}, params, { onChange: (e) => setInput(e.target.value), isTabled: isTabled, disabled: readOnly, label: displayPrompt, size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { startAdornment: (React.createElement(React.Fragment, null,
+                        !valueCoding ? React.createElement(SearchIcon, { fontSize: "small", sx: { ml: 0.5 } }) : null,
+                        params.InputProps.startAdornment)), endAdornment: (React.createElement(React.Fragment, null,
+                        loading ? (React.createElement(CircularProgress, { color: "inherit", size: 16 })) : feedback ? (React.createElement(Fade, { in: !!feedback, timeout: 300 },
+                            React.createElement(Tooltip, { title: feedback.message, arrow: true, sx: { ml: 1 } }, {
+                                info: React.createElement(InfoIcon, { fontSize: "small", color: "info" }),
+                                warning: React.createElement(WarningAmberIcon, { fontSize: "small", color: "warning" }),
+                                success: React.createElement(DoneIcon, { fontSize: "small", color: "success" }),
+                                error: React.createElement(ErrorIcon, { fontSize: "small", color: "error" })
+                            }[feedback.color]))) : null,
+                        params.InputProps.endAdornment,
+                        displayUnit)) }) }))) })));
+    const renderQItemChoiceAutocomplete = isRepeated ? (React.createElement(React.Fragment, null, choiceAutocomplete)) : (React.createElement(FullWidthFormComponentBox, null,
+        React.createElement(Grid, { container: true, columnSpacing: 6 },
+            React.createElement(Grid, { item: true, xs: 5 },
+                React.createElement(LabelWrapper, { qItem: qItem })),
+            React.createElement(Grid, { item: true, xs: 7 },
+                choiceAutocomplete,
+                React.createElement(DisplayInstructions, { displayInstructions: displayInstructions })))));
+    return React.createElement(React.Fragment, null, renderQItemChoiceAutocomplete);
+}
+export default QItemChoiceAutocomplete;
+//# sourceMappingURL=QItemChoiceAutocomplete.js.map

package/src/components/FormComponents/QItemChoice/QItemChoiceAutocomplete.js.map

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

package/src/components/FormComponents/QItemChoice/QItemChoiceAutocomplete.tsx

@@ -0,0 +1,178 @@
+/*
+ * 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 type { ChangeEvent, SyntheticEvent } from 'react';
+import React, { useState } from 'react';
+import { Autocomplete, CircularProgress, Fade, Grid, Tooltip } from '@mui/material';
+import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import SearchIcon from '@mui/icons-material/Search';
+import useDebounce from '../../../hooks/useDebounce';
+import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
+import InfoIcon from '@mui/icons-material/Info';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorIcon from '@mui/icons-material/Error';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { getTerminologyServerUrl } from '../../../utils/valueSet';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface QItemChoiceAutocompleteProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoiceAutocomplete(props: QItemChoiceAutocompleteProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const qrChoice = qrItem ?? createEmptyQrItem(qItem);
+
+  // Init input value
+  let valueCoding: Coding | undefined;
+  if (qrChoice.answer) {
+    valueCoding = qrChoice.answer[0].valueCoding;
+  }
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Query ontoserver for options
+  const maxList = 10;
+
+  const [input, setInput] = useState('');
+  const debouncedInput = useDebounce(input, AUTOCOMPLETE_DEBOUNCE_DURATION);
+
+  const answerValueSetUrl = qItem.answerValueSet;
+  const terminologyServerUrl = getTerminologyServerUrl(qItem);
+  const { options, loading, feedback } = useTerminologyServerQuery(
+    answerValueSetUrl,
+    maxList,
+    input,
+    debouncedInput,
+    terminologyServerUrl
+  );
+
+  if (!answerValueSetUrl) return null;
+
+  // Event handlers
+  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | null) {
+    if (newValue === null) {
+      setInput('');
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
+    }
+
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueCoding: newValue }]
+    });
+  }
+
+  const choiceAutocomplete = (
+    <>
+      <Autocomplete
+        id={qItem.id}
+        value={valueCoding ?? null}
+        placeholder={entryFormat}
+        options={options}
+        getOptionLabel={(option) => `${option.display}`}
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        loading={loading}
+        loadingText={'Fetching results...'}
+        clearOnEscape
+        autoHighlight
+        onChange={handleValueChange}
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        filterOptions={(x) => x}
+        renderInput={(params) => (
+          <StandardTextField
+            {...params}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
+            isTabled={isTabled}
+            disabled={readOnly}
+            label={displayPrompt}
+            size="small"
+            InputProps={{
+              ...params.InputProps,
+
+              startAdornment: (
+                <>
+                  {!valueCoding ? <SearchIcon fontSize="small" sx={{ ml: 0.5 }} /> : null}
+                  {params.InputProps.startAdornment}
+                </>
+              ),
+              endAdornment: (
+                <>
+                  {loading ? (
+                    <CircularProgress color="inherit" size={16} />
+                  ) : feedback ? (
+                    <Fade in={!!feedback} timeout={300}>
+                      <Tooltip title={feedback.message} arrow sx={{ ml: 1 }}>
+                        {
+                          {
+                            info: <InfoIcon fontSize="small" color="info" />,
+                            warning: <WarningAmberIcon fontSize="small" color="warning" />,
+                            success: <DoneIcon fontSize="small" color="success" />,
+                            error: <ErrorIcon fontSize="small" color="error" />
+                          }[feedback.color]
+                        }
+                      </Tooltip>
+                    </Fade>
+                  ) : null}
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+          />
+        )}
+      />
+    </>
+  );
+
+  const renderQItemChoiceAutocomplete = isRepeated ? (
+    <>{choiceAutocomplete}</>
+  ) : (
+    <FullWidthFormComponentBox>
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceAutocomplete}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceAutocomplete}</>;
+}
+
+export default QItemChoiceAutocomplete;

package/src/components/FormComponents/QItemChoice/QItemChoiceCheckboxAnswerOption.js

@@ -0,0 +1,70 @@
+/*
+ * 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 { Grid } from '@mui/material';
+import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import QItemChoiceCheckboxSingle from '../ItemParts/QItemCheckboxSingle';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { QFormGroup } from '../Item.styles';
+import { updateQrCheckboxAnswers } from '../../../utils/choice';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+function QItemChoiceCheckboxAnswerOption(props) {
+    var _a;
+    const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+    // Init input value
+    const qrChoiceCheckbox = qrItem !== null && qrItem !== void 0 ? qrItem : createEmptyQrItem(qItem);
+    const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
+    // Get additional rendering extensions
+    const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+    // Event handlers
+    function handleCheckedChange(changedValue) {
+        const answerOptions = qItem.answerOption;
+        if (!answerOptions)
+            return null;
+        const updatedQrChoiceCheckbox = updateQrCheckboxAnswers(changedValue, answers, answerOptions, qrChoiceCheckbox, isRepeated);
+        if (updatedQrChoiceCheckbox) {
+            onQrItemChange(updatedQrChoiceCheckbox);
+        }
+    }
+    const choiceCheckbox = (React.createElement(QFormGroup, { row: orientation === QItemChoiceOrientation.Horizontal }, (_a = qItem.answerOption) === null || _a === void 0 ? void 0 : _a.map((option) => {
+        var _a, _b, _c;
+        if (option['valueCoding']) {
+            return (React.createElement(QItemChoiceCheckboxSingle, { key: (_a = option.valueCoding.code) !== null && _a !== void 0 ? _a : '', value: (_b = option.valueCoding.code) !== null && _b !== void 0 ? _b : '', label: (_c = option.valueCoding.display) !== null && _c !== void 0 ? _c : `${option.valueCoding.code}`, readOnly: readOnly, isChecked: answers.some((answer) => JSON.stringify(answer) === JSON.stringify(option)), onCheckedChange: handleCheckedChange }));
+        }
+        else if (option['valueString']) {
+            return (React.createElement(QItemChoiceCheckboxSingle, { key: option.valueString, value: option.valueString, label: option.valueString, readOnly: readOnly, isChecked: answers.some((answer) => answer.valueString === option.valueString), onCheckedChange: handleCheckedChange }));
+        }
+        else if (option['valueInteger']) {
+            return (React.createElement(QItemChoiceCheckboxSingle, { key: option.valueInteger, value: option.valueInteger.toString(), label: option.valueInteger.toString(), readOnly: readOnly, isChecked: answers.some((answer) => answer.valueInteger === option.valueInteger), onCheckedChange: handleCheckedChange }));
+        }
+        else {
+            return null;
+        }
+    })));
+    return (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-choice-checkbox-answer-option-box" },
+        React.createElement(Grid, { container: true, columnSpacing: 6 },
+            React.createElement(Grid, { item: true, xs: 5 },
+                React.createElement(LabelWrapper, { qItem: qItem })),
+            React.createElement(Grid, { item: true, xs: 7 },
+                choiceCheckbox,
+                React.createElement(DisplayInstructions, { displayInstructions: displayInstructions })))));
+}
+export default QItemChoiceCheckboxAnswerOption;
+//# sourceMappingURL=QItemChoiceCheckboxAnswerOption.js.map

package/src/components/FormComponents/QItemChoice/QItemChoiceCheckboxAnswerOption.js.map

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

package/src/components/FormComponents/QItemChoice/QItemChoiceCheckboxAnswerOption.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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 { Grid } from '@mui/material';
+import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import QItemChoiceCheckboxSingle from '../ItemParts/QItemCheckboxSingle';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { QFormGroup } from '../Item.styles';
+import { updateQrCheckboxAnswers } from '../../../utils/choice';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface QItemChoiceCheckboxProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  orientation: QItemChoiceOrientation;
+}
+
+function QItemChoiceCheckboxAnswerOption(props: QItemChoiceCheckboxProps) {
+  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+
+  // Init input value
+  const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
+  const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
+
+  // Get additional rendering extensions
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleCheckedChange(changedValue: string) {
+    const answerOptions = qItem.answerOption;
+    if (!answerOptions) return null;
+
+    const updatedQrChoiceCheckbox = updateQrCheckboxAnswers(
+      changedValue,
+      answers,
+      answerOptions,
+      qrChoiceCheckbox,
+      isRepeated
+    );
+
+    if (updatedQrChoiceCheckbox) {
+      onQrItemChange(updatedQrChoiceCheckbox);
+    }
+  }
+
+  const choiceCheckbox = (
+    <QFormGroup row={orientation === QItemChoiceOrientation.Horizontal}>
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+              isChecked={answers.some(
+                (answer) => JSON.stringify(answer) === JSON.stringify(option)
+              )}
+              onCheckedChange={handleCheckedChange}
+            />
+          );
+        } else if (option['valueString']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
+              onCheckedChange={handleCheckedChange}
+            />
+          );
+        } else if (option['valueInteger']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
+              onCheckedChange={handleCheckedChange}
+            />
+          );
+        } else {
+          return null;
+        }
+      })}
+    </QFormGroup>
+  );
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceCheckbox}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default QItemChoiceCheckboxAnswerOption;