npm - @fluentui/react-calendar-compat - Versions diffs - 0.0.0-nightly-20250716-0406.1 → 0.0.0-nightly-20250718-0405.1 - Mend

@fluentui/react-calendar-compat 0.0.0-nightly-20250716-0406.1 → 0.0.0-nightly-20250718-0405.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayStyles, CalendarDayStyleProps } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {\n root: 'fui-CalendarDay',\n header: 'fui-CalendarDay__header',\n monthAndYear: 'fui-CalendarDay__monthAndYear',\n monthComponents: 'fui-CalendarDay__monthComponents',\n headerIconButton: 'fui-CalendarDay__headerIconButton',\n disabledStyle: 'fui-CalendarDay__disabledStyle',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n padding: '12px',\n width: '196px',\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0',\n },\n showWeekNumbers: {\n width: '226px',\n },\n});\n\nconst useHeaderStyles = makeStyles({\n base: {\n display: 'inline-flex',\n height: '28px',\n lineHeight: '44px',\n position: 'relative',\n width: '100%',\n },\n});\n\nconst useMonthAndYearStyles = makeStyles({\n base: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\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 overflow: 'hidden',\n 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.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 useMonthComponentsStyles = makeStyles({\n base: {\n alignSelf: 'flex-end',\n display: 'inline-flex',\n },\n});\n\nconst useHeaderIconButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '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 '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n },\n },\n});\n\nconst useDisabledStyleStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n },\n },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarDay slots based on the state\n */\nexport const useCalendarDayStyles_unstable = (props: CalendarDayStyleProps): CalendarDayStyles => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const headerStyles = useHeaderStyles();\n const monthAndYearStyles = useMonthAndYearStyles();\n const monthComponentsStyles = useMonthComponentsStyles();\n const headerIconButtonStyles = useHeaderIconButtonStyles();\n const disabledStyleStyles = useDisabledStyleStyles();\n\n const { className, headerIsClickable, showWeekNumbers } = props;\n\n return {\n root: mergeClasses(\n calendarDayClassNames.root,\n rootStyles.normalize,\n rootStyles.base,\n showWeekNumbers && rootStyles.showWeekNumbers,\n className,\n ),\n header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n monthAndYear: mergeClasses(\n calendarDayClassNames.monthAndYear,\n monthAndYearStyles.base,\n monthAndYearStyles.animation,\n headerIsClickable && monthAndYearStyles.headerIsClickable,\n ),\n monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base),\n };\n};\n"],"names":["calendarDayClassNames","useCalendarDayStyles_unstable","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","makeStyles","base","boxSizing","padding","width","normalize","boxShadow","margin","showWeekNumbers","useHeaderStyles","display","height","lineHeight","position","useMonthAndYearStyles","alignItems","backgroundColor","tokens","colorTransparentBackground","shorthands","borderStyle","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","overflow","textAlign","textOverflow","whiteSpace","animation","animationDuration","DURATION_2","animationFillMode","animationName","FADE_IN","animationTimingFunction","EASING_FUNCTION_2","headerIsClickable","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useMonthComponentsStyles","alignSelf","useHeaderIconButtonStyles","colorNeutralForeground3","fontSizeBase200","useDisabledStyleStyles","colorNeutralForegroundDisabled","pointerEvents","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,408 @@
+"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, {
+    calendarDayGridClassNames: function() {
+        return calendarDayGridClassNames;
+    },
+    extraCalendarDayGridClassNames: function() {
+        return extraCalendarDayGridClassNames;
+    },
+    useCalendarDayGridStyles_unstable: function() {
+        return useCalendarDayGridStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _utils = require("../../utils");
+const _Calendartypes = require("../Calendar/Calendar.types");
+const _useWeekCornerStylesstyles = require("./useWeekCornerStyles.styles");
+const _reacttabster = require("@fluentui/react-tabster");
+const calendarDayGridClassNames = {
+    wrapper: 'fui-CalendarDayGrid__wrapper',
+    table: 'fui-CalendarDayGrid__table',
+    dayCell: 'fui-CalendarDayGrid__dayCell',
+    daySelected: 'fui-CalendarDayGrid__daySelected',
+    daySingleSelected: 'fui-CalendarDayGrid__daySingleSelected',
+    weekRow: 'fui-CalendarDayGrid__weekRow',
+    weekDayLabelCell: 'fui-CalendarDayGrid__weekDayLabelCell',
+    weekNumberCell: 'fui-CalendarDayGrid__weekNumberCell',
+    dayOutsideBounds: 'fui-CalendarDayGrid__dayOutsideBounds',
+    dayOutsideNavigatedMonth: 'fui-CalendarDayGrid__dayOutsideNavigatedMonth',
+    dayButton: 'fui-CalendarDayGrid__dayButton',
+    dayIsToday: 'fui-CalendarDayGrid__dayIsToday',
+    firstTransitionWeek: 'fui-CalendarDayGrid__firstTransitionWeek',
+    lastTransitionWeek: 'fui-CalendarDayGrid__lastTransitionWeek',
+    dayMarker: 'fui-CalendarDayGrid__dayMarker',
+    dayTodayMarker: 'fui-CalendarDayGrid__dayTodayMarker'
+};
+const extraCalendarDayGridClassNames = {
+    hoverStyle: 'fui-CalendarDayGrid__hoverStyle',
+    pressedStyle: 'fui-CalendarDayGrid__pressedStyle'
+};
+const useWrapperStyles = (0, _react.makeStyles)({
+    base: {
+        paddingBottom: '10px'
+    }
+});
+const useTableStyles = (0, _react.makeStyles)({
+    base: {
+        borderCollapse: 'collapse',
+        borderSpacing: 0,
+        fontSize: 'inherit',
+        marginTop: '4px',
+        paddingBottom: '10px',
+        position: 'relative',
+        tableLayout: 'fixed',
+        textAlign: 'center',
+        width: '196px'
+    },
+    showWeekNumbers: {
+        width: '226px'
+    }
+});
+const useDayCellStyles = (0, _react.makeStyles)({
+    base: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        cursor: 'pointer',
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        margin: '0',
+        padding: '2px',
+        position: 'relative',
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Window',
+            color: 'WindowText'
+        },
+        [`&.${extraCalendarDayGridClassNames.hoverStyle}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1Static,
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            '@media (forced-colors: active)': {
+                outline: '1px solid Highlight',
+                zIndex: 3,
+                [`& .${calendarDayGridClassNames.dayTodayMarker}`]: {
+                    backgroundColor: 'Highlight'
+                }
+            }
+        },
+        [`&.${extraCalendarDayGridClassNames.pressedStyle}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1Static,
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window',
+                ..._react.shorthands.borderColor('Highlight'),
+                color: 'Highlight'
+            }
+        }
+    },
+    focusIndicator: (0, _reacttabster.createFocusOutlineStyle)({
+        style: {
+            outlineWidth: _reacttheme.tokens.strokeWidthThick,
+            ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThick)
+        }
+    })
+});
+const useDaySelectedStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedSelected,
+        color: _reacttheme.tokens.colorNeutralForeground1Static,
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            ..._react.shorthands.borderColor('Highlight'),
+            color: 'HighlightText',
+            forcedColorAdjust: 'none'
+        },
+        [`&:hover, &.${extraCalendarDayGridClassNames.hoverStyle}, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground1Static,
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedSelected,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                color: 'HighlightText'
+            }
+        },
+        [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window'
+            }
+        }
+    }
+});
+const useDaySingleSelectedStyles = (0, _react.makeStyles)({
+    base: {
+        color: _reacttheme.tokens.colorNeutralForeground1Static,
+        [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window'
+            }
+        },
+        [`& > .${calendarDayGridClassNames.dayButton}`]: {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedSelected,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            ..._react.shorthands.border('1px', 'solid', _reacttheme.tokens.colorBrandStroke1),
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                ..._react.shorthands.borderColor('Highlight'),
+                color: 'HighlightText',
+                forcedColorAdjust: 'none'
+            }
+        }
+    }
+});
+const useWeekRowStyles = (0, _react.makeStyles)({
+    base: {
+        position: 'relative',
+        ':focus-within': {
+            zIndex: 1
+        }
+    },
+    animation: {
+        animationDuration: _utils.DURATION_3,
+        animationFillMode: 'both',
+        animationTimingFunction: _utils.EASING_FUNCTION_1
+    },
+    horizontalBackward: {
+        animationName: [
+            _utils.FADE_IN,
+            _utils.SLIDE_RIGHT_IN20
+        ]
+    },
+    horizontalForward: {
+        animationName: [
+            _utils.FADE_IN,
+            _utils.SLIDE_LEFT_IN20
+        ]
+    },
+    verticalBackward: {
+        animationName: [
+            _utils.FADE_IN,
+            _utils.SLIDE_DOWN_IN20
+        ]
+    },
+    verticalForward: {
+        animationName: [
+            _utils.FADE_IN,
+            _utils.SLIDE_UP_IN20
+        ]
+    }
+});
+const useWeekDayLabelCellStyles = (0, _react.makeStyles)({
+    base: {
+        userSelect: 'none',
+        animationDuration: _utils.DURATION_2,
+        animationFillMode: 'both',
+        animationName: _utils.FADE_IN,
+        animationTimingFunction: _utils.EASING_FUNCTION_2
+    }
+});
+const useWeekNumberCellStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderRight: `1px solid ${_reacttheme.tokens.colorNeutralStroke2}`,
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralForeground4,
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        height: '28px',
+        margin: '0',
+        padding: '0',
+        width: '28px'
+    }
+});
+const useDayOutsideBoundsStyles = (0, _react.makeStyles)({
+    base: {
+        [`&, &:disabled, & button, &.${extraCalendarDayGridClassNames.hoverStyle}` + `, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            pointerEvents: 'none'
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    }
+});
+const useDayOutsideNavigatedMonthStyles = (0, _react.makeStyles)({
+    lightenDaysOutsideNavigatedMonth: {
+        color: _reacttheme.tokens.colorNeutralForeground4,
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    }
+});
+const useDayButtonStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: 'none',
+        color: 'inherit',
+        cursor: 'pointer',
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        fontWeight: 'inherit',
+        height: '24px',
+        lineHeight: '24px',
+        overflow: 'visible',
+        padding: '0',
+        width: '24px',
+        '&span': {
+            height: 'inherit',
+            lineHeight: 'inherit'
+        },
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed
+        }
+    }
+});
+const useDayIsTodayStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+            backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Window'
+            }
+        }
+    }
+});
+const useDayTodayMarkerStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        borderRadius: '100%',
+        width: '20px',
+        height: '20px',
+        lineHeight: '20px',
+        '@media (forced-colors: active)': {
+            backgroundColor: 'WindowText',
+            ..._react.shorthands.borderColor('WindowText'),
+            color: 'Window',
+            forcedColorAdjust: 'none'
+        }
+    }
+});
+const useFirstTransitionWeekStyles = (0, _react.makeStyles)({
+    base: {
+        height: 0,
+        opacity: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        width: 0
+    },
+    verticalForward: {
+        animationDuration: _utils.DURATION_3,
+        animationFillMode: 'both',
+        animationName: [
+            _utils.FADE_OUT,
+            _utils.SLIDE_UP_OUT20,
+            _utils.TRANSITION_ROW_DISAPPEARANCE
+        ],
+        animationTimingFunction: _utils.EASING_FUNCTION_1
+    }
+});
+const useLastTransitionWeekStyles = (0, _react.makeStyles)({
+    base: {
+        height: 0,
+        marginTop: '-28px',
+        opacity: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        width: 0
+    },
+    verticalBackward: {
+        animationDuration: _utils.DURATION_3,
+        animationFillMode: 'both',
+        animationName: [
+            _utils.FADE_OUT,
+            _utils.SLIDE_DOWN_OUT20,
+            _utils.TRANSITION_ROW_DISAPPEARANCE
+        ],
+        animationTimingFunction: _utils.EASING_FUNCTION_1
+    }
+});
+const useDayMarkerStyles = (0, _react.makeStyles)({
+    base: {
+        backgroundColor: _reacttheme.tokens.colorBrandForeground2,
+        borderRadius: '100%',
+        bottom: '1px',
+        height: '4px',
+        left: 0,
+        margin: 'auto',
+        position: 'absolute',
+        right: 0,
+        width: '4px',
+        '@media (forced-colors: active)': {
+            backgroundColor: 'WindowText',
+            forcedColorAdjust: 'none'
+        }
+    }
+});
+const useCornerBorderAndRadiusStyles = (0, _react.makeStyles)({
+    corners: {
+        [`&.${_useWeekCornerStylesstyles.weekCornersClassNames.topRightCornerDate}`]: {
+            borderTopRightRadius: _reacttheme.tokens.borderRadiusMedium
+        },
+        [`&.${_useWeekCornerStylesstyles.weekCornersClassNames.topLeftCornerDate}`]: {
+            borderTopLeftRadius: _reacttheme.tokens.borderRadiusMedium
+        },
+        [`&.${_useWeekCornerStylesstyles.weekCornersClassNames.bottomRightCornerDate}`]: {
+            borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium
+        },
+        [`&.${_useWeekCornerStylesstyles.weekCornersClassNames.bottomLeftCornerDate}`]: {
+            borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium
+        }
+    }
+});
+const useCalendarDayGridStyles_unstable = (props)=>{
+    'use no memo';
+    const wrapperStyles = useWrapperStyles();
+    const tableStyles = useTableStyles();
+    const dayCellStyles = useDayCellStyles();
+    const daySelectedStyles = useDaySelectedStyles();
+    const daySingleSelectedStyles = useDaySingleSelectedStyles();
+    const weekRowStyles = useWeekRowStyles();
+    const weekDayLabelCellStyles = useWeekDayLabelCellStyles();
+    const weekNumberCellStyles = useWeekNumberCellStyles();
+    const dayOutsideBoundsStyles = useDayOutsideBoundsStyles();
+    const dayOutsideNavigatedMonthStyles = useDayOutsideNavigatedMonthStyles();
+    const dayButtonStyles = useDayButtonStyles();
+    const dayIsTodayStyles = useDayIsTodayStyles();
+    const firstTransitionWeekStyles = useFirstTransitionWeekStyles();
+    const lastTransitionWeekStyles = useLastTransitionWeekStyles();
+    const dayMarkerStyles = useDayMarkerStyles();
+    const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();
+    const dayTodayMarkerStyles = useDayTodayMarkerStyles();
+    const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;
+    return {
+        wrapper: (0, _react.mergeClasses)(calendarDayGridClassNames.wrapper, wrapperStyles.base),
+        table: (0, _react.mergeClasses)(calendarDayGridClassNames.table, tableStyles.base, showWeekNumbers && tableStyles.showWeekNumbers),
+        dayCell: (0, _react.mergeClasses)(calendarDayGridClassNames.dayCell, dayCellStyles.base, dayCellStyles.focusIndicator, cornerBorderAndRadiusStyles.corners),
+        daySelected: (0, _react.mergeClasses)(calendarDayGridClassNames.daySelected, daySelectedStyles.base),
+        daySingleSelected: (0, _react.mergeClasses)(calendarDayGridClassNames.daySingleSelected, daySingleSelectedStyles.base),
+        weekRow: (0, _react.mergeClasses)(calendarDayGridClassNames.weekRow, weekRowStyles.base, animateBackwards !== undefined && weekRowStyles.animation, animateBackwards !== undefined && (animationDirection === _Calendartypes.AnimationDirection.Horizontal ? animateBackwards ? weekRowStyles.horizontalBackward : weekRowStyles.horizontalForward : animateBackwards ? weekRowStyles.verticalBackward : weekRowStyles.verticalForward)),
+        weekDayLabelCell: (0, _react.mergeClasses)(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),
+        weekNumberCell: (0, _react.mergeClasses)(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),
+        dayOutsideBounds: (0, _react.mergeClasses)(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),
+        dayOutsideNavigatedMonth: (0, _react.mergeClasses)(calendarDayGridClassNames.dayOutsideNavigatedMonth, lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth),
+        dayButton: (0, _react.mergeClasses)(calendarDayGridClassNames.dayButton, dayButtonStyles.base),
+        dayIsToday: (0, _react.mergeClasses)(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),
+        firstTransitionWeek: (0, _react.mergeClasses)(calendarDayGridClassNames.firstTransitionWeek, firstTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== _Calendartypes.AnimationDirection.Horizontal && !animateBackwards && firstTransitionWeekStyles.verticalForward),
+        lastTransitionWeek: (0, _react.mergeClasses)(calendarDayGridClassNames.lastTransitionWeek, lastTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== _Calendartypes.AnimationDirection.Horizontal && animateBackwards && lastTransitionWeekStyles.verticalBackward),
+        dayMarker: (0, _react.mergeClasses)(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),
+        dayTodayMarker: (0, _react.mergeClasses)(calendarDayGridClassNames.dayTodayMarker, dayTodayMarkerStyles.base)
+    };
+};

