@aehrc/smart-forms-renderer 0.13.0 → 0.13.2

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

@@ -15,38 +15,35 @@
  * limitations under the License.
  */
 
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem } from 'fhir/r4';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from './ItemLabelWrapper';
-import ItemExtensionLabels from './ItemExtensionLabels';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 
 interface ItemFieldGridProps {
   children: ReactNode;
   qItem: QuestionnaireItem;
-  displayInstructions: string | ReactElement;
-  required: boolean;
   readOnly: boolean;
 }
 
 function ItemFieldGrid(props: ItemFieldGridProps) {
-  const { children, qItem, displayInstructions, required, readOnly } = props;
+  const { children, qItem, readOnly } = props;
+
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   return (
-    <>
-      <ItemExtensionLabels required={required} readOnly={readOnly} />
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          {children}
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
+    <Grid container columnSpacing={6}>
+      <Grid item xs={5}>
+        <LabelWrapper qItem={qItem} readOnly={readOnly} />
+      </Grid>
+      <Grid item xs={7}>
+        {children}
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
       </Grid>
-    </>
+    </Grid>
   );
 }
 

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

@@ -54,7 +54,7 @@ const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
 
   // parse regular text
   return (
-    <Typography color={readOnly ? 'text.secondary' : 'text.primary'} sx={{ mt: 0.5 }}>
+    <Typography color={readOnly ? 'text.disabled' : 'text.primary'} sx={{ mt: 0.25 }}>
       {qItem.text}
     </Typography>
   );

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

