{"version":3,"file":"Month.mjs","sources":["../../../src/components/Month/Month.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { ControlKeydownPayload, DateLabelFormat, DateStringValue, DayOfWeek } from '../../types';\nimport { toDateString } from '../../utils';\nimport { useDatesContext } from '../DatesProvider';\nimport { Day, DayProps, DayStylesNames, RenderDay } from '../Day';\nimport { WeekdaysRow } from '../WeekdaysRow';\nimport { getDateInTabOrder } from './get-date-in-tab-order/get-date-in-tab-order';\nimport { getMonthDays } from './get-month-days/get-month-days';\nimport { getWeekNumber } from './get-week-number/get-week-number';\nimport { isAfterMinDate } from './is-after-min-date/is-after-min-date';\nimport { isBeforeMaxDate } from './is-before-max-date/is-before-max-date';\nimport { isSameMonth } from './is-same-month/is-same-month';\nimport classes from './Month.module.css';\n\nexport type MonthStylesNames =\n | 'month'\n | 'weekday'\n | 'weekdaysRow'\n | 'monthRow'\n | 'month'\n | 'monthThead'\n | 'monthTbody'\n | 'monthCell'\n | 'weekNumber'\n | DayStylesNames;\n\nexport interface MonthSettings {\n /** Determines whether propagation for Escape key should be stopped */\n __stopPropagation?: boolean;\n\n /** Prevents focus shift when buttons are clicked */\n __preventFocus?: boolean;\n\n /** Called when day is clicked with click event and date */\n __onDayClick?: (event: React.MouseEvent, date: DateStringValue) => void;\n\n /** Called when mouse enters day */\n __onDayMouseEnter?: (event: React.MouseEvent, date: DateStringValue) => void;\n\n /** Called when any keydown event is registered on day, used for arrows navigation */\n __onDayKeyDown?: (\n event: React.KeyboardEvent,\n payload: ControlKeydownPayload\n ) => void;\n\n /** Assigns ref of every day based on its position in the table, used for arrows navigation */\n __getDayRef?: (rowIndex: number, cellIndex: number, node: HTMLButtonElement) => void;\n\n /** dayjs locale, the default value is defined by `DatesProvider` */\n locale?: string;\n\n /** Number 0-6, where 0 – Sunday and 6 – Saturday. 1 – Monday by default */\n firstDayOfWeek?: DayOfWeek;\n\n /** dayjs format for weekdays names, `'dd'` by default */\n weekdayFormat?: DateLabelFormat;\n\n /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider` */\n weekendDays?: DayOfWeek[];\n\n /** Passes props down to `Day` components */\n getDayProps?: (\n date: DateStringValue\n ) => Omit, 'classNames' | 'styles' | 'vars'>;\n\n /** Callback function to determine whether the day should be disabled */\n excludeDate?: (date: DateStringValue) => boolean;\n\n /** Minimum possible date, in `YYYY-MM-DD` format */\n minDate?: DateStringValue | Date;\n\n /** Maximum possible date, in `YYYY-MM-DD` format */\n maxDate?: DateStringValue | Date;\n\n /** Controls day value rendering */\n renderDay?: RenderDay;\n\n /** Determines whether outside dates should be hidden, `false` by default */\n hideOutsideDates?: boolean;\n\n /** Determines whether weekdays row should be hidden, `false` by default */\n hideWeekdays?: boolean;\n\n /** Assigns `aria-label` to `Day` components based on date */\n getDayAriaLabel?: (date: DateStringValue) => string;\n\n /** Controls size */\n size?: MantineSize;\n\n /** Determines whether controls should be separated by space, `true` by default */\n withCellSpacing?: boolean;\n\n /** Determines whether today should be highlighted with a border, `false` by default */\n highlightToday?: boolean;\n\n /** Determines whether week numbers should be displayed, `false` by default */\n withWeekNumbers?: boolean;\n}\n\nexport interface MonthProps\n extends BoxProps,\n MonthSettings,\n StylesApiProps,\n ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Month to display, value `YYYY-MM-DD` */\n month: DateStringValue;\n\n /** Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way */\n static?: boolean;\n}\n\nexport type MonthFactory = Factory<{\n props: MonthProps;\n ref: HTMLTableElement;\n stylesNames: MonthStylesNames;\n}>;\n\nconst defaultProps = {\n withCellSpacing: true,\n} satisfies Partial;\n\nconst varsResolver = createVarsResolver((_, { size }) => ({\n weekNumber: {\n '--wn-fz': getFontSize(size),\n '--wn-size': getSize(size, 'wn-size'),\n },\n}));\n\nexport const Month = factory((_props, ref) => {\n const props = useProps('Month', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n __staticSelector,\n locale,\n firstDayOfWeek,\n weekdayFormat,\n month,\n weekendDays,\n getDayProps,\n excludeDate,\n minDate,\n maxDate,\n renderDay,\n hideOutsideDates,\n hideWeekdays,\n getDayAriaLabel,\n static: isStatic,\n __getDayRef,\n __onDayKeyDown,\n __onDayClick,\n __onDayMouseEnter,\n __preventFocus,\n __stopPropagation,\n withCellSpacing,\n size,\n highlightToday,\n withWeekNumbers,\n ...others\n } = props;\n\n const getStyles = useStyles({\n name: __staticSelector || 'Month',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n rootSelector: 'month',\n });\n\n const ctx = useDatesContext();\n const dates = getMonthDays({\n month,\n firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n consistentWeeks: ctx.consistentWeeks,\n });\n\n const dateInTabOrder = getDateInTabOrder({\n dates,\n minDate: toDateString(minDate) as DateStringValue,\n maxDate: toDateString(maxDate) as DateStringValue,\n getDayProps,\n excludeDate,\n hideOutsideDates,\n month,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({\n classNames,\n styles,\n props,\n });\n\n const rows = dates.map((row, rowIndex) => {\n const cells = row.map((date, cellIndex) => {\n const outside = !isSameMonth(date, month);\n const ariaLabel =\n getDayAriaLabel?.(date) ||\n dayjs(date)\n .locale(locale || ctx.locale)\n .format('D MMMM YYYY');\n const dayProps = getDayProps?.(date);\n const isDateInTabOrder = dayjs(date).isSame(dateInTabOrder, 'date');\n\n return (\n \n