package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/CalendarDayGrid/useCalendarDayGridStyles.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 FADE_OUT,\n SLIDE_DOWN_IN20,\n SLIDE_DOWN_OUT20,\n SLIDE_LEFT_IN20,\n SLIDE_RIGHT_IN20,\n SLIDE_UP_IN20,\n SLIDE_UP_OUT20,\n TRANSITION_ROW_DISAPPEARANCE,\n} from '../../utils';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport { weekCornersClassNames } from './useWeekCornerStyles.styles';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayGridStyles, CalendarDayGridStyleProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport const calendarDayGridClassNames: SlotClassNames<CalendarDayGridStyles> = {\n wrapper: 'fui-CalendarDayGrid__wrapper',\n table: 'fui-CalendarDayGrid__table',\n dayCell: 'fui-CalendarDayGrid__dayCell',\n daySelected: 'fui-CalendarDayGrid__daySelected',\n daySingleSelected: 'fui-CalendarDayGrid__daySingleSelected',\n weekRow: 'fui-CalendarDayGrid__weekRow',\n weekDayLabelCell: 'fui-CalendarDayGrid__weekDayLabelCell',\n weekNumberCell: 'fui-CalendarDayGrid__weekNumberCell',\n dayOutsideBounds: 'fui-CalendarDayGrid__dayOutsideBounds',\n dayOutsideNavigatedMonth: 'fui-CalendarDayGrid__dayOutsideNavigatedMonth',\n dayButton: 'fui-CalendarDayGrid__dayButton',\n dayIsToday: 'fui-CalendarDayGrid__dayIsToday',\n firstTransitionWeek: 'fui-CalendarDayGrid__firstTransitionWeek',\n lastTransitionWeek: 'fui-CalendarDayGrid__lastTransitionWeek',\n dayMarker: 'fui-CalendarDayGrid__dayMarker',\n dayTodayMarker: 'fui-CalendarDayGrid__dayTodayMarker',\n};\n\n/**\n * @internal\n */\nexport const extraCalendarDayGridClassNames = {\n hoverStyle: 'fui-CalendarDayGrid__hoverStyle',\n pressedStyle: 'fui-CalendarDayGrid__pressedStyle',\n};\n\nconst useWrapperStyles = makeStyles({\n base: {\n paddingBottom: '10px',\n },\n});\n\nconst useTableStyles = makeStyles({\n base: {\n borderCollapse: 'collapse',\n borderSpacing: 0,\n fontSize: 'inherit',\n marginTop: '4px',\n paddingBottom: '10px',\n position: 'relative',\n tableLayout: 'fixed',\n textAlign: 'center',\n width: '196px',\n },\n showWeekNumbers: {\n width: '226px',\n },\n});\n\nconst useDayCellStyles = makeStyles({\n base: {\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '2px',\n position: 'relative',\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText',\n },\n\n [`&.${extraCalendarDayGridClassNames.hoverStyle}`]: {\n color: tokens.colorNeutralForeground1Static,\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n '@media (forced-colors: active)': {\n outline: '1px solid Highlight',\n zIndex: 3,\n [`& .${calendarDayGridClassNames.dayTodayMarker}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n [`&.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n color: tokens.colorNeutralForeground1Static,\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n },\n },\n focusIndicator: createFocusOutlineStyle({\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n }),\n});\n\nconst useDaySelectedStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n },\n\n [`&:hover, &.${extraCalendarDayGridClassNames.hoverStyle}, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n color: tokens.colorNeutralForeground1Static,\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n\n [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n },\n },\n },\n});\n\nconst useDaySingleSelectedStyles = makeStyles({\n base: {\n color: tokens.colorNeutralForeground1Static,\n\n [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n },\n },\n\n [`& > .${calendarDayGridClassNames.dayButton}`]: {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.border('1px', 'solid', tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n },\n },\n },\n});\n\nconst useWeekRowStyles = makeStyles({\n base: {\n position: 'relative',\n ':focus-within': {\n zIndex: 1,\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 useWeekDayLabelCellStyles = makeStyles({\n base: {\n userSelect: 'none',\n animationDuration: DURATION_2,\n animationFillMode: 'both',\n animationName: FADE_IN,\n animationTimingFunction: EASING_FUNCTION_2,\n },\n});\n\nconst useWeekNumberCellStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground4,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n height: '28px',\n margin: '0',\n padding: '0',\n width: '28px',\n },\n});\n\nconst useDayOutsideBoundsStyles = makeStyles({\n base: {\n [`&, &:disabled, & button, &.${extraCalendarDayGridClassNames.hoverStyle}` +\n `, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\nconst useDayOutsideNavigatedMonthStyles = makeStyles({\n lightenDaysOutsideNavigatedMonth: {\n color: tokens.colorNeutralForeground4,\n fontWeight: tokens.fontWeightRegular,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\nconst useDayButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n fontSize: tokens.fontSizeBase200,\n fontWeight: 'inherit',\n height: '24px',\n lineHeight: '24px',\n overflow: 'visible',\n padding: '0',\n width: '24px',\n\n '&span': {\n height: 'inherit',\n lineHeight: 'inherit',\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n borderRadius: tokens.borderRadiusMedium,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n },\n },\n});\n\nconst useDayIsTodayStyles = makeStyles({\n base: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForegroundOnBrand,\n fontWeight: tokens.fontWeightSemibold,\n\n [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n backgroundColor: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n },\n },\n },\n});\n\nconst useDayTodayMarkerStyles = makeStyles({\n base: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: tokens.colorBrandBackground,\n borderRadius: '100%',\n width: '20px',\n height: '20px',\n lineHeight: '20px',\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n ...shorthands.borderColor('WindowText'),\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n },\n});\n\nconst useFirstTransitionWeekStyles = makeStyles({\n base: {\n height: 0,\n opacity: 0,\n overflow: 'hidden',\n\n position: 'absolute',\n width: 0,\n },\n verticalForward: {\n animationDuration: DURATION_3,\n animationFillMode: 'both',\n animationName: [FADE_OUT, SLIDE_UP_OUT20, TRANSITION_ROW_DISAPPEARANCE],\n animationTimingFunction: EASING_FUNCTION_1,\n },\n});\n\nconst useLastTransitionWeekStyles = makeStyles({\n base: {\n height: 0,\n marginTop: '-28px',\n opacity: 0,\n overflow: 'hidden',\n position: 'absolute',\n width: 0,\n },\n verticalBackward: {\n animationDuration: DURATION_3,\n animationFillMode: 'both',\n animationName: [FADE_OUT, SLIDE_DOWN_OUT20, TRANSITION_ROW_DISAPPEARANCE],\n animationTimingFunction: EASING_FUNCTION_1,\n },\n});\n\nconst useDayMarkerStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorBrandForeground2,\n borderRadius: '100%',\n bottom: '1px',\n height: '4px',\n left: 0,\n margin: 'auto',\n\n position: 'absolute',\n right: 0,\n width: '4px',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n forcedColorAdjust: 'none',\n },\n },\n});\n\nconst useCornerBorderAndRadiusStyles = makeStyles({\n corners: {\n [`&.${weekCornersClassNames.topRightCornerDate}`]: {\n borderTopRightRadius: tokens.borderRadiusMedium,\n },\n [`&.${weekCornersClassNames.topLeftCornerDate}`]: {\n borderTopLeftRadius: tokens.borderRadiusMedium,\n },\n [`&.${weekCornersClassNames.bottomRightCornerDate}`]: {\n borderBottomRightRadius: tokens.borderRadiusMedium,\n },\n [`&.${weekCornersClassNames.bottomLeftCornerDate}`]: {\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n },\n },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarDayGrid slots based on the state\n */\nexport const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStyleProps): CalendarDayGridStyles => {\n 'use no memo';\n\n const wrapperStyles = useWrapperStyles();\n const tableStyles = useTableStyles();\n const dayCellStyles = useDayCellStyles();\n const daySelectedStyles = useDaySelectedStyles();\n const daySingleSelectedStyles = useDaySingleSelectedStyles();\n const weekRowStyles = useWeekRowStyles();\n const weekDayLabelCellStyles = useWeekDayLabelCellStyles();\n const weekNumberCellStyles = useWeekNumberCellStyles();\n const dayOutsideBoundsStyles = useDayOutsideBoundsStyles();\n const dayOutsideNavigatedMonthStyles = useDayOutsideNavigatedMonthStyles();\n const dayButtonStyles = useDayButtonStyles();\n const dayIsTodayStyles = useDayIsTodayStyles();\n const firstTransitionWeekStyles = useFirstTransitionWeekStyles();\n const lastTransitionWeekStyles = useLastTransitionWeekStyles();\n const dayMarkerStyles = useDayMarkerStyles();\n const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();\n const dayTodayMarkerStyles = useDayTodayMarkerStyles();\n\n const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;\n\n return {\n wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base),\n table: mergeClasses(\n calendarDayGridClassNames.table,\n tableStyles.base,\n showWeekNumbers && tableStyles.showWeekNumbers,\n ),\n dayCell: mergeClasses(\n calendarDayGridClassNames.dayCell,\n dayCellStyles.base,\n dayCellStyles.focusIndicator,\n cornerBorderAndRadiusStyles.corners,\n ),\n daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),\n daySingleSelected: mergeClasses(calendarDayGridClassNames.daySingleSelected, daySingleSelectedStyles.base),\n weekRow: mergeClasses(\n calendarDayGridClassNames.weekRow,\n weekRowStyles.base,\n animateBackwards !== undefined && weekRowStyles.animation,\n animateBackwards !== undefined &&\n (animationDirection === AnimationDirection.Horizontal\n ? animateBackwards\n ? weekRowStyles.horizontalBackward\n : weekRowStyles.horizontalForward\n : animateBackwards\n ? weekRowStyles.verticalBackward\n : weekRowStyles.verticalForward),\n ),\n weekDayLabelCell: mergeClasses(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),\n weekNumberCell: mergeClasses(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),\n dayOutsideBounds: mergeClasses(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),\n dayOutsideNavigatedMonth: mergeClasses(\n calendarDayGridClassNames.dayOutsideNavigatedMonth,\n lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth,\n ),\n dayButton: mergeClasses(calendarDayGridClassNames.dayButton, dayButtonStyles.base),\n dayIsToday: mergeClasses(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),\n firstTransitionWeek: mergeClasses(\n calendarDayGridClassNames.firstTransitionWeek,\n firstTransitionWeekStyles.base,\n animateBackwards !== undefined &&\n animationDirection !== AnimationDirection.Horizontal &&\n !animateBackwards &&\n firstTransitionWeekStyles.verticalForward,\n ),\n lastTransitionWeek: mergeClasses(\n calendarDayGridClassNames.lastTransitionWeek,\n lastTransitionWeekStyles.base,\n animateBackwards !== undefined &&\n animationDirection !== AnimationDirection.Horizontal &&\n animateBackwards &&\n lastTransitionWeekStyles.verticalBackward,\n ),\n dayMarker: mergeClasses(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),\n dayTodayMarker: mergeClasses(calendarDayGridClassNames.dayTodayMarker, dayTodayMarkerStyles.base),\n };\n};\n"],"names":["calendarDayGridClassNames","extraCalendarDayGridClassNames","useCalendarDayGridStyles_unstable","wrapper","table","dayCell","daySelected","daySingleSelected","weekRow","weekDayLabelCell","weekNumberCell","dayOutsideBounds","dayOutsideNavigatedMonth","dayButton","dayIsToday","firstTransitionWeek","lastTransitionWeek","dayMarker","dayTodayMarker","hoverStyle","pressedStyle","useWrapperStyles","makeStyles","base","paddingBottom","useTableStyles","borderCollapse","borderSpacing","fontSize","marginTop","position","tableLayout","textAlign","width","showWeekNumbers","useDayCellStyles","color","tokens","colorNeutralForeground1","cursor","fontSizeBase200","fontWeight","fontWeightRegular","margin","padding","backgroundColor","colorNeutralForeground1Static","colorBrandBackgroundInvertedHover","outline","zIndex","colorBrandBackgroundInvertedPressed","shorthands","borderColor","focusIndicator","createFocusOutlineStyle","style","outlineWidth","strokeWidthThick","borderWidth","useDaySelectedStyles","colorBrandBackgroundInvertedSelected","forcedColorAdjust","useDaySingleSelectedStyles","borderRadius","borderRadiusMedium","border","colorBrandStroke1","useWeekRowStyles","animation","animationDuration","DURATION_3","animationFillMode","animationTimingFunction","EASING_FUNCTION_1","horizontalBackward","animationName","FADE_IN","SLIDE_RIGHT_IN20","horizontalForward","SLIDE_LEFT_IN20","verticalBackward","SLIDE_DOWN_IN20","verticalForward","SLIDE_UP_IN20","useWeekDayLabelCellStyles","userSelect","DURATION_2","EASING_FUNCTION_2","useWeekNumberCellStyles","colorTransparentBackground","borderRight","colorNeutralStroke2","boxSizing","colorNeutralForeground4","height","useDayOutsideBoundsStyles","colorNeutralForegroundDisabled","pointerEvents","useDayOutsideNavigatedMonthStyles","lightenDaysOutsideNavigatedMonth","useDayButtonStyles","lineHeight","overflow","useDayIsTodayStyles","display","justifyContent","alignItems","colorNeutralForegroundOnBrand","fontWeightSemibold","useDayTodayMarkerStyles","colorBrandBackground","useFirstTransitionWeekStyles","opacity","FADE_OUT","SLIDE_UP_OUT20","TRANSITION_ROW_DISAPPEARANCE","useLastTransitionWeekStyles","SLIDE_DOWN_OUT20","useDayMarkerStyles","colorBrandForeground2","bottom","left","right","useCornerBorderAndRadiusStyles","corners","weekCornersClassNames","topRightCornerDate","borderTopRightRadius","topLeftCornerDate","borderTopLeftRadius","bottomRightCornerDate","borderBottomRightRadius","bottomLeftCornerDate","borderBottomLeftRadius","props","wrapperStyles","tableStyles","dayCellStyles","daySelectedStyles","daySingleSelectedStyles","weekRowStyles","weekDayLabelCellStyles","weekNumberCellStyles","dayOutsideBoundsStyles","dayOutsideNavigatedMonthStyles","dayButtonStyles","dayIsTodayStyles","firstTransitionWeekStyles","lastTransitionWeekStyles","dayMarkerStyles","cornerBorderAndRadiusStyles","dayTodayMarkerStyles","animateBackwards","animationDirection","mergeClasses","undefined","AnimationDirection","Horizontal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"}