@aehrc/smart-forms-renderer 0.8.1 → 0.9.0

package/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx

@@ -47,12 +47,12 @@ import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceAutocompleteItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx

@@ -27,7 +27,7 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
@@ -35,12 +35,12 @@ import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerOptionFiel
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceCheckboxAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 
@@ -50,7 +50,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     qrItem,
     orientation,
     isRepeated,
-    textShown = true,
+    showMinimalView = false,
     parentIsReadOnly,
     onQrItemChange
   } = props;
@@ -80,39 +80,39 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     }
   }
 
-  if (textShown) {
+  if (showMinimalView) {
     return (
-      <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
-        <Grid container columnSpacing={6}>
-          <Grid item xs={5}>
-            <LabelWrapper qItem={qItem} readOnly={readOnly} />
-          </Grid>
-          <Grid item xs={7}>
-            <ChoiceCheckboxAnswerValueSetFields
-              qItem={qItem}
-              answers={answers}
-              orientation={orientation}
-              readOnly={readOnly}
-              onCheckedChange={handleCheckedChange}
-            />
-            <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-          </Grid>
-        </Grid>
-      </FullWidthFormComponentBox>
+      <>
+        <ChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          onCheckedChange={handleCheckedChange}
+        />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+      </>
     );
   }
 
   return (
-    <>
-      <ChoiceCheckboxAnswerValueSetFields
-        qItem={qItem}
-        answers={answers}
-        orientation={orientation}
-        readOnly={readOnly}
-        onCheckedChange={handleCheckedChange}
-      />
-      <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-    </>
+    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
+        </Grid>
+        <Grid item xs={7}>
+          <ChoiceCheckboxAnswerValueSetFields
+            qItem={qItem}
+            answers={answers}
+            orientation={orientation}
+            readOnly={readOnly}
+            onCheckedChange={handleCheckedChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
   );
 }
 

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -28,7 +28,7 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
@@ -36,12 +36,12 @@ import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFi
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceCheckboxAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
   showText?: boolean;
 }
@@ -52,7 +52,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     qrItem,
     orientation,
     isRepeated,
-    textShown = true,
+    showMinimalView = false,
     parentIsReadOnly,
     onQrItemChange
   } = props;
@@ -84,41 +84,41 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     }
   }
 
