@fluentui/react-drawer 9.10.5 → 9.10.7
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
CHANGED
|
@@ -1,20 +1,50 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 06 Nov 2025 14:56:56 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.7)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Nov 2025 14:56:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.6..@fluentui/react-drawer_v9.10.7)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- refactor(react-drawer): use standard motion atom for fade ([PR #35421](https://github.com/microsoft/fluentui/pull/35421) by robertpenner@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-dialog to v9.16.1 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.2 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
17
|
+
- Bump @fluentui/react-motion to v9.11.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
18
|
+
- Bump @fluentui/react-portal to v9.8.7 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
19
|
+
- Bump @fluentui/react-motion-components-preview to v0.13.0 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.26.9 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.25.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.10.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.6)
|
|
24
|
+
|
|
25
|
+
Fri, 31 Oct 2025 16:22:06 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.5..@fluentui/react-drawer_v9.10.6)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- Bump @fluentui/react-dialog to v9.16.0 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
|
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.1 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
|
|
32
|
+
- Bump @fluentui/react-motion to v9.11.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
|
|
33
|
+
- Bump @fluentui/react-portal to v9.8.6 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
|
|
34
|
+
- Bump @fluentui/react-tabster to v9.26.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.10.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.5)
|
|
8
38
|
|
|
9
|
-
Tue, 21 Oct 2025 14:
|
|
39
|
+
Tue, 21 Oct 2025 14:16:59 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.4..@fluentui/react-drawer_v9.10.5)
|
|
11
41
|
|
|
12
42
|
### Patches
|
|
13
43
|
|
|
14
44
|
- fix: update drawer scroll state when content changes ([PR #35210](https://github.com/microsoft/fluentui/pull/35210) by marcosvmmoura@gmail.com)
|
|
15
|
-
- Bump @fluentui/react-dialog to v9.15.5 ([PR #
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #
|
|
17
|
-
- Bump @fluentui/react-portal to v9.8.5 ([PR #
|
|
45
|
+
- Bump @fluentui/react-dialog to v9.15.5 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
|
|
46
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
|
|
47
|
+
- Bump @fluentui/react-portal to v9.8.5 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
|
|
18
48
|
|
|
19
49
|
## [9.10.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.4)
|
|
20
50
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { drawerCSSVars } from './useDrawerBaseStyles.styles';
|
|
4
|
+
import { fadeAtom } from '@fluentui/react-motion-components-preview';
|
|
4
5
|
const durations = {
|
|
5
6
|
small: motionTokens.durationGentle,
|
|
6
7
|
medium: motionTokens.durationSlow,
|
|
@@ -93,27 +94,18 @@ const durations = {
|
|
|
93
94
|
/**
|
|
94
95
|
* @internal
|
|
95
96
|
*/ export const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size })=>{
|
|
96
|
-
const keyframes = [
|
|
97
|
-
{
|
|
98
|
-
opacity: 0
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
opacity: 1
|
|
102
|
-
}
|
|
103
|
-
];
|
|
104
97
|
const duration = durations[size];
|
|
98
|
+
const easing = motionTokens.curveLinear;
|
|
105
99
|
return {
|
|
106
|
-
enter: {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
},
|
|
111
|
-
exit: {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
duration
|
|
117
|
-
}
|
|
100
|
+
enter: fadeAtom({
|
|
101
|
+
direction: 'enter',
|
|
102
|
+
duration,
|
|
103
|
+
easing
|
|
104
|
+
}),
|
|
105
|
+
exit: fadeAtom({
|
|
106
|
+
direction: 'exit',
|
|
107
|
+
duration,
|
|
108
|
+
easing
|
|
109
|
+
})
|
|
118
110
|
};
|
|
119
111
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n small: motionTokens.durationGentle,\n medium: motionTokens.durationSlow,\n large: motionTokens.durationSlower,\n full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n position: DrawerBaseProps['position'],\n sizeVar: string,\n dir: FluentProviderContextValue['dir'],\n): string {\n const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n if (position === 'start') {\n return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n }\n\n if (position === 'end') {\n return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n }\n\n if (position === 'bottom') {\n return bottomToTopTransform;\n }\n\n return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n opacity: 0,\n },\n { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n boxShadow: tokens.shadow64,\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n const
|
|
1
|
+
{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n small: motionTokens.durationGentle,\n medium: motionTokens.durationSlow,\n large: motionTokens.durationSlower,\n full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n position: DrawerBaseProps['position'],\n sizeVar: string,\n dir: FluentProviderContextValue['dir'],\n): string {\n const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n if (position === 'start') {\n return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n }\n\n if (position === 'end') {\n return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n }\n\n if (position === 'bottom') {\n return bottomToTopTransform;\n }\n\n return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n opacity: 0,\n },\n { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n boxShadow: tokens.shadow64,\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n const duration = durations[size];\n const easing = motionTokens.curveLinear;\n\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration, easing }),\n };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,4CAA4C;AAOrE,MAAMC,YAAkE;IACtEC,OAAOL,aAAaM,cAAc;IAClCC,QAAQP,aAAaQ,YAAY;IACjCC,OAAOT,aAAaU,cAAc;IAClCC,MAAMX,aAAaY,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBrB,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBlC,wBAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,cAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,OAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,OAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,aAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,aAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BtC,wBAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,aAAasC,WAAW;IAEvC,OAAO;QACLX,OAAOxB,SAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,MAAM3B,SAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}
|
|
@@ -25,6 +25,7 @@ _export(exports, {
|
|
|
25
25
|
const _reactmotion = require("@fluentui/react-motion");
|
|
26
26
|
const _reacttheme = require("@fluentui/react-theme");
|
|
27
27
|
const _useDrawerBaseStylesstyles = require("./useDrawerBaseStyles.styles");
|
|
28
|
+
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
|
|
28
29
|
const durations = {
|
|
29
30
|
small: _reactmotion.motionTokens.durationGentle,
|
|
30
31
|
medium: _reactmotion.motionTokens.durationSlow,
|
|
@@ -109,27 +110,18 @@ const OverlayDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ positio
|
|
|
109
110
|
};
|
|
110
111
|
});
|
|
111
112
|
const OverlaySurfaceBackdropMotion = (0, _reactmotion.createPresenceComponent)(({ size })=>{
|
|
112
|
-
const keyframes = [
|
|
113
|
-
{
|
|
114
|
-
opacity: 0
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
opacity: 1
|
|
118
|
-
}
|
|
119
|
-
];
|
|
120
113
|
const duration = durations[size];
|
|
114
|
+
const easing = _reactmotion.motionTokens.curveLinear;
|
|
121
115
|
return {
|
|
122
|
-
enter: {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
},
|
|
127
|
-
exit: {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
duration
|
|
133
|
-
}
|
|
116
|
+
enter: (0, _reactmotioncomponentspreview.fadeAtom)({
|
|
117
|
+
direction: 'enter',
|
|
118
|
+
duration,
|
|
119
|
+
easing
|
|
120
|
+
}),
|
|
121
|
+
exit: (0, _reactmotioncomponentspreview.fadeAtom)({
|
|
122
|
+
direction: 'exit',
|
|
123
|
+
duration,
|
|
124
|
+
easing
|
|
125
|
+
})
|
|
134
126
|
};
|
|
135
127
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n small: motionTokens.durationGentle,\n medium: motionTokens.durationSlow,\n large: motionTokens.durationSlower,\n full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n position: DrawerBaseProps['position'],\n sizeVar: string,\n dir: FluentProviderContextValue['dir'],\n): string {\n const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n if (position === 'start') {\n return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n }\n\n if (position === 'end') {\n return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n }\n\n if (position === 'bottom') {\n return bottomToTopTransform;\n }\n\n return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n opacity: 0,\n },\n { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n boxShadow: tokens.shadow64,\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n const
|
|
1
|
+
{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\nimport { fadeAtom } from '@fluentui/react-motion-components-preview';\n\nexport type DrawerMotionParams = Required<\n Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n small: motionTokens.durationGentle,\n medium: motionTokens.durationSlow,\n large: motionTokens.durationSlower,\n full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n position: DrawerBaseProps['position'],\n sizeVar: string,\n dir: FluentProviderContextValue['dir'],\n): string {\n const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n if (position === 'start') {\n return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n }\n\n if (position === 'end') {\n return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n }\n\n if (position === 'bottom') {\n return bottomToTopTransform;\n }\n\n return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n opacity: 0,\n },\n { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n const keyframes: Keyframe[] = [\n {\n /**\n * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n * The work will be done in the #32817\n */\n transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n boxShadow: `0px ${tokens.colorTransparentBackground}`,\n opacity: 0,\n },\n {\n transform: 'translate3d(0, 0, 0)',\n boxShadow: tokens.shadow64,\n opacity: 1,\n },\n ];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n duration,\n easing: motionTokens.curveDecelerateMid,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n duration,\n easing: motionTokens.curveAccelerateMin,\n },\n };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n const duration = durations[size];\n const easing = motionTokens.curveLinear;\n\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration, easing }),\n };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","fadeAtom","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear","direction"],"mappings":";;;;;;;;;;;IAkDaqB,kBAAAA;;;IA+BAa,mBAAAA;;;gCAoCAI;eAAAA;;wBA9FGxB;;;;6BAvBsC,yBAAyB;4BACxD,wBAAwB;2CAIjB,+BAA+B;8CACpC,4CAA4C;AAOrE,MAAMT,YAAkE;IACtEC,OAAOL,yBAAAA,CAAaM,cAAc;IAClCC,QAAQP,yBAAAA,CAAaQ,YAAY;IACjCC,OAAOT,yBAAAA,CAAaU,cAAc;IAClCC,MAAMX,yBAAAA,CAAaY,iBAAiB;AACtC;AAKO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAKO,+BAA2BpB,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,gCAA4BjC,oCAAAA,EAA4C,CAAC,EAAEe,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUZ,wCAAAA,CAAcsB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEjC,kBAAAA,CAAOkC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWjC,kBAAAA,CAAOmC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ5B,yBAAAA,CAAa6B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ5B,yBAAAA,CAAagC,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,yCAAqCjC,oCAAAA,EAAwB,CAAC,EAAEsB,IAAI,EAAoC;IAC7G,MAAMK,WAAWtB,SAAS,CAACiB,KAAK;IAChC,MAAMO,SAAS5B,yBAAAA,CAAasC,WAAW;IAEvC,OAAO;QACLX,WAAOxB,sCAAAA,EAAS;YAAEoC,WAAW;YAASb;YAAUE;QAAO;QACvDE,UAAM3B,sCAAAA,EAAS;YAAEoC,WAAW;YAAQb;YAAUE;QAAO;IACvD;AACF,GAAG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.10.
|
|
3
|
+
"version": "9.10.7",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,14 +20,15 @@
|
|
|
20
20
|
"@fluentui/scripts-cypress": "*"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@fluentui/react-dialog": "^9.
|
|
24
|
-
"@fluentui/react-jsx-runtime": "^9.3.
|
|
25
|
-
"@fluentui/react-motion": "^9.11.
|
|
26
|
-
"@fluentui/react-portal": "^9.8.
|
|
23
|
+
"@fluentui/react-dialog": "^9.16.1",
|
|
24
|
+
"@fluentui/react-jsx-runtime": "^9.3.2",
|
|
25
|
+
"@fluentui/react-motion": "^9.11.3",
|
|
26
|
+
"@fluentui/react-portal": "^9.8.7",
|
|
27
|
+
"@fluentui/react-motion-components-preview": "^0.13.0",
|
|
27
28
|
"@fluentui/react-shared-contexts": "^9.25.2",
|
|
28
|
-
"@fluentui/react-tabster": "^9.26.
|
|
29
|
+
"@fluentui/react-tabster": "^9.26.9",
|
|
29
30
|
"@fluentui/react-theme": "^9.2.0",
|
|
30
|
-
"@fluentui/react-utilities": "^9.25.
|
|
31
|
+
"@fluentui/react-utilities": "^9.25.3",
|
|
31
32
|
"@griffel/react": "^1.5.22",
|
|
32
33
|
"@swc/helpers": "^0.5.1"
|
|
33
34
|
},
|