@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

package/src/components/FormComponents/BooleanItem/BooleanItem.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 type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  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';
+import BooleanField from './BooleanField';
+import { Box } from '@mui/material';
+
+interface BooleanItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function BooleanItem(props: BooleanItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Init input value
+  let checked = false;
+  if (qrItem?.answer && qrItem.answer[0].valueBoolean) {
+    checked = qrItem.answer[0].valueBoolean;
+  }
+
+  // Event handlers
+  function handleCheckedChange(newChecked: boolean) {
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueBoolean: newChecked }]
+    });
+  }
+
+  if (isTabled) {
+    return (
+      <Box display="flex" justifyContent="center">
+        <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+      </Box>
+    );
+  }
+
+  if (isRepeated) {
+    return (
+      <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+    );
+  }
+  return (
+    <FullWidthFormComponentBox data-test="q-item-boolean-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default BooleanItem;

package/src/components/FormComponents/DateItem/DateField.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 { DatePicker as MuiDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+function DateField(props) {
+    const { value, displayPrompt, entryFormat, readOnly, isTabled, onDateChange } = props;
+    return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+        React.createElement(MuiDatePicker, { format: entryFormat !== '' ? entryFormat : 'DD/MM/YYYY', value: value, disabled: readOnly, label: displayPrompt, sx: { maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }, onChange: onDateChange, slotProps: {
+                textField: {
+                    size: 'small',
+                    fullWidth: true
+                }
+            }, "data-test": "q-item-date-field" })));
+}
+export default DateField;
+//# sourceMappingURL=DateField.js.map