-  if (textShown) {
+  if (showMinimalView) {
     return (
-      <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
-        <Grid container columnSpacing={6}>
-          <Grid item xs={5}>
-            <LabelWrapper qItem={qItem} readOnly={readOnly} />
-          </Grid>
-          <Grid item xs={7}>
-            <ChoiceCheckboxAnswerValueSetFields
-              codings={codings}
-              answers={answers}
-              orientation={orientation}
-              readOnly={readOnly}
-              serverError={serverError}
-              onCheckedChange={handleCheckedChange}
-            />
-            <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-          </Grid>
-        </Grid>
-      </FullWidthFormComponentBox>
+      <>
+        <ChoiceCheckboxAnswerValueSetFields
+          codings={codings}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          serverError={serverError}
+          onCheckedChange={handleCheckedChange}
+        />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+      </>
     );
   }
 
   return (
-    <>
-      <ChoiceCheckboxAnswerValueSetFields
-        codings={codings}
-        answers={answers}
-        orientation={orientation}
-        readOnly={readOnly}
-        serverError={serverError}
-        onCheckedChange={handleCheckedChange}
-      />
-      <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-    </>
+    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
+        </Grid>
+        <Grid item xs={7}>
+          <ChoiceCheckboxAnswerValueSetFields
+            codings={codings}
+            answers={answers}
+            orientation={orientation}
+            readOnly={readOnly}
+            serverError={serverError}
+            onCheckedChange={handleCheckedChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
   );
 }
 

package/src/components/FormComponents/ChoiceItems/ChoiceItemSwitcher.tsx

@@ -29,23 +29,23 @@ import ChoiceCheckboxAnswerValueSetItem from './ChoiceCheckboxAnswerValueSetItem
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
-import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 
 interface ChoiceItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
   const orientation = getChoiceOrientation(qItem);
@@ -84,7 +84,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qrItem={qrItem}
             orientation={orientation}
             isRepeated={qItem.repeats ?? false}
-            textShown={textShown}
+            showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />
@@ -96,7 +96,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
             qrItem={qrItem}
             isRepeated={qItem.repeats ?? false}
             orientation={orientation}
-            textShown={textShown}
+            showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={onQrItemChange}
           />

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionItem.tsx

@@ -34,11 +34,11 @@ import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceRadioAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -35,11 +35,11 @@ import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceRadioAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionItem.tsx

@@ -35,12 +35,12 @@ import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceSelectAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps) {

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -35,12 +35,12 @@ import ChoiceSelectAnswerValueSetFields from './ChoiceSelectAnswerValueSetFields
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface ChoiceSelectAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemProps) {

package/src/components/FormComponents/CustomDateItem/CustomDateItem.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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, { useState } from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useReadOnly from '../../../hooks/useReadOnly';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import {
+  parseFhirDateToDisplayDate,
+  parseInputDateToFhirDate,
+  validateInput
+} from './customDateTimePicker/utils/parseDates';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import useDateValidation from '../../../hooks/useDateValidation';
+import CustomDateField from './customDateTimePicker/CustomDateField';
+
+interface CustomDateItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+}
+
+function CustomDateItem(props: CustomDateItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayPrompt, displayInstructions, entryFormat } = useRenderingExtensions(qItem);
+
+  const qrDate = qrItem ?? createEmptyQrItem(qItem);
+
+  // Init input value
+  let valueDate: string = '';
+  if (qrDate.answer) {
+    if (qrDate.answer[0].valueDate) {
+      valueDate = qrDate.answer[0].valueDate;
+    } else if (qrDate.answer[0].valueDateTime) {
+      valueDate = qrDate.answer[0].valueDateTime;
+    }
+  }
+
+  const { displayDate, parseFail } = parseFhirDateToDisplayDate(valueDate);
+
+  const [input, setInput] = useState(displayDate);
+  const [focused, setFocused] = useState(false);
+
+  // Perform validation checks
+  const errorFeedback = useDateValidation(input, parseFail);
+
+  function handleSelectDate(selectedDate: string) {
+    setInput(selectedDate);
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueDate: parseInputDateToFhirDate(selectedDate) }]
+    });
+  }
+
+  function handleInputChange(newInput: string) {
+    setInput(newInput);
+
+    if (newInput === '') {
+      onQrItemChange(createEmptyQrItem(qItem));
+    }
+
+    if (!validateInput(newInput)) {
+      return;
+    }
+
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueDate: parseInputDateToFhirDate(newInput) }]
+    });
+  }
+
+  if (isRepeated) {
+    return (
+      <CustomDateField
+        linkId={qItem.linkId}
+        valueDate={displayDate}
+        input={input}
+        feedback={errorFeedback ?? ''}
+        isFocused={focused}
+        displayPrompt={displayPrompt}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        isTabled={isTabled}
+        setFocused={setFocused}
+        onInputChange={handleInputChange}
+        onSelectDate={handleSelectDate}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-date-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+        <CustomDateField
+          linkId={qItem.linkId}
+          valueDate={displayDate}
+          input={input}
+          feedback={errorFeedback ?? ''}
+          isFocused={focused}
+          displayPrompt={displayPrompt}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          setFocused={setFocused}
+          onInputChange={handleInputChange}
+          onSelectDate={handleSelectDate}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default CustomDateItem;

package/src/components/FormComponents/CustomDateItem/customDateTimePicker/CustomDateField.tsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Dayjs } from 'dayjs';
+import type { ChangeEvent, Dispatch, RefObject, SetStateAction } from 'react';
+import React, { useRef } from 'react';
+import type { PropsWithIsTabledAttribute } from '../../../../interfaces/renderProps.interface';
+import { StandardTextField } from '../../Textfield.styles';
+import DatePicker from './DatePicker';
+import Tooltip from '@mui/material/Tooltip';
+
+interface CustomDateFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  valueDate: string;
+  input: string;
+  feedback: string;
+  isFocused: boolean;
+  displayPrompt: string;
+  entryFormat: string;
+  readOnly: boolean;
+  setFocused: Dispatch<SetStateAction<boolean>>;
+  onInputChange: (newInput: string) => void;
+  onSelectDate: (newDateValue: string) => void;
+}
+
+function CustomDateField(props: CustomDateFieldProps) {
+  const {
+    linkId,
+    valueDate,
+    input,
+    feedback,
+    isFocused,
+    displayPrompt,
+    entryFormat,
+    readOnly,
+    isTabled,
+    setFocused,
+    onInputChange,
+    onSelectDate
+  } = props;
+
+  const anchorRef: RefObject<HTMLDivElement> = useRef(null);
+
+  return (
+    <Tooltip title={isTabled ? feedback : ''}>
+      <StandardTextField
+        id={linkId}
+        ref={anchorRef}
+        fullWidth
+        isTabled={isTabled}
+        value={input}
+        error={!!feedback}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onInputChange(e.target.value)}
+        label={displayPrompt}
+        placeholder={entryFormat !== '' ? entryFormat : 'DD/MM/YYYY'}
+        disabled={readOnly}
+        size="small"
+        focused={isFocused}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        InputProps={{
+          endAdornment: (
+            <>
+              <DatePicker
+                valueString={valueDate}
+                readOnly={readOnly}
+                anchorEl={anchorRef.current}
+                onSelectDate={(valueDayjs: Dayjs) => {
+                  onSelectDate(valueDayjs.format('DD/MM/YYYY'));
+                }}
+                onFocus={(focus) => setFocused(focus)}
+              />
+            </>
+          )
+        }}
+        helperText={isTabled ? '' : feedback}
+      />
+    </Tooltip>
+  );
+}
+
+export default CustomDateField;

package/src/components/FormComponents/CustomDateItem/customDateTimePicker/DatePicker.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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, { useState } from 'react';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import MuiDatePicker from './MuiDatePicker';
+// import { DatePicker as MuiDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import DatePickerButton from './DatePickerButton';
+
+interface DatePickerProps {
+  valueString: string;
+  readOnly: boolean;
+  anchorEl: HTMLElement | null;
+  onSelectDate: (newValueDayjs: Dayjs) => void;
+  onFocus: (focus: boolean) => void;
+}
+
+function DatePicker(props: DatePickerProps) {
+  const { valueString, readOnly, anchorEl, onSelectDate, onFocus } = props;
+
+  const [open, setOpen] = useState(false);
+
+  const valueDayJs = valueString ? dayjs(valueString, 'DD/MM/YYYY') : null;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <MuiDatePicker
+        value={valueDayJs ?? null}
+        disabled={readOnly}
+        slots={{ field: DatePickerButton }}
+        slotProps={{
+          field: {
+            onOpen: () => {
+              setOpen(!open);
+              onFocus(true);
+            },
+            readOnly: readOnly
+          } as any,
+          textField: {
+            size: 'small'
+          },
+          popper: {
+            anchorEl: () => anchorEl as HTMLElement
+          }
+        }}
+        open={open}
+        onClose={() => {
+          setOpen(false);
+          onFocus(false);
+        }}
+        onChange={(newValue) => {
+          if (!newValue) {
+            return;
+          }
+
+          onSelectDate(newValue);
+          onFocus(false);
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default DatePicker;