@fluentui/react-drawer 9.11.1 → 9.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -2
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +2 -2
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js +2 -2
- package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
- package/lib/components/OverlayDrawer/renderOverlayDrawer.js +6 -2
- package/lib/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js +2 -2
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js +2 -2
- package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js +6 -2
- package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js.map +1 -1
- package/package.json +10 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,40 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-drawer
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 12 Feb 2026 10:42:47 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.11.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.3)
|
|
8
|
+
|
|
9
|
+
Thu, 12 Feb 2026 10:42:47 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.2..@fluentui/react-drawer_v9.11.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: use DialogBackdropProvider to fix no dimmed nested dialogs inside OverlayDrawer' ([PR #35692](https://github.com/microsoft/fluentui/pull/35692) by vgenaev@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-dialog to v9.17.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.2)
|
|
19
|
+
|
|
20
|
+
Thu, 22 Jan 2026 17:06:54 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.1..@fluentui/react-drawer_v9.11.2)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-dialog to v9.16.6 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
27
|
+
- Bump @fluentui/react-motion to v9.11.6 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
28
|
+
- Bump @fluentui/react-portal to v9.8.10 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
29
|
+
- Bump @fluentui/react-motion-components-preview to v0.15.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
30
|
+
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
32
|
+
- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
33
|
+
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
34
|
+
|
|
7
35
|
## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.11.1)
|
|
8
36
|
|
|
9
|
-
Wed, 17 Dec 2025 18:
|
|
37
|
+
Wed, 17 Dec 2025 18:10:11 GMT
|
|
10
38
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.11.0..@fluentui/react-drawer_v9.11.1)
|
|
11
39
|
|
|
12
40
|
### Patches
|
package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js
CHANGED
|
@@ -23,7 +23,7 @@ export const useOverlayDrawerSurfaceStyles_unstable = state => {
|
|
|
23
23
|
'use no memo';
|
|
24
24
|
|
|
25
25
|
const {
|
|
26
|
-
|
|
26
|
+
treatBackdropAsNested,
|
|
27
27
|
backdrop,
|
|
28
28
|
open,
|
|
29
29
|
unmountOnClose
|
|
@@ -32,7 +32,7 @@ export const useOverlayDrawerSurfaceStyles_unstable = state => {
|
|
|
32
32
|
const backdropStyles = useBackdropStyles();
|
|
33
33
|
const mountedAndClosed = !unmountOnClose && !open;
|
|
34
34
|
if (backdrop) {
|
|
35
|
-
backdrop.className = mergeClasses(backdropResetStyles,
|
|
35
|
+
backdrop.className = mergeClasses(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
|
|
36
36
|
}
|
|
37
37
|
return state;
|
|
38
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","drawerHidden","Bkecrkj","d","useOverlayDrawerSurfaceStyles_unstable","state","
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","drawerHidden","Bkecrkj","d","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n },\n drawerHidden: {\n pointerEvents: 'none'\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n const mountedAndClosed = !unmountOnClose && !open;\n if (backdrop) {\n backdrop.className = mergeClasses(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGJ,aAAA,wGAIlC,CAAC;AACF,MAAMK,iBAAiB,gBAAGJ,QAAA;EAAAK,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,aAAa;;EACb,MAAM;IAAEC,qBAAqB;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAe,CAAC,GAAGJ,KAAK;EACvE,MAAMK,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EACpD,MAAMc,cAAc,GAAGb,iBAAiB,CAAC,CAAC;EAC1C,MAAMc,gBAAgB,GAAG,CAACH,cAAc,IAAI,CAACD,IAAI;EACjD,IAAID,QAAQ,EAAE;IACVA,QAAQ,CAACM,SAAS,GAAGlB,YAAY,CAACe,mBAAmB,EAAEJ,qBAAqB,IAAIK,cAAc,CAACZ,MAAM,EAAEa,gBAAgB,IAAID,cAAc,CAACV,YAAY,EAAEM,QAAQ,CAACM,SAAS,CAAC;EAC/K;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -20,12 +20,12 @@ const useBackdropStyles = makeStyles({
|
|
|
20
20
|
* Apply styling to the OverlayDrawerSurface slots based on the state
|
|
21
21
|
*/ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
|
|
22
22
|
'use no memo';
|
|
23
|
-
const {
|
|
23
|
+
const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;
|
|
24
24
|
const backdropResetStyles = useBackdropResetStyles();
|
|
25
25
|
const backdropStyles = useBackdropStyles();
|
|
26
26
|
const mountedAndClosed = !unmountOnClose && !open;
|
|
27
27
|
if (backdrop) {
|
|
28
|
-
backdrop.className = mergeClasses(backdropResetStyles,
|
|
28
|
+
backdrop.className = mergeClasses(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
|
|
29
29
|
}
|
|
30
30
|
return state;
|
|
31
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const {
|
|
1
|
+
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n if (backdrop) {\n backdrop.className = mergeClasses(\n backdropResetStyles,\n treatBackdropAsNested && backdropStyles.nested,\n mountedAndClosed && backdropStyles.drawerHidden,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","drawerHidden","pointerEvents","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C;;CAEC,GACD,MAAMC,yBAAyBJ,gBAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBR,WAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,OAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGJ;IAElE,MAAMK,sBAAsBhB;IAC5B,MAAMiB,iBAAiBZ;IAEvB,MAAMa,mBAAmB,CAACH,kBAAkB,CAACD;IAE7C,IAAID,UAAU;QACZA,SAASM,SAAS,GAAGrB,aACnBkB,qBACAJ,yBAAyBK,eAAeX,MAAM,EAC9CY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
import { DrawerProvider } from '../../contexts/drawerContext';
|
|
4
|
+
import { DialogBackdropProvider } from '@fluentui/react-dialog';
|
|
4
5
|
/**
|
|
5
6
|
* Render the final JSX of OverlayDrawer
|
|
6
7
|
*/ export const renderOverlayDrawer_unstable = (state, contextValue)=>{
|
|
7
8
|
assertSlots(state);
|
|
8
9
|
return /*#__PURE__*/ _jsx(DrawerProvider, {
|
|
9
10
|
value: contextValue,
|
|
10
|
-
children: /*#__PURE__*/ _jsx(
|
|
11
|
-
|
|
11
|
+
children: /*#__PURE__*/ _jsx(DialogBackdropProvider, {
|
|
12
|
+
value: false,
|
|
13
|
+
children: /*#__PURE__*/ _jsx(state.dialog, {
|
|
14
|
+
children: /*#__PURE__*/ _jsx(state.root, {})
|
|
15
|
+
})
|
|
12
16
|
})
|
|
13
17
|
});
|
|
14
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n state: OverlayDrawerState,\n contextValue: DrawerContextValue,\n): JSXElement => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.dialog>\n
|
|
1
|
+
{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\nimport { DialogBackdropProvider } from '@fluentui/react-dialog';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n state: OverlayDrawerState,\n contextValue: DrawerContextValue,\n): JSXElement => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <DialogBackdropProvider value={false}>\n <state.dialog>\n <state.root />\n </state.dialog>\n </DialogBackdropProvider>\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","DialogBackdropProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAClF,SAASC,sBAAsB,QAAQ,yBAAyB;AAIhE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,KAACH;QAAeK,OAAOD;kBACrB,cAAA,KAACH;YAAuBI,OAAO;sBAC7B,cAAA,KAACF,MAAMG,MAAM;0BACX,cAAA,KAACH,MAAMI,IAAI;;;;AAKrB,EAAE"}
|
|
@@ -30,12 +30,12 @@ const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
30
30
|
});
|
|
31
31
|
const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
|
|
32
32
|
'use no memo';
|
|
33
|
-
const {
|
|
33
|
+
const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;
|
|
34
34
|
const backdropResetStyles = useBackdropResetStyles();
|
|
35
35
|
const backdropStyles = useBackdropStyles();
|
|
36
36
|
const mountedAndClosed = !unmountOnClose && !open;
|
|
37
37
|
if (backdrop) {
|
|
38
|
-
backdrop.className = (0, _react.mergeClasses)(backdropResetStyles,
|
|
38
|
+
backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
|
|
39
39
|
}
|
|
40
40
|
return state;
|
|
41
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n },\n drawerHidden: {\n pointerEvents: 'none'\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const {
|
|
1
|
+
{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground\n },\n drawerHidden: {\n pointerEvents: 'none'\n }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n const mountedAndClosed = !unmountOnClose && !open;\n if (backdrop) {\n backdrop.className = mergeClasses(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","drawerHidden","Bkecrkj","d","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;+BAoBKW,sCAAsC;;;;;;uBAnBG,gBAAgB;AAE1E;;CAEA,GAAI,MAAMP,sBAAsB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIlC,CAAC;AACF,MAAMK,iBAAiB,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOzB,CAAC;AAGS,gDAAgDE,KAAK,IAAG;IAC/D,aAAa;IACb,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAAA,EAAgB,GAAGJ,KAAK;IACvE,MAAMK,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;IACpD,MAAMc,cAAc,GAAGb,iBAAiB,CAAC,CAAC;IAC1C,MAAMc,gBAAgB,GAAG,CAACH,cAAc,IAAI,CAACD,IAAI;IACjD,IAAID,QAAQ,EAAE;QACVA,QAAQ,CAACM,SAAS,OAAGlB,mBAAY,EAACe,mBAAmB,EAAEJ,qBAAqB,IAAIK,cAAc,CAACZ,MAAM,EAAEa,gBAAgB,IAAID,cAAc,CAACV,YAAY,EAAEM,QAAQ,CAACM,SAAS,CAAC;IAC/K;IACA,OAAOR,KAAK;AAChB,CAAC"}
|
|
@@ -28,12 +28,12 @@ const useBackdropStyles = (0, _react.makeStyles)({
|
|
|
28
28
|
});
|
|
29
29
|
const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
|
|
30
30
|
'use no memo';
|
|
31
|
-
const {
|
|
31
|
+
const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;
|
|
32
32
|
const backdropResetStyles = useBackdropResetStyles();
|
|
33
33
|
const backdropStyles = useBackdropStyles();
|
|
34
34
|
const mountedAndClosed = !unmountOnClose && !open;
|
|
35
35
|
if (backdrop) {
|
|
36
|
-
backdrop.className = (0, _react.mergeClasses)(backdropResetStyles,
|
|
36
|
+
backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
|
|
37
37
|
}
|
|
38
38
|
return state;
|
|
39
39
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const {
|
|
1
|
+
{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n inset: '0px',\n position: 'fixed',\n backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n nested: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n drawerHidden: {\n pointerEvents: 'none',\n },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n\n const backdropResetStyles = useBackdropResetStyles();\n const backdropStyles = useBackdropStyles();\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n if (backdrop) {\n backdrop.className = mergeClasses(\n backdropResetStyles,\n treatBackdropAsNested && backdropStyles.nested,\n mountedAndClosed && backdropStyles.drawerHidden,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","drawerHidden","pointerEvents","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA;;;;;+BA4Bac;;;;;;uBA1B6C,iBAAiB;4BACpD,wBAAwB;AAG/C;;CAEC,GACD,MAAMV,6BAAyBJ,sBAAAA,EAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,kBAAAA,CAAOK,sBAAsB;AAChD;AAEA,MAAMC,wBAAoBR,iBAAAA,EAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,kBAAAA,CAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,+CAA+C,CAACE;IACrD;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGJ;IAElE,MAAMK,sBAAsBhB;IAC5B,MAAMiB,iBAAiBZ;IAEvB,MAAMa,mBAAmB,CAACH,kBAAkB,CAACD;IAE7C,IAAID,UAAU;QACZA,SAASM,SAAS,OAAGrB,mBAAAA,EACnBkB,qBACAJ,yBAAyBK,eAAeX,MAAM,EAC9CY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}
|
|
@@ -11,12 +11,16 @@ Object.defineProperty(exports, "renderOverlayDrawer_unstable", {
|
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
13
|
const _drawerContext = require("../../contexts/drawerContext");
|
|
14
|
+
const _reactdialog = require("@fluentui/react-dialog");
|
|
14
15
|
const renderOverlayDrawer_unstable = (state, contextValue)=>{
|
|
15
16
|
(0, _reactutilities.assertSlots)(state);
|
|
16
17
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
|
|
17
18
|
value: contextValue,
|
|
18
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
19
|
-
|
|
19
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactdialog.DialogBackdropProvider, {
|
|
20
|
+
value: false,
|
|
21
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dialog, {
|
|
22
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
23
|
+
})
|
|
20
24
|
})
|
|
21
25
|
});
|
|
22
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n state: OverlayDrawerState,\n contextValue: DrawerContextValue,\n): JSXElement => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <state.dialog>\n
|
|
1
|
+
{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\nimport { DialogBackdropProvider } from '@fluentui/react-dialog';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n state: OverlayDrawerState,\n contextValue: DrawerContextValue,\n): JSXElement => {\n assertSlots<OverlayDrawerInternalSlots>(state);\n\n return (\n <DrawerProvider value={contextValue}>\n <DialogBackdropProvider value={false}>\n <state.dialog>\n <state.root />\n </state.dialog>\n </DialogBackdropProvider>\n </DrawerProvider>\n );\n};\n"],"names":["assertSlots","DrawerProvider","DialogBackdropProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":";;;;+BAYaG;;;;;;4BAXb,gDAAiD;gCACrB,4BAA4B;+BAEL,+BAA+B;6BAC3C,yBAAyB;AAOzD,qCAAqC,CAC1CC,OACAC;QAEAL,2BAAAA,EAAwCI;IAExC,OAAA,WAAA,OACE,eAAA,EAACH,6BAAAA,EAAAA;QAAeK,OAAOD;kBACrB,WAAA,GAAA,mBAAA,EAACH,mCAAAA,EAAAA;YAAuBI,OAAO;sBAC7B,WAAA,OAAA,eAAA,EAACF,MAAMG,MAAM,EAAA;0BACX,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;;AAKrB,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-drawer",
|
|
3
|
-
"version": "9.11.
|
|
3
|
+
"version": "9.11.3",
|
|
4
4
|
"description": "Drawer components for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -11,24 +11,16 @@
|
|
|
11
11
|
"url": "https://github.com/microsoft/fluentui"
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"devDependencies": {
|
|
15
|
-
"@fluentui/react-provider": "*",
|
|
16
|
-
"@fluentui/eslint-plugin": "*",
|
|
17
|
-
"@fluentui/react-conformance": "*",
|
|
18
|
-
"@fluentui/react-conformance-griffel": "*",
|
|
19
|
-
"@fluentui/scripts-api-extractor": "*",
|
|
20
|
-
"@fluentui/scripts-cypress": "*"
|
|
21
|
-
},
|
|
22
14
|
"dependencies": {
|
|
23
|
-
"@fluentui/react-dialog": "^9.
|
|
24
|
-
"@fluentui/react-jsx-runtime": "^9.
|
|
25
|
-
"@fluentui/react-motion": "^9.11.
|
|
26
|
-
"@fluentui/react-portal": "^9.8.
|
|
27
|
-
"@fluentui/react-motion-components-preview": "^0.
|
|
28
|
-
"@fluentui/react-shared-contexts": "^9.26.
|
|
29
|
-
"@fluentui/react-tabster": "^9.26.
|
|
30
|
-
"@fluentui/react-theme": "^9.2.
|
|
31
|
-
"@fluentui/react-utilities": "^9.26.
|
|
15
|
+
"@fluentui/react-dialog": "^9.17.0",
|
|
16
|
+
"@fluentui/react-jsx-runtime": "^9.4.0",
|
|
17
|
+
"@fluentui/react-motion": "^9.11.6",
|
|
18
|
+
"@fluentui/react-portal": "^9.8.10",
|
|
19
|
+
"@fluentui/react-motion-components-preview": "^0.15.0",
|
|
20
|
+
"@fluentui/react-shared-contexts": "^9.26.1",
|
|
21
|
+
"@fluentui/react-tabster": "^9.26.12",
|
|
22
|
+
"@fluentui/react-theme": "^9.2.1",
|
|
23
|
+
"@fluentui/react-utilities": "^9.26.1",
|
|
32
24
|
"@griffel/react": "^1.5.32",
|
|
33
25
|
"@swc/helpers": "^0.5.1"
|
|
34
26
|
},
|