@fluentui/react-calendar-compat 0.3.2 → 0.3.4

package/lib-commonjs/components/CalendarDayGrid/useWeekCornerStyles.styles.raw.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useWeekCornerStyles: function() {
+        return useWeekCornerStyles;
+    },
+    weekCornersClassNames: function() {
+        return weekCornersClassNames;
+    }
+});
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _react = require("@griffel/react");
+const _constants = require("../../utils/constants");
+const _index = require("../../utils/index");
+const weekCornersClassNames = {
+    topRightCornerDate: 'fui-CalendarDayGrid__topRightCornerDate',
+    topLeftCornerDate: 'fui-CalendarDayGrid__topLeftCornerDate',
+    bottomRightCornerDate: 'fui-CalendarDayGrid__bottomRightCornerDate',
+    bottomLeftCornerDate: 'fui-CalendarDayGrid__bottomLeftCornerDate'
+};
+function useWeekCornerStyles(props) {
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    /**
+   *
+   * Section for setting the rounded corner styles on individual day cells. Individual day cells need different
+   * corners to be rounded depending on which date range type and where the cell is located in the current grid.
+   * If we just round all of the corners, there isn't a good overlap and we get gaps between contiguous day boxes
+   * in Edge browser.
+   *
+   */ const getWeekCornerStyles = (initialWeeks)=>{
+        const weekCornersStyled = {};
+        /* need to handle setting all of the corners on arbitrarily shaped blobs
+          __
+       __|A |
+      |B |C |__
+      |D |E |F |
+
+      in this case, A needs top left rounded, top right rounded
+      B needs top left rounded
+      C doesn't need any rounding
+      D needs bottom left rounded
+      E doesn't need any rounding
+      F needs top right rounding
+    */ // cut off the animation transition weeks
+        const weeks = initialWeeks.slice(1, initialWeeks.length - 1);
+        // if there's an item above, lose both top corners. Item below, lose both bottom corners, etc.
+        weeks.forEach((week, weekIndex)=>{
+            week.forEach((day, dayIndex)=>{
+                const above = weeks[weekIndex - 1] && weeks[weekIndex - 1][dayIndex] && isInSameHoverRange(weeks[weekIndex - 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex - 1][dayIndex].isSelected, day.isSelected);
+                const below = weeks[weekIndex + 1] && weeks[weekIndex + 1][dayIndex] && isInSameHoverRange(weeks[weekIndex + 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex + 1][dayIndex].isSelected, day.isSelected);
+                const left = weeks[weekIndex][dayIndex - 1] && isInSameHoverRange(weeks[weekIndex][dayIndex - 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex - 1].isSelected, day.isSelected);
+                const right = weeks[weekIndex][dayIndex + 1] && isInSameHoverRange(weeks[weekIndex][dayIndex + 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex + 1].isSelected, day.isSelected);
+                weekCornersStyled[weekIndex + '_' + dayIndex] = calculateRoundedStyles(above, below, left, right);
+            });
+        });
+        return weekCornersStyled;
+    };
+    const calculateRoundedStyles = (above, below, left, right)=>{
+        const style = [];
+        const roundedTopLeft = !above && !left;
+        const roundedTopRight = !above && !right;
+        const roundedBottomLeft = !below && !left;
+        const roundedBottomRight = !below && !right;
+        if (roundedTopLeft) {
+            style.push(dir === 'rtl' ? weekCornersClassNames.topRightCornerDate : weekCornersClassNames.topLeftCornerDate);
+        }
+        if (roundedTopRight) {
+            style.push(dir === 'rtl' ? weekCornersClassNames.topLeftCornerDate : weekCornersClassNames.topRightCornerDate);
+        }
+        if (roundedBottomLeft) {
+            style.push(dir === 'rtl' ? weekCornersClassNames.bottomRightCornerDate : weekCornersClassNames.bottomLeftCornerDate);
+        }
+        if (roundedBottomRight) {
+            style.push(dir === 'rtl' ? weekCornersClassNames.bottomLeftCornerDate : weekCornersClassNames.bottomRightCornerDate);
+        }
+        return (0, _react.mergeClasses)(...style);
+    };
+    const isInSameHoverRange = (date1, date2, date1Selected, date2Selected)=>{
+        const { dateRangeType, firstDayOfWeek, workWeekDays } = props;
+        // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state
+        const dateRangeHoverType = dateRangeType === _constants.DateRangeType.WorkWeek ? _constants.DateRangeType.Week : dateRangeType;
+        // we do not pass daysToSelectInDayView because we handle setting those styles dyanamically in onMouseOver
+        const dateRange = (0, _index.getDateRangeArray)(date1, dateRangeHoverType, firstDayOfWeek, workWeekDays);
+        if (date1Selected !== date2Selected) {
+            // if one is selected and the other is not, they can't be in the same range
+            return false;
+        } else if (date1Selected && date2Selected) {
+            // if they're both selected at the same time they must be in the same range
+            return true;
+        }
+        // otherwise, both must be unselected, so check the dateRange
+        return dateRange.filter((date)=>date.getTime() === date2.getTime()).length > 0;
+    };
+    return [
+        getWeekCornerStyles,
+        calculateRoundedStyles
+    ];
+}

