@aehrc/smart-forms-renderer 0.5.0 → 0.6.0

package/src/components/FormComponents/{QItemChoice/QItemChoice.tsx → ChoiceItems/ChoiceItemSwitcher.tsx}

@@ -16,23 +16,23 @@
  */
 
 import React from 'react';
-import { QItemChoiceControl } from '../../../interfaces/choice.enum';
+import { ChoiceItemControl } 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 ChoiceRadioAnswerOptionItem from './ChoiceRadioAnswerOptionItem';
+import ChoiceSelectAnswerOptionItem from './ChoiceSelectAnswerOptionItem';
+import ChoiceCheckboxAnswerOptionItem from './ChoiceCheckboxAnswerOptionItem';
+import ChoiceAutocompleteItem from './ChoiceAutocompleteItem';
+import ChoiceSelectAnswerValueSetItem from './ChoiceSelectAnswerValueSetItem';
 import { getChoiceControlType, getChoiceOrientation } from '../../../utils/choice';
-import QItemChoiceRadioAnswerValueSet from './QItemChoiceRadioAnswerValueSet';
-import QItemChoiceCheckboxAnswerValueSet from './QItemChoiceCheckboxAnswerValueSet';
+import ChoiceRadioAnswerValueSetItem from './ChoiceRadioAnswerValueSetItem';
+import ChoiceCheckboxAnswerValueSetItem from './ChoiceCheckboxAnswerValueSetItem';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 
-interface Props
+interface ChoiceItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -40,16 +40,16 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemChoice(props: Props) {
+function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
   const orientation = getChoiceOrientation(qItem);
   const choiceControlType = getChoiceControlType(qItem);
 
   switch (choiceControlType) {
-    case QItemChoiceControl.Radio:
+    case ChoiceItemControl.Radio:
       if (qItem.answerOption) {
         return (
-          <QItemChoiceRadioAnswerOption
+          <ChoiceRadioAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={isRepeated}
@@ -59,7 +59,7 @@ function QItemChoice(props: Props) {
         );
       } else {
         return (
-          <QItemChoiceRadioAnswerValueSet
+          <ChoiceRadioAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={isRepeated}
@@ -68,10 +68,10 @@ function QItemChoice(props: Props) {
           />
         );
       }
-    case QItemChoiceControl.Checkbox:
+    case ChoiceItemControl.Checkbox:
       if (qItem.answerOption) {
         return (
-          <QItemChoiceCheckboxAnswerOption
+          <ChoiceCheckboxAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem['repeats'] ?? false}
@@ -81,7 +81,7 @@ function QItemChoice(props: Props) {
         );
       } else {
         return (
-          <QItemChoiceCheckboxAnswerValueSet
+          <ChoiceCheckboxAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={qItem['repeats'] ?? false}
@@ -90,9 +90,9 @@ function QItemChoice(props: Props) {
           />
         );
       }
-    case QItemChoiceControl.Autocomplete:
+    case ChoiceItemControl.Autocomplete:
       return (
-        <QItemChoiceAutocomplete
+        <ChoiceAutocompleteItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -100,10 +100,10 @@ function QItemChoice(props: Props) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case QItemChoiceControl.Select:
+    case ChoiceItemControl.Select:
       if (qItem.answerOption) {
         return (
-          <QItemChoiceSelectAnswerOption
+          <ChoiceSelectAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={isRepeated}
@@ -113,7 +113,7 @@ function QItemChoice(props: Props) {
         );
       } else {
         return (
-          <QItemChoiceSelectAnswerValueSet
+          <ChoiceSelectAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={isRepeated}
@@ -127,4 +127,4 @@ function QItemChoice(props: Props) {
   }
 }
 
-export default QItemChoice;
+export default ChoiceItemSwitcher;

package/src/components/FormComponents/{QItemChoice/QItemChoiceRadioAnswerOption.tsx → ChoiceItems/ChoiceRadioAnswerOptionItem.tsx}

@@ -17,11 +17,11 @@
 
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import { Grid } from '@mui/material';
-import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import Grid from '@mui/material/Grid';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
-import QItemChoiceRadioSingle from './QItemChoiceRadioSingle';
+import ChoiceRadioSingle from './ChoiceRadioSingle';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { QRadioGroup } from '../Item.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
@@ -33,15 +33,15 @@ import type {
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface ChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
-  orientation: QItemChoiceOrientation;
+  orientation: ChoiceItemOrientation;
 }
 
-function QItemChoiceRadioAnswerOption(props: Props) {
+function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
   const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
 
   // Init input value
@@ -63,7 +63,7 @@ function QItemChoiceRadioAnswerOption(props: Props) {
 
   const choiceRadio = (
     <QRadioGroup
-      row={orientation === QItemChoiceOrientation.Horizontal}
+      row={orientation === ChoiceItemOrientation.Horizontal}
       name={qItem.text}
       id={qItem.id}
       onChange={handleChange}
@@ -72,7 +72,7 @@ function QItemChoiceRadioAnswerOption(props: Props) {
       {qItem.answerOption?.map((option) => {
         if (option['valueCoding']) {
           return (
-            <QItemChoiceRadioSingle
+            <ChoiceRadioSingle
               key={option.valueCoding.code ?? ''}
               value={option.valueCoding.code ?? ''}
               label={option.valueCoding.display ?? `${option.valueCoding.code}`}
@@ -81,7 +81,7 @@ function QItemChoiceRadioAnswerOption(props: Props) {
           );
         } else if (option['valueString']) {
           return (
-            <QItemChoiceRadioSingle
+            <ChoiceRadioSingle
               key={option.valueString}
               value={option.valueString}
               label={option.valueString}
@@ -90,7 +90,7 @@ function QItemChoiceRadioAnswerOption(props: Props) {
           );
         } else if (option['valueInteger']) {
           return (
-            <QItemChoiceRadioSingle
+            <ChoiceRadioSingle
               key={option.valueInteger}
               value={option.valueInteger.toString()}
               label={option.valueInteger.toString()}
@@ -122,4 +122,4 @@ function QItemChoiceRadioAnswerOption(props: Props) {
   return <>{renderQItemChoiceRadio}</>;
 }
 
-export default QItemChoiceRadioAnswerOption;
+export default ChoiceRadioAnswerOptionItem;

package/src/components/FormComponents/{QItemChoice/QItemChoiceRadioAnswerValueSet.tsx → ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx}

@@ -17,11 +17,12 @@
 
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import { Grid, Typography } from '@mui/material';
-import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerValueSetCodings } from '../../../utils/choice';
-import QItemChoiceRadioSingle from './QItemChoiceRadioSingle';
+import ChoiceRadioSingle from './ChoiceRadioSingle';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { QRadioGroup } from '../Item.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
@@ -36,15 +37,15 @@ import { StyledAlert } from '../../Alert.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface ChoiceRadioAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
-  orientation: QItemChoiceOrientation;
+  orientation: ChoiceItemOrientation;
 }
 
-function QItemChoiceRadioAnswerValueSet(props: Props) {
+function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps) {
   const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
 
   // Init input value
@@ -76,14 +77,14 @@ function QItemChoiceRadioAnswerValueSet(props: Props) {
   const choiceRadio =
     codings.length > 0 ? (
       <QRadioGroup
-        row={orientation === QItemChoiceOrientation.Horizontal}
+        row={orientation === ChoiceItemOrientation.Horizontal}
         name={qItem.text}
         id={qItem.id}
         onChange={handleChange}
         value={valueRadio ?? null}>
         {codings.map((coding: Coding) => {
           return (
-            <QItemChoiceRadioSingle
+            <ChoiceRadioSingle
               key={coding.code ?? ''}
               value={coding.code ?? ''}
               label={coding.display ?? `${coding.code}`}
@@ -108,9 +109,11 @@ function QItemChoiceRadioAnswerValueSet(props: Props) {
       </StyledAlert>
     );
 
-  const renderQItemChoiceRadio = isRepeated ? (
-    <>{choiceRadio}</>
-  ) : (
+  if (isRepeated) {
+    return <>{choiceRadio}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox data-test="q-item-choice-radio-answer-value-set-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -123,7 +126,6 @@ function QItemChoiceRadioAnswerValueSet(props: Props) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemChoiceRadio}</>;
 }
 
-export default QItemChoiceRadioAnswerValueSet;
+export default ChoiceRadioAnswerValueSetItem;

package/src/components/FormComponents/{QItemChoice/QItemChoiceRadioSingle.tsx → ChoiceItems/ChoiceRadioSingle.tsx}

@@ -16,15 +16,16 @@
  */
 
 import React from 'react';
-import { FormControlLabel, Radio } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
 
-interface Props {
+interface ChoiceRadioSingleProps {
   value: string;
   label: string;
   readOnly: boolean;
 }
 
-function QItemChoiceRadioSingle(props: Props) {
+function ChoiceRadioSingle(props: ChoiceRadioSingleProps) {
   const { value, label, readOnly } = props;
 
   return (
@@ -38,4 +39,4 @@ function QItemChoiceRadioSingle(props: Props) {
   );
 }
 
-export default QItemChoiceRadioSingle;
+export default ChoiceRadioSingle;

package/src/components/FormComponents/{QItemChoice/QItemChoiceSelectAnswerOption.tsx → ChoiceItems/ChoiceSelectAnswerOptionItem.tsx}

@@ -16,8 +16,11 @@
  */
 
 import React, { Fragment } from 'react';
-import type { SelectChangeEvent } from '@mui/material';
-import { Grid, InputAdornment, MenuItem, Select } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import InputAdornment from '@mui/material/InputAdornment';
+import MenuItem from '@mui/material/MenuItem';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import Select from '@mui/material/Select';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
@@ -32,7 +35,7 @@ import type {
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface ChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -40,7 +43,7 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemChoiceSelectAnswerOption(props: Props) {
+function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Init input value
@@ -109,9 +112,11 @@ function QItemChoiceSelectAnswerOption(props: Props) {
     </Select>
   );
 
-  const renderQItemChoiceSelectAnswerOption = isRepeated ? (
-    <>{choiceSelectAnswerOption}</>
-  ) : (
+  if (isRepeated) {
+    return <>{choiceSelectAnswerOption}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox data-test="q-item-choice-select-answer-option-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -124,7 +129,6 @@ function QItemChoiceSelectAnswerOption(props: Props) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemChoiceSelectAnswerOption}</>;
 }
 
-export default QItemChoiceSelectAnswerOption;
+export default ChoiceSelectAnswerOptionItem;

package/src/components/FormComponents/{QItemChoice/QItemChoiceSelectAnswerValueSet.tsx → ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx}

@@ -17,7 +17,9 @@
 
 import type { SyntheticEvent } from 'react';
 import React, { useEffect, useMemo } from 'react';
-import { Autocomplete, Grid, Typography } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -35,7 +37,7 @@ import { StyledAlert } from '../../Alert.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface ChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -43,7 +45,7 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemChoiceSelectAnswerValueSet(props: Props) {
+function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Init input value
@@ -141,9 +143,11 @@ function QItemChoiceSelectAnswerValueSet(props: Props) {
       </StyledAlert>
     );
 
-  const renderQItemChoiceSelectAnswerValueSet = isRepeated ? (
-    <>{choiceSelectAnswerValueSet}</>
-  ) : (
+  if (isRepeated) {
+    return <>{choiceSelectAnswerValueSet}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox data-test="q-item-choice-dropdown-answer-value-set-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -156,7 +160,6 @@ function QItemChoiceSelectAnswerValueSet(props: Props) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemChoiceSelectAnswerValueSet}</>;
 }
 
-export default QItemChoiceSelectAnswerValueSet;
+export default ChoiceSelectAnswerValueSetItem;

package/src/components/FormComponents/DateTimeItem/DateTimeField.tsx

@@ -20,7 +20,7 @@ import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps
 import type { Dayjs } from 'dayjs';
 import { DateTimePicker as MuiDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;

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

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { InputAdornment } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 import { StandardTextField } from '../Textfield.styles';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';

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

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Box, styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 
 export const DisplayInstructionsWrapper = styled(Box)(({ theme }) => ({
   color: theme.palette.text.secondary,

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

@@ -16,7 +16,7 @@
  */
 
 import React, { memo } from 'react';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import { DisplayInstructionsWrapper } from './DisplayInstructions.styles';
 
 interface DisplayInstructionsProps {

package/src/components/FormComponents/GridGroup/GridGroup.tsx

@@ -21,7 +21,10 @@ import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderPro
 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 Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import TableContainer from '@mui/material/TableContainer';
+import Typography from '@mui/material/Typography';
 import { mapQItemsIndex } from '../../../utils/mapItem';
 import GridTable from './GridTable';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -22,7 +22,7 @@ import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
 import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 
 interface GridRowProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
   qItem: QuestionnaireItem;

package/src/components/FormComponents/GridGroup/GridTable.tsx

@@ -16,7 +16,11 @@
  */
 
 import React from 'react';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import { HeaderTableCell } from '../Tables/Table.styles';
 import GridRow from './GridRow';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';

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

@@ -16,7 +16,8 @@
  */
 
 import React, { memo } from 'react';
-import { Box, Divider } from '@mui/material';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import { QGroupHeadingTypography } from '../Typography.styles';
 import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem } from 'fhir/r4';

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

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Card, styled } from '@mui/material';
+import Card from '@mui/material/Card';
+import { styled } from '@mui/material/styles';
 
 export const GroupCard = styled(Card, {
   shouldForwardProp: (prop) => prop !== 'elevation' && prop !== 'isRepeated'

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

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Button } from '@mui/material';
+import Button from '@mui/material/Button';
 import Iconify from '../../Iconify/Iconify';
 
 interface NextTabButtonProps {

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

@@ -16,7 +16,7 @@
  */
 
 import React, { memo } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { findNumOfVisibleTabs, getNextVisibleTabIndex } from '../../../utils/tabs';
 import type { Tabs } from '../../../interfaces/tab.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';

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

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { InputAdornment } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
 import { StandardTextField } from '../Textfield.styles';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';

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

@@ -15,7 +15,10 @@
  * limitations under the License.
  */
 
-import { FormGroup, RadioGroup, styled, Typography } from '@mui/material';
+import FormGroup from '@mui/material/FormGroup';
+import RadioGroup from '@mui/material/RadioGroup';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 
 export const QFormGroup = styled(FormGroup)(() => ({
   marginBottom: 4

package/src/components/FormComponents/ItemParts/{QItemCheckboxSingle.tsx → CheckboxSingle.tsx}

@@ -16,7 +16,8 @@
  */
 
 import React from 'react';
-import { Checkbox, FormControlLabel } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 interface Props {
   value: string;
@@ -26,7 +27,7 @@ interface Props {
   onCheckedChange: (value: string) => unknown;
 }
 
-function QItemCheckboxSingle(props: Props) {
+function CheckboxSingle(props: Props) {
   const { value, label, readOnly, isChecked, onCheckedChange } = props;
 
   return (
@@ -41,4 +42,4 @@ function QItemCheckboxSingle(props: Props) {
   );
 }
 
-export default QItemCheckboxSingle;
+export default CheckboxSingle;

package/src/components/FormComponents/ItemParts/{QItemCheckboxSingleWithOpenLabel.tsx → CheckboxSingleWithOpenLabel.tsx}

@@ -17,7 +17,9 @@
 
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import { Box, Checkbox, FormControlLabel } from '@mui/material';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import { StandardTextField } from '../Textfield.styles';
 
 interface Props {
@@ -28,7 +30,7 @@ interface Props {
   onInputChange: (input: string) => unknown;
 }
 
-function QItemCheckboxSingleWithOpenLabel(props: Props) {
+function CheckboxSingleWithOpenLabel(props: Props) {
   const { value, label, isChecked, onCheckedChange, onInputChange } = props;
 
   function handleCheckedChange(event: ChangeEvent<HTMLInputElement>) {
@@ -59,4 +61,4 @@ function QItemCheckboxSingleWithOpenLabel(props: Props) {
   );
 }
 
-export default QItemCheckboxSingleWithOpenLabel;
+export default CheckboxSingleWithOpenLabel;

package/src/components/FormComponents/ItemParts/FadingCheckIcon.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Fade } from '@mui/material';
+import Fade from '@mui/material/Fade';
 import CheckIcon from '@mui/icons-material/Check';
 
 interface FadingCheckIconProps {

package/src/components/FormComponents/ItemParts/ItemFieldGrid.tsx

@@ -17,7 +17,7 @@
 
 import type { ReactNode } from 'react';
 import React from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem } from 'fhir/r4';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from './ItemLabelWrapper';

package/src/components/FormComponents/ItemParts/ItemLabelText.tsx

@@ -20,7 +20,7 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import { getMarkdownString, getXHtmlString } from '../../../utils/itemControl';
 import { QItemTypography } from '../Item.styles';
 import parse from 'html-react-parser';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import ReactMarkdown from 'react-markdown';
 
 interface ItemLabelTextProps {

package/src/components/FormComponents/ItemParts/ItemLabelWrapper.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import ContextDisplayItem from './ContextDisplayItem';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../../utils/tabs';