Merge pull request #70 from osstotalsoft/datetime-api-alignment

Datetime api alignment

src/components/inputs/DateTime/DateTime.test.tsx

@@ -83,7 +83,7 @@ describe('Date Picker Formats', () => {
 describe('Date Time buttons work', () => {
   it('clears the value', async () => {
     // arrange
-    render(<DateTime value={value} clearable={true} />)
+    render(<DateTime value={value} isClearable={true} />)
 
     // act
     await waitFor(() => fireEvent.click(screen.getByLabelText('Clear')))

src/components/inputs/DateTime/DateTime.tsx

@@ -48,7 +48,8 @@ const DateTime: React.FC<DateTimeProps> = ({
   onClose,
   value: origValue = null,
   onChange: origOnChange,
-  clearable,
+  isClearable,
+  required,
   disabled,
   error,
   helperText,
@@ -81,7 +82,7 @@ const DateTime: React.FC<DateTimeProps> = ({
     },
     [origOnChange]
   )
-  const isClearable = useMemo(() => Boolean(clearable) && Boolean(value), [clearable, value])
+  const internalIsClearable = useMemo(() => Boolean(isClearable) && Boolean(value), [isClearable, value])
   const handleClear = useCallback(() => {
     handleChange(null)
   }, [handleChange])
@@ -97,12 +98,13 @@ const DateTime: React.FC<DateTimeProps> = ({
           fullWidth
           {...inputProps}
           {...params}
+          required={required}
           error={error}
           helperText={helperText}
           InputProps={{
             endAdornment: (
               <DateTimeEndAdornment
-                isClearable={isClearable}
+                isClearable={internalIsClearable}
                 onClear={handleClear}
                 onOpen={handleOpen}
                 OpenPickerIcon={OpenPickerIcon}
@@ -113,7 +115,7 @@ const DateTime: React.FC<DateTimeProps> = ({
         />
       )
     },
-    [disabled, error, handleClear, handleOpen, helperText, inputProps, isClearable, mergedComponents.OpenPickerIcon]
+    [disabled, error, handleClear, handleOpen, helperText, inputProps, required, internalIsClearable, mergedComponents.OpenPickerIcon]
   )
 
   const localeUsed = useMemo(() => localeMap[format] ?? adapterLocale ?? localeMap.ro, [format, adapterLocale])
@@ -205,7 +207,7 @@ DateTime.propTypes = {
   /**
    * Dedicated button for clearing the value
    */
-  clearable: PropTypes.bool,
+  isClearable: PropTypes.bool,
   /**
    * @default false
    * Control the popup or dialog open state.

src/components/inputs/DateTime/types.ts

@@ -29,18 +29,19 @@ export type CustomSlotsComponent = {
 }
 
 export type DateTimeProps = (
-  | Omit<DateTimePickerProps<T, T>, 'onChange' | 'renderInput'>
-  | Omit<DatePickerProps<T, T>, 'onChange' | 'renderInput'>
-  | Omit<TimePickerProps<T, T>, 'onChange' | 'renderInput'>
+  | Omit<DateTimePickerProps<T, T>, 'onChange' | 'renderInput' | 'value'>
+  | Omit<DatePickerProps<T, T>, 'onChange' | 'renderInput' | 'value'>
+  | Omit<TimePickerProps<T, T>, 'onChange' | 'renderInput' | 'value'>
 ) &
   Omit<LocalizationProviderProps, 'dateAdapter'> & {
+    value?: T
     /**
      * Callback fired when the value (the selected date) changes @DateIOType.
      * @template TValue
      * @param {T} value The new parsed value.
      * @param {string} keyboardInputValue The current value of the keyboard input.
      */
-    onChange?: (value: T, keyboardInputValue?: string) => void
+    onChange?: (value?: T, keyboardInputValue?: string) => void
     /**
      * The `renderInput` prop allows you to customize the rendered input.
      * The `props` argument of this render prop contains props of [TextField](https://mui.com/material-ui/api/text-field/#props) that you need to forward.
@@ -65,11 +66,16 @@ export type DateTimeProps = (
     /**
      * The props that will be passed down to the TextField component that will act as the `renderInput` for the picker.
      */
-    inputProps?: TextFieldProps
+    inputProps?: Omit<TextFieldProps, 'required'>
     /**
      * Choose if you want a dedicated button to clear the value from the picker
      */
-    clearable?: boolean
+    isClearable?: boolean
+    /**
+     * If `true`, the label is displayed as required and the `input` element is required.
+     * @default false
+     */
+    required?: boolean
     /**
      * This property will be passed to the renderInput
      * If `true`, the label is displayed in an error state.

src/stories/inputs/DateTime/ClearablePreview.tsx

@@ -9,13 +9,13 @@ const ClearablePreview = () => {
   return (
     <Grid container spacing={4} justifyItems={'flex-start'}>
       <Grid item xs={4}>
-        <DateTime showPicker="date" label="Date Picker" mask="__.__.____" clearable={true} />
+        <DateTime showPicker="date" label="Date Picker" mask="__.__.____" isClearable={true} />
       </Grid>
       <Grid item xs={4}>
-        <DateTime showPicker="dateTime" label="Date Time Picker" mask="__.__.____ __:__" clearable={true} />
+        <DateTime showPicker="dateTime" label="Date Time Picker" mask="__.__.____ __:__" isClearable={true} />
       </Grid>
       <Grid item xs={4}>
-        <DateTime showPicker="time" label="Time Picker" mask="__:__" clearable={true} />
+        <DateTime showPicker="time" label="Time Picker" mask="__:__" isClearable={true} />
       </Grid>
     </Grid>
   )

src/stories/inputs/DateTime/FormatPreview.tsx

@@ -3,7 +3,7 @@
 
 import React, { useCallback, useState } from 'react'
 import { Grid, ToggleButton, ToggleButtonGroup } from '@mui/material'
-import { DateTime } from 'components'
+import { DateTime, DateTimeProps } from 'components'
 
 const maskMap = {
   fr: { date: '__/__/____', dateTime: '__/__/____ __:__', time: '__:__' },
@@ -22,7 +22,8 @@ type LocaleMapType = {
 }
 
 const FormatPreview = () => {
-  const [format, setFormat] = useState('en-US')
+  const [format, setFormat] = useState<DateTimeProps['format']>('en-US')
+
   const handleClick = useCallback((e: any) => {
     setFormat(e.target.value)
   }, [])