package/lib-commonjs/components/CalendarDayGrid/useWeekCornerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CalendarDayGrid/useWeekCornerStyles.styles.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { DateRangeType } from '../../utils/constants';\nimport { getDateRangeArray } from '../../utils/index';\nimport { DayInfo } from './CalendarDayGrid';\nimport { CalendarDayGridProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport const weekCornersClassNames = {\n  topRightCornerDate: 'fui-CalendarDayGrid__topRightCornerDate',\n  topLeftCornerDate: 'fui-CalendarDayGrid__topLeftCornerDate',\n  bottomRightCornerDate: 'fui-CalendarDayGrid__bottomRightCornerDate',\n  bottomLeftCornerDate: 'fui-CalendarDayGrid__bottomLeftCornerDate',\n};\n\n/**\n * @internal\n */\nexport interface WeekCorners {\n  [key: string]: string;\n}\n\n/**\n * @internal\n */\nexport function useWeekCornerStyles(props: CalendarDayGridProps) {\n  const { dir } = useFluent_unstable();\n\n  /**\n   *\n   * Section for setting the rounded corner styles on individual day cells. Individual day cells need different\n   * corners to be rounded depending on which date range type and where the cell is located in the current grid.\n   * If we just round all of the corners, there isn't a good overlap and we get gaps between contiguous day boxes\n   * in Edge browser.\n   *\n   */\n  const getWeekCornerStyles = (initialWeeks: DayInfo[][]): WeekCorners => {\n    const weekCornersStyled: { [key: string]: string } = {};\n    /* need to handle setting all of the corners on arbitrarily shaped blobs\n          __\n       __|A |\n      |B |C |__\n      |D |E |F |\n\n      in this case, A needs top left rounded, top right rounded\n      B needs top left rounded\n      C doesn't need any rounding\n      D needs bottom left rounded\n      E doesn't need any rounding\n      F needs top right rounding\n    */\n\n    // cut off the animation transition weeks\n    const weeks = initialWeeks.slice(1, initialWeeks.length - 1);\n\n    // if there's an item above, lose both top corners. Item below, lose both bottom corners, etc.\n    weeks.forEach((week: DayInfo[], weekIndex: number) => {\n      week.forEach((day: DayInfo, dayIndex: number) => {\n        const above =\n          weeks[weekIndex - 1] &&\n          weeks[weekIndex - 1][dayIndex] &&\n          isInSameHoverRange(\n            weeks[weekIndex - 1][dayIndex].originalDate,\n            day.originalDate,\n            weeks[weekIndex - 1][dayIndex].isSelected,\n            day.isSelected,\n          );\n        const below =\n          weeks[weekIndex + 1] &&\n          weeks[weekIndex + 1][dayIndex] &&\n          isInSameHoverRange(\n            weeks[weekIndex + 1][dayIndex].originalDate,\n            day.originalDate,\n            weeks[weekIndex + 1][dayIndex].isSelected,\n            day.isSelected,\n          );\n        const left =\n          weeks[weekIndex][dayIndex - 1] &&\n          isInSameHoverRange(\n            weeks[weekIndex][dayIndex - 1].originalDate,\n            day.originalDate,\n            weeks[weekIndex][dayIndex - 1].isSelected,\n            day.isSelected,\n          );\n        const right =\n          weeks[weekIndex][dayIndex + 1] &&\n          isInSameHoverRange(\n            weeks[weekIndex][dayIndex + 1].originalDate,\n            day.originalDate,\n            weeks[weekIndex][dayIndex + 1].isSelected,\n            day.isSelected,\n          );\n\n        weekCornersStyled[weekIndex + '_' + dayIndex] = calculateRoundedStyles(above, below, left, right);\n      });\n    });\n\n    return weekCornersStyled;\n  };\n\n  const calculateRoundedStyles = (above: boolean, below: boolean, left: boolean, right: boolean): string => {\n    const style = [];\n    const roundedTopLeft = !above && !left;\n    const roundedTopRight = !above && !right;\n    const roundedBottomLeft = !below && !left;\n    const roundedBottomRight = !below && !right;\n\n    if (roundedTopLeft) {\n      style.push(dir === 'rtl' ? weekCornersClassNames.topRightCornerDate : weekCornersClassNames.topLeftCornerDate);\n    }\n    if (roundedTopRight) {\n      style.push(dir === 'rtl' ? weekCornersClassNames.topLeftCornerDate : weekCornersClassNames.topRightCornerDate);\n    }\n    if (roundedBottomLeft) {\n      style.push(\n        dir === 'rtl' ? weekCornersClassNames.bottomRightCornerDate : weekCornersClassNames.bottomLeftCornerDate,\n      );\n    }\n    if (roundedBottomRight) {\n      style.push(\n        dir === 'rtl' ? weekCornersClassNames.bottomLeftCornerDate : weekCornersClassNames.bottomRightCornerDate,\n      );\n    }\n\n    return mergeClasses(...style);\n  };\n\n  const isInSameHoverRange = (date1: Date, date2: Date, date1Selected: boolean, date2Selected: boolean): boolean => {\n    const { dateRangeType, firstDayOfWeek, workWeekDays } = props;\n\n    // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n    const dateRangeHoverType = dateRangeType === DateRangeType.WorkWeek ? DateRangeType.Week : dateRangeType;\n\n    // we do not pass daysToSelectInDayView because we handle setting those styles dyanamically in onMouseOver\n    const dateRange = getDateRangeArray(date1, dateRangeHoverType, firstDayOfWeek, workWeekDays);\n\n    if (date1Selected !== date2Selected) {\n      // if one is selected and the other is not, they can't be in the same range\n      return false;\n    } else if (date1Selected && date2Selected) {\n      // if they're both selected at the same time they must be in the same range\n      return true;\n    }\n\n    // otherwise, both must be unselected, so check the dateRange\n    return dateRange.filter((date: Date) => date.getTime() === date2.getTime()).length > 0;\n  };\n\n  return [getWeekCornerStyles, calculateRoundedStyles] as const;\n}\n"],"names":["useWeekCornerStyles","weekCornersClassNames","topRightCornerDate","topLeftCornerDate","bottomRightCornerDate","bottomLeftCornerDate","props","dir","useFluent_unstable","getWeekCornerStyles","initialWeeks","weekCornersStyled","weeks","slice","length","forEach","week","weekIndex","day","dayIndex","above","isInSameHoverRange","originalDate","isSelected","below","left","right","calculateRoundedStyles","style","roundedTopLeft","roundedTopRight","roundedBottomLeft","roundedBottomRight","push","mergeClasses","date1","date2","date1Selected","date2Selected","dateRangeType","firstDayOfWeek","workWeekDays","dateRangeHoverType","DateRangeType","WorkWeek","Week","dateRange","getDateRangeArray","filter","date","getTime"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCalendarMonthStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCalendarMonthStyles_unstable;
+    }
+});
+const _useCalendarPickerStylesstyles = require("../CalendarPicker/useCalendarPickerStyles.styles");
+const useCalendarMonthStyles_unstable = (props)=>{
+    'use no memo';
+    return (0, _useCalendarPickerStylesstyles.useCalendarPickerStyles_unstable)(props);
+};

