feat: Add support for 'disabled' prop to the DatePicker component

Author: jchunky

src/DatePicker/DatePicker.story.tsx

@@ -47,6 +47,17 @@ WithCustomDateFormat.story = {
   name: "with custom date format",
 };
 
+export const WithDisabled = () => (
+  <DatePicker
+    selected={select("selected", selectedDateExamples, selectedDateExamples[0], "selected")}
+    disabled={true}
+  />
+);
+
+WithDisabled.story = {
+  name: "with disabled",
+};
+
 export const WithDifferentSizes = () => (
   <Flex gap="x2" alignItems="flex-start">
     <DatePicker

src/DatePicker/DatePicker.tsx

@@ -33,6 +33,7 @@ interface DatePickerProps extends Omit<FieldProps, OmittedFieldProps> {
   highlightDates?: ReactDatePickerProps["highlightDates"];
   disableFlipping?: boolean;
   selected?: Date | null;
+  disabled?: boolean;
 }
 
 const DEFAULT_DATE_FORMAT = "yyyy-MMM-dd";
@@ -56,6 +57,7 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
       onBlur,
       onFocus,
       selected,
+      disabled,
       ...props
     },
     datePickerRef
@@ -128,6 +130,7 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
 
     const customInput = (
       <DatePickerInput
+        disabled={disabled}
         size={componentSize}
         inputProps={customInputProps}
         dateFormat={dateFormat}
@@ -147,6 +150,7 @@ const DatePicker = forwardRef<unknown, DatePickerProps>(
           {({ locale }) => (
             <ReactDatePicker
               selected={selectedDate}
+              disabled={disabled}
               openToDate={selectedDate}
               dateFormat={dateFormat}
               onChange={handleSelectedDateChange}

src/DatePicker/DatePickerInput.tsx

@@ -20,6 +20,7 @@ type DatePickerInputProps = Omit<React.ComponentPropsWithRef<"input">, "size"> &
 const DatePickerInput = forwardRef<HTMLInputElement, DatePickerInputProps>(
   (
     {
+      disabled,
       onChange,
       onClick,
       onBlur,
@@ -37,6 +38,7 @@ const DatePickerInput = forwardRef<HTMLInputElement, DatePickerInputProps>(
   ) => {
     const { t } = useTranslation();
     const { placeholder, ...inputFieldProps } = inputProps;
+    inputFieldProps.disabled = disabled;
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       onInputChange(event);
@@ -62,6 +64,7 @@ const DatePickerInput = forwardRef<HTMLInputElement, DatePickerInputProps>(
 
     return (
       <InputField
+        disabled={disabled}
         onBlur={onBlur}
         onFocus={onFocus}
         ref={ref}