feat(core): replace page filter, journal's date-picker with new one (#5675)

packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts

@@ -89,7 +89,9 @@ export const basicCell = style({
 });
 
 // roots
-export const calendarRoot = style({});
+export const calendarRoot = style({
+  minWidth: `calc(28px * 7 + ${vars.gapX} * 6)`,
+});
 export const calendarWrapper = style({
   display: 'flex',
   flexDirection: 'column',
@@ -101,7 +103,7 @@ export const calendarHeader = style({
 });
 
 // header
-export const headerLayoutCell = style([basicCell]);
+export const headerLayoutCell = style([basicCell, { height: 'auto' }]);
 export const headerLayoutCellOrigin = style({
   width: 0,
   height: 'fit-content',

packages/frontend/component/src/ui/date-picker/calendar/day-picker.tsx

@@ -119,12 +119,17 @@ export const DayPicker = memo(function DayPicker(
           onClick={openMonthPicker}
           ref={headerMonthRef}
           className={styles.calendarHeaderTriggerButton}
+          data-testid="month-picker-button"
+          data-month={cursor.month()}
+          data-year={cursor.year()}
         >
           {monthNames.split(',')[cursor.month()]}
         </button>
         <button
           className={styles.calendarHeaderTriggerButton}
           onClick={openYearPicker}
+          data-testid="year-picker-button"
+          data-year={cursor.year()}
         >
           {cursor.year()}
         </button>

packages/frontend/component/src/ui/date-picker/calendar/index.ts

@@ -1 +1,2 @@
 export * from './calendar';
+export type { DateCell } from './types';

packages/frontend/component/src/ui/date-picker/calendar/items.tsx

@@ -19,6 +19,8 @@ interface HeaderLayoutProps extends HTMLAttributes<HTMLDivElement> {
   left: React.ReactNode;
   right: React.ReactNode;
 }
+
+const autoHeight = { height: 'auto' };
 /**
  * The `DatePicker` should work with different width
  * This is a hack to make header's item align with calendar cell's label, **instead of the cell**
@@ -57,6 +59,7 @@ const HeaderLayout = memo(function HeaderLayout({
                 [styles.yearViewBodyCell]: mode === 'month',
                 [styles.decadeViewBodyCell]: mode === 'year',
               })}
+              style={autoHeight}
             >
               <div className={styles.headerLayoutCellOrigin}>
                 {isLeft ? left : isRight ? right : null}
@@ -139,6 +142,7 @@ export const NavButtons = memo(function NavButtons({
         size="small"
         className={styles.focusInteractive}
         disabled={prevDisabled}
+        data-testid="date-picker-nav-prev"
         onClick={onPrev}
       >
         <ArrowLeftSmallIcon />
@@ -151,6 +155,7 @@ export const NavButtons = memo(function NavButtons({
         size="small"
         className={styles.focusInteractive}
         disabled={nextDisabled}
+        data-testid="date-picker-nav-next"
         onClick={onNext}
       >
         <ArrowRightSmallIcon />

packages/frontend/component/src/ui/date-picker/calendar/month-picker.tsx

@@ -73,6 +73,8 @@ export const MonthPicker = memo(function MonthPicker(
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
         closeMonthPicker();
         return;
       }
@@ -101,6 +103,7 @@ export const MonthPicker = memo(function MonthPicker(
   const HeaderLeft = useMemo(() => {
     return (
       <button
+        data-testid="month-picker-current-year"
         onClick={closeMonthPicker}
         className={styles.calendarHeaderTriggerButton}
       >
@@ -137,6 +140,7 @@ export const MonthPicker = memo(function MonthPicker(
                       data-current-month={month.isSame(dayjs(), 'month')}
                       onClick={() => onMonthChange(month)}
                       tabIndex={month.isSame(monthCursor, 'month') ? 0 : -1}
+                      aria-label={month.format('YYYY-MM')}
                     >
                       {monthNames.split(',')[month.month()]}
                     </button>

packages/frontend/component/src/ui/date-picker/calendar/year-picker.tsx

@@ -84,6 +84,8 @@ export const YearPicker = memo(function YearPicker(
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
         closeYearPicker();
         return;
       }