@aehrc/smart-forms-renderer 0.9.2 → 0.10.0

package/src/components/FormComponents/Tables/GroupTableRow.tsx

@@ -17,65 +17,105 @@
 
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
-import SingleItem from '../SingleItem/SingleItem';
-import { getQrItemsIndex } from '../../../utils/mapItem';
-import { StandardTableCell } from './Table.styles';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
+import { TableRowProps } from '@mui/material/TableRow';
+import SelectRowButton from './SelectRowButton';
+import GroupTableRowCells from './GroupTableRowCells';
+import RemoveRowButton from './RemoveRowButton';
+import { GroupTableRowModel } from '../../../interfaces/groupTable.interface';
+import DragIndicator from '@mui/icons-material/DragIndicator';
+import TableCell from '@mui/material/TableCell';
+import Box from '@mui/material/Box';
+import { Draggable } from 'react-beautiful-dnd';
+import { StyledGroupTableRow } from './Table.styles';
 
-interface Props extends PropsWithQrItemChangeHandler, PropsWithParentIsReadOnlyAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
+interface GroupTableRowProps
+  extends PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute,
+    TableRowProps {
+  nanoId: string;
+  index: number;
+  tableQItem: QuestionnaireItem;
+  answeredQrItem: QuestionnaireResponseItem;
+  nullableQrItem: QuestionnaireResponseItem | null;
+  readOnly: boolean;
+  hoverDisabled: boolean;
+  tableRows: GroupTableRowModel[];
+  itemIsSelected: boolean;
+  selectedIds: string[];
   qItemsIndexMap: Record<string, number>;
+  onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
+  onRemoveRow: (index: number) => void;
+  onSelectRow: (nanoId: string) => void;
 }
 
-function GroupTableRow(props: Props) {
-  const { qItem, qrItem, qItemsIndexMap, parentIsReadOnly, onQrItemChange } = props;
-
-  const rowItems = qItem.item;
-  const row = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
-  const rowQrItems = row.item;
-
-  if (!rowItems || !rowQrItems) {
-    return null;
-  }
-
-  function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
-    const qrRow: QuestionnaireResponseItem = { ...row };
-    updateQrItemsInGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
-    onQrItemChange(qrRow);
-  }
-
-  const qrItemsByIndex = getQrItemsIndex(rowItems, rowQrItems, qItemsIndexMap);
+function GroupTableRow(props: GroupTableRowProps) {
+  const {
+    nanoId,
+    index,
+    tableQItem,
+    answeredQrItem,
+    nullableQrItem,
+    readOnly,
+    hoverDisabled,
+    tableRows,
+    itemIsSelected,
+    qItemsIndexMap,
+    showMinimalView,
+    parentIsReadOnly,
+    onRowChange,
+    onRemoveRow,
+    onSelectRow
+  } = props;
 
   return (
-    <>
-      {rowItems.map((rowItem, index) => {
-        const qrItem = qrItemsByIndex[index];
-
-        if (Array.isArray(qrItem)) {
-          return null;
-        }
-
-        return (
-          <StandardTableCell key={index} numOfColumns={rowItems.length} isFirst={index === 0}>
-            <SingleItem
-              key={qItem.linkId}
-              qItem={rowItem}
-              qrItem={qrItem ?? null}
-              isRepeated={true}
-              isTabled={true}
-              showMinimalView={true}
-              parentIsReadOnly={parentIsReadOnly}
-              onQrItemChange={handleQrRowItemChange}
+    <Draggable draggableId={nanoId} index={index}>
+      {(draggableProvided, snapshot) => (
+        <StyledGroupTableRow
+          itemIsDragged={snapshot.isDragging}
+          itemIsSelected={itemIsSelected}
+          hoverDisabled={hoverDisabled}
+          hover={!hoverDisabled}
+          ref={draggableProvided.innerRef}
+          {...draggableProvided.draggableProps}>
+          {showMinimalView ? null : (
+            <>
+              <TableCell padding="checkbox">
+                <Box
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  {...draggableProvided.dragHandleProps}>
+                  <DragIndicator fontSize="small" />
+                </Box>
+              </TableCell>
+              <SelectRowButton
+                isSelected={itemIsSelected}
+                onSelectItem={() => onSelectRow(nanoId)}
+              />
+            </>
+          )}
+          <GroupTableRowCells
+            qItem={tableQItem}
+            qrItem={answeredQrItem}
+            qItemsIndexMap={qItemsIndexMap}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={(newQrGroup) => onRowChange(newQrGroup, index)}
+          />
+          {showMinimalView ? null : (
+            <RemoveRowButton
+              nullableQrItem={nullableQrItem}
+              numOfRows={tableRows.length}
+              readOnly={readOnly}
+              onRemoveItem={() => onRemoveRow(index)}
             />
-          </StandardTableCell>
-        );
-      })}
-    </>
+          )}
+        </StyledGroupTableRow>
+      )}
+    </Draggable>
   );
 }
 

