@fluentui/react-datepicker-compat 0.0.0-nightly-20230512-0423.1 → 0.1.0

package/lib/components/Calendar/useCalendarStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","mc9l5x","a9b677","normalize","E5pizo","B7ck84d","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","monthPickerNotVisible","Beiy3e4","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","d","useDividerStyles","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bekrc4i","vrafjx","Bhzewxz","useMonthPickerWrapperStyles","useGoTodayButtonStyles","qb2dma","De3pzq","icvyot","oivjwe","wvpqe5","B5kzvoi","sj55zd","Bahqtrf","Be2twd7","Bqenvij","Bg96gwp","B68tc82","Bmxbyg5","seuwu7","Jwef8y","Bi91k9c","eoavqd","B2d53fq","Dyrjrp","Be90el1","h","useLiveRegionStyles","B4j52fo","Bn0qgzm","ibv6hh","qhf8xq","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"sources":["../../../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarStyles, CalendarStyleProps } from './Calendar.types';\n\n/**\n * @internal\n */\nexport const calendarClassNames: SlotClassNames<CalendarStyles> = {\n  root: 'fui-Calendar',\n  divider: 'fui-Calendar__divider',\n  goTodayButton: 'fui-Calendar__goTodayButton',\n  monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n  liveRegion: 'fui-Calendar__liveRegion',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'flex',\n    width: '220px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n  },\n  monthPickerNotVisible: {\n    flexDirection: 'column',\n  },\n  dayAndMonthPickersVisible: {\n    width: '440px',\n  },\n  dayPickerVisibleAndWeekNumbersShown: {\n    width: '250px',\n  },\n  dayAndMonthPickersVisibleAndWeekNumbersShown: {\n    width: '470px',\n  },\n});\n\nconst useDividerStyles = makeStyles({\n  base: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    ...shorthands.borderRight('1px', 'solid'),\n    top: 0,\n  },\n});\n\nconst useMonthPickerWrapperStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nconst useGoTodayButtonStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    bottom: 0,\n    boxSizing: 'content-box',\n    color: tokens.colorNeutralForeground1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '30px',\n    lineHeight: '30px',\n    marginRight: '16px',\n    marginTop: '3px',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0, '4px'),\n\n    '& div': {\n      fontSize: tokens.fontSizeBase200,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorBrandForeground1,\n      cursor: 'pointer',\n    },\n    '&:hover:active': {\n      color: tokens.colorBrandForeground2,\n    },\n    '&:disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n  },\n});\n\nconst useLiveRegionStyles = makeStyles({\n  base: {\n    ...shorthands.border(0),\n    height: '1px',\n    ...shorthands.margin('-1px'),\n    ...shorthands.overflow('hidden'),\n    ...shorthands.padding(0),\n    position: 'absolute',\n    width: '1px',\n  },\n});\n\n/**\n * @internal\n *\n * Apply styling to the Calendar slots based on the state\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n  const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n  const goTodayButtonStyles = useGoTodayButtonStyles();\n  const liveRegionStyles = useLiveRegionStyles();\n\n  const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarClassNames.root,\n      rootStyles.base,\n      rootStyles.normalize,\n      !isMonthPickerVisible && rootStyles.monthPickerNotVisible,\n      isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible,\n      isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown,\n      isDayPickerVisible &&\n        isMonthPickerVisible &&\n        showWeekNumbers &&\n        rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown,\n      className,\n    ),\n    divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n    monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n    goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n    liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base),\n  };\n};\n"],"mappings":"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"}

