From c2e56d6f2bf86c2207401bead41767d2bdc77711 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Wed, 22 May 2024 16:41:36 +0300
Subject: [PATCH 01/10] DateInput component

---
 src/assets/icons/calendar.svg          |   5 ++
 src/form/Calendar/Calendar.tsx         |  39 ++++++---
 src/form/DateInput/DateInput.story.tsx |  32 +++++++
 src/form/DateInput/DateInput.tsx       | 117 +++++++++++++++++++++++++
 src/form/Input/Input.tsx               |   3 +-
 src/form/Input/InputTheme.ts           |   2 +-
 6 files changed, 182 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/icons/calendar.svg
 create mode 100644 src/form/DateInput/DateInput.story.tsx
 create mode 100644 src/form/DateInput/DateInput.tsx

diff --git a/src/assets/icons/calendar.svg b/src/assets/icons/calendar.svg
new file mode 100644
index 00000000..0d784657
--- /dev/null
+++ b/src/assets/icons/calendar.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="calendar">
+<path id="Vector" d="M12.6667 2.66671H12V1.33337H10.6667V2.66671H5.33333V1.33337H4V2.66671H3.33333C2.59333 2.66671 2.00667 3.26671 2.00667 4.00004L2 13.3334C2 14.0667 2.59333 14.6667 3.33333 14.6667H12.6667C13.4 14.6667 14 14.0667 14 13.3334V4.00004C14 3.26671 13.4 2.66671 12.6667 2.66671ZM12.6667 13.3334H3.33333V6.66671H12.6667V13.3334ZM12.6667 5.33337H3.33333V4.00004H12.6667V5.33337ZM6 9.33337H4.66667V8.00004H6V9.33337ZM8.66667 9.33337H7.33333V8.00004H8.66667V9.33337ZM11.3333 9.33337H10V8.00004H11.3333V9.33337ZM6 12H4.66667V10.6667H6V12ZM8.66667 12H7.33333V10.6667H8.66667V12ZM11.3333 12H10V10.6667H11.3333V12Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
index af0f5236..1f929a6d 100644
--- a/src/form/Calendar/Calendar.tsx
+++ b/src/form/Calendar/Calendar.tsx
@@ -27,7 +27,7 @@ import { Divider } from '@/layout/Divider';
 
 export type CalendarViewType = 'days' | 'months' | 'years';
 
