@fluentui/react-drawer 9.5.15 → 9.5.17
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 +22 -2
- package/dist/index.d.ts +8 -0
- package/lib/components/OverlayDrawer/OverlayDrawer.types.js.map +1 -1
- package/lib/shared/drawerMotions.js +2 -2
- package/lib/shared/drawerMotions.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawer.types.js.map +1 -1
- package/lib-commonjs/shared/drawerMotions.js +2 -2
- package/lib-commonjs/shared/drawerMotions.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 08 Oct 2024 22:02:30 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.17)
|
|
8
|
+
|
|
9
|
+
Tue, 08 Oct 2024 22:02:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.16..@fluentui/react-drawer_v9.5.17)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-dialog to v9.11.17 ([PR #33007](https://github.com/microsoft/fluentui/pull/33007) by beachball)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.22.8 ([PR #33007](https://github.com/microsoft/fluentui/pull/33007) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.16)
|
|
18
|
+
|
|
19
|
+
Thu, 26 Sep 2024 14:15:27 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.15..@fluentui/react-drawer_v9.5.16)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- fix: reversed animations ([PR #32924](https://github.com/microsoft/fluentui/pull/32924) by marcosvmmoura@gmail.com)
|
|
25
|
+
- Bump @fluentui/react-dialog to v9.11.16 ([PR #32924](https://github.com/microsoft/fluentui/pull/32924) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.15)
|
|
8
28
|
|
|
9
|
-
Mon, 23 Sep 2024 12:
|
|
29
|
+
Mon, 23 Sep 2024 12:40:13 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.14..@fluentui/react-drawer_v9.5.15)
|
|
11
31
|
|
|
12
32
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -303,7 +303,15 @@ export declare type OverlayDrawerSlots = {
|
|
|
303
303
|
* Slot for the root element.
|
|
304
304
|
*/
|
|
305
305
|
root: Slot<OverlayDrawerSurfaceProps>;
|
|
306
|
+
/**
|
|
307
|
+
* For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
|
|
308
|
+
*
|
|
309
|
+
*/
|
|
306
310
|
backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;
|
|
311
|
+
/**
|
|
312
|
+
* For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
|
|
313
|
+
*
|
|
314
|
+
*/
|
|
307
315
|
surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;
|
|
308
316
|
};
|
|
309
317
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n /**\n * Slot for the root element.\n */\n root: Slot<OverlayDrawerSurfaceProps>;\n
|
|
1
|
+
{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n /**\n * Slot for the root element.\n */\n root: Slot<OverlayDrawerSurfaceProps>;\n /**\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n *\n */\n backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\n /**\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n *\n */\n surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = Pick<OverlayDrawerSlots, 'root'> & {\n /**\n * Slot for the dialog component that wraps the drawer.\n */\n dialog: NonNullable<Slot<DialogProps>>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n DrawerBaseProps & {\n /**\n * @deprecated OverlayDrawer can work only as a controlled component\n * and does not support uncontrolled mode i.e. defaultOpen prop\n */\n defaultOpen?: boolean;\n };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> &\n Required<DrawerBaseState> &\n Pick<OverlayDrawerProps, 'mountNode'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAmDA;;CAEC,GACD,WAEwC"}
|
|
@@ -14,10 +14,10 @@ const durations = {
|
|
|
14
14
|
const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;
|
|
15
15
|
const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;
|
|
16
16
|
if (position === 'start') {
|
|
17
|
-
return dir === '
|
|
17
|
+
return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;
|
|
18
18
|
}
|
|
19
19
|
if (position === 'end') {
|
|
20
|
-
return dir === '
|
|
20
|
+
return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;
|
|
21
21
|
}
|
|
22
22
|
if (position === 'bottom') {
|
|
23
23
|
return bottomToTopTransform;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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) {\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 === '
|
|
1
|
+
{"version":3,"sources":["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) {\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 keyframes = [{ opacity: 0 }, { opacity: 1 }];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n easing: motionTokens.curveLinear,\n duration,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n easing: motionTokens.curveLinear,\n duration,\n },\n };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAO7D,MAAMC,YAAkE;IACtEC,OAAOJ,aAAaK,cAAc;IAClCC,QAAQN,aAAaO,YAAY;IACjCC,OAAOR,aAAaS,cAAc;IAClCC,MAAMV,aAAaW,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,qBAAqBpB,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,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,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBjC,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEhC,OAAOiC,0BAA0B,CAAC,CAAC;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWhC,OAAOkC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BrC,wBAAwB,CAAC,EAAEqB,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEG,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAM,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;QACAI,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCH,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;IACF;AACF,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n /**\n * Slot for the root element.\n */\n root: Slot<OverlayDrawerSurfaceProps>;\n
|
|
1
|
+
{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams, OverlayDrawerSurfaceMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n /**\n * Slot for the root element.\n */\n root: Slot<OverlayDrawerSurfaceProps>;\n /**\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n *\n */\n backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\n /**\n * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n *\n */\n surfaceMotion?: Slot<PresenceMotionSlotProps<DrawerMotionParams>>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = Pick<OverlayDrawerSlots, 'root'> & {\n /**\n * Slot for the dialog component that wraps the drawer.\n */\n dialog: NonNullable<Slot<DialogProps>>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'> &\n DrawerBaseProps & {\n /**\n * @deprecated OverlayDrawer can work only as a controlled component\n * and does not support uncontrolled mode i.e. defaultOpen prop\n */\n defaultOpen?: boolean;\n };\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> &\n Required<DrawerBaseState> &\n Pick<OverlayDrawerProps, 'mountNode'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAmDA;;CAEC"}
|
|
@@ -36,10 +36,10 @@ function getPositionTransform(position, sizeVar, dir) {
|
|
|
36
36
|
const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;
|
|
37
37
|
const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;
|
|
38
38
|
if (position === 'start') {
|
|
39
|
-
return dir === '
|
|
39
|
+
return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;
|
|
40
40
|
}
|
|
41
41
|
if (position === 'end') {
|
|
42
|
-
return dir === '
|
|
42
|
+
return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;
|
|
43
43
|
}
|
|
44
44
|
if (position === 'bottom') {
|
|
45
45
|
return bottomToTopTransform;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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) {\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 === '
|
|
1
|
+
{"version":3,"sources":["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) {\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 keyframes = [{ opacity: 0 }, { opacity: 1 }];\n const duration = durations[size];\n\n return {\n enter: {\n keyframes,\n easing: motionTokens.curveLinear,\n duration,\n },\n exit: {\n keyframes: [...keyframes].reverse(),\n easing: motionTokens.curveLinear,\n duration,\n },\n };\n});\n"],"names":["InlineDrawerMotion","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","getPositionTransform","durations","small","motionTokens","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","createPresenceComponent","size","keyframes","transform","drawerCSSVars","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","boxShadow","tokens","colorTransparentBackground","shadow64","curveLinear"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiDaA,kBAAAA;eAAAA;;IA+BAC,mBAAAA;eAAAA;;IAoCAC,4BAAAA;eAAAA;;IA9FGC,oBAAAA;eAAAA;;;6BAtBsC;4BAC/B;2CAIO;AAO9B,MAAMC,YAAkE;IACtEC,OAAOC,yBAAAA,CAAaC,cAAc;IAClCC,QAAQF,yBAAAA,CAAaG,YAAY;IACjCC,OAAOJ,yBAAAA,CAAaK,cAAc;IAClCC,MAAMN,yBAAAA,CAAaO,iBAAiB;AACtC;AAKO,SAASV,qBACdW,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,MAAMnB,qBAAqBoB,IAAAA,oCAAAA,EAA4C,CAAC,EAAEN,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWpB,qBAAqBW,UAAUU,wCAAAA,CAAcC,aAAa,EAAET;YACvEU,SAAS;QACX;QACA;YAAEH,WAAW;YAAwBG,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWvB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAK;YACAE,QAAQvB,yBAAAA,CAAawB,kBAAkB;QACzC;QACAC,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCL;YACAE,QAAQvB,yBAAAA,CAAa2B,kBAAkB;QACzC;IACF;AACF;AAKO,MAAMhC,sBAAsBmB,IAAAA,oCAAAA,EAA4C,CAAC,EAAEN,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWpB,qBAAqBW,UAAUU,wCAAAA,CAAcC,aAAa,EAAET;YACvEkB,WAAW,CAAC,IAAI,EAAEC,kBAAAA,CAAOC,0BAA0B,CAAC,CAAC;YACrDV,SAAS;QACX;QACA;YACEH,WAAW;YACXW,WAAWC,kBAAAA,CAAOE,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWvB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAK;YACAE,QAAQvB,yBAAAA,CAAawB,kBAAkB;QACzC;QACAC,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCL;YACAE,QAAQvB,yBAAAA,CAAa2B,kBAAkB;QACzC;IACF;AACF;AAKO,MAAM/B,+BAA+BkB,IAAAA,oCAAAA,EAAwB,CAAC,EAAEC,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEI,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWvB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLO,OAAO;YACLN;YACAO,QAAQvB,yBAAAA,CAAagC,WAAW;YAChCX;QACF;QACAI,MAAM;YACJT,WAAW;mBAAIA;aAAU,CAACU,OAAO;YACjCH,QAAQvB,yBAAAA,CAAagC,WAAW;YAChCX;QACF;IACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.17",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.11.
|
|
38
|
+
"@fluentui/react-dialog": "^9.11.17",
|
|
39
39
|
"@fluentui/react-jsx-runtime": "^9.0.44",
|
|
40
40
|
"@fluentui/react-motion": "^9.5.2",
|
|
41
41
|
"@fluentui/react-shared-contexts": "^9.20.1",
|
|
42
|
-
"@fluentui/react-tabster": "^9.22.
|
|
42
|
+
"@fluentui/react-tabster": "^9.22.8",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.20",
|
|
44
44
|
"@fluentui/react-utilities": "^9.18.15",
|
|
45
45
|
"@griffel/react": "^1.5.22",
|