@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

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

@@ -0,0 +1,118 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback, useState } from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import useValidationError from '../../../hooks/useValidationError';
+import debounce from 'lodash.debounce';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import UrlField from './UrlField';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+
+interface UrlItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+function UrlItem(props: UrlItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const {
+    displayUnit,
+    displayPrompt,
+    displayInstructions,
+    readOnly,
+    entryFormat,
+    regexValidation,
+    maxLength
+  } = useRenderingExtensions(qItem);
+
+  // Init input value
+  let valueUri = '';
+  if (qrItem?.answer && qrItem?.answer[0].valueUri) {
+    valueUri = qrItem.answer[0].valueUri;
+  }
+  const [input, setInput] = useState(valueUri);
+
+  // Perform validation checks
+  const feedback = useValidationError(input, regexValidation, maxLength);
+
+  // Event handlers
+  function handleChange(newInput: string) {
+    setInput(newInput);
+    updateQrItemWithDebounce(newInput);
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateQrItemWithDebounce = useCallback(
+    debounce((input: string) => {
+      const emptyQrItem = createEmptyQrItem(qItem);
+      if (input !== '') {
+        onQrItemChange({ ...emptyQrItem, answer: [{ valueUri: input }] });
+      } else {
+        onQrItemChange(emptyQrItem);
+      }
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  if (isRepeated) {
+    return (
+      <UrlField
+        linkId={qItem.linkId}
+        input={input}
+        feedback={feedback}
+        displayPrompt={displayPrompt}
+        displayUnit={displayUnit}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        onInputChange={handleChange}
+        isTabled={isTabled}
+      />
+    );
+  }
+  return (
+    <FullWidthFormComponentBox data-test="q-item-string-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <UrlField
+          linkId={qItem.linkId}
+          input={input}
+          feedback={feedback}
+          displayPrompt={displayPrompt}
+          displayUnit={displayUnit}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          onInputChange={handleChange}
+          isTabled={isTabled}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default UrlItem;

package/src/components/FormRenderer/BaseRenderer.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 { Container, Fade } from '@mui/material';
+import FormTopLevelItem from '../FormRenderer/FormTopLevelItem';
+import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import useQuestionnaireResponseStore from '../../stores/useQuestionnaireResponseStore';
+
+function BaseRenderer() {
+  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const updateExpressions = useQuestionnaireStore((state) => state.updateExpressions);
+  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
+  const updateResponse = useQuestionnaireResponseStore((state) => state.updateResponse);
+
+  function handleTopLevelQRItemChange(newTopLevelQItem: QuestionnaireResponseItem, index: number) {
+    if (!updatableResponse.item || updatableResponse.item.length === 0) {
+      return;
+    }
+
+    const updatedItems = [...updatableResponse.item]; // Copy the original array of items
+    updatedItems[index] = newTopLevelQItem; // Modify the item at the specified index
+
+    const updatedResponse: QuestionnaireResponse = {
+      ...updatableResponse,
+      item: updatedItems
+    };
+
+    updateExpressions(updatedResponse);
+    updateResponse(updatedResponse);
+  }
+
+  const topLevelQItems = sourceQuestionnaire.item;
+  const topLevelQRItems = updatableResponse.item;
+
+  if (!topLevelQItems) {
+    return <>Questionnaire does not have any items</>;
+  }
+
+  return (
+    <Fade in={true} timeout={500}>
+      <Container maxWidth="xl">
+        {topLevelQItems.map((qItem, index) => {
+          const qrItem = topLevelQRItems
+            ? topLevelQRItems[index]
+            : {
+                linkId: qItem.linkId,
+                text: qItem.text
+              };
+
+          return (
+            <FormTopLevelItem
+              key={qItem.linkId}
+              topLevelQItem={qItem}
+              topLevelQRItem={qrItem}
+              onQrItemChange={(newTopLevelQRItem) =>
+                handleTopLevelQRItemChange(newTopLevelQRItem, index)
+              }
+            />
+          );
+        })}
+      </Container>
+    </Fade>
+  );
+}
+
+export default BaseRenderer;

package/src/components/FormRenderer/FormBodyCollapsible.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useMemo } from 'react';
+import { Stack } from '@mui/material';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import { updateQrGroup } from '../../utils/qrItem';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
+function FormBodyCollapsibleWrapper(props) {
+    const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+    const currentTab = useQuestionnaireStore((state) => state.currentTabIndex);
+    const tabs = useQuestionnaireStore((state) => state.tabs);
+    const switchTab = useQuestionnaireStore((state) => state.switchTab);
+    const indexMap = useMemo(() => mapQItemsIndex(topLevelQItem), [topLevelQItem]);
+    const qItems = topLevelQItem.item;
+    const qrItems = topLevelQRItem.item;
+    function handleQrGroupChange(qrItem) {
+        updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+        onQrItemChange(topLevelQRItem);
+    }
+    if (!qItems || !qrItems) {
+        return React.createElement(React.Fragment, null, "Unable to load form");
+    }
+    function handleToggleExpand(index) {
+        switchTab(currentTab === index ? -1 : index);
+    }
+    if (!qItems || !qrItems) {
+        return React.createElement(React.Fragment, null, "Unable to load form");
+    }
+    const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+    return (React.createElement(Stack, { rowGap: 1 }, qItems.map((qItem, i) => {
+        const qrItem = qrItemsByIndex[i];
+        const isNotRepeatGroup = !Array.isArray(qrItem);
+        const isTab = !!tabs[qItem.linkId];
+        if (!isTab || !isNotRepeatGroup) {
+            // Something has gone horribly wrong
+            return null;
+        }
+        return (React.createElement(FormBodySingleCollapsibleWrapper, { key: qItem.linkId, qItem: qItem, qrItem: qrItem, index: i, selectedIndex: currentTab, onToggleExpand: handleToggleExpand, onQrItemChange: handleQrGroupChange }));
+    })));
+}
+export default FormBodyCollapsibleWrapper;
+//# sourceMappingURL=FormBodyCollapsible.js.map

package/src/components/FormRenderer/FormBodyCollapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBodyCollapsible.js","sourceRoot":"","sources":["FormBodyCollapsible.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,qBAAqB,MAAM,oCAAoC,CAAC;AACvE,OAAO,gCAAgC,MAAM,oCAAoC,CAAC;AAOlF,SAAS,0BAA0B,CAAC,KAA+B;IACjE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEhE,MAAM,UAAU,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC3E,MAAM,IAAI,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEpE,MAAM,QAAQ,GAA2B,OAAO,CAC9C,GAAG,EAAE,CAAC,cAAc,CAAC,aAAa,CAAC,EACnC,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC;IAClC,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC;IAEpC,SAAS,mBAAmB,CAAC,MAAiC;QAC5D,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC;QACtD,cAAc,CAAC,cAAc,CAAC,CAAC;IACjC,CAAC;IAED,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;QACvB,OAAO,gEAAwB,CAAC;KACjC;IAED,SAAS,kBAAkB,CAAC,KAAa;QACvC,SAAS,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;QACvB,OAAO,gEAAwB,CAAC;KACjC;IAED,MAAM,cAAc,GAAG,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;IAElE,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,CAAC,IACb,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;QAEjC,MAAM,gBAAgB,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAEnC,IAAI,CAAC,KAAK,IAAI,CAAC,gBAAgB,EAAE;YAC/B,oCAAoC;YACpC,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,oBAAC,gCAAgC,IAC/B,GAAG,EAAE,KAAK,CAAC,MAAM,EACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EACR,aAAa,EAAE,UAAU,EACzB,cAAc,EAAE,kBAAkB,EAClC,cAAc,EAAE,mBAAmB,GACnC,CACH,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC;AAED,eAAe,0BAA0B,CAAC"}

package/src/components/FormRenderer/FormBodyCollapsible.tsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import { Stack } from '@mui/material';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import { updateQrGroup } from '../../utils/qrItem';
+import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
+
+interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  topLevelQItem: QuestionnaireItem;
+  topLevelQRItem: QuestionnaireResponseItem;
+}
+
+function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
+  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+
+  const currentTab = useQuestionnaireStore((state) => state.currentTabIndex);
+  const tabs = useQuestionnaireStore((state) => state.tabs);
+
+  const switchTab = useQuestionnaireStore((state) => state.switchTab);
+
+  const indexMap: Record<string, number> = useMemo(
+    () => mapQItemsIndex(topLevelQItem),
+    [topLevelQItem]
+  );
+
+  const qItems = topLevelQItem.item;
+  const qrItems = topLevelQRItem.item;
+
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
+    updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+    onQrItemChange(topLevelQRItem);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  function handleToggleExpand(index: number) {
+    switchTab(currentTab === index ? -1 : index);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+
+  return (
+    <Stack rowGap={1}>
+      {qItems.map((qItem, i) => {
+        const qrItem = qrItemsByIndex[i];
+
+        const isNotRepeatGroup = !Array.isArray(qrItem);
+        const isTab = !!tabs[qItem.linkId];
+
+        if (!isTab || !isNotRepeatGroup) {
+          // Something has gone horribly wrong
+          return null;
+        }
+
+        return (
+          <FormBodySingleCollapsibleWrapper
+            key={qItem.linkId}
+            qItem={qItem}
+            qrItem={qrItem}
+            index={i}
+            selectedIndex={currentTab}
+            onToggleExpand={handleToggleExpand}
+            onQrItemChange={handleQrGroupChange}
+          />
+        );
+      })}
+    </Stack>
+  );
+}
+
+export default FormBodyCollapsibleWrapper;

package/src/components/FormRenderer/FormBodySingleCollapsible.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { memo } from 'react';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Tooltip, Typography } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { getContextDisplays } from '../../utils/tabs';
+import { getShortText } from '../../utils/itemControl';
+import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
+const FormBodySingleCollapsible = memo(function FormBodySingleCollapsible(props) {
+    var _a, _b;
+    const { qItem, index, selectedIndex, onToggleExpand, children } = props;
+    const contextDisplayItems = getContextDisplays(qItem);
+    const collapsibleLabel = (_b = (_a = getShortText(qItem)) !== null && _a !== void 0 ? _a : qItem.text) !== null && _b !== void 0 ? _b : '';
+    return (React.createElement(Accordion, { expanded: selectedIndex === index, TransitionProps: { unmountOnExit: true, timeout: 250 }, onChange: () => onToggleExpand(index) },
+        React.createElement(AccordionSummary, { expandIcon: React.createElement(Tooltip, { title: 'Expand' },
+                React.createElement(ExpandMoreIcon, null)) },
+            React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", mr: 3 },
+                React.createElement(Typography, { variant: "subtitle2" }, collapsibleLabel),
+                React.createElement(Box, { display: "flex", columnGap: 0.5 }, contextDisplayItems.map((item) => {
+                    return React.createElement(ContextDisplayItem, { key: item.linkId, displayItem: item });
+                })))),
+        React.createElement(AccordionDetails, null, children)));
+});
+export default FormBodySingleCollapsible;
+//# sourceMappingURL=FormBodySingleCollapsible.js.map

package/src/components/FormRenderer/FormBodySingleCollapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBodySingleCollapsible.js","sourceRoot":"","sources":["FormBodySingleCollapsible.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,GAAG,EACH,OAAO,EACP,UAAU,EACX,MAAM,eAAe,CAAC;AACvB,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAUhF,MAAM,yBAAyB,GAAG,IAAI,CAAC,SAAS,yBAAyB,CACvE,KAAqC;;IAErC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAExE,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,gBAAgB,GAAG,MAAA,MAAA,YAAY,CAAC,KAAK,CAAC,mCAAI,KAAK,CAAC,IAAI,mCAAI,EAAE,CAAC;IAEjE,OAAO,CACL,oBAAC,SAAS,IACR,QAAQ,EAAE,aAAa,KAAK,KAAK,EACjC,eAAe,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,EACtD,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QACrC,oBAAC,gBAAgB,IACf,UAAU,EACR,oBAAC,OAAO,IAAC,KAAK,EAAE,QAAQ;gBACtB,oBAAC,cAAc,OAAG,CACV;YAEZ,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC;gBACvF,oBAAC,UAAU,IAAC,OAAO,EAAC,WAAW,IAAE,gBAAgB,CAAc;gBAC/D,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,GAAG,IAC/B,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAChC,OAAO,oBAAC,kBAAkB,IAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,GAAI,CAAC;gBACrE,CAAC,CAAC,CACE,CACF,CACW;QACnB,oBAAC,gBAAgB,QAAE,QAAQ,CAAoB,CACrC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,yBAAyB,CAAC"}

package/src/components/FormRenderer/FormBodySingleCollapsible.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+import React, { memo } from 'react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { getContextDisplays } from '../../utils/tabs';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getShortText } from '../../utils/itemControl';
+import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
+
+interface FormBodySingleCollapsibleProps {
+  qItem: QuestionnaireItem;
+  index: number;
+  selectedIndex: number;
+  onToggleExpand: (index: number) => void;
+  children: ReactNode;
+}
+
+const FormBodySingleCollapsible = memo(function FormBodySingleCollapsible(
+  props: FormBodySingleCollapsibleProps
+) {
+  const { qItem, index, selectedIndex, onToggleExpand, children } = props;
+
+  const contextDisplayItems = getContextDisplays(qItem);
+
+  const collapsibleLabel = getShortText(qItem) ?? qItem.text ?? '';
+
+  return (
+    <Accordion
+      expanded={selectedIndex === index}
+      TransitionProps={{ unmountOnExit: true, timeout: 250 }}
+      onChange={() => onToggleExpand(index)}>
+      <AccordionSummary
+        expandIcon={
+          <Tooltip title={'Expand'}>
+            <ExpandMoreIcon />
+          </Tooltip>
+        }>
+        <Box display="flex" alignItems="center" justifyContent="space-between" width="100%" mr={3}>
+          <Typography variant="subtitle2">{collapsibleLabel}</Typography>
+          <Box display="flex" columnGap={0.5}>
+            {contextDisplayItems.map((item) => {
+              return <ContextDisplayItem key={item.linkId} displayItem={item} />;
+            })}
+          </Box>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails>{children}</AccordionDetails>
+    </Accordion>
+  );
+});
+
+export default FormBodySingleCollapsible;

package/src/components/FormRenderer/FormBodySingleCollapsibleWrapper.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import FormBodySingleCollapsible from './FormBodySingleCollapsible';
+import useHidden from '../../hooks/useHidden';
+function FormBodySingleCollapsibleWrapper(props) {
+    const { qItem, qrItem, index, selectedIndex, onToggleExpand, onQrItemChange } = props;
+    const itemIsHidden = useHidden(qItem);
+    if (itemIsHidden) {
+        return null;
+    }
+    return (React.createElement(FormBodySingleCollapsible, { key: qItem.linkId, qItem: qItem, index: index, selectedIndex: selectedIndex, onToggleExpand: onToggleExpand },
+        React.createElement(GroupItem, { qItem: qItem, qrItem: qrItem, isRepeated: true, groupCardElevation: 1, onQrItemChange: onQrItemChange })));
+}
+export default FormBodySingleCollapsibleWrapper;
+//# sourceMappingURL=FormBodySingleCollapsibleWrapper.js.map

package/src/components/FormRenderer/FormBodySingleCollapsibleWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBodySingleCollapsibleWrapper.js","sourceRoot":"","sources":["FormBodySingleCollapsibleWrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AAEpE,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAW9C,SAAS,gCAAgC,CAAC,KAAqC;IAC7E,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEtF,MAAM,YAAY,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,YAAY,EAAE;QAChB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,yBAAyB,IACxB,GAAG,EAAE,KAAK,CAAC,MAAM,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc;QAC9B,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,IAAI,EAChB,kBAAkB,EAAE,CAAC,EACrB,cAAc,EAAE,cAAc,GAC9B,CACwB,CAC7B,CAAC;AACJ,CAAC;AAED,eAAe,gCAAgC,CAAC"}

package/src/components/FormRenderer/FormBodySingleCollapsibleWrapper.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import FormBodySingleCollapsible from './FormBodySingleCollapsible';
+import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import useHidden from '../../hooks/useHidden';
+
+interface FormBodySingleCollapsibleProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  index: number;
+  selectedIndex: number;
+  onToggleExpand: (index: number) => void;
+}
+
+function FormBodySingleCollapsibleWrapper(props: FormBodySingleCollapsibleProps) {
+  const { qItem, qrItem, index, selectedIndex, onToggleExpand, onQrItemChange } = props;
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  return (
+    <FormBodySingleCollapsible
+      key={qItem.linkId}
+      qItem={qItem}
+      index={index}
+      selectedIndex={selectedIndex}
+      onToggleExpand={onToggleExpand}>
+      <GroupItem
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={true}
+        groupCardElevation={1}
+        onQrItemChange={onQrItemChange}
+      />
+    </FormBodySingleCollapsible>
+  );
+}
+
+export default FormBodySingleCollapsibleWrapper;

package/src/components/FormRenderer/FormBodyTabbed.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useMemo } from 'react';
+import { Grid } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import { updateQrGroup } from '../../utils/qrItem';
+import FormBodyTabList from '../Tabs/FormBodyTabList';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+function FormBodyTabbed(props) {
+    const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+    const tabs = useQuestionnaireStore((state) => state.tabs);
+    const currentTab = useQuestionnaireStore((state) => state.currentTabIndex);
+    const indexMap = useMemo(() => mapQItemsIndex(topLevelQItem), [topLevelQItem]);
+    const qItems = topLevelQItem.item;
+    const qrItems = topLevelQRItem.item;
+    function handleQrGroupChange(qrItem) {
+        updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+        onQrItemChange(topLevelQRItem);
+    }
+    if (!qItems || !qrItems) {
+        return React.createElement(React.Fragment, null, "Unable to load form");
+    }
+    const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+    return (React.createElement(Grid, { container: true, spacing: 2 },
+        React.createElement(TabContext, { value: currentTab.toString() },
+            React.createElement(Grid, { item: true, xs: 12, md: 3.5, lg: 3, xl: 2.75 },
+                React.createElement(FormBodyTabList, { qFormItems: qItems, currentTabIndex: currentTab, tabs: tabs })),
+            React.createElement(Grid, { item: true, xs: 12, md: 8.5, lg: 9, xl: 9.25 }, qItems.map((qItem, i) => {
+                var _a, _b;
+                const qrItem = qrItemsByIndex[i];
+                const isNotRepeatGroup = !Array.isArray(qrItem);
+                const isTab = !!tabs[qItem.linkId];
+                if (!isTab || !isNotRepeatGroup) {
+                    // Something has gone horribly wrong
+                    return null;
+                }
+                const isRepeated = (_a = qItem.repeats) !== null && _a !== void 0 ? _a : false;
+                const tabIsMarkedAsComplete = (_b = tabs[qItem.linkId].isComplete) !== null && _b !== void 0 ? _b : false;
+                return (React.createElement(TabPanel, { key: qItem.linkId, sx: { p: 0 }, value: i.toString(), "data-test": "renderer-tab-panel" },
+                    React.createElement(GroupItem, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, groupCardElevation: 1, tabIsMarkedAsComplete: tabIsMarkedAsComplete, tabs: tabs, currentTabIndex: currentTab, onQrItemChange: handleQrGroupChange })));
+            })))));
+}
+export default FormBodyTabbed;
+//# sourceMappingURL=FormBodyTabbed.js.map

package/src/components/FormRenderer/FormBodyTabbed.js.map

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