@fluentui/react-drawer 9.5.13 → 9.5.14
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 +13 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/DrawerBody/useDrawerBody.js +19 -13
- package/lib/components/DrawerBody/useDrawerBody.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawer.types.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawer.js +2 -1
- package/lib/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +7 -3
- package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/DrawerBody/useDrawerBody.js +19 -13
- package/lib-commonjs/components/DrawerBody/useDrawerBody.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawer.types.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js +2 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js +8 -3
- package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 13 Sep 2024 00:48:49 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.14)
|
|
8
|
+
|
|
9
|
+
Fri, 13 Sep 2024 00:48:49 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.13..@fluentui/react-drawer_v9.5.14)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: update scroll state when children changes ([PR #32818](https://github.com/microsoft/fluentui/pull/32818) by marcosvmmoura@gmail.com)
|
|
15
|
+
- fix: apply position: absolute when mountNode is passed ([PR #32816](https://github.com/microsoft/fluentui/pull/32816) by marcosvmmoura@gmail.com)
|
|
16
|
+
- Bump @fluentui/react-dialog to v9.11.14 ([PR #32371](https://github.com/microsoft/fluentui/pull/32371) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.5.13)
|
|
8
19
|
|
|
9
|
-
Tue, 10 Sep 2024 10:
|
|
20
|
+
Tue, 10 Sep 2024 10:19:06 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.5.12..@fluentui/react-drawer_v9.5.13)
|
|
11
22
|
|
|
12
23
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -309,7 +309,7 @@ export declare type OverlayDrawerSlots = {
|
|
|
309
309
|
/**
|
|
310
310
|
* State used in rendering OverlayDrawer
|
|
311
311
|
*/
|
|
312
|
-
export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState>;
|
|
312
|
+
export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState> & Pick<OverlayDrawerProps, 'mountNode'>;
|
|
313
313
|
|
|
314
314
|
declare type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;
|
|
315
315
|
|
|
@@ -6,7 +6,7 @@ import { useDrawerContext_unstable } from '../../contexts/drawerContext';
|
|
|
6
6
|
*
|
|
7
7
|
* Get the current scroll state of the DrawerBody.
|
|
8
8
|
*
|
|
9
|
-
* @param
|
|
9
|
+
* @param element - HTMLElement to check scroll state of
|
|
10
10
|
*/ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
|
|
11
11
|
if (scrollHeight <= clientHeight) {
|
|
12
12
|
return 'none';
|
|
@@ -31,28 +31,34 @@ import { useDrawerContext_unstable } from '../../contexts/drawerContext';
|
|
|
31
31
|
const { setScrollState } = useDrawerContext_unstable();
|
|
32
32
|
const scrollRef = React.useRef(null);
|
|
33
33
|
const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();
|
|
34
|
+
const updateScrollState = React.useCallback(()=>{
|
|
35
|
+
if (!scrollRef.current) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
setScrollState(getScrollState(scrollRef.current));
|
|
39
|
+
}, [
|
|
40
|
+
setScrollState
|
|
41
|
+
]);
|
|
34
42
|
const onScroll = React.useCallback(()=>{
|
|
35
43
|
cancelAnimationFrame();
|
|
36
|
-
setAnimationFrame(()=>
|
|
37
|
-
if (!scrollRef.current) {
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
setScrollState(getScrollState(scrollRef.current));
|
|
41
|
-
});
|
|
44
|
+
setAnimationFrame(()=>updateScrollState());
|
|
42
45
|
}, [
|
|
43
46
|
cancelAnimationFrame,
|
|
44
47
|
setAnimationFrame,
|
|
45
|
-
|
|
48
|
+
updateScrollState
|
|
46
49
|
]);
|
|
47
50
|
useIsomorphicLayoutEffect(()=>{
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
updateScrollState();
|
|
52
|
+
/* update scroll state when children changes */ }, [
|
|
53
|
+
props.children,
|
|
54
|
+
updateScrollState
|
|
55
|
+
]);
|
|
56
|
+
useIsomorphicLayoutEffect(()=>{
|
|
57
|
+
updateScrollState();
|
|
52
58
|
return ()=>cancelAnimationFrame();
|
|
53
59
|
}, [
|
|
54
60
|
cancelAnimationFrame,
|
|
55
|
-
|
|
61
|
+
updateScrollState
|
|
56
62
|
]);
|
|
57
63
|
return {
|
|
58
64
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\n * @param
|
|
1
|
+
{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelAnimationFrame();\n setAnimationFrame(() => updateScrollState());\n }, [cancelAnimationFrame, setAnimationFrame, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n /* update scroll state when children changes */\n }, [props.children, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n\n return () => cancelAnimationFrame();\n }, [cancelAnimationFrame, updateScrollState]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","mergeCallbacks","slot","useAnimationFrame","useMergedRefs","useIsomorphicLayoutEffect","getIntrinsicElementProps","useDrawerContext_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","useDrawerBody_unstable","props","ref","setScrollState","scrollRef","useRef","setAnimationFrame","cancelAnimationFrame","updateScrollState","useCallback","current","onScroll","children","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,IAAI,EACJC,iBAAiB,EACjBC,aAAa,EACbC,yBAAyB,EACzBC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,+BAA+B;AAKzE;;;;;;CAMC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,MAAMS,YAAYhB,MAAMiB,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGhB;IAElD,MAAMiB,oBAAoBpB,MAAMqB,WAAW,CAAC;QAC1C,IAAI,CAACL,UAAUM,OAAO,EAAE;YACtB;QACF;QAEAP,eAAeP,eAAeQ,UAAUM,OAAO;IACjD,GAAG;QAACP;KAAe;IAEnB,MAAMQ,WAAWvB,MAAMqB,WAAW,CAAC;QACjCF;QACAD,kBAAkB,IAAME;IAC1B,GAAG;QAACD;QAAsBD;QAAmBE;KAAkB;IAE/Df,0BAA0B;QACxBe;IACA,6CAA6C,GAC/C,GAAG;QAACP,MAAMW,QAAQ;QAAEJ;KAAkB;IAEtCf,0BAA0B;QACxBe;QAEA,OAAO,IAAMD;IACf,GAAG;QAACA;QAAsBC;KAAkB;IAE5C,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxB,KAAKyB,MAAM,CACfrB,yBAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKV,cAA8BU,KAAkCE;YACrE,GAAGH,KAAK;YACRU,UAAUtB,eAAeY,MAAMU,QAAQ,EAAEA;QAC3C,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -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\n backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\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>
|
|
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 backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\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":"AA4CA;;CAEC,GACD,WAEwC"}
|
|
@@ -21,7 +21,7 @@ const STATIC_MOTION = {
|
|
|
21
21
|
* @param ref - reference to root HTMLElement of OverlayDrawer
|
|
22
22
|
*/ export const useOverlayDrawer_unstable = (props, ref)=>{
|
|
23
23
|
const { open, size, position } = useDrawerDefaultProps(props);
|
|
24
|
-
const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;
|
|
24
|
+
const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
|
|
25
25
|
const backdropProps = slot.resolveShorthand(props.backdrop);
|
|
26
26
|
const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
|
|
27
27
|
const root = slot.always({
|
|
@@ -65,6 +65,7 @@ const STATIC_MOTION = {
|
|
|
65
65
|
open,
|
|
66
66
|
size,
|
|
67
67
|
position,
|
|
68
|
+
mountNode,
|
|
68
69
|
motion: STATIC_MOTION
|
|
69
70
|
};
|
|
70
71
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 } = props;\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 }),\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 motion: STATIC_MOTION,\n };\n};\n"],"names":["Dialog","slot","React","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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\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 }),\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":["Dialog","slot","React","OverlayDrawerMotion","OverlaySurfaceBackdropMotion","useDrawerDefaultProps","OverlayDrawerSurface","mergePresenceSlots","STATIC_MOTION","active","canRender","ref","createRef","type","useOverlayDrawer_unstable","props","open","size","position","backdropMotion","modalType","inertTrapFocus","onOpenChange","surfaceMotion","mountNode","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","dialog","children","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,4BAA4B;AACjD,YAAYC,WAAW,QAAQ;AAE/B,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,mBAAKT,MAAMU,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;IAExG,MAAMU,gBAAgBxB,KAAKyB,gBAAgB,CAACX,MAAMY,QAAQ;IAC1D,MAAMC,oBAAoBR,cAAc,eAAeK,kBAAkB;IAEzE,MAAMI,OAAO5B,KAAK6B,MAAM,CACtB;QACE,GAAGf,KAAK;QACRJ;QACAgB,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;QACrDN,gBAAgBZ,mBAAmBY,gBAAgBf,8BAA8B;YAAEa;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDc,aAAazB;IACf;IAGF,MAAM0B,SAAS/B,KAAK6B,MAAM,CACxB;QACEd;QACAM;QACAD;QACAD;QACAG,eAAehB,mBAAmBgB,eAAepB,qBAAqB;YAAEe;YAAUD;QAAK;QACvF;;;OAGC,GACDgB,UAAU;IACZ,GACA;QACEF,aAAa/B;IACf;IAGF,OAAO;QACLkC,YAAY;YACVL,MAAMvB;YACN0B,QAAQhC;QACV;QAEA6B;QACAG;QAEAhB;QACAC;QACAC;QACAM;QACAW,QAAQ3B;IACV;AACF,EAAE"}
|
|
@@ -20,9 +20,12 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
|
|
|
20
20
|
Bhzewxz: "f198g47y",
|
|
21
21
|
Bqenvij: "fub80nq",
|
|
22
22
|
a9b677: "fr97h3j"
|
|
23
|
+
},
|
|
24
|
+
absolute: {
|
|
25
|
+
qhf8xq: "f1euv43f"
|
|
23
26
|
}
|
|
24
27
|
}, {
|
|
25
|
-
d: [".f198g47y{top:auto;}", ".fub80nq{height:var(--fui-Drawer--size);}", ".fr97h3j{width:100vw;}"]
|
|
28
|
+
d: [".f198g47y{top:auto;}", ".fub80nq{height:var(--fui-Drawer--size);}", ".fr97h3j{width:100vw;}", ".f1euv43f{position:absolute;}"]
|
|
26
29
|
});
|
|
27
30
|
/**
|
|
28
31
|
* Apply styling to the OverlayDrawer slots based on the state
|
|
@@ -33,10 +36,11 @@ export const useOverlayDrawerStyles_unstable = state => {
|
|
|
33
36
|
const baseClassNames = useDrawerBaseClassNames(state);
|
|
34
37
|
const resetStyles = useDrawerResetStyles();
|
|
35
38
|
const rootStyles = useDrawerRootStyles();
|
|
39
|
+
const absoluteStyles = !!state.mountNode && rootStyles.absolute;
|
|
36
40
|
const backdrop = state.root.backdrop;
|
|
37
|
-
state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);
|
|
41
|
+
state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
|
|
38
42
|
if (backdrop) {
|
|
39
|
-
backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdrop.className);
|
|
43
|
+
backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
|
|
40
44
|
}
|
|
41
45
|
return state;
|
|
42
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","d","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","className","position"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGV,aAAA;EAAAW,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,
|
|
1
|
+
{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","r","s","useDrawerRootStyles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","absolute","qhf8xq","d","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","mountNode","className","position"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n },\n absolute: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const absoluteStyles = !!state.mountNode && rootStyles.absolute;\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGV,aAAA;EAAAW,CAAA;EAAAC,CAAA;AAAA,CAMhC,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,KAAA;EAAAC,GAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,cAAc,GAAGnB,uBAAuB,CAACkB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGhB,oBAAoB,CAAC,CAAC;EAC1C,MAAMiB,UAAU,GAAGd,mBAAmB,CAAC,CAAC;EACxC,MAAMe,cAAc,GAAG,CAAC,CAACJ,KAAK,CAACK,SAAS,IAAIF,UAAU,CAACP,QAAQ;EAC/D,MAAMX,QAAQ,GAAGe,KAAK,CAAChB,IAAI,CAACC,QAAQ;EACpCe,KAAK,CAAChB,IAAI,CAACsB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEiB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACO,QAAQ,CAAC,EAAEH,cAAc,EAAEJ,KAAK,CAAChB,IAAI,CAACsB,SAAS,CAAC;EAChK,IAAIrB,QAAQ,EAAE;IACVA,QAAQ,CAACqB,SAAS,GAAG5B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEmB,cAAc,EAAEnB,QAAQ,CAACqB,SAAS,CAAC;EAC3G;EACA,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -17,7 +17,7 @@ const _drawerContext = require("../../contexts/drawerContext");
|
|
|
17
17
|
*
|
|
18
18
|
* Get the current scroll state of the DrawerBody.
|
|
19
19
|
*
|
|
20
|
-
* @param
|
|
20
|
+
* @param element - HTMLElement to check scroll state of
|
|
21
21
|
*/ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
|
|
22
22
|
if (scrollHeight <= clientHeight) {
|
|
23
23
|
return 'none';
|
|
@@ -34,28 +34,34 @@ const useDrawerBody_unstable = (props, ref)=>{
|
|
|
34
34
|
const { setScrollState } = (0, _drawerContext.useDrawerContext_unstable)();
|
|
35
35
|
const scrollRef = _react.useRef(null);
|
|
36
36
|
const [setAnimationFrame, cancelAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
|
|
37
|
+
const updateScrollState = _react.useCallback(()=>{
|
|
38
|
+
if (!scrollRef.current) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
setScrollState(getScrollState(scrollRef.current));
|
|
42
|
+
}, [
|
|
43
|
+
setScrollState
|
|
44
|
+
]);
|
|
37
45
|
const onScroll = _react.useCallback(()=>{
|
|
38
46
|
cancelAnimationFrame();
|
|
39
|
-
setAnimationFrame(()=>
|
|
40
|
-
if (!scrollRef.current) {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
setScrollState(getScrollState(scrollRef.current));
|
|
44
|
-
});
|
|
47
|
+
setAnimationFrame(()=>updateScrollState());
|
|
45
48
|
}, [
|
|
46
49
|
cancelAnimationFrame,
|
|
47
50
|
setAnimationFrame,
|
|
48
|
-
|
|
51
|
+
updateScrollState
|
|
49
52
|
]);
|
|
50
53
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
updateScrollState();
|
|
55
|
+
/* update scroll state when children changes */ }, [
|
|
56
|
+
props.children,
|
|
57
|
+
updateScrollState
|
|
58
|
+
]);
|
|
59
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
60
|
+
updateScrollState();
|
|
55
61
|
return ()=>cancelAnimationFrame();
|
|
56
62
|
}, [
|
|
57
63
|
cancelAnimationFrame,
|
|
58
|
-
|
|
64
|
+
updateScrollState
|
|
59
65
|
]);
|
|
60
66
|
return {
|
|
61
67
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\n * @param
|
|
1
|
+
{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n slot,\n useAnimationFrame,\n useMergedRefs,\n useIsomorphicLayoutEffect,\n getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * @internal\n *\n * Get the current scroll state of the DrawerBody.\n *\n * @param element - HTMLElement to check scroll state of\n */\nconst getScrollState = ({ scrollTop, scrollHeight, clientHeight }: HTMLElement): DrawerScrollState => {\n if (scrollHeight <= clientHeight) {\n return 'none';\n }\n\n if (scrollTop === 0) {\n return 'top';\n }\n\n if (scrollTop + clientHeight === scrollHeight) {\n return 'bottom';\n }\n\n return 'middle';\n};\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n const { setScrollState } = useDrawerContext_unstable();\n\n const scrollRef = React.useRef<HTMLDivElement | null>(null);\n const [setAnimationFrame, cancelAnimationFrame] = useAnimationFrame();\n\n const updateScrollState = React.useCallback(() => {\n if (!scrollRef.current) {\n return;\n }\n\n setScrollState(getScrollState(scrollRef.current));\n }, [setScrollState]);\n\n const onScroll = React.useCallback(() => {\n cancelAnimationFrame();\n setAnimationFrame(() => updateScrollState());\n }, [cancelAnimationFrame, setAnimationFrame, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n /* update scroll state when children changes */\n }, [props.children, updateScrollState]);\n\n useIsomorphicLayoutEffect(() => {\n updateScrollState();\n\n return () => cancelAnimationFrame();\n }, [cancelAnimationFrame, updateScrollState]);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps<DrawerBodyProps>('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs<HTMLDivElement>(ref as React.Ref<HTMLDivElement>, scrollRef),\n ...props,\n onScroll: mergeCallbacks(props.onScroll, onScroll),\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useDrawerBody_unstable","getScrollState","scrollTop","scrollHeight","clientHeight","props","ref","setScrollState","useDrawerContext_unstable","scrollRef","React","useRef","setAnimationFrame","cancelAnimationFrame","useAnimationFrame","updateScrollState","useCallback","current","onScroll","useIsomorphicLayoutEffect","children","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","mergeCallbacks","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+CaA;;;eAAAA;;;;iEA/CU;gCAQhB;+BAEmC;AAK1C;;;;;;CAMC,GACD,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAe;IAC5E,IAAID,gBAAgBC,cAAc;QAChC,OAAO;IACT;IAEA,IAAIF,cAAc,GAAG;QACnB,OAAO;IACT;IAEA,IAAIA,YAAYE,iBAAiBD,cAAc;QAC7C,OAAO;IACT;IAEA,OAAO;AACT;AAWO,MAAMH,yBAAyB,CAACK,OAAwBC;IAC7D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,wCAAAA;IAE3B,MAAMC,YAAYC,OAAMC,MAAM,CAAwB;IACtD,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,IAAAA,iCAAAA;IAElD,MAAMC,oBAAoBL,OAAMM,WAAW,CAAC;QAC1C,IAAI,CAACP,UAAUQ,OAAO,EAAE;YACtB;QACF;QAEAV,eAAeN,eAAeQ,UAAUQ,OAAO;IACjD,GAAG;QAACV;KAAe;IAEnB,MAAMW,WAAWR,OAAMM,WAAW,CAAC;QACjCH;QACAD,kBAAkB,IAAMG;IAC1B,GAAG;QAACF;QAAsBD;QAAmBG;KAAkB;IAE/DI,IAAAA,yCAAAA,EAA0B;QACxBJ;IACA,6CAA6C,GAC/C,GAAG;QAACV,MAAMe,QAAQ;QAAEL;KAAkB;IAEtCI,IAAAA,yCAAAA,EAA0B;QACxBJ;QAEA,OAAO,IAAMF;IACf,GAAG;QAACA;QAAsBE;KAAkB;IAE5C,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAA0C,OAAO;YAC/C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FnB,KAAKoB,IAAAA,6BAAAA,EAA8BpB,KAAkCG;YACrE,GAAGJ,KAAK;YACRa,UAAUS,IAAAA,8BAAAA,EAAetB,MAAMa,QAAQ,EAAEA;QAC3C,IACA;YAAEU,aAAa;QAAM;IAEzB;AACF"}
|
|
@@ -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\n backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\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>
|
|
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 backdropMotion?: Slot<PresenceMotionSlotProps<OverlayDrawerSurfaceMotionParams>>;\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":"AA4CA;;CAEC"}
|
|
@@ -24,7 +24,7 @@ const STATIC_MOTION = {
|
|
|
24
24
|
};
|
|
25
25
|
const useOverlayDrawer_unstable = (props, ref)=>{
|
|
26
26
|
const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
|
|
27
|
-
const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion } = props;
|
|
27
|
+
const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
|
|
28
28
|
const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
|
|
29
29
|
const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
|
|
30
30
|
const root = _reactutilities.slot.always({
|
|
@@ -68,6 +68,7 @@ const useOverlayDrawer_unstable = (props, ref)=>{
|
|
|
68
68
|
open,
|
|
69
69
|
size,
|
|
70
70
|
position,
|
|
71
|
+
mountNode,
|
|
71
72
|
motion: STATIC_MOTION
|
|
72
73
|
};
|
|
73
74
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 } = props;\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 }),\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 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","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","mergePresenceSlots","OverlaySurfaceBackdropMotion","elementType","OverlayDrawerSurface","dialog","OverlayDrawerMotion","children","Dialog","components","motion"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawer.tsx"],"sourcesContent":["import { Dialog } from '@fluentui/react-dialog';\nimport { slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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\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 }),\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","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","mergePresenceSlots","OverlaySurfaceBackdropMotion","elementType","OverlayDrawerSurface","dialog","OverlayDrawerMotion","children","Dialog","components","motion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;6BA1BU;gCACF;iEACE;+BAE2C;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;IAExG,MAAMW,gBAAgBC,oBAAAA,CAAKC,gBAAgB,CAACb,MAAMc,QAAQ;IAC1D,MAAMC,oBAAoBT,cAAc,eAAeK,kBAAkB;IAEzE,MAAMK,OAAOJ,oBAAAA,CAAKK,MAAM,CACtB;QACE,GAAGjB,KAAK;QACRJ;QACAkB,UAAUC,oBAAoB;YAAE,GAAGJ,aAAa;QAAC,IAAI;QACrDN,gBAAgBa,IAAAA,qCAAAA,EAAmBb,gBAAgBc,2CAAAA,EAA8B;YAAEjB;QAAK;IAC1F,GACA;QACE;;;OAGC,GACDkB,aAAaC,0CAAAA;IACf;IAGF,MAAMC,SAASV,oBAAAA,CAAKK,MAAM,CACxB;QACEhB;QACAO;QACAD;QACAD;QACAG,eAAeS,IAAAA,qCAAAA,EAAmBT,eAAec,kCAAAA,EAAqB;YAAEpB;YAAUD;QAAK;QACvF;;;OAGC,GACDsB,UAAU;IACZ,GACA;QACEJ,aAAaK,mBAAAA;IACf;IAGF,OAAO;QACLC,YAAY;YACVV,MAAMK,0CAAAA;YACNC,QAAQG,mBAAAA;QACV;QAEAT;QACAM;QAEArB;QACAC;QACAC;QACAO;QACAiB,QAAQlC;IACV;AACF"}
|
|
@@ -51,12 +51,16 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
|
|
|
51
51
|
Bhzewxz: "f198g47y",
|
|
52
52
|
Bqenvij: "fub80nq",
|
|
53
53
|
a9b677: "fr97h3j"
|
|
54
|
+
},
|
|
55
|
+
absolute: {
|
|
56
|
+
qhf8xq: "f1euv43f"
|
|
54
57
|
}
|
|
55
58
|
}, {
|
|
56
59
|
d: [
|
|
57
60
|
".f198g47y{top:auto;}",
|
|
58
61
|
".fub80nq{height:var(--fui-Drawer--size);}",
|
|
59
|
-
".fr97h3j{width:100vw;}"
|
|
62
|
+
".fr97h3j{width:100vw;}",
|
|
63
|
+
".f1euv43f{position:absolute;}"
|
|
60
64
|
]
|
|
61
65
|
});
|
|
62
66
|
const useOverlayDrawerStyles_unstable = (state)=>{
|
|
@@ -64,10 +68,11 @@ const useOverlayDrawerStyles_unstable = (state)=>{
|
|
|
64
68
|
const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
|
|
65
69
|
const resetStyles = useDrawerResetStyles();
|
|
66
70
|
const rootStyles = useDrawerRootStyles();
|
|
71
|
+
const absoluteStyles = !!state.mountNode && rootStyles.absolute;
|
|
67
72
|
const backdrop = state.root.backdrop;
|
|
68
|
-
state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);
|
|
73
|
+
state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
|
|
69
74
|
if (backdrop) {
|
|
70
|
-
backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, backdrop.className);
|
|
75
|
+
backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
|
|
71
76
|
}
|
|
72
77
|
return state;
|
|
73
78
|
}; //# sourceMappingURL=useOverlayDrawerStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdrop.className);\n }\n return state;\n};\n"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","d","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","className","mergeClasses","position"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const overlayDrawerClassNames = {\n root: 'fui-OverlayDrawer',\n backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n ...drawerDefaultStyles,\n position: 'fixed',\n top: 0,\n bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n /* Positioning */ start: {},\n end: {},\n bottom: {\n top: 'auto',\n height: `var(${drawerCSSVars.drawerSizeVar})`,\n width: '100vw'\n },\n absolute: {\n position: 'absolute'\n }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const baseClassNames = useDrawerBaseClassNames(state);\n const resetStyles = useDrawerResetStyles();\n const rootStyles = useDrawerRootStyles();\n const absoluteStyles = !!state.mountNode && rootStyles.absolute;\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n }\n return state;\n};\n"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","r","s","useDrawerRootStyles","__styles","start","end","bottom","Bhzewxz","Bqenvij","a9b677","absolute","qhf8xq","d","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","absoluteStyles","mountNode","className","mergeClasses","position"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA2BIC,+BAA+B;eAA/BA;;;;iEA/BM;wBACmC;2CAEkB;AACrE,MAAMD,0BAA0B;IACnCE,MAAM;IACNC,UAAU;AACd;AACA;;CAEA,GAAI,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,qBAAA,EAAA,WAAA,WAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAOjC,MAAMC,sBAAmB,WAAA,GAAGC,IAAAA,gBAAA,EAAA;IAAAC,OAAA,CAAA;IAAAC,KAAA,CAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,UAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAcjB,MAAMjB,kCAAmCkB,CAAAA;IAChD;IACA,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAclB;IACpB,MAAMmB,aAAaf;IACnB,MAAMgB,iBAAiB,CAAC,CAACL,MAAMM,SAAS,IAAIF,WAAWP,QAAQ;IAC/D,MAAMb,WAAWgB,MAAMjB,IAAI,CAACC,QAAQ;IACpCgB,MAAMjB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,oBAAY,EAAC3B,wBAAwBE,IAAI,EAAEkB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMS,QAAQ,CAAC,EAAEJ,gBAAgBL,MAAMjB,IAAI,CAACwB,SAAS;IAC/J,IAAIvB,UAAU;QACVA,SAASuB,SAAS,GAAGC,IAAAA,oBAAY,EAAC3B,wBAAwBG,QAAQ,EAAEqB,gBAAgBrB,SAASuB,SAAS;IAC1G;IACA,OAAOP;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.14",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@fluentui/scripts-cypress": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-dialog": "^9.11.
|
|
38
|
+
"@fluentui/react-dialog": "^9.11.14",
|
|
39
39
|
"@fluentui/react-jsx-runtime": "^9.0.43",
|
|
40
40
|
"@fluentui/react-motion": "^9.5.1",
|
|
41
41
|
"@fluentui/react-shared-contexts": "^9.20.0",
|