@fluentui/react-calendar-compat 0.0.0-nightly-20231018-0416.1 → 0.0.1

package/lib/components/CalendarDay/CalendarDay.js

@@ -0,0 +1,111 @@
+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, ()=>({
+            focus () {
+                var _dayGrid_current_focus, _dayGrid_current;
+                (_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)=>(ev)=>{
+        switch(ev.key){
+            case Enter:
+                callback === null || callback === void 0 ? void 0 : callback();
+                break;
+        }
+    };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"names":["React","Enter","ArrowDownRegular","ArrowUpRegular","DismissRegular","useId","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","current","strings","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","monthAndYearId","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","div","root","header","aria-label","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","span","id","aria-live","aria-atomic","CalendarDayNavigationButtons","weeksToShow","labelledBy","displayName","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","button","headerIconButton","disabledStyle","aria-disabled","title","prevMonthAriaLabel","months","getMonth","nextMonthAriaLabel","closeButtonAriaLabel","callback","ev","key"],"mappings":"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"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/CalendarDay/index.js

@@ -0,0 +1,3 @@
+export * from './CalendarDay';
+export * from './CalendarDay.types';
+export * from './useCalendarDayStyles.styles';

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

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

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: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{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{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{animation-duration:0.267s;}", ".fywypte{animation-fill-mode:both;}", ".f1h7u52p{animation-name:f5j8bii;}", ".fjq4c94{animation-timing-function:cubic-bezier(.1,.25,.75,.9);}"],
+  k: ["@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{align-self:flex-end;}", ".ftuwxu6{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":["useCalendarDayStyles.styles.js"],"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';\n/**\n * @internal\n */ export const calendarDayClassNames = {\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};\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});\nconst useHeaderStyles = makeStyles({\n    base: {\n        display: 'inline-flex',\n        height: '28px',\n        lineHeight: '44px',\n        position: 'relative',\n        width: '100%'\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});\nconst useMonthComponentsStyles = makeStyles({\n    base: {\n        alignSelf: 'flex-end',\n        display: 'inline-flex'\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        '&: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});\nconst useDisabledStyleStyles = makeStyles({\n    base: {\n        '&, &:disabled, & button': {\n            color: tokens.colorNeutralForegroundDisabled,\n            pointerEvents: 'none'\n        }\n    }\n});\n/**\n * @internal\n *\n * Apply styling to the CalendarDay slots based on the state\n */ export const useCalendarDayStyles_unstable = (props)=>{\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    const { className, headerIsClickable, showWeekNumbers } = props;\n    return {\n        root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),\n        header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n        monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),\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,168 @@
+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, ()=>({
+            focus () {
+                var _navigatedDayRef_current_focus, _navigatedDayRef_current;
+                (_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;
+}

package/lib/components/CalendarDayGrid/CalendarDayGrid.js.map

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

package/lib/components/CalendarDayGrid/CalendarDayGrid.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarDayGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utils';\nimport type { CalendarStrings, DateFormatting, DayGridOptions } from '../../utils';\n\n/**\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport interface ICalendarDayGrid {\n  focus(): void;\n}\n\n/**\n * @internal\n */\nexport interface CalendarDayGridProps extends DayGridOptions {\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?: React.RefObject<ICalendarDayGrid>;\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: CalendarStrings;\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   * @default 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   * @default 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   * @default 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   * @default 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   * @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   * 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: CalendarDayGridStyles) => 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   * @default 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   * @default [Monday,Tuesday,Wednesday,Thursday,Friday]\n   */\n  workWeekDays?: DayOfWeek[];\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   * 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   * @default 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 * @internal\n */\nexport interface CalendarDayGridStyleProps {\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 * @internal\n */\nexport interface CalendarDayGridStyles {\n  /**\n   * The style for the root div\n   */\n  wrapper?: string;\n\n  /**\n   * The style for the table containing the grid\n   */\n  table?: string;\n\n  /**\n   * The style to apply to the grid cells for days\n   */\n  dayCell?: string;\n\n  /**\n   * The style to apply to grid cells for days in the selected range\n   */\n  daySelected?: string;\n\n  /**\n   * The style to apply to row around weeks\n   */\n  weekRow?: string;\n\n  /**\n   * The style to apply to the column headers above the weeks\n   */\n  weekDayLabelCell?: string;\n\n  /**\n   * The style to apply to grid cells for week numbers\n   */\n  weekNumberCell?: string;\n\n  /**\n   * The style to apply to individual days that are outside the min/max date range\n   */\n  dayOutsideBounds?: string;\n\n  /**\n   * The style to apply to individual days that are outside the current month\n   */\n  dayOutsideNavigatedMonth?: string;\n\n  /**\n   * The style to apply to the button element within the day cells\n   */\n  dayButton?: string;\n\n  /**\n   * The style to apply to the individual button element that matches the \"today\" parameter\n   */\n  dayIsToday?: string;\n\n  /**\n   * The style applied to the first placeholder week used during transitions\n   */\n  firstTransitionWeek?: string;\n\n  /**\n   * The style applied to the last placeholder week used during transitions\n   */\n  lastTransitionWeek?: string;\n\n  /**\n   * The style applied to the marker on days to mark as important\n   */\n  dayMarker?: string;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}