refactor: refactor controlled components

packages/lsd-react/src/components/Calendar/Calendar.tsx

@@ -11,13 +11,13 @@ import { Month } from './Month'
 import { useClickAway } from 'react-use'
 
 export type CalendarProps = Omit<
-  React.HTMLAttributes<HTMLUListElement>,
+  React.HTMLAttributes<HTMLDivElement>,
   'label'
 > & {
   open?: boolean
   disabled?: boolean
   value?: string
-  handleDateFieldChange: (data: Date) => void
+  onChange: (data: Date) => void
   handleRef: React.RefObject<HTMLElement>
   size?: 'large' | 'medium'
   onClose?: () => void
@@ -28,16 +28,19 @@ export const Calendar: React.FC<CalendarProps> & {
 } = ({
   open,
   handleRef,
-  value = null,
+  value: _value,
   size = 'large',
   disabled = false,
-  handleDateFieldChange,
+  onChange,
   onClose,
   children,
   ...props
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   const [style, setStyle] = useState<React.CSSProperties>({})
+  const [value, setValue] = useState<Date | null>(
+    _value ? new Date(_value) : null,
+  )
 
   useClickAway(ref, (event) => {
     if (!open || event.composedPath().includes(handleRef.current!)) return
@@ -46,10 +49,23 @@ export const Calendar: React.FC<CalendarProps> & {
   })
 
   const handleDateChange = (data: OnDatesChangeProps) => {
-    handleDateFieldChange(data.startDate ?? new Date())
+    if (typeof _value !== 'undefined') {
-    onDateFocus(data.startDate ?? new Date())
+      if (typeof onChange !== 'undefined') {
+        onChange(data.startDate ?? new Date())
+      }
+    } else {
+      setValue(data.startDate)
+    }
   }
 
+  useEffect(() => {
+    onDateFocus(_value ? new Date(_value) : new Date())
+  }, [_value])
+
+  useEffect(() => {
+    onDateFocus(value ? new Date(value) : new Date())
+  }, [value])
+
   const {
     activeMonths,
     isDateSelected,

packages/lsd-react/src/components/DatePicker/DatePicker.tsx

@@ -27,18 +27,20 @@ export type DatePickerProps = Omit<
 
 export const DatePicker: React.FC<DatePickerProps> & {
   classes: typeof datePickerClasses
-} = ({ value, onChange, withCalendar = true, ...props }) => {
+} = ({ value: _value, onChange, withCalendar = true, ...props }) => {
   const ref = useRef<HTMLDivElement>(null)
   const [openCalendar, setOpenCalendar] = useState(false)
-  const [date, setDate] = useState<string>(value || '')
+  const [date, setDate] = useState<string>(_value || '')
 
   const handleDateFieldChange = (date: any) => {
     const offset = new Date(date).getTimezoneOffset()
     const formattedDate = new Date(date.getTime() - offset * 60 * 1000)
     const value = formattedDate.toISOString().split('T')[0]
 
-    if (typeof onChange === 'function') {
+    if (typeof _value !== 'undefined') {
-      onChange(value)
+      if (typeof onChange !== 'undefined') {
+        onChange(value)
+      }
     } else {
       setDate(value)
     }
@@ -64,7 +66,7 @@ export const DatePicker: React.FC<DatePickerProps> & {
         <Portal id="calendar">
           {withCalendar && (
             <Calendar
-              handleDateFieldChange={handleDateFieldChange}
+              onChange={handleDateFieldChange}
               open={openCalendar}
               onClose={() => setOpenCalendar(false)}
               handleRef={ref}