@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

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

@@ -0,0 +1,124 @@
+/*
+ * 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 { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { QGroupContainerBox } from '../../Box.styles';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
+import useHidden from '../../../hooks/useHidden';
+import type { Tabs } from '../../../interfaces/tab.interface';
+import GroupHeading from './GroupHeading';
+import { GroupCard } from './GroupItem.styles';
+import NextTabButtonWrapper from './NextTabButtonWrapper';
+import GroupItemSwitcher from './GroupItemSwitcher';
+
+interface GroupItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  groupCardElevation: number;
+  tabIsMarkedAsComplete?: boolean;
+  tabs?: Tabs;
+  currentTabIndex?: number;
+  goToNextTab?: (nextTabIndex: number) => unknown;
+}
+
+function GroupItem(props: GroupItemProps) {
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    groupCardElevation,
+    tabIsMarkedAsComplete,
+    tabs,
+    currentTabIndex,
+    onQrItemChange
+  } = props;
+
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  const qItems = qItem.item;
+  const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const qrItems = qrGroup.item;
+
+  // Event Handlers
+  function handleQrItemChange(newQrItem: QuestionnaireResponseItem) {
+    const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
+    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    onQrItemChange(updatedQrGroup);
+  }
+
+  function handleQrRepeatGroupChange(qrRepeatGroup: QrRepeatGroup) {
+    const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
+    updateQrGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
+    onQrItemChange(updatedQrGroup);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load group, something has gone terribly wrong.</>;
+  }
+
+  // If an item has multiple answers, it is a repeat group
+  const qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
+    getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+
+  return (
+    <QGroupContainerBox
+      cardElevation={groupCardElevation}
+      isRepeated={isRepeated}
+      data-test="q-item-group-box">
+      <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
+        <GroupHeading
+          qItem={qItem}
+          tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+          isRepeated={isRepeated}
+        />
+        {qItems.map((qItem: QuestionnaireItem, i) => {
+          const qrItemOrItems = qrItemsByIndex[i];
+
+          return (
+            <GroupItemSwitcher
+              key={qItem.linkId}
+              qItem={qItem}
+              qrItemOrItems={qrItemOrItems}
+              groupCardElevation={groupCardElevation}
+              onQrItemChange={handleQrItemChange}
+              onQrRepeatGroupChange={handleQrRepeatGroupChange}
+            />
+          );
+        })}
+
+        {/* Next tab button at the end of each tab group */}
+        <NextTabButtonWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+      </GroupCard>
+    </QGroupContainerBox>
+  );
+}
+
+export default GroupItem;

package/src/components/FormComponents/GroupItem/GroupItemSwitcher.js

