fix(DateInput): onChange trigger

.changeset/hot-hands-take.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`DateInput`: value changes onBlur instead of onChange to avoid wrong dates while the user is typing

packages/form/src/components/DateInputField/__tests__/__snapshots__/index.test.tsx.snap

@@ -496,6 +496,88 @@ exports[`DateInputField > should clear field 1`] = `
   color: #ffffff;
 }
 
+.emotion-67 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  height: 3rem;
+  padding: 0 1rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-family: Inter,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: #8c40ef;
+  border: none;
+  color: #ffffff;
+  height: 1.5625rem;
+  width: 100%;
+  padding: 0;
+  color: #727683;
+}
+
+.emotion-67:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-67:active {
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-67 .e1y1n78x0 {
+  stroke: transparent;
+}
+
+.emotion-67:hover,
+.emotion-67:active {
+  background: #792dd4;
+  color: #f9f9fa;
+}
+
+.emotion-67[aria-label="in-range"] {
+  color: #521094;
+  background-color: #f1eefc;
+}
+
+.emotion-67[aria-label="in-range"]:hover {
+  color: #ffffff;
+  background-color: #792dd4;
+}
+
+.emotion-67[aria-label="not-current"],
+.emotion-67:disabled {
+  color: #b5b7bd;
+}
+
+.emotion-67[aria-label="selected"] {
+  color: #ffffff;
+}
+
 <div
     data-testid="testing"
   >
@@ -668,8 +750,8 @@ exports[`DateInputField > should clear field 1`] = `
                   31
                 </button>
                 <button
-                  aria-label="neutral"
-                  class="emotion-57 emotion-58 emotion-24"
+                  aria-label="selected"
+                  class="emotion-57 emotion-67 emotion-68"
                   type="button"
                 >
                   1

packages/form/src/components/DateInputField/__tests__/index.test.tsx

