npm - @fluentui/react-calendar-compat - Versions diffs - 0.3.3 → 0.3.4 - Mend

@fluentui/react-calendar-compat 0.3.3 → 0.3.4

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 (34) hide show

package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js ADDED Viewed

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

package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map ADDED Viewed

@@ -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":["tokens","makeStyles","mergeClasses","shorthands","DURATION_2","DURATION_3","EASING_FUNCTION_1","EASING_FUNCTION_2","FADE_IN","SLIDE_DOWN_IN20","SLIDE_LEFT_IN20","SLIDE_RIGHT_IN20","SLIDE_UP_IN20","AnimationDirection","calendarPickerClassNames","root","headerContainer","currentItemButton","navigationButtonsContainer","navigationButton","gridContainer","buttonRow","itemButton","current","selected","disabled","useRootStyles","base","boxSizing","overflow","padding","width","normalize","boxShadow","margin","useHeaderContainerStyles","display","useCurrentItemButtonStyles","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","textAlign","animation","animationDuration","animationFillMode","animationName","animationTimingFunction","hasHeaderClickCallback","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useNavigationButtonsContainerStyles","alignItems","useNavigationButtonStyles","border","colorNeutralForeground1","fontSizeBase200","height","lineHeight","minHeight","minWidth","position","useGridContainerStyles","marginTop","useButtonRowStyles","marginBottom","horizontalBackward","horizontalForward","verticalBackward","verticalForward","useItemButtonStyles","colorNeutralForeground3","marginRight","fontWeightRegular","colorNeutralForeground1Static","forcedColorAdjust","useCurrentStyles","highlightCurrent","colorBrandBackground","colorNeutralForegroundOnBrand","useSelectedStyles","highlightSelected","colorBrandBackgroundInvertedSelected","useDisabledStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarPickerStyles_unstable","props","rootStyles","headerContainerStyles","currentItemButtonStyles","navigationButtonsContainerStyles","navigationButtonStyles","gridContainerStyles","buttonRowStyles","itemButtonStyles","currentStyles","selectedStyles","disabledStyles","animateBackwards","animationDirection","className","undefined","Horizontal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';
+/**
+ * @internal
+ *
+ * Apply styling to the CalendarYear slots based on the state
+ */ export const useCalendarYearStyles_unstable = (props)=>{
+    'use no memo';
+    return useCalendarPickerStyles_unstable(props);
+};

package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map ADDED Viewed

@@ -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":["useCalendarPickerStyles_unstable","useCalendarYearStyles_unstable","props"],"rangeMappings":";;;;;;;;","mappings":"AAAA,SAASA,gCAAgC,QAAQ,mDAAmD;AAGpG;;;;CAIC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,OAAOF,iCAAiCE;AAC1C,EAAE"}