package/lib/components/CalendarDay/CalendarDay.js

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { Enter } from '@fluentui/keyboard-keys';
+import { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';
+import { useId } from '@fluentui/react-utilities';
+import { mergeClasses } from '@griffel/react';
+import { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';
+import { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';
+import { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';
+/**
+ * @internal
+ */
+export const CalendarDay = props => {
+  const dayGrid = React.useRef(null);
+  React.useImperativeHandle(props.componentRef, () => {
+    return {
+      focus() {
+        var _dayGrid_current, _dayGrid_current_focus;
+        (_dayGrid_current = dayGrid.current) === null || _dayGrid_current === void 0 ? void 0 : (_dayGrid_current_focus = _dayGrid_current.focus) === null || _dayGrid_current_focus === void 0 ? void 0 : _dayGrid_current_focus.call(_dayGrid_current);
+      }
+    };
+  }, []);
+  const {
+    strings,
+    navigatedDate,
+    dateTimeFormatter,
+    className,
+    onHeaderSelect,
+    showSixWeeksByDefault,
+    minDate,
+    maxDate,
+    restrictedDates,
+    onNavigateDate,
+    showWeekNumbers,
+    dateRangeType,
+    animationDirection
+  } = props;
+  const monthAndYearId = useId();
+  const classNames = useCalendarDayStyles_unstable({
+    className,
+    headerIsClickable: !!onHeaderSelect,
+    showWeekNumbers,
+    animationDirection
+  });
+  const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);
+  const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';
+  const headerAriaLabel = strings.yearPickerHeaderAriaLabel ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear) : monthAndYear;
+  const {
+    ...propsWithoutStyles
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames.root
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames.header
+  }, /*#__PURE__*/React.createElement(HeaderButtonComponentType, {
+    "aria-label": onHeaderSelect ? headerAriaLabel : undefined,
+    className: classNames.monthAndYear,
+    onClick: onHeaderSelect,
+    tabIndex: onHeaderSelect ? 0 : -1,
+    onKeyDown: onButtonKeyDown(onHeaderSelect),
+    type: "button"
+  }, /*#__PURE__*/React.createElement("span", {
+    id: monthAndYearId,
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, monthAndYear)), /*#__PURE__*/React.createElement(CalendarDayNavigationButtons, {
+    ...props,
+    classNames: classNames
+  })), /*#__PURE__*/React.createElement(CalendarDayGrid, {
+    ...propsWithoutStyles,
+    componentRef: dayGrid,
+    strings: strings,
+    navigatedDate: navigatedDate,
+    weeksToShow: showSixWeeksByDefault ? 6 : undefined,
+    dateTimeFormatter: dateTimeFormatter,
+    minDate: minDate,
+    maxDate: maxDate,
+    restrictedDates: restrictedDates,
+    onNavigateDate: onNavigateDate,
+    labelledBy: monthAndYearId,
+    dateRangeType: dateRangeType
+  }));
+};
+CalendarDay.displayName = 'CalendarDay';
+const CalendarDayNavigationButtons = props => {
+  const {
+    minDate,
+    maxDate,
+    navigatedDate,
+    allFocusable,
+    strings,
+    showCloseButton,
+    classNames,
+    onNavigateDate,
+    onDismiss
+  } = props;
+  const onSelectNextMonth = () => {
+    onNavigateDate(addMonths(navigatedDate, 1), false);
+  };
+  const onSelectPrevMonth = () => {
+    onNavigateDate(addMonths(navigatedDate, -1), false);
+  };
+  // determine if previous/next months are in bounds
+  const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;
+  const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;
+  // use aria-disabled instead of disabled so focus is not lost
+  // when a prev/next button becomes disabled after being clicked
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames.monthComponents
+  }, /*#__PURE__*/React.createElement("button", {
+    className: mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle),
+    tabIndex: prevMonthInBounds ? undefined : allFocusable ? 0 : -1,
+    "aria-disabled": !prevMonthInBounds,
+    onClick: prevMonthInBounds ? onSelectPrevMonth : undefined,
+    onKeyDown: prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined,
+    title: strings.prevMonthAriaLabel ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()] : undefined,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(ArrowUpRegular, null)), /*#__PURE__*/React.createElement("button", {
+    className: mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle),
+    tabIndex: nextMonthInBounds ? undefined : allFocusable ? 0 : -1,
+    "aria-disabled": !nextMonthInBounds,
+    onClick: nextMonthInBounds ? onSelectNextMonth : undefined,
+    onKeyDown: nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined,
+    title: strings.nextMonthAriaLabel ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()] : undefined,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(ArrowDownRegular, null)), showCloseButton && /*#__PURE__*/React.createElement("button", {
+    className: classNames.headerIconButton,
+    onClick: onDismiss,
+    onKeyDown: onButtonKeyDown(onDismiss),
+    title: strings.closeButtonAriaLabel,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(DismissRegular, null)));
+};
+CalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';
+const onButtonKeyDown = callback => {
+  return ev => {
+    switch (ev.key) {
+      case Enter:
+        callback === null || callback === void 0 ? void 0 : callback();
+        break;
+    }
+  };
+};
+//# sourceMappingURL=CalendarDay.js.map

