@aehrc/smart-forms-renderer 0.27.2 → 0.27.4

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerOptionItem.tsx

@@ -15,15 +15,11 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
-import { CheckBoxOption } from '../../../interfaces/choice.enum';
+import React, { useCallback } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { getOpenLabelText } from '../../../utils/itemControl';
-import {
-  getOldOpenLabelAnswer,
-  updateQrOpenChoiceCheckboxAnswers
-} from '../../../utils/openChoice';
+import { updateOpenLabelAnswer } from '../../../utils/openChoice';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import debounce from 'lodash.debounce';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -35,10 +31,12 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import useOpenLabel from '../../../hooks/useOpenLabel';
+import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
+import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOptionFields';
 
 interface OpenChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -61,92 +59,95 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
+  // Init input value
+  const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
+  const answers = qrOpenChoiceCheckbox.answer ?? [];
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const openLabelText = getOpenLabelText(qItem);
   const { displayInstructions } = useRenderingExtensions(qItem);
+  const openLabelText = getOpenLabelText(qItem);
 
-  // Init answers
-  const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
-  const answers = useMemo(() => qrOpenChoiceCheckbox.answer ?? [], [qrOpenChoiceCheckbox.answer]);
-
-  // Init options and open label value
-  const answerOptions = qItem.answerOption;
-  let initialOpenLabelValue = '';
-  let initialOpenLabelChecked = false;
-  if (answerOptions) {
-    const oldLabelAnswer = getOldOpenLabelAnswer(answers, answerOptions);
-    if (oldLabelAnswer && oldLabelAnswer.valueString) {
-      initialOpenLabelValue = oldLabelAnswer.valueString;
-      initialOpenLabelChecked = true;
+  const options = qItem.answerOption ?? [];
+
+  const { openLabelValue, setOpenLabelValue, openLabelChecked, setOpenLabelChecked } = useOpenLabel(
+    options,
+    answers
+  );
+
+  // Event handlers
+
+  // One of the options is changed
+  // Processing is similar to a choice checkbox
+  function handleOptionChange(changedOptionValue: string) {
+    if (options.length === 0) {
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
+    }
+
+    // Process as a choice checkbox
+    const updatedQrItem = updateChoiceCheckboxAnswers(
+      changedOptionValue,
+      answers,
+      options,
+      qrOpenChoiceCheckbox,
+      isRepeated
+    );
+
+    if (updatedQrItem) {
+      onQrItemChange(updatedQrItem);
+    }
+
+    // If single-selection, uncheck open label
+    if (!isRepeated) {
+      setOpenLabelChecked(false);
     }
   }
-  const [openLabelValue, setOpenLabelValue] = useState(initialOpenLabelValue);
-  const [openLabelChecked, setOpenLabelChecked] = useState(initialOpenLabelChecked);
 
-  // Event handlers
-  const handleValueChange = useCallback(
-    (changedOptionValue: string | null, changedOpenLabelValue: string | null) => {
-      if (!answerOptions) return null;
-
-      let updatedQrChoiceCheckbox: QuestionnaireResponseItem | null = null;
-      if (changedOptionValue) {
-        updatedQrChoiceCheckbox = updateQrOpenChoiceCheckboxAnswers(
-          changedOptionValue,
-          null,
-          answers,
-          answerOptions,
-          qrOpenChoiceCheckbox,
-          CheckBoxOption.AnswerOption,
-          isRepeated
-        );
-      } else if (changedOpenLabelValue !== null) {
-        updatedQrChoiceCheckbox = updateQrOpenChoiceCheckboxAnswers(
-          null,
-          changedOpenLabelValue,
-          answers,
-          answerOptions,
-          qrOpenChoiceCheckbox,
-          CheckBoxOption.AnswerOption,
-          isRepeated
-        );
-      }
-
-      if (updatedQrChoiceCheckbox) {
-        onQrItemChange(updatedQrChoiceCheckbox);
-      }
-    },
-    [answerOptions, answers, isRepeated, onQrItemChange, qrOpenChoiceCheckbox]
-  );
+  function handleOpenLabelChange(openLabelChecked: boolean, changedOpenLabelValue: string) {
+    const updatedQrItem = updateOpenLabelAnswer(
+      openLabelChecked,
+      changedOpenLabelValue,
+      answers,
+      options,
+      qrOpenChoiceCheckbox,
+      isRepeated
+    );
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const updateOpenLabelValueWithDebounce = useCallback(
-    debounce((input: string) => {
-      handleValueChange(null, input);
-    }, DEBOUNCE_DURATION),
-    [handleValueChange]
-  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+    if (updatedQrItem) {
+      onQrItemChange(updatedQrItem);
+    }
+  }
 
   function handleOpenLabelCheckedChange(checked: boolean) {
-    handleValueChange(null, openLabelValue);
+    handleOpenLabelChange(checked, openLabelValue);
     setOpenLabelChecked(checked);
   }
 
   function handleOpenLabelInputChange(newValue: string) {
-    setOpenLabelValue(newValue);
     updateOpenLabelValueWithDebounce(newValue);
+    setOpenLabelValue(newValue);
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateOpenLabelValueWithDebounce = useCallback(
+    debounce((input: string) => {
+      handleOpenLabelChange(openLabelChecked, input);
+    }, DEBOUNCE_DURATION),
+    [handleOpenLabelChange]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
   if (showMinimalView) {
     return (
       <>
         <OpenChoiceCheckboxAnswerOptionFields
           qItem={qItem}
+          options={options}
           answers={answers}
           openLabelText={openLabelText}
           openLabelValue={openLabelValue}
           openLabelChecked={openLabelChecked}
           readOnly={readOnly}
-          onValueChange={handleValueChange}
+          onOptionChange={handleOptionChange}
           onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
           onOpenLabelInputChange={handleOpenLabelInputChange}
         />
@@ -163,12 +164,13 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceCheckboxAnswerOptionFields
           qItem={qItem}
+          options={options}
           answers={answers}
           openLabelText={openLabelText}
           openLabelValue={openLabelValue}
           openLabelChecked={openLabelChecked}
           readOnly={readOnly}
-          onValueChange={handleValueChange}
+          onOptionChange={handleOptionChange}
           onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
           onOpenLabelInputChange={handleOpenLabelInputChange}
         />

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerValueSetFields.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright 2024 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 { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
+import type {
+  QuestionnaireItem,
+  QuestionnaireItemAnswerOption,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
+import { getChoiceOrientation } from '../../../utils/choice';
+import { StyledFormGroup } from '../Item.styles';
+import CheckboxOptionList from '../ChoiceItems/CheckboxOptionList';
+import { StyledAlert } from '../../Alert.styles';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Typography from '@mui/material/Typography';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+
+interface OpenChoiceCheckboxFieldsProps {
+  qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
+  answers: QuestionnaireResponseItemAnswer[];
+  openLabelText: string | null;
+  openLabelValue: string;
+  openLabelChecked: boolean;
+  readOnly: boolean;
+  terminologyError: TerminologyError;
+  onOptionChange: (changedOptionValue: string) => void;
+  onOpenLabelCheckedChange: (checked: boolean) => void;
+  onOpenLabelInputChange: (input: string) => void;
+}
+
+function OpenChoiceCheckboxAnswerValueSetFields(props: OpenChoiceCheckboxFieldsProps) {
+  const {
+    qItem,
+    options,
+    answers,
+    openLabelText,
+    openLabelValue,
+    openLabelChecked,
+    readOnly,
+    terminologyError,
+    onOptionChange,
+    onOpenLabelCheckedChange,
+    onOpenLabelInputChange
+  } = props;
+
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
+
+  if (options.length > 0) {
+    return (
+      <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
+        <CheckboxOptionList
+          options={options}
+          answers={answers}
+          readOnly={readOnly}
+          onCheckedChange={onOptionChange}
+        />
+
+        {openLabelText !== null ? (
+          <CheckboxSingleWithOpenLabel
+            value={openLabelValue}
+            label={openLabelText}
+            isChecked={openLabelChecked}
+            onCheckedChange={onOpenLabelCheckedChange}
+            onInputChange={onOpenLabelInputChange}
+          />
+        ) : null}
+      </StyledFormGroup>
+    );
+  }
+
+  if (terminologyError.error) {
+    return (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
+        </Typography>
+      </StyledAlert>
+    );
+  }
+
+  return (
+    <StyledAlert color="error">
+      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+      <Typography variant="subtitle2">
+        Unable to fetch options from the questionnaire or launch context
+      </Typography>
+    </StyledAlert>
+  );
+}
+
+export default OpenChoiceCheckboxAnswerValueSetFields;

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerValueSetItem.tsx

@@ -0,0 +1,188 @@
+/*
+ * Copyright 2024 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, useMemo } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { getOpenLabelText } from '../../../utils/itemControl';
+import { updateOpenLabelAnswer } from '../../../utils/openChoice';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import debounce from 'lodash.debounce';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
+} from '../../../interfaces/renderProps.interface';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import OpenChoiceCheckboxAnswerValueSetFields from './OpenChoiceCheckboxAnswerValueSetFields';
+import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
+import useOpenLabel from '../../../hooks/useOpenLabel';
+import { convertCodingsToAnswerOptions, updateChoiceCheckboxAnswers } from '../../../utils/choice';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+
+interface OpenChoiceCheckboxAnswerValueSetItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+}
+
+function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerValueSetItemProps) {
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    showMinimalView = false,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
+
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
+  // Init input value
+  const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
+  const answers = qrOpenChoiceCheckbox.answer ?? [];
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
+  const openLabelText = getOpenLabelText(qItem);
+
+  // Get codings/options from valueSet
+  const { codings, terminologyError } = useValueSetCodings(qItem);
+
+  const options = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
+
+  const { openLabelValue, setOpenLabelValue, openLabelChecked, setOpenLabelChecked } = useOpenLabel(
+    options,
+    answers
+  );
+
+  // Event handlers
+
+  // One of the options is changed
+  // Processing is similar to a choice checkbox
+  function handleOptionChange(changedOptionValue: string) {
+    if (options.length === 0) {
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
+    }
+
+    // Process as a choice checkbox
+    const updatedQrItem = updateChoiceCheckboxAnswers(
+      changedOptionValue,
+      answers,
+      options,
+      qrOpenChoiceCheckbox,
+      isRepeated
+    );
+
+    if (updatedQrItem) {
+      onQrItemChange(updatedQrItem);
+    }
+
+    // If single-selection, uncheck open label
+    if (!isRepeated) {
+      setOpenLabelChecked(false);
+    }
+  }
+
+  function handleOpenLabelChange(openLabelChecked: boolean, changedOpenLabelValue: string) {
+    const updatedQrItem = updateOpenLabelAnswer(
+      openLabelChecked,
+      changedOpenLabelValue,
+      answers,
+      options,
+      qrOpenChoiceCheckbox,
+      isRepeated
+    );
+
+    if (updatedQrItem) {
+      onQrItemChange(updatedQrItem);
+    }
+  }
+
+  function handleOpenLabelCheckedChange(checked: boolean) {
+    handleOpenLabelChange(checked, openLabelValue);
+    setOpenLabelChecked(checked);
+  }
+
+  function handleOpenLabelInputChange(newValue: string) {
+    updateOpenLabelValueWithDebounce(newValue);
+    setOpenLabelValue(newValue);
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateOpenLabelValueWithDebounce = useCallback(
+    debounce((input: string) => {
+      handleOpenLabelChange(openLabelChecked, input);
+    }, DEBOUNCE_DURATION),
+    [handleOpenLabelChange]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  if (showMinimalView) {
+    return (
+      <>
+        <OpenChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
+          options={options}
+          answers={answers}
+          openLabelText={openLabelText}
+          openLabelValue={openLabelValue}
+          openLabelChecked={openLabelChecked}
+          readOnly={readOnly}
+          terminologyError={terminologyError}
+          onOptionChange={handleOptionChange}
+          onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+          onOpenLabelInputChange={handleOpenLabelInputChange}
+        />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+      </>
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox
+      data-test="q-item-open-choice-checkbox-answer-option-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
+        <OpenChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
+          options={options}
+          answers={answers}
+          openLabelText={openLabelText}
+          openLabelValue={openLabelValue}
+          openLabelChecked={openLabelChecked}
+          readOnly={readOnly}
+          terminologyError={terminologyError}
+          onOptionChange={handleOptionChange}
+          onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+          onOpenLabelInputChange={handleOpenLabelInputChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default OpenChoiceCheckboxAnswerValueSetItem;

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceItemSwitcher.tsx

@@ -31,6 +31,8 @@ import type {
   PropsWithQrItemChangeHandler,
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
+import OpenChoiceCheckboxAnswerValueSetItem from './OpenChoiceCheckboxAnswerValueSetItem';
+import OpenChoiceRadioAnswerValueSetItem from './OpenChoiceRadioAnswerValueSetItem';
 
 interface OpenChoiceItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
@@ -48,26 +50,51 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
 
   switch (getOpenChoiceControlType(qItem)) {
     case OpenChoiceItemControl.Checkbox:
-      return (
-        <OpenChoiceCheckboxAnswerOptionItem
-          qItem={qItem}
-          qrItem={qrItem}
-          isRepeated={qItem['repeats'] ?? false}
-          showMinimalView={showMinimalView}
-          parentIsReadOnly={parentIsReadOnly}
-          onQrItemChange={onQrItemChange}
-        />
-      );
+      if (qItem.answerValueSet) {
+        return (
+          <OpenChoiceCheckboxAnswerValueSetItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            showMinimalView={showMinimalView}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      } else {
+        return (
+          <OpenChoiceCheckboxAnswerOptionItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            showMinimalView={showMinimalView}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
     case OpenChoiceItemControl.Radio:
-      return (
-        <OpenChoiceRadioAnswerOptionItem
-          qItem={qItem}
-          qrItem={qrItem}
-          isRepeated={qItem['repeats'] ?? false}
-          parentIsReadOnly={parentIsReadOnly}
-          onQrItemChange={onQrItemChange}
-        />
-      );
+      if (qItem.answerValueSet) {
+        return (
+          <OpenChoiceRadioAnswerValueSetItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      } else {
+        return (
+          <OpenChoiceRadioAnswerOptionItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
     case OpenChoiceItemControl.Autocomplete:
       return (
         <OpenChoiceAutocompleteItem

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerOptionFields.tsx

@@ -18,14 +18,15 @@
 import type { ChangeEvent } from 'react';
 import React from 'react';
 import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
-import type { QuestionnaireItem } from 'fhir/r4';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import { StyledRadioGroup } from '../Item.styles';
 import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
-import RadioAnswerOptionButtons from '../ItemParts/RadioAnswerOptionButtons';
+import RadioOptionList from '../ItemParts/RadioOptionList';
 import { getChoiceOrientation } from '../../../utils/choice';
 
 interface OpenChoiceRadioAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
   valueRadio: string | null;
   openLabelText: string | null;
   openLabelValue: string | null;
@@ -37,6 +38,7 @@ interface OpenChoiceRadioAnswerOptionFieldsProps {
 function OpenChoiceRadioAnswerOptionFields(props: OpenChoiceRadioAnswerOptionFieldsProps) {
   const {
     qItem,
+    options,
     valueRadio,
     openLabelText,
     openLabelValue,
@@ -55,7 +57,7 @@ function OpenChoiceRadioAnswerOptionFields(props: OpenChoiceRadioAnswerOptionFie
       onChange={(e: ChangeEvent<HTMLInputElement>) => onValueChange(e.target.value, null)}
       value={valueRadio}
       data-test="q-item-radio-group">
-      <RadioAnswerOptionButtons qItem={qItem} readOnly={readOnly} />
+      <RadioOptionList options={options} readOnly={readOnly} />
 
       {openLabelText ? (
         <RadioButtonWithOpenLabel