@popsure/dirty-swan 0.63.1 → 0.64.0

package/src/lib/components/dateSelector/components/Calendar.tsx

@@ -1,13 +1,13 @@
 import { useRef, useState } from 'react';
 import dayjs from 'dayjs';
-import DayPicker from 'react-day-picker';
+import { DayPicker } from 'react-day-picker';
+import rdpStyles from 'react-day-picker/style.module.css';
 
 import { useOnClickOutside } from '../../../hooks/useOnClickOutside';
 import { CalendarIcon } from '../../icon/icons';
-import { CalendarCaption } from './CalendarCaption';
 
 import styles from './style.module.scss';
-import './datepicker.scss';
+import datepickerStyles from './datepicker.module.scss';
 import { Button } from '../../button';
 
 export interface CalendarProps {
@@ -39,9 +39,8 @@ export const Calendar = ({
     ? dayjs().locale(dayjsLocale).localeData()
     : dayjs().locale('en').localeData();
 
-  const localizedWeekdays = localeDate.weekdays();
-  const localizedWeekdaysShort = localeDate.weekdaysMin();
   const localizedMonths = localeDate.months();
+  const localizedWeekdaysShort = localeDate.weekdaysMin();
 
   const calendarContainerRef = useRef<HTMLDivElement | null>(null);
   const [displayedMonth, setDisplayedMonth] = useState<Date | undefined>(undefined);
@@ -62,20 +61,6 @@ export const Calendar = ({
     .endOf('year')
     .toDate();
 
-  const currentMonth = displayedMonth ?? selectedDateInDateType ?? calendarDefaultDate;
-
-  const handlePrevMonth = () => {
-    const prev = new Date(currentMonth);
-    prev.setMonth(prev.getMonth() - 1);
-    setDisplayedMonth(prev);
-  };
-
-  const handleNextMonth = () => {
-    const next = new Date(currentMonth);
-    next.setMonth(next.getMonth() + 1);
-    setDisplayedMonth(next);
-  };
-
   useOnClickOutside(calendarContainerRef, () => setCalendarOpen(false));
 
   if (!displayCalendar) {
@@ -100,10 +85,13 @@ export const Calendar = ({
       {isOpen && (
         <DayPicker
           month={displayedMonth ?? selectedDateInDateType ?? calendarDefaultDate}
+          mode="single"
           showOutsideDays={true}
-          fromMonth={dateCalendarFromMonth}
-          toMonth={dateCalendarToMonth}
-          selectedDays={selectedDateInDateType}
+          captionLayout="dropdown"
+          navLayout="around"
+          startMonth={dateCalendarFromMonth}
+          endMonth={dateCalendarToMonth}
+          selected={selectedDateInDateType}
           onDayClick={(date: Date) => {
             if (!dayjs(date).isValid()) {
               return;
@@ -118,28 +106,23 @@ export const Calendar = ({
               setCalendarOpen(false);
             }
           }}
-          navbarElement={() => null}
           onMonthChange={(month: Date) => setDisplayedMonth(month)}
-          captionElement={({ date }: { date: Date }) => (
-            <CalendarCaption
-              date={date}
-              months={localizedMonths}
-              yearBoundaries={yearBoundaries}
-              onMonthChange={(newDate) => setDisplayedMonth(newDate)}
-              onPrevClick={handlePrevMonth}
-              onNextClick={handleNextMonth}
-            />
-          )}
           pagedNavigation={true}
-          disabledDays={{
+          disabled={{
             before: dateCalendarFromMonth,
             after: dateCalendarToMonth,
           }}
-          firstDayOfWeek={firstDayOfWeek}
-          locale={dayjsLocale?.name || 'en'}
-          months={localizedMonths}
-          weekdaysLong={localizedWeekdays}
-          weekdaysShort={localizedWeekdaysShort}
+          weekStartsOn={firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6}
+          formatters={{
+            formatWeekdayName: (_date) => {
+              const dayIndex = _date.getDay();
+              return localizedWeekdaysShort[dayIndex]?.charAt(0) ?? '';
+            },
+            formatMonthDropdown: (date) => {
+              return localizedMonths[date.getMonth()];
+            },
+          }}
+          classNames={{ ...rdpStyles, ...datepickerStyles }}
         />
       )}
     </div>

package/src/lib/components/dateSelector/components/datepicker.module.scss

@@ -0,0 +1,199 @@
+@use '../../../scss/public/grid' as *;
+@use '../../../scss/public/colors' as *;
+@use '../../../scss/public/font-weight' as *;
+@use '../../../scss/public/shadows' as *;
+
+.root {
+  --rdp-accent-color: #{$ds-neutral-600};
+  --rdp-accent-background-color: #{$ds-orange-500};
+  --rdp-day-height: 44px;
+  --rdp-day-width: 44px;
+  --rdp-day_button-height: 42px;
+  --rdp-day_button-width: 42px;
+  --rdp-day_button-border-radius: 50%;
+  --rdp-day_button-border: 2px solid transparent;
+  --rdp-selected-border: 2px solid #{$ds-orange-500};
+  --rdp-selected-background: #{$ds-orange-500};
+  --rdp-outside-opacity: 1;
+  --rdp-today-color: #{$ds-neutral-900};
+  --rdp-dropdown-gap: 8px;
+  --rdp-nav_button-disabled-opacity: 0.5;
+  --rdp-nav_button-height: 2.75rem;
+  --rdp-nav_button-width: 2.75rem;
+
+  position: absolute;
+  left: 40px;
+  top: -112px;
+  z-index: 100;
+  background-color: $ds-white;
+  box-shadow: $bs-md;
+  border-radius: 16px;
+  color: $ds-neutral-900;
+  font-size: 16px;
+  padding: 16px 24px 24px 24px;
+
+  @include p-size-mobile {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.month {
+  position: relative;
+}
+
+.month_caption {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  height: var(--rdp-nav-height);
+  margin-top: 6px;
+  margin-bottom: 24px;
+  margin-inline-start: var(--rdp-nav_button-width);
+  margin-inline-end: var(--rdp-nav_button-width);
+  position: relative;
+}
+
+.weekday {
+  padding: 8px 0;
+  font-weight: $p-font-weight-normal;
+  text-align: center;
+  color: $ds-neutral-600;
+  font-size: 16px;
+}
+
+.dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+}
+
+.day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-weight: $p-font-weight-normal;
+  font-size: 16px;
+  color: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+  border: var(--rdp-day_button-border);
+  border-radius: var(--rdp-day_button-border-radius);
+
+  &:hover {
+    background-color: $ds-transparent;
+    border-color: $ds-orange-600;
+  }
+}
+
+.outside {
+  color: $ds-neutral-400;
+}
+
+.disabled {
+  color: $ds-neutral-400;
+  pointer-events: none;
+}
+
+.selected {
+  font-size: unset;
+  font-weight: unset;
+
+  .day_button {
+    border: var(--rdp-selected-border);
+    background-color: $ds-orange-500;
+    color: $ds-neutral-900;
+  }
+}
+
+.button_previous,
+.button_next {
+  position: absolute;
+  top: 4px;
+}
+
+.button_previous {
+  inset-inline-start: 0;
+}
+
+.button_next {
+  inset-inline-end: 0;
+}
+
+.button_previous,
+.button_next {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+
+  &:hover {
+    background-color: $ds-neutral-100;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: revert;
+    opacity: var(--rdp-nav_button-disabled-opacity);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: $ds-neutral-800;
+  }
+}
+
+.chevron {
+  display: inline-block;
+  fill: $ds-neutral-500;
+}
+
+.dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid $ds-neutral-300;
+  border-radius: 8px;
+  padding: 8px 12px;
+}
+
+.dropdown {
+  z-index: 2;
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  line-height: inherit;
+  font-weight: 500;
+  font-size: inherit;
+  color: $ds-neutral-900;
+}
+
+.caption_label {
+  z-index: 1;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border: 0;
+  font-weight: $p-font-weight-bold;
+}

package/src/lib/components/dateSelector/index.test.tsx

@@ -150,7 +150,7 @@ describe('DateSelector component', () => {
 
       await user.click(button);
 
-      const calendarCell = getByLabelText(/17 2024/);
+      const calendarCell = getByLabelText(/January 17/);
 
       await user.click(calendarCell);
 
@@ -167,7 +167,7 @@ describe('DateSelector component', () => {
 
       await user.click(button);
 
-      const calendarCell = getByLabelText(/17 2024/);
+      const calendarCell = getByLabelText(/January 17/);
       expect(calendarCell).toBeVisible();
 
       // click outside the calendar

package/dist/cjs/lib/components/dateSelector/components/CalendarCaption.d.ts

@@ -1,13 +0,0 @@
-interface CalendarCaptionProps {
-    date: Date;
-    months: string[];
-    yearBoundaries: {
-        min: number;
-        max: number;
-    };
-    onMonthChange: (date: Date) => void;
-    onPrevClick: () => void;
-    onNextClick: () => void;
-}
-export declare const CalendarCaption: ({ date, months, yearBoundaries, onMonthChange, onPrevClick, onNextClick, }: CalendarCaptionProps) => JSX.Element;
-export {};