package/lib/components/CalendarDay/CalendarDay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Enter","ArrowDownRegular","ArrowUpRegular","DismissRegular","useId","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","_dayGrid_current","_dayGrid_current_focus","current","call","strings","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","monthAndYearId","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","createElement","root","header","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","id","CalendarDayNavigationButtons","weeksToShow","labelledBy","displayName","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","headerIconButton","disabledStyle","title","prevMonthAriaLabel","months","getMonth","nextMonthAriaLabel","closeButtonAriaLabel","callback","ev","key"],"sources":["../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';\nimport { useId } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';\nimport { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';\nimport { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';\nimport type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const CalendarDay: React.FunctionComponent<CalendarDayProps> = props => {\n  const dayGrid = React.useRef<ICalendarDayGrid>(null);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        dayGrid.current?.focus?.();\n      },\n    }),\n    [],\n  );\n\n  const {\n    strings,\n    navigatedDate,\n    dateTimeFormatter,\n    className,\n    onHeaderSelect,\n    showSixWeeksByDefault,\n    minDate,\n    maxDate,\n    restrictedDates,\n    onNavigateDate,\n    showWeekNumbers,\n    dateRangeType,\n    animationDirection,\n  } = props;\n  const monthAndYearId = useId();\n\n  const classNames = useCalendarDayStyles_unstable({\n    className,\n    headerIsClickable: !!onHeaderSelect,\n    showWeekNumbers,\n    animationDirection,\n  });\n\n  const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n  const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n  const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n    ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear)\n    : monthAndYear;\n\n  const { ...propsWithoutStyles } = props;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.header}>\n        <HeaderButtonComponentType\n          aria-label={onHeaderSelect ? headerAriaLabel : undefined}\n          className={classNames.monthAndYear}\n          onClick={onHeaderSelect}\n          tabIndex={onHeaderSelect ? 0 : -1} // prevent focus if there's no action for the button\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          type=\"button\"\n        >\n          <span id={monthAndYearId} aria-live=\"polite\" aria-atomic=\"true\">\n            {monthAndYear}\n          </span>\n        </HeaderButtonComponentType>\n        <CalendarDayNavigationButtons {...props} classNames={classNames} />\n      </div>\n      <CalendarDayGrid\n        {...propsWithoutStyles}\n        componentRef={dayGrid}\n        strings={strings}\n        navigatedDate={navigatedDate!}\n        weeksToShow={showSixWeeksByDefault ? 6 : undefined}\n        dateTimeFormatter={dateTimeFormatter!}\n        minDate={minDate}\n        maxDate={maxDate}\n        restrictedDates={restrictedDates}\n        onNavigateDate={onNavigateDate}\n        labelledBy={monthAndYearId}\n        dateRangeType={dateRangeType}\n      />\n    </div>\n  );\n};\nCalendarDay.displayName = 'CalendarDay';\n\ninterface CalendarDayNavigationButtonsProps extends CalendarDayProps {\n  classNames: Record<keyof CalendarDayStyles, string>;\n}\n\nconst CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): JSX.Element => {\n  const {\n    minDate,\n    maxDate,\n    navigatedDate,\n    allFocusable,\n    strings,\n    showCloseButton,\n    classNames,\n    onNavigateDate,\n    onDismiss,\n  } = props;\n\n  const onSelectNextMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, -1), false);\n  };\n\n  // determine if previous/next months are in bounds\n  const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n  const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\n  // use aria-disabled instead of disabled so focus is not lost\n  // when a prev/next button becomes disabled after being clicked\n  return (\n    <div className={classNames.monthComponents}>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle)}\n        tabIndex={prevMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!prevMonthInBounds}\n        onClick={prevMonthInBounds ? onSelectPrevMonth : undefined}\n        onKeyDown={prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined}\n        title={\n          strings.prevMonthAriaLabel\n            ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        <ArrowUpRegular />\n      </button>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle)}\n        tabIndex={nextMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!nextMonthInBounds}\n        onClick={nextMonthInBounds ? onSelectNextMonth : undefined}\n        onKeyDown={nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined}\n        title={\n          strings.nextMonthAriaLabel\n            ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        <ArrowDownRegular />\n      </button>\n      {showCloseButton && (\n        <button\n          className={classNames.headerIconButton}\n          onClick={onDismiss}\n          onKeyDown={onButtonKeyDown(onDismiss)}\n          title={strings.closeButtonAriaLabel}\n          type=\"button\"\n        >\n          <DismissRegular />\n        </button>\n      )}\n    </div>\n  );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n  (callback?: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) =>\n  (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback?.();\n        break;\n    }\n  };\n"],"mappings":"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"}