package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CalendarMonth/useCalendarMonthStyles.styles.ts"],"sourcesContent":["import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\nimport type { CalendarMonthStyleProps, CalendarMonthStyles } from './CalendarMonth.types';\n\n/**\n *  @internal\n *\n * Apply styling to the CalendarMonth slots based on the state\n */\nexport const useCalendarMonthStyles_unstable = (props: CalendarMonthStyleProps): CalendarMonthStyles => {\n  'use no memo';\n\n  return useCalendarPickerStyles_unstable(props);\n};\n"],"names":["useCalendarMonthStyles_unstable","props","useCalendarPickerStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;+CARoC;AAQ1C,MAAMA,kCAAkC,CAACC;IAC9C;IAEA,OAAOC,IAAAA,+DAAAA,EAAiCD;AAC1C"}

package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js

@@ -0,0 +1,303 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    calendarPickerClassNames: function() {
+        return calendarPickerClassNames;
+    },
+    useCalendarPickerStyles_unstable: function() {
+        return useCalendarPickerStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _animations = require("../../utils/animations");
+const _Calendartypes = require("../Calendar/Calendar.types");
+const calendarPickerClassNames = {
+    root: 'fui-CalendarPicker',
+    headerContainer: 'fui-CalendarPicker__headerContainer',
+    currentItemButton: 'fui-CalendarPicker__currentItemButton',
+    navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',
+    navigationButton: 'fui-CalendarPicker__navigationButton',
+    gridContainer: 'fui-CalendarPicker__gridContainer',
+    buttonRow: 'fui-CalendarPicker__buttonRow',
+    itemButton: 'fui-CalendarPicker__itemButton',
+    current: 'fui-CalendarPicker__current',
+    selected: 'fui-CalendarPicker__selected',
+    disabled: 'fui-CalendarPicker__disabled'
+};
+const useRootStyles = (0, _react.makeStyles)({
+    base: {
+        boxSizing: 'content-box',
+        overflow: 'hidden',
+        padding: '12px',
+        width: '196px'
+    },
+    normalize: {
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        margin: '0',
+        padding: '0'
+    }
+});
+const useHeaderContainerStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'flex'
+    }
+});
+const useCurrentItemButtonStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderStyle('none'),
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        color: 'inherit',
+        flexGrow: 1,
+        fontFamily: 'inherit',
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        overflow: 'visible',
+        padding: '0 4px 0 10px',
+        textAlign: 'left'
+    },
+    animation: {
+        animationDuration: _animations.DURATION_2,
+        animationFillMode: 'both',
+        animationName: _animations.FADE_IN,
+        animationTimingFunction: _animations.EASING_FUNCTION_2
+    },
+    hasHeaderClickCallback: {
+        // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightHover,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightPressed,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
+        }
+    }
+});
+const useNavigationButtonsContainerStyles = (0, _react.makeStyles)({
+    base: {
+        alignItems: 'center',
+        display: 'flex'
+    }
+});
+const useNavigationButtonStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        display: 'block',
+        fontFamily: 'inherit',
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        height: '28px',
+        lineHeight: '28px',
+        minHeight: '28px',
+        minWidth: '28px',
+        overflow: 'visible',
+        padding: '0',
+        position: 'relative',
+        textAlign: 'center',
+        width: '28px',
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightHover,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
+            color: _reacttheme.tokens.colorBrandForegroundOnLightPressed
+        }
+    }
+});
+const useGridContainerStyles = (0, _react.makeStyles)({
+    base: {
+        marginTop: '4px'
+    }
+});
+const useButtonRowStyles = (0, _react.makeStyles)({
+    base: {
+        marginBottom: '16px',
+        '&:last-of-type': {
+            marginBottom: 0
+        }
+    },
+    animation: {
+        animationDuration: _animations.DURATION_3,
+        animationFillMode: 'both',
+        animationTimingFunction: _animations.EASING_FUNCTION_1
+    },
+    horizontalBackward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_RIGHT_IN20
+        ]
+    },
+    horizontalForward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_LEFT_IN20
+        ]
+    },
+    verticalBackward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_DOWN_IN20
+        ]
+    },
+    verticalForward: {
+        animationName: [
+            _animations.FADE_IN,
+            _animations.SLIDE_UP_IN20
+        ]
+    }
+});
+const useItemButtonStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: 'none',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        fontFamily: 'inherit',
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        height: '40px',
+        lineHeight: '40px',
+        minHeight: '40px',
+        minWidth: '40px',
+        margin: '0 12px 0 0',
+        overflow: 'visible',
+        padding: '0',
+        width: '40px',
+        '&:nth-child(4n + 4)': {
+            marginRight: 0
+        },
+        '&:nth-child(n + 9)': {
+            marginBottom: 0
+        },
+        '& div': {
+            fontWeight: _reacttheme.tokens.fontWeightRegular
+        },
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            color: _reacttheme.tokens.colorNeutralForeground1Static,
+            cursor: 'pointer',
+            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window',
+                color: 'WindowText',
+                forcedColorAdjust: 'none',
+                outline: '1px solid Highlight'
+            }
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window',
+                color: 'Highlight',
+                forcedColorAdjust: 'none'
+            }
+        }
+    }
+});
+const useCurrentStyles = (0, _react.makeStyles)({
+    highlightCurrent: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        '@media (forced-colors: active)': {
+            backgroundColor: 'WindowText',
+            color: 'Window',
+            forcedColorAdjust: 'none'
+        },
+        '&:hover, &:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackground,
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'WindowText',
+                color: 'Window',
+                forcedColorAdjust: 'none'
+            }
+        }
+    }
+});
+const useSelectedStyles = (0, _react.makeStyles)({
+    highlightSelected: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedSelected,
+        color: _reacttheme.tokens.colorNeutralForeground1Static,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            color: 'Window',
+            forcedColorAdjust: 'none'
+        },
+        '& div': {
+            fontWeight: _reacttheme.tokens.fontWeightSemibold
+        },
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedSelected,
+            color: _reacttheme.tokens.colorNeutralForeground1Static,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                color: 'Window',
+                forcedColorAdjust: 'none'
+            }
+        },
+        '&:hover:active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed
+        }
+    }
+});
+const useDisabledStyles = (0, _react.makeStyles)({
+    base: {
+        '&, &:disabled, & button': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            pointerEvents: 'none'
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            forcedColorAdjust: 'none'
+        }
+    }
+});
+const useCalendarPickerStyles_unstable = (props)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const headerContainerStyles = useHeaderContainerStyles();
+    const currentItemButtonStyles = useCurrentItemButtonStyles();
+    const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();
+    const navigationButtonStyles = useNavigationButtonStyles();
+    const gridContainerStyles = useGridContainerStyles();
+    const buttonRowStyles = useButtonRowStyles();
+    const itemButtonStyles = useItemButtonStyles();
+    const currentStyles = useCurrentStyles();
+    const selectedStyles = useSelectedStyles();
+    const disabledStyles = useDisabledStyles();
+    const { animateBackwards, animationDirection, className, hasHeaderClickCallback, highlightCurrent, highlightSelected } = props;
+    return {
+        root: (0, _react.mergeClasses)(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),
+        headerContainer: (0, _react.mergeClasses)(calendarPickerClassNames.headerContainer, headerContainerStyles.base),
+        currentItemButton: (0, _react.mergeClasses)(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, animateBackwards !== undefined && currentItemButtonStyles.animation, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),
+        navigationButtonsContainer: (0, _react.mergeClasses)(calendarPickerClassNames.navigationButtonsContainer, navigationButtonsContainerStyles.base),
+        navigationButton: (0, _react.mergeClasses)(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),
+        gridContainer: (0, _react.mergeClasses)(calendarPickerClassNames.gridContainer, gridContainerStyles.base),
+        buttonRow: (0, _react.mergeClasses)(calendarPickerClassNames.buttonRow, buttonRowStyles.base, buttonRowStyles.animation, animateBackwards !== undefined && (animationDirection === _Calendartypes.AnimationDirection.Horizontal ? animateBackwards ? buttonRowStyles.horizontalBackward : buttonRowStyles.horizontalForward : animateBackwards ? buttonRowStyles.verticalBackward : buttonRowStyles.verticalForward)),
+        itemButton: (0, _react.mergeClasses)(calendarPickerClassNames.itemButton, itemButtonStyles.base),
+        selected: (0, _react.mergeClasses)(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),
+        current: (0, _react.mergeClasses)(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),
+        disabled: (0, _react.mergeClasses)(calendarPickerClassNames.disabled, disabledStyles.base)
+    };
+};

