frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/ContextMenu/stories/Simple.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ContextMenu, type ContextMenuOptions } from 'frappe-ui'
+
+const text = 'Ship it tomorrow?'
+const deleted = ref(false)
+const lastAction = ref('')
+
+const messageActions: ContextMenuOptions = [
+  {
+    label: 'Reply',
+    icon: 'lucide-reply',
+    onClick: () => (lastAction.value = 'Replying to Alex'),
+  },
+  {
+    label: 'Copy text',
+    icon: 'lucide-copy',
+    onClick: () => (lastAction.value = `Copied “${text}”`),
+  },
+  {
+    label: 'Edit',
+    icon: 'lucide-pen',
+    onClick: () => (lastAction.value = 'Editing message'),
+  },
+  {
+    label: 'Delete',
+    icon: 'lucide-trash-2',
+    theme: 'red',
+    onClick: () => {
+      deleted.value = true
+      lastAction.value = 'Message deleted'
+    },
+  },
+]
+
+function restore() {
+  deleted.value = false
+  lastAction.value = ''
+}
+</script>
+
+<template>
+  <div class="grid gap-3 justify-items-center">
+    <ContextMenu :options="messageActions">
+      <div class="flex flex-col gap-1.5">
+        <div class="flex items-baseline gap-2">
+          <span class="text-sm-medium text-ink-gray-8">Alex</span>
+          <span class="text-xs text-ink-gray-4">9:41 AM</span>
+        </div>
+        <div
+          v-if="!deleted"
+          class="w-fit cursor-default select-none rounded-2xl rounded-tl-sm bg-surface-gray-3 px-3.5 py-2 text-sm text-ink-gray-8"
+        >
+          {{ text }}
+        </div>
+        <div v-else class="flex items-center gap-2 text-sm text-ink-gray-4">
+          <span class="italic">Message deleted</span>
+          <button
+            class="font-medium text-ink-gray-6 underline underline-offset-2"
+            @click="restore"
+          >
+            Undo
+          </button>
+        </div>
+      </div>
+    </ContextMenu>
+
+    <div class="text-sm text-ink-gray-5">
+      {{ lastAction || 'Right-click the message' }}
+    </div>
+  </div>
+</template>

package/src/components/ContextMenu/types.ts

@@ -0,0 +1,39 @@
+import type { MenuOptions, MenuSlots } from '../Menu/types'
+
+export type {
+  MenuTheme as ContextMenuTheme,
+  MenuSlotFn as ContextMenuSlotFn,
+  MenuItemSlots as ContextMenuItemSlots,
+  MenuBaseOption as ContextMenuBaseOption,
+  MenuActionOption as ContextMenuActionOption,
+  MenuSwitchOption as ContextMenuSwitchOption,
+  MenuSubmenuOption as ContextMenuSubmenuOption,
+  MenuComponentOption as ContextMenuComponentOption,
+  MenuGroupOption as ContextMenuGroupOption,
+  MenuOption as ContextMenuOption,
+  MenuItem as ContextMenuItem,
+  MenuOptions as ContextMenuOptions,
+  MenuSlotProps as ContextMenuSlotProps,
+  MenuItemSlotProps as ContextMenuItemSlotProps,
+  MenuGroupSlotProps as ContextMenuGroupSlotProps,
+} from '../Menu/types'
+
+export interface ContextMenuTriggerSlotProps {
+  /** Whether the context menu is currently open. */
+  open: boolean
+}
+
+export interface ContextMenuProps {
+  /** Array of context menu options or grouped options. */
+  options?: MenuOptions
+
+  /** Controls the visibility of the context menu. */
+  open?: boolean
+}
+
+export type ContextMenuSlots = Omit<MenuSlots, 'default' | 'trigger'> & {
+  /** The right-clickable region that opens the menu. */
+  default?: (props: ContextMenuTriggerSlotProps) => any
+  /** Explicit trigger slot; same as default. */
+  trigger?: (props: ContextMenuTriggerSlotProps) => any
+}