package/lib/components/CalendarDay/CalendarDay.types.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+//# sourceMappingURL=CalendarDay.types.js.map

package/lib/components/CalendarDay/CalendarDay.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React"],"sources":["../../../src/components/CalendarDay/CalendarDay.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { CalendarStrings, DateFormatting } from '../../utils';\nimport type { CalendarDayGridProps, CalendarDayGridStyleProps } from '../CalendarDayGrid/CalendarDayGrid.types';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ICalendarDay {\n  focus(): void;\n}\n\nexport interface CalendarDayProps extends CalendarDayGridProps {\n  /**\n   * Optional callback to access the ICalendarDay interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<ICalendarDay>;\n\n  /**\n   * Additional CSS class(es) to apply to the CalendarDay.\n   */\n  className?: string;\n\n  /**\n   * Localized strings to use in the Calendar\n   */\n  strings: CalendarStrings;\n\n  /**\n   * The currently navigated date\n   */\n  navigatedDate: Date;\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   * Callback function when the header is selected\n   */\n  onHeaderSelect?: () => void;\n\n  /**\n   * Whether the calendar should show the week number (weeks 1 to 53) before each week row\n   * @default false\n   */\n  showWeekNumbers?: boolean;\n\n  /**\n   * Apply additional formatting to dates, for example localized date formatting.\n   */\n  dateTimeFormatter: DateFormatting;\n\n  /**\n   * Whether the calendar should show 6 weeks by default.\n   * @default false\n   */\n  showSixWeeksByDefault?: boolean;\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   * Whether the close button should be shown or not\n   * @default false\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Allows all dates and buttons to be focused, including disabled ones\n   * @default false\n   */\n  allFocusable?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CalendarDayStyleProps extends CalendarDayGridStyleProps {\n  /**\n   * Accept custom classNames\n   */\n  className?: string;\n\n  /**\n   * Whether the header is clickable\n   */\n  headerIsClickable?: boolean;\n\n  /**\n   * Whether week numbers are being shown\n   */\n  showWeekNumbers?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface CalendarDayStyles {\n  /**\n   * Style for the root element.\n   */\n  root: string;\n\n  /**\n   * The style for the header button and forward/back navigation button container\n   */\n  header: string;\n\n  /**\n   * The style for the title text inside the header\n   */\n  monthAndYear: string;\n\n  /**\n   * The style for the wrapper around forward/back/close buttons\n   */\n  monthComponents: string;\n\n  /**\n   * The style for the forward/back/close buttons\n   */\n  headerIconButton: string;\n\n  /**\n   * The style to apply for disabled elements\n   */\n  disabledStyle: string;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/CalendarDay/index.js

@@ -0,0 +1,4 @@
+export * from './CalendarDay';
+export * from './CalendarDay.types';
+export * from './useCalendarDayStyles.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/CalendarDay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/CalendarDay/index.ts"],"sourcesContent":["export * from './CalendarDay';\nexport * from './CalendarDay.types';\nexport * from './useCalendarDayStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/CalendarDay/useCalendarDayStyles.styles.js

@@ -0,0 +1,180 @@
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';
+/**
+ * @internal
+ */
+export const calendarDayClassNames = {
+  root: 'fui-CalendarDay',
+  header: 'fui-CalendarDay__header',
+  monthAndYear: 'fui-CalendarDay__monthAndYear',
+  monthComponents: 'fui-CalendarDay__monthComponents',
+  headerIconButton: 'fui-CalendarDay__headerIconButton',
+  disabledStyle: 'fui-CalendarDay__disabledStyle'
+};
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    B7ck84d: "f1e4lqlz",
+    z8tnut: "f1kcqot9",
+    z189sj: ["f11qrl6u", "fjlbh76"],
+    Byoj8tv: "fpe6lb7",
+    uwmqm3: ["fjlbh76", "f11qrl6u"],
+    a9b677: "f4m2ahc"
+  },
+  normalize: {
+    E5pizo: "f1couhl3",
+    B7ck84d: "f1ewtqcl",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f11qmguv", "f1tyq0we"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"],
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  },
+  showWeekNumbers: {
+    a9b677: "fl524qk"
+  }
+}, {
+  d: [".f1e4lqlz{box-sizing:content-box;}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".f4m2ahc{width:196px;}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fl524qk{width:226px;}"]
+});
+const useHeaderStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "ftuwxu6",
+    Bqenvij: "fxldao9",
+    Bg96gwp: "f1vzymgo",
+    qhf8xq: "f10pi13n",
+    a9b677: "fly5x3f"
+  }
+}, {
+  d: [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fxldao9{height:28px;}", ".f1vzymgo{line-height:44px;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}"]
+});
+const useMonthAndYearStyles = /*#__PURE__*/__styles({
+  base: {
+    Bt984gj: "f122n59",
+    De3pzq: "f1c21dwh",
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Bbmb7ep: ["f2i1086", "f1rlsnju"],
+    Beyfa6y: ["f1rlsnju", "f2i1086"],
+    B7oj6ja: ["f1stktl2", "f1127022"],
+    Btl43ni: ["f1127022", "f1stktl2"],
+    sj55zd: "f19n0e5",
+    mc9l5x: "f14t3ns0",
+    Bh6795r: "fqerorx",
+    Bahqtrf: "f1mo0ibp",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f336tjw",
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f8wuabp", "fycuoez"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["frdkuqy", "f81rol6"],
+    fsow6f: ["f1o700av", "fes3tcz"],
+    ygn44y: "f1cmbuwj",
+    Huce71: "fz5stix"
+  },
+  animation: {
+    vin17d: "fhsqnsn",
+    Bf5fcs: "fywypte",
+    Bv12yb3: "f1h7u52p",
+    Ezkn3b: "fjq4c94"
+  },
+  headerIsClickable: {
+    Jwef8y: "f121v1wq",
+    Bi91k9c: "feu1g3u",
+    eoavqd: "f8491dx",
+    iro3zm: "f6r9z65"
+  }
+}, {
+  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f2i1086{border-bottom-right-radius:2px;}", ".f1rlsnju{border-bottom-left-radius:2px;}", ".f1stktl2{border-top-right-radius:2px;}", ".f1127022{border-top-left-radius:2px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14t3ns0{display:inline-block;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1mo0ibp{font-family:inherit;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f336tjw{line-height:28px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1g0x7ka{padding-top:0;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1qch9an{padding-bottom:0;}", ".frdkuqy{padding-left:10px;}", ".f81rol6{padding-right:10px;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".fhsqnsn{-webkit-animation-duration:0.267s;animation-duration:0.267s;}", ".fywypte{-webkit-animation-fill-mode:both;animation-fill-mode:both;}", ".f1h7u52p{-webkit-animation-name:f5j8bii;animation-name:f5j8bii;}", ".fjq4c94{-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);}"],
+  k: ["@-webkit-keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}"],
+  h: [".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f8491dx:hover{cursor:pointer;}", ".f6r9z65:hover:active{background-color:var(--colorBrandBackground2);}"]
+});
+const useMonthComponentsStyles = /*#__PURE__*/__styles({
+  base: {
+    qb2dma: "fpydfdc",
+    mc9l5x: "ftuwxu6"
+  }
+}, {
+  d: [".fpydfdc{-webkit-align-self:flex-end;-ms-flex-item-align:flex-end;align-self:flex-end;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}"]
+});
+const useHeaderIconButtonStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1c21dwh",
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Bbmb7ep: ["f2i1086", "f1rlsnju"],
+    Beyfa6y: ["f1rlsnju", "f2i1086"],
+    B7oj6ja: ["f1stktl2", "f1127022"],
+    Btl43ni: ["f1127022", "f1stktl2"],
+    sj55zd: "f11d4kpn",
+    mc9l5x: "ftgm304",
+    Bahqtrf: "f1mo0ibp",
+    Be2twd7: "fy9rknc",
+    Bqenvij: "fxldao9",
+    Bg96gwp: "f336tjw",
+    B68tc82: "f1mtd64y",
+    Bmxbyg5: "f1y7q3j9",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    qhf8xq: "f10pi13n",
+    fsow6f: "f17mccla",
+    a9b677: "f1w9dchk",
+    Jwef8y: "f18a0fwf",
+    Bi91k9c: "f3sdaeg",
+    eoavqd: "f8491dx",
+    Dwtyhm: "f14gx60i",
+    ukgb2i: "f1o3croz",
+    pugfm4: "f11jyo21",
+    iro3zm: "f1wvkgvo",
+    B2d53fq: "f1wdoaqd"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f2i1086{border-bottom-right-radius:2px;}", ".f1rlsnju{border-bottom-left-radius:2px;}", ".f1stktl2{border-top-right-radius:2px;}", ".f1127022{border-top-left-radius:2px;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".ftgm304{display:block;}", ".f1mo0ibp{font-family:inherit;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fxldao9{height:28px;}", ".f336tjw{line-height:28px;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f10pi13n{position:relative;}", ".f17mccla{text-align:center;}", ".f1w9dchk{width:28px;}"],
+  h: [".f18a0fwf:hover{background-color:var(--colorBrandBackgroundInvertedHover);}", ".f3sdaeg:hover{color:var(--colorBrandForegroundOnLightHover);}", ".f8491dx:hover{cursor:pointer;}", ".f14gx60i:hover{outline-width:1px;}", ".f1o3croz:hover{outline-style:solid;}", ".f11jyo21:hover{outline-color:var(--colorTransparentStroke);}", ".f1wvkgvo:hover:active{background-color:var(--colorBrandBackgroundInvertedPressed);}", ".f1wdoaqd:hover:active{color:var(--colorBrandForegroundOnLightPressed);}"]
+});
+const useDisabledStyleStyles = /*#__PURE__*/__styles({
+  base: {
+    Bg33ivm: "f1oelgmz",
+    t69wg0: "fhh1ekj"
+  }
+}, {
+  d: [".f1oelgmz,.f1oelgmz:disabled,.f1oelgmz button{color:var(--colorNeutralForegroundDisabled);}", ".fhh1ekj,.fhh1ekj:disabled,.fhh1ekj button{pointer-events:none;}"]
+});
+/**
+ * @internal
+ *
+ * Apply styling to the CalendarDay slots based on the state
+ */
+export const useCalendarDayStyles_unstable = props => {
+  const rootStyles = useRootStyles();
+  const headerStyles = useHeaderStyles();
+  const monthAndYearStyles = useMonthAndYearStyles();
+  const monthComponentsStyles = useMonthComponentsStyles();
+  const headerIconButtonStyles = useHeaderIconButtonStyles();
+  const disabledStyleStyles = useDisabledStyleStyles();
+  const {
+    className,
+    headerIsClickable,
+    showWeekNumbers
+  } = props;
+  return {
+    root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
+    header: mergeClasses(calendarDayClassNames.header, headerStyles.base),
+    monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),
+    monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
+    headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
+    disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)
+  };
+};
+//# sourceMappingURL=useCalendarDayStyles.styles.js.map

package/lib/components/CalendarDay/useCalendarDayStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","DURATION_2","EASING_FUNCTION_2","FADE_IN","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","B7ck84d","z8tnut","z189sj","Byoj8tv","uwmqm3","a9b677","normalize","E5pizo","B6of3ja","t21cq0","jrapky","Frg6f3","showWeekNumbers","d","useHeaderStyles","mc9l5x","Bqenvij","Bg96gwp","qhf8xq","useMonthAndYearStyles","Bt984gj","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","Bh6795r","Bahqtrf","Be2twd7","Bhrd7zp","B68tc82","Bmxbyg5","fsow6f","ygn44y","Huce71","animation","vin17d","Bf5fcs","Bv12yb3","Ezkn3b","headerIsClickable","Jwef8y","Bi91k9c","eoavqd","iro3zm","k","h","useMonthComponentsStyles","qb2dma","useHeaderIconButtonStyles","Dwtyhm","ukgb2i","pugfm4","B2d53fq","useDisabledStyleStyles","Bg33ivm","t69wg0","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"sources":["../../../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayStyles, CalendarDayStyleProps } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {\n  root: 'fui-CalendarDay',\n  header: 'fui-CalendarDay__header',\n  monthAndYear: 'fui-CalendarDay__monthAndYear',\n  monthComponents: 'fui-CalendarDay__monthComponents',\n  headerIconButton: 'fui-CalendarDay__headerIconButton',\n  disabledStyle: 'fui-CalendarDay__disabledStyle',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'content-box',\n    ...shorthands.padding('12px'),\n    width: '196px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n  },\n  showWeekNumbers: {\n    width: '226px',\n  },\n});\n\nconst useHeaderStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    height: '28px',\n    lineHeight: '44px',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nconst useMonthAndYearStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    ...shorthands.borderRadius('2px'),\n    color: tokens.colorNeutralForeground1,\n    display: 'inline-block',\n    flexGrow: 1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: '28px',\n    ...shorthands.overflow('hidden'),\n    ...shorthands.padding(0, '4px', 0, '10px'),\n    textAlign: 'left',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  animation: {\n    animationDuration: DURATION_2,\n    animationFillMode: 'both',\n    animationName: FADE_IN,\n    animationTimingFunction: EASING_FUNCTION_2,\n  },\n  headerIsClickable: {\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n      color: tokens.colorNeutralForeground1Hover,\n      cursor: 'pointer',\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n  },\n});\n\nconst useMonthComponentsStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    display: 'inline-flex',\n  },\n});\n\nconst useHeaderIconButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    ...shorthands.borderRadius('2px'),\n    color: tokens.colorNeutralForeground3,\n    display: 'block',\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '28px',\n    lineHeight: '28px',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    position: 'relative',\n    textAlign: 'center',\n    width: '28px',\n\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n    },\n  },\n});\n\nconst useDisabledStyleStyles = makeStyles({\n  base: {\n    '&, &:disabled, & button': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n  },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarDay slots based on the state\n */\nexport const useCalendarDayStyles_unstable = (props: CalendarDayStyleProps): CalendarDayStyles => {\n  const rootStyles = useRootStyles();\n  const headerStyles = useHeaderStyles();\n  const monthAndYearStyles = useMonthAndYearStyles();\n  const monthComponentsStyles = useMonthComponentsStyles();\n  const headerIconButtonStyles = useHeaderIconButtonStyles();\n  const disabledStyleStyles = useDisabledStyleStyles();\n\n  const { className, headerIsClickable, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarDayClassNames.root,\n      rootStyles.normalize,\n      rootStyles.base,\n      showWeekNumbers && rootStyles.showWeekNumbers,\n      className,\n    ),\n    header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n    monthAndYear: mergeClasses(\n      calendarDayClassNames.monthAndYear,\n      monthAndYearStyles.base,\n      monthAndYearStyles.animation,\n      headerIsClickable && monthAndYearStyles.headerIsClickable,\n    ),\n    monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n    headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n    disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base),\n  };\n};\n"],"mappings":"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"}

