@fluentui/react-calendar-compat 0.0.0-nightly-20250703-1103.1 → 0.0.0-nightly-20250704-0407.1

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

@@ -1,291 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/useCalendarStyles.styles.raw.js

@@ -1,127 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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/useCalendarDayStyles.styles.raw.js

@@ -1,154 +0,0 @@
-"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, {
-    calendarDayClassNames: function() {
-        return calendarDayClassNames;
-    },
-    useCalendarDayStyles_unstable: function() {
-        return useCalendarDayStyles_unstable;
-    }
-});
-const _reacttheme = require("@fluentui/react-theme");
-const _react = require("@griffel/react");
-const _animations = require("../../utils/animations");
-const calendarDayClassNames = {
-    root: 'fui-CalendarDay',
-    header: 'fui-CalendarDay__header',
-    monthAndYear: 'fui-CalendarDay__monthAndYear',
-    monthComponents: 'fui-CalendarDay__monthComponents',
-    headerIconButton: 'fui-CalendarDay__headerIconButton',
-    disabledStyle: 'fui-CalendarDay__disabledStyle'
-};
-const useRootStyles = (0, _react.makeStyles)({
-    base: {
-        boxSizing: 'content-box',
-        padding: '12px',
-        width: '196px'
-    },
-    normalize: {
-        boxShadow: 'none',
-        boxSizing: 'border-box',
-        margin: '0',
-        padding: '0'
-    },
-    showWeekNumbers: {
-        width: '226px'
-    }
-});
-const useHeaderStyles = (0, _react.makeStyles)({
-    base: {
-        display: 'inline-flex',
-        height: '28px',
-        lineHeight: '44px',
-        position: 'relative',
-        width: '100%'
-    }
-});
-const useMonthAndYearStyles = (0, _react.makeStyles)({
-    base: {
-        alignItems: 'center',
-        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
-        ..._react.shorthands.borderStyle('none'),
-        borderRadius: _reacttheme.tokens.borderRadiusMedium,
-        color: _reacttheme.tokens.colorNeutralForeground1,
-        display: 'inline-block',
-        flexGrow: 1,
-        fontFamily: 'inherit',
-        fontSize: _reacttheme.tokens.fontSizeBase300,
-        fontWeight: _reacttheme.tokens.fontWeightSemibold,
-        lineHeight: '28px',
-        overflow: 'hidden',
-        padding: '0 4px 0 10px',
-        textAlign: 'left',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    },
-    animation: {
-        animationDuration: _animations.DURATION_2,
-        animationFillMode: 'both',
-        animationName: _animations.FADE_IN,
-        animationTimingFunction: _animations.EASING_FUNCTION_2
-    },
-    headerIsClickable: {
-        '&:hover': {
-            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
-            color: _reacttheme.tokens.colorBrandForegroundOnLightHover,
-            cursor: 'pointer',
-            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
-        },
-        '&:hover:active': {
-            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
-            color: _reacttheme.tokens.colorBrandForegroundOnLightPressed,
-            cursor: 'pointer',
-            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
-        }
-    }
-});
-const useMonthComponentsStyles = (0, _react.makeStyles)({
-    base: {
-        alignSelf: 'flex-end',
-        display: 'inline-flex'
-    }
-});
-const useHeaderIconButtonStyles = (0, _react.makeStyles)({
-    base: {
-        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
-        ..._react.shorthands.borderStyle('none'),
-        borderRadius: _reacttheme.tokens.borderRadiusMedium,
-        color: _reacttheme.tokens.colorNeutralForeground3,
-        display: 'block',
-        fontFamily: 'inherit',
-        fontSize: _reacttheme.tokens.fontSizeBase200,
-        height: '28px',
-        lineHeight: '28px',
-        overflow: 'visible',
-        padding: '0',
-        position: 'relative',
-        textAlign: 'center',
-        width: '28px',
-        '&:hover': {
-            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
-            color: _reacttheme.tokens.colorBrandForegroundOnLightHover,
-            cursor: 'pointer',
-            outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
-        },
-        '&:hover:active': {
-            backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedPressed,
-            color: _reacttheme.tokens.colorBrandForegroundOnLightPressed
-        }
-    }
-});
-const useDisabledStyleStyles = (0, _react.makeStyles)({
-    base: {
-        '&, &:disabled, & button': {
-            color: _reacttheme.tokens.colorNeutralForegroundDisabled,
-            pointerEvents: 'none'
-        }
-    }
-});
-const useCalendarDayStyles_unstable = (props)=>{
-    'use no memo';
-    const rootStyles = useRootStyles();
-    const headerStyles = useHeaderStyles();
-    const monthAndYearStyles = useMonthAndYearStyles();
-    const monthComponentsStyles = useMonthComponentsStyles();
-    const headerIconButtonStyles = useHeaderIconButtonStyles();
-    const disabledStyleStyles = useDisabledStyleStyles();
-    const { className, headerIsClickable, showWeekNumbers } = props;
-    return {
-        root: (0, _react.mergeClasses)(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
-        header: (0, _react.mergeClasses)(calendarDayClassNames.header, headerStyles.base),
-        monthAndYear: (0, _react.mergeClasses)(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),
-        monthComponents: (0, _react.mergeClasses)(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
-        headerIconButton: (0, _react.mergeClasses)(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
-        disabledStyle: (0, _react.mergeClasses)(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)
-    };
-};