@mantine/dates/esm/components/Month/Month.mjs.map

Calendars, date and time pickers based on Mantine components

{"version":3,"file":"Month.mjs","names":["classes"],"sources":["../../../src/components/Month/Month.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\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 type MonthCssVariables = {\n  weekNumber: '--wn-fz' | '--wn-size';\n};\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<HTMLButtonElement>, date: DateStringValue) => void;\n\n  /** Called when mouse enters day */\n  __onDayMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;\n\n  /** Called when any keydown event is registered on day, used for arrows navigation */\n  __onDayKeyDown?: (\n    event: React.KeyboardEvent<HTMLButtonElement>,\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. @default 1 – Monday */\n  firstDayOfWeek?: DayOfWeek;\n\n  /** `dayjs` format for weekdays names @default 'dd' */\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<Partial<DayProps>, 'classNames' | 'styles' | 'vars'> & DataAttributes;\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 @default false */\n  hideOutsideDates?: boolean;\n\n  /** Determines whether weekdays row should be hidden @default false */\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 @default true */\n  withCellSpacing?: boolean;\n\n  /** Determines whether today should be highlighted with a border @default false */\n  highlightToday?: boolean;\n\n  /** Determines whether week numbers should be displayed @default false */\n  withWeekNumbers?: boolean;\n\n  /** Determines whether the month should take the full width of its container @default false */\n  fullWidth?: boolean;\n}\n\nexport interface MonthProps\n  extends BoxProps, MonthSettings, StylesApiProps<MonthFactory>, ElementProps<'table'> {\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  vars: MonthCssVariables;\n}>;\n\nconst defaultProps = {\n  withCellSpacing: true,\n} satisfies Partial<MonthProps>;\n\nconst varsResolver = createVarsResolver<MonthFactory>((_, { size }) => ({\n  weekNumber: {\n    '--wn-fz': getFontSize(size),\n    '--wn-size': getSize(size, 'wn-size'),\n  },\n}));\n\nexport const Month = factory<MonthFactory>((_props) => {\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    fullWidth,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<MonthFactory>({\n    name: __staticSelector || 'Month',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\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<MonthFactory>({\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        <td\n          key={date.toString()}\n          {...getStyles('monthCell')}\n          data-with-spacing={withCellSpacing || undefined}\n        >\n          <Day\n            __staticSelector={__staticSelector || 'Month'}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            attributes={attributes}\n            unstyled={unstyled}\n            data-mantine-stop-propagation={__stopPropagation || undefined}\n            highlightToday={highlightToday}\n            renderDay={renderDay}\n            date={date}\n            size={size}\n            weekend={ctx.getWeekendDays(weekendDays).includes(dayjs(date).get('day') as DayOfWeek)}\n            outside={outside}\n            hidden={hideOutsideDates ? outside : false}\n            aria-label={ariaLabel}\n            static={isStatic}\n            fullWidth={fullWidth}\n            disabled={\n              excludeDate?.(date) ||\n              !isBeforeMaxDate(date, toDateString(maxDate)!) ||\n              !isAfterMinDate(date, toDateString(minDate)!)\n            }\n            ref={(node) => {\n              if (node) {\n                __getDayRef?.(rowIndex, cellIndex, node!);\n              }\n            }}\n            {...dayProps}\n            onKeyDown={(event) => {\n              dayProps?.onKeyDown?.(event);\n              __onDayKeyDown?.(event, { rowIndex, cellIndex, date });\n            }}\n            onMouseEnter={(event) => {\n              dayProps?.onMouseEnter?.(event);\n              __onDayMouseEnter?.(event, date);\n            }}\n            onClick={(event) => {\n              dayProps?.onClick?.(event);\n\n              __onDayClick?.(event, date);\n            }}\n            onMouseDown={(event) => {\n              dayProps?.onMouseDown?.(event);\n              __preventFocus && event.preventDefault();\n            }}\n            tabIndex={__preventFocus || !isDateInTabOrder ? -1 : 0}\n          />\n        </td>\n      );\n    });\n\n    return (\n      <tr key={rowIndex} {...getStyles('monthRow')}>\n        {withWeekNumbers && <td {...getStyles('weekNumber')}>{getWeekNumber(row)}</td>}\n        {cells}\n      </tr>\n    );\n  });\n\n  return (\n    <Box\n      component=\"table\"\n      {...getStyles('month')}\n      size={size}\n      data-full-width={fullWidth || undefined}\n      {...others}\n    >\n      {!hideWeekdays && (\n        <thead {...getStyles('monthThead')}>\n          <WeekdaysRow\n            __staticSelector={__staticSelector || 'Month'}\n            locale={locale}\n            firstDayOfWeek={firstDayOfWeek}\n            weekdayFormat={weekdayFormat}\n            withWeekNumbers={withWeekNumbers}\n            size={size}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            attributes={attributes}\n          />\n        </thead>\n      )}\n      <tbody {...getStyles('monthTbody')}>{rows}</tbody>\n    </Box>\n  );\n});\n\nMonth.classes = classes;\nMonth.varsResolver = varsResolver;\nMonth.displayName = '@mantine/dates/Month';\n\nexport namespace Month {\n  export type Props = MonthProps;\n  export type Settings = MonthSettings;\n  export type StylesNames = MonthStylesNames;\n  export type Factory = MonthFactory;\n}\n"],"mappings":"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"}