package/lib/components/CalendarDayGrid/CalendarDayGrid.js

@@ -0,0 +1,183 @@
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useId } from '@fluentui/react-utilities';
+import { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType } from '../../utils';
+import { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';
+import { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';
+import { CalendarGridRow } from './CalendarGridRow';
+import { useWeeks } from './useWeeks';
+import { useWeekCornerStyles } from './useWeekCornerStyles.styles';
+import { mergeClasses } from '@griffel/react';
+function useDayRefs() {
+  const daysRef = React.useRef({});
+  const getSetRefCallback = dayKey => element => {
+    if (element === null) {
+      delete daysRef.current[dayKey];
+    } else {
+      daysRef.current[dayKey] = element;
+    }
+  };
+  return [daysRef, getSetRefCallback];
+}
+function useAnimateBackwards(weeks) {
+  const previousNavigatedDateRef = React.useRef();
+  React.useEffect(() => {
+    previousNavigatedDateRef.current = weeks[0][0].originalDate;
+  });
+  const previousNavigatedDate = previousNavigatedDateRef.current;
+  if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {
+    return undefined;
+  } else if (previousNavigatedDate <= weeks[0][0].originalDate) {
+    return false;
+  } else {
+    return true;
+  }
+}
+export const CalendarDayGrid = props => {
+  const navigatedDayRef = React.useRef(null);
+  const activeDescendantId = useId();
+  const onSelectDate = selectedDate => {
+    var _props_onSelectDate, _props_onNavigateDate;
+    const {
+      firstDayOfWeek,
+      minDate,
+      maxDate,
+      workWeekDays,
+      daysToSelectInDayView,
+      restrictedDates
+    } = props;
+    const restrictedDatesOptions = {
+      minDate,
+      maxDate,
+      restrictedDates
+    };
+    let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);
+    dateRange = getBoundedDateRange(dateRange, minDate, maxDate);
+    dateRange = dateRange.filter(d => {
+      return !isRestrictedDate(d, restrictedDatesOptions);
+    });
+    (_props_onSelectDate = props.onSelectDate) === null || _props_onSelectDate === void 0 ? void 0 : _props_onSelectDate.call(props, selectedDate, dateRange);
+    (_props_onNavigateDate = props.onNavigateDate) === null || _props_onNavigateDate === void 0 ? void 0 : _props_onNavigateDate.call(props, selectedDate, true);
+  };
+  const [daysRef, getSetRefCallback] = useDayRefs();
+  const weeks = useWeeks(props, onSelectDate, getSetRefCallback);
+  const animateBackwards = useAnimateBackwards(weeks);
+  const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);
+  React.useImperativeHandle(props.componentRef, () => {
+    return {
+      focus() {
+        var _navigatedDayRef_current, _navigatedDayRef_current_focus;
+        (_navigatedDayRef_current = navigatedDayRef.current) === null || _navigatedDayRef_current === void 0 ? void 0 : (_navigatedDayRef_current_focus = _navigatedDayRef_current.focus) === null || _navigatedDayRef_current_focus === void 0 ? void 0 : _navigatedDayRef_current_focus.call(_navigatedDayRef_current);
+      }
+    };
+  }, []);
+  /**
+  *
+  * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support
+  * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks
+  * to set classnames on all relevant child refs to apply the styling
+  *
+  */
+  const getDayInfosInRangeOfDay = dayToCompare => {
+    // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state
+    const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);
+    // gets all the dates for the given date range type that are in the same date range as the given day
+    const dateRange = getDateRangeArray(dayToCompare.originalDate, dateRangeHoverType, props.firstDayOfWeek, props.workWeekDays, props.daysToSelectInDayView).map(date => date.getTime());
+    // gets all the day refs for the given dates
+    const dayInfosInRange = weeks.reduce((accumulatedValue, currentWeek) => {
+      return accumulatedValue.concat(currentWeek.filter(weekDay => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1));
+    }, []);
+    return dayInfosInRange;
+  };
+  const getRefsFromDayInfos = dayInfosInRange => {
+    let dayRefs = [];
+    dayRefs = dayInfosInRange.map(dayInfo => daysRef.current[dayInfo.key]);
+    return dayRefs;
+  };
+  const {
+    dateRangeType,
+    showWeekNumbers,
+    labelledBy,
+    lightenDaysOutsideNavigatedMonth,
+    animationDirection
+  } = props;
+  const classNames = useCalendarDayGridStyles_unstable({
+    animateBackwards,
+    animationDirection,
+    dateRangeType,
+    lightenDaysOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,
+    showWeekNumbers
+  });
+  // When the month is highlighted get the corner dates so that styles can be added to them
+  const weekCorners = getWeekCornerStyles(weeks);
+  const partialWeekProps = {
+    weeks,
+    navigatedDayRef,
+    calculateRoundedStyles,
+    activeDescendantId,
+    classNames,
+    weekCorners,
+    getDayInfosInRangeOfDay,
+    getRefsFromDayInfos
+  };
+  const arrowNavigationAttributes = useArrowNavigationGroup({
+    axis: 'grid'
+  });
+  return /*#__PURE__*/React.createElement("table", {
+    className: mergeClasses(classNames.table, props.className),
+    "aria-multiselectable": "false",
+    "aria-labelledby": labelledBy,
+    "aria-activedescendant": activeDescendantId,
+    role: "grid",
+    ...arrowNavigationAttributes
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement(CalendarMonthHeaderRow, {
+    ...props,
+    classNames: classNames,
+    weeks: weeks
+  }), /*#__PURE__*/React.createElement(CalendarGridRow, {
+    ...props,
+    ...partialWeekProps,
+    week: weeks[0],
+    weekIndex: -1,
+    rowClassName: classNames.firstTransitionWeek,
+    "aria-role": "presentation",
+    ariaHidden: true
+  }), weeks.slice(1, weeks.length - 1).map((week, weekIndex) => /*#__PURE__*/React.createElement(CalendarGridRow, {
+    ...props,
+    ...partialWeekProps,
+    key: weekIndex,
+    week: week,
+    weekIndex: weekIndex,
+    rowClassName: classNames.weekRow
+  })), /*#__PURE__*/React.createElement(CalendarGridRow, {
+    ...props,
+    ...partialWeekProps,
+    week: weeks[weeks.length - 1],
+    weekIndex: -2,
+    rowClassName: classNames.lastTransitionWeek,
+    "aria-role": "presentation",
+    ariaHidden: true
+  })));
+};
+CalendarDayGrid.displayName = 'CalendarDayGrid';
+/**
+ * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous
+ * work weeks, we'll just show week view instead.
+ */
+function getDateRangeTypeToUse(dateRangeType, workWeekDays) {
+  if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {
+    const sortedWWDays = workWeekDays.slice().sort();
+    let isContiguous = true;
+    for (let i = 1; i < sortedWWDays.length; i++) {
+      if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {
+        isContiguous = false;
+        break;
+      }
+    }
+    if (!isContiguous || workWeekDays.length === 0) {
+      return DateRangeType.Week;
+    }
+  }
+  return dateRangeType;
+}
+//# sourceMappingURL=CalendarDayGrid.js.map