@@ -68,8 +68,9 @@ describe('DateInputField', () => {
 
     const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
     await userEvent.click(input)
-    await userEvent.click(screen.getByText('15'))
     await userEvent.click(screen.getByText('18'))
+    await userEvent.click(screen.getByText('15'))
+
     await waitFor(() => {
       expect(onChange).toBeCalledTimes(2)
     })

packages/ui/src/components/DateInput/__stories__/Range.stories.tsx

@@ -23,7 +23,7 @@ export const Range: StoryFn<ComponentProps<typeof DateInput>> = args => {
   const [endDate, setEndDate] = useState<Date | null>(null)
 
   const [startMonth, setStartMonth] = useState<Date | null>(
-    new Date('March 2024'),
+    new Date('01/03/2024'),
   )
   const [endMonth, setEndMonth] = useState<Date | null>(null)
 

packages/ui/src/components/DateInput/__tests__/index.test.tsx

@@ -410,6 +410,7 @@ describe('DateInput', () => {
     await userEvent.click(input)
 
     await userEvent.type(input, '08/21/1995')
+    input.blur()
     expect(mockOnChange).toBeCalled()
     expect(screen.getByText('August', { exact: false })).toBeInTheDocument()
   })
@@ -429,6 +430,7 @@ describe('DateInput', () => {
     await userEvent.click(input)
 
     await userEvent.type(input, '08/21/1995')
+    input.blur()
     expect(mockOnChange).toBeCalled()
     expect(screen.getByText('August', { exact: false })).toBeInTheDocument()
   })
@@ -448,26 +450,31 @@ describe('DateInput', () => {
     await userEvent.click(input)
 
     await userEvent.type(input, '2000/08')
+    input.blur()
+
     expect(mockOnChange).toBeCalled()
     expect(screen.getByText('2000', { exact: false })).toBeInTheDocument()
   })
 
   test('handle correctly type in input with select range and showMonthYearPicker', async () => {
     const mockOnChange = vi.fn()
     renderWithTheme(
-      <DateInput
-        label="Date"
-        placeholder="YYYY-MM-DD"
-        selectsRange
-        showMonthYearPicker
-        onChange={mockOnChange}
-      />,
+      <>
+        <DateInput
+          label="Date"
+          placeholder="YYYY-MM-DD"
+          selectsRange
+          showMonthYearPicker
+          onChange={mockOnChange}
+        />
+        test
+      </>,
     )
 
     const input = screen.getByPlaceholderText<HTMLInputElement>('YYYY-MM-DD')
     await userEvent.click(input)
-
     await userEvent.type(input, '2000/08')
+    input.blur()
     expect(mockOnChange).toBeCalled()
     expect(screen.getByText('2000', { exact: false })).toBeInTheDocument()
   })

packages/ui/src/components/DateInput/components/CalendarDaily.tsx

@@ -29,7 +29,8 @@ const Day = styled(Button)`
 
   &[aria-label="in-range"]:hover {
     color: ${({ theme }) => theme.colors.neutral.textStronger};
-    background-color: ${({ theme }) => theme.colors.primary.backgroundStrongHover};
+    background-color: ${({ theme }) =>
+      theme.colors.primary.backgroundStrongHover};
   }
 
   &[aria-label="not-current"], :disabled {

packages/ui/src/components/DateInput/helpers.ts

@@ -66,8 +66,14 @@ export const formatValue = (
 ) => {
   if (selectsRange && computedRange) {
     return format
-      ? `${format(computedRange.start ?? undefined) ? `${format(computedRange.start ?? undefined)} - ` : ''}${format(computedRange.end ?? undefined) ?? ''}`
-      : `${getDateISO(showMonthYearPicker, computedRange.start ?? undefined)}${computedRange.start ? ' - ' : ''}${getDateISO(showMonthYearPicker, computedRange.end ?? undefined)}`
+      ? `${
+          format(computedRange.start ?? undefined)
+            ? `${format(computedRange.start ?? undefined)} - `
+            : ''
+        }${format(computedRange.end ?? undefined) ?? ''}`
+      : `${getDateISO(showMonthYearPicker, computedRange.start ?? undefined)}${
+          computedRange.start ? ' - ' : ''
+        }${getDateISO(showMonthYearPicker, computedRange.end ?? undefined)}`
   }
 
   if (computedValue && format) {
@@ -87,3 +93,43 @@ export const styleCalendarContainer = (theme: Theme) => `
   border-radius: ${theme.radii.default};
   background-color: ${theme.colors.other.elevation.background.raised};
 `
+
+export const createDate = (value: string, showMonthYearPicker: boolean) => {
+  if (showMonthYearPicker) {
+    // Force YYYY/MM (since MM/YYYY not recognised as a date in typescript)
+    const res = value.split(/\D+/).map(val => Number.parseInt(val, 10))
+    const year =
+      Math.max(...res) < 100 ? Math.max(...res) + 2000 : Math.max(...res) // MM/YY should be seen as MM/20YY instead of MM/19YY
+
+    const month = Math.min(...res) - 1
+    const computedDate = new Date(year, month)
+    const isValidDate = !!computedDate.getTime()
+
+    return isValidDate ? computedDate : null
+  }
+
+  const computedDate = new Date(value)
+  const isValidDate = !!computedDate.getTime()
+
+  return isValidDate ? computedDate : null
+}
+
+export const createDateRange = (
+  value: string,
+  showMonthYearPicker: boolean,
+) => {
+  const [startDateInput, endDateInput] = value
+    .split(' - ')
+    .map(val => createDate(val, showMonthYearPicker))
+
+  const computedNewRange: [Date | null, Date | null] = [
+    startDateInput instanceof Date && !Number.isNaN(startDateInput.getTime())
+      ? startDateInput
+      : null,
+    endDateInput instanceof Date && !Number.isNaN(endDateInput.getTime())
+      ? endDateInput
+      : null,
+  ]
+
+  return computedNewRange
+}