package/src/components/DatePicker/CalendarPanel.vue

@@ -11,12 +11,8 @@
         icon="lucide-chevron-left"
         @click="emit('prev')"
       />
-      <span class="text-sm font-medium text-ink-gray-7">
-        <span v-if="view === 'date'">
-          {{ months[currentMonth] }} {{ currentYear }}
-        </span>
-        <span v-else-if="view === 'month'">{{ currentYear }}</span>
-        <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
+      <span class="text-sm-medium text-ink-gray-7">
+        {{ months[currentMonth] }} {{ currentYear }}
       </span>
       <Button
         :class="{ invisible: hideNext }"
@@ -30,17 +26,13 @@
       <Button
         variant="ghost"
         size="sm"
-        class="text-sm font-medium text-ink-gray-7"
+        class="text-sm-medium text-ink-gray-7"
         label="cycle-calendar-view"
         @click="emit('cycleView')"
       >
-        <span v-if="view === 'date'">
-          {{ months[currentMonth] }} {{ currentYear }}
-        </span>
-        <span v-else-if="view === 'month'">{{ currentYear }}</span>
-        <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
+        {{ months[currentMonth] }} {{ currentYear }}
       </Button>
-      <div class="flex items-center">
+      <div v-if="view === 'date'" class="flex items-center">
         <Button
           v-if="!hidePrev"
           label="previous"
@@ -73,7 +65,7 @@
         @mouseleave="emit('hoverCell', null)"
       >
         <div
-          class="flex items-center text-xs font-medium uppercase text-ink-gray-4 mb-1 gap-0.5"
+          class="flex items-center text-xs-medium uppercase text-ink-gray-4 mb-1 gap-0.5"
         >
           <div
             v-for="(d, di) in WEEKDAYS"
@@ -99,7 +91,7 @@
               <button
                 v-else
                 type="button"
-                class="flex size-7 items-center justify-center text-sm transition-colors duration-100 focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
+                class="flex size-7 items-center justify-center text-sm transition-colors duration-100"
                 :class="cellClass(cell)"
                 role="gridcell"
                 :aria-selected="ariaSelected(cell)"
@@ -112,9 +104,13 @@
                 :tabindex="isFocusedCell(cell) ? 0 : -1"
                 @mouseenter="emit('hoverCell', cell.date)"
                 @click="!cell.isUnavailable && emit('selectDate', cell.date)"
-                @keydown.left.prevent="shiftFocus(cell.date.subtract(1, 'day'), -1)"
+                @keydown.left.prevent="
+                  shiftFocus(cell.date.subtract(1, 'day'), -1)
+                "
                 @keydown.right.prevent="shiftFocus(cell.date.add(1, 'day'), 1)"
-                @keydown.up.prevent="shiftFocus(cell.date.subtract(7, 'day'), -1)"
+                @keydown.up.prevent="
+                  shiftFocus(cell.date.subtract(7, 'day'), -1)
+                "
                 @keydown.down.prevent="shiftFocus(cell.date.add(7, 'day'), 1)"
                 @keydown.home.prevent="
                   shiftFocus(cell.date.subtract(cell.date.day(), 'day'), -1)
@@ -151,54 +147,60 @@
           </div>
         </div>
       </div>
-      <div
-        v-else-if="view === 'month'"
-        class="grid grid-cols-3 gap-1"
-        role="grid"
-        aria-label="Select month"
-      >
-        <button
-          v-for="(m, i) in months"
-          type="button"
-          :key="m"
-          class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
-          :class="{
-            'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-              i === currentMonth,
-          }"
-          :aria-selected="i === currentMonth ? 'true' : 'false'"
-          @click="emit('selectMonth', i)"
+      <div v-else class="flex h-52 w-52" aria-label="Select month and year">
+        <div
+          ref="yearListRef"
+          class="relative flex w-1/2 flex-col gap-0.5 overflow-y-auto"
+          role="listbox"
+          aria-label="Select year"
         >