package/src/components/FormComponents/DateItem/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["DateField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAUhE,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEtF,OAAO,CACL,oBAAC,oBAAoB,IAAC,WAAW,EAAE,YAAY;QAC7C,oBAAC,aAAa,IACZ,MAAM,EAAE,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EACvD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,aAAa,EACpB,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,EACvD,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE;gBACT,SAAS,EAAE;oBACT,IAAI,EAAE,OAAO;oBACb,SAAS,EAAE,IAAI;iBAChB;aACF,eACS,mBAAmB,GAC7B,CACmB,CACxB,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

package/src/components/FormComponents/DateItem/DateField.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { Dayjs } from 'dayjs';
+import { DatePicker as MuiDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+interface DateFieldProps extends PropsWithIsTabledAttribute {
+  value: Dayjs | null;
+  displayPrompt: string;
+  entryFormat: string;
+  readOnly: boolean;
+  onDateChange: (newValue: Dayjs | null) => unknown;
+}
+
+function DateField(props: DateFieldProps) {
+  const { value, displayPrompt, entryFormat, readOnly, isTabled, onDateChange } = props;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <MuiDatePicker
+        format={entryFormat !== '' ? entryFormat : 'DD/MM/YYYY'}
+        value={value}
+        disabled={readOnly}
+        label={displayPrompt}
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+        onChange={onDateChange}
+        slotProps={{
+          textField: {
+            size: 'small',
+            fullWidth: true
+          }
+        }}
+        data-test="q-item-date-field"
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default DateField;

package/src/components/FormComponents/DateItem/DateItem.js

@@ -0,0 +1,52 @@
+/*
+ * 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 useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import DateField from './DateField';
+import dayjs from 'dayjs';
+function DateItem(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    // Get additional rendering extensions
+    const { displayPrompt, displayInstructions, readOnly, entryFormat } = useRenderingExtensions(qItem);
+    // Init input value
+    let dateString = null;
+    if ((qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer) && (qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer[0].valueDate)) {
+        dateString = qrItem.answer[0].valueDate;
+    }
+    const dateDayJs = dateString ? dayjs(dateString) : null;
+    // Event handlers
+    function handleDateChange(newValue) {
+        const emptyQrItem = createEmptyQrItem(qItem);
+        if (newValue) {
+            onQrItemChange(Object.assign(Object.assign({}, emptyQrItem), { answer: [{ valueDate: newValue.format('YYYY-MM-DD') }] }));
+        }
+        else {
+            onQrItemChange(emptyQrItem);
+        }
+    }
+    if (isRepeated) {
+        return (React.createElement(DateField, { value: dateDayJs, displayPrompt: displayPrompt, entryFormat: entryFormat, readOnly: readOnly, onDateChange: handleDateChange, isTabled: isTabled }));
+    }
+    return (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-date-box" },
+        React.createElement(ItemFieldGrid, { qItem: qItem, displayInstructions: displayInstructions },
+            React.createElement(DateField, { value: dateDayJs, displayPrompt: displayPrompt, entryFormat: entryFormat, readOnly: readOnly, onDateChange: handleDateChange, isTabled: isTabled }))));
+}
+export default DateItem;
+//# sourceMappingURL=DateItem.js.map

package/src/components/FormComponents/DateItem/DateItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateItem.js","sourceRoot":"","sources":["DateItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEtE,sCAAsC;IACtC,MAAM,EAAE,aAAa,EAAE,mBAAmB,EAAE,QAAQ,EAAE,WAAW,EAAE,GACjE,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAEhC,mBAAmB;IACnB,IAAI,UAAU,GAAkB,IAAI,CAAC;IAErC,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,CAAC,EAAE,SAAS,CAAA,EAAE;QACjD,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;KACzC;IACD,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAExD,iBAAiB;IACjB,SAAS,gBAAgB,CAAC,QAAsB;QAC9C,MAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAI,QAAQ,EAAE;YACZ,cAAc,iCAAM,WAAW,KAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,IAAG,CAAC;SAC5F;aAAM;YACL,cAAc,CAAC,WAAW,CAAC,CAAC;SAC7B;IACH,CAAC;IAED,IAAI,UAAU,EAAE;QACd,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;KACH;IAED,OAAO,CACL,oBAAC,yBAAyB,iBAAW,iBAAiB;QACpD,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB;YACnE,oBAAC,SAAS,IACR,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,QAAQ,GAClB,CACY,CACU,CAC7B,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

package/src/components/FormComponents/DateItem/DateItem.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  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';
+import DateField from './DateField';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+interface DateItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function DateItem(props: DateItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Init input value
+  let dateString: string | null = null;
+
+  if (qrItem?.answer && qrItem?.answer[0].valueDate) {
+    dateString = qrItem.answer[0].valueDate;
+  }
+  const dateDayJs = dateString ? dayjs(dateString) : null;
+
+  // Event handlers
+  function handleDateChange(newValue: Dayjs | null) {
+    const emptyQrItem = createEmptyQrItem(qItem);
+    if (newValue) {
+      onQrItemChange({ ...emptyQrItem, answer: [{ valueDate: newValue.format('YYYY-MM-DD') }] });
+    } else {
+      onQrItemChange(emptyQrItem);
+    }
+  }
+
+  if (isRepeated) {
+    return (
+      <DateField
+        value={dateDayJs}
+        displayPrompt={displayPrompt}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        onDateChange={handleDateChange}
+        isTabled={isTabled}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-date-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <DateField
+          value={dateDayJs}
+          displayPrompt={displayPrompt}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          onDateChange={handleDateChange}
+          isTabled={isTabled}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default DateItem;

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

@@ -0,0 +1,33 @@
+/*
+ * 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 { DateTimePicker as MuiDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Box } from '@mui/material';
+function DateTimeField(props) {
+    const { value, displayPrompt, entryFormat, readOnly, isTabled, onDateTimeChange } = props;
+    return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+        React.createElement(Box, { "data-test": "q-item-date-time-field" },
+            React.createElement(MuiDateTimePicker, { format: entryFormat !== '' ? entryFormat : 'DD/MM/YYYY hh:mm A', value: value, disabled: readOnly, label: displayPrompt, sx: { maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }, onChange: onDateTimeChange, slotProps: {
+                    textField: {
+                        size: 'small',
+                        fullWidth: true
+                    }
+                } }))));
+}
+export default DateTimeField;
+//# sourceMappingURL=DateTimeField.js.map

package/src/components/FormComponents/DateTimeItem/DateTimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.js","sourceRoot":"","sources":["DateTimeField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAUpC,SAAS,aAAa,CAAC,KAAyB;IAC9C,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAE1F,OAAO,CACL,oBAAC,oBAAoB,IAAC,WAAW,EAAE,YAAY;QAC7C,oBAAC,GAAG,iBAAW,wBAAwB;YACrC,oBAAC,iBAAiB,IAChB,MAAM,EAAE,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,EAC/D,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,aAAa,EACpB,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,EACvD,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE;oBACT,SAAS,EAAE;wBACT,IAAI,EAAE,OAAO;wBACb,SAAS,EAAE,IAAI;qBAChB;iBACF,GACD,CACE,CACe,CACxB,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,58 @@
+/*
+ * 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 { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { Dayjs } from 'dayjs';
+import { DateTimePicker as MuiDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Box } from '@mui/material';
+
+interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
+  value: Dayjs | null;
+  displayPrompt: string;
+  entryFormat: string;
+  readOnly: boolean;
+  onDateTimeChange: (newValue: Dayjs | null) => unknown;
+}
+
+function DateTimeField(props: DateTimeFieldProps) {
+  const { value, displayPrompt, entryFormat, readOnly, isTabled, onDateTimeChange } = props;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Box data-test="q-item-date-time-field">
+        <MuiDateTimePicker
+          format={entryFormat !== '' ? entryFormat : 'DD/MM/YYYY hh:mm A'}
+          value={value}
+          disabled={readOnly}
+          label={displayPrompt}
+          sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+          onChange={onDateTimeChange}
+          slotProps={{
+            textField: {
+              size: 'small',
+              fullWidth: true
+            }
+          }}
+        />
+      </Box>
+    </LocalizationProvider>
+  );
+}
+
+export default DateTimeField;

package/src/components/FormComponents/DateTimeItem/DateTimeItem.js

@@ -0,0 +1,52 @@
+/*
+ * 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 useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import DateTimeField from './DateTimeField';
+import dayjs from 'dayjs';
+function DateTimeItem(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    // Get additional rendering extensions
+    const { displayPrompt, displayInstructions, readOnly, entryFormat } = useRenderingExtensions(qItem);
+    // Init input value
+    let dateTimeString = null;
+    if ((qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer) && (qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer[0].valueDateTime)) {
+        dateTimeString = qrItem.answer[0].valueDateTime;
+    }
+    const dateTimeDayJs = dateTimeString ? dayjs(dateTimeString) : null;
+    // Event handlers
+    function handleDateTimeChange(newValue) {
+        const emptyQrItem = createEmptyQrItem(qItem);
+        if (newValue) {
+            onQrItemChange(Object.assign(Object.assign({}, emptyQrItem), { answer: [{ valueDateTime: newValue.format() }] }));
+        }
+        else {
+            onQrItemChange(emptyQrItem);
+        }
+    }
+    if (isRepeated) {
+        return (React.createElement(DateTimeField, { value: dateTimeDayJs, displayPrompt: displayPrompt, entryFormat: entryFormat, readOnly: readOnly, onDateTimeChange: handleDateTimeChange, isTabled: isTabled }));
+    }
+    return (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-date-time-box" },
+        React.createElement(ItemFieldGrid, { qItem: qItem, displayInstructions: displayInstructions },
+            React.createElement(DateTimeField, { value: dateTimeDayJs, displayPrompt: displayPrompt, entryFormat: entryFormat, readOnly: readOnly, onDateTimeChange: handleDateTimeChange, isTabled: isTabled }))));
+}
+export default DateTimeItem;
+//# sourceMappingURL=DateTimeItem.js.map

package/src/components/FormComponents/DateTimeItem/DateTimeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeItem.js","sourceRoot":"","sources":["DateTimeItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,SAAS,YAAY,CAAC,KAAwB;IAC5C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEtE,sCAAsC;IACtC,MAAM,EAAE,aAAa,EAAE,mBAAmB,EAAE,QAAQ,EAAE,WAAW,EAAE,GACjE,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAEhC,mBAAmB;IACnB,IAAI,cAAc,GAAkB,IAAI,CAAC;IACzC,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,CAAC,EAAE,aAAa,CAAA,EAAE;QACrD,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;KACjD;IACD,MAAM,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEpE,iBAAiB;IACjB,SAAS,oBAAoB,CAAC,QAAsB;QAClD,MAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAI,QAAQ,EAAE;YACZ,cAAc,iCAAM,WAAW,KAAE,MAAM,EAAE,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC,IAAG,CAAC;SACpF;aAAM;YACL,cAAc,CAAC,WAAW,CAAC,CAAC;SAC7B;IACH,CAAC;IAED,IAAI,UAAU,EAAE;QACd,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,aAAa,EACpB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,oBAAoB,EACtC,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;KACH;IAED,OAAO,CACL,oBAAC,yBAAyB,iBAAW,sBAAsB;QACzD,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB;YACnE,oBAAC,aAAa,IACZ,KAAK,EAAE,aAAa,EACpB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,oBAAoB,EACtC,QAAQ,EAAE,QAAQ,GAClB,CACY,CACU,CAC7B,CAAC;AACJ,CAAC;AAED,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,94 @@
+/*
+ * 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 {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  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';
+import DateTimeField from './DateTimeField';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+interface DateTimeItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function DateTimeItem(props: DateTimeItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Init input value
+  let dateTimeString: string | null = null;
+  if (qrItem?.answer && qrItem?.answer[0].valueDateTime) {
+    dateTimeString = qrItem.answer[0].valueDateTime;
+  }
+  const dateTimeDayJs = dateTimeString ? dayjs(dateTimeString) : null;
+
+  // Event handlers
+  function handleDateTimeChange(newValue: Dayjs | null) {
+    const emptyQrItem = createEmptyQrItem(qItem);
+    if (newValue) {
+      onQrItemChange({ ...emptyQrItem, answer: [{ valueDateTime: newValue.format() }] });
+    } else {
+      onQrItemChange(emptyQrItem);
+    }
+  }
+
+  if (isRepeated) {
+    return (
+      <DateTimeField
+        value={dateTimeDayJs}
+        displayPrompt={displayPrompt}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        onDateTimeChange={handleDateTimeChange}
+        isTabled={isTabled}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-date-time-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <DateTimeField
+          value={dateTimeDayJs}
+          displayPrompt={displayPrompt}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          onDateTimeChange={handleDateTimeChange}
+          isTabled={isTabled}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default DateTimeItem;

package/src/components/FormComponents/DecimalItem/DecimalField.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 FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import { StandardTextField } from '../Textfield.styles';
+function DecimalField(props) {
+    const { linkId, input, feedback, displayPrompt, displayUnit, entryFormat, readOnly, calcExpUpdated, isTabled, onInputChange } = props;
+    return (React.createElement(StandardTextField, { id: linkId, value: input, 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-decimal-field" }));
+}
+export default DecimalField;
+//# sourceMappingURL=DecimalField.js.map

package/src/components/FormComponents/DecimalItem/DecimalField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecimalField.js","sourceRoot":"","sources":["DecimalField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAexD,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,EACZ,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"}