package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CalendarPicker/useCalendarPickerStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport {\n  DURATION_2,\n  DURATION_3,\n  EASING_FUNCTION_1,\n  EASING_FUNCTION_2,\n  FADE_IN,\n  SLIDE_DOWN_IN20,\n  SLIDE_LEFT_IN20,\n  SLIDE_RIGHT_IN20,\n  SLIDE_UP_IN20,\n} from '../../utils/animations';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarPickerStyles, CalendarPickerStyleProps } from './CalendarPicker.types';\n\n/**\n * @internal\n */\nexport const calendarPickerClassNames: SlotClassNames<CalendarPickerStyles> = {\n  root: 'fui-CalendarPicker',\n  headerContainer: 'fui-CalendarPicker__headerContainer',\n  currentItemButton: 'fui-CalendarPicker__currentItemButton',\n  navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',\n  navigationButton: 'fui-CalendarPicker__navigationButton',\n  gridContainer: 'fui-CalendarPicker__gridContainer',\n  buttonRow: 'fui-CalendarPicker__buttonRow',\n  itemButton: 'fui-CalendarPicker__itemButton',\n  current: 'fui-CalendarPicker__current',\n  selected: 'fui-CalendarPicker__selected',\n  disabled: 'fui-CalendarPicker__disabled',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'content-box',\n    overflow: 'hidden',\n    padding: '12px',\n    width: '196px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n});\n\nconst useHeaderContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n  },\n});\n\nconst useCurrentItemButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: 'inherit',\n    flexGrow: 1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    overflow: 'visible',\n    padding: '0 4px 0 10px',\n    textAlign: 'left',\n  },\n  animation: {\n    animationDuration: DURATION_2,\n    animationFillMode: 'both',\n    animationName: FADE_IN,\n    animationTimingFunction: EASING_FUNCTION_2,\n  },\n  hasHeaderClickCallback: {\n    // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n  },\n});\n\nconst useNavigationButtonsContainerStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'flex',\n  },\n});\n\nconst useNavigationButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground1,\n    display: 'block',\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '28px',\n    lineHeight: '28px',\n    minHeight: '28px',\n    minWidth: '28px',\n    overflow: 'visible',\n    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      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n    },\n  },\n});\n\nconst useGridContainerStyles = makeStyles({\n  base: {\n    marginTop: '4px',\n  },\n});\n\nconst useButtonRowStyles = makeStyles({\n  base: {\n    marginBottom: '16px',\n    '&:last-of-type': {\n      marginBottom: 0,\n    },\n  },\n  animation: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n  horizontalBackward: {\n    animationName: [FADE_IN, SLIDE_RIGHT_IN20],\n  },\n  horizontalForward: {\n    animationName: [FADE_IN, SLIDE_LEFT_IN20],\n  },\n  verticalBackward: {\n    animationName: [FADE_IN, SLIDE_DOWN_IN20],\n  },\n  verticalForward: {\n    animationName: [FADE_IN, SLIDE_UP_IN20],\n  },\n});\n\nconst useItemButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground3,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '40px',\n    lineHeight: '40px',\n    minHeight: '40px',\n    minWidth: '40px',\n    margin: '0 12px 0 0',\n    overflow: 'visible',\n    padding: '0',\n    width: '40px',\n\n    '&:nth-child(4n + 4)': {\n      marginRight: 0,\n    },\n    '&:nth-child(n + 9)': {\n      marginBottom: 0,\n    },\n    '& div': {\n      fontWeight: tokens.fontWeightRegular,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorNeutralForeground1Static,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        color: 'WindowText',\n        forcedColorAdjust: 'none',\n        outline: '1px solid Highlight',\n      },\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n});\n\nconst useCurrentStyles = makeStyles({\n  highlightCurrent: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    fontWeight: tokens.fontWeightSemibold,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      color: 'Window',\n      forcedColorAdjust: 'none',\n    },\n    '&:hover, &:hover:active': {\n      backgroundColor: tokens.colorBrandBackground,\n      color: tokens.colorNeutralForegroundOnBrand,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'WindowText',\n        color: 'Window',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n});\n\nconst useSelectedStyles = makeStyles({\n  highlightSelected: {\n    backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    color: tokens.colorNeutralForeground1Static,\n    fontWeight: tokens.fontWeightSemibold,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      color: 'Window',\n      forcedColorAdjust: 'none',\n    },\n    '& div': {\n      fontWeight: tokens.fontWeightSemibold,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n      color: tokens.colorNeutralForeground1Static,\n\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'Window',\n        forcedColorAdjust: 'none',\n      },\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n    },\n  },\n});\n\nconst useDisabledStyles = makeStyles({\n  base: {\n    '&, &:disabled, & button': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      forcedColorAdjust: 'none',\n    },\n  },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarPicker slots based on the state\n */\nexport const useCalendarPickerStyles_unstable = (props: CalendarPickerStyleProps): CalendarPickerStyles => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const headerContainerStyles = useHeaderContainerStyles();\n  const currentItemButtonStyles = useCurrentItemButtonStyles();\n  const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();\n  const navigationButtonStyles = useNavigationButtonStyles();\n  const gridContainerStyles = useGridContainerStyles();\n  const buttonRowStyles = useButtonRowStyles();\n  const itemButtonStyles = useItemButtonStyles();\n  const currentStyles = useCurrentStyles();\n  const selectedStyles = useSelectedStyles();\n  const disabledStyles = useDisabledStyles();\n\n  const {\n    animateBackwards,\n    animationDirection,\n    className,\n    hasHeaderClickCallback,\n    highlightCurrent,\n    highlightSelected,\n  } = props;\n\n  return {\n    root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),\n    headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),\n    currentItemButton: mergeClasses(\n      calendarPickerClassNames.currentItemButton,\n      currentItemButtonStyles.base,\n      animateBackwards !== undefined && currentItemButtonStyles.animation,\n      hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback,\n    ),\n    navigationButtonsContainer: mergeClasses(\n      calendarPickerClassNames.navigationButtonsContainer,\n      navigationButtonsContainerStyles.base,\n    ),\n    navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),\n    gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),\n    buttonRow: mergeClasses(\n      calendarPickerClassNames.buttonRow,\n      buttonRowStyles.base,\n      buttonRowStyles.animation,\n      animateBackwards !== undefined &&\n        (animationDirection === AnimationDirection.Horizontal\n          ? animateBackwards\n            ? buttonRowStyles.horizontalBackward\n            : buttonRowStyles.horizontalForward\n          : animateBackwards\n          ? buttonRowStyles.verticalBackward\n          : buttonRowStyles.verticalForward),\n    ),\n    itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),\n    selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),\n    current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),\n    disabled: mergeClasses(calendarPickerClassNames.disabled, disabledStyles.base),\n  };\n};\n"],"names":["calendarPickerClassNames","useCalendarPickerStyles_unstable","root","headerContainer","currentItemButton","navigationButtonsContainer","navigationButton","gridContainer","buttonRow","itemButton","current","selected","disabled","useRootStyles","makeStyles","base","boxSizing","overflow","padding","width","normalize","boxShadow","margin","useHeaderContainerStyles","display","useCurrentItemButtonStyles","backgroundColor","tokens","colorTransparentBackground","shorthands","borderStyle","borderRadius","borderRadiusMedium","color","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","textAlign","animation","animationDuration","DURATION_2","animationFillMode","animationName","FADE_IN","animationTimingFunction","EASING_FUNCTION_2","hasHeaderClickCallback","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useNavigationButtonsContainerStyles","alignItems","useNavigationButtonStyles","border","colorNeutralForeground1","fontSizeBase200","height","lineHeight","minHeight","minWidth","position","useGridContainerStyles","marginTop","useButtonRowStyles","marginBottom","DURATION_3","EASING_FUNCTION_1","horizontalBackward","SLIDE_RIGHT_IN20","horizontalForward","SLIDE_LEFT_IN20","verticalBackward","SLIDE_DOWN_IN20","verticalForward","SLIDE_UP_IN20","useItemButtonStyles","colorNeutralForeground3","marginRight","fontWeightRegular","colorNeutralForeground1Static","forcedColorAdjust","useCurrentStyles","highlightCurrent","colorBrandBackground","colorNeutralForegroundOnBrand","useSelectedStyles","highlightSelected","colorBrandBackgroundInvertedSelected","useDisabledStyles","colorNeutralForegroundDisabled","pointerEvents","props","rootStyles","headerContainerStyles","currentItemButtonStyles","navigationButtonsContainerStyles","navigationButtonStyles","gridContainerStyles","buttonRowStyles","itemButtonStyles","currentStyles","selectedStyles","disabledStyles","animateBackwards","animationDirection","className","mergeClasses","undefined","AnimationDirection","Horizontal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCalendarYearStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCalendarYearStyles_unstable;
+    }
+});
+const _useCalendarPickerStylesstyles = require("../CalendarPicker/useCalendarPickerStyles.styles");
+const useCalendarYearStyles_unstable = (props)=>{
+    'use no memo';
+    return (0, _useCalendarPickerStylesstyles.useCalendarPickerStyles_unstable)(props);
+};

package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CalendarYear/useCalendarYearStyles.styles.ts"],"sourcesContent":["import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\nimport type { CalendarYearStyleProps, CalendarYearStyles } from './CalendarYear.types';\n\n/**\n * @internal\n *\n * Apply styling to the CalendarYear slots based on the state\n */\nexport const useCalendarYearStyles_unstable = (props: CalendarYearStyleProps): CalendarYearStyles => {\n  'use no memo';\n\n  return useCalendarPickerStyles_unstable(props);\n};\n"],"names":["useCalendarYearStyles_unstable","props","useCalendarPickerStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;+CARoC;AAQ1C,MAAMA,iCAAiC,CAACC;IAC7C;IAEA,OAAOC,IAAAA,+DAAAA,EAAiCD;AAC1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-calendar-compat",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Calendar compat component for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,7 +22,7 @@
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.2",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",