@fluentui/react-datepicker-compat 0.0.0-nightly-20230421-0417.1 → 0.0.0

package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.js

@@ -0,0 +1,443 @@
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { DURATION_2, DURATION_3, EASING_FUNCTION_1, EASING_FUNCTION_2, FADE_IN, FADE_OUT, SLIDE_DOWN_IN20, SLIDE_DOWN_OUT20, SLIDE_LEFT_IN20, SLIDE_RIGHT_IN20, SLIDE_UP_IN20, SLIDE_UP_OUT20, TRANSITION_ROW_DISAPPEARANCE } from '../../utils';
+import { AnimationDirection } from '../Calendar/Calendar.types';
+import { weekCornersClassNames } from './useWeekCornerStyles';
+/**
+ * @internal
+ */
+export const calendarDayGridClassNames = {
+  wrapper: 'fui-CalendarDayGrid__wrapper',
+  table: 'fui-CalendarDayGrid__table',
+  dayCell: 'fui-CalendarDayGrid__dayCell',
+  daySelected: 'fui-CalendarDayGrid__daySelected',
+  weekRow: 'fui-CalendarDayGrid__weekRow',
+  weekDayLabelCell: 'fui-CalendarDayGrid__weekDayLabelCell',
+  weekNumberCell: 'fui-CalendarDayGrid__weekNumberCell',
+  dayOutsideBounds: 'fui-CalendarDayGrid__dayOutsideBounds',
+  dayOutsideNavigatedMonth: 'fui-CalendarDayGrid__dayOutsideNavigatedMonth',
+  dayButton: 'fui-CalendarDayGrid__dayButton',
+  dayIsToday: 'fui-CalendarDayGrid__dayIsToday',
+  firstTransitionWeek: 'fui-CalendarDayGrid__firstTransitionWeek',
+  lastTransitionWeek: 'fui-CalendarDayGrid__lastTransitionWeek',
+  dayMarker: 'fui-CalendarDayGrid__dayMarker'
+};
+/**
+ * @internal
+ */
+export const extraCalendarDayGridClassNames = {
+  hoverStyle: 'fui-CalendarDayGrid__hoverStyle',
+  pressedStyle: 'fui-CalendarDayGrid__pressedStyle'
+};
+const useWrapperStyles = /*#__PURE__*/__styles({
+  base: {
+    Byoj8tv: "f1fow5ox"
+  }
+}, {
+  d: [".f1fow5ox{padding-bottom:10px;}"]
+});
+const useTableStyles = /*#__PURE__*/__styles({
+  base: {
+    po53p8: "fgkb47j",
+    Bxjg3zr: "f16vktn6",
+    Be2twd7: "fjoy568",
+    B6of3ja: "fvjh0tl",
+    Byoj8tv: "f1fow5ox",
+    qhf8xq: "f10pi13n",
+    B73mfa3: "f14m3nip",
+    fsow6f: "f17mccla",
+    a9b677: "f4m2ahc"
+  },
+  showWeekNumbers: {
+    a9b677: "fl524qk"
+  }
+}, {
+  d: [".fgkb47j{border-collapse:collapse;}", ".f16vktn6{border-spacing:0;}", ".fjoy568{font-size:inherit;}", ".fvjh0tl{margin-top:4px;}", ".f1fow5ox{padding-bottom:10px;}", ".f10pi13n{position:relative;}", ".f14m3nip{table-layout:fixed;}", ".f17mccla{text-align:center;}", ".f4m2ahc{width:196px;}", ".fl524qk{width:226px;}"]
+});
+const useDayCellStyles = /*#__PURE__*/__styles({
+  base: {
+    sj55zd: "f19n0e5",
+    Bceei9c: "f1k6fduh",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bqenvij: "fxldao9",
+    Bg96gwp: "f336tjw",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f11qmguv", "f1tyq0we"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"],
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    qhf8xq: "f10pi13n",
+    a9b677: "f1w9dchk",
+    Bsw6fvg: "f8pusc0",
+    Bbusuzp: "fqgauei",
+    cvlxnx: "fp6dsbd",
+    Bweudez: "f4xgodq",
+    hzfqlu: "fehmveg",
+    Bb91d7d: "ff78tpz",
+    dua3dm: "f128nre3",
+    z1p9vi: "f1elgve3",
+    Bsnevi5: "f15e7s3w",
+    xnb59o: "fts5qqo",
+    Bj67fi1: "f1lhgsq9",
+    B2gfgcj: "fdbuq6n",
+    B6cqqer: "f16j2ub3",
+    fpurfy: "f5hk6jp",
+    Fioj4w: ["f1d258es", "f1llk4aj"],
+    Bq9yiu4: "ftezgwa",
+    cpbo2x: ["f1llk4aj", "f1d258es"],
+    Bq268z6: "f1iohfpm"
+  }
+}, {
+  d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1k6fduh{cursor:pointer;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fxldao9{height:28px;}", ".f336tjw{line-height:28px;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f10pi13n{position:relative;}", ".f1w9dchk{width:28px;}", ".fp6dsbd.fui-CalendarDayGrid__hoverStyle{color:var(--colorNeutralForeground1Static);}", ".f4xgodq.fui-CalendarDayGrid__hoverStyle{background-color:var(--colorBrandBackgroundInvertedHover);}", ".f1lhgsq9.fui-CalendarDayGrid__pressedStyle{color:var(--colorNeutralForeground1Static);}", ".fdbuq6n.fui-CalendarDayGrid__pressedStyle{background-color:var(--colorBrandBackgroundInvertedPressed);}"],
+  m: [["@media (forced-colors: active){.f8pusc0{background-color:Window;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqgauei{color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fehmveg.fui-CalendarDayGrid__hoverStyle{background-color:Window;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.ff78tpz.fui-CalendarDayGrid__hoverStyle{color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f128nre3.fui-CalendarDayGrid__hoverStyle{outline-width:1px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1elgve3.fui-CalendarDayGrid__hoverStyle{outline-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f15e7s3w.fui-CalendarDayGrid__hoverStyle{outline-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fts5qqo.fui-CalendarDayGrid__hoverStyle{z-index:3;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f16j2ub3.fui-CalendarDayGrid__pressedStyle{background-color:Window;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f5hk6jp.fui-CalendarDayGrid__pressedStyle{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1d258es.fui-CalendarDayGrid__pressedStyle{border-right-color:Highlight;}.f1llk4aj.fui-CalendarDayGrid__pressedStyle{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.ftezgwa.fui-CalendarDayGrid__pressedStyle{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1llk4aj.fui-CalendarDayGrid__pressedStyle{border-left-color:Highlight;}.f1d258es.fui-CalendarDayGrid__pressedStyle{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1iohfpm.fui-CalendarDayGrid__pressedStyle{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useDaySelectedStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1vevd59",
+    sj55zd: "ff5vbop",
+    Bsw6fvg: "f1rirnrt",
+    Bjwas2f: "f132fbg1",
+    Bn1d65q: ["f1ene5x0", "fzbc999"],
+    Bxeuatn: "f6jgcol",
+    n51gp8: ["fzbc999", "f1ene5x0"],
+    Bbusuzp: "f1lkg8j3",
+    ycbfsm: "fkc42ay",
+    a3nq4f: "f1chdfq9",
+    Bnf3alp: "fq0dbue",
+    H2c3sd: "f3pe0v7",
+    qu8ld: "f3t0uu2",
+    Bg4iunc: "f1cikclm"
+  }
+}, {
+  d: [".f1vevd59{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}"],
+  m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fzbc999{border-left-color:Highlight;}.f1ene5x0{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3pe0v7:hover,.f3pe0v7.fui-CalendarDayGrid__hoverStyle,.f3pe0v7.fui-CalendarDayGrid__pressedStyle{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f3t0uu2:hover,.f3t0uu2.fui-CalendarDayGrid__hoverStyle,.f3t0uu2.fui-CalendarDayGrid__pressedStyle{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cikclm>.fui-CalendarDayGrid__dayMarker{background-color:Window;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  h: [".f1chdfq9:hover,.f1chdfq9.fui-CalendarDayGrid__hoverStyle,.f1chdfq9.fui-CalendarDayGrid__pressedStyle{color:var(--colorNeutralForeground1Static);}", ".fq0dbue:hover,.fq0dbue.fui-CalendarDayGrid__hoverStyle,.fq0dbue.fui-CalendarDayGrid__pressedStyle{background-color:var(--colorBrandBackgroundInvertedSelected);}"]
+});
+const useWeekRowStyles = /*#__PURE__*/__styles({
+  base: {
+    vin17d: "f5f2jbu",
+    Bf5fcs: "fywypte",
+    Ezkn3b: "f1ee2ue"
+  },
+  horizontalBackward: {
+    Bv12yb3: ["f1o9w3l8", "f1kwjajc"]
+  },
+  horizontalForward: {
+    Bv12yb3: ["f1kwjajc", "f1o9w3l8"]
+  },
+  verticalBackward: {
+    Bv12yb3: "fgl3yn7"
+  },
+  verticalForward: {
+    Bv12yb3: "faiu5ye"
+  }
+}, {
+  d: [".f5f2jbu{-webkit-animation-duration:0.367s;animation-duration:0.367s;}", ".fywypte{-webkit-animation-fill-mode:both;animation-fill-mode:both;}", ".f1ee2ue{-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);}", ".f1o9w3l8{-webkit-animation-name:f5j8bii,f2lgmc3;animation-name:f5j8bii,f2lgmc3;}", ".f1kwjajc{-webkit-animation-name:f5j8bii,fpktcv7;animation-name:f5j8bii,fpktcv7;}", ".fgl3yn7{-webkit-animation-name:f5j8bii,f3bv9km;animation-name:f5j8bii,f3bv9km;}", ".faiu5ye{-webkit-animation-name:f5j8bii,funtx0y;animation-name:f5j8bii,funtx0y;}"],
+  k: ["@-webkit-keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@-webkit-keyframes f2lgmc3{from{pointer-events:none;-webkit-transform:translate3d(-20px, 0, 0);-moz-transform:translate3d(-20px, 0, 0);-ms-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}", "@-webkit-keyframes fpktcv7{from{pointer-events:none;-webkit-transform:translate3d(20px, 0, 0);-moz-transform:translate3d(20px, 0, 0);-ms-transform:translate3d(20px, 0, 0);transform:translate3d(20px, 0, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}", "@keyframes f2lgmc3{from{pointer-events:none;-webkit-transform:translate3d(-20px, 0, 0);-moz-transform:translate3d(-20px, 0, 0);-ms-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}", "@keyframes fpktcv7{from{pointer-events:none;-webkit-transform:translate3d(20px, 0, 0);-moz-transform:translate3d(20px, 0, 0);-ms-transform:translate3d(20px, 0, 0);transform:translate3d(20px, 0, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}", "@-webkit-keyframes f3bv9km{from{pointer-events:none;-webkit-transform:translate3d(0, -20px, 0);-moz-transform:translate3d(0, -20px, 0);-ms-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}", "@keyframes f3bv9km{from{pointer-events:none;-webkit-transform:translate3d(0, -20px, 0);-moz-transform:translate3d(0, -20px, 0);-ms-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}", "@-webkit-keyframes funtx0y{from{pointer-events:none;-webkit-transform:translate3d(0, 20px, 0);-moz-transform:translate3d(0, 20px, 0);-ms-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}", "@keyframes funtx0y{from{pointer-events:none;-webkit-transform:translate3d(0, 20px, 0);-moz-transform:translate3d(0, 20px, 0);-ms-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0);}to{pointer-events:auto;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}"]
+});
+const useWeekDayLabelCellStyles = /*#__PURE__*/__styles({
+  base: {
+    vin17d: "fhsqnsn",
+    Bf5fcs: "fywypte",
+    Bv12yb3: "f1h7u52p",
+    Ezkn3b: "fjq4c94"
+  }
+}, {
+  d: [".fhsqnsn{-webkit-animation-duration:0.267s;animation-duration:0.267s;}", ".fywypte{-webkit-animation-fill-mode:both;animation-fill-mode:both;}", ".f1h7u52p{-webkit-animation-name:f5j8bii;animation-name:f5j8bii;}", ".fjq4c94{-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);}"],
+  k: ["@-webkit-keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}"]
+});
+const useWeekNumberCellStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f68mrw8",
+    h3c5rm: ["f7pw515", "fw35ms5"],
+    B9xav0g: "frpde29",
+    zhjwy3: ["fw35ms5", "f7pw515"],
+    Bekrc4i: ["f1hqa2wf", "finvdd3"],
+    vrafjx: ["fcdblym", "fjik90z"],
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "fxc4j92",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bqenvij: "fxldao9",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f11qmguv", "f1tyq0we"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"],
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    a9b677: "f1w9dchk"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".f1ewtqcl{box-sizing:border-box;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fxldao9{height:28px;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1w9dchk{width:28px;}"]
+});
+const useDayOutsideBoundsStyles = /*#__PURE__*/__styles({
+  base: {
+    x734em: "f1v4z6xg",
+    B0ssf13: "f1u9q7oh",
+    B8h8h5z: "f1a22lcc",
+    Bbusuzp: "f1dcs8yz"
+  }
+}, {
+  d: [".f1v4z6xg,.f1v4z6xg:disabled,.f1v4z6xg button,.f1v4z6xg.fui-CalendarDayGrid__hoverStyle,.f1v4z6xg.fui-CalendarDayGrid__pressedStyle{background-color:var(--colorTransparentBackground);}", ".f1u9q7oh,.f1u9q7oh:disabled,.f1u9q7oh button,.f1u9q7oh.fui-CalendarDayGrid__hoverStyle,.f1u9q7oh.fui-CalendarDayGrid__pressedStyle{color:var(--colorNeutralForegroundDisabled);}", ".f1a22lcc,.f1a22lcc:disabled,.f1a22lcc button,.f1a22lcc.fui-CalendarDayGrid__hoverStyle,.f1a22lcc.fui-CalendarDayGrid__pressedStyle{pointer-events:none;}"],
+  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useDayOutsideNavigatedMonthStyles = /*#__PURE__*/__styles({
+  lightenDaysOutsideNavigatedMonth: {
+    sj55zd: "fxc4j92",
+    Bhrd7zp: "figsok6",
+    Bbusuzp: "f1dcs8yz"
+  }
+}, {
+  d: [".fxc4j92{color:var(--colorNeutralForeground4);}", ".figsok6{font-weight:var(--fontWeightRegular);}"],
+  m: [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useDayButtonStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1c21dwh",
+    Bbmb7ep: ["f2i1086", "f1rlsnju"],
+    Beyfa6y: ["f1rlsnju", "f2i1086"],
+    B7oj6ja: ["f1stktl2", "f1127022"],
+    Btl43ni: ["f1127022", "f1stktl2"],
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    sj55zd: "f1ym3bx4",
+    Bceei9c: "f1k6fduh",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "ff5ikls",
+    Bqenvij: "frvgh55",
+    Bg96gwp: "f8xlz6g",
+    B68tc82: "f1mtd64y",
+    Bmxbyg5: "f1y7q3j9",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    a9b677: "fq4mcun",
+    Bx0yju7: "f10y451g",
+    l98f4w: "f1dwpgx3"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f2i1086{border-bottom-right-radius:2px;}", ".f1rlsnju{border-bottom-left-radius:2px;}", ".f1stktl2{border-top-right-radius:2px;}", ".f1127022{border-top-left-radius:2px;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1ym3bx4{color:inherit;}", ".f1k6fduh{cursor:pointer;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".ff5ikls{font-weight:inherit;}", ".frvgh55{height:24px;}", ".f8xlz6g{line-height:24px;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fq4mcun{width:24px;}", ".f10y451gspan{height:inherit;}", ".f1dwpgx3span{line-height:inherit;}"]
+});
+const useDayIsTodayStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "ffp7eso",
+    Bbmb7ep: ["f1xbx3v5", "fh9p2o2"],
+    Beyfa6y: ["fh9p2o2", "f1xbx3v5"],
+    B7oj6ja: ["f18mldvw", "f3h6kr5"],
+    Btl43ni: ["f3h6kr5", "f18mldvw"],
+    sj55zd: "f1phragk",
+    Bhrd7zp: "fl43uef",
+    Bsw6fvg: "fg374yq",
+    Bjwas2f: "fx4t0an",
+    Bn1d65q: ["f1bd7qk0", "fk5vpic"],
+    Bxeuatn: "fgxnpfp",
+    n51gp8: ["fk5vpic", "f1bd7qk0"],
+    Bbusuzp: "f1yig07e",
+    ycbfsm: "fkc42ay",
+    jxbfoe: "fj0lumn",
+    Bg4iunc: "f1cikclm"
+  }
+}, {
+  d: [".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1xbx3v5{border-bottom-right-radius:100%;}", ".fh9p2o2{border-bottom-left-radius:100%;}", ".f18mldvw{border-top-right-radius:100%;}", ".f3h6kr5{border-top-left-radius:100%;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fj0lumn>.fui-CalendarDayGrid__dayMarker{background-color:var(--colorNeutralForegroundOnBrand);}"],
+  m: [["@media (forced-colors: active){.fg374yq{background-color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fx4t0an{border-top-color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1bd7qk0{border-right-color:WindowText;}.fk5vpic{border-left-color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fgxnpfp{border-bottom-color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fk5vpic{border-left-color:WindowText;}.f1bd7qk0{border-right-color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yig07e{color:Window;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cikclm>.fui-CalendarDayGrid__dayMarker{background-color:Window;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useFirstTransitionWeekStyles = /*#__PURE__*/__styles({
+  base: {
+    Bqenvij: "fniina8",
+    abs64n: "fk73vx1",
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    qhf8xq: "f1euv43f",
+    a9b677: "f3tsq5r"
+  },
+  verticalForward: {
+    vin17d: "f5f2jbu",
+    Bf5fcs: "fywypte",
+    Bv12yb3: "fb3mxun",
+    Ezkn3b: "f1ee2ue"
+  }
+}, {
+  d: [".fniina8{height:0;}", ".fk73vx1{opacity:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1euv43f{position:absolute;}", ".f3tsq5r{width:0;}", ".f5f2jbu{-webkit-animation-duration:0.367s;animation-duration:0.367s;}", ".fywypte{-webkit-animation-fill-mode:both;animation-fill-mode:both;}", ".fb3mxun{-webkit-animation-name:f199e34v,f76svrd,fhwv0sk;animation-name:f199e34v,f76svrd,fhwv0sk;}", ".f1ee2ue{-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);}"],
+  k: ["@-webkit-keyframes f199e34v{from{opacity:1;}to{opacity:0;visibility:hidden;}}", "@keyframes f199e34v{from{opacity:1;}to{opacity:0;visibility:hidden;}}", "@-webkit-keyframes f76svrd{from{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}to{-webkit-transform:translate3d(0, -20px, 0);-moz-transform:translate3d(0, -20px, 0);-ms-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0);}}", "@keyframes f76svrd{from{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}to{-webkit-transform:translate3d(0, -20px, 0);-moz-transform:translate3d(0, -20px, 0);-ms-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0);}}", "@-webkit-keyframes fhwv0sk{100%{height:0px;overflow-x:hidden;overflow-y:hidden;width:0px;}99.9%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}0%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}}", "@keyframes fhwv0sk{100%{height:0px;overflow-x:hidden;overflow-y:hidden;width:0px;}99.9%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}0%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}}"]
+});
+const useLastTransitionWeekStyles = /*#__PURE__*/__styles({
+  base: {
+    Bqenvij: "fniina8",
+    B6of3ja: "flykjtj",
+    abs64n: "fk73vx1",
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    qhf8xq: "f1euv43f",
+    a9b677: "f3tsq5r"
+  },
+  verticalBackward: {
+    vin17d: "f5f2jbu",
+    Bf5fcs: "fywypte",
+    Bv12yb3: "f1h56eac",
+    Ezkn3b: "f1ee2ue"
+  }
+}, {
+  d: [".fniina8{height:0;}", ".flykjtj{margin-top:-28px;}", ".fk73vx1{opacity:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1euv43f{position:absolute;}", ".f3tsq5r{width:0;}", ".f5f2jbu{-webkit-animation-duration:0.367s;animation-duration:0.367s;}", ".fywypte{-webkit-animation-fill-mode:both;animation-fill-mode:both;}", ".f1h56eac{-webkit-animation-name:f199e34v,f18895iq,fhwv0sk;animation-name:f199e34v,f18895iq,fhwv0sk;}", ".f1ee2ue{-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);}"],
+  k: ["@-webkit-keyframes f199e34v{from{opacity:1;}to{opacity:0;visibility:hidden;}}", "@keyframes f199e34v{from{opacity:1;}to{opacity:0;visibility:hidden;}}", "@-webkit-keyframes f18895iq{from{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}to{-webkit-transform:translate3d(0, 20px, 0);-moz-transform:translate3d(0, 20px, 0);-ms-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0);}}", "@keyframes f18895iq{from{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}to{-webkit-transform:translate3d(0, 20px, 0);-moz-transform:translate3d(0, 20px, 0);-ms-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0);}}", "@-webkit-keyframes fhwv0sk{100%{height:0px;overflow-x:hidden;overflow-y:hidden;width:0px;}99.9%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}0%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}}", "@keyframes fhwv0sk{100%{height:0px;overflow-x:hidden;overflow-y:hidden;width:0px;}99.9%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}0%{height:28px;overflow-x:visible;overflow-y:visible;width:100%;}}"]
+});
+const useDayMarkerStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "fnggedw",
+    Bbmb7ep: ["f1xbx3v5", "fh9p2o2"],
+    Beyfa6y: ["fh9p2o2", "f1xbx3v5"],
+    B7oj6ja: ["f18mldvw", "f3h6kr5"],
+    Btl43ni: ["f3h6kr5", "f18mldvw"],
+    B5kzvoi: "f1oq0udb",
+    Bqenvij: "f6ywr7j",
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    B6of3ja: "fgr6219",
+    t21cq0: ["f1ujusj6", "fcgxt0o"],
+    jrapky: "f10jk5vf",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    qhf8xq: "f1euv43f",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    a9b677: "faro0ui",
+    Bsw6fvg: "fg374yq",
+    ycbfsm: "fkc42ay"
+  }
+}, {
+  d: [".fnggedw{background-color:var(--colorBrandForeground2);}", ".f1xbx3v5{border-bottom-right-radius:100%;}", ".fh9p2o2{border-bottom-left-radius:100%;}", ".f18mldvw{border-top-right-radius:100%;}", ".f3h6kr5{border-top-left-radius:100%;}", ".f1oq0udb{bottom:1px;}", ".f6ywr7j{height:4px;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".f1euv43f{position:absolute;}", ".faro0ui{width:4px;}"],
+  m: [["@media (forced-colors: active){.fg374yq{background-color:WindowText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useCornerBorderAndRadiusStyles = /*#__PURE__*/__styles({
+  corners: {
+    Cy64m2: ["fgk2v8v", "flgychs"],
+    Bnn43bw: ["fon8hnx", "f1dzb7s0"],
+    feanbc: ["f5gufe6", "f6b3fnj"],
+    B4268ip: ["fo35n0e", "f96pych"]
+  }
+}, {
+  d: [".fgk2v8v.fui-CalendarDayGrid__topRightCornerDate{border-top-right-radius:2px;}", ".flgychs.fui-CalendarDayGrid__topRightCornerDate{border-top-left-radius:2px;}", ".fon8hnx.fui-CalendarDayGrid__topLeftCornerDate{border-top-left-radius:2px;}", ".f1dzb7s0.fui-CalendarDayGrid__topLeftCornerDate{border-top-right-radius:2px;}", ".f5gufe6.fui-CalendarDayGrid__bottomRightCornerDate{border-bottom-right-radius:2px;}", ".f6b3fnj.fui-CalendarDayGrid__bottomRightCornerDate{border-bottom-left-radius:2px;}", ".fo35n0e.fui-CalendarDayGrid__bottomLeftCornerDate{border-bottom-left-radius:2px;}", ".f96pych.fui-CalendarDayGrid__bottomLeftCornerDate{border-bottom-right-radius:2px;}"]
+});
+/**
+ * @internal
+ *
+ * Apply styling to the CalendarDayGrid slots based on the state
+ */
+export const useCalendarDayGridStyles_unstable = props => {
+  const wrapperStyles = useWrapperStyles();
+  const tableStyles = useTableStyles();
+  const dayCellStyles = useDayCellStyles();
+  const daySelectedStyles = useDaySelectedStyles();
+  const weekRowStyles = useWeekRowStyles();
+  const weekDayLabelCellStyles = useWeekDayLabelCellStyles();
+  const weekNumberCellStyles = useWeekNumberCellStyles();
+  const dayOutsideBoundsStyles = useDayOutsideBoundsStyles();
+  const dayOutsideNavigatedMonthStyles = useDayOutsideNavigatedMonthStyles();
+  const dayButtonStyles = useDayButtonStyles();
+  const dayIsTodayStyles = useDayIsTodayStyles();
+  const firstTransitionWeekStyles = useFirstTransitionWeekStyles();
+  const lastTransitionWeekStyles = useLastTransitionWeekStyles();
+  const dayMarkerStyles = useDayMarkerStyles();
+  const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();
+  const {
+    animateBackwards,
+    animationDirection,
+    lightenDaysOutsideNavigatedMonth,
+    showWeekNumbers
+  } = props;
+  return {
+    wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base),
+    table: mergeClasses(calendarDayGridClassNames.table, tableStyles.base, showWeekNumbers && tableStyles.showWeekNumbers),
+    dayCell: mergeClasses(calendarDayGridClassNames.dayCell, dayCellStyles.base, cornerBorderAndRadiusStyles.corners),
+    daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),
+    weekRow: mergeClasses(calendarDayGridClassNames.weekRow, animateBackwards !== undefined && weekRowStyles.base, animateBackwards !== undefined && (animationDirection === AnimationDirection.Horizontal ? animateBackwards ? weekRowStyles.horizontalBackward : weekRowStyles.horizontalForward : animateBackwards ? weekRowStyles.verticalBackward : weekRowStyles.verticalForward)),
+    weekDayLabelCell: mergeClasses(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),
+    weekNumberCell: mergeClasses(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),
+    dayOutsideBounds: mergeClasses(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),
+    dayOutsideNavigatedMonth: mergeClasses(calendarDayGridClassNames.dayOutsideNavigatedMonth, lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth),
+    dayButton: mergeClasses(calendarDayGridClassNames.dayButton, dayButtonStyles.base),
+    dayIsToday: mergeClasses(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),
+    firstTransitionWeek: mergeClasses(calendarDayGridClassNames.firstTransitionWeek, firstTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== AnimationDirection.Horizontal && !animateBackwards && firstTransitionWeekStyles.verticalForward),
+    lastTransitionWeek: mergeClasses(calendarDayGridClassNames.lastTransitionWeek, lastTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== AnimationDirection.Horizontal && animateBackwards && lastTransitionWeekStyles.verticalBackward),
+    dayMarker: mergeClasses(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base)
+  };
+};
+//# sourceMappingURL=useCalendarDayGridStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","DURATION_2","DURATION_3","EASING_FUNCTION_1","EASING_FUNCTION_2","FADE_IN","FADE_OUT","SLIDE_DOWN_IN20","SLIDE_DOWN_OUT20","SLIDE_LEFT_IN20","SLIDE_RIGHT_IN20","SLIDE_UP_IN20","SLIDE_UP_OUT20","TRANSITION_ROW_DISAPPEARANCE","AnimationDirection","weekCornersClassNames","calendarDayGridClassNames","wrapper","table","dayCell","daySelected","weekRow","weekDayLabelCell","weekNumberCell","dayOutsideBounds","dayOutsideNavigatedMonth","dayButton","dayIsToday","firstTransitionWeek","lastTransitionWeek","dayMarker","extraCalendarDayGridClassNames","hoverStyle","pressedStyle","useWrapperStyles","base","Byoj8tv","d","useTableStyles","po53p8","Bxjg3zr","Be2twd7","B6of3ja","qhf8xq","B73mfa3","fsow6f","a9b677","showWeekNumbers","useDayCellStyles","sj55zd","Bceei9c","Bhrd7zp","Bqenvij","Bg96gwp","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","uwmqm3","Bsw6fvg","Bbusuzp","cvlxnx","Bweudez","hzfqlu","Bb91d7d","dua3dm","z1p9vi","Bsnevi5","xnb59o","Bj67fi1","B2gfgcj","B6cqqer","fpurfy","Fioj4w","Bq9yiu4","cpbo2x","Bq268z6","m","useDaySelectedStyles","De3pzq","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","ycbfsm","a3nq4f","Bnf3alp","H2c3sd","qu8ld","Bg4iunc","h","useWeekRowStyles","vin17d","Bf5fcs","Ezkn3b","horizontalBackward","Bv12yb3","horizontalForward","verticalBackward","verticalForward","k","useWeekDayLabelCellStyles","useWeekNumberCellStyles","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bekrc4i","vrafjx","B7ck84d","useDayOutsideBoundsStyles","x734em","B0ssf13","B8h8h5z","useDayOutsideNavigatedMonthStyles","lightenDaysOutsideNavigatedMonth","useDayButtonStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","icvyot","oivjwe","wvpqe5","B68tc82","Bmxbyg5","Bx0yju7","l98f4w","useDayIsTodayStyles","jxbfoe","useFirstTransitionWeekStyles","abs64n","useLastTransitionWeekStyles","useDayMarkerStyles","B5kzvoi","oyh7mz","j35jbq","useCornerBorderAndRadiusStyles","corners","Cy64m2","Bnn43bw","feanbc","B4268ip","useCalendarDayGridStyles_unstable","props","wrapperStyles","tableStyles","dayCellStyles","daySelectedStyles","weekRowStyles","weekDayLabelCellStyles","weekNumberCellStyles","dayOutsideBoundsStyles","dayOutsideNavigatedMonthStyles","dayButtonStyles","dayIsTodayStyles","firstTransitionWeekStyles","lastTransitionWeekStyles","dayMarkerStyles","cornerBorderAndRadiusStyles","animateBackwards","animationDirection","undefined","Horizontal"],"sources":["../../../src/components/CalendarDayGrid/useCalendarDayGridStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport {\n  DURATION_2,\n  DURATION_3,\n  EASING_FUNCTION_1,\n  EASING_FUNCTION_2,\n  FADE_IN,\n  FADE_OUT,\n  SLIDE_DOWN_IN20,\n  SLIDE_DOWN_OUT20,\n  SLIDE_LEFT_IN20,\n  SLIDE_RIGHT_IN20,\n  SLIDE_UP_IN20,\n  SLIDE_UP_OUT20,\n  TRANSITION_ROW_DISAPPEARANCE,\n} from '../../utils';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport { weekCornersClassNames } from './useWeekCornerStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayGridStyles, CalendarDayGridStyleProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport const calendarDayGridClassNames: SlotClassNames<CalendarDayGridStyles> = {\n  wrapper: 'fui-CalendarDayGrid__wrapper',\n  table: 'fui-CalendarDayGrid__table',\n  dayCell: 'fui-CalendarDayGrid__dayCell',\n  daySelected: 'fui-CalendarDayGrid__daySelected',\n  weekRow: 'fui-CalendarDayGrid__weekRow',\n  weekDayLabelCell: 'fui-CalendarDayGrid__weekDayLabelCell',\n  weekNumberCell: 'fui-CalendarDayGrid__weekNumberCell',\n  dayOutsideBounds: 'fui-CalendarDayGrid__dayOutsideBounds',\n  dayOutsideNavigatedMonth: 'fui-CalendarDayGrid__dayOutsideNavigatedMonth',\n  dayButton: 'fui-CalendarDayGrid__dayButton',\n  dayIsToday: 'fui-CalendarDayGrid__dayIsToday',\n  firstTransitionWeek: 'fui-CalendarDayGrid__firstTransitionWeek',\n  lastTransitionWeek: 'fui-CalendarDayGrid__lastTransitionWeek',\n  dayMarker: 'fui-CalendarDayGrid__dayMarker',\n};\n\n/**\n * @internal\n */\nexport const extraCalendarDayGridClassNames = {\n  hoverStyle: 'fui-CalendarDayGrid__hoverStyle',\n  pressedStyle: 'fui-CalendarDayGrid__pressedStyle',\n};\n\nconst useWrapperStyles = makeStyles({\n  base: {\n    paddingBottom: '10px',\n  },\n});\n\nconst useTableStyles = makeStyles({\n  base: {\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n    fontSize: 'inherit',\n    marginTop: '4px',\n    paddingBottom: '10px',\n    position: 'relative',\n    tableLayout: 'fixed',\n    textAlign: 'center',\n    width: '196px',\n  },\n  showWeekNumbers: {\n    width: '226px',\n  },\n});\n\nconst useDayCellStyles = makeStyles({\n  base: {\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    height: '28px',\n    lineHeight: '28px',\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n    position: 'relative',\n    width: '28px',\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n\n    [`&.${extraCalendarDayGridClassNames.hoverStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        color: 'WindowText',\n        ...shorthands.outline('1px', 'solid', 'Highlight'),\n        zIndex: 3,\n      },\n    },\n\n    [`&.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n    },\n  },\n});\n\nconst useDaySelectedStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    color: tokens.colorNeutralForeground1Static,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n    },\n\n    [`&:hover, &.${extraCalendarDayGridClassNames.hoverStyle}, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n  },\n});\n\nconst useWeekRowStyles = makeStyles({\n  base: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n  horizontalBackward: {\n    animationName: [FADE_IN, SLIDE_RIGHT_IN20],\n  },\n  horizontalForward: {\n    animationName: [FADE_IN, SLIDE_LEFT_IN20],\n  },\n  verticalBackward: {\n    animationName: [FADE_IN, SLIDE_DOWN_IN20],\n  },\n  verticalForward: {\n    animationName: [FADE_IN, SLIDE_UP_IN20],\n  },\n});\n\nconst useWeekDayLabelCellStyles = makeStyles({\n  base: {\n    animationDuration: DURATION_2,\n    animationFillMode: 'both',\n    animationName: FADE_IN,\n    animationTimingFunction: EASING_FUNCTION_2,\n  },\n});\n\nconst useWeekNumberCellStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    ...shorthands.borderRight('1px', 'solid'),\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground4,\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    height: '28px',\n    ...shorthands.margin(0),\n    ...shorthands.padding(0),\n    width: '28px',\n  },\n});\n\nconst useDayOutsideBoundsStyles = makeStyles({\n  base: {\n    [`&, &:disabled, & button, &.${extraCalendarDayGridClassNames.hoverStyle}` +\n    `, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useDayOutsideNavigatedMonthStyles = makeStyles({\n  lightenDaysOutsideNavigatedMonth: {\n    color: tokens.colorNeutralForeground4,\n    fontWeight: tokens.fontWeightRegular,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useDayButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderRadius('2px'),\n    ...shorthands.borderStyle('none'),\n    color: 'inherit',\n    cursor: 'pointer',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: 'inherit',\n    height: '24px',\n    lineHeight: '24px',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    width: '24px',\n\n    '&span': {\n      height: 'inherit',\n      lineHeight: 'inherit',\n    },\n  },\n});\n\nconst useDayIsTodayStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderRadius('100%'),\n    color: tokens.colorNeutralForegroundOnBrand,\n    fontWeight: tokens.fontWeightSemibold,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      ...shorthands.borderColor('WindowText'),\n      color: 'Window',\n      forcedColorAdjust: 'none',\n    },\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n  },\n});\n\nconst useFirstTransitionWeekStyles = makeStyles({\n  base: {\n    height: 0,\n    opacity: 0,\n    ...shorthands.overflow('hidden'),\n    position: 'absolute',\n    width: 0,\n  },\n  verticalForward: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationName: [FADE_OUT, SLIDE_UP_OUT20, TRANSITION_ROW_DISAPPEARANCE],\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n});\n\nconst useLastTransitionWeekStyles = makeStyles({\n  base: {\n    height: 0,\n    marginTop: '-28px',\n    opacity: 0,\n    ...shorthands.overflow('hidden'),\n    position: 'absolute',\n    width: 0,\n  },\n  verticalBackward: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationName: [FADE_OUT, SLIDE_DOWN_OUT20, TRANSITION_ROW_DISAPPEARANCE],\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n});\n\nconst useDayMarkerStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorBrandForeground2,\n    ...shorthands.borderRadius('100%'),\n    bottom: '1px',\n    height: '4px',\n    left: 0,\n    ...shorthands.margin('auto'),\n    position: 'absolute',\n    right: 0,\n    width: '4px',\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      forcedColorAdjust: 'none',\n    },\n  },\n});\n\nconst useCornerBorderAndRadiusStyles = makeStyles({\n  corners: {\n    [`&.${weekCornersClassNames.topRightCornerDate}`]: {\n      borderTopRightRadius: '2px',\n    },\n    [`&.${weekCornersClassNames.topLeftCornerDate}`]: {\n      borderTopLeftRadius: '2px',\n    },\n    [`&.${weekCornersClassNames.bottomRightCornerDate}`]: {\n      borderBottomRightRadius: '2px',\n    },\n    [`&.${weekCornersClassNames.bottomLeftCornerDate}`]: {\n      borderBottomLeftRadius: '2px',\n    },\n  },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarDayGrid slots based on the state\n */\nexport const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStyleProps): CalendarDayGridStyles => {\n  const wrapperStyles = useWrapperStyles();\n  const tableStyles = useTableStyles();\n  const dayCellStyles = useDayCellStyles();\n  const daySelectedStyles = useDaySelectedStyles();\n  const weekRowStyles = useWeekRowStyles();\n  const weekDayLabelCellStyles = useWeekDayLabelCellStyles();\n  const weekNumberCellStyles = useWeekNumberCellStyles();\n  const dayOutsideBoundsStyles = useDayOutsideBoundsStyles();\n  const dayOutsideNavigatedMonthStyles = useDayOutsideNavigatedMonthStyles();\n  const dayButtonStyles = useDayButtonStyles();\n  const dayIsTodayStyles = useDayIsTodayStyles();\n  const firstTransitionWeekStyles = useFirstTransitionWeekStyles();\n  const lastTransitionWeekStyles = useLastTransitionWeekStyles();\n  const dayMarkerStyles = useDayMarkerStyles();\n  const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();\n\n  const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;\n\n  return {\n    wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base),\n    table: mergeClasses(\n      calendarDayGridClassNames.table,\n      tableStyles.base,\n      showWeekNumbers && tableStyles.showWeekNumbers,\n    ),\n    dayCell: mergeClasses(calendarDayGridClassNames.dayCell, dayCellStyles.base, cornerBorderAndRadiusStyles.corners),\n    daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),\n    weekRow: mergeClasses(\n      calendarDayGridClassNames.weekRow,\n      animateBackwards !== undefined && weekRowStyles.base,\n      animateBackwards !== undefined &&\n        (animationDirection === AnimationDirection.Horizontal\n          ? animateBackwards\n            ? weekRowStyles.horizontalBackward\n            : weekRowStyles.horizontalForward\n          : animateBackwards\n          ? weekRowStyles.verticalBackward\n          : weekRowStyles.verticalForward),\n    ),\n    weekDayLabelCell: mergeClasses(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),\n    weekNumberCell: mergeClasses(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),\n    dayOutsideBounds: mergeClasses(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),\n    dayOutsideNavigatedMonth: mergeClasses(\n      calendarDayGridClassNames.dayOutsideNavigatedMonth,\n      lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth,\n    ),\n    dayButton: mergeClasses(calendarDayGridClassNames.dayButton, dayButtonStyles.base),\n    dayIsToday: mergeClasses(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),\n    firstTransitionWeek: mergeClasses(\n      calendarDayGridClassNames.firstTransitionWeek,\n      firstTransitionWeekStyles.base,\n      animateBackwards !== undefined &&\n        animationDirection !== AnimationDirection.Horizontal &&\n        !animateBackwards &&\n        firstTransitionWeekStyles.verticalForward,\n    ),\n    lastTransitionWeek: mergeClasses(\n      calendarDayGridClassNames.lastTransitionWeek,\n      lastTransitionWeekStyles.base,\n      animateBackwards !== undefined &&\n        animationDirection !== AnimationDirection.Horizontal &&\n        animateBackwards &&\n        lastTransitionWeekStyles.verticalBackward,\n    ),\n    dayMarker: mergeClasses(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),\n  };\n};\n"],"mappings":"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"}

package/lib/components/CalendarDayGrid/useWeekCornerStyles.js

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

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

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