package/lib-commonjs/components/Calendar/calendarNavigationIcons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Calendar/calendarNavigationIcons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';\n\nexport type CalendarNavigationIcons = {\n /*\n Icon to use for up arrow navigation. Default comes from \\@fluentui\\/react-icons\n * @default ArrowUpRegular\n /\n upNavigation?: JSX.Element;\n\n /\n Icon to use for down arrow navigation. Default comes from \\@fluentui\\/react-icons\n * @default ArrowDownRegular\n /\n downNavigation?: JSX.Element;\n\n /\n Icon to use for the dismiss button. Default comes from \\@fluentui\\/react-icons\n * @default DismissRegular\n */\n dismiss?: JSX.Element;\n};\n\nexport const defaultNavigationIcons: CalendarNavigationIcons = {\n dismiss: <DismissRegular />,\n downNavigation: <ArrowDownRegular />,\n upNavigation: <ArrowUpRegular />,\n};\n"],"names":["defaultNavigationIcons","dismiss","React","createElement","DismissRegular","downNavigation","ArrowDownRegular","upNavigation","ArrowUpRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+~~BAuBaA~~;;;eAAAA;;;;~~iEAvBU~~;4BAC0C;~~AAsB1D~~,MAAMA,yBAAkD;IAC7DC,SAAAA,WAAAA,GAASC,OAAAC,aAAA,CAACC,0BAAAA,EAAAA;IACVC,gBAAAA,WAAAA,GAAgBH,OAAAC,aAAA,CAACG,4BAAAA,EAAAA;IACjBC,cAAAA,WAAAA,GAAcL,OAAAC,aAAA,CAACK,0BAAAA,EAAAA;AACjB"}
1	+ {"version":3,"sources":["../src/components/Calendar/calendarNavigationIcons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowDownRegular, ArrowUpRegular, DismissRegular } from '@fluentui/react-icons';\n\nexport type CalendarNavigationIcons = {\n /*\n Icon to use for up arrow navigation. Default comes from \\@fluentui\\/react-icons\n * @default ArrowUpRegular\n /\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n upNavigation?: JSX.Element;\n /\n Icon to use for down arrow navigation. Default comes from \\@fluentui\\/react-icons\n * @default ArrowDownRegular\n /\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n downNavigation?: JSX.Element;\n /\n Icon to use for the dismiss button. Default comes from \\@fluentui\\/react-icons\n * @default DismissRegular\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n dismiss?: JSX.Element;\n};\n\nexport const defaultNavigationIcons: CalendarNavigationIcons = {\n dismiss: <DismissRegular />,\n downNavigation: <ArrowDownRegular />,\n upNavigation: <ArrowUpRegular />,\n};\n"],"names":["defaultNavigationIcons","dismiss","React","createElement","DismissRegular","downNavigation","ArrowDownRegular","upNavigation","ArrowUpRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBaA;;;eAAAA;;;;iEAxBU;4BAC0C;AAuB1D,MAAMA,yBAAkD;IAC7DC,SAAAA,WAAAA,GAASC,OAAAC,aAAA,CAACC,0BAAAA,EAAAA;IACVC,gBAAAA,WAAAA,GAAgBH,OAAAC,aAAA,CAACG,4BAAAA,EAAAA;IACjBC,cAAAA,WAAAA,GAAcL,OAAAC,aAAA,CAACK,0BAAAA,EAAAA;AACjB"}

package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,127 @@
+"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, {
+    calendarClassNames: function() {
+        return calendarClassNames;
+    },
+    useCalendarStyles_unstable: function() {
+        return useCalendarStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const calendarClassNames = {
+    root: 'fui-Calendar',
+    divider: 'fui-Calendar__divider',
+    goTodayButton: 'fui-Calendar__goTodayButton',
+    monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',
+    liveRegion: 'fui-Calendar__liveRegion'
+};
+const useRootStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'flex',
+        width: '220px'
+    },
+    normalize: {
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        margin: '0',
+        padding: '0'
+    },
+    monthPickerNotVisible: {
+        flexDirection: 'column'
+    },
+    dayAndMonthPickersVisible: {
+        width: '440px'
+    },
+    dayPickerVisibleAndWeekNumbersShown: {
+        width: '250px'
+    },
+    dayAndMonthPickersVisibleAndWeekNumbersShown: {
+        width: '470px'
+    }
+});
+const useDividerStyles = (0, _react.makeStyles)({
+    base: {
+        borderRight: `1px solid ${_reacttheme.tokens.colorNeutralStroke2}`,
+        top: 0
+    }
+});
+const useMonthPickerWrapperStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});
+const useGoTodayButtonStyles = (0, _react.makeStyles)({
+    base: {
+        alignSelf: 'flex-end',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderStyle('none'),
+        bottom: 0,
+        boxSizing: 'content-box',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        fontFamily: 'inherit',
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        height: '30px',
+        lineHeight: '30px',
+        marginRight: '16px',
+        marginTop: '3px',
+        overflow: 'visible',
+        padding: '0 4px',
+        '& div': {
+            fontSize: _reacttheme.tokens.fontSizeBase200
+        },
+        '&:hover': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+            color: _reacttheme.tokens.colorBrandForeground1,
+            cursor: 'pointer',
+            '@media (forced-colors: active)': {
+                outline: _reacttheme.tokens.strokeWidthThin,
+                borderRadius: _reacttheme.tokens.borderRadiusSmall
+            }
+        },
+        '&:hover:active': {
+            color: _reacttheme.tokens.colorBrandForeground2
+        },
+        '&:disabled': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+            pointerEvents: 'none'
+        }
+    }
+});
+const useLiveRegionStyles = (0, _react.makeStyles)({
+    base: {
+        border: 'none',
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: '0',
+        position: 'absolute',
+        width: '1px'
+    }
+});
+const useCalendarStyles_unstable = (props)=>{
+    'use no memo';
+    const rootStyles = useRootStyles();
+    const dividerStyles = useDividerStyles();
+    const monthPickerWrapperStyles = useMonthPickerWrapperStyles();
+    const goTodayButtonStyles = useGoTodayButtonStyles();
+    const liveRegionStyles = useLiveRegionStyles();
+    const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;
+    return {
+        root: (0, _react.mergeClasses)(calendarClassNames.root, rootStyles.base, rootStyles.normalize, !isMonthPickerVisible && rootStyles.monthPickerNotVisible, isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible, isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown, isDayPickerVisible && isMonthPickerVisible && showWeekNumbers && rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown, className),
+        divider: (0, _react.mergeClasses)(calendarClassNames.divider, dividerStyles.base),
+        monthPickerWrapper: (0, _react.mergeClasses)(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),
+        goTodayButton: (0, _react.mergeClasses)(calendarClassNames.goTodayButton, goTodayButtonStyles.base),
+        liveRegion: (0, _react.mergeClasses)(calendarClassNames.liveRegion, liveRegionStyles.base)
+    };
+};