package/src/components/FormComponents/Tables/GroupTableRowCells.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
+import SingleItem from '../SingleItem/SingleItem';
+import { getQrItemsIndex } from '../../../utils/mapItem';
+import { StandardTableCell } from './Table.styles';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { TableRowProps } from '@mui/material/TableRow';
+
+interface GroupTableRowCellsProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute,
+    TableRowProps {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+  qItemsIndexMap: Record<string, number>;
+}
+
+function GroupTableRowCells(props: GroupTableRowCellsProps) {
+  const { qItem, qrItem, qItemsIndexMap, parentIsReadOnly, onQrItemChange, ...tableRowProps } =
+    props;
+
+  const rowItems = qItem.item;
+  const row = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
+  const rowQrItems = row.item;
+
+  if (!rowItems || !rowQrItems) {
+    return null;
+  }
+
+  function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
+    const qrRow: QuestionnaireResponseItem = { ...row };
+    updateQrItemsInGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    onQrItemChange(qrRow);
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(rowItems, rowQrItems, qItemsIndexMap);
+
+  return (
+    <>
+      {rowItems.map((rowItem, index) => {
+        const qrItem = qrItemsByIndex[index];
+
+        if (Array.isArray(qrItem)) {
+          return null;
+        }
+
+        return (
+          <StandardTableCell key={index} numOfColumns={rowItems.length} isFirst={index === 0}>
+            <SingleItem
+              key={qItem.linkId}
+              qItem={rowItem}
+              qrItem={qrItem ?? null}
+              isRepeated={true}
+              isTabled={true}
+              showMinimalView={true}
+              parentIsReadOnly={parentIsReadOnly}
+              onQrItemChange={handleQrRowItemChange}
+            />
+          </StandardTableCell>
+        );
+      })}
+    </>
+  );
+}
+
+export default GroupTableRowCells;

package/src/components/FormComponents/Tables/GroupTableView.tsx

