@fluentui/react-drawer 9.5.14 → 9.5.16
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 +28 -2
- package/dist/index.d.ts +2 -1
- package/lib/components/InlineDrawer/useInlineDrawer.js +4 -1
- package/lib/components/InlineDrawer/useInlineDrawer.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawer.js +5 -2
- package/lib/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib/shared/drawerMotions.js +27 -20
- package/lib/shared/drawerMotions.js.map +1 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js +4 -1
- package/lib-commonjs/components/InlineDrawer/useInlineDrawer.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js +5 -2
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib-commonjs/shared/drawerMotions.js +28 -20
- package/lib-commonjs/shared/drawerMotions.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 26 Sep 2024 14:14:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.16)
|
|
8
|
+
|
|
9
|
+
Thu, 26 Sep 2024 14:14:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.15..@fluentui/react-drawer_v9.5.16)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: reversed animations ([PR #32924](https://github.com/microsoft/fluentui/pull/32924) by marcosvmmoura@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-dialog to v9.11.16 ([PR #32924](https://github.com/microsoft/fluentui/pull/32924) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.15)
|
|
18
|
+
|
|
19
|
+
Mon, 23 Sep 2024 12:40:13 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.14..@fluentui/react-drawer_v9.5.15)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- fix: add correct direction of animations when RTL ([PR #32813](https://github.com/microsoft/fluentui/pull/32813) by marcosvmmoura@gmail.com)
|
|
25
|
+
- Bump @fluentui/react-dialog to v9.11.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.44 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
27
|
+
- Bump @fluentui/react-motion to v9.5.2 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
28
|
+
- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.22.7 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
30
|
+
- Bump @fluentui/react-theme to v9.1.20 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.14)
|
|
8
34
|
|
|
9
|
-
Fri, 13 Sep 2024 00:
|
|
35
|
+
Fri, 13 Sep 2024 00:49:24 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.13..@fluentui/react-drawer_v9.5.14)
|
|
11
37
|
|
|
12
38
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import type { DialogSurfaceProps } from '@fluentui/react-dialog';
|
|
|
7
7
|
import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
|
|
8
8
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
9
9
|
import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
|
|
10
|
+
import { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
10
11
|
import * as React_2 from 'react';
|
|
11
12
|
import type { Slot } from '@fluentui/react-utilities';
|
|
12
13
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
@@ -178,7 +179,7 @@ export declare type DrawerHeaderTitleSlots = {
|
|
|
178
179
|
*/
|
|
179
180
|
export declare type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;
|
|
180
181
|
|
|
181
|
-
declare type DrawerMotionParams = Required<Pick<DrawerBaseProps, 'size' | 'position'>>;
|
|
182
|
+
declare type DrawerMotionParams = Required<Pick<DrawerBaseProps, 'size' | 'position'> & Pick<ProviderContextValue_unstable, 'dir'>>;
|
|
182
183
|
|
|
183
184
|
/**
|
|
184
185
|
* Drawer Props
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
2
3
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
|
-
import
|
|
4
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
5
|
import { InlineDrawerMotion } from '../../shared/drawerMotions';
|
|
5
6
|
import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
6
7
|
const STATIC_MOTION = {
|
|
@@ -20,6 +21,7 @@ const STATIC_MOTION = {
|
|
|
20
21
|
*/ export const useInlineDrawer_unstable = (props, ref)=>{
|
|
21
22
|
const { size, position, open } = useDrawerDefaultProps(props);
|
|
22
23
|
const { separator = false, surfaceMotion } = props;
|
|
24
|
+
const { dir } = useFluent();
|
|
23
25
|
const state = {
|
|
24
26
|
components: {
|
|
25
27
|
root: 'div',
|
|
@@ -43,6 +45,7 @@ const STATIC_MOTION = {
|
|
|
43
45
|
defaultProps: {
|
|
44
46
|
position,
|
|
45
47
|
size,
|
|
48
|
+
dir,
|
|
46
49
|
visible: open,
|
|
47
50
|
unmountOnExit: true
|
|
48
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport
|
|
1
|
+
{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n const { dir } = useFluent();\n\n const state: InlineDrawerState = {\n components: {\n root: 'div',\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n unmountOnExit: true,\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n };\n\n return state;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","separator","surfaceMotion","dir","state","components","root","always","elementType","defaultProps","visible","unmountOnExit","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGX,sBAAsBQ;IACvD,MAAM,EAAEI,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGL;IAC7C,MAAM,EAAEM,GAAG,EAAE,GAAGhB;IAEhB,MAAMiB,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFJ,eAAed;QACjB;QAEAkB,MAAMrB,KAAKsB,MAAM,CACfvB,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;QACF,IACA;YAAEe,aAAa;QAAM;QAGvBR;QACAD;QACAD;QACAG;QACAC,eAAenB,mBAAuCmB,eAAe;YACnEM,aAAapB;YACbqB,cAAc;gBACZV;gBACAD;gBACAK;gBACAO,SAASV;gBACTW,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQtB;IACV;IAEA,OAAOc;AACT,EAAE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { Dialog } from '@fluentui/react-dialog';
|
|
2
3
|
import { slot } from '@fluentui/react-utilities';
|
|
3
|
-
import
|
|
4
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
5
|
import { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';
|
|
5
6
|
import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
6
7
|
import { OverlayDrawerSurface } from './OverlayDrawerSurface';
|
|
@@ -22,6 +23,7 @@ const STATIC_MOTION = {
|
|
|
22
23
|
*/ export const useOverlayDrawer_unstable = (props, ref)=>{
|
|
23
24
|
const { open, size, position } = useDrawerDefaultProps(props);
|
|
24
25
|
const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
|
|
26
|
+
const { dir } = useFluent();
|
|
25
27
|
const backdropProps = slot.resolveShorthand(props.backdrop);
|
|
26
28
|
const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
|
|
27
29
|
const root = slot.always({
|
|
@@ -46,7 +48,8 @@ const STATIC_MOTION = {
|
|
|
46
48
|
modalType,
|
|
47
49
|
surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, {
|
|
48
50
|
position,
|
|
49
|
-
size
|
|
51
|
+
size,
|
|
52
|
+
dir
|
|
50
53
|
}),
|
|
51
54
|
/**
|
|
52
55
|
* children is not needed here because we construct the children in the render function,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;\n const { dir } = useFluent();\n\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n const root = slot.always(\n {\n ...props,\n ref,\n backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n },\n {\n /**\n * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n */\n elementType: OverlayDrawerSurface as unknown as 'div',\n },\n );\n\n const dialog = slot.always(\n {\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size, dir }),\n /**\n * children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */\n children: null as unknown as JSX.Element,\n },\n {\n elementType: Dialog,\n },\n );\n\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: Dialog,\n },\n\n root,\n dialog,\n\n open,\n size,\n position,\n mountNode,\n motion: STATIC_MOTION,\n };\n};\n"],"names":["React","Dialog","slot","useFluent_unstable","useFluent","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","mountNode","dir","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,mBAAmB,EAAEC,4BAA4B,QAAQ,6BAA6B;AAC/F,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKb,MAAMc,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGb,sBAAsBU;IACvD,MAAM,EAAEI,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGT;IACxG,MAAM,EAAEU,GAAG,EAAE,GAAGvB;IAEhB,MAAMwB,gBAAgB1B,KAAK2B,gBAAgB,CAACZ,MAAMa,QAAQ;IAC1D,MAAMC,oBAAoBT,cAAc,eAAeM,kBAAkB;IAEzE,MAAMI,OAAO9B,KAAK+B,MAAM,CACtB;QACE,GAAGhB,KAAK;QACRJ;QACAiB,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDP,gBAAgBZ,mBAAmBY,gBAAgBf,8BAA8B;YAAEa;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDe,aAAa1B;IACf;IAGF,MAAM2B,SAASjC,KAAK+B,MAAM,CACxB;QACEf;QACAM;QACAD;QACAD;QACAG,eAAehB,mBAAmBgB,eAAepB,qBAAqB;YAAEe;YAAUD;YAAMQ;QAAI;QAC5F;;;OAGC,GACDS,UAAU;IACZ,GACA;QACEF,aAAajC;IACf;IAGF,OAAO;QACLoC,YAAY;YACVL,MAAMxB;YACN2B,QAAQlC;QACV;QAEA+B;QACAG;QAEAjB;QACAC;QACAC;QACAM;QACAY,QAAQ5B;IACV;AACF,EAAE"}
|
|
@@ -9,18 +9,30 @@ const durations = {
|
|
|
9
9
|
};
|
|
10
10
|
/**
|
|
11
11
|
* @internal
|
|
12
|
-
*/ export
|
|
12
|
+
*/ export function getPositionTransform(position, sizeVar, dir) {
|
|
13
|
+
const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;
|
|
14
|
+
const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;
|
|
15
|
+
const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;
|
|
16
|
+
if (position === 'start') {
|
|
17
|
+
return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;
|
|
18
|
+
}
|
|
19
|
+
if (position === 'end') {
|
|
20
|
+
return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;
|
|
21
|
+
}
|
|
22
|
+
if (position === 'bottom') {
|
|
23
|
+
return bottomToTopTransform;
|
|
24
|
+
}
|
|
25
|
+
return 'translate3d(0, 0, 0)';
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
*/ export const InlineDrawerMotion = createPresenceComponent(({ position, size, dir })=>{
|
|
13
30
|
const keyframes = [
|
|
14
31
|
{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
transform: `translate3d(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`
|
|
20
|
-
},
|
|
21
|
-
...position === 'bottom' && {
|
|
22
|
-
transform: `translate3d(0, var(${drawerCSSVars.drawerSizeVar}), 0)`
|
|
23
|
-
},
|
|
32
|
+
/**
|
|
33
|
+
* TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
|
|
34
|
+
* The work will be done in the #32817
|
|
35
|
+
*/ transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),
|
|
24
36
|
opacity: 0
|
|
25
37
|
},
|
|
26
38
|
{
|
|
@@ -46,18 +58,13 @@ const durations = {
|
|
|
46
58
|
});
|
|
47
59
|
/**
|
|
48
60
|
* @internal
|
|
49
|
-
*/ export const OverlayDrawerMotion = createPresenceComponent(({ position, size })=>{
|
|
61
|
+
*/ export const OverlayDrawerMotion = createPresenceComponent(({ position, size, dir })=>{
|
|
50
62
|
const keyframes = [
|
|
51
63
|
{
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
transform: `translate3d(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`
|
|
57
|
-
},
|
|
58
|
-
...position === 'bottom' && {
|
|
59
|
-
transform: `translate3d(0, calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0)`
|
|
60
|
-
},
|
|
64
|
+
/**
|
|
65
|
+
* TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
|
|
66
|
+
* The work will be done in the #32817
|
|
67
|
+
*/ transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),
|
|
61
68
|
boxShadow: `0px ${tokens.colorTransparentBackground}`,
|
|
62
69
|
opacity: 0
|
|
63
70
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required
|
|
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"}
|
|
@@ -9,9 +9,10 @@ Object.defineProperty(exports, "useInlineDrawer_unstable", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
12
13
|
const _reactmotion = require("@fluentui/react-motion");
|
|
13
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
-
const
|
|
15
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
15
16
|
const _drawerMotions = require("../../shared/drawerMotions");
|
|
16
17
|
const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
|
|
17
18
|
const STATIC_MOTION = {
|
|
@@ -23,6 +24,7 @@ const STATIC_MOTION = {
|
|
|
23
24
|
const useInlineDrawer_unstable = (props, ref)=>{
|
|
24
25
|
const { size, position, open } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
25
26
|
const { separator = false, surfaceMotion } = props;
|
|
27
|
+
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
26
28
|
const state = {
|
|
27
29
|
components: {
|
|
28
30
|
root: 'div',
|
|
@@ -46,6 +48,7 @@ const useInlineDrawer_unstable = (props, ref)=>{
|
|
|
46
48
|
defaultProps: {
|
|
47
49
|
position,
|
|
48
50
|
size,
|
|
51
|
+
dir,
|
|
49
52
|
visible: open,
|
|
50
53
|
unmountOnExit: true
|
|
51
54
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport
|
|
1
|
+
{"version":3,"sources":["useInlineDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n const { size, position, open } = useDrawerDefaultProps(props);\n const { separator = false, surfaceMotion } = props;\n const { dir } = useFluent();\n\n const state: InlineDrawerState = {\n components: {\n root: 'div',\n // casting from internal type that has required properties\n // to external type that only has optional properties\n // converting to unknown first as both Function component signatures are not compatible\n surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n open,\n position,\n size,\n separator,\n surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n elementType: InlineDrawerMotion,\n defaultProps: {\n position,\n size,\n dir,\n visible: open,\n unmountOnExit: true,\n },\n }),\n\n // Deprecated props\n motion: STATIC_MOTION,\n };\n\n return state;\n};\n"],"names":["useInlineDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","size","position","open","useDrawerDefaultProps","separator","surfaceMotion","dir","useFluent","state","components","root","InlineDrawerMotion","slot","always","getIntrinsicElementProps","elementType","presenceMotionSlot","defaultProps","visible","unmountOnExit","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;iEAzBU;6BACY;gCACY;qCACC;+BAEY;uCACtB;AAGtC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,2BAA2B,CAACQ,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,QAA2B;QAC/BC,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFL,eAAeM,iCAAAA;QACjB;QAEAD,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,GAAGf,KAAK;YACRJ;QACF,IACA;YAAEoB,aAAa;QAAM;QAGvBb;QACAD;QACAD;QACAI;QACAC,eAAeW,IAAAA,+BAAAA,EAAuCX,eAAe;YACnEU,aAAaJ,iCAAAA;YACbM,cAAc;gBACZhB;gBACAD;gBACAM;gBACAY,SAAShB;gBACTiB,eAAe;YACjB;QACF;QAEA,mBAAmB;QACnBC,QAAQ5B;IACV;IAEA,OAAOgB;AACT"}
|
|
@@ -9,9 +9,10 @@ Object.defineProperty(exports, "useOverlayDrawer_unstable", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
12
13
|
const _reactdialog = require("@fluentui/react-dialog");
|
|
13
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
-
const
|
|
15
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
15
16
|
const _drawerMotions = require("../../shared/drawerMotions");
|
|
16
17
|
const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
|
|
17
18
|
const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
|
|
@@ -25,6 +26,7 @@ const STATIC_MOTION = {
|
|
|
25
26
|
const useOverlayDrawer_unstable = (props, ref)=>{
|
|
26
27
|
const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
27
28
|
const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
|
|
29
|
+
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
28
30
|
const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
|
|
29
31
|
const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
|
|
30
32
|
const root = _reactutilities.slot.always({
|
|
@@ -49,7 +51,8 @@ const useOverlayDrawer_unstable = (props, ref)=>{
|
|
|
49
51
|
modalType,
|
|
50
52
|
surfaceMotion: (0, _drawerMotionUtils.mergePresenceSlots)(surfaceMotion, _drawerMotions.OverlayDrawerMotion, {
|
|
51
53
|
position,
|
|
52
|
-
size
|
|
54
|
+
size,
|
|
55
|
+
dir
|
|
53
56
|
}),
|
|
54
57
|
/**
|
|
55
58
|
* children is not needed here because we construct the children in the render function,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\nimport { mergePresenceSlots } from '../../shared/drawerMotionUtils';\n\nconst STATIC_MOTION = {\n active: true,\n canRender: true,\n ref: React.createRef<HTMLDivElement>(),\n type: 'idle' as const,\n};\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n props: OverlayDrawerProps,\n ref: React.Ref<HTMLElement>,\n): OverlayDrawerState => {\n const { open, size, position } = useDrawerDefaultProps(props);\n const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;\n const { dir } = useFluent();\n\n const backdropProps = slot.resolveShorthand(props.backdrop);\n const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n const root = slot.always(\n {\n ...props,\n ref,\n backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, { size }),\n },\n {\n /**\n * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n */\n elementType: OverlayDrawerSurface as unknown as 'div',\n },\n );\n\n const dialog = slot.always(\n {\n open,\n onOpenChange,\n inertTrapFocus,\n modalType,\n surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, { position, size, dir }),\n /**\n * children is not needed here because we construct the children in the render function,\n * but it's required by DialogProps\n */\n children: null as unknown as JSX.Element,\n },\n {\n elementType: Dialog,\n },\n );\n\n return {\n components: {\n root: OverlayDrawerSurface,\n dialog: Dialog,\n },\n\n root,\n dialog,\n\n open,\n size,\n position,\n mountNode,\n motion: STATIC_MOTION,\n };\n};\n"],"names":["useOverlayDrawer_unstable","STATIC_MOTION","active","canRender","ref","React","createRef","type","props","open","size","position","useDrawerDefaultProps","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","mountNode","dir","useFluent","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","mergePresenceSlots","OverlaySurfaceBackdropMotion","elementType","OverlayDrawerSurface","dialog","OverlayDrawerMotion","children","Dialog","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BaA;;;eAAAA;;;;iEA3BU;6BACA;gCACF;qCAC2B;+BAEkB;uCAC5B;sCAED;mCACF;AAEnC,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAAA,WAAAA,GAAKC,OAAMC,SAAS;IACpBC,MAAM;AACR;AAWO,MAAMP,4BAA4B,CACvCQ,OACAJ;IAEA,MAAM,EAAEK,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAAA,EAAsBJ;IACvD,MAAM,EAAEK,cAAc,EAAEC,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGV;IACxG,MAAM,EAAEW,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAEhB,MAAMC,gBAAgBC,oBAAAA,CAAKC,gBAAgB,CAACf,MAAMgB,QAAQ;IAC1D,MAAMC,oBAAoBX,cAAc,eAAeO,kBAAkB;IAEzE,MAAMK,OAAOJ,oBAAAA,CAAKK,MAAM,CACtB;QACE,GAAGnB,KAAK;QACRJ;QACAoB,UAAUC,oBAAoB;YAAE,GAAGJ,aAAa;QAAC,IAAI;QACrDR,gBAAgBe,IAAAA,qCAAAA,EAAmBf,gBAAgBgB,2CAAAA,EAA8B;YAAEnB;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDoB,aAAaC,0CAAAA;IACf;IAGF,MAAMC,SAASV,oBAAAA,CAAKK,MAAM,CACxB;QACElB;QACAO;QACAD;QACAD;QACAG,eAAeW,IAAAA,qCAAAA,EAAmBX,eAAegB,kCAAAA,EAAqB;YAAEtB;YAAUD;YAAMS;QAAI;QAC5F;;;OAGC,GACDe,UAAU;IACZ,GACA;QACEJ,aAAaK,mBAAAA;IACf;IAGF,OAAO;QACLC,YAAY;YACVV,MAAMK,0CAAAA;YACNC,QAAQG,mBAAAA;QACV;QAEAT;QACAM;QAEAvB;QACAC;QACAC;QACAO;QACAmB,QAAQpC;IACV;AACF"}
|
|
@@ -17,6 +17,9 @@ _export(exports, {
|
|
|
17
17
|
},
|
|
18
18
|
OverlaySurfaceBackdropMotion: function() {
|
|
19
19
|
return OverlaySurfaceBackdropMotion;
|
|
20
|
+
},
|
|
21
|
+
getPositionTransform: function() {
|
|
22
|
+
return getPositionTransform;
|
|
20
23
|
}
|
|
21
24
|
});
|
|
22
25
|
const _reactmotion = require("@fluentui/react-motion");
|
|
@@ -28,18 +31,28 @@ const durations = {
|
|
|
28
31
|
large: _reactmotion.motionTokens.durationSlower,
|
|
29
32
|
full: _reactmotion.motionTokens.durationUltraSlow
|
|
30
33
|
};
|
|
31
|
-
|
|
34
|
+
function getPositionTransform(position, sizeVar, dir) {
|
|
35
|
+
const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;
|
|
36
|
+
const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;
|
|
37
|
+
const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;
|
|
38
|
+
if (position === 'start') {
|
|
39
|
+
return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;
|
|
40
|
+
}
|
|
41
|
+
if (position === 'end') {
|
|
42
|
+
return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;
|
|
43
|
+
}
|
|
44
|
+
if (position === 'bottom') {
|
|
45
|
+
return bottomToTopTransform;
|
|
46
|
+
}
|
|
47
|
+
return 'translate3d(0, 0, 0)';
|
|
48
|
+
}
|
|
49
|
+
const InlineDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size, dir })=>{
|
|
32
50
|
const keyframes = [
|
|
33
51
|
{
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
transform: `translate3d(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}), 0, 0)`
|
|
39
|
-
},
|
|
40
|
-
...position === 'bottom' && {
|
|
41
|
-
transform: `translate3d(0, var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}), 0)`
|
|
42
|
-
},
|
|
52
|
+
/**
|
|
53
|
+
* TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
|
|
54
|
+
* The work will be done in the #32817
|
|
55
|
+
*/ transform: getPositionTransform(position, _useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar, dir),
|
|
43
56
|
opacity: 0
|
|
44
57
|
},
|
|
45
58
|
{
|
|
@@ -63,18 +76,13 @@ const InlineDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position
|
|
|
63
76
|
}
|
|
64
77
|
};
|
|
65
78
|
});
|
|
66
|
-
const OverlayDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size })=>{
|
|
79
|
+
const OverlayDrawerMotion = (0, _reactmotion.createPresenceComponent)(({ position, size, dir })=>{
|
|
67
80
|
const keyframes = [
|
|
68
81
|
{
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
transform: `translate3d(calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`
|
|
74
|
-
},
|
|
75
|
-
...position === 'bottom' && {
|
|
76
|
-
transform: `translate3d(0, calc(var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar}) * 1), 0)`
|
|
77
|
-
},
|
|
82
|
+
/**
|
|
83
|
+
* TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
|
|
84
|
+
* The work will be done in the #32817
|
|
85
|
+
*/ transform: getPositionTransform(position, _useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar, dir),
|
|
78
86
|
boxShadow: `0px ${_reacttheme.tokens.colorTransparentBackground}`,
|
|
79
87
|
opacity: 0
|
|
80
88
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required
|
|
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.16",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.11.
|
|
39
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
40
|
-
"@fluentui/react-motion": "^9.5.
|
|
41
|
-
"@fluentui/react-shared-contexts": "^9.20.
|
|
42
|
-
"@fluentui/react-tabster": "^9.22.
|
|
43
|
-
"@fluentui/react-theme": "^9.1.
|
|
44
|
-
"@fluentui/react-utilities": "^9.18.
|
|
38
|
+
"@fluentui/react-dialog": "^9.11.16",
|
|
39
|
+
"@fluentui/react-jsx-runtime": "^9.0.44",
|
|
40
|
+
"@fluentui/react-motion": "^9.5.2",
|
|
41
|
+
"@fluentui/react-shared-contexts": "^9.20.1",
|
|
42
|
+
"@fluentui/react-tabster": "^9.22.7",
|
|
43
|
+
"@fluentui/react-theme": "^9.1.20",
|
|
44
|
+
"@fluentui/react-utilities": "^9.18.15",
|
|
45
45
|
"@griffel/react": "^1.5.22",
|
|
46
46
|
"@swc/helpers": "^0.5.1"
|
|
47
47
|
},
|