@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

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

@@ -0,0 +1,128 @@
+/*
+ * 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,
+  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 TextField from './TextField';
+import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+
+interface TextItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function TextItem(props: TextItemProps) {
+  const { qItem, qrItem, isRepeated, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const {
+    displayUnit,
+    displayPrompt,
+    displayInstructions,
+    readOnly,
+    entryFormat,
+    regexValidation,
+    maxLength
+  } = useRenderingExtensions(qItem);
+
+  // Init input value
+  let valueText = '';
+  if (qrItem?.answer && qrItem?.answer[0].valueString) {
+    valueText = qrItem.answer[0].valueString;
+  }
+  const [input, setInput] = useState(valueText);
+
+  // Perform validation checks
+  const feedback = useValidationError(input, regexValidation, maxLength);
+
+  // Process calculated expressions
+  const { calcExpUpdated } = useStringCalculatedExpression({
+    qItem: qItem,
+    inputValue: input,
+    setInputValue: (value) => {
+      setInput(value);
+    },
+    onQrItemChange: onQrItemChange
+  });
+
+  // Event handlers
+  function handleInputChange(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: [{ valueString: input.trim() }] });
+      } else {
+        onQrItemChange(emptyQrItem);
+      }
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  if (isRepeated) {
+    return (
+      <TextField
+        linkId={qItem.linkId}
+        input={input}
+        feedback={feedback}
+        displayPrompt={displayPrompt}
+        displayUnit={displayUnit}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
+        onInputChange={handleInputChange}
+      />
+    );
+  }
+  return (
+    <FullWidthFormComponentBox data-test="q-item-text-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <TextField
+          linkId={qItem.linkId}
+          input={input}
+          feedback={feedback}
+          displayPrompt={displayPrompt}
+          displayUnit={displayUnit}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          onInputChange={handleInputChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default TextItem;

package/src/components/FormComponents/Textfield.styles.js

@@ -0,0 +1,27 @@
+/*
+ * 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 { styled, TextField } from '@mui/material';
+// Always use this accompanied by the TextField prop fullWidth
+export const StandardTextField = styled(TextField, {
+    shouldForwardProp: (prop) => prop !== 'isTabled'
+})(({ isTabled }) => ({
+    // Set 280 as the standard width for a field
+    // Set a theoretical infinite maxWidth if field is within a table to fill the table row
+    maxWidth: !isTabled ? 280 : 3000,
+    minWidth: 160
+}));
+//# sourceMappingURL=Textfield.styles.js.map

package/src/components/FormComponents/Textfield.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textfield.styles.js","sourceRoot":"","sources":["Textfield.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAElD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,EAAE;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,UAAU;CACjD,CAAC,CAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3C,4CAA4C;IAC5C,uFAAuF;IACvF,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;IAChC,QAAQ,EAAE,GAAG;CACd,CAAC,CAAC,CAAC"}

package/src/components/FormComponents/Textfield.styles.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { styled, TextField } from '@mui/material';
+
+// Always use this accompanied by the TextField prop fullWidth
+export const StandardTextField = styled(TextField, {
+  shouldForwardProp: (prop) => prop !== 'isTabled'
+})<{ isTabled: boolean }>(({ isTabled }) => ({
+  // Set 280 as the standard width for a field
+  // Set a theoretical infinite maxWidth if field is within a table to fill the table row
+  maxWidth: !isTabled ? 280 : 3000,
+  minWidth: 160
+}));

package/src/components/FormComponents/TimeItem/TimeField.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 { LocalizationProvider, TimePicker as MuiTimePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+function TimeField(props) {
+    const { value, displayPrompt, entryFormat, readOnly, isTabled, onTimeChange } = props;
+    return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+        React.createElement(MuiTimePicker, { format: entryFormat !== '' ? entryFormat : 'hh:mm a', value: value, disabled: readOnly, label: displayPrompt, sx: { maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }, slotProps: {
+                textField: {
+                    fullWidth: true
+                }
+            }, onChange: onTimeChange })));
+}
+export default TimeField;
+//# sourceMappingURL=TimeField.js.map

package/src/components/FormComponents/TimeItem/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["TimeField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,UAAU,IAAI,aAAa,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,SAAS,EACpD,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,SAAS,EAAE;gBACT,SAAS,EAAE;oBACT,SAAS,EAAE,IAAI;iBAChB;aACF,EACD,QAAQ,EAAE,YAAY,GACtB,CACmB,CACxB,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,54 @@
+/*
+ * 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 { LocalizationProvider, TimePicker as MuiTimePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+interface TimeFieldProps extends PropsWithIsTabledAttribute {
+  value: Dayjs | null;
+  displayPrompt: string;
+  entryFormat: string;
+  readOnly: boolean;
+  onTimeChange: (newValue: Dayjs | null) => unknown;
+}
+
+function TimeField(props: TimeFieldProps) {
+  const { value, displayPrompt, entryFormat, readOnly, isTabled, onTimeChange } = props;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <MuiTimePicker
+        format={entryFormat !== '' ? entryFormat : 'hh:mm a'}
+        value={value}
+        disabled={readOnly}
+        label={displayPrompt}
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+        slotProps={{
+          textField: {
+            fullWidth: true
+          }
+        }}
+        onChange={onTimeChange}
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default TimeField;

package/src/components/FormComponents/TimeItem/TimeItem.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 TimeField from './TimeField';
+import dayjs from 'dayjs';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+function TimeItem(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    // Get additional rendering extensions
+    const { displayPrompt, displayInstructions, readOnly, entryFormat } = useRenderingExtensions(qItem);
+    // Init input value
+    let timeString = null;
+    if ((qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer) && (qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer[0].valueTime)) {
+        timeString = qrItem.answer[0].valueTime;
+    }
+    const timeDayJs = timeString ? dayjs(timeString) : null;
+    // Event handlers
+    function handleTimeChange(newValue) {
+        const emptyQrItem = createEmptyQrItem(qItem);
+        if (newValue) {
+            onQrItemChange(Object.assign(Object.assign({}, emptyQrItem), { answer: [{ valueTime: newValue.format() }] }));
+        }
+        else {
+            onQrItemChange(emptyQrItem);
+        }
+    }
+    if (isRepeated) {
+        return (React.createElement(TimeField, { value: timeDayJs, displayPrompt: displayPrompt, entryFormat: entryFormat, readOnly: readOnly, onTimeChange: handleTimeChange, isTabled: isTabled }));
+    }
+    return (React.createElement(FullWidthFormComponentBox, null,
+        React.createElement(ItemFieldGrid, { qItem: qItem, displayInstructions: displayInstructions },
+            React.createElement(TimeField, { value: timeDayJs, displayPrompt: displayPrompt, entryFormat: entryFormat, readOnly: readOnly, onTimeChange: handleTimeChange, isTabled: isTabled }))));
+}
+export default TimeItem;
+//# sourceMappingURL=TimeItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeItem.js","sourceRoot":"","sources":["TimeItem.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,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,aAAa,MAAM,4BAA4B,CAAC;AAUvD,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;IACrC,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,EAAE,EAAE,CAAC,IAAG,CAAC;SAChF;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;QACxB,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/TimeItem/TimeItem.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 TimeField from './TimeField';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+
+interface TimeItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function TimeItem(props: TimeItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Init input value
+  let timeString: string | null = null;
+  if (qrItem?.answer && qrItem?.answer[0].valueTime) {
+    timeString = qrItem.answer[0].valueTime;
+  }
+  const timeDayJs = timeString ? dayjs(timeString) : null;
+
+  // Event handlers
+  function handleTimeChange(newValue: Dayjs | null) {
+    const emptyQrItem = createEmptyQrItem(qItem);
+    if (newValue) {
+      onQrItemChange({ ...emptyQrItem, answer: [{ valueTime: newValue.format() }] });
+    } else {
+      onQrItemChange(emptyQrItem);
+    }
+  }
+
+  if (isRepeated) {
+    return (
+      <TimeField
+        value={timeDayJs}
+        displayPrompt={displayPrompt}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        onTimeChange={handleTimeChange}
+        isTabled={isTabled}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <TimeField
+          value={timeDayJs}
+          displayPrompt={displayPrompt}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          onTimeChange={handleTimeChange}
+          isTabled={isTabled}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default TimeItem;

package/src/components/FormComponents/Typography.styles.js

@@ -0,0 +1,23 @@
+/*
+ * 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 { styled, Typography } from '@mui/material';
+export const QGroupHeadingTypography = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'isTabHeading'
+})(({ isTabHeading }) => ({
+    fontSize: isTabHeading ? 16 : 15
+}));
+//# sourceMappingURL=Typography.styles.js.map

package/src/components/FormComponents/Typography.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.styles.js","sourceRoot":"","sources":["Typography.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,EAAE;IACxD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc;CACrD,CAAC,CAA6B,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;CACjC,CAAC,CAAC,CAAC"}

package/src/components/FormComponents/Typography.styles.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { styled, Typography } from '@mui/material';
+
+export const QGroupHeadingTypography = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'isTabHeading'
+})<{ isTabHeading?: boolean }>(({ isTabHeading }) => ({
+  fontSize: isTabHeading ? 16 : 15
+}));

package/src/components/FormComponents/UrlItem/UrlField.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 { InputAdornment } from '@mui/material';
+import { StandardTextField } from '../Textfield.styles';
+function UrlField(props) {
+    const { linkId, input, feedback, displayPrompt, displayUnit, entryFormat, readOnly, isTabled, onInputChange } = props;
+    return (React.createElement(StandardTextField, { fullWidth: true, isTabled: isTabled, id: linkId, value: input, error: !!feedback, onChange: (event) => onInputChange(event.target.value), label: displayPrompt, placeholder: entryFormat, disabled: readOnly, size: "small", InputProps: { endAdornment: React.createElement(InputAdornment, { position: 'end' }, displayUnit) }, helperText: feedback, "data-test": "q-item-url-field" }));
+}
+export default UrlField;
+//# sourceMappingURL=UrlField.js.map

package/src/components/FormComponents/UrlItem/UrlField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlField.js","sourceRoot":"","sources":["UrlField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAaxD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,iBAAiB,IAChB,SAAS,QACT,QAAQ,EAAE,QAAQ,EAClB,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,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,EAAE,YAAY,EAAE,oBAAC,cAAc,IAAC,QAAQ,EAAE,KAAK,IAAG,WAAW,CAAkB,EAAE,EAC7F,UAAU,EAAE,QAAQ,eACV,kBAAkB,GAC5B,CACH,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,66 @@
+/*
+ * 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 { InputAdornment } from '@mui/material';
+import { StandardTextField } from '../Textfield.styles';
+
+interface UrlFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  input: string;
+  feedback: string;
+  displayPrompt: string;
+  displayUnit: string;
+  entryFormat: string;
+  readOnly: boolean;
+  onInputChange: (value: string) => void;
+}
+
+function UrlField(props: UrlFieldProps) {
+  const {
+    linkId,
+    input,
+    feedback,
+    displayPrompt,
+    displayUnit,
+    entryFormat,
+    readOnly,
+    isTabled,
+    onInputChange
+  } = props;
+
+  return (
+    <StandardTextField
+      fullWidth
+      isTabled={isTabled}
+      id={linkId}
+      value={input}
+      error={!!feedback}
+      onChange={(event) => onInputChange(event.target.value)}
+      label={displayPrompt}
+      placeholder={entryFormat}
+      disabled={readOnly}
+      size="small"
+      InputProps={{ endAdornment: <InputAdornment position={'end'}>{displayUnit}</InputAdornment> }}
+      helperText={feedback}
+      data-test="q-item-url-field"
+    />
+  );
+}
+
+export default UrlField;

package/src/components/FormComponents/UrlItem/UrlItem.js

@@ -0,0 +1,61 @@
+/*
+ * 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 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';
+function UrlItem(props) {
+    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 === null || qrItem === void 0 ? void 0 : qrItem.answer) && (qrItem === null || qrItem === void 0 ? void 0 : 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) {
+        setInput(newInput);
+        updateQrItemWithDebounce(newInput);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const updateQrItemWithDebounce = useCallback(debounce((input) => {
+        const emptyQrItem = createEmptyQrItem(qItem);
+        if (input !== '') {
+            onQrItemChange(Object.assign(Object.assign({}, 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 (React.createElement(UrlField, { linkId: qItem.linkId, input: input, feedback: feedback, displayPrompt: displayPrompt, displayUnit: displayUnit, entryFormat: entryFormat, readOnly: readOnly, onInputChange: handleChange, isTabled: isTabled }));
+    }
+    return (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-string-box" },
+        React.createElement(ItemFieldGrid, { qItem: qItem, displayInstructions: displayInstructions },
+            React.createElement(UrlField, { linkId: qItem.linkId, input: input, feedback: feedback, displayPrompt: displayPrompt, displayUnit: displayUnit, entryFormat: entryFormat, readOnly: readOnly, onInputChange: handleChange, isTabled: isTabled }))));
+}
+export default UrlItem;
+//# sourceMappingURL=UrlItem.js.map

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

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