@@ -0,0 +1,169 @@
+/*
+ * 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 { QGroupContainerBox } from '../../Box.styles';
+import TableContainer from '@mui/material/TableContainer';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { HeaderTableCell } from './Table.styles';
+import TableCell from '@mui/material/TableCell';
+import TableBody from '@mui/material/TableBody';
+import Typography from '@mui/material/Typography';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import Divider from '@mui/material/Divider';
+import AddRowButton from './AddRowButton';
+import { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithShowMinimalViewAttribute
+} from '../../../interfaces/renderProps.interface';
+import { GroupTableRowModel } from '../../../interfaces/groupTable.interface';
+import GroupTableBody from './GroupTableBody';
+import Checkbox from '@mui/material/Checkbox';
+
+interface GroupTableViewProps
+  extends PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qItemsIndexMap: Record<string, number>;
+  groupCardElevation: number;
+  readOnly: boolean;
+  tableRows: GroupTableRowModel[];
+  selectedIds: string[];
+  itemLabels: string[];
+  onAddRow: () => void;
+  onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
+  onRemoveRow: (index: number) => void;
+  onSelectRow: (nanoId: string) => void;
+  onSelectAll: () => void;
+  onReorderRows: (newTableRows: GroupTableRowModel[]) => void;
+}
+
+function GroupTableView(props: GroupTableViewProps) {
+  const {
+    qItem,
+    qItemsIndexMap,
+    groupCardElevation,
+    readOnly,
+    tableRows,
+    selectedIds,
+    itemLabels,
+    showMinimalView,
+    parentIsReadOnly,
+    onAddRow,
+    onRowChange,
+    onRemoveRow,
+    onSelectRow,
+    onSelectAll,
+    onReorderRows
+  } = props;
+
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={1}>
+        <TableContainer component={Paper} elevation={groupCardElevation}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                {itemLabels.map((itemLabel) => (
+                  <HeaderTableCell key={itemLabel} size="medium">
+                    {itemLabel}
+                  </HeaderTableCell>
+                ))}
+                <TableCell />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <GroupTableBody
+                tableQItem={qItem}
+                readOnly={readOnly}
+                tableRows={tableRows}
+                selectedIds={selectedIds}
+                qItemsIndexMap={qItemsIndexMap}
+                showMinimalView={showMinimalView}
+                parentIsReadOnly={parentIsReadOnly}
+                onRowChange={onRowChange}
+                onRemoveRow={onRemoveRow}
+                onSelectRow={onSelectRow}
+                onReorderRows={onReorderRows}
+              />
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </QGroupContainerBox>
+    );
+  }
+
+  return (
+    <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
+      {groupCardElevation !== 1 ? (
+        <>
+          <Typography
+            fontSize={13}
+            variant="h6"
+            color={readOnly ? 'text.secondary' : 'text.primary'}>
+            <LabelWrapper qItem={qItem} readOnly={readOnly} />
+          </Typography>
+          <Divider sx={{ my: 1 }} light />
+        </>
+      ) : null}
+      <TableContainer component={Paper} elevation={groupCardElevation}>
+        <Table>
+          <caption>
+            <AddRowButton repeatGroups={tableRows} readOnly={readOnly} onAddItem={onAddRow} />
+          </caption>
+          <TableHead>
+            <TableRow>
+              <HeaderTableCell padding="checkbox" />
+              <HeaderTableCell padding="checkbox">
+                <Checkbox
+                  color="primary"
+                  size="small"
+                  indeterminate={selectedIds.length > 0 && selectedIds.length < tableRows.length}
+                  checked={tableRows.length > 0 && selectedIds.length === tableRows.length}
+                  onChange={onSelectAll}
+                />
+              </HeaderTableCell>
+              {itemLabels.map((itemLabel) => (
+                <HeaderTableCell key={itemLabel}>{itemLabel}</HeaderTableCell>
+              ))}
+              <TableCell />
+            </TableRow>
+          </TableHead>
+          <GroupTableBody
+            tableQItem={qItem}
+            readOnly={readOnly}
+            tableRows={tableRows}
+            selectedIds={selectedIds}
+            qItemsIndexMap={qItemsIndexMap}
+            showMinimalView={showMinimalView}
+            parentIsReadOnly={parentIsReadOnly}
+            onRowChange={onRowChange}
+            onRemoveRow={onRemoveRow}
+            onSelectRow={onSelectRow}
+            onReorderRows={onReorderRows}
+          />
+        </Table>
+      </TableContainer>
+    </QGroupContainerBox>
+  );
+}
+
+export default GroupTableView;

package/src/components/FormComponents/Tables/{DeleteRowButton.tsx → RemoveRowButton.tsx}

@@ -23,22 +23,22 @@ import Tooltip from '@mui/material/Tooltip';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 
-interface DeleteRowButtonProps {
+interface RemoveRowButtonProps {
   nullableQrItem: QuestionnaireResponseItem | null;
   numOfRows: number;
   readOnly: boolean;
-  onDeleteItem: () => void;
+  onRemoveItem: () => void;
 }
 
-function DeleteRowButton(props: DeleteRowButtonProps) {
-  const { nullableQrItem, numOfRows, readOnly, onDeleteItem } = props;
+function RemoveRowButton(props: RemoveRowButtonProps) {
+  const { nullableQrItem, numOfRows, readOnly, onRemoveItem } = props;
 
   const isDisabled = nullableQrItem === null || numOfRows === 1 || readOnly;
   return (
     <DeleteButtonTableCell>
-      <Tooltip title="Delete item">
+      <Tooltip title="Remove item">
         <span>
-          <IconButton size="small" color="error" disabled={isDisabled} onClick={onDeleteItem}>
+          <IconButton size="small" color="error" disabled={isDisabled} onClick={onRemoveItem}>
             <RemoveCircleOutlineIcon fontSize="small" />
           </IconButton>
         </span>
@@ -47,4 +47,4 @@ function DeleteRowButton(props: DeleteRowButtonProps) {
   );
 }
 
-export default DeleteRowButton;
+export default RemoveRowButton;

package/src/components/FormComponents/Tables/SelectRowButton.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 Checkbox from '@mui/material/Checkbox';
+import TableCell from '@mui/material/TableCell';
+
+interface SelectRowButtonProps {
+  isSelected: boolean;
+  onSelectItem: () => void;
+}
+
+function SelectRowButton(props: SelectRowButtonProps) {
+  const { isSelected, onSelectItem } = props;
+
+  return (
+    <TableCell padding="checkbox">
+      <Checkbox color="primary" size="small" checked={isSelected} onChange={onSelectItem} />
+    </TableCell>
+  );
+}
+
+export default SelectRowButton;

package/src/components/FormComponents/Tables/Table.styles.tsx

@@ -17,6 +17,8 @@
 
 import { styled } from '@mui/material/styles';
 import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import { grey } from '@mui/material/colors';
 
 export const HeaderTableCell = styled(TableCell)(() => ({
   fontSize: 13,
@@ -50,3 +52,26 @@ export const GridAnswerTableCell = styled(TableCell, {
   paddingLeft: 5,
   paddingRight: 5
 }));
+
+export const StyledGroupTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) =>
+    prop !== 'itemIsDragged' && prop !== 'itemIsSelected' && prop !== 'hoverDisabled'
+})<{ itemIsDragged: boolean; itemIsSelected: boolean; hoverDisabled: boolean }>(
+  ({ theme, itemIsDragged, itemIsSelected, hoverDisabled }) => ({
+    backgroundColor: itemIsSelected ? '#f4f8ff' : '#fff',
+    ...(hoverDisabled
+      ? {}
+      : {
+          '&.MuiTableRow-root:hover': {
+            backgroundColor: itemIsSelected ? '#e9f1ff' : grey['50']
+          }
+        }),
+    ...(itemIsDragged
+      ? {
+          boxShadow: theme.customShadows.z8,
+          opacity: 1,
+          backgroundColor: itemIsSelected ? '#edf4ff' : '#fafafa'
+        }
+      : {})
+  })
+);

package/src/components/Renderer/BaseRenderer.tsx

@@ -20,18 +20,17 @@ import Container from '@mui/material/Container';
 import Fade from '@mui/material/Fade';
 import FormTopLevelItem from './FormTopLevelItem';
 import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
-import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
-import useQuestionnaireResponseStore from '../../stores/useQuestionnaireResponseStore';
+import { useQuestionnaireResponseStore, useQuestionnaireStore } from '../../stores';
 import cloneDeep from 'lodash.clonedeep';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { updateQrItemsInGroup } from '../../utils/qrItem';
 import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
 
 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);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const updateExpressions = useQuestionnaireStore.use.updateExpressions();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
+  const updateResponse = useQuestionnaireResponseStore.use.updateResponse();
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(sourceQuestionnaire), [sourceQuestionnaire]);
 

package/src/components/Renderer/FormBodyCollapsible.tsx

@@ -21,7 +21,7 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
-import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../../stores';
 import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
 
 interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler {
@@ -32,10 +32,9 @@ interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler {
 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 tabs = useQuestionnaireStore.use.tabs();
+  const currentTab = useQuestionnaireStore.use.currentTabIndex();
+  const switchTab = useQuestionnaireStore.use.switchTab();
 
   const indexMap: Record<string, number> = useMemo(
     () => mapQItemsIndex(topLevelQItem),

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -25,7 +25,7 @@ import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
 import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
-import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../../stores';
 
 interface FormBodyTabbedProps extends PropsWithQrItemChangeHandler {
   topLevelQItem: QuestionnaireItem;
@@ -35,8 +35,8 @@ interface FormBodyTabbedProps extends PropsWithQrItemChangeHandler {
 function FormBodyTabbed(props: FormBodyTabbedProps) {
   const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
 
-  const tabs = useQuestionnaireStore((state) => state.tabs);
-  const currentTab = useQuestionnaireStore((state) => state.currentTabIndex);
+  const tabs = useQuestionnaireStore.use.tabs();
+  const currentTab = useQuestionnaireStore.use.currentTabIndex();
 
   const indexMap: Record<string, number> = useMemo(
     () => mapQItemsIndex(topLevelQItem),

package/src/components/Tabs/CompleteTabButton.tsx

@@ -19,7 +19,7 @@ import React, { memo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../../stores';
 
 interface CompleteTabButtonProps {
   tabLinkId: string;
@@ -29,7 +29,7 @@ interface CompleteTabButtonProps {
 const CompleteTabButton = memo(function CompleteTabButton(props: CompleteTabButtonProps) {
   const { tabLinkId, tabIsMarkedAsComplete } = props;
 
-  const markTabAsComplete = useQuestionnaireStore((state) => state.markTabAsComplete);
+  const markTabAsComplete = useQuestionnaireStore.use.markTabAsComplete();
 
   return (
     <Tooltip title={tabIsMarkedAsComplete ? 'Mark as incomplete' : 'Complete tab'}>

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -20,8 +20,7 @@ import Box from '@mui/material/Box';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
-
-import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../../stores';
 import type { QuestionnaireItem } from 'fhir/r4';
 import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
 
@@ -35,7 +34,7 @@ interface FormBodySingleTabProps {
 const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleTabProps) {
   const { contextDisplayItems, selected, tabLabel, listIndex } = props;
 
-  const switchTab = useQuestionnaireStore((state) => state.switchTab);
+  const switchTab = useQuestionnaireStore.use.switchTab();
 
   function handleTabClick() {
     switchTab(listIndex);

package/src/components/Tabs/FormBodyTabList.tsx

@@ -22,7 +22,7 @@ import { getShortText } from '../../utils/itemControl';
 import type { QuestionnaireItem } from 'fhir/r4';
 import FormBodySingleTab from './FormBodySingleTab';
 import type { Tabs } from '../../interfaces/tab.interface';
-import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../../stores';
 import { isTabHidden } from '../../utils/tabs';
 
 interface FormBodyTabListProps {
@@ -37,9 +37,9 @@ const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProp
   const { topLevelItems, currentTabIndex, tabs, completedTabsCollapsed, allContextDisplayItems } =
     props;
 
-  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
-  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
-  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+  const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
+  const enableWhenItems = useQuestionnaireStore.use.enableWhenItems();
+  const enableWhenExpressions = useQuestionnaireStore.use.enableWhenExpressions();
 
   return (
     <TransitionGroup>