-          {{ m.slice(0, 3) }}
-        </button>
-      </div>
-      <div
-        v-else
-        class="grid grid-cols-3 gap-1"
-        role="grid"
-        aria-label="Select year"
-      >
-        <button
-          v-for="y in yearRange"
-          type="button"
-          :key="y"
-          class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
-          :class="{
-            'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
-              y === currentYear,
-          }"
-          :aria-selected="y === currentYear ? 'true' : 'false'"
-          @click="emit('selectYear', y)"
+          <button
+            v-for="y in years"
+            type="button"
+            :key="y"
+            class="w-full text-ink-gray-8 h-7 shrink-0 rounded py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            :class="
+              y === currentYear
+                ? 'bg-surface-gray-2 hover:bg-surface-gray-3'
+                : ' hover:bg-surface-gray-1'
+            "
+            :data-selected="y === currentYear ? '' : undefined"
+            :aria-selected="y === currentYear ? 'true' : 'false'"
+            @click="emit('selectYear', y)"
+          >
+            {{ y }}
+          </button>
+        </div>
+        <div
+          ref="monthListRef"
+          class="relative flex w-1/2 flex-col gap-0.5 overflow-y-auto pl-1.5"
+          role="listbox"
+          aria-label="Select month"
         >
-          {{ y }}
-        </button>
+          <button
+            v-for="(m, i) in months"
+            type="button"
+            :key="m"
+            class="w-full text-ink-gray-8 shrink-0 h-7 rounded py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            :class="
+              i === currentMonth
+                ? 'bg-surface-gray-2 hover:bg-surface-gray-3'
+                : ' hover:bg-surface-gray-1'
+            "
+            :data-selected="i === currentMonth ? '' : undefined"
+            :aria-selected="i === currentMonth ? 'true' : 'false'"
+            @click="emit('selectMonth', i)"
+          >
+            {{ m }}
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type { Dayjs } from 'dayjs/esm'
 import { Button } from '../Button'
 import { months } from './utils'