-export interface CalendarProps {
+export type CalendarProps = {
   /**
    * The selected date(s) for the calendar.
    */
@@ -54,11 +54,6 @@ export interface CalendarProps {
    */
   disabled?: boolean;
 
-  /**
-   * Whether the calendar is a range picker.
-   */
-  isRange?: boolean;
-
   /**
    * The text or icon to use for next.
    */
@@ -79,11 +74,6 @@ export interface CalendarProps {
    */
   animated?: boolean;
 
-  /**
-   * A callback function that is called when the selected date(s) change.
-   */
-  onChange?: (value: Date | [Date, Date]) => void;
-
   /**
    * A callback function that is called when the calendar view changes.
    */
@@ -93,7 +83,30 @@ export interface CalendarProps {
    * Theme for the Calendar.
    */
   theme?: CalendarTheme;
-}
+} & (
+  | {
+      /**
+       * Whether the calendar is a range picker.
+       */
+      isRange?: true;
+
+      /**
+       * A callback function that is called when the selected date(s) change.
+       */
+      onChange?: (value: [Date, Date]) => void;
+    }
+  | {
+      /**
+       * Whether the calendar is a range picker.
+       */
+      isRange?: false;
+
+      /**
+       * A callback function that is called when the selected date(s) change.
+       */
+      onChange?: (value: Date) => void;
+    }
+);
 
 export const Calendar: FC<CalendarProps> = ({
   min,
@@ -167,7 +180,7 @@ export const Calendar: FC<CalendarProps> = ({
 
   const dateChangeHandler = useCallback(
     (date: Date) => {
-      if (!isRange) {
+      if (isRange === false || isRange === undefined) {
         onChange?.(date);
         setMonthValue(getMonth(date));
         setYearValue(getYear(date));
diff --git a/src/form/DateInput/DateInput.story.tsx b/src/form/DateInput/DateInput.story.tsx
new file mode 100644
index 00000000..5ff51f7d
--- /dev/null
+++ b/src/form/DateInput/DateInput.story.tsx
@@ -0,0 +1,32 @@
+import { DateFormat } from '@/data';
+import { Stack } from '@/layout';
+import { useState } from 'react';
+import { DateInput } from './DateInput';
+
+export default {
+  title: 'Components/Form/Date Input',
+  component: DateInput
+};
+
+export const Simple = () => {
+  const [date, setDate] = useState<Date>(new Date());
+
+  return (
+    <Stack direction="column">
+      <DateFormat date={date} />
+      <DateInput value={date} onChange={setDate} />
+    </Stack>
+  );
+};
+
+export const Error = () => {
+  const [date, setDate] = useState<Date>(new Date());
+
+  return <DateInput error value={date} onChange={setDate} />;
+};
+
+export const Disabled = () => {
+  const [date, setDate] = useState<Date>(new Date());
+
+  return <DateInput disabled value={date} onChange={setDate} />;
+};
diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
new file mode 100644
index 00000000..64d5e186
--- /dev/null
+++ b/src/form/DateInput/DateInput.tsx
@@ -0,0 +1,117 @@
+import React, {
+  ChangeEvent,
+  FC,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { format as formatDate, isValid, parse } from 'date-fns';
+
+import { IconButton } from '@/elements';
+import { Menu } from '@/layers';
+import { Card } from '@/layout';
+import { Calendar, Input, InputProps, InputRef } from '@/form';
+import { Placement } from '@/utils';
+
+import CalendarIcon from '@/assets/icons/calendar.svg?react';
+
+export interface DateInputProps extends Omit<InputProps, 'value' | 'onChange'> {
+  /**
+   * The current date value.
+   * @type {Date}
+   */
+  value: Date;
+
+  /**
+   * The format in which the date should be displayed.
+   * @type {string}
+   */
+  format?: string;
+
+  /**
+   * Calendar placement type.
+   */
+  placement?: Placement;
+
+  /**
+   * Callback function to handle date changes.
+   * @param {Date} value - The new date value.
+   */
+  onChange: (value: Date) => void;
+}
+export const DateInput: FC<DateInputProps> = ({
+  disabled,
+  value,
+  format = 'MM/dd/yyyy',
+  placement = 'bottom-start',
+  onChange,
+  ...rest
+}) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const ref = useRef<InputRef>(null);
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const changeHandler = useCallback(
+    (value: Date) => {
+      setOpen(false);
+      onChange(value);
+    },
+    [onChange]
+  );
+
+  const inputChangeHandler = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const dateStr = event.target.value;
+
+      setInputValue(dateStr);
+
+      const date = parse(dateStr, format, new Date());
+
+      if (isValid(date) && formatDate(date, format) === dateStr) {
+        onChange(date);
+      }
+    },
+    [format, onChange]
+  );
+
+  useEffect(() => {
+    if (value) {
+      setInputValue(formatDate(value, format));
+    }
+  }, [format, value]);
+
+  return (
+    <>
+      <Input
+        ref={ref}
+        disabled={disabled}
+        endAdornment={
+          <IconButton
+            disabled={disabled}
+            variant="text"
+            onClick={() => setOpen(true)}
+          >
+            <CalendarIcon />
+          </IconButton>
+        }
+        placeholder={format.toUpperCase()}
+        {...rest}
+        value={inputValue}
+        onChange={inputChangeHandler}
+      />
+      <Menu
+        open={open}
+        onClose={() => setOpen(false)}
+        reference={ref?.current?.containerRef}
+        placement={placement}
+      >
+        {() => (
+          <Card>
+            <Calendar value={value} showDayOfWeek onChange={changeHandler} />
+          </Card>
+        )}
+      </Menu>
+    </>
+  );
+};
diff --git a/src/form/Input/Input.tsx b/src/form/Input/Input.tsx
index 830fce19..917f34a1 100644
--- a/src/form/Input/Input.tsx
+++ b/src/form/Input/Input.tsx
@@ -1,5 +1,4 @@
 import React, {
-  FC,
   forwardRef,
   RefObject,
   useImperativeHandle,
@@ -100,7 +99,7 @@ export interface InputRef {
   select?: () => void;
 }
 
-export const Input: FC<InputProps & InputRef> = forwardRef(
+export const Input = forwardRef<InputRef, InputProps>(
   (
     {
       className,
diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts
index c3c6880c..2032e599 100644
--- a/src/form/Input/InputTheme.ts
+++ b/src/form/Input/InputTheme.ts
@@ -24,7 +24,7 @@ const baseTheme: InputTheme = {
   input:
     'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-none px-0.5 disabled:cursor-not-allowed disabled:text-disabled',
   inline: 'bg-transparent border-0 outline-none',
-  disabled: '',
+  disabled: 'text-waterloo',
   fullWidth: 'w-full',
   error: 'border-error',
   sizes: {

From 76504e56928e992d972247f1c83b225c50393967 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Thu, 23 May 2024 12:45:59 +0300
Subject: [PATCH 02/10] Fix type

---
 src/form/Calendar/Calendar.tsx      | 3 ++-
 src/form/Calendar/CalendarRange.tsx | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
index 1f929a6d..26721734 100644
--- a/src/form/Calendar/Calendar.tsx
+++ b/src/form/Calendar/Calendar.tsx
@@ -180,7 +180,8 @@ export const Calendar: FC<CalendarProps> = ({
 
   const dateChangeHandler = useCallback(
     (date: Date) => {
-      if (isRange === false || isRange === undefined) {
+      if (!isRange) {
+        // @ts-ignore
         onChange?.(date);
         setMonthValue(getMonth(date));
         setYearValue(getYear(date));
diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx
index e6f1a7c5..f4a0d71d 100644
--- a/src/form/Calendar/CalendarRange.tsx
+++ b/src/form/Calendar/CalendarRange.tsx
@@ -52,6 +52,11 @@ export interface CalendarRangeProps
    * Theme for the CalendarRange.
    */
   theme?: CalendarRangeTheme;
+
+  /**
+   * A callback function that is called when the selected date(s) change.
+   */
+  onChange?: (value: [Date, Date]) => void;
 }
 
 export const CalendarRange: FC<CalendarRangeProps> = ({

From a1a997968e79108263c8a249e4685226fbf4bf6b Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 14:36:18 +0300
Subject: [PATCH 03/10] Extend DateInput with isRange

---
 package-lock.json                      |  4 +-
 src/form/Calendar/Calendar.tsx         | 34 +++------
 src/form/DateInput/DateInput.story.tsx | 21 +++++-
 src/form/DateInput/DateInput.tsx       | 95 ++++++++++++++++++--------
 4 files changed, 100 insertions(+), 54 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c1a7f31f..5673ccac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reablocks",
-  "version": "7.7.3",
+  "version": "7.7.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reablocks",
-      "version": "7.7.3",
+      "version": "7.7.4",
       "license": "Apache-2.0",
       "dependencies": {
         "@marko19907/string-to-color": "^1.0.0",
diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
index 26721734..282b292b 100644
--- a/src/form/Calendar/Calendar.tsx
+++ b/src/form/Calendar/Calendar.tsx
@@ -54,6 +54,11 @@ export type CalendarProps = {
    */
   disabled?: boolean;
 
+  /**
+   * Whether the calendar is a range picker.
+   */
+  isRange?: boolean;
+
   /**
    * The text or icon to use for next.
    */
@@ -83,30 +88,12 @@ export type CalendarProps = {
    * Theme for the Calendar.
    */
   theme?: CalendarTheme;
-} & (
-  | {
-      /**
-       * Whether the calendar is a range picker.
-       */
-      isRange?: true;
-
-      /**
-       * A callback function that is called when the selected date(s) change.
-       */
-      onChange?: (value: [Date, Date]) => void;
-    }
-  | {
-      /**
-       * Whether the calendar is a range picker.
-       */
-      isRange?: false;
 
-      /**
-       * A callback function that is called when the selected date(s) change.
-       */
-      onChange?: (value: Date) => void;
-    }
-);
+  /**
+   * A callback function that is called when the selected date(s) change.
+   */
+  onChange?: (value: Date | [Date, Date]) => void;
+};
 
 export const Calendar: FC<CalendarProps> = ({
   min,
@@ -181,7 +168,6 @@ export const Calendar: FC<CalendarProps> = ({
   const dateChangeHandler = useCallback(
     (date: Date) => {
       if (!isRange) {
-        // @ts-ignore
         onChange?.(date);
         setMonthValue(getMonth(date));
         setYearValue(getYear(date));
diff --git a/src/form/DateInput/DateInput.story.tsx b/src/form/DateInput/DateInput.story.tsx
index 5ff51f7d..c4f3f618 100644
--- a/src/form/DateInput/DateInput.story.tsx
+++ b/src/form/DateInput/DateInput.story.tsx
@@ -13,7 +13,7 @@ export const Simple = () => {
 
   return (
     <Stack direction="column">
-      <DateFormat date={date} />
+      <DateFormat date={date} format="MM/dd/yyyy" />
       <DateInput value={date} onChange={setDate} />
     </Stack>
   );
@@ -30,3 +30,22 @@ export const Disabled = () => {
 
   return <DateInput disabled value={date} onChange={setDate} />;
 };
+
+export const Range = () => {
+  const [date, setDate] = useState<[Date, Date]>([new Date(), new Date()]);
+
+  return (
+    <Stack className="w-[300px]" direction="column">
+      <Stack>
+        <DateFormat date={date[0]} format="MM/dd/yyyy" /> -{' '}
+        <DateFormat date={date[1]} format="MM/dd/yyyy" />
+      </Stack>
+      <DateInput
+        fullWidth
+        isRange
+        value={date}
+        onChange={(value: [Date, Date]) => setDate(value)}
+      />
+    </Stack>
+  );
+};
diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
index 64d5e186..fa2fa49d 100644
--- a/src/form/DateInput/DateInput.tsx
+++ b/src/form/DateInput/DateInput.tsx
@@ -11,18 +11,12 @@ import { format as formatDate, isValid, parse } from 'date-fns';
 import { IconButton } from '@/elements';
 import { Menu } from '@/layers';
 import { Card } from '@/layout';
-import { Calendar, Input, InputProps, InputRef } from '@/form';
 import { Placement } from '@/utils';
+import { Calendar, Input, InputProps, InputRef } from '@/form';
 
 import CalendarIcon from '@/assets/icons/calendar.svg?react';
 
-export interface DateInputProps extends Omit<InputProps, 'value' | 'onChange'> {
-  /**
-   * The current date value.
-   * @type {Date}
-   */
-  value: Date;
-
+export type DateInputProps = Omit<InputProps, 'value' | 'onChange'> & {
   /**
    * The format in which the date should be displayed.
    * @type {string}
@@ -33,18 +27,24 @@ export interface DateInputProps extends Omit<InputProps, 'value' | 'onChange'> {
    * Calendar placement type.
    */
   placement?: Placement;
-
-  /**
-   * Callback function to handle date changes.
-   * @param {Date} value - The new date value.
-   */
-  onChange: (value: Date) => void;
-}
+} & (
+    | {
+        isRange?: true;
+        value: [Date, Date];
+        onChange: (value: [Date, Date]) => void;
+      }
+    | {
+        isRange?: false;
+        value: Date;
+        onChange: (value: Date) => void;
+      }
+  );
 export const DateInput: FC<DateInputProps> = ({
   disabled,
   value,
   format = 'MM/dd/yyyy',
   placement = 'bottom-start',
+  isRange,
   onChange,
   ...rest
 }) => {
@@ -53,11 +53,20 @@ export const DateInput: FC<DateInputProps> = ({
   const [inputValue, setInputValue] = useState<string>('');
 
   const changeHandler = useCallback(
-    (value: Date) => {
-      setOpen(false);
-      onChange(value);
+    (value: Date | [Date, Date]) => {
+      if (isRange) {
+        onChange(value as [Date, Date]);
+
+        if (value[0] && value[1]) {
+          setOpen(false);
+        }
+      } else {
+        setOpen(false);
+        // @ts-expect-error because isRange optional
+        onChange(value);
+      }
     },
-    [onChange]
+    [isRange, onChange]
   );
 
   const inputChangeHandler = useCallback(
@@ -66,20 +75,43 @@ export const DateInput: FC<DateInputProps> = ({
 
       setInputValue(dateStr);
 
-      const date = parse(dateStr, format, new Date());
+      if (isRange) {
+        const [startStr, endStr] = dateStr.split('-');
+        const startDate = parse(startStr, format, new Date());
+        const endDate = parse(endStr, format, new Date());
 
-      if (isValid(date) && formatDate(date, format) === dateStr) {
-        onChange(date);
+        if (
+          isValid(startDate) &&
+          isValid(endDate) &&
+          formatDate(startDate, format) === startStr &&
+          formatDate(endDate, format) === endStr
+        ) {
+          onChange?.([startDate, endDate]);
+        }
+      } else {
+        const date = parse(dateStr, format, new Date());
+
+        if (isValid(date) && formatDate(date, format) === dateStr) {
+          // @ts-expect-error because isRange optional
+          onChange?.(date);
+        }
       }
     },
-    [format, onChange]
+    [format, isRange, onChange]
   );
 
   useEffect(() => {
     if (value) {
-      setInputValue(formatDate(value, format));
+      if (isRange) {
+        const [start, end] = value;
+        setInputValue(
+          `${start ? formatDate(start, format) : ''}-${end ? formatDate(end, format) : ''}`
+        );
+      } else if (!isRange) {
+        setInputValue(formatDate(value as Date, format));
+      }
     }
-  }, [format, value]);
+  }, [format, isRange, value]);
 
   return (
     <>
@@ -95,7 +127,11 @@ export const DateInput: FC<DateInputProps> = ({
             <CalendarIcon />
           </IconButton>
         }
-        placeholder={format.toUpperCase()}
+        placeholder={
+          isRange
+            ? `${format.toUpperCase()} - ${format.toUpperCase()}`
+            : format.toUpperCase()
+        }
         {...rest}
         value={inputValue}
         onChange={inputChangeHandler}
@@ -108,7 +144,12 @@ export const DateInput: FC<DateInputProps> = ({
       >
         {() => (
           <Card>
-            <Calendar value={value} showDayOfWeek onChange={changeHandler} />
+            <Calendar
+              value={value}
+              isRange={isRange}
+              showDayOfWeek
+              onChange={changeHandler}
+            />
           </Card>
         )}
       </Menu>

From 42da095a6580b409cabdaaf64f7043643e43a3a1 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 14:52:46 +0300
Subject: [PATCH 04/10] Rollback some changes

---
 src/form/Calendar/Calendar.tsx      | 14 +++++++-------
 src/form/Calendar/CalendarRange.tsx |  5 -----
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
index 282b292b..af0f5236 100644
--- a/src/form/Calendar/Calendar.tsx
+++ b/src/form/Calendar/Calendar.tsx
@@ -27,7 +27,7 @@ import { Divider } from '@/layout/Divider';
 
 export type CalendarViewType = 'days' | 'months' | 'years';
 
-export type CalendarProps = {
+export interface CalendarProps {
   /**
    * The selected date(s) for the calendar.
    */
@@ -79,6 +79,11 @@ export type CalendarProps = {
    */
   animated?: boolean;
 
+  /**
+   * A callback function that is called when the selected date(s) change.
+   */
+  onChange?: (value: Date | [Date, Date]) => void;
+
   /**
    * A callback function that is called when the calendar view changes.
    */
@@ -88,12 +93,7 @@ export type CalendarProps = {
    * Theme for the Calendar.
    */
   theme?: CalendarTheme;
-
-  /**
-   * A callback function that is called when the selected date(s) change.
-   */
-  onChange?: (value: Date | [Date, Date]) => void;
-};
+}
 
 export const Calendar: FC<CalendarProps> = ({
   min,
diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx
index f4a0d71d..e6f1a7c5 100644
--- a/src/form/Calendar/CalendarRange.tsx
+++ b/src/form/Calendar/CalendarRange.tsx
@@ -52,11 +52,6 @@ export interface CalendarRangeProps
    * Theme for the CalendarRange.
    */
   theme?: CalendarRangeTheme;
-
-  /**
-   * A callback function that is called when the selected date(s) change.
-   */
-  onChange?: (value: [Date, Date]) => void;
 }
 
 export const CalendarRange: FC<CalendarRangeProps> = ({

From cd21462e0f3391828a516d03279e4b0e2285774d Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 14:56:27 +0300
Subject: [PATCH 05/10] Update package-lock.json

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aa3e074f..3ea24805 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reablocks",
-  "version": "7.8.0",
+  "version": "7.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reablocks",
-      "version": "7.8.0",
+      "version": "7.8.1",
       "license": "Apache-2.0",
       "dependencies": {
         "@marko19907/string-to-color": "^1.0.0",

From 4ad796b7cfa63433dde1433f8757f5c572d26163 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 15:02:24 +0300
Subject: [PATCH 06/10] Reduce padding

---
 src/form/DateInput/DateInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
index fa2fa49d..f73052a0 100644
--- a/src/form/DateInput/DateInput.tsx
+++ b/src/form/DateInput/DateInput.tsx
@@ -120,6 +120,7 @@ export const DateInput: FC<DateInputProps> = ({
         disabled={disabled}
         endAdornment={
           <IconButton
+            className="px-0"
             disabled={disabled}
             variant="text"
             onClick={() => setOpen(true)}

From fa45e387c76f01cac334db0ae06acc8457ef17d3 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 15:27:28 +0300
Subject: [PATCH 07/10] Improve disable state

---
 src/form/DateInput/DateInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
index f73052a0..cc1758c0 100644
--- a/src/form/DateInput/DateInput.tsx
+++ b/src/form/DateInput/DateInput.tsx
@@ -121,7 +121,6 @@ export const DateInput: FC<DateInputProps> = ({
         endAdornment={
           <IconButton
             className="px-0"
-            disabled={disabled}
             variant="text"
             onClick={() => setOpen(true)}
           >
@@ -146,6 +145,7 @@ export const DateInput: FC<DateInputProps> = ({
         {() => (
           <Card>
             <Calendar
+              disabled={disabled}
               value={value}
               isRange={isRange}
               showDayOfWeek

From 9fb98602079f1ce8326ab8ab41a007c5acec88bb Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 15:35:50 +0300
Subject: [PATCH 08/10] Add ability to pass custom icon

---
 src/form/DateInput/DateInput.story.tsx | 25 +++++++++++++++++++++++++
 src/form/DateInput/DateInput.tsx       |  9 ++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/form/DateInput/DateInput.story.tsx b/src/form/DateInput/DateInput.story.tsx
index c4f3f618..e257df29 100644
--- a/src/form/DateInput/DateInput.story.tsx
+++ b/src/form/DateInput/DateInput.story.tsx
@@ -31,6 +31,31 @@ export const Disabled = () => {
   return <DateInput disabled value={date} onChange={setDate} />;
 };
 
+export const CustomIcon = () => {
+  const [date, setDate] = useState<Date>(new Date());
+
+  return (
+    <DateInput
+      value={date}
+      onChange={setDate}
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            d="M11.75 5.75C12.5785 5.75 13.25 6.4215 13.25 7.25V11.5C13.25 12.3272 12.5772 13 11.75 13H4.25C3.42275 13 2.75 12.3272 2.75 11.5V7.25C2.75 6.4215 3.4215 5.75 4.25 5.75H11.75ZM5.5 11.25V10.75C5.5 10.612 5.388 10.5 5.25 10.5H4.75C4.612 10.5 4.5 10.612 4.5 10.75V11.25C4.5 11.388 4.612 11.5 4.75 11.5H5.25C5.388 11.5 5.5 11.388 5.5 11.25ZM5.5 9.5V9C5.5 8.862 5.388 8.75 5.25 8.75H4.75C4.612 8.75 4.5 8.862 4.5 9V9.5C4.5 9.638 4.612 9.75 4.75 9.75H5.25C5.388 9.75 5.5 9.638 5.5 9.5ZM7.5 11.25V10.75C7.5 10.612 7.388 10.5 7.25 10.5H6.75C6.612 10.5 6.5 10.612 6.5 10.75V11.25C6.5 11.388 6.612 11.5 6.75 11.5H7.25C7.388 11.5 7.5 11.388 7.5 11.25ZM7.5 9.5V9C7.5 8.862 7.388 8.75 7.25 8.75H6.75C6.612 8.75 6.5 8.862 6.5 9V9.5C6.5 9.638 6.612 9.75 6.75 9.75H7.25C7.388 9.75 7.5 9.638 7.5 9.5ZM7.5 7.75V7.25C7.5 7.112 7.388 7 7.25 7H6.75C6.612 7 6.5 7.112 6.5 7.25V7.75C6.5 7.888 6.612 8 6.75 8H7.25C7.388 8 7.5 7.888 7.5 7.75ZM9.5 11.25V10.75C9.5 10.612 9.388 10.5 9.25 10.5H8.75C8.612 10.5 8.5 10.612 8.5 10.75V11.25C8.5 11.388 8.612 11.5 8.75 11.5H9.25C9.388 11.5 9.5 11.388 9.5 11.25ZM9.5 9.5V9C9.5 8.862 9.388 8.75 9.25 8.75H8.75C8.612 8.75 8.5 8.862 8.5 9V9.5C8.5 9.638 8.612 9.75 8.75 9.75H9.25C9.388 9.75 9.5 9.638 9.5 9.5ZM9.5 7.75V7.25C9.5 7.112 9.388 7 9.25 7H8.75C8.612 7 8.5 7.112 8.5 7.25V7.75C8.5 7.888 8.612 8 8.75 8H9.25C9.388 8 9.5 7.888 9.5 7.75ZM11.5 9.5V9C11.5 8.862 11.388 8.75 11.25 8.75H10.75C10.612 8.75 10.5 8.862 10.5 9V9.5C10.5 9.638 10.612 9.75 10.75 9.75H11.25C11.388 9.75 11.5 9.638 11.5 9.5ZM11.5 7.75V7.25C11.5 7.112 11.388 7 11.25 7H10.75C10.612 7 10.5 7.112 10.5 7.25V7.75C10.5 7.888 10.612 8 10.75 8H11.25C11.388 8 11.5 7.888 11.5 7.75ZM4.25 5C3.673 5 3.14825 5.219 2.75 5.57625V4.5C2.75 3.67275 3.42275 3 4.25 3H11.75C12.5772 3 13.25 3.67275 13.25 4.5V5.57625C12.8518 5.219 12.327 5 11.75 5H4.25Z"
+            fill="currentColor"
+          />
+        </svg>
+      }
+    />
+  );
+};
+
 export const Range = () => {
   const [date, setDate] = useState<[Date, Date]>([new Date(), new Date()]);
 
diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
index cc1758c0..9b47bfa5 100644
--- a/src/form/DateInput/DateInput.tsx
+++ b/src/form/DateInput/DateInput.tsx
@@ -1,6 +1,7 @@
 import React, {
   ChangeEvent,
   FC,
+  ReactElement,
   useCallback,
   useEffect,
   useRef,
@@ -27,6 +28,11 @@ export type DateInputProps = Omit<InputProps, 'value' | 'onChange'> & {
    * Calendar placement type.
    */
   placement?: Placement;
+
+  /**
+   * Icon to show in open calendar button.
+   */
+  icon?: ReactElement;
 } & (
     | {
         isRange?: true;
@@ -45,6 +51,7 @@ export const DateInput: FC<DateInputProps> = ({
   format = 'MM/dd/yyyy',
   placement = 'bottom-start',
   isRange,
+  icon = <CalendarIcon />,
   onChange,
   ...rest
 }) => {
@@ -124,7 +131,7 @@ export const DateInput: FC<DateInputProps> = ({
             variant="text"
             onClick={() => setOpen(true)}
           >
-            <CalendarIcon />
+            {icon}
           </IconButton>
         }
         placeholder={

From a671d99ed78fbcbc64cf84b6732ab915f4b6bc46 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 15:39:24 +0300
Subject: [PATCH 09/10] Update imports

---
 src/form/DateInput/DateInput.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
index 9b47bfa5..beb8c593 100644
--- a/src/form/DateInput/DateInput.tsx
+++ b/src/form/DateInput/DateInput.tsx
@@ -9,10 +9,10 @@ import React, {
 } from 'react';
 import { format as formatDate, isValid, parse } from 'date-fns';
 
-import { IconButton } from '@/elements';
-import { Menu } from '@/layers';
-import { Card } from '@/layout';
-import { Placement } from '@/utils';
+import { IconButton } from '@/elements/IconButton';
+import { Menu } from '@/layers/Menu';
+import { Card } from '@/layout/Card';
+import { Placement } from '@/utils/Position';
 import { Calendar, Input, InputProps, InputRef } from '@/form';
 
 import CalendarIcon from '@/assets/icons/calendar.svg?react';

From 8a0437a1dc1145de02a71cd2b87d7e9797560693 Mon Sep 17 00:00:00 2001
From: Evgeniy <evgeniy.kulinich@mev.com>
Date: Fri, 24 May 2024 15:40:51 +0300
Subject: [PATCH 10/10] Update imports

---
 src/form/DateInput/DateInput.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
index beb8c593..aeaac1c2 100644
--- a/src/form/DateInput/DateInput.tsx
+++ b/src/form/DateInput/DateInput.tsx
@@ -13,7 +13,8 @@ import { IconButton } from '@/elements/IconButton';
 import { Menu } from '@/layers/Menu';
 import { Card } from '@/layout/Card';
 import { Placement } from '@/utils/Position';
-import { Calendar, Input, InputProps, InputRef } from '@/form';
+import { Calendar } from '@/form/Calendar';
+import { Input, InputProps, InputRef } from '@/form/Input';
 
 import CalendarIcon from '@/assets/icons/calendar.svg?react';