| 1 | {"version":3,"file":"CalendarDayGrid.types.js","sourceRoot":"../src/","sources":["components/CalendarDayGrid/CalendarDayGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import { AnimationDirection } from '../Calendar/Calendar.types';\nimport { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';\nimport type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities';\nimport type { ICalendarStrings, IDateFormatting, IDayGridOptions } from '@fluentui/date-time-utilities';\nimport type { IStyle, ITheme, IProcessedStyleSet } from '@fluentui/style-utilities';\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarDayGrid {\n focus(): void;\n}\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarDayGridProps extends IDayGridOptions, IBaseProps<ICalendarDayGrid> {\n /**\n * Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<ICalendarDayGrid>;\n\n /**\n * Customized styles for the component.\n */\n styles?: IStyleFunctionOrObject<ICalendarDayGridStyleProps, ICalendarDayGridStyles>;\n\n /**\n * Theme (provided through customization).\n */\n theme?: ITheme;\n\n /**\n * Additional CSS class(es) to apply to the CalendarDayGrid.\n */\n className?: string;\n\n /**\n * Localized strings to use in the CalendarDayGrid\n */\n strings: ICalendarStrings;\n\n /**\n * The currently selected date\n */\n selectedDate: Date;\n\n /**\n * The currently navigated date\n */\n navigatedDate: Date;\n\n /**\n * Callback issued when a date is selected\n * @param date - The date the user selected\n * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set\n * for the component.\n */\n onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;\n\n /**\n * Callback issued when a date in the calendar is navigated\n * @param date - The date that is navigated to\n * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.\n */\n onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;\n\n /**\n * Callback issued when calendar day is closed\n */\n onDismiss?: () => void;\n\n /**\n * The first day of the week for your locale.\n * @defaultvalue DayOfWeek.Sunday\n */\n firstDayOfWeek: DayOfWeek;\n\n /**\n * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,\n * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values\n * @defaultvalue FirstWeekOfYear.FirstDay\n */\n firstWeekOfYear: FirstWeekOfYear;\n\n /**\n * The date range type indicating how many days should be selected as the user\n * selects days\n * @defaultValue DateRangeType.Day\n */\n dateRangeType: DateRangeType;\n\n /**\n * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day\n * views.\n * @defaultValue 1\n */\n daysToSelectInDayView?: number;\n\n /**\n * Value of today. If unspecified, current time in client machine will be used.\n */\n today?: Date;\n\n /**\n * Whether the calendar should show the week number (weeks 1 to 53) before each week row\n * @defaultvalue false\n */\n showWeekNumbers?: boolean;\n\n /**\n * Apply additional formatting to dates, for example localized date formatting.\n */\n dateTimeFormatter: IDateFormatting;\n\n /**\n * Ref callback for individual days. Allows for customization of the styling, properties, or listeners of the\n * specific day.\n */\n customDayCellRef?: (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => void;\n\n /**\n * How many weeks to show by default. If not provided, will show enough weeks to display the current\n * month, between 4 and 6 depending\n * @defaultvalue undefined\n */\n weeksToShow?: number;\n\n /**\n * If set the Calendar will not allow navigation to or selection of a date earlier than this value.\n */\n minDate?: Date;\n\n /**\n * If set the Calendar will not allow navigation to or selection of a date later than this value.\n */\n maxDate?: Date;\n\n /**\n * If set the Calendar will not allow selection of dates in this array.\n */\n restrictedDates?: Date[];\n\n /**\n * The days that are selectable when `dateRangeType` is WorkWeek.\n * If `dateRangeType` is not WorkWeek this property does nothing.\n * @defaultvalue [Monday,Tuesday,Wednesday,Thursday,Friday]\n */\n workWeekDays?: DayOfWeek[];\n\n /**\n * Whether the close button should be shown or not\n * @defaultvalue false\n */\n showCloseButton?: boolean;\n\n /**\n * Allows all dates and buttons to be focused, including disabled ones\n * @defaultvalue false\n */\n allFocusable?: boolean;\n\n /**\n * The ID of the control that labels this one\n */\n labelledBy?: string;\n\n /**\n * Whether to show days outside the selected month with lighter styles\n * @defaultvalue true\n */\n lightenDaysOutsideNavigatedMonth?: boolean;\n\n /**\n * The cardinal directions for animation to occur during transitions, either horizontal or veritcal\n */\n animationDirection?: AnimationDirection;\n\n /**\n * Optional callback function to mark specific days with a small symbol. Fires when the date range changes,\n * gives the starting and ending displayed dates and expects the list of which days in between should be\n * marked.\n */\n getMarkedDays?: (startingDate: Date, endingDate: Date) => Date[];\n}\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarDayGridStyleProps {\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n\n /**\n * Accept custom classNames\n */\n className?: string;\n\n /**\n * The date range type\n */\n dateRangeType?: DateRangeType;\n\n /**\n * Whether week numbers are being shown\n */\n showWeekNumbers?: boolean;\n\n /**\n * Whether to show days outside the selected month with lighter styles\n */\n lightenDaysOutsideNavigatedMonth?: boolean;\n\n /**\n * Whether grid entering animation should be forwards or backwards\n */\n animateBackwards?: boolean;\n\n /**\n * The cardinal directions for animation to occur during transitions, either horizontal or vertical\n */\n animationDirection?: AnimationDirection;\n}\n\n/**\n * {@docCategory Calendar}\n */\nexport interface ICalendarDayGridStyles {\n /**\n * The style for the root div\n */\n wrapper?: IStyle;\n\n /**\n * The style for the table containing the grid\n */\n table?: IStyle;\n\n /**\n * The style to apply to the grid cells for days\n */\n dayCell?: IStyle;\n\n /**\n * The style to apply to grid cells for days in the selected range\n */\n daySelected?: IStyle;\n\n /**\n * The style to apply to row around weeks\n */\n weekRow?: IStyle;\n\n /**\n * The style to apply to the column headers above the weeks\n */\n weekDayLabelCell?: IStyle;\n\n /**\n * The style to apply to grid cells for week numbers\n */\n weekNumberCell?: IStyle;\n\n /**\n * The style to apply to individual days that are outside the min/max date range\n */\n dayOutsideBounds?: IStyle;\n\n /**\n * The style to apply to individual days that are outside the current month\n */\n dayOutsideNavigatedMonth?: IStyle;\n\n /**\n * The style to apply to the button element within the day cells\n */\n dayButton?: IStyle;\n\n /**\n * The style to apply to the individual button element that matches the \"today\" parameter\n */\n dayIsToday?: IStyle;\n\n /**\n * The style applied to the first placeholder week used during transitions\n */\n firstTransitionWeek?: IStyle;\n\n /**\n * The style applied to the last placeholder week used during transitions\n */\n lastTransitionWeek?: IStyle;\n\n /**\n * The style applied to the marker on days to mark as important\n */\n dayMarker?: IStyle;\n\n /**\n * The styles to apply to days for rounded corners. Can apply multiple to round multiple corners\n */\n topRightCornerDate?: IStyle;\n topLeftCornerDate?: IStyle;\n bottomRightCornerDate?: IStyle;\n bottomLeftCornerDate?: IStyle;\n\n /**\n * The styles to apply to days for focus borders. Can apply multiple if there are multiple focused days\n * around the current focused date\n */\n datesAbove?: IStyle;\n datesBelow?: IStyle;\n datesLeft?: IStyle;\n datesRight?: IStyle;\n}\n"]} |