studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨(lint) update file for prettier 3.0.0

Browse Source 
Prettier 3.0.0 comes with new standards so we need to upgrade our files
to comply with it.
This commit is contained in:
Nathan Vasse
2023-07-18 15:43:56 +02:00
committed by NathanVss
parent 5f63c2a606
commit d85f9edac8
61 changed files with 421 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/react/src/components/Forms/DatePicker/Calendar.tsx
View File

@@ -100,7 +100,7 @@ const CalendarAux = forwardRef(
nextButtonProps,
calendarProps,
}: CalendarAuxProps,
ref: Ref<HTMLDivElement>
ref: Ref<HTMLDivElement>,
) => {
const { t } = useCunningham();
@@ -118,7 +118,7 @@ const CalendarAux = forwardRef(
const monthItems: Array<Option> = useMemo(() => {
// Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
state.focusedDate
state.focusedDate,
);
return range(1, numberOfMonths).map((monthNumber) => {
const date = state.focusedDate.set({ month: monthNumber });
@@ -134,15 +134,15 @@ const CalendarAux = forwardRef(
const yearItems: Array<Option> = useMemo(() => {
const calendarCurrentUser = createCalendar(
new Intl.DateTimeFormat().resolvedOptions().calendar
new Intl.DateTimeFormat().resolvedOptions().calendar,
);
const minDate = toCalendar(
new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
calendarCurrentUser
calendarCurrentUser,
);
const maxDate = toCalendar(
new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
calendarCurrentUser
calendarCurrentUser,
);
return range(minDate.year, maxDate.year).map((yearNumber) => {
const date = state.focusedDate.set({ year: yearNumber });
@@ -158,7 +158,7 @@ const CalendarAux = forwardRef(
const useDownshiftSelect = (
key: string,
items: Array<Option>
items: Array<Option>,
): UseSelectReturnValue<Option> => {
return useSelect({
items,
@@ -192,12 +192,12 @@ const CalendarAux = forwardRef(
const getToggleButtonProps = (
key: string,
items: Array<Option>,
downshift: UseSelectReturnValue<Option>
downshift: UseSelectReturnValue<Option>,
) => ({
...downshift.getToggleButtonProps(),
onClick: () => {
const selectedItem = items.find(
(item) => item.value === state.focusedDate[key as keyof CalendarDate]
(item) => item.value === state.focusedDate[key as keyof CalendarDate],
);
if (selectedItem) {
downshift.selectItem(selectedItem);
@@ -205,7 +205,7 @@ const CalendarAux = forwardRef(
downshift.toggleMenu();
},
"aria-label": t(
`components.forms.date_picker.${key}_select_button_aria_label`
`components.forms.date_picker.${key}_select_button_aria_label`,
),
});
@@ -228,7 +228,7 @@ const CalendarAux = forwardRef(
{...{
...prevButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.previous_month_button_aria_label"
"components.forms.date_picker.previous_month_button_aria_label",
),
}}
disabled={isPrevButtonDisabled}
@@ -243,7 +243,7 @@ const CalendarAux = forwardRef(
{...getToggleButtonProps("month", monthItems, downshiftMonth)}
>
{selectedMonthItemFormatter.format(
state.focusedDate.toDate(state.timeZone)
state.focusedDate.toDate(state.timeZone),
)}
</Button>
<Button
@@ -253,7 +253,7 @@ const CalendarAux = forwardRef(
{...{
...nextButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.next_month_button_aria_label"
"components.forms.date_picker.next_month_button_aria_label",
),
}}
disabled={isNextButtonDisabled}
@@ -272,7 +272,7 @@ const CalendarAux = forwardRef(
state.focusedDate.add({ years: -1 }).year
}
aria-label={t(
"components.forms.date_picker.previous_year_button_aria_label"
"components.forms.date_picker.previous_year_button_aria_label",
)}
/>
<Button
@@ -284,7 +284,7 @@ const CalendarAux = forwardRef(
{...getToggleButtonProps("year", yearItems, downshiftYear)}
>
{yearItemsFormatter.format(
state.focusedDate.toDate(state.timeZone)
state.focusedDate.toDate(state.timeZone),
)}
</Button>
<Button
@@ -297,7 +297,7 @@ const CalendarAux = forwardRef(
state.maxValue.year < state.focusedDate.add({ years: 1 }).year
}
aria-label={t(
"components.forms.date_picker.next_year_button_aria_label"
"components.forms.date_picker.next_year_button_aria_label",
)}
/>
</div>
@@ -310,7 +310,7 @@ const CalendarAux = forwardRef(
<DropdownValues options={yearItems} downShift={downshiftYear} />
</div>
);
}
},
);
export const Calendar = (props: CalendarProps<DateValue>) => {

4
packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
View File

@@ -74,9 +74,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
isSelected,
"c__calendar__wrapper__grid__week-row__button--today": isToday(
date,
getLocalTimeZone()
getLocalTimeZone(),
),
}
},
)}
disabled={isDisabled}
{...buttonProps}

4
packages/react/src/components/Forms/DatePicker/CalendarGrid.tsx
View File

@@ -29,7 +29,7 @@ export const CalendarGrid = ({
startDate: state.visibleRange.start,
endDate: endOfMonth(state.visibleRange.start),
},
state
state,
);
const shortDayFormatter = useDateFormatter({
@@ -61,7 +61,7 @@ export const CalendarGrid = ({
.getDatesInWeek(weekIndex)
.map(
(date, i) =>
date && <CalendarCell key={i} state={state} date={date} />
date && <CalendarCell key={i} state={state} date={date} />,
)}
</tr>
))}

116
packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
View File

@@ -20,7 +20,7 @@ describe("<DatePicker/>", () => {
expect(calendar).toBeDefined();
expect(calendar).not.toBeNull();
expect(Array.from(calendar!.classList)).contains(
"c__calendar__wrapper--opened"
"c__calendar__wrapper--opened",
);
};
@@ -28,7 +28,7 @@ describe("<DatePicker/>", () => {
const dateField = screen.queryByRole("presentation");
expect(dateField).toBeTruthy();
expect(Array.from(dateField!.parentElement!.classList)).contains(
"c__date-picker__inner--collapsed"
"c__date-picker__inner--collapsed",
);
};
@@ -38,12 +38,12 @@ describe("<DatePicker/>", () => {
const expectDatesToBeEqual = (
firstDate: Date | string | undefined | null,
secondDate: Date | string | undefined | null
secondDate: Date | string | undefined | null,
) => {
expect(firstDate).toBeDefined();
expect(secondDate).toBeDefined();
expect(new Date(firstDate!).toLocaleDateString()).eq(
new Date(secondDate!).toLocaleDateString()
new Date(secondDate!).toLocaleDateString(),
);
};
@@ -72,7 +72,7 @@ describe("<DatePicker/>", () => {
const expectMenuToBeClosed = (menu: HTMLElement) => {
expect(Array.from(menu.classList)).not.contains(
"c__calendar__menu--opened"
"c__calendar__menu--opened",
);
};
@@ -88,7 +88,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, button] = await screen.findAllByRole("button");
@@ -135,7 +135,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button")!;
@@ -154,12 +154,12 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when no date is picked.
const [input, toggleButton] = await screen.findAllByRole("button")!;
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
await user.keyboard("{Tab}");
@@ -187,7 +187,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue="2023-04-25"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when a date is already picked.
@@ -196,7 +196,7 @@ describe("<DatePicker/>", () => {
name: "Clear date",
});
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
// Navigate through elements using Tab.
@@ -224,7 +224,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button");
await user.click(input);
@@ -235,8 +235,8 @@ describe("<DatePicker/>", () => {
// Select the first clickable grid-cell.
const gridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![0]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![0],
).getByRole("button")!;
// Pick a date.
@@ -254,7 +254,7 @@ describe("<DatePicker/>", () => {
const selectedDate = within(
screen.getByRole("gridcell", {
selected: true,
})!
})!,
)
.getByRole("button")!
.getAttribute("aria-label")
@@ -276,10 +276,10 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue="2023-04-05"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
// Select the first segment, month one.
await user.click(monthSegment);
@@ -312,10 +312,10 @@ describe("<DatePicker/>", () => {
defaultValue="2023-04-05"
minValue="2022-12-03"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
// Select the first segment, month one.
await user.click(monthSegment);
@@ -356,7 +356,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get picked date.
const dateFieldContent = screen.getByRole("presentation").textContent;
@@ -377,10 +377,10 @@ describe("<DatePicker/>", () => {
defaultValue={defaultValue}
value={value}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"You cannot use both defaultValue and value props on DatePicker component"
"You cannot use both defaultValue and value props on DatePicker component",
);
});
@@ -396,12 +396,12 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={invalidDate}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
}
},
);
it("clears date", async () => {
@@ -414,7 +414,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const clearButton = screen.getByRole("button", {
name: "Clear date",
@@ -448,7 +448,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-01-01"
minValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("invalid");
});
@@ -462,7 +462,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-03-01"
maxValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("invalid");
});
@@ -478,7 +478,7 @@ describe("<DatePicker/>", () => {
maxValue="2023-04-01"
minValue="2023-05-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("invalid");
});
@@ -517,7 +517,7 @@ describe("<DatePicker/>", () => {
expectCalendarToBeOpen();
const gridCell = within(
await screen.getByRole("gridcell", { name: "12" })
await screen.getByRole("gridcell", { name: "12" }),
).getByRole("button")!;
// Select a new value in the calendar grid.
@@ -547,7 +547,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-03-01"
disabled={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("disabled");
@@ -559,13 +559,13 @@ describe("<DatePicker/>", () => {
// Make sure the clear button is not visible and disabled.
expect(
screen.queryByRole("button", { name: "Clear date", hidden: true })
screen.queryByRole("button", { name: "Clear date", hidden: true }),
).toBeDisabled();
// Make sure each segment of the date field is disabled.
const dateFieldInputs = await screen.queryAllByRole("spinbutton");
dateFieldInputs.forEach((dateFieldInput) =>
expect(dateFieldInput).toHaveAttribute("aria-disabled")
expect(dateFieldInput).toHaveAttribute("aria-disabled"),
);
});
@@ -578,7 +578,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue="2023-03-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -674,7 +674,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -712,7 +712,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -754,7 +754,7 @@ describe("<DatePicker/>", () => {
minValue={minValue}
maxValue={maxValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -787,7 +787,7 @@ describe("<DatePicker/>", () => {
minValue={minValue}
maxValue={maxValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -819,7 +819,7 @@ describe("<DatePicker/>", () => {
minValue={minValue}
maxValue={maxValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open the calendar.
@@ -855,7 +855,9 @@ describe("<DatePicker/>", () => {
try {
const button = within(gridCell).getByRole("button")!;
const value = new Date(
button.getAttribute("aria-label")!.replace("First available date", "")
button
.getAttribute("aria-label")!
.replace("First available date", ""),
);
expect(value.getMonth() === minValue.getMonth());
if (value.getDate() < minValue.getDate()) {
@@ -866,7 +868,7 @@ describe("<DatePicker/>", () => {
} catch (e: any) {
// Make sure outside grid-cells render any button element, even disabled.
expect(e.message).contains(
'Unable to find an accessible element with the role "button"'
'Unable to find an accessible element with the role "button"',
);
}
});
@@ -897,7 +899,7 @@ describe("<DatePicker/>", () => {
} catch (e: any) {
// Make sure outside grid-cells render any button element, even disabled.
expect(e.message).contains(
'Unable to find an accessible element with the role "button"'
'Unable to find an accessible element with the role "button"',
);
}
});
@@ -913,7 +915,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -931,7 +933,7 @@ describe("<DatePicker/>", () => {
// Make sure the selected item matched the default value.
let focusedMonth = monthDropdown.textContent?.replace(
"arrow_drop_down",
""
"",
);
expect(focusedMonth).eq("May");
@@ -964,7 +966,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -1011,7 +1013,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open the calendar.
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -1025,7 +1027,7 @@ describe("<DatePicker/>", () => {
try {
const button = within(gridCell).getByRole("button");
const value = new Date(
button.getAttribute("aria-label")!.replace("selected", "")
button.getAttribute("aria-label")!.replace("selected", ""),
);
expect(button).not.toBeDisabled();
expect(defaultValue.getMonth() === value.getMonth());
@@ -1033,7 +1035,7 @@ describe("<DatePicker/>", () => {
} catch (e: any) {
// Make sure outside grid-cells render any button element, even disabled.
expect(e.message).contains(
'Unable to find an accessible element with the role "button"'
'Unable to find an accessible element with the role "button"',
);
}
});
@@ -1051,7 +1053,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open calendar.
@@ -1084,7 +1086,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -1115,7 +1117,7 @@ describe("<DatePicker/>", () => {
locale="hi-IN-u-ca-indian"
defaultValue="2023-06-25"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))[0];
@@ -1160,7 +1162,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider currentLocale="fr-FR">
<DatePicker label="Pick a date" defaultValue="2023-06-25" />
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))[0];
@@ -1209,7 +1211,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-06-25"
locale="hi-IN-u-ca-indian"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))[0];
@@ -1257,8 +1259,8 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" locale="111" />
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow("Incorrect locale information provided");
});
});

6
packages/react/src/components/Forms/DatePicker/DatePicker.tsx
View File

@@ -26,7 +26,7 @@ export type DatePickerProps = DatePickerAuxSubProps & {
export const DatePicker = (props: DatePickerProps) => {
if (props.defaultValue && props.value) {
throw new Error(
"You cannot use both defaultValue and value props on DatePicker component"
"You cannot use both defaultValue and value props on DatePicker component",
);
}
const ref = useRef<HTMLDivElement>(null);
@@ -48,12 +48,12 @@ export const DatePicker = (props: DatePickerProps) => {
const { fieldProps, calendarProps, ...pickerProps } = useDatePicker(
options,
pickerState,
ref
ref,
);
const labelAsPlaceholder = useMemo(
() => !isFocused && !pickerState.isOpen && !pickerState.value,
[pickerState.value, pickerState.isOpen, isFocused]
[pickerState.value, pickerState.isOpen, isFocused],
);
const calendar = <Calendar {...calendarProps} />;

10
packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
View File

@@ -65,7 +65,7 @@ const DatePickerAux = forwardRef(
optionalClassName,
...props
}: DatePickerAuxProps,
ref: Ref<HTMLDivElement>
ref: Ref<HTMLDivElement>,
) => {
const { t, currentLocale } = useCunningham();
const pickerRef = useRef<HTMLDivElement>(null);
@@ -73,7 +73,7 @@ const DatePickerAux = forwardRef(
const isDateInvalid = useMemo(
() =>
pickerState.validationState === "invalid" || props.state === "error",
[pickerState.validationState, props.state]
[pickerState.validationState, props.state],
);
// onPress props don't exist on the <Button /> component.
@@ -133,7 +133,7 @@ const DatePickerAux = forwardRef(
"aria-label": t(
pickerState.isOpen
? "components.forms.date_picker.toggle_button_aria_label_close"
: "components.forms.date_picker.toggle_button_aria_label_open"
: "components.forms.date_picker.toggle_button_aria_label_open",
),
}}
color="tertiary"
@@ -156,7 +156,7 @@ const DatePickerAux = forwardRef(
icon={<span className="material-icons">cancel</span>}
onClick={onClear}
aria-label={t(
"components.forms.date_picker.clear_button_aria_label"
"components.forms.date_picker.clear_button_aria_label",
)}
disabled={disabled}
/>
@@ -174,7 +174,7 @@ const DatePickerAux = forwardRef(
</Field>
</I18nProvider>
);
}
},
);
export default DatePickerAux;

100
packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
View File

@@ -9,12 +9,12 @@ import { Button } from ":/components/Button";
describe("<DateRangePicker/>", () => {
const expectDatesToBeEqual = (
firstDate: Date | string | undefined | null,
secondDate: Date | string | undefined | null
secondDate: Date | string | undefined | null,
) => {
expect(firstDate).toBeDefined();
expect(secondDate).toBeDefined();
expect(new Date(firstDate!).toLocaleDateString()).eq(
new Date(secondDate!).toLocaleDateString()
new Date(secondDate!).toLocaleDateString(),
);
};
@@ -31,7 +31,7 @@ describe("<DateRangePicker/>", () => {
expect(dateFields.length).eq(2);
dateFields.forEach((dateField) => {
expect(Array.from(dateField.parentElement!.classList)).contains(
"c__date-picker__inner--collapsed"
"c__date-picker__inner--collapsed",
);
});
};
@@ -48,7 +48,7 @@ describe("<DateRangePicker/>", () => {
expect(calendar).toBeDefined();
expect(calendar).not.toBeNull();
expect(Array.from(calendar!.classList)).contains(
"c__calendar__wrapper--opened"
"c__calendar__wrapper--opened",
);
};
@@ -68,7 +68,7 @@ describe("<DateRangePicker/>", () => {
endLabel="Pick a date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, button] = await screen.findAllByRole("button");
@@ -119,7 +119,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when no date is picked.
const [input, toggleButton] = await screen.findAllByRole("button")!;
@@ -151,7 +151,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={[start, end]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get picked date.
const [startInput, endInput] = await screen.queryAllByRole("presentation");
@@ -170,7 +170,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-04-25", "2023-05-25"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when a date is already picked.
@@ -225,7 +225,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button");
await user.click(input);
@@ -236,8 +236,8 @@ describe("<DateRangePicker/>", () => {
// Select the first clickable grid-cell.
const startGridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![0]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![0],
).getByRole("button")!;
// Pick a start date.
@@ -249,8 +249,8 @@ describe("<DateRangePicker/>", () => {
// Select the second clickable grid-cell.
const endGridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![1]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![1],
).getByRole("button")!;
// Pick an end date.
@@ -295,7 +295,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button");
await user.click(input);
@@ -306,8 +306,8 @@ describe("<DateRangePicker/>", () => {
// Select the first clickable grid-cell.
const gridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![0]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![0],
).getByRole("button")!;
// Pick a start date.
@@ -358,7 +358,7 @@ describe("<DateRangePicker/>", () => {
defaultValue={["2023-01-01", "2023-01-01"]}
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))![0];
await user.click(input);
@@ -419,7 +419,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-01"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))![0];
await user.click(input);
@@ -468,7 +468,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-01"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))![0];
await user.click(input);
@@ -516,7 +516,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open calendar to display text segment
@@ -575,7 +575,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open calendar to display text segment
@@ -640,10 +640,10 @@ describe("<DateRangePicker/>", () => {
defaultValue={["2022-05-25", "2022-05-26"]}
value={["2022-05-25", "2022-05-26"]}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"You cannot use both defaultValue and value props on DateRangePicker component"
"You cannot use both defaultValue and value props on DateRangePicker component",
);
});
@@ -662,10 +662,10 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={[start, end]}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
});
@@ -679,7 +679,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2024-05-25", "2022-05-26"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("invalid");
});
@@ -696,7 +696,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={[start, end]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const clearButton = screen.getByRole("button", {
@@ -707,7 +707,7 @@ describe("<DateRangePicker/>", () => {
// Date field's value should be set to a placeholder value.
const [startInput, endInput] = await screen.queryAllByRole(
"presentation"
"presentation",
);
expect(startInput.textContent).eq("mm/dd/yyyy");
expect(endInput.textContent).eq("mm/dd/yyyy");
@@ -720,8 +720,8 @@ describe("<DateRangePicker/>", () => {
expect(startGridCell.getAttribute("aria-selected")).toBeNull();
expect(
startGridCell.classList.contains(
"c__calendar__wrapper__grid__week-row__background--range--start"
)
"c__calendar__wrapper__grid__week-row__background--range--start",
),
).toBe(false);
// Make sure end grid-cell is not selected anymore.
@@ -731,8 +731,8 @@ describe("<DateRangePicker/>", () => {
expect(endGridCell.getAttribute("aria-selected")).toBeNull();
expect(
endGridCell.classList.contains(
"c__calendar__wrapper__grid__week-row__background--range--end"
)
"c__calendar__wrapper__grid__week-row__background--range--end",
),
).toBe(false);
// Close the calendar.
@@ -741,7 +741,7 @@ describe("<DateRangePicker/>", () => {
// Make sure the empty date field is hidden when closing the calendar.
await expectDateFieldsToBeHidden();
}
},
);
it.each([
@@ -759,10 +759,10 @@ describe("<DateRangePicker/>", () => {
defaultValue={[start, end]}
minValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("invalid");
}
},
);
it.each([
@@ -780,10 +780,10 @@ describe("<DateRangePicker/>", () => {
defaultValue={[start, end]}
maxValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("invalid");
}
},
);
it("renders disabled", async () => {
@@ -796,7 +796,7 @@ describe("<DateRangePicker/>", () => {
defaultValue={["2023-01-01", "2023-01-01"]}
disabled={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("disabled");
@@ -808,13 +808,13 @@ describe("<DateRangePicker/>", () => {
// Make sure the clear button is not visible and disabled.
expect(
screen.queryByRole("button", { name: "Clear date", hidden: true })
screen.queryByRole("button", { name: "Clear date", hidden: true }),
).toBeDisabled();
// Make sure each segment of the date field is disabled.
const dateFieldInputs = await screen.queryAllByRole("spinbutton");
dateFieldInputs.forEach((dateFieldInput) =>
expect(dateFieldInput).toHaveAttribute("aria-disabled")
expect(dateFieldInput).toHaveAttribute("aria-disabled"),
);
});
@@ -828,7 +828,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-01"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -846,7 +846,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-10"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Toggle button opens the calendar.
const button = (await screen.findAllByRole("button"))![0];
@@ -860,7 +860,7 @@ describe("<DateRangePicker/>", () => {
selectedCells.forEach((selectedCell) => {
const cellButton = within(selectedCell).getByRole("button")!;
expect(Array.from(cellButton!.classList)).contains(
"c__calendar__wrapper__grid__week-row__button--selected"
"c__calendar__wrapper__grid__week-row__button--selected",
);
});
const commonClassName =
@@ -868,14 +868,14 @@ describe("<DateRangePicker/>", () => {
// Make sure the start of selection has the start styling.
const startCellButton = within(selectedCells[0]).getByRole("button")!;
expect(Array.from(startCellButton.parentElement!.classList)).contains(
`${commonClassName}--start`
`${commonClassName}--start`,
);
// Make sure the end of selection has the end styling.
const endCellButton = within(
selectedCells[selectedCells.length - 1]
selectedCells[selectedCells.length - 1],
).getByRole("button")!;
expect(Array.from(endCellButton.parentElement!.classList)).contains(
`${commonClassName}--end`
`${commonClassName}--end`,
);
});
@@ -917,11 +917,11 @@ describe("<DateRangePicker/>", () => {
expectCalendarToBeOpen();
const startGridCell = within(
await screen.getByRole("gridcell", { name: "12" })
await screen.getByRole("gridcell", { name: "12" }),
).getByRole("button")!;
const endGridCell = within(
await screen.getByRole("gridcell", { name: "14" })
await screen.getByRole("gridcell", { name: "14" }),
).getByRole("button")!;
// Select a new value in the calendar grid.

6
packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx
View File

@@ -31,7 +31,7 @@ export const DateRangePicker = ({
}: DateRangePickerProps) => {
if (props.defaultValue && props.value) {
throw new Error(
"You cannot use both defaultValue and value props on DateRangePicker component"
"You cannot use both defaultValue and value props on DateRangePicker component",
);
}
const ref = useRef<HTMLDivElement>(null);
@@ -45,7 +45,7 @@ export const DateRangePicker = ({
props.onChange?.(
value?.start && value.end
? [value.start.toString(), value.end.toString()]
: null
: null,
);
},
};
@@ -59,7 +59,7 @@ export const DateRangePicker = ({
!pickerState.isOpen &&
!pickerState.value.start &&
!pickerState.value.end,
[pickerState.value, pickerState.isOpen, isFocused]
[pickerState.value, pickerState.isOpen, isFocused],
);
const calendar = <CalendarRange {...calendarProps} />;

12
packages/react/src/components/Forms/DatePicker/utils.spec.ts
View File

@@ -9,7 +9,7 @@ const expectDateToBeEqual = (
parsedDate: CalendarDate | DateValue | undefined,
expectedYear: number,
expectedMonth: number,
expectedDay: number
expectedDay: number,
) => {
expect(parsedDate).not.eq(undefined);
expect(parsedDate?.year === expectedYear);
@@ -40,7 +40,7 @@ describe("parseCalendarDate", () => {
const stringDate = `${year}-${month}-${day}`;
const parsedDate = parseCalendarDate(stringDate);
expectDateToBeEqual(parsedDate, year, month, day);
}
},
);
it.each([
@@ -68,7 +68,7 @@ describe("parseCalendarDate", () => {
"2022-04-01 T00:00:00-00:00",
])("parse a wrong date", (wrongFormattedDate) => {
expect(() => parseCalendarDate(wrongFormattedDate)).toThrow(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
});
@@ -96,7 +96,7 @@ describe("parseCalendarDate", () => {
// Make sure the ISO string have been converted to the local timezone
const nextDay = parseDate(dateString).add({ days: 1 });
expect(parsedDate?.compare(nextDay)).eq(0);
}
},
);
it.each([
@@ -123,7 +123,7 @@ describe("parseCalendarDate", () => {
// Make sure the ISO string have been converted to the local timezone
expect(parsedDate?.compare(sameDay)).eq(0);
}
},
);
});
@@ -146,7 +146,7 @@ describe("parseRangeCalendarDate", () => {
"parse a partially null or empty date range",
(start: StringOrDate, end: StringOrDate) => {
expect(parseRangeCalendarDate([start, end])).eq(undefined);
}
},
);
it("parse an undefined date range", () => {

6
packages/react/src/components/Forms/DatePicker/utils.ts
View File

@@ -11,7 +11,7 @@ import {
import { DatePickerAuxSubProps } from ":/components/Forms/DatePicker/DatePickerAux";
export const parseCalendarDate = (
rawDate: StringOrDate | undefined
rawDate: StringOrDate | undefined,
): undefined | CalendarDate => {
if (!rawDate) {
return undefined;
@@ -21,13 +21,13 @@ export const parseCalendarDate = (
return toCalendarDate(parseAbsoluteToLocal(ISODateString));
} catch (e) {
throw new Error(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
}
};
export const parseRangeCalendarDate = (
rawRange: StringsOrDateRange | undefined
rawRange: StringsOrDateRange | undefined,
): DateRange | undefined => {
if (!rawRange || !rawRange[0] || !rawRange[1]) {
return undefined;