@@ -220,8 +222,6 @@ interface Props {
   view: ViewMode
   currentYear: number
   currentMonth: number
-  yearRangeStart: number
-  yearRange: number[]
   weeks: CalendarPanelCell[][]
   /** Label for the optional Today/Now action button between prev/next. Empty/undefined hides it. */
   todayLabel?: string
@@ -281,6 +281,44 @@ const emit = defineEmits<{
   (e: 'update:focusedDate', d: Dayjs): void
 }>()
 
+// ── Month-year split view ────────────────────────────────────────────────────
+// The year column is a scrollable list. We bound it to [min, max] when provided
+// (so unreachable years aren't offered) and otherwise fall back to a wide window
+// around the current year. The current year is always included.
+const years = computed<number[]>(() => {
+  const current = props.currentYear
+  const minY = props.min ? Number(props.min.slice(0, 4)) : current - 100
+  const maxY = props.max ? Number(props.max.slice(0, 4)) : current + 10
+  const start = Math.min(minY, current)
+  const end = Math.max(maxY, current)
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+})
+
+const yearListRef = ref<HTMLElement | null>(null)
+const monthListRef = ref<HTMLElement | null>(null)
+
+// Center the active year/month when the split view opens. Manual scrollTop (vs
+// scrollIntoView) keeps the scroll contained to each list and never nudges the
+// popover or page. Relies on the list containers being `relative` so the
+// buttons' `offsetTop` is measured against them.
+function centerSelected(container: HTMLElement | null) {
+  const el = container?.querySelector<HTMLElement>('[data-selected]')
+  if (!container || !el) return
+  container.scrollTop =
+    el.offsetTop - container.clientHeight / 2 + el.clientHeight / 2
+}
+
+watch(
+  () => props.view,
+  (view) => {
+    if (view !== 'monthYear') return
+    nextTick(() => {
+      centerSelected(yearListRef.value)
+      centerSelected(monthListRef.value)
+    })
+  },
+)
+
 // ── Roving tabindex (Reka Calendar pattern) ──────────────────────────────────
 // The focused date is *controlled* — the parent owns the value and feeds it
 // in via `props.focusedDate`. Arrow keys compute a target, emit
@@ -295,9 +333,7 @@ function isFocusedCell(cell: CalendarPanelCell): boolean {
   return !!props.focusedDate && cell.date.isSame(props.focusedDate, 'day')
 }
 
-function pickInitialFocusDate(
-  weeks: CalendarPanelCell[][],
-): Dayjs | null {
+function pickInitialFocusDate(weeks: CalendarPanelCell[][]): Dayjs | null {
   const flat = weeks.flat()
   const selected = flat.find(
     (c) =>
@@ -343,12 +379,7 @@ watch(
 // for an unbounded run of dates would otherwise spin forever.
 const MAX_SKIP_DISABLED_STEPS = 366
 
-function shiftFocus(
-  target: Dayjs,
-  dir: 1 | -1,
-  retried = false,
-  steps = 0,
-) {
+function shiftFocus(target: Dayjs, dir: 1 | -1, retried = false, steps = 0) {
   // Bounds check first — if the target is outside [min, max], the arrow
   // press is a no-op rather than trying to navigate into nothing. Matches
   // Reka's CalendarCellTrigger behavior.
@@ -417,37 +448,48 @@ function ariaLabel(cell: CalendarPanelCell): string {
 }
 
 function cellClass(cell: CalendarPanelCell): Array<string | false> {
-  const inMonthCls = cell.inMonth ? 'text-ink-gray-8' : 'text-ink-gray-3'
-  const todayCls = cell.isToday ? 'font-semibold text-ink-gray-9' : ''
+  // "Today" stays bold whether or not it's selected; its gray text color is kept
+  // separate so it can be dropped on selected cells.
+  const todayFont = cell.isToday ? 'font-semibold' : ''
+  // Resting text color for non-selected cells. Omitted on selected/range cells:
+  // both are `text-*` utilities, so leaving them in would win the CSS source-order
+  // tie against `text-ink-base` and the selected date would render gray.
+  const restingText = [
+    cell.inMonth ? 'text-ink-gray-8' : 'text-ink-gray-3',
+    cell.isToday ? 'text-ink-gray-9' : '',
+  ]
 
   if (cell.isUnavailable) {
-    return [inMonthCls, todayCls, 'rounded opacity-30 cursor-not-allowed']
-  }
-
-  if (cell.isRangeStart || cell.isRangeEnd) {
     return [
-      inMonthCls,
-      todayCls,
-      'rounded bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6 cursor-pointer',
+      'rounded',
+      ...restingText,
+      todayFont,
+      'opacity-30 cursor-not-allowed',
     ]
   }
 
-  if (cell.inRange) {
+  if (cell.isRangeStart || cell.isRangeEnd || cell.isSelected) {
     return [
-      inMonthCls,
-      todayCls,
-      'rounded bg-surface-gray-3 hover:bg-surface-gray-3 cursor-pointer',
+      'rounded',
+      todayFont,
+      'bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9 cursor-pointer',
     ]
   }
 
-  if (cell.isSelected) {
+  if (cell.inRange) {
     return [
-      inMonthCls,
-      todayCls,
-      'rounded bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6 cursor-pointer',
+      'rounded',
+      ...restingText,
+      todayFont,
+      'bg-surface-gray-3 hover:bg-surface-gray-3 cursor-pointer',
     ]
   }
 
-  return [inMonthCls, todayCls, 'rounded hover:bg-surface-gray-2 cursor-pointer']
+  return [
+    'rounded',
+    ...restingText,
+    todayFont,
+    'hover:bg-surface-gray-2 cursor-pointer',
+  ]
 }
 </script>

package/src/components/DatePicker/DatePicker.vue

@@ -59,8 +59,6 @@
           :view="view"
           :current-year="currentYear"
           :current-month="currentMonth"
-          :year-range-start="yearRangeStart"
-          :year-range="yearRange"
           :weeks="weeks"
           today-label="Today"
           :min="props.min"
@@ -122,11 +120,9 @@ const emit = defineEmits<DatePickerEmits>()
 
 const slots = defineSlots<DatePickerSlots>()
 
-const POPOVER_CLASSES =
-  'rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5'
-const contentClass = computed(() =>
-  slots.actions ? `w-fit ${POPOVER_CLASSES}` : `w-56 ${POPOVER_CLASSES}`,
-)
+// Layout only — the elevated shell (rounded/bg/shadow/ring) is owned by
+// PopoverPanel inside PickerShell.
+const contentClass = computed(() => (slots.actions ? 'w-fit' : 'w-56'))
 
 // Cast strips @deprecated markers so internal back-compat reads don't trigger TS6385.
 const dp = props as unknown as LegacyDatePickerProps
@@ -223,8 +219,6 @@ const {
   view,
   currentYear,
   currentMonth,
-  yearRangeStart,
-  yearRange,
   prev,
   next,
   cycleView,

package/src/components/DatePicker/DateRangePicker.vue

@@ -21,7 +21,7 @@
     :readonly="inputReadonly"
     :input-class="dp.inputClass"
     :display-label="displayLabel"
-    content-class="w-fit rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
+    content-class="w-fit"
     @blur="commitInput()"
     @enter="commitInput(true)"
     @open="onShellOpen"
@@ -65,8 +65,6 @@
             :view="view"
             :current-year="currentYear"
             :current-month="currentMonth"
-            :year-range-start="yearRangeStart"
-            :year-range="yearRange"
             :weeks="weeks"
             :today-label="isDualPaneActive ? '' : 'Today'"
             :hide-next="isDualPaneActive"
@@ -91,8 +89,6 @@
             :view="view"
             :current-year="rightYear"
             :current-month="rightMonth"
-            :year-range-start="yearRangeStart"
-            :year-range="yearRange"
             :weeks="rightWeeks"
             hide-prev
             hide-today
@@ -138,7 +134,9 @@ import type {
 } from './types'
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
-  value: () => [],
+  // No default for the deprecated `value`: `[]` is truthy, which would make the
+  // deprecation guard (`useDeprecationWarnings`) fire for every v-model consumer.
+  // `pickIncoming()` already guards on `.length`, so `undefined` is safe.
   modelValue: () => [],
   variant: 'subtle',
   placeholder: 'Select range',
@@ -286,8 +284,6 @@ const {
   view,
   currentYear,
   currentMonth,
-  yearRangeStart,
-  yearRange,
   prev,
   next,
   cycleView,

package/src/components/DatePicker/DateTimePicker.cy.ts

@@ -184,10 +184,12 @@ describe('DateTimePicker', () => {
     })
   })
 
-  it('cycle-calendar-view button switches to month view', () => {
+  it('cycle-calendar-view button opens the month-year split view', () => {
     cy.mount(DateTimePicker)
     cy.get('input').first().dblclick()
     cy.get('[aria-label=cycle-calendar-view]').click()
-    cy.get('[role=grid][aria-label="Select month"]').should('exist')
+    // Split view: scrollable year list beside a scrollable month list.
+    cy.get('[role=listbox][aria-label="Select year"]').should('exist')
+    cy.get('[role=listbox][aria-label="Select month"]').should('exist')
   })
 })

package/src/components/DatePicker/DateTimePicker.vue

@@ -61,8 +61,6 @@
             :view="view"
             :current-year="currentYear"
             :current-month="currentMonth"
-            :year-range-start="yearRangeStart"
-            :year-range="yearRange"
             :weeks="weeks"
             today-label="Now"
             :min="resolvedMin"
@@ -139,11 +137,9 @@ const emit = defineEmits<DateTimePickerEmits>()
 
 const slots = defineSlots<DateTimePickerSlots>()
 
-const POPOVER_CLASSES =
-  'rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5'
-const contentClass = computed(() =>
-  slots.actions ? `w-fit ${POPOVER_CLASSES}` : `w-56 ${POPOVER_CLASSES}`,
-)
+// Layout only — the elevated shell (rounded/bg/shadow/ring) is owned by
+// PopoverPanel inside PickerShell.
+const contentClass = computed(() => (slots.actions ? 'w-fit' : 'w-56'))
 
 const dp = props as unknown as LegacyDatePickerProps
 
@@ -232,8 +228,6 @@ const {
   view,
   currentYear,
   currentMonth,
-  yearRangeStart,
-  yearRange,
   prev,
   next,
   cycleView,

package/src/components/DatePicker/composables.ts

@@ -16,57 +16,37 @@ export function useCalendarView() {
   const currentYear = ref<number>(dayjs().year())
   const currentMonth = ref<number>(dayjs().month())
 
-  const yearRangeStart = computed(
-    () => currentYear.value - (currentYear.value % 12),
-  )
-  const yearRange = computed<number[]>(() =>
-    Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
-  )
-
+  // Prev/next only navigate months in the day grid. The month-year split view
+  // scrolls instead of paging, so it has no prev/next controls.
   function prev(): void {
-    if (view.value === 'date') {
-      const m = monthStart(currentYear.value, currentMonth.value).subtract(
-        1,
-        'month',
-      )
-      currentYear.value = m.year()
-      currentMonth.value = m.month()
-    } else if (view.value === 'month') {
-      currentYear.value -= 1
-    } else {
-      currentYear.value -= 12
-    }
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(
+      1,
+      'month',
+    )
+    currentYear.value = m.year()
+    currentMonth.value = m.month()
   }
 
   function next(): void {
-    if (view.value === 'date') {
-      const m = monthStart(currentYear.value, currentMonth.value).add(
-        1,
-        'month',
-      )
-      currentYear.value = m.year()
-      currentMonth.value = m.month()
-    } else if (view.value === 'month') {
-      currentYear.value += 1
-    } else {
-      currentYear.value += 12
-    }
+    const m = monthStart(currentYear.value, currentMonth.value).add(1, 'month')
+    currentYear.value = m.year()
+    currentMonth.value = m.month()
   }
 
+  // Toggle between the day grid and the month-year split view.
   function cycleView(): void {
-    if (view.value === 'date') view.value = 'month'
-    else if (view.value === 'month') view.value = 'year'
-    else view.value = 'date'
+    view.value = view.value === 'date' ? 'monthYear' : 'date'
   }
 
+  // Picking a month commits the choice and returns to the day grid.
   function selectMonth(i: number): void {
     currentMonth.value = i
     view.value = 'date'
   }
 
+  // Picking a year stays in the split view so the user can then pick a month.
   function selectYear(y: number): void {
     currentYear.value = y
-    view.value = 'month'
   }
 
   function focusOn(d: Dayjs): void {
@@ -82,8 +62,6 @@ export function useCalendarView() {
     view,
     currentYear,
     currentMonth,
-    yearRangeStart,
-    yearRange,
     prev,
     next,
     cycleView,

package/src/components/DatePicker/stories/Range.vue

@@ -232,7 +232,7 @@ const ret = computed(() =>
     <DateRangePicker v-model="flight" dual-pane :min="today">
       <template #trigger="{ togglePopover, isOpen }">
         <div
-          class="grid grid-cols-2 divide-x divide-outline-gray-2 rounded border bg-surface-white text-sm transition-colors"
+          class="grid grid-cols-2 divide-x divide-outline-gray-2 rounded border bg-surface-base text-sm transition-colors"
           :class="
             isOpen
               ? 'border-outline-gray-4 ring-2 ring-outline-gray-2'

package/src/components/DatePicker/types.ts

@@ -303,7 +303,7 @@ export interface DateTimePickerSlots {
   actions?: (props: DateTimePickerActionsSlotProps) => any
 }
 
-export type DatePickerViewMode = 'date' | 'month' | 'year'
+export type DatePickerViewMode = 'date' | 'monthYear'
 
 export interface DatePickerDateObj {
   date: Dayjs