@fluentui/react-calendar-compat 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -5
- package/lib/components/Calendar/useCalendarStyles.styles.js +1 -0
- package/lib/components/Calendar/useCalendarStyles.styles.js.map +1 -1
- package/lib/components/Calendar/useCalendarStyles.styles.raw.js +1 -1
- package/lib/components/Calendar/useCalendarStyles.styles.raw.js.map +1 -1
- package/lib/components/CalendarDay/CalendarDay.js +2 -1
- package/lib/components/CalendarDay/CalendarDay.js.map +1 -1
- package/lib/components/CalendarDay/useCalendarDayStyles.styles.js +3 -10
- package/lib/components/CalendarDay/useCalendarDayStyles.styles.js.map +1 -1
- package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js +2 -9
- package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map +1 -1
- package/lib/components/CalendarDayGrid/CalendarDayGrid.js +33 -8
- package/lib/components/CalendarDayGrid/CalendarDayGrid.js.map +1 -1
- package/lib/components/CalendarDayGrid/CalendarGridDayCell.js +1 -1
- package/lib/components/CalendarDayGrid/CalendarGridDayCell.js.map +1 -1
- package/lib/components/CalendarDayGrid/CalendarGridRow.js +6 -5
- package/lib/components/CalendarDayGrid/CalendarGridRow.js.map +1 -1
- package/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js +10 -3
- package/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js.map +1 -1
- package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js +16 -58
- package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js.map +1 -1
- package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js +12 -67
- package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map +1 -1
- package/lib/components/CalendarDayGrid/useWeeks.js +0 -1
- package/lib/components/CalendarDayGrid/useWeeks.js.map +1 -1
- package/lib/components/CalendarMonth/CalendarMonth.js +12 -4
- package/lib/components/CalendarMonth/CalendarMonth.js.map +1 -1
- package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.js +1 -0
- package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.js.map +1 -1
- package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js +1 -1
- package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map +1 -1
- package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.js +5 -33
- package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.js.map +1 -1
- package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js +4 -41
- package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map +1 -1
- package/lib/components/CalendarYear/CalendarYear.js +17 -10
- package/lib/components/CalendarYear/CalendarYear.js.map +1 -1
- package/lib/components/CalendarYear/useCalendarYearStyles.styles.js +1 -0
- package/lib/components/CalendarYear/useCalendarYearStyles.styles.js.map +1 -1
- package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js +1 -1
- package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map +1 -1
- package/lib/utils/animations.js +24 -18
- package/lib/utils/animations.js.map +1 -1
- package/lib/utils/calendarMotions.js +93 -0
- package/lib/utils/calendarMotions.js.map +1 -0
- package/lib/utils/index.js +2 -2
- package/lib/utils/index.js.map +1 -1
- package/lib-commonjs/components/Calendar/useCalendarStyles.styles.js +1 -0
- package/lib-commonjs/components/Calendar/useCalendarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CalendarDay/CalendarDay.js +2 -1
- package/lib-commonjs/components/CalendarDay/CalendarDay.js.map +1 -1
- package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.js +3 -15
- package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.raw.js +2 -9
- package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CalendarDayGrid/CalendarDayGrid.js +33 -8
- package/lib-commonjs/components/CalendarDayGrid/CalendarDayGrid.js.map +1 -1
- package/lib-commonjs/components/CalendarDayGrid/CalendarGridDayCell.js +1 -1
- package/lib-commonjs/components/CalendarDayGrid/CalendarGridDayCell.js.map +1 -1
- package/lib-commonjs/components/CalendarDayGrid/CalendarGridRow.js +6 -5
- package/lib-commonjs/components/CalendarDayGrid/CalendarGridRow.js.map +1 -1
- package/lib-commonjs/components/CalendarDayGrid/CalendarMonthHeaderRow.js +9 -3
- package/lib-commonjs/components/CalendarDayGrid/CalendarMonthHeaderRow.js.map +1 -1
- package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js +16 -98
- package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js +12 -67
- package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CalendarDayGrid/useWeeks.js +0 -1
- package/lib-commonjs/components/CalendarDayGrid/useWeeks.js.map +1 -1
- package/lib-commonjs/components/CalendarMonth/CalendarMonth.js +12 -4
- package/lib-commonjs/components/CalendarMonth/CalendarMonth.js.map +1 -1
- package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.js +1 -0
- package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.js +6 -56
- package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js +4 -41
- package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CalendarYear/CalendarYear.js +17 -10
- package/lib-commonjs/components/CalendarYear/CalendarYear.js.map +1 -1
- package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.js +1 -0
- package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/utils/animations.js +12 -11
- package/lib-commonjs/utils/animations.js.map +1 -1
- package/lib-commonjs/utils/calendarMotions.js +105 -0
- package/lib-commonjs/utils/calendarMotions.js.map +1 -0
- package/lib-commonjs/utils/index.js +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/package.json +6 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/animations.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/utils/animations.ts"],"sourcesContent":["import { motionTokens } from '@fluentui/react-motion';\n\n// === EASING FUNCTIONS ===\n\n/** @deprecated Slide animations now use motion components. Use motionTokens.curveDecelerateMax instead. */\nexport const EASING_FUNCTION_1 = motionTokens.curveDecelerateMax;\n\n/** @deprecated Fade animations now use Fade.In motion component. No exact motion token equivalent. */\nexport const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';\n\n// === DURATIONS ===\n\n/** @deprecated No longer used internally. */\nexport const DURATION_1 = `${motionTokens.durationFast}ms`;\n\n/** @deprecated Fade animations now use Fade.In motion component with motionTokens.durationGentle. */\nexport const DURATION_2 = `${motionTokens.durationGentle}ms`;\n\n/** @deprecated Slide animations now use motion components with motionTokens.durationSlower. */\nexport const DURATION_3 = `${motionTokens.durationSlower}ms`;\n\n/** @deprecated No longer used internally. */\nexport const DURATION_4 = `${motionTokens.durationUltraSlow}ms`;\n\n// === FADE ANIMATIONS ===\n\n/** @deprecated Fade animations now use Fade.In motion component. */\nexport const FADE_IN = {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n};\n\n/** @deprecated Slide animations now use motion components. */\nexport const FADE_OUT = {\n from: {\n opacity: 1,\n },\n to: {\n opacity: 0,\n visibility: 'hidden' as const,\n },\n};\n\n// === SLIDE ANIMATIONS ===\n\n/** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */\nexport const SLIDE_DOWN_IN20 = {\n from: {\n pointerEvents: 'none' as const,\n transform: 'translate3d(0, -20px, 0)',\n },\n to: {\n pointerEvents: 'auto' as const,\n transform: 'translate3d(0, 0, 0)',\n },\n};\n\n/** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */\nexport const SLIDE_UP_IN20 = {\n from: {\n pointerEvents: 'none' as const,\n transform: 'translate3d(0, 20px, 0)',\n },\n to: {\n pointerEvents: 'auto' as const,\n transform: 'translate3d(0, 0, 0)',\n },\n};\n\n/** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */\nexport const SLIDE_LEFT_IN20 = {\n from: {\n pointerEvents: 'none' as const,\n transform: 'translate3d(20px, 0, 0)',\n },\n to: {\n pointerEvents: 'auto' as const,\n transform: 'translate3d(0, 0, 0)',\n },\n};\n\n/** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */\nexport const SLIDE_RIGHT_IN20 = {\n from: {\n pointerEvents: 'none' as const,\n transform: 'translate3d(-20px, 0, 0)',\n },\n to: {\n pointerEvents: 'auto' as const,\n transform: 'translate3d(0, 0, 0)',\n },\n};\n\n/** @deprecated Slide-out animations now use the `DirectionalSlideOut` motion component. */\nexport const SLIDE_DOWN_OUT20 = {\n from: {\n transform: 'translate3d(0, 0, 0)',\n },\n to: {\n transform: 'translate3d(0, 20px, 0)',\n },\n};\n\n/** @deprecated Slide-out animations now use the `DirectionalSlideOut` motion component. */\nexport const SLIDE_UP_OUT20 = {\n from: {\n transform: 'translate3d(0, 0, 0)',\n },\n to: {\n transform: 'translate3d(0, -20px, 0)',\n },\n};\n\n// === OTHER TRANSITIONS ===\n\n/** @deprecated No longer used internally. */\nexport const TRANSITION_ROW_DISAPPEARANCE = {\n '100%': {\n height: '0px',\n overflow: 'hidden',\n width: '0px',\n },\n '99.9%': {\n height: '28px',\n overflow: 'visible',\n width: '100%',\n },\n '0%': {\n height: '28px',\n overflow: 'visible',\n width: '100%',\n },\n};\n"],"names":["motionTokens","EASING_FUNCTION_1","curveDecelerateMax","EASING_FUNCTION_2","DURATION_1","durationFast","DURATION_2","durationGentle","DURATION_3","durationSlower","DURATION_4","durationUltraSlow","FADE_IN","from","opacity","to","FADE_OUT","visibility","SLIDE_DOWN_IN20","pointerEvents","transform","SLIDE_UP_IN20","SLIDE_LEFT_IN20","SLIDE_RIGHT_IN20","SLIDE_DOWN_OUT20","SLIDE_UP_OUT20","TRANSITION_ROW_DISAPPEARANCE","height","overflow","width"],"mappings":"AAAA,SAASA,YAAY,QAAQ,yBAAyB;AAEtD,2BAA2B;AAE3B,yGAAyG,GACzG,OAAO,MAAMC,oBAAoBD,aAAaE,kBAAkB,CAAC;AAEjE,oGAAoG,GACpG,OAAO,MAAMC,oBAAoB,8BAA8B;AAE/D,oBAAoB;AAEpB,2CAA2C,GAC3C,OAAO,MAAMC,aAAa,GAAGJ,aAAaK,YAAY,CAAC,EAAE,CAAC,CAAC;AAE3D,mGAAmG,GACnG,OAAO,MAAMC,aAAa,GAAGN,aAAaO,cAAc,CAAC,EAAE,CAAC,CAAC;AAE7D,6FAA6F,GAC7F,OAAO,MAAMC,aAAa,GAAGR,aAAaS,cAAc,CAAC,EAAE,CAAC,CAAC;AAE7D,2CAA2C,GAC3C,OAAO,MAAMC,aAAa,GAAGV,aAAaW,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAEhE,0BAA0B;AAE1B,kEAAkE,GAClE,OAAO,MAAMC,UAAU;IACrBC,MAAM;QACJC,SAAS;IACX;IACAC,IAAI;QACFD,SAAS;IACX;AACF,EAAE;AAEF,4DAA4D,GAC5D,OAAO,MAAME,WAAW;IACtBH,MAAM;QACJC,SAAS;IACX;IACAC,IAAI;QACFD,SAAS;QACTG,YAAY;IACd;AACF,EAAE;AAEF,2BAA2B;AAE3B,uFAAuF,GACvF,OAAO,MAAMC,kBAAkB;IAC7BL,MAAM;QACJM,eAAe;QACfC,WAAW;IACb;IACAL,IAAI;QACFI,eAAe;QACfC,WAAW;IACb;AACF,EAAE;AAEF,uFAAuF,GACvF,OAAO,MAAMC,gBAAgB;IAC3BR,MAAM;QACJM,eAAe;QACfC,WAAW;IACb;IACAL,IAAI;QACFI,eAAe;QACfC,WAAW;IACb;AACF,EAAE;AAEF,uFAAuF,GACvF,OAAO,MAAME,kBAAkB;IAC7BT,MAAM;QACJM,eAAe;QACfC,WAAW;IACb;IACAL,IAAI;QACFI,eAAe;QACfC,WAAW;IACb;AACF,EAAE;AAEF,uFAAuF,GACvF,OAAO,MAAMG,mBAAmB;IAC9BV,MAAM;QACJM,eAAe;QACfC,WAAW;IACb;IACAL,IAAI;QACFI,eAAe;QACfC,WAAW;IACb;AACF,EAAE;AAEF,yFAAyF,GACzF,OAAO,MAAMI,mBAAmB;IAC9BX,MAAM;QACJO,WAAW;IACb;IACAL,IAAI;QACFK,WAAW;IACb;AACF,EAAE;AAEF,yFAAyF,GACzF,OAAO,MAAMK,iBAAiB;IAC5BZ,MAAM;QACJO,WAAW;IACb;IACAL,IAAI;QACFK,WAAW;IACb;AACF,EAAE;AAEF,4BAA4B;AAE5B,2CAA2C,GAC3C,OAAO,MAAMM,+BAA+B;IAC1C,QAAQ;QACNC,QAAQ;QACRC,UAAU;QACVC,OAAO;IACT;IACA,SAAS;QACPF,QAAQ;QACRC,UAAU;QACVC,OAAO;IACT;IACA,MAAM;QACJF,QAAQ;QACRC,UAAU;QACVC,OAAO;IACT;AACF,EAAE"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { motionTokens, createMotionComponent } from '@fluentui/react-motion';
|
|
3
|
+
import { Slide, fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';
|
|
6
|
+
import { AnimationDirection } from '../Calendar';
|
|
7
|
+
// Distance the rows travel as they slide in/out. Shared so the enter and exit motions stay in sync.
|
|
8
|
+
const SLIDE_DISTANCE = '20px';
|
|
9
|
+
// Clones the single child with a ref that merges the forwarded ref and the child's own ref. Lets the
|
|
10
|
+
// `DirectionalSlideIn`/`DirectionalSlideOut` wrappers render no DOM of their own while still exposing a
|
|
11
|
+
// ref to the actual child element (e.g. the `<tr>`), keeping them transparent for table semantics.
|
|
12
|
+
function useChildWithMergedRef(children, ref) {
|
|
13
|
+
const child = React.Children.only(children);
|
|
14
|
+
const mergedRef = useMergedRefs(ref, getReactElementRef(child));
|
|
15
|
+
return /*#__PURE__*/ React.cloneElement(child, {
|
|
16
|
+
ref: mergedRef
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
// `forwardRef` per the repo rule banning `React.FC`. This wrapper renders no DOM of its own,
|
|
20
|
+
// so the forwarded ref is cloned onto the child below — callers get a ref to the actual
|
|
21
|
+
// `<tr>`/`<div role="row">`, keeping `DirectionalSlideIn` transparent.
|
|
22
|
+
export const DirectionalSlideIn = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
23
|
+
const { // Using durationSlower (400ms) as the closest token to the original 367ms
|
|
24
|
+
duration = motionTokens.durationSlower, easing = motionTokens.curveDecelerateMax, animationDirection = AnimationDirection.Vertical, animateBackwards = false, replayKey, children } = props;
|
|
25
|
+
let outX = '0px';
|
|
26
|
+
let outY = '0px';
|
|
27
|
+
const distance = animateBackwards ? `-${SLIDE_DISTANCE}` : SLIDE_DISTANCE;
|
|
28
|
+
if (animationDirection === AnimationDirection.Horizontal) {
|
|
29
|
+
outX = distance;
|
|
30
|
+
} else {
|
|
31
|
+
outY = distance;
|
|
32
|
+
}
|
|
33
|
+
// `Slide.In`'s `useChildElement` will further merge its motion ref on top.
|
|
34
|
+
const childWithRef = useChildWithMergedRef(children, ref);
|
|
35
|
+
// `Slide.In` bakes `outY` into its atoms at mount and `replayKey` only replays them, so a
|
|
36
|
+
// direction flip needs a remount. Same-direction navigations keep the key and reuse the DOM.
|
|
37
|
+
const directionKey = animateBackwards ? 'back' : 'fwd';
|
|
38
|
+
return /*#__PURE__*/ React.createElement(Slide.In, {
|
|
39
|
+
key: directionKey,
|
|
40
|
+
duration: duration,
|
|
41
|
+
easing: easing,
|
|
42
|
+
outX: outX,
|
|
43
|
+
outY: outY,
|
|
44
|
+
replayKey: replayKey
|
|
45
|
+
}, childWithRef);
|
|
46
|
+
});
|
|
47
|
+
DirectionalSlideIn.displayName = 'DirectionalSlideIn';
|
|
48
|
+
// One-way "out" motion for the day grid's transition (filler) rows. It fades and slides the row
|
|
49
|
+
// out in the navigation direction (the top row slides up, the bottom row slides down). The row is
|
|
50
|
+
// `position: absolute` and `opacity: 0` at rest, so the motion's forwards fill leaves it back at its
|
|
51
|
+
// hidden resting state once it finishes. Composed from Fluent's `fadeAtom` + `slideAtom` so it stays
|
|
52
|
+
// consistent with the rest of the motion system; there is no size animation, because the row is
|
|
53
|
+
// overlaid out of flow and hidden via opacity (not by collapsing its box).
|
|
54
|
+
const TransitionRowSlideOut = createMotionComponent(({ outY })=>{
|
|
55
|
+
const duration = motionTokens.durationSlower;
|
|
56
|
+
const easing = motionTokens.curveDecelerateMax;
|
|
57
|
+
return [
|
|
58
|
+
fadeAtom({
|
|
59
|
+
direction: 'exit',
|
|
60
|
+
duration,
|
|
61
|
+
easing
|
|
62
|
+
}),
|
|
63
|
+
slideAtom({
|
|
64
|
+
direction: 'exit',
|
|
65
|
+
duration,
|
|
66
|
+
easing,
|
|
67
|
+
outY
|
|
68
|
+
})
|
|
69
|
+
];
|
|
70
|
+
});
|
|
71
|
+
// `forwardRef` per the repo rule banning `React.FC`. Like `DirectionalSlideIn`, this wrapper renders
|
|
72
|
+
// no DOM of its own — the forwarded ref is cloned onto the child so callers get a ref to the actual
|
|
73
|
+
// `<tr>`, keeping the wrapper transparent for table semantics.
|
|
74
|
+
export const DirectionalSlideOut = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
75
|
+
const { edge, animationDirection = AnimationDirection.Vertical, animateBackwards, replayKey, children } = props;
|
|
76
|
+
const childWithRef = useChildWithMergedRef(children, ref);
|
|
77
|
+
// The legacy animation only ran for vertical navigation, and only on the row matching the
|
|
78
|
+
// navigation direction: the top (first) row slides up & out when navigating forward, the bottom
|
|
79
|
+
// (last) row slides down & out when navigating backward. `animateBackwards === undefined` means no
|
|
80
|
+
// navigation has happened yet, so nothing animates on initial mount (the row stays hidden at rest).
|
|
81
|
+
const isVertical = animationDirection !== AnimationDirection.Horizontal;
|
|
82
|
+
const shouldAnimate = isVertical && animateBackwards !== undefined && (edge === 'first' ? !animateBackwards : animateBackwards);
|
|
83
|
+
if (!shouldAnimate) {
|
|
84
|
+
return childWithRef;
|
|
85
|
+
}
|
|
86
|
+
// First (top) row slides up and out; last (bottom) row slides down and out.
|
|
87
|
+
const outY = edge === 'first' ? `-${SLIDE_DISTANCE}` : SLIDE_DISTANCE;
|
|
88
|
+
return /*#__PURE__*/ React.createElement(TransitionRowSlideOut, {
|
|
89
|
+
outY: outY,
|
|
90
|
+
replayKey: replayKey
|
|
91
|
+
}, childWithRef);
|
|
92
|
+
});
|
|
93
|
+
DirectionalSlideOut.displayName = 'DirectionalSlideOut';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/calendarMotions.tsx"],"sourcesContent":["'use client';\n\nimport { motionTokens, createMotionComponent } from '@fluentui/react-motion';\nimport { Slide, fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';\nimport * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\nimport { AnimationDirection } from '../Calendar';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n// Distance the rows travel as they slide in/out. Shared so the enter and exit motions stay in sync.\nconst SLIDE_DISTANCE = '20px';\n\n// Clones the single child with a ref that merges the forwarded ref and the child's own ref. Lets the\n// `DirectionalSlideIn`/`DirectionalSlideOut` wrappers render no DOM of their own while still exposing a\n// ref to the actual child element (e.g. the `<tr>`), keeping them transparent for table semantics.\nfunction useChildWithMergedRef(children: JSXElement, ref: React.Ref<HTMLElement>) {\n const child = React.Children.only(children) as React.ReactElement<{ ref?: React.Ref<HTMLElement> }>;\n const mergedRef = useMergedRefs(ref, getReactElementRef(child));\n return React.cloneElement(child, { ref: mergedRef });\n}\n\nexport type DirectionalSlideInProps = {\n duration?: number;\n easing?: string;\n animationDirection?: AnimationDirection;\n animateBackwards?: boolean;\n /**\n * When this value changes, the slide animation replays from the start on the same DOM element\n * without remounting the subtree. Use this instead of a React `key` to retrigger the animation\n * on navigation, so focus and DOM identity are preserved during keyboard navigation.\n */\n replayKey?: string | number;\n children: JSXElement;\n};\n\n// `forwardRef` per the repo rule banning `React.FC`. This wrapper renders no DOM of its own,\n// so the forwarded ref is cloned onto the child below — callers get a ref to the actual\n// `<tr>`/`<div role=\"row\">`, keeping `DirectionalSlideIn` transparent.\nexport const DirectionalSlideIn = React.forwardRef<HTMLElement, DirectionalSlideInProps>((props, ref) => {\n const {\n // Using durationSlower (400ms) as the closest token to the original 367ms\n duration = motionTokens.durationSlower,\n easing = motionTokens.curveDecelerateMax,\n animationDirection = AnimationDirection.Vertical,\n animateBackwards = false,\n replayKey,\n children,\n } = props;\n\n let outX = '0px';\n let outY = '0px';\n const distance = animateBackwards ? `-${SLIDE_DISTANCE}` : SLIDE_DISTANCE;\n if (animationDirection === AnimationDirection.Horizontal) {\n outX = distance;\n } else {\n outY = distance;\n }\n\n // `Slide.In`'s `useChildElement` will further merge its motion ref on top.\n const childWithRef = useChildWithMergedRef(children, ref);\n\n // `Slide.In` bakes `outY` into its atoms at mount and `replayKey` only replays them, so a\n // direction flip needs a remount. Same-direction navigations keep the key and reuse the DOM.\n const directionKey = animateBackwards ? 'back' : 'fwd';\n\n return (\n <Slide.In key={directionKey} duration={duration} easing={easing} outX={outX} outY={outY} replayKey={replayKey}>\n {childWithRef}\n </Slide.In>\n );\n});\n\nDirectionalSlideIn.displayName = 'DirectionalSlideIn';\n\n// One-way \"out\" motion for the day grid's transition (filler) rows. It fades and slides the row\n// out in the navigation direction (the top row slides up, the bottom row slides down). The row is\n// `position: absolute` and `opacity: 0` at rest, so the motion's forwards fill leaves it back at its\n// hidden resting state once it finishes. Composed from Fluent's `fadeAtom` + `slideAtom` so it stays\n// consistent with the rest of the motion system; there is no size animation, because the row is\n// overlaid out of flow and hidden via opacity (not by collapsing its box).\nconst TransitionRowSlideOut = createMotionComponent(({ outY }: { outY: string }) => {\n const duration = motionTokens.durationSlower;\n const easing = motionTokens.curveDecelerateMax;\n return [fadeAtom({ direction: 'exit', duration, easing }), slideAtom({ direction: 'exit', duration, easing, outY })];\n});\n\nexport type DirectionalSlideOutProps = {\n /** Which transition row this wraps: the first (top) or last (bottom) filler row. */\n edge: 'first' | 'last';\n animationDirection?: AnimationDirection;\n animateBackwards?: boolean;\n /**\n * When this value changes, the slide-out animation replays from the start on the same DOM element\n * without remounting the subtree, matching {@link DirectionalSlideIn}.\n */\n replayKey?: string | number;\n children: JSXElement;\n};\n\n// `forwardRef` per the repo rule banning `React.FC`. Like `DirectionalSlideIn`, this wrapper renders\n// no DOM of its own — the forwarded ref is cloned onto the child so callers get a ref to the actual\n// `<tr>`, keeping the wrapper transparent for table semantics.\nexport const DirectionalSlideOut = React.forwardRef<HTMLElement, DirectionalSlideOutProps>((props, ref) => {\n const { edge, animationDirection = AnimationDirection.Vertical, animateBackwards, replayKey, children } = props;\n\n const childWithRef = useChildWithMergedRef(children, ref);\n\n // The legacy animation only ran for vertical navigation, and only on the row matching the\n // navigation direction: the top (first) row slides up & out when navigating forward, the bottom\n // (last) row slides down & out when navigating backward. `animateBackwards === undefined` means no\n // navigation has happened yet, so nothing animates on initial mount (the row stays hidden at rest).\n const isVertical = animationDirection !== AnimationDirection.Horizontal;\n const shouldAnimate =\n isVertical && animateBackwards !== undefined && (edge === 'first' ? !animateBackwards : animateBackwards);\n\n if (!shouldAnimate) {\n return childWithRef;\n }\n\n // First (top) row slides up and out; last (bottom) row slides down and out.\n const outY = edge === 'first' ? `-${SLIDE_DISTANCE}` : SLIDE_DISTANCE;\n\n return (\n <TransitionRowSlideOut outY={outY} replayKey={replayKey}>\n {childWithRef}\n </TransitionRowSlideOut>\n );\n});\n\nDirectionalSlideOut.displayName = 'DirectionalSlideOut';\n"],"names":["motionTokens","createMotionComponent","Slide","fadeAtom","slideAtom","React","getReactElementRef","useMergedRefs","AnimationDirection","SLIDE_DISTANCE","useChildWithMergedRef","children","ref","child","Children","only","mergedRef","cloneElement","DirectionalSlideIn","forwardRef","props","duration","durationSlower","easing","curveDecelerateMax","animationDirection","Vertical","animateBackwards","replayKey","outX","outY","distance","Horizontal","childWithRef","directionKey","In","key","displayName","TransitionRowSlideOut","direction","DirectionalSlideOut","edge","isVertical","shouldAnimate","undefined"],"mappings":"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"}
|
package/lib/utils/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { DURATION_1, DURATION_2, DURATION_3, DURATION_4, 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 './animations';
|
|
2
|
-
export { DAYS_IN_WEEK, DateRangeType, DayOfWeek, FirstWeekOfYear, MonthOfYear, TimeConstants } from './constants';
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated -- Re-exporting deprecated animations for backwards compatibility */ export { DURATION_1, DURATION_2, DURATION_3, DURATION_4, 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 './animations';
|
|
2
|
+
/* eslint-enable @typescript-eslint/no-deprecated */ export { DAYS_IN_WEEK, DateRangeType, DayOfWeek, FirstWeekOfYear, MonthOfYear, TimeConstants } from './constants';
|
|
3
3
|
export { DEFAULT_CALENDAR_STRINGS, DEFAULT_DATE_FORMATTING, DEFAULT_DATE_GRID_STRINGS, formatDay, formatMonth, formatMonthDayYear, formatMonthYear, formatYear } from './dateFormatting';
|
|
4
4
|
export { findAvailableDate, getBoundedDateRange, getDayGrid, isRestrictedDate } from './dateGrid';
|
|
5
5
|
export { addDays, addMonths, addWeeks, addYears, compareDatePart, compareDates, getDatePartHashValue, getDateRangeArray, getEndDateOfWeek, getMonthEnd, getMonthStart, getStartDateOfWeek, getWeekNumber, getWeekNumbersInMonth, getYearEnd, getYearStart, isInDateRangeArray, setMonth } from './dateMath';
|
package/lib/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated -- Re-exporting deprecated animations for backwards compatibility */\nexport {\n DURATION_1,\n DURATION_2,\n DURATION_3,\n DURATION_4,\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 './animations';\n/* eslint-enable @typescript-eslint/no-deprecated */\nexport { DAYS_IN_WEEK, DateRangeType, DayOfWeek, FirstWeekOfYear, MonthOfYear, TimeConstants } from './constants';\nexport type { CalendarStrings, DateFormatting, DateGridStrings } from './dateFormatting';\nexport {\n DEFAULT_CALENDAR_STRINGS,\n DEFAULT_DATE_FORMATTING,\n DEFAULT_DATE_GRID_STRINGS,\n formatDay,\n formatMonth,\n formatMonthDayYear,\n formatMonthYear,\n formatYear,\n} from './dateFormatting';\nexport type { AvailableDateOptions, Day, DayGridOptions, RestrictedDatesOptions } from './dateGrid';\nexport { findAvailableDate, getBoundedDateRange, getDayGrid, isRestrictedDate } from './dateGrid';\nexport {\n addDays,\n addMonths,\n addWeeks,\n addYears,\n compareDatePart,\n compareDates,\n getDatePartHashValue,\n getDateRangeArray,\n getEndDateOfWeek,\n getMonthEnd,\n getMonthStart,\n getStartDateOfWeek,\n getWeekNumber,\n getWeekNumbersInMonth,\n getYearEnd,\n getYearStart,\n isInDateRangeArray,\n setMonth,\n} from './dateMath';\nexport { focusAsync } from './focus';\n"],"names":["DURATION_1","DURATION_2","DURATION_3","DURATION_4","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","DAYS_IN_WEEK","DateRangeType","DayOfWeek","FirstWeekOfYear","MonthOfYear","TimeConstants","DEFAULT_CALENDAR_STRINGS","DEFAULT_DATE_FORMATTING","DEFAULT_DATE_GRID_STRINGS","formatDay","formatMonth","formatMonthDayYear","formatMonthYear","formatYear","findAvailableDate","getBoundedDateRange","getDayGrid","isRestrictedDate","addDays","addMonths","addWeeks","addYears","compareDatePart","compareDates","getDatePartHashValue","getDateRangeArray","getEndDateOfWeek","getMonthEnd","getMonthStart","getStartDateOfWeek","getWeekNumber","getWeekNumbersInMonth","getYearEnd","getYearStart","isInDateRangeArray","setMonth","focusAsync"],"mappings":"AAAA,qHAAqH,GACrH,SACEA,UAAU,EACVC,UAAU,EACVC,UAAU,EACVC,UAAU,EACVC,iBAAiB,EACjBC,iBAAiB,EACjBC,OAAO,EACPC,QAAQ,EACRC,eAAe,EACfC,gBAAgB,EAChBC,eAAe,EACfC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,4BAA4B,QACvB,eAAe;AACtB,kDAAkD,GAClD,SAASC,YAAY,EAAEC,aAAa,EAAEC,SAAS,EAAEC,eAAe,EAAEC,WAAW,EAAEC,aAAa,QAAQ,cAAc;AAElH,SACEC,wBAAwB,EACxBC,uBAAuB,EACvBC,yBAAyB,EACzBC,SAAS,EACTC,WAAW,EACXC,kBAAkB,EAClBC,eAAe,EACfC,UAAU,QACL,mBAAmB;AAE1B,SAASC,iBAAiB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,gBAAgB,QAAQ,aAAa;AAClG,SACEC,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,YAAY,EACZC,oBAAoB,EACpBC,iBAAiB,EACjBC,gBAAgB,EAChBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,aAAa,EACbC,qBAAqB,EACrBC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,QAAQ,QACH,aAAa;AACpB,SAASC,UAAU,QAAQ,UAAU"}
|
|
@@ -296,6 +296,7 @@ const useLiveRegionStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
296
296
|
});
|
|
297
297
|
const useCalendarStyles_unstable = (props)=>{
|
|
298
298
|
'use no memo';
|
|
299
|
+
// justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior
|
|
299
300
|
const rootStyles = useRootStyles();
|
|
300
301
|
const dividerStyles = useDividerStyles();
|
|
301
302
|
const monthPickerWrapperStyles = useMonthPickerWrapperStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCalendarStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * @internal\n */ export const calendarClassNames = {\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};\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});\nconst useDividerStyles = makeStyles({\n base: {\n borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n top: 0\n }\n});\nconst useMonthPickerWrapperStyles = makeStyles({\n base: {\n display: 'flex',\n flexDirection: 'column'\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 '& div': {\n fontSize: tokens.fontSizeBase200\n },\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorBrandForeground1,\n cursor: 'pointer',\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});\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 * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */ export const useCalendarStyles_unstable = (props)=>{\n 'use no memo'
|
|
1
|
+
{"version":3,"sources":["useCalendarStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * @internal\n */ export const calendarClassNames = {\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};\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});\nconst useDividerStyles = makeStyles({\n base: {\n borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n top: 0\n }\n});\nconst useMonthPickerWrapperStyles = makeStyles({\n base: {\n display: 'flex',\n flexDirection: 'column'\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 '& div': {\n fontSize: tokens.fontSizeBase200\n },\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorBrandForeground1,\n cursor: 'pointer',\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});\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 * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */ export const useCalendarStyles_unstable = (props)=>{\n 'use no memo'; // justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior\n const rootStyles = useRootStyles();\n const dividerStyles = useDividerStyles();\n const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n const goTodayButtonStyles = useGoTodayButtonStyles();\n const liveRegionStyles = useLiveRegionStyles();\n const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n return {\n root: 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),\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":["tokens","__styles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","mc9l5x","a9b677","normalize","E5pizo","B7ck84d","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","monthPickerNotVisible","Beiy3e4","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","d","p","useDividerStyles","h3c5rm","vrafjx","Bekrc4i","u1mtju","Bhzewxz","useMonthPickerWrapperStyles","useGoTodayButtonStyles","qb2dma","De3pzq","icvyot","oivjwe","wvpqe5","B5kzvoi","sj55zd","Bahqtrf","Be2twd7","Bqenvij","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","seuwu7","Jwef8y","Bi91k9c","eoavqd","Bv6y5q5","uq1ffc","Bokaozi","Bfrni1f","Bkzqrjd","hu2duy","n9pfp1","dfw8yp","qugvs6","B2d53fq","Dyrjrp","Be90el1","h","m","useLiveRegionStyles","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","i8vvqc","g2u3we","B4j52fo","irswps","qhf8xq","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"mappings":"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"}
|
|
@@ -111,7 +111,7 @@ const useLiveRegionStyles = (0, _react.makeStyles)({
|
|
|
111
111
|
}
|
|
112
112
|
});
|
|
113
113
|
const useCalendarStyles_unstable = (props)=>{
|
|
114
|
-
'use no memo';
|
|
114
|
+
'use no memo'; // justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior
|
|
115
115
|
const rootStyles = useRootStyles();
|
|
116
116
|
const dividerStyles = useDividerStyles();
|
|
117
117
|
const monthPickerWrapperStyles = useMonthPickerWrapperStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n 'use no memo'
|
|
1
|
+
{"version":3,"sources":["../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n 'use no memo'; // justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior\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":["tokens","makeStyles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","display","width","normalize","boxShadow","boxSizing","margin","padding","monthPickerNotVisible","flexDirection","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","useDividerStyles","borderRight","colorNeutralStroke2","top","useMonthPickerWrapperStyles","useGoTodayButtonStyles","alignSelf","backgroundColor","colorTransparentBackground","borderStyle","bottom","color","colorNeutralForeground1","fontFamily","fontSize","fontSizeBase200","height","lineHeight","marginRight","marginTop","overflow","colorBrandForeground1","cursor","outline","strokeWidthThin","borderRadius","borderRadiusSmall","colorBrandForeground2","colorNeutralForegroundDisabled","pointerEvents","useLiveRegionStyles","border","position","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"mappings":"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"}
|
|
@@ -16,6 +16,7 @@ const _react1 = require("@griffel/react");
|
|
|
16
16
|
const _utils = require("../../utils");
|
|
17
17
|
const _CalendarDayGrid = require("../CalendarDayGrid/CalendarDayGrid");
|
|
18
18
|
const _useCalendarDayStylesstyles = require("./useCalendarDayStyles.styles");
|
|
19
|
+
const _Calendar = require("../../Calendar");
|
|
19
20
|
const CalendarDay = (props)=>{
|
|
20
21
|
const dayGrid = _react.useRef(null);
|
|
21
22
|
_react.useImperativeHandle(props.componentRef, ()=>({
|
|
@@ -24,7 +25,7 @@ const CalendarDay = (props)=>{
|
|
|
24
25
|
(_dayGrid_current = dayGrid.current) === null || _dayGrid_current === void 0 ? void 0 : (_dayGrid_current_focus = _dayGrid_current.focus) === null || _dayGrid_current_focus === void 0 ? void 0 : _dayGrid_current_focus.call(_dayGrid_current);
|
|
25
26
|
}
|
|
26
27
|
}), []);
|
|
27
|
-
const { strings, gridLabel, navigatedDate, dateTimeFormatter, className, onHeaderSelect, showSixWeeksByDefault, minDate, maxDate, restrictedDates, onNavigateDate, showWeekNumbers, dateRangeType, animationDirection } = props;
|
|
28
|
+
const { strings, gridLabel, navigatedDate, dateTimeFormatter, className, onHeaderSelect, showSixWeeksByDefault, minDate, maxDate, restrictedDates, onNavigateDate, showWeekNumbers, dateRangeType, animationDirection = _Calendar.AnimationDirection.Vertical } = props;
|
|
28
29
|
const classNames = (0, _useCalendarDayStylesstyles.useCalendarDayStyles_unstable)({
|
|
29
30
|
className,
|
|
30
31
|
headerIsClickable: !!onHeaderSelect,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { mergeClasses } from '@griffel/react';\nimport { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';\nimport { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';\nimport { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';\nimport type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const CalendarDay: React.FunctionComponent<CalendarDayProps> = props => {\n const dayGrid = React.useRef<ICalendarDayGrid>(null);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n dayGrid.current?.focus?.();\n },\n }),\n [],\n );\n\n const {\n strings,\n gridLabel,\n navigatedDate,\n dateTimeFormatter,\n className,\n onHeaderSelect,\n showSixWeeksByDefault,\n minDate,\n maxDate,\n restrictedDates,\n onNavigateDate,\n showWeekNumbers,\n dateRangeType,\n animationDirection,\n } = props;\n\n const classNames = useCalendarDayStyles_unstable({\n className,\n headerIsClickable: !!onHeaderSelect,\n showWeekNumbers,\n animationDirection,\n });\n\n const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear)\n : monthAndYear;\n\n const { ...propsWithoutStyles } = props;\n\n return (\n <div className={classNames.root}>\n <div className={classNames.header}>\n <HeaderButtonComponentType\n aria-label={onHeaderSelect ? headerAriaLabel : undefined}\n className={classNames.monthAndYear}\n onClick={onHeaderSelect}\n tabIndex={onHeaderSelect ? 0 : -1} // prevent focus if there's no action for the button\n onKeyDown={onButtonKeyDown(onHeaderSelect)}\n type=\"button\"\n >\n <span aria-live=\"polite\" aria-atomic=\"true\">\n {monthAndYear}\n </span>\n </HeaderButtonComponentType>\n <CalendarDayNavigationButtons {...props} classNames={classNames} />\n </div>\n <CalendarDayGrid\n {...propsWithoutStyles}\n gridLabel={`${monthAndYear}, ${gridLabel}`}\n componentRef={dayGrid}\n strings={strings}\n navigatedDate={navigatedDate!}\n weeksToShow={showSixWeeksByDefault ? 6 : undefined}\n dateTimeFormatter={dateTimeFormatter!}\n minDate={minDate}\n maxDate={maxDate}\n restrictedDates={restrictedDates}\n onNavigateDate={onNavigateDate}\n dateRangeType={dateRangeType}\n />\n </div>\n );\n};\nCalendarDay.displayName = 'CalendarDay';\n\ninterface CalendarDayNavigationButtonsProps extends CalendarDayProps {\n classNames: Record<keyof CalendarDayStyles, string>;\n}\n\nconst CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): JSXElement => {\n const {\n minDate,\n maxDate,\n navigatedDate,\n navigationIcons,\n allFocusable,\n strings,\n showCloseButton,\n classNames,\n onNavigateDate,\n onDismiss,\n } = props;\n\n const onSelectNextMonth = (): void => {\n onNavigateDate(addMonths(navigatedDate, 1), false);\n };\n\n const onSelectPrevMonth = (): void => {\n onNavigateDate(addMonths(navigatedDate, -1), false);\n };\n\n // determine if previous/next months are in bounds\n const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\n // use aria-disabled instead of disabled so focus is not lost\n // when a prev/next button becomes disabled after being clicked\n return (\n <div className={classNames.monthComponents}>\n <button\n className={mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle)}\n tabIndex={prevMonthInBounds ? undefined : allFocusable ? 0 : -1}\n aria-disabled={!prevMonthInBounds}\n onClick={prevMonthInBounds ? onSelectPrevMonth : undefined}\n onKeyDown={prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined}\n title={\n strings.prevMonthAriaLabel\n ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n : undefined\n }\n type=\"button\"\n >\n {navigationIcons.upNavigation}\n </button>\n <button\n className={mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle)}\n tabIndex={nextMonthInBounds ? undefined : allFocusable ? 0 : -1}\n aria-disabled={!nextMonthInBounds}\n onClick={nextMonthInBounds ? onSelectNextMonth : undefined}\n onKeyDown={nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined}\n title={\n strings.nextMonthAriaLabel\n ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n : undefined\n }\n type=\"button\"\n >\n {navigationIcons.downNavigation}\n </button>\n {showCloseButton && (\n <button\n className={classNames.headerIconButton}\n onClick={onDismiss}\n onKeyDown={onButtonKeyDown(onDismiss)}\n title={strings.closeButtonAriaLabel}\n type=\"button\"\n >\n {navigationIcons.dismiss}\n </button>\n )}\n </div>\n );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n (callback?: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) =>\n (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n switch (ev.key) {\n case Enter:\n callback?.();\n break;\n }\n };\n"],"names":["React","Enter","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","current","strings","gridLabel","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","div","root","header","aria-label","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","span","aria-live","aria-atomic","CalendarDayNavigationButtons","weeksToShow","displayName","navigationIcons","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","button","headerIconButton","disabledStyle","aria-disabled","title","prevMonthAriaLabel","months","getMonth","upNavigation","nextMonthAriaLabel","downNavigation","closeButtonAriaLabel","dismiss","callback","ev","key"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { mergeClasses } from '@griffel/react';\nimport { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';\nimport { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';\nimport { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';\nimport type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { AnimationDirection } from '../../Calendar';\n\n/**\n * @internal\n */\nexport const CalendarDay: React.FunctionComponent<CalendarDayProps> = props => {\n const dayGrid = React.useRef<ICalendarDayGrid>(null);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n focus() {\n dayGrid.current?.focus?.();\n },\n }),\n [],\n );\n\n const {\n strings,\n gridLabel,\n navigatedDate,\n dateTimeFormatter,\n className,\n onHeaderSelect,\n showSixWeeksByDefault,\n minDate,\n maxDate,\n restrictedDates,\n onNavigateDate,\n showWeekNumbers,\n dateRangeType,\n animationDirection = AnimationDirection.Vertical,\n } = props;\n\n const classNames = useCalendarDayStyles_unstable({\n className,\n headerIsClickable: !!onHeaderSelect,\n showWeekNumbers,\n animationDirection,\n });\n\n const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear)\n : monthAndYear;\n\n const { ...propsWithoutStyles } = props;\n\n return (\n <div className={classNames.root}>\n <div className={classNames.header}>\n <HeaderButtonComponentType\n aria-label={onHeaderSelect ? headerAriaLabel : undefined}\n className={classNames.monthAndYear}\n onClick={onHeaderSelect}\n tabIndex={onHeaderSelect ? 0 : -1} // prevent focus if there's no action for the button\n onKeyDown={onButtonKeyDown(onHeaderSelect)}\n type=\"button\"\n >\n <span aria-live=\"polite\" aria-atomic=\"true\">\n {monthAndYear}\n </span>\n </HeaderButtonComponentType>\n <CalendarDayNavigationButtons {...props} classNames={classNames} />\n </div>\n <CalendarDayGrid\n {...propsWithoutStyles}\n gridLabel={`${monthAndYear}, ${gridLabel}`}\n componentRef={dayGrid}\n strings={strings}\n navigatedDate={navigatedDate!}\n weeksToShow={showSixWeeksByDefault ? 6 : undefined}\n dateTimeFormatter={dateTimeFormatter!}\n minDate={minDate}\n maxDate={maxDate}\n restrictedDates={restrictedDates}\n onNavigateDate={onNavigateDate}\n dateRangeType={dateRangeType}\n />\n </div>\n );\n};\nCalendarDay.displayName = 'CalendarDay';\n\ninterface CalendarDayNavigationButtonsProps extends CalendarDayProps {\n classNames: Record<keyof CalendarDayStyles, string>;\n}\n\nconst CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): JSXElement => {\n const {\n minDate,\n maxDate,\n navigatedDate,\n navigationIcons,\n allFocusable,\n strings,\n showCloseButton,\n classNames,\n onNavigateDate,\n onDismiss,\n } = props;\n\n const onSelectNextMonth = (): void => {\n onNavigateDate(addMonths(navigatedDate, 1), false);\n };\n\n const onSelectPrevMonth = (): void => {\n onNavigateDate(addMonths(navigatedDate, -1), false);\n };\n\n // determine if previous/next months are in bounds\n const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\n // use aria-disabled instead of disabled so focus is not lost\n // when a prev/next button becomes disabled after being clicked\n return (\n <div className={classNames.monthComponents}>\n <button\n className={mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle)}\n tabIndex={prevMonthInBounds ? undefined : allFocusable ? 0 : -1}\n aria-disabled={!prevMonthInBounds}\n onClick={prevMonthInBounds ? onSelectPrevMonth : undefined}\n onKeyDown={prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined}\n title={\n strings.prevMonthAriaLabel\n ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n : undefined\n }\n type=\"button\"\n >\n {navigationIcons.upNavigation}\n </button>\n <button\n className={mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle)}\n tabIndex={nextMonthInBounds ? undefined : allFocusable ? 0 : -1}\n aria-disabled={!nextMonthInBounds}\n onClick={nextMonthInBounds ? onSelectNextMonth : undefined}\n onKeyDown={nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined}\n title={\n strings.nextMonthAriaLabel\n ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n : undefined\n }\n type=\"button\"\n >\n {navigationIcons.downNavigation}\n </button>\n {showCloseButton && (\n <button\n className={classNames.headerIconButton}\n onClick={onDismiss}\n onKeyDown={onButtonKeyDown(onDismiss)}\n title={strings.closeButtonAriaLabel}\n type=\"button\"\n >\n {navigationIcons.dismiss}\n </button>\n )}\n </div>\n );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n (callback?: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) =>\n (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n switch (ev.key) {\n case Enter:\n callback?.();\n break;\n }\n };\n"],"names":["React","Enter","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","AnimationDirection","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","current","strings","gridLabel","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","Vertical","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","div","root","header","aria-label","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","span","aria-live","aria-atomic","CalendarDayNavigationButtons","weeksToShow","displayName","navigationIcons","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","button","headerIconButton","disabledStyle","aria-disabled","title","prevMonthAriaLabel","months","getMonth","upNavigation","nextMonthAriaLabel","downNavigation","closeButtonAriaLabel","dismiss","callback","ev","key"],"mappings":"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"}
|
|
@@ -141,12 +141,6 @@ const useMonthAndYearStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
141
141
|
ygn44y: "f1cmbuwj",
|
|
142
142
|
Huce71: "fz5stix"
|
|
143
143
|
},
|
|
144
|
-
animation: {
|
|
145
|
-
vin17d: "fhsqnsn",
|
|
146
|
-
Bf5fcs: "fywypte",
|
|
147
|
-
Bv12yb3: "f1h7u52p",
|
|
148
|
-
Ezkn3b: "fjq4c94"
|
|
149
|
-
},
|
|
150
144
|
headerIsClickable: {
|
|
151
145
|
Jwef8y: "f18a0fwf",
|
|
152
146
|
Bi91k9c: "f3sdaeg",
|
|
@@ -205,14 +199,7 @@ const useMonthAndYearStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
205
199
|
".f1o700av{text-align:left;}",
|
|
206
200
|
".fes3tcz{text-align:right;}",
|
|
207
201
|
".f1cmbuwj{text-overflow:ellipsis;}",
|
|
208
|
-
".fz5stix{white-space:nowrap;}"
|
|
209
|
-
".fhsqnsn{animation-duration:0.267s;}",
|
|
210
|
-
".fywypte{animation-fill-mode:both;}",
|
|
211
|
-
".f1h7u52p{animation-name:f5j8bii;}",
|
|
212
|
-
".fjq4c94{animation-timing-function:cubic-bezier(.1,.25,.75,.9);}"
|
|
213
|
-
],
|
|
214
|
-
k: [
|
|
215
|
-
"@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}"
|
|
202
|
+
".fz5stix{white-space:nowrap;}"
|
|
216
203
|
],
|
|
217
204
|
h: [
|
|
218
205
|
".f18a0fwf:hover{background-color:var(--colorBrandBackgroundInvertedHover);}",
|
|
@@ -362,6 +349,7 @@ const useDisabledStyleStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
362
349
|
});
|
|
363
350
|
const useCalendarDayStyles_unstable = (props)=>{
|
|
364
351
|
'use no memo';
|
|
352
|
+
// justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior
|
|
365
353
|
const rootStyles = useRootStyles();
|
|
366
354
|
const headerStyles = useHeaderStyles();
|
|
367
355
|
const monthAndYearStyles = useMonthAndYearStyles();
|
|
@@ -372,7 +360,7 @@ const useCalendarDayStyles_unstable = (props)=>{
|
|
|
372
360
|
return {
|
|
373
361
|
root: (0, _react.mergeClasses)(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
|
|
374
362
|
header: (0, _react.mergeClasses)(calendarDayClassNames.header, headerStyles.base),
|
|
375
|
-
monthAndYear: (0, _react.mergeClasses)(calendarDayClassNames.monthAndYear, monthAndYearStyles.base,
|
|
363
|
+
monthAndYear: (0, _react.mergeClasses)(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, headerIsClickable && monthAndYearStyles.headerIsClickable),
|
|
376
364
|
monthComponents: (0, _react.mergeClasses)(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
|
|
377
365
|
headerIconButton: (0, _react.mergeClasses)(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
|
|
378
366
|
disabledStyle: (0, _react.mergeClasses)(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCalendarDayStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';\n/**\n * @internal\n */ export const calendarDayClassNames = {\n root: 'fui-CalendarDay',\n header: 'fui-CalendarDay__header',\n monthAndYear: 'fui-CalendarDay__monthAndYear',\n monthComponents: 'fui-CalendarDay__monthComponents',\n headerIconButton: 'fui-CalendarDay__headerIconButton',\n disabledStyle: 'fui-CalendarDay__disabledStyle'\n};\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n padding: '12px',\n width: '196px'\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0'\n },\n showWeekNumbers: {\n width: '226px'\n }\n});\nconst useHeaderStyles = makeStyles({\n base: {\n display: 'inline-flex',\n height: '28px',\n lineHeight: '44px',\n position: 'relative',\n width: '100%'\n }\n});\nconst useMonthAndYearStyles = makeStyles({\n base: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'inline-block',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: '28px',\n overflow: 'hidden',\n padding: '0 4px 0 10px',\n textAlign: 'left',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n },\n animation: {\n animationDuration: DURATION_2,\n animationFillMode: 'both',\n animationName: FADE_IN,\n animationTimingFunction: EASING_FUNCTION_2\n },\n headerIsClickable: {\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`\n }\n }\n});\nconst useMonthComponentsStyles = makeStyles({\n base: {\n alignSelf: 'flex-end',\n display: 'inline-flex'\n }\n});\nconst useHeaderIconButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n overflow: 'visible',\n padding: '0',\n position: 'relative',\n textAlign: 'center',\n width: '28px',\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed\n }\n }\n});\nconst useDisabledStyleStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n // add this explicitly for aria-disabled buttons that don't get default forced-colors disabled styles\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n }\n }\n});\n/**\n * Apply styling to the CalendarDay slots based on the state\n *\n * @internal\n */ export const useCalendarDayStyles_unstable = (props)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const headerStyles = useHeaderStyles();\n const monthAndYearStyles = useMonthAndYearStyles();\n const monthComponentsStyles = useMonthComponentsStyles();\n const headerIconButtonStyles = useHeaderIconButtonStyles();\n const disabledStyleStyles = useDisabledStyleStyles();\n const { className, headerIsClickable, showWeekNumbers } = props;\n return {\n root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),\n header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),\n monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)\n };\n};\n"],"names":["tokens","__styles","mergeClasses","shorthands","DURATION_2","EASING_FUNCTION_2","FADE_IN","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","a9b677","normalize","E5pizo","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","showWeekNumbers","d","p","useHeaderStyles","mc9l5x","Bqenvij","Bg96gwp","qhf8xq","useMonthAndYearStyles","Bt984gj","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Bh6795r","Bahqtrf","Be2twd7","Bhrd7zp","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","ygn44y","Huce71","animation","vin17d","Bf5fcs","Bv12yb3","Ezkn3b","headerIsClickable","Jwef8y","Bi91k9c","eoavqd","pugfm4","ukgb2i","Dwtyhm","Biisq0s","iro3zm","B2d53fq","c3iz72","mghro0","Bx68yb","syojd9","E5hylx","k","h","useMonthComponentsStyles","qb2dma","useHeaderIconButtonStyles","useDisabledStyleStyles","Bg33ivm","t69wg0","Bnh7jwd","m","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useCalendarDayStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * @internal\n */ export const calendarDayClassNames = {\n root: 'fui-CalendarDay',\n header: 'fui-CalendarDay__header',\n monthAndYear: 'fui-CalendarDay__monthAndYear',\n monthComponents: 'fui-CalendarDay__monthComponents',\n headerIconButton: 'fui-CalendarDay__headerIconButton',\n disabledStyle: 'fui-CalendarDay__disabledStyle'\n};\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n padding: '12px',\n width: '196px'\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0'\n },\n showWeekNumbers: {\n width: '226px'\n }\n});\nconst useHeaderStyles = makeStyles({\n base: {\n display: 'inline-flex',\n height: '28px',\n lineHeight: '44px',\n position: 'relative',\n width: '100%'\n }\n});\nconst useMonthAndYearStyles = makeStyles({\n base: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'inline-block',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: '28px',\n overflow: 'hidden',\n padding: '0 4px 0 10px',\n textAlign: 'left',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n },\n headerIsClickable: {\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`\n }\n }\n});\nconst useMonthComponentsStyles = makeStyles({\n base: {\n alignSelf: 'flex-end',\n display: 'inline-flex'\n }\n});\nconst useHeaderIconButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n overflow: 'visible',\n padding: '0',\n position: 'relative',\n textAlign: 'center',\n width: '28px',\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed\n }\n }\n});\nconst useDisabledStyleStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n // add this explicitly for aria-disabled buttons that don't get default forced-colors disabled styles\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n }\n }\n});\n/**\n * Apply styling to the CalendarDay slots based on the state\n *\n * @internal\n */ export const useCalendarDayStyles_unstable = (props)=>{\n 'use no memo'; // justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior\n const rootStyles = useRootStyles();\n const headerStyles = useHeaderStyles();\n const monthAndYearStyles = useMonthAndYearStyles();\n const monthComponentsStyles = useMonthComponentsStyles();\n const headerIconButtonStyles = useHeaderIconButtonStyles();\n const disabledStyleStyles = useDisabledStyleStyles();\n const { className, headerIsClickable, showWeekNumbers } = props;\n return {\n root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),\n header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, headerIsClickable && monthAndYearStyles.headerIsClickable),\n monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)\n };\n};\n"],"names":["tokens","__styles","mergeClasses","shorthands","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","a9b677","normalize","E5pizo","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","showWeekNumbers","d","p","useHeaderStyles","mc9l5x","Bqenvij","Bg96gwp","qhf8xq","useMonthAndYearStyles","Bt984gj","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Bh6795r","Bahqtrf","Be2twd7","Bhrd7zp","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","ygn44y","Huce71","headerIsClickable","Jwef8y","Bi91k9c","eoavqd","pugfm4","ukgb2i","Dwtyhm","Biisq0s","iro3zm","B2d53fq","c3iz72","mghro0","Bx68yb","syojd9","E5hylx","h","useMonthComponentsStyles","qb2dma","useHeaderIconButtonStyles","useDisabledStyleStyles","Bg33ivm","t69wg0","Bnh7jwd","m","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"mappings":"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"}
|
|
@@ -19,7 +19,6 @@ _export(exports, {
|
|
|
19
19
|
});
|
|
20
20
|
const _reacttheme = require("@fluentui/react-theme");
|
|
21
21
|
const _react = require("@griffel/react");
|
|
22
|
-
const _animations = require("../../utils/animations");
|
|
23
22
|
const calendarDayClassNames = {
|
|
24
23
|
root: 'fui-CalendarDay',
|
|
25
24
|
header: 'fui-CalendarDay__header',
|
|
@@ -72,12 +71,6 @@ const useMonthAndYearStyles = (0, _react.makeStyles)({
|
|
|
72
71
|
textOverflow: 'ellipsis',
|
|
73
72
|
whiteSpace: 'nowrap'
|
|
74
73
|
},
|
|
75
|
-
animation: {
|
|
76
|
-
animationDuration: _animations.DURATION_2,
|
|
77
|
-
animationFillMode: 'both',
|
|
78
|
-
animationName: _animations.FADE_IN,
|
|
79
|
-
animationTimingFunction: _animations.EASING_FUNCTION_2
|
|
80
|
-
},
|
|
81
74
|
headerIsClickable: {
|
|
82
75
|
'&:hover': {
|
|
83
76
|
backgroundColor: _reacttheme.tokens.colorBrandBackgroundInvertedHover,
|
|
@@ -140,7 +133,7 @@ const useDisabledStyleStyles = (0, _react.makeStyles)({
|
|
|
140
133
|
}
|
|
141
134
|
});
|
|
142
135
|
const useCalendarDayStyles_unstable = (props)=>{
|
|
143
|
-
'use no memo';
|
|
136
|
+
'use no memo'; // justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior
|
|
144
137
|
const rootStyles = useRootStyles();
|
|
145
138
|
const headerStyles = useHeaderStyles();
|
|
146
139
|
const monthAndYearStyles = useMonthAndYearStyles();
|
|
@@ -151,7 +144,7 @@ const useCalendarDayStyles_unstable = (props)=>{
|
|
|
151
144
|
return {
|
|
152
145
|
root: (0, _react.mergeClasses)(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
|
|
153
146
|
header: (0, _react.mergeClasses)(calendarDayClassNames.header, headerStyles.base),
|
|
154
|
-
monthAndYear: (0, _react.mergeClasses)(calendarDayClassNames.monthAndYear, monthAndYearStyles.base,
|
|
147
|
+
monthAndYear: (0, _react.mergeClasses)(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, headerIsClickable && monthAndYearStyles.headerIsClickable),
|
|
155
148
|
monthComponents: (0, _react.mergeClasses)(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
|
|
156
149
|
headerIconButton: (0, _react.mergeClasses)(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
|
|
157
150
|
disabledStyle: (0, _react.mergeClasses)(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport
|
|
1
|
+
{"version":3,"sources":["../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayStyles, CalendarDayStyleProps } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {\n root: 'fui-CalendarDay',\n header: 'fui-CalendarDay__header',\n monthAndYear: 'fui-CalendarDay__monthAndYear',\n monthComponents: 'fui-CalendarDay__monthComponents',\n headerIconButton: 'fui-CalendarDay__headerIconButton',\n disabledStyle: 'fui-CalendarDay__disabledStyle',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n padding: '12px',\n width: '196px',\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0',\n },\n showWeekNumbers: {\n width: '226px',\n },\n});\n\nconst useHeaderStyles = makeStyles({\n base: {\n display: 'inline-flex',\n height: '28px',\n lineHeight: '44px',\n position: 'relative',\n width: '100%',\n },\n});\n\nconst useMonthAndYearStyles = makeStyles({\n base: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'inline-block',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: '28px',\n overflow: 'hidden',\n padding: '0 4px 0 10px',\n textAlign: 'left',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n headerIsClickable: {\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n },\n },\n});\n\nconst useMonthComponentsStyles = makeStyles({\n base: {\n alignSelf: 'flex-end',\n display: 'inline-flex',\n },\n});\n\nconst useHeaderIconButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n overflow: 'visible',\n padding: '0',\n position: 'relative',\n textAlign: 'center',\n width: '28px',\n\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n },\n },\n});\n\nconst useDisabledStyleStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n\n // add this explicitly for aria-disabled buttons that don't get default forced-colors disabled styles\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CalendarDay slots based on the state\n *\n * @internal\n */\nexport const useCalendarDayStyles_unstable = (props: CalendarDayStyleProps): CalendarDayStyles => {\n 'use no memo'; // justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior\n\n const rootStyles = useRootStyles();\n const headerStyles = useHeaderStyles();\n const monthAndYearStyles = useMonthAndYearStyles();\n const monthComponentsStyles = useMonthComponentsStyles();\n const headerIconButtonStyles = useHeaderIconButtonStyles();\n const disabledStyleStyles = useDisabledStyleStyles();\n\n const { className, headerIsClickable, showWeekNumbers } = props;\n\n return {\n root: mergeClasses(\n calendarDayClassNames.root,\n rootStyles.normalize,\n rootStyles.base,\n showWeekNumbers && rootStyles.showWeekNumbers,\n className,\n ),\n header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n monthAndYear: mergeClasses(\n calendarDayClassNames.monthAndYear,\n monthAndYearStyles.base,\n headerIsClickable && monthAndYearStyles.headerIsClickable,\n ),\n monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base),\n };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","boxSizing","padding","width","normalize","boxShadow","margin","showWeekNumbers","useHeaderStyles","display","height","lineHeight","position","useMonthAndYearStyles","alignItems","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","overflow","textAlign","textOverflow","whiteSpace","headerIsClickable","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useMonthComponentsStyles","alignSelf","useHeaderIconButtonStyles","colorNeutralForeground3","fontSizeBase200","useDisabledStyleStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"mappings":"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"}
|