package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarStyles, CalendarStyleProps } from './Calendar.types';\n\n/**\n * @internal\n */\nexport const calendarClassNames: SlotClassNames<CalendarStyles> = {\n root: 'fui-Calendar',\n divider: 'fui-Calendar__divider',\n goTodayButton: 'fui-Calendar__goTodayButton',\n monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n liveRegion: 'fui-Calendar__liveRegion',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'flex',\n width: '220px',\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0',\n },\n monthPickerNotVisible: {\n flexDirection: 'column',\n },\n dayAndMonthPickersVisible: {\n width: '440px',\n },\n dayPickerVisibleAndWeekNumbersShown: {\n width: '250px',\n },\n dayAndMonthPickersVisibleAndWeekNumbersShown: {\n width: '470px',\n },\n});\n\nconst useDividerStyles = makeStyles({\n base: {\n borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n top: 0,\n },\n});\n\nconst useMonthPickerWrapperStyles = makeStyles({\n base: {\n display: 'flex',\n flexDirection: 'column',\n },\n});\n\nconst useGoTodayButtonStyles = makeStyles({\n base: {\n alignSelf: 'flex-end',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n bottom: 0,\n boxSizing: 'content-box',\n color: tokens.colorNeutralForeground1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '30px',\n lineHeight: '30px',\n marginRight: '16px',\n marginTop: '3px',\n overflow: 'visible',\n padding: '0 4px',\n\n '& div': {\n fontSize: tokens.fontSizeBase200,\n },\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorBrandForeground1,\n cursor: 'pointer',\n\n '@media (forced-colors: active)': {\n outline: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n },\n },\n '&:hover:active': {\n color: tokens.colorBrandForeground2,\n },\n '&:disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n },\n },\n});\n\nconst useLiveRegionStyles = makeStyles({\n base: {\n border: 'none',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0',\n position: 'absolute',\n width: '1px',\n },\n});\n\n/**\n * @internal\n *\n * Apply styling to the Calendar slots based on the state\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const dividerStyles = useDividerStyles();\n const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n const goTodayButtonStyles = useGoTodayButtonStyles();\n const liveRegionStyles = useLiveRegionStyles();\n\n const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n\n return {\n root: mergeClasses(\n calendarClassNames.root,\n rootStyles.base,\n rootStyles.normalize,\n !isMonthPickerVisible && rootStyles.monthPickerNotVisible,\n isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible,\n isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown,\n isDayPickerVisible &&\n isMonthPickerVisible &&\n showWeekNumbers &&\n rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown,\n className,\n ),\n divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base),\n };\n};\n"],"names":["calendarClassNames","useCalendarStyles_unstable","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","makeStyles","base","display","width","normalize","boxShadow","boxSizing","margin","padding","monthPickerNotVisible","flexDirection","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","useDividerStyles","borderRight","tokens","colorNeutralStroke2","top","useMonthPickerWrapperStyles","useGoTodayButtonStyles","alignSelf","backgroundColor","colorTransparentBackground","shorthands","borderStyle","bottom","color","colorNeutralForeground1","fontFamily","fontSize","fontSizeBase200","height","lineHeight","marginRight","marginTop","overflow","colorBrandForeground1","cursor","outline","strokeWidthThin","borderRadius","borderRadiusSmall","colorBrandForeground2","colorNeutralForegroundDisabled","pointerEvents","useLiveRegionStyles","border","position","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CalendarDay/CalendarDay.js.map CHANGED Viewed

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