@@ -21,6 +21,9 @@ import ContextDisplayItem from './ContextDisplayItem';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../../utils/tabs';
 import ItemLabelText from './ItemLabelText';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 
 interface LabelWrapperProps {
   qItem: QuestionnaireItem;
@@ -30,11 +33,37 @@ interface LabelWrapperProps {
 function ItemLabelWrapper(props: LabelWrapperProps) {
   const { qItem, readOnly } = props;
 
+  const { required, displayFlyover } = useRenderingExtensions(qItem);
   const contextDisplayItems = getContextDisplays(qItem);
 
   return (
     <Box display="flex" alignItems="center" justifyContent="space-between">
-      <ItemLabelText qItem={qItem} readOnly={readOnly} />
+      <Tooltip
+        title={displayFlyover}
+        placement="top"
+        slotProps={{
+          popper: {
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [0, -8]
+                }
+              }
+            ]
+          }
+        }}>
+        <span>
+          <Box display="flex" columnGap={0.4} justifyContent="space-between">
+            {required ? (
+              <Typography color="red" sx={{ ml: -1.15 }}>
+                *
+              </Typography>
+            ) : null}
+            <ItemLabelText qItem={qItem} readOnly={readOnly} />
+          </Box>
+        </span>
+      </Tooltip>
 
       <Box display="flex" columnGap={0.5}>
         {contextDisplayItems.map((item) => {

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

@@ -23,7 +23,6 @@ import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useDebounce from '../../../hooks/useDebounce';
 import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -48,7 +47,6 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
 
@@ -133,11 +131,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceAutocompleteField
           qItem={qItem}
           options={options}

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

@@ -63,7 +63,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const openLabelText = getOpenLabelText(qItem);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init answers
   const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
@@ -158,11 +158,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
 
   return (
     <FullWidthFormComponentBox data-test="q-item-open-choice-checkbox-answer-option-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceCheckboxAnswerOptionFields
           qItem={qItem}
           answers={answers}

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

@@ -23,7 +23,6 @@ import { getOpenLabelText } from '../../../utils/itemControl';
 import { getOldOpenLabelAnswer } from '../../../utils/openChoice';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
@@ -47,7 +46,6 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const openLabelText = getOpenLabelText(qItem);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init answers
   const qrOpenChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
@@ -119,11 +117,7 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
 
   return (
     <FullWidthFormComponentBox data-test="q-item-open-choice-radio-answer-option-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceRadioAnswerOptionFields
           qItem={qItem}
           valueRadio={valueRadio}

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

@@ -23,7 +23,6 @@ import type {
 } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -47,7 +46,6 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   const answerOptions = qItem.answerOption;
@@ -107,11 +105,7 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
 
   return (
     <FullWidthFormComponentBox data-test="q-item-open-choice-select-answer-option-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceSelectAnswerOptionField
           qItem={qItem}
           options={answerOptions}

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

@@ -20,7 +20,6 @@ import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -44,7 +43,6 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
@@ -91,11 +89,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceSelectAnswerValueSetField
           qItem={qItem}
           options={codings}

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -23,7 +23,6 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import AddItemButton from './AddItemButton';
@@ -46,7 +45,6 @@ function RepeatItem(props: RepeatItemProps) {
   const { qItem, qrItem, showMinimalView, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
 
@@ -119,11 +117,7 @@ function RepeatItem(props: RepeatItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <TransitionGroup>
           {repeatAnswers.map(({ nanoId, answer }, index) => {
             const repeatAnswerQrItem = createEmptyQrItem(qItem);

package/src/components/FormComponents/SliderItem/SliderItem.tsx

@@ -23,7 +23,6 @@ import type {
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
@@ -45,7 +44,6 @@ function SliderItem(props: SliderItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions, required } = useRenderingExtensions(qItem);
   const { minValue, maxValue, stepValue, minLabel, maxLabel } = useSliderExtensions(qItem);
 
   const isInteracted = !!qrItem?.answer;
@@ -91,11 +89,7 @@ function SliderItem(props: SliderItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-slider-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <Box px={4}>
           <SliderField
             linkId={qItem.linkId}

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -47,16 +47,8 @@ function StringItem(props: StringItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const {
-    displayUnit,
-    displayPrompt,
-    displayInstructions,
-    entryFormat,
-    required,
-    regexValidation,
-    minLength,
-    maxLength
-  } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
+    useRenderingExtensions(qItem);
 
   // Init input value
   let valueString = '';
@@ -115,11 +107,7 @@ function StringItem(props: StringItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <StringField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -46,16 +46,8 @@ function TextItem(props: TextItemProps) {
   const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const {
-    displayUnit,
-    displayPrompt,
-    displayInstructions,
-    entryFormat,
-    required,
-    regexValidation,
-    minLength,
-    maxLength
-  } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
+    useRenderingExtensions(qItem);
 
   // Init input value
   let valueText = '';
@@ -113,11 +105,7 @@ function TextItem(props: TextItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-text-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <TextField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -45,8 +45,7 @@ function TimeItem(props: TimeItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayPrompt, displayInstructions, entryFormat, required } =
-    useRenderingExtensions(qItem);
+  const { displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
   // Init input value
   let timeString: string | null = null;
@@ -80,11 +79,7 @@ function TimeItem(props: TimeItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <TimeField
           value={timeDayJs}
           displayPrompt={displayPrompt}

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -45,16 +45,8 @@ function UrlItem(props: UrlItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const {
-    displayUnit,
-    displayPrompt,
-    displayInstructions,
-    entryFormat,
-    required,
-    regexValidation,
-    minLength,
-    maxLength
-  } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
+    useRenderingExtensions(qItem);
 
   // Init input value
   let valueUri = '';
@@ -102,11 +94,7 @@ function UrlItem(props: UrlItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid
-        qItem={qItem}
-        displayInstructions={displayInstructions}
-        required={required}
-        readOnly={readOnly}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <UrlField
           linkId={qItem.linkId}
           input={input}

package/src/components/Renderer/BaseRenderer.tsx

@@ -35,9 +35,6 @@ function BaseRenderer() {
   const updateRequiredValidity = useQuestionnaireResponseStore.use.validateQuestionnaire();
   const updateResponse = useQuestionnaireResponseStore.use.updateResponse();
 
-  const invalidItems = useQuestionnaireResponseStore.use.invalidItems();
-  const responseIsValid = useQuestionnaireResponseStore.use.responseIsValid();
-
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(sourceQuestionnaire), [sourceQuestionnaire]);
 
   function handleTopLevelQRItemSingleChange(newTopLevelQRItem: QuestionnaireResponseItem) {
@@ -76,9 +73,6 @@ function BaseRenderer() {
   // If an item has multiple answers, it is a repeat group
   const topLevelQRItemsByIndex = getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
 
-  console.log(invalidItems);
-  console.log(responseIsValid);
-
   return (
     <Fade in={true} timeout={500}>
       <Container maxWidth="xl">

package/src/hooks/useRenderingExtensions.ts

@@ -17,6 +17,7 @@
 
 import {
   getRegexValidation,
+  getTextDisplayFlyover,
   getTextDisplayInstructions,
   getTextDisplayPrompt,
   getTextDisplayUnit
@@ -30,6 +31,7 @@ interface RenderingExtensions {
   displayUnit: string;
   displayPrompt: string;
   displayInstructions: string;
+  displayFlyover: string;
   readOnly: boolean;
   entryFormat: string;
   required: boolean;
@@ -44,6 +46,7 @@ function useRenderingExtensions(qItem: QuestionnaireItem): RenderingExtensions {
       displayUnit: getTextDisplayUnit(qItem),
       displayPrompt: getTextDisplayPrompt(qItem),
       displayInstructions: getTextDisplayInstructions(qItem),
+      displayFlyover: getTextDisplayFlyover(qItem),
       readOnly: !!qItem.readOnly,
       entryFormat: structuredDataCapture.getEntryFormat(qItem) ?? '',
       required: qItem.required ?? false,

package/src/utils/itemControl.ts

@@ -295,6 +295,22 @@ export function getTextDisplayInstructions(qItem: QuestionnaireItem): string {
   return '';
 }
 
+/**
+ * Get text display flyover for items with itemControlCode flyover and has an flyover childItem
+ *
+ * @author Sean Fong
+ */
+export function getTextDisplayFlyover(qItem: QuestionnaireItem): string {
+  if (qItem.item) {
+    for (const childItem of qItem.item) {
+      if (childItem.type === 'display' && isSpecificItemControl(childItem, 'flyover')) {
+        return `${childItem.text}`;
+      }
+    }
+  }
+  return '';
+}
+
 /**
  * Get entry format if its extension is present
  * i.e. DD-MM-YYYY for dates, HH:MM for times etc.

package/lib/components/FormComponents/ItemParts/ItemExtensionLabels.js

@@ -1,30 +0,0 @@
-/*
- * 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 { ReadOnlyLabel, RequiredLabel } from '../../Box.styles';
-import Box from '@mui/material/Box';
-function ItemExtensionLabels(props) {
-    const { required, readOnly } = props;
-    if (!required && !readOnly) {
-        return null;
-    }
-    return (React.createElement(Box, { display: "flex", columnGap: 0.5 },
-        required ? React.createElement(RequiredLabel, null, "Required") : null,
-        readOnly ? React.createElement(ReadOnlyLabel, null, "Read-only") : null));
-}
-export default ItemExtensionLabels;
-//# sourceMappingURL=ItemExtensionLabels.js.map

package/lib/components/FormComponents/ItemParts/ItemExtensionLabels.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemExtensionLabels.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/ItemParts/ItemExtensionLabels.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAOpC,SAAS,mBAAmB,CAAC,KAA+B;IAC1D,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE;QAC1B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,GAAG;QAC/B,QAAQ,CAAC,CAAC,CAAC,oBAAC,aAAa,mBAAyB,CAAC,CAAC,CAAC,IAAI;QACzD,QAAQ,CAAC,CAAC,CAAC,oBAAC,aAAa,oBAA0B,CAAC,CAAC,CAAC,IAAI,CACvD,CACP,CAAC;AACJ,CAAC;AAED,eAAe,mBAAmB,CAAC"}

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

@@ -1,42 +0,0 @@
-/*
- * 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 { ReadOnlyLabel, RequiredLabel } from '../../Box.styles';
-import Box from '@mui/material/Box';
-
-interface ItemExtensionLabelsProps {
-  required: boolean;
-  readOnly: boolean;
-}
-
-function ItemExtensionLabels(props: ItemExtensionLabelsProps) {
-  const { required, readOnly } = props;
-
-  if (!required && !readOnly) {
-    return null;
-  }
-
-  return (
-    <Box display="flex" columnGap={0.5}>
-      {required ? <RequiredLabel>Required</RequiredLabel> : null}
-      {readOnly ? <ReadOnlyLabel>Read-only</ReadOnlyLabel> : null}
-    </Box>
-  );
-}
-
-export default ItemExtensionLabels;