@@ -0,0 +1,73 @@
+/*
+ * 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 { isSpecificItemControl } from '../../../utils/itemControl';
+import QItemGroupTable from '../Tables/QItemGroupTable';
+import RepeatGroup from '../RepeatGroup/RepeatGroup';
+import { isRepeatItemAndNotCheckbox } from '../../../utils/qItem';
+import RepeatItem from '../RepeatItem/RepeatItem';
+import SingleItem from '../SingleItem/SingleItem';
+import useHidden from '../../../hooks/useHidden';
+import GroupItem from './GroupItem';
+import GridGroup from '../GridGroup/GridGroup';
+function GroupItemSwitcher(props) {
+    const { qItem, qrItemOrItems, groupCardElevation, onQrItemChange, onQrRepeatGroupChange } = props;
+    const itemIsHidden = useHidden(qItem);
+    if (itemIsHidden) {
+        return null;
+    }
+    // If there are multiple answers
+    const hasMultipleAnswers = Array.isArray(qrItemOrItems);
+    if (hasMultipleAnswers) {
+        const qrItems = qrItemOrItems;
+        // qItem should always be either a repeatGroup or a groupTable item
+        // groupTables item have qItem.repeats = true and qItem.type = 'group' as well
+        if (!qItem.repeats || qItem.type !== 'group') {
+            return React.createElement(React.Fragment, null, "Something went wrong here");
+        }
+        if (isSpecificItemControl(qItem, 'gtable')) {
+            return (React.createElement(QItemGroupTable, { qItem: qItem, qrItems: qrItems, groupCardElevation: groupCardElevation + 1, onQrRepeatGroupChange: onQrRepeatGroupChange }));
+        }
+        return (React.createElement(RepeatGroup, { qItem: qItem, qrItems: qrItems, groupCardElevation: groupCardElevation + 1, onQrRepeatGroupChange: onQrRepeatGroupChange }));
+    }
+    // If there is only one answer
+    const qrItem = qrItemOrItems;
+    const itemIsGrid = isSpecificItemControl(qItem, 'grid');
+    if (itemIsGrid) {
+        return (React.createElement(GridGroup, { qItem: qItem, qrItem: qrItem, groupCardElevation: groupCardElevation, onQrItemChange: onQrItemChange }));
+    }
+    const itemRepeatsAndIsNotCheckbox = isRepeatItemAndNotCheckbox(qItem);
+    if (itemRepeatsAndIsNotCheckbox) {
+        if (qItem.type === 'group') {
+            // If qItem is RepeatGroup or a groupTable item in this decision branch,
+            // their qrItem array should always be empty
+            if (isSpecificItemControl(qItem, 'gtable')) {
+                return (React.createElement(QItemGroupTable, { qItem: qItem, qrItems: [], groupCardElevation: groupCardElevation + 1, onQrRepeatGroupChange: onQrRepeatGroupChange }));
+            }
+            return (React.createElement(RepeatGroup, { qItem: qItem, qrItems: [], groupCardElevation: groupCardElevation + 1, onQrRepeatGroupChange: onQrRepeatGroupChange }));
+        }
+        return React.createElement(RepeatItem, { qItem: qItem, qrItem: qrItem, onQrItemChange: onQrItemChange });
+    }
+    // if qItem is not a repeating question or is a checkbox
+    if (qItem.type === 'group') {
+        return (React.createElement(GroupItem, { qItem: qItem, qrItem: qrItem, isRepeated: false, groupCardElevation: groupCardElevation + 1, onQrItemChange: onQrItemChange }));
+    }
+    // Defaults to a normal QItemSwitcher
+    return (React.createElement(SingleItem, { qItem: qItem, qrItem: qrItem, isRepeated: false, isTabled: false, onQrItemChange: onQrItemChange }));
+}
+export default GroupItemSwitcher;
+//# sourceMappingURL=GroupItemSwitcher.js.map

package/src/components/FormComponents/GroupItem/GroupItemSwitcher.js.map

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

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

@@ -0,0 +1,150 @@
+/*
+ * 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 {
+  PropsWithQrItemChangeHandler,
+  PropsWithQrRepeatGroupChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { isSpecificItemControl } from '../../../utils/itemControl';
+import QItemGroupTable from '../Tables/QItemGroupTable';
+import RepeatGroup from '../RepeatGroup/RepeatGroup';
+import { isRepeatItemAndNotCheckbox } from '../../../utils/qItem';
+import RepeatItem from '../RepeatItem/RepeatItem';
+import SingleItem from '../SingleItem/SingleItem';
+import useHidden from '../../../hooks/useHidden';
+import GroupItem from './GroupItem';
+import GridGroup from '../GridGroup/GridGroup';
+
+interface GroupItemSwitcherProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithQrRepeatGroupChangeHandler {
+  qItem: QuestionnaireItem;
+  qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
+  groupCardElevation: number;
+}
+
+function GroupItemSwitcher(props: GroupItemSwitcherProps) {
+  const { qItem, qrItemOrItems, groupCardElevation, onQrItemChange, onQrRepeatGroupChange } = props;
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  // If there are multiple answers
+  const hasMultipleAnswers = Array.isArray(qrItemOrItems);
+  if (hasMultipleAnswers) {
+    const qrItems = qrItemOrItems;
+
+    // qItem should always be either a repeatGroup or a groupTable item
+    // groupTables item have qItem.repeats = true and qItem.type = 'group' as well
+    if (!qItem.repeats || qItem.type !== 'group') {
+      return <>Something went wrong here</>;
+    }
+
+    if (isSpecificItemControl(qItem, 'gtable')) {
+      return (
+        <QItemGroupTable
+          qItem={qItem}
+          qrItems={qrItems}
+          groupCardElevation={groupCardElevation + 1}
+          onQrRepeatGroupChange={onQrRepeatGroupChange}
+        />
+      );
+    }
+
+    return (
+      <RepeatGroup
+        qItem={qItem}
+        qrItems={qrItems}
+        groupCardElevation={groupCardElevation + 1}
+        onQrRepeatGroupChange={onQrRepeatGroupChange}
+      />
+    );
+  }
+
+  // If there is only one answer
+  const qrItem = qrItemOrItems;
+  const itemIsGrid = isSpecificItemControl(qItem, 'grid');
+  if (itemIsGrid) {
+    return (
+      <GridGroup
+        qItem={qItem}
+        qrItem={qrItem}
+        groupCardElevation={groupCardElevation}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
+  const itemRepeatsAndIsNotCheckbox = isRepeatItemAndNotCheckbox(qItem);
+  if (itemRepeatsAndIsNotCheckbox) {
+    if (qItem.type === 'group') {
+      // If qItem is RepeatGroup or a groupTable item in this decision branch,
+      // their qrItem array should always be empty
+      if (isSpecificItemControl(qItem, 'gtable')) {
+        return (
+          <QItemGroupTable
+            qItem={qItem}
+            qrItems={[]}
+            groupCardElevation={groupCardElevation + 1}
+            onQrRepeatGroupChange={onQrRepeatGroupChange}
+          />
+        );
+      }
+
+      return (
+        <RepeatGroup
+          qItem={qItem}
+          qrItems={[]}
+          groupCardElevation={groupCardElevation + 1}
+          onQrRepeatGroupChange={onQrRepeatGroupChange}
+        />
+      );
+    }
+
+    return <RepeatItem qItem={qItem} qrItem={qrItem} onQrItemChange={onQrItemChange} />;
+  }
+
+  // if qItem is not a repeating question or is a checkbox
+  if (qItem.type === 'group') {
+    return (
+      <GroupItem
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={false}
+        groupCardElevation={groupCardElevation + 1}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
+  // Defaults to a normal QItemSwitcher
+  return (
+    <SingleItem
+      qItem={qItem}
+      qrItem={qrItem}
+      isRepeated={false}
+      isTabled={false}
+      onQrItemChange={onQrItemChange}
+    />
+  );
+}
+
+export default GroupItemSwitcher;

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

@@ -0,0 +1,25 @@
+/*
+ * 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 { Button } from '@mui/material';
+import Iconify from '../../Iconify/Iconify';
+function NextTabButton(props) {
+    const { isDisabled, onNextTabClick } = props;
+    return (React.createElement(Button, { variant: "contained", size: "small", endIcon: React.createElement(Iconify, { icon: "material-symbols:arrow-forward" }), disabled: isDisabled, color: "secondary", onClick: onNextTabClick }, "Next tab"));
+}
+export default NextTabButton;
+//# sourceMappingURL=NextTabButton.js.map

package/src/components/FormComponents/GroupItem/NextTabButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextTabButton.js","sourceRoot":"","sources":["NextTabButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAO5C,SAAS,aAAa,CAAC,KAAyB;IAC9C,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7C,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,oBAAC,OAAO,IAAC,IAAI,EAAC,gCAAgC,GAAG,EAC1D,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,cAAc,eAEhB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,43 @@
+/*
+ * 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 { Button } from '@mui/material';
+import Iconify from '../../Iconify/Iconify';
+
+interface NextTabButtonProps {
+  isDisabled: boolean;
+  onNextTabClick: () => void;
+}
+
+function NextTabButton(props: NextTabButtonProps) {
+  const { isDisabled, onNextTabClick } = props;
+
+  return (
+    <Button
+      variant="contained"
+      size="small"
+      endIcon={<Iconify icon="material-symbols:arrow-forward" />}
+      disabled={isDisabled}
+      color="secondary"
+      onClick={onNextTabClick}>
+      Next tab
+    </Button>
+  );
+}
+
+export default NextTabButton;

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

@@ -0,0 +1,55 @@
+/*
+ * 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 { Box } from '@mui/material';
+import { findNumOfVisibleTabs, getNextVisibleTabIndex } from '../../../utils/tabs';
+import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
+import NextTabButton from './NextTabButton';
+const NextTabButtonWrapper = memo(function NextTabWrapper(props) {
+    const { currentTabIndex, tabs } = props;
+    const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
+    const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
+    const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+    const switchTab = useQuestionnaireStore((state) => state.switchTab);
+    const tabsNotDefined = currentTabIndex === undefined || tabs === undefined;
+    function handleNextTabClick() {
+        if (tabsNotDefined) {
+            return;
+        }
+        const nextVisibleTabIndex = getNextVisibleTabIndex({
+            tabs,
+            currentTabIndex,
+            enableWhenIsActivated,
+            enableWhenItems,
+            enableWhenExpressions
+        });
+        switchTab(nextVisibleTabIndex);
+        // Scroll to top of page
+        window.scrollTo(0, 0);
+    }
+    if (tabsNotDefined) {
+        return null;
+    }
+    if (currentTabIndex === Object.keys(tabs).length - 1) {
+        return null;
+    }
+    const buttonIsDisabled = findNumOfVisibleTabs(tabs, enableWhenIsActivated, enableWhenItems, enableWhenExpressions) <= 1;
+    return (React.createElement(Box, { display: "flex", flexDirection: "row-reverse", mt: 3 },
+        React.createElement(NextTabButton, { isDisabled: buttonIsDisabled, onNextTabClick: handleNextTabClick })));
+});
+export default NextTabButtonWrapper;
+//# sourceMappingURL=NextTabButtonWrapper.js.map

package/src/components/FormComponents/GroupItem/NextTabButtonWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextTabButtonWrapper.js","sourceRoot":"","sources":["NextTabButtonWrapper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAO5C,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,cAAc,CAAC,KAAgC;IACxF,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC5F,MAAM,eAAe,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAChF,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC5F,MAAM,SAAS,GAAG,qBAAqB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEpE,MAAM,cAAc,GAAG,eAAe,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC;IAE3E,SAAS,kBAAkB;QACzB,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,MAAM,mBAAmB,GAAG,sBAAsB,CAAC;YACjD,IAAI;YACJ,eAAe;YACf,qBAAqB;YACrB,eAAe;YACf,qBAAqB;SACtB,CAAC,CAAC;QACH,SAAS,CAAC,mBAAmB,CAAC,CAAC;QAE/B,wBAAwB;QACxB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxB,CAAC;IAED,IAAI,cAAc,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,IAAI,eAAe,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QACpD,OAAO,IAAI,CAAC;KACb;IAED,MAAM,gBAAgB,GACpB,oBAAoB,CAAC,IAAI,EAAE,qBAAqB,EAAE,eAAe,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAEjG,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,aAAa,EAAC,EAAE,EAAE,CAAC;QACnD,oBAAC,aAAa,IAAC,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,kBAAkB,GAAI,CAC/E,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,oBAAoB,CAAC"}

package/src/components/FormComponents/GroupItem/NextTabButtonWrapper.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 React, { memo } from 'react';
+import { Box } from '@mui/material';
+import { findNumOfVisibleTabs, getNextVisibleTabIndex } from '../../../utils/tabs';
+import type { Tabs } from '../../../interfaces/tab.interface';
+import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
+import NextTabButton from './NextTabButton';
+
+interface NextTabButtonWrapperProps {
+  currentTabIndex?: number;
+  tabs?: Tabs;
+}
+
+const NextTabButtonWrapper = memo(function NextTabWrapper(props: NextTabButtonWrapperProps) {
+  const { currentTabIndex, tabs } = props;
+
+  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
+  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
+  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+  const switchTab = useQuestionnaireStore((state) => state.switchTab);
+
+  const tabsNotDefined = currentTabIndex === undefined || tabs === undefined;
+
+  function handleNextTabClick() {
+    if (tabsNotDefined) {
+      return;
+    }
+
+    const nextVisibleTabIndex = getNextVisibleTabIndex({
+      tabs,
+      currentTabIndex,
+      enableWhenIsActivated,
+      enableWhenItems,
+      enableWhenExpressions
+    });
+    switchTab(nextVisibleTabIndex);
+
+    // Scroll to top of page
+    window.scrollTo(0, 0);
+  }
+
+  if (tabsNotDefined) {
+    return null;
+  }
+
+  if (currentTabIndex === Object.keys(tabs).length - 1) {
+    return null;
+  }
+
+  const buttonIsDisabled =
+    findNumOfVisibleTabs(tabs, enableWhenIsActivated, enableWhenItems, enableWhenExpressions) <= 1;
+
+  return (
+    <Box display="flex" flexDirection="row-reverse" mt={3}>
+      <NextTabButton isDisabled={buttonIsDisabled} onNextTabClick={handleNextTabClick} />
+    </Box>
+  );
+});
+
+export default NextTabButtonWrapper;

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

@@ -0,0 +1,30 @@
+/*
+ * 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 { InputAdornment } from '@mui/material';
+import { StandardTextField } from '../Textfield.styles';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+function IntegerField(props) {
+    const { linkId, value, feedback, displayPrompt, displayUnit, entryFormat, readOnly, calcExpUpdated, isTabled, onInputChange } = props;
+    return (React.createElement(StandardTextField, { id: linkId, value: value.toString(), error: !!feedback, onChange: (event) => onInputChange(event.target.value), disabled: readOnly, label: displayPrompt, placeholder: entryFormat, fullWidth: true, isTabled: isTabled, size: "small", inputProps: { inputMode: 'numeric', pattern: '[0-9]*' }, InputProps: {
+            endAdornment: (React.createElement(InputAdornment, { position: 'end' },
+                React.createElement(FadingCheckIcon, { fadeIn: calcExpUpdated }),
+                displayUnit))
+        }, "data-test": "q-item-integer-field" }));
+}
+export default IntegerField;
+//# sourceMappingURL=IntegerField.js.map

package/src/components/FormComponents/IntegerItem/IntegerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegerField.js","sourceRoot":"","sources":["IntegerField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAc3D,SAAS,YAAY,CAAC,KAAwB;IAC5C,MAAM,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,iBAAiB,IAChB,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,KAAK,EAAE,CAAC,CAAC,QAAQ,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,QACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,EACvD,UAAU,EAAE;YACV,YAAY,EAAE,CACZ,oBAAC,cAAc,IAAC,QAAQ,EAAE,KAAK;gBAC7B,oBAAC,eAAe,IAAC,MAAM,EAAE,cAAc,GAAI;gBAC1C,WAAW,CACG,CAClB;SACF,eACS,sBAAsB,GAChC,CACH,CAAC;AACJ,CAAC;AAED,eAAe,YAAY,CAAC"}